/* ══════════════════════════════════════════════════════════════
   YCSF 2026 — section styles.
   Every number is measured from the artboard (1 pt = 1 CSS px).
   Sections appear here in page order.
   ══════════════════════════════════════════════════════════════ */

/* ── reveal-on-scroll (subtle; off with ?flat) ────────────────
   Scoped to .js so the page is fully readable without JavaScript. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
}
[data-reveal].is-in,
.is-flat [data-reveal] { opacity: 1; transform: none; }


/* ══ PATRONAGE (artboard 850 → 1345) ═══════════════════════════ */

.pat { padding-top: var(--s-section); }
.pat__stage { margin-top: var(--s-head); }

.pat-card {
  position: relative;
  /* the artboard insets the card to 82.5 % of the column (891.5 of 1080);
     holding that proportion keeps it in the page's grid at every width —
     a fixed px cap left it stranded mid-column on wide screens */
  width: 82.5%;
  aspect-ratio: 891.5 / 255;
  min-height: 255px;
  margin-inline: auto;
  --chamfer: polygon(0 0, calc(100% - 20.4px) 0, 100% 20.4px, 100% 100%, 20.4px 100%, 0 calc(100% - 20.45px));
}
.pat-card__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 2;
}
.pat-card__glow {
  position: absolute;
  inset: 0;
  clip-path: var(--chamfer);
  background: radial-gradient(ellipse 337.09px 266.24px at 576.59px 282.11px,
              rgba(26, 107, 60, 1) 0%, rgba(26, 107, 60, 0) 100%);
  z-index: 1;
}
.pat-card__portrait {
  position: absolute;
  left: -7.15%;
  bottom: -11.52%;              /* 29.4 / 255.2 — the artboard's overhang split,
                                   so the headdress clears the heading above */
  width: 45.72%;
  height: auto;
  aspect-ratio: 407.62 / 362.08;
}

/* The artboard cuts the portrait at the card's own left border and bottom
   chamfer while letting the headdress cross the top edge. Clipping the
   wrapper — which is the card's shape, opened upwards — keeps that true at
   any card size; the old fixed-px polygon only worked at 407×362. */
.pat-card__pcrop {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: -60%;
  z-index: 3;
  pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 20.4px 100%, 0 calc(100% - 20.45px));
}
.pat-card__copy {
  position: absolute;
  left: 35.6%;                              /* clears the portrait */
  top: 8.2%;
  width: 58.6%;
  max-width: 640px;
  text-align: center;
  z-index: 4;
  color: var(--ink);
}
.pat-lead {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.4;
}
.pat-name {
  margin: 19.9px 0 0;
  font-weight: 700;
  font-size: var(--t-sub);
  line-height: 1.3;
}
.pat-role {
  margin: 0;
  font-size: var(--t-micro);
  line-height: 1.35;
}
.pat-body {
  margin: 17.5px 0 0;
  font-size: var(--fs-body);
  line-height: 1.45;
}


/* ══ THE FORUM IN NUMBERS (artboard 1345 → 1600) ═══════════════ */

.nums { padding-top: var(--s-section); padding-bottom: 11.05px; }
.nums__eyebrow { margin-bottom: var(--s-tight); }

.nums__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: var(--col);
  margin-inline: auto;
}
.nums__cell {
  position: relative;
  text-align: center;
  padding-top: 29.7px;                      /* halo/divider sit above the numeral */
}
.nums__cell + .nums__cell::before {         /* 1px white divider on the interior boundaries */
  content: '';
  position: absolute;
  left: -0.5px;
  top: 25.7px;
  width: 1px;
  height: 115.8px;
  background: var(--white);
}
.nums__fig {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-numeral);
  line-height: 1.1;
}
.nums__val {
  position: relative;
  z-index: 1;                 /* above its halo */
  display: inline-block;
  /* the artboard's #1a6b3c → #b12a28 measured 2.29:1 and 2.31:1 on this
     ground — the least readable text on the page. Same hues, lifted to AA. */
  background: linear-gradient(90deg, var(--num-a) 0%, var(--num-b) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nums__glow {                 /* atmospheric halo, behind the sharp numeral */
  position: absolute;
  left: 50%;
  top: -29.7px;
  transform: translateX(-50%);
  height: 110.16px;
  width: auto;
  max-width: none;
  opacity: .42;
  z-index: 0;
  pointer-events: none;
}
.nums__cell:first-child .nums__glow { height: 103.44px; }
.nums__cap {
  margin: 20.75px 0 0;
  font-weight: 600;
  font-size: var(--t-small);
  line-height: 1.25;
  color: var(--ink);
}


/* ══ ABOUT THE FORUM (artboard 1600 → 2040) ════════════════════ */

.about { padding-top: var(--s-section); text-align: center; }
.about__title {
  margin: 21.85px 0 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-display);
  line-height: 1.18;
  color: var(--ink);
}
.about__body {
  max-width: min(920px, 70ch);
  margin: var(--s-tight) auto 0;
  font-size: var(--t-lede);
  line-height: 1.6;
  color: var(--ink);
}
.about__rule {
  width: 56%;
  max-width: 900px;
  height: 1px;
  border: 0;
  margin: var(--s-section) auto 0;   /* balanced: same space above as below */
  background: linear-gradient(90deg, #b12a28 0%, #f3eee2 81.5%, #f3eee2 100%);
}


/* ══ MAIN PILLARS ══════════════════════════════════════════════
   The artboard stacks four copies of one coverflow widget to show
   the four slides; this is the single widget.
   Active card 505 × 302.65, peeks = scale(.693) ± 338.25px.
   ────────────────────────────────────────────────────────────── */

.pillars {
  position: relative;
  padding-top: var(--s-section);
  /* the coverflow is driven off the column so it grows with the page */
  --pcard: calc(var(--col) * .4676);        /* 505 / 1080  */
  --ppeek: calc(var(--col) * .3132);        /* 338.25/1080 */
}

.pillars__stage {
  position: relative;
  height: calc(var(--pcard) * .5993);       /* 302.65 / 505 */
  margin-top: var(--s-head);
  touch-action: pan-y;
}

.pillar {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--pcard);
  height: 100%;
  margin-left: calc(var(--pcard) / -2);
  border-radius: calc(var(--pcard) * .0396);
  cursor: pointer;
  transition: transform .55s cubic-bezier(.4, .01, .2, 1),
              opacity .55s cubic-bezier(.4, .01, .2, 1),
              box-shadow .55s ease;
}
.pillar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  border-radius: inherit;
}
.pillar__tab {
  position: absolute;
  left: 50%;
  top: -12.85px;
  width: 88.2px;
  height: 25.7px;
  margin-left: -44.1px;
  border-radius: 12.85px;
  background: var(--red);
  z-index: 2;
  transition: background .45s ease, box-shadow .45s ease;
}

