:root {
  /* Felted book cloth in sand: a 512px seamless tile of the grain in the LIDB-FRAME Midjourney art (ImageMagick). */
  --grain: url("/img/paper-cloth-light.jpg");
  --fox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.01' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.42 0 0 0 0 0.22 0 0 0 0.55 -0.24'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --paper: #f5f0e8;
  --ink: #1a2744;
  --red: #8b1a1a;
  --red-dark: #6e1414;
  --navy: #1a2744;
  --night: #112b3d;
  --rule: #ebe5d8;
  --card: #f5f0e8;
  /* Tan boxes inside the sheet: slightly see-through so the cloth grain shows (owner, 2026-09-25). */
  --box: rgba(245, 240, 232, 0.6);
  --gold: #c9a84c;
  --title: Didot, "Bodoni Moda", "Bodoni 72", Georgia, serif;
  --body: "Libre Baskerville", Georgia, serif;
  --gutter: 16px;
  --max: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* The page behind the sheet: night navy, engraved cross-hatch, and a large 480px
   tile of gold stars in which exactly one star is upside down. Data URIs only (CSP img-src allows data:). */
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  background-color: var(--night);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480' viewBox='0 0 480 480'%3E%3Cg fill='%23c9a84c' fill-opacity='0.22'%3E%3Cpath d='M40 31l2.4 7.2H50l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L30 38.2h7.6z'/%3E%3Cpath d='M120 31l2.4 7.2H130l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L110 38.2h7.6z'/%3E%3Cpath d='M200 31l2.4 7.2H210l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L190 38.2h7.6z'/%3E%3Cpath d='M280 31l2.4 7.2H290l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L270 38.2h7.6z'/%3E%3Cpath d='M360 31l2.4 7.2H370l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L350 38.2h7.6z'/%3E%3Cpath d='M440 31l2.4 7.2H450l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L430 38.2h7.6z'/%3E%3Cpath d='M0 111l2.4 7.2H10l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L-10 118.2h7.6z'/%3E%3Cpath d='M80 111l2.4 7.2H90l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L70 118.2h7.6z'/%3E%3Cpath d='M160 111l2.4 7.2H170l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L150 118.2h7.6z'/%3E%3Cpath d='M240 111l2.4 7.2H250l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L230 118.2h7.6z'/%3E%3Cpath d='M320 111l2.4 7.2H330l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L310 118.2h7.6z'/%3E%3Cpath d='M400 111l2.4 7.2H410l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L390 118.2h7.6z'/%3E%3Cpath d='M480 111l2.4 7.2H490l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L470 118.2h7.6z'/%3E%3Cpath d='M40 191l2.4 7.2H50l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L30 198.2h7.6z'/%3E%3Cpath d='M120 191l2.4 7.2H130l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L110 198.2h7.6z'/%3E%3Cpath d='M200 191l2.4 7.2H210l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L190 198.2h7.6z'/%3E%3Cpath d='M280 191l2.4 7.2H290l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L270 198.2h7.6z'/%3E%3Cpath d='M360 191l2.4 7.2H370l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L350 198.2h7.6z'/%3E%3Cpath d='M440 191l2.4 7.2H450l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L430 198.2h7.6z'/%3E%3Cpath d='M0 271l2.4 7.2H10l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L-10 278.2h7.6z'/%3E%3Cpath d='M80 271l2.4 7.2H90l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L70 278.2h7.6z'/%3E%3Cpath d='M160 271l2.4 7.2H170l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L150 278.2h7.6z'/%3E%3Cpath d='M240 271l2.4 7.2H250l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L230 278.2h7.6z'/%3E%3Cpath d='M320 271l2.4 7.2H330l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L310 278.2h7.6z'/%3E%3Cpath d='M400 271l2.4 7.2H410l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L390 278.2h7.6z'/%3E%3Cpath d='M480 271l2.4 7.2H490l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L470 278.2h7.6z'/%3E%3Cpath transform='rotate%28180 40 358.5%29' d='M40 351l2.4 7.2H50l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L30 358.2h7.6z'/%3E%3Cpath d='M120 351l2.4 7.2H130l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L110 358.2h7.6z'/%3E%3Cpath d='M200 351l2.4 7.2H210l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L190 358.2h7.6z'/%3E%3Cpath d='M280 351l2.4 7.2H290l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L270 358.2h7.6z'/%3E%3Cpath d='M360 351l2.4 7.2H370l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L350 358.2h7.6z'/%3E%3Cpath d='M440 351l2.4 7.2H450l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L430 358.2h7.6z'/%3E%3Cpath d='M0 431l2.4 7.2H10l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L-10 438.2h7.6z'/%3E%3Cpath d='M80 431l2.4 7.2H90l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L70 438.2h7.6z'/%3E%3Cpath d='M160 431l2.4 7.2H170l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L150 438.2h7.6z'/%3E%3Cpath d='M240 431l2.4 7.2H250l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L230 438.2h7.6z'/%3E%3Cpath d='M320 431l2.4 7.2H330l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L310 438.2h7.6z'/%3E%3Cpath d='M400 431l2.4 7.2H410l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L390 438.2h7.6z'/%3E%3Cpath d='M480 431l2.4 7.2H490l-6.2 4.5 2.4 7.3-6.2-4.5-6.2 4.5 2.4-7.3L470 438.2h7.6z'/%3E%3C/g%3E%3C/svg%3E"),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 7px);
  padding: 16px 6px;
}
html { overflow-x: clip; }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--red); }
/* Every heading in capitals (owner, 2026-09-26: "ALL HEADERS ON THE SITE NEED TO BE FULLY CAPITALIZED."). */
h1, h2, h3 { font-family: var(--title); line-height: 1.1; margin: 0 0 0.4em; text-transform: uppercase; }
h1 { font-size: clamp(2.4rem, 6.5vw, 4.4rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); text-align: center; }
h3 { font-size: 1.3rem; }
.edition { margin: -0.25em 0 0.9em; font: 700 0.78rem var(--body); text-transform: uppercase; letter-spacing: 0.35em; color: var(--red); }
/* Headings: a crisp 1px ink letterpress shadow, like print newspaper (owner pick "B", 2026-09-24).
   Not red (reviewer: "Bad color combo") and not blurred (owner: the blur "makes my eyes hurt"). */
