/*************************
**  Our Tasmania Website
**  Base style sheet that is included on every page
**  Build V. 0.2
**  Build Notes: Rebuild to dark page style from light slightly more modernised design and layout
**
**
**  General Setup
**  NAVBAR          ==> Line 81
**  HERO            ==> Line 120
**  QUICK GUIDES    ==> Line 194
**  INTRO           ==> Line 240
**  SECTION HEADER  ==> Line 264
**
**
**
**
**
**  BREADCRUMBS     ==> Line 336
**  DUO LINKS       ==> Line 180
**  FOOTER          ==> Line 180
**  Light Box images
**  BACK TO TOP     ==> Line 180
**
**
**********************/

:root {
    --black: #000000;
    --bg: #0e100f;
    --bg-2: #151815;
    --bg-3: #1c201c;
    --bg-card: #191d19;
    --rule: rgba(255,255,255,.08);
    --rule-warm: rgba(200,170,110,.15);
    --emerald: #5a9e3a;
    --emerald-drk: #325720;
    --emerald-xdrk: rgb(36, 52, 30);
    --emerald-lt: #7ec257;
    --emerald-dim: rgba(90,158,58,.18);
    --emerald-ltdim: rgba(90,158,58,.38);
    --emerald-xdim: rgba(90, 158, 58, 0.103);
    --emerald-rule: rgba(90,158,58,.35);
    --teal:      #5ab4c8;
    --teal-dim:  rgba(90,180,200,.12);
    --teal-rule: rgba(90,180,200,.35);
    --amber:     #d4963a;
    --amber-lt:  #e8b96a;
    --amber-dim: rgba(212,150,58,.18);
    --amber-xdim: rgb(212 150 58 / 7%);
    --amber-rule:rgba(212,150,58,.35);
    --red:         #e05a5a;
    --red-dim:     rgba(224,90,90,.12);
    --red-rule:    rgba(224,90,90,.3);
    /* Danger / validation family. The member forms (suggest species, suggest
       snorkel, profile, messages) have always styled .form-alert--error with
       --danger / --danger-dim / --danger-rule, but nothing ever declared them:
       the panel resolved to no background, no border and a transparent icon, so
       the error text sat bare on the page background. Declared here for both
       themes so every consumer is corrected at once.
       --danger is the accent (icon, border, left bar); --danger-ink is the text
       weight, which has to differ per theme to stay legible. */
    --danger:      #e05a5a;
    --danger-ink:  #ef8080;
    --danger-dim:  rgba(224,90,90,.14);
    --danger-rule: rgba(224,90,90,.38);
    --mustard:     #d4d13a;
    --mustard-lt:  #e8e66a;
    --mustard-dim: rgba(212, 189, 58, 0.18);
    --mustard-rule:rgba(212, 202, 58, 0.35);
    --yellow:     rgb(222, 226, 0);
    --yellow-lt:  rgb(255, 255, 0);
    --yellow-dim: rgba(255, 255, 0, 0.18);
    --yellow-rule:rgba(255, 255, 0, 0.35);
    --sky:     #3a3dd4;
    --sky-lt:  #6a81e8;
    --sky-dim: rgba(58, 86, 212, 0.18);
    --sky-rule:rgba(61, 58, 212, 0.35);
    --floral:     #d43abf;
    --floral-lt:  #e86ade;
    --floral-dim: rgba(212, 58, 191, 0.18);
    --floral-rule:rgba(212, 58, 199, 0.35);
    --coral:     #963ad4;
    --coral-lt:  #c06ae8;
    --coral-dim: rgba(176, 58, 212, 0.18);
    --coral-rule:rgba(163, 58, 212, 0.35);
    --survey:      #3a9e7d;
    --survey-ltdim: rgba(58, 158, 128, 0.068);
    --survey-dim: rgba(58, 158, 128, 0.18);
    --survey-rule: rgba(58, 158, 133, 0.35);
    --survey-glow: rgba(58, 158, 128, 0.068);
    /* Survey journal note badges (.note-type-badge--* in styles-x-survey.css
       and styles-x-snorkel.css). These were referenced but never declared, so
       the badge text colour silently fell back to inherited ink. Aliased to
       existing tokens so the light theme picks them up automatically. */
    --note-info:    var(--teal);
    --note-warning: var(--amber);
    --note-danger:  var(--red);
    --note-success: var(--emerald);
    --white: #ffffff;
    --ink: #f0ede6;
    --ink-2: #b8b4aa;
    --ink-3: #9e958d;
    --ink-4: #958978;
    --success-bold: rgba(28, 62, 25, 0.75);
    --success-bold-border: rgba(47, 134, 38, 0.72);
    --warning-bold: rgba(189, 154, 15, 0.77);
    --warning-bold-border: rgba(255, 228, 121, 0.81);
    --danger-soft: rgba(200,88,88,.15);
    --danger-col: #c85858;
    --tomahawk-drk: #1a3a5c;
    --bushydp-drk: #3d2811;
    --bushygm-drk: #6e3007;
    --bush: rgb(59, 36, 15);
    --bush-dim: rgba(59, 36, 15,0.22);
    --bush-rule: rgba(59, 36, 15,0.45);
    --bush-lt: rgb(110, 48, 7);
    --bush-lt-dim: rgba(110, 48, 7,0.46);
    --bush-lt-rule: rgba(110, 48, 7,0.74);
    --ytube: rgb(126, 18, 11);
    --ytube-dim: rgba(126, 18, 11,0.22);
    --ytube-rule: rgba(126, 18, 11,0.45);
    --ytube-lt: rgb(138, 49, 44);
    --ytube-lt-dim: rgba(138, 49, 44, 0.32);
    --ytube-lt-rule: rgba(123, 55, 50, 0.45);
    --parchment:   #c8b88a;
    --parchment-dim: rgba(200,184,138,.1);
    --parchment-rule: rgba(200,184,138,.3);
    --ot-text:        #dce8c8;
    --ot-text-muted:  #7a9068;
    --ot-accent:      #4a6741;
    --ot-accent-mid:  #6b8f5e;
    --ot-accent-hi:   #9bb88a;

    /* category tints */
    --marine:    #1a3a4a;
    --marine-lt: #2b6a7a;
    --font-display: 'Rubik', system-ui, sans-serif;
    --font-body: 'Poppins', system-ui, sans-serif;
    --font-mono: 'DM Mono', monospace;
    --font-latin:   'IM Fell English', Georgia, serif;
    --radius: 6px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    --easing-std: all 0.5s ease-in-out;
    --drk-border: rgb(25, 29, 25);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: dark; }
::selection{
    color: var(--parchment);
    background: var(--parchment-dim);
}
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg-2); }
::-webkit-scrollbar-thumb { background:var(--ink-4); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--emerald); }
body {
    font-family: var(--font-body);
    background: var(--bg) !important;
    color: var(--ink);
    overflow-x: hidden;
    /* subtle paper grain */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.032'/%3E%3C/svg%3E");
}

/* Bootstrap's .g-5 pulls a row out by 1.5rem each side, but below 576px the
   container only has .75rem of padding to absorb it, so every page ran 12px
   wider than the screen (the main layout and the footer both use g-5).
   body { overflow-x: hidden } hid that on desktop; iOS Safari does not honour
   it on the viewport. Halving the horizontal gutter at that width stops the
   overhang. The columns are stacked there anyway, so no content moves, and
   the vertical gutter is untouched. .row.g-5 outranks Bootstrap's .g-5, which
   loads after this sheet. */
@media (max-width: 575.98px) {
    .row.g-5 { --bs-gutter-x: 1.5rem; }
}

h1, h2, h3 { font-family: var(--font-display); }
.fs-7{
    font-size: 0.5rem;
}

a{
    color: var(--emerald);
    text-decoration: none;
    transform: var(--easing-std);
}
a:hover{
    color: var(--emerald-lt);
    transform: var(--easing-std);
}
.std_lnk a{
    color: var(--emerald) !important;
    text-decoration: none;
    transform: var(--easing-std);
}
.std_lnk a:hover{
    color: var(--emerald-lt) !important;
    transform: var(--easing-std);
}

/*  shared utilities  */
.overline {
    font-family: var(--font-mono);
    font-size: .65rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--emerald); display: block; margin-bottom: .75rem;
}
.ruled {
    display: flex; align-items: center; gap: 1rem;
    font-family: var(--font-mono); font-size: .65rem;
    letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3);
}
/* Light: --ink-3 on the page ground was 3.7:1 at this small size. */
html[data-theme="light"] .ruled { color: var(--ink-2); }
.ruled::before, .ruled::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, var(--emerald-rule), transparent);
}
/* ── scroll reveal ── */
    .reveal {
        opacity: 0; transform: translateY(22px);
        transition: opacity .65s ease, transform .65s ease;
    }
    .reveal.visible { opacity: 1; transform: none; }
    .reveal[data-d="1"] { transition-delay: .1s; }
    .reveal[data-d="2"] { transition-delay: .2s; }
    .reveal[data-d="3"] { transition-delay: .3s; }
    .reveal[data-d="4"] { transition-delay: .4s; }
    .reveal[data-d="5"] { transition-delay: .5s; }
    .reveal[data-d="6"] { transition-delay: .6s; }
    .reveal[data-d="7"] { transition-delay: .7s; }
    .reveal[data-d="8"] { transition-delay: .8s; }

