/* Scaffold styles only. Design owns the look (D-8); keep this minimal. */
:root { --ink:#1d1b19; --muted:#6b645c; --bg:#faf8f5; --card:#fff; --line:#e4ded6; --accent:#7a4b22; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--ink); background:var(--bg); }
a { color:var(--accent); }
.site-header { position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; justify-content:space-between; padding:.75rem 1rem; background:var(--card); border-bottom:1px solid var(--line); }
.brand { font-weight:700; font-size:1.2rem; text-decoration:none; color:var(--ink); }
.nav { display:flex; flex-wrap:wrap; gap:.25rem 1rem; }
.nav a { text-decoration:none; }
.nav .fb, .site-footer .fb { font-weight:700; }
.banner { margin:0; padding:.5rem 1rem; text-align:center; font-size:.9rem; }
.banner--sample { background:#fff4d6; }
.banner--error { background:#fde2e2; }
main { max-width:1100px; margin:0 auto; padding:0 1rem 3rem; }
.hero { padding:2.5rem 0 1rem; }
.hero h1 { margin:0; font-size:2.2rem; }
.section { padding:1.5rem 0; border-top:1px solid var(--line); scroll-margin-top:6rem; }
.grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1rem; }
.card h3, .card h4 { margin:.5rem 0; }
.photo { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:6px; background:#eee; }
.photo--missing { display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:.85rem; }
.facts { display:grid; grid-template-columns:auto 1fr; gap:.15rem .75rem; margin:.5rem 0; }
.facts dt { color:var(--muted); }
.facts dd { margin:0; }
.picks { font-weight:700; }
.btn { display:inline-block; padding:.5rem .9rem; border-radius:6px; border:1px solid var(--accent); text-decoration:none; }
.empty { color:var(--muted); }
select { display:block; margin:.25rem 0 1rem; padding:.4rem; font:inherit; max-width:100%; }
.pedigree { display:grid; grid-template-columns:repeat(3, 1fr); gap:.5rem; align-items:center; }
.ped-col { display:flex; flex-direction:column; gap:.5rem; }
.ped-node { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:.5rem; }
.ped-role { display:block; font-size:.75rem; color:var(--muted); }
.ped-name { font-weight:600; overflow-wrap:anywhere; }
@media (max-width:600px) { .pedigree { grid-template-columns:1fr; } }
.site-footer { text-align:center; padding:2rem 1rem; border-top:1px solid var(--line); background:var(--card); }