h1, h2 { text-shadow: 1px 1px 0 rgba(26, 39, 68, 0.22); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gutter); top: var(--gutter); background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 10; }

/* The sheet: a framed broadside. Red outer band, gold rule, navy inner rule. */
.sheet {
  max-width: var(--max);
  margin: 0 auto;
  background: var(--paper);
  border: 10px solid var(--red);
  outline: 3px solid var(--gold);
  outline-offset: -16px;
  box-shadow: inset 0 0 0 22px var(--paper), inset 0 0 0 24px var(--navy), 0 18px 50px rgba(0, 0, 0, 0.5);
  /* The navy frame is drawn 24px in, so the content needs more than that to clear it. */
  padding: 36px 34px;
  /* Aged newsprint: fine grain, faint foxing blotches, and edges a shade darker. SVG noise only, no image files. */
  background-image:
    radial-gradient(ellipse at center, rgba(244, 238, 225, 0) 55%, rgba(140, 105, 50, 0.10) 100%),
    var(--grain),
    var(--fox);
  /* The blotch layer is stretched once over the whole sheet, never tiled, so it has no seams. */
  background-size: 100% 100%, 256px 256px, 100% 100%;
  background-repeat: no-repeat, repeat, no-repeat;
}

.masthead { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 8px; padding: 6px 0; border-top: 3px double var(--ink); border-bottom: 3px double var(--ink); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; }

.hero { display: grid; gap: 24px; padding: 24px 0 28px; align-items: center; border-bottom: 6px double var(--navy); }
.kicker { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.8rem; color: var(--navy); margin: 0 0 10px; }
.kicker strong { color: var(--red); }
.lede { font-size: 1.2rem; font-style: italic; margin: 0 0 12px; }
.tagline { font-family: var(--title); font-size: 1.35rem; color: var(--red); border-left: 4px solid var(--red); padding-left: 12px; margin: 0 0 18px; }
.launch { font-weight: 700; color: var(--navy); }
.countdown { margin-top: -0.4em; font: italic 1rem var(--body); color: var(--red); }
.countdown .days { font: normal 700 1.5rem var(--title); }
.countdown[hidden] { display: none; }
.hero-art { max-height: 78vh; width: auto; margin: 0 auto; box-shadow: 0 10px 30px rgba(26, 39, 68, 0.3); }
/* One frame for every picture, so a crop edge reads as a mat, not a cut. */
.hero-art, .beat img { border: 6px solid var(--gold); outline: 2px solid var(--navy); outline-offset: -4px; }

.button { display: inline-block; background: var(--red); color: var(--card); font-family: var(--body); font-weight: 700; font-size: 1rem; text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; padding: 14px 24px; border: 0; cursor: pointer; min-height: 44px; }
.button:hover, .button:focus { background: var(--red-dark); }
/* The signup is a ballot mark (owner pick, 2026-09-24): an empty box that gets a red X on hover or focus. */
.ballot { display: inline-flex; align-items: center; gap: 14px; background: var(--box); color: var(--ink); border: 2px solid var(--ink); padding: 12px 18px; font: 700 1.05rem var(--body); text-align: left; text-decoration: none; cursor: pointer; min-height: 44px; }
.ballot .box { position: relative; flex: none; width: 28px; height: 28px; border: 3px solid var(--ink); background: var(--paper); }
.ballot:hover .box::before, .ballot:hover .box::after, .ballot:focus .box::before, .ballot:focus .box::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; margin-top: -2px; height: 4px; background: var(--red); }
.ballot:hover .box::before, .ballot:focus .box::before { transform: rotate(45deg); }
.ballot:hover .box::after, .ballot:focus .box::after { transform: rotate(-45deg); }
.register form .ballot { justify-content: center; }
/* Phones only: a red bar pinned to the bottom so the signup is one tap away during the scroll. */
.sticky-cta { display: none; }
@media (max-width: 759px) {
  .sticky-cta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--red); color: var(--card); text-align: center; font: 700 0.95rem var(--body); letter-spacing: 0.03em; text-decoration: none; padding: 14px var(--gutter); box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.3); }
  body { padding-bottom: 64px; }
}

