/* ==========================================================================
   GCCA Calgary — Guyana Canada Cultural Association (Calgary)
   styles.css — one stylesheet for all four pages
   --------------------------------------------------------------------------
   Palette and type are taken directly from the design mockups.
   Signature motif: the Golden Arrowhead chevron from the Guyanese flag,
   used as the hero mask, section markers, dividers and hover accents.
   Canadian flag red appears alongside it as a second accent — Guyana-Canada.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Surfaces */
    --cream:       #FBF8EE;
    --cream-2:     #F5F1E1;
    --cream-3:     #EFE9D6;
    --paper:       #FFFDF6;

    /* Guyana green */
    --green-900:   #0A3A26;   /* display headings */
    --green-800:   #0C4A2E;
    --green-700:   #116A3B;   /* primary actions, links */
    --green-600:   #178048;
    --green-100:   #E2EFE1;   /* icon wells */
    --green-50:    #EEF5EB;

    /* Golden arrowhead */
    --gold:        #F4C21B;
    --gold-600:    #D3A013;
    --gold-300:    #EBCE77;
    --gold-200:    #F0DCA0;
    --gold-100:    #F7EDCC;

    /* Flag red / black */
    --red:         #CE1126;
    --flag-black:  #0C0C0C;

    /* Canadian flag red — we are Guyana *and* Canada */
    --maple:       #D80621;
    --maple-700:   #A4041A;
    --maple-100:   #FBE4E6;

    /* Text */
    --ink:         #2E3129;
    --ink-soft:    #5C6055;
    --ink-faint:   #86897C;
    --line:        #E4DFCC;
    --line-strong: #D5CDB2;

    /* Structure */
    --shell:       1200px;
    --gutter:      max(20px, calc((100vw - var(--shell)) / 2));
    /* Crisp corners, taken from the design mock: a small, even radius on
       everything rather than the soft 12/22px this carried briefly. Buttons
       and chips are rectangles here, not pills — see .btn below. Genuine
       circles (icon wells, avatars, the speaker buttons) keep their 50% and
       are unaffected by these tokens. */
    --radius:      6px;
    --radius-lg:   10px;
    --radius-pill: 999px;

    /* Type */
    --font-display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Depth

       Wider and softer than before, and tinted with the page's own green
       rather than grey, so a raised card looks like it is lifting off this
       surface rather than floating on a stock template. Low opacity, large
       blur — the modern look is diffuse light, not a hard drop shadow. */
    --shadow-sm: 0 1px 2px rgba(10, 58, 38, .04), 0 8px 24px rgba(10, 58, 38, .05);
    --shadow-md: 0 2px 6px rgba(10, 58, 38, .04), 0 18px 44px rgba(10, 58, 38, .09);
    --shadow-lg: 0 4px 12px rgba(10, 58, 38, .05), 0 34px 74px rgba(10, 58, 38, .14);

    /* Motion

       Three speeds, not seven. The stylesheet had grown .2s, .22s, .25s,
       .28s, .3s, .35s and .6s for what is really the same handful of
       interactions — nobody can tell .28s from .3s, but the accumulation is
       what makes an interface feel unsettled rather than composed.

       --t-fast   anything under the pointer: hovers, focus rings, small
                  colour and shadow changes. Fast enough to feel instant.
       --t-base   state changes with something to follow: panels, reveals,
                  a shape growing.
       --t-slow   large surfaces travelling a distance — an image settling,
                  a full-screen menu sliding in. */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --t-fast: .2s;
    --t-base: .32s;
    --t-slow: .6s;
}

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

html {
    /* The whole type scale hangs off this. Every font-size in this file is in
       rem or clamp(), so raising the root lifts body copy, labels, buttons and
       headings together and keeps their relationships intact — far safer than
       editing a hundred declarations by hand.

       112.5% puts the base at 18px instead of the browser's 16px. That is the
       size most long-form sites settle on, and it is the small print — form
       labels, event meta, footnotes at .82–.88rem — that gains most.

       Headings are held back separately below, or a 12.5% lift would push the
       hero past where it looks composed. */
    font-size: 112.5%;

    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 104px;
}

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

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

img { height: auto; }

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--green-900);
    font-weight: 600;
    line-height: 1.05;
    /* Display type set at these sizes wants pulling in. Optical tracking is
       the difference between a heading that looks typeset and one that looks
       defaulted. */
    letter-spacing: -0.028em;
    margin: 0 0 .5em;
}

/* Trimmed by about 5% in rem terms to offset the larger root. The net effect
   is headings around 6% bigger while body copy is 12.5% bigger — the gap
   between them narrows, which is what was wanted: the headings were never the
   hard part to read. */
h1 { font-size: clamp(2.27rem, 5.2vw, 3.83rem); font-weight: 500; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.74rem); font-weight: 500; }
h3 { font-size: clamp(1.18rem, 1.8vw, 1.51rem); }
h4 { font-size: 1rem; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--green-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--green-900); }

ul { margin: 0 0 1.1em; padding-left: 1.1em; }

:focus-visible {
    outline: 3px solid var(--gold-600);
    outline-offset: 3px;
    border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Browser surfaces

   The chrome nobody draws: selection, caret, scrollbar, underline offset.
   Left alone they ship with defaults that belong to no design system, and
   they are a large part of why an otherwise careful page still reads as
   assembled rather than made. Every one of them takes the palette.
   -------------------------------------------------------------------------- */
::selection { background: var(--gold); color: var(--green-900); }

/* The caret is the one piece of UI a visitor stares directly at while
   typing, and it is green here rather than the OS default black. */
input, select, textarea { caret-color: var(--green-700); }

/* Firefox */
html {
    scrollbar-color: var(--line-strong) transparent;
    scrollbar-width: thin;
}
/* WebKit / Blink */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--cream-2); }
::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: var(--radius-pill);
    /* The border is transparent padding: it insets the thumb from the track
       so the bar reads as a lozenge rather than a filled gutter. */
    border: 3px solid var(--cream-2);
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--green-700); }

/* Links underline on a baseline that clears the descenders. */
a { text-underline-offset: .18em; text-decoration-thickness: from-font; }

.shell {
    width: min(var(--shell), 100% - 40px);
    margin-inline: auto;
}

.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 200;
    background: var(--green-800);
    color: #fff;
    padding: 10px 18px;
    border-radius: 0 0 var(--radius) var(--radius);
    transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   3. Shared type utilities
   -------------------------------------------------------------------------- */
/* The eyebrow/kicker is gone from this system. It was a small uppercase
   label sitting above every heading on the site, and it is one of the most
   reliable tells of a generated page: the heading already says what the
   section is, so the label restates it in a smaller, louder voice. Removed
   from all eight pages rather than restyled. */

.lede {
    font-size: clamp(1.02rem, 1.25vw, 1.16rem);
    color: var(--ink-soft);
    max-width: 56ch;
}

.section-title { margin-bottom: .35em; }

.section-intro {
    color: var(--ink-soft);
    max-width: 62ch;
    margin-bottom: 2.6rem;
}

/* Nothing that ends a block carries a bottom margin. Between them these two
   rules replace roughly thirty `style="margin-bottom:0"` attributes that were
   scattered through the markup — the spacing now lives in one place, so it
   can be changed in one place. */
.section-title:last-child,
.section-intro:last-child { margin-bottom: 0; }

.text-serif { font-family: var(--font-display); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
    --btn-bg: var(--green-700);
    --btn-fg: #fff;
    --btn-bd: var(--green-700);
    display: inline-flex;
    align-items: center;
    gap: .7em;
    padding: .92em 1.6em;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1.5px solid var(--btn-bd);
    border-radius: var(--radius);
    font-weight: 600;
    font-size: .96rem;
    letter-spacing: .005em;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}
.btn:hover {
    color: var(--btn-fg);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.btn:active { transform: translateY(0); }
.btn .btn__arrow { transition: transform var(--t-base) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(5px); }
.btn[disabled],
.btn[aria-disabled="true"] {
    opacity: .55;
    pointer-events: none;
    transform: none;
}

.btn--primary { --btn-bg: var(--green-700); --btn-bd: var(--green-700); }
.btn--primary:hover { --btn-bg: var(--green-800); --btn-bd: var(--green-800); }

.btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--green-700);
    --btn-bd: var(--green-700);
}
.btn--ghost:hover { --btn-bg: var(--green-700); --btn-fg: #fff; }

.btn--gold {
    --btn-bg: var(--gold);
    --btn-fg: var(--green-900);
    --btn-bd: var(--gold);
}
.btn--gold:hover { --btn-bg: var(--gold-600); --btn-bd: var(--gold-600); }

.btn--light {
    --btn-bg: transparent;
    --btn-fg: #fff;
    --btn-bd: rgba(255, 255, 255, .6);
}
.btn--light:hover { --btn-bg: #fff; --btn-fg: var(--green-900); --btn-bd: #fff; }

.btn--block { width: 100%; justify-content: center; }
.btn--lg { padding: 1em 1.8em; font-size: 1.02rem; }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-weight: 600;
    font-size: .94rem;
    color: var(--green-700);
    text-decoration: none;
}
.link-arrow svg { transition: transform var(--t-base) var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   5. Brand mark
   -------------------------------------------------------------------------- */
.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
}
.brand__mark { width: 62px; height: auto; display: block; flex: none; }
.brand__stack { display: flex; align-items: center; gap: 13px; }
.brand__word { line-height: 1; }
.brand__name {
    display: block;
    font-family: var(--font-display);
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--green-800);
    letter-spacing: .01em;
}
.brand__city {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .34em;
    color: var(--red);
    margin-top: 3px;
    padding-left: 2px;
}
.brand__rule {
    width: 1px;
    align-self: stretch;
    background: var(--line-strong);
}
.brand__full {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .11em;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   6. Header & navigation
   -------------------------------------------------------------------------- */
/* The header used to be var(--cream) — the same value as the page background,
   so it dissolved into the page. It is now the deep green the footer already
   uses, which bookends the site in the brand's primary colour rather than
   introducing a new one. Everything inside it is recoloured below. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--green-900);
    transition: box-shadow var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.site-header.is-stuck {
    background: rgba(10, 58, 38, .94);
    backdrop-filter: blur(9px);
    box-shadow: 0 10px 30px rgba(10, 58, 38, .22);
}

/* The same flag stripe that closes the footer, opening the header. Five pixels
   is enough to read as a deliberate edge rather than a border. */
.site-header::after {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(to right,
    var(--red) 0 20%, var(--flag-black) 20% 26%,
    var(--gold) 26% 62%, #fff 62% 66%, var(--green-600) 66% 100%);
    /* The one authored moment on arrival: the flag runs across the top of
       the page the way it is raised at the start of an event. It happens
       once, on load, and never again — a loop here would be wallpaper. */
    transform-origin: left center;
    animation: flag-raise .95s cubic-bezier(0.16, 1, 0.3, 1) .1s both;
}
@keyframes flag-raise {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 0;
}

/* The bar tightens once you leave the top of the page, giving a little more
   room to read and making the header feel responsive rather than fixed
   furniture. Small numbers on purpose — a header that visibly collapses is
   distracting on every scroll.

   The size change is deliberately instant. It used to tween padding and the
   logo's width, both of which force layout on every frame of the tween, on
   the subtree that holds the whole navigation. Nobody perceives a 7px
   padding tween as motion anyway — they perceive it as wobble. The sense
   that the header responded is carried by the background and shadow above,
   which are compositor-safe and still transition. */
.site-header.is-stuck .header__inner { padding: 9px 0; }
.site-header.is-stuck .brand__mark { width: 50px; }

.nav { display: flex; align-items: center; gap: 34px; }

.nav__list {
    display: flex;
    align-items: center;
    gap: 34px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav__link {
    position: relative;
    display: inline-block;
    padding: 6px 0;
    font-size: .98rem;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    transition: color var(--t-fast) var(--ease);
}
.nav__link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--green-700);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-base) var(--ease);
}
.nav__link:hover { color: var(--green-700); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--green-700); font-weight: 600; }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__cta { padding: .62em 1.25em; font-size: .9rem; }

/* --------------------------------------------------------------------------
   Header on deep green — everything that sat on cream needs inverting.
   Gold rather than white for the active states: white on green is flat, and
   gold is already the accent the rest of the site uses for emphasis.
   -------------------------------------------------------------------------- */
/* The logo is a transparent PNG whose lettering is black, so on a dark bar it
   collapses into a murky blob. A pale disc behind it gives the artwork the
   light background it was drawn for, and reads as a deliberate badge. */
.site-header .brand__mark {
    background: var(--cream);
    border-radius: 50%;
    padding: 4px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
}

.site-header .brand__name { color: #fff; }
.site-header .brand__city { color: var(--gold); }
.site-header .brand__full { color: rgba(255, 255, 255, .66); }
.site-header .brand__rule { background: rgba(255, 255, 255, .28); }

.site-header .nav__link { color: rgba(255, 255, 255, .84); }
.site-header .nav__link:hover,
.site-header .nav__link[aria-current="page"] { color: var(--gold); }
.site-header .nav__link::after { background: var(--gold); }

/* The primary button is deep green, which would vanish on a deep green bar. */
.site-header .nav__cta {
    --btn-bg: var(--gold);
    --btn-bd: var(--gold);
    --btn-fg: var(--green-900);
}
.site-header .nav__cta:hover {
    --btn-bg: #fff;
    --btn-bd: #fff;
    --btn-fg: var(--green-900);
}

.site-header .nav-toggle { border-color: rgba(255, 255, 255, .34); }
.site-header .nav-toggle__bars,
.site-header .nav-toggle__bars::before,
.site-header .nav-toggle__bars::after { background: #fff; }

.nav-toggle {
    display: none;
    width: 46px; height: 42px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius);
    cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    display: block;
    width: 20px; height: 2px;
    background: var(--green-900);
    border-radius: 2px;
    transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. Page hero (shared across all four pages)
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    background: var(--cream);
    overflow: hidden;
}
.hero__inner {
    display: grid;
    /* Was 1fr / 1.1fr, which left the copy column too narrow: the headline
       broke over four lines and the two buttons wrapped onto separate rows
       even on a wide desktop. Giving the words the larger share fixes both. */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
}
.hero__copy {
    position: relative;
    z-index: 2;
    padding: clamp(48px, 6vw, 96px) clamp(28px, 3.6vw, 60px) clamp(48px, 6vw, 96px) var(--gutter);
}
.hero__title { margin-bottom: .38em; }
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 2.1rem;
}

