/* Second Dove. Ivory paper over onyx red (Jonah's pick, 2026-11-03). One type system with the hero: Erode semibold in
   sentence case for every heading (its wedge serifs read as blade cuts, the hero's own material), Sentient for reading,
   Instrument Sans for controls. Bodoni Moda capitals were dropped the same day: their hairlines vanished on the paper. Every block below the hero is a piece of
   paper you can touch: one light from the upper left, the same as the hero photograph, so shadows fall down and right.
   Sizes follow the window's height as well as its width, so every block fits a laptop. (The variable names --sage and
   --sage-deep are historical: they hold the rose and red accents.) */
:root {
  --paper: #E4E0D7;
  --stock: #DBD5C9;
  --ivory: #F8F5EF;
  --ink: #171D1F;
  --ink-2: #4B3C3B;
  --deep: #101F24;
  --deep-3: #0A1316;
  --deep-2: #EAE3E2;
  --sage: #A7C1C9;
  --sage-deep: #395B65;
  --red: #243E46;
  --display: "Erode", Georgia, serif;
  --serif: "Sentient", Georgia, serif;
  --sans: "Instrument Sans", system-ui, sans-serif;
  --pad: clamp(20px, 5vw, 96px);
  --nav-h: clamp(60px, 8svh, 84px);
  --ease: cubic-bezier(.2, .7, .15, 1);
  --paper-tex: url(../media/paper-tile.webp);
  --deep-tex: url(../media/under-tile.webp);
  --sheet-a: url(../media/paper/sheet-a.webp);
  --sheet-b: url(../media/paper/sheet-b.webp);
  --strip-tex: url(../media/paper/strip.webp);
  --ground-tex: url(../media/paper/ground.webp);
  /* the edge of a sheet of heavy stock: a lit rim on the top and left, its thickness showing on the bottom and right */
  --edge: inset 1px 1px 0 rgb(257 254 248 / .8), inset -1px -1px 0 rgb(110 80 58 / .16), 1px 1px 0 #D8D2C3, 2px 2px 0 #BEB5A5;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
body { margin: 0; background: var(--deep); color: var(--ink); font-family: var(--serif); font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }
button { font: inherit; color: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* the ring takes the text colour, which is already chosen to read on its surface; filled buttons ring in their fill */
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible, .skip:focus-visible { outline-color: var(--ink); }
.btn--light:focus-visible { outline-color: var(--ivory); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--ivory); padding: 10px 14px; border-radius: 10px; }
.skip:focus { top: 12px; }

/* ---------- type ---------- */
.wordmark { font-family: var(--serif); font-size: clamp(1.35rem, 1.15rem + .5vw, 1.7rem); letter-spacing: -.015em; line-height: 1; white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; }
.wordmark .o { position: relative; display: inline-block; }
.wordmark .o::after {
  content: ""; position: absolute; left: 50%; top: calc(57% - .1em); width: .48em; height: .27em;
  transform: translate(-50%, -50%) rotate(-60deg); background: var(--leaf, var(--sage-deep));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M1 8C6 0.5 17 0 23 6C17.5 13.5 6 14.5 1 8Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M1 8C6 0.5 17 0 23 6C17.5 13.5 6 14.5 1 8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* every heading below the hero speaks the hero's language: Erode semibold, tight, no italic flourish (owner 2026-10-31:
   the italic last word is "super common"); an emphasised word takes the accent colour instead */
.display { font-family: var(--display); font-weight: 600; line-height: 1; letter-spacing: -.02em; font-kerning: normal; }
.display em { font-style: normal; color: var(--sage-deep); }
.ink .display em, .finale .display em { color: var(--sage); }
.kicker { font-family: var(--serif); font-style: italic; font-size: clamp(1rem, .92rem + .2vw, 1.12rem); color: var(--sage-deep); margin-bottom: clamp(10px, 1.8svh, 18px); }
.ink .kicker { color: var(--sage); }

/* ---------- buttons: a thick printed card. It rises off the table on hover (its far edge lifts, the shadow widens), and
   presses into the table when pushed (it drops, the shadow tightens, the top edge darkens) ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 14px;
  font: 600 1rem/1.1 var(--sans); letter-spacing: .005em; background: var(--ink); color: var(--ivory); white-space: nowrap;
  box-shadow: inset 0 1px 0 rgb(258 255 252 / .12), inset 0 -2px 0 rgb(0 0 0 / .28), 0 1px 1px rgb(18 27 30 / .25), 0 6px 14px -6px rgb(18 27 30 / .45);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), background-color .3s;
}
.btn:hover { transform: translateY(-2px) rotateX(4deg); box-shadow: inset 0 1px 0 rgb(258 255 252 / .14), inset 0 -2px 0 rgb(0 0 0 / .28), 0 3px 4px rgb(18 27 30 / .16), 0 16px 28px -10px rgb(18 27 30 / .45); }
.btn:active { transform: translateY(1px) scale(.985); transition-duration: .08s; box-shadow: inset 0 2px 3px rgb(0 0 0 / .45), inset 0 -1px 0 rgb(258 255 252 / .06), 0 0 0 rgb(18 27 30 / 0), 0 2px 4px -2px rgb(18 27 30 / .5); }
.btn--light { background: var(--ivory) var(--sheet-a); background-size: 420px; color: var(--ink); box-shadow: var(--edge), 0 1px 1px rgb(0 0 0 / .4), 0 8px 18px -8px rgb(0 0 0 / .6); }
.btn--light:hover { box-shadow: var(--edge), 0 3px 4px rgb(0 0 0 / .3), 0 18px 30px -10px rgb(0 0 0 / .65); }
.btn--light:active { box-shadow: inset 0 2px 3px rgb(80 50 40 / .35), 0 1px 0 #BEB5A5, 0 2px 4px -2px rgb(0 0 0 / .5); }
/* ink underline that draws from the left on hover, and the words press down a hair when pushed */
.link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; position: relative; transition: transform .2s var(--ease); }
.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: currentColor; opacity: .45; }
.link::before { content: ""; position: absolute; left: 0; bottom: 10px; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.link:hover::before { transform: scaleX(1); }
.link:active { transform: translateY(1px); }

/* ---------- nav ---------- */
.nav, .btn, .link, .nav__cta, .nav__contents, .contents__close, .skip, .tab, .switch__opt, .fold__tabs button { font-family: var(--sans); }
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 30; height: var(--nav-h);
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 40px); padding: 0 var(--pad);
  color: var(--ink); transition: color .5s var(--ease), transform .55s var(--ease);
}
.nav.is-hidden { transform: translateY(-110%); }
.nav [data-tone] { transition: color .45s var(--ease), border-color .45s var(--ease); }
.nav [data-tone="light"] { color: var(--ivory); --leaf: var(--sage); }
/* a word straddling the edge of a dark shape in the photograph keeps a soft halo of the opposite colour */
.nav [data-mixed][data-tone="light"] { text-shadow: 0 0 .15em rgb(18 27 30 / .6), 0 0 .6em rgb(18 27 30 / .55); }
.nav [data-mixed][data-tone="ink"] { text-shadow: 0 0 .15em rgb(248 245 239 / .75), 0 0 .6em rgb(248 245 239 / .7); }
.nav__links { display: flex; gap: clamp(18px, 2.2vw, 36px); margin-left: auto; font-size: .98rem; }
.nav__links a { padding: 10px 0; position: relative; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 14px; border: 1px solid currentColor; font-weight: 600; font-size: .95rem; white-space: nowrap; transition: background-color .3s, color .3s, transform .2s var(--ease); }
.nav__cta[data-tone="ink"] { background: rgb(248 245 239 / .38); }
.nav__cta:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.nav__cta:active { transform: translateY(1px); }
.nav .nav__cta[data-tone="light"]:hover { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.nav__contents { display: none; margin-left: auto; min-height: 44px; padding: 0 4px; background: none; border: 0; color: inherit; font: 500 1rem var(--sans); cursor: pointer; }

.contents { position: fixed; inset: 0; z-index: 40; background: var(--paper) var(--paper-tex); color: var(--ink); overflow: auto; }
.contents__inner { min-height: 100%; padding: calc(var(--nav-h) + 24px) var(--pad) 40px; display: flex; flex-direction: column; }
.contents__title { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--ink-2); margin-bottom: 18px; }
.contents ol li a { display: flex; gap: 18px; align-items: baseline; padding: 12px 0; border-top: 1px solid rgb(23 29 31 / .16); font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 1rem + 2.4vw, 2.8rem); line-height: 1.05; letter-spacing: -.015em; }
.contents ol li a .n { font: 500 1rem var(--sans); color: var(--sage-deep); min-width: 2ch; }
.contents__close { align-self: flex-start; margin-top: 28px; min-height: 44px; padding: 0 18px; border-radius: 14px; border: 1px solid var(--ink); background: none; font: 600 1rem var(--sans); color: var(--ink); cursor: pointer; }

/* ---------- 01 the hero (LOCKED, approved 2026-11-03) ---------- */
.unveil { position: relative; height: 100svh; }
.stage { position: relative; height: 100%; overflow: hidden; }
.cover { position: absolute; inset: 0; }

/* the art box: the photograph and the film share one geometry. The desktop photo is 2688x1520; it covers the window */
/* centred vertically, so a wide window crops the top and bottom evenly and the dove keeps clear of the nav */
.artbox { position: absolute; right: 0; bottom: min(0px, calc((100svh - max(100vw, calc(100svh * 1.7684)) / 1.7684) / 2)); aspect-ratio: 2688 / 1520; width: max(100vw, calc(100svh * 1.7684)); }
/* a 72px copy of the photograph, inline, so the very first paint is already the paper and the dove */
.artbox { background: url("data:image/webp;base64,UklGRhYCAABXRUJQVlA4IAoCAADQCgCdASpIACkAPrVWo00nJKMiJEsQ4BaJZQC/pEBLiHHD9/gTpAmdlGPdlk4BX8ztpg9ljKjFpLvASN3Qm9mSD9aCEZigCRlVAskmKIC8+uhdoPMfSortBuxH0ddHAAD++DeT3O6qX1KE9rjh/4pxYR5vbmfv4aFPmSbl16b9B1HmWYs/T+xqWOKpeGGmEzuYVyYjx/VhO3WXYhF3lebR4kqCYZEW7PuRjSMrDEYs/A48g1fTfkfKGeSE4Y8lLSodV1/QG8faWn1B/wgfWelp9qJ5Tn83hvYTBSVO+T5bPR1e92s3/V6dMbwAHfBlpdNy0QAAF+ZH49GN1xniWREzVd2WMHJ2347GxJKlZRvoXyR0jtYRI/rQSpFAaN1AOwjLVFtNPFL4rb1en3PILlGVTYftwuzai0dsuY/h1XFmFv+pVq1BqdfAeHpWunxS5h1F5/VuF7RN9IhvA6DmKYu4EY4Dx2/JGkprgjPj+tPM2A+IoZru3wOadMho5MFLlRzIvpKQ3P/sWVf4z88MG3q64vTXQ3dID+dac7asGDXioUkhKn3wI5NGUpMoE52c+xIbP8WLv49JyL0xO8c4wFky++UK+mSU15Oe3jI3L4pe12xHH6sM73/GqywwHQZYOcdUQQ704+8jXTSiR6vKerTsghgTy7Dytb4ALwCMLhUV+nRmhAGx9UTAAAA=") 0 0 / 100% 100% no-repeat; }
.artbox img { width: 100%; height: 100%; object-fit: fill; }
/* the film starts on the photograph itself (only the wing moves), so it simply appears once playing */
.cover__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: 0; pointer-events: none; }
.is-playing .cover__film { opacity: 1; }
.artbox { z-index: 1; }
.print { z-index: 2; }

