/* =========================================================
   MANGROVE HORIZONS
   Re-skin drawn from the original symposium poster:
   deep mangrove ground, paper-cream text, needlefish ochre.

   Colours are taken directly from mangrovehorizons-promo1.pptx.
   The palette is dark-first by necessity: on the cream ground
   the ochre only reaches 1.74:1 contrast, so it is used for
   text on dark and as a rule / accent on light.

   To go back to the previous light-blue look, swap the
   stylesheet in index.html for css/style-classic.css.
   ========================================================= */


/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {

    font-size: 18px;

    scroll-behavior: smooth;

    /* stop the sticky nav covering anchor targets */
    scroll-padding-top: 5rem;
}

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }
}


/* =========================================================
   PALETTE — from the poster
   ========================================================= */

:root {

    /* Ground */
    --ground: #0A2422;
    /* deep mangrove */
    --ground-raised: #10312E;
    /* panels sitting on the ground */
    --ground-deep: #071B1A;
    /* footer, hero base */

    /* Ink */
    --paper: #F3EFE4;
    /* primary text on dark */
    --sage: #A7C6BE;
    /* secondary text */
    --mist: #C9D4CD;
    /* tertiary text */

    /* Accent */
    --ochre: #D8B26A;
    /* the needlefish in the emblem */
    --ochre-bright: #E8C583;

    /* Lines */
    --rule: rgba(199, 212, 205, 0.18);
    --rule-strong: rgba(199, 212, 205, 0.32);

    /* Layout */
    --max-width: 1140px;

    /* Type */
    --serif: "Newsreader", Cambria, Georgia, "Times New Roman", serif;
    --sans: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}


/* =========================================================
   BASE TYPOGRAPHY
   ========================================================= */

body {

    font-family: var(--sans);

    font-size: 1.02rem;

    line-height: 1.7;

    color: var(--paper);

    background: var(--ground);

    -webkit-font-smoothing: antialiased;
}


h1,
h2,
h3 {

    font-family: var(--serif);

    font-weight: 600;

    line-height: 1.14;

    letter-spacing: -0.015em;

    color: var(--paper);
}

h1 {

    font-size: clamp(2.6rem, 6vw, 4.4rem);
}

h2 {

    font-size: clamp(1.9rem, 3.6vw, 2.6rem);

    margin-bottom: 1.4rem;
}

h3 {

    font-size: clamp(1.1rem, 2vw, 1.28rem);

    margin-bottom: 0.7rem;
}


/* Ochre rule under each section heading — echoes the poster's
   thin dividing lines without adding another colour. */

section > .container > h2 {

    position: relative;

    padding-bottom: 1.1rem;

    margin-bottom: 1.8rem;
}

section > .container > h2::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 68px;

    height: 3px;

    background: var(--ochre);
}


p {

    margin-bottom: 1.1rem;

    color: var(--mist);

    max-width: 68ch;
}

p:last-child {

    margin-bottom: 0;
}

a {

    color: var(--ochre);
}


/* =========================================================
   LAYOUT
   ========================================================= */

.container {

    max-width: var(--max-width);

    margin: 0 auto;

    padding: 0 2rem;
}

section {

    padding: 6rem 0;
}

/* Hairline between sections instead of heavy blocks of colour */

