:root{
  --paper:#fff; --tint:#f6f8fa; --tint2:#eaeef3; --ink:#0d0f12; --ink2:#3c434e;
  --muted:#6d7681; --faint:#9aa3af; --rule:#e0e5eb; --rule2:#c6ced8;
  --accel:#b0741a; --pragmatic:#39628f; --skeptic:#7f4d6d; --safety:#216e60; --ethics:#a2513c;
  --warn:#8e3618; --warnbg:#fdf2ec;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --sans:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --serif:"Spectral",Georgia,serif;
  padding-top:env(safe-area-inset-top,0); padding-bottom:env(safe-area-inset-bottom,0);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;
  line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%}[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:2px solid var(--pragmatic);outline-offset:2px}
.wrap{max-width:1240px;margin:0 auto;padding-inline:22px}
#pagehead{padding-block:26px 20px}
#pagehead h1{margin:0 0 8px;font-family:var(--serif);font-weight:700;
  font-size:clamp(26px,3.4vw,40px);line-height:1.12;letter-spacing:-.015em;
  text-wrap:balance;color:var(--ink)}
#pagehead p{margin:0;max-width:62ch;font-size:15px;line-height:1.55;color:var(--ink2)}
@media(max-width:620px){#pagehead{padding-block:18px 14px}}

.mast{border-bottom:3px solid var(--ink);padding-block:22px 12px}
.mastrow{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
.brandlink{display:inline-flex;align-items:center;gap:11px;text-decoration:none;cursor:pointer}
.mark{width:34px;height:34px;flex:0 0 auto;display:block}
@media(max-width:600px){.mark{width:28px;height:28px}}
.brand{margin:0;font-family:var(--serif);font-weight:700;font-size:clamp(24px,4.4vw,36px);
  letter-spacing:-.03em;margin:0;line-height:.95;cursor:pointer}
.brand i{font-style:normal;color:var(--rule2)}
.dateline{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);text-align:right;line-height:1.7}
nav{position:sticky;top:env(safe-area-inset-top,0);z-index:30;background:var(--paper);
  border-bottom:1px solid var(--rule)}
.navin{display:flex;align-items:center;gap:2px;overflow-x:auto;padding-block:7px;
  scrollbar-width:none}
.navin::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;padding:6px 11px;border:0;background:none;color:var(--muted);
  cursor:pointer;border-radius:3px;white-space:nowrap}
.tab:hover{color:var(--ink);background:var(--tint)}
.tab{display:inline-flex;align-items:center;gap:5px;text-decoration:none}
.tab .tn-n{font-size:9px;color:var(--rule2);font-variant-numeric:tabular-nums}
.tab:hover{color:var(--ink)}
.tab[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.tab[aria-pressed="true"] .tn-n{color:var(--paper);opacity:.6}
.legendbar{margin-left:auto;display:flex;gap:11px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.05em;color:var(--faint);white-space:nowrap;padding-left:16px}
.legendbar span{display:inline-flex;align-items:center;gap:4px}

.bar{display:flex;height:7px;border-radius:4px;overflow:hidden;background:var(--tint2);gap:1.5px}
.bar.lg{height:13px;border-radius:7px}
.seg{min-width:3px}
.seg.accel{background:var(--accel)}.seg.pragmatic{background:var(--pragmatic)}
.seg.skeptic{background:var(--skeptic)}.seg.safety{background:var(--safety)}
.seg.ethics{background:var(--ethics)}
.dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto;background:var(--rule2)}
.dot.accel{background:var(--accel)}.dot.pragmatic{background:var(--pragmatic)}
.dot.skeptic{background:var(--skeptic)}.dot.safety{background:var(--safety)}
.dot.ethics{background:var(--ethics)}
.keys{display:flex;flex-wrap:wrap;gap:2px 11px;margin-top:6px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.03em;color:var(--ink2)}
.key{display:inline-flex;align-items:center;gap:4px}
.key b{font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink)}
.gap{color:var(--faint)}

/* varied grid — cell size follows how big the story is */
/* The hairline rules used to come from a --rule background showing through a 1px
   gap. That works only when cells fill every row: 40 cards in a 4-column grid
   left 3 empty columns on the last row, rendering as a large grey block. Drawing
   the rule per cell instead means an unfilled row simply is not there. */
.grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(112px,auto);
  gap:1px;background:transparent;border-block:1px solid var(--rule)}
.grid>.cell{box-shadow:0 0 0 1px var(--rule)}
.cell{background:var(--paper);padding:18px 20px 20px;display:grid;gap:9px;align-content:start;
  grid-column:span 1}
