/* ============================================================================
   Finsjöbrännan post-fire beetles — site styles
   Fire / ember palette on charcoal & ash. Light + dark, WCAG-conscious.
   Colour is never the sole carrier of meaning (badges carry text labels).
   ========================================================================== */

:root{
  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  /* ember ramp */
  --e-50:#fff3ea; --e-100:#ffe2cc; --e-200:#ffc599; --e-300:#ffa15c;
  --e-400:#ff7d2e; --e-500:#f2600f; --e-600:#cf4a0a; --e-700:#a1370b;
  --e-800:#6d260c; --e-900:#3f1608;
  --flame:#ff5a1f; --char:#1b1512;

  /* light theme (default via tokens; overridden below for dark) */
  --page:#fbf8f5; --surface:#ffffff; --surface-2:#f4efe9; --surface-3:#ece4db;
  --ink:#1c1815; --ink-2:#4a423b; --muted:#726a60;
  --rule:#e7ded4; --rule-strong:#d4c8ba;
  --link:#b6470a; --accent:#e05c12; --accent-ink:#fff;
  --bar:#e05c12; --bar-2:#f0a35e; --grid:#ece4db;

  /* red-list category colours (text labels always present) */
  --lc:#7b8a6f; --dd:#8a8079; --nt:#e0a72e; --vu:#e8712e; --en:#d63e2a; --re:#7a1f1a; --cr:#a11d1a;
  --new:#2f8f6b;

  --shadow:0 1px 2px rgba(30,20,10,.06), 0 6px 22px rgba(30,20,10,.06);
  --shadow-lg:0 2px 6px rgba(30,20,10,.08), 0 18px 50px rgba(30,20,10,.12);
  --r:12px; --r-sm:8px; --maxw:1200px;
}

@media (prefers-color-scheme: dark){ :root{ --auto-dark:1 } }

:root[data-theme="dark"], :root.force-dark{
  --page:#100c0a; --surface:#191411; --surface-2:#211914; --surface-3:#2c211a;
  --ink:#f6efe7; --ink-2:#d7cabb; --muted:#a99a89;
  --rule:#2c2119; --rule-strong:#413024;
  --link:#ff9a52; --accent:#ff6a24; --accent-ink:#1a0d05;
  --bar:#ff7a34; --bar-2:#8a4416; --grid:#271d16;
  --lc:#93a086; --dd:#a49a91; --nt:#f0bb47; --vu:#ff8a4a; --en:#ff5e46; --re:#e0685c; --cr:#ff6a5a;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.45);
  --shadow-lg:0 2px 8px rgba(0,0,0,.55), 0 26px 70px rgba(0,0,0,.6);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --page:#100c0a; --surface:#191411; --surface-2:#211914; --surface-3:#2c211a;
    --ink:#f6efe7; --ink-2:#d7cabb; --muted:#a99a89;
    --rule:#2c2119; --rule-strong:#413024;
    --link:#ff9a52; --accent:#ff6a24; --accent-ink:#1a0d05;
    --bar:#ff7a34; --bar-2:#8a4416; --grid:#271d16;
    --lc:#93a086; --dd:#a49a91; --nt:#f0bb47; --vu:#ff8a4a; --en:#ff5e46; --re:#e0685c; --cr:#ff6a5a;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.45);
    --shadow-lg:0 2px 8px rgba(0,0,0,.55), 0 26px 70px rgba(0,0,0,.6);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:70px}
