/* ==========================================================================
   Tomahawk v2 — Coastal Mist design system
   Mobile-first. Brand anchors: navy #00005b, gold #916700 (from the logo).
   ========================================================================== */

:root {
    /* Brand */
    --brand-navy: #00005b;
    --brand-gold: #916700;
    --black: #000000;

    /* Ink (text) */
    --ink: #1e2f3c;
    --ink-soft: #52697a;
    --ink-faint: #8299a8;

    /* Coastal mist surfaces */
    --mist-50: #f6f9fa;
    --mist-100: #edf2f5;
    --mist-200: #dfe8ed;
    --surface: #ffffff;

    /* Ocean blues */
    --ocean-700: #2c516b;
    --ocean-600: #3d6b8a;
    --ocean-500: #55869f;
    --ocean-300: #a9c4d2;
    --ocean-100: #e2ecf1;

    /* Sand + seafoam accents */
    --sand-100: #f4efe4;
    --sand-300: #e3d7bd;
    --sand-500: #c9b184;
    --seafoam-100: #e4eeea;
    --seafoam-500: #7fa596;

    /* Shape + depth */
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --radius-pill: 999px;
    /* Stacking order. Leaflet claims 400-1000 for its own panes and controls,
       so anything of ours that has to sit over a map starts above that. */
    --z-progress: 1050;
    --z-to-top: 1060;
    --z-nav: 1100;
    --z-lightbox: 1300;
    --z-skip: 1400;

    --shadow-soft: 0 6px 24px rgba(30, 47, 60, 0.08);
    --shadow-lift: 0 14px 40px rgba(30, 47, 60, 0.14);

    --font-sans: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

    --container: 1180px;
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink);
    background: var(--mist-100);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--ocean-600); text-decoration: none; font-weight: bold; }
a:hover { color: var(--ocean-700); }

h1, h2, h3, h4 {
    margin: 0 0 0.5em;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
}

p { margin: 0 0 1em; }

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

section { padding-block: 3.5rem; }

/* Eyebrow + section headings */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ocean-700);
    margin-bottom: 0.75rem;
}
.eyebrow::before {
    content: '';
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--brand-gold);
}

.section-head { margin-bottom: 2rem; }
.section-head h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); }
.section-head .lede { color: var(--ink-soft); max-width: 46rem; }

/* --------------------------------------------------------------------------
   Buttons + badges
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.78rem 1.6rem;
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
    background: var(--ocean-600);
    color: #fff;
    box-shadow: var(--shadow-soft);
}
.btn-primary:hover { background: var(--ocean-700); color: #fff; box-shadow: var(--shadow-lift); }

.btn-ghost {
    background: rgba(255, 255, 255, 0.85);
    border-color: var(--mist-200);
    color: var(--ink);
}
.btn-ghost:hover { background: #fff; color: var(--ocean-700); }

.badge {
    display: inline-block;
    padding: 0.28rem 0.85rem;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--ocean-100);
    color: var(--ocean-700);
}
/* Location-type accents (mapped from legacy bootstrap codes) */
.badge--primary   { background: var(--ocean-100);    color: var(--ocean-700); }   /* dining */
.badge--dark      { background: #e3e1f0;             color: var(--brand-navy); }  /* sports */
.badge--success   { background: var(--seafoam-100);  color: #3f7059; }            /* landmarks */
.badge--light     { background: var(--mist-200);     color: var(--ink-soft); }    /* fishing */
.badge--info      { background: #e0eff5;             color: #2e7793; }            /* townships */
.badge--secondary { background: var(--sand-100);     color: var(--brand-gold); }  /* accommodation */
.badge--warning   { background: #f6ecd9;             color: #8a6210; }            /* parks */

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    background: transparent;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}
.site-nav.is-scrolled {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadow-soft);
}

.site-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.6rem;
}

.site-nav__brand { display: inline-flex; }
.site-nav__brand img { height: 46px; width: auto; }

/* White logo on the transparent overlay nav, colour once the bar gains its background */
.site-nav__brand-white { display: none; }
.site-nav--overlay:not(.is-scrolled) .site-nav__brand-white { display: block; }
.site-nav--overlay:not(.is-scrolled) .site-nav__brand-colour { display: none; }

/* Overlay variant: white links floating on the hero image until scrolled */
.site-nav--overlay:not(.is-scrolled) .site-nav__menu > li > a,
.site-nav--overlay:not(.is-scrolled) .site-nav__group > span {
    color: #fff;
    text-shadow: 0 1px 12px rgba(20, 34, 46, 0.45);
}
@media (min-width: 992px) {
    .site-nav--overlay:not(.is-scrolled) .site-nav__menu > li > a:hover,
    .site-nav--overlay:not(.is-scrolled) .site-nav__menu > li > a[aria-current="page"],
    .site-nav--overlay:not(.is-scrolled) .site-nav__group:hover > span {
        background: rgba(255, 255, 255, 0.18);
        color: #fff;
    }
    .site-nav--overlay:not(.is-scrolled) .site-nav__group > span::after {
        border-color: rgba(255, 255, 255, 0.8);
    }
}

/* The mobile menu is a light panel, even while the nav overlays a hero. */
@media (max-width: 991px) {
    .site-nav--overlay:not(.is-scrolled) .site-nav__menu > li > a {
        color: var(--ink);
        text-shadow: none;
    }
    .site-nav--overlay:not(.is-scrolled) .site-nav__menu > li > a[aria-current="page"] {
        color: var(--ocean-700);
    }
    .site-nav--overlay:not(.is-scrolled) .site-nav__group > span {
        color: var(--ink-faint);
        text-shadow: none;
    }
}

.site-nav__toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--mist-100);
    cursor: pointer;
}
.site-nav__toggle span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.site-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav__menu {
    display: none;
    list-style: none;
    margin: 0 0 0.9rem;
    padding: 0.6rem;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lift);
}
.site-nav__menu.is-open { display: block; }

.site-nav__toggle {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.site-nav__menu a {
    display: block;
    padding: 0.65rem 0.75rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    color: var(--ink);
}
.site-nav__menu a:hover,
.site-nav__menu a[aria-current="page"] { background: var(--mist-100); color: var(--ocean-700); }

.site-nav__group > span {
    display: block;
    padding: 0.85rem 0.75rem 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.site-nav__sub { list-style: none; margin: 0; padding: 0; }

@media (min-width: 992px) {
    .site-nav__toggle { display: none; }

    .site-nav__menu {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        margin: 0;
        padding: 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-radius: 0;
        box-shadow: none;
    }
    .site-nav__menu a { padding: 0.55rem 0.9rem; }

    .site-nav__group { position: relative; }
    .site-nav__group > span {
        padding: 0.55rem 0.9rem;
        font-size: inherit;
        font-weight: 600;
        letter-spacing: normal;
        text-transform: none;
        color: var(--ink);
        border-radius: var(--radius-sm);
        cursor: default;
    }
    .site-nav__group > span::after {
        content: '';
        display: inline-block;
        margin-left: 0.45rem;
        width: 7px;
        height: 7px;
        border-right: 2px solid var(--ink-faint);
        border-bottom: 2px solid var(--ink-faint);
        transform: rotate(45deg) translateY(-2px);
    }
    .site-nav__group:hover > span { background: var(--mist-100); }

    /* Section we're currently inside */
    .site-nav__group.is-section > span { color: var(--ocean-700); }
    .site-nav__group.is-section > span::after { border-color: var(--ocean-600); }
    .site-nav--overlay:not(.is-scrolled) .site-nav__group.is-section > span {
        background: rgba(255, 255, 255, 0.18);
    }

    .site-nav__sub {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        min-width: 200px;
        padding: 0.5rem;
        background: #fff;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lift);
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    }
    .site-nav__group:hover .site-nav__sub,
    .site-nav__group:focus-within .site-nav__sub {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    background-size: cover;
    background-position: center 30%;
}

/* Gentle scrim for text legibility, strongest lower-left where the copy sits */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(105deg, rgba(20, 34, 46, 0.5) 0%, rgba(20, 34, 46, 0.18) 50%, rgba(20, 34, 46, 0.02) 75%),
        linear-gradient(to top, rgba(20, 34, 46, 0.25) 0%, transparent 40%);
}

/* One long mist dissolve — the photo simply becomes the page */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom,
        transparent 48%,
        rgba(237, 242, 245, 0.06) 60%,
        rgba(237, 242, 245, 0.22) 72%,
        rgba(237, 242, 245, 0.52) 84%,
        rgba(237, 242, 245, 0.85) 94%,
        var(--mist-100) 100%);
}

