/* ReptileCoach: real photos of the habitats and animals, with frosted glass over them.
   Loaded after site.css and overrides it. */
:root {
  --jungle: #24482b;
  --leaf: #3f7a3a;
  --leaf-2: #5f9a45;
  --moss: #e3eccf;
  --sand: #f6ead0;
  --sand-2: #ecd9b2;
  --wood: #8a5a2b;
  --wood-2: #6b431e;
  --wood-ink: #fff7e6;
  --sun: #f4c247;
  --zoo-display: "Montserrat", "Inter", system-ui, sans-serif;
  --teal-700: #3f7a3a;
  --teal-900: #24482b;
  --teal-600: #5f9a45;
  --teal-100: #e3eccf;
  --aqua-50: #fbf5e6;
  --aqua-100: #f3e8cc;
}
body { background: var(--sand); }
h1, h2, h3, .brand { font-family: var(--zoo-display); letter-spacing: 0; }
h1 { font-weight: 700; }
h2 { font-weight: 650; }
.btn { background: var(--leaf); border-radius: 999px; font-weight: 700; box-shadow: 0 3px 0 var(--jungle); }
.btn:hover { background: var(--jungle); }
.btn-light { background: var(--sun); color: #3a2a0a !important; box-shadow: 0 3px 0 #b58a1c; }
.btn-light:hover { background: #ffd666; }
.btn-outline-light { color: #fff !important; box-shadow: inset 0 0 0 2px rgba(255,255,255,.85); }

/* Header: a zoo gate */
.site-header { background: rgba(22,40,24,.62); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid rgba(255,255,255,.14); box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.site-header .brand, .site-header .brand span { color: #fff; }
.site-header .nav a { color: #e8f2d8; font-weight: 600; }
.site-header .nav a:hover { color: var(--sun); }
.site-header .nav .btn { background: var(--sun); color: #3a2a0a !important; box-shadow: none; }
.brand small { display: block; font: 600 .62rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--sun); }

/* Section headings sit straight on the photo, like the habitat titles on the stage. */
.sign { display: block; margin: 0 0 .5rem; color: #fff; font-family: var(--zoo-display); font-weight: 650; font-size: clamp(1.7rem, 3.4vw, 2.4rem); text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.sign::before { content: ""; display: block; width: 44px; height: 4px; margin-bottom: 12px; border-radius: 4px; background: var(--zc, var(--sun)); }
.sign-sub { display: block; margin: 0 0 1.6rem; max-width: 62ch; color: rgba(255,255,255,.8); }
.sign-sub a { color: var(--sun); }
.jcard .sign { color: var(--ink); text-shadow: none; font-size: clamp(1.6rem, 3vw, 2.1rem); }
.jcard .sign::before { background: var(--hc); }

/* Section bands are see-through: the page photo runs behind all of them. */
.band { padding: 64px 0; background: transparent; }

/* Zoo map */
.zoo-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; counter-reset: zone; }
.zone-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 18px; border-radius: 22px; color: var(--ink); text-decoration: none; background: #fffaf0; border: 3px solid var(--zc, var(--leaf)); box-shadow: 0 6px 0 color-mix(in srgb, var(--zc, var(--leaf)) 55%, #000 0%); transition: transform .15s; }
.zone-card:hover { transform: translateY(-3px) rotate(-.4deg); color: var(--ink); }
.zone-card h3 { font-size: 1.35rem; color: var(--zc); margin: 0; }
.zone-card p { font-size: .93rem; color: var(--ink-2); margin: 0; }
.zone-card .zone-icon { width: 54px; height: 54px; }
.zone-card ul { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.zone-card li { font-size: .78rem; font-weight: 600; background: color-mix(in srgb, var(--zc) 14%, #fff); color: var(--ink); border-radius: 999px; padding: 3px 9px; }

/* Resident cards: a window into each enclosure plus its plaque */
.residents { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }
.resident { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); border-radius: 20px; background: #fffaf0; box-shadow: 0 2px 0 rgba(90,60,20,.18), 0 10px 24px rgba(90,60,20,.12); overflow: hidden; transition: transform .18s, box-shadow .18s; }
.resident:hover { transform: translateY(-4px); color: var(--ink); box-shadow: 0 2px 0 rgba(90,60,20,.18), 0 18px 32px rgba(90,60,20,.18); }
.resident .window { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 6px solid var(--wood); background: var(--moss); }
.resident .window img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 3s ease; }
.resident:hover .window img { transform: scale(1.06); }
@media (prefers-reduced-motion: no-preference) {
  .resident .window img { animation: breathe 6s ease-in-out infinite; animation-delay: var(--d, 0s); }
  @keyframes breathe { 0%, 100% { transform: scale(1.0); } 50% { transform: scale(1.035); } }
  .resident:hover .window img { animation-play-state: paused; }
}
.resident .zone-tag { position: absolute; left: 10px; top: 10px; background: var(--zc, var(--leaf)); color: #fff; font: 600 .72rem var(--font); padding: 3px 9px; border-radius: 999px; }
.resident .level { position: absolute; right: 10px; top: 10px; background: rgba(255,255,255,.92); color: var(--jungle); font: 700 .72rem var(--font); padding: 3px 9px; border-radius: 999px; }
.resident .plaque { padding: 12px 14px 14px; }
.resident .plaque b { display: block; font: 650 1.12rem var(--zoo-display); }
.resident .plaque i { display: block; font-size: .82rem; color: var(--ink-2); margin-bottom: 6px; }
.resident .facts { display: flex; flex-wrap: wrap; gap: 6px; font-size: .76rem; }
.resident .facts span { background: var(--sand); border-radius: 8px; padding: 2px 7px; }

/* Filters on the zoo map page */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.chip { border: 2px solid var(--leaf); background: #fff; color: var(--jungle); font: 600 .88rem var(--font); padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--leaf); color: #fff; }
.zone-section { scroll-margin-top: 90px; margin-bottom: 44px; }
.zone-section > p { max-width: 62ch; color: var(--ink-2); }

/* Species page */
.exhibit-head { position: relative; overflow: hidden; background: var(--jungle); color: #fff; }
.exhibit-head .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; padding: 40px 0 48px; pointer-events: none; }
.exhibit-head a, .exhibit-head button { pointer-events: auto; }
.exhibit-head h1 { color: #fff; margin-bottom: .2rem; }
.exhibit-head .sci { color: #cfe3b8; }
.exhibit-head .crumbs, .exhibit-head .crumbs a { color: #cfe3b8; }
.exhibit-head .page-updated, .exhibit-head .page-updated * { color: #cfe3b8 !important; }
.gallery figcaption { font-size: .72rem; padding: 6px 10px; background: #fffaf0; color: var(--ink-2); }
.gallery figcaption a { color: var(--ink-2); }
@media (max-width: 820px) { .exhibit-head .wrap { grid-template-columns: 1fr; } }
.placard { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin: 0 0 1.6rem; border-radius: 18px; overflow: hidden; border: 3px solid var(--wood); background: #fffaf0; }
.placard div { padding: 10px 12px; border-right: 1px dashed var(--sand-2); border-bottom: 1px dashed var(--sand-2); }
.placard dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.placard dd { margin: 0; font-weight: 650; }
.gallery { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 1rem 0 2rem; }
.gallery figure { max-width: 560px; margin: 0; border-radius: 18px; overflow: hidden; border: 4px solid var(--wood); }
.gallery img { display: block; width: 100%; height: auto; }
.faq details { background: #fffaf0; border: 2px solid var(--sand-2); border-radius: 14px; padding: 12px 16px; margin-bottom: 10px; }
.faq summary { cursor: pointer; font-weight: 650; }
.faq details[open] summary { margin-bottom: 6px; color: var(--jungle); }
.neighbors { margin: 2rem 0; }
.prose { background: transparent; }
.care-table th { background: var(--moss); }
.answer { background: #fffaf0; border-left-color: var(--leaf); }
.page-head { background: linear-gradient(180deg, var(--moss), var(--sand)); }
.page-head h1 { font-family: var(--zoo-display); }
.species-card { background: #fffaf0; }

/* Compare / finder tool results */
.match-list { list-style: none; padding: 0; display: grid; gap: 12px; }
.match-list li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; background: #fffaf0; border-radius: 14px; padding: 8px; border: 2px solid var(--sand-2); }
.match-list img { width: 96px; height: 72px; object-fit: cover; border-radius: 10px; }
.match-list .why { font-size: .85rem; color: var(--ink-2); }
.compare-table { width: 100%; border-collapse: collapse; font-size: .92rem; background: #fffaf0; }
.compare-table th, .compare-table td { border-bottom: 1px solid var(--sand-2); padding: 8px 10px; text-align: left; vertical-align: top; }
.compare-table thead th { background: var(--moss); font-family: var(--zoo-display); }
.compare-table img { width: 100%; max-width: 160px; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; display: block; }
.table-scroll { overflow-x: auto; }

/* Footer: the tortoise's lawn */
.site-footer { position: relative; background: var(--jungle); color: #dfe9cf; }
.site-footer a, .site-footer .muted, .site-footer .footer-h { color: #dfe9cf; }
.site-footer .footer-h { color: var(--sun); font-family: var(--zoo-display); }
.footer-grid { grid-template-columns: 1.2fr 1.4fr 1fr 1fr; }
.footer-species { columns: 2; column-gap: 16px; }
.footer-species a { display: block; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* Kiosk-style tool cards */
.kiosks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.kiosk { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: var(--ink); background: #fffaf0; border-radius: 18px; padding: 16px; border: 2px solid var(--sand-2); box-shadow: 0 4px 0 var(--sand-2); }
.kiosk:hover { border-color: var(--leaf); box-shadow: 0 4px 0 var(--leaf); color: var(--ink); }
.kiosk .k-ico { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--leaf); color: #fff; display: grid; place-items: center; font-size: 1.4rem; }
.kiosk b { display: block; font-family: var(--zoo-display); font-size: 1.08rem; }
.kiosk span { font-size: .85rem; color: var(--ink-2); }

.credits-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.credits-table td, .credits-table th { padding: 8px; border-bottom: 1px solid var(--sand-2); text-align: left; vertical-align: middle; }
.credits-table img { width: 80px; height: 60px; object-fit: cover; border-radius: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.site-footer .fine, .site-footer .fine p, .site-footer .fine a, .site-footer .fine .linkish { color: #b9caa3; }
.btn-ghost { background: transparent; color: var(--leaf) !important; box-shadow: inset 0 0 0 2px var(--leaf); }
.btn-ghost:hover { background: var(--moss); }
.tool-form fieldset label { display: flex; align-items: center; gap: 8px; font-weight: 500; margin: 4px 0; }
.tool-form fieldset label input { width: auto; margin: 0; }
.site-footer { margin-top: 0; }
@media (max-width: 640px) {
  .site-header .nav { gap: 12px; }
  .site-header .nav a[href="/habitats/"] { display: inline; font-size: .9rem; }
  .site-header .nav .btn { white-space: nowrap; }
  .brand small { display: none; }
}

/* ---------- Habitat journey (_includes/journey.html, assets/js/journey.js) ----------
   A sticky stage holds the habitat background, the roaming reptiles and the climate gauges;
   the step cards scroll over it. */
.journey { position: relative; padding: 0; --hc: var(--leaf); overflow: clip; } /* clip: the sticky stage must not ride over the sections below */
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; overflow: hidden; z-index: 0; background: #2a2a1e; }
.scene { position: absolute; inset: 0; background: #1d1a12 center / cover no-repeat; opacity: 0; transition: opacity 1.1s ease; }
.scene.on { opacity: 1; z-index: 1; }
.scene-species { background-position: 62% center; }
.scene video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  /* A slow camera push on still photos, so a real animal fills the screen without anything fake moving. */
  .scene.on:not(:has(video)) { animation: push 18s ease-out both; }
  @keyframes push { from { transform: scale(1.0); } to { transform: scale(1.08); } }
}
.scene-credit { position: absolute; left: 12px; bottom: 6px; margin: 0; font-size: .68rem; color: rgba(255,255,255,.85); text-shadow: 0 1px 3px rgba(0,0,0,.8); z-index: 2; }
.scene-credit a { color: inherit; }
.stage-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(10,10,6,.5) 0%, rgba(10,10,6,.15) 42%, transparent 65%), linear-gradient(0deg, rgba(10,10,6,.35), transparent 28%); }
.hud { position: absolute; z-index: 4; right: max(16px, calc((100vw - 1200px) / 2)); top: 96px; width: 290px; padding: 14px 16px 12px; border-radius: 18px; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid rgba(255,255,255,.35); box-shadow: 0 10px 30px rgba(0,0,0,.22); border-top: 4px solid var(--hc); transition: border-color .6s; }
.hud p { margin: 0; }
.hud-where span { display: block; font: 600 .74rem var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.hud-where b { display: block; font: 650 1.2rem var(--zoo-display); color: var(--ink); margin-bottom: 8px; }
.hud-gauge { margin-top: 8px; }
.hg-label { font: 600 .8rem var(--font); color: var(--ink-2); }
.hg-track { position: relative; height: 12px; margin: 5px 0 4px; border-radius: 999px; background: linear-gradient(90deg, #dfe9ef, #f1e6c9 45%, #f3c9a8); overflow: hidden; }
.hud-gauge[data-gauge="hum"] .hg-track { background: linear-gradient(90deg, #f1e6c9, #cfe3ef 60%, #a9cde6); }
.hg-track i { position: absolute; top: 0; bottom: 0; border-radius: 999px; transition: left .6s ease, width .6s ease, opacity .4s; }
.hg-cool { background: #3d86c6; }
.hg-hot { background: #e0522f; }
.hg-hum { background: #2a7fb8; }
.hg-read { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; color: var(--ink-2); }
.hg-read b { color: var(--ink); white-space: nowrap; }
.t-cool b { color: #2c6ea8; } .t-hot b { color: #c2412d; }
.t-cool, .t-hot { display: flex; flex-direction: column; } .t-hot { text-align: right; }
.hud-note { margin-top: 8px !important; font-size: .7rem; color: var(--ink-2); }

.rail { position: absolute; z-index: 4; right: max(16px, calc((100vw - 1200px) / 2)); bottom: 22px; display: flex; gap: 8px; }
.rail a { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid rgba(255,255,255,.35); color: var(--ink); font: 600 .82rem var(--font); text-decoration: none; transition: background .3s, color .3s; }
.rail a i { width: 10px; height: 10px; border-radius: 50%; background: var(--hc); }
.rail a.on { background: var(--hc); color: #fff; }
.rail a.on i { background: #fff; }
.scroll-cue { position: absolute; z-index: 4; left: 50%; bottom: 22px; transform: translateX(-50%); margin: 0; color: #fff; font: 600 .9rem var(--font); text-shadow: 0 2px 6px rgba(0,0,0,.5); transition: opacity .4s; }
.stage.moved .scroll-cue { opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .scroll-cue { animation: bob 1.6s ease-in-out infinite; } @keyframes bob { 50% { transform: translate(-50%, 6px); } } }

.steps { position: relative; z-index: 2; pointer-events: none; }
.step { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 96px 0 72px; scroll-margin-top: 0; }
.step .jcard { pointer-events: auto; width: min(500px, 44vw); margin-left: max(16px, calc((100vw - 1200px) / 2)); padding: 22px 24px; border-radius: 22px; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid rgba(255,255,255,.35); box-shadow: 0 18px 40px rgba(0,0,0,.25); border-top: 5px solid var(--hc); opacity: .55; transform: translateY(16px) scale(.98); transition: opacity .5s, transform .5s; }
.step.active .jcard { opacity: 1; transform: none; }
.step .jcard h3 { margin: 1rem 0 .2rem; }
.step .kicker { margin: 0 0 4px; font: 600 .74rem var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--hc); }
.step .sign { margin: 0 0 .2rem; }
.step .tagline { font: 600 1.1rem var(--zoo-display); color: var(--ink-2); margin: 0 0 .6rem; }
.step .actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.jcard-species { padding: 0 !important; overflow: hidden; }
.card-photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; }
.card-body { padding: 16px 22px 20px; }
.card-title { font-size: 1.6rem; margin: 0 0 .4rem !important; }
.card-title i { display: block; font: italic 400 .9rem var(--font); color: var(--ink-2); }
.card-body > p { font-size: .95rem; }
.mini { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 10px 0; font-size: .86rem; }
.mini dt { font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.mini dd { margin: 0; }
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 4px; }
.chain .link { background: color-mix(in srgb, var(--hc) 16%, #fff); border: 2px solid color-mix(in srgb, var(--hc) 45%, #fff); border-radius: 999px; padding: 3px 10px; font-size: .82rem; font-weight: 600; }
.chain .arrow { font-weight: 700; color: var(--hc); }
.chain b { background: var(--hc); color: #fff; border-radius: 999px; padding: 4px 12px; font-size: .85rem; }

/* Food web: foods on the left, residents on the right, curves between. */
.foodweb { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 0; align-items: center; margin-top: 8px; }
.foodweb ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; position: relative; z-index: 1; }
.fw-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fw-lines path { fill: none; stroke: color-mix(in srgb, var(--hc) 55%, #bbb); stroke-width: 1.6; opacity: .55; transition: opacity .25s, stroke-width .25s; }
.foodweb.focus path { opacity: .12; }
.foodweb.focus path.on { opacity: 1; stroke-width: 3; stroke: var(--hc); }
.fw-food button { font: 600 .8rem var(--font); padding: 5px 10px; border-radius: 10px; border: 2px solid color-mix(in srgb, var(--hc) 50%, #fff); background: #fff; color: var(--ink); cursor: pointer; text-align: left; }
.fw-food button.on { background: var(--hc); color: #fff; border-color: var(--hc); }
.fw-eaters { align-items: flex-end; grid-column: 3; }
.fw-food { grid-column: 1; }
.fw-eaters a { display: inline-block; font: 600 .8rem var(--font); padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--hc) 14%, #fff); color: var(--ink); text-decoration: none; transition: background .2s; }
.foodweb.focus .fw-eaters a { opacity: .45; }
.foodweb.focus .fw-eaters a.on { opacity: 1; background: var(--hc); color: #fff; }

@media (max-width: 859px) {
  .hud { left: 12px; right: 12px; top: 74px; width: auto; padding: 10px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .hud-where { grid-column: 1 / -1; }
  .hud-where b { font-size: 1.05rem; margin-bottom: 2px; }
  .hud-note { display: none; }
  .hud-gauge { margin-top: 4px; }
  .hg-read { font-size: .72rem; }
  .rail { left: 12px; right: auto; bottom: auto; top: 205px; }
  .rail a span { display: none; } .rail a { padding: 7px; }
  .scroll-cue { bottom: 14px; }
  .step { align-items: flex-end; padding: 60vh 0 24px; padding: 60svh 0 24px; }
  .step .jcard { width: auto; margin: 0 12px; padding: 18px; }
  .card-photo { aspect-ratio: 16 / 6; }
  .card-body { padding: 14px 16px 16px; }
  .step-habitat .jcard > p:not(.kicker):not(.tagline):not(.actions) { font-size: .92rem; }
}

/* Species pages: the exhibit sits in its habitat. */
.habitat-card { padding-top: 0; overflow: hidden; }
.habitat-card img { display: block; width: calc(100% + 40px); max-width: none; height: auto; margin: 0 -20px 4px; aspect-ratio: 16 / 8; object-fit: cover; }
.habitat-section .habitat-banner { position: relative; padding: 28px 26px; margin-bottom: 22px; border-radius: 22px; color: #fff; background: linear-gradient(90deg, rgba(20,16,8,.72), rgba(20,16,8,.2)), var(--himg) center / cover; }
.habitat-section .habitat-banner .sign { margin-top: 0; }
.habitat-section .habitat-banner p { color: #fff; max-width: 60ch; }
.journey-h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.08; margin: 0 0 .6rem; }
.step-welcome .lead { font-size: 1.05rem; }
.step-welcome .crumbs a { color: var(--ink-2); }
/* Species pages: a full-bleed real photo or video of the animal. */
.exhibit-real { min-height: min(78vh, 720px); display: flex; align-items: flex-end; background: #14120c; }
.exhibit-real .exhibit-scene { position: absolute; inset: 0; background: center / cover no-repeat; }
.exhibit-real .exhibit-scene video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.exhibit-real::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(10,10,6,.82) 0%, rgba(10,10,6,.35) 38%, transparent 62%), linear-gradient(90deg, rgba(10,10,6,.45), transparent 55%); }
.exhibit-real .wrap { grid-template-columns: 1fr; padding: 48px 0 40px; }
.exhibit-real h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); text-shadow: 0 2px 16px rgba(0,0,0,.4); }
.exhibit-real .scene-credit { z-index: 2; left: auto; right: 12px; }
/* Phones: keep the animal in view. A slim climate strip on top, cards start low. */
@media (max-width: 859px) {
  .hud { top: 74px; padding: 8px 12px; grid-template-columns: auto auto; }
  .hud .hg-track, .hud .hg-label { display: none; }
  .hud-where span { display: none; }
  .hud-where b { font-size: .95rem; margin: 0; }
  .hg-read { font-size: .74rem; }
  .rail { top: auto; bottom: 14px; left: auto; right: 12px; }
  .step { padding-top: 74vh; padding-top: 74svh; }
  .scene-species { background-position: center; }
}

/* One glass look for everything that floats over a photo: header, cards, gauges, chips. */
:root { --glass: rgba(255,250,240,.72); --glass-blur: blur(16px) saturate(1.35); }
/* Pages that open on a full-bleed photo slide it under the see-through header. */
main:has(> .journey:first-child), main:has(> script:first-child + .journey) { margin-top: -64px; }
main:has(> .exhibit-head) { margin-top: -64px; }
.exhibit-real .wrap { padding-top: 104px; }
.step-welcome { padding-top: 120px; }
.step .jcard .btn-ghost { background: rgba(255,255,255,.45); }

/* ---------- Below the stage: the same photo and glass all the way down ----------
   The page photo (set per page in default.html as --page-bg) stays fixed behind everything, dimmed
   and softened; headings sit on it in white, and every card, sheet and panel is the same frosted
   glass as the climate panel and the habitat cards above. */
body { background: #13170f; color: var(--ink); }
body::before { content: ""; position: fixed; inset: -24px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(12,15,9,.55), rgba(12,15,9,.78)), var(--page-bg, none) center / cover no-repeat, #13170f;
  filter: blur(6px) saturate(1.1); }
:root { --glass-strong: rgba(255,250,240,.86); --glass-line: rgba(255,255,255,.4); --glass-shadow: 0 14px 36px rgba(0,0,0,.28); }

/* Page titles on the photo */
.page-head, .guide-head { background: transparent; padding: 56px 0 28px; }
.page-head h1, .guide-head h1 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.page-head .lead, .page-head p, .guide-head p { color: rgba(255,255,255,.82); }
.page-head .crumbs, .page-head .crumbs a, .guide-head .crumbs, .guide-head .crumbs a,
.guide-head .page-updated, .guide-head .page-updated * { color: rgba(255,255,255,.75) !important; }

/* Reading pages: the text sits on one frosted sheet over the photo. */
main > .narrow, main > article.narrow, .guide > .narrow.prose {
  background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line); border-radius: 26px; box-shadow: var(--glass-shadow);
  padding: 30px 34px 34px; margin-bottom: 64px; }
main > .exhibit-head + article.narrow { margin-top: 36px; }
main > .narrow > h2:first-child, main > article.narrow > :first-child { margin-top: 0; }
@media (max-width: 640px) {
  main > .narrow, main > article.narrow, .guide > .narrow.prose { width: calc(100% - 16px); padding: 20px 18px 24px; border-radius: 20px; }
}
.prose th, .care-table th { background: rgba(63,122,58,.12); }
.answer { background: rgba(255,255,255,.6); border-left-color: var(--zc, var(--leaf)); }
.faq details, .species-card, .match-list li, .kiosk-plain { background: rgba(255,255,255,.62); border: 1px solid rgba(90,70,30,.12); }
.placard { background: rgba(255,255,255,.55); border: 1px solid rgba(90,70,30,.14); }
.placard div { border-color: rgba(90,70,30,.12); }
.gear { background: rgba(63,122,58,.1); }
.gallery figure { border: 0; border-radius: 18px; box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.gallery figcaption { background: rgba(255,255,255,.7); }
.compare-table { background: transparent; }
.compare-table thead th { background: rgba(63,122,58,.14); }

/* Cards that sit straight on the photo */
.resident, .zone-card, .kiosk, .habitat-section .zone-card {
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); }
.resident:hover, .kiosk:hover, .zone-card:hover { box-shadow: 0 20px 44px rgba(0,0,0,.36); }
.resident .window { border-bottom: 4px solid var(--zc, var(--leaf)); background: #1d1a12; }
.resident .facts span { background: rgba(255,255,255,.62); }
.zone-card { border-top: 5px solid var(--zc, var(--leaf)); }
.zone-card:hover { transform: translateY(-3px); }
.zone-card li { background: rgba(255,255,255,.62); }
.kiosk { border-radius: 18px; }
.kiosk:hover { border-color: var(--glass-line); box-shadow: 0 0 0 2px var(--sun), var(--glass-shadow); }
.kiosk .k-ico { background: rgba(63,122,58,.9); }
.chip { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-color: var(--glass-line); }
.chip[aria-pressed="true"] { background: var(--leaf); border-color: var(--leaf); }
.zone-section > p, .habitat-section > p, main > .wrap > p, main > .wrap > h2:not(.sign) { color: rgba(255,255,255,.82); }
.habitat-section .habitat-banner { border: 1px solid rgba(255,255,255,.18); box-shadow: var(--glass-shadow); }

/* The app panel: dark glass, like the header. */
.app-cta { background: rgba(16,26,14,.6); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid rgba(255,255,255,.16); box-shadow: var(--glass-shadow); }
.app-cta p { color: rgba(255,255,255,.85); }
#app.section { padding: 24px 0 72px; }

/* Footer: dark glass over the same photo. */
.site-footer { background: rgba(10,14,8,.66); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-top: 1px solid rgba(255,255,255,.12); }

/* ---------- Editorial look (after the chameleon and "Reptiles World" references Max shared) ----------
   One strong accent, bold uppercase titles paired with a light line, numbered stops, a slide counter
   and a "next" bar on the stage, faint grid lines over the photo, and tall numbered photo tiles. */
:root { --accent: #e4572e; --accent-2: #ff8a5c; --sun: #ff8a5c; }
h1, h2, h3, .brand { font-family: var(--zoo-display); }
.sign, .journey-h1, .card-title, .exhibit-real h1, .page-head h1, .guide-head h1, .app-cta h2 { text-transform: uppercase; font-weight: 800; letter-spacing: -.01em; line-height: 1.02; }
.journey-h1 .thin, .sign .thin { display: block; font-weight: 300; text-transform: none; letter-spacing: 0; font-size: .62em; line-height: 1.2; margin-bottom: .15em; }
.exhibit-real h1 { font-weight: 900; font-size: clamp(2.6rem, 8vw, 6rem); letter-spacing: -.02em; }
.card-title i { text-transform: none; }

/* Buttons: one accent, squared, spaced capitals */
.btn { background: var(--accent); border-radius: 4px; box-shadow: none; text-transform: uppercase; letter-spacing: .08em; font: 700 .82rem var(--zoo-display); padding: 13px 22px; }
.btn:hover { background: #c8451f; }
.btn-ghost, .step .jcard .btn-ghost { background: transparent; color: var(--ink) !important; box-shadow: inset 0 0 0 2px currentColor; }
.btn-ghost:hover { background: rgba(255,255,255,.35); }
.btn-light { background: var(--accent); color: #fff !important; box-shadow: none; }
.btn-light:hover { background: #c8451f; }
.btn-small { padding: 9px 16px; font-size: .74rem; }

/* Header: spaced capitals, a short accent line under the current section */
.site-header .nav a:not(.btn) { position: relative; font: 600 .74rem var(--zoo-display); text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.82); padding: 6px 0; }
.site-header .nav a:not(.btn):hover, .site-header .nav a[aria-current] { color: #fff; }
.site-header .nav a[aria-current]::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 22px; height: 3px; border-radius: 2px; background: var(--accent); }
.site-header .nav .btn { background: var(--accent); color: #fff !important; }
.brand small { color: var(--accent-2); }

/* Stage: faint column lines over the photo, a counter on the right, a next-stop bar at the bottom */
.stage::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent calc(25% - .5px), rgba(255,255,255,.09) 25%, transparent calc(25% + .5px), transparent calc(50% - .5px), rgba(255,255,255,.09) 50%, transparent calc(50% + .5px), transparent calc(75% - .5px), rgba(255,255,255,.09) 75%, transparent calc(75% + .5px)); }
.counter { position: absolute; z-index: 4; right: 18px; top: 50%; transform: translateY(-38%); display: flex; flex-direction: column; align-items: center; gap: 10px; color: #fff; font: 300 1.5rem/1 var(--zoo-display); text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.counter b { font-weight: 300; }
.counter span[data-count-all] { font-size: 1rem; opacity: .7; }
.ct-track { position: relative; width: 3px; height: 30vh; border-radius: 3px; background: rgba(255,255,255,.25); overflow: hidden; }
.ct-track i { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--accent); transition: height .6s ease; }
.hud { right: max(56px, calc((100vw - 1200px) / 2)); }
.rail { right: calc(max(56px, calc((100vw - 1200px) / 2)) + 290px); bottom: 26px; }
.next-bar { position: absolute; z-index: 4; right: max(56px, calc((100vw - 1200px) / 2)); bottom: 0; width: 272px; display: flex; align-items: center; gap: 10px; padding: 18px 20px; border: 0; border-radius: 0; background: var(--accent); color: #fff; font: 700 .82rem var(--zoo-display); text-transform: uppercase; letter-spacing: .1em; text-align: left; cursor: pointer; }
.next-bar small { font: 500 .66rem var(--zoo-display); letter-spacing: .14em; opacity: .8; }
.next-bar span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.next-bar:hover { background: #c8451f; }
@media (prefers-reduced-motion: no-preference) { .next-bar svg { animation: nudge 1.8s ease-in-out infinite; } @keyframes nudge { 50% { transform: translateY(3px); } } }
.next-bar[hidden] { display: none; }
.scroll-cue { left: 25%; }
@media (max-width: 859px) {
  .counter, .next-bar { display: none; }
  .stage::after { background: linear-gradient(90deg, transparent calc(50% - .5px), rgba(255,255,255,.08) 50%, transparent calc(50% + .5px)); }
  .hud { right: 12px; }
  .rail { right: 12px; bottom: 14px; }
  .scroll-cue { left: 50%; }
}

/* Section headings: a numbered eyebrow line, like "— 01 About" */
main { counter-reset: sec; }
.band .sign { counter-increment: sec; }
.band .sign::before { content: counter(sec, decimal-leading-zero) "  —"; width: auto; height: auto; margin-bottom: 10px; background: none; color: var(--accent-2); font: 600 .78rem var(--zoo-display); letter-spacing: .2em; }

/* Stats row (home) */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0 0 56px; border-top: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
.stats div { padding: 22px 8px 20px; }
.stats div + div { border-left: 1px solid rgba(255,255,255,.18); padding-left: 22px; }
.stats dt { order: 2; font: 600 .7rem var(--zoo-display); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.stats dd { margin: 0 0 4px; font: 300 clamp(2.4rem, 5vw, 3.6rem)/1 var(--zoo-display); color: #9fd67e; }
.stats div { display: flex; flex-direction: column-reverse; }
@media (max-width: 640px) { .stats { grid-template-columns: 1fr 1fr; } .stats div:nth-child(3) { border-left: 0; padding-left: 8px; } .stats div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.18); } }

/* Residents: tall numbered photo tiles */
.residents { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.resident { position: relative; aspect-ratio: 3 / 4; border-radius: 6px; background: #1d1a12 !important; border: 0 !important; box-shadow: 0 10px 28px rgba(0,0,0,.35); -webkit-backdrop-filter: none; backdrop-filter: none; color: #fff; }
.resident:hover { color: #fff; transform: translateY(-4px); }
.resident .window { position: absolute; inset: 0; aspect-ratio: auto; border: 0; }
.resident .window::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,10,6,.92) 0%, rgba(8,10,6,.5) 36%, transparent 62%); }
.resident .zone-tag { z-index: 1; font: 600 .62rem var(--zoo-display); letter-spacing: .1em; text-transform: uppercase; border-radius: 3px; }
.resident .level { z-index: 1; font: 600 .62rem var(--zoo-display); letter-spacing: .08em; text-transform: uppercase; border-radius: 3px; background: rgba(255,255,255,.88); }
.resident .plaque { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 14px 14px 14px; }
.resident .num { display: block; font: 300 1.5rem/1 var(--zoo-display); color: var(--accent-2); margin-bottom: 6px; }
.resident .plaque b { font: 800 1.05rem/1.1 var(--zoo-display); text-transform: uppercase; color: #fff; }
.resident .plaque i { color: rgba(255,255,255,.72); margin: 3px 0 8px; }
.resident .facts { gap: 4px 8px; font-size: .72rem; color: rgba(255,255,255,.85); }
.resident .facts span { background: none !important; padding: 0; border-radius: 0; }
.resident .facts span + span::before { content: "·"; margin-right: 8px; opacity: .6; }
.resident .facts span:nth-child(3) { flex-basis: 100%; }
.resident .facts span:nth-child(3)::before { content: none; }

/* Habitat map tiles: photo on top, title in capitals */
.zone-card { border-radius: 6px; }
.zone-card h3 { font: 800 1.2rem var(--zoo-display); text-transform: uppercase; }
.kiosk, .faq details, .placard { border-radius: 8px; }
.kiosk b { font-weight: 700; }
.kiosk .k-ico { border-radius: 4px; background: var(--accent); }
.resident .window::after { background: linear-gradient(0deg, rgba(8,10,6,.96) 0%, rgba(8,10,6,.78) 34%, rgba(8,10,6,.25) 58%, transparent 72%); }
.resident .plaque { text-shadow: 0 1px 3px rgba(0,0,0,.6); }
@media (max-width: 640px) { .residents { grid-template-columns: 1fr 1fr; gap: 10px; } .resident .plaque { padding: 10px; } .resident .plaque b { font-size: .9rem; } .resident .facts span:nth-child(n+2) { display: none; } }
.resident .facts span { color: rgba(255,255,255,.88); }
.resident .num { font-weight: 500; }
@media (max-width: 640px) { .resident .level { display: none; } }

/* Phones (Max, 2026-11-09: habitat pages too narrow in places) */
.step .jcard.cut { -webkit-mask-image: linear-gradient(180deg, transparent var(--cut), #000 calc(var(--cut) + 36px)); mask-image: linear-gradient(180deg, transparent var(--cut), #000 calc(var(--cut) + 36px)); }
@media (max-width: 859px) {
  /* One fact per row: label on the left, value with its source on the right */
  .mini { grid-template-columns: 1fr; gap: 0; margin: 12px 0; border-top: 1px solid rgba(60,50,30,.12); }
  .mini > div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid rgba(60,50,30,.12); }
  .mini dt { font-size: .66rem; }
  /* Climate strip: name on top, the three readings in one row that never overflows */
  .hud { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 10px; }
  .hud-gauge { min-width: 0; }
  .hg-read { min-width: 0; flex-wrap: wrap; gap: 0 8px; }
  .hg-read b { white-space: normal; overflow-wrap: anywhere; }
  .t-hot { text-align: left; }
  .hud-gauge[data-gauge="hum"] .hg-read b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .step .jcard { margin: 0 10px; }
  .card-title { font-size: 1.45rem; }
  .foodweb { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); }
  .fw-food button, .fw-eaters a { font-size: .74rem; }
}
@media (max-width: 859px) {
  .hud-gauge[data-gauge="hum"] .hg-read { flex-direction: column; }
  .hud-gauge[data-gauge="hum"] .hg-read::before { content: "Humidity"; font-size: .74rem; color: var(--ink-2); }
}
/* Small phones: the header must fit in one row */
@media (max-width: 420px) {
  .header-row { gap: 8px; }
  .brand { font-size: 1rem; gap: 6px; }
  .brand svg { width: 26px; height: 26px; }
  .site-header .nav { gap: 10px; }
  .site-header .nav a:not(.btn) { letter-spacing: .08em; font-size: .68rem; }
  .site-header .nav .btn { padding: 8px 11px; font-size: .66rem; letter-spacing: .06em; }
}
@media (max-width: 359px) { .site-header .nav a[href="/habitats/"] { display: none; } }
/* Footer on phones: brand and the 18 residents get the full width (two name columns), tools and about share a row */
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer-grid > div:nth-child(1), .footer-grid > div:nth-child(2) { grid-column: 1 / -1; }
  .footer-species a { padding: 3px 0; }
}