/* ==========================================================================
   The Shot List / Mad Max: Fury Road (2015)
   Design system: "war paint on salvage". The ground is sun-bleached sand.
   Every hard object on it is a piece of salvaged steel, rusted, riveted,
   welded along its seams and scratched: still frames, opener bars, plates,
   the verdict, the interactive housings, the footer. Every mark on that
   steel is hand-applied paint: stencil and spray with overspray halos and
   drips, grease, scratched tallies, and chrome that reflects the horizon.
   The one accent is the pushed teal of the Namib sky. Three grades as in
   the film: DAY (sand), NIGHT (blue steel) and CHROME (black, no colour).
   One theme, no dark mode. page.js draws the still effects and the two
   interactives; art-a.js and art-b.js draw the hero and the plates.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* ground: sand family (the page) */
  --sand:      #e8cfa3;
  --sand-2:    #dcbd8c;
  --sand-3:    #c9a26e;
  --bone:      #f1e7d3;
  --bone-2:    #d9ccb4;
  --bone-3:    #a89a84;
  --ink:       #1d140e;
  --ink-2:     #3d2c20;
  --ink-3:     #6a4f3c;
  --rule:      rgba(29, 20, 14, 0.2);

  /* desert inks: inside pictures and as material (rust) only */
  --ochre:     #e39b45;
  --orange:    #d9661f;
  --rust:      #9a4318;
  --rust-2:    #6e2c10;
  --umber:     #3a2216;

  /* steel */
  --steel:     #2b2724;
  --steel-2:   #3b3531;
  --steel-3:   #5c544d;
  --grease:    #100d0b;

  /* chrome: a material, rendered as a horizon reflection */
  --chrome-hi: #fbfeff;
  --chrome:    #c3ced0;
  --chrome-lo: #6d777a;
  --chrome-grad: linear-gradient(180deg,
      #0e6f80 0%, #7fcfd8 34%, #f4fdff 47%,
      #241712 49.5%, #6e2c10 54%, #d9661f 76%, #f2c58a 100%);

  /* the one accent: the pushed teal sky */
  --teal:      #18a0b2;
  --teal-ink:  #0a5d68;
  --teal-lt:   #8ad6de;
  --teal-deep: #0e6f80;

  /* night: the accent family graded down */
  --night:     #0a1a30;
  --night-2:   #10294a;
  --night-3:   #1f4f86;
  --night-hi:  #a9d2f2;

  /* Black & Chrome band */
  --bc-text:   #e9ebea;
  --bc-muted:  #9aa0a1;

  /* type */
  --f-display: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --f-stencil: "Saira Stencil One", "Anton", Impact, sans-serif;
  --f-body: "Literata", Georgia, "Times New Roman", serif;
  --f-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-body:   clamp(18px, 0.55vw + 15px, 21px);
  --fs-title:  clamp(64px, 15vw, 210px);
  --fs-pre:    clamp(20px, 3.9vw, 58px);
  --fs-h2:     clamp(2.5rem, 1.5rem + 4vw, 5.2rem);
  --fs-num:    clamp(1.6rem, 1rem + 2vw, 3.2rem);
  --fs-quote:  clamp(1.8rem, 1.2rem + 2.4vw, 3.2rem);
  --fs-dek:    clamp(1.02rem, 0.9rem + 0.5vw, 1.25rem);
  --fs-cap:    0.86em;
  --fs-note:   0.8em;
  --fs-label:  11.5px;
  --fs-tag:    13px;

  --measure: 66ch;
  --wide: 1120px;
  --sheet: 1320px;
  --gutter: 16px;
  --mast-h: 56px;
  --frame: clamp(8px, 1.1vw, 14px);

  /* ---------- textures (static, never animated) ---------- */
  /* sand grain over the whole page */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='15' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .07 0 0 0 0 .03 0 0 0 -3.6 1.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* the same grain at 8%, for the dust on glass */
  --grain-08: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='15' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .07 0 0 0 0 .03 0 0 0 -.29 .088'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* overspray mask: dense black specks, transparent between */
  --speckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' seed='15' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .07 0 0 0 0 .03 0 0 0 -9 4.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* rust for steel: a dark rust-2 stain, faint vertical run-off streaks, and
     ragged blooms with umber cores and bright orange crust (480px tile) */
  --rust-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='a' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.009' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .431 0 0 0 0 .173 0 0 0 0 .063 2.0 0 0 0 -0.95'/%3E%3C/filter%3E%3Cfilter id='c' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.1 0.007' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .431 0 0 0 0 .173 0 0 0 0 .063 0 0 0 2.6 -1.6'/%3E%3C/filter%3E%3Cfilter id='b' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.026' numOctaves='6' seed='4' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' values='0 0 0 0 .604 0 0 0 0 .263 0 0 0 0 .094 0 0 0 5.2 -2.85' result='bl'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.18' numOctaves='2' seed='11' stitchTiles='stitch' result='m'/%3E%3CfeColorMatrix in='m' values='0 0 0 0 .851 0 0 0 0 .4 0 0 0 0 .122 0 0 0 9 -4.8' result='cr'/%3E%3CfeComposite in='cr' in2='bl' operator='in' result='cr2'/%3E%3CfeColorMatrix in='n' values='0 0 0 0 .227 0 0 0 0 .133 0 0 0 0 .086 0 0 0 10 -6.5' result='core'/%3E%3CfeMerge%3E%3CfeMergeNode in='bl'/%3E%3CfeMergeNode in='core'/%3E%3CfeMergeNode in='cr2'/%3E%3C/feMerge%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23a%29'/%3E%3Crect width='100%25' height='100%25' filter='url%28%23c%29'/%3E%3Crect width='100%25' height='100%25' filter='url%28%23b%29'/%3E%3C/svg%3E");
  /* fine pitting in the rust */
  --pits: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .063 0 0 0 0 .051 0 0 0 0 .043 0 0 0 -7 2.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  /* night-2 specks over the NIGHT band */
  --night-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='21' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .122 0 0 0 0 .31 0 0 0 0 .525 0 0 0 -3.2 1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* fine silver grain over the CHROME band */
  --silver-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .91 0 0 0 0 .92 0 0 0 0 .92 0 0 0 -1.5 .58'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* build.js inlines the real 420px scratch tile in the head */
  --scratches: linear-gradient(transparent, transparent);

  /* a domed rivet, centred in whatever tile it is given */
  --rivet: radial-gradient(circle at calc(50% - 1px) calc(50% - 1px), var(--steel-3) 0 1.1px, var(--steel-2) 2.3px, var(--grease) 3.3px, transparent 3.8px);
  --rivet-chrome: radial-gradient(circle at calc(50% - 1px) calc(50% - 1px), var(--chrome) 0 0.9px, var(--chrome-lo) 2.2px, #2e3436 3.3px, transparent 3.8px);
  /* a weld bead: overlapping crescents */
  --bead: radial-gradient(ellipse 70% 120% at 50% 100%, transparent 0 34%, var(--steel-3) 40% 52%, var(--steel-2) 58% 76%, var(--grease) 82%, transparent 90%);
  /* gunmetal with rust blooms, pitting and scratches */
  --steel-bg: var(--scratches) 0 0 / 420px 420px, var(--pits) 0 0 / 180px 180px, var(--rust-tex) 0 0 / 480px 480px, var(--steel);
  /* the same steel with its rust knocked back, behind text */
  --steel-calm: var(--scratches) 0 0 / 420px 420px, linear-gradient(rgba(43, 39, 36, 0.55), rgba(43, 39, 36, 0.55)), var(--pits) 0 0 / 180px 180px, var(--rust-tex) 0 0 / 480px 480px, var(--steel);
  --lift: 0 16px 30px -14px rgba(29, 20, 14, 0.5), 6px 6px 0 rgba(29, 20, 14, 0.16);
  --hole: var(--sand);

  color-scheme: light;
}

@media (min-width: 720px) {
  :root { --gutter: clamp(24px, 4vw, 48px); --mast-h: 62px; }
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--sand);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background-color: var(--sand);
  background-image: var(--grain);
  background-size: 220px 220px;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  font-optical-sizing: auto;
  line-height: 1.66;
  overflow-wrap: break-word;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@supports (overflow-x: clip) {
  body { overflow-x: clip; }
}

h1, h2, h3, h4, p, figure, blockquote, ol, ul { margin: 0; }
img, svg { max-width: 100%; }
cite { font-style: italic; }
strong { font-weight: 600; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--teal-ink);
  text-underline-offset: 0.18em;
}
a:hover { color: var(--teal-ink); }

