/* Parlance design tokens. Generated from tokens.json by brand/src/build_kit.py. Do not edit by hand. */
:root {
  --p-c-ink: #16181d;
  --p-c-ink-2: #3f4249;
  --p-c-graphite: #5d6068;
  --p-c-stone: #8b8d92;
  --p-c-hairline: #d9d9d4;
  --p-c-bone: #eeebe3;
  --p-c-paper: #f7f5ef;
  --p-c-white: #ffffff;
  --p-c-period: #c63d24;
  --p-c-ember: #e2583e;
  --p-c-night: #0f1114;
  --p-c-fog: #a7a9ad;
  --p-c-link: #1f5fbf;
  --p-font-display: "Anton", Impact, "Arial Narrow", sans-serif;
  --p-font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --p-font-serif: "Libre Caslon Text", Georgia, serif;
  --p-tex-grain: .13;
  --p-tex-screen-cell: 5px;
  --p-tex-sticker-edge: 5px;
  --p-tex-tilt: -2deg;
  --p-size-label: 15px;
  --p-size-body: 19px;
  --p-size-lead: 28px;
  --p-size-h3: 44px;
  --p-size-h2: 96px;
  --p-size-giant: fit;
  --p-space-1: 4px;
  --p-space-2: 8px;
  --p-space-3: 12px;
  --p-space-4: 16px;
  --p-space-5: 24px;
  --p-space-6: 32px;
  --p-space-7: 48px;
  --p-space-8: 64px;
  --p-space-9: 96px;
  --p-space-10: 128px;
  --p-radius-none: 0;
  --p-motion-ease: cubic-bezier(.2,.7,.1,1);
  --p-motion-slap: 420ms;
  --p-motion-rise: 560ms;
  --p-measure-read: 38rem;
}

/* Riot web fonts for files inside brand/ (the brand book and the profile templates). The website writes its own. */
@font-face { font-family: "Anton"; src: url("fonts/anton.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "DM Sans"; src: url("fonts/dm-sans-var.woff2") format("woff2"); font-weight: 100 1000; font-style: normal; font-display: block; }
@font-face { font-family: "DM Sans"; src: url("fonts/dm-sans-italic-var.woff2") format("woff2"); font-weight: 100 1000; font-style: italic; font-display: block; }
/* Anton's arrows, re-centred on the caps (brand/src/build_arrow_font.py). Put "Parlance Arrows" before "Anton" in a stack and
   every arrow (U+2190 to U+2193) and the × sit dead-center on the capitals; nothing else changes. */
@font-face { font-family: "Parlance Arrows"; src: url("fonts/parlance-arrows.woff2") format("woff2"); font-weight: 400; unicode-range: U+00D7, U+2190-2193; font-display: block; }

/* ==========================================================================================================
   Riot for the web. The Parlance design language (social/design/RIOT.md), as CSS components.
   One source for the website and the brand book. Load order: tokens.css, a fonts file (brand/web/fonts.css here,
   generated by site/build.py on the website), then this file.

   The rules, in one breath: condensed caps (Anton) for anything that shouts, DM Sans for anything you read.
   Three grounds only: cream, red, ink. Photos are fine-screen cutouts with a cream sticker edge. Labels are
   flat slabs of color, sometimes tilted. Big words sit behind people. No dead space, no soft shadows, no
   rounded cards, no gradients.
   ========================================================================================================== */

:root {
  --ink: var(--p-c-ink); --ink-2: var(--p-c-ink-2); --cream: var(--p-c-paper); --red: var(--p-c-period);
  --gray: var(--p-c-stone); --graphite: var(--p-c-graphite); --hair: var(--p-c-hairline);
  --anton: var(--p-font-display); --sans: var(--p-font-sans);
  --tilt: -2deg; --edge: 5px;
  color-scheme: light;
}

/* ---------- Texture ---------- */
/* Grain: the whole page sits under a light paper noise, like the posts. */
.grain::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .13; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* Fine-screen for photos we don't pre-treat (a video thumbnail, an issue's lead photo): black and white,
   a little contrast, and a fine light dot screen on top. Pre-treated cutouts (brand/imagery) don't need it. */
.screen { position: relative; overflow: hidden; background: var(--ink); isolation: isolate; }
.screen img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.12) brightness(1.04); }
.screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .42;
  background: radial-gradient(circle at center, var(--ink) 34%, transparent 36%) 0 0 / 5px 5px;
}
/* A cutout photo (already fine-screened, with its cream edge baked in). */
.cut { display: block; max-width: none; height: auto; pointer-events: none; user-select: none; }

/* ---------- Type ---------- */
.an { font-family: var(--anton); font-weight: 400; text-transform: uppercase; line-height: .88; letter-spacing: -.002em; }
.outline { color: transparent !important; -webkit-text-stroke: 2px var(--red); }
.outline.cream { -webkit-text-stroke-color: var(--cream); }
.r { color: var(--red); }

/* ---------- Labels ---------- */
/* Paper label: a flat slab behind a line of condensed caps (the Liberty cover headline). */
.lab { display: inline-block; font-family: var(--anton); text-transform: uppercase; line-height: 1; white-space: nowrap;
  padding: .14em .28em .08em; background: var(--cream); color: var(--ink); }
.lab.red { background: var(--red); color: var(--cream); }
.lab.ink { background: var(--ink); color: var(--cream); }
.labs { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
/* Sticker: a tilted red label with a cream die-cut edge ("STARTS NOV. 2"). */
.stk { display: inline-block; font-family: var(--anton); text-transform: uppercase; line-height: 1; white-space: nowrap;
  padding: .32em .5em .22em; background: var(--red); color: var(--cream); box-shadow: 0 0 0 var(--edge) var(--cream);
  transform: rotate(var(--tilt)); }
.stk.ink { background: var(--ink); }
.stk.cream { background: var(--cream); color: var(--ink); box-shadow: 0 0 0 var(--edge) var(--ink); }
/* Tag: a small cream label with a name over a line of DM Sans ("JONQUEL JONES · 21"). */
.tag { display: inline-block; font-family: var(--anton); text-transform: uppercase; background: var(--cream); color: var(--ink);
  padding: .42em .6em .3em; line-height: 1; }
.tag small { display: block; font-family: var(--sans); font-weight: 700; font-size: .42em; letter-spacing: .12em; margin-top: .35em; }
/* Tracker: the 01 02 03 boxes on the core slides. */
.track { display: flex; gap: 8px; font-family: var(--anton); font-size: 15px; line-height: 1; }
.track span { padding: 5px 8px 3px; border: 2px solid currentColor; opacity: .38; }
.track span.on { opacity: 1; background: var(--red); border-color: var(--red); color: var(--cream); }
.slab.red .track span.on { background: var(--cream); border-color: var(--cream); color: var(--red); }
/* Round badge: the quote mark on the seam, the "25% BODY WEIGHT" seal. */
.badge { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--ink); color: var(--cream);
  font-family: var(--anton); line-height: .9; text-align: center; box-shadow: 0 0 0 var(--edge) var(--cream); }

/* ---------- Grounds ---------- */
.slab { background: var(--cream); color: var(--ink); }
.slab.red { background: var(--red); color: var(--cream); }
.slab.ink { background: var(--ink); color: var(--cream); }

/* ---------- Type wall: a word repeated, solid and outlined, behind the subject ---------- */
.wall { position: absolute; inset: -4% -6%; display: flex; flex-direction: column; justify-content: center; overflow: hidden;
  font-family: var(--anton); text-transform: uppercase; line-height: .84; color: var(--red); white-space: nowrap; pointer-events: none;
  user-select: none; z-index: 0; }
.wall > div { display: flex; gap: .18em; }
.wall > div:nth-child(even) { transform: translateX(-.9em); }
.wall > div > span:nth-child(3n+2) { color: transparent; -webkit-text-stroke: 2px var(--red); }
.wall.dim { opacity: .9; }

/* ---------- Motion ---------- */
@keyframes slap { from { transform: rotate(var(--tilt)) scale(1.35); opacity: 0; } 60% { transform: rotate(var(--tilt)) scale(.96); opacity: 1; } to { transform: rotate(var(--tilt)) scale(1); } }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Parlance website layout. Built on brand/tokens/tokens.css + brand/web/riot.css (both prepended at build time).
   Layout: the rail (wordmark + every issue) on the left, the stage on the right. The stage is a run of Riot slabs:
   a type-wall cover with the sign-up on the front page; cover, story slabs and a quote slab on issue pages. */

:root { --rail: clamp(300px, 25vw, 380px); --pad: clamp(18px, 4.2vw, 64px);
  --anton: "Parlance Arrows", var(--p-font-display); }  /* every arrow set in Anton sits dead-center on the caps (Eric, 2026-10-05; brand/web/fonts.css) */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }  /* light type on black renders heavy without it (Eric, 2026-10-06) */
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); font-size: 19px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--red); color: var(--cream); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.p { color: var(--red); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -80px; z-index: 100; background: var(--red); color: var(--cream); padding: 10px 14px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 8px; }

/* Blocks with a type wall spilling past their edges clip it, so they can never scroll internally. */
.cta, .cover-home, .issue-cover { overflow: clip; }

/* ---------- Frame: rail left, stage right ---------- */
.frame { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); grid-template-areas: "rail stage"; }
.stage { grid-area: stage; min-width: 0; position: relative; }
.rail { grid-area: rail; position: sticky; top: 0; align-self: start; height: 100vh; height: 100svh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--cream); border-right: 3px solid var(--ink); padding: 26px 22px 40px; scrollbar-width: thin; scrollbar-color: var(--ink) transparent; z-index: 5; }
.brand { display: inline-block; line-height: 0; }
.rail .wordmark { height: 40px; width: auto; }
.brand:hover .wordmark path:last-of-type { animation: blink 900ms var(--p-motion-ease) 1; }
@keyframes blink { 40% { opacity: 0; } }
.rail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 26px 0 14px; padding-bottom: 14px; border-bottom: 3px solid var(--ink); }
.rail-head .stk { font-size: 17px; --edge: 4px; }
.rail-head .count { font-size: 15px; color: var(--graphite); }
.index ol { list-style: none; margin: 0; padding: 0; }
.index li a { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 12px; align-items: center; padding: 7px 0; text-decoration: none; }
.index time { font-family: var(--anton); font-size: 15px; line-height: 1; padding: 5px 7px 3px; border: 2px solid var(--ink); text-align: center; font-variant-numeric: tabular-nums;
  transition: background 140ms, color 140ms, border-color 140ms; }
.index .t { justify-self: start; font-family: var(--anton); text-transform: uppercase; font-size: 21px; line-height: 1; padding: 4px 6px 2px; margin-left: -6px;
  transition: background 140ms, color 140ms, transform 220ms var(--p-motion-ease); }
.index li a:hover .t, .index li a:focus-visible .t { background: var(--red); color: var(--cream); transform: rotate(-1.5deg); }
.index li a:hover time, .index li a:focus-visible time { background: var(--ink); color: var(--cream); }
.index li a[aria-current="page"] .t { background: var(--ink); color: var(--cream); transform: rotate(-1.5deg); box-shadow: 0 0 0 3px var(--cream); }
.index li a[aria-current="page"] time { background: var(--red); border-color: var(--red); color: var(--cream); }
.mbar { display: none; }

/* ---------- Front page: type-wall cover with the sign-up ---------- */
.cover-home { min-height: 100vh; min-height: 100svh; overflow: clip; container-type: inline-size; display: flex; flex-direction: column;
  justify-content: space-between; gap: 28px; padding: clamp(28px, 4.5cqw, 64px) clamp(20px, 5cqw, 72px) clamp(28px, 4cqw, 56px); }
.cover-home .cut.readers { position: absolute; right: -7%; bottom: -12%; width: min(64%, 1000px); z-index: 2; animation: rise 700ms var(--p-motion-ease) both; }
.hero-labs { position: relative; z-index: 3; font-size: clamp(40px, 6.6cqw, 104px); animation: rise 560ms var(--p-motion-ease) both; }
.countdown-stk { position: absolute; z-index: 4; right: 4cqw; top: clamp(28px, 5cqw, 72px); margin: 0; font-size: clamp(16px, 1.6cqw, 23px); --tilt: 2deg;
  display: inline-flex; align-items: center; gap: 10px; animation: slap 420ms var(--p-motion-ease) 300ms both; }
.live { width: 10px; height: 10px; border-radius: 50%; background: var(--cream); animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .2; } }
.countdown { font-variant-numeric: tabular-nums; }
.card { position: relative; z-index: 5; width: min(100%, 600px, 52cqw); padding: clamp(22px, 2.4cqw, 34px); animation: rise 560ms var(--p-motion-ease) 120ms both; }
.card h1, .card h2 { margin: 0; font-weight: 400; font-size: clamp(38px, 4cqw, 66px); line-height: .9; }
.card .deck { margin: 16px 0 0; font-weight: 600; font-size: 18px; line-height: 1.4; color: var(--ink-2); }
.latest { position: relative; z-index: 5; align-self: flex-start; display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; padding: 12px 16px 10px;
  background: var(--cream); color: var(--ink); text-decoration: none; transition: background 140ms, color 140ms, transform 220ms var(--p-motion-ease); }
.latest .an:first-child { color: var(--red); font-size: 18px; }
.latest .l-t { font-size: 26px; }
.latest .l-m { font-size: 14px; font-weight: 600; }
.latest .l-go { font-weight: 800; }
.latest:hover { background: var(--red); color: var(--cream); transform: rotate(-1deg); }
.latest:hover .an:first-child { color: var(--cream); }
.photo-cred { position: absolute; z-index: 6; right: 12px; bottom: 10px; margin: 0; font-size: 12px; font-weight: 600; background: var(--cream); color: var(--ink); padding: 3px 8px; }
.latest-btn { display: inline-block; margin-top: 22px; background: var(--red); color: var(--cream); text-decoration: none; font-size: 24px; padding: 12px 18px 9px; }
.latest-btn:hover { background: var(--ink); }

/* ---------- Sign-up ---------- */
.signup { margin-top: 22px; }
.field { display: flex; border: 3px solid var(--ink); background: #fff; }
.field:focus-within { border-color: var(--red); }
.signup input, .signup .soon-in { flex: 1; min-width: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); outline: none; -webkit-appearance: none; appearance: none;
  font-family: var(--sans); font-weight: 600; font-size: 20px; padding: 14px 16px; }
