/* home2: the brand-partnership concept.
   The deck, made to move: black ground, Belleza capitals, Alegreya Sans for
   reading, Linden Hill for the italic lines. Two reds, both cherry:
   #CC1F3F for red text at reading sizes (it holds 3.6:1 on the black, where
   the deck's #97052D holds 2.2:1 and disappears in small type), and #97052D
   for big numbers, rules and buttons. Never #E1656F.
   Scroll choreography lives in home2.js, which writes progress into custom
   properties; every scene also reads correctly with no script and with
   reduced motion, where the pinned stages become ordinary sections. */

:root {
  --ink: #0b0a0a;
  --ink-2: #141212;
  --bone: #f2efeb;
  --stone: #d4cfc8;
  --ash: #9a958e;
  --line: #34302d;
  /* Two reds (her rule, 7 Oct): the bright one for anything you read, the deep cherry for buttons */
  --red-hi: #cc1f3f;
  --red: #97052d;
  --red-press: #7d0425;
  --display: "Belleza", "Optima", "Candara", "Segoe UI", sans-serif;
  /* Fonts (her picks, 7 Oct): Belleza titles (in place of Tenor Sans, rarer and Optima-like);
     Alegreya Sans for reading (Lato is on the AI-default lists); Linden Hill for the italic lines */
  --body: "Alegreya Sans", "Helvetica Neue", Arial, sans-serif;
  --italic: "Linden Hill", "Didot", Georgia, serif;
  /* small capital labels, buttons and menus: tracked at 0.12em, not the 0.2em to 0.4em of before */
  --track: 0.12em;
  --gutter: clamp(20px, 5vw, 96px);
  --bar: 64px;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  color-scheme: dark;
}

[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ink); color: var(--bone);
  font-family: var(--body); font-weight: 400; font-size: 18px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; }
h1, h2, h3, p, figure, blockquote, dl, dd, ol, ul { margin: 0; padding: 0; }
/* Lines run as long as the column allows; "pretty" only stops a lone last word, it never rebalances the lines */
h1, h2, h3, p, li, blockquote { text-wrap: pretty; }
ol, ul { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 1px solid var(--bone); outline-offset: 4px; }
::selection { background: var(--red); color: var(--bone); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------- type */
.label {
  font-family: var(--display); font-size: 13px; letter-spacing: var(--track); text-transform: uppercase;
  color: var(--red-hi); margin-bottom: 24px;
}
/* No eyebrows (her rule, 9 Oct: "I hate eyebrow titles"): a block's name is a real title in the headline face,
   in white; .title--lg is headline size (the book and the newsletter) */
.title { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; font-size: clamp(20px, 1.9vw, 30px); line-height: 1.15; color: var(--bone); margin-bottom: 18px; }
.title--lg { font-size: clamp(26px, 3.1vw, 52px); line-height: 1.12; letter-spacing: 0.05em; }
.display {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(26px, 3.1vw, 52px); line-height: 1.12; letter-spacing: 0.05em;
}
.display--lg { font-size: clamp(30px, 4vw, 68px); line-height: 1.06; }
.display--xl { font-size: clamp(44px, 7vw, 120px); line-height: 0.98; letter-spacing: 0.04em; }
.display em, .cover__tag em, .post--cta em, .close em {
  /* Italics are for quotations only (her rule, 8 Oct): an italic serif word inside a capitals line is the
     tell of AI-made pages, so emphasis stays in the line's own face */
  font-family: inherit; font-style: normal; font-weight: inherit; text-transform: inherit; letter-spacing: inherit; color: inherit;
}
i { font-style: normal; }
/* A word that needs to stand out is told by colour, never italic (her rule, 9 Oct): "category", "reframe" and
   "the same person" are red */
.close h2 em, .cover__tag em, .post--cta em { color: var(--red-hi); }
.lede { font-size: clamp(18px, 1.45vw, 24px); line-height: 1.5; color: var(--stone); }
.lede--xl { font-size: clamp(22px, 2vw, 32px); line-height: 1.34; color: var(--bone); }
.caps { font-family: var(--display); font-size: clamp(13px, 1vw, 16px); letter-spacing: var(--track); text-transform: uppercase; color: var(--bone); }
.aside { color: var(--ash); font-size: clamp(15px, 1.15vw, 19px); }
.source { font-size: 13px; line-height: 1.5; color: var(--ash); max-width: 72ch; }
.red { color: var(--red-hi); font-weight: 400; }
.red-big { color: var(--red-hi); }
.nowrap { white-space: nowrap; }
/* The one line that should shine: white, with a white halo behind it */
.glow { position: relative; display: inline-block; color: #ffffff; font-weight: 400; font-size: 1.3em; text-shadow: 0 0 10px rgb(255 255 255 / 0.9), 0 0 26px rgb(255 255 255 / 0.6), 0 0 56px rgb(255 255 255 / 0.35); }
.glow::before { content: ""; position: absolute; inset: -0.6em -1em; z-index: -1; background: radial-gradient(closest-side, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0)); pointer-events: none; }

/* ------------------------------------------------------------- buttons */
.actions { display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 600px) { .actions .btn { flex: 1 1 100%; min-width: 0; padding-inline: 18px; letter-spacing: 0.16em; } }
.actions__note { margin-top: 14px; font-size: 13px; color: var(--ash); }
.close .actions__note { position: relative; margin-top: -16px; max-width: 46ch; font-size: 15px; line-height: 1.55; color: var(--stone); }
.close__note b { display: block; margin-bottom: 6px; font-family: var(--display); font-weight: 400; font-size: 12px; letter-spacing: var(--track); text-transform: uppercase; color: var(--bone); }
/* Her choice (round five, option 1): the hairline pill. Fully rounded ends, a red fill for the
   primary, a fine inset outline for the secondary; the trailing letter-space is trimmed so the
   label sits optically centred */
.btn {
  display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 30px 0 calc(30px + 0.24em);
  border-radius: 999px; font-family: var(--display); font-weight: 400; font-size: 12.5px; line-height: 1;
  letter-spacing: var(--track); text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.btn--red { background: var(--red); color: var(--bone); }
.btn--red:hover { background: var(--red-press); }
.btn--line { box-shadow: inset 0 0 0 1px rgb(242 239 235 / 0.42); color: var(--bone); }
.btn--line:hover { box-shadow: inset 0 0 0 1px var(--bone); background: rgb(242 239 235 / 0.07); }
/* Solid white, for Visit Messaging Studio only (her ask, 8 Oct: "so more people see it") */
.btn--white { background: var(--bone); color: var(--ink); }
.btn--white:hover { background: #fff; }
.link { display: inline-block; margin-top: 8px; font-family: var(--display); font-size: 12px; letter-spacing: var(--track); text-transform: uppercase; text-decoration: none; padding-bottom: 6px; border-bottom: 1px solid var(--red-hi); color: var(--bone); }
.link:hover { color: var(--stone); }

/* ------------------------------------------------------------- chrome */
.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}
.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 80; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--red-hi); transform-origin: 0 50%; transform: scaleX(var(--read, 0)); }

