/* The Sentinel Thread — shared stylesheet
   Extracted from the approved 2026-07-23 single-page design and extended for a
   multi-page pre-launch site. The palette, column width, mark treatment and
   type scale are UNCHANGED — Spiro approved that look; this only adds what the
   new pages need (nav, essay body, quote cards, press tables).
   American English throughout, per the project's build gate. */

:root {
  --paper: #FAF7F0;
  --ink: #1F1C18;
  /* Contrast against --paper, measured rather than estimated. AA wants 4.5:1 for
     text under 18.66px, and every use of the two soft tokens is small text.
     --ink-softer was 0.42 = 2.59:1 and failed 129 times across the ten pages.
     Raising it alone would have collapsed the scale — --ink-soft at 0.68 is only
     5.68:1, so the whole passing window for a third tier was 0.61 to 0.68. Both
     moved, so three tiers stay visibly distinct and all three pass. */
  --ink-soft: rgba(31, 28, 24, 0.78);    /* 7.98:1 */
  --ink-softer: rgba(31, 28, 24, 0.62);  /* 4.68:1 */
  /* Decorative rules and card borders ONLY — never text, never a state. */
  --ink-faint: rgba(31, 28, 24, 0.12);   /* 1.27:1 */
  --accent: #9B5E4A;
  --column: 620px;
  --narrow: 480px;
  --wide: 760px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
}

/* The hallmark, title and nav moved OUT of <main> on 2026-08-08. <main> means
   the content unique to this page, and eight identical nav links are not that —
   with the nav inside it, a screen-reader user jumping to the main landmark
   landed on the same links on every page, and a skip link had nothing to skip
   to. .pagehead carries the column geometry main used to own. */
/* Spiro, 2026-08-10: "depending on which page you're on the links that take you
   to each page are not consistently placed, they should all be static."
   He was right and the cause was structural, not a nav bug. The masthead was
   inheriting the WIDTH OF THE PAGE'S CONTENT — 620px on the reading pages,
   760px on the ones with figures — and a centred nav inside two different boxes
   centres in two different places. Six pages one way, six the other, so the
   links jumped every time you navigated.
   The masthead is byte-identical on every page, so it gets ONE width, and the
   page's own column no longer has a vote. Title and dek are pulled back to the
   reading measure below, or a long subtitle would set as one over-long line. */
.pagehead {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 6rem 1.5rem 0;
}

.pagehead > .title,
.pagehead > .subtitle {
  max-width: var(--column);
  margin-inline: auto;
}

main {
  max-width: var(--column);
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
}

/* .pagehead--wide is now a no-op — every masthead is --wide. The class is still
   emitted by sync_nav.py for pages whose MAIN is wide, and is harmless; kept in
   the selector so nothing depends on its absence. */
.pagehead--wide,
main.main--wide {
  max-width: var(--wide);
}

/* Visible only when focused — the first thing a keyboard reaches on the page. */
.skip {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 10;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--accent);
  border-radius: 0 0 2px 2px;
  padding: 0.7rem 1.25rem;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.15s ease;
}

.skip:focus {
  transform: translate(-50%, 0);
}

/* ---------------------------------------------------------------- marks */

.mark {
  display: block;
  margin: 0 auto;
  color: var(--ink);
}

.mark--hallmark {
  width: 100px;
  height: auto;
  opacity: 0.9;
}

.mark--small {
  width: 52px;
  height: auto;
  opacity: 0.85;
}

.mark--divider {
  width: 36px;
  height: auto;
  margin: 4rem auto;
  opacity: 0.65;
}

/* ------------------------------------------------------------ site nav */

/* Eight links do not fit one 620px line, so the nav wraps by design. The row
   gap is deliberately much tighter than the column gap — two loosely-spaced
   rows read as two navigations. */
