/* STEP8IGHT — "1234567∞" concept redesign
   void / bone / signal-orange · Anybody (wdth 150) + Geist + Geist Mono */

:root {
  --void: #050506;
  --ink: #0a0b0d;
  --panel: #101114;
  --panel-2: #17181c;
  --line: rgba(236, 236, 230, .10);
  --line-2: rgba(236, 236, 230, .20);
  --bone: #ecece6;
  --bone-2: #c9c9c2;
  --mute: #8e8f94;
  --dim: #5d5e63;
  --signal: #ff5b1f;
  --signal-2: #ff7a45;
  --spec: #e7e7e1;
  --holo: linear-gradient(100deg, #a8f0ff 0%, #c7b3ff 28%, #ffb8de 52%, #fff0a6 76%, #a8f0ff 100%);
  --f-disp: "Anybody", "Arial Black", sans-serif;
  --f-body: "Geist", system-ui, -apple-system, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gut: clamp(16px, 2.6vw, 40px);
  --nav-h: 64px;
  --ease: cubic-bezier(.2, .7, 0, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--void); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font: 400 16px/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main { overflow-x: clip; }
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--signal); color: #000; }
:focus-visible { outline: 1.5px solid var(--signal); outline-offset: 3px; }

/* grain */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* ---------- type ---------- */
.mono { font: 500 11px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.disp {
  font-family: var(--f-disp); font-weight: 800; font-stretch: 150%;
  font-variation-settings: "wdth" 150; text-transform: uppercase;
  letter-spacing: -.025em; line-height: .86; margin: 0;
}
.holo {
  background: var(--holo); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: holo 6s linear infinite; font-style: normal;
}
@keyframes holo { to { background-position: -200% 0; } }
.outline { color: transparent; -webkit-text-stroke: 1.2px var(--line-2); }
/* vector ∞ — the web fonts' latin subset has no U+221E */
.inf { display: inline-block; width: 1.72em; height: .66em; overflow: visible; vertical-align: .04em; margin-left: .06em; }
.inf path { fill: none; stroke: url(#s8holo); stroke-width: 15; stroke-linecap: round; }
.inf.cur { width: 18px; height: 8px; margin: 0; vertical-align: middle; }
.inf.cur path { stroke: currentColor; stroke-width: 20; }
.digits span.inf .inf { width: 1.55em; }
.digits span.inf .inf path { stroke: var(--line-2); stroke-width: 5; transition: stroke .6s .7s; }
.digits.in span.inf .inf path { stroke: var(--signal); stroke-width: 15; }
.tcard.inf .inf { width: 60%; height: auto; }
.bag-empty .inf { width: 110px; height: 44px; margin: 0 auto 14px; display: block; }
.crew-ui .big .inf { width: 1.5em; }
.muted { color: var(--mute); }
.sig { color: var(--signal); }
.wrap { width: 100%; padding-left: var(--gut); padding-right: var(--gut); margin: 0 auto; max-width: 1760px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- buttons ---------- */
.btn {
  --c: var(--bone);
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  height: 48px; padding: 0 22px; overflow: hidden; isolation: isolate;
  font: 600 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: color .35s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bone);
  transform: translateX(-101%); transition: transform .5s var(--ease);
}
.btn:hover::before { transform: none; }
.btn .arr { transition: transform .4s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn-signal { background: var(--signal); color: #0b0503; }
.btn-signal::before { background: var(--bone); }
.btn-ghost { box-shadow: inset 0 0 0 1px var(--line-2); color: var(--bone); background: rgba(5, 5, 6, .35); backdrop-filter: blur(6px); }
.btn-ghost:hover { color: var(--void); }
.btn-ghost::after {
  content: ""; position: absolute; right: 0; top: 0; width: 17px; height: 1px; background: var(--line-2);
  transform-origin: right; transform: translate(0, 5.6px) rotate(45deg);
}
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn-block { width: 100%; justify-content: center; height: 56px; }
.link {
  font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px solid var(--line-2); padding-bottom: 6px; transition: color .3s, border-color .3s;
}
.link:hover { color: var(--signal); border-color: var(--signal); }

/* HUD corner brackets */
.hud { position: relative; }
.hud::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  --b: var(--line-2); --s: 12px;
  background:
    linear-gradient(var(--b), var(--b)) 0 0 / var(--s) 1px, linear-gradient(var(--b), var(--b)) 0 0 / 1px var(--s),
    linear-gradient(var(--b), var(--b)) 100% 0 / var(--s) 1px, linear-gradient(var(--b), var(--b)) 100% 0 / 1px var(--s),
    linear-gradient(var(--b), var(--b)) 0 100% / var(--s) 1px, linear-gradient(var(--b), var(--b)) 0 100% / 1px var(--s),
    linear-gradient(var(--b), var(--b)) 100% 100% / var(--s) 1px, linear-gradient(var(--b), var(--b)) 100% 100% / 1px var(--s);
  background-repeat: no-repeat; transition: --b .3s;
}

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 60; height: var(--nav-h);
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 28px;
  padding: 0 var(--gut); transition: transform .5s var(--ease);
}
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: rgba(5, 5, 6, .72); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line); transition: opacity .4s;
}
.nav.scrolled::before { opacity: 1; }
.nav.hide { transform: translateY(-100%); }
.logo-word, .logo-mono { display: block; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.logo-word { --m: url(../img/brand/logo-word.png); width: 132px; height: 20px; }
.logo-mono { --m: url(../img/brand/logo-mono.png); width: 30px; height: 20px; }
.nav-logo { display: flex; align-items: center; gap: 12px; color: var(--bone); }
.nav-logo .logo-mono { color: var(--signal); transition: transform .8s var(--ease); }
.nav-logo:hover .logo-mono { transform: rotate(90deg); }
.nav-links { display: flex; gap: 26px; justify-content: center; }
.nav-links a { font: 500 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bone-2); position: relative; padding: 6px 0; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--signal); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--bone); }
.nav-links a:hover::after, .nav-links a[aria-current]::after { transform: none; transform-origin: left; }
.nav-hud { display: flex; gap: 18px; color: var(--mute); }
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); margin-right: 8px; box-shadow: 0 0 0 0 rgba(255, 91, 31, .6); animation: ping 1.8s infinite; vertical-align: 1px; }
@keyframes ping { 70% { box-shadow: 0 0 0 7px rgba(255, 91, 31, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 91, 31, 0); } }
.nav-act { display: flex; gap: 8px; align-items: center; }
.nav-btn { height: 36px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s, color .3s; }
.nav-btn:hover { box-shadow: inset 0 0 0 1px var(--bone); }
.nav-btn kbd { font: inherit; color: var(--dim); }
.bag-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; background: var(--signal); color: #000; font-weight: 700; }
.bag-count.bump { animation: bump .5s var(--ease); }
@keyframes bump { 40% { transform: scale(1.5); } }
.burger { display: none; width: 36px; height: 36px; position: relative; box-shadow: inset 0 0 0 1px var(--line); }
.burger span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: var(--bone); transition: transform .4s var(--ease); }
.burger span:first-child { top: 14px; } .burger span:last-child { top: 21px; }
.menu-open .burger span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-open .burger span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.mmenu {
  position: fixed; inset: 0; z-index: 55; background: var(--void); padding: calc(var(--nav-h) + 24px) var(--gut) 32px;
  display: flex; flex-direction: column; justify-content: space-between;
  clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease-io); visibility: hidden;
}
.menu-open .mmenu { clip-path: inset(0); visibility: visible; }
.mmenu nav a { display: flex; align-items: baseline; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mmenu nav a .disp { font-size: clamp(34px, 10vw, 64px); }
.mmenu nav a .mono { color: var(--signal); }

/* ---------- page curtain ---------- */
.curtain {
  position: fixed; inset: 0; z-index: 100; background: var(--void); display: grid; place-items: center;
  transform: translateY(-100%); pointer-events: none;
}
.js .curtain { transform: none; animation: curtainOut .65s .12s var(--ease-io) forwards; }
.curtain.go { animation: curtainIn .5s var(--ease-io) forwards !important; }
.curtain .logo-mono { width: 64px; height: 44px; color: var(--signal); animation: spin8 1.2s var(--ease-io) infinite; }
.curtain .mono { position: absolute; bottom: 28px; left: var(--gut); color: var(--mute); }
@keyframes curtainOut { to { transform: translateY(-100%); } }
@keyframes curtainIn { from { transform: translateY(100%); } to { transform: none; } }
@keyframes spin8 { 50% { transform: rotate(90deg); } 100% { transform: rotate(180deg); } }

/* ---------- cursor ---------- */
.cursor, .cursor-ring { position: fixed; left: 0; top: 0; z-index: 110; pointer-events: none; border-radius: 50%; display: none; }
@media (pointer: fine) { .has-cursor .cursor, .has-cursor .cursor-ring { display: block; } }
.cursor { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--signal); }
.cursor-ring {
  width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid rgba(236, 236, 230, .45);
  transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s, border-color .35s;
  display: none; place-items: center;
}
.cursor-ring b { font: 600 9px/1 var(--f-mono); letter-spacing: .1em; color: #000; opacity: 0; transition: opacity .2s; }
.cursor-ring.on { width: 64px; height: 64px; margin: -32px 0 0 -32px; border-color: transparent; background: rgba(236, 236, 230, .12); backdrop-filter: blur(2px); }
.cursor-ring.label { width: 78px; height: 78px; margin: -39px 0 0 -39px; background: var(--signal); border-color: var(--signal); }
.cursor-ring.label b { opacity: 1; }
@media (pointer: fine) { .has-cursor .cursor-ring { display: grid; } }

/* ---------- reveal ---------- */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }
.rv-clip { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--ease-io); transition-delay: var(--d, 0s); }
.rv-clip.in { clip-path: inset(0); }
.split .ch { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 28ms + var(--d, 0s)); }
.split-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .04em; white-space: nowrap; }
.split.in .ch { transform: none; }