/* ═══════════════════════════════════════════════════════
        NAVBAR
═══════════════════════════════════════════════════════ */
.ot-nav { background:rgba(14,16,15,.88); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--rule); padding:.6rem 0;}
.ot-nav .container { display:flex; align-items:center; gap:1rem; }
.ot-nav__brand { flex-shrink:0; order:1; }
.ot-nav .navbar-brand img {
    max-height: 42px;
    width: auto;
}
.ot-nav__links { flex:1; display:flex; justify-content:center; order:2; }
.ot-nav__links .navbar-collapse { flex-grow:0 !important; }
.ot-nav__links .navbar-nav { flex-direction:row; align-items:center; gap:.15rem; flex-wrap:nowrap; }
.ot-nav__controls { flex-shrink:0; display:flex; align-items:center; gap:.5rem; order:3; }
.ot-nav__end { display:flex; align-items:center; }
.nav-link { font-family:var(--font-body); font-size:.82rem; color:var(--ink-2) !important; padding:.45rem .75rem !important; border-radius:var(--radius) !important; transition:color .15s,background .15s; white-space:nowrap !important; }
.nav-link:hover,.nav-link.active { color:var(--ink) !important; background:rgba(255,255,255,.05); }
/* Bootstrap loads after this sheet, so its own toggler border wins without
   the weight — that grey box is Bootstrap's, not ours. */
.navbar-toggler { border-color:transparent !important; }
.navbar-toggler:focus { box-shadow:none; }
.navbar-toggler-icon { filter:invert(1) opacity(.6); }
.dropdown-menu { background:var(--bg-2) !important; border:0 !important; border-radius:var(--radius-lg) !important; padding:.5rem !important; box-shadow:0 20px 50px rgba(0,0,0,.5); }
.dropdown-item { font-size:.82rem; color:var(--ink-2) !important; border-radius:var(--radius) !important; padding:.45rem .85rem !important; transition:background .15s,color .15s !important; }
.dropdown-item:hover { background:var(--emerald-dim) !important; color:var(--emerald-lt) !important; }
.dropdown-divider { border-color:var(--rule) !important;}
.nav-search { display:flex; align-items:center; flex-direction:row-reverse; }
.nav-search__toggle { width:36px; height:36px; border-radius:var(--radius); background:transparent; border:1px solid transparent; color:var(--ink-2); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s,border-color .2s,color .2s; }
.nav-search__toggle:hover,.nav-search.is-open .nav-search__toggle { background:var(--emerald-dim); border-color:var(--emerald-rule); color:var(--emerald); }
.nav-search__field { width:220px; overflow:hidden; max-width:0; opacity:0; transform:scaleX(.85); transform-origin:right center; transition:max-width .38s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1),transform .38s cubic-bezier(.4,0,.2,1); pointer-events:none; }
.nav-search.is-open .nav-search__field { max-width:220px; opacity:1; transform:scaleX(1); pointer-events:auto; }
.nav-search__input { width:220px; height:36px; background:rgba(255,255,255,.06); border:1px solid var(--emerald-rule); border-radius:var(--radius); padding:0 .85rem; color:var(--ink); font-family:var(--font-body); font-size:.82rem; outline:none; }
.nav-search__input::placeholder { color:var(--ink-4); font-size:.78rem; }
.nav-search__input:focus { background:rgba(255,255,255,.09); box-shadow:0 0 0 2px var(--emerald-dim); }
.theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}
.theme-toggle:hover,
.theme-toggle[aria-pressed="true"] {
    background: var(--emerald-dim);
    border-color: var(--emerald-rule);
    color: var(--emerald);
}
.theme-toggle:active {
    transform: translateY(1px);
}
.theme-toggle:focus-visible {
    outline: 2px solid var(--emerald-lt);
    outline-offset: 2px;
}
@media (max-width: 991px) {
    .theme-toggle {
        width: 48px;
        min-height: 48px;
    }
}
.auth-theme-control {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 30;
    padding: .2rem;
    border: 1px solid rgba(247,242,232,.25);
    border-radius: calc(var(--radius) + 2px);
    background: rgba(14,16,15,.72);
    backdrop-filter: blur(10px);
}
.auth-theme-control .theme-toggle,
.auth-theme-control .theme-toggle:hover,
.auth-theme-control .theme-toggle[aria-pressed="true"] {
    color: #f7f2e8;
}
@media(max-width:991px) {
    .ot-nav .container { display:grid !important; grid-template-columns:minmax(0, 1fr) auto; gap:.75rem; }
    .ot-nav__brand { grid-column:1; grid-row:1; }
    .ot-nav__controls { grid-column:2; grid-row:1; }
    .ot-nav__panel { grid-column:1 / -1; grid-row:2; width:100%; }
    .ot-nav__panel .navbar-collapse { width:100%; flex-basis:100%; }
    .ot-nav__panel .navbar-nav { flex-direction:column; align-items:stretch; width:100%; gap:.15rem; }
    .ot-nav__panel .nav-item { width:100%; }
    .ot-nav__panel .nav-link { display:flex; align-items:center; min-height:48px; width:100%; }
    .ot-nav__panel .dropdown-menu { width:100%; }
    .ot-nav__panel .dropdown-item { display:flex; align-items:center; min-height:48px; }
    .navbar-toggler, .nav-search__toggle { width:48px; min-height:48px; }
    .nav-search { position:relative; }
    .nav-search__field { position:absolute; top:calc(100% + .5rem); right:0; width:min(220px, 55vw); max-width:0; margin-right:0 !important; }
    .nav-search.is-open .nav-search__field { max-width:min(220px, 55vw); }
    .ot-nav__controls:has(.nav-search.is-open) ~ .ot-nav__panel { margin-top:calc(48px + .5rem); }
    .nav-search__input { width:min(220px, 55vw); min-height:48px; }
}

/* ═══════════════════════════════════════════════════════
        HERO
═══════════════════════════════════════════════════════ */
.ot-hero {
    position: relative; min-height: 100svh;
    display: flex; flex-direction: column;
    justify-content: flex-end; overflow: hidden;
}
.ot-mh-xs { min-height: 220px !important; }
.ot-mh-sm { min-height: 340px !important; }
.ot-mh-md { min-height: 52vh !important; }
.ot-mh-lg { min-height: 70vh !important; }
.ot-mh-xl { min-height: 90vh !important; }
.ot-mh-full { min-height: 100svh; }

.ot-hero__bg {
    position: absolute; inset: -15%;
    background: center center / cover no-repeat;
    transform: scale(1.06); transition: transform 10s ease-out;
    will-change: transform;
}
.ot-hero__bg.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)  55%,
            rgba(14,16,15,.88) 78%,
            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;
}
.ot-hero__eyebrow {
    font-family: var(--font-mono); font-size: .68rem;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--white); margin-bottom: 1.25rem;
    display: flex; align-items: center; gap: .75rem;
}
.ot-hero__eyebrow::before {
    content: ''; width: 20px; height: 1px;
    background: var(--white); display: inline-block; flex-shrink: 0;
}
.ot-hero__title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 7vw, 7rem); font-weight: 900;
    line-height: .95; letter-spacing: -.03em;
    color: var(--ink); margin-bottom: 1.25rem;
}
.ot-hero__title em { font-style: italic; color: var(--emerald-lt); }
.ot-hero__sub {
    font-size: 1rem; font-weight: 300; color: var(--ink);
    max-width: 480px; line-height: 1.7; margin-bottom: 2.5rem;
}
/* margin-top rather than relying on the sub's margin-bottom: styles-x-species.css
   redefines .ot-hero__sub with margin-bottom: 0 and loads after this file, so on
   the home page the buttons sat hard against the text. Adjacent margins collapse
   to the larger of the two, so this adds the gap where the sub has none and
   changes nothing where the sub still carries its own 2.5rem. */
