/*************************
**  Our Tasmania Website
**  Species styles sheet
**  Build V. 0.2
**  Build Notes: the elements that relate to the species components of the site dark build
**
**********************/


/* ═══════════════════════════════════════════════════════
    SPECIES SWIPER
═══════════════════════════════════════════════════════ */
.showcase-section { padding: 3rem 0 4rem; }

.ot-swiper { padding-bottom: 3.5rem !important; }

/* Swiper nav buttons */
.swiper-button-next,
.swiper-button-prev {
    color: var(--emerald) !important;
    background: var(--bg-card);
    border: 1px solid var(--rule-warm);
    width: 40px !important; height: 40px !important;
    border-radius: var(--radius) !important;
    top: 44% !important;
    transition: background .2s;
}
.swiper-button-next:hover,
.swiper-button-prev:hover { background: var(--emerald-dim); }
.swiper-button-next::after,
.swiper-button-prev::after { font-size: .85rem !important; font-weight: 700 !important; }

/* Swiper pagination */
.swiper-pagination-bullet { background: var(--ink-4) !important; opacity: 1 !important; width: 30px !important; border-radius: 10px !important; height: 10px !important; }
.swiper-pagination-bullet-active { background: var(--emerald) !important; }

/* ═══════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════ */
.sp-hero {
    position: relative; min-height: 85vh;
    display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
}
.sp-hero__bg {
    position: absolute; inset: -15%;
    background: center 40% / cover no-repeat;
    transform: scale(1.04); transition: transform 8s ease-out; will-change: transform;
}
.sp-hero__bg.ready { transform: scale(1); }
.sp-hero__veil {
    position: absolute; inset: 0;
    background:
        linear-gradient(to bottom, rgba(14,16,15,.35) 0%, rgba(14,16,15,.0) 35%, rgba(14,16,15,.0) 50%, rgba(14,16,15,.9) 78%, rgba(14,16,15,1) 100%),
        linear-gradient(to right, rgba(14,16,15,.55) 0%, transparent 70%);
}
.sp-hero__content { position: relative; z-index: 2; padding: 4rem 0 4rem; }
.sp-hero__eyebrow {
    font-family: var(--font-mono); font-size: .65rem;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--white); margin-bottom: 1rem;
    display: flex; align-items: center; gap: .7rem;
}
.sp-hero__eyebrow::before { content:''; width:20px; height:1px; background:var(--white); display:inline-block; flex-shrink:0; }
.sp-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5vw, 5rem); font-weight: 800;
    line-height: 1; letter-spacing: -.015em; color: var(--ink);
    margin-bottom: .75rem;
}
.sp-hero__latin {
    font-family: var(--font-mono); font-style: italic;
    font-size: clamp(1rem, 2vw, 1.4rem); font-weight: 400;
    color: var(--emerald-lt); margin-bottom: 1.5rem; display: block;
    letter-spacing: .04em;
}
/* status badges in hero */
.sp-hero__badges { display: flex; gap: .65rem; flex-wrap: wrap; align-items: center; }
.sp-status-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--font-mono); font-size: .65rem;
    letter-spacing: .12em; text-transform: uppercase;
    padding: .37rem .85rem .33rem; border-radius: 100px;
}
.sp-status-badge--introduced {
    background: rgba(200,88,88,.12); color: #c85858;
}
.sp-status-badge--invasive {
    background: rgba(200,120,32,.12); color: #c87820;
}
.sp-status-badge--no-status {
    background: rgba(120,120,120,.12); color: var(--ink-3);
}
.sp-status-badge--not-evaluated {
    background: rgba(120,120,120,.12); color: var(--ink-3);
}
.sp-status-badge--data-deficient {
    background: rgba(120,120,120,.12); color: var(--ink-3);
}
.sp-status-badge--extinct {
    background: rgba(87, 5, 5, 0.12); color: var(--white);
}
.sp-status-badge--extinct-wild {
    background: rgba(87, 5, 5, 0.12); color: var(--white);
}
.sp-status-badge--least-concern {
    background: rgba(255, 53, 53, 0.12); color: var(--white);
}
.sp-status-badge--near-treatened {
    background: rgba(255, 53, 53, 0.12); color: var(--white);
}
.sp-status-badge--vulnerable {
    background: rgba(255, 53, 53, 0.12); color: var(--white);
}
.sp-status-badge--endangered {
    background: rgba(255, 53, 53, 0.12); color: var(--white);
}
.sp-status-badge--critically-endangered {
    background: rgba(255, 53, 53, 0.12); color: var(--white);
}
@media (max-width: 767px) {
    .sp-hero { min-height: 620px; max-height: 760px; }
    .sp-hero__bg { inset: -8%; background-position: center 38%; }
    .sp-hero__content { padding: 7rem 0 2rem; }
    .sp-hero__title { font-size: clamp(2.5rem, 10vw, 3.4rem); max-width: 10ch; }
    .sp-hero__latin { margin-bottom: 1rem; }
    .sp-status-badge { min-height: 34px; padding: .45rem .75rem; }
}
.sp-infobox {
    background: var(--bg-card);
    border-radius: var(--radius-lg); padding: 1rem 1.1rem;
    margin-bottom: .75rem;
}
.sp-infobox--introduced { }
.sp-infobox--endemic { }
.sp-infobox--unknown { }
.sp-infobox--vagrant {}
.sp-infobox--native { }

/* Origin badge */

.origin--introduced {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(195, 110, 110, 0.15);
    color: #b60f0f; font-family: var(--font-mono);
    font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
    padding: .32rem .75rem .28rem; border-radius: 100px;
}
.origin--endemic {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(176, 195, 110, 0.15);
    color: #1d791f; font-family: var(--font-mono);
    font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
    padding: .32rem .75rem .28rem; border-radius: 100px;
}
.origin--unknown {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(6, 136, 143, 0.15);
    color: #83d2d6; font-family: var(--font-mono);
    font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
    padding: .32rem .75rem .28rem; border-radius: 100px;
}
.origin--vagrant {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(143, 109, 6, 0.15);
    color: #d69f64; font-family: var(--font-mono);
    font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
    padding: .32rem .75rem .28rem; border-radius: 100px;
}
.origin--native {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(176, 195, 110, 0.15);
    color: #1d791f; font-family: var(--font-mono);
    font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
    padding: .32rem .75rem .28rem; border-radius: 100px;
}




.hero-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.hero-pill {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
    padding: .28rem .8rem; border-radius: 100px;
    color: var(--emerald); background: var(--emerald-dim);
}
.hero-pill--parchment { color: var(--parchment); background: var(--parchment-dim); }
.hero-pill--teal { color: var(--teal); background: var(--teal-dim); }





/* ═══════════════════════════════════════════════════
    INTRO
═══════════════════════════════════════════════════ */
.spiintro-block {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 3.5rem;
    position: relative; overflow: hidden;
}
.spiintro-block::after {
    content: '';
    position: absolute; bottom: -60px; right: -60px;
    width: 240px; height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(90,158,58,.06) 0%, transparent 70%);
    pointer-events: none;
}
.spiintro-block__overline {
    font-family: var(--font-mono);
    font-size: .65rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--emerald); margin-bottom: 1rem; display: block;
}
.spiintro-block__title {
    font-family: var(--font-display);
    font-size: 2rem; font-weight: 700;
    color: var(--ink); margin-bottom: 1rem;
    line-height: 1.2;
}
.spiintro-block__body {
    color: var(--ink-2); font-size: .925rem;
    line-height: 1.85; max-width: 1000px;
}

/* Species cards */
/* ── Species Cards ── */
.species-card {
    display: block; text-decoration: none;
    position: relative; border-radius: var(--radius-lg);
    overflow: hidden; background: var(--bg-card);
    aspect-ratio: 3 / 4;
    transition: transform .4s cubic-bezier(.25,.46,.45,.94),
                box-shadow .4s ease,
                border-color .3s ease;
}
.species-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 32px 64px rgba(0,0,0,.6), 0 0 0 1px var(--emerald-rule);
    border-color: var(--emerald-rule);
}

/* Photo */
.species-card__img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .7s cubic-bezier(.25,.46,.45,.94);
}
.species-card:hover .species-card__img { transform: scale(1.09); }