/* Chevron-masked media, echoing the flag's golden arrowhead */
.hero__media {
    position: relative;
    align-self: stretch;
    min-height: clamp(360px, 46vw, 620px);
}
.hero__photo,
.hero__edge {
    position: absolute;
    inset: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 21% 50%);
}
.hero__edge {
    background: var(--gold);
    transform: translateX(-13px);
}
.hero__photo { overflow: hidden; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* The hero has a chevron notch bitten out of its left edge, which sits over
   whatever is at the far left of the photo. Where that matters — the culture
   page, where the person on the left is one of the six ancestries the picture
   is about — the image is nudged right so the subject clears the notch.

   It has to be a transform: the photo already fills the frame edge to edge, so
   there is no spare width for object-position to move through. Scaling up
   slightly creates that room; the translate then spends it. */
.hero__photo--shift img {
    transform: scale(1.06) translateX(2.6%);
}

/* Flag corner flourish, bottom-left of the hero */
.flag-corner {
    position: absolute;
    left: 0;
    bottom: 0;
    width: clamp(120px, 13vw, 190px);
    z-index: 1;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   The same Golden Arrowhead motif, as a class you can put on any section.

   The hero carries it as inline SVG because it is a full-strength part of that
   composition. Everywhere else it is a quiet background flourish, so it lives
   here as a background image instead — one class in the markup rather than six
   lines of SVG repeated down seven files.

   It is deliberately fainter than the hero's. Repeated at full strength down a
   page it stops being an accent and starts being wallpaper.

   Corner variants exist so consecutive sections can alternate. A motif that
   lands in the same corner on every section reads as a mistake.
   -------------------------------------------------------------------------- */
.section--flag {
    position: relative;
    overflow: hidden;
}
.section--flag > * { position: relative; z-index: 1; }

.section--flag::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: clamp(90px, 10vw, 150px);
    aspect-ratio: 1;
    z-index: 0;
    pointer-events: none;
    opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpolygon fill='%23009E49' points='0,70 0,50 150,200 130,200'/%3E%3Cpolygon fill='%23FCD116' points='0,132 0,82 118,200 68,200'/%3E%3Cpolygon fill='%230C0C0C' points='0,145 0,132 68,200 55,200'/%3E%3Cpolygon fill='%23CE1126' points='0,200 0,145 55,200'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* Flipped into the other three corners. The artwork is drawn bottom-left, so
   each variant is the same image mirrored or turned. */
.section--flag-br::after { left: auto; right: 0; transform: scaleX(-1); }
.section--flag-tr::after { left: auto; right: 0; top: 0; bottom: auto; transform: rotate(180deg); }
.section--flag-tl::after { top: 0; bottom: auto; transform: scaleY(-1); }

/* --------------------------------------------------------------------------
   8. Sections & bands
   -------------------------------------------------------------------------- */
/* Air. The most reliable signal of a considered layout is space around it,
   and this was the site's biggest tell — sections were packed tight enough
   that everything competed. Roughly a third more breathing room. */
.section { padding: clamp(72px, 8.4vw, 140px) 0; }
.section--tight { padding: clamp(48px, 5.4vw, 86px) 0; }
.section--band { background: var(--cream-2); }
.section--paper { background: var(--paper); }
.section--edge { border-top: 1px solid var(--line); }

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 2.4rem;
}
.section-head p { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   9. Pillars strip (Community / Culture / Connection)
   -------------------------------------------------------------------------- */
.pillars {
    background: var(--cream-2);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.pillars__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.pillar {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: clamp(28px, 3vw, 44px) clamp(20px, 2.6vw, 44px);
    border-left: 1px solid var(--gold-200);
}
.pillar:first-child { border-left: 0; padding-left: 0; }
.pillar:last-child { padding-right: 0; }
.pillar__title {
    font-family: var(--font-body);
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--green-700);
    margin: 0 0 .3rem;
    letter-spacing: 0;
}
.pillar__text { font-size: .95rem; color: var(--ink-soft); margin: 0; }

.icon-well {
    flex: none;
    display: grid;
    place-items: center;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--green-100);
    color: var(--green-700);
}
.icon-well svg { width: 30px; height: 30px; }
.icon-well--gold { background: var(--gold); color: var(--green-900); }
.icon-well--maple { background: var(--maple-100); color: var(--maple-700); }
.icon-well--sm { width: 46px; height: 46px; }
.icon-well--sm svg { width: 22px; height: 22px; }

/* --------------------------------------------------------------------------
   10. Split feature blocks
   -------------------------------------------------------------------------- */
.split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(32px, 5vw, 76px);
    align-items: center;
}
.split--wide-right { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
.split__media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    aspect-ratio: 4 / 3;
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__media::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(10, 58, 38, .08);
    border-radius: inherit;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Feature split — a full-height media panel beside its copy

   The picture is not a card sitting in a column with air around it; it is
   one half of the section. It runs to the left edge of the window and to
   the full height of the text beside it, so the two halves meet on a single
   vertical line down the middle of the page.

   The copy's right padding is `--gutter`, the same token the shell uses to
   centre itself, so the text still lines up with every other section on the
   page even though this one breaks out of the shell.
   -------------------------------------------------------------------------- */
.feature-split {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    align-items: stretch;
}
.feature-split__media {
    position: relative;
    /* A floor for the case where the copy is short; normally the copy is
       taller than this and the panel simply matches it. */
    min-height: 420px;
    background: var(--green-900);
}
.feature-split__media > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* When the panel holds a player rather than a still: the frame drops its
   16:9 shape and its rounded corners and fills the panel edge to edge. The
   poster is cropped to fit; once the player loads, YouTube letterboxes its
   own 16:9 picture against the panel's dark green, which is why the panel
   has that background colour rather than white. */
/* Scoped to the panel deliberately. `.vidframe--fill` alone is the same
   specificity as `.vidframe`, whose base rule sits ~450 lines further down
   and would therefore win on source order — the aspect-ratio and radius
   would never be overridden. */
.feature-split__media .vidframe--fill {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
}
.feature-split__media .vidfacade__play > span { width: 94px; height: 94px; }

/* Attribution for a video that is not ours, kept legible over the picture
   without a heavy bar across it. */
.feature-split__credit {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    margin: 0;
    padding: 42px 24px 16px;
    font-size: .78rem;
    color: rgba(255, 255, 255, .82);
    background: linear-gradient(to top, rgba(6, 32, 21, .8), transparent);
    pointer-events: none;
}
.feature-split__credit a {
    color: #fff;
    pointer-events: auto;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .45);
}
.feature-split__credit a:hover { color: var(--gold); }
.feature-split__copy {
    /* The right padding used to be the full --gutter so the text lined up
       with the shell. At a 70/30 split that gutter is 200px out of a 480px
       column — it took the measure down to 17 characters a line. Capped, so
       it still aligns on wide screens where there is room and gives way to
       the words when there is not. */
    padding: clamp(56px, 6.5vw, 104px) min(var(--gutter), 56px) clamp(56px, 6.5vw, 104px) clamp(28px, 3.4vw, 56px);
    align-self: center;
}
.feature-split__copy .fact-list { margin-bottom: 0; }

/* Stacked, the panel becomes a band across the top at a fixed shape, and
   the copy returns to the shell's own gutters. */
@media (max-width: 940px) {
    .feature-split { grid-template-columns: 1fr; }
    /* 16:9, matching the video exactly. At 16:10 the poster was cropped and,
       worse, the panel was short enough that the play button took 39% of its
       height and the credit strip another third. */
    .feature-split__media { min-height: 0; aspect-ratio: 16 / 9; }
    .feature-split__media .vidfacade__play > span { width: 62px; height: 62px; }
    .feature-split__media .vidfacade__play svg { width: 24px; height: 24px; }
    .feature-split__credit { padding: 26px 18px 12px; font-size: .74rem; }
    .feature-split__copy {
        padding: clamp(38px, 7vw, 56px) max(20px, calc((100vw - var(--shell)) / 2));
    }
}

/* Two onward links side by side, wrapping to stacked when there isn't room. */
.who__links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 32px;
}

.fact-list {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    gap: 14px;
}
.fact-list li {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    font-size: .97rem;
    color: var(--ink-soft);
}
.fact-list li::before {
    content: "";
    flex: none;
    width: 11px; height: 11px;
    margin-top: .48em;
    background: var(--gold);
    clip-path: polygon(0 0, 100% 50%, 0 100%, 32% 50%);
}

/* --------------------------------------------------------------------------
   11. Cards
   -------------------------------------------------------------------------- */
/* Cards sit on the page rather than being drawn on it. The gold outline is
   gone — a hairline that barely contrasts with cream mostly reads as clutter
   — replaced by a resting shadow that separates the card from the background
   and deepens on hover. */
.card {
    position: relative;
    background: var(--paper);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease);
}
.card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: var(--gold-200);
}

.card-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Event card ------------------------------------------------------------- */
/* The photo sits across the top rather than in a strip down the side. A side
   strip was only 40% of a ~384px card — a 154px sliver that threw away most of
   a photo. Full width gives it two and a half times the room, in the landscape
   shape event photos are actually taken in. It also matches what the card
   already did on phones, so there is one layout instead of two.

   Nothing expands on hover. Anything that grows a card has to take the space
   from somewhere, and in a grid that means cards reflowing out from under the
   cursor as you reach for them. */
.event-card { display: grid; grid-template-rows: auto 1fr; }
.event-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.event-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease);
}
/* A gentle push in, the same as the culture tiles. Contained by the frame, so
   it costs no layout. */
.event-card:hover .event-card__media img { transform: scale(1.05); }
.event-card--past:hover .event-card__media img { transform: none; }
.event-card__body { padding: 22px 22px 24px; }
.event-card__title {
    font-size: 1.3rem;
    line-height: 1.15;
    margin: 0 0 .55rem;
}
.event-card__meta {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .88rem;
    color: var(--ink-soft);
    margin: 0 0 .9rem;
}
.event-card__meta svg { width: 15px; height: 15px; color: var(--green-700); flex: none; }
.event-card__text {
    font-size: .92rem;
    color: var(--ink-soft);
    padding-top: .95rem;
    border-top: 1px solid var(--gold-200);
    margin: 0 0 1.1rem;
}

