/* Second Dove, Project Unveiling. Ivory paper over onyx red (Jonah's pick, 2026-11-03; the old variable
   names --sage and --sage-deep now hold the rose and red accents, used only where something is shown to be true). Sizes follow the window's height as well as its width, so every block fits a laptop. */
:root {
  --paper: #DBCFBA;
  --ivory: #F1EBDF;
  --ink: #221416;
  --ink-2: #4A3A39;
  --deep: #2D070C;
  --deep-2: #E0CFC8;
  --sage: #D9A397;
  --sage-deep: #7A2430;
  --display: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --serif: "Newsreader", "Iowan Old Style", 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);
}
* { 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; }
/* 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;
}

/* thick printed card: rises 2px and its shadow widens and softens, like stock lifting off a table */
.btn {
  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(255 255 255 / .10), 0 1px 1px rgb(36 12 16 / .25), 0 6px 14px -6px rgb(36 12 16 / .45);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), background-color .3s;
}
.btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .10), 0 3px 4px rgb(36 12 16 / .16), 0 16px 28px -10px rgb(36 12 16 / .45); }
.btn:active { transform: translateY(0); transition-duration: .12s; }
.btn--light { background: var(--ivory); color: var(--ink); box-shadow: inset 0 -1px 0 rgb(0 0 0 / .12), 0 1px 1px rgb(0 0 0 / .4), 0 8px 18px -8px rgb(0 0 0 / .6); }
.btn--light:hover { box-shadow: inset 0 -1px 0 rgb(0 0 0 / .12), 0 3px 4px rgb(0 0 0 / .3), 0 18px 30px -10px rgb(0 0 0 / .65); }
/* ink underline that draws from the left on hover */
.link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; position: relative; }
.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); }

/* ---------- nav ---------- */
.nav, .btn, .link, .nav__cta, .nav__contents, .contents__close, .tally__label, .skip { 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(36 12 16 / .6), 0 0 .6em rgb(36 12 16 / .55); }
.nav [data-mixed][data-tone="ink"] { text-shadow: 0 0 .15em rgb(241 235 223 / .75), 0 0 .6em rgb(241 235 223 / .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; }
.nav__cta[data-tone="ink"] { background: rgb(241 235 223 / .38); }
.nav__cta:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.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(34 20 22 / .16); font-family: var(--serif); font-weight: 300; font-size: clamp(1.9rem, 1.2rem + 3vw, 3.4rem); line-height: 1.05; letter-spacing: -.02em; }
.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 (the second dove flies in), 02 the answer ---------- */
.unveil { position: relative; height: 100svh; }
.stage { position: relative; height: 100%; overflow: hidden; }
.cover { position: absolute; inset: 0; }
.under { position: relative; min-height: 100svh; overflow: hidden; background: var(--deep) var(--deep-tex); background-size: 512px; color: var(--ivory); }
.under::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 8% 0%, rgb(255 246 225 / .07), transparent 60%), radial-gradient(90% 80% at 100% 100%, rgb(0 0 0 / .35), transparent 70%); pointer-events: none; }

/* the art box: the photograph and the live sheet share one geometry. The desktop photo is 2688x1520; it
   covers the window and is pinned to the bottom-right corner, because that corner is the one that peels. */