::selection { background: rgba(24, 160, 178, 0.3); }

:focus-visible {
  outline: 3px solid var(--teal-ink);
  outline-offset: 3px;
  border-radius: 1px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 60;
  padding: 10px 14px;
  background: var(--steel);
  color: var(--bone);
  font: 600 13px/1 var(--f-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { top: 12px; outline-color: var(--teal-lt); }

/* ---------- Reading progress: a tyre tread ---------- */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: 5px;
  overflow: hidden;
  background: rgba(201, 162, 110, 0.4);
  pointer-events: none;
}
.progress-bar {
  display: block;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(115deg, var(--ink) 0 3px, transparent 3px 7px), var(--steel-2);
  box-shadow: inset -3px 0 0 var(--teal);
  transform: translateX(-100%);
  will-change: transform;
}

/* ---------- Masthead: a steel strip ---------- */
.masthead {
  position: relative;
  z-index: 5;
  background: var(--steel-calm);
  color: var(--bone);
  box-shadow: 0 3px 0 rgba(16, 13, 11, 0.4);
}
.masthead::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 9px;
  background: var(--rivet) 0 0 / 46px 9px space no-repeat;
  pointer-events: none;
}
.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--sheet);
  height: var(--mast-h);
  margin: 0 auto;
  padding: 0 var(--gutter) 6px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--bone);
  text-decoration: none;
}
.brand:hover { color: var(--bone); }
.brand:focus-visible { outline-color: var(--teal-lt); }
.brand-bolt {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--chrome-grad);
  box-shadow: 0 0 0 1px var(--grease), 1px 1.5px 0 1px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.brand-bolt::after {
  content: "";
  position: absolute;
  inset: 4.5px;
  background: var(--steel-2);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  box-shadow: inset 1px 1px 0 var(--grease);
}
.brand-name {
  font: 400 20px/1 var(--f-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-top: 1px;
}
.masthead-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font: 500 11px/1 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-3);
}
.mm-kicker {
  padding: 5px 8px 4px;
  border: 1.5px solid var(--steel-3);
  color: var(--bone-2);
}
@media (max-width: 559px) {
  .mm-kicker { display: none; }
  .masthead-meta { font-size: 10px; letter-spacing: 0.1em; }
}

/* ---------- Draft notice ---------- */
.draft-bar { background: var(--ink); color: var(--sand); font: 500 13px/1.45 var(--f-mono); }
.draft-inner { max-width: var(--sheet); margin: 0 auto; padding: 10px var(--gutter); }

/* ---------- Hero ----------
   art-a.js fills .hero-art with the desert, the rig and the storm. Without
   it the header is the same sky and sand as a posterised gradient. */
.hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - var(--mast-h));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  color: var(--bone);
  background: linear-gradient(180deg, #0e6f80 0%, #1a93a6 26%, #8fd3da 46%, #e8b277 47.5%, #d9661f 60%, #9a4318 78%, #3a2216 92%, #1d140e 100%);
}
@supports not (min-height: 100svh) {
  .hero { min-height: calc(100vh - var(--mast-h)); }
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(29, 20, 14, 0.82) 0, rgba(29, 20, 14, 0) 58%);
  pointer-events: none;
}
/* once the desert is drawn its own dune lip carries the copy */
.hero:has(.hero-art canvas)::after { opacity: 0.45; }
.hero-art {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(28px, 6vh, 64px);
  text-align: center;
}
.hero-title {
  margin: 0;
  font-weight: 400;
}
.ht-pre {
  display: block;
  margin-bottom: 0.1em;
  padding-left: 0.22em;
  font: 400 var(--fs-pre)/1 var(--f-stencil);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
  text-shadow: 0 0 0.08em rgba(241, 231, 211, 0.45), 0 0 0.3em rgba(241, 231, 211, 0.18);
}
.ht-main {
  display: block;
  /* room above and below the caps so the clipped chrome covers them */
  margin: -0.08em 0 -0.05em;
  padding: 0.08em 0 0.05em;
  font: 400 var(--fs-title)/0.84 var(--f-display);
  letter-spacing: 0.012em;
  text-transform: uppercase;
  background:
    linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.95) 50%, transparent 58%) no-repeat,
    var(--chrome-grad);
  background-size: 34% 100%, 100% 100%;
  background-position: -60% 0, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0.03em 0 var(--grease)) drop-shadow(0 0 0.015em var(--grease));
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .ht-main { color: var(--bone); text-shadow: 0 0.04em 0 var(--grease); background: none; }
}
.hero-credit {
  margin-top: clamp(14px, 2.2vh, 22px);
  font: 500 12px/1.4 var(--f-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-2);
}
.hero-credit::before,
.hero-credit::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 2px;
  margin: 0 0.8em;
  vertical-align: middle;
  background: var(--teal-lt);
}
.hero-dek {
  max-width: 54ch;
  margin: 14px auto 0;
  font: 400 var(--fs-dek)/1.5 var(--f-body);
  color: var(--bone);
  text-wrap: balance;
  text-shadow: 0 1px 12px rgba(16, 13, 11, 0.6);
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin-top: 16px;
  font: 500 11px/1.4 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-3);
}
.hero-by { color: var(--teal-lt); }
.spray-tests { display: none; }
@media (min-width: 1000px) {
  .spray-tests {
    position: absolute;
    /* at the hero's right edge, not the copy column's */
    right: calc(var(--gutter) - (100vw - 100%) / 2 + 8px);
    bottom: 18px;
    display: flex;
    gap: 9px;
  }
  .spray-tests i {
    position: relative;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 0 3px 1px var(--c), 0 0 9px 3px color-mix(in srgb, var(--c) 35%, transparent);
    -webkit-mask-image: radial-gradient(circle, #000 52%, rgba(0, 0, 0, 0.6) 64%, transparent 72%);
    mask-image: radial-gradient(circle, #000 52%, rgba(0, 0, 0, 0.6) 64%, transparent 72%);
  }
  .spray-tests i:nth-child(1) { --c: var(--sand); }
  .spray-tests i:nth-child(2) { --c: var(--ochre); }
  .spray-tests i:nth-child(3) { --c: var(--orange); }
  .spray-tests i:nth-child(4) { --c: var(--rust); }
  .spray-tests i:nth-child(5) { --c: var(--grease); }
  .spray-tests i:nth-child(6) { --c: var(--bone); }
  .spray-tests i:nth-child(7) { --c: var(--chrome); background: var(--chrome-grad); }
  .spray-tests i:nth-child(8) { --c: var(--teal); }
}

/* ---------- The flow grid ---------- */
.entry { overflow-x: hidden; }
@supports (overflow-x: clip) {
  .entry { overflow-x: clip; }
}
.flow {
  --wide-extra: calc((var(--wide) - var(--measure)) / 2);
  position: relative;
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [wide-start] minmax(0, var(--wide-extra))
    [text-start] min(var(--measure), 100% - 2 * var(--gutter))
    [text-end] minmax(0, var(--wide-extra))
    [wide-end] minmax(var(--gutter), 1fr)
    [full-end];
}
.flow > * { grid-column: text; min-width: 0; }
.flow > * + * { margin-top: 1.15em; }

.chapter { scroll-margin-top: 24px; }
.chapter--intro { margin-top: clamp(3.25rem, 7vw, 5.5rem); }
.chapter + .chapter { margin-top: clamp(4.75rem, 9vw, 7.5rem); }

.flow > p {
  text-wrap: pretty;
  hanging-punctuation: first;
}
@media (max-width: 559px) {
  .flow > p { hyphens: auto; -webkit-hyphens: auto; }
}

/* figures get air; plates get more */
.flow > :is(figure, aside, .pair) { margin-top: clamp(2.75rem, 6vw, 4rem); }
.flow > :is(figure, aside, .pair) + * { margin-top: clamp(2.75rem, 6vw, 4rem); }
.flow > .art { margin-top: clamp(3.5rem, 8vw, 6.25rem); }
.flow > .art + * { margin-top: clamp(3.5rem, 8vw, 6.25rem); }
.flow > .art + :is(figure, .pair) { margin-top: clamp(4rem, 9vw, 7rem); }
/* a still that is not on the page leaves no gap behind it */
html:not(.show-placeholders) .flow > .is-missing { display: none; }
html:not(.show-placeholders) .flow > .is-missing + :not(figure, aside, .pair) { margin-top: 1.15em; }

/* ---------- Weld seams ---------- */
.seam {
  position: relative;
  height: 6px;
  border: 0;
  overflow: visible;
  background: var(--bead) 0 0 / 7px 6px repeat-x;
  box-shadow: 0 -2px 3px -1px rgba(110, 44, 16, 0.28), 0 3px 4px -1px rgba(58, 34, 22, 0.32);
}
.seam::before,
.seam::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, var(--steel-3) 0 18%, var(--steel-2) 46%, var(--grease) 78%);
  box-shadow: 1px 1.5px 0 rgba(16, 13, 11, 0.35);
}
.seam::before { left: -7px; }
.seam::after { right: -7px; }
.flow > hr.seam { margin: 3.2rem 7px; width: auto; }
.flow > hr.seam + * { margin-top: 3.2rem; }