.date-badge {
    position: absolute;
    /* Sits inside the photo. It used to hang 22px off the right of the old
       side strip, straddling the join with the text — with a full-width strip
       that just puts it outside the card, where it gets clipped. */
    top: 16px; right: 16px;
    width: 62px;
    padding: 8px 4px 9px;
    background: var(--green-800);
    color: #fff;
    border-radius: var(--radius);
    text-align: center;
    box-shadow: var(--shadow-sm);
    z-index: 2;
}
.date-badge__month {
    display: block;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .9;
}
.date-badge__day {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: .3em .8em;
    border-radius: var(--radius);
    background: var(--green-100);
    color: var(--green-800);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.tag--gold { background: var(--gold-100); color: var(--gold-600); }
.tag--free { background: var(--gold); color: var(--green-900); }

/* Culture tile ----------------------------------------------------------- */
.tile { text-align: left; }
.tile__media { aspect-ratio: 4 / 3.4; overflow: hidden; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.tile:hover .tile__media img { transform: scale(1.05); }
.tile__body { padding: 18px 20px 22px; background: var(--cream-2); }
.tile__title {
    font-size: 1.22rem;
    color: var(--green-700);
    margin: 0 0 .25rem;
}
.tile__text { font-size: .9rem; color: var(--ink-soft); margin: 0; }

/* Value card ------------------------------------------------------------- */
.value-card {
    padding: 26px 26px 28px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.value-card h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.value-card p { font-size: .95rem; color: var(--ink-soft); margin: 0; }

/* Mission card ----------------------------------------------------------- */
.mission-card {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    padding: 28px 30px;
    background: var(--green-50);
    border: 1px solid var(--green-100);
    border-radius: var(--radius-lg);
}
.mission-card__body { border-left: 1px solid var(--gold-300); padding-left: 22px; }
.mission-card h3 { font-size: 1.55rem; margin-bottom: .4rem; }
.mission-card p { font-size: .97rem; color: var(--ink-soft); margin: 0; }

/* --------------------------------------------------------------------------
   12. Journey timeline (About)
   -------------------------------------------------------------------------- */
.journey {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    align-items: start;
}
.journey__step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 12px;
}
.journey__step::after {
    content: "";
    position: absolute;
    top: 31px;
    left: calc(50% + 44px);
    right: calc(-50% + 44px);
    height: 1px;
    background: repeating-linear-gradient(to right, var(--gold-300) 0 7px, transparent 7px 13px);
    /* So the leg can be drawn outward from the stop it leaves, not from the
       middle. See the journey animation below. */
    transform-origin: left center;
}
.journey__step:last-child::after { display: none; }

/* The travelling marker — a gold dot that runs the length of the dotted leg.
   Drawn as a background image on a box the exact width of the leg, so the
   percentage background-position does the "container width minus dot width"
   arithmetic for us and the dot lands precisely on the next stop. */
.journey__step::before {
    content: "";
    position: absolute;
    top: 27px;
    left: calc(50% + 44px);
    right: calc(-50% + 44px);
    height: 9px;
    pointer-events: none;
    opacity: 0;
    background-image: radial-gradient(circle at center, var(--gold-600) 0 3.6px, transparent 3.8px);
    background-size: 9px 9px;
    background-repeat: no-repeat;
    background-position: 0 center;
}
.journey__step:last-child::before { display: none; }
.journey__label {
    margin-top: 14px;
    font-size: .93rem;
    font-weight: 700;
    color: var(--green-700);
}
.journey__text { font-size: .87rem; color: var(--ink-soft); margin: .25rem 0 0; }
.journey__step:nth-child(even) .journey__label { color: var(--gold-600); }

/* --------------------------------------------------------------------------
   The journey, drawn

   Four stops on a route, so they arrive like one: a stop appears, a marker
   sets off along the dotted leg and draws it in behind itself, and the next
   stop lands as the marker arrives. Just under two seconds end to end — it
   ran to three and a half, which is long enough that people scrolled past
   the end of it.

   Two classes rather than one. `is-armed` is added by the script on load and
   is the only thing that hides the stops, so a visitor whose JavaScript never
   arrives reads a finished row instead of four blank columns. `is-running` is
   added when the row scrolls into view and starts the sequence.
   -------------------------------------------------------------------------- */
.journey.is-armed .journey__step { opacity: 0; }
.journey.is-armed .journey__step::after { transform: scaleX(0); }

.journey.is-running .journey__step { animation: journey-stop .38s var(--ease) both; }
.journey.is-running .journey__step::after { animation: journey-leg .34s linear both; }
.journey.is-running .journey__step::before { animation: journey-marker .34s linear both; }

/* Stop n lands at (n-1) × .9s; the leg out of it sets off .35s after it, so
   the marker is already moving while the stop is still settling. */
.journey.is-running .journey__step:nth-child(2) { animation-delay: .5s; }
.journey.is-running .journey__step:nth-child(3) { animation-delay: 1s; }
.journey.is-running .journey__step:nth-child(4) { animation-delay: 1.5s; }

.journey.is-running .journey__step:nth-child(1)::after,
.journey.is-running .journey__step:nth-child(1)::before { animation-delay: .2s; }
.journey.is-running .journey__step:nth-child(2)::after,
.journey.is-running .journey__step:nth-child(2)::before { animation-delay: .7s; }
.journey.is-running .journey__step:nth-child(3)::after,
.journey.is-running .journey__step:nth-child(3)::before { animation-delay: 1.2s; }

@keyframes journey-stop {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to   { opacity: 1; transform: none; }
}
@keyframes journey-leg {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
/* The dot fades in as it leaves and out as it lands, so it reads as motion
   along the route rather than a bead that parks on each icon. */
@keyframes journey-marker {
    0%   { opacity: 0; background-position: 0 center; }
    14%  { opacity: 1; }
    86%  { opacity: 1; }
    100% { opacity: 0; background-position: 100% center; }
}

/* The same two, turned through ninety degrees for the stacked layout. */
@keyframes journey-leg-down {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}
@keyframes journey-marker-down {
    0%   { opacity: 0; background-position: center 0; }
    14%  { opacity: 1; }
    86%  { opacity: 1; }
    100% { opacity: 0; background-position: center 100%; }
}

/* --------------------------------------------------------------------------
   13. Team
   -------------------------------------------------------------------------- */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 20px;
}
.member {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 24px 22px 26px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease);
}
.member:hover {
    transform: translateY(-4px);
    border-color: var(--gold-300);
    box-shadow: var(--shadow-sm);
}
.member__avatar {
    display: grid;
    place-items: center;
    width: 58px; height: 58px;
    border-radius: 50%;
    background: var(--green-100);
    color: var(--green-800);
    font-family: var(--font-display);
    font-size: 1.16rem;
    font-weight: 600;
    letter-spacing: .02em;
    border: 1px solid rgba(17, 106, 59, .18);
}
.member__name {
    font-size: 1.14rem;
    margin: 0 0 .2rem;
    line-height: 1.2;
}
.member__role {
    font-size: .87rem;
    color: var(--ink-soft);
    margin: 0;
}
.member--lead {
    grid-column: span 2;
    background: var(--green-50);
    border-color: var(--green-100);
}
.member--lead .member__avatar { background: var(--gold); color: var(--green-900); border-color: rgba(211, 160, 19, .4); }
.member--lead .member__name { font-size: 1.42rem; }

/* --------------------------------------------------------------------------
   13b. Video split — heading over player on the left, copy on the right

   The two columns are set to equal height and the copy column is spread out
   to meet it, so the paragraphs fill their half rather than stopping short
   and leaving the player hanging on its own.
   -------------------------------------------------------------------------- */
.vidsplit {
    display: grid;
    /* Weighted towards the player — it is the point of the section, and the
       copy reads fine in a narrower measure. */
    grid-template-columns: 1.25fr .75fr;
    gap: clamp(30px, 3.4vw, 52px);
    align-items: stretch;
}
.vidsplit__left {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: clamp(20px, 2.4vw, 32px);
}
/* Centred in the upper half, so the title sits against the player rather than
   floating at the very top of a tall column. */
.vidsplit__head { align-self: center; }

.vidsplit__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.vidsplit__copy > p { margin-bottom: 1.05em; }
.vidsplit__copy .lede { margin-bottom: 1.2em; }

/* --------------------------------------------------------------------------
   The click-to-load player

   A poster and a play button, nothing more. The YouTube iframe is built only
   when someone presses it — until then the page makes no request to Google,
   sets none of their cookies, and carries none of their ~1MB of script. The
   poster is one of our own photographs rather than YouTube's thumbnail, so
   even the still image is served from this domain.

   It is a <button> because it does something rather than goes somewhere; that
   also gets keyboard operation and focus styling for free.
   -------------------------------------------------------------------------- */
/* The frame owns the shape and the space. Its child — the poster button, and
   later the iframe that replaces it — just fills it, so swapping one for the
   other cannot shift the layout by a pixel. */
.vidframe {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--green-900);
    box-shadow: var(--shadow-lg);
}
.vidframe > iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.vidfacade {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    cursor: pointer;
    background: none;
}
.vidfacade img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease), opacity var(--t-base) var(--ease);
}
.vidfacade:hover img,
.vidfacade:focus-visible img { transform: scale(1.045); opacity: .82; }

.vidfacade__play { position: absolute; inset: 0; display: grid; place-items: center; }
.vidfacade__play > span {
    display: grid;
    place-items: center;
    width: 78px; height: 78px;
    /* Optical centring: the triangle's visual mass sits left of its box. */
    padding-left: 5px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--green-900);
    box-shadow: 0 12px 30px rgba(10, 58, 38, .34);
    transition: transform var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.vidfacade:hover .vidfacade__play > span,
.vidfacade:focus-visible .vidfacade__play > span { transform: scale(1.09); background: var(--gold-600); }

.vidsplit__credit {
    margin: .8rem 0 0;
    font-size: .82rem;
    color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   14. Feature banner (Kaieteur / quote)
   -------------------------------------------------------------------------- */
.banner {
    position: relative;
    isolation: isolate;
    color: #fff;
    background: var(--green-900);
    overflow: hidden;
}
.banner__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.banner__bg img { width: 100%; height: 100%; object-fit: cover; }
.banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Lightened so the falls read through. The left end stays heaviest because
       that is where the heading and paragraph sit — measured against the
       brightest 1% of that half of the photo, white text still clears 6.5:1,
       past the 4.5:1 minimum. Going lighter than this starts to eat into that
       margin, and the photo has bright water in it. */
    background: linear-gradient(100deg, rgba(6, 40, 25, .55) 0%, rgba(6, 40, 25, .42) 46%, rgba(6, 40, 25, .14) 100%);
}
.banner__inner { padding: clamp(60px, 8vw, 120px) 0; }
.banner h2 { color: #fff; max-width: 18ch; }
.banner p { color: rgba(255, 255, 255, .84); max-width: 54ch; }
.banner__stats {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(24px, 4vw, 56px);
    margin-top: 2.4rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, .2);
}
.banner__stat strong {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    font-weight: 600;
    color: var(--gold);
    line-height: 1.1;
}
.banner__stat span {
    font-size: .84rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}

.quote-band {
    padding: clamp(30px, 4vw, 44px) clamp(24px, 4vw, 60px);
    background: var(--cream-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    text-align: center;
}
.quote-band blockquote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 3vw, 34px);
    margin: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.4rem, 2.8vw, 2.15rem);
    color: var(--green-900);
}
.quote-band blockquote::before,
.quote-band blockquote::after {
    content: "";
    flex: 1;
    max-width: 190px;
    height: 1px;
    background: var(--gold-300);
}
.quote-band cite {
    display: block;
    margin-top: 1rem;
    font-style: normal;
    font-size: .8rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   15. Forms
   -------------------------------------------------------------------------- */
.form-card {
    padding: clamp(26px, 3.4vw, 42px);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }

.field label,
.fieldset__legend {
    font-size: .84rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--green-900);
}
.field .req { color: var(--red); }
.field__hint { font-size: .8rem; color: var(--ink-faint); }

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: .78em .95em;
    background: #fff;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius);
    color: var(--ink);
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; }
.field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%230A3A26' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1em center;
    background-size: 12px;
    padding-right: 2.6em;
}
.field input::placeholder,
.field textarea::placeholder { color: #A7A99C; }
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--green-700);
    box-shadow: 0 0 0 3px rgba(17, 106, 59, .14);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(206, 17, 38, .1);
}
.field__error {
    font-size: .8rem;
    font-weight: 500;
    color: var(--red);
    min-height: 0;
}

.check {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: .89rem;
    color: var(--ink-soft);
    line-height: 1.5;
}
.check input {
    flex: none;
    width: 18px; height: 18px;
    margin-top: 2px;
    accent-color: var(--green-700);
}

/* Grouped choices — the meal option, the volunteer roles. The options sit in
   their own wrapper rather than on the fieldset, because a legend is not a
   reliable flex or grid child. */
.choice-set {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}
.choice-set legend { padding: 0; margin-bottom: 11px; }
.choice-set__intro {
    margin: -4px 0 12px;
    font-size: .85rem;
    line-height: 1.55;
    color: var(--ink-soft);
}
.choice-set__options { display: grid; gap: 11px; }
.choice-set__options--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) {
    .choice-set__options--split { grid-template-columns: 1fr; }
}

/* When an event usually happens — quieter than the name it belongs to. */
.check__when {
    display: block;
    font-size: .78rem;
    font-weight: 400;
    color: var(--ink-faint);
}

/* The membership terms. Eight clauses covered by one tick, so they are set out
   in full rather than hidden behind a link — a tick against terms nobody can
   see is not worth much if it is ever questioned. */
.terms {
    margin: 1.6rem 0 1.2rem;
    padding: 20px 22px;
    background: var(--cream-2);
    border: 1px solid var(--gold-200);
    border-radius: var(--radius-lg);
    max-height: 260px;
    overflow-y: auto;
}
.terms__title {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--green-700);
    margin-bottom: .9rem;
}
.terms__list {
    margin: 0;
    padding-left: 1.15em;
    display: grid;
    gap: 9px;
    font-size: .87rem;
    line-height: 1.55;
    color: var(--ink-soft);
}
.terms__list li::marker { color: var(--gold-600); }

.signature input { font-family: var(--font-display); font-size: 1.15rem; }
.signature__note {
    margin: 0;
    font-size: .8rem;
    color: var(--ink-faint);
    line-height: 1.5;
}

.membership-year {
    margin: 0 0 1.4rem;
    font-size: .86rem;
    color: var(--ink-soft);
}

/* Which refund window the selected event falls under. */
.refund-terms {
    margin: 14px 0 0;
    padding: 11px 14px;
    background: var(--gold-100);
    border-radius: var(--radius);
    font-size: .82rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   News from Guyana
   Headlines only, so the cards are text — no images. Somebody else's photo
   would need somebody else's permission.
   -------------------------------------------------------------------------- */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.news-card {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 22px 22px 24px;
    background: var(--paper);
    border: 1px solid var(--gold-200);
    border-radius: var(--radius-lg);
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease);
}
.news-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-left-color: var(--green-700);
}

/* Which newsroom, said plainly. A reader should never have to guess whether a
   headline came from the state paper or an independent one. */
/* inline-flex, because the global `svg { display: block }` reset otherwise
   drops the external-link icon onto a line of its own beneath the newsroom
   name. */
.news-card__source {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--green-700);
}

.news-card__title { font-size: 1.08rem; line-height: 1.25; margin: 0; }
.news-card__title a { color: var(--green-900); text-decoration: none; }
.news-card__title a:hover { text-decoration: underline; }

.news-card__text {
    margin: 0;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--ink-soft);
}
.news-card__time { font-size: .8rem; color: var(--ink-faint); }

.news-note {
    margin: 1.8rem 0 0;
    font-size: .82rem;
    color: var(--ink-faint);
    max-width: 70ch;
}

@media (max-width: 940px) {
    .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .news-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Confirmation dialog — shown when a form goes through
   -------------------------------------------------------------------------- */
.modal {
    width: min(440px, calc(100% - 32px));
    padding: 0;
    border: 1px solid var(--gold-200);
    border-radius: var(--radius-lg);
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 24px 60px rgba(6, 40, 25, .28);
}
.modal::backdrop {
    background: rgba(6, 40, 25, .55);
    backdrop-filter: blur(2px);
}
.modal[open] { animation: modal-in .28s var(--ease); }
.modal[open]::backdrop { animation: fade-in .28s var(--ease); }

@keyframes modal-in {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }

.modal__inner { padding: clamp(26px, 4vw, 36px); text-align: center; }

.modal__tick {
    display: grid;
    place-items: center;
    width: 58px; height: 58px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    background: var(--green-100);
    color: var(--green-700);
}
.modal__tick svg { width: 28px; height: 28px; }

.modal__title { font-size: clamp(1.3rem, 3vw, 1.6rem); margin-bottom: .5rem; }
.modal__text {
    font-size: .95rem;
    color: var(--ink-soft);
    margin-bottom: 1.4rem;
}

/* What they just sent, so it can be checked at a glance. */
.modal__detail {
    margin: 0 0 1.6rem;
    padding: 14px 16px;
    background: var(--cream-2);
    border-radius: var(--radius);
    text-align: left;
    display: grid;
    gap: 7px;
}
.modal__detail[hidden] { display: none; }
.modal__detail > div { display: flex; justify-content: space-between; gap: 16px; }
.modal__detail dt {
    font-size: .84rem;
    color: var(--ink-soft);
    flex: none;
}
.modal__detail dd {
    margin: 0;
    font-size: .88rem;
    font-weight: 600;
    color: var(--ink);
    text-align: right;
}

.form-status {
    margin-top: 18px;
    padding: 0;
    font-size: .92rem;
    font-weight: 500;
}
.form-status:empty { display: none; }
.form-status[data-state="success"] {
    padding: 14px 16px;
    border-radius: var(--radius);
    background: var(--green-50);
    border: 1px solid var(--green-100);
    color: var(--green-800);
}
.form-status[data-state="error"] {
    padding: 14px 16px;
    border-radius: var(--radius);
    background: #FCEDEE;
    border: 1px solid #F3C9CE;
    color: #9A0E1E;
}
.form-status[data-state="working"] { color: var(--ink-soft); }

.form-footnote {
    margin-top: 16px;
    font-size: .82rem;
    color: var(--ink-faint);
}

/* Contact side panel ------------------------------------------------------ */
.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}
.contact-list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 20px; }
.contact-list li { display: flex; gap: 15px; align-items: flex-start; }
.contact-list dt {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 2px;
}
.contact-list dd { margin: 0; font-size: .98rem; }
.contact-list a { text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }

