/* ── YCSF 2026 — design tokens & primitives ───────────────────── */

:root {
  /* palette sampled from the artboard */
  /* ── palette ───────────────────────────────────────────────────
     Semantic tokens, so the whole page can be re-skinned by swapping
     this block. The brand colours (red, green, the four-stop ramp) are
     constant across themes; only ground, ink and surfaces move. */
  --bg:            #1b2a21;   /* page ground                        */
  --bg-2:          #16261d;   /* recessed panels                    */
  --ink:           #f3eee2;   /* primary text                       */
  --ink-strong:    #ffffff;   /* headings that need extra weight    */
  --ink-soft:      rgba(243, 238, 226, .78);
  --ink-faint:     rgba(243, 238, 226, .55);
  --surface:       rgba(255, 255, 255, .05);
  --surface-2:     rgba(255, 255, 255, .10);
  --line:          rgba(255, 255, 255, .20);
  --line-soft:     rgba(255, 255, 255, .10);
  --hairline:      var(--ink);
  --shadow:        rgba(0, 0, 0, .38);
  --shadow-strong: rgba(0, 0, 0, .45);
  --glow-strength: 1;         /* ambient radials; dialled down in light */
  --scrim:         27, 42, 33;/* fades to the page ground; flips per theme */
  --scrim-photo:   27, 42, 33;/* laid over photography; never flips        */

  /* brand — identical in both themes */
  --cream:         #f3eee2;
  --white:         #ffffff;
  --red:           #b12a28;
  --red-deep:      #a23029;
  --green:         #1a6b3c;
  --green-mid:     #27653a;
  --green-glow:    #1a6237;
  --muted:         #92aea3;
  /* the numeral ramp needs lifting on the dark ground and the brand values
     on white, where the originals already clear AA comfortably */
  --num-a: #2da15e;
  --num-b: #ff4a47;

  --ramp-1: #28643a;
  --ramp-2: #515334;
  --ramp-3: #79412f;
  --ramp-4: #a23029;

  /* type */
  --f-display: 'Conthrax', 'Arial Narrow', sans-serif;
  --f-body:    'Montserrat', system-ui, sans-serif;
  --f-alt:     'Alexandria', system-ui, sans-serif;
  --f-cairo:   'Cairo', system-ui, sans-serif;

  /* ── layout ───────────────────────────────────────────────────
     The artboard is a 1280 canvas with a 1080 content column. The
     build keeps those proportions but lets the column breathe with
     the viewport instead of parking it in a fixed band:
       gutter  = 100px at 1280, growing to 120px, never under 20px
       column  = whatever is left, capped at 1520 so the measure
                 stays readable on very wide monitors
     Everything else is expressed as a fraction of --col, so the
     whole page scales as one composition. */
  --gutter: clamp(20px, 7.8125vw, 120px);
  --col: min(1520px, calc(100vw - 2 * var(--gutter)));
  --canvas: var(--col);

  /* vertical rhythm — one scale, used by every section */
  --s-section: clamp(56px, 6.4vw, 104px);   /* section padding, top & bottom */
  --s-head:    clamp(34px, 5.9vw, 92px);    /* heading → its content      */
  --s-block:   clamp(32px, 5.4vw, 82px);    /* content → closing rule     */
  --s-tight:   clamp(16px, 1.9vw, 28px);    /* label → thing it labels    */

  /* ── type scale ───────────────────────────────────────────────
     One ramp for the whole page. The 1280 value of each step matches
     the artboard; above that they grow together so the hierarchy
     never flattens out on a wide screen. */
  --t-display: clamp(30px, 3.90vw, 62px);   /* section headings, hero, about  */
  --t-title:   clamp(22px, 2.55vw, 40px);   /* pillar captions                */
  --t-name:    clamp(20px, 1.85vw, 28px);   /* speaker names                  */
  --t-label:   clamp(18px, 1.50vw, 22px);   /* ZONE 01, hero meta             */
  --t-sub:     clamp(17px, 1.35vw, 20px);   /* eyebrows, card + goal titles   */
  --t-lede:    clamp(15px, 1.28vw, 21px);   /* the About paragraph            */
  --t-body:    clamp(14px, 0.95vw, 17px);   /* running copy                   */
  --t-cap:     clamp(14px, 1.05vw, 16px);   /* Conthrax captions              */
  --t-small:   clamp(13px, 0.85vw, 15px);   /* stat captions, zone lists      */
  --t-micro:   clamp(11px, 0.80vw, 13px);   /* credentials, copyright, table  */
  --t-numeral: clamp(30px, 3.00vw, 46px);   /* the big figures                */

  --fs-body: var(--t-body);                 /* kept: older rules reference it */
  --measure: 76ch;
}

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

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;          /* the ambient glows bleed past the canvas */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.35;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