/* The gold rules are inset shadows so the notched corners cut them too; a gap separates the band from the hero rule. */
.stats { background: var(--navy); color: var(--paper); box-shadow: inset 0 3px 0 var(--gold), inset 0 -3px 0 var(--gold); margin: 14px 0 0; }
.stats ul { list-style: none; margin: 0 auto; padding: 18px var(--gutter); display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; text-align: center; }
.stat { display: block; font-family: var(--title); font-size: 1.9rem; font-weight: 700; color: var(--gold); }
/* The "?" in the play-time stat: a hover or tap label (owner, 2026-09-24). Pure CSS, no script. */
.tip { position: relative; cursor: help; border-bottom: 2px dotted currentColor; }
.tip:hover::after, .tip:focus::after { content: attr(data-tip); position: absolute; bottom: 115%; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--ink); color: var(--paper); font: italic 700 0.85rem var(--body); letter-spacing: 0; padding: 5px 10px; border: 1px solid var(--gold); z-index: 5; }
.tip:focus { outline: none; }
.label { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; line-height: 1.35; display: block; }

.reveal, .loop, .faq, .register, .decks { padding: 32px 0; }
/* Phones: headings are plain navy with a small curled swash under them (the ribbon is desktop only). */
@media (max-width: 759px) { section > h2::after, .faq-main > h2::after { content: ""; display: block; width: 180px; height: 18px; margin: 10px auto 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='18' viewBox='0 0 180 18'%3E%3Cg fill='none' stroke='%238b1a1a' stroke-width='1.6' stroke-linecap='round'%3E%0A%3Cpath d='M10 9H66M114 9H170'/%3E%0A%3Cpath d='M66 9c6 0 8-6 14-6s6 6 10 6 4-6 10-6 8 6 14 6'/%3E%0A%3Cpath d='M10 9c-5 0-7 4-4 6s6-1 4-3M170 9c5 0 7 4 4 6s-6-1-4-3'/%3E%0A%3Ccircle cx='90' cy='9' r='2' fill='%238b1a1a' stroke='none'/%3E%0A%3C/g%3E%3C/svg%3E") center / contain no-repeat; } }

.decks h3, .decks p { overflow-wrap: break-word; }
/* Six real mini-deck backs (SYW card export, bleed trimmed), 3 across and 2 high. Only Journalism
   is crooked, matching its crooked deck tile below (owner, 2026-09-24). Do not "fix" it. */
.backs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 780px; margin: 0 auto 24px; }
.backs img { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 6px 14px rgba(26, 39, 68, 0.25); }
.backs img[src$="/journalism.jpg"] { transform: rotate(1.4deg); will-change: transform; backface-visibility: hidden; }
.deck { margin: 0; }
.deck figcaption { padding: 10px 2px 0; }
.decks h3 { font-size: 1.05rem; margin: 0 0 2px; }
.decks p { margin: 0; font-size: 0.88rem; }
/* A 32x64 board, upside down, scaled up with hard pixel edges (owner, 2026-09-24). */
.pixel { image-rendering: crisp-edges; image-rendering: pixelated; width: 160px; height: auto; margin: 0 auto 12px; border: 6px solid var(--gold); outline: 2px solid var(--navy); outline-offset: 4px; }
.pixel-full { width: min(40vw, 22.5vh); }
.faq-cols { display: grid; gap: 24px 10px; }
.faq-board { align-self: start; }
.subhead { text-align: center; font-style: italic; margin: -4px 0 14px; color: var(--red); }
/* Sneak peek: a black cover beside the FAQ heading opens the board in a CSS-only modal (:target, no script). */
.peek { display: grid; place-items: center; width: 100%; max-width: 220px; aspect-ratio: 1 / 2; margin: 0 auto; background: #000; color: var(--gold); border: 4px solid var(--gold); text-decoration: none; text-align: center; font: 700 0.9rem/1.3 var(--body); text-transform: uppercase; letter-spacing: 0.15em; padding: 8px; }
.peek:hover, .peek:focus { color: var(--card); border-color: var(--red); }
.modal { display: none; position: fixed; inset: 0; z-index: 50; }
.modal:target { display: grid; place-items: center; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.8); }
.modal-box { position: relative; background: var(--paper); color: var(--ink); border: 6px solid var(--gold); padding: 24px; max-width: min(92vw, 520px); max-height: 90vh; overflow-y: auto; text-align: center; }
.modal-box .pixel { margin: 0 auto 14px; }
.reveal { display: grid; gap: 18px; }
.beat { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: start; align-content: start; background: var(--box); border: 1px solid var(--rule); border-top: 4px solid var(--red); padding: 16px; }
.beat img { width: 100%; }
/* Deliberately crooked: the third card tilts. Owner, 2026-09-24: "something so obviously wrong that it'd drive OCD people insane."
   The staggered text offsets were removed, owner 2026-09-25: "they don't work in a 2x2." Do not "fix" the tilt. */
.beat:nth-of-type(3) { transform: rotate(-0.6deg); }
/* Rotated thin borders render stair-stepped. A compositor layer plus a transparent outline makes the
   browser antialias the edges. The tilt stays; only the jaggies go. */
.beat:nth-of-type(3) { will-change: transform; backface-visibility: hidden; outline: 1px solid transparent; }
.beat:nth-of-type(3) img { backface-visibility: hidden; }
.beat p { margin: 0; font-size: 0.95rem; }

.loop ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; counter-reset: step; }
.loop li { background: var(--box); border: 1px solid var(--rule); border-top: 4px solid var(--navy); padding: 16px; counter-increment: step; }
.loop li p { margin: 0; font-size: 0.95rem; }
.loop li h3::before { content: counter(step) ". "; color: var(--red); }