.bar {
  position: fixed; inset: 0 0 auto; z-index: 70; height: var(--bar);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-inline: var(--gutter);
  background: linear-gradient(rgb(11 10 10 / 0.6), rgb(11 10 10 / 0));
  border-bottom: 1px solid transparent;
  transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease);
}
.bar.is-solid { background: rgb(11 10 10 / 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* Menu 2, her pick: a calm bar. Left: her dragon, her name, a hairline, First Principles and LinkedIn.
   Right: the call to action and Menu, which opens a full-screen index */
.bar__left, .bar__right { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); min-width: 0; }
.bar__right { gap: 22px; }
.bar__mark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.bar__mark img { width: 30px; height: 30px; border-radius: 50%; }
.bar__mark span, .bar__link, .bar__menu { font-family: var(--display); font-size: 12px; letter-spacing: var(--track); text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.bar__rule { display: none; }
.bar__link { display: inline-flex; align-items: center; gap: 6px; color: var(--stone); }
.bar__link:hover { color: var(--bone); }
.ext { width: 8px; height: 8px; flex: none; opacity: 0.8; }
/* The two calls to action sit as a pair, closer than the bar's gap: the quiet session first, then the red project */
.bar__cta + .bar__cta { margin-left: -10px; }
.btn--sm { height: 38px; padding: 0 18px 0 calc(18px + 0.22em); font-size: 11px; letter-spacing: var(--track); }
.bar__menu { display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; padding: 8px 0; color: var(--bone); cursor: pointer; }
.bar__burger { position: relative; display: grid; gap: 6px; width: 22px; }
.bar__burger i { display: block; height: 1px; background: currentColor; transition: transform 0.35s var(--ease); }
.bar__menu[aria-expanded="true"] .bar__burger i:first-child { transform: translateY(3.5px) rotate(45deg); }
.bar__menu[aria-expanded="true"] .bar__burger i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
@media (max-width: 900px) { .bar__rule, .bar__link, .bar__cta { display: none; } }
@media (max-width: 760px) {
  .bar__mark span, .bar__menu { font-size: 11px; letter-spacing: var(--track); }
  .bar__mark img { width: 26px; height: 26px; }
}
.menu { position: fixed; inset: 0; z-index: 65; display: grid; grid-template-rows: 1fr auto; padding: calc(var(--bar) + 6vh) var(--gutter) 40px; background: var(--ink); overflow: hidden auto; }
.menu__dragon { position: absolute; right: -30px; top: 12vh; height: 72vh; width: auto; opacity: 0.14; pointer-events: none; }
.menu__index { position: relative; align-self: center; }
.menu__index ol { display: grid; gap: 4px; }
.menu__index a { display: flex; align-items: baseline; gap: 26px; text-decoration: none; }
.menu__index i { width: 40px; flex: none; font-family: var(--display); font-size: 13px; letter-spacing: var(--track); line-height: 1; padding-top: 0.5em; color: var(--red-hi); }
.menu__index span { font-family: var(--display); font-size: clamp(27px, 3.5vw, 50px); line-height: 1.12; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bone); transition: color 0.3s var(--ease); }
.menu__index a:hover span, .menu__index a:focus-visible span { color: var(--red-hi); }
.menu__index a::after { content: ""; align-self: center; width: 0; height: 1px; margin-left: 6px; background: var(--red-hi); transition: width 0.35s var(--ease); }
.menu__index a:hover::after, .menu__index a:focus-visible::after { width: 64px; }
.menu__foot { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 34px; padding-top: 28px; }
.menu__links { display: flex; flex-wrap: wrap; gap: 14px 34px; }
.menu__links a { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 11px; letter-spacing: var(--track); text-transform: uppercase; color: var(--stone); text-decoration: none; }
.menu__links a:hover { color: var(--bone); }
@media (max-width: 760px) {
  .menu { padding-top: calc(var(--bar) + 28px); }
  .menu__index a { gap: 0; }
  .menu__index i { width: 34px; font-size: 17px; }
  .menu__index a::after { display: none; }
  .menu__foot .actions { width: 100%; }
}
html:has(.menu:not([hidden])) { overflow: hidden; }
[id] { scroll-margin-top: var(--bar); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ------------------------------------------------------------- shared scene mechanics */
.scene { position: relative; height: var(--len, 300vh); }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; overflow: clip; }
html:not(.js) .scene, .still .scene { height: auto; }
html:not(.js) .stage, .still .stage { position: relative; height: auto; overflow: visible; }
.js .reveal { opacity: 0; transform: translateY(42px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.still .reveal { opacity: 1 !important; transform: none !important; }
section { position: relative; }

/* ------------------------------------------------------------- cover */
.cover {
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center;
  padding-left: var(--gutter);
}
.cover__text { position: relative; z-index: 2; padding-block: calc(var(--bar) + 48px) 72px; padding-right: 4vw; }
.cover__name { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(44px, 6.4vw, 112px); line-height: 1; letter-spacing: 0.14em; }
.cover__name span { display: block; overflow: hidden; }
.cover__roles { margin-bottom: 32px; font-family: var(--display); text-transform: uppercase; letter-spacing: var(--track); font-size: clamp(10px, 0.86vw, 13px); color: var(--stone); }
@media (min-width: 1000px) { .cover__roles { white-space: nowrap; } }
.cover__kicker { margin-top: 62px; font-family: var(--display); text-transform: uppercase; letter-spacing: var(--track); font-size: clamp(12px, 1.05vw, 15px); color: var(--bone); }
/* No red rule under her name (her call, 8 Oct): the kicker keeps the rule's space */
.cover__tag { margin-top: 14px; font-size: clamp(18px, 1.6vw, 26px); line-height: 1.4; color: var(--stone); }
.cover__actions { margin-top: 64px; }
/* Subscribe on the cover (her ask, 8 Oct): one quiet line under the two calls to action, the live
   site's inline form (modals.js bindInline: Substack plus Attio, and the pop-up is not offered again) */
/* subscribing is the first call to action (her call, 9 Oct); the two buttons follow, with room between */
.cover__sub { position: relative; margin-top: 44px; max-width: 540px; }
/* the newsletter's name in red, the invitation in white, larger than the small labels (her note, 9 Oct) */
.cover__sub-label { font-family: var(--display); font-size: clamp(16px, 1.35vw, 20px); letter-spacing: var(--track); text-transform: uppercase; color: var(--bone); margin-bottom: 14px; }
.cover__sub-label span { color: var(--red-hi); }
/* One container holding the field and a filled button (her pick, 9 Oct, after Kleo's sign-up bar): it reads as
   one action. The container keeps an edge, as form fields do */
.cover__sub-row { display: flex; gap: 6px; align-items: center; padding: 6px; border-radius: 999px; background: rgb(242 239 235 / 0.05); box-shadow: inset 0 0 0 1px rgb(242 239 235 / 0.22); transition: box-shadow 0.3s var(--ease); }
.cover__sub-row:focus-within { box-shadow: inset 0 0 0 1px var(--red-hi); }
.cover__sub-field { flex: 1 1 auto; min-width: 0; }
.cover__sub .input { height: 50px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; font-size: 16px; }
.cover__sub .input:focus { border: 0; }
.cover__sub .btn { flex: none; height: 50px; border-radius: 999px; border: 0; cursor: pointer; }
.cover__sub .eyebrow { font-family: var(--display); font-size: 12px; letter-spacing: var(--track); text-transform: uppercase; color: var(--red-hi); }
.cover__sub .modal__desc { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--stone); }
.cover__photo { position: relative; margin-top: var(--bar); height: calc(100vh - var(--bar)); height: calc(100svh - var(--bar)); overflow: hidden; }
.cover__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transform: translateY(calc(var(--cy, 0) * 1px)) scale(calc(1.04 + var(--cz, 0) * 0.08)); }
.js .cover__kicker, .js .cover__roles, .js .cover__tag, .js .cover__actions, .js .cover__note, .js .cover__sub { opacity: 0; transform: translateY(18px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.cover__name span span { display: block; }
.js .cover__name span span { transform: translateY(105%); transition: transform 1.4s var(--ease); }
.js .cover__photo { clip-path: inset(100% 0 0 0); transition: clip-path 1.8s var(--ease); }
.is-ready .cover__kicker, .is-ready .cover__roles, .is-ready .cover__tag, .is-ready .cover__actions, .is-ready .cover__note, .is-ready .cover__sub { opacity: 1; transform: none; }
.is-ready .cover__sub { transition-delay: 0.7s; }
.is-ready .cover__roles { transition-delay: 0.1s; }
.is-ready .cover__kicker { transition-delay: 0.55s; }
.is-ready .cover__tag { transition-delay: 0.6s; }
.is-ready .cover__actions { transition-delay: 0.85s; }
.is-ready .cover__note { transition-delay: 0.95s; }
.is-ready .cover__name span span { transform: none; }
.is-ready .cover__name > span:nth-child(2) span { transition-delay: 0.12s; }
.is-ready .cover__photo { clip-path: inset(0 0 0 0); }
@media (max-width: 900px) {
  .cover { grid-template-columns: 1fr; padding: 0; align-items: end; }
  .cover__photo { position: absolute; inset: var(--bar) 0 0; margin-top: 0; height: auto; }
  .cover__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(11 10 10 / 0) 14%, rgb(11 10 10 / 0.88) 46%, var(--ink)); }
  .cover__text { padding: 38vh var(--gutter) 48px; }
}

/* ------------------------------------------------------------- press band */
.press { padding: 64px 0 56px; overflow: hidden; }
.press__title { padding-inline: var(--gutter); margin-bottom: 36px; font-family: var(--display); font-weight: 400; font-size: 13px; letter-spacing: var(--track); text-transform: uppercase; color: var(--red-hi); display: flex; flex-wrap: wrap; gap: 8px 24px; }
.press__title span { color: var(--ash); letter-spacing: var(--track); }
.press__rows { display: grid; gap: 14px; }
.press__row, .ticker__row { overflow: hidden; white-space: nowrap; }
.ticker__move { display: inline-flex; will-change: transform; }
.press__row p, .ticker__row p { display: inline-flex; align-items: center; flex: none; }
.press__row p { font-family: var(--display); text-transform: uppercase; font-size: clamp(30px, 4.4vw, 76px); line-height: 1.15; letter-spacing: 0.04em; }
.press__row[data-dir="-1"] p { color: transparent; -webkit-text-stroke: 1px var(--stone); }
/* Separators are small triangles pointing up (her pick, 8 Oct: she prefers triangles to diamonds) */
.press__row i, .ticker__row i { display: inline-block; width: 0.24em; height: 0.21em; margin-inline: 0.6em; background: var(--red); clip-path: polygon(50% 0, 100% 100%, 0 100%); vertical-align: 0.12em; }
.still .press__row, html:not(.js) .press__row, .still .ticker__row, html:not(.js) .ticker__row { white-space: normal; padding-inline: var(--gutter); }
.still .press__row p, html:not(.js) .press__row p, .still .ticker__row p, html:not(.js) .ticker__row p { flex-wrap: wrap; flex: 1 1 auto; }

/* ------------------------------------------------------------- turning cards: rotate it and the evidence */
.scene--turn { --len: 230vh; }
.scene--turn .stage { perspective: 1800px; }
.turn__copy { position: absolute; left: var(--gutter); top: 50%; width: min(48vw, 780px); z-index: 2; }
.turn__copy--a { opacity: calc(1 - var(--ra, 0)); transform: translateY(calc(-50% - var(--ra, 0) * 60px)); }
.turn__copy--b { opacity: var(--rb, 0); transform: translateY(calc(-50% + (1 - var(--rb, 0)) * 60px)); }
/* The two calls to action live on the About card's second side since 9 Oct (the cover keeps only subscribe) */
.turn__actions { margin-top: 36px; pointer-events: none; }
.is-turned .turn__actions, .still .turn__actions, html:not(.js) .turn__actions { pointer-events: auto; }
.turn__note { margin-top: 14px; }
.turn__copy .lede { margin-top: 28px; }
.turn__copy .caps { margin-top: 32px; line-height: 1.5; }
.turn__copy .aside { margin-top: 14px; }
.turn__copy .about__lead + .lede { margin-top: 14px; }
.turn__copy .about__lab { margin-top: 18px; font-size: clamp(16px, 1.15vw, 19px); color: var(--stone); }
.turn__copy .about__y42 { color: var(--red-hi); }
/* "Rotate it" slides in from the side as the scene starts; moving over it (or tapping it) turns the card,
   and scrolling on turns it too. --cue is how far it has arrived (home2.js) */
.turn__cue {
  display: inline-block; margin-top: 28px; padding: 10px 0; border: 0; background: none; cursor: pointer;
  font-family: var(--display); text-transform: uppercase; letter-spacing: var(--track); font-size: clamp(16px, 1.5vw, 24px); color: var(--red-hi);
  transform: translateX(calc((1 - var(--cue, 1)) * -70vw));
}
.turn__cue:focus-visible { outline: 1px solid var(--red-hi); outline-offset: 6px; }
.still .turn__cue, html:not(.js) .turn__cue { display: none; }
/* The shine: a crisp band of light sweeps across "Rotate it", then rests. Hard colour stops, so the
   sweep never blends red into pink, and the gradient always covers the words */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .js .turn__cue {
    display: inline-block;
    background: linear-gradient(100deg, var(--red-hi) 0 45%, var(--bone) 45% 52%, var(--red-hi) 52% 100%) 100% 0 / 300% 100% no-repeat;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: shine 2.8s linear infinite;
  }
}
@keyframes shine { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0 0; } }
.card3d { position: absolute; right: calc(var(--gutter) + 2vw); top: 50%; width: min(32vw, 500px); aspect-ratio: 2 / 3; transform: translateY(-50%); }
.card3d__inner {
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transform: rotateY(calc(var(--r, 0) * -180deg)) rotateX(calc(var(--tilt, 0) * 8deg)) translateZ(calc(var(--tilt, 0) * 60px));
}
.card3d__face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 40px 120px rgb(0 0 0 / 0.6); }
.card3d__face--back { transform: rotateY(180deg); object-position: 50% 30%; }
.credit { position: absolute; right: calc(var(--gutter) + 2vw); bottom: 28px; font-size: 13px; color: var(--ash); opacity: var(--rb, 0); }