/* ---------- section scaffolding ---------- */
.sec { position: relative; padding-top: clamp(80px, 12vw, 180px); padding-bottom: clamp(80px, 12vw, 180px); }
.sec-head { display: flex; align-items: center; gap: 18px; color: var(--mute); margin-bottom: clamp(36px, 5vw, 72px); }
.sec-head .rule { flex: 1; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.sec-head .rule::after { content: ""; position: absolute; inset: 0; width: 18%; background: linear-gradient(90deg, transparent, var(--signal), transparent); animation: scan 3.6s var(--ease-io) infinite; }
@keyframes scan { from { transform: translateX(-100%); } to { transform: translateX(560%); } }
.sec-head .step { color: var(--signal); }
.h2 { font-size: clamp(44px, 8.6vw, 148px); }
.h3 { font-size: clamp(28px, 4vw, 60px); }
.lede { font-size: clamp(17px, 1.35vw, 21px); line-height: 1.5; color: var(--bone-2); max-width: 46ch; }

/* ---------- ticker ---------- */
.ticker { border-block: 1px solid var(--line); overflow: hidden; background: var(--void); position: relative; z-index: 3; }
.ticker-track { display: flex; width: max-content; animation: tick 38s linear infinite; }
.ticker-track span { display: inline-flex; align-items: center; gap: 22px; padding: 18px 22px; font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: var(--bone-2); }
.ticker-track span::after { content: "∞"; color: var(--signal); font-size: 16px; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- HERO ---------- */
.hero { position: relative; height: 230vh; background: var(--void); }
.hero-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero-video, .hero-gl { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-video { filter: brightness(.45) saturate(.9); }
.gl-on .hero-video { opacity: 0; }
.hero-gl { z-index: 1; }
.hero-inf { position: absolute; z-index: 1; left: 50%; top: 50%; width: min(56vw, 640px); transform: translate(-50%, -50%) rotate(90deg); opacity: 0; transition: transform .2s linear; }
.no-gl .hero-inf { opacity: .9; }
.hero-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(5, 5, 6, .55), transparent 22%, transparent 55%, rgba(5, 5, 6, .85)); }
.hero-ui { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-rows: auto 1fr auto; padding-top: calc(var(--nav-h) + 18px); padding-bottom: 26px; pointer-events: none; }
.hero-ui a, .hero-ui button { pointer-events: auto; }
.hero-top { display: flex; justify-content: space-between; gap: 20px; color: var(--mute); border-top: 1px solid var(--line); padding-top: 12px; }
.hero-copy { align-self: end; max-width: 1100px; padding-bottom: clamp(24px, 4vh, 48px); will-change: transform, opacity; }
.hero-copy .kicker { color: var(--signal); margin: 0 0 18px; }
.hero-h { font-size: clamp(48px, 9.4vw, 172px); }
.hero-h .line { display: block; overflow: hidden; padding-bottom: .03em; }
.hero-h .line > span { display: block; transform: translateY(105%); animation: lineUp 1.2s var(--ease) forwards; animation-delay: calc(.9s + var(--l, 0) * .12s); }
.hero-h .line:nth-child(2) > span { --l: 1; }
@keyframes lineUp { to { transform: none; } }
.hero-sub { max-width: 44ch; color: var(--bone-2); font-size: clamp(15px, 1.2vw, 18px); margin: 22px 0 28px; opacity: 0; animation: fadeIn 1s 1.4s forwards; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; opacity: 0; animation: fadeIn 1s 1.55s forwards; }
@keyframes fadeIn { to { opacity: 1; } }
.hero-bottom { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line); padding-top: 14px; color: var(--mute); }
.steps { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.steps li { width: 30px; height: 30px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); color: var(--dim); transition: background .3s, color .3s, box-shadow .3s; }
.steps li.on { background: var(--bone); color: var(--void); box-shadow: none; }
.steps li.inf { font-size: 15px; }
.steps li.inf.on { background: var(--signal); }
.sound { display: inline-flex; align-items: center; gap: 10px; height: 30px; padding: 0 10px; white-space: nowrap; flex: none; box-shadow: inset 0 0 0 1px var(--line); color: var(--bone-2); }
.sound .bars { display: inline-flex; gap: 2px; align-items: flex-end; height: 10px; }
.sound .bars i { width: 2px; height: 3px; background: currentColor; }
.sound.on { color: var(--signal); }
.sound.on .bars i { animation: eq .9s ease-in-out infinite; }
.sound.on .bars i:nth-child(2) { animation-delay: -.3s; } .sound.on .bars i:nth-child(3) { animation-delay: -.6s; }
@keyframes eq { 50% { height: 10px; } }
.hero-end { position: absolute; z-index: 4; left: 50%; bottom: 16%; transform: translate(-50%, 20px); opacity: 0; color: var(--bone); font-size: 13px; letter-spacing: .32em; white-space: nowrap; transition: none; }
.hero-end b { color: var(--signal); font-weight: 600; }

