:root {
  --ink: #050506;
  --ink-2: #0a0a0c;
  --panel: #111114;
  --panel-2: #17171b;
  --line: rgba(255,255,255,.14);
  --line-strong: rgba(255,255,255,.28);
  --text: #efefef;
  --muted: #a6a6ab;
  --muted-2: #73737b;
  --red: #a90f18;
  --red-bright: #d01c27;
  --red-soft: rgba(190, 22, 32, .16);
  --white-soft: rgba(255,255,255,.055);
  --display: "Segoe UI Variable Display", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --body: "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --container: min(1180px, calc(100vw - 48px));
  --header-h: 76px;
  --ease-premium: cubic-bezier(.2,.75,.15,1);
}

* { box-sizing: border-box; }
html { background: var(--ink); color-scheme: dark; scroll-behavior: smooth; }
html.no-smooth { scroll-behavior: auto; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 70% -10%, rgba(135,13,22,.08), transparent 32rem),
    var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  opacity: .18;
  background-image: url("../images/noise.png");
  mix-blend-mode: soft-light;
}
::selection { background: var(--red); color: white; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 2000;
  background: white;
  color: black;
  padding: 10px 14px;
  transform: translateY(-180%);
  transition: transform .2s;
}
.skip-link:focus { transform: none; }

