/* ==========================================================================
   Rutenberg Capital — "flashy meets old money", loud edition
   Ink · paper · claret · signal coral · warm gold
   Fraunces 900 (display) · Instrument Sans (text) · JetBrains Mono (labels, numerals)
   Every text/background pair is checked by scripts/contrast.mjs (AA everywhere, AAA for body copy).
   ========================================================================== */
:root {
  --ink: #0a100e;
  --ink-2: #111a16;
  --ink-3: #1a2620;
  --green: #0e2019;
  --claret: #4a0c19;
  --claret-2: #5a1020;
  --paper: #f2ede2;
  --paper-2: #e8e1cf;
  --cream: #f6f2e9;
  --gold: #e6c77a;        /* on dark: 11.7:1 */
  --gold-deep: #634710;   /* on paper: 7.4:1 */
  --volt: #ff4f3a;        /* solid blocks; as text only at display sizes on dark (5.9:1) */
  --volt-deep: #8a2015;   /* coral as text on paper: 7.8:1 */
  --fg: var(--cream);
  --fg-muted: #cfc9bb;    /* on ink: 11.6:1 */
  --accent-text: var(--gold);
  --line: rgba(230, 199, 122, 0.3);
  --line-strong: rgba(230, 199, 122, 0.6);
  --line-soft: rgba(246, 242, 233, 0.16);
  --display: "Fraunces", "Iowan Old Style", "Palatino", Georgia, serif;
  --sans: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --wrap: 1320px;
  --gutter: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(0.22, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --header-h: 88px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; background: var(--ink); color: var(--fg);
  font-family: var(--sans); font-size: 18px; line-height: 1.55; font-weight: 450;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; }
p, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
address { font-style: normal; }
::selection { background: var(--volt); color: var(--ink); }
:focus-visible { outline: 3px solid var(--volt); outline-offset: 4px; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--gold); color: var(--ink); padding: 8px 12px; z-index: 200; font-family: var(--mono); }
.skip:focus { left: 8px; }

/* --------------------------------------------------------------------------
   Surfaces — each sets its own full-contrast tokens
   -------------------------------------------------------------------------- */
