/* Backmatter Press. The house: paper, ink, and its own teal-ink endpapers, with an ink ribbon that marks the page.
   The books: each one keeps its own cover's colours (No. 01: hazard yellow, black and warning red), set as livery
   tokens on its entry. Three faces, one job each: Anton for names, numbers and signs, Fraunces Italic (weight 500, not
   wonky) for the line under a name, Bricolage Grotesque for everything you read. All three are OFL: fonts/OFL_*.txt.
   Light by default, dark when the device asks for it. Brand decisions: BRAND.md at the repo root.
   Every colour, size and space below is a token; contrast is AA or better in both schemes. */
@font-face { font-family: Anton; src: url("/fonts/anton.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: Fraunces; src: url("/fonts/fraunces-italic.woff2") format("woff2"); font-style: italic; font-weight: 500; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Bricolage Display"; src: url("/fonts/bricolage-display.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }   /* the same face at its 96 pt optical size, for the catchphrase */
/* Impact, scaled to Anton's cap widths, so the justified home lockup keeps its width while Anton loads */
@font-face { font-family: "Anton fallback"; src: local("Impact"); size-adjust: 91.8%; ascent-override: 128%; descent-override: 36%; line-gap-override: 0%; }

:root {
  /* brand, the same in both schemes */
  --yellow: #F7C81E; --black: #0F0F0F; --red: #C8201A;
  /* scheme: light */
  --bg: #FBF9F4; --surface: #FFFFFF; --ink: #141210; --muted: #57524A; --line: #E2DCCF;
  --link: var(--ink); --focus: var(--house); --shadow: 0 1px 2px rgba(20,18,16,.12), 0 12px 32px -8px rgba(20,18,16,.32);
  /* the house (home): its endpaper colour, that colour as text on paper, the ink ribbon, and a reading lamp.
     One hue and one chroma set the whole house: teal-ink 210 / .06 (Mark's pick, 17 Oct); the other candidates were
     aubergine 330 / .08 and midnight ink-blue 262 / .075 */
  --house-h: 210; --house-c: .06;
  --endpaper: oklch(29% var(--house-c) var(--house-h)); --endpaper-ink: #FBF9F4; --endpaper-soft: oklch(87% .035 var(--house-h));
  --house: oklch(45% calc(var(--house-c) + .05) var(--house-h)); --house-lit: oklch(78% .09 var(--house-h));
  --ribbon: oklch(19% .01 var(--house-h)); --ribbon-edge: oklch(12% .008 var(--house-h)); --ribbon-sheen: oklch(42% .02 var(--house-h));
  --ribbon-rim: transparent;                          /* a lit edge, for dark grounds */
  --ribbon-w: clamp(.875rem, .5rem + 1.6vw, 2.125rem);
  --ribbon-paint: linear-gradient(90deg, var(--ribbon-rim) 0 1.5px, transparent 1.5px calc(100% - 1.5px), var(--ribbon-rim) calc(100% - 1.5px)),
                  linear-gradient(90deg, var(--ribbon-edge), var(--ribbon) 36%, var(--ribbon-sheen) 50%, var(--ribbon) 64%, var(--ribbon-edge));
  --swallowtail: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - var(--ribbon-w) * .9), 0 100%);
  --lamp: oklch(80% .1 75 / .16);
  --board: #0b1b21;                                   /* the Plotwright board's own ground (its act lane) */
  /* Plotwright's night: its teal-ink desk (the app's --wu-night-bg) */
  --night: #011c22; --night-ink: #F3EFE7; --night-soft: #B9B2A6;
  /* type */
  --display: Anton, "Anton fallback", Impact, "Arial Narrow Bold", sans-serif;
  --serif: Fraunces, Georgia, "Times New Roman", serif;
  --sans: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --step--1: .9375rem;                       /* 15 px: notes, footer */
  --step-0: 1.0625rem;                       /* 17 px: body */
  --step-1: 1.25rem;                         /* 20 px: subtitles */
  --step-2: clamp(1.375rem, 1.1rem + 1vw, 1.625rem);
  --step-3: clamp(1.875rem, 1.2rem + 2.8vw, 2.625rem);
  --step-4: clamp(2.375rem, 1.3rem + 4.6vw, 3.75rem);
  /* display steps for the home page (Utopia, 360 to 1440 px; each max is at most 2.5 x its min) */
  --step-5: clamp(2.75rem, 1.5rem + 5.556vw, 6.5rem);      /* 44 to 104 px */
  --step-6: clamp(4.5rem, 3rem + 6.667vw, 9rem);           /* 72 to 144 px */
  /* space, on a 4 px grid */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --section: clamp(4.5rem, 2.9rem + 7vw, 11rem);
  --measure: 38rem;
  /* the inner pages' column, its side padding, and the distance from either page edge to its text */
  --col: 60rem; --pad: var(--s4); --edge: max(var(--pad), (100% - var(--col)) / 2 + var(--pad));
  --bar-h: clamp(4rem, 3.25rem + 2.5vw, 5.5rem);      /* the imprint's band at the top of every inner page */
  --hang: clamp(1.5rem, -1rem + 10vw, 9rem);          /* how far the ribbon hangs past the endpaper */
  /* motion */
  --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --dur-press: 100ms; --dur-hover-in: 125ms; --dur-hover-out: 450ms; --dur-route: 350ms; --dur-reveal: 800ms; --stagger: 70ms;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #151311; --surface: #1D1A17; --ink: #F3EFE7; --muted: #B9B2A6; --line: #3A342D;
    --shadow: 0 1px 2px rgba(0,0,0,.5), 0 14px 36px -8px rgba(0,0,0,.7);
    --endpaper: oklch(21% calc(var(--house-c) * .8) var(--house-h)); --endpaper-ink: #F3EFE7; --endpaper-soft: oklch(84% .03 var(--house-h));
    --house: var(--house-lit);
    --ribbon: oklch(12% .012 var(--house-h)); --ribbon-edge: oklch(8% .008 var(--house-h)); --ribbon-sheen: oklch(52% .03 var(--house-h));
    --ribbon-rim: oklch(78% .05 var(--house-h) / .7);   /* at night the lamp catches the ribbon's edges, so it reads on the dark teal */
    --lamp: oklch(80% .1 75 / .1);
    --night: #001015;   /* Plotwright's desk a step deeper, oklch(16% .028 214): the dark endpaper is the desk's own teal, so the band and footer keep their edge */
  }
}