/* Layered gradient veil — richer than before */
.species-card__veil {
    position: absolute; inset: 0;
    background:
        linear-gradient(to top,
            rgba(0,0,0,.95)   0%,
            rgba(0,0,0,.55)  40%,
            rgba(0,0,0,.05)  65%,
            transparent      100%),
        linear-gradient(to bottom,
            rgba(0,0,0,.45)  0%,
            transparent      30%);
    transition: opacity .4s;
}
.species-card:hover .species-card__veil {
    background:
        linear-gradient(to top,
            rgba(0,0,0,.98)   0%,
            rgba(0,0,0,.65)  45%,
            rgba(0,0,0,.1)   70%,
            transparent      100%),
        linear-gradient(to bottom,
            rgba(0,0,0,.55)  0%,
            transparent      30%);
}

/* Card index number — top left */
.species-card__num {
    position: absolute; top: .85rem; left: .95rem;
    font-family: var(--font-body); font-size: .8rem;
    letter-spacing: .1em; color: var(--white);
    line-height: 1;
}

/* Badges row — top right */
.species-card__badges {
    position: absolute; top: .75rem; right: .75rem;
    display: flex; gap: .35rem; align-items: center;
}
.species-card__badge {
    padding: .1rem .2rem;
    line-height: 1;
}
.species-card__badge img { display: block; }



/* Bottom body */
.species-card__body {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 1.4rem 1.1rem 1.1rem;
}
.species-card__common {
    font-family: var(--font-display); font-size: 1.1rem;
    font-weight: 700; color: var(--white); line-height: 1.2;
    margin-bottom: .3rem;
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.species-card__latin {
    font-family: var(--font-mono); font-style: italic;
    font-size: .67rem; color: var(--emerald); letter-spacing: .05em;
    display: block; margin-bottom: .85rem;
}

/* CTA row — slides up on hover */
.species-card__cta {
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: .7rem;
    opacity: 0; transform: translateY(8px);
    transition: opacity .35s .05s, transform .35s .05s;
}
.species-card:hover .species-card__cta {
    opacity: 1; transform: translateY(0);
}
.species-card__cta-label {
    font-family: var(--font-mono); font-size: .62rem;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--emerald);
}
.species-card__cta-arrow {
    width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid var(--emerald-rule);
    background: rgba(90,158,58,.15);
    display: flex; align-items: center; justify-content: center;
    color: var(--emerald); font-size: .7rem;
    transition: background .2s, border-color .2s;
}
.species-card:hover .species-card__cta-arrow {
    background: var(--emerald); border-color: var(--emerald);
    color: var(--white);
}

/* Shimmer sweep on hover */
.species-card::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255,255,255,.04) 50%,
        transparent 70%
    );
    transform: translateX(-100%);
    transition: transform .6s ease;
    pointer-events: none;
}
.species-card:hover::after { transform: translateX(100%); }
.swiper-button-next, .swiper-button-prev {
    & svg {
    height: 53% !important;
    }
}
/* ═══════════════════════════════════════════════════
SPECIES ROWS
═══════════════════════════════════════════════════ */
.species-section {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-card);
    margin-bottom: 2rem;
    position: relative;
}
/* Left accent strip */
.species-section::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--species-accent, var(--emerald));
}

.species-meta {
    padding: 2.25rem 2rem 2.25rem 2.5rem;
    height: 100%;
}
.species-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--font-mono);
    font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--species-color, var(--emerald));
    background: var(--species-bg, rgba(90,158,58,.1));
    border: 1px solid var(--species-border, rgba(90,158,58,.25));
    padding: .36rem .8rem .24rem;
    border-radius: 100px;
    margin-bottom: 1.25rem;
}
.species-title {
    font-family: var(--font-display);
    font-size: 2rem; font-weight: 700;
    color: var(--ink); line-height: 1.1;
    margin-bottom: .75rem;
}
.species-desc {
    font-size: .875rem; color: var(--ink-2);
    line-height: 1.75; margin-bottom: 1.5rem;
}
.species-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; }
.species-tag {
    font-family: var(--font-mono);
    font-size: .7rem; letter-spacing: .06em;
    color: var(--ink-3);
    background: rgba(255,255,255,.04);
    border: 1px solid transparent;
    padding: .28rem .7rem; border-radius: 100px;
    text-decoration: none;
    transition: all .15s;
}
.species-tag:hover { color: var(--ink); border-color: var(--rule-warm); background: rgba(255,255,255,.08); }
.species-tally {
    font-family: var(--font-mono);
    font-size: .72rem; color: var(--ink-3);
    border-top: 1px solid var(--rule);
    padding-top: 1rem; margin-top: .5rem;
}
.species-tally strong { color: var(--emerald); }

/* ═══════════════════════════════════════════════════
    CATEGORY PILL GRID
═══════════════════════════════════════════════════ */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .75rem;
}
@media (max-width: 991px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .cat-grid { grid-template-columns: repeat(2, 1fr); } }

.cat-card {
    display: flex; flex-direction: column;
    align-items: flex-start;
    padding: 1.4rem 1.4rem 1.2rem;
    border-radius: var(--radius-lg);
    text-decoration: none;
    position: relative; overflow: hidden;
    transition: border-color .25s, transform .25s, box-shadow .25s;
    background: var(--bg-card);
}
.cat-card::before {
    content: '';
    position: absolute; inset: 0;
    background: var(--cat-tint, rgba(90,158,58,.05));
    opacity: 0; transition: opacity .25s;
}
.cat-card:hover { border-color: var(--cat-border, var(--emerald-rule)); transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.4); }
.cat-card:hover::before { opacity: 1; }
.cat-card__icon {
    font-size: 1.5rem;
    color: var(--cat-color, var(--emerald));
    margin-bottom: 1rem; position: relative;
}
.cat-card__name {
    font-family: var(--font-display);
    font-size: 1rem; font-weight: 700;
    color: var(--ink); margin-bottom: .3rem; position: relative;
}
.cat-card__count {
    font-family: var(--font-mono);
    font-size: .65rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-3); position: relative;
}
.splist-count-title{
    font-family:var(--font-mono);
    font-size:.65rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    display:block;
    margin-bottom:.4rem;
    color: var(--cat-color);
}
.splist-sum-title{
    color: var(--cat-color);
}
.cat-marine  { --cat-color: #5ab4c8; --cat-tint: rgba(26,58,74,.3);   --cat-border: rgba(90,180,200,.3); }
.cat-bird    { --cat-color: #6abf5e; --cat-tint: rgba(42,58,26,.3);   --cat-border: rgba(106,191,94,.3); }
.cat-plant   { --cat-color: #4aaf80; --cat-tint: rgba(26,48,32,.3);   --cat-border: rgba(74,175,128,.3); }
.cat-bug     { --cat-color: #c87820; --cat-tint: rgba(58,42,16,.3);   --cat-border: rgba(200,120,32,.3); }
.cat-wild    { --cat-color: #c85858; --cat-tint: rgba(58,26,26,.3);   --cat-border: rgba(200,88,88,.3); }

.cat-tag  { --cat-color: #dbf776; --cat-tint: rgba(114, 95, 56, 0.3);   --cat-border: rgba(171, 200, 90, 0.3); }

/* per-species colour vars */
.sp-marine {
    --species-accent:  #5ab4c8;
    --species-color:   #5ab4c8;
    --species-bg:      rgba(26,58,74,.55);
    --species-border:  rgba(90,180,200,.25);
}
.sp-bird {
    --species-accent:  #6abf5e;
    --species-color:   #6abf5e;
    --species-bg:      rgba(42,58,26,.55);
    --species-border:  rgba(106,191,94,.25);
}
.sp-plant {
    --species-accent:  #4aaf80;
    --species-color:   #4aaf80;
    --species-bg:      rgba(26,48,32,.55);
    --species-border:  rgba(74,175,128,.25);
}
.sp-bug {
    --species-accent:  #c87820;
    --species-color:   #c87820;
    --species-bg:      rgba(58,42,16,.55);
    --species-border:  rgba(200,120,32,.25);
}
.sp-wild {
    --species-accent:  #c85858;
    --species-color:   #c85858;
    --species-bg:      rgba(58,26,26,.55);
    --species-border:  rgba(200,88,88,.25);
}




/* ── Photo grid ── */
.species-photos { padding: 1.5rem; border-left: 1px solid var(--rule);}

.photo-hero {
    border-radius: var(--radius);
    overflow: hidden; position: relative;
    height: 252px; margin-bottom: .75rem;
}
.photo-hero img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.photo-hero:hover img { transform: scale(1.04); }
.photo-hero__veil {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.2) 45%, transparent 100%);
}
.photo-hero__body {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 1.25rem 1.25rem 1.25rem 1.25rem;
    display: flex; justify-content: space-between; align-items: flex-end;
}
.photo-hero__name {
    font-family: var(--font-display);
    font-size: 1.1rem; font-weight: 700;
    color: var(--ink); line-height: 1.25;
    margin-bottom: .2rem;
}
.photo-hero__sub {
    font-size: .75rem; color: rgba(240,237,230,.6);
}
.photo-hero__btn {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--species-bg); color: var(--white);
    font-family: var(--font-mono); font-size: .68rem;
    font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
    padding: .55rem 1.1rem; border-radius: var(--radius);
    text-decoration: none; white-space: nowrap;
    transition: var(--easing-std);
    flex-shrink: 0; margin-left: 1rem; border: 1px solid var(--species-border);
}
.photo-hero__btn:hover { background: var(--species-accent); color: var(--black); transition: var(--easing-std); }

.photo-thumb {
    border-radius: var(--radius);
    overflow: hidden; position: relative;
    height: 148px; display: block; text-decoration: none;
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.photo-thumb:hover img { transform: scale(1.07); }
.photo-thumb__veil {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 55%);
}
.photo-thumb__body {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: .65rem .75rem;
}
.photo-thumb__cat {
    font-family: var(--font-mono);
    font-weight: bold;
    font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--white); margin-bottom: .2rem; display: block;
}
.photo-thumb__name {
    font-size: .8rem; font-weight: 500;
    color: var(--ink); line-height: 1.3;
}
.photo-empty {
    height: 148px; border-radius: var(--radius);
    border: 1px dashed rgba(255,255,255,.08);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: .4rem; color: var(--ink-4); font-size: .8rem;
    background: rgba(255,255,255,.02);
}
.photo-empty i { font-size: 1.75rem; color: var(--ink-4); }

/* ═══════════════════════════════════════════════════
    SPECIES CARD GRID
═══════════════════════════════════════════════════ */
.sp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
@media (max-width: 1199px) { .sp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .sp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px)  { .sp-grid { grid-template-columns: 1fr; } }

/* ── Full-image overlay card ── */
.sp-card {
    display: block; text-decoration: none;
    border-radius: var(--radius-lg);
    overflow: hidden; position: relative;
    aspect-ratio: 4 / 4;          /* portrait — taller than wide */
    border: 1px solid var(--black);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    cursor: pointer;
}
.sp-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 56px rgba(0,0,0,.65);
    border-color: rgba(90,180,200,.4);
}

/* Full-bleed photo */
.sp-card__img {
    position: absolute; inset: 0;
    overflow: hidden;
}
.sp-card__img img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .65s cubic-bezier(.25,.46,.45,.94);
    will-change: transform;
}
.sp-card:hover .sp-card__img img { transform: scale(1.08); }