/* The evidence: a phone on the front, what the post earned on the back */
.card3d--phone { width: min(26vw, 380px); aspect-ratio: 9 / 14.2; right: calc(var(--gutter) + 4vw); }
.scene--mirror .card3d--phone { width: auto; height: min(78vh, 720px); aspect-ratio: 9 / 18.8; }
@media (max-width: 900px) and (max-height: 720px) { .card3d, .card3d--phone, .scene--mirror .card3d--phone { height: 30svh; } .proof__fig span, .proof__price { font-size: 11px; } .proof__fig b, .proof__price em { font-size: 22px; } }
.scene--mirror .proof { padding: 12% 11%; gap: 18px; }
.phone {
  position: relative; overflow: hidden; background: #ffffff;
  border-radius: 38px; border: 10px solid #1c1a1a;
  box-shadow: 0 0 0 1px #3a3534, 0 50px 120px rgb(0 0 0 / 0.65);
}
.phone::before { content: ""; position: absolute; top: 8px; left: 50%; width: 30%; height: 18px; border-radius: 12px; background: #1c1a1a; transform: translateX(-50%); z-index: 2; }
.phone img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 0; padding-top: 30px; background: #ffffff; }
.proof {
  display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 10% 9%;
  background: var(--ink-2); border-radius: 38px;
}
.proof__label { font-family: var(--display); font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone); }
.proof__fig { display: grid; gap: 4px; padding-top: 18px; }
.proof__fig b { font-family: var(--display); font-weight: 400; font-size: clamp(38px, 3.6vw, 64px); line-height: 1; color: var(--bone); }
.proof__fig span { color: var(--stone); font-size: 15px; line-height: 1.4; }
.proof__price { font-size: clamp(18px, 1.5vw, 23px); line-height: 1.35; color: var(--bone); padding-top: 18px; }
.proof__price em { display: block; margin-top: 6px; font-family: var(--display); font-style: normal; font-size: clamp(40px, 3.8vw, 68px); line-height: 1; color: var(--red-hi); }
.proof__src { font-size: 11px; line-height: 1.45; color: var(--ash); }

.scene--mirror .turn__copy { left: calc(50% + 2vw); right: var(--gutter); width: auto; max-width: 720px; }
.scene--mirror .card3d--phone { right: calc(50% + 4vw); left: auto; }
@media (max-width: 900px) {
  .scene--mirror .turn__copy { left: var(--gutter); max-width: none; }
  .scene--mirror .card3d--phone { left: auto; right: 50%; }
  .card3d { right: 50%; top: calc(var(--bar) + 16px); width: auto; height: min(36svh, 420px); transform: translateX(50%); }
  .card3d--phone, .scene--mirror .card3d--phone { width: auto; height: min(38svh, 440px); aspect-ratio: 9 / 14.2; }
  /* on a phone the back of each card keeps the headline figure and the price; the middle figure and the source wait for desktop */
  .proof__fig + .proof__fig { display: none; }
  .turn__copy { left: var(--gutter); right: var(--gutter); width: auto; top: auto; bottom: 6vh; }
  .turn__copy--a { transform: translateY(calc(var(--ra, 0) * -40px)); }
  .turn__copy--b { transform: translateY(calc((1 - var(--rb, 0)) * 40px)); }
  .turn__copy--b .aside, .scene--rotate .turn__copy--b .caps, .credit, .turn__note { display: none; }
  .turn__actions { margin-top: 22px; gap: 10px; flex-wrap: nowrap; }
  .turn__actions .btn { flex: 1 1 0; min-width: 0; height: 46px; padding-inline: 10px; font-size: 11px; letter-spacing: 0.1em; white-space: normal; text-align: center; line-height: 1.25; }
  .scene--evidence .display--lg { font-size: clamp(26px, 7vw, 40px); }
  .proof, .scene--mirror .proof { gap: 10px; padding: 10% 9%; border-radius: 26px; }
  .proof__label { font-size: 13px; letter-spacing: 0.08em; }
  .proof__fig { padding-top: 10px; }
  .proof__fig b { font-size: 30px; }
  .proof__fig span { font-size: 12px; }
  .proof__price { font-size: 13px; padding-top: 10px; }
  .proof__price em { font-size: 30px; }
  .proof__src { display: none; }
  .phone { border-radius: 28px; border-width: 7px; }
}
.still .scene--turn .stage, html:not(.js) .scene--turn .stage { display: grid; gap: 48px; padding: 120px var(--gutter); }
.still .turn__copy, html:not(.js) .turn__copy { position: static; opacity: 1; transform: none; width: auto; max-width: 780px; }
.still .card3d, html:not(.js) .card3d { position: static; transform: none; width: min(80vw, 380px); }
.still .card3d__inner, html:not(.js) .card3d__inner { transform: none; display: grid; gap: 24px; height: auto; }
.still .card3d__face, html:not(.js) .card3d__face { position: relative; transform: none; height: auto; }
.still .scene--rotate .card3d, html:not(.js) .scene--rotate .card3d { display: none; }

