/* Shared stylesheet for the reply and essay posts (blog-*.html).

   Same tokens as index.html / blog.html / paper.html. Those pages inline their CSS;
   the posts share this file because their inline copies had drifted into eight
   variants. Change a token here and all 23 posts follow.

   Deliberate departures from the old post styling: ragged-right text (justified
   text at 720px opened visible rivers on phones), no tinted-and-rounded boxes,
   no tracked all-caps labels, and --l3-ink instead of #6c63ff (3.65:1 on paper,
   under the 4.5 AA floor for body-size text). */

/* Fallback faces with measured metrics, so the swap from Georgia / the default
   mono to the web fonts does not reflow the masthead (see CHANGELOG, 2026-08-25). */
@font-face {
  font-family: "Newsreader Fallback";
  src: local("Georgia"), local("Times New Roman"), local("Times");
  size-adjust: 100.6%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Plex Mono Fallback";
  src: local("Menlo"), local("Consolas"), local("DejaVu Sans Mono"), local("Courier New");
  size-adjust: 109.1%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  --paper:  #fbfbfc;
  --ink:    #14161c;
  --deep:   #0e1116;
  --muted:  #666d7a;
  --muted-d:#8b93a3;
  --rule:   #e4e7ed;
  --l1:     #d1495b;
  --l3:     #7b73ff;
  --l1-ink: #b03347;
  --l3-ink: #5a4fd6;
  --serif:  "Newsreader", "Newsreader Fallback", Georgia, serif;
  --mono:   "IBM Plex Mono", "Plex Mono Fallback", ui-monospace, Menlo, monospace;
  --wrap:   1080px;
  /* rem, not ch: `ch` resolves against each element's own font size, so an h2
     would get a wider box than a paragraph and its rule would overshoot the text.
     36rem is ~70 characters of Newsreader at body size. */
  --read:   36rem;
}

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

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

body {
  font-family: var(--serif);
  font-optical-sizing: auto;
  background: var(--paper);
  color: var(--ink);
  font-size: 19px;
  line-height: 1.66;
}

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

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

/* ── Masthead: the same dark ground as the site's other headers ─────────── */
.masthead {
  background: var(--deep);
  color: #eef0f4;
  border-bottom: 1px solid #000;
  padding-bottom: clamp(34px, 5vw, 60px);
}
.crumb {
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  padding: 18px 0 0;
  font-family: var(--mono);
  font-size: 0.76rem;
  color: #4d5667;
}
.crumb a {
  color: #b9c0cd;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding: 3px 0;
}
.crumb a:hover { color: #fff; border-bottom-color: var(--l3); }
.crumb a:focus-visible { outline-color: #a39dff; }

.masthead h1 {
  max-width: 22em;
  margin-top: clamp(30px, 5.5vw, 64px);
  font-size: clamp(2.05rem, 4.4vw, 3.3rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.subtitle {
  max-width: 58ch;
  margin-top: 20px;
  font-size: clamp(1.02rem, 1.7vw, 1.14rem);
  font-style: italic;
  line-height: 1.52;
  color: #b9c0cd;
  text-wrap: pretty;
}

/* ── Reading column ─────────────────────────────────────────────────────── */
/* Left-aligned on the same 1080 wrap as the masthead, so title and prose share
   one left edge. The .wrap rule can't be reused here: `article` is the sole
   element carrying both the wrap padding and the vertical rhythm. */
article {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(34px, 5vw, 56px) 28px clamp(64px, 8vw, 104px);
}
article > * { max-width: var(--read); }
article > .table-wrap { max-width: min(100%, 58rem); }

.meta {
  margin-bottom: 2.4rem;
  padding-bottom: 1.3rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted);
}

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

h2 {
  margin: 3.1rem 0 0.9rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h3 {
  margin: 2.1rem 0 0.5rem;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
strong { font-weight: 600; }
em { font-style: italic; }

a {
  color: var(--l3-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--l3-ink) 38%, transparent);
}
a:hover { text-decoration-color: currentColor; }

ul, ol { margin: 0 0 1.05em 1.4em; }
li { margin-bottom: 0.4em; padding-left: 0.2em; }

/* A quotation: thin rule, italic, no fill. Callouts below use a top bar instead,
   so the two read as different kinds of thing. */
blockquote {
  margin: 1.6em 0;
  padding: 0.05em 0 0.05em 1.25em;
  border-left: 3px solid var(--l3);
  font-style: italic;
  color: #3d4351;
}
blockquote p { margin: 0 0 0.6em; }
blockquote p:last-child { margin-bottom: 0; }

/* A set-aside summary ("The position", "The shared diagnosis"). */
.callout {
  margin: 2.1em 0;
  padding: 1.15em 1.4em 0.55em;
  background: #fff;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--l3);
  border-radius: 3px;
}
.callout-label {
  margin-bottom: 0.4em;
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--l3-ink);
}
.callout p { font-size: 0.97rem; line-height: 1.6; }
.callout.gold { border-top-color: var(--l1); }
.callout.gold .callout-label { color: var(--l1-ink); }

/* Tables: the class is added around bare tables so a wide one scrolls instead of
   breaking the page at phone width. */
.table-wrap { margin: 1.9em 0; overflow-x: auto; }
table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.88rem;
  line-height: 1.5;
}
th, td {
  padding: 0.6em 1em 0.6em 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
th { font-weight: 600; border-bottom: 2px solid var(--ink); }

.equation {
  display: inline-block;
  margin: 0.4em 0;
  padding: 0.3em 0.65em;
  font-family: var(--mono);
  font-size: 0.86rem;
  background: #eef0f6;
  border-radius: 2px;
}

.figure { margin: 2em 0; }
.figure img { max-width: 100%; height: auto; border: 1px solid var(--rule); }
.figure-caption { margin-top: 0.5em; font-size: 0.88rem; color: var(--muted); }

.refs, .ref-list { font-size: 0.88rem; line-height: 1.6; color: var(--muted); }
.ref-list li { margin-bottom: 0.55em; }

/* Three older posts still carry a hand-written footer block above the shared
   strip. Kept (one of them states a licence), but set as a quiet colophon. */
.footer {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 28px 44px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted);
}
.footer p { margin: 0 0 0.4em; }

/* The shared footer strip carries its own inline styles (identical on every
   page). Re-seat it on the 28px wrap gutter so it lines up with the content;
   its own 24px padding put the text 28px left of the prose on wide screens.
   `footer.btb-strip` out-ranks the strip's own `.btb-strip`. */
footer.btb-strip { padding-inline: 0; }
footer.btb-strip .btb-strip-inner { padding-inline: 28px; }

@media (max-width: 860px) {
  body { font-size: 17.5px; }
  h2 { font-size: 1.5rem; margin-top: 2.6rem; }
  h3 { font-size: 1.2rem; }
}
@media (max-width: 480px) {
  .wrap, article, .footer { padding-left: 20px; padding-right: 20px; }
  footer.btb-strip .btb-strip-inner { padding-inline: 20px; }
}

@media print {
  .masthead { background: none; color: #000; border-bottom: 1px solid #999; }
  .masthead .subtitle { color: #333; }
  .crumb { display: none; }
  footer.btb-strip { display: none; }
  a { color: inherit; }
}