/* Permanent bottom gradient — always visible so name is readable */
.sp-card__veil {
    position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(
            to top,
            rgba(8,12,10,.95)  0%,
            rgba(8,12,10,.60) 32%,
            rgba(8,12,10,.15) 58%,
            transparent       78%
        );
    transition: background .35s ease;
}
/* On hover deepen the veil slightly to improve text contrast */
.sp-card:hover .sp-card__veil {
    background:
        linear-gradient(
            to top,
            rgba(8,12,10,.98)  0%,
            rgba(8,12,10,.75) 40%,
            rgba(8,12,10,.25) 65%,
            transparent       82%
        );
}

/* Teal left accent strip */
.sp-card__accent {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: #5ab4c8; z-index: 3;
    transform: scaleY(0); transform-origin: bottom center;
    transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.sp-card:hover .sp-card__accent { transform: scaleY(1); }

/* Badge icons — top-left corner */
.sp-card__badges {
    position: absolute; top: .75rem; left: .85rem;
    display: flex; gap: .35rem; z-index: 4;
}
.sp-card__badges img {
    border-radius: 4px;
    filter: drop-shadow(0 1px 5px rgba(0,0,0,.7));
    transition: transform .15s;
}
.sp-card__badges img:hover { transform: scale(1.2); }

/* Text overlay — sits at the bottom, always visible */
.sp-card__body {
    position: absolute; bottom: 0; left: 0; right: 0;
    z-index: 2; padding: 1.1rem 1.1rem 1.1rem 1.2rem;
}
.sp-card__name {
    font-family: var(--font-display);
    font-size: 1rem; font-weight: 700;
    color: var(--ink); line-height: 1.2;
    margin-bottom: .2rem;
    text-shadow: 0 1px 6px rgba(0,0,0,.7);
}
.sp-card__latin {
    font-family: var(--font-mono);
    font-size: .65rem; letter-spacing: .04em;
    font-style: italic; color: rgba(240,237,230,.55);
    line-height: 1.3; margin-bottom: 0;
    text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

/* "View species" CTA — hidden until hover, slides up */
.sp-card__cta {
    display: flex; align-items: center; gap: .4rem;
    font-family: var(--font-mono); font-size: .65rem;
    letter-spacing: .12em; text-transform: uppercase;
    color: #5ab4c8;
    margin-top: .6rem;
    opacity: 0; transform: translateY(6px);
    transition: opacity .25s .05s ease, transform .25s .05s ease;
}
.sp-card:hover .sp-card__cta { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════════════════
    PAGINATION
═══════════════════════════════════════════════════ */
.ot-pagination {
    display: flex; align-items: center; justify-content: center;
    gap: .4rem; flex-wrap: wrap;
    margin-top: 3rem;
}
.ot-pagination__info {
    width: 100%; text-align: center;
    font-family: var(--font-mono); font-size: .68rem;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-4); margin-bottom: .85rem;
}
.ot-page-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 .6rem;
    font-family: var(--font-mono); font-size: .78rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    background: var(--bg-2); color: var(--ink-3);
    cursor: pointer; text-decoration: none;
    transition: all .18s ease; user-select: none;
}
.ot-page-btn:hover {
    border-color: rgba(90,180,200,.4);
    background: rgba(26,58,74,.3); color: #5ab4c8;
}
.ot-page-btn.active {
    background: rgba(90,180,200,.15);
    border-color: rgba(90,180,200,.55);
    color: #5ab4c8; font-weight: 600;
    box-shadow: 0 0 0 1px rgba(90,180,200,.2);
}
.ot-page-btn:disabled,
.ot-page-btn[aria-disabled="true"] {
    opacity: .3; cursor: not-allowed; pointer-events: none;
}
.ot-page-btn--sep {
    background: transparent; border-color: transparent;
    color: var(--ink-4); cursor: default; pointer-events: none;
}
/* ═══════════════════════════════════════════════════
   CONTENT SECTIONS
═══════════════════════════════════════════════════ */
.od-section {
    background: var(--bg-card);
    border-radius: var(--radius-lg); overflow: hidden;
    position: relative;
}
.od-section__head {
    padding: 1.25rem 1.75rem; border-bottom: 1px solid var(--rule);
    background: var(--bg-3); display: flex; align-items: center; gap: .8rem;
}
.od-section__head-icon {
    width: 32px; height: 32px; border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    background: var(--emerald-dim);
    color: var(--emerald); font-size: .78rem; flex-shrink: 0;
}
.od-section__head-title {
    font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0;
}
/* The body carries the copy colour itself, not only its paragraphs: editor
   content that arrives without a <p> wrapper would otherwise inherit
   Bootstrap's near-black #212529 and vanish on the dark card. */
.od-section__body {
    padding: 1.75rem 2rem;
    font-size: .9rem; color: var(--ink-3); line-height: 1.9;
}
.od-section__body p {
    font-size: .9rem; color: var(--ink-3); line-height: 1.9; margin-bottom: 1.1rem;
}
.od-section__body p:last-child { margin-bottom: 0; }
.od-section__body a { color: var(--teal); text-decoration: none; }
.od-section__body a:hover { color: #8ed4e4; text-decoration: underline; }
/* ═══════════════════════════════════════════════════
    ID image gallery
═══════════════════════════════════════════════════ */
.id-gallery {
    display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.5rem;
}
.id-item {
    flex: 1; min-width: 220px; max-width: 340px;
    border-radius: var(--radius-lg); overflow: hidden;
    background: var(--bg-3); border: 1px solid transparent;
    cursor: pointer; transition: border-color .25s, transform .2s;
    text-decoration: none; display: block;
}
.id-item:hover { border-color: var(--emerald-rule); transform: translateY(-3px); }
.id-item__img-wrap {
    position: relative; aspect-ratio: 4/3; overflow: hidden;
}
.id-item__img-wrap img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s ease;
}
.id-item:hover .id-item__img-wrap img { transform: scale(1.06); }
.id-item__zoom {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(14,16,15,.7); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink); font-size: .9rem; opacity: 0; transition: opacity .2s;
}
.id-item:hover .id-item__zoom { opacity: 1; }
.id-item__caption {
    padding: .75rem 1rem; font-family: var(--font-mono); font-size: .65rem;
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}



