/* Boring landing page. Tokens and type roles mirror app/lib/theme/boring_theme.dart:
   warm ink on cream paper, cream on espresso in the dark, no accent hue, hairline rules.
   Serif (Newsreader) for what you read, sans (Inter) for what you operate, mono (JetBrains
   Mono) for metadata. Every text token is at least 4.5:1 on both --background and --fill. */

@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --background: #faf6ee;
  --ink: #1c1915;
  --ink-2: #554d44;
  --ink-3: #73695d;
  --hairline: #e4dccc;
  --fill: #f1ebdf;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius: 6px;
  --gutter: 20px;
  --measure: 38rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background: #17140f;
    --ink: #f2ece1;
    --ink-2: #c4baac;
    --ink-3: #9c9183;
    --hairline: #352f27;
    --fill: #221e18;
  }
}

@media (max-width: 359px) {
  :root {
    --gutter: 16px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: color-mix(in srgb, var(--ink) 18%, transparent);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 2px;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: 100%;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Type roles */

.meta {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.section-title {
  margin: 64px 0 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

.ui {
  font-family: var(--sans);
  font-size: 0.9em;
  font-weight: 500;
}

/* Masthead */

.masthead {
  border-bottom: 1px solid var(--hairline);
}

.masthead .wrap {
  padding-top: 28px;
  padding-bottom: 16px;
}

.wordmark {
  font-family: var(--serif);
  font-size: 2.25rem;
  font-weight: 600;
  font-variation-settings: "opsz" 72;
  line-height: 1;
  letter-spacing: -0.018em;
}

.wordmark a {
  text-decoration: none;
}

.masthead .meta {
  margin-top: 12px;
}

.masthead-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 20px;
}

.site-nav {
  display: flex;
  gap: 20px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
}

/* A 44px-tall target that doesn't push the masthead taller. */
.site-nav a {
  margin: -12px 0;
  padding: 12px 0;
  color: var(--ink-2);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration-line: underline;
}

@media (max-width: 359px) {
  .site-nav {
    gap: 16px;
  }
}

/* Hero and sign-up */

.hero {
  padding-top: 48px;
}

.display {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 1.75rem + 2.5vw, 3.25rem);
  font-weight: 600;
  font-variation-settings: "opsz" 72;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

.lede {
  margin-top: 16px;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.signup {
  margin-top: 32px;
  scroll-margin-top: 24px;
}

.signup-form label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
}

.signup-row {
  display: grid;
  gap: 10px;
}

@media (min-width: 600px) {
  .signup-row {
    grid-template-columns: 1fr auto;
  }
}

.field {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  background: var(--background);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.2;
}

.field::placeholder {
  color: var(--ink-3);
  opacity: 1;
}

.field:focus-visible {
  border-color: var(--ink);
  outline-offset: 1px;
  border-radius: var(--radius);
}

.field[aria-invalid="true"] {
  border-color: var(--ink);
  border-width: 1.5px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin: 0;
  padding: 0 24px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--background);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.button:hover {
  background: color-mix(in srgb, var(--ink) 86%, var(--background));
}

.button:focus-visible {
  border-radius: var(--radius);
}

.button:disabled {
  border-color: var(--hairline);
  background: var(--fill);
  color: var(--ink-2);
  cursor: progress;
}

.button-outline {
  min-height: 48px;
  padding: 0 20px;
  background: transparent;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
}

.button-outline:hover {
  background: var(--fill);
  text-decoration: none;
}

.status {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.status:not(:empty) {
  margin-top: 12px;
}

.status.is-done {
  margin-top: 0;
  padding: 16px 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--fill);
  font-size: 1rem;
  font-weight: 500;
}

.status:focus {
  outline: none;
}

.status:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.fineprint {
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-3);
}

/* Example story card */

.story-card {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.story-headline {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 600;
  font-variation-settings: "opsz" 32;
  line-height: 1.22;
  letter-spacing: -0.005em;
}

.story-summary {
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink-2);
}

.coverage {
  margin-top: 24px;
}

.coverage-title {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.coverage-lines {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 14px 12px;
  margin: 16px 0 0;
}

.coverage-lines dt {
  padding-top: 0.3em;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.coverage-lines dd {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.5;
}

@media (max-width: 359px) {
  .coverage-lines {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .coverage-lines dd + dt {
    margin-top: 10px;
  }
}

.story-counts {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

/* "Readers asked us to follow this": quiet, the second ink, no accent (as in the app). */
.requested-label {
  margin-top: 8px;
  color: var(--ink-2);
}

.story-requested {
  margin-top: 6px;
}

/* "Mentions Anthropic, the maker of Claude": the Anthropic disclosure's mark on a story's card.
   Quiet like the label above, the second ink, no accent (as in the app). */
.disclosure-mark {
  margin-top: 8px;
  color: var(--ink-2);
}

.caption {
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-3);
}

/* How it works */

.point {
  padding: 24px 0;
}

.point + .point {
  border-top: 1px solid var(--hairline);
}

.point h3 {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 600;
  font-variation-settings: "opsz" 32;
  line-height: 1.22;
  letter-spacing: -0.005em;
}

.point p {
  margin-top: 8px;
  font-size: 1.0625rem;
  line-height: 1.5;
}

/* End of page, like the end of the feed */

.end {
  margin-top: 40px;
  padding: 40px 0 72px;
  border-top: 1px solid var(--hairline);
  text-align: center;
}

.endline {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 500;
  font-variation-settings: "opsz" 32;
  line-height: 1.3;
}

.end p {
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-3);
}

.end .button {
  margin-top: 24px;
}

/* Prose pages (privacy) */

.prose {
  padding-top: 48px;
  padding-bottom: 72px;
}

.prose .meta {
  margin-top: 14px;
}

.prose .section-title {
  margin-top: 40px;
}

.prose p {
  margin-top: 14px;
}

.prose .lede {
  margin-top: 16px;
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--hairline);
}

.site-footer .wrap {
  padding-top: 24px;
  padding-bottom: 40px;
}

.site-footer p + p {
  margin-top: 10px;
}

.footer-links {
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

/* An edition, like the app's feed: a hairline between stories, the whole card a link */

.notices {
  display: grid;
  gap: 12px;
  padding-top: 16px;
}

.notice {
  padding: 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--fill);
}

.notice p + p {
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-2);
}

.feed {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.notices + .feed {
  margin-top: 16px;
  border-top: 1px solid var(--hairline);
}

.card {
  position: relative;
  padding: 20px var(--gutter) 22px;
}

.card + .card {
  border-top: 1px solid var(--hairline);
}

.card:hover {
  background: var(--fill);
}

.card:has(a:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

.card-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.card-mark {
  flex: none;
  color: var(--ink-2);
}

.card-headline {
  margin-top: 8px;
  text-wrap: pretty;
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 600;
  font-variation-settings: "opsz" 32;
  line-height: 1.22;
  letter-spacing: -0.005em;
}

.card-headline a {
  text-decoration: none;
}

.card-headline a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card-headline a:focus-visible {
  outline: none;
}

.card-summary {
  display: -webkit-box;
  margin-top: 8px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-2);
}

.card .story-counts {
  margin-top: 14px;
}

/* Under the radar: after the main stories and before the end, under a header of its own, as in the
   app. The labels are facts about the coverage, in the second ink, never a colour. */

.radar-head {
  padding-top: 40px;
  padding-bottom: 16px;
}

.radar-title {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

.radar-line {
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-2);
}

.radar-feed {
  border-top: 1px solid var(--hairline);
}

.radar-label {
  color: var(--ink-2);
}

.card .radar-label {
  margin-top: 14px;
}

.radar-coverage {
  margin-top: 4px;
}

.story-radar {
  margin-top: 6px;
}

.nowrap {
  white-space: nowrap;
}

.empty {
  padding: 48px 0;
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--ink-2);
  text-align: center;
}

/* The end of an edition: the feed's last hairline runs edge to edge, as in the app. */

.feed {
  border-bottom: 1px solid var(--hairline);
}

.end.feed-end {
  margin-top: 0;
  padding-bottom: 48px;
  border-top: 0;
}

.end .endline {
  margin-top: 0;
  font-family: var(--serif);
  font-size: 1.375rem;
  line-height: 1.3;
  color: var(--ink);
}

.end a {
  color: var(--ink-2);
}

.edition-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 32px;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
}

.edition-nav a {
  color: var(--ink);
  text-decoration: none;
}

.edition-nav a:hover {
  text-decoration-line: underline;
}

.edition-nav a[rel="next"] {
  margin-left: auto;
  text-align: right;
}

/* A quiet pointer to Less Boring: says a feature exists, never shows its content */

.plus-note {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-2);
  text-decoration: none;
}

