:root{
  --ground:#f4ece1; --ink:#2a2019; --muted:#7d6a58; --line:#e5d8c7;
  --surface:#ffffff; --surface-2:#faf5ee; --espresso:#5E391F; --amber:#A86A1A;
  --disp:"Bricolage Grotesque",Georgia,serif; --ui:"Hanken Grotesk",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#191310; --ink:#f2e8dc; --muted:#b09982; --line:#3a2c22;
  --surface:#241b15; --surface-2:#2e231b; --espresso:#d7a878; --amber:#e0954a;
}}
:root[data-theme="dark"]{
  --ground:#191310; --ink:#f2e8dc; --muted:#b09982; --line:#3a2c22;
  --surface:#241b15; --surface-2:#2e231b; --espresso:#d7a878; --amber:#e0954a;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--ui);line-height:1.6}
.wrap{max-width:760px;margin:0 auto;padding:0 22px}
a{color:var(--amber)}

nav{border-bottom:1px solid var(--line);background:var(--ground)}
.navin{max-width:1060px;margin:0 auto;padding:0 22px;height:64px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--disp);font-weight:800;font-size:20px;letter-spacing:-.01em}
.logo .amber{color:var(--amber)}
.logo .licon{height:34px;width:auto;display:block}
.logo .licon.dark{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo .licon.light{display:none} :root:not([data-theme="light"]) .logo .licon.dark{display:block}}
:root[data-theme="dark"] .logo .licon.light{display:none}
:root[data-theme="dark"] .logo .licon.dark{display:block}
.back{font-size:14px;font-weight:600;text-decoration:none;color:var(--muted)}
.back:hover{color:var(--ink)}

main{padding:46px 0 20px}
h1{font-family:var(--disp);font-weight:800;font-size:clamp(28px,5vw,40px);letter-spacing:-.01em;margin:0 0 6px}
.updated{color:var(--muted);font-size:14px;margin:0 0 30px}
h2{font-family:var(--disp);font-weight:700;font-size:20px;margin:32px 0 8px;color:var(--espresso)}
p,li{font-size:15.5px;color:var(--ink)}
ul{padding-left:20px}
li{margin-bottom:6px}
.note{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:14px;color:var(--muted);margin:24px 0}

footer{border-top:1px solid var(--line);margin-top:40px;padding:26px 0 46px;text-align:center;color:var(--muted);font-size:14px}
footer a{color:var(--muted)}
footer a:hover{color:var(--ink)}