/* =====================================================================
   SciTech 2027 - second landing page

   A midnight-and-ember treatment: a photographic hero sunk into deep navy,
   sections alternating between a cool paper ground and white, and one accent
   colour - the conference orange - carrying every call to action.

   Loaded after Bootstrap, so a few Bootstrap defaults are overridden here on
   purpose. Nothing in this file is shared with the first landing page.
   ===================================================================== */

:root {
    /* Ground */
    --night:      #071323;
    --night-2:    #0d2036;
    --night-3:    #16304a;
    --paper:      #f4f6f9;
    --white:      #ffffff;

    /* Ink. The greys lean very slightly blue so they sit with the navy. */
    --ink:        #0b1020;
    --ink-2:      #3d4759;
    --ink-3:      #6b7689;
    --line:       #e3e7ee;

    /* Accent */
    --ember:      #ff5b0a;
    --ember-2:    #d94800;
    --ember-wash: #fff1e8;

    /* Supporting hues, used only to tell one kind of thing from another */
    --teal:       #0d7f84;
    --gold:       #b5790a;
    --indigo:     #2f4b8f;

    --shell:      1240px;
    --radius:     18px;
    --shadow-sm:  0 1px 2px rgba(7, 19, 35, .05), 0 8px 20px -14px rgba(7, 19, 35, .28);
    --shadow-md:  0 2px 6px rgba(7, 19, 35, .06), 0 26px 50px -30px rgba(7, 19, 35, .42);

    --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--white);
    color: var(--ink-2);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--ink);
    letter-spacing: -.022em;
    text-wrap: balance;
    margin: 0;
}

a { color: var(--ember-2); text-decoration: none; }
a:hover { color: var(--ember); }

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

.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: 20px;
}

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */
.btn-ember, .btn-ghost, .btn-glass, .btn-white, .btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 22px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn-lg { padding: 15px 30px; font-size: 16px; }

.btn-ember {
    background: var(--ember);
    color: #fff;
    box-shadow: 0 10px 24px -12px rgba(255, 91, 10, .9);
}
.btn-ember:hover { background: var(--ember-2); color: #fff; transform: translateY(-1px); }

.btn-ghost {
    background: transparent;
    border-color: var(--line);
    color: var(--ink);
}
.btn-ghost:hover { border-color: var(--ember); color: var(--ember-2); background: var(--ember-wash); }

.btn-glass {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .34);
    color: #fff;
    backdrop-filter: blur(8px);
}
.btn-glass:hover { background: rgba(255, 255, 255, .2); color: #fff; }

.btn-white { background: #fff; color: var(--ember-2); }
.btn-white:hover { background: #fff; color: var(--ember); transform: translateY(-1px); }

.btn-outline { background: transparent; border-color: rgba(255, 255, 255, .5); color: #fff; }
.btn-outline:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* ---------------------------------------------------------------
   Utility bar
   --------------------------------------------------------------- */
.ticker {
    background: var(--night);
    color: rgba(255, 255, 255, .8);
    font-size: 13.5px;
}
.ticker-in {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 46px;
    padding-block: 7px;
    flex-wrap: wrap;
}
.ticker p { margin: 0; }

.countdown {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: rgba(255, 255, 255, .62);
    font-variant-numeric: tabular-nums;
}
.countdown i { color: var(--ember); font-size: 14px; }
.countdown [data-unit] { color: #fff; font-weight: 600; font-size: 14px; }
.countdown .sep { color: rgba(255, 255, 255, .3); }

.ticker-flag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 13px;
    border-radius: 999px;
    background: var(--ember);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
}
.ticker-flag.is-closed { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .72); }

.ticker-reach {
    margin-left: auto;
    display: flex;
    gap: 22px;
}
.ticker-reach a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .78);
    font-size: 13.5px;
}
.ticker-reach a:hover { color: #fff; }
.ticker-reach i { color: var(--ember); }

/* ---------------------------------------------------------------
   Header
   --------------------------------------------------------------- */
.masthead {
    position: sticky;
    top: 0;
    z-index: 40;
    background: #fff;
    border-bottom: 1px solid var(--line);
    transition: box-shadow .2s ease;
}
.masthead.is-stuck { box-shadow: 0 8px 28px -22px rgba(7, 19, 35, .7); }

.masthead-in {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 74px;
}
.brand { display: inline-flex; flex: none; }
.brand img { height: 44px; width: auto; display: block; }

.menu {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-inline: auto;
}
.menu a {
    padding: 9px 15px;
    border-radius: 999px;
    color: var(--ink-2);
    font-size: 15px;
    font-weight: 500;
    transition: background-color .16s ease, color .16s ease;
}
.menu a:hover { background: var(--paper); color: var(--ink); }
.menu a.is-here { background: var(--ember-wash); color: var(--ember-2); font-weight: 600; }

.masthead-act { display: flex; align-items: center; gap: 10px; flex: none; }

.menu-toggle {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
}

/* ---------------------------------------------------------------
   Quick Downloads panel - slides down from under the header
   --------------------------------------------------------------- */
.downloads {
    border-bottom: 1px solid var(--line);
    background: #fff;
    box-shadow: 0 24px 40px -30px rgba(7, 19, 35, .6);
}
.downloads > .shell { padding-block: 32px 36px; }

.dl-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}
.dl-head h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; }
.dl-head h2 span { color: var(--ember); }
.dl-head .lede { margin: 8px 0 0; font-size: 15.5px; color: var(--ink-3); }
.dl-head .eyebrow { margin-bottom: 12px; }

.dl-close {
    flex: none;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--ink-3);
    font-size: 16px;
    cursor: pointer;
}
.dl-close:hover { border-color: var(--ember); color: var(--ember-2); }

.dl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.dl-grid a {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    color: var(--ink);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.dl-grid a:hover {
    border-color: var(--ember);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
    color: var(--ink);
}
.dl-ico {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--ember);
    color: #fff;
    font-size: 20px;
}
/* the format sits on a tab under the tile, the way a file icon carries it */
.dl-ico em {
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--night);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: .06em;
}
.dl-ico[data-ext="DOCX"] { background: var(--indigo); }
.dl-ico[data-ext="PPTX"] { background: var(--gold); }

.dl-txt { flex: 1; min-width: 0; }
.dl-txt strong {
    display: block;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
}
.dl-txt span { font-size: 13px; color: var(--ink-3); }