main > section + section {

    border-top: 1px solid var(--rule);
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.skip-link {

    position: absolute;

    left: -9999px;

    top: 0;

    padding: 0.8rem 1.4rem;

    background: var(--ochre);

    color: var(--ground);

    font-weight: 600;

    z-index: 3000;
}

.skip-link:focus {

    left: 0;
}

a:focus-visible,
.button:focus-visible,
.main-nav a:focus-visible {

    outline: 2px solid var(--ochre);

    outline-offset: 3px;

    border-radius: 2px;
}


/* =========================================================
   HERO
   Two-column, left-aligned — the poster's composition.
   The scrim is a gradient, opaque only where the text sits,
   so the mangrove photograph stays visible.
   ========================================================= */

.hero {

    position: relative;

    padding: 7rem 0 6.5rem;

    background:
        linear-gradient(100deg,
            rgba(7, 27, 26, 0.94) 0%,
            rgba(7, 27, 26, 0.88) 42%,
            rgba(10, 36, 34, 0.62) 72%,
            rgba(10, 36, 34, 0.45) 100%),
        url("../images/hero-mangrove.jpg");

    background-size: cover;

    background-position: center 58%;

    background-repeat: no-repeat;
}


/* Warm edge at the foot of the hero, so it meets the page
   rather than stopping abruptly. */

.hero::after {

    content: "";

    position: absolute;

    inset: auto 0 0 0;

    height: 130px;

    background: linear-gradient(to bottom, transparent, var(--ground));

    pointer-events: none;
}

.hero .container {

    position: relative;

    z-index: 1;

    display: grid;

    grid-template-columns: minmax(190px, 300px) 1fr;

    column-gap: 3.5rem;

    align-items: center;

    text-align: left;
}

.hero .container > *:not(.hero-logos) {

    grid-column: 2;
}


/* The emblem — no white card, it has its own transparency */

.hero-logos {

    grid-column: 1;

    grid-row: 1 / span 5;

    align-self: center;

    margin: 0;
}

.hero-logos img {

    width: 100%;

    height: auto;

    background: none;

    padding: 0;

    filter: drop-shadow(0 10px 34px rgba(0, 0, 0, 0.5));
}


.hero-category {

    font-family: var(--sans);

    font-size: 0.82rem;

    font-weight: 600;

    letter-spacing: 0.22em;

    text-transform: uppercase;

    color: var(--ochre);

    margin-bottom: 1rem;

    max-width: none;
}

.hero h1 {

    margin: 0 0 1.1rem;

    color: var(--paper);
}

.hero-subtitle {

    font-family: var(--serif);

    font-size: clamp(1.15rem, 2vw, 1.5rem);

    font-weight: 400;

    line-height: 1.4;

    color: var(--sage);

    margin: 0 0 2.2rem;

    max-width: 34ch;
}


/* Date and place — hairline rules, not boxes */

.hero-meta {

    display: flex;

    /* date above place, not side by side */
    flex-direction: column;

    align-items: flex-start;

    gap: 0.15rem;

    margin: 0 0 2.4rem;

    padding-top: 1.4rem;

    border-top: 1px solid var(--rule-strong);
}

.hero-meta span {

    display: inline-block;

    padding: 0.35rem 0;

    font-size: 0.98rem;

    font-weight: 500;

    color: var(--paper);

    background: none;

    border: 0;

    border-radius: 0;
}

.hero-buttons {

    display: flex;

    gap: 0.9rem;

    flex-wrap: wrap;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.main-nav {

    position: sticky;

    top: 0;

    z-index: 1000;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 2.2rem;

    padding: 1rem 2rem;

    background: rgba(7, 27, 26, 0.92);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    border-bottom: 1px solid var(--rule);
}

.main-nav a {

    position: relative;

    color: var(--mist);

    text-decoration: none;

    font-size: 0.92rem;

    font-weight: 500;

    letter-spacing: 0.01em;

    white-space: nowrap;

    padding: 0.25rem 0;

    transition: color 0.2s ease;
}

.main-nav a::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: -2px;

    height: 2px;

    background: var(--ochre);

    transform: scaleX(0);

    transform-origin: left;

    transition: transform 0.22s ease;
}

.main-nav a:hover {

    color: var(--paper);
}

.main-nav a:hover::after {

    transform: scaleX(1);
}


/* =========================================================
   BUTTONS
   ========================================================= */

.button {

    display: inline-block;

    padding: 0.85rem 1.9rem;

    background: var(--ochre);

    color: var(--ground);

    text-decoration: none;

    font-weight: 600;

    font-size: 0.95rem;

    letter-spacing: 0.01em;

    border: 1px solid var(--ochre);

    border-radius: 3px;

    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.button:hover {

    background: var(--ochre-bright);

    border-color: var(--ochre-bright);

    transform: translateY(-1px);
}

.button-outline {

    background: transparent;

    color: var(--paper);

    border: 1px solid var(--rule-strong);
}

.button-outline:hover {

    background: rgba(243, 239, 228, 0.08);

    border-color: var(--paper);

    color: var(--paper);
}


/* =========================================================
   ABOUT — the single statement line
   ========================================================= */

#about {

    padding: 5.5rem 0 6rem;
}

.intro-text {

    font-family: var(--serif);

    font-size: clamp(1.45rem, 3vw, 2.15rem);

    font-weight: 400;

    line-height: 1.34;

    color: var(--paper);

    text-align: left;

    max-width: 26ch;

    margin: 0;
}


/* An ochre initial rule, tying it to the section headings */

.intro-text {

    border-left: 3px solid var(--ochre);

    padding-left: 2rem;
}


/* =========================================================
   IMAGE GALLERY
   ========================================================= */

.image-gallery {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 1.25rem;

    margin-top: 2.5rem;
}

.image-gallery img {

    width: 100%;

    height: 300px;

    object-fit: cover;

    border-radius: 4px;

    filter: saturate(0.92);

    transition: filter 0.3s ease, transform 0.3s ease;
}

.image-gallery img:hover {

    filter: saturate(1.05);
}


/* =========================================================
   PROGRAMME
   ========================================================= */

.note {

    color: var(--sage);

    font-size: 0.95rem;

    font-style: italic;
}


/* =========================================================
   LOCATIONS MAP
   ========================================================= */

#map {

    height: 480px;

    width: 100%;

    margin: 0.5rem 0 0;

    border-radius: 4px;

    border: 1px solid var(--rule-strong);

    background: var(--ground-raised);

    z-index: 1;
}


