/* Flora & Fauna of Suriname — section stylesheet (flora_fauna_pages.py).
   Self-contained: the section does not use the site-wide Tailwind build. */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 600;font-display:swap;src:url(/fonts/newsreader-latin-var.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 600;font-display:swap;src:url(/fonts/newsreader-latin-var-italic.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/instrument-latin-var.woff2) format('woff2')}
:root{--forest:#1B4332;--forest2:#2D6A4F;--leaf:#52B788;--mint:#E1F0DD;--coral:#E76F51;--gold:#E7AE4D;--clay:#9C5822;
--paper:#FBF5E9;--card:#FFFDF6;--ink:#233028;--ink-soft:#5C6657;--line:#EBE0CB;--r:14px;--sh:0 1px 2px rgba(35,48,40,.06),0 6px 18px rgba(35,48,40,.06)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:120px}
body.ff{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,'PingFang SC','Microsoft YaHei',sans-serif;overflow-x:hidden}
html[lang^="zh"] body.ff{line-height:1.75}
a{color:var(--forest2)}
img{max-width:100%;display:block}
.serif{font-family:'Newsreader',Georgia,'Songti SC','SimSun',serif}
.ff-wrap{max-width:1200px;margin:0 auto;padding:0 16px}
.ff-skip{position:absolute;left:-9999px;top:0}
.ff-skip:focus{left:8px;top:8px;z-index:100;background:#fff;padding:8px 12px;border-radius:8px}
[hidden]{display:none!important}

/* ── header ─────────────────────────────────────────── */
.ff-top{position:sticky;top:0;z-index:50;background:rgba(251,245,233,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(123,103,61,.14)}
.ff-top-in{display:flex;align-items:center;gap:10px;height:56px;position:relative}
.ff-logo{display:flex;align-items:baseline;text-decoration:none;flex-shrink:0}
.ff-l1,.ff-l2{font-size:22px;font-weight:700;letter-spacing:-.01em}
.ff-l1{color:var(--forest)}.ff-l2{color:var(--coral)}
.ff-sec{font-weight:600;font-size:14px;color:var(--ink-soft);text-decoration:none;padding:4px 10px;border-left:1px solid var(--line);margin-left:2px;white-space:nowrap}
.ff-sec:hover{color:var(--forest)}
.ff-sbtn{margin-left:auto;display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;color:var(--ink-soft);border-radius:999px;padding:7px 14px;font:inherit;font-size:14px;cursor:pointer;min-width:0}
.ff-sbtn:hover{border-color:var(--leaf);color:var(--forest)}
.ff-langs{position:relative}
.ff-lbtn,.ff-mbtn{display:flex;align-items:center;gap:5px;background:none;border:0;color:var(--ink-soft);font:inherit;font-size:13px;font-weight:600;padding:7px 8px;border-radius:8px;cursor:pointer}
.ff-lbtn:hover,.ff-mbtn:hover{background:rgba(27,67,50,.06);color:var(--forest)}
.ff-lcur::after{content:"EN"}
html[lang="nl"] .ff-lcur::after{content:"NL"}html[lang="es"] .ff-lcur::after{content:"ES"}html[lang^="zh"] .ff-lcur::after{content:"中文"}
.ff-lmenu,.ff-mmenu{display:none;position:absolute;right:0;top:100%;margin-top:6px;background:#fff;border:1px solid #eee;border-radius:12px;box-shadow:0 10px 30px rgba(20,42,30,.14);padding:6px;z-index:60;min-width:120px}
.ff-mmenu{right:16px;min-width:220px}
.ff-lmenu.open,.ff-mmenu.open{display:block}
.ff-lmenu a,.ff-mmenu a{display:block;padding:8px 12px;border-radius:8px;font-size:14px;font-weight:600;color:#374151;text-decoration:none}
.ff-lmenu a:hover,.ff-mmenu a:hover{background:#eef4ee;color:var(--forest)}
html[lang="en"] .ff-lang-en,html[lang="nl"] .ff-lang-nl,html[lang="es"] .ff-lang-es,html[lang^="zh"] .ff-lang-zh{color:var(--forest);background:#eef4ee}
.ff-chips{border-top:1px solid rgba(123,103,61,.08)}
.ff-chips-in{display:flex;gap:6px;padding-top:8px;padding-bottom:8px;overflow-x:auto;scrollbar-width:none}
.ff-chips-in::-webkit-scrollbar{display:none}
.ff-cbox{position:relative;max-width:1200px;margin:0 auto}
.ff-chips-in.drag{cursor:grabbing;-webkit-user-select:none;user-select:none}
.ff-carr{position:absolute;top:0;bottom:0;z-index:2;width:60px;display:flex;align-items:center;border:0;padding:0 8px;margin:0;cursor:pointer;color:var(--forest);background:none}
.ff-carr.l{left:0;justify-content:flex-start;background:linear-gradient(90deg,#FBF5E9 40%,rgba(251,245,233,0))}
.ff-carr.r{right:0;justify-content:flex-end;background:linear-gradient(270deg,#FBF5E9 40%,rgba(251,245,233,0))}
.ff-carr span{width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:var(--sh);display:flex;align-items:center;justify-content:center}
.ff-carr:hover span{border-color:var(--leaf)}
@media (hover:none){.ff-carr{width:36px;pointer-events:none}.ff-carr span{display:none}}
.ff-chip{flex-shrink:0;font-size:13px;font-weight:600;color:var(--ink-soft);text-decoration:none;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);white-space:nowrap}
.ff-chip:hover{border-color:var(--leaf);color:var(--forest)}
.ff-chip.on{background:var(--forest);border-color:var(--forest);color:#fff}
.ff-chip-c{border-style:dashed}
@media (max-width:640px){
  .ff-sec{display:none}
  .ff-sbtn{padding:8px;border-radius:50%}
  .ff-sbtn-t{display:none}
  .ff-l1,.ff-l2{font-size:20px}
}

/* ── type & layout ──────────────────────────────────── */
.ff-main{padding-top:18px;padding-bottom:56px}
.ff-narrow{max-width:820px}
.ff-h1{font-size:clamp(30px,5.2vw,48px);line-height:1.08;font-weight:600;color:var(--forest);margin:4px 0 8px;letter-spacing:-.015em}
.ff-h2{font-size:clamp(22px,3vw,28px);line-height:1.2;color:var(--forest);font-weight:600;margin:0 0 12px}
.ff-h3{font-size:15px;font-weight:700;color:var(--ink);margin:18px 0 8px;text-transform:none}
.ff-kick{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--coral);margin:0}
.ff-kick a{color:inherit;text-decoration:none}
.ff-lead{font-size:clamp(16px,2vw,19px);color:var(--ink-soft);max-width:720px;margin:0 0 10px}
.ff-sub{color:var(--ink-soft);margin:-6px 0 14px;font-size:14px}
.ff-note{color:var(--ink-soft);font-size:13px;margin:8px 0 0}
.ff-count{color:var(--ink-soft);font-size:14px;margin:6px 0 0}
.ff-count b{color:var(--ink)}
.ff-sec-b{margin-top:34px}
.ff-ph{margin:6px 0 18px}
.ff-more{margin:14px 0 0;font-weight:600}
.ff-bc{font-size:13px;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px}
.ff-bc a{color:var(--ink-soft);text-decoration:none}.ff-bc a:hover{color:var(--forest);text-decoration:underline}
.ff-bc-sep{opacity:.5}
.ff-bc-cur{color:var(--ink);font-weight:600}

/* ── hub hero ───────────────────────────────────────── */
.ff-hero{position:relative;background:var(--forest);color:#fff;overflow:hidden}
.ff-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32;filter:saturate(1.1)}
.ff-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,67,50,.25),rgba(17,36,27,.85))}
.ff-hero-in{position:relative;z-index:1;padding-top:48px;padding-bottom:40px}
.ff-hero .ff-h1{color:#fff;max-width:760px}
.ff-hero .ff-lead{color:rgba(255,255,255,.86)}
.ff-hero .ff-kick{color:var(--gold)}
.ff-bigsearch{margin-top:18px;display:flex;align-items:center;gap:10px;width:100%;max-width:620px;background:#fff;color:var(--ink-soft);border:0;border-radius:999px;padding:15px 20px;font:inherit;font-size:16px;text-align:left;cursor:text;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.ff-stats{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:22px}
.ff-stats div{display:flex;flex-direction:column;font-size:13px;color:rgba(255,255,255,.8)}
.ff-stats b{font-size:26px;color:#fff;font-weight:700;line-height:1.1}

/* ── tiles & cards ──────────────────────────────────── */
.ff-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.ff-tile{position:relative;display:block;border-radius:var(--r);overflow:hidden;background:var(--forest2);aspect-ratio:4/3;text-decoration:none;box-shadow:var(--sh)}
.ff-ti,.ff-ti img,.ff-ti .ff-noimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ff-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(10,25,18,.82))}
.ff-tb{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:10px 12px;color:#fff;display:flex;flex-direction:column}
.ff-tn{font-weight:700;font-size:15px;line-height:1.25}
.ff-tc{font-size:12px;opacity:.85}
.ff-tile:hover img{transform:scale(1.04)}
.ff-ti img{transition:transform .35s ease}
.ff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
@media (min-width:900px){.ff-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}.ff-tiles{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}}
.ff-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);transition:box-shadow .2s,transform .2s}
.ff-card:hover{box-shadow:var(--sh);transform:translateY(-2px)}
.ff-card:target{outline:3px solid var(--gold);outline-offset:2px}
.ff-ci{display:block;aspect-ratio:4/3;background:var(--mint);position:relative;overflow:hidden}
.ff-ci img{width:100%;height:100%;object-fit:cover}
.ff-cb{display:flex;flex-direction:column;gap:2px;padding:9px 11px 11px}
.ff-cn{font-weight:700;font-size:14.5px;line-height:1.3}
.ff-lat{font-size:12.5px;color:var(--ink-soft);line-height:1.3}
.ff-loc{align-self:flex-start;margin-top:4px;font-size:11.5px;font-weight:700;color:var(--clay);background:#F7E9D7;border-radius:999px;padding:1px 8px}
.ff-noimg{display:block;width:100%;height:100%;background:var(--mint) center/42% no-repeat}
/* group placeholder glyphs (inline SVG data URIs, no emoji) */
.ff-noimg{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352B788' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21c-4-3-7-6.5-7-11a7 7 0 0 1 14 0c0 4.5-3 8-7 11z'/%3E%3Cpath d='M12 21V9M12 13l3-3M12 16l-3-3'/%3E%3C/svg%3E")}

/* ── list tools / checklist ─────────────────────────── */
.ff-tools{display:flex;gap:8px;margin:0 0 14px;position:sticky;top:104px;z-index:5;background:var(--paper);padding:6px 0}
.ff-filter{flex:1;min-width:0;border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 16px;font:inherit;font-size:15px}
.ff-filter:focus,.ff-so-in:focus{outline:2px solid var(--leaf);outline-offset:1px}
.ff-sort{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 12px;font:inherit;font-size:14px;color:var(--ink);max-width:46%}
.ff-check{margin-top:30px}
.ff-rhead,.ff-row{display:grid;grid-template-columns:minmax(0,1fr) auto 52px;gap:4px 12px;align-items:baseline}
.ff-rhead{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);padding:0 14px 6px}
.ff-rhead span:last-child,.ff-rg{text-align:right}
.ff-rows{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden}
.ff-row{padding:9px 14px;border-top:1px solid var(--line);font-size:14px}
.ff-row:first-child{border-top:0}
.ff-row:target{background:#FFF4D6}
.ff-rlft{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0}
.ff-rl{font-weight:600}
.ff-rn{color:var(--ink-soft)}
.ff-rf{color:var(--ink-soft);font-size:12.5px}
.ff-rg{font-size:12.5px;color:var(--forest2)}
.ff-row .ff-loc{margin-top:0}
.ff-none{color:var(--ink-soft);padding:18px 0}
@media (max-width:520px){.ff-rhead,.ff-row{grid-template-columns:minmax(0,1fr) 44px}.ff-rf,.ff-rhead span:nth-child(2){display:none}}

/* ── species page ───────────────────────────────────── */
.ff-sp-hero{display:grid;gap:18px;grid-template-columns:1fr;margin-bottom:8px}
@media (min-width:900px){.ff-sp-hero{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:32px;align-items:start}}
.ff-photo{margin:0;border-radius:18px;overflow:hidden;background:var(--mint);position:relative;box-shadow:var(--sh)}
.ff-photo img{position:relative;z-index:1;width:100%;aspect-ratio:4/3;object-fit:contain}
.ff-photo .ff-photo-bg{position:absolute;inset:-24px;z-index:0;width:calc(100% + 48px);height:calc(100% + 48px);max-width:none;aspect-ratio:auto;object-fit:cover;filter:blur(18px) brightness(.8) saturate(1.1)}
.ff-photo figcaption{position:absolute;z-index:2;right:0;bottom:0;left:0;padding:18px 12px 7px;font-size:11.5px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.6));text-align:right}
.ff-photo figcaption a{color:rgba(255,255,255,.92);text-decoration:none}
.ff-photo-none{aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ff-photo-none .ff-noimg{height:60%}
.ff-photo>.ff-noimg{aspect-ratio:4/3;height:auto}
.ff-nop{color:var(--ink-soft);font-size:13px;padding-bottom:16px}
.ff-sp-head .ff-h1{margin-top:6px}
.ff-latin{font-size:18px;color:var(--ink-soft);margin:0 0 12px}
.ff-auth{font-size:14px;opacity:.8}
.ff-lchips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.ff-lchip{display:inline-flex;align-items:baseline;gap:6px;background:#F7E9D7;color:var(--clay);border-radius:999px;padding:5px 12px;font-size:14px;text-decoration:none}
.ff-lchip b{font-size:15px}
.ff-lln{font-size:12px;opacity:.85}
a.ff-lchip:hover{background:#F1DCC0}
.ff-badges{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.ff-badge{display:inline-flex;gap:6px;align-items:center;font-size:13px;font-weight:600;border-radius:8px;padding:4px 10px;background:#eef4ee;color:var(--forest)}
.ff-badge b{font-weight:800}
.ff-iu-LC{background:#E3F1E4;color:#1F6B3A}.ff-iu-NT{background:#EEF3D8;color:#5B6B12}.ff-iu-VU{background:#FFF1CC;color:#8A5A00}
.ff-iu-EN{background:#FFE2CF;color:#A8430F}.ff-iu-CR{background:#FFD6D6;color:#A31919}.ff-iu-EW,.ff-iu-EX{background:#E5E5E5;color:#333}
.ff-iu-DD{background:#EEE;color:#555}
.ff-b-end{background:#E4ECFB;color:#1E4FA3}.ff-b-int{background:#F3E8FF;color:#6B2FA6}.ff-b-thr{background:#FFE7E0;color:#A6371C}
.ff-names{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ff-names th,.ff-names td{text-align:left;padding:8px 12px;border-top:1px solid var(--line);vertical-align:top}
.ff-names tr:first-child th,.ff-names tr:first-child td{border-top:0}
.ff-names th{width:42%;color:var(--ink-soft);font-weight:600;font-size:13.5px}
.ff-names small{color:var(--ink-soft)}
.ff-sp-cols{display:grid;gap:16px;margin-top:22px}
.ff-col{display:contents}
.ff-o1{order:1}.ff-o2{order:2}.ff-o3{order:3}.ff-o4{order:4}
@media (min-width:900px){.ff-sp-cols{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:start}
  .ff-col{display:flex;flex-direction:column;gap:24px}}
.ff-card-s{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 18px 16px}
.ff-wtext p,.ff-prose p{margin:0 0 12px}
.ff-wsrc{font-size:12.5px;color:var(--ink-soft)}
.ff-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ff-fact{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;font-size:12.5px;color:var(--ink-soft)}
.ff-fact b{font-size:22px;color:var(--forest);line-height:1.15}
.ff-map{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:start}
.ff-map svg{width:100%;height:auto}
.ff-d{fill:#EFE7D6;stroke:#fff;stroke-width:1}
.ff-d.on{fill:var(--leaf)}
.ff-dl{list-style:none;margin:0;padding:0;font-size:13.5px}
.ff-dl li{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding:3px 0}
.ff-months{display:flex;align-items:flex-end;gap:4px;height:110px;padding-top:6px}
.ff-mb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}
.ff-mbar{display:block;width:100%;background:var(--leaf);border-radius:4px 4px 0 0;min-height:3px}
.ff-ml{font-size:10.5px;color:var(--ink-soft)}
.ff-srcs ul{margin:0;padding-left:18px;font-size:14px}
.ff-srcs li{margin:4px 0}

/* ── search overlay ─────────────────────────────────── */
.ff-so{position:fixed;inset:0;z-index:90;background:rgba(17,36,27,.45);display:flex;justify-content:center;align-items:flex-start;padding:0}
.ff-so-box{background:var(--paper);width:100%;max-width:720px;height:100%;display:flex;flex-direction:column}
@media (min-width:760px){.ff-so{padding-top:8vh}.ff-so-box{height:auto;max-height:80vh;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden}}
.ff-so-bar{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);background:#fff;color:var(--ink-soft)}
.ff-so-in{flex:1;min-width:0;border:0;font:inherit;font-size:17px;padding:8px 4px;background:transparent;color:var(--ink)}
.ff-so-in:focus{outline:none}
.ff-so-x{border:0;background:none;color:var(--forest2);font:inherit;font-weight:600;font-size:14px;cursor:pointer;padding:6px}
.ff-so-res{overflow-y:auto;padding:6px 0;flex:1}
.ff-so-hint{color:var(--ink-soft);padding:12px 18px;margin:0;font-size:14px}
.ff-so-res a{display:flex;flex-direction:column;padding:10px 18px;text-decoration:none;color:var(--ink);border-bottom:1px solid rgba(235,224,203,.6)}
.ff-so-res a:hover,.ff-so-res a.sel{background:#EEF4EE}
.ff-so-n{font-weight:700;font-size:15px}
.ff-so-m{font-size:13px;color:var(--ink-soft)}
.ff-so-m i{color:var(--ink)}
.ff-so-res .ff-so-c{font-size:11.5px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em}

/* ── footer ─────────────────────────────────────────── */
.ff-foot{border-top:1px solid var(--line);background:#F5EDDC;padding:28px 0 36px;font-size:14px;color:var(--ink-soft)}
.ff-foot-brand a{text-decoration:none;display:inline-flex;align-items:baseline}
.ff-foot-note{max-width:680px}
.ff-foot-links{display:flex;flex-wrap:wrap;gap:8px 18px}
.ff-foot-links a{color:var(--forest2);font-weight:600}
.ff-foot-up{font-size:12.5px}