/* self-hosted fonts (latin subsets, was Google Fonts CDN) */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/bebas-neue-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-adjusted local fallback for Bebas: h1/h2 render in this until the woff2
   lands, so the swap reflow is near-zero (Bebas is condensed; plain Arial at 100%
   would be ~30% wider and shove the hero CTA around). */
@font-face {
  font-family: 'Bebas Fallback';
  src: local('Arial Narrow'), local('Arial');
  size-adjust: 78%;
  ascent-override: 100%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/space-grotesk-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/space-grotesk-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/space-grotesk-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/space-grotesk-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/space-mono-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/space-mono-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --hot is reserved for money actions only (Get/Buy Tickets). Same discipline for
   glow: resting glow lives ONLY on conversion surfaces (solid join .btn, .btn.hot,
   .biobtn.primary, .scene-frak, .countdown.live). Passive hovers get border + lift,
   never a halo, so the things that glow are the things we want clicked.
   Filled buttons use dark ink text (--ink), not white: passes WCAG AA on both the
   blue and the pink, and black-type-on-neon is the flyer look anyway. */
:root{--bg:#07080c;--panel:#101219;--line:#1e2330;--txt:#eef1f7;--dim:#868da0;--acc:#3d7bff;--acc2:#5fe3ff;--glow:rgba(61,123,255,.45);--hot:#ff3da6;--hotglow:rgba(255,61,166,.45);--field:#080a10;--ink:#04060a;--hot2:#ff6bbd;--t-fast:.15s ease;--t-move:.45s cubic-bezier(.2,.7,.2,1);color-scheme:dark}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
/* faint SVG-turbulence grain tile kills the flat-template look; a repeating
   background (not a fixed overlay) so scrolling never repaints the whole layer */
body{background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E");color:var(--txt);font:17px/1.7 'Space Grotesk',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--acc);text-decoration:none;transition:color .15s}
a:hover{color:var(--acc2)}
::selection{background:rgba(61,123,255,.45);color:#fff}
/* one focus language sitewide: brand-cyan ring for keyboard users only */
:focus-visible{outline:2px solid var(--acc2);outline-offset:3px;border-radius:4px}
:focus:not(:focus-visible){outline:none}
/* Display face at display scale ONLY: Bebas for h1/h2 + wordmark, Grotesk 700 for
   h3/card titles/buttons, Mono for labels and data. Caps never track negative. */
h1,h2{font-family:'Bebas Neue','Bebas Fallback',sans-serif;font-weight:400;text-transform:uppercase}
h1{font-size:clamp(40px,7.5vw,80px);letter-spacing:.015em;line-height:.95;text-wrap:balance}
h2{font-size:clamp(30px,4.5vw,48px);letter-spacing:.02em;line-height:1;margin-bottom:24px}
h3{font-family:'Space Grotesk',sans-serif;font-weight:700;line-height:1.05;text-transform:uppercase;letter-spacing:.01em}
/* visible breadcrumb trail on deep pages; built from the same items as the
   BreadcrumbList schema so the two never drift */
.crumbs{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:18px}
.crumbs a{color:var(--dim)}
.crumbs a:hover{color:var(--acc2)}
.crumbs span{color:var(--txt)}
/* editorial mono kicker (was 18-27px cyan Bebas): one eyebrow voice, led by a tick */
.script{font-family:'Space Mono',monospace;color:var(--dim);font-size:12px;text-transform:uppercase;letter-spacing:.22em;margin-bottom:10px;font-weight:400;line-height:1.4}
.script::before{content:"";display:inline-block;width:22px;height:1px;background:var(--acc2);vertical-align:middle;margin-right:10px}
/* prose rhythm: the global margin reset needs a paragraph rule or long sections
   render as walls. .kw rows (calendar/meta lines) keep their own tighter rhythm. */
.wrap p+p:not(.kw){margin-top:15px}
.wrap h2:not(:first-child){margin-top:40px}
.wrap .script+h2{margin-top:0}
.top{display:flex;justify-content:space-between;align-items:center;padding:16px 5vw;position:sticky;top:0;background:rgba(7,8,12,.82);backdrop-filter:blur(10px);z-index:10;border-bottom:1px solid var(--line)}
.logo{font-family:'Bebas Neue','Bebas Fallback',sans-serif;font-weight:400;letter-spacing:.14em;color:var(--txt);font-size:21px;text-transform:uppercase;line-height:1}
.logo span{color:var(--acc)}
/* flex+wrap so the items sit on clean rows when the header runs out of width;
   inline-block children (the Work With Us group) would otherwise land on a
   different baseline than their siblings. */
.top nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;column-gap:26px;row-gap:4px}
.top nav a{color:var(--dim);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-family:'Space Mono',monospace}
.top nav a:hover{color:var(--acc2)}
/* you-are-here state, stamped as aria-current="page" by build.py on non-frozen pages */
.top nav a[aria-current]{color:var(--txt);border-bottom:2px solid var(--acc);padding-bottom:2px}
/* Promo List is the header's one call-to-action: same ghost treatment as .btn.ghost,
   sized down to nav scale. Blue only -- --hot stays reserved for ticket buttons. */
.top nav a.nav-cta{color:var(--txt);border:1px solid var(--acc);border-radius:2px;padding:7px 13px;transition:var(--t-fast)}
.top nav a.nav-cta:hover{color:var(--acc2);border-color:var(--acc2)}
/* "Work With Us" groups the three apply-to-us pages so the header keeps six items
   instead of eight (eight uppercase mono links overflow a phone). The parent is a
   real link to the hub page, so tap-only devices and no-JS still reach all three. */
/* flex+center, not inline-block: the span is not an <a>, so it inherits the header's
   17px Space Grotesk line box and its inline child would sit on that larger baseline,
   riding ~1px lower than its siblings. As a flex parent the link is centered instead. */
.navgrp{position:relative;display:flex;align-items:center}
.navgrp>a::after{content:" \25BE";opacity:.65}
/* animatable open/close with a ~140ms hover-out grace period (display:none snapped
   shut the moment the pointer slipped 1px) */
.navmenu{display:block;visibility:hidden;opacity:0;transform:translateY(4px);position:absolute;top:100%;left:0;padding:10px 0;min-width:180px;background:rgba(16,18,25,.97);border:1px solid var(--line);border-radius:2px;box-shadow:0 18px 44px rgba(0,0,0,.6);transition:opacity .14s ease,transform .14s ease,visibility 0s linear .14s}
.navgrp:hover .navmenu,.navgrp:focus-within .navmenu{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.top nav .navmenu a{display:block;margin:0;padding:9px 16px;letter-spacing:.12em;white-space:nowrap}
.top nav .navmenu a:hover{background:rgba(255,255,255,.06)}
/* --- mobile nav sheet (<=900px). Pure-CSS checkbox: #navtoggle is the first child of
   <body>, so both the header and the panel are following siblings it can style. All 13
   destinations ship in the initial HTML, which mobile-first indexing credits in full,
   and no JS is required to open it (the JS in page() only closes it). --- */
.navburger{display:none;width:26px;height:18px;position:relative;cursor:pointer;flex:0 0 auto;margin-left:20px}
.navburger span,.navburger span::before,.navburger span::after{position:absolute;left:0;width:26px;height:2px;background:var(--txt);border-radius:2px;transition:transform var(--t-fast),background var(--t-fast)}
.navburger span{top:8px}
.navburger span::before{content:"";top:-8px}
.navburger span::after{content:"";top:8px}
/* open state morphs the three bars into an X, so the same control closes the sheet */
#navtoggle:checked~.top .navburger span{background:transparent}
#navtoggle:checked~.top .navburger span::before{transform:translateY(8px) rotate(45deg)}
#navtoggle:checked~.top .navburger span::after{transform:translateY(-8px) rotate(-45deg)}
.navpanel{display:none}
#navtoggle:checked~.navpanel{display:block}
/* stop the page scrolling behind the open sheet; :has() is progressive, no-support
   just leaves the old behaviour */
html:has(#navtoggle:checked){overflow:hidden}
.hero{position:relative;min-height:74vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
/* footage carries the section; darkening is localized to the text zone by the
   ::after scrim instead of drowning the whole frame in a flat wash */
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.48;filter:saturate(1.05) hue-rotate(-25deg) contrast(1.08) brightness(.92)}
/* video loop layered over the still once it can play; same tint so the swap is seamless */
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease;filter:saturate(1.05) hue-rotate(-25deg) contrast(1.08) brightness(.92)}
.hero-vid.on{opacity:.52}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 35%,rgba(61,123,255,.22),transparent 62%),linear-gradient(180deg,rgba(7,8,12,.55),rgba(7,8,12,.25) 30%,transparent 55%,var(--bg))}
.hero-text{position:relative;z-index:1;padding:60px 20px}
.hero h1{font-size:clamp(46px,10vw,112px);text-shadow:0 4px 40px rgba(0,0,0,.9)}
.hero .script{color:var(--acc2);text-shadow:0 2px 18px rgba(0,0,0,.9)}
.hero-ev{font-family:'Space Mono',monospace;color:var(--acc2);letter-spacing:.08em;font-size:15px;margin-top:16px;text-shadow:0 2px 18px rgba(0,0,0,.9)}
/* inline promo capture on the homepage: one email field + button, stacked on phones */
.joinform{display:flex;gap:10px;max-width:520px;margin:24px auto 0}
.joinform input[type=email]{flex:1;min-width:0;background:var(--field);border:1px solid var(--line);border-radius:2px;padding:13px 14px;color:var(--txt);font:inherit}
.joinform input[type=email]:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--glow)}
.joinform .btn{margin:0;white-space:nowrap}
@media(max-width:560px){.joinform{flex-direction:column}}
.promoband{display:block;background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:18px 24px;margin-top:34px;color:var(--txt);line-height:1.55;transition:var(--t-fast)}
.promoband b{color:var(--acc2);text-transform:uppercase;letter-spacing:.04em;margin-right:6px}
.promoband:hover{border-color:var(--acc);color:var(--txt)}
.btn{display:inline-block;background:var(--acc);color:var(--ink);padding:13px 30px;border-radius:2px;font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:14px;margin:18px 8px 0;border:1px solid var(--acc);box-shadow:0 0 24px var(--glow);transition:var(--t-fast)}
.btn:hover{background:var(--acc2);border-color:var(--acc2);color:var(--ink);box-shadow:0 0 34px var(--glow)}
.btn:active{transform:translateY(1px);box-shadow:0 0 12px var(--glow)}
.btn.ghost{background:transparent;color:var(--txt);border-color:var(--acc);box-shadow:none}
.btn.ghost:hover{border-color:var(--acc2);color:var(--acc2);background:transparent;box-shadow:none}
.btn.ghost:active{transform:translateY(1px)}
.btn.hot{background:var(--hot);border-color:var(--hot);color:var(--ink);box-shadow:0 0 24px var(--hotglow)}
.btn.hot:hover{background:var(--hot2);border-color:var(--hot2);color:var(--ink);box-shadow:0 0 34px var(--hotglow)}
.btn.hot:active{transform:translateY(1px);box-shadow:0 0 12px var(--hotglow)}
.wrap{max-width:1050px;margin:0 auto;padding:70px 5vw}
/* consecutive sections used to double up to 140px dead gaps; close every
   follow-on section to a designed rhythm (~106px total) */