/* ---------- STEP 01 now live ---------- */
.now-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 80px); align-items: start; }
.now-title { position: sticky; top: calc(var(--nav-h) + 30px); }
.now-no { font: 800 clamp(90px, 15vw, 260px)/.8 var(--f-disp); font-stretch: 150%; font-variation-settings: "wdth" 150; letter-spacing: -.04em; }
.now-name { font-size: clamp(56px, 7.6vw, 150px); margin-top: -.12em; white-space: nowrap; }
.now-q { font: 500 clamp(18px, 1.6vw, 24px)/1.35 var(--f-body); margin: 26px 0 14px; max-width: 26ch; }
.now-q::before { content: "“"; color: var(--signal); }
.now-q::after { content: "”"; color: var(--signal); }
.now-title p.muted { max-width: 44ch; margin: 0 0 28px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); margin: 0 0 30px; }
.stats div { padding: 14px 0; border-right: 1px solid var(--line); padding-left: 14px; }
.stats div:first-child { padding-left: 0; }
.stats div:last-child { border-right: 0; }
.stats dt { color: var(--mute); margin-bottom: 8px; }
.stats dd { margin: 0; font: 700 clamp(28px, 2.6vw, 42px)/1 var(--f-disp); font-stretch: 130%; font-variation-settings: "wdth" 130; }
.now-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.now-visual figure { margin: 0; overflow: hidden; position: relative; background: var(--panel); }
.now-visual figure:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 5; }
.now-visual figure:nth-child(2) { aspect-ratio: 3 / 4; }
.now-visual figure:nth-child(3) { aspect-ratio: 3 / 4; margin-top: 18%; }
.now-visual img { width: 100%; height: 118%; object-fit: cover; will-change: transform; }
.now-visual figcaption { position: absolute; left: 14px; bottom: 12px; right: 14px; display: flex; justify-content: space-between; color: var(--bone); z-index: 2; text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }

/* ---------- product rail + cards ---------- */
.rail-wrap { margin-top: clamp(48px, 6vw, 96px); }
.rail-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 20px; }
.rail-ctrl { display: flex; gap: 6px; }
.rail-ctrl button { width: 44px; height: 44px; box-shadow: inset 0 0 0 1px var(--line-2); display: grid; place-items: center; transition: background .3s, color .3s; }
.rail-ctrl button:hover { background: var(--bone); color: var(--void); }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 23vw, 360px); gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); padding-left: var(--gut); padding-right: var(--gut); padding-bottom: 6px;
  scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain;
}
.rail::-webkit-scrollbar { display: none; }
.rail.drag { cursor: grabbing; scroll-snap-type: none; }
.rail.drag a { pointer-events: none; }
.rail > * { scroll-snap-align: start; }