/* 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,UklGRuABAABXRUJQVlA4INQBAABwCwCdASpIACkAPu1qq08ppiOiKJgNyTAdiWUAx670KAAfiuXtgKpXVgmrZwefaejwTUNldTru+Xzm0E71luTIM2FVrUKWn7vab+wNbt+8GLBlj1CnzsfFbaFrpzIpULZ3LgWAAP7w4hfWkQg35ZUrc+vBpyC+2bhH4UkOH37Qgv7mG0OQFWjWl3w0tgcZXNJod2uarvlA7Erk7ZspMlO0ILVRI6hehE5/9k/nRAPv/VHLcDUKF7sxsKVvbxb6kCfZqx3Dko0ANo+HvuD5smdm4rVkghRplLTu9eNT0leOHZTLikrqgojLO7oOaD9pRNS4yFJ8jTv5KNcluQLvJcnJCtqyY3ZuWR44SSoNZ6CP9YvQM+1d/fWOLFSOq0ZF+81yvMZxCzeR0rQrqLiTWCK+dea+6e3W3FDnS808VcrAqzOIn5peYBq9kGBNZBXW5Hsi2F/x0aHT8JQE9D2ut3fgJ7PGFL9xNO0m/yvvkU/Z1PGLq+9R4bkfMfW2uQJpOjm2ux0icHvJGxqYahoGKp07//gJFG3583mtTQ/GVwUiA4BKkzkuEEUmhB/ROmN7XT2x7tX7H6KXkoxZnLKpRb3Myi8pLLODu/I8G9xbs5z8T23gAAA=") 0 0 / 100% 100% no-repeat; }
.artbox img { width: 100%; height: 100%; object-fit: fill; }
/* the film starts on the photograph itself (only the bird is added), 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.515 x art width (the answer
   section below shares the same column and type scale) */
.stage, .under { --W: max(100vw, calc(100svh * 1.7684)); --col: calc(100vw - .515 * var(--W) - var(--pad) - 2.5vw); --h1: min(calc(var(--col) / 4.7), 14.5svh); }
.print, .answer { 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: 400; font-size: var(--h1); line-height: .9; letter-spacing: -.01em; text-transform: uppercase; color: #201315; mix-blend-mode: multiply; }
.hero__title span { display: block; }
.hero__title em { font-style: italic; letter-spacing: 0; }
.hero__lede { margin-top: clamp(16px, 2.8svh, 30px); max-width: 30rem; font-family: var(--serif); font-size: clamp(1.1rem, .82rem + .62vw, 1.45rem); line-height: 1.38; color: #352527; mix-blend-mode: multiply; }
.hero__ctas { display: flex; align-items: center; gap: 28px; margin-top: clamp(18px, 3svh, 32px); }
.hero__ctas .link { color: #2E1E20; }
/* the question someone asks an AI, on a slip of the same paper */
.pill { display: flex; align-items: center; gap: 14px; margin-top: clamp(16px, 3svh, 32px); width: min(29rem, 100%); min-height: 56px; padding: 0 24px; border-radius: 999px; background: #EFE5D6;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 1px 1px rgb(36 12 16 / .16), 0 10px 22px -12px rgb(36 12 16 / .5);
  font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, .9rem + .3vw, 1.25rem); line-height: 1.2; color: #2E1E20; }
.pill__icon { flex: none; position: relative; width: 15px; height: 15px; margin-right: 2px; border: 1.6px solid currentColor; border-radius: 50%; }
.pill__icon::after { content: ""; position: absolute; right: -6px; bottom: -4px; width: 7px; height: 1.6px; background: currentColor; transform: rotate(45deg); }
.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; }
@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; } }

/* under the cover: the same question, answered */
.ask-box { position: absolute; right: var(--pad); top: 50%; transform: translateY(-50%); width: min(29rem, 34vw); padding-top: calc(var(--nav-h) * .5); }
.ask { display: flex; flex-direction: column; align-items: flex-start; }
.ask__kicker { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--deep-2); margin: 0 0 12px 4px; }
.ask__q { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 24px; border-radius: 999px; border: 1px solid rgb(241 235 223 / .22); background: rgb(241 235 223 / .05);
  font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, .9rem + .3vw, 1.25rem); line-height: 1.2; color: var(--ivory); }
