:root{
  --paper:#EDEAE1;
  --paper-raised:#F8F6F0;
  --ink:#201D18;
  --ink-soft:#6A6558;
  --accent:#3B3FE0;
  --accent-warm:#D98A2B;
  --line:rgba(32,29,24,0.16);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#17150F;
    --paper-raised:#211E16;
    --ink:#F3EFE4;
    --ink-soft:#A49C88;
    --accent:#8389FF;
    --accent-warm:#F2B354;
    --line:rgba(243,239,228,0.16);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#17150F;
  --paper-raised:#211E16;
  --ink:#F3EFE4;
  --ink-soft:#A49C88;
  --accent:#8389FF;
  --accent-warm:#F2B354;
  --line:rgba(243,239,228,0.16);
  color-scheme:dark;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Work Sans', ui-sans-serif, system-ui, sans-serif;
  font-size:16px;
  line-height:1.6;
}
a{color:var(--accent);}
.wrap{max-width:760px; margin-inline:auto; padding-inline:max(16px, 5vw);}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-block:18px; border-bottom:1px solid var(--line);
}
.logo{
  display:flex; align-items:center; gap:8px;
  font-family:'Big Shoulders Display', 'Arial Narrow', sans-serif;
  font-weight:900; font-size:22px; text-transform:uppercase;
  text-decoration:none; color:var(--ink);
}
.logo svg{width:24px; height:24px; flex:none;}
.back{font-size:14px; color:var(--ink-soft); text-decoration:none;}
.back:hover{color:var(--ink);}
main{padding-block:48px 72px;}
h1,h2{
  font-family:'Big Shoulders Display', 'Arial Narrow', sans-serif;
  font-weight:900; text-transform:uppercase; line-height:0.95; margin:0;
}
h1{font-size:clamp(36px, 6vw, 56px);}
h2{font-size:24px; margin-top:40px; margin-bottom:8px;}
.updated{
  font-family:'Space Mono', ui-monospace, monospace; font-size:12px;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--accent-warm);
  margin:14px 0 28px;
}
p, li{max-width:68ch;}
ul{padding-left:20px;}
li{margin-bottom:6px;}
.card{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:6px;
  padding:20px 24px; margin-top:24px;
}
footer{border-top:1px solid var(--line); padding-block:28px; font-size:13px; color:var(--ink-soft);}
footer ul{display:flex; flex-wrap:wrap; gap:20px; list-style:none; padding:0; margin:0 0 10px;}
footer a{color:var(--ink-soft); text-decoration:none;}
footer a:hover{color:var(--ink);}