/* Self-hosted so the strict CSP on www does not have to allow an external
   font origin. Latin subset only; the estate is English. */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/anton-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:'Barlow Condensed';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/barlow-condensed-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:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/barlow-condensed-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:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/barlow-condensed-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:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/barlow-condensed-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:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/dm-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:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/dm-mono-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;}

:root{
  --black:#000;
  --void:#08010f;
  --violet:#7b2fff;
  --magenta:#ff2e9a;
  --cyan:#22d3ff;
  --amber:#ffb03a;
  --white:#fff;
  --smoke:#8f8f92;
  /* Fallback accent. Every entry overrides this from its own artwork. */
  --accent:#22d3ff;
  /* headline stops */
  /* dimmed chrome: silver top rolling into cyan then violet, with the brand
     magenta on the solid line. 13:1 against the hero field, not 19:1. */
  --h1a:#d8d2ea;--h1b:#b9aee0;--h1c:#6fc7e8;--h1d:#7b2fff;--h1mag:#ff2e9a;--h1out:#6fc7e8;
}
.hsw{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:1.5rem 0 .25rem}
.hsw span{font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--smoke);margin-right:.35rem}
.hsw button{font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;background:transparent;color:var(--smoke);
  border:1px solid rgba(255,255,255,.25);padding:.32rem .6rem;cursor:pointer;transition:all .25s}
