/* ============================================================
   MERIDIAN AMMUNITION - flagship scroll story
   Vanilla CSS. Charcoal base, brass accent, one dawn-paper break.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --bg: hsl(220 8% 10%);
  --bg-deep: hsl(220 10% 7%);
  --panel: hsl(220 8% 13%);
  --fg: hsl(40 15% 92%);
  --fg-dim: hsl(40 8% 62%);
  --hairline: hsl(220 8% 22%);
  --brass: hsl(38 45% 55%);
  --brass-bright: hsl(44 62% 66%);
  --brass-deep: hsl(32 42% 40%);
  --brass-grad: linear-gradient(120deg, hsl(46 62% 72%), hsl(38 45% 55%) 55%, hsl(30 40% 38%));
  --brass-text-grad: linear-gradient(100deg, hsl(47 72% 78%), hsl(43 58% 62%) 55%, hsl(36 50% 50%));
  --paper: hsl(35 40% 92%);
  --paper-2: hsl(34 38% 88%);
  --ink: hsl(222 12% 16%);
  --ink-dim: hsl(222 8% 38%);
  --paper-line: hsl(30 22% 76%);
  --font-body: "Archivo", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-serif: "Newsreader", Georgia, serif;
  --rail-w: 64px;
  --ease-out: cubic-bezier(.22,.9,.3,1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.55;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--brass); color: hsl(28 40% 12%); }

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; }

/* film grain */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 90;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mono { font-family: var(--font-mono); }

.skip-link {
  position: absolute; left: 1rem; top: -4rem;
  z-index: 200; padding: .7em 1.2em;
  background: var(--brass); color: hsl(28 40% 12%);
  font-weight: 700; text-decoration: none; border-radius: 0 0 6px 6px;
  transition: top .25s;
}
.skip-link:focus { top: 0; }

/* ---------- buttons / kickers ---------- */
.btn-brass {
  display: inline-block;
  background: var(--brass-grad);
  color: hsl(28 45% 11%);
  font-weight: 800;
  letter-spacing: .02em;
  text-decoration: none;
  border: 0; cursor: pointer;
  padding: .95em 1.9em;
  border-radius: 4px;
  box-shadow: 0 1px 0 hsl(46 60% 78% / .55) inset, 0 10px 28px -12px hsl(38 45% 45% / .55);
  transition: transform .2s var(--ease-out), box-shadow .2s, filter .2s;
}
.btn-brass:hover, .btn-brass:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 hsl(46 60% 80% / .6) inset, 0 16px 34px -12px hsl(38 45% 48% / .65);
}
.btn-brass:active { transform: translateY(0); }
.btn-sm { padding: .6em 1.2em; font-size: .85rem; }

.kicker {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass);
}