/* ---------- Chapter headings (chapters without an opener) ---------- */
.ch-title {
  position: relative;
  padding-top: 22px;
  font: 400 var(--fs-h2)/0.9 var(--f-display);
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}
.ch-title::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 6px;
  background: var(--bead) 0 0 / 7px 6px repeat-x;
  box-shadow: 0 3px 4px -1px rgba(58, 34, 22, 0.3);
}
.ch-title::after {
  content: "";
  position: absolute;
  top: -4px;
  left: -7px;
  right: -7px;
  height: 14px;
  background:
    radial-gradient(circle 7px at 6px 6px, var(--steel-3) 0 1.6px, var(--steel-2) 3.6px, var(--grease) 6px, transparent 6.6px) 0 0 / 14px 14px no-repeat,
    radial-gradient(circle 7px at 6px 6px, var(--steel-3) 0 1.6px, var(--steel-2) 3.6px, var(--grease) 6px, transparent 6.6px) 100% 0 / 14px 14px no-repeat;
}
.ch-text {
  display: block;
  text-shadow: 0 0 0.05em rgba(29, 20, 14, 0.35), 0 0 0.22em rgba(29, 20, 14, 0.12);
}
.ch-num {
  position: absolute;
  top: 3px;
  left: 0;
  width: 52px;
  height: 38px;
  display: grid;
  place-items: center;
  padding-top: 2px;
  background: var(--rivet) 6px 50% / 9px 9px no-repeat, var(--rivet) calc(100% - 6px) 50% / 9px 9px no-repeat, var(--steel-bg);
  box-shadow: 2px 3px 0 rgba(29, 20, 14, 0.2);
  font: 400 22px/1 var(--f-stencil);
  color: var(--sand);
  text-shadow: 0 0 4px rgba(232, 207, 163, 0.45);
}
.ch-title:has(.ch-num) { padding-top: 58px; }
.ch-title--plain { padding-top: 26px; }

/* static drips under a stencilled numeral */
.ch-num i,
.op-num i {
  position: absolute;
  top: 82%;
  width: 2px;
  border-radius: 1px 1px 2px 2px;
  background: currentColor;
  opacity: 0.85;
}
.ch-num i::after,
.op-num i::after {
  content: "";
  position: absolute;
  left: -1px;
  bottom: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}
.ch-num i:nth-of-type(1) { left: 40%; height: 12px; }
.ch-num i:nth-of-type(2) { left: 62%; height: 19px; }

/* ---------- Drop cap: chrome, three lines ---------- */
.lede .dc {
  float: left;
  margin: 0.06em 0.1em 0 -0.02em;
  padding: 0.04em 0.02em 0;
  font: 400 5.2em/0.8 var(--f-display);
  font-style: normal;
  background: var(--chrome-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0.03em 0.03em 0 var(--grease));
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .lede .dc { color: var(--rust); background: none; }
}

/* ---------- Graded bands ---------- */
.band {
  position: relative;
  padding-bottom: clamp(4.5rem, 9vw, 7rem);
}
.band::before,
.band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  height: 6px;
  background: var(--bead) 0 0 / 7px 6px repeat-x;
  pointer-events: none;
}
.band::before { top: -6px; box-shadow: 0 -3px 4px -1px rgba(58, 34, 22, 0.35); }
.band::after { bottom: -6px; box-shadow: 0 3px 4px -1px rgba(58, 34, 22, 0.35); }

.chapter--night {
  --ink: var(--bone);
  --ink-2: var(--bone-2);
  --ink-3: var(--night-hi);
  --rule: rgba(169, 210, 242, 0.18);
  --steel: var(--night-2);
  --steel-2: #173763;
  --steel-3: var(--night-3);
  --hole: var(--night);
  --steel-bg: var(--scratches) 0 0 / 420px 420px, var(--night-grain) 0 0 / 220px 220px, var(--night-2);
  --steel-calm: var(--steel-bg);
  background-color: var(--night);
  background-image: var(--night-grain), var(--grain);
  background-size: 220px 220px, 220px 220px;
  color: var(--bone);
}
.chapter--night a { text-decoration-color: var(--teal-lt); }
.chapter--night a:hover { color: var(--teal-lt); }
.chapter--night :focus-visible { outline-color: var(--teal-lt); }
.chapter--night ::selection { background: rgba(138, 214, 222, 0.3); }

.chapter--chrome {
  --bone: var(--bc-text);
  --bone-2: #c2c6c5;
  --bone-3: var(--bc-muted);
  --ink: var(--bc-text);
  --ink-2: var(--bc-text);
  --ink-3: var(--bc-muted);
  --rule: rgba(233, 235, 234, 0.16);
  --sand: var(--bc-text);
  --sand-3: var(--bc-muted);
  --teal: var(--chrome);
  --teal-ink: var(--chrome);
  --teal-lt: var(--chrome);
  --rust: var(--steel-3);
  --steel: #1c1a19;
  --hole: var(--grease);
  --rivet: var(--rivet-chrome);
  --steel-bg: var(--scratches) 0 0 / 420px 420px, var(--silver-grain) 0 0 / 220px 220px, var(--grease);
  --steel-calm: var(--steel-bg);
  background-color: var(--grease);
  background-image: var(--silver-grain);
  background-size: 220px 220px;
  color: var(--bc-text);
}
.chapter--chrome a { text-decoration-color: var(--chrome); }
.chapter--chrome a:hover { color: var(--chrome-hi); }
.chapter--chrome :focus-visible { outline-color: var(--chrome); }
.chapter--chrome ::selection { background: rgba(195, 206, 208, 0.3); }
.chapter--chrome .cap,
.chapter--chrome .op-cap .cap { color: var(--bc-muted); }

/* ---------- Openers: letterboxed title cards ---------- */
.flow > .opener { grid-column: full; }
.chapter > .opener:first-child { margin-top: 0; }
.opener {
  position: relative;
  display: grid;
  grid-template-columns: 100%;
  background: var(--steel-bg);
  color: var(--bone);
  box-shadow: 0 18px 34px -20px rgba(16, 13, 11, 0.7);
}
.op-bar {
  position: relative;
  z-index: 1;
}
.op-bar--top {
  display: flex;
  align-items: center;
  gap: 18px;
  height: clamp(44px, 6vw, 88px);
  padding: 0 var(--gutter);
  background: var(--rivet) 0 7px / 64px 9px space no-repeat;
}
.op-bar--bottom {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [wide-start] minmax(0, calc((var(--wide) - var(--measure)) / 2))
    [text-start] min(var(--measure), 100% - 2 * var(--gutter))
    [text-end] minmax(0, calc((var(--wide) - var(--measure)) / 2))
    [wide-end] minmax(var(--gutter), 1fr)
    [full-end];
  padding: clamp(16px, 3vw, 34px) 0 calc(clamp(16px, 3vw, 34px) + 10px);
  background: var(--rivet) 0 calc(100% - 7px) / 64px 9px space no-repeat;
}
/* the weld bead where bar meets picture */
.op-bar--top::after,
.op-bar--bottom::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--bead) 0 0 / 5px 3px repeat-x;
}
.op-bar--top::after { bottom: 0; }
.op-bar--bottom::before { top: 0; }
.op-num {
  position: relative;
  flex: none;
  font: 400 var(--fs-num)/1 var(--f-stencil);
  color: var(--sand);
  text-shadow: 0 0 0.06em rgba(232, 207, 163, 0.55), 0 0 0.32em rgba(232, 207, 163, 0.22);
}
.op-num i:nth-of-type(1) { left: 28%; height: clamp(7px, 1.1vw, 14px); }
.op-num i:nth-of-type(2) { left: 70%; height: clamp(10px, 1.6vw, 22px); }
.op-slate {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  font: 500 10.5px/1.3 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-2);
  text-shadow: 0 1px 0 var(--grease), 0 0 5px rgba(16, 13, 11, 0.95), 0 0 2px rgba(16, 13, 11, 0.95);
}
@media (min-width: 900px) {
  .op-slate { display: flex; flex-wrap: wrap; gap: 4px 0; }
  .op-slate li + li::before { content: "/"; margin: 0 0.9em; color: var(--steel-3); }
}
.op-tag {
  margin-left: auto;
  font: 500 10.5px/1.3 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-2);
  text-align: right;
  white-space: nowrap;
  text-shadow: 0 1px 0 var(--grease), 0 0 5px rgba(16, 13, 11, 0.95), 0 0 2px rgba(16, 13, 11, 0.95);
}
.op-frame {
  position: relative;
  justify-self: center;
  width: min(100%, calc(var(--arn) * 78svh));
  margin: 0;
  box-shadow: -3px 0 0 var(--grease), 3px 0 0 var(--grease), -5px 0 0 var(--steel-3), 5px 0 0 var(--steel-3);
}
@supports not (width: 1svh) {
  .op-frame { width: min(100%, calc(var(--arn) * 78vh)); }
}
.op-frame .still-glass { aspect-ratio: var(--ar, 2.39 / 1); }
html:not(.show-placeholders) .op-frame.is-missing { display: none; }
.op-title {
  grid-column: text-start / wide-end;
  font: 400 var(--fs-h2)/0.9 var(--f-display);
  text-transform: uppercase;
  color: var(--bone);
  text-wrap: balance;
  /* a grease shadow seats the paint on the rusted bar so it reads over the crust */
  text-shadow: 0 0.035em 0 var(--grease), 0 0 0.14em rgba(16, 13, 11, 0.8), 0 0 0.05em rgba(241, 231, 211, 0.25);
}
.flow > .op-cap {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin-top: 16px;
}
.flow > .op-cap + * { margin-top: clamp(2.2rem, 4.5vw, 3rem); }