.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.hero-scroll {
    display: flex; align-items: center; gap: .6rem;
    font-family: var(--font-mono); font-size: .62rem;
    letter-spacing: .18em; text-transform: uppercase; color: var(--ink-4);
    margin-top: 4rem; user-select: none;
    animation: hsPulse 2.5s ease-in-out infinite;
}
.hero-scroll__line { width: 32px; height: 1px; background: var(--ink-4); }
@keyframes hsPulse {
    0%,100%{ opacity:.5; transform:translateY(0); }
    50%    { opacity:1;  transform:translateY(3px); }
}
.hero-scroll.hero-scroll--home {
    position: absolute;
    left: 50%;
    bottom: 2rem;
    z-index: 3;
    min-width: 48px;
    min-height: 72px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: rgba(247,242,232,.78);
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .22em;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transform: translateX(-50%);
    transition: color .2s ease;
    margin-top: 0;
    animation: none;
    user-select: none;
}
.hero-scroll--home .hero-scroll__mouse {
    width: 24px;
    height: 38px;
    display: flex;
    justify-content: center;
    border: 1.5px solid rgba(247,242,232,.62);
    border-radius: 14px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.hero-scroll--home .hero-scroll__wheel {
    width: 3px;
    height: 6px;
    margin-top: 6px;
    background: var(--emerald);
    border-radius: 999px;
    animation: heroWheelScroll 2s cubic-bezier(.15,.41,.69,.94) infinite;
}
.hero-scroll--home .hero-scroll__label {
    white-space: nowrap;
}
.hero-scroll--home:hover,
.hero-scroll--home:focus-visible {
    color: #fff;
}
.hero-scroll--home:hover .hero-scroll__mouse,
.hero-scroll--home:focus-visible .hero-scroll__mouse {
    border-color: #fff;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08);
}
.hero-scroll--home:focus-visible {
    outline: 2px solid var(--emerald);
    outline-offset: 6px;
    border-radius: 2px;
}
@keyframes heroWheelScroll {
    0%   { opacity: 0; transform: translateY(0); }
    20%  { opacity: 1; transform: translateY(0); }
    60%  { opacity: 1; transform: translateY(12px); }
    100% { opacity: 0; transform: translateY(12px); }
}
@media (max-width: 767px) {
    .ot-hero__content { padding-bottom: 2rem; }
    .ot-hero--home .ot-hero__content { padding-bottom: 6.75rem; }
    .ot-hero__title { font-size: 3.2rem; }
    .ot-hero__sub { line-height: 1.65; margin-bottom: 1.5rem; }
    .hero-btns { display: grid; grid-template-columns: 1fr; max-width: 320px; gap: .75rem; }
    .hero-btns > * { width: 100%; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
    .hero-scroll { margin-top: 2.5rem; }
    .hero-scroll.hero-scroll--home {
        margin-top: 0;
        bottom: 1.25rem;
        min-height: 68px;
    }
    .ot-mh-md { min-height: min(620px, 82svh) !important; }
    .ot-mh-lg { min-height: min(700px, 88svh) !important; }
    .reveal[data-d] { transition-delay: 0s; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal,
    .reveal.visible {
        opacity: 1;
        transform: none;
        transition: none !important;
        animation: none !important;
    }
    .ot-hero__bg,
    .ot-hero__img,
    .sp-hero__bg {
        transition: none !important;
        animation: none !important;
    }
    .nav-search__field {
        transition: none !important;
    }
    .hero-scroll,
    .hero-scroll--home .hero-scroll__mouse {
        transition: none !important;
    }
    .hero-scroll {
        animation: none !important;
    }
    .hero-scroll--home .hero-scroll__wheel {
        margin-top: 8px;
        animation: none !important;
        opacity: 1;
        transform: none;
    }
}

/* ═══════════════════════════════════════════════════════
    QUICK GUIDES BAR
═══════════════════════════════════════════════════════ */
.guide-bar {
    background: var(--bg-2);
    border-radius: var(--radius-lg);
    position: relative; z-index: 10; overflow: hidden;
}
.guide-bar::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--emerald), transparent);
}
.guide-bar__item {
    padding: 1.75rem 2rem !important; border-right: 1px solid var(--rule);
    transition: background .2s;
}
.guide-bar__item:last-child { border-right: none; }
.guide-bar__item:hover { background: rgba(90,158,58,.04); }
.guide-bar__num {
    font-family: var(--font-mono); font-size: .65rem;
    letter-spacing: .18em; color: var(--emerald);
    margin-bottom: .55rem; display: block;
}
.guide-bar__title {
    font-family: var(--font-display); font-size: 1.25rem;
    font-weight: 700; color: var(--ink); margin-bottom: .4rem;
}
.guide-bar__text {
    font-size: .82rem; color: var(--ink-3); line-height: 1.6; margin-bottom: 1.1rem;
}
.guide-bar__link {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--font-mono); font-size: .72rem;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--emerald); text-decoration: none;
    border-bottom: 1px solid var(--emerald-rule); padding-bottom: 2px;
    transition: color .15s, border-color .15s;
}
.guide-bar__link:hover { color: var(--emerald-lt); border-color: var(--emerald-lt); }

@media (max-width:991px) {
    .guide-bar { margin-top: -1.5rem; }
    .guide-bar__item { border-right: none; border-bottom: 1px solid var(--rule); }
    .guide-bar__item:last-child { border-bottom: none; }
}

/* ── The image variant ──
   Same bar, same three columns; the cell is a banner instead of a heading, a
   blurb and a link. --guide-bar-h is the text version's measured height, held
   here so the two occupy the same space and either include can be dropped in
   without the page around it moving.

   The banners are 2:1 with the title and the URL painted into the right-hand
   third, so the crop is anchored right: a narrow cell loses photograph off the
   left and never a word. */
.guide-bar--img { --guide-bar-h: 203px; }
/* The accent is doing the dividing now, so the copy of it across the top of the
   bar goes: the same line in two roles reads as decoration rather than as
   structure. */
.guide-bar--img::before { display: none; }

/* A grid rather than the Bootstrap row. Bootstrap builds its gutters out of
   negative row margins and per-column padding, which fights the zero padding
   the banners need to reach their own edges; a grid simply has no gutter to
   remove. It also turns the stacked case into one changed property. */
.guide-bar__grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
}

.guide-bar--img .guide-bar__shot {
    display: block; position: relative; overflow: hidden;
    height: var(--guide-bar-h);
}

/* ── The divider ──
   The gradient the bar used to wear across its top, stood on its end and put
   between the banners. Peaking in the middle and fading out at both ends keeps
   it from reading as a hard border against the artwork's own edges.

   z-index because a banner becomes a stacking context on hover — transform and
   filter each do it on their own — which would otherwise let it paint over the
   divider the same way it once covered the top accent. */
.guide-bar--img .guide-bar__shot + .guide-bar__shot::before {
    content: ''; position: absolute; z-index: 2;
    top: 0; bottom: 0; left: 0; width: 2px;
    background: linear-gradient(180deg,
        transparent, var(--emerald) 22%, var(--emerald) 78%, transparent);
}

.guide-bar--img .guide-bar__img {
    display: block; width: 100%; height: 100%;
    object-fit: cover; object-position: 100% 50%;
    transition: transform .35s ease, filter .35s ease;
}
/* The text version answers a hover with a tint on the cell. A photograph has
   nowhere to put one, so it leans in slightly instead. */
.guide-bar--img .guide-bar__shot:hover .guide-bar__img {
    transform: scale(1.03);
    filter: brightness(1.06);
}
.guide-bar--img .guide-bar__shot:focus-visible {
    outline: 2px solid var(--emerald); outline-offset: -2px;
}

@media (max-width:991px) {
    /* Stacked, a banner is the full container width, which is close enough to
       the artwork's own 2:1 that it can be left alone. */
    .guide-bar__grid { grid-template-columns: 1fr; }
    .guide-bar--img .guide-bar__shot { height: auto; }
    .guide-bar--img .guide-bar__img { height: auto; aspect-ratio: 2 / 1; }

    /* The divider turns with the layout: it now lies between one banner and the
       next rather than standing between columns. */
    .guide-bar--img .guide-bar__shot + .guide-bar__shot::before {
        top: 0; bottom: auto; left: 0; right: 0;
        width: auto; height: 2px;
        background: linear-gradient(90deg,
            transparent, var(--emerald) 22%, var(--emerald) 78%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .guide-bar--img .guide-bar__img { transition: none; }
    .guide-bar--img .guide-bar__shot:hover .guide-bar__img { transform: none; }
}

/* ═══════════════════════════════════════════════════════
       INTRO
    ═══════════════════════════════════════════════════════ */
    .intro-block { padding: 5rem 0 3rem; text-align: center; }
    .intro-block__title {
        font-family: var(--font-display);
        font-size: clamp(2rem, 4vw, 3rem); font-weight: 900;
        color: var(--ink); margin-bottom: 1rem; line-height: 1.1;
    }
    .intro-block__body {
        font-size: 1.05rem; font-weight: 300; color: var(--ink-2);
        max-width: 600px; margin: 0 auto; line-height: 1.8;
    }

/* ═══════════════════════════════════════════════════════
       SECTION HEADERS
═══════════════════════════════════════════════════════ */
.sec-head {
    display: flex; justify-content: space-between;
    align-items: flex-end; margin-bottom: 2rem;
    flex-wrap: wrap; gap: 1rem;
}
.sec-head__over {
    font-family: var(--font-mono); font-size: .65rem;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--emerald); margin-bottom: .4rem; display: block;
}
.sec-head__title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 900;
    color: var(--ink); margin: 0; line-height: 1.1;
}



/* ═══════════════════════════════════════════════════════
    INSTAGRAM GRID (replaces .section-showcase)
═══════════════════════════════════════════════════════ */
.insta-section { padding: 4rem 0 5rem; }
.insta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
}
@media (max-width:767px) { .insta-grid { grid-template-columns: repeat(2, 1fr); } }

.insta-tile {
    position: relative; overflow: hidden;
    border-radius: var(--radius-lg); aspect-ratio: 1 / 1;
    display: block; text-decoration: none;
   
}
.insta-tile img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .5s ease;
}
.insta-tile:hover img,
.insta-tile:focus-visible img { transform: scale(1.08); }
.insta-tile__veil {
    position: absolute; inset: 0;
    background: rgba(14,16,15,0); transition: background .3s;
}
.insta-tile:hover .insta-tile__veil,
.insta-tile:focus-visible .insta-tile__veil { background: rgba(14,16,15,.72); }
.insta-tile__overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 1.25rem; text-align: center;
    opacity: 0; transition: opacity .3s;
}
.insta-tile:hover .insta-tile__overlay,
.insta-tile:focus-visible .insta-tile__overlay { opacity: 1; }
.insta-tile:focus-visible {
    outline: 2px solid var(--emerald-lt);
    outline-offset: 3px;
}
.insta-tile__icon {
    font-size: 1.5rem; color: var(--emerald-lt); margin-bottom: .65rem;
}
.insta-tile__title {
    font-family: var(--font-display); font-size: .95rem;
    font-weight: 700; color: #fff; line-height: 1.3; margin-bottom: .35rem;
}
.insta-tile__caption {
    font-size: .75rem; color: #f7f2e8; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden;
}