/* ---------- topbar ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0;
  z-index: 100;
  display: flex; align-items: center; gap: 2.2rem;
  padding: .9rem clamp(1.2rem, 4vw, 3rem);
  transition: background .35s, box-shadow .35s;
}
.topbar.scrolled {
  background: hsl(220 10% 8% / .84);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 hsl(38 45% 55% / .25);
}
.brand {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--fg);
}
.brand-mark { width: 26px; height: 26px; color: var(--brass); flex: none; }
.brand-word {
  font-weight: 900; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase;
  display: flex; flex-direction: column; line-height: 1.05;
}
.brand-word em {
  font-style: normal; font-weight: 500; font-size: .56rem;
  letter-spacing: .34em; color: var(--fg-dim);
}
.topnav { display: flex; gap: 1.7rem; margin-left: auto; }
.topnav a {
  text-decoration: none; font-size: .86rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg-dim);
  transition: color .2s;
}
.topnav a:hover, .topnav a:focus-visible { color: var(--brass-bright); }
.topbar-cta { flex: none; }
@media (max-width: 860px) {
  .topnav { display: none; }
  .topbar-cta { margin-left: auto; }
}

/* ---------- progress rail ---------- */
.rail {
  position: fixed; left: clamp(10px, 1.6vw, 24px); top: 50%;
  transform: translateY(-50%);
  height: min(58vh, 520px);
  width: 30px;
  z-index: 80;
  display: flex; flex-direction: column;
  justify-content: space-between; align-items: center;
}
.rail-line {
  position: absolute; left: 50%; top: 4px; bottom: 4px;
  width: 2px; transform: translateX(-50%);
  background: hsl(220 6% 30% / .55);
  border-radius: 2px;
  overflow: hidden;
}
.rail-fill {
  width: 100%; height: 0%;
  background: linear-gradient(180deg, hsl(46 62% 70%), hsl(38 45% 55%));
  box-shadow: 0 0 8px hsl(42 60% 60% / .8);
  transition: height .15s linear;
}
.rail-mark {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  text-decoration: none;
}
.rail-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg);
  border: 2px solid hsl(220 6% 42%);
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.rail-num {
  position: absolute; left: 30px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em;
  color: hsl(220 6% 48%);
  transition: color .3s;
}
.rail-tip {
  position: absolute; left: 56px; top: 50%;
  transform: translate(-6px, -50%);
  white-space: nowrap;
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass-bright);
  background: hsl(220 10% 9% / .92);
  border: 1px solid hsl(38 45% 55% / .4);
  padding: .35em .8em; border-radius: 3px;
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.rail-mark:hover .rail-tip, .rail-mark:focus-visible .rail-tip {
  opacity: 1; transform: translate(0, -50%);
}
.rail-mark.passed .rail-dot {
  background: var(--brass);
  border-color: var(--brass-bright);
  box-shadow: 0 0 10px hsl(42 60% 60% / .7);
}
.rail-mark.passed .rail-num { color: var(--brass-bright); }
@media (max-width: 700px) {
  .rail { left: 6px; width: 18px; }
  .rail-num, .rail-tip { display: none; }
  .rail-mark { width: 18px; height: 18px; }
  .rail-dot { width: 8px; height: 8px; border-width: 1.5px; }
}

/* ---------- pinned scaffolding ---------- */
.pin-wrap { position: relative; }
.hero-wrap  { height: 340vh; }
.brass-wrap { height: 460vh; }
.proof-wrap { height: 420vh; } /* JS refines */
.pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
}

/* ---------- chapter heads ---------- */
.ch-head {
  display: flex; align-items: baseline; gap: 1.1rem;
  max-width: 1240px;
}
.ch-num {
  font-family: var(--font-mono);
  font-size: 1rem; font-weight: 600;
  color: var(--brass);
  border: 1px solid hsl(38 45% 55% / .55);
  padding: .28em .65em; border-radius: 3px;
  transform: translateY(-.35em);
}
.ch-title {
  font-weight: 900;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  letter-spacing: -.015em;
  text-transform: uppercase;
  line-height: 1;
}
.ch-rule {
  flex: 1; height: 2px; align-self: center;
  background: var(--brass-grad);
  opacity: .75; border-radius: 2px;
  min-width: 40px;
}
.ch-intro {
  color: var(--fg-dim);
  max-width: 46ch;
  margin: 1.4rem 0 0;
  font-size: 1.06rem;
}

/* ============================================================
   PROLOGUE / HERO
   ============================================================ */