.plus-note:hover {
  background: var(--fill);
  color: var(--ink);
}

.plus-note:focus-visible {
  border-radius: var(--radius);
}

.plus-note-arrow {
  flex: none;
  color: var(--ink-3);
}

/* A story, like the app's story screen */

.story {
  padding-top: 20px;
  padding-bottom: 56px;
}

.crumb {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
}

.crumb a {
  display: inline-block;
  margin: -12px 0;
  padding: 12px 0;
  text-decoration: none;
}

.crumb a:hover {
  text-decoration-line: underline;
}

.story-topic {
  margin-top: 28px;
}

.story-title {
  margin-top: 12px;
  text-wrap: pretty;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.5rem + 1.1vw, 2.125rem);
  font-weight: 600;
  font-variation-settings: "opsz" 48;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.reading {
  margin-top: 16px;
  font-size: 1.125rem;
  line-height: 1.55;
}

.disclosure {
  margin-top: 16px;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-2);
}

.story-notes {
  margin-top: 24px;
}

.story .section-title {
  margin-top: 36px;
}

.facts {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.facts > li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding-top: 14px;
  font-size: 1.0625rem;
  line-height: 1.5;
}

.facts .dash {
  color: var(--ink-3);
}

.cites {
  margin-left: 2px;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 0;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

.cite {
  display: inline-block;
  padding: 2px 4px;
  text-decoration: none;
}

.cite:hover {
  color: var(--ink);
  text-decoration-line: underline;
}

/* A story's background: labelled, each fact with since when and the pages it rests on,
   then every revision. Official records are marked with a word in a tag, never a colour. */

.background-intro {
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-2);
}