.faq details { border-bottom: 1px dotted var(--rule); padding: 4px 0; }
.faq summary { font-family: var(--title); font-size: 1.2rem; cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.faq details p { color: var(--navy); margin: 4px 0 0; padding-left: 1.2em; border-left: 3px solid var(--gold); }
.faq p { margin: 8px 0 0; }
.box-list { margin: 4px 0 0; padding-left: 1.2em; border-left: 3px solid var(--gold); color: var(--navy); }
.box-list ul { list-style: none; margin: 0; padding: 0; }
.box-list li { margin: 3px 0; }
.box-list strong { color: var(--red); }
.box-list .box-coda { margin: 8px 0 0; font-style: italic; color: var(--red); border: 0; padding: 0; }

.register { text-align: center; border-bottom: 0; }
.register label[for="email"] { font-weight: 700; }
/* The signup blurb is left-aligned like every other section, in the same column as the form. The captcha sits centered under the field. */
.register > p { text-align: left; max-width: 420px; margin-left: auto; margin-right: auto; }
.register .cf-turnstile { justify-self: center; }
/* Turnstile is a fixed 300px bar drawn by Cloudflare. On phones narrower than that inside the sheet,
   scale the whole widget down rather than switching to the square compact size. */
/* The sheet leaves about (viewport - 100px) of width inside, so the 300px widget needs scaling below 400px. */
@media (max-width: 399px) { .register .cf-turnstile { transform: scale(0.85); transform-origin: center top; } }
@media (max-width: 354px) { .register .cf-turnstile { transform: scale(0.72); } }
/* An odd stat out (3 stats in 2 columns on phones) sits centered on its own row. */
@media (max-width: 759px) { .stats li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); } }
.masthead span { white-space: nowrap; }
.masthead { flex-wrap: wrap; }
/* minmax(0, 1fr): without it the 300px captcha sets the column width and pushes the field and button off a narrow phone. */
.register form { grid-template-columns: minmax(0, 1fr); display: grid; gap: 12px; max-width: 420px; margin: 18px auto 0; text-align: left; }
.register input[type="email"] { font: inherit; padding: 12px; border: 2px solid var(--ink); background: var(--box); min-height: 44px; width: 100%; }
.honeypot { display: none; }

.site-footer { background: var(--ink); color: var(--paper); text-align: center; padding: 22px var(--gutter); font-size: 0.85rem; margin: 24px 0 0; }
.site-footer p { margin: 6px 0; }
.site-footer a { color: var(--paper); }
.site-footer button[data-consent-open] { background: none; border: 0; padding: 0 0.5rem; color: var(--paper); font: inherit; text-decoration: underline; cursor: pointer; min-height: 44px; }
.site-footer button[data-consent-open]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.nast { font-style: italic; color: var(--gold); }
/* Same color as the footer background: invisible until someone selects the text. */
.whisper { color: var(--ink); }
.fineprint { font-size: 0.6rem; letter-spacing: 0.02em; opacity: 0.8; }

/* 900px so the longest ribbon title (the 404's) fits inside the frame; the form keeps its 640px column. */
.notice { display: grid; grid-template-columns: minmax(0, 1fr); place-content: center; text-align: center; gap: 12px; max-width: 900px; min-height: 70vh; margin: 8vh auto 0; }

