/* ============================================================================
   editorial.css — the four editorial pages: note, standards, about, support.
   (§ED115-3, extracted 2026-08-07.)

   WHAT THIS FILE IS. Until now these four pages carried four hand-rolled inline
   <style> blocks — 45–56 lines each — describing ONE layout four times: the
   same centred flex frame, the same 26px→72px→160px padding ladder, the same
   return link, the same display-face title grammar. §ED113 named that the
   "welcome-went-dark drift vector": nothing was wrong with any one copy, but a
   ruling applied to one of them reached the other three only if somebody
   remembered. This is that layout, written once.

   THIS IS AN EXTRACTION, NOT A REDESIGN. Every declaration below is the value
   that was already on disk. Where two pages agreed byte-for-byte the selectors
   are GROUPED (one rule, four callers); where they genuinely differed the
   difference SURVIVES as its own ruleset with a comment saying why. Nothing
   here renders differently from what shipped — that was the constraint, and
   grouping rather than unifying is what keeps it true. Unifying .nt-open's
   2.1rem with .std-title's 2.3rem would have been a redesign, so it was not
   done; they sit side by side with their reasons instead.

   WHY THESE PAGES ARE NOT ON THE LANDING SCALE (.lv2-h1 et al). They are not
   hero surfaces. .lv2-h1 is a cold-open landing hero at clamp(2.5rem, 6.5vw,
   4rem); these are reading columns whose titles sit above 60–66ch of prose at
   a 1.05–1.2rem body size. Putting a 64px hero over 17px prose is not a scale,
   it is a mismatch. What IS shared with the landing is the thing that matters:
   the FACE and the TOKENS — var(--font-display) for every title, var(--font-
   body) for every line of prose, and no colour literal anywhere. No page below
   names a typeface directly.

   SHARED CHROME LIVES ELSEWHERE. .site-header / .site-footer are generated by
   scripts/inject-site-chrome.js and styled in global.css. Do not duplicate
   them here.
   ============================================================================ */

/* ── THE FRAME ───────────────────────────────────────────────────────────────
   Was four identical copies. Centred column, full-height, page background and
   ink from tokens, 26px of gutter on a phone. ─────────────────────────────── */
.nt-page,
.std-page,
.ab-page,
.sp-page {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 26px 64px;
}
/* about.html alone carries no bottom gutter on the frame: its .ab-cta-wrap
   supplies its own 56px below the fold, and 64px on top of that left a visible
   dead band under the CTA. A VALUE differs; the rule does not. */
.ab-page { padding-bottom: 0; }

/* ── THE READING COLUMN ──────────────────────────────────────────────────────
   Four different measures, and the differences are real: each column is sized
   to ~60–66ch AT ITS OWN BODY SIZE, which is the reading-measure target the
   three trailing comments in the old inline blocks were all reaching for. A
   single shared max-width would have broken that target on three of the four
   pages, so the measures stay per-page and say what they are. ────────────── */
.nt-col,
.std-col,
.ab-col,
.sp-col { width: 100%; }

/* note.html — the one apex page that should read like a letter, so the column
   is narrower and the leading more generous than the rest of the site's prose. */
.nt-col { max-width: 620px; padding: 78px 0 40px; }
/* standards.html — mostly structured prose and numbered lists at a smaller body
   size, so the measure runs wider before it passes 66ch. */
.std-col { max-width: 680px; padding: 56px 0 40px; }
/* about.html — vertically centred, because the manifesto is short enough to sit
   in the middle of the viewport rather than at the top of a scroll. */
.ab-col {
  flex: 1;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 86px 0 64px;
}
/* support.html — a short centred card page, not a reading column; the narrow
   measure is what keeps the contact block from stranding in white space. */
.sp-col { max-width: 560px; padding: 96px 0 40px; text-align: center; }

