/* ============================================================
   NEON DYNASTY — Tokyo 1986 video label
   deep black field · surgical magenta/cyan · chrome type
   ============================================================ */

:root{
  --ink:        #060409;
  --ink-2:      #0b0714;
  --ink-3:      #100a1c;
  --line:       rgba(168,178,214,.14);
  --line-soft:  rgba(168,178,214,.08);
  --text:       #d8dbe8;
  --muted:      #9aa0b8;
  --dim:        #6f768e;
  --magenta:    #ff2e88;
  --cyan:       #29e0ff;
  --chrome-hi:  #f2f5ff;
  --chrome-mid: #99a7cd;
  --chrome-low: #2b3151;
  --font-disp:  'Michroma', sans-serif;
  --font-mono:  'IBM Plex Mono', monospace;
  --font-kana:  'Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic','Noto Sans JP',sans-serif;
  --wrap:       1180px;
  --pad:        clamp(1.25rem, 4vw, 3rem);
  --header-h:   64px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; color-scheme:dark; }
html{ scrollbar-color:rgba(41,224,255,.55) #07040d; scrollbar-width:thin; }
body{
  margin:0;
  background:
    linear-gradient(180deg, rgba(12,7,20,.88), var(--ink) 24rem),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 88px),
    var(--ink);
  color:var(--text);
  font-family:var(--font-mono);
  font-size:15px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
  font-variant-numeric:tabular-nums;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(41,224,255,.18);
  overflow-x:hidden;
}
body::-webkit-scrollbar{ width:12px; }
body::-webkit-scrollbar-track{ background:#07040d; }
body::-webkit-scrollbar-thumb{
  background:
    linear-gradient(180deg, rgba(255,46,136,.62), rgba(41,224,255,.62));
  border:3px solid #07040d;
}
img,svg,canvas{ max-width:100%; }
h1,h2,h3{ font-family:var(--font-disp); font-weight:400; line-height:1.15; margin:0; text-wrap:balance; }
p,li{ text-wrap:pretty; }
p{ margin:0 0 1em; }
a{ color:var(--cyan); text-decoration:none; transition:color .22s ease, text-shadow .22s ease; }
a:hover{ color:#8fefff; }
::selection{ background:var(--magenta); color:#0b020a; }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:2px; }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.skip-link{
  position:fixed; top:.75rem; left:.75rem; z-index:120;
  transform:translateY(-160%);
  background:var(--cyan); color:#031015;
  padding:.7rem 1rem; border:1px solid #baf7ff;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase;
  transition:transform .2s ease;
}
.skip-link:focus-visible{ transform:none; outline:2px solid var(--magenta); outline-offset:3px; }

/* ============================================================
   CRT FRAME — scanlines, vignette, grain
   ============================================================ */
.crt{
  position:fixed; inset:0; z-index:80; pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
}
.crt::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(115% 90% at 50% 42%, transparent 58%, rgba(2,0,8,.5) 100%);
}

/* tracking glitch — fired by main.js every ~7s */
.tracking-band{
  position:fixed; left:0; right:0; top:var(--glitch-y, 42vh); height:clamp(44px, 8vh, 92px); z-index:82;
  pointer-events:none; opacity:0;
  background:
    repeating-linear-gradient(0deg, rgba(236,240,255,.16) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, rgba(255,46,136,.22), rgba(41,224,255,.16) 48%, rgba(255,46,136,.08));
  clip-path:polygon(0 15%, 100% 0, 100% 76%, 0 100%);
  mix-blend-mode:screen;
}
.tracking-band::before,
.tracking-band::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
}
.tracking-band::before{ transform:translateX(-18px); opacity:.55; }
.tracking-band::after{ transform:translateX(18px); opacity:.42; filter:hue-rotate(115deg); }
body.tracking .tracking-band{
  opacity:1;
  animation:slice-slip .18s steps(3,end) forwards;
}
@keyframes slice-slip{
  0%{ transform:translate3d(-16px,0,0) skewX(-6deg) scaleY(1.15); clip-path:polygon(0 18%, 100% 3%, 100% 60%, 0 88%); }
  45%{ transform:translate3d(22px,-3px,0) skewX(4deg) scaleY(.82); clip-path:polygon(0 2%, 100% 20%, 100% 91%, 0 64%); }
  100%{ transform:translate3d(0,0,0) skewX(0) scaleY(1); clip-path:polygon(0 15%, 100% 0, 100% 76%, 0 100%); opacity:0; }
}
body.tracking main, body.tracking .site-header{ animation:jolt .19s steps(2,end); }
@keyframes jolt{
  0%{ transform:translateX(0); } 35%{ transform:translateX(-6px); }
  70%{ transform:translateX(4px); } 100%{ transform:translateX(0); }
}
body.tracking .cl{ text-shadow:-7px 0 rgba(255,46,136,.4), 7px 0 rgba(41,224,255,.4); }
body.tracking .hero-inner{ animation:hero-slice .18s steps(2,end); }
@keyframes hero-slice{
  0%{ clip-path:inset(0 0 0 0); }
  45%{ clip-path:inset(18% 0 38% 0); transform:translateX(10px); }
  100%{ clip-path:inset(0 0 0 0); transform:none; }
}

/* ============================================================
   VHS OSD — camcorder overlay
   ============================================================ */