.social-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }
.social-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: .72em 1.15em;
    background: var(--paper);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius);
    color: var(--green-900);
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.social-btn svg { width: 19px; height: 19px; }
.social-btn:hover {
    transform: translateY(-2px);
    border-color: var(--green-700);
    background: var(--green-50);
    color: var(--green-900);
}

/* --------------------------------------------------------------------------
   16. Membership — fee tiers, benefits, application form
   -------------------------------------------------------------------------- */
.membership-layout {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
    gap: clamp(30px, 4.5vw, 68px);
    align-items: start;
    margin-top: clamp(34px, 4vw, 58px);
}

.membership__subhead {
    font-size: 1.35rem;
    margin-bottom: 1.4rem;
}

/* Four fee cards, each carrying a different flag colour along the top edge. */
.tier-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.tier {
    position: relative;
    padding: 26px 24px 24px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
/* These cards used to carry a 4px flag-coloured stripe along the top edge,
   one colour per tier. It looked like categorisation but coded nothing —
   Family, Individual, Senior and Student have no relationship to the flag —
   so it was decoration wearing the costume of information. The name and the
   price already tell the tiers apart. */
.tier:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.tier__name {
    font-size: 1.3rem;
    margin-bottom: .5rem;
}
.tier__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 .9rem;
}
.tier__price strong {
    font-family: var(--font-display);
    font-size: 2.3rem;
    font-weight: 600;
    line-height: 1;
    color: var(--green-800);
}
.tier__price span {
    font-size: .82rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.tier__who {
    font-size: .9rem;
    color: var(--ink-soft);
    margin: 0;
}
.tier__who b { color: var(--green-800); }

.benefit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.benefit-list li { display: flex; gap: 16px; align-items: flex-start; }
.benefit-list b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.14rem;
    font-weight: 600;
    color: var(--green-900);
    margin-bottom: .18rem;
}
.benefit-list span { font-size: .95rem; color: var(--ink-soft); }

.fee-summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin: 22px 0 16px;
    padding-top: 18px;
    border-top: 1px dashed var(--line-strong);
    font-size: .92rem;
    color: var(--ink-soft);
}
.fee-summary strong {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--green-900);
}

.secure-note {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    font-size: .81rem;
    color: var(--ink-faint);
}
.secure-note svg { width: 15px; height: 15px; flex: none; }

/* --------------------------------------------------------------------------
   17. Ticketing / registration summary
   -------------------------------------------------------------------------- */
.register-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: clamp(26px, 3.5vw, 46px);
    align-items: start;
}
.order-card {
    position: sticky;
    top: 118px;
    padding: 26px 26px 28px;
    background: var(--green-50);
    border: 1px solid var(--green-100);
    border-radius: var(--radius-lg);
}
.order-card h3 { font-size: 1.3rem; margin-bottom: 1rem; }
.order-lines { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 12px; }
.order-lines li {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: .93rem;
    color: var(--ink-soft);
}
.order-lines b { font-weight: 600; color: var(--ink); }
.order-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 18px 0 20px;
    padding-top: 16px;
    border-top: 1px solid var(--gold-300);
    font-size: .92rem;
    color: var(--ink-soft);
}
.order-total strong {
    font-family: var(--font-display);
    font-size: 1.7rem;
    color: var(--green-900);
}

.qty {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius);
    background: #fff;
    overflow: hidden;
}
.qty button {
    width: 42px; height: 44px;
    border: 0;
    background: transparent;
    font-size: 1.2rem;
    color: var(--green-800);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease);
}
.qty button:hover { background: var(--green-50); }
.qty input {
    width: 58px;
    height: 44px;
    border: 0;
    border-left: 1.5px solid var(--line-strong);
    border-right: 1.5px solid var(--line-strong);
    border-radius: 0;
    text-align: center;
    font-weight: 600;
    padding: 0;
}
.qty input:focus { box-shadow: none; }

/* --------------------------------------------------------------------------
   18. Culture page extras
   -------------------------------------------------------------------------- */
.tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0 0 30px;
    list-style: none;
    border-bottom: 1px solid var(--line);
}
.tabs__btn {
    padding: .8em 1.3em;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    font-size: .96rem;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.tabs__btn:hover { color: var(--green-700); }
.tabs__btn[aria-selected="true"] { color: var(--green-800); border-bottom-color: var(--gold); }
.tabs__panel[hidden] { display: none; }
/* Switching threads on the culture page used to be an instant swap. A short
   fade-and-rise makes it read as content arriving rather than the page
   redrawing. */
.tabs__panel:not([hidden]) { animation: rise-in .5s var(--ease) both; }

.glossary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 2px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.glossary__item {
    display: flex;
    flex-direction: column;
    padding: 20px 22px 18px;
    background: var(--paper);
    transition: background var(--t-fast) var(--ease);
}
.glossary__item:hover { background: var(--cream); }
/* The control row is pushed to the foot of the cell whatever the definition
   length, so the buttons line up across the grid. */
.glossary__def { margin-bottom: 16px; }
.say-row { margin-top: auto; }

/* --------------------------------------------------------------------------
   Hear it said

   Creolese is spoken before it is written, and half of these words are
   pronounced nothing like they look. The recordings are short — under five
   seconds each — so they load only when someone asks for one.
   -------------------------------------------------------------------------- */
/* The row sits right-aligned at the foot of the cell: play, slow, and the
   toggle for the full player. */
.say-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}

.say {
    position: relative;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--cream-2);
    color: var(--green-700);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease);
}
.say:hover,
.say:focus-visible {
    background: var(--gold);
    color: var(--green-900);
    border-color: var(--gold);
    transform: scale(1.08);
}

/* While it plays: the button holds the gold, and the two arcs pulse outward
   in sequence — near one first, then the far one — so the icon reads as
   sound leaving the speaker rather than just a static state. */
.say[data-playing] {
    background: var(--gold);
    color: var(--green-900);
    border-color: var(--gold);
}
.say[data-playing] .spk-wave { animation: spk 1.05s var(--ease) infinite; }
.say[data-playing] .spk-wave--far { animation-delay: .16s; }

@keyframes spk {
    0%, 100% { opacity: .35; transform: translateX(-1px); }
    45%      { opacity: 1;   transform: translateX(0); }
}

/* Something went wrong fetching the clip: the button says so rather than
   sitting there doing nothing. */
.say[data-error] {
    background: var(--maple-100);
    border-color: rgba(216, 6, 33, .3);
    color: var(--maple-700);
}

@media (prefers-reduced-motion: reduce) {
    .say[data-playing] .spk-wave { animation: none; opacity: 1; }
    .say:hover, .say:focus-visible { transform: none; }
}
.glossary__term {
    font-family: var(--font-display);
    font-size: 1.22rem;
    font-weight: 600;
    color: var(--green-800);
    margin: 0 0 .2rem;
}
.glossary__def { font-size: .9rem; color: var(--ink-soft); margin: 0; }

.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.6rem; }
.chip {
    padding: .5em 1em;
    background: var(--cream-2);
    border: 1px solid var(--gold-200);
    border-radius: var(--radius);
    font-size: .87rem;
    color: var(--green-800);
}

/* --------------------------------------------------------------------------
   19. Newsletter band
   -------------------------------------------------------------------------- */
.newsletter {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(320px, .9fr);
    align-items: center;
    gap: clamp(18px, 3vw, 40px);
    padding: clamp(24px, 3vw, 34px) clamp(24px, 3.4vw, 42px);
    background: var(--cream-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.newsletter__title {
    font-size: clamp(1.5rem, 2.4vw, 2.05rem);
    margin: 0;
    line-height: 1.1;
}
.newsletter__text { font-size: .92rem; color: var(--ink-soft); margin: 0; }
.newsletter__copy { display: grid; gap: 6px; }
.newsletter__form { display: flex; gap: 0; }
.newsletter__form input {
    flex: 1;
    min-width: 0;
    padding: .86em 1em;
    background: #fff;
    border: 1.5px solid var(--line-strong);
    border-right: 0;
    border-radius: var(--radius) 0 0 var(--radius);
}
.newsletter__form input:focus {
    outline: none;
    border-color: var(--green-700);
}
.newsletter__form .btn { border-radius: 0 var(--radius) var(--radius) 0; }
.newsletter__form .btn:hover { transform: none; }
.newsletter .form-status { grid-column: 1 / -1; margin-top: 0; }

/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */
.site-footer {
    background: var(--green-900);
    color: rgba(255, 255, 255, .74);
    padding-top: clamp(48px, 5vw, 78px);
}
.site-footer .brand__name { color: #fff; }
.site-footer .brand__city { color: var(--gold); }
.site-footer .brand__full { color: rgba(255, 255, 255, .7); }
.site-footer .brand__rule { background: rgba(255, 255, 255, .25); }

.footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, .8fr)) minmax(0, 1fr);
    gap: clamp(26px, 3.5vw, 52px);
    padding-bottom: 44px;
}
.footer__about { font-size: .93rem; margin-top: 20px; max-width: 40ch; }
.footer__title {
    font-family: var(--font-body);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 1.1rem;
}
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer__list a {
    color: rgba(255, 255, 255, .78);
    font-size: .94rem;
    text-decoration: none;
    transition: color var(--t-fast) var(--ease);
}
.footer__list a:hover { color: var(--gold); }
.footer__socials { display: flex; gap: 10px; margin-top: 18px; }
.footer__social {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    color: #fff;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.footer__social svg { width: 18px; height: 18px; }
.footer__social:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--green-900);
    transform: translateY(-2px);
}

/* Funding acknowledgement. Sits with the land acknowledgement rather than in
   the copyright bar — both are statements the association is obliged to make,
   and grant conditions usually require this one to be legible rather than
   tucked into the small print. */
.footer__support {
    margin: 0;
    padding: 18px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: .84rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .72);
}

.footer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 0 26px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: .84rem;
    color: rgba(255, 255, 255, .58);
}
.footer__bar p { margin: 0; }
.footer__bar a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.footer__bar a:hover { color: var(--gold); }
.footer__flagline {
    height: 5px;
    background: linear-gradient(to right,
    var(--red) 0 20%, var(--flag-black) 20% 26%,
    var(--gold) 26% 62%, #fff 62% 66%, var(--green-600) 66% 100%);
}

/* --------------------------------------------------------------------------
   21. Media placeholders (shown until real photos are dropped in /images)
   -------------------------------------------------------------------------- */
.media-fallback {
    position: relative;
    background:
            linear-gradient(135deg, rgba(17, 106, 59, .16), rgba(244, 194, 27, .22) 55%, rgba(206, 17, 38, .12)),
            var(--cream-2);
}
.media-fallback::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cpath d='M0 0 L14 8.5 L0 17 L4 8.5 Z' fill='%230A3A26' fill-opacity='.07'/%3E%3C/svg%3E");
    background-size: 34px 34px;
}
.media-fallback::after {
    content: attr(data-file);
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    padding: 8px 14px;
    max-width: 88%;
    background: rgba(255, 253, 246, .92);
    border: 1px dashed var(--green-700);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--green-800);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   22. Motion
   -------------------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .09s; }
.reveal[data-delay="2"] { transition-delay: .18s; }
.reveal[data-delay="3"] { transition-delay: .27s; }
.reveal[data-delay="4"] { transition-delay: .36s; }
.reveal[data-delay="5"] { transition-delay: .45s; }
.no-js .reveal { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Hero entrance

   Everything below the fold already animates in on scroll, but the hero — the
   one thing every visitor sees — simply appeared. That is most of why the site
   felt still.

   Done with CSS animation rather than a JS-added class on purpose: `both` fill
   mode holds the start state, so there is no moment where the markup is
   present but invisible, and nothing breaks if JavaScript fails. The
   reduced-motion block near the end of this file collapses the duration, so
   those visitors get the finished state immediately.
   -------------------------------------------------------------------------- */
@keyframes rise-in {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}
@keyframes settle-in {
    from { opacity: 0; transform: scale(1.05); }
    to   { opacity: 1; transform: none; }
}

.hero__copy > * { animation: rise-in .8s var(--ease) both; }
.hero__copy > *:nth-child(1) { animation-delay: .06s; }
.hero__copy > *:nth-child(2) { animation-delay: .16s; }
.hero__copy > *:nth-child(3) { animation-delay: .26s; }
.hero__copy > *:nth-child(4) { animation-delay: .36s; }

/* The photo settles rather than rises — a slow release from slightly enlarged,
   which reads as the image coming to rest instead of sliding around. */
.hero__media { animation: settle-in 1.1s var(--ease) both; }

/* --------------------------------------------------------------------------
   The diagonal

   The gold wedge is the most recognisable thing about this site — it appears
   on every hero and echoes the Golden Arrowhead. Sweeping it in from the right
   turns the page load into something branded rather than generic.

   It rests at translateX(-13px), so the animation has to finish there rather
   than at zero, or the shape jumps when the animation hands back to the
   stylesheet.
   -------------------------------------------------------------------------- */
@keyframes edge-sweep {
    from { transform: translateX(84px); opacity: 0; }
    to   { transform: translateX(-13px); opacity: 1; }
}
.hero__edge { animation: edge-sweep 1s var(--ease) .2s both; }

/* The flag corner arrives last, once the words have landed. */
.flag-corner { animation: rise-in .9s var(--ease) .5s both; }

/* One mobile-menu item sliding in. Used only inside the max-width: 940px
   block, but keyframes cannot live inside a media query and be reused. */
@keyframes nav-item {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Parallax on the full-bleed banners

   The photo is made taller than its frame and then drifts against the scroll,
   so the falls sit behind the text rather than on the same plane. The extra
   height is what stops the drift exposing an edge.
   -------------------------------------------------------------------------- */
.banner__bg { overflow: hidden; }
.banner__bg img {
    height: 128%;
    will-change: transform;
}

/* --------------------------------------------------------------------------
   Photo strip — a continuously scrolling band

   The track holds the photos twice over, so when the animation has moved
   exactly half its width the second copy sits where the first began and the
   restart is invisible. That is the whole trick; everything else is polish.

   Duration scales with the number of photos (set by script.js as --strip-count)
   so adding or removing images keeps the speed the same rather than making the
   band race or crawl.
   -------------------------------------------------------------------------- */
.strip-section { overflow: hidden; }

.strip {
    position: relative;
    margin-top: 1.6rem;
    /* The track is `width: max-content` and runs several thousand pixels
       wide. The mask below fades its ends but does not clip anything, so
       without this the band drags the whole page into a horizontal scroll —
       which is exactly what the full-bleed variant did. */
    overflow: hidden;
    /* Fades the ends into the page so photos arrive and leave rather than
       being cut off by the window edge. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.strip__track {
    display: flex;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    width: max-content;
    animation: strip-scroll calc(var(--strip-count, 8) * 4.5s) linear infinite;
}

/* Pausing on hover lets someone actually look at a photo that catches their
   eye, instead of chasing it across the screen. */
.strip:hover .strip__track,
.strip:focus-within .strip__track { animation-play-state: paused; }

@keyframes strip-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* The return row: same track, run backwards and slower. Two bands at the
   same speed in opposite directions read as a mirror; a difference in pace
   reads as traffic. */
.strip--reverse { margin-top: 18px; }
.strip--reverse .strip__track {
    animation-direction: reverse;
    animation-duration: calc(var(--strip-count, 8) * 5.8s);
}
.strip--reverse .strip__item { width: clamp(150px, 15vw, 210px); }

/* Set by initPhotoStrip when a band scrolls out of view. An off-screen
   marquee is work the browser does for nobody. */
.strip[data-paused] .strip__track { animation-play-state: paused; }

/* Edge to edge, outside the shell. Used on the dark gallery band, where the
   photographs should run off both sides of the window. */
.strip--wide {
    margin: 0 0 clamp(34px, 4vw, 56px);
    width: 100%;
}
.strip--wide .strip__item {
    width: clamp(230px, 24vw, 340px);
    aspect-ratio: 3 / 2;
}

.strip__item {
    flex: none;
    width: clamp(210px, 22vw, 300px);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--gold-200);
    background: var(--cream-2);
}
.strip__item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease);
}
.strip__item:hover img { transform: scale(1.06); }