.hero__inner {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    padding-top: 6.5rem;
    padding-bottom: 2.5rem;
}

.hero__content {
    margin-block: auto;
    color: #fff;
    max-width: 640px;
    padding-block: 2rem;
}
.hero__content h1 {
    color: #fff;
    font-size: clamp(2.3rem, 7vw, 4.2rem);
    margin-bottom: 0.3em;
    text-shadow: 0 2px 28px rgba(20, 34, 46, 0.4);
}
.hero__content .tagline {
    font-size: clamp(1.05rem, 2.5vw, 1.35rem);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 16px rgba(20, 34, 46, 0.45);
    margin-bottom: 1.7rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Frosted feature tiles resting on the dissolving photo */
.hero__tiles {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(2, 1fr);
}

.hero-tile {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
    box-shadow: 0 8px 28px rgba(20, 34, 46, 0.1);
}
.hero-tile__icon { font-size: 1.35rem; margin-bottom: 0.35rem; }
.hero-tile__title { margin: 0 0 0.15rem; font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.hero-tile p { margin: 0; font-size: 0.8rem; line-height: 1.45; color: var(--ink-soft); }

/* Staggered entrance for hero content */
@keyframes hero-rise {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
}
.anim {
    opacity: 0;
    animation: hero-rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.anim-1 { animation-delay: 0.15s; }
.anim-2 { animation-delay: 0.35s; }
.anim-3 { animation-delay: 0.55s; }
.anim-4 { animation-delay: 0.8s; }
.anim-5 { animation-delay: 0.95s; }
.anim-6 { animation-delay: 1.1s; }
.anim-7 { animation-delay: 1.25s; }

@media (prefers-reduced-motion: reduce) {
    .anim { opacity: 1; animation: none; }
}

@media (min-width: 900px) {
    .hero__tiles { grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
    .hero-tile { padding: 1.25rem 1.4rem; }
}

/* Shorter hero for inner pages — still tall enough to showcase the photo */
.hero--page .hero__inner {
    min-height: min(72vh, 640px);
    padding-bottom: 3.5rem;
}
.hero--page .hero__content h1 { font-size: clamp(2rem, 5vw, 3.2rem); }

/* Inner-page photos carry more of the story, so hold the mist back further
   and centre the subject rather than favouring the sky */
.hero--page { background-position: center center; }
.hero--page::after {
    background: linear-gradient(to bottom,
        transparent 62%,
        rgba(237, 242, 245, 0.06) 72%,
        rgba(237, 242, 245, 0.24) 82%,
        rgba(237, 242, 245, 0.55) 91%,
        rgba(237, 242, 245, 0.86) 97%,
        var(--mist-100) 100%);
}

/* --------------------------------------------------------------------------
   Flora & fauna hub
   -------------------------------------------------------------------------- */
.species-search {
    display: flex;
    gap: 0.6rem;
    max-width: 540px;
    margin-top: 1.6rem;
}
.species-search input {
    flex: 1;
    min-width: 0;
    padding: 0.8rem 1.25rem;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.92);
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 6px 24px rgba(20, 34, 46, 0.18);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.species-search input:focus {
    outline: none;
    border-color: var(--ocean-500);
    box-shadow: 0 0 0 4px rgba(85, 134, 159, 0.25);
}
.species-search input::placeholder { color: var(--ink-faint); }

/* Category accent badges */
.badge--cat-sea-life   { background: var(--ocean-100);   color: var(--ocean-700); }
.badge--cat-plant-life { background: var(--seafoam-100); color: #3f7059; }
.badge--cat-wild-life  { background: var(--sand-100);    color: var(--brand-gold); }
.badge--cat-bird-life  { background: #e0eff5;            color: #2e7793; }
.badge--cat-bug-life   { background: #f6ecd9;            color: #8a6210; }

/* Species origin badges */
.badge--native     { background: var(--seafoam-100); color: #3f7059; }
.badge--endemic    { background: var(--sand-100);    color: var(--brand-gold); }
.badge--introduced { background: #f6e3da;            color: #a05a34; }

/* IUCN status chip (top-right of species cards) */
.iucn-chip {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 1;
    padding: 0.24rem 0.7rem;
    border-radius: var(--radius-pill);
    background: rgba(20, 34, 46, 0.55);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}

/* Breadcrumbs */
.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
}
.crumbs span { color: var(--ink-faint); }
.crumbs a { font-weight: 600; }
.crumbs em { font-style: normal; font-weight: 600; color: var(--black); }

/* Subcategory filter pills */
.filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}
.filter-pill {
    padding: 0.45rem 1.05rem;
    border-radius: var(--radius-pill);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-soft);
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.filter-pill small { color: var(--ink-faint); font-size: 0.75em; margin-left: 0.2rem; }
.filter-pill:hover { transform: translateY(-2px); color: var(--ocean-700); }
.filter-pill.is-active { background: var(--ocean-600); color: #fff; }
.filter-pill.is-active small { color: rgba(255, 255, 255, 0.75); }

.listing-count {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-faint);
    margin-bottom: 1.25rem;
}

/* Pagination */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    margin-top: 2.5rem;
}
.page-link {
    min-width: 42px;
    padding: 0.5rem 0.85rem;
    text-align: center;
    border-radius: var(--radius-pill);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ink-soft);
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.page-link:hover { transform: translateY(-2px); color: var(--ocean-700); }
.page-link.is-current { background: var(--ocean-600); color: #fff; }
.page-link--nav { padding-inline: 1.1rem; }
.page-gap { color: var(--ink-faint); padding-inline: 0.2rem; }

.cover-credit {
    font-size: 0.82rem;
    color: var(--ink-faint);
    margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   Species detail page
   -------------------------------------------------------------------------- */
body.no-hero { padding-top: 76px; }
body.no-hero .site-nav {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadow-soft);
}

.species-page { padding-top: 2rem; }

.species-layout { display: grid; gap: 2.5rem; }

.species-main { min-width: 0; }

.species-block {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem;
    box-shadow: var(--shadow-soft);
    margin-bottom: 1.5rem;
    color: var(--ink-soft);
}
.species-block h2 {
    font-size: 1.3rem;
    margin-bottom: 0.75rem;
    color: var(--ink);
}
.species-block__lede { font-weight: 600; color: var(--ink); }

/* Editor-formatted prose inside content blocks */
.species-block--prose > p:last-child { margin-bottom: 0; }
.species-block--prose h3,
.species-block--prose h4,
.species-block--prose h5 {
    color: var(--ink);
    margin: 1.4em 0 0.5em;
}
.species-block--prose h3 { font-size: 1.1rem; }
.species-block--prose h4 { font-size: 1rem; }
.species-block--prose h5 { font-size: 0.92rem; }
.species-block--prose ul,
.species-block--prose ol { padding-left: 1.3rem; margin: 0 0 1em; }
.species-block--prose li { margin-bottom: 0.35em; }
.species-block--prose blockquote {
    margin: 1em 0;
    padding: 0.75rem 1.2rem;
    border-left: 4px solid var(--ocean-300);
    background: var(--mist-50);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-style: italic;
}
.species-block--prose blockquote p:last-child { margin-bottom: 0; }
.species-block--prose hr {
    border: 0;
    border-top: 1px solid var(--mist-200);
    margin: 1.5em 0;
}
.species-block--prose dl { margin: 0 0 1em; }
.species-block--prose dt { font-weight: 700; color: var(--ink); margin-top: 0.6em; }
.species-block--prose dd { margin: 0 0 0.3em; }
.species-block--prose abbr { text-decoration: underline dotted; cursor: help; }
.species-note p:last-child { margin-bottom: 0; }

/* Notes / alerts */
.species-note {
    border-radius: var(--radius-md);
    padding: 1rem 1.3rem;
    margin-bottom: 1.25rem;
    font-size: 0.92rem;
    border-left: 4px solid var(--ocean-500);
    background: var(--ocean-100);
    color: var(--ocean-700);
}
.species-note p { margin: 0.25rem 0 0; }
.species-note--update  { border-color: var(--seafoam-500); background: var(--seafoam-100); color: #3f7059; }
.species-note--warning { border-color: #c9971f; background: #f6ecd9; color: #8a6210; }
.species-note--danger  { border-color: #c25d5d; background: #f9ecec; color: #8c3a3a; }

/* Gallery */
.species-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem;
    margin-top: 1rem;
}
.gallery-item {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.gallery-item:hover img { transform: scale(1.05); }
/* Scoped to the credit chip. As `.gallery-item span` this also matched the
   play badge and the no-photo placeholder — and being the more specific
   selector it overrode their position, colour and size, which is what pushed
   the play badge to the bottom-left corner. */
.gallery-item__credit {
    position: absolute;
    left: 0.6rem;
    bottom: 0.5rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-pill);
    background: rgba(20, 34, 46, 0.55);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    backdrop-filter: blur(6px);
}
@media (min-width: 700px) {
    .species-gallery { grid-template-columns: repeat(3, 1fr); }
}
/* Full-width page galleries get an extra column on large screens */
@media (min-width: 1100px) {
    .species-gallery--wide { grid-template-columns: repeat(4, 1fr); }
}

/* Audio */
.species-audio audio { width: 100%; }
.media-credit { font-size: 0.8rem; color: var(--ink-faint); margin: 0.5rem 0 0; }

.species-block__hint { font-size: 0.85rem; color: var(--ink-faint); margin-top: -0.4rem; }

/* Gallery tiles are buttons that open the lightbox */
.gallery-item {
    border: 0;
    padding: 0;
    background: var(--mist-200);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
.gallery-item--video::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(20, 34, 46, 0.25);
}
/* Centred with inset + auto margins rather than a 50% offset and a
   translate. The tile is a <button>, whose contents sit in an anonymous box,
   and percentage offsets against it are not reliable — the badge was landing
   half off the left edge. Auto margins resolve against the containing block
   directly, so this holds regardless. */
.gallery-item__play {
    position: absolute;
    inset: 0;
    margin: auto;
    z-index: 1;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    padding-left: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: var(--ocean-700);
    font-size: 1.15rem;
    box-shadow: var(--shadow-soft);
    transition: transform 0.2s ease;
}
.gallery-item--video:hover .gallery-item__play { transform: scale(1.12); }

/* Lightbox overlay */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.lightbox[hidden] { display: none; }
.lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 34, 46, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
/* The panel takes its width from the picture rather than the picture sitting
   inside a fixed-width panel — a portrait shot in a 920px frame left dark
   bars down both sides. A minimum keeps captions readable under narrow
   images, and the maximum keeps a wide one inside the viewport. */
.lightbox__panel {
    position: relative;
    z-index: 1;
    width: fit-content;
    min-width: min(340px, 92vw);
    max-width: min(1120px, 94vw);
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lift);
}

.lightbox__media {
    display: flex;
    background: transparent;
    min-height: 180px;
    align-items: center;
    justify-content: center;
}
.lightbox__media img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(1120px, 94vw);
    max-height: 74vh;
    animation: lb-in 0.28s ease both;
}
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }

/* Video has no natural width to hug, so it takes a comfortable one */
.lightbox__media--video { width: min(920px, 94vw); background: #10202c; }
.lightbox__media--video iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

/* The caption must not decide how wide the panel is. In a fit-content parent
   a long line of prose reports an enormous max-content width, which stretched
   the panel to its maximum and left the picture or video sitting in white.
   A zero width contributes nothing to that measurement; the minimum then
   fills whatever width the media settled on. */
.lightbox__details {
    width: 0;
    min-width: 100%;
    padding: 1rem 1.4rem 1.15rem;
    overflow-y: auto;
}
.lightbox__details h3 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.lightbox__details p { margin: 0 0 0.35rem; font-size: 0.88rem; color: var(--ink-soft); }
.lightbox__meta { font-size: 0.8rem !important; color: var(--ink-faint) !important; }

.lightbox__btn {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--ink);
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
    transition: transform 0.15s ease, background-color 0.15s ease;
}
.lightbox__btn:hover { transform: scale(1.08); background: #fff; }
.lightbox__close { top: 0.75rem; right: 0.75rem; }
/* Arrows track the middle of the image, which is no longer the middle of the
   panel now that the details block sits beneath a variable-height picture. */
.lightbox__nav { top: var(--lb-media-mid, 40%); transform: translateY(-50%); }
.lightbox__nav:hover { transform: translateY(-50%) scale(1.08); }
.lightbox__nav--prev { left: 0.75rem; }
.lightbox__nav--next { right: 0.75rem; }
.lightbox__nav[hidden] { display: none; }

/* Position in the set */
.lightbox__count {
    position: absolute;
    top: 0.95rem;
    left: 1rem;
    z-index: 2;
    padding: 0.2rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #fff;
    background: rgba(20, 34, 46, 0.55);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(6px);
}

@media (prefers-reduced-motion: reduce) {
    .lightbox__media img { animation: none; }
}

/* Sightings map */
.sightings-map {
    height: 380px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    z-index: 0;
}

/* Citations */
.species-cites {
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    padding: 1rem 1.3rem;
    font-size: 0.85rem;
    color: var(--ink-soft);
}
.species-cites summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--ink);
}
.species-cites ol { margin: 0.75rem 0 0; padding-left: 1.25rem; }
.species-cites li { margin-bottom: 0.4rem; overflow-wrap: anywhere; }
.species-cites small { color: var(--ink-faint); }

/* Sidebar */
.side-card {
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: 1.3rem 1.4rem;
    box-shadow: var(--shadow-soft);
    margin-bottom: 1.25rem;
}
.side-card h3 {
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 0.9rem;
}
.side-card--cta {
    background: linear-gradient(120deg, var(--ocean-100), var(--seafoam-100));
    text-align: center;
}

/* Rules & regulations card */
.side-card--rules {
    background: var(--sand-100);
    border-left: 4px solid var(--brand-gold);
}
.side-card--rules h3 { color: var(--brand-gold); }
.side-card__note { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 0.9rem; }

.rule-link {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 0.85rem;
    background: rgba(255, 255, 255, 0.75);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.rule-link + .rule-link { margin-top: 0.5rem; }
.rule-link:hover { background: #fff; transform: translateY(-2px); }
.rule-link img { flex: 0 0 34px; width: 34px; height: auto; }

/* Our Tasmania banner card */
.ot-card {
    display: block;
    margin-bottom: 1.25rem;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ot-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.ot-card img { width: 100%; height: auto; display: block; }
.side-card--cta h3 { color: var(--ink); text-transform: none; letter-spacing: normal; font-size: 1.05rem; }
.side-card--cta p { font-size: 0.88rem; color: var(--ink-soft); }

.fact-list { margin: 0; display: grid; gap: 0.15rem; }
.fact-list dt {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-top: 0.6rem;
}
.fact-list dt:first-child { margin-top: 0; }
.fact-list dd { margin: 0; font-size: 0.92rem; color: var(--ink); }
.taxon-author { font-style: normal; color: var(--ink-soft); font-size: 0.85em; }

.alias-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: var(--ink-soft);
}
.alias-list li::before { content: '〰 '; color: var(--ocean-300); }

.side-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.side-links a { font-size: 0.9rem; font-weight: 600; overflow-wrap: anywhere; }
.side-links small { display: block; color: var(--ink-faint); font-size: 0.75rem; }

@media (min-width: 1000px) {
    .species-layout { grid-template-columns: minmax(0, 1fr) 330px; gap: 3rem; align-items: start; }
}

/* Explore & do landing */
.explore-intro { display: grid; gap: 2rem; }

.explore-intro__collage {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 0.9rem;
    align-items: end;
}
.explore-intro__collage img {
    width: 100%;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    object-fit: cover;
}
.explore-intro__collage img:nth-child(1) { aspect-ratio: 4 / 3; }
.explore-intro__collage img:nth-child(2) { aspect-ratio: 3 / 4; }
.explore-intro__collage img:nth-child(3) { aspect-ratio: 3 / 2; }
.explore-intro__collage img:nth-child(4) { aspect-ratio: 4 / 3; }

.explore-intro__text p { color: var(--ink-soft); }

@media (min-width: 900px) {
    .explore-intro { grid-template-columns: 1fr 1.1fr; gap: 3.5rem; align-items: center; }
}

.activity-feature {
    position: relative;
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 340px;
    box-shadow: var(--shadow-lift);
}
.activity-feature img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.activity-feature:hover img { transform: scale(1.04); }
.activity-feature::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(20, 34, 46, 0.72) 15%, rgba(20, 34, 46, 0.25) 60%, transparent 85%);
}
.activity-feature__body {
    position: relative;
    z-index: 1;
    max-width: 460px;
    padding: 2.5rem 2rem;
    color: #fff;
}
.activity-feature__body .eyebrow { color: var(--sand-500); }
.activity-feature__body h3 { color: #fff; font-size: clamp(1.6rem, 4vw, 2.2rem); }
.activity-feature__body p { color: rgba(255, 255, 255, 0.9); margin-bottom: 1.25rem; }

/* FAQ accordions (native details/summary) */
.faq {
    border: 1.5px solid var(--mist-200);
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
    background: var(--mist-50);
    overflow: hidden;
}
.faq summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.9rem 1.2rem;
    cursor: pointer;
    font-weight: 700;
    color: var(--ink);
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
    content: '+';
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--ocean-500);
    width: 1.1rem;
}
.faq[open] summary::before { content: '−'; }
.faq[open] summary { background: var(--ocean-100); }
.faq > *:not(summary) { margin-inline: 1.2rem; }
.faq > p:last-child, .faq > ul:last-child, .faq > div:last-child { margin-bottom: 1rem; }

.faq-list { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.faq-list li { font-size: 0.92rem; }
.faq-list--iucn li { display: flex; align-items: flex-start; gap: 0.6rem; }
.faq-list--iucn img { flex: 0 0 30px; margin-top: 2px; }
.faq-list--iucn strong { white-space: nowrap; }

/* Site information page */
.update-entry { border-bottom: 1px solid var(--mist-200); padding-block: 0.9rem; }
.update-entry:last-child { border-bottom: 0; padding-bottom: 0; }
.update-entry__head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; }
.update-entry__head h3 { margin: 0; font-size: 1.05rem; }
.update-entry__head small { color: var(--ink-faint); }
.update-entry p { margin: 0.4rem 0 0; font-size: 0.92rem; }

.todo-pct { margin-left: auto; font-weight: 800; color: var(--ocean-600); font-size: 0.85rem; }
.progress-track {
    height: 8px;
    border-radius: 4px;
    background: var(--mist-200);
    overflow: hidden;
    margin-bottom: 0.75rem;
}
.progress-track__bar {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--ocean-500), var(--seafoam-500));
}

/* Activity pages */
.split-media { display: grid; gap: 1.25rem; }
.split-media img {
    width: 100%;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    object-fit: cover;
}
@media (min-width: 800px) {
    .split-media { grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: center; }
}

.video-pair { display: grid; gap: 1.25rem; margin-top: 1rem; }
.video-pair iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
}
@media (min-width: 800px) { .video-pair { grid-template-columns: 1fr 1fr; } }

.book-card {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: 1.3rem 1.4rem;
    box-shadow: var(--shadow-soft);
}
.book-card img {
    flex: 0 0 84px;
    width: 84px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-soft);
}
.book-card h3 { font-size: 1rem; margin-bottom: 0.15rem; }
.book-card > div > p { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 0.6rem; }