.wrap~.wrap{padding-top:36px}
.narrow{max-width:640px}
.center{text-align:center}
/* page intro utilities (replaces per-page inline styles that had drifted) */
.lead{max-width:720px;margin-bottom:24px}
.mt{margin-top:28px}
/* full-bleed section bands chapter the homepage; .band-join makes the email capture
   the brightest moment on the page */
.band{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-join{background:radial-gradient(ellipse at 50% 0%,rgba(61,123,255,.10),transparent 60%),var(--panel)}
.band+.wrap{padding-top:36px}
/* event card as a poster: flyer bleeds to the card edge, info column carries the
   padding, date reads as a block-level mono stamp */
.event{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:0;background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:0;overflow:hidden;margin-bottom:28px}
.event .flyer img{width:100%;height:auto;border-radius:0;display:block}
.event .info{padding:28px 32px}
.event h3{font-size:clamp(24px,3vw,30px);margin-bottom:8px}
.event .date{font-family:'Space Mono',monospace;color:var(--acc2);font-weight:400;font-size:15px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:10px}
.event .tagline{font-style:normal;color:var(--dim);font-size:15px;letter-spacing:.01em;margin-bottom:12px}
.event .kw{margin-top:14px;color:var(--dim)}
/* --- /events/ calendar search (progressive enhancement; .evsearch ships hidden) --- */
[hidden]{display:none !important}
.is-out{display:none}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.evsearch{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:26px 0 4px}
.evsearch input[type=search]{flex:1;min-width:220px;background:var(--field);border:1px solid var(--line);border-radius:2px;padding:12px 14px;color:var(--txt);font:inherit}
.evsearch input[type=search]:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--glow)}
.evsearch #evclear{background:transparent;border:1px solid var(--line);border-radius:2px;color:var(--dim);padding:12px 16px;font:inherit;cursor:pointer;transition:var(--t-fast)}
.evsearch #evclear:hover{color:var(--txt);border-color:var(--acc)}
.evsearch #evcount{flex-basis:100%;margin:0}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--acc2);text-decoration:underline;cursor:pointer}
/* group headers inside the /events/ scene calendar + homepage weekend strip */
.scene-h{font-family:'Space Mono',monospace;color:var(--acc2);font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin:30px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--line)}
/* RA-grammar listing rows (scene calendar + homepage strip): fixed mono date
   column, hairline row rules, mono price/age meta right-aligned */
