@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..600&family=Instrument+Sans:wght@400;500;600&display=swap');
:root{
  --paper:oklch(97.5% 0.012 85); --paper-2:oklch(95% 0.016 82); --card:oklch(99% 0.008 85);
  --ink:oklch(28% 0.03 150); --ink-soft:oklch(42% 0.025 150); --ink-faint:oklch(56% 0.02 150);
  --green:oklch(43% 0.075 155); --green-deep:oklch(33% 0.06 155);
  --terra:oklch(60% 0.14 42); --terra-deep:oklch(50% 0.13 40); --ochre:oklch(76% 0.11 78);
  --line:oklch(88% 0.02 90); --line-soft:oklch(92% 0.015 90); --shadow:oklch(35% 0.04 150 / 0.10);
  --r-sm:10px; --r-md:16px; --r-lg:24px; --wrap:760px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:'Instrument Sans',system-ui,sans-serif;color:var(--ink);
  background:radial-gradient(120% 50% at 50% -10%,var(--paper-2),transparent 60%),var(--paper);
  line-height:1.62;font-size:17px;letter-spacing:-0.01em;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--card);padding:10px 14px;border-radius:var(--r-sm);z-index:99}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:560;line-height:1.12;letter-spacing:-0.02em;color:var(--green-deep)}
h1{font-size:clamp(1.9rem,5.2vw,2.7rem);margin:6px 0 12px}
h2{font-size:clamp(1.35rem,3.4vw,1.75rem);margin:34px 0 12px}
h3{font-size:1.1rem;margin:0}
p{margin:0 0 14px}
a{color:var(--terra-deep);text-decoration:none}
a:hover{text-decoration:underline}
em{font-style:normal;color:var(--terra-deep)}
.eyebrow{font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;font-weight:600;color:var(--terra);margin:0 0 4px}
.lede{font-size:1.12rem;color:var(--ink-soft);margin-bottom:16px}
.muted{color:var(--ink-faint);font-size:.92rem}
/* header */
.site-head{border-bottom:1px solid var(--line-soft);background:oklch(99% 0.008 85 / .85);backdrop-filter:blur(8px);
  position:sticky;top:0;z-index:20}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px;flex-wrap:wrap}
.brand{font-family:'Fraunces',serif;font-weight:600;font-size:1.3rem;color:var(--green-deep);display:flex;align-items:center;gap:8px}
.brand:hover{text-decoration:none}
.mark{width:16px;height:16px;border-radius:50% 50% 50% 4px;background:linear-gradient(150deg,var(--green),var(--ochre));display:inline-block}
.site-nav{display:flex;gap:18px;font-size:.93rem;font-weight:500}
.site-nav a{color:var(--ink-soft)}
.site-nav a:hover{color:var(--terra-deep)}
/* hero */
.hero{padding:44px 0 8px;border-bottom:1px solid var(--line-soft)}
.page{padding-block:26px 40px}
.crumbs{font-size:.82rem;color:var(--ink-faint);margin-bottom:14px;display:flex;gap:7px;flex-wrap:wrap}
.crumbs a{color:var(--ink-faint)}
.crumbs a::after{content:'/';margin-left:7px;color:var(--line)}
/* species cards */
.sp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:26px 0 34px}
.sp-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:22px 16px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 1px 3px var(--shadow);
  transition:transform .18s,box-shadow .18s}
.sp-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px var(--shadow);text-decoration:none}
.sp-emoji{font-size:2.9rem;line-height:1}
.sp-label{font-family:'Fraunces',serif;font-size:1.3rem;color:var(--green-deep);font-weight:600}
.sp-sub{font-size:.88rem;color:var(--ink-faint)}
.sp-go{font-size:.86rem;font-weight:600;color:var(--terra-deep);margin-top:6px}
/* popular pills */
.pop-wrap{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.pop{font-size:.86rem;padding:7px 13px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--ink-soft)}
.pop:hover{border-color:var(--terra);color:var(--terra-deep);text-decoration:none}
/* families */
.fam-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.fam{padding:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md)}
.fam h3{margin-bottom:6px}
.fam p{font-size:.92rem;color:var(--ink-soft);margin:0}
/* concern grid */
.cn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(226px,1fr));gap:14px}
.cn-card{display:flex;flex-direction:column;gap:5px;padding:18px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:0 1px 3px var(--shadow);transition:transform .18s,box-shadow .18s}
.cn-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px var(--shadow);text-decoration:none}
.cn-motif{font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;color:var(--terra);font-weight:600}
.cn-title{font-family:'Fraunces',serif;font-size:1.08rem;color:var(--green-deep);font-weight:600;line-height:1.2}
.cn-blurb{font-size:.88rem;color:var(--ink-faint)}
/* red flags */
.redflag{margin:22px 0;padding:16px 18px;border-radius:var(--r-md);background:oklch(96% 0.03 78);border:1px solid var(--ochre)}
.redflag-emergency{background:oklch(95.5% 0.05 40);border-color:var(--terra)}
.redflag-h{font-weight:600;color:var(--ink);margin:0 0 6px;font-size:1rem}
.redflag-emergency .redflag-h{color:var(--terra-deep)}
.redflag ul{margin:0;padding-left:20px}
.redflag li{font-size:.93rem;color:var(--ink-soft);margin:4px 0}
/* micro disclaimer */
.microdisc{font-size:.83rem;color:var(--ink-faint);font-style:italic;margin:0 0 14px;padding-left:11px;border-left:2px solid var(--line)}
/* remedy cards */
.rem-list{display:flex;flex-direction:column;gap:12px}
.rem-card{padding:16px 18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 1px 3px var(--shadow)}
.rem-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.pill{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;font-weight:600;color:var(--green);
  background:oklch(94% 0.03 155);border-radius:999px;padding:3px 9px}