.cell.xl{grid-column:span 2;grid-row:span 2;padding:26px 28px 28px}
.cell.lg{grid-column:span 2}
.kicker{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);display:flex;flex-wrap:wrap;gap:3px 8px;align-items:center;
  font-variant-numeric:tabular-nums}
.kicker .topic{color:var(--ink);font-weight:500}
.kicker .sep{color:var(--rule2)}
.hl{font-family:var(--serif);font-weight:600;letter-spacing:-.014em;line-height:1.25;margin:0;
  text-wrap:balance;font-size:17px}
.hl a{text-decoration:none}
.hl a:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.cell.xl .hl{font-size:clamp(25px,2.7vw,33px);font-weight:700;line-height:1.12}
.cell.lg .hl{font-size:21px}
.dek{font-family:var(--serif);font-size:14.5px;line-height:1.52;color:var(--ink2);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cell.xl .dek{font-size:17px;-webkit-line-clamp:5;color:var(--ink)}
.cell.lg .dek{-webkit-line-clamp:2}
.counts{font-family:var(--mono);font-size:10px;color:var(--muted);
  font-variant-numeric:tabular-nums;letter-spacing:.03em}
.counts b{color:var(--ink);font-weight:500}
.flag{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--warn);display:inline-flex;align-items:center;gap:5px}
.flag::before{content:"";width:3px;height:11px;background:var(--warn);border-radius:1px}

.split{border-left:3px solid var(--warn);background:var(--warnbg);padding:10px 12px;
  border-radius:0 3px 3px 0;display:grid;gap:8px}
.split-h{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--warn);font-weight:500}
.split p{margin:0;font-size:13.5px;line-height:1.42}
.split .who{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:3px;line-height:1.5}

/* story page */
.back{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);background:none;border:0;cursor:pointer;padding:22px 0 0}
.back:hover{color:var(--ink)}
.story{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(290px,1fr);
  grid-template-areas:"head rail" "body rail";gap:0 46px;padding-bottom:70px;
  align-items:start}
.s-head{grid-area:head}
.s-body{grid-area:body}
.story h1{font-family:var(--serif);font-size:clamp(27px,3.7vw,42px);font-weight:700;
  line-height:1.1;letter-spacing:-.024em;margin:11px 0 0;text-wrap:balance}
.lede{font-family:var(--serif);font-size:18.5px;line-height:1.58;margin:16px 0 0;color:var(--ink)}
/* The coverage sentence: the one claim on this page no other source can make,
   written to survive being lifted out of the page on its own. */
.answer{font-size:14.5px;line-height:1.6;margin:13px 0 0;padding:10px 12px;
  background:var(--tint);border:1px solid var(--rule);border-radius:3px;color:var(--ink2)}
.answer b{color:var(--ink);font-variant-numeric:tabular-nums}
.sub{font-size:13.5px;line-height:1.55;color:var(--ink2);margin:0 0 11px;max-width:82ch}
.sec{margin-top:30px;padding-top:22px;border-top:1px solid var(--rule)}
h3.lbl{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 13px;font-weight:500}
.facts{list-style:none;margin:0;padding:0;display:grid;gap:9px}
/* Related stories had no rule at all, so the internal-link block — the only
   thing giving a crawler a path between stories — rendered with default
   browser bullets and the article counts jammed against the link text. */
.related{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.related li{display:grid;gap:2px}
.related a{font-family:var(--serif);font-size:15px;line-height:1.35;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule2)}
.related a:hover{border-bottom-color:var(--ink)}
.related .who{font-family:var(--mono);font-size:10px;color:var(--muted);
  letter-spacing:.02em;text-transform:uppercase}
.facts li{font-family:var(--serif);font-size:15.5px;line-height:1.45;padding-left:18px;
  position:relative;color:var(--ink2)}
.facts li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--safety)}
.campgrp{margin-top:20px}
.camphd{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink);margin-bottom:7px;
  padding-bottom:6px;border-bottom:1px solid var(--rule)}
.camphd .n{color:var(--muted);font-variant-numeric:tabular-nums;margin-left:auto}
.srcrow{display:grid;grid-template-columns:8px 16px 1fr;gap:9px;align-items:start;padding-block:7px}
.srcrow .pip{width:6px;height:6px;border-radius:50%;margin-top:8px;background:var(--rule2)}
.srcrow a{text-decoration:none;font-size:15px;font-family:var(--serif);line-height:1.38;
  border-bottom:1px solid var(--rule)}