/* Place (location/attraction) extras */
.map-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 1.1rem;
}
.map-coords { font-size: 0.82rem; color: var(--ink-faint); }
.btn-block { display: flex; width: 100%; margin-top: 1rem; }
.feature-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.feature-pill {
    padding: 0.45rem 1.05rem;
    border-radius: var(--radius-pill);
    background: var(--ocean-100);
    color: var(--ocean-700);
    font-size: 0.85rem;
    font-weight: 600;
}

/* Card grids inside the narrower main column */
.species-block--flush { background: transparent; box-shadow: none; padding-inline: 0; }
.card-grid--tight { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 560px)  { .card-grid--tight { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .card-grid--tight { grid-template-columns: repeat(3, 1fr); } }

.media-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: var(--mist-200);
    color: var(--ink-faint);
    font-size: 0.85rem;
    font-weight: 600;
}

.ff-card__count {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* Species spotlight */
.spotlight {
    display: grid;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-lift);
}
.spotlight__media {
    position: relative;
    min-height: 260px;
}
.spotlight__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.spotlight__credit {
    position: absolute;
    left: 0.9rem;
    bottom: 0.7rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-pill);
    background: rgba(20, 34, 46, 0.55);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    backdrop-filter: blur(6px);
}
.spotlight__body { padding: 1.75rem 1.5rem; }
.spotlight__body h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); margin-bottom: 0.15em; }
.spotlight__sciname { color: var(--ink-faint); margin-bottom: 0.9rem; }
.spotlight__badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.spotlight__body > p:not(.spotlight__sciname) { color: var(--ink-soft); }
.spotlight__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.4rem; }