@media (max-width: 559px) {
  .op-bar--top { gap: 12px; }
  .op-tag { font-size: 9.5px; letter-spacing: 0.1em; }
}

/* ---------- Stills: panes of glass in salvaged steel ---------- */
.flow > .still { grid-column: wide; }
.still { position: relative; margin: 0; }
.still-mount {
  --pad: var(--frame);
  position: relative;
  padding: var(--pad);
  background:
    var(--rivet) 0 0 / var(--pad) var(--pad) no-repeat,
    var(--rivet) 100% 0 / var(--pad) var(--pad) no-repeat,
    var(--rivet) 0 100% / var(--pad) var(--pad) no-repeat,
    var(--rivet) 100% 100% / var(--pad) var(--pad) no-repeat,
    var(--rivet) 0 0 / 140px var(--pad) space no-repeat,
    var(--rivet) 0 100% / 140px var(--pad) space no-repeat,
    linear-gradient(45deg, transparent calc(50% - 0.7px), rgba(16, 13, 11, 0.7) 50%, transparent calc(50% + 0.7px)) 0 0 / var(--pad) var(--pad) no-repeat,
    linear-gradient(135deg, transparent calc(50% - 0.7px), rgba(16, 13, 11, 0.7) 50%, transparent calc(50% + 0.7px)) 100% 0 / var(--pad) var(--pad) no-repeat,
    linear-gradient(135deg, transparent calc(50% - 0.7px), rgba(16, 13, 11, 0.7) 50%, transparent calc(50% + 0.7px)) 0 100% / var(--pad) var(--pad) no-repeat,
    linear-gradient(45deg, transparent calc(50% - 0.7px), rgba(16, 13, 11, 0.7) 50%, transparent calc(50% + 0.7px)) 100% 100% / var(--pad) var(--pad) no-repeat,
    var(--steel-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -2px 0 rgba(0, 0, 0, 0.45),
    0 18px 30px -16px rgba(29, 20, 14, 0.55),
    5px 5px 0 rgba(29, 20, 14, 0.16);
}
.still-glass {
  position: relative;
  aspect-ratio: var(--ar, 2.39 / 1);
  overflow: hidden;
  background: var(--grease);
  box-shadow: 0 0 0 1px rgba(16, 13, 11, 0.9);
}
.still-glass img {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.still-glass img:not([src]) { visibility: hidden; }
/* dust settled on the lower glass */
.still-glass::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16%;
  z-index: 1;
  background: linear-gradient(to top, rgba(232, 207, 163, 0.22), rgba(232, 207, 163, 0));
  -webkit-mask-image: var(--speckle);
  mask-image: var(--speckle);
  -webkit-mask-size: 220px 220px;
  mask-size: 220px 220px;
  pointer-events: none;
}
/* a faint glare streak and grain */
.still-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.07) 38%, transparent 46%),
    var(--grain-08) 0 0 / 220px 220px;
  pointer-events: none;
}
.op-frame .still-glass { box-shadow: none; }
.op-frame .still-glass::before { display: none; }

/* shard: the glass is broken at one or two corners */
.still--shard .still-glass { clip-path: var(--shard); box-shadow: none; }
.shard-edge {
  position: absolute;
  left: var(--pad);
  top: var(--pad);
  z-index: 3;
  width: calc(100% - 2 * var(--pad));
  height: calc(100% - 2 * var(--pad));
  overflow: visible;
  pointer-events: none;
}
.shard-edge polyline { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: bevel; stroke-linecap: round; }
.shard-edge .se-dark { stroke: var(--grease); stroke-width: 3.5; }
.shard-edge .se-lit { stroke: var(--chrome-hi); stroke-width: 1.2; stroke-opacity: 0.85; }

/* mirror: a rear-view mirror for pursuit stills */
.flow > .still--mirror {
  justify-self: center;
  width: min(100%, 860px);
}
.flow > .still--mirror,
.flow > * + .still--mirror { margin-top: clamp(3.6rem, 7vw, 5rem); }
.still--mirror { container-type: inline-size; }
.still--mirror .still-mount {
  --pad: clamp(9px, 1.2vw, 15px);
  --mh: calc((100cqi - 2 * var(--pad)) / var(--arn) + 2 * var(--pad));
  padding: var(--pad);
  border-radius: 9cqi / calc(0.22 * var(--mh));
  background: var(--chrome-grad);
  rotate: -0.8deg;
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.55),
    inset 0 -3px 2px rgba(16, 13, 11, 0.55),
    inset 0 0 0 1px rgba(16, 13, 11, 0.6),
    0 20px 30px -16px rgba(29, 20, 14, 0.6),
    5px 6px 0 rgba(29, 20, 14, 0.16);
}
.still--mirror .still-glass {
  border-radius: calc(9cqi - var(--pad)) / calc(0.22 * var(--mh) - var(--pad));
  box-shadow: 0 0 0 1.5px var(--grease);
}
.still--mirror .still-glass::after {
  background:
    radial-gradient(ellipse at 30% 18%, rgba(255, 255, 255, 0.16), transparent 55%),
    radial-gradient(ellipse at 50% 50%, transparent 62%, rgba(16, 13, 11, 0.32) 100%),
    var(--grain-08) 0 0 / 220px 220px;
}
/* the stalk and its ball joint */
.still--mirror .still-mount::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -26px;
  width: 34px;
  height: 26px;
  margin-left: -17px;
  background:
    radial-gradient(circle at 42% 38%, var(--chrome-hi) 0 12%, var(--chrome) 30%, var(--chrome-lo) 58%, var(--grease) 66%, transparent 70%) 50% 100% / 20px 20px no-repeat,
    linear-gradient(90deg, var(--grease), var(--steel-3) 40%, var(--steel-2) 60%, var(--grease)) 50% 0 / 12px 16px no-repeat;
}
@supports not (width: 1cqi) {
  .still--mirror .still-mount { border-radius: 9% / 22%; }
  .still--mirror .still-glass { border-radius: 8% / 19%; }
}

