/* =====================================================================
   Biodiversity Atlas of Tinsukia — Redesign v2
   Palette: curator's "Color Palette" (Deep Rainforest / River Teal /
   Golden Grass / Terracotta / Warm Ivory / Mist Sage …)
   Aesthetic: refined natural + Apple-style frosted glass +
   Levon-Biss-inspired dark, photo-forward galleries.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600&display=swap');

:root {
  /* ---- Core palette (neutral charcoal + warm ivory + gold) ---- */
  --rainforest: #23282b;  /* graphite — primary dark surfaces */
  --canopy:     #16181b;  /* near-black charcoal — footer / galleries */
  --teal:       #4f5b60;  /* muted slate — secondary / links */
  --gold:       #E08A38;  /* brightened rust-orange — site-wide accent / CTA / active */
  --terra:      #B86142;  /* Terracotta — special / rare / warm highlight */
  --ivory:      #F7F5EE;  /* Warm Ivory — page bg */
  --white:      #FFFEFA;  /* Natural White — cards */
  --mist:       #ECEAE3;  /* neutral warm-grey — alt surfaces */
  --charcoal:   #1e2224;  /* neutral charcoal — text */
  --slate:      #D6D6D2;  /* neutral light-grey — lines */

  /* ---- Semantic aliases ---- */
  --ink: var(--charcoal);
  --forest: var(--rainforest);
  --forest-2: #333a3f;
  --moss: var(--teal);
  --sage: #9aa1a3;
  --cream: var(--ivory);
  --cream-2: var(--mist);
  --paper: var(--white);
  --line: #d8d4cc;
  --muted: #646a6c;

  /* ---- Glass ---- */
  --glass-light: rgba(255,254,250,.62);
  --glass-light-brd: rgba(255,255,255,.55);
  --glass-dark: rgba(16,18,20,.5);
  --glass-dark-2: rgba(255,255,255,.055);
  --glass-dark-brd: rgba(255,255,255,.14);
  --blur: saturate(1.5) blur(16px);

  --maxw: 1240px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 3px rgba(16,18,20,.07), 0 8px 24px rgba(16,18,20,.08);
  --shadow-md: 0 14px 50px rgba(16,18,20,.18);
  --ease: cubic-bezier(.2,.7,.2,1);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin:0; font-family: var(--font-body); color: var(--ink);
  background: var(--cream); line-height:1.65; font-size:17px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width:100%; display:block; }
a { color: var(--teal); text-decoration:none; transition: color .2s var(--ease); }
a:hover { color: var(--terra); }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight:500; line-height:1.12; letter-spacing:-.01em; color: var(--ink); margin:0 0 .4em; }
p { margin:0 0 1.1em; }
::selection { background: var(--gold); color: var(--canopy); }

