/* ============================================================
   SOURSOP.HEALTH — a botanical monograph
   Two inks: graphite and a shaded olive. Paper is cool, not cream.
   ============================================================ */

:root{
  --paper:#F4F5F1;
  --paper-2:#EAECE4;
  --plate:#FFFFFF;
  --ink:#16201A;
  --ink-2:#3C453D;
  --graphite:#67705F;
  --rule:#D9DCD1;
  --rule-2:#C2C7B7;
  --accent:#4A7226;
  --accent-2:#6D8C48;
  --amber:#C0821A;
  --amber-soft:#E7C77E;
  --accent-wash:#EBF0E1;
  --seed:#2B2117;

  --ev-human:#2C6B4E;      --ev-human-bg:#E4F0E9;
  --ev-animal:#83651C;     --ev-animal-bg:#F4EDDC;
  --ev-lab:#42557A;        --ev-lab-bg:#E5E9F3;
  --ev-trad:#6A5470;       --ev-trad-bg:#EFE8F1;
  --ev-none:#8A3B34;       --ev-none-bg:#F6E5E3;

  --illo-line:#16201A;
  --illo-skin:#DCE3CC;
  --illo-skin-2:#C6D2B0;
  --illo-pulp:#FBFAF3;
  --illo-seed:#241C13;
  --illo-core:#EDEDE0;

  --shadow:0 1px 2px rgba(22,32,26,.05), 0 8px 24px -18px rgba(22,32,26,.4);

  --display:"Newsreader", Georgia, "Times New Roman", serif;
  --body:"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --measure:66ch;
  --pad:clamp(1.15rem, 4vw, 2.75rem);
  --maxw:1180px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#12150F;
    --paper-2:#181C14;
    --plate:#1A1E16;
    --ink:#E8ECE0;
    --ink-2:#C3C9B8;
    --graphite:#8D9685;
    --rule:#2B3126;
    --rule-2:#3C4435;
    --accent:#A9C482;
    --accent-2:#8CA866;
    --amber:#E8B45C;
    --amber-soft:#8A6A2A;
    --accent-wash:#1D2517;
    --seed:#D6C8B2;

    --ev-human:#7FC49F;      --ev-human-bg:#16261E;
    --ev-animal:#D7B45F;     --ev-animal-bg:#28210F;
    --ev-lab:#94ABD3;        --ev-lab-bg:#171D2A;
    --ev-trad:#BEA0C6;       --ev-trad-bg:#231A26;
    --ev-none:#D98C82;       --ev-none-bg:#2A1614;

    --illo-line:#D5DBC9;
    --illo-skin:#2C3625;
    --illo-skin-2:#3A4730;
    --illo-pulp:#232A1E;
    --illo-seed:#0C0F09;
    --illo-core:#2B3226;

    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.9);
  }
}

:root[data-theme="dark"]{
  --paper:#12150F;
  --paper-2:#181C14;
  --plate:#1A1E16;
  --ink:#E8ECE0;
  --ink-2:#C3C9B8;
  --graphite:#8D9685;
  --rule:#2B3126;
  --rule-2:#3C4435;
  --accent:#A9C482;
  --accent-2:#8CA866;
  --amber:#E8B45C;
  --amber-soft:#8A6A2A;
  --accent-wash:#1D2517;
  --seed:#D6C8B2;

  --ev-human:#7FC49F;      --ev-human-bg:#16261E;
  --ev-animal:#D7B45F;     --ev-animal-bg:#28210F;
  --ev-lab:#94ABD3;        --ev-lab-bg:#171D2A;
  --ev-trad:#BEA0C6;       --ev-trad-bg:#231A26;
  --ev-none:#D98C82;       --ev-none-bg:#2A1614;

  --illo-line:#D5DBC9;
  --illo-skin:#2C3625;
  --illo-skin-2:#3A4730;
  --illo-pulp:#232A1E;
  --illo-seed:#0C0F09;
  --illo-core:#2B3226;

  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.9);
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{ max-width:100%; }
/* Safety net. An img height="" attribute is a presentational CSS height, so any
   image that misses an explicit height:auto gets stretched to it. Never allow that;
   rules that need a different height opt back in deliberately. */
img{ height:auto; }

a{ color:var(--accent); text-underline-offset:.18em; text-decoration-thickness:.06em; }
a:hover{ color:var(--ink); }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:var(--paper);
  padding:.6rem 1rem; z-index:999;
}
.skip:focus{ left:.5rem; top:.5rem; }

/* ---------- shared type ---------- */

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  line-height:1.12;
  text-wrap:balance;
  margin:0;
  letter-spacing:-.012em;
}
h1{ font-size:clamp(2.4rem, 6.4vw, 4.3rem); line-height:1.03; }
h2{ font-size:clamp(1.75rem, 3.6vw, 2.65rem); }
h3{ font-size:clamp(1.22rem, 2vw, 1.5rem); }
h4{ font-size:1.06rem; font-family:var(--body); font-weight:600; letter-spacing:0; }