/* pair: a split windscreen, two panes in one welded frame */
.flow > .pair {
  grid-column: wide;
  display: grid;
  gap: clamp(2.75rem, 6vw, 4rem);
}
@media (min-width: 720px) {
  .flow > .pair {
    grid-template-columns: var(--pa, 1fr) var(--pb, 1fr);
    gap: 0;
  }
  .pair > .still:first-child .still-mount {
    padding-right: calc(var(--pad) * 1.1);
    background:
      var(--rivet) 0 0 / var(--pad) var(--pad) no-repeat,
      var(--rivet) 0 100% / var(--pad) var(--pad) no-repeat,
      var(--rivet) 0 0 / 140px var(--pad) space no-repeat,
      var(--rivet) 0 100% / 140px var(--pad) space no-repeat,
      linear-gradient(45deg, transparent calc(50% - 0.7px), rgba(16, 13, 11, 0.7) 50%, transparent calc(50% + 0.7px)) 0 0 / var(--pad) var(--pad) no-repeat,
      linear-gradient(135deg, transparent calc(50% - 0.7px), rgba(16, 13, 11, 0.7) 50%, transparent calc(50% + 0.7px)) 0 100% / var(--pad) var(--pad) no-repeat,
      var(--steel-bg);
  }
  .pair > .still:last-child .still-mount {
    z-index: 1;
    padding-left: calc(var(--pad) * 1.1);
    background:
      var(--rivet) 100% 0 / var(--pad) var(--pad) no-repeat,
      var(--rivet) 100% 100% / var(--pad) var(--pad) no-repeat,
      var(--rivet) 100% 0 / 140px var(--pad) space no-repeat,
      var(--rivet) 100% 100% / 140px var(--pad) space no-repeat,
      linear-gradient(135deg, transparent calc(50% - 0.7px), rgba(16, 13, 11, 0.7) 50%, transparent calc(50% + 0.7px)) 100% 0 / var(--pad) var(--pad) no-repeat,
      linear-gradient(45deg, transparent calc(50% - 0.7px), rgba(16, 13, 11, 0.7) 50%, transparent calc(50% + 0.7px)) 100% 100% / var(--pad) var(--pad) no-repeat,
      var(--steel-bg);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -2px 0 rgba(0, 0, 0, 0.45),
      0 18px 30px -16px rgba(29, 20, 14, 0.55),
      5px 5px 0 rgba(29, 20, 14, 0.16);
  }
  /* the shared pillar: a vertical weld bead and three bolts */
  .pair > .still:last-child .still-mount::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 12px;
    margin-left: -6px;
    z-index: 2;
    background:
      radial-gradient(circle at 40% 36%, var(--steel-3) 0 16%, var(--steel-2) 42%, var(--grease) 72%, transparent 76%) 50% 18% / 12px 12px no-repeat,
      radial-gradient(circle at 40% 36%, var(--steel-3) 0 16%, var(--steel-2) 42%, var(--grease) 72%, transparent 76%) 50% 50% / 12px 12px no-repeat,
      radial-gradient(circle at 40% 36%, var(--steel-3) 0 16%, var(--steel-2) 42%, var(--grease) 72%, transparent 76%) 50% 82% / 12px 12px no-repeat,
      linear-gradient(90deg, transparent 3px, rgba(110, 44, 16, 0.3) 3px 4px, transparent 4px 8px, rgba(58, 34, 22, 0.35) 8px 9px, transparent 9px),
      radial-gradient(ellipse 120% 70% at 0 50%, transparent 0 34%, var(--steel-3) 40% 52%, var(--steel-2) 58% 76%, var(--grease) 82%, transparent 90%) 3px 0 / 6px 7px repeat-y;
  }
  .pair figcaption { padding-right: 14px; }
  .pair > .still:first-child .fx { width: calc(100% - 2.1 * var(--pad)); }
  .pair > .still:last-child .fx { left: calc(1.1 * var(--pad)); width: calc(100% - 2.1 * var(--pad)); }
  .pair > .still:last-child figcaption { padding-left: 6px; }
}

/* placeholders (draft, or ?placeholders) */
.ph { display: none; }
html.show-placeholders .is-missing .ph {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 4%;
  padding: 4% 5%;
  background:
    repeating-linear-gradient(160deg, rgba(201, 162, 110, 0.3) 0 18px, transparent 18px 46px),
    var(--sand-2);
  color: var(--ink);
}
html.show-placeholders .flow > .is-missing { display: block; }
html.show-placeholders .op-frame.is-missing { display: block; }
.ph-no {
  flex: none;
  font: 400 clamp(2.4rem, 8cqi, 6rem)/1 var(--f-stencil);
  font-size: clamp(2.4rem, 7vw, 6rem);
  color: rgba(29, 20, 14, 0.7);
}
.ph-body { display: grid; gap: 8px; min-width: 0; }
.ph-desc { font: 400 clamp(11px, 1.2vw, 14px)/1.45 var(--f-mono); }
.ph-file { font: 500 10.5px/1.3 var(--f-mono); color: var(--ink-3); overflow-wrap: anywhere; }

/* ---------- Captions ---------- */
.still figcaption,
.art figcaption,
.rig > figcaption {
  display: flex;
  gap: 12px;
  align-items: baseline;
  max-width: 70ch;
  margin-top: 14px;
}
.still-tag {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.still-tag b,
.art-tag {
  flex: none;
  display: inline-block;
  padding: 5px 8px 4px 17px;
  background:
    radial-gradient(circle at 8px 50%, var(--hole) 0 2px, rgba(16, 13, 11, 0.6) 2.3px, transparent 2.8px),
    var(--steel-bg);
  color: var(--sand);
  font: 400 var(--fs-tag)/1 var(--f-stencil);
  letter-spacing: 0.08em;
  white-space: nowrap;
  box-shadow: 1.5px 2px 0 rgba(29, 20, 14, 0.22);
  text-shadow: 0 0 3px rgba(232, 207, 163, 0.35);
}
.art-tag { text-transform: uppercase; }
.still-tag i {
  font: 400 10.5px/1 var(--f-mono);
  font-style: normal;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  white-space: nowrap;
}
.cap {
  font: italic 400 var(--fs-cap)/1.5 var(--f-body);
  color: var(--ink-2);
  text-wrap: pretty;
}
@media (max-width: 479px) {
  .still figcaption,
  .art figcaption,
  .rig > figcaption,
  .flow > .op-cap { flex-direction: column; gap: 8px; }
}

/* ---------- Still effects (drawn by page.js) ----------
   Inline SVG over the glass, never inside its middle 40% x 40%. Built once;
   each animates once on .is-seen (html.fx-anim), static otherwise. */
.fx {
  position: absolute;
  left: var(--pad);
  top: var(--pad);
  z-index: 4;
  width: calc(100% - 2 * var(--pad));
  height: calc(100% - 2 * var(--pad));
  pointer-events: none;
}
.fx svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.op-frame .fx { left: 0; top: 0; width: 100%; height: 100%; }
/* centre ticks */
.fx-tick {
  position: absolute;
  background: var(--teal);
  box-shadow: 0 0 0 1px rgba(16, 13, 11, 0.35);
}
.fx-tick--n, .fx-tick--s { left: 50%; width: 2.5px; height: 16px; margin-left: -1.25px; }
.fx-tick--e, .fx-tick--w { top: 50%; height: 2.5px; width: 16px; margin-top: -1.25px; }
.fx-tick--n { top: 0; }
.fx-tick--s { bottom: 0; }
.fx-tick--w { left: 0; }
.fx-tick--e { right: 0; }
.fx-tick::after {
  content: "";
  position: absolute;
  border: 1.5px solid rgba(241, 231, 211, 0.5);
}
.fx-tick--n::after { top: 4px; left: -7px; width: 16px; height: 6px; border-top: 0; border-bottom-color: transparent; }
.fx-tick--s::after { bottom: 4px; left: -7px; width: 16px; height: 6px; border-bottom: 0; border-top-color: transparent; }
.fx-tick--w::after { left: 4px; top: -7px; height: 16px; width: 6px; border-left: 0; border-right-color: transparent; }
.fx-tick--e::after { right: 4px; top: -7px; height: 16px; width: 6px; border-right: 0; border-left-color: transparent; }
/* frames: punched cells along the bottom frame band */
.fx-frames {
  position: absolute;
  left: calc(var(--pad) * 2.2);
  right: calc(var(--pad) * 2.2);
  bottom: 0;
  height: var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  z-index: 3;
}
.fx-frames i {
  width: clamp(5px, 0.8vw, 9px);
  height: 58%;
  border-radius: 1px;
  background: var(--grease);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.12);
}
.fx-frames i.is-dropped {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(232, 207, 163, 0.55);
}

/* SVG strokes and fills used by the effects */
.fx .f-crack { fill: none; stroke: var(--chrome-hi); stroke-opacity: 0.72; stroke-linecap: round; stroke-linejoin: round; }
.fx .f-hair { fill: none; stroke: var(--grease); stroke-opacity: 0.55; stroke-linecap: round; stroke-linejoin: round; }
.fx .f-ring { fill: none; stroke: var(--chrome-hi); stroke-opacity: 0.5; stroke-linecap: round; }

