:root{
  --atx:#bf5700; --atx-d:#8f4100; --spring:#1f8a70; --sky:#2f6fb0; --sun:#e8a33d;
  --bg:#fbf7ef; --card:#ffffff; --ink:#1f1a14; --ink-2:#4a4137; --mut:#7b7164;
  --line:#ece2d2; --line-2:#f4ece0;
  --shadow:0 1px 2px rgba(31,26,20,.04),0 4px 16px rgba(31,26,20,.06);
  --r:14px;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#14110c; --card:#1e1a14; --ink:#f3ede2; --ink-2:#d0c6b6; --mut:#9b9080;
  --line:#332c22; --line-2:#241f18;
  --atx:#e8802f; --spring:#4fb597; --sky:#5f9ad6; --sun:#f0bd6a;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.3);
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16.5px/1.62 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--atx);text-underline-offset:2px}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}
/* header */
.top{background:var(--atx-d);color:#fff5ea;position:sticky;top:0;z-index:50}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .top{background:#241206;border-bottom:1px solid #3a1e0b}}
.top .in{max-width:1060px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:10px;min-height:56px;flex-wrap:wrap}
.brand{font:800 1.25rem/1 var(--serif);color:#fff;text-decoration:none;letter-spacing:-.01em}
.brand b{color:var(--sun)}
.nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.nav a{color:#fbe8d4;text-decoration:none;font-size:.9rem;font-weight:500;padding:7px 11px;border-radius:9px}
.nav a:hover{background:rgba(255,255,255,.12);color:#fff}
/* hero */
.hero{padding:54px 0 30px;background:linear-gradient(180deg,rgba(191,87,0,.09),transparent)}
.kick{letter-spacing:.2em;text-transform:uppercase;font-size:12px;font-weight:700;color:var(--atx)}
h1{font:800 clamp(2rem,6vw,3rem)/1.05 var(--serif);letter-spacing:-.02em;margin:.2em 0 .25em}
.lede{color:var(--ink-2);font-size:1.15rem;max-width:62ch;margin:0}
/* sections */
section{padding:34px 0;border-top:1px solid var(--line-2)}
h2{font:700 1.6rem/1.1 var(--serif);margin:0 0 .1em}
h2 .em{color:var(--atx)}
.sub{color:var(--mut);margin:.15em 0 18px;max-width:60ch}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 16px;box-shadow:var(--shadow);text-decoration:none;color:inherit;display:block}
.card:hover{border-color:var(--atx)}
.card h3{font:700 1.15rem/1.2 var(--serif);margin:0 0 .25em}
.card p{margin:0;color:var(--ink-2);font-size:.96rem}
.card .go{display:inline-block;margin-top:10px;color:var(--atx);font-weight:600;font-size:.9rem}
.prose{max-width:70ch}
.prose h2{margin-top:1.3em}
.prose h3{font:700 1.2rem/1.2 var(--serif);margin:1.4em 0 .2em}
.prose p{color:var(--ink-2)}
.prose ul{color:var(--ink-2);line-height:1.7}
.pill{display:inline-block;background:rgba(31,138,112,.12);color:var(--spring);border:1px solid rgba(31,138,112,.3);border-radius:999px;padding:3px 11px;font-size:.8rem;font-weight:600;margin:0 6px 6px 0}
.note{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--spring);border-radius:12px;padding:14px 16px;color:var(--ink-2);margin:18px 0}
/* footer */
.foot{border-top:1px solid var(--line);margin-top:20px;padding:26px 0 50px;color:var(--mut);font-size:.9rem}
.foot a{color:var(--atx);text-decoration:none}
.foot .row{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:8px}