.dl-go {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink-3);
    font-size: 14px;
}
.dl-grid a:hover .dl-go { background: var(--ember-wash); color: var(--ember-2); }

/* ---------------------------------------------------------------
   Hero - two columns: what the conference is, and the join card
   --------------------------------------------------------------- */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--night);
    color: #fff;
    padding-block: 64px 118px;
}
.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    z-index: -2;
}
/* The duotone. Deep navy almost everywhere, with the conference orange rising
   from the lower right so the photograph still reads as a photograph. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(90% 70% at 78% 92%, rgba(255, 91, 10, .42) 0%, rgba(255, 91, 10, 0) 62%),
        radial-gradient(70% 60% at 14% 8%, rgba(22, 48, 74, .7) 0%, rgba(22, 48, 74, 0) 70%),
        linear-gradient(180deg, rgba(7, 19, 35, .92) 0%, rgba(7, 19, 35, .78) 38%, rgba(7, 19, 35, .95) 100%);
}

.hero-split {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 440px;
    gap: 54px;
    align-items: start;
}

/* ---- left column ---- */
.hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}
.hero-chips li {
    padding: 8px 18px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(8px);
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, .94);
}

.hero-eyebrow {
    margin: 0 0 10px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.hero-heading { margin: 0 0 18px; }
.hero-short {
    display: block;
    font-size: clamp(40px, 5.4vw, 72px);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.04em;
    color: #fff;
}
.hero-short span { color: var(--ember); }
.hero-full {
    display: block;
    max-width: 95%;
    margin-top: 14px;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.26;
    color: rgba(255, 255, 255, .95);
}

.hero-desc {
    max-width: 56ch;
    margin: 0 0 30px;
    font-size: 16px;
    color: rgba(255, 255, 255, .76);
}

/* Two claims under the description, as plain pills on the dark ground. */
.hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}
.hero-pills li {
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    backdrop-filter: blur(4px);
}

/* The UN goals the tracks map to. Square tiles, matching the goal artwork in
   the tracks below; --sdg carries each goal's official colour. */
.hero-sdg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 30px;
}
.hero-sdg-label {
    margin-right: 2px;
    color: rgba(255, 255, 255, .72);
    font-size: 13.5px;
    font-weight: 600;
}
.hero-sdg-goal {
    display: grid;
    place-items: center;
    min-width: 27px;
    height: 27px;
    padding: 0 5px;
    border-radius: 5px;
    background: var(--sdg);
    color: #fff;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}

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

/* ---------------------------------------------------------------
   Indexing databases, directly under the figures
   On the page ground rather than the photograph, so the strip is quiet:
   evidence for the claim made above it, not a feature of its own.
   --------------------------------------------------------------- */
.index-strip { padding: 34px 0 10px; background: var(--white, #fff); }
.index-strip-label {
    margin: 0 0 14px;
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .2em;
    text-align: center;
    text-transform: uppercase;
}
.index-strip-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.index-strip-list li {
    display: flex;
    align-items: center;
    width: 128px;
    height: 50px;
    padding: 8px 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
}
/* Every logo is letterboxed into the same box rather than sized by its own
   artwork, so one whose ink runs to the edge of its canvas - SJR - cannot
   render larger than the rest. */
.index-strip-list img {
    display: block;
    width: 100%;
    height: 30px;
    object-fit: contain;
}

@media (max-width: 480px) {
    .index-strip-list li { width: 104px; height: 44px; padding: 7px 14px; }
    .index-strip-list img { height: 26px; }
}

.hero-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 22px;
}

.hero-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, .62);
}
.hero-note .dot {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--ember);
}

/* ---- right column: the join card ---- */
.join {
    position: relative;
    padding: 26px 28px 28px;
    border-radius: 22px;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7);
}

.join-prog {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 9px;
}
.join-prog b {
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ember-2);
}
.join-prog span { font-size: 12.5px; color: var(--ink-3); }

.join-bar {
    height: 3px;
    margin-bottom: 22px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
}
.join-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--ember);
    transition: width .3s ease;
}

.join-back {
    display: inline-block;
    margin-bottom: 10px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink-3);
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
}
.join-back:hover { color: var(--ember-2); }

.join-title {
    margin: 0 0 6px;
    font-size: 23px;
    font-weight: 800;
    line-height: 1.2;
}
.join-sub { margin: 0 0 18px; font-size: 14.5px; color: var(--ink-3); }

.join-opts { display: grid; gap: 10px; }
.join-opt {
    padding: 13px 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.join-opt:hover {
    border-color: var(--ember);
    background: var(--ember-wash);
    transform: translateX(2px);
}

.join-foot { margin: 18px 0 0; text-align: center; }
.join-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink-3);
    font: inherit;
    font-size: 13.5px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.join-link:hover { color: var(--ember-2); }

.join-checks { margin: 0 0 20px; padding: 0; list-style: none; display: grid; gap: 9px; }
.join-checks li {
    display: flex;
    gap: 10px;
    font-size: 14.5px;
    color: var(--ink-2);
}
.join-checks li::before {
    content: "\F26E";                     /* bi-check-lg */
    font-family: "bootstrap-icons";
    flex: none;
    color: var(--ember);
    font-size: 15px;
    line-height: 1.5;
}

.join-field { margin-bottom: 14px; }
.join-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
}
.join-field label span { color: var(--ember); }
.join-field input,
.join-field select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 15px;
}
.join-field input:focus,
.join-field select:focus {
    outline: 0;
    border-color: var(--ember);
    box-shadow: 0 0 0 3px var(--ember-wash);
}

/* ---- the phone field's country picker (assets/vendor/intl-tel-input) ----
   The plugin ships its own look; these rules only make it match the join
   card's other fields - same height, same border, same ember focus ring. */
.join-field .iti { width: 100%; }
.join-field .iti input[type="tel"] {
    width: 100%;
    /* The left padding belongs to the plugin: it measures the country button
       and sets it inline, so the shorthand here would fight that. */
    padding-block: 12px;
    padding-right: 15px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 15px;
}
.join-field .iti input[type="tel"]:focus {
    outline: 0;
    border-color: var(--ember);
    box-shadow: 0 0 0 3px var(--ember-wash);
}
.join-field .iti__country-container { border-radius: 11px 0 0 11px; }
.join-field .iti__selected-country-primary { background: rgba(7, 19, 35, .04); }
.join-field .iti__selected-country-primary:hover,
.join-field .iti__country-container:focus-within .iti__selected-country-primary {
    background: var(--ember-wash);
    border-radius: 11px 0 0 11px;
}

