:root{
  --ground:#0F1220; --panel:#171C2E; --edge:#272E48;
  --amber:#FFB347; --gold:#FFC857; --dusk:#9D8DF1; --teal:#4FD1C5;
  --fg:#E8ECF5; --muted:#98A5C1; --faint:#6D7998;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground);color:var(--fg);font-family:var(--body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:660px;margin:0 auto;padding-inline:22px;padding-block:clamp(48px,10vw,80px) 96px}
h1,h2{font-family:var(--display);font-variation-settings:"SOFT" 30,"WONK" 1;margin:0;text-wrap:balance;letter-spacing:-.015em}
h1{font-size:clamp(30px,6.5vw,42px);font-weight:800;line-height:1.05}
h2{font-size:19px;font-weight:600;margin-top:38px}
p{margin:14px 0 0;color:var(--muted);max-width:60ch}
a{color:var(--gold)}
a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.mark{width:52px;height:52px;display:block;margin-bottom:22px}
.sub{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--faint);margin-top:10px}
ul{padding-left:1.15rem;margin:12px 0 0;color:var(--muted)}
li{margin-bottom:6px}
.lede{font-size:19px;color:var(--fg)}
hr{border:0;border-top:1px solid var(--edge);margin:44px 0 0}
footer{margin-top:20px;font-family:var(--mono);font-size:12.5px;color:var(--faint);letter-spacing:.03em}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--gold)}