:root {
  --ink: #14181d;
  --ink-soft: #4b5563;
  --line: #dfe3e8;
  --line-soft: #eef1f4;
  --bg: #ffffff;
  --bg-soft: #f6f8fa;
  --accent: #1f6f4a;
  --accent-soft: #e8f3ec;
  --warn: #8a4b00;
  --warn-soft: #fff6e6;
  --code-bg: #f2f4f7;
  --radius: 10px;
  --maxw: 740px;
  --link: #1b4332;
  --link-underline: #95d5b2;

  /* 2026-10-03: aliases for the legacy variable names still used by the
     mobile table-card block below (--border / --text-light / --shadow).
     Without these the mobile cards lost their border and shadow. */
  --border: var(--line);
  --text-light: var(--ink-soft);
  --shadow: 0 1px 3px rgba(20, 24, 29, 0.06);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Charter", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.65;
  overflow-x: hidden;
}

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

/* ---------- header ---------- */

header.wrap {
  padding-top: 30px;
  padding-bottom: 8px;
}

/* ---------- site chrome (matches the rest of the site) ---------- */

.site-header {
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.site-header .inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.brand {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.brand:hover { color: var(--accent); }

.site-nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.site-nav a {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}

.site-nav a:hover { color: var(--accent); }

.site-nav a[aria-current="page"] {
  color: var(--accent);
  font-weight: 700;
}

.site-footer {
  border-top: 1px solid var(--line);
  background: #fafafa;
  margin-top: 0;
}

.site-footer .inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 26px 20px 40px;
}

.footer-nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.footer-nav a {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
}

.footer-nav a:hover { color: var(--accent); }

.site-footer p {
  margin: 0 0 8px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.6;
}

.kicker {
  margin: 0 0 10px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

h1 {
  margin: 0 0 14px;
  font-size: clamp(30px, 6.4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}

.lede {
  margin: 0;
  font-size: 19px;
  color: var(--ink-soft);
}

/* ---------- sections ---------- */

main.wrap {
  padding-bottom: 40px;
}

section {
  margin-top: 56px;
}

h2 {
  margin: 0 0 14px;
  font-size: 25px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  overflow-wrap: break-word;
}

p {
  margin: 0 0 14px;
}

.faq h3 {
  margin-top: 26px;
  margin-bottom: 6px;
}

.faq h3:first-of-type {
  margin-top: 18px;
}

.sectionnote {
  color: var(--ink-soft);
  font-style: italic;
}

/* ---------- the answer block ---------- */

.answer {
  margin-top: 28px;
  padding: 22px 22px 18px;
  background: var(--accent-soft);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.answer h2 {
  margin-bottom: 10px;
  font-size: 21px;
}

.answer .big {
  font-size: 20px;
  margin-bottom: 10px;
}

.answer p:last-child {
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: 17px;
}

/* ---------- code ---------- */

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.92em;
  background: var(--code-bg);
  padding: 2px 6px;
  border-radius: 5px;
  overflow-wrap: anywhere;
}

/* ---------- warning ---------- */

.gap {
  padding: 14px 16px;
  background: var(--warn-soft);
  border-left: 4px solid var(--warn);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: #5f3500;
  font-size: 17px;
}

.gap strong {
  color: var(--warn);
}

/* ---------- seed cards ---------- */

.seed {
  margin: 0 0 18px;
  padding: 18px 20px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.seed h3 {
  margin: 0 0 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.seed ul {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-soft);
}

.seed li {
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 16.5px;
  overflow-wrap: anywhere;
}

.seed li span {
  display: inline-block;
  min-width: 108px;
  margin-right: 8px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  vertical-align: baseline;
}

.seed p {
  margin: 0;
  font-size: 16.5px;
  color: #333b45;
}

.seed p.seednote {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 15.5px;
  font-style: italic;
  color: var(--ink-soft);
}

/* ---------- copy button ---------- */

.copyrow {
  margin-top: 14px;
}

.copybtn {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  min-height: 32px;
}

.copybtn:hover {
  background: var(--bg-soft);
  border-color: #c6ccd4;
}

.copybtn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.copybtn[data-state="ok"] {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ---------- exclusive ---------- */

.exclusive {
  padding: 22px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

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

/* ---------- gap box ---------- */

.gapbox {
  padding: 22px;
  background: var(--warn-soft);
  border: 1px solid #f0dcb8;
  border-radius: var(--radius);
}

.gapbox h2 { color: var(--warn); }

.gapbox ul {
  margin: 0;
  padding-left: 20px;
}

.gapbox li {
  margin-bottom: 10px;
  font-size: 17px;
  overflow-wrap: anywhere;
}

.gapbox li:last-child { margin-bottom: 0; }

/* ---------- footer ---------- */

footer.wrap {
  margin-top: 16px;
  padding-top: 22px;
  padding-bottom: 56px;
  border-top: 1px solid var(--line);
}

footer p {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-soft);
}

/* ---------- mobile ---------- */

@media (max-width: 600px) {
  body { font-size: 17px; }

  header.wrap { padding-top: 24px; }

  .site-header .inner { padding: 12px 16px; }
  .site-footer .inner { padding: 22px 16px 32px; }
  .site-nav { gap: 14px; }
  .site-nav a { font-size: 14px; }
  .footer-nav { gap: 14px; }
  .footer-nav a { font-size: 14px; }

  .lede { font-size: 17.5px; }

  .answer { padding: 18px 16px 14px; }
  .answer .big { font-size: 18px; }

  h2 { font-size: 22px; }
  section { margin-top: 40px; }

  .seed { padding: 16px 14px; }
  .seed h3 { font-size: 18px; }
  .seed li { font-size: 15.5px; }

  .seed li span {
    display: block;
    min-width: 0;
    margin-right: 0;
    margin-bottom: 2px;
  }

  .exclusive, .gapbox { padding: 16px; }
}

@media (max-width: 380px) {
  .wrap { padding: 0 14px; }
  .seed h3 { font-size: 16.5px; }
}

/* ---------- article figures ---------- */

figure {
  margin: 0 0 22px;
}

figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
}

figcaption {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}
/* appended */

/* ---------- seed code + feature tags ---------- */
code.seedcode {
  font-family: "SF Mono", "Fira Code", Consolas, monospace;
  background: var(--code-bg);
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 15px;
  word-break: break-all;
}

.seedline {
  margin: 14px 0;
  font-size: 17px;
  line-height: 1.5;
}

.seedline .seedcode {
  font-size: 16px;
}

.tags {
  margin: 0 0 12px;
}

.tag {
  display: inline-block;
  font-family: "SF Mono", "Fira Code", Consolas, monospace;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  padding: 3px 11px;
  margin: 0 6px 6px 0;
}

.tag.bad {
  background: var(--warn-soft);
  color: var(--warn);
}

/* ---------- tables ---------- */
.table-wrapper {
  overflow-x: auto;
  margin: 24px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 620px;
}

thead {
  background: var(--bg-soft);
}

th {
  padding: 11px 13px;
  text-align: left;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}

td {
  padding: 10px 13px;
font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

tbody tr:nth-child(even) {
  background: #fafbfc;
}

@media (max-width: 520px) {
  table { font-size: 14px; }
  th, td { padding: 9px 10px; }
}

/* ---------- mobile tables: rows become cards (2026-09-26) ---------- */
@media (max-width: 1000px) {
  .table-wrapper {
    overflow-x: visible;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
    margin: 18px 0;
  }
  .table-wrapper table {
    min-width: 0;
    display: block;
    font-size: 15px;
  }
  .table-wrapper thead {
    display: none;
  }
  .table-wrapper tbody,
  .table-wrapper tr,
  .table-wrapper td {
    display: block;
    width: 100%;
  }
  .table-wrapper tbody tr:nth-child(even) {
    background: #ffffff;
  }
  .table-wrapper tr {
    margin: 0 0 12px;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
  }
  .table-wrapper td {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    min-width: 0;
    overflow-wrap: break-word;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px dashed var(--border);
    text-align: left;
  }
  .table-wrapper tr td:last-child {
    border-bottom: none;
  }
  .table-wrapper td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--text-light);
    padding-right: 10px;
  }
  .table-wrapper td:first-child::before {
    color: var(--accent);
  }
}


/* ---------- narrow seed code shrink (2026-09-28) ---------- */
@media (max-width: 380px) {
  code.seedcode {
    font-size: 13.5px;
  }
}

/* ---------- copy button ---------- */

.copyrow {
  margin-top: 14px;
}

.copybtn {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  min-height: 32px;
}

.copybtn:hover {
  background: var(--bg-soft);
  border-color: #c6ccd4;
}

.copybtn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.copybtn[data-state="ok"] {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ---------- inline copy row + seed line ---------- */

.copyrow.inline {
  display: inline-block;
  margin: 0 0 0 8px;
  vertical-align: baseline;
}

.seedline {
  margin: 10px 0 0;
  font-size: 15.5px;
  color: var(--ink-soft);
}

.seedline code {
  font-size: 16px;
}
@media (max-width: 600px){ .copybtn{ min-height: 44px; padding: 10px 14px; } }

/* ---------- mobile nav: one-line scroll strip (2026-10-11) ---------- */
@media (max-width: 600px) {
  .site-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a {
    white-space: nowrap;
    padding: 10px 0;
  }
}

/* appended 2026-10-12: single-line nav at all widths (was @600 only) */
.site-nav {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a { white-space: nowrap; padding: 10px 0; }

/* mobile footer nav: one scrollable row (2026-10-13 T1) */
@media (max-width: 600px) {
  .footer-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 12px;
  }
  .footer-nav a {
    white-space: nowrap;
    padding: 6px 0;
  }
}
.footer-nav::-webkit-scrollbar { display: none; }

/* mobile nav tap height >= 46px (2026-10-14 T1) */
@media (max-width: 600px) {
  .site-nav a {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
  }
}

/* 2026-10-15 T1: match footer link tap height to the header nav on small screens */
@media (max-width: 600px) {
  .footer-nav a { min-height: 46px; display: inline-flex; align-items: center; }
}

/* ---------- mobile small-text legibility bump (2026-10-16) ---------- */
@media (max-width: 600px) {
  .kicker,
  .page-head .kicker,
  .updated-line,
  .site-footer p,
  .seed li span { font-size: 14px; }
}

/* 2026-10-17 T1: mobile copy button label 13px -> 14px (append at end; .copybtn is defined twice in this file) */
@media (max-width: 600px) {
  .copybtn {
    font-size: 14px;
  }
}

/* 2026-10-18 T1: mobile legibility - tag pills 13.5px -> 14px, narrow seed codes 13.5px -> 14px */
@media (max-width: 600px) {
  .tag { font-size: 14px; }
}
@media (max-width: 380px) {
  code.seedcode { font-size: 14px; }
}

/* ---------- mobile table card: let the field label wrap instead of pushing the page (2026-10-19) ---------- */
@media (max-width: 600px) {
  .table-wrapper td::before {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

/* 2026-10-20 T1: mobile legibility - unclassed inline <code> 13.8px -> 14px (table paths + seed codes in headings); .seedcode stays 15px */
@media (max-width: 600px) {
  code:not(.seedcode) { font-size: 14px; }
}

/* 2026-10-22 T1: .tag chips were the last 13.5px text on desktop (body 16px); 14.5px keeps the pill readable without growing the line */
.tag { font-size: 14.5px; }

/* 2026-10-21 T1: seed codes inside card headings now match the .seedcode chip (were plain inherited 13.8px) */
h3 > code {
  font-family: "SF Mono", "Fira Code", Consolas, monospace;
  background: var(--code-bg);
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 15px;
  word-break: break-all;
}
@media (max-width: 600px) {
  h3 > code { font-size: 14px; }
}

/* 2026-10-23 T1: kicker desktop 13px -> 14px (legibility of the eyebrow label) */
.kicker, .page-head .kicker, .hero .kicker { font-size: 14px; }

/* 2026-10-24 T1: caption readability - taller leading, capped measure */
figcaption { line-height: 1.65; max-width: 62ch; }

/* 2026-10-25 T1: seed-card field labels + footer prose 13/13.5px -> 14px (desktop floor) */
.seed li span, .site-footer p { font-size: 14px; }

/* 2026-10-26 T1: copy button raised to 14px on desktop (mobile was already 14px) */
.copybtn { font-size: 14px; }

/* 2026-10-27 T1: status pill breathing room - was 3px 11px, too tight against the 14.5px label */
.tag { padding: 4px 13px; }

/* 2026-10-28 T1: headline ragging - balance the wrap on page/section titles (browsers without support ignore it) */
h1, h2 { text-wrap: balance; }

/* 2026-10-28 T1b: hero banner height cap - at 1280 the full-bleed hero was 844px tall and pushed the whole first answer below the fold */
@media (min-width: 900px) {
  .hero img { max-height: 40vh; object-fit: cover; }
}

/* ---------- wide tables: keep the row label pinned while the rest scrolls ---------- */
@media (min-width: 1001px) {
  .table-wrapper thead th:first-child,
  .table-wrapper tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bg, #ffffff);
    box-shadow: inset -1px 0 0 var(--border, #e0e0e0);
  }
  .table-wrapper thead th:first-child {
    background: var(--table-header, #2d6a4f);
    z-index: 3;
  }
  .table-wrapper tbody tr:nth-child(even) td:first-child {
    background: var(--table-stripe, #f8f9fa);
  }
  .table-wrapper tbody tr:hover td:first-child {
    background: #eef5f1;
  }
}

/* 2026-10-29 T1: the last-updated badge was 13px on desktop and 14px on phones - the meta line was smaller on the big screen than on the small one. Raised to 14px everywhere. */
.updated-line { font-size: 14px; }

/* 2026-10-31 T1: the pinned first header cell was painted the dark table green (#2d6a4f) but its
   text kept the body colour (#14181d) - dark text on a dark green band, 2.79:1 contrast, unreadable
   in the screenshot. The rest of the header row is light, so only this cell needed the fix: its text
   is now white on the green, the same pairing the home page header already uses. */
@media (min-width: 1001px) {
  .table-wrapper thead th:first-child { color: #ffffff; }
}

/* 2026-11-01 T1: on the 23 pages whose hero figure sits outside <main> the image runs full-bleed
   but the caption stayed flush against the viewport edge, so the caption started at x=0 while the
   body copy started at x=283 - a 283px jump on the first line of prose. Measured on the new page at
   1280: figure 0-1265, caption left edge 0, body column left edge 283. The fix nudges the caption's
   left edge to the body column instead of stretching it to 700px, so the 64ch measure added on
   10-24 still holds and the caption simply sits above the paragraphs it belongs to. Inside the 18
   pages where the figure already sits in the column the calc resolves to 0 and nothing moves. */
@media (min-width: 900px) {
  figure figcaption { margin-left: calc(50% - var(--maxw) / 2 + 20px); margin-right: auto; }
}


/* 2026-11-01 PM T1: the reading measure. The body was set at the full 700px column, which
   measures 84-87 characters per line - measured with an exact first-line count (TreeWalker
   over the text nodes, then a binary search for the index where the first line breaks, so
   the short last line cannot distort the number). 28 of 31 paragraphs on a typical page ran
   past 75 characters, which is the point where the eye stops finding the start of the next
   line. The cap is written in `ch` so it scales with each element's own font instead of
   being one fixed pixel width: 62ch of the 18px Charter serif brings the median paragraph
   to 68-69 characters with nothing past 75, and the 17px list items to 63-70. Headings,
   tables and figures keep their full width, so nothing else on the page moves. */
main p, main li { max-width: 62ch; }

/* The text panels are capped to the same measure as the paragraphs inside them, so a panel
   hugs its own copy instead of leaving an empty band of background on the right. No panel
   holds a table - checked across all 46 pages - so nothing gets squeezed. */
.answer, .faq, .callout { max-width: 62ch; }


/* 2026-11-02 T1: in-content links were falling through to the browser default link
   style - pure blue (#0000ee) with the default underline - because these article
   stylesheets never declared a generic `a` rule. Only the home page had one, so the
   same site showed green links on the index and blue links inside every article.
   Scoped to the content column (main), the content footer and figure captions; the
   site nav and the footer nav are deliberately left alone - they declare their own
   colour and carry no underline. The hover state changes the underline colour rather
   than its width so the line does not reflow under the cursor. */
main a,
footer.wrap a,
figcaption a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid var(--link-underline);
}

main a:hover,
footer.wrap a:hover,
figcaption a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

main a:focus-visible,
footer.wrap a:focus-visible,
figcaption a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* appended 2026-11-03 (T1): the 2026-10-12 "single-line nav at all widths" change also set
   scrollbar-width:none and hid the webkit scrollbar. There are now 47 nav links; at 1280px
   only 6 are visible and nothing on screen said the strip scrolls, so 41 links looked missing.
   This restores a visible thin scrollbar on desktop only. Mobile keeps the hidden-bar swipe. */
@media (min-width: 1001px) {
  .site-nav {
    scrollbar-width: thin;
    scrollbar-color: #95d5b2 transparent;
    gap: 14px;
    padding-bottom: 6px;
  }
  .site-nav::-webkit-scrollbar {
    display: block;
    height: 6px;
  }
  .site-nav::-webkit-scrollbar-track {
    background: transparent;
  }
  .site-nav::-webkit-scrollbar-thumb {
    background: #95d5b2;
    border-radius: 3px;
  }
  .site-nav::-webkit-scrollbar-thumb:hover {
    background: #2d6a4f;
  }
  .site-nav a {
    font-size: 13.5px;
    padding: 9px 0;
  }
}

/* 2026-11-04 T1: single-word last lines. Measured before this rule, at 320px: 26 of 102
   paragraphs on the home page ended with one word alone on the final line, 13 of 56 on the
   archive page, 11 of 63 on the old-codes page. Headings were already balanced (2026-10-28);
   body copy was not, and a one-word line is the most visible rag on a narrow column because
   the eye reads it as a missing sentence. text-wrap: pretty lets the browser re-break the
   last few lines to avoid that. It changes no width, font or margin - on a browser that does
   not support the property the declaration is simply ignored. */
main p, main li, .answer .big, .lede, figcaption { text-wrap: pretty; }

/* appended 2026-11-05: phone nav strip had no scroll affordance (49 links, 5142px wide, 3 visible) */
@media (max-width: 600px){
  .site-nav{
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 90%, rgba(0,0,0,0.10) 100%);
    mask-image: linear-gradient(to right, #000 0%, #000 90%, rgba(0,0,0,0.10) 100%);
    overscroll-behavior-x: contain;
  }
  .footer-nav{
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 91%, rgba(0,0,0,0.10) 100%);
    mask-image: linear-gradient(to right, #000 0%, #000 91%, rgba(0,0,0,0.10) 100%);
    overscroll-behavior-x: contain;
  }
}

/* 2026-11-08 T1 - heading rhythm for prose <h3>.
   The 48 article stylesheets never had an h3 rule, so every bare <h3> in body copy
   fell back to user-agent defaults: 1.17em bold with equal 1em margins above and
   below, which made a subsection heading read as part of the paragraph before it.
   Sized between h2 and body copy, with more air above the heading than below it.
   Class-scoped headings (.seed h3, .faq h3) keep their own rules. */
main h3 {
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  margin: 34px 0 10px;
}

@media (max-width: 600px) {
  main h3 {
    font-size: 18px;
    margin: 28px 0 8px;
  }
}

/* footer current page marker (2026-11-09 T1) */
.footer-nav a[aria-current="page"] {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}