.hero-pin {
  display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 50% 8%, hsl(220 9% 14%) 0%, var(--bg) 55%, var(--bg-deep) 100%);
}
.hero-backglow {
  position: absolute; inset: 0;
  background: radial-gradient(38% 60% at 50% 52%, hsl(38 45% 42% / .16), transparent 70%);
  pointer-events: none;
}
.hero-cartridge {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.cartridge-svg {
  --rot: -15deg;
  --csc: 1.05;
  --sheen: -60px;
  height: min(82vh, 760px);
  width: auto;
  filter: drop-shadow(0 24px 60px hsl(220 20% 2% / .8));
}
.cartridge-g {
  transform-origin: 130px 420px;
  transform: rotate(var(--rot, 0deg)) scale(var(--csc, 1));
}
.sheen { transform: translateX(var(--sheen, 0px)) skewX(-8deg); }

.hero-copy {
  position: relative; z-index: 2;
  text-align: center;
  padding: 0 clamp(1.4rem, 6vw, 4rem);
  max-width: 1080px;
}
.hero-kicker { margin-bottom: 1.6rem; text-shadow: 0 2px 18px hsl(220 20% 4% / .9); }
.hero-title {
  font-weight: 900;
  font-size: clamp(2.9rem, 9.2vw, 7.6rem);
  line-height: .98;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-shadow: 0 4px 40px hsl(220 20% 4% / .95), 0 2px 10px hsl(220 20% 4% / .9);
}
.hero-title .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(.45em);
  filter: blur(8px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out), filter .55s var(--ease-out);
}
.hero-title .w.on { opacity: 1; transform: none; filter: none; }
.hero-title .wa {
  background: var(--brass-text-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-chapters {
  list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .4rem 2rem;
  margin-top: 2.4rem;
}
.hero-chapters a {
  text-decoration: none;
  font-size: .82rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-dim);
  transition: color .2s;
}
.hero-chapters a:hover, .hero-chapters a:focus-visible { color: var(--brass-bright); }
.hero-chapters b { color: var(--brass); margin-right: .45em; font-family: var(--font-mono); font-weight: 600; }
.hero-cta-row { margin-top: 2.3rem; }
.hero-chapters, .hero-cta-row {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.hero-chapters.on, .hero-cta-row.on { opacity: 1; transform: none; }

.scroll-hint {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--fg-dim);
  transition: opacity .4s;
}
.scroll-hint-line {
  width: 1px; height: 44px;
  background: linear-gradient(180deg, transparent, var(--brass));
  animation: hintPulse 2.2s ease-in-out infinite;
}
@keyframes hintPulse {
  0%, 100% { transform: scaleY(.4); transform-origin: top; opacity: .4; }
  50% { transform: scaleY(1); opacity: 1; }
}
.scroll-hint.off { opacity: 0; }

/* ============================================================
   CHAPTER I - BRASS (pinned crossfade)
   ============================================================ */
.brass-pin { background: hsl(28 16% 7%); }
.brass-pin .ch-head {
  position: absolute; z-index: 10;
  top: clamp(4.6rem, 9vh, 6.5rem);
  left: calc(var(--rail-w) + 2vw); right: 6vw;
}
.beat { position: absolute; inset: 0; }
.beat .scene { position: absolute; inset: 0; opacity: 0; }
.beat[data-i="0"] .scene { opacity: 1; }
.beat .scene svg { width: 100%; height: 100%; }
.beat .scene::after { /* vignette for copy legibility */
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, hsl(24 18% 4% / .68) 0%, transparent 30%),
    linear-gradient(0deg, hsl(24 18% 4% / .8) 0%, transparent 46%);
}
.beat-copy {
  position: absolute; z-index: 5;
  left: calc(var(--rail-w) + 2vw); right: 6vw;
  bottom: clamp(3rem, 11vh, 7rem);
  max-width: 760px;
  opacity: 0;
}
.beat[data-i="1"] .beat-copy { left: auto; right: 6vw; margin-left: calc(var(--rail-w) + 2vw); text-align: right; max-width: 700px; }
.beat[data-i="1"] .beat-stat { justify-content: flex-end; }
.beat-line {
  font-weight: 800;
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  line-height: 1.14;
  letter-spacing: -.01em;
  text-wrap: balance;
  text-shadow: 0 2px 26px hsl(24 18% 4% / .9);
}
.beat-stat {
  display: flex; align-items: center; gap: .9rem;
  margin-top: 1.3rem;
  font-family: var(--font-mono);
  font-size: clamp(.82rem, 1.4vw, 1rem);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--brass-bright);
}
.beat-stat-rule { width: 52px; height: 2px; background: var(--brass-grad); flex: none; }

/* ============================================================
   CHAPTER II - THE LOAD (sticky cutaway + scrolling components)
   ============================================================ */