/* ── TITLES ──────────────────────────────────────────────────────────────────
   standards and support were byte-identical here and are now one rule. Both
   are section titles over body prose: display face, light weight, 2.3→2.7rem.
   DESIGN-INVARIANTS reserves var(--font-display) for headings and display
   text, which is why every title below is a token and none names a face —
   §ED430 (2026-08-20) repoints --font-display itself from Cormorant Garamond
   to Fraunces, so these titles now render in Fraunces; the old "Fraunces
   stays on the wordmark alone" rule is superseded in DESIGN-INVARIANTS.md,
   not deleted. ──────────────────────────────────────────────────────────── */
.std-title,
.sp-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 2.3rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
/* Margins are the only thing these two ever disagreed about. */
.std-title { margin: 0 0 0.3em; }
.sp-title { margin: 0 0 16px; }

/* note.html has no title — it opens IN the letter. The opening line is display
   type doing a heading's job, so it is heavier (500) and set one step smaller
   than a standalone title would be, because a sentence at 2.3rem/300 reads as
   a headline rather than as the first thing said. Deliberate, and the reason it
   is not grouped above. */
.nt-open {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.1rem;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 1.1em;
  text-wrap: balance;
}
/* Emphasis in the opening line is a COLOUR shift, not an italic — the display
   face's italic is too decorative at this size. */
.nt-open em { font-style: normal; color: var(--accent-ink); }

/* ── PROSE ───────────────────────────────────────────────────────────────────
   Shared family and optical tracking; per-page sizes, because these three
   pages are set at three different reading registers on purpose (see each
   column's measure above — the two are chosen together). ─────────────────── */
.nt-body,
.std-body {
  font-family: var(--font-body);
  letter-spacing: -0.006em;
  color: var(--text-primary);
}
/* note.html reads as a letter: larger, and markedly more generous leading. */
.nt-body { font-size: 1.15rem; line-height: 1.85; }
.nt-body p { margin: 0 0 1.5em; }
.nt-body p:last-of-type { margin-bottom: 0; }
/* The homeland aside — a quieter register inside the letter's own voice. */
.nt-homeland { font-style: italic; color: var(--text-subtle); font-size: 1rem; }

/* standards.html is a document, not a letter: tighter size and leading so the
   numbered clauses stay scannable. */
.std-body { font-size: 1.05rem; line-height: 1.75; }
.std-body p { margin: 0 0 1.3em; }
.std-body h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--text-primary);
  margin: 2em 0 0.6em;
}
.std-body h2:first-of-type { margin-top: 0; }
.std-body ol { margin: 0 0 1.3em; padding-left: 1.35em; }
.std-body ol li { margin: 0 0 0.9em; }
.std-body ol li:last-child { margin-bottom: 0; }
.std-body strong { font-weight: 700; }
.std-updated {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-subtle);
  margin: 0 0 2.4em;
}

/* about.html is the outlier and stays one: its BODY is display type. The whole
   page is one short manifesto set large — the oversized register IS the page,
   which is also why the 60–66ch measure above does not govern its column. */
.ab-body {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--text-primary);
}
.ab-body p { margin: 0 0 1.1em; }
.ab-body p:last-child { margin-bottom: 0; }
.ab-mark-lime { text-shadow: 0 3px 10px rgba(22, 22, 22, 0.35); }
/* The signature rides at 0.6em of the manifesto size — relative on purpose, so
   it tracks the body through both breakpoints instead of needing its own. */
.ab-sign { margin: 1.6em 0 0 !important; font-style: italic; font-size: 0.6em; color: var(--text-subtle); }

/* support.html's lede — body face, muted, sitting under the title. */
.sp-lede {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 40px;
}

/* ── THE RETURN LINK ─────────────────────────────────────────────────────────
   note and standards carried byte-identical copies of this. One rule now. */
.nt-end,
.std-end {
  display: block;
  width: 100%;
  text-align: center;
  margin: 3.2em 0 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent-ink);
  text-decoration: none;
  transition: opacity 120ms ease;
}
.nt-end:hover,
.std-end:hover { opacity: 0.72; }

