/* =========================================================================
   ICMCER 2027 / EduResearch-2027 — design system
   -------------------------------------------------------------------------
   1.  Tokens
   2.  Base and reset adjustments
   3.  Typography
   4.  Layout: sections and rhythm
   5.  Decorative language (leaf geometry, hairlines, dots)
   6.  Buttons
   7.  Announcement bar and header
   8.  Hero
   9.  Statistics band
   10. About
   11. Important dates
   12. Speakers
   13. Sessions and tracks
   14. Why attend
   15. Registration packages
   16. Publication and partners
   17. Testimonials
   17f. Talk to us dialog
   18. FAQ accordion
   18a. FAQ topic cards
   18b. Submission band
   18c. Venue band
   19. Final CTA
   20b. Quick downloads offcanvas
   20. Footer
   21. Inner page furniture
   21b. Other services by IFERP
   21b1. Split page hero
   21b2. Centred page hero
   21c. Light page hero
   21d. Guidelines page
   21h. Registration pages
   21e. Session cards
   21f. One session, in full
   21f2. Submission FAQ
   21g. Mode of presentation
   21i. About page
   21j. Publication pages
   21c. Venue page
   22. Motion
   23. Responsive
   24. Call for volunteers
   25. Tentative agenda
   25. Contact us page
   26. Committee pages
   27. History
   28. Other services, on its own page
   29. Publication queries dialog
   30. About IFERP
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------- */

:root {
    /* Brand palette */
    --color-primary: #2F4F2F;      /* Palm Frond   — structure           */
    --color-secondary: #507C3A;    /* Palm Lawn    — secondary surfaces  */
    --color-accent: #F7B731;       /* Golden Sol   — attention only      */
    --color-background: #FBEED7;   /* Coconut Cream— dominant ground     */
    --color-info: #3FA9F5;         /* Tropical Sky — information accent  */

    --color-white: #FFFFFF;
    --color-text: #444444;
    --color-muted: #777777;
    --color-error: #D9534F;
    --color-light: #F7F9F7;

    /* Contrast-safe variants.
       White on #3FA9F5 is 2.56:1 and fails WCAG AA, so text-bearing sky
       surfaces use --color-info-deep (5.15:1 with white). The same logic
       applies to small text in Palm Lawn and to muted captions. */
    --color-primary-deep: #233B23;
    --color-night: #131F13;        /* hero ground, deeper than Palm Frond */
    --color-secondary-deep: #41682C;
    --color-info-deep: #1A72B0;
    --color-ink-soft: #6A6D66;     /* green-biased grey, 4.6:1 on cream  */
    --color-cream-deep: #F3E2C4;
    --color-hairline: rgba(47, 79, 47, .14);
    --color-hairline-light: rgba(251, 238, 215, .22);

    /* Elevation */
    --shadow-sm: 0 4px 15px rgba(47, 79, 47, .08);
    --shadow-md: 0 10px 30px rgba(47, 79, 47, .12);
    --shadow-lg: 0 20px 50px rgba(47, 79, 47, .16);

    /* Radii — the asymmetric "leaf" is the signature container shape */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-btn: 12px;
    --leaf: 28px 6px 28px 6px;
    --leaf-flip: 6px 28px 6px 28px;

    /* Type */
    --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
    --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

    --step-eyebrow: .78rem;
    --step-caption: .875rem;
    --step-body: clamp(1rem, .97rem + .14vw, 1.0625rem);
    --step-lede: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
    --step-h3: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
    --step-h2: clamp(1.875rem, 1.45rem + 1.6vw, 2.875rem);
    --step-h1: clamp(2.5rem, 1.6rem + 3.6vw, 5.5rem);

    /* Rhythm */
    --section-y: 100px;
    --gutter: 1.25rem;
    --container: 1320px;
    --top-offset: 126px;           /* announcement bar + header, both overlaid */

    /* Focus */
    --focus-ring: var(--color-secondary-deep);
}

/* -------------------------------------------------------------------------
   2. Base
   ---------------------------------------------------------------------- */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 108px;
}

body {
    margin: 0;
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--step-body);
    font-weight: 400;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; }

a { color: var(--color-secondary-deep); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--color-primary); }

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

.skip-link {
    position: absolute;
    left: 1rem;
    top: -100px;
    z-index: 2000;
    padding: .75rem 1.25rem;
    background: var(--color-accent);
    color: var(--color-primary);
    font-family: var(--font-display);
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: top .2s ease;
}
.skip-link:focus { top: 1rem; color: var(--color-primary); }

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

/* Scrollbars — slim, brand-coloured, and with the stepper arrows removed so
   the bar reads as a single continuous rail. */
* {
    scrollbar-width: thin;                                   /* Firefox */
    scrollbar-color: var(--color-secondary) var(--color-cream-deep);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--color-cream-deep);
}
::-webkit-scrollbar-thumb {
    background: var(--color-secondary);
    border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}
/* The up/down (and left/right) stepper buttons at each end. */
::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}
::-webkit-scrollbar-corner {
    background: var(--color-cream-deep);
}

/* Dark surfaces get a thumb that reads against them. */
.section--forest ::-webkit-scrollbar-track,
.hero ::-webkit-scrollbar-track,
.site-footer ::-webkit-scrollbar-track { background: rgba(251, 238, 215, .12); }
.section--forest ::-webkit-scrollbar-thumb,
.hero ::-webkit-scrollbar-thumb,
.site-footer ::-webkit-scrollbar-thumb { background: var(--color-accent); }

/* Wide content never pushes the page sideways. */
.scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* -------------------------------------------------------------------------
   3. Typography
   ---------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--color-primary);
    margin: 0;
    line-height: 1.14;
    letter-spacing: -.015em;
    text-wrap: balance;
}

h1 { font-weight: 700; font-size: var(--step-h1); }
h2 { font-weight: 600; font-size: var(--step-h2); }
h3 { font-weight: 600; font-size: var(--step-h3); line-height: 1.3; letter-spacing: -.005em; }

p { margin: 0; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    font-family: var(--font-body);
    font-size: var(--step-eyebrow);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-secondary-deep);
}
.eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--color-accent);
    flex: none;
}
.eyebrow--light { color: var(--color-accent); }
.eyebrow--light::before { background: var(--color-accent); }
.eyebrow--sky { color: var(--color-white); }
.eyebrow--sky::before { background: var(--color-white); }

.lede {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text);
    max-width: 62ch;
}

/* House style: reading prose is set at 16px and justified. Applied to blocks
   that actually run to several lines — justifying a short, centred or
   single-line string just opens rivers of white space in it. `hyphens` keeps
   the word spacing even at narrow measures. */
.lede,
.prose p,
.body-copy,
.vision__prose,
.info-card p,
.track-card p,
.service-card p,
.step-list p,
.agenda__row p,
.price-card__summary,
.speaker-card__org,
.review blockquote,
.accordion-icm .accordion-body {
    font-size: 16px;
    line-height: 1.7;
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* Below tablet the measure is too narrow to justify without opening rivers of
   white space between words, so prose falls back to ragged-right. */
@media (max-width: 767.98px) {
    .lede,
    .prose p,
    .body-copy,
    .vision__prose,
    .info-card p,
    .track-card p,
    .service-card p,
    .step-list p,
    .agenda__row p,
    .price-card__summary,
    .speaker-card__org,
    .review blockquote,
    .accordion-icm .accordion-body { text-align: left; }
}

.prose { max-width: 68ch; }
.prose p + p { margin-top: 1.1em; }

.caption {
    font-size: var(--step-caption);
    line-height: 1.55;
    color: var(--color-ink-soft);
}

.text-forest { color: var(--color-primary); }
.text-lawn { color: var(--color-secondary-deep); }
.text-cream { color: var(--color-background); }

/* An accent word inside a heading — hairline underline, never a gradient. */
/* NOT named .mark — Bootstrap already owns that class and would add its own
   highlight box (padding + #fff3cd), which paints over the previous line's
   descenders. The rule is drawn as a background gradient rather than an
   absolutely positioned bar so it survives the phrase wrapping onto two
   lines, which it does at narrow widths. */
.accent-word {
    color: var(--color-secondary);
    background-image: linear-gradient(var(--accent-rule, var(--color-accent)),
                                      var(--accent-rule, var(--color-accent)));
    background-repeat: no-repeat;
    background-size: 100% 3px;
    background-position: 0 100%;
    padding-bottom: .08em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.on-dark .accent-word,
.section--forest .accent-word {
    color: var(--color-accent);
    --accent-rule: rgba(247, 183, 49, .4);
}

/* Section headers -------------------------------------------------------- */

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem 3rem;
    margin-bottom: 3.5rem;
}
.section-head__main { max-width: 44ch; }
.section-head__aside {
    max-width: 34ch;
    font-size: var(--step-caption);
    color: var(--color-ink-soft);
    line-height: 1.6;
}
.on-dark .section-head__aside { color: rgba(251, 238, 215, .78); }
/* Centred variant. The default splits main-left / aside-right, which reads as
   a heading with a note pushed away from it; stacked and centred, the eyebrow,
   heading and standfirst read as one block introducing what follows. */
.section-head--centre {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
}
.section-head--centre .section-head__main  { max-width: 54ch; }
.section-head--centre .section-head__aside { max-width: 72ch; }

.text-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .95rem;
    color: var(--color-secondary-deep);
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 2px solid var(--color-accent);
    transition: gap .2s ease, color .2s ease;
}
.text-link:hover { gap: .875rem; color: var(--color-primary); }
.text-link--light { color: var(--color-background); }
.text-link--light:hover { color: var(--color-accent); }

/* -------------------------------------------------------------------------
   4. Layout: sections and rhythm
   ---------------------------------------------------------------------- */

.section {
    position: relative;
    padding-block: var(--section-y);
}
.section--tight { padding-block: calc(var(--section-y) * .68); }

.section--cream { background: var(--color-background); }
.section--white { background: var(--color-white); }
.section--mist  { background: var(--color-light); }
.section--forest {
    background: var(--color-primary);
    --focus-ring: var(--color-accent);
}

.on-dark { color: rgba(251, 238, 215, .84); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--color-white); }
.on-dark .lede { color: rgba(251, 238, 215, .88); }

/* -------------------------------------------------------------------------
   5. Decorative language
   ---------------------------------------------------------------------- */

.leaf { border-radius: var(--leaf); overflow: hidden; }
.leaf-flip { border-radius: var(--leaf-flip); overflow: hidden; }

/* Fine hairline field — a drafting-paper texture, not a gradient wash. */
.rule-field {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        90deg,
        var(--color-hairline) 0 1px,
        transparent 1px 96px
    );
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
    opacity: .5;
}
.rule-field--light {
    background-image: repeating-linear-gradient(
        90deg,
        var(--color-hairline-light) 0 1px,
        transparent 1px 96px
    );
}

/* Concentric arcs — the "growth ring" motif used behind hero and CTA. */
.arc-set {
    position: absolute;
    pointer-events: none;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid var(--color-hairline);
}
.arc-set::before,
.arc-set::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid currentColor;
    opacity: .35;
}
.arc-set::before { inset: 12%; }
.arc-set::after  { inset: 26%; }

.dot-accent {
    position: absolute;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--color-accent);
    pointer-events: none;
}
.dot-sky { background: var(--color-info); }

/* -------------------------------------------------------------------------
   6. Buttons
   ---------------------------------------------------------------------- */

.btn-icm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .875rem 1.6rem;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: .975rem;
    line-height: 1.2;
    letter-spacing: .005em;
    border: 1px solid transparent;
    border-radius: var(--radius-btn);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}
.btn-icm i { font-size: 1em; transition: transform .22s ease; }
.btn-icm:hover i { transform: translateX(2px); }
.btn-icm:active { transform: translateY(1px); }

.btn-icm--sm { padding: .625rem 1.15rem; font-size: .9rem; }
.btn-icm--lg { padding: 1.05rem 2rem; font-size: 1.0625rem; }
.btn-icm--block { width: 100%; }

/* Primary — Golden Sol. Reserved for the single most important action. */
.btn-gold {
    background: var(--color-accent);
    color: var(--color-primary);
    font-weight: 600;
}
.btn-gold:hover,
.btn-gold:focus-visible {
    background: var(--color-secondary);
    color: var(--color-white);
}

/* Secondary — Palm Lawn. */
.btn-leaf {
    background: var(--color-secondary);
    color: var(--color-white);
}
.btn-leaf:hover,
.btn-leaf:focus-visible {
    background: var(--color-primary);
    color: var(--color-white);
}

/* Ghost — on light grounds. */
.btn-ghost {
    background: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
    background: var(--color-primary);
    color: var(--color-white);
}

/* Ghost — on dark grounds. */
.btn-ghost-light {
    background: transparent;
    border-color: rgba(251, 238, 215, .55);
    color: var(--color-white);
}
.btn-ghost-light:hover,
.btn-ghost-light:focus-visible {
    background: var(--color-background);
    border-color: var(--color-background);
    color: var(--color-primary);
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: .875rem;
}
.btn-row--centre { justify-content: center; }

/* -------------------------------------------------------------------------
   7. Announcement bar and header
   ---------------------------------------------------------------------- */

/* The announcement bar and header ride over the hero. .site-top is taken out
   of flow so the hero image runs to the very top of the page; on scroll it is
   pinned, the announcement bar drops away, and the header goes solid. */
.site-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}
.site-top.is-stuck {
    position: fixed;
    animation: drop-in .28s ease-out;
}
.site-top.is-stuck .topbar { display: none; }

@keyframes drop-in {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

.topbar {
    background: rgba(19, 31, 19, .72);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(251, 238, 215, .12);
    color: rgba(251, 238, 215, .9);
    font-size: .8125rem;
    letter-spacing: .01em;
    --focus-ring: var(--color-accent);
}
.topbar__inner {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding-block: .375rem;
}
.topbar__rail { flex: 1 1 auto; min-width: 0; }
.topbar__track { display: flex; }
.topbar__group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
    flex: none;
}
/* The second copy only exists for the mobile loop. */
.topbar__group + .topbar__group { display: none; }
.topbar__lead { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.topbar__place { display: inline-flex; align-items: center; gap: .45rem; }
.topbar__meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.topbar a {
    color: rgba(251, 238, 215, .9);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
.topbar a:hover { color: var(--color-accent); }
.topbar__social { display: flex; gap: .9rem; font-size: .95rem; }

.pulse-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--color-accent);
    flex: none;
    box-shadow: 0 0 0 0 rgba(247, 183, 49, .6);
    animation: pulse 2.6s infinite;
}
@keyframes pulse {
    70%  { box-shadow: 0 0 0 8px rgba(247, 183, 49, 0); }
    100% { box-shadow: 0 0 0 0 rgba(247, 183, 49, 0); }
}

/* Header ---------------------------------------------------------------- */

/* Transparent over the hero; solid Palm Frond once .site-top pins. */
.site-header {
    background: transparent;
    --focus-ring: var(--color-accent);
    transition: box-shadow .3s ease, background-color .3s ease;
}
.site-top.is-stuck .site-header {
    box-shadow: 0 8px 28px rgba(19, 31, 19, .34);
    background: rgba(47, 79, 47, .97);
}
/* The frosting is scoped to desktop on purpose. A backdrop-filter makes
   its element a containing block for position:fixed descendants, and the
   slide-in panel lives inside this header — so below xl it would be
   trapped in a 70px-tall header instead of filling the viewport. The
   panel covers the header anyway, so nothing is lost. */
@media (min-width: 1200px) {
    .site-top.is-stuck .site-header {
        -webkit-backdrop-filter: saturate(1.2) blur(8px);
        backdrop-filter: saturate(1.2) blur(8px);
    }
}

.site-header .navbar { padding: 0; }

.nav-shell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    min-height: 84px;
    transition: min-height .3s ease;
}
.site-top.is-stuck .nav-shell { min-height: 68px; }

.brand {
    display: inline-flex;
    align-items: center;
    flex: none;
    padding-block: .5rem;
}
/* The mark is full-colour with dark navy and teal, drawn for a light ground,
   so it sits on a white plate over the dark header and hero. content-box
   keeps `height` referring to the artwork, with the padding added around it. */
.brand img {
    box-sizing: content-box;
    height: 52px;
    width: auto;
    display: block;
    padding: .4rem .7rem;
    background: var(--color-white);
    border-radius: var(--radius-md);
    transition: height .3s ease, padding .3s ease;
}
.site-top.is-stuck .brand img { height: 44px; padding: .3rem .6rem; }

.nav-menu {
    display: flex;
    align-items: center;
    gap: .125rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-menu > li { position: relative; }

.nav-link-icm {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .55rem .68rem;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: .875rem;
    color: rgba(251, 238, 215, .9);
    text-decoration: none;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: color .2s ease, background-color .2s ease;
}
.nav-link-icm:hover,
.nav-link-icm:focus-visible { color: var(--color-white); background: rgba(251, 238, 215, .08); }
.nav-link-icm .bi-chevron-down { font-size: .6rem; opacity: .7; transition: transform .2s ease; }

.nav-menu > li.is-active > .nav-link-icm { color: var(--color-accent); }
.nav-menu > li.is-active > .nav-link-icm::after {
    content: "";
    position: absolute;
    left: .68rem; right: .68rem;
    bottom: -2px;
    height: 2px;
    background: var(--color-accent);
    border-radius: 2px;
}

.nav-cta { flex: none; margin-left: .5rem; }

/* Dropdown -------------------------------------------------------------- */

.nav-drop {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 264px;
    padding: .5rem;
    margin: 0;
    list-style: none;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    --focus-ring: var(--color-secondary-deep);
}
.nav-menu > li:hover > .nav-drop,
.nav-menu > li:focus-within > .nav-drop,
.nav-drop.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav-menu > li:hover > .nav-link-icm .bi-chevron-down,
.nav-menu > li:focus-within > .nav-link-icm .bi-chevron-down { transform: rotate(180deg); }

.nav-drop a {
    display: block;
    padding: .55rem .75rem;
    font-size: .9rem;
    color: var(--color-primary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background-color .18s ease, color .18s ease;
}
/* Marks a menu entry that leaves the conference site. Pushed to the end of
   the row so it reads as a property of the link, not part of its label. */
.nav-drop__away {
    margin-left: auto;
    padding-left: .5rem;
    font-size: .7rem;
    opacity: .55;
}
a:hover > .nav-drop__away,
a:focus-visible > .nav-drop__away { opacity: 1; }

.nav-drop a:hover,
.nav-drop a:focus-visible { background: var(--color-background); color: var(--color-secondary-deep); }

/* Desktop mega panel ----------------------------------------------------
   Scoped to >=1200px so the mobile slide-in panel below is untouched. */
@media (min-width: 1200px) {
    .nav-drop {
        top: calc(100% + 14px);
        left: 50%;
        /* Wide enough that a two-line label and its supporting line do not
           both wrap - the panel carries descriptions now, not bare labels. */
        min-width: 380px;
        padding: .875rem;
        border-radius: var(--radius-xl);
        transform: translateX(-50%) translateY(-8px);
    }
    .nav-menu > li:hover > .nav-drop,
    .nav-menu > li:focus-within > .nav-drop,
    .nav-drop.is-open { transform: translateX(-50%) translateY(0); }

    /* Five or more entries split into two columns. */
    .nav-drop--wide {
        display: grid;
        grid-template-columns: repeat(2, minmax(232px, 1fr));
        gap: .1rem .35rem;
        min-width: 520px;
    }

    /* The last nav item anchors right so a wide panel stays on screen. */
    .nav-drop--end { left: auto; right: 0; transform: translateY(-8px); }
    .nav-menu > li:hover > .nav-drop--end,
    .nav-menu > li:focus-within > .nav-drop--end,
    .nav-drop--end.is-open { transform: translateY(0); }

    /* Caret pointing back at the parent item. */
    .nav-drop::before {
        content: "";
        position: absolute;
        top: -7px;
        left: 50%;
        width: 14px;
        height: 14px;
        margin-left: -7px;
        background: var(--color-white);
        border-left: 1px solid var(--color-hairline);
        border-top: 1px solid var(--color-hairline);
        border-radius: 4px 0 0 0;
        transform: rotate(45deg);
    }
    .nav-drop--end::before { left: auto; right: 2.5rem; margin-left: 0; }

    /* Invisible bridge across the 14px gap, so the panel does not close
       while the pointer travels from the parent down into it. */
    .nav-drop::after {
        content: "";
        position: absolute;
        top: -18px;
        left: 0;
        right: 0;
        height: 18px;
    }

    .nav-drop a {
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .6rem .7rem;
        border-radius: var(--radius-md);
        font-weight: 500;
        line-height: 1.3;
    }
    .nav-drop a i {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        flex: none;
        background: var(--color-background);
        border-radius: var(--radius-sm);
        color: var(--color-secondary-deep);
        font-size: 1rem;
        transition: background-color .2s ease, color .2s ease;
    }
    .nav-drop a:hover i,
    .nav-drop a:focus-visible i {
        background: var(--color-primary);
        color: var(--color-accent);
    }
    .nav-drop a[aria-current="page"] { background: var(--color-background); }
    .nav-drop a[aria-current="page"] i { background: var(--color-primary); color: var(--color-accent); }
}

/* Mobile keeps the plain text list it already had. */
/* The nav panel is a plain flex row on desktop and a slide-in sheet below xl
   (see the 1199.98px breakpoint). */
.nav-panel {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.nav-sub-toggle {
    display: none;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    flex: none;
    background: transparent;
    border: 1px solid rgba(251, 238, 215, .2);
    border-radius: var(--radius-sm);
    color: rgba(251, 238, 215, .85);
    font-size: .8rem;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}
.nav-sub-toggle:hover { background: rgba(251, 238, 215, .1); }
.nav-sub-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.nav-sub-toggle i { transition: transform .2s ease; }

/* Mobile panel ---------------------------------------------------------- */

.nav-toggle {
    display: none;
    width: 46px; height: 46px;
    align-items: center;
    justify-content: center;
    background: rgba(251, 238, 215, .1);
    border: 1px solid rgba(251, 238, 215, .22);
    border-radius: var(--radius-sm);
    color: var(--color-background);
    font-size: 1.35rem;
    cursor: pointer;
}
/* Scoped to buttons that actually carry the state, so the panel's own close
   button (no aria-expanded) keeps showing its X. */
.nav-toggle[aria-expanded="true"] .bi-list { display: none; }
.nav-toggle[aria-expanded="false"] .bi-x-lg { display: none; }

/* -------------------------------------------------------------------------
   8. Hero — a dark, immersive opening built on the host-city panorama
   ---------------------------------------------------------------------- */

.hero {
    position: relative;
    isolation: isolate;
    background: var(--color-night);
    color: rgba(251, 238, 215, .82);
    padding-top: calc(var(--top-offset) + clamp(1.5rem, 3vw, 3rem));
    padding-bottom: clamp(2.5rem, 2rem + 3vw, 4rem);
    overflow: hidden;
    --focus-ring: var(--color-accent);
}

/* Ground: a deep forest wash under a faint circuit-dot field. */
.hero__ground {
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(47, 79, 47, .85) 0%, transparent 62%),
        radial-gradient(80% 60% at 85% 18%, rgba(26, 114, 176, .22) 0%, transparent 70%),
        var(--color-night);
}
.hero__ground::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(251, 238, 215, .16) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(90% 70% at 50% 30%, #000 0%, transparent 75%);
    mask-image: radial-gradient(90% 70% at 50% 30%, #000 0%, transparent 75%);
    opacity: .5;
}

/* The host city, full bleed behind the whole hero and faded back so type
   stays legible. The mask only softens the very top and bottom edges, so the
   picture meets the header and the at-a-glance rail without a hard seam. */
.hero__people {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 90%, transparent 100%);
    opacity: .5;
}
.hero__people img {
    width: 100%;
    height: 100%;
    /* A 1.74:1 photograph in a taller box, so cover crops the sides; centring
       keeps the subject in frame. */
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* Scrim between the crowd and the type. Sits above .hero__people (-2) and
   below the content, so the headline always clears 7:1 against the ground. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(62% 46% at 50% 32%, rgba(19, 31, 19, .88) 0%, rgba(19, 31, 19, .55) 58%, rgba(19, 31, 19, .28) 100%),
        /* Clear at the top so the skyline reads, then darkening from a third of
           the way down — the buttons and the theme chip sit in that band — and
           the last stop lands on the ground colour itself, so the hero closes
           on a solid edge rather than a cut-off photograph. The headline keeps
           its own backing from the radial above this layer. */
        linear-gradient(180deg,
            rgba(19, 31, 19, 0) 0%,
            rgba(19, 31, 19, 0) 34%,
            rgba(19, 31, 19, .68) 84%,
            var(--color-night) 100%);
}

.hero__arcs {
    position: absolute;
    top: -12%;
    right: -10%;
    z-index: -1;
    width: min(620px, 58vw);
    color: var(--color-accent);
    border-color: rgba(247, 183, 49, .2);
    opacity: .45;
}

/* Centre stack ---------------------------------------------------------- */

.hero__content {
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.hero__title {
    font-size: var(--step-h1);
    line-height: 1.03;
    letter-spacing: -.03em;
    color: var(--color-white);
    max-width: 17ch;
    margin-bottom: .875rem;
}
.hero__title em {
    display: block;
    font-style: normal;
    color: var(--color-accent);
}

/* The brand lockup: one line, two tones, larger than the sentence-style
   title it replaced. The year is the accent half — it is what changes from
   one edition to the next. */
.hero__title--brand {
    max-width: none;
    margin-bottom: .5rem;
    font-size: clamp(2.75rem, 8vw, 5.5rem);
    letter-spacing: -.035em;
}
.hero__title--brand span { color: var(--color-white); }
.hero__title--brand em {
    display: inline;          /* overrides the stacked treatment above */
    color: var(--color-accent);
}

.hero__fullname {
    max-width: 46ch;
    margin: 0 auto;
    font-size: clamp(.95rem, 1.6vw, 1.125rem);
    line-height: 1.5;
    font-weight: 500;
    color: rgba(251, 238, 215, .9);
}

.hero__code {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1rem, .9rem + .4vw, 1.25rem);
    color: rgba(251, 238, 215, .82);
}

.hero__theme-chip {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding: .875rem 1.5rem .875rem .875rem;
    max-width: 58ch;
    text-align: left;
    background: rgba(19, 31, 19, .68);
    border: 1px solid rgba(247, 183, 49, .34);
    border-radius: 999px;
    backdrop-filter: blur(6px);
}
.hero__theme-chip i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: none;
    background: var(--color-accent);
    border-radius: 50%;
    color: var(--color-primary);
    font-size: 1.25rem;
}
.hero__theme-chip small {
    display: block;
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: .1rem;
}
.hero__theme-chip span {
    font-size: .9375rem;
    line-height: 1.45;
    color: var(--color-white);
    font-weight: 500;
}

/* Date · place · format, set on one rule-separated line. Wraps to stacked
   rows on narrow screens, where the separators would otherwise dangle. */
.hero__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .5rem 1.5rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--color-background);
}
.hero__meta li {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
.hero__meta li + li::before {
    content: '';
    position: absolute;
    left: -.75rem;
    width: 1px;
    height: 1.1em;
    background: rgba(251, 238, 215, .35);
}
.hero__meta i { font-size: 1rem; color: var(--color-accent); }


@media (max-width: 575.98px) {
    .hero__meta { flex-direction: column; gap: .45rem; }
    .hero__meta li + li::before { display: none; }
}

.hero__actions { margin-top: 2.25rem; justify-content: center; }

/* Who runs it, under the two calls to action. Quiet by design - it is
   attribution, not another thing to click. */
.hero__organiser {
    margin: 1.5rem 0 0;
    text-align: center;
    line-height: 1.35;
}
.hero__organiser small {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(251, 238, 215, .62);
}
.hero__organiser b {
    display: block;
    margin-top: .2rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-background);
}

/* Fact strip — one rail, colour-coded cells ----------------------------- */

.fact-strip {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.55fr);
    margin-top: clamp(2.5rem, 4vw, 4rem);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.fact-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1.5rem 1rem;
    text-align: center;
}
.fact-cell i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    font-size: 1.15rem;
}
/* Label on its own line, value beneath it — the same two-row shape in
   every cell. Without this the span and strong run together inline. */
.fact-cell > div {
    display: flex;
    flex-direction: column;
    align-items: inherit;
    gap: .2rem;
}
.fact-cell span {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .88;
}
.fact-cell strong {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.25;
}

.fact-cell--gold   { background: var(--color-accent);    color: var(--color-primary); }
.fact-cell--lawn   { background: var(--color-secondary); color: var(--color-white); }
.fact-cell--forest { background: var(--color-primary);   color: var(--color-white); }
.fact-cell--sky    { background: var(--color-info-deep); color: var(--color-white); }
.fact-cell--gold i { background: rgba(47, 79, 47, .16); }

.fact-brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .35rem;
    padding: 1.5rem 1.75rem;
    background: var(--color-primary-deep);
    text-align: left;
}
.fact-brand b {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--color-accent);
    letter-spacing: -.01em;
}
.fact-brand p {
    font-size: .8125rem;
    line-height: 1.5;
    color: rgba(251, 238, 215, .82);
}
.fact-brand em {
    font-style: normal;
    color: var(--color-white);
    font-weight: 500;
}

/* Pillars --------------------------------------------------------------- */

.hero__pillars {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem 2rem;
    list-style: none;
    margin: clamp(2rem, 3vw, 3rem) 0 0;
    padding: 0;
}
.pillar {
    display: flex;
    gap: .875rem;
    align-items: flex-start;
    text-align: left;
}
.pillar i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    border: 1px solid rgba(247, 183, 49, .38);
    border-radius: var(--radius-md);
    color: var(--color-accent);
    font-size: 1.15rem;
}
.pillar b {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .9375rem;
    color: var(--color-white);
    margin-bottom: .15rem;
}
.pillar p {
    font-size: .8125rem;
    line-height: 1.5;
    color: rgba(251, 238, 215, .74);
}

/* Indexing note --------------------------------------------------------- */

.hero__note {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-top: clamp(2rem, 3vw, 2.75rem);
    padding: 1rem 1.25rem;
    background: rgba(26, 114, 176, .2);
    border-left: 3px solid var(--color-info);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: .875rem;
    line-height: 1.6;
    color: rgba(251, 238, 215, .88);
}
.hero__note i { color: var(--color-info); font-size: 1.05rem; margin-top: .1rem; flex: none; }

/* Ghost button tuned for the gold-on-night hero. */
.btn-ghost-gold {
    background: transparent;
    border-color: rgba(247, 183, 49, .6);
    color: var(--color-accent);
}
.btn-ghost-gold:hover,
.btn-ghost-gold:focus-visible {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary);
}
/* -------------------------------------------------------------------------
   8b. Indexing databases — the credibility proof, straight under the hero
   ---------------------------------------------------------------------- */

.indexing__title {
    text-align: center;
    margin-bottom: 2.5rem;
}

/* Equal columns, so `width: 100%` on each logo resolves against a real track
   and every mark lands on the same optical baseline. */
.indexing__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .7rem;
    max-width: 700px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

/* A small inset on every tile. Without it a full-bleed mark like the SJR
   block lands exactly on the hairline border on all four sides and reads as
   an overflow bug, while the marks that carry their own whitespace sit fine.
   The inset is the smallest that keeps the set consistent. */
.index-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .45rem .5rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.index-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(80, 124, 58, .45);
    box-shadow: var(--shadow-sm);
}
/* Height is normalised, width is capped. Without the cap the two wide
   wordmarks (DOAJ, Scopus) stretch the full tile while the compact marks sit
   at 95-110px, and the row reads ragged. The cap gives every logo a margin
   inside its tile and keeps the set to one optical weight. */
.index-tile img {
    width: 100%;
    max-width: 104px;
    height: 42px;
    object-fit: contain;
    margin-inline: auto;
    display: block;
}

.indexing__note {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    max-width: 940px;
    margin: 2.75rem auto 0;
    padding: 1.25rem 1.6rem;
    background: rgba(63, 169, 245, .1);
    border: 1px solid rgba(26, 114, 176, .28);
    border-radius: var(--radius-lg);
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--color-text);
}
.indexing__note-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: none;
    background: var(--color-primary);
    border-radius: var(--radius-md);
    color: var(--color-accent);
    font-size: 1.35rem;
}
.indexing__note b { color: var(--color-primary); font-weight: 600; }
.indexing__note em {
    font-style: normal;
    font-size: .8125rem;
    color: var(--color-ink-soft);
}

@media (max-width: 991.98px) {
    .indexing__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 470px; }
}
@media (max-width: 575.98px) {
    .indexing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; max-width: 320px; }
    .index-tile img { height: 38px; max-width: 96px; }
    .indexing__note { flex-direction: column; align-items: flex-start; gap: .875rem; }
}

/* -------------------------------------------------------------------------
   8c. Welcome / About / Purpose — a split panel, light copy against a dark
       media half. Three tabs swap the copy without moving the composition.
   ---------------------------------------------------------------------- */

.vision {
    position: relative;
    scroll-margin-top: 140px;
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
/* Offset hairline frame — a drafting-overlay motif, not a drop shadow. */
.vision::before {
    content: "";
    position: absolute;
    inset: -14px 14px 14px -14px;
    border: 2px solid rgba(80, 124, 58, .32);
    border-radius: var(--radius-xl);
    z-index: -1;
    pointer-events: none;
}

/* Copy half ------------------------------------------------------------- */

.vision__main {
    position: relative;
    padding: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
}
/* Faint dot field in the top-left corner, masked well clear of the text. */
.vision__main::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background-image: radial-gradient(rgba(47, 79, 47, .15) 1.5px, transparent 1.5px);
    background-size: 16px 16px;
    -webkit-mask-image: radial-gradient(circle at 0 0, #000, transparent 70%);
    mask-image: radial-gradient(circle at 0 0, #000, transparent 70%);
    pointer-events: none;
}
.vision__main > * { position: relative; z-index: 1; }

/* Segmented control ----------------------------------------------------- */

.vision__tablist {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin: 0 0 2rem;
    padding: .3rem;
    list-style: none;
    background: var(--color-background);
    border-radius: 999px;
}
.vision__tab {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1.1rem;
    background: transparent;
    border: 0;
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .8125rem;
    color: var(--color-secondary-deep);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .22s ease, color .22s ease;
}
.vision__tab i { font-size: .78em; opacity: 0; transition: opacity .22s ease; }
.vision__tab:hover { color: var(--color-primary); }
.vision__tab.active {
    background: var(--color-primary);
    color: var(--color-accent);
    box-shadow: var(--shadow-sm);
}
.vision__tab.active i { opacity: 1; }

/* Copy ------------------------------------------------------------------ */

.vision__heading {
    font-size: clamp(1.875rem, 1.4rem + 1.8vw, 2.875rem);
    line-height: 1.08;
    margin: .875rem 0 1.25rem;
}
.vision__heading .accent-word { display: inline-block; }

.vision__prose {
    max-width: 58ch;
    color: var(--color-text);
}

.vision__points {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.vision__points li {
    display: flex;
    gap: .75rem;
    align-items: center;
    padding: .7rem .95rem;
    background: var(--color-background);
    border-left: 3px solid var(--color-accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: .9375rem;
    line-height: 1.45;
}
.vision__points i {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: none;
    background: var(--color-secondary);
    border-radius: 50%;
    color: var(--color-white);
    font-size: .72rem;
}

/* The load-bearing facts, restated as figures. */
.vision__facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 1.75rem 0 0;
    background: rgba(251, 238, 215, .2);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.vision__facts > div {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.05rem .7rem .95rem;
    background: var(--color-primary);
    text-align: center;
    transition: background-color .25s ease;
}
.vision__facts > div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 28px;
    height: 3px;
    background: var(--color-accent);
    border-radius: 0 0 3px 3px;
    transform: translateX(-50%);
}
.vision__facts > div:hover { background: var(--color-secondary-deep); }
.vision__facts dt {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.2;
    color: var(--color-white);
    font-variant-numeric: tabular-nums;
    text-wrap: balance;
}
.vision__facts dd {
    margin: .3rem 0 0;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.vision__actions { margin-top: 1.75rem; align-items: center; }
.vision__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: none;
    background: var(--color-primary);
    border-radius: 50%;
    color: var(--color-accent);
    font-size: 1.1rem;
    text-decoration: none;
    transition: background-color .22s ease, transform .22s ease;
}
.vision__arrow:hover {
    background: var(--color-secondary);
    color: var(--color-white);
    transform: rotate(45deg);
}

/* Media half ------------------------------------------------------------ */

.vision__aside {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
    background: var(--color-primary);
    --focus-ring: var(--color-accent);
}
.vision__aside::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        90deg,
        rgba(251, 238, 215, .16) 0 1px,
        transparent 1px 72px
    );
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
    pointer-events: none;
}

/* Pinwheel mosaic: two tall frames on opposite corners, two short ones filling
   the gaps. All four meet at the centre, which is where the seal sits. */
.vision__media {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, clamp(112px, 11.5vw, 178px));
    grid-template-areas:
        "a b"
        "a c"
        "d c";
    gap: .875rem;
}
.vision__shot {
    margin: 0;
    overflow: hidden;
    border: 3px solid rgba(251, 238, 215, .9);
}
.vision__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.vision__shot:hover img { transform: scale(1.06); }

.vision__shot--a { grid-area: a; border-radius: var(--leaf); }
.vision__shot--b { grid-area: b; border-radius: var(--leaf-flip); }
.vision__shot--c { grid-area: c; border-radius: var(--leaf); }
.vision__shot--d { grid-area: d; border-radius: var(--leaf-flip); }

/* Rotating seal, centred on the seam between the four frames. */
.vision__seal {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 132px;
    height: 132px;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    background: var(--color-accent);
    border: 6px solid var(--color-primary);
    border-radius: 50%;
    text-decoration: none;
    box-shadow: var(--shadow-lg);
    z-index: 3;
}
.vision__seal svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: seal-spin 20s linear infinite;
}
.vision__seal text {
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .2em;
    fill: var(--color-primary);
    text-transform: uppercase;
}
.vision__seal-arrow {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    background: var(--color-white);
    border-radius: 50%;
    color: var(--color-primary);
    font-size: 1.2rem;
    transition: transform .25s ease;
}
.vision__seal:hover .vision__seal-arrow { transform: rotate(45deg); }

@keyframes seal-spin { to { transform: rotate(360deg); } }

/* The 17 Global Goals, scrolling under the collage. The track holds two
   identical passes and travels exactly -50%, so the loop is seamless. */

/* ---- indexing marks, heading the welcome panel's green aside ----
   Mirrors .sdg-marquee at the foot of the same panel: a gold label, then the
   content, separated from the collage by the same hairline. The rule sits
   below rather than above, because this block opens the panel. */

.vision__indexing {
    position: relative;
    z-index: 1;
    margin-bottom: 1.75rem;
    padding-bottom: 1.35rem;
    border-bottom: 1px solid rgba(251, 238, 215, .22);
}
.vision__indexing-label {
    margin-bottom: .875rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* Five equal tracks, so every mark resolves against the same width and lands
   on one optical baseline — the same reasoning as the old .indexing__grid. */
.vision__indexing-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.vision__indexing-row li {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .4rem .45rem;
    background: var(--color-white);
    border-radius: var(--radius-sm);
    transition: transform .25s ease, box-shadow .25s ease;
}
.vision__indexing-row li:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
}
.vision__indexing-row img {
    width: 100%;
    height: auto;
    display: block;
}
/* Partners without artwork fall back to a wordmark, as elsewhere. */
.vision__indexing-row b {
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    color: var(--color-primary);
}

.vision__indexing-note {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: .9rem 0 0;
    font-size: .78rem;
    line-height: 1.6;
    color: rgba(251, 238, 215, .82);
}
.vision__indexing-note i {
    flex: none;
    margin-top: .12rem;
    font-size: .9rem;
    color: var(--color-accent);
}
.vision__indexing-note b { color: var(--color-white); font-weight: 600; }
.vision__indexing-note em { font-style: normal; color: var(--color-accent); }

@media (max-width: 575.98px) {
    /* Five marks across a phone leaves each one unreadable. */
    .vision__indexing-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
}

.sdg-marquee {
    position: relative;
    z-index: 1;
    margin-top: 1.75rem;
    padding-top: 1.35rem;
    border-top: 1px solid rgba(251, 238, 215, .22);
}
.sdg-marquee__label {
    margin-bottom: .875rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-accent);
    text-align: left;
}
.sdg-marquee__window {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.sdg-marquee__track {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: sdg-scroll 48s linear infinite;
}
.sdg-marquee:hover .sdg-marquee__track,
.sdg-marquee:focus-within .sdg-marquee__track { animation-play-state: paused; }
.sdg-marquee__track li { flex: none; }
.sdg-marquee__track img {
    display: block;
    width: 62px;
    height: 62px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 1px rgba(251, 238, 215, .2);
}

@keyframes sdg-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - .3125rem)); }
}

@media (prefers-reduced-motion: reduce) {
    .topbar__track { animation: none; }
    .topbar__rail { overflow-x: auto; }
    .sdg-marquee__track { animation: none; }
    .sdg-marquee__window { overflow-x: auto; }
}

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

@media (max-width: 991.98px) {
    .vision { grid-template-columns: minmax(0, 1fr); }
    .vision::before { inset: -10px 10px 10px -10px; }
    .vision__media { max-width: 520px; margin-inline: auto; }
    .sdg-marquee__label { text-align: center; }
}

@media (max-width: 575.98px) {
    .vision__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vision__tablist { display: flex; width: 100%; border-radius: var(--radius-md); }
    .vision__tab { flex: 1 1 auto; justify-content: center; font-size: .75rem; padding: .5rem .75rem; }
    .vision__seal { width: 100px; height: 100px; border-width: 5px; }
    .vision__seal text { font-size: 10px; letter-spacing: .14em; }
    .vision__seal-arrow { width: 44px; height: 44px; font-size: 1rem; }
}

/* -------------------------------------------------------------------------
   9. Statistics band
   ---------------------------------------------------------------------- */

.stats {
    background: var(--color-info-deep);
    padding-block: 3.25rem;
    --focus-ring: var(--color-white);
}
.stats__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, .22);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.stat {
    background: var(--color-info-deep);
    padding: 1.5rem 1.25rem;
    text-align: center;
}
.stat__value {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
    line-height: 1;
    color: var(--color-white);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.stat__label {
    display: block;
    margin-top: .625rem;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--color-background);
    line-height: 1.4;
}

/* -------------------------------------------------------------------------
   10. About
   ---------------------------------------------------------------------- */

.about__grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}
.about__media { position: relative; }
.about__media img {
    width: 100%;
    aspect-ratio: 5 / 6;
    object-fit: cover;
    border-radius: var(--leaf-flip);
    display: block;
}
.about__stamp {
    position: absolute;
    right: -1rem;
    bottom: -1.25rem;
    width: 168px;
    padding: 1.25rem;
    background: var(--color-primary);
    color: var(--color-background);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.about__stamp i { color: var(--color-accent); font-size: 1.4rem; }
.about__stamp b {
    display: block;
    margin-top: .5rem;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    color: var(--color-white);
    line-height: 1.25;
}
.about__stamp small { font-size: .75rem; color: rgba(251, 238, 215, .78); }

.pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
}
.pill-list li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .9rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 500;
    color: var(--color-secondary-deep);
}
.pill-list i { color: var(--color-accent); }

/* -------------------------------------------------------------------------
   11. Important dates — a deadline timeline
   ---------------------------------------------------------------------- */

/* A dark chapter between the mist above and the forest band below. Night is
   two steps darker than Palm Frond, so the two dark sections still read as
   separate rooms rather than one long stretch. */
.section--night {
    position: relative;
    isolation: isolate;
    background: var(--color-night);
    color: rgba(251, 238, 215, .82);
    --focus-ring: var(--color-accent);
}
.section--night h2,
.section--night h3 { color: var(--color-white); }
/* Palm Lawn is the accent on light grounds, but on Night it only reaches
   3.5:1 — legal for large text and visually weak. Golden Sol reads 9.6:1
   there, so the dark rooms take the gold. */
.section--night .accent-word { color: var(--color-accent); }

/* The dot field the hero already speaks, faded out at the edges so it never
   competes with the cards. */
.dates__field {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(251, 238, 215, .14) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 0%, transparent 78%);
    mask-image: radial-gradient(80% 70% at 50% 40%, #000 0%, transparent 78%);
    opacity: .6;
}

.dates__head {
    max-width: 46rem;
    margin: 0 auto 4.5rem;
    text-align: center;
}
/* Rules that run out from the title and stop on a dot, rather than a plain
   underline — it is a timeline heading, so it points sideways. */
.dates__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin: 0;
    font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.35rem);
    letter-spacing: -.01em;
}
.dates__rule {
    flex: 0 1 116px;
    position: relative;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-accent));
}
.dates__rule--right { background: linear-gradient(90deg, var(--color-accent), transparent); }
.dates__rule::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-accent);
    transform: translateY(-50%);
}
.dates__rule--left::after { right: -2px; }
.dates__rule--right::after { left: -2px; }

.dates__lead {
    margin: 1.15rem auto 0;
    max-width: 56ch;
    font-size: 16px;
    line-height: 1.75;
    color: rgba(251, 238, 215, .74);
}

/* ---- the track ---- */

.dates__track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;   /* the step number is drawn on the card */
}

.milestone {
    position: relative;
    padding-top: 34px;   /* the disc straddles the card's top edge */
}
.milestone__disc {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--color-night);
    border: 2px solid var(--color-accent);
    color: var(--color-accent);
    font-size: 1.5rem;
    transform: translateX(-50%);
    transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

.milestone__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .9rem;
    height: 100%;
    /* The foot is left clear for the number sitting in the corner. */
    padding: 3rem 1.4rem 2.75rem;
    background: rgba(251, 238, 215, .05);
    border: 1px solid rgba(251, 238, 215, .16);
    border-radius: var(--radius-lg);
    transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.milestone:hover .milestone__card {
    transform: translateY(-5px);
    background: rgba(251, 238, 215, .09);
    border-color: rgba(247, 183, 49, .5);
}
.milestone:hover .milestone__disc {
    background: var(--color-accent);
    color: var(--color-primary-deep);
    transform: translateX(-50%) translateY(-3px);
}

/* The step number reads as a watermark in the corner rather than as a
   label on the title: the order is already carried by the row of discs
   and by the list itself, so this is decoration and is hidden from
   assistive tech. */
.milestone__num {
    position: absolute;
    right: 1.05rem;
    bottom: .45rem;
    font-family: var(--font-display);
    font-size: 2.35rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    color: rgba(251, 238, 215, .17);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
.milestone__tail { display: block; }
.milestone__card h3 {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.35;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.milestone__when {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    width: 100%;
    margin: 0;
    padding-top: .9rem;
    border-top: 1px solid rgba(251, 238, 215, .16);
    font-size: .9375rem;
    color: rgba(251, 238, 215, .88);
}
.milestone__when i { color: var(--color-accent); font-size: 1rem; }

/* The countdown, on the one deadline with a rate attached to it. */
.milestone__timer {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: auto 0 0;
    padding: .38rem .7rem;
    background: rgba(247, 183, 49, .16);
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
}
.milestone__timer--past {
    background: rgba(251, 238, 215, .1);
    color: rgba(251, 238, 215, .7);
}

/* The first deadline to fall gets the filled disc and a lit card. */
.milestone--lit .milestone__disc {
    background: var(--color-accent);
    color: var(--color-primary-deep);
}
.milestone--lit .milestone__card {
    background: rgba(247, 183, 49, .1);
    border-color: rgba(247, 183, 49, .45);
}
.milestone--lit .milestone__num { color: rgba(247, 183, 49, .28); }

@media (max-width: 991.98px) {
    .dates__track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
    .dates__head { margin-bottom: 3.5rem; }
}

@media (max-width: 575.98px) {
    .dates__track { grid-template-columns: minmax(0, 1fr); }
    .dates__title { gap: .75rem; font-size: 1.5rem; }
    .dates__rule { flex-basis: 48px; }
    .milestone__disc { width: 58px; height: 58px; font-size: 1.25rem; }
    .milestone { padding-top: 29px; }
    .milestone__card { padding: 2.5rem 1.2rem 1.35rem; }
}
/* -------------------------------------------------------------------------
   12. Speakers
   ---------------------------------------------------------------------- */

.speakers__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
}
.speaker-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .28s ease, box-shadow .28s ease;
}
.speaker-card:hover,
.speaker-card:focus-within {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}
.speaker-card__media {
    position: relative;
    aspect-ratio: 4 / 3.4;
    overflow: hidden;
}
.speaker-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.speaker-card:hover .speaker-card__media img { transform: scale(1.04); }
.speaker-card__tag {
    position: absolute;
    left: .875rem; top: .875rem;
    padding: .3rem .7rem;
    background: var(--color-primary);
    color: var(--color-accent);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.speaker-card__body {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1.35rem 1.35rem 1.5rem;
    flex: 1;
}
.speaker-card__body h3 { font-size: 1.125rem; }
.speaker-card__role { font-size: .875rem; font-weight: 600; color: var(--color-secondary-deep); }
.speaker-card__org { font-size: .85rem; color: var(--color-ink-soft); line-height: 1.5; }
.speaker-card__cta { margin-top: auto; padding-top: 1.1rem; }

.tba-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .28rem .65rem;
    background: rgba(63, 169, 245, .14);
    color: var(--color-info-deep);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    width: max-content;
}

/* -------------------------------------------------------------------------
   13. Sessions and tracks
   ---------------------------------------------------------------------- */

.tracks__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}
.track-card {
    display: flex;
    flex-direction: column;
    gap: .875rem;
    padding: 1.75rem;
    background: var(--color-secondary);
    border: 1px solid rgba(251, 238, 215, .14);
    border-radius: var(--leaf);
    color: rgba(251, 238, 215, .86);
    text-decoration: none;
    transition: transform .25s ease, background-color .25s ease, border-color .25s ease;
}
.track-card:hover,
.track-card:focus-visible {
    transform: translateY(-6px);
    background: var(--color-secondary-deep);
    border-color: var(--color-accent);
    color: rgba(251, 238, 215, .95);
}
.track-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.track-card__num {
    font-family: var(--font-display);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .14em;
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
}
.track-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    background: rgba(247, 183, 49, .16);
    border-radius: var(--radius-md);
    color: var(--color-accent);
    font-size: 1.25rem;
    flex: none;
}
.track-card h3 { color: var(--color-white); font-size: 1.1875rem; }
.track-card p { font-size: .9rem; line-height: 1.6; }

/* ---- the homepage SDG band ----
   One track per view, with the arrows sitting on the edges rather than
   underneath. Each card splits in two: a dark aside carrying the identity
   (number, icon, title, mapped goals) and a light body carrying the focus
   areas and expected outcome. Deliberately unlike the Call for Papers grid
   below, which lists the same ten sessions as compact cards. */

.sdgband { overflow: hidden; }

/* Centred head: the paragraph introduces the whole band rather than sitting
   off to one side of the title. */
.sdgband .section-head {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
    max-width: 60rem;
    margin: 0 auto 2.75rem;
}
.sdgband .section-head__main { max-width: none; }
.sdgband .section-head .eyebrow::before { display: none; }   /* centred: it would sit off-axis */
.sdgband .section-head__aside { max-width: 74ch; }
.sdgband .btn-row { margin-top: 2.5rem; }

.sdgslider { position: relative; }

/* One track per view. The Call for Papers grid below already lists all ten
   as compact cards, so this band earns its place by going deep on one at a
   time rather than repeating that treatment. */
.sdgslider__viewport {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* The arrows are the control here, so the native bar is redundant. The
       track still scrolls by wheel, touch and keyboard. */
    scrollbar-width: none;
}
.sdgslider__viewport::-webkit-scrollbar { display: none; }

/* ---- the track card ---- */

.sdgtrack {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    scroll-snap-align: start;
    overflow: hidden;
    border-radius: var(--radius-lg, 18px);
    background: var(--color-white);
    box-shadow: 0 18px 44px rgba(19, 31, 19, .28);
}

/* Identity half: number, icon, title, goals. */
.sdgtrack__aside {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .85rem;
    padding: 2.25rem 2rem;
    color: var(--color-background);
    background: linear-gradient(135deg, var(--color-primary-deep) 0%, var(--color-primary) 55%,
                                var(--color-secondary-deep) 100%);
}

/* The track number, set huge and nearly out of sight. Decorative only —
   the real count is spelled out in the body. */
.sdgtrack__num {
    position: absolute;
    top: -.18em;
    right: .06em;
    z-index: -1;
    font-size: clamp(6rem, 12vw, 10rem);
    font-weight: 800;
    line-height: 1;
    color: rgba(251, 238, 215, .09);
    pointer-events: none;
}

.sdgtrack__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 12px;
    font-size: 1.35rem;
    color: var(--color-background);
    background: rgba(251, 238, 215, .14);
    border: 1px solid rgba(251, 238, 215, .2);
}

.sdgtrack__title {
    margin: .2rem 0 .35rem;
    font-size: clamp(1.3rem, 2.1vw, 1.75rem);
    line-height: 1.24;
    color: var(--color-background);
}

.sdgtrack__label {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(251, 238, 215, .62);
}

.sdgtrack__aside .sdg-row {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.25rem;
    margin-top: .1rem;
}

/* Substance half. */
.sdgtrack__body {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 2.25rem 2rem;
    background: var(--color-white);
}

.sdgtrack__sub {
    margin: 0;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
}

.sdgtrack__focus {
    display: grid;
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sdgtrack__focus li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--color-text);
}
.sdgtrack__focus i {
    flex: 0 0 auto;
    margin-top: .18rem;
    font-size: .95rem;
    color: var(--color-secondary);
}

.sdgtrack__outcome {
    margin: .35rem 0 0;
    padding-top: .9rem;
    border-top: 1px solid var(--color-hairline);
    font-size: .95rem;
    line-height: 1.55;
    color: var(--color-ink-soft);
}
.sdgtrack__outcome b {
    display: block;
    margin-bottom: .18rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
}

.sdgtrack__count {
    margin: auto 0 0;
    padding-top: .9rem;
    border-top: 1px solid var(--color-hairline);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-muted);
}

@media (max-width: 860px) {
    .sdgtrack { grid-template-columns: minmax(0, 1fr); }
    .sdgtrack__aside,
    .sdgtrack__body { padding: 1.6rem 1.35rem; }
    .sdgtrack__num { font-size: clamp(5rem, 22vw, 8rem); }
}
/* ---- the arrows ---- */

.slider-btn {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    background: var(--color-primary-deep);
    border: 1px solid rgba(251, 238, 215, .22);
    border-radius: 50%;
    color: var(--color-accent);
    font-size: 1.15rem;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color .25s ease, border-color .25s ease,
                color .25s ease, opacity .25s ease;
}
.slider-btn--prev { left: 0; }
.slider-btn--next { right: 0; }
.slider-btn:hover:not(:disabled),
.slider-btn:focus-visible:not(:disabled) {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-deep);
}
.slider-btn:disabled { opacity: .3; cursor: default; }

@media (min-width: 1400px) {
    /* Room outside the container at this width, so the arrows step off the
       cards instead of sitting on them. */
    .slider-btn--prev { left: -1.5rem; }
    .slider-btn--next { right: -1.5rem; }
}

@media (max-width: 991.98px) {
    .sdgslider__viewport { grid-auto-columns: 100%; gap: 1rem; }
}

@media (max-width: 767.98px) {
    .sdgslider__viewport {
        grid-template-rows: none;
        grid-auto-flow: column;
    }
    .sdg-card { padding: 1.25rem 1.25rem 1.35rem; }
    .sdg-card .sdg-row { gap: .5rem 1rem; }
    .slider-btn { width: 42px; height: 42px; font-size: 1rem; }
}
/* -------------------------------------------------------------------------
   13b. Call for papers — the ten sessions as a numbered list
   ---------------------------------------------------------------------- */

.cfp__head {
    max-width: 46rem;
    margin: 0 auto 3rem;
    text-align: center;
}

/* A filled pill rather than the usual ruled eyebrow: this one sits centred,
   where a rule to the left of the text would hang off axis. */
.pill-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.1rem;
    background: rgba(80, 124, 58, .12);
    border: 1px solid rgba(80, 124, 58, .22);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-secondary-deep);
}
.pill-eyebrow i { font-size: .85rem; }

.cfp__head h2 { margin: 1.25rem 0 0; }
.cfp__head h2::after {
    content: '';
    display: block;
    width: 68px;
    height: 3px;
    margin: 1.15rem auto 0;
    background: var(--color-accent);
    border-radius: 2px;
}
.cfp__lead {
    margin: 1.15rem 0 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-ink-soft);
}

/* The wall of 17 — the SDG alignment section, after #1495 item 3. Ported from
   ICSET-2027 and recoloured with this site's tokens. Each tile carries its own
   --goal (the UN brand colour) for the halo behind it on hover. */
.sdg-wall {
    position: relative;
    isolation: isolate;
    margin-top: clamp(1.25rem, 2vw, 2rem);
    padding: clamp(1.5rem, 2.6vw, 2.5rem);
    border-radius: var(--radius-xl);
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    box-shadow: var(--shadow-sm);
}

.sdg-wall__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.125rem;
    margin-bottom: clamp(1.25rem, 2vw, 1.875rem);
}

.sdg-wall__head h3 {
    margin: 0 0 .25rem;
    font-size: var(--step-h3);
    color: var(--color-primary-deep);
}

.sdg-wall__head p {
    margin: 0;
    font-size: var(--step-caption);
    color: var(--color-ink-soft);
}

.sdg-wall__stats {
    display: flex;
    gap: clamp(1rem, 1.8vw, 1.875rem);
    margin: 0;
}

.sdg-stat {
    display: flex;
    flex-direction: column-reverse;
    line-height: 1.2;
}

.sdg-stat dt {
    font-size: .75rem;
    color: var(--color-ink-soft);
}

.sdg-stat dd {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.375rem, 2vw, 1.875rem);
    font-variant-numeric: tabular-nums;
    color: var(--color-primary);
}

.sdg-wall__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(.625rem, 1vw, 1rem);
}

.sdg-tile {
    position: relative;
    width: clamp(5.125rem, 8.4vw, 7rem);
    margin: 0;
    text-align: center;
}

.sdg-tile img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease;
}

/* Colour halo, revealed behind the tile on hover. */
.sdg-tile::before {
    content: "";
    position: absolute;
    inset: -.5rem -.5rem auto;
    z-index: -1;
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    background: var(--goal, var(--color-secondary));
    opacity: 0;
    transform: scale(.85);
    transition: opacity .4s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
}

.sdg-tile:hover::before {
    opacity: .22;
    transform: scale(1);
}

.sdg-tile:hover img {
    transform: translateY(-.375rem) scale(1.05);
    box-shadow: var(--shadow-md);
}

.sdg-tile figcaption {
    margin-top: .5rem;
    font-size: .6875rem;
    line-height: 1.35;
    color: var(--color-ink-soft);
    transition: color .3s ease;
}

.sdg-tile:hover figcaption {
    color: var(--color-primary-deep);
    font-weight: 600;
}

@media (max-width: 767.98px) {
    .sdg-wall__head {
        align-items: flex-start;
    }

    .sdg-wall__stats {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 575.98px) {
    .sdg-tile {
        width: calc(33.333% - .5rem);
    }

    .sdg-tile figcaption {
        font-size: .625rem;
    }
}

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

    .sdg-tile img,
    .sdg-tile::before,
    .sdg-tile figcaption {
        transition: none;
    }
}


.cfp .btn-row { margin-top: 2.75rem; }

@media (max-width: 767.98px) {
    .cfp__head { margin-bottom: 2.25rem; }
}
/* -------------------------------------------------------------------------
   13c. Panel discussion
   ---------------------------------------------------------------------- */

.panel__head {
    max-width: 52rem;
    margin: 0 auto 2.75rem;
    text-align: center;
}
.panel__head h2 { margin: 1.25rem 0 0; }
.panel__lead {
    margin: 1.15rem 0 0;
    font-size: 16px;
    line-height: 1.75;
    color: var(--color-ink-soft);
}

/* The banner is a 1600x600 crop, so it runs the full width of the viewport
   rather than sitting boxed inside the container — at container width the
   people in it would be too small to read as people. */
.panel__banner {
    margin: 0;
    line-height: 0;
}
.panel__banner img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 8 / 3;
    object-fit: cover;
}

@media (min-width: 992px) {
    /* Capped at 1400px on desktop and centred, with the leaf radius the
       rest of the site uses. The source file is 1600px wide, so the frame
       is never asked to render larger than the artwork it holds. */
    .panel__banner {
        max-width: 1400px;
        margin-inline: auto;
        padding-inline: var(--gutter);
    }
    .panel__banner img {
        border-radius: var(--leaf);
        box-shadow: var(--shadow-md);
    }
}

@media (max-width: 767.98px) {
    .panel__head { margin-bottom: 2rem; }
    /* Taller crop on a phone so the frame does not become a letterbox slot. */
    .panel__banner img { aspect-ratio: 16 / 9; }
}
/* -------------------------------------------------------------------------
   13d. Gallery — glimpses of past conferences
   ---------------------------------------------------------------------- */

.glimpse__head {
    max-width: 50rem;
    margin: 0 auto 2.75rem;
    text-align: center;
}
.glimpse__head h2 { margin: 1.25rem 0 0; }
.glimpse__lead {
    margin: 1.15rem 0 0;
    font-size: 16px;
    line-height: 1.75;
    color: var(--color-ink-soft);
}

/* Ten frames on a sixteen-cell mosaic: the first and the sixth take a 2x2
   block each, the other eight take one cell, and the two big ones land on
   opposite corners so the grid fills exactly with no holes. A uniform row of
   thumbnails would say less about the conference than one wide frame does. */
.glimpse__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: clamp(104px, 10.5vw, 168px);
    grid-auto-flow: dense;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.glimpse__cell:nth-child(1),
.glimpse__cell:nth-child(6) {
    grid-column: span 2;
    grid-row: span 2;
}

.glimpse__cell {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-cream-deep);
}
/* The site's asymmetric radius, alternating so the mosaic does not read as a
   sheet of identical rounded rectangles. */
.glimpse__cell:nth-child(4n+1) { border-radius: var(--leaf); }
.glimpse__cell:nth-child(4n+4) { border-radius: var(--leaf-flip); }

.glimpse__cell img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.glimpse__cell:hover img { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
    .glimpse__cell img { transition: none; }
    .glimpse__cell:hover img { transform: none; }
}

@media (max-width: 767.98px) {
    /* Two columns, and the big cells drop to a single column so the small
       frames never shrink to postage stamps. */
    .glimpse__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: clamp(112px, 30vw, 160px);
        gap: .5rem;
    }
    .glimpse__cell:nth-child(1),
    .glimpse__cell:nth-child(6) { grid-column: span 2; grid-row: span 1; }
    .glimpse__head { margin-bottom: 2rem; }
}
/* Official UN goal tiles. The artwork carries the label, so on cards we show
   the tile alone and leave the wording to the alt text. */
.sdg-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .75rem; }
.sdg-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
    line-height: 0;
    box-shadow: 0 0 0 1px rgba(251, 238, 215, .18);
    transition: transform .2s ease, box-shadow .2s ease;
}
.sdg-badge img {
    width: 46px;
    height: 46px;
    object-fit: cover;
    display: block;
}
.track-card:hover .sdg-badge:not(.sdg-badge--labelled) {
    box-shadow: 0 0 0 1px rgba(247, 183, 49, .55);
}

/* Labelled variant: the goal tile, then its number over its name. The number
   is what people cite; the name is what makes it mean something.

   The tile sits inset inside the pill rather than flush against the edge —
   flush reads as a cropping accident, and the UN artwork is a square mark
   that wants a margin around it. Padding is asymmetric on purpose: even
   optical spacing needs more room after the text than before the tile. */
.sdg-badge--labelled {
    align-items: center;
    gap: .7rem;
    padding: .4rem 1rem .4rem .4rem;
    background: rgba(47, 79, 47, .06);
    border: 1px solid rgba(47, 79, 47, .1);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
    overflow: visible;          /* the pill is padded now; nothing to clip */
    line-height: normal;
    color: var(--color-text);
    transition: background-color .25s ease, border-color .25s ease,
                box-shadow .25s ease, transform .25s ease;
}
.sdg-badge--labelled img { border-radius: 8px; }

.sdg-badge__text {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    line-height: 1.25;
    text-align: left;
}
.sdg-badge__text b {
    font-family: var(--font-display);
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--color-secondary-deep);
    font-variant-numeric: tabular-nums;
}
.sdg-badge__text > span {
    font-size: .78rem;
    line-height: 1.35;
    color: var(--color-ink-soft);
}

/* On the forest ground the badge sits inside the glass card, so it carries no
   panel of its own — stacking a second translucent layer on the first only
   muddies both. Tile, number, name, nothing else.

   Measured on the card ground (#243D24): the number reads 11.9:1, the goal
   name 7.5:1. */
.on-dark .sdg-badge--labelled {
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    color: rgba(251, 238, 215, .82);
}
.on-dark .sdg-badge--labelled img { box-shadow: 0 2px 8px rgba(19, 31, 19, .35); }
.on-dark .sdg-badge__text b { color: var(--color-white); }
.on-dark .sdg-badge__text > span { color: rgba(251, 238, 215, .82); }
.sdg-card:hover .sdg-badge--labelled,
.sdg-card:focus-visible .sdg-badge--labelled {
    box-shadow: none;
    transform: none;
}
/* SDG table variant on light grounds */
.sdg-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.sdg-table th,
.sdg-table td {
    padding: 1rem 1.1rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-hairline);
}
.sdg-table th {
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-secondary-deep);
}
.sdg-table td:first-child {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
    width: 64px;
}
.sdg-table td h3 { font-size: 1rem; margin-bottom: .35rem; }
.sdg-table .sdg-row { flex-direction: column; align-items: flex-start; margin-top: 0; padding-top: 0; }
.sdg-table .sdg-badge { box-shadow: none; }
.sdg-table .sdg-badge img { width: 40px; height: 40px; }

/* -------------------------------------------------------------------------
   14. Why attend — a bento of seven cards
   ---------------------------------------------------------------------- */

/* Cream on cream against the About section above it, so the band opens with a
   hairline rather than a colour change. */
.reasons { border-top: 1px solid var(--color-hairline); }

.reasons__head {
    max-width: 52rem;
    margin: 0 auto 3rem;
    text-align: center;
}
.reasons__head .eyebrow::before { display: none; }   /* centred: the rule would sit off-axis */
.reasons__head h2 { margin: .75rem 0 0; }
/* Drawn rather than bordered so it centres on the text block instead of
   the container, and it separates the title from the paragraph under it. */
.reasons__head h2::after {
    content: '';
    display: block;
    width: 68px;
    height: 3px;
    margin: 1.25rem auto 0;
    background: var(--color-accent);
    border-radius: 2px;
}
.reasons__lead {
    max-width: 62ch;
    margin: 1.25rem auto 0;
    font-size: 16px;
    line-height: 1.75;
    color: var(--color-ink-soft);
}

/* Four columns. Photo cards and the dark card take two each, so every row
   reads as one wide card beside two narrow ones. */
.rgrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rcard {
    position: relative;
    display: flex;
    overflow: hidden;
    border-radius: 8px;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.rcard:hover { transform: translateY(-4px); }
.rcard__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .55rem;
    width: 100%;
    padding: 1.5rem 1.4rem;
}
.rcard h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
}
.rcard p {
    margin: 0;
    font-size: .875rem;
    line-height: 1.65;
}

.rcard__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: .35rem;
    border-radius: 8px;
    font-size: 1.2rem;
}

/* ---- the four compact cards ---- */

.rcard--compact {
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
}
.rcard--compact:hover { box-shadow: var(--shadow-sm); border-color: rgba(80, 124, 58, .45); }
.rcard--compact .rcard__icon {
    background: rgba(80, 124, 58, .12);
    color: var(--color-secondary-deep);
}
.rcard--compact h3 { color: var(--color-primary); }
.rcard--compact p { color: var(--color-ink-soft); }

/* Every other compact card carries the gold rather than the green, so the
   four of them alternate instead of reading as one block. */
.rcard--accent { border-color: rgba(247, 183, 49, .55); }
.rcard--accent:hover { border-color: var(--color-accent); }
.rcard--accent .rcard__icon {
    background: rgba(247, 183, 49, .22);
    color: #9A6E05;
}

/* ---- the two photo cards ----
   The photograph runs clear across the top and a Palm Frond scrim takes
   over below it, carrying the type. The scrim reaches .88 by the point the
   copy starts: over the worst case — a white patch of photograph — that
   composites to #4C684C, which holds white at 6.2:1 and Coconut Cream at
   5.4:1. Anything lighter fails AA on the library shot. */

.rcard--photo {
    grid-column: span 2;
    min-height: 244px;
    background: var(--color-primary);
    border: 1px solid rgba(251, 238, 215, .16);
}
.rcard--photo:hover { box-shadow: var(--shadow-md); border-color: rgba(247, 183, 49, .5); }

.rcard__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rcard--photo .rcard__bg { opacity: .92; }

.rcard--photo .rcard__inner {
    justify-content: flex-end;
    background: linear-gradient(180deg, rgb(47 79 47 / 33%) 0%, rgb(47 79 47 / 58%) 22%, rgba(47, 79, 47, .88) 42%, rgba(47, 79, 47, .97) 100%);
}
/* No chip behind this one — a plain mark reads better over a photograph. */
.rcard--photo .rcard__icon {
    width: auto;
    height: auto;
    margin-bottom: .45rem;
    background: none;
    color: var(--color-accent);
    font-size: 1.5rem;
}
.rcard--photo h3 {
    color: var(--color-white);
    font-size: 1.2rem;
}
.rcard--photo p { color: rgba(251, 238, 215, .9); }

/* ---- the dark card ----
   It runs the full width of the grid and lays out in three columns —
   icon, the claim, then the four points beside it rather than stacked
   underneath. That is what keeps the band short. */

.rcard--dark {
    grid-column: 1 / -1;
    background: var(--color-primary-deep);
}
.rcard--dark .rcard__bg { opacity: .16; }
.rcard--dark .rcard__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: start;
    column-gap: 1.15rem;
    row-gap: .45rem;
    padding: 1.6rem 1.75rem;
    background: linear-gradient(105deg,
        var(--color-primary-deep) 38%,
        rgba(35, 59, 35, .72) 100%);
}
.rcard--dark .rcard__icon {
    grid-row: 1 / span 2;
    margin-bottom: 0;
    background: rgba(247, 183, 49, .2);
    color: var(--color-accent);
}
.rcard--dark h3 {
    grid-column: 2;
    grid-row: 1;
    color: var(--color-white);
    font-size: 1.2rem;
}
.rcard--dark > .rcard__inner > p {
    grid-column: 2;
    grid-row: 2;
    color: rgba(251, 238, 215, .88);
}
.rcard--dark .rcard__points {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem 1.75rem;
    margin: 0;
    padding: 0 0 0 2rem;
    border-top: 0;
    border-left: 1px solid var(--color-hairline-light);
}
.rcard--dark:hover { box-shadow: var(--shadow-md); }

.rcard__points {
    display: grid;
    gap: .5rem;
    width: 100%;
    margin: .9rem 0 0;
    padding: .9rem 0 0;
    border-top: 1px solid var(--color-hairline-light);
    list-style: none;
}
.rcard__points li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .8125rem;
    line-height: 1.55;
    color: rgba(251, 238, 215, .82);
}
.rcard__points i {
    flex: none;
    margin-top: .12rem;
    color: var(--color-accent);
    font-size: .9rem;
}

@media (max-width: 991.98px) {
    .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rcard--photo { grid-column: span 2; }
    .rcard--dark { grid-column: 1 / -1; }
    .rcard--dark .rcard__inner { grid-template-columns: auto minmax(0, 1fr); }
    .rcard--dark .rcard__points {
        grid-column: 1 / -1;
        grid-row: auto;
        margin-top: .9rem;
        padding: .9rem 0 0;
        border-left: 0;
        border-top: 1px solid var(--color-hairline-light);
    }
    .rcard--photo { min-height: 210px; }
}

@media (max-width: 575.98px) {
    .rgrid { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
    .rcard--photo,
    .rcard--dark { grid-column: auto; }
    .rcard--dark .rcard__points { grid-template-columns: minmax(0, 1fr); }
    .rcard--photo { min-height: 200px; }
    .rcard__inner { padding: 1.25rem 1.15rem; }
    .reasons__head { margin-bottom: 2.25rem; }
}

/* -------------------------------------------------------------------------
   15. Registration packages
   ---------------------------------------------------------------------- */

.pricing__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}
.price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.65rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
    transition: transform .25s ease, box-shadow .25s ease;
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

.price-card__type {
    font-family: var(--font-display);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-secondary-deep);
}
.price-card__fee {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    margin: .75rem 0 .35rem;
    font-family: var(--font-display);
    color: var(--color-primary);
}
.price-card__fee b {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.price-card__fee span { font-size: .875rem; font-weight: 500; color: var(--color-ink-soft); }
.price-card__summary { font-size: .9rem; color: var(--color-text); line-height: 1.55; }

.price-card__features {
    list-style: none;
    margin: 1.5rem 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--color-hairline);
    display: flex;
    flex-direction: column;
    gap: .7rem;
    font-size: .9rem;
    line-height: 1.5;
}
.price-card__features li { display: flex; gap: .6rem; align-items: flex-start; }
.price-card__features i { color: var(--color-secondary); margin-top: .18rem; flex: none; }
.price-card__action { margin-top: auto; }

.price-card--featured {
    background: var(--color-white);
    border: 2px solid var(--color-accent);
    box-shadow: var(--shadow-md);
}
.price-card__badge {
    position: absolute;
    top: -.75rem;
    left: 1.65rem;
    padding: .3rem .8rem;
    background: var(--color-accent);
    color: var(--color-primary);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.pricing__note {
    margin-top: 2rem;
    font-size: .875rem;
    color: var(--color-ink-soft);
    display: flex;
    gap: .6rem;
    align-items: flex-start;
}
.pricing__note i { color: var(--color-secondary); margin-top: .15rem; }

/* -------------------------------------------------------------------------
   16. Publication — opportunities, indexing, and the IFERP journey
   ---------------------------------------------------------------------- */

.pub__head {
    max-width: 76rem;
    margin: 0 auto;
    text-align: center;
}

/* The promise, set as a pull quote rather than another paragraph — it is the
   one sentence the section is built around. */
.pub__quote {
    position: relative;
    max-width: 64rem;
    margin: 1.75rem auto 0;
    /* Even padding: the quote is centred now and carries a mark at each
       end, so it can no longer be indented from one side only. */
    padding: 1.85rem 4rem;
    background: rgba(80, 124, 58, .08);
    border: 1px solid rgba(80, 124, 58, .18);
    border-radius: var(--leaf);
    text-align: center;
}
.pub__quote::before,
.pub__quote::after {
    position: absolute;
    font-family: var(--font-display);
    font-size: 3.5rem;
    line-height: 1;
    color: rgba(80, 124, 58, .38);
}
.pub__quote::before {
    content: '\201C';                       /* a real quote mark, not an image */
    left: 1.15rem;
    top: .35rem;
}
/* Correction item 17: the quote opened but never closed. */
.pub__quote::after {
    content: '\201D';
    right: 1.15rem;
    bottom: -.5rem;
}
.pub__quote p {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.1875rem;
    font-weight: 500;
    font-style: italic;
    line-height: 1.6;
    color: var(--color-primary);
}
/* Widened on request. 62ch was the comfortable measure; at 90ch the eye
   has further to travel back to the next line, so the leading is opened
   from 1.75 to 1.85 to keep the lines from running together. */
.pub__ethics {
    margin: 1.75rem auto 0;
    max-width: 90ch;
    font-size: 16px;
    line-height: 1.85;
    color: var(--color-ink-soft);
}

/* ---- indexing databases ----
   Lifted out of the flow as a panel so the block reads as the section's proof
   rather than as one more paragraph. The ground is the Bangkok banner, which
   is already in the site palette and leaves a dark middle for the content to
   sit in.

   The artwork's brightest 5% averages 221/255, so a scrim is doing the
   contrast work, not luck. At .84 Palm Frond over that highlight the heading
   holds 8:1 and the note 6:1; the gradient is heaviest at the edges, where
   the sunset and the skyline are. */

.pub__indexing {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: 2.75rem;
    padding: 2.1rem clamp(1.25rem, 4vw, 2.5rem) 1.9rem;
    background: var(--color-primary-deep) url("../images/bg-1.jpg") center / cover no-repeat;
    border-radius: var(--leaf);
    text-align: center;
}
.pub__indexing::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg,
            rgba(35, 59, 35, .94) 0%,
            rgba(35, 59, 35, .84) 26%,
            rgba(35, 59, 35, .78) 50%,
            rgba(35, 59, 35, .84) 74%,
            rgba(35, 59, 35, .94) 100%),
        radial-gradient(58% 62% at 50% 52%,
            rgba(247, 183, 49, .16) 0%,
            transparent 72%);
}

.pub__subhead {
    margin: 0 0 1.35rem;
    font-size: 1.125rem;
    letter-spacing: -.005em;
    color: var(--color-white);
}
.pub__subhead::after {
    content: '';
    display: block;
    width: 44px;
    height: 3px;
    margin: .7rem auto 0;
    background: var(--color-accent);
    border-radius: 2px;
}

/* White tiles on the dark ground need no border of their own; a drop shadow
   is what lifts them off a photograph. */
.pub__indexing .index-tile {
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(19, 31, 19, .38);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pub__indexing .index-tile:hover {
    border-color: var(--color-accent);
    box-shadow: 0 10px 26px rgba(19, 31, 19, .46);
}

.pub__note {
    max-width: 68ch;
    margin: 1.35rem auto 0;
    font-size: .8438rem;
    line-height: 1.7;
    color: rgba(251, 238, 215, .9);
}
.pub__note b { color: var(--color-accent); }
.pub__note em { font-style: normal; font-size: .8125rem; opacity: .85; }

@media (max-width: 767.98px) {
    /* The banner is a wide composite; on a narrow panel `cover` would crop it
       to one temple. Anchoring right keeps the skyline in frame. */
    .pub__indexing { background-position: 72% center; }
}
/* ---- the research journey ---- */

.journey__head {
    max-width: 52rem;
    margin: 3.25rem auto 3rem;
    padding-top: 2.75rem;
    border-top: 1px dashed var(--color-hairline);
    text-align: center;
}
.journey__head h2 { margin: 0; }
.journey__lead {
    margin: 1.15rem 0 0;
    font-size: 16px;
    line-height: 1.75;
    color: var(--color-ink-soft);
}

/* The animated version of the journey (home page). The stage keeps the
   animation's own 2100x1080 ratio so nothing jumps while the player loads. */
.journey__anim {
    max-width: 64rem;
    margin: 0 auto;
}
.journey__anim-stage {
    width: 100%;
    aspect-ratio: 2100 / 1080;
}
.journey__anim-stage svg {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.journey__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem 2rem;
    margin: 0;
    padding: 0;
    list-style: none;   /* the step number is drawn, not generated */
}

.journey-step {
    position: relative;
    text-align: center;
}
/* A dashed rail between the discs, the way a route is drawn on a map. It is
   decoration, so it is hidden from assistive tech by being a pseudo-element,
   and it stops at the end of each row rather than wrapping into the next. */
.journey-step:not(:nth-child(3n))::after {
    content: '';
    position: absolute;
    top: 46px;
    left: calc(50% + 44px);
    right: calc(-50% + 44px);
    border-top: 2px dashed rgba(80, 124, 58, .3);
}

.journey-step__mark {
    position: relative;
    display: inline-grid;
    place-items: center;
    margin-bottom: 1.15rem;
}
.journey-step__disc {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(80, 124, 58, .1);
    border: 1px solid rgba(80, 124, 58, .22);
    color: var(--color-secondary-deep);
    font-size: 1.6rem;
    transition: background-color .25s ease, border-color .25s ease,
                color .25s ease, transform .25s ease;
}
/* The number rides the disc rather than sitting above it, so the row of
   discs stays on one optical line. */
.journey-step__num {
    position: absolute;
    top: -.35rem;
    right: -.35rem;
    z-index: 1;
    display: grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    padding: 0 .3rem;
    background: var(--color-primary);
    border: 2px solid var(--color-white);
    border-radius: 999px;
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: .8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.journey-step:hover .journey-step__disc {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-white);
    transform: translateY(-4px);
}

.journey-step h3 {
    margin: 0 0 .5rem;
    font-size: 1.0625rem;
    line-height: 1.35;
    color: var(--color-primary);
}
.journey-step p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.65;
    color: var(--color-ink-soft);
}

.pub .btn-row { margin-top: 3.25rem; }

@media (max-width: 991.98px) {
    .journey__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.75rem; }
    /* Two per row now, so the rail follows the new rhythm. */
    .journey-step:not(:nth-child(3n))::after { display: none; }
    .journey-step:not(:nth-child(2n))::after {
        content: '';
        display: block;
        position: absolute;
        top: 46px;
        left: calc(50% + 44px);
        right: calc(-50% + 44px);
        border-top: 2px dashed rgba(80, 124, 58, .3);
    }
}

@media (max-width: 575.98px) {
    .journey__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .journey-step::after { display: none !important; }
    .pub__quote { padding: 1.5rem 1.25rem 1.5rem 2.75rem; }
    .pub__quote::before { left: .85rem; font-size: 3rem; }
}

.partners__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
}
.partner-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 116px;
    padding: 1.25rem 1rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-md);
    text-align: center;
    transition: border-color .25s ease, transform .25s ease;
}
.partner-tile:hover { border-color: var(--color-secondary); transform: translateY(-4px); }
.partner-tile img { max-height: 40px; width: auto; object-fit: contain; }
.partner-tile b {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    letter-spacing: -.01em;
}
.partner-tile small { font-size: .75rem; color: var(--color-ink-soft); }

/* -------------------------------------------------------------------------
   16b. Institutional partner band — one right-to-left logo track
   Rendered directly under the hero (section 03b in index.php); the rules
   live here beside the other partner styles. Logos only, no heading.
   ---------------------------------------------------------------------- */

/* The band also does the colour work of getting from the near-black hero to
   the Coconut Cream section beneath it. */
.logowall {
    position: relative;
    overflow: hidden;
    padding-block: clamp(1.9rem, 3.8vw, 3rem);
    background: linear-gradient(180deg,
        var(--color-white) 0%,
        var(--color-light) 46%,
        var(--color-background) 100%);
}

/* One lit seam against the dark hero — the single bold mark in the band. */
.logowall::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent,
        var(--color-secondary) 22%,
        var(--color-accent) 50%,
        var(--color-secondary) 78%,
        transparent);
}

/* A generous fade at both ends so tiles dissolve rather than get clipped. */
.logowall__row {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

/* Right to left, forever. The track holds two copies of the list and slides
   left by exactly one copy — half the width, plus half a gap — so the seam
   lands off screen and the restart is invisible. Sixty logos make a long
   track, so the duration is set to hold a readable ~75px per second. */
.logowall__track {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: logowall-drift 155s linear infinite;
    will-change: transform;
}

.logowall__row:hover .logowall__track,
.logowall__row:focus-within .logowall__track { animation-play-state: paused; }

@keyframes logowall-drift {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - .5rem)); }
}

/* Sixty marks in sixty different palettes fight each other. At rest each one
   is knocked back to a soft moss-tinted monochrome — grayscale first, then a
   little sepia rotated round to green, so the muted state belongs to the Palm
   Frond family rather than reading as dead newsprint grey. Hovering the row
   stops it; hovering a tile returns that one logo to full colour. */
.logo-tile {
    flex: none;
    display: grid;
    place-items: center;
    width: 150px;
    height: 80px;
    padding: .3rem 1.2rem;
    background: linear-gradient(180deg, var(--color-white), #FCFDFC);
    border: 1px solid rgba(47, 79, 47, .1);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(47, 79, 47, .04);
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.logo-tile:hover {
    border-color: rgba(80, 124, 58, .45);
    box-shadow: 0 6px 18px rgba(47, 79, 47, .1);
    transform: translateY(-4px);
}
.logo-tile img {
    max-width: 100%;
    max-height: 56px;
    width: auto;
    object-fit: contain;
    display: block;
    filter: grayscale(1) sepia(.3) hue-rotate(65deg) opacity(.62);
    transition: filter .4s ease;
}
.logo-tile:hover img {
    filter: grayscale(0) sepia(0) hue-rotate(0deg) opacity(1);
}

/* Anyone who asked for more contrast gets the logos at full strength. */
@media (prefers-contrast: more) {
    .logo-tile img { filter: none; }
}

/* No drift for anyone who asked for stillness — the row becomes an ordinary
   horizontal scroller instead. */
@media (prefers-reduced-motion: reduce) {
    .logowall__track { animation: none; }
    .logowall__row { overflow-x: auto; }
}

@media (max-width: 767.98px) {
    .logowall__track { gap: .7rem; animation-duration: 120s; }
    .logo-tile { width: 138px; height: 74px; padding: .3rem .85rem; }
    .logo-tile img { max-height: 44px; }
}

/* -------------------------------------------------------------------------
   16b. Journal publication support programme
   ---------------------------------------------------------------------- */

.tiers__head {
    max-width: 48rem;
    margin: 0 auto 3rem;
    text-align: center;
}
.tiers__head h2 { margin: 1.25rem 0 0; }

.tiers__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;   /* Q1–Q4 is the ranking; a marker would repeat it */
    align-items: stretch;
}

.tier-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
    padding: 2.5rem 1.6rem 1.6rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tier-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: rgba(80, 124, 58, .45);
}

/* The note the organiser put against the tier, worn as a tab on the top edge
   rather than as another line of text inside the card. */
.tier-card__flag {
    position: absolute;
    top: 0;
    left: 1.6rem;
    padding: .3rem .8rem .35rem;
    background: var(--color-accent);
    border-radius: 0 0 8px 8px;
    color: var(--color-primary-deep);
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* The quartile is the thing being chosen between, so it is the largest mark
   on the card. */
.tier-card__q {
    font-family: var(--font-display);
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--color-secondary-deep);
    font-variant-numeric: tabular-nums;
}
.tier-card__kind {
    font-size: .8125rem;
    letter-spacing: .04em;
    color: var(--color-ink-soft);
}
.tier-card h3 {
    margin: .9rem 0 0;
    padding-top: .9rem;
    width: 100%;
    border-top: 1px solid var(--color-hairline);
    font-size: 1.0625rem;
    line-height: 1.3;
    color: var(--color-primary);
}

.tier-card__cta {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: auto;
    padding-top: 1.1rem;
    font-family: var(--font-display);
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-secondary-deep);
    text-decoration: none;
    transition: gap .2s ease, color .2s ease;
}
.tier-card__cta:hover { gap: .8rem; color: var(--color-primary); }
/* The whole card is the target; the link keeps the accessible name. */
.tier-card__cta::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

/* Q1 is the one the organiser marks as most preferred, so it is the one card
   that inverts. Measured on Palm Frond: quartile 5.2:1, package 9.2:1. */
.tier-card--lead {
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.tier-card--lead .tier-card__q { color: var(--color-accent); }
.tier-card--lead .tier-card__kind { color: rgba(251, 238, 215, .78); }
.tier-card--lead h3 {
    color: var(--color-white);
    border-top-color: rgba(251, 238, 215, .2);
}
.tier-card--lead .tier-card__cta { color: var(--color-accent); }
.tier-card--lead .tier-card__cta:hover { color: var(--color-white); }
.tier-card--lead:hover { border-color: var(--color-accent); }

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

@media (max-width: 479.98px) {
    .tiers__grid { grid-template-columns: minmax(0, 1fr); }
    .tier-card { padding: 2.35rem 1.35rem 1.4rem; }
    .tier-card__q { font-size: 2.35rem; }
}
/* -------------------------------------------------------------------------
   16c. Scopus publication invitation
   ---------------------------------------------------------------------- */

.scopus__head {
    max-width: 56rem;
    margin: 0 auto 3rem;
    text-align: center;
}
.scopus__head h2 { margin: 1.25rem 0 0; }
.scopus__lead {
    margin: 1.25rem auto 0;
    max-width: 80ch;
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-ink-soft);
}

/* The proof sits in its own framed block: it is evidence, and evidence reads
   better on a surface of its own than loose on the page. */
.scopus__proof {
    position: relative;
    padding: 2.25rem clamp(1rem, 3vw, 2.25rem) 2.5rem;
    background: var(--color-light);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
}
.scopus__proof-head {
    max-width: 62ch;
    margin: 0 auto 1.75rem;
    text-align: center;
}
.scopus__proof-head h3 {
    margin: 0 0 .6rem;
    font-size: 1.125rem;
    color: var(--color-primary);
}
.scopus__proof-head p {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--color-ink-soft);
}

.scopus__slider { position: relative; }

/* Two records in view: these are citations, and a citation needs its width to
   stay readable rather than being squeezed into a thumbnail. */
.scopus__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 1rem) / 2);
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.scopus__track::-webkit-scrollbar { display: none; }

.proof-card {
    scroll-snap-align: start;
    display: grid;
    place-items: center;
    padding: 1rem 1.1rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-md);
    transition: border-color .25s ease, box-shadow .25s ease;
}
.proof-card:hover {
    border-color: rgba(80, 124, 58, .45);
    box-shadow: var(--shadow-sm);
}
.proof-card img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* The arrows sit inside the frame here, so they clear its padding. */
.scopus__slider .slider-btn {
    background: var(--color-white);
    border-color: var(--color-hairline);
    color: var(--color-secondary-deep);
    box-shadow: var(--shadow-sm);
}
.scopus__slider .slider-btn--prev { left: -1.15rem; }
.scopus__slider .slider-btn--next { right: -1.15rem; }
.scopus__slider .slider-btn:hover:not(:disabled),
.scopus__slider .slider-btn:focus-visible:not(:disabled) {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-deep);
}

.scopus__close {
    max-width: 62ch;
    margin: 2.75rem auto 0;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
    color: var(--color-primary);
}
.scopus .btn-row { margin-top: 1.75rem; }

@media (max-width: 767.98px) {
    .scopus__track { grid-auto-columns: 100%; }
    .scopus__proof { padding: 1.75rem 1rem 2rem; }
    /* No room to hang the arrows outside the frame at this width. */
    .scopus__slider .slider-btn--prev { left: -.6rem; }
    .scopus__slider .slider-btn--next { right: -.6rem; }
    .scopus__head { margin-bottom: 2.25rem; }
}
/* -------------------------------------------------------------------------
   17. Testimonials
   ---------------------------------------------------------------------- */

.reviews {
    padding: clamp(2.5rem, 4vw, 4rem);
    background: var(--color-info-deep);
    border-radius: var(--radius-xl);
    --focus-ring: var(--color-white);
}
.reviews__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}
.reviews__head h2 { color: var(--color-white); }

/* A scroll-snap carousel: three cards fit on desktop, so the arrows disable
   themselves until the track actually overflows. */
.reviews__track {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: .25rem;
}
.reviews__track::-webkit-scrollbar { display: none; }
.review {
    flex: 0 0 calc((100% - 2.5rem) / 3);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.75rem;
    background: var(--color-white);
    border-radius: var(--radius-lg);
}
/* On the Tropical Sky panel the Palm Lawn accent measures 1.05:1 against
   the blue — effectively invisible. Gold only reaches 2.89:1, under the
   3:1 needed even for large text, so the accent word goes white at
   5.15:1 and keeps its gold underline to stay an accent. */
.reviews .accent-word { color: var(--color-white); }

/* Google review cards: the mark and the stars sit above the quote so the
   source is clear before the words are read. Ratings are rendered as
   filled glyphs with an aria-label carrying the value, because five
   separate star icons announce as nothing useful on their own. */
.review__source {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.review__mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-light);
    border: 1px solid var(--color-hairline);
    color: var(--color-primary);
    font-size: 1rem;
}
.review__stars {
    display: inline-flex;
    gap: .12rem;
    color: var(--color-accent);
    font-size: .875rem;
}
.review__by small {
    display: block;
    margin-top: .15rem;
    font-size: .75rem;
    letter-spacing: .04em;
    color: var(--color-ink-soft);
}

.review blockquote {
    margin: 0;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-text);

    /* Three lines, then an ellipsis: the cards sit side by side in a
       carousel, and one long quote among short ones drags every card to
       its height. The full text stays in the DOM for search and for
       anyone reading with a screen reader. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.review__by {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--color-hairline);
    font-size: .85rem;
    line-height: 1.5;
}
.review__by b { display: block; font-family: var(--font-display); color: var(--color-primary); font-size: .9375rem; }
.review__by span { color: var(--color-ink-soft); }

.reviews__nav { display: flex; gap: .5rem; }
.reviews__btn {
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: var(--radius-sm);
    color: var(--color-white);
    font-size: 1.05rem;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.reviews__btn:hover:not(:disabled) { background: var(--color-white); color: var(--color-info-deep); }
.reviews__btn:disabled { opacity: .4; cursor: default; }

/* -------------------------------------------------------------------------
   17b. Take part — volunteer, scholarship, subscribe
   ---------------------------------------------------------------------- */

.engage__head {
    max-width: 48rem;
    margin: 0 auto 3rem;
    text-align: center;
}
.engage__head h2 { margin: 1.25rem 0 0; }
.engage__lead {
    margin: 1.15rem 0 0;
    font-size: 16px;
    line-height: 1.75;
    color: var(--color-ink-soft);
}

.engage__slider { position: relative; }

.engage__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.engage__track::-webkit-scrollbar { display: none; }

.engage-card {
    display: grid;
    /* The row stretches: the track sizes every card to the tallest, and
       a start-packed row would leave the photo short of the card foot. */
    align-content: stretch;
    gap: 0;
    scroll-snap-align: start;
    padding: 0;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.engage-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(80, 124, 58, .45);
}

.engage-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Centred against the photograph beside it: the three panels carry
       different amounts of copy, and top-aligning the short one leaves it
       stranded at the head of a tall card. */
    justify-content: center;
    gap: .7rem;
    min-width: 0;
    padding: 1.5rem clamp(1.35rem, 4vw, 2rem) 1.85rem;
}

.engage-card__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: .35rem;
    border-radius: var(--leaf-flip);
    background: rgba(80, 124, 58, .12);
    color: var(--color-secondary-deep);
    font-size: 1.4rem;
}
/* One card in each accent so the three read as distinct offers rather than
   three copies of the same card. */
.engage-card--scholarship .engage-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Centred against the photograph beside it: the three panels carry
       different amounts of copy, and top-aligning the short one leaves it
       stranded at the head of a tall card. */
    justify-content: center;
    gap: .7rem;
    min-width: 0;
    padding: 1.5rem clamp(1.35rem, 4vw, 2rem) 1.85rem;
}

.engage-card__icon {
    background: rgba(247, 183, 49, .22);
    color: #8A6205;
}
.engage-card--subscribe .engage-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Centred against the photograph beside it: the three panels carry
       different amounts of copy, and top-aligning the short one leaves it
       stranded at the head of a tall card. */
    justify-content: center;
    gap: .7rem;
    min-width: 0;
    padding: 1.5rem clamp(1.35rem, 4vw, 2rem) 1.85rem;
}

.engage-card__icon {
    background: rgba(26, 114, 176, .14);
    color: var(--color-info-deep);
}

.engage-card__eyebrow {
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
}
.engage-card h3 {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.3;
    color: var(--color-primary);
}
.engage-card__strap {
    margin: 0;
    font-family: var(--font-display);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--color-secondary-deep);
}
.engage-card__text {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--color-ink-soft);
}

.engage-card__points {
    display: grid;
    gap: .45rem;
    margin: .2rem 0 0;
    padding: 0;
    list-style: none;
}
.engage-card__points li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--color-text);
}
.engage-card__points i {
    flex: none;
    margin-top: .18rem;
    color: var(--color-secondary);
}

/* Pushed to the foot so the three buttons line up across cards of unequal
   copy length. */
.engage-card__cta { margin-top: auto; }
.engage-card__cta + * { margin-top: 0; }

/* The photograph. Full-bleed to the panel's left edge on wide screens and
   a banner above the copy on narrow ones, so it never becomes a decorative
   thumbnail. */
.engage-card__media {
    margin: 0;
    overflow: hidden;
    line-height: 0;
}
.engage-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

@media (min-width: 900px) {
    /* Photograph left, the offer right. The panel is wide enough that a
       single column would run the copy well past a readable measure. */
    .engage-card {
        grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
        column-gap: clamp(2rem, 4vw, 3.25rem);
        /* stretch, not start: the body has to fill the card before it can
           centre its own content against the photograph. */
        align-items: stretch;
        padding-left: 0;
    }
    /* Two children only, so the photo simply fills its own column
       instead of stretching a stack of copy rows to match it. */
    .engage-card__media {
        margin: 0;
        height: 100%;
        border-radius: var(--leaf) 0 0 var(--leaf);
    }
    .engage-card__media img { height: 100%; aspect-ratio: auto; }
    .engage-card__body {
        padding: 2.25rem clamp(1.5rem, 4vw, 3rem) 2.1rem 0;
        justify-content: center;
    }
    .engage-card h3   { font-size: 1.5rem; }
    .engage-card__cta { margin-top: .6rem; }
}

@media (max-width: 639.98px) {
    .engage__slider .slider-btn--prev { left: -.6rem; }
    .engage__slider .slider-btn--next { right: -.6rem; }
}

/* -------------------------------------------------------------------------
   17c. Subscribe dialog
   ---------------------------------------------------------------------- */

.subscribe .modal-dialog { max-width: 860px; }

/* Two panels: what you get, and the form. The left rail carries a real
   photograph under a Palm Frond wash so the dialog belongs to the site
   rather than being a generic form sheet. */
.subscribe__panel {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
    overflow: hidden;
    background: var(--color-white);
    border: 0;
    border-radius: var(--leaf);
    box-shadow: 0 30px 70px rgba(19, 31, 19, .35);
}

.subscribe__aside {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: 100%;
    padding: 2rem 1.75rem;
    color: rgba(251, 238, 215, .9);
}
.subscribe__shot {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Measured against the brightest part of that frame: at .86 Palm Frond the
   heading holds 8:1 and the list 6:1. */
.subscribe__aside::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(160deg,
        rgba(35, 59, 35, .82) 0%,
        rgba(35, 59, 35, .90) 55%,
        rgba(19, 31, 19, .94) 100%);
}
.subscribe__aside-body { display: grid; gap: .6rem; }

.subscribe__mark {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: .35rem;
    border-radius: var(--leaf-flip);
    background: rgba(247, 183, 49, .2);
    color: var(--color-accent);
    font-size: 1.2rem;
}
.subscribe__kicker {
    margin: 0;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.subscribe__pitch {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-white);
}
.subscribe__gets {
    display: grid;
    gap: .45rem;
    margin: .6rem 0 0;
    padding: .9rem 0 0;
    border-top: 1px solid rgba(251, 238, 215, .2);
    list-style: none;
    font-size: .875rem;
    line-height: 1.5;
}
.subscribe__gets li { display: flex; align-items: flex-start; gap: .5rem; }
.subscribe__gets i { flex: none; margin-top: .15rem; color: var(--color-accent); }

.subscribe__main { padding: 1.85rem clamp(1.35rem, 3vw, 2rem) 1.85rem; }
.subscribe__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.35rem;
}
.subscribe__head h2 {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.25;
    color: var(--color-primary);
}
.subscribe__close {
    flex: none;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    background: var(--color-light);
    border: 1px solid var(--color-hairline);
    border-radius: 50%;
    color: var(--color-primary);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.subscribe__close:hover { background: var(--color-accent); color: var(--color-primary-deep); }

.subscribe__form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
}
.field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field label {
    font-family: var(--font-display);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-primary);
}
.field label span { color: var(--color-error); }
/* Text-like inputs only. A checkbox or radio inside .field would otherwise
   pick up width:100% and the text-field padding from here — which is what
   stretched the Talk to us confirmation box across the dialog and pushed its
   label off the right edge. Those controls keep their own component sizing. */
.field input:not([type="checkbox"]):not([type="radio"]),
.field textarea {
    width: 100%;
    padding: .7rem .85rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: .9375rem;
    color: var(--color-text);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.field input::placeholder,
.field textarea::placeholder { color: #8C8F88; }
.field input:not([type="checkbox"]):not([type="radio"]):focus,
.field textarea:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(80, 124, 58, .16);
}
.field input[aria-invalid="true"] { border-color: var(--color-error); }
.field textarea { resize: vertical; }
.field__error { font-size: .75rem; line-height: 1.4; color: var(--color-error); }

.subscribe__actions { gap: .6rem; margin-top: .2rem; }
.subscribe__note {
    margin: 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--color-ink-soft);
}

/* The dial-code picker's corner has to follow the dialog's own radius. The
   rest of its styling lives with the other telephone rules. */
.subscribe .iti__selected-country { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }

@media (max-width: 767.98px) {
    /* The rail becomes a banner strip above the form. */
    .subscribe__panel { grid-template-columns: minmax(0, 1fr); }
    .subscribe__aside { min-height: 168px; padding: 1.35rem; }
    .subscribe__gets { display: none; }
    .subscribe__main { padding: 1.5rem 1.25rem 1.6rem; }
}

@media (max-width: 479.98px) {
    .subscribe__form { grid-template-columns: minmax(0, 1fr); }
}
/* -------------------------------------------------------------------------
   17d. Invitations — speak, or represent
   ---------------------------------------------------------------------- */

/* The Bangkok panorama, held back far enough for glass cards to sit on it.
   The brightest 5% of that frame averages 224/255, so a scrim is doing the
   work rather than luck: at .60 Night the worst case composites to #6A6953,
   and the glass cards then add their own tint on top of that. */
.invite {
    position: relative;
    isolation: isolate;
    background: var(--color-night) url("../images/tailand-image.jpg") center / cover no-repeat;
    color: rgba(251, 238, 215, .86);
    --focus-ring: var(--color-accent);
}
.invite__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
        rgba(19, 31, 19, .74) 0%,
        rgba(19, 31, 19, .60) 45%,
        rgba(19, 31, 19, .78) 100%);
}

.invite__head {
    max-width: 44rem;
    margin: 0 auto 2.75rem;
    text-align: center;
}
.invite__head h2 { margin: 1.25rem 0 0; color: var(--color-white); }
.invite .accent-word { color: var(--color-accent); }

/* The pill eyebrow inverts on a photograph. */
.pill-eyebrow--light {
    background: rgba(251, 238, 215, .14);
    border-color: rgba(251, 238, 215, .3);
    color: var(--color-white);
}

.invite__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Frosted glass over the photograph. The fill alone carries the look where
   backdrop-filter is unsupported; the @supports block only adds the blur. */
.invite-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    padding: 2.15rem 1.9rem 1.75rem;
    background: rgba(19, 31, 19, .5);
    border: 1px solid rgba(251, 238, 215, .22);
    border-radius: var(--leaf);
    box-shadow:
        inset 0 1px 0 rgba(251, 238, 215, .18),
        0 18px 44px rgba(19, 31, 19, .34);
    transition: transform .28s ease, border-color .28s ease, background-color .28s ease;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .invite-card {
        background: rgba(19, 31, 19, .42);
        -webkit-backdrop-filter: blur(16px) saturate(150%);
        backdrop-filter: blur(16px) saturate(150%);
    }
}
.invite-card:hover {
    transform: translateY(-5px);
    background: rgba(19, 31, 19, .56);
    border-color: rgba(247, 183, 49, .5);
}

.invite-card__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: .3rem;
    border-radius: var(--leaf-flip);
    background: rgba(247, 183, 49, .2);
    color: var(--color-accent);
    font-size: 1.35rem;
}
.invite-card__eyebrow {
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.invite-card h3 {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--color-white);
}
.invite-card p {
    margin: 0 0 .5rem;   /* with the card's gap, this is the air above the CTA */
    font-size: .9375rem;
    line-height: 1.7;
    color: rgba(251, 238, 215, .88);
}

/* The CTA is a gold pill with the arrow riding in its own puck. Note what is
   NOT here: no padding-top override. Zeroing it left the button with .875rem
   of bottom padding and none on top, which is what made the label sit high in
   a squashed pill. margin-top:auto alone pins it to the foot of the card, so
   the two cards' buttons line up whatever the copy does. */
.invite-card__cta {
    margin-top: auto;
    gap: 1rem;
    padding: .5rem .5rem .5rem 1.5rem;
    border-radius: 999px;
    font-size: 1rem;
    box-shadow: 0 10px 26px rgba(19, 31, 19, .32);
}
.invite-card__cta i {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(47, 79, 47, .18);
    font-size: .875rem;
    transition: background-color .22s ease, color .22s ease, transform .22s ease;
}
.invite-card__cta:hover i,
.invite-card__cta:focus-visible i {
    background: var(--color-accent);
    color: var(--color-primary);
    transform: translateX(3px);
}
.invite-card__cta:hover,
.invite-card__cta:focus-visible {
    box-shadow: 0 14px 32px rgba(19, 31, 19, .4);
}

@media (max-width: 767.98px) {
    .invite__grid { grid-template-columns: minmax(0, 1fr); }
    .invite-card { padding: 1.75rem 1.4rem 1.5rem; }
    .invite-card__cta { padding-left: 1.25rem; font-size: .9375rem; }
    .invite-card__cta i { width: 32px; height: 32px; }
}

/* -------------------------------------------------------------------------
   17e. Speaker dialog
   ---------------------------------------------------------------------- */

.speaker .modal-dialog { max-width: 620px; }
.speaker__panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 2.5rem clamp(1.5rem, 4vw, 3rem) 2.75rem;
    text-align: center;
    background: linear-gradient(150deg,
        var(--color-primary-deep) 0%,
        var(--color-night) 58%,
        #16301F 100%);
    border: 1px solid rgba(251, 238, 215, .16);
    border-radius: var(--leaf);
    color: rgba(251, 238, 215, .88);
}
/* The same mark as the disc above, blown up and sunk into the corner. */
.speaker__watermark {
    position: absolute;
    left: -.15em;
    bottom: -.34em;
    z-index: -1;
    font-size: 15rem;
    line-height: 1;
    color: rgba(251, 238, 215, .05);
    pointer-events: none;
}

.speaker__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: rgba(251, 238, 215, .7);
    font-size: 1rem;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.speaker__close:hover { background: rgba(251, 238, 215, .12); color: var(--color-white); }

.speaker__disc {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 1.15rem;
    border-radius: 50%;
    background: rgba(247, 183, 49, .16);
    border: 1px solid rgba(247, 183, 49, .45);
    color: var(--color-accent);
    font-size: 1.6rem;
}
.speaker__kicker {
    margin: 0 0 .6rem;
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.speaker__panel h2 {
    margin: 0 0 .9rem;
    font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
    line-height: 1.25;
    color: var(--color-white);
}
.speaker__text {
    max-width: 46ch;
    margin: 0 auto;
    font-size: .9375rem;
    line-height: 1.75;
    color: rgba(251, 238, 215, .84);
}

.speaker__formats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin: 1.35rem 0;
    padding: 0;
    list-style: none;
}
.speaker__formats li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .42rem .8rem;
    background: rgba(251, 238, 215, .08);
    border: 1px solid rgba(251, 238, 215, .2);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 600;
    color: rgba(251, 238, 215, .92);
}
.speaker__formats i { color: var(--color-accent); font-size: .85rem; }

.speaker__invite {
    max-width: 44ch;
    margin: 0 auto 1.5rem;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-white);
}

/* The address is the point of the dialog, so it is the one filled control. */
.speaker__mail {
    display: inline-flex;
    align-items: center;
    gap: .85rem;
    padding: .7rem 1.5rem .7rem .7rem;
    background: var(--color-accent);
    border-radius: 999px;
    color: var(--color-primary-deep);
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(247, 183, 49, .28);
    transition: transform .2s ease, box-shadow .2s ease;
}
.speaker__mail:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 38px rgba(247, 183, 49, .38);
    color: var(--color-primary-deep);
}
.speaker__mail-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(19, 31, 19, .12);
    font-size: 1.05rem;
}
.speaker__mail-body { display: grid; text-align: left; }
.speaker__mail-body small {
    font-family: var(--font-display);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .8;
}
.speaker__mail-body b {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}

@media (max-width: 575.98px) {
    .speaker__panel { padding: 2.1rem 1.25rem 2.25rem; }
    .speaker__watermark { font-size: 11rem; }
    .speaker__mail { padding: .6rem 1.15rem .6rem .6rem; gap: .65rem; }
    .speaker__mail-body b { font-size: .875rem; }
}

/* -------------------------------------------------------------------------
   17f. Talk to us dialog
   The attachment's layout — two columns of fields, a date range, a
   confirmation and one submit — in the site's own palette rather than its
   stock blue.
   ---------------------------------------------------------------------- */

.talkbox .modal-dialog { max-width: 760px; }
@media (max-height: 640px) {
    .talkbox__head { padding-block: 1rem; }
    .talkbox__head h2 { font-size: 1.25rem; }
}
.talkbox__panel {
    border: 0;
    border-radius: var(--leaf);
    overflow: hidden;
    background: var(--color-white);
    box-shadow: 0 28px 70px rgba(19, 31, 19, .34);
}

/* The head is the one dark band, so the form below it reads as paper. */
.talkbox__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.35rem 1.6rem;
    background: linear-gradient(135deg,
        var(--color-primary) 0%,
        var(--color-primary-deep) 100%);
}
.talkbox__kicker {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--font-body);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.talkbox__head h2 {
    margin: .4rem 0 0;
    font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
    color: var(--color-white);
}
.talkbox__close {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    background: rgba(251, 238, 215, .12);
    border: 0;
    border-radius: 50%;
    color: var(--color-white);
    font-size: 1rem;
    cursor: pointer;
    transition: background-color .22s ease, transform .22s ease;
}
.talkbox__close:hover { background: var(--color-accent); color: var(--color-primary); transform: rotate(90deg); }

.talkbox__form {
    display: flex;
    flex-direction: column;
    min-height: 0;      /* without this the form refuses to shrink */
    overflow: hidden;
    padding: 0;
}
.talkbox__body {
    min-height: 0;
    padding: 1.5rem 1.6rem;
}
.talkbox__panel { min-height: 0; }

/* The required-field asterisk is styled as `.field label span`, which
   also catches the wrapping labels below — hence the extra weight. */
.talkbox__range .talkbox__range-leg > span { color: var(--color-ink-soft); }
.field .talkbox__check > span { color: var(--color-text); font-weight: 400; }
.talkbox__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.15rem;
}
@media (max-width: 575.98px) {
    .talkbox__grid { grid-template-columns: minmax(0, 1fr); }
    .talkbox__body { padding: 1.15rem; }
    .talkbox__foot { padding: .9rem 1.15rem; }
    .talkbox__head { padding: 1.15rem 1.15rem; }
}

/* ---- the date range ---- */

.talkbox__range {
    margin: 0;
    padding: .9rem 1rem 1rem;
    border: 1px solid var(--color-hairline);
    border-radius: 12px;
    background: var(--color-light);
}
.talkbox__range legend {
    float: none;          /* Bootstrap floats legends; that breaks the box */
    width: auto;
    padding: 0;
    margin-bottom: .6rem;
    font-family: var(--font-display);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-primary);
}
.talkbox__range-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: .6rem;
}
.talkbox__range-row > i {
    padding-bottom: .7rem;
    color: var(--color-secondary-deep);
    font-size: .85rem;
}
.talkbox__range-leg { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.talkbox__range-leg span {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
}
.talkbox__range-leg input {
    width: 100%;
    padding: .6rem .75rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: .875rem;
    color: var(--color-text);
}
.talkbox__range-leg input:focus {
    outline: 2px solid var(--color-secondary);
    outline-offset: 1px;
    border-color: var(--color-secondary);
}
.talkbox__range-leg input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .65; }
.talkbox__range-leg input:hover::-webkit-calendar-picker-indicator { opacity: 1; }

.talkbox__hint {
    margin: .6rem 0 0;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--color-ink-soft);
}
/* Raised by the script when the range is impossible — a "to" before a "from",
   or either one in the past. */
.talkbox__hint.is-bad { color: var(--color-error); font-weight: 600; }
.talkbox__range-leg input[aria-invalid="true"] { border-color: var(--color-error); }

@media (max-width: 575.98px) {
    .talkbox__range-row { grid-template-columns: minmax(0, 1fr); }
    .talkbox__range-row > i { display: none; }
}

/* ---- the confirmation ---- */

.talkbox__check {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .85rem 1rem;
    background: var(--color-background);
    border-radius: 12px;
    font-size: .8125rem;
    line-height: 1.55;
    color: var(--color-text);
    cursor: pointer;
}
.talkbox__check input {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: .1rem;
    accent-color: var(--color-secondary);
}

/* ---- the foot ---- */

.talkbox__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .85rem 1rem;
    flex: none;
    margin: 0;
    padding: 1rem 1.6rem;
    background: var(--color-white);
    border-top: 1px solid var(--color-hairline);
}
.talkbox__note {
    margin: 0;
    font-size: .8125rem;
    color: var(--color-ink-soft);
}
.talkbox__note a { color: var(--color-secondary-deep); font-weight: 600; }

@media (max-width: 575.98px) {
    .talkbox__foot { flex-direction: column; align-items: stretch; }
    .talkbox__foot .btn-icm { justify-content: center; }
}


/* -------------------------------------------------------------------------
   18. FAQ accordion
   ---------------------------------------------------------------------- */

.accordion-icm {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: var(--color-hairline);
    --bs-accordion-border-radius: var(--radius-md);
    --bs-accordion-inner-border-radius: var(--radius-md);
    --bs-accordion-btn-padding-y: 1.15rem;
    --bs-accordion-btn-padding-x: 1.35rem;
    --bs-accordion-btn-color: var(--color-primary);
    --bs-accordion-btn-bg: var(--color-white);
    --bs-accordion-active-color: var(--color-primary);
    --bs-accordion-active-bg: var(--color-white);
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-body-padding-y: 0 1.35rem;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232F4F2F' stroke-width='2' stroke-linecap='round'%3e%3cpath d='M8 3v10M3 8h10'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23507C3A' stroke-width='2' stroke-linecap='round'%3e%3cpath d='M3 8h10'/%3e%3c/svg%3e");
    --bs-accordion-btn-icon-width: 1rem;
    --bs-accordion-btn-icon-transform: none;
}
.accordion-icm .accordion-item {
    margin-bottom: .75rem;
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.accordion-icm .accordion-button {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.4;
    box-shadow: none;
}
.accordion-icm .accordion-button:not(.collapsed) {
    border-bottom: 1px solid var(--color-hairline);
}
.accordion-icm .accordion-item:has(.accordion-button:not(.collapsed)) {
    border-color: var(--color-accent);
}
.accordion-icm .accordion-button:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: -3px;
}
.accordion-icm .accordion-body {
    padding: 1.15rem 1.35rem 1.4rem;
    font-size: .9375rem;
    line-height: 1.68;
    color: var(--color-text);
    max-width: 72ch;
}

/* -------------------------------------------------------------------------
   18a. FAQ topic cards
   ---------------------------------------------------------------------- */

/* Three titles and nothing else, so the card is a row rather than a stack:
   mark, name, arrow. A tall card with this little in it would be mostly
   empty space pretending to be design. */

.faqlinks__head {
    margin: 0 0 2rem;
    text-align: center;
}
/* One line at every width. The title is 26 characters, so the clamp is
   sized to fit rather than left on the page's --step-h2: at the 22px floor
   it needs about 270px, which clears a 320px viewport once the container
   padding is taken off. nowrap then guarantees it. */
.faqlinks__head h2 {
    margin: 0;
    font-size: clamp(1.375rem, 1.05rem + 1.5vw, 2.5rem);
    white-space: nowrap;
}
/* A short gold rule under it, the same mark the SDG band uses. */
.faqlinks__head h2::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    margin: 1rem auto 0;
    background: var(--color-accent);
    border-radius: 2px;
}

.faqlinks__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.faqlinks__grid > li { display: flex; }

.faq-card {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1.1rem 1.35rem;
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
    text-decoration: none;
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
/* A question mark, quietly, because the card is about questions. It warms
   and grows on hover instead of the card shouting. */
.faq-card::after {
    content: "?";
    position: absolute;
    right: 2.6rem;
    bottom: -.44em;
    z-index: -1;
    font-family: var(--font-display);
    font-size: 6rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(80, 124, 58, .07);
    transition: color .28s ease, transform .28s ease;
}
.faq-card:hover,
.faq-card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(247, 183, 49, .65);
    box-shadow: var(--shadow-md);
}
.faq-card:hover::after,
.faq-card:focus-visible::after {
    color: rgba(247, 183, 49, .2);
    transform: scale(1.06);
}

.faq-card__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: var(--leaf-flip);
    background: rgba(80, 124, 58, .12);
    color: var(--color-secondary-deep);
    font-size: 1.25rem;
    transition: background-color .28s ease, color .28s ease;
}
.faq-card:hover .faq-card__icon {
    background: var(--color-accent);
    color: var(--color-primary);
}

.faq-card h3 {
    flex: 1 1 auto;
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.3;
    color: var(--color-primary);
}

.faq-card__go {
    flex: none;
    font-size: 1rem;
    color: var(--color-secondary-deep);
    transition: transform .22s ease, color .22s ease;
}
.faq-card:hover .faq-card__go {
    color: var(--color-primary);
    transform: translateX(4px);
}

/* The three stay on one row right down to the phone breakpoint. They are
   compact enough for it once the chip and title step down a size; two-up
   would leave one card orphaned on a second row. */
@media (max-width: 991.98px) {
    .faqlinks__grid { gap: .75rem; }
    .faq-card { padding: .95rem 1rem; gap: .75rem; }
    .faq-card__icon { width: 40px; height: 40px; font-size: 1.1rem; }
    .faq-card h3 { font-size: .9375rem; }
    .faq-card::after { font-size: 5rem; right: 2.1rem; }
}
@media (max-width: 575.98px) {
    .faqlinks__grid { grid-template-columns: minmax(0, 1fr); }
    .faq-card { padding: .95rem 1.1rem; gap: .85rem; }
    .faq-card::after { font-size: 5rem; right: 2.2rem; }
}

/* -------------------------------------------------------------------------
   18c. Venue band
   The banner is a finished piece of artwork with its own lettering baked in,
   so the section is the heading and the image, nothing more. The venue name
   and address live in the image's alt text, which is the only place left
   that carries them for a screen reader or a search engine.
   ---------------------------------------------------------------------- */

.venue-band__head {
    margin: 0 0 1.75rem;
    text-align: center;
}
.venue-band__head .eyebrow::before { display: none; }   /* centred: it would sit off-axis */
.venue-band__head h2 {
    margin: .6rem 0 0;
    font-size: clamp(1.375rem, 1.15rem + .9vw, 2rem);
}

.venue-band__banner {
    margin: 0;
    border-radius: var(--leaf);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.venue-band__banner img {
    display: block;
    width: 100%;
    height: auto;
}

/* -------------------------------------------------------------------------
   18b. Submission band — present, or listen
   ---------------------------------------------------------------------- */

/* The one place Golden Sol is used as a ground rather than an accent. It
   sits between the dark photo band above and the cream FAQ below, so the
   page reads dark, gold, light: the gold is the punctuation, and the two
   choices in it are the point of the whole page. */
.submit-band {
    position: relative;
    padding-block: clamp(2.5rem, 1.5rem + 3vw, 3.75rem);
    background: var(--color-accent);
    overflow: hidden;
    --focus-ring: var(--color-primary-deep);
}
.submit-band__arcs {
    right: -5%;
    top: -85%;
    width: min(440px, 52vw);
    color: var(--color-primary);
    border-color: rgba(35, 59, 35, .18);
    opacity: .5;
}
.submit-band__inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.75rem 3rem;
}
/* The eyebrow's rule is cream elsewhere; on gold it has to go dark. */
.submit-band .eyebrow { color: var(--color-primary-deep); }
.submit-band .eyebrow::before { background: var(--color-primary-deep); }
.submit-band__lead {
    max-width: 44ch;
    margin: .9rem 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.125rem, 1rem + .55vw, 1.4375rem);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.01em;
    color: var(--color-primary-deep);
}
.submit-band .btn-icm { box-shadow: 0 8px 22px rgba(35, 59, 35, .18); }

@media (max-width: 767.98px) {
    .submit-band__inner { gap: 1.5rem; }
    .submit-band .btn-icm { flex: 1 1 100%; }
    .submit-band__arcs { display: none; }
}

/* -------------------------------------------------------------------------
   19. Final CTA
   ---------------------------------------------------------------------- */

.cta-band {
    position: relative;
    background: var(--color-primary);
    padding-block: clamp(3.5rem, 2rem + 4vw, 5.5rem);
    overflow: hidden;
    --focus-ring: var(--color-accent);
}
.cta-band__arcs {
    position: absolute;
    left: -6%;
    bottom: -60%;
    width: min(520px, 55vw);
    color: var(--color-accent);
    border-color: rgba(247, 183, 49, .22);
    opacity: .6;
}
.cta-band__inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
}
.cta-band h2 { color: var(--color-white); max-width: 18ch; }
.cta-band p { color: rgba(251, 238, 215, .84); max-width: 46ch; margin-top: 1rem; }

/* -------------------------------------------------------------------------
   20b. Quick downloads offcanvas
   A drawer, not a page: title, register action and close share one row, and
   the six cards sit under it in two compact rows. Bootstrap's offcanvas-top
   is a fixed 30vh, which cuts the second row in half, so the height is set
   to the content instead and capped well below full screen.
   ---------------------------------------------------------------------- */

.downloads-panel.offcanvas-top {
    /* No position here. Bootstrap's .offcanvas is position:fixed, and this
       selector outranks it — setting relative dropped the drawer back into
       the page flow, so it rendered inline above the footer instead of
       sliding over the page. The dot field still anchors correctly: a
       fixed ancestor is a containing block for absolute children. */
    /* bottom:auto is what makes the drawer hug its content. Bootstrap's base
       .offcanvas sets position:fixed AND bottom:0, and .offcanvas-top sets
       top:0. With a fixed height (its default 30vh) the bottom is ignored,
       but height:auto lets both edges apply and the drawer stretches the
       whole viewport — six cards at the top and a screenful of nothing
       under them. Releasing bottom leaves height driven by the content. */
    bottom: auto;
    height: auto;
    max-height: 82vh;   /* only bites on a short viewport */
    overflow-y: auto;
    background:
        radial-gradient(70% 120% at 8% 0%, rgba(80, 124, 58, .1) 0%, transparent 62%),
        radial-gradient(50% 110% at 96% 0%, rgba(247, 183, 49, .16) 0%, transparent 66%),
        var(--color-white);
    border-bottom: 2px solid var(--color-accent);
    box-shadow: 0 22px 54px rgba(19, 31, 19, .24);
    z-index: 1060;   /* above .nav-panel at 1050 */
}

/* The dot field the hero and the about panel both use, run across the drawer
   and masked so it fades out before it reaches the cards. */
.downloads-panel__field {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(47, 79, 47, .16) 1.5px, transparent 1.5px);
    background-size: 18px 18px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
    opacity: .5;
}

.downloads-panel__inner {
    position: relative;
    padding-block: clamp(1.25rem, 1rem + 1vw, 1.85rem);
}

.downloads-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-bottom: 1.15rem;
}
.downloads-panel__title h2 {
    margin: .35rem 0 0;
    font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem);
}
.downloads-panel__actions {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.downloads-panel__close {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    background: rgba(80, 124, 58, .1);
    border: 0;
    border-radius: 50%;
    color: var(--color-primary);
    font-size: 1rem;
    cursor: pointer;
    transition: background-color .22s ease, transform .22s ease;
}
.downloads-panel__close:hover { background: var(--color-accent); transform: rotate(90deg); }

.downloads-panel__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.downloads-panel__grid > li { display: flex; }

/* Name, format, action — nothing else. A downloads list is scanned, not read. */
.dl-card {
    display: flex;
    align-items: center;
    gap: .85rem;
    width: 100%;
    padding: .7rem .9rem;
    background: rgba(255, 255, 255, .82);
    border: 1px solid var(--color-hairline);
    border-radius: 12px;
    text-decoration: none;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.dl-card:hover,
.dl-card:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(80, 124, 58, .5);
    box-shadow: var(--shadow-sm);
}
.dl-card__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(80, 124, 58, .12);
    color: var(--color-secondary-deep);
    font-size: 1.15rem;
    transition: background-color .25s ease, color .25s ease;
}
.dl-card:hover .dl-card__icon { background: var(--color-secondary); color: var(--color-white); }

.dl-card__text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}
.dl-card__text b {
    font-family: var(--font-display);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-primary);
}
.dl-card__text small {
    font-size: .675rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
}
.dl-card__go {
    flex: none;
    font-size: 1rem;
    color: var(--color-secondary-deep);
    transition: transform .22s ease;
}
.dl-card:hover .dl-card__go { transform: translateY(2px); }

/* A file that has not been supplied yet. Same shape as its neighbours so the
   list keeps its rhythm, but visibly inert and with no hover affordance. */
.dl-card--soon {
    cursor: default;
    background: var(--color-light);
    border-style: dashed;
}
.dl-card--soon:hover { transform: none; box-shadow: none; border-color: var(--color-hairline); }
.dl-card--soon .dl-card__icon { background: rgba(47, 79, 47, .06); color: var(--color-ink-soft); }
.dl-card--soon:hover .dl-card__icon { background: rgba(47, 79, 47, .06); color: var(--color-ink-soft); }
.dl-card--soon b { color: var(--color-ink-soft); }
.dl-card--soon .dl-card__go { color: var(--color-ink-soft); }
.dl-card--soon:hover .dl-card__go { transform: none; }

@media (max-width: 991.98px) {
    .downloads-panel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .downloads-panel.offcanvas-top { max-height: 88vh; }
    .downloads-panel__grid { grid-template-columns: minmax(0, 1fr); }
    .downloads-panel__head { gap: .85rem; }
    .downloads-panel__actions { width: 100%; justify-content: space-between; }
}

/* -------------------------------------------------------------------------
   20. Footer
   ---------------------------------------------------------------------- */

.site-footer {
    background: var(--color-primary-deep);
    color: rgba(251, 238, 215, .78);
    padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 0;
    font-size: .9375rem;
    --focus-ring: var(--color-accent);
}
.footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: 2.5rem 2rem;
}
/* Same white plate in the footer, which is Palm Frond too. */
.footer__brand img {
    box-sizing: content-box;
    height: 54px;
    width: auto;
    display: block;
    padding: .5rem .75rem;
    margin-bottom: 1.25rem;
    background: var(--color-white);
    border-radius: var(--radius-md);
}
.footer__intro { max-width: 40ch; line-height: 1.65; }

.footer__col h2 {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 1.15rem;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .65rem; }
.footer__col a {
    color: var(--color-white);
    text-decoration: none;
    transition: color .2s ease;
}
.footer__col a:hover { color: var(--color-accent); }
.footer__col li > span { color: rgba(251, 238, 215, .78); }

/* Link columns. The icon sits in a chip that fills gold on hover while the
   whole row slides a few pixels right — one gesture, not three competing
   ones, and it reads as the row leaning toward the page it opens.

   The row is the hover target rather than the anchor's text, so the pointer
   does not have to find a 14px label. */
.footer__links li { display: flex; }
.footer__links a {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    transition: color .22s ease, transform .28s ease;
}
.footer__links a i {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(251, 238, 215, .08);
    color: rgba(251, 238, 215, .72);
    font-size: .8rem;
    transition: background-color .28s ease, color .28s ease, transform .28s ease;
}
.footer__links a:hover,
.footer__links a:focus-visible { transform: translateX(4px); }
.footer__links a:hover i,
.footer__links a:focus-visible i {
    background: var(--color-accent);
    color: var(--color-primary-deep);
    transform: rotate(-8deg) scale(1.06);
}

/* Nothing slides for anyone who asked for stillness; the colour change alone
   still says which row is under the pointer. */
@media (prefers-reduced-motion: reduce) {
    .footer__links a,
    .footer__links a i { transition: background-color .2s ease, color .2s ease; }
    .footer__links a:hover,
    .footer__links a:focus-visible { transform: none; }
    .footer__links a:hover i,
    .footer__links a:focus-visible i { transform: none; }
}
/* Contact rows carry a marker chip. The gap is set on the row rather than
   the icon so a wrapped address lines up under its own first line instead
   of running back under the chip. */
.footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
}
.footer__contact i {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    margin-top: -.1rem;
    border-radius: 8px;
    background: rgba(251, 238, 215, .1);
    color: var(--color-accent);
    font-size: .8rem;
    transition: background-color .22s ease, color .22s ease;
}
.footer__contact li:hover i {
    background: var(--color-accent);
    color: var(--color-primary-deep);
}

.footer__social { display: flex; gap: .6rem; margin-top: 1.5rem; }
.footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border: 1px solid rgba(251, 238, 215, .24);
    border-radius: var(--radius-sm);
    color: var(--color-accent);
    font-size: 1.05rem;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.footer__social a:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary);
}

.footer__alert {
    display: flex;
    gap: .875rem;
    align-items: flex-start;
    margin-top: 3rem;
    padding: 1.1rem 1.35rem;
    background: rgb(80 124 58 / 25%);
    border: 1px solid var(--color-secondary);
    border-radius: var(--radius-md);
    font-size: .85rem;
    line-height: 1.6;
    color: rgba(251, 238, 215, .92);
}
/* Gold, not the pale red this carried while the panel was red — the site's
   attention colour, and the only one that holds against Palm Lawn. */
.footer__alert i { color: var(--color-accent); font-size: 1.1rem; margin-top: .1rem; flex: none; }
.footer__alert b { color: var(--color-white); }

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-block: 1.5rem;
    border-top: 1px solid rgba(251, 238, 215, .16);
    font-size: .85rem;
}
.footer__bottom nav { display: flex; gap: 1.5rem; }
.footer__bottom a { color: rgba(251, 238, 215, .8); text-decoration: none; }
.footer__bottom a:hover { color: var(--color-accent); }

/* Floating contact affordances */
/* Two corners. --lift raises both clear of a bar pinned to the foot of the
   viewport, when one is showing. */
.float-actions {
    --edge: 1.25rem;
    --lift: 0px;
    position: fixed;
    bottom: calc(var(--edge) + var(--lift));
    z-index: 1040;
    display: flex;
    flex-direction: column;
    gap: .625rem;
}
.float-actions--left { left: var(--edge); }
/* The Tawk.to bubble sits in the bottom-right corner itself — about 60px
   tall at a 20px offset — so these start above it. */
.float-actions--right {
    right: var(--edge);
    bottom: calc(var(--edge) + 4.5rem + var(--lift));
}
/* The registration total bar and the homepage call-to-action bar both pin to
   the foot of the viewport; the corner buttons move up while either shows.
   The chat bubble lives in Tawk's own iframe and cannot follow. */
body:has(.feebar:not([hidden])) .float-actions,
body:has(.floatcta.is-visible) .float-actions { --lift: 4.75rem; }
.float-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--color-secondary);
    color: var(--color-white);
    font-size: 1.35rem;
    text-decoration: none;
    box-shadow: var(--shadow-md);
    transition: transform .2s ease, background-color .2s ease;
}
.float-actions a:hover { transform: translateY(-3px); background: var(--color-primary); color: var(--color-white); }
.float-actions .to-top { background: var(--color-primary); font-size: 1.15rem; }

/* -------------------------------------------------------------------------
   21. Inner page furniture
   ---------------------------------------------------------------------- */

.page-hero {
    position: relative;
    background: var(--color-primary);
    padding-top: calc(var(--top-offset) + clamp(1rem, 2vw, 2rem));
    padding-bottom: clamp(3rem, 2rem + 3.5vw, 5rem);
    overflow: hidden;
    --focus-ring: var(--color-accent);
}
.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--color-night) 0%, transparent 55%);
    opacity: .55;
    pointer-events: none;
}
.page-hero__arcs {
    position: absolute;
    top: -40%;
    right: -4%;
    width: min(460px, 48vw);
    color: var(--color-accent);
    border-color: rgba(247, 183, 49, .2);
    opacity: .5;
}
.page-hero__inner { position: relative; max-width: 60ch; }
.page-hero h1 {
    color: var(--color-white);
    font-size: clamp(2.125rem, 1.5rem + 2.4vw, 3.5rem);
    margin-block: 1rem .875rem;
}
.page-hero p { color: rgba(251, 238, 215, .86); font-size: var(--step-lede); max-width: 56ch; }

/* The trail sits in a glass chip rather than loose on the artwork: at 12px on
   a photographic hero, bare text has nothing to hold it. Inline-flex so the
   chip is only as wide as the trail. */
.crumbs {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: 0;
    padding: .38rem .95rem;
    list-style: none;
    background: rgba(251, 238, 215, .09);
    border: 1px solid rgba(251, 238, 215, .18);
    border-radius: 999px;
    font-size: .75rem;
    letter-spacing: .015em;
    color: rgba(251, 238, 215, .74);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .crumbs {
        -webkit-backdrop-filter: blur(10px) saturate(140%);
        backdrop-filter: blur(10px) saturate(140%);
    }
}
.crumbs li { display: inline-flex; align-items: center; gap: .4rem; }
.crumbs a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: rgba(251, 238, 215, .74);
    text-decoration: none;
    transition: color .2s ease;
}
.crumbs a i { font-size: .85rem; }
.crumbs a:hover,
.crumbs a:focus-visible { color: var(--color-accent); }
/* A thin slash rather than a slab: at this size a full-weight one reads as
   part of the words either side of it. */
.crumbs li:not(:last-child)::after {
    content: "/";
    margin-left: .25rem;
    opacity: .38;
    font-weight: 400;
}
.crumbs [aria-current="page"] {
    color: var(--color-background);
    font-weight: 600;
}

/* Generic two-column content block used across inner pages */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
.split--narrow-left { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.split img { width: 100%; border-radius: var(--leaf); display: block; }

.info-card {
    padding: 1.75rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: .75rem;
    height: 100%;
}
.info-card i { font-size: 1.5rem; color: var(--color-secondary); }
.info-card h3 { font-size: 1.0625rem; }
.info-card p { font-size: .9375rem; line-height: 1.62; }
.info-card--cream { background: var(--color-background); }

.step-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.step-list li { display: flex; gap: 1.25rem; }
.step-list b {
    flex: none;
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-accent);
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
}
.step-list h3 { font-size: 1.0625rem; margin-bottom: .3rem; }
.step-list p { font-size: .9375rem; line-height: 1.6; }

.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.check-list li { display: flex; gap: .7rem; align-items: flex-start; font-size: .9375rem; line-height: 1.6; }
.check-list i { color: var(--color-secondary); margin-top: .22rem; flex: none; }

.gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
.gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-md);
    display: block;
}
.gallery figure { margin: 0; }
.gallery figure:nth-child(4n+1) img,
.gallery figure:nth-child(4n+4) img { border-radius: var(--leaf); }

/* Agenda — a time-anchored list, not a decorative timeline */
.agenda { display: flex; flex-direction: column; }
.agenda__row {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: start;
    padding: 1.35rem 0;
    border-top: 1px solid var(--color-hairline);
}
.agenda__row:last-child { border-bottom: 1px solid var(--color-hairline); }
.agenda__row time {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .95rem;
    color: var(--color-secondary-deep);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.agenda__row h3 { font-size: 1.0625rem; margin-bottom: .3rem; }
.agenda__row p { font-size: .9rem; line-height: 1.6; color: var(--color-text); }
.agenda__tag {
    padding: .28rem .7rem;
    background: var(--color-background);
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--color-secondary-deep);
    white-space: nowrap;
}
.agenda__row--key { background: rgba(247, 183, 49, .1); }
.agenda__row--key .agenda__tag { background: var(--color-accent); color: var(--color-primary); }

.day-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .75rem 1.25rem;
    margin-bottom: 1.5rem;
}
.day-head h3 { font-size: var(--step-h3); }
.day-head span {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
}

@media (max-width: 767.98px) {
    .agenda__row {
        grid-template-columns: minmax(0, 1fr);
        gap: .5rem;
    }
    .agenda__tag { justify-self: start; }
}

/* Forms */
.field { display: flex; flex-direction: column; gap: .45rem; }
.field label {
    font-family: var(--font-display);
    font-size: .85rem;
    font-weight: 500;
    color: var(--color-primary);
}
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
    width: 100%;
    padding: .8rem 1rem;
    font-family: var(--font-body);
    font-size: .9375rem;
    color: var(--color-text);
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-sm);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:not([type="checkbox"]):not([type="radio"]):focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(80, 124, 58, .18);
}
.field .req { color: var(--color-error); }
.field-error { font-size: .8125rem; font-weight: 500; color: var(--color-error); }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--color-error); }
.form-note { font-size: .8125rem; color: var(--color-ink-soft); }

.notice {
    display: flex;
    gap: .875rem;
    align-items: flex-start;
    padding: 1.1rem 1.35rem;
    border-radius: var(--radius-md);
    border: 1px solid;
    font-size: .9375rem;
    line-height: 1.6;
}
.notice i { font-size: 1.15rem; margin-top: .1rem; flex: none; }
.notice--ok {
    background: rgba(80, 124, 58, .1);
    border-color: rgba(80, 124, 58, .4);
    color: var(--color-secondary-deep);
}
.notice--ok i { color: var(--color-secondary); }
.notice--error {
    background: rgba(217, 83, 79, .08);
    border-color: rgba(217, 83, 79, .4);
    color: #96322F;
}
.notice--error i { color: var(--color-error); }

.contact-rail { display: flex; flex-direction: column; gap: 1rem; }
.contact-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.25rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-md);
}
.contact-item i {
    width: 42px; height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    background: var(--color-background);
    border-radius: var(--radius-sm);
    color: var(--color-secondary-deep);
    font-size: 1.1rem;
}
.contact-item span {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
}
.contact-item a,
.contact-item strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1rem;
    color: var(--color-primary);
    text-decoration: none;
}
.contact-item a:hover { color: var(--color-secondary-deep); }

/* Downloads rail */
.downloads__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .875rem;
}
.download-link {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: 1rem 1.15rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: .9375rem;
    text-decoration: none;
    transition: border-color .2s ease, background-color .2s ease;
}
.download-link i:first-child { color: var(--color-secondary); font-size: 1.2rem; }
.download-link i:last-child { margin-left: auto; color: var(--color-ink-soft); font-size: .9rem; }
.download-link:hover { border-color: var(--color-secondary); background: var(--color-light); color: var(--color-primary); }

/* Services rail */
.services__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}
.service-card {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    padding: 1.65rem;
    background: var(--color-background);
    border-radius: var(--radius-lg);
    height: 100%;
}
.service-card i { font-size: 1.4rem; color: var(--color-secondary); }
.service-card h3 { font-size: 1.0625rem; }
.service-card p { font-size: .9rem; line-height: 1.58; }
.service-card a { margin-top: auto; padding-top: .75rem; }

/* -------------------------------------------------------------------------
   21b1. Split page hero
   -------------------------------------------------------------------------
   $page['hero'] = 'split'. The copy sits beside a photograph badged with the
   conference dates. Used where the page is an invitation rather than a
   reference — the picture is doing persuasion the copy cannot.
   ---------------------------------------------------------------------- */

.page-hero--split {
    padding-top: calc(var(--top-offset) + clamp(1rem, 2.5vw, 2.25rem));
    padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}
.page-hero--split .page-hero__inner {
    display: grid;
    gap: 2.5rem;
    align-items: center;
    max-width: none;
}
.page-hero--split .page-hero__copy { max-width: 40rem; }
.page-hero--split h1 {
    margin-block: 1.15rem .5rem;
    font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
}

/* The eyebrow becomes a bordered pill with a lit dot — it names the
   conference, so it reads as a badge rather than a section label. */
.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1rem;
    padding: .5rem 1.15rem;
    background: rgba(247, 183, 49, .1);
    border: 1px solid rgba(247, 183, 49, .5);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.hero-pill i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(247, 183, 49, .25);
}

.page-hero__strap {
    margin: 0 0 .85rem;
    font-family: var(--font-display);
    font-size: clamp(1.0625rem, 1rem + .4vw, 1.375rem);
    font-weight: 600;
    color: var(--color-accent);
}
.page-hero--split p { max-width: 52ch; }
.page-hero__actions { margin-top: 1.75rem; }

/* ---- the photograph ---- */

.page-hero__shot {
    position: relative;
    margin: 0;
}
.page-hero__shot img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--leaf);
    box-shadow: 0 26px 60px rgba(19, 31, 19, .45);
}
/* The dates badged onto the corner. Frosted, but not lightly: over a white
   patch of photograph a .55 fill leaves the gold at 2.15:1. At .80 it
   composites to #424C42, where the date reads 5.0:1 and the venue 6.9:1. */
.page-hero__shot figcaption {
    position: absolute;
    left: 1.25rem;
    bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1.25rem;
    background: rgba(19, 31, 19, .88);
    border: 1px solid rgba(251, 238, 215, .2);
    border-radius: 12px;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .page-hero__shot figcaption {
        background: rgba(19, 31, 19, .8);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        backdrop-filter: blur(14px) saturate(140%);
    }
}
.page-hero__shot figcaption b {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
}
.page-hero__shot figcaption span {
    font-size: .875rem;
    line-height: 1.4;
    color: rgba(251, 238, 215, .92);
}

@media (min-width: 992px) {
    .page-hero--split .page-hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
        gap: 3.5rem;
    }
}
@media (max-width: 991.98px) {
    /* Copy first on a narrow screen: the picture is support, not the message. */
    .page-hero--split .page-hero__shot { order: 2; }
    .page-hero__shot img { aspect-ratio: 16 / 10; }
}
/* -------------------------------------------------------------------------
   21b2. Centred page hero
   ---------------------------------------------------------------------- */

/* $page['align'] = 'center'. The band is also shallower: a centred crumb,
   heading and standfirst read as one compact block, and the deep padding the
   left-aligned hero needs just leaves a hole under it. */
.page-hero--centre {
    padding-top: calc(var(--top-offset) + clamp(.5rem, 1.2vw, 1.15rem));
    padding-bottom: clamp(1.75rem, 1.25rem + 1.6vw, 2.75rem);
}
/* 60ch is set for a ragged-right column; centred at that width the two edges
   look uneven, so the measure opens up. */
.page-hero--centre .page-hero__inner {
    max-width: 72ch;
    margin-inline: auto;
    text-align: center;
}
.page-hero--centre .crumbs,
.page-hero--centre .eyebrow { justify-content: center; }
.page-hero--centre h1 {
    margin-block: .75rem .625rem;
    text-wrap: balance;
}
.page-hero--centre p { margin-inline: auto; }
/* Scaled back with the band — at full size the pattern would swamp it. */
.page-hero--centre .page-hero__weave { height: clamp(96px, 15vw, 190px); }

/* -------------------------------------------------------------------------
   21c. Light page hero
   ---------------------------------------------------------------------- */

/* $page['hero'] = 'light'. Coconut Cream instead of Palm Frond, closed by a
   tiled SVG weave. Every colour is restated rather than inherited, because
   the dark hero's palette is cream-on-green and none of it survives the flip
   — Golden Sol on the current crumb measures 1.56:1 on cream. */
.page-hero--light {
    background:
        radial-gradient(80% 130% at 12% 0%, rgba(80, 124, 58, .12) 0%, transparent 60%),
        radial-gradient(60% 120% at 92% 10%, rgba(247, 183, 49, .18) 0%, transparent 64%),
        var(--color-background);
    padding-bottom: clamp(4rem, 3rem + 4vw, 6.5rem);
    --focus-ring: var(--color-primary-deep);
}
.page-hero--light::before { display: none; }   /* the dark wash the green hero needs */

.page-hero--light .crumbs {
    background: rgba(47, 79, 47, .07);
    border-color: rgba(47, 79, 47, .14);
    /* --color-ink-soft only reaches 4.1:1 on this chip, and the trail is
       12px. --color-text clears it at 7.6:1. */
    color: var(--color-text);
}
.page-hero--light .crumbs a,
.page-hero--light .crumbs a i { color: var(--color-secondary-deep); }
.page-hero--light .crumbs a:hover { color: var(--color-primary); }
.page-hero--light .crumbs [aria-current="page"] { color: var(--color-primary); font-weight: 600; }
.page-hero--light h1 { color: var(--color-primary-deep); }
.page-hero--light p { color: var(--color-ink-soft); }

/* The pattern sits flush at the foot of the band, tiled rather than stretched
   so the motifs keep their proportions at any width, and masked so it fades
   up into the ground instead of stopping on a hard edge. It runs behind the
   copy — .page-hero__inner is position:relative — so the text stays clear.
   Golden Sol on the green ground; Palm Lawn when the hero is light. */
/* $page['heroImage'] — vector artwork behind the band. It sits under the
   existing ::before wash, so the white heading keeps its contrast whatever
   the artwork is doing. */
.page-hero__art {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .95;
    pointer-events: none;
}
.page-hero:has(.page-hero__art)::before { background: rgba(19, 31, 19, .45); opacity: 1; }

.page-hero__weave {
    position: absolute;
    inset: auto 0 0 0;
    width: 100%;
    height: clamp(140px, 22vw, 300px);
    color: var(--color-accent);
    opacity: .16;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 70%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 70%);
}
.page-hero--light /* $page['heroImage'] — vector artwork behind the band. It sits under the
   existing ::before wash, so the white heading keeps its contrast whatever
   the artwork is doing. */
.page-hero__art {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .95;
    pointer-events: none;
}
.page-hero:has(.page-hero__art)::before { background: rgba(19, 31, 19, .45); opacity: 1; }

.page-hero__weave {
    color: var(--color-secondary);
    opacity: .26;
}

/* -------------------------------------------------------------------------
   21d. Guidelines page
   21h. Registration pages
   ---------------------------------------------------------------------- */

/* Four numbered blocks. The number is set as a ghost mark beside the heading
   rather than inside it, so it reads as a position in a sequence and never
   competes with the title. */
.guide__head {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 1.85rem;
}
.guide__head h2 { margin: 0; }
.guide__head p {
    max-width: 56ch;
    margin: .6rem 0 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-ink-soft);
}
.guide__sub {
    margin: 2.25rem 0 1.1rem;
    font-size: 1.25rem;
    color: var(--color-primary);
}

/* ---- the hard rules: label, then the rule itself ---- */

/* One row. auto-fit rather than a fixed column count because the two lists
   are different lengths — three specs on the abstract, five on the full
   paper — and both should sit on a single line at desktop width. */
.spec-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Stacked, not a row: at a fifth of the container there is no width for a
   label and its rule side by side. */
.spec {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .55rem;
    padding: 1.35rem 1.25rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-top: 3px solid var(--color-secondary);
    border-radius: 10px;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.spec:hover {
    border-color: rgba(247, 183, 49, .6);
    border-top-color: var(--color-accent);
    box-shadow: var(--shadow-sm);
    transform: translateY(-3px);
}
.spec__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: rgba(80, 124, 58, .12);
    color: var(--color-secondary-deep);
    font-size: 1.05rem;
}
.spec b {
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.3;
    color: var(--color-primary);
}
/* A narrower column needs a smaller rule and a tighter measure. */
.spec > span {
    font-size: .875rem;
    line-height: 1.6;
    color: var(--color-ink-soft);
}

/* ---- the panel that carries a list plus its call to action ---- */

.guide__panel {
    margin-top: 1.5rem;
    padding: 1.85rem 1.75rem;
    background: var(--color-background);
    border: 1px solid var(--color-cream-deep);
    border-radius: var(--leaf);
}
.guide__panel--flat {
    background: var(--color-light);
    border-color: var(--color-hairline);
}
.guide__panel h3 { margin: 0; font-size: 1.1875rem; color: var(--color-primary); }
.guide__panel-lead { margin: .5rem 0 1rem; font-size: 16px; color: var(--color-ink-soft); }
.guide__panel p { margin: 0; font-size: 16px; line-height: 1.7; }
.guide__panel p b { color: var(--color-primary); }

.tick-list {
    display: grid;
    gap: .7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tick-list li {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-text);
}
.tick-list i {
    flex: none;
    margin-top: .28rem;
    color: var(--color-secondary-deep);
}

/* ---- panels that carry a photograph ---- */

/* The image bleeds to the panel's own edge rather than sitting inside its
   padding, so the panel reads as one object instead of a box with a picture
   dropped in it. The padding moves onto the body. */
.guide__panel--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .72fr);
    align-items: stretch;
    padding: 0;
    overflow: hidden;
}
.guide__panel--split .guide__panel-body { padding: 1.85rem 1.75rem; }

/* The image is positioned out of the flow on purpose. Left in it, height:100%
   against a parent of indefinite height falls back to auto, so the photograph
   sized itself by its own 6:5 ratio, made the row 450px tall and left a void
   of cream under the button. Taken out, the row height comes from the copy
   alone and the photograph covers whatever that turns out to be. */
.guide__panel-media {
    position: relative;
    overflow: hidden;
    min-height: 280px;
    margin: 0;
}
.guide__panel-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* A Palm Frond scrim, deepening toward the foot. These are photographs of
   other events with their own branding in shot; the wash pulls the colour
   back to this palette and gives the caption something to sit on. It reaches
   .80 where the caption lands: over the worst case — a white patch of banner
   — that composites to #424C42, which holds Coconut Cream at 7.8:1. */
.guide__panel-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(196deg,
        rgba(47, 79, 47, .34) 0%,
        rgba(19, 31, 19, .3) 38%,
        rgba(19, 31, 19, .8) 100%);
}
.guide__panel-media figcaption {
    position: absolute;
    right: 1.35rem;
    bottom: 1.25rem;
    left: 1.35rem;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
}
.guide__panel-media figcaption b {
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.35;
    color: var(--color-white);
}
.guide__panel-tag {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    background: rgba(247, 183, 49, .92);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-primary);
}

/* The photograph beside the review timeline holds its place while the seven
   steps scroll past it. */
.guide__track {
    display: grid;
    gap: 2.5rem;
    align-items: start;
}
.guide__aside { margin: 0; }
.guide__aside img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--leaf);
    box-shadow: var(--shadow-md);
}
.guide__aside figcaption {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin-top: 1rem;
    padding-left: 1rem;
    border-left: 3px solid var(--color-accent);
}
.guide__aside figcaption b {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--color-primary);
}
.guide__aside figcaption span {
    font-size: .875rem;
    line-height: 1.6;
    color: var(--color-ink-soft);
}

@media (min-width: 992px) {
    .guide__track { grid-template-columns: minmax(0, 1fr) minmax(0, .62fr); }
    .guide__aside { position: sticky; top: calc(var(--top-offset) + 1.5rem); }
}
@media (max-width: 767.98px) {
    .guide__panel--split { grid-template-columns: minmax(0, 1fr); }
    /* Photograph first on a phone: it is the thing that says what the panel
       is about before any of the copy is read. */
    .guide__panel--split .guide__panel-media { order: -1; }
    .guide__panel-media { min-height: 210px; }
    .guide__track { gap: 1.75rem; }
}
/* ---- the four formatting rules ---- */

.rule-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.rule-card {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1.65rem 1.4rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.rule-card:hover {
    transform: translateY(-4px);
    border-color: rgba(80, 124, 58, .45);
    box-shadow: var(--shadow-sm);
}
.rule-card__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--leaf-flip);
    background: rgba(247, 183, 49, .2);
    color: #9A6E05;
    font-size: 1.15rem;
}
.rule-card p {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--color-text);
}

/* ---- the eight manuscript sections ---- */

.section-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.section-card {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: 1.35rem 1.25rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: 10px;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.section-card:hover {
    border-color: rgba(80, 124, 58, .45);
    box-shadow: var(--shadow-sm);
    transform: translateY(-3px);
}
.section-card__num {
    font-family: var(--font-display);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
}
.section-card b { font-size: 1rem; color: var(--color-primary); }
.section-card > span { font-size: .875rem; line-height: 1.55; color: var(--color-ink-soft); }

/* ---- the review timeline ---- */

.track-steps {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.track-step {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.25rem;
    padding-bottom: 1.75rem;
}
/* The connector is drawn on the step, not between them, so the last one can
   simply not have it. */
.track-step::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 44px;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, rgba(80, 124, 58, .35), rgba(80, 124, 58, .12));
}
.track-step:last-child { padding-bottom: 0; }
.track-step:last-child::before { display: none; }

.track-step__node {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-white);
    border: 2px solid rgba(80, 124, 58, .35);
    color: var(--color-primary);
    font-family: var(--font-display);
    font-size: .9375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.track-step:hover .track-step__node {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-white);
}

.track-step__body { padding-top: .35rem; }
.track-step__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
    margin-bottom: .3rem;
}
.track-step__head b { font-size: 1.0625rem; color: var(--color-primary); }
/* The turnaround time is the useful part of these steps, so it is lifted out
   of the sentence and set as a marker. */
.track-step__when {
    padding: .2rem .6rem;
    background: rgba(247, 183, 49, .24);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #7A5604;
}
.track-step__body p {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--color-ink-soft);
}

/* ---- the help line ---- */

.guide__help {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: none;
    margin: 2.25rem 0 0;
    padding: 1.25rem 1.5rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-text);
}
.guide__help-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--leaf-flip);
    background: rgba(80, 124, 58, .12);
    color: var(--color-secondary-deep);
    font-size: 1.2rem;
}
.guide__help a {
    color: var(--color-secondary-deep);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.guide__help a:hover { color: var(--color-primary); }

@media (max-width: 991.98px) {
    .rule-grid,
    .section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .guide__head { gap: .9rem; }
    .rule-grid,
    .section-grid { grid-template-columns: minmax(0, 1fr); }
    .spec { padding: 1.1rem 1.1rem; }
    .track-step { gap: .9rem; }
    .track-step::before { left: 18px; top: 40px; }
    .track-step__node { width: 38px; height: 38px; font-size: .875rem; }
    .guide__help { flex-direction: column; align-items: flex-start; padding: 1.15rem 1.15rem; }
}

/* -------------------------------------------------------------------------
   21b. Other services by IFERP — the homepage band
   Scoped under .services so the plainer .service-card on conference.php is
   left alone.
   ---------------------------------------------------------------------- */

.services__head {
    /* Every child is centred on the same axis, so the block reads as one
       column rather than a stack of differently-centred lines. */
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 58rem;
    margin-inline: auto;
    margin-bottom: 3rem;
    text-align: center;
}
.services__head h2 {
    margin: 0;
    text-wrap: balance;
}
/* The fourteen-word sentence is a standfirst, not a headline: set at 19px
   under the short title, where at heading scale it swallowed the band.
   The measure is 48ch — the sentence is 92 characters, so just over half
   of it forces the break onto two lines, and text-wrap: balance then
   evens them rather than leaving a short tail on the second. */
.services__quote {
    max-width: 48ch;
    margin: 1rem 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    text-wrap: balance;
    color: var(--color-secondary-deep);
}
.services__lead {
    max-width: 52ch;
    margin: .9rem 0 1.75rem;
    font-size: 16px;
    line-height: 1.7;
    text-align: center;
    color: var(--color-ink-soft);
}

.services .services__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.services .services__grid > li { display: flex; }

/* Each card carries its own accent through --svc, so the four read as four
   distinct tools rather than one card printed four times. */
.services .service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Centred to match the head above it: a left-aligned card under a
       centred sentence reads as two different layouts stacked. */
    align-items: center;
    text-align: center;
    gap: .6rem;
    width: 100%;
    height: 100%;
    padding: 2.4rem 1.5rem 1.6rem;
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
    text-decoration: none;
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
/* A rule along the top edge that draws across on hover. */
.services .service-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 0;
    height: 3px;
    background: var(--svc);
    transition: width .34s ease;
}
.services .service-card:hover,
.services .service-card:focus-visible {
    transform: translateY(-5px);
    border-color: var(--svc-line);
    box-shadow: var(--shadow-md);
}
.services .service-card:hover::before,
.services .service-card:focus-visible::before { width: 62%; }

.service-card--leaf  { --svc: var(--color-secondary-deep); --svc-soft: rgba(80, 124, 58, .12);  --svc-line: rgba(80, 124, 58, .55);  --svc-on: var(--color-white); }
.service-card--sky   { --svc: var(--color-info-deep);      --svc-soft: rgba(26, 114, 176, .12); --svc-line: rgba(26, 114, 176, .5);  --svc-on: var(--color-white); }
.service-card--gold  { --svc: #9A6E05;                     --svc-soft: rgba(247, 183, 49, .22); --svc-line: rgba(247, 183, 49, .75); --svc-on: var(--color-primary); }
.service-card--frond { --svc: var(--color-primary);        --svc-soft: rgba(47, 79, 47, .1);    --svc-line: rgba(47, 79, 47, .5);    --svc-on: var(--color-white); }
/* The gold card fills with Golden Sol itself; the other three fill with
   their own accent, which is already dark enough to carry white. */
.service-card--gold:hover .service-card__icon { background: var(--color-accent); }

.services .service-card__icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: .55rem;
    border-radius: 50%;
    background: var(--svc-soft);
    /* A second ring at roughly half the fill, so the disc sits in its own
       colour rather than flat on a white card. */
    box-shadow: 0 0 0 9px var(--svc-ring);
    color: var(--svc);
    font-size: 1.5rem;
    transition: background-color .28s ease, color .28s ease,
                box-shadow .28s ease, transform .28s ease;
}
/* The glyph has to inherit. The plainer .service-card used on conference.php
   pins `.service-card i` to Palm Lawn, which leaked in here and left a dark
   green mark sitting on a filled disc on hover — effectively invisible. */
.services .service-card__icon i { color: inherit; font-size: inherit; }

.services .service-card:hover .service-card__icon,
.services .service-card:focus-visible .service-card__icon {
    background: var(--svc);
    color: var(--svc-on);
    box-shadow: 0 0 0 12px var(--svc-ring);
    transform: translateY(-2px);
}

.services .service-card h3 {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.35;
    color: var(--color-primary);
}
.services .service-card h3 { text-wrap: balance; }
.services .service-card p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.65;
    /* Overrides the shared justified-prose rule: justified text in a
       narrow centred card opens rivers between the words. */
    text-align: center;
    -webkit-hyphens: none;
    hyphens: none;
    color: var(--color-ink-soft);
}

.service-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin-top: auto;
    padding-top: 1.1rem;
    font-family: var(--font-display);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--svc);
}
.service-card__cta i { transition: transform .22s ease; }
.services .service-card:hover .service-card__cta i { transform: translateX(4px); }

@media (max-width: 991.98px) {
    .services .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .services .services__grid { grid-template-columns: minmax(0, 1fr); }
    .services .service-card { padding: 1.5rem 1.35rem 1.25rem; }
    .services__head { margin-bottom: 2.25rem; }
}

/* -------------------------------------------------------------------------
   21c. Venue page
   ---------------------------------------------------------------------- */

/* ---- where it is ---- */

.venueloc__head { margin-bottom: 1.75rem; }
.venueloc__head h2 { margin: 0; }

/* Equal-height columns. The details column stretches to the map's height
   instead of the two starting together and ending wherever they like. */
.venueloc__split {
    display: grid;
    gap: 1.25rem;
    align-items: stretch;
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
    overflow: hidden;
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) {
    .venueloc__split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0; }
}

.venueloc__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* The map link used to be pinned to the foot with margin-top:auto, which
       is what held this column level with the map. With it gone the remaining
       copy centres against the map instead of stranding space beneath it. */
    justify-content: center;
    gap: 1.15rem;
    padding: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
}
.venueloc__body h3 {
    margin: 0;
    /* Enlarged with the same correction that removed the link: the name and
       address are the only copy here now, so they carry the column. */
    font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
    line-height: 1.25;
    color: var(--color-primary);
    text-wrap: balance;
}
.venueloc__address {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    width: 100%;
    margin: 0;
    padding: 1.05rem 1.2rem;
    background: var(--color-background);
    border-radius: 12px;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--color-text);
}
.venueloc__address i { flex: none; margin-top: .15rem; color: var(--color-secondary-deep); }

.venueloc__map { min-height: 300px; background: var(--color-light); }
.venueloc__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 300px;
    border: 0;
}

/* ---- places ---- */

.places__head {
    max-width: 60ch;
    margin: 0 0 2rem;
}
.places__head h2 { margin: 0; }
.places__head p {
    margin: .75rem 0 0;
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--color-ink-soft);
}

/* One shape, six times. The descriptions run to different lengths, so a
   mosaic of mixed spans left ragged edges everywhere; equal cards on a plain
   grid line up on every row instead. */
.places__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.place {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.place:hover {
    transform: translateY(-5px);
    border-color: rgba(80, 124, 58, .45);
    box-shadow: var(--shadow-md);
}

/* A fixed ratio on the frame, so every card's text starts on the same line
   whatever the photograph's own proportions are. */
.place__shot {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-light);
}
.place__shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.place:hover .place__shot img { transform: scale(1.05); }

/* Stands in for a photograph that has not been supplied. */
.place__placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 30% 20%, rgba(80, 124, 58, .28) 0%, transparent 60%),
        var(--color-primary);
    color: rgba(247, 183, 49, .8);
    font-size: 2.5rem;
}
.place__placeholder::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(251, 238, 215, .18) 1.5px, transparent 1.5px);
    background-size: 18px 18px;
    opacity: .5;
}

.place__no {
    position: absolute;
    left: .85rem;
    top: .85rem;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--color-accent);
    color: var(--color-primary);
    font-family: var(--font-display);
    font-size: .9375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 4px 12px rgba(19, 31, 19, .25);
}

.place__body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.25rem 1.35rem 1.4rem;
}
.place__body h3 {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.35;
    color: var(--color-primary);
    text-wrap: balance;
}
.place__body p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.65;
    color: var(--color-ink-soft);
}

/* A figure used as a .split column. Only the margin is needed — .split img
   already sets the width, radius and display for anything inside it. */
.split-shot { margin: 0; }

/* A composite sheet — a poster of many small items in one picture. Capped
   because these run to nearly twice their width in height; at full column
   width the faces are large and the page becomes a very long scroll. */
.sheet {
    max-width: 62rem;
    margin: 0 auto;
    padding: clamp(.75rem, 1.5vw, 1.25rem);
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
    box-shadow: var(--shadow-sm);
}
.sheet img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

@media (max-width: 991.98px) {
    .places__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .places__grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .venueloc__map { min-height: 240px; }
    .venueloc__map iframe { min-height: 240px; }
}

/* -------------------------------------------------------------------------
   22. Motion
   ---------------------------------------------------------------------- */

/* Elements start hidden only when JS can animate them; the `js-motion` class
   is set by main.js so a no-JS visitor sees everything immediately. */
.js-motion .reveal { opacity: 0; }
.js-motion .reveal.is-shown { opacity: 1; }

/* Photographs answer the pointer with one slow, small push in. The gallery,
   the vision grid and the speaker cards already did this; these are the
   frames that were left flat. Same scale and same duration everywhere, so
   the site behaves as one thing rather than per-component. */
.about__media img,
.engage-card__media img,
.guide__panel-media img,
.mode__media img,
.regflow__shot img,
.track__media img {
    transition: transform .55s ease;
}
/* Card-shaped hosts take the hover on the whole card; a bare frame takes it
   on itself. Either way the cursor never has to find the photograph. */
.about__media:hover img,
.engage-card:hover .engage-card__media img,
.guide__panel:hover .guide__panel-media img,
.mode__media:hover img,
.regflow__shot:hover img,
.track__media:hover img {
    transform: scale(1.045);
}

@media (prefers-reduced-motion: reduce) {
    .about__media img,
    .engage-card__media img,
    .guide__panel-media img,
    .mode__media img,
    .regflow__shot img,
    .track__media img { transition: none; }

    .about__media:hover img,
    .engage-card:hover .engage-card__media img,
    .guide__panel:hover .guide__panel-media img,
    .mode__media:hover img,
    .regflow__shot:hover img,
    .track__media:hover img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .js-motion .reveal { opacity: 1; }
}

/* -------------------------------------------------------------------------
   23. Responsive
   ---------------------------------------------------------------------- */

/* Laptop */
@media (max-width: 1399.98px) {
    .partners__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1199.98px) {
    :root { --section-y: 80px; }

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

    /* A white sheet, not a dark one: the rows are tinted pills in Palm Lawn,
       which is how the brand reads on a light ground everywhere else. */
    .nav-panel {
        position: fixed;
        inset: 0 0 0 auto;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        width: min(392px, 90vw);
        padding: 1.15rem 1.15rem 2rem;
        background: var(--color-white);
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform .3s ease;
        box-shadow: -12px 0 40px rgba(35, 59, 35, .28);
        z-index: 1050;
    }
    .nav-panel.is-open { transform: translateX(0); }

    .nav-panel__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding-bottom: 1.15rem;
        margin-bottom: 1rem;
        border-bottom: 1px solid var(--color-hairline);
    }
    .brand--panel img { height: 44px; width: auto; padding: 0; background: none; }
    /* The header's toggle is cream-on-dark; inside the white sheet it needs
       the opposite. */
    .nav-panel__head .nav-toggle {
        background: transparent;
        border-color: transparent;
        color: var(--color-primary);
        font-size: 1.15rem;
    }
    .nav-panel__head .nav-toggle:hover { background: rgba(80, 124, 58, .1); }

    .nav-menu {
        flex-direction: column;
        align-items: stretch;
        gap: .3rem;
    }
    .nav-menu > li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0;
    }
    .nav-menu > li > .nav-link-icm { flex: 1 1 auto; }
    /* The indent has to come out of the basis, not be added to it: at a
       flat 100% the submenu hangs its own margin past the row and the
       panel picks up a horizontal scrollbar. */
    .nav-menu > li > .nav-drop { flex: 1 0 calc(100% - 1.5rem); }
    .nav-sub-toggle { display: inline-flex; }

    /* Each row is a full-width tinted pill with its own icon. */
    .nav-link-icm {
        justify-content: flex-start;
        gap: .8rem;
        padding: .95rem 1rem;
        font-size: 1rem;
        font-weight: 600;
        color: var(--color-text);
        background: rgba(80, 124, 58, .07);
        border-radius: 10px;
    }
    .nav-link-icm__icon {
        flex: none;
        font-size: 1.1rem;
        color: var(--color-secondary);
        transition: color .2s ease;
    }
    .nav-link-icm:hover,
    .nav-link-icm:focus-visible {
        color: var(--color-primary);
        background: rgba(80, 124, 58, .13);
    }
    .nav-link-icm:hover .nav-link-icm__icon { color: var(--color-primary); }

    /* Current page, and the section the visitor has opened, both read as the
       one active row. */
    .nav-menu > li.is-active > .nav-link-icm::after { display: none; }
    .nav-menu > li.is-active > .nav-link-icm,
    .nav-menu > li.is-expanded > .nav-link-icm {
        color: var(--color-primary);
        background: rgba(80, 124, 58, .15);
    }
    .nav-menu > li.is-active > .nav-link-icm .nav-link-icm__icon,
    .nav-menu > li.is-expanded > .nav-link-icm .nav-link-icm__icon {
        color: var(--color-primary);
    }

    /* The chevron sits on the pill rather than beside it. */
    .nav-sub-toggle,
    .nav-link-icm--parent .bi-chevron-down {
        color: var(--color-secondary-deep);
    }
    .nav-sub-toggle {
        position: absolute;
        right: .55rem;
        top: .5rem;              /* the row, not the li, which grows when open */
        width: 34px;
        height: 34px;
        background: transparent;
        border: 0;
        font-size: .75rem;
    }
    .nav-sub-toggle:hover { background: rgba(80, 124, 58, .12); border-radius: 8px; }
    .nav-link-icm--parent { position: relative; }
    .nav-link-icm--parent .bi-chevron-down {
        position: absolute;
        right: 1.1rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: .75rem;
        opacity: 1;
    }
    .nav-sub-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
    .nav-link-icm--parent[aria-expanded="true"] .bi-chevron-down {
        transform: translateY(-50%) rotate(180deg);
    }

    /* Children hang off a rule, the way an indented list should. */
    .nav-drop {
        position: static;
        min-width: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: none;
        border: 0;
        border-left: 1px solid rgba(80, 124, 58, .3);
        box-shadow: none;
        border-radius: 0;
        margin: .35rem 0 .35rem 1.5rem;
        padding: 0 0 0 .35rem;
        display: none;
    }
    .nav-drop.is-open { display: block; }
    .nav-drop a {
        display: flex;          /* desktop sets block; the icon needs a row */
        align-items: center;
        gap: .7rem;
        padding: .7rem .75rem;
        color: var(--color-text);
        font-size: .9375rem;
        font-weight: 500;
        border-radius: 8px;
    }
    .nav-drop a i {
        display: inline-block;
        flex: none;
        font-size: 1rem;
        color: var(--color-secondary);
    }
    /* Marks a menu entry that leaves the conference site. Pushed to the end of
   the row so it reads as a property of the link, not part of its label. */
.nav-drop__away {
    margin-left: auto;
    padding-left: .5rem;
    font-size: .7rem;
    opacity: .55;
}
a:hover > .nav-drop__away,
a:focus-visible > .nav-drop__away { opacity: 1; }

.nav-drop a:hover,
    .nav-drop a:focus-visible,
    .nav-drop a[aria-current="page"] {
        background: rgba(80, 124, 58, .1);
        color: var(--color-primary);
    }

    .nav-panel__cta {
        margin-top: 1.5rem;
        padding-top: 1.25rem;
        border-top: 1px solid var(--color-hairline);
    }

    .nav-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(35, 59, 35, .55);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility .3s;
        z-index: 1045;
    }
    .nav-backdrop.is-open { opacity: 1; visibility: visible; }

    /* Nav shell is still 84px here; only the announcement bar narrows. */

    .fact-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fact-brand { grid-column: 1 / -1; }
    .hero__pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero__people { width: min(1400px, 170%); opacity: .4; }

    .speakers__grid,
    .pricing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Tablet */
@media (max-width: 991.98px) {
    html { scroll-padding-top: 90px; }

    .topbar__place { display: none; }

    .about__grid,
    .split,
    .split--narrow-left { grid-template-columns: minmax(0, 1fr); }
    .about__media { max-width: 520px; }
    .about__stamp { right: 1rem; }

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

    .review { flex-basis: calc((100% - 1.25rem) / 2); }
    .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .downloads__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .section-head { margin-bottom: 2.5rem; }
}

/* Mobile */
@media (max-width: 767.98px) {
    :root { --section-y: 60px; --gutter: 1.125rem; }

    /* The ribbon becomes a ticker rather than dropping half its content:
       both copies show, the track slides by exactly one copy, and the
       loop has no visible seam. */
    .topbar__rail {
        overflow: hidden;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    }
    .topbar__track {
        width: max-content;
        animation: topbar-drift 26s linear infinite;
        will-change: transform;
    }
    .topbar__rail:hover .topbar__track,
    .topbar__rail:focus-within .topbar__track { animation-play-state: paused; }
    .topbar__group {
        width: auto;
        justify-content: flex-start;
        gap: 1.6rem;
        padding-right: 1.6rem;
    }
    .topbar__group + .topbar__group { display: flex; }
    .topbar__place { display: inline-flex; }
    .topbar__meta { flex-wrap: nowrap; gap: 1.6rem; }
    .topbar__meta a,
    .topbar__place { white-space: nowrap; }
    .topbar__social { display: flex; }

    @keyframes topbar-drift {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }
    }

    .nav-shell { min-height: 72px; }
    .brand img { height: 44px; }

    :root { --top-offset: 118px; }

    .hero__theme-chip {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
        border-radius: var(--radius-lg);
        padding: 1.15rem 1.35rem;
        text-align: left;
    }
    .hero__people { width: min(1200px, 210%); opacity: .34; }

    .speakers__grid,
    .pricing__grid,
    .tracks__grid,
    .services__grid,
    .downloads__grid { grid-template-columns: minmax(0, 1fr); }
    .review { flex-basis: 86%; }

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

    .reviews { padding: 1.75rem 1.25rem; border-radius: var(--radius-lg); }

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

    .cta-band__inner { gap: 1.75rem; }
    .cta-band h2 { max-width: none; }

    .float-actions { --edge: .875rem; }
    .float-actions a { width: 46px; height: 46px; font-size: 1.2rem; }
}

/* Small mobile */
@media (max-width: 575.98px) {
    .stats__grid { grid-template-columns: minmax(0, 1fr); }
    .stat { padding: 1.25rem 1rem; }

    .fact-strip { grid-template-columns: minmax(0, 1fr); }
    .fact-cell {
        flex-direction: row;
        align-items: center;
        gap: .875rem;
        text-align: left;
        padding: 1.1rem 1.25rem;
    }
    .fact-cell > div { align-items: flex-start; }
    .hero__pillars { grid-template-columns: minmax(0, 1fr); }

    .btn-row .btn-icm { width: 100%; }

    .footer__grid { grid-template-columns: minmax(0, 1fr); }
    .footer__bottom { flex-direction: column; align-items: flex-start; }

    .milestone__card,
    .price-card,
    .track-card { padding: 1.5rem 1.25rem; }
}

/* Print — the important dates and programme are the pages people print. */
@media print {
    .topbar, .site-header, .float-actions, .cta-band, .nav-backdrop { display: none !important; }
    body { background: #fff; color: #000; }
    .section { padding-block: 1.5rem; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}
/* -------------------------------------------------------------------------
   21f2. Submission FAQ
   ---------------------------------------------------------------------- */

.subfaq__split {
    display: grid;
    gap: 2.5rem;
    align-items: start;
}

/* The aside states the shape of the page and offers the two ways out of it,
   then holds its place while the answers scroll past. */
.subfaq__aside h2 {
    margin: 0 0 .9rem;
    font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
    text-wrap: balance;
}
.subfaq__aside p {
    max-width: 40ch;
    margin: 0 0 1.5rem;
    font-size: 16px;
    line-height: 1.75;
    color: var(--color-ink-soft);
}
.subfaq__mark {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 1.15rem;
    border-radius: var(--leaf-flip);
    background: rgba(247, 183, 49, .24);
    color: #7A5604;
    font-size: 1.5rem;
}

/* Q1..Q7 in the button, because the organiser numbers them and a reader
   quoting one back will quote the number. */
.subfaq__list .accordion-button { align-items: flex-start; gap: .9rem; }
.subfaq__no {
    flex: none;
    padding: .2rem .5rem;
    background: rgba(80, 124, 58, .14);
    border-radius: 6px;
    font-family: var(--font-display);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--color-secondary-deep);
    font-variant-numeric: tabular-nums;
    transition: background-color .25s ease, color .25s ease;
}
.subfaq__list .accordion-button:not(.collapsed) .subfaq__no {
    background: var(--color-accent);
    color: var(--color-primary);
}
.subfaq__q { min-width: 0; }

.subfaq__lead {
    margin: 0 0 .9rem;
    font-size: .9375rem;
    color: var(--color-ink-soft);
}

/* The best-paper criteria: term and its test, side by side. */
.criteria {
    display: grid;
    gap: .7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.criteria li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: .7rem;
}
.criteria__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-top: .1rem;
    border-radius: 50%;
    background: rgba(80, 124, 58, .14);
    color: var(--color-secondary-deep);
    font-size: .75rem;
}
.criteria b {
    display: block;
    font-family: var(--font-display);
    font-size: .9375rem;
    color: var(--color-primary);
}
.criteria small {
    display: block;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--color-ink-soft);
}

@media (min-width: 992px) {
    .subfaq__split { grid-template-columns: minmax(0, .72fr) minmax(0, 1fr); gap: 3.5rem; }
    .subfaq__aside { position: sticky; top: calc(var(--top-offset) + 1.5rem); }
}
@media (min-width: 576px) {
    .criteria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1.5rem; }
}
/* -------------------------------------------------------------------------
   21g. Mode of presentation
   ---------------------------------------------------------------------- */

.modes__head {
    max-width: 46rem;
    margin: 0 auto 2.25rem;
    text-align: center;
}
.modes__head h2 { margin: 0; text-wrap: balance; }
.modes__head p {
    max-width: 58ch;
    margin: .9rem auto 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-ink-soft);
}

/* ---- the three tabs ---- */

/* Three equal tabs rather than a scrolling strip: there are only ever three
   modes, and showing all of them at once is what makes the choice obvious. */
.modes__tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
    border: 0;
}
.modes__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    width: 100%;
    padding: .95rem 1.15rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
    transition: background-color .25s ease, border-color .25s ease,
                color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.modes__tab:hover {
    border-color: rgba(80, 124, 58, .5);
    transform: translateY(-2px);
}
.modes__tab-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: var(--leaf-flip);
    background: rgba(80, 124, 58, .12);
    color: var(--color-secondary-deep);
    font-size: 1.05rem;
    transition: background-color .25s ease, color .25s ease;
}
/* The selected tab is the dark one, so the panel below reads as hanging off
   it rather than floating on its own. */
.modes__tab.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-sm);
}
.modes__tab.active .modes__tab-icon {
    background: rgba(247, 183, 49, .22);
    color: var(--color-accent);
}

/* ---- one mode ---- */

.mode__intro {
    display: grid;
    gap: 1.75rem;
    align-items: center;
    margin-bottom: 2rem;
}
.mode__media {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--leaf);
}
.mode__media img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
/* The photograph is captioned with the mode it illustrates, over a foot of
   scrim deep enough to carry the type on any of the three images. */
.mode__media figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 2.5rem 1.25rem 1.1rem;
    background: linear-gradient(180deg, transparent, rgba(19, 31, 19, .9));
    font-family: var(--font-display);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--color-white);
}
.mode__media figcaption i { color: var(--color-accent); }

.mode__copy h3 {
    margin: 0 0 .85rem;
    font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem);
    color: var(--color-primary);
}
.mode__copy p {
    margin: 0 0 .85rem;
    font-size: 16px;
    line-height: 1.75;
    color: var(--color-text);
}
.mode__copy p:last-of-type { margin-bottom: 0; }

.mode__types {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 1.15rem 0 0;
    padding: 0;
    list-style: none;
}
.mode__types li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1rem;
    background: rgba(247, 183, 49, .16);
    border: 1px solid rgba(247, 183, 49, .5);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-primary);
}
.mode__types i { color: #9A6E05; font-size: .95rem; }

/* ---- the guidelines ---- */

.mode__rules {
    padding: 1.85rem 1.75rem;
    background: var(--color-light);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
}
.mode__rules-title {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: 0 0 1.35rem;
    font-size: 1.1875rem;
    color: var(--color-primary);
}
.mode__rules-title i { color: var(--color-secondary-deep); }

.mode__rules-grid {
    display: grid;
    gap: 1.5rem;
}
.rule-block h5 {
    margin: 0 0 .85rem;
    font-size: 1rem;
    color: var(--color-secondary-deep);
}

/* Numbered because these are read and worked through in order. The counter is
   drawn rather than left to the list marker so it can sit in a disc. */
.rule-steps {
    display: grid;
    gap: .8rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: rule;
}
.rule-steps > li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .8rem;
    counter-increment: rule;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--color-text);
}
.rule-steps > li::before {
    content: counter(rule, decimal-leading-zero);
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(80, 124, 58, .14);
    font-family: var(--font-display);
    font-size: .75rem;
    font-weight: 700;
    color: var(--color-secondary-deep);
    font-variant-numeric: tabular-nums;
}
.rule-steps__sub {
    display: grid;
    gap: .35rem;
    margin: .5rem 0 0;
    padding: 0 0 0 1rem;
    border-left: 2px solid rgba(247, 183, 49, .55);
    list-style: none;
    font-size: .875rem;
    color: var(--color-ink-soft);
}

/* ---- the shared clock ---- */

.modes__clock {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 1.75rem;
    padding: 1.35rem 1.6rem;
    background: var(--color-white);
    border: 1px solid var(--color-cream-deep);
    border-radius: var(--leaf);
}
.modes__clock > div { flex: 1 1 22rem; }
.modes__clock-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: var(--leaf-flip);
    background: rgba(247, 183, 49, .24);
    color: #7A5604;
    font-size: 1.4rem;
}
/* Scoped to the text column with `>`. As a bare descendant selector this
   also matched .modes__clock-icon — which is a span — and out-specified
   it, turning the 52px centred chip into a block with a 15px glyph stuck
   in its top-left corner. */
.modes__clock > div b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    color: var(--color-primary);
}
.modes__clock > div span {
    display: block;
    margin-top: .2rem;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--color-ink-soft);
}

@media (min-width: 768px) {
    .mode__rules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2.5rem; }
    .mode__rules-grid > .rule-block:only-child { grid-column: 1 / -1; }
    .mode__rules-grid > .rule-block:only-child .rule-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .8rem 2.5rem;
    }
}
@media (min-width: 992px) {
    .mode__intro { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: 2.5rem; }
}
@media (max-width: 767.98px) {
    .modes__tabs { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
    .modes__tab { justify-content: flex-start; }
    .mode__rules { padding: 1.5rem 1.25rem; }
    .modes__clock { padding: 1.25rem 1.15rem; }
}

/* -------------------------------------------------------------------------
   21h. Registration — the four pages
   -------------------------------------------------------------------------
   These are pages people act from, not read, so the money, the deadline and
   the next step are what carry weight. Everything else stays quiet.
   ---------------------------------------------------------------------- */

/* ---- shared section furniture ---- */

.reg__head {
    max-width: 46rem;
    margin: 0 auto 2.5rem;
    text-align: center;
}
.reg__head h2 { margin: 0; text-wrap: balance; }
.reg__head p {
    max-width: 58ch;
    margin: .9rem auto 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-ink-soft);
}
.reg__terms {
    margin: 1.25rem 0 0;
    font-size: .8125rem;
    line-height: 1.6;
    text-align: center;
    color: var(--color-ink-soft);
}

/* A term and its definition. Used for early-bird benefits and visa rules. */
.term-list {
    display: grid;
    gap: .85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.term-list li {
    padding-left: 1rem;
    border-left: 3px solid rgba(80, 124, 58, .3);
}
.term-list b {
    display: block;
    font-family: var(--font-display);
    font-size: .9375rem;
    color: var(--color-primary);
}
.term-list span {
    display: block;
    margin-top: .15rem;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--color-ink-soft);
}

/* ---- the registration process rail ---- */

/* Six rules in a 4-up grid left two orphans on the second row and gave no
   sense of order. A numbered rail beside a photograph does both jobs: the
   sequence is readable at a glance and the page stops being all boxes. */
.regflow__split { display: grid; gap: 2.5rem; align-items: start; }

.regflow__rail {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}
.regflow__step {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 1.15rem;
    padding-bottom: 1.25rem;
}
.regflow__step:last-child { padding-bottom: 0; }
/* The rail itself, drawn from one number down to the next. It fades out so
   the last leg does not look like it was cut off. */
.regflow__step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 60px;
    bottom: -4px;
    left: 27px;
    width: 2px;
    background: linear-gradient(rgba(47, 79, 47, .18), rgba(47, 79, 47, .06));
}
.regflow__no {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-white);
    border: 2px solid var(--color-cream-deep);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.regflow__step:hover .regflow__no {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-deep);
}
.regflow__card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.35rem 1.5rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.regflow__step:hover .regflow__card {
    transform: translateX(4px);
    border-color: rgba(80, 124, 58, .45);
    box-shadow: var(--shadow-sm);
}
.regflow__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--leaf-flip);
    background: rgba(247, 183, 49, .22);
    color: #9A6E05;
    font-size: 1.15rem;
}
.regflow__card b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    color: var(--color-primary);
}
.regflow__card p {
    margin: .3rem 0 0;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--color-text);
}

/* Two frames from past editions. The second overlaps the first so the pair
   reads as one object rather than a stack. */
.regflow__media { position: relative; padding-bottom: 4rem; }
.regflow__shot { margin: 0; }
.regflow__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.regflow__shot--main {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: var(--leaf);
    box-shadow: var(--shadow-md);
}
.regflow__shot--main figcaption {
    position: absolute;
    inset: auto 0 0;
    padding: 3.5rem 1.35rem 1.15rem;
    background: linear-gradient(to top, rgba(19, 31, 19, .9), rgba(19, 31, 19, 0));
    color: var(--color-white);
}
.regflow__tag {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .3rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.regflow__shot--main figcaption b {
    display: block;
    font-family: var(--font-display);
    font-size: 1rem;
}
/* The border is the section ground, so the inset reads as cut out of it. */
.regflow__shot--inset {
    position: absolute;
    right: 1.25rem;
    bottom: 0;
    width: 46%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 5px solid var(--color-light);
    border-radius: var(--leaf-flip);
    box-shadow: var(--shadow-md);
}

.regflow__cta {
    margin-top: 1.75rem;
    padding: 1.5rem;
    background: var(--color-background);
    border: 1px solid var(--color-cream-deep);
    border-radius: var(--leaf);
}
.regflow__note {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin: 0 0 1.15rem;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--color-primary);
}
.regflow__note i { flex: none; margin-top: .15rem; color: var(--color-secondary-deep); }
.regflow__send {
    margin: .9rem 0 0;
    font-size: .875rem;
    line-height: 1.6;
    text-align: center;
    color: var(--color-ink-soft);
}
.regflow__send a,
.regflow__card a { color: var(--color-secondary-deep); font-weight: 600; }

/* ---- the two offers ---- */

.reg__offers {
    display: grid;
    gap: 1.5rem;
}
.reg__offer {
    display: flex;
    flex-direction: column;
    padding: 2rem 1.85rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
    transition: border-color .25s ease, box-shadow .25s ease;
}
.reg__offer:hover { border-color: rgba(80, 124, 58, .45); box-shadow: var(--shadow-sm); }
/* The discount offer is the one worth spending colour on. */
.reg__offer--premium {
    background: var(--color-background);
    border-color: var(--color-cream-deep);
}
.reg__offer-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 1rem;
    border-radius: var(--leaf-flip);
    background: rgba(80, 124, 58, .12);
    color: var(--color-secondary-deep);
    font-size: 1.35rem;
}
.reg__offer--premium .reg__offer-icon {
    background: rgba(247, 183, 49, .3);
    color: #7A5604;
}
.reg__offer h2 {
    margin: 0 0 .5rem;
    font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
    color: var(--color-primary);
}
.reg__offer > p {
    margin: 0 0 1.15rem;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text);
}
.reg__offer > p b { color: var(--color-primary); }
.reg__offer-lead { color: var(--color-ink-soft) !important; font-size: .9375rem !important; }

/* The card makes the promise and stops. The button sits on the card's floor
   so both line up whatever the copy above it does. */
.reg__offer > p:last-of-type { margin-bottom: 0; }
.reg__offer-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.1rem;
    margin-top: auto;
    padding-top: 1.6rem;
}
.reg__offer-meta {
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
}

/* ---- the offer dialogs ---- */

/* Both cards hand their detail to a dialog, so the two share one shell. */
.offerbox .modal-dialog { max-width: 660px; }
.offerbox__panel {
    overflow: hidden;
    background: var(--color-white);
    border: 0;
    border-radius: var(--leaf);
    box-shadow: 0 30px 70px rgba(19, 31, 19, .35);
}
.offerbox__head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem clamp(1.35rem, 4vw, 2.25rem);
    background: linear-gradient(150deg,
        var(--color-primary-deep) 0%,
        var(--color-night) 100%);
    color: var(--color-white);
}
.offerbox__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--leaf-flip);
    background: rgba(247, 183, 49, .2);
    color: var(--color-accent);
    font-size: 1.2rem;
}
.offerbox__head h2 {
    flex: 1 1 auto;
    margin: 0;
    font-size: clamp(1.125rem, 1rem + .6vw, 1.4375rem);
    color: var(--color-white);
}
.offerbox__close {
    flex: none;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid rgba(251, 238, 215, .35);
    border-radius: 50%;
    color: rgba(251, 238, 215, .9);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.offerbox__close:hover,
.offerbox__close:focus-visible {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-deep);
}
.offerbox__body { padding: clamp(1.35rem, 4vw, 2.25rem); }
.offerbox__lead {
    margin: 0 0 1.4rem;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text);
}
/* The line the dialog signs off on — cream, so it reads as a closing note
   rather than one more benefit. */
.offerbox__closer {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin: 1.6rem 0 0;
    padding: .95rem 1.15rem;
    background: var(--color-background);
    border-radius: var(--radius-md);
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--color-primary);
}
.offerbox__closer i { flex: none; margin-top: .18rem; color: var(--color-secondary-deep); }

/* ---- fee tables ---- */

.fees__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    border: 0;
}
.fees__tab {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 1.25rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
    transition: background-color .25s ease, border-color .25s ease,
                color .25s ease, transform .2s ease;
}
.fees__tab i { color: var(--color-secondary-deep); transition: color .25s ease; }
.fees__tab:hover { border-color: rgba(80, 124, 58, .5); transform: translateY(-2px); }
.fees__tab.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}
.fees__tab.active i { color: var(--color-accent); }

/* The table scrolls inside its own box so the page body never moves sideways. */
/* overflow-y is set explicitly. With only overflow-x declared, the spec
   computes the other axis from `visible` to `auto`, so the box grew a
   vertical scrollbar over a sub-pixel of rounding — nothing here ever
   needs to scroll downward. */
.fees__scroll {
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
}
.fees__scroll::-webkit-scrollbar { height: 6px; }
.fees__scroll::-webkit-scrollbar-track { background: transparent; }
.fees__scroll::-webkit-scrollbar-thumb {
    background: rgba(80, 124, 58, .3);
    border-radius: 999px;
}
.fees__scroll { scrollbar-width: thin; scrollbar-color: rgba(80, 124, 58, .3) transparent; }

.fees {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: .9375rem;
}
.fees thead th {
    padding: .7rem 1rem;
    background: var(--color-primary);
    font-family: var(--font-display);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: left;
    color: var(--color-white);
    white-space: nowrap;
}
.fees thead th:first-child { width: 40%; }
.fees tbody th {
    padding: .55rem 1rem;
    font-weight: 600;
    text-align: left;
    color: var(--color-primary);
}
/* A qualifier under the category — who a rate applies to — set on its own
   line and quieter than the category it qualifies. */
.fees__note {
    display: block;
    margin-top: .15rem;
    font-size: .78rem;
    font-style: italic;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-ink-soft);
}

/* The recommended package: a warm tint across the whole row, a badge above
   its name, and the name and price in deep gold. The deep gold is #7A5604,
   not Golden Sol itself — that holds 6.1:1 on the tint where Golden Sol
   would not reach 2:1. */
.fees__row--featured > th,
.fees__row--featured > td { background: rgba(247, 183, 49, .14); }
.fees__row--featured > th { color: #7A5604; }
.fees__row--featured .fees__pick label { color: #7A5604; }
/* Selected still reads as selected, in the same green as every other rate. */
.fees__row--featured .fees__radio:checked + label { color: var(--color-white); }

.fees__badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-bottom: .35rem;
    padding: .18rem .6rem;
    background: #7A5604;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-white);
}
.fees__badge i { font-size: .65rem; color: var(--color-accent); }

/* "Presentation + Scopus Publication" wrapped to two lines in the 40%
   category column. Held to one; the table sits in .fees__scroll, so on a
   narrow screen the row scrolls sideways rather than breaking the name. */
.fees__cat { display: block; }
.fees__cat--one-line { white-space: nowrap; }
.fees tbody td {
    padding: .35rem .6rem;
    text-align: left;
    color: var(--color-text);
    /* Prices line up in a column, so the digits must too. */
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}
.fees tbody tr { border-top: 1px solid var(--color-hairline); }
.fees tbody tr:nth-child(odd) { background: rgba(80, 124, 58, .04); }
.fees tbody tr:hover { background: rgba(247, 183, 49, .12); }
/* The Early Bird column is the one worth taking, so it is the one coloured. */
.fees tbody td:first-of-type { color: var(--color-secondary-deep); }
.fees__na { color: var(--color-ink-soft) !important; font-weight: 500 !important; }

/* ---- the four-step rail ---- */

.reg__head--rule h2::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    margin: 1rem auto 0;
    background: var(--color-accent);
    border-radius: 2px;
}

/* A real sequence — you cannot get the letter before you check out — so it is
   numbered and drawn as a rail. The connector is on the item, not between
   them, so the last one simply does not have one. */
.steprail {
    display: grid;
    gap: 1.75rem;
    margin: 2.5rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.steprail__item {
    /* The connector below is positioned from the top of the item, so the three
       measurements it has to clear are named here rather than guessed at. */
    --steprail-label: 1.6rem;
    --steprail-gap: .85rem;
    --steprail-icon: 62px;

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--steprail-gap);
    text-align: center;
}
.steprail__item > b {
    font-family: var(--font-display);
    font-size: .9375rem;
    line-height: var(--steprail-label);
    color: var(--color-primary);
}
.steprail__icon {
    display: grid;
    place-items: center;
    width: var(--steprail-icon);
    height: var(--steprail-icon);
    border-radius: 50%;
    background: rgba(80, 124, 58, .12);
    color: var(--color-secondary-deep);
    font-size: 1.35rem;
    transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
/* The first step is the one you are on when you land here. */
.steprail__item.is-done .steprail__icon {
    background: rgba(80, 124, 58, .22);
    color: var(--color-primary);
}
.steprail__item:hover .steprail__icon {
    background: var(--color-accent);
    color: var(--color-primary);
    transform: translateY(-3px);
}
.steprail__text {
    max-width: 22ch;
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--color-ink-soft);
}

@media (min-width: 768px) {
    .steprail { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
    /* The dashed run between the circles, drawn from each step to the next. */
    .steprail__item:not(:last-child)::after {
        content: "";
        position: absolute;
        /* Centred on the circles: past the label, past the gap, half an icon. */
        top: calc(var(--steprail-label) + var(--steprail-gap) + var(--steprail-icon) / 2);
        left: calc(50% + 42px);
        width: calc(100% - 84px);
        border-top: 2px dashed rgba(80, 124, 58, .3);
    }
}

/* ---- the two-column flow ---- */

/* Same reasoning as .feestep__split above: the panel holds the fee table, so
   an implicit auto track would size to the table instead of the phone. */
.feestep__flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.feestep__lead {
    margin: -.35rem 0 1.15rem;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--color-ink-soft);
}
.feestep__virtual { margin-top: 1.75rem; }

/* Qualifies the table directly above it, so it is tied to it rather than
   floating as another page note. */
.fees__foot {
    margin: .75rem 0 0;
    padding: .85rem 1.1rem;
    background: var(--color-light);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-md);
    font-size: .85rem;
    line-height: 1.65;
    color: var(--color-ink-soft);
}
.fees__foot b { color: var(--color-primary); }

/* The group offer. The rate rows came out of the tables, so this is the only
   place the discount is now mentioned — it gets the warm ground. */
.feegroup {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-top: 1.75rem;
    padding: 1.25rem 1.4rem;
    background: var(--color-background);
    border: 1px solid var(--color-cream-deep);
    border-radius: var(--radius-lg);
}
.feegroup__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(247, 183, 49, .3);
    color: #7A5604;
    font-size: 1.1rem;
}
.feegroup b {
    display: block;
    margin-bottom: .35rem;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    color: var(--color-primary);
}
.feegroup p { margin: 0; font-size: .9375rem; line-height: 1.65; color: var(--color-text); }
.feegroup__cta { margin-top: .5rem !important; font-weight: 600; }

/* The accommodation terms. A list, because they are parallel conditions. */
.feenotes {
    margin-top: 1.75rem;
    padding: 1.25rem 1.4rem;
    background: var(--color-light);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
}
.feenotes__title {
    display: block;
    margin-bottom: .65rem;
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--color-primary);
}
.feenotes .tick-list { margin: 0; }
.feenotes__extra {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    margin: 1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--color-hairline);
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--color-text);
}
.feenotes__extra i { flex: none; margin-top: .15rem; color: var(--color-secondary-deep); }
/* Says what the table below covers. Without it the block reads as a third
   admittance category rather than the same two modes given online. */
.feestep__applies {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin: 0 0 1rem;
    padding: .85rem 1.1rem;
    background: rgba(26, 114, 176, .08);
    border: 1px solid rgba(26, 114, 176, .28);
    border-radius: 10px;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--color-text);
}
.feestep__applies i { flex: none; color: var(--color-info-deep); font-size: 1.15rem; }
.feestep__applies b { color: var(--color-primary); }
.feestep__clear { margin: 1rem 0 0; text-align: right; }
.feestep__clear .text-link { background: none; border: 0; cursor: pointer; padding: 0 0 3px; }

/* ---- selectable packages ---- */

.pack__radio {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
.pack__pick {
    display: block;
    width: 100%;
    margin-top: auto;
    padding: .6rem 1rem;
    background: var(--color-primary);
    border-radius: 8px;
    font-family: var(--font-display);
    font-size: .875rem;
    font-weight: 600;
    text-align: center;
    color: var(--color-white);
    cursor: pointer;
    transition: background-color .2s ease;
}
.pack__pick:hover { background: var(--color-secondary); }
.pack__pick-on { display: none; }
.pack__radio:checked ~ .pack__pick { background: var(--color-secondary-deep); }
.pack__radio:checked ~ .pack__pick .pack__pick-add { display: none; }
.pack__radio:checked ~ .pack__pick .pack__pick-on { display: inline; }
.pack:has(.pack__radio:checked) {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 2px rgba(80, 124, 58, .25);
}
.pack__radio:focus-visible ~ .pack__pick {
    outline: 3px solid var(--focus-ring, var(--color-secondary));
    outline-offset: 2px;
}

/* ---- selectable add-ons ---- */

/* Three across as cards rather than a stack of rows: there are five of them,
   each one a short name and a price, and a full-width row per add-on wastes
   the space and buries the prices down the left. */
.addon-picks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.addon-picks > li { display: flex; }
.addon-picks__box {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
.addon-picks label {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    width: 100%;
    padding: 1.1rem 1.1rem 1rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: 10px;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--color-text);
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
/* The tick sits in the corner so the name can run the full width of the card. */
.addon-picks label::before {
    content: "";
    position: absolute;
    top: .85rem;
    right: .9rem;
    width: 22px;
    height: 22px;
    border: 2px solid rgba(80, 124, 58, .4);
    border-radius: 6px;
    transition: background-color .2s ease, border-color .2s ease;
}
.addon-picks label span {
    padding-right: 2rem;
    font-weight: 500;
    color: var(--color-primary);
}
.addon-picks label b {
    margin-top: auto;
    font-family: var(--font-display);
    font-size: 1.125rem;
    color: var(--color-secondary-deep);
    font-variant-numeric: tabular-nums;
}
.addon-picks label:hover {
    transform: translateY(-2px);
    border-color: rgba(80, 124, 58, .5);
}
.addon-picks__box:checked + label {
    background: rgba(80, 124, 58, .08);
    border-color: var(--color-secondary);
}
.addon-picks__box:checked + label::before {
    background: var(--color-secondary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M6.2 11.6 2.9 8.3l1.1-1.1 2.2 2.2 5-5 1.1 1.1z'/%3E%3C/svg%3E") center / 15px no-repeat;
    border-color: var(--color-secondary);
}
.addon-picks__box:checked + label b { color: var(--color-primary); }
.addon-picks__box:focus-visible + label {
    outline: 3px solid var(--focus-ring, var(--color-secondary));
    outline-offset: 2px;
}

@media (max-width: 767.98px) {
    .addon-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479.98px) {
    .addon-picks { grid-template-columns: minmax(0, 1fr); }
}
/* ---- telephone fields ---- */

/* The plugin ships its own look; these rules only make it match the forms
   around it — same height, same border, same focus ring. */
.iti { width: 100%; }
.iti__tel-input,
.iti input[type="tel"] {
    width: 100%;
    /* Left padding belongs to the plugin: it measures the country selector
       and sets it inline. Setting the shorthand here would fight that. */
    padding-block: .7rem;
    padding-right: .85rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: .9375rem;
    color: var(--color-text);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.iti input[type="tel"]:focus {
    outline: 0;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(80, 124, 58, .18);
}
.iti__country-container { border-radius: 8px 0 0 8px; }
.iti__selected-country-primary:hover,
.iti__country-container:focus-within .iti__selected-country-primary {
    background: rgba(80, 124, 58, .1);
    border-radius: 8px 0 0 8px;
}
/* On <body> now, so it needs to clear the site's own chrome: the nav panel
   sits at 1050 and the downloads drawer at 1060. */
.iti--container { z-index: 1200; }
.iti__dropdown-content {
    z-index: 1200;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: 10px;
    box-shadow: 0 18px 44px rgba(19, 31, 19, .22);
    font-family: var(--font-body);
    overflow: hidden;
}
.iti__search-input {
    padding: .7rem .85rem;
    border: 0;
    font-size: .9375rem;
}
.iti__search-input:focus { outline: 0; }
/* The list is the part that scrolls. */
.iti__country-list {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--color-secondary) rgba(80, 124, 58, .14);
}
/* Anchored popup: taller than the plugin's 185px, so a search usually shows
   every hit without scrolling at all. */
/* Adapts to the viewport: a fixed 320px runs off the bottom when the field
   sits low on a short screen, and the plugin has already committed to
   opening downward by then. */
.iti--container:not(.iti--fullscreen-popup) .iti__country-list { max-height: min(320px, 42vh); }
.iti--container:not(.iti--fullscreen-popup) .iti__dropdown-content { min-width: 20rem; }

/* Small screens: the plugin turns the container into a fixed overlay and
   expects the panel to flex inside it. A fixed max-height on the list
   breaks that — the list runs past the panel and paints on the backdrop,
   which is what made the page behind show through it. */
.iti--fullscreen-popup.iti--container { z-index: 1200; }
.iti--fullscreen-popup .iti__dropdown-content {
    background: var(--color-white);
    border-radius: var(--leaf);
    box-shadow: 0 24px 60px rgba(19, 31, 19, .45);
}
.iti--fullscreen-popup .iti__country-list {
    flex: 1 1 auto;
    min-height: 0;      /* a flex child will not shrink below content without it */
    max-height: none;
}
.iti--fullscreen-popup .iti__search-input {
    flex: none;
    padding: .95rem 1.1rem;
    font-size: 1rem;
}
/* Windows and macOS both use overlay scrollbars by default, so the bar only
   appears while you are already scrolling — which reads as "this list ends
   here". A fade on the bottom edge says otherwise without depending on how
   the platform draws scrollbars. */
.iti__dropdown-content::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 34px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--color-white));
    pointer-events: none;
}

.iti__country-list::-webkit-scrollbar { width: 10px; }
.iti__country-list::-webkit-scrollbar-track {
    background: rgba(80, 124, 58, .1);
    border-radius: 999px;
}
.iti__country-list::-webkit-scrollbar-thumb {
    background: var(--color-secondary);
    border: 2px solid var(--color-white);
    border-radius: 999px;
}
.iti__country-list::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }
.iti__country {
    padding: .55rem .85rem;
    transition: background-color .15s ease;
}
/* Keyboard / pointer position in the list. */
.iti__country.iti__highlight,
.iti__country:hover { background: rgba(80, 124, 58, .12); }
/* The country actually in use. The plugin marks it with aria-selected and
   a tick; without a ground behind it the tick is easy to miss in a list
   of two hundred rows. */
.iti__country[aria-selected="true"] {
    background: rgba(80, 124, 58, .16);
    font-weight: 600;
    color: var(--color-primary);
}
.iti__country[aria-selected="true"]:hover,
.iti__country[aria-selected="true"].iti__highlight {
    background: rgba(80, 124, 58, .24);
}
/* Soft ink measures 4.28:1 on the selected row's ground — just under AA —
   so the dial code takes the deeper green there. */
.iti__country[aria-selected="true"] .iti__dial-code { color: var(--color-secondary-deep); }
/* The trigger beside the input, so the field reads as one control. */
.iti__selected-country-primary { background: rgba(80, 124, 58, .07); }
.iti__dial-code { color: var(--color-ink-soft); }

/* Only after the field is left, so nobody is corrected mid-word. */
.is-badnumber,
.iti input[type="tel"].is-badnumber {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(217, 83, 79, .16);
}
/* ---- the form ---- */

.regform__grid { display: grid; gap: 1rem; }
.regform__field { display: flex; flex-direction: column; gap: .35rem; margin: 0; }
.regform__field label {
    font-family: var(--font-display);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-primary);
}
.regform__field abbr { color: var(--color-error); text-decoration: none; }
.regform__field input,
.regform__field select {
    width: 100%;
    padding: .7rem .85rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: .9375rem;
    color: var(--color-text);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.regform__field input:focus,
.regform__field select:focus {
    outline: 0;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(80, 124, 58, .18);
}
/* Read-only because it is filled from the fee. Styled as read-only too, so it
   does not invite an edit that would be overwritten. */
.regform__field input[readonly] {
    background: var(--color-light);
    color: var(--color-ink-soft);
    cursor: not-allowed;
}

/* ---- payment advisory ---- */

.advisory {
    margin-top: 1.25rem;
    padding: 1.15rem 1.25rem;
    background: var(--color-primary-deep);
    border-radius: var(--leaf);
}
.advisory b {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .5rem;
    font-family: var(--font-display);
    font-size: .9375rem;
    color: var(--color-white);
}
.advisory b i { color: var(--color-accent); font-size: 1.05rem; }
.advisory p {
    margin: 0;
    font-size: .8125rem;
    line-height: 1.65;
    color: rgba(251, 238, 215, .84);
}
.advisory a { color: var(--color-accent); font-weight: 600; white-space: nowrap; }

@media (min-width: 576px) {
    .regform__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .regform__field--wide { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
    .regform__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .regform__field--sm { grid-column: span 1; }
}

/* ---- step 1: pick a fee ---- */

/* The table and the running total side by side, the way the reference lays it
   out: you can see what a choice costs without leaving the table. */
.feestep__split {
    display: grid;
    /* minmax(0, 1fr), not the implicit auto track: a grid item will not shrink
       below its min-content width, so an auto track inflates to the widest
       thing in the fee table and takes the form off the side of a phone. The
       table does its own scrolling inside .fees__scroll. */
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}
.feestep__panel {
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
}
.feestep__panel { padding: 1.5rem 1.4rem 1.35rem; }

.feestep__panel-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.15rem;
}
.feestep__panel-head h3 { margin: 0; font-size: 1.125rem; color: var(--color-primary); }
/* A numbered step, because the form really is completed in this order. */
.feestep__no {
    display: grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-primary);
    font-family: var(--font-display);
    font-size: .875rem;
    font-weight: 700;
    color: var(--color-white);
    font-variant-numeric: tabular-nums;
}

/* The banner names which table you are looking at once the tabs scroll away. */
.fees__banner {
    margin: 0;
    padding: .7rem 1.15rem;
    background: linear-gradient(100deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    border-radius: 10px 10px 0 0;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    color: var(--color-white);
}
.fees__banner + .fees__scroll { border-radius: 0 0 10px 10px; border-top: 0; }

/* ---- each price is a choice ---- */

/* Positioned so the visually-hidden radio below resolves against its own
   cell. Without it the input escapes .fees__scroll and lands at the table's
   full width, padding the document's scrollWidth well past the viewport. */
.fees__pick { padding: .35rem .45rem !important; text-align: center !important; position: relative; }
.fees__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
/* The whole cell is the target, not a 16px dot beside it. */
.fees__pick label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .45rem .5rem;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.fees__pick label::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(80, 124, 58, .45);
    border-radius: 50%;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.fees__pick label:hover { background: rgba(80, 124, 58, .1); }
.fees__radio:checked + label {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}
.fees__radio:checked + label::before {
    border-color: var(--color-accent);
    box-shadow: inset 0 0 0 3px var(--color-accent);
}
/* Keyboard focus has to be visible even though the input itself is hidden. */
.fees__radio:focus-visible + label {
    outline: 3px solid var(--focus-ring, var(--color-secondary));
    outline-offset: 2px;
}

/* ---- the running total ---- */

/* A banded card: a coloured head, one row per charge, then the total on its
   own tinted band. Every row states its amount on the right and what it is
   underneath, so the total can always be accounted for line by line. */
.summary {
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
}
.summary__head {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .85rem 1.15rem;
    background: var(--color-primary);
}
.summary__head h3 { margin: 0; font-size: 1rem; color: var(--color-white); }
.summary__no {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(251, 238, 215, .2);
    font-family: var(--font-display);
    font-size: .8125rem;
    font-weight: 700;
    color: var(--color-white);
    font-variant-numeric: tabular-nums;
}

.summary__item {
    display: block;
    padding: .7rem 1.15rem;
    border-bottom: 1px solid var(--color-hairline);
}
.summary__item-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: .9375rem;
    color: var(--color-text);
}
.summary__item-top b {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}
.summary__item small {
    display: block;
    margin-top: .15rem;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--color-ink-soft);
}
.summary__off { color: var(--color-secondary-deep) !important; }
.summary__item--lines .summary__item-top + .summary__item-top { margin-top: .4rem; }

/* The upgrade is the only row you can act on, so it is the only one that
   behaves like a control. */
.summary__item--pick {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    cursor: pointer;
    transition: background-color .2s ease;
}
.summary__item--pick:hover { background: rgba(80, 124, 58, .06); }
.summary__item--pick input {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: .1rem;
    accent-color: var(--color-secondary);
}
.summary__item--pick b {
    display: block;
    font-family: var(--font-display);
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--color-primary);
}
.summary__item--pick small {
    display: block;
    margin-top: .15rem;
    font-size: .72rem;
    line-height: 1.45;
    color: var(--color-ink-soft);
}

.summary__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1.15rem;
    background: var(--color-background);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-primary);
}
.summary__total b {
    font-size: 1.375rem;
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}

.summary__foot { padding: .95rem 1.15rem 1.1rem; }
.summary__note {
    margin: .8rem 0 0;
    font-size: .75rem;
    line-height: 1.5;
    text-align: center;
    color: var(--color-ink-soft);
}
/* ---- the bar that follows you down the table ---- */

.feebar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1020;
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
    background: rgba(19, 31, 19, .96);
    border-top: 2px solid var(--color-accent);
    box-shadow: 0 -10px 30px rgba(19, 31, 19, .25);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .feebar {
        background: rgba(19, 31, 19, .86);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
    }
}
.feebar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    max-width: var(--container);
    padding-inline: var(--gutter);
    margin-inline: auto;
}
.feebar__label {
    display: flex;
    flex-direction: column;
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(251, 238, 215, .78);
}
.feebar__label b {
    font-family: var(--font-display);
    font-size: 1.375rem;
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: no-preference) {
    .feebar { animation: feebar-rise .3s ease; }
    @keyframes feebar-rise {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
}

@media (min-width: 992px) {
    .feestep__split { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 1.75rem; }
    /* The total stays in view while you read down a long table. */
    .feestep__summary { position: sticky; top: calc(var(--top-offset) + 1rem); }
}
@media (max-width: 991.98px) {
    .feestep__panel { padding: 1.25rem 1.1rem; }
}

/* ---- the three form steps ---- */

.reg__steps {
    display: grid;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.reg-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .55rem;
    padding: 1.85rem 1.6rem 1.5rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.reg-step:hover {
    transform: translateY(-4px);
    border-color: rgba(247, 183, 49, .6);
    box-shadow: var(--shadow-sm);
}
/* The step number, because the form really is completed in this order. */
.reg-step__no {
    position: absolute;
    top: .9rem;
    right: 1.15rem;
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(80, 124, 58, .14);
    font-variant-numeric: tabular-nums;
}
.reg-step__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--leaf-flip);
    background: rgba(80, 124, 58, .12);
    color: var(--color-secondary-deep);
    font-size: 1.25rem;
}
.reg-step b { font-family: var(--font-display); font-size: 1.0625rem; color: var(--color-primary); }
.reg-step > span:last-child { font-size: .9375rem; line-height: 1.6; color: var(--color-ink-soft); }

/* ---- publication support packages ---- */

/* Two up. Each card is a priced offer, so it is built like one: a ribbon, the
   journal and its package name, the price block, then the two things you can
   do about it. */
.pack-grid {
    display: grid;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pack {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.pack:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }

/* The ribbon is the card's own band. Cards without a note keep an empty one so
   the four titles still line up across the grid. */
.pack__ribbon {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-height: 46px;
    padding: .7rem 1.35rem;
    background: var(--color-light);
    border-bottom: 1px solid var(--color-hairline);
    font-family: var(--font-display);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--color-ink-soft);
}
.pack__ribbon i { font-size: .8rem; }
.pack--flagged { border-color: rgba(247, 183, 49, .7); }
.pack--flagged .pack__ribbon {
    background: var(--color-accent);
    border-bottom-color: var(--color-accent);
    color: var(--color-primary);
}

.pack__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    padding: 1.25rem 1.35rem .9rem;
}
.pack__title b {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    color: var(--color-primary);
}
.pack__title em {
    padding: .22rem .6rem;
    border: 1px solid var(--color-hairline);
    border-radius: 6px;
    font-family: var(--font-display);
    font-size: .6875rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
}
.pack--flagged .pack__title em {
    border-color: rgba(247, 183, 49, .8);
    color: #7A5604;
}

/* The prices sit on their own ground so the eye lands on them first. */
.pack__prices {
    display: block;
    margin: 0 1.35rem;
    padding: .95rem 1.1rem;
    background: var(--color-background);
    border-radius: 10px;
}
.pack__line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}
.pack__line + .pack__line { margin-top: .45rem; }
.pack__lab {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-display);
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-primary);
}
.pack__lab i { color: var(--color-accent); }
.pack__line b {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}
.pack__line--was .pack__lab { font-weight: 500; color: var(--color-ink-soft); }
.pack__line--was s { font-size: .875rem; color: var(--color-ink-soft); }

/* ---- add / remove, and the way through to the detail ---- */

.pack__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
/* One row. Add is the action, so it takes the wider share; View is the way
   to find out more before taking it. */
.pack__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    align-items: stretch;
    gap: .6rem;
    margin-top: auto;
    padding: 1rem 1.35rem 1.25rem;
}
.pack__pick,
.pack__more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .75rem .8rem;
    border-radius: 8px;
    font-family: var(--font-display);
    font-size: .875rem;
    line-height: 1.25;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.pack__pick {
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: var(--color-white);
}
.pack__pick:hover { background: var(--color-secondary); border-color: var(--color-secondary); }
.pack__more {
    background: transparent;
    border: 1px solid var(--color-secondary);
    color: var(--color-secondary-deep);
}
.pack__more:hover { background: rgba(80, 124, 58, .1); color: var(--color-primary); }

/* Add becomes Remove once the package is on the order. */
.pack__pick-on { display: none; }
.pack__radio:checked ~ .pack__actions .pack__pick {
    background: var(--color-error);
    border-color: var(--color-error);
}
.pack__radio:checked ~ .pack__actions .pack__pick:hover { background: #B4322D; border-color: #B4322D; }
.pack__radio:checked ~ .pack__actions .pack__pick-add { display: none; }
.pack__radio:checked ~ .pack__actions .pack__pick-on { display: inline-flex; align-items: center; gap: .45rem; }
.pack:has(.pack__radio:checked) {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 2px rgba(80, 124, 58, .25);
}
.pack__radio:focus-visible ~ .pack__actions .pack__pick {
    outline: 3px solid var(--focus-ring, var(--color-secondary));
    outline-offset: 2px;
}
/* ---- add-ons ---- */

.reg__addons {
    max-width: 46rem;
    margin: 2.5rem auto 0;
    padding: 1.75rem 1.6rem 1.5rem;
    background: var(--color-light);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
}
.reg__addons h3 { margin: 0 0 1rem; font-size: 1.125rem; color: var(--color-primary); }
.addon-list { margin: 0; padding: 0; list-style: none; }
.addon-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 0;
    border-bottom: 1px dashed var(--color-hairline);
    font-size: .9375rem;
    color: var(--color-text);
}
.addon-list li:last-child { border-bottom: 0; }
.addon-list b {
    flex: none;
    font-family: var(--font-display);
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}

/* ---- what every package includes ---- */

/* The fee table above already ends on a lot of air, so this one starts closer. */
#inclusions { padding-block-start: calc(var(--section-y) * .45); }

/* One panel holds the whole list. The inclusions are a single promise, not
   ten separate offers, so they stop looking like ten separate cards. */
.inclpanel {
    padding: clamp(1.5rem, 3.5vw, 2.75rem);
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
    box-shadow: var(--shadow-sm);
}
.inclpanel__head { margin-bottom: 2.25rem; }
.inclpanel__head h2 {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0;
    font-size: clamp(1.375rem, 1.15rem + .9vw, 1.875rem);
    color: var(--color-primary);
}
.inclpanel__mark {
    flex: none;
    color: var(--color-secondary-deep);
    font-size: .8em;
    line-height: 1;
}
.inclpanel__head p {
    max-width: 90ch;
    margin: .85rem 0 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-ink-soft);
}

/* Rows, not tiles: the icon marks the line, the text carries it. */
.incl-grid {
    display: grid;
    gap: 1.75rem 2.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.incl {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.incl__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    background: rgba(80, 124, 58, .1);
    color: var(--color-secondary-deep);
    font-size: 1.1rem;
    transition: background-color .25s ease, color .25s ease;
}
.incl:hover .incl__icon { background: var(--color-secondary-deep); color: var(--color-white); }
.incl b {
    display: block;
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--color-primary);
}
.incl__body span {
    display: block;
    margin-top: .3rem;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--color-ink-soft);
}

/* ---- deliverables ---- */

.deliver-grid {
    display: grid;
    gap: .85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.deliver {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .95rem 1.15rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: 10px;
    font-family: var(--font-display);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--color-primary);
    transition: border-color .25s ease, transform .25s ease;
}
.deliver:hover { border-color: rgba(247, 183, 49, .6); transform: translateY(-2px); }
.deliver__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: rgba(247, 183, 49, .22);
    color: #7A5604;
    font-size: 1.05rem;
}

/* ---- refunds ---- */

/* The percentage leads, because that is the thing being looked up. */
.refund-grid {
    display: grid;
    gap: 1rem;
    margin: 0 0 2.5rem;
    padding: 0;
    list-style: none;
}
.refund {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1.5rem 1.4rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-top: 4px solid var(--color-secondary);
    border-radius: 10px;
}
.refund--none { border-top-color: var(--color-error); }
.refund__amount {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}
.refund--none .refund__amount { color: #9A302C; }
.refund__amount small {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
}
.refund > span:last-child { font-size: .9375rem; line-height: 1.6; color: var(--color-ink-soft); }

.policy-split { display: grid; gap: 1.25rem; }
.policy-card {
    padding: 1.85rem 1.7rem;
    background: var(--color-light);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
}
.policy-card__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: .9rem;
    border-radius: var(--leaf-flip);
    background: rgba(80, 124, 58, .12);
    color: var(--color-secondary-deep);
    font-size: 1.2rem;
}
.policy-card h3 { margin: 0 0 1rem; font-size: 1.1875rem; color: var(--color-primary); }
.policy-card__note {
    margin: 1.15rem 0 0;
    padding-top: .9rem;
    border-top: 1px solid var(--color-hairline);
    font-size: .875rem;
    line-height: 1.6;
    color: var(--color-ink-soft);
}
.policy-card__note b { color: var(--color-primary); }

.reg__help {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2.5rem 0 0;
    padding: 1.25rem 1.5rem;
    background: var(--color-background);
    border: 1px solid var(--color-cream-deep);
    border-radius: var(--leaf);
    font-size: 16px;
    line-height: 1.65;
}
.reg__help-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--leaf-flip);
    background: rgba(247, 183, 49, .3);
    color: #7A5604;
    font-size: 1.2rem;
}
.reg__help a { color: var(--color-secondary-deep); font-weight: 600; text-underline-offset: 3px; }

/* ---- payment ---- */

/* On the registration page this follows another light section, so without the
   trim the inclusions panel and this heading sit 200px apart. Same reasoning
   as #inclusions above. */
#payment { padding-block-start: calc(var(--section-y) * .45); }

/* There the bank table gets a section of its own; here it follows the call-out
   inside one, so it has to buy back the gap the section break gave it. */
.pay__bank { margin-top: clamp(2.5rem, 5vw, 4rem); }

.pay__grid {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pay-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    padding: 2rem 1.5rem 1.75rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
    text-align: center;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.pay-card:hover { transform: translateY(-4px); border-color: rgba(80, 124, 58, .5); box-shadow: var(--shadow-sm); }
.pay-card__icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(80, 124, 58, .12);
    color: var(--color-secondary-deep);
    font-size: 1.5rem;
}
.pay-card b { font-family: var(--font-display); font-size: 1.0625rem; color: var(--color-primary); }
.pay-card > span:last-child { font-size: .875rem; color: var(--color-ink-soft); }

/* Easy to skip and expensive to skip, so it gets the warm ground. */
.pay__before {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 52rem;
    margin: 2rem auto 0;
    padding: 1.15rem 1.4rem;
    background: var(--color-background);
    border: 1px solid var(--color-cream-deep);
    border-radius: var(--leaf);
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--color-text);
}
.pay__before-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(247, 183, 49, .3);
    color: #7A5604;
    font-size: 1.1rem;
}
.pay__before b { display: block; font-family: var(--font-display); color: var(--color-primary); }
.pay__before a { color: var(--color-secondary-deep); font-weight: 600; white-space: nowrap; }

/* The coordinator note now leads the three options rather than following
   them, so its margin flips to the other side of the grid. */
.pay__before--lead { margin: 1.75rem auto 2.25rem; }

/* The bank table and the charges note that qualifies it share one column. */
.bank__col { display: grid; gap: 1.15rem; }
.bank__charges {
    margin: 0;
    padding: 1rem 1.25rem;
    background: rgba(247, 183, 49, .14);
    border: 1px solid rgba(247, 183, 49, .5);
    border-radius: var(--radius-md);
    font-size: .9rem;
    line-height: 1.65;
    color: var(--color-text);
}
.bank__charges b { color: var(--color-primary); }

/* ---- the fraud warning, in the body of a page ----
   The footer carries this on every page. These are the pages the correction
   asks for it on as well, where someone is about to part with money. */
.alert-note {
    display: flex;
    gap: .875rem;
    align-items: flex-start;
    margin-top: 2rem;
    padding: 1.1rem 1.35rem;
    background: rgba(247, 183, 49, .12);
    border: 1px solid rgba(247, 183, 49, .45);
    border-radius: var(--radius-md);
    font-size: .9rem;
    line-height: 1.65;
    color: var(--color-text);
}
.alert-note i { flex: none; margin-top: .1rem; font-size: 1.1rem; color: #7A5604; }
.alert-note p { margin: 0; }
.alert-note b { color: var(--color-primary); }

/* On a night ground the pale panel disappears, so it takes the footer's
   treatment instead — Palm Lawn behind it, gold on the mark. */
.alert-note--dark {
    background: rgb(80 124 58 / 25%);
    border-color: var(--color-secondary);
    color: rgba(251, 238, 215, .92);
}
.alert-note--dark i { color: var(--color-accent); }
.alert-note--dark b { color: var(--color-white); }

/* The address to report fraud to, highlighted as the one thing in the note
   to act on. Two grounds, two treatments, both measured:
   — light panel: deep gold on a gold chip, 5.3:1. Plain .mail-mark gold
     would sit at 1.7:1 here and all but vanish.
   — dark panel and footer: gold on a faint chip, 4.7:1. A stronger chip
     drops the address below 4.5:1, so the highlight stays light. */
.mail-mark--alert {
    display: inline-block;
    padding: 0 .4rem;
    border-radius: 5px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}
.alert-note .mail-mark--alert {
    background: rgba(247, 183, 49, .30);
    color: #7A5604;
}
.alert-note .mail-mark--alert:hover,
.alert-note .mail-mark--alert:focus-visible {
    background: #7A5604;
    color: var(--color-white);
}
.alert-note--dark .mail-mark--alert,
.footer__alert .mail-mark--alert {
    background: rgba(247, 183, 49, .08);
    color: var(--color-accent);
}
.alert-note--dark .mail-mark--alert:hover,
.alert-note--dark .mail-mark--alert:focus-visible,
.footer__alert .mail-mark--alert:hover,
.footer__alert .mail-mark--alert:focus-visible {
    background: var(--color-accent);
    color: var(--color-primary-deep);
}

.pay__split { display: grid; gap: 2.5rem; align-items: start; }
.pay__sub { margin: 0 0 .85rem; font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); color: var(--color-primary); }
.pay__note { max-width: 42ch; margin: 0 0 1.5rem; font-size: 16px; line-height: 1.7; color: var(--color-ink-soft); }

/* Account details get tabular figures and enough room to be read back over a
   phone without losing your place. */
.bank {
    margin: 0;
    padding: 0;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
    overflow: hidden;
}
.bank__row {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    gap: .5rem 1rem;
    padding: .95rem 1.35rem;
    border-bottom: 1px solid var(--color-hairline);
}
.bank__row:last-child { border-bottom: 0; }
.bank__row:nth-child(odd) { background: rgba(80, 124, 58, .04); }
.bank dt {
    font-family: var(--font-display);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
}
.bank dd {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
    word-break: break-word;
}

.pay__after {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 1.75rem;
    padding: 1.5rem 1.75rem;
    background: rgba(251, 238, 215, .07);
    border: 1px solid rgba(251, 238, 215, .2);
    border-radius: var(--leaf);
}
.pay__after > div { flex: 1 1 24rem; }
.pay__after-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: var(--leaf-flip);
    background: rgba(247, 183, 49, .22);
    color: var(--color-accent);
    font-size: 1.4rem;
}
.pay__after b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    color: var(--color-white);
}
.pay__after p {
    margin: .3rem 0 0;
    font-size: .9375rem;
    line-height: 1.65;
    color: rgba(251, 238, 215, .86);
}
/* The same block on a light section. Everything in the dark version is pitched
   against the night ground, so only the colours change here. */
.pay__after--light {
    margin-top: clamp(2rem, 4vw, 3rem);
    background: var(--color-white);
    border-color: var(--color-hairline);
}
.pay__after--light b { color: var(--color-primary); }
.pay__after--light p { color: var(--color-text); }
.pay__after--light .pay__after-icon { color: #7A5604; }

/* Offered again after the packages, before the page turns to payment. */
.reg__actions { margin-top: clamp(2rem, 4vw, 2.75rem); }
@media (min-width: 576px) {
    .deliver-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Two, not four: each card carries a ribbon, a price block and two
       buttons, and at a quarter width none of that reads. */
    .pack-grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .refund-grid  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pay__grid    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
    .reg__steps   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .policy-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .deliver-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* Two columns is the ceiling — each inclusion runs to two lines of prose
       and a third column would break every one of them onto four. */
    .incl-grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
    .reg__offers  { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
    .pay__split   { grid-template-columns: minmax(0, .78fr) minmax(0, 1fr); gap: 3.5rem; }
    /* The bank table is the taller column, so the heading and the warning
       about the beneficiary name stay in view while it is read off. */
    .pay__aside   { position: sticky; top: calc(var(--top-offset) + 1.5rem); }
    /* The rail carries six cards of prose, so it keeps the wider column. */
    .regflow__split { grid-template-columns: minmax(0, 1fr) minmax(0, .62fr); gap: 3rem; }
}
@media (max-width: 575.98px) {
    .pack__actions { grid-template-columns: minmax(0, 1fr); }
    .bank__row { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
    .reg__help, .pay__before { flex-direction: column; align-items: flex-start; }
    /* A 56px disc plus a card leaves nothing for the prose at 360px. */
    .regflow__step { grid-template-columns: 44px minmax(0, 1fr); gap: .85rem; }
    .regflow__no { width: 44px; height: 44px; font-size: .9375rem; }
    .regflow__step:not(:last-child)::before { top: 48px; left: 21px; }
    .regflow__card { flex-direction: column; padding: 1.15rem 1.2rem; }
    /* The overlap needs room the phone does not have, so the frames stack. */
    .regflow__media { padding-bottom: 0; }
    .regflow__shot--inset {
        position: static;
        width: 100%;
        margin-top: .9rem;
        border-width: 0;
        border-radius: var(--leaf-flip);
    }
}

/* -------------------------------------------------------------------------
   21i. About page
   -------------------------------------------------------------------------
   Ten sections of prose, so the work here is rhythm: one split-with-photo
   pattern, one section head, and four list shapes that each say something
   different about the content they hold — aims are numbered, features are
   tiles, objectives are a rail, reasons are rows.
   ---------------------------------------------------------------------- */

/* ---- the opening card, section head and cues ---- */

/* The opening sentence is the whole claim, so it is set at lede size and the
   supporting paragraph steps down from it. */
.abt__statement {
    margin: 0 0 1.25rem;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.01em;
    color: var(--color-primary);
    text-wrap: pretty;
}
.abt__copy p {
    margin: 0;
    font-size: 16px;
    line-height: 1.85;
    color: var(--color-ink-soft);
}

/* ---- the opening: claim left, photograph right, both on a light ground ----
   It replaced a Palm Frond panel. The page hero above it is already dark, so
   a second dark block underneath gave the page two heavy bands back to back
   and nowhere to breathe before the first paragraph. */


/* ---- the About section's rail ----
   Same two-track shape as .cmt__grid on the committee pages, because it is the
   same rail: content on the left, Quick Links sticky beside it. One column
   below 992px, where the rail stacks under the content it belongs to. */
.abt__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
}
@media (min-width: 992px) {
    .abt__split { grid-template-columns: minmax(0, 1fr) 340px; }
}
.abt__lead {
    position: relative;
    display: grid;
    gap: clamp(1.75rem, 3vw, 3rem);
    align-items: center;
    padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.75rem);
    background:
        radial-gradient(80% 120% at 100% 0%, rgba(247, 183, 49, .14) 0%, transparent 58%),
        radial-gradient(70% 110% at 0% 100%, rgba(80, 124, 58, .1) 0%, transparent 60%),
        var(--color-background);
    border-radius: var(--leaf);
    overflow: hidden;
}
/* One gold rule along the top edge, the accent the rest of the site uses. */
.abt__lead::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-secondary) 70%, transparent);
}

.abt__lead-copy { display: flex; flex-direction: column; align-items: flex-start; }
.abt__lead-copy .pill-eyebrow { margin-bottom: 1.25rem; }
.abt__lead-copy p + p { margin-top: 1rem; }

/* The three facts as chips rather than a rule-topped row: on a light ground a
   hairline above them read as a divider between paragraphs instead. */
.abt__facts {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
}
.abt__facts li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .9rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-primary);
}
.abt__facts i { color: var(--color-secondary-deep); font-size: .9rem; }

/* The picture as a framed object, with a Golden Sol plate slipped behind it —
   the same device the homepage uses on its collage. */
.abt__lead-media {
    position: relative;
    margin: 0;
}
.abt__lead-media::before {
    content: "";
    position: absolute;
    inset: 1.25rem -1rem -1rem 1.25rem;
    background: var(--color-accent);
    border-radius: var(--leaf);
    opacity: .28;
}
.abt__lead-media img {
    position: relative;
    display: block;
    width: 100%;
    /* Stacked under the copy rather than beside it, so the frame takes its
       height from the picture's own 4:3 instead of filling a column. Capped
       so a wide card cannot turn it into a banner. */
    height: auto;
    aspect-ratio: 4 / 3;
    max-height: 460px;
    object-fit: cover;
    border-radius: var(--leaf);
    box-shadow: var(--shadow-md);
}

/* The edition, on the picture. The one place gold sits on a photograph. */
.abt__lead-badge {
    position: absolute;
    z-index: 2;
    left: 1.15rem;
    bottom: 1.15rem;
    display: grid;
    gap: .1rem;
    padding: .7rem 1.1rem;
    border-radius: var(--leaf-flip);
    background: var(--color-accent);
    text-align: left;
}
.abt__lead-badge b {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-primary-deep);
}
.abt__lead-badge span {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: rgba(35, 59, 35, .82);
}

@media (max-width: 991.98px) {
    /* No room for the offset plate once the picture spans the column. */
    .abt__lead-media::before { display: none; }
    .abt__lead-media,
    .abt__lead-media img { min-height: 240px; }
}

/* Section heads are left-aligned and led by a numeral, so the page reads as a
   sequence of chapters rather than seven centred announcements. */
.abt__head {
    max-width: 60rem;
    margin: 0 0 2.5rem;
}
.abt__kicker {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .8125rem;
    letter-spacing: .16em;
    color: var(--color-secondary);
    font-variant-numeric: tabular-nums;
}
.abt__kicker--light { color: var(--color-accent); }
.abt__head h2 {
    margin: .5rem 0 0;
    font-size: clamp(1.625rem, 1.25rem + 1.7vw, 2.625rem);
    line-height: 1.15;
    letter-spacing: -.015em;
    color: var(--color-primary);
    text-wrap: balance;
}
.abt__head p {
    max-width: 70ch;
    margin: 1.15rem 0 0;
    font-size: 16px;
    line-height: 1.85;
    color: var(--color-ink-soft);
}

/* The organiser's own run-in lines — "This conference seeks to:" and "Key
   Reasons to Attend" — kept as the cues they are rather than promoted to
   headings that would compete with the section title. */
.abt__cue {
    margin: 0 0 1.35rem;
    font-family: var(--font-display);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-secondary-deep);
}
.abt__cue--sub { margin-top: 0; }

/* ---- the five aims ---- */

/* A bento rather than a uniform row: the first aim takes the wide cell, which
   breaks the grid's regularity without needing a second card style. */
.aim-grid {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.aim {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 1.85rem 1.7rem;
    background: linear-gradient(160deg,
        var(--color-white) 0%,
        rgba(255, 255, 255, .55) 100%);
    border: 1px solid rgba(47, 79, 47, .1);
    border-radius: var(--radius-xl);
    transition: transform .3s ease, box-shadow .3s ease;
}
.aim:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.aim__no {
    position: absolute;
    top: .5rem;
    right: 1rem;
    z-index: -1;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 4rem;
    line-height: 1;
    color: rgba(80, 124, 58, .1);
    font-variant-numeric: tabular-nums;
}
.aim__icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin-bottom: 1.1rem;
    border-radius: 16px;
    background: rgba(80, 124, 58, .12);
    color: var(--color-secondary-deep);
    font-size: 1.3rem;
    transition: background-color .3s ease, color .3s ease;
}
.aim:hover .aim__icon { background: var(--color-secondary-deep); color: var(--color-white); }
.aim b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    line-height: 1.35;
    color: var(--color-primary);
}
.aim p {
    margin: .5rem 0 0;
    font-size: .9375rem;
    line-height: 1.75;
    color: var(--color-ink-soft);
}

/* ---- the six key features ---- */

.feat-grid {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.feat {
    padding: 1.95rem 1.7rem;
    background: var(--color-light);
    border: 1px solid transparent;
    border-radius: var(--radius-xl);
    transition: transform .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.feat:hover {
    transform: translateY(-5px);
    background: var(--color-white);
    border-color: rgba(47, 79, 47, .1);
    box-shadow: var(--shadow-md);
}
.feat__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 1.2rem;
    border-radius: 16px;
    background: rgba(247, 183, 49, .25);
    color: #7A5604;
    font-size: 1.3rem;
    transition: background-color .3s ease, color .3s ease;
}
.feat:hover .feat__icon { background: var(--color-accent); color: var(--color-primary-deep); }
.feat h3 {
    margin: 0 0 .55rem;
    font-size: 1.0625rem;
    line-height: 1.35;
    color: var(--color-primary);
}
.feat p {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.75;
    color: var(--color-ink-soft);
}

/* ---- the theme card ---- */

/* One card, split: the theme itself is set over the photograph on the left,
   the explanation reads on white to its right. Splitting them this way lets
   the theme be a statement rather than a heading with a paragraph under it. */
.themecard {
    display: grid;
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid rgba(47, 79, 47, .1);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.themecard__media {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: 300px;
    margin: 0;
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.themecard__media img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
}
/* These are photographs of other events with their own branding in shot, so
   the Palm Frond wash is deep — over the brightest patch of banner in frame
   the theme still holds better than 6:1. */
.themecard__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(165deg,
        rgba(19, 31, 19, .82) 0%,
        rgba(35, 59, 35, .9) 45%,
        rgba(19, 31, 19, .96) 100%);
}
.themecard__quote { margin: 0; }
.themecard__quote p {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.375rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--color-white);
    text-wrap: balance;
}
.themecard__quote::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    margin: 1.35rem 0 0;
    background: var(--color-accent);
    border-radius: 2px;
}

.themecard__body {
    align-self: center;
    padding: clamp(1.75rem, 4vw, 3rem);
}
.themecard__body h2 {
    margin: .5rem 0 1.15rem;
    font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.125rem);
    line-height: 1.15;
    letter-spacing: -.015em;
    color: var(--color-primary);
}
.themecard__body p {
    margin: 0;
    max-width: 62ch;
    font-size: 16px;
    line-height: 1.9;
    color: var(--color-ink-soft);
}

/* ---- the ten key reasons ---- */

.reason-grid {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.reason {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding: 1.6rem 1.5rem;
    background: var(--color-white);
    border: 1px solid rgba(47, 79, 47, .1);
    border-radius: var(--radius-xl);
    transition: transform .3s ease, box-shadow .3s ease;
}
.reason:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
/* Watermarked, so ten cards stay countable without ten badges shouting. */
.reason__no {
    position: absolute;
    top: .25rem;
    right: .85rem;
    z-index: -1;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 3.25rem;
    line-height: 1;
    color: rgba(80, 124, 58, .09);
    font-variant-numeric: tabular-nums;
}
.reason__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(80, 124, 58, .12);
    color: var(--color-secondary-deep);
    font-size: 1.2rem;
    transition: background-color .3s ease, color .3s ease;
}
.reason:hover .reason__icon { background: var(--color-secondary-deep); color: var(--color-white); }
.reason b {
    display: block;
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.35;
    color: var(--color-primary);
}
.reason p {
    margin: .4rem 0 0;
    font-size: .9375rem;
    line-height: 1.75;
    color: var(--color-ink-soft);
}

/* ---- the ten brief reasons ---- */

/* Text-forward rows, so the second list does not read as another run at the
   card grid above it. Hairlines instead of boxes. */
.brief-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.brief {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .85rem;
    align-items: start;
    padding: 1.05rem .25rem;
    border-bottom: 1px solid var(--color-hairline);
    font-size: .9375rem;
    line-height: 1.75;
    color: var(--color-ink-soft);
}
.brief:last-child { border-bottom: 0; }
.brief > i {
    margin-top: .35rem;
    font-size: .95rem;
    color: var(--color-secondary);
}
.brief b {
    font-family: var(--font-display);
    color: var(--color-primary);
}
.brief b::after { content: " — "; color: var(--color-ink-soft); font-weight: 400; }

/* ---- the seven objectives ---- */

/* The alternating timeline this replaced made the eye zig-zag down seven
   items and left the odd-numbered ones set ragged-left, which is slower to
   read than it looked. This holds the title still on the left instead and
   runs the seven as one column of numbered rows — nothing to track across,
   and the heading stays in view for the whole list. */
.objx {
    display: grid;
    gap: 2.5rem;
    align-items: start;
}
.objx__head h2 {
    margin: .5rem 0 0;
    font-size: clamp(1.625rem, 1.25rem + 1.7vw, 2.625rem);
    line-height: 1.15;
    letter-spacing: -.015em;
    color: var(--color-primary);
    text-wrap: balance;
}

.objx__list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
/* Hairlines, not boxes: seven cards in a column read as seven things to
   choose between, and these are not choices. */
.objx__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.35rem;
    align-items: baseline;
    padding: 1.5rem 1rem 1.5rem .25rem;
    border-bottom: 1px solid var(--color-hairline);
    border-radius: var(--radius-md);
    transition: background-color .3s ease, padding-left .3s ease;
}
.objx__item:last-child { border-bottom: 0; }
.objx__item:hover { background: var(--color-white); padding-left: 1rem; }

.objx__no {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 1.25rem + .9vw, 2rem);
    line-height: 1;
    letter-spacing: -.02em;
    color: rgba(80, 124, 58, .32);
    font-variant-numeric: tabular-nums;
    transition: color .3s ease;
}
.objx__item:hover .objx__no { color: var(--color-secondary); }

.objx__body b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.125rem;
    line-height: 1.3;
    color: var(--color-primary);
}
.objx__body p {
    margin: .5rem 0 0;
    max-width: 62ch;
    font-size: .9375rem;
    line-height: 1.8;
    color: var(--color-ink-soft);
}

@media (min-width: 576px) {
    .aim-grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .feat-grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .reason-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
    /* Six across three columns: the wide first cell takes two of them, which
       is what breaks the grid out of being six identical boxes. */
    .aim-grid    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .aim--wide   { grid-column: span 2; }
    .feat-grid   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .reason-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* Two columns of hairline rows: ten short entries read faster side by
       side than as one long column. */
    .brief-list  { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
    /* Wide enough to split: the heading takes the left column and holds
       still there while the seven rows scroll past it. */
    .objx { grid-template-columns: minmax(0, .46fr) minmax(0, 1fr); gap: 4rem; }
    .objx__head { position: sticky; top: calc(var(--top-offset) + 1.5rem); }
    /* Image left, explanation right — the media column takes a touch less
       width so the paragraph is never the narrower half. */
    .themecard { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); }
    .themecard__media { min-height: 100%; }
}

/* -------------------------------------------------------------------------
   21j. Publication pages
   -------------------------------------------------------------------------
   journals-publications.php, plagiarism-policy.php and publication-faq.php.
   The FAQ page borrows `subfaq` wholesale and needs nothing of its own; the
   other two add the pieces the guide system did not already have.
   ---------------------------------------------------------------------- */

/* ---- the opening: pledge, peer review, indexing ---- */

/* A centred column, because the top of this page is a statement rather than
   a layout: one promise, one paragraph, one proof. */
.pubtop__inner {
    max-width: 60rem;
    margin-inline: auto;   /* without this the column sits left and only its text centres */
    text-align: center;
}
.pubtop__lead {
    max-width: 58ch;
    margin: 1.5rem auto 0;
    font-size: .9375rem;
    line-height: 1.8;
    text-wrap: pretty;
    color: var(--color-ink-soft);
}

/* The section label, set as a pill so it reads as a marker, not a heading. */
.pubtag {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.1rem;
    background: var(--color-white);
    border: 1px solid rgba(80, 124, 58, .35);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-secondary-deep);
}
.pubtag i { font-size: .9rem; color: var(--color-secondary); }

/* The organiser's pledge. Given a quiet green ground and a mark of its own so
   it is read as a promise rather than skimmed as an intro line. */
.pubquote {
    position: relative;
    max-width: 54rem;
    margin: 2rem auto 0;
    /* Even padding: there is a mark at each end now, so the quote can no
       longer be indented from one side only. */
    padding: 1.6rem 3.25rem;
    background: rgba(80, 124, 58, .07);
    border: 1px solid rgba(80, 124, 58, .16);
    border-left: 4px solid var(--color-secondary);
    border-radius: var(--radius-lg);
    text-align: left;
}
.pubquote::before,
.pubquote::after {
    position: absolute;
    font-family: var(--font-display);
    font-size: 3.25rem;
    line-height: 1;
    color: rgba(80, 124, 58, .32);
}
.pubquote::before {
    content: "\201C";
    top: .35rem;
    left: 1rem;
}
/* The quote opened and never closed, the same way the home page one did. */
.pubquote::after {
    content: "\201D";
    right: 1rem;
    bottom: -.5rem;
}
.pubquote p {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1rem, .95rem + .35vw, 1.1875rem);
    font-style: italic;
    line-height: 1.6;
    color: var(--color-primary);
}

/* ---- the indexing card ---- */

/* The databases are the credibility proof, so they sit on the one dark ground
   on the page and nothing else competes with them. */
.idxcard {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    max-width: 54rem;   /* same edge as the pledge above it */
    margin: 2.25rem auto 0;
    padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
    background: linear-gradient(150deg,
        var(--color-primary) 0%,
        var(--color-primary-deep) 55%,
        var(--color-night) 100%);
    border-radius: var(--leaf);
    box-shadow: var(--shadow-lg);
}
.idxcard__title {
    margin: 0 0 1.1rem;
    font-size: clamp(1.125rem, 1.05rem + .4vw, 1.375rem);
    color: var(--color-white);
}
/* A short gold rule under the title, the same mark the dark bands use. */
.idxcard__title::after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin: .5rem auto 0;
    background: var(--color-accent);
    border-radius: 2px;
}
/* One white strip holding all five marks, so the logos keep their own
   colours against a ground they were drawn for. Each mark is given the same
   28px of height to sit in — the files carry their own whitespace, so a
   shared cap is the only thing that stops one dwarfing the next. */
.idxcard__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem 1.25rem;
    /* The strip is as wide as the five marks, not as wide as the card:
       stretched full width it left a band of blank white either side. */
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: .85rem 1.25rem;
    background: var(--color-white);
    border-radius: var(--radius-md);
    list-style: none;
}
.idxcard__logos li {
    display: grid;
    place-items: center;
    width: 108px;
    height: 40px;
}
.idxcard__logos img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 34px;
    object-fit: contain;
}
.idxcard__logos b {
    font-family: var(--font-display);
    font-size: .875rem;
    color: var(--color-primary);
}
.idxcard__note {
    max-width: 54ch;
    margin: 1.1rem auto 0;
    font-size: .8125rem;
    line-height: 1.6;
    color: rgba(251, 238, 215, .86);
}
.idxcard__note b { color: var(--color-accent); }
.idxcard__note span { color: var(--color-accent); }

/* ---- the indexing statement ---- */

/* One sentence, and the reason most authors opened the page, so it gets a
   band of its own rather than a paragraph in a column. */
.jindex {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    max-width: 62rem;
    margin: 0 0 2.5rem;
    padding: 1.35rem 1.6rem;
    background: var(--color-white);
    border: 1px solid var(--color-cream-deep);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--leaf);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--color-primary);
}
.jindex__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--leaf-flip);
    background: rgba(247, 183, 49, .25);
    color: #7A5604;
    font-size: 1.15rem;
}
.jindex small {
    display: block;
    margin-top: .35rem;
    font-size: .8125rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
}

/* ---- the four journal routes ---- */

.jroute-grid {
    display: grid;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.jroute {
    display: flex;
    flex-direction: column;
    padding: 1.85rem 1.6rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.jroute:hover {
    transform: translateY(-4px);
    border-color: rgba(80, 124, 58, .45);
    box-shadow: var(--shadow-sm);
}
.jroute__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 1.1rem;
    border-radius: var(--leaf-flip);
    background: rgba(80, 124, 58, .12);
    color: var(--color-secondary-deep);
    font-size: 1.35rem;
    transition: background-color .25s ease, color .25s ease;
}
.jroute:hover .jroute__icon { background: var(--color-secondary-deep); color: var(--color-white); }
.jroute h3 {
    margin: 0 0 .5rem;
    font-size: 1.125rem;
    color: var(--color-primary);
}
.jroute > p {
    margin: 0 0 1.15rem;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--color-text);
}
/* What the route accepts, so the card answers before the click. */
.jroute__issues {
    display: grid;
    gap: .45rem;
    margin: 0 0 1.35rem;
    padding: 0;
    list-style: none;
}
.jroute__issues li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--color-ink-soft);
}
.jroute__issues i { flex: none; margin-top: .18rem; color: var(--color-secondary-deep); }
/* Pinned to the card floor so four cards of different lengths line up. */
.jroute__cta {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: auto;
    padding-top: .3rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .9375rem;
    color: var(--color-secondary-deep);
    text-decoration: none;
}
.jroute__cta i { transition: transform .22s ease; }
.jroute:hover .jroute__cta i { transform: translateX(3px); }

/* ---- research guidance services ---- */

.serv-grid {
    display: grid;
    gap: .7rem 2rem;
    margin: 0;
    padding: 1.5rem 0 .25rem;
    list-style: none;
}
.serv {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--color-text);
}
.serv i { flex: none; margin-top: .22rem; color: var(--color-secondary-deep); }

/* Steps on this page carry two or three points each rather than a sentence. */
.track-step__points {
    display: grid;
    gap: .4rem;
    margin: .2rem 0 0;
    padding-left: 1.1rem;
}
.track-step__points li {
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--color-text);
}
.track-step__points li::marker { color: var(--color-secondary); }

/* A long single-column list of rules reads as a wall, so it runs in two. */
.tick-list--two { gap: .7rem 2.5rem; }

/* The page's framing paragraph. Centred and held to a readable measure so
   it reads as a preamble, not as a first section of its own. */
.policy-lead {
    max-width: 74ch;
    margin: 0 auto 2rem;
    font-size: 16px;
    line-height: 1.8;
    text-align: center;
    color: var(--color-ink-soft);
}

/* ---- the similarity ceiling ----
   80/20 is a proportion, and a proportion is easier to see than to read, so
   the ring carries it and the key underneath spells out both halves. Both
   numbers are derived from one constant in config, never typed twice. */

.ceiling {
    display: grid;
    gap: 1.75rem 3rem;
    justify-items: center;
    align-items: center;
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    background: var(--color-background);
    border: 1px solid var(--color-cream-deep);
    border-radius: var(--leaf);
}

/* One conic sweep: green to the original share, warm for the remainder. The
   inner disc is punched out with a ::before rather than a border so the two
   colours meet cleanly at the seam. */
.ceiling__ring {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: 172px;
    height: 172px;
    margin: 0;
    border-radius: 50%;
    background: conic-gradient(
        var(--color-secondary) 0 calc(var(--original, 80) * 1%),
        rgba(217, 83, 79, .8) 0);
    box-shadow: var(--shadow-md);
}
.ceiling__ring::before {
    content: "";
    position: absolute;
    inset: 17px;
    background: var(--color-white);
    border-radius: 50%;
}
.ceiling__ring-face {
    position: relative;
    display: grid;
    place-items: center;
    text-align: center;
}
.ceiling__ring-face b {
    display: block;
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}
.ceiling__ring-face small {
    display: block;
    margin-top: .2rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
}

.ceiling__body { text-align: center; }
.ceiling__body h2 {
    margin: 1rem 0 .65rem;
    font-size: clamp(1.25rem, 1.1rem + .7vw, 1.625rem);
    color: var(--color-primary);
    text-wrap: balance;
}
.ceiling__body p {
    margin: 0 0 1.25rem;
    font-size: .9375rem;
    line-height: 1.75;
    color: var(--color-text);
}
/* The legend for the ring, and the place the exact wording of each half
   lives — "references included" belongs next to the number it qualifies. */
.ceiling__key {
    display: grid;
    gap: .55rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    text-align: left;
}
.ceiling__key-item {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .7rem .9rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: 10px;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--color-text);
}
.ceiling__key-item i { flex: none; margin-top: .1rem; font-size: 1rem; }
.ceiling__key-item b { color: var(--color-primary); }
.ceiling__key-item--good i { color: var(--color-secondary); }
.ceiling__key-item--cap  i { color: var(--color-error); }

/* ---- the jump nav ----
   People arrive at a policy page looking for one clause. Four links save them
   scrolling past three sections to reach the fourth. */

.jumpnav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .65rem;
    margin-top: 1.5rem;
    padding: .9rem 1.15rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
}
.jumpnav__label {
    margin-right: .35rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
}
.jumpnav a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .85rem;
    background: var(--color-light);
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.jumpnav a i { font-size: .9rem; color: var(--color-secondary-deep); }
.jumpnav a:hover,
.jumpnav a:focus-visible {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}
.jumpnav a:hover i,
.jumpnav a:focus-visible i { color: var(--color-accent); }

/* ---- the submission guidelines jump bar ----
   Same component, centred and sat on its own band directly under the hero.
   The policy page's rail is left-aligned and full width inside its section;
   here the three links are the only navigation on the page, so the card
   shrink-wraps them and the pills are pitched a little louder. */

.jumpbar {
    padding-block: 2.25rem 0;
    background: var(--color-white);
}
.jumpnav--centre {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}
.jumpnav--centre a {
    padding: .55rem 1.1rem;
    background: rgba(47, 79, 47, .06);
    border-color: var(--color-hairline);
    font-size: .875rem;
}
.jumpnav--centre a i { color: var(--color-secondary); }

/* ---- do / avoid chips ---- */

/* Two long lists of directives read alike; the chip says up front which one
   a reader is in. */
.rule-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .5rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.rule-chip--do {
    background: rgba(80, 124, 58, .12);
    color: var(--color-secondary-deep);
}
.rule-chip--avoid {
    background: rgba(247, 183, 49, .28);
    color: #7A5604;
}

@media (min-width: 768px) {
    .ceiling { grid-template-columns: auto minmax(0, 1fr); justify-items: start; }
    .ceiling__body { text-align: left; }
    .ceiling__body h2 { margin-top: 0; }
    .ceiling__key { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- ethical guidelines and malpractices ----
   A row each — icon, heading, its points — rather than a card each. Ten cards
   ran to roughly twice this height for exactly the same words, and nothing in
   the content asked for ten boxes. */

.rule-list {
    display: grid;
    gap: .65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.rule {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding: 1rem 1.25rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: 12px;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.rule:hover { border-color: rgba(80, 124, 58, .45); box-shadow: var(--shadow-sm); }

.rule__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(80, 124, 58, .12);
    color: var(--color-secondary-deep);
    font-size: 1.05rem;
}
/* The malpractices are things not to do, so their marker runs warm instead. */
.rule--warn .rule__icon { background: rgba(247, 183, 49, .25); color: #7A5604; }
.rule--warn:hover { border-color: var(--color-cream-deep); }

.rule h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
    color: var(--color-primary);
}
.rule__points {
    display: grid;
    gap: .3rem;
    margin: .4rem 0 0;
    padding-left: 1.05rem;
}
.rule__points li {
    font-size: .9rem;
    line-height: 1.6;
    color: var(--color-text);
}
.rule__points li::marker { color: var(--color-secondary); }

@media (min-width: 992px) {
    .rule-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- compact page furniture ----
   Scoped to .compact-guide so the same components keep their roomier default
   on the other guide pages. */

.compact-guide .guide__head { gap: 1rem; margin-bottom: 1.15rem; }
.compact-guide .guide__head p { margin-top: .35rem; font-size: .9375rem; line-height: 1.6; }
.compact-guide .guide__help { margin-top: 1.25rem; }

/* ---- publishing terms ---- */

.terms-list {
    display: grid;
    gap: .75rem;
    max-width: 62rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.terms-list__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding: 1.1rem 1.35rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--color-text);
    transition: border-color .25s ease, box-shadow .25s ease;
}
.terms-list__item:hover { border-color: rgba(80, 124, 58, .45); box-shadow: var(--shadow-sm); }
@media (min-width: 992px) {
    .terms-list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
}
.terms-list__no {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .875rem;
    color: var(--color-secondary-deep);
    font-variant-numeric: tabular-nums;
}

@media (min-width: 576px) {
    .jroute-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .serv-grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tick-list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
    .jroute-grid  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    /* Short labels, so three columns keep the tab pane from running long. */
    .serv-grid    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------------------
   22. Scientific tracks page
   ---------------------------------------------------------------------- */

.tracks-page__head,
.guides__head,
.no-reply__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 52rem;
    margin-inline: auto;
    margin-bottom: 3rem;
    text-align: center;
}
.tracks-page__head h2,
.guides__head h2,
.no-reply__head h2 { margin: 1.25rem 0 0; text-wrap: balance; }
.tracks-page__lead {
    max-width: 62ch;
    margin: 1.15rem 0 0;
    font-size: 16px;
    line-height: 1.75;
    text-align: center;
    color: var(--color-ink-soft);
}

/* -------------------------------------------------------------------------
   22b. Submission guidelines — abstract and full paper, side by side
   -------------------------------------------------------------------------
   One section instead of two stacked ones. Each column opens with a bar, then
   the four facts a submission is checked against, then the full rules. The
   two sides read as a comparison, which is how people actually use them.
   ---------------------------------------------------------------------- */

.subguide__head {
    max-width: 48rem;
    margin: 0 auto 2.5rem;
    text-align: center;
}
.subguide__head h2 { margin: 0; text-wrap: balance; }
.subguide__head p {
    max-width: 56ch;
    margin: .9rem auto 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-ink-soft);
}

.subguide__cols {
    display: grid;
    gap: 1.75rem;
    align-items: start;
}
.subguide__col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* The bar names the column and does the colour-coding, so the two halves stay
   told apart while scrolling past the detail. */
.subguide__bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.35rem;
    border-radius: var(--leaf);
}
.subguide__bar--abstract {
    background: linear-gradient(100deg, var(--color-secondary) 0%, var(--color-primary) 100%);
}
.subguide__bar--paper {
    background: linear-gradient(100deg, var(--color-night) 0%, var(--color-primary) 100%);
}
/* The chip is tinted with Night, not Cream. A cream chip lifts the ground to
   #6B8E53 at the light end of the abstract bar, where Golden Sol only
   reaches 2.1:1 — under the 3:1 a graphical mark needs. Night at .4 drops
   it to #38572A and the same gold reads 4.6:1. */
.subguide__bar-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--leaf-flip);
    background: rgba(19, 31, 19, .4);
    color: var(--color-accent);
    font-size: 1.2rem;
}
.subguide__bar h3 {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.3;
    color: var(--color-white);
}

/* ---- the four facts ---- */

.glance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.glance {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 1.05rem 1.1rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: 10px;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.glance:hover {
    border-color: rgba(80, 124, 58, .45);
    box-shadow: var(--shadow-sm);
}
.glance__head {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.glance__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(80, 124, 58, .12);
    color: var(--color-secondary-deep);
    font-size: .95rem;
}
.glance__head b {
    font-family: var(--font-display);
    font-size: .9375rem;
    color: var(--color-primary);
}
.glance > span {
    font-size: .875rem;
    line-height: 1.55;
    color: var(--color-ink-soft);
}

/* ---- the one rule that voids a submission ---- */

/* Given its own block rather than left as the second bullet of six. It is the
   only rule here whose breach cannot be fixed by revising, so it is set apart
   in the error colour rather than the brand green. */
.subguide__notice {
    padding: 1.15rem 1.25rem;
    background: rgba(217, 83, 79, .07);
    border: 1px solid rgba(217, 83, 79, .3);
    border-radius: 10px;
}
.subguide__notice-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .45rem;
}
.subguide__notice-head i { color: #B4322D; font-size: 1.05rem; }
.subguide__notice-head b {
    font-family: var(--font-display);
    font-size: .9375rem;
    color: #8F2723;
}
.subguide__notice p {
    margin: 0;
    font-size: .875rem;
    line-height: 1.6;
    color: #7A2420;
}
.subguide__notice p b { color: #8F2723; }

/* ---- the full rules under the summary ---- */

.subguide__detail {
    display: grid;
    gap: .85rem;
}

@media (min-width: 992px) {
    .subguide__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}
@media (max-width: 575.98px) {
    .glance-grid { grid-template-columns: minmax(0, 1fr); }
    .subguide__bar { padding: 1rem 1.1rem; gap: .8rem; }
    .subguide__bar h3 { font-size: 1.0625rem; }
}

/* -------------------------------------------------------------------------
   22c. If you have not heard back
   -------------------------------------------------------------------------
   Two columns rather than a stack: the heading and the address on the left,
   the four notes as a 2x2 on the right. Half the height of the stacked
   version, and the address — which is the action in every one of the notes —
   is set large enough to read from across the band instead of being buried
   in the prose four times.
   ---------------------------------------------------------------------- */

.no-reply__grid {
    display: grid;
    gap: 2rem;
    align-items: center;
}

.no-reply__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    text-align: left;
    margin: 0;
    max-width: none;
}
.no-reply__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--leaf-flip);
    background: rgba(247, 183, 49, .18);
    color: var(--color-accent);
    font-size: 1.4rem;
}
.no-reply__head h2 {
    margin: 0;
    font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);
    line-height: 1.22;
    text-wrap: balance;
}

/* The address as a plate, not a line of text. Gold on Night measures 9.6:1,
   so it can carry the weight without a fill behind it. */
.no-reply__mail {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem 1.15rem;
    background: rgba(247, 183, 49, .1);
    border: 1px solid rgba(247, 183, 49, .45);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: clamp(1rem, .95rem + .3vw, 1.1875rem);
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
    transition: background-color .25s ease, border-color .25s ease,
                color .25s ease, transform .22s ease;
}
.no-reply__mail:hover,
.no-reply__mail:focus-visible {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-deep);
    transform: translateY(-2px);
}
.no-reply__mail i { font-size: .95em; }

/* ---- the four notes ---- */

.no-reply__list {
    display: grid;
    gap: .85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.no-reply__list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: .85rem;
    padding: 1rem 1.15rem;
    background: rgba(251, 238, 215, .06);
    border: 1px solid rgba(251, 238, 215, .14);
    border-radius: 10px;
    transition: border-color .25s ease, background-color .25s ease;
}
.no-reply__list li:hover {
    background: rgba(251, 238, 215, .1);
    border-color: rgba(247, 183, 49, .4);
}
.no-reply__list li > i {
    margin-top: .15rem;
    color: var(--color-accent);
    font-size: 1.05rem;
}
.no-reply__list p {
    margin: 0;
    font-size: .875rem;
    line-height: 1.6;
    color: rgba(251, 238, 215, .88);
}

/* The address inside a note is the thing to act on, so it is a live link
   rather than text the reader has to copy out by hand. */
.mail-mark {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    white-space: nowrap;
}
.mail-mark:hover { color: var(--color-white); }

@media (min-width: 992px) {
    .no-reply__grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: 3rem; }
    .no-reply__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------------------
   21e. Session cards — the tracks page
   ---------------------------------------------------------------------- */

/* Four across. Each card is a doorway to one session's page, so it carries
   only what identifies the session: its artwork, number, name and the goals
   it advances. About, objective, core, focus and outcome live on
   session-N.php.

   The card is one <a>, so the whole tile is the target and there is no button
   inside a link claiming to be separately clickable. */
.tracks-page__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;   /* the number is drawn on the card */
    counter-reset: none;
}
.tracks-page__list > li { display: flex; }
/* The row of actions under the ten cards. It had no rule of its own, so it
   was sitting flush against the last row of tiles. */
.tracks-page__actions { margin-top: clamp(2rem, 1.25rem + 2vw, 3.25rem); }

.track-card-lg {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    min-height: 214px;
    padding: 1.4rem 1.25rem 1.25rem;
    overflow: hidden;
    background: var(--color-primary-deep);
    border-radius: var(--leaf);
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease;
}
.track-card-lg:hover,
.track-card-lg:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.track-card-lg::before {
    content: "";
    position: absolute;
    inset: auto auto 0 0;
    width: 0;
    height: 3px;
    background: var(--color-accent);
    transition: width .35s ease;
}
.track-card-lg:hover::before,
.track-card-lg:focus-visible::before { width: 100%; }

.track-card-lg__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;   /* vector artwork, drawn in the palette already */
    transition: transform .5s ease;
}
.track-card-lg:hover .track-card-lg__bg { transform: scale(1.05); }

/* A Palm Frond scrim, deepening toward the foot where the copy sits. These
   are event photographs with their own colour and branding in them, so the
   wash both pulls them into this palette and does the contrast work: it
   reaches .82 under the title, which over the worst case — a white patch of
   photo — composites dark enough to hold white type well clear of AA. */
.track-card-lg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(188deg,
        rgba(47, 79, 47, .22) 0%,
        rgba(19, 31, 19, .38) 26%,
        rgba(19, 31, 19, .84) 62%,
        rgba(19, 31, 19, .95) 100%);
}

/* The number is a real position in a numbered list of ten, so it is set as a
   marker rather than decoration — but kept out of the title's way. */
.track-card-lg__no {
    position: absolute;
    top: 1.1rem;
    right: 1.15rem;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(251, 238, 215, .28);
    font-variant-numeric: tabular-nums;
    transition: color .3s ease;
}
.track-card-lg:hover .track-card-lg__no { color: rgba(247, 183, 49, .55); }

.track-card-lg__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
    padding-right: 2.6rem;   /* clear of the arrow */
}
.track-card-lg__icon {
    position: absolute;
    top: 1.15rem;
    left: 1.25rem;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--leaf-flip);
    background: rgba(247, 183, 49, .22);
    color: var(--color-accent);
    font-size: 1.2rem;
    transition: background-color .3s ease, color .3s ease;
}
.track-card-lg:hover .track-card-lg__icon {
    background: var(--color-accent);
    color: var(--color-primary);
}
.track-card-lg h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--color-white);
}
.track-card-lg .sdg-row { margin: 0; padding-top: 0; gap: .3rem; }
.track-card-lg .sdg-badge img { width: 28px; height: 28px; }

.track-card-lg__go {
    position: absolute;
    right: 1.1rem;
    bottom: 1.2rem;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(251, 238, 215, .4);
    color: var(--color-white);
    font-size: .9rem;
    transition: background-color .3s ease, border-color .3s ease,
                color .3s ease, transform .3s ease;
}
.track-card-lg:hover .track-card-lg__go {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary);
    transform: translateX(3px);
}

@media (max-width: 1199.98px) {
    .tracks-page__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .tracks-page__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .tracks-page__list { grid-template-columns: minmax(0, 1fr); }
    .track-card-lg { min-height: 200px; }
}

/* -------------------------------------------------------------------------
   21f. One session, in full
   ---------------------------------------------------------------------- */

/* The About copy opens the page, centred: it is the one paragraph that says
   what the session is, so everything below reads as detail under it. */
.session__about {
    max-width: 72ch;
    margin: 0 auto 2.5rem;
    text-align: center;
}
.session__about h2 {
    margin: 0 0 .85rem;
    font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem);
    color: var(--color-primary);
    text-wrap: balance;
}
.session__about p {
    margin: 0;
    font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
    line-height: 1.75;
    color: var(--color-ink-soft);
}

/* The session's own artwork beside the goals it advances. The artwork was in
   the page hero; it reads far better here, at a size where its motif is
   legible and next to the thing it illustrates. */
.session__banner {
    display: grid;
    gap: 0;
    margin-bottom: 2.5rem;
    overflow: hidden;
    background: var(--color-primary-deep);
    border-radius: var(--leaf);
}
/* The left panel of the banner. A figure rather than a bare image so the
   pattern has something to sit inside when the session has a photograph;
   sessions still on generated artwork render the same as before. */
.session__banner-figure {
    position: relative;
    margin: 0;
    min-height: 200px;
    overflow: hidden;
}
.session__banner-art {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 200px;
    object-fit: cover;
}

/* The site's dot field plus a Palm Frond wash, laid over the photograph and
   masked away from the middle so faces stay clear of it. The wash runs from
   the right, where the panel meets the dark card, so the two grounds meet
   without a hard seam. */
.session__banner-pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(rgba(251, 238, 215, .42) 1.5px, transparent 1.5px),
        linear-gradient(285deg,
            rgba(35, 59, 35, .82) 0%,
            rgba(35, 59, 35, .22) 38%,
            rgba(19, 31, 19, .35) 100%);
    background-size: 16px 16px, auto;
    -webkit-mask-image: radial-gradient(110% 85% at 45% 50%, transparent 22%, #000 95%);
    mask-image: radial-gradient(110% 85% at 45% 50%, transparent 22%, #000 95%);
}
.session__banner-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;   /* the copy is shorter than the artwork */
    gap: .85rem;
    padding: 2rem 1.9rem;
}
/* The session's own name, so the card stands on its own wherever it is
   seen rather than depending on the heading above it. */
.session__banner-title {
    margin: 0;
    font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
    line-height: 1.28;
    color: var(--color-white);
    text-wrap: balance;
}
/* Demoted to a label: it introduces the tiles under it, and two headings
   in one card would fight each other. */
.session__banner-label {
    margin: .15rem 0 0;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* The goals at full size and named. A tile on its own is just a logo; with
   its number and title it states what the session is actually for. */
.goal-list {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
.goal-list li {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .5rem .95rem .5rem .5rem;
    background: rgba(19, 31, 19, .34);
    border: 1px solid rgba(251, 238, 215, .2);
    border-radius: 12px;
    transition: border-color .25s ease, background-color .25s ease;
}
.goal-list li:hover {
    background: rgba(19, 31, 19, .18);
    border-color: rgba(247, 183, 49, .5);
}
.goal-list img {
    display: block;
    width: 58px;
    height: 58px;
    border-radius: 9px;
    object-fit: cover;
}
.goal-list span {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.goal-list b {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--color-white);
    font-variant-numeric: tabular-nums;
}
.goal-list small {
    font-size: .8125rem;
    line-height: 1.35;
    color: rgba(251, 238, 215, .84);
}

@media (min-width: 768px) {
    .session__banner { grid-template-columns: minmax(0, .78fr) minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
    .session__banner-art { min-height: 150px; aspect-ratio: 16 / 7; height: auto; }
    .session__banner-body { padding: 1.6rem 1.35rem; }
    .goal-list img { width: 48px; height: 48px; }
}
.session__badge {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 1rem;
    background: rgba(80, 124, 58, .12);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-secondary-deep);
}
.session__badge i { font-size: 1rem; }

/* The two halves of what a session is for, side by side: what it sets out to
   do, and what should be true afterwards. */
.session__grid {
    display: grid;
    gap: 1.25rem;
}
.session__panel {
    position: relative;
    padding: 1.85rem 1.75rem;
    border-radius: var(--leaf);
}
.session__panel--objective {
    background: var(--color-background);
    border: 1px solid var(--color-cream-deep);
}
.session__panel--outcome {
    background: var(--color-light);
    border: 1px solid var(--color-hairline);
}
.session__panel-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: .9rem;
    border-radius: var(--leaf-flip);
    background: rgba(80, 124, 58, .14);
    color: var(--color-secondary-deep);
    font-size: 1.25rem;
}
.session__panel--objective .session__panel-icon {
    background: rgba(247, 183, 49, .28);
    color: #7A5604;
}
.session__panel h2 {
    margin: 0 0 .6rem;
    font-size: 1.25rem;
    color: var(--color-primary);
}
.session__panel p {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text);
}

.session__split {
    display: grid;
    gap: 2.5rem;
    align-items: start;
}
.session__sub {
    margin: 0 0 1.15rem;
    font-size: 1.25rem;
    color: var(--color-primary);
}

/* Focus areas are labels, not sentences — the organiser wrote them as a
   bullet-separated run, so they are set as chips. */
.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.chip-list li {
    padding: .5rem .95rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: .875rem;
    font-weight: 500;
    color: var(--color-primary);
    transition: border-color .25s ease, background-color .25s ease;
}
.chip-list li:hover {
    background: rgba(80, 124, 58, .08);
    border-color: rgba(80, 124, 58, .45);
}

/* ---- moving between the ten ---- */

/* No cards here. A rule across the top, a circled arrow at each end and the
   destination named — the pager is a signpost, and boxing it made it compete
   with the content it sits under. */
.session__pager {
    display: grid;
    align-items: center;
    gap: 1.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--color-hairline);
}
.session__pager-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
}
.session__pager-arrow {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--color-hairline);
    color: var(--color-secondary-deep);
    font-size: 1rem;
    transition: background-color .25s ease, border-color .25s ease,
                color .25s ease, transform .25s ease;
}
.session__pager-link:hover .session__pager-arrow,
.session__pager-link:focus-visible .session__pager-arrow {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-white);
}
.session__pager-link:hover .session__pager-arrow { transform: translateX(-3px); }
.session__pager-link--next:hover .session__pager-arrow { transform: translateX(3px); }

.session__pager-text {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}
.session__pager-text small {
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
}
.session__pager-text b {
    font-size: .9375rem;
    line-height: 1.35;
    color: var(--color-primary);
    transition: color .25s ease;
}
.session__pager-link:hover .session__pager-text b { color: var(--color-secondary-deep); }

.session__pager-link--next { justify-content: flex-end; text-align: right; }
.session__pager-link--next .session__pager-text { align-items: flex-end; }
.session__pager-all { justify-self: center; white-space: nowrap; }
@media (min-width: 768px) {
    .session__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
    .session__split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; }
    .session__pager { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
}
@media (max-width: 991.98px) {
    .session__pager { gap: 1.25rem; }
    .session__pager-link--next { justify-content: flex-start; text-align: left; }
    .session__pager-link--next .session__pager-text { align-items: flex-start; }
    .session__pager-all { justify-self: start; }
}

/* -------------------------------------------------------------------------
   23. Abstract guidelines page — icon treatments
   ---------------------------------------------------------------------- */

/* The section marker was a ghosted number on its own. It now pairs an icon
   with that number, so each step is identifiable before it is read. */
.guide__mark {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: 62px;
    height: 62px;
    border-radius: var(--leaf);
    background: rgba(80, 124, 58, .12);
    color: var(--color-secondary-deep);
    font-size: 1.5rem;
}
.guide__mark b {
    position: absolute;
    top: -.4rem;
    right: -.4rem;
    display: grid;
    place-items: center;
    min-width: 26px;
    height: 26px;
    padding: 0 .3rem;
    background: var(--color-primary);
    border: 2px solid var(--color-white);
    border-radius: 999px;
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.section--cream .guide__mark b,
.section--mist .guide__mark b { border-color: var(--color-background); }
.section--mist .guide__mark b { border-color: var(--color-light); }

/* ---- manuscript sections ---- */

.section-card {
    position: relative;
    padding-top: 1.5rem;
}
.section-card__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: .7rem;
    border-radius: 10px;
    background: rgba(80, 124, 58, .12);
    color: var(--color-secondary-deep);
    font-size: 1.05rem;
    transition: background-color .25s ease, color .25s ease;
}
.section-card:hover .section-card__icon {
    background: var(--color-secondary);
    color: var(--color-white);
}
/* The ordinal moves to the corner so the icon can lead. */
.section-card__num {
    position: absolute;
    top: .85rem;
    right: 1rem;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(47, 79, 47, .13);
    font-variant-numeric: tabular-nums;
}

/* ---- evaluation timeline ---- */

.track-step__node {
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    font-weight: 400;   /* it holds a glyph now, not a digit */
}

@media (max-width: 575.98px) {
    .guide__mark { width: 52px; height: 52px; font-size: 1.25rem; }
    .section-card__num { font-size: 1.25rem; }
}

/* -------------------------------------------------------------------------
   24. Call for volunteers
   -------------------------------------------------------------------------
   Five blocks, each with its own job: the reasons, the two tracks, the four
   requirements on a dark band, the four steps, and the form. The tracks are
   tabbed because the two role sets share nothing — reading both means
   filtering twelve cards for the five or seven that apply to you.
   ---------------------------------------------------------------------- */

.vol__head {
    max-width: 62ch;
    margin-inline: auto;
    margin-bottom: clamp(2rem, 4vw, 3.25rem);
    text-align: center;
}
.vol__head p { margin: 1rem auto 0; max-width: 60ch; }

/* ---- why volunteer ---- */

.vol__why {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(2rem, 5vw, 4.25rem);
    align-items: start;
}
/* The aside is the narrow column, so its heading runs a step below the
   page scale rather than breaking across four lines. */
.vol__why-aside h2 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); }
.vol__why-aside p { margin-top: 1rem; max-width: 46ch; }

.vol__why-media {
    margin: 1.75rem 0 1.5rem;
    border-radius: var(--leaf);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.vol__why-media img {
    display: block;
    width: 100%;
    height: clamp(220px, 30vw, 320px);
    object-fit: cover;
}

/* The five reasons. A rule between rather than five boxes: they are one
   list, and five bordered cards would read as five unrelated claims. */
.vol__perks {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.perk {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 1.15rem;
    padding: 1.35rem 0;
    border-top: 1px solid var(--color-hairline);
    transition: background-color .25s ease;
}
.perk:last-child { border-bottom: 1px solid var(--color-hairline); }

.perk__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: var(--leaf);
    background: rgba(80, 124, 58, .12);
    color: var(--color-secondary-deep);
    font-size: 1.35rem;
    transition: background-color .25s ease, color .25s ease, border-radius .3s ease;
}
.perk:hover .perk__icon {
    background: var(--color-secondary);
    color: var(--color-white);
    border-radius: var(--leaf-flip);
}
.perk__body h3 {
    margin: 0 0 .35rem;
    font-size: var(--step-h3);
    color: var(--color-primary);
}
.perk__body p {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--color-text);
}
.perk__num {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(47, 79, 47, .16);
    font-variant-numeric: tabular-nums;
}

/* ---- the two tracks ---- */

.vol__tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    max-width: 880px;
    margin: 0 auto 2.25rem;
    padding: 0;
    list-style: none;
    border: 0;
}
.vol__tab {
    display: flex;
    align-items: center;
    gap: .85rem;
    width: 100%;
    height: 100%;
    padding: .95rem 1.15rem;
    text-align: left;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
    cursor: pointer;
    transition: background-color .25s ease, border-color .25s ease,
                color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.vol__tab:hover {
    border-color: rgba(80, 124, 58, .5);
    transform: translateY(-2px);
}
.vol__tab-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--leaf-flip);
    background: rgba(80, 124, 58, .12);
    color: var(--color-secondary-deep);
    font-size: 1.1rem;
    transition: background-color .25s ease, color .25s ease;
}
.vol__tab-text { display: grid; gap: .1rem; min-width: 0; }
.vol__tab-text b {
    font-family: var(--font-display);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-primary);
}
.vol__tab-text small {
    font-size: .78rem;
    color: var(--color-ink-soft);
}
/* The selected tab goes dark, so the panel below reads as hanging off it. */
.vol__tab.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}
.vol__tab.active .vol__tab-text b { color: var(--color-white); }
.vol__tab.active .vol__tab-text small { color: rgba(251, 238, 215, .78); }
.vol__tab.active .vol__tab-icon {
    background: rgba(247, 183, 49, .22);
    color: var(--color-accent);
}

.track__intro {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
    padding: 1.35rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
}
.track__media {
    margin: 0;
    border-radius: var(--leaf);
    overflow: hidden;
}
.track__media img {
    display: block;
    width: 100%;
    height: clamp(200px, 26vw, 280px);
    object-fit: cover;
}
.track__chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .8rem;
    border-radius: 999px;
    background: rgba(63, 169, 245, .14);
    color: var(--color-info-deep);
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 600;
}
.track__copy h3 {
    margin: .8rem 0 .5rem;
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
    line-height: 1.15;
    color: var(--color-primary);
}
.track__copy p { margin: 0; max-width: 52ch; }

/* The role count is a fact worth stating before the grid of them. */
.track__copy .track__count {
    display: inline-flex;
    align-items: baseline;
    gap: .5rem;
    margin: 1.1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--color-hairline);
}
.track__count b {
    font-family: var(--font-display);
    font-size: 1.75rem;
    line-height: 1;
    color: var(--color-secondary-deep);
}
.track__count span {
    font-size: .875rem;
    color: var(--color-ink-soft);
}

/* ---- one role ---- */

/* auto-fit rather than a fixed count: one track has five roles, the other
   seven, and neither should be padded out to fill a row it does not need. */
.track__roles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.role {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.35rem 1.4rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.role::after {
    content: "";
    position: absolute;
    left: 1.35rem;
    right: 1.35rem;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
.role:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(80, 124, 58, .35);
}
.role:hover::after { transform: scaleX(1); }

.role__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: .9rem;
    border-radius: var(--leaf-flip);
    background: rgba(47, 79, 47, .09);
    color: var(--color-primary);
    font-size: 1.15rem;
    transition: background-color .25s ease, color .25s ease;
}
.role:hover .role__icon {
    background: var(--color-primary);
    color: var(--color-accent);
}
.role h4 {
    margin: 0 0 .75rem;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-primary);
}
.role__points {
    display: grid;
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.role__points li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--color-text);
}
.role__points i {
    flex: none;
    margin-top: .3rem;
    font-size: .85rem;
    color: var(--color-secondary-deep);
}

/* ---- the four requirements, on the dark band ---- */

.vol--dark { overflow: hidden; }
.vol__arcs {
    top: -18%;
    right: -10%;
    width: 46%;
    color: var(--color-accent);
    border-color: rgba(247, 183, 49, .22);
    opacity: .5;
}
.vol__req-wrap { position: relative; z-index: 1; }
.vol__req-head {
    max-width: 62ch;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    text-align: center;
}
.vol__req-head h2 { color: var(--color-white); }
.vol__req-head p {
    margin: 1rem auto 0;
    max-width: 58ch;
    color: rgba(251, 238, 215, .84);
}

.vol__req {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.vreq {
    display: flex;
    flex-direction: column;
    padding: 1.6rem 1.35rem;
    background: rgba(251, 238, 215, .06);
    border: 1px solid var(--color-hairline-light);
    border-radius: var(--leaf);
    transition: background-color .25s ease, border-color .25s ease;
}
.vreq:hover {
    background: rgba(251, 238, 215, .1);
    border-color: rgba(247, 183, 49, .45);
}
.vreq__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 1rem;
    border-radius: var(--leaf-flip);
    background: rgba(247, 183, 49, .18);
    color: var(--color-accent);
    font-size: 1.15rem;
}
.vreq b {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-white);
}
.vreq__text {
    margin-top: .5rem;
    font-size: .9rem;
    line-height: 1.65;
    color: rgba(251, 238, 215, .8);
}

/* ---- how to apply ---- */

/* Four cards over one shared rail. The badge straddles the card's bottom edge
   and drops a tick to the line, so the row reads as one numbered sequence
   rather than four cards that happen to sit together. */
.vol__rail { position: relative; padding-bottom: 4.5rem; }

.vol__steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.vstep {
    position: relative;
    padding: 1.65rem 1.5rem 2.25rem;
    background: var(--color-light);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
    /* No overflow clipping: the badge is meant to straddle the bottom edge,
       and hidden overflow cuts it in half. The watermark is positioned to
       sit inside the card on its own. */
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.vstep:hover {
    transform: translateY(-4px);
    border-color: rgba(80, 124, 58, .45);
    box-shadow: var(--shadow-sm);
}
/* The step you are on when you arrive. */
.vstep--now {
    background: var(--color-white);
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 2px rgba(80, 124, 58, .18);
}

/* A watermark behind the copy — big enough to register, faint enough to stay
   behind the words. */
.vstep__mark {
    position: absolute;
    top: .35rem;
    right: .5rem;
    font-size: 4rem;
    line-height: 1;
    color: rgba(47, 79, 47, .07);
    pointer-events: none;
}
.vstep--now .vstep__mark { color: rgba(80, 124, 58, .2); }

.vstep h3 {
    position: relative;
    margin: 0 0 .5rem;
    padding-right: 2.5rem;
    font-size: 1.0625rem;
    line-height: 1.4;
    color: var(--color-primary);
}
.vstep p {
    position: relative;
    margin: 0;
    font-size: .9rem;
    line-height: 1.65;
    color: var(--color-text);
}

/* The number sits on the card's edge, half in and half out. */
.vstep__num {
    position: absolute;
    right: 1.25rem;
    bottom: -1.4rem;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.vstep--now .vstep__num {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-white);
}
.vstep:hover .vstep__num { border-color: var(--color-secondary); }

/* ---- the rail under them ---- */

.vol__line {
    position: absolute;
    right: 0;
    bottom: 1.15rem;
    left: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    height: 2px;
}
/* The line itself, with a stop at each end so it reads as a run with a
   beginning and an end rather than something cut off by the viewport. */
.vol__line::before {
    content: "";
    position: absolute;
    inset: 0;
    border-top: 2px dashed var(--color-hairline);
}
.vol__line::after {
    content: "";
    position: absolute;
    top: -3px;
    right: 0;
    left: 0;
    height: 8px;
    background:
        radial-gradient(circle at 4px 4px, var(--color-secondary) 3.5px, transparent 4px) left center / 8px 8px no-repeat,
        radial-gradient(circle at 4px 4px, var(--color-secondary) 3.5px, transparent 4px) right center / 8px 8px no-repeat;
}
/* One tick per card, dropping from the badge to the line. */
.vol__tick { position: relative; }
.vol__tick::before {
    content: "";
    position: absolute;
    right: calc(1.25rem + 27px);
    bottom: 0;
    width: 2px;
    height: 26px;
    border-left: 2px dashed var(--color-hairline);
}
.vol__tick::after {
    content: "";
    position: absolute;
    right: calc(1.25rem + 24px);
    bottom: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-secondary);
}

@media (max-width: 991.98px) {
    .vol__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1rem; row-gap: 2.75rem; }
    /* The rail only reads as a run when the cards are on one line. */
    .vol__rail { padding-bottom: 1.25rem; }
    .vol__line { display: none; }
}
@media (max-width: 575.98px) {
    .vol__steps { grid-template-columns: minmax(0, 1fr); }
}
.vol__deadline {
    display: flex;
    align-items: center;
    gap: .9rem;
    max-width: 760px;
    margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
    padding: 1.05rem 1.35rem;
    background: rgba(247, 183, 49, .14);
    border: 1px solid rgba(247, 183, 49, .5);
    border-radius: var(--radius-lg);
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--color-primary-deep);
}
.vol__deadline i { flex: none; font-size: 1.25rem; color: var(--color-secondary-deep); }

/* ---- the application form ---- */

.vol__apply {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, .95fr);
    gap: clamp(1.5rem, 3vw, 2.25rem);
    align-items: start;
}
.vol__form-panel {
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.vol__form-head {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.5rem clamp(1.35rem, 3vw, 2.25rem);
    background: var(--color-primary);
}
.vol__form-head h2 {
    margin: 0;
    font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
    color: var(--color-white);
}
.vol__form-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 54px;
    height: 54px;
    border-radius: var(--leaf-flip);
    background: rgba(247, 183, 49, .2);
    color: var(--color-accent);
    font-size: 1.4rem;
}

.vol__form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: clamp(1.35rem, 3vw, 2.25rem);
}
.vol__form-actions {
    gap: .9rem;
    padding-top: .35rem;
    border-top: 1px solid var(--color-hairline);
}
.vol__form-actions .btn-icm { align-self: flex-start; margin-top: 1.1rem; }
.form-note .req { color: var(--color-error); }

/* The input covers the face, so a dragged file lands on it and the keyboard
   still reaches it. Everything visible below is decoration. */
.filefield { position: relative; }
.filefield__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.filefield__face {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.05rem 1.15rem;
    background: var(--color-light);
    border: 1px dashed rgba(47, 79, 47, .35);
    border-radius: var(--radius-lg);
    transition: background-color .25s ease, border-color .25s ease, box-shadow .2s ease;
}
.filefield__input:hover ~ .filefield__face { border-color: var(--color-secondary); }
.filefield__input:focus-visible ~ .filefield__face {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(80, 124, 58, .16);
}
.filefield__input[aria-invalid="true"] ~ .filefield__face { border-color: var(--color-error); }

.filefield__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: var(--leaf-flip);
    background: rgba(80, 124, 58, .12);
    color: var(--color-secondary-deep);
    font-size: 1.15rem;
}
.filefield__text { display: grid; gap: .15rem; min-width: 0; }
.filefield__text b {
    font-family: var(--font-display);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--color-primary);
}
.filefield__text small { font-size: .78rem; color: var(--color-ink-soft); }
.filefield__btn {
    margin-left: auto;
    flex: none;
    padding: .5rem 1rem;
    border-radius: var(--radius-btn);
    background: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: .8125rem;
    font-weight: 600;
}
.filefield__name {
    margin: .5rem 0 0;
    font-size: .8125rem;
    color: var(--color-ink-soft);
}
/* Set by main.js once a file is picked. */
.filefield__name.is-set {
    color: var(--color-secondary-deep);
    font-weight: 500;
}

/* ---- the aside beside the form ---- */

.vol__aside { display: grid; gap: 1.25rem; }

.vol__note {
    padding: 1.6rem 1.5rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
}
.vol__note h3 {
    margin: 0 0 1rem;
    font-size: 1.125rem;
    color: var(--color-primary);
}
.vol__note .tick-list li { font-size: .9rem; }

.vol__contact {
    position: relative;
    padding: 1.75rem 1.5rem;
    background: var(--color-primary);
    border-radius: var(--leaf);
    overflow: hidden;
    --focus-ring: var(--color-accent);
}
.vol__contact-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    border-radius: var(--leaf-flip);
    background: rgba(247, 183, 49, .2);
    color: var(--color-accent);
    font-size: 1.2rem;
}
.vol__contact h3 { margin: 0 0 .5rem; font-size: 1.125rem; color: var(--color-white); }
.vol__contact p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.65;
    color: rgba(251, 238, 215, .82);
}
.vol__contact-mail {
    display: inline-block;
    margin: .85rem 0 1.1rem;
    padding: .55rem 1rem;
    border-radius: var(--radius-btn);
    background: rgba(251, 238, 215, .1);
    border: 1px solid var(--color-hairline-light);
    color: var(--color-accent);
    font-family: var(--font-display);
    font-size: .9375rem;
    font-weight: 600;
    word-break: break-word;
    transition: background-color .25s ease, color .25s ease;
}
.vol__contact-mail:hover {
    background: var(--color-accent);
    color: var(--color-primary);
}
.vol__contact-close {
    padding-top: 1.1rem;
    border-top: 1px solid var(--color-hairline-light);
}
.vol__contact-close b { display: block; margin-bottom: .35rem; color: var(--color-white); }

/* ---- responsive ---- */

@media (max-width: 1199.98px) {
    .vol__why { grid-template-columns: minmax(0, 1fr); }
    .vol__why-media img { height: clamp(220px, 34vw, 300px); }
    .vol__req { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vol__apply { grid-template-columns: minmax(0, 1fr); }
    /* Two per row, so the connector only ever spans within a row. */
}

@media (max-width: 991.98px) {
    .vol__tabs { grid-template-columns: minmax(0, 1fr); }
    .track__intro { grid-template-columns: minmax(0, 1fr); }
    .track__media img { height: clamp(200px, 42vw, 300px); }
}

@media (max-width: 767.98px) {
    .vol__form { grid-template-columns: minmax(0, 1fr); }
    .vol__form .field--wide { grid-column: auto; }
    .vol__steps { grid-template-columns: minmax(0, 1fr); }
    .vol__deadline { align-items: flex-start; }
    .vol__form-actions .btn-icm { width: 100%; }
}

@media (max-width: 575.98px) {
    .perk { grid-template-columns: auto minmax(0, 1fr); gap: .9rem; }
    .perk__num { grid-column: 2; margin-top: -.25rem; font-size: 1.15rem; }
    .perk__icon { width: 44px; height: 44px; font-size: 1.15rem; }
    .vol__req { grid-template-columns: minmax(0, 1fr); }
    .track__roles { grid-template-columns: minmax(0, 1fr); }
    .filefield__face { flex-wrap: wrap; }
    .filefield__btn { margin-left: 0; }
    .vol__form-head { flex-direction: column; align-items: flex-start; gap: .85rem; }
}

/* -------------------------------------------------------------------------
   25. Contact us page
   -------------------------------------------------------------------------
   The four contact facts are two different kinds of thing, so they get two
   different kinds of object: the channels you act on are white rows you can
   tap, and the office you need to know about is one dark panel. The panel
   carries a live open/closed state, which is the only place on the page that
   spends the gold — everything around it stays quiet.
   ---------------------------------------------------------------------- */

.ctc-head { margin-bottom: clamp(2rem, 4.5vw, 3.25rem); }
/* The measure sits on the heading rather than the block around it, so `ch`
   resolves against Poppins at the heading's own size. The 51-character line
   then holds at two lines all the way down the clamp, and the global
   text-wrap: balance evens them. */
.ctc-head h2 { margin: 1.25rem 0 0; max-width: 32ch; }

.ctc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    gap: clamp(1.25rem, 3vw, 2.25rem);
    align-items: stretch;
}

/* Channels — the two things a visitor can act on right now ---------------- */

.ctc-channels {
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 3vw, 2.25rem);
}

.ctc-channel {
    flex: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1rem, 2.4vw, 1.5rem);
    padding: clamp(1.5rem, 3.2vw, 2.25rem);
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
    color: var(--color-text);
    text-decoration: none;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.ctc-channel:nth-child(2) { border-radius: var(--leaf-flip); }
.ctc-channel:hover,
.ctc-channel:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(80, 124, 58, .4);
    box-shadow: var(--shadow-md);
}

.ctc-channel__icon {
    flex: none;
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: rgba(80, 124, 58, .12);
    color: var(--color-secondary-deep);
    font-size: 1.35rem;
}

.ctc-channel__body { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }

.ctc-channel__label {
    font-family: var(--font-body);
    font-size: var(--step-eyebrow);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
}
.ctc-channel__value {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1.02rem + .6vw, 1.5rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-primary);
    overflow-wrap: anywhere;
}
.ctc-channel__body small {
    font-size: .875rem;
    line-height: 1.55;
    color: var(--color-ink-soft);
}

.ctc-channel__go {
    flex: none;
    color: var(--color-secondary);
    font-size: 1.1rem;
    transition: transform .28s ease;
}
.ctc-channel:hover .ctc-channel__go,
.ctc-channel:focus-visible .ctc-channel__go { transform: translateX(4px); }

/* The desk — address, hours, and whether anyone is at it ------------------ */

.ctc-desk {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .85rem;
    padding: clamp(1.75rem, 3.6vw, 2.75rem);
    background: var(--color-primary);
    border-radius: var(--leaf-flip);
    color: var(--color-background);
    box-shadow: var(--shadow-lg);
}
/* Palm Lawn on Palm Frond is too close to read as a ring, so the focus
   outline inside the panel switches to the accent. */
.ctc-desk :focus-visible { outline-color: var(--color-accent); }

.ctc-desk__tag {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem 1rem;
    border: 1px solid var(--color-hairline-light);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.ctc-desk__tag i { font-size: .8rem; }

.ctc-desk__org {
    margin: .35rem 0 0;
    color: var(--color-white);
    font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem);
}

.ctc-desk__address {
    display: flex;
    gap: .7rem;
    margin: 0;
    max-width: 32ch;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-background);
}
.ctc-desk__address i { margin-top: .28rem; flex: none; color: var(--color-accent); }

.ctc-desk__map {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--color-accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(247, 183, 49, .35);
    padding-bottom: .12rem;
    transition: border-color .25s ease;
}
.ctc-desk__map:hover,
.ctc-desk__map:focus-visible { color: var(--color-accent); border-bottom-color: var(--color-accent); }

.ctc-desk__rule {
    width: 100%;
    margin: .65rem 0 .35rem;
    border: 0;
    border-top: 1px solid var(--color-hairline-light);
    opacity: 1;
}

.ctc-desk__hours { display: flex; flex-direction: column; gap: .5rem; }

.ctc-desk__label {
    font-family: var(--font-body);
    font-size: var(--step-eyebrow);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(251, 238, 215, .72);
}
.ctc-desk__range {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3rem .9rem;
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.ctc-desk__range b {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    color: var(--color-white);
}
.ctc-desk__range span { font-size: 1.0625rem; color: var(--color-background); }

/* The live state. Colour alone never carries it — the words change too. */
.ctc-desk__state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem .9rem;
    margin: .5rem 0 0;
    padding: .7rem 1.1rem;
    width: 100%;
    border-radius: var(--radius-md);
    background: rgba(251, 238, 215, .08);
    border: 1px solid var(--color-hairline-light);
    font-size: .9375rem;
}
.ctc-desk__state b { font-family: var(--font-display); font-weight: 600; }

.ctc-desk__dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(251, 238, 215, .45);
}
.ctc-desk.is-open .ctc-desk__dot { background: var(--color-accent); }
.ctc-desk.is-open .ctc-desk__state b { color: var(--color-accent); }
.ctc-desk.is-closed .ctc-desk__state b { color: rgba(251, 238, 215, .82); }

.ctc-desk__clock {
    margin-left: auto;
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    font-size: .8125rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(251, 238, 215, .68);
}
.ctc-desk__clock time {
    font-family: var(--font-display);
    font-size: .9375rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    color: var(--color-white);
}

/* One slow pulse, only while the desk is actually open. */
@media (prefers-reduced-motion: no-preference) {
    .ctc-desk.is-open .ctc-desk__dot {
        animation: ctcPulse 2.6s ease-in-out infinite;
    }
}
@keyframes ctcPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(247, 183, 49, .5); }
    60%      { box-shadow: 0 0 0 7px rgba(247, 183, 49, 0); }
}

@media (max-width: 991.98px) {
    .ctc-grid { grid-template-columns: minmax(0, 1fr); }
    .ctc-desk { border-radius: var(--leaf); }
}

@media (max-width: 575.98px) {
    .ctc-channel { grid-template-columns: auto minmax(0, 1fr); }
    .ctc-channel__go { display: none; }
    .ctc-desk__clock { margin-left: 0; }
}

/* -------------------------------------------------------------------------
   26. Committee pages
   -------------------------------------------------------------------------
   Content beside a sticky rail. The rail is section navigation rather than
   decoration: three committee pages, with the current one filled in so it
   always says where you are. Ported from the IFERP reference for structure
   only — the palette, the leaf radius and the type are this site's.
   ---------------------------------------------------------------------- */

.cmt__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
}

/* The member list ---------------------------------------------------------- */

.cmt__main {
    padding: clamp(1.75rem, 4vw, 3rem);
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
    box-shadow: var(--shadow-sm);
}

.cmt__title {
    margin: 1.25rem 0 0;
    font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
    color: var(--color-primary);
}

.cmt__lead {
    margin: 1.1rem 0 0;
    max-width: 66ch;
    color: var(--color-text);
}

/* Empty state — says what is missing and what happens next. */
.cmt__pending {
    display: flex;
    gap: 1.15rem;
    align-items: flex-start;
    margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
    padding: 1.5rem;
    background: var(--color-background);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
}
.cmt__pending-icon {
    flex: none;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(80, 124, 58, .14);
    color: var(--color-secondary-deep);
    font-size: 1.2rem;
}
.cmt__pending b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    color: var(--color-primary);
}
.cmt__pending p {
    margin: .25rem 0 0;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--color-ink-soft);
}

/* Members, once there are any to show. */
.cmt__members {
    list-style: none;
    margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}
.cmt-member {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: 1.25rem 1.35rem;
    background: var(--color-background);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-md);
}
.cmt-member b {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    color: var(--color-primary);
}
.cmt-member__role {
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-secondary-deep);
}
.cmt-member__org { font-size: .9375rem; line-height: 1.55; color: var(--color-ink-soft); }

/* Quick links rail --------------------------------------------------------- */

.cmt__rail {
    position: sticky;
    top: 108px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: clamp(1.5rem, 3vw, 2rem);
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf-flip);
    box-shadow: var(--shadow-sm);
}

/* Two-tone rule under the title: a short Palm Frond stub, then the gold.
   The reference draws the same device; these are this site's colours. */
.cmt__rail-title {
    margin: 0;
    padding-bottom: .85rem;
    font-size: 1.3125rem;
    color: var(--color-primary);
    position: relative;
}
.cmt__rail-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 76px;
    height: 3px;
    background: linear-gradient(to right,
                var(--color-primary) 0 26px,
                var(--color-accent) 26px 100%);
}

.cmt__links { display: flex; flex-direction: column; gap: .6rem; }

.cmt__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1.1rem;
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-md);
    background: var(--color-white);
    color: var(--color-primary);
    font-family: var(--font-display);
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.cmt__link i { flex: none; font-size: .95rem; color: var(--color-secondary); transition: transform .25s ease; }

.cmt__link:hover,
.cmt__link:focus-visible {
    transform: translateX(3px);
    background: var(--color-background);
    border-color: rgba(80, 124, 58, .38);
}
.cmt__link:hover i,
.cmt__link:focus-visible i { transform: translateX(3px); }

/* The page you are on. Marked with aria-current in the markup, so the fill
   is reinforcement rather than the only signal. */
.cmt__link.is-here {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-background);
    cursor: default;
}
.cmt__link.is-here i { color: var(--color-accent); }
.cmt__link.is-here:hover,
.cmt__link.is-here:focus-visible {
    transform: none;
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.cmt__link.is-here:hover i,
.cmt__link.is-here:focus-visible i { transform: none; }

.cmt__ask {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--color-hairline);
}
.cmt__ask-label { font-size: .9375rem; color: var(--color-ink-soft); }
.cmt__ask a {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.cmt__ask a:hover,
.cmt__ask a:focus-visible { color: var(--color-secondary-deep); }

@media (max-width: 991.98px) {
    .cmt__grid { grid-template-columns: minmax(0, 1fr); }
    /* Stacked, the rail is just another block — sticking it would pin it over
       the content it is meant to sit beside. */
    .cmt__rail { position: static; border-radius: var(--leaf); }
}

@media (max-width: 575.98px) {
    .cmt__pending { flex-direction: column; gap: .9rem; }
}

/* 26b. Committee application form ----------------------------------------
   Two columns of fields inside the content card, with .field--wide spanning
   both for the answers that need the room. The field, filefield and button
   components are the site's own — only the grid and the radio pair are new. */

.cmt-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem 1.25rem;
    margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

.cmt-form__choice {
    /* A fieldset's first legend is not a flex item — engines render it as the
       fieldset's own legend box — so this one lays out as a block rather than
       inheriting .field's flex column. */
    display: block;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.cmt-form__choice legend {
    width: 100%;
    margin-bottom: .45rem;
    padding: 0;
    font-family: var(--font-body);
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-primary);
}
.cmt-form__choice legend .req { color: var(--color-error); }

.cmt-choices { display: flex; flex-wrap: wrap; gap: .75rem; clear: both; }

.cmt-choice {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .6rem 1.15rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-md);
    font-size: .9375rem;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}
.cmt-choice input { accent-color: var(--color-secondary); margin: 0; }
.cmt-choice:hover { border-color: rgba(80, 124, 58, .4); }
/* :has is the only way to style the label from the input's state without a
   line of script; engines without it simply keep the resting style. */
.cmt-choice:has(input:checked) {
    border-color: var(--color-secondary);
    background: rgba(80, 124, 58, .1);
}
.cmt-choice:has(input:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

.cmt-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: .5rem;
}
.cmt-form__actions .form-note { flex: 1 1 22ch; }

/* 26c. Eligibility page ---------------------------------------------------- */

.cmt__block { margin-top: clamp(2rem, 4vw, 2.75rem); }

.cmt__block-title {
    margin: 0 0 1.25rem;
    padding-bottom: .7rem;
    font-size: clamp(1.2rem, 1.08rem + .5vw, 1.4375rem);
    color: var(--color-primary);
    border-bottom: 1px solid var(--color-hairline);
}

/* Criteria — alternatives, so ticks rather than numbers. */
.cmt__criteria { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .85rem; }
.cmt__criteria li { display: flex; gap: .8rem; align-items: flex-start; }
.cmt__criteria i { flex: none; margin-top: .2rem; color: var(--color-secondary); font-size: 1.05rem; }
.cmt__criteria > li > span { font-size: 1rem; line-height: 1.6; }

/* The experience bar is the part people measure themselves against, so it is
   set apart from the role rather than run on in the same sentence. */
.cmt__bar {
    display: inline-block;
    margin-left: .5rem;
    padding: .12rem .6rem;
    border-radius: 999px;
    background: var(--color-accent);
    color: var(--color-primary);
    font-family: var(--font-display);
    font-size: .75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    vertical-align: .08em;
}

.cmt__note { margin: 1.15rem 0 0; font-size: .9375rem; color: var(--color-ink-soft); }

/* Roles — six areas of work, none of them a step. */
.cmt__roles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.cmt-role {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 1.35rem;
    background: var(--color-background);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
}
.cmt-role i { font-size: 1.35rem; color: var(--color-secondary); }
.cmt-role b { font-family: var(--font-display); font-size: 1rem; color: var(--color-primary); }
.cmt-role span { font-size: .9375rem; line-height: 1.6; color: var(--color-ink-soft); }

/* Closing call to apply. The footer's own CTA is switched off on this page,
   so this is the only one competing for the click. */
.cmt__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    margin-top: clamp(2rem, 4vw, 2.75rem);
    padding: clamp(1.5rem, 3vw, 2.15rem);
    background: var(--color-primary);
    border-radius: var(--leaf);
}
.cmt__cta h3 { margin: 0; color: var(--color-white); font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); }
.cmt__cta p { margin: .45rem 0 0; max-width: 46ch; font-size: .9375rem; line-height: 1.6; color: var(--color-background); }
.cmt__cta :focus-visible { outline-color: var(--color-accent); }

@media (max-width: 767.98px) {
    .cmt-form { grid-template-columns: minmax(0, 1fr); }
    .cmt-form__actions .btn-icm { width: 100%; justify-content: center; }
    .cmt__cta { flex-direction: column; align-items: flex-start; }
    .cmt__cta .btn-icm { width: 100%; justify-content: center; }
}

/* -------------------------------------------------------------------------
   27. History
   -------------------------------------------------------------------------
   Years are the control, editions are the content. Two years hold two
   editions, so a panel stacks cards rather than assuming one. Each card is a
   proceedings cover beside its record — the cover is the one thing every
   edition left behind, so it leads.
   ---------------------------------------------------------------------- */

/* Year pills ------------------------------------------------------------- */

/* The wrapper scrolls, not the page: at 360px six pills are wider than the
   viewport, and a sideways-scrolling body would take the whole layout with
   it. */
.hist__pills-wrap {
    margin: 0 0 clamp(1.5rem, 3vw, 2rem);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: .35rem;
}

.hist__pills {
    display: flex;
    flex-wrap: nowrap;
    gap: .65rem;
    margin: 0;
    padding: 0;
    list-style: none;
    width: max-content;
    min-width: 100%;
}

.hist__pill {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
    padding: .75rem 1.35rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    cursor: pointer;
    white-space: nowrap;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.hist__pill b {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}
.hist__pill small {
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
}

.hist__pill:hover {
    transform: translateY(-2px);
    border-color: rgba(80, 124, 58, .38);
}

/* Selected year. Bootstrap sets .active and aria-selected together, so the
   fill is reinforcement rather than the only signal. */
.hist__pill.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: none;
}
.hist__pill.active b { color: var(--color-accent); }
.hist__pill.active small { color: rgba(251, 238, 215, .78); }

/* Edition card ------------------------------------------------------------ */

.hist__panes { display: block; }
.hist-ed + .hist-ed { margin-top: 1.25rem; }

.hist-ed {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: clamp(1.25rem, 3vw, 2.25rem);
    align-items: start;
    padding: clamp(1.35rem, 3vw, 2rem);
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
}

.hist-ed__cover { margin: 0; }
.hist-ed__cover img {
    display: block;
    width: 100%;
    aspect-ratio: 5 / 7;
    object-fit: cover;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    background: var(--color-background);
}

/* Drawn, not borrowed: an edition with no published cover gets a frame of
   its own rather than another edition's artwork. */
.hist-ed__nocover {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 5 / 7;
    border-radius: var(--radius-md);
    border: 1px dashed rgba(47, 79, 47, .28);
    background:
        repeating-linear-gradient(45deg,
            rgba(47, 79, 47, .05) 0 6px,
            transparent 6px 12px),
        var(--color-background);
    color: rgba(47, 79, 47, .42);
    font-size: 1.9rem;
}

.hist-ed__body { display: flex; flex-direction: column; gap: .7rem; align-items: flex-start; min-width: 0; }

.hist-ed__badge {
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    background: rgba(80, 124, 58, .12);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-secondary-deep);
}
.hist-ed__badge b,
.hist-ed__badge time { font-family: var(--font-display); font-variant-numeric: tabular-nums; }

.hist-ed__name {
    margin: 0;
    font-size: clamp(1.1rem, 1rem + .5vw, 1.3125rem);
    line-height: 1.35;
    color: var(--color-primary);
}

/* The theme is the edition's own words, so it is set as a quotation. */
.hist-ed__theme {
    display: flex;
    gap: .55rem;
    margin: 0;
    padding-left: .9rem;
    border-left: 3px solid var(--color-accent);
    max-width: 62ch;
    font-size: .9375rem;
    line-height: 1.6;
    font-style: italic;
    color: var(--color-text);
}
.hist-ed__theme i { flex: none; color: var(--color-accent); font-style: normal; }

.hist-ed__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.hist-ed__meta li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .9375rem;
    color: var(--color-ink-soft);
}
.hist-ed__meta i { color: var(--color-secondary); }

.hist-ed__links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .25rem; }

.hist-ed__link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1rem;
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-md);
    background: var(--color-background);
    color: var(--color-primary);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .22s ease, border-color .22s ease, transform .22s ease;
}
.hist-ed__link i { color: var(--color-secondary); }
.hist-ed__link:hover,
.hist-ed__link:focus-visible {
    transform: translateY(-2px);
    background: var(--color-white);
    border-color: rgba(80, 124, 58, .42);
}

.hist-ed__none {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .25rem 0 0;
    font-size: .9375rem;
    color: var(--color-ink-soft);
}
.hist-ed__none i { color: var(--color-info-deep); }

@media (max-width: 767.98px) {
    .hist-ed { grid-template-columns: 128px minmax(0, 1fr); gap: 1rem; }
}

@media (max-width: 479.98px) {
    /* Below this the cover and the record are each too narrow side by side,
       so the cover becomes a banner above the text. */
    .hist-ed { grid-template-columns: minmax(0, 1fr); }
    .hist-ed__cover { max-width: 150px; }
    .hist-ed__link { width: 100%; justify-content: center; }
}

/* -------------------------------------------------------------------------
   28. Other services, on its own page
   -------------------------------------------------------------------------
   The card component is the homepage's, unchanged. A dedicated page has no
   surrounding sections competing for the eye, so the same four cards get two
   columns and a narrower measure instead of a four-across strip.

   Scoped to min-width so it never fights the component's own 2-column and
   1-column rules further up, which are written as max-width queries.
   ---------------------------------------------------------------------- */


@media (min-width: 992px) {
    .services--page .services__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 900px;
        margin-inline: auto;
    }
}

/* -------------------------------------------------------------------------
   29. Publication queries dialog
   -------------------------------------------------------------------------
   The dialog itself is the Talk to us component (.talkbox*) reused unchanged.
   What is here is the Register control that opens it, the line naming which
   journal route was clicked, and a tighter field rhythm — this form asks for
   ten things where that one asks for six, so it earns the compaction.
   ---------------------------------------------------------------------- */

/* The Register CTA became a <button> so it can open the dialog. Strip the
   user-agent button styling so it still reads as the link it looks like. */
.jroute__cta--btn {
    padding: .3rem 0 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}

/* Which route the visitor clicked, echoed under the title. */
.pubq__route {
    margin: .45rem 0 0;
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--color-accent);
}
.pubq__route[hidden] { display: none; }

/* Compact rhythm: ten fields in a dialog need tighter rows than six do. */
.pubq .talkbox__grid { gap: .7rem .9rem; }
.pubq .field { gap: .25rem; }
.pubq .field label { font-size: .78rem; }
.pubq .field input,
.pubq .field select { padding: .55rem .7rem; font-size: .875rem; }
.pubq .talkbox__check { padding: .7rem .85rem; font-size: .78rem; }

@media (max-width: 575.98px) {
    .jroute__cta--btn { width: 100%; }
}

/* -------------------------------------------------------------------------
   25. Tentative agenda — the two days as a timeline
   -------------------------------------------------------------------------
   One column per day: a sticky time badge on the left, the session card on
   the right, and a rule running between them. Every class here is prefixed
   agenda__ / agslot / agspk so the page cannot reach anything else.
   ---------------------------------------------------------------------- */

.agenda__head {
    max-width: 62ch;
    margin-inline: auto;
    margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
    text-align: center;
}
.agenda__head p {
    margin: 1rem auto 0;
    max-width: 56ch;
    font-size: .9375rem;
    color: var(--color-ink-soft);
}

/* ---- the day pills ---- */

.agenda__days {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
    padding: 0;
    list-style: none;
    border: 0;
}
.agenda__day {
    display: grid;
    gap: .1rem;
    padding: .7rem 1.6rem;
    text-align: center;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .25s ease, border-color .25s ease,
                transform .25s ease, box-shadow .25s ease;
}
.agenda__day b {
    font-family: var(--font-display);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--color-primary);
    transition: color .25s ease;
}
.agenda__day small {
    font-size: .75rem;
    color: var(--color-ink-soft);
    transition: color .25s ease;
}
.agenda__day:hover {
    border-color: rgba(80, 124, 58, .5);
    transform: translateY(-2px);
}
/* The gradient the site already uses for accent fills — gold into lawn. */
.agenda__day.active {
    background: linear-gradient(100deg, var(--color-accent), var(--color-secondary));
    border-color: transparent;
    box-shadow: var(--shadow-sm);
}
.agenda__day.active b { color: var(--color-primary-deep); }
.agenda__day.active small { color: rgba(35, 59, 35, .8); }

.agenda__count {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin: 0 0 1.75rem;
    font-size: .875rem;
    color: var(--color-ink-soft);
}
.agenda__count i { color: var(--color-secondary-deep); }

/* ---- the line itself ---- */

.agenda__line {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.agslot {
    position: relative;
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}
/* The rule runs down the gutter between badge and card, stopping short of the
   last slot so the timeline reads as ending rather than being cut off. */
.agslot::before {
    content: "";
    position: absolute;
    top: 2.6rem;
    bottom: -1rem;
    left: 170px;
    width: 1px;
    margin-left: .75rem;
    background: var(--color-hairline);
}
.agslot:last-child::before { content: none; }

.agslot__time {
    position: sticky;
    top: calc(var(--top-offset) + 1rem);
    display: flex;
    justify-content: flex-end;
}
.agslot__time span {
    display: inline-block;
    padding: .55rem .9rem;
    background: var(--color-primary);
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-white);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.agslot--open .agslot__time span {
    background: var(--color-white);
    border: 1px dashed rgba(47, 79, 47, .4);
    color: var(--color-ink-soft);
}

/* ---- the card ---- */

.agslot__card {
    position: relative;
    padding: 1.5rem 1.4rem 1.4rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* The accent bar reads as the card's own edge, so it sits flush in the corner
   the leaf radius leaves square. */
.agslot__card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-secondary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}
.agslot__card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(80, 124, 58, .3);
}
.agslot__card:hover::before { transform: scaleX(1); }

/* An unfilled slot is quieter than a confirmed one, so the eye skips it. */
.agslot--open .agslot__card {
    background: var(--color-light);
    border-style: dashed;
}

.agslot__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
}
.agslot__kind {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .26rem .7rem;
    border-radius: 999px;
    background: rgba(80, 124, 58, .12);
    color: var(--color-secondary-deep);
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.agslot__kind i { font-size: .85rem; }
.agslot__status {
    padding: .26rem .7rem;
    border-radius: 999px;
    background: rgba(63, 169, 245, .14);
    color: var(--color-info-deep);
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 600;
}

.agslot__card h3 {
    margin: 0 0 .5rem;
    font-size: var(--step-h3);
    line-height: 1.35;
    color: var(--color-primary);
}
.agslot__lede {
    margin: 0 0 .6rem;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-secondary-deep);
}
.agslot__text {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--color-text);
}

/* ---- the speaker row inside a card ---- */

.agspk {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-hairline);
}
.agspk__photo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-accent);
    background: var(--color-light);
}
.agspk__who { display: grid; gap: .12rem; min-width: 0; }
.agspk__who b {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
}
.agspk__role {
    font-family: var(--font-display);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-secondary-deep);
}
.agspk__org {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8125rem;
    color: var(--color-ink-soft);
}
.agspk__org i { color: var(--color-secondary); }
.agspk__topic {
    margin-top: .2rem;
    font-size: .8125rem;
    line-height: 1.55;
    color: var(--color-text);
}
.agspk__more {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex: none;
    padding: .6rem 1.1rem;
    background: var(--color-primary);
    border: 0;
    border-radius: var(--radius-btn);
    font-family: var(--font-display);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-white);
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, gap .25s ease;
}
.agspk__more i { transition: transform .22s ease; }
.agspk__more:hover {
    background: var(--color-accent);
    color: var(--color-primary-deep);
}
.agspk__more:hover i { transform: translateX(2px); }

/* ---- the speaker panel ---- */

.agspk-panel {
    width: min(430px, 100%);
    background: var(--color-background);
    border-left: 1px solid var(--color-hairline);
}
.agspk-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--color-primary);
    --focus-ring: var(--color-accent);
}
.agspk-panel__close {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    background: rgba(251, 238, 215, .12);
    border: 0;
    border-radius: 50%;
    color: var(--color-white);
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease;
}
.agspk-panel__close:hover {
    background: var(--color-accent);
    color: var(--color-primary-deep);
}

.agspk-panel__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.75rem 1.5rem 2.25rem;
}
.agspk-panel__photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-accent);
    background: var(--color-white);
}
.agspk-panel__body h2 {
    margin: 1rem 0 1.25rem;
    font-size: 1.5rem;
    color: var(--color-primary);
}
.agspk-panel__body h3 {
    margin: 1.5rem 0 .6rem;
    font-size: 1rem;
    color: var(--color-primary);
}
.agspk-panel__body p {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--color-text);
}

.agspk-panel__meta {
    display: grid;
    gap: .9rem;
    margin: 0;
    padding: 1.1rem 1.15rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
}
.agspk-panel__meta dt {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
}
.agspk-panel__meta dt i { color: var(--color-secondary); }
.agspk-panel__meta dd {
    margin: .2rem 0 0;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--color-text);
}

/* ---- responsive ---- */

@media (max-width: 991.98px) {
    .agslot { grid-template-columns: 140px minmax(0, 1fr); gap: 1.15rem; }
    .agslot::before { left: 140px; }
}

@media (max-width: 767.98px) {
    /* The badge moves above the card, so the gutter rule has nothing to run
       down and the sticky offset would only cover the card. */
    .agslot { grid-template-columns: minmax(0, 1fr); gap: .7rem; }
    .agslot::before { content: none; }
    .agslot__time { position: static; justify-content: flex-start; }
    .agenda__line { gap: 1.5rem; }
    .agslot__card { padding: 1.35rem 1.15rem 1.25rem; }

    .agspk {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
        gap: .85rem;
    }
    .agspk__who { justify-items: center; }
    .agspk__org { justify-content: center; }
    .agspk__more { width: 100%; justify-content: center; }
}

@media (max-width: 575.98px) {
    .agenda__days { flex-direction: column; }
    .agenda__day { width: 100%; }
    .agspk-panel { width: 100%; }
}

/* ---- publication and indexing partners (correction item 11) ----
   A dark closing band: the marks read as proof, so they sit on white
   tiles that lift them off the ground rather than floating loose. */

.indexband {
    padding: 3rem 0 3.25rem;
    background: var(--color-primary-deep);
}

.indexband__label {
    margin: 0 0 1.5rem;
    text-align: center;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(251, 238, 215, .72);
}

.indexband__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.indexband__row li {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 7.25rem;
    height: 3.4rem;
    padding: .45rem .7rem;
    background: var(--color-white);
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(19, 31, 19, .22);
}

.indexband__row img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

@media (max-width: 575.98px) {
    .indexband { padding: 2.25rem 0 2.5rem; }
    .indexband__row { gap: .75rem; }
    .indexband__row li { width: 6rem; height: 2.9rem; }
}

/* Hero variant: no ground of its own. It sits on the hero image, so the
   band reads as the last line of the hero rather than a section after it. */
.indexband--hero {
    position: relative;
    z-index: 1;
    padding: 3rem 0 0;
    background: transparent;
}

/* ---- the three facts pinned to the About collage ----
   Bottom-right corner of the photo grid, over the imagery. Static on small
   screens, where an overlay would cover most of a shot. */

.collage-facts {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    margin: 0;
    border-radius: 14px 0 14px 0;
    overflow: hidden;
    background: var(--color-primary-deep);
    box-shadow: 0 14px 30px rgba(19, 31, 19, .32);
}
.collage-facts > div {
    padding: .85rem 1.15rem;
    text-align: center;
}
.collage-facts > div + div { border-left: 1px solid rgba(251, 238, 215, .16); }
.collage-facts dt {
    font-size: 1.0625rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-white);
}
.collage-facts dd {
    margin: .25rem 0 0;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-accent);
}

@media (max-width: 767.98px) {
    .collage-facts {
        position: static;
        margin-top: 1rem;
        border-radius: 14px;
        justify-content: center;
    }
}

/* ---- mega panel: heading, described links, promo (correction 3, 4, 5) ----
   The panel is now a div wrapping a head, the link list and an optional
   promo card, so the two-column rule moves off the panel and onto the list.
   Everything here is scoped to the desktop bar; the mobile drawer keeps the
   plain stacked list it already had. */

.nav-drop__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 1200px) {
    .nav-drop--wide { display: block; min-width: 620px; }
    .nav-drop--wide .nav-drop__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(240px, 1fr));
        gap: .1rem .5rem;
    }

    /* Heading: what this section is, before the list of ways into it. */
    .nav-drop__head {
        display: flex;
        align-items: flex-start;
        gap: .85rem;
        padding: .35rem .5rem 1rem;
        margin-bottom: .6rem;
        border-bottom: 1px solid var(--color-hairline);
    }
    .nav-drop__head-icon {
        display: grid;
        place-items: center;
        flex: none;
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 12px;
        font-size: 1.15rem;
        color: var(--color-secondary-deep);
        background: var(--color-background);
    }
    .nav-drop__head strong {
        display: block;
        font-size: 1.0625rem;
        line-height: 1.2;
        color: var(--color-primary-deep);
    }
    .nav-drop__head p {
        margin: .2rem 0 0;
        font-size: .85rem;
        line-height: 1.45;
        color: var(--color-ink-soft);
    }

    /* Links carry a label and a supporting line, so they need a row layout
       rather than the single-line treatment the plain dropdown used. */
    .nav-drop__list a {
        display: flex;
        align-items: flex-start;
        gap: .7rem;
        padding: .6rem .65rem;
    }
    .nav-drop__icon {
        display: grid;
        place-items: center;
        flex: none;
        width: 2rem;
        height: 2rem;
        margin-top: .1rem;
        border-radius: 9px;
        font-size: .95rem;
        color: var(--color-secondary-deep);
        background: var(--color-background);
        transition: background-color .18s ease, color .18s ease;
    }
    .nav-drop__list a:hover .nav-drop__icon,
    .nav-drop__list a:focus-visible .nav-drop__icon {
        color: var(--color-white);
        background: var(--color-secondary);
    }
    .nav-drop__text { min-width: 0; }
    .nav-drop__text strong {
        display: block;
        font-size: .9rem;
        font-weight: 600;
        line-height: 1.3;
    }
    .nav-drop__text small {
        display: block;
        margin-top: .1rem;
        font-size: .78rem;
        line-height: 1.4;
        color: var(--color-ink-soft);
    }

    /* Promo card closing the panel. */
    .nav-drop__promo {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-top: .75rem;
        padding: .9rem 1rem;
        border-radius: 14px;
        background: var(--color-primary-deep);
    }
    .nav-drop__promo-text strong {
        display: block;
        font-size: .9375rem;
        line-height: 1.25;
        color: var(--color-white);
    }
    .nav-drop__promo-text p {
        margin: .15rem 0 0;
        font-size: .8125rem;
        line-height: 1.4;
        color: rgba(251, 238, 215, .78);
    }
    .nav-drop__promo .btn-icm { flex: none; padding: .55rem 1.1rem; font-size: .8125rem; }
}

/* The same panel parts inside the mobile drawer. Stacked rather than
   two-column, and the head loses its icon tile — at this width the label
   above it is already doing that job. */
@media (max-width: 1199.98px) {
    .nav-drop__head {
        display: flex;
        align-items: flex-start;
        gap: .6rem;
        padding: .5rem .25rem .7rem;
        margin-bottom: .35rem;
        border-bottom: 1px solid var(--color-hairline);
    }
    .nav-drop__head-icon {
        display: grid;
        place-items: center;
        flex: none;
        width: 2rem;
        height: 2rem;
        border-radius: 8px;
        font-size: .95rem;
        color: var(--color-secondary-deep);
        background: var(--color-background);
    }
    .nav-drop__head strong { display: block; font-size: .95rem; color: var(--color-primary-deep); }
    .nav-drop__head p {
        margin: .15rem 0 0;
        font-size: .8rem;
        line-height: 1.4;
        color: var(--color-ink-soft);
    }

    .nav-drop__list a { display: flex; align-items: flex-start; gap: .6rem; }
    .nav-drop__icon { flex: none; margin-top: .1rem; }
    .nav-drop__text { min-width: 0; }
    .nav-drop__text strong { display: block; font-size: .875rem; font-weight: 600; }
    .nav-drop__text small {
        display: block;
        margin-top: .05rem;
        font-size: .75rem;
        line-height: 1.4;
        color: var(--color-ink-soft);
    }

    .nav-drop__promo {
        margin: .6rem .25rem .25rem;
        padding: .8rem .9rem;
        border-radius: 12px;
        background: var(--color-primary-deep);
    }
    .nav-drop__promo-text strong { display: block; font-size: .875rem; color: var(--color-white); }
    .nav-drop__promo-text p {
        margin: .15rem 0 .7rem;
        font-size: .78rem;
        line-height: 1.4;
        color: rgba(251, 238, 215, .78);
    }
    .nav-drop__promo .btn-icm { width: 100%; justify-content: center; font-size: .8125rem; }
}

/* ---- the two calls to action, following you down the page (item 7) ----
   Centred so it reads as a bar rather than another corner widget, and
   raised clear of the WhatsApp/back-to-top pair on the right. */

.floatcta {
    position: fixed;
    left: 50%;
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    z-index: 1015;
    display: flex;
    gap: .6rem;
    padding: .5rem;
    border-radius: 999px;
    background: rgba(19, 31, 19, .92);
    border: 1px solid rgba(251, 238, 215, .16);
    box-shadow: 0 16px 38px rgba(19, 31, 19, .38);
    transform: translateX(-50%) translateY(140%);
    opacity: 0;
    visibility: hidden;
    transition: transform .32s cubic-bezier(.22, 1, .36, 1), opacity .28s ease, visibility .28s;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .floatcta {
        background: rgba(19, 31, 19, .78);
        -webkit-backdrop-filter: blur(14px) saturate(150%);
        backdrop-filter: blur(14px) saturate(150%);
    }
}
.floatcta.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
}

.floatcta .btn-icm {
    padding: .6rem 1.15rem;
    font-size: .875rem;
    white-space: nowrap;
}
.floatcta .btn-ghost {
    color: var(--color-background);
    border-color: rgba(251, 238, 215, .45);
}
.floatcta .btn-ghost:hover,
.floatcta .btn-ghost:focus-visible {
    color: var(--color-primary-deep);
    background: var(--color-background);
    border-color: var(--color-background);
}

/* Phones: full width above the safe area, and the labels lose their icons
   so two buttons still fit on one row. */
@media (max-width: 575.98px) {
    .floatcta {
        left: .75rem;
        right: .75rem;
        bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
        transform: translateY(140%);
        gap: .45rem;
    }
    .floatcta.is-visible { transform: translateY(0); }
    .floatcta .btn-icm { flex: 1; justify-content: center; padding: .6rem .5rem; font-size: .8125rem; }
    .floatcta .btn-icm i { display: none; }
}

/* Someone who has asked for less motion still gets the bar, without the
   slide. */
@media (prefers-reduced-motion: reduce) {
    .floatcta { transition: opacity .2s ease, visibility .2s; transform: translateX(-50%); }
    .floatcta.is-visible { transform: translateX(-50%); }
}

/* Venue banner is a link now; keep the image filling the figure and give
   the whole thing the same lift on hover the other cards use. */
.venue-band__banner a {
    display: block;
    border-radius: inherit;
    overflow: hidden;
}
.venue-band__banner img { transition: transform .5s ease; }
.venue-band__banner a:hover img,
.venue-band__banner a:focus-visible img { transform: scale(1.02); }

.venue-band__actions { margin-top: 1.5rem; justify-content: center; }

/* ---- quick downloads on the page (correction item 12) ----
   The card itself is the drawer's .dl-card; only the grid around it is new,
   sized for a full-width row rather than a narrow panel. */

.quickdl__head { text-align: center; margin-bottom: 1.75rem; }

.quickdl__grid {
    display: grid;
    /* Six items, so the columns are set rather than auto-fitted: auto-fit
       gave five across and left one orphan on a second row. */
    grid-template-columns: minmax(0, 1fr);
    gap: .9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 576px) {
    .quickdl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
    .quickdl__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* On the page the cards sit on cream rather than inside the dark drawer,
   so they need their own ground and edge. */
.quickdl .dl-card {
    height: 100%;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    box-shadow: var(--shadow-sm);
}
.quickdl .dl-card:hover,
.quickdl .dl-card:focus-visible {
    border-color: var(--color-secondary);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

/* -------------------------------------------------------------------------
   30. About IFERP
   -------------------------------------------------------------------------
   Four movements with four shapes, so the page has a rhythm rather than three
   stacked card grids: the thesis beside a photograph, one dark band for the
   reach, a scannable grid for the six things they do, and a mission/vision
   pair set as now and next rather than as twins.
   ---------------------------------------------------------------------- */

/* ---- 01. the thesis ----
   The opening paragraph uses the site's own .lede, so it needs nothing here.
   ---- 02. where they reach ---- */

/* The arcs run past the band's edge by design, so the band clips them. */
.abi-reach { overflow: hidden; }

.abi-reach__arcs {
    right: -8%;
    top: -45%;
    width: min(560px, 60vw);
    color: var(--color-accent);
    border-color: rgba(247, 183, 49, .2);
    opacity: .55;
}

.abi-reach__head {
    position: relative;
    max-width: 62ch;
    margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
}
.abi-reach__head h2 { max-width: 26ch; }
.abi-reach__head p {
    margin: 1.15rem 0 0;
    max-width: 58ch;
    font-size: 16px;
    line-height: 1.75;
    color: rgba(251, 238, 215, .82);
}

.abi-reach__places {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3.5vw, 2.25rem);
}

/* The three regions carry the weight — they are the claim. */
.abi-regions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 2.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.abi-regions li {
    display: flex;
    align-items: center;
    gap: .8rem;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.05rem + 1vw, 1.875rem);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--color-white);
}
/* A struck gold marker rather than a bullet: it reads as a pin on a list of
   places, and it is the one place on this page the accent is spent. */
.abi-regions li::before {
    content: "";
    flex: none;
    width: 26px;
    height: 3px;
    background: var(--color-accent);
}

/* The countries sit a tier down, because the source names them as examples
   inside those regions rather than as peers of them. */
.abi-countries {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem 1rem;
    padding-top: clamp(1.25rem, 3vw, 1.75rem);
    border-top: 1px solid var(--color-hairline-light);
}
.abi-countries__label {
    font-family: var(--font-body);
    font-size: var(--step-eyebrow);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.abi-countries ul {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.abi-countries li {
    padding: .3rem .85rem;
    border: 1px solid var(--color-hairline-light);
    border-radius: 999px;
    font-size: .9375rem;
    color: var(--color-background);
}
.abi-countries__more {
    border-style: dashed;
    color: rgba(251, 238, 215, .68);
}

/* ---- 03. what they do ---- */

.abi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.abi-card {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: clamp(1.4rem, 3vw, 1.85rem);
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
    transition: transform .26s ease, border-color .26s ease, box-shadow .26s ease;
}
/* Alternating the leaf keeps six cards from reading as one printed sheet. */
.abi-card:nth-child(even) { border-radius: var(--leaf-flip); }
.abi-card:hover {
    transform: translateY(-4px);
    border-color: rgba(80, 124, 58, .4);
    box-shadow: var(--shadow-md);
}

.abi-card__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: .35rem;
    border-radius: var(--radius-md);
    background: rgba(80, 124, 58, .12);
    color: var(--color-secondary-deep);
    font-size: 1.3rem;
}
.abi-card h3 {
    margin: 0;
    font-size: 1.0625rem;
    color: var(--color-primary);
}
.abi-card p {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.62;
    color: var(--color-ink-soft);
}

/* ---- 04. mission and vision ---- */

/* Now, then next — with the arrow between them carrying the relation that two
   matching cards side by side would not. */
.abi-aim__pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(1rem, 2.5vw, 1.75rem);
}

.abi-aim__now,
.abi-aim__next {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: clamp(1.6rem, 3.4vw, 2.25rem);
    border-radius: var(--leaf);
}
.abi-aim__now {
    background: var(--color-background);
    border: 1px solid var(--color-hairline);
}
/* The vision is the forward half, so it carries the weight of the dark ground
   the reach band established. */
.abi-aim__next {
    background: var(--color-primary);
    border-radius: var(--leaf-flip);
}
.abi-aim__next :focus-visible { outline-color: var(--color-accent); }

.abi-aim__tag {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-body);
    font-size: var(--step-eyebrow);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-secondary-deep);
}
.abi-aim__tag--light { color: var(--color-accent); }

.abi-aim__now p {
    margin: 0;
    font-size: clamp(1rem, .97rem + .3vw, 1.125rem);
    line-height: 1.6;
    color: var(--color-primary);
}
.abi-aim__next p {
    margin: 0;
    font-size: clamp(1rem, .97rem + .3vw, 1.125rem);
    line-height: 1.6;
    color: var(--color-background);
}

.abi-aim__link {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-primary);
    font-size: 1.05rem;
}

@media (max-width: 991.98px) {
    .abi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Stacked, the arrow points down the page rather than across it. */
    .abi-aim__pair { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .abi-aim__now,
    .abi-aim__next { width: 100%; }
    .abi-aim__link { transform: rotate(90deg); }
}

@media (max-width: 575.98px) {
    .abi-grid { grid-template-columns: minmax(0, 1fr); }
    .abi-regions { gap: .6rem 1.5rem; }
    .abi-reach__arcs { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .abi-card { transition: none; }
    .abi-card:hover { transform: none; }
}

/* -------------------------------------------------------------------------
   26. Conference FAQ — the general questions
   -------------------------------------------------------------------------
   The other three FAQs on this site are accordions, because their answers run
   long. These six are a sentence or two each, so hiding them behind a click
   costs the reader more than it saves: they are cards with every answer open.
   Prefixed cfaq__ throughout, so nothing else on the site is reachable.
   ---------------------------------------------------------------------- */

.cfaq__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cfaq__card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.5rem 1.6rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* The accent edge wipes in from the left, the same gesture the session and
   agenda cards use. */
.cfaq__card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-secondary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}
.cfaq__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(80, 124, 58, .32);
}
.cfaq__card:hover::before { transform: scaleX(1); }

.cfaq__icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin-bottom: 1rem;
    border-radius: var(--leaf-flip);
    background: rgba(80, 124, 58, .12);
    color: var(--color-secondary-deep);
    font-size: 1.2rem;
    transition: background-color .25s ease, color .25s ease, border-radius .3s ease;
}
.cfaq__card:hover .cfaq__icon {
    background: var(--color-primary);
    color: var(--color-accent);
    border-radius: var(--leaf);
}

.cfaq__q {
    margin: 0 0 .6rem;
    /* Sized as a card title, not a section heading — these are h2 so the page
       keeps one heading level per question rather than nesting them under a
       heading that would only exist to hold them. */
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-primary);
    text-wrap: balance;
    /* Clears the ordinal in the corner. */
    padding-right: 2.25rem;
}
.cfaq__a {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--color-text);
}

/* The ordinal sits in the corner so the icon can lead the card. */
.cfaq__num {
    position: absolute;
    top: 1.5rem;
    right: 1.4rem;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(47, 79, 47, .13);
    font-variant-numeric: tabular-nums;
}

/* ---- the one answer that is a list ---- */

.cfaq__points {
    display: grid;
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cfaq__points li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--color-text);
}
.cfaq__points i {
    flex: none;
    margin-top: .28rem;
    font-size: .9rem;
    color: var(--color-secondary-deep);
}

/* ---- anything else ---- */

.cfaq__ask {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem 1.75rem;
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--leaf);
    box-shadow: var(--shadow-sm);
}
.cfaq__ask-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: var(--leaf-flip);
    background: var(--color-primary);
    color: var(--color-accent);
    font-size: 1.35rem;
}
.cfaq__ask-copy { flex: 1 1 16rem; min-width: 0; }
.cfaq__ask-copy h2 {
    margin: 0 0 .2rem;
    font-size: 1.25rem;
    color: var(--color-primary);
}
.cfaq__ask-copy p {
    margin: 0;
    font-size: .9rem;
    color: var(--color-ink-soft);
}
.cfaq__ask-links {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

@media (min-width: 992px) {
    /* Three across, six cards, so the grid closes as 3 + 3 with no hole in
       it. The list answer was given the wide cell at first; five singles plus
       a double is seven column-units against a three-column grid, which left
       a gap on two rows. An even grid beats a wide cell bought with holes —
       the CPD card simply runs taller, and the row stretches to it. */
    .cfaq__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .cfaq__card { padding: 1.5rem 1.25rem 1.4rem; }
    .cfaq__num { font-size: 1.15rem; top: 1.3rem; right: 1.15rem; }
    .cfaq__ask { padding: 1.35rem 1.15rem; }
    .cfaq__ask-links .btn-icm { width: 100%; justify-content: center; }
}