/* ═══════════════════════════════════════════════════
    PAGINATION
    Built by paginationLinks() in includes/scripts/helpers.php, used by the
    species and locations guides. The markup is a bare
    <ul class="pagination"><li><a class="active">1</a></li>…</ul> — note the
    links carry NO .page-link class, so neither Bootstrap's pagination CSS nor
    the .page-link rules in styles-x-tables.css ever matched them; the list
    rendered as unstyled anchors. Styled here in the base sheet because the two
    guides load different page-level stylesheets.

    The generator also used to emit &nbsp; entities BETWEEN the <li>s to space
    the ellipsis. As direct text children of a flex <ul> those became anonymous
    flex items and widened the gap unevenly, so they were removed in favour of
    .pagination__gap and the gap below.

    Bootstrap loads after this file and sets display/padding-left/list-style on
    .pagination to the same values used here, so the cascade is harmless; every
    other declaration is one Bootstrap does not touch, and .pagination li a
    outranks Reboot's bare a.
═══════════════════════════════════════════════════ */
.pagination {
    display: flex; flex-wrap: wrap;
    justify-content: center; align-items: center;
    gap: .4rem;
    /* Sits directly under the "Showing X of Y" count, which has no bottom
       spacing of its own — the two were touching. The bottom value restores
       the 1rem Reboot puts on every <ul>, so the pills are not flush against
       the end of the section either. */
    margin: 1.5rem 0 1rem;
    padding-left: 0;
    list-style: none;
    font-family: var(--font-mono);
    font-size: .8rem;
}
.pagination li { display: flex; }

/* The "…" gap marker: a bare <li> with no anchor. */
.pagination__gap {
    color: var(--ink-3);
    padding: 0 .2rem;
    letter-spacing: .1em;
    user-select: none;
}