.sec-ink { background: var(--ink); color: var(--fg); }
.sec-green { background: var(--green); color: var(--fg); }
.sec-claret { background: var(--claret); color: var(--fg); --fg-muted: #e6ddd2; --line: rgba(246, 242, 233, 0.28); --line-strong: rgba(246, 242, 233, 0.55); --line-soft: rgba(246, 242, 233, 0.2); --ink-2: #3d0a15; --ink-3: #2e0810; }
.sec-paper, .on-paper {
  background: var(--paper); color: var(--ink);
  --fg: var(--ink); --fg-muted: #3a3f3c; --accent-text: var(--volt-deep);
  --line: rgba(10, 16, 14, 0.18); --line-strong: rgba(10, 16, 14, 0.45); --line-soft: rgba(10, 16, 14, 0.14);
}
.sec-coral { background: var(--volt); color: var(--ink); --fg: var(--ink); --fg-muted: var(--ink); --accent-text: var(--ink); --line: rgba(10, 16, 14, 0.3); --line-strong: rgba(10, 16, 14, 0.6); --line-soft: rgba(10, 16, 14, 0.25); }
.sec { position: relative; padding-block: clamp(88px, 12vw, 176px); overflow: clip; }
.sec-tight { padding-block: clamp(56px, 7vw, 100px); position: relative; overflow: clip; }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
.display, .h1, .h2, .h3, .statement, .kinetic p, .hero h1 { font-family: var(--display); font-weight: 900; letter-spacing: -0.02em; text-wrap: balance; font-variation-settings: "opsz" 144; }
.display { font-size: clamp(3.4rem, 10.5vw, 11.5rem); line-height: 0.9; }
.h1 { font-size: clamp(3rem, 8.4vw, 8.8rem); line-height: 0.92; }
.h2 { font-size: clamp(2.5rem, 6vw, 5.8rem); line-height: 0.94; }
.h3 { font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1.08; font-weight: 800; font-variation-settings: "opsz" 40; }
.display em, .h1 em, .h2 em, .h3 em, .statement em, .kinetic em, .hero h1 em { font-style: normal; color: var(--accent-text); }
.sec-coral .display em, .sec-coral .h1 em, .sec-coral .h2 em, .sec-coral .statement em { background: var(--ink); color: var(--cream); padding: 0 0.14em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sec-coral .lede { background: var(--ink); color: var(--cream); padding: 0.5em 0.7em; --fg: var(--cream); }
.sec-coral .lede b { color: var(--gold); }
/* highlighted word: solid block behind it — the line box opens up so the block never covers the line above */
:is(.display, .h1, .h2, .statement, .kinetic p, .hero h1):has(.hl, .hl-gold, .hl-ink), .sec-coral :is(.display, .h1, .h2, .statement):has(em) { line-height: 1.04; }
/* highlighted word: solid block behind it */
.hl { background: var(--volt); color: var(--ink); padding: 0 0.14em; margin: 0 -0.02em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hl-gold { background: var(--gold); color: var(--ink); padding: 0 0.14em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hl-ink { background: var(--ink); color: var(--cream); padding: 0 0.14em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sec-coral .hl { background: var(--ink); color: var(--cream); }
.lede { font-size: clamp(1.2rem, 1.6vw, 1.5rem); line-height: 1.4; font-weight: 500; max-width: 46ch; }
.lede b { font-weight: 700; }
.lede .hl { background: var(--gold); color: var(--ink); }
.mono { font-family: var(--mono); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); }
.eyebrow::before { content: ""; width: 34px; height: 3px; background: currentColor; }
.text-link { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--accent-text); transition: background 0.2s, color 0.2s; }
.text-link:hover { background: var(--volt); color: var(--ink); text-decoration: none; }
.mono-link { font-family: var(--mono); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; color: var(--accent-text); border-bottom: 2px solid currentColor; padding-bottom: 3px; transition: background 0.2s, color 0.2s; }
.mono-link:hover { background: var(--volt); color: var(--ink); border-color: var(--ink); }

/* Chapter marker: giant outlined numeral + label */
.chapter { position: relative; display: flex; align-items: center; gap: 20px; font-family: var(--mono); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg); min-height: 1.4em; }
.chapter .num { font-family: var(--display); font-weight: 900; font-size: clamp(3.2rem, 6vw, 6rem); line-height: 1; letter-spacing: 0; text-transform: none; color: var(--volt); font-variation-settings: "opsz" 144; }
.sec-coral .chapter .num { color: var(--ink); }
.sec-paper .chapter .num { color: var(--volt-deep); }
.chapter .num::after { content: "."; color: var(--fg); }
.chapter .line { flex: 1; height: 3px; background: var(--fg); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out) 0.1s; }
.chapter.in .line { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   Buttons — primary gets the wax seal
   -------------------------------------------------------------------------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 28px; border: 2px solid var(--gold); border-radius: 3px;
  font-family: var(--mono); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1;
  white-space: nowrap; color: var(--gold); background: transparent;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.25s var(--pop), box-shadow 0.25s var(--ease);
}
.btn:hover { background: var(--gold); color: var(--ink); transform: translateY(-3px); box-shadow: 0 12px 30px -10px rgba(230, 199, 122, 0.6); }
.btn-gold { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn-gold:hover { background: var(--volt); border-color: var(--volt); color: var(--ink); box-shadow: 0 14px 34px -10px rgba(255, 79, 58, 0.7); }
.btn-volt { background: var(--volt); color: var(--ink); border-color: var(--volt); }
.btn-volt:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.btn-ghost { color: var(--fg); border-color: var(--fg); }
.btn-ghost:hover { background: var(--fg); color: var(--ink); border-color: var(--fg); }
.btn-lg { padding: 22px 36px; font-size: 0.95rem; }
.btn-sm { padding: 12px 18px; font-size: 0.8rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.on-paper .btn, .sec-paper .btn { color: var(--ink); border-color: var(--ink); }
.on-paper .btn:hover, .sec-paper .btn:hover { background: var(--ink); color: var(--cream); }
.on-paper .btn-gold, .sec-paper .btn-gold { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.on-paper .btn-gold:hover, .sec-paper .btn-gold:hover { background: var(--volt); color: var(--ink); border-color: var(--volt); }
.sec-paper .btn-ghost:hover { background: var(--ink); color: var(--cream); }
.sec-coral .btn { color: var(--ink); border-color: var(--ink); }
.sec-coral .btn:hover { background: var(--ink); color: var(--cream); }
.sec-coral .btn-gold { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.sec-coral .btn-gold:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.sec-claret .btn-gold:hover { background: var(--cream); border-color: var(--cream); }
@media (max-width: 520px) { .btn { white-space: normal; text-align: center; line-height: 1.3; max-width: 100%; } .btn-row { width: 100%; } }

.seal-btn::after {
  content: "R"; position: absolute; right: -18px; top: -18px; width: 46px; height: 46px; border-radius: 50%;
  background: var(--volt); color: var(--ink); font-family: var(--display); font-weight: 900; font-size: 24px; line-height: 46px; text-align: center;
  box-shadow: inset 0 0 0 3px rgba(10, 16, 14, 0.3), inset 0 0 0 5px var(--volt), inset 0 0 0 7px rgba(246, 242, 233, 0.7), 0 6px 18px rgba(0, 0, 0, 0.35);
  opacity: 0; transform: scale(2.2) rotate(-30deg); pointer-events: none;
  transition: opacity 0.15s var(--ease-out), transform 0.35s var(--pop);
}
.seal-btn:hover::after, .seal-btn:focus-visible::after { opacity: 1; transform: scale(1) rotate(-12deg); }
.sec-coral .seal-btn::after, .sec-paper .seal-btn::after { background: var(--ink); color: var(--cream); box-shadow: inset 0 0 0 3px rgba(246, 242, 233, 0.4), inset 0 0 0 5px var(--ink), inset 0 0 0 7px rgba(246, 242, 233, 0.8); }

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */
.logo { height: 52px; width: auto; color: var(--fg); --logo-gold: var(--gold); --logo-volt: var(--volt); }
.logo-a { height: 50px; }
.logo-c { height: 44px; }
.mark { width: 56px; height: 56px; color: var(--fg); --logo-gold: var(--gold); --logo-volt: var(--volt); }
.on-paper .logo, .on-paper .mark, .sec-paper .logo, .sec-paper .mark { color: var(--ink); --logo-gold: var(--gold-deep); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 60; background: transparent; border-bottom: 2px solid transparent; transition: background 0.3s var(--ease), border-color 0.3s var(--ease); }
.site-header.solid { background: rgba(10, 16, 14, 0.9); border-bottom-color: var(--gold); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.header-row { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 24px; }
.brand { display: inline-flex; align-items: center; transition: transform 0.3s var(--pop); }
.brand:hover { transform: scale(1.04); }
.nav ul { display: flex; gap: 8px; }
.nav a { display: inline-block; font-family: var(--mono); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream); padding: 10px 14px; border-radius: 3px; transition: background 0.2s, color 0.2s, transform 0.2s var(--pop); }
.nav a:hover { background: var(--gold); color: var(--ink); transform: translateY(-2px); }
.nav a[aria-current="page"] { background: var(--volt); color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: 16px; }
.nav-toggle { display: none; width: 48px; height: 48px; position: relative; z-index: 80; border: 2px solid var(--gold); border-radius: 3px; }
.nav-toggle span { position: absolute; left: 11px; right: 11px; height: 3px; background: var(--gold); transition: transform 0.3s var(--ease), opacity 0.2s, top 0.3s var(--ease); }
.nav-toggle span:nth-child(1) { top: 13px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 29px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

.mobile-nav { position: fixed; inset: 0; z-index: 70; background: var(--claret); color: var(--cream); padding: calc(var(--header-h) + 24px) var(--gutter) 40px; display: flex; flex-direction: column; justify-content: space-between; overflow: auto; }
.mobile-nav[hidden] { display: none; }
.mobile-nav ul li { border-bottom: 2px solid rgba(246, 242, 233, 0.3); }
.mobile-nav ul a { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0; font-family: var(--display); font-weight: 900; font-size: clamp(2.4rem, 10vw, 3.6rem); line-height: 1; color: var(--cream); font-variation-settings: "opsz" 144; }
.mobile-nav ul a::after { content: "→"; font-family: var(--mono); font-size: 1.2rem; color: var(--gold); }
.mobile-nav ul a[aria-current="page"] { color: var(--gold); }
.mobile-nav-foot { display: grid; gap: 20px; justify-items: start; margin-top: 40px; }
.mobile-nav-foot .btn-gold { background: var(--gold); color: var(--ink); border-color: var(--gold); }
body.menu-open { overflow: hidden; }
body.menu-open .site-header { background: var(--claret); border-bottom-color: transparent; z-index: 80; backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (max-width: 960px) {
  .nav, .header-actions .btn { display: none; }
  .nav-toggle { display: block; }
  :root { --header-h: 76px; }
  .logo { height: 42px; }
}

/* --------------------------------------------------------------------------
   Section heads & decoration
   -------------------------------------------------------------------------- */
.sec-head { display: grid; gap: 26px; margin-bottom: clamp(44px, 6vw, 96px); position: relative; }
.sec-head.split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: end; }
.sec-head.split > .lede { justify-self: end; }
.sec-head.split > .chapter { grid-column: 1 / -1; }
@media (max-width: 860px) { .sec-head.split { grid-template-columns: 1fr; } .sec-head.split > .lede { justify-self: start; } }
/* oversized punctuation, sits in the section corner */
.bigmark { position: absolute; right: -0.05em; top: -0.22em; font-family: var(--display); font-weight: 900; font-size: clamp(14rem, 30vw, 34rem); line-height: 1; color: var(--volt); pointer-events: none; user-select: none; z-index: 0; opacity: 0; transform: translateY(0.1em) rotate(-6deg); transition: opacity 0.8s var(--ease), transform 1.1s var(--ease-out); }
.bigmark.in { opacity: 1; transform: none; }
.sec-paper .bigmark { color: var(--volt); }
.sec-claret .bigmark { color: var(--gold); }
.sec-coral .bigmark { color: var(--ink); }
.sec > .wrap { position: relative; z-index: 1; }
.ornament { display: flex; justify-content: center; align-items: center; gap: 16px; color: var(--accent-text); }
.ornament::before, .ornament::after { content: ""; flex: 1; max-width: 220px; height: 3px; background: currentColor; }
.ornament svg { width: 30px; height: 30px; }

/* Word-by-word reveal: JS wraps each word in .w > span */
.words .w { display: inline-block; }
.words .w > span { display: inline-block; transform: translateY(0.55em) rotate(2deg); opacity: 0; transition: transform 0.6s var(--ease-out), opacity 0.4s var(--ease); }
.words.in .w > span { transform: none; opacity: 1; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; min-height: 100svh; display: grid; align-content: end; padding-top: calc(var(--header-h) + 32px); padding-bottom: clamp(40px, 5vw, 72px); overflow: clip; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(55% 45% at 85% 5%, rgba(255, 79, 58, 0.22), transparent 70%), radial-gradient(40% 40% at 5% 95%, rgba(230, 199, 122, 0.12), transparent 70%); }
.hero-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 56px); }
.hero-top .mono { color: var(--cream); }
.hero-top .mono b { color: var(--gold); }
.hero h1 { font-size: clamp(3.3rem, 11.6vw, 12.6rem); line-height: 0.88; letter-spacing: -0.03em; margin: 0; text-wrap: initial; }
.hero h1 .line { display: block; }
.hero h1 .line.swap { perspective: 1200px; }
.hero h1 .line-inner { display: block; transform-origin: 50% 100%; backface-visibility: hidden; }
.hero h1 .line-inner.out { animation: line-out 0.4s var(--ease) forwards; }
.hero h1 .line-inner.in { animation: line-in 0.5s var(--ease-out) forwards; }
@keyframes line-out { to { transform: rotateX(80deg) translateY(-8%); opacity: 0; } }
@keyframes line-in { from { transform: rotateX(-80deg) translateY(10%); opacity: 0; } to { transform: none; opacity: 1; } }
.hero h1 .claim-line { color: var(--volt); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: clamp(32px, 5vw, 80px); align-items: end; margin-top: clamp(32px, 4vw, 64px); }
.hero-copy .lede { margin-top: 0; max-width: 46ch; }
.hero-copy .btn-row { margin-top: 36px; }
.hero-scroll { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; color: var(--gold); }
.hero-scroll i { width: 44px; height: 3px; background: var(--volt); display: inline-block; animation: nudge 1.4s var(--ease) infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(14px); } }

/* Split-flap board */
.flap { display: inline-flex; gap: 0.05em; vertical-align: baseline; perspective: 900px; margin-left: 0.04em; align-items: center; min-height: calc(0.894em + 4px); min-width: calc(var(--n, 4) * (0.705em + 4px) + (var(--n, 4) - 1) * 0.05em); }
.flap-tile { position: relative; display: inline-block; width: 0.82em; height: 1.04em; line-height: 1.04em; text-align: center;
  font-family: var(--mono); font-weight: 800; font-size: 0.86em; letter-spacing: 0; text-transform: uppercase; color: var(--volt);
  background-color: var(--ink-2); background-image: linear-gradient(180deg, var(--ink-3), var(--ink-2)); border: 2px solid var(--gold); border-radius: 0.06em;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.6), 0 6px 0 rgba(0, 0, 0, 0.35); transform-origin: 50% 50%; will-change: transform; }
.flap-tile::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(10, 16, 14, 0.9); }
.flap-tile.blank { color: transparent; opacity: 0.45; }
.flap-tile.flip { animation: flap 0.38s var(--ease) both; }
@keyframes flap { 0% { transform: rotateX(0); } 48% { transform: rotateX(-90deg); } 52% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
.sec-coral .flap-tile { color: var(--volt); border-color: var(--ink); }
.hero h1 .flap { vertical-align: -0.03em; }

/* hero ledger card */
.ledger-card { border: 3px solid var(--gold); padding: 26px 28px 22px; position: relative; background: var(--ink-2); transition: transform 0.35s var(--pop), box-shadow 0.35s; }
.ledger-card:hover { transform: translateY(-6px) rotate(-0.5deg); box-shadow: 0 30px 60px -20px rgba(230, 199, 122, 0.35); }
.ledger-card > .mono { color: var(--volt); margin-bottom: 14px; display: block; }
.ledger-card dl > div { display: grid; grid-template-columns: 104px 1fr; gap: 14px; padding: 12px 0; border-top: 2px solid var(--line-soft); align-items: baseline; }
.ledger-card dt { font-family: var(--mono); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.ledger-card dd { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.35rem; line-height: 1.15; font-variation-settings: "opsz" 40; }
.ledger-card dd em { font-style: normal; color: var(--gold); }
.ledger-card dd.volt { color: var(--volt); }
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding-top: calc(var(--header-h) + 48px); }
  .hero h1 { font-size: clamp(3rem, 15vw, 6rem); }
}

/* --------------------------------------------------------------------------
   Tape (bold marquee) & Strip (giant statement marquee between chapters)
   -------------------------------------------------------------------------- */
.tape { background: var(--volt); color: var(--ink); border-block: 3px solid var(--ink); overflow: hidden; white-space: nowrap; }
.tape-track { display: inline-flex; width: max-content; animation: tape 40s linear infinite; }
.tape-track:hover { animation-play-state: paused; }
.tape span { display: inline-flex; align-items: center; gap: 14px; padding: 20px 30px; font-family: var(--display); font-weight: 900; font-size: clamp(1.25rem, 1.8vw, 1.7rem); letter-spacing: -0.01em; color: var(--ink); border-right: 3px solid var(--ink); font-variation-settings: "opsz" 40; }
.tape span b { font-weight: 900; }
.tape span i { font-family: var(--mono); font-style: normal; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 9px; border-radius: 3px; }
.tape span .up { background: var(--ink); color: var(--gold); }
.tape span .dn { background: var(--cream); color: var(--volt-deep); }
.tape span .flat { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
@keyframes tape { to { transform: translateX(-50%); } }

.strip { overflow: hidden; white-space: nowrap; padding-block: clamp(14px, 2vw, 28px); border-block: 3px solid var(--line-strong); }
.strip-track { display: inline-flex; width: max-content; animation: tape 50s linear infinite; }
.strip.reverse .strip-track { animation-direction: reverse; }
.strip span { font-family: var(--display); font-weight: 900; font-size: clamp(3rem, 8vw, 9rem); line-height: 1; letter-spacing: -0.03em; padding-right: 0.5em; font-variation-settings: "opsz" 144; }
.strip span em { font-style: normal; color: var(--accent-text); }
.strip span .dot { color: var(--volt); }
.strip-ink { background: var(--ink); color: var(--cream); }
.strip-coral { background: var(--volt); color: var(--ink); --accent-text: var(--ink); border-color: var(--ink); }
.strip-coral span .dot { color: var(--cream); }
.strip-coral span em { background: var(--ink); color: var(--cream); padding: 0 0.12em; }
.strip-paper { background: var(--paper); color: var(--ink); --accent-text: var(--volt-deep); border-color: var(--ink); }
.strip-claret { background: var(--claret); color: var(--cream); --accent-text: var(--gold); }
.strip-gold { background: var(--gold); color: var(--ink); --accent-text: var(--claret); border-color: var(--ink); }
.strip-gold span .dot { color: var(--claret); }

/* --------------------------------------------------------------------------
   Statements
   -------------------------------------------------------------------------- */
.statement { font-size: clamp(2.6rem, 6.6vw, 6.6rem); line-height: 0.96; max-width: 24ch; }
.statement-wide { max-width: 32ch; }
.statement .strike { display: inline; color: var(--fg-muted); background-image: linear-gradient(var(--volt), var(--volt)); background-repeat: no-repeat; background-size: 0% 0.09em; background-position: 0 54%; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 0.7s var(--ease-out) 0.3s; }
.in .statement .strike, .statement.in .strike { background-size: 100% 0.09em; }
.thesis-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.55fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.thesis-grid .aside { display: grid; gap: 22px; }
.thesis-grid .aside p { color: var(--fg); font-size: 1.05rem; max-width: 40ch; }
@media (max-width: 860px) { .thesis-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Ledger: credit / debit
   -------------------------------------------------------------------------- */
.ledger { border-top: 3px solid var(--fg); }
.ledger-head, .ledger-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 48px); align-items: baseline; }
.ledger-head { padding: 16px 0; border-bottom: 2px solid var(--line-strong); font-family: var(--mono); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg); }
.ledger-head .credit { color: var(--gold); }
.ledger-head .debit { color: var(--volt); }
.sec-paper .ledger-head .credit { color: var(--gold-deep); }
.sec-paper .ledger-head .debit { color: var(--volt-deep); }
.ledger-row { padding: clamp(20px, 2.6vw, 34px) 0; border-bottom: 2px solid var(--line-soft); transition: transform 0.3s var(--pop), background 0.3s; position: relative; }
.ledger-row:hover { transform: translateX(12px); }
.ledger-row:hover .credit { color: var(--volt); }
.sec-paper .ledger-row:hover .credit { color: var(--volt-deep); }
.ledger-row .n { font-family: var(--mono); font-weight: 700; font-size: 0.85rem; color: var(--gold); letter-spacing: 0.06em; }
.sec-paper .ledger-row .n { color: var(--gold-deep); }
.ledger-row .credit { font-family: var(--display); font-weight: 900; font-size: clamp(1.6rem, 2.8vw, 2.6rem); line-height: 1.02; letter-spacing: -0.015em; transition: color 0.3s; font-variation-settings: "opsz" 60; }
.ledger-row .debit { font-family: var(--sans); font-weight: 500; font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--fg-muted); }
.ledger-row .debit s { text-decoration: none; display: inline; background-image: linear-gradient(var(--volt), var(--volt)); background-repeat: no-repeat; background-size: 0% 3px; background-position: 0 56%; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 0.7s var(--ease-out) 0.2s; }
.ledger-row.in .debit s { background-size: 100% 3px; }
.ledger-foot { display: flex; justify-content: flex-end; gap: 24px; padding-top: 22px; font-family: var(--mono); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg); }
.ledger-foot b { background: var(--volt); color: var(--ink); padding: 6px 12px; }
@media (max-width: 720px) {
  .ledger-head { display: none; }
  .ledger-row { grid-template-columns: 1fr; gap: 8px; }
  .ledger-row .n { display: none; }
  .ledger-row:hover { transform: none; }
  .ledger-row .debit::before { content: "vs. "; font-family: var(--mono); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--volt); margin-right: 6px; }
  .sec-paper .ledger-row .debit::before { color: var(--volt-deep); }
}