.pillar.is-centre {
  transform: none;
  opacity: 1;
  z-index: 3;
  box-shadow: 0 22px 55px var(--shadow-strong);
  cursor: default;
}
.pillar.is-centre .pillar__tab {
  background: var(--cream);
  box-shadow: 0 0 12px 2px rgba(243, 238, 226, .28);
}
.pillar.is-prev   { transform: translate(calc(var(--ppeek) * -1), -5.3px) scale(.693); opacity: .59; z-index: 1; }
.pillar.is-next   { transform: translate(var(--ppeek), -5.3px) scale(.693);  opacity: .59; z-index: 1; }
.pillar.is-hidden { transform: scale(.693); opacity: 0; z-index: 0; pointer-events: none; }

.pillars__arrow {
  position: absolute;
  top: calc(50% - 18.9px);
  width: 37.7px;
  height: 37.8px;
  color: var(--red);
  z-index: 4;
  transition: transform .25s ease, filter .25s ease;
}
.pillars__arrow--prev { left: -29.7px; }
.pillars__arrow--next { right: -29.7px; }
.pillars__arrow:hover { filter: brightness(1.25); transform: scale(1.08); }
.pillars__arrow .i { display: block; }

/* captions cross-fade with the slide */
.pillars__caps {
  position: relative;
  min-height: 137.53px;                      /* reserve the 2-line-title case */
  margin-top: var(--s-head);
  text-align: center;
}
.pillar-cap {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.pillar-cap.is-on { opacity: 1; pointer-events: auto; }
.pillar-cap h3 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-title);
  line-height: 1.2;
  color: var(--red);
  text-transform: uppercase;
}
.pillar-cap p {
  max-width: min(620px, var(--measure));
  margin: 17.62px auto 0;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--ink);
}

/* ambient green glows behind the pillars band */
.pillars::before,
.pillars::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 900px;
  pointer-events: none;
  z-index: -1;
}
.pillars::before {                            /* right edge, level with the carousel */
  top: -146px;
  background: radial-gradient(387px 450px at 100% 50%, rgba(26, 107, 60, .88), rgba(26, 107, 60, 0) 100%);
}
.pillars::after {                             /* left edge, at the foot of the band */
  top: 494px;
  background: radial-gradient(387px 450px at 0 50%, rgba(26, 107, 60, .88), rgba(26, 107, 60, 0) 100%);
}


/* ══ FORUM OBJECTIVES ══════════════════════════════════════════ */

.obj { padding-top: var(--s-section); }
.obj__intro {
  margin: 11.42px 0 0;
  max-width: var(--measure);
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink);
}

/* the artboard's own column origins are 100 / 489.76 / 907.94 and the
   row pitch is a fixed 224.2 regardless of paragraph length */
.obj__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(28px, 6.8%, 88px);
  row-gap: clamp(36px, 4.4vw, 62px);
  margin-top: var(--s-head);
}

.goal { width: 100%; }
.goal__n {
  display: block;
  float: left;
  width: 87.3px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-numeral);
  line-height: 1;
  color: var(--ink);
}
.goal__t {
  width: 245px;
  margin: 2.9px 0 0 87.3px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-sub);
  line-height: 1.25;
  color: var(--ink);
}
.goal__rule {
  position: relative;
  display: block;
  clear: both;
  width: 100%;
  height: 2px;
  margin-top: 9.09px;
  background: linear-gradient(90deg, #b12a28 0%, #1a6b3c 81.1%, #1a6b3c 100%);
}
.goal__rule::before {
  content: '';
  position: absolute;
  inset: -2px 0;
  background: inherit;
  filter: blur(2px);
  opacity: .55;
}
.goal__p {
  margin: 12.43px 0 0;
  width: 100%;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink);
}


/* ══ INITIAL PROGRAM ═══════════════════════════════════════════ */

/* open state */


/* ══ SPECIAL HALL / LOCAL CONTENT ══════════════════════════════ */

.hall { position: relative; padding-top: var(--s-section); }
.hall::before {                                /* ambient glow behind this band */
  content: '';
  position: absolute;
  left: 50%;
  margin-left: -595px;
  top: -95px;
  width: 1190px;
  height: 1190px;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(circle closest-side, rgba(26, 107, 60, .42) 0%, rgba(26, 107, 60, 0) 100%);
}
.hall__title { max-width: 100%; }
.hall__intro {
  margin: 14.42px 0 0;
  max-width: var(--measure);
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink);
}