.vhs-osd{
  position:fixed; top:calc(var(--header-h) + 18px); right:clamp(.9rem, 3vw, 2.2rem);
  z-index:81; pointer-events:none; text-align:right;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.14em;
  color:rgba(226,231,248,.82); text-shadow:0 0 6px rgba(41,224,255,.35);
  transition:opacity .55s ease;
}
body.osd-hide .vhs-osd{ opacity:0; }
.osd-row{ display:flex; gap:1em; justify-content:flex-end; align-items:center; }
.osd-date{ font-size:10px; color:rgba(226,231,248,.5); margin-top:.2em; }
.osd-rec{ display:inline-flex; align-items:center; gap:.45em; color:#ff5d76; }
.osd-rec i{
  width:8px; height:8px; border-radius:50%;
  background:#ff2440; box-shadow:0 0 8px rgba(255,36,64,.8);
  animation:recblink 1.4s steps(2,end) infinite;
}
@keyframes recblink{ 50%{ opacity:.15; } }

/* hidden svg filter defs */
.fx-defs{ position:absolute; width:0; height:0; overflow:hidden; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:90;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  height:var(--header-h); padding-inline:var(--pad);
  background:rgba(6,4,9,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.brand{
  font-family:var(--font-disp); font-size:.95rem; letter-spacing:.16em;
  color:var(--chrome-hi); display:flex; align-items:baseline; gap:.45em; white-space:nowrap;
}
.brand em{ font-style:normal; color:var(--magenta); }
.brand-kana{ font-family:var(--font-kana); font-size:.6rem; letter-spacing:.2em; color:var(--muted); }
.site-nav{ display:flex; gap:.25rem; }
.site-nav a{
  font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.22em;
  color:var(--muted); padding:.9rem .85rem; position:relative;
}
.site-nav a::after{
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:.55rem; height:1px;
  background:linear-gradient(90deg, var(--magenta), var(--cyan));
  transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
}
.site-nav a:hover,
.site-nav a:focus-visible{ color:var(--text); text-shadow:0 0 12px rgba(41,224,255,.26); }
.site-nav a:hover::after,
.site-nav a:focus-visible::after{ transform:scaleX(1); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:min(100svh, 1150px); overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--header-h) + 4rem) var(--pad) 6rem;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(6,4,9,.9) 0%, rgba(6,4,9,.6) 32%, rgba(6,4,9,.08) 74%),
    linear-gradient(180deg, rgba(6,4,9,.25), transparent 30%, rgba(6,4,9,.34) 100%);
}
#horizon{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero-scrim{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(62% 66% at 28% 56%, rgba(6,4,9,.86), rgba(6,4,9,.2) 54%, rgba(6,4,9,0) 76%);
}
.hero-fade{
  position:absolute; inset:auto 0 0 0; height:22%; z-index:1;
  background:linear-gradient(180deg, transparent, var(--ink));
  pointer-events:none;
}
.hero-osd{
  position:absolute; top:calc(var(--header-h) + 18px); left:var(--pad); z-index:2;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.14em;
  color:rgba(226,231,248,.5); text-shadow:0 0 6px rgba(41,224,255,.25);
  animation:rise 1s ease .5s both;
}
.hero-inner{
  position:relative; z-index:2; max-width:var(--wrap); margin-inline:auto; width:100%;
  margin-top:-4vh;
}
.hero-kicker{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.34em; color:var(--muted);
  margin-bottom:2.2rem;
  animation:rise .9s cubic-bezier(.2,.7,.2,1) .15s both;
}
.hero-kana{
  font-family:var(--font-kana); font-size:.8rem; letter-spacing:.5em; color:var(--muted);
  margin:1.6rem 0 0;
  animation:rise .9s cubic-bezier(.2,.7,.2,1) .65s both;
}
.hero-sub{
  max-width:37rem; color:#eceff8; font-size:1rem;
  margin:1.4rem 0 0;
  text-shadow:0 1px 18px rgba(6,4,9,.95);
  animation:rise .9s cubic-bezier(.2,.7,.2,1) .8s both;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.4rem;
  animation:rise .9s cubic-bezier(.2,.7,.2,1) .95s both; }
