/* Shared layout for the site's standalone pages (notes, letters): the main site's header and footer, a full-width
   page with a sticky contents column on the left, prose held to a readable measure and tables/charts using the width. */
:root{--bg:#f6f5f0;--ink:#0e161e;--dim:#696562;--line:#dcd8cf;--soft:#e9e6dd;--card:#fff;--link:#1f4e8c;--mark:#00356b;
  --attn:#fff4d6;--attn-ink:#6b4a00;--s1:#9aa9bb;--s2:#1f4e8c;--key:#efece3;--foot:#0e161e;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--serif:"Newsreader",Georgia,"Times New Roman",serif;
  --nav:"Figtree","Avenir Next","Helvetica Neue",system-ui,sans-serif;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#121614;--ink:#e6ebe8;--dim:#a3a9a5;--line:#2c3430;--soft:#222926;
  --card:#181d1b;--link:#8fb4e8;--mark:#9cc0ef;--attn:#2e2812;--attn-ink:#efd28a;--s1:#55606c;--s2:#8fb4e8;--key:#1c2220;--foot:#0a0d0c;color-scheme:dark}}
:root[data-theme=dark]{--bg:#121614;--ink:#e6ebe8;--dim:#a3a9a5;--line:#2c3430;--soft:#222926;--card:#181d1b;--link:#8fb4e8;--mark:#9cc0ef;
  --attn:#2e2812;--attn-ink:#efd28a;--s1:#55606c;--s2:#8fb4e8;--key:#1c2220;--foot:#0a0d0c;color-scheme:dark}
html{background:var(--foot)}
body{margin:0;background:var(--bg);color:var(--ink);font:16.5px/1.65 var(--sans);-webkit-text-size-adjust:100%}
a{color:var(--link)}b,strong{font-weight:600}
.yx-wrap{max-width:1200px;margin-inline:auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}

/* header, as on the main site */
.yx-top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.yx-top-in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:68px}
/* the wordmark matches .app-mark on the home page */
.yx-brand{display:inline-flex;align-items:center;text-decoration:none;color:#00356b;font:400 26px var(--serif);letter-spacing:-.005em;white-space:nowrap}
.yx-brand span{font-variant:small-caps;text-transform:lowercase;font-size:25px;letter-spacing:.07em;margin-left:1px}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .yx-brand{color:#9dbbe6}}:root[data-theme=dark] .yx-brand{color:#9dbbe6}
.yx-nav{display:flex;gap:clamp(22px,3vw,40px);overflow-x:auto;scrollbar-width:none}
.yx-nav a{color:var(--ink);text-decoration:none;font:400 17px var(--nav);letter-spacing:.01em;padding-block:6px;white-space:nowrap}
.yx-nav a:hover{opacity:.6}.yx-nav a[aria-current=page]{font-weight:700;letter-spacing:0}

/* hero */
.nt-hero{padding-block:clamp(44px,6vw,84px) clamp(24px,3vw,40px)}
.nt-eyebrow{margin:0 0 14px;font:600 12.5px var(--nav);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.nt-hero h1{font:400 clamp(36px,4.6vw,56px)/1.08 var(--serif);margin:0;letter-spacing:-.008em;text-wrap:balance;max-width:20em}
.nt-meta{margin:16px 0 0;color:var(--dim);font-size:14.5px}
.nt-lede{margin:22px 0 0;font:400 clamp(19px,1.7vw,23px)/1.45 var(--serif);max-width:38em;text-wrap:pretty}

/* body: contents column + article */
.nt-body{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start;padding-bottom:clamp(56px,7vw,96px)}
.nt-toc{position:sticky;top:92px;font:400 14.5px/1.4 var(--nav);border-top:1px solid var(--line);padding-top:14px}
.nt-toc p{margin:0 0 10px;font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.nt-toc ol,.nt-toc ul{list-style:none;margin:0;padding:0}.nt-toc li{margin:0 0 9px}
.nt-toc a{color:var(--ink);text-decoration:none}.nt-toc a:hover{color:var(--link)}
.nt-main{min-width:0}
.nt-main>p,.nt-main>ul,.nt-main>ol:not(.kf),.nt-main .tn,.nt-main .tk,.nt-main details>p{max-width:46em}
@media (max-width:1000px){.nt-body{grid-template-columns:minmax(0,1fr)}
  .nt-toc{position:static;border-bottom:1px solid var(--line);padding-bottom:12px}
  .nt-toc ol,.nt-toc ul{display:flex;flex-wrap:wrap;gap:6px 18px}.nt-toc li{margin:0}}

/* article typography */
.nt-main [id]{scroll-margin-top:88px}
.nt-main h2{font:400 clamp(26px,2.6vw,32px)/1.2 var(--serif);margin:64px 0 8px;padding-top:26px;border-top:1px solid var(--line)}
.nt-main>h2:first-child,.nt-main>.box:first-child+h2{margin-top:8px}
.nt-main h2 small{display:block;font:600 12px/1.4 var(--nav);color:var(--dim);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.nt-main h3{font:600 15px/1.4 var(--nav);margin:32px 0 6px;color:var(--dim);letter-spacing:.02em}
.tk{font:400 20px/1.45 var(--serif);margin:6px 0 18px}
p,ul,ol{margin:0 0 14px}li{margin:0 0 10px}
.d{color:var(--dim);font-size:14.5px}
.box{background:var(--attn);border-radius:10px;padding:14px 18px;margin:0 0 28px;font-size:15px;line-height:1.55;max-width:60em}.box b{color:var(--attn-ink)}
.kf{list-style:none;padding:0;margin:12px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;counter-reset:k}
.kf li{counter-increment:k;margin:0;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px 16px 52px;position:relative;font-size:15.5px}
.kf li::before{content:counter(k);position:absolute;left:16px;top:16px;width:24px;height:24px;border-radius:50%;background:var(--soft);color:var(--dim);font:600 12.5px/24px var(--nav);text-align:center}
.kf li>b{display:block;font:500 18px/1.35 var(--serif);margin-bottom:6px}.kf li>span{color:var(--dim)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:18px 0 24px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.tile b{display:block;font:400 32px/1.1 var(--serif);font-variant-numeric:tabular-nums}.tile span{display:block;color:var(--dim);font-size:13.5px;line-height:1.4;margin-top:6px}

/* tables */
.tw{overflow-x:auto;margin:14px 0 8px;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;font-size:14.5px;line-height:1.4;min-width:100%;font-variant-numeric:tabular-nums}
th,td{padding:9px 12px;border-bottom:1px solid var(--soft);text-align:left;vertical-align:baseline}
thead th,tr:first-child>th{font:600 12.5px var(--nav);color:var(--dim);white-space:nowrap;border-bottom:1px solid var(--line)}
th.gh{text-align:center;color:var(--ink)}.gs{border-left:1px solid var(--line)}
td.n,th.n{text-align:right;white-space:nowrap}
tr.l td{border-top:1px solid var(--line)}tr.k td{background:var(--key)}tr.x td{color:var(--attn-ink)}
table.sm{font-size:13.5px}table.sm td,table.sm th{padding:6px 12px}
.u{color:var(--dim);font-size:12px;margin-left:6px;display:inline-block;min-width:1.4em;text-align:right}
.tn{color:var(--dim);font-size:13.5px;line-height:1.55;margin:6px 0 18px}
details{margin:12px 0 20px;border-top:1px solid var(--soft);padding-top:10px}summary{cursor:pointer;color:var(--link);font-size:14.5px}
details[open] summary{margin-bottom:6px}

/* charts */
.ch{margin:18px 0 6px;max-width:860px}.ch svg{width:100%;height:auto;display:block}.ch figcaption{color:var(--dim);font-size:13.5px;margin-top:6px}
.ch .gr{stroke:var(--soft);stroke-width:1}.ch text{fill:var(--dim);font:12px var(--sans)}
.ch .yl{text-anchor:end}.ch .xl{text-anchor:middle;fill:var(--ink);font-size:13px}.ch .xs{text-anchor:middle}.ch .vl{text-anchor:middle;fill:var(--ink)}
.ch .s1{fill:var(--s1)}.ch .s2{fill:var(--s2)}.ch path{stroke:var(--bg);stroke-width:2}.ch path:hover{opacity:.8}
.sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin:0 4px 0 8px;vertical-align:-1px}.sw:first-child{margin-left:0}
.sw.s1{background:var(--s1)}.sw.s2{background:var(--s2)}
@media (max-width:560px){.ch text{font-size:19px}.ch .xl{font-size:21px}.ch .xs{display:none}.ch .vl{font-size:18px}.tile b{font-size:26px}.kf li{padding-left:48px}}

/* lists of pages (notes index, letters archive) */
.nt-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.nt-list li{margin:0}.nt-list a{display:block;height:100%;box-sizing:border-box;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;text-decoration:none;color:var(--ink)}
.nt-list a:hover{border-color:var(--dim)}.nt-list b{display:block;font:400 22px/1.25 var(--serif);margin-bottom:6px}.nt-list span{display:block;color:var(--dim);font-size:14.5px}
.nt-list i{display:block;font-style:normal;font:600 11.5px var(--nav);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}

.f{color:var(--dim);font-size:14px;margin-top:56px;padding-top:18px;border-top:1px solid var(--line);max-width:60em}
.notes li{font-size:15px}

/* footer, as on the main site */
.yx-foot{background:var(--foot);color:#d9ddda;padding-block:48px 56px}
.yx-foot-in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:32px 64px;align-items:start}
.yx-foot .yx-brand,:root .yx-foot .yx-brand{color:#c9d8ee}
.yx-foot-id{display:grid;gap:6px}.yx-byline{margin:4px 0 0;font:15px var(--nav);color:#d9ddda}
.yx-copy{margin:14px 0 0;font-size:12.5px;color:#7f8783}
.yx-foot p.yx-disc{margin:0;font-size:13.5px;line-height:1.6;color:#a9b0ac;max-width:60ch;justify-self:end}
.yx-foot-links{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:14px;font:14px var(--nav)}
.yx-foot-links a{color:#d9ddda;text-decoration:none}.yx-foot-links a:hover{color:#fff;text-decoration:underline}
@media (max-width:760px){.yx-foot-in{grid-template-columns:1fr}.yx-foot p.yx-disc{justify-self:start}}
@media (max-width:640px){.yx-top-in{flex-direction:column;align-items:flex-start;gap:4px;padding-block:12px 6px;min-height:0}.yx-nav{gap:20px;width:100%}.yx-nav a{font-size:16px}}

/* motion, as on the main site: blocks rise in, hairlines draw from the left, bars grow from the baseline.
   page.js adds .yx-anim only when the reader has not asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .yx-anim .nt-hero>*{animation:yx-in .6s cubic-bezier(.2,.7,.2,1) both}
  .yx-anim .nt-hero>:nth-child(2){animation-delay:.06s}.yx-anim .nt-hero>:nth-child(3){animation-delay:.12s}.yx-anim .nt-hero>:nth-child(4){animation-delay:.18s}
  @keyframes yx-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .yx-anim .yx-rise{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--yx-d,0s)}
  .yx-anim .yx-rise.in{opacity:1;transform:none}
  .yx-anim .yx-rule-in{position:relative;border-top-color:transparent!important}
  .yx-anim .yx-rule-in::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--line);
    transform:scaleX(0);transform-origin:left center;transition:transform 1.2s cubic-bezier(.22,.8,.2,1);transition-delay:var(--yx-d,0s)}
  .yx-anim .yx-rule-in.in::before{transform:scaleX(1)}
  .yx-anim .nt-hero h1{position:relative}
  .yx-anim .nt-hero h1::after{content:"";position:absolute;left:0;bottom:-10px;height:1px;width:100%;background:var(--line);
    transform:scaleX(0);transform-origin:left center;animation:yx-sweep 1.6s cubic-bezier(.22,.8,.2,1) .25s forwards}
  @keyframes yx-sweep{to{transform:scaleX(1)}}
  .yx-anim .ch path{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
  .yx-anim .ch text.vl{opacity:0;transition:opacity .5s ease}
  .yx-anim .ch.in path{transform:none}.yx-anim .ch.in text.vl{opacity:1;transition-delay:.7s}
}
/* per-election tables: the result and Congress columns are text */
table.ev td:nth-child(2),table.ev td:nth-child(3),table.ev tr:last-child th:nth-child(1),table.ev tr:last-child th:nth-child(2){text-align:left}
table.ev td:nth-child(2){white-space:normal;min-width:16em}

/* election charts (elections/charts.js) */
:root{--dem:#2f64ad;--rep:#c0453b;--l2:#8f4f00;--l1:#d99a3d;--l0:#a8b3bf}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--dem:#6f9fe0;--rep:#e57b70;--l2:#e8a948;--l1:#9a6a2a;--l0:#5a6570}}
:root[data-theme=dark]{--dem:#6f9fe0;--rep:#e57b70;--l2:#e8a948;--l1:#9a6a2a;--l0:#5a6570}
.ec{position:relative;margin:20px 0 26px;max-width:980px}
.ec svg{width:100%;height:auto;display:block;overflow:visible;touch-action:pan-y}
.ec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 18px;margin-bottom:8px;font-size:14px}
.ec-head b{font:600 14px var(--nav)}.ec-leg{display:flex;flex-wrap:wrap;gap:4px 16px;color:var(--dim);font-size:13px}
.ec-leg span{display:inline-flex;align-items:center;gap:6px}.ec-sw{width:10px;height:10px;border-radius:2px;display:inline-block}
.ec .ec-grid{stroke:var(--soft);stroke-width:1}.ec .ec-zero{stroke:var(--dim);stroke-width:1;opacity:.6}
.ec text{fill:var(--dim);font:11.5px var(--sans)}.ec .ec-yl{text-anchor:end}.ec .ec-xl{text-anchor:middle}
.c-D{fill:var(--dem);stroke:var(--dem)}.c-R{fill:var(--rep);stroke:var(--rep)}.c-L2{fill:var(--l2);stroke:var(--l2)}.c-L1{fill:var(--l1);stroke:var(--l1)}.c-L0{fill:var(--l0);stroke:var(--l0)}
.ec-sw.c-D{background:var(--dem)}.ec-sw.c-R{background:var(--rep)}.ec-sw.c-L2{background:var(--l2)}.ec-sw.c-L1{background:var(--l1)}.ec-sw.c-L0{background:var(--l0)}
:root{--kf-c:#c9c4b9}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--kf-c:#4a524e}}:root[data-theme=dark]{--kf-c:#4a524e}
.c-F{fill:var(--mark);stroke:var(--mark)}.c-C{fill:var(--kf-c);stroke:var(--kf-c)}.ec-sw.c-F{background:var(--mark)}.ec-sw.c-C{background:var(--kf-c)}
.kf li{display:flex;flex-direction:column}.ec.mini{margin:auto 0 2px;padding-top:14px}.ec .ec-vl.tight{font-size:10.5px}.ec.mini .ec-head{margin-bottom:2px}.ec.mini .ec-leg{font-size:12.5px}.ec .ec-vl{fill:var(--ink);font-weight:500}
.ec-bars rect{stroke:none;transition:opacity .15s}.ec-bars rect.ec-old{opacity:.55}.ec-bars rect.dim{opacity:.25}
.ec-ring{fill:none;stroke:var(--ink);stroke-width:1.4}
.ec-lines path{fill:none;stroke-width:1.2;opacity:.55;stroke-linejoin:round;stroke-linecap:round;transition:opacity .15s}
.ec-lines.picking path{opacity:.12}.ec-lines.picking path.on{opacity:1;stroke-width:2.2}
.ec .ec-avg{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;pointer-events:none}
.ec .ec-avl{fill:var(--ink);font-weight:600}.ec-dot{fill:var(--ink);pointer-events:none}
.ec-tip{position:absolute;top:30px;z-index:2;max-width:300px;padding:8px 10px;border-radius:8px;background:var(--card);border:1px solid var(--line);
  box-shadow:0 4px 16px rgba(20,30,25,.12);font-size:13px;line-height:1.45;pointer-events:none}
.ec-tip span{color:var(--dim)}
.ec-rg{width:7px;height:7px;border-radius:50%;border:1.4px solid var(--ink);display:inline-block}