.hall__grid {
  display: grid;
  /* minmax(0, 1fr): a plain 1fr floors at min-content, and the longest
     caption forced 290px tracks — 870px of grid inside a 648px column at
     tablet width, which clipped the third item clean off the right edge */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* stretch, not center: a centred grid item sizes to max-content, so the
     captions pushed each item wider than its track and the third one hung
     off the right edge. The item is a centring flex column already. */
  justify-items: stretch;
  margin-top: var(--s-head);
  text-align: center;
}
.hall__item { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.hall__ring {
  position: relative;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.hall__ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ring-grad);
  -webkit-mask: radial-gradient(circle closest-side at 50% 50%, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(circle closest-side at 50% 50%, transparent calc(100% - 2px), #000 calc(100% - 2px));
}
.hall__item:nth-child(1) .hall__ring { --ring-grad: linear-gradient(90deg, #1a6b3c, #375f38); }
.hall__item:nth-child(2) .hall__ring { --ring-grad: linear-gradient(90deg, #575134, #744430); }
.hall__item:nth-child(3) .hall__ring { --ring-grad: linear-gradient(90deg, #94362c, #b12a28); }
.hall__ring .i { position: relative; z-index: 1; color: var(--ink); }

.hall__cap {
  width: 290px;
  margin: 26.34px 0 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-cap);
  line-height: 1.25;
  color: var(--ink);
}

.hall__rule {
  width: 93.5%;
  height: 2px;
  margin: var(--s-block) auto 0;
  background: linear-gradient(90deg, #b12a28 0%, #1a6b3c 81.6%, #1a6b3c 100%);
}
.hall__rule::after {
  inset: -4px 0;
  background: linear-gradient(90deg, rgba(177, 42, 40, .5) 0%, rgba(26, 107, 60, .5) 81.6%);
  filter: blur(3px);
}


/* ══ EXHIBITION ZONES ══════════════════════════════════════════ */

.zones { padding-top: var(--s-section); }
.zones__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  gap: clamp(10px, 1.1%, 18px);
  margin-top: var(--s-head);
}

.zone {
  position: relative;
  width: 100%;
  min-height: 321px;
  padding: 70px 22.4px 26px 21.7px;   /* header sits in the 70px top pad */
  /* subgrid: title, rule and body share their row heights with the other
     cards in the same row, so a 4-line title cannot push one card's rule
     and copy out of line with its neighbours */
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  align-content: start;
  border-radius: 10px;
}
.zone__border {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  padding: 3px;
  background: linear-gradient(90deg, var(--a), var(--b));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.zone__head {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 70px;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(90deg, var(--a), var(--b));
  display: flex;
  align-items: center;
  padding-left: 21.8px;
}
.zone__head .i {
  color: var(--ink);
  flex: none;
  width: 42px;
  height: 42px;
}
.zone__head span {
  margin-left: 18.3px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-label);
  line-height: 1.2;
  color: var(--ink);
  text-transform: uppercase;
  white-space: nowrap;
}
.zone__t {
  margin: 13.1px 0 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-sub);
  line-height: 1.2;
  color: var(--ink);
  text-transform: uppercase;
}
.zone__rule {
  margin-top: 20.7px;
  height: 1px;
  background: var(--cream);
}
.zone__body {
  display: flex;
  align-items: flex-start;
  padding: 26px 0 0;          /* one constant gap under the rule on all eight */
}
.zone__body p {
  width: 100%;
  margin: 0;
  font-family: var(--f-alt);
  font-weight: 300;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink);
}


/* ══ TARGET AUDIENCE / AUDIENCE CATEGORIES ═════════════════════
   ring row Ø97, stroke 2, pitch 205.375; the stroke colour is one
   red→green gradient mapped across the whole row.
   ────────────────────────────────────────────────────────────── */

.aud { padding-top: var(--s-section); }
.aud .h-section { margin-bottom: var(--s-head); }

.aud-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  justify-items: center;
  text-align: center;
}
.aud-item { display: flex; flex-direction: column; align-items: center; }

.aud-ring {
  width: 97px;
  height: 97px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
}
.aud-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ring-grad);
  -webkit-mask: radial-gradient(circle closest-side at 50% 50%, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(circle closest-side at 50% 50%, transparent calc(100% - 2px), #000 calc(100% - 2px));
}
.aud-item:nth-child(1) .aud-ring { --ring-grad: linear-gradient(90deg, #1a6b3c, #2a643a); }
.aud-item:nth-child(2) .aud-ring { --ring-grad: linear-gradient(90deg, #3c5c38, #4c5635); }
.aud-item:nth-child(3) .aud-ring { --ring-grad: linear-gradient(90deg, #5d4e33, #6e4731); }
.aud-item:nth-child(4) .aud-ring { --ring-grad: linear-gradient(90deg, #7f3f2f, #8f392c); }
.aud-item:nth-child(5) .aud-ring { --ring-grad: linear-gradient(90deg, #a1312a, #b12a28); }

.aud-ico, .aud-ring .ico, .hall__ring .ico { color: var(--ink); position: relative; z-index: 1; }

.aud-cap {
  margin: 15.21px 0 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-cap);
  line-height: 1.25;
  color: var(--ink);
  max-width: 190px;
}

.aud-rule {
  width: 93.5%;
  margin: var(--s-block) auto 0;
  background: linear-gradient(90deg, #b12a28 0%, #1a6b3c 81.7%);
}
.aud-rule::after {
  background: linear-gradient(90deg, rgba(177, 42, 40, .5) 0%, rgba(26, 107, 60, .5) 81.7%);
  inset: -4px 0;
  filter: blur(4px);
}

.aud--cat { padding-top: var(--s-section); }
.aud--cat .h-section { margin-bottom: var(--s-head); }
.aud--cat .aud-cap { margin-top: 20.24px; }
.aud--cat .aud-rule { margin-top: var(--s-block); }

.stat-num {
  position: relative;
  display: inline-block;
  margin: 20.76px 0 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-numeral);
  line-height: 1.1;
}
.stat-val {
  position: relative;
  z-index: 1;
  display: inline-block;
  background: linear-gradient(90deg, var(--num-b) 0%, var(--num-a) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-glow {                  /* atmospheric halo, behind the sharp numeral */
  position: absolute;
  left: 50%;
  top: -36.6px;
  width: 168px;
  height: 103px;               /* resolved up front — an unsized lazy img paints small and high while it decodes */
  max-width: none;             /* the numeral shrink-wraps; do not let img{max-width:100%} clamp the glow */
  transform: translateX(-50%);
  opacity: .42;
  z-index: 0;
  pointer-events: none;
}
.aud-item:nth-child(2) .stat-glow,
.aud-item:nth-child(3) .stat-glow { width: 165px; height: 103px; }
.aud-item:nth-child(4) .stat-glow,
.aud-item:nth-child(5) .stat-glow { width: 166px; height: 103px; }


/* ══ 2026 SPEAKERS ═════════════════════════════════════════════ */

.spk-band {
  position: relative;
  padding-top: var(--s-section);
  padding-bottom: var(--s-block);
  /* the row was frozen at the artboard's 228px card while the column grew to
     1520, so it filled only half the width. Both card and gutter now scale
     off --col, holding the artboard's 18.9% gutter at every width. */
  --spk-card: calc(var(--col) * .2111);   /* 228 / 1080 */
  --spk-gap:  calc(var(--spk-card) * .1886);
}
.spk-band::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  top: -11px;
  bottom: 0;
  pointer-events: none;
  z-index: -1;
  /* the artboard's glow ramps linearly up the band and falls off
     horizontally about x 617 — a linear ramp with a radial mask */
  background: linear-gradient(to bottom, rgba(26, 107, 60, 0) 44%, rgba(26, 107, 60, .58) 100%);
  -webkit-mask: radial-gradient(46% 100% at 48.2% 100%, #000 0%, #000 34%, rgba(0, 0, 0, .35) 78%, transparent 100%);
  mask: radial-gradient(46% 100% at 48.2% 100%, #000 0%, #000 34%, rgba(0, 0, 0, .35) 78%, transparent 100%);
}

.spk__stage {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: var(--s-head) auto 0;
}
.spk__viewport {
  width: min(calc(var(--spk-card) * 3 + var(--spk-gap) * 2),
             calc(100vw - 2 * var(--gutter) - 200px));
  overflow: hidden;
  /* room for the hover lift without moving the row */
  padding-block: 14px;
  margin-block: -14px;
}
.spk__track {
  display: flex;
  gap: var(--spk-gap);
  transition: transform .5s cubic-bezier(.4, .01, .2, 1);
}

.spk__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 228 / 274;
  background: linear-gradient(180deg, rgba(0, 92, 79, 0) 0%, rgba(0, 92, 79, 1) 100%);
  overflow: hidden;
  clip-path: inset(-114% 0 0 0);
}
/* the crops are expressed against the frame, so they hold at any card size */
.spk__frame img {
  position: absolute;
  width: auto;
  max-width: none;
}
.spk--1 .spk__frame img { left: -18.86%; top: -19.71%; width: 140.79%; height: auto; }
.spk--2 .spk__frame img { left: -40.79%; top: -24.09%; width: 185.53%; height: auto; }
.spk--3 .spk__frame img { left: -17.11%; top:  -8.39%; width: 132.46%; height: auto; }
/* Keyed by class rather than :nth-child — the carousel clones the run to
   loop, and position-based rules would land the wrong crop on the copies. */
.spk--4 .spk__frame img { left: -16%; top: -4%; width: 132%; height: auto; }

.spk__bar {
  display: block;
  width: calc(100% + 2px);
  height: 4px;
  margin: -2px -1px 0;
  background: linear-gradient(90deg, #b12a28 0%, #1a6b3c 80%, #1a6b3c 100%);
}
.spk__name {
  margin: 10.24px 0 0;
  font-family: var(--f-cairo);
  font-weight: 700;
  font-size: var(--t-name);
  line-height: 1.2;
  color: var(--ink-strong);
  text-transform: uppercase;
}
.spk__role {
  margin: 5.05px 0 0;
  font-family: var(--f-cairo);
  font-weight: 400;
  font-size: var(--t-sub);
  line-height: 1.3;
  color: var(--muted);
  text-transform: uppercase;
}

.spk__arrow {
  /* the artboard's thin outline ring reads as a smudge on the dark band;
     same solid treatment as the Highlighted Features arrows */
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: clamp(46px, 3.6vw, 58px);
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--cream);
  background: rgba(var(--scrim-photo), .82);
  border: 1.5px solid rgba(177, 42, 40, .85);
  backdrop-filter: blur(3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .38);
  z-index: 3;
  transition: transform .3s cubic-bezier(.34, 1.3, .5, 1),
              background .3s ease, border-color .3s ease, opacity .25s ease;
}
.spk__arrow--prev { left: calc(-1 * (clamp(46px, 3.6vw, 58px) + 16px)); }
.spk__arrow--next { right: calc(-1 * (clamp(46px, 3.6vw, 58px) + 16px)); }
.spk__arrow:hover,
.spk__arrow:focus-visible {
  transform: scale(1.08);
  background: var(--red);
  border-color: var(--red);
}
.spk__arrow[disabled] { opacity: .28; cursor: default; transform: none; }
.spk__arrow .i { display: block; width: 15px; height: 18px; }

.spk__rule {
  width: 1010px;
  height: 2px;
  margin: 0 auto;
  background: linear-gradient(90deg, #b12a28 0%, #1a6b3c 80%, #1a6b3c 100%);
}
.spk__rule::after {
  inset: -4px 0;
  background: linear-gradient(90deg, rgba(177, 42, 40, .5) 0%, rgba(26, 107, 60, .5) 80%);
  filter: blur(2.5px);
}


/* ══ SPONSORS ══════════════════════════════════════════════════ */

.spons { padding-top: var(--s-section); }
.spons__row {
  display: grid;
  /* Content-width tracks with one shared column-gap, so every rule gets the
     same clear space on both sides. Equal 1fr tracks looked even but were
     not: the marks differ in width from 144px to 274px, so centring each in
     its track left the Ministry of Industry logo touching both rules while
     its neighbours had 56-62px of air. */
  grid-template-columns: auto 1px auto 1px auto 1px auto;
  column-gap: clamp(18px, 2.9vw, 54px);
  justify-content: center;
  align-items: center;
  justify-items: center;
  height: 158.3px;
  margin-top: var(--s-head);
}
.spons__logo--1 { color: var(--ink); }
.spons__logo--2 { width: 158px; height: 158px; object-fit: contain; }
.spons__logo--3 { width: 274px; height: 78px;  object-fit: contain; }
.spons__logo--4 { width: 144px; height: 144px; object-fit: contain; }
.spons__sep {
  width: 1px;
  height: 158.3px;
  background: rgba(255, 255, 255, .30);
}
.spons__sep--1 { grid-column: 2; grid-row: 1; }
.spons__sep--2 { grid-column: 4; grid-row: 1; }
.spons__sep--3 { grid-column: 6; grid-row: 1; }
.spons__logo--1 { grid-column: 1; grid-row: 1; }
.spons__logo--2 { grid-column: 3; grid-row: 1; }
.spons__logo--3 { grid-column: 5; grid-row: 1; }
.spons__logo--4 { grid-column: 7; grid-row: 1; }


/* ══ FOOTER ════════════════════════════════════════════════════ */

.ftr { position: relative; padding-bottom: clamp(28px, 3vw, 52px); margin-top: var(--s-block); }

.ftr__rule {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, #b12a28 0%, #1a6b3b 81.25%);
  /* was 37.62px — the columns sit lower so the band under them shrinks */
  margin: 0 0 62px;
}
.ftr__rule::after {
  inset: -5px 0;
  background: linear-gradient(90deg, rgba(177, 42, 40, .45) 0%, rgba(26, 107, 59, .45) 81.25%);
  filter: blur(2.2px);
}

.ftr__cols {
  display: grid;
  /* contact | quick links | map | dates & timings — the timings hold the
     right-hand column on desktop, and being last in the DOM they also fall
     to the bottom of the stack on a phone. The last two carry equal
     fractions so the map and the table read as a matched pair. */
  /* minmax(0, fr), not bare fr: the timings' nowrap values push that
     track's min-content above its fraction, and the extra width is taken
     from the map's track — 286px vs 184px at 1100. Zero-floor tracks keep
     the last two genuinely equal. */
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .74fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  width: var(--col);
  margin-inline: auto;
  padding-bottom: clamp(8px, 1vw, 16px);
}
.ftr__col--b { position: relative; }
.ftr__col--b::before {         /* one divider now that there are two columns */
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.ftr__col--b::before { left: 0; }
.ftr__col--b::after  { right: -2px; }

/* first column has no rule before it, so it sits on the page margin */
.ftr__col--a { padding-left: 0; }
.ftr__col--links { padding-left: clamp(24px, 4.5%, 46px); position: relative; }
.ftr__col--links::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: var(--line);
}
.ftr__col--b {
  padding-left: clamp(24px, 4.5%, 46px);
  display: flex;
  flex-direction: column;
  /* the map used to close the row, so it was pushed right; with the timings
     column after it, it sits at the head of its own column instead */
  align-items: flex-start;
}
.ftr__col--b > * { width: 100%; }
.ftr__col--c { padding-left: clamp(24px, 4.5%, 46px); position: relative; }
.ftr__col--c::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: var(--line);
}

.ftr__head {
  display: flex;
  align-items: center;
  margin: 0;
  padding-top: 38.22px;
  font-family: var(--f-alt);
  font-weight: 700;
  font-size: var(--t-sub);
  line-height: 1.8;
  color: var(--ink-strong);
  text-transform: uppercase;
  white-space: nowrap;
}
.ftr__ico { color: var(--red); }

.ftr__head--contact { margin-left: 0; }
.ftr__head--contact .ftr__ico { margin-right: 19px; }
.ftr__head--links   { margin-left: 0; }
.ftr__head--links .ftr__ico { margin-right: 17.22px; }
.ftr__col--b .ftr__ico { margin-right: 11.07px; }
.ftr__col--c .ftr__ico { margin-right: 11.42px; }

.ftr__line {
  margin: 0;
  }
.ftr__line:first-of-type { margin-top: 12px;
  font-family: var(--f-alt);
  font-weight: 300;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
}
.ftr__line a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.ftr__social { display: flex; gap: 20.16px; margin-top: 22.89px; }
.ftr__social a {
  display: block;
  color: var(--red);
  transition: color .25s ease, transform .25s ease;
}
.ftr__social a:hover { color: #d13a37; transform: translateY(-2px); }

.ftr__links {
  margin-top: 12px;
  font-family: var(--f-alt);
  font-weight: 300;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
}
.ftr__links a { transition: color .2s ease; }
.ftr__links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }


.ftr__map-frame { display: block; }
.ftr__map {
  width: 100%;
  height: auto;
  aspect-ratio: 298 / 277;
  object-fit: cover;
  margin: 0;
}

/* Desktop: the map and the timings table are a matched pair — same column
   fraction, same left inset, and ONE shared fixed height. No stretching
   chains: a single value both boxes obey, sized to clear the table's
   natural height at every desktop width. */
@media (min-width: 1100px) {
  /* one shared box for the pair: --ftr-box is the height, --ftr-boxw the
     width — narrower than the column on request, and min(100%) so a tight
     viewport can never force it past its track */
  .ftr__cols {
    --ftr-box:  clamp(214px, 15vw, 282px);
    --ftr-boxw: min(100%, clamp(246px, 17.6vw, 330px));
  }
  /* scoped under the column so it outweighs the base `.ftr__table
     { width: 100% }` that sits later in the file — order alone lost twice */
  .ftr__col--c .ftr__table { height: var(--ftr-box); width: var(--ftr-boxw); }
  .ftr__map-frame {
    position: relative;
    display: block;
    width: var(--ftr-boxw);
    height: var(--ftr-box);
  }
  .ftr__map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    aspect-ratio: auto;
  }
}

.ftr__table {
  width: 100%;
  margin: 12px 0 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: var(--f-alt);
}
.ftr__table th:nth-child(1), .ftr__table td:nth-child(1) { width: 29%; }
.ftr__table th:nth-child(2), .ftr__table td:nth-child(2),
.ftr__table th:nth-child(3), .ftr__table td:nth-child(3) { width: 35.5%; }
.ftr__table td b, .ftr__table td .lb { white-space: nowrap; }
/* The artboard split the timings into EXHIBITORS and VISITORS columns; only
   one set of times was supplied, so this variant runs Date | Timings. */
.ftr__table--two th:nth-child(1), .ftr__table--two td:nth-child(1) { width: 42%; }
.ftr__table--two th:nth-child(2), .ftr__table--two td:nth-child(2) { width: 58%; }

.ftr__table thead th {
  height: auto;
  padding: 9px 6px;
  background: var(--red);
  color: var(--ink);
  font-weight: 700;
  font-size: var(--t-micro);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  padding: 11px 6px;
}
.ftr__table tbody td {
  height: auto;
  padding: 12px 6px;
  text-align: center;
  vertical-align: middle;
  font-weight: 300;
  font-size: var(--t-micro);
  line-height: 1.35;
  color: var(--ink);
}
.ftr__table tbody td b { font-weight: 700; }
.ftr__table tbody tr:nth-child(odd)  td { background: var(--surface); }
.ftr__table tbody tr:nth-child(even) td { background: var(--line-soft); }
.ftr__table th + th, .ftr__table td + td { border-left: 1px solid #152836; }

.ftr__bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 24px;
  width: var(--col);
  margin: clamp(46px, 4.6vw, 74px) auto 0;
  padding-top: clamp(26px, 2.6vw, 40px);
  border-top: 1px solid var(--line-soft);
}
.ftr__copy {
  grid-column: 2;
  margin: 0;
  text-align: center;
  font-family: var(--f-alt);
  font-weight: 300;
  font-size: var(--t-micro);
  line-height: 1.6;
  color: var(--ink-soft);
}

.ftr__org {
  grid-column: 3;
  justify-self: end;
  width: 114.71px;
}
.ftr__org-label {
  display: flex;
  align-items: center;
  font-family: var(--f-alt);
  font-weight: 500;
  font-size: max(10px, var(--t-micro));
  line-height: 1;
  color: var(--ink-soft);
  letter-spacing: 2.48px;
  text-indent: 1.24px;
}
.ftr__org-label .ln { height: 1px; background: var(--ink-soft); flex: none; width: 19.07px; }
.ftr__org-label .ln:first-child { margin-right: 4.23px; }
.ftr__org-label .ln:last-child  { margin-left: 1px; }
.ftr__org-logo {
  display: block;
  width: 108.38px;
  height: 21.76px;
  margin: 9.75px 0 0 1.72px;
  color: var(--ink-strong);
}


/* ══ CIRCLED ICON ROWS — entrance + hover ══════════════════════
   The rings are gradient-masked circles and the icons are masked
   shapes, so both animate cleanly with transform/filter alone —
   no layout is touched, and nothing reflows on hover.
   ────────────────────────────────────────────────────────────── */

/* the row itself no longer fades as a block; its items come in one
   after another, which reads far better on a 3-up or 5-up row */
.js [data-reveal="stagger"] { opacity: 1; transform: none; }
.js [data-reveal="stagger"] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .62s cubic-bezier(.22,.61,.36,1),
              transform .62s cubic-bezier(.22,.61,.36,1);
}
[data-reveal="stagger"].is-in > *,
.is-flat [data-reveal="stagger"] > * { opacity: 1; transform: none; }
[data-reveal="stagger"].is-in > *:nth-child(1) { transition-delay: .00s; }
[data-reveal="stagger"].is-in > *:nth-child(2) { transition-delay: .09s; }
[data-reveal="stagger"].is-in > *:nth-child(3) { transition-delay: .18s; }
[data-reveal="stagger"].is-in > *:nth-child(4) { transition-delay: .27s; }
[data-reveal="stagger"].is-in > *:nth-child(5) { transition-delay: .36s; }

/* ── hover / focus ─────────────────────────────────────────── */
.hall__item,
.aud-item { --glow: var(--green); }

.hall__ring,
.aud-ring {
  transition: transform .38s cubic-bezier(.34,1.4,.5,1),
              filter .38s ease;
}
.hall__ring .i,
.aud-ring .i {
  transition: transform .38s cubic-bezier(.34,1.4,.5,1);
}
.hall__cap,
.aud-cap {
  transition: color .3s ease;
}

.hall__item:hover .hall__ring,
.hall__item:focus-within .hall__ring,
.aud-item:hover .aud-ring,
.aud-item:focus-within .aud-ring {
  transform: scale(1.045);
  filter: drop-shadow(0 0 12px var(--glow));
}
.hall__item:hover .hall__ring .i,
.aud-item:hover .aud-ring .i { transform: scale(1.09); }
.hall__item:hover .hall__cap,
.aud-item:hover .aud-cap { color: #fff; }

/* each ring glows in its own slice of the row's red→green ramp */
.hall__item:nth-child(1) { --glow: #1a6b3c; }
.hall__item:nth-child(2) { --glow: #744430; }
.hall__item:nth-child(3) { --glow: #b12a28; }
.aud-item:nth-child(1) { --glow: #1a6b3c; }
.aud-item:nth-child(2) { --glow: #445836; }
.aud-item:nth-child(3) { --glow: #6e4731; }
.aud-item:nth-child(4) { --glow: #8f392c; }
.aud-item:nth-child(5) { --glow: #b12a28; }

/* the stat numerals lift a touch with their cell */
.nums__cell { transition: transform .38s cubic-bezier(.34,1.4,.5,1); }
.nums__cell:hover { transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
  .hall__ring, .aud-ring, .hall__ring .i, .aud-ring .i, .nums__cell { transition: none; }
  .hall__item:hover .hall__ring, .aud-item:hover .aud-ring,
  .hall__item:hover .hall__ring .i, .aud-item:hover .aud-ring .i,
  .nums__cell:hover { transform: none; }
}


/* ── zone cards: hover, and the stagger needs eight steps ─────── */
[data-reveal="stagger"].is-in > *:nth-child(6) { transition-delay: .45s; }
[data-reveal="stagger"].is-in > *:nth-child(7) { transition-delay: .54s; }
[data-reveal="stagger"].is-in > *:nth-child(8) { transition-delay: .63s; }

.zone {
  transition: transform .4s cubic-bezier(.34, 1.3, .5, 1), filter .4s ease;
}
.zone__head, .zone__border { transition: filter .4s ease; }
.zone:hover {
  transform: translateY(-6px);
  filter: drop-shadow(0 14px 26px var(--shadow));
}
.zone:hover .zone__head,
.zone:hover .zone__border { filter: brightness(1.14) saturate(1.06); }

/* ── divider rules light up as they scroll in ─────────────────── */
.rule::before,
.about__rule::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
              rgba(255, 255, 255, 0) 0%,
              rgba(255, 255, 255, .92) 50%,
              rgba(255, 255, 255, 0) 100%);
  background-size: 18% 100%;
  background-repeat: no-repeat;
  background-position: -20% 0;
  opacity: 0;
  pointer-events: none;
}
.about__rule { position: relative; }
.rule.is-lit::before,
.about__rule.is-lit::before {
  animation: rule-sweep 1.55s cubic-bezier(.32, .72, .35, 1) .1s forwards;
}
@keyframes rule-sweep {
  0%   { background-position: -20% 0; opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { background-position: 120% 0; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .zone { transition: none; }
  .zone:hover { transform: none; }
  .rule.is-lit::before, .about__rule.is-lit::before { animation: none; }
}


/* ── the six objectives rules light up in sequence, like the
      section dividers (::before already carries their blur glow,
      so the sweep rides ::after) ─────────────────────────────── */
.goal__rule::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
              rgba(255, 255, 255, 0) 0%,
              rgba(255, 255, 255, .95) 50%,
              rgba(255, 255, 255, 0) 100%);
  background-size: 26% 100%;
  background-repeat: no-repeat;
  background-position: -30% 0;
  opacity: 0;
  pointer-events: none;
}
[data-reveal="stagger"].is-in .goal__rule::after {
  animation: rule-sweep 1.35s cubic-bezier(.32, .72, .35, 1) forwards;
}
[data-reveal="stagger"].is-in > *:nth-child(1) .goal__rule::after { animation-delay: .30s; }
[data-reveal="stagger"].is-in > *:nth-child(2) .goal__rule::after { animation-delay: .39s; }
[data-reveal="stagger"].is-in > *:nth-child(3) .goal__rule::after { animation-delay: .48s; }
[data-reveal="stagger"].is-in > *:nth-child(4) .goal__rule::after { animation-delay: .57s; }
[data-reveal="stagger"].is-in > *:nth-child(5) .goal__rule::after { animation-delay: .66s; }
[data-reveal="stagger"].is-in > *:nth-child(6) .goal__rule::after { animation-delay: .75s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal="stagger"].is-in .goal__rule::after { animation: none; }
}


/* ── sponsor lockups: they are partners, so the hover is a lift and a
      lift in presence, nothing playful ─────────────────────────────── */
.spons__logo {
  opacity: 1;
  transition: opacity .35s ease, transform .35s cubic-bezier(.34, 1.3, .5, 1),
              filter .35s ease;
}
.spons__row:hover .spons__logo { opacity: .55; }
.spons__row .spons__logo:hover {
  opacity: 1;
  transform: translateY(-5px) scale(1.045);
  filter: drop-shadow(0 8px 20px var(--shadow-strong));
}
.spons__sep { transition: opacity .35s ease; }
.spons__row:hover .spons__sep { opacity: .45; }

@media (prefers-reduced-motion: reduce) {
  .spons__logo { transition: opacity .2s ease; }
  .spons__row .spons__logo:hover { transform: none; }
}


/* ── icons: light travels through the glyph on hover ───────────
   The icons are single-path masks, so there are no sub-parts to
   move. Instead the fill behind the mask becomes a gradient and
   sweeps, which animates the inside of the shape itself. */



@keyframes icon-sweep {
  from { background-position: 100% 0; }
  to   { background-position: -110% 0; }
}

/* the glyph also gives a small kick, offset from the ring's own scale */
.aud-item:hover .aud-ring .ico,
.hall__item:hover .hall__ring .ico {
  transform: scale(1.05);
  transition: transform .4s ease;
}

@media (prefers-reduced-motion: reduce) {
  .aud-item:hover .aud-ring .i,
  .hall__item:hover .hall__ring .i,
  .zone:hover .zone__head .i { animation: none; transform: none; }
}


/* ══ ICON INTERNALS ════════════════════════════════════════════
   The icons are inline SVG now, so every sub-shape inside them is
   addressable. On hover the gears turn about their own centres and
   the remaining parts lift in sequence — the elements inside the
   icon animate, not just the icon as a whole.
   ────────────────────────────────────────────────────────────── */
.ico {
  display: block;
  overflow: visible;
  color: var(--ink);
}
.aud-ring .ico { width: 56%; height: auto; }
.hall__ring .ico { width: 58%; height: auto; }
.zone__head .ico { width: 42px; height: 42px; }

.ico path {
  transform-box: view-box;
  transition: transform .55s cubic-bezier(.34, 1.35, .5, 1);
}
.ico path[data-spin] {
  transition: transform 1.1s cubic-bezier(.25, .8, .3, 1);
}

/* the one detail worth having: gears turn slowly, nothing else moves */
.aud-item:hover .ico path[data-spin],
.aud-item:focus-within .ico path[data-spin],
.hall__item:hover .ico path[data-spin],
.hall__item:focus-within .ico path[data-spin] { transform: rotate(60deg); }


@media (prefers-reduced-motion: reduce) {
  .ico path { transition: none; }
  .aud-item:hover .ico path,
  .hall__item:hover .ico path,
  .zone:hover .ico path { transform: none; }
}


/* ══ HIGHLIGHTED FEATURES ══════════════════════════════════════
   Five cards side by side that flip on hover to reveal the
   description, with prev/next arrows to slide the row.
   ────────────────────────────────────────────────────────────── */
.feats { padding-top: var(--s-section); }

.feats__stage {
  position: relative;
  margin-top: var(--s-head);
}
.feats__viewport { overflow: hidden; }

.feats__track {
  display: flex;
  gap: clamp(12px, 1.4%, 22px);
  transition: transform .55s cubic-bezier(.32, .72, .35, 1);
  will-change: transform;
}

.feat {
  flex: 0 0 calc((100% - 3 * clamp(12px, 1.4%, 22px)) / 4);
  aspect-ratio: 1 / 1.18;
  perspective: 1200px;
  cursor: pointer;
  border-radius: 12px;
}
.feat__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition-timing-function: cubic-bezier(.4, .12, .2, 1);
}
.feat:hover .feat__inner,
.feat:focus-visible .feat__inner,
.feat.is-flipped .feat__inner { transform: rotateY(180deg); }

.feat__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
}
.feat__face--front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.feat__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(var(--scrim-photo), .94) 0%, rgba(var(--scrim-photo), .74) 26%,
              rgba(var(--scrim-photo), .12) 58%, rgba(var(--scrim-photo), 0) 100%);
}
.feat__title {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  margin: 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-cap);
  line-height: 1.25;
  color: var(--ink);
  text-transform: uppercase;
}
/* an acronym that carries its own casing through an all-caps run —
   "MoUs Signing" was rendering as the word MOUS */
.feat__title .cased { text-transform: none; }

.feat__face--back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: clamp(16px, 1.5vw, 26px);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(26, 107, 60, .40) 0%, rgba(26, 107, 60, 0) 62%),
    radial-gradient(120% 100% at 100% 100%, rgba(177, 42, 40, .34) 0%, rgba(177, 42, 40, 0) 62%),
    var(--bg-2);
  border-color: var(--line);
}
.feat__title--back {
  position: static;
  color: var(--ink);
  font-size: var(--t-cap);
}
.feat__face--back p {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--ink-soft);
}

.feats__arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;              /* separate property, so transform stays free for :hover scale */
  display: grid;
  place-items: center;
  width: clamp(44px, 3.4vw, 54px);
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--ink);
  background: rgba(var(--scrim-photo), .82);
  border: 1.5px solid rgba(177, 42, 40, .85);
  backdrop-filter: blur(3px);
  box-shadow: 0 6px 18px var(--shadow);
  z-index: 3;
  transition: transform .3s cubic-bezier(.34, 1.3, .5, 1),
              background .3s ease, border-color .3s ease, opacity .25s ease;
}
/* fully clear of the cards, sitting in the gutter */
.feats__arrow--prev { left: calc(-1 * (clamp(44px, 3.4vw, 54px) + 14px)); }
.feats__arrow--next { right: calc(-1 * (clamp(44px, 3.4vw, 54px) + 14px)); }
.feats__arrow:hover,
.feats__arrow:focus-visible {
  transform: scale(1.08);
  background: var(--red);
  border-color: var(--red);
}
.feats__arrow:disabled { opacity: .28; cursor: default; transform: none; }
/* the extracted glyph carries its own ring — drop it, the button is the ring */
.feats__arrow .i { width: 14px; height: 17px; }

@media (prefers-reduced-motion: reduce) {
  .feat__inner, .feats__track { transition: none; }
}

/* the map is a real link now — say so */
.ftr__map-link {
  display: block;
  margin-top: 12px;
  color: var(--ink-soft);
  transition: color .3s ease, transform .35s cubic-bezier(.34, 1.25, .5, 1);
}
.ftr__map-link:hover,
.ftr__map-link:focus-visible { color: var(--ink); transform: translateY(-3px); }
.ftr__map-link:hover .ftr__map { box-shadow: 0 12px 28px var(--shadow-strong); }
.ftr__map { transition: box-shadow .35s ease; }

/* the ink variants only exist for the light theme */
.spons__logo--ink { display: none; }


/* ══ SECTION RHYTHM ════════════════════════════════════════════
   One padding value top and bottom on every section — the rhythm
   the light build established, now shared by both themes. */
.pat, .nums, .about, .obj, .feats, .zones,
.aud, .spons, .pillars, .hall, .spk-band {
  padding-top: var(--s-section);
  padding-bottom: var(--s-section);
}


/* ══ SPEAKER PORTRAITS — frame ═════════════════════════════════
   Each portrait sits in a brand-gradient frame. On hover a bright
   arc traces around that frame — a light running the perimeter,
   like a loading ring. The portrait itself is never touched.
   ────────────────────────────────────────────────────────────── */
@property --spk-spin {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.spk {
  width: var(--spk-card);
  flex: none;
  text-align: center;
  position: relative;
}

/* The frame is drawn on the portrait's own box. It used to sit 4px outside
   on .spk, where the carousel viewport's overflow:hidden clipped its top
   edge and the outer edges of the first and last card. */
.spk__frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 3px;
  padding: 2px;
  background: linear-gradient(150deg, var(--green) 0%, #7a5a2e 52%, var(--red) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: .85;
  pointer-events: none;
  z-index: 3;
}




/* the light that runs the perimeter */
.spk__frame::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 4px;
  padding: 2px;
  background: conic-gradient(from var(--spk-spin),
              rgba(255, 255, 255, 0)    0deg,
              rgba(255, 255, 255, 0)  268deg,
              rgba(255, 255, 255, .5) 310deg,
              #ffffff                 342deg,
              rgba(255, 255, 255, 0)  360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 4;
}
.spk:hover .spk__frame::after,
.spk:focus-within .spk__frame::after {
  opacity: 1;
  animation: spk-trace 1.9s linear infinite;
}
@keyframes spk-trace { to { --spk-spin: 360deg; } }

.spk:hover .spk__frame::before,
.spk:focus-within .spk__frame::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .spk:hover .spk__frame::after { animation: none; opacity: .55; }
}






/* ══ SECTION STANDFIRSTS ═══════════════════════════════════════
   Short centred blocks. `text-wrap: pretty` only tunes the last
   line, so these were breaking 654px / 125px; `balance` evens
   them. Declared here because the section rules above set
   `margin: … 0 0`, which would otherwise kill the centring. */
.obj__intro,
.hall__intro {
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
  max-width: min(62ch, 720px);
}
.about__body {
  text-wrap: balance;
}


/* ══ SPEAKERS — living background ══════════════════════════════
   Two brand-coloured auroras drift behind the portraits on a long,
   offset loop, so the band is never quite still. Hovering the row
   raises them and speeds the drift; they sit behind everything and
   never take pointer events.
   ────────────────────────────────────────────────────────────── */
.spk-band::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  top: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .92;                 /* matched to the light band, which paints the
                                   same radials as its own background */
  background-repeat: no-repeat;
  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-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;
  transition: opacity .8s ease;
}

@keyframes spk-aurora-a {
  from { background-position:  2% 14%, 96% 84%, 38%  2%; }
  to   { background-position: 46% 62%, 44% 26%, 72% 44%; }
}
@keyframes spk-aurora-b {
  from { background-size: 160% 160%, 150% 150%, 140% 140%; }
  to   { background-size: 190% 190%, 128% 128%, 168% 168%; }
}

/* hovering the row lifts the auroras and quickens the drift */
.spk-band:hover::after {
  opacity: .92;
  animation-duration: 13s, 17s;
}

@media (prefers-reduced-motion: reduce) {
  .spk-band::after { animation: none; opacity: .5; }
  .spk-band:hover::after { animation: none; opacity: .6; }
}