/* ── layout primitives ───────────────────────────────────────── */

/* Both containers now resolve to the same fluid column, so every
   section shares one left edge and one right edge. `.stage` keeps
   its own name because things are positioned against it. */
.stage,
.wrap {
  width: var(--col);
  margin-inline: auto;
  position: relative;
}

/* ── shared type ─────────────────────────────────────────────── */

/* ── typography ───────────────────────────────────────────────
   Conthrax is a wide face; at display sizes it needs a touch of
   negative tracking, and multi-line headings read far better when
   the browser balances the rag rather than filling line 1. */
h1, h2, h3,
.h-section, .hero__title, .about__title, .pillar-cap h3 {
  text-wrap: balance;
  letter-spacing: -.006em;
}
p, li, .aud-cap, .hall__cap, .nums__cap {
  text-wrap: pretty;              /* no orphans on the last line */
}
p { hanging-punctuation: first last; }

/* 50px Conthrax section title, cream, left aligned on the column */
.h-section {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-display);
  line-height: 1.18;
  color: var(--ink);
  margin: 0;
  text-transform: uppercase;
}

/* Conthrax red eyebrow, centred. Sized on its own rather than on --t-sub:
   that token also drives card and goal titles, and only the eyebrows were
   to come up. */
.eyebrow {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(19px, 2.1vw, 32px);
  line-height: 1.25;
  color: var(--red);
  text-align: center;
  margin: 0;
  text-transform: uppercase;
}

/* ── the red → green glowing rule used between sections ──────── */
.rule {
  position: relative;
  height: 2px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, var(--red) 0%, #7c4a30 38%, #4d6136 62%, var(--green) 100%);
}
.rule::after {
  content: '';
  position: absolute;
  inset: -9px 0;
  background: linear-gradient(90deg, rgba(177,42,40,.55) 0%, rgba(124,74,48,.4) 38%, rgba(77,97,54,.4) 62%, rgba(26,107,60,.55) 100%);
  filter: blur(9px);
  pointer-events: none;
}

/* ambient radial glows that sit behind the page content */
.glow {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
}

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


/* ── focus: one visible ring for every control ────────────────
   (the artboard specifies no focus state; this is the minimum a
   keyboard user needs and it never shows for mouse users) */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
  border-radius: 3px;
}
.btn:focus-visible { outline-offset: 4px; }

/* ── forced-colors / Windows High Contrast ────────────────────
   the icons are painted with background + mask, which those modes
   drop entirely; fall back to the system text colour */
@media (forced-colors: active) {
  .i { background: CanvasText; forced-color-adjust: none; }
  .zone__border,
  .aud-ring::before,
  .hall__ring::before,
  .cd__ring::before { background: CanvasText; }
}


/* ══ LIGHT THEME ═══════════════════════════════════════════════
   Same brand, white ground. Only the semantic tokens change; the
   red, the green and the four-stop ramp are untouched so the page
   still reads as YCSF. */
