/* Art direction: one warm key light in a dark navy room. Every chapter is a place lit by a single source.
   Palette from the Cipriani portrait (navy panelling, cream leather, warm key) plus BP Blue from the 2020 identity. */
:root {
  --ink: #03050b;
  --night: #060a16;
  --navy: #0c1530;
  --glass: rgba(6, 10, 22, .62);
  --text: #f4efe7;
  --muted: #b8b2a6;
  --dim: #7f7a72;
  --key: #ffcf8a;          /* the one luminous accent: the warm key light */
  --key-hot: #ffe7c2;
  --bp-blue: #0056b4;      /* BP Blue, Pantone 2388C (2020 identity) */
  --bp-sky: #adcced;
  --bp-red: #ff3333;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --max: 1240px;
  --gutter: clamp(20px, 5vw, 72px);
}
* { box-sizing: border-box; }
html { background: var(--ink); color: var(--text); -webkit-text-size-adjust: 100%; scroll-behavior: auto; overscroll-behavior-y: none; }
body { margin: 0; font: 300 17px/1.65 var(--sans); background: var(--ink); overflow-x: clip; }   /* clip, not hidden: hidden makes body a scroller and breaks the sticky hero */
::selection { background: var(--key); color: var(--ink); }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--key); color: var(--ink); padding: 8px 14px; }
.skip:focus { left: 12px; }

/* ---------- stage layers ---------- */
#world { position: fixed; inset: 0; width: 100%; height: 100lvh; display: block; z-index: 0; opacity: 0; transition: opacity 1.4s ease; touch-action: pan-y; }
.gl-on #world { opacity: 1; }
/* designer 2026-10-18: a reader who flicks into Tether before the 3D is ready sees a still of the scattered gold cubes, then the live scene cross-fades in within 300 ms */
.tether-poster { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: var(--ink) url(../img/tether-poster-d.webp) center / cover no-repeat; }
.poster-on .tether-poster { opacity: 1; }
.fast-in #world { transition-duration: .3s; }
.no3d body, .no3d { background: radial-gradient(120% 80% at 70% 20%, #13224a 0%, var(--night) 45%, var(--ink) 100%) fixed; }
.vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(130% 95% at 50% 45%, transparent 55%, rgba(0, 0, 0, .72) 100%); }
/* the grain layer is inset:0 with an oversized inner layer; an inset:-50% fixed box widened the phone layout viewport to 437px (fm-ux-mobile P0-1) */
.grain { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; opacity: .04; }   /* static, no blend mode: a blended full-screen layer over the WebGL canvas cost a full-screen composite every step (Pete 2026-10-22 "slow and glitchy") */
.grain::before { content: ""; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 30; }
.progress i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--bp-blue), var(--key)); }

/* ---------- chrome ---------- */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter); pointer-events: none; }
.topbar > * { pointer-events: auto; }
/* an ink fade under the fixed nav so scrolling copy never sits under BP / the menu button (designer civic follow-up) */
.topbar::before { content: ""; position: absolute; inset: 0 0 -28px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(3, 5, 11, .82), rgba(3, 5, 11, .55) 55%, transparent); }
.menu-open .topbar::before { opacity: 0; }
.mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255, 231, 194, .35); border-radius: 50%;
  text-decoration: none; font: 800 13px/1 var(--sans); letter-spacing: .08em; color: var(--key-hot);
  background: rgba(3, 5, 11, .35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.nav { display: flex; gap: clamp(14px, 2.6vw, 34px); }
.nav a { text-decoration: none; font: 400 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
  padding: 10px 0; transition: color .3s; }
.nav a:hover, .nav a:focus-visible { color: var(--key-hot); }
.rail { position: fixed; right: clamp(12px, 2vw, 28px); top: 50%; transform: translateY(-50%); z-index: 20; display: flex; flex-direction: column; gap: 14px; }
.rail a { position: relative; display: block; width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(244, 239, 231, .45); transition: all .4s; }
.rail a.on { background: var(--key); border-color: var(--key); box-shadow: 0 0 14px var(--key); transform: scale(1.25); }
.rail a span { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 400 11px/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted); opacity: 0; transition: opacity .3s; pointer-events: none; }
.rail a:hover span, .rail a:focus-visible span { opacity: 1; }

/* ---------- chapters ---------- */
main { position: relative; z-index: 3; }
.ch { position: relative; overflow-x: clip; min-height: 170svh; padding: 42svh var(--gutter) 30svh;   /* longer run-up: the scene builds before the copy reaches mid-screen */ display: flex; align-items: flex-start; }
.ch .copy { position: relative; max-width: 560px; }
.ch .copy::before { /* dark scrim first, glow second */
  content: ""; position: absolute; inset: -18% -30% -18% -40%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(3, 5, 11, .88), rgba(3, 5, 11, .6) 55%, transparent); }   /* stronger: body copy sat on bright starbursts */
.ch.left { justify-content: flex-start; }
.ch.right { justify-content: flex-end; }
.ch.center { justify-content: center; text-align: center; }
.ch.center .copy { max-width: 980px; }
.ch.wide .copy { max-width: 600px; }