.signup input::placeholder { color: var(--gray); opacity: 1; }
.signup button[type="submit"], .signup .soon-btn { flex: none; border: 0; border-radius: 0; cursor: pointer; background: var(--red); color: var(--cream); font-size: 24px; padding: 8px 20px 4px; transition: background 140ms; }
.signup button[type="submit"]:hover { background: var(--ink); }
.b-arrow { display: inline-block; transition: transform 220ms var(--p-motion-ease); }
.signup button[type="submit"]:hover .b-arrow { transform: translateX(4px); }
.signup.is-busy button[type="submit"] { pointer-events: none; }
.signup.is-busy .b-label::after { content: "\2026"; }
/* The sign-up while it is closed (site.json newsletter.signup_open false): one quiet block in the field's footprint. */
.signup .field .soon-in { line-height: normal; flex: none; width: 0; padding-left: 0; padding-right: 0; overflow: hidden; visibility: hidden; white-space: pre; }
.signup .soon-btn { flex: 1; display: flex; align-items: center; justify-content: center; background: transparent; color: var(--ink); cursor: default; user-select: none; }
.field.soon { outline: none; }
.field.soon:focus-visible { border-color: var(--red); }
.fine { margin: 10px 0 0; font-size: 14px; font-weight: 600; color: var(--graphite); min-height: 20px; }
.err { color: var(--red); font-weight: 800; }
.err:empty { display: none; }
.err:not(:empty) + .ok-fine { display: none; }
.signup.is-error .field { border-color: var(--red); animation: shake 360ms var(--p-motion-ease); }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.done { display: none; outline: none; }
.signup.is-done .field, .signup.is-done .fine { display: none; }
.signup.is-done .done { display: block; }
.done-h { margin: 0; font-size: clamp(64px, 7cqw, 110px); line-height: .85; animation: rise 420ms var(--p-motion-ease) both; }
.done-stk { margin-top: 14px; font-size: 22px; animation: slap 420ms var(--p-motion-ease) 220ms both; }
.done-b { margin: 18px 0 0; font-size: 17px; font-weight: 600; color: var(--ink-2); }
.done-b b { color: var(--ink); overflow-wrap: anywhere; }
.reset { margin-top: 12px; padding: 0; border: 0; background: none; cursor: pointer; font-weight: 700; font-size: 15px; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; }
/* Once subscribed, the deck steps aside so the confirmation has room. */
.card:has(.signup.is-done) .deck { display: none; }

/* ---------- Issue cover ---------- */
.progress { position: fixed; inset: 0 0 auto; height: 5px; z-index: 95; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--red); transform-origin: 0 50%; transform: scaleX(0); }
.issue-cover { position: relative; overflow: clip; container-type: inline-size; min-height: min(94svh, 940px); padding: clamp(24px, 4cqw, 56px) clamp(20px, 4cqw, 56px); }
.cover-labs { position: relative; z-index: 3; font-size: clamp(22px, 2.8cqw, 40px); }
.giant { position: relative; z-index: 1; margin: clamp(16px, 2cqw, 28px) 0 0; font-weight: 400; display: flex; flex-direction: column; align-items: flex-start; line-height: .84; }
.giant .fit { display: block; white-space: nowrap; font-size: 16cqw; }
.cover-photo .cut { position: absolute; z-index: 2; animation: rise 700ms var(--p-motion-ease) both; }
.cover-newsboy .cut { right: -1px; bottom: -1px; width: min(58cqw, 760px); }
.cover-readers .cut { right: -12%; bottom: -22%; width: min(98cqw, 1000px); }
.cover-stk { position: absolute; z-index: 4; left: clamp(20px, 4cqw, 56px); bottom: clamp(36px, 7cqw, 90px); font-size: clamp(17px, 1.9cqw, 26px); animation: slap 420ms var(--p-motion-ease) 260ms both; }
.cover-wall { display: flex; flex-direction: column; }
.cover-wall .wall { font-size: 15cqw; }
.cover-wall .giant { margin-top: auto; margin-bottom: clamp(70px, 10cqw, 140px); gap: 0; }
.cover-wall .giant .fit { background: var(--cream); color: var(--ink); padding: .08em .18em .02em; }
.cover-wall .giant .fit:nth-child(even) { background: var(--red); color: var(--cream); }
.dek-row { padding: clamp(24px, 3.4vw, 44px) var(--pad); border-bottom: 3px solid var(--ink); display: grid; gap: 18px; }
.dek { margin: 0; font-weight: 700; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.18; letter-spacing: -.012em; max-width: 30ch; }
.byline { margin: 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 15px; font-weight: 700; color: var(--graphite); }
.share { border: 2px solid var(--ink); background: transparent; cursor: pointer; font-size: 16px; padding: 6px 10px 3px; color: var(--ink); transition: background 140ms, color 140ms; }
.share:hover { background: var(--ink); color: var(--cream); }

/* ---------- Issue body ---------- */
.prose { container-type: inline-size; padding: 0 var(--pad) 20px; }
.prose > p, .part > p { max-width: 40rem; margin: 0 0 1em; font-weight: 500; }
.prose > p.lead { font-size: clamp(24px, 2.4vw, 30px); font-weight: 700; line-height: 1.22; letter-spacing: -.012em; max-width: 30ch; margin-top: 40px; }
.prose strong { font-weight: 800; }
.prose a { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose a:hover { color: var(--red); }
.part { margin-top: clamp(60px, 8cqw, 110px); }
.part-h { margin: 0 0 clamp(18px, 2.4cqw, 30px); font-weight: 400; color: var(--red); font-size: clamp(60px, 10cqw, 150px); line-height: .9; border-top: 3px solid var(--ink); padding-top: 18px; }
.story { margin: 0 0 clamp(48px, 6cqw, 80px); }
.story .cat { font-size: 18px; --edge: 4px; }
.story h3 { margin: 18px 0 18px; font-weight: 400; font-size: clamp(40px, 5.2cqw, 68px); line-height: .9; max-width: 22ch; }
.story > p { max-width: 40rem; margin: 0 0 1em; }
.post-link { display: inline-grid; grid-template-columns: 38px auto auto; grid-template-areas: "icon who arrow" "icon where arrow"; align-items: center; column-gap: 12px;
  margin: 0 0 18px; padding: 10px 16px 9px 10px; background: var(--ink); color: var(--cream) !important; text-decoration: none !important; max-width: 100%;
  transition: background 140ms, transform 220ms var(--p-motion-ease); }
.post-link:hover { background: var(--red); transform: rotate(-1deg); }
.pl-icon { grid-area: icon; width: 38px; height: 38px; display: grid; place-items: center; background: var(--red); border-radius: 50%; }
.post-link:hover .pl-icon { background: var(--ink); }
.pl-icon svg { width: 16px; height: 16px; fill: var(--cream); }
.pl-who { grid-area: who; font-family: var(--anton); font-size: 22px; line-height: 1; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-where { grid-area: where; font-size: 13px; font-weight: 600; opacity: .8; }
.pl-arrow { grid-area: arrow; font-size: 20px; padding-left: 6px; }
.core { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 6px; border: 3px solid var(--ink); }
.core-slab { padding: clamp(20px, 2.2cqw, 30px); display: flex; flex-direction: column; gap: 14px; min-height: 280px; }
.core-slab h4 { margin: 0; font-weight: 400; font-size: clamp(34px, 3.4cqw, 46px); line-height: .88; }
.core-slab.cream h4, .core-slab.ink h4 { color: var(--red); }
.core-slab p { margin: 0; font-weight: 700; font-size: 18px; line-height: 1.38; }
.core-slab.red a, .core-slab.ink a { text-decoration-color: var(--cream); }
.core-slab.red a:hover, .core-slab.ink a:hover { color: var(--cream); opacity: .85; }
/* ---------- Story media: the article's picture beside the real post ---------- */
.story-media { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: start; margin: 0 0 22px; }
.story-media.solo { grid-template-columns: minmax(0, 560px); }
.story-media > .story-pic:only-child { grid-column: 1 / -1; }
.story-pic { margin: 0; }
/* News photos: shown as they are, in full color, in an ink frame. No screen, no dots, no grey. */
.photo { position: relative; overflow: hidden; background: var(--ink); }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--p-motion-ease); }
.story-pic .photo { border: 3px solid var(--ink); aspect-ratio: 3 / 2; }
.story-pic:hover .photo img { transform: scale(1.02); }
.story-pic figcaption { margin-top: 6px; font-size: 12.5px; font-weight: 700; }
.story-pic figcaption a { color: var(--graphite); text-decoration: none; }
.story-pic figcaption a:hover { color: var(--red); }

/* ---------- Post card: a real post, pinned on like a sticker ---------- */
/* The platforms' own embeds (Eric, 2026-10-10): our card holds the spot; the frame waits beside it at the card's width
   and takes its place when it reports a height (assets/embeds.js); if nothing answers the card stays. */