@keyframes rise{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
.hero-ledger{
  margin:clamp(1.5rem, 3vw, 2.1rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  max-width:min(100%, 760px);
  border-top:1px solid rgba(236,240,255,.14);
  border-bottom:1px solid rgba(236,240,255,.08);
  animation:rise .9s cubic-bezier(.2,.7,.2,1) 1.08s both;
}
.hero-ledger div{
  min-width:0; padding:.82rem 1rem .85rem 0;
}
.hero-ledger div + div{ border-left:1px solid rgba(236,240,255,.09); padding-left:1rem; }
.hero-ledger dt{
  font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--magenta);
  margin-bottom:.25rem;
}
.hero-ledger dd{
  margin:0; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:#cfd6eb; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* --- CHROME LOGOTYPE — layered background-clip:text + sheen sweep --- */
.chrome{
  font-size:clamp(2.65rem, 10.8vw, 8.3rem);
  letter-spacing:.035em; line-height:1.02; margin:0;
  filter:drop-shadow(0 0 26px rgba(255,46,136,.16)) drop-shadow(0 0 66px rgba(41,224,255,.1));
}
.cl{
  position:relative; display:block; width:fit-content;
  color:transparent;
  background-image:linear-gradient(180deg,
    #fbfdff 0%, #d9e2f7 14%, #aab9dc 31%, #5f6b97 44%, #171b32 49.5%,
    #ffffff 50.5%, #d0d8ee 56%, #68759f 70%, #aab5d4 85%, #eef3ff 100%);
  -webkit-background-clip:text; background-clip:text;
  animation:rise .9s cubic-bezier(.2,.7,.2,1) both;
}
.cl:nth-child(1){ animation-delay:.3s; }
.cl:nth-child(2){ animation-delay:.45s; }
.cl::before{
  content:attr(data-text); position:absolute; inset:0;
  color:transparent;
  background-image:linear-gradient(112deg,
    transparent 32%, rgba(255,255,255,.06) 42%, rgba(255,255,255,.95) 50%,
    rgba(163,241,255,.4) 54%, transparent 66%);
  background-size:290% 100%; background-position:120% 0;
  -webkit-background-clip:text; background-clip:text;
  animation:sheen 6.5s ease-in-out 1.4s infinite;
  pointer-events:none;
}
@keyframes sheen{
  0%{ background-position:120% 0; }
  32%{ background-position:-90% 0; }
  100%{ background-position:-90% 0; }
}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:.6rem 1.6rem;
  font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.24em;
  border:1px solid transparent;
  transition:background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-solid{
  background:var(--magenta); color:#14020c; border-color:var(--magenta);
  box-shadow:0 0 22px rgba(255,46,136,.35);
}
.btn-solid:hover{ background:#ff5aa2; border-color:#ff5aa2; color:#14020c; box-shadow:0 0 34px rgba(255,46,136,.5); }
.btn-ghost{ color:var(--cyan); border-color:rgba(41,224,255,.4); }
.btn-ghost:hover{ color:#a5f2ff; border-color:var(--cyan); box-shadow:inset 0 0 18px rgba(41,224,255,.12); }

.hero-scroll{
  position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%); z-index:2;
  font-size:.58rem; letter-spacing:.4em; color:var(--muted);
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  animation:rise 1s ease 1.6s both;
}
.hero-scroll span{
  width:1px; height:44px;
  background:linear-gradient(180deg, transparent, var(--cyan));
  animation:drip 2.4s ease-in-out infinite;
}
@keyframes drip{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }

/* ============================================================
   SECTIONS — shared rhythm
   ============================================================ */
.section{ padding:clamp(4.2rem, 8vw, 7rem) 0; position:relative; }
.section + .section{ border-top:1px solid var(--line-soft); }

.sec-head{
  display:flex; align-items:baseline; gap:1.2rem; flex-wrap:wrap;
  margin-bottom:clamp(2rem, 5vw, 3.4rem);
}
.sec-index{
  font-family:var(--font-mono); font-size:.75rem; color:var(--magenta); letter-spacing:.3em;
}
.sec-head h2{
  font-size:clamp(1.45rem, 3.7vw, 2.55rem); text-transform:uppercase; letter-spacing:.16em;
  color:var(--chrome-hi);
  text-shadow:0 0 24px rgba(236,240,255,.08);
}
.sec-kana{
  font-family:var(--font-kana); font-size:.75rem; letter-spacing:.4em; color:var(--muted);
  flex:1; text-align:right; white-space:nowrap;
}
.sec-head::after{
  content:""; flex-basis:100%; height:1px; margin-top:1.1rem;
  background:linear-gradient(90deg, rgba(255,46,136,.5), rgba(41,224,255,.35) 40%, transparent 90%);
}
.sec-note{ color:#aeb5cb; font-size:.84rem; letter-spacing:.05em; max-width:46rem; margin-bottom:2.4rem; }

.lede{ font-size:1rem; line-height:1.85; color:var(--text); }
.lede strong, .order-copy strong{ color:var(--chrome-hi); font-weight:600; }

/* scroll reveal */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--reveal-delay, 0ms);
}
.reveal.in{ opacity:1; transform:none; }
body.no-anim .reveal{ transition:none; }

/* ============================================================
   01 — LABEL
   ============================================================ */
.label-grid{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(2rem, 5vw, 4.5rem); align-items:start; }
.label-copy p{ margin-bottom:1.3em; }
.label-copy p:last-child{ margin-bottom:0; }
.label-stats{ margin:0; display:grid; gap:0; border:1px solid var(--line); background:linear-gradient(160deg, var(--ink-2), transparent); }
.label-stats > div{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:1.15rem 1.4rem; }
.label-stats > div + div{ border-top:1px solid var(--line-soft); }
.label-stats dt{ font-size:.68rem; text-transform:uppercase; letter-spacing:.24em; color:var(--muted); }
.label-stats dd{ margin:0; font-family:var(--font-disp); font-size:1.35rem; color:var(--chrome-hi); }
.label-stats > div:nth-child(odd) dd{ color:var(--cyan); text-shadow:0 0 14px rgba(41,224,255,.35); }
.label-stats > div:nth-child(even) dd{ color:var(--magenta); text-shadow:0 0 14px rgba(255,46,136,.35); }

/* ============================================================
   SIGNAL CAPTURE — generated still + ambient loop
   ============================================================ */
.capture-section{
  position:relative; overflow:hidden;
  min-height:clamp(540px, 78svh, 840px);
  border-top:1px solid rgba(255,46,136,.16);
  border-bottom:1px solid rgba(41,224,255,.14);
  background:#060409;
}
.capture-stage{
  --scan-x:68%;
  --scan-y:48%;
  --pan-x:0px;
  --pan-y:0px;
  position:relative; isolation:isolate; min-height:inherit;
  display:grid; align-items:end;
  padding:clamp(4.4rem, 9vw, 7rem) var(--pad);
  outline-offset:-8px;
}
.capture-stage:focus-visible{
  outline:1px solid rgba(41,224,255,.72);
  box-shadow:inset 0 0 0 1px rgba(255,46,136,.24), inset 0 0 70px rgba(41,224,255,.08);
}
.capture-media{
  position:absolute; inset:0; z-index:-2; overflow:hidden;
  background:#080511;
}
.capture-media::before{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(6,4,9,.92) 0%, rgba(6,4,9,.56) 32%, rgba(6,4,9,.08) 62%, rgba(6,4,9,.54) 100%),
    linear-gradient(180deg, rgba(6,4,9,.18), rgba(6,4,9,.02) 44%, rgba(6,4,9,.92) 100%),
    radial-gradient(45% 54% at 74% 48%, rgba(255,46,136,.08), transparent 68%);
  mix-blend-mode:normal;
}
.capture-media::after{
  content:""; position:absolute; inset:clamp(14px,2vw,28px); z-index:5; pointer-events:none;
  border:1px solid rgba(236,240,255,.2);
  box-shadow:
    inset 0 0 0 1px rgba(6,4,9,.5),
    inset 0 0 38px rgba(0,0,0,.58),
    0 0 42px rgba(41,224,255,.08);
}
.capture-poster,
.ambient-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter:saturate(1.12) contrast(1.08) brightness(.72) hue-rotate(-4deg);
  transform:translate3d(var(--pan-x), var(--pan-y), 0) scale(1.035);
  transition:filter .55s ease, transform .55s cubic-bezier(.2,.7,.2,1);
}
.capture-poster{ z-index:1; }
.ambient-video{ z-index:2; }
.capture-stage:hover .ambient-video,
.capture-stage:focus-visible .ambient-video,
.capture-stage:hover .capture-poster,
.capture-stage:focus-visible .capture-poster{
  filter:saturate(1.24) contrast(1.14) brightness(.82) hue-rotate(-7deg);
  transform:translate3d(var(--pan-x), var(--pan-y), 0) scale(1.055);
}
.capture-scan{
  position:absolute; inset:0; z-index:6; pointer-events:none; opacity:.78;
  background:
    radial-gradient(260px 180px at var(--scan-x) var(--scan-y), rgba(255,255,255,.1), rgba(41,224,255,.06) 38%, transparent 70%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 5px);
}
.capture-scan::before,
.capture-scan::after{
  content:""; position:absolute; pointer-events:none;
  opacity:0; transition:opacity .24s ease, transform .24s ease;
}
.capture-scan::before{
  top:clamp(14px,2vw,28px); bottom:clamp(14px,2vw,28px); left:var(--scan-x);
  width:1px; transform:translateX(-50%);
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.8), var(--cyan), transparent);
  box-shadow:-12px 0 rgba(255,46,136,.2), 12px 0 rgba(41,224,255,.2), 0 0 26px rgba(41,224,255,.72);
}
.capture-scan::after{
  left:clamp(14px,2vw,28px); right:clamp(14px,2vw,28px); top:var(--scan-y);
  height:1px; transform:translateY(-50%);
  background:linear-gradient(90deg, transparent, rgba(255,46,136,.74), rgba(255,255,255,.72), rgba(41,224,255,.72), transparent);
  box-shadow:0 0 22px rgba(255,46,136,.48);
}
.capture-stage:hover .capture-scan::before,
.capture-stage:hover .capture-scan::after,
.capture-stage:focus-visible .capture-scan::before,
.capture-stage:focus-visible .capture-scan::after{ opacity:1; }
.capture-copy{
  position:relative; z-index:7;
  width:min(100%, 620px); margin-left:max(0px, calc((100vw - var(--wrap)) / 2));
  padding-top:clamp(7rem,18vw,15rem);
  text-shadow:0 1px 24px rgba(6,4,9,.94);
}
.capture-copy::before{
  content:""; position:absolute; left:-1.2rem; top:clamp(6.2rem,17vw,14rem); bottom:-1rem; width:2px;
  background:linear-gradient(180deg, var(--magenta), var(--cyan), transparent);
  box-shadow:0 0 18px rgba(255,46,136,.52);
}
.capture-kicker{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.3em; color:var(--cyan);
  margin-bottom:1rem;
}
.capture-copy h2{
  font-size:clamp(1.9rem, 5.8vw, 4.9rem);
  text-transform:uppercase; letter-spacing:.12em; color:var(--chrome-hi);
  filter:drop-shadow(0 0 28px rgba(255,46,136,.18));
}
.capture-copy p:not(.capture-kicker){
  max-width:42rem; color:#eef2ff; font-size:1rem; line-height:1.75;
  margin:1.15rem 0 1.4rem;
}
.capture-log{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  margin:0; border-top:1px solid rgba(236,240,255,.16);
  border-bottom:1px solid rgba(236,240,255,.1);
  max-width:760px;
}
.capture-log div{ min-width:0; padding:.85rem .95rem .9rem 0; }
.capture-log div + div{ border-left:1px solid rgba(236,240,255,.1); padding-left:.95rem; }
.capture-log dt{
  font-size:.58rem; letter-spacing:.23em; text-transform:uppercase; color:var(--magenta);
  margin-bottom:.24rem;
}
.capture-log dd{
  margin:0; font-size:.68rem; line-height:1.45; letter-spacing:.08em; text-transform:uppercase; color:#d4daef;
}
.capture-frame-osd{
  position:absolute; left:var(--pad); top:clamp(4.1rem, 7vw, 5.6rem); z-index:8;
  font-size:.68rem; letter-spacing:.18em; color:rgba(226,231,248,.62);
  text-shadow:0 0 10px rgba(41,224,255,.28);
}