html[data-theme="light"] {
  --bg:            #ffffff;
  --bg-2:          #f7faf8;   /* the pale green-tinted band */
  --ink:           #0c1410;
  --ink-strong:    #0c1410;
  --ink-soft:      rgba(12, 20, 16, .74);
  --ink-faint:     rgba(12, 20, 16, .54);
  --surface:       rgba(31, 77, 58, .04);
  --surface-2:     rgba(31, 77, 58, .08);
  --line:          rgba(31, 77, 58, .18);
  --line-soft:     rgba(31, 77, 58, .10);
  --hairline:      rgba(31, 77, 58, .28);
  --shadow:        rgba(31, 77, 58, .10);
  --shadow-strong: rgba(31, 77, 58, .16);
  --glow-strength: .22;
  --scrim:         255, 255, 255;
  --muted:         #5c7a6c;
  --num-a: #1a6b3c;   /* 5.97:1 on white */
  --num-b: #b12a28;   /* 5.61:1 on white */

  /* one card recipe, used by every panel on a light ground */
  --card-bg:      #ffffff;
  --card-border:  1px solid rgba(31, 77, 58, .12);
  --card-radius:  12px;
  --card-shadow:  0 4px 14px rgba(31, 77, 58, .08);
  --card-shadow-h: 0 10px 28px rgba(31, 77, 58, .14);
}

/* ══ LIGHT THEME — component corrections ═══════════════════════
   Everything above is token-driven, but a handful of pieces were
   drawn for a dark ground and need explicit handling on white. */