.emb { position: relative; max-width: 540px; margin: 0 auto; }
.emb-card { position: relative; }
.emb-off.emb-wait { position: absolute; left: 0; top: 0; width: 100%; height: 0; overflow: hidden; opacity: 0; pointer-events: none; }
.emb-off.emb-wait .emb-frame { height: 640px; }
.emb.is-live .emb-card { display: none; }
.emb.is-live .emb-off { animation: emb-in .3s ease-out; }
.emb.is-card .emb-off { display: none; }
.emb-frame { display: block; width: 100%; min-height: 120px; border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); background: #fff; color-scheme: light; }
.sr-item .emb { margin: 0; }
.emb[data-emb=tiktok] { max-width: 400px; }
.emb.is-live[data-emb=tiktok] .emb-frame { aspect-ratio: 9 / 16; height: auto; background: #000; }
@keyframes emb-in { from { opacity: 0; } to { opacity: 1; } }
.pc { background: #fff; color: var(--ink); border: 3px solid var(--ink); padding: 16px 18px 12px; box-shadow: 8px 8px 0 var(--ink);
  transform: rotate(var(--pc-tilt, 0deg)); transition: transform 260ms var(--p-motion-ease), box-shadow 260ms var(--p-motion-ease); }
.pc:hover { transform: rotate(0deg) translate(-2px, -2px); box-shadow: 10px 10px 0 var(--red); }
.prose .pc-head, .pc-head { text-decoration: none; }
.pc-head { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; text-decoration: none; color: inherit; }
.pc-av { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--hair); box-shadow: 0 0 0 3px var(--cream), 0 0 0 5px var(--ink); }
.pc-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pc-who b { font-weight: 800; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-who span { font-size: 14px; color: var(--graphite); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-net { width: 30px; height: 30px; display: grid; place-items: center; background: var(--ink); border-radius: 50%; }
.pc-net svg { width: 14px; height: 14px; fill: var(--cream); }
.pc-bluesky .pc-net { background: #1185fe; }
.prose .pc-text.clamp { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.pc-more { margin-top: 6px; border: 0; background: none; padding: 0; font-family: var(--anton); text-transform: uppercase; font-size: 15px; color: var(--red); cursor: pointer; }
.pc-more:hover { color: var(--ink); }
.prose .pc-text { margin: 12px 0 0; font-size: 16.5px; line-height: 1.45; font-weight: 500; overflow-wrap: anywhere; max-width: none; }
.prose .pc-text a { color: #1d6fd8; text-decoration: none; }
.prose .pc-text a:hover { text-decoration: underline; color: #1d6fd8; }
.pc-at { color: #1d6fd8; }
.pc-photo { display: block; position: relative; margin-top: 12px; border: 2px solid var(--ink); overflow: hidden; }
.pc-photo img { width: 100%; height: auto; max-height: 560px; object-fit: contain; background: var(--ink); }
.pc-len { position: absolute; left: 10px; bottom: 10px; background: var(--ink); color: var(--cream); font-family: var(--anton); font-size: 15px; padding: 4px 8px 2px; }
/* a YouTube Short beside the X cards (Eric, 2026-10-09): the same card, its 9:16 frame with a play button, the label */
.pc-short .pc-lbl { font-family: var(--anton); text-transform: uppercase; letter-spacing: .04em; color: var(--red); font-size: 14px; }
.pc-net-yt { background: #ff0033; }
/* the small "Language" note (Eric, 2026-10-10: the clip cusses; never our words): a small ink-bordered label under the name, beside a Short's label, on the video caption, in the plain link */
/* The EXPLICIT LANGUAGE stamp (Eric, 2026-10-10 12:50pm): our own small bordered stamp; on a card's picture top corner,
   inline beside the name when the card has none, above the post on an embed (assets/embeds.js wrapper). */
.pc-stamp, .pc-who .pc-stamp, .pl-who .pc-stamp { display: inline-block; align-self: flex-start; margin-top: 5px; font-family: var(--anton); font-size: 12px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); border: 2px solid var(--ink); border-radius: 3px; padding: 4px 7px 3px; white-space: nowrap; overflow: visible; transform: rotate(-2deg); }
.pc-photo .pc-stamp { position: absolute; top: 10px; right: 10px; z-index: 2; margin: 0; color: #fff; border-color: #fff; background: rgba(0, 0, 0, .72); transform: rotate(-3deg); box-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
.pl-who .pc-stamp { margin: 0 0 0 10px; vertical-align: middle; color: inherit; border-color: currentColor; }
.video-cap .pc-stamp { margin: 0 0 0 10px; vertical-align: bottom; }
.emb-stamp { margin: 0 0 8px; }
.emb-stamp .pc-stamp { position: static; display: inline-block; margin: 0; }
.emb .post-link .pc-stamp, .emb .pc .pc-stamp { display: none; }
.pc-av-yt { display: block; background: #ff0033; }
.pc-photo.pc-tall { max-width: 250px; margin: 12px auto 0; }
.pc-photo.pc-tall img { aspect-ratio: 9 / 16; object-fit: cover; max-height: none; }
.pc-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px var(--cream); }
.pc-play::after { content: ""; position: absolute; left: 25px; top: 19px; border-left: 20px solid var(--cream); border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
.pc-shorts { position: absolute; left: 10px; top: 10px; background: var(--ink); color: var(--cream); font-family: var(--anton); text-transform: uppercase; font-size: 14px; letter-spacing: .04em; padding: 4px 8px 2px; }
.prose .pc-title { font-weight: 800; }
.prose .pc-credit { margin: 6px 0 0; font-size: 12px; font-weight: 600; color: var(--graphite); max-width: none; }
.video-frame.video-noframe { aspect-ratio: 16 / 9; }
.pc-quote { margin-top: 12px; border: 2px solid var(--hair); padding: 10px 12px; font-size: 14px; }
.pc-quote span { color: var(--graphite); }
.prose .pc-quote p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.4; }
.prose .pc-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin: 12px 0 0; padding-top: 10px; border-top: 2px solid var(--ink); font-size: 13px; font-weight: 700; color: var(--graphite); max-width: none; }
.prose .pc-meta .pc-open { margin-left: auto; color: var(--ink); text-decoration: none; font-family: var(--anton); text-transform: uppercase; font-weight: 400; font-size: 15px; }
.prose .pc-meta .pc-open:hover { color: var(--red); }

.lead-photo { margin: 0 0 30px; }
.lead-photo .photo { aspect-ratio: 1200 / 630; border: 3px solid var(--ink); }
.lead-photo figcaption { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--graphite); }
.lead-photo.is-missing { display: none; }
.scorecard { display: grid; gap: 10px; padding: clamp(24px, 3cqw, 44px); margin: 0 0 10px; }
.sc-label { font-size: 22px; }
.sc-num { font-size: clamp(120px, 22cqw, 300px); line-height: .82; }
.sc-line { font-weight: 700; font-size: clamp(19px, 1.9cqw, 24px); line-height: 1.3; max-width: 32ch; }
.sc-src { font-size: 13px; font-weight: 600; opacity: .85; }
.video { margin: 10px 0 34px; position: relative; max-width: 760px; }
.video-frame { display: block; position: relative; background: var(--ink); padding: 12px; transform: rotate(-1.5deg); transition: transform 220ms var(--p-motion-ease); }
.video-frame:hover { transform: rotate(0deg); }
.video-frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.video-frame.is-missing img { visibility: hidden; }
.play { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px var(--cream); }
.play::after { content: ""; position: absolute; left: 36px; top: 28px; border-left: 28px solid var(--cream); border-top: 18px solid transparent; border-bottom: 18px solid transparent; }
.video-stk { position: absolute; left: -8px; bottom: -14px; font-size: 20px; }
.video-cap { position: relative; }
.video-cap { margin-top: 26px; }
.video-cap .video-stk { position: static; display: inline-block; }
.video-title { display: block; margin-top: 16px; font-size: clamp(30px, 3.4cqw, 46px); line-height: .92; max-width: 22ch; }
.video-frame img { filter: saturate(1.05); }
.part-check-this-out > p { display: inline; font-family: var(--anton); text-transform: uppercase; font-size: clamp(22px, 2.3cqw, 30px); line-height: 1.32; background: var(--ink); color: var(--cream);
  padding: .1em .3em; -webkit-box-decoration-break: clone; box-decoration-break: clone; font-weight: 400; }
.part-social-round-up { columns: 2; column-gap: 26px; }
.part-social-round-up .sr-item { break-inside: avoid; margin-bottom: 30px; padding: 6px 10px 0 0; }
.part-social-round-up .part-h { column-span: all; }
.sr-item { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.sr-item .cat { font-size: 16px; --edge: 4px; }
.sr-item:nth-of-type(even) .cat { --tilt: 2deg; background: var(--ink); }
.sr-item .post-link { margin: 0; }
.sr-item .pc { width: 100%; }
.sr-item .stk.cat { position: relative; z-index: 2; margin-bottom: -6px; margin-left: 10px; }
.quote-slab { margin: 0 0 36px; display: grid; grid-template-columns: minmax(0, 1fr); border: 3px solid var(--ink); }
.quote-slab.has-photo { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.qs-photo { margin: 0; background: var(--cream); border-right: 3px solid var(--ink); }
.qs-photo img { width: 100%; height: 100%; object-fit: cover; }
.qs-red { position: relative; margin: 0; padding: clamp(28px, 3.4cqw, 52px); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.qs-red p { margin: 0; font-size: clamp(34px, 4.4cqw, 66px); line-height: .92; }
.qs-red cite { font-style: normal; font-weight: 700; font-size: 15px; }
.qs-red cite em { font-style: italic; }
.qs-red .badge { position: absolute; left: -45px; top: 34px; font-size: 64px; padding-top: 22px; }
.quote-slab:not(.has-photo) .qs-red .badge { left: auto; right: 24px; top: -30px; }
.signoff { margin: 30px 0 0; padding: clamp(28px, 4cqw, 52px); display: flex; flex-direction: column; gap: 6px; font-size: clamp(44px, 6cqw, 84px); line-height: .9; }
.signoff span:last-child { color: var(--red); }
.signoff em { font-style: normal; }

/* ---------- Issue CTA, pager ---------- */
.cta { position: relative; overflow: clip; container-type: inline-size; min-height: 600px; margin-top: 30px; padding: clamp(28px, 4cqw, 56px) var(--pad); display: flex; align-items: flex-start; }
.cta .wall, .lost .wall { font-size: 15cqw; }
.cta.cta-slim { min-height: 0; padding-block: clamp(20px, 3cqw, 36px); } /* the issue page: just the card (Eric, 2026-10-26) */
.cta .cut { position: absolute; z-index: 2; right: 0; bottom: 0; width: min(44cqw, 560px); }
.pager { display: grid; grid-template-columns: 1fr 1fr; border-top: 3px solid var(--ink); }
.pager a { display: flex; flex-direction: column; gap: 10px; padding: clamp(24px, 3vw, 40px) var(--pad); text-decoration: none; min-height: 190px; justify-content: space-between; }
.pager .older { border-right: 3px solid var(--ink); }
.pager .newer { text-align: right; align-items: flex-end; }
.pg-k { font-size: 18px; }
.pg-t { font-size: clamp(36px, 4vw, 60px); line-height: .9; }
.pager a:hover .pg-t { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 6px; }

/* ---------- Footer: logo, line, socials, © (opens the colophon) ---------- */
.foot { background: var(--ink); color: var(--cream); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px; padding: 24px var(--pad); position: relative; z-index: 6; }
.foot-logo { display: block; line-height: 0; }
.foot-logo img { height: 52px; width: auto; }
.foot-line { margin: 0; font-size: 22px; color: var(--cream); }
.social { display: flex; gap: 6px; }
.foot .social { justify-self: end; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid rgba(247,245,239,.3); transition: background 140ms, border-color 140ms, transform 220ms var(--p-motion-ease); }
.social a:hover { background: var(--red); border-color: var(--red); transform: rotate(-4deg); }
.social svg { width: 18px; height: 18px; fill: var(--cream); }
.copy { font-size: 15px; white-space: nowrap; background: none; border: 0; color: var(--cream); cursor: pointer; padding: 6px 0; border-bottom: 2px dotted rgba(247,245,239,.35); }
.copy:hover { color: var(--red); border-bottom-color: var(--red); }

/* ---------- Colophon (opened from the ©) ---------- */
.colophon { border: 0; padding: 0; background: transparent; max-width: min(640px, calc(100vw - 32px)); width: 100%; }
.colophon::backdrop { background: rgba(22,24,29,.72); }
.colophon[open] { animation: rise 420ms var(--p-motion-ease) both; }
.col-in { padding: 32px; box-shadow: 0 0 0 6px var(--cream), 0 0 0 9px var(--red); max-height: 82vh; overflow: auto; }
.col-k { margin: 0; color: var(--red); font-size: 18px; }
.colophon h2 { margin: 4px 0 12px; font-weight: 400; font-size: 56px; line-height: .9; }
.colophon h3 { margin: 22px 0 8px; font-weight: 400; font-size: 22px; }
.colophon p, .colophon li { font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--ink-2); }
.colophon ul { margin: 0; padding-left: 18px; }
.colophon kbd { font-family: var(--anton); font-size: 14px; background: var(--ink); color: var(--cream); padding: 2px 6px 0; }
.col-x { margin-top: 22px; background: var(--red); color: var(--cream); border: 0; font-size: 20px; padding: 10px 16px 7px; cursor: pointer; }
.col-x:hover { background: var(--ink); }

/* ---------- Toast: a sticker that slaps on and peels off ---------- */
.toast { position: fixed; left: 24px; bottom: 24px; z-index: 120; pointer-events: none; }
.toast .stk { font-size: 26px; animation: slap 420ms var(--p-motion-ease) both; }
.toast .stk.out { animation: peel 360ms var(--p-motion-ease) both; }
@keyframes peel { to { transform: rotate(8deg) translateY(30px); opacity: 0; } }

/* ---------- Easter eggs ---------- */
.period-drop { display: inline-block; animation: drop-bounce 1100ms cubic-bezier(.3,1.4,.5,1) both; }
@keyframes drop-bounce { 0% { transform: translateY(0); } 35% { transform: translateY(46px) rotate(90deg); } 55% { transform: translateY(22px); } 75% { transform: translateY(46px); } 100% { transform: translateY(0); } }
.rain { position: fixed; top: -40px; z-index: 110; width: 18px; height: 18px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px var(--cream); pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(115vh) rotate(260deg); } }
body.riot .stk, body.riot .lab, body.riot .story h3, body.riot .pc { animation: jitter 900ms steps(2) infinite; }
body.riot .wall > div > span { color: transparent; -webkit-text-stroke: 2px var(--red); }
body.riot .wall > div > span:nth-child(3n+2) { color: var(--red); -webkit-text-stroke: 0; }
@keyframes jitter { 50% { transform: rotate(-2.5deg) translate(1px, -1px); } }
.wall { cursor: pointer; pointer-events: auto; }
.cta .wall, .cover-wall .wall { pointer-events: auto; }
.wall.swap > div { animation: swap 380ms var(--p-motion-ease); }
@keyframes swap { 0% { transform: translateY(14px); opacity: .2; } }
.index li.kb a .t { background: var(--red); color: var(--cream); }

/* ---------- Narrow container: story slabs stack ---------- */
@container (max-width: 820px) {
  .story-media { grid-template-columns: 1fr; }
  .pc { transform: none; box-shadow: 6px 6px 0 var(--ink); }
  .core { grid-template-columns: 1fr; }
  .core-slab { min-height: 0; }
  .part-social-round-up { columns: 1; }
  .quote-slab.has-photo { grid-template-columns: 1fr; }
  .qs-photo { border-right: 0; border-bottom: 3px solid var(--ink); max-height: 420px; overflow: hidden; }
  .qs-red .badge { left: auto; right: 24px; top: -40px; }
}

/* ---------- Phones and tablets: stage first, then the index ---------- */
@media (max-width: 960px) {
  .frame { display: flex; flex-direction: column; }
  .rail { position: static; height: auto; overflow: visible; border-right: 0; border-top: 3px solid var(--ink); order: 2; padding: 26px var(--pad) 34px; }
  .rail .brand { display: none; }
  .rail-head { margin-top: 0; }
  .stage { order: 1; }
  .mbar { display: flex; position: sticky; top: 0; z-index: 90; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--pad); background: var(--ink); color: var(--cream); overflow: clip; }
  .mbar .wordmark { height: 26px; width: auto; }
  .mbar-link { font-size: 16px; text-decoration: none; border: 2px solid rgba(247,245,239,.35); padding: 6px 9px 3px; }
  .cover-home { min-height: 0; justify-content: flex-start; padding-bottom: 32px; }
  .cover-home .cut.readers { position: relative; right: auto; bottom: auto; width: 118%; max-width: none; margin: -40px -9% -150px auto; align-self: flex-end; }
  .countdown-stk { position: relative; right: auto; top: auto; align-self: flex-start; }
  .card { width: 100%; }
  /* Narrow covers: the cutout follows the giant word and overlaps its last line, so it never falls below the fold. */
  .cover-readers, .cover-newsboy { min-height: 0; padding-bottom: 0; }
  .cover-readers .cut, .cover-newsboy .cut { position: relative; right: auto; bottom: auto; z-index: 2; display: block; max-width: none; }
  .cover-readers .cut { width: 112%; margin: -16% -16% 0 auto; }
  .cover-newsboy { padding-right: 0; }
  .cover-newsboy .cut { width: 78%; margin: -10% 0 0 auto; }
  .cover-readers .cover-stk, .cover-newsboy .cover-stk { bottom: 22px; }
  .cta { flex-direction: column; min-height: 0; }
  .cta { padding-bottom: 0; }
  .cta .cut { position: relative; right: auto; bottom: auto; width: 72%; max-width: none; margin: 18px calc(var(--pad) * -1) 0 auto; order: 2; align-self: flex-end; }
  .foot { grid-template-columns: 1fr; justify-items: start; gap: 16px; }
  .foot .social { justify-self: start; }
}
@media (max-width: 560px) {
  body { font-size: 18px; }
  .index li a { grid-template-columns: 80px minmax(0, 1fr); }
  .index .t { font-size: 20px; }
  .signup input, .signup .soon-in { font-size: 18px; padding: 13px 12px; }
  .signup button[type="submit"], .signup .soon-btn { font-size: 21px; padding: 8px 14px 4px; }
  .issue-cover { min-height: 620px; }
  .issue-cover.cover-newsboy, .issue-cover.cover-readers { min-height: 0; }
  .pager { grid-template-columns: 1fr; }
  .pager .older { border-right: 0; border-bottom: 3px solid var(--ink); }
  .latest .l-t { font-size: 22px; }
}
@media print {
  .rail, .mbar, .foot, .cta, .pager, .progress, .share { display: none !important; }
  .frame { display: block; }
}

.end-line { text-align: center; font-size: 22px; margin: 48px 0 0; color: var(--ink); }

/* Tune by number: type an issue's number. */
.tune { position: fixed; right: 24px; bottom: 24px; z-index: 120; pointer-events: none; }
.tune .stk { font-size: 30px; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.tune[hidden] { display: none; }
.index a.tuned { background: var(--red); color: var(--cream); }
.index a.tuned time { border-color: var(--cream); color: var(--cream); }

/* ---------- The reader poll's thank-you page (newsletter/poll.md): one column, phone first ---------- */
.poll { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-start; justify-content: center; padding: clamp(28px, 6vw, 72px) 16px 56px; }
.poll-in { width: min(100%, 560px); }
.poll-stk { margin: 0 0 18px; }
.poll h1 { margin: 0; font-size: clamp(64px, 18vw, 120px); line-height: .88; }
.poll-line { margin: 18px 0 0; font-size: 20px; line-height: 1.4; font-weight: 600; }
.poll-line b { font-weight: 800; }
.poll-date { margin: 6px 0 0; font-size: 16px; color: var(--gray); }
.poll-date:empty { display: none; }
.poll-test { display: none; margin: 14px 0 0; padding: 10px 12px; border: 2px solid var(--red); font-size: 15px; font-weight: 600; }
.poll.is-test .poll-test { display: block; }
.poll.is-blank .poll-line { display: none; }
.poll-note { margin-top: 30px; }
.poll-why { display: block; font-size: 30px; line-height: .92; margin-bottom: 12px; }
.poll-note textarea { display: block; width: 100%; box-sizing: border-box; min-height: 120px; padding: 12px 14px; border: 3px solid var(--ink); border-radius: 0; background: #fff; color: var(--ink); font: inherit; font-size: 17px; line-height: 1.45; resize: vertical; outline: none; -webkit-appearance: none; appearance: none; }
.poll-note textarea:focus { border-color: var(--red); }
.poll-note button { display: inline-block; margin-top: 12px; min-height: 48px; border: 0; border-radius: 0; cursor: pointer; background: var(--red); color: var(--cream); font-size: 24px; padding: 10px 20px 6px; transition: background 140ms; }
.poll-note button:hover { background: var(--ink); }
.poll-fine { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--gray); }
/* The note goes to /api/poll-note (Eric, 2026-10-06): sending, a calm retry line on an error, and once it's in, the
   box itself becomes "Got it. Thank you." (same place, same frame). The honeypot box is off-screen for people. */
.poll-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.poll-note button:disabled { cursor: progress; opacity: .7; }
.poll-error { display: none; margin: 10px 0 0; font-size: 15px; line-height: 1.45; font-weight: 600; }
.poll.is-error .poll-error { display: block; }
.poll-sent { display: none; margin: 0; box-sizing: border-box; min-height: 120px; padding: 18px 14px; border: 3px solid var(--ink); font-size: 22px; line-height: 1.3; font-weight: 700; outline: none; }
.poll.is-sent .poll-sent { display: flex; align-items: center; }
.poll.is-sent .poll-note textarea, .poll.is-sent .poll-note button, .poll.is-sent .poll-fine, .poll.is-sent .poll-error { display: none; }
.poll.is-blank .poll-note { display: none; }
.poll-back { display: inline-block; margin-top: 34px; min-height: 44px; font-weight: 700; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; color: inherit; }

/* The unsubscribe page, the 404 and the "You're in" page (site/build.py unsubscribe_page, not_found, confirmed_page): one compact column, centered in the
   screen between the bar and the footer, phone first (Eric, 2026-10-16: tighten the giant headline, the button and the
   space under it). The unsubscribe page shows one state at a time (site/src/unsubscribe.js). */
.unsub section, .unsub-h > span { display: none; }
.unsub[data-state="ask"] .unsub-ask, .unsub[data-state="done"] .unsub-done,
.unsub[data-state="back"] .unsub-back, .unsub[data-state="bad"] .unsub-bad { display: block; }
body.unsub-page, body.lost-page, body.done-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
body.unsub-page .frame.solo, body.lost-page .frame.solo, body.done-page .frame.solo { flex: 1 0 auto; display: flex; }
.unsub-page .poll.unsub, .lost-page .poll.lost, .done-page .poll.done { flex: 1; min-height: 0; align-items: center; padding: 28px 16px 36px; }
.unsub-page .poll.unsub .poll-in, .lost-page .poll.lost .poll-in, .done-page .poll.done .poll-in { container-type: inline-size; display: block; width: min(100%, 520px); }
/* the headline fits its column at every width, never broken mid-word (QA, #460: "UNSUBSCRIBE / D." at 1280): the
   longest word, "UNSUBSCRIBED.", is 5.61em wide in Anton, so 12cqi of the column fits it with room to spare */
.unsub-page .poll.unsub h1, .lost-page .poll.lost h1, .done-page .poll.done h1 { margin: 0; font-size: clamp(36px, 12cqi, 64px); line-height: .9;
  overflow-wrap: normal; word-break: keep-all; hyphens: none; }
.unsub-page .poll-stk, .lost-page .poll-stk, .done-page .poll-stk { margin: 0 0 14px; }
.unsub-page .poll-line, .lost-page .poll-line, .done-page .poll-line { margin: 12px 0 0; font-size: 18px; line-height: 1.45; font-weight: 500; }
.go-btn { display: block; width: 100%; margin-top: 22px; min-height: 52px; box-sizing: border-box; border: 0; border-radius: 0; cursor: pointer;
  background: var(--red); color: #fff; font-size: 24px; line-height: 1; padding: 15px 22px 11px; text-align: center; text-decoration: none;
  transition: background 140ms; }
@media (min-width: 560px) { .go-btn { display: inline-block; width: auto; } }
.go-btn:hover { background: var(--deep, #000); }
.go-btn:focus-visible, .unsub .unsub-undo:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.unsub .unsub-undo { display: inline-block; margin-top: 16px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  color: inherit; font: inherit; font-size: 17px; font-weight: 700; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }
.unsub .unsub-undo[hidden] { display: none; }
.unsub button:disabled { cursor: progress; opacity: .7; }
.unsub .poll-error { margin-top: 12px; }
.unsub .poll-error a { color: inherit; text-decoration: underline; text-decoration-color: var(--red); }
.unsub-page .poll-back { margin-top: 18px; font-size: 16px; }
/* Why a reader left (Eric, 2026-10-25): under "You're unsubscribed." only, after it; five quiet outlined buttons that wrap,
   never louder than Resubscribe or the red button; "Something else" opens one box; then "Thanks. That helps." in its
   place (site/src/unsub-reason.js). */
.unsub-why { margin-top: 20px; }
.unsub-why[hidden], .unsub:not([data-state="done"]) .unsub-why { display: none; }
.unsub-why-q { margin: 0 0 12px; font-size: 16px; line-height: 1.4; font-weight: 700; }
.unsub-reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.unsub-why button { min-height: 44px; margin: 0; padding: 10px 14px; box-sizing: border-box; max-width: 100%; border: 1px solid currentColor; border-radius: 0;
  background: transparent; color: inherit; font: inherit; font-size: 15px; line-height: 1.25; font-weight: 600; text-align: left; cursor: pointer;
  transition: border-color 140ms, background 140ms; }
.unsub-why button:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.unsub-other[hidden] { display: none; }
.unsub-other { margin-top: 12px; }
.unsub-other textarea { display: block; width: 100%; box-sizing: border-box; min-height: 84px; margin: 0; padding: 10px 12px; border: 1px solid currentColor;
  border-radius: 0; font: inherit; font-size: 16px; line-height: 1.45; resize: vertical; outline: none; -webkit-appearance: none; appearance: none; }
.unsub-other [data-send] { margin-top: 8px; font-weight: 700; }
.unsub-why-error { display: none; margin: 10px 0 0; font-size: 15px; line-height: 1.45; font-weight: 600; }
.unsub-why.is-error .unsub-why-error { display: block; }
.unsub-why.is-sent .unsub-why-ask { display: none; }
.unsub-thanks { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 700; outline: none; }
.unsub-thanks:empty { display: none; }
/* Centered, with a red glow (Eric, 2026-10-25: "center align it... a little polish... a red glow"). The unsubscribe page
   only; the textarea's own text stays left so typing reads naturally. */
.unsub-page .poll.unsub .poll-in { text-align: center; }
.unsub-page .unsub .unsub-undo { text-align: center; }
.unsub-page .unsub-reasons { justify-content: center; }
.unsub-page .unsub-why button { text-align: center; }
.unsub-page .unsub-other textarea { text-align: left; }
.unsub-page .go-btn { box-shadow: 0 0 22px rgba(230, 27, 33, .35); transition: background 140ms, box-shadow 200ms; }
.unsub-page .go-btn:hover, .unsub-page .go-btn:focus-visible { box-shadow: 0 0 34px rgba(230, 27, 33, .6); }
.unsub-page .unsub-why button { transition: border-color 160ms, background 160ms, box-shadow 200ms; }
.unsub-page .unsub-why button:hover, .unsub-page .unsub-why button:focus-visible {
  border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 0 26px rgba(230, 27, 33, .6); outline: none; }
.unsub-page .unsub-why button:active { background: rgba(230, 27, 33, .18); }
.unsub-page .unsub-other textarea:focus { border-color: var(--red); box-shadow: 0 0 16px rgba(230, 27, 33, .35); outline: none; }
@media (prefers-reduced-motion: reduce) { .unsub-page .go-btn, .unsub-page .unsub-why button { transition: none; } }
/* The headline glows (Eric, 2026-10-25: "a little light glow... by the big white letters"): a soft red halo behind the
   white Anton, light enough that the letters stay crisp. */
.unsub-page .poll.unsub h1 { text-shadow: 0 0 18px rgba(230, 27, 33, .55), 0 0 42px rgba(230, 27, 33, .35), 0 0 80px rgba(230, 27, 33, .18); }

/* "Don't count me" (site/src/notme.js): the note a page opened with ?notme or ?countme shows; nobody else sees it */
.notme { position: fixed; z-index: 1000; left: 50%; bottom: 16px; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 4px; padding: 6px 4px 6px 16px; background: #000; color: #fff;
  border: 2px solid var(--red, #E61B21); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); font-size: 15px; font-weight: 600; line-height: 1.35; }
.notme .notme-msg { flex: 1 1 auto; min-width: 0; margin-right: 4px; }
.notme button { flex: none; min-height: 44px; padding: 0 10px; border: 0; background: none; color: #fff; font: inherit; cursor: pointer; }
.notme .notme-undo { text-decoration: underline; text-decoration-color: var(--red, #E61B21); text-underline-offset: 3px; }
.notme .notme-undo[hidden] { display: none; }
.notme .notme-x { min-width: 44px; font-size: 22px; line-height: 1; }
.notme button:focus-visible { outline: 2px solid var(--red, #E61B21); outline-offset: 2px; }

/* a closed archive (site.json archive_open false): the pager is one link, the front page, across the whole row */
.pager > a:only-child { grid-column: 1 / -1; }

/* /confirmed, redone 2026-10-18 (the UI Designer; Eric: "a huge empty black gap between the header and the sticker, the
   sticker crowding the headline, the five icons in gray boxes that look like placeholders"). One centered column with
   a deliberate rhythm: a calm top gap that scales with the screen, the sticker and the headline as one lockup (the sticker
   tilted above the first word, a clear 20px between them), the copy at a readable measure (about 34 characters a line), a
   hairline-free "follow" row: five white tiles, one size, a 56px hit area each, red on hover and focus, labelled for a
   screen reader (the links' aria-labels). The whole page sits above the footer, not floated in the middle of a tall
   screen. */
.done-page .poll.done { align-items: flex-start; padding: clamp(44px, 11vh, 116px) 20px clamp(56px, 10vh, 96px); }
.done-page .poll.done .poll-in { width: min(100%, 560px); margin: 0 auto; text-align: center; }
.done-page .poll-stk { display: inline-block; margin: 0 0 22px; }
.done-page .poll.done h1 { font-size: clamp(56px, 17cqi, 104px); line-height: .88; text-align: center; margin: 0 0 clamp(22px, 4vh, 34px); }
.done-page .poll-line { max-width: 34ch; margin: 0 auto; font-size: clamp(17px, 4.6vw, 20px); line-height: 1.5; text-wrap: pretty; }
.done-page .poll-line + .poll-line { margin-top: 16px; color: var(--mute, #A3A3A3); font-weight: 500; }
.done-follow { margin-top: clamp(36px, 7vh, 56px); padding-top: 0; }
.done-page .poll-line.done-follow { color: var(--mute, #A3A3A3); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.done-social { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
/* the marks are the platforms' own colors (site/build.py color_mark), bare on black; nothing here recolors them. On hover and
   keyboard focus a white tile arrives and the one-color marks (TikTok's note, Threads, X) swap white for black to read on it
   (Eric, 2026-10-18: B, bare marks with the tile on hover). Real 56px hit areas (64px from 900px up). */
.done-social a { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: 0; border-radius: 0;
  background: transparent; transition: background 140ms, transform 140ms; }
.done-social a svg { width: 32px; height: 32px; }
.done-social .mk-bare { display: inline-flex; }
.done-social .mk-tile { display: none; }
.done-social a:hover, .done-social a:focus-visible { background: #F5F5F1; transform: translateY(-2px); }
.done-social a:hover .mk-bare, .done-social a:focus-visible .mk-bare { display: none; }
.done-social a:hover .mk-tile, .done-social a:focus-visible .mk-tile { display: inline-flex; }
.done-social a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 420px) { .done-social { gap: 8px; } .done-social a { width: 52px; height: 52px; } }
@media (min-width: 900px) { .done-social { gap: 14px; } .done-social a { width: 64px; height: 64px; } .done-social a svg { width: 38px; height: 38px; } }
/* the footer's own five icons repeat the row above them on this page: left out here, so the page ends on the wordmark, Terms, Privacy */
.done-page .foot .social { display: none; }

/* ====================================================================================================
   Marquee: a design experiment. Parlance in black, red and white, inspired by streaming-service design.
   Layered on top of site.css when the site is built with --theme marquee (site/dist-marquee/).
   Our own values throughout: no Netflix logo, symbol, type, colors or sound.

   How it works: Riot paints light surfaces with var(--cream) and text with var(--ink). Here the page and every light
   surface become a "screen" context that swaps those two tokens, so the same markup renders dark. Ink and red slabs
   keep the root values (black ground, white type).
   ==================================================================================================== */
:root {
  --red: #E61B21;          /* Marquee Red: the one loud color; 4.5:1 on black and under white type */
  --deep: #8C0A14;         /* Deep Red: glows, gradients, pressed states */
  --ink: #000000;          /* Black: the canvas */
  --cream: #F5F5F1;        /* White: type, labels, the cutouts' sticker edge */
  --screen: #141414;       /* Screen: cards and surfaces on the canvas */
  --raised: #1F1F1F;       /* Raised: hover, inputs */
  --line: #2E2E2E;         /* Hairlines */
  --mute: #A3A3A3;         /* Secondary type (6.9:1 on black) */
  --graphite: var(--mute);
}
/* A "screen" context: any light Riot surface turns dark, with white type and hairline borders. */
.rail, .slab:not(.red):not(.ink), .pc, .colophon .col-in, .latest, .done {
  --cream: var(--screen); --ink: #F5F5F1; --ink-2: #CFCFCF; --graphite: var(--mute); --gray: #8A8A8A; --hair: var(--line);
}
body { background: #000; color: #F5F5F1; }
/* Inside a screen context, stickers, labels and tags keep Riot's light-on-red / dark-on-light type. */
.stk, .lab, .tag, .badge, .chip, .stk *, .lab *, .tag * { --cream: #F5F5F1; --ink: #000; }
.mbar { background: #000; color: #fff; border-bottom: 1px solid var(--line); }
.foot { --cream: #F5F5F1; --ink: #000; }
body.grain::after, .grain::after { display: none; }
::selection { background: var(--red); color: #fff; }
.slab:not(.red):not(.ink) { background: var(--screen); }
.slab.ink { background: #000; }
.rail { background: #000; border-right: 1px solid var(--line); scrollbar-color: #444 transparent; }
.rail-head { border-bottom: 1px solid var(--line); }
.index time { border: 1px solid #444; color: var(--mute); }
.index li a:hover .t, .index li a:focus-visible .t { background: var(--red); color: #fff; transform: none; }
.index li a[aria-current="page"] .t { background: #fff; color: #000; transform: none; box-shadow: none; }
.index li a[aria-current="page"] time { background: var(--red); border-color: var(--red); color: #fff; }
.field { background: var(--raised); border: 1px solid #444; border-radius: 4px; overflow: hidden; }
.field:focus-within { border-color: #fff; }
.signup input { color: #fff; }
.signup .soon-btn { color: #fff; letter-spacing: .03em; }
.field.soon:focus-visible { border-color: #fff; }
.signup button[type="submit"] { background: var(--red); color: #fff; }
.signup button[type="submit"]:hover { background: var(--deep); }
.pc { background: var(--screen); border: 1px solid var(--line); box-shadow: 6px 6px 0 var(--deep); border-radius: 6px; }
.foot { background: #000; border-top: 1px solid var(--line); }
.progress span { background: var(--red); box-shadow: 0 0 12px rgba(230, 27, 33, .6); }
.story-pic .photo, .lead-photo .photo { border: 0; border-radius: 6px; }
.dek-row { border-bottom: 1px solid var(--line); }

/* ---------- The front page: a phone on a red glow (Eric, 2026-10-03) ----------
   Pure black. Left: the wordmark, the headline (white, then red), the line, the sign-up. Right: a phone, tilted a
   little, showing the top of the latest Daily Brief (site/tools/brief_shot.py refreshes the picture every morning).
   On a phone it is one screen: headline, line, form, with the phone small and floating top right, and the glow behind
   the phone, smaller and softer, so the headline sits on plain black (2026-10-08, below). */
.mq-home { background: #000; }
.hero { position: relative; min-height: 100vh; min-height: 100svh; overflow: clip; container-type: inline-size; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; gap: clamp(28px, 4cqw, 56px);
  padding: clamp(40px, 6cqw, 72px) clamp(24px, 6cqw, 80px); }  /* 1.25/.75 (was 1.15/.85, 2026-10-11 8:55pm): the copy's column holds "...and what they mean. Without the doomscroll." on one line from 1024 wide up at the line's size; the phone keeps its width in the narrower side */
/* The glow is the first child of .hero-side (the phone's column). On a desktop or tablet .hero-side isn't positioned,
   so inset: 0 is the hero's box and the glow spans it, centered on the phone's side; on a phone .hero-side is
   positioned (below), so the same element wraps the phone instead. */
.hero-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(42cqw 46cqw at 78% 55%, rgba(230, 27, 33, .55), rgba(140, 10, 20, .25) 50%, transparent 75%); }
.hero-copy { min-width: 0; animation: rise 560ms var(--p-motion-ease) both; }
.mq-brand.hero-brand { position: relative; top: auto; right: auto; z-index: auto; display: inline-block; margin-bottom: clamp(32px, 5cqw, 56px); }
.mq-brand.hero-brand .wordmark { height: 40px; filter: none; }
/* The headline breaks on purpose (Eric, 2026-10-11 11:40pm, "ship this one to the website": "A five-minute read that
   makes you the MVP at work and in your group chat."; "five-minute" hyphenated): four lines on wide screens, "A FIVE-MINUTE
   READ / THAT MAKES YOU / THE MVP AT WORK / AND IN YOUR GROUP CHAT.", six on a phone, "A FIVE-MINUTE / READ THAT / MAKES
   YOU / THE MVP AT WORK / AND IN YOUR / GROUP CHAT.", never a one-word line; "five-minute" never splits at its hyphen (.nb). The plain
   br breaks on both, br.d only on wide screens, br.m only on phones; the size is set so the longest line fits its
   column, so nothing else wraps. The closing period on the red phrase is white, as on every red line. The "and" is a
   category tag (Eric, 2026-10-11, "I like this": red, white Anton, a white outline, tilted, like the phone's tags),
   sized in em so it scales with the headline. */
.hero-title { margin: 0; font-weight: 400; font-size: var(--ht); line-height: .95; letter-spacing: 0; color: #fff; text-transform: uppercase;
  --ht: clamp(34px, 4.7cqw, 80px); }
.hero-title br.m { display: none; }
.hero-title .nb { white-space: nowrap; }
.hero-title .h-r { color: var(--red); }
.hero-title .h-r .p { color: #fff; }
.hero-title .h-and { display: inline-block; background: #E61B21; color: #fff; font-size: .62em; letter-spacing: .02em; padding: .08em .2em .02em;
  box-shadow: 0 0 0 .05em #fff; transform: rotate(-8deg); margin: 0 .14em 0 .06em; vertical-align: .12em; line-height: 1; }
.hero-line { margin: clamp(18px, 2.2cqw, 26px) 0 0; font-size: clamp(17px, 1.7cqw, 21px); line-height: 1.5; color: #D6D6D6; max-width: 35em; }  /* Eric's three lines on wide screens (2026-10-11): the second holds both sentences (34.1em with "doomscroll") */
.hero-line .l { display: block; }  /* each of Eric's three lines is its own block, so a phone balances each one on its own (no orphans, Eric 2026-10-11 7:40pm) */
.hero-line .nb { white-space: nowrap; }  /* "Without the doomscroll." never leaves "the doomscroll." alone on a phone; "weekday morning." and "tapped in." are held by non-breaking spaces in the markup */
.hero-plus { margin: 14px 0 0; font-size: clamp(15px, 1.4cqw, 17px); line-height: 1.5; color: #A3A3A3; max-width: 30em; }  /* the Job Board, one line (Eric, 2026-10-05) */
.hero .signup { margin-top: clamp(24px, 3cqw, 34px); max-width: 520px; }
.hero .field { border-radius: 8px; border-color: #333; background: var(--screen); }
.hero .signup input, .hero .signup .soon-in { font-size: 17px; }
.hero .signup .fine:empty, .hero .signup .fine:has(.err:empty) { min-height: 0; margin: 0; }
.frame.solo { display: block; }  /* the front page has one job, the email: no issue list beside it */
.hero-side { justify-self: center; display: grid; justify-items: center; gap: clamp(26px, 3cqw, 40px); }
.archive-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; line-height: 1; text-transform: uppercase; letter-spacing: .03em;
  color: #fff; text-decoration: none; padding: 11px 16px 9px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 4px; background: rgba(0, 0, 0, .35);
  transition: border-color 160ms, background 160ms; }
.archive-btn:hover, .archive-btn:focus-visible { border-color: var(--red); background: rgba(230, 27, 33, .14); }
/* The archive, closed (site.json archive_open false; Eric, 2026-10-05): the same button in the same place and size,
   dimmed, with nothing to click and no hover (a span, aria-disabled; the title says "Archive opens soon"). The same for
   the phone's top bar. */
.archive-btn.is-off, .archive-btn.is-off:hover { color: rgba(255, 255, 255, .38); border-color: rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .35); cursor: default; transition: none; }
.marquee .mbar .mbar-link.is-off { color: rgba(255, 255, 255, .38); border-color: rgba(255, 255, 255, .14); cursor: default; }
.archive-panel .ap-empty { margin: 18px 0 0; font-size: 20px; line-height: 1.1; text-transform: uppercase; color: #A3A3A3; }
a.hero-phone { display: block; transition: transform 220ms var(--p-motion-ease); }
a.hero-phone:hover { transform: rotate(3deg) translateY(-4px); }
a.hero-phone:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }
/* The phone is a real phone (Eric, 2026-10-11 4:40pm: "it should look like a phone... everything should be rounded...
   edge to edge"; the reference: site/prd/hero-phone/frame.html, 330px wide): a rounded body (#0b0b0b, radius 54/330
   of its width, 11/330 padding, an inset 1.5px rim, a 1px black outline, a deep shadow), two buttons on the left and
   one on the right, then a separate screen inside it, rounded (43/330) and clipping the picture by its own corners,
   with the camera pill (31% wide, 27/330 tall, 12/330 down) over the design's glow. Every value is a share of --fw,
   the body's width, so the small floating phone of the phone layout (63 to 92px) is the same phone scaled down:
   never a square screen at any size. The picture is the screen's own shape (390 x 822), so nothing is cropped. */
.hero-phone { --fw: clamp(250px, 26cqw, 300px); --btn: max(1px, calc(var(--fw) * .009)); position: relative; width: var(--fw);
  padding: calc(var(--fw) * .0333); border-radius: calc(var(--fw) * .1636); background: #0b0b0b;
  box-shadow: inset 0 0 0 1.5px #3c3c3c, 0 0 0 1px #000, 0 40px 90px rgba(0, 0, 0, .75);
  transform: rotate(4deg); animation: phone-in 800ms var(--p-motion-ease) 120ms both; }
.hero-phone::before, .hero-phone::after { content: ""; position: absolute; width: var(--btn); background: #2a2a2a; border-radius: 2px; }
.hero-phone::before { left: calc(-1 * var(--btn)); top: calc(var(--fw) * .4545); height: calc(var(--fw) * .1697); box-shadow: 0 calc(var(--fw) * -.2121) 0 0 #2a2a2a; }
.hero-phone::after { right: calc(-1 * var(--btn)); top: calc(var(--fw) * .5455); height: calc(var(--fw) * .2606); }
.hp-screen { display: block; position: relative; width: 100%; aspect-ratio: 390 / 822; border-radius: calc(var(--fw) * .1303); overflow: hidden; background: #000; }
.hp-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hp-island { display: block; position: absolute; z-index: 2; top: calc(var(--fw) * .0364); left: 50%; width: 31%; height: calc(var(--fw) * .0818);
  transform: translateX(-50%); background: #000; border-radius: 999px; }
@keyframes phone-in { from { opacity: 0; transform: translateY(30px) rotate(8deg); } to { opacity: 1; transform: rotate(4deg); } }
.rail .wordmark path:not(:last-of-type), .mbar .wordmark path:not(:last-of-type) { fill: #fff; }
.rail .wordmark path:last-of-type, .mbar .wordmark path:last-of-type { fill: var(--red); }
@media (max-width: 860px) {
  .hero { min-height: 0; grid-template-columns: minmax(0, 1fr); padding: 32px 20px 48px; gap: 40px; }
  .hero-glow { background: radial-gradient(70cqw 60cqw at 50% 78%, rgba(230, 27, 33, .5), rgba(140, 10, 20, .22) 50%, transparent 75%); }
  .hero-title { --ht: clamp(30px, 13.8cqw, 76px); }
  .hero-line { text-wrap: balance; }
  .hero-line br.d { display: none; }
  .hero-title br.m { display: inline; }
  .hero-title br.d { display: none; }
  .hero-phone { --fw: min(250px, 66cqw); }
}
@media (max-width: 960px) { .mq-brand.hero-brand { display: none; } }  /* the bar at the top carries the wordmark there */
@media (prefers-reduced-motion: reduce) { .hero-copy, .hero-phone { animation: none; } }
.core-slab.ink, .slab.ink.cta { box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- The wordmark, top right. Its period blinks like a VCR's REC light (press it). ---------- */
.mq-brand { position: fixed; z-index: 96; top: calc(16px + env(safe-area-inset-top, 0px)); right: 24px; line-height: 0; }
.mq-brand .wordmark { height: 34px; width: auto; filter: drop-shadow(0 2px 12px rgba(0,0,0,.7)); }
.mq-brand .wordmark path:not(:last-of-type) { fill: #fff; }
.mq-brand .wordmark path:last-of-type { fill: var(--red); cursor: pointer; animation: rec 1.4s steps(1, end) infinite; }
@keyframes rec { 50% { opacity: .18; } }
.marquee .rail .brand { display: none; }
.marquee .rail-head { margin-top: 4px; }
/* The real way in: the logo's red period. It blinks on every screen, and an invisible 48px door sits on it (arcade.js). */
.marquee .mbar .wordmark path:last-of-type { animation: rec 1.4s steps(1, end) infinite; }
.marquee .mbar .brand { position: relative; }  /* (.mq-brand is fixed, which already places the door) */
.dot-door { position: absolute; width: 48px; height: 48px; left: calc(97.9% - 24px); top: calc(69.5% - 24px); border-radius: 50%;
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dot-door:focus-visible { outline: 2px solid #fff; outline-offset: -10px; }
/* The hint: once a visit, a few seconds in, the period sends out two red rings so it gets noticed. */
.dot-door::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  opacity: 0; pointer-events: none; }
.dot-door.nudge::before { border: 2px solid var(--red); animation: nudge 1.1s ease-out 2; }
a:has(.dot-door.nudge) .wordmark path:last-of-type { animation: none; filter: drop-shadow(0 0 6px rgba(230,27,33,1)); }
@keyframes nudge { 0% { opacity: 1; transform: scale(.6); } 100% { opacity: 0; transform: scale(4.4); } }

/* ---------- Issue covers: the title never runs into itself or the photo ---------- */
.marquee .issue-cover { background: #000; }
.cover-title { display: flex; flex-direction: column; justify-content: flex-end; min-height: min(80svh, 820px); }
.cover-title .glow, .cover-photo .fade { position: absolute; inset: 0; pointer-events: none; }
.cover-title .glow { z-index: 0; background: radial-gradient(70cqw 50cqw at 80% 110%, rgba(230,27,33,.7), rgba(140,10,20,.38) 45%, transparent 72%); }
.cover-title .giant { margin-bottom: clamp(70px, 10cqw, 130px); }
.marquee .giant { gap: .07em; text-shadow: 0 3px 0 #000, 0 10px 46px rgba(0,0,0,.85); }
.marquee .giant .fit { line-height: .9; }
.marquee .cover-title .giant .fit, .marquee .cover-photo .giant .fit { color: var(--red); }
.marquee .cover-photo .cut { z-index: 1; filter: drop-shadow(0 0 30px rgba(0,0,0,.6)); }
.cover-photo .fade { z-index: 2; background: radial-gradient(80% 75% at 0% 0%, rgba(0,0,0,.92) 32%, rgba(0,0,0,.55) 55%, transparent 78%),
  radial-gradient(50cqw 40cqw at 85% 110%, rgba(230,27,33,.45), transparent 70%); }
.marquee .cover-photo .giant { z-index: 3; }
.marquee .cover-labs { z-index: 4; }

/* ---------- The issue header: one centered scene that flows into the issue ---------- */
/* Labels, then the cutout standing in the middle (fading into the dark at its feet, so no body ends in mid-air),
   the title laid over its lower half, the date sticker. The title is sized from its longest line (--n characters
   of Anton at about .47em) and its line count (--l). The red glow starts behind the figure and carries on down
   behind the dek and byline, then fades into the page. */
.mq-cover { --cut-h: clamp(250px, 30cqw, 400px); display: grid; justify-items: center; text-align: center; isolation: isolate; min-height: 0;
  padding: clamp(74px, 7cqw, 96px) clamp(20px, 4cqw, 56px) clamp(10px, 1.6cqw, 22px); }
/* One glow for the whole scene: it hangs out of the header's bottom and runs on behind the dek and byline. */
.marquee .issue-cover.mq-cover { overflow: visible; }
.mq-cover .glow { position: absolute; inset: 0 0 -300px; z-index: -1; pointer-events: none;
  background: radial-gradient(44cqw 30cqw at 50% 58%, rgba(230,27,33,.46), rgba(140,10,20,.24) 48%, transparent 74%),
              radial-gradient(70cqw 34cqw at 50% 66%, rgba(140,10,20,.22), transparent 72%); }
.mq-labs { position: relative; z-index: 3; flex-direction: row; align-items: center; justify-content: center; gap: 8px;
  font-size: clamp(16px, 1.6cqw, 24px); margin-bottom: clamp(10px, 1.4cqw, 18px); }
.mq-labs .lab:last-child { transform: rotate(-2deg); }
.mq-cut { position: relative; z-index: 1; display: block; width: auto; max-width: min(78cqw, 640px); height: var(--cut-h); object-fit: contain;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 97%); mask-image: linear-gradient(to bottom, #000 62%, transparent 97%);
  filter: drop-shadow(0 0 34px rgba(0,0,0,.55)); animation: rise 700ms var(--p-motion-ease) both; pointer-events: none; }
.mq-title { position: relative; z-index: 2; margin: calc(-0.62 * min(clamp(48px, 9.5cqw, 140px), calc(84cqw / (var(--n) * .47)), calc(30cqw / var(--l)))) 0 0;
  color: var(--red); font-weight: 400; line-height: .88; letter-spacing: .005em; display: grid; justify-items: center;
  font-size: min(clamp(48px, 9.5cqw, 140px), calc(84cqw / (var(--n) * .47)), calc(30cqw / var(--l)));
  text-shadow: 0 3px 0 #000, 0 0 28px rgba(0,0,0,.95), 0 12px 50px rgba(0,0,0,.9); }
.mq-cover:not(.has-cut) .mq-title { margin-top: clamp(20px, 3cqw, 40px); }
.mq-title span { display: block; white-space: nowrap; }
.mq-cover .cover-stk { position: relative; left: auto; bottom: auto; z-index: 3; margin-top: clamp(14px, 1.8cqw, 24px); --tilt: -3deg;
  animation: slap 420ms var(--p-motion-ease) 200ms both; font-size: clamp(15px, 1.5cqw, 21px); }
/* the dek and byline sit in the same light, centered, and the glow fades out beneath them */
.marquee .mq-cover + .dek-row { position: relative; justify-items: center; text-align: center; gap: 12px; border-bottom: 0;
  padding-block: clamp(14px, 1.8vw, 24px) clamp(40px, 5vw, 64px);
  background: transparent; }
.marquee .mq-cover + .dek-row::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 64px; height: 4px; margin-left: -32px; background: var(--red); border-radius: 2px; }
.marquee .mq-cover + .dek-row .dek { font-size: clamp(20px, 1.9vw, 26px); max-width: 38ch; margin-inline: auto; text-wrap: balance; }
.marquee .mq-cover + .dek-row .byline { justify-content: center; }
.marquee .issue-cover.mq-cover { background: #000; }
@media (max-width: 640px) {
  .mq-cover { --cut-h: 230px; padding-top: 26px; }
  .mq-title { font-size: min(64px, calc(88cqw / (var(--n) * .47)), calc(40cqw / var(--l)));
    margin-top: calc(-0.55 * min(64px, calc(88cqw / (var(--n) * .47)), calc(40cqw / var(--l)))); }
}
@media (prefers-reduced-motion: reduce) { .mq-cut, .mq-cover .cover-stk { animation: none; } }

/* ---------- The issue body, centered under the header ---------- */
/* One centered column: labels, headlines, stickers, pictures, the core slabs, the scorecard, the quote and the
   sign-off all sit on the same center line as the header. Running text stays at a short measure so it reads well
   centered; the post cards keep their own left-aligned layout because they reproduce real posts. */
.marquee .prose { max-width: 1000px; margin-inline: auto; text-align: center; }
.marquee .prose > p, .marquee .part > p, .marquee .story > p { max-width: 36rem; margin-inline: auto; line-height: 1.62; }
.marquee .prose > p.lead { max-width: 28ch; margin-inline: auto; text-wrap: balance; }
.marquee .part-h { border-top: 0; padding-top: 0; margin-top: clamp(30px, 5cqw, 60px); text-wrap: balance; }
.marquee .part-h::after { content: ""; display: block; width: 72px; height: 4px; margin: 16px auto 0; background: var(--red); border-radius: 2px; transform-origin: 50% 50%; }
.marquee .story h3 { margin-inline: auto; text-wrap: balance; }
.marquee .story .cat, .marquee .sr-item .stk.cat { display: inline-block; }
.marquee .story-media { margin-inline: auto; justify-items: center; }
.marquee .story-pic, .marquee .lead-photo { margin-inline: auto; }
.marquee .story-pic figcaption, .marquee .lead-photo figcaption { text-align: center; }
.marquee .pc { text-align: left; margin-inline: auto; transition: transform 220ms var(--p-motion-ease), box-shadow 220ms var(--p-motion-ease); }
.marquee .pc:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: 9px 9px 0 var(--deep); }
.marquee .core { margin-inline: auto; }
.marquee .core-slab { text-align: center; transition: transform 220ms var(--p-motion-ease); }
.marquee .core-slab:hover { transform: translateY(-4px); }
.marquee .core-slab .track { justify-content: center; }
.marquee .scorecard { max-width: 820px; margin-inline: auto; justify-items: center; cursor: pointer; }
.marquee .video { margin-inline: auto; }
.marquee .video-cap { text-align: center; }
.marquee .video-title { margin-inline: auto; }
.marquee .part-social-round-up .sr-item { align-items: center; padding-right: 0; }
.marquee .sr-item .stk.cat { margin-left: 0; }
.marquee .quote-slab { max-width: 900px; margin-inline: auto; text-align: left; }
.marquee .signoff { align-items: center; text-align: center; max-width: 820px; margin-inline: auto; cursor: pointer; }
.marquee .end-line { margin-top: 56px; color: #A3A3A3; letter-spacing: .04em; }
.marquee .video-title { line-height: 1; text-wrap: balance; }
.marquee .cta { justify-content: center; }

/* Movement: pieces of the issue rise in as they scroll into view (added by site.js; nothing is hidden without it) */
.marquee .rv { opacity: 0; transform: translateY(22px); transition: opacity 620ms var(--p-motion-ease), transform 620ms var(--p-motion-ease); }
.marquee .rv.rv-in { opacity: 1; transform: none; }
.marquee .core.rv .core-slab { opacity: 0; transform: translateY(16px); transition: opacity 520ms var(--p-motion-ease), transform 520ms var(--p-motion-ease); }
.marquee .core.rv-in .core-slab { opacity: 1; transform: none; }
.marquee .core.rv-in .core-slab:nth-child(2) { transition-delay: 120ms; } .marquee .core.rv-in .core-slab:nth-child(3) { transition-delay: 240ms; }
.marquee .part-h.rv::after { transform: scaleX(0); transition: transform 700ms var(--p-motion-ease) 250ms; }
.marquee .part-h.rv-in::after { transform: scaleX(1); }
.marquee .story.rv-in .cat { animation: slap 420ms var(--p-motion-ease) 120ms both; }
/* Easter eggs: the sign-off lifts off (onward and upward) and the big number counts. No elapsed-time sticker at the
   end of an issue (Eric, 2026-10-04: "REMOVE IT"). */
.marquee .signoff .up { display: inline-block; animation: onward 1.6s var(--p-motion-ease) both; }
@keyframes onward { 0% { transform: none; } 40% { transform: translateY(-46px) rotate(-6deg); opacity: .9; } 70% { transform: translateY(-58px) rotate(4deg); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .marquee .rv, .marquee .core.rv .core-slab { opacity: 1; transform: none; transition: none; }
  .marquee .part-h.rv::after { transform: none; }
  .marquee .signoff .up, .marquee .story.rv-in .cat { animation: none; }
}

/* ---------- Inside an issue ---------- */
.marquee .story-media { grid-template-columns: minmax(0, 1fr); max-width: 760px; gap: 18px; }
.marquee .story-media .pc { max-width: 600px; }
.marquee .story-media .story-pic .photo { aspect-ratio: 16 / 9; }
.marquee .pc-photo img { max-height: 280px; object-fit: cover; width: 100%; }
.marquee .pc-short .pc-photo.pc-tall img { max-height: none; }
.marquee .scorecard { justify-items: center; text-align: center; }
.marquee .scorecard .sc-line { margin-inline: auto; }

/* ---------- Native cards (Eric, 2026-10-11, "retain the Instagram design aesthetic"; brief/prd/native-cards.md): the
   archive's X and YouTube cards are the platforms' own embeds, as the Brief page draws them (the page's .pc-x, .pc-sh
   and .pc-yt rules in brief/tools/edition.css), on the archive's black. The skeleton classes stay; only the look changes.
   An Instagram, Threads or TikTok post is already the platform's own embed (assets/embeds.js). ---------- */
.marquee .pc.pc-native { --cream: #000; --ink: #e7e9ea; --graphite: #71767b; background: #000; border: 1px solid #2f3336; border-radius: 12px; box-shadow: none; padding: 12px 16px 12px; transform: none;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.marquee .pc.pc-native:hover { transform: none; box-shadow: none; border-color: #536471; }
.marquee .pc-native .pc-av { width: 48px; height: 48px; box-shadow: none; background: #2f3336; }
.marquee .pc-native .pc-av-def { display: block; overflow: hidden; }
.marquee .pc-native .pc-av-def svg { display: block; width: 48px; height: 48px; }
.marquee .pc-native .pc-who b { display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 15px; color: #e7e9ea; }
.marquee .pc-native .pc-ver { color: #1d9bf0; font-size: 13px; flex: none; }
.marquee .pc-native .pc-who > span:not(.pc-stamp) { font-size: 15px; color: #71767b; }
.marquee .pc-x .pc-net { width: 24px; height: 24px; background: none; border-radius: 0; }
.marquee .pc-x .pc-net svg { width: 24px; height: 24px; fill: #e7e9ea; }
.marquee .prose .pc-native .pc-text, .marquee .pc-native .pc-text { margin: 12px 0 0; font-size: 17px; line-height: 1.35; font-weight: 400; color: #e7e9ea; }
.marquee .prose .pc-native .pc-text a, .marquee .pc-native .pc-text a, .marquee .pc-native .pc-at { color: #1d9bf0; }
.marquee .pc-x .pc-photo { border: 1px solid #2f3336; border-radius: 16px; }
.marquee .pc-x .pc-photo img { max-height: none; object-fit: cover; }
.marquee .pc-x .pc-len { left: auto; right: 10px; bottom: 10px; background: rgba(0, 0, 0, .75); color: #fff; font-family: inherit; font-size: 13px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
.marquee .pc-x .pc-play { background: rgba(29, 155, 240, .95); box-shadow: 0 0 0 4px rgba(255, 255, 255, .9); }
.marquee .pc-x .pc-play::after { border-left-color: #fff; }
.marquee .prose .pc-native .pc-meta, .marquee .pc-native .pc-meta { display: block; margin: 12px 0 0; padding: 0; border: 0; font-size: 15px; font-weight: 400; line-height: 1.3; color: #71767b; }
.marquee .pc-native .pc-meta time { color: #71767b; }
.marquee .prose .pc-x .pc-counts, .marquee .pc-x .pc-counts { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid #2f3336; font-size: 15px; font-weight: 700; color: #71767b; max-width: none; }
.marquee .pc-x .pc-n { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.marquee .pc-x .pc-g { display: inline-flex; width: 20px; height: 20px; color: #71767b; }
.marquee .pc-x .pc-g svg { width: 20px; height: 20px; }
.marquee .pc-x .pc-more-x { display: block; margin: 12px 0 0; font-size: 15px; color: #1d9bf0; text-decoration: none; }
.marquee .pc-x .pc-more { font-family: inherit; text-transform: none; font-size: 15px; color: #1d9bf0; }
.marquee .pc-x .pc-more:hover { color: #1d9bf0; text-decoration: underline; }
.marquee .pc-x .pc-more-x:hover { text-decoration: underline; }
.marquee .pc-x .pc-quote { border: 1px solid #2f3336; border-radius: 16px; color: #e7e9ea; }
.marquee .pc-x .pc-quote span { color: #71767b; }
/* YouTube's Shorts player: the 9:16 frame, the YouTube mark top left and "Shorts" top right, the title and the channel over the bottom, "Watch the Short" as the foot */
.marquee .pc.pc-short.pc-native { position: relative; width: 300px; max-width: 100%; aspect-ratio: 9 / 16; background: #000; box-shadow: inset 0 0 0 1px #2e2e2e; padding: 0; border: 0; border-radius: 12px; overflow: hidden; font-family: Roboto, Arial, sans-serif; }   /* the 9:16 frame holds even with no picture (QA on #516: a Short with none collapsed to 300x0) */
.marquee .pc-short.pc-native .pc-photo.pc-tall img { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.marquee .pc-short.pc-native .pc-head { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px 34px; background: linear-gradient(to top, rgba(0, 0, 0, .85) 60%, transparent); }
.marquee .pc-short.pc-native .pc-av { width: 36px; height: 36px; }
.marquee .pc-short.pc-native .pc-av-yt { background: #f00; }
.marquee .pc-short.pc-native .pc-who b { font-size: 14px; color: #fff; }
.marquee .pc-short.pc-native .pc-lbl { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 12px; color: #ddd; }
.marquee .pc-short.pc-native .pc-net { width: 28px; height: 28px; background: none; border-radius: 0; }
.marquee .pc-short.pc-native .pc-net svg { width: 24px; height: 24px; fill: #f00; }
.marquee .pc-short.pc-native .pc-photo.pc-tall { max-width: none; margin: 0; border: 0; }
.marquee .pc-short.pc-native .pc-shorts { left: auto; right: 12px; top: 12px; padding: 0; background: none; color: #fff; font-family: inherit; font-weight: 700; font-size: 15px; letter-spacing: 0; text-transform: none; }
.marquee .pc-short.pc-native .pc-play { background: rgba(0, 0, 0, .45); box-shadow: none; }
.marquee .prose .pc-short.pc-native .pc-title, .marquee .pc-short.pc-native .pc-title { position: absolute; left: 12px; right: 12px; bottom: 92px; z-index: 3; margin: 0; font-size: 15px; font-weight: 500; line-height: 1.3; color: #fff; text-shadow: 0 0 3px rgba(0, 0, 0, .7); }
.marquee .pc-short.pc-native .pc-head:has(.pc-stamp) ~ .pc-title { bottom: 122px; }   /* a stamped head is about 30px taller: the title moves up with it (QA on #516: the title ran into the channel name) */
.marquee .prose .pc-short.pc-native .pc-meta, .marquee .pc-short.pc-native .pc-meta { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 4; display: flex; justify-content: space-between; gap: 10px; margin: 0; font-size: 12px; color: #eee; }
.marquee .pc-short.pc-native .pc-open { margin: 0; font-family: inherit; text-transform: none; font-size: 12px; font-weight: 700; color: #fff; text-decoration: none; }
.marquee .pc-short.pc-native + .pc-credit { max-width: 300px; margin: 8px auto 0; }
/* YouTube's player: the title and the channel's picture over the frame's top, the red play button, "Watch on YouTube" with the mark over its foot */
.marquee .video-box.video-native { position: relative; max-width: 540px; margin: 0 auto; border-radius: 12px; overflow: hidden; background: #000; font-family: Roboto, Arial, sans-serif; }
.marquee .video-native .video-frame, .marquee .video-native .video-frame:hover { padding: 0; transform: none; }
.marquee .video-native .video-frame img { filter: none; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }   /* height: auto, or the img's height attribute wins over the ratio (QA on #516: 354x720) */
.marquee .video-native .video-top { text-align: left; position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px 30px; color: #fff; background: linear-gradient(rgba(0, 0, 0, .85), rgba(0, 0, 0, .6) 60%, transparent); pointer-events: none; }
.marquee .video-native .video-top .pc-av { flex: none; width: 40px; height: 40px; box-shadow: none; }
.marquee .video-native .video-head { font-size: 18px; font-weight: 500; line-height: 1.3; text-shadow: 0 0 2px rgba(0, 0, 0, .5); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.marquee .video-native .video-frame .play { width: 68px; height: 48px; margin: -24px 0 0 -34px; border-radius: 12px; background: #f00; box-shadow: none; }
.marquee .video-native .video-frame .play::after { left: 26px; top: 14px; border-left: 18px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.marquee .video-native .video-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 10px 12px; color: #fff; font-size: 13px; text-decoration: none; background: linear-gradient(to top, rgba(0, 0, 0, .8), transparent); }
.marquee .video-native .video-foot svg { width: 26px; height: 18px; fill: #f00; }

/* ---------- The Parlance Arcade (opens from the blinking dot) ---------- */
@font-face { font-family: "VT323"; src: url("fonts/vt323.woff2") format("woff2"); font-display: swap; }
html.arc-open { overflow: hidden; }
.arc[hidden] { display: none; }
.arc { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.86); backdrop-filter: blur(4px);
  font-family: "VT323", ui-monospace, Menlo, monospace; animation: arc-in 280ms var(--p-motion-ease) both; }
@keyframes arc-in { from { opacity: 0; transform: scale(.98); } }
.arc-tv { width: min(100%, 860px, calc((100svh - 32px - 120px) * 4 / 3)); display: grid; gap: 14px; background: linear-gradient(#1b1b1d, #0d0d0e);
  border-radius: 26px; padding: clamp(14px, 2.4vw, 26px); box-shadow: 0 0 0 1px #2a2a2a, 0 30px 80px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06); }
.arc-screen { position: relative; aspect-ratio: 4 / 3; border-radius: 18px / 22px; overflow: hidden; background: #000;
  box-shadow: inset 0 0 0 3px #000, 0 0 0 6px #070707, 0 0 40px rgba(230,27,33,.18); }
.arc-screen canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; cursor: crosshair; }
.arc-fx { position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px),
              radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(0,0,0,.65) 100%);
  box-shadow: inset 0 0 60px rgba(0,0,0,.6); animation: flicker 4s steps(2) infinite; }
@keyframes flicker { 50% { opacity: .92; } }
.arc-osd { position: absolute; inset: 10px 14px; pointer-events: none; color: #fff; font-size: clamp(16px, 2.6vw, 26px); text-shadow: 2px 0 rgba(230,27,33,.7), -1px 0 rgba(80,160,255,.5); }
.arc-osd span { position: absolute; }
.osd-l { left: 0; top: 0; } .osd-r { right: 0; top: 0; } .osd-b { left: 0; bottom: 0; }
.arc-deck { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 14px 18px; color: #bdbdbd; }
.arc-name { font-size: 22px; letter-spacing: .12em; white-space: nowrap; }
.arc-name .arc-tc { display: block; margin-top: 2px; }
.arc-tc { font-size: 18px; letter-spacing: .08em; color: #7CFF9B; text-shadow: 0 0 8px rgba(124,255,155,.45); font-variant-numeric: tabular-nums; }
.arc-osd[hidden] { display: none; } .arc-name b { color: var(--red); font-weight: 400; animation: rec 1.4s steps(1, end) infinite; }
.arc button { font: inherit; font-size: 20px; color: #f5f5f1; background: #2a2a2c; border: 0; border-radius: 6px; padding: 6px 12px; cursor: pointer;
  box-shadow: 0 3px 0 #000, inset 0 1px 0 rgba(255,255,255,.08); touch-action: manipulation; }
.arc button:active { transform: translateY(2px); box-shadow: 0 1px 0 #000; }
.arc button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.arc-pad { display: grid; grid-template-columns: repeat(3, 40px); grid-template-rows: repeat(3, 40px); touch-action: none;
  filter: drop-shadow(0 3px 0 #000); user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.arc-pad button { padding: 0; font-size: 15px; color: #8d8d90; border-radius: 0; box-shadow: none; }
.arc-pad button:active { transform: none; box-shadow: none; }
.arc-pad [data-k="up"] { grid-area: 1 / 2; border-radius: 8px 8px 0 0; } .arc-pad [data-k="down"] { grid-area: 3 / 2; border-radius: 0 0 8px 8px; }
.arc-pad [data-k="left"] { grid-area: 2 / 1; border-radius: 8px 0 0 8px; } .arc-pad [data-k="right"] { grid-area: 2 / 3; border-radius: 0 8px 8px 0; }
.arc-pad .hub { grid-area: 2 / 2; background: radial-gradient(circle, #1f1f21 0 28%, #2a2a2c 30%); }
.arc-pad button.on { background: #45454a; color: var(--red); }
.arc-ab { display: flex; gap: 10px; align-items: flex-end; padding-top: 14px; }
.arc-ab button[data-k="a"] { margin-bottom: 14px; }   /* A sits up and to the right of B, like a handheld */
.arc-ab button { width: 48px; height: 48px; border-radius: 50%; padding: 0; font-size: 22px; }
.arc-ab button[data-k="a"] { background: var(--red); }
.arc-sys { display: flex; gap: 8px; }
.arc-sys button { font-size: 17px; background: #18181a; color: #bdbdbd; }
@media (max-width: 960px) { .mq-brand { display: none; } }
@media (max-width: 640px) {
  .arc { padding: 10px; } .arc-tv { border-radius: 18px; }
  .arc-deck { grid-template-columns: auto 1fr auto; } .arc-name { grid-column: 1 / -1; text-align: center; font-size: 18px; }
  .arc-deck { gap: 12px 10px; }
  .arc-pad { grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(3, 50px); }
  .arc-pad button { font-size: 18px; }
  .arc-ab { gap: 14px; padding-top: 22px; } .arc-ab button { width: 62px; height: 62px; font-size: 24px; } .arc-ab button[data-k="a"] { margin-bottom: 22px; }
  .arc-sys { grid-column: 1 / -1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .arc, .arc-fx, .mq-brand .wordmark path:last-of-type, .arc-name b { animation: none; }
  .marquee .mbar .wordmark path:last-of-type { animation: none; } .dot-door.nudge::before { animation: none; } }

/* ---------- The archive (Eric, 2026-10-03, after densediscovery.com) ----------
   Left: the archive panel (the wordmark, one line, Subscribe, every Daily Brief, the open one in red). Right: the
   issue on the reading page. On a phone the panel is a drawer the bar pulls out (site.js), and the issue gets the
   full screen. */
.archive-panel { padding: 24px 22px 36px; }
.ap-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.archive-panel .mq-brand { position: relative; top: auto; right: auto; z-index: auto; display: inline-block; }
.archive-panel .mq-brand .wordmark { height: 36px; filter: none; }
.ap-close { display: none; font: inherit; font-family: var(--anton); font-size: 17px; text-transform: uppercase; color: #fff; background: none; border: 1px solid #444; border-radius: 4px;
  padding: 8px 12px 6px; cursor: pointer; }
.ap-line { margin: 18px 0 0; font-size: 15px; line-height: 1.5; font-weight: 500; color: #A3A3A3; max-width: 32ch; }
.ap-sub { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 18px; line-height: 1; text-transform: uppercase; letter-spacing: .03em;
  color: #fff; background: var(--red); text-decoration: none; padding: 11px 16px 9px; border-radius: 4px; }
.ap-sub:hover, .ap-sub:focus-visible { background: var(--deep); }
.ap-sub.is-soon, .ap-sub.is-soon:hover { gap: 0; background: transparent; box-shadow: inset 0 0 0 1px #444; cursor: default; }
.archive-panel .rail-head { margin-top: 26px; }
/* Each entry is one stacked unit (Eric, 2026-10-03: "it looks loose"): a small date kicker over the title in Anton,
   tight together and flush left, hairlines between entries, the open issue a solid red block. */
.archive-panel .index { margin-top: 10px; }
.archive-panel .index li + li { border-top: 1px solid #1C1C1C; }
.archive-panel .index li a { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 13px 14px 12px; margin: 0 -14px;
  border-radius: 4px; text-decoration: none; }
.archive-panel .index time { display: block; border: 0; padding: 0; margin: 0; background: none; font-family: "DM Sans", system-ui, sans-serif;
  font-size: 11px; line-height: 1; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #A3A3A3; font-variant-numeric: tabular-nums; }
.archive-panel .index .sep { display: none; }
.archive-panel .index .t { display: block; padding: 0; margin: 0; font-family: var(--anton); font-size: 22px; line-height: 1.04; letter-spacing: .01em;
  text-transform: uppercase; color: #fff; background: none; transform: none; box-shadow: none; text-wrap: balance; overflow-wrap: break-word; }
.archive-panel .index li a:hover, .archive-panel .index li a:focus-visible { background: #141414; }
.archive-panel .index li a:hover .t, .archive-panel .index li a:focus-visible .t { background: none; color: #fff; transform: none; }
.archive-panel .index li a:hover time, .archive-panel .index li a:focus-visible time { background: none; color: #D6D6D6; }
.archive-panel .index li a[aria-current="page"] { background: var(--red); }
.archive-panel .index li:has(> a[aria-current="page"]) + li { border-top-color: transparent; }
.archive-panel .index li a[aria-current="page"] .t, .archive-panel .index li a[aria-current="page"] time,
.archive-panel .index li a[aria-current="page"] .sep { background: none; color: #fff; box-shadow: none; transform: none; border: 0; }
.archive-panel .index li a[aria-current="page"] time { color: rgba(255, 255, 255, .82); }
.drawer-scrim { display: none; }
@media (max-width: 960px) {
  .archive .rail.archive-panel { position: fixed; z-index: 150; top: 0; left: 0; bottom: 0; order: 0; width: min(88vw, 380px); height: 100%; height: 100dvh;
    overflow-y: auto; overscroll-behavior: contain; border-top: 0; border-right: 1px solid var(--line); padding: 18px 20px 36px;
    transform: translateX(-102%); visibility: hidden; transition: transform 280ms var(--p-motion-ease), visibility 0s linear 280ms; }
  html.drawer-open .archive .rail.archive-panel { transform: none; visibility: visible; transition: transform 280ms var(--p-motion-ease), visibility 0s; }
  .archive .ap-close { display: inline-flex; gap: 6px; align-items: center; }
  .archive .archive-panel .mq-brand { display: inline-block; }
  .archive .drawer-scrim { display: block; position: fixed; inset: 0; z-index: 140; background: rgba(0, 0, 0, .66); opacity: 0; pointer-events: none;
    transition: opacity 280ms; }
  html.drawer-open .archive .drawer-scrim { opacity: 1; pointer-events: auto; }
  html.drawer-open { overflow: hidden; }
  .marquee .mbar button.mbar-link { font: inherit; font-family: var(--anton); font-size: 16px; text-transform: uppercase; color: #fff; background: none; cursor: pointer; }
}
@media (prefers-reduced-motion: reduce) { .archive .rail.archive-panel, .archive .drawer-scrim { transition: none; } }

/* ---------- Buttons: the words sit dead-center (Eric, 2026-10-05: "we look for perfection around here") ----------
   Each button's top and bottom padding is set so the caps' middle lands on the button's middle (measured in Chromium,
   within a quarter pixel at 390 and 1280; test_arrows_sit_dead_center_on_the_caps), and the arrow sits on the caps'
   middle (brand/web/fonts.css). */
.signup button[type="submit"], .signup .soon-btn { padding-top: 6.5px; padding-bottom: 5.5px; }
.latest-btn { padding-top: 11.25px; padding-bottom: 9.75px; }
.archive-btn, .ap-sub { padding-top: 10.5px; padding-bottom: 9.5px; }
.ap-close { padding-top: 7px; padding-bottom: 7px; }
@media (max-width: 960px) { .marquee .mbar-link { padding-top: 4.3px; padding-bottom: 4.7px; } }

/* ---------- The footer: a sign-off, not a second masthead (Eric, 2026-10-05: "way too big") ----------
   A small wordmark, no tagline, the social glyphs small and borderless inside full 44px tap targets, the © colophon
   opener; one short row on a desktop, two on a phone. */
.foot { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 20px; padding: 10px var(--pad); }
.foot-logo img { height: 20px; }
.foot .social { gap: 0; justify-self: end; margin-right: -10px; }
.foot .social a { width: 44px; height: 44px; border: 0; background: none; }
.foot .social a:hover, .foot .social a:focus-visible { background: none; transform: none; }
.foot .social a:hover svg, .foot .social a:focus-visible svg { fill: var(--red); }
.foot .social svg { width: 15px; height: 15px; fill: #A3A3A3; transition: fill 140ms; }
.foot .copy { font-size: 13px; padding: 4px 0; color: #A3A3A3; border-bottom-color: rgba(255, 255, 255, .25); }
.foot .copy:hover { color: var(--red); }
/* Terms and Privacy beside the © (Eric, 2026-10-11 1:50pm): small, the same gray, the © unchanged */
.foot-right { display: flex; align-items: center; gap: 16px; justify-self: end; }
.foot-legal { display: flex; gap: 14px; }
.foot-legal a { font-size: 13px; color: #A3A3A3; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .25); padding: 4px 0; }
.foot-legal a:hover, .foot-legal a:focus-visible { color: var(--red); }
/* under the email box (Eric, 2026-10-11 1:40pm): one quiet line, the two links underlined; gone once subscribed */
.signup .agree { margin: 10px 0 0; font-size: 12.5px; line-height: 1.4; color: #8a8a8a; }
.signup .agree a { color: #bdbdbd; text-decoration: underline; text-underline-offset: 2px; }
.signup .agree a:hover, .signup .agree a:focus-visible { color: #fff; }
.signup.is-done .agree { display: none; }
/* /privacy and /terms: a plain text page in Marquee */
.legal-page, .legal-page .legal { background: #000; color: #fff; }
.legal { padding: clamp(28px, 6vh, 72px) var(--pad) clamp(48px, 9vh, 110px); }
.legal-in { max-width: 680px; margin: 0 auto; }
.legal .legal-stk, .legal .legal-stk * { color: #fff; --cream: #fff; }   /* pure white on the red sticker (Eric, 2026-10-11: "the parlance at the top is gray") */
.legal h1 { margin: 10px 0 6px; font-size: clamp(44px, 9vw, 84px); line-height: .92; }
.legal-updated { margin: 0 0 24px; font-size: 14px; color: #A3A3A3; }
.legal h2 { margin: 34px 0 10px; font-size: clamp(24px, 3vw, 30px); line-height: 1.02; text-transform: uppercase; color: #fff; }
.legal p, .legal li { font-size: 17px; line-height: 1.55; color: #d9d9d9; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin: 6px 0; }
.legal strong { color: #fff; }
.legal a { color: #fff; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }
.legal a:hover, .legal a:focus-visible { color: var(--red); }
.legal-back { display: inline-block; margin-top: 30px; min-height: 44px; font-weight: 700; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; color: #fff; }
@media (max-width: 860px) {
  .foot { grid-template-columns: minmax(0, 1fr) auto; justify-items: stretch; gap: 0 16px; padding: 12px var(--pad) 6px; }
  .foot-logo { grid-column: 1; grid-row: 1; justify-self: start; }
  .foot .foot-right { grid-column: 2; grid-row: 1; justify-self: end; gap: 12px; }
  .foot-legal { gap: 10px; }
  .foot .social { grid-column: 1 / -1; grid-row: 2; justify-self: start; margin: 2px 0 0 -14px; }
}

/* ---------- The panel behind the ©: "Easter eggs to explore" (Eric, 2026-10-05) ----------
   One heading, the eggs that fire on the live site, and a small plain list of photo credits where a page shows a photo. */
.colophon h2 { font-size: clamp(34px, 9vw, 48px); margin: 0 0 16px; }
.colophon .col-eggs li + li { margin-top: 6px; }
.colophon h3.col-credits-h { margin: 22px 0 6px; font-size: 14px; letter-spacing: .04em; color: #A3A3A3; }
.colophon .col-credits li { font-size: 12px; font-weight: 400; line-height: 1.4; color: #A3A3A3; }

/* The reader poll's page (newsletter/poll.md): Marquee's black with white words; the box is raised like the sign-up's */
.poll-page, .poll-page .poll { background: #000; color: #fff; }
.poll-page .poll-date, .poll-page .poll-fine { color: #a3a3a3; }
.poll-page .poll-note textarea { background: var(--raised); border: 1px solid #444; color: #fff; }
.poll-page .poll-note textarea:focus { border-color: #fff; }
.poll-page .poll-note textarea::placeholder { color: #8a8a8a; opacity: 1; }
.poll-page .poll-note button { color: #fff; }
.poll-page .poll-note button:hover { background: var(--deep); }
.poll-page .poll-sent { background: var(--raised); border: 1px solid #444; color: #fff; }
.poll-page .poll-error { color: #fff; }
/* the unsubscribe page's "why?" (site.css .unsub-why): quiet hairline buttons like the poll's box, white on hover */
.unsub-why button { border-color: #444; color: #fff; }
.unsub-why button:hover, .unsub-why button[aria-expanded="true"] { border-color: #fff; background: var(--raised); }
.unsub-why button:focus-visible { outline-color: #fff; }
.unsub-other textarea { background: var(--raised); border-color: #444; color: #fff; }
.unsub-other textarea:focus { border-color: #fff; }
.unsub-other textarea::placeholder { color: #8a8a8a; opacity: 1; }

/* ---------- The top tabs (Eric, 2026-10-05): The Brief and The Talk, on every page while The Talk is public ----------
   A slim, calm bar above everything, centered (Eric, 2026-10-06): two tabs, the open one white with a red underline; The Talk carries its live dot.
   site/build.py top_tabs / add_top_tabs. */
.top-tabs { position: relative; z-index: 95; display: flex; justify-content: center; gap: 4px; height: 44px; padding: 0 16px; background: #000;
  border-bottom: 1px solid var(--line); }
@media (min-width: 700px) { .top-tabs { padding: 0 clamp(24px, 4vw, 56px); } }
.tt { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 10px; border-bottom: 2px solid transparent;
  color: #A3A3A3; font: 600 14px/1 var(--sans, sans-serif); letter-spacing: .02em; text-decoration: none; }
.tt:hover { color: #fff; }
.tt[aria-current] { color: #fff; border-bottom-color: var(--red); }
.tt:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.tt-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
body:has(.top-tabs) .mq-brand { top: calc(7px + env(safe-area-inset-top, 0px)); }
body:has(.top-tabs) .mq-brand .wordmark { height: 28px; }

/* ---------- One screen, no scroll (Eric, 2026-10-06: "I don't want to have to scroll whenever I open up the site") ----------
   On a desktop or a tablet (700px and wider) the front page, the poll's page and the 404 are exactly one screen: the
   body is a column of 100svh, the top tabs, the top bar (under 960px) and the footer keep their height, and the middle
   takes what is left (min-height: 0, so it never pushes the footer down). The hero sizes itself to that space: it is a
   size container, so the headline, the phone and the gaps scale with its height (cqh) as well as its width, and
   nothing is cut off. Phones (under 700px): the front page is one screen too (below); the poll's page and the 404
   stack and scroll. Issue pages and /live are not .home pages.
   test_browser.py OneScreenTest measures it at 1280x800, 1440x900, 1366x768, 1920x1080, 1024x768 and 768x1024. */
@media (min-width: 700px) {
  body.home { display: flex; flex-direction: column; height: 100vh; height: 100svh; }
  body.home > .top-tabs, body.home > .mbar, body.home > .foot { flex: none; }
  body.home > .frame { flex: 1 1 0; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  body.home > .frame.solo { display: flex; flex-direction: column; }
  body.home .frame > .stage { min-height: 0; }
  body.home .frame.solo > .stage { flex: 1 1 0; }
  body.home .frame.solo > .mq-home { display: flex; flex-direction: column; }

  /* the front page: the hero fills the stage and scales to its height */
  .mq-home > .hero { flex: 1 1 0; min-height: 0; container-type: size;
    padding-block: clamp(16px, 4.5svh, 64px); row-gap: clamp(16px, 3svh, 40px); }
  .hero-title { --ht: min(4.7cqw, 9.5cqh, 80px); }
  .mq-brand.hero-brand { margin-bottom: clamp(14px, 4.5cqh, 56px); }
  .mq-brand.hero-brand .wordmark { height: clamp(28px, 5cqh, 40px); }
  .hero-line { margin-top: clamp(10px, 2.6cqh, 26px); font-size: clamp(15px, min(1.7cqw, 2.9cqh), 21px); }
  .hero .signup { margin-top: clamp(14px, 3.6cqh, 34px); }
  .hero-plus { margin-top: clamp(8px, 1.8cqh, 14px); font-size: clamp(14px, min(1.4cqw, 2.4cqh), 17px); }
  .hero-side { gap: clamp(14px, 3.6cqh, 40px); }
  /* the phone: as wide as its column allows, and never taller than the hero minus the archive button, the gap and
     the tilt's few pixels */
  .hero-phone { --fw: clamp(150px, min(26cqw, (100cqh - 40px - clamp(14px, 3.6cqh, 40px) - 24px) * 300 / 610), 300px); }   /* the body is 2.03 widths tall, as 300/610 */

  /* the 404: the archive panel sits beside the page and scrolls inside itself */
  body.lost .frame { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); }
  body.lost .rail { position: relative; order: 0; height: auto; align-self: stretch; overflow-y: auto; border-top: 0; border-right: 1px solid var(--line); }
  body.lost .cover-home { min-height: 0; height: 100%; justify-content: space-between; }

  /* the poll's page: its one column, scaled to the screen's height */
  .poll-page .poll { min-height: 0; padding-block: clamp(16px, 5svh, 72px) clamp(16px, 4svh, 56px); }
  .poll-page .poll h1 { font-size: clamp(56px, 12svh, 120px); }
  .poll-page .poll-note { margin-top: clamp(14px, 3.4svh, 30px); }
  .poll-page .poll-note textarea { min-height: clamp(72px, 13svh, 120px); }
  .poll-page .poll-back { margin-top: clamp(12px, 3.4svh, 34px); }
}
/* a short screen (a laptop at 640 to 700 tall): the poll's note moves beside the thanks, so the page still fits */
@media (min-width: 700px) and (max-height: 700px) {
  .poll-page .poll { align-items: center; }
  .poll-page .poll-in { width: min(100%, 980px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 56px);
    align-content: center; grid-auto-flow: row dense; }
  .poll-page .poll-in > * { grid-column: 1; }
  .poll-page .poll-in > .poll-note { grid-column: 2; grid-row: 1 / span 6; margin-top: 0; align-self: center; }
}
/* phones (under 700px), the front page: one screen, no scroll (Eric, 2026-10-08: "On mobile, this is all that needs to
   show... we don't gotta scroll"). The tabs, the top bar, the headline, the line and the sign-up (Sign-ups open soon), the
   footer at the bottom; the column is 100svh like the desktop's. The phone with today's Brief is no longer a second
   screen: it floats small in the hero's top-right corner, tilted, beside the headline's three short first lines
   ("A FIVE-MINUTE / READ THAT / MAKES YOU"), never over a word; the copy gives it a little room above the headline (--lift). The
   copy and the phone share one grid cell, centered in the hero, so the phone always rides with the headline. The
   archive button gives way to the top bar's own archive link. Only the front page (.mq-home): the poll's page and the
   404 stack as before. test_browser.py PhoneOneScreenTest measures it at 390x844, 375x667 and 360x740. */
@media (max-width: 699px) {
  body.home:has(.mq-home) { display: flex; flex-direction: column; height: 100vh; height: 100svh; }
  body.home:has(.mq-home) > .top-tabs, body.home:has(.mq-home) > .mbar, body.home:has(.mq-home) > .foot { flex: none; }
  body.home:has(.mq-home) > .frame.solo { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
  body.home .frame.solo > .mq-home { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
  .mq-home > .hero { flex: 1 1 0; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero";
    align-content: center; gap: 0; padding: clamp(8px, 2.5svh, 28px) 20px; }
  .mq-home > .hero > .hero-copy, .mq-home > .hero > .hero-side { grid-area: hero; }
  /* --pw the phone's width; the lift is the tilted phone's height (about 2.14 widths) less the headline's first three
     short lines ("A FIVE-MINUTE / READ THAT / MAKES YOU": 2.4 type sizes, to just above the fourth line's text box), plus a
     few pixels of air. Five lines since 2026-10-09 ("ship these"); the type stays at 6.4svh on short phones, since the
     line under it is three sentences now. */
  .mq-home .hero { --ht: min(13.8cqw, 6.2svh); --pw: min(18cqw, 92px); }   /* 6.2svh (was 6.4): room for the agree line on a 320x568 phone (2026-10-11) */
  /* The column may grow (Eric via the Chief, 2026-10-11 7:40pm, on the six-line headline: "the phone page is allowed to
     run past one screen"): 100svh is its minimum, not its height, as in the subscribed state below, and the hero keeps
     no block padding of its own on a phone (its content is centered in the column when there is room, so the padding
     only ever added to the overflow). Every phone size from 360x640 up is one screen with the sign-up closed, from 375x667 up with it open;
     320x568 runs a few px past the fold closed and about 45px open (the agree line), 360x640 about 10px open; nothing clipped. */
  body.home:has(.mq-home) { height: auto; min-height: 100vh; min-height: 100svh; }
  body.home:has(.mq-home) > .frame.solo, body.home .frame.solo > .mq-home, .mq-home > .hero { flex-basis: auto; }
  .mq-home > .hero { padding-block: 0; }
  .mq-home .hero-copy { position: relative; z-index: 1; padding-top: max(0px, calc(2.14 * var(--pw) + 8px - 2.4 * var(--ht))); }
  .mq-home .hero-title { --ht: inherit; }
  .mq-home .hero-line { margin-top: clamp(8px, 2svh, 18px); font-size: clamp(15px, 2.3svh, 17px); }
  .mq-home .hero .signup { margin-top: clamp(10px, 2.6svh, 24px); }
  .mq-home .hero .signup .agree { margin-top: clamp(6px, 1.4svh, 10px); font-size: clamp(11px, 2svh, 12.5px); line-height: 1.3; }
  .mq-home .hero-side { position: relative; z-index: 2;  /* over the copy's empty top corner, so a tap reaches the phone */ align-self: start; justify-self: end; display: block; margin-right: 4px; padding-top: 4px;  /* the tilted phone's corner pokes 3px above its box: room for it inside the hero when the column is full (320x568, 2026-10-11 7:40pm) */ }
  .mq-home .hero-side .archive-btn { display: none; }
  /* The red glow sits behind the phone, not the headline (Eric, 2026-10-08: "put it smaller and put it behind the
     phone... smaller, less"). .hero-side is positioned here, so the glow's inset is measured from the phone's box: its
     footprint plus a soft halo (six tenths of a phone width each side, four tenths above and below), behind the phone
     in .hero-side's own stack (z-index -1), dimmer than the desktop's (.38 at the center, gone at the edge; past three
     quarters of the way out it is under a tenth red, so the headline's lines beside and under the phone stay on plain
     black). OneScreenTest.test_the_glow_sits_behind_the_phone_on_a_phone measures it at every phone size. */
  .mq-home .hero-side > .hero-glow { inset: calc(-.4 * var(--pw)) calc(-.6 * var(--pw));
    background: radial-gradient(closest-side at 50% 50%, rgba(230, 27, 33, .38), rgba(140, 10, 20, .14) 55%, transparent 100%); }
  .mq-home .hero-phone { --fw: var(--pw); box-shadow: inset 0 0 0 1px #3c3c3c, 0 0 0 1px #000, 0 14px 30px rgba(0, 0, 0, .7);
    transform: rotate(7deg); animation-name: phone-float; }   /* the same phone at 63 to 92px: its radii, padding, pill and buttons scale with --fw */
  .mq-home a.hero-phone:hover { transform: rotate(4deg) translateY(-2px); }
  body.home:has(.mq-home) > .foot { padding-top: 8px; padding-bottom: 2px; }
  /* Once subscribed (QA, 2026-10-09, on #321: at 320x568 "Check your inbox" sat behind the footer and the headline's
     top lines went under the bar; 360x640 and 375x667 overlapped too): the confirmation is three times the form's
     height, and the one-screen column, fixed at 100svh with the hero centered in it, spilled it both ways and clipped
     it. So the line steps aside (as the old cover's deck did) and the column may grow: 100svh is its minimum, not its
     height, so a phone that still can't fit the confirmation scrolls cleanly, the footer after it, nothing cut off.
     The sticker scales to the column so it never runs past the right edge. PhoneOneScreenTest measures it. */
  body.home:has(.mq-home form.signup.is-done) { height: auto; min-height: 100vh; min-height: 100svh; }
  body.home:has(.mq-home form.signup.is-done) > .frame.solo, body.home:has(form.signup.is-done) .frame.solo > .mq-home,
  .mq-home > .hero:has(form.signup.is-done) { flex-basis: auto; }  /* the column's height comes from the content, not 100svh */
  .mq-home .hero:has(form.signup.is-done) .hero-line { display: none; }
  .mq-home .hero .done-stk { font-size: clamp(13px, 5.4cqw, 22px); }
}
@keyframes phone-float { from { opacity: 0; transform: translateY(12px) rotate(12deg); } to { opacity: 1; transform: rotate(7deg); } }
/* tablets (700 to 860px): the phone sits beside the copy, as on a desktop; the headline keeps its five phone lines */
@media (min-width: 700px) and (max-width: 860px) {
  .mq-home > .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); padding-inline: clamp(24px, 4vw, 40px); column-gap: 24px; }
  .hero-glow { background: radial-gradient(42cqw 46cqw at 78% 55%, rgba(230, 27, 33, .55), rgba(140, 10, 20, .25) 50%, transparent 75%); }
  .hero-title { --ht: min(7.8cqw, 9.5cqh, 76px); }
  .hero-phone { --fw: clamp(150px, min(36cqw, (100cqh - 40px - clamp(14px, 3.6cqh, 40px) - 24px) * 300 / 610), 300px); }
}

/* the 404 on a phone: the panel is full width under the page, so its right edge (the desktop rail's) comes off
   (QA, 2026-10-11: a stray line at 390) */
@media (max-width: 699px) { body.lost .rail { border-right: 0; } }

/* Your Call (brief/prd/your-call.md; site/build.py call_page, site/src/call.js): the poll page's column, a question,
   two big buttons, and where everyone landed. One state at a time: asking, then voted. */
.call-page .call .call-q { font-size: clamp(34px, 9vw, 60px); line-height: .94; margin-top: 2px; text-wrap: balance; }
.call-page .call-prompt { margin: 18px 0 14px; font-size: 18px; font-weight: 600; color: var(--mute); }
.call-page .call-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.call-page .call-btn { min-height: 64px; padding: 12px 10px 8px; border: 2px solid #fff; border-radius: 0; background: #000; color: #fff; font-size: clamp(20px, 5.4vw, 28px); line-height: 1; cursor: pointer; text-transform: uppercase; transition: background 140ms, border-color 140ms; }
.call-page .call-btn:hover, .call-page .call-btn:focus-visible { background: var(--red); border-color: var(--red); outline: none; }
.call-page .call[data-pre="a"] .call-btn[data-choice="a"], .call-page .call[data-pre="b"] .call-btn[data-choice="b"] { border-color: var(--red); }
.call-page .call-error, .call-page .call-nocount, .call-page .call-nojs { display: none; margin: 12px 0 0; font-size: 15px; line-height: 1.45; font-weight: 600; }
.call-page .call.is-error .call-error, .call-page .call.is-nocount .call-nocount { display: block; }
.call-page .call-nojs { display: block; color: var(--mute); }
.call-page .call.is-sending .call-btn { opacity: .6; cursor: progress; }
.call-page .call-result { display: none; margin-top: 20px; }
.call-page .call.is-voted .call-result { display: block; }
.call-page .call.is-voted .call-ask { display: none; }
.call-page .call-picked { display: inline-block; margin: 0 0 10px; padding: 6px 10px 4px; background: var(--red); color: #fff; font-family: Anton, Impact, sans-serif; font-size: 16px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.call-page .call-with { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 700; outline: none; }
.call-page .call-rows { display: none; margin-top: 16px; }
.call-page .call.has-split .call-rows { display: block; }
.call-page .call-row + .call-row { margin-top: 12px; }
.call-page .call-rowh { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.call-page .call-pct { font-family: Anton, Impact, sans-serif; font-size: 22px; line-height: 1; }
.call-page .call-track { height: 14px; background: #2e2e2e; }
.call-page .call-fill { display: block; height: 100%; width: 0; background: #a3a3a3; transition: width 380ms ease; }
.call-page .call-row[data-mine="1"] .call-fill { background: var(--red); }
.call-page .call-count { margin: 12px 0 0; font-size: 15px; color: var(--mute); }
.call-page .call-take { margin: 16px 0 0; font-size: 18px; line-height: 1.45; font-weight: 500; }
.call-page .call-actions { display: grid; gap: 10px; margin-top: 22px; }
.call-page .call-act { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 14px; border: 2px solid #fff; background: #000; color: #fff; font: inherit; font-size: 17px; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; }
.call-page .call-act:hover, .call-page .call-act:focus-visible { background: #1f1f1f; outline: none; }
.call-page .call-get { background: var(--red); border-color: var(--red); }
.call-page .call-get:hover, .call-page .call-get:focus-visible { background: var(--deep); border-color: var(--deep); }
@media (max-width: 359px) { .call-page .call-btns { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .call-page .call-fill { transition: none; } }
/* Your Call's results run longer than the poll's thanks: on a desktop the page scrolls like any page instead of being
   fitted to one screen (the one-screen rule above is for the front page, the poll and the 404) */
body.call-page > .frame, body.call-page > .frame.solo > .stage.call { flex: 1 0 auto; min-height: auto; }
body.call-page.home { height: auto; min-height: 100svh; overflow: visible; }