/* ---------- Sidenotes ---------- */
.sn { white-space: normal; }
.sn-ref {
  position: relative;
  top: -0.42em;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 0 0.05em 0 0.12em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, var(--steel-3) 0 14%, var(--steel-2) 38%, var(--steel) 62%, var(--grease) 100%);
  color: var(--sand);
  font: 500 10px/18px var(--f-mono);
  text-align: center;
  vertical-align: baseline;
  cursor: pointer;
  box-shadow: 0 0 0 1.5px rgba(16, 13, 11, 0.5), 1px 1.5px 0 rgba(16, 13, 11, 0.3);
  transition: box-shadow 160ms ease;
}
.sn-ref::after {
  content: "";
  position: absolute;
  inset: -6px;
}
.sn-ref:hover,
:root:not(.sn-margin) .sn-ref[aria-expanded="true"],
.sn.is-hot .sn-ref { box-shadow: 0 0 0 2px var(--teal), 1px 1.5px 0 rgba(16, 13, 11, 0.3); }

.sn-note {
  display: none;
  font-size: var(--fs-note);
  line-height: 1.55;
  color: var(--ink-3);
  text-wrap: pretty;
  hyphens: manual;
}
.sn-num {
  margin-right: 0.6em;
  font: 600 0.82em/1 var(--f-mono);
  color: var(--ink-3);
}
/* inline (narrow) mode: tap to expand */
.no-js .sn-note,
.sn.is-open .sn-note,
.sn-margin .sn.sn-inline .sn-note {
  position: relative;
  display: block;
  margin: 0.85em 0 0.95em;
  padding: 0.15em 0 0.15em 1.15em;
  font-size: var(--fs-note);
  line-height: 1.55;
  color: var(--ink-2);
}
.no-js .sn-note::before,
.sn.is-open .sn-note::before,
.sn-margin .sn.sn-inline .sn-note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--scratches) 0 0 / 420px 420px, var(--rust);
}
/* margin mode (wide screens), positioned by page.js */
.sn-margin .sn-note {
  display: block;
  position: absolute;
  top: 0;
  margin: 0;
  padding: 0 0 0 12px;
  border-left: 1px solid var(--rule);
  font-size: 0.74em;
  line-height: 1.5;
  transition: color 200ms ease, border-color 200ms ease;
}
.sn-margin .sn.sn-inline .sn-note { position: relative; width: auto; border-left: 0; }
.sn-margin .sn.is-hot .sn-note { color: var(--ink); border-left-color: var(--teal-ink); }
.chapter--night.sn-margin .sn.is-hot .sn-note,
.sn-margin .chapter--night .sn.is-hot .sn-note { border-left-color: var(--teal-lt); }