.evrow{display:grid;grid-template-columns:96px 1fr auto;column-gap:16px;align-items:baseline;padding:10px 2px;margin:0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.5}
.evrow b{font-family:'Space Mono',monospace;font-weight:400;color:var(--acc2);font-size:13px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.evrow .ev-m{font-family:'Space Mono',monospace;font-size:13px;color:var(--dim);text-align:right;white-space:nowrap}
@media(max-width:640px){.evrow{grid-template-columns:1fr;row-gap:2px;padding:12px 2px}.evrow .ev-m{text-align:left;white-space:normal}}
/* --- /events/ jump chips: the calendar is one tap from the intro, and the
   sticky .top bar must not swallow the heading an anchor lands on --- */
.jumpchips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px}
.jumpchips a{font-family:'Space Mono',monospace;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--acc2);border:1px solid var(--line);border-radius:999px;padding:9px 16px;text-decoration:none;transition:var(--t-fast)}
.jumpchips a:hover{border-color:var(--acc);color:var(--txt)}
.jumpchips a:focus-visible{border-color:var(--acc);box-shadow:0 0 0 3px var(--glow);outline:none}
/* Offsets are the measured .top height plus breathing room: 68px on one desktop row,
   60px once the hamburger collapses the mobile header. One value now covers both,
   because the header sticks at every width again (it only stopped sticking on mobile
   as a workaround for the two-row wrap the hamburger removed). */