.card { display: block; position: relative; }
.card-hit { position: absolute; inset: 0; z-index: 1; }
.card-tag, .card-state { pointer-events: none; }
.card-media {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--spec);
}
.card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: opacity .6s var(--ease), transform 1.2s var(--ease); }
.card-media img.b { opacity: 0; object-fit: cover; mix-blend-mode: normal; }
.card:hover .card-media img.a { transform: scale(1.04); }
.card:hover .card-media img.b { opacity: 1; }
.card-media::after { /* scan line on hover */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255, 91, 31, .14), transparent); transform: translateY(-100%); opacity: 0;
}
.card:hover .card-media::after { animation: scanDown 1.1s var(--ease-io); }
@keyframes scanDown { 0% { transform: translateY(-100%); opacity: 1; } 100% { transform: translateY(340%); opacity: 0; } }
.card-tag, .card-state { position: absolute; z-index: 2; top: 10px; font: 600 10px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 7px; }
.card-tag { left: 10px; background: var(--void); color: var(--bone); }
.card-state { right: 10px; color: #111; background: rgba(255, 255, 255, .7); backdrop-filter: blur(6px); }
.card-state.live { background: var(--signal); color: #0b0503; }
.card-meta { display: flex; justify-content: space-between; gap: 12px; padding: 12px 2px 0; }
.card-meta h3 { margin: 0; font: 600 13px/1.3 var(--f-body); letter-spacing: .01em; text-transform: uppercase; }
.card-meta .price { font: 500 12px/1.3 var(--f-mono); white-space: nowrap; }
.card-meta .price s { color: var(--dim); margin-right: 6px; }
.card-sizes { display: flex; gap: 4px; flex-wrap: wrap; padding: 8px 2px 0; }
.card-sizes i { font: 500 10px/1 var(--f-mono); font-style: normal; padding: 4px 5px; box-shadow: inset 0 0 0 1px var(--line); color: var(--bone-2); }
.card-sizes i.x { color: var(--dim); text-decoration: line-through; box-shadow: none; }
.card-quick {
  position: absolute; z-index: 3; left: 10px; right: 10px; bottom: 10px; display: flex; gap: 4px; flex-wrap: wrap;
  opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .45s var(--ease);
}
.card:hover .card-quick, .card:focus-within .card-quick { opacity: 1; transform: none; }
.card-quick button { flex: 1 0 auto; min-width: 36px; height: 34px; background: rgba(5, 5, 6, .88); color: var(--bone); font: 600 10px/1 var(--f-mono); letter-spacing: .08em; transition: background .25s, color .25s; }
.card-quick button:hover { background: var(--signal); color: #000; }
.card-quick button:disabled { opacity: .35; text-decoration: line-through; pointer-events: none; }
.card-quick .lbl { width: 100%; text-align: center; font: 600 9px/1 var(--f-mono); letter-spacing: .14em; color: #222; text-transform: uppercase; padding: 4px 0 2px; }
@media (hover: none) { .card-quick { display: none; } }

.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 14px; }

/* ---------- ARCHIVE TUNNEL ---------- */
.tunnel { position: relative; height: calc(var(--n) * 62vh); background: radial-gradient(120% 70% at 50% 50%, #0d0e12 0%, var(--void) 70%); }
.tunnel-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.tunnel-head { position: absolute; z-index: 5; left: 0; right: 0; top: calc(var(--nav-h) + 16px); display: flex; justify-content: space-between; align-items: start; gap: 24px; pointer-events: none; }
.tunnel-head .h3 { max-width: 12ch; }
.tunnel-head p { max-width: 36ch; color: var(--mute); margin: 0; font-size: 14px; }
.tunnel-view { position: absolute; inset: 0; perspective: 900px; perspective-origin: 50% 50%; }
.tunnel-stage { position: absolute; left: 50%; top: 52%; transform-style: preserve-3d; }
.tframe { position: absolute; left: 0; top: 0; width: 110vw; height: 104vh; margin: -52vh 0 0 -55vw; box-shadow: inset 0 0 0 1px rgba(236, 236, 230, .09); will-change: transform, opacity; opacity: 0; }
.tframe::before, .tframe::after { content: ""; position: absolute; width: 22px; height: 22px; border: 0 solid var(--signal); }
.tframe::before { left: 0; top: 0; border-width: 1.5px 0 0 1.5px; }
.tframe::after { right: 0; bottom: 0; border-width: 0 1.5px 1.5px 0; }
.tcard {
  position: absolute; left: 0; top: 0; width: clamp(220px, 24vw, 400px); aspect-ratio: 3 / 4;
  margin-left: calc(clamp(220px, 24vw, 400px) / -2); margin-top: calc(clamp(220px, 24vw, 400px) * -.666);
  will-change: transform, opacity; opacity: 0; backface-visibility: hidden;
}
.tcard img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92); }
.tcard::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(236, 236, 230, .16); pointer-events: none; }
.tcard-meta { position: absolute; left: 0; right: 0; top: calc(100% + 10px); display: flex; justify-content: space-between; gap: 10px; color: var(--bone-2); }
.tcard-meta b { color: var(--signal); font-weight: 600; }
.tcard-no { position: absolute; left: -2px; top: -.62em; font: 800 clamp(48px, 5vw, 86px)/1 var(--f-disp); font-stretch: 150%; font-variation-settings: "wdth" 150; color: var(--bone); mix-blend-mode: difference; }
.tcard.inf { display: grid; place-items: center; background: var(--panel); text-align: center; }

.tcard.inf p { position: absolute; bottom: 18px; left: 18px; right: 18px; margin: 0; color: var(--mute); }
.tunnel-read { position: absolute; z-index: 5; left: 0; right: 0; bottom: 26px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; }
.tunnel-now .mono { color: var(--mute); margin-bottom: 6px; }
.tunnel-now .disp { font-size: clamp(26px, 3.3vw, 56px); transition: opacity .25s; }
.tunnel-now .disp b { color: var(--signal); font-weight: inherit; }
.tunnel-rail { display: flex; gap: 3px; }
.tunnel-rail i { width: clamp(8px, 1.1vw, 18px); height: 22px; background: var(--line); transition: background .3s, height .3s; }
.tunnel-rail i.on { background: var(--signal); height: 34px; }
.tunnel-rail i.past { background: var(--bone-2); }
.tunnel-fog { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(60% 50% at 50% 52%, transparent 40%, rgba(5, 5, 6, .85) 100%); }

/* ---------- STEP 03 system ---------- */
.sys-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.sys {
  position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; min-height: clamp(200px, 22vw, 340px);
  padding: 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; isolation: isolate;
}
.sys .mono { color: var(--mute); }
.sys .n { font: 800 clamp(56px, 6.4vw, 110px)/.8 var(--f-disp); font-stretch: 150%; font-variation-settings: "wdth" 150; grid-row: 3; align-self: end; transition: color .4s; }
.sys h3 { grid-column: 1 / -1; grid-row: 2; align-self: end; margin: 0 0 10px; font: 600 clamp(18px, 1.6vw, 24px)/1.1 var(--f-body); text-transform: uppercase; }
.sys .go { grid-row: 3; grid-column: 2; align-self: end; width: 44px; height: 44px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-2); transition: background .4s, color .4s; }
.sys figure { position: absolute; z-index: -1; right: 0; top: 0; bottom: 0; width: 52%; margin: 0; background: var(--spec); clip-path: inset(0 0 0 100%); transition: clip-path .8s var(--ease-io); }
.sys figure img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.sys:hover figure { clip-path: inset(0); }
.sys:hover .go { background: var(--signal); color: #000; box-shadow: none; }
.sys:hover .n { color: var(--signal); }
.instock-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin: clamp(60px, 8vw, 120px) 0 26px; }

/* ---------- FILM ---------- */
.film { position: relative; padding-top: clamp(40px, 6vw, 90px); }
.film-frame { position: relative; height: 92vh; margin: 0 auto; overflow: hidden; background: var(--ink); clip-path: inset(var(--ci, 10%) var(--ci, 10%) round 0); will-change: clip-path; }
.film-frame video, .film-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 5, 6, .55), rgba(5, 5, 6, .1) 40%, rgba(5, 5, 6, .75)); }
.film-ui { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-rows: auto 1fr auto; padding: clamp(18px, 3vw, 40px); }
.film-ui .row { display: flex; justify-content: space-between; color: var(--bone-2); }
.film-ui h2 { align-self: center; font-size: clamp(36px, 6.6vw, 118px); max-width: 15ch; }
.film-ui h2 em { font-style: normal; color: var(--signal); }
.play { display: inline-flex; align-items: center; gap: 14px; }
.play i { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--bone); color: var(--void); transition: transform .5s var(--ease), background .3s; }
.play:hover i { transform: scale(1.12); background: var(--signal); }
.strip { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-top: 6px; }
.strip img { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; filter: grayscale(.6) brightness(.8); transition: filter .4s; }
.strip img:hover { filter: none; }