.kicker { margin: 0 0 22px; font: 400 12px/1.4 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--key); }
.kicker b { font-weight: 600; margin-right: 14px; color: var(--key-hot); }
.kicker i { font-style: normal; color: var(--dim); margin: 0 .5em; }
h2 { margin: 0 0 26px; font: 400 clamp(40px, 6.2vw, 92px)/1.0 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
h2 .lead { display: block; color: var(--text); }
h2 .punch { display: block; font-style: italic; color: var(--key-hot); text-shadow: 0 0 34px rgba(255, 207, 138, .28); }
.body { margin: 0 0 18px; color: #e3ddd2; font-size: clamp(16px, 1.25vw, 18px); max-width: 34em; }
.body em { font-family: var(--serif); font-size: 1.12em; font-style: italic; color: var(--text); }
.pull { margin: 0 0 26px; padding-left: 20px; border-left: 2px solid var(--bp-blue); font: italic 400 clamp(22px, 2.2vw, 30px)/1.3 var(--serif); color: var(--text); }

/* reveal on enter */
.copy > * { opacity: 0; transform: translateY(26px); transition: opacity 1.1s cubic-bezier(.2, .7, .2, 1), transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.ch.in .copy > * { opacity: 1; transform: none; }
.ch.in .copy > *:nth-child(2) { transition-delay: .12s; }
.ch.in .copy > *:nth-child(3) { transition-delay: .24s; }
.ch.in .copy > *:nth-child(4) { transition-delay: .36s; }
.ch.in .copy > *:nth-child(5) { transition-delay: .48s; }

/* only the hero is laid out on first paint (fm-ux-mobile P1-2: the first full-page layout was the long task) */
.ch:not(.hero) { content-visibility: auto; contain-intrinsic-size: auto 170svh; }
@media (max-width: 700px) { .ch:not(.hero) { contain-intrinsic-size: auto 150svh; } }

/* ---------- hero: the light finds him ---------- */
/* Beat 0-1 need no JS: the lit photo, a dark overlay with a cone-shaped hole aimed along the photo's own key light
   (top left), and a 1.2 s Ignite on the overlay (opacity + transform only). js/hero.js renders the same frame in WebGL2
   at the CSS end state, fades its canvas in over it, then drives beats 2-4 from scroll (--p). */
.ch.hero { display: block; min-height: 0; height: 250svh; padding: 0; }   /* 100 stage + 150 travel */
.hero-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; contain: paint; --name: 1; }
.js .hero-stage { --name: 0; }
.hero-frame { position: absolute; inset: 0 0 -2% 0; --fx: 50%; --fy: 23%; --cone-angle: 186deg; will-change: transform; }
.hero-img, .hero-gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-img { object-fit: cover; object-position: 50% 30%; }
.hero-gl { opacity: 0; pointer-events: none; touch-action: pan-y; }
.hero-gl.on { opacity: 1; }
.hero-dark { position: absolute; left: var(--fx); top: var(--fy); width: 500vmax; height: 500vmax; margin: -250vmax 0 0 -250vmax;
  pointer-events: none; will-change: opacity, transform;
  background: radial-gradient(22vmin 60vmin at 50% calc(50% - 8vmin), transparent 0%, transparent 18%, #000 100%);
  opacity: .97; transform: rotate(var(--cone-angle)) scale(.35); animation: ignite 2.6s linear forwards; }
/* the cold open (Pete 2026-10-17, v2): storm in the dark; the main strike at 0.9 s lands on the sword-I of his name; the name builds
   out from the sword; then the name's light falls on him (Ignite, 1.7-2.6 s) */
@keyframes ignite {
  0%, 65% { opacity: .97; transform: rotate(var(--cone-angle)) scale(.35); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  100% { opacity: .9; transform: rotate(var(--cone-angle)) scale(1); } }
/* the veil: full black while the storm plays (he is not there yet); the main strike at 1.5 s shows the room for an instant;
   it lifts at 1.7 s as the light from his name reaches him */
.hero-veil { position: absolute; inset: 0; background: #000; pointer-events: none; animation: veil 2.6s linear forwards; }
@keyframes veil { 0%, 34.6% { opacity: 1 } 35.4% { opacity: .45 } 41% { opacity: 1 } 65% { opacity: 1 } 77% { opacity: 0 } 100% { opacity: 0 } }
.hero-gl-on .hero-veil, .hero-css .hero-veil { display: none; }
/* without WebGL the overlay itself carries beats 2-3 from --p (set by hero.js) */
.hero-css .hero-dark { animation: none; transition: none;
  opacity: calc(.9 * (1 - var(--lit, 0))); transform: rotate(var(--cone-angle)) scale(calc(1 + 1.6 * var(--open, 0))); }
.hero-gl-on .hero-dark { display: none; }
.hero-frame::after { content: ""; position: absolute; inset: auto 0 0; height: 46%; pointer-events: none;
  background: linear-gradient(transparent, rgba(3, 5, 11, .55) 45%, rgba(3, 5, 11, .92)); opacity: var(--name, 0); }

.hero-copy { position: absolute; left: 0; right: 0; bottom: max(5svh, calc(env(safe-area-inset-bottom) + 24px)); text-align: center;
  padding: 0 var(--gutter); pointer-events: none; }
.hero-copy .kicker, .hero-copy .lede { opacity: var(--name, 1); transform: translateY(calc(12px * (1 - var(--name, 1)))); }
.hero-copy { display: flex; flex-direction: column; align-items: center; }
.hero-copy .kicker { order: 2; margin: 16px 0 0; text-shadow: 0 2px 18px #000; }   /* below the name: the hands stay clear */
.hero-copy .lede { order: 3; }
.title { position: relative; margin: 0; font: 700 clamp(46px, 7vw, 116px)/1 "Cinzel", var(--serif); letter-spacing: .04em; color: var(--key); }
.title::before { content: ""; position: absolute; inset: -60% -30%; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 214, 150, .34), rgba(255, 196, 120, .12) 55%, transparent);
  animation: nameglow 1.2s 1.35s cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes nameglow { to { opacity: 1; } }
.title .l { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(.12em);
  animation: letter .55s calc(1.15s + var(--d) * .07s) cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes letter { to { opacity: 1; filter: none; transform: none; } }
.sword-i { transform-origin: 50% 0; animation: forge 1.1s .95s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes forge { 0% { transform: scaleY(0); color: #fff; filter: drop-shadow(0 0 14px #fff) } 20% { transform: scaleY(1); color: #fff; filter: drop-shadow(0 0 18px #fff) }
  100% { transform: scaleY(1); color: var(--key); filter: drop-shadow(0 0 10px rgba(255, 207, 138, .7)) } }
.title .t1, .title .t2 { display: inline-block; white-space: nowrap; }
.title .t1 { margin-right: .32em; }
.sword-i { width: .27em; height: .9em; vertical-align: -.077em; margin: 0 .035em 0 .02em; color: var(--key); overflow: visible; }
.sword-i .glint { transform: translateY(0); }
.sword-i.glint-run .glint { animation: glint .7s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes glint { to { transform: translateY(1000px); } }
.hero .lede { margin: 14px auto 0; max-width: 30em; font: italic 400 clamp(19px, 1.9vw, 26px)/1.35 var(--serif); color: var(--text); text-shadow: 0 2px 22px #000; }
.cue { position: absolute; left: 50%; bottom: max(4svh, calc(env(safe-area-inset-bottom) + 20px)); transform: translateX(-50%); margin: 0;
  display: grid; justify-items: center; gap: 10px; font: 400 10px/1 var(--sans); letter-spacing: .4em; text-transform: uppercase;
  color: var(--muted); opacity: calc(1 - var(--name, 0) * 3); animation: up 1s 1.4s ease both; }
.cue i { width: 1px; height: 40px; background: linear-gradient(var(--key), transparent); animation: drip 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes up { from { opacity: 0; transform: translate(-50%, 14px) } to { transform: translate(-50%, 0) } }
@keyframes drip { 0% { transform: scaleY(0) } 50% { transform: scaleY(1) } 100% { transform: scaleY(1); opacity: 0 } }

/* desktop: the wide frame starts pushed in on him (scale 1.45, his face centred) and dollies back at the name beat, which
   leaves his figure in the left third and the name on the dark wall at right (cut-2 P1-b). js/hero.js drives it; these
   are its start values so first paint matches. */
@media (min-width: 701px) {
  .hero-frame { --fx: 38%; --fy: 27.6%; --cone-angle: 118deg; }
  .hero-copy { left: 56%; right: var(--gutter); bottom: auto; top: 30svh; align-items: flex-start; text-align: left; padding: 0; }
  .title { font-size: clamp(56px, 7.4vw, 128px); line-height: 1.02; }
  .title .t1, .title .t2 { display: block; }
  .title .t1 { margin-right: 0; }
  .hero .lede { margin: 18px 0 0; }
}


/* ---------- the cold open: storm, strike, sword, name ---------- */
.hero-storm { position: absolute; inset: 0; pointer-events: none; }
.hero-storm .sky { position: absolute; left: 0; top: 0; width: 100%; height: 60%; }
.clouds { position: absolute; inset: -4% -4% 0 -4%; background: url(../img/hero/storm-clouds.webp) center top / 100% 70% no-repeat; opacity: 0;
  -webkit-mask-image: linear-gradient(#000 35%, transparent 72%); mask-image: linear-gradient(#000 35%, transparent 72%);
  animation: clouds 2.6s linear both, drift 2.6s linear both; }
/* WCAG 2.3.1 (fm-ux-mobile P0, 2026-10-17): at most 3 flashes in any second. Two sky flashes, 0.22 s and 0.91 s, plus the distant fork;
   the 0.57 s pair and the 1.04 s re-flash are gone, and every decay is one-way */
@keyframes clouds { 0%, 7.6% { opacity: .08 } 8.4% { opacity: .75 } 12% { opacity: .12 }
  34.6% { opacity: .14 } 35% { opacity: 1 } 40% { opacity: .5 } 55% { opacity: .22 } 77% { opacity: .1 } 100% { opacity: 0 } }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1.06) } to { transform: translate3d(-2%, 1%, 0) scale(1) } }
.fork { fill: none; stroke: #dfe8ff; stroke-width: 1.6; opacity: 0; filter: drop-shadow(0 0 5px #b8ccff) drop-shadow(0 0 18px #7f9fff); }
.f1 { animation: fork .45s .2s linear both; }
.f2 { animation: fork .45s .55s linear both; }
@keyframes fork { 0% { opacity: 0 } 6% { opacity: .55 } 14% { opacity: .1 } 20% { opacity: .4 } 100% { opacity: 0 } }   /* distant: the main strike is the one that matters */
/* the strike lands on the sword-I of the name (Pete: "lighting hitting the spot where the brock pierce name was");
   the sword forges out of the impact, the letters build outward from it, and the name's light falls on him */
.sword-wrap { position: relative; display: inline-block; --cw: 2.6em; }
.strike-at { position: absolute; left: 50%; top: -.02em; width: 0; height: 0; pointer-events: none; }
.strike { position: absolute; left: calc(var(--cw) * -.5); top: calc(var(--cw) * -7.29);   /* path ends at y=-62 of 200 units = .31cw: land it ON the pommel */ width: calc(var(--cw) * 2.8); height: calc(var(--cw) * 7.3); overflow: visible; }
.zap { fill: none; stroke: #fff; stroke-width: 6; stroke-linejoin: round; filter: drop-shadow(0 0 10px #cfe0ff) drop-shadow(0 0 26px #8fb0ff);
  stroke-dasharray: 3000; stroke-dashoffset: 3000; opacity: 0; animation: strike .7s .9s cubic-bezier(.3, 0, .2, 1) both; }
.zap.b1, .zap.b2 { stroke-width: 3.4; animation-delay: .93s; }
.zap.halo { stroke: #bcd0ff; stroke-width: 26; opacity: 0; filter: blur(6px); }
.impact { position: absolute; left: calc(var(--cw) * -.8); top: calc(var(--cw) * -.6); width: calc(var(--cw) * 1.6); height: calc(var(--cw) * 1.6); border-radius: 50%;
  background: radial-gradient(closest-side, #fff 0%, rgba(214, 228, 255, .85) 22%, rgba(150, 175, 255, .25) 55%, transparent); opacity: 0; transform: scale(.2);
  animation: impact .9s .96s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes impact { 0% { opacity: 0; transform: scale(.2) } 8% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(1.6) } }
/* the bolt draws down in ~70 ms, LANDS on the sword and holds there (flickering) while the sword forges out of the impact */
@keyframes strike { 0% { opacity: 1; stroke-dashoffset: 3000 } 10% { stroke-dashoffset: 0; opacity: 1 } 22% { opacity: .7 } 28% { opacity: 1 } 40% { opacity: .9 } 100% { opacity: 0; stroke-dashoffset: 0 } }
.flash { position: absolute; inset: 0; background: radial-gradient(80% 60% at 30% 10%, rgba(214, 226, 255, .55), rgba(140, 160, 220, .12) 60%, transparent);
  opacity: 0; animation: flash 2.6s linear both; }
@keyframes flash { 0%, 7.6% { opacity: 0 } 8.4% { opacity: .3 } 11% { opacity: 0 }
  34.6% { opacity: 0 } 35% { opacity: .9 } 39% { opacity: .35 } 47% { opacity: 0 } 100% { opacity: 0 } }

/* ---------- menu (phones) ---------- */
.menu-btn { display: none; }

/* ---------- stewardship ---------- */
.roles { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; }
.roles li { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 16px 0; border-top: 1px solid rgba(255, 231, 194, .14); }
.roles li:last-child { border-bottom: 1px solid rgba(255, 231, 194, .14); }
.roles b { font: 600 12px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--key); }
.roles span { font: 400 clamp(19px, 1.6vw, 23px)/1.3 var(--serif); color: var(--text); }
.side-photo { position: absolute; right: var(--gutter); top: 36svh; width: min(46vw, 640px); margin: 0; z-index: -1;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 80%, transparent), linear-gradient(transparent, #000 20%, #000 75%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 80%, transparent), linear-gradient(transparent, #000 20%, #000 75%, transparent);
  mask-composite: intersect; opacity: 0;
  transform: translateY(40px) scale(1.04); transition: opacity 1.6s ease, transform 2.2s cubic-bezier(.2, .7, .2, 1); }
.ch.in .side-photo { opacity: .82; transform: none; }
.side-photo.tall { width: min(30vw, 440px); top: 22svh; right: calc(var(--gutter) + 4vw);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent), linear-gradient(transparent, #000 8%, #000 70%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent), linear-gradient(transparent, #000 8%, #000 70%, transparent); mask-composite: intersect; }
.side-photo.bw img { filter: contrast(1.05) brightness(.9); }
@media (max-width: 700px) { .side-photo.tall { width: 78%; margin: 30px auto 0; right: auto; } }

/* stewardship: the portrait is cut out of its dark studio backdrop (Apple Vision matte, tools/seg.swift), so he stands
   in the network itself; only his legs fade into the floor */
.side-photo.tall.cut { -webkit-mask-image: linear-gradient(#000 62%, transparent 96%); mask-image: linear-gradient(#000 62%, transparent 96%);
  -webkit-mask-composite: source-over; mask-composite: add; }
.side-photo.tall.cut img { filter: contrast(1.05) brightness(.95) drop-shadow(0 0 40px rgba(0, 0, 0, .55)); }

/* civic: with 3D on, the photo lives inside the colonnade's shaft of light (world.js), so the flat copy is hidden */
.gl-on #civic .side-photo { display: none; }

/* civic headline = his 2020 campaign mark (vector from the bus-wrap print file). It arrives in hero gold, the site's one
   accent, and turns to its real red, white and blue as the chapter plays out: the only place red appears (storyboard colour rule). */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pres-h { margin: 0 0 26px; }
.pres-mark { display: block; width: min(560px, 100%); height: auto; overflow: visible; filter: drop-shadow(0 8px 30px rgba(0, 0, 0, .6)); }
.pres-mark .wm-w, .pres-mark .wm-r { fill: var(--key); transition: fill 1.6s ease .6s; }
.ch.in .pres-mark .wm-w { fill: #fff; }
.ch.in .pres-mark .wm-r { fill: #ff3333; }
@supports (animation-timeline: view()) {
  .pres-mark .wm-w { animation: pres-w linear both; animation-timeline: view(); animation-range: entry 80% cover 55%; transition: none; }
  .pres-mark .wm-r { animation: pres-r linear both; animation-timeline: view(); animation-range: entry 80% cover 55%; transition: none; }
  @keyframes pres-w { from { fill: #e8c48a } 60% { fill: #f6e9cf } to { fill: #ffffff } }
  @keyframes pres-r { from { fill: #e8c48a } 60% { fill: #f08a5a } to { fill: #ff3333 } }
}
.pres-sub { display: block; margin-top: 22px; font: 400 clamp(30px, 3.6vw, 52px)/1.05 var(--serif); color: var(--text); }
.pres-sub em { color: var(--key-hot); }

/* tether: the copy holds at the centre of the screen while the morph plays (Pete: "stop moving when it reaches the center") */
#tether, #screen { min-height: 260svh; }
#tether .copy { position: sticky; top: 30svh; }   /* chapter I is a timeline now (2026-10-22): its copy scrolls with the page */
.usdt-bit { position: fixed; z-index: 4; width: 7px; height: 7px; margin: -3px 0 0 -3px; pointer-events: none; border-radius: 1px;
  background: #3fd3a4; box-shadow: 0 0 10px rgba(63, 211, 164, .8); }
.ticker { transition: opacity .25s, transform .25s; }
.ticker.gone { opacity: 0; transform: scale(1.3); }
/* tether: the one line, set as a credit with the ticker beside the name */
.tether-line { font: 400 clamp(20px, 1.8vw, 26px)/1.4 var(--sans); letter-spacing: .02em; }
.tether-line b { font-weight: 600; color: var(--key-hot); }
.ticker { display: inline-block; margin-left: .5em; padding: .12em .5em; border: 1px solid rgba(38, 161, 123, .7); border-radius: 4px;
  font: 600 .62em/1.4 var(--sans); letter-spacing: .14em; color: #8fe0c2; vertical-align: .18em; }

/* ---------- measure ---------- */
.statement { margin: 0 auto; font: 400 clamp(34px, 5.2vw, 78px)/1.12 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.statement .w { color: rgba(244, 239, 231, .16); transition: color .5s ease, text-shadow .5s ease; }
.statement .w.lit { color: var(--text); }
.statement .g .w.lit, .statement .w.g.lit { color: var(--key-hot); font-style: italic; text-shadow: 0 0 30px rgba(255, 207, 138, .45); }
.attrib { margin: 34px 0 0; font: 400 12px/1 var(--sans); letter-spacing: .34em; text-transform: uppercase; color: var(--muted); }
.attrib::before { content: ""; display: inline-block; width: 36px; height: 1px; background: var(--key); vertical-align: middle; margin-right: 14px; }

/* ---------- onward ---------- */
.onward { min-height: 190svh; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; padding-top: 18svh; }
.onward-photo { position: relative; margin: 0 0 -18svh; width: min(1180px, 100%); opacity: 0; transform: scale(1.06); transition: opacity 1.8s ease, transform 2.6s cubic-bezier(.2, .7, .2, 1);
  /* Pete: the photo's side edges read as a hard box - feather all four edges into the tunnel (two linear masks, intersected) */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(180deg, transparent, #000 12%, #000 80%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(180deg, transparent, #000 12%, #000 80%, transparent);
  mask-composite: intersect; }
.onward.in .onward-photo { opacity: .9; transform: none; }
.onward .copy { max-width: 760px; }
.onward h2 { font-size: clamp(64px, 11vw, 170px); }
.onward h2 .lead, .onward h2 .punch { display: inline; }
.sign { margin: 34px 0 30px; font: 800 clamp(28px, 3.4vw, 46px)/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--key-hot); }
.bolt { display: inline-block; filter: drop-shadow(0 0 16px rgba(255, 207, 138, .9)); animation: flick 3.6s infinite; }
@keyframes flick { 0%, 86%, 100% { opacity: 1 } 88% { opacity: .3 } 90% { opacity: 1 } 92% { opacity: .5 } }
.links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.links a { display: inline-block; padding: 13px 22px; border: 1px solid rgba(255, 231, 194, .3); border-radius: 999px; text-decoration: none;
  font: 400 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--text); background: rgba(3, 5, 11, .5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: all .3s; }
.links a:hover, .links a:focus-visible { border-color: var(--key); color: var(--key-hot); box-shadow: 0 0 24px rgba(255, 207, 138, .25); }
.advisory { max-width: 520px; margin: 30px auto 0; padding: 14px 22px; border: 1px solid rgba(255, 231, 194, .18); border-radius: 18px;
  font: 400 13px/1.6 var(--sans); letter-spacing: .02em; color: rgba(255, 244, 228, .78); background: rgba(3, 5, 11, .62);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }   /* same glass as .links: the tunnel behind it runs near-white on desktop; anti-scam notice from Giant's BP3 (Pete 2026-10-20) */
.advisory strong { color: var(--text); font-weight: 600; }
.foot { position: relative; z-index: 3; padding: 40px var(--gutter) 56px; text-align: center; font: 400 11px/1.6 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }

/* ---------- phones ---------- */
@media (max-width: 700px) {
  body { font-size: 16px; }
  .ch { min-height: 150svh; padding: 22svh 22px 24svh; }
  .ch.right { justify-content: flex-start; }
  .tether-poster { background-image: url(../img/tether-poster-m.webp); }
  .ch .copy::before { inset: -6% -14px; border-radius: 28px; background: rgba(3, 5, 11, .72); box-shadow: 0 0 40px 32px rgba(3, 5, 11, .72); }   /* fm-ux-mobile P1 00018: an even ink panel, feathered by its shadow; the radial left the copy's corners bare, so tiles, coins and cubes read through the kicker and body */
  .topbar { padding: max(12px, env(safe-area-inset-top)) 16px 12px; }
  .mark { width: 44px; height: 44px; background: rgba(3, 5, 11, .82); }   /* fm-ux-mobile P2 00018: copy scrolled through the empty circles */
  .menu-btn { display: grid; place-content: center; gap: 7px; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 231, 194, .35);
    border-radius: 50%; background: rgba(3, 5, 11, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; z-index: 2; }
  .menu-btn i { display: block; width: 16px; height: 1.5px; background: var(--key-hot); transition: transform .22s; }
  .menu-open .menu-btn i:first-child { transform: translateY(4.25px) rotate(45deg); }
  .menu-open .menu-btn i:last-child { transform: translateY(-4.25px) rotate(-45deg); }
  .nav { position: fixed; inset: 0; z-index: 1; flex-direction: column; justify-content: center; align-items: center; gap: 8px;
    background: rgba(3, 5, 11, .96); opacity: 0; visibility: hidden; transition: opacity .16s, visibility 0s .16s; }
  .menu-open .nav { opacity: 1; visibility: visible; transition: opacity .22s; }
  .nav a { display: grid; place-items: center; min-height: 48px; min-width: 200px; font-size: 14px; letter-spacing: .3em;
    opacity: 0; transform: translateY(8px); transition: opacity .16s, transform .16s; }
  .menu-open .nav a { opacity: 1; transform: none; transition: opacity .22s, transform .22s; }
  .menu-open .nav a:nth-child(2) { transition-delay: .04s; } .menu-open .nav a:nth-child(3) { transition-delay: .08s; }
  html.menu-open { overflow: hidden; }
  .rail { display: none; }
  .ch.hero { height: 260svh; }
  .cue { display: none; }   /* 100 stage + 160 travel */
  .hero-frame { --fy: 26%; }
  .hero-copy { bottom: max(13svh, calc(env(safe-area-inset-bottom) + 72px)); padding: 0 16px; z-index: 1; isolation: isolate; }   /* clear of Safari's floating bar (Pete), 6% lower than before (designer: no type over the hands) */
  .hero-frame { translate: 0 -6%; }   /* designer P2: the picture 6% up so his hands end above the name; the head stays clear of the nav */
  .hero-stage { background: var(--ink); }   /* the lifted picture leaves a strip at the foot: ink, not the chapter behind */
  #tether .copy { top: 56svh; }   /* phone: the copy pins under the shape (designer P2) */
  .hero-copy::before { content: ""; position: absolute; inset: -12% -10% 10%; z-index: -1; pointer-events: none;
    background: radial-gradient(60% 55% at 50% 40%, rgba(3, 5, 11, .5), transparent 72%); }   /* designer's fallback: knuckles that still touch the cap sit in shadow */
  .zap.halo { display: none; }   /* iOS Safari ignores the blur filter on SVG strokes, so the halo drew as a fat flat band (Pete: "doesnt need to be fat on iphone"); the thin core alone reads */
  .hero-copy .kicker { letter-spacing: .14em; font-size: 11px; margin-bottom: 10px; }   /* fm-ux-mobile P2 00018: 10px spaced caps on a photo was too small */
  .title { font-size: clamp(40px, 13.4vw, 64px); line-height: 1.04; }
  .title .t1, .title .t2 { display: block; }
  .title .t1 { margin-right: 0; }
  .hero .lede { font-size: 18px; margin-top: 10px; }
  .links a { min-height: 44px; display: inline-grid; place-items: center; }
  .side-photo { position: relative; right: auto; top: auto; width: 100%; margin-top: 30px; z-index: 0; }
  .ch.wide { flex-direction: column; }
  .onward-photo { margin-bottom: -7svh; }   /* fm-ux-mobile P2 00018: THE LESSON kicker sat on his face; the copy now starts below it */
}

@media (max-width: 370px) {   /* designer 2026-10-18: at 360 the fingertips still read between R and O - a deeper pool, reaching ~12px higher */
  .hero-copy::before { inset: calc(-12% - 12px) -10% 10%; background: radial-gradient(60% 55% at 50% 40%, rgba(3, 5, 11, .62), transparent 72%); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .copy > *, .side-photo, .onward-photo { opacity: 1 !important; transform: none !important; }
  .pres-mark .wm-w { fill: #fff; } .pres-mark .wm-r { fill: #ff3333; }
  .statement .w { color: var(--text); }
  .grain { display: none; }
  .ch.hero { height: 100svh; }
  .hero-dark, .hero-veil, .cue, .hero-gl, .hero-storm .sky, .clouds, .strike, .flash { display: none; }
  .title .l, .sword-i, .title::before { opacity: 1; filter: none; transform: none; }
  .hero-copy { opacity: 1; transform: none; }
}

/* ---------- film-frame lightbox (Pete 2026-10-21): photo frames enlarge; company frames add what the company is and Brock's role ---------- */
.hint { margin-top: 18px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--key); opacity: .8; }
html:not(.gl-on) .hint { display: none; }
@media (pointer: fine) { .hint { font-size: 0; } .hint::after { content: "Click a frame to look closer"; font-size: 12px; } }
.lightbox { padding: 0; border: 0; background: transparent; color: var(--text); max-width: min(880px, calc(100vw - 32px)); width: 100%; max-height: calc(100dvh - 32px); overflow: auto; }
.lightbox::backdrop { background: rgba(3, 5, 11, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lightbox[open] { animation: lb-in .28s cubic-bezier(.2, .7, .2, 1); }
@keyframes lb-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.lb-card { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); background: var(--night);
  border: 1px solid rgba(255, 231, 194, .22); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 90px rgba(0, 0, 0, .6), 0 0 40px rgba(255, 207, 138, .08); }
.lb-pic { aspect-ratio: 512 / 366; background: var(--ink) url(../img/screens-atlas.webp) no-repeat; background-size: 800% 600%; align-self: center; clip-path: inset(6px); }   /* the scaled atlas bleeds a sliver of the neighbouring tile at the edge */
.lb-text { padding: 28px 30px 30px; align-self: center; }
.lb-sub { margin: 0 0 6px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--key); }
.lb-text h3 { margin: 0 0 12px; font: 500 clamp(30px, 4vw, 40px)/1.1 var(--serif); color: var(--key-hot); }
.lb-about { margin: 0; color: var(--muted); font-size: 16px; }
.lb-role { display: none; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 231, 194, .16); }
.has-role .lb-role { display: block; }
.lb-k { margin: 0 0 4px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.lb-r { margin: 0; font-size: 16px; color: var(--text); }
.photo-only .lb-card { grid-template-columns: 1fr; }
.photo-only .lb-text { display: none; }
.lb-x { position: absolute; top: 10px; right: 10px; z-index: 1; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 231, 194, .3);
  background: rgba(6, 10, 22, .7); color: var(--key-hot); font: 300 26px/1 var(--sans); cursor: pointer; }
.lb-x:hover, .lb-x:focus-visible { border-color: var(--key); outline: none; }
.lb-open body { overflow: hidden; }
@media (max-width: 700px) { .lb-card { grid-template-columns: 1fr; } .lb-text { padding: 20px 20px 24px; } }
@media (prefers-reduced-motion: reduce) { .lightbox[open] { animation: none; } }
.lb-type { display: none; height: 100%; place-content: center; text-align: center; padding: 24px; margin: 6px; border: 1px solid rgba(255, 207, 138, .45); }
.typeset .lb-pic { background-image: none; clip-path: none; }
.typeset .lb-type { display: grid; }
.lb-tt { margin: 0; font: 500 clamp(30px, 4.2vw, 44px)/1.1 var(--serif); color: var(--key-hot); }
.lb-ts { margin: 12px 0 0; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--key); }
/* keyboard / screen-reader way in to the frames (designer P1): hidden until a button in it has focus */
.frame-list { list-style: none; margin: 0; padding: 0; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.frame-list:focus-within { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.frame-list button { font: 400 13px/1 var(--sans); color: var(--key-hot); background: var(--glass); border: 1px solid rgba(255, 231, 194, .3); border-radius: 999px; padding: 10px 14px; min-height: 44px; cursor: pointer; }
.frame-list button:focus-visible { outline: 2px solid var(--key); outline-offset: 2px; }
@media (max-width: 480px) { .lb-x { top: 22px; right: 22px; } }   /* clear of the tile's gold frame line (designer P2-4) */


/* Chapter I (Pete 2026-10-22): the corporate and political record on the left, a carousel of photographs on the right */
.ch.timeline { display: block; min-height: auto; padding: 22svh var(--gutter) 18svh; }
.ch.timeline .copy { max-width: 620px; margin-bottom: 44px; }
.tl { position: relative; display: grid; grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); gap: 48px; align-items: start; }
.tl-eras { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 1px solid rgba(255, 255, 255, .16); }
.tl-eras li { margin: 0; }
.tl-era { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; width: 100%; padding: 10px; background: none; border: 0; color: var(--text); text-align: left; cursor: pointer; position: relative; font: inherit; border-radius: 8px; }
.tl-era::before { content: ""; position: absolute; left: -24px; top: 50%; width: 11px; height: 11px; margin-top: -6px; border-radius: 50%; background: var(--ink); border: 1px solid var(--key); }
.tl-era:hover, .tl-era:focus-visible { background: rgba(255, 255, 255, .05); outline: none; }
.tl-era:hover::before, .tl-era:focus-visible::before { background: var(--key); box-shadow: 0 0 12px var(--key); }
.tl-plaque { display: block; width: 84px; aspect-ratio: 512 / 366; border: 1px solid rgba(255, 255, 255, .16); border-radius: 4px; overflow: hidden; background: rgba(8, 10, 18, .85); }
.tl-plaque.logo { background: url(../img/screens-atlas.webp) no-repeat; background-size: 800% 600%; clip-path: inset(2px); }
.tl-plaque.type { display: grid; place-content: center; padding: 4px; text-align: center; font: 400 12px/1.1 var(--serif); }
.tl-txt { display: grid; gap: 2px; min-width: 0; }
.tl-when { font: 400 11px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--key); }
.tl-title { font: 400 21px/1.15 var(--serif); }
.tl-line { font: 300 14px/1.45 var(--sans); color: var(--muted); }
.tl-left .hint { margin: 14px 0 0 18px; }
.tl-stage { position: relative; min-width: 0; position: sticky; top: 14svh; }
.tl-rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 12px; overscroll-behavior-x: contain; }
.tl-rail::-webkit-scrollbar { display: none; }
.tl-card { flex: none; width: min(380px, 70%); aspect-ratio: 512 / 366; padding: 0; border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; overflow: hidden; background: rgba(8, 10, 18, .85); cursor: zoom-in; scroll-snap-align: start; transition: transform .25s, border-color .25s; }
.tl-card:hover, .tl-card:focus-visible { transform: translateY(-3px); border-color: var(--key); outline: none; }
.tl-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-tile { display: block; width: 100%; height: 100%; background: url(../img/screens-atlas.webp) no-repeat; background-size: 800% 600%; clip-path: inset(4px); }
.tl-nav { display: flex; gap: 10px; margin-top: 6px; }
.tl-nav button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(8, 10, 18, .6); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; }
.tl-nav button:hover, .tl-nav button:focus-visible { border-color: var(--key); outline: none; }
.lightbox.ig .lb-pic { aspect-ratio: 1; clip-path: none; }
.lb-link { color: var(--key); font-size: 14px; }
@media (max-width: 860px) {
  .tl { grid-template-columns: 1fr; gap: 28px; }
  .tl-stage { position: relative; top: auto; order: -1; }
  .tl-card { width: 82%; }
  .tl-era { grid-template-columns: 72px 1fr; }
  .tl-plaque { width: 72px; }
}
.tl-eras li.innov .tl-era::before { background: var(--key); box-shadow: 0 0 10px var(--key); }
.tl-eras li.innov .tl-title { color: var(--key-hot); }
.tl-first { display: inline-block; justify-self: start; margin-top: 6px; padding: 3px 10px 3px 8px; border: 1px solid rgba(255, 207, 138, .45); border-radius: 999px; font: 400 12px/1.4 var(--sans); color: var(--key); background: rgba(255, 207, 138, .07); }
.tl-first::before { content: "★ "; }
/* Pete 2026-10-22: the round spiral of images is back on the right; the record stays on the left */
.tl { grid-template-columns: minmax(280px, 440px); }
.ch.timeline { min-height: 170svh; }
.lb-cap { display: none; margin: 4px 6px 0; font: 300 15px/1.5 var(--sans); color: var(--text); }
.lightbox.captioned .lb-cap { display: block; }