/* ------------------------------------------------------------- ledger: capital and communication */
.ledger { padding: 18vh var(--gutter) 14vh; overflow: hidden; }
.ledger__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-bottom: 9vh; }
@media (max-width: 600px) { .ledger__head .display { font-size: min(26px, calc((100vw - 2 * var(--gutter)) / 17.5)); } }
.ledger__then-now { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 120px); margin-bottom: 10vh; }
.ledger__then-now > div { display: grid; gap: 18px; align-content: start; padding-top: 28px; color: var(--stone); font-size: clamp(17px, 1.3vw, 21px); }
.ledger__then-now .label { margin-bottom: 4px; }
.ledger__then-now .link { justify-self: start; }
.schools { display: grid; gap: 20px; margin-top: 12px; }
.schools dt { font-family: var(--display); text-transform: uppercase; letter-spacing: var(--track); font-size: 13px; color: var(--bone); margin-bottom: 6px; }
.schools dd { color: var(--ash); font-size: 16px; }
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.figures li { display: grid; gap: 8px; align-content: start; padding: 28px 24px 32px; }
.figures li:nth-child(4n + 1) { padding-left: 0; }
.figures b { font-family: var(--display); font-weight: 400; font-size: clamp(24px, 2.1vw, 34px); line-height: 1; color: var(--bone); letter-spacing: 0.04em; text-transform: uppercase; transition: color 0.6s var(--ease); }
.figures b.is-hot { color: var(--red-hi); }
.figures b.is-waiting { opacity: 0; }
.figures b { transition: color 0.6s var(--ease), opacity 0.3s var(--ease); }
.figures span { color: var(--stone); font-size: 15px; max-width: 26ch; }
.ledger > .source { margin-top: 20px; }
/* Only the bio half is paper, edge to edge; the numbers and the brands sit on black (her call, 8 Oct) */
.ledger__read.paper { position: relative; margin: -18vh calc(-1 * var(--gutter)) 10vh; padding: 18vh var(--gutter) 12vh; }
.ledger__read .ledger__then-now { margin-bottom: 0; }
.studio { margin-top: 12vh; margin-inline: calc(var(--gutter) * -1); }
.studio .title { padding-inline: var(--gutter); }
.ticker { display: grid; gap: 1.6vh; }
.ticker__row p { font-family: var(--display); text-transform: uppercase; font-size: clamp(26px, 3.6vw, 60px); line-height: 1.2; letter-spacing: 0.04em; }
.ticker__row[data-dir="-1"] p { color: transparent; -webkit-text-stroke: 1px var(--ash); }
@media (max-width: 900px) {
  .ledger__then-now { grid-template-columns: 1fr; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures li { padding-left: 16px !important; border-left: 0 !important; }
  .figures li:nth-child(odd) { padding-left: 0 !important; }
}

/* ------------------------------------------------------------- nosy: words hold, photographs slide in */
.scene--nosy { --len: calc(100vh + var(--n, 7) * 42vh); }
.scene--nosy .stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: center; padding: calc(var(--bar) + 4vh) var(--gutter) 6vh; }
.nosy__copy { display: grid; gap: 12px; align-content: center; color: var(--stone); font-size: clamp(14px, 1.02vw, 20px); line-height: 1.55; }
.nosy__copy .display { color: var(--bone); margin-bottom: 8px; font-size: clamp(22px, 2.2vw, 44px); }
.nosy__stat { font-family: var(--display); color: var(--bone); font-size: clamp(16px, 1.3vw, 24px); line-height: 1.25; letter-spacing: var(--track); text-transform: uppercase; margin-bottom: 8px; }
.nosy__num { font-family: var(--display); font-size: clamp(72px, 7.4vw, 156px); line-height: 0.86; color: var(--red-hi); letter-spacing: 0; }
.slides { display: grid; gap: 16px; }
.slides__window { overflow: hidden; overflow: clip; aspect-ratio: 3 / 2; background: #070606; }
.slides__track { display: flex; height: 100%; transform: translate3d(calc(var(--s, 0) * -100%), 0, 0); will-change: transform; }
.slides__item { flex: 0 0 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; }
.slides__item:focus-visible { outline-offset: -6px; }
.slides__item img { width: 100%; height: 100%; object-fit: contain; }
.slides__meta { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--ash); }
.slides__count { font-family: var(--display); letter-spacing: var(--track); }
.slides__count b { font-weight: 400; color: var(--red-hi); }
@media (max-width: 900px) {
  .scene--nosy { height: auto; }
  .scene--nosy .stage { position: relative; height: auto; overflow: visible; grid-template-columns: 1fr; gap: 28px; padding-block: 12vh; }
  .nosy__num { font-size: 72px; }
  .nosy__copy { font-size: 15px; }
  .scene--nosy .slides__window { aspect-ratio: auto; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .scene--nosy .slides__track { transform: none; gap: 10px; }
  .scene--nosy .slides__item { flex: 0 0 88%; aspect-ratio: 3 / 2; scroll-snap-align: start; }
  .slides__count { display: none; }
}
.still .scene--nosy .stage, html:not(.js) .scene--nosy .stage { padding-block: 120px; }
.still .slides__window, html:not(.js) .slides__window { aspect-ratio: auto; overflow-x: auto; }
.still .slides__track, html:not(.js) .slides__track { transform: none; }
.still .slides__item, html:not(.js) .slides__item { flex: 0 0 80%; aspect-ratio: 3 / 2; }
.still .slides__count, html:not(.js) .slides__count, html:not(.js) .slides__meta span:last-child { display: none; }

/* ------------------------------------------------------------- strips: vertical in, horizontal out */
.scene--strip { --len: 480vh; }
.strip__head { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(var(--bar) + 3vh); z-index: 3; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; }
.strip__head .label { margin-bottom: 0; }
.strip__hint { font-size: 13px; color: var(--ash); }
.strip__track {
  position: absolute; left: 0; top: 54%; z-index: 2;
  display: flex; align-items: center; gap: clamp(24px, 3vw, 56px);
  padding-left: var(--gutter); padding-right: 12vw;
  transform: translate3d(calc(var(--x, 0) * 1px), -50%, 0); will-change: transform;
}
/* The posts, inside phones */
.scene--posts { --len: 260vh; }
.posts__title { font-size: clamp(24px, 2.8vw, 46px); }
.posts__lede { flex-basis: 100%; font-size: clamp(16px, 1.3vw, 21px); }
.scene--posts .strip__track { top: 60%; padding-left: max(var(--gutter), 18vw); }
.posts__hint { flex-basis: 100%; margin: 0; }
.post { flex: none; display: grid; gap: 16px; }
/* Each phone shows the whole post at full width: the text first, then the screen scrolls down to the photograph
   as the phone crosses the page (--pan is the overflow in px, --sp how far it has scrolled; both set in home2.js) */
.post .phone { display: block; height: 60vh; aspect-ratio: 9 / 17.5; padding: 0; font: inherit; color: inherit; cursor: zoom-in; }
.post .phone img { position: absolute; top: 30px; left: 0; height: auto; padding-top: 0; transform: translate3d(0, calc(var(--pan, 0) * var(--sp, 0) * -1px), 0); }
.post .phone:focus-visible { outline: 2px solid var(--red-hi); outline-offset: 4px; }
.post figcaption { font-size: 15px; color: var(--stone); display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.post figcaption b { font-family: var(--display); font-weight: 400; font-size: 28px; color: var(--red-hi); letter-spacing: 0.02em; }
.post figcaption span { color: var(--ash); }
.post--cta { width: min(52vh, 460px, calc(100vw - 2 * var(--gutter))); align-self: center; gap: 0; }
.post--cta p { font-family: var(--display); text-transform: uppercase; font-size: clamp(22px, 3.2vh, 34px); line-height: 1.25; letter-spacing: 0.04em; margin-bottom: 32px; }
.post--cta em { font-size: 1.12em; }
/* Short screens (a 1366x768 laptop window, landscape phones): the lede and the hint step aside so the
   phones never pass under them; very short ones also get smaller phones, lower down */
@media (min-width: 761px) and (max-height: 780px) { .posts__lede, .posts__hint { display: none; } }
@media (min-width: 761px) and (max-height: 500px) { .scene--posts .strip__track { top: 62%; } .post .phone { height: 52vh; } }
@media (max-width: 760px) {
  /* one post at a time, held in the middle while its screen scrolls (home2.js steps the strip): the first phone starts centred */
  .scene--posts { --len: 420vh; }
  .scene--posts .strip__track { top: 62%; padding-left: calc(50vw - 12.86vh); padding-right: var(--gutter); }
  .post .phone { height: 50vh; }
  .posts__lede { display: none; }
}
.still .strip__track, html:not(.js) .strip__track { position: static; transform: none; overflow-x: auto; padding: 32px var(--gutter) 64px; }
.still .strip__head, html:not(.js) .strip__head { position: static; padding: 120px var(--gutter) 0; }
/* without the scroll animation the post scrolls inside its phone */
.still .post .phone, html:not(.js) .post .phone { overflow-y: auto; }
/* the notch stays on the frame while the post scrolls under it */
.still .post .phone::before, html:not(.js) .post .phone::before { position: sticky; top: 8px; left: auto; display: block; margin: 8px auto -26px; transform: none; }
/* without the script there is no reading view to promise */
html:not(.js) .posts__hint { display: none; }
html:not(.js) .post .phone { cursor: auto; }
.still .post .phone img, html:not(.js) .post .phone img { position: static; transform: none; padding-top: 30px; }

/* ------------------------------------------------------------- reach */
.scene--reach { --len: 300vh; }
.reach__photo { position: absolute; top: 0; right: 0; width: 44vw; height: 100%; overflow: hidden; }
.reach__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(calc(1.1 - var(--p, 0) * 0.1)); }
.reach__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink), rgb(11 10 10 / 0.2) 40%, rgb(11 10 10 / 0)); }
.reach__copy { position: absolute; left: var(--gutter); top: calc(var(--bar) + 6vh); bottom: 6vh; width: min(54vw, 880px); display: flex; flex-direction: column; z-index: 2; }
.reach__stats { position: relative; flex: 1; display: grid; align-items: center; }
.reach__stats li { grid-area: 1 / 1; display: grid; gap: 14px; }
.reach__stats b { font-family: var(--display); font-weight: 400; color: var(--red-hi); transition: color 0.7s var(--ease); line-height: 0.86; letter-spacing: 0.01em; font-size: clamp(110px, 16vw, 290px); }
.reach__stats span { font-size: clamp(20px, 2vw, 32px); color: var(--bone); max-width: 22ch; }
.js .reach__stats li { opacity: 0; transform: translateY(60px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js .reach__stats li.is-past { opacity: 0; transform: translateY(-60px); }
.js .reach__stats li.is-on { opacity: 1; transform: none; }
/* white while counting, red once landed; the colour eases only on landing, so a revisit never fades through pink */
.js .reach__stats b { color: var(--bone); transition: opacity 0.3s var(--ease); }
.js .reach__stats b.is-waiting { opacity: 0; }
.js .reach__stats b.is-landed { color: var(--red-hi); transition: opacity 0.3s var(--ease), color 0.7s var(--ease); }
.still .reach__stats b { color: var(--red-hi); opacity: 1; }
.reach__close { opacity: var(--rc, 0); }
.reach__copy .source { margin-top: 18px; opacity: var(--rc, 0); max-width: none; }
.reach__ticks { position: absolute; left: calc(var(--gutter) / 2 - 1px); top: 50%; transform: translateY(-50%); display: grid; gap: 14px; z-index: 2; }
.reach__ticks i { display: block; width: 2px; height: 34px; background: transparent; transition: background 0.4s; }
.reach__ticks i.is-on { background: var(--red-hi); }
@media (max-width: 900px) {
  .reach__photo { width: 100%; opacity: 0.32; }
  .reach__copy { width: auto; right: var(--gutter); }
  .reach__ticks { left: auto; right: var(--gutter); }
}
.still .scene--reach .stage, html:not(.js) .scene--reach .stage { padding: 120px var(--gutter); }
.still .reach__copy, html:not(.js) .reach__copy { position: relative; inset: auto; width: auto; }
.still .reach__stats, html:not(.js) .reach__stats { gap: 40px; margin-block: 40px; }
.still .reach__stats li, html:not(.js) .reach__stats li { grid-area: auto; }
.still .reach__stats b, html:not(.js) .reach__stats b { font-size: clamp(80px, 12vw, 180px); }
.still .reach__close, .still .reach__copy .source, html:not(.js) .reach__close, html:not(.js) .reach__copy .source { opacity: 1; }
.still .reach__ticks, html:not(.js) .reach__ticks, .still .reach__photo, html:not(.js) .reach__photo { display: none; }

/* ------------------------------------------------------------- depth */
.depth { padding: 20vh var(--gutter); }
.depth > .display { font-size: clamp(30px, 4.6vw, 84px); }
.depth__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 120px); margin-top: 10vh; align-items: center; }
.depth__post .phone { width: min(100%, 380px); aspect-ratio: 9 / 16.5; }
.depth__right { display: grid; gap: 7vh; }
.depth__quote { position: relative; padding-left: clamp(56px, 6.6vw, 112px); }
.depth__quote::before { content: "\201C"; position: absolute; left: 0; top: -0.18em; font-family: var(--italic); font-size: clamp(90px, 10vw, 170px); line-height: 1; color: var(--red-hi); }
.depth__quote p { font-family: var(--italic); font-style: italic; font-size: clamp(28px, 3.1vw, 52px); line-height: 1.2; color: var(--bone); }
.depth__quote p::after { content: "\201D"; color: var(--red-hi); }
.depth__quote footer { margin-top: 24px; font-size: 14px; color: var(--ash); }
.depth__stat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; padding-top: 28px; }
.depth__stat b { font-family: var(--display); font-weight: 400; font-size: clamp(72px, 7.5vw, 130px); line-height: 0.9; color: var(--red-hi); }
.depth__stat span { color: var(--stone); max-width: 40ch; }
.depth__stat .red { color: var(--red-hi); }
@media (max-width: 900px) {
  .depth__grid { grid-template-columns: 1fr; }
  .depth__post .phone { width: min(70vw, 300px); margin-inline: auto; }
  .depth__stat { grid-template-columns: 1fr; gap: 12px; }
}