/* the headline column ends a little before the dove's beak: beak x = 100vw - 0.548 x art width (the widened picture,
   2026-11-04; it was 0.515 on the first one) */
/* the words use the column the art leaves them (owner 2026-11-03 23:50: "super compact on the left"): the headline sets on two
   lines, "Become the" over "answer.", as large as the column allows ("Become the" measures 4.84 em in Erode), and the lede and
   the slip run as wide as the column */
.stage { --W: max(100vw, calc(100svh * 1.7684)); --col: calc(100vw - .548 * var(--W) - var(--pad) - 2.5vw); --h1: min(calc(var(--col) / 4.7), 19svh); }
.print { position: absolute; left: var(--pad); width: var(--col); }
.print { top: 50%; transform: translateY(-50%); padding-top: calc(var(--nav-h) * .5); }
.hero__title { font-family: var(--display); font-weight: 600; font-size: calc(var(--h1) * .95); line-height: .96; letter-spacing: -.02em; color: #161B1D; mix-blend-mode: multiply; }
.hero__title span { display: block; }
.hero__title span:nth-child(-n+2) { display: inline; }
.hero__title em { font-style: italic; letter-spacing: 0; }
.hero__lede { margin-top: clamp(18px, 3.2svh, 34px); max-width: min(36rem, 100%); font-family: var(--serif); font-size: clamp(1.1rem, .82rem + .62vw, 1.45rem); line-height: 1.38; color: #292F31; mix-blend-mode: multiply; }
.hero__ctas { display: flex; align-items: center; gap: 28px; margin-top: clamp(18px, 3svh, 32px); }
.hero__ctas .link { color: #22282A; white-space: nowrap; }
/* the question someone asks an AI, cut from the hero's own paper (owner 2026-11-03: "need the search bar to look more like
   paper"): the cream strip stock with its fibre, a cut edge catching the upper-left light, and a second, darker sheet laid
   under it and showing below and to the right, like the layered paper of the dove. The magnifier is pressed into it. */
.pill { position: relative; isolation: isolate; display: flex; align-items: center; gap: 14px; margin-top: clamp(18px, 3.2svh, 34px); width: min(36rem, 100%); min-height: 58px; padding: 0 26px; border-radius: 999px;
  background: #FAF6F0 var(--strip-tex); background-size: 900px;
  /* the cut edge, then the darker sheet beneath (a solid offset layer with its own lit edge), then its soft shadow */
  box-shadow: inset 1.5px 1.5px 0 rgb(257 254 248 / .9), inset -1px -1px 0 rgb(120 90 62 / .22), 0 1px 0 #DDD6C8,
    7px 8px 0 0 #D7CEBD, 7px 8px 0 1px rgb(256 251 244 / .35), 12px 18px 24px -8px rgb(60 30 18 / .42);
  font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, .9rem + .3vw, 1.25rem); line-height: 1.2; color: #22282A; }
.pill__icon { flex: none; position: relative; width: 16px; height: 16px; margin-right: 2px; border: 2px solid #8C7D6D; border-radius: 50%;
  box-shadow: inset 1px 1px 1px rgb(60 36 20 / .35), 1px 1px 0 rgb(257 254 248 / .8); }
.pill__icon::after { content: ""; position: absolute; right: -7px; bottom: -5px; width: 8px; height: 2px; border-radius: 1px; background: #8C7D6D; transform: rotate(45deg); box-shadow: 1px 1px 0 rgb(257 254 248 / .8); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* the result card: Jonah's approved clear liquid glass card from the glass-dove site, ported as it is (aeo-medspas
   polish/design-pass-1: styles/sd/sky-hero.css, the clear glass of styles/sd/clear-glass.css, the sd-lens-m lens).
   Owner 2026-11-01: "beautiful liquid glass like apple"; 2026-11-02, desktop calmer: the head, the numbers and the foot.
   Jonah 2026-11-04, on my first port: "Doesn't look the same". So it is now that card exactly: its own faces (Newsreader,
   Jost), its own mauve, and its own sizes, which on that site grow with the screen past 1536 wide (--gr is its root size:
   100% to 1536, then +0.2% of the extra width, at most 112.5%). Only its place is this page's: low on the right, on the
   blue, as in his mockup (research/refs/ref-home-blue-2026-11-04.webp). */
.sd-sky__card {
  --gr: clamp(16px, calc(16px + (100vw - 1536px) * .002), 18px);
  position: absolute; z-index: 3; right: clamp(40px, 3.6vw, calc(5 * var(--gr))); bottom: 4.5svh; width: clamp(calc(21.25 * var(--gr)), 25.4vw, calc(27 * var(--gr)));
  display: grid; padding: 18px 22px 16px; border-radius: 24px; color: #0b1f2a; text-decoration: none;
  isolation: isolate; background: none; text-shadow: none;
  box-shadow: 0 30px 56px -28px rgb(10 40 58 / 0.5), 0 8px 20px -12px rgb(10 40 58 / 0.25);
  transition: transform 300ms var(--ease);
}
/* it bends at the edges through the lens */
.sd-sky__card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(155deg, rgb(258 255 252 / 0.42), rgb(258 255 252 / 0.22) 42%, rgb(258 255 252 / 0.3));
  -webkit-backdrop-filter: blur(16px) saturate(1.25) brightness(1.1); backdrop-filter: blur(16px) saturate(1.25) brightness(1.1);
  filter: url(#sd-lens-m); clip-path: inset(0 round 24px);
}
.sd-sky__card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: inset 1px 1px 0 rgb(258 255 252 / 0.9), inset -1px -1px 0 rgb(258 255 252 / 0.45), inset 0 0 0 1px rgb(258 255 252 / 0.22), inset 0 0 7px rgb(258 255 252 / 0.28), inset 0 16px 28px -22px rgb(258 255 252 / 0.65);
  background: none;
}
.sd-sky__card:hover { transform: translateY(-3px); }
.sd-sky__card:focus-visible { outline: 3px solid #0E3543; outline-offset: 4px; }
.sd-sky__card small { display: block; font: 400 calc(0.84375 * var(--gr))/1.35 'Jost', 'Futura', 'Avenir Next', system-ui, sans-serif; color: #0b1f2a; }
.sd-sky__cardhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgb(11 31 42 / 0.16); }
.sd-sky__label { font: 600 calc(0.71875 * var(--gr))/1.2 'Jost', 'Futura', 'Avenir Next', system-ui, sans-serif; letter-spacing: 0.17em; text-transform: uppercase; color: #0b1f2a; }
.sd-sky__chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgb(258 255 252 / 0.4); font: 500 calc(0.75 * var(--gr))/1.2 'Jost', 'Futura', 'Avenir Next', system-ui, sans-serif; white-space: nowrap; }
.sd-sky__chip i { width: 5px; height: 5px; border-radius: 50%; background: #826693; }
.sd-sky__ask { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgb(11 31 42 / 0.16); }
.sd-sky__ask b { display: block; font: 400 calc(1.1875 * var(--gr))/1.2 'Newsreader', 'Iowan Old Style', Georgia, serif; }
.sd-sky__askicon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgb(258 255 252 / 0.16); }
.sd-sky__askicon svg { width: 16px; height: 16px; }
.sd-sky__nums { display: grid; grid-template-columns: 1.25fr 1fr; padding-top: 12px; }
.sd-sky__nums > span + span { padding-left: 24px; border-left: 1px solid rgb(11 31 42 / 0.16); }
.sd-sky__nums strong { display: block; font: 300 calc(3.125 * var(--gr))/1 'Newsreader', 'Iowan Old Style', Georgia, serif; letter-spacing: -0.02em; color: #5e4472; }
.sd-sky__nums em { display: block; margin-top: 8px; font: 300 calc(1.5 * var(--gr))/1.1 'Newsreader', 'Iowan Old Style', Georgia, serif; font-style: normal; color: #0b1f2a; }
.sd-sky__nums small { margin-top: 5px; padding-right: 10px; text-wrap: balance; }
.sd-sky__bar { display: block; height: 14px; margin-top: 12px; border-radius: 999px; background: rgb(11 31 42 / 0.1); box-shadow: inset 0 1px 2px rgb(10 40 58 / 0.18); overflow: hidden; }
.sd-sky__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5e4472, #826693); }
.sd-sky__engines { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; padding: 12px 0; margin-top: 12px; border-block: 1px solid rgb(11 31 42 / 0.16); }
.sd-sky__engines > span { display: flex; align-items: center; gap: 8px; }
.sd-sky__engines i { flex: none; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: #F9F9F7; color: #174a5e; }
.sd-sky__engines i svg { width: 16px; height: 16px; fill: currentColor; }
.sd-sky__engines b { display: block; font: 400 calc(0.9375 * var(--gr))/1.2 'Jost', 'Futura', 'Avenir Next', system-ui, sans-serif; }
.sd-sky__engines small { font-size: calc(0.75 * var(--gr)); }
.sd-sky__foot { display: flex; justify-content: space-between; gap: 10px; padding-top: 10px; font: 400 calc(0.78125 * var(--gr))/1.3 'Jost', 'Futura', 'Avenir Next', system-ui, sans-serif; color: #0b1f2a; }
.sd-sky__foot u { white-space: nowrap; text-underline-offset: 3px; }
/* desktop, calmer (owner 2026-11-02): the result, the date and the 3 of 5 */
@media (min-width: 1241px) {
  .sd-sky__card :is(.sd-sky__ask, .sd-sky__bar, .sd-sky__engines) { display: none; }
  .sd-sky__card .sd-sky__foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgb(11 31 42 / 0.16); }
}
/* phones: the glass site's own phone card (a solid pale blue, no backdrop), at the foot of the first screen; the calm
   desktop set, so it fits under the dove */
@media (max-aspect-ratio: 1/1) {
  .sd-sky__card { left: var(--pad); right: var(--pad); bottom: max(16px, 2.6svh); width: auto; background: linear-gradient(155deg, #DEEBEB, #C1D3DC 45%, #CFDFE3); }
  .sd-sky__card::before { display: none; }
  .sd-sky__card :is(.sd-sky__ask, .sd-sky__bar, .sd-sky__engines) { display: none; }
  .sd-sky__card .sd-sky__foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgb(11 31 42 / 0.16); }
  .hero__side { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .sd-sky__card { background: #DBE8E8; }
  .sd-sky__card::before { display: none; }
}
/* the three words of the promise, set up the right edge like a spine label (Jonah's mockup 2026-11-04) */
.hero__side { position: absolute; z-index: 3; right: 1.4vw; bottom: 12svh; writing-mode: vertical-rl; transform: rotate(180deg); margin: 0;
  font: 500 clamp(.68rem, .55rem + .2vw, .82rem) var(--sans); letter-spacing: .34em; text-transform: uppercase; color: #0E3543; }
@media (prefers-reduced-motion: no-preference) {
  .js .sd-sky__card { animation: arrive 1s var(--ease) .6s both; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .artbox { animation: settle 1.3s var(--ease) both; }
  .js .hero__lede, .js .hero__ctas, .js .pill { animation: arrive 1s var(--ease) .35s both; }
}
@keyframes settle { from { transform: scale(1.014); filter: brightness(1.04); } to { transform: none; filter: none; } }
@keyframes arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- grounds ---------- */
.ink { background: var(--deep) var(--deep-tex); background-size: 512px; color: var(--ivory); }
/* a sheet of paper laid over the dark sections: its top edge is a long cut curve, like the sheets in the hero, and it
   throws a soft shadow onto the red below */
.cut { --E: clamp(36px, 6vw, 96px); position: relative; }
/* the section's own paper, cut along a long curve and laid over the section above; its soft shadow falls on that section */
.edge, .edge-shade { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 4; }
.edge { top: calc(-1 * var(--E)); height: calc(var(--E) + 2px); background: inherit; background-position: 0 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V62C180 18 360 6 560 34S880 92 1000 40V100Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V62C180 18 360 6 560 34S880 92 1000 40V100Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.edge-shade { top: calc(-1.2 * var(--E)); height: calc(var(--E) * 1.2 + 2px); z-index: 3; background: rgb(4 8 10 / .42);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -20 1000 120' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-5%25' y='-50%25' width='110%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='9'/%3E%3C/filter%3E%3Cpath filter='url(%23b)' transform='translate(0 -10)' d='M0 100V62C180 18 360 6 560 34S880 92 1000 40V100Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -20 1000 120' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-5%25' y='-50%25' width='110%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='9'/%3E%3C/filter%3E%3Cpath filter='url(%23b)' transform='translate(0 -10)' d='M0 100V62C180 18 360 6 560 34S880 92 1000 40V100Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.cut--flip .edge, .cut--flip .edge-shade { transform: scaleX(-1); }
/* on the light sections the cut edge catches the light from the upper left */
.fuc > .edge, .how > .edge { filter: brightness(1.04); }

/* ---------- 02 are you the answer on all five? ---------- */
.ab { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 96px); align-items: center; padding: calc(var(--nav-h) + 4svh) var(--pad) 8svh; overflow: hidden; }
.ab::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 80% at 72% 40%, rgb(254 247 239 / .07), transparent 70%), radial-gradient(60% 60% at 0% 100%, rgb(0 0 0 / .35), transparent 70%); pointer-events: none; }
.ab__title { font-size: clamp(2.6rem, 1rem + 4vw, min(6rem, 11.5svh)); color: var(--ivory); max-width: 9.5em; }
.ab__names { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: clamp(18px, 3svh, 30px) 0 0; font: 500 .98rem var(--sans); color: var(--deep-2); }
.ab__names li { display: inline-flex; align-items: center; gap: 8px; }
.ab__names svg, .slip__head svg, .card__eng svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.ab__lede { margin: clamp(18px, 3svh, 30px) 0 clamp(22px, 3.6svh, 36px); max-width: 30rem; font-size: clamp(1.08rem, .9rem + .4vw, 1.32rem); line-height: 1.45; color: var(--deep-2); }

/* the printed answer: a card of heavy stock, three strips tucked through slits cut in it */
.slip { position: relative; justify-self: center; width: min(100%, 36rem); padding: 0 0 clamp(70px, 11svh, 120px); }
.slip__card { position: relative; padding: clamp(24px, 3.6svh, 38px) clamp(24px, 3vw, 42px) clamp(20px, 3svh, 30px); background: var(--ivory) var(--sheet-a); background-size: 640px; color: var(--ink); border-radius: 3px; transform: rotate(-1.6deg);
  box-shadow: var(--edge), 3px 4px 4px rgb(2 6 8 / .35), 18px 34px 60px -18px rgb(2 5 6 / .75); }
/* the shared light: brighter at the upper left, falling off to the lower right */
.slip__card::after, .loose__strip::after, .proof__sheet::after, .card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(140deg, rgb(256 253 246 / .32), rgb(256 253 246 / 0) 38%, rgb(70 40 30 / 0) 62%, rgb(70 40 30 / .09)); }
.slip__head { display: flex; align-items: center; gap: 9px; font: 600 1.02rem var(--sans); padding-bottom: 14px; border-bottom: 1px solid rgb(23 29 31 / .12); }
.slip__ask { width: fit-content; margin: 18px 0 16px auto; padding: 9px 18px; border-radius: 18px; background: rgb(120 90 70 / .1); box-shadow: inset 1px 1px 2px rgb(80 50 40 / .18), inset -1px -1px 0 rgb(258 255 252 / .5); font: 500 .98rem var(--sans); color: var(--ink-2); }
.slip__intro { font-size: 1.04rem; line-height: 1.4; color: var(--ink-2); margin-bottom: 12px; }
.slip__list { counter-reset: n; display: grid; gap: 10px; }
/* each name is printed on its own strip, pushed through two slits: the ends go under the card */
.tuck { counter-increment: n; position: relative; padding: 0 22px; }
.tuck::before, .tuck::after { content: ""; position: absolute; top: -4px; bottom: -4px; width: 3px; border-radius: 2px; z-index: 2;
  background: linear-gradient(90deg, #050A0C, #17292E 60%, rgb(255 250 243 / .7)); box-shadow: 1px 0 0 rgb(256 253 247 / .6); }
.tuck::before { left: 18px; }
.tuck::after { right: 18px; }
.tuck__strip { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; padding: 11px 18px 11px 16px; background: #FBF8F2 var(--strip-tex); background-size: 900px; overflow: hidden;
  box-shadow: inset 1px 1px 0 rgb(258 255 252 / .8), 0 1px 0 #D3CCBE, 0 3px 5px -2px rgb(60 30 20 / .3); }
.tuck__strip::before { content: counter(n) "."; grid-row: 1 / 3; font-family: var(--display); font-size: 1.5rem; line-height: 1.05; color: var(--sage-deep); }
.tuck__strip > b { font: 600 1.02rem/1.3 var(--sans); }
.tuck__strip > span { font-size: .98rem; line-height: 1.35; color: var(--ink-2); }
/* the strip darkens where it dives under the card at each slit */
.tuck__strip::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgb(17 29 33 / .22), rgb(17 29 33 / 0) 18px, rgb(17 29 33 / 0) calc(100% - 18px), rgb(17 29 33 / .22)); }
.slip__tag { margin-top: 14px; font-style: italic; font-size: .95rem; color: var(--ink-2); }
/* yours: a strip that was never tucked in, lying loose beside the card */
.loose { position: absolute; left: 10%; right: -2%; bottom: 0; display: flex; justify-content: flex-end; }
.loose__strip { position: relative; display: inline-flex; align-items: baseline; gap: 18px; padding: 15px 26px; background: #FBF8F2 var(--strip-tex); background-size: 900px; color: var(--ink); transform: rotate(3.2deg);
  box-shadow: var(--edge), 4px 6px 6px rgb(2 5 6 / .38), 16px 30px 44px -14px rgb(2 5 6 / .7); }
.loose__strip b { font: 600 1.1rem var(--sans); }
/* "Not named", stamped in red ink, slightly off square */
.loose__strip em { font: 700 .82rem/1 var(--sans); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: #3A6673; padding: 7px 10px 6px; border: 2px solid currentColor; border-radius: 4px; transform: rotate(-4deg); mix-blend-mode: multiply; opacity: .9; }
/* the card is charcoal stock laid out like the ChatGPT app in dark mode, the same screen the phone below uses, so it reads as
   ChatGPT at a glance (owner 2026-11-03); the three names are charcoal strips tucked into it, and yours is the one cream
   strip, left out */
.slip__card { --gpt-ink: #F7F6F3; --gpt-2: #C3C5C7; --gpt-3: #9B9C9E; background: #212121; color: var(--gpt-ink); border-radius: 18px;
  box-shadow: inset 1px 1px 0 rgb(258 255 252 / .08), 1px 1px 0 #111, 2px 2px 0 #090909, 3px 4px 4px rgb(2 6 8 / .45), 18px 34px 60px -18px rgb(0 0 0 / .8); }
.slip__card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: var(--sheet-a) 0 0 / 700px auto; mix-blend-mode: soft-light; opacity: .42; }
.slip__card::after { background: linear-gradient(140deg, rgb(257 254 248 / .07), rgb(257 254 248 / 0) 45%); }
.slip__head { color: var(--gpt-ink); border-bottom-color: rgb(258 255 252 / .1); font-size: 1.12rem; }
.slip__head svg { width: 20px; height: 20px; }
.slip__ask { background: #303030; box-shadow: inset 1px 1px 0 rgb(258 255 252 / .06), 1px 2px 4px rgb(0 0 0 / .35); color: var(--gpt-ink); font-size: 1.02rem; border-radius: 20px; }
.slip__intro { color: var(--gpt-ink); font-family: var(--sans); font-size: 1.02rem; }
.tuck__strip { background: #2A2A2A; box-shadow: inset 1px 1px 0 rgb(258 255 252 / .07), 0 1px 0 #111, 0 3px 6px -2px rgb(0 0 0 / .5); border-radius: 4px; }
.tuck__strip::before { font-family: var(--sans); font-weight: 600; font-size: 1.05rem; line-height: 1.3; color: var(--gpt-ink); }
.tuck__strip > b { color: #fff; }
.tuck__strip > span { color: var(--gpt-2); font-family: var(--sans); font-size: .92rem; }
.tuck__strip::after { background: linear-gradient(90deg, rgb(0 0 0 / .5), rgb(0 0 0 / 0) 18px, rgb(0 0 0 / 0) calc(100% - 18px), rgb(0 0 0 / .5)); }
.tuck::before, .tuck::after { width: 2px; background: linear-gradient(90deg, #000, #070707 60%, rgb(258 255 252 / .2)); box-shadow: 1px 0 0 rgb(258 255 252 / .08); }
.slip__tag { color: var(--gpt-3); font-family: var(--sans); font-style: normal; font-size: .85rem; text-align: center; }
.loose__strip { padding: 17px 28px; }
.loose__strip b { font-size: 1.22rem; }
@media (prefers-reduced-motion: no-preference) {
  .js .slip .tuck__strip { transform: translateX(104%); transition: transform 1.1s var(--ease); }
  .js .slip .tuck { overflow: hidden; clip-path: inset(-6px 19px -6px 19px); }
  .js .slip.is-in .tuck__strip { transform: none; }
  .js .slip.is-in .tuck:nth-child(2) .tuck__strip { transition-delay: .18s; }
  .js .slip.is-in .tuck:nth-child(3) .tuck__strip { transition-delay: .36s; }
  .js .slip .loose__strip { opacity: 0; transform: translate(-30px, -70px) rotate(-9deg); transition: opacity .5s var(--ease) .9s, transform 1.2s cubic-bezier(.3, 1.35, .45, 1) .9s; }
  .js .slip.is-in .loose__strip { opacity: 1; transform: rotate(3.2deg); }
}

/* ---------- 03 found, understood, chosen: a real cut in the hero's paper, pieces of the same stock moved by hand ----------
   No board: the cut sheet is the section's ground, its left edge melting into the paper the words sit on. The ground tone
   is sampled from the photograph (art/hf/cut.png), so the seam does not show. */
.fuc { position: relative; height: 150svh; background: #ECE7DB; color: var(--ink); }
.fuc__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, min(34rem, 36vw)); align-items: center; padding: calc(var(--nav-h) + 1svh) var(--pad) 3svh; }
.fuc__text { position: relative; z-index: 3; }
.fuc__title { font-size: clamp(2.2rem, 1rem + 3vw, min(4.8rem, 9svh)); color: #161B1D; }
.fuc__intro { margin-top: clamp(12px, 2svh, 20px); max-width: 28rem; font-size: clamp(1rem, .9rem + .25vw, 1.15rem); line-height: 1.45; color: var(--ink-2); }
.fuc__panels { display: grid; margin-top: clamp(14px, 2.6svh, 28px); }
.fuc__panel { grid-area: 1 / 1; transition: opacity .6s var(--ease), transform .7s var(--ease); }
.js .fuc__panel:not(.is-on) { opacity: 0; transform: translateY(14px); pointer-events: none; }
.fuc__h { font-size: clamp(1.9rem, 1rem + 2.3vw, min(3.6rem, 7.4svh)); color: var(--sage-deep); }
.fuc__lead { margin-top: clamp(8px, 1.4svh, 16px); max-width: 24ch; font-size: clamp(1.2rem, .95rem + .65vw, 1.7rem); line-height: 1.25; letter-spacing: -.006em; }
.fuc__facts { margin-top: clamp(8px, 1.6svh, 16px); max-width: 30rem; font-size: clamp(.98rem, .9rem + .2vw, 1.1rem); line-height: 1.5; color: var(--ink-2); }
/* chapter tabs: small tags of the same stock, the open one lifted and lit */
.fuc__tabs { display: flex; gap: 8px; margin-top: clamp(16px, 3svh, 30px); }
.tab { position: relative; display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 10px 16px 9px; border: 0; border-radius: 3px; cursor: pointer;
  background: #F5F1EA var(--sheet-a); background-size: 420px; color: var(--ink-2); font-weight: 600; font-size: .92rem; letter-spacing: .01em;
  box-shadow: inset 1px 1px 0 rgb(257 254 248 / .8), 1px 1px 0 #D0C7B6, 0 2px 3px rgb(60 35 20 / .18); transform: rotate(var(--tilt, 0deg)); transition: transform .35s var(--ease), box-shadow .35s var(--ease), color .3s; }
.tab:nth-child(1) { --tilt: -1.2deg; } .tab:nth-child(2) { --tilt: .8deg; } .tab:nth-child(3) { --tilt: -.5deg; }
.tab__n { font-family: var(--display); font-weight: 600; font-size: 1rem; color: var(--sage-deep); }
.tab:hover { transform: rotate(var(--tilt)) translateY(-2px); box-shadow: inset 1px 1px 0 rgb(257 254 248 / .8), 1px 1px 0 #D0C7B6, 2px 6px 8px rgb(60 35 20 / .22); }
.tab:active { transform: rotate(var(--tilt)) translateY(1px); box-shadow: inset 1px 1px 2px rgb(80 50 30 / .25), 0 1px 0 #D0C7B6; }
.tab.is-on { color: var(--ink); background-color: #FBF7F1; transform: rotate(0deg) translateY(-3px); box-shadow: inset 1px 1px 0 #fff, 1px 1px 0 #D0C7B6, 2px 2px 0 #BCB2A0, 4px 9px 12px rgb(60 35 20 / .26); }
.tab:focus-visible { outline-offset: 3px; }

/* the phone: cut from titanium-grey card stock (owner 2026-11-03: black "at least", then "too black", then picked B, titanium grey;
   recoloured by art/recolor_phone.py), lying level on the table. Its screen is charcoal card stock, laid out
   like the ChatGPT app in dark mode (owner 2026-11-03: "make the interface look charcoal like chat gpt", so anyone can
   tell what it is without reading). Your business is the one strip of cream paper on it. The screen box is measured from
   the picture (art/prep_phone.py). */
.fuc { background: #EFEADF var(--ground-tex); background-size: 680px; }
.fuc__pin { z-index: 1; }
.fuc::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(70% 90% at 70% 45%, rgb(256 252 245 / .35), transparent 70%), linear-gradient(160deg, rgb(256 252 245 / .25), rgb(70 45 25 / .1)); }
.phone { position: absolute; z-index: 2; top: 50%; right: max(var(--pad), calc(30vw - 25svh)); height: min(94svh, 1060px); aspect-ratio: 760 / 1520; margin: 0; transform: translateY(-48%); /* level: Jonah 2026-11-03, the tilt "feels weird" */
  filter: drop-shadow(1px 2px 1px rgb(60 30 15 / .35)) drop-shadow(16px 26px 30px rgb(60 30 15 / .34)); }
.phone__body { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* the red paper camera island, cut from the phone picture itself and laid back over the charcoal screen */
.phone__island { position: absolute; z-index: 4; left: 37.63%; width: 24.74%; top: 4.21%; height: 3.55%; border-radius: 999px; background: radial-gradient(60% 90% at 50% 30%, #2F5059, #14292F 75%); box-shadow: inset 0 1px 1px rgb(214 235 241 / .18), inset 0 -1px 2px rgb(0 0 0 / .5); }
.phone__glass { position: absolute; z-index: 3; left: 6.974%; right: 6.974%; top: 2.829%; bottom: 2.829%; border-radius: 13.15% / 6%; pointer-events: none;
  background: linear-gradient(118deg, rgb(258 255 252 / .09) 0%, rgb(258 255 252 / .03) 28%, rgb(258 255 252 / 0) 42%); box-shadow: inset 0 0 0 1px rgb(258 255 252 / .04); }
.screen { --gpt-bg: #212121; --gpt-ink: #F7F6F3; --gpt-2: #C3C5C7; --gpt-3: #9B9C9E; --gpt-bubble: #303030;
  position: absolute; z-index: 2; left: 6.974%; right: 6.974%; top: 2.829%; bottom: 2.829%; border-radius: 13.15% / 6%; overflow: hidden; container-type: size; color: var(--gpt-ink);
  background: var(--gpt-bg); box-shadow: inset .8cqw 1.1cqw 1.4cqw rgb(0 0 0 / .75), inset -.25cqw -.25cqw 0 rgb(258 255 252 / .1); font-family: var(--sans); }
/* charcoal card stock: the same cotton fibre as the cream, faintly lit from the upper left */
/* a real screen now, not paper: no fibre on it */
.screen::before { content: none; }
.screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(150deg, rgb(257 254 248 / .07), rgb(257 254 248 / 0) 45%); }
/* the app bar: menu, the name with its mark and chevron, new chat */
.scr__bar { position: absolute; left: 6cqw; right: 6cqw; top: 6.6cqh; display: flex; align-items: center; justify-content: space-between; }
.scr__head { display: inline-flex; align-items: center; gap: 2cqw; font: 600 5.8cqw/1 var(--sans); color: var(--gpt-ink); }
.scr__head svg { width: 6.4cqw; height: 6.4cqw; fill: currentColor; }
.scr__chev { width: 2.2cqw; height: 2.2cqw; border-right: .6cqw solid var(--gpt-3); border-bottom: .6cqw solid var(--gpt-3); transform: translateY(-.6cqw) rotate(45deg); }
.scr__menu { width: 6cqw; height: 3.6cqw; border-top: .7cqw solid var(--gpt-ink); border-bottom: .7cqw solid var(--gpt-ink); }
.scr__new { width: 5.6cqw; height: 5.6cqw; border: .7cqw solid var(--gpt-ink); border-radius: 1.4cqw; }
/* the question: typed into the box at the bottom, then it lifts to the top as the grey bubble */
.scr__ask { position: absolute; right: 6cqw; top: 15cqh; max-width: 74cqw; padding: 1.7cqh 5cqw; border-radius: 7cqw; background: var(--gpt-bubble);
  box-shadow: inset .2cqw .3cqw 0 rgb(258 255 252 / .06), .3cqw .6cqw 1cqw rgb(0 0 0 / .35); font: 500 5.2cqw/1.2 var(--sans); color: var(--gpt-ink);
  transform: translateY(68cqh); opacity: 0; transition: transform .75s steps(7, end), opacity .1s steps(1, end) .75s; }
.s-ask .scr__ask { transform: none; opacity: 1; transition: transform .75s steps(7, end), opacity .1s steps(1, start); }
.scr__intro { position: absolute; left: 6.5cqw; right: 6cqw; top: 23cqh; font: 400 5cqw/1.38 var(--sans); color: var(--gpt-ink); clip-path: inset(0 100% 0 0); transition: clip-path .6s steps(6, end); }
.s-answer .scr__intro { clip-path: inset(0 0 0 0); }
/* the answer: each name is a strip of charcoal card laid in from the right in held frames */
.scr__list { position: absolute; left: 4.5cqw; right: 4.5cqw; top: 34cqh; bottom: 0; }
.scr__item { --slot: var(--i); --row: 10.6cqh; position: absolute; left: 0; right: 0; top: calc(var(--slot) * var(--row) + var(--push, 0cqh)); height: 9.8cqh; padding: 1.2cqh 3cqw 0 10cqw; display: grid; align-content: start; gap: .5cqh;
  background: #2A2A2A; border-radius: 1.2cqw; box-shadow: inset .25cqw .25cqw 0 rgb(258 255 252 / .07), .25cqw .35cqw 0 #141414, .5cqw 1cqw 1.4cqw -.3cqw rgb(0 0 0 / .5);
  transform: translateX(118%) rotate(1.5deg); transition: transform .7s steps(7, end) calc(var(--i, 0) * .22s), top .8s steps(8, end), opacity .4s steps(3, end), height .6s steps(6, end); }
.scr__item::before { content: attr(data-n) "."; position: absolute; left: 3.4cqw; top: 1.2cqh; font: 600 5.4cqw/1.1 var(--sans); color: var(--gpt-ink); }
.scr__item b { font: 700 5.3cqw/1.15 var(--sans); color: #fff; }
.scr__item > span { font: 400 4.1cqw/1.22 var(--sans); color: var(--gpt-2); }
.s-answer .scr__item:not(.scr__you) { transform: none; }
/* yours: the strip from the table, on this side of the glass made of pixels: flat, crisp, no fibre and no stamp. It waits
   just off the left edge of the screen and slides in step for step with its paper twin outside (.table__strip), then
   wobbles once and stands */
.scr__you { --slot: 3; height: 7cqh; transform: translateX(-112cqw); background: #FAF7F1; color: var(--ink);
  box-shadow: inset 0 0 0 .2cqw rgb(258 255 252 / .55), 0 .8cqh 1.6cqh -.4cqh rgb(0 0 0 / .55);
  transition: top .8s steps(8, end), height .6s steps(6, end); }
.scr__you::before { color: var(--sage-deep); }
.scr__you b { color: var(--ink); font-size: 5.6cqw; }
.s-found .scr__you { transform: none; animation: strip-in 1.1s steps(11, end) both, scr-wobble .75s steps(1, end) 1.2s; }
@keyframes strip-in { from { transform: translateX(-112cqw); } to { transform: translateX(0); } }
/* where paper turns into pixels: a thin line of light along the glass edge while the strip crosses it */
.scr__scan { position: absolute; left: 0; top: calc(34cqh + 3 * 10.6cqh - 1.6cqh); width: 2.6cqw; height: 10.2cqh; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgb(255 250 242 / .95), rgb(255 250 242 / .32) 45%, transparent); }
.s-found .scr__scan { animation: scr-scan .95s steps(10, end) .15s both; }
@keyframes scr-scan { 0% { opacity: 0; } 12% { opacity: 1; } 85% { opacity: .9; } 100% { opacity: 0; } }
/* the paper twin: the same strip and the same box as .scr__you (the twin box is the screen's own size, so cq units match),
   clipped at the screen's left edge. At rest it lies on the table, half under the phone; it slides out, lifts above the
   phone (it rises over the body only once it is clear of it), then slides in with the pixel copy */
.phone__table { position: absolute; inset: 0; z-index: 0; pointer-events: none; clip-path: inset(-80% 93.026% -80% -400%); transition: z-index 0s linear 0s; }
.phone:has(.s-lift) .phone__table { z-index: 5; transition-delay: .4s; }
.table__twin { position: absolute; left: 6.974%; right: 6.974%; top: 2.829%; bottom: 2.829%; container-type: size; }
.table__strip { position: absolute; left: 4.5cqw; width: 91cqw; top: calc(34cqh + 3 * 10.6cqh); height: 7cqh; margin: 0; display: flex; align-items: flex-start; gap: 3cqw; padding: 1.2cqh 3cqw 0 10cqw;
  background: #FBF8F2 var(--strip-tex); background-size: 220cqw; color: var(--ink); border-radius: .4cqw;
  box-shadow: inset .25cqw .25cqw 0 #fff, .3cqw .4cqw 0 #CDC5B4, .6cqw .9cqw 1cqw -.2cqw rgb(60 40 20 / .38);
  transform: translate(-86cqw, 10cqh) rotate(-5deg); transform-origin: 70% 50%; transition: box-shadow .9s steps(5, end); }
.table__strip b { font: 700 5.6cqw/1.15 var(--sans); }
.table__strip em { margin-top: -.3cqh; font: 700 3.3cqw/1 var(--sans); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: #3A6673; padding: .9cqh 2cqw .8cqh;
  border: .45cqw solid currentColor; border-radius: .6cqw; transform: rotate(-4deg); mix-blend-mode: multiply; opacity: .9; }
.phone:has(.s-lift) .table__strip { transform: translate(-112cqw, 0); animation: strip-lift .9s steps(5, end) both;
  box-shadow: inset .25cqw .25cqw 0 #fff, .3cqw .4cqw 0 #CDC5B4, 2.4cqw 3cqh 3.6cqw -.4cqw rgb(40 20 10 / .42); }
@keyframes strip-lift { 0% { transform: translate(-86cqw, 10cqh) rotate(-5deg); } 45% { transform: translate(-100cqw, 9cqh) rotate(-3deg); } 100% { transform: translate(-112cqw, 0) rotate(0deg); } }
.phone:has(.s-found) .table__strip { transform: none; animation: strip-in 1.1s steps(11, end) both; }
.phone:has(.screen.instant) .phone__table, .phone:has(.screen.instant) .table__strip { animation: none !important; transition: none !important; }
@keyframes scr-wobble { 0% { transform: rotate(-2.2deg); } 22% { transform: rotate(1.6deg); } 44% { transform: rotate(-.8deg); } 66% { transform: rotate(.3deg); } 100% { transform: none; } }
/* understood: yours opens to show its facts, each one snapping into line; the others step back */
.scr__facts { display: flex; flex-wrap: wrap; gap: 1cqh 1.8cqw; margin-top: 1.2cqh; }
.scr__facts i { display: inline-flex; align-items: center; gap: 1.3cqw; padding: .8cqh 2.4cqw .8cqh 1.6cqw; border-radius: .8cqw; font: 600 4.2cqw/1 var(--sans); font-style: normal; color: var(--ink);
  background: #F4EFE7; box-shadow: inset .2cqw .2cqw 0 #fff, .2cqw .25cqw 0 #CDC5B4; opacity: 0; transform: translate(4cqw, -1cqh) rotate(6deg); transition: opacity .1s steps(1, end), transform .45s steps(4, end); }
/* a hole punched in onyx red: checked */
.scr__facts i::before { content: ""; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: radial-gradient(circle at 60% 65%, #325762, #14282E 70%); box-shadow: inset .25cqw .25cqw .3cqw rgb(0 0 0 / .6), .1cqw .1cqw 0 #fff; }
.s-understood .scr__you { height: 14.4cqh; }
.s-understood .scr__facts i { opacity: 1; transform: none; transition-delay: calc(.55s + var(--f) * .3s); }
.s-understood .scr__item:not(.scr__you) { opacity: .42; }
/* chosen: yours rises to the top of the answer, the others step down, and its call button is pressed */
.s-chosen .scr__you { --slot: 0; }
.s-chosen .scr__you::before { content: "1."; }
.s-chosen [data-n="1"]::before { content: "2."; }
.s-chosen [data-n="2"]::before { content: "3."; }
.s-chosen [data-n="3"]::before { content: "4."; }
.s-chosen .scr__item:not(.scr__you) { --slot: calc(var(--i) + 1); --push: 4.6cqh; }
/* the one they picked: a strip of onyx red paper glued along its left edge */
.scr__you::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1.8cqw; border-radius: 1.2cqw 0 0 1.2cqw; background: linear-gradient(90deg, #1B343B, #325762); box-shadow: inset -.15cqw 0 0 rgb(0 0 0 / .25); transform: scaleY(0); transform-origin: top; transition: transform .4s steps(4, end); }
.s-chosen .scr__you::after { transform: none; transition-delay: .8s; }
.scr__item > .scr__call { position: absolute; right: 3cqw; top: 1.4cqh; padding: 1.1cqh 4cqw; border-radius: 5cqw; background: var(--deep); color: var(--ivory); font: 700 4.3cqw/1 var(--sans);
  box-shadow: inset 0 .2cqh 0 rgb(258 255 252 / .16), 0 .5cqh 0 #12020500, 0 .45cqh 0 #060C0E, 0 .9cqh 1cqh -.2cqh rgb(15 23 25 / .45); opacity: 0; transform: translateY(-1cqh); transition: opacity .1s steps(1, end), transform .3s steps(3, end); }
.s-chosen .scr__item > .scr__call { opacity: 1; transform: none; transition-delay: 1s; }
.s-pressed .scr__item > .scr__call { transform: translateY(.45cqh); box-shadow: inset 0 .4cqh .5cqh rgb(0 0 0 / .55); transition-delay: 0s; }
/* the box at the bottom, as in the app: "Ask anything" until the question is typed into it, two letters a frame */
.scr__compose { position: absolute; left: 4.5cqw; right: 4.5cqw; bottom: 8cqh; height: 8.4cqh; display: flex; align-items: center; gap: 3cqw; padding: 0 2.4cqw 0 4cqw; border-radius: 7cqw; background: var(--gpt-bubble);
  box-shadow: inset .2cqw .3cqw 0 rgb(258 255 252 / .06), .3cqw .6cqw 1.2cqw rgb(0 0 0 / .4); font: 400 5cqw/1 var(--sans); }
.scr__plus { position: relative; width: 4.4cqw; height: 4.4cqw; flex: none; }
.scr__plus::before, .scr__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: .6cqw; background: var(--gpt-ink); transform: translate(-50%, -50%); }
.scr__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.scr__hint { color: var(--gpt-3); }
/* the app's empty screen, as it greets you before anything is asked */
.scr__hello { position: absolute; left: 8cqw; right: 8cqw; top: 40cqh; text-align: center; font: 600 7.2cqw/1.2 var(--sans); color: var(--gpt-ink); transition: opacity .3s steps(3, end); }
.s-ask .scr__hello, .screen.typing .scr__hello { opacity: 0; }
.scr__typed:not(:empty) + .scr__hint { display: none; }
.scr__typed { color: var(--gpt-ink); white-space: nowrap; }
/* the white send button with its arrow */
.scr__send { position: relative; margin-left: auto; width: 8cqw; height: 8cqw; flex: none; border-radius: 50%; background: #fff; }
.scr__send::before { content: ""; position: absolute; left: 50%; top: 28%; width: 2.6cqw; height: 2.6cqw; border-left: .7cqw solid #111; border-top: .7cqw solid #111; transform: translateX(-50%) rotate(45deg); }
.scr__send::after { content: ""; position: absolute; left: 50%; top: 30%; width: .7cqw; height: 42%; background: #111; transform: translateX(-50%); }
.scr__tag { position: absolute; left: 0; right: 0; bottom: 3.6cqh; text-align: center; font: 400 3.6cqw/1 var(--sans); color: var(--gpt-3); }
/* jumps between chapters (the tabs) land without the in-between frames */
.screen.instant, .screen.instant * { transition: none !important; animation: none !important; }

/* ---------- 04 proof before promises, and the one result ---------- */
.ev { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); grid-template-areas: "head card" "result card"; column-gap: clamp(32px, 5vw, 96px); row-gap: clamp(20px, 4svh, 44px); align-content: center; padding: calc(var(--nav-h) + 6svh) var(--pad) 10svh; }
.ev__head { grid-area: head; }
.ev__result { grid-area: result; }
.ev .card { grid-area: card; align-self: center; }
.ev__title { font-size: clamp(2.6rem, 1rem + 4vw, min(6rem, 11svh)); color: var(--ivory); }
.ev__principle { margin-top: clamp(12px, 2svh, 22px); max-width: 30rem; font-size: clamp(1.05rem, .9rem + .35vw, 1.28rem); line-height: 1.45; color: var(--deep-2); }
.ev__claim { font-family: var(--display); font-weight: 500; font-size: clamp(1.45rem, 1rem + 1.25vw, min(2.5rem, 5svh)); line-height: 1.16; letter-spacing: -.005em; color: var(--ivory); max-width: 24ch; }
.ev__qual { margin-top: 14px; max-width: 34rem; font-size: clamp(.95rem, .85rem + .2vw, 1.05rem); line-height: 1.5; color: var(--deep-2); }
.ev__qual--small { margin-top: 8px; font-size: .95rem; }
/* the reading, punched into a card: one hole per answer; a punched hole shows the red board through it */
.card { position: relative; padding: clamp(20px, 3.4svh, 34px) clamp(20px, 2.6vw, 38px) clamp(18px, 3svh, 28px); background: var(--ivory) var(--sheet-b); background-size: 700px; color: var(--ink); border-radius: 3px; transform: rotate(1deg);
  box-shadow: var(--edge), 3px 4px 4px rgb(2 5 6 / .35), 18px 34px 60px -18px rgb(2 5 6 / .75); }
/* a paper switch: the tab slides under the reading that is showing */
.card__switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 14px; background: rgb(120 90 70 / .12); box-shadow: inset 1px 2px 3px rgb(80 50 40 / .25), inset -1px -1px 0 rgb(258 255 252 / .5); }
.switch__opt { position: relative; z-index: 1; display: grid; justify-items: start; gap: 1px; min-height: 52px; padding: 7px 18px; border: 0; background: none; cursor: pointer; text-align: left; border-radius: 10px; color: var(--ink-2); transition: color .3s, transform .15s var(--ease); }
.switch__opt span { font-weight: 600; font-size: .95rem; }
.switch__opt small { font-family: var(--serif); font-style: italic; font-size: .9rem; }
.switch__opt[aria-pressed="true"] { color: var(--ink); }
.switch__opt:active { transform: translateY(1px); }
.switch__opt:focus-visible { outline-offset: -2px; }
.switch__tab { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 10px; background: #FCF9F3 var(--sheet-a); background-size: 600px;
  box-shadow: inset 1px 1px 0 #fff, 1px 1px 0 #D8D2C3, 2px 3px 6px -1px rgb(60 30 20 / .35); transition: transform .55s cubic-bezier(.3, 1.25, .45, 1); }
.card[data-when="after"] .switch__tab { transform: translateX(100%); }
.card__state { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: baseline; margin: clamp(14px, 2.6svh, 26px) 0 clamp(10px, 2svh, 20px); }
.card__n { grid-row: 1 / 3; font-family: var(--display); font-weight: 500; font-size: clamp(4.2rem, 2.4rem + 4.6vw, min(8rem, 15svh)); line-height: .8; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; color: var(--ink); }
.card__of { font-size: clamp(1.02rem, .9rem + .3vw, 1.22rem); line-height: 1.25; }
.card__date { font-style: italic; color: var(--ink-2); }
.card__row { padding: 10px 0 12px; border-top: 1px solid rgb(23 29 31 / .14); }
.card__eng { display: flex; align-items: center; gap: 8px; font: 600 .95rem var(--sans); margin-bottom: 8px; }
.card__val { margin-left: auto; font: 400 .98rem var(--serif); color: var(--ink-2); }
.card__val b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.card__holes { display: grid; grid-template-columns: repeat(21, 1fr); gap: clamp(3px, .38vw, 6px); }
.card__holes i { aspect-ratio: 1; border-radius: 50%; border: 1px solid rgb(37 49 53 / .32); transition: background-color .25s, border-color .25s, box-shadow .25s, transform .35s cubic-bezier(.3, 1.6, .45, 1); }
/* punched: the board shows through, darker at the top-left inner wall where the light cannot reach */
.card__holes i.on { border-color: transparent; background: radial-gradient(circle at 60% 65%, #2B4C55, #14282E 70%); box-shadow: inset 1.5px 1.5px 1.5px rgb(0 0 0 / .65), 0.5px 0.5px 0 rgb(257 254 248 / .9); }
.card__holes i.pop { transform: scale(.82); }
.card figcaption { margin-top: 10px; font-style: italic; font-size: .95rem; line-height: 1.4; color: var(--ink-2); }

/* ---------- 05 how it works: a strip folded in three ---------- */
.how { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(28px, 4vw, 80px); align-items: center; padding: calc(var(--nav-h) + 6svh) var(--pad) 10svh; background: var(--paper) var(--paper-tex); background-size: 512px; color: var(--ink); }
.how::before { content: ""; position: absolute; inset: 0; background: linear-gradient(168deg, rgb(255 251 243 / .34), rgb(255 251 243 / 0) 34%, rgb(70 52 30 / .1)); pointer-events: none; }
.how__title { font-size: clamp(2.4rem, 1rem + 3.4vw, min(5.4rem, 10svh)); color: #161B1D; max-width: 8.5em; }
.how__intro { margin: clamp(14px, 2.4svh, 24px) 0 clamp(20px, 3.4svh, 34px); max-width: 26rem; font-size: clamp(1.05rem, .9rem + .35vw, 1.28rem); line-height: 1.45; color: var(--ink-2); }
.fold { position: relative; }
.fold__tabs { display: flex; gap: 8px; margin-bottom: 22px; }
/* the same paper tags as the chapter tabs above; the open panel's tag is lifted and lit */
.fold__tabs .tab { min-width: 56px; justify-content: center; font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--sage-deep); }
.fold__tabs .tab[aria-selected="true"] { color: var(--ink); background-color: #FBF7F1; transform: rotate(0deg) translateY(-3px); box-shadow: inset 1px 1px 0 #fff, 1px 1px 0 #D0C7B6, 2px 2px 0 #BCB2A0, 4px 9px 12px rgb(60 35 20 / .26); }
.fold__strip { position: relative; height: clamp(380px, 60svh, 680px); perspective: 1700px; perspective-origin: 50% 40%; }
.panel { position: absolute; top: 0; left: 0; height: 100%; width: var(--pw, 30%); transform-style: preserve-3d; cursor: pointer; }
.panel__face { position: absolute; inset: 0; display: flex; flex-direction: column; padding: clamp(18px, 3.2svh, 32px) clamp(16px, 1.8vw, 28px); background: #FAF7F1 var(--sheet-a); background-size: 700px; border-radius: 2px; overflow: hidden; backface-visibility: hidden;
  box-shadow: inset 1px 1px 0 rgb(257 254 248 / .8), 0 1px 1px rgb(50 25 15 / .25); }
/* the fold's light: main.js sets --shade from the panel's angle to the light */
.panel__face::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgb(50 25 15 / calc(var(--shade, 0) * .55)), rgb(50 25 15 / calc(var(--shade, 0) * .25))), linear-gradient(90deg, rgb(257 254 248 / calc(var(--glow, 0) * .35)), rgb(257 254 248 / 0)); }
.panel__n { font-family: var(--display); font-weight: 500; font-size: clamp(2.4rem, 1.6rem + 2vw, 4.2rem); line-height: .9; color: var(--sage-deep); }
.panel__title { margin: clamp(10px, 2svh, 20px) 0 clamp(10px, 1.8svh, 16px); font-family: var(--display); font-weight: 600; font-size: clamp(1.35rem, 1rem + .9vw, 2rem); line-height: 1.04; letter-spacing: -.015em; }
.panel__copy { font-size: clamp(.98rem, .9rem + .18vw, 1.1rem); line-height: 1.48; color: var(--ink-2); }
.panel__get { margin-top: auto; padding-top: 14px; border-top: 1px solid rgb(23 29 31 / .14); font-size: clamp(.98rem, .9rem + .18vw, 1.1rem); line-height: 1.45; }
.panel__get b { display: block; font: 600 .82rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--sage-deep); margin-bottom: 4px; }
.panel:not(.is-open) .panel__copy, .panel:not(.is-open) .panel__get { opacity: 0; transition: opacity .3s; }
/* a folded panel reads as the cover of its step: a big number and the title, set in the middle of the panel */
.panel__face { transition: padding-top .5s steps(5, end); }
.panel:not(.is-open) .panel__face { padding-top: 30%; }
.panel:not(.is-open) .panel__n { font-size: clamp(4rem, 2.6rem + 3.6vw, 7.5rem); }
.panel:not(.is-open) .panel__title { font-size: clamp(1.5rem, 1.1rem + 1vw, 2.3rem); }
.panel.is-open .panel__copy, .panel.is-open .panel__get { opacity: 1; transition: opacity .5s .25s; }
/* the strip's cast shadow on the table, one per panel, under the face */
.panel__shadow { position: absolute; left: 4%; right: 4%; bottom: -6%; height: 16%; border-radius: 50%; background: rgb(50 25 15 / .35); filter: blur(14px); transform: translateZ(-1px); }

/* ---------- 06 selected work: prints on a dark table ---------- */
.work { position: relative; padding: calc(var(--nav-h) + 1svh) var(--pad) 8svh; overflow: hidden; }
.work::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 35% 45%, rgb(254 247 239 / .08), transparent 70%); pointer-events: none; }
.work__head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); gap: 4vw; align-items: end; margin-bottom: clamp(14px, 2.4svh, 28px); }
.work__head .kicker { grid-column: 1 / -1; margin-bottom: -4px; }
.work__title { font-size: clamp(2.2rem, 1rem + 2.8vw, min(4.6rem, 8.4svh)); color: var(--ivory); }
.work__lede { font-size: clamp(1rem, .9rem + .25vw, 1.15rem); line-height: 1.45; color: var(--deep-2); }
/* the work as a screening room (Jonah's pick, 2026-11-03, after the billboard: "they're not clearly websites ... it doesn't
   even get the full hero in"). Each site's own recording plays on a screen with nothing cropped; the screens stand on a
   drum that turns to bring the next one round, the middle one nearest and largest and the ones beside it turning away,
   smaller (owner 2026-11-03: "middle biggest"; the first version curved the other way and made the side screens look
   larger). No browser bar (owner: "it just looks cheap"); the site's own navigation says it is a website, and its
   address sits in the words. Geometry: --w is the middle screen's width; --R the drum's radius, set so neighbouring
   screens stand just clear of each other; --P the eye's distance. Each screen carries the whole move itself (back by --R
   to the drum's axis, round by the turn plus its own angle, out by --R), so nothing ever sits behind the eye and the
   browser always finds the screen under a click. */
/* --room-rest: the heading above the screens and the row of words under them, measured by tools/qa/fit.mjs at 1904x910 down to 1280x720 */
.room { --room-rest: 374px; --w: min(54vw, calc((100svh - var(--room-rest)) * 1.48)); --step: 36deg; --R: calc(var(--w) * 1.63); --P: calc(var(--w) * 2.2);
  position: relative; margin: 0 calc(-1 * var(--pad)); }
.room__stage { display: none; }
.room.is-live .room__stage { display: block; position: relative; height: calc(var(--w) / 1.6 * 1.08); perspective: var(--P); overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.room.is-dragging .room__stage { cursor: grabbing; }
.room__ring { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.room__screen { position: absolute; left: calc(var(--w) / -2); top: calc(var(--w) / var(--ar, 1.6) / -2); width: var(--w); height: calc(var(--w) / var(--ar, 1.6));
  transform: translateZ(calc(-1 * var(--R))) rotateY(calc((var(--turn, 0deg) + var(--a, 0deg)) * -1)) translateZ(var(--R)); transition: transform 1.15s cubic-bezier(.66, 0, .22, 1);
  border-radius: calc(var(--w) * .011); overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: #06090A center / cover no-repeat; cursor: pointer;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .5), 0 calc(var(--w) * .035) calc(var(--w) * .14) calc(var(--w) * .01) rgb(var(--glow, 120 90 80) / .34); }
.room__screen[hidden] { display: none; }
.room.is-dragging .room__screen { transition: none; }
.room__screen.is-on { cursor: default; }
.room__screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; pointer-events: none; }
.room__screen.is-playing video { opacity: 1; }
/* a faint sheen on the glass, from the same upper-left light as the rest of the page, and a fine light edge all round so
   a site that is black at the bottom (Westlight, Official Taps) still reads as the same screen as the others on the dark
   wall (owner 2026-11-03: "the haircut one is also different dimensions") */
.room__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(125deg, rgb(258 255 252 / .06), rgb(258 255 252 / 0) 38%); box-shadow: inset 0 0 0 1px rgb(255 250 244 / .2); }
/* under the screens, one row: what the site is, what it does, the link, then the controls (stacked on phones) */
.room__wall { position: relative; padding: clamp(12px, 2svh, 22px) var(--pad) 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(20px, 3vw, 56px); align-items: end; }
.room__sites { margin: 0; padding: 0; list-style: none; }
.site { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) auto; column-gap: clamp(20px, 3vw, 56px); align-items: end; }
.site__kind, .site__name { grid-column: 1; }
.site__sum { grid-column: 2; grid-row: 1 / 3; }
.site__visit { grid-column: 3; grid-row: 1 / 3; }
.room:not(.is-live) .site { margin-bottom: clamp(36px, 6svh, 64px); }
.site__shot { width: 100%; height: auto; margin-bottom: 18px; border-radius: 8px; }
.room.is-live .site__shot { display: none; }
.site[hidden], .room__controls[hidden] { display: none; }
.room.is-live .site:not([hidden]) { animation: site-in .6s steps(6, end) .35s both; }
@keyframes site-in { from { opacity: 0; transform: translateY(6px); } }
.site__kind { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-style: italic; font-size: 1rem; line-height: 1.25; color: var(--sage); }
.site__host { font: 500 .84rem var(--sans); font-style: normal; color: var(--deep-2); letter-spacing: .02em; }
.site__name { margin-top: 4px; font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 1rem + 1.2vw, min(2.5rem, 4.6svh)); line-height: 1.02; letter-spacing: -.018em; color: var(--ivory); }
.site__sum { margin: 0; max-width: 38rem; font-size: clamp(1rem, .92rem + .2vw, 1.12rem); line-height: 1.45; color: var(--deep-2); }
.site__visit { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; font: 600 1rem var(--sans); color: var(--ivory); white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: rgb(248 245 239 / .45); transition: text-decoration-color .25s; }
.site__visit::after { content: ""; width: 8px; height: 8px; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; transform: translateY(1px); }
.site__visit:hover { text-decoration-color: var(--sage); }
.site__visit:focus-visible, .room__step:focus-visible, .room__pause:focus-visible { outline: 2px solid var(--ivory); outline-offset: 3px; }
.room__controls { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding-left: clamp(16px, 2vw, 32px); border-left: 1px solid rgb(248 245 239 / .16); }
.room__count { display: inline-flex; align-items: baseline; gap: 8px; min-width: 6.5rem; justify-content: center; margin: 0; font-family: var(--display); color: var(--ivory); }
.room__count b { font-weight: 600; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.room__count span { font-size: .95rem; color: var(--deep-2); }
.room__step { position: relative; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; cursor: pointer; color: rgb(248 245 239 / .72); }
.room__step:hover { color: var(--ivory); }
.room__step::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-top: 1.8px solid currentColor; border-right: 1.8px solid currentColor; transform: translate(-70%, -50%) rotate(45deg); }
.room__prev::after { transform: translate(-30%, -50%) rotate(-135deg); }
.room__pause { min-height: 44px; padding: 0 4px 0 16px; margin-left: 8px; border: 0; border-left: 1px solid rgb(248 245 239 / .18); background: none; cursor: pointer; font: 600 .9rem var(--sans); color: rgb(248 245 239 / .72); }
.room__pause:hover { color: var(--ivory); }
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .room { --w: 82vw; }
  .room.is-live .room__stage { height: calc(var(--w) / 1.6 * 1.1); }
  .room__wall { display: block; text-align: center; }
  .site { display: flex; flex-direction: column; align-items: center; }
  .site__kind { justify-content: center; }
  .site__sum { margin-top: 10px; }
  .site__visit { margin-top: 6px; }
  .room__controls { justify-content: center; margin-top: 10px; padding-left: 0; border-left: 0; }
}

/* ---------- 07 finale ---------- */
/* the closing sheets remade in the hero's layered style (art/hf/finale-v2.png): the ground takes the art's own onyx red, with the
   warm light falling into the gap where the dove appears */
.finale { position: relative; height: 230svh; color: var(--ink); background-color: #1C343B; background-image: radial-gradient(48% 62% at 50% 44%, rgb(50 87 98 / .7), rgb(50 87 98 / 0) 72%), url(../media/finale-ground-tile.webp); background-size: auto, 512px; background-blend-mode: normal, multiply; }
.finale__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.finale__art { position: absolute; inset: 0; }
.finale__sheet { position: absolute; left: 50%; top: 50%; width: max(100vw, calc(100svh * 1.768)); aspect-ratio: 2688 / 1520; transform: translate(-50%, -50%); will-change: transform; }
.finale__sheet img { width: 100%; height: 100%; filter: drop-shadow(0 12px 18px rgb(0 0 0 / .45)); }
.finale__text { position: absolute; right: var(--pad); bottom: clamp(18px, 4svh, 56px); left: max(calc(50% + .312 * max(56.56vw, 100svh)), calc(100% - var(--pad) - min(27rem, 25.5vw))); }
@media (max-height: 760px) and (min-width: 761px) { .finale__kicker, .finale__sig { display: none; } .finale__title { font-size: min(2.6rem, 6.5svh); } .finale__lede { font-size: 1rem; } }
.finale__kicker { font-family: var(--serif); font-style: italic; color: var(--ink-2); }
.finale__title { font-size: clamp(1.8rem, 1rem + 2.1vw, min(3.4rem, 7svh)); line-height: .98; margin: 10px 0 16px; color: #161B1D; }
.finale .finale__title em { color: var(--sage-deep); }
.finale__lede { font-family: var(--serif); font-size: clamp(1rem, .9rem + .3vw, 1.2rem); line-height: 1.42; color: #22282A; max-width: 30rem; }
.finale__ctas { display: flex; gap: 26px; align-items: center; margin-top: clamp(16px, 2.6svh, 26px); flex-wrap: wrap; }
.finale__note { margin-top: 8px; font-style: italic; font-size: .95rem; color: var(--ink-2); }
.finale__sig { margin-top: clamp(12px, 2svh, 20px); font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: .14em; font-size: .9rem; color: var(--ink-2); }
.js .finale__text > * { opacity: 0; transform: translateY(16px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.finale__text.is-in > *, .finale__text:focus-within > * { opacity: 1; transform: none; }
.finale__text.is-in > *:nth-child(2) { transition-delay: .1s; } .finale__text.is-in > *:nth-child(3) { transition-delay: .2s; } .finale__text.is-in > *:nth-child(n+4) { transition-delay: .3s; }

.footer { background: var(--deep); color: var(--deep-2); padding: 56px var(--pad) 40px; display: grid; grid-template-columns: auto 1fr auto; gap: 20px 6vw; align-items: start; border-top: 1px solid rgb(248 245 239 / .12); --leaf: var(--sage); }
.footer .wordmark { color: var(--ivory); }
.footer address { font-style: normal; line-height: 1.7; }
.footer address a { display: inline-block; }
.footer a:hover { color: var(--ivory); }
.footer__fine { grid-column: 1 / -1; font-size: .9rem; opacity: .9; }
/* the approved footer's site map (Jonah 2026-11-05: the home page linked to none of the other pages; tools/home_footer.py),
   seven short columns across the dark footer, the same map every other page carries; headings in the light gold (8.4:1) */
.footer__map { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 22px 20px; padding-top: 22px; border-top: 1px solid rgb(248 245 239 / .14); }
.footer__map .pfoot__h { margin-bottom: 10px; font: 600 .74rem/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-light); }
.footer__map ul { display: grid; gap: 2px; padding: 0; list-style: none; }
.footer__map a { display: inline-flex; align-items: center; min-height: 30px; font: 400 .95rem/1.25 var(--sans); color: var(--deep-2); text-decoration: none; }
.footer__map a:hover { color: var(--ivory); text-decoration: underline; text-underline-offset: 3px; }
.footer__map a:focus-visible, .footer .pfoot__legal a:focus-visible { outline: 2px solid var(--ivory); outline-offset: 2px; }
.footer .pfoot__legal { margin-left: 1em; }
.footer .pfoot__legal a { color: inherit; }
@media (max-width: 1100px) { .footer__map { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .footer__map { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
  .footer__map a { min-height: 40px; font-size: 1rem; }
  .footer .pfoot__legal { display: block; margin: 6px 0 0; }
}

/* ---------- tablets and narrow laptops ---------- */
@media (max-width: 1100px) {
  .nav__links { display: none; }
  .nav__cta { margin-left: auto; }
  .ev { grid-template-columns: 1fr; grid-template-areas: "head" "result" "card"; }
  .ev .card { max-width: 40rem; }
  .how { grid-template-columns: 1fr; }
  .work__head { grid-template-columns: 1fr; }
}

/* ---------- phones (portrait windows get their own composition and art) ---------- */
@media (max-aspect-ratio: 1/1) {
  /* the tall photograph sits a little low so the headline and button stay on calm paper above the red sun;
     its top edge fades into a plain sheet of the same tone */
  .cover { background: #EFE8DC; }
  .artbox { bottom: 0; aspect-ratio: 1520 / 2688; width: max(100vw, calc(86svh * .5655));
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%); mask-image: linear-gradient(to bottom, transparent 0, #000 12%); }
  .artbox { background-image: url("data:image/webp;base64,UklGRsQBAABXRUJQVlA4ILgBAACwCwCdASooAEcAPu1orVCppaQjqJv7oTAdiWMAykG8saYcZ79u6XkcVkwRG2/11o/8IoQwDXiwHhNFATLydO5gxl+SMso2+6hIBnYFi7WTgJDTLL5z87e+UG8AUj7F7BO3+60lbQAA/vR47ve9LXIBZTbl5vNnqJk43ChQybc3YwY5qgxCMcV2lT89hMKJiOnFU8xQ96ijjPaYhaFgYm8TEcWGI6ui3MYfnDFQw6eKa7AHyWm+Oe1uPCTEHbzoF0jTttU3w6Cbnl5R+pSNQ3ktnqWSK97vSTpZGCEceu6UK++Nivrnqo0VznFCsGfNot2EdaCjoRTBlrYkisoAuy6sZWVSyFikO2UEyuGAaLL0TaMtm05zrtGnLO30VzwV99p+K+X9AIV6BkQrd49tODOmk+YYtQiMaIm0+iRdsCb3Ij1zTvwoRP45Q+kunfrhWse6iZ5MxHNPi4yOEOe+UXjDmM4eeUpj6TIG9fu66DrweLcg/mgUiVhmsgshq3GM67R86c4zoS3IdMGxPHBXoRnxfLQ1Vfur/TlDAonPzDyoWVTyCJ3jybZ3KSnX9zVH0MzMXBKFCMAAAA=="); }
  .stage { --col: calc(100vw - 2 * var(--pad)); --h1: min(calc(var(--col) / 5.9), 7.4svh); }
  .print { top: var(--nav-h); transform: none; padding-top: 6px; }
  .hero__lede { display: none; }
  .hero__ctas { margin-top: 16px; }
  .hero__ctas .btn { min-height: 46px; padding: 0 18px; font-size: .95rem; }
  .hero__ctas .link { display: none; }
  .pill { display: none; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav__links, .nav__cta { display: none; }
  .nav__contents { display: inline-flex; align-items: center; }
  .ab { grid-template-columns: 1fr; min-height: 0; padding-top: calc(var(--nav-h) + 24px); }
  .slip { width: 100%; }
  .footer { grid-template-columns: 1fr; }
}

/* every size: the sheets close as the stage comes into view, and the words sit below them on the red ground. Over the
   layered sculpture (finale-v2) overlaid words were hard to read at any size, so the words never sit on the paper. */
@media all {
  .finale { height: auto; }
  .finale__stage { position: relative; height: auto; overflow: visible; }
  .finale__art { position: relative; height: 64svh; overflow: hidden;
    /* the sculptures run off the picture's top and bottom: they fade into the dark ground there instead of ending on a line */
    -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 84%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 84%, transparent); }
  .finale__sheet { width: max(100vw, calc(64svh * 1.95)); transition: transform 1.8s var(--ease); }
  .finale__sheet--left { transform: translate(calc(-50% - 22vw), -50%) rotate(-1.6deg); }
  .finale__sheet--right { transform: translate(calc(-50% + 22vw), -50%) rotate(1.2deg); }
  .finale.is-closed .finale__sheet { transform: translate(-50%, -50%); }
  .finale__text { position: static; width: auto; padding: 8px var(--pad) 64px; }
  .finale__title, .finale__lede { color: var(--ivory); }
  .finale .finale__title em { color: var(--sage); }
  .finale__kicker, .finale__note, .finale__sig { color: var(--deep-2); }
  .finale__text .btn { background: var(--ivory); color: var(--ink); }
  .finale__text .link { color: var(--ivory); }
  .finale__text .btn:focus-visible { outline-color: var(--ivory); }
}
@media (min-width: 761px) {
  /* full width always: with aspect-ratio plus max-height the box shrank its width on wide screens (1854x907: a dark strip at
     the right, Jonah 2026-11-03), so the height is set directly and the sheets fill the width */
  .finale__art { width: 100%; height: min(56.56vw, 94svh); }
  /* the box keeps the picture's shape, so the sheets fill it exactly; on a wide, short window the box stops at 94svh and the
     sheets run a little past its top and bottom, into the fade */
  .finale__sheet { width: 100%; }
  /* the words get room (owner 2026-11-03 23:50: "the words again look like they're shoved to fit"): wider lines, so the title
     sets on two and the lede on two, and air between the art and the words */
  .finale__text { max-width: 66rem; margin: 0 auto; text-align: center; padding: clamp(26px, 5svh, 64px) var(--pad) clamp(64px, 12svh, 130px); }
  .finale__title { font-size: clamp(2.2rem, 1rem + 2.6vw, min(4.2rem, 8.5svh)); }
  .finale__lede { margin: 0 auto; max-width: 48rem; text-wrap: balance; }
  .finale__title { margin: 14px auto 22px; line-height: 1.02; text-wrap: balance; }
  .finale__ctas { justify-content: center; }
  .finale__kicker, .finale__sig { display: block !important; }
}

/* ---------- phones and upright tablets: the phone story stacks: title, then the phone, then the chapter tabs and words ---------- */
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .fuc { height: auto; }
  /* no table beside a stacked phone: on narrow screens yours slides in from the screen's edge on its own */
  .phone__table { display: none; }
  .fuc__pin { position: relative; height: auto; display: grid; grid-template-columns: 1fr; padding: calc(var(--nav-h) + 26px) var(--pad) 56px; row-gap: 0; }
  .fuc__text { display: contents; }
  .fuc__title { order: 1; }
  .fuc__intro { order: 2; }
  .phone { order: 3; position: relative; top: auto; right: auto; justify-self: center; height: auto; width: min(80vw, 430px); margin: 30px 0 22px; transform: none; }
  .fuc__tabs { order: 4; margin-top: 4px; }
  .fuc__panels { order: 5; margin-top: 18px; }
}
/* ---------- phones: the fold hangs down the page ---------- */
@media (max-width: 760px) {
  .tab { padding: 10px 13px 9px; font-size: .88rem; }
  /* how it works: the strip hangs down the page, folded along horizontal creases; the open panel shows its words */
  .how { min-height: 0; }
  .fold__strip { height: auto; perspective: none; display: grid; gap: 0; }
  .panel { position: relative; width: 100% !important; height: auto; transform: none !important; }
  .panel__face { position: relative; inset: auto; padding: 18px 20px; border-radius: 0; box-shadow: inset 1px 1px 0 rgb(257 254 248 / .8), 0 1px 0 #D3CCBF; }
  .panel:first-child .panel__face { border-radius: 3px 3px 0 0; }
  .panel:last-child .panel__face { border-radius: 0 0 3px 3px; box-shadow: inset 1px 1px 0 rgb(257 254 248 / .8), 1px 2px 0 #BEB5A5, 4px 10px 18px -6px rgb(60 35 20 / .35); }
  /* the crease between panels: a valley line with light on its lower side */
  .panel + .panel .panel__face { border-top: 1px solid rgb(60 35 20 / .22); box-shadow: inset 0 1px 0 rgb(257 254 248 / .9), inset 0 8px 10px -8px rgb(60 35 20 / .18); }
  .panel__face::after { display: none; }
  .panel__shadow { display: none; }
  .panel__n { font-size: 2rem; }
  .panel__title { margin: 6px 0 0; font-size: 1.3rem; }
  .panel:not(.is-open) .panel__copy, .panel:not(.is-open) .panel__get { display: none; }
  /* closed panels on a phone are a single compact row: no cover treatment */
  .panel:not(.is-open) .panel__face { padding-top: 16px; padding-bottom: 16px; }
  .panel:not(.is-open) .panel__n { font-size: 2rem; }
  .panel:not(.is-open) .panel__title { font-size: 1.3rem; }
  .panel.is-open .panel__copy { margin-top: 10px; }
  .panel.is-open .panel__get { margin-top: 14px; }
}

/* ---------- reduced motion: every reveal is already resolved and nothing scrubs ---------- */
@media (prefers-reduced-motion: reduce) {
  /* none at all: a tiny duration would still be a transition, and the work table measures prints mid-change */
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .finale__text > * { transform: none !important; opacity: 1 !important; }
}