.rem-tag{font-size:.94rem;color:var(--ink-soft);margin:0 0 8px}
.uses{margin:0;padding-left:20px}
.uses li{font-size:.9rem;color:var(--ink-faint);margin:3px 0}
.uses.big li{font-size:1rem;color:var(--ink-soft);margin:6px 0}
/* buy cards */
.buy-list{display:flex;flex-direction:column;gap:12px}
.buy-card{padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 1px 3px var(--shadow)}
.buy-brand{font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-faint)}
.buy-name{font-weight:600;color:var(--ink);margin-bottom:9px}
.buy-btns{display:flex;gap:8px;flex-wrap:wrap}
.btn{display:inline-block;font:inherit;font-size:.86rem;font-weight:600;padding:8px 14px;border-radius:999px;
  border:1px solid var(--line);cursor:pointer;transition:opacity .15s}
.btn:hover{opacity:.87;text-decoration:none}
.btn-terra{background:var(--terra);border-color:var(--terra);color:#fff}
.btn-ghost{background:transparent;color:var(--ink-soft)}
/* howto / faq / related */
.howto{padding-left:22px;display:flex;flex-direction:column;gap:9px}
.howto li{font-size:.96rem;color:var(--ink-soft)}
.faq-i{padding:15px 0;border-bottom:1px solid var(--line-soft)}
.faq-i h3{margin-bottom:5px;font-size:1.04rem}
.faq-i p{font-size:.95rem;color:var(--ink-soft);margin:0}
.rel-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0}
.rel-list li a{font-size:.88rem;padding:7px 13px;border-radius:999px;background:var(--card);
  border:1px solid var(--line);color:var(--ink-soft);display:inline-block}
.rel-list li a:hover{border-color:var(--terra);color:var(--terra-deep);text-decoration:none}
.endnote{margin-top:30px;padding:16px 18px;background:oklch(96.5% 0.012 150);border:1px solid var(--line-soft);border-radius:var(--r-md)}
.endnote p{font-size:.88rem;color:var(--ink-faint);margin:0}
/* legal */
.legal h2{font-size:1.2rem;margin:26px 0 8px}
.legal p{font-size:.96rem;color:var(--ink-soft)}
.legal code{background:var(--paper-2);padding:1px 5px;border-radius:5px;font-size:.86em}
/* footer */
.site-foot{margin-top:40px;border-top:1px solid var(--line);background:oklch(96% 0.012 85);padding:26px 0 34px}
.foot-disc{font-size:.79rem;line-height:1.62;color:var(--ink-faint);margin-bottom:12px}
.foot-nav{display:flex;flex-wrap:wrap;gap:14px;margin:16px 0 12px;font-size:.84rem}
.foot-nav a{color:var(--ink-soft)}
.foot-c{font-size:.79rem;color:var(--ink-faint)}
@media(max-width:560px){
  body{font-size:16px}
  .head-in{padding-block:10px}
  .site-nav{gap:14px;font-size:.88rem}
  .hero{padding-top:30px}
}

/* ================= visual system ================= */
.brand-logo{display:block;flex:0 0 auto;border-radius:8px}
.ic{flex:0 0 auto;vertical-align:middle}
.inl{vertical-align:-3px;margin-right:5px;color:var(--ink-faint)}
/* hero */
.hero{padding:40px 0 24px}
.hero .wrap{max-width:var(--wrap)}
.hero-in{display:grid;grid-template-columns:1fr .82fr;gap:24px;align-items:center}
.hero-copy,.hero-media{min-width:0}
.hero-art{width:100%;height:auto;display:block}
@media(max-width:880px){.hero-in{grid-template-columns:1fr;gap:14px}
  .hero-media{order:-1;max-width:400px;margin-inline:auto}}
/* species cards */
.sp-grid{grid-template-columns:repeat(2,1fr);gap:12px;margin:24px 0 0}
.sp-card{padding:12px 14px;gap:1px}
.sp-art{display:block}
.sp-label{font-size:1.16rem}
/* icon tiles */
.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(156px,1fr));gap:12px}
.tile{display:flex;flex-direction:column;gap:6px;padding:15px 14px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 1px 2px var(--shadow);
  transition:transform .16s,box-shadow .16s,border-color .16s}