/* Numbered markers in the brand palette */

.venue-marker {

    background: transparent;

    border: 0;
}

.venue-marker span {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 34px;

    height: 34px;

    border-radius: 50%;

    background: var(--ochre);

    color: var(--ground-deep);

    border: 2px solid var(--ground-deep);

    font-family: var(--sans);

    font-weight: 700;

    font-size: 0.95rem;

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.6);
}


/* Leaflet chrome, restyled for the dark base map */

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {

    background: var(--ground-raised);

    color: var(--paper);

    border: 1px solid var(--rule-strong);

    border-radius: 4px;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.leaflet-popup-content {

    margin: 0.95rem 1.15rem;

    line-height: 1.55;

    font-family: var(--sans);
}

.leaflet-popup-content strong {

    font-family: var(--serif);

    font-size: 1.05rem;

    font-weight: 600;
}

.leaflet-popup-content .popup-role,
.leaflet-popup-content .popup-address {

    display: block;
}

.leaflet-popup-content .popup-role {

    margin-top: 0.35rem;

    color: var(--ochre);

    font-size: 0.9rem;
}

.leaflet-popup-content .popup-address {

    margin-top: 0.3rem;

    color: var(--sage);

    font-size: 0.9rem;
}

.leaflet-popup-close-button {

    color: var(--sage) !important;
}

.leaflet-container a.leaflet-popup-close-button:hover {

    color: var(--paper) !important;
}

.leaflet-bar a,
.leaflet-bar a:hover {

    background: var(--ground-raised);

    color: var(--paper);

    border-bottom-color: var(--rule);
}

.leaflet-bar a:hover {

    background: #17423E;
}

.leaflet-control-attribution {

    background: rgba(7, 27, 26, 0.82) !important;

    color: var(--sage) !important;

    font-size: 0.68rem;
}

.leaflet-control-attribution a {

    color: var(--mist) !important;
}


/* =========================================================
   VENUE CARDS
   ========================================================= */

.venue-list {

    list-style: none;

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));

    gap: 1.25rem;

    margin: 1.25rem 0 0;

    padding: 0;
}

.venue-list li {

    display: flex;

    gap: 1.1rem;

    align-items: flex-start;

    padding: 1.6rem;

    background: var(--ground-raised);

    border: 1px solid var(--rule);

    border-radius: 4px;

    transition: border-color 0.25s ease;
}

.venue-list li:hover {

    border-color: var(--rule-strong);
}

.venue-index {

    flex: 0 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 32px;

    height: 32px;

    border-radius: 50%;

    background: var(--ochre);

    color: var(--ground-deep);

    font-weight: 700;

    font-size: 0.92rem;
}

.venue-list h3 {

    margin-bottom: 0.35rem;
}

.venue-role {

    margin-bottom: 0.45rem;

    font-size: 0.88rem;

    font-weight: 600;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    color: var(--ochre);
}

.venue-address {

    margin-bottom: 0;

    font-size: 0.94rem;

    color: var(--sage);
}


/* =========================================================
   ORGANISERS & PARTNERS
   ========================================================= */

.organisation-block {

    margin-top: 3rem;
}

.organisation-block:first-of-type {

    margin-top: 2rem;
}

.organisation-block h3 {

    font-family: var(--sans);

    font-size: 0.8rem;

    font-weight: 700;

    letter-spacing: 0.2em;

    text-transform: uppercase;

    color: var(--ochre);

    margin-bottom: 1.1rem;
}

.organisation-list {

    margin: 0 0 1.75rem;

    padding: 0;

    list-style: none;

    max-width: 68ch;
}