.background-fact {
  min-width: 0;
}

.background-since {
  margin-top: 6px;
}

.background-sources {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.background-sources li + li {
  margin-top: 4px;
}

.background-sources a:hover {
  color: var(--ink);
}

.source-kind {
  display: inline-block;
  margin-left: 4px;
  padding: 3px 4px 2px;
  border: 1px solid var(--ink-3);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 1px;
  color: var(--ink);
}

.background-changes-title {
  margin-top: 24px;
}

.background-changes {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.background-changes li + li {
  margin-top: 6px;
}

.background-change-label {
  font-weight: 600;
  color: var(--ink);
}

.quiet {
  margin-top: 14px;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.story .coverage-lines {
  margin-top: 14px;
}

.lean-note {
  margin-top: 16px;
}

.lean-note a:hover {
  color: var(--ink);
}

/* Rows that open a link: primary sources and sources. The row is the target, edge to edge. */

.rows {
  margin: 4px calc(-1 * var(--gutter)) 0;
  padding: 0;
  list-style: none;
}

.row {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 12px var(--gutter);
}

.row:hover:not(.row-plain) {
  background: var(--fill);
}

.row:has(a:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

.row-number {
  flex: none;
  width: 28px;
  padding-top: 3px;
}

/* Where an official document, which has no leaning, would have its lean tag. */
.lean-space {
  flex: none;
  width: 20px;
  margin: 1px 12px 0 0;
}

.lean-tag {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  margin: 1px 12px 0 0;
  border: 1px solid var(--ink-3);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.row-text {
  flex: 1;
  min-width: 0;
}

.row-link {
  display: block;
  text-decoration: none;
}

.row-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.row-link:focus-visible {
  outline: none;
}

.row-title {
  display: block;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.row-detail {
  display: block;
  margin-top: 2px;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-2);
}

.row-meta {
  display: block;
  margin-top: 4px;
}

.row-arrow {
  flex: none;
  padding: 1px 0 0 12px;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.2;
  color: var(--ink-3);
}

/* How this story was made: the models, the prompt version and how many articles, from provenance */

.provenance {
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.provenance + .fineprint {
  margin-top: 16px;
}

/* A correction on a story: the dated note, under the headline, with the sources it rests on */

.correction-notes {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.correction {
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--fill);
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.correction-label {
  font-weight: 600;
}

.correction-sources {
  margin-top: 6px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.correction-sources a:hover {
  color: var(--ink);
}

/* /corrections: every correction, newest first */

.correction-list {
  margin-top: 36px;
}

.correction-entry {
  padding: 28px 0;
  border-top: 1px solid var(--hairline);
}

.correction-entry:last-child {
  padding-bottom: 0;
}

.prose .correction-entry > .meta:first-child {
  margin-top: 0;
}

.correction-story {
  margin-top: 10px;
  text-wrap: pretty;
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 600;
  font-variation-settings: "opsz" 32;
  line-height: 1.22;
  letter-spacing: -0.005em;
}

.correction-story a {
  text-decoration: none;
}

.correction-story a:hover {
  text-decoration-line: underline;
}

.prose .correction-where {
  margin-top: 8px;
}

.prose .correction-note {
  margin-top: 12px;
  font-size: 1.0625rem;
  line-height: 1.5;
}

.correction-change {
  margin-top: 14px;
}

.correction-change dd {
  overflow-wrap: anywhere;
}

.correction-removed {
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.prose .correction-sources-title {
  margin-top: 20px;
}

.prose .empty-note {
  margin-top: 32px;
  color: var(--ink-2);
}

/* /methodology */

.plain-list {
  margin: 14px 0 0;
  padding-left: 1.25em;
  font-size: 1.0625rem;
  line-height: 1.5;
}

.plain-list li {
  padding-left: 4px;
}

.plain-list li + li {
  margin-top: 8px;
}

/* The newsletter sign-up on edition, story and other pages */

.newsletter {
  margin: 8px 0 64px;
  padding: 24px 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  scroll-margin-top: 24px;
}

.newsletter-title {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 600;
  font-variation-settings: "opsz" 32;
  line-height: 1.22;
  letter-spacing: -0.005em;
}

.newsletter-lede {
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-2);
}

.newsletter .signup-form {
  margin-top: 20px;
}

@media (max-width: 359px) {
  .newsletter {
    padding: 20px 16px;
  }
}

/* The archive */

.prose-tight {
  padding-bottom: 24px;
}

.archive {
  border-top: 1px solid var(--hairline);
}

.archive-end {
  margin-top: 40px;
}

/* Less Boring */

.price {
  margin-top: 40px;
  padding: 24px 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--fill);
}

.prose .price .meta {
  margin-top: 0;
}

.prose .price-amount {
  margin-top: 8px;
  font-family: var(--serif);
  font-size: 2.25rem;
  font-weight: 600;
  font-variation-settings: "opsz" 72;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.price-amount span {
  font-size: 1.125rem;
  font-weight: 400;
  font-variation-settings: "opsz" 16;
  letter-spacing: 0;
  color: var(--ink-2);
}

.prose .price-note {
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-2);
}

/* Inside .prose, whose paragraphs all get a top margin, the sign-up box keeps its own rhythm. */

.prose .newsletter {
  margin-top: 40px;
}

.prose .newsletter .newsletter-lede {
  margin-top: 8px;
}

.prose .newsletter .status:not(:empty) {
  margin-top: 12px;
}

.prose .newsletter .status.is-done {
  margin-top: 0;
}

.prose .newsletter .fineprint {
  margin-top: 14px;
}

/* The newsletter's own pages */

.prose .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.address {
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.ask-form {
  margin-top: 24px;
}

.prose .newsletter .status {
  margin-top: 0;
}

.prose .point p {
  margin-top: 8px;
}

/* Landing page: the way into the edition, the Less Boring pointer, the app waitlist */

.hero-read {
  margin-top: 28px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
}

.hero-listen {
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-2);
}

.point .point-link,
.why .point-link {
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
}

/* Landing page: why Boring, in short, before how it works. The full page is /about. */

.why-lede {
  margin-top: 24px;
  font-size: 1.25rem;
  line-height: 1.45;
}

.why-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.why-list li {
  padding: 12px 0;
}

.why-list li + li {
  border-top: 1px solid var(--hairline);
}

.why-list strong {
  font-weight: 600;
  color: var(--ink);
}

.why .point-link {
  margin-top: 8px;
}

/* /about: the links at the end */

.prose .about-more {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
}

.signup-secondary {
  margin-top: 0;
}

/* Feedback */

.field-area {
  display: block;
  min-height: 168px;
  padding: 12px 14px;
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical;
}

.feedback-form {
  margin-top: 24px;
}

.feedback-under {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: 8px;
}

.prose .feedback-under p {
  margin-top: 0;
}

.feedback-error:empty {
  margin: 0;
}

.feedback-count {
  flex: none;
  margin-left: auto;
}

.feedback-form .button {
  margin-top: 16px;
}

.prose .feedback-note {
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-2);
}

.feedback-link-form {
  margin-top: 24px;
}

.prose .feedback-link-form + .status:not(:empty) {
  margin-top: 12px;
}

.prose .feedback-link-form + .status {
  margin-top: 0;
}

/* Choices: the vote's candidates, and "which of these would you use?". A hairline box each; the
   picked one gets an ink border. Native controls in ink, never a colour. */

.choices {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 20px 0 0;
  padding: 0;
  border: 0;
  list-style: none;
}

.choice {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  cursor: pointer;
}

.choice:hover {
  background: var(--fill);
}

.choice:has(input:checked) {
  border-color: var(--ink);
  background: var(--fill);
}

.choice:has(input:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.choice input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--ink);
}

.choice input:focus-visible {
  outline: none;
}

.choice-static {
  display: block;
  cursor: default;
}

.choice-static:hover {
  background: none;
}

.choice-text {
  min-width: 0;
}

.choice-title {
  display: block;
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 600;
  font-variation-settings: "opsz" 24;
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.choice-detail {
  display: block;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-2);
}

/* The weekly vote */

.prose .vote-question {
  margin-top: 20px;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  font-variation-settings: "opsz" 32;
  line-height: 1.22;
  letter-spacing: -0.005em;
}

.prose .vote-when {
  margin-top: 10px;
}

.vote-form .button {
  margin-top: 20px;
}

.prose .vote-error:empty {
  margin-top: 0;
}

.prose .vote-note {
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-2);
}

.vote-request {
  margin-top: 28px;
}

.prose .vote-request > .vote-note:first-child {
  margin-top: 0;
  color: var(--ink);
  font-weight: 500;
}

.vote-link-form {
  margin-top: 20px;
}

.prose .vote-link-form + .status {
  margin-top: 0;
}

.prose .vote-link-form + .status:not(:empty) {
  margin-top: 12px;
}

.prose .vote-link-form + .status.is-done {
  margin-top: 20px;
}

.prose .vote-none {
  margin-top: 28px;
}

.past-round {
  padding: 24px 0 8px;
}

.past-round + .past-round {
  border-top: 1px solid var(--hairline);
}

.prose .past-round .meta {
  margin-top: 0;
}

.prose .past-question {
  margin-top: 8px;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  font-variation-settings: "opsz" 32;
  line-height: 1.25;
}

.tally {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.tally-item {
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
}

.tally-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.prose .tally-title {
  margin-top: 0;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.prose .past-round .tally-count {
  flex: none;
  color: var(--ink-2);
}

.prose .tally-detail {
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-2);
}

.prose .past-round .tally-mark {
  margin-top: 8px;
  color: var(--ink);
}

.prose .vote-outcome {
  margin-top: 0;
  padding: 12px 0 16px;
  border-top: 1px solid var(--hairline);
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink);
}

/* "Which of these would you use?" after confirming a sign-up */

.interest {
  margin-top: 40px;
  padding: 24px 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.interest-title {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 600;
  font-variation-settings: "opsz" 32;
  line-height: 1.22;
  letter-spacing: -0.005em;
}

.prose .interest-lede {
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-2);
}

.city-field label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
}

.interest-form .button {
  margin-top: 20px;
}

.prose .interest-thanks {
  margin-top: 28px;
}

@media (max-width: 359px) {
  .interest {
    padding: 20px 16px;
  }
}

/* The weekly show */

.prose .show-kicker {
  margin-top: 0;
}

.show-title {
  margin-top: 16px;
}

.prose .show-hosts {
  margin-top: 16px;
  color: var(--ink-2);
}

.player {
  display: block;
  width: 100%;
  margin-top: 16px;
}

/* The show's transcript: plain paragraphs under each host's name. With transcript.js it becomes
   a box that follows the audio, its edges faded with a mask: the words said so far in ink, the
   rest in the third ink (both at least 4.5:1 on --background and --fill). */

.transcript {
  position: relative;
}

.prose .transcript-host {
  margin-top: 0;
}

.prose .transcript-text {
  margin-top: 4px;
  color: var(--ink);
}

.transcript-turn + .transcript-turn {
  margin-top: 20px;
}

.transcript.is-live .transcript-box {
  --fade: 2rem;
  --height: min(26rem, 60vh);
  position: relative;
  max-height: var(--height);
  /* 8px wider than the column each side, for the turns' hover; their text stays in line. */
  margin: 8px -8px 0;
  padding-block: var(--fade) calc(var(--height) * 0.6);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}

.transcript.is-live .transcript-box:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.transcript.is-live .transcript-turn {
  padding: 4px 8px;
  border-radius: var(--radius);
  cursor: pointer;
}

.transcript.is-live .transcript-turn:hover {
  background: var(--fill);
}

.transcript.is-live .transcript-turn + .transcript-turn {
  margin-top: 12px;
}

.transcript.is-live [data-s] {
  color: var(--ink-3);
}

.transcript.is-live [data-s].is-said {
  color: var(--ink);
}

.transcript-now {
  position: absolute;
  bottom: 16px;
  left: 50%;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 0.875rem;
  transform: translateX(-50%);
}

/* Rows inside a prose page keep the rows' own rhythm. */
.prose .row-meta {
  margin-top: 4px;
}

/* The weekly reader polls: this week's questions on /poll, and the results on /polls. Numbers
   only: plain text, a bar in ink, no colour and nothing marked as winning. */

.prose .poll-note {
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-2);
}

.prose .poll-none,
.prose .poll-open {
  margin-top: 28px;
}

.prose .poll-when {
  margin-top: 28px;
}

.prose .poll-as {
  margin-top: 10px;
}

.poll,
.poll-result {
  padding: 28px 0 8px;
}

.poll + .poll,
.poll-result + .poll-result {
  border-top: 1px solid var(--hairline);
}

.poll-list {
  margin-top: 28px;
  border-top: 1px solid var(--hairline);
}

.prose .poll-story {
  margin-top: 0;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.prose .poll-story-kicker {
  display: block;
  margin: 0 0 4px;
}

.poll-story a:hover {
  color: var(--ink);
}

.poll-question,
.poll-result-question {
  margin-top: 10px;
  font-family: var(--serif);
  font-weight: 600;
  font-variation-settings: "opsz" 32;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

.poll-question {
  font-size: 1.5rem;
  line-height: 1.22;
}

.poll-result-question {
  font-size: 1.25rem;
  line-height: 1.25;
}

.poll .choices {
  margin-top: 16px;
}

.poll-form .button {
  margin-top: 16px;
}

.prose .poll-error:empty {
  margin-top: 0;
}

.poll-request {
  margin-top: 24px;
}

.prose .poll-week .section-title {
  margin-top: 48px;
}

.result {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.result-row + .result-row {
  margin-top: 12px;
}

.result-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.prose .result-label {
  margin-top: 0;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.prose .result-share {
  flex: none;
  margin-top: 0;
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.bar {
  display: block;
  width: 100%;
  height: 6px;
  margin-top: 4px;
}

.bar-track {
  fill: var(--hairline);
}

.bar-fill {
  fill: var(--ink-2);
}

.prose .result-n {
  margin-top: 16px;
  color: var(--ink-2);
}

/* Breakdowns and a tracked question's waves: a small table, a column per option. It fits a
   phone; the wrapper scrolls only if four long options can't. */

.table-wrap {
  margin-top: 24px;
  overflow-x: auto;
}

.result-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.35;
}

.result-table caption {
  padding-bottom: 8px;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
  color: var(--ink);
}

.result-table th,
.result-table td {
  padding: 8px 0 8px 8px;
  border-top: 1px solid var(--hairline);
  text-align: right;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.result-table thead th {
  border-top: 0;
  border-bottom: 1px solid var(--ink-3);
  font-weight: 500;
  color: var(--ink-2);
  vertical-align: bottom;
  hyphens: auto;
}

.result-table th:first-child {
  width: 36%;
  padding-left: 0;
  text-align: left;
}

.result-table tbody th {
  font-weight: 500;
  color: var(--ink);
}

.result-table td {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.result-table tbody tr:first-child th,
.result-table tbody tr:first-child td {
  border-top: 0;
}

.cell-n {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.prose .result-caveat {
  margin-top: 20px;
}

/* About you: five optional questions and a consent box */

.prose .about-note {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--fill);
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink);
}

.about-you-form {
  margin-top: 8px;
}

.select-field {
  margin-top: 24px;
}

.select-field label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
}

.prose .select-hint {
  margin: -2px 0 8px;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-3);
}

.select-wrap {
  position: relative;
  display: block;
}

/* A chevron in ink, drawn with borders so it follows the theme. */
.select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 1.5px solid var(--ink-2);
  border-bottom: 1.5px solid var(--ink-2);
  transform: rotate(45deg);
  pointer-events: none;
}

.select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 44px;
  text-overflow: ellipsis;
  cursor: pointer;
}

.consent {
  margin-top: 32px;
}

.consent-text {
  display: block;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
}

.prose .consent-note {
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-2);
}

.about-you-form .button {
  margin-top: 24px;
}

.about-you-request {
  margin-top: 36px;
}

/* After confirming: one more optional step, a quiet row that opens it */

.prose .step {
  margin-top: 16px;
}

.step-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
  text-decoration: none;
}

.step-link:hover {
  background: var(--fill);
}

.step-link:focus-visible {
  border-radius: var(--radius);
}

.step-link-arrow {
  flex: none;
  color: var(--ink-3);
}

/* Boring for Journalists: the Standard, numbered in mono like metadata, and the form */

.prose .jump-link {
  margin-top: 16px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
}

.standard,
.tell-us {
  scroll-margin-top: 24px;
}

.standard-part {
  margin-top: 28px;
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 600;
  font-variation-settings: "opsz" 32;
  line-height: 1.22;
  letter-spacing: -0.005em;
}

.prose .standard-lede {
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-2);
}