/* --------------------------------------------------------------------------
   Field notes
   -------------------------------------------------------------------------- */
.notes { border-top: 3px solid var(--fg); counter-reset: note; }
.notes li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; padding: clamp(22px, 2.8vw, 36px) 0; border-bottom: 2px solid var(--line-soft); align-items: start; transition: background 0.3s; }
.notes li::before { counter-increment: note; content: counter(note, decimal-leading-zero); font-family: var(--display); font-weight: 900; font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 0.9; color: var(--volt); font-variation-settings: "opsz" 144; }
.sec-paper .notes li::before { color: var(--volt-deep); }
.notes li > div { display: grid; gap: 10px; }
.notes .note-big { font-family: var(--display); font-weight: 900; font-size: clamp(1.7rem, 3.4vw, 3.2rem); line-height: 1; letter-spacing: -0.015em; font-variation-settings: "opsz" 60; }
.notes .note-big em { font-style: normal; color: var(--accent-text); }
.notes .note-small { color: var(--fg-muted); max-width: 62ch; font-size: 1.05rem; }
@media (max-width: 640px) { .notes li { grid-template-columns: 54px minmax(0, 1fr); gap: 14px; } }

/* --------------------------------------------------------------------------
   Speed — oversized numerals
   -------------------------------------------------------------------------- */