.tile:hover{transform:translateY(-2px);box-shadow:0 8px 18px var(--shadow);text-decoration:none;
  border-color:var(--accent,var(--terra))}
.tile-ic{color:var(--accent,var(--green));display:flex}
.tile-t{font-family:'Fraunces',serif;font-size:.98rem;font-weight:600;color:var(--green-deep);line-height:1.2}
.tile-s{font-size:.72rem;text-transform:uppercase;letter-spacing:.13em;color:var(--ink-faint);font-weight:600}
.tile-sm{padding:13px}
.tile-sm .tile-t{font-size:.9rem}
.seeall{display:flex;gap:18px;font-size:.9rem;font-weight:600;margin-top:14px}
/* accents */
.a-indigo,.t-homeopathic{--accent:oklch(48% 0.085 265)}
.a-terra{--accent:var(--terra)}
.a-ochre{--accent:oklch(62% 0.11 78)}
.a-green,.t-herbal{--accent:var(--green)}
.a-rose{--accent:oklch(56% 0.13 15)}
.a-teal{--accent:oklch(50% 0.08 200)}
.a-plum{--accent:oklch(48% 0.10 320)}
.t-supplement{--accent:oklch(58% 0.12 60)}
/* concern header + chips */
.ctop{display:flex;gap:16px;align-items:flex-start}
.ctop-ic{flex:0 0 auto;color:var(--green);background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:12px;display:flex;box-shadow:0 1px 3px var(--shadow)}
.ctop-copy{min-width:0}
.ctop-copy h1{margin-top:2px}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 18px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;padding:5px 11px;
  border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--ink-soft)}
.chip .ic{color:var(--accent,var(--green))}
.chip b{color:var(--ink)}
.chip-warn{color:var(--terra-deep);border-color:var(--ochre);background:oklch(97% 0.03 78)}
.chip-warn .ic{color:var(--terra)}
a.chip-warn:hover{text-decoration:none;border-color:var(--terra)}
/* hub header */
.hubtop{display:flex;gap:20px;align-items:center;justify-content:space-between}
.hubtop-copy{min-width:0}
.hubtop-art{flex:0 0 auto;display:block}
@media(max-width:560px){.hubtop-art{display:none}}
/* cards with icons */
.cn-ic{color:var(--accent,var(--green));display:flex;margin-bottom:2px}
.cn-card{border-left:3px solid var(--accent,var(--line))}
.rem-card{display:flex;gap:14px;border-left:3px solid var(--accent,var(--green))}
.rem-ic{flex:0 0 auto;color:var(--accent,var(--green));margin-top:3px}
.rem-body{min-width:0}
.fam{border-left:3px solid var(--accent,var(--green))}
.fam-ic{color:var(--accent,var(--green));display:flex;margin-bottom:8px}
/* step lists */
.howto{list-style:none;padding:0;gap:11px}
.step{display:flex;gap:12px;align-items:flex-start}
.step-ic{flex:0 0 auto;color:var(--green);background:var(--card);border:1px solid var(--line);
  border-radius:11px;padding:7px;display:flex}
.step-b{display:flex;flex-direction:column;min-width:0}
.step-b b{font-family:'Fraunces',serif;font-weight:600;color:var(--green-deep);font-size:1rem;line-height:1.3}
.step-b span{font-size:.9rem;color:var(--ink-faint)}
/* accordions - content stays in the DOM, just not in the reader's face */
details.ctx,details.faq-i{border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);
  padding:0;margin:0 0 10px}
details.ctx summary,details.faq-i summary{cursor:pointer;list-style:none;display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:13px 16px;font-weight:600;color:var(--green-deep);
  font-family:'Fraunces',serif;font-size:1rem}
details summary::-webkit-details-marker{display:none}
details.ctx summary:hover,details.faq-i summary:hover{color:var(--terra-deep)}
details.ctx>p,details.faq-i>p{padding:0 16px 14px;font-size:.93rem;color:var(--ink-soft);margin:0}
.chev{color:var(--ink-faint);transition:transform .18s;flex:0 0 auto}
details[open] .chev{transform:rotate(180deg)}
.faq-i summary h3{font-size:1rem;margin:0;font-weight:600;font-family:inherit;color:inherit}
.faq{margin-top:26px}
.rf-ic{color:var(--terra);vertical-align:-4px;margin-right:7px}
/* neutral card */
.ncard{display:flex;gap:16px;margin-top:34px;padding:20px;background:oklch(96.5% 0.012 150);
  border:1px solid var(--line-soft);border-radius:var(--r-lg)}
.ncard-ic{flex:0 0 auto;color:var(--green)}
.ncard h3{margin-bottom:6px}
.ncard p{font-size:.9rem;color:var(--ink-soft);margin:0 0 8px}
.ncard-links{display:flex;flex-wrap:wrap;gap:14px;font-size:.86rem;font-weight:600}
@media(max-width:560px){.ncard,.ctop{gap:12px}.hero{padding-top:26px}}