/* Nonhuman Interest — Carbon Copy (CEO/NI-DESIGN-LANGUAGE-2026-10-06.md §3–§6). Holding stage.
   Two voices: serif = words, mono = facts about them. The Marker is used in two places
   only: the pick tag and "Joining the waitlist is free." (UI spec §4).
   Fonts are self-hosted, SIL OFL 1.1 (licences beside the files). IBM Plex Mono is IBM's own
   Latin-1 split, served unmodified. */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/newsreader-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/IBMPlexMono-Regular-Latin1.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/IBMPlexMono-SemiBold-Latin1.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

:root {
  --paper: #F3F0E7;
  --sheet: #FAF8F2;
  --ink: #161513;
  --ink-2: #3D3A35;
  --ink-3: #625D54;
  --rule: #D8D2C4;
  --mark: #F2D64B;
  --serif: "Newsreader", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.2, .7, 0, 1);
  --gutter: 16px;
}
/* Carbon (paper) is the default on every device (KP 8 Oct 19:50); the device's own dark setting is
   not followed. Night applies only when the reader picks it (assets/theme.js sets data-theme). The
   Marker keeps its colour at night. */
:root[data-theme="night"] {
  --paper: #161513;
  --sheet: #1E1C19;
  --ink: #ECE8DE;
  --ink-2: #CFC9BC;
  --ink-3: #A39D91;
  --rule: #3A3631;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 720px) { body { font-size: 18px; } :root { --gutter: 32px; } }

.wrap { width: 100%; max-width: 44rem; margin: 0 auto; padding: 0 var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -100px; display: inline-flex; align-items: center; min-height: 44px; padding: 12px 14px; background: var(--ink); color: var(--paper); font: 600 13px/1 var(--mono); z-index: 2; }
.skip:focus { top: 8px; }
[hidden] { display: none !important; }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

/* Preview builds only (never a public page): says so, and boxes what is still to be filled in. */
.preview-bar { margin: 0; padding: 8px var(--gutter); border-bottom: 1px solid var(--rule); font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-align: center; color: var(--ink-3); }
.pending { font: 400 max(11px, .78em)/1.3 var(--mono); padding: 1px 5px; border: 1px dashed var(--ink-3); border-radius: 2px; color: var(--ink-2); white-space: normal; }

/* Masthead: the wordmark and its caret, over a double rule. The caret is a text cursor: a thin ink bar
   (never the Marker), three blinks on load, then it rests solid. Reduced motion: solid from the start. */
.masthead .wrap { padding-top: 18px; }
.mast-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* The drawing sits inside its ground with 19% of air on the left; pull the box left by that much so
   the N, not the ground, lines up with the rule and the headline. */
.mark { flex: none; width: 1.6em; height: 1.6em; margin: 0 .4em 0 -.3em; }
.mark-ink, :root[data-theme="night"] .mark-paper { display: none; }
:root[data-theme="night"] .mark-ink { display: block; }
.theme-toggle { flex: none; display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 -14px 6px 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
html.js .theme-toggle { display: inline-flex; }
.theme-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.theme-icon { width: 20px; height: 20px; background: currentColor; -webkit-mask: url("/assets/icon-moon.svg") center / 20px 20px no-repeat; mask: url("/assets/icon-moon.svg") center / 20px 20px no-repeat; }
:root[data-theme="night"] .theme-icon { -webkit-mask-image: url("/assets/icon-sun.svg"); mask-image: url("/assets/icon-sun.svg"); }
/* The theme change fades; the first paint never does (theme.js adds .ready two frames after load). */
html.ready body { transition: background-color .3s, color .3s; }
@media (prefers-reduced-motion: reduce) { html.ready body { transition: none; } }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; padding-bottom: 6px; font-weight: 600; font-size: 20px; line-height: 1; letter-spacing: -.02em; text-decoration: none; }
.masthead .wrap::after { content: ""; display: block; border-bottom: 3px double var(--ink); }
.caret { flex: none; display: inline-block; width: max(2px, .11em); height: 1.05em; margin-left: .14em; background: var(--ink); animation: caret 1s steps(1, end) 3; }
@keyframes caret { 50% { opacity: 0; } }

/* Holding page: the headline, its slug and the waitlist, centred in the space under the masthead.
   A little more air below than above, so the block rests just over the middle. */
.hold { flex: 1; display: flex; align-items: flex-start; padding: 28px 0 36px; }
/* Centred while it fits; once the page is taller than the screen it starts at the top and scrolls (nothing clips). */
.hold > .wrap { margin-block: auto; }
@media (min-width: 960px) {
  .hold { padding: 48px 0 64px; }
  /* The masthead is one width and one size on every page, so the mark does not move between pages. */
  .page-hold .wrap, .masthead .wrap { max-width: 60rem; }
  .wordmark { font-size: 24px; }
  .page-hold .hold h1 { font-size: 7.5rem; }
}
.hold .slug a { display: inline-flex; align-items: center; min-height: 44px; }
.hold h1 { margin: 0; font-weight: 600; font-size: clamp(3rem, 13vw, 6rem); line-height: 1.02; letter-spacing: -.025em; text-wrap: balance; }
/* Message pages (waitlist replies, 404): a modest heading at every width, never the front-page headline. */
.hold h1.msg-title, .page-hold .hold h1.msg-title { font-size: clamp(2rem, 8vw, 2.5rem); line-height: 1.1; letter-spacing: -.015em; }
.hold .msg-title + .message { margin-top: 16px; }
/* One heading position across the message pages: the block starts at a fixed offset under the masthead instead of
   being centred on its own height (a longer page used to push its heading 8 px up). Older browsers keep the centring. */
.hold > .wrap:has(> .msg-title) { margin-block: clamp(32px, 14vh, 140px) auto; }
/* A date, or a short promise, that must not break across lines. */
.nb { white-space: nowrap; }
.slug { margin: 20px 0 0; font: 400 12px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
@media (min-width: 720px) { .slug { font-size: 13px; } }
/* The holding line and its date: one paragraph, two lines at every width. */
.slug .slug-line { display: block; }

.wait { display: grid; gap: 12px; margin: 32px 0 0; max-width: 34rem; }
@media (min-width: 560px) { .wait { grid-template-columns: 1fr auto; column-gap: 10px; } .wait button { grid-column: 2; grid-row: 1; } .consent, .status { grid-column: 1 / -1; } }
.wait input[type="email"] { min-height: 48px; width: 100%; padding: 0 14px; border: 1.5px solid var(--ink); border-radius: 2px; background: var(--sheet); color: var(--ink); font: 400 16px/1 var(--mono); }
.wait input[type="email"]::placeholder { color: var(--ink-3); opacity: 1; }
.wait button { min-height: 48px; padding: 0 20px; border: 1.5px solid var(--ink); border-radius: 2px; background: var(--ink); color: var(--paper); font: 600 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; cursor: pointer; box-shadow: 0 2px 0 var(--ink-3); margin-bottom: 2px; transition: transform .12s var(--ease), box-shadow .12s var(--ease); }
.wait button:active { transform: translateY(2px); box-shadow: none; }
.wait button[disabled] { cursor: default; background: var(--ink-2); border-color: var(--ink-2); }
/* The confirm page: a form with one button and no field. */
.wait.wait-one { display: block; margin-top: 28px; }
.consent { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; padding: 6px 0; min-height: 44px; font: 400 13px/1.5 var(--mono); color: var(--ink-2); cursor: pointer; }
.consent input { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 0; border: 1.5px solid var(--ink); border-radius: 2px; background: var(--sheet); cursor: pointer; }
.consent input:checked { background: var(--ink); box-shadow: inset 0 0 0 4px var(--sheet); }
.consent a { display: inline-block; padding: 14px 0; margin: -14px 0; }
/* The bot check's box (added by the Worker only while sign-ups are open). Most readers never see it:
   out of the form's rows until the check has to ask the reader something (ni.js sets .asking). */
.bot-check { grid-column: 1 / -1; min-width: 0; }
.bot-check:not(.asking) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* Without JavaScript the check cannot run: one line under the button says so (added with the box). */
.wait noscript { grid-column: 1 / -1; }
.status { margin: 0; padding: 4px 0 4px 14px; border-left: 3px solid var(--ink); font: 400 13px/1.5 var(--mono); color: var(--ink); }
/* Under the button: joining is free. The sentence is one of the Marker's two uses; the words after it are plain. */
.free { margin: 16px 0 0; max-width: 34rem; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); }
.hold .message { margin: 28px 0 0; font-size: 1.25rem; line-height: 1.4; max-width: 32rem; }

/* The coming-soon page (11 Nov 2026): kicker, headline, lede, three steps, the list, the AI note.
   One purposeful motion: the blocks settle in once, top to bottom (none under reduced motion). */
.soon > .wrap { margin-block: 0 auto; }
.soon .soon-kicker { margin: 0 0 16px; }
.soon h1 { max-width: 12ch; }
@media (min-width: 960px) { .page-hold .hold.soon h1 { font-size: 4.5rem; max-width: 16ch; } }
.lede { margin: 20px 0 0; max-width: 36rem; font-size: 1.25rem; line-height: 1.45; }
@media (min-width: 720px) { .lede { font-size: 1.375rem; } }
.steps { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 0; max-width: 52rem; }
.steps li { display: grid; grid-template-columns: 2.5rem 1fr; column-gap: 8px; align-content: start; padding: 14px 0; border-top: 1px solid var(--rule); }
.steps li:last-child { border-bottom: 1px solid var(--rule); }
.step-n { grid-row: 1 / span 2; font: 400 12px/1.9 var(--mono); letter-spacing: .08em; color: var(--ink-3); }
.step-t { font-weight: 600; font-size: 1.125rem; line-height: 1.3; }
.step-d { color: var(--ink-2); line-height: 1.45; }
@media (min-width: 720px) {
  .steps { grid-template-columns: repeat(3, 1fr); column-gap: 28px; }
  .steps li { grid-template-columns: 1fr; border-bottom: 0; border-top: 1.5px solid var(--ink); }
  .steps li:last-child { border-bottom: 0; }
  .step-n { grid-row: auto; margin-bottom: 6px; }
}
.join { margin: 44px 0 0; }
.join h2 { margin: 0; font-weight: 600; font-size: 1.5rem; line-height: 1.15; letter-spacing: -.015em; }
.join .wait { margin-top: 18px; }
.consent-opt { padding-top: 0; }
.ai-note { margin: 40px 0 0; max-width: 36rem; font: 400 12px/1.6 var(--mono); color: var(--ink-2); }
.ai-note a { color: inherit; }
.soon .wrap > * { animation: settle .7s var(--ease) both; }
.soon .wrap > :nth-child(2) { animation-delay: .06s; }
.soon .wrap > :nth-child(3) { animation-delay: .12s; }
.soon .wrap > :nth-child(4) { animation-delay: .18s; }
.soon .wrap > :nth-child(n+5) { animation-delay: .24s; }
@keyframes settle { from { opacity: 0; transform: translateY(8px); } }

/* The stories section (Step 2): the front page's rows, the lists, the article page. Same paper, same two voices. */
.stories-slot:empty { display: none; }
.home-stories { margin: 40px 0 0; max-width: 52rem; }
.home-stories h2, .story h2, .stories-page h2 { margin: 0 0 6px; font: 400 12px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.story-list { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.story-list li { border-bottom: 1px solid var(--rule); }
.story-list a { display: grid; gap: 2px; padding: 14px 0; text-decoration: none; color: var(--ink); }
.story-list a:hover .sl-title { text-decoration: underline; text-underline-offset: 3px; }
.sl-kicker, .sl-meta { font: 400 11px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.sl-title { font-weight: 600; font-size: 1.1875rem; line-height: 1.3; text-wrap: balance; }
.more { margin: 12px 0 0; font: 400 12px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.more a, .story-kicker a { display: inline-flex; min-height: 44px; align-items: center; }
.story-main { flex: 1; padding: 24px 0 48px; }
.page-story .wrap { max-width: 44rem; }
@media (min-width: 960px) { .page-story .masthead .wrap, .page-story .footer .wrap { max-width: 60rem; } }
.stories-page .msg-title { margin: 8px 0 0; font-weight: 600; font-size: clamp(2rem, 8vw, 2.75rem); line-height: 1.1; letter-spacing: -.015em; }
.search { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin: 24px 0 0; max-width: 34rem; }
.search input { min-height: 48px; width: 100%; padding: 0 14px; border: 1.5px solid var(--ink); border-radius: 2px; background: var(--sheet); color: var(--ink); font: 400 16px/1 var(--mono); }
.search button { min-height: 48px; padding: 0 18px; border: 1.5px solid var(--ink); border-radius: 2px; background: var(--ink); color: var(--paper); font: 600 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.cats { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 20px 0 24px; font: 400 12px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.cats a { display: inline-flex; min-height: 44px; align-items: center; color: var(--ink-2); }
.sample-bar { margin: 0 0 16px; padding: 8px 12px; border: 1.5px dashed var(--ink); font: 400 12px/1.5 var(--mono); letter-spacing: .04em; }
.story-kicker { margin: 0; }
.story-title { margin: 6px 0 0; font-weight: 600; font-size: clamp(2.125rem, 9vw, 3.5rem); line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
.ai-label { margin: 18px 0 0; padding: 10px 0 10px 14px; border-left: 3px solid var(--ink); font: 400 12px/1.6 var(--mono); color: var(--ink-2); }
.ai-label a { color: inherit; }
.short { margin: 24px 0 0; }
.short-play { display: grid; place-items: center; align-content: center; gap: 6px; aspect-ratio: 9 / 16; max-height: 70vh; max-width: 100%; margin: 0 auto; background: var(--ink); color: var(--paper); border-radius: 2px; text-decoration: none; font: 600 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.short-icon { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--paper); position: relative; transition: transform .2s var(--ease); }
.short-icon::after { content: ""; position: absolute; left: 22px; top: 17px; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent var(--paper); }
.short-play:hover .short-icon { transform: scale(1.06); }
.short-sub { font-weight: 400; font-size: 11px; opacity: .75; }
.short-frame { display: block; aspect-ratio: 9 / 16; max-height: 80vh; width: auto; height: 80vh; max-width: 100%; margin: 0 auto; border: 0; border-radius: 2px; }
.short-none p { margin: 0; padding: 14px; border: 1px solid var(--rule); font: 400 12px/1.5 var(--mono); color: var(--ink-2); }
.story-body { margin: 28px 0 0; font-size: 1.1875rem; line-height: 1.6; }
.story-body p { margin: 0 0 18px; }
.story-body h2 { margin: 28px 0 8px; font-family: inherit; font-weight: 600; font-size: 1.25rem; line-height: 1.25; letter-spacing: -.01em; text-transform: none; color: var(--ink); }
.ref { font: 400 11px/1 var(--mono); }
.ref a { padding: 0 2px; text-decoration: none; }
.correction { margin: 0 0 18px; padding: 10px 14px; border: 1px solid var(--rule); }
.debate { margin: 36px 0 0; padding: 20px 0 0; border-top: 1.5px solid var(--ink); }
.debate-q { margin: 6px 0 0; font-weight: 600; font-size: 1.5rem; line-height: 1.25; text-wrap: balance; }
.ab { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.ab li { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 10px; font-size: 1.125rem; }
.ab-key { display: grid; place-items: center; width: 32px; height: 32px; border: 1.5px solid var(--ink); border-radius: 2px; font: 600 13px/1 var(--mono); }
.debate-go { margin: 18px 0 0; }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border: 1.5px solid var(--ink); border-radius: 2px; background: var(--ink); color: var(--paper); font: 600 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.debate-note { margin: 10px 0 0; font: 400 12px/1.5 var(--mono); color: var(--ink-2); }
.sources, .story-credits, .join-cta { margin: 32px 0 0; padding: 16px 0 0; border-top: 1px solid var(--rule); }
.sources ol { margin: 6px 0 0; padding-left: 1.4em; font-size: 1rem; line-height: 1.5; }
.sources li { margin: 0 0 8px; scroll-margin-top: 24px; }
.sources li:target { background: var(--sheet); }
.src-date, .src-note { font: 400 12px/1.5 var(--mono); color: var(--ink-2); }
.story-credits p, .story-credits ul, .join-cta p { margin: 6px 0 0; color: var(--ink-2); }
.story-fig { margin: 24px 0 0; }
.story-fig img { display: block; max-width: 100%; height: auto; }
.story-fig figcaption { margin-top: 6px; font: 400 11px/1.5 var(--mono); color: var(--ink-2); }

/* Document pages (pricing, terms, privacy, refunds): the words in serif, the receipts in mono. */
.doc { flex: 1; padding: 36px 0 72px; }
.doc h1 { margin: 0 0 12px; font-weight: 600; font-size: clamp(2.25rem, 9vw, 3.5rem); line-height: 1.08; letter-spacing: -.015em; }
.doc h2 { margin: 44px 0 10px; padding-top: 14px; border-top: 1px solid var(--rule); font-weight: 600; font-size: 1.5rem; line-height: 1.15; letter-spacing: -.015em; }
.doc h3 { margin: 28px 0 8px; font: 600 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.doc p, .doc ul, .doc blockquote { margin: 0 0 14px; }
.doc ul { padding-left: 1.15em; }
.doc li { margin: 0 0 6px; }
.doc li::marker { color: var(--ink-3); }
.doc strong { font-weight: 600; }
.doc .mono, .doc .num { font-family: var(--mono); font-size: .82em; }
.doc .clause .num { color: var(--ink-3); margin-right: .35em; }
.doc blockquote { padding: 4px 0 4px 16px; border-left: 3px solid var(--ink); font: 400 13px/1.55 var(--mono); }
.doc blockquote p:last-child { margin-bottom: 0; }
.doc a { overflow-wrap: anywhere; }
.doc h1 + p { font: 400 12px/1.5 var(--mono); letter-spacing: .06em; color: var(--ink-3); }
.doc--pricing h1 + p { font: inherit; letter-spacing: 0; color: inherit; }

/* Contents (pages with six sections or more): a closed disclosure over a ruled mono list of jump links, not a heading. */
main.doc h2 { scroll-margin-top: 24px; }
.toc { margin: 24px 0 32px; font: 400 12px/1.4 var(--mono); }
.toc summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; border-top: 1px solid var(--rule); border-bottom: 1.5px solid var(--ink); font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::marker { content: ""; }
.toc summary::after { content: "+"; flex: none; width: 1ch; font: 400 16px/1 var(--mono); letter-spacing: 0; text-align: center; color: var(--ink); }
.toc details[open] > summary::after { content: "\2212"; }
.toc summary:hover { color: var(--ink); }
.doc .toc ul { margin: 0; padding: 0; list-style: none; }
.doc .toc li { margin: 0; border-bottom: 1px solid var(--rule); break-inside: avoid; }
.toc a { display: flex; align-items: center; min-height: 44px; padding: 6px 0; color: var(--ink-2); text-decoration: none; }
.toc a:hover, .toc a:focus-visible { color: var(--ink); text-decoration: underline; }
/* Two columns: the row rules go (columns of unequal length would end ragged); one rule closes the list. */
@media (min-width: 700px) {
  .doc .toc ul { columns: 2; column-gap: 32px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
  .doc .toc li { border-bottom: 0; }
}
@media (min-width: 720px) and (hover: hover) and (pointer: fine) { .toc a { min-height: 36px; } }

/* Tables written in the copy (the build wraps each in div.table). The price comparison has its own rules below. */
.table { margin: 0 0 16px; }
.table table { width: 100%; border-collapse: collapse; font: 400 13px/1.45 var(--mono); }
.table th { text-align: left; font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding: 8px 12px 8px 0; border-bottom: 1.5px solid var(--ink); vertical-align: bottom; }
.table td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.doc--privacy td, .doc--terms td { font: 400 .9rem/1.5 var(--serif); }
.doc--privacy td:first-child, .doc--terms td:first-child { font: 600 12px/1.5 var(--mono); }
/* A table with no header row (a list of facts): each row's first cell is its header, set as the mono fact. */
.table tbody th { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--rule); vertical-align: top; font: 600 12px/1.5 var(--mono); letter-spacing: 0; text-transform: none; color: var(--ink); }
@media (min-width: 720px) {
  .doc--privacy table { table-layout: fixed; }
  .doc--privacy th:first-child { width: 9.5rem; }
  .table tbody:first-child tr:first-child > * { border-top: 1.5px solid var(--ink); }
}
/* A link that is the only element in its paragraph keeps a tap target of 44 px or more. :only-child ignores text,
   so it also matches a link inside a sentence (Privacy, Complaints): padding cancelled by a negative margin, as in
   the footer, gives the tap height without changing the line pitch. */
.doc article > p > a:only-child { display: inline-block; padding: 14px 0; margin: -14px 0; }
/* Contact blocks (Terms 19, Refunds 9): the name line breaks evenly, as in the footer, not after "trading as". */
.doc--terms [id="19-contact"] + p, .doc--refunds [id="9-contact"] + p + p { text-wrap: balance; }
.table th:last-child, .table td:last-child { padding-right: 0; }
/* Phones: a table becomes ruled records, each cell under its own mono label — no sideways scroll. */
@media (max-width: 719px) {
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table table, .table tbody, .table tr, .table td, .table tbody th { display: block; }
  .table tr { padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .table tr:first-child { border-top: 1.5px solid var(--ink); }
  .table td, .table tbody th { padding: 2px 0; border: 0; }
  .table td[data-label]::before { content: attr(data-label); display: block; font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
  .table td:first-child { font-weight: 600; }
  .table td:first-child::before { content: none; }
  .table td + td, .table th + td { margin-top: 6px; }
  /* A fact table's row header is the same small grey label as a card label above. */
  .table tbody th[scope="row"] { font: 600 11px/1.45 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-align: left; color: var(--ink-3); }
  .table tbody th[scope="row"] + td { margin-top: 2px; }
  /* A figure and its note ("£49.99 a year · £9.89 less …"): the note takes its own muted line; the dot is not needed. */
  .table td .sub { display: block; font-weight: 400; color: var(--ink-3); }
  .table td .sep { display: none; }
}

/* ── The price comparison (holding page and Pricing page; UI spec §2 to §4) ──
   One markup. From 880 px it is a table: a label column, Free, then the Member tiers under one ink
   rule. Below 880 px the same cells are laid out as two stacked sections, Member first, then Free.
   Both currencies and both billing periods are in the page: pounds show unless <html data-cur="usd">,
   monthly unless <html data-bill="yearly"> (assets/pricing.js; the server sets data-cur for US readers).
   No shadows, no gradients, no capitals. One motion: the prices count when the period changes (pricing.js). */
.plans { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--rule); }
.doc .plans { margin-top: 28px; padding-top: 0; border-top: 0; }
.plans h2 { margin: 0 0 18px; padding: 0; border: 0; font-weight: 600; font-size: 1.5rem; line-height: 1.15; letter-spacing: -.015em; }
.cur-gbp, .bill-monthly { display: block; }
.cur-usd, .bill-yearly { display: none; }
:root[data-cur="usd"] .cur-gbp, :root[data-bill="yearly"] .bill-monthly { display: none; }
:root[data-cur="usd"] .cur-usd, :root[data-bill="yearly"] .bill-yearly { display: block; }

/* The two switches: shown only once pricing.js can work them (theme.js sets html.js). */
.plans-controls { display: none; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 20px; }
html.js .plans-controls { display: flex; }
.seg { position: relative; display: inline-flex; min-width: 0; margin: 0; padding: 3px; border: 1px solid var(--ink); border-radius: 2px; }
.seg input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.seg label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 2px; font-weight: 500; font-size: 16px; line-height: 1; color: var(--ink-2); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.seg input:checked + label { background: var(--ink); color: var(--paper); }
.seg input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; }
.seg-cur label { padding: 0 11px; font: 400 13px/1 var(--mono); }

/* Prices: the figure in serif with steady digits, what it is per beside it, the other period under it in mono. */
.amt { font-weight: 500; font-size: 34px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; }
.per { font-size: 15px; color: var(--ink-3); white-space: nowrap; }
.alt { display: block; margin-top: 6px; font: 400 12.5px/1.4 var(--mono); color: var(--ink-3); text-wrap: balance; }

/* The Marker, in its only two places. The text on it is ink in both themes. */
.pick, .free-mark { padding: .05em .3em; border-radius: 2px 6px 3px 5px; color: #161513; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pick { background: var(--mark); }
.free-mark { background: var(--mark); }
.pick { font-weight: 500; font-size: 13.5px; line-height: 1.4; white-space: nowrap; }
.free-mark { font-weight: 600; }

.btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; min-height: 48px; padding: 6px 14px; border: 1.5px solid var(--ink); border-radius: 2px; color: var(--ink); font-weight: 500; font-size: 15px; line-height: 1.15; text-align: center; text-decoration: none; }
.btn-sub { font: 400 12px/1.2 var(--mono); }
.btn:hover { background: var(--sheet); }
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--ink-2); }

/* Borders are kept apart (no gap): where two widths met on one collapsed line, Chromium and WebKit drew them differently. */
.pt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 17px; line-height: 1.45; }
.pt th, .pt td { padding: 0; font-weight: 400; text-align: left; vertical-align: top; }
.pt-name { display: block; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.pt-note { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--ink-3); text-wrap: balance; }
.yes::before { content: ""; display: inline-block; width: 18px; height: 18px; vertical-align: -3px; background: currentColor; -webkit-mask: url("/assets/icon-check.svg") center / 18px 18px no-repeat; mask: url("/assets/icon-check.svg") center / 18px 18px no-repeat; }
.no::before { content: ""; display: inline-block; width: 12px; border-top: 1.5px solid var(--ink-3); vertical-align: middle; }
.plans .plans-later { margin: 22px 0 0; max-width: 40rem; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.plans .plans-later strong { font-weight: 600; color: var(--ink); }
.plans .plans-fine { list-style: none; margin: 14px 0 0; padding: 0; max-width: 40rem; font-size: 15px; line-height: 1.6; color: var(--ink-3); }
.plans .plans-fine li { margin: 0; padding: 2px 0; text-wrap: balance; }
/* Desktop, the Pricing page only (the front page keeps its width): wide enough that the longest Pricing line sits on one line (balanced, it broke at half width). */
@media (min-width: 880px) { .doc .plans .plans-fine { max-width: 50rem; } }

/* The table. The whole block (switches, table, the lines under it) is wider than the page's text
   column and centred on it, up to 1080 px (UI spec §2): the one thing on the page that breaks out. */
@media (min-width: 880px) {
  .plans { margin-inline: calc(50% - min(540px, 50vw - var(--gutter))); }
  .pt { table-layout: fixed; }
  .pt-c-label { width: 26%; }
  .pt-c-chosen { background: var(--sheet); }
  .pt-narrow { display: none; }
  .pt th, .pt td { padding: 12px 14px; }
  .pt th:first-child, .pt td:first-child { padding-left: 0; }
  .pt-groups th { padding-bottom: 8px; vertical-align: bottom; background: var(--paper); font-size: 15px; color: var(--ink-3); }
  .pt-group-name { margin-right: 6px; font-weight: 600; font-size: 20px; color: var(--ink); }
  .pt-tiers th { padding-top: 14px; vertical-align: bottom; font-size: 18px; }
  /* The rule under "Member" is the top edge of the tier names: 1 px, and 3 px over the pick, in every engine. */
  .pt-tiers th:nth-child(n+3) { border-top: 1px solid var(--ink); }
  .pt-tiers th.pt-chosen { border-top-width: 3px; }
  .pt .pick { display: inline-block; margin: 0 0 10px -.3em; }
  .pt-prices td { padding-top: 6px; padding-bottom: 14px; }
  .pt-prices .per { display: block; margin-top: 5px; }
  .pt-ctas td { padding-top: 4px; padding-bottom: 10px; }
  .pt-hold td { padding-top: 10px; padding-bottom: 22px; background: var(--paper); font-size: 15px; line-height: 1.5; color: var(--ink-2); }
  .pt tbody th, .pt tbody td { border-top: 1px solid var(--rule); }
  .pt tbody th { color: var(--ink-2); }
  .pt tbody td { padding-top: 14px; font: 400 14px/1.5 var(--mono); }
  .pt .pt-q th { font-weight: 600; color: var(--ink); }
  .pt .pt-q td { padding-top: 12px; font: 500 24px/1.1 var(--serif); font-variant-numeric: tabular-nums lining-nums; }
  .pt tbody tr:last-child th, .pt tbody tr:last-child td { border-bottom: 1px solid var(--ink); }
}
/* Narrower tables: the tag keeps to its column by dropping its second half ("Our pick"). */
@media (min-width: 880px) and (max-width: 1143px) { .pick .pt-wide { display: none; } }
/* ...and the buttons keep "Join the waitlist" on one line (two lines in all, never three). */
@media (min-width: 880px) and (max-width: 1143px) { .pt .btn { padding-inline: 4px; } .btn-main { white-space: nowrap; } }

/* Phones and narrow windows: the rows and row groups dissolve (display: contents) and every cell becomes
   an item of one grid (label, then two narrow columns that the prices share), put in reading order with `order`:
   1 Member and "Everything in Free, plus:" · 2 what Member adds, once · 3 to 8 the tiers, name left and
   price right · 9 the one button · 10 the line under it · 11 to 13 Free: its price, then its lines. */
@media (max-width: 879px) {
  .plans { max-width: 34rem; }
  .pt { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }
  .pt thead, .pt tbody, .pt tr { display: contents; }
  .pt th, .pt td { display: block; min-width: 0; }
  .pt colgroup, .pt td:empty, .pt-prices th, .pt .pt-wide, .pt tbody td:nth-child(n+3), .pt-ctas td:nth-child(n+4), .pt-plus td { display: none; }

  .pt-groups th { order: 1; grid-column: 1 / -1; padding-top: 4px; padding-bottom: 6px; color: var(--ink-2); }
  .pt-group-name { display: block; margin-bottom: 2px; font-weight: 500; font-size: 26px; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); }
  .pt-plus th, .pt .pt-words td:nth-child(3) { display: block; order: 2; grid-column: 1 / -1; position: relative; padding: 10px 0 10px 28px; border-bottom: 1px solid var(--rule); }
  .pt-plus th::before, .pt .pt-words td:nth-child(3)::before { content: ""; position: absolute; left: 1px; top: 13px; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("/assets/icon-check.svg") center / 18px 18px no-repeat; mask: url("/assets/icon-check.svg") center / 18px 18px no-repeat; }

  .pt-tiers th { grid-column: 1; }
  .pt-prices td { grid-column: 2 / -1; text-align: right; }
  .pt-prices td:nth-child(n+3), .pt-both td:nth-child(2) { padding-left: 12px; }
  .pt-tiers th:nth-child(n+3), .pt-prices td:nth-child(n+3) { padding-top: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
  .pt-tiers th:nth-child(n+3) { display: flex; flex-direction: column-reverse; justify-content: flex-end; align-items: flex-start; gap: 6px; }
  .pt-tiers th:nth-child(3) { order: 3; }
  .pt-prices td:nth-child(3) { order: 4; }
  .pt-tiers th:nth-child(4) { order: 5; }
  .pt-prices td:nth-child(4) { order: 6; }
  .pt-tiers th:nth-child(5) { order: 7; }
  .pt-prices td:nth-child(5) { order: 8; }
  .pt-prices .amt { font-size: 22px; }
  .pt-prices .per { font-size: 14px; }
  .pt-prices .alt { max-width: 21ch; margin: 3px 0 0 auto; font-size: 11.5px; }

  .pt-ctas td:nth-child(3) { order: 9; grid-column: 1 / -1; padding-top: 20px; }
  .pt .btn { flex-direction: row; gap: 0; font-size: 16px; }
  .pt .btn-sub { font: inherit; }
  .pt .btn-sub::before { content: "\00a0\2014\00a0"; }
  .pt-hold td:last-child { order: 10; grid-column: 1 / -1; padding-top: 12px; font-size: 16px; line-height: 1.5; color: var(--ink-2); text-wrap: balance; }

  .pt-tiers th:nth-child(2), .pt-prices td:nth-child(2) { margin-top: 36px; padding: 16px 0 10px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
  .pt-tiers th:nth-child(2) { order: 11; grid-column: 1 / 3; font-weight: 500; font-size: 26px; line-height: 1.2; letter-spacing: -.01em; }
  .pt-prices td:nth-child(2) { order: 12; grid-column: 3; }
  .pt-prices td:nth-child(2) .amt { font-size: 26px; line-height: 1.2; }
  .pt-prices td:nth-child(2) .alt { display: none; }
  .pt-both th, .pt-both td:nth-child(2) { order: 13; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
  .pt-both th { grid-column: 1 / 3; }
  .pt-both td:nth-child(2) { grid-column: 3; text-align: right; font: 400 14px/1.75 var(--mono); }
  .pt .pt-q td:nth-child(2) { font: 500 20px/1.2 var(--serif); font-variant-numeric: tabular-nums lining-nums; }
}

/* Footer: the independence line, the publisher line and the policies, in the newsroom's voice. */
.footer { padding: 0 0 16px; font: 400 12px/1.55 var(--mono); color: var(--ink-2); }
.footer .wrap::before { content: ""; display: block; border-top: 1px solid var(--rule); margin-bottom: 6px; }
.footer p { margin: 0 0 8px; }
.footer p:last-child { margin-bottom: 0; text-wrap: balance; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0 0 8px; }
.footer-links a, .footer-links span { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; padding: 0 4px; margin: 0 -4px; }
.footer-links span { font-weight: 600; color: var(--ink); }
.footer p a { display: inline-block; padding: 14px 0; margin: -14px 0; }
/* Those padded links (here and the prose link in .doc): the focus ring hugs the text line, not the 14 px tap padding,
   so it never covers the lines above and below; sideways it keeps the 3 px gap of the :focus-visible ring. An outline
   cannot: its offset is the same on all four sides, and these links have no side padding. */
.footer p a, .doc article > p > a:only-child { position: relative; }
.footer p a:focus-visible, .doc article > p > a:only-child:focus-visible { outline: none; }
.footer p a:focus-visible::after, .doc article > p > a:only-child:focus-visible::after { content: ""; position: absolute; inset: 14px -5px 14px -3px; border: 2px solid var(--ink); border-radius: 2px; pointer-events: none; }

/* Small phones: tighter air so the front page stays on one screen at 375 wide; no type or target shrinks. */
/* Phones: the date has its own line since 7 Oct, so the holding page gives back 18 px of padding to stay one screen at 390. */
@media (max-width: 430px) { .hold { padding: 20px 0 26px; } }
@media (max-width: 389px) {
  .hold { padding: 24px 0 18px; }
  .wait { margin-top: 24px; }
  .footer-links { column-gap: 14px; }
}
@media (max-width: 374px) { .footer-links { column-gap: 10px; } }
/* Short screens (320 x 568): give back a little air so the Join button is never cut. Nothing changes from 640 tall. */
@media (max-height: 600px) and (max-width: 430px) { .hold { padding: 16px 0 14px; } .wait { margin-top: 20px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .preview-bar, .wait, .skip, .toc, .theme-toggle, html.js .theme-toggle, html.js .plans-controls { display: none; }
  body { background: #fff; color: #000; }
  /* Paper is paper: a reader who chose night still prints ink on white, with the paper mark. */
  :root[data-theme="night"] { --paper: #F3F0E7; --sheet: #FAF8F2; --ink: #161513; --ink-2: #3D3A35; --ink-3: #625D54; --rule: #D8D2C4; }
  :root[data-theme="night"] .mark-paper { display: block; }
  :root[data-theme="night"] .mark-ink { display: none; }
  html.ready body { transition: none; }
  /* Browsers leave backgrounds out of a print: the solid button would be pale words on white, and the
     checks (a background cut by a mask) would not be there at all. */
  .btn-solid { background: none; color: #000; }
  .yes::before, .pt-plus th::before, .pt .pt-words td::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* Windows high contrast replaces background colours, which would erase the masked icon. */
@media (forced-colors: active) { .theme-icon { forced-color-adjust: none; background: CanvasText; } }
@media (forced-colors: active) { .yes::before, .pt-plus th::before, .pt .pt-words td::before { forced-color-adjust: none; background: CanvasText; } }
/* ...and would leave the chosen segment of a switch looking like the other one. */
@media (forced-colors: active) { .seg input:checked + label { forced-color-adjust: none; background: Highlight; color: HighlightText; } }

/* Sign-up first (12 Nov 2026, Batch A): header Stories + Join free, presenter line, the ask in the first
   screen, the three steps under it, a compact repeat button, the story page's closing button. */
.mast-nav { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.mast-link { font: 400 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-decoration: none; padding: 16px 0; }
.mast-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.mast-join { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1.5px solid var(--ink); border-radius: 2px; background: var(--ink); color: var(--paper); font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.mast-join:hover { background: var(--ink-2); }
.mast-row .theme-toggle { margin-left: 0; }
/* 360–389 px phones (12 Nov 2026, live check): tighter gaps and a slimmer Join button keep the theme switch inside the screen. */
@media (max-width: 389px) { .mast-row { gap: 8px; } .mast-nav { gap: 8px; } .mast-join { padding: 0 8px; } }
/* Under 370 px the row cannot hold all four: the Join button and the theme switch stay, Stories goes (the front page lists them). */
@media (max-width: 369px) { .mast-link { display: none; } }
.presenter { margin: 10px 0 0; font: 400 12px/1.5 var(--mono); letter-spacing: .04em; color: var(--ink-2); }
.soon .join { margin: 22px 0 0; }
.soon .join h2 { font-size: 1.25rem; }
.soon .join .wait { margin-top: 12px; }
.how { margin: 40px 0 0; }
.how-title { margin: 0; font: 400 12px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.how .steps { margin-top: 12px; }
.again { margin: 32px 0 0; max-width: 24rem; }
.btn-wide { width: 100%; }
.join-cta .btn-wide { min-height: 56px; font-size: 16px; font-weight: 600; }
.sl-q { font-size: .9375rem; line-height: 1.4; color: var(--ink-2); }
@media (max-width: 719px) {
  .soon .soon-kicker { margin-bottom: 10px; }
  .soon h1 { font-size: 2.5rem; max-width: 14ch; }
  .soon .lede { margin-top: 12px; font-size: 1.0625rem; }
  .soon .free { margin-top: 10px; font-size: 1rem; }
}