/* FPM site: the shared house style ("Ledger"). Paper by day, ink by night, following the visitor's
   system setting unless they pick one with the switch in the masthead (site.js remembers it).
   The page behaves like print: a serif masthead over a double rule, text links instead of buttons,
   the table set straight on the page with rules rather than in a card. The only colour is the
   heatmap, blue above average and vermillion below, a pair that holds up for colour-blind readers.
   Every page links this file, so the three stay in step. */
:root{
  /* light (paper) */
  --bg:#f2eee5; --panel:#f8f5ee; --raise:#e7e1d4; --hover:#ebe6da;
  --text:#1b1a16; --sec:#3d3a33; --muted:#6f6a60; --faint:#9b958a;
  --line:#1b1a16; --rule:#c6bfae; --line-2:#dcd6c8;
  --pos:17,138,112; --neg:141,78,168;           /* heatmap pair (teal / purple) */
  --pos-text:#0e7a5f; --neg-text:#7d3f9e;        /* the same pair as text, tuned for paper */
  --chip-text:#15140f; --chip-sub:rgba(0,0,0,.55);
  --r:4px;
  --f-serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --f-mono:'Fragment Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --f-sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --gut:max(18px,env(safe-area-inset-left,0px));
  --gutr:max(18px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
/* dark (ink): the system setting, unless the visitor chose light */
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#141311; --panel:#1a1916; --raise:#262420; --hover:#1f1d19;
  --text:#ece7da; --sec:#c5bfb0; --muted:#8a8478; --faint:#625d53;
  --line:#ece7da; --rule:#4a453c; --line-2:#2a2823;
  --pos-text:#4cbf9f; --neg-text:#bd93d8;
  --chip-text:#ffffff; --chip-sub:rgba(255,255,255,.62);
  color-scheme:dark; } }
:root[data-theme="dark"]{
  --bg:#141311; --panel:#1a1916; --raise:#262420; --hover:#1f1d19;
  --text:#ece7da; --sec:#c5bfb0; --muted:#8a8478; --faint:#625d53;
  --line:#ece7da; --rule:#4a453c; --line-2:#2a2823;
  --pos-text:#4cbf9f; --neg-text:#bd93d8;
  --chip-text:#ffffff; --chip-sub:rgba(255,255,255,.62);
  color-scheme:dark; }

*{box-sizing:border-box}
html{background:var(--bg)}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font-family:var(--f-sans);-webkit-font-smoothing:antialiased}
a{color:var(--sec)}
.wrap{max-width:1160px;margin:0 auto;padding:0 var(--gutr) 72px var(--gut)}

/* masthead: serif wordmark, the page links set as text, the theme switch, then a double rule */
.mast{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:44px 0 14px;
  border-bottom:1px solid var(--line);position:relative}
.mast::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:3px;background:var(--line)}
.brand{color:inherit;text-decoration:none}
.brand .row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.brand h1{font:400 clamp(52px,9vw,84px)/.85 var(--f-serif);letter-spacing:-.025em;margin:0}
.brand .exp{font:italic 400 clamp(18px,2.6vw,24px)/1 var(--f-serif);color:var(--muted);letter-spacing:-.01em}
.mark{display:none}
.nav{display:flex;align-items:baseline;gap:22px;padding-bottom:6px}
.nav a{font:500 11.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none;
  padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--text)}
.nav a[aria-current="page"]{color:var(--text);border-bottom-color:var(--text)}
.theme{margin-left:6px;font:500 11.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  background:none;border:1px solid var(--rule);border-radius:var(--r);padding:7px 9px 6px;cursor:pointer}
.theme:hover{color:var(--text);border-color:var(--text)}
.theme .on-dark,.theme .on-light{display:none}
:root[data-theme="dark"] .theme .on-dark{display:inline}
:root[data-theme="light"] .theme .on-light{display:inline}
:root:not([data-theme]) .theme .on-light{display:inline}
@media(prefers-color-scheme:dark){ :root:not([data-theme]) .theme .on-light{display:none} :root:not([data-theme]) .theme .on-dark{display:inline} }