@media (min-width: 760px) {
  body { padding: 40px 24px; }
  .hero { grid-template-columns: 1.7fr 1fr; gap: 32px; }
  .kicker { font-size: 0.74rem; letter-spacing: 0.08em; white-space: nowrap; }
  .stats ul { grid-template-columns: repeat(3, 1fr); }
  .reveal { grid-template-columns: 1fr 1fr; }
  .reveal h2 { grid-column: 1 / -1; }
  .beat { grid-template-columns: 150px 1fr; }
  /* Four steps to the top drifts upward left to right, unevenly, so it reads as a slip, not a design.
     Owner 2026-09-24: "too much. make it look inadvertant." Deliberate: do not "fix" it. */
  .loop ol { grid-template-columns: repeat(4, 1fr); }
  .loop li:nth-child(2) { transform: translateY(-5px); }
  .loop li:nth-child(3) { transform: translateY(-8px); }
  .loop li:nth-child(4) { transform: translateY(-17px); }
  .faq-cols { grid-template-columns: 2fr 1fr; }
}

/* Analytics consent bar (#23). Ships hidden; consent.js shows it only when no choice is stored.
   The [hidden] rule matters: display:flex would otherwise override the attribute. */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; justify-content: center; padding: 0.75rem var(--gutter); background: var(--card); color: var(--ink); border-top: 3px solid var(--red); font-size: 0.9rem; line-height: 1.4; }
.consent[hidden] { display: none; }
.consent p { margin: 0; }
.consent div { display: flex; gap: 0.5rem; }
.consent button { font: 700 0.85rem var(--body); min-height: 44px; padding: 0.4rem 1rem; cursor: pointer; border: 1px solid var(--ink); background: var(--card); color: var(--ink); }
.consent button[data-consent="granted"] { background: var(--red); border-color: var(--red); color: #fff; }

.parties > p:first-of-type { text-align: left; }
.edition::before { content: "\2726\00a0\00a0"; } .edition::after { content: "\00a0\00a0\2726"; }


/* Film slot: hidden until the pitch film exists (lorey-claude#2). */
.film[hidden] { display: none; }
.film { padding: 32px 0; text-align: center; }
.film-frame { max-width: 900px; margin: 0 auto; border: 6px solid var(--gold); outline: 2px solid var(--navy); outline-offset: 4px; background: var(--night); aspect-ratio: 16 / 9; }
.film-frame video { width: 100%; height: 100%; display: block; }


/* ===== Engraved ornament: SYW's own Midjourney pieces (owner ran SYW's landing-ornament-prompts,
   picked "5" on 2026-09-25), cut out onto transparent PNGs so only the engraving shows. ===== */
@media (min-width: 760px) {
  /* Engraved frame: four acanthus corners joined by a navy-and-gold double rule down both sides
     and across the top and bottom (owner, 2026-09-25: "a vertical line from the very top to the very
     bottom flerons. horizontally on the header and footer too."). The rules meet the scroll tails. */
  .sheet { padding: 110px 100px 190px;
    background-image: url("/img/orn/corner.png"), url("/img/orn/corner-tr.png"), url("/img/orn/corner-bl.png"), url("/img/orn/corner-br.png"),
      linear-gradient(var(--navy), var(--navy)), linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--navy), var(--navy)), linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--navy), var(--navy)), linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--navy), var(--navy)), linear-gradient(var(--gold), var(--gold)),
      radial-gradient(ellipse at center, rgba(245, 240, 232, 0) 55%, rgba(140, 105, 50, 0.10) 100%), var(--grain), var(--fox);
    background-position: 30px 30px, right 30px top 30px, left 30px bottom 30px, right 30px bottom 30px,
      left 46px top 176px, left 51px top 176px, right 46px top 176px, right 51px top 176px,
      left 164px top 81px, left 164px top 86px, left 164px bottom 81px, left 164px bottom 86px,
      0 0, 0 0, 0 0;
    background-size: 138px 150px, 138px 150px, 138px 150px, 138px 150px,
      2px calc(100% - 352px), 1px calc(100% - 352px), 2px calc(100% - 352px), 1px calc(100% - 352px),
      calc(100% - 328px) 2px, calc(100% - 328px) 1px, calc(100% - 328px) 2px, calc(100% - 328px) 1px,
      100% 100%, 256px 256px, 100% 100%;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat; }
  /* Section headings: ONE level blank ribbon for every heading and language, with the words set live
     in cream Didot capitals (owner, 2026-09-25: "all should look the same", option 1). The ribbon is the
     Four Steps Midjourney ribbon with its lettering painted out (img/orn/ribbon-flat.png, 1400x130). */
  /* The ribbon fits its title (owner, 2026-09-27: "resize the header images based upon the header
     title size"): the folded ends (250px of the 1400px source each side) keep their shape as border-image
     slices, and only the flat middle stretches to the words. Height stays fixed so every ribbon matches. */
  section > h2, .faq-main > h2, h1.page-title { display: grid; place-items: center; width: fit-content; max-width: 100%; justify-self: center;
    height: 3.6em; box-sizing: border-box;
    /* Measured on ribbon-flat.png: the navy band is rows 5 to 96 of 130 (its middle is 39% down),
       the shadow is rows 96 to 106 and the rest is clear. 0.8em of bottom padding on a 3.6em box puts
       the middle of the words at 1.4em, the middle of the band. */
    margin: 0 auto 0.8em; padding: 0 0.6em 0.8em; color: #e9dcc0; white-space: nowrap;
    font: 700 clamp(0.85rem, 1.9vw, 1.3rem) var(--title); text-transform: uppercase; letter-spacing: 0.08em;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 -1px 0 rgba(255, 255, 255, 0.08);
    border-style: solid; border-width: 0 6.9em; border-image: url("/img/orn/ribbon-flat.png") 0 250 fill / 0 6.9em stretch; }
}
/* No section dividers: the heading ribbons mark each section (owner, 2026-09-25: "cut them"). */
/* One drop cap only, on the Nast paragraph (owner, 2026-09-25: the three framed initials "seem excessive"). */
.parties > p:first-of-type::first-letter {
  float: left; font: 700 2.2em/1 var(--title); color: var(--red); margin: 0.02em 0.14em 0 0; padding: 0.46em 0.5em 0.4em;
  background: url("/img/orn/initial.png") center / 100% 100% no-repeat; }