@media (min-width: 900px) {
    .spotlight { grid-template-columns: 1.1fr 1fr; }
    .spotlight__media { min-height: 380px; }
    .spotlight__body { padding: 2.5rem 2.75rem; }
}

/* --------------------------------------------------------------------------
   Stats band (about page)
   -------------------------------------------------------------------------- */
.stats-band {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
.stat-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.2rem;
    padding: 1.6rem 1rem;
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.stat-tile__num {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ocean-600);
    line-height: 1.1;
}
.stat-tile__label {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
@media (min-width: 900px) {
    .stats-band { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}

/* Small pill link clusters inside cards */
.link-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.link-list a {
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-pill);
    background: var(--mist-100);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-soft);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.link-list a:hover { background: var(--ocean-100); color: var(--ocean-700); }

/* Full-width banner used in place of a CTA panel */
.cta-banner {
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cta-banner:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.cta-banner img { width: 100%; height: auto; display: block; }

/* Call-to-action panel */
.cta-panel {
    display: grid;
    gap: 1.5rem;
    padding: 2.25rem 1.75rem;
    background: linear-gradient(120deg, #bfd7e3, #bcdbce);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}
.cta-panel h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 0.35em; }
.cta-panel p { margin: 0; color: var(--ink-soft); max-width: 36rem; }
.cta-panel__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}
@media (min-width: 900px) {
    .cta-panel {
        grid-template-columns: 1.6fr auto;
        align-items: center;
        padding: 2.75rem 3rem;
    }
}

/* --------------------------------------------------------------------------
   Contact page + forms
   -------------------------------------------------------------------------- */
.contact { padding-top: 2.25rem; }

.contact__grid { display: grid; gap: 2.5rem; }

.contact__info p { color: var(--ink-soft); }
.contact__points { display: grid; gap: 1rem; margin-top: 1.75rem; }

.contact-point {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.3rem;
    box-shadow: var(--shadow-soft);
}
.contact-point__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--ocean-100);
    font-size: 1.25rem;
}
.contact-point h3 { margin: 0 0 0.15rem; font-size: 0.95rem; }
.contact-point p { margin: 0; font-size: 0.85rem; color: var(--ink-soft); }

.form-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem;
    box-shadow: var(--shadow-soft);
}

.form-row { display: grid; gap: 0; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; gap: 0 1.1rem; } }

.form-field { margin-bottom: 1.2rem; }
.form-field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    color: var(--ink);
}
.form-field input,
.form-field textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--ink);
    background: var(--mist-50);
    border: 1.5px solid var(--mist-200);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.form-field textarea { resize: vertical; min-height: 140px; }