.scene-h,#scene-list,#our-events,#past-events,#djs,#join,#past{scroll-margin-top:88px}
/* Fraktured-day feature card inside the /events/ scene calendar list */
.scene-frak{margin:20px 0;padding:16px 18px;border:1px solid rgba(61,123,255,.6);border-radius:2px;background:linear-gradient(135deg,rgba(61,123,255,.18),rgba(95,227,255,.06));box-shadow:0 0 26px rgba(61,123,255,.28)}
.scene-frak .sfk-tag{font-family:'Space Mono',monospace;color:var(--acc2);letter-spacing:.14em;font-size:12px;text-transform:uppercase;margin-bottom:7px}
.scene-frak .sfk-line{font-size:18px;margin:0}
.scene-frak .sfk-btns{margin-top:12px;display:flex;gap:12px;flex-wrap:wrap}
.scene-frak .btn{padding:9px 18px;font-size:13px}
.countdown{display:inline-block;font-family:'Space Mono',monospace;font-size:14px;letter-spacing:.05em;color:var(--acc2);background:rgba(61,123,255,.1);border:1px solid var(--line);border-radius:2px;padding:7px 13px;margin-bottom:14px;min-width:150px}
.countdown.live{color:var(--ink);background:var(--acc2);border-color:var(--acc2);font-weight:700;animation:cdpulse 1.4s ease-in-out infinite}
.countdown.ended{color:var(--dim);background:transparent}
@keyframes cdpulse{50%{opacity:.6}}
.stickybar{display:none}
@media(max-width:760px){
  .stickybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;gap:1px;background:var(--line);box-shadow:0 -6px 22px rgba(0,0,0,.55)}
  /* env() keeps the buttons clear of the iPhone home indicator; resolves to 0
     elsewhere (and until viewport-fit=cover ships in the meta viewport) */
  .stickybar .sbtn{flex:1;display:flex;align-items:center;justify-content:center;white-space:nowrap;line-height:1;padding:16px 8px calc(16px + env(safe-area-inset-bottom));font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:14px;border:0;border-radius:0;transition:filter .1s}
  .stickybar .sbtn:active{filter:brightness(1.25)}
  .stickybar .sbtn-tickets{background:var(--hot);color:var(--ink)}
  .stickybar .sbtn-join{background:var(--panel);color:var(--txt)}
  .stickybar.solo .sbtn-join{background:var(--acc);color:var(--ink)}
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
}
/* centered wrapping flex instead of a grid: 13 cards no longer strand a lone
   left-aligned orphan on the last row */
.djgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
/* Photo card: square portrait with the name/genres on a bottom gradient, same
   pattern as .galcard. aspect-ratio + the img width/height attrs kill CLS.
   Portraits are graded to a house blue duotone at rest (13 unrelated Instagram
   grades read as chaos); the real photo pops in color on hover, and each DJ's
   profile page still shows the untreated shot. */
.djcard{position:relative;overflow:hidden;display:block;flex:1 1 180px;max-width:226px;aspect-ratio:1/1;
  border:1px solid var(--line);border-radius:2px;background:var(--panel);transition:var(--t-fast)}