body{margin:0; font-family:var(--font); font-size:16px; line-height:1.62;
  color:var(--ink); background:var(--page); -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
img{max-width:100%; height:auto; display:block}
a{color:var(--link); text-decoration-thickness:1px; text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
h1,h2,h3,h4{line-height:1.18; margin:0 0 .5em; font-weight:650; letter-spacing:-.015em}
h1,h2,h3{font-family:var(--display); font-weight:600}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem); margin-top:0}
h3{font-size:clamp(1.2rem,2.3vw,1.5rem)}
h4{font-size:1rem; font-weight:650; font-family:var(--font)}
p{margin:0 0 1em}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(16px,4vw,34px)}
.narrow{max-width:900px}
.sci{font-style:italic}
.i{font-style:italic}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute; left:-9999px; top:0; z-index:200}
.skip:focus{left:8px; top:8px; width:auto; height:auto; clip:auto; padding:10px 14px;
  background:var(--surface); color:var(--link); border:2px solid var(--accent); border-radius:8px; font-weight:600}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ---------- top bar ---------- */
.top{position:sticky; top:0; z-index:1000;
  background:color-mix(in srgb, var(--page) 86%, transparent); backdrop-filter:blur(12px) saturate(1.3);
  border-bottom:1px solid var(--rule)}
.top .wrap{display:flex; align-items:center; gap:14px; min-height:58px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:9px; font-weight:700; font-size:.98rem;
  letter-spacing:-.01em; margin-right:auto; text-decoration:none; color:var(--ink)}
.brand .mark{width:26px; height:26px; flex:none}
.brand span{color:var(--muted); font-weight:500}
.top nav{display:flex; gap:1px; flex-wrap:wrap}
.top nav a{font-size:.84rem; color:var(--ink-2); text-decoration:none; padding:7px 10px;
  border-radius:7px; white-space:nowrap; font-weight:500}
.top nav a:hover{background:var(--surface-2); color:var(--ink)}
.top nav a[aria-current="page"]{color:var(--accent)}
.tbtn{font:inherit; font-size:.82rem; cursor:pointer; color:var(--ink-2); display:inline-flex;
  align-items:center; gap:6px; background:var(--surface); border:1px solid var(--rule);
  border-radius:8px; padding:7px 11px; min-height:36px}
.tbtn:hover{border-color:var(--rule-strong); color:var(--ink)}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--rule);
  background:
    radial-gradient(120% 90% at 82% -10%, color-mix(in srgb,var(--flame) 34%, transparent) 0%, transparent 55%),
    radial-gradient(90% 70% at 10% 0%, color-mix(in srgb,var(--e-600) 26%, transparent) 0%, transparent 50%),
    linear-gradient(180deg, color-mix(in srgb,var(--e-800) 30%, var(--page)) 0%, var(--page) 78%)}
:root[data-theme="light"] .hero{background:
    radial-gradient(120% 90% at 82% -10%, color-mix(in srgb,var(--e-300) 55%, transparent) 0%, transparent 55%),
    radial-gradient(90% 70% at 8% -5%, color-mix(in srgb,var(--e-100) 80%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, color-mix(in srgb,var(--e-100) 60%, var(--page)) 0%, var(--page) 72%)}
.hero .wrap{position:relative; z-index:2; padding-top:clamp(34px,6vw,72px); padding-bottom:clamp(30px,5vw,56px)}
.hero-grid{display:grid; grid-template-columns:1.25fr .85fr; gap:clamp(22px,4vw,50px); align-items:center}
.kicker{display:inline-flex; align-items:center; gap:8px; font-size:.74rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0 0 16px}
.kicker::before{content:""; width:22px; height:2px; background:var(--accent); display:inline-block}
.hero h1{font-size:clamp(2rem,5vw,3.5rem); margin-bottom:.32em; letter-spacing:-.025em; line-height:1.04}
.hero .lede{font-size:clamp(1.03rem,1.8vw,1.24rem); color:var(--ink-2); max-width:52ch; margin-bottom:1.3em}
.byline{font-size:.87rem; color:var(--muted); line-height:1.7}
.byline b{color:var(--ink-2); font-weight:600}
.byline a{color:var(--link)}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px}
.btn{display:inline-flex; align-items:center; gap:8px; font:inherit; font-weight:600; font-size:.92rem;
  padding:11px 18px; border-radius:10px; text-decoration:none; cursor:pointer; border:1px solid transparent}