.pagination li a {
    display: flex; align-items: center; justify-content: center;
    min-width: 2.25rem; height: 2.25rem;
    padding: 0 .6rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: var(--bg-2);
    color: var(--ink-2);
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.pagination li a:hover,
.pagination li a:focus-visible {
    background: var(--emerald-dim);
    border-color: var(--emerald-rule);
    color: var(--ink);
}
.pagination li a:focus-visible {
    outline: 2px solid var(--emerald);
    outline-offset: 2px;
}

/* Current page. Solid fill so it reads as position, not as another link. */
.pagination li a.active {
    background: var(--emerald);
    border-color: var(--emerald);
    color: var(--bg);
    font-weight: 700;
    cursor: default;
}

/* ── Light theme ──
   Backgrounds and borders re-theme on their own from the tokens. Text does not:
   the global `html[data-theme="light"] a` rule below has the same specificity
   as `.pagination li a` and comes later in this file, so it wins and paints
   every pill emerald. These restate the resting and hover colours to take it
   back. The other two are contrast fixes — --emerald on cream measured 3.62:1
   for the active pill and --ink-3 on cream 3.74:1 for the "…", both short of
   4.5:1. */
html[data-theme="light"] .pagination li a {
    color: var(--ink-2);
}
html[data-theme="light"] .pagination li a:hover,
html[data-theme="light"] .pagination li a:focus-visible {
    color: var(--emerald-xdrk);
}
html[data-theme="light"] .pagination li a.active {
    background: var(--emerald-drk);
    border-color: var(--emerald-drk);
    color: var(--bg-card);
}
html[data-theme="light"] .pagination__gap {
    color: var(--ink-2);
}

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

/* ═══════════════════════════════════════════════════
    BREADCRUMBS
═══════════════════════════════════════════════════ */
.ot-crumb {
    background: var(--bg-2);
    border-radius: var(--radius);
    padding: .85rem 1.4rem;
    font-family: var(--font-mono);
    font-size: .75rem; letter-spacing: .05em;
    /* A step that is not a link, not a separator and not the current page —
       an ancestor with no page of its own — matched none of the rules below
       and fell through to Bootstrap's body colour: 1.16:1 on this ground,
       which is unreadable. --ink-2 is what .current already uses and reads
       8.65:1 dark and 4.99:1 light; --ink-3 only managed 3.37:1 in light. */
    color: var(--ink-2);
}
.ot-crumb a { color: var(--emerald-lt); text-decoration: none; }
.ot-crumb a:hover { color: var(--emerald); }
.ot-crumb .sep { color: var(--ink-4); margin: 0 .6rem; }
.ot-crumb .current { color: var(--ink-2); }

/* ═══════════════════════════════════════════════════════
    DUO LINKS
═══════════════════════════════════════════════════════ */
.duo-links {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    border-radius: var(--radius-xl); overflow: hidden;
   
}
.duo-link {
    padding: 3.5rem 2rem; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 1rem;
    text-decoration: none; position: relative; overflow: hidden;
    transition: filter .25s;
}
.duo-link::before {
    content: ''; position: absolute; inset: 0;
    background: var(--duo-bg); transition: transform .4s;
}
.duo-link:hover::before { transform: scale(1.04); }
.duo-link:hover { filter: brightness(1.1); }
.duo-link img { position: relative; max-width: 110px; }
.duo-link__logo--light { display: none; }
.duo-link__label {
    position: relative; font-family: var(--font-mono);
    font-size: .65rem; letter-spacing: .18em;
    text-transform: uppercase; color: rgba(255,255,255,.4);
}
.duo-link--tom   { --duo-bg: linear-gradient(135deg, #0f2840, #254d77); }
.duo-link--bush  { --duo-bg: linear-gradient(135deg, #25170e, #3d2811); }
.duo-link--gaming{ --duo-bg: linear-gradient(135deg, #2e170a, #6e3007); }
@media (max-width:767px) { .duo-links { grid-template-columns: 1fr; } }


/* ═══════════════════════════════════════════════════════
    FOOTER
═══════════════════════════════════════════════════════ */
.ot-footer {
    background: var(--bg-2);
    border-top: 1px solid var(--emerald-rule);
    padding: 5rem 0 0; margin-top: 5rem;
}
.ot-footer__title {
    font-family: var(--font-display); font-size: 1rem;
    font-weight: 700; color: var(--ink); margin-bottom: 1.25rem;
}
.ot-footer__text { font-size: .8rem; color: var(--ink-3); line-height: 1.75; margin-bottom:1rem;}
.ot-footer__links { list-style: none; padding: 0; margin: 0; }
.ot-footer__links li { margin-bottom: .6rem; }
.ot-footer__links a { font-size: .85rem; color: var(--ink-3); text-decoration: none; transition: color .15s; }
.ot-footer__links a:hover { color: var(--emerald); }
.social-row { display: flex; gap: .65rem; flex-wrap: wrap; margin-top: 1.25rem; }
.social-btn {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.04); border: 1px solid transparent;
    border-radius: 50%; color: var(--ink-3); font-size: .85rem;
    text-decoration: none; transition: all .2s;
}
.social-btn:hover { background: var(--emerald-dim); border-color: var(--emerald-rule); color: var(--emerald); }
.footer-meta-label { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
.footer-meta-val { font-size: .82rem; color: var(--ink-2); }
.footer-meta-val a { color: var(--emerald); text-decoration: none; }
.footer-meta-val a:hover { color: var(--emerald-lt); }
.ot-footer__bottom { border-top: 1px solid var(--rule); margin-top: 4rem; padding: 1.5rem 0; }
.ot-footer__bottom p { font-size: .8rem; color: var(--ink-4); margin: 0; }
.ot-footer__bottom a { color: var(--ink-4); text-decoration: none; }
.ot-footer__bottom a:hover { color: var(--emerald); }

/* ═══════════════════════════════════════════════════
   DISCLAIMER
═══════════════════════════════════════════════════ */
.ot-disclaimer {
    background: var(--emerald-dim); /*border: 1px solid var(--emerald-rule);*/
    /*border-left: 4px solid var(--emerald);*/ border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    color: var(--ink-3)
}
.ot-disclaimer p { font-size: .82rem; color: var(--ink-3) !important; line-height: 1.8; margin: 0; }
.ot-disclaimer strong { color: var(--emerald-lt); }
.ot-disclaimer a { font-size: .82rem; color: var(--ink-2) !important; font-weight: bold; text-decoration: none; }
.ot-disclaimer a:hover { color: var(--ink) !important; text-decoration: underline; }
/* Light: --ink-3 on the green tint was 3.2:1, the label 3.9:1. */
html[data-theme="light"] .ot-disclaimer p { color: var(--ink-2) !important; }
html[data-theme="light"] .ot-disclaimer strong { color: var(--emerald-drk); }

/* ═══════════════════════════════════════════════════════
    Light Box images
═══════════════════════════════════════════════════════ */

#lcl_thumbs_nav, #lcl_thumbs_nav * {
    border-radius: 10px;
}


/* ═══════════════════════════════════════════════════════
    BACK TO TOP
═══════════════════════════════════════════════════════ */
#btt {
    position: fixed; bottom: 2rem; right: 2rem;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-2); border: 1px solid var(--emerald-rule);
    border-radius: var(--radius); color: var(--emerald); font-size: .85rem;
    text-decoration: none; opacity: 0; transform: translateY(8px);
    transition: opacity .3s, transform .3s, background .2s; z-index: 999;
}
#btt.show { opacity: 1; transform: translateY(0); }
#btt:hover { background: var(--emerald-dim); color: var(--emerald-lt); }
/* Sections that x-gallery/x-species mark white-bg */
.white-bg,
#gallery, #files, #links, #disclaimer { background: var(--bg) !important; }

/* ═══════════════════════════════════════════════════════
   EXTERNAL LINKS
═══════════════════════════════════════════════════════ */
.ext-link-trigger {
    background: var(--bg-card);
    border-radius: var(--radius-lg); padding: 1.5rem;
    text-align: center; transition: none;
}
.ext-link-trigger:hover { }
.ext-link-trigger__count {
    font-family: var(--font-mono); font-size: .65rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--ink-3); margin-bottom: .5rem;
    display: block;
}
.ext-link-trigger__btn {

    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.40rem;
    text-transform: uppercase;
    color: var(--emerald);
    text-decoration: none;
    cursor: pointer;
    transition: color .15s;
    font-weight: bold;
}
.ext-link-trigger__btn:hover { color: var(--emerald-lt); }
.link-bit { font-family: var(--font-mono); font-size: .72rem; }
.link-bit a { color: var(--emerald); text-decoration: none; word-break: break-all; }
.link-bit a:hover { color: var(--emerald-lt); }
.link-type-1 {
    font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em;
    text-transform: uppercase; background: var(--teal-dim);
    color: var(--teal);
    padding: .3rem .5rem; border-radius: 100px; margin-right: .5rem; white-space: nowrap;
}
.link-type-2 {
    font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em;
    text-transform: uppercase; background: var(--yellow-dim);
    color: var(--black);
    padding: .3rem .5rem; border-radius: 100px; margin-right: .5rem; white-space: nowrap;
}
.link-type-3 {
    font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em;
    text-transform: uppercase; background: var(--coral-dim);
    color: var(--coral);
    padding: .3rem .5rem; border-radius: 100px; margin-right: .5rem; white-space: nowrap;
}
.link-type-4 {
    font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em;
    text-transform: uppercase; background: var(--emerald-dim);
    color: var(--emerald);
    padding: .3rem .5rem; border-radius: 100px; margin-right: .5rem; white-space: nowrap;
}
.link-type-5 {
    font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em;
    text-transform: uppercase; background: var(--amber-dim);
    color: var(--amber);
    padding: .3rem .5rem; border-radius: 100px; margin-right: .5rem; white-space: nowrap;
}
.link-type-6 {
    font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em;
    text-transform: uppercase; background: var(--survey-dim);
    color: var(--survey);
    padding: .3rem .5rem; border-radius: 100px; margin-right: .5rem; white-space: nowrap;
}
.link-type-7 {
    font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em;
    text-transform: uppercase; background: var(--floral-dim);
    color: var(--floral);
    padding: .3rem .5rem; border-radius: 100px; margin-right: .5rem; white-space: nowrap;
}
.link-type-8 {
    font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em;
    text-transform: uppercase; background: var(--red-dim);
    color: var(--red);
    padding: .3rem .5rem; border-radius: 100px; margin-right: .5rem; white-space: nowrap;
}
.link-type-9 {
    font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em;
    text-transform: uppercase; background: var(--emerald-dim);
    color: var(--emerald);
    padding: .3rem .5rem; border-radius: 100px; margin-right: .5rem; white-space: nowrap;
}
.link-type-10 {
    font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em;
    text-transform: uppercase; background: var(--emerald-dim);
    color: var(--emerald);
    padding: .3rem .5rem; border-radius: 100px; margin-right: .5rem; white-space: nowrap;
}
/* ═══════════════════════════════════════════════════
CATEGORY FILTER BAR
═══════════════════════════════════════════════════ */
.filter-bar {
    display: flex; align-items: center; gap: .5rem;
    flex-wrap: wrap;
}
.filter-bar__label {
    font-family: var(--font-mono);
    font-size: .62rem; letter-spacing: .15em; text-transform: uppercase;
    color: var(--ink-4); flex-shrink: 0; margin-right: .25rem;
}
.filter-pill {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em;
    color: var(--ink-3);
    background: var(--parchment-dim);
    padding: .41rem .85rem .29rem; border-radius: 100px;
    text-decoration: none;
    transition: border-color .2s, color .2s, background .2s;
    white-space: nowrap;
}
.filter-pill:hover {
    color: var(--cat-color, var(--emerald));
    background: var(--cat-tint, var(--rule));
}
.filter-pill.active {
    background: var(--cat-tint, var(--rule));
    color: var(--cat-color, var(--emerald));
}
html[data-theme="light"] .filter-pill {
    background-color: var(--parchment-dim);
}
html[data-theme="light"] .filter-pill:hover {
    background-color: var(--emerald-ltdim);
}
/* "All" pill uses amber accent */
.filter-pill--all.active,
.filter-pill--all:hover {
    background: var(--amber-dim);
    border-color: var(--amber-rule);
    color: var(--amber);
}
.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; margin-top: 1rem;
    color: var(--emerald); background: var(--emerald-dim);
}
.hero-pill--teal { color: var(--teal); background: var(--teal-dim); }
/* ═══════════════════════════════════════════════════
    INTRO CARD
═══════════════════════════════════════════════════ */
.intro-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg); padding: 2.5rem 3rem;
    position: relative; overflow: hidden;
}
.intro-card::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
    background: linear-gradient(to bottom, var(--amber), transparent);
}
.intro-card::after {
    content: ''; position: absolute; bottom: -60px; right: -60px;
    width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle, var(--amber-glow) 0%, transparent 65%);
    pointer-events: none;
}
.intro-card__over {
    font-family: var(--font-mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--amber); display: block; margin-bottom: .75rem;
}
.intro-card h2 {
    font-family: var(--font-display); font-size: 1.8rem; font-weight: 800;
    color: var(--ink); margin-bottom: 1rem; line-height: 1.1;
}
.intro-card p { font-size: .9rem; color: var(--ink-3); line-height: 1.9; margin-bottom: .5rem; }
.intro-card p:last-child { margin-bottom: 0; }
@media (max-width: 767px) { .intro-card { padding: 1.75rem 1.5rem; } }
/* ═══════════════════════════════════════════════════
    MODALS — dark skin
═══════════════════════════════════════════════════ */
.modal-content {
    /* The dimmed backdrop separates a modal from the page; an outline on top
       of that is the grey box again. !important because Bootstrap is linked
       after this sheet and sets its own border-color. */
    background: var(--bg-card); border: 0 !important;
    border-radius: var(--radius-lg); color: var(--ink);
}
.modal-header {
    border-bottom: 1px solid var(--rule); padding: 1.25rem 1.5rem;
    background: var(--bg-3);
}
.modal-title {
    font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--ink);
    display: flex; align-items: center; gap: .6rem;
}
.modal-title::before {
    content: ''; width: 3px; height: 1.1rem; background: var(--amber);
    border-radius: 2px; display: inline-block; flex-shrink: 0;
}
.btn-close { filter: invert(1) opacity(.5); }
.btn-close:hover { filter: invert(1) opacity(.9); }
.modal-body {
    padding: 1.5rem; font-size: .88rem; color: var(--ink-3); line-height: 1.85;
}
.modal-footer {
    border-top: 1px solid var(--rule)!important; padding: .85rem 1.5rem;
    background: var(--bg-3);
}
.modal-footer small { font-family: var(--font-mono); font-size: .65rem; color: var(--ink-4); }
.modal-footer strong { color: var(--ink-3); }

/* ── READING PROGRESS BAR ── */
#read-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px; width: 0%;
    background: var(--emerald);
    z-index: 1031;
    transition: width .1s linear;
    pointer-events: none;
}
.intro-block__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--emerald-lt);
    text-decoration: none;
    margin-top: 1rem;
    transition: color 0.2s, gap 0.2s;
}
.intro-block__cta:hover {
    color: var(--ink);
    gap: 0.7rem;
}