/* base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--step-0)/1.6 var(--sans); font-kerning: normal; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
p, ul { margin: 0 0 var(--s4); }
p, li { text-wrap: pretty; }
.nw { white-space: nowrap; }
strong { font-weight: 700; }
cite { font-style: inherit; }
a { color: var(--link); text-decoration-color: var(--house); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
@media (prefers-color-scheme: dark) { a { text-decoration-thickness: 2px; } }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--house); color: var(--bg); }
header.site ::selection, .opener ::selection, footer.site ::selection, .home .intro ::selection { background: var(--endpaper-ink); color: var(--endpaper); }
.book ::selection { background: var(--book-ink); color: var(--book-field); }

/* layout */
.wrap { max-width: var(--col); margin-inline: auto; padding-inline: var(--pad); }
@media (min-width: 720px) { :root { --pad: var(--s6); } }
main { padding-block: 0 max(var(--s8), var(--hang) + var(--s5)); }   /* room for the ribbon's end below a short page */

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -9999px; --focus: var(--endpaper-ink); }
.skip:focus { left: var(--s4); top: var(--s4); z-index: 10; background: var(--house-lit); color: var(--endpaper); padding: var(--s2) var(--s3); font-weight: 700; }

/* the inner pages: the house's front endpaper, a band carrying the imprint and its end mark */
header.site { background: var(--endpaper); color: var(--endpaper-ink); --focus: var(--endpaper-ink); }
.bar { height: var(--bar-h); display: flex; align-items: center; }
.mark { font: var(--step-2)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: inherit; text-decoration: none; }   /* taste-ok: the imprint, as on the home lockup */
.mark::after { content: ""; display: inline-block; width: .3em; height: .3em; margin-left: .14em; background: var(--house-lit); }   /* the end mark */
.mark:hover { color: var(--house-lit); }

/* under it, still on the endpaper, each page's title; the ribbon hangs from the top edge in its own lane at the right
   of the column, and out past the endpaper */
.opener { position: relative; background: var(--endpaper); color: var(--endpaper-ink); --focus: var(--endpaper-ink); padding-block: clamp(2rem, 1rem + 3vw, 4rem) clamp(3rem, 2rem + 4vw, 6rem); }
.opener > .wrap { padding-right: calc(var(--pad) + var(--ribbon-w) + var(--s5)); }   /* the ribbon's lane: no text runs under it */
.opener h1 { font-size: var(--step-5); line-height: .94; max-width: 14ch; margin: 0; }
.opener .small { color: var(--endpaper-soft); margin: var(--s4) 0 0; }
.opener::after {
  content: ""; position: absolute; z-index: 1; top: calc(-1 * var(--bar-h)); right: var(--edge); pointer-events: none;
  width: var(--ribbon-w); height: calc(100% + var(--bar-h) + var(--hang)); background: var(--ribbon-paint); clip-path: var(--swallowtail);
}

/* headings */
h1, h2, h3, .title { font-family: var(--display); font-weight: 400; line-height: 1.04; letter-spacing: .005em; margin: 0 0 var(--s3); text-wrap: balance; }
h1 { font-size: var(--step-4); }
.title { font-size: var(--step-3); }
h2 { font-size: var(--step-2); margin-top: var(--s7); }
.label { font: 700 .8125rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s4); }

/* home */
.intro { padding-block: var(--s4) var(--s6); margin-bottom: var(--s6); border-bottom: 1px solid var(--line); }
.intro h1 { margin-bottom: var(--s2); }
.lede { font: italic 500 var(--step-2)/1.3 var(--serif); margin: 0; }

/* the book, or the download */
.book-text { max-width: var(--measure); }
.cover { width: 100%; box-shadow: var(--shadow); }
.cover.page { outline: 1px solid var(--line); outline-offset: -1px; }
.page-link { display: block; }
.page-link:hover .cover.page { outline: 2px solid var(--book-accent); outline-offset: -2px; }
.subtitle { font: italic 500 var(--step-1)/1.35 var(--serif); margin: 0 0 var(--s4); text-wrap: balance; }
.byline { font-weight: 700; margin: 0; }
.status { color: var(--muted); margin: 0 0 var(--s5); }
.book ul { padding-left: 1.15em; }
.book li { margin-bottom: var(--s2); padding-left: .2em; }
.book li::marker { color: var(--book-accent); }
.free { margin-block: var(--s5); }
.free a { font-weight: 700; }

.tag { display: inline-block; background: var(--house-lit); color: var(--endpaper); font: 1rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; padding: 6px 10px 5px; margin: 0 0 var(--s4); }   /* taste-ok: a label chip, as the home's Software tag */
/* the house's button: endpaper ink, and a fill wipes across on hover. A book's button takes its own livery (below) */
.button {
  --btn-bg: var(--endpaper); --btn-ink: var(--endpaper-ink); --btn-wipe: var(--house);
  position: relative; isolation: isolate; overflow: hidden; display: inline-block; background: var(--btn-bg); color: var(--btn-ink); border: 1px solid transparent;
  font: var(--step-2)/1 var(--display); letter-spacing: .04em; text-decoration: none; padding: 16px 28px; margin-top: var(--s2);
}
.button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--btn-wipe); transform: scaleX(0); transform-origin: right; }
.button:hover::before { transform: scaleX(1); transform-origin: left; }
.button .dl { display: inline-block; vertical-align: -3px; margin-right: 10px; }
.button:active { transform: scale(.98); }
@media (prefers-color-scheme: dark) { .button { --btn-bg: var(--house-lit); --btn-ink: var(--endpaper); --btn-wipe: var(--endpaper-ink); } }

.small { color: var(--muted); font-size: var(--step--1); line-height: 1.55; }

/* reading pages: privacy, not-found, Plotwright */
.prose { padding-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.prose > * { max-width: var(--measure); }
.prose h2 { margin-top: var(--s6); margin-bottom: var(--s2); }
.prose ul { padding-left: 1.15em; }
.prose li { margin-bottom: var(--s2); }
.prose li::marker { color: var(--house); }
@media (min-width: 960px) {   /* a long page sets its headings in a rail beside the text */
  .rail { display: grid; grid-template-columns: 12rem minmax(0, var(--measure)); column-gap: var(--s6); align-items: start; }   /* 52rem: clear of the ribbon's lane */
  .rail > * { grid-column: 2; }
  .rail > h2 { grid-column: 1; margin-bottom: 0; }
  .rail > h2, .rail > h2 + * { margin-top: var(--s7); }
}

/* Plotwright: its own board's night ground and its real screen, under the house band, as on the home page */
.night {
  display: grid; overflow-x: clip; padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3.5rem, 2rem + 6vw, 8rem);
  grid-template-columns: [full-start] minmax(var(--pad), 1fr) [content-start] minmax(0, 20rem) [split] minmax(0, calc(var(--col) - 2 * var(--pad) - 20rem)) [content-end] minmax(var(--pad), 1fr) [full-end];
  background: var(--night); color: var(--night-ink); --focus: var(--house-lit); --muted: var(--night-soft);
}
.night::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(45% 70% at 68% 55%, oklch(80% .08 70 / .14), transparent 70%); }
/* the ribbon hangs the full length, as on the other inner pages: down its lane beside the title, under the screen (it never
   covers the board), and out past the night onto the page */