.modal { position: fixed; inset: 0; z-index: 95; background: rgba(5, 5, 6, .94); display: grid; place-items: center; padding: var(--gut); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.modal.open { opacity: 1; visibility: visible; }
.modal video, .modal img { max-width: min(1400px, 100%); max-height: 86vh; width: auto; }
.modal-x { position: absolute; top: 18px; right: var(--gut); height: 40px; padding: 0 14px; box-shadow: inset 0 0 0 1px var(--line-2); }

/* ---------- SCENT LAB ---------- */
.lab { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 56px); align-items: start; }
.table { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.el {
  --hue: #888; position: relative; aspect-ratio: 1; padding: 10px; text-align: left; display: flex; flex-direction: column; justify-content: space-between;
  background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); transition: background .35s, box-shadow .35s, transform .35s var(--ease);
}
.el::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--hue); transition: width .35s var(--ease); }
.el .code { font: 800 clamp(22px, 2.6vw, 42px)/1 var(--f-disp); font-stretch: 140%; font-variation-settings: "wdth" 140; }
.el .nm { font: 500 9.5px/1.25 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--bone-2); }
.el .yr { position: absolute; top: 10px; right: 10px; font: 500 10px/1 var(--f-mono); color: var(--mute); }
.el:hover { transform: translateY(-3px); }
.el.on { background: var(--bone); color: var(--void); box-shadow: none; }
.el.on .nm, .el.on .yr { color: #333; }
.el.on::before { width: 6px; }
.aura { position: relative; margin-top: 6px; aspect-ratio: 16 / 8; overflow: hidden; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); isolation: isolate; }
.aura::before {
  content: ""; position: absolute; inset: -40%; z-index: -1; opacity: .5; filter: blur(34px);
  background: radial-gradient(38% 46% at 32% 42%, var(--hue, #ff5b1f) 0%, transparent 70%), radial-gradient(30% 40% at 70% 62%, var(--hue, #ff5b1f) 0%, transparent 72%);
  animation: auraSpin 16s linear infinite;
}
@keyframes auraSpin { to { transform: rotate(360deg); } }
.aura-code { position: absolute; right: -.02em; top: -.12em; font: 800 clamp(100px, 13vw, 240px)/1 var(--f-disp); font-stretch: 150%; font-variation-settings: "wdth" 150; color: transparent; -webkit-text-stroke: 1.2px rgba(236, 236, 230, .3); }
.aura-name { position: absolute; left: 16px; top: 16px; color: var(--bone); }
.aura-cap { position: absolute; left: 16px; top: 36px; color: var(--mute); font-size: 9.5px; }
.aura-wave { position: absolute; left: 16px; right: 16px; bottom: 16px; height: 42%; display: flex; align-items: flex-end; gap: 3px; }
.aura-wave i { flex: 1; height: calc(var(--v, .3) * 100%); background: linear-gradient(0deg, var(--hue, #ff5b1f), var(--bone)); opacity: .85; transform-origin: bottom; transition: height .7s var(--ease); animation: wave 2.6s ease-in-out infinite; animation-delay: calc(var(--k) * -55ms); }
.aura-wave i:nth-child(16n + 1) { margin-left: 8px; }
@keyframes wave { 50% { transform: scaleY(.55); } }
.el.legend { background: transparent; box-shadow: none; padding: 4px; justify-content: flex-start; gap: 8px; color: var(--mute); }
.el.legend::before { display: none; }
.el.legend p { margin: 0; font-size: 12px; line-height: 1.45; }
.viewer { position: sticky; top: calc(var(--nav-h) + 24px); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.viewer figure { margin: 0; aspect-ratio: 5 / 4; background: var(--spec); position: relative; overflow: hidden; }
.viewer figure img { width: 100%; height: 100%; object-fit: cover; transition: opacity .45s; }
.viewer figure .badge { position: absolute; left: 12px; top: 12px; background: var(--void); padding: 6px 8px; }
.viewer-body { padding: 20px; }
.viewer-body h3 { margin: 6px 0 4px; font: 800 clamp(24px, 2.4vw, 36px)/1 var(--f-disp); font-stretch: 130%; font-variation-settings: "wdth" 130; text-transform: uppercase; }
.notes { display: grid; gap: 10px; margin: 18px 0 20px; }
.notes div { display: grid; grid-template-columns: 70px 1fr; gap: 12px; align-items: start; }
.notes dt { color: var(--mute); padding-top: 3px; }
.notes dd { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.notes dd span { font: 500 11px/1 var(--f-mono); padding: 5px 7px; box-shadow: inset 0 0 0 1px var(--line-2); text-transform: uppercase; letter-spacing: .04em; }
.meter { height: 3px; background: var(--line); margin-top: 6px; position: relative; overflow: hidden; }
.meter i { position: absolute; inset: 0; background: var(--hue, var(--signal)); transform-origin: left; transition: transform .7s var(--ease); }
.viewer-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; }

/* ---------- CREW ---------- */
.crew { position: relative; min-height: 100vh; display: grid; align-items: end; overflow: hidden; }
.crew > img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; filter: brightness(.6) saturate(.95); will-change: transform; }
.crew::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--void) 2%, rgba(5, 5, 6, .2) 50%, rgba(5, 5, 6, .6)); }
.crew-ui { position: relative; z-index: 2; padding-bottom: clamp(40px, 6vw, 90px); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 30px; }
.crew-ui .big { font-size: clamp(72px, 14vw, 250px); white-space: nowrap; }

.crew-ui p { max-width: 38ch; color: var(--bone-2); margin: 16px 0 26px; }
.ig-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ig-strip a { position: relative; aspect-ratio: 1; overflow: hidden; display: block; }
.ig-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .4s; filter: grayscale(.3); }
.ig-strip a:hover img { transform: scale(1.08); filter: none; }

/* ---------- manifesto ---------- */
.mani { text-align: left; }
.digits { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .04em; font: 800 clamp(38px, 10.4vw, 230px)/.82 var(--f-disp); font-stretch: 150%; font-variation-settings: "wdth" 150; letter-spacing: -.03em; }
.digits span { color: transparent; -webkit-text-stroke: 1.2px var(--line-2); transition: color .6s var(--ease), -webkit-text-stroke-color .6s; transition-delay: calc(var(--i) * 90ms); }
.digits.in span { color: var(--bone); -webkit-text-stroke-color: transparent; }


.mani-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 80px); margin-top: clamp(36px, 5vw, 80px); border-top: 1px solid var(--line); padding-top: 28px; }
.mani-body p { margin: 0 0 18px; color: var(--bone-2); font-size: clamp(16px, 1.2vw, 19px); }
.mani-body blockquote { margin: 0; font: 500 clamp(22px, 2.2vw, 34px)/1.25 var(--f-body); }
.mani-body blockquote cite { display: block; margin-top: 14px; font: 500 11px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); font-style: normal; }