/* 2026-08-10, Spiro's call: three deliberate rows instead of one wrapping run of
   ten. Reading pages, then the figures, then the people. The rows are real
   elements rather than CSS line breaks, because a wrapped flex row regroups
   itself at every width and the grouping IS the meaning here. Each row still
   wraps internally on a narrow phone — that is a fallback, not the layout. */
.nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nav__row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
}

.nav a {
  color: var(--ink-soft);
  text-decoration: none;
  /* Top padding matches the bottom so the target clears the 24px minimum in
     2.5.8 with room to spare. It changes the hit area, not the look. */
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.nav a:hover,
.nav a:focus {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* "You are here" was drawn in --ink-faint at 1.27:1, which is invisible. It also
   collided with the focus hairline — the same mark meant two different things.
   The current page now takes the readable weight; focus keeps the accent. */
.nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--ink-softer);
}

/* ------------------------------------------------------------- titling */

.title {
  font-size: 2.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  margin-top: 2.75rem;
  line-height: 1.15;
}

.title--page {
  font-size: 1.5rem;
  letter-spacing: 0.16em;
  margin-top: 3rem;
}

.subtitle {
  font-style: italic;
  font-weight: 400;
  font-size: 1.35rem;
  text-align: center;
  color: var(--ink-soft);
  margin-top: 0.75rem;
  letter-spacing: 0.02em;
}

.subtitle--page {
  font-size: 1.0625rem;
  max-width: var(--narrow);
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------- prose block */

.opening {
  margin-top: 5rem;
}

.opening p {
  margin-bottom: 1.4em;
}

.opening p:first-child {
  font-size: 1.2rem;
  line-height: 1.55;
}

.opening p:last-child {
  margin-bottom: 0;
}

.prose {
  margin-top: 3.5rem;
}

.prose p {
  margin-bottom: 1.4em;
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose h2 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 3rem 0 1.4rem;
  color: var(--ink-soft);
}

.prose em {
  font-style: italic;
}

.prose a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
}

.prose a:hover,
.prose a:focus {
  color: var(--accent);
}

.lede {
  font-size: 1.2rem;
  line-height: 1.55;
}

/* The home-page excerpt stops one line before the mouse arrives. This is the
   door to the rest of it — for a reader it is the most important link on the
   site, so it gets its own line and weight instead of sitting in the nav. */
.readon {
  text-align: center;
  margin-top: 3.5rem;
  font-size: 1.0625rem;
}

.readon a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 0.35rem;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}

.readon a:hover,
.readon a:focus {
  color: var(--accent);
}

.byline {
  text-align: center;
  font-style: italic;
  color: var(--ink-soft);
  margin-top: 3.5rem;
  font-size: 1rem;
}

.byline--essay {
  margin-top: 1.75rem;
  font-size: 0.9375rem;
}

.dedication {
  max-width: var(--narrow);
  margin: 0 auto;
  font-style: italic;
  text-align: center;
  font-size: 1.0625rem;
  line-height: 1.75;
}

.dedication p {
  margin-bottom: 1.2em;
}

.dedication p:last-child {
  font-size: 1.15rem;
  margin-bottom: 0;
}

/* --------------------------------------------------------- pull quotes */

.pull {
  max-width: var(--narrow);
  margin: 3.5rem auto;
  text-align: center;
  font-size: 1.35rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--ink);
}

.pull cite {
  display: block;
  margin-top: 1.25rem;
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-softer);
}

/* A quote card is a pull quote made screenshot-shaped, so a reader can share it
   without any image asset existing. Deliberately square-ish and self-contained. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 3.5rem;
}

.card {
  border: 1px solid var(--ink-faint);
  border-radius: 2px;
  padding: 2.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 260px;
  background: transparent;
}

.card blockquote {
  font-size: 1.1875rem;
  line-height: 1.45;
  font-style: italic;
}

/* The card is set italic, so an emphasized phrase inside it has nowhere to go —
   "just a mouse" is italic in the manuscript and disappeared into the quote.
   Flipping it upright is the old typographic answer, and it keeps the emphasis
   the sentence was built around. */