/* ═══════════════════════════════════════════════════════
    ALA Map
═══════════════════════════════════════════════════════ */
#map {
    height: 240px; border-radius: var(--radius-lg);
    margin-bottom: .65rem;
    overflow: hidden;
    filter: hue-rotate(90deg) saturate(2.4) brightness(0.9);
}
.leaflet-container a {
    color: #433C1E !important;
}
/* Force Leaflet tiles to display properly on dark page */
.leaflet-container { background: var(--bg-3) !important; }

.sp-map-note {
    font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em;
    color: var(--ink-3); text-align: center;
}
.sp-map-note a { color: var(--emerald); text-decoration: none; }
.sp-map-note a:hover { color: var(--emerald-lt); }

/* ═══════════════════════════════════════════════════════
   INTRO / BODY TEXT
═══════════════════════════════════════════════════════ */
.sp-body-text {
    font-size: .925rem; color: var(--ink-2); line-height: 1.85;
    margin-bottom: 1.5rem;
}
.sp-body-text a { color: var(--emerald); text-decoration: none; border-bottom: 1px solid var(--emerald-rule); }
.sp-body-text a:hover { color: var(--emerald-lt); }
.sp-body-text p { margin-bottom: 1rem; }

/* Mobile field facts and progressively disclosed reference material */
.sp-mobile-summary { display: none; margin-bottom: 1.5rem; }
.sp-mobile-summary__overline {
    font-family: var(--font-mono); font-size: .62rem; letter-spacing: .17em;
    text-transform: uppercase; color: var(--emerald-lt); margin-bottom: .65rem;
}
.sp-fact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
}
.sp-fact {
    min-width: 0; min-height: 82px; padding: .75rem;
    background: var(--bg-card);
    border-radius: var(--radius);
}
.sp-fact__label {
    display: block; font-family: var(--font-mono); font-size: .6rem;
    letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4);
}
.sp-fact__value {
    display: block; margin-top: .4rem;
    font-size: .8rem; font-weight: 600; line-height: 1.5; color: var(--ink-2);
    overflow-wrap: anywhere;
}
.sp-disclosure > summary { display: none; }
.sp-disclosure__body { min-width: 0; }

@media (max-width: 767px) {
    .sp-mobile-summary { display: block; }
    .sp-description-cards { display: none; }

    .sp-disclosure {
        padding: 0 !important;
        overflow: hidden;
    }
    .sp-disclosure > summary {
        min-height: 52px;
        display: flex; align-items: center; gap: .75rem;
        padding: .65rem 1rem;
        list-style: none; cursor: pointer;
        border-bottom: 1px solid transparent;
        font-family: var(--font-display); font-size: .875rem; font-weight: 600;
        color: var(--ink);
    }
    .sp-disclosure > summary::-webkit-details-marker { display: none; }
    .sp-disclosure > summary::marker { content: ''; }
    .sp-disclosure__icon {
        margin-left: auto; flex-shrink: 0;
        color: var(--emerald-lt);
        transition: transform .2s ease;
    }
    .sp-disclosure[open] > summary {
        border-bottom-color: var(--rule);
    }
    .sp-disclosure[open] > summary .sp-disclosure__icon {
        transform: rotate(45deg);
    }
    .sp-disclosure__body {
        overflow: hidden;
    }
    .sp-disclosure--distribution .sp-disclosure__body {
        padding: .75rem;
    }
    .sp-disclosure--classification .sp-disclosure__body,
    .sp-disclosure--synonyms .sp-disclosure__body {
        padding: 1rem 1.1rem;
    }
    .sp-disclosure--classification .sp-disclosure__body > h2,
    .sp-disclosure--synonyms .sp-disclosure__body > h2 {
        display: none;
    }
    .sp-disclosure--references .sp-disclosure__body {
        padding: 0;
    }
}

@media (min-width: 768px) {
    .sp-mobile-summary { display: none; }
    .sp-disclosure > summary { display: none; }
    .sp-disclosure__body { display: block; }
}

@media (max-width: 380px) {
    .sp-fact-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
   DETAIL CARDS (distribution / habitat / size)
═══════════════════════════════════════════════════════ */
.detail-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg); padding: 1.25rem;
    height: 100%; position: relative; overflow: hidden;
    transition: none;
}
.detail-card:hover { }
.detail-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background: var(--card-top, var(--emerald));
}
.detail-card--dist  { --card-top: #5ab4c8; }
.detail-card--hab   { --card-top: #4aaf80; }
.detail-card--size  { --card-top: var(--emerald); }
.detail-card__label {
    font-family: var(--font-mono); font-size: .65rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--ink-3);
    margin-bottom: .6rem; display: flex; align-items: center; gap: .45rem;
}
.detail-card__label i { color: var(--emerald); }
.detail-card__body { font-size: .875rem; color: var(--ink-2); line-height: 1.7; }

/* ═══════════════════════════════════════════════════════
   ID SECTION — image thumbnails
═══════════════════════════════════════════════════════ */
.id-thumb-wrap {
    display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.25rem;
}
.id-thumb {
    position: relative; border-radius: var(--radius-lg);
    overflow: hidden; border: 1px solid transparent;
    transition: border-color .2s, transform .2s;
    flex: 1; min-width: 160px;
}
.id-thumb:hover { border-color: var(--emerald-rule); transform: translateY(-2px); }
.id-thumb img { width: 100%; height: 180px; object-fit: cover; display: block; }
.id-thumb__label {
    background: rgba(14,16,15,.85); padding: .5rem .75rem;
    font-family: var(--font-mono); font-size: .65rem;
    letter-spacing: .1em; text-transform: uppercase; color: var(--emerald);
}
.id-thumb .zoomix {
    position: absolute; top: .5rem; right: .5rem;
    background: rgba(90,158,58,.2);
    color: var(--emerald); width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius); font-size: .75rem;
    opacity: 0; transition: opacity .2s;
}
.id-thumb:hover .zoomix { opacity: 1; }

/* ═══════════════════════════════════════════════════════
    SIMILAR SPECIES — Swiper
═══════════════════════════════════════════════════════ */
/* COMMENTED OUT FOR TESTING — duplicate of the showcase Swiper block near the
   top of this file (approx L15-35). These use the same *global* Swiper
   selectors rather than being scoped to the similar-species carousel, so they
   silently overrode the showcase swiper everywhere: buttons 38px instead of
   40px, arrow glyphs .8rem instead of .85rem, and pagination bullets lost the
   30x10 pill shape and 10px radius.
   With this block disabled, the L15-35 values apply to both carousels.
   If the similar-species carousel needs its own sizing, restore this block
   and prefix each selector with its container (e.g. .sim-swiper .swiper-...).
.ot-swiper { padding-bottom: 3rem !important; }
.swiper-button-next,.swiper-button-prev {
    color: var(--emerald) !important;
    background: var(--bg-card); border: 1px solid var(--rule-warm);
    width: 38px !important; height: 38px !important;
    border-radius: var(--radius) !important; top: 44% !important;
    transition: background .2s;
}
.swiper-button-next:hover,.swiper-button-prev:hover { background: var(--emerald-dim); }
.swiper-button-next::after,.swiper-button-prev::after { font-size: .8rem !important; font-weight: 700 !important; }
.swiper-pagination-bullet { background: var(--ink-4) !important; opacity: 1 !important; }
.swiper-pagination-bullet-active { background: var(--emerald) !important; }
*/

/* Similar species card */

.ot-swiper { overflow: hidden; }
.ot-swiper .swiper-slide { box-sizing: border-box;}
.sim-card {
    display: flex; gap: .85rem; align-items: flex-start;
    background: var(--bg-card);
    border-radius: var(--radius-lg); padding: .85rem; overflow: hidden;
    text-decoration: none; transition: border-color .2s, transform .2s;
}
.sim-card:hover { border-color: var(--emerald-rule); transform: translateX(3px); }
.sim-card__img {
    width: 80px; height: 120px; border-radius: var(--radius);
    overflow: hidden; flex-shrink: 0;
}
.sim-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sim-card__body { flex: 1; min-width: 0; }
.sim-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; margin-bottom: .4rem; }
.sim-card__name {
    font-family: var(--font-display); font-size: 1rem; font-weight: 700;
    color: var(--ink); line-height: 1.2; letter-spacing: -.01em;
}
.sim-card__latin {
    font-family: var(--font-mono); font-style: italic;
    font-size: .68rem; color: var(--emerald); margin-bottom: .4rem; display: block;
}
.sim-card__note { font-size: .78rem; color: var(--ink-3); line-height: 1.5; }