/* ------------------------------------------------------------- cta band */
.cta-band { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 32px; padding: 10vh var(--gutter); }
.cta-band .actions { justify-content: center; }
.cta-band__line { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.06em; font-size: clamp(24px, 2.6vw, 44px); }

/* ------------------------------------------------------------- First Principles: the framework, the pyramid, the newsletter */
.fp { padding: 16vh var(--gutter); }
.fp__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 120px); align-items: center; }
.fp__copy { display: grid; gap: 18px; color: var(--stone); font-size: clamp(16px, 1.15vw, 19px); }
.fp__copy .label { margin-bottom: 0; }
.fp__copy .lede { color: var(--bone); }
.fp__punch { margin-top: 10px; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.06em; font-size: clamp(20px, 1.8vw, 30px); color: var(--bone); }
.fp__formula { font-family: var(--display); text-transform: uppercase; letter-spacing: var(--track); font-size: clamp(15px, 1.25vw, 20px); color: var(--red-hi); }
.fp__formula .fp__action { font-family: var(--display); font-style: normal; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8em; color: var(--bone); }
.fp__rhs { white-space: nowrap; }
@media (max-width: 600px) { .fp__action { display: block; } }
.fp__formula .op { font-family: var(--body); font-style: normal; font-weight: 400; letter-spacing: 0; font-size: 1em; color: var(--bone); margin-inline: 0.3em; }
@media (prefers-reduced-motion: no-preference) {
  .js .fp__formula .w { display: inline-block; opacity: 0; transform: translateY(0.35em); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: calc(var(--after, 0s) + var(--i, 0) * 0.5s); }
  .js .fp__formula.is-said .w { opacity: 1; transform: none; }
  /* once a term has decoded it glows, flaring then settling (her ask, 9 Oct) */
  .js .fp__formula .w.is-glow { animation: term-glow 1.8s var(--ease) forwards; }
  @keyframes term-glow { 0% { text-shadow: none; } 35% { text-shadow: 0 0 14px rgb(204 31 63 / 0.85), 0 0 34px rgb(204 31 63 / 0.4); } 100% { text-shadow: 0 0 10px rgb(204 31 63 / 0.35); } }
}
.fp__news { margin-top: 16vh; }
/* Only the reading half of First Principles is paper, edge to edge; the newsletter and its photos sit on black */
.fp__grid.paper { position: relative; margin: -16vh calc(-1 * var(--gutter)) 0; padding: 16vh var(--gutter) 14vh; }
.fp__news-head { display: grid; gap: 14px; margin-bottom: 48px; }
.fp__news-head .title { margin-bottom: 0; }
/* the newsletter's name in red italics like the book's, "the newsletter" smaller in upright capitals beside it (her call, 9 Oct) */
.fp__news-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25em 0.6em; }
.fp__news-name { font-family: var(--italic); font-style: italic; text-transform: none; letter-spacing: 0; color: var(--red-hi); }
.fp__news-kind { font-size: 0.42em; letter-spacing: var(--track); color: var(--bone); }
.fp__tagline { font-family: var(--body); font-size: clamp(22px, 2.2vw, 36px); line-height: 1.25; color: var(--bone); }
.fp__subs { color: var(--stone); }
.fp__subs b { font-family: var(--display); font-weight: 400; font-size: 1.4em; color: var(--red-hi); margin-right: 6px; }
.fp__editions { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 2.4vw, 40px); align-items: start; }
.edition { display: grid; gap: 10px; text-decoration: none; color: var(--bone); }
.edition__img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ink-2); }
.edition__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transition: transform 1.2s var(--ease); }
.edition:hover .edition__img img { transform: scale(1.03); }
.edition__no { margin-top: 8px; font-family: var(--display); font-size: 12px; letter-spacing: var(--track); color: var(--red-hi); }
.edition__title { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.08em; font-size: clamp(20px, 1.8vw, 30px); }
.edition__dek { color: var(--stone); font-size: 15px; line-height: 1.5; }
/* The book is the theory: it closes "Why do we say yes?", beside the pyramid */
.fp__book { display: grid; gap: 10px; margin-top: 26px; }
.fp__book .title { margin-bottom: 0; }
/* the book's own name, in red italics, with the date under it in white (her call, 9 Oct: the one titled work set as a title) */
.fp__book-title { font-family: var(--italic); font-style: italic; text-transform: none; letter-spacing: 0; color: var(--red-hi); }
.fp__book-when { font-family: var(--display); font-size: clamp(14px, 1.1vw, 17px); letter-spacing: var(--track); text-transform: uppercase; color: var(--bone); margin-bottom: 8px; }
/* the book opens the black half of First Principles (her call, 8 Oct), above the newsletter */
/* the equation (left) and the book (right) open the black half, above the newsletter (her layout, 9 Oct) */
.fp__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 120px); align-items: center; margin: 0 0 14vh; }
.fp__pair .fp__book { margin: 0; }
.fp__eq .fp__punch { margin-top: 0; }
.fp__eq .fp__formula { margin-top: 22px; }
@media (max-width: 900px) { .fp__pair { grid-template-columns: 1fr; gap: 48px; } }
.fp__actions { margin-top: 56px; }
@media (max-width: 900px) { .fp__grid, .fp__editions { grid-template-columns: 1fr; } }