.night-text { grid-column: content; position: relative; padding-right: calc(var(--ribbon-w) + var(--s5)); }
.night h1 { font-size: var(--step-6); line-height: .9; max-width: none; margin-bottom: var(--s4); }
.night .subtitle { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); max-width: 26ch; margin: 0; }
.night .screen { grid-column: content-start / full-end; z-index: 2; margin: var(--s7) 0 0; perspective: 1400px; }   /* above the ribbon */
@media (min-width: 960px) { .night .screen { grid-column: split / full-end; } }

/* the Protocol: No. 01's download, so its content wears No. 01's livery (field, ink, accent and tape) */
.download { background: var(--book-field); color: var(--book-ink); --focus: var(--book-ink); --link: var(--book-ink); overflow-x: clip; padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }
.download::before {   /* the book's tape along both edges of its field */
  content: ""; position: absolute; inset: 0 -8rem; pointer-events: none;
  background: repeating-linear-gradient(-45deg, var(--book-accent) 0 10px, var(--book-ink) 10px 20px) top / 100% 14px no-repeat,
              repeating-linear-gradient(-45deg, var(--book-accent) 0 10px, var(--book-ink) 10px 20px) bottom / 100% 14px no-repeat;
}
.download > .wrap { display: grid; grid-template-columns: 15rem 1fr; gap: var(--s7); align-items: start; }
.download a { text-decoration-color: var(--book-accent); }
.download .tag { background: var(--book-ink); color: var(--book-field); }
.download h1 { max-width: 13ch; margin-bottom: var(--s4); }
.download .small { color: inherit; }
.download .button { --btn-bg: var(--book-ink); --btn-ink: var(--book-field); --btn-wipe: var(--book-wipe); }
.download .cover.page { margin-top: var(--s2); }

/* the email box (off until switched on; see protocol/index.html) */
.signup { margin-top: var(--s8); padding: var(--s5); background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--house); max-width: var(--measure); }
.signup h2 { margin-top: 0; font-size: var(--step-1); }
.signup p { font-size: var(--step--1); color: var(--muted); }
.signup label { display: block; font-weight: 700; margin-bottom: var(--s2); }
.signup .row { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.signup input:focus { border-color: var(--ink); }
.signup input { caret-color: var(--house); flex: 1 1 14rem; min-height: 48px; font: inherit; padding: var(--s2) var(--s3); border: 2px solid var(--muted); border-radius: 0; background: var(--bg); color: var(--ink); }
.signup button { min-height: 48px; font: var(--step-1)/1 var(--display); letter-spacing: .04em; padding: 0 var(--s5); background: transparent; color: var(--ink); border: 2px solid var(--ink); cursor: pointer; }
.signup button:hover { background: var(--ink); color: var(--bg); }
@media (prefers-color-scheme: dark) { .signup button { color: var(--house); border-color: var(--house); } .signup button:hover { background: var(--house); color: var(--bg); } }

/* the footer: the back endpaper, where the ribbon ends, with the closing lockup, the colophon and the house's end mark */
footer.site {
  max-width: none; margin: 0; padding: clamp(4.5rem, 3rem + 6vw, 8rem) var(--edge) var(--s7);
  position: relative; overflow-x: clip; background: var(--endpaper); color: var(--endpaper-ink); font-size: var(--step--1); --link: var(--endpaper-ink); --focus: var(--endpaper-ink);
}
footer.site::before {                                /* the ribbon's other end, over the S of the closing lockup */
  content: ""; position: absolute; top: 0; left: calc(var(--edge) + var(--step-5) * 7.338 - var(--ribbon-w) * 1.3);
  width: var(--ribbon-w); height: clamp(5rem, 3rem + 6vw, 9rem); transform-origin: top; background: var(--ribbon-paint); clip-path: var(--swallowtail);
}
footer.site p { margin: 0; }
footer.site .imprint { font: var(--step-5)/.9 var(--display); text-transform: uppercase; margin-bottom: var(--s4); }   /* taste-ok: the imprint as signed off, not an eyebrow */
footer.site .imprint::after { content: ""; display: inline-block; width: .3em; height: .3em; margin-left: .14em; background: var(--house-lit); }   /* the end mark */
footer.site .colophon { font: italic 500 clamp(1.125rem, 1rem + .6vw, 1.5rem)/1.3 var(--serif); max-width: 34ch; margin-bottom: var(--s7); }
footer.site a { color: inherit; text-decoration-color: var(--house-lit); }
footer.site .legal { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); color: var(--endpaper-soft); }

