/* ============================================================
   KINETIC EDITORIAL — a Triangle concept (№2)
   Cream broadsheet · poster typography · triangle-wave graphics
   ============================================================ */

@font-face { font-family: "Elsie"; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/elsie-400.woff2") format("woff2"); }
@font-face { font-family: "Londrina Solid"; font-weight: 900; font-display: swap;
  src: url("/assets/fonts/londrinasolid-900.woff2") format("woff2"); }
@font-face { font-family: "Londrina Solid"; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/londrinasolid-400.woff2") format("woff2"); }
@font-face { font-family: "Gabriela"; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/gabriela-400.woff2") format("woff2"); }

:root {
  --page: #FFFFF4;
  --ink: #131010;
  --ink-soft: #4A463F;
  --green: #182D09;
  --crimson: #B10041;
  --ochre: #9E3131;
  --cream: #FFFFE4;
  --cream-soft: rgba(255, 255, 228, .78);
  --lond: "Londrina Solid", "Arial Narrow", sans-serif;
  --elsie: "Elsie", Georgia, serif;
  --gab: "Gabriela", Georgia, serif;
  --pad-x: clamp(22px, 6.5vw, 96px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--gab); color: var(--ink); background: var(--page);
  overflow-x: hidden; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--crimson); outline-offset: 3px; }
::selection { background: var(--crimson); color: var(--cream); }

.skip-link {
  position: fixed; top: -60px; left: 24px; z-index: 60;
  background: var(--green); color: var(--cream);
  font-family: var(--lond); font-weight: 400; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  padding: 10px 18px; transition: top .2s;
}
.skip-link:focus { top: 16px; }

/* ---------- letterpress paper grain ---------- */
body::after {
  content: ""; position: fixed; inset: -40px; z-index: 46; pointer-events: none;
  mix-blend-mode: multiply; opacity: .1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size: 240px;
}

/* ---------- cross-page curtain: navigation wipes through the brand green ---------- */
@view-transition { navigation: auto; }
::view-transition { background: var(--green); }
::view-transition-old(root) { animation: vt-leave .22s ease-in both; }
::view-transition-new(root) { animation: vt-arrive .34s ease-out .16s both; }
@keyframes vt-leave { to { opacity: 0; transform: translateY(-14px); } }
@keyframes vt-arrive { from { opacity: 0; transform: translateY(14px); } }

/* ---------- roundel flick (click it) ---------- */
.roundel { pointer-events: auto; }
.roundel.flick { animation: flick .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes flick { to { transform: rotate(360deg); } }

/* ---------- print furniture ---------- */
.crops {
  position: fixed; inset: 12px; z-index: 50; pointer-events: none;
  --c: rgba(24, 45, 9, .5);
  background:
    linear-gradient(var(--c), var(--c)) left top    / 20px 2px,
    linear-gradient(var(--c), var(--c)) left top    / 2px 20px,
    linear-gradient(var(--c), var(--c)) right top   / 20px 2px,
    linear-gradient(var(--c), var(--c)) right top   / 2px 20px,
    linear-gradient(var(--c), var(--c)) left bottom / 20px 2px,
    linear-gradient(var(--c), var(--c)) left bottom / 2px 20px,
    linear-gradient(var(--c), var(--c)) right bottom/ 20px 2px,
    linear-gradient(var(--c), var(--c)) right bottom/ 2px 20px;
  background-repeat: no-repeat;
}

/* ---------- masthead bar ---------- */
.mast {
  position: fixed; top: 0; left: 0; right: 0; z-index: 48;
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 34px;
}
.mast-lockup { display: flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: var(--elsie); font-size: 17px; color: var(--green); }
.mast-nav ul { display: flex; list-style: none; gap: clamp(14px, 2.4vw, 34px); }
.mast-nav a { font-family: var(--lond); font-weight: 400; font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase; text-decoration: none; color: var(--ink-soft);
  border-bottom: 2px solid transparent; transition: border-color .25s, color .25s; }
.mast-nav a:hover, .mast-nav a:focus-visible { border-bottom-color: var(--crimson); color: var(--ink); }

/* on green sections the fixed chrome flips to cream */
html.on-green .crops { --c: rgba(255, 255, 228, .5); }
html.on-green .mast-lockup { color: var(--cream); filter: brightness(0) saturate(100%) invert(97%) sepia(9%) saturate(414%) hue-rotate(9deg) brightness(105%) contrast(103%); }
html.on-green .mast-nav a { color: var(--cream-soft); }

/* ---------- shared voices ---------- */
.kicker {
  font-family: var(--lond); font-weight: 400; font-size: clamp(12px, 1.3vw, 15px);
  letter-spacing: .28em; text-transform: uppercase; color: var(--ink-soft);
}
.kicker--cream { color: var(--cream-soft); }
.outline { color: transparent; -webkit-text-stroke: 2.5px var(--green); }
.outline-cream { color: transparent; -webkit-text-stroke: 2.5px var(--cream); }
@supports not ((-webkit-text-stroke: 1px #fff) or (text-stroke: 1px #fff)) {
  .outline { color: var(--green); }
  .outline-cream { color: var(--cream); }
}
.crimson { color: var(--crimson); }
.hl {
  background: var(--crimson); color: var(--cream);
  padding: .02em .16em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* reveal system — armed only when JS runs */
html.js .rv { opacity: 0; transform: translateY(34px); transition: opacity .7s ease, transform .9s var(--ease); }
html.js .rv.in { opacity: 1; transform: none; }

/* ============ 01 · MASTHEAD ============ */
.masthead {
  min-height: 100vh; min-height: 100svh; position: relative;
  display: flex; flex-direction: column; justify-content: center;
  padding: 16vh var(--pad-x) 10vh;
}
.poster {
  font-family: var(--lond); font-weight: 900; text-transform: uppercase;
  color: var(--green); line-height: .88; letter-spacing: .005em;
}
.p-line { display: block; }
.p-1 { font-size: clamp(64px, 13.5vw, 190px); }
.p-2 { font-size: clamp(38px, 7.6vw, 108px); }
.p-3 { font-size: clamp(52px, 10.8vw, 152px); }
html.js .p-line { transition-delay: .1s; }
html.js .p-2 { transition-delay: .22s; }
html.js .p-3 { transition-delay: .34s; }
.poster .solid { color: var(--green); }
.poster .outline { -webkit-text-stroke-width: 3px; }
.roundel {
  position: absolute; right: clamp(20px, 8vw, 130px); top: clamp(88px, 14vh, 150px);
  width: clamp(110px, 15vw, 200px); aspect-ratio: 1;
}
.roundel-spin { position: absolute; inset: 0; animation: spin 26s linear infinite; }
.roundel-text { font-family: var(--lond); font-weight: 400; font-size: 15.5px;
  letter-spacing: .3em; text-transform: uppercase; fill: var(--green); }
.roundel-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 40%; height: auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.mast-sub { max-width: 44ch; color: var(--ink-soft); margin-top: 4.5vh; font-size: clamp(14px, 1.5vw, 17px); }
.mast-cue { position: absolute; bottom: 34px; right: var(--pad-x);
  font-family: var(--lond); font-weight: 400; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- marquee band ---------- */
.marquee { overflow: hidden; background: var(--green); border-block: 3px solid var(--green); }
.marquee-track { display: flex; white-space: nowrap; width: max-content; animation: marq 32s linear infinite; }
.marquee-track span {
  font-family: var(--lond); font-weight: 400; text-transform: uppercase;
  font-size: clamp(26px, 4vw, 52px); line-height: 1.7; color: var(--cream); letter-spacing: .04em;
}
@keyframes marq { to { transform: translateX(-50%); } }

/* ============ 02 · MANIFESTO ============ */
.manifesto { padding: 16vh var(--pad-x); }
.manifesto .kicker { margin-bottom: 7vh; }
.m-line {
  font-family: var(--lond); font-weight: 400; text-transform: uppercase;
  font-size: clamp(26px, 4.6vw, 62px); line-height: 1.14; color: var(--green);
  max-width: 22ch; margin-bottom: 4.5vh;
}
.m-line em { font-style: normal; font-weight: 900; }
.m-stack { list-style: none; margin: 7vh 0; }
.m-step { font-size: clamp(20px, 3.2vw, 42px); margin-bottom: 3vh; max-width: none; }
.m-step:nth-child(1) { margin-left: 4vw; }
.m-step:nth-child(2) { margin-left: 11vw; }
.m-step:nth-child(3) { margin-left: 18vw; }
.m-step:nth-child(4) { margin-left: 25vw; }
.m-step::before { content: "→ "; color: var(--crimson); font-weight: 900; }
.scrib { position: relative; display: inline-block; }
.scrib svg { position: absolute; left: 0; right: 0; bottom: -.28em; width: 100%; height: .32em; overflow: visible; }
.scrib path { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.js .rv.in .scrib path, html:not(.js) .scrib path { transition: stroke-dashoffset 1.1s var(--ease) .5s; stroke-dashoffset: 0; }
.m-final { position: relative; margin-top: 10vh; display: flex; align-items: center; gap: clamp(20px, 4vw, 60px); flex-wrap: wrap; }
.m-big {
  font-family: var(--lond); font-weight: 900; text-transform: uppercase;
  font-size: clamp(34px, 6.4vw, 88px); line-height: .95; color: var(--green); max-width: 14ch;
}
.stamp {
  flex: none; width: clamp(110px, 13vw, 170px); aspect-ratio: 1; border-radius: 50%;
  border: 3px dashed var(--crimson); color: var(--crimson);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--lond); font-weight: 900; font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1; text-transform: uppercase; letter-spacing: .06em;
  transform: rotate(-12deg);
}
html.js .rv.in .stamp { animation: settle .45s ease-out .5s backwards; }
@keyframes settle { from { transform: rotate(-9deg) scale(1.04); opacity: 0; } to { transform: rotate(-12deg) scale(1); opacity: 1; } }

.m-aside { margin-top: 5vh; color: var(--ink-soft); font-size: clamp(14px, 1.5vw, 16px); }
.m-aside a { color: var(--crimson); }

/* ---------- wave rule divider: draws itself on arrival ---------- */
.waverule { padding: 6vh var(--pad-x); }
.waverule svg { width: min(100%, 900px); height: auto; margin: 0 auto; opacity: .85; }
html.js .waverule svg { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.js .waverule.drawn svg { animation: rule-draw 1.4s ease-out both; }
@keyframes rule-draw { to { stroke-dashoffset: 0; } }

/* ============ 03 · THE INDEX ============ */
.index { padding: 10vh var(--pad-x) 14vh; }
.index-h2 {
  font-family: var(--lond); font-weight: 900; text-transform: uppercase; color: var(--green);
  font-size: clamp(40px, 7vw, 96px); line-height: .92; margin: 3vh 0 7vh;
}
.idx { display: block; }
.idx-row {
  display: flex; align-items: center; gap: clamp(14px, 2.5vw, 30px);
  padding: clamp(14px, 2.2vh, 24px) 10px;
  border-bottom: 3px solid var(--green); text-decoration: none;
  transition: background .25s, padding-left .35s var(--ease);
}
.idx-row:first-child { border-top: 3px solid var(--green); }
.idx-num { font-family: var(--lond); font-weight: 400; font-size: clamp(16px, 2vw, 24px); color: var(--crimson); }
.idx-name {
  font-family: var(--lond); font-weight: 900; text-transform: uppercase;
  font-size: clamp(30px, 5vw, 64px); line-height: 1; color: var(--green);
}
.idx-dots { flex: 1; border-bottom: 3px dotted rgba(24, 45, 9, .4); transform: translateY(-.3em); }
.idx-glyph { width: clamp(44px, 5.5vw, 72px); height: auto; flex: none;
  transform: rotate(-6deg) scale(.92); transition: transform .35s var(--ease); }
.idx-row:hover, .idx-row:focus-visible { background: var(--green); padding-left: 26px; }
.idx-row:hover .idx-name, .idx-row:focus-visible .idx-name { color: var(--cream); }
.idx-row:hover .idx-num, .idx-row:focus-visible .idx-num { color: var(--cream); }
.idx-row:hover .idx-dots, .idx-row:focus-visible .idx-dots { border-color: rgba(255, 255, 228, .5); }
.idx-row:hover .idx-glyph, .idx-row:focus-visible .idx-glyph { transform: rotate(0deg) scale(1.05); --gi: var(--cream); }

/* ============ 04 · CHAPTER PLATES ============ */
/* each chapter is a full page that the next slides over — leafing through the
   edition. Pure CSS sticky stacking: same on desktop, mobile, no-JS, reduced-motion. */
.spread {
  position: -webkit-sticky; position: sticky; top: 0;
  min-height: 100vh; min-height: 100svh;
  overflow: hidden; /* watermarks bleed past the edge by design — clip at the plate */
  display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 44%);
  justify-content: space-between; align-items: center;
  padding: 10vh var(--pad-x);
  background: var(--page);
  border-top: 3px solid var(--green);
  box-shadow: 0 -20px 48px rgba(24, 45, 9, .12);
}

.spread-num { position: relative; }
.num-photo {
  font-family: var(--lond); font-weight: 900; line-height: .8;
  font-size: clamp(190px, 27vw, 420px);
  background-size: cover; background-position: center;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
@supports not (background-clip: text) { .num-photo { color: var(--green); background-image: none !important; } }
.spread-glyph {
  position: absolute; width: clamp(80px, 9vw, 130px); height: auto;
  right: -6%; bottom: 4%;
  background: var(--page); border: 3px solid var(--green); border-radius: 50%; padding: 14px;
}
.spread--flip .spread-copy { order: -1; }
.spread-copy h3 {
  font-family: var(--lond); font-weight: 900; text-transform: uppercase; color: var(--green);
  font-size: clamp(48px, 7.4vw, 110px); line-height: .9; margin: 2.5vh 0;
}
.spread-p { max-width: 36ch; color: var(--ink-soft); font-size: clamp(14px, 1.5vw, 17px); }
.chip {
  display: inline-block; margin-top: 3.5vh; text-decoration: none;
  font-family: var(--lond); font-weight: 400; font-size: 14px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--green); border: 3px solid var(--green); padding: 13px 26px;
  transition: background .25s, color .25s, transform .3s var(--ease);
}
.chip:hover, .chip:focus-visible { background: var(--green); color: var(--cream); transform: translateY(-3px); }
.spread-folio {
  position: absolute; bottom: 26px; left: var(--pad-x);
  font-family: var(--lond); font-weight: 400; font-size: 11px; letter-spacing: .3em;
  text-transform: uppercase; color: rgba(19, 16, 16, .45);
}

/* ============ 05 · CONVERGENCE ============ */
/* the green plate slides over the last chapter and the merge plays once, on arrival */
.conv { background: var(--green); color: var(--cream); position: relative; }
.conv-sticky {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 12vh var(--pad-x); min-height: 100vh; gap: 3vh;
}
.conv-stage { position: relative; width: min(74vw, 560px); aspect-ratio: 1.55; --cv: 0; }
/* each mark is center-anchored and travels in stage coordinates,
   so all three land exactly on the platform mark at (50%, 52%) */
.conv-tri {
  position: absolute; opacity: calc(1 - var(--cvf, 0));
  transform: translate(-50%, -50%) rotate(calc(var(--cv, 0) * var(--twist, 0deg)));
}
/* real firm marks vary in aspect — normalize by height so the trio reads balanced */
.conv-tri img { width: auto; max-width: none; height: clamp(44px, 7vw, 84px); object-fit: contain; }
.conv-tri span {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 12px; white-space: nowrap; font-family: var(--lond); font-weight: 400;
  font-size: clamp(12px, 1.4vw, 16px); letter-spacing: .14em; text-transform: uppercase; color: var(--cream-soft);
  transition: opacity .3s;
}
.conv-tri--a { --twist: 14deg;  left: calc(16% + var(--cv, 0) * 34%); top: calc(24% + var(--cv, 0) * 28%); }
.conv-tri--b { --twist: -10deg; left: 50%;                            top: calc(13% + var(--cv, 0) * 39%); }
.conv-tri--c { --twist: -14deg; left: calc(84% - var(--cv, 0) * 34%); top: calc(24% + var(--cv, 0) * 28%); }
.conv.merged .conv-tri span { opacity: 0; }
.conv-mark {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) scale(calc(.4 + var(--cv) * .6));
  opacity: var(--cv); width: 36%; height: auto;
}
.conv-h2 { font-family: var(--lond); font-weight: 900; text-transform: uppercase;
  font-size: clamp(36px, 6.4vw, 84px); line-height: .94; }
.conv-p { max-width: 52ch; color: var(--cream-soft); font-size: clamp(14px, 1.5vw, 16.5px); }
.conv-p a { color: var(--cream); }

/* ============ 06 · PROOF ============ */
.proof { padding: 16vh var(--pad-x); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin: 7vh 0 11vh; }
.stat dt { font-family: var(--lond); font-weight: 900; color: var(--green);
  font-size: clamp(52px, 7vw, 96px); line-height: .9; }
.stat .suffix { color: var(--crimson); }
.stat dd { color: var(--ink-soft); font-size: 14px; margin-top: 8px; }
.press { text-align: center; margin-bottom: 10vh; }
.press-label { font-family: var(--elsie); font-style: italic; font-size: clamp(16px, 1.9vw, 21px); margin-bottom: 4.5vh; }
/* notes on the wave: on arrival, a crimson line draws itself through the
   outlets — pulsing each as the pen passes — then the ink settles to green and stays */
.press-wave { position: relative; max-width: 1150px; margin: 0 auto; height: 220px; }
.press-curve { position: absolute; inset: 0; width: 100%; height: 100%; }
.pw-draw { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
html.js .press-wave.hit .pw-draw { animation: pw-draw 2.6s linear both; }
@keyframes pw-draw {
  0%   { stroke-dashoffset: 1; opacity: 1; stroke: #B10041; }
  70%  { stroke-dashoffset: 0; opacity: 1; stroke: #B10041; }  /* the pen reaches WWD ~1.8s in */
  100% { stroke-dashoffset: 0; opacity: 1; stroke: #182D09; }  /* the ink dries green and stays */
}
/* without JS the wall keeps a quiet printed line */
html:not(.js) .pw-draw { stroke-dashoffset: 0; opacity: 1; stroke: #182D09; }
.note {
  position: absolute; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.note i {
  width: 12px; height: 10px; background: var(--crimson); order: 3;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.note--below i { order: -1; clip-path: polygon(50% 0, 0 100%, 100% 100%); }
.note > span {
  font-family: var(--lond); font-weight: 400; font-size: clamp(15px, 1.7vw, 20px);
  letter-spacing: .08em; text-transform: uppercase; color: var(--green); white-space: nowrap;
}
html.js .press-wave.hit .note > span { animation: note-pink .55s ease var(--d, 0s) both; }
html.js .press-wave.hit .note i { animation: pin-pop .55s ease var(--d, 0s) both; }
@keyframes note-pink { 0%, 100% { color: var(--green); } 45% { color: var(--crimson); } }
@keyframes pin-pop { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.5); } }
.founder { max-width: 62ch; margin: 0 auto 7vh; text-align: center; color: var(--ink-soft); font-size: clamp(14px, 1.5vw, 16.5px); }
.proof-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 44px; }
.proof-links a {
  font-family: var(--lond); font-weight: 400; font-size: 14px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--crimson); text-decoration: none; border-bottom: 3px solid transparent; padding-bottom: 4px;
  transition: border-color .25s;
}
.proof-links a:hover, .proof-links a:focus-visible { border-bottom-color: var(--crimson); }

/* ============ 07 · INVITATION ============ */
.invite {
  padding: 14vh var(--pad-x) 16vh; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 2vh;
}
.invite-elsie { font-family: var(--elsie); font-style: italic; font-size: clamp(18px, 2.6vw, 30px); color: var(--ink-soft); }
.invite-h2 {
  font-family: var(--lond); font-weight: 900; text-transform: uppercase; color: var(--green);
  font-size: clamp(52px, 10vw, 150px); line-height: .9;
}
.btn-cta {
  display: inline-block; margin-top: 4vh; text-decoration: none;
  font-family: var(--lond); font-weight: 400; font-size: 15px; letter-spacing: .26em; text-transform: uppercase;
  background: var(--green); color: var(--cream); padding: 22px 46px;
  transition: background .25s, transform .3s var(--ease);
}
.btn-cta:hover, .btn-cta:focus-visible { background: var(--crimson); transform: translateY(-4px); }

/* ---------- footer ---------- */
.marquee--foot .marquee-track span { font-size: clamp(20px, 3vw, 38px); }
.foot-links { display: flex; justify-content: center; gap: 16px 44px; flex-wrap: wrap; padding-top: 26px; }
.foot-links a {
  font-family: var(--lond); font-weight: 400; font-size: 13px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--crimson); text-decoration: none;
  border-bottom: 3px solid transparent; padding-bottom: 4px; transition: border-color .25s; }
.foot-links a:hover, .foot-links a:focus-visible { border-bottom-color: var(--crimson); }
.foot-sig { padding: 13vh var(--pad-x) 7vh; text-align: center; }
.foot-sig-name {
  font-family: var(--elsie); font-size: clamp(48px, 8vw, 120px);
  color: var(--green); line-height: 1;
}
.foot-sig-wave { width: min(58%, 480px); height: auto; margin: 4.5vh auto 0; opacity: .85; }

.foot-legal {
  padding: 26px var(--pad-x) 34px; text-align: center;
  font-family: var(--lond); font-weight: 400; font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-soft); line-height: 2.2;
}
.foot-legal a { color: var(--ink); }

/* ============================================================
   GO-WILD LAYER
   ============================================================ */

/* ---------- load curtain ---------- */
.curtain {
  position: fixed; inset: 0; z-index: 70; background: var(--green);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
  transition: transform .65s cubic-bezier(.7, 0, .2, 1) .1s;
}
.curtain img { width: clamp(70px, 8vw, 110px); height: auto; }
html.curtain-up .curtain { transform: translateY(-101%); }
html:not(.js) .curtain { display: none; }

/* ---------- crimson scroll progress hairline ---------- */
.progressbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 55; pointer-events: none; }
.progressbar i { display: block; height: 100%; background: var(--crimson);
  transform: scaleX(0); transform-origin: left; }

/* ---------- thesis pull-quote ---------- */
.thesis { position: relative; padding: 18vh var(--pad-x); text-align: center; }
.thesis-line {
  font-family: var(--elsie); font-size: clamp(30px, 5.6vw, 76px); line-height: 1.18;
  color: var(--green); max-width: 22ch; margin: 0 auto;
}
.thesis-crimson { color: var(--crimson); }
.thesis-q {
  position: absolute; font-family: var(--elsie); font-size: clamp(120px, 18vw, 260px);
  line-height: 1; color: var(--crimson); opacity: .5; pointer-events: none; user-select: none;
}
.thesis-q--open { left: clamp(12px, 6vw, 90px); top: 4vh; }
.thesis-q--close { right: clamp(12px, 6vw, 90px); bottom: -6vh; }
.thesis-attr {
  margin-top: 4vh; font-family: var(--lond); font-weight: 400; font-size: 13px;
  letter-spacing: .26em; text-transform: uppercase; color: var(--ink-soft);
}

/* ---------- spread glyph watermark + numeral motion ---------- */
.spread-wm {
  position: absolute; z-index: 0; pointer-events: none;
  width: clamp(340px, 44vw, 700px); height: auto; opacity: .05;
  right: -6%; top: 50%; transform: translateY(-50%) rotate(-8deg);
}
.spread--flip .spread-wm { right: auto; left: -6%; transform: translateY(-50%) rotate(8deg); }
.spread-num, .spread-copy { position: relative; z-index: 1; }

/* ---------- convergence payoff ---------- */
/* dotted ink trails chart each firm's path to the mark and stay, like a printed figure */
.conv-trails { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.conv-trails path {
  fill: none; stroke: var(--cream); stroke-width: .8;
  stroke-dasharray: .035 .028;
  opacity: calc(var(--cv, 0) * .45); /* the figure inks in as the firms travel, then stays */
}
/* the merge is a one-shot eased animation, committed as the plate arrives */
.conv-tri { transition: left .9s var(--ease), top .9s var(--ease), transform .9s var(--ease), opacity .9s ease; }
.conv-mark { transition: transform .9s var(--ease), opacity .9s ease; }

/* ---------- photo development: numerals resolve as their chapter activates ---------- */
html.js .spread .num-photo {
  filter: grayscale(.75) contrast(.82); opacity: .7;
  transition: filter .9s ease, opacity .9s ease;
}
html.js .spread.live .num-photo { filter: none; opacity: 1; }

/* ---------- stages (who we serve) ---------- */
.stages { padding: 14vh var(--pad-x); }
.stages .kicker { margin-bottom: 6vh; }
.stage-list { list-style: none; counter-reset: stage; }
.stage {
  display: grid; grid-template-columns: clamp(110px, 14vw, 190px) minmax(0, 34%) 1fr auto;
  gap: clamp(14px, 3vw, 44px); align-items: center;
  padding: clamp(18px, 3.2vh, 34px) 10px; border-bottom: 3px solid var(--green);
  transition: background .25s, padding-left .35s var(--ease);
}
.stage:first-child { border-top: 3px solid var(--green); }
.stage-range { font-family: var(--lond); font-weight: 400; font-size: clamp(15px, 1.9vw, 24px); color: var(--crimson); }
.stage-name {
  font-family: var(--lond); font-weight: 900; text-transform: uppercase;
  font-size: clamp(28px, 4.4vw, 58px); line-height: 1; color: var(--green);
}
.stage-desc { color: var(--ink-soft); font-size: clamp(13px, 1.4vw, 15.5px); max-width: 44ch; }
.stage-tri { width: clamp(18px, 2.2vw, 28px); height: auto; justify-self: end;
  opacity: .55; transition: opacity .25s; }
.stage:hover { background: rgba(24, 45, 9, .05); padding-left: 24px; }
.stage:hover .stage-tri { opacity: 1; }


/* ---------- QA snap mode (#p= deep links): everything revealed, motion frozen ---------- */
html.qa-snap .rv, html.qa-snap .scrib path { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; transition: none !important; }
html.qa-snap * { animation-play-state: paused !important; }
html.qa-snap .curtain { display: none; }
html.qa-snap .pw-draw { animation: none !important; stroke-dashoffset: 0; opacity: 1; stroke: #182D09; }
html.qa-snap .waverule svg { animation: none !important; stroke-dashoffset: 0 !important; }
html.qa-snap .spread .num-photo { filter: none !important; opacity: 1 !important; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html .rv, html .scrib path { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
  .roundel-spin, .marquee-track { animation: none !important; }
  .curtain { display: none !important; }
  .pw-draw { stroke-dashoffset: 0 !important; opacity: 1 !important; stroke: #182D09 !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  html .waverule svg { stroke-dashoffset: 0 !important; }
  html .spread .num-photo { filter: none !important; opacity: 1 !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .crops { inset: 8px; }
  /* in the flow on mobile — floating it overlaps the hero copy */
  .roundel { position: relative; right: auto; top: auto; order: 1; margin: 6vh 0 0; width: 120px; }
  .spread { grid-template-columns: 1fr; align-content: center; gap: 4vh;
    padding-top: 11vh; padding-bottom: 9vh; }
  .spread--flip .spread-copy { order: 0; }
  .num-photo { font-size: clamp(150px, 38vw, 260px); }
  .spread-glyph { right: auto; left: 52vw; bottom: -4%; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 6vh 20px; }
  /* the wave collapses to wrapped rows on narrow screens */
  .press-wave { height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 26px; }
  .press-curve { display: none; }
  .note { position: static !important; transform: none; flex-direction: row; gap: 8px; }
  .note i, .note--below i { order: -1; clip-path: polygon(50% 100%, 0 0, 100% 0); }
  .m-step:nth-child(1) { margin-left: 0; }
  .m-step:nth-child(2) { margin-left: 6vw; }
  .m-step:nth-child(3) { margin-left: 12vw; }
  .m-step:nth-child(4) { margin-left: 18vw; }
  .conv-stage { width: 88vw; }
  .thesis-q { opacity: .35; font-size: clamp(80px, 20vw, 140px); }
  .stage { grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 10px 20px; }
  .stage-desc { grid-column: 1 / -1; }
  .stage-tri { display: none; }
  .spread-wm { width: 90vw; opacity: .04; }
}

@media (max-width: 720px) {
  .nav-sec { display: none; }
  .mast { padding: 14px 16px; }
  .mast-nav ul { gap: 14px; }
  .mast-nav a { font-size: 10px; letter-spacing: .14em; }
}
@media (max-width: 480px) {
  .mast-lockup span { display: none; }
}