/* The list is rendered on <body> so the card cannot clip it, which also means
   it has to clear the sticky header (100) and the downloads panel (120). */
.iti--container { z-index: 300; }
.iti__dropdown-content {
    z-index: 300;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-md);
    font-family: var(--font-body);
    overflow: hidden;
}
.iti__search-input { padding: 12px 15px; border: 0; font-size: 15px; }
.iti__search-input:focus { outline: 0; }
.iti__country-list {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--ember) var(--ember-wash);
}
/* Measured against the viewport: a fixed height runs off the bottom when the
   card sits low on a short screen. */
.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, so the list must not carry a height
   of its own or it runs past the panel onto the backdrop. */
.iti--fullscreen-popup .iti__country-list { flex: 1 1 auto; min-height: 0; max-height: none; }
.iti--fullscreen-popup .iti__search-input {
    flex: none;
    padding: 15px 18px;
    font-size: 16px;        /* under 16px, iOS zooms the page on focus */
}

.iti__country { padding: 9px 15px; font-size: 14.5px; }
.iti__country.iti__highlight,
.iti__country:hover { background: var(--ember-wash); }
.iti__country[aria-selected="true"] {
    background: rgba(255, 91, 10, .16);
    font-weight: 600;
    color: var(--ink);
}
.iti__dial-code { color: var(--ink-3); }
.iti__country[aria-selected="true"] .iti__dial-code { color: var(--ember-2); }

.join-err {
    margin: 0 0 12px;
    font-size: 13.5px;
    color: #c01b1b;
}

.join-submit {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
    padding-block: 14px;
    font-size: 16px;
}
.join-fine {
    margin: 12px 0 0;
    font-size: 12.5px;
    text-align: center;
    color: var(--ink-3);
}

.join-done { text-align: center; }
.join-tick {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--ember-wash);
    color: var(--ember-2);
    font-size: 24px;
}
.join-done .join-sub { margin-bottom: 20px; }

/* ---------------------------------------------------------------
   Figures - cards that straddle the hero edge
   --------------------------------------------------------------- */
.figures {
    position: relative;
    z-index: 2;
    margin-top: -74px;
    padding-bottom: 10px;
}
.figures ul {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.figures li {
    padding: 24px 18px;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-md);
    text-align: center;
}
.figures strong {
    display: block;
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--ember);
}
.figures span {
    display: block;
    margin-top: 8px;
    font-size: 13.5px;
    color: var(--ink-3);
}

/* ---------------------------------------------------------------
   Section shell
   --------------------------------------------------------------- */
.sec { padding-block: 92px; background: var(--white); }
.sec-paper { background: var(--paper); }

.sec-head { max-width: 760px; margin: 0 auto 54px; text-align: center; }
.sec-head h2 { font-size: clamp(31px, 4.4vw, 38px); font-weight: 800; line-height: 1.08; }
.sec-head h2 span { color: var(--ember); }
.sec-head .lede { margin: 16px auto 0; max-width: 60ch; font-size: 17px; color: var(--ink-3); }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    padding: 7px 16px;
    border-radius: 999px;
    background: var(--ember-wash);
    color: var(--ember-2);
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.sec-act { margin: 46px 0 0; text-align: center; }

/* ---------------------------------------------------------------
   About
   --------------------------------------------------------------- */
.about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}
.about-copy h2 { font-size: clamp(31px, 4vw, 46px); font-weight: 800; line-height: 1.08; }
.about-copy h2 span { color: var(--ember); }
.about-copy p:not(.eyebrow) { margin: 20px 0 0; font-size: 16.5px; }
.about-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* The frame sits top-left inside the box; the plate fills the rest, so a band
   of it shows down the right edge and along the bottom. */
