@import url("/fonts/fonts.css");

:root{
  --bg:#ffffff; --raised:#f5f4f2; --sunk:#faf9f7;
  --ink:#1f1d1a; --strong:#0d0c0a; --muted:#4a4842; --faint:#63605a; --subtle:#78746b;
  --accent:#0d0c0a; --on-accent:#ffffff;
  --rule-faint:rgba(0,0,0,.07); --rule:rgba(0,0,0,.12); --rule-strong:rgba(0,0,0,.22);
  --todo-bg:rgba(178,110,0,.10); --todo-line:rgba(178,110,0,.55); --todo-ink:#8A5A00;
  --invert:1;
  --serif:'Instrument Serif','Times New Roman',serif;
  --sans:'DM Sans',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0a0908; --raised:#121110; --sunk:#050403;
  --ink:#e8e0d4; --strong:#f4ede0; --muted:#b5ac9f; --faint:#8a8378; --subtle:#6b645a;
  --accent:#F5E6D3; --on-accent:#0a0908;
  --rule-faint:rgba(245,230,211,.07); --rule:rgba(245,230,211,.13); --rule-strong:rgba(245,230,211,.26);
  --todo-bg:rgba(255,196,60,.12); --todo-line:rgba(255,196,60,.5); --todo-ink:#FFC43C;
  --invert:0;
}}
:root[data-theme="dark"]{
  --bg:#0a0908; --raised:#121110; --sunk:#050403;
  --ink:#e8e0d4; --strong:#f4ede0; --muted:#b5ac9f; --faint:#8a8378; --subtle:#6b645a;
  --accent:#F5E6D3; --on-accent:#0a0908;
  --rule-faint:rgba(245,230,211,.07); --rule:rgba(245,230,211,.13); --rule-strong:rgba(245,230,211,.26);
  --todo-bg:rgba(255,196,60,.12); --todo-line:rgba(255,196,60,.5); --todo-ink:#FFC43C;
  --invert:0;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;
     -webkit-font-smoothing:antialiased}
.wrap{max-width:760px;margin:0 auto;padding:0 28px}
@media(max-width:640px){.wrap{padding:0 18px}}

nav{border-bottom:1px solid var(--rule-faint)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand img{height:30px;width:auto;filter:invert(var(--invert))}
.brand .word{font-family:var(--serif);font-size:27px;color:var(--strong);line-height:1}
.back{font-size:14px;color:var(--muted);text-decoration:none}
.back:hover{color:var(--strong)}

header{padding:64px 0 8px}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--faint)}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,6vw,58px);line-height:1.02;
   letter-spacing:-.02em;color:var(--strong);margin:14px 0 10px;text-wrap:balance}
.updated{font-family:var(--mono);font-size:11px;color:var(--subtle);letter-spacing:.04em}

main{padding:34px 0 90px}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3.4vw,32px);line-height:1.1;
   color:var(--strong);margin:46px 0 12px;letter-spacing:-.015em}
h2 .n{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.16em;
      display:block;margin-bottom:9px}
p{font-size:16px;line-height:1.7;color:var(--muted);margin:0 0 16px}
ul{margin:0 0 16px;padding-left:20px}
li{font-size:16px;line-height:1.7;color:var(--muted);margin:5px 0}
li::marker{color:var(--faint)}
strong{color:var(--strong);font-weight:500}
a{color:var(--strong);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--rule-strong)}
a:hover{text-decoration-color:var(--accent)}
code{font-family:var(--mono);font-size:13.5px;background:var(--sunk);padding:2px 6px;
     border:1px solid var(--rule-faint);border-radius:2px;color:var(--strong)}

table{width:100%;border-collapse:collapse;margin:18px 0 22px;display:block;overflow-x:auto}
th{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--subtle);
   text-align:left;padding:10px 16px 10px 0;border-bottom:1px solid var(--rule);font-weight:500;white-space:nowrap}
td{padding:13px 16px 13px 0;border-bottom:1px solid var(--rule-faint);font-size:14.5px;
   color:var(--muted);vertical-align:top;line-height:1.6}
td:first-child{color:var(--strong)}

/* Unfilled facts are marked so this cannot be published by accident. */
.todo{display:inline-block;background:var(--todo-bg);border:1px dashed var(--todo-line);
      color:var(--todo-ink);border-radius:2px;padding:1px 7px;font-family:var(--mono);
      font-size:12.5px;letter-spacing:.02em}
.banner{border:1px dashed var(--todo-line);background:var(--todo-bg);border-radius:3px;
        padding:18px 20px;margin:0 0 30px}
.banner p{color:var(--todo-ink);margin:0;font-size:14.5px;line-height:1.6}
.banner strong{color:var(--todo-ink)}

footer{border-top:1px solid var(--rule-faint);padding:34px 0 56px}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--subtle)}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--strong)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}