/* Standing still is the right answer for anyone who asked for less motion —
   the photos are still all there to scroll through by hand. */
@media (prefers-reduced-motion: reduce) {
    .strip__track { animation: none; }
    .strip { overflow-x: auto; }
}

/* --------------------------------------------------------------------------
   Reading progress — long documents only

   The by-laws run to sixteen articles and the refund policy is not much
   shorter. A thin bar showing how far through you are is the one piece of
   motion here that does a job rather than decorates.
   -------------------------------------------------------------------------- */
.read-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(to right, var(--gold), var(--green-600));
    z-index: 95;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   23. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .brand__full { display: none; }
    .brand__rule { display: none; }
    .nav__list { gap: 26px; }
    .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .card-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 940px) {
    html { scroll-padding-top: 88px; }

    .nav-toggle { display: inline-flex; }

    /* Full-screen menu. It takes the whole viewport rather than dropping a
       panel over the top slice, so nothing of the page shows through to
       compete with it and the links can sit at a comfortable thumb size.
       100dvh, not 100vh: on mobile Safari the URL bar makes vh too tall and
       the last link ends up under the browser chrome. */
    .nav {
        position: fixed;
        inset: 0;
        height: 100dvh;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        gap: 0;
        padding: 92px 26px 40px;
        overflow-y: auto;
        /* Matches the bar it opens from. It also inherits the header's white
           link colour, so a cream panel here would render the menu invisible. */
        background: var(--green-900);
        box-shadow: var(--shadow-lg);
        /* Closed: pushed off the top AND made non-interactive, so keyboard
           focus cannot wander into a menu nobody can see. Visibility is
           delayed on the way out only, letting the slide finish first. */
        transform: translateY(-100%);
        visibility: hidden;
        transition: transform var(--t-base) var(--ease), visibility 0s linear var(--t-base);
        z-index: 80;
    }
    .nav.is-open {
        transform: translateY(0);
        visibility: visible;
        transition: transform var(--t-base) var(--ease), visibility 0s linear 0s;
    }
    /* The flag corner, so the open menu still reads as GCCA rather than a
       plain green sheet. */
    .nav::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 160px;
        aspect-ratio: 1;
        pointer-events: none;
        opacity: .55;
        z-index: -1;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpolygon fill='%23009E49' points='0,70 0,50 150,200 130,200'/%3E%3Cpolygon fill='%23FCD116' points='0,132 0,82 118,200 68,200'/%3E%3Cpolygon fill='%230C0C0C' points='0,145 0,132 68,200 55,200'/%3E%3Cpolygon fill='%23CE1126' points='0,200 0,145 55,200'/%3E%3C/svg%3E");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .nav__link {
        display: block;
        padding: 15px 2px;
        font-size: 1.34rem;
        font-family: var(--font-display);
        letter-spacing: -.01em;
        border-bottom: 1px solid rgba(255, 255, 255, .14);
    }
    .nav__link::after { display: none; }
    .nav__cta { margin-top: 26px; justify-content: center; font-size: 1rem; }

    /* Links arrive one after another once the panel has landed. */
    .nav.is-open .nav__list li,
    .nav.is-open .nav__cta { animation: nav-item .42s var(--ease) both; }
    .nav.is-open .nav__list li:nth-child(1) { animation-delay: .16s; }
    .nav.is-open .nav__list li:nth-child(2) { animation-delay: .21s; }
    .nav.is-open .nav__list li:nth-child(3) { animation-delay: .26s; }
    .nav.is-open .nav__list li:nth-child(4) { animation-delay: .31s; }
    .nav.is-open .nav__list li:nth-child(5) { animation-delay: .36s; }
    .nav.is-open .nav__list li:nth-child(6) { animation-delay: .41s; }
    .nav.is-open .nav__cta { animation-delay: .48s; }

    /* Set by initChrome while the full-screen menu is open. */
    body.nav-open { overflow: hidden; }

    .hero__inner { grid-template-columns: 1fr; }
    .hero__copy { padding: 44px 24px 38px; }
    .hero__media { min-height: 340px; }
    .hero__photo,
    .hero__edge { clip-path: polygon(0 0, 50% 9%, 100% 0, 100% 100%, 0 100%); }
    /* The notch rests 11px above the photo here, but `edge-sweep` finishes at
       translateX(-13px) — and an animation beats a plain declaration, so the
       sweep was dragging the chevron sideways out of position and leaving it
       there. The sweep is a desktop gesture across a wide hero; stacked, it
       has nowhere to travel. Turn it off and the resting position holds. */
    .hero__edge {
        animation: none;
        transform: translateY(-11px);
    }
    .flag-corner { width: 104px; opacity: .9; }

    .pillars__grid { grid-template-columns: 1fr; }
    .pillar { border-left: 0; border-top: 1px solid var(--gold-200); padding-left: 0; padding-right: 0; }
    .pillar:first-child { border-top: 0; }

    .split,
    .contact-layout,
    .membership-layout,
    .gov-grid,
    .register-layout { grid-template-columns: 1fr; }
    .split--reverse .split__media { order: -1; }
    .split--wide-right { grid-template-columns: 1fr; }
    .order-card { position: static; }

    /* The card already stacks at every width now, so there is nothing to undo
       here beyond going to a single column. */
    .card-grid--3 { grid-template-columns: 1fr; }

    .journey { grid-template-columns: 1fr; gap: 26px; text-align: left; }
    .journey__step { flex-direction: row; align-items: flex-start; gap: 16px; text-align: left; padding: 0; }
    /* Stacked, so the route runs down the icon column rather than across.
       The leg starts 12px below one 64px icon and ends 12px above the next —
       `bottom: -14px` reaches into the 26px grid gap by exactly that much, so
       the clearance holds however much the text beside it wraps. */
    .journey__step::after {
        top: 76px;
        bottom: -14px;
        left: 32px;
        right: auto;
        width: 1px;
        height: auto;
        background: repeating-linear-gradient(to bottom, var(--gold-300) 0 7px, transparent 7px 13px);
        transform-origin: center top;
    }
    .journey__step::before {
        top: 76px;
        bottom: -14px;
        left: 27.5px;
        right: auto;
        width: 9px;
        height: auto;
        background-position: center 0;
    }
    .journey.is-armed .journey__step::after { transform: scaleY(0); }
    .journey.is-running .journey__step::after { animation-name: journey-leg-down; }
    .journey.is-running .journey__step::before { animation-name: journey-marker-down; }

    .journey__label { margin-top: 0; }

    /* Title, then player, then the copy beneath it. */
    .vidsplit { grid-template-columns: 1fr; gap: 30px; }
    .vidsplit__left { grid-template-rows: auto auto; }
    .vidfacade__play > span { width: 66px; height: 66px; }

    .member--lead { grid-column: span 1; }

    .newsletter { grid-template-columns: 1fr; }
    .newsletter__icon { display: none; }

    .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    html { scroll-padding-top: 84px; }
    .shell { width: min(var(--shell), 100% - 32px); }
    .brand__mark { width: 48px; }
    .brand__name { font-size: 1.5rem; }
    .brand__city { font-size: .62rem; letter-spacing: .28em; }

    .field-grid { grid-template-columns: 1fr; }
    .tier-grid { grid-template-columns: 1fr; }
    .card-grid--4 { grid-template-columns: 1fr; }
    .feedback-callout { flex-direction: column; }
    .land-ack { grid-template-columns: 1fr; }
    .footer__grid { grid-template-columns: 1fr; }
    .quote-band blockquote::before,
    .quote-band blockquote::after { display: none; }
    .banner__stats { gap: 22px; }
    .newsletter__form { flex-direction: column; gap: 10px; }
    .newsletter__form input { border-right: 1.5px solid var(--line-strong); border-radius: var(--radius); }
    .newsletter__form .btn { border-radius: var(--radius); justify-content: center; }
    .team-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   24. Preferences & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
}

@media print {
    .site-header, .nav, .newsletter, .btn, .site-footer { display: none !important; }
    body { background: #fff; }
    .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   25. About page — who we are grid, values row, milestones
   -------------------------------------------------------------------------- */
.about-grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1fr) minmax(0, 1.02fr);
    gap: clamp(26px, 3.4vw, 54px);
    align-items: center;
}

/* minmax(0, 1fr) rather than a bare 1fr: a plain `1fr` track cannot shrink
   below its content's min-content width, so at around 960px the three labels
   refused to narrow and pushed the whole page into a horizontal scroll. */
.values-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.value-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 4px 10px;
    text-align: center;
    border-left: 1px solid var(--gold-200);
}
.value-stack:first-child { border-left: 0; }
.value-stack .icon-well { color: var(--green-700); }
.value-stack__label {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--green-700);
}

.milestones { list-style: none; margin: 2.2rem 0 0; padding: 0; }
.milestone {
    position: relative;
    padding: 0 0 26px 32px;
    border-left: 1px solid var(--gold-300);
}
.milestone:last-child { padding-bottom: 0; border-left-color: transparent; }
.milestone::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 5px;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 4px var(--cream);
}
.milestone h3 {
    font-family: var(--font-body);
    font-size: 1.04rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--green-800);
    margin: 0 0 .25rem;
}
.milestone p { font-size: .94rem; color: var(--ink-soft); margin: 0; }

/* --------------------------------------------------------------------------
   26. Culture page — flag key
   -------------------------------------------------------------------------- */
.flag-key { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 12px; }
.flag-key li {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    font-size: .93rem;
    color: var(--ink-soft);
}
.flag-key b { color: var(--green-900); }
.flag-key .swatch {
    flex: none;
    width: 18px; height: 18px;
    margin-top: .3em;
    border-radius: 4px;
    border: 1px solid rgba(10, 58, 38, .18);
}

.tile { text-decoration: none; color: inherit; display: block; }

@media (max-width: 940px) {
    .about-grid { grid-template-columns: 1fr; }
    .values-row { max-width: 520px; }
}

@media (max-width: 620px) {
    .values-row { grid-template-columns: 1fr; }
    .value-stack { flex-direction: row; text-align: left; border-left: 0; border-top: 1px solid var(--gold-200); padding: 14px 0; }
    .value-stack:first-child { border-top: 0; }
}

/* --------------------------------------------------------------------------
   27. "Not wired up yet" form state
   -------------------------------------------------------------------------- */
.form-status[data-state="notice"] {
    padding: 14px 16px;
    border-radius: var(--radius);
    background: var(--gold-100);
    border: 1px solid var(--gold-300);
    color: #7A5A05;
}

/* --------------------------------------------------------------------------
   28. Schedule — past events, empty states, undated events
   -------------------------------------------------------------------------- */
.event-card[hidden],
.btn[hidden] { display: none; }

.event-card--past {
    background: var(--cream-2);
    border-color: var(--line);
}
.event-card--past:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--line);
}
.event-card--past .event-card__media img {
    filter: grayscale(.5) saturate(.7);
    opacity: .78;
}
.event-card--past .date-badge { background: var(--ink-faint); }
.event-card--past .event-card__title { color: var(--ink-soft); }
.event-card__past-note {
    margin: 0;
    font-size: .86rem;
    font-style: italic;
    color: var(--ink-faint);
}

.tag--muted {
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--ink-faint);
}

.date-badge__day--tbd {
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: .06em;
    padding: .28em 0;
}

.events-empty {
    margin: 0;
    padding: 30px 26px;
    background: var(--cream-2);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg);
    color: var(--ink-soft);
    text-align: center;
}

/* Two meta lines now sit under each event title */
.event-card__meta + .event-card__meta { margin-top: -.55rem; }
/* --------------------------------------------------------------------------
   28. Governance — registration facts and by-laws
   -------------------------------------------------------------------------- */
.gov-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}
/* This section never had a mobile rule, so on a phone the by-laws card was
   squeezed into a ~150px column — narrower than the buttons inside it, which
   then hung off the side of the page. The rule lives here, next to what it
   overrides, rather than in the responsive block further up the file: that
   block comes BEFORE this one, so at equal specificity it would lose. */
@media (max-width: 940px) {
    .gov-grid { grid-template-columns: 1fr; }
}

.gov-facts { margin: 0; display: grid; gap: 0; }
.gov-fact {
    display: grid;
    grid-template-columns: minmax(150px, 34%) 1fr;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
}
.gov-fact:first-child { border-top: 1px solid var(--line); }
.gov-fact dt {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--green-700);
}
.gov-fact dd {
    margin: 0;
    font-size: .98rem;
    color: var(--ink);
}