.btn-primary{background:var(--accent); color:var(--accent-ink); box-shadow:var(--shadow)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--rule-strong)}
.btn-ghost:hover{background:var(--surface-2)}
.hero figure{margin:0; position:relative}
.hero figure img{border-radius:var(--r); box-shadow:var(--shadow-lg); background:var(--surface-2); width:100%}
.hero figcaption{font-size:.76rem; color:var(--muted); margin-top:9px; line-height:1.5}
@media (max-width:860px){ .hero-grid{grid-template-columns:1fr} .hero figure{order:-1} }

/* ember sparks (decorative) */
.embers{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden}
.embers i{position:absolute; bottom:-10px; width:4px; height:4px; border-radius:50%;
  background:var(--flame); opacity:0; filter:blur(.3px);
  box-shadow:0 0 8px 1px color-mix(in srgb,var(--flame) 70%, transparent);
  animation:rise linear infinite}
@keyframes rise{
  0%{transform:translateY(0) translateX(0) scale(1); opacity:0}
  12%{opacity:.9} 70%{opacity:.55}
  100%{transform:translateY(-88vh) translateX(24px) scale(.4); opacity:0}}
@media (prefers-reduced-motion: reduce){ .embers{display:none} }

/* ---------- sections ---------- */
section{padding:clamp(42px,6vw,78px) 0; border-bottom:1px solid var(--rule)}
.shead{margin-bottom:30px; max-width:74ch}
.eyebrow{font-size:.73rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin:0 0 10px}
.shead p{color:var(--ink-2); margin:0; font-size:1.03rem}

/* ---------- stat tiles ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:13px}
.stat{background:var(--surface); border:1px solid var(--rule); border-radius:var(--r); padding:18px 20px;
  position:relative; overflow:hidden}
.stat .v{font-size:clamp(1.7rem,3.6vw,2.35rem); font-weight:700; line-height:1.02;
  font-variant-numeric:tabular-nums; letter-spacing:-.03em; font-family:var(--display)}
.stat .k{font-size:.79rem; color:var(--muted); margin-top:7px; line-height:1.45}
.stat.hl{background:linear-gradient(160deg, color-mix(in srgb,var(--accent) 16%, var(--surface)), var(--surface));
  border-color:color-mix(in srgb,var(--accent) 40%, var(--rule))}
.stat.hl .v{color:var(--accent)}
.stat .spark{position:absolute; right:-6px; top:-6px; font-size:2.6rem; opacity:.08}

/* ---------- callouts ---------- */
.note{border:1px solid var(--rule); border-left:3px solid var(--accent); background:var(--surface);
  border-radius:var(--r-sm); padding:15px 19px; margin:22px 0; font-size:.95rem}
.note.warn{border-left-color:var(--vu)} .note.flag{border-left-color:var(--nt)}
.note h4{margin:0 0 .35em}
.note p:last-child{margin-bottom:0}

/* ---------- method cards ---------- */
.methods-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:18px}
.method{background:var(--surface); border:1px solid var(--rule); border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--shadow)}
.method .ph{aspect-ratio:16/11; overflow:hidden; background:var(--surface-3); position:relative}
.method .ph img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.method:hover .ph img{transform:scale(1.05)}
.method .ph .code{position:absolute; top:10px; left:10px; font-size:.68rem; font-weight:700;
  letter-spacing:.06em; padding:3px 8px; border-radius:6px; background:rgba(10,7,5,.72); color:#fff;
  backdrop-filter:blur(4px)}
.method .mbody{padding:15px 17px 18px}
.method h3{font-size:1.12rem; margin:0 0 3px}
.method .kind{font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:9px}
.method p{font-size:.88rem; color:var(--ink-2); margin:0 0 12px}
.method dl{display:grid; grid-template-columns:auto 1fr; gap:3px 10px; margin:0; font-size:.82rem}
.method dt{color:var(--muted)} .method dd{margin:0; color:var(--ink); font-variant-numeric:tabular-nums; font-weight:600}