@media (prefers-color-scheme: dark) {
  .cover { outline: 1px solid rgba(255,255,255,.08); outline-offset: -1px; }
  .cover.page { filter: brightness(.88); }
  .signup input:focus { border-color: var(--house); }
}
@media (max-width: 640px) {
  .download > .wrap { grid-template-columns: 1fr; gap: var(--s5); }
  .download .cover { width: 6.5rem; }
  .signup { padding: var(--s4); }
  .signup button { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  a, .signup button, .mark { transition: color .15s, background-color .15s, text-decoration-thickness .15s; }
  .button { transition: transform var(--dur-press) var(--ease-out); }
  .button::before { transition: transform var(--dur-hover-out) var(--ease-out); }
  .button .dl { transition: transform .2s ease-out; }
  .button:hover .dl, .button:focus-visible .dl { transform: translateY(2px); }
  @media (hover: hover) and (pointer: fine) { .button:hover::before { transition-duration: calc(var(--dur-hover-in) * 2); } }
  @view-transition { navigation: auto; }   /* a quiet cross-fade between pages, where the browser supports it */

  /* the inner pages' load: the ribbon drops in, the title rises, the lines under it follow, and the end mark is stamped */
  .opener::after { animation: drop calc(var(--dur-reveal) * 1.4) var(--ease-out) calc(var(--stagger) * 3) backwards; }
  .opener h1 { animation: rise-lcp var(--dur-reveal) var(--ease-out) calc(var(--stagger) * 2) backwards; }
  .opener .tag, .opener h1 ~ * { animation: rise calc(var(--dur-reveal) * .9) var(--ease-out) calc(var(--stagger) * 6) backwards; }
  .mark::after { animation: stamp calc(var(--dur-reveal) * .6) var(--ease-out) calc(var(--stagger) * 10) backwards; }
  .download::before { animation: run calc(var(--dur-reveal) * 1.6) var(--ease-out) backwards; }   /* No. 01's tape runs in */
  .night .screen-frame { animation: settle calc(var(--dur-reveal) * 1.5) var(--ease-out) calc(var(--stagger) * 4) backwards; }   /* Plotwright's screen switches on and settles */
}
@keyframes run { from { translate: 6rem 0; } }
@keyframes stamp { from { scale: 3; opacity: 0; } }
@keyframes settle { from { transform: rotateY(-34deg) rotateX(12deg) translateX(10%); opacity: .25; } }

/* ===== Home (body.home). The house opens and closes on its teal-ink endpapers, with an ink ribbon marking the page;
   the numbered list sits between them, and each entry on it wears its own book's colours (livery tokens below).
   Grid: 12 columns between two gutters; [full] reaches the viewport edges. ===== */
body.home {
  --margin: clamp(1rem, .5rem + 2vw, 2rem);
  --gap: clamp(.75rem, .5rem + 1vw, 1.5rem);
  --content: 94.5rem;                                   /* 12 x 6.5rem columns and 11 gaps at most */
  --book-w: min(22rem, 60vw);
  --hero-top: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
  /* the lockup's width: both lines are justified to it, as a title is set on a cover (Anton advance / em = size).
     On short screens it shrinks so the tagline stays in the first screen. */
  --lock: clamp(20.25rem, min(10.125rem + 45vw, (100svh - 19rem) * 1.75), 50.625rem);
  --edge: max(var(--margin), (100% - var(--content)) / 2);   /* the footer aligns with the home grid */
  --ribbon-x: calc(var(--lock) - var(--ribbon-w) * 1.3);   /* over the last S of PRESS, and under BACKMATTER */
  /* the moving ribbon (motion only): where it starts, the page edge it moves to, and where its end lands */
  --rx0: calc(max(var(--margin), (100% - var(--content)) / 2) + var(--ribbon-x));
  --rx1: calc(100% - var(--margin) / 2 - var(--ribbon-w) / 2);
  --rx2: calc(max(var(--margin), (100% - var(--content)) / 2) + var(--step-5) * 7.338 - var(--ribbon-w) * 1.3);   /* over the S of the closing lockup */
  --tail0: 85svh; --land: 12.5rem;
  /* the catchphrase face: Bricolage at 96 pt, condensed and heavy; --lede-em is its widest line in em */
  --lede-w: 800; --lede-s: 75%; --lede-em: 4.57;
}
.home main.wrap {
  max-width: none; padding: 0; isolation: isolate; overflow-x: clip; position: relative; z-index: 1;   /* above the footer, so the ribbon lands on it */   /* clip: bleeds never scroll sideways, and sticky still works */
  display: grid; column-gap: var(--gap); align-content: start;
  grid-template-columns: [full-start] minmax(calc(var(--margin) - var(--gap)), 1fr)
                         [content-start] repeat(12, minmax(0, 6.5rem)) [content-end]
                         minmax(calc(var(--margin) - var(--gap)), 1fr) [full-end];
}

/* the front endpaper and its lamp: grid items, exactly as tall as the hero row */
.home main.wrap::before, .home main.wrap::after { content: ""; grid-column: full; grid-row: 1; z-index: -1; }
.home main.wrap::before { background: var(--endpaper); }
.home main.wrap::after { background: radial-gradient(55% 85% at 58% 26%, var(--lamp), transparent 72%); }   /* the lamp, over the ribbon */

/* the hero: the press. Its name as a poster, its tagline, one line about it */
.home .intro {
  grid-column: content; grid-row: 1; position: relative; z-index: 1;
  margin: 0; border: 0; padding-block: var(--hero-top) clamp(3rem, 2rem + 4vw, 6rem);
  color: var(--endpaper-ink); --focus: var(--endpaper-ink);
}
.home .intro h1 {
  margin: 0 0 clamp(1.25rem, .75rem + 2vw, 2.5rem); text-transform: uppercase; letter-spacing: 0; line-height: .84;   /* taste-ok: the lockup, not an eyebrow */
}
.home .intro h1 .l1 { position: relative; z-index: 2; view-transition-name: imprint; }   /* above the ribbon: the ribbon runs under BACKMATTER and over the S */
.home .intro h1 > span { display: block; inline-size: max-content; }
.home .intro h1 .l1 { font-size: calc(var(--lock) / 4.821); }   /* BACKMATTER: 4.821 em wide in Anton */
.home .intro h1 .l2 { font-size: calc(var(--lock) / 2.283); margin-top: calc(var(--lock) * .03); }   /* PRESS: 2.283 em */
.home .press-line { container-type: inline-size; max-width: calc(var(--ribbon-x) - var(--gap)); }   /* stops short of the ribbon */
.home .lede {   /* the catchphrase as a display element: three set lines, sized to fill their column */
  font: normal var(--lede-w) min(calc(100cqi / (var(--lede-em) * 1.03)), 6.5rem)/.94 "Bricolage Display", var(--sans); font-stretch: var(--lede-s);
  letter-spacing: -.01em; margin: 0 0 var(--s5);
}
.home .lede > span { display: block; white-space: nowrap; }
.home .about-press { color: var(--endpaper-soft); font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); max-width: min(40ch, var(--lock) * .85); margin: 0; }

/* the ribbon: the house bookmark, ink satin, hung from the top edge over the S of PRESS and out past the endpaper */
.home .intro::after {
  content: ""; position: absolute; z-index: 1; top: 0; left: var(--ribbon-x);
  width: var(--ribbon-w); height: calc(100% + clamp(4rem, 2rem + 8vw, 9rem));
  background: var(--ribbon-paint); clip-path: var(--swallowtail);
}
.home .intro::before {                               /* its shadow on the page, thrown by the lamp */
  content: ""; position: absolute; z-index: 1; top: 0; left: calc(var(--ribbon-x) + var(--ribbon-w) * .35);
  width: var(--ribbon-w); height: calc(100% + clamp(4rem, 2rem + 8vw, 9rem) - var(--ribbon-w));
  background: oklch(10% .02 160 / .45); filter: blur(calc(var(--ribbon-w) * .3)); pointer-events: none;
}