.about-art { position: relative; padding: 0 24px 24px 0; }
.about-plate {
    position: absolute;
    inset: 30px 0 0 30px;
    border-radius: 28px;
    background: linear-gradient(145deg, var(--ember) 0%, #071323 100%);
}
.about-frame {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px;
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--shadow-md);
}
.about-frame .shot { margin: 0; overflow: hidden; border-radius: 14px; }
.about-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot-a { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.shot-b, .shot-c { aspect-ratio: 4 / 3; }
.shot-b img { object-position: center 28%; }

.about-badge {
    position: absolute;
    left: -14px;
    bottom: 10px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    margin: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow-md);
    text-align: center;
}
.about-badge strong {
    display: block;
    font-family: var(--font-display);
    font-size: 27px;
    font-weight: 800;
    line-height: 1;
    color: var(--ember);
}
.about-badge sup { font-size: 13px; }
.about-badge span {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* ---------------------------------------------------------------
   Important dates
   --------------------------------------------------------------- */
.dates-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.date-card {
    position: relative;
    padding: 24px 22px 22px;
    border: 1px solid var(--line);
    border-top: 3px solid var(--ink-3);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.date-card.is-soon { border-top-color: var(--ember); }
.date-card.is-past { border-top-color: var(--line); background: var(--paper); box-shadow: none; }

.date-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.date-flag {
    padding: 4px 12px;
    border-radius: 999px;
    background: #eef1f6;
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.is-soon .date-flag { background: var(--ember); color: #fff; }

.date-ico {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--ember-wash);
    color: var(--ember-2);
    font-size: 17px;
}
.is-past .date-ico { background: #eef1f6; color: var(--ink-3); }

.date-when {
    margin: 20px 0 4px;
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.02em;
}
.date-what { margin: 0; font-size: 14.5px; color: var(--ink-3); }
.date-left {
    margin: 14px 0 0;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
.is-soon .date-left { color: var(--ember-2); font-weight: 600; }
.is-past .date-when, .is-past .date-what { color: var(--ink-3); }

/* ---------------------------------------------------------------
   Panels
   --------------------------------------------------------------- */
.panels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.panel {
    padding: 30px 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.panel-top { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.panel-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--ember);
    color: #fff;
    font-size: 21px;
    box-shadow: 0 10px 22px -12px rgba(255, 91, 10, .95);
}
.panel h3 { font-size: 19.5px; font-weight: 700; }
.panel ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.panel ul li {
    display: flex;
    gap: 11px;
    font-size: 15px;
    color: var(--ink-2);
}
.panel ul li i {
    flex: none;
    margin-top: 3px;
    color: var(--ember);
    font-size: 15px;
}

/* ---------------------------------------------------------------
   Tracks
   --------------------------------------------------------------- */
.tracks-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 56px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.tracks-list > li {
    display: flex;
    gap: 18px;
    padding: 24px 0;
    border-top: 1px solid var(--line);
}
.track-no {
    flex: none;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-3);
    padding-top: 3px;
    font-variant-numeric: tabular-nums;
}
.track-body h3 { font-size: 17.5px; font-weight: 700; line-height: 1.35; }
.track-sdgs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}
.track-sdgs img { width: 46px; height: 46px; border-radius: 7px; display: block; }

/* ---------------------------------------------------------------
   Agenda
   --------------------------------------------------------------- */
.day-switch {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
}
.day-switch button {
    padding: 12px 28px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    text-align: center;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.day-switch strong {
    display: block;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
}
.day-switch span { font-size: 13px; color: var(--ink-3); }
.day-switch [aria-selected="true"] {
    background: var(--ember);
    border-color: var(--ember);
    box-shadow: 0 12px 26px -16px rgba(255, 91, 10, 1);
}
.day-switch [aria-selected="true"] strong,
.day-switch [aria-selected="true"] span { color: #fff; }

.day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px 26px;
    margin-bottom: 30px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}
.day-tag {
    margin: 0 0 2px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ember-2);
}
.day-head h3 { font-size: 21px; font-weight: 700; }
.day-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    color: var(--ink-3);
}
.day-meta i { color: var(--ember); margin-right: 6px; }

.day-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; }

.slots { margin: 0; padding: 0; list-style: none; }
.slot {
    position: relative;
    display: grid;
    grid-template-columns: 78px 46px 1fr;
    align-items: start;
    gap: 0;
    padding-bottom: 18px;
}
/* the connecting line runs behind the nodes, not through the cards */
.slot::before {
    content: "";
    position: absolute;
    left: 100px;
    top: 40px;
    bottom: -4px;
    width: 1px;
    background: var(--line);
}
.slot:last-child::before { display: none; }

.slot-when { padding-top: 10px; text-align: right; padding-right: 14px; }
.slot-when strong {
    display: block;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.slot-when span {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.slot-node {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin: 6px auto 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    font-size: 16px;
    color: var(--ink-3);
}

.slot-card {
    margin-left: 12px;
    padding: 16px 20px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--ink-3);
    border-radius: 14px;
    background: #fff;
}
.slot-card h4 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
}
.slot-kind {
    padding: 3px 10px;
    border-radius: 999px;
    background: #eef1f6;
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.slot-card p { margin: 8px 0 0; font-size: 14.5px; color: var(--ink-3); }
.slot-len {
    margin-top: 10px !important;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--ink-3);
}
.slot.is-tba .slot-card { background: var(--paper); }
.slot.is-tba .slot-card p { font-style: italic; }

/* One colour per kind of thing that happens, so a day can be read at a glance */
.slot.tone-brand .slot-card { border-left-color: var(--ember); }
.slot.tone-brand .slot-node { color: var(--ember); background: var(--ember-wash); border-color: transparent; }
.slot.tone-brand .slot-kind { background: var(--ember-wash); color: var(--ember-2); }

.slot.tone-blue .slot-card { border-left-color: var(--indigo); }
.slot.tone-blue .slot-node { color: var(--indigo); background: #eef2fb; border-color: transparent; }
.slot.tone-blue .slot-kind { background: #eef2fb; color: var(--indigo); }

.slot.tone-amber .slot-card { border-left-color: var(--gold); }
.slot.tone-amber .slot-node { color: var(--gold); background: #fdf5e4; border-color: transparent; }
.slot.tone-amber .slot-kind { background: #fdf5e4; color: var(--gold); }

.slot.tone-slate .slot-card { border-left-color: var(--teal); }
.slot.tone-slate .slot-node { color: var(--teal); background: #e6f4f4; border-color: transparent; }
.slot.tone-slate .slot-kind { background: #e6f4f4; color: var(--teal); }

/* ---------------------------------------------------------------
   Ways to present
   --------------------------------------------------------------- */
.modes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mode {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mode:hover { transform: translateY(-3px); border-color: var(--ember); box-shadow: var(--shadow-md); }

/* The illustration sits at the top with the icon tile overlapping its corner.
   The artwork is already a ring, so it is let through at its own shape rather
   than cropped into another one. */
.mode-shot {
    position: relative;
    padding: 22px 22px 0;
}
/* height:auto matters - without it the height="724" attribute stays in force
   and the box is 230 wide by 724 tall with the artwork floating in the middle */
.mode-shot img {
    display: block;
    width: 74%;
    max-width: 230px;
    height: auto;
    margin-inline: auto;
}
.mode-ico {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: var(--ember);
    color: #fff;
    font-size: 22px;
    box-shadow: 0 12px 26px -14px rgba(255, 91, 10, .95);
}
/* with an illustration the tile overlaps it; without one it just opens the card */
.mode-shot img + .mode-ico { position: absolute; top: 22px; left: 22px; }
.mode.is-plain .mode-shot { padding-bottom: 0; }

.mode-body { padding: 22px 28px 30px; }
.mode h3 { margin: 0 0 10px; font-size: 20px; font-weight: 700; }
.mode p { margin: 0; font-size: 15.5px; }
.mode-meta {
    margin-top: 16px !important;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--ink-3);
}
.mode-meta i { color: var(--ember); margin-right: 6px; }

/* ---------------------------------------------------------------
   Speakers
   --------------------------------------------------------------- */
.people {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.person {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    text-align: center;
}
.person img { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; }
.person h3 { margin: 14px 0 4px; font-size: 17px; font-weight: 700; }
.person p { margin: 0; font-size: 14px; color: var(--ink-3); }
.person-org { color: var(--ember-2) !important; }

.pending {
    max-width: 720px;
    margin: 0 auto;
    padding: 46px 40px;
    border: 1px dashed #cdd5e1;
    border-radius: 22px;
    background: #fff;
    text-align: center;
}
.pending .eyebrow { margin-bottom: 20px; }
.pending p:not(.eyebrow) { margin: 0 auto; max-width: 58ch; font-size: 16.5px; color: var(--ink-3); }
.pending-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }

/* ---------------------------------------------------------------
   Research journey
   --------------------------------------------------------------- */
.journey {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.journey li {
    position: relative;
    overflow: hidden;
    padding: 30px 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}
.journey-no {
    position: absolute;
    top: 14px;
    right: 20px;
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    color: var(--ember);
    opacity: .14;
}
.journey-ico {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--ember-wash);
    color: var(--ember-2);
    font-size: 20px;
}
.journey h3 { margin: 18px 0 9px; font-size: 18.5px; font-weight: 700; }
.journey p { margin: 0; font-size: 15px; color: var(--ink-3); }

/* ---------------------------------------------------------------
   Venue
   --------------------------------------------------------------- */
.venue {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 60px;
    align-items: center;
}
.venue-shot {
    margin: 0;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: var(--shadow-md);
}
.venue-shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

.venue-copy h2 { font-size: clamp(29px, 3.6vw, 42px); font-weight: 800; }
.venue-address { margin: 14px 0 0; font-size: 16px; color: var(--ink-3); }
.venue-points { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.venue-points li {
    display: flex;
    gap: 13px;
    font-size: 15.5px;
}
.venue-points i {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ember-2);
    font-size: 15px;
}
.venue-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* Places to see, under the venue */
.places-head {
    margin: 68px 0 24px;
    font-size: 21px;
    font-weight: 700;
}
.places {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.places li {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}
.places img {
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    display: block;
}
.place-ph {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 11;
    background: var(--ember-wash);
    color: var(--ember-2);
    font-size: 30px;
}
.place-body { padding: 18px 20px 22px; }
.place-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 10px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--ember-wash);
    color: var(--ember-2);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.place-body h4 { margin: 0 0 8px; font-size: 17px; font-weight: 700; line-height: 1.3; }
.place-body p { margin: 0; font-size: 14.5px; color: var(--ink-3); }

/* ---------------------------------------------------------------
   Gallery
   --------------------------------------------------------------- */
/* Eight photos, two even rows of four. */
.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.gallery li {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    aspect-ratio: 4 / 3;
    background: var(--paper);
}
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
/* Taller than the 4:3 tile, with the faces near the top edge: centring the
   crop takes the heads off, so this one is anchored to the top and loses the
   floor instead - which the caption sits over anyway. */
.gallery [data-photo="gall-3"] img { object-position: center top; }
.gallery li:hover img { transform: scale(1.04); }
.gallery span {
    position: absolute;
    inset: auto 0 0 0;
    padding: 28px 16px 14px;
    background: linear-gradient(180deg, rgba(7, 19, 35, 0) 0%, rgba(7, 19, 35, .86) 100%);
    color: #fff;
    font-size: 12.5px;
    line-height: 1.35;
}

/* ---------------------------------------------------------------
   FAQ
   --------------------------------------------------------------- */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq details {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}
.faq details[open] { border-color: var(--ember); }
.faq details[open] summary { background: var(--ember-wash); color: var(--ember-2); }
.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 19px 24px;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 16.5px;
    font-weight: 700;
    color: var(--ink);
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary i {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ember-wash);
    color: var(--ember-2);
    font-size: 13px;
    transition: transform .2s ease;
}
.faq details[open] summary i { background: #fff; transform: rotate(180deg); }
.faq-body { padding: 18px 24px 20px; }
.faq-body p { margin: 0; font-size: 15.5px; color: var(--ink-3); }

/* ---------------------------------------------------------------
   Reserve your slot
   --------------------------------------------------------------- */
.reserve { padding-block: 0 92px; background: var(--white); }
.reserve-band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 28px;
    padding: 74px 40px;
    text-align: center;
    background: var(--night);
}
.reserve-band > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
    z-index: -2;
}
.reserve-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(80% 90% at 80% 100%, rgba(255, 91, 10, .5) 0%, rgba(255, 91, 10, 0) 68%),
        linear-gradient(180deg, rgba(7, 19, 35, .9) 0%, rgba(7, 19, 35, .82) 100%);
}
.reserve-flag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 20px;
    padding: 7px 17px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .1);
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff;
}
.reserve-band h2 {
    margin: 0 0 16px;
    font-size: clamp(32px, 5vw, 54px);
    font-weight: 800;
    color: #fff;
}
.reserve-band h2 span { color: #ffb183; }
.reserve-band > .reserve-in > p:not(.reserve-flag) {
    max-width: 54ch;
    margin: 0 auto;
    font-size: 17px;
    color: rgba(255, 255, 255, .84);
}
.reserve-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 32px; }

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
.foot { background: var(--night); color: rgba(255, 255, 255, .72); padding-block: 64px 30px; }
.foot-in {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: 42px;
}
.foot h3 {
    margin: 0 0 18px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0;
}
.foot-brand img {
    height: 48px;
    width: auto;
    border-radius: 10px;
    background: #fff;
    padding: 6px 10px;
}
.foot-brand p { margin: 18px 0 0; font-size: 14.5px; line-height: 1.6; }
.foot-org { color: rgba(255, 255, 255, .5) !important; font-size: 13.5px !important; }

.foot-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.foot-col a { color: rgba(255, 255, 255, .72); font-size: 14.5px; }
.foot-col a:hover { color: var(--ember); }

.foot-social ul, .foot-social { gap: 20px; }
.foot-social a, .foot-contact li { display: flex; align-items: center; gap: 13px; }
.foot-social i { width: 18px; font-size: 16px; color: rgba(255, 255, 255, .55); }
.foot-social a:hover i { color: var(--ember); }

.foot-contact { gap: 18px !important; }
.foot-contact li { align-items: flex-start; font-size: 14.5px; }
.foot-contact i { flex: none; color: var(--ember); font-size: 15px; padding-top: 3px; }

.foot-base {
    margin-top: 48px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: grid;
    gap: 10px;
    justify-items: center;
    text-align: center;
}
.foot-base p { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .5); }
.foot-base strong { color: rgba(255, 255, 255, .78); font-weight: 600; }

/* ---------------------------------------------------------------
   Floating rail
   --------------------------------------------------------------- */
.rail {
    position: fixed;
    right: 16px;
    bottom: 22px;
    z-index: 50;
    display: grid;
    gap: 10px;
}
.rail a {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #fff;
    font-size: 23px;
    box-shadow: 0 10px 26px -10px rgba(7, 19, 35, .8);
    transition: transform .18s ease;
}
.rail a:hover { transform: translateY(-2px); color: #fff; }
.rail-wa { background: #25d366; }
.rail-mail { background: var(--ember); font-size: 19px; }

/* ===============================================================
   Sections carried over from the ICCCE-2027 landing page layout:
   speakers, the submit band, publication pathway, submissions,
   publication support, reviews, awards and scholarships. Same
   structure as there, drawn in this page's own palette.
   =============================================================== */

/* A band that belongs to the section above it shares its ground and
   drops the top padding, so the two read as one block. */
.sec-flush { padding-top: 0; }

/* A left-set heading, for the one section that leads with its copy. */
.sec-head.is-left { max-width: none; margin-inline: 0; text-align: left; }
.sec-head.is-left .lede { margin-inline: 0; max-width: 72ch; }
.sec-head-act { margin: 26px 0 0; }

/* ---------------------------------------------------------------
   Keynote and session speakers
   --------------------------------------------------------------- */
.spk-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: -24px 0 30px;
    color: var(--ink-3);
    font-size: 15.5px;
}
.spk-status i { color: var(--ember); }

/* Flex rather than grid, so a row of one or two still sits centred. */
.spk-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.spk-card {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 1 calc((100% - 44px) / 3);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.spk-card:not(.is-placeholder):hover { transform: translateY(-4px); border-color: var(--ember); box-shadow: var(--shadow-md); }

/* A near-square portrait cropped to a 4:3 band, biased up to keep the face. */
.spk-media { position: relative; aspect-ratio: 4 / 3; background: var(--paper); border-bottom: 1px solid var(--line); }
.spk-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.spk-flag { position: absolute; right: 0; bottom: 0; width: 40px; height: auto; border-radius: 6px 0 0 0; }

.spk-ph {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, var(--paper), #e8edf4);
}
.spk-ph i {
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: #fff;
    color: var(--ink-3);
    font-size: 44px;
    box-shadow: var(--shadow-sm);
}

/* In-person / virtual tag, flush in the card's bottom-right corner. */
.spk-mode {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 16px 3px 10px;
    border-radius: 10px 0 0 0;
    background: var(--ember);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.spk-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 22px 24px 26px;
    text-align: center;
}
.spk-body h3 { margin: 0 0 6px; font-size: 18.5px; font-weight: 700; }
.spk-role { margin: 0 0 4px; font-size: 14.5px; font-weight: 600; color: var(--ember-2); }
.spk-affil { margin: 0 0 20px; font-size: 14.5px; line-height: 1.6; color: var(--ink-3); }
.spk-body .btn-ember { margin-top: auto; }

.spk-card.is-placeholder { border-style: dashed; border-color: #cdd5e1; box-shadow: none; }
.spk-card.is-placeholder h3 { color: var(--ink-3); }
.spk-card.is-placeholder .spk-affil { margin-bottom: 0; }

.spk-modal .modal-content { border: 0; border-radius: var(--radius); overflow: hidden; }
.spk-modal .modal-header { align-items: flex-start; padding: 24px 26px 6px; border: 0; }
.spk-modal .modal-title { font-size: 22px; font-weight: 800; }
.spk-modal-aff { margin: 4px 0 0; font-size: 14px; color: var(--ink-3); }
.spk-modal .modal-body { padding: 16px 26px 26px; }
.spk-modal .modal-body p { font-size: 15.5px; line-height: 1.75; text-align: justify; }
.spk-modal .modal-body p:last-child { margin-bottom: 0; }
.spk-modal-photo {
    float: left;
    width: 190px;
    max-width: 45%;
    aspect-ratio: 4 / 5;
    margin: 0 22px 14px 0;
    border-radius: 14px;
    object-fit: cover;
    object-position: 50% 18%;
    box-shadow: var(--shadow-sm);
}

/* ---------------------------------------------------------------
   "Your topic not listed?" band under the agenda
   --------------------------------------------------------------- */
.submit-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    padding: 24px clamp(20px, 3vw, 34px);
    border-radius: var(--radius);
    background: var(--night);
    color: #fff;
}
.submit-band-copy strong { display: block; margin-bottom: 4px; font-family: var(--font-display); font-size: 17px; }
.submit-band-copy p { margin: 0; max-width: 60ch; font-size: 15px; color: rgba(255, 255, 255, .66); }

/* ---------------------------------------------------------------
   Publication pathway
   The rule runs behind the numbers, so the row reads as one route.
   --------------------------------------------------------------- */
.pathway {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 26px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pathway::before {
    content: "";
    position: absolute;
    top: 21px;
    left: 10%;
    right: 10%;
    border-top: 2px dashed var(--line);
}
.pathway li { position: relative; text-align: center; }
.pathway-no {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0 auto 16px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: var(--ember);
    color: #fff;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    box-shadow: 0 10px 22px -12px rgba(255, 91, 10, .9);
}
.pathway h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.pathway p { margin: 0; font-size: 14.5px; color: var(--ink-3); }

/* ---------------------------------------------------------------
   Submissions
   --------------------------------------------------------------- */
.subs { display: grid; grid-template-columns: 7fr 5fr; gap: 22px; align-items: stretch; }
.subs-side { display: grid; gap: 18px; align-content: start; }

.sub-card {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
}
/* The illustration shares the card with the rules it illustrates. */
.sub-card.is-split { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1fr); gap: 22px; align-items: center; }
.sub-art img { display: block; width: 100%; height: auto; }
.sub-card h3 { margin: 0 0 14px; font-size: 18px; font-weight: 700; }
.sub-card.is-quiet p { margin: 0; font-size: 15px; color: var(--ink-3); }

/* A tick rather than a bullet: each line is a condition to meet. */
.sub-rules { margin: 0 0 18px; padding: 0; list-style: none; }
.sub-rules li { position: relative; padding: 0 0 10px 28px; font-size: 15px; color: var(--ink-3); }
.sub-rules li::before {
    content: "\f26e";
    position: absolute;
    left: 0;
    top: 1px;
    font-family: "bootstrap-icons";
    color: var(--ember);
}
.sub-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }

.sub-cta { padding: 26px; border-radius: var(--radius); background: var(--night); color: #fff; }
.sub-cta strong { display: block; margin-bottom: 6px; font-family: var(--font-display); font-size: 17px; }
.sub-cta p { margin: 0 0 18px; font-size: 14.5px; color: rgba(255, 255, 255, .66); }
.sub-cta .btn-ember { width: 100%; justify-content: center; }

/* ---------------------------------------------------------------
   Registration and journal publication support
   --------------------------------------------------------------- */
.pkg-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pkg {
    position: relative;
    padding: 26px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pkg:hover { transform: translateY(-3px); border-color: var(--ember); box-shadow: var(--shadow-md); }
.pkg.is-flagged { padding-top: 36px; }
.pkg-badge {
    position: absolute;
    top: -12px;
    left: 22px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    color: #fff;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.pkg-badge.tone-preferred   { background: var(--gold); }
.pkg-badge.tone-recommended { background: var(--teal); }
.pkg h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; }
.pkg-name { margin: 0 0 16px; font-size: 15px; font-weight: 600; color: var(--ink-3); }
.pkg-price { margin: 0 0 16px; }
.pkg-price small { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.pkg-price strong { display: block; margin: 2px 0; font-family: var(--font-display); font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--ember); }
.pkg-price s { font-size: 13px; color: var(--ink-3); }
.pkg-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.pkg-link:hover { color: var(--ember-2); }

.inc-modal .modal-content { border: 0; border-radius: var(--radius); overflow: hidden; }
.inc-modal .modal-header { align-items: flex-start; padding: 26px 26px 18px; border-bottom: 1px solid var(--line); }
.inc-modal .modal-title { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; }
.inc-modal .modal-title span { color: var(--ember); }
.inc-lead { margin: 6px 0 0; font-size: 15px; color: var(--ink-3); }
.inc-modal .modal-body { padding: 22px 26px 26px; background: var(--paper); }
.inc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; }
.inc-card { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.inc-ico {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 12px;
    border-radius: 12px;
    background: var(--ember-wash);
    color: var(--ember-2);
}
.inc-card h3 { margin: 0 0 5px; font-size: 16px; font-weight: 700; color: var(--ember-2); }
.inc-card p { margin: 0; font-size: 14.5px; color: var(--ink-3); }

/* ---------------------------------------------------------------
   Delegate reviews
   A scroll-snapping rail; landing.js adds the arrows, dots and the
   interval on top, and "View more" on any review that is cut off.
   --------------------------------------------------------------- */
.rev-car { position: relative; }
.rev-row {
    display: flex;
    gap: 20px;
    margin: 0 -12px;
    padding: 4px 12px 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.rev-row::-webkit-scrollbar { display: none; }
.rev-card {
    flex: 0 0 clamp(270px, 30vw, 370px);
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    scroll-snap-align: start;
}
.rev-mark { font-size: 26px; line-height: 1; color: var(--ember); opacity: .45; }
/* Every card is the height of a short review; longer ones are cut and faded
   here and opened by the button the script adds. */
.rev-body {
    position: relative;
    flex: 1 1 auto;
    max-height: 11.5em;
    margin: 10px 0 0;
    overflow: hidden;
    transition: max-height .3s ease;
}
.rev-body::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2.4em;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
}
.rev-card.is-expanded .rev-body { max-height: 62em; overflow: visible; }
.rev-card.is-expanded .rev-body::after { display: none; }
.rev-body p { margin: 0 0 10px; font-size: 15px; font-style: italic; line-height: 1.65; color: var(--ink-3); }
.rev-body p:last-child { margin-bottom: 0; }
.rev-more {
    align-self: flex-start;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ember-2);
    font-size: 14px;
    font-weight: 600;
}
.rev-more:hover { text-decoration: underline; }
.rev-card figcaption {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.rev-av {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ember-wash);
    color: var(--ember-2);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
}
.rev-card figcaption strong { font-size: 15px; color: var(--ink); }

.rev-nav {
    position: absolute;
    top: 45%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    color: var(--ink);
    box-shadow: var(--shadow-sm);
    transform: translateY(-50%);
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.rev-nav:hover { background: var(--ember); border-color: var(--ember); color: #fff; }
.rev-nav.is-prev { left: -16px; }
.rev-nav.is-next { right: -16px; }

.rev-dots { display: flex; justify-content: center; gap: 7px; margin-top: 8px; }
.rev-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--line);
    transition: width .25s ease, background-color .25s ease;
}
.rev-dots button.is-active { width: 24px; background: var(--ember); }

/* ---------------------------------------------------------------
   Awards and scholarships
   --------------------------------------------------------------- */
.schol-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}
.schol-head h3 { font-size: 22px; font-weight: 800; }
.schol-head p { margin: 0; font-size: 14.5px; color: var(--ink-3); }

.schol-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.schol-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
}
/* The hardest to win is dark, so it reads as another class of thing
   rather than as the one the page is pushing. */
.schol-card.is-top { background: var(--night); border-color: var(--night); color: #fff; }
.schol-flag {
    position: absolute;
    top: -12px;
    left: 24px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--ember);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.schol-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.schol-ico {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--ember-wash);
    color: var(--ember-2);
    font-size: 18px;
}
.schol-card.is-top .schol-ico { background: rgba(255, 91, 10, .16); color: #ffb183; }
.schol-places {
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink-3);
    font-size: 12.5px;
    font-weight: 600;
}
.schol-card h4 { margin: 0 0 10px; font-size: 18px; font-weight: 700; }
.schol-card.is-top h4 { color: #fff; }
.schol-pct { display: flex; align-items: baseline; gap: 7px; margin: 0 0 14px; }
.schol-pct strong { font-family: var(--font-display); font-size: 34px; font-weight: 800; line-height: 1; color: var(--ember); }
.schol-pct span { font-size: 14px; color: var(--ink-3); }
.schol-money { margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; background: var(--paper); }
.schol-money strong { display: block; font-size: 15px; color: var(--ink); }
.schol-money span { font-size: 13.5px; color: var(--ink-3); }
.schol-text { flex: 1 1 auto; margin: 0 0 20px; font-size: 15px; color: var(--ink-3); }
.schol-card.is-top .schol-text { color: rgba(255, 255, 255, .7); }
.schol-btn {
    display: block;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--ember-wash);
    color: var(--ember-2);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.schol-btn:hover { background: var(--ember); border-color: var(--ember); color: #fff; }

/* The dark card: every light-ground piece redrawn for the night ground. */
.schol-card.is-top .schol-places { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .72); }
.schol-card.is-top .schol-pct strong { color: #ffb183; }
.schol-card.is-top .schol-pct span { color: rgba(255, 255, 255, .64); }
.schol-card.is-top .schol-money { background: rgba(255, 255, 255, .07); }
.schol-card.is-top .schol-money strong { color: #fff; }
.schol-card.is-top .schol-money span { color: rgba(255, 255, 255, .6); }
.schol-card.is-top .schol-btn { background: var(--ember-2); border-color: #fff; color: #fff; }
.schol-card.is-top .schol-btn:hover { background: var(--ember); border-color: #fff; color: #fff; }

@media (max-width: 1100px) {
    .pkg-grid { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
}

@media (max-width: 992px) {
    .spk-card { flex-basis: calc((100% - 22px) / 2); }
    .pathway { grid-template-columns: repeat(2, 1fr); }
    .pathway::before { display: none; }
    .subs { grid-template-columns: 1fr; }
    .schol-grid { grid-template-columns: 1fr 1fr; row-gap: 30px; }
    .rev-nav.is-prev { left: 2px; }
    .rev-nav.is-next { right: 2px; }
}

@media (max-width: 760px) {
    .spk-card { flex-basis: 100%; max-width: 400px; }
    .spk-card.is-placeholder .spk-media { aspect-ratio: 16 / 7; }
    .spk-card.is-placeholder .spk-ph i { width: 72px; height: 72px; font-size: 34px; }
    .pathway, .pkg-grid, .schol-grid, .inc-grid { grid-template-columns: 1fr; }
    .sub-card.is-split { grid-template-columns: 1fr; }
    .sub-art { max-width: 220px; margin-inline: auto; }
    .spk-modal-photo { float: none; display: block; width: 170px; max-width: 100%; margin: 0 auto 18px; }
    .spk-modal .modal-body p { text-align: left; }
}

/* ---------------------------------------------------------------
   Scroll reveal
   --------------------------------------------------------------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s ease, transform .6s ease;
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------
   Narrower screens
   --------------------------------------------------------------- */
@media (max-width: 1100px) {
    .figures ul { grid-template-columns: repeat(3, 1fr); }
    .dates-grid { grid-template-columns: repeat(2, 1fr); }
    .day-cols { grid-template-columns: 1fr; gap: 0; }
    .people { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 992px) {
    .menu {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        margin: 0;
        padding: 12px 20px 18px;
        background: #fff;
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-md);
    }
    .menu.is-open { display: flex; }
    .menu-toggle { display: grid; place-items: center; }
    .ticker-reach { display: none; }

    .hero-split { grid-template-columns: 1fr; gap: 40px; }
    .join { max-width: 520px; width: 100%; }
    .hero-full { max-width: none; }

    .about, .venue { grid-template-columns: 1fr; gap: 44px; }
    .about-art { order: -1; }
    .panels, .modes, .journey { grid-template-columns: 1fr 1fr; }
    .dl-grid, .places { grid-template-columns: 1fr 1fr; }
    .tracks-list { grid-template-columns: 1fr; gap: 0; }
    .gallery { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
    .sec { padding-block: 64px; }
    .reserve { padding-bottom: 64px; }
    .hero { padding-block: 44px 96px; }
    .join { padding: 22px 20px 24px; }

    .figures ul { grid-template-columns: repeat(2, 1fr); }
    .panels, .modes, .journey, .people { grid-template-columns: 1fr; }
    .dates-grid { grid-template-columns: 1fr; }
    .gallery { grid-template-columns: repeat(2, 1fr); }
    .dl-grid, .places { grid-template-columns: 1fr; }
    .dl-head { flex-direction: column; }
    .places-head { margin-top: 48px; }

    .foot-in { grid-template-columns: 1fr 1fr; gap: 34px; }
    .foot-brand { grid-column: 1 / -1; }

    .day-switch { flex-direction: column; }
    .reserve-band { padding: 52px 24px; border-radius: 22px; }
}

@media (max-width: 480px) {
    .figures { margin-top: -54px; }
    .figures ul { grid-template-columns: 1fr; }
    .foot-in { grid-template-columns: 1fr; }
    .gallery { grid-template-columns: 1fr; }
    .slot { grid-template-columns: 64px 40px 1fr; }
    .slot::before { left: 84px; }
}

/* ---------------------------------------------------------------
   Sticky join bar
   Slides up once the banner has scrolled out of view (landing script).
   --------------------------------------------------------------- */
.jbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;                        /* under the floating rail (50) */
    display: flex;
    justify-content: center;
    padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
    pointer-events: none;               /* only the pill itself is clickable */
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.jbar.is-visible { opacity: 1; visibility: visible; transform: none; }
.jbar-in {
    display: flex;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--shadow-md);
    pointer-events: auto;
}
.jbar-btn { padding: 12px 26px; font-size: 15px; }
.jbar-btn i { font-size: 16px; }
.jbar-alt {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--ember-2);
    border-radius: 999px;
    background: #fff;
    color: var(--ember-2);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color .18s ease, color .18s ease;
}
.jbar-alt:hover { background: var(--ember-wash); color: var(--ember); }
.rail { transition: bottom .3s ease; }

@media (max-width: 576px) {
    .jbar { padding-inline: 10px; }
    .jbar-in { width: 100%; gap: 8px; padding: 8px; }
    .jbar-btn { flex: 1 1 0; justify-content: center; gap: 7px; padding: 12px 10px; font-size: 13.5px; }
    /* the rail sits bottom-right and would land on the bar, so it is lifted
       clear while the bar shows - .rail follows .jbar in the page */
    .jbar.is-visible ~ .rail { bottom: 96px; }
}
@media (prefers-reduced-motion: reduce) { .jbar, .rail { transition: none; } }
@media print { .jbar { display: none; } }

/* ---------------------------------------------------------------
   Important dates: the conference card after the four deadlines
   --------------------------------------------------------------- */
.date-card.is-conf { border-top-color: var(--ember); }
.is-conf .date-flag { background: var(--ink); color: #fff; }

/* Two across on a tablet would leave the fifth card on its own, so it
   takes the whole row there instead. */
@media (min-width: 761px) and (max-width: 1100px) {
    .date-card.is-conf { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------
   Join card, step 4: when to call (sent to Zoho with the details)
   --------------------------------------------------------------- */
.join-received {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--ember-wash);
    color: var(--ember-2);
    font-size: 13px;
    font-weight: 600;
}
.join-check {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 2px 0 18px;
    color: var(--ink-2);
    font-size: 14px;
    cursor: pointer;
}
.join-check input { width: 17px; height: 17px; flex: none; accent-color: var(--ember); }