p{ margin:0; }
em, i, .binom{ font-style:italic; }
.binom{ font-family:var(--display); }

.eyebrow{
  font-family:var(--mono);
  font-size:.685rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:500;
  display:block;
}
.eyebrow.muted{ color:var(--graphite); }

.lede{
  font-family:var(--display);
  font-size:clamp(1.16rem, 2.1vw, 1.44rem);
  line-height:1.52;
  color:var(--ink-2);
  font-weight:300;
  max-width:54ch;
}

.prose{ max-width:var(--measure); display:flex; flex-direction:column; gap:1.05em; }
.prose p{ color:var(--ink-2); }
.prose strong{ color:var(--ink); font-weight:600; }

.small{ font-size:.875rem; color:var(--graphite); line-height:1.6; }
.tnum{ font-variant-numeric:tabular-nums; }

/* ---------- shell ---------- */

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

.topbar{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--rule);
}
.topbar-in{
  display:flex; align-items:center; gap:1.1rem;
  min-height:62px;
}
.wordmark{
  font-family:var(--display);
  font-size:1.32rem;
  color:var(--ink);
  text-decoration:none;
  letter-spacing:-.02em;
  display:inline-flex; align-items:baseline; gap:.06em;
  white-space:nowrap;
  margin-right:auto;
}
.wordmark .dot{ color:var(--accent); }
.wordmark:hover{ color:var(--ink); }
.wordmark .mark{
  width:15px; height:15px; margin-right:.45rem;
  color:var(--accent); flex:none; align-self:center;
}

.nav{ display:flex; gap:.15rem; align-items:center; }
.nav a{
  font-size:.815rem;
  font-weight:500;
  color:var(--ink-2);
  text-decoration:none;
  padding:.42rem .66rem;
  border-radius:999px;
  white-space:nowrap;
  transition:background .16s ease, color .16s ease;
}
.nav a:hover{ background:var(--paper-2); color:var(--ink); }
.nav a[aria-current="page"]{ color:var(--accent); background:var(--accent-wash); }

.navtoggle{
  display:none;
  background:none; border:1px solid var(--rule-2); border-radius:999px;
  color:var(--ink); font-family:var(--mono); font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.42rem .8rem; cursor:pointer;
}

@media (max-width:880px){
  .navtoggle{ display:inline-block; }
  .nav{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--rule);
    padding:.5rem var(--pad) 1rem;
  }
  .nav.open{ display:flex; }
  .nav a{ padding:.7rem .5rem; border-radius:6px; font-size:.95rem; }
}

/* ---------- sections ---------- */

.view{ display:block; animation:fade .4s ease both; }
@keyframes fade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }

.band{ padding-block:clamp(3rem, 7vw, 5.5rem); }
.band.tight{ padding-block:clamp(2.2rem, 4.5vw, 3.4rem); }
.band.alt{ background:var(--paper-2); }
.band + .band:not(.alt):not(.seam){ border-top:1px solid var(--rule); }
.band.seam{ padding-top:0; }

.stack{ display:flex; flex-direction:column; gap:clamp(1.5rem, 3vw, 2.4rem); }
.stack.tight{ gap:1.1rem; }

.head{ display:flex; flex-direction:column; gap:.85rem; max-width:62ch; }

/* ---------- hero ---------- */

.hero{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(1.8rem, 4vw, 3.6rem);
  align-items:center;
  padding-block:clamp(2.6rem, 6vw, 5rem) clamp(2.4rem, 5vw, 4rem);
}
@media (max-width:920px){
  .hero{ grid-template-columns:1fr; }
}
.hero h1 em{
  font-style:italic;
  color:var(--accent);
  font-weight:300;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.35rem; }

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--body); font-size:.875rem; font-weight:500;
  padding:.62rem 1.15rem;
  border-radius:999px;
  text-decoration:none;
  border:1px solid var(--ink);
  background:var(--ink); color:var(--paper);
  cursor:pointer;
  transition:transform .15s ease, opacity .15s ease;
}
.btn:hover{ color:var(--paper); opacity:.86; transform:translateY(-1px); }
.btn.ghost{
  background:transparent; color:var(--ink); border-color:var(--rule-2);
}
.btn.ghost:hover{ background:var(--paper-2); color:var(--ink); opacity:1; }
.btn svg{ width:14px; height:14px; flex:none; }

/* ---------- specimen strip ---------- */

.specimen{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
  border-top:1px solid var(--rule-2);
  border-left:1px solid var(--rule-2);
}
.specimen div{
  border-right:1px solid var(--rule-2);
  border-bottom:1px solid var(--rule-2);
  padding:.95rem 1rem 1.05rem;
  background:var(--plate);
}
.specimen dt{
  font-family:var(--mono); font-size:.63rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--graphite); margin:0 0 .4rem;
}
.specimen dd{
  margin:0; font-family:var(--display); font-size:1.04rem; line-height:1.3; color:var(--ink);
}

/* ---------- plate (illustration) ---------- */