.gov-card {
    padding: clamp(26px, 3vw, 36px);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.gov-card h3 { font-size: 1.4rem; margin: 1.1rem 0 .55rem; }
.gov-card p { font-size: .95rem; color: var(--ink-soft); }
.gov-card .btn { margin-top: 1.2rem; }
.gov-card__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.gov-card__note {
    margin-top: 1rem;
    font-size: .84rem;
    color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   29. Community feedback callout
   -------------------------------------------------------------------------- */
.feedback-callout {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-top: 2.2rem;
    padding: 26px 26px 28px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    /* Tinted from the maple red rather than striped with it. A 4px bar on
       one edge is the accent every generated card reaches for; the whole
       surface carrying a trace of the colour is quieter and more assured. */
    background: var(--maple-100);
    border-color: rgba(216, 6, 33, .16);
}
.feedback-callout__title {
    font-size: 1.24rem;
    margin-bottom: .4rem;
}
.feedback-callout__text {
    font-size: .94rem;
    color: var(--ink-soft);
    margin-bottom: 1.1rem;
}

/* --------------------------------------------------------------------------
   30. Land acknowledgement
   -------------------------------------------------------------------------- */
.land-ack {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: start;
    margin-top: 46px;
    padding: 24px 26px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--radius-lg);
}
.land-ack p {
    margin: 0;
    font-size: .89rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .78);
}
.land-ack__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(216, 6, 33, .22);
    color: #F2A0A8;
}
.land-ack__mark svg { width: 22px; height: 22px; }

/* --------------------------------------------------------------------------
   31. More colour — Guyana and Canada
   -------------------------------------------------------------------------- */

/* A warm, sunlit band. Used for the membership section. */
.section--sun {
    background:
            radial-gradient(120% 80% at 12% 0%, rgba(244, 194, 27, .22), transparent 62%),
            radial-gradient(100% 90% at 92% 8%, rgba(216, 6, 33, .08), transparent 58%),
            var(--cream);
    border-top: 1px solid var(--gold-200);
    border-bottom: 1px solid var(--gold-200);
}

/* The three home-page pillars pick up a flag colour each. */
.pillar:nth-child(3) .icon-well { background: var(--maple-100); color: var(--maple-700); }

/* Executive headshots drop straight into the initials slot.
   The avatar is a circle, so a portrait photo gets cropped to a square —
   biasing the crop above centre keeps the face framed with some headroom
   instead of cutting off the top of the head. */
.member__avatar { overflow: hidden; }
.member__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    border-radius: inherit;
}

.mission-card__meta {
    margin-top: .8rem;
    font-size: .84rem;
    color: var(--gold-600);
    font-weight: 600;
}

/* An aside, set apart by its own tint rather than by a bar down one edge.
   The gold hairline all the way round reads as a considered container; the
   same gold as a 3px tab down the left reads as a template. */
.membership__note {
    margin-top: 2.2rem;
    padding: 18px 22px;
    background: var(--gold-100);
    border: 1px solid var(--gold-200);
    border-radius: var(--radius);
    font-size: .9rem;
    color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   34. Page not found
   A dead end is the worst place to leave somebody, so the page is mostly a set
   of ways onward rather than an apology.
   -------------------------------------------------------------------------- */
.lost {
    position: relative;
    overflow: hidden;
    padding: clamp(64px, 9vw, 132px) 0 clamp(56px, 7vw, 104px);
    background:
            radial-gradient(120% 90% at 10% 0%, rgba(244, 194, 27, .20), transparent 60%),
            radial-gradient(90% 80% at 92% 10%, rgba(0, 158, 73, .10), transparent 58%),
            var(--cream);
    border-bottom: 1px solid var(--gold-200);
}
.lost__inner { position: relative; z-index: 1; max-width: 74ch; }
/* Purely decorative here, so it never competes with the links. */
.lost .flag-corner { z-index: 0; opacity: .9; }

/* The numeral sits behind the words rather than shouting over them. */
.lost__code {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(5.5rem, 17vw, 11rem);
    font-weight: 700;
    line-height: .85;
    letter-spacing: -.03em;
    color: var(--gold);
    opacity: .5;
    margin-bottom: .12em;
}
.lost__title { margin-bottom: .4em; }
.lost__lede { max-width: 58ch; }

/* Four ways onward, deliberately two-by-two. Letting them auto-fit leaves one
   card stranded on its own row at most widths. */
.lost__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 2.8rem;
}
.lost__card {
    display: grid;
    gap: 5px;
    padding: 22px 22px 24px;
    background: var(--paper);
    border: 1px solid var(--gold-200);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease);
}
.lost__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--gold);
}
.lost__card .icon-well { margin-bottom: .5rem; }
.lost__card b { font-size: 1.02rem; color: var(--green-900); }
.lost__card span:last-child { font-size: .88rem; color: var(--ink-soft); }

.lost__foot { margin: 2.6rem 0 0; }

@media (max-width: 560px) {
    .lost__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   33. Long documents — the by-laws
   A legal document, so the numbering has to be visible and correct: (a), (b)
   for clauses and (i), (ii) for sub-clauses, matching how the articles are
   cross-referenced in the text itself.
   -------------------------------------------------------------------------- */
.doc-head { max-width: 62ch; margin-bottom: clamp(32px, 4vw, 52px); }
.doc-head__meta {
    margin: 1rem 0 0;
    font-size: .86rem;
    color: var(--ink-faint);
}
.doc-head__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 1.8rem;
}

.doc-layout {
    display: grid;
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 60px);
    align-items: start;
}

.doc-toc {
    position: sticky;
    top: 96px;
    padding: 22px 24px 24px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.doc-toc__title {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--green-700);
    margin-bottom: .9rem;
}
/* On desktop the disclosure is always open, so it should read as a heading
   rather than something to click. The arrow only earns its place on mobile. */
.doc-toc__disclosure > summary { list-style: none; cursor: default; }
.doc-toc__disclosure > summary::-webkit-details-marker { display: none; }
.doc-toc__list {
    margin: 0;
    padding-left: 1.4em;
    display: grid;
    gap: 7px;
    font-size: .88rem;
}
.doc-toc__list li::marker { color: var(--gold-600); font-weight: 600; }
.doc-toc__list a { text-decoration: none; color: var(--ink-soft); }
.doc-toc__list a:hover { color: var(--green-700); text-decoration: underline; }
.doc-toc__foot {
    margin: 1.1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    font-size: .88rem;
}
.doc-toc__foot a { text-decoration: none; }
.doc-toc__foot a:hover { text-decoration: underline; }

.doc-body { max-width: 78ch; }
.doc-body__foot {
    margin-top: 2.6rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--line);
    font-size: .92rem;
    color: var(--ink-soft);
}

.bylaw { margin-bottom: clamp(34px, 4vw, 52px); scroll-margin-top: 96px; }
.bylaw h2 {
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    margin-bottom: 1rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--gold-200);
}
.bylaw__num {
    display: block;
    font-family: var(--font-body);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-600);
    margin-bottom: .35rem;
}
.bylaw h3 { font-size: 1.05rem; margin: 1.6rem 0 .6rem; color: var(--green-800); }
.bylaw p { font-size: .95rem; color: var(--ink-soft); }

.bylaw ol.alpha, .bylaw ol.roman {
    margin: 0;
    padding-left: 1.9em;
    display: grid;
    gap: 12px;
}
.bylaw ol.alpha { list-style-type: lower-alpha; }
.bylaw ol.roman { list-style-type: lower-roman; }
.bylaw ol li {
    font-size: .95rem;
    color: var(--ink-soft);
    line-height: 1.62;
    padding-left: .3em;
}
.bylaw ol li::marker { color: var(--green-700); font-weight: 600; }
/* Nested lists get breathing room from the clause that introduces them. */
.bylaw ol ol, .bylaw .bylaw__plain, .bylaw .bylaw__defs { margin-top: 12px; }
.bylaw ol p { margin: .6rem 0 0; }
.bylaw b { color: var(--ink); }

.bylaw__plain {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    display: grid;
    gap: 5px;
    font-size: .95rem;
    color: var(--ink-soft);
}
/* Marked with a small gold rule set into the margin rather than a coloured
   bar running down every item. Ten stacked side-tabs read as a template;
   one short mark per line reads as a list. */
.bylaw__plain li { position: relative; padding-left: 1.5em; }
.bylaw__plain li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: .7em;
    height: 1px;
    background: var(--gold-600);
}

.bylaw__defs { margin-bottom: 0; display: grid; gap: 4px; }
.bylaw__defs dt { font-weight: 700; color: var(--ink); font-size: .93rem; }
.bylaw__defs dd {
    margin: 0 0 .7rem;
    font-size: .93rem;
    color: var(--ink-soft);
}

.bylaw__note {
    margin: .8rem 0 0;
    padding: 10px 14px;
    background: var(--gold-100);
    border-radius: var(--radius);
    font-size: .86rem;
    color: var(--ink-soft);
}
.bylaw__meta { font-size: .88rem; color: var(--ink-faint); }
/* Quoted by-law text. A quotation is set apart typographically — indented,
   with the mark hung into the margin the way a printed page would do it —
   not by a coloured rule down its side. */
.bylaw__quote {
    position: relative;
    margin: 1.1rem 0;
    padding: 2px 0 2px 2.1rem;
}
.bylaw__quote::before {
    content: "\201C";
    position: absolute;
    left: 0;
    top: -.18em;
    font-family: var(--font-display);
    font-size: 2.6rem;
    line-height: 1;
    color: var(--gold-300);
}
.bylaw__quote p { margin: 0; font-size: .94rem; font-style: italic; color: var(--ink-soft); }

.bylaw--amendment {
    padding: clamp(22px, 3vw, 32px);
    background: var(--cream-2);
    border: 1px solid var(--gold-200);
    border-radius: var(--radius-lg);
}
.bylaw--amendment h2 { border-bottom-color: var(--gold); }

@media (max-width: 900px) {
    .doc-layout { grid-template-columns: 1fr; }
    .doc-toc { position: static; }

    /* Collapsed by default here, so it needs to look tappable and to say so. */
    .doc-toc__disclosure > summary {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 0;
    }
    .doc-toc__disclosure > summary::after {
        content: "";
        flex: none;
        width: 9px; height: 9px;
        border-right: 2px solid var(--green-700);
        border-bottom: 2px solid var(--green-700);
        transform: rotate(45deg) translate(-2px, -2px);
        transition: transform var(--t-fast) var(--ease);
    }
    .doc-toc__disclosure[open] > summary { margin-bottom: .9rem; }
    .doc-toc__disclosure[open] > summary::after {
        transform: rotate(-135deg) translate(-2px, -2px);
    }
}

/* Article 5 nests three deep. At 1.9em a level, that is nearly half a phone
   screen given over to indentation and the text left wrapping in a ribbon —
   so the steps get shallower as they go in. The numbering still reads clearly
   because each level uses a different marker style. */
@media (max-width: 620px) {
    .bylaw ol.alpha, .bylaw ol.roman { padding-left: 1.5em; }
    .bylaw ol ol { padding-left: 1.15em; }
    .bylaw ol li { padding-left: .1em; }
    .bylaw__plain li { padding-left: .7em; }
}

/* Printing the by-laws is how the "Download as PDF" button works, so the
   document itself has to survive without the site around it. */
@media print {
    .doc-toc, .doc-head__actions, .doc-body__foot { display: none !important; }
    .doc-layout { display: block; }
    .doc-body { max-width: none; }
    .bylaw { break-inside: auto; margin-bottom: 26px; }
    .bylaw h2 { break-after: avoid; }
    .bylaw ol li { break-inside: avoid; }
    .bylaw--amendment { background: none; border: 1px solid #999; }
}

/* --------------------------------------------------------------------------
   32. Policy pages — cancellation and refunds
   Long-form terms people actually have to read, so the column is kept narrow
   and each rule sits in its own panel rather than running together as prose.
   -------------------------------------------------------------------------- */
.policy { max-width: 74ch; }
.policy__updated {
    font-size: .84rem;
    color: var(--ink-faint);
    margin-bottom: 2.6rem;
}

.policy-block {
    padding: clamp(24px, 3vw, 34px);
    margin-bottom: 22px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.policy-block h2 { font-size: 1.42rem; margin-bottom: .6rem; }
.policy-block h3 {
    font-size: 1.02rem;
    margin: 1.6rem 0 .5rem;
    color: var(--green-800);
}
.policy-block h3:first-of-type { margin-top: 1.3rem; }
.policy-block p { font-size: .97rem; color: var(--ink-soft); }
.policy-block p:last-child { margin-bottom: 0; }
.policy-block .fact-list { margin-top: 1rem; }
.policy-block .fact-list b { color: var(--ink); }

/* The refund windows, so the timing is scannable rather than buried in a
   sentence. Collapses to stacked rows on a phone. */
.refund-rule {
    display: grid;
    grid-template-columns: minmax(0, 40%) 1fr;
    gap: 6px 20px;
    margin: 1rem 0 0;
}
.refund-rule dt {
    font-weight: 700;
    font-size: .95rem;
    color: var(--green-800);
}
.refund-rule dd {
    margin: 0;
    font-size: .95rem;
    color: var(--ink-soft);
}
.refund-rule dt, .refund-rule dd {
    padding: 12px 0;
    border-top: 1px solid var(--line);
}

@media (max-width: 620px) {
    .refund-rule { grid-template-columns: 1fr; gap: 0; }
    .refund-rule dt { padding-bottom: 2px; border-bottom: 0; }
    .refund-rule dd { padding-top: 0; border-top: 0; padding-bottom: 12px; }
}

/* ==========================================================================
   26. Carifest page

   Reached only from the events page — it is deliberately not in the nav —
   so it carries a heavier hero than the rest of the site to make clear you
   have arrived somewhere, while keeping the same type, colour and spacing.
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
.cf-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(460px, 62vh, 660px);
    padding: clamp(56px, 8vw, 110px) 0 clamp(44px, 5vw, 76px);
    overflow: hidden;
    background: var(--green-900);
}
.cf-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
    /* The photograph is a crowd in bright costume; the copy sits on the left,
       so the shade is heaviest there and clears off the faces on the right. */
    -webkit-mask-image: linear-gradient(to right, #000 0 55%, rgba(0,0,0,.55) 100%);
            mask-image: linear-gradient(to right, #000 0 55%, rgba(0,0,0,.55) 100%);
    animation: settle-in 1.3s var(--ease) both;
}
.cf-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(6, 32, 21, .93) 0%, rgba(6, 32, 21, .74) 42%, rgba(6, 32, 21, .18) 78%, rgba(6, 32, 21, .3) 100%),
        linear-gradient(to top, rgba(6, 32, 21, .6) 0%, transparent 45%);
}
.cf-hero__inner { position: relative; z-index: 1; max-width: 760px; }

.cf-hero__title {
    margin: 0 0 .18em;
    font-family: var(--font-display);
    font-size: clamp(3.4rem, 9vw, 6.4rem);
    line-height: .95;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: #fff;
    animation: rise-in .9s var(--ease) .12s both;
}
.cf-hero__tag {
    margin: 0 0 .7em;
    font-size: clamp(1.12rem, 2.1vw, 1.42rem);
    font-weight: 700;
    color: #fff;
    animation: rise-in .9s var(--ease) .24s both;
}
.cf-hero__lede {
    max-width: 46ch;
    margin: 0 0 2rem;
    font-size: 1.02rem;
    color: rgba(255, 255, 255, .88);
    animation: rise-in .9s var(--ease) .34s both;
}
.cf-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    animation: rise-in .9s var(--ease) .46s both;
}

