/* Shared look of the site's own pages (index, BOM). Same palette and type as the kit page. */
:root{
  --bg:#f3f4f1; --paper:#ffffff; --ink:#1d2321; --muted:#5d6763; --rule:#d7dbd6;
  --accent:#d9480f; --accent-soft:#fde7dc; --ok:#2b8a3e; --ok-soft:#e3f4e6; --low:#b35c00; --low-soft:#fff1db;
  --warn:#c92a2a; --warn-soft:#fde2e2; --note:#1c5bbf; --note-soft:#e7f0ff; --dirty:#fff6cc;
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif; --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#121514; --paper:#1a1e1d; --ink:#e7ebe8; --muted:#9aa5a0; --rule:#2d3432;
  --accent:#ff8a4c; --accent-soft:#3a2418; --ok:#69db7c; --ok-soft:#1b3322; --low:#ffb35c; --low-soft:#3a2a12;
  --warn:#ff8787; --warn-soft:#3b1d1d; --note:#8ab4ff; --note-soft:#16243a; --dirty:#3a3412; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121514; --paper:#1a1e1d; --ink:#e7ebe8; --muted:#9aa5a0; --rule:#2d3432;
  --accent:#ff8a4c; --accent-soft:#3a2418; --ok:#69db7c; --ok-soft:#1b3322; --low:#ffb35c; --low-soft:#3a2a12;
  --warn:#ff8787; --warn-soft:#3b1d1d; --note:#8ab4ff; --note-soft:#16243a; --dirty:#3a3412; color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--body)}
.wrap{max-width:1180px;margin:0 auto;padding:28px 16px 96px}
h1,h2,h3{font-family:var(--display);line-height:1.12;margin:0;text-wrap:balance}
h1{font-size:clamp(2rem,5vw,2.8rem);font-weight:700}
h2{font-size:1.5rem;margin:34px 0 10px}
p{margin:0 0 .7em;max-width:74ch}
a{color:var(--note)}
.eyebrow{font:600 .82rem var(--display);text-transform:uppercase;letter-spacing:.12em;color:var(--accent)}
.lede{color:var(--muted);font-size:1.05rem;margin-top:10px}
.mut{color:var(--muted)}
code,.mono{font-family:var(--mono);font-size:.84em;overflow-wrap:anywhere}
.chip{display:inline-block;font:600 .82rem var(--display);letter-spacing:.02em;padding:2px 9px;border-radius:10px;white-space:nowrap}
.chip.ok{background:var(--ok-soft);color:var(--ok)} .chip.low{background:var(--low-soft);color:var(--low)}
.chip.warn{background:var(--warn-soft);color:var(--warn)} .chip.note{background:var(--note-soft);color:var(--note)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:14px;margin-top:16px}
.card{background:var(--paper);border:1px solid var(--rule);border-radius:10px;padding:16px 18px;min-width:0}
a.card{display:block;color:inherit;text-decoration:none;border-left:4px solid var(--accent)}
a.card:hover{border-color:var(--accent)}
a.card:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card h3{font-size:1.3rem;margin-bottom:4px}
.card p{font-size:.95rem;color:var(--muted);margin:0}
.btn{font:600 .95rem var(--display);letter-spacing:.02em;padding:7px 14px;border-radius:6px;border:1px solid var(--accent);
  background:var(--accent);color:#fff;cursor:pointer}
.btn.ghost{background:var(--paper);color:var(--accent)}
.btn:disabled{opacity:.45;cursor:default}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn:not(.ghost){color:#1a1e1d}}
:root[data-theme="dark"] .btn:not(.ghost){color:#1a1e1d}
footer{margin-top:40px;color:var(--muted);font-size:.88rem}