.srcrow a:hover{border-color:var(--ink)}
.srcrow .who{font-family:var(--mono);font-size:10px;color:var(--muted);display:block;margin-top:3px}
.badge{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.06em;
  text-transform:uppercase;padding:1px 5px;border-radius:2px;margin-left:5px;
  background:var(--tint2);color:var(--ink2);vertical-align:1px}
.badge.orig{background:var(--safety);color:#fff}

.rail{position:sticky;top:calc(env(safe-area-inset-top,0) + 52px)}
.panel{background:var(--tint);border:1px solid var(--rule);border-radius:5px;overflow:hidden}
.panel section{padding:15px 16px;border-bottom:1px solid var(--rule)}
.panel section:last-child{border-bottom:0}
.panel h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 11px;font-weight:500}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule)}
.tile{background:var(--tint);padding:13px 14px;display:grid;gap:3px}
.tile .v{font-family:var(--mono);font-size:21px;font-weight:500;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.tile .l{font-family:var(--mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);line-height:1.35}
/* Camp blocks. The old rail drew a stacked bar and then five more bars saying
   the same thing, followed by a flat strip of logos attached to nothing.
   Grouping the outlets UNDER their camp answers the question the strip could
   not: not just how much ethics coverage, but who wrote it. */
.camps{display:grid;gap:13px}
.campblk{display:grid;gap:6px}
.campbar{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px}
.campbar .nm{color:var(--ink);letter-spacing:.04em;min-width:66px}
.campbar .tr{flex:1;height:5px;background:var(--tint2);border-radius:3px;overflow:hidden}
.campbar .fl{display:block;height:5px;border-radius:3px;min-width:3px}
.campbar .ct{color:var(--ink);font-variant-numeric:tabular-nums;min-width:20px;text-align:right}
.campblk.zero .nm,.campblk.zero .ct{color:var(--faint)}
.campouts{display:flex;flex-wrap:wrap;gap:3px;padding-left:73px}
.campouts .none{font-family:var(--mono);font-size:9.5px;color:var(--faint)}
.rows{display:grid;gap:8px}
.row{display:grid;grid-template-columns:6px 70px 1fr 24px;gap:8px;align-items:center;
  font-family:var(--mono);font-size:10px}
.row .nm{color:var(--ink2)}
/* Both are <span>s. A grid item is blockified so .tr is fine, but .fl sits
   INSIDE it as a plain inline span — width/height percentages do not apply to
   inline boxes, so every fill rendered at zero width over a visible track. */
.row .tr{display:block;height:6px;background:var(--tint2);border-radius:3px;overflow:hidden}
.row .fl{display:block;height:6px;border-radius:3px;min-width:3px}
.row .ct{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.row.zero .nm,.row.zero .ct{color:var(--faint)}
.nums{display:grid;gap:8px;font-family:var(--mono);font-size:10.5px;font-variant-numeric:tabular-nums}
.nums .l{color:var(--muted);display:block;margin-bottom:2px}
.nums .v{color:var(--warn);font-weight:500;line-height:1.5}

.share{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--rule)}
.share .lbl2{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin-right:3px}
.share button,.share a{width:34px;height:34px;padding:0;border:1px solid var(--rule2);
  background:var(--paper);color:var(--ink2);border-radius:50%;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;transition:color .12s,border-color .12s,background .12s}
.share svg{width:15px;height:15px;display:block}
.share button:hover,.share a:hover{border-color:currentColor}
/* brand colour appears only on hover: five saturated logos in a row would
   out-shout the story itself */
.share a.wa:hover{color:#25D366}
.share a.tw:hover{color:var(--ink)}
.share a.li:hover{color:#0A66C2}
.share a.tg:hover{color:#26A5E4}
.share a.rd:hover{color:#FF4500}
.share button:hover{color:var(--ink)}
.share button.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.share button.primary:hover{background:var(--ink2);border-color:var(--ink2);color:var(--paper)}
.share button.ok{color:var(--safety);border-color:var(--safety)}
.share .tip{font-family:var(--mono);font-size:9.5px;color:var(--safety);
  letter-spacing:.06em;text-transform:uppercase}
/* Outlet favicons. Google's service returns 64x64, so WITHOUT an explicit size
   these render at full size and swamp the layout — which is exactly what
   happened when this block was accidentally deleted. Always pin both axes. */
.logos{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.logo{width:14px;height:14px;min-width:14px;min-height:14px;border-radius:2px;
  background:var(--tint2);object-fit:contain;flex:0 0 auto;
  border:1px solid var(--rule);display:inline-block}
.logo.lg{width:16px;height:16px;min-width:16px;min-height:16px;border-radius:3px}
.logos .rest{font-family:var(--mono);font-size:9px;color:var(--muted);
  margin-left:3px;font-variant-numeric:tabular-nums;line-height:1}
.outlet-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px}
.srcrow .logo{margin-top:3px}
/* Affiliate reprints. The same wire story can run in 50 outlets; listing them
   inline would bury the 42 pieces of actual reporting, and hiding them would be
   dishonest. Collapsed under the canonical article, one click away. */
.also{margin-top:5px}
.also summary{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);cursor:pointer;list-style:none;
  display:inline-block;border-bottom:1px dotted var(--rule2);padding-bottom:1px}
.also summary::-webkit-details-marker{display:none}
.also summary:hover{color:var(--ink);border-color:var(--ink)}
.also ul{list-style:none;margin:7px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px}
.also li{font-family:var(--mono);font-size:10px}
.also a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule)}
.also a:hover{color:var(--ink);border-color:var(--ink)}
/* Topic hubs, linked from the homepage in real markup. They were previously
   reachable only from the sitemap because the nav is client-rendered. */
.topicnav{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-block:16px 18px;
  border-bottom:1px solid var(--rule)}
.topicnav .tn-lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-right:4px}
.topicnav a{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink2);text-decoration:none;padding:5px 10px;
  border:1px solid var(--rule);border-radius:3px;display:inline-flex;align-items:center;gap:6px}