.container { width: var(--container); margin-inline: auto; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--red-bright); }
.technical-label {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}
.technical-value { font-family: var(--mono); letter-spacing: -.02em; }
.status {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .61rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(0,0,0,.38);
}
.status::before { content:""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); }
.status.confirmed::before { background: #8fbf99; }
.status.baseline::before { background: #d29a45; }
.status.provisional::before { background: var(--red-bright); }

.display-xl,
.display-lg,
.editorial-heading {
  margin: 0;
  font-family: var(--display);
  font-weight: 660;
  text-transform: uppercase;
  letter-spacing: -.055em;
  line-height: .88;
}
.display-xl { font-size: clamp(4.6rem, 13.5vw, 12rem); }
.display-lg { font-size: clamp(3.2rem, 8.2vw, 8.2rem); }
.editorial-heading { font-size: clamp(2.6rem, 6vw, 6.4rem); }
.body-large { font-size: clamp(1.2rem, 2vw, 1.75rem); line-height: 1.35; }
.text-muted { color: var(--muted); }
.text-red { color: var(--red-bright); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  background: rgba(6,6,7,.62);
  color: var(--text);
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: border-color .25s, background .25s, transform .25s var(--ease-premium), color .25s;
  position: relative;
  overflow: hidden;
}
.btn::after { content:""; position:absolute; inset:auto 0 0; height:2px; background:var(--red-bright); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease-premium); }
.btn:hover, .btn:focus-visible { border-color: rgba(255,255,255,.65); background: rgba(255,255,255,.07); transform: translateY(-2px); }
.btn:hover::after, .btn:focus-visible::after { transform:scaleX(1); }
.btn-primary { background: var(--text); color: #09090a; border-color: var(--text); }
.btn-primary:hover, .btn-primary:focus-visible { color:white; background: var(--red); border-color:var(--red); }
.btn-icon { width: 48px; padding: 0; }

/* Entry gate */
.entry-gate {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 58%, rgba(155,15,25,.12), transparent 26rem),
    #030304;
  transition: opacity .8s var(--ease-premium), visibility .8s;
}
.entry-gate[hidden] { display:none; }
.entry-gate.is-leaving { opacity:0; visibility:hidden; }
.entry-shell { width: min(760px, calc(100vw - 40px)); text-align:center; }
.entry-mark { font-size: clamp(4rem, 11vw, 8.7rem); margin-bottom: .5rem; }
.entry-sub { color:var(--red-bright); font-family:var(--mono); letter-spacing:.22em; font-size:.72rem; text-transform:uppercase; }
.entry-copy { max-width:540px; margin: 2rem auto; color:var(--muted); }
.entry-actions { display:flex; justify-content:center; gap:.8rem; flex-wrap:wrap; }
.entry-system { margin-top:2rem; color:var(--muted-2); font-family:var(--mono); font-size:.65rem; letter-spacing:.1em; }

/* Header */
.site-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 1200;
  height: var(--header-h);
  display:flex;
  align-items:center;
  background: linear-gradient(to bottom, rgba(4,4,5,.9), rgba(4,4,5,.3), transparent);
  transition: background .3s, border-color .3s;
}
.site-header.is-solid { background: rgba(4,4,5,.91); border-bottom:1px solid var(--line); backdrop-filter: blur(14px); }
.header-inner { width: calc(100vw - 36px); margin:auto; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand { display:flex; align-items:center; gap:12px; min-width:0; }
.brand-word { font-family:var(--display); font-weight:700; letter-spacing:-.045em; font-size:1.18rem; }
.brand-prototype { color:var(--muted); font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; border-left:1px solid var(--line); padding-left:12px; }
.header-controls { display:flex; align-items:center; gap:8px; }
.control-button {
  height:38px;
  padding:0 12px;
  border:1px solid var(--line);
  background:rgba(5,5,6,.55);
  color:var(--muted);
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:.25s;
}
.control-button:hover,.control-button:focus-visible { color:white; border-color:var(--line-strong); }
.menu-trigger { width:42px; height:38px; padding:0; position:relative; }
.menu-trigger span { position:absolute; left:11px; width:18px; height:1px; background:currentColor; transition:.3s var(--ease-premium); }
.menu-trigger span:first-child { top:14px; }
.menu-trigger span:last-child { top:22px; }
.menu-trigger[aria-expanded="true"] span:first-child { top:18px; transform:rotate(45deg); }
.menu-trigger[aria-expanded="true"] span:last-child { top:18px; transform:rotate(-45deg); }

/* Menu */
.system-menu {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(4,4,5,.96);
  backdrop-filter: blur(18px);
  opacity:0;
  visibility:hidden;
  transition:opacity .45s var(--ease-premium), visibility .45s;
  display:grid;
  align-items:center;
}
.system-menu.is-open { opacity:1; visibility:visible; }
.menu-grid { width:var(--container); margin:auto; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr); gap:clamp(40px,8vw,120px); align-items:end; }
.menu-kicker { font-family:var(--mono); color:var(--red-bright); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; }
.menu-title { font-size:clamp(4rem,9vw,9rem); margin:.8rem 0 2.5rem; }
.menu-links { display:grid; }
.menu-link { display:grid; grid-template-columns:42px 1fr auto; gap:12px; align-items:center; padding:13px 0; border-top:1px solid var(--line); transition:.25s; }
.menu-link:last-child { border-bottom:1px solid var(--line); }
.menu-link .num { font-family:var(--mono); color:var(--red-bright); font-size:.65rem; }
.menu-link .name { font-family:var(--display); font-size:clamp(1.35rem,2.5vw,2.35rem); letter-spacing:-.035em; }
.menu-link .arrow { color:var(--muted); transition:transform .25s; }
.menu-link:hover { padding-left:10px; }
.menu-link:hover .arrow { transform:translateX(5px); color:white; }
.menu-meta { color:var(--muted); max-width:370px; }
.menu-meta strong { color:white; font-weight:500; }
.menu-meta-grid { margin-top:2rem; display:grid; gap:.8rem; }
.menu-meta-row { display:flex; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); padding-bottom:.7rem; font-family:var(--mono); font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; }

