:root{
  --bg:#F2F6F8; --ink:#12232E; --muted:#51656F; --blue:#0B6E99; --blue-dark:#085577;
  --kraft:#C8A97E; --pleat:#DCE9EE; --line:#CBD8DE; --white:#fff;
  --font: system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{--bg:#0F1A21; --ink:#E8F0F3; --muted:#9DB1BB; --blue:#5BB8E0; --blue-dark:#8ACDEB; --pleat:#1B2D38; --line:#2B414E; --white:#162630;}
}
*{box-sizing:border-box}
html{scroll-padding-top:1rem}
body{margin:0;background:var(--bg);color:var(--ink);font:1.0625rem/1.6 var(--font)}
a{color:var(--blue)} a:hover{color:var(--blue-dark)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.skip{position:absolute;left:-999px} .skip:focus{left:1rem;top:1rem;background:var(--white);padding:.5rem 1rem;z-index:9}
.top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.25rem;border-bottom:1px solid var(--line);flex-wrap:wrap}
.logo{font-weight:800;font-size:1.25rem;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.top nav{display:flex;gap:1.25rem}
.top nav a{color:var(--ink);text-decoration:none}
.nw{display:inline-block}
h1{text-wrap:balance}
.top nav a:hover{text-decoration:underline}
.wrap{max-width:46rem;margin:0 auto;padding:1.5rem 1.25rem 3rem}
h1{font-size:clamp(1.75rem,5vw,2.5rem);line-height:1.15;letter-spacing:-.02em;margin:.5rem 0 1rem}
h2{font-size:1.35rem;margin:2.25rem 0 .75rem}
.hero{max-width:46rem;margin:0 auto;padding:3rem 1.25rem 1rem}
.hero h1{font-size:clamp(2rem,7vw,3.25rem)}
.lead{color:var(--muted);max-width:36rem}
.search{margin:1.5rem 0}
.search label{display:block;font-weight:600;margin-bottom:.4rem}
.search input{width:100%;font:inherit;padding:.9rem 1rem;border:2px solid var(--ink);border-radius:6px;background:var(--white);color:var(--ink)}
#results{list-style:none;margin:.5rem 0 0;padding:0}
#results li a{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 1rem;background:var(--white);border:1px solid var(--line);border-top:0;text-decoration:none;color:var(--ink)}
#results li:first-child a{border-top:1px solid var(--line)}
#results li a:hover{background:var(--pleat)}
#results .none{padding:.75rem 1rem;color:var(--muted)}
.tiles{list-style:none;padding:0;margin:1rem 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.75rem}
.tiles a{display:flex;flex-direction:column;padding:1rem;background:var(--white);border:1px solid var(--line);border-radius:6px;text-decoration:none;color:var(--ink)}
.tiles a:hover{border-color:var(--blue)}
.tiles span{color:var(--muted);font-size:.9rem}
.crumbs{font-size:.9rem;color:var(--muted)}
.crumbs a{color:var(--muted)}
.answer{position:relative;margin:1.25rem 0;background:var(--white);border:4px solid var(--kraft);border-radius:4px;padding:2.25rem 1.25rem 1.25rem}
.pleats{position:absolute;left:0;right:0;top:0;height:.9rem;background:repeating-linear-gradient(90deg,var(--pleat) 0 .45rem,var(--blue) .45rem .55rem,var(--pleat) .55rem 1rem);opacity:.85}
.answer .label{margin:0;color:var(--muted)}
.answer .size{margin:.1rem 0 1rem;font-size:clamp(2.5rem,12vw,4rem);font-weight:800;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.facts{display:flex;flex-wrap:wrap;gap:1.25rem 2rem;margin:0}
.facts dt{font-size:.85rem;color:var(--muted)}
.facts dd{margin:0;font-weight:700}
.note{background:var(--pleat);padding:.75rem 1rem;border-left:4px solid var(--blue)}
.steps{padding-left:1.25rem}.steps li{margin:.4rem 0}
.buy{display:flex;flex-wrap:wrap;gap:.75rem}
.btn{display:inline-block;padding:.8rem 1.25rem;background:var(--blue);color:#fff;font-weight:700;border-radius:6px;text-decoration:none}
.btn:hover{background:var(--blue-dark);color:#fff}
.btn.alt{background:transparent;color:var(--blue);border:2px solid var(--blue)}
.btn.alt:hover{background:var(--pleat);color:var(--blue-dark)}
.aside,.source{color:var(--muted);font-size:.92rem}
details{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:.75rem 1rem;margin:.5rem 0}
summary{cursor:pointer;font-weight:600}
.related{list-style:none;padding:0}
.related li{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--line)}
.related span{color:var(--muted)}
.grid{width:100%;border-collapse:collapse;background:var(--white)}
.grid th,.grid td{text-align:left;padding:.7rem 1rem;border-bottom:1px solid var(--line)}
.grid th{background:var(--pleat)}
.prose p{max-width:38rem}
.foot{border-top:1px solid var(--line);padding:1.5rem 1.25rem;color:var(--muted);font-size:.9rem;text-align:center}
.foot p{margin:.3rem 0}
@media (prefers-reduced-motion:no-preference){.btn,.tiles a{transition:background .15s,border-color .15s}}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:.75rem 0}
.chips a{display:block;padding:.5rem .95rem;background:var(--white);border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.chips a:hover{border-color:var(--blue)}
.bullets{padding-left:1.25rem}.bullets li{margin:.35rem 0}