.speed-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 3px solid var(--fg); border-left: 3px solid var(--fg); }
.speed-grid > div { padding: clamp(24px, 3vw, 44px) clamp(20px, 2.4vw, 36px); border-right: 3px solid var(--fg); border-bottom: 3px solid var(--fg); display: grid; align-content: start; gap: 12px; transition: background 0.3s, color 0.3s; }
.speed-grid > div:hover { background: var(--ink); color: var(--cream); --fg-muted: #cfc9bb; }
.speed-grid > div:hover .num { color: var(--volt); }
.speed-grid > div:hover .cap { color: var(--gold); }
.speed-grid .num { font-family: var(--display); font-weight: 900; font-size: clamp(4.4rem, 9.5vw, 11rem); line-height: 0.85; letter-spacing: -0.04em; color: var(--volt-deep); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 4px; font-variation-settings: "opsz" 144; }
.sec-ink .speed-grid .num, .sec-green .speed-grid .num, .sec-claret .speed-grid .num { color: var(--volt); }
.speed-grid .num .pre { font-family: var(--mono); font-weight: 800; font-size: 0.32em; align-self: center; color: var(--fg); }
.speed-grid .num .unit { font-family: var(--mono); font-weight: 800; font-size: 0.2em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg); margin-left: 8px; }
.speed-grid .cap { font-family: var(--mono); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg); }
.speed-grid p { color: var(--fg-muted); font-size: 1.02rem; max-width: 30ch; }
@media (max-width: 960px) { .speed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .speed-grid { grid-template-columns: 1fr; } }

.timeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: clamp(40px, 6vw, 80px); position: relative; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 3px; background: var(--fg); }
.timeline li { position: relative; padding: 36px 20px 0 0; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 0; width: 21px; height: 21px; border-radius: 50%; border: 3px solid var(--fg); background: var(--paper); }
.sec-ink .timeline li::before { background: var(--ink); }
.sec-green .timeline li::before { background: var(--green); }
.sec-claret .timeline li::before { background: var(--claret); }
.timeline li:last-child::before { background: var(--volt); border-color: var(--volt); }
.timeline .when { display: block; font-family: var(--mono); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 10px; }
.timeline h3 { font-family: var(--display); font-weight: 900; font-size: clamp(1.4rem, 2vw, 1.9rem); line-height: 1.05; margin-bottom: 8px; font-variation-settings: "opsz" 40; }
.timeline p { color: var(--fg-muted); font-size: 1rem; max-width: 28ch; }
@media (max-width: 960px) { .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; } .timeline::before { display: none; } .timeline li { border-top: 3px solid var(--fg); padding-top: 28px; } .timeline li::before { top: -12px; } }
@media (max-width: 520px) { .timeline { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Index — table of contents; rows invert on hover
   -------------------------------------------------------------------------- */
.index { border-top: 3px solid var(--fg); }
.index li { display: grid; grid-template-columns: minmax(0, auto) minmax(24px, 1fr) auto; align-items: baseline; gap: 16px; padding: clamp(18px, 2.2vw, 28px) 12px; margin: 0 -12px; border-bottom: 2px solid var(--line-soft); transition: background 0.25s, color 0.25s, transform 0.3s var(--pop); }
.index li:hover { background: var(--volt); color: var(--ink); transform: translateX(6px); --fg-muted: var(--ink); }
.index li:hover .name em, .index li:hover .name { color: var(--ink); }
.index li:hover .leader { border-color: var(--ink); }
.index .name { font-family: var(--display); font-weight: 900; font-size: clamp(1.7rem, 3.6vw, 3.4rem); line-height: 1; letter-spacing: -0.02em; font-variation-settings: "opsz" 100; }
.index .name em { color: var(--accent-text); font-style: normal; }
.index .leader { border-bottom: 3px dotted var(--line-strong); transform: translateY(-0.3em); }
.index .ref { font-family: var(--mono); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.04em; color: var(--fg-muted); text-align: right; }
.index .ref b { display: block; color: var(--fg); font-weight: 800; font-size: 1rem; }
.index li.wild .name { color: var(--volt); }
.sec-paper .index li.wild .name { color: var(--volt-deep); }
.index-note { margin-top: 28px; color: var(--fg-muted); max-width: 60ch; font-size: 1.05rem; }
@media (max-width: 640px) { .index li { grid-template-columns: 1fr; gap: 6px; } .index .leader { display: none; } .index .ref { text-align: left; } .index li:hover { transform: none; } }

/* --------------------------------------------------------------------------
   Terms table
   -------------------------------------------------------------------------- */
.terms { width: 100%; border-collapse: collapse; border-top: 3px solid var(--fg); }
.terms th, .terms td { text-align: left; vertical-align: top; padding: clamp(18px, 2vw, 26px) 16px clamp(18px, 2vw, 26px) 0; border-bottom: 2px solid var(--line-soft); }
.terms thead th { font-family: var(--mono); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg); border-bottom: 2px solid var(--line-strong); }
.terms thead th.us { color: var(--gold); }
.sec-paper .terms thead th.us { color: var(--gold-deep); }
.terms tbody th { font-family: var(--mono); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg); width: 18%; }
.terms td.us { font-family: var(--display); font-weight: 800; font-size: clamp(1.25rem, 1.9vw, 1.75rem); line-height: 1.12; width: 46%; font-variation-settings: "opsz" 40; }
.terms td.them { color: var(--fg-muted); font-size: 1.02rem; }
.terms td.them s { text-decoration-color: var(--volt); text-decoration-thickness: 3px; }
.terms tbody tr { transition: background 0.2s; }
.terms tbody tr:hover { background: rgba(255, 79, 58, 0.12); }
@media (max-width: 720px) {
  .terms thead { display: none; }
  .terms tbody tr, .terms tbody th, .terms td { display: block; width: auto; padding-right: 0; }
  .terms tbody th { padding-bottom: 6px; border: 0; }
  .terms td.us { padding-top: 0; border: 0; }
  .terms td.them { padding-top: 6px; }
  .terms td.them::before { content: "Elsewhere: "; font-family: var(--mono); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }
}

/* --------------------------------------------------------------------------
   Kinetic manifesto
   -------------------------------------------------------------------------- */
.kinetic { display: grid; gap: clamp(6px, 1.2vw, 16px); }
.kinetic p { font-size: clamp(2.6rem, 7.6vw, 8.2rem); line-height: 0.92; letter-spacing: -0.03em; }
.kinetic p em { display: inline-block; transform: translateX(-0.35em) skewX(-6deg); opacity: 0; transition: transform 0.9s var(--ease-out), opacity 0.6s var(--ease); }
.kinetic.in p em { transform: none; opacity: 1; }
.kinetic p:nth-child(2) em { transition-delay: 0.15s; }
.kinetic p:nth-child(3) em { transition-delay: 0.3s; }
.kinetic p:nth-child(4) em { transition-delay: 0.45s; }
.kinetic p .dim { color: var(--fg-muted); }
.kinetic p:nth-child(even) { padding-left: clamp(0px, 8vw, 160px); }

/* --------------------------------------------------------------------------
   Teaser / CTA
   -------------------------------------------------------------------------- */