/* ═══════════════════════════════════════════════════════
   LIGHT THEME — Warm Naturalist shared surfaces
═══════════════════════════════════════════════════════ */
html[data-theme="light"] {
    --black: #171914;
    --bg: #ebe6d9;
    --bg-2: #e2dbc9;
    --bg-3: #ddd4c0;
    --bg-card: #f7f2e8;
    --rule: rgba(55,62,43,.16);
    --rule-warm: rgba(97,79,47,.2);
    --emerald: #4d842f;
    --emerald-drk: #31591e;
    --emerald-xdrk: #253e19;
    --emerald-lt: #3f7428;
    --emerald-dim: rgba(77,132,47,.14);
    --emerald-xdim: rgba(77,132,47,.08);
    --emerald-rule: rgba(77,132,47,.36);

    /* Teal, the secondary accent. The dark theme's #5ab4c8 is a bright cyan
       built for a near-black ground; on parchment it measured 1.9:1, which is
       why the hero pills and the body-copy links that use it were washing out.
       #285f68 is the same teal already used by --status-planning-fg below, so
       this is the palette's own dark teal rather than a new colour. Given a
       light variant here the same way emerald is, so every consumer of --teal
       is corrected at once. */
    --teal: #285f68;
    --teal-dim: rgba(40,95,104,.10);
    --teal-rule: rgba(40,95,104,.30);

    /* Amber, mustard and red, for the same reason teal above needed one.
       None of them had a light variant, so every consumer inherited the
       dark-theme value and measured, on the parchment card:
         --amber      2.29:1     --amber-lt    1.63:1
         --mustard    1.45:1     --mustard-lt  1.18:1
         --red        3.26:1
       That is roughly fifty places where text was effectively invisible in
       light mode. The replacements are the palette's own status colours and
       all clear 5:1. Note the "-lt" variants are DARKER here than the base,
       matching how --emerald-lt already works: on parchment the lighter
       emphasis colour has to go down, not up.
       --amber is used as a background in two decorative gradients; both are
       fades on a light ground and read fine darkened. */
    --amber:      #8a5412;
    --amber-lt:   #7a470d;
    --mustard:    #7a6200;
    --mustard-lt: #6b5500;
    --red:        #a33b34;

    /* Danger, light theme. The dark red #e05a5a measures 3.3:1 on the card and
       2.9:1 on the page ground, so both the accent and the text weight are
       darkened for parchment: --danger reads 4.9:1 and --danger-ink 6.2:1 on
       the tinted alert panel. */
    --danger:      #a83a32;
    --danger-ink:  #8d302a;
    --danger-dim:  rgba(168,58,50,.10);
    --danger-rule: rgba(168,58,50,.34);
    --white: #ffffff;
    --ink: #24271f;
    --ink-2: #575c4e;
    --ink-3: #737666;
    --ink-4: #8b8a79;
    --parchment: #6d6042;
    --parchment-dim: rgba(109,96,66,.1);
    --parchment-rule: rgba(109,96,66,.28);
    --ot-text: #314127;
    --ot-text-muted: #65735b;
    --ot-accent: #587b46;
    --ot-accent-mid: #4d7838;
    --ot-accent-hi: #386325;
    --drk-border: rgba(55,62,43,.16);
    --status-priority-fg: #6b5500;
    --status-priority-bg: #fff2b8;
    --status-priority-border: #a78918;
    --status-urgent-fg: #8d3834;
    --status-urgent-bg: #f8e3e0;
    --status-urgent-border: #b66c66;
    --status-low-fg: #285f50;
    --status-low-bg: #dcefe9;
    --status-low-border: #5d9082;
    --status-progress-fg: #304c92;
    --status-progress-bg: #e1e7f8;
    --status-progress-border: #7185bd;
    --status-testing-fg: #663b82;
    --status-testing-bg: #eee3f5;
    --status-testing-border: #9270a8;
    --status-planning-fg: #285f68;
    --status-planning-bg: #dceff1;
    --status-planning-border: #659099;
    --status-done-fg: #31591e;
    --status-done-bg: #e1edd9;
    --status-done-border: #71925e;
    --status-suspend-fg: #7a470d;
    --status-suspend-bg: #f6e4cd;
    --status-suspend-border: #aa7b45;
}

html[data-theme="light"] body {
    background: var(--bg) !important;
    color: var(--ink);
}

html[data-theme="light"] a,
html[data-theme="light"] .std_lnk a {
    color: var(--emerald-drk);
}
html[data-theme="light"] a:hover,
html[data-theme="light"] .std_lnk a:hover {
    color: var(--emerald-xdrk);
}
html[data-theme="light"] .overline,
html[data-theme="light"] .sec-head__over,
html[data-theme="light"] .guide-bar__num,
html[data-theme="light"] .ext-link-trigger__btn,
html[data-theme="light"] .link-bit a,
html[data-theme="light"] .intro-block__cta {
    color: var(--emerald-drk);
}
html[data-theme="light"] .guide-bar__link { color: var(--emerald-drk); }
html[data-theme="light"] .guide-bar__link:hover,
html[data-theme="light"] .ot-crumb a:hover,
html[data-theme="light"] .ext-link-trigger__btn:hover,
html[data-theme="light"] .link-bit a:hover,
html[data-theme="light"] .intro-block__cta:hover {
    color: var(--emerald-xdrk);
}
html[data-theme="light"] .nav-search__toggle:hover,
html[data-theme="light"] .nav-search.is-open .nav-search__toggle,
html[data-theme="light"] .theme-toggle:hover,
html[data-theme="light"] .theme-toggle[aria-pressed="true"] {
    color: var(--emerald-drk);
}

html[data-theme="light"] .ot-nav {
    background: rgba(241,236,223,.88);
    border-bottom: 1px solid var(--rule-warm);
}
html[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .nav-link.active {
    color: var(--emerald-drk) !important;
    background: var(--emerald-xdim);
}
html[data-theme="light"] .navbar-toggler-icon { filter: none; opacity: .72; }
html[data-theme="light"] .dropdown-menu {
    background: var(--bg-card) !important;
    border-color: var(--rule-warm) !important;
    box-shadow: 0 20px 50px rgba(55,62,43,.18);
}
html[data-theme="light"] .dropdown-item:hover {
    color: var(--emerald-drk) !important;
    background: var(--emerald-dim) !important;
}
html[data-theme="light"] .nav-search__input,
html[data-theme="light"] .form-control,
html[data-theme="light"] .form-select,
html[data-theme="light"] .ot-input,
html[data-theme="light"] .ot-textarea,
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] textarea,
html[data-theme="light"] select {
    background-color: var(--bg-card);
    border-color: var(--rule-warm);
    color: var(--ink);
}
html[data-theme="light"] .nav-search__input::placeholder {
    color: var(--ink-2);
    opacity: 1;
}
html[data-theme="light"] .nav-search__input:focus,
html[data-theme="light"] .form-control:focus,
html[data-theme="light"] .form-select:focus,
html[data-theme="light"] .ot-input:focus,
html[data-theme="light"] .ot-textarea:focus,
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus {
    background-color: var(--white);
    border-color: var(--emerald-rule);
    box-shadow: 0 0 0 2px var(--emerald-dim);
}
html[data-theme="light"] .modal-content {
    background: var(--bg-card);
    box-shadow: 0 24px 60px rgba(55,62,43,.2);
}
html[data-theme="light"] .modal-header,
html[data-theme="light"] .modal-footer { background: var(--bg-2); }
html[data-theme="light"] .btn-close { filter: none; opacity: .55; }
html[data-theme="light"] .btn-close:hover { filter: none; opacity: .85; }

html[data-theme="light"] .guide-bar { background: var(--bg-2); }
html[data-theme="light"] .guide-bar__item:hover { background: var(--emerald-xdim); }
html[data-theme="light"] .guide-bar__text,
html[data-theme="light"] .intro-card p,
html[data-theme="light"] .modal-body,
html[data-theme="light"] .modal-footer strong,
html[data-theme="light"] .ot-disclaimer,
html[data-theme="light"] .ot-disclaimer p,
html[data-theme="light"] .ext-link-trigger__count {
    color: var(--ink-2);
}
html[data-theme="light"] .intro-block { background: var(--bg); }
html[data-theme="light"] .duo-links { border-color: var(--rule-warm); }
html[data-theme="light"] .duo-link { --duo-bg: #d9d1c0; }
html[data-theme="light"] .duo-link__logo--dark { display: none; }
html[data-theme="light"] .duo-link__logo--light { display: block; }
html[data-theme="light"] .duo-link__label { color: var(--ink-2); }
html[data-theme="light"] .ot-footer {
    background: var(--bg-2);
    border-top-color: var(--parchment-rule);
}
html[data-theme="light"] .ot-footer__text,
html[data-theme="light"] .ot-footer__links a {
    color: var(--ink-2);
}
html[data-theme="light"] .ot-footer__links a:hover,
html[data-theme="light"] .footer-meta-val a:hover {
    color: var(--emerald-xdrk);
}
html[data-theme="light"] .footer-meta-label,
html[data-theme="light"] .ot-footer__bottom p,
html[data-theme="light"] .ot-footer__bottom a {
    color: var(--ink-2);
}
html[data-theme="light"] .social-btn {
    background: var(--bg-card);
    color: var(--ink-2);
}
html[data-theme="light"] .social-btn:hover { color: var(--emerald-xdrk); }

html[data-theme="light"] #btt {
    background: var(--bg-card);
    border-color: var(--emerald-rule);
    color: var(--emerald-drk);
}
html[data-theme="light"] #btt:hover {
    background: var(--emerald-dim);
    color: var(--emerald-xdrk);
}
html[data-theme="light"] .swiper-button-next,
html[data-theme="light"] .swiper-button-prev { color: var(--emerald-drk); }
html[data-theme="light"] .swiper-pagination-bullet { background: var(--parchment); opacity: 1; }
html[data-theme="light"] .swiper-pagination-bullet-active { background: var(--emerald); opacity: 1; }

