/* 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 are buttons now, so they open the full size 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;
  filter:drop-shadow(0 3px 0 rgba(255,46,154,.45))}
.landing h1 .mag{color:var(--h1mag);
  text-shadow: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(.68rem,.62rem + .25vw,.85rem);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}

/* ---- 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 */