.teaser { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(32px, 5vw, 80px); align-items: center; position: relative; z-index: 1; }
.recipe-mini { border: 3px solid var(--gold); background: var(--ink-2); padding: 28px 30px; font-family: var(--mono); font-weight: 500; font-size: 0.92rem; letter-spacing: 0.01em; line-height: 1.8; color: var(--cream); position: relative; transform: rotate(1deg); transition: transform 0.35s var(--pop); }
.recipe-mini:hover { transform: rotate(0) scale(1.02); }
.recipe-mini b { color: var(--gold); font-weight: 700; }
.recipe-mini s { color: #cfc9bb; text-decoration-color: var(--volt); text-decoration-thickness: 2px; }
@media (max-width: 860px) { .teaser { grid-template-columns: 1fr; } }
.cta-block { text-align: center; display: grid; justify-items: center; gap: 32px; }
.cta-block .display { max-width: 12ch; }
.cta-block .lede { text-align: center; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: 3px solid var(--fg); }
.faq details { border-bottom: 2px solid var(--line-soft); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 72px minmax(0, 1fr) 48px; gap: 16px; align-items: center; padding: clamp(18px, 2.4vw, 28px) 0; font-family: var(--display); font-weight: 800; font-size: clamp(1.35rem, 2.3vw, 2rem); line-height: 1.1; transition: color 0.2s, padding-left 0.3s var(--ease); font-variation-settings: "opsz" 40; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .q { font-family: var(--mono); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; color: var(--accent-text); }
.faq summary .plus { font-family: var(--mono); font-weight: 800; font-size: 1.6rem; color: var(--ink); background: var(--volt); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; line-height: 1; transition: transform 0.3s var(--ease), background 0.2s; justify-self: end; }
.faq details[open] summary .plus { transform: rotate(45deg); background: var(--gold); }
.faq summary:hover { color: var(--accent-text); padding-left: 8px; }
.faq .a { padding: 0 0 clamp(20px, 2.4vw, 30px) 88px; color: var(--fg-muted); max-width: 70ch; font-size: 1.05rem; }
.faq .a p + p { margin-top: 0.8em; }
.faq .a b { color: var(--fg); }
@media (max-width: 640px) { .faq summary { grid-template-columns: minmax(0, 1fr) 44px; } .faq summary .q { display: none; } .faq .a { padding-left: 0; } }

/* --------------------------------------------------------------------------
   Page head (inner pages)
   -------------------------------------------------------------------------- */
.page-head { padding-top: calc(var(--header-h) + clamp(48px, 8vw, 110px)); padding-bottom: clamp(48px, 6vw, 96px); position: relative; overflow: clip; }
.page-head::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(50% 45% at 85% 0%, rgba(255, 79, 58, 0.2), transparent 70%); }
.page-head > .wrap { position: relative; z-index: 1; }
.page-head .h1 { margin-top: 28px; max-width: 15ch; }
.page-head .h1.wide { max-width: 24ch; }
.page-head .lede { margin-top: 30px; max-width: 52ch; }
.page-head .btn-row { margin-top: 40px; }

/* --------------------------------------------------------------------------
   Two letters
   -------------------------------------------------------------------------- */
.letters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); align-items: start; }
.letter { position: relative; background: var(--cream); color: var(--ink); padding: clamp(28px, 3.6vw, 52px); border: 2px solid var(--ink); box-shadow: 14px 14px 0 var(--volt); font-family: var(--mono); font-weight: 500; font-size: 0.92rem; line-height: 1.7; transition: transform 0.35s var(--pop), box-shadow 0.35s; }
.letter:hover { transform: translate(-4px, -4px) rotate(0deg) !important; box-shadow: 20px 20px 0 var(--volt); }
.letter-good { box-shadow: 14px 14px 0 var(--gold); }
.letter-good:hover { box-shadow: 20px 20px 0 var(--gold); }
.letter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 14px; margin-bottom: 20px; border-bottom: 2px solid var(--ink); }
.letter-head .tag { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); font-weight: 800; }
.letter-head .tag.bad { color: var(--volt-deep); }
.letter-head .stamp { font-family: var(--display); font-weight: 800; font-size: 0.95rem; color: var(--ink); border: 2px solid var(--ink); padding: 3px 8px; transform: rotate(-4deg); }
.letter .field { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; padding: 6px 0; border-bottom: 1px dashed rgba(10, 16, 14, 0.4); }
.letter .field .k { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); font-weight: 700; padding-top: 3px; }
.letter .field .v { word-break: break-word; }
.letter .body { margin-top: 20px; }
.letter .body p + p { margin-top: 0.9em; }
.letter-good .body p:not(.sign) { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
.letter-good .body p .n { color: var(--volt-deep); font-weight: 800; }
.letter-good .body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--volt-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.letter .sign { margin-top: 20px; font-family: var(--display); font-weight: 800; font-size: 1.3rem; }
.letter-bad { transform: rotate(-1.2deg); }
.letter-good { transform: rotate(0.8deg); margin-top: clamp(0px, 4vw, 56px); }
.redline { display: inline; color: var(--ink); background-image: linear-gradient(var(--volt), var(--volt)); background-repeat: no-repeat; background-size: 0% 3px; background-position: 0 56%; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 0.7s var(--ease-out); }
.in .redline { background-size: 100% 3px; }
.in .redline:nth-of-type(2) { transition-delay: 0.15s; }
.in .redline:nth-of-type(3) { transition-delay: 0.3s; }
.in .redline:nth-of-type(4) { transition-delay: 0.45s; }
.margin-note { position: absolute; right: -8px; transform: rotate(-6deg) translateX(30%); font-family: var(--display); font-weight: 800; color: var(--volt-deep); font-size: 1.15rem; line-height: 1.1; pointer-events: none; white-space: nowrap; }
.attachments { margin-top: 18px; padding-top: 12px; border-top: 2px dashed rgba(10, 16, 14, 0.4); display: flex; flex-wrap: wrap; gap: 6px; }
.attachments span { font-size: 0.8rem; padding: 4px 8px; border: 2px solid var(--ink); color: var(--ink); text-decoration: line-through; text-decoration-color: var(--volt); text-decoration-thickness: 2px; }
.attachments-n { margin-top: 8px; font-size: 0.8rem; font-weight: 700; color: var(--volt-deep); letter-spacing: 0.06em; text-transform: uppercase; }
.letter-good .attachments span { text-decoration: none; border-color: var(--gold-deep); }
@media (max-width: 860px) { .letters { grid-template-columns: 1fr; } .letter-bad, .letter-good { transform: none; margin-top: 0; } .margin-note { display: none; } }

/* --------------------------------------------------------------------------
   Ship calendar
   -------------------------------------------------------------------------- */
.calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.calendar .dow { font-family: var(--mono); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg); padding: 6px 4px 10px; }
.calendar .day { position: relative; aspect-ratio: 1.05; border: 2px solid var(--line-soft); padding: 8px 10px; display: grid; align-content: space-between; font-family: var(--mono); font-weight: 600; font-size: 0.8rem; color: var(--fg); background: var(--ink-2); transition: border-color 0.3s, transform 0.3s var(--pop), background 0.3s; }
.calendar .day:hover { border-color: var(--gold); transform: scale(1.06); background: var(--ink-3); z-index: 1; }
.calendar .day .st { justify-self: start; font-family: var(--display); font-weight: 800; font-size: clamp(0.85rem, 1.5vw, 1.15rem); color: var(--gold); letter-spacing: 0; text-transform: none; transform: rotate(-6deg); opacity: 0; transition: opacity 0.3s, transform 0.5s var(--pop); font-variation-settings: "opsz" 20; }
.calendar.in .day .st { opacity: 1; transform: rotate(-6deg) scale(1); }
.calendar .day.broke { background: var(--volt); color: var(--ink); border-color: var(--volt); }
.calendar .day.broke .st { color: var(--ink); }
.calendar .day.rest .st { color: var(--fg-muted); }
.calendar .day.today { border-color: var(--gold); background: var(--gold); color: var(--ink); }
.calendar .day.today .st { color: var(--ink); }
.calendar .day.today::after { content: "TODAY"; position: absolute; right: 8px; top: 8px; font-size: 0.66rem; letter-spacing: 0.1em; color: var(--ink); }
.calendar-note { margin-top: 24px; color: var(--fg); font-family: var(--mono); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.02em; }
.calendar-note b { background: var(--gold); color: var(--ink); padding: 3px 8px; font-weight: 700; }
@media (max-width: 640px) { .calendar .day { padding: 5px 6px; } .calendar .day .st { font-size: 0.7rem; } .calendar .day.today::after { display: none; } }
@media (max-width: 400px) { .calendar .day .st { display: none; } .calendar .day::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); } .calendar .day.rest::before { background: var(--fg-muted); } .calendar .day.broke::before, .calendar .day.today::before { background: var(--ink); } }