.djcard img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.1) brightness(.92);transition:opacity .3s ease,transform var(--t-move),filter .3s ease}
.djcard:not(.noimg)::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(61,123,255,.5),rgba(95,227,255,.18));mix-blend-mode:color;pointer-events:none;transition:opacity .3s ease}
.djcard:hover{border-color:var(--acc);transform:translateY(-2px)}
.djcard:hover img{filter:none;transform:scale(1.03)}
.djcard:hover::after{opacity:0}
.djname{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:30px 12px 10px;
  background:linear-gradient(transparent,rgba(0,0,0,.92));
  font-family:'Space Grotesk',sans-serif;font-weight:600;
  letter-spacing:.03em;font-size:16px;color:#fff;line-height:1.25}
.djname .sub{font-family:'Space Mono',monospace;font-size:12px;
  letter-spacing:.05em;text-transform:none;color:var(--acc2);margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Fallback text tile for a DJ without a photo: the original textured button --
   blue under-glow, fine diagonal hatching, dark panel gradient, lit top hairline. */
.djcard.noimg{aspect-ratio:auto;min-height:104px;padding:18px 16px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:
    radial-gradient(120% 90% at 50% 118%, rgba(61,123,255,.20), transparent 68%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.024) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, #141824 0%, #0c0e15 100%);
  border-radius:2px;color:var(--txt);
  font-family:'Space Grotesk',sans-serif;font-weight:500;text-transform:uppercase;
  letter-spacing:.04em;font-size:17px;line-height:1.25}
.djcard.noimg::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(95,227,255,.34),transparent)}
.djcard.noimg span{position:relative}
.djcard.noimg:hover{color:var(--acc2);transform:translateY(-2px)}
.djcard.noimg:hover::before{background:linear-gradient(90deg,transparent,rgba(95,227,255,.8),transparent)}
.djpage{text-align:center}
.djpage .djphoto{max-width:min(520px,100%);height:auto;border-radius:2px;margin:22px auto;display:block}
.djgenres{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0 4px}
.djgenres span{font-family:'Space Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--acc2);border:1px solid var(--line);border-radius:999px;padding:6px 13px;background:rgba(61,123,255,.08)}
.djbio{max-width:660px;margin:0 auto;text-align:left}
.djbio p{margin-bottom:18px}
.djlinks{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 8px;justify-content:center}
.djlinks a{font-family:'Space Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--acc2);border:1px solid var(--line);border-radius:999px;padding:8px 15px;transition:var(--t-fast)}
.djlinks a:hover{border-color:var(--acc);color:var(--acc2)}
/* press kit / rider: documents, not profiles - filled so they read as assets to grab */
.djlinks a.doc{background:rgba(61,123,255,.14);border-color:rgba(61,123,255,.5);color:var(--txt)}
.djlinks a.doc:hover{border-color:var(--acc);color:var(--acc2)}
/* --- press kit (/<slug>/epk/): a document a promoter reads top-to-bottom, so it
   runs left-aligned in sections rather than centered like the .djpage profile.
   Same reading order as the Brook B kit: lede+downloads, bio, at-a-glance,
   photos, listen, booking. --- */
.epkpage .djgenres{justify-content:flex-start;margin:14px 0 18px}
.epk-lede{color:var(--dim);max-width:66ch;margin-bottom:6px}
.epk-dl{display:flex;flex-wrap:wrap;gap:0 4px;align-items:center}
.epk-sec{border-top:1px solid var(--line)}
.epk-bio p{max-width:70ch;color:var(--dim)}
.epk-bio p:first-child{color:var(--txt)}
.epk-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.epk-cols .script:not(:first-child){margin-top:26px}
/* key/value rows: hairline-ruled list, mono key, so the facts scan like a spec
   sheet instead of prose */
.epk-facts{list-style:none;max-width:560px}
.epk-facts li{display:flex;flex-wrap:wrap;gap:4px 14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--dim)}
.epk-facts li:last-child{border-bottom:0}
.epk-facts b{font-family:'Space Mono',monospace;font-weight:400;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc2);flex:0 0 108px;padding-top:2px}
.epk-facts span{flex:1 1 240px}
.epk-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.epk-chips li{font-family:'Space Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--txt);border:1px solid var(--line);border-radius:999px;padding:7px 14px;background:rgba(61,123,255,.08)}
/* Track count is stated by the renderer (.n1/.n2) rather than auto-fit: a lone press
   photo in a 1fr track stretches to the full 1050px measure and swallows the page,
   and auto-fill's leftover empty track leaves a two-photo row visibly lopsided. */
.epk-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:4px}
.epk-photos.n1{grid-template-columns:minmax(0,460px)}
.epk-photos.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.epk-photos figure{border:1px solid var(--line);border-radius:2px;background:var(--panel);overflow:hidden}
/* uniform 4:3 crop weighted up the frame, so a square portrait keeps the face */
.epk-photos img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center 30%;display:block}
.epk-photos figcaption{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:11px 13px;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
/* Artist logo preview. Most of these marks are white art on transparency, so a
   near-black panel would render them invisible; the tile is a light neutral on
   purpose, and doubles as a check that the downloaded file really is cut out. */
.epk-logo{display:flex;align-items:center;justify-content:center;min-height:132px;padding:20px 24px;margin-bottom:14px;border:1px solid var(--line);border-radius:2px;background:#20242e}
.epk-logo img{max-width:100%;max-height:112px;width:auto;height:auto;display:block}
.btn-sm{padding:9px 18px;font-size:13px;margin:12px 8px 0 0}
.epk-links{list-style:none;max-width:560px}
.epk-links li{padding:10px 0;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--dim);overflow-wrap:anywhere}
.epk-links li:last-child{border-bottom:0}
.epk-links b{font-family:'Space Mono',monospace;font-weight:400;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc2);margin-right:8px}
.epk-book{background:linear-gradient(135deg,rgba(61,123,255,.16),rgba(30,79,214,.07));border:1px solid rgba(61,123,255,.55);border-radius:2px;padding:36px 28px;text-align:center}
.epk-book h2{margin-bottom:10px}
.epk-book p{color:var(--dim);max-width:52ch;margin:0 auto}
.epk-book .epk-dl{justify-content:center;margin-top:6px}
@media(max-width:760px){
  .epk-cols{grid-template-columns:1fr;gap:30px}
  .epk-facts b{flex-basis:100%}
  .epk-photos,.epk-photos.n1,.epk-photos.n2{grid-template-columns:minmax(0,1fr)}
  .epk-book{padding:28px 20px}
}
/* 70ch measure: the long-form SEO prose was running ~100 characters per line */
.about p{color:var(--dim);max-width:70ch}
.about p:first-of-type{color:var(--txt)}
.faq{max-width:720px}
.faq-item{border:1px solid var(--line);border-radius:2px;background:var(--panel);margin-bottom:10px}
.faq-item summary{cursor:pointer;list-style:none;padding:16px 18px;font-weight:600;color:var(--txt);transition:color .15s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';float:right;color:var(--acc2);font-weight:400;font-size:20px;line-height:1;display:inline-block;transition:transform .2s ease}
.faq-item[open] summary,.faq-item summary:hover{color:var(--acc2)}
.faq-item[open] summary::after{transform:rotate(45deg)}
@keyframes faqIn{from{opacity:0;translate:0 -4px}}
.faq-item[open] p{animation:faqIn .25s ease}
.faq-item p{color:var(--dim);margin:0;padding:0 18px 16px;max-width:none}
.promo{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:28px;margin-top:24px}
.promo label{display:block;color:var(--dim);font-family:'Space Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.12em;margin:16px 0 6px}
.promo input{width:100%;background:var(--field);border:1px solid var(--line);border-radius:2px;padding:13px 14px;color:var(--txt);font:inherit}
.promo input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--glow)}
.promo textarea{width:100%;background:var(--field);border:1px solid var(--line);border-radius:2px;padding:13px 14px;color:var(--txt);font:inherit;resize:vertical}
.promo textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--glow)}
.promo input[type=file]{width:100%;background:var(--field);border:1px dashed var(--line);border-radius:2px;padding:13px 14px;color:var(--dim);font:inherit}
/* match the text inputs; appearance:none so the OS control doesn't render a light
   native dropdown against the dark form. The caret is a background SVG (on --dim). */