/* the list: a real sequence, so its numbers are content */
.home .list { grid-column: full; display: grid; grid-template-columns: subgrid; padding-top: clamp(4.5rem, 2.5rem + 7vw, 10rem); }
.home .list-head { grid-column: content; margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.home .list-head h2 { font-size: var(--step-5); line-height: .94; margin: 0 0 var(--s3); }
.home .list-head p { color: var(--muted); max-width: min(40ch, var(--lock) * .85); margin: 0; }
.home .titles, .home .titles > li { grid-column: full; display: grid; grid-template-columns: subgrid; list-style: none; margin: 0; padding: 0; }

/* the livery: each entry sets its book's own three colours; everything in the entry is drawn from them */
.book[data-no="01"] { --book-field: var(--yellow); --book-ink: var(--black); --book-accent: var(--red); --cast: 32% .07 75; }
/* the hover fill under the field-coloured label: the accent deepened with the book's own ink, so the label stays at 4.5:1
   or better (No. 01: yellow on this red is 4.8:1; on the cover's red it was 3.6:1) */
.book { --book-wipe: color-mix(in srgb, var(--book-accent) 80%, var(--book-ink)); }
.home .book {
  grid-column: full; display: grid; grid-template-columns: subgrid; grid-template-rows: auto auto auto auto;
  column-gap: var(--gap); row-gap: 0; align-items: start; position: relative; isolation: isolate;
}
.home .book::before, .home .book::after { content: ""; grid-column: full; grid-row: 1 / 4; z-index: -1; align-self: stretch; }
.home .book::before { background: var(--book-field); }
.home .book::after {                                    /* the book's own tape, along both edges of its field */
  margin-inline: -8rem; z-index: 1; pointer-events: none;   /* above the head blocks, which carry the field colour in dark mode */
  background: repeating-linear-gradient(-45deg, var(--book-accent) 0 10px, var(--book-ink) 10px 20px) top / 100% 14px no-repeat,
              repeating-linear-gradient(-45deg, var(--book-accent) 0 10px, var(--book-ink) 10px 20px) bottom / 100% 14px no-repeat;
}
.home .no { grid-column: content; grid-row: 1; margin: 0; padding-top: clamp(3rem, 2rem + 4vw, 6rem); color: var(--book-ink); font-family: var(--display); line-height: .8; }
.home .no-label { display: block; font-size: clamp(1.25rem, 1rem + 1vw, 2rem); line-height: 1; margin-bottom: .15em; }
.home .no-num { display: block; font-size: clamp(9rem, 4.5rem + 20vw, 22.5rem); line-height: .86; padding-top: .04em; margin-left: -.03em; }   /* 144 to 360 px */

/* No. 01 in CSS 3D: the real cover, untouched, on a spine in the house livery */
.home .cover-stage { grid-column: content; grid-row: 2; z-index: 2; position: relative; perspective: 1400px; perspective-origin: -30% 35%; justify-self: start; margin: var(--s7) 0 var(--s7) 6%; }
.home .book3d {
  --spine: calc(var(--book-w) * .14);
  position: relative; width: var(--book-w); transform-style: preserve-3d;
  transform: rotateY(30deg) rotateX(2deg);            /* turned to show the spine */
}
.home .book3d .cover { width: 100%; height: auto; outline: 0; border-radius: 1px 3px 3px 1px;   /* taste-ok: an image, never focused. No translateZ: in Chrome it stops the board painting inside a sticky 3D parent */
  box-shadow: -1px 2px 3px oklch(var(--cast) / .3), -10px 16px 26px -10px oklch(var(--cast) / .36); }
.home .book3d::before {                              /* the spine: the book's colour between the house head and foot bands; the list number on the foot */
  content: attr(data-no) / ""; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--spine)); width: var(--spine);
  transform-origin: right center; transform: rotateY(-90deg);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: calc(var(--spine) * .42);
  font: calc(var(--spine) * .52)/1 var(--display); color: var(--endpaper-ink);
  background:
    linear-gradient(to right, oklch(0% 0 0 / .28), oklch(0% 0 0 / .06) 55%, oklch(100% 0 0 / .1)),
    linear-gradient(var(--house-lit) 0 0) 50% calc(var(--spine) * .3) / calc(var(--spine) * .36) calc(var(--spine) * .36) no-repeat,
    linear-gradient(var(--endpaper) 0 0) top / 100% calc(var(--spine) * .96) no-repeat,
    linear-gradient(var(--endpaper) 0 0) bottom / 100% calc(var(--spine) * 1.4) no-repeat,
    var(--book-field);
}

.home .book-head { grid-column: content; grid-row: 3; padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); color: var(--book-ink); --focus: var(--book-ink); }
.home .book .title { font-size: var(--step-5); line-height: .94; max-width: 12ch; margin-bottom: var(--s5); }
.home .book .subtitle { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); line-height: 1.22; max-width: 26ch; margin-bottom: var(--s5); }
.home .book .byline { font-size: 1.125rem; }
.home .book .status { color: inherit; font-size: 1.125rem; margin: 0; }
/* the entry's record: each fact named in the book's voice face, then set in its text face */
.home .book .meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); margin: var(--s2) 0 0; font-size: 1.125rem; }
.home .book .meta > div { display: flex; gap: var(--s2); align-items: baseline; }
.home .book .meta dt { font: italic 500 1.125rem/1.35 var(--serif); }
.home .book .meta dd { margin: 0; font-weight: 700; }

/* the book's call to action, in the book's ink: a red fill wipes across on hover */
.home .offer { margin: var(--s6) 0 0; max-width: 30rem; }
.home .offer a {
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--s3) var(--s4);
  padding: var(--s5) var(--s5) var(--s4); border: 3px solid var(--book-ink); background: var(--book-ink); color: var(--book-field);
  font: clamp(1.75rem, 1.25rem + 1.8vw, 2.625rem)/1 var(--display); text-decoration: none;
}
.home .offer .kicker { grid-column: 1 / -1; font: 700 1rem/1.3 var(--sans); }
.home .offer .arrow { width: 1.1em; height: 1.1em; margin-bottom: .05em; }
.home .offer a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--book-wipe); transform: scaleX(0); transform-origin: right; }
.home .offer a:hover::before { transform: scaleX(1); transform-origin: left; }
.home .offer a:active { transform: scale(.98); }

.home .book-text { grid-column: content; grid-row: 4; padding-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.home .book-text > * { max-width: var(--measure); }
.home .book-text p, .home .book-text li { font-size: 1.125rem; line-height: 1.65; }
.home .hook { margin-bottom: var(--s6); }
.home .book-text .hook strong { display: block; font-size: clamp(1.875rem, 1.3rem + 2.6vw, 3rem); line-height: 1.04; font-weight: 700; letter-spacing: -.012em; max-width: 15ch; text-wrap: balance; }
.home .checks { list-style: none; padding: 0; margin-block: var(--s6) var(--s7); }
.home .checks li { position: relative; padding-left: 2.6rem; margin-bottom: var(--s4); }
.home .checks li::before { content: ""; position: absolute; left: 0; top: .2em; width: 1.375rem; height: 1.375rem; border: 2px solid var(--book-accent); }
.home .checks li::after {                            /* the tick: an L turned 40 degrees */
  content: ""; position: absolute; left: .5rem; top: .32em; width: .45rem; height: .85rem;
  border: solid var(--book-accent); border-width: 0 3px 3px 0; transform: rotate(40deg);
}
.home .book-text .who { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); line-height: 1.2; font-weight: 600; max-width: 24ch; margin-block: var(--s7) var(--s5); text-wrap: balance; }
.home .book .author { max-width: var(--measure); margin: var(--s8) 0 0; padding: var(--s5) 0 0; border-top: 3px solid var(--ink); }
.home .book .author h4 { font: var(--step-3)/1 var(--display); margin: 0 0 var(--s4); }
.home .book-text > .small { font-size: var(--step--1); line-height: 1.55; margin-top: var(--s7); }