.topicnav a:hover{border-color:var(--ink);color:var(--ink)}
.topicnav .tn-n{font-size:9.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.agree{font-family:var(--serif);font-size:15.5px;line-height:1.55;color:var(--ink2);
  margin:0;padding:11px 13px;background:var(--tint);border-left:3px solid var(--safety);
  border-radius:0 3px 3px 0}
.skel{padding-block:50px;text-align:center;color:var(--muted);font-size:14px}
.more{padding-block:24px;text-align:center}
.more button{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  padding:9px 20px;border:1px solid var(--rule2);background:none;color:var(--ink);
  border-radius:3px;cursor:pointer}
.more button:hover{background:var(--tint)}
footer{border-top:3px solid var(--ink);padding-block:16px 44px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

@media(max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}
  .cell.xl,.cell.lg{grid-column:span 2}.cell.xl{grid-row:span 1}}
@media(max-width:900px){
  /* one column: DOM order head -> rail -> body puts the coverage data directly
     under the disagreement section instead of below 117 source rows */
  .story{grid-template-columns:1fr;grid-template-areas:"head" "rail" "body";gap:26px}
  .rail{position:static}
  .legendbar{display:none}}
@media(max-width:620px){.grid{grid-template-columns:1fr}
  .cell,.cell.xl,.cell.lg{grid-column:span 1;grid-row:span 1}
  .cell.xl{padding:20px 20px 22px}.cell.xl .hl{font-size:24px}.lede{font-size:17px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- static pages (About / Method / Contact / Corrections / Privacy) ---- */
.page{max-width:none;padding-block:var(--lg,28px) 72px;
  display:grid;grid-template-columns:minmax(0,68ch);justify-content:start}
.page h1{font-family:var(--serif);font-size:clamp(28px,4.4vw,42px);font-weight:700;
  line-height:1.1;letter-spacing:-.024em;margin:22px 0 0;text-wrap:balance}
.page .lede{font-family:var(--serif);font-size:18.5px;line-height:1.6;margin:16px 0 0;
  color:var(--ink)}
.page h2{font-family:var(--serif);font-size:21px;font-weight:600;letter-spacing:-.012em;
  margin:36px 0 0;padding-top:20px;border-top:1px solid var(--rule)}
.page p{margin:12px 0 0;font-size:15.5px;line-height:1.68;color:var(--ink2)}
.page ul{margin:12px 0 0;padding-left:0;list-style:none;display:grid;gap:9px}
.page li{font-size:15.5px;line-height:1.6;color:var(--ink2);padding-left:18px;position:relative}
.page li::before{content:"";position:absolute;left:0;top:10px;width:5px;height:5px;
  border-radius:50%;background:var(--rule2)}
.page a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule2)}
.page a:hover{border-color:var(--ink)}
.page strong{font-weight:600;color:var(--ink)}
.page em{font-style:italic}
.page address{font-style:normal;font-family:var(--mono);font-size:13px;line-height:1.9;
  color:var(--ink2);margin-top:12px;padding:14px 16px;background:var(--tint);
  border:1px solid var(--rule);border-radius:4px;display:inline-block}
.page .big a{font-family:var(--mono);font-size:17px;border-bottom-width:2px}

/* ---- topic hub ---- */
.pagehead{padding-block:26px 22px;border-bottom:2.5px solid var(--ink);margin-bottom:0}
.pagehead h1{font-family:var(--serif);font-size:clamp(26px,4vw,38px);font-weight:700;
  letter-spacing:-.025em;margin:0;line-height:1.05}
.pagehead .lede{font-size:14.5px;color:var(--muted);margin:9px 0 0;max-width:58ch;
  font-family:var(--sans);line-height:1.55}

/* ---- footer with real links ---- */
footer a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
footer a:hover{color:var(--ink);border-color:var(--ink)}

/* ---------------------------------------------------------------------------
   Signup. The only retention surface the site has: there is no account, no
   follow and no alert, so without this a reader has no way back but memory.
   --------------------------------------------------------------------------- */
.signup{padding-block:34px 38px;border-top:1px solid var(--rule)}
.sg-in{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;
  max-width:1000px}
.sg-copy h2{margin:0 0 8px;font-family:var(--serif);font-weight:700;
  font-size:clamp(20px,2.2vw,27px);line-height:1.18;letter-spacing:-.01em;
  text-wrap:balance;color:var(--ink)}
.sg-copy p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink2);max-width:46ch}
.sg-note{margin-top:7px!important;font-size:13px!important;color:var(--muted)!important}
.sg-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.sg-row{display:flex;gap:7px;flex-wrap:wrap}
.sg-row input{flex:1 1 200px;min-width:0;font-family:var(--sans);font-size:15px;
  padding:11px 13px;border:1px solid var(--rule2);border-radius:3px;
  background:var(--paper);color:var(--ink)}