/* ---------- filters ---------- */
.toolbar{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px}
.fgroup{display:flex; flex-direction:column; gap:4px}
.fgroup label{font-size:.74rem; color:var(--muted); font-weight:600; letter-spacing:.02em}
input[type=search], select{font:inherit; font-size:.9rem; color:var(--ink); background:var(--surface);
  border:1px solid var(--rule-strong); border-radius:9px; padding:9px 12px; min-height:40px}
input[type=search]{min-width:250px}
input[type=search]::placeholder{color:var(--muted)}
.chips{display:flex; gap:7px; flex-wrap:wrap; margin:2px 0}
.chip{font:inherit; font-size:.79rem; cursor:pointer; background:var(--surface); color:var(--ink-2);
  border:1px solid var(--rule-strong); border-radius:999px; padding:6px 13px; font-weight:500;
  display:inline-flex; align-items:center; gap:6px}
.chip:hover{border-color:var(--accent); color:var(--ink)}
.chip[aria-pressed=true]{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600}
.chip .dot{width:8px;height:8px;border-radius:50%}
.count{font-size:.85rem; color:var(--muted); margin:14px 0}
.count b{color:var(--ink); font-variant-numeric:tabular-nums; font-weight:700}

/* ---------- species gallery ---------- */
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:14px}
.spcard{position:relative; background:var(--surface); border:1px solid var(--rule); border-radius:var(--r);
  overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s}
.spcard:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--rule-strong)}
.spcard .thumb{aspect-ratio:1/1; background:var(--surface-3); overflow:hidden; position:relative}
.spcard .thumb img{width:100%; height:100%; object-fit:cover}
.spcard .ph-fallback{width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg,var(--surface-2),var(--surface-3)); color:var(--muted)}
.spcard .ph-fallback svg{width:46%; height:46%; opacity:.5}
.spcard .rl{position:absolute; top:8px; right:8px}
.spcard .sc-body{padding:11px 12px 13px}
.spcard .sc-sci{font-style:italic; font-weight:600; font-size:.92rem; line-height:1.22; color:var(--ink)}
.spcard .sc-sv{font-size:.76rem; color:var(--muted); margin-top:2px}
.spcard .sc-meta{display:flex; gap:8px; align-items:center; margin-top:8px; font-size:.72rem; color:var(--muted)}
.spcard .sc-fam{color:var(--accent); font-weight:600}
.spcard.is-paper{border-style:dashed}

/* ---------- red-list & tags ---------- */
.b{display:inline-flex; align-items:center; font-size:.67rem; font-weight:700; letter-spacing:.03em;
  padding:2px 7px; border-radius:5px; white-space:nowrap; line-height:1.5}