.promo select{width:100%;background:var(--field);border:1px solid var(--line);border-radius:2px;padding:13px 40px 13px 14px;color:var(--txt);font:inherit;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23868da0' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px}
.promo select:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--glow)}
.promo select option{background:var(--field);color:var(--txt)}
/* (date-picker indicator filter removed: color-scheme:dark renders it light natively) */
.fld{margin-top:4px}
.fld label{display:block;color:var(--dim);font-family:'Space Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.12em;margin:16px 0 6px}
.req{color:var(--acc2)}
.fhelp{display:block;color:var(--dim);font-size:13px;text-transform:none;letter-spacing:normal;margin:-2px 0 8px;font-family:'Space Grotesk',sans-serif}
.radrow{display:flex;gap:10px;flex-wrap:wrap}
.promo .rad,.promo .ck{display:flex;align-items:flex-start;gap:9px;cursor:pointer;color:var(--txt);text-transform:none;letter-spacing:normal;font-family:'Space Grotesk',sans-serif;font-size:15px;margin:16px 0 2px;line-height:1.5}
.promo .rad{align-items:center;border:1px solid var(--line);border-radius:2px;padding:11px 18px;margin:0}
.promo .rad input,.promo .ck input{width:auto;margin:0}
.promo .ck input{margin-top:3px}
.promo .ck span{flex:1}
.hp{position:absolute;left:-9999px;height:0;width:0;opacity:0}
.big{font-size:20px}
.small{font-size:13px}
.dim{color:var(--dim)}
/* mono tag replacing the pasted-in ticket emoji on the giveaway line (non-frozen
   surfaces only; the frozen /promo-list keeps its own wording untouched) */
.tag-draw{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc2);border:1px solid var(--line);border-radius:2px;padding:3px 8px;margin-right:8px;vertical-align:1px;white-space:nowrap}
.bio{max-width:480px;margin:0 auto;padding:44px 5vw 60px;text-align:center}
.biobtn{display:block;background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:15px 20px;margin:14px 0;color:var(--txt);font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:.02em;transition:var(--t-fast)}
.biobtn:hover{border-color:var(--acc);color:var(--acc2);transform:translateY(-2px)}
.biobtn:active{transform:translateY(1px)}
.biobtn.primary{background:var(--acc);border-color:var(--acc);color:var(--ink);box-shadow:0 0 24px var(--glow)}
.biobtn.primary:hover{background:var(--acc2);border-color:var(--acc2);color:var(--ink)}
.biobtn .sub{display:block;font-size:13px;color:var(--dim);font-weight:400}
.biobtn.primary .sub{color:var(--ink);opacity:.75}
/* full-bleed crowd-photo strip on the homepage: one link to /photos/. Fixed row
   height so lazy thumbs cause zero layout shift; muted grade desktop-only. */