.card blockquote em {
  font-style: normal;
}

/* A quote card is the reason someone clicks through to read the piece it came
   from, so the sentence itself is the link rather than a separate "read more".
   It keeps the quote's weight — the accent line only appears on hover or focus,
   so a page of cards does not read as a page of links. */
.card blockquote a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.card blockquote a:hover,
.card blockquote a:focus-visible {
  border-bottom-color: var(--accent);
}

.card .card__source {
  margin-top: 1.75rem;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-softer);
}

/* ---------------------------------------------------------- diagrams */

/* The calendar diagrams are drawn at 1200px wide with 15px labels. Squeezing
   that onto a phone would make the type unreadable, so the figure scrolls
   inside itself instead and the page body never scrolls sideways. */
.figure {
  margin: 3rem 0 2.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.figure img {
  display: block;
  width: 100%;
  min-width: 660px;
  height: auto;
}

.figure figcaption {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--ink-softer);
  text-align: center;
  min-width: 660px;
}

/* A Field Note runs in the NARROW reading column, which is 620px — narrower
   than the 660px floor above. The first diagram put into a note was therefore
   clipped by 40px and given a scrollbar it had no need of. Notes get a floor
   matched to their own column, so a diagram drawn for that width lands on it
   exactly, and a phone still scrolls rather than shrinking the type away.

   540px, NOT var(--column): --column is 620px, but that is the BOX — the text
   inside it measures 572px once padding is taken off. A floor of 620 clipped
   the figure by 48px, which is the same bug one size smaller. The floor has to
   sit under the CONTENT width, never under the token.
   2026-08-08, note no. 3. */
.figure--note img,
.figure--note figcaption {
  min-width: 540px;
}

/* ------------------------------------------------------ drawn on the page */

/* The concestor drawings have had their paper knocked out — they are ink with
   nothing behind them. The paper they appear to be drawn on IS this page, so
   they must never be framed: no border, no card, no background, or the effect
   collapses back into a picture of a drawing stuck onto a page.
   Spiro, 2026-08-08: "can we use the webpage as the canvas."

   And unlike the charts above, a drawing carries no type — so it can scale the
   whole way down to a phone and stay readable. No min-width, and therefore no
   sideways scroller either. */
.plate {
  margin: 2.5rem 0 3rem;
}

.plate img {
  display: block;
  width: 100%;
  height: auto;
}

.plate figcaption {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--ink-softer);
  text-align: center;
}

/* Each rung of the walk is stamped with how far back it is and where that
   falls on the Earth Calendar, in the same accent the calendar uses inside the
   diagrams — so the two agree by eye. 4.81:1 on --paper, which clears AA. */
.rung__when {
  margin: 3.5rem 0 0;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.rung__when + h2 {
  margin-top: 0.35rem;
}

/* ------------------------------------------------------------- lineage */

/* Spiro, 2026-08-10: "I want to see a list first." Each section of The
   Relatives opens with the line of descent running back from something alive
   now, so the reader has the shape before any drawing arrives.
   The time column is --ink-soft, not --ink-softer: it is small text carrying
   real information. --ink-faint is on the rules only, which is all it is for. */
/* Spiro, 2026-08-10: "there is no visual link to it, people need a visual link."
   He was right, and the first version was actively working against him: rules
   BETWEEN the rows read as a table, which says these are separate items. A line
   of descent has to be drawn DOWN the list, not across it. So: one dashed rail
   with an open node at every step, stopping at the first and last nodes rather
   than running off either end — a line with two ends is a line; a line that
   leaves the page is an arrow pointing somewhere the page does not go.
   --rail is the one number that moves between desktop and phone. */
.lineage {
  --rail: 9.75rem;
  list-style: none;
  margin: 1.75rem 0 2.5rem;
  padding: 0;
}

.lineage li {
  position: relative;
  display: grid;
  grid-template-columns: 9rem 1.5rem 1fr;
  padding: 0.55rem 0;
}

.lineage .when {
  grid-column: 1;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 0.2rem;
}

.lineage .what {
  grid-column: 3;
}

/* The run of the line between one node and the next. */
.lineage li::before {
  content: "";
  position: absolute;
  left: var(--rail);
  top: 0;
  bottom: 0;
  border-left: 1px dashed var(--ink-softer);
}

/* Open at both ends: the rail starts at the first node and stops at the last. */
.lineage li:first-child::before {
  top: 1.15rem;
}

.lineage li:last-child::before {
  bottom: calc(100% - 1.15rem);
}

/* The node. Filled with paper, not transparent, so the dashes stop cleanly at
   its edge instead of showing through it. */
.lineage li::after {
  content: "";
  position: absolute;
  left: var(--rail);
  top: 1.15rem;
  width: 7px;
  height: 7px;
  margin-left: -4px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--ink-soft);
}