.form-field input:focus,
.form-field textarea:focus {
    outline: none;
    background: #fff;
    border-color: var(--ocean-500);
    box-shadow: 0 0 0 4px rgba(85, 134, 159, 0.15);
}
.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] { border-color: #c25d5d; }

.form-error {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #b04a4a;
}

.form-alert {
    background: #f9ecec;
    border-left: 4px solid #c25d5d;
    color: #8c3a3a;
    border-radius: var(--radius-sm);
    padding: 0.85rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.form-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.25rem;
}
.form-note { margin: 0; font-size: 0.8rem; color: var(--ink-faint); max-width: 26rem; }

/* Available to screen readers, out of the visual layout */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Honeypot: parked far off-screen, still focusable-order-safe */
.hp-field {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Thank-you state */
.thankyou { text-align: center; padding-block: 2.75rem; }
.thankyou__icon { font-size: 2.6rem; margin-bottom: 0.75rem; }
.thankyou p { color: var(--ink-soft); max-width: 30rem; margin-inline: auto; }
.thankyou__note { font-size: 0.85rem; color: var(--ink-faint); }
.thankyou__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

@media (min-width: 900px) {
    .contact__grid { grid-template-columns: 1fr 1.35fr; gap: 3.5rem; align-items: start; }
    .form-card { padding: 2.25rem 2.5rem; }
}

/* --------------------------------------------------------------------------
   Intro
   -------------------------------------------------------------------------- */
#welcome { padding-top: 2.25rem; }

.intro__text { max-width: 50rem; }
.intro__text p { color: var(--ink-soft); font-size: 1.02rem; }
.intro__text p:first-of-type { color: var(--ink); font-size: 1.15rem; font-weight: 500; }

/* --------------------------------------------------------------------------
   Location cards
   -------------------------------------------------------------------------- */
.card-grid { display: grid; gap: 1.25rem; }

.location-card {
    position: relative;
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.location-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.location-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.location-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}
.location-card:hover .location-card__media img { transform: scale(1.05); }

.location-card__media .badge {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    box-shadow: 0 2px 10px rgba(20, 34, 46, 0.18);
}

.location-card__body { padding: 1rem 1.2rem 1.2rem; }
.location-card__body h3 { font-size: 1.08rem; margin-bottom: 0.2em; }
.location-card__body p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 640px)  { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(4, 1fr); } }

.section-cta { text-align: center; margin-top: 2.25rem; }

/* --------------------------------------------------------------------------
   Flora & fauna category cards
   -------------------------------------------------------------------------- */
.ff-grid { display: grid; gap: 1.25rem; }

.ff-card {
    background: var(--surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ff-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.ff-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.ff-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ff-card__media h3 {
    position: absolute;
    left: 1.1rem;
    bottom: 0.8rem;
    z-index: 1;
    margin: 0;
    color: #fff;
    font-size: 1.25rem;
    text-shadow: 0 2px 12px rgba(20, 34, 46, 0.5);
}
.ff-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(20, 34, 46, 0.55), transparent 55%);
}

.ff-card__body {
    padding: 1.1rem 1.2rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    flex: 1;
}
.ff-card__body p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); flex: 1; }

.ff-card__thumbs { display: flex; }
.ff-card__thumbs img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(20, 34, 46, 0.15);
    margin-left: -10px;
    transition: transform 0.15s ease;
}
.ff-card__thumbs img:first-child { margin-left: 0; }
.ff-card__thumbs a:hover img { transform: translateY(-4px) scale(1.08); }

.ff-card__link {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--ocean-600);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.ff-card__link::after { content: '\2192'; transition: transform 0.15s ease; }
.ff-card__link:hover::after { transform: translateX(4px); }

@media (min-width: 640px)  { .ff-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ff-grid { grid-template-columns: repeat(3, 1fr); } }

.ff-note {
    margin-top: 2rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-md);
    background: var(--sand-100);
    border-left: 4px solid var(--brand-gold);
    font-size: 0.92rem;
    color: var(--ink-soft);
}
.ff-note p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Social photo strip — separates page content from the footer
   -------------------------------------------------------------------------- */
.social-strip { padding-block: 3.5rem 0; }

.social-strip__head {
    text-align: center;
    margin-bottom: 2.25rem;
}
.social-strip__head .eyebrow { justify-content: center; }
.social-strip__head .eyebrow::before { display: none; }
.social-strip__head h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); }
.social-strip__head p { color: var(--ink-soft); max-width: 34rem; margin-inline: auto; }
.social-strip__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.social-strip__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.social-tile {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.social-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.social-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(30, 58, 80, 0);
    transition: background-color 0.25s ease;
}
.social-tile span {
    position: absolute;
    left: 0.9rem;
    bottom: 0.7rem;
    z-index: 1;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    text-shadow: 0 1px 8px rgba(20, 34, 46, 0.6);
}
.social-tile:hover img { transform: scale(1.06); }
.social-tile:hover::after { background: rgba(30, 58, 80, 0.35); }
.social-tile:hover span { opacity: 1; transform: none; }