.plate{
  position:relative;
  background:var(--plate);
  border:1px solid var(--rule-2);
  border-radius:3px;
  padding:clamp(.9rem,2.4vw,1.6rem);
  box-shadow:var(--shadow);
}
.plate-cap{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  margin-top:.85rem; padding-top:.7rem;
  border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:.64rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--graphite);
}

.plate-note{
  margin-top:.7rem;
  min-height:3.1em;
  font-size:.83rem; line-height:1.55; color:var(--ink-2);
  border-left:2px solid var(--accent);
  padding-left:.75rem;
}
.plate-note b{ color:var(--ink); font-weight:600; }

/* ---------- cards / doors ---------- */

.grid{ display:grid; gap:1rem; }
.grid.g2{ grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); }
.grid.g3{ grid-template-columns:repeat(auto-fit, minmax(238px,1fr)); }
.grid.g4{ grid-template-columns:repeat(auto-fit, minmax(196px,1fr)); }

.door{
  display:flex; flex-direction:column; gap:.55rem;
  background:var(--plate);
  border:1px solid var(--rule-2);
  border-radius:3px;
  padding:1.35rem 1.3rem 1.45rem;
  text-decoration:none;
  color:var(--ink);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.door:hover{
  border-color:var(--accent); color:var(--ink);
  transform:translateY(-2px); box-shadow:var(--shadow);
}
.door .ord{
  font-family:var(--mono); font-size:.63rem; letter-spacing:.14em;
  color:var(--accent); text-transform:uppercase;
}
.door h3{ font-size:1.3rem; }
.door p{ font-size:.885rem; color:var(--graphite); line-height:1.58; }
.door .go{
  margin-top:auto; padding-top:.5rem;
  font-size:.8rem; font-weight:500; color:var(--accent);
  display:inline-flex; align-items:center; gap:.35rem;
}

.card{
  background:var(--plate);
  border:1px solid var(--rule-2);
  border-radius:3px;
  padding:1.35rem 1.3rem;
  display:flex; flex-direction:column; gap:.6rem;
}
.card h3{ font-size:1.2rem; }
.card p{ font-size:.895rem; color:var(--ink-2); line-height:1.6; }

/* ---------- evidence chips ---------- */

.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--mono); font-size:.62rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.26rem .55rem; border-radius:2px;
  white-space:nowrap;
  border:1px solid transparent;
}
.chip::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:currentColor; flex:none;
}
.chip.human{ color:var(--ev-human); background:var(--ev-human-bg); border-color:color-mix(in srgb, var(--ev-human) 26%, transparent); }
.chip.animal{ color:var(--ev-animal); background:var(--ev-animal-bg); border-color:color-mix(in srgb, var(--ev-animal) 26%, transparent); }
.chip.lab{ color:var(--ev-lab); background:var(--ev-lab-bg); border-color:color-mix(in srgb, var(--ev-lab) 26%, transparent); }
.chip.trad{ color:var(--ev-trad); background:var(--ev-trad-bg); border-color:color-mix(in srgb, var(--ev-trad) 26%, transparent); }
.chip.contested{ color:var(--ev-lab); background:var(--ev-lab-bg); border-color:color-mix(in srgb, var(--ev-lab) 26%, transparent); }
.chip.none{ color:var(--ev-none); background:var(--ev-none-bg); border-color:color-mix(in srgb, var(--ev-none) 26%, transparent); }

.tierkey{ display:grid; gap:.7rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.tierkey > div{
  display:flex; flex-direction:column; gap:.45rem;
  padding:1rem 1.05rem;
  background:var(--plate);
  border:1px solid var(--rule-2);
  border-radius:3px;
}
.tierkey p{ font-size:.83rem; color:var(--graphite); line-height:1.55; }

/* ---------- finding (benefit entry) ---------- */

#findings .finding{ max-width:960px; }
.finding{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:.75rem;
  background:var(--plate);
  border:1px solid var(--rule-2);
  border-radius:3px;
  padding:1.4rem 1.35rem 1.5rem;
}
.finding.hide{ display:none; }
.finding-top{ display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; }
.finding-top h3{ flex:1 1 auto; min-width:14ch; }
.finding p{ font-size:.925rem; color:var(--ink-2); line-height:1.63; max-width:74ch; }
.finding .caveat{
  font-size:.85rem; color:var(--graphite);
  border-top:1px dashed var(--rule-2);
  padding-top:.7rem;
  max-width:74ch;
}
.finding .caveat b{ color:var(--ink-2); font-weight:600; }

.filters{ display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; }
.filters .fbtn{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.4rem .7rem; border-radius:2px; cursor:pointer;
  border:1px solid var(--rule-2); background:var(--plate); color:var(--graphite);
  transition:all .16s ease;
}
.filters .fbtn:hover{ border-color:var(--accent); color:var(--accent); }
.filters .fbtn[aria-pressed="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ---------- news feed ---------- */

.feedstate{
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--graphite);
}
.feedstate .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; }
.feedstate.err .dot{ background:var(--ev-none); }