/* ---------- join ---------- */
.join { border-top: 1px solid var(--line); }
.join-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.field { display: flex; box-shadow: inset 0 -1px 0 var(--line-2); }
.field input { flex: 1; min-width: 0; height: 64px; background: none; border: 0; outline: 0; font-size: clamp(18px, 1.6vw, 24px); }
.field input::placeholder { color: var(--dim); }
.form-note { margin-top: 12px; color: var(--mute); min-height: 1.4em; }
.form-note.ok { color: var(--signal); }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding-top: clamp(50px, 6vw, 90px); background: var(--void); position: relative; z-index: 2; }
.foot-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 32px; }
.foot h4 { margin: 0 0 16px; color: var(--mute); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot ul a { color: var(--bone-2); transition: color .25s; font-size: 14px; }
.foot ul a:hover { color: var(--signal); }
/* the brand's own STEP8IGHT wordmark, full bleed */
.foot-word { position: relative; margin-top: clamp(40px, 6vw, 90px); width: 100%; aspect-ratio: 1086 / 165; user-select: none; }
.foot-word::before, .foot-word::after { content: ""; position: absolute; inset: 0; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.foot-word::before { --m: url(../img/brand/logo-word-no8.png); background: var(--panel-2); transition: background .6s var(--ease); }
.foot-word::after { --m: url(../img/brand/logo-word-8.png); background: var(--signal); }
.foot:hover .foot-word::before { background: #222329; }

.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; border-top: 1px solid var(--line); padding: 18px 0 26px; color: var(--dim); }
.foot-base a { color: var(--mute); }
.foot-base a:hover { color: var(--bone); }

/* ---------- drawer (bag) ---------- */
.scrim { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .6); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.drawer {
  position: fixed; z-index: 75; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: var(--ink);
  border-left: 1px solid var(--line); display: grid; grid-template-rows: auto 1fr auto; transform: translateX(100%); transition: transform .6s var(--ease-io);
}
.bag-open .drawer { transform: none; }
.bag-open .scrim, .search-open .scrim { opacity: 1; visibility: visible; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.drawer-list { overflow: auto; padding: 8px 20px; }
.bag-item { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.bag-item figure { margin: 0; aspect-ratio: 4 / 5; background: var(--spec); }
.bag-item figure img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.bag-item h5 { margin: 0 0 4px; font: 600 13px/1.3 var(--f-body); text-transform: uppercase; }
.bag-item .mono { color: var(--mute); }
.qty { display: inline-flex; margin-top: 10px; box-shadow: inset 0 0 0 1px var(--line-2); }
.qty button { width: 30px; height: 30px; }
.qty span { width: 30px; display: grid; place-items: center; font: 500 12px/1 var(--f-mono); }
.bag-item .rm { color: var(--mute); align-self: start; font: 500 10px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.bag-item .rm:hover { color: var(--signal); }
.bag-empty { padding: 60px 0; text-align: center; color: var(--mute); }

.drawer-foot { padding: 18px 20px 22px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.drawer-foot .row { display: flex; justify-content: space-between; }
.drawer-foot small { color: var(--mute); font-size: 12px; line-height: 1.45; }

/* ---------- search ---------- */
.search {
  position: fixed; z-index: 80; inset: 0 0 auto; max-height: 92vh; background: var(--ink); border-bottom: 1px solid var(--line);
  transform: translateY(-102%); transition: transform .6s var(--ease-io); display: grid; grid-template-rows: auto 1fr; overflow: hidden;
}
.search-open .search { transform: none; }
.search-bar { display: flex; align-items: center; gap: 16px; padding: 22px var(--gut); border-bottom: 1px solid var(--line); }
.search-bar input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font: 700 clamp(26px, 4vw, 56px)/1 var(--f-disp); font-stretch: 130%; font-variation-settings: "wdth" 130; text-transform: uppercase; }
.search-bar input::placeholder { color: var(--panel-2); }
.search-res { overflow: auto; padding: 22px var(--gut) 34px; }
.search-res .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 10px; }
.search-hint { color: var(--mute); }

/* ---------- toast (Vijaya) ---------- */
.toast {
  position: fixed; z-index: 85; right: 16px; bottom: 16px; width: min(360px, calc(100% - 32px)); padding: 14px 40px 14px 14px;
  background: rgba(16, 17, 20, .92); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line-2);
  font-size: 12.5px; line-height: 1.45; color: var(--bone-2); transform: translateY(140%); transition: transform .7s var(--ease);
}
.toast.show { transform: none; }
.toast b { display: block; color: var(--bone); font: 600 10px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
.toast b::before { content: "● "; color: var(--signal); }
.toast button { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; color: var(--mute); }
.toast button:hover { color: var(--bone); }

/* ---------- inner pages: page head ---------- */
.phead { padding-top: calc(var(--nav-h) + clamp(40px, 7vw, 110px)); padding-bottom: clamp(30px, 4vw, 60px); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.phead .crumbs { color: var(--mute); display: flex; gap: 10px; margin-bottom: 24px; }
.phead .crumbs a:hover { color: var(--bone); }
.phead h1 { font-size: clamp(54px, 11vw, 200px); }
.phead .row { display: flex; justify-content: space-between; align-items: end; gap: 30px; flex-wrap: wrap; margin-top: 26px; }
.phead .lede { margin: 0; }
.phead-stats { display: flex; gap: 26px; }
.phead-stats div b { display: block; font: 800 clamp(26px, 2.6vw, 40px)/1 var(--f-disp); font-stretch: 140%; font-variation-settings: "wdth" 140; }
.phead-stats div span { color: var(--mute); }

/* ---------- shop ---------- */
.console { position: sticky; top: var(--nav-h); z-index: 20; background: rgba(5, 5, 6, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.console-row { display: flex; align-items: center; gap: 10px; min-height: 58px; overflow-x: auto; scrollbar-width: none; }
.console-row::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 34px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; box-shadow: inset 0 0 0 1px var(--line); font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bone-2); transition: background .25s, color .25s, box-shadow .25s; white-space: nowrap; }
.chip:hover { box-shadow: inset 0 0 0 1px var(--bone-2); color: var(--bone); }
.chip.on { background: var(--bone); color: var(--void); box-shadow: none; }
.chip sup { font-size: 9px; color: var(--mute); }
.chip.on sup { color: #444; }
.console .sep { flex: none; width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.toggle { flex: none; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bone-2); }
.toggle input { appearance: none; width: 34px; height: 18px; box-shadow: inset 0 0 0 1px var(--line-2); position: relative; margin: 0; cursor: pointer; transition: background .25s; }
.toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; background: var(--bone-2); transition: transform .3s var(--ease), background .25s; }
.toggle input:checked { background: var(--signal); box-shadow: none; }
.toggle input:checked::after { transform: translateX(16px); background: #000; }
.sel { flex: none; position: relative; }
.sel select { appearance: none; height: 34px; padding: 0 30px 0 12px; background: var(--void); border: 0; box-shadow: inset 0 0 0 1px var(--line); font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bone-2); cursor: pointer; }
.sel::after { content: "▾"; position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--mute); pointer-events: none; }
.console-search { flex: 1 0 180px; display: flex; align-items: center; gap: 8px; height: 34px; box-shadow: inset 0 0 0 1px var(--line); padding: 0 10px; min-width: 160px; }
.console-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font: 500 12px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
[data-cat-chips] { display: contents; }
.drop-chips { border-top: 1px solid var(--line); }
.drop-chips .chip { height: 30px; padding: 0 10px; }
.result-bar { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; color: var(--mute); }
.drop-banner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); min-height: 54vh; border-bottom: 1px solid var(--line); }
.drop-banner figure { margin: 0; position: relative; overflow: hidden; }
.drop-banner figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.drop-banner .txt { padding: clamp(24px, 4vw, 60px) var(--gut); display: flex; flex-direction: column; justify-content: space-between; gap: 30px; }
.drop-banner .no { font: 800 clamp(80px, 12vw, 210px)/.8 var(--f-disp); font-stretch: 150%; font-variation-settings: "wdth" 150; letter-spacing: -.04em; }
.drop-banner h2 { font-size: clamp(36px, 5vw, 86px); }
.more { display: flex; justify-content: center; padding: 50px 0 20px; }
.empty { padding: 90px 0; text-align: center; color: var(--mute); }

/* ---------- product ---------- */
.pdp { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0; padding-top: var(--nav-h); }
.pdp-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; }
.pdp-gallery figure { margin: 0; position: relative; aspect-ratio: 4 / 5; background: var(--spec); overflow: hidden; cursor: zoom-in; }
.pdp-gallery figure:first-child { grid-column: 1 / -1; aspect-ratio: 1 / 1; }
.pdp-gallery img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform 1.2s var(--ease); }
.pdp-gallery figure:hover img { transform: scale(1.03); }
.pdp-gallery .idx { position: absolute; left: 10px; bottom: 10px; color: #333; }
.pdp-info { position: relative; border-left: 1px solid var(--line); }
.pdp-sticky { position: sticky; top: var(--nav-h); padding: clamp(24px, 3vw, 48px) var(--gut) 40px; max-height: calc(100vh - var(--nav-h)); overflow: auto; scrollbar-width: none; }
.pdp-sticky::-webkit-scrollbar { display: none; }
.pdp .crumbs { color: var(--mute); display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.pdp .crumbs a:hover { color: var(--bone); }
.pdp h1 { font-size: clamp(32px, 3.4vw, 58px); line-height: .92; }
.pdp-price { display: flex; align-items: baseline; gap: 14px; margin: 18px 0 6px; font: 500 22px/1 var(--f-mono); }
.pdp-price s { color: var(--dim); font-size: 16px; }
.pdp-status { display: flex; align-items: center; gap: 8px; color: var(--mute); margin-bottom: 26px; }
.pdp-status.live { color: var(--signal); }
.opt { margin-bottom: 22px; }
.opt-head { display: flex; justify-content: space-between; color: var(--mute); margin-bottom: 10px; }
.opt-head b { color: var(--bone); font-weight: 500; }
.sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
.sizes button { height: 46px; box-shadow: inset 0 0 0 1px var(--line-2); font: 500 12px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; transition: background .2s, color .2s; padding: 0 6px; }
.sizes button:hover { box-shadow: inset 0 0 0 1px var(--bone); }
.sizes button.on { background: var(--bone); color: var(--void); }
.sizes button.x { color: var(--dim); text-decoration: line-through; box-shadow: inset 0 0 0 1px var(--line); }
.sizes.wide { grid-template-columns: 1fr 1fr; }
.sizes.wide button { text-align: left; padding: 0 14px; }
.sibs { display: flex; gap: 6px; flex-wrap: wrap; }
.sibs a { width: 58px; aspect-ratio: 4 / 5; background: var(--spec); box-shadow: 0 0 0 1px transparent; transition: box-shadow .25s; }
.sibs a img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.sibs a.on { box-shadow: 0 0 0 1.5px var(--signal); }
.sibs a:hover { box-shadow: 0 0 0 1px var(--bone); }
.pdp-actions { display: grid; gap: 8px; margin: 26px 0 8px; }
.pdp-actions .btn-ghost { justify-content: center; }
.acc { border-top: 1px solid var(--line); }
.acc:last-of-type { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; cursor: pointer; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font: 400 18px/1 var(--f-mono); color: var(--mute); transition: transform .3s var(--ease); }
.acc[open] summary::after { transform: rotate(45deg); color: var(--signal); }
.acc .body { padding: 0 0 18px; color: var(--bone-2); font-size: 14px; }
.acc ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.acc ul li { padding-left: 18px; position: relative; }
.acc ul li::before { content: "∞"; position: absolute; left: 0; color: var(--signal); font-size: 12px; top: 1px; }
.spec { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); margin-top: 26px; }
.spec div { padding: 12px 10px 12px 0; }
.spec div span { display: block; color: var(--mute); margin-bottom: 5px; }
.lightbox img { background: var(--spec); }

/* ---------- drops index ---------- */
.dindex { list-style: none; margin: 0; padding: 0; }
.drow { border-bottom: 1px solid var(--line); }
.drow a { display: grid; grid-template-columns: 110px minmax(0, 1fr) 140px 120px 110px 40px; align-items: center; gap: 20px; padding: 22px 0; position: relative; transition: color .3s, padding .5s var(--ease); }
.drow .no { font: 800 clamp(26px, 2.4vw, 40px)/1 var(--f-disp); font-stretch: 150%; font-variation-settings: "wdth" 150; color: var(--dim); transition: color .3s; }
.drow h3 { margin: 0; font: 800 clamp(26px, 3.6vw, 64px)/.95 var(--f-disp); font-stretch: 130%; font-variation-settings: "wdth" 130; text-transform: uppercase; letter-spacing: -.02em; }
.drow h3 small { font: 500 11px/1 var(--f-mono); letter-spacing: .1em; color: var(--mute); vertical-align: middle; margin-left: 10px; }
.drow .mono { color: var(--mute); }
.drow .arr { width: 40px; height: 40px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); transition: background .3s, color .3s; }
.drow a:hover { padding-left: 18px; }
.drow a:hover .no { color: var(--signal); }
.drow a:hover .arr { background: var(--signal); color: #000; box-shadow: none; }
.drow .live { color: var(--signal); }
.dpeek { position: fixed; z-index: 40; left: 0; top: 0; width: 280px; aspect-ratio: 3 / 4; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.85); transition: opacity .3s, transform .4s var(--ease); overflow: hidden; }
.dpeek.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.dpeek img { width: 100%; height: 100%; object-fit: cover; }
.timeline { position: relative; height: 90px; margin: 10px 0 30px; border-bottom: 1px solid var(--line); }
.timeline .yr { position: absolute; bottom: -24px; transform: translateX(-50%); color: var(--mute); }
.timeline .tk { position: absolute; bottom: 0; width: 1px; background: var(--line-2); height: 14px; }
.timeline a.dot { position: absolute; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.timeline a.dot i { width: 1px; background: var(--signal); height: var(--h, 40px); transition: height .4s var(--ease); }
.timeline a.dot span { font: 600 10px/1 var(--f-mono); color: var(--bone-2); }
.timeline a.dot:hover i { height: calc(var(--h, 40px) + 16px); }

/* ---------- plus page ---------- */
.plus-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100vh; }
.plus-hero .txt { padding: calc(var(--nav-h) + 50px) var(--gut) 50px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.plus-hero figure { margin: 0; position: relative; overflow: hidden; }
.plus-hero figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 70px); align-items: center; padding-block: clamp(40px, 6vw, 90px); border-top: 1px solid var(--line); }
.feature.flip > figure { order: 2; }
.feature figure { margin: 0; overflow: hidden; background: var(--panel); }
.feature figure img { width: 100%; height: auto; }
.feature .two { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* ---------- about ---------- */
.about-hero { min-height: 100vh; display: grid; align-content: end; padding-bottom: 50px; padding-top: calc(var(--nav-h) + 40px); }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.facts div { padding: 24px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts b { display: block; font: 800 clamp(40px, 5vw, 86px)/1 var(--f-disp); font-stretch: 150%; font-variation-settings: "wdth" 150; margin-bottom: 10px; }
.facts span { color: var(--mute); }
.story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 90px); }
.story figure { margin: 0; position: sticky; top: calc(var(--nav-h) + 30px); align-self: start; }
.story figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.story figure figcaption { margin-top: 10px; color: var(--mute); }
.story-body p { font-size: clamp(17px, 1.4vw, 22px); line-height: 1.55; color: var(--bone-2); margin: 0 0 22px; }
.story-body p:first-child { font-size: clamp(22px, 2.2vw, 34px); line-height: 1.3; color: var(--bone); }
.story-body .src { color: var(--dim); font-size: 12px; }
.tl { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.tl li { position: relative; padding: 0 0 26px 26px; }
.tl li::before { content: ""; position: absolute; left: -4px; top: 6px; width: 7px; height: 7px; background: var(--bone-2); }
.tl li.now::before { background: var(--signal); box-shadow: 0 0 12px var(--signal); }
.tl .mono { color: var(--mute); }
.tl b { display: block; font: 700 20px/1.2 var(--f-disp); font-stretch: 125%; font-variation-settings: "wdth" 125; text-transform: uppercase; margin-top: 4px; }

/* ---------- contact ---------- */
.channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.chan { padding: 26px 22px; background: var(--panel); display: flex; flex-direction: column; gap: 46px; min-height: 260px; justify-content: space-between; transition: background .35s, color .35s; }
.chan .mono { color: var(--mute); }
.chan strong { display: block; font: 800 clamp(22px, 2.2vw, 34px)/1.05 var(--f-disp); font-stretch: 125%; font-variation-settings: "wdth" 125; text-transform: uppercase; word-break: break-word; }
.chan p { margin: 8px 0 0; color: var(--bone-2); font-size: 14px; }
a.chan:hover { background: var(--bone); color: var(--void); }
a.chan:hover .mono, a.chan:hover p { color: #444; }
.base-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin-top: 6px; }
.coords { background: var(--panel); padding: 26px 22px; position: relative; overflow: hidden; min-height: 300px; }
.coords svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.coords .in { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; height: 100%; gap: 30px; }
.cform { background: var(--panel); padding: 26px 22px; display: grid; gap: 14px; }
.cform label { display: grid; gap: 6px; }
.cform label span { color: var(--mute); }
.cform input, .cform textarea, .cform select { background: var(--void); border: 0; box-shadow: inset 0 0 0 1px var(--line-2); padding: 12px; outline: 0; font-size: 15px; }
.cform input:focus, .cform textarea:focus { box-shadow: inset 0 0 0 1px var(--signal); }
.cform .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.faq { max-width: 980px; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .nav-hud { display: none; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .search-res .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .drow a { grid-template-columns: 90px minmax(0, 1fr) 110px 90px 40px; }
  .drow a .date { display: none; }
}
@media (max-width: 1023px) {
  .nav { grid-template-columns: auto 1fr auto; }
  .nav-links { display: none; }
  .burger { display: block; }
  .nav-btn.search-btn kbd { display: none; }
  .now-grid, .lab, .story, .join-grid, .mani-body, .pdp, .plus-hero, .feature, .drop-banner, .base-card { grid-template-columns: 1fr; }
  .feature.flip > figure { order: 0; }
  .now-title, .viewer, .story figure { position: relative; top: 0; }
  .sys-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .channels { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > :first-child { grid-column: 1 / -1; }
  .pdp-info { border-left: 0; border-top: 1px solid var(--line); }
  .pdp-gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 4px; }
  .pdp-gallery::-webkit-scrollbar { display: none; }
  .pdp-gallery figure, .pdp-gallery figure:first-child { flex: 0 0 86%; aspect-ratio: 4 / 5; scroll-snap-align: start; }
  .pdp-sticky { position: relative; top: 0; max-height: none; }
  .plus-hero figure { min-height: 70vh; }
  .crew-ui { grid-template-columns: 1fr; }
  .drop-banner figure { min-height: 60vh; }
}
@media (max-width: 720px) {
  :root { --nav-h: 58px; }
  .logo-word { width: 108px; height: 17px; }
  .nav-btn.search-btn { display: none; }
  .hero { height: 200vh; }
  .hero-top span:nth-child(2) { display: none; }
  .hero-bottom .scroll-hint { display: none; }
  .steps li { width: 24px; height: 24px; font-size: 10px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 8px; }
  .search-res .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rail { grid-auto-columns: 62vw; }
  .tunnel-head { flex-direction: column; gap: 10px; }
  .tunnel-read { grid-template-columns: 1fr; }
  .tunnel-rail i { width: 100%; flex: 1; }
  .table { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .el.legend { grid-column: 1 / -1; aspect-ratio: auto; }
  .strip { grid-template-columns: repeat(4, 1fr); }
  .ig-strip { grid-template-columns: repeat( 3, 1fr); }
  .film-frame { height: 78vh; }
  .stats dd { font-size: 26px; }
  .drow a { grid-template-columns: 64px minmax(0, 1fr) 40px; gap: 12px; }
  .drow a .count, .drow a .stock { display: none; }
  .timeline { display: none; }
  .foot-grid { grid-template-columns: 1fr; }
  .cform .two { grid-template-columns: 1fr; }
  .spec { grid-template-columns: 1fr 1fr; }
  .phead-stats { gap: 18px; }
  .dpeek { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .rv { opacity: 1; transform: none; }
}