/* Plotwright: its own board's night ground, the real screen lit by a lamp and running off the right edge */
.home .software {
  grid-column: full; display: grid; grid-template-columns: subgrid; align-items: center; position: relative; z-index: 2;   /* above the moving ribbon: it never crosses the screen */
  max-width: none; margin: var(--section) 0 0; padding-block: var(--section); border: 0;
  /* Plotwright is on the list too, so it wears the house livery: endpaper bands at its head and foot, as No. 01 wears its tape */
  background: linear-gradient(var(--endpaper) 0 0) top / 100% 14px no-repeat, linear-gradient(var(--endpaper) 0 0) bottom / 100% 14px no-repeat, var(--night);
  color: var(--night-ink); --link: var(--night-ink); --focus: var(--house-lit); --muted: var(--night-soft);
}
.home .software::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(45% 70% at 68% 40%, oklch(80% .08 70 / .14), transparent 70%); }
.home .software-text { grid-column: content; position: relative; }
.home .software .tag { font-size: 1rem; margin: 0 0 var(--s5); background: var(--endpaper); color: var(--endpaper-ink); padding-left: 8px; }   /* the spine's head band */
.home .software .tag::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .5em; vertical-align: .05em; background: var(--house-lit); }   /* led by the end mark */
.home .software .title { font-size: var(--step-5); line-height: .94; margin-bottom: var(--s4); }
.home .software .subtitle { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.625rem); margin-bottom: var(--s5); }
.home .software p { max-width: 46ch; }
.home .software a { text-decoration-color: var(--house-lit); text-decoration-thickness: 2px; }
.home .software a:hover { text-decoration-thickness: 4px; }
.home .screen { grid-column: content-start / full-end; margin: var(--s7) 0 0; perspective: 1400px; }
.screen-frame {
  position: relative; width: 100%; overflow: hidden; background: var(--board);
  border: 1px solid oklch(100% 0 0 / .14); border-right: 0; border-radius: 12px 0 0 12px;
  transform-origin: left center; transform: rotateY(-12deg) rotateX(4deg);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .1), 0 2px 4px oklch(0% 0 0 / .4), 0 30px 60px -20px oklch(0% 0 0 / .7);
}
.screen img { width: 100%; max-width: none; }
@media (max-width: 759px) { .screen-frame { width: 160%; } }   /* on a phone the board runs well off the edge, so its cards stay legible */
/* the board's three scene cards, cut from the same screenshot so they can be dealt in (motion only; at rest they are hidden
   and the screenshot shows them in place). Rectangles in the 870 x 376 image: x 18, 299, 581; y 122 or 132; 267 x 196. */
.home .card {
  display: none; position: absolute; top: 32.447%; width: 30.69%; height: 52.128%;
  background: url("/plotwright-board.png") no-repeat; background-size: 325.843% 191.837%;
}
.home .card:nth-of-type(1) { left: 2.069%; background-position: 2.985% 67.778%; }
.home .card:nth-of-type(2) { left: 34.368%; background-position: 49.585% 67.778%; }
.home .card:nth-of-type(3) { left: 66.782%; top: 35.106%; background-position: 96.352% 73.333%; }

/* the imprint: the house's record, set like a book's copyright page on paper before the back endpaper. Like the Plotwright
   section it sits above the moving ribbon, so the ribbon's route and its landing on the closing S are unchanged */
.home .house-record {
  grid-column: full; display: grid; grid-template-columns: subgrid; align-items: start; position: relative; z-index: 2;
  background: var(--bg); padding-block: var(--section);
}
.home .house-record h2 { grid-column: content; font-size: var(--step-5); line-height: .94; margin: 0 0 var(--s6); }
.home .record { grid-column: content; max-width: var(--measure); margin: 0; border-top: 3px solid var(--ink); display: grid; grid-template-columns: max-content 1fr; column-gap: var(--s5); }
.home .record > div { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; padding-block: var(--s3); border-bottom: 1px solid var(--line); }   /* the names share one column */
.home .record dt { font: italic 500 var(--step-1)/1.35 var(--serif); }
.home .record dd { margin: 0; font-size: 1.125rem; font-weight: 600; min-width: 0; }

/* the footer: the back endpaper, where the ribbon ends, with the colophon and the house's end mark */
.home footer.site::before { left: calc(var(--edge) + var(--ribbon-x)); }   /* on the still page the ribbon's end lies straight below the hero's */

/* tablet: the number heads the entry, and the cover stands beside it and the reading, sticky */
@media (min-width: 760px) {
  body.home { --book-w: min(28vw, 26rem, (100svh - 12rem) / 1.6); }
  .home .book { grid-template-rows: auto auto auto; }
  .home .book::before, .home .book::after { grid-row: 1 / 3; }
  .home .no { grid-column: content-start / span 7; grid-row: 1; }
  .home .book-head { grid-column: content-start / span 7; grid-row: 2; }
  .home .book-text { grid-column: content-start / span 7; grid-row: 3; }
  .home .cover-stage {
    grid-column: 9 / content-end; grid-row: 1 / 4; position: sticky; align-self: start; justify-self: end;
    top: calc((100svh - var(--book-w) * 1.6) / 2); margin: clamp(3rem, 2rem + 4vw, 6rem) 0 0;
  }
  .home .software-text { grid-column: content-start / span 5; }
  .home .screen { grid-column: 8 / full-end; margin: 0; }
}
/* wide enough for a title page: the line under the name is set beside it, on the PRESS baseline */
@media (min-width: 960px) {
  .home .intro { display: grid; grid-template-columns: subgrid; align-items: end; }
  .home .intro h1 { grid-column: 1 / span 8; margin: 0; }
  .home .press-line { grid-column: 9 / span 4; max-width: none; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; padding: .2rem 0 .4rem; }
  .home .lede { margin: 0; }
}
/* desktop: number, entry and cover side by side; the number and the cover both stay while you read */
@media (min-width: 1100px) {
  .home .book { grid-template-rows: auto auto; }
  .home .book::before, .home .book::after { grid-row: 1; }
  .home .no { grid-column: content-start / span 3; grid-row: 1 / 3; position: sticky; top: var(--s6); align-self: start; }
  .home .book-head { grid-column: 5 / span 5; grid-row: 1; padding-top: clamp(3rem, 2rem + 4vw, 6rem); }
  .home .book-text { grid-column: 5 / span 5; grid-row: 2; }
  .home .cover-stage { grid-column: 10 / content-end; grid-row: 1 / 3; }
  .home .house-record h2 { grid-column: content-start / span 3; margin: 0; }   /* on the list's own columns: name where the number stands, record where the reading runs */
  .home .record { grid-column: 5 / span 5; }
}
@media (min-width: 1100px) and (prefers-color-scheme: dark) {
  .home .no { position: static; }   /* the number is drawn in the book's ink; on the dark page it stays on its field */
}
@media (prefers-color-scheme: dark) {
  /* the head blocks carry the field colour themselves, so contrast checkers (and anything that drops the pseudo-element
     field) see the book's ink on the book's field, not on the dark page */
  .home .no, .home .book-head { background: var(--book-field); }
}

