:root{
  --bg:#fbfbfa; --fg:#16161a; --muted:#5e5e68; --faint:#8a8a94;
  --line:#e4e4e1; --card:#ffffff; --accent:#2a5bd7;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#0e0e10; --fg:#eeeef0; --muted:#a0a0aa; --faint:#75757f;
         --line:#26262b; --card:#161619; --accent:#7ea2ff; }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font:400 16.5px/1.7 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh;
}
a{color:var(--accent)}
.wrap{width:100%; max-width:780px; margin:0 auto; padding:0 24px}

/* header */
header{border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:10}
.hd{display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:1.05rem 0; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--fg)}
.brand span{font-weight:600; font-size:1.12rem; letter-spacing:-.015em}
nav{display:flex; gap:1.35rem; flex-wrap:wrap}
nav a{color:var(--muted); text-decoration:none; font-size:.94rem}
nav a:hover,nav a[aria-current="page"]{color:var(--fg)}

/* content */
main{flex:1; padding:3.2rem 0 4rem}
h1{font-size:clamp(1.75rem,4.2vw,2.35rem); line-height:1.22; letter-spacing:-.022em;
   font-weight:600; margin:0 0 1.1rem}
h2{font-size:1.2rem; letter-spacing:-.012em; font-weight:600; margin:2.6rem 0 .7rem}
h3{font-size:1.02rem; font-weight:600; margin:1.7rem 0 .4rem}
p{margin:0 0 1.05rem; color:var(--muted)}
main > .wrap > p:first-of-type{font-size:1.08rem; color:var(--fg)}
ul{color:var(--muted); padding-left:1.15rem; margin:0 0 1.05rem}
li{margin:.3rem 0}
.lede{font-size:1.08rem; color:var(--fg)}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
       gap:1rem; margin:1.6rem 0 .5rem}
.card{border:1px solid var(--line); background:var(--card); border-radius:11px; padding:1.15rem 1.2rem}
.card h3{margin:0 0 .35rem; font-size:.99rem}
.card p{margin:0; font-size:.93rem}

.facts{width:100%; border-collapse:collapse; margin:1.2rem 0 1.4rem; font-size:.95rem}
.facts td{border-bottom:1px solid var(--line); padding:.62rem 0; vertical-align:top}
.facts td:first-child{color:var(--faint); width:11.5rem; padding-right:1rem}

footer{border-top:1px solid var(--line); margin-top:auto}
.ft{display:flex; flex-wrap:wrap; gap:.45rem 1.3rem; justify-content:space-between;
    padding:1.7rem 0; font-size:.87rem; color:var(--faint)}
.ft a{color:var(--faint)}
.tag{display:inline-block; border:1px solid var(--line); background:var(--card);
     color:var(--muted); border-radius:999px; padding:.2rem .7rem; font-size:.82rem}