/* ============================================================
   02 — CATALOG
   ============================================================ */
.catalog{
  background:
    linear-gradient(180deg, rgba(255,46,136,.018), transparent 16rem),
    repeating-linear-gradient(0deg, transparent 0 92px, rgba(41,224,255,.025) 92px 93px);
}
.tape-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(1.45rem, 3vw, 2.5rem) clamp(1.35rem, 3vw, 2.35rem);
  align-items:start;
}
.tape{
  min-width:0; position:relative;
  outline-offset:8px;
}
.tape:nth-child(3n+2){ margin-top:clamp(1.1rem, 3vw, 2.4rem); }
.tape:nth-child(3n){ margin-top:clamp(.3rem, 1.6vw, 1.2rem); }
.cover{
  position:relative; overflow:hidden; aspect-ratio:5/7;
  border:1px solid var(--line); background:var(--ink-2);
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.cover::before{
  content:""; position:absolute; inset:9px; z-index:2; pointer-events:none;
  border:1px solid rgba(236,240,255,.08);
  box-shadow:inset 0 0 0 1px rgba(6,4,9,.46), inset 0 0 36px rgba(0,0,0,.34);
}
.cover::after{
  content:""; position:absolute; left:-40%; right:-40%; top:-15%; height:34%;
  z-index:4; pointer-events:none; opacity:0;
  background:linear-gradient(105deg, transparent 34%, rgba(255,255,255,.1) 45%, rgba(41,224,255,.28) 50%, rgba(255,46,136,.18) 54%, transparent 66%);
  transform:translateY(-120%) rotate(-8deg);
}
.cover .art{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.svg-cat{ font-family:var(--font-mono); font-size:12px; letter-spacing:.25em; fill:rgba(200,210,240,.55); }
.cover-kana{
  position:absolute; top:14px; right:12px; z-index:3;
  writing-mode:vertical-rl; font-family:var(--font-kana);
  font-size:.68rem; letter-spacing:.32em; color:rgba(216,221,240,.66);
  max-height:calc(100% - 28px); overflow:hidden;
}
/* channel-split hover ghosts (cloned by main.js) */
.chan{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; pointer-events:none; mix-blend-mode:screen;
  transition:opacity .18s ease;
}
.chan-r{ filter:url(#fx-red); }
.chan-c{ filter:url(#fx-cyan); }
.tape:hover .cover, .tape:focus-within .cover, .tape:focus-visible .cover{
  border-color:rgba(255,46,136,.45);
  box-shadow:0 0 0 1px rgba(255,46,136,.2), 0 14px 44px rgba(255,46,136,.12);
  transform:translateY(-4px);
}
.tape:hover .cover::after, .tape:focus-within .cover::after, .tape:focus-visible .cover::after{ opacity:1; animation:cover-sheen .62s steps(4,end) both; }
.tape:hover .chan, .tape:focus-within .chan, .tape:focus-visible .chan{ opacity:.85; }
.tape:hover .chan-r, .tape:focus-within .chan-r, .tape:focus-visible .chan-r{ animation:chan-r .42s steps(2,end) infinite; }
.tape:hover .chan-c, .tape:focus-within .chan-c, .tape:focus-visible .chan-c{ animation:chan-c .42s steps(2,end) infinite; }
@keyframes cover-sheen{
  from{ transform:translateY(-120%) rotate(-8deg); }
  to{ transform:translateY(440%) rotate(-8deg); }
}
@keyframes chan-r{
  0%{ transform:translate(-5px, 1px); } 25%{ transform:translate(3px,-2px); }
  50%{ transform:translate(-3px, 2px); } 75%{ transform:translate(5px, 0); }
  100%{ transform:translate(-5px, 1px); }
}
@keyframes chan-c{
  0%{ transform:translate(5px,-1px); } 25%{ transform:translate(-4px, 2px); }
  50%{ transform:translate(4px,-2px); } 75%{ transform:translate(-5px, 0); }
  100%{ transform:translate(5px,-1px); }
}
.tape-data{ padding-top:1.1rem; }
.tape-meta{
  display:flex; gap:1.1em; font-size:.66rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:.5em;
}
.tape-meta span:first-child{ color:var(--magenta); }
.tape-data h3{ font-size:1.02rem; letter-spacing:.1em; text-transform:uppercase; color:var(--chrome-hi); margin-bottom:.45em; }
.tape-dir{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:.7em; }
.tape-syn{ font-size:.8rem; line-height:1.7; color:var(--muted); margin:0; }
.catalog-ledger{
  margin-top:clamp(2.6rem, 5vw, 4.5rem);
  display:grid; grid-template-columns:1fr 1.15fr 1.5fr;
  border-top:1px solid rgba(255,46,136,.34);
  border-bottom:1px solid rgba(41,224,255,.2);
  background:linear-gradient(90deg, rgba(255,46,136,.045), rgba(41,224,255,.025), transparent);
}
.catalog-ledger span{
  min-width:0; padding:1rem 1.15rem;
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:#c5cbe0;
}
.catalog-ledger span:first-child{ color:var(--magenta); }
.catalog-ledger span + span{ border-left:1px solid rgba(236,240,255,.08); }

/* ============================================================
   03 — RESTORATION
   ============================================================ */
.restoration{
  background:
    linear-gradient(180deg, rgba(41,224,255,.015), transparent 28rem),
    repeating-linear-gradient(90deg, transparent 0 118px, rgba(255,46,136,.018) 118px 119px);
}
.process{
  list-style:none; margin:0 0 clamp(2.4rem,5vw,4rem); padding:0;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(1.2rem,2.5vw,2rem);
  position:relative;
  counter-reset:process;
}
.process::before{
  content:""; position:absolute; left:0; right:0; top:2.15rem; height:1px;
  background:linear-gradient(90deg, rgba(255,46,136,.7), rgba(41,224,255,.55), transparent);
  pointer-events:none;
}
.process li{
  position:relative; padding:1.65rem 1.35rem 1.45rem;
  border:1px solid rgba(168,178,214,.16);
  background:
    linear-gradient(175deg, rgba(15,10,27,.88), rgba(6,4,9,.42) 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 5px);
  overflow:hidden;
  counter-increment:process;
}
.process li:nth-child(even){ transform:translateY(1.45rem); }
.process li::after{
  content:counter(process, decimal-leading-zero); position:absolute; right:.8rem; bottom:-.4rem;
  font-family:var(--font-disp); font-size:3.9rem; line-height:1; letter-spacing:-.03em;
  color:rgba(236,240,255,.035); pointer-events:none;
}
.process li::before{
  content:""; position:absolute; top:-1px; left:-1px; right:-1px; height:2px;
  background:linear-gradient(90deg, var(--magenta), var(--cyan));
  opacity:.65;
}
.step-no{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.3em; color:var(--magenta);
  display:block; margin-bottom:1.1rem;
}
.process h3{ font-size:.96rem; text-transform:uppercase; letter-spacing:.14em; color:var(--chrome-hi); margin-bottom:.8rem; }
.process p{ font-size:.79rem; line-height:1.75; color:#aab1c8; margin:0; }

.spec{ margin:0; border:1px solid rgba(168,178,214,.16); background:rgba(6,4,9,.28); }
.spec > div{
  display:grid; grid-template-columns:minmax(9rem, 16rem) 1fr; gap:1rem;
  padding:.95rem 1.4rem;
}
.spec > div + div{ border-top:1px solid var(--line-soft); }
.spec dt{ font-size:.68rem; text-transform:uppercase; letter-spacing:.28em; color:var(--cyan); align-self:center; }
.spec dd{ margin:0; font-size:.8rem; color:var(--text); letter-spacing:.03em; }

/* ============================================================
   04 — TRANSMISSIONS
   ============================================================ */
.quote-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(1.2rem,2.5vw,2rem); }
.quote-grid blockquote{
  margin:0; padding:1.9rem 1.6rem 1.7rem;
  border:1px solid var(--line); border-left:2px solid var(--magenta);
  background:
    linear-gradient(150deg, rgba(15,10,27,.84), rgba(6,4,9,.28) 75%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 7px);
  display:flex; flex-direction:column; gap:1.2rem;
  position:relative; overflow:hidden;
}
.quote-grid blockquote:nth-child(2){ border-left-color:var(--cyan); }
.quote-grid blockquote::before{
  content:"AIR CHECK"; position:absolute; top:.85rem; right:.95rem;
  font-size:.52rem; letter-spacing:.22em; color:rgba(41,224,255,.38);
}
.quote-grid p{ font-size:.92rem; line-height:1.8; font-style:italic; color:var(--text); margin:0; flex:1; }
.quote-grid cite{ font-style:normal; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }

/* ============================================================
   05 — ORDER + CSS cassette
   ============================================================ */
.order{
  background:
    linear-gradient(180deg, transparent, rgba(255,46,136,.02) 50%, transparent),
    repeating-linear-gradient(0deg, transparent 0 140px, rgba(236,240,255,.018) 140px 141px);
}
.order-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr); gap:clamp(2.4rem,6vw,5rem); align-items:center; }
.order-copy .lede{ font-size:1.08rem; max-width:42rem; }
.order-list{ list-style:none; margin:1.8rem 0; padding:0; border-top:1px solid var(--line-soft); }
.order-list li{
  display:grid; grid-template-columns:minmax(7.5rem, 11rem) 1fr; gap:1rem;
  padding:.85rem 0; border-bottom:1px solid var(--line-soft);
  font-size:.8rem; color:var(--text);
}
.order-list li span{ font-size:.66rem; text-transform:uppercase; letter-spacing:.26em; color:var(--magenta); align-self:center; }
.order-note{ font-size:.8rem; color:#aab1c8; margin-bottom:2rem; }
.order-note em{ color:var(--text); font-style:normal; border-bottom:1px dotted rgba(154,160,184,.5); }

.cassette-stage{ position:relative; display:grid; place-items:center; padding:1.5rem 0 2rem; perspective:900px; overflow:hidden; }
.cassette-stage::before{
  content:""; position:absolute; width:100%; height:62%; top:50%; left:50%;
  transform:translate(-50%,-50%) rotate(-7deg);
  background:
    linear-gradient(90deg, transparent, rgba(41,224,255,.08), transparent 62%),
    repeating-linear-gradient(90deg, transparent 0 30px, rgba(255,46,136,.045) 30px 31px);
  filter:blur(.2px);
  opacity:.8; pointer-events:none;
}
.cassette{
  width:min(100%, 510px); aspect-ratio:1.86/1; position:relative; z-index:1;
  background:
    linear-gradient(180deg, #1c1726 0%, #0b0811 55%, #15101f 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 10px);
  border:1px solid rgba(210,220,250,.28); border-radius:8px;
  box-shadow:inset 0 1px 0 rgba(240,245,255,.18), inset 0 -10px 22px rgba(0,0,0,.55), 0 34px 80px rgba(0,0,0,.62), 0 0 54px rgba(255,46,136,.1);
  padding:5.5% 6%;
  display:flex; flex-direction:column; justify-content:space-between;
  transform:rotateY(-7deg) rotateX(4deg);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}
.cassette::before{
  content:""; position:absolute; inset:10px; border:1px solid rgba(236,240,255,.08);
  border-radius:5px; pointer-events:none;
}
.cassette::after{
  content:""; position:absolute; left:7%; right:7%; bottom:16%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(236,240,255,.18), rgba(41,224,255,.16), transparent);
  pointer-events:none;
}
.cassette:hover{ transform:rotateY(-3deg) rotateX(2deg) translateY(-6px); box-shadow:inset 0 1px 0 rgba(240,245,255,.18), inset 0 -10px 22px rgba(0,0,0,.55), 0 42px 90px rgba(0,0,0,.66), 0 0 76px rgba(41,224,255,.13); }
.cassette-label{
  display:flex; flex-wrap:nowrap; align-items:center; gap:.9em; min-width:0;
  border:1px solid rgba(190,200,235,.16); border-radius:3px;
  background:linear-gradient(90deg, rgba(255,46,136,.2), rgba(41,224,255,.13));
  padding:.55rem .9rem;
}
.cl-cat{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.26em; color:var(--magenta); white-space:nowrap; }
.cl-title{ font-family:var(--font-disp); font-size:.7rem; letter-spacing:.13em; color:var(--chrome-hi); white-space:nowrap; }
.cl-kana{
  font-family:var(--font-kana); font-size:.54rem; letter-spacing:.06em; color:var(--muted);
  margin-left:auto; white-space:nowrap; overflow:hidden; min-width:0;
}
.cassette-window{
  position:relative; flex:1; margin:6% 8% 5%;
  background:#050308; border-radius:6px; border:1px solid rgba(190,200,235,.14);
  display:flex; align-items:center; justify-content:space-between; padding:4% 7%;
  overflow:hidden;
}
.tape-run{
  position:absolute; left:18%; right:18%; top:50%; height:34%;
  transform:translateY(-50%);
  background:linear-gradient(180deg, #1d1526, #2a1e38 50%, #1d1526);
  border-radius:3px;
}
.reel{
  position:relative; z-index:2; width:31%; aspect-ratio:1; border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, #060409 0 26%, transparent 26%),
    repeating-conic-gradient(from 0deg, rgba(236,240,255,.85) 0deg 9deg, rgba(90,98,130,.25) 9deg 60deg);
  border:2px solid rgba(236,240,255,.3);
  animation:spin 7s linear infinite;
}
.reel-b{ animation-duration:5.2s; }
.reel i{ position:absolute; inset:30%; border-radius:50%; background:#060409; border:1px solid rgba(236,240,255,.25); }
@keyframes spin{ to{ transform:rotate(360deg); } }
.cassette-foot{
  display:flex; justify-content:space-between;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted);
}
.cassette-shadow{
  width:70%; height:18px; margin-top:1.6rem; border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,46,136,.24), transparent 70%);
  filter:blur(6px);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  border-top:1px solid var(--line);
  padding:2.6rem 0 3rem;
  background:linear-gradient(180deg, transparent, rgba(11,7,20,.8));
}
.site-footer .wrap{ display:flex; flex-wrap:wrap; gap:1.2rem 2.5rem; align-items:baseline; justify-content:space-between; }
.foot-brand{ font-family:var(--font-disp); font-size:.8rem; letter-spacing:.18em; color:var(--chrome-hi); margin:0; }
.foot-brand em{ font-style:normal; color:var(--magenta); }
.foot-brand span{ font-family:var(--font-kana); font-size:.66rem; color:var(--muted); letter-spacing:.2em; }
.foot-links{ font-size:.7rem; letter-spacing:.1em; color:var(--muted); margin:0; display:flex; flex-wrap:wrap; gap:0 .7em; align-items:center; }
.foot-links .fl{ white-space:nowrap; }
.foot-links i{ font-style:normal; margin-right:.7em; }
.foot-links a{ color:var(--cyan); display:inline-block; padding:.85em 0; }
.foot-links a:hover{ color:var(--magenta); }

/* ============================================================
   GUIDE PAGE
   ============================================================ */
.guide-main{
  padding:calc(var(--header-h) + clamp(3rem,8vw,5.5rem)) 0 clamp(4rem,8vw,6rem);
  background:
    linear-gradient(180deg, rgba(41,224,255,.02), transparent 22rem),
    repeating-linear-gradient(90deg, transparent 0 96px, rgba(255,46,136,.018) 96px 97px);
}
.guide-main .wrap{ max-width:960px; }
.guide-hero{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(240px, .42fr);
  gap:clamp(2rem,5vw,4rem); align-items:end;
  margin-bottom:clamp(2.5rem,6vw,4.5rem);
}
.guide-kicker{ font-size:.68rem; text-transform:uppercase; letter-spacing:.34em; color:var(--magenta); margin-bottom:1.35rem; }
.guide-title{
  font-size:clamp(2.1rem, 6.3vw, 4.4rem); letter-spacing:.05em; margin-bottom:.28em;
}
/* at this smaller size the hero gradient's dark mids read gunmetal, not chrome —
   lift the stops so the seam still cuts but the metal stays silver */
.guide-title .cl{
  background-image:linear-gradient(180deg,
    #f8faff 0%, #dbe3f5 16%, #aab8d8 33%, #6b76a0 45%, #2a3050 49.5%,
    #fbfdff 50.5%, #c2cade 57%, #7681a8 72%, #aeb8d6 86%, #eff3fd 100%);
}
.guide-standfirst{
  max-width:38rem; margin:0;
  color:#cbd2e6; font-size:.92rem; letter-spacing:.06em;
}
.guide-signal{
  min-height:210px; position:relative; overflow:hidden;
  border:1px solid rgba(168,178,214,.16);
  background:
    linear-gradient(180deg, rgba(255,46,136,.12), transparent 42%),
    linear-gradient(0deg, rgba(6,4,9,.98) 0 34%, transparent 34%),
    repeating-linear-gradient(0deg, rgba(41,224,255,.24) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(72deg, rgba(41,224,255,.22) 0 1px, transparent 1px 34px),
    #080511;
}
.guide-signal::before{
  content:""; position:absolute; width:44%; aspect-ratio:1; border-radius:50%;
  right:10%; top:18%;
  background:linear-gradient(180deg, rgba(255,220,238,.85), rgba(255,46,136,.58));
  box-shadow:0 0 34px rgba(255,46,136,.2);
}
.guide-signal::after{
  content:""; position:absolute; left:0; right:0; top:48%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(41,224,255,.7), rgba(255,46,136,.7), transparent);
}
.guide-signal span{
  position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, transparent 0 10px, rgba(6,4,9,.9) 10px 15px);
  opacity:.7;
}
.guide-block{ margin-top:clamp(2rem,5vw,3.4rem); }
.guide-main h2{
  font-size:1rem; text-transform:uppercase; letter-spacing:.2em; color:var(--cyan);
  margin:2.8em 0 1em; display:flex; align-items:center; gap:1rem;
}
.guide-block:first-of-type h2{ margin-top:0; }
.guide-main h2::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, rgba(41,224,255,.4), transparent); }
.guide-main p, .guide-main li{ font-size:.86rem; line-height:1.85; color:var(--text); }
.guide-main ul{ padding-left:1.2rem; margin:0 0 1.4em; }
.guide-main li{ margin-bottom:.85em; }
.guide-main li::marker{ color:var(--magenta); }
.guide-main code{
  font-family:var(--font-mono); font-size:.92em; color:#a5f2ff;
  background:rgba(41,224,255,.08); border:1px solid rgba(41,224,255,.16);
  padding:.1em .4em; border-radius:3px;
}
.token-table{ width:100%; border-collapse:collapse; margin:0 0 1.6em; font-size:.78rem; }
.token-table th, .token-table td{ text-align:left; padding:.65rem .9rem; border:1px solid var(--line-soft); }
.token-table th{ font-size:.62rem; text-transform:uppercase; letter-spacing:.24em; color:var(--muted); font-weight:400; }
.swatch{ display:inline-block; width:.85em; height:.85em; border-radius:2px; margin-right:.6em; vertical-align:-.08em; border:1px solid rgba(255,255,255,.2); }
.guide-repro{
  border:1px solid var(--line); border-left:2px solid var(--magenta);
  background:
    linear-gradient(150deg, rgba(15,10,27,.9), transparent 75%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 6px);
  padding:1.6rem 1.8rem; margin-top:1.4em;
}
.guide-repro p{ margin-bottom:.8em; }
.guide-repro p:last-child{ margin-bottom:0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px){
  .tape-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .tape:nth-child(3n+2), .tape:nth-child(3n){ margin-top:0; }
  .tape:nth-child(even){ margin-top:1.15rem; }
  .process{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .process::before{ display:none; }
  .process li:nth-child(even){ transform:none; }
  .quote-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .label-grid{ grid-template-columns:1fr; }
  .label-stats{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .label-stats > div + div{ border-top:none; }
  .label-stats > div{ border-top:1px solid var(--line-soft); }
  .label-stats > div:nth-child(-n+2){ border-top:none; }
  .label-stats > div:nth-child(even){ border-left:1px solid var(--line-soft); }
}

@media (max-width: 760px){
  .quote-grid{ grid-template-columns:1fr; }
  .order-grid{ grid-template-columns:1fr; }
  .catalog-ledger{ grid-template-columns:1fr; }
  .catalog-ledger span + span{ border-left:0; border-top:1px solid rgba(236,240,255,.08); }
  .capture-section{ min-height:clamp(560px, 86svh, 720px); }
  .capture-media::before{
    background:
      linear-gradient(180deg, rgba(6,4,9,.88) 0%, rgba(6,4,9,.35) 38%, rgba(6,4,9,.9) 100%),
      linear-gradient(90deg, rgba(6,4,9,.82), rgba(6,4,9,.18) 52%, rgba(6,4,9,.62));
  }
  .capture-poster,
  .ambient-video{ object-position:62% center; }
  .capture-copy{ margin-left:0; padding-top:clamp(12rem, 42vh, 19rem); }
  .capture-copy::before{ top:clamp(11rem, 40vh, 18rem); left:-.8rem; }
  .capture-log{ grid-template-columns:1fr; }
  .capture-log div{ padding:.72rem 0; }
  .capture-log div + div{ border-left:0; border-top:1px solid rgba(236,240,255,.1); padding-left:0; }
  .capture-frame-osd{ top:calc(var(--header-h) + 1.2rem); font-size:.58rem; letter-spacing:.14em; }
  .hero-ledger{ display:none; }
  .spec > div{ grid-template-columns:1fr; gap:.2rem; }
  .hero-osd{ display:none; }
  .hero::before{
    background:
      linear-gradient(180deg, rgba(6,4,9,.92) 0%, rgba(6,4,9,.7) 42%, rgba(6,4,9,.26) 100%),
      linear-gradient(90deg, rgba(6,4,9,.94), rgba(6,4,9,.3));
  }
  .hero-scrim{ background:radial-gradient(95% 64% at 48% 54%, rgba(6,4,9,.9), rgba(6,4,9,.46) 54%, rgba(6,4,9,0) 78%); }
  .guide-hero{ grid-template-columns:1fr; }
  .guide-signal{ min-height:180px; }
}

@media (max-width: 640px){
  :root{ --header-h: 98px; }
  .site-header{ flex-direction:column; align-items:stretch; gap:0; padding-inline:0; height:var(--header-h); }
  .site-header::after{ /* scroll affordance for the nav row */
    content:""; position:absolute; right:0; bottom:0; width:44px; height:46px;
    background:linear-gradient(90deg, rgba(6,4,9,0), rgba(6,4,9,.92));
    pointer-events:none;
  }
  .brand{ padding:.7rem var(--pad) .1rem; }
  .site-nav{
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    padding-inline:calc(var(--pad) - .7rem); padding-right:2.6rem;
  }
  .site-nav::-webkit-scrollbar{ display:none; }
  .cl-kana{ display:none; }
  .site-nav a{ padding:.8rem .7rem; white-space:nowrap; }
  .vhs-osd{ top:calc(var(--header-h) + 12px); font-size:10px; }
  .osd-date{ font-size:9px; }
  .hero{ padding-top:calc(var(--header-h) + 3rem); padding-bottom:4.8rem; }
  .ambient-video{ display:none; }
  .capture-poster{ transform:none; }
  .capture-stage{ padding-inline:var(--pad); }
  .capture-copy h2{ letter-spacing:.08em; }
  .capture-copy p:not(.capture-kicker){ font-size:.92rem; }
  .capture-kicker{ letter-spacing:.22em; }
  .hero-kicker{ letter-spacing:.28em; margin-bottom:1.8rem; }
  .hero-kana{ letter-spacing:.34em; }
  .hero-sub{ font-size:.94rem; line-height:1.72; }
  .hero-cta{ gap:.75rem; margin-top:2rem; }
  .hero-cta .btn{ width:100%; max-width:23rem; }
  .tape-grid{ grid-template-columns:1fr; }
  .tape:nth-child(even){ margin-top:0; }
  .process{ grid-template-columns:1fr; }
  .order-list li{ grid-template-columns:1fr; gap:.25rem; }
  .cassette{ transform:none; width:min(100%, 420px); }
  .cassette:hover{ transform:translateY(-4px); }
  .cassette::after{ display:none; }
  .foot-links{ flex-direction:column; align-items:flex-start; gap:.1rem; }
  .foot-links i{ display:none; }
  .guide-main h2{ align-items:flex-start; gap:.75rem; }
  .guide-main h2::after{ margin-top:.58em; }
  .token-table,
  .token-table tbody,
  .token-table tr,
  .token-table td{ display:block; width:100%; }
  .token-table thead{ display:none; }
  .token-table tr{ border:1px solid var(--line-soft); margin-bottom:.75rem; }
  .token-table td{ border:0; padding:.55rem .75rem; }
  .token-table td + td{ border-top:1px solid var(--line-soft); }
  .token-table td:nth-child(2)::before{ content:"Value · "; color:var(--dim); text-transform:uppercase; letter-spacing:.18em; font-size:.62rem; }
  .token-table td:nth-child(3)::before{ content:"Role · "; color:var(--dim); text-transform:uppercase; letter-spacing:.18em; font-size:.62rem; }
  .crt{ background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg, rgba(0,0,0,.1) 0 1px, transparent 1px 3px);
  }
}

/* section anchors clear the fixed header */
section[id]{ scroll-margin-top:calc(var(--header-h) + 12px); }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
  .cl::before{ animation:none; background-position:50% 0; opacity:.25; }
  .reel{ animation:none; }
  .osd-rec i{ animation:none; }
  .ambient-video{ display:none; }
  .capture-poster{ filter:saturate(1.05) contrast(1.04) brightness(.74); transform:none; }
  .capture-scan::before,
  .capture-scan::after{ display:none; }
}