.b-lc{background:color-mix(in srgb,var(--lc) 20%,transparent); color:var(--ink-2); border:1px solid color-mix(in srgb,var(--lc) 45%,transparent)}
.b-dd{background:color-mix(in srgb,var(--dd) 18%,transparent); color:var(--ink-2); border:1px solid color-mix(in srgb,var(--dd) 40%,transparent)}
.b-nt{background:var(--nt); color:#241a05}
.b-vu{background:var(--vu); color:#241004}
.b-en{background:var(--en); color:#fff}
.b-re,.b-cr{background:var(--re); color:#fff}
.b-new{background:color-mix(in srgb,var(--new) 20%,transparent); color:var(--new); border:1px solid color-mix(in srgb,var(--new) 50%,transparent)}
.b-paper{background:transparent; color:var(--muted); border:1px dashed var(--rule-strong)}
.b-lg{font-size:.8rem; padding:4px 11px; border-radius:7px}

/* ---------- charts ---------- */
.charts{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:20px}
.card{background:var(--surface); border:1px solid var(--rule); border-radius:var(--r); padding:20px; box-shadow:var(--shadow)}
.card.wide{grid-column:1/-1}
.card h3{font-size:1.08rem; margin:0 0 3px; font-family:var(--font); font-weight:650}
.card .csub{font-size:.8rem; color:var(--muted); margin:0 0 16px; max-width:60ch}
.card svg{display:block; max-width:100%; height:auto; overflow:visible}
.bar{fill:var(--bar)} .bar.soft{fill:var(--bar-2)}
.bar:hover{fill:var(--accent)}
.blab{font-size:11.5px; fill:var(--ink-2)} .blab.sci{font-style:italic}
.bval{font-size:11px; fill:var(--ink-2); font-weight:600; font-variant-numeric:tabular-nums}
.gl{stroke:var(--grid); stroke-width:1} .axl{font-size:10.5px; fill:var(--muted)}
.rl-legend,.mlegend{display:flex; gap:14px; flex-wrap:wrap; font-size:.8rem; color:var(--ink-2); margin-top:14px; align-items:center}
.mlegend i,.rl-legend i{display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:6px; vertical-align:-1px}

/* sorensen matrix */
table.mat{font-size:.84rem; border-collapse:collapse; width:auto}
table.mat th,table.mat td{padding:8px 12px; text-align:center; border:1px solid var(--rule)}
table.mat th[scope=row]{text-align:right; font-weight:600; color:var(--ink-2); background:var(--surface-2); font-style:italic}
table.mat thead th{background:var(--surface-2); font-style:italic; font-weight:600}
td.mc{font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink);
  background:color-mix(in srgb, var(--accent) calc(var(--t) * 55%), var(--surface))}
td.diag{background:var(--surface-3); color:var(--muted)}

/* venn */
.venn text{font-size:12px; fill:var(--ink)}
.venn .vn{font-weight:700; font-variant-numeric:tabular-nums}
.venn .vlab{font-size:11px; fill:var(--ink-2); font-weight:600}

/* ---------- tables ---------- */
.tscroll{overflow-x:auto; border:1px solid var(--rule); border-radius:var(--r); background:var(--surface)}
table.data{border-collapse:collapse; width:100%; font-size:.87rem}
table.data thead th{position:sticky; top:0; z-index:2; background:var(--surface-2); text-align:left;
  font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted);
  padding:11px 13px; border-bottom:1px solid var(--rule-strong); white-space:nowrap}
table.data th.sortable{cursor:pointer; user-select:none}
table.data th.sortable:hover{color:var(--ink)}
table.data th .arr{opacity:.35}
table.data th[aria-sort] .arr{opacity:1; color:var(--accent)}
table.data tbody td{padding:10px 13px; border-bottom:1px solid var(--rule); vertical-align:top}
table.data tbody tr:last-child td{border-bottom:0}
table.data tbody tr:hover{background:color-mix(in srgb,var(--accent) 7%, transparent)}
td.c{text-align:center} th.c{text-align:center}
.nowrap{white-space:nowrap} .muted{color:var(--muted)}

/* ============================================================================
   SPECIES PAGE
   ========================================================================== */
.sp-hero{border-bottom:1px solid var(--rule); background:
  linear-gradient(180deg, color-mix(in srgb,var(--e-800) 22%, var(--page)), var(--page))}
:root[data-theme="light"] .sp-hero{background:linear-gradient(180deg, color-mix(in srgb,var(--e-100) 55%, var(--page)), var(--page))}
.sp-hero .wrap{padding:clamp(22px,4vw,40px) clamp(16px,4vw,34px)}
.crumbs{font-size:.82rem; color:var(--muted); margin-bottom:16px}
.crumbs a{color:var(--link); text-decoration:none} .crumbs a:hover{text-decoration:underline}
.sp-head{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(20px,4vw,40px); align-items:start}
.sp-title .rank{font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); font-weight:700; margin-bottom:8px}
.sp-title h1{font-size:clamp(1.9rem,4.4vw,3rem); font-style:italic; margin:0 0 6px; letter-spacing:-.02em}
.sp-title .auth{font-style:normal; color:var(--muted); font-size:.6em; font-weight:400}
.sp-title .sv{font-size:1.05rem; color:var(--ink-2); margin-bottom:14px}
.sp-badges{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px}
.sp-lead{margin:0}
.sp-lead figure{margin:0; background:var(--surface); border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow)}
.sp-lead img{width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--surface-3)}
.sp-lead figcaption{font-size:.74rem; color:var(--muted); padding:9px 12px; border-top:1px solid var(--rule)}
.sp-lead .ph-fallback{aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg,var(--surface-2),var(--surface-3))}
.sp-lead .ph-fallback svg{width:38%; opacity:.5}