.mosaic{display:grid;grid-template-columns:repeat(7,1fr);height:140px;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel)}
/* ~ not +: the JOIN_JS script tag sits between the band and the mosaic */
.band~.mosaic{border-top:0}
.mosaic img{width:100%;height:140px;object-fit:cover;display:block;opacity:.85;transition:opacity .3s ease,filter .3s ease}
.mosaic:hover img{opacity:1}
@media(hover:hover){.mosaic img{filter:grayscale(.55) contrast(1.05)}.mosaic:hover img{filter:none}}
@media(max-width:600px){.mosaic{grid-template-columns:repeat(4,1fr);height:110px}.mosaic img{height:110px}.mosaic img:nth-child(n+5){display:none}}
.galgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.galcard{position:relative;border-radius:2px;overflow:hidden;border:1px solid var(--line);background:var(--panel);display:block;transition:var(--t-fast)}
/* locked 3:2 ratio: fixed pixel heights let the crop drift with viewport width */
.galcard img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;display:block;opacity:.82;transition:opacity .3s ease,transform var(--t-move),filter .3s ease}
.galcard:hover{border-color:var(--acc);transform:translateY(-2px)}
.galcard:hover img{opacity:1;transform:scale(1.03)}
.galname{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.9));font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:.02em;font-size:17px;color:#fff;line-height:1.3}
.galname .small{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.wwugrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.wwucard{display:flex;flex-direction:column;gap:8px;padding:26px 22px;border:1px solid var(--line);border-radius:2px;background:var(--panel);transition:var(--t-fast)}
.wwucard:hover{border-color:var(--acc);transform:translateY(-2px)}
.wwukicker{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc2)}
.wwuname{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px;color:#fff;line-height:1.2}
.wwugo{margin-top:auto;padding-top:10px;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc2)}
.phgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;grid-auto-flow:dense}
.ph{display:block;background:var(--panel);border-radius:2px}
.ph img{width:100%;height:150px;object-fit:cover;border-radius:2px;display:block;opacity:.9;transition:opacity .3s ease,filter .3s ease}
.ph:hover img{opacity:1}
/* editorial feature tier: the curation pass already puts the best shots first,
   so the first two anchor the page at 2x (same 480px thumbs, zero added weight) */
@media(min-width:601px){
  .phgrid .ph:nth-child(-n+2){grid-column:span 2;grid-row:span 2}
  .phgrid .ph:nth-child(-n+2) img{height:100%;min-height:308px}
}
/* desktop-only muted-at-rest grade: full color reveals on hover. Touch devices
   (no hover) keep full-color photos - the crowd shots are the social proof. */
@media(hover:hover){
  .galcard img,.ph img{filter:grayscale(.55) contrast(1.05)}
  .galcard:hover img,.ph:hover img{filter:none}
}
.vidgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.vid{width:100%;max-height:70vh;background:#000;border-radius:2px;display:block}
.modal{position:fixed;inset:0;background:rgba(4,5,8,.8);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;z-index:60;padding:20px}
.modal.open{display:flex;animation:lbIn .18s ease}
.modal-box{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:28px;max-width:470px;width:100%;box-shadow:0 24px 70px rgba(0,0,0,.65)}
.modal-box h2{margin:2px 0 10px}
.modal-box .btn{display:block;width:100%;text-align:center;margin:12px 0 0}
@keyframes lbIn{from{opacity:0}}
.lb{position:fixed;inset:0;background:rgba(4,5,8,.95);display:none;align-items:center;justify-content:center;z-index:50}
.lb.open{display:flex;animation:lbIn .18s ease}
.lb img{max-width:94vw;max-height:92vh;border-radius:2px;transition:opacity .2s}
.lb button{position:absolute;top:50%;transform:translateY(-50%);background:none;border:none;color:#fff;font-size:44px;cursor:pointer;padding:16px 20px;line-height:1;opacity:.75;transition:opacity .15s,color .15s}
.lb button:hover{opacity:1;color:var(--acc2)}
.lb .prev{left:4px}.lb .next{right:4px}
.lb .close{top:14px;right:10px;transform:none;font-size:28px}
.lb .lbn{position:absolute;bottom:16px;left:0;right:0;text-align:center;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.14em;color:var(--dim)}
@media(max-width:600px){.phgrid{grid-template-columns:repeat(3,1fr)}.ph img{height:110px}.vidgrid{grid-template-columns:1fr}}
/* signature fracture rule: a hairline broken at center, the one motif that says
   Fraktured (usable anywhere via .frak-rule; the footer wears it by default) */
.frak-rule,footer::before{height:1px;background:linear-gradient(90deg,var(--line) 0 calc(50% - 14px),transparent calc(50% - 14px) calc(50% - 6px),var(--acc2) calc(50% - 6px) calc(50% + 6px),transparent calc(50% + 6px) calc(50% + 14px),var(--line) calc(50% + 14px))}
.frak-rule{margin:0 5vw}
footer{text-align:center;padding:48px 5vw;color:var(--dim)}
footer::before{content:"";display:block;max-width:1050px;margin:0 auto 44px}
footer p{margin:6px 0}
/* The mark itself, finally on the page: assets/logo-inv.png is the sticker recoloured
   for the dark site (black art -> --txt, white die-cut edge -> --bg, so the edge reads
   as separation rather than a white blob). Explicit width/height, no CLS. */
.footlogo{width:230px;max-width:60vw;height:auto;opacity:.85;margin:0 auto 18px;display:block}
/* Four grouped columns replace five undifferentiated centred rows, and carry all 13
   nav destinations (the old footer omitted 6 of them). auto-fit collapses 4 -> 2 -> 1
   on the way down without a single breakpoint. */
.fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:26px 32px;max-width:1050px;margin:30px auto;text-align:left}
.fcols a{display:block;color:var(--dim);padding:4px 0;font-size:15px}
.fcols a:hover{color:var(--acc2)}
.fkick{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc2);margin-bottom:8px}
/* gallery share button: brief cyan confirmation flash, then reverts */
.sharebtn{cursor:pointer}
.sharebtn.ok{border-color:var(--acc2);color:var(--acc2)}
/* 8 nav items need ~884px at full tracking; tighten the gap and letter-spacing between
   the hamburger breakpoint and the width where full tracking fits one row on its own. */