@media (min-width: 900px) {
    .social-strip__grid { grid-template-columns: repeat(6, 1fr); }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
    background: linear-gradient(to bottom, var(--ocean-700), #1e3a50);
    color: rgba(255, 255, 255, 0.75);
}

.site-footer__main {
    display: grid;
    gap: 2rem;
    padding-block: 3.25rem 2rem;
}

.site-footer__brand img { height: 72px; width: auto; margin-bottom: 1.1rem; }
.site-footer__brand p { font-size: 0.9rem; max-width: 30rem; }

.site-footer h3 {
    color: var(--sand-500);
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 0.9rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.site-footer ul a { color: rgba(255, 255, 255, 0.78); font-size: 0.92rem; }
.site-footer ul a:hover { color: #fff; }

.site-footer__legal {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-block: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    font-size: 0.82rem;
}
.site-footer__legal a { color: rgba(255, 255, 255, 0.85); }

@media (min-width: 900px) {
    .site-footer__main { grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; }
}

/* --------------------------------------------------------------------------
   Reveal-on-scroll
   -------------------------------------------------------------------------- */
/* Only hide content when JS is present to bring it back */
.js .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .reveal.in-view { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   Image fallbacks
   Most species and location photos are hosted off-site, so a missing file is
   a matter of when, not if. A failed image is swapped for a branded graphic
   by assets/js/image-fallback.js.
   -------------------------------------------------------------------------- */
.img-failed {
    background: var(--mist-100);
    object-fit: contain !important;   /* show the whole graphic, never crop it */
    padding: 0;
}
/* Inside fixed-ratio tiles the graphic should fill the frame instead */
.location-card__media .img-failed,
.ff-card__media .img-failed,
.gallery-item .img-failed,
.social-tile .img-failed {
    object-fit: cover !important;
}
/* Small round thumbnails (category strips) keep their shape */
.ff-card__thumbs .img-failed { object-fit: cover !important; }

/* ==========================================================================
   Error pages
   ========================================================================== */
.error-page {
    padding: clamp(2.5rem, 8vw, 5rem) 0;
    background:
        radial-gradient(120% 90% at 50% 0%, var(--ocean-100) 0%, transparent 60%),
        var(--mist-50);
}
.error-page .container {
    display: grid;
    gap: 2rem;
}
@media (min-width: 900px) {
    .error-page .container {
        grid-template-columns: minmax(0, 1fr) 300px;
        align-items: start;
        gap: 3rem;
    }
}

.error-panel {
    padding: clamp(1.75rem, 5vw, 2.75rem);
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}
.error-code {
    display: inline-block;
    margin-bottom: 0.9rem;
    padding: 0.3rem 1rem;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--ocean-700);
    background: var(--ocean-100);
    border-radius: var(--radius-pill);
}
.error-panel h1 {
    margin: 0 0 0.7rem;
    font-size: clamp(1.6rem, 4.5vw, 2.4rem);
    line-height: 1.2;
    color: var(--ink);
}
.error-panel .lede { margin: 0; color: var(--ink-soft); }
.error-context {
    margin: 1rem 0 0;
    padding: 0.85rem 1.1rem;
    color: var(--ink-soft);
    background: var(--mist-100);
    border-left: 3px solid var(--ocean-300);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* The search field is styled for a photographic hero; on a plain panel it
   needs solid edges rather than translucency. */
.error-search { margin-top: 1.75rem; }
.error-search input {
    background: var(--mist-50);
    border-color: var(--mist-200);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.error-search input:focus {
    border-color: var(--ocean-300);
    outline: none;
}

.error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.75rem;
}
.error-ref {
    margin: 1.5rem 0 0;
    font-size: 0.85rem;
    color: var(--ink-faint);
}
.error-ref strong {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
}

.error-links h2 {
    margin: 0 0 0.9rem;
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.error-links ul { margin: 0; padding: 0; list-style: none; }
.error-links li {
    padding: 0.65rem 0;
    font-size: 0.92rem;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--mist-200);
}
.error-links li:last-child { border-bottom: 0; }
.error-links a { font-weight: 600; color: var(--ocean-700); }

/* ==========================================================================
   Interaction polish
   ========================================================================== */

/* --------------------------------------------------------------------------
   Focus — visible for keyboards, invisible for mouse users
   -------------------------------------------------------------------------- */
:focus-visible {
    outline: 3px solid var(--ocean-500);
    outline-offset: 3px;
    border-radius: 4px;
}
.btn:focus-visible,
.filter-pill:focus-visible,
.page-link:focus-visible { outline-offset: 4px; }

/* Anchored headings clear the fixed nav instead of hiding under it */
[id] { scroll-margin-top: 90px; }

/* --------------------------------------------------------------------------
   Skip link — first stop for a keyboard or screen reader
   -------------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1400;
    padding: 0.75rem 1.4rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    background: var(--ocean-700);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    transform: translate(-50%, -110%);
    transition: transform 0.18s ease;
}
.skip-link:focus { transform: translate(-50%, 0); color: #fff; }

/* --------------------------------------------------------------------------
   Nav — slides out of the way when reading down the page
   -------------------------------------------------------------------------- */
.site-nav {
    transition: transform 0.32s ease, background-color 0.3s ease,
                box-shadow 0.3s ease, backdrop-filter 0.3s ease;
    will-change: transform;
}
.site-nav.is-hidden { transform: translateY(-102%); }
body.nav-open { overflow: hidden; }

/* The menu slides down rather than appearing from nowhere */
@media (max-width: 899px) {
    .site-nav__menu {
        transition: opacity 0.24s ease, transform 0.24s ease;
    }
    .site-nav__menu:not(.is-open) {
        opacity: 0;
        transform: translateY(-8px);
    }
    .site-nav__menu.is-open { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Hero copy drifts as the page scrolls (set inline by main.js)
   -------------------------------------------------------------------------- */
.hero__inner { will-change: transform, opacity; }

/* --------------------------------------------------------------------------
   Reveal cascade — siblings arrive in sequence, not all at once
   -------------------------------------------------------------------------- */
.js .reveal {
    transition-delay: var(--reveal-delay, 0ms);
}

/* --------------------------------------------------------------------------
   Images fade in as they land
   -------------------------------------------------------------------------- */
/* Opacity only, and no fill mode: an animation that held a transform would
   outrank the hover zoom on these same images and kill it. */
.js img.is-loading { opacity: 0; }
.js img.is-loaded { animation: img-in 0.45s ease; }
@keyframes img-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Reading progress
   -------------------------------------------------------------------------- */
.read-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    width: 100%;
    height: 3px;
    pointer-events: none;
    background: transparent;
}
.read-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--ocean-500), var(--seafoam-500));
    border-radius: 0 3px 3px 0;
    transition: width 0.1s linear;
}

/* --------------------------------------------------------------------------
   Back to top
   -------------------------------------------------------------------------- */
.to-top {
    position: fixed;
    right: 1.1rem;
    bottom: 1.1rem;
    z-index: 1060;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    font-size: 1.15rem;
    color: var(--ocean-700);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--mist-200);
    border-radius: 50%;
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    opacity: 0;
    transform: translateY(14px) scale(0.9);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease,
                background-color 0.2s ease, box-shadow 0.2s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.to-top.is-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.to-top:hover {
    background: #fff;
    box-shadow: var(--shadow-lift);
    transform: translateY(-2px);
}
@media (min-width: 700px) {
    .to-top { right: 1.75rem; bottom: 1.75rem; width: 50px; height: 50px; }
}

/* --------------------------------------------------------------------------
   "On this page" — marks the section currently being read
   -------------------------------------------------------------------------- */
/* Only in-page anchors: the same class is used for outbound reference links,
   which should keep their plain look. */
.side-links a[href^="#"] {
    display: block;
    padding-left: 0.85rem;
    border-left: 2px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}
.side-links a[href^="#"]:hover { padding-left: 1.1rem; }
.side-links a[href^="#"].is-reading {
    padding-left: 1.1rem;
    font-weight: 700;
    color: var(--ocean-700);
    border-left-color: var(--ocean-500);
}

/* --------------------------------------------------------------------------
   Counting numbers need a stable width, or the tile jitters as digits change
   -------------------------------------------------------------------------- */
.stat-tile__num { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Card and button feel
   -------------------------------------------------------------------------- */
.location-card,
.ff-card,
.stat-tile,
.ot-card,
.cta-banner {
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.28s ease;
}
/* A press should register — the lift drops back under the finger */
.location-card:active,
.ff-card:active,
.stat-tile:active,
.btn:active,
.filter-pill:active { transform: translateY(0) scale(0.985); }

.btn { transition: transform 0.18s ease, background-color 0.2s ease,
                   color 0.2s ease, box-shadow 0.2s ease; }

/* Gallery tiles lift with their photo rather than only zooming it */
.gallery-item {
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
}
.gallery-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
}

/* --------------------------------------------------------------------------
   Nothing above should move for anyone who has asked it not to
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .site-nav,
    .site-nav.is-hidden { transform: none; transition: none; }
    .js img.is-loading { opacity: 1; }
    .js img.is-loaded { animation: none; }
    .read-progress span { transition: none; }
    .to-top { transition: opacity 0.2s ease; transform: none; }
    .to-top.is-visible { transform: none; }
    .to-top:hover { transform: none; }
    .location-card, .ff-card, .stat-tile, .ot-card, .cta-banner,
    .gallery-item, .btn { transition: box-shadow 0.2s ease; }
    .location-card:hover, .ff-card:hover, .stat-tile:hover,
    .gallery-item:hover, .cta-banner:hover, .ot-card:hover { transform: none; }
    .location-card:active, .ff-card:active, .stat-tile:active,
    .btn:active, .filter-pill:active { transform: none; }
    .skip-link { transition: none; }
    .side-links a[href^="#"],
    .side-links a[href^="#"]:hover,
    .side-links a[href^="#"].is-reading { transition: none; padding-left: 0.85rem; }
}

/* ==========================================================================
   Species card — "offset plate"
   The photograph sits proud of a tinted block behind it, with the scientific
   name and any video flag running up the left gutter. Rendered by
   species_card() in includes/helpers.php.
   ========================================================================== */

/* One hue per origin drives the whole card. --origin-deep is the same colour
   taken down for text that has to hold its own at small sizes. */
.species-card {
    --origin: #5b6b74;
    --origin-deep: #333e45;
    --origin-paper: #eef1f3;
    --radius-plate: 13px;
}
.species-card.origin--native     { --origin: #2f6b52; --origin-deep: #224052; --origin-paper: #a9c4d263; }
.species-card.origin--introduced { --origin: #9d5b2c; --origin-deep: #224052; --origin-paper: #a9c4d263; }
.species-card.origin--endemic    { --origin: #5c3f86; --origin-deep: #224052; --origin-paper: #a9c4d263; }
.species-card.origin--vagrant    { --origin: #3d6a86; --origin-deep: #224052; --origin-paper: #a9c4d263; }

.species-card {
    position: relative;
    display: block;
    padding: 1.6rem 1.1rem 1.2rem 2.4rem;
    color: var(--ink);
}
.species-card:hover { color: var(--ink); }

/* The tinted panel. Full height so the name and origin always sit on it —
   when it stopped short they were left stranded the moment it moved. */
.species-card__block {
    position: absolute;
    inset: 0 1.6rem 0 0;
    background: var(--origin-paper);
    border-radius: var(--radius-plate);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* The photograph, one pixel tighter than the block so the two stacked shapes
   stay distinct instead of merging into a single rounded blob. */
.species-card__frame {
    position: relative;
    z-index: 1;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: calc(var(--radius-plate) - 1px);
    background: var(--mist-100);
    box-shadow: 0 12px 30px rgba(20, 34, 46, 0.22);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.species-card__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Text belongs to the block, so it travels with it. Only the photo goes the
   other way. */
.species-card:hover .species-card__block,
.species-card:hover .species-card__body { transform: translate(-6px, -6px); }
.species-card:hover .species-card__frame { transform: translate(6px, 6px); }

/* Left gutter: video flag, then the scientific name, both on one axis. */
.species-card__side {
    position: absolute;
    left: 0;
    top: 1.6rem;
    bottom: 3.2rem;
    width: 2.4rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.55rem;
}
.species-card__spine {
    writing-mode: vertical-rl;
    transform: rotate(180deg);

    font-size: 0.8rem;
    font-weight: 600;
    font-style: italic;
    letter-spacing: 0.02em;
    color: var(--origin-deep);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 0;
}

/* Video is a flag, not a tally. Set on the same axis as the name. */
.species-card__video {
    flex: 0 0 auto;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    padding: 0.55rem 0.2rem;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--origin-deep);
    background: color-mix(in srgb, var(--origin) 14%, transparent);
    border-radius: var(--radius-pill);
    white-space: nowrap;
}
/* The word lies on its side; the triangle does not. */
.species-card__video i {
    display: inline-block;
    writing-mode: horizontal-tb;
    transform: rotate(90deg);
    font-style: normal;
    line-height: 1;
    color: var(--origin);
}

.species-card__body {
    position: relative;
    z-index: 1;
    display: block;
    padding: 1.2rem 1rem 0 0;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.species-card__body h3 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.25;
    color: var(--ink);
}
.species-card__origin {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--origin);
}

/* Grid sized for the card's own padding rather than the shared card-grid,
   which has no left gutter to allow for. */
.species-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
@media (min-width: 560px) { .species-grid { gap: 1rem; } }

@media (prefers-reduced-motion: reduce) {
    .species-card__block,
    .species-card__frame,
    .species-card__body { transition: none; }
    .species-card:hover .species-card__block,
    .species-card:hover .species-card__body,
    .species-card:hover .species-card__frame { transform: none; }
}

/* ==========================================================================
   Explore & Do guides — long-form articles built from ordered blocks
   ========================================================================== */
.guide-intro {
    margin: 0 0 2rem;
    font-size: 1.12rem;
    line-height: 1.75;
    color: var(--ink-soft);
    padding-left: 1.1rem;
    border-left: 3px solid var(--ocean-300);
}

/* A photograph placed within the article */
.guide-figure { margin: 0 0 2rem; }
.guide-figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
}
.guide-figure figcaption {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: var(--ink-faint);
}
.guide-figure__credit { margin-left: auto; white-space: nowrap; }

/* Practical advice, set apart from the narrative */
.guide-tip {
    margin: 0 0 2rem;
    padding: 1.1rem 1.3rem;
    background: var(--sand-100);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--sand-500);
}
.guide-tip h3 {
    margin: 0 0 0.4rem;
    font-size: 0.98rem;
    letter-spacing: 0.01em;
    color: var(--ink);
}
.guide-tip p:last-child { margin-bottom: 0; }

.guide-quote {
    margin: 0 0 2rem;
    padding: 0.4rem 0 0.4rem 1.4rem;
    border-left: 4px solid var(--seafoam-500);
    font-size: 1.14rem;
    line-height: 1.7;
    color: var(--ink);
}
.guide-quote p { margin-bottom: 0.4rem; }
.guide-quote cite {
    display: block;
    font-size: 0.85rem;
    font-style: normal;
    color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   Where to go — the places this guide points at
   -------------------------------------------------------------------------- */
.guide-places { display: grid; gap: 1rem; }
@media (min-width: 720px) { .guide-places { grid-template-columns: 1fr 1fr; } }

.guide-place {
    display: grid;
    grid-template-columns: 116px 1fr;
    align-items: stretch;
    overflow: hidden;
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    color: var(--ink);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
}
.guide-place:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
    color: var(--ink);
}
.guide-place__media { position: relative; background: var(--mist-100); }
.guide-place__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.guide-place__media .badge {
    position: absolute;
    top: 0.45rem;
    left: 0.45rem;
    font-size: 0.6rem;
}
.guide-place__body { padding: 0.85rem 1rem; min-width: 0; }
.guide-place__body h3 { margin: 0 0 0.25rem; font-size: 1rem; line-height: 1.25; }
.guide-place__body p { margin: 0; font-size: 0.85rem; line-height: 1.55; color: var(--ink-soft); }
.guide-place__note { position: relative; }

@media (prefers-reduced-motion: reduce) {
    .guide-place { transition: box-shadow 0.2s ease; }
    .guide-place:hover { transform: none; }
}

/* ==========================================================================
   Species reel — a compact, filterable strip for use inside an article
   The full card is for browsing; this is for "here is what lives here",
   where fifty of them have to fit without taking over the page.
   ========================================================================== */
.species-reel { margin: 0 0 0.5rem; }

.species-reel__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.1rem;
}
.reel-pill {
    padding: 0.32rem 0.8rem;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-soft);
    background: var(--mist-100);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.reel-pill small {
    font-size: 0.72em;
    font-weight: 700;
    opacity: 0.6;
    margin-left: 0.2rem;
}
.reel-pill:hover { color: var(--ocean-700); background: var(--ocean-100); }
.reel-pill.is-active {
    color: #fff;
    background: var(--ocean-700);
    border-color: var(--ocean-700);
}
.reel-pill.is-active small { opacity: 0.75; }

.species-reel__track {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 0.9rem 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 560px) {
    .species-reel__track { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
}

/* --------------------------------------------------------------------------
   One tile: photograph, name, and the origin carried as a hairline
   -------------------------------------------------------------------------- */
.species-chip {
    --origin: #5b6b74;
    min-width: 0;
}
.species-chip.origin--native     { --origin: #2f6b52; }
.species-chip.origin--introduced { --origin: #9d5b2c; }
.species-chip.origin--endemic    { --origin: #5c3f86; }
.species-chip.origin--vagrant    { --origin: #3d6a86; }

.species-chip a {
    display: block;
    color: var(--ink);
    text-align: center;
}
.species-chip a:hover { color: var(--ocean-700); }

.species-chip__media {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    margin-bottom: 0.45rem;
    background: var(--mist-100);
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
/* The origin reads as a hairline under the photo rather than another badge —
   at this size a label would be bigger than the picture. */
.species-chip__media::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: var(--origin);
}
.species-chip__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.species-chip a:hover .species-chip__media {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
}

.species-chip__name {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
}
.species-chip__sci {
    display: block;
    margin-top: 0.1rem;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 0.82rem;
    font-style: italic;
    line-height: 1.25;
    color: var(--ink-faint);
}

/* Hidden by the group filter */
.species-chip[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Show-more cap. Applied by JavaScript only, so with scripting off the whole
   list is simply present rather than clipped with no way to open it.
   -------------------------------------------------------------------------- */
.species-reel__track.is-capped {
    overflow: hidden;
    mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}
.reel-more {
    display: block;
    margin: 0.9rem auto 0;
    padding: 0.45rem 1.3rem;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ocean-700);
    background: var(--surface);
    border: 1.5px solid var(--ocean-300);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.reel-more:hover { background: var(--ocean-100); border-color: var(--ocean-500); }

@media (prefers-reduced-motion: reduce) {
    .species-chip__media,
    .reel-pill,
    .reel-more { transition: none; }
    .species-chip a:hover .species-chip__media { transform: none; }
}

/* ==========================================================================
   Area map — the Tomahawk spots, plotted by activity
   Sits inside the container like every other section, in a soft-cornered
   frame rather than running raw across the viewport.
   ========================================================================== */
.section-head--tight { margin-top: 3rem; margin-bottom: 1.25rem; }

.map-frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    background: var(--mist-100);
}

.map-canvas {
    width: 100%;
    height: 58vh;
    min-height: 360px;
    background: var(--mist-200);
}
@media (min-width: 900px) { .map-canvas { height: min(66vh, 640px); } }

/* --------------------------------------------------------------------------
   Legend: a row above the map on a phone, a panel over it once there is room
   -------------------------------------------------------------------------- */
.map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.9rem 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--mist-200);
}
@media (min-width: 900px) {
    .map-legend {
        position: absolute;
        top: 1rem;
        right: 1rem;                   /* Leaflet puts its zoom control top-left */
        z-index: 1000;                 /* over Leaflet's panes, under the nav */
        width: 226px;
        max-height: calc(100% - 2rem);
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        overflow-y: auto;
        padding: 1rem 1.1rem;
        background: rgba(255, 255, 255, 0.94);
        border: 0;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lift);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    /* flex-basis follows the main axis: 100% means a whole line in the mobile
       row, but the whole height once this becomes a column. */
    .map-legend__title,
    .map-legend__note,
    .map-key { flex: 0 0 auto; }
    .map-key { display: flex; width: 100%; }
}

.map-legend__title,
.map-legend__note {
    flex: 1 0 100%;
    margin: 0;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.map-legend__note {
    margin-top: 0.5rem;
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.map-key {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.8rem 0.35rem 0.4rem;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    text-align: left;
    color: var(--ink-faint);
    background: var(--mist-50);
    border: 1.5px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.map-key small { margin-left: auto; font-size: 0.75em; opacity: 0.6; }
.map-key__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    font-size: 0.9rem;
    line-height: 1;
    background: color-mix(in srgb, var(--key) 16%, #fff);
    border-radius: 50%;
}
.map-key.is-active { color: var(--ink); border-color: var(--key, var(--ocean-300)); background: #fff; }
.map-key:not(.is-active) { opacity: 0.45; }
.map-key:not(.is-active) .map-key__icon { filter: grayscale(1); }

/* --------------------------------------------------------------------------
   Marker and popup
   -------------------------------------------------------------------------- */
.spot-pin { background: none; border: 0; }
.spot-pin__wrap { position: relative; display: block; width: 32px; height: 42px; }

/* One corner left square, then rotated 45 degrees so it points down. The
   rotated square reaches about 39px below the top of the wrapper, which is
   where the icon is anchored. */
.spot-pin__drop {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    background: var(--pin, #2c516b);
    border: 2.5px solid #fff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 3px 9px rgba(20, 34, 46, 0.35);
}
/* Sits over the round part of the drop, unrotated so the icon stays upright */
.spot-pin__face {
    position: absolute;
    top: 5px;
    left: 5px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    font-size: 0.78rem;
    line-height: 1;
    background: #fff;
    border-radius: 50%;
}
.leaflet-marker-icon.spot-pin { transition: filter 0.2s ease; }
.leaflet-marker-icon.spot-pin:hover { filter: brightness(1.06) saturate(1.1); z-index: 500 !important; }

.leaflet-popup-content-wrapper { border-radius: var(--radius-md); box-shadow: var(--shadow-lift); }
.leaflet-popup-content { margin: 0; }
.spot-popup { padding: 0 0 0.9rem; font-family: var(--font-sans); }
.spot-popup img {
    display: block;
    width: 100%;
    height: 130px;
    object-fit: cover;
    margin-bottom: 0.7rem;
}
.spot-popup strong { display: block; padding: 0 0.9rem; font-size: 0.98rem; line-height: 1.3; color: var(--ink); }
.spot-popup__type {
    display: inline-block;
    margin: 0.3rem 0.9rem 0;
    padding: 0.1rem 0.55rem;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ocean-700);
    background: var(--ocean-100);
    border-radius: var(--radius-pill);
}
.spot-popup p { margin: 0.5rem 0 0; padding: 0 0.9rem; font-size: 0.85rem; line-height: 1.55; color: var(--ink-soft); }
.spot-popup__go {
    display: block;
    margin: 0.8rem 0.9rem 0;
    padding-top: 0.6rem;
    border-top: 1px solid var(--mist-200);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ocean-700);
}
.spot-popup__go:hover { color: var(--ocean-600); }

/* --------------------------------------------------------------------------
   The same spots as cards, in the site's card language
   -------------------------------------------------------------------------- */
.spot-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.spot-card {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
}
.spot-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.spot-card__media { aspect-ratio: 16 / 9; background: var(--mist-100); }
.spot-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spot-card__body { position: relative; padding: 1.05rem 1.15rem 1.1rem; }

/* The activity marker, lifted onto the edge of the photo */
.spot-card__pin {
    position: absolute;
    top: -21px;
    right: 1.1rem;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    font-size: 1.15rem;
    line-height: 1;
    background: #fff;
    border: 2.5px solid var(--key, var(--ocean-500));
    border-radius: 50%;
    box-shadow: var(--shadow-soft);
}
.spot-card__media + .spot-card__body .spot-card__pin { top: -21px; }
.spot-card:not(:has(.spot-card__media)) .spot-card__pin { top: 1.05rem; }

.spot-card h3 { margin: 0 0 0.3rem; font-size: 1.05rem; line-height: 1.25; padding-right: 2.8rem; }
.spot-card__type {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--key, var(--ocean-700));
}
.spot-card p { margin: 0 0 0.8rem; font-size: 0.88rem; line-height: 1.6; color: var(--ink-soft); }
.spot-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 1rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--mist-200);
    font-size: 0.76rem;
}
.spot-card__coords { color: var(--ink-faint); }
.spot-card__foot a { margin-left: auto; font-weight: 700; }

/* --------------------------------------------------------------------------
   Nothing plotted yet
   -------------------------------------------------------------------------- */
.map-empty {
    padding: clamp(2.5rem, 7vw, 4rem) clamp(1.5rem, 5vw, 3rem);
    text-align: center;
    background:
        radial-gradient(120% 90% at 50% 0%, var(--ocean-100) 0%, transparent 62%),
        var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}
.map-empty__icon { display: block; font-size: 2.6rem; line-height: 1; margin-bottom: 0.8rem; }
.map-empty h3 { margin: 0 0 0.5rem; font-size: 1.3rem; }
.map-empty p { max-width: 52ch; margin: 0 auto 1.4rem; color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
    .spot-card { transition: box-shadow 0.2s ease; }
    .spot-card:hover { transform: none; }
    .map-key { transition: none; }
}

/* --------------------------------------------------------------------------
   Side card that sends the reader to the area map
   Whole card is the link, so there is no small target to find.
   -------------------------------------------------------------------------- */
.side-card--map {
    display: block;
    color: var(--ink);
    background:
        radial-gradient(120% 100% at 85% 0%, var(--ocean-100) 0%, transparent 65%),
        var(--surface);
    border: 1.5px solid var(--ocean-100);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.28s ease, border-color 0.25s ease;
}
.side-card--map:hover {
    color: var(--ink);
    transform: translateY(-3px);
    border-color: var(--ocean-300);
    box-shadow: var(--shadow-lift);
}

/* The marker icons, overlapped like pins dropped on a map */
.side-card__pins {
    display: flex;
    margin-bottom: 0.7rem;
}
.side-card__pins span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    font-size: 1rem;
    line-height: 1;
    background: #fff;
    border: 2px solid var(--key, var(--ocean-500));
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(20, 34, 46, 0.16);
}
.side-card__pins span + span { margin-left: -0.55rem; }

.side-card--map h3 { margin-bottom: 0.35rem; }
.side-card--map p { margin: 0 0 0.7rem; font-size: 0.88rem; line-height: 1.6; color: var(--ink-soft); }

.side-card__go {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ocean-700);
}
.side-card--map:hover .side-card__go { color: var(--ocean-600); }

@media (prefers-reduced-motion: reduce) {
    .side-card--map { transition: box-shadow 0.2s ease; }
    .side-card--map:hover { transform: none; }
}

/* Sighting popups on species maps (built by place-map.js). */
.map-popup__img {
    display: block;
    width: 100%;
    max-width: 200px;
    border-radius: 8px;
    margin-bottom: 6px;
}
.map-popup__text { margin: 4px 0 0; }