/* Experience */
.home { background:#030304; }
.experience-canvas { position:fixed; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; opacity:.94; }
.experience-grid {
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.32;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image: radial-gradient(circle at 55% 50%, black, transparent 78%);
}
.experience-image-layer { position:fixed; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.experience-image {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.035);
  filter:saturate(.72) brightness(.58) contrast(1.08);
  transition:opacity .65s ease;
}
.experience-image.active { opacity:.72; }
.experience-image[data-img="side"], .experience-image[data-img="rear"] { object-fit:contain; object-position:center; filter:saturate(.7) brightness(.62) contrast(1.15); }
.experience-vignette { position:fixed; inset:0; z-index:3; pointer-events:none; background:radial-gradient(circle at 58% 48%, transparent 18%, rgba(3,3,4,.22) 45%, #030304 92%); }
.experience-main { position:relative; z-index:10; }
.experience-section { min-height:140vh; position:relative; }
.experience-section.short { min-height:110vh; }
.experience-section.long { min-height:180vh; }
.scene-sticky { position:sticky; top:0; min-height:100vh; display:flex; align-items:center; overflow:hidden; padding:calc(var(--header-h) + 40px) 0 54px; }
.scene-layout { width:var(--container); margin:auto; display:grid; grid-template-columns:minmax(0,.88fr) minmax(300px,1.12fr); gap:clamp(32px,7vw,110px); align-items:center; }
.scene-layout.copy-right { grid-template-columns:minmax(300px,1.12fr) minmax(0,.88fr); }
.scene-layout.copy-right .scene-copy { grid-column:2; }
.scene-copy { max-width:660px; opacity:.2; transform:translateY(38px); transition:opacity .5s, transform .5s; }
.experience-section.is-active .scene-copy { opacity:1; transform:none; }
.scene-index { font-family:var(--mono); color:var(--red-bright); font-size:.66rem; letter-spacing:.22em; margin-bottom:1.2rem; }
.scene-title { font-size:clamp(3.3rem,7.7vw,8.4rem); margin:0 0 1.4rem; }
.scene-title.tight { font-size:clamp(2.8rem,6.2vw,6.5rem); }
.scene-lead { max-width:600px; color:#d0d0d3; font-size:clamp(1.05rem,1.6vw,1.35rem); }
.scene-note { max-width:560px; margin-top:1.6rem; color:var(--muted); font-size:.94rem; }
.scene-actions { margin-top:2rem; display:flex; gap:.8rem; flex-wrap:wrap; }
.scene-visual-spacer { min-height:55vh; }
.hero-section { min-height:170vh; }
.hero-section .scene-sticky { align-items:flex-end; padding-bottom:8vh; }
.hero-copy { width:min(960px,100%); }
.hero-copy .scene-title { font-size:clamp(5rem,16vw,13.8rem); margin-bottom:0; }
.hero-prototype { display:flex; gap:16px; align-items:center; color:var(--red-bright); font-family:var(--mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; }
.hero-meta { margin-top:1.1rem; display:flex; gap:14px 28px; flex-wrap:wrap; color:var(--muted); font-family:var(--mono); font-size:.65rem; letter-spacing:.09em; text-transform:uppercase; }
.scroll-cue { position:absolute; right:24px; bottom:34px; display:flex; align-items:center; gap:10px; color:var(--muted); font-family:var(--mono); font-size:.58rem; letter-spacing:.13em; text-transform:uppercase; writing-mode:vertical-rl; }
.scroll-cue::after { content:""; width:1px; height:70px; background:linear-gradient(var(--red-bright),transparent); animation:scroll-line 2.1s ease-in-out infinite; }
@keyframes scroll-line { 0%,100%{ transform:scaleY(.25); transform-origin:top;} 50%{ transform:scaleY(1); transform-origin:top;} }

.chapter-rail { position:fixed; left:18px; top:50%; z-index:700; transform:translateY(-50%); display:flex; align-items:center; gap:10px; }
.rail-line { width:1px; height:220px; background:var(--line); position:relative; }
.rail-progress { position:absolute; left:0; top:0; width:1px; height:0%; background:var(--red-bright); }
.rail-label { writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--mono); font-size:.58rem; letter-spacing:.13em; color:var(--muted); text-transform:uppercase; }
.chapter-status { position:fixed; right:20px; top:50%; z-index:700; transform:translateY(-50%); display:grid; gap:8px; text-align:right; pointer-events:none; }
.chapter-status .chapter-number { color:var(--red-bright); font-family:var(--mono); font-size:.65rem; letter-spacing:.16em; }
.chapter-status .chapter-name { font-family:var(--mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

.statement-stack { display:grid; gap:.15em; }
.statement-line { display:block; opacity:.28; transform:translateY(14px); }
.experience-section.is-active .statement-line { opacity:1; transform:none; transition:opacity .6s, transform .6s; }
.experience-section.is-active .statement-line:nth-child(2){transition-delay:.12s}
.experience-section.is-active .statement-line:nth-child(3){transition-delay:.24s}

.callout-list { margin-top:2rem; display:grid; gap:.7rem; max-width:540px; }
.callout-item { display:grid; grid-template-columns:20px 1fr auto; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.callout-item::before { content:""; width:8px; height:8px; border:1px solid var(--red-bright); transform:rotate(45deg); }
.callout-item strong { font-weight:500; }
.callout-item small { font-family:var(--mono); color:var(--muted-2); font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; }

.spec-strip { margin-top:2rem; display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid var(--line); }
.spec-cell { padding:14px 18px; border-right:1px solid var(--line); }
.spec-cell:last-child { border-right:0; }
.spec-cell .value { font-family:var(--display); font-size:1.5rem; letter-spacing:-.04em; }
.spec-cell .label { color:var(--muted); font-family:var(--mono); font-size:.58rem; text-transform:uppercase; letter-spacing:.09em; }

.preset-selector { display:flex; gap:6px; flex-wrap:wrap; margin:1.8rem 0 1rem; }
.preset-button { border:1px solid var(--line); background:rgba(0,0,0,.34); padding:9px 11px; color:var(--muted); font-family:var(--mono); font-size:.6rem; letter-spacing:.09em; text-transform:uppercase; transition:.2s; }
.preset-button[aria-selected="true"], .preset-button:hover { color:white; border-color:var(--red-bright); background:var(--red-soft); }
.preset-panel { min-height:105px; border-left:1px solid var(--red-bright); padding-left:16px; color:var(--muted); }
.preset-panel strong { color:white; font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; }

.decision-list { margin-top:1.8rem; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.decision { background:rgba(6,6,7,.83); padding:18px; min-height:110px; transition:background .25s; }
.decision:hover { background:#111114; }
.decision .num { font-family:var(--mono); color:var(--red-bright); font-size:.62rem; }
.decision h3 { margin:.8rem 0 0; font-size:1.05rem; font-weight:500; }

.partner-categories { margin-top:2rem; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.partner-category { min-height:130px; padding:18px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; background:rgba(5,5,6,.55); }
.partner-category span:first-child { font-size:1.05rem; }
.partner-category span:last-child { color:var(--muted); font-family:var(--mono); font-size:.58rem; text-transform:uppercase; letter-spacing:.09em; }

/* Standard pages */
.page-main { min-height:100vh; padding-top:var(--header-h); }
.page-hero { min-height:68vh; display:flex; align-items:flex-end; position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.page-hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.38) saturate(.75); }
.page-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,#050506 0%,rgba(5,5,6,.28) 52%,rgba(5,5,6,.5)); }
.page-hero-content { width:var(--container); margin:0 auto; position:relative; z-index:2; padding:80px 0 56px; }
.page-title { font-size:clamp(4rem,11vw,10rem); margin:.5rem 0 1.5rem; }
.page-intro { max-width:760px; font-size:clamp(1.15rem,2vw,1.55rem); color:#d2d2d5; }
.content-section { padding:clamp(70px,10vw,130px) 0; border-bottom:1px solid var(--line); }
.content-section.compact { padding:70px 0; }
.section-grid { width:var(--container); margin:auto; display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:clamp(40px,8vw,120px); align-items:start; }
.section-grid.equal { grid-template-columns:repeat(2,minmax(0,1fr)); }
.section-heading { position:sticky; top:110px; }
.section-heading h2 { font-size:clamp(2.3rem,5vw,5rem); margin:.6rem 0; }
.section-body { max-width:780px; }
.section-body > p:first-child { font-size:1.25rem; color:#d6d6d8; }
.prose { color:#c2c2c6; }
.prose h2,.prose h3 { color:white; font-family:var(--display); letter-spacing:-.035em; }
.prose h2 { margin-top:2.4rem; font-size:2.2rem; }
.prose h3 { margin-top:1.9rem; font-size:1.4rem; }
.prose p { max-width:74ch; }
.prose ul { padding-left:1.2rem; }
.prose li { margin:.45rem 0; }
.prose blockquote { margin:2rem 0; padding:1rem 0 1rem 1.4rem; border-left:2px solid var(--red-bright); font-size:1.25rem; color:white; }

.media-frame { border:1px solid var(--line); background:#09090b; position:relative; overflow:hidden; }
.media-frame img { width:100%; }
.media-caption { display:flex; justify-content:space-between; gap:20px; padding:12px 14px; border-top:1px solid var(--line); color:var(--muted); font-family:var(--mono); font-size:.58rem; letter-spacing:.07em; text-transform:uppercase; }
.media-caption strong { color:white; font-weight:500; }

.metric-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--line); }
.metric { padding:22px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); min-height:145px; }
.metric:nth-child(3n) { border-right:0; }
.metric .value { font-size:clamp(2rem,4vw,4.2rem); font-family:var(--display); font-weight:650; letter-spacing:-.06em; line-height:1; }
.metric .unit { color:var(--red-bright); }
.metric .label { margin-top:.8rem; color:var(--muted); font-family:var(--mono); font-size:.63rem; letter-spacing:.08em; text-transform:uppercase; }
.metric .status { margin-top:1rem; }

.system-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:32px; }
.system-tab { border:1px solid var(--line); background:transparent; padding:10px 13px; font-family:var(--mono); font-size:.63rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.system-tab.is-active { color:white; border-color:var(--red-bright); background:var(--red-soft); }
.system-panel { display:none; }
.system-panel.is-active { display:block; animation:panel-in .4s var(--ease-premium); }
@keyframes panel-in { from {opacity:0; transform:translateY(8px)} }

.diagram {
  border:1px solid var(--line);
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
    #08080a;
  background-size:36px 36px;
  padding:clamp(20px,4vw,48px);
  min-height:420px;
  position:relative;
  overflow:hidden;
}
.diagram svg { width:100%; height:auto; max-height:650px; }
.diagram-title { position:absolute; left:16px; top:14px; font-family:var(--mono); color:var(--muted); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; }

.subwoofer-grid-visual { display:grid; grid-template-columns:repeat(2,minmax(110px,1fr)); gap:clamp(18px,4vw,46px); width:min(600px,100%); margin:60px auto 30px; }
.sub-disc { aspect-ratio:1; border-radius:50%; position:relative; background:radial-gradient(circle at 42% 38%,#3c3c41 0 5%,#17171a 6% 27%,#050506 29% 52%,#26262a 54% 62%,#08080a 64%); box-shadow:inset 0 0 0 2px #33343a, inset 0 0 0 10px #0e0e10, 0 22px 36px rgba(0,0,0,.55); }
.sub-disc::after { content:"NS v.6\A 15\""; white-space:pre; position:absolute; inset:0; display:grid; place-items:center; text-align:center; font-family:var(--mono); font-size:clamp(.6rem,1.3vw,.85rem); color:#bcbcc0; letter-spacing:.08em; }
.port-visual { height:clamp(62px,8vw,100px); border:2px solid #34343a; background:linear-gradient(to bottom,#050506,#131316); width:min(720px,100%); margin:0 auto; display:grid; place-items:center; color:var(--red-bright); font-family:var(--mono); font-size:.67rem; letter-spacing:.12em; text-transform:uppercase; box-shadow:inset 0 0 30px #000; }
.diagram-orientation { display:flex; justify-content:space-between; color:var(--muted); font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; max-width:720px; margin:12px auto 0; }

.flow-row { display:flex; align-items:stretch; gap:10px; flex-wrap:wrap; }
.flow-node { flex:1 1 150px; min-height:104px; border:1px solid var(--line); background:#0b0b0d; padding:16px; display:flex; flex-direction:column; justify-content:space-between; }
.flow-node .num { font-family:var(--mono); font-size:.58rem; color:var(--red-bright); }
.flow-node strong { font-weight:500; }
.flow-arrow { display:grid; place-items:center; color:var(--red-bright); font-size:1.5rem; }

.decision-timeline { position:relative; padding-left:36px; }
.decision-timeline::before { content:""; position:absolute; left:8px; top:8px; bottom:8px; width:1px; background:var(--line); }
.timeline-item { position:relative; padding:0 0 42px; }
.timeline-item::before { content:""; position:absolute; left:-32px; top:7px; width:9px; height:9px; border:1px solid var(--red-bright); background:var(--ink); transform:rotate(45deg); }
.timeline-item .date { color:var(--red-bright); font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; }
.timeline-item h3 { margin:.5rem 0; font-size:1.5rem; }
.timeline-item p { color:var(--muted); margin:0; max-width:65ch; }

.journal-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.journal-card { border:1px solid var(--line); min-height:330px; display:flex; flex-direction:column; background:#09090b; transition:transform .35s var(--ease-premium),border-color .3s; }
.journal-card:hover { transform:translateY(-7px); border-color:var(--line-strong); }
.journal-card-media { aspect-ratio:16/9; background:var(--panel); overflow:hidden; }
.journal-card-media img { width:100%; height:100%; object-fit:cover; filter:saturate(.7) brightness(.7); transition:transform .6s var(--ease-premium),filter .4s; }
.journal-card:hover img { transform:scale(1.04); filter:saturate(.85) brightness(.82); }
.journal-card-content { padding:20px; flex:1; display:flex; flex-direction:column; }
.journal-card .meta { font-family:var(--mono); font-size:.58rem; color:var(--red-bright); letter-spacing:.09em; text-transform:uppercase; }
.journal-card h3 { font-size:1.35rem; margin:.75rem 0; }
.journal-card p { color:var(--muted); margin:0 0 1.4rem; }
.journal-card .read { margin-top:auto; font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; }

.gallery-grid { columns:3 280px; column-gap:14px; }
.gallery-item { break-inside:avoid; margin-bottom:14px; border:1px solid var(--line); background:#08080a; overflow:hidden; cursor:zoom-in; }
.gallery-item img { width:100%; filter:saturate(.75) brightness(.76); transition:transform .5s var(--ease-premium), filter .35s; }
.gallery-item:hover img { transform:scale(1.025); filter:saturate(.9) brightness(.88); }
.lightbox { position:fixed; inset:0; z-index:3000; background:rgba(0,0,0,.96); display:none; place-items:center; padding:32px; }
.lightbox.is-open { display:grid; }
.lightbox img { max-height:88vh; max-width:92vw; object-fit:contain; }
.lightbox-close { position:absolute; top:18px; right:18px; }

.partner-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.partner-panel { min-height:250px; padding:22px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(145deg,rgba(255,255,255,.03),transparent 55%); }
.partner-panel .category { font-family:var(--mono); color:var(--red-bright); font-size:.61rem; letter-spacing:.1em; text-transform:uppercase; }
.partner-panel h3 { font-size:1.55rem; margin:1rem 0; }
.partner-panel p { color:var(--muted); }

.footer { padding:60px 0 26px; border-top:1px solid var(--line); background:#030304; }
.footer-grid { width:var(--container); margin:auto; display:grid; grid-template-columns:1.4fr repeat(2,.8fr); gap:40px; }
.footer-mark { font-size:clamp(3rem,7vw,7rem); margin:0; }
.footer p { color:var(--muted); max-width:48ch; }
.footer-links { display:grid; align-content:start; gap:.7rem; }
.footer-links strong { font-family:var(--mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.1em; color:var(--red-bright); margin-bottom:.6rem; }
.footer-links a { color:var(--muted); transition:.2s; }
.footer-links a:hover { color:white; }
.footer-bottom { width:var(--container); margin:50px auto 0; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; color:var(--muted-2); font-family:var(--mono); font-size:.57rem; letter-spacing:.07em; text-transform:uppercase; }

/* Responsive */
@media (max-width: 1020px) {
  :root { --container:min(100% - 36px, 900px); }
  .scene-layout,.scene-layout.copy-right,.section-grid,.section-grid.equal { grid-template-columns:1fr; }
  .scene-layout.copy-right .scene-copy { grid-column:auto; }
  .scene-copy { max-width:740px; }
  .scene-visual-spacer { min-height:40vh; }
  .chapter-status { display:none; }
  .partner-categories,.partner-grid { grid-template-columns:repeat(2,1fr); }
  .journal-grid { grid-template-columns:repeat(2,1fr); }
  .section-heading { position:relative; top:auto; }
  .menu-grid { grid-template-columns:1fr; align-items:center; }
  .menu-meta { display:none; }
  .metric-grid { grid-template-columns:repeat(2,1fr); }
  .metric:nth-child(3n) { border-right:1px solid var(--line); }
  .metric:nth-child(2n) { border-right:0; }
}

@media (max-width: 720px) {
  :root { --container:calc(100vw - 28px); --header-h:64px; }
  body { font-size:15px; }
  .header-inner { width:calc(100vw - 24px); }
  .brand-prototype { display:none; }
  .control-button[data-long] { width:38px; padding:0; font-size:0; }
  .control-button[data-long]::before { content:attr(data-short); font-size:.61rem; }
  .chapter-rail { left:8px; }
  .rail-label { display:none; }
  .rail-line { height:140px; }
  .experience-section { min-height:125vh; }
  .experience-section.long { min-height:150vh; }
  .scene-sticky { padding:calc(var(--header-h) + 30px) 0 42px; }
  .scene-layout { gap:22px; }
  .hero-section .scene-sticky { padding-bottom:10vh; }
  .hero-copy .scene-title { font-size:clamp(4.1rem,21vw,8rem); }
  .scene-title { font-size:clamp(3.3rem,15vw,6.4rem); }
  .scene-title.tight { font-size:clamp(2.7rem,12vw,5.3rem); }
  .display-xl { font-size:clamp(4rem,20vw,7rem); }
  .page-title { font-size:clamp(3.6rem,18vw,7rem); }
  .scene-visual-spacer { min-height:27vh; }
  .scroll-cue { display:none; }
  .spec-strip { grid-template-columns:1fr; }
  .spec-cell { border-right:0; border-bottom:1px solid var(--line); }
  .decision-list,.partner-categories,.partner-grid,.journal-grid,.metric-grid { grid-template-columns:1fr; }
  .metric { border-right:0!important; }
  .menu-title { font-size:clamp(3.6rem,18vw,7rem); }
  .menu-link { grid-template-columns:34px 1fr auto; }
  .menu-link .name { font-size:1.45rem; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; }
  .flow-arrow { width:100%; transform:rotate(90deg); height:24px; }
  .page-hero { min-height:74vh; }
  .page-hero-content { padding-bottom:40px; }
  .content-section { padding:70px 0; }
  .gallery-grid { columns:1; }
  .subwoofer-grid-visual { gap:16px; }
  .entry-actions { display:grid; }
  .entry-actions .btn { width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; }
}

html.reduced-motion .experience-canvas { opacity:.45; }
html.reduced-motion .scene-copy { opacity:1; transform:none; }
html.reduced-motion .experience-image { transform:none!important; }

@media print {
  body { background:white; color:black; }
  body::before,.site-header,.system-menu,.entry-gate,.experience-canvas,.experience-grid,.experience-vignette,.chapter-rail,.chapter-status,.scroll-cue { display:none!important; }
  a { color:black; }
  .page-main { padding-top:0; }
  .content-section { break-inside:avoid; border-color:#bbb; }
}