/* ---------- Pull quote: paint on a rusted sheet ---------- */
.flow > .pq {
  grid-column: wide;
  justify-self: center;
  width: min(100%, 900px);
}
.pq {
  position: relative;
  padding: clamp(30px, 5vw, 58px) clamp(24px, 5vw, 64px) clamp(26px, 4vw, 46px) clamp(40px, 7vw, 92px);
  background:
    var(--rivet) 14px 14px / 10px 10px no-repeat,
    var(--rivet) calc(100% - 14px) 14px / 10px 10px no-repeat,
    var(--scratches) 0 0 / 420px 420px,
    var(--pits) 0 0 / 180px 180px,
    var(--rust-tex) 160px 240px / 480px 480px,
    var(--steel);
  color: var(--bone);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -2px 0 rgba(0, 0, 0, 0.45), var(--lift);
}
.pq::before {
  content: "";
  position: absolute;
  left: clamp(16px, 3vw, 38px);
  top: clamp(28px, 4.5vw, 52px);
  bottom: clamp(26px, 4vw, 46px);
  width: 6px;
  background: var(--teal);
  box-shadow: 0 0 5px 1px rgba(24, 160, 178, 0.55), 0 0 14px 3px rgba(24, 160, 178, 0.22);
  -webkit-mask-image: linear-gradient(transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(transparent, #000 6%, #000 94%, transparent);
}
.pq-text p {
  font: 400 var(--fs-quote)/1.04 var(--f-display);
  color: var(--bone);
  text-wrap: balance;
  text-shadow: 0 0 0.04em rgba(241, 231, 211, 0.35);
  -webkit-mask-image: linear-gradient(#000, #000), var(--grain);
  -webkit-mask-size: 100% 100%, 220px 220px;
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(#000, #000), var(--grain);
  mask-size: 100% 100%, 220px 220px;
  mask-composite: exclude;
}
.pq-text { margin: 0; }
.pq-by {
  margin-top: 18px;
  font: 500 var(--fs-label)/1.3 var(--f-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sand);
}
.chapter--chrome .pq {
  background:
    var(--rivet) 14px 14px / 10px 10px no-repeat,
    var(--rivet) calc(100% - 14px) 14px / 10px 10px no-repeat,
    var(--scratches) 0 0 / 420px 420px,
    var(--silver-grain) 0 0 / 220px 220px,
    #1c1a19;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -2px 0 rgba(0, 0, 0, 0.6), 0 16px 30px -14px rgba(0, 0, 0, 0.8), 6px 6px 0 rgba(0, 0, 0, 0.35);
}
.chapter--chrome .pq::before {
  background: linear-gradient(180deg, var(--chrome-hi), var(--chrome) 40%, var(--chrome-lo));
  box-shadow: 0 0 5px 1px rgba(195, 206, 208, 0.4);
}
.chapter--chrome .pq-by { color: var(--bc-muted); }

/* ---------- Stencil slate: a crate label ---------- */
.flow > .slate {
  justify-self: start;
  max-width: 100%;
  margin-top: clamp(2rem, 4vw, 2.6rem);
}
.flow > .slate + * { margin-top: clamp(1.8rem, 3.5vw, 2.4rem); }
.slate-in {
  position: relative;
  display: inline-block;
  padding: 0.62em 2.3em 0.56em;
  rotate: -1deg;
  background:
    var(--rivet) 0.9em 50% / 10px 10px no-repeat,
    var(--rivet) calc(100% - 0.9em) 50% / 10px 10px no-repeat,
    var(--bone);
  font: 400 1.2rem/1.15 var(--f-stencil);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grease);
  text-shadow: 0 0 0.05em rgba(16, 13, 11, 0.45), 0 0 0.24em rgba(16, 13, 11, 0.14);
  box-shadow: 2px 3px 0 rgba(29, 20, 14, 0.2), 0 10px 18px -12px rgba(29, 20, 14, 0.5);
}
/* the bone paint chipped to rust at the edges */
.slate-in::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rust-tex) 0 0 / 220px 220px, var(--pits) 0 0 / 180px 180px;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 14%, transparent 86%, #000), linear-gradient(#000, transparent 32%, transparent 68%, #000);
  mask-image: linear-gradient(90deg, #000, transparent 14%, transparent 86%, #000), linear-gradient(#000, transparent 32%, transparent 68%, #000);
  pointer-events: none;
}
.chapter--chrome .slate-in {
  background:
    var(--rivet) 0.9em 50% / 10px 10px no-repeat,
    var(--rivet) calc(100% - 0.9em) 50% / 10px 10px no-repeat,
    var(--bc-text);
}
.chapter--chrome .slate-in::before { background: var(--pits) 0 0 / 120px 120px, var(--pits) 40px 70px / 180px 180px; }

/* ---------- Plates (drawn by art-a.js and art-b.js) ---------- */
.flow > .art {
  grid-column: wide;
  justify-self: center;
  width: min(100%, var(--art-max, 1120px));
}
.art { position: relative; margin: 0; }
.art-canvas {
  position: relative;
  aspect-ratio: var(--art-ar, 3 / 2);
  background: var(--sand-2);
  box-shadow: var(--lift);
}
.art-canvas:empty::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: 0.25;
  -webkit-mask-image: var(--speckle);
  mask-image: var(--speckle);
  -webkit-mask-size: 220px 220px;
  mask-size: 220px 220px;
}
.art[data-art="palette"]     { --art-ar: 2.39 / 1; --art-max: 1120px; }
.art[data-art="kit"]         { --art-ar: 3 / 2;    --art-max: 980px; }
.art[data-art="cab"]         { --art-ar: 16 / 10;  --art-max: 1040px; }
.art[data-art="edge"]        { --art-ar: 16 / 9;   --art-max: 1120px; }
.art[data-art="simtrav"]     { --art-ar: 3 / 2;    --art-max: 980px; }
.art[data-art="tally"]       { --art-ar: 6 / 5;    --art-max: 820px; }
.art[data-art="storm"]       { --art-ar: 4 / 5;    --art-max: 680px; }
.art[data-art="citadel"]     { --art-ar: 16 / 10;  --art-max: 1120px; }
.art[data-art="canyon"]      { --art-ar: 5 / 4;    --art-max: 860px; }
.art[data-art="polecat"]     { --art-ar: 16 / 9;   --art-max: 1120px; }
.art[data-art="blackchrome"] { --art-ar: 2.39 / 1; --art-max: 1120px; }
.art[data-art="signoff"]     { --art-ar: 5 / 2;    --art-max: 960px; }
@media (max-width: 599.98px) {
  .art[data-art="palette"],
  .art[data-art="blackchrome"] { --art-ar: 6 / 5; }
}
.art > .art-canvas { aspect-ratio: var(--art-ar); }
/* plates in the CHROME band sit on black */
.chapter--chrome .art-canvas { background: #1c1a19; box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.8), 6px 6px 0 rgba(0, 0, 0, 0.35); }
.chapter--chrome .art-canvas:empty::before { background: var(--bc-text); opacity: 0.08; }

/* ---------- Interactives: steel housings ---------- */
.flow > .rig {
  grid-column: wide;
  justify-self: center;
  width: min(100%, 1040px);
}
.rig { margin: 0; }
.rig-housing {
  --pad: var(--frame);
  position: relative;
  padding: var(--pad);
  background:
    var(--rivet) 0 0 / var(--pad) var(--pad) no-repeat,
    var(--rivet) 100% 0 / var(--pad) var(--pad) no-repeat,
    var(--rivet) 0 100% / var(--pad) var(--pad) no-repeat,
    var(--rivet) 100% 100% / var(--pad) var(--pad) no-repeat,
    var(--rivet) 0 0 / 140px var(--pad) space no-repeat,
    var(--steel-bg);
  color: var(--bone);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -2px 0 rgba(0, 0, 0, 0.45),
    0 18px 30px -16px rgba(29, 20, 14, 0.55),
    5px 5px 0 rgba(29, 20, 14, 0.16);
}
.rig-glass {
  position: relative;
  aspect-ratio: 2.39 / 1;
  overflow: hidden;
  background: var(--sand-2);
  box-shadow: 0 0 0 1px var(--grease);
}
.rig-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.rig-note {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 4px 6px 3px;
  background: rgba(16, 13, 11, 0.62);
  color: var(--bone-2);
  font: 500 9.5px/1 var(--f-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}
/* the control strip: a steel band riveted to the frame */
.rig-strip {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin: var(--pad) calc(var(--pad) * -1) 0;
  padding: 16px calc(var(--pad) + 4px) 14px;
  border-top: 3px solid transparent;
  background:
    var(--bead) 0 0 / 5px 3px repeat-x border-box,
    var(--rivet) 6px 50% / 9px 9px no-repeat,
    var(--rivet) calc(100% - 6px) 50% / 9px 9px no-repeat;
}
.rig-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.rig-group--act { margin-left: auto; }
.rig-label {
  margin-right: 6px;
  font: 500 12px/1 var(--f-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bone-3);
}
.rig-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 13px;
  border: 2px solid var(--steel-3);
  border-radius: 2px;
  background: var(--steel-2);
  color: var(--bone);
  font: 500 12px/1.1 var(--f-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 0 rgba(16, 13, 11, 0.5);
  transition: background-color 140ms ease, color 140ms ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.rig-btn:hover { background: var(--steel-3); }
.rig-btn[aria-pressed="true"] {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--grease);
  box-shadow: inset 0 2px 3px rgba(16, 13, 11, 0.35);
}
.rig-btn:focus-visible { outline: 3px solid var(--teal-lt); outline-offset: 2px; }
.rig-btn:disabled { opacity: 0.42; cursor: not-allowed; }
.rig-btn:disabled:hover { background: var(--steel-2); }
.rig-n {
  font: 400 13px/1 var(--f-stencil);
  color: var(--sand);
}
.rig-btn[aria-pressed="true"] .rig-n { color: var(--grease); }
.rig-ico {
  width: 0;
  height: 0;
  border-left: 9px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.rig-btn--go[data-state="playing"] .rig-ico {
  width: 9px;
  height: 11px;
  border: 0;
  background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 6px, currentColor 6px);
}
.rig-btn--go[data-state="step"] .rig-ico { border-left-width: 7px; box-shadow: 3px 0 0 -0px currentColor; }
.rig-read {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  padding: 2px 2px 4px;
  font: 500 11.5px/1.5 var(--f-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone-2);
}
.rr b { font-weight: 600; color: var(--bone); }
.rr em { font-style: normal; color: var(--bone-3); }
@media (max-width: 479px) {
  .rig-note { right: 5px; bottom: 5px; padding: 3px 4px 2px; font-size: 8px; }
  .rig-strip { gap: 12px; }
  .rig-group--act { margin-left: 0; }
  .rig-btn { padding: 9px 10px; font-size: 11px; }
  .rig-read { gap: 4px 18px; font-size: 10.5px; }
}

/* the exposure strip (day for night) */
.stops {
  container-type: inline-size;
  position: relative;
  margin-top: 12px;
  padding: 0 2px 4px;
}
.stops-bar {
  position: relative;
  height: 40px;
  margin-top: 30px;
  background: var(--scratches) 0 0 / 420px 420px, var(--steel-2);
  border: 2px solid var(--steel-3);
  box-shadow: inset 0 2px 3px rgba(16, 13, 11, 0.5);
}
.stops-ticks,
.stops-under,
.stops-mark { position: absolute; }
.stops-ticks {
  inset: 0 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.stops-ticks li {
  position: absolute;
  left: calc(var(--at) * 100%);
  top: 0;
  bottom: 0;
  width: 0;
}
.stops-ticks li::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1px;
  width: 2px;
  height: 9px;
  background: var(--bone-3);
}
.stops-ticks li span {
  position: absolute;
  bottom: 3px;
  left: 0;
  transform: translateX(-50%);
  font: 400 15px/1 var(--f-stencil);
  color: var(--sand);
  white-space: nowrap;
}
.stops-ticks li.is-zero span { color: var(--bone); }
.stops-under {
  top: 0;
  bottom: 0;
  left: 22px;
  width: calc((100% - 44px) * var(--to));
  background: repeating-linear-gradient(-45deg, rgba(241, 231, 211, 0.24) 0 2px, transparent 2px 7px);
  border-right: 2px solid rgba(241, 231, 211, 0.4);
}
.stops-mark {
  top: -8px;
  height: 24px;
  left: calc(22px + (100% - 44px) * var(--at));
  width: 6px;
  margin-left: -3px;
}
.stops-mark--fr {
  background: var(--teal);
  box-shadow: 0 0 6px rgba(24, 160, 178, 0.6);
}
.stops-mark--test { width: 3px; margin-left: -1.5px; background: var(--bone); }
.stops-labels {
  list-style: none;
  margin: 0;
  padding: 0;
  font: 500 10.5px/1.3 var(--f-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.stops-labels li {
  position: absolute;
  top: 0;
  left: calc(2px + 22px + (100% - 48px) * var(--at));
  transform: translateX(-50%);
  white-space: nowrap;
  color: var(--bone-2);
}
.stops-labels .sl-fr { color: var(--teal-lt); }
.stops-labels .sl-test { transform: translateX(-100%); left: calc(100% - 2px); }
@container (max-width: 640px) {
  .stops-bar { margin-top: 10px; }
  .stops-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 14px;
  }
  .stops-labels li,
  .stops-labels .sl-test { position: static; left: auto; transform: none; white-space: normal; }
  .stops-labels li::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 7px;
    vertical-align: -1px;
  }
  .stops-labels .sl-under::before { background: repeating-linear-gradient(-45deg, rgba(241, 231, 211, 0.5) 0 2px, transparent 2px 4px); outline: 1px solid rgba(241, 231, 211, 0.4); }
  .stops-labels .sl-fr::before { background: var(--teal); width: 5px; }
  .stops-labels .sl-test::before { background: var(--bone); width: 3px; }
}
@supports not (container-type: inline-size) {
  .stops-labels { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; }
  .stops-labels li,
  .stops-labels .sl-test { position: static; left: auto; transform: none; }
}
/* night steel for the housing in the NIGHT band */
.chapter--night .rig-glass { background: var(--night); }
.chapter--night .rig-btn { background: #173763; border-color: var(--night-3); }
.chapter--night .rig-btn:hover { background: var(--night-3); }
.chapter--night .rig-btn[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); }

/* ---------- Sign-off (drawn by art-b.js) ---------- */
.signoff-sec { margin-top: clamp(5rem, 10vw, 8rem); }
.flow > .art--signoff { margin-top: 0; }
.art--signoff .art-canvas:empty {
  display: grid;
  place-items: center;
  background: var(--steel-bg);
}
.art--signoff .art-canvas:empty::before {
  content: "REZA";
  position: static;
  opacity: 1;
  background: var(--chrome-grad);
  -webkit-mask-image: none;
  mask-image: none;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding: 0.06em 0.04em 0.02em;
  font: 400 clamp(64px, 15vw, 190px)/0.9 var(--f-display);
  letter-spacing: 0.04em;
  filter: drop-shadow(0 0.03em 0 var(--grease));
}
.art--signoff figcaption.signoff-line {
  display: block;
  max-width: none;
  margin-top: 16px;
  text-align: center;
  font: 500 var(--fs-label)/1.4 var(--f-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  margin-top: clamp(4rem, 8vw, 6rem);
  background: var(--steel-calm);
  color: var(--bone-3);
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 6px;
  background: var(--bead) 0 0 / 7px 6px repeat-x;
}
.site-footer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 12px;
  height: 9px;
  background: var(--rivet) 0 0 / 52px 9px space no-repeat;
}
.footer-inner {
  display: grid;
  gap: 18px;
  max-width: var(--sheet);
  margin: 0 auto;
  padding: 48px var(--gutter) 44px;
}
@media (min-width: 900px) {
  .footer-inner { grid-template-columns: auto 1fr auto; align-items: center; gap: 36px; }
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--bone);
  text-decoration: none;
}
.footer-brand:hover { color: var(--bone); }
.footer-name { font: 400 20px/1 var(--f-display); letter-spacing: 0.06em; text-transform: uppercase; }
.colophon {
  max-width: 72ch;
  font: 400 11.5px/1.75 var(--f-mono);
  letter-spacing: 0.02em;
  color: var(--bone-3);
}
.back-top {
  justify-self: start;
  font: 500 11.5px/1 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  text-decoration-color: var(--teal-lt);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}
.back-top:hover { color: var(--teal-lt); }
.site-footer :focus-visible { outline-color: var(--teal-lt); }

/* ---------- Motion ----------
   Only these move: the hero (art-a), the title's one chrome flash, the
   still effects (once, on .is-seen), plates (art-a/b, once), the verdict
   seal slam (once), the sign-off (art-b, once), and the interactives on
   user action. Everything here is gated by no-preference and html.fx-anim.
   No text ever animates on scroll, and no still fades in. */
@keyframes mmf-chrome-flash {
  from { background-position: -60% 0, 0 0; }
  to   { background-position: 160% 0, 0 0; }
}
@keyframes mmf-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mmf-shake {
  0%, 100% { translate: 0 0; }
  25% { translate: -2px 1px; }
  50% { translate: 2px -1px; }
  75% { translate: -1px 2px; }
}
@keyframes mmf-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mmf-puff { from { opacity: 0; scale: 0.55; } to { opacity: 1; scale: 1; } }
@keyframes mmf-run { from { scale: 1 0; } to { scale: 1 1; } }
@keyframes mmf-pop { from { opacity: 0; scale: 0.2; } to { opacity: 1; scale: 1; } }
@keyframes mmf-rise { from { opacity: 0; translate: 0 34px; } 60% { opacity: 1; } to { opacity: 1; translate: 0 0; } }
@keyframes mmf-blow { from { opacity: 0; translate: -46px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes mmf-blow-r { from { opacity: 0; translate: 46px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes mmf-slide-n { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }
@keyframes mmf-slide-s { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes mmf-slide-w { from { opacity: 0; translate: -8px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes mmf-slide-e { from { opacity: 0; translate: 8px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes mmf-swing {
  0%   { rotate: 22deg; translate: 0 -18px; opacity: 0; }
  18%  { rotate: -9deg; translate: 0 0; opacity: 1; }
  40%  { rotate: 5deg; }
  62%  { rotate: -2.4deg; }
  82%  { rotate: 1deg; }
  100% { rotate: 0deg; translate: 0 0; opacity: 1; }
}
@keyframes mmf-punch { from { opacity: 0; scale: 1.8; } to { opacity: 1; scale: 1; } }
@keyframes mmf-drop { from { opacity: 1; } to { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  html.fx-anim .ht-main { animation: mmf-chrome-flash 900ms ease-in-out 2.3s 1 both; }

  /* still effects: hidden until their still is first seen */
  html.fx-anim .still:not(.is-seen) .fx .a { opacity: 0; }
  html.fx-anim .still.is-seen .fx .a-draw { stroke-dasharray: 1; animation: mmf-draw var(--t, 220ms) ease-out var(--d, 0ms) both; }
  html.fx-anim .still.is-seen .fx .a-shake { animation: mmf-shake 120ms linear var(--d, 240ms) 1 both; }
  html.fx-anim .still.is-seen .fx .a-wipe { animation: mmf-wipe var(--t, 400ms) cubic-bezier(0.3, 0.6, 0.3, 1) var(--d, 0ms) both; }
  html.fx-anim .still.is-seen .fx .a-puff { transform-box: fill-box; transform-origin: 100% 0; animation: mmf-puff var(--t, 300ms) ease-out var(--d, 0ms) both; }
  html.fx-anim .still.is-seen .fx .a-run { transform-box: fill-box; transform-origin: 50% 0; animation: mmf-run var(--t, 1200ms) cubic-bezier(0.4, 0.1, 0.6, 1) var(--d, 300ms) both; }
  html.fx-anim .still.is-seen .fx .a-pop { transform-box: fill-box; transform-origin: 50% 50%; animation: mmf-pop var(--t, 200ms) ease-out var(--d, 0ms) both; }
  html.fx-anim .still.is-seen .fx .a-rise { animation: mmf-rise var(--t, 900ms) cubic-bezier(0.2, 0.7, 0.3, 1) var(--d, 0ms) both; }
  html.fx-anim .still.is-seen .fx .a-blow { animation: mmf-blow var(--t, 700ms) cubic-bezier(0.2, 0.7, 0.3, 1) var(--d, 0ms) both; }
  html.fx-anim .still.is-seen .fx .a-blow-r { animation: mmf-blow-r var(--t, 700ms) cubic-bezier(0.2, 0.7, 0.3, 1) var(--d, 0ms) both; }
  html.fx-anim .still.is-seen .fx .a-fade { animation: mmf-pop var(--t, 300ms) ease-out var(--d, 0ms) both; scale: 1; }
  html.fx-anim .still.is-seen .fx .a-swing { transform-box: view-box; animation: mmf-swing 900ms cubic-bezier(0.3, 0.5, 0.4, 1) var(--d, 0ms) both; }
  html.fx-anim .still.is-seen .fx-tick--n { animation: mmf-slide-n 300ms ease-out both; }
  html.fx-anim .still.is-seen .fx-tick--s { animation: mmf-slide-s 300ms ease-out 40ms both; }
  html.fx-anim .still.is-seen .fx-tick--w { animation: mmf-slide-w 300ms ease-out 80ms both; }
  html.fx-anim .still.is-seen .fx-tick--e { animation: mmf-slide-e 300ms ease-out 120ms both; }
  html.fx-anim .still:not(.is-seen) .fx-tick { opacity: 0; }
  html.fx-anim .still.is-seen .fx-frames i { animation: mmf-punch 140ms ease-out calc(var(--i, 0) * 22ms) both; }
  html.fx-anim .still:not(.is-seen) .fx-frames i { opacity: 0; }
}
/* the drawn strokes always carry pathLength 1 */
.fx .a-draw { stroke-dasharray: none; }

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

/* ---------- Print ---------- */
@media print {
  .progress,
  .skip-link,
  .spray-tests,
  .rig-strip,
  .rig-note { display: none !important; }
  body { background: #fff; }
  .hero { min-height: 0; padding-top: 30vh; }
  .band { background: #fff; color: #000; --ink: #000; --ink-2: #222; --ink-3: #444; }
  .still, .art, .rig, .pq, .opener { break-inside: avoid; }
  .sn-note { display: block; position: static; margin: 0.5em 0; }
}