/* Companion-piece link — quiet, below the primary return, not competing with
   it. The note argues, the standards prove. */
.nt-standards-link {
  display: block;
  width: 100%;
  text-align: center;
  margin: 1.1em 0 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-subtle);
  text-decoration: none;
  transition: color 120ms ease;
}
.nt-standards-link:hover { color: var(--text-primary); }

/* about.html's CTA is NEUTRAL, not lime: the injected site header already
   carries "Read today's edition", and the PALETTE INVARIANT allows one lime
   moment per view. This is the second action on the page, so it is a ruled
   underline rather than a fill. */
.ab-cta-wrap {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 8px 0 56px;
}
.ab-cta {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 2px solid var(--border-strong);
  padding-bottom: 3px;
  transition: opacity 120ms ease;
}
.ab-cta:hover { opacity: 0.7; }
.ab-cta-note { font-family: var(--font-body); font-size: 0.75rem; color: var(--text-subtle); }

/* ── support.html's contact block ────────────────────────────────────────── */
.sp-contact {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 32px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  margin: 0 0 40px;
}
.sp-contact-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.sp-contact-email {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--accent-ink);
  text-decoration: none;
}
.sp-contact-email:hover { text-decoration: underline; }
.sp-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  font-family: var(--font-body);
  font-size: 0.9rem;
}
.sp-links a { color: var(--text-subtle); text-decoration: none; transition: color 120ms ease; }
.sp-links a:hover { color: var(--text-primary); }

/* ── about.html's rise-in ────────────────────────────────────────────────────
   Kept page-local rather than promoted to a shared utility: it is the only
   entrance animation on any of the four, and generalising a one-caller effect
   into a shared name invites the other three to grow one. ────────────────── */
.ab-rise {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1100ms cubic-bezier(.16, .8, .3, 1), transform 1100ms cubic-bezier(.16, .8, .3, 1);
  animation: abRiseFallback .8s ease 1s forwards;
}
.ab-rise.in { opacity: 1; transform: none; animation: none; }
@keyframes abRiseFallback { to { opacity: 1; transform: none; } }

/* ── THE PADDING LADDER ──────────────────────────────────────────────────────
   26px phone → 72px tablet → 160px real desktop. Three of the four step at
   640px; about.html steps at 900px instead, because its display-size body
   needs the extra width before the frame closes in. Two breakpoints, stated
   rather than repeated four times. ───────────────────────────────────────── */
@media (min-width: 640px) {
  .nt-page,
  .std-page,
  .sp-page { padding-left: 72px; padding-right: 72px; }
  /* Both reading columns converge on 660px here — ~63–66ch at their tablet
     body sizes, which is the measure target both old comments cited. */
  .nt-col,
  .std-col { max-width: 660px; }
  .nt-open { font-size: 2.5rem; }
  .nt-body { font-size: 1.2rem; }
  .std-title,
  .sp-title { font-size: 2.7rem; }
  .std-body { font-size: 1.1rem; }
}

@media (min-width: 900px) {
  .ab-page { padding-left: 72px; padding-right: 72px; }
  .ab-col { max-width: 720px; }
  .ab-body { font-size: 2.05rem; line-height: 1.45; }
  .ab-cta-wrap { max-width: 720px; }
}

/* Real desktop (1440/1920): 72px either side of a ~700px column reads as an
   afterthought on a big monitor, so the frame opens up. Columns are unchanged —
   they are already at their measure. support.html is deliberately ABSENT: it is
   a short centred card, and widening its frame only strands the card further. */
@media (min-width: 1400px) {
  .nt-page,
  .std-page,
  .ab-page { padding-left: 160px; padding-right: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-rise { opacity: 1; transform: none; animation: none; }
  .ab-cta { transition: none; }
}