/* ============================================================
   The Sunday Packet — one design system, imported by every page.
   Tokens locked here; no page defines its own chrome. Ink Edition.
   ============================================================ */
:root{
  --paper:#faf7f0; --sheet:#fffdf8; --ink:#1c1a17; --grey:#6e675c;
  --faint:#e9e4d8; --border:#d9d2c2; --grid:#f0ebde;
  --red:#1e3a5f; --red-deep:#152c47;              /* "red" tokens = brand navy */
  /* type scale */ --t-hero:clamp(40px,6vw,60px); --t-h1:clamp(32px,4.6vw,46px);
  --t-h2:26px; --t-h3:20px; --t-body:18px; --t-small:15px;
  /* space scale */ --s1:8px; --s2:14px; --s3:22px; --s4:36px; --s5:60px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;color-scheme:light only}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.draw{animation:none!important}}
body{font-family:'Newsreader',Georgia,serif;font-size:var(--t-body);line-height:1.6;color:var(--ink);
  background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px}

.mono{font-family:'IBM Plex Mono',monospace}
a{color:var(--red-deep)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--red);outline-offset:2px}
::selection{background:#dfe7f0}

/* ---------- one header, everywhere ---------- */
header{background:var(--paper);border-bottom:2px solid var(--ink);position:sticky;top:0;z-index:60}
.mast{max-width:1060px;margin:0 auto;padding:16px 24px;display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.wordmark{font-weight:700;font-size:clamp(26px,5.5vw,34px);line-height:1.1;color:var(--ink);text-decoration:none;letter-spacing:.01em}
.wordmark b,.wordmark em{color:var(--red);font-weight:700;font-style:normal}
header nav a{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--grey);margin-left:20px}
header nav a:hover{color:var(--ink)}
.nav-cta{background:var(--red);color:#fff!important;padding:8px 16px;border:1px solid var(--red-deep)}
.nav-cta:hover{background:var(--red-deep)}

/* ---------- shared type ---------- */
h1{font-size:var(--t-h1);font-weight:700;line-height:1.12;letter-spacing:-.01em;margin-bottom:var(--s3);max-width:20ch}
h2{font-size:var(--t-h2);font-weight:700;line-height:1.2;margin:var(--s5) 0 var(--s3)}
h3{font-size:var(--t-h3);font-weight:700;margin-bottom:var(--s1)}
.wrap{max-width:1060px;margin:0 auto;padding:var(--s5) 24px}
article{max-width:760px;margin:0 auto;padding:var(--s5) 24px}
.narrow{max-width:760px;margin:0 auto;padding:var(--s5) 24px}
article p{margin:0 0 var(--s3);max-width:68ch}
.kicker{font-family:'Newsreader',Georgia,serif;font-style:italic;font-size:17px;letter-spacing:.02em;color:var(--red);margin-bottom:var(--s2)}
.dek{font-size:21px;line-height:1.5;color:var(--grey);margin-bottom:var(--s3);max-width:60ch}
.byline{font-family:'Newsreader',Georgia,serif;font-style:italic;font-size:14.5px;color:var(--grey);margin:var(--s3) 0 0;padding-bottom:var(--s4);border-bottom:2px solid var(--ink)}
.crumbs{font-family:'Newsreader',Georgia,serif;font-style:italic;font-size:13.5px;color:var(--grey);margin-bottom:var(--s3)}
.crumbs a{color:var(--grey);text-decoration:none}.crumbs a:hover{color:var(--red-deep)}
.crumbs span{color:var(--border);padding:0 4px}

/* ---------- buttons: one system ---------- */
.btn{display:inline-block;font-family:'Newsreader',Georgia,serif;font-size:16.5px;letter-spacing:.02em;text-decoration:none;padding:13px 26px;border:1px solid var(--ink);cursor:pointer;background:var(--sheet);color:var(--ink)}
.btn-red{background:var(--red);border-color:var(--red-deep);color:#fff}
.btn-red:hover{background:var(--red-deep)}
.btn-paper{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-paper:hover{background:var(--sheet)}
.btn-stamp{transform:rotate(-2deg);box-shadow:3px 4px 0 var(--ink);padding:14px 26px}
.btn-stamp:hover{transform:rotate(-2deg) translate(-1px,-1px);box-shadow:4px 5px 0 var(--ink)}

/* ---------- tables: Tufte ---------- */
table{border-collapse:collapse;width:100%;margin:var(--s4) 0;background:var(--paper);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
th{font-family:'Newsreader',Georgia,serif;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-align:left;padding:13px 14px 10px;border-bottom:1px solid var(--ink);vertical-align:bottom;line-height:1.4}
td{font-size:15.5px;line-height:1.5;padding:14px 14px;border-bottom:1px solid var(--faint);vertical-align:top}
td.mono,th.mono{font-family:'IBM Plex Mono',monospace;white-space:nowrap}

/* ---------- callout / pull ---------- */
.callout{background:var(--paper);border-top:2px solid var(--ink);border-bottom:1px solid var(--border);padding:var(--s3) 2px;margin:var(--s4) 0}
.callout .big{font-family:'Newsreader',Georgia,serif;font-style:italic;font-size:16px;color:var(--red);margin-bottom:var(--s1)}
.pull{margin:var(--s4) 0;padding:4px 0 4px 26px;border-left:2px solid var(--ink)}
.pull .pull-lead{font-size:22px;font-weight:500;margin:0 0 var(--s2)}
.pull p{font-size:17px;line-height:1.6;margin:0 0 var(--s2);max-width:none}
.pull .pull-foot{font-style:italic;color:var(--grey);margin:0}
.fineprint{font-size:13px;color:var(--grey);margin-top:var(--s2)}

/* ---------- FAQ: calm panel, hairline rows ---------- */
details{border:0;border-top:1px solid var(--border);background:var(--paper);margin:0}
details:last-of-type{border-bottom:1px solid var(--border)}
summary{cursor:pointer;font-weight:700;font-size:17.5px;padding:14px 2px;list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";font-family:'Newsreader',Georgia,serif;color:var(--red);margin-right:12px}
details[open] summary::before{content:"\2212"}
details p{padding:0 2px 18px;margin:0;max-width:68ch}
.faq-panel{background:var(--paper);border-top:1px solid var(--ink);padding:0 30px}

/* ---------- figures: hairline framed, never boxed ---------- */
figure{margin:var(--s4) 0}
figcaption{font-family:'Newsreader',Georgia,serif;font-style:italic;font-size:14px;color:var(--grey);margin-top:12px}
.fig{margin:var(--s4) 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);background:var(--paper);padding:22px 2px}
.figrow{display:flex;gap:16px;flex-wrap:wrap;align-items:stretch}
.figcard{flex:1 1 190px;border-top:1px solid var(--border);padding:14px 6px 8px;min-width:180px}
.figcard .fk{font-family:'Newsreader',Georgia,serif;font-style:italic;font-size:15px;color:var(--red);margin-bottom:8px}
.figcard .fh{font-size:17.5px;font-weight:500;line-height:1.28;margin:0 0 7px}
.figcard .fq{font-size:13.5px;color:var(--grey);font-style:italic;margin:0 0 9px}
.figcard .fb{font-size:13.5px;line-height:1.5;margin:0;color:var(--ink)}
.figarrow{align-self:center;color:var(--grey);font-size:20px;flex:0 0 auto;line-height:1}
.figfoot{font-family:'Newsreader',Georgia,serif;font-style:italic;font-size:13.5px;color:var(--grey);margin-top:16px;line-height:1.6}
.figside{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
.figside>svg{flex:1 1 380px;min-width:300px}
.figside>.fignote{flex:1 1 220px;min-width:220px}
.fignote p{font-size:14.5px;line-height:1.55;color:var(--grey);margin:0 0 10px}
.fignote .fh{font-size:17px;font-weight:500;color:var(--ink);margin-bottom:8px}
.fig svg{width:100%;height:auto;display:block}
.fig svg text{font-family:'Newsreader',Georgia,serif}
.fig svg text.m{font-family:'IBM Plex Mono',monospace;letter-spacing:.05em}
table.heat{table-layout:fixed;width:100%;margin:0;border:1px solid var(--ink);border-collapse:collapse;background:var(--paper)}
table.heat th,table.heat td{border:1px solid var(--border);padding:0;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:12.5px;height:33px;color:var(--grey)}
table.heat th{background:transparent;font-size:11px;border-bottom:1px solid var(--ink)}
table.heat th.side{border-right:2px solid var(--ink);border-bottom:1px solid var(--border)}
table.heat td.e{background:#f3efe4}table.heat td.m{background:#ecd9c8}table.heat td.h{background:#d98d80;color:var(--ink);font-weight:500}
.heatwrap{overflow-x:auto}.heatwrap table.heat{min-width:430px}
.heatlegend{display:flex;gap:20px;flex-wrap:wrap;margin-top:14px;font-family:'Newsreader',Georgia,serif;font-style:italic;font-size:13px;color:var(--grey)}
.heatlegend i{display:inline-block;width:13px;height:13px;border:1px solid var(--border);margin-right:7px;vertical-align:-2px}

/* ---------- footer ---------- */
footer{border-top:2px solid var(--ink);margin-top:var(--s5);background:var(--paper)}
.foot{max-width:1060px;margin:0 auto;padding:22px 24px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;font-size:15px}
.foot a{color:var(--red-deep)}.foot .mono{font-size:11px;color:var(--grey);letter-spacing:.1em}

@media(max-width:640px){
  header nav a{margin-left:14px}
  .figcard{flex-basis:100%;min-width:0}
  .figarrow{width:100%;text-align:center;transform:rotate(90deg);margin:-2px 0}
}