/* --- Story: copy beside two stacked photographs --------------------------- */
.cf-story {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(34px, 5vw, 72px);
    align-items: center;
}
.cf-stack {
    position: relative;
    /* Room at the bottom-right for the overlapping portrait to hang into. */
    padding: 0 0 clamp(48px, 7vw, 86px) 0;
}
.cf-stack__back img,
.cf-stack__front img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
}
.cf-stack__back { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.cf-stack__front {
    position: absolute;
    right: -4%;
    bottom: 0;
    width: 46%;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 6px solid var(--cream);
    box-shadow: var(--shadow-lg);
}

/* --- Gallery -------------------------------------------------------------- */
.cf-gallery { background: var(--green-900); }
.cf-gallery .section-title { color: #fff; }
.cf-gallery .section-intro { color: rgba(255, 255, 255, .74); }

.cf-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.cf-tile {
    position: relative;
    display: block;
    padding: 0;
    border: 0;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: zoom-in;
    background: var(--green-800);
}
.cf-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease), opacity var(--t-base) var(--ease);
}
.cf-tile:hover img,
.cf-tile:focus-visible img { transform: scale(1.06); opacity: .78; }

.cf-tile__zoom {
    position: absolute;
    top: 10px; right: 10px;
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--green-900);
    opacity: 0;
    transform: scale(.8);
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.cf-tile:hover .cf-tile__zoom,
.cf-tile:focus-visible .cf-tile__zoom { opacity: 1; transform: scale(1); }

/* --- Watch ---------------------------------------------------------------- */
.cf-watch__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: clamp(24px, 3vw, 40px);
    align-items: start;
}
.cf-feature { margin: 0; }
.cf-feature figcaption,
.cf-clip figcaption { padding-top: 12px; }
.cf-feature figcaption b,
.cf-clip figcaption b {
    display: block;
    font-size: .98rem;
    color: var(--green-800);
}
.cf-feature figcaption span,
.cf-clip figcaption span {
    display: block;
    margin-top: 2px;
    font-size: .82rem;
    color: var(--ink-soft);
}

/* Mixed footage: the news feature is landscape, the two parade clips were
   shot on a phone held upright. Each is given a frame of its own shape, so
   nothing is stretched or heavily letterboxed — the news clip runs the full
   width of the column and the two portrait clips share the row beneath. */
.cf-clips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-content: start;
}
.cf-clip { margin: 0; }
.cf-clip video {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    border-radius: var(--radius-lg);
    background: var(--green-900);
}
.cf-clip--wide { grid-column: 1 / -1; }
/* 848 x 384 — its true dimensions, so there are no bars on any edge. */
.cf-clip--wide video { aspect-ratio: 848 / 384; }
/* The parade clip is 832 x 464, near enough 16:9. It was letterboxed inside
   the portrait frame the other clips use; given its own shape it fills. */
.cf-clip--16x9 video { aspect-ratio: 16 / 9; }

/* --- Closing call to action ----------------------------------------------- */
.cf-cta {
    position: relative;
    overflow: hidden;
    padding: clamp(48px, 6vw, 88px) 0;
    background: var(--gold);
}
.cf-cta__inner { position: relative; z-index: 1; max-width: 640px; }
.cf-cta__title {
    margin: 0 0 .5em;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1.08;
    color: var(--green-900);
}
.cf-cta__text {
    max-width: 52ch;
    margin: 0 0 1.7rem;
    color: #3F3A16;
}
.btn--dark {
    --btn-bg: var(--green-900);
    --btn-fg: #fff;
    --btn-bd: var(--green-900);
}
.btn--dark:hover { --btn-bg: var(--green-800); --btn-bd: var(--green-800); }

/* The flag stripes rake across the right-hand end of the gold band. */
.cf-cta__flag {
    position: absolute;
    top: 0; right: 0;
    width: clamp(180px, 34vw, 460px);
    height: 100%;
    pointer-events: none;
}

.link-arrow--back svg { transition: transform var(--t-base) var(--ease); }
.link-arrow--back:hover svg { transform: translateX(-5px); }

/* --- Full-screen photo viewer --------------------------------------------- */
.lightbox {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    padding: 0;
    border: 0;
    background: rgba(6, 26, 18, .96);
}
.lightbox::backdrop { background: rgba(6, 26, 18, .92); }
.lightbox[open] { animation: fade-in .22s var(--ease); }

.lightbox__img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(92vw, 1500px);
    max-height: 84dvh;
    margin: auto;
    border-radius: 8px;
    /* The dialog is a flex-free block; auto margins on all sides centre the
       picture whatever shape it turns out to be. */
    position: absolute;
    inset: 0;
}

.lightbox__close,
.lightbox__full,
.lightbox__nav {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.lightbox__close:hover,
.lightbox__full:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, .24); }

.lightbox__close { top: 18px; right: 18px; width: 46px; height: 46px; }
.lightbox__full { top: 18px; right: 76px; width: 46px; height: 46px; }
.lightbox__full[hidden] { display: none; }

/* Once the browser's own chrome is gone there is more room, so the picture
   takes it. */
.lightbox:fullscreen { background: #05130D; }
.lightbox:fullscreen .lightbox__img { max-width: 96vw; max-height: 92dvh; }
.lightbox__nav { top: 50%; margin-top: -26px; width: 52px; height: 52px; }
.lightbox__nav--prev { left: clamp(10px, 2.4vw, 30px); }
.lightbox__nav--next { right: clamp(10px, 2.4vw, 30px); }
.lightbox__nav--prev:hover { transform: translateX(-3px); }
.lightbox__nav--next:hover { transform: translateX(3px); }

/* --- Carifest page, narrow screens ---------------------------------------- */
@media (max-width: 940px) {
    .cf-hero { align-items: center; min-height: clamp(420px, 70vh, 560px); }
    .cf-hero__bg { -webkit-mask-image: none; mask-image: none; }
    .cf-hero::after {
        background:
            linear-gradient(to right, rgba(6, 32, 21, .9) 0%, rgba(6, 32, 21, .66) 100%),
            linear-gradient(to top, rgba(6, 32, 21, .66) 0%, transparent 55%);
    }
    .cf-story { grid-template-columns: 1fr; }

    /* The overlap needs width to work; stacked, the portrait simply follows. */
    .cf-stack { padding-bottom: 0; }
    .cf-stack__front {
        position: static;
        width: 62%;
        margin: -34px 0 0 auto;
        aspect-ratio: 3 / 4;
    }

    /* The stripes have to give way to the words. Below the desktop width the
       band is narrow enough that the flag would otherwise run underneath the
       heading, so it narrows and the copy is held clear of it. */
    .cf-cta__flag { width: clamp(70px, 16vw, 150px); }
    .cf-cta__inner { padding-right: clamp(58px, 17vw, 160px); }

    .cf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .cf-watch__grid { grid-template-columns: 1fr; }
    .lightbox__nav { width: 44px; height: 44px; margin-top: -22px; }
    .lightbox__close { width: 42px; height: 42px; }
    .lightbox__full { width: 42px; height: 42px; right: 68px; }
}

@media (max-width: 620px) {
    .cf-hero__actions .btn { width: 100%; justify-content: center; }
    /* The clips keep their own shapes here — the two portrait ones stay side
       by side, since one per row would make each tall enough to fill a phone
       screen on its own. */
}

/* ==========================================================================
   27. Utilities

   Last in the file on purpose: a utility exists to win, so it must come
   after the components it overrides.

   Note the element qualifier. `.link-row` alone is specificity (0,1,0) and
   lost to `.vidsplit__copy > p` at (0,1,1) — specificity is settled before
   source order, so moving the rule down the file changed nothing. Adding the
   tag takes it to (0,1,1), where being last does decide it.
   ========================================================================== */

/* A paragraph whose only job is to carry a trailing link. */
p.link-row { margin-bottom: 0; }

/* ==========================================================================
   28. Hover system — "the arrowhead leads"

   The site's motion idea is a procession: the gold chevron sweeps into every
   hero, the Carifest marker travels its route, the photo bands march. These
   hovers carry the same idea down to the small parts — under the pointer,
   something advances. It is one gesture reused, not a different trick per
   component, which is what keeps a page this busy from feeling scattered.

   Everything here rides transform, opacity, colour and shadow only, so none
   of it touches layout.
   ========================================================================== */

/* Category and status pills lift and deepen. */
.tag,
.chip {
    transition: transform var(--t-fast) var(--ease),
                background var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease);
}
.card:hover .tag,
.chip:hover { transform: translateY(-2px); }
.chip:hover { background: var(--gold-100); color: var(--green-900); }

/* Icon wells tilt toward the reader. Rotation is small on purpose — enough
   to register as alive, not enough to read as a spin. */
.icon-well {
    transition: transform var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.value-card:hover .icon-well,
.gov-card:hover .icon-well,
.pillar:hover .icon-well,
.lost__card:hover .icon-well { transform: rotate(-6deg) scale(1.07); }

/* The date badge rides forward with its card. */
.date-badge { transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.card:hover .date-badge { transform: translateY(-3px) scale(1.04); box-shadow: var(--shadow-md); }

/* Cards that were inert now answer, matching .card's existing lift. */
.value-card,
.gov-card {
    transition: transform var(--t-base) var(--ease),
                box-shadow var(--t-base) var(--ease),
                border-color var(--t-base) var(--ease);
}
.value-card:hover,
.gov-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--gold-200);
}

/* The pillars row: the whole column warms rather than lifting, because they
   sit flush in a band with dividers between them and nothing to lift off. */
.pillar { transition: background var(--t-base) var(--ease); }
.pillar:hover { background: var(--cream-3); }

/* Footer links: the arrowhead again, at its smallest. A gold chevron slides
   out of nothing and the label steps aside to make room. */
.footer__list a {
    position: relative;
    display: inline-block;
    transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.footer__list a::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    /* A small solid arrowhead, drawn rather than a glyph. */
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background: var(--gold);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.footer__list a:hover,
.footer__list a:focus-visible { transform: translateX(9px); color: var(--gold); }
.footer__list a:hover::before,
.footer__list a:focus-visible::before { opacity: 1; transform: translateX(0); }

/* Milestone dots on the About timeline swell as you read past them. */
.milestone::before { transition: transform var(--t-base) var(--ease), background var(--t-base) var(--ease); }
.milestone:hover::before { transform: scale(1.5); background: var(--gold-600); }

/* Executive headshots: the initials ring fills toward gold. */
.member__avatar { transition: transform var(--t-base) var(--ease), background var(--t-base) var(--ease); }
.member:hover .member__avatar { transform: scale(1.06) rotate(3deg); }

/* --------------------------------------------------------------------------
   Reduced motion

   The global reduce block later in this file collapses every duration, so
   these hovers still change colour and state but stop travelling. The photo
   bands are the one thing that must actually stop rather than snap: an
   infinite loop at .001ms would be a strobe.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .site-header::after { animation: none; transform: none; }
    .footer__list a:hover,
    .footer__list a:focus-visible { transform: none; }
    .value-card:hover,
    .gov-card:hover { transform: none; }
    .card:hover .date-badge { transform: none; }
    .member:hover .member__avatar,
    .milestone:hover::before,
    .value-card:hover .icon-well,
    .gov-card:hover .icon-well,
    .pillar:hover .icon-well,
    .lost__card:hover .icon-well { transform: none; }
}

/* --------------------------------------------------------------------------
   Pronunciation controls, continued: progress ring, slow button, full player
   -------------------------------------------------------------------------- */

/* The ring is a conic gradient on a pseudo-element behind the icon, its angle
   driven by --p (0 to 1) which the script updates each frame while playing.
   A mask punches the middle out so only the rim shows. */
.say__ring {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    opacity: 0;
    background: conic-gradient(var(--green-700) calc(var(--p, 0) * 360deg), transparent 0);
    -webkit-mask: radial-gradient(circle, transparent 0 15px, #000 15px);
            mask: radial-gradient(circle, transparent 0 15px, #000 15px);
    transition: opacity var(--t-fast) var(--ease);
    pointer-events: none;
}
.say[data-playing] .say__ring { opacity: 1; }
.say[data-playing] { background: var(--gold); color: var(--green-900); border-color: var(--gold); }

.say-slow,
.say-more {
    display: grid;
    place-items: center;
    height: 34px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--cream-2);
    color: var(--green-700);
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease);
}
.say-more { width: 34px; padding: 0; border-radius: 50%; }
.say-slow:hover, .say-slow:focus-visible,
.say-more:hover, .say-more:focus-visible {
    background: var(--gold-100);
    border-color: var(--gold-300);
    color: var(--green-900);
}
.say-slow[data-playing] {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--green-900);
}
.say-more svg { transition: transform var(--t-base) var(--ease); }
.say-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.say-more[aria-expanded="true"] { background: var(--green-700); border-color: var(--green-700); color: #fff; }

/* The browser's own player, revealed on request. Full width of the cell so
   its scrubber is usable rather than crushed. */
.say-player {
    width: 100%;
    height: 34px;
    margin-top: 10px;
}
.say-player[hidden] { display: none; }

/* Volume, for the whole section. */
.say-volume {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 1.1rem;
}
.say-volume[hidden] { display: none; }
.say-volume__mute {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--cream-2);
    color: var(--green-700);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.say-volume__mute:hover { background: var(--gold-100); }
.say-volume__mute[aria-pressed="true"] { background: var(--maple-100); color: var(--maple-700); border-color: rgba(216,6,33,.28); }
.say-volume__slider {
    width: 132px;
    accent-color: var(--green-700);
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .say-more svg { transition: none; }
}

/* ==========================================================================
   29. News page
   ========================================================================== */

/* --- Hero: copy and search beside a photograph --------------------------- */
.news-hero { padding-bottom: clamp(48px, 5vw, 84px); }
/* Measured off the design mock: its hero photo is 490px wide in an 810px
   content column, so the split is about 1 : 1.67 rather than the even-ish
   1 : 1.15 this started with. The picture is the point of the row. */
.news-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr);
    gap: clamp(26px, 3.4vw, 52px);
    align-items: center;
}
.news-hero__media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    /* 490 x 285 in the mock is 1.72; 16:9 is the nearest standard shape and
       crops this photograph better than 3:2 did. */
    aspect-ratio: 16 / 9;
}
.news-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Held back from the site-wide h1 size: the copy column is now the narrower
   of the two, and at the full display size the heading broke over three
   lines with a single word stranded on the second. `balance` evens the rag
   across whatever lines it does take. */
