@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@700&display=swap");

:root{
    --navy:#10263b; --deep:#0d2033; --ink:#17324d; --ink-soft:#43607a; --muted:#7089a0;
    --line:#dde6ee; --bg:#eef2ee; --panel:#ffffff; --accent:#C0392B;
    --serif:Georgia,"Times New Roman",serif;
    --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  }
  *{box-sizing:border-box}
  body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.55}
  a{color:inherit}
  .wrap{width:min(1080px,92%);margin:0 auto}
  h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:-.02em;margin:0}
  .sci{font-family:var(--serif);font-style:italic;color:var(--muted)}
  .kicker{text-transform:uppercase;letter-spacing:.14em;font-weight:800;font-size:12px;color:var(--accent)}
  .flag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#8a5a12;background:#fdf0d6;border:1px solid #e9cf9b;padding:2px 7px;border-radius:2px}

  header.hd{background:var(--navy);color:#fff;position:sticky;top:0;z-index:20;border-bottom:4px solid var(--accent)}
  .hd-in{display:flex;align-items:center;gap:16px;height:60px}
  .brand{display:flex;align-items:center;gap:10px;font-family:"DM Sans",system-ui,sans-serif;font-size:16px;font-weight:700;line-height:1.1;letter-spacing:normal}
  .brand .logo{width:30px;height:30px;border-radius:7px;background:conic-gradient(from 210deg,#5b9bd5,#c0392b,#2e8b57,#c9a227,#d95c9a,#24486b,#e67e22,#5b9bd5);display:grid;place-items:center;font-size:15px}
  .hd nav{margin-left:auto;display:flex;gap:18px;font-size:14px;color:#cdd9e6}
  .crumbs{background:#fff;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
  .crumbs .wrap{padding:9px 0}
  .crumbs a{color:var(--accent);text-decoration:none;font-weight:600}

  .fhero{padding:34px 0 6px}
  .fhero h1{font-size:clamp(36px,5vw,58px);margin:8px 0 4px}
  .fhero .tag{color:var(--ink-soft);max-width:60ch;font-size:18px;margin:10px 0 0}
  .stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
  .stat{background:var(--panel);border:1px solid var(--line);padding:10px 14px}
  .stat b{display:block;font-family:var(--serif);font-size:20px}
  .stat span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}

  section{padding:26px 0}
  .sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
  .sec-head h2{font-size:26px}
  .sec-sub{color:var(--muted);font-size:14px;margin:2px 0 16px}
  .scale-panel{background:var(--panel);border:1px solid var(--line);padding:22px 0 14px;position:relative}
  .scale-scroll{overflow-x:auto;padding:0 22px 10px}
  .scale-row{display:flex;align-items:flex-end;gap:26px;min-height:200px;border-bottom:2px solid var(--ink)}
  .cat{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;flex:0 0 auto}
  .cat svg{display:block}
  .cat .fill-cat{fill:#33414d}
  .cat.extreme .fill-cat{fill:var(--accent)}
  .cat.human .fill-cat{fill:#9db2c6}
  .cat .lab{margin-top:8px;text-align:center;max-width:120px}
  .cat .lab b{display:block;font-size:12.5px}
  .cat .lab small{color:var(--muted);font-size:11px}
  .scale-note{padding:12px 22px 0;color:var(--muted);font-size:12.5px}
  .scale-hint{position:absolute;top:14px;right:22px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}

  /* chart */
  .chart-panel{background:var(--panel);border:1px solid var(--line);padding:18px}
  #barchart{width:100%;height:540px}
  .chart-legend{display:flex;gap:16px;margin-top:6px;font-size:13px;color:var(--ink-soft)}
  .chart-legend i{display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:middle}
  .fbars{display:flex;flex-direction:column;gap:7px;padding:6px 4px}
  .fbar-row{display:grid;grid-template-columns:130px 1fr 58px;align-items:center;gap:10px;font-size:13px}
  .fbar-lab{text-align:right;color:var(--ink-soft)}
  .fbar-track{background:#eef2f6;height:18px}
  .fbar-fill{display:block;height:100%}
  .fbar-val{color:var(--muted);font-variant-numeric:tabular-nums}
  /* chart gallery */
  .clegend-top{display:flex;gap:16px;font-size:13px;color:var(--ink-soft);margin:-6px 0 14px}
  .clegend-top i{display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:middle}
  .chart-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
  .chart-card{background:var(--panel);border:1px solid var(--line);padding:16px}
  .chart-card h3{font-size:17px}
  .chart-card .cs{color:var(--muted);font-size:12.5px;margin:2px 0 12px}
  .chart-body{overflow-x:auto}
  .chart-body svg{display:block}
  .pie-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
  .clegend{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--ink-soft)}
  .clegend i{display:inline-block;width:11px;height:11px;margin-right:7px;border-radius:2px;vertical-align:middle}
  .clegend b{color:var(--ink)}
  @media(max-width:760px){.chart-grid{grid-template-columns:1fr}}

  .def{background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--accent);padding:24px clamp(20px,3vw,36px)}
  .def h2{font-size:26px;margin-bottom:8px}
  .def p{color:var(--ink-soft);margin:10px 0 0;max-width:70ch}

  table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);font-size:14px}
  th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
  th{background:#f6f8f6;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:800}
  td .nm{font-weight:700}
  td .sci{font-size:13px}
  tr:last-child td{border-bottom:0}
  .chip{display:inline-block;font-size:12px;padding:3px 8px;border:1px solid var(--line);background:#f7fbf7;margin:2px 3px 0 0}
  .anoms{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}
  .anom{background:var(--panel);border:1px solid var(--line);padding:16px}
  .anom b{display:block;font-family:var(--serif);font-size:16px;margin-bottom:4px}
  .anom span{color:var(--ink-soft);font-size:14px}

  /* species/subspecies roster table */
  .roster .band td{background:var(--navy);color:#fff;font-family:var(--serif);font-size:15px;letter-spacing:.01em}
  .roster .sp td{background:#fff}
  .roster .sp .thumb{width:54px}
  .roster .thumb img,.roster .thumb svg{width:48px;height:34px;object-fit:cover;background:#eef2f6;display:block}
  .roster .sub td{background:#fbfdfb;color:var(--ink-soft)}
  .roster .sub td:first-child{padding-left:30px;position:relative}
  .roster .sub td:first-child::before{content:"└";position:absolute;left:14px;color:#c3d0dc}
  .roster .mono td{background:#fbfdfb;color:var(--muted);font-style:italic}
  .iucn{display:inline-block;font-size:11px;font-weight:800;color:#fff;padding:2px 7px;border-radius:2px}
  .i-CR{background:#D81E05}.i-EN{background:#FC7F3F}.i-VU{background:#F9E814;color:#3a2f00}.i-NT{background:#CCE226;color:#33410a}.i-LC{background:#60C659;color:#0f3d1c}.i-DD{background:#D1D1C6;color:#3a3a36}.i-EW{background:#542344}

  .concl{background:linear-gradient(180deg,#fff,#f7f9f7);border:1px solid var(--line);padding:26px clamp(20px,3vw,40px)}
  .concl p{color:var(--ink-soft);max-width:72ch;font-size:16px}
  .refs{background:var(--panel);border:1px solid var(--line)}
  .ref{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:14px}
  .ref:last-child{border-bottom:0}
  .ref .rt{flex:0 0 96px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);padding-top:2px}
  .ref a{font-weight:600;text-decoration:none}
  .ref .meta{color:var(--muted);font-size:12.5px}
  footer.ft{background:var(--deep);color:#a8bacd;margin-top:34px}
  .ft .wrap{padding:26px 0;font-size:13px}
  .ft b{color:#fff}
  @media(max-width:760px){ .anoms{grid-template-columns:1fr} .hd nav{display:none} #barchart{height:640px} }

/* ---------------- species page ---------------- */
.sp-hero{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;padding:26px 0 6px}
.sp-hero-media{position:relative;min-height:300px;overflow:hidden;background:#0a1a29;border:1px solid var(--line)}
.sp-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sp-hero-media .ph{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(135deg,#12304a,#0a1a29)}
.sp-hero-media .ph svg{width:52%;fill:#3b4c5c}
.sp-hero-copy{display:flex;flex-direction:column;justify-content:center}
.sp-hero h1{font-size:clamp(36px,5vw,56px);margin:6px 0 2px}
.sp-pron{color:var(--muted);font-size:14px;margin:4px 0 0}
.sp-badges{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.sp-quote{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--ink);margin:16px 0 0;max-width:46ch}
.qf{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.qf .cell{background:var(--panel);border:1px solid var(--line);padding:9px 12px;min-width:110px}
.qf .cell b{display:block;font-family:var(--serif);font-size:16px}
.qf .cell span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.dyk{background:linear-gradient(180deg,#fff,#f7f9f7);border:1px solid var(--line);border-left:5px solid var(--accent);padding:16px 20px;margin-top:14px}
.dyk b{font-family:var(--serif)}
.two-col{display:grid;grid-template-columns:1.4fr .9fr;gap:22px;align-items:start}
.about p{color:var(--ink-soft);margin:0 0 12px;max-width:70ch}
.mtable{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);font-size:14px}
.mtable td{padding:9px 12px;border-bottom:1px solid var(--line)}
.mtable td:first-child{color:var(--muted);width:44%}
.mtable tr:last-child td{border-bottom:0}
.lineage{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--ink-soft);background:var(--panel);border:1px solid var(--line);padding:12px 14px}
.lineage b{color:var(--ink)}
.lineage .arw{color:#c3d0dc}
.threats{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.threats span{background:#fdecec;border:1px solid #f3c4c4;color:#8a2b2b;font-size:12px;padding:4px 9px}
@media(max-width:820px){.sp-hero,.two-col{grid-template-columns:1fr}}

/* ---- complete species: video, morphs, hybrids, origins, extinct ---- */
.i-EX{background:#000000}
.cat.gone{opacity:.5}
/* grouped / diverging chart legends */
.chart-legend{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:6px;font-size:11.5px;color:#43607a}
.chart-legend span{display:inline-flex;align-items:center;gap:5px}
.chart-legend i{width:12px;height:12px;border-radius:2px;display:inline-block}
.chart-legend i.hatch{opacity:.45}
.roster .thumb .photo{width:48px;height:34px;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#eef2f6;display:block}
.sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:baseline}
.sp-hero-media .photo{width:100%;height:100%;background-size:cover;background-position:center;display:block}
.video-embed{position:relative;width:100%;aspect-ratio:16/9;background:#000;border:1px solid var(--line)}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.morph-grid,.hyb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.morph-card{display:flex;gap:14px;background:var(--panel);border:1px solid var(--line);padding:14px}
.morph-swatch{flex:0 0 100px;height:74px;display:grid;place-items:center;border:1px solid var(--line)}
.morph-swatch svg{width:82%}
.morph-body b{font-family:var(--serif);font-size:16px}
.morph-body p{margin:6px 0 0;color:var(--ink-soft);font-size:14px}
.tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:2px;vertical-align:middle;margin-left:4px}
.tag.captive{background:#fbeae0;color:#9a4a1e;border:1px solid #f0c9ac}
.tag.wild{background:#e6f2ea;color:#1f6b3a;border:1px solid #bfe0cb}
.hyb-card{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--accent);padding:14px}
.hyb-head b{font-family:var(--serif);font-size:17px}
.hyb-card .cross{color:var(--muted);font-size:13px;margin:4px 0}
.hyb-card p{margin:6px 0 0;color:var(--ink-soft);font-size:14px}
.timeline{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.tl-item{display:grid;grid-template-columns:160px 1fr;gap:12px;padding-top:10px;border-top:1px solid var(--line)}
.tl-when{color:var(--accent);font-weight:700;font-size:13px}
tr.ex td{color:var(--muted)}
@media(max-width:760px){.morph-grid,.hyb-grid{grid-template-columns:1fr}.tl-item{grid-template-columns:1fr}}

/* ---- coherence pass: banner, section nav, siblings, markers ---- */
.review-banner{margin:16px 0 4px;padding:10px 14px;border:1px solid var(--line);border-left:3px solid var(--accent);
  background:var(--panel);border-radius:4px;font-size:13px;color:var(--ink-soft)}
.review-banner b{color:var(--ink)}
.est{color:var(--accent);font-weight:700;cursor:help}
.secnav{position:sticky;top:52px;z-index:15;display:flex;gap:2px;overflow-x:auto;margin:14px 0 2px;
  padding:7px 2px;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.secnav::-webkit-scrollbar{display:none}
.secnav a{flex:0 0 auto;font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:none;
  padding:5px 11px;border-radius:999px;white-space:nowrap}
.secnav a:hover{color:var(--accent);background:#eef3f8}
.band .bandsw{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:8px;vertical-align:-1px}
/* sibling / cross-link strip */
.siblings .sib-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.sib-card{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);text-decoration:none;color:inherit;transition:border-color .12s,transform .12s}
.sib-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.sib-photo{display:block;width:100%;aspect-ratio:16/10;border-radius:5px;overflow:hidden;background:#eef2f6;
  background-size:cover;background-position:center}
.sib-photo svg{width:70%;height:100%;margin:0 auto;display:block}
.sib-nm{font-family:var(--serif);font-weight:700;font-size:15px;color:var(--ink)}
.sib-sci{font-style:italic;color:var(--muted);font-size:12px}
@media(prefers-color-scheme:dark){.secnav{background:rgba(20,26,33,.92)}}