@media(min-width:901px) and (max-width:1320px){.top nav{column-gap:17px}.top nav a{letter-spacing:.1em}}
/* <=900px the header collapses to logo + Promo List CTA + hamburger on a single 60px
   row; it used to flex-wrap into two ragged rows ~136px tall, which is why the mobile
   header stopped sticking at all. Height is fixed rather than padding-derived so the
   sheet's top offset matches it exactly at every font size. */
@media(max-width:900px){
  .top{height:60px;padding:0 5vw}
  .top nav{margin-left:auto;column-gap:0}
  .top nav>*:not(.nav-cta){display:none}
  .navburger{display:block}
  .navpanel{position:fixed;top:60px;left:0;right:0;bottom:0;z-index:39;overflow-y:auto;
    background:rgba(7,8,12,.97);backdrop-filter:blur(10px);
    padding:24px 5vw calc(96px + env(safe-area-inset-bottom))}
  .navpanel a{display:block;font-family:'Space Grotesk',sans-serif;font-size:16px;
    letter-spacing:.02em;color:var(--txt);padding:14px 0;border-bottom:1px solid var(--line)}
  .navpanel a:active{color:var(--acc2)}
  .npkick{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--acc2);margin:26px 0 2px}
}
@media(max-width:760px){.event{grid-template-columns:1fr}}

/* rave guide articles */
.guide{text-align:left;margin-top:22px;max-width:70ch}
.guide p{margin-bottom:16px;color:var(--dim,inherit)}
.guide h2{font-size:clamp(24px,3.4vw,34px);margin:38px 0 14px}
.guide ul{margin:0 0 16px 20px}
.guide li{margin-bottom:10px}

/* --- proof strip under the hero --- */
.proofbar{display:flex;gap:10px 26px;flex-wrap:wrap;justify-content:center;font-family:'Space Mono',monospace;color:var(--dim);font-size:14px;letter-spacing:.06em;padding:14px 20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel)}
.proofbar b{color:var(--acc2);font-weight:700}
/* --- gallery recap header (flyer + prose): the flyer is the scene's physical
   artifact, framed like printed stock instead of a bare rectangle --- */
.galrecap{display:flex;gap:26px;align-items:flex-start;margin-top:22px}
.galrecap .galflyer{flex:0 0 240px;max-width:240px}
.galrecap .galflyer img{width:100%;height:auto;border-radius:2px;display:block;border:1px solid var(--line);box-shadow:0 14px 38px rgba(0,0,0,.5);transition:border-color .3s ease,transform var(--t-move)}
.galrecap .galflyer a:hover img{border-color:var(--acc);transform:translateY(-2px)}
.galrecap .recaptext p{color:var(--dim);max-width:640px;margin-bottom:12px}
.galrecap .recaptext .kw{color:var(--dim)}
@media(max-width:640px){.galrecap{flex-direction:column}.galrecap .galflyer{max-width:200px}}
/* --- slim inline capture band (galleries, guides, events zero-state, 404) --- */
.joincap{border:1px solid var(--line);border-radius:2px;background:var(--panel);padding:20px 22px;margin:26px 0;text-align:center}
.joincap p{margin-bottom:4px}
.joincap .small{color:var(--dim)}
/* motion-sensitive users: no smooth scroll, no pulse, near-zero transitions */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .countdown.live{animation:none}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}