.organisation-list li {

    position: relative;

    margin-bottom: 0.55rem;

    padding-left: 1.4rem;

    color: var(--paper);
}

.organisation-list li::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0.72em;

    width: 6px;

    height: 1px;

    background: var(--ochre);
}


/* Logo tiles: partner marks are dark-on-transparent, so they
   keep a light tile. Made deliberate rather than accidental. */

.logo-grid {

    display: flex;

    align-items: center;

    gap: 1.1rem;

    flex-wrap: wrap;

    margin: 1.5rem 0 0;
}

.logo-card {

    width: 190px;

    height: 118px;

    padding: 1.1rem;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--paper);

    border: 0;

    border-radius: 3px;
}

.logo-card-wide {

    width: 260px;
}

.logo-card img {

    max-width: 100%;

    max-height: 78px;

    object-fit: contain;
}


/* =========================================================
   REGISTRATION
   The one place that inverts — cream paper on the dark page,
   so the call to action is the brightest thing on the site.
   ========================================================= */

.registration {

    background: var(--paper);

    border-top: 0;
}

.registration-box {

    max-width: 640px;

    margin: 0;

    text-align: left;
}

.registration h2 {

    color: var(--ground);
}

.registration > .container > .registration-box > h2 {

    position: relative;

    padding-bottom: 1.1rem;
}

.registration-box h2::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 68px;

    height: 3px;

    background: var(--ground);
}

.registration p {

    color: #33463F;
}

.registration p.registration-deadline {

    /* must win over `.registration p` above, which is dark-on-cream */
    color: var(--paper);
}

.registration-deadline {

    margin: 1.8rem 0;

    padding: 1rem 1.3rem;

    background: var(--ground);

    color: var(--paper);

    border-left: 3px solid var(--ochre);

    border-radius: 3px;

    font-size: 1rem;

    max-width: max-content;
}

.registration-deadline strong {

    color: var(--ochre);
}

.registration .button {

    background: var(--ground);

    color: var(--paper);

    border-color: var(--ground);
}

.registration .button:hover {

    background: var(--ground-raised);

    border-color: var(--ground-raised);
}


/* =========================================================
   CONTACT
   ========================================================= */

.contact-list {

    list-style: none;

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));

    gap: 1.25rem;

    margin: 2rem 0 0;

    padding: 0;
}

.contact-list li {

    padding: 1.6rem;

    background: var(--ground-raised);

    border: 1px solid var(--rule);

    border-radius: 4px;

    line-height: 1.85;

    color: var(--paper);
}

.contact-list a {

    color: var(--ochre);

    text-decoration: none;

    border-bottom: 1px solid rgba(216, 178, 106, 0.35);
}

.contact-list a:hover {

    border-bottom-color: var(--ochre);
}


/* =========================================================
   FOOTER
   ========================================================= */

footer {

    margin-top: 0;

    padding: 3.5rem 0;

    background: var(--ground-deep);

    border-top: 1px solid var(--rule);

    text-align: center;
}

footer p {

    color: var(--mist);

    margin: 0 auto 0.6rem;

    max-width: 70ch;
}

footer strong {

    color: var(--paper);

    font-family: var(--serif);

    font-weight: 600;
}

footer .footer-fine {

    margin-bottom: 0;

    font-size: 0.88rem;

    color: var(--sage);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 950px) {

    .main-nav {

        justify-content: flex-start;

        overflow-x: auto;

        gap: 1.5rem;

        padding: 0.85rem 1.25rem;

        white-space: nowrap;

        -webkit-overflow-scrolling: touch;
    }

    .main-nav::-webkit-scrollbar {

        display: none;
    }

    .main-nav a {

        font-size: 0.88rem;
    }


    /* Hero returns to a single column, emblem above the text */

    .hero {

        padding: 4.5rem 0 5rem;

        background-position: center;
    }

    .hero .container {

        grid-template-columns: 1fr;

        row-gap: 0;
    }

    .hero .container > *:not(.hero-logos) {

        grid-column: 1;
    }

    .hero-logos {

        grid-row: auto;

        width: 190px;

        margin-bottom: 2rem;
    }

    section {

        padding: 4.5rem 0;
    }

    .container {

        padding: 0 1.5rem;
    }
}