/* The living animal at the head of each line is the one the reader is standing
   next to. Its node is filled, so the eye starts there and walks down. */
.lineage li:first-child::after {
  background: var(--ink-soft);
}

/* The aside that keeps the list honest — who is in this place but NOT on the
   line above it. Without it a reader draws a chain through everything on the
   page, which is the error the whole page exists to prevent. */
.lineage__note {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin: -1rem 0 2.5rem;
}

/* ------------------------------------------------ construction diagram */

/* One, seven, nineteen. The three svgs share a stroke width in their own
   coordinate space, so they read as the same line weight at different sizes. */
.steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin: 3rem 0 1rem;
  color: var(--ink-soft);
}

.steps svg {
  width: 100%;
  max-width: 150px;
  height: auto;
}

.steps__caption {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--ink-softer);
  margin-bottom: 2.5rem !important;
}

/* The hallmark is a link on pages that are not the mark's own page. Keep it
   looking like a drawing, not like a button. */
a.mark-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 0;
}

a.mark-link:hover .mark,
a.mark-link:focus-visible .mark {
  color: var(--accent);
}

/* --------------------------------------------------------- author photo */

.portrait {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 3.5rem auto 0;
  border-radius: 2px;
  filter: grayscale(100%) contrast(1.02);
}

/* The Lines page groups by source, so each grid needs a quiet header rather
   than a heading that competes with the sentences underneath it. */
.lines__group {
  margin: 3.5rem 0 -0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-softer);
  text-align: center;
}

.lines__group em {
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.08em;
}

/* ------------------------------------------------------- essay listing */

.entries {
  margin-top: 3.5rem;
  list-style: none;
}

.entry {
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--ink-faint);
}

.entry:first-child {
  border-top: 1px solid var(--ink-faint);
}

.entry__date {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-softer);
}

.entry__title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 0.5rem;
}

.entry__title a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.entry__title a:hover,
.entry__title a:focus {
  border-bottom-color: var(--accent);
}