.load-chapter {
  background:
    linear-gradient(180deg, hsl(28 16% 7%) 0%, var(--bg) 12%, var(--bg) 100%);
  padding: clamp(5rem, 12vh, 9rem) 6vw clamp(5rem, 10vh, 8rem) calc(var(--rail-w) + 2vw);
}
.load-chapter .ch-head, .load-chapter .ch-intro, .load-split { max-width: 1240px; margin-inline: auto; }
.load-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  margin-top: clamp(2.5rem, 6vh, 4.5rem);
  align-items: start;
}
.cutaway-stick {
  position: sticky;
  top: calc(50vh - 190px);
}
.cutaway { width: 100%; height: auto; }
.cutaway .cl-line { stroke: hsl(40 12% 30%); stroke-width: 1; stroke-dasharray: 22 7 4 7; }
.cutaway .ln { stroke: currentColor; fill: none; stroke-width: 1.5; }
.cutaway .ln.strong { stroke-width: 2.6; }
.cutaway .hatch { opacity: .55; }
.cutaway .powder { opacity: .85; }
.cutaway .lead { stroke: currentColor; stroke-width: 1; stroke-dasharray: 4 5; }
.cutaway .dot { fill: currentColor; }
.cutaway .cut-label {
  font-family: var(--font-mono); font-size: 15px;
  letter-spacing: 2.5px; fill: currentColor;
}
.cutaway .anchor-mid { text-anchor: middle; }
.cut-case { color: hsl(40 18% 42%); }
.cut-part {
  color: hsl(220 6% 38%);
  opacity: .55;
  transition: color .45s, opacity .45s, filter .45s;
}
.cut-part.is-active {
  color: var(--brass-bright);
  opacity: 1;
  filter: drop-shadow(0 0 7px hsl(42 60% 55% / .55));
}
.cut-part.is-active .hatch { fill: url(#hatchBrass); }
.cut-part.is-active .powder { fill: url(#powderBrass); }
.static-mode .cut-part .hatch { fill: url(#hatchBrass); }
.static-mode .cut-part .powder { fill: url(#powderBrass); }
.cutaway-cap {
  margin-top: 1.1rem;
  font-size: .72rem; letter-spacing: .16em;
  color: hsl(40 10% 48%);
}

.component {
  min-height: 62vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 3rem 0;
  border-bottom: 1px solid var(--hairline);
}
.comp-num {
  font-size: .82rem; letter-spacing: .3em;
  color: hsl(220 6% 44%);
  transition: color .4s;
}
.comp-title {
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  letter-spacing: -.01em;
  margin: .5rem 0 .9rem;
  color: var(--fg-dim);
  transition: color .4s;
}
.comp-copy { color: var(--fg-dim); max-width: 44ch; transition: color .4s; }
.component.is-active .comp-num { color: var(--brass); }
.component.is-active .comp-title { color: var(--fg); }
.component.is-active .comp-copy { color: hsl(40 12% 80%); }
.spec {
  margin-top: 1.6rem;
  width: 100%; max-width: 400px;
  border-collapse: collapse;
  font-size: .8rem; letter-spacing: .08em;
}
.spec td {
  padding: .55em 0;
  border-top: 1px solid var(--hairline);
  color: hsl(40 8% 56%);
}
.spec td:last-child { text-align: right; color: var(--brass); }

.load-table { padding: 3.4rem 0 1rem; }
.load-table-head {
  font-size: .74rem; letter-spacing: .2em;
  color: var(--brass);
  margin-bottom: 1rem;
}
.table-scroll { overflow-x: auto; border: 1px solid var(--hairline); border-radius: 6px; }
table.data {
  width: 100%; min-width: 520px;
  border-collapse: collapse;
  font-size: .8rem;
  background: var(--panel);
}
table.data th, table.data td {
  padding: .7em 1em;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--hairline);
}
table.data th {
  font-weight: 600; letter-spacing: .1em;
  color: hsl(40 10% 52%);
  background: hsl(220 8% 11%);
}
table.data td:first-child, table.data th:first-child { text-align: left; color: var(--brass); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover td { background: hsl(220 8% 15%); }
.load-table-foot {
  margin-top: .9rem;
  font-size: .68rem; letter-spacing: .14em;
  color: hsl(40 8% 46%);
}

/* ============================================================
   CHAPTER III - PROOF (horizontal gallery)
   ============================================================ */
.proof-pin {
  background:
    radial-gradient(90% 70% at 50% 110%, hsl(220 10% 13%) 0%, var(--bg-deep) 60%);
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(1.6rem, 5vh, 3.4rem);
  padding-top: clamp(4.2rem, 8vh, 5.5rem);
}
.proof-pin .ch-head {
  padding: 0 6vw 0 calc(var(--rail-w) + 2vw);
  width: 100%; max-width: none;
  flex-wrap: wrap;
}
.proof-hint {
  width: 100%;
  font-size: .66rem; letter-spacing: .26em;
  color: hsl(220 6% 42%);
  margin-top: .6rem;
}
.proof-track {
  display: flex; align-items: stretch;
  gap: clamp(1.6rem, 3.4vw, 3.4rem);
  padding: 0 8vw 0 calc(var(--rail-w) + 2vw);
  will-change: transform;
  width: max-content;
}
.station {
  width: min(430px, 74vw);
  flex: none;
  display: flex; flex-direction: column;
}
.station-fig {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px hsl(220 20% 2% / .9);
}
.station-fig svg { width: 100%; height: auto; }
.station-title {
  font-weight: 800; text-transform: uppercase;
  letter-spacing: .02em; font-size: 1.05rem;
  margin: 1.3rem 0 .4rem;
}
.station-copy { color: var(--fg-dim); font-size: .95rem; max-width: 40ch; }
.station-cap {
  margin-top: auto; padding-top: 1.1rem;
  font-size: .7rem; letter-spacing: .16em;
  color: var(--brass);
}
.proof-claim {
  width: min(880px, 86vw);
  flex: none;
  align-self: center;
  padding: 0 4vw;
}
.proof-claim-kicker { font-size: .72rem; letter-spacing: .3em; color: var(--brass); }
.proof-claim-title {
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(2rem, 4.6vw, 4rem);
  line-height: 1.04; letter-spacing: -.015em;
  margin: 1.1rem 0 1.3rem;
  text-wrap: balance;
}
.proof-claim-title em {
  font-style: normal;
  background: var(--brass-text-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.proof-claim-sub { color: var(--fg-dim); max-width: 52ch; }

/* ============================================================
   CHAPTER IV - THE FIELD (dawn paper break)
   ============================================================ */
.field { background: var(--paper); color: var(--ink); }
.field-scene { position: relative; height: clamp(340px, 62vh, 620px); overflow: hidden; }
.field-scene svg { width: 100%; height: 100%; }
.field-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 6vw clamp(5rem, 10vh, 8rem) calc(var(--rail-w) + 2vw);
}
.ch-head.on-paper { padding-top: clamp(3rem, 7vh, 5rem); }
.ch-head.on-paper .ch-num { color: hsl(32 50% 38%); border-color: hsl(32 45% 45% / .5); }
.ch-head.on-paper .ch-title { color: var(--ink); }

.pull {
  max-width: 820px;
  margin: clamp(2.5rem, 7vh, 4.5rem) auto clamp(3rem, 8vh, 5rem);
  text-align: center;
}
.pull p {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  line-height: 1.32;
  color: hsl(222 14% 22%);
  text-wrap: balance;
}
.pull cite {
  display: block;
  margin-top: 1.4rem;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: .76rem; letter-spacing: .18em; text-transform: uppercase;
  color: hsl(30 35% 38%);
}
.lines-intro {
  text-align: center;
  color: var(--ink-dim);
  font-weight: 600; letter-spacing: .04em;
  margin-bottom: 2.2rem;
}
.lines-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.3rem;
}
.line-card {
  display: flex; flex-direction: column;
  background: hsl(36 45% 96%);
  border: 1px solid var(--paper-line);
  border-radius: 10px;
  padding: 1.7rem 1.5rem 1.5rem;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 1px 2px hsl(30 25% 40% / .08);
  transition: transform .28s var(--ease-out), box-shadow .28s, border-color .28s;
}
.line-card:hover, .line-card:focus-visible {
  transform: translateY(-5px);
  border-color: hsl(35 45% 52%);
  box-shadow: 0 22px 44px -20px hsl(30 30% 30% / .35);
}
.line-icon {
  width: 46px; height: 46px;
  color: hsl(32 50% 40%);
  margin-bottom: 1.1rem;
}
.line-icon svg { width: 100%; height: 100%; }
.line-name {
  font-weight: 900; text-transform: uppercase;
  font-size: 1.3rem; letter-spacing: .01em;
}
.line-tag { color: var(--ink-dim); font-size: .9rem; margin: .55rem 0 1rem; }
.line-cals {
  font-size: .68rem; letter-spacing: .1em;
  color: hsl(30 35% 38%);
  border-top: 1px solid var(--paper-line);
  padding-top: .9rem;
  margin-top: auto;
}
.line-cta {
  margin-top: 1rem;
  font-size: .8rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: hsl(32 55% 34%);
}
.line-cta .arr { display: inline-block; transition: transform .25s var(--ease-out); }
.line-card:hover .arr { transform: translateX(5px); }
@media (max-width: 1080px) { .lines-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px)  { .lines-grid { grid-template-columns: 1fr; } }

/* ============================================================
   CHAPTER V - WHERE TO BUY
   ============================================================ */
.buy {
  background:
    radial-gradient(70% 55% at 50% 0%, hsl(220 9% 13%) 0%, var(--bg) 60%);
  padding: clamp(5rem, 12vh, 9rem) 6vw clamp(6rem, 12vh, 9rem);
  text-align: center;
}
.buy .ch-head.centered { justify-content: center; max-width: 720px; margin: 0 auto; }
.buy .ch-head.centered .ch-rule { display: none; }
.buy-title {
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.2rem, 6vw, 4.6rem);
  letter-spacing: -.02em; line-height: 1.02;
  margin-top: clamp(1.8rem, 5vh, 3rem);
  text-wrap: balance;
}
.buy-sub {
  color: var(--fg-dim);
  max-width: 54ch;
  margin: 1.2rem auto 0;
}
.retailer-row {
  list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 1.4rem 3.4rem;
  margin: clamp(2.6rem, 7vh, 4.4rem) auto;
  max-width: 980px;
}
.rl {
  color: hsl(40 8% 52%);
  transition: color .25s;
  cursor: default;
  line-height: 1.05;
}
.rl:hover { color: hsl(40 15% 78%); }
.rl span { display: block; }
.rl-1 { font-weight: 900; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .04em; }
.rl-1 span { font-weight: 500; font-size: .68rem; letter-spacing: .42em; }
.rl-2 { font-weight: 500; letter-spacing: .34em; font-size: .95rem; border: 1.5px solid currentColor; padding: .5em .9em; }
.rl-3 { font-weight: 800; font-style: italic; font-size: 1.35rem; text-transform: lowercase; letter-spacing: -.02em; }
.rl-4 { font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; }
.rl-4 span { font-family: var(--font-mono); font-style: normal; font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; }
.rl-5 { font-family: var(--font-mono); font-weight: 600; font-size: .95rem; letter-spacing: .18em; }

.zip-form { max-width: 560px; margin: 0 auto; }
.zip-label {
  display: block;
  font-size: .72rem; letter-spacing: .26em;
  color: var(--brass);
  margin-bottom: 1rem;
}
.zip-row { display: flex; gap: .7rem; }
.zip-input {
  flex: 1; min-width: 0;
  background: hsl(220 8% 8%);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  color: var(--fg);
  padding: .9em 1.1em;
  letter-spacing: .2em;
  transition: border-color .25s, box-shadow .25s;
}
.zip-input::placeholder { color: hsl(220 6% 40%); letter-spacing: .08em; }
.zip-input:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px hsl(38 45% 55% / .22);
}
.zip-input.err { border-color: hsl(8 60% 50%); box-shadow: 0 0 0 3px hsl(8 60% 50% / .2); }
.zip-help {
  margin-top: .9rem;
  font-size: .78rem;
  color: hsl(40 6% 46%);
}
.zip-results {
  max-width: 560px;
  margin: 2.2rem auto 0;
  text-align: left;
}
.zip-results-head {
  font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brass);
  margin-bottom: .9rem;
}
.zip-hit {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1rem 1.2rem;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  margin-bottom: .6rem;
  animation: hitIn .45s var(--ease-out) both;
}
.zip-hit:nth-child(3) { animation-delay: .08s; }
.zip-hit:nth-child(4) { animation-delay: .16s; }
@keyframes hitIn { from { opacity: 0; transform: translateY(10px); } }
.zip-hit-name { font-weight: 800; }
.zip-hit-meta { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; color: var(--fg-dim); display: block; margin-top: .2rem; }
.zip-hit-stock { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; color: var(--brass); white-space: nowrap; }
.dealer-line { margin-top: clamp(2.4rem, 6vh, 3.6rem); color: var(--fg-dim); font-size: .95rem; }
.dealer-link { color: var(--brass-bright); font-weight: 700; text-decoration: none; border-bottom: 1px solid hsl(38 45% 55% / .4); padding-bottom: .1em; transition: border-color .2s; }
.dealer-link:hover { border-color: var(--brass-bright); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--bg-deep);
  border-top: 2px solid transparent;
  border-image: var(--brass-grad) 1;
  padding: clamp(3rem, 7vh, 5rem) 6vw 2.4rem;
}
.footer-inner {
  max-width: 1240px; margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) 3fr;
  gap: 3rem;
}
.footer-tag { color: var(--fg-dim); font-size: .88rem; max-width: 30ch; margin-top: 1rem; }
.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}
.footer-col h4 {
  font-size: .74rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 1.1rem;
}
.footer-col a {
  display: block;
  color: var(--fg-dim);
  text-decoration: none;
  font-size: .9rem;
  padding: .28em 0;
  transition: color .2s;
}
.footer-col a:hover, .footer-col a:focus-visible { color: var(--fg); }
.footer-legal {
  max-width: 1240px;
  margin: 3rem auto 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--hairline);
  color: hsl(40 6% 46%);
  font-size: .8rem;
}
.footer-fine { margin-top: .5rem; font-size: .72rem; color: hsl(220 5% 38%); }
@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ============================================================
   REVEALS
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reveal.in { opacity: 1; transform: none; }
.lines-grid .line-card:nth-child(2) { transition-delay: .07s; }
.lines-grid .line-card:nth-child(3) { transition-delay: .14s; }
.lines-grid .line-card:nth-child(4) { transition-delay: .21s; }

/* ============================================================
   STATIC MODE - reduced motion & small screens.
   The whole story reads as stacked blocks, zero animation.
   ============================================================ */
.static-mode .pin-wrap { height: auto !important; }
.static-mode .pin { position: static; height: auto; overflow: visible; }

.static-mode .reveal { opacity: 1; transform: none; transition: none; }
.static-mode .hero-title .w,
.static-mode .hero-chapters,
.static-mode .hero-cta-row { opacity: 1; transform: none; filter: none; transition: none; }
.static-mode .scroll-hint { display: none; }
.static-mode .scroll-hint-line { animation: none; }
.static-mode .cartridge-g { transform: none; }
.static-mode .sheen { transform: skewX(-8deg); }
.static-mode .btn-brass, .static-mode .line-card, .static-mode .line-cta .arr,
.static-mode .rail-fill, .static-mode .zip-hit { transition: none; animation: none; }

/* hero becomes a normal full-screen-ish block */
.static-mode .hero-pin {
  min-height: 100svh;
  padding: 7rem 6vw 4rem;
  place-items: center;
}
.static-mode .hero-cartridge { position: relative; inset: auto; order: 2; margin-top: 2.5rem; }
.static-mode .cartridge-svg { height: min(48vh, 460px); }
.static-mode .hero-pin { display: flex; flex-direction: column; justify-content: center; }
.static-mode .hero-copy { order: 1; }

/* brass beats stack */
.static-mode .brass-pin { padding: clamp(4rem, 9vh, 7rem) 0 3rem; }
.static-mode .brass-pin .ch-head {
  position: static;
  padding: 0 6vw 0 calc(var(--rail-w) + 2vw);
  margin-bottom: 2.4rem;
}
.static-mode .beat { position: static; margin-bottom: 3.2rem; }
.static-mode .beat .scene {
  position: relative; inset: auto;
  opacity: 1 !important;
  height: clamp(240px, 46vh, 460px);
}
.static-mode .beat .scene::after { background: linear-gradient(0deg, hsl(24 18% 4% / .35), transparent 40%); }
.static-mode .beat-copy {
  position: static;
  opacity: 1 !important;
  transform: none !important;
  padding: 1.6rem 6vw 0 calc(var(--rail-w) + 2vw);
  max-width: 860px;
}
.static-mode .beat[data-i="1"] .beat-copy { text-align: left; margin-left: 0; }
.static-mode .beat[data-i="1"] .beat-stat { justify-content: flex-start; }

/* load: cutaway un-sticks on narrow, parts all lit in reduced-motion */
.static-mode .cut-part { opacity: 1; color: var(--brass); filter: none; transition: none; }
.static-mode .component { min-height: 0; padding: 2.4rem 0; }
.static-mode .component .comp-num { color: var(--brass); }
.static-mode .component .comp-title { color: var(--fg); }

/* proof gallery stacks vertically */
.static-mode .proof-pin {
  padding: clamp(4rem, 9vh, 7rem) 0 3rem;
  display: block;
}
.static-mode .proof-pin .ch-head { margin-bottom: 2.6rem; }
.static-mode .proof-hint { display: none; }
.static-mode .proof-track {
  transform: none !important;
  width: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 2.6rem;
  padding: 0 6vw 0 calc(var(--rail-w) + 2vw);
  max-width: 1240px;
}
.static-mode .station { width: auto; }
.static-mode .proof-claim { grid-column: 1 / -1; width: auto; padding: 2rem 0 1rem; }

@media (max-width: 980px) {
  .load-split { grid-template-columns: minmax(0, 1fr); }
  .cutaway-stick { position: static; }
  .cutaway-cap { margin-bottom: 1rem; }
  .component { min-height: 0; padding: 2.4rem 0; }
}

@media (max-width: 700px) {
  :root { --rail-w: 34px; }
  .beat-line { font-size: 1.45rem; }
  .zip-row { flex-direction: column; }
  .zip-row .btn-brass { width: 100%; text-align: center; }
}

/* ============================================================
   LINES PAGE (secondary)
   ============================================================ */
.page-lines { background: var(--bg); }
.lines-hero {
  padding: clamp(8rem, 18vh, 11rem) 6vw clamp(3rem, 7vh, 5rem);
  max-width: 1240px; margin: 0 auto;
}
.lines-hero h1 {
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.2rem, 5.2vw, 4.4rem);
  line-height: 1.04; letter-spacing: -.02em;
  margin-top: 1rem;
}
.lines-hero p { color: var(--fg-dim); max-width: 56ch; margin-top: 1.3rem; }
.line-section {
  max-width: 1240px; margin: 0 auto;
  padding: clamp(3rem, 7vh, 5rem) 6vw;
  border-top: 1px solid var(--hairline);
  scroll-margin-top: 5rem;
}
.line-section-head { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.line-section-head .line-icon { width: 42px; height: 42px; color: var(--brass); margin: 0; }
.line-section-head h2 {
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.8rem, 4vw, 2.8rem); letter-spacing: -.01em;
}
.line-badge {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .22em;
  color: var(--brass);
  border: 1px solid hsl(38 45% 55% / .45);
  padding: .4em .8em; border-radius: 3px;
}
.line-section > p { color: var(--fg-dim); max-width: 62ch; margin: 1.1rem 0 2rem; }
.line-skus { margin-bottom: 1.6rem; }
.line-actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-top: 1.8rem; }
.ghost-link {
  font-size: .84rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-dim); text-decoration: none;
  border-bottom: 1px solid var(--hairline); padding-bottom: .15em;
  transition: color .2s, border-color .2s;
}
.ghost-link:hover { color: var(--brass-bright); border-color: var(--brass); }
.ballistics-note {
  max-width: 1240px; margin: 0 auto;
  padding: clamp(3rem, 7vh, 5rem) 6vw;
  border-top: 1px solid var(--hairline);
  scroll-margin-top: 5rem;
}
.ballistics-note h2 {
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
}
.ballistics-note p { color: var(--fg-dim); max-width: 60ch; margin: 1rem 0 1.6rem; }

:root { color-scheme: dark; }