/* ═══════════════════════════════════════════════════════
    SIDEBAR INFOBOXES
═══════════════════════════════════════════════════════ */

.sp-meta-label {
    font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-4);
    white-space: nowrap;
}
.sp-meta-value { font-size: .875rem; color: var(--ink-2); }
.sp-meta-value a { color: var(--emerald); text-decoration: none; }
.sp-meta-value a:hover { color: var(--emerald-lt); }
.sp-meta-row { display: flex; gap: .75rem; margin-bottom: .55rem; align-items: baseline; }
/* Light theme: the small mono card labels (Common Name, Origin, Tags, Share)
   measured 3.13:1 on the ivory card; --ink-2 clears 4.5. */
html[data-theme="light"] .sp-meta-label { color: var(--ink-2); }
/* The Share card's label, spaced like the Tags card above it. */
.sp-share__label { margin-bottom: .6rem; }
.sp-meta-row:last-child { margin-bottom: 0; }
/* The status badge cannot break, so in a narrow sidebar (768px) it pushed past
   the column. Only the row holding it may wrap; the badge drops under its label. */
.sp-meta-row:has(> .sp-status-badge) { flex-wrap: wrap; }

/* Tags */
.sp-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.sp-tag {
    font-family: var(--font-mono); font-size: .65rem; letter-spacing: .06em;
    background: rgba(255,255,255,.04);
    color: var(--ink-3); padding: .2rem .6rem; border-radius: 100px;
    text-decoration: none; transition: all .15s;
}
.sp-tag:hover { color: var(--emerald); background: var(--emerald-dim); }

/* Articles about this species — the reverse of the article page's
   "Species in this Article" list: thumbnail, title, date and read time. */
.sp-article {
    display: flex; align-items: center; gap: .75rem;
    padding: .6rem 0; border-bottom: 1px solid var(--rule);
    text-decoration: none;
}
.sp-article:last-child { border-bottom: none; padding-bottom: 0; }
.sp-article__thumb {
    width: 48px; height: 48px; flex-shrink: 0;
    border-radius: var(--radius); overflow: hidden; background: var(--bg-3);
    display: flex; align-items: center; justify-content: center;
}
.sp-article__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-article__thumb--none i { color: var(--ink-3); }
.sp-article__body { flex: 1; min-width: 0; display: block; }
.sp-article__title {
    display: block; margin-bottom: .15rem;
    font-family: var(--font-display); font-size: .82rem; font-weight: 600; line-height: 1.35;
    color: var(--ink); transition: color .15s;
}
.sp-article__meta {
    display: block;
    font-family: var(--font-mono); font-size: .62rem; letter-spacing: .04em; color: var(--ink-2);
}
.sp-article__go { color: var(--ink-3); flex-shrink: 0; transition: color .15s, transform .15s; }
.sp-article:hover .sp-article__title { color: var(--emerald-lt); }
.sp-article:hover .sp-article__go { color: var(--emerald-lt); transform: translateX(2px); }
.sp-article:focus-visible { outline: 2px solid var(--emerald-lt); outline-offset: 2px; border-radius: var(--radius); }
html[data-theme="light"] .sp-article:hover .sp-article__title,
html[data-theme="light"] .sp-article:hover .sp-article__go { color: var(--emerald-drk); }

/* Small screens: the same collapsed treatment as Classification and Synonyms. */
@media (max-width: 767px) {
    .sp-disclosure--articles .sp-disclosure__body { padding: .5rem 1.1rem 1rem; }
    .sp-disclosure--articles .sp-disclosure__body > h2 { display: none; }
}
/* "Browse groups within …" above the group pills on a taxon page. It was a bare
   <p> and fell to Bootstrap's body colour and font — 1.24:1 in dark theme. */
.sp-taxon-groups__intro { font-family: var(--font-body); font-size: .88rem; color: var(--ink-2); margin: 0 0 .75rem; }

/* Classification list */
.classif-block {
    background: var(--bg-card);
    border-radius: var(--radius-lg); padding: 1rem 1.1rem; margin-bottom: .75rem;
}
.classif-block h2 {
    font-family: var(--font-display); font-size: 1rem; font-weight: 700;
    color: var(--ink); margin-bottom: .75rem;
}
.classif-row {
    display: flex; gap: .5rem; align-items: baseline;
    padding: .25rem 0; border-bottom: 1px solid var(--rule); font-size: .8rem;
}
.classif-row:last-child { border-bottom: none; }
/* Between 768 and 991px the sidebar is a third of the page, and a 90px rank
   column left the name about 70px — "quadridentatus" ran past the card and
   widened the page, and forcing it to break split names mid-word. Stack the
   rank above the value there instead, so each name keeps the full card width
   and stays whole. break-word remains only as a last resort for a name longer
   than the whole card. */
.classif-val { min-width: 0; overflow-wrap: break-word; }
@media (min-width: 768px) and (max-width: 991.98px) {
    .classif-row { flex-wrap: wrap; gap: .1rem .5rem; }
    /* .classif-row qualifies it: the base .classif-rank width comes later in this sheet. */
    .classif-row .classif-rank { width: 100%; }
}
.classif-rank {
    font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-4); width: 90px; flex-shrink: 0;
}
.classif-val { color: var(--ink-2); }
/*
 * Only the identification itself is emphasised — the rank the record actually
 * stops at. Everything above it is context, genus included: a record known
 * only to Callochiton should not read like a named species.
 */
.classif-val--leaf {
    color: var(--emerald); font-family: var(--font-mono); font-size: .9rem;
}

/*
 * Genus and below arrive wrapped in <em>. Only the identification keeps the
 * italics: above it the lineage reads as context, so a genus row sits flat
 * alongside its family rather than looking like a name in its own right.
 */
.classif-val em { font-style: normal; }
.classif-val--leaf em { font-style: italic; }

/* An aside rather than a rank: "identified only to genus", "no synonyms". */
.classif-val--note { font-style: italic; }

/* Ref infobox */
.ref-infobox {
    background: var(--bg-card);
    border-radius: var(--radius-lg); overflow: hidden; margin-bottom: .75rem;
}
.ref-row {
    display: flex; gap: .75rem; padding: .6rem 1rem;
    border-bottom: 1px solid var(--rule); align-items: baseline;
    font-size: .82rem;
}
.ref-row:last-child { border-bottom: none; }
.ref-row__label {
    font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-4); white-space: nowrap; flex-shrink: 0; min-width: 90px;
}
.ref-row__val { color: var(--ink-2); }
.ref-row__val a { color: var(--emerald); text-decoration: none; }
.ref-row__val a:hover { color: var(--emerald-lt); }


/* ═══════════════════════════════════════════════════════
    PHOTO GALLERY
═══════════════════════════════════════════════════════ */
#masonry {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .75rem;
}
.species-galitem {
    position: relative; border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform .2s;
    aspect-ratio: 1 / 1;
}
.species-galitem:hover { transform: translateY(-2px); }
.species-galitem img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .4s ease;
}
.species-galitem:hover img { transform: scale(1.06); }
.species-galitem .zoomix {
    position: absolute; top: .5rem; right: .5rem;
    background: rgba(90,158,58,.2);
    color: var(--emerald); width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius); font-size: .75rem;
    opacity: 0; transition: opacity .2s;
}
.species-galitem:hover .zoomix { opacity: 1; }
.section-empty {
        background: var(--bg-card);
        border-radius: var(--radius-lg); padding: 3rem 2rem; text-align: center;
    }
.section-empty__icon { font-size: 2rem; color: var(--ink-4); margin-bottom: .75rem; display: block; }
.section-empty__text { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }

/* ═══════════════════════════════════════════════════════
    FILES TABLE
═══════════════════════════════════════════════════════ */
.files-table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    border-radius: var(--radius-lg); overflow: hidden;
}
.files-table thead tr {
    background: #202c20;
    border-bottom: 1px solid var(--rule-warm);
}
.files-table thead th {
    font-family: var(--font-mono); font-size: .62rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--ink-4);
    padding: .8rem 1rem; white-space: nowrap;
}
.files-table tbody tr {
    border-bottom: 1px solid var(--rule);
    transition: background .15s;
}
.files-table tbody tr:last-child { border-bottom: none; }
.files-table tbody tr:hover { background: rgba(255,255,255,.025); }
.files-table tbody td {
    padding: .9rem 1rem; font-size: .85rem; color: var(--ink-2);
    vertical-align: middle;
}
.files-table .file-icon { font-size: 1.5rem; color: var(--emerald); }
.files-table .file-name { font-weight: 500; color: var(--ink); margin-bottom: .2rem; }
.files-table .file-desc { font-size: .75rem; color: var(--ink-3); }
.files-table .version-chip {
    font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em;
    background: var(--emerald-dim);
    color: var(--emerald); padding: .15rem .55rem; border-radius: 100px;
}
.files-table .file-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em;
    padding: .4rem .85rem; border-radius: var(--radius); text-decoration: none;
    transition: all .15s; white-space: nowrap;
    margin: .15rem;
}
.file-btn--dl { color: var(--emerald); border-color: var(--emerald-rule); background: var(--emerald-dim); }
.file-btn--dl:hover { background: var(--emerald); color: var(--white); border-color: var(--emerald); }
.file-btn--info { color: var(--ink-3); border-color: transparent; background: transparent; }
.file-btn--info:hover { color: var(--ink); border-color: var(--rule-warm); background: rgba(255,255,255,.05); }
.cc-icons { color: var(--ink-3); font-size: .75rem; }



/* ── MODAL overrides ── */
.modal-content { background:var(--bg-2); border-radius:var(--radius-xl); }
.modal-header { border-bottom:none; }
.modal-header .modal-title { font-family:var(--font-display); color:var(--ink); font-size:1.1rem; font-weight:700; }
.modal-header .btn-close { filter: invert(1) opacity(.5); }
.modal-header .btn-close:hover { filter: invert(1) opacity(1); }

/* The scientific name in a modal heading. */
.modal-header .sp-modal-sciname { color: var(--emerald-lt); font-style: italic; }
.modal-body { color:var(--ink-2); font-size:.875rem; line-height:1.75; }
.citations-li {
    display: flex; flex-direction: column; gap: .3rem;
    padding: .85rem 0; border-bottom: 1px solid var(--rule);
    list-style: none;
}
.citations-li:last-child { border-bottom: none; }
.text-bit { color: var(--ink-2); }
.date-bit { font-family: var(--font-mono); font-size: .7rem; color: var(--ink-3); }

@media(max-width:767px){
    #masonry { grid-template-columns: repeat(2,1fr); }
    .files-table thead { display:none; }
    .files-table tbody tr { display:block; margin-bottom:1rem; border-radius:var(--radius-lg); }
    .files-table tbody td { display:block; border:none; padding:.5rem 1rem; }
}


/* x-species.css infoboxes */
.species-infobox,
.ref-infobox,
.bg-clasi,
.card.clasi { background: var(--bg-card) !important; color: var(--ink-2) !important; border-color: transparent !important; }

/* x-species.css meta labels/data */
.meta-label { color: var(--ink-4) !important; }
.meta-data, .meta-data-alias, .meta-tags { color: var(--ink-2) !important; }
.meta-tags a { color: var(--emerald) !important; text-decoration: none; }

/* x-blog-news.css list items (used in similar species swiper) */
.news-list-item { background: var(--bg-card) !important; border-color: transparent !important; color: var(--ink-2) !important; }
.news-list-item:hover { border-color: var(--emerald-rule) !important; }
.news-list-zztitle { color: var(--ink) !important; font-family: var(--font-display); margin-bottom: .15rem; }
.news-list-zzsubtitle { color: var(--emerald) !important; font-family: var(--font-mono); font-style: italic; font-size: .75rem; }
.news-list-img img { object-fit: cover; width: 100%; height: 100%; }

/* x-gallery.css gallery items */
.img-gallery { display: block; width: 100%; height: 100%; object-fit: cover; }
.species-galitem, .img-gallery { background: var(--bg-card) !important; }

/* Bootstrap bg-light used in details cards (original markup) */
.bg-light { background: var(--bg-card) !important; color: var(--ink-2) !important; }

/* distribution note */
.distribution-note { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em; color: var(--ink-3) !important; }
.distribution-note a { color: var(--emerald) !important; }



/* post-img wrapper used around ID images in original */
.post-img { background: transparent !important; }

/* citations/refs modal list items from x-species */
.citations-li { color: var(--ink-2) !important; }
.text-info-emphasis { color: var(--emerald) !important; }

/* species-nav_list external links trigger */
.species-nav_list { color: var(--ink-3) !important; }
.species-nav_list a { color: var(--emerald) !important; }

/* Bootstrap table defaults */
.table { color: var(--ink-2) !important; background: transparent !important; }
.table thead { background: var(--bg-3) !important; color: var(--ink-3) !important; }
/* Rows, not a grid: Bootstrap draws each cell's bottom edge, so the colour
   stays on that and nothing boxes the cell. */
.table > :not(caption) > * > * { background: var(--bg-card) !important; border-color: var(--rule) !important; border-width: 0 0 1px !important; color: var(--ink-2) !important; }
.table-responsive { background: var(--bg-3) !important; }
 /* Audio player */
.plyr--audio .plyr__controls {
    background: var(--plyr-audio-controls-background,var(--amber-glow));
    border-radius: inherit;
    color: var(--plyr-audio-control-color,var(--emerald));
    padding: var(--plyr-control-spacing,10px);
    border: var(--plyr-audio-border,1px solid var(--emerald-rule));
}

.sp-section__body a:hover {
    color: var(--emerald-lt);
}
.sp-section__body a {
    color: var(--emerald);
    text-decoration: none;
}
.plyr.plyr--audio .plyr__slider__track {
    background-color: var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,rgba(120, 125, 120, 0.6)));
}
.plyr .plyr__slider__thumb {
    background: var(--plyr-range-thumb-background,#b1b1b1);
}

/* ═══════════════════════════════════════════════════
   VIDEO CARD
═══════════════════════════════════════════════════ */
.vid-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg); overflow: hidden;
    transition: transform .2s;
    max-width: 350px;
}
.vid-card:hover { transform: translateY(-2px); }

/* Thumbnail with animated play */
.vid-card__thumb {
    position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-3);
}
.vid-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.vid-card:hover .vid-card__thumb img { transform: scale(1.04); }

/* Play button — animated pulse rings */
.vid-card__play {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(14,16,15,.35); backdrop-filter: blur(1px);
    transition: background .2s;
}
.vid-card:hover .vid-card__play { background: rgba(14,16,15,.15); }

.play-btn {
    position: relative; width: 64px; height: 64px;
    display: flex; align-items: center; justify-content: center;
}
/* Pulse rings */
.play-btn::before,
.play-btn::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid var(--emerald-rule);
    animation: pulse-ring 2.2s ease-out infinite;
}
.play-btn::after { animation-delay: 1.1s; }
@keyframes pulse-ring {
    0%   { transform: scale(1);   opacity: .6; }
    100% { transform: scale(1.8); opacity: 0; }
}
.play-btn__inner {
    position: relative; z-index: 2;
    width: 54px; height: 54px; border-radius: 50%;
    background: var(--emerald-dim); border: 2px solid var(--emerald);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    color: var(--white); font-size: 1.2rem; padding-left: 4px;
    transition: background .2s, transform .2s;
}
.vid-card:hover .play-btn__inner { background: var(--emerald); transform: scale(1.06); }

/* Actions overlay — hidden at rest, slide up on hover */
.vid-card__actions {
    position: absolute; bottom: 0; left: 0; right: 0;
    display: flex; gap: .55rem; flex-wrap: wrap;
    padding: .85rem 1rem;
    background: linear-gradient(transparent, rgba(14,16,15,.92) 60%);
    transform: translateY(8px);
    opacity: 0;
    transition: opacity .28s ease, transform .28s ease;
    pointer-events: none;
}
.vid-card:hover .vid-card__actions {
    opacity: 1; transform: translateY(0); pointer-events: auto;
}
.vid-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--font-mono); font-size: .65rem; letter-spacing: .06em; text-transform: uppercase;
    padding: .45rem .95rem; border-radius: var(--radius); text-decoration: none; transition: all .15s; white-space: nowrap;
}
.vid-btn--yt   { color: var(--white); background: var(--ytube-dim); }
.vid-btn--yt:hover   { background: var(--ytube-lt-dim); color: var(--white); }
.vid-btn--proj { color: var(--white); background: var(--bush-dim); }
.vid-btn--proj:hover { background: var(--bush-lt-dim); color: var(--white); }