/* --------------------------------------------------------------------------
   Checklist (text lives in one wrapper cell)
   -------------------------------------------------------------------------- */
.checklist { border-top: 3px solid var(--fg); }
.checklist li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 18px; padding: 22px 0; border-bottom: 2px solid var(--line-soft); align-items: start; }
.checklist li::before { content: ""; width: 22px; height: 22px; margin-top: 4px; border: 3px solid var(--fg); background: linear-gradient(var(--volt), var(--volt)) center / 10px 10px no-repeat; }
.checklist li.no::before { border-color: var(--fg-muted); background: none; }
.checklist li > div { display: grid; gap: 6px; }
.checklist b { font-family: var(--display); font-weight: 800; font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.12; font-variation-settings: "opsz" 40; }
.checklist span { color: var(--fg-muted); font-size: 1.02rem; }
.checklist li.no b { color: var(--fg-muted); text-decoration: line-through; text-decoration-color: var(--volt); text-decoration-thickness: 3px; }
.two-col { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.two-col .sticky { position: sticky; top: calc(var(--header-h) + 24px); }
.two-col .sticky .statement { max-width: 12ch; margin-top: 22px; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } .two-col .sticky { position: static; } }

/* --------------------------------------------------------------------------
   Recipe — exact instructions
   -------------------------------------------------------------------------- */
.recipe { border: 3px solid var(--gold); position: relative; padding: clamp(28px, 4vw, 56px); display: grid; background: var(--ink-2); box-shadow: 18px 18px 0 var(--volt); }
.recipe .row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 2px solid var(--line-soft); align-items: baseline; }
.recipe .row:last-of-type { border-bottom: 0; }
.recipe .k { font-family: var(--mono); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.recipe .v { font-family: var(--display); font-weight: 800; font-size: clamp(1.3rem, 2.1vw, 1.85rem); line-height: 1.12; font-variation-settings: "opsz" 40; }
.recipe .v small { display: block; font-family: var(--sans); font-weight: 450; font-size: 1.02rem; color: var(--fg-muted); margin-top: 8px; }
.recipe .v s { color: var(--fg-muted); text-decoration-color: var(--volt); text-decoration-thickness: 3px; }
.recipe .v code { font-family: var(--mono); font-weight: 700; font-size: 0.85em; background: var(--gold); color: var(--ink); padding: 3px 10px; }
.recipe .btn-row { margin-top: 28px; }
@media (max-width: 560px) { .recipe .row { grid-template-columns: 1fr; gap: 6px; } .recipe { box-shadow: 10px 10px 0 var(--volt); } }

/* --------------------------------------------------------------------------
   Steps
   -------------------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-left: 3px solid var(--fg); counter-reset: step; }
.steps li { position: relative; padding: 0 clamp(16px, 2vw, 30px) 28px; border-right: 3px solid var(--fg); display: grid; align-content: start; gap: 14px; transition: background 0.3s; }
.steps li:hover { background: rgba(255, 79, 58, 0.12); }
.steps li::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--display); font-weight: 900; font-size: clamp(4rem, 7.5vw, 8rem); line-height: 0.85; letter-spacing: -0.05em; color: var(--volt); font-variant-numeric: tabular-nums; font-variation-settings: "opsz" 144; }
.sec-paper .steps li::before { color: var(--volt-deep); }
.steps h3 { font-family: var(--display); font-weight: 900; font-size: clamp(1.35rem, 1.9vw, 1.8rem); line-height: 1.05; font-variation-settings: "opsz" 40; }
.steps p { color: var(--fg-muted); font-size: 1rem; }
.steps .when { font-family: var(--mono); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 0; gap: 32px 0; } .steps li { border-right: 0; border-left: 3px solid var(--fg); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Facts, definitions, beliefs, not-list
   -------------------------------------------------------------------------- */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 3px solid var(--fg); border-left: 3px solid var(--fg); }
.facts > div { padding: 24px 26px 26px; border-right: 3px solid var(--fg); border-bottom: 3px solid var(--fg); display: grid; gap: 10px; align-content: start; transition: background 0.3s, color 0.3s; }
.facts > div:hover { background: var(--gold); color: var(--ink); --accent-text: var(--ink); }
.facts .k { font-family: var(--mono); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); }
.facts .v { font-family: var(--display); font-weight: 900; font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.05; font-variation-settings: "opsz" 40; }
@media (max-width: 860px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .facts { grid-template-columns: 1fr; } }

.defs { border-top: 3px solid var(--fg); }
.defs > div { display: grid; grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr); gap: clamp(20px, 4vw, 64px); padding: clamp(28px, 3.6vw, 52px) 0; border-bottom: 2px solid var(--line-soft); align-items: start; }
.defs h2, .defs h3 { font-family: var(--display); font-weight: 900; font-size: clamp(2rem, 4vw, 3.8rem); line-height: 0.95; letter-spacing: -0.02em; font-variation-settings: "opsz" 100; }
.defs h2 small, .defs h3 small { display: block; font-family: var(--mono); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 14px; }
.defs .d { display: grid; gap: 14px; }
.defs .d p { color: var(--fg-muted); max-width: 62ch; font-size: 1.05rem; }
.defs .d p b { color: var(--fg); }
.defs .d .big { font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 2.1vw, 1.9rem); line-height: 1.15; color: var(--fg); font-variation-settings: "opsz" 40; }
.defs .d .big em { font-style: normal; color: var(--accent-text); }
@media (max-width: 760px) { .defs > div { grid-template-columns: 1fr; gap: 14px; } }

.beliefs { border-top: 3px solid var(--fg); }
.beliefs li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; padding: clamp(28px, 4vw, 52px) 0; border-bottom: 2px solid var(--line-soft); align-items: start; }
.beliefs li .rn { font-family: var(--display); font-weight: 900; font-size: clamp(2rem, 3.4vw, 3.2rem); color: var(--volt); line-height: 0.9; font-variation-settings: "opsz" 144; }
.sec-paper .beliefs li .rn { color: var(--volt-deep); }
.beliefs li > div { display: grid; gap: 16px; }
.beliefs .big { font-family: var(--display); font-weight: 900; font-size: clamp(2rem, 4.6vw, 4.4rem); line-height: 0.96; letter-spacing: -0.02em; max-width: 22ch; font-variation-settings: "opsz" 144; }
.beliefs .big em { color: var(--accent-text); font-style: normal; }
.beliefs p { color: var(--fg-muted); max-width: 58ch; font-size: 1.05rem; }
@media (max-width: 640px) { .beliefs li { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; } }