/* ===== The motion score. Everything resolves to its finished state when motion is reduced or unsupported. ===== */
.mark { view-transition-name: imprint; }    /* the home lockup becomes the small imprint mark on every other page */
@keyframes fade-in { from { opacity: 0; } }
@keyframes drop { from { transform: translateY(-100%); } }
@keyframes rise-lcp { from { transform: translateY(.2em); } }        /* the lockup may be the LCP: it moves, never hides */
@keyframes rise { from { transform: translateY(1rem); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(*) { animation-duration: var(--dur-route); animation-timing-function: var(--ease-out); }

  /* 1. Feedback: enter fast, leave slow, press with weight */
  .home .offer a { transition: transform var(--dur-press) var(--ease-out); }
  .home .offer a::before, .home .offer .arrow { transition: transform var(--dur-hover-out) var(--ease-out); }
  .home .software a, .home footer.site a { transition: text-decoration-thickness var(--dur-hover-out) var(--ease-out); }
  @media (hover: hover) and (pointer: fine) {
    .home .offer a:hover::before { transition-duration: calc(var(--dur-hover-in) * 2); }
    .home .offer a:hover .arrow { transform: translateX(6px); transition-duration: var(--dur-hover-in); }
    .home .software a:hover, .home footer.site a:hover { transition-duration: var(--dur-hover-in); }
  }

  /* 2. The load (about 1.4 s): the lamp comes up, the lockup rises line by line, the ribbon drops in under BACKMATTER and
        over the S, then the catchphrase sets itself line by line, gaining weight as it lands, and the line about the press */
  .home main.wrap::after { animation: fade-in var(--dur-reveal) var(--ease-out) backwards; }
  .home .intro::after { animation: drop calc(var(--dur-reveal) * 1.4) var(--ease-out) calc(var(--stagger) * 3) backwards; }
  .home .intro h1 > span { animation: rise-lcp var(--dur-reveal) var(--ease-out) calc(var(--stagger) * 2) backwards; }
  .home .intro h1 .l2 { animation-delay: calc(var(--stagger) * 4); }
  .home .lede > span { animation: set-line calc(var(--dur-reveal) * 1.1) var(--ease-out) calc(var(--stagger) * 6) backwards; }
  .home .lede > span:nth-child(2) { animation-delay: calc(var(--stagger) * 8); }
  .home .lede > span:nth-child(3) { animation-delay: calc(var(--stagger) * 10); }
  .home .about-press { animation: rise calc(var(--dur-reveal) * .9) var(--ease-out) calc(var(--stagger) * 13) backwards; }
  .home .intro::before { animation: fade-in var(--dur-reveal) var(--ease-out) calc(var(--stagger) * 9) backwards; }
}
@keyframes set-line { from { opacity: 0; translate: 0 .4em; font-weight: 200; } }

/* 3. Scroll choreography: each section's entrance is built for what it holds. Native scroll timelines only; without
      them every section simply sits in its finished state. Screen only: on paper nothing is "in view". */
@supports (animation-timeline: view()) {
  @media screen and (prefers-reduced-motion: no-preference) {
    /* titles wipe up out of a slot */
    .home .list-head h2, .home .book .title, .home .book .author h4, .home .software .title, .home .house-record h2 {
      animation: slot linear both; animation-timeline: view(); animation-range: entry 10% entry 80%; }
    @keyframes slot { from { clip-path: inset(100% 0 -.2em 0); translate: 0 .3em; } to { clip-path: inset(-.2em 0 -.2em 0); translate: 0 0; } }
    .home .list-head p, .home .hook strong, .home .book .author p, .home footer.site .colophon, .home .record > div {
      animation: arrive linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    @keyframes arrive { from { opacity: 0; translate: 0 1.25rem; } }

    /* No. 01 arrives: its field wipes across, its tapes run, its number slides in, and the book turns in from edge-on,
       then on toward the reader while it stays beside the text */
    .home .book { view-timeline: --entry; }
    .home .book::before { animation: field linear both; animation-timeline: --entry; animation-range: entry 20% entry 65%; }
    @keyframes field { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
    @media (prefers-color-scheme: dark) { .home .book::before { animation: none; } }   /* the head blocks already carry the field */
    .home .book::after { animation: tape linear both; animation-timeline: --entry; animation-range: entry 0% exit 100%; }
    @keyframes tape { from { translate: 7rem 0; } to { translate: -7rem 0; } }
    /* the number rolls up digit by digit, like a numbering stamp */
    .home .no-num { clip-path: inset(-.2em -.1em 0 -.1em); }
    .home .no-num > span { display: inline-block; animation: roll linear both; animation-timeline: --entry; animation-range: entry 10% entry 45%; }
    .home .no-num > span + span { animation-range: entry 22% entry 57%; }
    @keyframes roll { from { translate: 0 105%; } }
    /* the book's offer slides out from under the title */
    .home .offer { animation: offer-in linear both; animation-timeline: view(); animation-range: entry 5% entry 65%; }
    @keyframes offer-in { from { translate: -2.5rem 0; opacity: 0; clip-path: inset(0 100% 0 0); } to { clip-path: inset(-1rem); } }
    .home .book3d { animation: book-pose linear both; animation-timeline: --entry; animation-range: entry 0% cover 45%; }
    @keyframes book-pose {
      0% { transform: rotateY(72deg) rotateX(2deg) translateY(10%); }
      35% { transform: rotateY(30deg) rotateX(2deg); }
      100% { transform: rotateY(22deg) rotateX(0deg); }
    }

    /* each box ticks itself as it reaches the reading line: the short stroke, then the long one */
    .home .checks li { view-timeline: --item; }
    .home .checks li::after { animation: tick linear both; animation-timeline: --item; animation-range: cover 20% cover 36%; }
    @keyframes tick { 0% { clip-path: inset(calc(100% - 3px) 100% 0 0); } 45% { clip-path: inset(calc(100% - 3px) 0 0 0); } 100% { clip-path: inset(0); } }

    /* Plotwright's night switches on like a screen, and the board settles flat */
    .home .software { view-timeline: --night; animation: switch-on linear both; animation-timeline: --night; animation-range: entry 0% entry 60%; }
    @keyframes switch-on { from { clip-path: inset(5% 4% round 28px); } to { clip-path: inset(0 round 0); } }
    .home .screen-frame { animation: settle linear both; animation-timeline: --night; animation-range: entry 15% entry 70%; }
    /* then its three scene cards are dealt onto the board, one by one */
    .home .screen img {
      mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0), linear-gradient(#000 0 0), linear-gradient(#000 0 0);   /* taste-ok: a mask; only its alpha counts */
      mask-size: 30.69% 52.128%, 30.69% 52.128%, 30.69% 52.128%, 100% 100%; mask-repeat: no-repeat;
      mask-position: 2.985% 67.778%, 49.585% 67.778%, 96.352% 73.333%, 0 0; mask-composite: exclude;
    }
    .home .card { display: block; animation: deal linear both; animation-timeline: --night; animation-range: entry 45% entry 75%; }
    .home .card:nth-of-type(2) { animation-range: entry 55% entry 85%; }
    .home .card:nth-of-type(3) { animation-range: entry 65% entry 95%; }
    @keyframes deal { from { translate: 60% -70%; rotate: 9deg; opacity: 0; } 60% { opacity: 1; } }

    /* the hero scrolls away on three planes: BACKMATTER lags, PRESS follows, the catchphrase leaves first */
    .home .intro { view-timeline: --hero; }
    .home .intro h1 .l1 { animation: rise-lcp var(--dur-reveal) var(--ease-out) calc(var(--stagger) * 2) backwards, plane linear both;
      animation-timeline: auto, --hero; animation-range: normal, exit 0% exit 100%; --plane: 45%; }
    .home .intro h1 .l2 { animation: rise-lcp var(--dur-reveal) var(--ease-out) calc(var(--stagger) * 4) backwards, plane linear both;
      animation-timeline: auto, --hero; animation-range: normal, exit 0% exit 100%; --plane: 18%; }
    .home .press-line { animation: plane linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; --plane: -30%; }
    @keyframes plane { to { translate: 0 var(--plane, 0); } }

    /* the ribbon: it leaves the S as the hero goes, moves to the page's edge, and its length follows your reading down
       the page until it lands on the back endpaper */
    .home .intro::after {
      position: fixed; top: 0; left: var(--rx0); height: 100svh; transform-origin: 50% 0; pointer-events: none;
      animation: drop calc(var(--dur-reveal) * 1.4) var(--ease-out) calc(var(--stagger) * 3) backwards, ribbon-len linear both, ribbon-move linear both;
      animation-timeline: auto, scroll(root), scroll(root);
    }
    .home .intro::before, .home footer.site::before { display: none; }   /* its shadow and the static end piece belong to the still page */
    /* its route never crosses text or the Plotwright screen: it stays on the S while the hero leaves and its end draws up,
       crosses to the edge only once the hero has gone (open paper above the list), passes under the Plotwright section,
       and comes back onto the closing S only after that lockup has assembled */
    @keyframes ribbon-len {
      0% { clip-path: polygon(0 0, 100% 0, 100% var(--tail0), 50% calc(var(--tail0) - var(--ribbon-w) * .9), 0 var(--tail0)); }
      11%, 17% { clip-path: polygon(0 0, 100% 0, 100% 14svh, 50% calc(14svh - var(--ribbon-w) * .9), 0 14svh); }
      97% { clip-path: polygon(0 0, 100% 0, 100% 74svh, 50% calc(74svh - var(--ribbon-w) * .9), 0 74svh); }
      100% { clip-path: polygon(0 0, 100% 0, 100% calc(100svh - var(--land)), 50% calc(100svh - var(--land) - var(--ribbon-w) * .9), 0 calc(100svh - var(--land))); }
    }
    @keyframes ribbon-move {   /* from the S of PRESS to the page's edge while you read, then back onto the S of the closing lockup */
      0%, 11% { left: var(--rx0); scale: 1 1; }
      17%, 97% { left: var(--rx1); scale: .45 1; }
      100% { left: var(--rx2); scale: 1 1; }
    }

    /* the closing lockup assembles: the two words slide together and the end mark is stamped last */
    .home footer.site { view-timeline: --foot; }
    .home footer.site .imprint > span { display: inline-block; animation: assemble linear both; animation-timeline: --foot; animation-range: entry 0% entry 50%; --from: -40vw; }
    .home footer.site .imprint > span + span { --from: 40vw; }
    @keyframes assemble { from { translate: var(--from, 0) 0; opacity: 0; } 70% { opacity: 1; } }
    .home footer.site .imprint::after { animation: stamp linear both; animation-timeline: --foot; animation-range: entry 45% entry 65%; }
  }
}

/* printing the privacy policy (or any page): black on white, no chrome */
@media print {
  .skip, header.site, .button, .signup { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: #000; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
  .opener::after, .night::before, .download::before, footer.site::before { display: none; }
  .home main.wrap::before, .home main.wrap::after, .home .intro::before, .home .intro::after, .home .book::before, .home .book::after, .home .book3d::before,
  .screen, .home .software::before { display: none; }
  .home main.wrap, .home .intro, .home .list, .home .titles, .home .titles > li, .home .book, .home .software, .home .house-record { display: block; }
  .home .no, .home .cover-stage { position: static; margin: 0 0 1rem; perspective: none; }
  .home .no-num { font-size: 4rem; }
  .home .book3d { transform: none; width: 8rem; }
  .home .book-head, .home .book-text { padding: 0; }
  .home .book-head { margin-bottom: 1.5rem; }
  .home .about-press, .opener .small, footer.site .legal { color: inherit; }
  .home .offer a { background: none; color: inherit; border: 0; padding: 0; font-size: 1.5rem; }
  .home .intro, .home .software, .opener, footer.site { color: inherit; background: none; padding: 0; margin-top: 1.5rem; }
  .home .software { --muted: var(--ink); --link: var(--ink); }
  .download .book-text::after { content: "Download: backmatterpress.com/protocol"; display: block; font-weight: 700; }
}