/* ═══════════════════════════════════════════════════
   ID TABS
═══════════════════════════════════════════════════ */
.id-tabs {
    display: flex; gap: 0;
    border-bottom: 1px solid var(--rule);
    margin: 1.25rem 0 0;
}
.id-tab {
    display: inline-flex; align-items: center; gap: .45rem;
    font-family: var(--font-mono); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase;
    padding: .73rem 1.25rem .57rem; border: none; background: none; cursor: pointer;
    color: var(--ink-4); border-bottom: 2px solid transparent;
    margin-bottom: -1px; transition: color .18s, border-color .18s;
    position: relative;
}
.id-tab:hover { color: var(--ink-2); }
.id-tab.active { color: var(--amber-lt); border-bottom-color: var(--amber); }
.id-tab--teal.active { color: var(--teal); border-bottom-color: var(--teal); }
.id-tab i { font-size: .7rem; }

.id-pane { display: none; padding-top: 1.25rem; }
.id-pane.active { display: flex; flex-direction: column; align-items: center; }

/* ═══════════════════════════════════════════════════
   ID IMAGE GALLERY
═══════════════════════════════════════════════════ */
.id-gallery { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.25rem; justify-content: center; }
.id-gallery__item {
    flex: 1; min-width: 120px; max-width: 180px;
    position: relative; border-radius: var(--radius-lg); overflow: hidden; transition: none;
    aspect-ratio: 1/1; cursor: pointer;
}
.id-gallery__item:hover { }
.id-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.id-gallery__item:hover img { transform: scale(1.07); }
/* The caption sits on the photo, so it needs its own dark ground: the scrim is
   nearly solid by the time the text starts (padding-top clears the fade), and
   the text is ivory in both themes — muted ink disappeared on light photos. */
.id-gallery__caption {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(to bottom, rgba(14,16,15,0) 0%, rgba(14,16,15,.82) 45%, rgba(14,16,15,.92) 100%);
    padding: 1.4rem .6rem .55rem;
    font-family: var(--font-mono); font-size: .62rem; letter-spacing: .07em; text-transform: uppercase;
    color: #f7f2e8; line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.id-gallery__zoom {
    position: absolute; top: .5rem; right: .5rem;
    background: rgba(14,16,15,.65); border-radius: var(--radius); color: var(--amber);
    font-size: .6rem; padding: .25rem .4rem; opacity: 0; transition: opacity .2s;
}
.id-gallery__item:hover .id-gallery__zoom { opacity: 1; }

/* Section card */
.sp-section {
    background: var(--bg-card); border: 1px solid var(--rule-warm);
    border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 1.25rem;
}
.sp-section__head {
    padding: 1rem 1.5rem;
    background: var(--bg-3); display: flex; align-items: center; gap: .75rem;
}
.sp-section__head-icon {
    width: 30px; height: 30px; border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    background: var(--amber-dim);
    color: var(--amber); font-size: .75rem; flex-shrink: 0;
}
.sp-section__head-title {
    font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0;
}
/* The body carries the copy colour itself, not only its paragraphs: editor
   content that arrives without a <p> wrapper would otherwise inherit
   Bootstrap's near-black #212529 and vanish on the dark card (1.4:1). */
.sp-section__body { padding: 1.5rem; font-size: .9rem; color: var(--ink-3); line-height: 1.85; }
.sp-section__body p { font-size: .9rem; color: var(--ink-3); line-height: 1.85; margin-bottom: 1rem; }
.sp-section__body p:last-child { margin-bottom: 0; }
.sp-section__body a { color: var(--teal); text-decoration: none; }
.sp-section__body a:hover { color: #8ed4e4; }

/* Intro body text */


.files-table .file-btn--info {
    color: var(--teal) !important;
    border-color: var(--teal-rule) !important;
    background: var(--teal-dim) !important;
}
/* ═══════════════════════════════════════════════════
   BACK LINK (species page return)
═══════════════════════════════════════════════════ */
.back-link {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-3); text-decoration: none;
    border-radius: var(--radius);
    padding: .45rem 1rem; transition: all .2s;
}
.back-link:hover { color: var(--emerald); border-color: var(--emerald-rule); background: var(--emerald-dim); }

/* ═══════════════════════════════════════════════════
   DESCRIPTION BLOCKS — side-by-side
═══════════════════════════════════════════════════ */
.desc-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 1.25rem;
}
@media (max-width: 767px) { .desc-grid { grid-template-columns: 1fr; } }

.desc-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg); overflow: hidden;
    display: flex; flex-direction: column;
    transition: border-color .25s;
}
.desc-card--original { border-color: var(--parchment-rule); }
.desc-card--translated { border-color: var(--teal-rule); }

.desc-card__accent {
    height: 3px;
}
.desc-card--original .desc-card__accent {
    background: linear-gradient(90deg, var(--parchment), transparent);
}
.desc-card--translated .desc-card__accent {
    background: linear-gradient(90deg, var(--teal), transparent);
}

.desc-card__body { padding: 1.75rem 2rem 2rem; flex: 1; }

.desc-card__over {
    font-family: var(--font-mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
    margin-bottom: .75rem; display: flex; align-items: center; gap: .5rem;
}
.desc-card--original .desc-card__over { color: var(--parchment); }
.desc-card--translated .desc-card__over { color: var(--teal); }

.desc-card__icon {
    width: 28px; height: 28px; border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem; flex-shrink: 0;
}
.desc-card--original .desc-card__icon { background: var(--parchment-dim); color: var(--parchment); }
.desc-card--translated .desc-card__icon { background: var(--teal-dim); color: var(--teal); }

.desc-card__title {
    font-family: var(--font-display); font-size: 1.1rem; font-weight: 700;
    color: var(--ink); margin-bottom: 1.25rem;
}

/* Latin text styled with old-print font */
.latin-text {
    font-family: var(--font-latin); font-style: italic;
    font-size: 1.15rem; line-height: 1.8; color: var(--parchment);
    background: rgba(200,184,138,.05); border-left: 3px solid var(--parchment-rule);
    padding: 1.1rem 1.4rem; border-radius: 0 var(--radius) var(--radius) 0;
    margin: 0;
}
.translated-text {
    font-family: var(--font-body); font-style: italic;
    font-size: .95rem; line-height: 1.85; color: var(--ink-2);
    background: var(--teal-dim); border-left: 3px solid var(--teal-rule);
    padding: 1.1rem 1.4rem; border-radius: 0 var(--radius) var(--radius) 0;
    margin: 0;
}
.desc-card__footer {
    padding: .75rem 2rem; border-top: 1px solid var(--rule);
    background: var(--bg-3);
}
.desc-card__footnote {
    font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; color: var(--ink-4);
    display: flex; align-items: center; gap: .4rem;
}



/* Term callouts inside explanation */
.term-callout {
    display: inline; background: var(--emerald-dim); color: var(--emerald-lt);
    border-radius: 3px; padding: .05em .35em;
    font-family: var(--font-mono); font-size: .85em; letter-spacing: .03em;
}


/* ═══════════════════════════════════════════════════
   METADATA CARD
═══════════════════════════════════════════════════ */
.meta-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg); overflow: hidden;
    position: relative;
}
.meta-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--parchment), transparent);
}
.meta-card__head {
    padding: 1.1rem 1.75rem; border-bottom: 1px solid var(--rule);
    background: var(--bg-3); display: flex; align-items: center; gap: .75rem;
}
.meta-card__head-icon {
    width: 30px; height: 30px; border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    background: var(--parchment-dim);
    color: var(--parchment); font-size: .72rem; flex-shrink: 0;
}
.meta-card__head-title {
    font-family: var(--font-display); font-size: .95rem; font-weight: 700;
    color: var(--ink); margin: 0;
}
.meta-card__body { padding: 1.5rem 1.75rem; }