.standard-list {
  margin: 12px 0 0;
  padding: 0 0 0 2.25em;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.standard-list li {
  padding: 12px 0 12px 4px;
}

.standard-list li + li {
  border-top: 1px solid var(--hairline);
}

.standard-list li::marker {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-3);
}

.standard-list strong {
  font-weight: 600;
  color: var(--ink);
}

.journalist-form {
  margin-top: 8px;
}

.form-field {
  min-width: 0;
  margin: 28px 0 0;
  padding: 0;
  border: 0;
}

.form-field > label:not(.choice),
.form-field > legend {
  display: block;
  margin-bottom: 10px;
  padding: 0;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
}

.form-hint {
  font-weight: 400;
  color: var(--ink-3);
}

.prose .form-limit {
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-3);
}

.field-area-short {
  min-height: 104px;
}

.choices-compact {
  gap: 8px;
  margin-top: 0;
}

@media (min-width: 600px) {
  .choices-compact {
    grid-template-columns: 1fr 1fr;
  }
}

.choices-compact .choice {
  align-items: center;
  padding: 12px 14px;
}

.choices-compact .choice input {
  margin: 0;
}

.choice-label {
  min-width: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.35;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.journalist-form .consent .choice-label {
  font-weight: 500;
}

.journalist-form > .button {
  margin-top: 28px;
}

.journalist-updates {
  margin-top: 20px;
  margin-bottom: 48px;
}

.updates-address label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
}

.journalist-updates .button {
  margin-top: 12px;
}