.news-hero .section-title {
    font-size: clamp(1.7rem, 2.7vw, 2.35rem);
    text-wrap: balance;
}

/* --- Search -------------------------------------------------------------- */
.news-search {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 420px;
    margin-top: 1.8rem;
}
.news-search__icon {
    position: absolute;
    left: 16px;
    color: var(--green-700);
    pointer-events: none;
}
.news-search input {
    width: 100%;
    padding: .82em 1em .82em 3rem;
    background: #fff;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: .96rem;
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.news-search input:focus {
    outline: none;
    border-color: var(--green-700);
    box-shadow: 0 0 0 3px rgba(17, 106, 59, .14);
}
.news-search__count {
    margin: .7rem 0 0;
    min-height: 1.2em;      /* holds its line so results do not nudge the page */
    font-size: .86rem;
    color: var(--ink-soft);
}

/* --- Filter chips -------------------------------------------------------- */
.news-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 clamp(24px, 3vw, 38px);
}
.news-filters[hidden] { display: none; }
.news-chip {
    padding: .55em 1.15em;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: transparent;
    color: var(--green-800);
    font-family: var(--font-body);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease);
}
.news-chip:hover { background: var(--gold-100); border-color: var(--gold-300); }
.news-chip.is-on {
    background: var(--green-700);
    border-color: var(--green-700);
    color: #fff;
}
/* Same chips on the dark band. */
.news-filters--ondark .news-chip { border-color: rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .86); }
.news-filters--ondark .news-chip:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); }
.news-filters--ondark .news-chip.is-on { background: var(--gold); border-color: var(--gold); color: var(--green-900); }

/* --- Story cards --------------------------------------------------------- */
/* 320px floor rather than 280: at the 1200px shell a 280 minimum fits four
   across, which crowds the titles. Three is what the design calls for. */
.story-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: clamp(18px, 2.2vw, 26px);
}
.story-grid[hidden] { display: none; }
.story {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--t-base) var(--ease),
                box-shadow var(--t-base) var(--ease),
                border-color var(--t-base) var(--ease);
}
.story:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: var(--gold-200);
}
/* The lead story runs two columns wide where there is room for it. */
.story--lead { grid-column: span 2; }
.story__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--cream-2); }
.story__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.story:hover .story__media img { transform: scale(1.05); }
/* No photograph: the flag stripe stands in rather than a grey box. */
.story__media--blank {
    background: linear-gradient(115deg,
        var(--green-700) 0 32%, var(--gold) 32% 62%, #fff 62% 68%, var(--red) 68% 100%);
    opacity: .5;
}
.story__body { display: flex; flex-direction: column; gap: .45rem; padding: 20px 22px 24px; }
.story__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    font-size: .76rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.story__cat { font-weight: 700; color: var(--green-700); }
.story__date { color: var(--ink-faint); letter-spacing: .02em; text-transform: none; }
.story__title { font-size: 1.16rem; line-height: 1.28; margin: 0; }
.story__title a { color: var(--green-900); text-decoration: none; }
.story__title a:hover { text-decoration: underline; }
.story__blurb { margin: 0; font-size: .92rem; color: var(--ink-soft); }

/* --- The Guyana band ----------------------------------------------------- */
.news-band { background: var(--green-900); }
.news-band .section-title { color: #fff; }
.news-band .section-intro { color: rgba(255, 255, 255, .74); }
.news-band .news-note { color: rgba(255, 255, 255, .55); }
.news-card__source svg { opacity: .55; flex: none; }

/* --- Empty and no-match panels ------------------------------------------- */
.empty-note {
    padding: clamp(26px, 3vw, 40px);
    background: var(--paper);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg);
    color: var(--ink-soft);
    font-size: .95rem;
}
.empty-note[hidden] { display: none; }
.empty-note p { margin: 0 0 .6rem; }
.empty-note p:last-child { margin-bottom: 0; }
.empty-note--ondark {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .22);
    color: rgba(255, 255, 255, .8);
}
.empty-note--ondark b { color: #fff; }

@media (max-width: 940px) {
    .news-hero__inner { grid-template-columns: 1fr; }
    .news-hero__media { aspect-ratio: 16 / 10; }
    .news-search { max-width: none; }
    .story--lead { grid-column: auto; }
}

/* --- News page: the lead block ------------------------------------------- */

/* One tall story beside two wide ones, as in the design mock. */
.story-lead-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(18px, 2.2vw, 26px);
    margin-bottom: clamp(28px, 3.4vw, 44px);
}
.story-lead-grid[hidden] { display: none; }
.story-side {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: clamp(18px, 2.2vw, 26px);
    min-height: 0;
}

.story--hero { height: 100%; }
.story--hero .story__media { aspect-ratio: 16 / 10; }
.story--hero .story__body { padding: clamp(22px, 2.4vw, 30px); gap: .6rem; }
.story__title--hero {
    font-size: clamp(1.5rem, 2.4vw, 2.05rem);
    line-height: 1.12;
}
.story__cta { margin: .6rem 0 0; }

/* The two beside it lie on their side: picture left, words right. */
.story--side {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    align-items: stretch;
    min-height: 0;
}
.story--side .story__media { aspect-ratio: auto; height: 100%; }
.story--side .story__body { padding: 18px 20px; justify-content: center; }
.story--side .story__title { font-size: 1.06rem; }
.story--side .story__blurb { font-size: .88rem; }

@media (max-width: 940px) {
    .story-lead-grid { grid-template-columns: 1fr; }
    .story-side { grid-template-rows: auto auto; }
    .story--side { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}
@media (max-width: 560px) {
    .story--side { grid-template-columns: 1fr; }
    .story--side .story__media { aspect-ratio: 16 / 9; }
}

/* --- News page: "read the full story" and the reader ---------------------- */

.story__more {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    margin-top: auto;
    padding: .6em 0 0;
    border: 0;
    background: none;
    color: var(--green-700);
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.story__more svg { transition: transform var(--t-base) var(--ease); }
.story__more:hover svg,
.story:hover .story__more svg { transform: translateX(5px); }
.story__more:hover { color: var(--green-900); }

/* The reader itself: a column of text at a readable measure, over a scrim. */
.reader {
    width: min(760px, 92vw);
    max-width: 92vw;
    max-height: 88dvh;
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--paper);
    color: var(--ink);
    overflow: auto;
    overscroll-behavior: contain;
}
.reader::backdrop { background: rgba(6, 26, 18, .72); backdrop-filter: blur(3px); }
.reader[open] { animation: modal-in .28s var(--ease); }

.reader__close {
    position: sticky;
    top: 14px;
    left: 100%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    margin: 14px 14px -40px 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--paper);
    color: var(--green-900);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease);
}
.reader__close:hover { background: var(--cream-2); }

.reader__inner { padding: clamp(26px, 4vw, 46px); }
.reader__media {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius);
    margin-bottom: 1.6rem;
}
.reader__media[hidden] { display: none; }
.reader__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 .5rem;
    font-size: .76rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--green-700);
}
.reader__meta span:last-child { color: var(--ink-faint); font-weight: 500; letter-spacing: .02em; text-transform: none; }
.reader__title {
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    line-height: 1.1;
    margin: 0 0 1.2rem;
}
/* 65–75 characters is the readable measure; this is a page of prose. */
.reader__body { max-width: 68ch; }
.reader__body p { margin: 0 0 1.05em; }
.reader__body ul { margin: 0 0 1.05em; padding-left: 1.2em; }
.reader__body li { margin-bottom: .45em; }
.reader__body p:last-child, .reader__body ul:last-child { margin-bottom: 0; }


@media (prefers-reduced-motion: reduce) {
    .story__more:hover svg, .story:hover .story__more svg { transform: none; }
}

/* --- News page: the headline pager ---------------------------------------- */

/* Chips on the left, page arrows on the right, wrapping to two rows when
   there is not room for both. */
.news-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: clamp(24px, 3vw, 38px);
}
.news-bar .news-filters { margin-bottom: 0; }

.news-pager {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.news-pager[hidden] { display: none; }
.news-pager__btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, .86);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                opacity var(--t-fast) var(--ease);
}
.news-pager__btn:hover:not(:disabled) {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--green-900);
}
/* Kept visible rather than removed at the ends, so the row does not resize
   as you page and the arrows stay where the pointer expects them. */
.news-pager__btn:disabled { opacity: .3; cursor: default; }

.news-pager__count {
    min-width: 3.2em;
    text-align: center;
    font-size: .84rem;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, .7);
}

@media (max-width: 620px) {
    .news-bar { justify-content: flex-start; }
    .news-pager { margin-left: 0; }
}

/* ==========================================================================
   30. Swipe rows on mobile

   Card grids that stack into a tall column on a phone become a single
   horizontal row you flick through instead. Nine event cards stacked is a
   lot of scrolling past things you have already decided about; side by side
   they are three flicks.

   Built on scroll-snap rather than a script: the browser does the physics,
   it works with a thumb, a trackpad, a keyboard and a screen reader, and
   there is nothing to break if JavaScript fails.
   ========================================================================== */
@media (max-width: 720px) {
    .card-grid,
    .card-grid--3,
    .card-grid--4,
    .news-grid,
    .story-grid {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 78%;          /* the next card peeks, so it is
                                            obvious the row keeps going */
        grid-template-columns: none;
        gap: 14px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        /* Full-bleed: the row runs to both edges of the screen and the
           gutters become scroll padding, so the first card still lines up
           with the heading above it. */
        margin-inline: calc(50% - 50vw);
        padding-inline: max(20px, calc((100vw - var(--shell)) / 2));
        padding-bottom: 6px;
        scroll-padding-inline: max(20px, calc((100vw - var(--shell)) / 2));
        scrollbar-width: none;
    }
    .card-grid::-webkit-scrollbar,
    .news-grid::-webkit-scrollbar,
    .story-grid::-webkit-scrollbar { display: none; }

    .card-grid > *,
    .news-grid > *,
    .story-grid > * { scroll-snap-align: start; }

    /* The cards no longer set their own height against each other, so the
       row needs a common one or the snap points land at odd places. */
    .news-grid > * { align-self: stretch; }
}

/* A hint that the row moves, for anyone who has not tried to swipe it. */
@media (max-width: 720px) {
    .swipe-hint {
        display: flex;
        align-items: center;
        gap: 7px;
        margin: 10px 0 0;
        font-size: .78rem;
        color: var(--ink-faint);
    }
    .swipe-hint svg { animation: swipe-nudge 1.9s var(--ease) infinite; }
}
.swipe-hint { display: none; }
@keyframes swipe-nudge {
    0%, 100% { transform: translateX(0); opacity: .5; }
    50%      { transform: translateX(5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .swipe-hint svg { animation: none; }
}

/* ==========================================================================
   31. Culture page — QA pass
   ========================================================================== */

/* The tab images are photographed collages rather than framed prints, so
   they take a hard black edge and square corners instead of the soft
   rounded card treatment the rest of the site uses. */
.tabs__panel .split__media {
    border: 2px solid var(--flag-black);
    border-radius: 0;
    box-shadow: none;
}
.tabs__panel .split__media::after { border-radius: 0; border: 0; }
.tabs__panel .split__media img { border-radius: 0; }

/* Nine food names wrapped to four rows on a phone — 200px of chips before
   you reach the picture. Side by side they are one flick. */
@media (max-width: 720px) {
    .tabs__panel .chip-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        margin-inline: calc(50% - 50vw);
        padding-inline: max(20px, calc((100vw - var(--shell)) / 2));
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .tabs__panel .chip-row::-webkit-scrollbar { display: none; }
    .tabs__panel .chip { flex: none; scroll-snap-align: start; }
}

/* --------------------------------------------------------------------------
   The six ancestries

   Six chips for six peoples who arrived separately and ended up at one
   table. They land one after another rather than all at once, which is the
   whole point of the sentence above them, and lift under the pointer.
   -------------------------------------------------------------------------- */
.chip-row--peoples .chip {
    transition: transform var(--t-fast) var(--ease),
                background var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease);
}
.chip-row--peoples .chip:hover {
    transform: translateY(-3px);
    background: var(--gold-100);
    border-color: var(--gold);
    color: var(--green-900);
}

/* Held back until the block scrolls in, then dealt out left to right. */
.reveal .chip-row--peoples .chip { opacity: 0; }
.reveal.is-visible .chip-row--peoples .chip { animation: peoples-in .5s var(--ease) both; }
.reveal.is-visible .chip-row--peoples .chip:nth-child(1) { animation-delay: .05s; }
.reveal.is-visible .chip-row--peoples .chip:nth-child(2) { animation-delay: .13s; }
.reveal.is-visible .chip-row--peoples .chip:nth-child(3) { animation-delay: .21s; }
.reveal.is-visible .chip-row--peoples .chip:nth-child(4) { animation-delay: .29s; }
.reveal.is-visible .chip-row--peoples .chip:nth-child(5) { animation-delay: .37s; }
.reveal.is-visible .chip-row--peoples .chip:nth-child(6) { animation-delay: .45s; }

@keyframes peoples-in {
    from { opacity: 0; transform: translateY(10px) scale(.94); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .reveal .chip-row--peoples .chip { opacity: 1; }
    .reveal.is-visible .chip-row--peoples .chip { animation: none; }
    .chip-row--peoples .chip:hover { transform: none; }
}