/* ShelfVerdict design system — warm walnut + cream + brass. No images, no sticky header. */
:root{
  --ink:#221a14; --ink2:#2e241b; --panel:#3a2d21;
  --cream:#faf6ef; --paper:#fffdf8; --card:#ffffff;
  --brass:#b96f14; --brass-hi:#d98a1f; --brass-soft:#f3e3c2;
  --txt:#2b2119; --muted:#6f6154; --line:#e4d9c8;
  --pass:#1e7b34; --watch:#a86e00; --fail:#b3352b;
  --radius:14px;
  --shadow:0 10px 30px rgba(34,26,20,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--cream);color:var(--txt);line-height:1.6;font-size:17px}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;line-height:1.2;color:var(--ink);margin:0 0 .5em}
h1{font-size:2.35rem} h2{font-size:1.7rem} h3{font-size:1.22rem}
p{margin:0 0 1em} a{color:var(--brass)} a:hover{color:var(--brass-hi)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.small{font-size:.86rem;color:var(--muted)}
.tagline{font-size:1.06rem;color:var(--brass-soft);letter-spacing:.01em}

/* header (scrolls away — never sticky) */
header.site{background:var(--ink);color:var(--cream);padding:14px 0}
header.site .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--cream)}
.logo svg{flex:none}
.logo b{font-family:Georgia,serif;font-size:1.3rem;font-weight:700;letter-spacing:.01em}
nav.main{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap}
nav.main a{color:#e9dfcd;text-decoration:none;font-size:.98rem}
nav.main a:hover{color:#fff}

/* hero */
.hero{background:linear-gradient(160deg,var(--ink) 0%,var(--ink2) 70%,#40301f 100%);color:var(--cream);padding:52px 0 46px}
.hero h1{color:#fff;max-width:16em}
.hero p.lede{font-size:1.14rem;color:#eadfc9;max-width:38em}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn{display:inline-block;background:var(--brass);color:#fff;text-decoration:none;font-weight:600;
  padding:13px 22px;border-radius:10px;border:0;cursor:pointer;font-size:1rem}
.btn:hover{background:var(--brass-hi);color:#fff}
.btn.ghost{background:transparent;border:1.5px solid #c9b28a;color:#f3e7cf}
.btn.ghost:hover{border-color:#fff;color:#fff}
.btn.dark{background:var(--ink)} .btn.dark:hover{background:var(--ink2)}

section{padding:44px 0}
section.tight{padding:26px 0}
.grid{display:grid;gap:18px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow);text-decoration:none;color:var(--txt);display:block}
a.card:hover{border-color:var(--brass);transform:translateY(-2px);transition:.15s}
.card h3{margin-bottom:.3em}
.card p{color:var(--muted);font-size:.95rem;margin:0}
.card .kicker{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--brass);font-weight:700}

/* dark sections + light panels (scoped colors WIN over inherited cream text) */
section.dark{background:var(--ink);color:var(--cream)}
section.dark h2,section.dark h3{color:#fff}
section.dark p{color:#e6d9c3}
.lock-panel{background:var(--cream);color:var(--txt);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.lock-panel h3,.lock-panel h4{color:var(--ink)}
.lock-panel p,.lock-panel li{color:var(--txt)}
.lock-panel .small{color:var(--muted)}
.lock-panel ul{margin:.4em 0 1em;padding-left:1.15em}
/* light components inside dark sections: scoped colors MUST outrank section.dark rules
   (section.dark h3 / section.dark p = specificity 0,1,2 — plain .lock-panel rules at 0,1,1 LOSE.
   Fixed 2026-10-17 after a phone render showed white headings on cream panels.) */
section.dark .lock-panel{color:var(--txt)}
section.dark .lock-panel h3,section.dark .lock-panel h4{color:var(--ink)}
section.dark .lock-panel p,section.dark .lock-panel li{color:var(--txt)}
section.dark .lock-panel .small{color:var(--muted)}
section.dark .card{color:var(--txt)}
section.dark .card h3,section.dark .card h4{color:var(--ink)}
section.dark .card p{color:var(--muted)}
section.dark .tool{color:var(--txt)}
section.dark .tool h2,section.dark .tool h3,section.dark .tool h4{color:var(--ink)}
section.dark .tool p,section.dark .tool li,section.dark .tool label{color:var(--txt)}
section.dark .tool .small,section.dark .tool .hint,section.dark .tool .src{color:var(--muted)}
section.dark .tablewrap{color:var(--txt)}
section.dark .tablewrap p,section.dark .tablewrap td{color:var(--txt)}
section.dark .result{color:var(--txt)}
section.dark .result .big{color:var(--ink)}
section.dark .notice{color:var(--txt)}
section.dark .faq details{color:var(--txt)}
section.dark .faq summary{color:var(--ink)}
.price{font-family:Georgia,serif;font-size:2rem;color:var(--ink)}
.verdict{display:inline-block;font-weight:700;font-size:.8rem;letter-spacing:.06em;
  padding:3px 10px;border-radius:999px;color:#fff;vertical-align:middle}
.verdict.pass{background:var(--pass)} .verdict.watch{background:var(--watch)} .verdict.fail{background:var(--fail)}

/* forms + calculators */
.tool{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}
label{display:block;font-weight:600;font-size:.92rem;margin:0 0 5px}
input,select,textarea{width:100%;font-size:16px;padding:11px 12px;border:1.5px solid #cdbfa8;border-radius:9px;
  background:#fff;color:var(--txt);font-family:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brass-soft);border-color:var(--brass)}
.field{margin-bottom:15px}
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.form-grid.two{grid-template-columns:repeat(2,1fr)}
.hint{font-size:.82rem;color:var(--muted);margin-top:4px}
.result{margin-top:20px;background:#fbf3df;border:1.5px solid var(--brass-soft);border-radius:11px;padding:18px}
.result .big{font-family:Georgia,serif;font-size:1.65rem;color:var(--ink)}
.src{font-size:.8rem;color:var(--muted);margin-top:12px;border-top:1px dashed var(--line);padding-top:9px}
input[type=range]{padding:0;border:0}

/* tables */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:11px;background:#fff}
table{border-collapse:collapse;width:100%;min-width:520px}
th,td{padding:10px 13px;text-align:left;border-bottom:1px solid var(--line);font-size:.95rem;white-space:nowrap}
th{background:#f6efe0;font-family:inherit;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

/* result rows stack on phones */
.kv{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px dashed var(--line)}
.kv:last-child{border-bottom:0}
.kv b{text-align:right;min-width:0;overflow-wrap:anywhere}

/* species chips / lists */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:.9rem;text-decoration:none;color:var(--txt)}
.chips a:hover{border-color:var(--brass);color:var(--brass)}

footer.site{background:var(--ink);color:#d9cbae;padding:38px 0;margin-top:0}
footer.site a{color:#f0e2c4}
footer.site .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:26px}
footer.site h4{color:#fff;margin:0 0 .5em;font-family:Georgia,serif}
footer.site ul{list-style:none;margin:0;padding:0} footer.site li{margin:.3em 0}
footer.site .fine{border-top:1px solid #473827;margin-top:24px;padding-top:16px;font-size:.85rem;color:#b7a888}

.faq details{background:#fff;border:1px solid var(--line);border-radius:11px;padding:15px 18px;margin-bottom:10px}
.faq summary{font-weight:600;cursor:pointer;color:var(--ink)}
.notice{background:#fbf3df;border:1px solid var(--brass-soft);border-radius:11px;padding:14px 18px;font-size:.93rem}

@media (max-width:860px){
  .grid.c3,.grid.c4{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:repeat(2,1fr)}
  footer.site .cols{grid-template-columns:1fr}
}
@media (max-width:560px){
  h1{font-size:1.9rem}
  .grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}
  .form-grid,.form-grid.two{grid-template-columns:1fr}
  .kv{flex-direction:column;gap:2px} .kv b{text-align:left}
  nav.main{margin-left:0}
  .hero{padding:38px 0 34px}
  section{padding:32px 0}
}
@media print{
  header.site,footer.site,.no-print{display:none!important}
  body{background:#fff}
}