/* Photo-led heroes and cards keep their established veils and light foregrounds. */
html[data-theme="light"] .ot-hero__eyebrow,
html[data-theme="light"] .ot-hero__title,
html[data-theme="light"] .art-hero__title,
html[data-theme="light"] .acct-cover__eyebrow,
html[data-theme="light"] .acct-cover__title,
html[data-theme="light"] .prof-cover__eyebrow,
html[data-theme="light"] .prof-cover__title,
html[data-theme="light"] .srp-hero__eyebrow,
html[data-theme="light"] .srp-hero__title,
html[data-theme="light"] .sp-hero__eyebrow,
html[data-theme="light"] .sp-hero__title,
html[data-theme="light"] .species-card__common,
html[data-theme="light"] .photo-hero__name,
html[data-theme="light"] .photo-thumb__name,
html[data-theme="light"] .sp-card__name,
html[data-theme="light"] .feat-card__title,
html[data-theme="light"] .faq-sp-card__name {
    color: #fff;
}

html[data-theme="light"] .ot-hero__title,
html[data-theme="light"] .art-hero__title,
html[data-theme="light"] .acct-cover__title,
html[data-theme="light"] .prof-cover__title,
html[data-theme="light"] .srp-hero__title,
html[data-theme="light"] .sp-hero__title {
    color: #fff;
    text-shadow: 0 2px 22px rgba(0,0,0,.6);
}

html[data-theme="light"] .art-hero__date,
html[data-theme="light"] .art-hero__read {
    color: rgba(36,39,31,.82);
    font-weight: 500;
}

/* Light theme: text sitting over a hero or cover whose VEIL ALSO LIGHTENS in
   light theme. That is the test for belonging in this group — darkening the
   text only works where the backdrop behind it got lighter too.

   Deliberately NOT here, because their backdrop is a dark veil or dark pill
   that is identical in both themes:
       .sp-card__latin, .sp-card__cta            (dark card veil, rgba(8,12,10,.95))
       .species-card__latin, __cta-label, __cta-arrow (dark card veil, rgba(0,0,0,.95))
       .photo-hero__sub                          (dark photo veil, rgba(0,0,0,.8))
       .id-gallery__caption, .id-gallery__zoom   (dark gradient / pill, rgba(14,16,15,.85/.65))
   Those keep the light-on-dark colours defined beside their own components;
   darkening them here put near-black text on a near-black backdrop. */
html[data-theme="light"] .ot-hero__sub,
html[data-theme="light"] .art-hero__excerpt,
html[data-theme="light"] .art-hero__author-name,
html[data-theme="light"] .acct-cover__sub,
html[data-theme="light"] .sp-hero__latin {
    color: #343331;
}
/* The subtitle's lower lines cross the photo where the ivory fade is still thin;
   over dark rock or shadow the dark text lost its ground. A soft ivory halo
   gives it one without boxing the text. */
html[data-theme="light"] .ot-hero__sub {
    text-shadow: 0 0 10px rgba(247,242,232,.95), 0 0 3px rgba(247,242,232,.9);
}

html[data-theme="light"] .ot-hero .art-breadcrumb,
html[data-theme="light"] .ot-hero .art-breadcrumb a,
html[data-theme="light"] .ot-hero .art-breadcrumb__sep,
html[data-theme="light"] .acct-cover .art-breadcrumb,
html[data-theme="light"] .acct-cover .art-breadcrumb a,
html[data-theme="light"] .acct-cover .art-breadcrumb__sep,
html[data-theme="light"] .prof-cover .art-breadcrumb,
html[data-theme="light"] .prof-cover .art-breadcrumb a,
html[data-theme="light"] .prof-cover .art-breadcrumb__sep{
    color: #fff;
}

html[data-theme="light"] .ot-hero .art-breadcrumb a:hover,
html[data-theme="light"] .ot-hero .art-breadcrumb a:focus-visible,
html[data-theme="light"] .acct-cover .art-breadcrumb a:hover,
html[data-theme="light"] .acct-cover .art-breadcrumb a:focus-visible,
html[data-theme="light"] .prof-cover .art-breadcrumb a:hover,
html[data-theme="light"] .prof-cover .art-breadcrumb a:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

html[data-theme="light"] .ot-hero__title em,
html[data-theme="light"] .art-hero__title em,
html[data-theme="light"] .acct-cover__title em,
html[data-theme="light"] .prof-cover__title em,
html[data-theme="light"] .srp-hero__title em {
    color: #7ec257;
}

html[data-theme="light"] .art-hero__cat,
html[data-theme="light"] .hero-build-pill {
    background: rgba(14,16,15,.78);
    border-color: rgba(247,242,232,.42);
    color: #f7f2e8;
}

/* The scroll cue sits at 92–97% down the hero, which in light theme is inside
   the parchment ::after feather — opaque var(--bg) by the base. Ivory text
   there measured 1.2:1, i.e. invisible. Dark ink instead, matching the
   --home variant's label below, which was already corrected this way. */
html[data-theme="light"] .ot-hero .hero-scroll {
    color: rgba(36,39,31,.78);
}
html[data-theme="light"] .ot-hero .hero-scroll__line {
    background: rgba(36,39,31,.55);
}
html[data-theme="light"] .ot-hero .hero-scroll--home .hero-scroll__label {
    color: rgba(36,39,31,.78);
}
html[data-theme="light"] .ot-hero .hero-scroll--home .hero-scroll__mouse {
    border-color: rgba(36,39,31,.62);
}
html[data-theme="light"] .ot-hero .hero-scroll--home:hover .hero-scroll__label,
html[data-theme="light"] .ot-hero .hero-scroll--home:focus-visible .hero-scroll__label {
    color: #24271f;
}
html[data-theme="light"] .ot-hero .hero-scroll--home:hover .hero-scroll__mouse,
html[data-theme="light"] .ot-hero .hero-scroll--home:focus-visible .hero-scroll__mouse {
    border-color: #24271f;
    box-shadow: 0 0 0 1px rgba(36,39,31,.08);
}

html[data-theme="light"] .ot-hero .ot-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"] .ot-hero .ot-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%
    );
}

html[data-theme="light"] .acct-cover .acct-cover__veil,
html[data-theme="light"] .prof-cover .prof-cover__veil,
html[data-theme="light"] .srp-hero .srp-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"] .acct-cover .acct-cover__veil::after,
html[data-theme="light"] .prof-cover .prof-cover__veil::after,
html[data-theme="light"] .srp-hero .srp-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%
    );
}

/* Standalone account forms switch surfaces without weakening their photo veil. */
html[data-theme="light"] .login-card {
    background: rgba(247,242,232,.94);
    border-color: var(--rule-warm);
    box-shadow: 0 40px 80px rgba(14,16,15,.42), inset 0 1px 0 rgba(255,255,255,.55);
}
html[data-theme="light"] .login-card__eyebrow,
html[data-theme="light"] .login-card__title em {
    color: var(--emerald-drk);
}
html[data-theme="light"] .login-card__sub,
html[data-theme="light"] .login-ruled__label,
html[data-theme="light"] .field-label,
html[data-theme="light"] .field-note,
html[data-theme="light"] .check-label,
html[data-theme="light"] .check-text,
html[data-theme="light"] .role-option__desc,
html[data-theme="light"] .strength-label,
html[data-theme="light"] .approval-notice__text,
html[data-theme="light"] .login-alert__text,
html[data-theme="light"] .login-footer__back,
html[data-theme="light"] .login-footer__register,
html[data-theme="light"] .login-footer__version {
    color: var(--ink-2);
}
html[data-theme="light"] .deco-badge__val {
    color: #fff;
}
html[data-theme="light"] .deco-badge__label,
html[data-theme="light"] .deco-badge__sub,
html[data-theme="light"] .deco-stat__label {
    color: #f7f2e8;
}
html[data-theme="light"] .deco-stat__num {
    color: #7ec257;
}

/* Message notification copy and actions use shared semantic foregrounds. */
.msg-toast__title {
    color: var(--ink);
}
.msg-toast__text {
    color: var(--ink-3);
}
.msg-toast__view {
    color: var(--emerald);
}
.msg-toast__view:hover {
    color: var(--emerald-lt);
}
.msg-toast__dismiss {
    color: var(--ink-4);
}
.msg-toast__dismiss:hover {
    color: var(--ink-2);
}
html[data-theme="light"] .msg-toast__text {
    color: var(--ink-2);
}
html[data-theme="light"] .msg-toast__view {
    color: var(--emerald-drk);
}
html[data-theme="light"] .msg-toast__view:hover {
    color: var(--emerald-xdrk);
}
html[data-theme="light"] .msg-toast__dismiss {
    color: var(--ink-2);
}
html[data-theme="light"] .msg-toast__dismiss:hover {
    color: var(--emerald-xdrk);
}

.ot-comment-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ot-comment {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 0.9rem;
    padding: 1rem 0;
    position: relative;
}

.ot-comment--reply {
    margin-left: 2.5rem;
    padding-left: 1rem;
    border-left: 1px solid var(--rule, rgba(255,255,255,.08));
}

.ot-comment__avatar {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}