@media (max-width: 700px) {

    html {

        font-size: 17px;
    }

    #map {

        height: 400px;
    }

    .image-gallery img {

        height: 240px;
    }

    .intro-text {

        padding-left: 1.35rem;

        max-width: none;
    }

    .venue-list li,
    .contact-list li {

        padding: 1.35rem;
    }

    .hero-buttons .button {

        width: 100%;

        text-align: center;
    }

    .logo-card {

        width: 152px;

        height: 100px;
    }

    .logo-card-wide {

        width: 210px;
    }
}


/* =========================================================
   DARK BASE MAP
   OpenStreetMap tiles need no API key, but ship light.
   This filter renders them dark to match the page; markers,
   popups and controls sit outside .leaflet-tile so they are
   unaffected.
   ========================================================= */

.leaflet-tile-pane {

    filter:
        invert(1)
        hue-rotate(185deg)
        brightness(0.92)
        contrast(0.86)
        saturate(0.42)
        grayscale(0.35);
}

.leaflet-container {

    background: var(--ground-raised);
}


/* =========================================================
   CONTACT — named organisers
   ========================================================= */








/* Institutional links sit quieter than the people above them */

.contact-orgs li {

    font-size: 0.95rem;
}


/* =========================================================
   FUNDER CARD — LHAP key visual behind the logo

   The key visual's orange line art is too light for a white
   logo on its own (2.07:1 where they overlap), so a 55%
   teal scrim sits between them: 5.18:1 at the worst point,
   8.04:1 on the open teal ground, pattern still legible.
   ========================================================= */

.logo-card-lhap {

    background-color: #147082;

    background-image:
        linear-gradient(rgba(11, 69, 81, 0.55),
            rgba(11, 69, 81, 0.55)),
        url("../images/lhap-keyvisual.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    width: 380px;

    height: 190px;

    padding: 1.1rem 1.3rem;
}

.logo-card-lhap img {

    /* the PNG is trimmed to its artwork, so flex-centring
       actually centres what you see */
    max-width: 300px;

    max-height: 140px;
}


@media (max-width: 700px) {

    .logo-card-lhap {

        width: 100%;

        max-width: 320px;

        height: 168px;
    }

    .logo-card-lhap img {

        max-width: 258px;

        max-height: 120px;
    }
}


/* =========================================================
   ABOUT — the statement, then the lead paragraph beneath it
   (formerly its own "Unfolding the Coast" section)
   ========================================================= */

.about-lead {

    font-size: 1.06rem;
}

/* only the first sits flush under the heading */
.about-lead:first-of-type {

    margin-top: 0;
}


/* The heading carries the gap between the statement and the
   prose below it, so the quote keeps its own breathing room. */

#about > .container > h2 {

    margin-top: 3.75rem;
}


/* =========================================================
   PROGRAMME — confirmed speakers

   One row per speaker rather than a card each: the cards
   cost a lot of vertical space for four short entries.
   ========================================================= */

.icon-sprite {

    position: absolute;

    width: 0;

    height: 0;

    overflow: hidden;
}

.subhead {

    font-family: var(--sans);

    font-size: 0.8rem;

    font-weight: 700;

    letter-spacing: 0.2em;

    text-transform: uppercase;

    color: var(--ochre);

    margin: 2.75rem 0 0.5rem;
}

/* =========================================================
   PROGRAMME — the "full programme coming" callout
   ========================================================= */

.programme-callout {

    margin: 0;

    padding: 1.35rem 1.6rem;

    background: var(--ground-raised);

    border-left: 3px solid var(--ochre);

    border-radius: 3px;

    font-family: var(--serif);

    font-size: 1.16rem;

    line-height: 1.45;

    color: var(--paper);

    max-width: 46ch;
}


@media (max-width: 860px) {

}


@media (max-width: 700px) {

    .programme-callout {

        font-size: 1.06rem;

        padding: 1.2rem 1.35rem;
    }
}


/* =========================================================
   CONFIRMED SPEAKERS — carousel
   ========================================================= */

.visually-hidden {

    position: absolute;

    width: 1px;

    height: 1px;

    margin: -1px;

    padding: 0;

    overflow: hidden;

    clip: rect(0 0 0 0);

    white-space: nowrap;

    border: 0;
}

.speaker-carousel {

    margin: 0 0 2.75rem;
}

.speaker-panels {

    background: var(--ground-raised);

    border: 1px solid var(--rule);

    border-radius: 4px;
}


/* Without JS every slide stays visible, stacked. */

.speaker-slide {

    padding: 1.45rem 1.7rem;
}

.speaker-slide + .speaker-slide {

    border-top: 1px solid var(--rule);
}


/* Once the script runs, one at a time at a steady height so
   the page below does not jump between speakers. */