.wrap { width:100%; max-width: var(--maxw); margin-inline:auto; padding-inline: clamp(20px,5vw,48px); }
.narrow { max-width:760px; }
.section { padding-block: clamp(64px,9vw,128px); }
.eyebrow { font-family: var(--font-body); text-transform:uppercase; letter-spacing:.22em; font-size:.72rem; font-weight:600; color: var(--terra); margin:0 0 1rem; }
.lead { font-size:1.2rem; color:#3c473f; }
.center { text-align:center; }
.divider { height:1px; background: var(--line); border:0; margin:0; }

/* ---- Buttons ---- */
.btn { display:inline-flex; align-items:center; gap:.55em; font-family:var(--font-body); font-weight:600; font-size:.95rem; padding:.85em 1.6em; border-radius:100px; cursor:pointer; border:1px solid transparent; transition: all .25s var(--ease); }
.btn-primary { background: var(--forest); color:#fff; }
.btn-primary:hover { background: var(--forest-2); color:#fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-gold { background: var(--gold); color: var(--canopy); }
.btn-gold:hover { background:#ee9b48; color: var(--canopy); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-ghost { background:transparent; color: var(--forest); border-color: var(--forest); }
.btn-ghost:hover { background: var(--forest); color:#fff; }
.btn-glass { background: rgba(255,255,255,.12); color:#fff; border-color: rgba(255,255,255,.4); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.btn-glass:hover { background:#fff; color: var(--forest); border-color:#fff; }

/* =====================================================================
   Navigation (frosted glass)
   ===================================================================== */
.nav { position: sticky; top:0; z-index:60; background: var(--glass-light); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-bottom:1px solid rgba(207,218,210,.7); }
.nav .wrap { display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand { display:flex; align-items:center; gap:.7rem; }
.brand img { width:40px; height:auto; }
.brand-txt { display:flex; flex-direction:column; line-height:1.05; }
.brand-txt b { font-family:var(--font-display); font-weight:600; font-size:1.04rem; color: var(--ink); }
.brand-txt span { font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color: var(--teal); }
.nav-links { display:flex; align-items:center; gap:2rem; list-style:none; margin:0; padding:0; }
.nav-links a { color: var(--ink); font-weight:500; font-size:.96rem; position:relative; }
.nav-links a::after { content:''; position:absolute; left:0; bottom:-6px; width:0; height:2px; background: var(--gold); transition:width .25s var(--ease); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-links a.active { color: var(--forest); }
.nav-toggle { display:none; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span { display:block; width:24px; height:2px; background: var(--ink); margin:5px 0; transition:.3s var(--ease); }
@media (max-width:860px){
  .nav-toggle{ display:block; }
  .nav-links{ position:absolute; top:74px; left:0; right:0; flex-direction:column; align-items:flex-start; gap:0; background: var(--glass-light); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border-bottom:1px solid var(--line); padding:8px 24px 20px; max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
  .nav-links.open{ max-height:360px; }
  .nav-links li{ width:100%; }
  .nav-links a{ display:block; padding:14px 0; width:100%; border-bottom:1px solid var(--line); }
  .nav-links li:last-child a{ border-bottom:0; }
}

/* =====================================================================
   Home hero
   ===================================================================== */
/* Home hero: pinned image with a gentle parallax drift; page scrolls over it */
.hero { position:relative; z-index:1; min-height:100vh; min-height:100svh; display:grid; align-items:end; color:#fff; }
.hero__bg { position:fixed; top:0; left:0; width:118%; height:100vh; height:100svh; z-index:0; overflow:hidden; }
/* oversized crop: lets the bird sit right of centre and drift without gaps; colours untouched */
/* your setting: container is 118% wide (above); image fills it at 100% */
.hero__bg img { position:absolute; top:-13%; left:0; width:100%; height:148%; object-fit:cover; object-position:center; transform: translateY(0); will-change: transform; }
/* neutral (colour-true) darkening only — left for the title, base for the credit line */
.hero__bg::after { content:''; position:absolute; inset:0; background:
  linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.30) 40%, rgba(0,0,0,0) 70%),
  linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.40) 100%); }
/* shift the hero text block to the left, away from the bird */
.hero__inner { transform: translateX(-13%); }
@media (max-width: 900px) { .hero__inner { transform: translateX(-4%); } }
@media (max-width: 640px) { .hero__inner { transform: none; } }
/* everything after the hero scrolls up and covers the pinned image */
.stats, .section, hr.divider, .marquee, .footer { position:relative; z-index:1; }
.mission { background: var(--cream); }
.hero__inner { position:relative; z-index:1; padding-block:0 clamp(48px,8vw,96px); }
.hero .eyebrow { color: var(--gold); text-shadow:0 1px 14px rgba(10,11,12,.8); }
.hero h1 { color:#fff; font-weight:500; font-size:clamp(2.7rem,7vw,5.4rem); letter-spacing:-.02em; margin-bottom:.1em; text-shadow:0 2px 26px rgba(0,0,0,.6); }
.hero h1 em { font-style:italic; color:#f4f1ea; font-weight:400; text-shadow:0 2px 26px rgba(0,0,0,.6); }
/* hero uses the same site-wide accent; white headline keeps it commanding */
.hero .btn-gold { background: var(--gold); color:#fff; box-shadow:0 12px 34px rgba(224,138,56,.30); }
.hero .btn-gold:hover { background:#ee9b48; color:#fff; }
.hero__sub { font-size:clamp(1.05rem,2vw,1.3rem); max-width:640px; color:rgba(255,255,255,.94); margin-bottom:1.8rem; text-shadow:0 2px 18px rgba(10,11,12,.55); }
.hero__cta { display:flex; gap:1rem; flex-wrap:wrap; }
.hero__credit { position:absolute; z-index:1; right:clamp(20px,5vw,48px); bottom:16px; font-size:.74rem; letter-spacing:.06em; color:rgba(255,255,255,.72); }

/* stats */
.stats { background: var(--forest); color:#fff; }
.stats .wrap { display:grid; grid-template-columns:repeat(4,1fr); }
.stat { padding:clamp(28px,4vw,48px) 12px; text-align:center; position:relative; }
.stat + .stat::before { content:''; position:absolute; left:0; top:22%; height:56%; width:1px; background:rgba(255,255,255,.16); }
.stat b { display:block; font-family:var(--font-display); font-size:clamp(2rem,4vw,3rem); font-weight:500; color:#fff; line-height:1; }
.stat b em { color: var(--gold); font-style:normal; }
.stat span { display:block; margin-top:.5rem; font-size:.8rem; text-transform:uppercase; letter-spacing:.16em; color:#c6cac9; }
@media (max-width:720px){ .stats .wrap{ grid-template-columns:repeat(2,1fr); } .stat + .stat:nth-child(3)::before{ display:none; } }

/* mission */
.mission-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,80px); align-items:center; }
.mission h2 { font-size:clamp(2rem,4vw,3rem); }
.mission-figure img { border-radius:var(--radius-lg); box-shadow:var(--shadow-md); aspect-ratio:4/5; object-fit:cover; width:100%; }
.mission-figure figcaption { font-size:.8rem; color:var(--muted); margin-top:.7rem; font-style:italic; }
.pull { font-family:var(--font-display); font-style:italic; font-size:1.35rem; line-height:1.4; color: var(--forest-2); border-left:3px solid var(--gold); padding-left:1.2rem; margin:1.6rem 0; }
@media (max-width:820px){ .mission-grid{ grid-template-columns:1fr; } .mission-figure{ order:-1; } }

/* section head */
.section-head { max-width:660px; margin-bottom:clamp(32px,5vw,56px); }
.section-head.center { margin-inline:auto; }

/* =====================================================================
   Taxon cards (Atlas index) + category colors
   ===================================================================== */
.taxa-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:clamp(18px,2.5vw,28px); }
.taxon { position:relative; display:block; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow-sm); background:var(--canopy); isolation:isolate; }
.taxon img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); z-index:0; }
.taxon::after { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(16,18,20,0) 30%,rgba(10,11,12,.88) 100%); }
.taxon:hover img { transform:scale(1.06); }
.taxon__body { position:absolute; z-index:2; inset:auto 0 0 0; padding:24px; color:#fff; }
.taxon__body h3 { color:#fff; font-size:1.5rem; margin-bottom:.2em; }
.taxon__count { font-size:.82rem; letter-spacing:.04em; color:rgba(255,255,255,.85); }
.taxon__cat { display:none; }  /* category icon chips hidden per request */
.taxon__cat--legacy { position:absolute; z-index:2; top:16px; left:16px; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.25); }
.taxon__cat svg { width:24px; height:24px; }
.taxon__go { position:absolute; top:16px; right:16px; z-index:2; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.16); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.35); display:grid; place-items:center; color:#fff; font-size:1.1rem; transform:translateY(-6px); opacity:0; transition:.3s var(--ease); }
.taxon:hover .taxon__go { transform:translateY(0); opacity:1; }
.taxon__meta { position:absolute; z-index:2; bottom:24px; right:24px; font-size:.72rem; letter-spacing:.05em; color:rgba(255,255,255,.8); background:rgba(16,18,20,.4); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); padding:.3em .7em; border-radius:100px; }

/* category colors */
.cat-birds{ background:#2E8BC0 } .cat-butterflies{ background:#8B5CCB } .cat-amphibians{ background:#4CAF7D }
.cat-reptiles{ background:#A3B63D } .cat-arachnids{ background:#F39C34 } .cat-insects{ background:#A97142 } .cat-flora{ background:#C45D8C }
.bar-birds{ background:#2E8BC0 } .bar-butterflies{ background:#8B5CCB } .bar-amphibians{ background:#4CAF7D }
.bar-arachnids{ background:#F39C34 } .bar-insects{ background:#A97142 }

/* =====================================================================
   Living marquee ribbon
   ===================================================================== */
.marquee { background: var(--canopy); color:#eaf1ec; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); overflow:hidden; }
.marquee__track { display:flex; width:max-content; gap:0; animation: marquee 42s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display:inline-flex; align-items:center; gap:16px; padding:14px 0; white-space:nowrap; font-size:.9rem; letter-spacing:.02em; color:#dbe6de; }
.marquee__item b { color: var(--gold); font-weight:600; }
.marquee__dot { color: var(--gold); padding:0 28px; }
@keyframes marquee { from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* =====================================================================
   Gallery pages — dark, immersive (Biss-inspired)
   ===================================================================== */
.gallery-body { background: var(--canopy); }
.guide-hero { position:relative; color:#fff; padding-block:clamp(56px,8vw,104px) clamp(40px,6vw,64px); overflow:hidden; background: var(--rainforest); }
.guide-hero__bg { position:absolute; inset:0; z-index:0; opacity:.5; }
.guide-hero__bg img { width:100%; height:100%; object-fit:cover; }
.guide-hero::after { content:''; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg,rgba(16,18,20,.7),rgba(10,11,12,.94)); }
.guide-hero .wrap { position:relative; z-index:1; }
.guide-hero .eyebrow { color: var(--gold); }
.guide-hero h1 { color:#fff; font-size:clamp(2.6rem,6vw,4.4rem); }
.guide-hero p { color:rgba(255,255,255,.88); max-width:680px; }
.cat-line { width:64px; height:5px; border-radius:100px; margin-bottom:20px; }
.crumbs { font-size:.82rem; color:rgba(255,255,255,.7); margin-bottom:1.2rem; }
.crumbs a { color:rgba(255,255,255,.85); } .crumbs a:hover{ color: var(--gold); }

/* controls — dark glass */
.controls { position:sticky; top:74px; z-index:40; background: var(--glass-dark); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border-bottom:1px solid var(--glass-dark-brd); }
.controls .wrap { display:flex; flex-wrap:wrap; gap:14px; align-items:center; padding-block:16px; }
.search { flex:1 1 260px; position:relative; }
.search input { width:100%; font-family:var(--font-body); font-size:.98rem; color:#fff; padding:.8em 1em .8em 2.6em; border-radius:100px; border:1px solid var(--glass-dark-brd); background:rgba(255,255,255,.08); transition:.2s var(--ease); }
.search input::placeholder { color:rgba(255,255,255,.55); }
.search input:focus { outline:none; border-color: var(--gold); box-shadow:0 0 0 4px rgba(224,138,56,.22); }
.search svg { position:absolute; left:1em; top:50%; transform:translateY(-50%); color:rgba(255,255,255,.6); }
.filters { display:flex; gap:8px; flex-wrap:wrap; }
.chip { font-family:var(--font-body); font-size:.85rem; font-weight:500; cursor:pointer; padding:.5em 1em; border-radius:100px; border:1px solid var(--glass-dark-brd); background:rgba(255,255,255,.06); color:#eaf1ec; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:all .2s var(--ease); }
.chip:hover { border-color: var(--gold); color:#fff; }
.chip.active { background: var(--gold); color: var(--canopy); border-color: var(--gold); }
.result-count { font-size:.85rem; color:rgba(255,255,255,.7); margin-left:auto; }

/* species grid */
.gallery-section { background: var(--canopy); padding-block:clamp(36px,5vw,60px) clamp(56px,8vw,96px); position:relative; }
.species-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:clamp(18px,2.4vw,26px); }
.card { background: rgba(255,255,255,.05); border:1px solid var(--glass-dark-brd); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; cursor:pointer; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.card:hover { transform:translateY(-5px); box-shadow:0 20px 50px rgba(0,0,0,.4); border-color:rgba(224,138,56,.5); }
.card:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.card__media { position:relative; aspect-ratio:1/1; overflow:hidden; background:#111214; }
.card__media img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.card:hover .card__media img { transform:scale(1.06); }
.card__zoom { position:absolute; inset:0; display:grid; place-items:center; opacity:0; transition:.3s var(--ease); }
.card__zoom span { width:46px; height:46px; border-radius:50%; background:rgba(16,18,20,.5); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.4); display:grid; place-items:center; color:#fff; font-size:1.1rem; }
.card:hover .card__zoom { opacity:1; }
.card__tag { position:absolute; top:12px; left:12px; font-size:.66rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:.32em .7em; border-radius:100px; background:rgba(16,18,20,.55); color:#eaf1ec; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.15); }
.card__tag.winter { color:#bfe0ff; }
.card__badges { position:absolute; top:12px; right:12px; display:flex; gap:6px; }
.badge-nt { font-size:.62rem; font-weight:700; letter-spacing:.06em; padding:.3em .6em; border-radius:100px; background: var(--terra); color:#fff; }
.card__body { padding:16px 18px 18px; display:flex; flex-direction:column; gap:.12rem; flex:1; }
.card__body h3 { font-size:1.1rem; margin:0; line-height:1.2; color:#fff; }
.card__sci { font-family:var(--font-display); font-style:italic; font-size:.94rem; color: var(--gold); margin:0 0 .1rem; }
.card__fam { font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color: var(--sage); margin-bottom:.5rem; }
.card__desc { font-size:.86rem; color:rgba(230,238,232,.78); line-height:1.5; margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.no-results { text-align:center; color:rgba(255,255,255,.7); padding:60px 0; grid-column:1/-1; font-style:italic; }
.gallery-note { text-align:center; color:rgba(255,255,255,.7); font-size:.9rem; max-width:640px; margin:40px auto 0; }
.gallery-note a { color: var(--gold); }

/* =====================================================================
   Lightbox
   ===================================================================== */
.lightbox { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:clamp(12px,3vw,40px); background:rgba(10,11,12,.72); -webkit-backdrop-filter:blur(22px) saturate(1.3); backdrop-filter:blur(22px) saturate(1.3); }
.lightbox.open { display:flex; animation: fade .3s var(--ease); }
@keyframes fade { from{ opacity:0 } to{ opacity:1 } }
.lb__panel { position:relative; width:min(1080px,100%); max-height:90vh; display:grid; grid-template-columns:1.25fr .85fr; background: var(--glass-dark-2); border:1px solid var(--glass-dark-brd); border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 40px 120px rgba(0,0,0,.6); }
.lb__media { background:#0e0f10; display:grid; place-items:center; min-height:280px; }
.lb__media img { width:100%; height:100%; max-height:90vh; object-fit:contain; }
.lb__info { padding:clamp(24px,3vw,40px); color:#eaf1ec; overflow-y:auto; }
.lb__cat { width:52px; height:5px; border-radius:100px; margin-bottom:16px; }
.lb__common { font-size:clamp(1.5rem,3vw,2rem); color:#fff; margin:0 0 .1em; }
.lb__sci { font-family:var(--font-display); font-style:italic; font-size:1.15rem; color: var(--gold); margin:0 0 1rem; }
.lb__pills { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.lb__pill { font-size:.72rem; letter-spacing:.05em; padding:.4em .8em; border-radius:100px; background:rgba(255,255,255,.08); border:1px solid var(--glass-dark-brd); color:#dbe6de; }
.lb__pill.nt { background: var(--terra); color:#fff; border-color:transparent; }
.lb__desc { font-size:.98rem; line-height:1.65; color:rgba(230,238,232,.9); }
.lb__foot { margin-top:18px; padding-top:16px; border-top:1px solid var(--glass-dark-brd); font-size:.8rem; color: var(--sage); }
.lb__close { position:absolute; top:14px; right:14px; z-index:3; width:42px; height:42px; border-radius:50%; background:rgba(16,18,20,.5); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.3); color:#fff; font-size:1.3rem; cursor:pointer; display:grid; place-items:center; transition:.2s var(--ease); }
.lb__close:hover { background: var(--terra); border-color:transparent; }
.lb__nav { position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:46px; height:46px; border-radius:50%; background:rgba(16,18,20,.5); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.3); color:#fff; font-size:1.3rem; cursor:pointer; display:grid; place-items:center; transition:.2s var(--ease); }
.lb__nav:hover { background: var(--gold); color: var(--canopy); border-color:transparent; }
.lb__prev { left:14px; } .lb__next { right:14px; }
@media (max-width:760px){
  .lb__panel { grid-template-columns:1fr; max-height:92vh; }
  .lb__media { max-height:44vh; }
  .lb__prev{ left:10px; } .lb__next{ right:10px; } .lb__nav{ top:22vh; transform:none; }
}

/* =====================================================================
   About / Contact
   ===================================================================== */
.about-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,6vw,72px); align-items:center; }
.about-figure img { border-radius:var(--radius-lg); box-shadow:var(--shadow-md); aspect-ratio:1/1; object-fit:cover; }
@media (max-width:820px){ .about-grid{ grid-template-columns:1fr; } }
.value-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:24px; }
.value { background: var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow: var(--shadow-sm); }
.value .num { font-family:var(--font-display); font-size:1.3rem; color: var(--terra); }
.value h3 { font-size:1.15rem; margin:.4rem 0 .3rem; }
.value p { font-size:.92rem; color:#3c473f; margin:0; }
.postcard { background:linear-gradient(135deg,var(--rainforest),var(--teal)); color:#fff; border-radius:var(--radius-lg); padding:clamp(32px,5vw,56px); text-align:center; box-shadow:var(--shadow-md); }
.postcard h2{ color:#fff; } .postcard p{ color:rgba(255,255,255,.88); max-width:520px; margin-inline:auto; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
.field { margin-bottom:18px; }
.field label { display:block; font-size:.82rem; font-weight:600; letter-spacing:.04em; color: var(--forest-2); margin-bottom:.4rem; }
.field input,.field select,.field textarea { width:100%; font-family:var(--font-body); font-size:1rem; color:var(--ink); padding:.8em 1em; border-radius:12px; border:1px solid var(--line); background:var(--paper); transition:.2s var(--ease); }
.field input:focus,.field select:focus,.field textarea:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(40,117,107,.16); }
.field textarea { resize:vertical; min-height:130px; }
.contact-detail { display:flex; gap:14px; align-items:flex-start; margin-bottom:22px; }
.contact-detail .ic { flex:0 0 auto; width:46px; height:46px; border-radius:12px; background:var(--mist); display:grid; place-items:center; color:var(--forest); font-size:1.2rem; }
.contact-detail b { display:block; font-size:.95rem; }
.contact-detail span,.contact-detail a { font-size:.92rem; color:var(--muted); }

/* =====================================================================
   Footer + visitor counter
   ===================================================================== */
.footer { background: var(--canopy); color:#c2ccca; padding-block:clamp(48px,6vw,72px) 28px; }
.footer a { color:#e4e9e0; } .footer a:hover { color: var(--gold); }
.footer-top { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:36px; }
.footer h4 { color:#fff; font-size:1.05rem; margin-bottom:1rem; }
.footer .brand-txt b { color:#fff; } .footer .brand-txt span { color: var(--sage); }
.footer ul { list-style:none; margin:0; padding:0; }
.footer ul li { margin-bottom:.6rem; font-size:.92rem; }
.footer-note { border-top:1px solid rgba(255,255,255,.12); padding-top:22px; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; font-size:.82rem; color: var(--sage); }
.cc-icons { display:flex; gap:6px; align-items:center; }
.cc-icons img { height:22px; width:auto; opacity:.85; filter:invert(1) brightness(1.8); }
.visitor { display:inline-flex; align-items:center; gap:8px; font-size:.82rem; color: var(--sage); }
.visitor .dot { width:8px; height:8px; border-radius:50%; background: var(--gold); box-shadow:0 0 0 0 rgba(224,138,56,.6); animation: pulse 2.2s infinite; }
.visitor b { color:#eaf1ec; font-variant-numeric: tabular-nums; }
@keyframes pulse { 0%{ box-shadow:0 0 0 0 rgba(224,138,56,.55);} 70%{ box-shadow:0 0 0 8px rgba(224,138,56,0);} 100%{ box-shadow:0 0 0 0 rgba(224,138,56,0);} }
@media (max-width:720px){ .footer-top{ grid-template-columns:1fr; gap:28px; } }

/* =====================================================================
   Scroll UX + performance helpers
   ===================================================================== */
html { scroll-padding-top: 88px; }              /* sticky-nav offset for anchors */
body { overflow-x: hidden; }                    /* guard against marquee overflow */
.nav { transition: box-shadow .3s var(--ease), background .3s var(--ease); }
.nav.scrolled { box-shadow: 0 6px 26px rgba(16,18,20,.12); }
/* (removed content-visibility on cards — it promoted them to GPU layers,
   which forced low-quality downscaling of the photos / a grainy look) */
.card__media img { image-rendering: auto; }

/* back-to-top */
.to-top {
  position: fixed; right: clamp(16px,3vw,28px); bottom: clamp(16px,3vw,28px); z-index: 90;
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  background: var(--gold); color: var(--canopy); border: 0; font-size: 1.3rem; line-height: 1;
  box-shadow: 0 10px 30px rgba(16,18,20,.28);
  opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), background .2s var(--ease);
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: #ee9b48; transform: translateY(-2px); }

/* controls: keep tidy on small screens */
@media (max-width: 640px) {
  .controls .wrap { gap: 10px; }
  .result-count { margin-left: 0; width: 100%; order: 3; }
  #filterBar { width: 100%; }
  .filters { width: 100%; }
}

/* reveal */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; }
  .reveal{ opacity:1; transform:none; }
  .card{ opacity:1 !important; transform:none !important; }
  .marquee__track{ animation:none; }
}

/* =====================================================================
   Gallery — Levon-Biss-inspired prototype
   Bigger, image-forward cards · a full-bleed lead specimen · graceful
   fade-in as each photo enters view.
   ===================================================================== */
.species-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: clamp(22px, 3vw, 44px); }

/* taller, more present imagery */
.card__media { aspect-ratio: 4 / 5; }

/* scroll reveal (cards are JS-generated, so opacity:0 is safe here) */
.card { opacity: 0; transform: translateY(30px); transition: opacity .7s var(--ease), transform .7s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.card.in { opacity: 1; transform: none; }
.card:hover { transform: translateY(-6px); }

/* full-bleed lead specimen (first card) with an overlaid caption */
.card--feature { grid-column: 1 / -1; position: relative; }
.card--feature .card__media { aspect-ratio: 16 / 9; }
@media (min-width: 1000px) { .card--feature .card__media { aspect-ratio: 2 / 1; } }
.card--feature .card__body {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: clamp(22px, 3vw, 40px);
  background: linear-gradient(180deg, rgba(10,11,12,0) 0%, rgba(10,11,12,.55) 55%, rgba(10,11,12,.88) 100%);
}
.card--feature .card__body h3 { font-size: clamp(1.5rem, 3.2vw, 2.3rem); }
.card--feature .card__desc { -webkit-line-clamp: 2; max-width: 62ch; }
@media (max-width: 700px) {
  .card__media { aspect-ratio: 1 / 1; }
  .card--feature .card__media { aspect-ratio: 4 / 3; }
}

/* (Neutral charcoal is now the site-wide palette — see :root. The former
   gallery-only override has been folded into the base tokens.) */

/* =====================================================================
   PREMIUM POLISH — typographic finesse, softer depth, airier rhythm
   ===================================================================== */
:root {
  /* softer, layered shadows read as quality depth rather than a hard drop */
  --shadow-sm: 0 1px 2px rgba(16,18,20,.05), 0 6px 16px rgba(16,18,20,.06);
  --shadow-md: 0 10px 30px rgba(16,18,20,.10), 0 34px 60px rgba(16,18,20,.10);
}

/* type: enable ligatures/optical sizing, balance headlines, tidy paragraphs */
body { font-feature-settings: "liga" 1, "calt" 1; }
h1, h2, h3, h4 { font-optical-sizing: auto; text-wrap: balance; }
h1, h2 { letter-spacing: -.018em; }
p, .lead, .hero__sub, .card__desc, .lb__desc { text-wrap: pretty; }
.lead { font-weight: 400; color: #444b45; }

/* eyebrows: finer, more spaced — a small luxury cue */
.eyebrow { font-size: .7rem; letter-spacing: .3em; }

/* buttons: a touch more presence + refined tracking */
.btn { letter-spacing: .02em; padding: .92em 1.75em; }
.btn-primary, .btn-gold { box-shadow: var(--shadow-sm); }
.btn-primary:hover, .btn-gold:hover { box-shadow: var(--shadow-md); }

/* nav: subtle tracking for a considered feel */
.nav-links a { letter-spacing: .005em; }

/* airier vertical rhythm */
.section { padding-block: clamp(76px, 10vw, 148px); }
.section-head { margin-bottom: clamp(36px, 5vw, 64px); }

/* refined hairline divider (fades at the edges) */
hr.divider { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }

/* refined depth on framed photography + cards */
.mission-figure img, .about-figure img { box-shadow: var(--shadow-md); }
.card { border-color: rgba(255,255,255,.10); }
.card:hover { box-shadow: 0 26px 64px rgba(0,0,0,.46); }
.value { box-shadow: var(--shadow-sm); border-color: var(--line); }

/* crisp, consistent keyboard focus (accessibility polish) */
a:focus-visible, button:focus-visible, .card:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px;
}

/* let large imagery downscale smoothly */
.hero__bg img, .guide-hero__bg img, .taxon img, .card__media img,
.mission-figure img, .about-figure img { image-rendering: auto; }

/* =====================================================================
   IMMERSIVE LIGHTBOX — full-screen, zoom-to-explore (Biss-style)
   ===================================================================== */
.lightbox { background: rgba(8,9,10,.975); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 0; }
.lb__panel { width: 100%; height: 100%; max-width: none; max-height: none; display: block; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.lb__media { position: absolute; inset: 0; width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; background: transparent; cursor: zoom-in; }
.lb__media img { max-width: 94vw; max-height: 94vh; width: auto; height: auto; object-fit: contain; opacity: 1; will-change: transform; box-shadow: 0 30px 90px rgba(0,0,0,.5); }
.lb__media.zoomed { cursor: grab; }
.lb__media.grabbing { cursor: grabbing; }
.lb__media.grabbing img { transition: none !important; }

/* details float over a soft scrim, bottom-left */
.lb__info {
  position: absolute; left: 0; right: auto; top: auto; bottom: 0; height: auto;
  width: min(560px, 94vw);
  padding: clamp(48px,7vw,88px) clamp(24px,3vw,52px) clamp(26px,3vw,46px);
  display: flex; flex-direction: column; overflow: visible;
  background: linear-gradient(0deg, rgba(8,9,10,.92) 0%, rgba(8,9,10,.55) 55%, rgba(8,9,10,0) 100%);
  pointer-events: none;                 /* let zoom/drag work through the scrim */
}
.lb__common, .lb__sci, .lb__pills, .lb__desc, .lb__foot, .lb__cat { pointer-events: auto; }

/* zoom/pan hint */
.lb__hint {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 4;
  font-size: .72rem; letter-spacing: .06em; color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: .45em 1em; border-radius: 100px; transition: opacity .5s ease; pointer-events: none;
}
.lb__hint.hide { opacity: 0; }

@media (max-width: 760px) {
  .lb__info { width: 100%; padding-top: clamp(40px,12vw,72px); }
  .lb__hint { display: none; }
  .lb__media img { max-width: 100vw; max-height: 82vh; }
}