.ot-comment__avatar img,
.ot-comment__avatar-fallback {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ot-comment__avatar img {
    object-fit: cover;
    background: #161b1a;
}

.ot-comment__avatar-fallback {
    background: linear-gradient(135deg, rgba(90,158,58,.18), rgba(90,180,200,.18));
    border: 1px solid rgba(90,158,58,.25);
    color: var(--ink, #e8ede8);
    font-weight: 700;
    font-size: 1rem;
}

.ot-comment__main {
    background: var(--bg-card, #161b1a);
    border: 1px solid var(--rule, rgba(255,255,255,.08));
    border-radius: 14px;
    padding: 1rem 1rem 0.85rem;
    position: relative;
}

.ot-comment__meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.ot-comment__author-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.ot-comment__author {
    color: var(--ink, #f5f7f6);
    font-size: 0.95rem;
}

.ot-comment__date {
    font-size: 0.78rem;
    color: var(--ink-4, #8b928e);
}

.ot-comment__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ot-comment__badge--author {
    background: rgba(212,173,85,.14);
    border: 1px solid rgba(212,173,85,.28);
    color: #d4ad55;
}

.ot-comment__badge--admin {
    background: rgba(90,180,200,.14);
    border: 1px solid rgba(90,180,200,.28);
    color: #5ab4c8;
}

.ot-comment__badge--member {
    background: rgba(90,158,58,.14);
    border: 1px solid rgba(90,158,58,.28);
    color: #5a9e3a;
}

.ot-comment__body {
    color: var(--ink-2, #d8ddd9);
    line-height: 1.7;
    font-size: 0.92rem;
    white-space: normal;
    word-break: break-word;
}

.ot-comment__actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.9rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(255,255,255,.06);
}

.ot-comment__action {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--emerald, #5a9e3a);
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
}

.ot-comment__action:hover {
    opacity: 0.85;
    text-decoration: underline;
}

.ot-comment-children {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-top: 0.9rem;
}

.ot-comment__hidden {
    color: var(--ink-3, #b4bbb8);
    font-size: 0.9rem;
}

.comment-user-note {
    padding: .85rem 1rem;
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    color: var(--ink, #f5f7f6);
}

.comment-user-note__meta {
    display: inline-block;
    margin-left: .5rem;
    color: var(--ink-4, #8b928e);
    font-size: .85rem;
}

@media (max-width: 640px) {
    .ot-comment {
        grid-template-columns: 40px 1fr;
        gap: 0.75rem;
    }

    .ot-comment__avatar,
    .ot-comment__avatar img,
    .ot-comment__avatar-fallback {
        width: 40px;
        height: 40px;
    }

    .ot-comment--reply {
        margin-left: 1rem;
        padding-left: 0.75rem;
    }
}


/* ═══════════════════════════════════════════════════════
   MEMBER SOCIAL LINKS
   Rendered by social_links_html() (includes/socials.php) and shared by the
   public profile and the blog author block, so both read the same. Tokens
   only — the light theme picks it up without a second rule set.
═══════════════════════════════════════════════════════ */
.social-links {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: .5rem;
}
.social-links__item { display: flex; }

/* Spacing where the row sits under a profile bio. */
.prof-socials { margin-top: .85rem; }
.social-links__link {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .4rem .65rem;
    border-radius: 100px;
    background: var(--survey-dim);
    color: var(--ink-2) !important;
    text-decoration: none;
    font-size: .74rem; line-height: 1.2;
    transition: color .15s, background .15s, transform .15s;
}
.social-links__link:hover,
.social-links__link:focus-visible {
    color: var(--emerald-lt);
    background: var(--emerald-dim);
    transform: translateY(-1px);
}
.social-links__link i { font-size: .8rem; flex: none; padding-top: 3px; }
.social-links__name { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The platform name is there for anyone who cannot read the icon. It is not
   painted on screen, where the icon already says it, but it stays in the
   accessibility tree and in the link's own text. */
.social-links__plat {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Icon-only variant, for tight spots like the author card. */
.social-links--compact .social-links__name { display: none; }
.social-links--compact .social-links__link {
    width: 30px; height: 30px; padding: 0;
    justify-content: center; border-radius: 50%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SITE CHROME
   The account menu, the unread badges, the message toast and the maintenance
   banner. All four are on every page and all four used to be styled inline.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The account dropdown ── */
/* !important throughout: Bootstrap is linked after this sheet, and the
   .dropdown-item rule above sets its colour that way too. Without it the
   menu falls back to Bootstrap's 10rem and its items to --ink-2. */
.acct-menu { min-width: 220px !important; }

.acct-menu__avatar {
    width: 24px; height: 24px; border-radius: 50%;
    border: 1px solid var(--emerald-rule);
    object-fit: cover;
}
/* The same circle with an initial in it, when there is no photograph. */
span.acct-menu__avatar {
    background: var(--emerald-dim);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: .65rem; font-weight: 800;
    color: var(--emerald-lt);
}

.acct-menu__head {
    padding: .5rem 1rem .4rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: .35rem;
}
.acct-menu__head-label {
    font-family: var(--font-mono); font-size: .55rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-4);
}
.acct-menu__head-name { font-size: .82rem; font-weight: 600; color: var(--ink); margin-top: .1rem; }
.acct-menu__head-role {
    font-family: var(--font-mono); font-size: .58rem; color: var(--emerald-lt); margin-top: .1rem;
}

/* The "Account" / "Contribute" / "Community" headings between groups. */
.acct-menu__group {
    display: block; padding: .3rem 1rem;
    font-family: var(--font-mono); font-size: .55rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-4);
}
.acct-menu__group--admin { color: var(--emerald-lt); }

.dropdown-item.acct-menu__admin  { color: var(--emerald-lt) !important; }
.dropdown-item.acct-menu__signout { color: #c87a7a !important; }

/* ── Unread counts ──
   Shown and hidden with the `hidden` attribute rather than by writing
   element.style.display from PHP and again from the script. */
.ot-msg-badge,
.ot-msg-combined-badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--emerald); color: #0a1012;
    font-family: var(--font-mono); font-size: .5rem; font-weight: 700; line-height: 1;
    border-radius: 100px;
}
.ot-msg-badge { padding: .1rem .4rem; }
.ot-msg-combined-badge { min-width: 16px; height: 16px; padding: 0 4px; }
.ot-msg-badge[hidden],
.ot-msg-combined-badge[hidden] { display: none; }

/* Requests waiting on a club admin — amber, because it is somebody else's turn. */
.acct-menu__pending {
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(200,160,58,.85); color: #0a1012;
    font-family: var(--font-mono); font-size: .5rem; font-weight: 700;
    padding: .1rem .4rem; border-radius: 100px;
}

/* ── The new-message toast ── */
.msg-toast {
    position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 8000;
    display: none; align-items: center; gap: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--emerald-rule);
    border-left: 3px solid var(--emerald);
    border-radius: var(--radius-lg);
    padding: .9rem 1.1rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.6);
    min-width: 280px; max-width: 340px;
    animation: toastIn .3s ease;
    transition: opacity .25s ease, transform .25s ease;
}
.msg-toast.is-open { display: flex; }
.msg-toast.is-leaving { opacity: 0; transform: translateY(12px); }

.msg-toast__icon {
    width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
    background: var(--emerald-dim); border: 1px solid var(--emerald-rule);
    display: flex; align-items: center; justify-content: center;
    color: var(--emerald-lt); font-size: .9rem;
}
.msg-toast__body { flex: 1; min-width: 0; }
.msg-toast__actions { display: flex; flex-direction: column; gap: .35rem; flex-shrink: 0; }

/* The typography these four carried inline. The .msg-toast__* rules further up
   this sheet only ever set colour, so lifting the style attributes out of the
   template took the rest of it with them — including the dismiss button's
   border:none, which let the browser draw its own. */
.msg-toast__title {
    font-family: var(--font-display); font-size: .85rem; font-weight: 700;
    margin-bottom: .15rem;
}
.msg-toast__text {
    font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em;
}
.msg-toast__view {
    font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em;
    text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.msg-toast__dismiss {
    background: none; border: 0; padding: 0; cursor: pointer; text-align: right;
    font-family: var(--font-mono); font-size: .58rem; letter-spacing: .06em;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── The maintenance banner an admin sees while the site is closed ──
   Its two modes were four colours interpolated through PHP; they are a
   modifier here, so the markup only says which mode it is in. */
.site-mode-banner {
    position: sticky; top: 0; z-index: 9999;
    padding: .5rem 1.25rem;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    font-family: var(--font-mono); font-size: .65rem;
    letter-spacing: .1em; text-transform: uppercase;
    background: var(--mode-dim); color: var(--mode);
    border-bottom: 1px solid var(--mode-rule);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.site-mode-banner--maintenance {
    --mode: #c8a032; --mode-dim: rgba(200,160,50,.12); --mode-rule: rgba(200,160,50,.35);
}
.site-mode-banner--soon {
    --mode: #5ab4c8; --mode-dim: rgba(90,180,200,.1); --mode-rule: rgba(90,180,200,.3);
}
.site-mode-banner__side { display: flex; align-items: center; gap: .5rem; }
.site-mode-banner__side--end { gap: .75rem; }
.site-mode-banner__note { font-weight: 400; color: var(--mode); opacity: .8; }

.site-mode-banner__link {
    color: var(--mode); text-decoration: none; opacity: .8; transition: opacity .15s;
}
.site-mode-banner__link:hover,
.site-mode-banner__link:focus-visible { color: var(--mode); opacity: 1; }

.site-mode-banner__dismiss {
    background: transparent; border: 1px solid var(--mode-rule); border-radius: 4px;
    color: var(--mode); font-family: inherit; font-size: .6rem;
    letter-spacing: .1em; text-transform: uppercase; padding: .2rem .6rem;
    cursor: pointer; transition: background .15s;
}
.site-mode-banner__dismiss:hover,
.site-mode-banner__dismiss:focus-visible { background: var(--mode-dim); }
.site-mode-banner[hidden] { display: none; }