.newsfeed{ display:flex; flex-direction:column; border-top:1px solid var(--rule); max-width:900px; }
.newsitem{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.35rem 1.4rem;
  align-items:baseline; padding:1rem .2rem; border-bottom:1px solid var(--rule);
}
.newsitem a{
  font-family:var(--display); font-size:1.08rem; line-height:1.35;
  color:var(--ink); text-decoration:none;
}
.newsitem a:hover{ color:var(--accent); text-decoration:underline; }
.newsitem .meta{
  font-family:var(--mono); font-size:.63rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--graphite); white-space:nowrap;
}
@media (max-width:560px){ .newsitem{ grid-template-columns:1fr; } .newsitem .meta{ white-space:normal; } }

/* ---------- price chain ---------- */

.chain{ display:flex; flex-direction:column; gap:.8rem; max-width:900px; }
.tier{
  display:grid; grid-template-columns:2.4rem minmax(0,1fr); gap:1rem;
  border:1px solid var(--rule-2); border-radius:3px; background:var(--plate);
  padding:1.15rem 1.2rem 1.25rem;
}
.tier .step{ font-family:var(--mono); font-size:.7rem; color:var(--accent); padding-top:.22rem; }
.tier p{ font-size:.88rem; color:var(--ink-2); line-height:1.58; margin-top:.3rem; }
.tier .figs{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.7rem; }
.tier .fig{
  font-family:var(--mono); font-size:.72rem; color:var(--ink);
  background:var(--paper-2); border:1px solid var(--rule); border-radius:2px;
  padding:.26rem .55rem; font-variant-numeric:tabular-nums;
}
.tier .src{ font-size:.76rem; color:var(--graphite); margin-top:.65rem; }

/* ---------- research disclosure ---------- */

details.research{ border-top:1px dashed var(--rule-2); padding-top:.7rem; margin-top:.1rem; }
details.research summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.65rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent);
}
details.research summary::-webkit-details-marker{ display:none; }
details.research summary::before{
  content:"+"; display:grid; place-items:center;
  width:15px; height:15px; border:1px solid var(--accent); border-radius:2px;
  font-size:.7rem; line-height:1;
}
details.research[open] summary::before{ content:"\2212"; }
details.research summary:hover{ color:var(--ink); }
details.research .links{ display:flex; flex-direction:column; gap:.55rem; margin-top:.85rem; max-width:74ch; }
details.research .links > div{ display:grid; grid-template-columns:5.4rem minmax(0,1fr); gap:.8rem; align-items:baseline; }
details.research .links .k{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--graphite);
}
details.research .links a{ font-size:.87rem; line-height:1.45; }
details.research .links .d{ display:block; font-size:.8rem; color:var(--graphite); line-height:1.45; }
@media (max-width:560px){ details.research .links > div{ grid-template-columns:1fr; gap:.15rem; } }

/* ---------- producer card ---------- */

.producer{
  max-width:960px;
  border:1px solid var(--accent);
  border-left-width:4px;
  border-radius:4px;
  background:var(--accent-wash);
  padding:clamp(1.35rem,3vw,2rem);
  display:flex; flex-direction:column; gap:1.05rem;
}
.producer .tag{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); font-weight:500;
}
.producer h3{
  font-size:clamp(1.5rem,3vw,2rem); line-height:1.1; color:var(--ink);
}
.producer h3 .name{
  font-family:var(--body); font-weight:600; letter-spacing:.01em;
}
.producer > p{ font-size:.94rem; line-height:1.62; color:var(--ink-2); max-width:70ch; }
.producer .checks{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.55rem 1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
}
.producer .checks li{
  position:relative; padding-left:1.6rem;
  font-size:.9rem; line-height:1.5; color:var(--ink);
}
.producer .checks li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:9px; height:5px;
  border-left:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
.producer .checks li b{ font-weight:600; }
.producer .foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.2rem;
  padding-top:.3rem;
}
.producer .foot .note{
  font-size:.82rem; color:var(--graphite); line-height:1.55; max-width:46ch;
}

/* ---------- callout ---------- */

.callout{
  border:1px solid var(--rule-2);
  border-left:3px solid var(--accent);
  background:var(--plate);
  border-radius:0 3px 3px 0;
  padding:1.15rem 1.25rem;
  display:flex; flex-direction:column; gap:.55rem;
  max-width:78ch;
}
.callout.warn{ border-left-color:var(--ev-none); }
.callout h4{ display:flex; align-items:center; gap:.5rem; }
.callout p{ font-size:.9rem; color:var(--ink-2); line-height:1.62; }

/* ---------- tables ---------- */

.tablewrap{ overflow-x:auto; border:1px solid var(--rule-2); border-radius:3px; background:var(--plate); }
table{ width:100%; border-collapse:collapse; font-size:.9rem; min-width:420px; }
caption{
  text-align:left; padding:1rem 1.05rem .85rem;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--graphite);
}
th,td{ text-align:left; padding:.62rem 1.05rem; border-bottom:1px solid var(--rule); }
thead th{
  font-family:var(--mono); font-size:.63rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--graphite); font-weight:500;
  border-bottom:1px solid var(--rule-2);
}
tbody tr:last-child td{ border-bottom:none; }
td.num, th.num{ text-align:right; font-variant-numeric:tabular-nums; }
td.name{ color:var(--ink); }
td.dv{ color:var(--graphite); font-variant-numeric:tabular-nums; text-align:right; width:7ch; }
tbody tr.subject td{ background:var(--accent-wash); }
tbody tr.subject td.name{ color:var(--ink); font-weight:600; }