.sg-row input::placeholder{color:var(--faint)}
.sg-row input:focus-visible{outline:2px solid var(--pragmatic);outline-offset:1px;
  border-color:var(--pragmatic)}
.sg-row input[aria-invalid="true"]{border-color:var(--warn);background:var(--warnbg)}
.sg-row button{flex:0 0 auto;font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;padding:11px 20px;border:1px solid var(--ink);border-radius:3px;
  background:var(--ink);color:var(--paper);cursor:pointer;min-height:44px}
.sg-row button:hover{background:var(--ink2);border-color:var(--ink2)}
.sg-row button:disabled{opacity:.55;cursor:default}
.sg-fine{margin:9px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
.sg-fine a{color:var(--muted)}
.sg-fine.err{color:var(--warn)}
.sg-fine.ok{color:var(--safety)}
/* honeypot: off-screen rather than display:none, which some bots skip */
.sg-trap{position:absolute!important;left:-9999px!important;width:1px!important;
  height:1px!important;opacity:0!important}
.sg-done{font-family:var(--serif);font-size:16px;line-height:1.5;color:var(--ink);margin:0}
@media(max-width:760px){
  .sg-in{grid-template-columns:1fr;gap:18px}
  .signup{padding-block:26px 30px}
}

/* ---------------------------------------------------------------------------
   Blog. The only hand-written pages on the site, and the only ones with a
   byline, so they get a reading measure rather than the story grid.
   --------------------------------------------------------------------------- */
/* 68ch is the right measure for prose but too tight for three-column data
   tables, and it left the h1 wrapping mid-phrase. Posts get a wider column. */
.page.post{grid-template-columns:minmax(0,80ch)}
.post .lede{max-width:64ch}
.post p,.post ul{max-width:68ch}
.post .dtable{max-width:none}
.byline{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);margin:0 0 18px}
.byline a{color:var(--ink2)}
.dtable{width:100%;border-collapse:collapse;margin:16px 0 20px;font-size:14px}
.dtable th,.dtable td{text-align:left;padding:8px 12px 8px 0;
  border-bottom:1px solid var(--rule);vertical-align:top}
.dtable th{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);font-weight:400}
.dtable td:not(:first-child){font-variant-numeric:tabular-nums;white-space:nowrap}
.postlist{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:22px}
.postlist li{display:grid;gap:4px;padding-bottom:20px;border-bottom:1px solid var(--rule)}
.postlist li:last-child{border-bottom:0}
.postlist a{font-family:var(--serif);font-size:20px;line-height:1.24;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--rule2);justify-self:start}
.postlist a:hover{border-bottom-color:var(--ink)}
.postlist .who{font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.postlist p{margin:2px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink2);max-width:68ch}
@media(max-width:620px){.dtable{font-size:13px}.dtable th,.dtable td{padding-right:8px}}