/* Softer boxes (owner, 2026-09-25: "lots of hard corners in the boxes"). The solid navy blocks get
   concave Victorian label corners; cards get a small radius. */
.site-footer, .stats, .hero-art, .beat img, .pair img, .film-frame, .plate-img { --notch: 11px;
  -webkit-mask: radial-gradient(circle at 0 0, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) top left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) top right / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) bottom left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) bottom right / 51% 51% no-repeat;
  mask: radial-gradient(circle at 0 0, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) top left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) top right / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) bottom left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) bottom right / 51% 51% no-repeat; }
.beat, .loop li, .register input[type="email"], .ballot, .button { border-radius: 8px; }

/* Worn printing ink (owner's Harper's reference, 2026-09-25): pale specks and patchy coverage laid over
   the whole sheet with a lighten blend, so they show on the navy, the type and the engravings and vanish
   on the paper. Decorative only. */
.sheet { position: relative; }
.sheet::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: url("/img/ink-wear.png") 0 0 / 512px 512px repeat; mix-blend-mode: lighten; }
.more-decks { margin: 22px 0 0; text-align: center; font: italic 1.15rem var(--title); color: var(--navy); }

@media (max-width: 759px) { .backs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Contact form (#26): labels stacked above full-width fields, inside .notice's 640px column. */
.notice form { display: grid; text-align: left; gap: 4px; width: 100%; max-width: 640px; justify-self: center; }
.notice form label { font-weight: 700; margin-top: 8px; }
.notice form input[type="text"],
.notice form input[type="email"],
.notice form select,
.notice form textarea {
  font: inherit; padding: 12px; border: 2px solid var(--ink); background: var(--card);
  min-height: 44px; width: 100%; border-radius: 8px;
}
.notice form textarea { min-height: 140px; resize: vertical; }
.notice form input:focus, .notice form select:focus, .notice form textarea:focus {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
.notice form button.button { justify-self: start; margin-top: 8px; }

/* Gallery grid (#26). */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 16px; margin: 24px 0; }
.gallery img { display: block; width: 100%; height: auto; }
.gallery figcaption { font: italic 0.9rem var(--body); color: var(--navy); margin-top: 6px; }
/* Box front and back at the box window size, one per row (owner, 2026-09-28). */
.gallery .gallery-box { grid-column: 1 / -1; width: 100%; max-width: 640px; margin: 0 auto; }

/* Footer site links (#26): .site-footer a already sets the color; this adds spacing and the touch target. */
.site-links a { padding: 0 0.3rem; }
@media (pointer: coarse) { .site-links a { display: inline-block; min-height: 44px; line-height: 44px; } }

/* Inner pages (#26): the horizontal wordmark heads the sheet and links home, in place of the full cover. */
.page-mast { display: block; width: min(100%, 520px); margin: 0 auto 20px; }
.page-mast img { display: block; width: 100%; height: auto; }
.page-title { text-align: center; font-size: clamp(1.3rem, 5vw, 1.9rem); letter-spacing: 0.06em; }

/* Hover attention (owner, 2026-09-28): stat circles grow, deck cards lift, and the deliberately
   crooked Journalism card and beat snap straight all at once, then fall crooked again on leave. */
.stats li { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.stats li:hover { transform: scale(1.12); }
.deck { transition: transform 0.2s ease; }
.deck:hover { transform: translateY(-6px) scale(1.05); }
.backs img { transition: box-shadow 0.2s ease; }
.deck:hover img { box-shadow: 0 14px 26px rgba(26, 39, 68, 0.38); }
.backs img[src$="/journalism.jpg"] { transition: transform 0.45s ease 0.1s; }
.deck:hover img[src$="/journalism.jpg"] { transform: rotate(0deg); transition: transform 0.06s cubic-bezier(0.2, 2, 0.4, 1); }
.pair figure { transition: transform 0.25s ease; }
.pair figure:hover { transform: scale(1.04); }
.beat img { transition: transform 0.25s ease; }
.beat:hover img { transform: scale(1.06); }
.beat:nth-of-type(3):hover { transform: rotate(0deg); transition: transform 0.06s cubic-bezier(0.2, 2, 0.4, 1); }
/* FAQ (owner, 2026-09-28): the bullet grows on hover and turns when open; answers grow in and out. */
.faq summary { list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "\25B8"; display: inline-block; width: 1em; color: var(--red); transition: transform 0.2s ease; }
.faq summary:hover::before { transform: scale(1.6); }
.faq details[open] summary::before { transform: rotate(90deg); }
.faq details[open] summary:hover::before { transform: rotate(90deg) scale(1.6); }
:root { interpolate-size: allow-keywords; }
.faq details::details-content { block-size: 0; opacity: 0; scale: 0.96; transform-origin: top left; overflow: clip; transition: block-size 0.3s ease, opacity 0.3s ease, scale 0.3s ease, content-visibility 0.3s allow-discrete; }
.faq details[open]::details-content { block-size: auto; opacity: 1; scale: 1; }
/* The hot seat catches fire on hover: flame layers rise from the bottom and flicker. */
.hot-seat { position: relative; display: block; overflow: hidden; transition: box-shadow 0.4s ease; }
.hot-seat img { display: block; transition: filter 0.4s ease; }
.hot-seat::before, .hot-seat::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform-origin: 50% 100%; transform: scaleY(0); opacity: 0; transition: transform 0.5s ease, opacity 0.5s ease; mix-blend-mode: screen; }
.hot-seat::before { background: radial-gradient(ellipse 18% 85% at 8% 100%, rgba(255, 90, 0, 1), transparent 72%), radial-gradient(ellipse 22% 110% at 28% 100%, rgba(255, 140, 0, 1), transparent 72%), radial-gradient(ellipse 28% 130% at 50% 100%, rgba(255, 210, 50, 1), transparent 72%), radial-gradient(ellipse 22% 105% at 72% 100%, rgba(255, 120, 0, 1), transparent 72%), radial-gradient(ellipse 18% 90% at 92% 100%, rgba(255, 70, 0, 1), transparent 72%); }
.hot-seat::after { background: radial-gradient(ellipse 12% 70% at 18% 100%, rgba(255, 240, 150, 1), transparent 70%), radial-gradient(ellipse 14% 90% at 40% 100%, rgba(255, 230, 120, 1), transparent 70%), radial-gradient(ellipse 14% 85% at 62% 100%, rgba(255, 170, 0, 1), transparent 70%), radial-gradient(ellipse 12% 75% at 84% 100%, rgba(255, 220, 90, 1), transparent 70%), linear-gradient(to top, rgba(255, 70, 0, 0.6), rgba(255, 120, 0, 0.25) 55%, transparent 90%); }
.faq-art:hover .hot-seat img { filter: saturate(1.6) contrast(1.15) sepia(0.35) brightness(1.1); }
.faq-art:hover .hot-seat { box-shadow: 0 0 28px 6px rgba(255, 110, 0, 0.75); }
.faq-art:hover .hot-seat::before { opacity: 1; animation: flicker-a 0.5s ease-in-out infinite alternate; }
.faq-art:hover .hot-seat::after { opacity: 1; animation: flicker-b 0.35s ease-in-out infinite alternate; }
@keyframes flicker-a { 0% { transform: scaleY(0.9) skewX(-3deg); } 50% { transform: scaleY(1.12) skewX(2deg); } 100% { transform: scaleY(0.97) skewX(4deg); } }
@keyframes flicker-b { from { transform: scaleY(1) skewX(3deg); } to { transform: scaleY(0.8) skewX(-3deg); } }

/* Every section header dances twice on hover (owner, 2026-09-28). */
@keyframes launch-dance { 0%, 100% { translate: 0 0; rotate: 0deg; } 20% { translate: 0 -8px; rotate: -4deg; } 40% { translate: 0 0; rotate: 3deg; } 60% { translate: 0 -6px; rotate: -3deg; } 80% { translate: 0 0; rotate: 2deg; } }
section > h2:hover, .faq-main > h2:hover, h1.page-title:hover { animation: launch-dance 0.6s ease-in-out 2; }

/* Four steps: each shakes a little on hover; the last shakes in celebration. Uses the separate
   rotate and scale properties so the staircase translateY on each step is untouched. */
@keyframes step-shake { 0%, 100% { rotate: 0deg; } 20% { rotate: -1.6deg; } 40% { rotate: 1.6deg; } 60% { rotate: -1deg; } 80% { rotate: 1deg; } }
@keyframes step-cheer { 0%, 100% { rotate: 0deg; scale: 1; } 12% { rotate: -5deg; scale: 1.07; } 25% { rotate: 5deg; scale: 1.1; } 38% { rotate: -4deg; scale: 1.1; } 51% { rotate: 4deg; scale: 1.08; } 64% { rotate: -2deg; scale: 1.05; } 80% { rotate: 1deg; scale: 1.02; } }
.loop li:hover { animation: step-shake 0.45s ease-in-out; }
.loop li:last-child:hover { animation: step-cheer 1s ease-in-out; border-top-color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
  .stats li, .deck, .backs img, .pair figure, .beat, .beat img { transition: none; }
  .loop li:hover, .loop li:last-child:hover { animation: none; }
  .faq summary::before, .faq details::details-content { transition: none; }
  .faq-art:hover .hot-seat::before, .faq-art:hover .hot-seat::after { animation: none; }
  section > h2:hover, .faq-main > h2:hover, h1.page-title:hover { animation: none; }
  .stats li:hover, .deck:hover, .pair figure:hover, .beat:hover img { transform: none; }
}

/* What's in the Box: a CSS 3D box at an oblique angle beside the component list (owner, 2026-09-28). */
.inbox { padding: 32px 0; }
.inbox-grid { display: grid; gap: 28px; align-items: center; max-width: 860px; margin: 0 auto; }
@media (min-width: 760px) { .inbox-grid { grid-template-columns: 1fr 1.1fr; } }
.box3d-scene { display: block; --w: clamp(200px, 36vw, 360px); --d: calc(var(--w) * 0.22); width: var(--w); height: var(--w); margin: 20px auto 40px; perspective: 1100px; }
.box3d { display: block; position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(-16deg) rotateY(32deg); transition: transform 0.6s ease; }
.box3d-scene:hover .box3d { transform: rotateX(-22deg) rotateY(48deg); }
.bf, .bf-right-art { display: block; }
.bf { position: absolute; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
.bf-front { inset: 0; background-image: url(/img/box/lid.jpg); transform: translateZ(calc(var(--d) / 2)); }
.bf-top { left: 0; width: var(--w); height: var(--d); top: calc((var(--w) - var(--d)) / 2); background-image: url(/img/box/side-top.jpg); transform: rotateX(90deg) translateZ(calc(var(--w) / 2)); filter: brightness(1.08); }
.bf-right { top: 0; height: var(--w); width: var(--d); left: calc((var(--w) - var(--d)) / 2); overflow: hidden; transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); filter: brightness(0.78); }
.bf-right-art { position: absolute; width: var(--w); height: var(--d); left: calc((var(--d) - var(--w)) / 2); top: calc((var(--w) - var(--d)) / 2); background: url(/img/box/side-right.jpg) center / cover; transform: rotate(90deg); }
.box-links { text-align: center; margin: 18px 0 0; font-size: 0.9rem; }
@media (prefers-reduced-motion: reduce) { .box3d { transition: none; } }
/* Box art window (CSS :target, no script, same pattern as the sneak peek): front, back, angled. */
.box-open { display: block; cursor: zoom-in; }
.inbox .box-list li { font-size: 0.72rem; line-height: 1.45; margin: 4px 0; }
.inbox .box-list strong { font-size: 1.15em; }
.inbox .box-list .box-coda { font-size: 0.8rem; }
.box-modal .modal-box { max-width: min(94vw, 760px); padding: 18px 60px 22px; overflow: hidden; }
.box-tabs { display: flex; justify-content: center; gap: 18px; margin-bottom: 12px; font: 700 0.8rem var(--body); text-transform: uppercase; letter-spacing: 0.12em; }
.box-tabs a { color: var(--navy); text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.box-tabs a[aria-current="true"], .box-tabs a:hover { color: var(--red); border-bottom-color: var(--red); }
.box-slide img { display: block; width: 100%; max-height: 70vh; object-fit: contain; }
.box3d-big { --w: min(52vw, 340px); margin: 50px auto 70px; }
.box-nav { position: absolute; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--red); color: var(--paper); font: 700 1.9rem/1 var(--title); text-decoration: none; }
.box-nav:hover, .box-nav:focus { background: var(--navy); }
.box-prev { left: 9px; }
.box-next { right: 9px; }
.box-close { display: inline-block; margin-top: 10px; font-size: 0.85rem; }