.notlist { display: flex; flex-wrap: wrap; gap: 0.3em 0.55em; font-family: var(--display); font-weight: 900; font-size: clamp(2.2rem, 5.6vw, 5.4rem); line-height: 1; letter-spacing: -0.025em; font-variation-settings: "opsz" 144; }
.notlist s { color: var(--fg-muted); text-decoration-color: var(--volt); text-decoration-thickness: 0.08em; }
.notlist .yes { background: var(--volt); color: var(--ink); padding: 0 0.15em; }
.sec-claret .notlist .yes { background: var(--gold); }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact-hero .big-mail { display: inline-block; font-family: var(--display); font-weight: 900; font-size: clamp(2rem, 6.8vw, 6.8rem); line-height: 1; letter-spacing: -0.03em; word-break: break-word; color: var(--ink); background: var(--gold); padding: 0.06em 0.18em; transition: background 0.2s, transform 0.3s var(--pop); font-variation-settings: "opsz" 144; }
.contact-hero .big-mail:hover { background: var(--volt); transform: rotate(-1deg) scale(1.02); }
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 3px solid var(--fg); border-left: 3px solid var(--fg); }
.contact-grid > div { padding: clamp(24px, 3vw, 40px); border-right: 3px solid var(--fg); border-bottom: 3px solid var(--fg); display: grid; gap: 14px; align-content: start; transition: background 0.3s, color 0.3s; }
.contact-grid > div:hover { background: var(--ink); color: var(--cream); --fg-muted: #cfc9bb; --accent-text: var(--gold); }
.contact-grid h3 { font-family: var(--mono); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); }
.contact-grid .v { font-family: var(--display); font-weight: 800; font-size: clamp(1.35rem, 2.1vw, 1.9rem); line-height: 1.12; font-variation-settings: "opsz" 40; }
.contact-grid p { color: var(--fg-muted); font-size: 1.02rem; }
.contact-grid .v a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--volt); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.letterhead { position: relative; background: var(--cream); color: var(--ink); padding: clamp(32px, 4vw, 56px); border: 2px solid var(--ink); box-shadow: 16px 16px 0 var(--gold); max-width: 560px; transform: rotate(-1deg); transition: transform 0.35s var(--pop); }
.letterhead:hover { transform: rotate(0); }
.letterhead .mark { width: 48px; height: 48px; color: var(--ink); --logo-gold: var(--gold-deep); }
.letterhead address { margin-top: 24px; font-family: var(--mono); font-weight: 600; font-size: 0.95rem; line-height: 1.8; }
.letterhead .sign { margin-top: 24px; font-family: var(--display); font-weight: 800; font-size: 1.4rem; color: var(--ink); }

/* --------------------------------------------------------------------------
   Prose (privacy / legal)
   -------------------------------------------------------------------------- */
.prose { max-width: 72ch; font-size: 1.1rem; line-height: 1.65; color: var(--fg); }
.prose p + p { margin-top: 1em; }
.prose h2 { font-family: var(--display); font-weight: 900; font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.05; color: var(--fg); margin: 2.2em 0 0.7em; display: flex; gap: 16px; align-items: baseline; font-variation-settings: "opsz" 60; }
.prose h2 .n { font-family: var(--mono); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.06em; color: var(--volt-deep); }
.prose h2:first-child { margin-top: 0; }
.prose ul { margin: 0.8em 0 1em; }
.prose li { position: relative; padding-left: 24px; }
.prose li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 12px; height: 3px; background: var(--volt-deep); }
.prose li + li { margin-top: 0.4em; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--volt-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose a:hover { background: var(--volt); color: var(--ink); text-decoration: none; }
.prose .meta { font-family: var(--mono); font-weight: 600; font-size: 0.88rem; letter-spacing: 0.02em; color: var(--fg); line-height: 1.8; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 3px solid var(--ink); }
.prose strong, .prose b { color: var(--fg); font-weight: 700; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--cream); border-top: 6px solid var(--volt); padding-block: clamp(56px, 7vw, 100px) 32px; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 48px; padding-bottom: 48px; border-bottom: 2px solid var(--line-soft); }
.footer-brand { display: grid; gap: 18px; align-content: start; justify-items: start; }
.footer-mark .mark { width: 72px; height: 72px; }
.footer-tag { font-family: var(--display); font-weight: 900; font-size: clamp(1.8rem, 2.6vw, 2.6rem); line-height: 1; color: var(--gold); font-variation-settings: "opsz" 100; }
.footer-meta { color: var(--cream); font-weight: 600; letter-spacing: 0.06em; }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer-cols .footer-h { font-family: var(--mono); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--volt); margin-bottom: 18px; }
.footer-cols li + li { margin-top: 10px; }
.footer-cols a { color: var(--cream); font-size: 1.05rem; font-weight: 500; transition: color 0.2s, background 0.2s; }
.footer-cols a:hover { background: var(--gold); color: var(--ink); }
.footer-cols .addr { color: var(--fg-muted); font-size: 1rem; line-height: 1.7; }
.footer-bottom { display: flex; justify-content: space-between; gap: 24px; padding-top: 24px; flex-wrap: wrap; color: var(--fg-muted); }
.footer-bottom .mono { letter-spacing: 0.04em; text-transform: none; font-weight: 600; color: var(--cream); }
.footer-bottom .disclaimer { max-width: 62ch; font-size: 0.92rem; }
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr; } .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .footer-cols { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Reveal
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.9s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.12s; }
.reveal-d2 { transition-delay: 0.24s; }
.reveal-d3 { transition-delay: 0.36s; }
.pop-in { opacity: 0; transform: scale(0.85) rotate(-3deg); transition: opacity 0.5s var(--ease), transform 0.7s var(--pop); }
.pop-in.in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.notfound { min-height: 100svh; display: grid; align-content: center; justify-items: start; gap: 28px; padding-top: var(--header-h); position: relative; z-index: 1; }
.notfound .flap { font-size: clamp(4rem, 18vw, 14rem); }
.notfound .h2 { max-width: 16ch; }

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tape-track, .strip-track { animation: none; }
  .reveal, .pop-in, .bigmark { opacity: 1 !important; transform: none !important; transition: none !important; }
  .words .w > span { transform: none !important; opacity: 1 !important; transition: none !important; }
  .kinetic p em, .calendar .day .st, .chapter .line { transform: none !important; opacity: 1 !important; transition: none !important; }
  .ledger-row .debit s, .redline, .statement .strike { background-size: 100% 3px !important; transition: none !important; }
  .flap-tile.flip { animation: none; }
  .hero h1 .line-inner.out, .hero h1 .line-inner.in { animation: none; }
  .hero-scroll i { animation: none; }
  .seal-btn::after, .btn, .ledger-row, .index li, .letter, .ledger-card { transition: none; }
}