.entry__standfirst {
  margin-top: 0.6rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

.entry--planned .entry__title {
  color: var(--ink-softer);
  font-weight: 400;
}

/* ------------------------------------------------------------ press kit */

.facts {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2rem;
  font-size: 0.9375rem;
}

.facts th,
.facts td {
  text-align: left;
  vertical-align: top;
  padding: 0.7rem 1rem 0.7rem 0;
  border-bottom: 1px solid var(--ink-faint);
}

.facts th {
  font-weight: 500;
  color: var(--ink-softer);
  white-space: nowrap;
  letter-spacing: 0.04em;
}

.table-scroll {
  overflow-x: auto;
}

.copyblock {
  border-left: 1px solid var(--ink-faint);
  padding-left: 1.5rem;
  margin: 1.75rem 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

.copyblock p {
  margin-bottom: 1em;
}

.copyblock p:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------- form */

.cta {
  text-align: center;
  margin: 0 auto;
  max-width: var(--narrow);
}

.cta p {
  margin-bottom: 1.2em;
}

.cta p:last-child {
  margin-bottom: 0;
}

.cta__note {
  font-size: 0.8125rem;
  color: var(--ink-softer);
  margin-top: 1.5rem;
}

.form {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.form input[type="email"] {
  width: 100%;
  max-width: 360px;
  padding: 0.85rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink-softer);
  border-radius: 2px;
  text-align: center;
  transition: border-color 0.2s ease;
}

.form input[type="email"]:focus {
  border-color: var(--accent);
}

.form input[type="email"]::placeholder {
  color: var(--ink-softer);
}

.form button {
  padding: 0.85rem 2rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.form button:hover,
.form button:focus {
  background: var(--accent);
  color: var(--paper);
}

/* Ruled form — the press inquiry, Spiro's choice of three designs on 2026-08-15.
   The first attempt was five boxed fields with labels above, and it was wrong in
   a way only a screenshot showed: the site is hairlines and open paper, so five
   heavy rectangles read as a government form dropped into a book, and the field
   column lined up with neither the prose nor the page centre. Rules instead of
   boxes, labels in the nav's small caps in a fixed left column, so every field
   shares one left edge and one right edge. */
.form--rule {
  align-items: stretch;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  gap: 1.6rem;
}

.rulefield {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

/* Fixed basis, and nowrap — a label allowed to wrap ("ANYTHING ELSE") pushes its
   own field off the column the others share, which is exactly what it did. Keep
   labels inside 6.5rem or shorten the word, do not let this grow. */
.rulefield label {
  flex: 0 0 6.5rem;
  white-space: nowrap;
  padding-top: 0.45rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-softer);
}

/* `max-width: none` is load-bearing: the base `.form input[type="email"]` rule
   above caps the sign-up field at 360px, and without this the email line alone
   came up short of every other rule on the form. Same specificity, later in the
   sheet — it only wins the properties it actually names. */
.form--rule input[type="text"],
.form--rule input[type="email"],
.form--rule select,
.form--rule textarea {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  padding: 0.35rem 0 0.5rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  text-align: left;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-softer);
  border-radius: 0;
  transition: border-color 0.2s ease;
}

.form--rule select {
  appearance: none;
  -webkit-appearance: none;
}

/* No resize grabber — it draws a hatched corner on a page that has no other
   piece of browser chrome anywhere on it. */
.form--rule textarea {
  resize: none;
  min-height: 3.5rem;
  padding-top: 0.35rem;
}

.form--rule input:focus,
.form--rule select:focus,
.form--rule textarea:focus {
  border-bottom-color: var(--accent);
}

.form--rule button {
  align-self: center;
  margin-top: 1rem;
}

/* One phone-width fallback: at 380px the label column plus a usable field no
   longer fit side by side, so the label goes above its own rule. */
@media (max-width: 420px) {
  .rulefield {
    flex-direction: column;
    gap: 0.2rem;
  }
  .rulefield label {
    flex: none;
    padding-top: 0;
  }
}

/* Print only. The one-sheet hides every form, so an editor holding the paper
   needs the address the form lives at, not a link to it. */
.print-url {
  display: none;
}

/* Honeypot — never shown to a human, never focusable. Bots fill it; we discard those. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

footer {
  text-align: center;
  margin-top: 6rem;
  /* Side padding matches main's. The footer sits outside main, so without it
     the link row ran edge-to-edge on a narrow window. */
  padding: 2rem 1.5rem 0;
  color: var(--ink-softer);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

/* Keeps a two-word label and its trailing dot on one line, so the footer row
   can only break between links. */
footer .fl {
  white-space: nowrap;
}

footer a {
  color: var(--ink-softer);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  /* 16px tall was under the 24px target minimum. inline-block lets the padding
     count toward the hit area; the row simply breathes a little more. */
  display: inline-block;
  padding: 0.3rem 0;
}

footer a:hover,
footer a:focus {
  color: var(--ink-soft);
  border-bottom-color: var(--accent);
}

/* ------------------------------------------------------------- focus */

/* Six rules used to set `outline: none` and lean on a substitute. Most held up,
   but two did not: the nav's 1px hairline was nearly identical to the "you are
   here" marker, and a prose link — which already carries an accent underline at
   rest — changed only its text color, so focus and hover looked the same. One
   baseline ring behind all of them. :focus-visible means a mouse click never
   draws it; only keyboard focus does, so the look is unchanged for most readers.
   The element-specific treatments below still layer on top. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.figure:focus-visible,
.table-scroll:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

@media (max-width: 600px) {
  .pagehead {
    padding: 4rem 1.25rem 0;
  }
  main {
    padding: 0 1.25rem 3rem;
  }
  .title {
    font-size: 2rem;
    letter-spacing: 0.14em;
  }
  .title--page {
    font-size: 1.25rem;
  }
  .subtitle {
    font-size: 1.15rem;
  }
  body {
    font-size: 17px;
  }
  .opening p:first-child,
  .lede {
    font-size: 1.1rem;
  }
  .mark--divider {
    margin: 3rem auto;
  }
  .nav {
    gap: 0.7rem;
    font-size: 0.75rem;
  }
  .nav__row {
    gap: 0.7rem 1.1rem;
  }
  /* One column on a phone. A 9rem label column leaves too little for the text
     beside it and every row wraps to three lines. The rail moves to the far
     left and the row is indented to clear it, so the line survives the
     reflow — it is the whole point of the list and must not be the thing
     that gets dropped at 600px. */
  .lineage {
    --rail: 0.25rem;
  }
  .lineage li {
    grid-template-columns: 1fr;
    gap: 0.2rem;
    padding-left: 1.6rem;
  }
  .lineage .when,
  .lineage .what {
    grid-column: 1;
  }
  .lineage .when {
    padding-top: 0;
  }
  footer {
    padding: 2rem 1.25rem 0;
  }
  .pull {
    font-size: 1.1875rem;
  }
}

/* Print. The press page IS the one-sheet — an editor hits Cmd-P and gets a clean
   PDF, so there is no separate asset to keep in sync with the site. */
@media print {
  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }
  main,
  .pagehead {
    max-width: none;
    padding: 0;
  }
  .skip,
  .nav,
  .cta,
  .form,
  .mark--divider,
  footer {
    display: none !important;
  }
  .prose a,
  .facts a {
    color: #000;
    border-bottom: none;
  }
  .print-url {
    display: inline;
  }
  .prose h2 {
    page-break-after: avoid;
    margin-top: 1.6rem;
  }
  .copyblock,
  .card,
  .entry {
    page-break-inside: avoid;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
}

/* ── Copy guard ────────────────────────────────────────────────────────────
   Spiro, 2026-08-15: "make everything on the site non copiable like ctrl+c
   right click etc."

   THIS IS A SPEED BUMP, NOT A LOCK, and it is written down here so the next
   person to read this file is not misled by it. Every word of the prose still
   ships inside the HTML. View-source, curl, Reader Mode, a translation
   extension, or simply turning JavaScript off all still reach it, and a
   screenshot plus OCR always will. What this stops is the casual
   highlight-and-copy — which is what was asked for.

   FORM FIELDS ARE EXEMPT, DELIBERATELY. The subscribe field on / and the six
   press fields on /press.html are typed into, and a reader who cannot paste
   an email address into them cannot sign up. Blocking selection there costs
   subscribers, which is the opposite of what the site is for.

   The rule below is belt and braces with the selectstart handler in guard.js:
   if this stylesheet is served stale from a cache, the script still prevents
   selection on its own. */

body {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;   /* iOS long-press copy sheet */
}

input,
textarea,
select,
[contenteditable="true"] {
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}