.sp-body{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:clamp(22px,4vw,40px); align-items:start;
  padding:clamp(30px,5vw,54px) 0}
@media (max-width:900px){ .sp-head{grid-template-columns:1fr} .sp-lead{order:-1; max-width:420px}
  .sp-body{grid-template-columns:1fr} }
.sp-main > * + *{margin-top:34px}
.sp-block h2{font-size:1.4rem; margin:0 0 4px}
.sp-block .bsub{font-size:.85rem; color:var(--muted); margin:0 0 16px}

/* map */
.mapbox{height:420px; border-radius:var(--r); overflow:hidden; border:1px solid var(--rule);
  background:var(--surface-2); position:relative; z-index:0}
.map-tools{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; align-items:center; font-size:.82rem; color:var(--muted)}
.map-legend{display:flex; gap:14px; flex-wrap:wrap; font-size:.79rem; color:var(--ink-2)}
.map-legend i{width:11px;height:11px;border-radius:50%;display:inline-block;margin-right:5px;vertical-align:-1px}
.leaflet-container{font:inherit; background:var(--surface-2)}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-lg)}
.leaflet-bar a{background:var(--surface); color:var(--ink); border-color:var(--rule)}
.leaflet-bar a:hover{background:var(--surface-2)}

/* live inat gallery */
.inat{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; min-height:60px}
.inat a{border-radius:var(--r-sm); overflow:hidden; aspect-ratio:1/1; background:var(--surface-3); display:block; position:relative}
.inat img{width:100%; height:100%; object-fit:cover; transition:transform .3s}
.inat a:hover img{transform:scale(1.06)}
.inat .attr{position:absolute; left:0; right:0; bottom:0; font-size:.6rem; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.75));
  padding:12px 6px 4px; opacity:0; transition:opacity .2s}