/* Her inverted pyramid, as on the live site: physics holds the rest up, time is the point */
.pyramid { width: 100%; max-width: 560px; justify-self: center; }
.pyramid__title { margin-bottom: 20px; text-align: center; font-family: var(--display); font-size: 14px; letter-spacing: var(--track); text-transform: uppercase; color: var(--stone); }
.pyramid__stack { display: flex; flex-direction: column-reverse; gap: 3px; }
.pyramid__stack li { display: flex; justify-content: center; align-items: center; min-height: clamp(44px, 4.2vw, 64px); }
.pyramid__stack span { font-family: var(--display); font-size: clamp(10px, 0.85vw, 13px); letter-spacing: var(--track); text-transform: uppercase; color: var(--bone); text-align: center; padding-inline: 8px; }
.pyramid__stack li:nth-child(1) { clip-path: polygon(38% 0, 62% 0, 50% 100%); background: var(--bone); align-items: flex-start; min-height: clamp(70px, 6.5vw, 100px); }
.pyramid__stack li:nth-child(1) span { color: var(--ink); padding-top: 12px; }
.pyramid__stack li:nth-child(2) { clip-path: polygon(30.4% 0, 69.6% 0, 62% 100%, 38% 100%); background: #4a0618; }
.pyramid__stack li:nth-child(3) { clip-path: polygon(22.8% 0, 77.2% 0, 69.6% 100%, 30.4% 100%); background: #6e0624; }
.pyramid__stack li:nth-child(4) { clip-path: polygon(15.2% 0, 84.8% 0, 77.2% 100%, 22.8% 100%); background: #8d0b2c; }
.pyramid__stack li:nth-child(5) { clip-path: polygon(7.6% 0, 92.4% 0, 84.8% 100%, 15.2% 100%); background: #ad1634; }
/* layers step from bright cherry (behavior) down to near black (physics), then the black tip (her note, 9 Oct:
   the near-black layers looked alike on paper) */
.pyramid__stack li:nth-child(6) { clip-path: polygon(0 0, 100% 0, 92.4% 100%, 7.6% 100%); background: #cc1f3f; }
/* The light comes on one resolution at a time, from behavior down to time: each layer starts black,
   flares a little brighter than itself as the light reaches it, then settles to its own colour */
@media (prefers-reduced-motion: no-preference) {
  .js .pyramid__stack li { filter: brightness(0.06); }
  .js .pyramid.is-lit .pyramid__stack li { animation: light-up 1s var(--ease) forwards; animation-delay: calc((6 - var(--layer)) * 0.38s); }
  .pyramid__stack li:nth-child(1) { --layer: 1; } .pyramid__stack li:nth-child(2) { --layer: 2; } .pyramid__stack li:nth-child(3) { --layer: 3; }
  .pyramid__stack li:nth-child(4) { --layer: 4; } .pyramid__stack li:nth-child(5) { --layer: 5; } .pyramid__stack li:nth-child(6) { --layer: 6; }
}
@keyframes light-up { 0% { filter: brightness(0.06); } 55% { filter: brightness(1.9); } 100% { filter: brightness(1); } }
/* On a phone: the same straight-sided triangle as on a wide screen (each layer steps in 7.6% a side, the
   tip is 1.58 layers tall), so the sides never kink. Clip-path does not narrow the layout, so each name
   is held to the width its layer actually shows, and the long ones wrap onto two lines */
@media (max-width: 640px) {
  .pyramid__stack li { min-height: 48px; }
  .pyramid__stack li:nth-child(1) { min-height: 76px; }
  .pyramid__stack span { letter-spacing: 0.14em; line-height: 1.3; }
  .pyramid__stack li:nth-child(6) span { max-width: 84%; } .pyramid__stack li:nth-child(5) span { max-width: 70%; }
  .pyramid__stack li:nth-child(4) span { max-width: 54%; } .pyramid__stack li:nth-child(3) span { max-width: 40%; }
  .pyramid__stack li:nth-child(2) span { max-width: 26%; } .pyramid__stack li:nth-child(1) span { max-width: 20%; }
}


/* ------------------------------------------------------------- worlds */
.worlds { padding: 16vh var(--gutter) 4vh; }
.worlds__head { display: grid; gap: 22px; justify-items: center; text-align: center; margin-bottom: 10vh; }
.worlds__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 40px); }
.world { display: grid; gap: 14px; align-content: start; }
.world figure { aspect-ratio: 6 / 5; margin-bottom: 14px; overflow: hidden; }
.world img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.world .label { margin-bottom: 0; }
.world__what { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.06em; font-size: clamp(18px, 1.5vw, 24px); line-height: 1.25; }
.world p:last-child { color: var(--stone); font-size: 16px; }
.world.reveal:nth-child(2) { transition-delay: 0.1s; }
.world.reveal:nth-child(3) { transition-delay: 0.2s; }
@media (max-width: 900px) { .worlds__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- ladder: the staircase from her deck */
.ladder { padding: 12vh var(--gutter) 14vh; }
/* The climb (her ask, 9 Oct: "so it looks like somebody's climbing up the stairs"): one rung at a time, the red
   line rises up the riser, runs along the tread and glows, then the step's words light. home2.js adds .is-lit to
   each step in turn; the section stays black */
.climb__step::before { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: var(--rise); background: var(--red-hi); transform-origin: 50% 100%; pointer-events: none; }
.climb__step::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: var(--red-hi); transform-origin: 0 50%; pointer-events: none; }
.js .ladder .climb__step::before { transform: scaleY(0); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
.js .ladder .climb__step::after { transform: scaleX(0); transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1) 0.26s; }
.js .ladder .climb__step > * { opacity: 0.14; transition: opacity 0.6s var(--ease) 0.45s; }
.js .ladder .climb__step.is-lit::before { transform: none; }
.js .ladder .climb__step.is-lit::after { transform: none; animation: tread-glow 1.4s ease 0.62s both; }
.js .ladder .climb__step.is-lit > * { opacity: 1; }
@keyframes tread-glow { 0% { box-shadow: 0 0 0 0 rgb(204 31 63 / 0); } 30% { box-shadow: 0 0 12px 1px rgb(204 31 63 / 0.9); } 100% { box-shadow: 0 0 0 0 rgb(204 31 63 / 0); } }
.still .ladder .climb__step::before, .still .ladder .climb__step::after, .still .ladder .climb__step > * { transform: none !important; opacity: 1 !important; animation: none !important; }
.ladder__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px 64px; align-items: end; margin-bottom: 7vh; }
/* The staircase (her pick, 9 Oct, after the climb): no boxes; each step is a hairline red tread and riser,
   standing higher than the last, with the step's word on its tread */
.climb { --rise: clamp(56px, 6vw, 92px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; padding-top: var(--rise); }
.climb__step { position: relative; margin-top: calc((4 - var(--i)) * var(--rise)); padding: 22px clamp(12px, 1.4vw, 22px) 0 clamp(14px, 1.6vw, 24px); }
.climb__word { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.1em; font-size: clamp(22px, 2.4vw, 38px); line-height: 1; color: var(--bone); }
.climb__name { margin-top: 14px; font-family: var(--display); font-weight: 400; font-size: 14px; letter-spacing: var(--track); text-transform: uppercase; color: var(--red-hi); }
/* no "draws on / measured in" line (her call, 9 Oct: campaign detail, "saying too much") */
.climb__text { margin-top: 14px; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.55; color: var(--stone); }
/* (the energy axis and the usage-rights line went on 9 Oct: deck material, not site copy) */
@media (max-width: 1000px) {
  .ladder__head { grid-template-columns: 1fr; }
  /* stacked, each step still starts with its tread and a short riser, stepping in */
  .climb { --rise: 28px; grid-template-columns: 1fr; gap: 36px; padding-top: 0; }
  .climb__step { margin-top: 0; margin-left: calc(var(--i) * 5vw); padding: 18px 0 0 18px; }
}

/* ------------------------------------------------------------- close */
.close { min-height: 100vh; display: grid; align-content: center; gap: 40px; padding: 18vh var(--gutter); overflow: hidden; }
.close__dragon { position: absolute; right: -4vw; top: 50%; width: min(42vw, 620px); height: auto; opacity: 0.2; transform: translateY(calc(-50% + var(--dy, 0) * 1px)) rotate(calc(var(--dy, 0) * 0.02deg)); pointer-events: none; }
.close .display, .close .actions { position: relative; }
.close .display--xl { font-size: clamp(44px, 6.4vw, 116px); }
.close__lines { position: relative; max-width: 40ch; color: var(--stone); font-size: clamp(19px, 1.7vw, 27px); line-height: 1.45; }

/* /messages (9 Oct): a reader leaves her a message; black, one column, the form's fields keep their edge */
.msg { min-height: 100vh; padding: calc(var(--bar) + 12vh) var(--gutter) 12vh; display: grid; gap: 7vh; align-content: start; max-width: 760px; }
.msg__intro .display { margin-top: 10px; font-size: clamp(34px, 4.4vw, 68px); }
.msg__intro .lede { margin-top: 22px; }
.msg__form { display: grid; gap: 22px; }
.msg__field { display: grid; gap: 8px; }
.msg__label { font-family: var(--display); font-size: 12px; letter-spacing: var(--track); text-transform: uppercase; color: var(--stone); }
.msg .textarea { resize: vertical; min-height: 180px; line-height: 1.55; }
.msg__check { display: flex; gap: 12px; align-items: center; font-size: 15px; color: var(--stone); cursor: pointer; }
.msg__check input { width: 18px; height: 18px; accent-color: var(--red); }
.msg__form .btn { justify-self: start; border: 0; cursor: pointer; }
.msg__done { display: grid; gap: 18px; justify-items: start; }
.msg__done[hidden] { display: none; }
.msg-page .bar { position: fixed; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding: 32px var(--gutter) 40px; font-size: 13px; color: var(--ash); }
.foot nav { display: flex; gap: 28px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--bone); }

/* ------------------------------------------------------------- full-screen image */
.studio__visit { justify-self: start; margin-top: 10px; }
/* Her partnership form (built by modals.js), dressed for this page: ink panel, hairline fields, the pill buttons */
body.is-locked { overflow: hidden; }
/* Paper (her pick, 8 Oct, "Split"): black is the page; only the reading half of First Principles (the text
   and the pyramid), the bio half of Highest leverage and the reviews turn light ("most pages are black"; pictures always sit
   on black). The tokens
   are redefined on the section, so everything inside follows */
.paper {
  --ink: #f1ece4; --ink-2: #e6dfd4; --bone: #161313; --stone: #3d3835; --ash: #6e6761; --line: #cdc4b8;
  --red-hi: #a3112e;
  background: var(--ink); color: var(--bone);
}
.paper .btn--line, .paper .voices__step { box-shadow: inset 0 0 0 1px rgb(22 19 19 / 0.4); border-color: rgb(22 19 19 / 0.4); }
.paper .btn--red { color: #f2efeb; }
.paper .btn--white { background: #161313; color: #f1ece4; }
.paper .pyramid__stack li:not(:first-child) span { color: #f2efeb; }
.paper .pyramid__stack li:first-child { background: #161313; } .paper .pyramid__stack li:first-child span { color: #f1ece4; }
.modal { position: fixed; inset: 0; z-index: 85; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgb(11 10 10 / 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: m-fade 0.4s var(--ease); }
.modal__panel { position: relative; width: 100%; max-height: calc(100svh - 32px); overflow-y: auto; overscroll-behavior: contain; padding: clamp(28px, 4vw, 48px); background: var(--ink); color: var(--bone); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 40px 120px rgb(0 0 0 / 0.6); animation: m-rise 0.5s var(--ease); }
.modal__panel--lg { max-width: 720px; } .modal__panel--md { max-width: 600px; } .modal__panel--sm { max-width: 520px; }
@keyframes m-fade { from { opacity: 0; } } @keyframes m-rise { from { opacity: 0; transform: translateY(14px); } }
.modal__close { position: absolute; right: 18px; top: 18px; background: none; border: 0; padding: 6px; color: var(--ash); line-height: 0; cursor: pointer; }
.modal__close:hover { color: var(--bone); } .modal__close svg { width: 16px; height: 16px; }
.modal__form, .modal__done { display: flex; flex-direction: column; gap: 26px; }
.modal__header { display: flex; flex-direction: column; gap: 12px; }
.modal .eyebrow { font-family: var(--display); font-size: 12px; letter-spacing: var(--track); text-transform: uppercase; color: var(--stone); }
.modal .eyebrow--accent { color: var(--red-hi); }
/* modals.js colours the newsletter pop-up's two lines with --accent, the old site's name for its red */
.modal { --accent: var(--red-hi); }
.modal .display { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.12; }
.modal__desc { font-size: 15px; line-height: 1.6; color: var(--stone); }
.modal__steps { display: flex; gap: 6px; } .modal__steps span { height: 1px; width: 64px; background: var(--line); } .modal__steps span.is-active { background: var(--red-hi); }
.modal__grid { display: grid; gap: 18px; } @media (min-width: 640px) { .modal__grid { grid-template-columns: 1fr 1fr; } } .modal__grid .span-2 { grid-column: 1 / -1; }
.modal__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.modal__choices { display: flex; flex-direction: column; gap: 10px; }
.modal__choice { width: 100%; padding: 16px 20px; border: 1px solid var(--line); border-radius: 14px; background: none; font-family: var(--display); font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; color: var(--bone); cursor: pointer; transition: border-color 0.3s var(--ease), background 0.3s var(--ease); }
.modal__choice:hover { border-color: var(--red-hi); background: rgb(204 31 63 / 0.08); }
.modal__disclaimer, .modal__fine { border-left: 1px solid var(--line); padding-left: 14px; font-size: 12px; line-height: 1.6; color: var(--ash); }
.field { display: block; } .field > .eyebrow { display: block; margin-bottom: 8px; }
.input, .select, .textarea { width: 100%; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--ink-2); font-family: var(--body); font-weight: 400; font-size: 15px; color: var(--bone); transition: border-color 0.3s; }
.input::placeholder, .textarea::placeholder { color: var(--ash); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--red-hi); }
.textarea { min-height: 112px; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a958e' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 40px; }
.select option { background: var(--ink); color: var(--bone); }
.field__hint { margin-top: 6px; font-size: 12px; color: var(--ash); } .field__error { margin-top: 6px; font-size: 12px; color: var(--red-hi); }
.checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; color: var(--stone); cursor: pointer; } .checkbox input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--red); flex-shrink: 0; }
.honeypot { pointer-events: none; position: absolute; left: -9999px; opacity: 0; }
.modal .btn--primary { background: var(--red); color: var(--bone); border: 0; cursor: pointer; } .modal .btn--primary:hover { background: var(--red-press); }
.modal .btn--outline { box-shadow: inset 0 0 0 1px rgb(242 239 235 / 0.42); background: none; color: var(--bone); border: 0; cursor: pointer; }
.modal .btn--ghost { background: none; border: 0; color: var(--ash); cursor: pointer; } .modal .btn--ghost:hover { color: var(--bone); }
.modal .btn--full { width: 100%; }
@media (prefers-reduced-motion: reduce) { .modal, .modal__panel { animation: none; } }
.popup { width: min(1180px, 94vw); height: min(860px, 90vh); max-width: none; max-height: none; padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--ink); overflow: hidden; }
.popup[open] { display: grid; grid-template-rows: auto 1fr; }
.popup__loading { grid-row: 2; grid-column: 1; place-self: center; font-family: var(--display); font-size: 11px; letter-spacing: var(--track); text-transform: uppercase; color: var(--ash); }
.popup__frame { grid-row: 2; grid-column: 1; position: relative; }
.popup::backdrop { background: rgb(11 10 10 / 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.popup__bar { display: flex; align-items: center; gap: 20px; padding: 12px 18px; }
.popup__title { flex: 1; font-family: var(--display); font-size: 11px; letter-spacing: var(--track); text-transform: uppercase; color: var(--ash); }
.popup__out, .popup__close { font-family: var(--display); font-size: 11px; letter-spacing: var(--track); text-transform: uppercase; color: var(--bone); text-decoration: none; background: none; border: 0; padding: 4px 0; cursor: pointer; }
.popup__close { border-bottom: 1px solid var(--red-hi); }
.popup__frame { width: 100%; height: 100%; border: 0; background: transparent; }
html:has(.popup[open]) { overflow: hidden; }
@media (max-width: 760px) { .popup { width: 100vw; height: 100svh; border-radius: 0; } .popup__title { display: none; } .popup__out { margin-left: auto; } }
.zoom { max-width: none; max-height: none; width: 100vw; height: 100vh; margin: 0; padding: 0; border: 0; background: rgb(11 10 10 / 0.96); }
.zoom::backdrop { background: rgb(11 10 10 / 0.9); }
.zoom[open] { display: grid; place-items: center; }
html:has(.zoom[open]) { overflow: hidden; }
.zoom img { max-width: 92vw; max-height: 86vh; width: auto; height: auto; object-fit: contain; }
.zoom__close { position: absolute; top: 20px; right: var(--gutter); background: none; border: 0; border-bottom: 1px solid var(--red-hi); padding: 4px 0; cursor: pointer; font-family: var(--display); font-size: 12px; letter-spacing: var(--track); text-transform: uppercase; color: var(--bone); }
/* A post opens at reading size and scrolls; Close stays in reach */
.zoom--read[open] { place-items: start center; overflow-y: auto; overscroll-behavior: contain; }
.zoom--read img { width: min(100vw - 2 * var(--gutter), 507px); max-width: none; max-height: none; margin: 72px 0 48px; border-radius: 12px; }
.zoom--read .zoom__close { position: fixed; z-index: 1; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--red-hi); background: rgb(11 10 10 / 0.86); }

/* ------------------------------------------------------------- What people are saying: her ten client reviews from the live
   homepage, three to a row, scrolling sideways like the live carousel (arrows step one card). No card outlines */
.voices { padding: 16vh var(--gutter) 14vh; }
.voices__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 32px; margin-bottom: 5vh; }
.voices__head .label { margin-bottom: 18px; }
.voices__nav { display: flex; gap: 12px; }
.voices__step { width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgb(242 239 235 / 0.42); background: none; color: var(--bone); font-size: 18px; cursor: pointer; }
.voices__step:hover, .voices__step:focus-visible { border-color: var(--red-hi); color: var(--red-hi); outline: none; }
.voices__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * clamp(28px, 3vw, 56px)) / 3); gap: clamp(28px, 3vw, 56px);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: 6px;
}
.voices__track::-webkit-scrollbar { display: none; }
.voices__track:focus-visible { outline: 1px solid var(--red-hi); outline-offset: 8px; }
.voice { margin: 0; display: grid; gap: 16px; align-content: start; scroll-snap-align: start; }
.voice blockquote { margin: 0; font-family: var(--italic); font-style: italic; font-size: clamp(18px, 1.35vw, 23px); line-height: 1.45; color: var(--bone); }
.voice figcaption { font-family: var(--display); font-size: 12px; letter-spacing: var(--track); text-transform: uppercase; color: var(--red-hi); }
.voices__all { margin-top: 36px; justify-self: start; }
@media (max-width: 900px) { .voices__track { grid-auto-columns: calc((100% - 28px) / 2); } }
@media (max-width: 600px) { .voices__track { grid-auto-columns: 86%; } }