.toggle{
  display:inline-flex; border:1px solid var(--rule-2); border-radius:999px; overflow:hidden;
  background:var(--plate);
}
.toggle button{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.42rem .85rem; border:none; background:transparent; color:var(--graphite); cursor:pointer;
}
.toggle button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }

/* ---------- names list ---------- */

.names{
  display:grid; gap:0;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  border-top:1px solid var(--rule);
}
.names div{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.7rem .2rem;
  border-bottom:1px solid var(--rule);
}
.names .nm{ font-family:var(--display); font-size:1.02rem; color:var(--ink); }
.names .pl{ font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--graphite); text-align:right; }

/* ---------- references ---------- */

.refs{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--rule); }
.ref{
  display:grid;
  grid-template-columns:2.6rem minmax(0,1fr);
  gap:.9rem;
  padding:1rem .2rem;
  border-bottom:1px solid var(--rule);
}
.ref .key{ font-family:var(--mono); font-size:.7rem; color:var(--accent); padding-top:.18rem; }
.ref .body{ display:flex; flex-direction:column; gap:.35rem; }
.ref .ttl{ font-family:var(--display); font-size:1.06rem; line-height:1.32; color:var(--ink); }
.ref .meta{ font-size:.8rem; color:var(--graphite); }
.ref .what{ font-size:.86rem; color:var(--ink-2); line-height:1.55; max-width:70ch; }
.ref .links{ display:flex; gap:.9rem; flex-wrap:wrap; font-size:.78rem; font-family:var(--mono); letter-spacing:.06em; }

/* ---------- steps / lists ---------- */

ul.bullets{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.6rem; max-width:70ch; }
ul.bullets li{
  position:relative; padding-left:1.25rem;
  font-size:.925rem; color:var(--ink-2); line-height:1.6;
}
ul.bullets li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:1px; background:var(--accent);
}
ul.bullets li b{ color:var(--ink); font-weight:600; }

ol.steps{ margin:0; padding:0; list-style:none; counter-reset:s; display:flex; flex-direction:column; gap:.9rem; max-width:70ch; }
ol.steps li{
  counter-increment:s;
  position:relative; padding-left:2.6rem;
  font-size:.925rem; color:var(--ink-2); line-height:1.6;
}
ol.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute; left:0; top:.28em;
  font-family:var(--mono); font-size:.7rem; color:var(--accent);
}
ol.steps li b{ color:var(--ink); font-weight:600; }

/* ---------- footer ---------- */

.foot{
  border-top:1px solid var(--rule-2);
  background:var(--paper-2);
  padding-block:clamp(2.4rem,5vw,3.6rem);
}
.foot-grid{
  display:grid; gap:2rem;
  grid-template-columns:minmax(0,1.4fr) repeat(auto-fit,minmax(150px,1fr));
}
.foot h4{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--graphite); font-weight:500;
  margin-bottom:.85rem;
}
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45rem; }
.foot ul a{ font-size:.875rem; text-decoration:none; color:var(--ink-2); }
.foot ul a:hover{ color:var(--accent); }
.foot .colophon{ font-size:.83rem; color:var(--graphite); line-height:1.6; max-width:44ch; }
.foot-base{
  margin-top:2.2rem; padding-top:1.2rem; border-top:1px solid var(--rule-2);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  font-size:.78rem; color:var(--graphite);
}

.disclaimer{
  font-size:.78rem; line-height:1.6; color:var(--graphite);
  border:1px solid var(--rule-2); border-radius:3px;
  padding:.9rem 1rem; background:var(--plate);
  max-width:78ch;
}


/* ---------- annotated photographs ---------- */