.inat a:hover .attr{opacity:1}
.loading{color:var(--muted); font-size:.86rem; display:flex; align-items:center; gap:9px}
.spin{width:15px;height:15px;border:2px solid var(--rule-strong); border-top-color:var(--accent); border-radius:50%; animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.api-empty{color:var(--muted); font-size:.86rem; font-style:italic}

/* sidebar */
.sp-side{position:sticky; top:74px; display:flex; flex-direction:column; gap:16px}
.panel{background:var(--surface); border:1px solid var(--rule); border-radius:var(--r); padding:16px 18px; box-shadow:var(--shadow)}
.panel h3{font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:0 0 12px; font-family:var(--font); font-weight:700}
.taxo{display:grid; grid-template-columns:auto 1fr; gap:7px 12px; margin:0; font-size:.86rem}
.taxo dt{color:var(--muted)} .taxo dd{margin:0; color:var(--ink)}
.taxo dd a{color:var(--link); text-decoration:none} .taxo dd a:hover{text-decoration:underline}
.linkrow{display:flex; flex-direction:column; gap:8px}
.extlink{display:flex; align-items:center; gap:11px; padding:10px 12px; border:1px solid var(--rule);
  border-radius:var(--r-sm); text-decoration:none; color:var(--ink); background:var(--surface-2); font-size:.88rem; font-weight:500}
.extlink:hover{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--surface-2))}
.extlink .ic{width:26px; height:26px; flex:none; border-radius:6px; display:flex; align-items:center; justify-content:center;
  font-size:.66rem; font-weight:800; color:#fff; letter-spacing:-.02em}
.extlink .go{margin-left:auto; color:var(--muted)}
.ic-gbif{background:#4a9d4a} .ic-col{background:#155fa0} .ic-inat{background:#74ac00} .ic-art{background:#cf4520}
.ic-bold{background:#5a3ea1} .ic-wiki{background:#3a3a3a} .ic-ap{background:#2b7a4b}
.metric{display:flex; align-items:baseline; gap:8px; margin-bottom:6px}
.metric b{font-size:1.5rem; font-weight:700; font-variant-numeric:tabular-nums; font-family:var(--display)}
.metric span{font-size:.78rem; color:var(--muted)}

/* method pills on species page */
.mpills{display:flex; gap:7px; flex-wrap:wrap}
.mpill{font-size:.76rem; padding:5px 11px; border-radius:999px; border:1px solid var(--rule-strong);
  background:var(--surface-2); color:var(--ink-2); font-weight:500}
.mpill b{color:var(--ink); font-variant-numeric:tabular-nums}
.mpill.on{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,var(--surface)); color:var(--ink)}

/* prev/next */
.sp-nav{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-top:10px}
.sp-nav a{display:flex; flex-direction:column; gap:2px; padding:12px 16px; border:1px solid var(--rule);
  border-radius:var(--r); text-decoration:none; color:var(--ink); background:var(--surface); max-width:46%; font-size:.9rem}
.sp-nav a:hover{border-color:var(--accent)}
.sp-nav .lbl{font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.sp-nav .nm{font-style:italic; font-weight:600}

/* ---------- lightbox ---------- */
dialog.lb{border:0; padding:0; background:transparent; max-width:min(96vw,1300px); max-height:94vh}
dialog.lb::backdrop{background:rgba(8,5,3,.92)}
dialog.lb img{max-height:80vh; width:auto; max-width:100%; margin:0 auto; border-radius:10px; background:#120d0a}
.lbbar{display:flex; align-items:center; gap:12px; color:#efe7dd; font-size:.82rem; padding:12px 4px 0}
.lbbar a{color:var(--e-200)}
.lbbar button{font:inherit; cursor:pointer; background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.24); border-radius:8px; padding:7px 13px}
.lbbar .sp{margin-left:auto}

/* ---------- footer ---------- */
footer{padding:48px 0 64px; font-size:.85rem; color:var(--muted); background:var(--surface)}
footer h4{color:var(--ink-2); font-size:.76rem; letter-spacing:.07em; text-transform:uppercase; margin:0 0 10px; font-family:var(--font)}
.fgrid{display:grid; grid-template-columns:2fr repeat(3,1fr); gap:30px; margin-bottom:30px}
@media (max-width:760px){ .fgrid{grid-template-columns:1fr 1fr} }
footer ul{margin:0; padding:0; list-style:none} footer li{margin-bottom:7px}
footer a{color:var(--ink-2); text-decoration:none} footer a:hover{color:var(--accent)}
.cite{font-size:.82rem; line-height:1.7; color:var(--ink-2); background:var(--surface-2);
  border:1px solid var(--rule); border-left:3px solid var(--accent); border-radius:var(--r-sm); padding:14px 18px}
.foot-bottom{border-top:1px solid var(--rule); padding-top:20px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.8rem}

@media print{
  .top,.toolbar,.chips,.tbtn,.hero-cta,dialog.lb,.embers,.sp-nav{display:none!important}
  body{background:#fff; color:#000} section{border-color:#ccc; page-break-inside:avoid}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important; animation:none!important; scroll-behavior:auto!important}}