/* ------------------------------------------------------------- Light (her picks with the options session, 7 Oct): mouse only
   One warm light follows the cursor with a lag (home2.js: 160px, lag 0.068, her "smaller, more lag").
   It lifts the Three Worlds photographs (the flashlight), glows faintly across the page (the torch),
   and reveals her phrases written into the dark behind some chapters. A ruler marks the line being read */
.torch, .ghost, .ruler, .eye { display: none; }
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .js .world figure { position: relative; }
  .js .world figure::before, .js .world figure::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; }
  .js .world figure::before { background: radial-gradient(circle var(--lr, 0px) at var(--mx, 50%) var(--my, 50%), rgb(255 236 214 / 0.95), rgb(255 236 214 / 0.35) 45%, transparent 100%); mix-blend-mode: soft-light; }
  .js .world figure::after { background: radial-gradient(circle calc(var(--lr, 0px) * 0.6) at var(--mx, 50%) var(--my, 50%), rgb(255 244 230 / 0.32), rgb(255 244 230 / 0.08) 55%, transparent 100%); mix-blend-mode: screen; }
  .js .torch {
    display: block; position: fixed; inset: 0; z-index: 66; pointer-events: none; mix-blend-mode: screen;
    opacity: var(--to, 0); transition: opacity 0.6s ease;
    background: radial-gradient(circle var(--torch-r, 160px) at var(--tx, -400px) var(--ty, -400px), rgb(255 234 222 / 0.13), rgb(255 234 222 / 0.05) 45%, transparent 72%);
  }
  .js .ghost {
    display: block; position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none; overflow: hidden;
    padding-inline: var(--gutter); text-align: center;
    font-family: var(--display); text-transform: uppercase; font-size: clamp(64px, 11vw, 190px); line-height: 0.92; letter-spacing: 0.02em;
    color: transparent; -webkit-text-stroke: 1px rgb(242 239 235 / 0.6);
    -webkit-mask-image: radial-gradient(circle calc(var(--torch-r, 160px) * 1.15) at var(--gx, -999px) var(--gy, -999px), #000 0%, rgb(0 0 0 / 0.5) 45%, transparent 100%);
    mask-image: radial-gradient(circle calc(var(--torch-r, 160px) * 1.15) at var(--gx, -999px) var(--gy, -999px), #000 0%, rgb(0 0 0 / 0.5) 45%, transparent 100%);
  }
  .js .ghost--red { -webkit-text-stroke-color: rgb(204 31 63 / 0.75); }
  .js .paper .ghost { -webkit-text-stroke-color: rgb(22 19 19 / 0.4); } .js .paper .ghost--red { -webkit-text-stroke-color: rgb(163 17 46 / 0.6); }
  /* html and body each paint the ink, so a phrase at z-index -1 needs its chapter to be its own layer,
     or the body's background covers it */
  .js .has-ghost { isolation: isolate; }
  .js .ghost--left { text-align: left; }
  .js .ruler {
    display: block; position: fixed; left: 0; top: 0; z-index: 64; pointer-events: none;
    width: var(--rw, 0px); height: var(--rh, 28px); transform: translate3d(var(--rx, 0px), var(--ry, -200px), 0);
    /* no edge line: the band fades in and out evenly at both ends (her note, 8 Oct) */
    background: linear-gradient(90deg, rgb(255 244 236 / 0), rgb(255 244 236 / 0.07) 18%, rgb(255 244 236 / 0.07) 82%, rgb(255 244 236 / 0));
    mix-blend-mode: screen;
    opacity: 0; transition: opacity 0.3s ease, transform 0.22s var(--ease), height 0.22s var(--ease), width 0.22s var(--ease);
  }
  .js .ruler.is-on { opacity: 1; }
  /* over paper the band darkens the line instead of lightening it */
  .js .ruler--paper { background: linear-gradient(90deg, rgb(60 40 30 / 0), rgb(60 40 30 / 0.07) 18%, rgb(60 40 30 / 0.07) 82%, rgb(60 40 30 / 0)); mix-blend-mode: multiply; }
  /* the dragon's gaze: it turns toward the cursor and its eye glows as the cursor nears its head */
  .js .close__dragon { transition: opacity 0.9s ease; transform: translateY(calc(-50% + var(--dy, 0) * 1px)) perspective(1100px) rotateY(var(--gzy, 0deg)) rotateX(var(--gzx, 0deg)); }
  .js .close.is-watched .close__dragon { opacity: 0.8; }
  .js .eye {
    display: block; position: absolute; left: var(--ex, -99px); top: var(--ey, -99px); z-index: 1; pointer-events: none;
    width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; mix-blend-mode: screen;
    background: radial-gradient(circle, rgb(255 70 100 / calc(var(--eg, 0) * 0.95)), rgb(204 31 63 / calc(var(--eg, 0) * 0.4)) 32%, transparent 68%);
  }
}

/* ------------------------------------------------------------- On stage (her pick, 7 Oct; built first in /home2-options)
   One column across the page: heading, her line set large, then the 16:9 film. It plays muted while on
   screen with her words as captions; Sound on restarts the sentence on screen */
.stage-sec { padding: 8vh var(--gutter) 6vh; }
.stage-sec__head { display: grid; gap: 12px; margin-bottom: 4vh; }
.stage-sec__head .label { margin-bottom: 0; }
.stage-sec__line { color: var(--bone); font-size: clamp(17px, 1.35vw, 22px); line-height: 1.5; }
/* the whole section fits one screen: the film is as wide as the height left over allows */
.stage-sec__body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 72px); align-items: center; }
.stage-sec__side { display: grid; gap: 26px; align-content: center; }
.stage-sec__press { margin: 0; display: grid; gap: 8px; }
.stage-sec__press blockquote { margin: 0; font-family: var(--italic); font-style: italic; font-size: clamp(16px, 1.25vw, 21px); line-height: 1.4; color: var(--bone); }
.stage-sec__press figcaption { font-family: var(--display); font-size: 11px; letter-spacing: var(--track); text-transform: uppercase; color: var(--red-hi); }
.stage-sec__side .actions { margin-top: 6px; }
.stage-sec__media { display: grid; justify-items: end; gap: 14px; }
.stage-sec__film { position: relative; width: min(100%, calc((100vh - 330px) * 16 / 9)); aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.stage-sec__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage-sec__film::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / 0.72)); pointer-events: none; }
.stage-sec__caption { position: absolute; left: 0; right: 0; bottom: clamp(18px, 4vw, 48px); z-index: 2; display: grid; justify-items: center; gap: 10px; padding-inline: 8%; text-align: center; pointer-events: none; }
.stage-sec__quote { max-width: 34ch; font-family: var(--italic); font-style: italic; font-size: clamp(17px, 1.9vw, 30px); line-height: 1.3; color: var(--bone); text-shadow: 0 2px 18px rgb(0 0 0 / 0.6); transition: opacity 0.35s ease; }
.stage-sec__quote.is-fading { opacity: 0; }
.stage-sec__credit { font-family: var(--display); font-size: 10px; letter-spacing: var(--track); text-transform: uppercase; color: rgb(242 239 235 / 0.7); }
.stage-sec__sound {
  position: absolute; top: 18px; right: 18px; z-index: 3; height: 38px; padding: 0 16px; cursor: pointer; border-radius: 999px;
  font-family: var(--display); font-size: 10px; letter-spacing: var(--track); text-transform: uppercase; color: var(--bone);
  background: rgb(11 10 10 / 0.55); border: 1px solid rgb(242 239 235 / 0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.stage-sec__sound:hover, .stage-sec__sound[aria-pressed="true"] { background: var(--bone); color: var(--ink); }
.stage-sec__sound:focus-visible { outline: 2px solid var(--red-hi); outline-offset: 3px; }
.stage-sec__stages { font-family: var(--display); font-size: 11px; letter-spacing: var(--track); text-transform: uppercase; color: var(--stone); line-height: 2; text-align: right; }
.stage-sec__stages i { display: inline-block; width: 0.62em; height: 0.54em; margin: 0 1em 0.1em; background: var(--red); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
@media (max-width: 900px) { .stage-sec__body { grid-template-columns: 1fr; } .stage-sec__media { order: -1; justify-items: stretch; } .stage-sec__stages { text-align: left; } .stage-sec__film { width: 100%; } .stage-sec__quote { font-size: 16px; } .stage-sec__sound { top: 10px; right: 10px; height: 32px; padding: 0 12px; } }

/* ------------------------------------------------------------- her picks from /home2-options (7 Oct) */
/* The opening curtain: ink over the page, her name resolving from blur, a red line under it that forms a
   small triangle (her ask, 8 Oct, in place of the plain rule), then it lifts at 2.35s.
   If the script never runs it still lifts by itself at 3.5s; with reduced motion it never shows */
.curtain {
  position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: 26px;
  background: var(--ink); pointer-events: none;
  animation: curtain-lift 1.15s cubic-bezier(0.76, 0, 0.24, 1) 3.5s both;
}
.curtain__name { font-family: var(--display); text-transform: uppercase; font-size: clamp(13px, 1.3vw, 18px); letter-spacing: 0.6em; margin-right: -0.6em; color: var(--bone); }
/* Under her name the old rule's line draws left to right, then rises into a small triangle (her ask, 8 Oct).
   Stroke in viewBox units: non-scaling-stroke breaks the dash drawing */
.curtain__tri { width: 44px; height: auto; aspect-ratio: 100 / 86.6; overflow: visible; }
.curtain__tri polygon { fill: none; stroke: var(--red-hi); stroke-width: 2.6; stroke-linejoin: miter; stroke-dasharray: 1; stroke-dashoffset: 1; }
.curtain__name span { display: inline-block; opacity: 0; filter: blur(10px); }
/* A keyframe of its own, so the lift counts from when the script starts the curtain. Sharing the fallback's
   name kept the fallback's clock (the moment the page first painted): on a slow load the curtain rose before
   the triangle closed */
.curtain.is-playing { pointer-events: auto; cursor: pointer; animation: curtain-lift-js 1.15s cubic-bezier(0.76, 0, 0.24, 1) 2.35s both; }
.curtain.is-done { animation: none; transform: translateY(-100%); visibility: hidden; }
.curtain.is-playing .curtain__name span { animation: curtain-letter 1.1s var(--ease) both; animation-delay: calc(0.25s + var(--i) * 0.055s); }
.curtain.is-playing .curtain__tri polygon { animation: curtain-draw 1s cubic-bezier(0.65, 0, 0.35, 1) 0.95s both; }
@keyframes curtain-lift { from { transform: none; } to { transform: translateY(-100%); } }
@keyframes curtain-lift-js { from { transform: none; } to { transform: translateY(-100%); } }
@keyframes curtain-letter { from { opacity: 0; filter: blur(10px); } to { opacity: 1; filter: blur(0); } }
@keyframes curtain-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
html:not(.js) .curtain { display: none; }
/* the cover's own entrance waits for the lift */
html.js:not(.is-lifted) .cover__name span span { transform: translateY(105%); }
html.js:not(.is-lifted) .cover__kicker, html.js:not(.is-lifted) .cover__roles,
html.js:not(.is-lifted) .cover__tag, html.js:not(.is-lifted) .cover__actions, html.js:not(.is-lifted) .cover__note, html.js:not(.is-lifted) .cover__sub { opacity: 0; transform: translateY(18px); }
html.js:not(.is-lifted) .cover__photo { clip-path: inset(100% 0 0 0); }
/* Words light up as you read (--lit from home2.js) */
.word { opacity: calc(0.16 + var(--lit, 0) * 0.84); transition: opacity 0.25s linear; }
/* Roles: one word at a time, turning over like the card */
.cover__roles.is-flipping { color: var(--bone); }
.flip { display: inline-block; perspective: 600px; }
.flip__word { display: inline-block; transform-origin: 50% 50% -0.6em; transition: transform 0.42s cubic-bezier(0.55, 0, 0.45, 1), opacity 0.42s; }
.flip__word.is-out { transform: rotateX(90deg); opacity: 0; }
.flip__word.is-in { transform: rotateX(-90deg); opacity: 0; transition: none; }

@media (prefers-reduced-motion: reduce) {
  .grain, .js .turn__cue { animation: none; }
  .curtain { display: none; }
  .cover__name span, .cover__photo, .cover__roles, .cover__kicker, .cover__tag, .cover__actions, .cover__note, .reveal, .reach__stats li { transition: none !important; }
}