.reply { margin: 26px 0 0 4px; color: #EFE6DF; font-family: var(--serif); font-size: clamp(1.15rem, .9rem + .5vw, 1.5rem); line-height: 1.38; max-width: 22em; }
.js .reply__line { clip-path: inset(0 100% 0 0); }
.reply__line + .reply__line { margin-top: .1em; }
.reply__note { margin-top: 1.1em; font: italic 400 .95rem var(--serif); color: var(--deep-2); }
.js .reply__note { clip-path: inset(0 100% 0 0); }
/* "your business" is the one accented thing in the answer: an underline drawn in like ink */
.reply mark { background: linear-gradient(var(--sage), var(--sage)) 0 100% / 100% .14em no-repeat; color: #F6EFE9; padding-bottom: .04em; }

.answer { top: 50%; transform: translateY(-50%); padding-top: calc(var(--nav-h) * .5); }
.js .answer > * { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.answer.is-in > * { opacity: 1; transform: none; }
.answer.is-in > *:nth-child(2) { transition-delay: .12s; }
.answer.is-in > *:nth-child(3) { transition-delay: .24s; }
.answer__title { font-family: var(--display); font-weight: 400; font-size: calc(var(--h1) * .6); line-height: .98; letter-spacing: -.01em; color: var(--ivory); }
.answer__lede { margin: clamp(16px, 2.6svh, 28px) 0 clamp(22px, 3.4svh, 34px); max-width: 30rem; font-family: var(--serif); font-size: clamp(1.1rem, .85rem + .55vw, 1.4rem); line-height: 1.4; color: var(--deep-2); }

html:not(.js) .finale { height: auto; }
html:not(.js) .finale__stage { position: relative; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- light and dark chapters ---------- */
.paper { background-color: var(--paper); background-image: linear-gradient(168deg, rgb(255 247 230 / .34) 0%, rgb(255 247 230 / 0) 30%, rgb(255 247 230 / 0) 62%, rgb(70 52 30 / .1) 100%), var(--paper-tex); background-size: 100% 100%, 512px; background-repeat: no-repeat, repeat; color: var(--ink); }
/* each light window gets the hero's raking light: brighter top-left, falling off to the lower right */
.lit { position: relative; isolation: isolate; }

.ink { background: var(--deep) var(--deep-tex); background-size: 512px; color: var(--ivory); }
.chapter-head { padding: clamp(96px, 16svh, 180px) var(--pad) clamp(40px, 7svh, 80px); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 4vw; align-items: end; }
.chapter-head h2, .evidence h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(2.6rem, 1rem + 4.6vw, min(7rem, 12.5svh)); line-height: .92; letter-spacing: -.035em; }
.chapter-head h2 span, .evidence h2 span { display: block; }
.chapter-head p { max-width: 30rem; font-family: var(--serif); font-size: clamp(1.1rem, .9rem + .4vw, 1.35rem); line-height: 1.42; color: var(--ink-2); padding-bottom: .6em; }

/* line reveal: each line slides up out of its own mask, like ink coming out from under a sheet */
.reveal-lines span { overflow: hidden; padding: .16em 0 .1em; margin: -.16em 0 -.1em; }
.reveal-lines span > i { display: block; font-style: inherit; }
.js .reveal-lines span > i { transform: translateY(105%); transition: transform 1.1s var(--ease); }
.reveal-lines span em > i, .reveal-lines span > i em { font-style: italic; }
.reveal-lines.is-in span > i { transform: none; }
.reveal-lines.is-in span:nth-child(2) > i { transition-delay: .1s; }

.spread { position: relative; padding: 0 var(--pad); min-height: min(100svh, 980px); display: grid; align-items: center; }
.facts { margin-top: clamp(14px, 2.4svh, 26px); max-width: 30rem; font-family: var(--serif); font-size: clamp(1.02rem, .9rem + .25vw, 1.18rem); line-height: 1.5; color: var(--ink-2); }
.ink .facts { color: var(--deep-2); }
.spread__lead { font-family: var(--serif); font-size: clamp(1.3rem, .95rem + .9vw, 1.95rem); line-height: 1.25; letter-spacing: -.008em; max-width: 22ch; }
.plate { position: relative; }
.plate img { width: 100%; height: 100%; object-fit: cover; box-shadow: 0 1px 2px rgb(36 12 16 / .25), 0 24px 50px -24px rgb(36 12 16 / .55); }
.plate figcaption { margin-top: 12px; font-family: var(--serif); font-style: italic; font-size: .98rem; color: var(--ink-2); }
.ink .plate figcaption { color: var(--deep-2); }
/* plates come out of a sleeve: the mask opens upward while the image settles */
.js [data-plate] img { clip-path: inset(100% 0 0 0); transform: translateY(40px); transition: clip-path 1.3s var(--ease), transform 1.5s var(--ease); }
[data-plate].is-in img { clip-path: inset(0 0 0 0); transform: none; }

.spread--found { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); grid-template-rows: auto auto; column-gap: 5vw; align-content: center; padding-top: 4svh; padding-bottom: 4svh; }
.giant { grid-column: 1; grid-row: 1; align-self: end; margin-bottom: 0; color: #201315; }
.spread--found .plate { grid-column: 2; grid-row: 1 / 3; height: min(76svh, 46vw); aspect-ratio: 4 / 5; justify-self: start; align-self: center; }
.spread--found .spread__text { grid-column: 1; grid-row: 2; align-self: start; padding-top: clamp(18px, 4svh, 44px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3vw; align-items: start; }
.spread--found .facts { margin-top: 0; }
.spread--understood { grid-template-columns: auto minmax(0, 1fr); gap: 6vw; }
.spread--understood .plate { height: min(72svh, 42vw); aspect-ratio: 4 / 5; }
.spread--understood .spread__text { max-width: 34rem; }
.mid { font-size: clamp(2.6rem, 5.2vw, min(7rem, 15svh)); }
.mid { font-family: var(--serif); font-weight: 300; font-size: clamp(3rem, 1rem + 6vw, min(8.5rem, 16svh)); line-height: .9; letter-spacing: -.04em; margin-bottom: clamp(14px, 2.4svh, 26px); }

.spread--chosen { grid-template-columns: 1fr 1fr; padding: 0; min-height: 100svh; }
.spread--chosen .plate { height: 100%; min-height: 100svh; }
.spread--chosen .plate img { box-shadow: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%); mask-image: linear-gradient(90deg, transparent 0, #000 14%); }
.spread--chosen .plate figcaption { position: absolute; right: var(--pad); bottom: 24px; color: var(--deep-2); }
.spread--chosen .spread__text { padding: 0 5vw 0 var(--pad); max-width: 46rem; }
.spread--chosen .spread__lead { color: var(--ivory); }

/* ---------- 04 evidence and work ---------- */
.evidence { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "text tally" "notes tally"; column-gap: 5vw; row-gap: 0; align-content: center; align-items: start; padding: clamp(90px, 14svh, 160px) var(--pad); min-height: 100svh; }
.evidence__text { grid-area: text; }
.evidence__notes { grid-area: notes; }
.tally { grid-area: tally; align-self: center; }
.evidence__claim { margin: clamp(22px, 3.6svh, 40px) 0 18px; font-family: var(--serif); font-size: clamp(1.35rem, 1rem + 1vw, 2.05rem); line-height: 1.24; color: var(--ivory); max-width: 26ch; }
.evidence__fine { font-size: clamp(.92rem, .8rem + .25vw, 1.02rem); line-height: 1.5; color: var(--deep-2); max-width: 36rem; margin-top: 8px; }
.tally__state { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: baseline; margin-bottom: clamp(16px, 3svh, 30px); }
.tally__n { grid-row: 1 / 3; font-family: var(--serif); font-weight: 300; font-size: clamp(5rem, 3rem + 6vw, min(10rem, 20svh)); line-height: .8; letter-spacing: -.04em; color: var(--ivory); font-variant-numeric: lining-nums tabular-nums; }
.tally__of { font-family: var(--serif); font-size: clamp(1.1rem, .9rem + .5vw, 1.4rem); color: var(--ivory); }
.tally__date { font-family: var(--serif); font-style: italic; color: var(--deep-2); }
.tally__band { display: grid; grid-template-columns: 7.5rem 1fr; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid rgb(241 235 223 / .16); }
.tally__label { font-size: .98rem; color: var(--deep-2); }
.tally__marks { display: grid; grid-template-columns: repeat(21, 1fr); gap: clamp(3px, .4vw, 6px); }
.tally__marks i { aspect-ratio: 1; border-radius: 50%; border: 1px solid rgb(241 235 223 / .32); transition: background-color .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease); }
.tally__marks i.on { background: var(--sage); border-color: var(--sage); }
.tally__marks i.on.new { transform: scale(1.08); }
.tally figcaption { margin-top: 14px; font-family: var(--serif); font-style: italic; color: var(--deep-2); }

.work__lead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 4.5vw; align-items: center; min-height: min(100svh, 1000px); padding: clamp(80px, 12svh, 140px) var(--pad) clamp(40px, 6svh, 70px); }
.work__head h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(2.6rem, 1rem + 3.4vw, min(5.6rem, 11svh)); line-height: .92; letter-spacing: -.035em; }
.work__head h2 span { display: block; }
.work__intro { margin: 18px 0 clamp(26px, 5svh, 54px); max-width: 26rem; font-family: var(--serif); font-size: clamp(1.05rem, .9rem + .3vw, 1.25rem); line-height: 1.42; color: var(--ink-2); }
/* screenshots sit straight on the paper: a hairline edge, and they lift only when touched */
.shot { display: block; border-radius: 4px; overflow: hidden; outline: 1px solid rgb(34 20 22 / .16); outline-offset: -1px; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.shot--crop img { aspect-ratio: 1.834; }
.shot:hover { transform: translateY(-4px); box-shadow: 0 3px 5px rgb(36 12 16 / .12), 0 26px 44px -22px rgb(36 12 16 / .5); }
.shot--lead img { max-height: 76svh; }
.project__tag { font-family: var(--serif); font-style: italic; color: #6A1B26; font-size: 1.02rem; }
.project h3, .work__head h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(1.7rem, 1.1rem + 1.2vw, 2.5rem); line-height: 1; letter-spacing: -.025em; margin: 6px 0 10px; }
.project p:not(.project__tag), .project__note p:not(.project__tag) { color: var(--ink-2); max-width: 28rem; }
.project__note .link { margin-top: 6px; }
.work__list { padding: clamp(30px, 6svh, 70px) var(--pad) clamp(80px, 13svh, 150px); display: grid; gap: clamp(70px, 14svh, 150px); }
.project--row { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 5vw; align-items: center; }
.project--row:nth-child(even) .shot { order: 2; }
.project--row .shot img { max-height: 70svh; }
.project--row .project__note p:not(.project__tag) { font-size: 1.06rem; }

/* ---------- 05 method ---------- */
.method { position: relative; min-height: 100svh; padding-bottom: clamp(60px, 10svh, 120px); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3vw; padding: clamp(30px, 6svh, 70px) var(--pad) 0; position: relative; }
.step__n { display: block; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(2.4rem, 1.6rem + 2vw, 4rem); line-height: 1; color: var(--sage-deep); padding-bottom: 14px; border-bottom: 1px solid rgb(34 20 22 / .22); }
.step h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(1.8rem, 1.2rem + 1.4vw, 2.7rem); letter-spacing: -.02em; line-height: 1; margin: 18px 0 12px; }
.step p { color: var(--ink-2); max-width: 22rem; }
.js .step { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.steps.is-in .step { opacity: 1; transform: none; }
.steps.is-in .step:nth-child(2) { transition-delay: .15s; } .steps.is-in .step:nth-child(3) { transition-delay: .3s; } .steps.is-in .step:nth-child(4) { transition-delay: .45s; }

/* ---------- 06 finale ---------- */
.finale { position: relative; height: 230svh; background: var(--deep) url(../media/finale-ground-tile.webp); background-size: 512px; color: var(--ink); }
.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 { display: none; } .finale__text h2 { font-size: min(3.4rem, 8.5svh); } .finale__lede { font-size: 1rem; } }
.finale__kicker { font-family: var(--serif); font-style: italic; color: var(--ink-2); }
.finale__text h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(2.2rem, 1rem + 3.2vw, min(4.6rem, 9svh)); line-height: .98; letter-spacing: -.03em; margin: 10px 0 16px; color: #201315; }
.finale__lede { font-family: var(--serif); font-size: clamp(1.05rem, .9rem + .35vw, 1.28rem); line-height: 1.42; color: #2E1E20; max-width: 30rem; }
.finale__ctas { display: flex; gap: 26px; align-items: center; margin-top: clamp(18px, 3svh, 30px); flex-wrap: wrap; }
.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(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(241 235 223 / .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; }

/* ---------- tablets and narrow laptops ---------- */
@media (max-width: 1100px) {
  .nav__links { display: none; }
  .nav__cta { margin-left: auto; }
  .chapter-head { grid-template-columns: 1fr; gap: 18px; }
  .spread--found .spread__text { grid-template-columns: 1fr; gap: 0; }
  .spread--found .facts { margin-top: 18px; }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
  .evidence { grid-template-columns: 1fr; grid-template-areas: "text" "tally" "notes"; row-gap: 28px; }
}

/* ---------- 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: #E7D6BD; }
  .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%); }
  .cover__film { display: none; }
  .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, .under { --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; }
  .answer { top: var(--nav-h); transform: none; padding-top: 4px; }
  .answer__title { font-size: calc(var(--h1) * .9); }
  .answer__lede { font-size: 1.02rem; margin: 10px 0 0; max-width: 34ch; }
  .answer .btn { display: none; }
  .ask-box { left: var(--pad); right: var(--pad); width: auto; top: auto; bottom: 8svh; transform: none; padding-top: 0; }
  .reply { font-size: 1.1rem; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav__links, .nav__cta { display: none; }
  .nav__contents { display: inline-flex; align-items: center; }
  .chapter-head { padding-top: 88px; }
  .spread { min-height: 0; padding-top: 24px; padding-bottom: 72px; }
  .spread--found, .spread--understood, .spread--chosen { grid-template-columns: 1fr; gap: 22px; }
  .giant { grid-column: 1; grid-row: auto; }
  .spread--found .plate, .spread--understood .plate { grid-column: 1; grid-row: auto; height: auto; width: 86vw; justify-self: start; }
  .spread--found .spread__text { grid-column: 1; grid-row: auto; padding-top: 0; }
  .spread--chosen .plate { min-height: 0; height: 72svh; }
  .spread--chosen .spread__text { padding: 72px var(--pad) 28px; }
  .spread--understood .plate { height: auto; width: 86vw; }
  .project--row { grid-template-columns: 1fr; gap: 18px; }
  .project--row:nth-child(even) .shot { order: 0; }
  .work__lead { grid-template-columns: 1fr; gap: 26px; min-height: 0; padding-top: 88px; }
  .work__lead .shot--lead { order: -1; }
  .steps { grid-template-columns: 1fr; row-gap: 40px; }
  .method, .evidence { min-height: 0; }
  .tally__band { grid-template-columns: 1fr; gap: 8px; }
  .footer { grid-template-columns: 1fr; }
}

/* phones and squarer windows: the sheets close as the stage comes into view, and the words sit below them on
   the ink ground (on a squarer window the overlaid words would land in the gap between the sheets) */
@media (max-width: 760px), (max-aspect-ratio: 3/2) {
  .finale { height: auto; }
  .finale__stage { position: relative; height: auto; overflow: visible; }
  .finale__art { position: relative; height: 64svh; overflow: hidden; }
  .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__text h2, .finale__lede { color: var(--ivory); }
  .finale__kicker { 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); }
}

/* ---------- reduced motion: every reveal is already resolved and nothing scrubs ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  .reveal-lines span > i, [data-plate] img, .answer > *, .step, .finale__text > * { transform: none !important; opacity: 1 !important; clip-path: none !important; }
}