.speaker-carousel.is-interactive .speaker-panels {

    /* link now shares the name's row, so every slide is the same
       three lines; fixed here so the page never shifts */
    min-height: 158px;

    display: flex;

    align-items: center;
}

.speaker-carousel.is-interactive .speaker-slide {

    width: 100%;

    border-top: 0;

    animation: speaker-fade 0.28s ease;
}

@keyframes speaker-fade {

    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {

    .speaker-carousel.is-interactive .speaker-slide {

        animation: none;
    }
}


/* Slide contents */

.sp-head {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 0.4rem;

    max-width: none;
}

.sp-name {

    font-family: var(--serif);

    font-size: clamp(1.18rem, 2vw, 1.36rem);

    font-weight: 600;

    line-height: 1.18;

    color: var(--paper);

    max-width: none;
}

.sp-affil {

    font-size: 0.8rem;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    color: var(--ochre);

    margin-bottom: 0.7rem;

    max-width: none;
}

.sp-topic {

    font-size: 0.97rem;

    line-height: 1.5;

    color: var(--mist);

    margin-bottom: 0;

    max-width: 52ch;
}

.sp-links {

    flex: 0 0 auto;

    margin: 0;

    max-width: none;
}

.sp-links a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 30px;

    height: 30px;

    border-radius: 50%;

    color: var(--sage);

    border: 1px solid var(--rule-strong);

    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.sp-links a:hover {

    color: var(--ground);

    background: var(--ochre);

    border-color: var(--ochre);
}

.sp-links svg {

    width: 16px;

    height: 16px;
}


/* Controls — hidden entirely until the script activates them */

.carousel-controls {

    display: none;

    align-items: center;

    gap: 1rem;

    margin-top: 0.85rem;
}

.speaker-carousel.is-interactive .carousel-controls {

    display: flex;
}

.carousel-arrow {

    flex: 0 0 auto;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 32px;

    height: 32px;

    padding: 0;

    border-radius: 50%;

    background: transparent;

    border: 1px solid var(--rule-strong);

    color: var(--sage);

    cursor: pointer;

    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.carousel-arrow:hover {

    color: var(--ground);

    background: var(--ochre);

    border-color: var(--ochre);
}

.carousel-arrow svg {

    width: 15px;

    height: 15px;
}

.carousel-dots {

    display: flex;

    align-items: center;

    gap: 0.55rem;
}

.carousel-dots [role="tab"] {

    width: 30px;

    height: 30px;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;

    position: relative;
}

.carousel-dots [role="tab"]::before {

    content: "";

    position: absolute;

    top: 50%;

    left: 50%;

    width: 9px;

    height: 9px;

    margin: -4.5px 0 0 -4.5px;

    border-radius: 50%;

    background: transparent;

    border: 1px solid var(--sage);

    transition: background 0.2s ease, border-color 0.2s ease;
}

.carousel-dots [role="tab"]:hover::before {

    border-color: var(--ochre);
}

.carousel-dots [role="tab"][aria-selected="true"]::before {

    background: var(--ochre);

    border-color: var(--ochre);
}

.carousel-arrow:focus-visible,
.carousel-dots [role="tab"]:focus-visible {

    outline: 2px solid var(--ochre);

    outline-offset: 2px;

    border-radius: 50%;
}


@media (max-width: 700px) {

    .speaker-slide {

        padding: 1.25rem 1.25rem;
    }

    .speaker-carousel.is-interactive .speaker-panels {

        min-height: 196px;
    }
}


/* =========================================================
   TRAILER — responsive 16:9 video embed
   YouTube's own snippet is a fixed 560 x 315; this lets the
   player fill the column at any width and keep its shape.
   ========================================================= */

.video-frame {

    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: var(--ground-deep);

    border: 1px solid var(--rule-strong);

    border-radius: 4px;
}

.video-frame iframe {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    border: 0;
}


/* =========================================================
   CAROUSEL CONTROLS — scale with the number of speakers
   Each dot is a 30px tap target. At 8 speakers the dots plus
   both arrows outgrow a 375px phone and the page scrolls
   sideways. Letting the dot row shrink and wrap keeps the
   arrows on screen however long speakers.csv gets, without
   shrinking the dots below a comfortable touch size.
   ========================================================= */

.carousel-controls {

    max-width: 100%;
}

.carousel-dots {

    flex: 0 1 auto;

    min-width: 0;

    flex-wrap: wrap;

    row-gap: 0.1rem;
}