.hsw button:hover{color:#fff;border-color:#fff}
.hsw button.on{background:#fff;color:#0a0a0a;border-color:#fff}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--black);color:var(--white);
  font-family:'Barlow Condensed',Impact,'Arial Narrow',sans-serif;
  font-size:clamp(1.05rem,1rem + .3vw,1.2rem);line-height:1.45;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body::after{
  content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap{max-width:min(94vw,96rem);margin:0 auto;padding:0 1.25rem;position:relative;z-index:2}

.ticker{
  background:linear-gradient(90deg,var(--magenta),var(--violet) 50%,var(--cyan));
  color:#12002b;border-top:3px solid var(--black);border-bottom:3px solid var(--black);
  overflow:hidden;white-space:nowrap;padding:.5rem 0;position:relative;z-index:3;
  /* Fade the ends. A hard cut is what makes a marquee read as broken text. */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 4rem,#000 calc(100% - 4rem),transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 4rem,#000 calc(100% - 4rem),transparent 100%);
}
.ticker .track{display:inline-flex;white-space:nowrap;animation:slide 42s linear infinite;will-change:transform}
.ticker:hover .track{animation-play-state:paused}
.tick{display:inline-flex;align-items:baseline;gap:.55rem;padding-right:2.75rem;
  color:inherit;text-decoration:none}
a.tick:hover s{text-decoration:underline}
a.tick:focus-visible{outline:2px solid #12002b;outline-offset:2px}
.tick b{
  font-family:'DM Mono',monospace;font-size:.62rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  background:rgba(18,0,43,.82);color:#fff;padding:.15rem .4rem;border-radius:2px;
}
/* The article badges carry their own accent as a generated class, since a style
   attribute here is blocked by the production CSP. */
.tick b.acc{background:var(--accent);color:#0a0a0a}
.tick s{
  text-decoration:none;font-family:'Anton',sans-serif;font-size:.92rem;
  letter-spacing:.08em;text-transform:uppercase;
}
.tick em{font-style:normal;font-family:'DM Mono',monospace;font-size:.62rem;
  letter-spacing:.14em;opacity:.72;text-transform:uppercase}
/* Hype lines carry no label chip: pure chant, so they read as rhythm between
   the informative items rather than competing with them. */
.tick.hype s{letter-spacing:.16em;opacity:.9}
.tick.hype::after{content:"◆";font-size:.5rem;opacity:.5;padding-left:.75rem}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:32rem){
  .ticker{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 1.5rem,#000 calc(100% - 1.5rem),transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 1.5rem,#000 calc(100% - 1.5rem),transparent 100%)}
  .tick{padding-right:1.9rem}
  .tick s{font-size:.82rem}
}

/* ================= HERO: vapour, and the only fixed-colour moment ================= */
/* Safe to be this saturated because nothing but the laser photography sits near it,
   and that photography is already 252-343deg. Same hue family, so it harmonises. */
.hero-shell{position:relative;isolation:isolate;overflow:hidden}
.hero-shell::before{
  content:"";position:absolute;inset:0;z-index:-4;
  background:radial-gradient(120% 75% at 50% 0%,#2a0d55 0%,#10032a 46%,var(--void) 74%);
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 62%,transparent 100%);
}
.hero-shell::after{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);
  opacity:.55;mix-blend-mode:overlay;
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);
}
.hero{position:relative;padding:4rem 0 3.5rem}
.hero .haze{
  position:absolute;inset:-25% -20% auto -20%;height:70vh;z-index:-3;
  background:
    radial-gradient(58% 50% at 26% 40%,rgba(123,47,255,.44),transparent 72%),
    radial-gradient(54% 46% at 78% 34%,rgba(255,46,154,.30),transparent 72%),
    radial-gradient(50% 44% at 54% 84%,rgba(34,211,255,.26),transparent 74%);
  filter:blur(46px);
}
.grid-floor{
  position:absolute;left:-30%;right:-30%;bottom:0;height:15rem;z-index:-1;
  background-image:
    repeating-linear-gradient(to right,rgba(34,211,255,.40) 0 1px,transparent 1px 5rem),
    repeating-linear-gradient(to bottom,rgba(255,46,154,.36) 0 1px,transparent 1px 3rem);
  transform:perspective(18rem) rotateX(66deg);transform-origin:bottom center;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 45%);
          mask-image:linear-gradient(to bottom,transparent,#000 45%);
}
.kicker{font-family:'DM Mono',monospace;font-size:.72rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--cyan);margin-bottom:1rem}
.hero h1.pagename{font-size:clamp(3.2rem,12vw,8rem);line-height:.86}
.hero h1{font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:clamp(3.2rem,15vw,11rem);line-height:.82;letter-spacing:-.01em;text-wrap:balance}
/* Swap logo-placeholder.svg for the real mark. Keep width/height on the tag so
   the headline does not jump while it loads. */
.hero-head{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);flex-wrap:wrap}
.hero-logo{
  width:clamp(5.5rem,13vw,11rem);height:auto;flex:none;
  filter:drop-shadow(0 0 26px rgba(255,46,154,.35));
}
@media(max-width:40rem){.hero-head{gap:1rem}}
.hero h1 .chr{
  background:linear-gradient(180deg,var(--h1a) 0%,var(--h1b) 38%,var(--h1c) 58%,var(--h1d) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(255,46,154,.45));
}
.hero h1 .mag{color:var(--h1mag);text-shadow:0 0 28px color-mix(in srgb,var(--h1mag) 55%,transparent)}
.hero h1 .out{
  display:inline-block;font-size:.5em;line-height:1;margin-top:.15em;
  color:transparent;-webkit-text-stroke:2px var(--h1out);
  text-shadow:0 0 30px color-mix(in srgb,var(--h1out) 45%,transparent);
}
@media(max-width:40rem){.hero h1 .out{font-size:.58em;-webkit-text-stroke-width:1.5px}}
.hero .strap{margin-top:1.25rem;max-width:44rem;font-size:1.15rem;color:#cfc4e8;font-weight:500}

/* ================= BODY: neutral chrome, accent inherited from the artwork ============ */
.feed{display:grid;grid-template-columns:1fr}
.slab{
  border-top:3px solid var(--white);padding:2.25rem 0;display:grid;gap:1.5rem;
  animation:pop .55s cubic-bezier(.2,.8,.3,1) both;
}
/* Two articles per row once there is room. In a narrower column each card
   stacks image over text instead of sitting side by side. */
@media(min-width:1500px){
  .feed{grid-template-columns:1fr 1fr;column-gap:3.5rem}
  .feed .slab{grid-template-columns:1fr!important;padding:2.5rem 0}
  .feed .slab.flip>.media{order:0}
}
/* Longer preview where there is room to read it, clamped where there is not. */
.lede{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:5}
@media(min-width:64rem){.lede{-webkit-line-clamp:12}}
@media(min-width:1500px){.lede{-webkit-line-clamp:8}}
/* Grid items default to min-width:auto, so one wide child drags the whole column
   past the viewport. Real headlines made this show up; the demo copy never did. */
.slab>*{min-width:0}
.slab h2{overflow-wrap:anywhere}
@media(min-width:52rem){
  .slab{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:2.5rem;align-items:start}
  .slab.flip>.media{order:-1}
}
.meta{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.9rem;
  font-family:'DM Mono',monospace;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
}
.tag{padding:.2rem .5rem;background:var(--accent);color:#0a0a0a;font-weight:500}
.date{color:var(--smoke)}
.past{
  font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--smoke);border:1px solid rgba(255,255,255,.22);padding:.12rem .45rem;border-radius:2px;
}
/* Remaining images from a post. Nothing is dropped, it just stops dominating. */
.gallery{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(4.5rem,1fr));
  gap:.4rem;margin-top:1.25rem;max-width:34rem;
}
.gallery img{width:100%;aspect-ratio:1;object-fit:cover;display:block;
  border:1px solid rgba(255,255,255,.25);background:#0a0a0a}

.slab h2{
  font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:clamp(1.8rem,1.1rem + 3.4vw,3.4rem);line-height:.9;
  /* Off white rather than pure white: at this size #fff is glare. The offset is
     built from the entry's own accent so it never fights the artwork. */
  color:#ece8f7;
  text-shadow:3px 0 0 color-mix(in srgb,var(--accent) 60%,transparent),
              0 2px 18px rgba(0,0,0,.75);
}
.slab h2 a{color:inherit;text-decoration:none;display:block;transition:color .25s}
.slab h2 a:hover{color:var(--accent)}
.slab p{margin-top:1rem;max-width:68ch;color:#cfcfd2}
.slab p b{color:var(--accent);font-weight:600}

/* Artwork sits in a neutral mount. No tint, no blend: a gallery mat, not a filter.
   This is what lets a gold 2003 flyer and a violet 2026 photo share a page. */
/* Dark hairline inside the white mount. Without it a light flyer (the gold retro
   one, most of the 2003 artwork) bleeds straight into the border and the frame
   disappears. With it, light and dark artwork both stay separated. */
.media{
  position:relative;border:3px solid var(--white);background:#0a0a0a;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6);
  /* Sources are 1080px wide. Past roughly 520 CSS px on a high-DPI screen there
     is no resolution left to draw on, so the plate is capped rather than grown. */
  max-width:31rem;justify-self:end;
}
.slab.flip .media{justify-self:start}
@media(min-width:1500px){.media{justify-self:stretch;max-width:33rem}}
.media img{display:block;width:100%;height:auto}
.media.photo img{filter:contrast(1.06) saturate(1.08)}
.media .stamp{
  position:absolute;left:-3px;bottom:-3px;background:var(--accent);color:#0a0a0a;
  font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.1em;
  font-size:.8rem;padding:.35rem .75rem;
}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.swatch{
  display:inline-flex;align-items:center;gap:.4rem;color:var(--smoke);
  font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.14em;margin-top:.6rem;
}
.swatch i{width:.75rem;height:.75rem;background:var(--accent);display:block;border-radius:2px}

.lineup{border-top:3px solid var(--white);border-bottom:3px solid var(--white);padding:2rem 0}
.lineup ul{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem 1.25rem}
.lineup li{font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:clamp(1.5rem,1rem + 3vw,3rem);line-height:1;color:var(--white)}
.lineup li:nth-child(odd){color:var(--accent)}

footer{padding:2.5rem 0 4rem;color:var(--smoke);font-family:'DM Mono',monospace;font-size:.8rem;line-height:1.7}

@keyframes pop{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Reduced motion still gets the ticker, at a third of the speed. Everything else
   on the page stops. Hover pauses it entirely. */
@media(prefers-reduced-motion:reduce){
  .ticker .track{animation:slide 126s linear infinite!important}
}
/* >>> news block */

/* The date and event chips became links into the archives and hubs. They must
   still read as metadata, so no underline until hover. */
a.date,a.past{text-decoration:none}
a.date:hover,a.past:hover{color:var(--accent);border-color:var(--accent)}

/* ---- month strip, on the archive and hub pages ---- */
.months{
  display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:2rem;
  font-family:'DM Mono',monospace;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
}
.months a{
  color:var(--smoke);text-decoration:none;padding:.3rem .6rem;
  border:1px solid rgba(255,255,255,.22);
}
.months a:hover{color:var(--accent);border-color:var(--accent)}

/* ---- article page ---- */
.artwrap{max-width:46rem;margin:0 auto;padding:0 1rem 5rem;position:relative;z-index:2}
.crumb{display:inline-block;margin:1.75rem 0 .5rem;font-family:'DM Mono',monospace;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);text-decoration:none}
.crumb:hover{text-decoration:underline}
.arthead h1{font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:clamp(2rem,1.2rem + 4vw,3.5rem);line-height:.92;margin:.6rem 0 1rem;
  overflow-wrap:anywhere;color:#ece8f7;
  text-shadow:3px 0 0 color-mix(in srgb,var(--accent) 60%,transparent),
              0 2px 18px rgba(0,0,0,.75)}
.artbody{border-top:3px solid var(--white);padding-top:1.75rem}
.artbody p{margin-bottom:1.15rem;color:#cfcfd2;max-width:38rem}
.artbody p b,.artbody p strong{color:var(--accent);font-weight:600}
.artbody figure{margin:2rem 0}
.artbody figure img{display:block;width:60%;max-width:26rem;max-height:60vh;
  height:auto;object-fit:contain;cursor:zoom-in;
  border:3px solid var(--white);box-shadow:inset 0 0 0 1px rgba(0,0,0,.6);background:#0a0a0a;
  transition:box-shadow .3s,transform .3s}
.artbody figure img:hover{transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 0 26px color-mix(in srgb,var(--accent) 45%,transparent)}
.artbody figure figcaption{font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--smoke);margin-top:.5rem}
@media(max-width:52rem){.artbody figure img{width:100%;max-width:none;max-height:70vh}}

/* Lightbox: opens in place, no new tab. */
.lbox{position:fixed;inset:0;z-index:120;background:rgba(4,0,12,.94);
  display:none;place-items:center;padding:1.5rem;cursor:zoom-out}
.lbox.open{display:grid}
.lbox img{max-width:100%;max-height:92vh;width:auto;height:auto;display:block;
  border:3px solid var(--white);box-shadow:0 0 60px rgba(0,0,0,.8)}
.lbox .lclose{position:absolute;top:1rem;right:1.25rem;background:none;border:0;
  color:#fff;font-size:2rem;line-height:1;cursor:pointer}
.lbox .lclose:hover{color:var(--magenta)}
.artnav{display:flex;justify-content:space-between;gap:1rem;margin-top:3rem;
  border-top:3px solid var(--white);padding-top:1.25rem;
  font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.artnav a{color:var(--white);text-decoration:none;max-width:45%}
.artnav a:hover{color:var(--accent)}
.artnav span{display:block;color:var(--smoke);font-size:.62rem;margin-bottom:.25rem}
.readmore{
  display:inline-block;margin-top:.4rem;font-family:'DM Mono',monospace;font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:.1rem;
}

/* ---- pager ---- */
.pager{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border-top:3px solid var(--white);padding:2.25rem 0 1rem;
}
.pagebtn{
  font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.08em;
  font-size:clamp(1rem,.9rem + .5vw,1.35rem);
  color:var(--white);text-decoration:none;
  border:3px solid var(--white);padding:.6rem 1.4rem;background:transparent;
  transition:color .3s,border-color .3s,box-shadow .35s,transform .3s;
}
.pagebtn:hover{
  color:var(--cyan);border-color:var(--cyan);transform:translateY(-2px);
  box-shadow:0 0 30px rgba(34,211,255,.55),inset 0 0 22px rgba(34,211,255,.18);
}
.pagebtn.mag:hover{
  color:var(--magenta);border-color:var(--magenta);
  box-shadow:0 0 30px rgba(255,46,154,.55),inset 0 0 22px rgba(255,46,154,.18);
}
.pagebtn.ghost{visibility:hidden}
.pagecount{
  font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--smoke);text-align:center;
}
@media(prefers-reduced-motion:reduce){.pagebtn:hover{transform:none}}
.netnav a.sec-home{--sec:#22d3ff}
.netnav a.sec-alist{--sec:#b8ff29}
.netnav a.sec-news{--sec:#22d3ff}
.netnav a.sec-shop{--sec:#ff2e9a}
.netnav a.sec-reels{--sec:#ffb03a}
.netnav a.sec-vault{--sec:#8055d1}
.ac-164fd1{--accent:#164fd1}
.ac-23c8d7{--accent:#23c8d7}
.ac-35add1{--accent:#35add1}
.ac-8055d1{--accent:#8055d1}
.ac-84d12c{--accent:#84d12c}
.ac-8b10d1{--accent:#8b10d1}
.ac-b914d1{--accent:#b914d1}
.ac-cb5ed1{--accent:#cb5ed1}
.ac-d1102b{--accent:#d1102b}
.ac-d11110{--accent:#d11110}
.ac-d11b2b{--accent:#d11b2b}
.ac-d13b21{--accent:#d13b21}
.ac-d14182{--accent:#d14182}
.ac-d14a28{--accent:#d14a28}
.ac-d15ea3{--accent:#d15ea3}
.ac-d1795e{--accent:#d1795e}
.ac-d1ab5e{--accent:#d1ab5e}
.ac-d1af5e{--accent:#d1af5e}
.ac-d9cd4d{--accent:#d9cd4d}
/* <<< news block */
/* >>> sites block */
/* Lifted out of style= attributes: the production CSP blocks those. */
.pnote{color:var(--smoke);font-size:.8rem}
.artnav a.older{text-align:right}
.readmore .more{color:var(--smoke)}

/* ---- shop, against the markup the live scripts emit ----
   The shop is a restyle, not a rewrite: shop.js, product.js and cart.js are
   kept byte for byte, so the design has to arrive as CSS over the class names
   they already write. These rules mirror the .card/.pd- treatment above rather
   than inventing a second look. */
.product-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  align-items:start;
  padding:1.5rem 0 3rem;border-top:3px solid var(--white)}
.product-card{
  display:flex;flex-direction:column;text-decoration:none;color:var(--white);
  border:3px solid var(--white);background:#0a0a0a;min-width:0;padding-bottom:.95rem;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6);
  transition:transform .35s,box-shadow .35s,border-color .35s;
}
.product-card:hover{transform:translateY(-3px);border-color:var(--accent);
  box-shadow:0 0 30px color-mix(in srgb,var(--accent) 55%,transparent)}
.product-image{position:relative;background:#000;overflow:hidden;aspect-ratio:1}
.product-image img{display:block;width:100%;height:100%;object-fit:cover}
.placeholder-label{display:grid;place-items:center;height:100%;padding:1rem;text-align:center;
  font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.05em;color:var(--smoke)}
.product-info{padding:.85rem .95rem 0;display:flex;flex-direction:column;gap:.4rem;flex:1}
/* Two lines are reserved whether or not the name needs them. With
   align-items:start on the grid a card is its natural height, so a name that
   wrapped made that one card taller and the row's bottoms went ragged. The
   image is a fixed square and every other line is single-height, so the name is
   the only thing that varied. */
.product-name{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:1rem;
  line-height:1.1;min-height:2.2em;letter-spacing:.04em;overflow-wrap:anywhere;color:#ece8f7;
  text-shadow:0 2px 14px rgba(0,0,0,.7)}
.product-price{font-family:'DM Mono',monospace;font-size:.8rem;color:var(--accent);
  letter-spacing:.1em}
.card-stock{font-family:'DM Mono',monospace;font-size:.65rem;line-height:1.4;letter-spacing:.14em;
  text-transform:uppercase;color:var(--smoke)}
/* shop.js only emits .card-stock for manual-fulfilment products, so the DVD
   carries a line the Printful items do not and sits a line taller than its
   neighbours. Reserve that line on the cards that lack it: .65rem at 1.4
   line-height plus one .4rem flex gap. Not visible on the preview, which has no
   D1 binding and so renders no stock note at all. */
.product-card:not(:has(.card-stock)) .product-price{margin-bottom:1.31rem}
.card-stock-low{color:#ffb03a}
.card-stock-out{color:var(--magenta)}
.btn-active{margin-top:auto;display:block;text-align:center;
  font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:.85rem;
  color:var(--white);border:2px solid var(--white);background:transparent;padding:.5rem .9rem;
  transition:color .3s,border-color .3s,box-shadow .3s}
.product-card:hover .btn-active{color:var(--accent);border-color:var(--accent);
  box-shadow:0 0 22px color-mix(in srgb,var(--accent) 45%,transparent)}

/* The next-event card is the last cell of the grid, straight after the DVD.
   display:contents promotes its card to a grid item; align-items:start on the
   grid stops the portrait art dragging every card in its row up to its height,
   so it hangs below them instead. */
.event-feature{display:contents}
.card-tickets .product-image{aspect-ratio:auto}
/* The art is 720x1279. .product-photo forces aspect-ratio:1 with object-fit:cover,
   which throws away 44% of a portrait image: the flyer was unreadable. */
.card-tickets .product-photo{aspect-ratio:auto;height:auto;object-fit:contain}
.event-cue{color:var(--smoke)}

/* Product page: the pieces product.js writes that the mock never had. */
.pd-gallery{min-width:0}
.pd-info{min-width:0}
.pd-loading{color:var(--smoke);font-family:'DM Mono',monospace;font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;padding:2rem 0}
.pd-thumbs button.selected{border-color:var(--accent);
  box-shadow:0 0 16px color-mix(in srgb,var(--accent) 55%,transparent)}
.pd-options button.selected{background:var(--accent);color:#0a0a0a;border-color:var(--accent)}
.sg-toggle{cursor:pointer;font-family:'DM Mono',monospace;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  background:none;border:0;padding:0}
.sg-unit{font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--smoke);margin-left:.5rem}

/* Cart internals cart.js writes that the mock's markup did not exercise. */
.cart-line-main{display:flex;flex-direction:column;gap:.2rem;min-width:0;flex:1}
.peer-hidden{display:none}
.confirm-body{color:#cfcfd2}
.confirm-cta{margin-top:1rem}

/* ---- shared network nav ---- */
/* Sticky so the nav is always reachable. Solid black, not translucent, because
   it passes over photography, flyers and the violet hero. */
.netnav{border-bottom:3px solid var(--white);background:#000;position:sticky;top:0;z-index:60}
.netnav ul{max-width:78rem;margin:0 auto;padding:0 1rem;display:flex;gap:0;list-style:none;
  overflow-x:auto;scrollbar-width:none}
.netnav ul::-webkit-scrollbar{display:none}
.netnav a{display:block;padding:.7rem 1.05rem;color:var(--smoke);text-decoration:none;
  font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:.9rem;
  white-space:nowrap;transition:color .25s,background .25s}
.netnav a{position:relative}
.netnav a:hover{color:var(--white)}
/* Current page carries its section colour, rising from the bottom-left the same
   way the hub tiles glow on www, so the nav state matches the tile you clicked. */
.netnav a.on{
  color:#0a0a0a;
  background:
    radial-gradient(120% 160% at 20% 130%,
      color-mix(in srgb,var(--sec) 55%,#fff) 0%,
      var(--sec) 55%,
      color-mix(in srgb,var(--sec) 78%,#000) 100%);
  box-shadow:0 0 22px color-mix(in srgb,var(--sec) 45%,transparent);
}
/* and a hint of it on hover, so hovering previews where you are going */
.netnav a:not(.on):hover{
  background:linear-gradient(to top,
    color-mix(in srgb,var(--sec) 26%,transparent),transparent 70%);
  color:#fff;
}

/* ---- page head ----
   Same atmosphere as the news hero: a violet field, magenta and cyan haze, a
   horizon grid and scanlines. Without it the bright headline sits on flat black
   and reads as glare; with it the light has somewhere to land. */
.headshell{position:relative;isolation:isolate;overflow:hidden}
.headshell::before{
  content:"";position:absolute;inset:0;z-index:-4;
  background:radial-gradient(120% 80% at 50% 0%,#2a0d55 0%,#10032a 48%,var(--void) 76%);
  -webkit-mask-image:linear-gradient(to bottom,#000 58%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 58%,transparent 100%);
}
.headshell::after{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);
  opacity:.5;mix-blend-mode:overlay;
  -webkit-mask-image:linear-gradient(to bottom,#000 66%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 66%,transparent 100%);
}
.headshell .haze{
  position:absolute;inset:-30% -20% auto -20%;height:44rem;z-index:-3;
  background:
    radial-gradient(56% 50% at 24% 42%,rgba(123,47,255,.44),transparent 72%),
    radial-gradient(52% 46% at 76% 30%,rgba(255,46,154,.30),transparent 72%),
    radial-gradient(48% 44% at 54% 86%,rgba(34,211,255,.24),transparent 74%);
  filter:blur(46px);
}
.headshell .grid-floor{
  position:absolute;left:-30%;right:-30%;bottom:0;height:11rem;z-index:-1;
  background-image:
    repeating-linear-gradient(to right,rgba(34,211,255,.36) 0 1px,transparent 1px 5rem),
    repeating-linear-gradient(to bottom,rgba(255,46,154,.32) 0 1px,transparent 1px 3rem);
  transform:perspective(16rem) rotateX(66deg);transform-origin:bottom center;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 45%);
          mask-image:linear-gradient(to bottom,transparent,#000 45%);
}
.pagehead{padding:3.5rem 0 3rem;position:relative;z-index:2}
/* the glow that takes the edge off the bright type, same as the hero */
.pagehead h1{text-shadow:0 0 46px rgba(255,46,154,.28)}
.pagehead h1{font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:clamp(2.4rem,1.2rem + 6vw,6rem);line-height:.88;overflow-wrap:anywhere;
  background:linear-gradient(180deg,var(--h1a) 0%,var(--h1b) 40%,var(--h1c) 62%,var(--h1d) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(255,46,154,.5))}
.pagehead p{margin-top:1rem;max-width:38rem;color:#cfc4e8;font-weight:500;font-size:1.1rem}

/* ---- card grids ---- */
.cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  padding:1.5rem 0 3rem;border-top:3px solid var(--white)}
/* Flex, not grid: grid centres the track set, so a partial last row still sits
   left. Flex centres every line including the last.
   Six per row on desktop is deliberate: 18 reels then fall as 12 (two full rows)
   and 6 (one full row) with no orphans. */
.cards.tall{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;
  max-width:88rem;margin:0 auto}
/* Only divisors of 6, so 12 and 6 both fall as whole rows at every breakpoint.
   A 4-column tier looks fine on page 1 and orphans two cards on page 2. */
.cards.tall .card{flex:0 0 calc((100% - 5rem) / 6)}
@media(max-width:75rem){.cards.tall .card{flex:0 0 calc((100% - 2rem) / 3)}}
@media(max-width:40rem){.cards.tall .card{flex:0 0 calc((100% - 1rem) / 2)}}
@media(max-width:26rem){.cards.tall .card{flex:0 0 100%;max-width:20rem}}
.card{
  display:flex;flex-direction:column;text-decoration:none;color:var(--white);
  border:3px solid var(--white);background:#0a0a0a;min-width:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6);
  transition:transform .35s,box-shadow .35s,border-color .35s;
}
.card:hover{transform:translateY(-3px);border-color:var(--accent);
  box-shadow:0 0 30px color-mix(in srgb,var(--accent) 55%,transparent)}
.card .ph{position:relative;background:#000;overflow:hidden}
.card .ph img{display:block;width:100%;height:100%;object-fit:cover}
.card.reel .ph{aspect-ratio:9/16}
.card.prod .ph{aspect-ratio:1}
.card.gal .ph{aspect-ratio:1;display:block}
/* Gallery tiles link to the full size; gallery.js opens it in place. */
.card.gal{padding:0;cursor:zoom-in;background:#0a0a0a;text-align:left}
.card.gal .pill{pointer-events:none}
.card.gal{position:relative}
.card .body{padding:.85rem .95rem 1.1rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
/* Product card: the link covers photo and title, the button sits outside it. */
.card.prod{padding-bottom:.95rem}
.card-link{display:flex;flex-direction:column;flex:1;text-decoration:none;color:inherit}
.card.prod .addcart{margin:0 .95rem;width:calc(100% - 1.9rem)}
.card h3{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:1rem;line-height:1.1;
  letter-spacing:.04em;overflow-wrap:anywhere;color:#ece8f7;
  text-shadow:0 2px 14px rgba(0,0,0,.7)}
.card p{color:#b9b4c6;font-size:.9rem;line-height:1.35}
.card .price{margin-top:auto;font-family:'DM Mono',monospace;font-size:.8rem;color:var(--accent);
  letter-spacing:.1em}
.card .pill{position:absolute;left:0;bottom:0;background:var(--accent);color:#0a0a0a;
  font-family:'Anton',sans-serif;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.25rem .55rem}

/* ---- dvd ---- */
.sect{font-family:'Anton',sans-serif;text-transform:uppercase;color:#ece8f7;
  font-size:clamp(1.3rem,1.1rem + 1vw,2rem);margin-bottom:.6rem;
  text-shadow:0 2px 16px rgba(0,0,0,.75)}
.sub{font-family:'DM Mono',monospace;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin:1.25rem 0 .4rem}
.dvdwatch,.dvdorder{border-top:3px solid var(--white);padding:2rem 0 2.75rem;
  text-align:center}
.dvdwatch>*,.dvdorder>*{margin-left:auto;margin-right:auto}
.dvdwatch p,.dvdorder p{max-width:46rem}
.ytlink{position:relative;display:block;max-width:32rem;margin:1rem auto;
  border:3px solid var(--white);box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
.ytlink img{display:block;width:100%;height:auto}
.ytplay{position:absolute;inset:0;display:grid;place-items:center;font-size:3rem;color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.8);transition:color .25s,transform .25s}
.ytlink:hover .ytplay{color:var(--accent);transform:scale(1.08)}
.warn{color:#ffb03a}
.dvdorder .price{font-size:1.15rem;color:#ece8f7;margin:1rem auto}
.dvdorder .fine{color:var(--smoke);font-size:.85rem;margin-top:1.25rem}
.dvdorder .fine a{color:var(--accent)}
.dvdorder .pagebtn{display:inline-block}

/* ---- success / 404 ---- */
.statebox{border-top:3px solid var(--white);padding:2rem 0 3.5rem;max-width:44rem}
.statelead{font-family:'Anton',sans-serif;text-transform:uppercase;color:#ece8f7;
  font-size:clamp(1.2rem,1.05rem + 1vw,1.8rem);margin-bottom:1rem;
  text-shadow:0 2px 16px rgba(0,0,0,.75)}
.statebox p{color:#cfcfd2;margin-bottom:1rem;line-height:1.65}
.statebox a{color:var(--accent)}
.statebox .pagebtn{display:inline-block;margin-top:1rem;color:var(--white)}
.statebox .pagebtn:hover{color:var(--accent)}

/* ---- legal pages ---- */
.legal{border-top:3px solid var(--white);padding:1.75rem 0 3rem;max-width:46rem}
.legal h2{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:1.25rem;
  margin:1.75rem 0 .6rem;color:#ece8f7;letter-spacing:.04em}
.legal p,.legal li{color:#cfcfd2;margin-bottom:.9rem;line-height:1.6}
.legal ul{padding-left:1.2rem;margin-bottom:1rem}
.legal a{color:var(--accent)}
.legal strong{color:#ece8f7}

/* ---- preserved sites ----
   The 2003 and 2005 sites stay byte-identical, so they sit in a same-origin frame
   with the network nav above them rather than being edited. */
.legacyframe{width:100%;border:0;display:block;background:#000;
  height:calc(100vh - 5.4rem);height:calc(100svh - 5.4rem)}
.legacybar{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;justify-content:space-between;
  padding:.5rem 1rem;background:#08010f;border-bottom:1px solid rgba(255,255,255,.18);
  font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--smoke)}
.legacybar b{color:#ece8f7;font-weight:400}
.legacybar a{color:var(--cyan);text-decoration:none}
.legacybar a:hover{text-decoration:underline}

/* ---- product detail ----
   Same pd-* hooks the live product.js emits, so this is a restyle rather than a
   rewrite when it moves onto the real shop. */
.pd-back{display:inline-block;margin:1.75rem 0 .75rem;font-family:'DM Mono',monospace;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  text-decoration:none}
.pd-back:hover{text-decoration:underline}
.pd-wrap{display:grid;gap:2rem;border-top:3px solid var(--white);padding:1.75rem 0 3rem}
@media(min-width:56rem){.pd-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem}}
.pd-wrap>*{min-width:0}
.product-photo{width:100%;height:auto;display:block;border:3px solid var(--white);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6);background:#0a0a0a;aspect-ratio:1;object-fit:cover}
.pd-thumbs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.pd-thumbs button{width:4rem;height:4rem;padding:0;background:#000;cursor:pointer;
  border:2px solid rgba(255,255,255,.35);transition:border-color .25s,box-shadow .3s}
.pd-thumbs button img{width:100%;height:100%;object-fit:cover;display:block}
.pd-thumbs button.on,.pd-thumbs button:hover{border-color:var(--accent);
  box-shadow:0 0 16px color-mix(in srgb,var(--accent) 55%,transparent)}
.pd-name{font-family:'Anton',sans-serif;text-transform:uppercase;color:#ece8f7;
  font-size:clamp(1.5rem,1.2rem + 1.6vw,2.4rem);line-height:1.02;
  text-shadow:0 2px 16px rgba(0,0,0,.75)}
.pd-price{font-family:'DM Mono',monospace;font-size:1.1rem;color:var(--accent);
  letter-spacing:.1em;margin:.6rem 0 1rem}
.pd-blurb{color:#cfcfd2;margin-bottom:1.25rem;max-width:38rem}
.pd-opt-group{margin-bottom:1.1rem}
.pd-opt-label{display:block;font-family:'DM Mono',monospace;font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--smoke);margin-bottom:.45rem}
.pd-opt-current{color:#ece8f7}
.pd-options{display:flex;flex-wrap:wrap;gap:.4rem}
.pd-options button{
  font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  background:transparent;color:var(--smoke);border:2px solid rgba(255,255,255,.3);
  padding:.4rem .7rem;cursor:pointer;transition:all .25s}
.pd-options button:hover{color:#fff;border-color:#fff}
.pd-options button.on{background:var(--accent);color:#0a0a0a;border-color:var(--accent)}
.pd-qty{display:flex;align-items:center;gap:.6rem;margin:1.25rem 0}
.pd-qty-label{font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--smoke)}
.pd-buy{width:100%;max-width:20rem;font-family:'Anton',sans-serif;text-transform:uppercase;
  letter-spacing:.08em;font-size:1rem;background:transparent;color:var(--white);
  border:3px solid var(--white);padding:.7rem 1.2rem;cursor:pointer;
  transition:color .25s,border-color .25s,box-shadow .3s}
.pd-buy:hover{color:var(--accent);border-color:var(--accent);
  box-shadow:0 0 26px color-mix(in srgb,var(--accent) 55%,transparent)}
.pd-stock{font-family:'DM Mono',monospace;font-size:.65rem;letter-spacing:.14em;
  text-transform:uppercase;color:#7fd6a8;margin-top:.7rem}
.pd-stock-low{color:#ffb03a}
.pd-stock-out{color:var(--magenta)}
.pd-ship-note{color:var(--smoke);font-family:'DM Mono',monospace;font-size:.62rem;
  letter-spacing:.1em;margin-top:.7rem}
.pd-msg{color:#ffb03a;font-family:'DM Mono',monospace;font-size:.68rem;min-height:1em;margin-top:.5rem}
.pd-sizeguide{margin-top:1.5rem;border-top:1px solid rgba(255,255,255,.2);padding-top:1rem}
.pd-sizeguide summary{cursor:pointer;font-family:'DM Mono',monospace;font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.sg-panel{overflow-x:auto;margin-top:.9rem}
.sg-table{border-collapse:collapse;font-family:'DM Mono',monospace;font-size:.7rem;width:100%}
.sg-table th,.sg-table td{border:1px solid rgba(255,255,255,.2);padding:.4rem .6rem;
  text-align:center;color:#cfcfd2;white-space:nowrap}
.sg-table th{color:#ece8f7;background:rgba(255,255,255,.06)}

/* ---- cart, mirroring the live shop drawer ---- */
.cart-toggle{position:fixed;right:1rem;bottom:1rem;z-index:70;
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.08em;
  background:#0a0a0a;color:var(--white);border:3px solid var(--white);padding:.7rem 1.1rem;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6);transition:color .25s,border-color .25s,box-shadow .3s}
.cart-toggle:hover{color:var(--magenta);border-color:var(--magenta);
  box-shadow:0 0 28px rgba(255,46,154,.5)}
.cart-badge{background:var(--magenta);color:#12002b;border-radius:999px;
  font-family:'DM Mono',monospace;font-size:.7rem;padding:.05rem .45rem}
.cart-badge[hidden]{display:none}
.cart-backdrop{position:fixed;inset:0;background:rgba(4,0,12,.75);z-index:80;
  opacity:0;pointer-events:none;transition:opacity .3s}
.cart-backdrop.open{opacity:1;pointer-events:auto}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:min(24rem,92vw);z-index:90;
  background:#08010f;border-left:3px solid var(--white);display:flex;flex-direction:column;
  transform:translateX(102%);transition:transform .35s cubic-bezier(.2,.8,.3,1)}
.cart-drawer.open{transform:none}
.cart-head{display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.1rem;border-bottom:3px solid var(--white)}
.cart-title{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.1em;
  color:#ece8f7}
.cart-close{background:none;border:0;color:var(--smoke);font-size:1.7rem;line-height:1;
  cursor:pointer;padding:0 .25rem}
.cart-close:hover{color:var(--magenta)}
.cart-lines{flex:1;overflow-y:auto;padding:.75rem 1.1rem}
.cart-empty{color:var(--smoke);font-family:'DM Mono',monospace;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;padding:1.5rem 0;text-align:center}
.cart-line{display:grid;grid-template-columns:3.5rem 1fr auto;gap:.7rem;align-items:start;
  padding:.8rem 0;border-bottom:1px solid rgba(255,255,255,.15)}
.cart-thumb{width:3.5rem;height:3.5rem;object-fit:cover;background:#000;
  border:2px solid rgba(255,255,255,.4)}
.cart-line-name{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:.85rem;
  line-height:1.1;color:#ece8f7}
.cart-line-label{font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.12em;
  color:var(--smoke);text-transform:uppercase;margin:.2rem 0 .45rem}
.cart-qty{display:inline-flex;align-items:center;gap:.5rem}
.qty-btn{width:1.5rem;height:1.5rem;background:transparent;color:var(--white);
  border:2px solid rgba(255,255,255,.4);cursor:pointer;line-height:1;font-size:.85rem}
.qty-btn:hover{border-color:var(--magenta);color:var(--magenta)}
.qty-val{font-family:'DM Mono',monospace;font-size:.8rem;min-width:1ch;text-align:center}
.cart-line-side{text-align:right}
.cart-line-price{font-family:'DM Mono',monospace;font-size:.8rem;color:var(--cyan)}
.cart-remove{background:none;border:0;color:var(--smoke);cursor:pointer;font-size:1.1rem;
  padding:.2rem}
.cart-remove:hover{color:var(--magenta)}
.cart-foot{border-top:3px solid var(--white);padding:1rem 1.1rem 1.25rem}
/* Hooks the live cart.js also emits, styled here so the redesign drops onto the
   real shop without touching its JavaScript. */
.cart-msg{color:#ffb03a;font-family:'DM Mono',monospace;font-size:.68rem;
  letter-spacing:.1em;margin-top:.6rem;min-height:1em}
.checkout-alert{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:95;
  background:#08010f;border:3px solid var(--magenta);color:#ece8f7;padding:.8rem 1.1rem;
  font-family:'DM Mono',monospace;font-size:.72rem;letter-spacing:.08em;max-width:90vw;
  box-shadow:0 0 30px rgba(255,46,154,.45)}
.checkout-alert-close{background:none;border:0;color:var(--smoke);cursor:pointer;
  font-size:1.1rem;margin-left:.6rem}
.checkout-alert-close:hover{color:var(--magenta)}
.cart-subtotal{display:flex;justify-content:space-between;align-items:baseline;
  font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.08em;
  font-size:1.05rem;color:#ece8f7}
.cart-note{color:var(--smoke);font-family:'DM Mono',monospace;font-size:.6rem;
  letter-spacing:.1em;margin:.5rem 0 .75rem;text-transform:uppercase}
.cart-optin{display:flex;gap:.5rem;align-items:flex-start;color:#cdc6dd;font-size:.8rem;
  margin-bottom:.9rem;cursor:pointer}
/* cart.js injects the official 600x111 PayPal button PNG, which already carries
   its own yellow pill. Production sized it with a `.cart-checkout img` rule and
   the restyle dropped it: with no global img reset the art rendered at natural
   width and overflowed the 24rem drawer. The image *is* the button, so nothing
   of ours sits behind it. cart.js also disables it mid-checkout, which needs a
   visible state or an in-flight order still looks clickable. */
.cart-checkout{width:100%;background:none;border:0;padding:0;display:block;cursor:pointer;
  transition:filter .3s,transform .25s}
.cart-checkout img{width:100%;height:auto;display:block}
/* drop-shadow, not box-shadow: the PNG is transparent outside its rounded pill,
   so a box-shadow haloes the element's rectangle and the near-black drawer
   behind it reads as a black border. drop-shadow follows the alpha channel. */
.cart-checkout:hover{filter:drop-shadow(0 0 10px rgba(0,156,222,.75));transform:translateY(-2px)}
.cart-checkout:disabled{opacity:.5;cursor:default}
.cart-checkout:disabled:hover{filter:none;transform:none}
.addcart{margin-top:auto;width:100%;background:transparent;color:var(--white);
  border:2px solid rgba(255,255,255,.45);cursor:pointer;padding:.5rem;
  font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;
  transition:color .25s,border-color .25s,box-shadow .3s}
.addcart:hover{color:var(--accent);border-color:var(--accent);
  box-shadow:0 0 20px color-mix(in srgb,var(--accent) 50%,transparent)}
@media(prefers-reduced-motion:reduce){.cart-drawer{transition:none}.cart-checkout:hover{transform:none}}

/* ---- landing page: the loudest room in the house ---- */
/* Height has to subtract the nav and ticker above it, or the hero is always
   taller than what is left of the screen and the fold lands mid-headline. */
.landing{position:relative;isolation:isolate;overflow:hidden;
  --chrome:6.5rem;
  min-height:min(calc(100vh - var(--chrome)),46rem);
  min-height:min(calc(100svh - var(--chrome)),46rem);
  display:flex;align-items:center}
.landing::before{content:"";position:absolute;inset:0;z-index:-4;
  background:radial-gradient(130% 90% at 50% 0%,#33107a 0%,#14043a 44%,var(--void) 78%)}
.landing::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);
  opacity:.5;mix-blend-mode:overlay;
  -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 72%,transparent 100%)}
.landing .haze{position:absolute;inset:-25% -20% auto -20%;height:56rem;z-index:-3;
  background:
    radial-gradient(54% 48% at 22% 40%,rgba(123,47,255,.5),transparent 72%),
    radial-gradient(50% 44% at 78% 30%,rgba(255,46,154,.34),transparent 72%),
    radial-gradient(46% 42% at 52% 88%,rgba(34,211,255,.28),transparent 74%);
  filter:blur(52px)}
.landing .grid-floor{position:absolute;left:-30%;right:-30%;bottom:0;height:17rem;z-index:-1;
  background-image:
    repeating-linear-gradient(to right,rgba(34,211,255,.4) 0 1px,transparent 1px 5rem),
    repeating-linear-gradient(to bottom,rgba(255,46,154,.36) 0 1px,transparent 1px 3rem);
  transform:perspective(18rem) rotateX(66deg);transform-origin:bottom center;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 45%);
          mask-image:linear-gradient(to bottom,transparent,#000 45%)}
/* ---- animated hero scene ----
   js/hero.js draws the whole backdrop on a canvas: starfield, wireframe ranges
   either side, a perspective floor travelling forward and an oscilloscope on
   the horizon, all driven by a synthetic 4/4 clock (no audio, no permissions).
   It adds .gf-on itself, so with JS off or motion reduced none of this applies
   and the static CSS floor above is what ships. The type never reacts. */
.landing.gf-on .grid-floor{display:none}
.landing .gf-canvas{position:absolute;inset:0;width:100%;height:100%;
  z-index:-1;pointer-events:none;display:block}
/* The stock violet dome washes the starfield out, so with the canvas running
   the sky goes near-black and the haze drops back off the ranges. */
.landing.gf-on::before{
  background:radial-gradient(130% 90% at 50% 62%,#2a0d63 0%,#12033a 38%,#05010f 72%)}
.landing.gf-on .haze{opacity:.55}
/* Reduced motion does NOT hide the scene. Same owner-approved exception the
   ticker already runs under: it keeps moving, slowly, rather than vanishing.
   hero.js drops to a third speed, holds the beat spikes flat and stops the
   stars twinkling, so nothing strobes or snaps. Everything else on the page
   still stops dead under the media query. */
/* Centred at every width, not just on desktop. The canvas scene behind it is
   symmetric - vanishing point at the middle, a range each side, the scope on
   the centre line - so left-aligned type reads as shunted off-axis. The old
   static floor had no centre line, which is why this only became wrong once
   the scene landed. */
.landing .inner{display:flex;flex-direction:column;align-items:center;
  text-align:center;
  gap:clamp(1.25rem,3vw,2.25rem);padding:4rem 0 5rem;position:relative;z-index:2}
.landing .laserdraw,.landing .strap{margin-left:auto;margin-right:auto}
/* On a phone the min-height plus vertical centring left ~200px of dead space
   above the logo and again below the strap. Let it size to its content. */
@media(max-width:48rem){
  .landing{min-height:auto;align-items:flex-start}
  .landing .inner{padding:4.5rem 0 4.7rem;gap:1rem}
  .landing .grid-floor{height:9rem}
  .hub{padding:1.25rem 0 .5rem}
}
/* Wide logotype, so it stacks above the motif instead of crowding it sideways.
   The chrome edge already reads on the violet field, so the glow stays subtle. */
.landing img.mark{width:min(100%,34rem);height:auto;
  filter:drop-shadow(0 6px 26px rgba(0,0,0,.55)) drop-shadow(0 0 46px rgba(255,74,36,.35))}
.landing h1{font-family:'Anton',sans-serif;text-transform:uppercase;line-height:.84;
  font-size:clamp(3rem,11vw,8rem);letter-spacing:-.01em}
/* Each line gets its own treatment, same as the news hero: chrome gradient,
   solid, then outline. Putting the gradient on the h1 itself flattened all three. */
.landing h1 .chr{
  background:linear-gradient(180deg,var(--h1a) 0%,var(--h1b) 38%,var(--h1c) 58%,var(--h1d) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* A halo that follows the letterforms, tight pass then wide, so the type
     carries its own light instead of relying on the pool behind it. It has to
     be filter rather than text-shadow: the glyph is transparent here and the
     colour comes from a clipped background, so a text-shadow would show
     straight through the letter rather than sitting behind it. */
  filter:drop-shadow(0 3px 0 rgba(255,46,154,.45))
         drop-shadow(0 0 9px color-mix(in srgb,var(--h1out) 50%,transparent))
         drop-shadow(0 0 24px color-mix(in srgb,var(--h1out) 26%,transparent))}
/* Same two-pass idea on the magenta line, which already had the wide stop. */
.landing h1 .mag{color:var(--h1mag);
  text-shadow:0 0 10px color-mix(in srgb,var(--h1mag) 70%,transparent),
              0 0 28px color-mix(in srgb,var(--h1mag) 55%,transparent)}
.landing h1 .out{display:inline-block;font-size:.5em;line-height:1;margin-top:.15em;
  color:transparent;-webkit-text-stroke:2px var(--h1out);
  text-shadow:0 0 30px color-mix(in srgb,var(--h1out) 45%,transparent)}
@media(max-width:40rem){.landing h1 .out{font-size:.58em;-webkit-text-stroke-width:1.5px}}
.landing .overline{font-family:'DM Mono',monospace;text-transform:uppercase;
  letter-spacing:.26em;font-size:clamp(.8rem,.72rem + .3vw,1rem);color:#fff;
  text-shadow:0 0 14px rgba(255,255,255,.75),0 0 34px rgba(255,46,154,.5);margin-bottom:1rem}
.landing .strap{margin-top:1rem;font-size:clamp(1rem,.9rem + .6vw,1.35rem);color:#cfc4e8;
  font-weight:500;letter-spacing:.02em}

/* ---- laser ----
   The third headline line is drawn rather than simply appearing: it is already a
   stroke-only outline, which is exactly what a laser trace needs. Home only. */

.laserdraw{position:relative;display:block;
  font-size:clamp(3rem,11vw,8rem);width:min(100%,3.62em);margin-top:.15rem}
.laserline{display:block;width:100%;height:auto;overflow:visible;
  clip-path:inset(0 100% 0 0);animation:wipe 4.6s linear 1.4s forwards}
.laserline text{
  font-family:'Anton',sans-serif;font-size:104px;letter-spacing:1px;
  fill:none;stroke:#fff;stroke-width:1.8;stroke-linejoin:round;
  filter:drop-shadow(0 0 2px var(--h1out))
         drop-shadow(0 0 7px var(--h1out))
         drop-shadow(0 0 20px color-mix(in srgb,var(--h1out) 70%,transparent));
}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}
/* the writing head */
.beamhead{position:absolute;top:-10%;bottom:-10%;left:0;width:2px;opacity:0;pointer-events:none;
  background:linear-gradient(to bottom,transparent,
    color-mix(in srgb,var(--h1out) 60%,transparent) 18%,#fff 50%,
    color-mix(in srgb,var(--h1out) 60%,transparent) 82%,transparent);
  filter:drop-shadow(0 0 2px var(--h1out)) drop-shadow(0 0 9px var(--h1out));
  animation:beamhead 4.6s linear 1.4s forwards}
@keyframes beamhead{0%{left:0;opacity:0}6%{opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
/* the beam feeding it, swinging up from the projector point below */
.feedbeam{position:absolute;left:50%;bottom:-15rem;height:15rem;width:14px;margin-left:-7px;
  opacity:0;transform-origin:50% 100%;pointer-events:none;
  clip-path:polygon(46% 100%, 54% 100%, 100% 0%, 0% 0%);
  background:linear-gradient(90deg,transparent 0%,
    color-mix(in srgb,var(--h1out) 30%,transparent) 30%,
    var(--h1out) 43%,#fff 49%,#fff 51%,var(--h1out) 57%,
    color-mix(in srgb,var(--h1out) 30%,transparent) 70%,transparent 100%);
  -webkit-mask-image:linear-gradient(to top,transparent 0%,#000 14%,#000 88%,transparent 100%);
          mask-image:linear-gradient(to top,transparent 0%,#000 14%,#000 88%,transparent 100%);
  filter:blur(.3px) drop-shadow(0 0 2px var(--h1out)) drop-shadow(0 0 9px var(--h1out))}
.feedbeam{animation:feed 4.6s linear 1.4s forwards}
@keyframes feed{0%{transform:rotate(-42deg);opacity:0}6%{opacity:.9}90%{opacity:.9}100%{transform:rotate(42deg);opacity:0}}
.sronly{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Owner's call, same as the ticker: the lasers still run when the OS asks for
   reduced motion, but the sweep slows to a third and the draw runs once and
   stops. Everything else on the page still honours the preference. */
@media(prefers-reduced-motion:reduce){
          .laserline{animation:wipe 6s linear 1.4s forwards!important}
  .beamhead{animation:beamhead 6s linear 1.4s forwards!important}
  .feedbeam{animation:feed 6s linear 1.4s forwards!important}
}

/* hub tiles */
.hub{display:grid;gap:1rem;grid-template-columns:1fr;padding:2rem 0 .5rem}
@media(min-width:38rem){.hub{grid-template-columns:1fr 1fr}}
@media(min-width:70rem){.hub{grid-template-columns:repeat(3,1fr)}}
/* every tile the same height, so the hub reads as one set rather than a feature
   plus leftovers */
.hub .tile{min-height:11rem}
.tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:9.5rem;padding:1.4rem;text-decoration:none;color:var(--white);
  border:3px solid var(--white);background:#08010f;overflow:hidden;min-width:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6);
  transition:transform .35s,box-shadow .35s,border-color .35s}
.tile::before{content:"";position:absolute;inset:0;z-index:0;opacity:.28;
  background:radial-gradient(80% 90% at 20% 110%,var(--accent),transparent 70%);
  transition:opacity .35s}
.tile:hover{transform:translateY(-4px);border-color:var(--accent);
  box-shadow:0 0 34px color-mix(in srgb,var(--accent) 55%,transparent)}
.tile:hover::before{opacity:.55}
/* Pure white Anton at this size on a dark tile is harsh. Pulling it off white and
   sitting it on a soft dark shadow softens the edge without losing the punch. */
.tile h2{position:relative;z-index:1;font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:clamp(1.35rem,1.1rem + 1.1vw,1.95rem);line-height:1;overflow-wrap:anywhere;
  color:#ece8f7;
  text-shadow:0 2px 16px rgba(0,0,0,.8),
              0 0 34px color-mix(in srgb,var(--accent) 40%,transparent)}
.tile p{position:relative;z-index:1;color:#cdc6dd;font-size:.95rem;margin-top:.4rem;max-width:38ch}
.tile .go{position:absolute;top:1.1rem;right:1.2rem;z-index:1;color:var(--accent);
  font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase}
/* the sixth tile holds the socials rather than linking anywhere itself */
.tile.follow{cursor:default}
.tile.follow:hover{transform:none;border-color:var(--white);box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
.tile.follow .socials{position:relative;z-index:1;margin-top:.8rem;justify-content:flex-start}
.tile.follow .socials a{width:3rem;height:3rem;border-width:2px}
.tile.follow .socials svg{width:1.25rem;height:1.25rem}

/* ---- shared centred footer ---- */
.sitefoot{border-top:3px solid var(--white);margin-top:1.75rem;padding:1.5rem 0 2.5rem;
  display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center}
.sitefoot .lbl{font-family:'DM Mono',monospace;font-size:.65rem;letter-spacing:.25em;
  color:var(--smoke);text-transform:uppercase}
.sitefoot p{color:var(--smoke);font-family:'DM Mono',monospace;font-size:.7rem;
  letter-spacing:.12em}
.sitefoot .footlinks{margin-top:.15rem}
.sitefoot .footlinks a{color:var(--smoke);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.22)}
.sitefoot .footlinks a:hover{color:var(--cyan);border-bottom-color:var(--cyan)}
.sitefoot .socials{border:0;margin:0;padding:0;justify-content:center}

/* socials */
.socials{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.socials a{display:inline-flex;align-items:center;justify-content:center;
  width:2.9rem;height:2.9rem;border:2px solid rgba(255,255,255,.35);color:var(--smoke);
  transition:color .25s,border-color .25s,box-shadow .3s,transform .25s}
/* Each icon hovers to its own brand colour, matching the production site. */
.socials a:hover{transform:translateY(-2px)}
.socials a[data-net="instagram"]:hover{color:#e1306c;border-color:#e1306c;box-shadow:0 0 22px rgba(225,48,108,.5)}
.socials a[data-net="facebook"]:hover{color:#1877f2;border-color:#1877f2;box-shadow:0 0 22px rgba(24,119,242,.5)}
.socials a[data-net="youtube"]:hover{color:#ff0000;border-color:#ff0000;box-shadow:0 0 22px rgba(255,0,0,.5)}
.socials a[data-net="tiktok"]:hover{color:#25f4ee;border-color:#25f4ee;box-shadow:0 0 22px rgba(37,244,238,.5)}
.socials a[data-net="mixcloud"]:hover{color:#5000ff;border-color:#7a3cff;box-shadow:0 0 22px rgba(80,0,255,.55)}
.socials svg{width:1.15rem;height:1.15rem}
.socials .lbl{font-family:'DM Mono',monospace;font-size:.65rem;letter-spacing:.2em;
  color:var(--smoke);text-transform:uppercase;align-self:center;margin-right:.5rem}

/* ---- reel cards: same information and controls as the live reels page ---- */
.card.reel{cursor:default}
.card.reel:hover{transform:none;box-shadow:none;border-color:var(--white)}
.reel-play{position:absolute;inset:0;border:0;padding:0;background:transparent;cursor:pointer;
  display:grid;place-items:center;width:100%;height:100%}
.reel-play svg{width:3.4rem;height:3.4rem;filter:drop-shadow(0 2px 10px rgba(0,0,0,.7));
  transition:transform .3s,color .3s;color:#fff}
.card.reel:hover .reel-play svg{transform:scale(1.12);color:var(--accent)}
.reel-format{position:absolute;top:0;right:0;background:var(--accent);color:#0a0a0a;
  font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.14em;padding:.2rem .45rem}
/* One block, pushed to the bottom of the card so size, date and the buttons line
   up across the row no matter how long the title or description runs. */
.reel-foot{margin-top:auto;padding-top:.85rem;border-top:1px solid rgba(255,255,255,.18)}
.reel-meta{display:flex;justify-content:space-between;gap:1rem;
  font-family:'DM Mono',monospace;font-size:.62rem;
  letter-spacing:.14em;color:var(--smoke);text-transform:uppercase}
.reel-actions{display:flex;gap:.4rem;margin-top:.7rem}
.reel-actions .btn-download{flex:1;justify-content:center}
/* descriptions vary a lot in length; cap them so the cards stay comparable */
.card.reel p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.reel-actions .btn{
  font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;
  display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;cursor:pointer;
  background:transparent;color:var(--white);border:2px solid var(--white);padding:.4rem .7rem;
  transition:color .25s,border-color .25s,box-shadow .3s}
.reel-actions .btn:hover{color:var(--accent);border-color:var(--accent);
  box-shadow:0 0 18px color-mix(in srgb,var(--accent) 50%,transparent)}
.reel-actions .btn svg{width:.85rem;height:.85rem}
.btn-copy{padding:.4rem .55rem}

/* ---- events: a page per party, built from the flyer artwork ---- */
.ev{max-width:44rem;margin:0 auto}
.ev-art{margin:0 0 1.6rem;border:2px solid rgba(255,255,255,.22);background:#08010f}
.ev-art img{display:block;width:100%;height:auto}
.ev-facts{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.1rem;margin:0 0 1.5rem;
  padding-bottom:1.3rem;border-bottom:1px solid rgba(255,255,255,.18)}
.ev-facts dt{font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.2em;
  color:var(--smoke);text-transform:uppercase;align-self:center}
.ev-facts dd{margin:0;font-family:'DM Mono',monospace;font-size:.82rem;
  letter-spacing:.04em;color:var(--white)}
.ev-copy{font-size:1.02rem;line-height:1.75;color:#cfc4e8}
/* Where the artwork does not print a year, the page says so rather than
   quietly picking one. */
.ev-note{margin-top:1.1rem;padding:.8rem 1rem;border-left:3px solid var(--accent);
  background:rgba(255,255,255,.04);font-size:.9rem;line-height:1.6;color:#cfc4e8}
.ev-src{margin-top:1.6rem;font-family:'DM Mono',monospace;font-size:.68rem;
  letter-spacing:.12em;color:var(--smoke)}
.ev-src a{color:var(--smoke);border-bottom:1px solid rgba(255,255,255,.22);text-decoration:none}
.ev-src a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.ev-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem;
  margin-top:2rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.18)}
.ev-nav a{font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.14em;
  color:var(--smoke);text-decoration:none;text-transform:uppercase}
.ev-nav a:hover{color:var(--accent)}

/* ---- on this day: the reason to post one of these on a given date ---- */
.ev-now{margin:0 auto 3rem;max-width:44rem;border:2px solid var(--accent);
  padding:1.4rem 1.5rem;box-shadow:0 0 34px color-mix(in srgb,var(--accent) 26%,transparent)}
.ev-now h2{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.1em;
  font-size:1.1rem;margin:0;color:var(--white)}
.ev-ago{font-family:'DM Mono',monospace;font-size:.66rem;letter-spacing:.2em;
  color:var(--accent);text-transform:uppercase;margin:.3rem 0 1.1rem}
.ev-nowcard{display:flex;gap:1.1rem;align-items:center;text-decoration:none}
.ev-nowcard img{width:7.5rem;height:7.5rem;object-fit:cover;flex:none;
  border:1px solid rgba(255,255,255,.22)}
.ev-nowcard span{display:flex;flex-direction:column;gap:.35rem}
.ev-nowcard strong{font-family:'Anton',sans-serif;text-transform:uppercase;
  letter-spacing:.06em;font-size:1.25rem;color:var(--white);line-height:1.15}
.ev-nowcard em{font-style:normal;font-family:'DM Mono',monospace;font-size:.74rem;
  letter-spacing:.12em;color:var(--smoke)}
.ev-nowcard:hover strong{color:var(--accent)}

/* ---- the timeline ---- */
.ev-timeline{max-width:44rem;margin:0 auto}
.ev-year{font-family:'Anton',sans-serif;font-size:2.4rem;letter-spacing:.04em;
  color:var(--white);margin:2.4rem 0 1rem;padding-bottom:.4rem;
  border-bottom:2px solid rgba(255,255,255,.2)}
.ev-list{list-style:none;margin:0;padding:0}
.ev-list li{border-bottom:1px solid rgba(255,255,255,.12)}
.ev-list a{display:grid;grid-template-columns:4.5rem 1fr auto;gap:1rem;align-items:center;
  padding:.85rem .2rem;text-decoration:none;transition:background .2s,padding-left .2s}
.ev-list a:hover{background:rgba(255,255,255,.04);padding-left:.6rem}
.ev-list img{width:4.5rem;height:4.5rem;object-fit:cover;
  border:1px solid rgba(255,255,255,.2)}
.ev-list .ev-name{font-family:'Anton',sans-serif;text-transform:uppercase;
  letter-spacing:.05em;font-size:1.15rem;color:var(--white)}
.ev-list a:hover .ev-name{color:var(--accent)}
.ev-list .ev-when{font-family:'DM Mono',monospace;font-size:.66rem;
  letter-spacing:.14em;color:var(--smoke);text-transform:uppercase;text-align:right}

/* A night often has more than one piece of artwork: a reverse side, a set-time
   sheet, a second-room lineup. The main flyer leads and the rest sit under it. */
.ev-more{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.08em;
  font-size:1rem;color:var(--smoke);margin:2.4rem 0 1rem;padding-bottom:.4rem;
  border-bottom:1px solid rgba(255,255,255,.18)}
.ev-extras{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:1.1rem}
.ev-extras figure{margin:0}
.ev-extras img{display:block;width:100%;height:auto;border:1px solid rgba(255,255,255,.2)}
.ev-extras figcaption{margin-top:.5rem;font-size:.76rem;line-height:1.5;color:var(--smoke);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
@media (max-width:34rem){
  .ev-nowcard{flex-direction:column;align-items:flex-start}
  .ev-nowcard img{width:100%;height:auto;aspect-ratio:1}
  .ev-year{font-size:1.8rem}
  .ev-list .ev-name{font-size:1rem}
}

/* ---- player ---- */
.player{position:fixed;inset:0;z-index:300;background:rgba(4,0,12,.94);
  display:none;place-items:center;padding:1rem}
.player.visible{display:grid}
.player .inner{max-width:26rem;width:100%}
.pvwrap{position:relative}
.player video{width:100%;height:auto;border:3px solid var(--white);background:#000;display:block}
/* The native control is a small corner button. This is the one you actually aim at.
   It stops short of the bottom: at inset:0 it covered the native control strip, so
   every click aimed at the scrubber hit this button and just resumed playback. */
.bigplay{
  position:absolute;left:0;right:0;top:0;bottom:4rem;display:grid;place-items:center;
  background:transparent;border:0;cursor:pointer;color:#fff;
}
.bigplay svg{
  width:5rem;height:5rem;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.8)) drop-shadow(0 0 22px rgba(255,46,154,.5));
  transition:transform .25s,color .25s;
}
.bigplay:hover svg{transform:scale(1.1);color:var(--magenta)}
.player h2{font-family:'Anton',sans-serif;text-transform:uppercase;margin:.75rem 0 .25rem;
  font-size:1.1rem;overflow-wrap:anywhere}
.player button{margin-top:.75rem;font-family:'Anton',sans-serif;text-transform:uppercase;
  background:transparent;color:var(--white);border:3px solid var(--white);padding:.5rem 1.1rem;
  cursor:pointer;letter-spacing:.08em}
.player button:hover{color:var(--cyan);border-color:var(--cyan);
  box-shadow:0 0 24px rgba(34,211,255,.5)}

/* ---- vault rows ---- */
.rows{border-top:3px solid var(--white);padding-top:1.5rem;padding-bottom:3rem}
.row{display:flex;align-items:baseline;gap:1rem;justify-content:space-between;
  padding:1.4rem 0;border-bottom:1px solid rgba(255,255,255,.18);text-decoration:none;color:var(--white)}
.row:hover h3{color:var(--accent)}
.row h3{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(1.2rem,1rem+1.6vw,2rem);
  transition:color .25s;overflow-wrap:anywhere;color:#ece8f7;
  text-shadow:0 2px 16px rgba(0,0,0,.75)}
.row p{color:#b9b4c6;font-size:.92rem;margin-top:.35rem;max-width:40rem}
.row .yr{font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.16em;color:var(--smoke);white-space:nowrap}

/* ---- filters ---- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;padding:0 0 1.25rem}
.filters a,.filters button{
  font-family:'DM Mono',monospace;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  background:transparent;color:var(--smoke);border:1px solid rgba(255,255,255,.28);
  padding:.4rem .8rem;cursor:pointer;transition:all .25s;text-decoration:none}
.filters a:hover,.filters button:hover{color:var(--white);border-color:var(--white)}
.filters a.on,.filters button.on{background:var(--accent);color:#0a0a0a;border-color:var(--accent)}

/* ---- a-list ---- */
.benefits{list-style:none;border-top:3px solid var(--white);padding:1.5rem 0 0}
.benefits li{display:flex;gap:.9rem;align-items:baseline;padding:.9rem 0;
  border-bottom:1px solid rgba(255,255,255,.14);font-size:1.05rem}
.benefits li::before{content:"\2192";color:var(--accent);font-family:'DM Mono',monospace}
.formbox{border:3px solid var(--white);padding:1.5rem;margin:0 0 2rem;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6);border-top-width:3px}
/* Always visible, not revealed by script: whatever blocks the Klaviyo form will
   equally block a script that tries to announce it. */
.form-fallback{color:var(--smoke);font-size:.85rem;line-height:1.6;margin-top:1rem}
.form-fallback a{color:var(--accent)}
.join-legal{color:var(--smoke);font-size:.8rem;line-height:1.6;margin:1.5rem 0 3rem}
.join-legal a{color:var(--accent)}
.benefits{border-top:3px solid var(--white)}

/* ---- dvd ---- */
.split{display:grid;gap:2rem;border-top:3px solid var(--white);padding:1.75rem 0 3rem}
@media(min-width:52rem){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem}}
.split img{width:100%;max-width:17rem;height:auto;display:block;
  border:3px solid var(--white);box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
/* Both sleeves hug the centre line: the first sits at the start of the right
   column, the second at the end of the left one. */
@media(min-width:52rem){
  .split:nth-of-type(odd) img{justify-self:start}
  .split:nth-of-type(even) img{justify-self:end}
}
.split p{color:#cfcfd2;margin-bottom:1rem}
.split b{color:var(--accent)}
.stock{display:inline-block;background:var(--accent);color:#0a0a0a;font-family:'Anton',sans-serif;
  text-transform:uppercase;letter-spacing:.08em;padding:.4rem .9rem;margin-bottom:1rem}

/* Short desktop viewports last, so these beat the base .landing rules above. */
@media(min-width:48rem) and (max-height:960px){
  .landing{--chrome:11rem}
  .landing .inner{padding:1.5rem 0 1.75rem;gap:.9rem}
  .landing img.mark{width:min(100%,30rem)}
  .landing h1{font-size:min(7vw,6.5rem)}
  .laserdraw{font-size:min(7vw,6.5rem)}
  .landing .grid-floor{height:11rem}
}
@media(min-width:48rem) and (max-height:820px){
  .landing{--chrome:10rem}
  .landing .inner{padding:1rem 0 1.25rem;gap:.7rem}
  .landing img.mark{width:min(100%,26rem)}
  .landing h1{font-size:min(6.4vw,5.6rem)}
  .landing .overline{margin-bottom:.5rem}
  .laserdraw{font-size:min(6.4vw,5.6rem)}
  .landing .strap{margin-top:.6rem;font-size:1.05rem}
  .landing .grid-floor{height:8rem}
}

.netnav a.sec-home{--sec:#22d3ff}
.netnav a.sec-alist{--sec:#b8ff29}
.netnav a.sec-news{--sec:#22d3ff}
.netnav a.sec-shop{--sec:#ff2e9a}
.netnav a.sec-reels{--sec:#ffb03a}
.netnav a.sec-vault{--sec:#8055d1}
.ac-1512e4{--accent:#1512e4}
.ac-22d3ff{--accent:#22d3ff}
.ac-8055d1{--accent:#8055d1}
.ac-8dd629{--accent:#8dd629}
.ac-9510d1{--accent:#9510d1}
.ac-955ed1{--accent:#955ed1}
.ac-b8ff29{--accent:#b8ff29}
.ac-bde265{--accent:#bde265}
.ac-cfe366{--accent:#cfe366}
.ac-d11039{--accent:#d11039}
.ac-d1268e{--accent:#d1268e}
.ac-d12710{--accent:#d12710}
.ac-d1288e{--accent:#d1288e}
.ac-d12a10{--accent:#d12a10}
.ac-d13724{--accent:#d13724}
.ac-d14213{--accent:#d14213}
.ac-d15442{--accent:#d15442}
.ac-d1544b{--accent:#d1544b}
.ac-d15e77{--accent:#d15e77}
.ac-d15e8f{--accent:#d15e8f}
.ac-d1a95e{--accent:#d1a95e}
.ac-d1b75e{--accent:#d1b75e}
.ac-d1d146{--accent:#d1d146}
.ac-ff2e9a{--accent:#ff2e9a}
.ac-ffb03a{--accent:#ffb03a}
/* <<< sites block */