.annot{ position:relative; display:block; line-height:0; }
.annot img{ display:block; width:100%; height:auto; border-radius:2px; background:var(--paper-2); }
.pin{
  position:absolute; left:var(--x); top:var(--y);
  transform:translate(-50%,-50%);
  width:26px; height:26px; padding:0; border-radius:50%;
  display:grid; place-items:center; line-height:1; cursor:pointer;
  font-family:var(--mono); font-size:.66rem; font-weight:500;
  color:#16201A; background:rgba(248,248,242,.94);
  border:1px solid rgba(22,32,26,.3);
  box-shadow:0 1px 6px rgba(0,0,0,.35);
  transition:transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.pin:hover, .pin.on{ background:#16201A; color:#F4F5F1; transform:translate(-50%,-50%) scale(1.14); }
.pin.on{ box-shadow:0 0 0 4px rgba(255,255,255,.5), 0 1px 8px rgba(0,0,0,.45); }

.legend{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.85rem; }
.legend button{
  display:inline-flex; align-items:center; gap:.42rem;
  font-family:var(--mono); font-size:.63rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.34rem .62rem; border-radius:2px; cursor:pointer;
  border:1px solid var(--rule-2); background:var(--plate); color:var(--graphite);
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.legend button .num{ color:var(--accent); }
.legend button:hover{ border-color:var(--accent); color:var(--ink); }
.legend button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.legend button[aria-pressed="true"] .num{ color:var(--accent-2); }

/* ---------- photographic figures ---------- */

.figure{
  margin:0;
  background:var(--plate);
  border:1px solid var(--rule-2);
  border-radius:3px;
  padding:clamp(.7rem,1.6vw,1rem);
  box-shadow:var(--shadow);
}
.figure img{
  display:block; width:100%; height:auto;
  border-radius:2px; background:var(--paper-2);
}
.figure figcaption{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  margin-top:.8rem; padding-top:.7rem;
  border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:.64rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--graphite);
}

.figure.wide{ max-width:900px; }
.figure.poster{ max-width:620px; }

/* ---------- data bars (at a glance) ---------- */

.bars{ display:flex; flex-direction:column; gap:.05rem; max-width:620px; }
.bar{
  display:grid; grid-template-columns:minmax(9rem,1.1fr) 4.6rem minmax(0,1.5fr) 3rem;
  align-items:center; gap:.9rem;
  padding:.62rem 0; border-bottom:1px solid var(--rule);
}
.bar:last-child{ border-bottom:none; }
.bar .lab{ font-size:.9rem; color:var(--ink); }
.bar .amt{ font-family:var(--mono); font-size:.78rem; color:var(--ink-2); text-align:right; font-variant-numeric:tabular-nums; }
.bar .track{ height:6px; border-radius:3px; background:var(--rule); overflow:hidden; }
.bar .fill{ display:block; height:100%; border-radius:3px; background:var(--accent); }
.bar .pct{ font-family:var(--mono); font-size:.72rem; color:var(--graphite); text-align:right; font-variant-numeric:tabular-nums; }
@media (max-width:620px){
  .bar{ grid-template-columns:minmax(0,1fr) 4.4rem; row-gap:.35rem; }
  .bar .track{ grid-column:1 / -1; }
  .bar .pct{ display:none; }
}

/* ---------- flavor notes ---------- */

.notes{ display:grid; gap:.55rem; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.notes div{
  border:1px solid var(--rule-2); border-radius:3px; background:var(--plate);
  padding:.85rem .9rem; display:flex; flex-direction:column; gap:.22rem;
}
.notes .n{ font-family:var(--display); font-size:1.06rem; color:var(--ink); }
.notes .d{ font-size:.79rem; color:var(--graphite); line-height:1.45; }

/* ---------- product entries ---------- */

#products-list{ display:flex; flex-direction:column; gap:1rem; }
.product{
  display:grid;
  grid-template-columns:3.2rem minmax(0,1fr);
  gap:1.1rem;
  background:var(--plate); border:1px solid var(--rule-2); border-radius:3px;
  padding:1.35rem 1.35rem 1.45rem;
  max-width:960px;
}
.product .rank{
  font-family:var(--mono); font-size:1.1rem; color:var(--accent);
  padding-top:.15rem; font-variant-numeric:tabular-nums;
}
.product .body{ display:flex; flex-direction:column; gap:.6rem; min-width:0; }
.product-top{ display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; }
.product-top h3{ flex:1 1 auto; min-width:12ch; }
.product p{ font-size:.915rem; color:var(--ink-2); line-height:1.62; }
.product .check{
  font-size:.85rem; color:var(--graphite);
  border-top:1px dashed var(--rule-2); padding-top:.65rem;
}
.product .check b{ color:var(--ink-2); font-weight:600; }

.chip.full{ color:var(--ev-human); background:var(--ev-human-bg); border-color:color-mix(in srgb, var(--ev-human) 26%, transparent); }
.chip.part{ color:var(--ev-animal); background:var(--ev-animal-bg); border-color:color-mix(in srgb, var(--ev-animal) 26%, transparent); }
.chip.low{ color:var(--ev-lab); background:var(--ev-lab-bg); border-color:color-mix(in srgb, var(--ev-lab) 26%, transparent); }
.chip.care{ color:var(--ev-none); background:var(--ev-none-bg); border-color:color-mix(in srgb, var(--ev-none) 26%, transparent); }

/* ---------- cinematic hero ---------- */

.cinehero{
  position:relative; isolation:isolate;
  min-height:calc(min(86svh, 780px) - 62px);
  display:flex; align-items:flex-end;
  background:#101410;
}
/* the clip lives on the media layer, never on the content — otherwise the
   parallax overflow rule hides the headline and buttons */
.cinehero-media{ position:absolute; inset:0; overflow:hidden; z-index:-2; }
.cinehero-bg{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0;
  object-fit:cover; object-position:center 42%;
  animation:heroZoom 18s ease-out both;
}
@keyframes heroZoom{ from{ transform:scale(1.07); } to{ transform:scale(1); } }
.cinehero-shade{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top, rgba(10,14,10,.93) 0%, rgba(10,14,10,.72) 32%, rgba(10,14,10,.28) 62%, rgba(10,14,10,.45) 100%);
}
.cinehero-in{ padding-block:clamp(2.5rem,7vw,4.5rem); width:100%; }
.cinehero .eyebrow{ color:#B9D191; }
.cinehero h1{
  color:#F6F7F1;
  font-size:clamp(2.7rem, 7.4vw, 6rem);
  line-height:.98; letter-spacing:-.02em;
  max-width:17ch; margin-top:.7rem;
  text-shadow:0 2px 30px rgba(0,0,0,.45);
}
.cinehero h1 em{ font-style:italic; color:#C9DFA4; font-weight:300; }
.cinehero .lede{ color:rgba(246,247,241,.82); margin-top:1.1rem; max-width:52ch; }
.cinehero .hero-actions{ margin-top:1.6rem; }
.cinehero .btn{ background:#F6F7F1; color:#16201A; border-color:#F6F7F1; }
.cinehero .btn:hover{ color:#16201A; }
.cinehero .btn.ghost{ background:transparent; color:#F6F7F1; border-color:rgba(246,247,241,.45); }
.cinehero .btn.ghost:hover{ background:rgba(246,247,241,.12); color:#F6F7F1; }
.cinehero-scroll{
  position:absolute; left:50%; bottom:1.1rem; transform:translateX(-50%);
  font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(246,247,241,.55); display:flex; flex-direction:column; align-items:center; gap:.4rem;
}
.cinehero-scroll::after{
  content:""; width:1px; height:26px;
  background:linear-gradient(to bottom, rgba(246,247,241,.5), transparent);
  animation:scrollHint 2.2s ease-in-out infinite;
}
@keyframes scrollHint{ 0%,100%{ opacity:.25; transform:scaleY(.6); transform-origin:top; } 50%{ opacity:1; transform:scaleY(1); } }
@media (max-width:620px){ .cinehero-scroll{ display:none; } }

/* ---------- dark contrast band ---------- */

.band.dark{
  --paper:#12150F; --paper-2:#181C14; --plate:#1A1E16;
  --ink:#E8ECE0; --ink-2:#C3C9B8; --graphite:#8D9685;
  --rule:#2B3126; --rule-2:#3C4435;
  --accent:#A9C482; --accent-2:#8CA866; --amber:#E8B45C; --accent-wash:#1D2517;
  --ev-human:#7FC49F; --ev-human-bg:#16261E;
  --ev-animal:#D7B45F; --ev-animal-bg:#28210F;
  --ev-lab:#94ABD3;    --ev-lab-bg:#171D2A;
  --ev-trad:#BEA0C6;   --ev-trad-bg:#231A26;
  --ev-none:#D98C82;   --ev-none-bg:#2A1614;
  background:var(--paper); color:var(--ink);
  border-top:none;
}

/* ---------- big numbers ---------- */

.stats{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  background:var(--rule-2); border:1px solid var(--rule-2); border-radius:3px; overflow:hidden;
}
.stats > div{ background:var(--paper); padding:1.5rem 1.35rem 1.6rem; display:flex; flex-direction:column; gap:.4rem; }
.stats .n{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.4rem,5.2vw,3.5rem); line-height:.92;
  color:var(--accent); letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.stats .l{ font-size:.895rem; color:var(--ink); line-height:1.4; }
.stats .s{ font-size:.79rem; color:var(--graphite); line-height:1.45; }

/* ---------- reveals: CSS scroll-driven, never JavaScript ----------
   A previous JS implementation left the homepage blank when a script error
   stopped it un-hiding content. Visibility must not depend on JS running, so
   this uses view() timelines: browsers without support simply show everything. */

@keyframes revealIn{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .band .head, .card, .door, .figure, .finding, .product, .tier,
    .stats > div, .tierkey > div, .callout, .producer, .specimen,
    .tablewrap, .bars, .notes, .names, .refs .ref, .newsitem, .plate,
    ol.steps > li, .prose{
      animation:revealIn linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 16%;
    }
    /* a light stagger for anything sitting in a row */
    .stats > div:nth-child(2), .grid > *:nth-child(2), .tierkey > div:nth-child(2){ animation-range:entry 0% cover 20%; }
    .stats > div:nth-child(3), .grid > *:nth-child(3), .tierkey > div:nth-child(3){ animation-range:entry 0% cover 24%; }
    .stats > div:nth-child(4), .grid > *:nth-child(4), .tierkey > div:nth-child(4){ animation-range:entry 0% cover 28%; }
    .cinehero *{ animation-timeline:auto; }
  }
}

.figure{ transition:transform .3s cubic-bezier(.22,.7,.3,1), box-shadow .3s ease; }
.figure:hover{ transform:translateY(-3px); box-shadow:0 1px 2px rgba(22,32,26,.06), 0 18px 40px -26px rgba(22,32,26,.55); }
.card{ transition:border-color .22s ease, transform .22s ease; }
.card:hover{ border-color:var(--rule-2); transform:translateY(-2px); }
.product{ transition:border-color .22s ease; }
.product:hover{ border-color:var(--accent); }

/* ---------- bolder hero ---------- */

.cinehero{ min-height:calc(100svh - 62px); }
.cinehero-bg{ animation:none; will-change:transform; transform:scale(1.08); }
.cinehero-shade{
  background:
    radial-gradient(120% 90% at 20% 85%, rgba(8,12,8,.90) 0%, rgba(8,12,8,.35) 55%, rgba(8,12,8,.15) 100%),
    linear-gradient(to top, rgba(8,12,8,.95) 0%, rgba(8,12,8,.55) 38%, rgba(8,12,8,.10) 70%, rgba(8,12,8,.55) 100%);
}
.cinehero h1{
  font-size:clamp(2.6rem, 6.6vw, 5.8rem);
  line-height:.98; letter-spacing:-.03em; max-width:16ch;
}
.cinehero h1 em{ color:var(--amber-soft); }

/* line-by-line entrance */
.rise{
  display:block; overflow:hidden;
  /* room for descenders, which the overflow clip would otherwise cut */
  padding-bottom:.14em; margin-bottom:-.14em;
}
/* The resting state is VISIBLE. The hidden state lives only inside the
   keyframes, so if animation never runs the content still shows. */
.rise > span{ display:block; animation:riseUp 1s cubic-bezier(.19,1,.22,1) both; }
@keyframes riseUp{
  from{ transform:translateY(105%) rotate(2deg); opacity:0; }
  to{ transform:none; opacity:1; }
}
.fadeup{ animation:fadeUp .9s cubic-bezier(.19,1,.22,1) both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(20px);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){
  .rise > span, .fadeup{ animation:none; }
}

/* ---------- name marquee ---------- */

.marquee{
  background:#10140F; color:#EFF2E8;
  border-block:1px solid #2A311F;
  overflow:hidden; padding-block:.95rem;
  --mq-duration:38s;
}
.marquee-track{ display:flex; width:max-content; animation:mq var(--mq-duration) linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes mq{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.marquee span{
  font-family:var(--display); font-size:clamp(1.05rem,2.1vw,1.5rem);
  padding-inline:1.5rem; white-space:nowrap; color:#EFF2E8;
}
.marquee span i{ color:var(--amber); font-style:normal; padding-inline:.9rem; }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }

/* ---------- stats, amplified ---------- */

.band.dark .stats{ background:var(--rule-2); border-color:var(--rule-2); }
.stats .n{ color:var(--amber); font-size:clamp(2.9rem,6.4vw,4.6rem); }
.stats > div{ position:relative; transition:background .3s ease; }
.stats > div:hover{ background:var(--paper-2); }

/* ---------- staggered children ---------- */


/* ---------- nav condenses on scroll ---------- */

.topbar{ transition:box-shadow .3s ease, background .3s ease; }
.topbar.stuck{ box-shadow:0 1px 0 var(--rule), 0 10px 30px -22px rgba(0,0,0,.5); }
.topbar.stuck .topbar-in{ min-height:54px; }
.topbar-in{ transition:min-height .3s ease; }

/* accent flourishes */
.eyebrow{ color:var(--accent); }
.band.dark .eyebrow{ color:var(--amber); }
.door:hover .go{ color:var(--amber); }
.door .go{ transition:color .2s ease; }

/* ---------- mobile refinements ----------
   Touch targets and the small mono labels both need help below 760px:
   26px pins and 10px uppercase labels are fine with a mouse, not a thumb. */

@media (max-width:760px){
  /* type: nothing uppercase-mono should render under ~11px on a phone */
  .eyebrow{ font-size:.74rem; }
  .chip{ font-size:.68rem; padding:.3rem .6rem; }
  .plate-cap, .figure figcaption, .photoband figcaption .wrap{ font-size:.7rem; }
  .newsitem .meta{ font-size:.69rem; }
  .specimen dt{ font-size:.68rem; }
  .names .pl{ font-size:.7rem; }
  caption, thead th{ font-size:.68rem; }
  .tier .step, .tier .src, .producer .tag{ font-size:.72rem; }
  details.research summary{ font-size:.71rem; }
  details.research .links .k{ font-size:.67rem; }
  .legend button{ font-size:.69rem; }
  .ref .links{ font-size:.8rem; }
  .door .ord, .product .rank{ font-size:.72rem; }

  /* touch targets: 44px minimum */
  .navtoggle{ min-height:44px; padding-inline:1.1rem; }
  .fbtn, .legend button, .toggle button{ min-height:42px; padding-block:.6rem; }
  details.research summary{ padding-block:.5rem; min-height:40px; }
  .btn{ min-height:46px; }
  .newsitem a{ display:inline-block; padding-block:.15rem; }
}

/* Pins stay visually small but get a 44px thumb area via a transparent halo. */
.pin::after{
  content:""; position:absolute; top:50%; left:50%;
  width:44px; height:44px; transform:translate(-50%,-50%);
  border-radius:50%;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}