.meta-row {
    display: grid; grid-template-columns: 160px minmax(0,1fr);
    gap: .4rem 1.25rem; padding: .65rem 0;
    border-bottom: 1px solid var(--rule); align-items: baseline;
}
.meta-row:last-child { border-bottom: none; }
.meta-label {
    font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-4);
}
.meta-val { font-size: .85rem; color: var(--ink-2); line-height: 1.7; }
.meta-val a { color: var(--teal); text-decoration: none; word-break: break-all; }
.meta-val a:hover { color: #8ed4e4; }
.meta-val strong { color: var(--ink-3); font-weight: 500; }

@media (max-width: 575px) { .meta-row { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════
HERO — compact for a list page
═══════════════════════════════════════════════════ */

.ot-hero__img {
    position: absolute; inset: -15%;
    background: center center / cover no-repeat;
    transform: scale(1.06);
    transition: transform 10s ease-out;
    will-change: transform;
}
.ot-hero__img.ready { transform: scale(1); }
.ot-hero__veil {
    position: absolute; inset: 0;
    background:
        linear-gradient(to bottom, rgba(14,16,15,.45) 0%, rgba(14,16,15,.0) 35%, rgba(14,16,15,.0) 48%, rgba(14,16,15,.88) 76%, rgba(14,16,15,1) 100%),
        linear-gradient(to right, rgba(14,16,15,.5) 0%, transparent 65%);
}
.ot-hero__content {
    position: relative; z-index: 2;
    padding: 5rem 0 4.5rem;
}

.ot-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 6vw, 5.5rem);
    font-weight: 900; line-height: .95;
    letter-spacing: -.03em; color: var(--ink);
    margin-bottom: 1rem;
}
.ot-hero__title em { font-style: italic; color: var(--cat-color, var(--emerald)); }
.ot-hero__sub {
    font-size: .95rem; font-weight: 300;
    color: var(--ink-2); max-width: 460px;
    line-height: 1.7; margin-bottom: 0;
}

/* ── Softer view-species surfaces ──
   Use tonal contrast and depth instead of hard outer hairlines. Internal
   dividers remain in place to preserve structure within each panel. */
.sp-section,
.detail-card,
.sp-infobox,
.classif-block,
.ref-infobox {
    border: 0;
    background: color-mix(in srgb, var(--bg-card) 99%, var(--ink));
    /*box-shadow: 0 10px 28px rgba(0, 0, 0, .18);*/
}

.sp-section__head {
    background: color-mix(in srgb, var(--bg-3) 96%, var(--ink));
}

/* Light theme: species and field-guide surfaces */
html[data-theme="light"] .species-card,
html[data-theme="light"] .detail-card,
html[data-theme="light"] .sp-section,
html[data-theme="light"] .sp-infobox,
html[data-theme="light"] .sp-fact,
html[data-theme="light"] .sp-disclosure,
html[data-theme="light"] .classif-block,
html[data-theme="light"] .ref-infobox,
html[data-theme="light"] .sim-card,
html[data-theme="light"] .vid-card,
html[data-theme="light"] .file-card {
    background-color: var(--bg-card);
    /* No border-color: these are grounds now, and .vid-card keeps the emerald
       edge it is given in the base rather than having it repainted grey. */
    color: var(--ink);
    box-shadow: 0 8px 24px rgba(55,45,28,.06);
}

html[data-theme="light"] .sp-section__head,
html[data-theme="light"] .sp-disclosure summary,
html[data-theme="light"] .ref-row,
html[data-theme="light"] .classif-row {
    border-color: var(--rule);
}

html[data-theme="light"] .sp-section__head,
html[data-theme="light"] .sp-disclosure summary {
    border-bottom: 1px solid var(--rule);
}

html[data-theme="light"] .sp-fact__value,
html[data-theme="light"] .detail-card__body,
html[data-theme="light"] .sp-meta-value,
html[data-theme="light"] .classif-val:not(.classif-val--leaf),
html[data-theme="light"] .ref-row__val,
html[data-theme="light"] .sim-card__note {
    color: var(--ink-2);
}

html[data-theme="light"] .id-tabs {
    background: var(--bg-2);
    border-color: var(--rule);
}

html[data-theme="light"] .id-tab {
    color: var(--ink-2);
    border-color: transparent;
}

html[data-theme="light"] .id-tab.active {
    background: var(--bg-card);
    color: var(--emerald-drk);
    border-color: var(--emerald-rule);
}

html[data-theme="light"] .sp-tag {
    background: rgba(55,62,43,.05);
    color: var(--ink-2);
    /* The edge stays transparent here too, or the box comes back in light. */
}

html[data-theme="light"] .leaflet-container {
    background: #d9ddd2 !important;
}

html[data-theme="light"] .sp-status-badge--introduced {
    background: rgba(169,75,69,.1);
    color: #8d3834;
}

html[data-theme="light"] .sp-status-badge--invasive {
    background: rgba(176,103,28,.1);
    color: #87480f;
}

html[data-theme="light"] .sp-status-badge--no-status,
html[data-theme="light"] .sp-status-badge--not-evaluated,
html[data-theme="light"] .sp-status-badge--data-deficient {
    background: rgba(68,72,61,.07);
    color: #55594d;
}

html[data-theme="light"] .sp-hero .sp-hero__veil {
    background: radial-gradient(
        ellipse at 30% 38%,
        rgba(14,16,15,.12) 0%,
        rgba(14,16,15,.31) 78%,
        rgba(14,16,15,.18) 100%
    );
}

html[data-theme="light"] .sp-hero .sp-hero__veil::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 48%;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(241,236,223,0) 0%,
        rgba(241,236,223,.1) 24%,
        rgba(241,236,223,.34) 48%,
        rgba(241,236,223,.7) 75%,
        var(--bg) 100%
    );
}

/* Hero badges sit over photography, so their contrast cannot depend on the image. */
html[data-theme="light"] .sp-hero .sp-status-badge {
    background: #24271f;
    color: #fff;
}

/* Light theme: the latin name sits low in the hero, where the backdrop has
   faded most of the way to the page background. It was ivory with no shadow,
   so it disappeared. Same protection the hero title already carries — text
   only, the veil is untouched. */
html[data-theme="light"] .sp-hero__latin {
    /*text-shadow: 0 2px 22px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.65);*/
    color: #343331;
}

/* Light theme: the original-description footnote.
   It carries the citation under the transcribed description, and inherits
   --ink-4, which the light token block never redefines — so it kept the dark
   theme's muted grey and sat at 1.47:1 on the --bg-3 footer, effectively
   invisible. --ink-2 is the light secondary-copy token used by the species
   surfaces above, and takes it to 4.68:1. Set on its own rather than folded
   into that group so this one line can be darkened further without touching
   the rest. */
html[data-theme="light"] .desc-card__footnote {
    color: var(--ink-2);
}

/* Light theme: overlay text that sits on a veil which does NOT lighten.
   These four take their colour from --emerald and --ink-3, both of which have
   light variants tuned for parchment. On the species-card veil (rgba(0,0,0,.95))
   and the id-gallery caption gradient (rgba(14,16,15,.85)) that made them
   dimmer than the dark theme — the caption fell to 3.6:1. Pinned to the
   dark-theme values so each component reads identically in both themes, which
   is the point: the card itself never changes. */
html[data-theme="light"] .species-card__latin,
html[data-theme="light"] .species-card__cta-label,
html[data-theme="light"] .species-card__cta-arrow {
    color: #5a9e3a;
}

html[data-theme="light"] .id-gallery__caption {
    color: #f7f2e8; /* on its own dark scrim, not the page ground */
}

/* ── Taxon drill-down ──
   The classification rungs became links to everything beneath them, so they
   need to read as links without turning the block into a wall of colour: the
   underline only appears on hover. Built from the same tokens as the rest, so
   both themes follow automatically. */
.classif-val a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted var(--emerald-rule);
    transition: color .2s ease, border-color .2s ease;
}
.classif-val a:hover,
.classif-val a:focus-visible {
    color: var(--emerald);
    border-bottom-color: var(--emerald);
}
.classif-val a:focus-visible {
    outline: 2px solid var(--emerald);
    outline-offset: 2px;
}

/* Lineage trail under a taxon listing heading. */
.sp-lineage {
    display: inline-block;
    margin-top: .4rem;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .05em;
}
.sp-lineage a { color: var(--emerald-lt); text-decoration: none; }
.sp-lineage a:hover { color: var(--emerald); text-decoration: underline; }

html[data-theme="light"] .sp-lineage a { color: var(--emerald-drk); }
html[data-theme="light"] .sp-lineage a:hover { color: var(--emerald-xdrk); }

@media (prefers-reduced-motion: reduce) {
    .classif-val a { transition: none; }
}

/* ── Light theme contrast, original-description page (2026-09-16) ──
   --ink-3/--ink-4 copy sits at 3.1-4.2:1 on ivory, and the video buttons took
   the global light link green onto their red/amber tints (3.7:1). */
html[data-theme="light"] .od-section__body,
html[data-theme="light"] .od-section__body p,
html[data-theme="light"] .sp-section__body,
html[data-theme="light"] .sp-section__body p { color: var(--ink-2); }
/* The base .meta-label rule is !important. */
html[data-theme="light"] .meta-label { color: var(--ink-2) !important; }
/* On their own red/amber tints over the ivory thumb these need to be this dark
   to clear 4.5:1 — measured against the composited fill, not the page ground. */
html[data-theme="light"] .vid-btn--yt { color: #6e2a26; }
html[data-theme="light"] .vid-btn--proj { color: #5a3a08; }