html[data-theme="light"] {

  /* the three white sponsor marks swap to purpose-built ink versions —
     a brightness(0) filter turned the Ministry of Energy's soft glow into
     a black smudge */
  & .spons__logo--lit { display: none; }
  & .spons__logo--ink { display: block; }

  /* The hero photograph does not change with the theme, so everything
     sitting ON it keeps its light ink. Only the countdown — which falls
     inside the fade to white — switches to dark. */
  & .hero__lockup,
  & .hero__lockup i,
  & .hero__title,
  & .hero__meta,
  & .hero__meta .meta,
  & .hero__meta .i { color: var(--cream); }

  /* the countdown sits inside the banner, so the plate runs the full hero */
  & .hero__bg { height: 100%; }
  /* the hero text stays cream because the photograph does not change, so the
     text column needs its own scrim — in light mode the plate sits higher and
     the title lands on bright sky (measured backdrop 149, only ~2.5:1) */
  & .hero__bg::after {
    background:
      linear-gradient(180deg,
        rgba(10, 17, 13, 0)   58%,
        rgba(10, 17, 13, .34) 78%,
        rgba(10, 17, 13, .52) 92%),
      linear-gradient(100deg,
        rgba(10, 17, 13, .78)  0%,
        rgba(10, 17, 13, .62) 28%,
        rgba(10, 17, 13, .26) 54%,
        rgba(10, 17, 13, 0)   74%),
      linear-gradient(to bottom,
        rgba(255,255,255,0) 0%, rgba(255,255,255,0) 90%,
        rgba(255,255,255,.55) 96.5%, #ffffff 100%);
  }
  /* the countdown is on the plate again, so it takes the plate's ink */
  & .cd__ring,
  & .cd__label { color: var(--cream); }

  /* the glowing stat numerals were pre-rendered for a dark ground */
  & .nums__glow,
  & .stat-glow { display: none; }

  /* card interiors */
  & .zone { background: var(--bg-2); }
  & .zone__body p {
    color: var(--ink);
    font-weight: 400;
    font-size: clamp(13.5px, .92vw, 15.5px);
    line-height: 1.6;
  }
  & .zone__t { color: var(--ink-strong); }
  & .feat__face--back {
    background:
      radial-gradient(120% 100% at 0% 0%, rgba(26, 107, 60, .10) 0%, rgba(26, 107, 60, 0) 62%),
      radial-gradient(120% 100% at 100% 100%, rgba(177, 42, 40, .09) 0%, rgba(177, 42, 40, 0) 62%),
      var(--bg-2);
  }
  & .feat__face { border-color: var(--line); }
  & .spk__frame { background: linear-gradient(180deg, rgba(22,38,29,0) 0%, rgba(22,38,29,.10) 100%); }
  & .spk__name { color: var(--ink-strong); }

  /* the patronage card is a dark panel in the artboard */
  & .pat-card__glow { opacity: .10; }

  /* the footer table header keeps the brand red, body rows go light */
  & .ftr__map { box-shadow: 0 2px 10px var(--shadow); }

  /* ambient radials are a dark-mode device */
  & .pillars::before,
  & .pillars::after,
  & .spk-band::before,
  & .hall::before { opacity: var(--glow-strength); }
}

/* ── version toggle ────────────────────────────────────────────
   The two builds are numbered: 1 is the dark artboard, 2 is the
   light one. The control shows which you are looking at. */
.theme-toggle {
  position: fixed;
  bottom: clamp(14px, 1.8vw, 26px);
  right: clamp(14px, 1.8vw, 26px);
  z-index: 60;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(243, 238, 226, .34);
  background: rgba(27, 42, 33, .72);
  backdrop-filter: blur(10px);
  color: #f3eee2;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .32);
  transition: background .3s ease, border-color .3s ease,
              transform .3s cubic-bezier(.34, 1.3, .5, 1);
}
.theme-toggle:hover,
.theme-toggle:focus-visible { transform: translateY(-2px); border-color: var(--red); }
.tt-num { display: block; padding-bottom: 1px; }

html[data-theme="light"] .theme-toggle {
  border-color: rgba(22, 38, 29, .22);
  background: rgba(255, 255, 255, .82);
  color: #16261d;
  box-shadow: 0 6px 20px rgba(31, 77, 58, .16);
}

@media (max-width: 599px) {
  .theme-toggle { width: 40px; height: 40px; font-size: 16px; }
}

/* ══ LIGHT THEME — banding ═════════════════════════════════════
   A page that is white end to end loses the artboard's drama. The
   showcase sections keep the dark ground so the page alternates,
   and because the palette is token-driven, re-declaring the tokens
   inside a band flips everything within it automatically.
   In dark mode these classes are inert. */
html[data-theme="light"] .band-dark {
  --bg:            #1b2a21;
  --bg-2:          #16261d;
  --ink:           #f3eee2;
  --ink-strong:    #ffffff;
  --ink-soft:      rgba(243, 238, 226, .78);
  --ink-faint:     rgba(243, 238, 226, .55);
  --surface:       rgba(255, 255, 255, .05);
  --surface-2:     rgba(255, 255, 255, .10);
  --line:          rgba(255, 255, 255, .20);
  --line-soft:     rgba(255, 255, 255, .10);
  --hairline:      var(--ink);
  --shadow:        rgba(0, 0, 0, .38);
  --shadow-strong: rgba(0, 0, 0, .45);
  --scrim:         27, 42, 33;
  --glow-strength: 1;
  --muted:         #92aea3;
  --num-a: #2da15e;
  --num-b: #ff4a47;
  background: var(--bg);
  color: var(--ink);
}
/* soften the seam where a dark band meets white */
html[data-theme="light"] .band-dark { box-shadow: 0 0 0 1px rgba(22, 38, 29, .06); }

/* a light band still needs to sit apart from the pure-white ones */
html[data-theme="light"] .band-tint {
  background: var(--bg-2);
}

/* things the light corrections turned off must come back inside a dark band */
html[data-theme="light"] .band-dark .spk__frame {
  background: linear-gradient(180deg, rgba(0, 92, 79, 0) 0%, rgba(0, 92, 79, 1) 100%);
}
html[data-theme="light"] .band-dark .spk__name { color: var(--ink-strong); }
html[data-theme="light"] .band-dark .ftr__map { box-shadow: none; }
/* the white ring fill is for the white sections only */
html[data-theme="light"] .band-dark .aud-ring,
html[data-theme="light"] .band-dark .hall__ring { background: transparent; }
/* keep each band's ambient glow inside it, or it washes the section below */
html[data-theme="light"] .band-dark { overflow: hidden; }


/* ══ LIGHT THEME — panels ══════════════════════════════════════
   On the dark ground these blocks read by their glow; on a light
   ground they need to become cards. One recipe, applied to every
   panel that sits on white. */
html[data-theme="light"] {
  & .zone,
  & .nums__cell,
  & .aud-item,
  & .goal {
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
  }
  /* the patronage card already has its chamfered frame — it takes the ground
     and the lift, but not a second, differently-shaped edge */
  & .pat-card {
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
  }
  & .nums__cell { padding: 26px 18px; }
  /* the cards were shrink-wrapping to their caption (55–70 % of their track),
     which left 58–128 px holes between them. They now fill the track, and the
     grid is capped so the card size stays constant across widths. */
  & .aud-item   { padding: 30px 18px 26px; }
  & .goal       { padding: 26px 22px 28px; }
  & .zone       { border-radius: var(--card-radius); }

  /* the dividers between the stat columns were a dark-ground device */
  & .nums__grid { grid-template-columns: repeat(5, 1fr); gap: 14px; }
  & .nums__cell::after { display: none; }


  & .feat__face--front,
  & .feat__face--back {
    border-radius: var(--card-radius);
    border: var(--card-border);
    box-shadow: var(--card-shadow);
  }
  & .feat { border-radius: var(--card-radius); }

  & .zone:hover,
  & .feat:hover .feat__face { box-shadow: var(--card-shadow-h); }
  & .nums__cell:hover,
  & .aud-item:hover { box-shadow: var(--card-shadow-h); }

  & .aud-ring,
  & .hall__ring { background: transparent; }

  & .btn--cream {
    border: var(--card-border);
    box-shadow: var(--card-shadow);
  }
}

/* the panels are cards, so the ring fill and the pale band must not
   leak into the sections that stayed dark */
html[data-theme="light"] .band-dark .zone,
html[data-theme="light"] .band-dark .nums__cell,
html[data-theme="light"] .band-dark .aud-item,
html[data-theme="light"] .band-dark .goal,
html[data-theme="light"] .band-dark .pat-card {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* ══ LIGHT THEME — section banding ═════════════════════════════
   Structured the way gssconfex.com/new is: every section is a
   discrete band with its own ground, alternating pale and white
   with the four showcase sections dark, so the page reads as a
   sequence of sections rather than one continuous brochure.
   Uniform padding on every band, as GSS does. */
html[data-theme="light"] {
  & .band-pale  { background: var(--bg-2); }
  & .band-white { background: #ffffff; }

  /* the closing rules were the artboard's separator; the bands do that job now */
  & .rule,
  & .aud-rule,
  & .about__rule { display: none; }

  /* the footer gets the reference's coloured top edge */
  & .ftr { border-top: 3px solid var(--green); }
  & .ftr__rule { display: none; }

}

/* ══ LIGHT THEME — ring colour ═════════════════════════════════
   On the dark ground the rings run the row's green→red ramp. On
   white they read as one family in green, turning red on hover.
   Dark mode keeps the ramp. */
html[data-theme="light"] {
  & .aud-item  .aud-ring,
  & .hall__item .hall__ring { --ring-grad: linear-gradient(90deg, var(--green), var(--green)); }

  & .aud-item:hover  .aud-ring,
  & .aud-item:focus-within  .aud-ring,
  & .hall__item:hover .hall__ring,
  & .hall__item:focus-within .hall__ring { --ring-grad: linear-gradient(90deg, var(--red), var(--red)); }

  /* the glow follows the ring rather than the row position */
  & .aud-item,
  & .hall__item { --glow: var(--green); }
  & .aud-item:hover,
  & .hall__item:hover { --glow: var(--red); }

  /* the ring is a masked pseudo-element, so give it its own transition */
  & .aud-ring::before,
  & .hall__ring::before { transition: background .32s ease; }
}
/* the dark bands inside light mode keep the artboard's ramp */
html[data-theme="light"] .band-dark .aud-item:nth-child(1) .aud-ring { --ring-grad: linear-gradient(90deg, #1a6b3c, #2a643a); }
html[data-theme="light"] .band-dark .hall__item:nth-child(1) .hall__ring { --ring-grad: linear-gradient(90deg, #1a6b3c, #375f38); }
html[data-theme="light"] .band-dark .hall__item:nth-child(2) .hall__ring { --ring-grad: linear-gradient(90deg, #575134, #744430); }
html[data-theme="light"] .band-dark .hall__item:nth-child(3) .hall__ring { --ring-grad: linear-gradient(90deg, #94362c, #b12a28); }

/* ══ SECTION RHYTHM — shared by both themes ════════════════════
   The light build's banding produced a better rhythm than the
   artboard's ad-hoc gaps, so both themes now use it: one padding
   value on every section, centred section headers, and grids that
   fill their tracks.  */
.ftr { margin-top: 0; }

.h-section,
.eyebrow { text-align: center; }
.h-section { margin-bottom: 0; }
.aud .h-section,
.aud--cat .h-section { margin-bottom: var(--s-head); }

.obj__intro,
.hall__intro {
  margin-inline: auto;
  text-align: center;
  max-width: 62ch;
}

/* the audience cards fill their tracks instead of shrink-wrapping, and the
   grid is capped so the card size holds steady on wide screens */
.aud-grid { max-width: 1200px; margin-inline: auto; gap: 16px; }
.aud-item { width: 100%; }
.aud-cap  { max-width: 100%; }
.obj__grid { row-gap: clamp(18px, 2vw, 26px); }

/* the zone divider is cream in the artboard, invisible on a white card */
html[data-theme="light"] .zone__rule { background: var(--line); }

/* The travelling highlight on the objective rules is white — it reads as a
   specular on the dark ground but vanishes on a light one. Light mode gets
   an ink pulse instead, so the line animates the same way in both themes. */
html[data-theme="light"] .goal__rule::after {
  /* the same bright specular dark uses — it lightens the coloured line, and
     the line is what the sweep travels over, not the white ground */
  background: linear-gradient(90deg,
              rgba(255, 255, 255, 0)   0%,
              rgba(255, 255, 255, 1)  42%,
              rgba(255, 255, 255, 1)  58%,
              rgba(255, 255, 255, 0) 100%);
  background-size: 38% 100%;
  background-repeat: no-repeat;
}
html[data-theme="light"] .band-dark .goal__rule::after {
  background: linear-gradient(90deg,
              rgba(255, 255, 255, 0) 0%,
              rgba(255, 255, 255, .95) 50%,
              rgba(255, 255, 255, 0) 100%);
}

/* ══ LIGHT THEME — masthead lockup ═════════════════════════════
   Light mode reads as a website rather than a poster, so the YCSF
   lockup sits top-left at masthead scale, forming a header row
   with the partner marks on the right. Dark keeps the artboard's
   hero-scale lockup. */
/* only where the hero is still the absolutely-composed poster; below 1100 it
   becomes a flow layout that places the lockup itself */
@media (min-width: 1100px) {
  html[data-theme="light"] .hero__lockup {
    top: 4.54%;               /* the partner marks' own top */
    left: 0;
    width: clamp(190px, 20%, 252px);
    /* both heights are fixed, so a px nudge centres the lockup against the
       69.4px partner block at every width */
    margin-top: 16.7px;
  }
}

/* ══ LIGHT THEME — CTA placement ═══════════════════════════════
   In the artboard the two CTAs sit far right, over the brightest,
   busiest part of the plate. Light mode moves them under the date
   row on the left, where the scrim already holds the text — the
   reading order becomes title → date → act. */
@media (min-width: 1100px) {
  html[data-theme="light"] .hero__cta {
    left: 0;
    right: auto;
    top: 72.4%;
    flex-direction: row;
    gap: 14px;
    width: auto;
    min-width: 0;
  }
  html[data-theme="light"] .btn { min-width: 196px; }
}

/* ══ LIGHT THEME — hero composition ════════════════════════════
   The masthead frees the top of the plate, so the headline block
   lifts into it and the banner tightens rather than carrying a
   dead band above the title. */
@media (min-width: 1100px) {
  html[data-theme="light"] .hero      { height: clamp(660px, 60vw, 900px); }
  html[data-theme="light"] .hero__title { top: 26%; }
  html[data-theme="light"] .hero__meta  { top: 43%; }
  html[data-theme="light"] .hero__cta   { top: 50%; }
  /* the countdown closes the block, directly under the two buttons and on
     the same left edge as everything above it */
  html[data-theme="light"] .countdown {
    top: 60%;
    left: 0;
    right: auto;
    justify-content: flex-start;
  }
}

/* The pillars' two ambient radials are 900px tall pseudo-elements that bleed
   past the section, so the dark bands' `overflow: hidden` clipped them away in
   light mode. Painting them as the section's own background keeps the dark
   version's look and cannot bleed. */
html[data-theme="light"] .pillars {
  background:
    radial-gradient(387px 450px at 100% 34%, rgba(26, 107, 60, .88), rgba(26, 107, 60, 0) 100%),
    radial-gradient(387px 450px at 0%   84%, rgba(26, 107, 60, .88), rgba(26, 107, 60, 0) 100%),
    var(--bg);
}
html[data-theme="light"] .pillars::before,
html[data-theme="light"] .pillars::after { display: none; }

/* ══ LIGHT THEME — countdown plate ═════════════════════════════
   The countdown sits over the pipework, where the plate is bright
   and detailed. Each ring gets its own translucent disc so the
   numerals always read against a consistent ground, and the rings
   land as objects rather than outlines. */
@media (min-width: 1100px) {
  html[data-theme="light"] .cd__ring {
    background: rgba(9, 16, 12, .52);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .34),
                inset 0 0 0 1px rgba(243, 238, 226, .10);
  }
  html[data-theme="light"] .cd__label {
    text-shadow: 0 1px 6px rgba(9, 16, 12, .75);
  }
}

/* ══ LIGHT THEME — speakers aurora ═════════════════════════════
   `.band-dark` paints a solid ground, which covered the aurora
   sitting at z-index:-1. In light mode the same three radials are
   painted as the band's own background instead, so they show and
   still drift. */
html[data-theme="light"] .spk-band {
  background-color: var(--bg);
  background-image:
    radial-gradient(38% 58% at 22% 38%, rgba(26, 107, 60, .95) 0%, rgba(26, 107, 60, 0) 68%),
    radial-gradient(34% 52% at 78% 62%, rgba(177, 42, 40, .78) 0%, rgba(177, 42, 40, 0) 68%),
    radial-gradient(28% 44% at 52% 20%, rgba(45, 161, 94, .55) 0%, rgba(45, 161, 94, 0) 70%);
  background-repeat: no-repeat;
  background-size: 160% 160%, 150% 150%, 140% 140%;
  animation: spk-aurora-a 26s ease-in-out infinite alternate,
             spk-aurora-b 34s ease-in-out infinite alternate;
}
html[data-theme="light"] .spk-band:hover { animation-duration: 13s, 17s; }
html[data-theme="light"] .spk-band::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  html[data-theme="light"] .spk-band { animation: none; }
}