/* dateline under the masthead */
.credit{margin:22px 0 0;font:400 11.5px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 0}
.credit #updated{display:none}
.credit.dated #updated{display:inline}
.credit.dated #updated::before{content:"";display:inline-block;width:1px;height:11px;background:var(--rule);margin:0 12px;vertical-align:-1px}

/* intro copy */
.lede{max-width:60ch;margin:18px 0 0;font-size:16px;line-height:1.65;color:var(--sec)}
.lede+.lede{margin-top:12px}
.lede b{color:var(--text);font-weight:500}
.lede a,.credit a,footer a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--rule)}
.lede a:hover,.credit a:hover,footer a:hover{border-bottom-color:var(--text)}
.credit a{color:var(--sec)}
.repo{display:inline-block;margin:24px 0 0;font:500 11.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text);
  text-decoration:none;border:1px solid var(--line);border-radius:var(--r);padding:12px 16px}
.repo:hover{background:var(--text);color:var(--bg)}
.rule{height:1px;background:var(--rule);margin:36px 0 0}

footer{margin-top:26px;font:400 12px/1.8 var(--f-sans);color:var(--muted)}
footer .by{margin-top:6px}

/* back to top, on the leaderboard and about pages */
.top{position:fixed;z-index:50;right:max(18px,env(safe-area-inset-right,0px));bottom:max(18px,env(safe-area-inset-bottom,0px));
  font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text);background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s}
.top.show{opacity:1;pointer-events:auto}
.top:hover{background:var(--text);color:var(--bg)}

/* about: long-form reading with a table of contents beside it */
.doc{display:grid;grid-template-columns:220px minmax(0,1fr);gap:48px;margin-top:8px}
.toc{position:sticky;top:24px;align-self:start;max-height:calc(100vh - 48px);overflow:auto;padding:30px 0 0}
.toc ol{list-style:none;margin:0;padding:0}
.toc>ol>li{margin:0 0 20px}
.toc>ol>li>a{font:500 10.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.toc li li{margin:8px 0 0}
.toc li li a{font-size:13px;color:var(--muted)}
.toc a{text-decoration:none;line-height:1.45;display:inline-block}
.toc a:hover,.toc a.on{color:var(--text)}
.prose{max-width:68ch;font-size:16.5px;line-height:1.7;color:var(--sec)}
.prose .part{padding-top:6px}
.prose .part+.part{margin-top:56px;border-top:1px solid var(--rule)}
.prose h2{font:400 clamp(34px,4.6vw,44px)/1.05 var(--f-serif);letter-spacing:-.02em;color:var(--text);margin:30px 0 18px}
.prose h3{font:400 24px/1.2 var(--f-serif);letter-spacing:-.01em;color:var(--text);margin:42px 0 10px}
.prose h4{font:500 10.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:30px 0 10px}
.prose p{margin:0 0 14px}
.prose strong{color:var(--text);font-weight:600}
.prose em{color:var(--text);font-style:italic}
.prose ul,.prose ol{margin:0 0 16px;padding-left:20px}
.prose li{margin:0 0 9px;line-height:1.6}
.prose li::marker{color:var(--faint)}
.prose a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--rule);overflow-wrap:anywhere}
.prose a:hover{border-bottom-color:var(--text)}
.prose code{font:400 13.5px var(--f-mono);background:var(--raise);border-radius:3px;padding:1px 5px;color:var(--text)}
.prose h2,.prose h3,.prose h4{scroll-margin-top:20px}
.status{color:var(--muted);font-size:13px;padding:30px 0}

@media(max-width:1000px){
  .doc{grid-template-columns:1fr;gap:0}
  .toc{position:static;max-height:none;border-bottom:1px solid var(--rule);padding:24px 0 16px}
  .toc li li{display:none}
  .toc>ol{display:flex;flex-wrap:wrap;gap:8px 22px}
  .toc>ol>li{margin:0}
}
@media(max-width:620px){
  .mast{flex-wrap:wrap;align-items:flex-start;padding-top:32px}
  .nav{width:100%;gap:12px 16px;flex-wrap:wrap}   /* wrap the links + theme button so nothing runs off-screen */
  .theme{margin-left:0}
  .credit{flex-direction:column;align-items:flex-start}
  .credit.dated #updated::before{display:none}
  .lede{font-size:15.5px}
  .prose{font-size:16px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}