/* ==========================================================================
   MBIFL 2027 · Era of Riddles
   Built from Figma "MBIFL – 2027": Desktop Design ▸ home - v1 (1920 × 6287)
   and Mobile Design ▸ latest (390 × 5360).

   Units: every size is written as  calc(N * var(--u))  where N is the value in
   Figma design pixels. --u is "one design pixel" in CSS px:
     desktop (≥1024px)  --u = viewport / 1920   (capped at 2560px wide)
     mobile  (<1024px)  --u = viewport / 390    (capped at 540px wide, centred)
   This keeps the hand-drawn pipe network locked to the layout at every width.
   ========================================================================== */

/* ---------- Fonts: Creato Display (add the files to /fonts, see README) ---------- */
@font-face { font-family: "Creato Display"; font-weight: 300; font-style: normal; font-display: swap;
  src: local("Creato Display Light"), local("CreatoDisplay-Light"), url("../fonts/CreatoDisplay-Light.woff2") format("woff2"), url("../fonts/CreatoDisplay-Light.otf") format("opentype"); }
@font-face { font-family: "Creato Display"; font-weight: 400; font-style: normal; font-display: swap;
  src: local("Creato Display Regular"), local("CreatoDisplay-Regular"), url("../fonts/CreatoDisplay-Regular.woff2") format("woff2"), url("../fonts/CreatoDisplay-Regular.otf") format("opentype"); }
@font-face { font-family: "Creato Display"; font-weight: 500; font-style: normal; font-display: swap;
  src: local("Creato Display Medium"), local("CreatoDisplay-Medium"), url("../fonts/CreatoDisplay-Medium.woff2") format("woff2"), url("../fonts/CreatoDisplay-Medium.otf") format("opentype"); }
@font-face { font-family: "Creato Display"; font-weight: 900; font-style: normal; font-display: swap;
  src: local("Creato Display Black"), local("CreatoDisplay-Black"), url("../fonts/CreatoDisplay-Black.woff2") format("woff2"), url("../fonts/CreatoDisplay-Black.otf") format("opentype"); }

/* ---------- Tokens (Figma ▸ Design System — Foundations) ---------- */
:root {
  --blue: #234adc;          /* Brand/Primary Blue · Surface/Brand · Text/Primary · Pipe/Blue */
  --red: #d20d1a;           /* Brand/Primary Red · Surface/Accent · Text/Accent · Pipe/Red */
  --blue-2: #4a5ec0;        /* Brand/Secondary Blue · Text/Secondary */
  --soft: #d4def9;          /* Brand/Soft Blue · Surface/Soft (footer) */
  --pale: #f5f7ff;          /* Brand/Pale Blue · Surface/Map */
  --deep: #0d174f;          /* Brand/Deep Blue (pressed) */
  --card-border: rgba(35, 74, 220, .9);
  --ph-border: rgba(35, 74, 220, .35);
  --ph-surface: rgba(35, 74, 220, .03);
  --divider: rgba(35, 74, 220, .25);
  --muted: rgba(35, 74, 220, .8);
  --inv-muted: rgba(255, 255, 255, .9);
  --font: "Creato Display", "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --vw: 100vw;               /* replaced by JS with the width excluding the scrollbar */
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.menu-open { overflow: hidden; }
body {
  margin: 0; background: #fff; color: var(--blue);
  font-family: var(--font); font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; overflow-x: clip;
}
img, svg { display: block; max-width: none; }
p, h1, h2, h3, figure, ul { margin: 0; padding: 0; }
h1, h2, h3 { font: inherit; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 12px; top: 12px; z-index: 200; padding: 10px 16px; border-radius: 999px; background: #fff; color: var(--blue); font-weight: 500; transform: translateY(-200%); transition: transform .2s; }
.skip-link:focus { transform: none; }

/* ---------- Page stage & layering ----------
   z-index 0: section backgrounds · 1: pipes & lettering · 2: pinball · 3: content */
.page { position: relative; margin-inline: auto; width: calc(var(--dw) * var(--u)); }
.sec-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sec-bg::before { content: ""; position: absolute; background-repeat: no-repeat; background-size: 100% 100%; }
.hero__lettering, .pipes, .mp, .mps { z-index: 1; pointer-events: none; }
.pinball-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.mp { position: absolute; display: block; width: calc(17 * var(--u)); }
.mp--blue { background: var(--blue); }
.mp--red { background: var(--red); }
.mps { position: absolute; overflow: visible; }

/* Lettering is hidden until the intro mask is ready (fallback reveal after 4s). */
.js .hero__art .letters { opacity: 0; animation: letters-fallback 0s 4s forwards; }
.js .hero__art.is-ready .letters { opacity: 1; animation: none; }
@keyframes letters-fallback { to { opacity: 1; } }

/* ---------- "ERA OF RIDDLES" word highlight ----------
   After the intro the letters light up one by one in reading order (E-R-A · O-F · R-I-D-D-L-E-S),
   then the whole phrase glows together and fades back to blue. Only the letters' own pipes change
   colour; the connecting pipes stay blue. Tune: --hl-color, --hl-cycle, --hl-start, --hl-step. */
.hero__art { --hl-color: #d20d1a; --hl-cycle: 9s; --hl-start: 2.8s; --hl-step: .2s; }
.hl rect, .hl circle, .hl path { fill: var(--hl-color); }
.hl__l, .hl__all { opacity: 0; }
.hl__l { animation: hl-wave var(--hl-cycle) ease-in-out calc(var(--hl-start) + var(--i) * var(--hl-step)) infinite; }
.hl__all { animation: hl-all var(--hl-cycle) ease-in-out var(--hl-start) infinite; }
@keyframes hl-wave { 0% { opacity: 0; } 3% { opacity: 1; } 10% { opacity: 1; } 14%, 100% { opacity: 0; } }
@keyframes hl-all { 0%, 36% { opacity: 0; } 40%, 58% { opacity: 1; } 63%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hl { display: none; } }

/* ---------- Pinball ---------- */
.pinball {
  position: absolute; left: 0; top: 0; border-radius: 50%;
  /* the supplied PNG; the gradient underneath is a stand-in if the file is missing */
  background:
    url("../assets/img/pinball.png") center / 100% 100% no-repeat,
    radial-gradient(circle at 34% 30%, #fff 0 7%, #dfe3ea 18%, #8a909c 52%, #2b303b 88%, #1b1f27 100%);
  box-shadow: 0 2px 4px rgba(13, 23, 79, .35);
  opacity: 0; transition: opacity .45s ease;
  will-change: transform;
}
.pinball.is-visible { opacity: 1; }

/* ---------- Logo / MBIFL (mark + live wordmark text) ---------- */
.logo {
  --lw: calc(230 * var(--u)); --mark: #fff;
  position: relative; display: block; flex: none;
  width: var(--lw); height: calc(var(--lw) * .6);
  font-size: calc(var(--lw) / 230); color: var(--blue);
}
.logo--inverse { --mark: var(--blue); color: #fff; }
.logo__mark { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--lw) * 139 / 230); color: var(--mark); }
.logo__t { position: absolute; white-space: nowrap; line-height: 1.2; font-weight: 300; font-size: 19em; }
.logo__t--mono { left: 25.939%; top: 5.993%; font-size: 6em; font-weight: 500; }
.logo__t--strong { left: 20.404%; top: 32.891%; font-size: 18.8em; font-weight: 500; }
.logo__t--int { left: 20.357%; top: 46.174%; }
.logo__t--fest { left: 20.357%; top: 59.268%; }
.logo__t--of { left: 68.826%; top: 59.109%; }
.logo__t--let { left: 20.361%; top: 72.210%; }

/* ---------- Buttons ---------- */
/* Button / Register: pill with an offset outline. Hover = inverted, pressed = deep blue. */
.btn-reg { position: relative; z-index: 3; display: block; flex: none; color: #fff; -webkit-tap-highlight-color: transparent; }
.btn-reg__outline { position: absolute; border: 0 solid #fff; border-radius: 999px; pointer-events: none; transition: transform .2s ease; }
.btn-reg__pill {
  position: absolute; left: 0; display: flex; align-items: center; justify-content: center;
  border: 0 solid #fff; border-radius: 999px; background: var(--blue);
  font-weight: 900; line-height: 1.2; white-space: nowrap; text-transform: uppercase;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
@media (hover: hover) {
  .btn-reg:hover .btn-reg__pill { background: #fff; color: var(--blue); }
  .btn-reg--on-light:hover .btn-reg__pill { border-color: var(--blue); }
}
.btn-reg:active .btn-reg__pill { background: var(--deep); color: #fff; }

/* Button / Secondary */
.btn-sec {
  position: relative; z-index: 3; display: inline-flex; align-items: center;
  background: var(--blue); color: #fff; font-weight: 500; line-height: 1.2; white-space: nowrap;
  transition: background-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-sec__icon { flex: none; width: calc(22 * var(--u)); height: calc(22 * var(--u)); transition: transform .2s ease; }
@media (hover: hover) {
  .btn-sec:hover { background: var(--deep); }
  .btn-sec:hover .btn-sec__icon { transform: translateX(3px); }
}
.btn-sec:active { background: var(--deep); }

/* ---------- Section heading ---------- */
.sec-heading { position: relative; z-index: 3; display: flex; flex-direction: column; color: var(--blue); }
.sec-heading h2 { display: flex; flex-direction: column; }
.sec-heading--red { color: var(--red); }
.sec-heading__label { display: block; font-weight: 300; }
.sec-heading__title { display: block; font-weight: 500; }
.sec-heading__sub { font-weight: 500; color: var(--blue-2); }

/* ---------- Speaker card ---------- */
.speaker {
  position: relative; z-index: 3; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: calc(1.5 * var(--u)) solid var(--card-border);
  transition: transform .3s ease, box-shadow .3s ease;
}
.speaker__media { position: relative; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--pale); }
.speaker__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.speaker__media--blue { background: var(--blue); }
.speaker__media--red { background: var(--red); }
.speaker__media--initials span { color: #fff; font-weight: 900; line-height: 1.2; }
.speaker__name { display: flex; align-items: center; flex: 1; min-height: 0; font-weight: 500; color: var(--blue); }
.speaker__name span { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) {
  .speaker:hover { transform: translateY(calc(-4 * var(--u))); }
  .speaker:hover .speaker__media img { transform: scale(1.04); }
}

/* ---------- Sponsors panel ---------- */
.sponsor-panel { position: relative; z-index: 3; background: #fff; border: calc(1.5 * var(--u)) solid var(--card-border); }
.sponsor-slot { position: relative; overflow: hidden; background: var(--ph-surface); }
.sponsor-slot::after { content: ""; position: absolute; inset: 0; border: calc(1.5 * var(--u)) dashed var(--ph-border); border-radius: inherit; pointer-events: none; }
.sponsor-slot picture, .sponsor-slot img { display: block; width: 100%; height: 100%; }
.sponsor-slot img { object-fit: contain; }

/* ---------- Chip / Event ---------- */
.chip { display: inline-flex; align-items: center; background: var(--red); color: #fff; border-radius: 999px; font-weight: 500; line-height: 1.2; text-transform: uppercase; white-space: nowrap; }
.chip__dot { flex: none; width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, .7); }

/* ---------- Venue card ---------- */
.venue-card { position: relative; z-index: 3; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: calc(1.5 * var(--u)) solid var(--card-border); }
.venue-card__map {
  position: relative; overflow: hidden;
  background: var(--pale) url("../assets/img/maze-pattern.png") 0 0 / calc(1920.5 * var(--u)) calc(1080.5 * var(--u)) repeat;
}
.venue-card__halo { position: absolute; width: calc(64 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; background: rgba(210, 13, 26, .18); }
.venue-card__pin { position: absolute; width: calc(44 * var(--u)); height: calc(55 * var(--u)); }
.venue-card__label { position: absolute; padding: calc(8 * var(--u)) calc(14 * var(--u)); border-radius: 999px; background: #fff; box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(35, 74, 220, .18); font-weight: 500; line-height: 1.2; white-space: nowrap; }
.venue-card__text { display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.venue-card__kicker { font-weight: 500; text-transform: uppercase; color: var(--red); line-height: 1.2; white-space: nowrap; }
.venue-card__name { font-weight: 500; }
.venue-card__addr { color: var(--muted); }

/* ---------- Footer common ---------- */
.site-footer { position: relative; }
.site-footer::before { /* full-bleed soft blue beyond the stage */
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 0;
  left: calc(50% - var(--vw) / 2); right: calc(50% - var(--vw) / 2); background: var(--soft);
}
.footer__main, .footer__copy, .footer__divider { position: relative; z-index: 3; }
.footer__tagline { font-weight: 900; text-transform: uppercase; }
.footer__label { font-weight: 500; text-transform: uppercase; line-height: 1.2; }
.footer__nav a { text-transform: uppercase; }
@media (hover: hover) { .footer__nav a:hover span { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1.5px; } }

/* ---------- Header common ---------- */
.site-header { color: #fff; }
.site-header::before { content: ""; position: absolute; top: 0; bottom: 0; z-index: -1; left: calc(50% - var(--vw) / 2); right: calc(50% - var(--vw) / 2); background: var(--blue); }
.event-meta { display: flex; align-items: flex-start; white-space: nowrap; line-height: 1.2; }
.event-meta__dates, .event-meta__venue { display: flex; flex-direction: column; }
.event-meta__dates { font-weight: 900; }
.event-meta__divider, .em-small-div { flex: none; display: block; background: #fff; }
.em-venue { font-weight: 900; }
.em-city, .em-region { font-weight: 300; }
.em-row { display: flex; align-items: flex-start; }
.menu-btn { position: relative; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.menu-btn__bars { display: flex; flex-direction: column; }
.menu-btn__bars i { display: block; background: #fff; border-radius: 1px; }

/* ===================================================================
   DESKTOP  ≥ 1024px  (design: 1920 wide)
   =================================================================== */
@media (min-width: 1024px) {
  .page { --dw: 1920; --u: calc(min(var(--vw), 2560px) / 1920); }
  .m-only { display: none !important; }

  /* Header (Figma 117:850) */
  .site-header {
    position: absolute; left: 0; top: 0; z-index: 4; width: calc(1920 * var(--u)); height: calc(227 * var(--u));
    display: flex; align-items: flex-start; padding: calc(40 * var(--u)) calc(79.1 * var(--u)) 0 calc(68 * var(--u));
  }
  .site-header .logo { --lw: calc(230 * var(--u)); }
  .event-meta { gap: calc(8.3 * var(--u)); margin-left: calc(63.204 * var(--u)); padding-top: calc(30.338 * var(--u)); }
  .event-meta__dates { padding-top: calc(.142 * var(--u)); }
  .em-month { font-size: calc(39.8 * var(--u)); margin-bottom: calc(-11.26 * var(--u)); }
  .em-days { font-size: calc(30.7 * var(--u)); margin-bottom: calc(-11.26 * var(--u)); }
  .em-year { font-size: calc(33.5 * var(--u)); }
  .event-meta__divider { margin-top: calc(9.7 * var(--u)); width: calc(1.5 * var(--u)); height: calc(82 * var(--u)); }
  .em-venue { font-size: calc(39.6 * var(--u)); margin-bottom: calc(-9 * var(--u)); }
  .em-city { font-size: calc(30.5 * var(--u)); margin-bottom: calc(-9 * var(--u)); }
  .em-row { gap: calc(7.2 * var(--u)); }
  .em-edition { font-size: calc(30.6 * var(--u)); }
  .em-small-div { margin-top: calc(6.7 * var(--u)); width: calc(1.2 * var(--u)); height: calc(20 * var(--u)); }
  .em-region { font-size: calc(25.3 * var(--u)); padding: calc(4.7 * var(--u)) 0 0 calc(2.829 * var(--u)); }
  .site-header__spacer { flex: 1; }
  .site-header__actions { position: relative; display: flex; flex-direction: column; gap: calc(31 * var(--u)); padding-top: calc(8 * var(--u)); }
  .site-header__top { display: flex; align-items: flex-start; width: calc(735 * var(--u)); }
  .site-header__gap { flex: 1; }
  .menu-btn { position: absolute; right: 0; top: calc(30 * var(--u)); margin-top: 0; width: calc(25 * var(--u)); height: calc(26 * var(--u)); }
  .menu-btn::after { content: ""; position: absolute; inset: calc(-12 * var(--u)); }
  .menu-btn__bars { gap: calc(7 * var(--u)); }
  .menu-btn__bars i { width: calc(25 * var(--u)); height: calc(4 * var(--u)); }
  .main-nav { display: flex; gap: calc(84.97 * var(--u)); padding-left: calc(1 * var(--u)); }
  .main-nav a { position: relative; font-size: calc(30.4 * var(--u)); line-height: 1.2; text-transform: uppercase; }
  .main-nav a::after { content: ""; position: absolute; left: 0; right: 0; top: calc(42 * var(--u)); height: calc(2 * var(--u)); border-radius: 1px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
  .main-nav a.is-active::after { transform: none; }
  @media (hover: hover) { .main-nav a:hover::after { transform: none; } }

  /* Register buttons */
  .btn-reg--header { width: calc(423 * var(--u)); height: calc(74 * var(--u)); }
  .btn-reg--header .btn-reg__outline { left: calc(4 * var(--u)); top: 0; width: calc(415 * var(--u)); height: calc(67 * var(--u)); border-width: calc(1.5 * var(--u)); }
  .btn-reg--header .btn-reg__pill { top: calc(6 * var(--u)); width: calc(423 * var(--u)); height: calc(68 * var(--u)); border-width: calc(1.5 * var(--u)); font-size: calc(45.4 * var(--u)); }
  .btn-reg--cta { width: calc(500 * var(--u)); height: calc(98 * var(--u)); margin-top: calc(36 * var(--u)); }
  .btn-reg--cta .btn-reg__outline { left: 0; top: 0; width: calc(500 * var(--u)); height: calc(90 * var(--u)); border-width: calc(2.5 * var(--u)); }
  .btn-reg--cta .btn-reg__pill { top: calc(8 * var(--u)); width: calc(500 * var(--u)); height: calc(90 * var(--u)); border-width: calc(2.5 * var(--u)); font-size: calc(50 * var(--u)); letter-spacing: calc(-1 * var(--u)); }

  .btn-sec { gap: calc(12 * var(--u)); padding: calc(20 * var(--u)) calc(30 * var(--u)) calc(20 * var(--u)) calc(36 * var(--u)); border-radius: calc(40 * var(--u)); font-size: max(12px, calc(18 * var(--u))); box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) calc(-4 * var(--u)) rgba(35, 74, 220, .3); }

  /* Section heading (Figma 116:838 / 116:843) */
  .sec-heading { gap: calc(6 * var(--u)); }
  .sec-heading h2 { gap: calc(6 * var(--u)); }
  .sec-heading__label { font-size: calc(56 * var(--u)); line-height: 1.2; }
  .sec-heading__title { font-size: calc(64 * var(--u)); line-height: 1.2; }
  .sec-heading__sub { width: calc(451 * var(--u)); padding-top: calc(14 * var(--u)); font-size: max(13px, calc(20 * var(--u))); line-height: 1.4; }

  /* 01/02 · Hero (Figma 117:814, 1089 tall incl. header) */
  .hero { position: relative; height: calc(1089 * var(--u)); }
  .hero__bg::before { left: 0; top: 0; width: calc(1920.5 * var(--u)); height: calc(1080.5 * var(--u)); background-image: url("../assets/img/maze-pattern.png"); }
  .hero__lettering { position: absolute; left: 0; top: calc(282 * var(--u)); width: calc(1920 * var(--u)); height: calc(899 * var(--u)); }
  .hero__art { width: 100%; height: 100%; overflow: visible; }
  .hero__info { position: absolute; left: calc(252 * var(--u)); top: calc(999 * var(--u)); z-index: 3; }
  .hero__row { display: flex; align-items: center; gap: calc(133 * var(--u)); }
  .hero__edition { font-weight: 500; font-size: calc(34 * var(--u)); line-height: 1.2; white-space: nowrap; }
  .hero__lockup { display: flex; align-items: center; gap: calc(21 * var(--u)); }
  .wordmark { width: calc(314.54 * var(--u)); height: calc(62.61 * var(--u)); flex: none; }
  .hero__tagline { font-weight: 900; font-size: calc(30 * var(--u)); letter-spacing: calc(2.7 * var(--u)); line-height: 1.2; white-space: nowrap; }

  /* 03 · About (Figma 117:815, 1187 tall) */
  .about { position: relative; height: calc(1187 * var(--u)); }
  .about__bg::before { left: calc(-87.94 * var(--u)); top: 0; width: calc(2104 * var(--u)); height: calc(1183 * var(--u)); background-image: url("../assets/svg/maze-about-desktop.svg"); }
  .about__text { position: absolute; left: calc(161 * var(--u)); top: calc(231 * var(--u)); z-index: 3; width: calc(610 * var(--u)); display: flex; flex-direction: column; gap: calc(24 * var(--u)); }
  .about__body { font-weight: 500; font-size: max(13px, calc(20 * var(--u))); line-height: 1.3; color: var(--red); }
  .about__body--lead { font-size: max(15px, calc(26 * var(--u))); line-height: 1.35; }
  .sec-heading__ml { margin-top: calc(4 * var(--u)); font-size: calc(30 * var(--u)); line-height: 1.5; }
  .about__stage { position: absolute; left: calc(824 * var(--u)); top: calc(242 * var(--u)); width: calc(1001 * var(--u)); height: calc(751 * var(--u)); z-index: 3; }
  .about__figure, .about__figure img { width: 100%; height: 100%; }
  .about__figure img { object-fit: cover; }

  /* 04 · Speakers (Figma 117:816, 1198 tall) */
  .speakers { position: relative; height: calc(1198 * var(--u)); background: #fff; }
  .speakers__bg::before { left: 0; top: calc(-169.04 * var(--u)); width: calc(1920 * var(--u)); height: calc(1080 * var(--u)); background-image: url("../assets/svg/maze-speakers-desktop.svg"); }
  .speakers__content { position: absolute; left: calc(215 * var(--u)); top: calc(96 * var(--u)); width: calc(1490 * var(--u)); z-index: 3; display: flex; flex-direction: column; gap: calc(36 * var(--u)); }
  .speaker-grid { display: flex; flex-wrap: wrap; gap: calc(20 * var(--u)) calc(34 * var(--u)); }
  .speaker { width: calc(347 * var(--u)); height: calc(356 * var(--u)); border-radius: calc(24 * var(--u)); box-shadow: 0 calc(12 * var(--u)) calc(28 * var(--u)) calc(-4 * var(--u)) rgba(35, 74, 220, .14); }
  .speaker__media { height: calc(280 * var(--u)); }
  .speaker__media--initials span { font-size: calc(56 * var(--u)); }
  .speaker__name { padding: calc(8 * var(--u)) calc(18 * var(--u)); font-size: max(12px, calc(20 * var(--u))); line-height: 1.16; }
  .speaker__name span { white-space: nowrap; }
  @media (hover: hover) { .speaker:hover { box-shadow: 0 calc(18 * var(--u)) calc(36 * var(--u)) calc(-6 * var(--u)) rgba(35, 74, 220, .24); } }
  .speakers__actions { display: flex; justify-content: center; padding-top: calc(10 * var(--u)); }

  /* 05 · Sponsors (Figma 552:1651, 1443 tall) */
  .sponsors { position: relative; height: calc(1443 * var(--u)); background: #fff; }
  .sponsors__bg::before { left: calc(-87.94 * var(--u)); top: calc(56 * var(--u)); width: calc(2104 * var(--u)); height: calc(1769 * var(--u)); background-image: url("../assets/svg/maze-sponsors-desktop.svg"); }
  .sponsors__content { position: absolute; left: calc(215 * var(--u)); top: calc(120 * var(--u)); width: calc(1490 * var(--u)); z-index: 3; display: flex; flex-direction: column; gap: calc(56 * var(--u)); }
  .sponsor-panel { border-radius: calc(24 * var(--u)); padding: calc(32 * var(--u)); }
  .sponsor-slot { aspect-ratio: 1423 / 883.4; border-radius: calc(12 * var(--u)); }
  .sponsor-slot img { object-fit: cover; }

  /* 06 · Registration CTA (Figma 117:818, 760 tall) */
  .cta { position: relative; height: calc(760 * var(--u)); background: #fff; }
  .cta__bg::before { left: 0; top: 0; width: calc(1920.5 * var(--u)); height: calc(1080.5 * var(--u)); background-image: url("../assets/img/maze-pattern.png"); opacity: .4; }
  .cta__panel {
    position: absolute; left: calc(215 * var(--u)); top: calc(112 * var(--u)); width: calc(1490 * var(--u)); z-index: 3;
    display: flex; flex-direction: column; align-items: center; gap: calc(20 * var(--u));
    padding: calc(76 * var(--u)) calc(80 * var(--u)) calc(84 * var(--u)); border-radius: calc(40 * var(--u)); background: var(--blue); color: #fff; text-align: center;
    box-shadow: 0 calc(16 * var(--u)) calc(40 * var(--u)) calc(-8 * var(--u)) rgba(35, 74, 220, .3);
  }
  .chip { gap: calc(14 * var(--u)); padding: calc(10 * var(--u)) calc(22 * var(--u)); font-size: max(11px, calc(16 * var(--u))); letter-spacing: calc(3 * var(--u)); }
  .cta__title { margin-top: calc(12 * var(--u)); font-weight: 500; font-size: calc(64 * var(--u)); line-height: 1.2; }
  .cta__text { max-width: calc(640 * var(--u)); font-weight: 500; font-size: max(13px, calc(20 * var(--u))); line-height: 1.4; color: var(--inv-muted); }

  /* 07 · Footer (Figma 117:819, 610 tall) */
  .site-footer { height: calc(610 * var(--u)); }
  .footer__bg::before { left: calc(-29.95 * var(--u)); top: calc(-12.99 * var(--u)); width: calc(1920 * var(--u)); height: calc(1080 * var(--u)); background-image: url("../assets/svg/maze-footer-desktop.svg"); }
  .footer__main { position: absolute; left: calc(215 * var(--u)); top: calc(80 * var(--u)); width: calc(1490 * var(--u)); display: flex; justify-content: space-between; align-items: flex-start; }
  .footer__brand { display: flex; flex-direction: column; gap: calc(24 * var(--u)); }
  .footer__brand .logo { --lw: calc(230 * var(--u)); }
  .footer__info { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
  .footer__tagline { font-size: calc(26 * var(--u)); line-height: 1.15; white-space: nowrap; }
  .footer__details { display: flex; flex-direction: column; gap: calc(2 * var(--u)); font-size: max(12px, calc(18 * var(--u))); line-height: 1.2; white-space: nowrap; }
  .footer__nav { display: flex; flex-direction: column; gap: calc(18 * var(--u)); padding-top: calc(8 * var(--u)); }
  .footer__nav ul { display: flex; flex-direction: column; gap: calc(18 * var(--u)); }
  .footer__label { font-size: max(11px, calc(16 * var(--u))); letter-spacing: calc(3 * var(--u)); }
  .footer__nav a { font-size: max(13px, calc(22 * var(--u))); line-height: 1.2; }
  .footer__copy { position: absolute; left: calc(215 * var(--u)); top: calc(550 * var(--u)); width: calc(1490 * var(--u)); display: flex; justify-content: space-between; font-size: max(12px, calc(16 * var(--u))); line-height: 1.2; }

  .venue-card { width: calc(620 * var(--u)); border-radius: calc(24 * var(--u)); box-shadow: 0 calc(12 * var(--u)) calc(28 * var(--u)) calc(-4 * var(--u)) rgba(13, 23, 79, .25); }
  .venue-card__map { height: calc(210 * var(--u)); }
  .venue-card__halo { left: calc(278 * var(--u)); top: calc(128 * var(--u)); }
  .venue-card__pin { left: calc(288 * var(--u)); top: calc(84 * var(--u)); }
  .venue-card__label { left: calc(222.5 * var(--u)); top: calc(36 * var(--u)); font-size: max(11px, calc(15 * var(--u))); }
  .venue-card__info { display: flex; align-items: center; justify-content: space-between; padding: calc(22 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u)) calc(28 * var(--u)); }
  .venue-card__kicker { font-size: max(10px, calc(14 * var(--u))); letter-spacing: calc(3 * var(--u)); }
  .venue-card__name { font-size: calc(28 * var(--u)); line-height: 1.2; }
  .venue-card__addr { font-size: max(12px, calc(18 * var(--u))); line-height: 1.2; }

  /* Editions dropdown (desktop) */
  .nav-dd { position: relative; display: flex; align-items: center; }
  .nav-dd__btn {
    position: relative; display: inline-flex; align-items: center; gap: calc(7 * var(--u));
    font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
    font-size: calc(30.4 * var(--u)); line-height: 1.2; text-transform: uppercase;
  }
  .nav-dd__btn::after { content: ""; position: absolute; left: 0; right: calc(29 * var(--u)); top: calc(42 * var(--u)); height: calc(2 * var(--u)); border-radius: 1px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
  .nav-dd__chev { width: calc(22 * var(--u)); height: calc(22 * var(--u)); flex: none; transition: transform .25s ease; }
  .nav-dd.is-open .nav-dd__chev { transform: rotate(90deg); }
  .nav-dd.is-open .nav-dd__btn::after { transform: none; }
  .nav-dd__menu {
    position: absolute; top: calc(100% + 15 * var(--u)); left: calc(-12 * var(--u)); min-width: calc(188 * var(--u)); list-style: none;
    display: flex; flex-direction: column; gap: calc(2 * var(--u)); padding: calc(10 * var(--u));
    background: #fff; border-radius: calc(14 * var(--u));
    box-shadow: 0 calc(22 * var(--u)) calc(48 * var(--u)) calc(-12 * var(--u)) rgba(10, 22, 70, .45);
    opacity: 0; visibility: hidden; transform: translateY(calc(6 * var(--u)));
    transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 60;
  }
  .nav-dd.is-open .nav-dd__menu { opacity: 1; visibility: visible; transform: none; }
  .nav-dd__menu a {
    display: block; padding: calc(10 * var(--u)) calc(16 * var(--u)); border-radius: calc(9 * var(--u));
    font-size: calc(26 * var(--u)); line-height: 1.2; color: var(--blue); white-space: nowrap;
  }
  .nav-dd__menu a::after { content: none; }
  @media (hover: hover) {
    .nav-dd:hover .nav-dd__menu { opacity: 1; visibility: visible; transform: none; }
    .nav-dd:hover .nav-dd__chev { transform: rotate(90deg); }
    .nav-dd:hover .nav-dd__btn::after { transform: none; }
    .nav-dd__menu a:hover { background: rgba(35, 74, 220, .1); }
  }

  /* Pipe network overlay */
  .pipes { position: absolute; left: 0; top: 0; width: calc(1920 * var(--u)); height: calc(2276 * var(--u)); overflow: visible; }
  .pinball { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
}

/* ===================================================================
   MOBILE  < 1024px  (design: 390 wide; scales up to a 540px column)
   =================================================================== */
@media (max-width: 1023.98px) {
  .page { --dw: 390; --u: calc(min(var(--vw), 540px) / 390); --botnav-h: calc(66 * var(--u) + env(safe-area-inset-bottom)); }
  .d-only { display: none !important; }

  /* Mobile bottom nav */
  .botnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    width: 100%; max-width: calc(540 * var(--u)); margin-inline: auto;
    display: flex; background: #fff;
    padding: calc(10 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u));
    padding-bottom: calc(8 * var(--u) + env(safe-area-inset-bottom));
    box-shadow: 0 calc(-2 * var(--u)) calc(24 * var(--u)) rgba(13, 23, 79, .1);
  }
  .botnav__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: calc(5 * var(--u)); color: #8b93b2; -webkit-tap-highlight-color: transparent; }
  .botnav__icon { display: flex; align-items: center; justify-content: center; width: calc(58 * var(--u)); height: calc(32 * var(--u)); border-radius: calc(16 * var(--u)); transition: background-color .2s ease; }
  .botnav__icon svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
  .botnav__label { font-size: calc(11 * var(--u)); font-weight: 500; line-height: 1; text-transform: uppercase; letter-spacing: calc(.3 * var(--u)); }
  .botnav__item.is-active { color: var(--blue); }
  .botnav__item.is-active .botnav__icon { background: var(--soft); }
  .botnav__item.is-active .botnav__label { font-weight: 900; }

  /* Header (Figma 185:2788) */
  .site-header { position: relative; z-index: 4; display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)) calc(20 * var(--u)); }
  .site-header .logo { --lw: calc(82.8 * var(--u)); }
  .event-meta { flex: 1; min-width: 0; flex-wrap: wrap; gap: calc(6 * var(--u)) calc(3.32 * var(--u)); margin-left: calc(4 * var(--u)); }
  .event-meta__dates { padding-top: calc(.057 * var(--u)); }
  .em-month { font-size: calc(15.9 * var(--u)); margin-bottom: calc(-4.504 * var(--u)); }
  .em-days { font-size: calc(12.3 * var(--u)); margin-bottom: calc(-4.504 * var(--u)); }
  .em-year { font-size: calc(13.4 * var(--u)); }
  .event-meta__divider { margin-top: calc(3.88 * var(--u)); width: calc(1 * var(--u)); height: calc(32.8 * var(--u)); }
  .em-venue { font-size: calc(15.8 * var(--u)); margin-bottom: calc(-3.6 * var(--u)); }
  .em-city { font-size: calc(12.2 * var(--u)); margin-bottom: calc(-3.6 * var(--u)); }
  .em-row { gap: calc(2.88 * var(--u)); }
  .em-edition { font-size: calc(12.2 * var(--u)); }
  .em-small-div { margin-top: calc(2.68 * var(--u)); width: calc(1 * var(--u)); height: calc(8 * var(--u)); }
  .em-region { font-size: calc(10.1 * var(--u)); padding: calc(1.88 * var(--u)) 0 0 calc(1.132 * var(--u)); }
  .site-header__spacer, .site-header__gap { display: none; }
  .menu-btn { width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(12 * var(--u)); }
  .menu-btn:active { background: rgba(255, 255, 255, .14); }
  .menu-btn__bars { gap: calc(6.16 * var(--u)); }
  .menu-btn__bars i { width: calc(22 * var(--u)); height: calc(3.52 * var(--u)); }

  /* Register / secondary buttons */
  .btn-reg--full, .btn-reg--cta { width: 100%; height: calc(62 * var(--u)); }
  .btn-reg--full .btn-reg__outline, .btn-reg--cta .btn-reg__outline { left: calc(4 * var(--u)); right: calc(4 * var(--u)); top: 0; height: calc(56 * var(--u)); border-width: calc(1.5 * var(--u)); }
  .btn-reg--full .btn-reg__pill, .btn-reg--cta .btn-reg__pill { left: 0; right: 0; top: calc(6 * var(--u)); height: calc(56 * var(--u)); border-width: calc(1.5 * var(--u)); font-size: calc(24 * var(--u)); letter-spacing: calc(-.24 * var(--u)); }
  .btn-reg--on-light .btn-reg__outline { border-color: var(--blue); }
  .btn-reg--cta { margin-top: calc(8 * var(--u)); }
  .btn-sec { width: 100%; max-width: calc(320 * var(--u)); justify-content: center; gap: calc(10 * var(--u)); padding: calc(14 * var(--u)) calc(20 * var(--u)) calc(14 * var(--u)) calc(24 * var(--u)); border-radius: 999px; font-size: calc(16 * var(--u)); }
  .btn-sec__label { flex: 1; text-align: center; }

  /* Section heading (Figma 136:420 / 136:425) */
  .sec-heading { gap: calc(4 * var(--u)); }
  .sec-heading h2 { gap: calc(4 * var(--u)); }
  .sec-heading__label { font-size: calc(32 * var(--u)); line-height: 1.1; }
  .sec-heading__title { font-size: calc(36 * var(--u)); line-height: 1.1; }
  .sec-heading__sub { padding-top: calc(8 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.5; }

  /* 02 · Hero (Figma 185:2793) */
  .hero { position: relative; display: flex; flex-direction: column; gap: calc(20 * var(--u)); padding: calc(16 * var(--u)) 0 calc(56 * var(--u)); }
  .hero__bg::before { inset: 0; background: url("../assets/img/maze-pattern.png") 0 0 / calc(1344.35 * var(--u)) calc(756.35 * var(--u)) repeat; }
  /* Clip to the Figma frame (390 × 558.48) like Figma does: the traced lettering's outer edges are
     slightly jagged and overshoot the box (y −1.4 / 559.9, x −1.4 / 391.4), which showed as white
     specks along the top and bottom bars when left visible. */
  .hero__lettering {
    /* --lh = lettering height (also leaves the 12 px gap above the bottom nav where the sticky Register button sits).
       Shrinks on short screens so the Register button (and the bottom nav)
       fit in the first view: 100svh − header 73.68 − hero gaps 52 − button 62 − 14 breathing room − bottom nav.
       Never taller than the Figma frame (558.48) and never smaller than 300 (≈54%). */
    --lh: clamp(calc(300 * var(--u)), calc(100vh - 201.68 * var(--u) - var(--botnav-h, 0px) - 12 * var(--u)), calc(558.48 * var(--u)));
    position: relative; width: calc(390 * var(--u)); height: var(--lh); overflow: hidden;
    clip-path: inset(calc(var(--lh) * 0.001074) 0 0 0);
  }
  @supports (height: 100svh) {
    .hero__lettering { --lh: clamp(calc(300 * var(--u)), calc(100svh - 201.68 * var(--u) - var(--botnav-h, 0px) - 12 * var(--u)), calc(558.48 * var(--u))); }
  }
  /* 780-wide viewBox centred on the stem (x 31.75): the SVG scales with --lh and the stem stays on the spine */
  /* Width may scale a little more than the height (up to --lx-max × the height scale, never past the
     Figma width) so a shrunken lettering still fills the screen instead of leaving a gap on the right.
     The stem (viewBox x 31.75) stays pinned on the spine. */
  .hero__art {
    --lx-max: 1.45;   /* 1.45 keeps the full Figma width (equal left/right margins) on all normal phones */
    --aw: min(calc(780 * var(--u)), calc(var(--lh) * var(--lx-max) * 1.396648));
    position: absolute; left: calc(31.75 * var(--u) - var(--aw) / 2); top: 0;
    width: var(--aw); height: calc(var(--lh) * 559 / 558.48); overflow: visible;
  }
  .hero__info { position: relative; display: flex; flex-direction: column; gap: calc(37 * var(--u)); padding: calc(16 * var(--u)) calc(40 * var(--u)) 0 calc(56 * var(--u)); }
  .mp--hero { left: calc(23 * var(--u)); top: calc(-24.48 * var(--u)); bottom: calc(-57 * var(--u)); }
  .hero__strip { position: relative; z-index: 3; display: flex; flex-direction: column; gap: calc(20 * var(--u)); }
  .hero__row { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8 * var(--u)) calc(12 * var(--u)); }
  .hero__edition { font-weight: 500; font-size: calc(20 * var(--u)); line-height: 1.25; white-space: nowrap; }
  .wordmark { width: calc(157.27 * var(--u)); height: calc(31.305 * var(--u)); }
  .hero__tagline { font-weight: 900; font-size: calc(18 * var(--u)); line-height: 1.25; letter-spacing: calc(1.08 * var(--u)); text-transform: uppercase; }
  .hero__when { display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
  .hero__date { font-weight: 900; font-size: calc(24 * var(--u)); line-height: 1.1; text-transform: uppercase; }
  .hero__venue { font-size: calc(16 * var(--u)); line-height: 1.5; }

  /* 03 · About (Figma 185:2827) */
  .about { position: relative; }
  .about__bg::before { top: 0; bottom: 0; left: calc(-40 * var(--u)); width: calc(883.68 * var(--u)); background: url("../assets/svg/maze-about-mobile.svg") 0 0 / calc(883.68 * var(--u)) calc(312.307 * var(--u)) repeat-y; }
  .about__text { position: relative; display: flex; flex-direction: column; gap: calc(24 * var(--u)); padding: calc(48 * var(--u)) calc(40 * var(--u)) 0 calc(56 * var(--u)); }
  .mp--spine { left: calc(23 * var(--u)); top: 0; bottom: 0; }
  .about__body { position: relative; z-index: 3; font-weight: 500; font-size: calc(16 * var(--u)); line-height: 1.5; color: var(--red); }
  .about__body--lead { font-size: calc(19 * var(--u)); line-height: 1.4; }
  .sec-heading__ml { margin-top: calc(2 * var(--u)); font-size: calc(18 * var(--u)); line-height: 1.5; }
  .about__stage { position: relative; padding: calc(48 * var(--u)) calc(40 * var(--u)) calc(48 * var(--u)) calc(56 * var(--u)); }
  .about__figure { position: relative; z-index: 3; aspect-ratio: 342 / 257; }
  .about__figure img { width: 100%; height: 100%; object-fit: cover; }
  .mps--into-turn { left: calc(23 * var(--u)); top: 0; width: calc(28.5 * var(--u)); height: calc(33 * var(--u)); }
  .mps--run-drop { left: calc(40 * var(--u)); top: calc(16.04 * var(--u)); width: calc(160.5 * var(--u)); height: calc(33.5 * var(--u)); }
  .mps--out { left: calc(22.5 * var(--u)); top: calc(243.04 * var(--u)); width: calc(33.5 * var(--u)); height: calc(38.5 * var(--u)); }
  .mp--below { left: calc(23 * var(--u)); bottom: 0; height: calc(44 * var(--u)); }
  .mp--branch { left: calc(31.5 * var(--u)); right: calc(25.5 * var(--u)); bottom: calc(14.5 * var(--u)); width: auto; height: calc(17 * var(--u)); }
  .mps--branch-turn { right: calc(7 * var(--u)); bottom: calc(-1 * var(--u)); width: calc(22.5 * var(--u)); height: calc(32.5 * var(--u)); }

  /* 04 · Speakers (Figma 185:2937) */
  .speakers { position: relative; background: #fff; }
  .speakers__bg::before { top: 0; bottom: 0; left: calc(-30 * var(--u)); width: calc(806.4 * var(--u)); background: url("../assets/svg/maze-speakers-mobile.svg") 0 0 / calc(806.4 * var(--u)) calc(523.414 * var(--u)) repeat-y; }
  .mp--right { left: calc(366 * var(--u)); top: 0; bottom: 0; }
  .speakers__content { position: relative; z-index: 3; display: flex; flex-direction: column; gap: calc(24 * var(--u)); padding: calc(48 * var(--u)) calc(40 * var(--u)) calc(48 * var(--u)) calc(56 * var(--u)); }
  .speaker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--u)); }
  .speaker { border-radius: calc(20 * var(--u)); box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) calc(-4 * var(--u)) rgba(35, 74, 220, .1); }
  .speaker__media { height: calc(176 * var(--u)); }
  .speaker__media--initials span { font-size: calc(40 * var(--u)); }
  .speaker__name { height: calc(60 * var(--u)); flex: none; padding: calc(8 * var(--u)) calc(12 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.25; }
  .speaker__name span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  .speakers__actions { display: flex; justify-content: center; padding-top: calc(8 * var(--u)); }

  /* 05 · Sponsors (Figma 314:5181) */
  .sponsors { position: relative; background: #fff; }
  .sponsors__bg::before { top: 0; bottom: 0; left: calc(-30 * var(--u)); width: calc(883.68 * var(--u)); background: url("../assets/svg/maze-sponsors-mobile.svg") 0 0 / calc(883.68 * var(--u)) calc(261.425 * var(--u)) repeat-y; }
  .sponsors__content { position: relative; z-index: 3; display: flex; flex-direction: column; gap: calc(24 * var(--u)); padding: calc(48 * var(--u)) calc(40 * var(--u)) calc(48 * var(--u)) calc(56 * var(--u)); }
  .sponsor-panel { border-radius: calc(16 * var(--u)); }
  /* Landscape artwork until the 1125 × 1584 portrait version exists (then use 294 / 413.95) */
  /* mobile artwork (assets/img/mobile-sponsors.jpg): the slot takes the image's own proportions */
  .sponsor-slot { aspect-ratio: auto; border-radius: calc(16 * var(--u)); }
  .sponsor-slot picture, .sponsor-slot img { height: auto; }

  /* 06 · Registration CTA (Figma 185:3304) */
  .cta { position: relative; padding: calc(40 * var(--u)) calc(40 * var(--u)) calc(40 * var(--u)) calc(56 * var(--u)); background: #fff; }
  .cta__bg::before { inset: 0; background: url("../assets/img/maze-pattern.png") 0 0 / calc(1344.35 * var(--u)) calc(756.35 * var(--u)) repeat; }
  .mps--cta-right { left: calc(350 * var(--u)); top: 0; width: calc(33 * var(--u)); height: calc(88.5 * var(--u)); }
  .mps--cta-inner { left: calc(23 * var(--u)); top: calc(62 * var(--u)); width: calc(33 * var(--u)); height: calc(26.5 * var(--u)); }
  .cta__panel {
    position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: calc(16 * var(--u));
    padding: calc(48 * var(--u)) calc(16 * var(--u)) calc(28 * var(--u)); border-radius: calc(24 * var(--u)); background: var(--blue); color: #fff; text-align: center;
    box-shadow: 0 calc(6 * var(--u)) calc(8 * var(--u)) rgba(35, 74, 220, .1);
  }
  .chip { padding: calc(8 * var(--u)) calc(10 * var(--u)); font-size: calc(13 * var(--u)); letter-spacing: calc(2 * var(--u)); }
  .cta__title { font-weight: 500; font-size: calc(36 * var(--u)); line-height: 1.1; }
  .cta__text { font-weight: 500; font-size: calc(16 * var(--u)); line-height: 1.5; color: var(--inv-muted); }
  .cta__when { font-size: calc(14 * var(--u)); line-height: 1.4; }

  /* 07 · Footer (Figma 185:3316) */
  .site-footer { padding: calc(40 * var(--u)) calc(40 * var(--u)) calc(48 * var(--u) + var(--botnav-h)) calc(56 * var(--u)); }
  .footer__bg::before { top: 0; bottom: 0; left: calc(-20 * var(--u)); width: calc(960 * var(--u)); background: url("../assets/svg/maze-footer-mobile.svg") 0 0 / calc(960 * var(--u)) calc(438.115 * var(--u)) repeat-y; }
  .mp--footer-spine { left: calc(23 * var(--u)); top: 0; bottom: calc(40 * var(--u) + var(--botnav-h)); }
  .mps--footer-turn { left: calc(23 * var(--u)); bottom: calc(5.5 * var(--u) + var(--botnav-h)); width: calc(32.5 * var(--u)); height: calc(38.5 * var(--u)); }
  .mp--base { left: calc(49 * var(--u)); right: 0; bottom: calc(5.8 * var(--u) + var(--botnav-h)); width: auto; height: calc(17 * var(--u)); }
  .footer__main { display: flex; flex-direction: column; gap: calc(28 * var(--u)); }
  .footer__brand { display: flex; flex-direction: column; gap: calc(14 * var(--u)); }
  .footer__brand .logo { --lw: calc(126.5 * var(--u)); }
  .footer__info { display: flex; flex-direction: column; gap: calc(14 * var(--u)); }
  .footer__tagline { font-size: calc(18 * var(--u)); line-height: 1.25; letter-spacing: calc(1.08 * var(--u)); }
  .footer__details { display: flex; flex-direction: column; gap: calc(2 * var(--u)); font-size: calc(14 * var(--u)); line-height: 1.4; }
  .footer__nav { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
  .footer__label { font-size: calc(13 * var(--u)); letter-spacing: calc(2 * var(--u)); }
  .footer__nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--u)); }
  .footer__nav a { display: flex; align-items: center; gap: calc(12 * var(--u)); height: calc(44 * var(--u)); padding: 0 calc(8 * var(--u)); border-radius: calc(10 * var(--u)); font-size: calc(16 * var(--u)); letter-spacing: calc(1 * var(--u)); line-height: 1.2; }
  .footer__nav a span { flex: 1; }
  .footer__nav a svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); flex: none; }
  .footer__nav a:active { background: rgba(35, 74, 220, .08); }
  .venue-card { width: 100%; border-radius: calc(20 * var(--u)); box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) calc(-4 * var(--u)) rgba(35, 74, 220, .1); }
  .venue-card__map { height: calc(160 * var(--u)); }
  .venue-card__halo { left: calc(50% + calc(1.5 * var(--u))); top: calc(50% + calc(29 * var(--u))); transform: translate(-50%, -50%); }
  .venue-card__pin { left: calc(50% + calc(1.5 * var(--u))); top: calc(50% - calc(2.5 * var(--u))); transform: translate(-50%, -50%); }
  .venue-card__label { left: calc(50% + calc(1.5 * var(--u))); top: calc(12 * var(--u)); transform: translateX(-50%); font-size: calc(15 * var(--u)); }
  .venue-card__info { display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(20 * var(--u)); }
  .venue-card__kicker { font-size: calc(13 * var(--u)); letter-spacing: calc(2 * var(--u)); }
  .venue-card__name { font-size: calc(20 * var(--u)); line-height: 1.25; }
  .venue-card__addr { font-size: calc(14 * var(--u)); line-height: 1.4; }
  .venue-card .btn-sec { max-width: none; }
  .footer__divider { margin: calc(28 * var(--u)) 0 0; height: calc(1.5 * var(--u)); border: 0; background: var(--divider); }
  .footer__copy { margin-top: calc(28 * var(--u)); display: flex; flex-direction: column; gap: calc(2 * var(--u)); font-size: calc(14 * var(--u)); line-height: 1.4; }

  .pinball { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
}

/* ===================================================================
   Menu overlay (Figma 140:873) — mobile spec, centred column on desktop
   =================================================================== */
.menu {
  --u: calc(min(var(--vw), 540px) / 390);
  position: fixed; inset: 0; z-index: 100; overflow-y: auto; overscroll-behavior: contain;
  display: flex; justify-content: center; background: var(--blue); color: #fff;
  opacity: 0; transition: opacity .25s ease;
}
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }
.menu__inner { width: min(100%, calc(390 * var(--u))); min-height: 100%; display: flex; flex-direction: column; }
.menu__top { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)) calc(20 * var(--u)); }
.menu__top .logo { --lw: calc(82.8 * var(--u)); }
.menu__gap { flex: 1; }
.icon-btn { display: flex; align-items: center; justify-content: center; width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(12 * var(--u)); color: #fff; -webkit-tap-highlight-color: transparent; }
.icon-btn svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.icon-btn:active { background: rgba(255, 255, 255, .14); }
.menu__nav { display: flex; flex-direction: column; gap: calc(4 * var(--u)); padding: calc(16 * var(--u)) calc(20 * var(--u)) 0; }
.menu__link {
  display: flex; align-items: center; gap: calc(12 * var(--u)); height: calc(56 * var(--u)); padding: 0 calc(8 * var(--u)) 0 calc(12 * var(--u)); border-radius: calc(10 * var(--u));
  font-size: calc(26 * var(--u)); line-height: 1.2; text-transform: uppercase;
  opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease, background-color .2s ease;
}
.menu.is-open .menu__link { opacity: 1; transform: none; }
.menu.is-open .menu__link:nth-child(2) { transition-delay: .04s; }
.menu.is-open .menu__link:nth-child(3) { transition-delay: .08s; }
.menu.is-open .menu__link:nth-child(4) { transition-delay: .12s; }
.menu.is-open .menu__link:nth-child(5) { transition-delay: .16s; }
.menu__link span { flex: 1; }
.menu__link svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); flex: none; }
.menu__ind { display: none; flex: none; width: calc(4 * var(--u)); height: calc(28 * var(--u)); border-radius: 2px; background: var(--red); }
.menu__link.is-active .menu__ind { display: block; }
.menu__link:active { background: rgba(255, 255, 255, .14); }
@media (hover: hover) { .menu__link:hover { background: rgba(255, 255, 255, .08); } }
.menu__link--toggle { width: 100%; font-family: inherit; font-weight: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; text-align: left; cursor: pointer; }
.menu__chev { width: calc(20 * var(--u)); height: calc(20 * var(--u)); flex: none; transition: transform .25s ease; }
.menu__group.is-open .menu__chev { transform: rotate(90deg); }
.menu__sub { overflow: hidden; max-height: 0; transition: max-height .3s ease; }
.menu__group.is-open .menu__sub { max-height: calc(360 * var(--u)); }
.menu__sublink { display: flex; align-items: center; height: calc(48 * var(--u)); margin: calc(2 * var(--u)) 0 0 calc(28 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(10 * var(--u)); font-size: calc(22 * var(--u)); color: rgba(255, 255, 255, .82); }
.menu__sublink:active { background: rgba(255, 255, 255, .14); }
@media (hover: hover) { .menu__sublink:hover { background: rgba(255, 255, 255, .08); color: #fff; } }
.menu__actions { margin-top: auto; display: flex; flex-direction: column; gap: calc(16 * var(--u)); padding: calc(32 * var(--u)) calc(20 * var(--u)) calc(32 * var(--u)); }
.menu__meta { font-size: calc(14 * var(--u)); line-height: 1.4; color: var(--inv-muted); }

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

/* Register button inside the menu (full width, on brand) — needed at every breakpoint */
.menu .btn-reg--full { width: 100%; height: calc(62 * var(--u)); }
.menu .btn-reg--full .btn-reg__outline { left: calc(4 * var(--u)); right: calc(4 * var(--u)); top: 0; height: calc(56 * var(--u)); border-width: calc(1.5 * var(--u)); }
.menu .btn-reg--full .btn-reg__pill { left: 0; right: 0; top: calc(6 * var(--u)); height: calc(56 * var(--u)); border-width: calc(1.5 * var(--u)); font-size: calc(24 * var(--u)); letter-spacing: calc(-.24 * var(--u)); }

/* ===================================================================
   Menu overlay — DESKTOP full-screen (Figma "Menu Open")
   =================================================================== */
@media (min-width: 1024px) {
  .menu { --u: calc(min(var(--vw), 2560px) / 1920); justify-content: flex-start; }
  .menu__inner { width: 100%; min-height: 100vh; position: relative; padding: calc(40 * var(--u)) calc(79 * var(--u)) calc(56 * var(--u)) calc(68 * var(--u)); }

  /* Top row: logo left · close right */
  .menu__top { padding: 0; }
  .menu__top .logo { --lw: calc(230 * var(--u)); }
  .menu .icon-btn { width: calc(60 * var(--u)); height: calc(60 * var(--u)); border-radius: calc(14 * var(--u)); }
  .menu .icon-btn svg { width: calc(32 * var(--u)); height: calc(32 * var(--u)); }

  /* Nav pinned bottom-left, large type */
  .menu__nav { position: absolute; left: calc(68 * var(--u)); bottom: calc(120 * var(--u)); width: auto; padding: 0; gap: calc(6 * var(--u)); }
  .menu__link { height: auto; padding: calc(10 * var(--u)) calc(28 * var(--u)); gap: calc(22 * var(--u)); font-size: calc(64 * var(--u)); border-radius: calc(18 * var(--u)); transition: background-color .2s ease; }
  .menu__link span { flex: none; }
  .menu__link svg { width: calc(32 * var(--u)); height: calc(32 * var(--u)); opacity: .5; transition: opacity .2s ease; }
  .menu__link.is-active svg { opacity: 1; }
  .menu__ind { width: calc(6 * var(--u)); height: calc(52 * var(--u)); border-radius: calc(3 * var(--u)); }
  @media (hover: hover) { .menu__link:hover { background: rgba(255, 255, 255, .12); } .menu__link:hover svg { opacity: 1; } }
  .menu__link:active { background: rgba(255, 255, 255, .16); }

  /* Editions in the overlay too: same large item; its years open as a row of pills */
  .menu__link--toggle { width: auto; }
  .menu__chev { width: calc(32 * var(--u)); height: calc(32 * var(--u)); opacity: .5; }
  .menu__group.is-open .menu__chev, .menu__link--toggle:hover .menu__chev { opacity: 1; }
  .menu__sub { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)) calc(12 * var(--u)); padding: 0 0 0 calc(28 * var(--u)); }
  .menu__group.is-open .menu__sub { max-height: calc(200 * var(--u)); padding-top: calc(6 * var(--u)); padding-bottom: calc(6 * var(--u)); }
  .menu__sublink { height: auto; margin: 0; padding: calc(8 * var(--u)) calc(20 * var(--u)); font-size: calc(28 * var(--u)); line-height: 1.2; border: calc(1.5 * var(--u)) solid rgba(255, 255, 255, .35); border-radius: 999px; }
  @media (hover: hover) { .menu__sublink:hover { background: #fff; color: var(--blue); border-color: #fff; } }

  /* Register + meta pinned bottom-right */
  .menu__actions { position: absolute; right: calc(79 * var(--u)); bottom: calc(64 * var(--u)); width: calc(300 * var(--u)); align-items: flex-end; gap: calc(16 * var(--u)); padding: 0; margin: 0; }
  .menu .btn-reg--full { width: calc(300 * var(--u)); height: calc(74 * var(--u)); }
  .menu .btn-reg--full .btn-reg__outline { left: calc(4 * var(--u)); right: calc(4 * var(--u)); top: 0; height: calc(67 * var(--u)); border-width: calc(1.5 * var(--u)); }
  .menu .btn-reg--full .btn-reg__pill { left: 0; right: 0; top: calc(6 * var(--u)); height: calc(68 * var(--u)); border-width: calc(1.5 * var(--u)); font-size: calc(32 * var(--u)); letter-spacing: calc(-.3 * var(--u)); }
  .menu__meta { width: calc(300 * var(--u)); text-align: right; font-size: calc(18 * var(--u)); line-height: 1.5; }
}

/* ==========================================================================
   Speakers listing page (speakers.html)
   ========================================================================== */
.spk-page { position: relative; }
.spk-listing { position: relative; background: var(--pale); overflow: hidden; }
.spk-listing::before { /* faint maze texture */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background: url("../assets/img/maze-pattern.png") 0 0 / calc(1280 * var(--u)) auto repeat;
}
.spk-listing__inner { position: relative; z-index: 3; margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.spk-title { font-weight: 900; color: var(--blue); text-transform: uppercase; text-align: center; letter-spacing: -.01em; line-height: 1.1; }

.spk-searchwrap { display: flex; flex-direction: column; }
.spk-search { position: relative; display: flex; align-items: center; width: 100%; background: #fff; border: calc(1.5 * var(--u)) solid var(--card-border); border-radius: 999px; transition: border-color .2s ease, box-shadow .2s ease; }
.spk-search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 calc(4 * var(--u)) rgba(35, 74, 220, .14); }
.spk-search__icon { flex: none; color: var(--muted); }
.spk-search__input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: var(--blue); outline: none; }
.spk-search__input::placeholder { color: var(--muted); }
.spk-search__clear { flex: none; display: none; align-items: center; justify-content: center; color: var(--muted); border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.spk-search.has-text .spk-search__clear { display: flex; }
@media (hover: hover) { .spk-search__clear:hover { color: var(--blue); background: rgba(35, 74, 220, .08); } }
.spk-count { color: var(--blue-2); font-weight: 500; }

.spk-grid { display: grid; width: 100%; list-style: none; }
.spk-card { position: relative; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: calc(1.5 * var(--u)) solid var(--card-border); transition: border-color .2s ease-out, box-shadow .2s ease-out; }
.spk-card[hidden] { display: none; }
.spk-card__media { position: relative; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--pale); }
.spk-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.spk-card__media--blue { background: var(--blue); }
.spk-card__media--red { background: var(--red); }
.spk-card__initials { color: #fff; font-weight: 900; line-height: 1.2; }
.spk-card__body { display: flex; flex-direction: column; flex: 1; }
.spk-card__name { font-weight: 500; color: var(--blue); }
.spk-card__bio { color: var(--deep); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.spk-card__link { margin-top: auto; display: inline-flex; align-items: center; align-self: flex-start; color: var(--blue-2); font-weight: 500; line-height: 1.2; text-underline-offset: .2em; transition: color .2s ease-out; }
.spk-card__link svg { flex: none; transition: transform .2s ease-out; }
/* the whole card opens the speaker page: the "View profile" link covers the card */
.spk-card { cursor: pointer; }
.spk-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.spk-card__link:focus-visible { outline: none; }
.spk-card:has(.spk-card__link:focus-visible) { outline: 3px solid var(--red); outline-offset: 3px; }
@media (hover: hover) {
  /* Figma Speaker Card / Listing — Hover: blue outline + Shadow/Panel, cue blue + underline, arrow nudged NE */
  .spk-card:hover { border-color: var(--blue); box-shadow: 0 calc(16 * var(--u)) calc(40 * var(--u)) calc(-8 * var(--u)) rgba(35, 74, 220, .3); }
  .spk-card:hover .spk-card__link { color: var(--blue); text-decoration: underline; }
  .spk-card:hover .spk-card__link svg { transform: translate(2px, -2px); }
}

/* Empty state — shown when no matches */
.spk-empty { display: none; flex-direction: column; align-items: center; text-align: center; width: 100%; border: calc(2 * var(--u)) dashed var(--ph-border); background: var(--ph-surface); }
.spk-listing.is-empty .spk-grid { display: none; }
.spk-listing.is-empty .spk-empty { display: flex; }
.spk-empty__icon { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: var(--muted); box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) calc(-4 * var(--u)) rgba(35, 74, 220, .18); }
.spk-empty__title { color: var(--blue); font-weight: 500; }

/* Primary pill button (empty-state clear, load more) */
.spk-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--blue); color: #fff; font-weight: 500; line-height: 1.2; border-radius: 999px; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: background-color .2s ease; }
.spk-btn svg { flex: none; transition: transform .2s ease; }
@media (hover: hover) { .spk-btn:hover { background: var(--deep); } .spk-btn:hover svg { transform: translateX(3px); } }
.spk-btn:active { background: var(--deep); }

.spk-more { display: none; justify-content: center; width: 100%; }
.spk-more.is-shown { display: flex; }

/* Desktop left rail + scroll-linked ball (d-only; hidden on mobile) */
.spk-rails { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.spk-rail { position: absolute; left: calc(14 * var(--u)); top: calc(210 * var(--u)); bottom: calc(218 * var(--u)); width: calc(52 * var(--u)); background: var(--blue); }
.spk-rail__turn { position: absolute; left: calc(14 * var(--u)); bottom: calc(90 * var(--u)); width: calc(1860 * var(--u)); height: calc(130 * var(--u)); overflow: visible; }
/* The ball is positioned in PAGE coordinates (absolute) and eased along the route,
   like the home pinball, so it scrolls with the pipe and never flings off-screen. */
.spk-ball { position: absolute; z-index: 2; left: 0; top: 0; }

/* Speakers page — DESKTOP */
@media (min-width: 1024px) {
  .spk-page { padding-top: calc(227 * var(--u)); }
  .spk-listing { padding: calc(56 * var(--u)) 0 calc(120 * var(--u)); }
  .spk-listing__inner { width: calc(1490 * var(--u)); gap: calc(28 * var(--u)); }
  .spk-title { font-size: calc(64 * var(--u)); }
  .spk-searchwrap { width: calc(620 * var(--u)); }
  .spk-search { height: calc(64 * var(--u)); padding: 0 calc(10 * var(--u)) 0 calc(24 * var(--u)); gap: calc(14 * var(--u)); }
  .spk-search__icon { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
  .spk-search__input { font-size: calc(18 * var(--u)); }
  .spk-search__clear { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
  .spk-search__clear svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
  .spk-count { margin-top: calc(14 * var(--u)); font-size: calc(16 * var(--u)); }
  .spk-grid { grid-template-columns: repeat(4, 1fr); gap: calc(34 * var(--u)) calc(34 * var(--u)); margin-top: calc(12 * var(--u)); }
  .spk-card { border-radius: calc(24 * var(--u)); box-shadow: 0 calc(12 * var(--u)) calc(28 * var(--u)) calc(-4 * var(--u)) rgba(35, 74, 220, .14); }
  .spk-card__media { height: calc(280 * var(--u)); }
  .spk-card__initials { font-size: calc(56 * var(--u)); }
  .spk-card__body { padding: calc(18 * var(--u)) calc(20 * var(--u)) calc(24 * var(--u)); gap: calc(10 * var(--u)); }
  .spk-card__name { font-size: max(13px, calc(20 * var(--u))); line-height: 1.16; }
  .spk-card__bio { font-size: max(12px, calc(16 * var(--u))); line-height: 1.5; }
  .spk-card__link { gap: calc(4 * var(--u)); margin-top: 0; padding-top: calc(8 * var(--u)); font-size: max(11px, calc(14 * var(--u))); }
  .spk-card__link svg { width: max(10px, calc(14 * var(--u))); height: max(10px, calc(14 * var(--u))); }
  .spk-empty { margin-top: calc(12 * var(--u)); padding: calc(64 * var(--u)); border-radius: calc(24 * var(--u)); gap: calc(20 * var(--u)); }
  .spk-empty__icon { width: calc(56 * var(--u)); height: calc(56 * var(--u)); }
  .spk-empty__icon svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
  .spk-empty__title { font-size: calc(26 * var(--u)); }
  .spk-btn { padding: calc(14 * var(--u)) calc(28 * var(--u)); font-size: calc(16 * var(--u)); gap: calc(10 * var(--u)); }
  .spk-btn svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
  .spk-more { margin-top: calc(40 * var(--u)); }
}

/* Speakers page — MOBILE */
@media (max-width: 1023.98px) {
  /* content clears the blue pipe on the left (same spine position as the home page) */
  .spk-listing { padding: calc(32 * var(--u)) calc(24 * var(--u)) calc(48 * var(--u)) calc(56 * var(--u)); }
  .spk-rail { left: calc(23 * var(--u)); top: calc(60 * var(--u)); bottom: calc(40 * var(--u)); width: calc(17 * var(--u)); }
  .spk-listing__inner { width: 100%; gap: calc(20 * var(--u)); }
  .spk-title { font-size: calc(34 * var(--u)); }
  .spk-searchwrap { width: 100%; }
  .spk-search { height: calc(52 * var(--u)); padding: 0 calc(8 * var(--u)) 0 calc(18 * var(--u)); gap: calc(10 * var(--u)); }
  .spk-search__icon { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
  .spk-search__input { font-size: calc(16 * var(--u)); }
  .spk-search__clear { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
  .spk-search__clear svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
  .spk-count { margin-top: calc(10 * var(--u)); font-size: calc(14 * var(--u)); }
  .spk-grid { grid-template-columns: 1fr 1fr; gap: calc(12 * var(--u)); margin-top: calc(4 * var(--u)); }   /* two speakers per row */
  .spk-card { border-radius: calc(16 * var(--u)); box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) calc(-4 * var(--u)) rgba(35, 74, 220, .1); }
  .spk-card__media { height: auto; aspect-ratio: 3 / 4; }
  .spk-card__initials { font-size: calc(40 * var(--u)); }
  .spk-card__body { padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(16 * var(--u)); gap: calc(8 * var(--u)); }
  .spk-card__name { font-size: calc(15 * var(--u)); line-height: 1.2; min-height: 2.4em; }   /* room for 2-line names keeps rows aligned */
  .spk-card__bio { font-size: calc(13 * var(--u)); line-height: 1.45; -webkit-line-clamp: 3; line-clamp: 3; }
  .spk-card__link { align-self: center; gap: calc(4 * var(--u)); margin-top: auto; padding-top: calc(10 * var(--u)); font-size: calc(13 * var(--u)); }
  .spk-card__link svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
  .spk-empty { margin-top: calc(4 * var(--u)); padding: calc(40 * var(--u)) calc(24 * var(--u)); border-radius: calc(20 * var(--u)); gap: calc(16 * var(--u)); }
  .spk-empty__icon { width: calc(48 * var(--u)); height: calc(48 * var(--u)); }
  .spk-empty__icon svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
  .spk-empty__title { font-size: calc(20 * var(--u)); }
  .spk-btn { padding: calc(13 * var(--u)) calc(24 * var(--u)); font-size: calc(15 * var(--u)); gap: calc(8 * var(--u)); }
  .spk-btn svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
  .spk-more { margin-top: calc(24 * var(--u)); }
}

/* ==========================================================================
   NEW SECTIONS after About — Festival Film · Speakers carousel · Articles
   (Figma: 03 — Festival Film 913:6518, Speakers Carousel 905:6841, 05 — Articles 926:6536;
    mobile: 04 — Festival Film 955:3972, Speaker Carousel (swipe) 955:4037)
   ========================================================================== */

/* ---------- Festival film (poster → hover → player) ---------- */
.film { position: relative; background: #fff; }
.film__media { position: relative; z-index: 3; overflow: hidden; isolation: isolate; }
.film__poster, .film__player { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.film__poster[hidden], .film__player[hidden] { display: none; }
.film__poster { background: var(--blue); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.film__mark { position: absolute; left: 3.75%; top: 13.6%; width: 92.5%; height: 72.8%; opacity: .1; transition: opacity .3s ease; }
.film__scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(13, 23, 79, 0) 0%, rgba(13, 23, 79, .1) 45%, rgba(13, 23, 79, .82) 100%); }
.film__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .16); transition: width .25s ease, height .25s ease, background-color .25s ease; }
.film__disc { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--red); color: #fff; transition: width .25s ease, height .25s ease, background-color .25s ease, color .25s ease; }
.film__player { background: var(--deep); color: #fff; }
.film__player .film__mark { opacity: .06; }
.film__stage { position: absolute; inset: 0; z-index: 1; }
.film__stage video, .film__stage iframe { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.film__ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; border: calc(1.5 * var(--u)) solid rgba(255, 255, 255, .4); border-radius: 50%; }
.film__controls { position: absolute; display: flex; align-items: center; }
.film__controls svg { flex: none; }
.film__track { flex: 1; height: calc(4 * var(--u)); border-radius: 2px; background: rgba(255, 255, 255, .24); }
.film__close { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; transition: background-color .2s ease; }
@media (hover: hover) { .film__close:hover { background: rgba(255, 255, 255, .28); } }
.film__player.has-video .film__mark, .film__player.has-video .film__ring, .film__player.has-video .film__controls { display: none; }

/* ---------- Speakers carousel ---------- */
.spk-carousel { position: relative; z-index: 3; display: flex; flex-direction: column; }
.spk-carousel__viewport { position: relative; outline-offset: 6px; }
.spk-carousel__track { display: flex; margin: 0; padding: 0; list-style: none; }
.cs-card { flex: none; }
.cs-card__link { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #fff; border: calc(1.5 * var(--u)) solid var(--card-border); transition: border-color .25s ease, box-shadow .25s ease; -webkit-user-drag: none; }
.cs-card__media { position: relative; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--soft); }
.cs-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; -webkit-user-drag: none; user-select: none; }
.cs-card__media--blue { background: var(--blue); }
.cs-card__media--red { background: var(--red); }
.cs-card__initials { color: #fff; font-weight: 900; line-height: 1.2; }
.cs-card__body { display: flex; flex-direction: column; min-height: 0; }
.cs-card__name { font-weight: 500; color: var(--blue); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.cs-card__cue { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); font-weight: 500; text-transform: uppercase; color: var(--blue); line-height: 1.2; opacity: 0; transition: opacity .25s ease; }
.cs-card__cue svg { flex: none; }
.cs-card__link:focus-visible .cs-card__cue { opacity: 1; }
@media (hover: hover) {
  .cs-card__link:hover { border-color: var(--blue); }
  .cs-card__link:hover .cs-card__media img { transform: scale(1.06); }
  .cs-card__link:hover .cs-card__cue { opacity: 1; }
}
.spk-carousel__controls { display: flex; align-items: center; justify-content: space-between; }
.spk-carousel__progress { display: flex; align-items: center; }
.spk-carousel__count { font-weight: 500; text-transform: uppercase; color: var(--blue); line-height: 1.2; font-variant-numeric: tabular-nums; }
.spk-carousel__dots { display: flex; align-items: center; }
.spk-carousel__dots i { display: block; height: calc(4 * var(--u)); border-radius: 2px; background: var(--card-border); transition: width .3s ease, background-color .3s ease; }
.spk-carousel__dots i.is-active { background: var(--red); }
.spk-carousel__arrows { display: flex; gap: calc(12 * var(--u)); }
.carousel-arrow { display: flex; align-items: center; justify-content: center; width: calc(56 * var(--u)); height: calc(56 * var(--u)); border-radius: 50%; background: #fff; border: calc(1.5 * var(--u)) solid var(--blue); color: var(--blue); transition: background-color .2s ease, color .2s ease; -webkit-tap-highlight-color: transparent; }
.carousel-arrow svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.carousel-arrow[data-prev] svg { transform: scaleX(-1); }
@media (hover: hover) { .carousel-arrow:hover { background: var(--blue); color: #fff; } }
.carousel-arrow:active { background: var(--deep); color: #fff; }

/* ---------- Articles ---------- */
.articles { position: relative; background: #fff; }
.articles__content { position: relative; z-index: 3; }
.article-grid { margin: 0; padding: 0; list-style: none; }
.article-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #fff; border: calc(1.5 * var(--u)) solid var(--card-border); transition: border-color .25s ease, box-shadow .25s ease; }
.article-card__media { position: relative; flex: none; overflow: hidden; background: var(--soft); }
.article-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.article-card__accent { flex: none; height: calc(4 * var(--u)); background: var(--red); transition: background-color .25s ease; }
.article-card__body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; }
.article-card__title { font-family: "Noto Sans Malayalam", var(--font); font-weight: 500; line-height: 1.5; color: var(--deep); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; }
.article-card__cue { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); font-weight: 500; text-transform: uppercase; color: var(--red); line-height: 1.2; }
.article-card__cue svg { flex: none; }
@media (hover: hover) {
  .article-card:hover { border-color: var(--blue); }
  .article-card:hover .article-card__accent { background: var(--blue); }
  .article-card:hover .article-card__media img { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .cs-card__media img, .article-card__media img { transition: none; }
}

/* ===== desktop ===== */
@media (min-width: 1024px) {
  .pipes { height: calc(2276 * var(--u)); }

  .film { height: calc(815 * var(--u)); }
  .film__bg::before { left: 0; top: 0; width: calc(1920.5 * var(--u)); height: calc(1080.5 * var(--u)); background-image: url("../assets/img/maze-pattern.png"); opacity: .55; }
  .film__content { position: absolute; left: calc(215 * var(--u)); top: calc(256 * var(--u)); width: calc(1490 * var(--u)); height: calc(495 * var(--u)); z-index: 3; display: flex; align-items: center; justify-content: space-between; }
  .film__heading { order: 2; width: calc(522 * var(--u)); }
  .film__heading .sec-heading__title { white-space: nowrap; }
  .film__media { order: 1; width: calc(880 * var(--u)); height: calc(495 * var(--u)); border-radius: calc(40 * var(--u)); box-shadow: 0 calc(16 * var(--u)) calc(40 * var(--u)) calc(-8 * var(--u)) rgba(35, 74, 220, .3); }
  .film__play { width: calc(136 * var(--u)); height: calc(136 * var(--u)); }
  .film__disc { width: calc(100 * var(--u)); height: calc(100 * var(--u)); padding-left: calc(5 * var(--u)); box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) calc(-4 * var(--u)) rgba(35, 74, 220, .3); }
  .film__disc svg { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
  @media (hover: hover) {
    .film__poster:hover .film__mark { opacity: .14; }
    .film__poster:hover .film__play { width: calc(148 * var(--u)); height: calc(148 * var(--u)); background: rgba(255, 255, 255, .24); }
    .film__poster:hover .film__disc { width: calc(108 * var(--u)); height: calc(108 * var(--u)); background: #fff; color: var(--red); }
  }
  .film__poster:focus-visible .film__disc { background: #fff; color: var(--red); }
  .film__ring { width: calc(88 * var(--u)); height: calc(88 * var(--u)); padding-left: calc(4 * var(--u)); }
  .film__ring svg { width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
  .film__controls { left: calc(40 * var(--u)); right: calc(40 * var(--u)); bottom: calc(32 * var(--u)); height: calc(40 * var(--u)); gap: calc(20 * var(--u)); }
  .film__controls svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
  .film__close { right: calc(28 * var(--u)); top: calc(28 * var(--u)); width: calc(52 * var(--u)); height: calc(52 * var(--u)); }
  .film__close svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }

  .spk-carousel { gap: calc(24 * var(--u)); }
  .spk-carousel__viewport { height: calc(576 * var(--u)); overflow: hidden; touch-action: pan-y; cursor: grab; }
  .spk-carousel.is-dragging .spk-carousel__viewport { cursor: grabbing; }
  .spk-carousel__track { position: absolute; left: 0; top: calc(24 * var(--u)); gap: calc(32 * var(--u)); will-change: transform; }
  .cs-card { width: calc(300 * var(--u)); height: calc(512 * var(--u)); }
  .cs-card__link { border-radius: calc(24 * var(--u)); box-shadow: 0 calc(12 * var(--u)) calc(28 * var(--u)) calc(-4 * var(--u)) rgba(35, 74, 220, .14); }
  @media (hover: hover) { .cs-card__link:hover { box-shadow: 0 calc(16 * var(--u)) calc(40 * var(--u)) calc(-8 * var(--u)) rgba(35, 74, 220, .3); } }
  .cs-card__media { height: calc(400 * var(--u)); }
  .cs-card__initials { font-size: calc(56 * var(--u)); }
  .cs-card__body { flex: 1; justify-content: space-between; padding: calc(18 * var(--u)) calc(20 * var(--u)); }
  .cs-card__name { font-size: max(12px, calc(20 * var(--u))); line-height: 1.16; }
  .cs-card__cue { font-size: max(10px, calc(14 * var(--u))); letter-spacing: calc(3 * var(--u)); }
  .cs-card__cue svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
  .spk-carousel__progress { gap: calc(16 * var(--u)); }
  .spk-carousel__count { font-size: max(11px, calc(16 * var(--u))); letter-spacing: calc(3 * var(--u)); }
  .spk-carousel__dots { gap: calc(8 * var(--u)); }
  .spk-carousel__dots i { width: calc(16 * var(--u)); }
  .spk-carousel__dots i.is-active { width: calc(40 * var(--u)); }

  .articles { height: calc(863 * var(--u)); }
  .articles__bg::before { left: 0; top: 0; width: calc(1920.5 * var(--u)); height: calc(1080.5 * var(--u)); background-image: url("../assets/img/maze-pattern.png"); opacity: .35; }
  .articles__content { position: absolute; left: calc(215 * var(--u)); top: calc(96 * var(--u)); width: calc(1490 * var(--u)); display: flex; flex-direction: column; gap: calc(48 * var(--u)); }
  .articles__head { display: flex; align-items: flex-end; justify-content: space-between; }
  .article-grid { display: flex; gap: calc(34 * var(--u)); }
  .article-grid li { flex: none; width: calc(347 * var(--u)); height: calc(474 * var(--u)); }
  .article-card { border-radius: calc(24 * var(--u)); box-shadow: 0 calc(12 * var(--u)) calc(28 * var(--u)) calc(-4 * var(--u)) rgba(35, 74, 220, .14); }
  @media (hover: hover) { .article-card:hover { box-shadow: 0 calc(16 * var(--u)) calc(40 * var(--u)) calc(-8 * var(--u)) rgba(35, 74, 220, .3); } }
  .article-card__media { height: calc(260 * var(--u)); }
  .article-card__body { padding: calc(22 * var(--u)) calc(24 * var(--u)); }
  .article-card__title { font-size: max(13px, calc(18 * var(--u))); }
  .article-card__cue { font-size: max(10px, calc(14 * var(--u))); letter-spacing: calc(3 * var(--u)); }
  .article-card__cue svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
}

/* ===== mobile ===== */
@media (max-width: 1023.98px) {
  .film__bg::before { top: 0; bottom: 0; left: calc(-30 * var(--u)); width: calc(806.4 * var(--u)); background: url("../assets/svg/maze-speakers-mobile.svg") 0 0 / calc(806.4 * var(--u)) calc(523.414 * var(--u)) repeat-y; }
  .film__content { position: relative; z-index: 3; display: flex; flex-direction: column; gap: calc(24 * var(--u)); padding: calc(48 * var(--u)) calc(40 * var(--u)) calc(48 * var(--u)) calc(56 * var(--u)); }
  .film__media { width: 100%; height: calc(209 * var(--u)); border-radius: calc(20 * var(--u)); box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) calc(-4 * var(--u)) rgba(35, 74, 220, .1); }
  .film__mark { left: 3.74%; top: 13.51%; width: 92.52%; height: 72.98%; opacity: .12; }
  .film__play { width: calc(68 * var(--u)); height: calc(68 * var(--u)); background: rgba(255, 255, 255, .18); }
  .film__disc { width: calc(52 * var(--u)); height: calc(52 * var(--u)); padding-left: calc(3 * var(--u)); box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) calc(-4 * var(--u)) rgba(35, 74, 220, .3); }
  .film__disc svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
  .film__poster:active .film__disc { background: #fff; color: var(--red); }
  .film__ring { width: calc(56 * var(--u)); height: calc(56 * var(--u)); padding-left: calc(3 * var(--u)); }
  .film__ring svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
  .film__controls { left: calc(16 * var(--u)); right: calc(16 * var(--u)); bottom: calc(12 * var(--u)); height: calc(28 * var(--u)); gap: calc(12 * var(--u)); }
  .film__controls svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
  .film__close { right: calc(10 * var(--u)); top: calc(10 * var(--u)); width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
  .film__close svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }

  .spk-carousel { gap: calc(4 * var(--u)); }
  /* auto-moving loop like desktop (main.js); swipe moves it, vertical swipes still scroll the page */
  .spk-carousel__viewport { overflow: hidden; touch-action: pan-y; }
  .spk-carousel__track { gap: calc(12 * var(--u)); padding: calc(4 * var(--u)) 0 calc(20 * var(--u)); width: max-content; will-change: transform; }
  .cs-card { width: calc(141 * var(--u)); }
  .cs-card__link { border-radius: calc(20 * var(--u)); box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) calc(-4 * var(--u)) rgba(35, 74, 220, .1); }
  .cs-card__media { height: calc(188 * var(--u)); }
  .cs-card__initials { font-size: calc(40 * var(--u)); }
  .cs-card__body { height: calc(60 * var(--u)); justify-content: center; padding: calc(8 * var(--u)) calc(10 * var(--u)); }
  .cs-card__name { font-size: calc(16 * var(--u)); line-height: 1.25; }
  .cs-card__cue { display: none; }
  .spk-carousel__progress { gap: calc(12 * var(--u)); }
  .spk-carousel__count { font-size: calc(13 * var(--u)); letter-spacing: calc(2 * var(--u)); }
  .spk-carousel__dots { gap: calc(6 * var(--u)); }
  .spk-carousel__dots i { width: calc(10 * var(--u)); }
  .spk-carousel__dots i.is-active { width: calc(28 * var(--u)); }

  .articles__bg::before { inset: 0; background: url("../assets/img/maze-pattern.png") 0 0 / calc(1344.35 * var(--u)) calc(756.35 * var(--u)) repeat; opacity: .35; }
  .articles__content { display: flex; flex-direction: column; gap: calc(24 * var(--u)); padding: calc(48 * var(--u)) calc(40 * var(--u)) calc(48 * var(--u)) calc(56 * var(--u)); }
  .articles__head { display: flex; flex-direction: column; align-items: flex-start; gap: calc(20 * var(--u)); }
  .article-grid { display: grid; grid-template-columns: 1fr; gap: calc(16 * var(--u)); }
  .article-card { border-radius: calc(20 * var(--u)); box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) calc(-4 * var(--u)) rgba(35, 74, 220, .1); }
  .article-card__media { aspect-ratio: 4 / 3; }
  .article-card__body { gap: calc(14 * var(--u)); padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u)); }
  .article-card__title { font-size: calc(16 * var(--u)); }
  .article-card__cue { font-size: calc(12 * var(--u)); letter-spacing: calc(2 * var(--u)); }
  .article-card__cue svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
}

/* Mobile: the desktop lettering stays in the page (visually hidden) because the festival-film
   poster re-uses it as its watermark; display:none would stop it rendering through the mask. */
@media (max-width: 1023.98px) {
  .hero__art[data-intro="desktop"].d-only { display: block !important; position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
}

/* Hidden sections & their links: any section after About can be hidden with style="display:none"
   (or the hidden attribute); its pipes go with it and links pointing at it are hidden by main.js. */
[hidden] { display: none !important; }
.sec-pipes { position: absolute; left: 0; top: calc(var(--top) * var(--u)); width: calc(1920 * var(--u)); height: calc(var(--h) * var(--u)); z-index: 1; pointer-events: none; overflow: visible; }

/* ---------- Sticky "View Full Videos" button ---------- */
.float-video {
  position: fixed; z-index: 90; display: inline-flex; align-items: center; white-space: nowrap;
  border: 1px solid var(--blue-2); border-radius: 999px; background: #fff; color: var(--blue);
  font-weight: 500; line-height: 1.2; text-decoration: none;
  filter: drop-shadow(0 10px 12px rgba(35, 74, 220, .3));
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, filter .2s ease, opacity .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.float-video__icon { flex: none; }
.float-video:active { background: linear-gradient(rgba(0, 0, 0, .18), rgba(0, 0, 0, .18)), var(--red); color: #fff; border-color: #fff; }
html.menu-open .float-video { opacity: 0; pointer-events: none; }
@media (min-width: 1024px) {
  .float-video {
    --u: calc(min(var(--vw), 2560px) / 1920);
    right: max(16px, calc(56 * var(--u))); bottom: max(16px, calc(56 * var(--u)));
    min-height: max(34px, calc(48 * var(--u))); gap: max(7px, calc(10 * var(--u))); padding: max(8px, calc(12 * var(--u))) max(15px, calc(22 * var(--u))) max(8px, calc(12 * var(--u))) max(11px, calc(16 * var(--u)));
    font-size: max(13px, calc(18 * var(--u)));
  }
  .float-video__icon { width: max(16px, calc(22 * var(--u))); height: max(16px, calc(22 * var(--u))); }
  @media (hover: hover) {
    .float-video:hover { background: var(--blue); color: #fff; border-color: #fff; box-shadow: inset 0 0 0 1px #fff; filter: drop-shadow(0 16px 20px rgba(35, 74, 220, .3)); }
  }
}
@media (max-width: 1023.98px) {
  .float-video {
    --u: calc(min(var(--vw), 540px) / 390);
    left: 50%; transform: translateX(-50%);
    bottom: calc(var(--botnav-h, 0px) + calc(12 * var(--u)));
    min-height: calc(36 * var(--u)); gap: calc(8 * var(--u)); padding: calc(6 * var(--u)) calc(14 * var(--u)) calc(6 * var(--u)) calc(10 * var(--u)); font-size: calc(18 * var(--u));
  }
  .float-video__icon { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
}

/* ==========================================================================
   Speaker detail page (speaker.html) — Figma "Speaker Detail — Desktop" 1126:10081 / "— Mobile" 1126:10393
   ========================================================================== */
.sd { position: relative; background: #fff; overflow: hidden; }
.sd::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("../assets/img/maze-pattern.png") 0 0 repeat; }
.sd__inner { position: relative; z-index: 3; }
.sd-back { display: inline-flex; align-items: center; color: var(--blue-2); font-weight: 500; line-height: 1.2; }
.sd-back svg { flex: none; transform: scaleX(-1); transition: transform .2s ease; }
@media (hover: hover) { .sd-back:hover { color: var(--blue); } .sd-back:hover svg { transform: scaleX(-1) translateX(3px); } }
.sd-profile { background: #fff; border: calc(1.5 * var(--u)) solid var(--card-border); overflow: hidden; }
.sd-profile__img { display: block; object-fit: cover; }
.sd-lang { display: inline-flex; align-items: center; background: #fff; border-style: solid; border-color: var(--card-border); border-radius: 999px; }
.sd-lang__opt { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: var(--blue); font-weight: 500; white-space: nowrap; transition: background-color .2s ease, color .2s ease; }
.sd-lang__opt--ml { font-family: "Noto Sans Malayalam", var(--font); }
.sd-lang__opt.is-active { background: var(--blue); color: #fff; }
@media (hover: hover) { .sd-lang__opt:not(.is-active):hover { background: rgba(35, 74, 220, .08); } }
.sd-identity { display: flex; flex-direction: column; }
.sd-name { font-weight: 900; line-height: 1.08; text-transform: uppercase; color: var(--blue); }
.sd-accent { display: block; width: calc(64 * var(--u)); height: calc(6 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--red); }
.sd-bio__text { font-weight: 400; color: var(--deep); }
.sd-bio__text p { margin: 0; }
.sd-bio__text p + p { margin-top: .75em; }
.sd-bio__more { color: var(--red); font-weight: 500; text-decoration: underline; text-underline-offset: .15em; cursor: pointer; }
.sd-divider { width: 100%; height: 1px; margin: 0; border: 0; background: var(--divider); }
.sd-programs__title { font-weight: 900; text-transform: uppercase; color: var(--blue); line-height: 1.2; }
.sd-grid { list-style: none; margin: 0; padding: 0; }
.sd-prog { display: flex; flex-direction: column; align-items: flex-start; background: #fff; border: calc(1.5 * var(--u)) solid var(--card-border); }
.sd-chip { display: inline-flex; align-items: center; border-radius: calc(40 * var(--u)); font-weight: 500; text-transform: uppercase; line-height: 1.2; white-space: nowrap; }
.sd-chip--discussion { background: #fce3e4; color: #a50d18; }
.sd-chip--conversation { background: #e8e2fb; color: #4a2db0; }
.sd-prog__meta { display: flex; flex-wrap: wrap; align-items: center; width: 100%; line-height: 1.2; }
.sd-prog__date { font-weight: 500; color: var(--deep); }
.sd-prog__sep { color: var(--muted); }
.sd-prog__time, .sd-prog__venue { display: inline-flex; align-items: center; }
.sd-prog__time { color: var(--deep); }
.sd-prog__venue { color: var(--blue); }
.sd-prog__time svg, .sd-prog__venue svg { flex: none; }
.sd-prog__title { font-weight: 500; color: var(--deep); width: 100%; }
.sd-prog__people { display: flex; flex-direction: column; width: 100%; }
.sd-prog__row { display: flex; align-items: baseline; line-height: 1.35; }   /* label and names share one baseline */
.sd-prog__label { flex: none; color: var(--muted); }
.sd-prog__names { flex: 1; min-width: 0; font-weight: 500; text-transform: uppercase; color: var(--blue); }
.sd-prog__names--mod { color: var(--deep); }
/* Language switch: only the name and description change (Figma Language=Malayalam: Noto Sans Malayalam) */
.sd-page:not([data-lang="ml"]) .sd-t--ml, .sd-page[data-lang="ml"] .sd-t--en { display: none; }
.sd-t--ml { font-family: "Noto Sans Malayalam", var(--font); }
.sd-page[data-lang="ml"] .sd-name { font-weight: 700; line-height: 1.4; text-transform: none; }

@media (min-width: 1024px) {
  .sd::before { background-size: calc(1920.5 * var(--u)) calc(1080.5 * var(--u)); opacity: .4; }
  .sd__inner { padding: 0 calc(215 * var(--u)); }
  .sd__back { padding: calc(48 * var(--u)) 0 calc(28 * var(--u)); }
  .sd-back { gap: calc(10 * var(--u)); padding: calc(6 * var(--u)) 0; font-size: max(12px, calc(16 * var(--u))); }
  .sd-back svg { width: max(12px, calc(16 * var(--u))); height: max(12px, calc(16 * var(--u))); }
  .sd-profile { display: flex; align-items: flex-start; gap: calc(72 * var(--u)); padding: calc(56 * var(--u)); border-radius: calc(24 * var(--u)); }
  .sd-profile__media { flex: none; width: calc(520 * var(--u)); }
  .sd-profile__img { width: calc(520 * var(--u)); height: calc(650 * var(--u)); border-radius: calc(20 * var(--u)); }
  .sd-profile__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(32 * var(--u)); }
  .sd-profile__top { display: flex; justify-content: flex-end; }
  .sd-lang { gap: calc(4 * var(--u)); padding: calc(4 * var(--u)); border-width: calc(1.5 * var(--u)); }
  .sd-lang__opt { padding: calc(10 * var(--u)) calc(20 * var(--u)); font-size: max(12px, calc(16 * var(--u))); line-height: 1.5; }
  .sd-identity { gap: calc(16 * var(--u)); }
  .sd-name { font-size: calc(64 * var(--u)); }
  .sd-bio__text { font-size: max(14px, calc(22 * var(--u))); line-height: 1.5; }
  .sd-programs { display: flex; flex-direction: column; gap: calc(28 * var(--u)); padding: calc(96 * var(--u)) 0 calc(140 * var(--u)); }
  .sd-programs__title { font-size: calc(48 * var(--u)); }
  .sd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(24 * var(--u)); }
  .sd-prog { min-height: calc(230 * var(--u)); gap: calc(8 * var(--u)); padding: calc(28 * var(--u)) calc(32 * var(--u)) calc(36 * var(--u)); border-radius: calc(24 * var(--u)); }
  .sd-chip { padding: calc(6 * var(--u)) calc(14 * var(--u)); font-size: max(10px, calc(12 * var(--u))); letter-spacing: calc(1.5 * var(--u)); }
  .sd-prog__meta { gap: calc(6 * var(--u)) calc(12 * var(--u)); font-size: max(12px, calc(16 * var(--u))); }
  .sd-prog__sep { font-size: max(13px, calc(18 * var(--u))); }
  .sd-prog__time, .sd-prog__venue { gap: calc(6 * var(--u)); }
  .sd-prog__time svg, .sd-prog__venue svg { width: max(12px, calc(16 * var(--u))); height: max(12px, calc(16 * var(--u))); }
  .sd-prog__title { padding-top: calc(2 * var(--u)); font-size: max(14px, calc(20 * var(--u))); line-height: 1.3; }
  .sd-prog__people { gap: calc(6 * var(--u)); padding-top: calc(4 * var(--u)); }
  .sd-prog__row { gap: calc(8 * var(--u)); }
  .sd-prog__label { font-size: max(12px, calc(16 * var(--u))); }
  .sd-prog__names { font-size: max(11px, calc(15 * var(--u))); letter-spacing: calc(.4 * var(--u)); }
  .sd-page[data-lang="ml"] .sd-name { font-size: calc(52 * var(--u)); }
  .sd-page[data-lang="ml"] .sd-bio__text { font-size: max(14px, calc(20 * var(--u))); line-height: 1.75; }
}
@media (max-width: 1023.98px) {
  .sd::before { background-size: calc(1344.35 * var(--u)) calc(756.35 * var(--u)); }
  .sd__inner { padding: 0 calc(16 * var(--u)) 0 calc(52 * var(--u)); }
  .sd__back { padding: calc(6 * var(--u)) 0 calc(10 * var(--u)); }
  .sd-back { gap: calc(10 * var(--u)); padding: calc(6 * var(--u)) 0; font-size: calc(16 * var(--u)); }
  .sd-back svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
  .sd-profile { display: flex; flex-direction: column; gap: calc(8 * var(--u)); padding: calc(14 * var(--u)) calc(20 * var(--u)); border-radius: calc(24 * var(--u)); }
  .sd-profile__media { display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); }
  .sd-profile__img { width: calc(88 * var(--u)); height: calc(110 * var(--u)); border-radius: calc(12 * var(--u)); }
  .sd-profile__info { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
  .sd-lang { gap: calc(2 * var(--u)); padding: calc(2 * var(--u)); border-width: 1px; }
  .sd-lang__opt { height: calc(24 * var(--u)); padding: 0 calc(10 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); }
  .sd-identity { gap: calc(6 * var(--u)); }
  .sd-name { font-size: calc(25 * var(--u)); }
  .sd-bio { display: flex; flex-direction: column; align-items: flex-start; gap: calc(2 * var(--u)); }
  .sd-bio__text { --bio-lh: 1.21; font-size: calc(16 * var(--u)); line-height: var(--bio-lh); }
  /* 3-line preview (works across paragraphs); "Read more" shows only when the text is longer */
  .sd-bio:not(.is-open) .sd-bio__text { max-height: calc(var(--bio-lh) * 3em); overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
  .sd-bio.fits .sd-bio__text { -webkit-mask-image: none; mask-image: none; }
  .sd-bio__more { padding: calc(3 * var(--u)) 0; font-size: calc(14 * var(--u)); line-height: calc(22 * var(--u)); }
  .sd-programs { display: flex; flex-direction: column; gap: calc(8 * var(--u)); padding: calc(28 * var(--u)) 0 calc(48 * var(--u)); }
  .sd-programs__title { font-size: calc(30 * var(--u)); }
  .sd-grid { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
  .sd-prog { gap: calc(8 * var(--u)); padding: calc(20 * var(--u)) calc(22 * var(--u)); border-radius: calc(24 * var(--u)); }
  .sd-chip { padding: calc(6 * var(--u)) calc(14 * var(--u)); font-size: calc(12 * var(--u)); letter-spacing: calc(1.5 * var(--u)); }
  .sd-prog__meta { gap: calc(4 * var(--u)) calc(12 * var(--u)); font-size: calc(16 * var(--u)); }
  .sd-prog__sep { display: none; }
  .sd-prog__time, .sd-prog__venue { gap: calc(6 * var(--u)); }
  .sd-prog__time svg, .sd-prog__venue svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
  .sd-prog__title { padding-top: calc(2 * var(--u)); font-size: calc(20 * var(--u)); line-height: 1.3; }
  .sd-prog__people { gap: calc(6 * var(--u)); padding-top: calc(4 * var(--u)); }
  .sd-prog__row { flex-wrap: wrap; gap: calc(2 * var(--u)) calc(8 * var(--u)); }
  .sd-prog__label { font-size: calc(16 * var(--u)); }
  .sd-prog__names { font-size: calc(15 * var(--u)); letter-spacing: calc(.4 * var(--u)); }
  .sd-page[data-lang="ml"] .sd-name { font-size: calc(24 * var(--u)); }
  .sd-page[data-lang="ml"] .sd-bio__text { --bio-lh: 1.6; font-size: calc(15 * var(--u)); }
}

/* ==========================================================================
   Videos page (videos.html) — Figma "Video Card / Listing" 1178:3197 · "— Mobile" 1179:3241
   ========================================================================== */
.vid-grid { list-style: none; margin: 0; padding: 0; display: grid; width: 100%; }
.vid-card { position: relative; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: calc(1.5 * var(--u)) solid var(--card-border); cursor: pointer; transition: border-color .2s ease-out, box-shadow .2s ease-out; }
.vid-card__thumb { position: relative; flex: none; overflow: hidden; background: var(--soft); }
.vid-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease-out; }
.vid-card__thumb::after { content: ""; position: absolute; inset: 0; background: rgba(13, 23, 79, .08); transition: background-color .2s ease-out; }
.vid-card__accent { display: block; flex: none; height: calc(4 * var(--u)); background: var(--red); transition: background-color .2s ease-out; }
.vid-card__body { display: flex; flex-direction: column; }
.vid-card__title { font-family: "Noto Sans Malayalam", var(--font); font-weight: 500; line-height: 1.5; color: var(--deep); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; }
.vid-card__meta { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); }
.vid-card__link { display: inline-flex; align-items: center; color: var(--blue-2); font-weight: 500; line-height: 1.2; white-space: nowrap; transition: color .2s ease-out; }
.vid-card__link svg { flex: none; transition: transform .2s ease-out; }
.vid-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }      /* the whole card opens the video */
.vid-card__link:focus-visible { outline: none; }
.vid-card:has(.vid-card__link:focus-visible) { outline: 3px solid var(--red); outline-offset: 3px; }
.vid-card__tag { flex: none; background: var(--soft); color: var(--blue); border-radius: 999px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
@media (hover: hover) {
  .vid-card:hover { border-color: var(--blue); box-shadow: 0 calc(16 * var(--u)) calc(40 * var(--u)) calc(-8 * var(--u)) rgba(35, 74, 220, .3); }
  .vid-card:hover .vid-card__thumb img { transform: scale(1.06); }
  .vid-card:hover .vid-card__thumb::after { background: rgba(13, 23, 79, .18); }
  .vid-card:hover .vid-card__accent { background: var(--blue); }
  .vid-card:hover .vid-card__link { color: var(--blue); }
  .vid-card:hover .vid-card__link svg { transform: translate(2px, -2px); }
}
.vid-card:active { border-color: var(--blue); }
.vid-card:active .vid-card__thumb::after { background: rgba(13, 23, 79, .2); }
.vid-card:active .vid-card__accent { background: var(--blue); }
.vid-card:active .vid-card__link { color: var(--blue); }
@media (min-width: 1024px) {
  .vid-grid { grid-template-columns: repeat(4, 1fr); gap: calc(34 * var(--u)); }
  .vid-card { border-radius: calc(24 * var(--u)); box-shadow: 0 calc(12 * var(--u)) calc(28 * var(--u)) calc(-4 * var(--u)) rgba(35, 74, 220, .14); }
  .vid-card__thumb { height: calc(195 * var(--u)); }
  .vid-card__body { justify-content: space-between; height: calc(196 * var(--u)); padding: calc(20 * var(--u)) calc(24 * var(--u)) calc(22 * var(--u)); }
  .vid-card__title { font-size: max(13px, calc(18 * var(--u))); }
  .vid-card__link { gap: calc(4 * var(--u)); font-size: max(11px, calc(14 * var(--u))); }
  .vid-card__link svg { width: max(10px, calc(14 * var(--u))); height: max(10px, calc(14 * var(--u))); }
  .vid-card__tag { padding: calc(4 * var(--u)) calc(10 * var(--u)); font-size: max(10px, calc(12 * var(--u))); letter-spacing: calc(.5 * var(--u)); }
}
@media (max-width: 1023.98px) {
  .vid-page .spk-listing { padding-left: calc(52 * var(--u)); }                /* Figma: 314-wide column (52 / 24) */
  .vid-grid { grid-template-columns: 1fr; gap: calc(16 * var(--u)); }
  .vid-card { border-radius: calc(20 * var(--u)); box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) calc(-4 * var(--u)) rgba(35, 74, 220, .1); }
  .vid-card__thumb { aspect-ratio: 16 / 9; }
  .vid-card__body { gap: calc(14 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)); }
  .vid-card__title { font-size: calc(16 * var(--u)); -webkit-line-clamp: 3; line-clamp: 3; }
  .vid-card__link { gap: calc(4 * var(--u)); font-size: calc(14 * var(--u)); }
  .vid-card__link svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
  .vid-card__tag { padding: calc(3 * var(--u)) calc(8 * var(--u)); font-size: calc(11 * var(--u)); letter-spacing: calc(.5 * var(--u)); }
}

/* ==========================================================================
   About page (about.html) — Figma "About Us — Desktop" 1192:3528 / "— Mobile" 1192:3940
   ========================================================================== */
/* Figma "Background Fade" (02 — Page Intro): the maze behind the title fades to white toward the text */
.ab-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%); }
.ab { position: relative; background: #fff; }                      /* plain white behind the text, full width */
.ab__inner { position: relative; z-index: 3; display: flex; justify-content: center; }
.ab-article { display: flex; flex-direction: column; align-items: flex-start; }
.ab-lead { display: flex; flex-direction: column; align-items: flex-start; }
.ab-lead__accent { display: block; height: calc(4 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--red); }
.ab-lead__text { font-weight: 500; color: var(--blue); }
.ab-body { font-weight: 400; color: var(--deep); }
@media (min-width: 1024px) {
  .ab-head.spk-listing { padding-bottom: calc(32 * var(--u)); }
  .ab-head::after { height: calc(120 * var(--u)); }
  .ab { padding: calc(24 * var(--u)) 0 calc(120 * var(--u)); }
  .ab-article { width: calc(800 * var(--u)); gap: calc(28 * var(--u)); }
  .ab-lead { gap: calc(20 * var(--u)); padding-bottom: calc(12 * var(--u)); }
  .ab-lead__accent { width: calc(64 * var(--u)); }
  .ab-lead__text { font-size: max(15px, calc(26 * var(--u))); line-height: 1.5385; }      /* 26 / 40 */
  .ab-body { font-size: max(13px, calc(20 * var(--u))); line-height: 1.7; }               /* 20 / 34 */
}
@media (max-width: 1023.98px) {
  .ab-head.spk-listing { padding-left: calc(52 * var(--u)); padding-bottom: calc(16 * var(--u)); }
  .ab-head::after { height: calc(80 * var(--u)); }
  .ab { padding: calc(16 * var(--u)) calc(24 * var(--u)) calc(56 * var(--u)) calc(52 * var(--u)); }                               /* Figma: 52 / 24 column */
  .ab-article { width: 100%; gap: calc(20 * var(--u)); }
  .ab-lead { gap: calc(14 * var(--u)); padding-bottom: calc(4 * var(--u)); }
  .ab-lead__accent { width: calc(48 * var(--u)); }
  .ab-lead__text { font-size: calc(19 * var(--u)); line-height: 1.5263; }                 /* 19 / 29 */
  .ab-body { font-size: calc(16 * var(--u)); line-height: 1.625; }                        /* 16 / 26 */
}
/* Malayalam subtitle under a section title (home About: "കാലത്തിന്റെ കടങ്കഥകൾ") */
.sec-heading__ml { display: block; font-family: "Noto Sans Malayalam", var(--font); font-weight: 500; }

/* ==========================================================================
   Loading skeletons (speakers page, home carousel, speaker profile) — shown until the
   speakers feed arrives, instead of demo data
   ========================================================================== */
@keyframes skel-shine { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.spk-card--skel .spk-card__media, .cs-card--skel .cs-card__media, .skel-line,
.sd-page[data-pending] .sd-profile__media, .sd-page[data-pending] .sd-identity, .sd-page[data-pending] .sd-bio__text {
  background: linear-gradient(90deg, #e8edfb 0%, #f4f6fe 40%, #e8edfb 80%) 0 0 / 200% 100%;
  animation: skel-shine 1.3s linear infinite;
}
.skel-line { display: block; height: .85em; border-radius: 6px; width: 100%; }
.skel-line + .skel-line { margin-top: .55em; }
.skel-line--name { width: 70%; height: 1.1em; margin-bottom: .4em; }
.skel-line--short { width: 55%; }
.spk-card--skel, .cs-card--skel { pointer-events: none; }
.spk-card--skel .spk-card__body { font-size: max(12px, calc(14 * var(--u))); }
.cs-card--skel .cs-card__body { font-size: max(12px, calc(16 * var(--u))); justify-content: center; }
.cs-card--skel .cs-card__link { box-shadow: none; }
/* while loading, hide the controls and messages that depend on the data */
.spk-listing[aria-busy="true"] .spk-more, .spk-listing[aria-busy="true"] .spk-empty,
.spk-listing.is-error .spk-empty, .spk-listing.is-error .spk-more { display: none !important; }
.spk-error { display: flex; flex-direction: column; align-items: center; gap: calc(16 * var(--u)); text-align: center; width: 100%; padding: calc(40 * var(--u)) calc(20 * var(--u)); }
.spk-error[hidden] { display: none; }
.spk-carousel.is-loading .spk-carousel__controls, .spk-carousel.is-error .spk-carousel__controls,
.spk-carousel.is-static .spk-carousel__controls { visibility: hidden; }
.spk-carousel.is-loading .spk-carousel__viewport, .spk-carousel.is-static .spk-carousel__viewport { cursor: default; }
.spk-carousel__error { color: var(--blue); font-weight: 500; padding: calc(24 * var(--u)) 0; }
.spk-carousel__error a { text-decoration: underline; }
/* speaker profile: keep the layout, hide the demo text and photo until the real speaker arrives */
.sd-page[data-pending] .sd-profile__img, .sd-page[data-pending] .sd-lang { visibility: hidden; }
.sd-page[data-pending] .sd-identity, .sd-page[data-pending] .sd-bio__text { border-radius: 10px; }
.sd-page[data-pending] .sd-identity *, .sd-page[data-pending] .sd-bio__text * { visibility: hidden; }
.sd-page[data-pending] .sd-bio__more { visibility: hidden; }
.sd-page[data-pending] .sd-profile__media { border-radius: calc(20 * var(--u)); }
.sd-demo .sd-page[data-pending] .sd-profile__media, .sd-demo .sd-page[data-pending] .sd-identity, .sd-demo .sd-page[data-pending] .sd-bio__text { animation: none; background: none; }
.sd-demo .sd-page[data-pending] *, .sd-demo .sd-page[data-pending] .sd-profile__img { visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .spk-card--skel .spk-card__media, .cs-card--skel .cs-card__media, .skel-line,
  .sd-page[data-pending] .sd-profile__media, .sd-page[data-pending] .sd-identity, .sd-page[data-pending] .sd-bio__text { animation: none; }
}

/* speaker profile while loading: the name / description are empty until the feed arrives — keep their shape */
.sd-page[data-pending] .sd-identity { min-height: calc(150 * var(--u)); }
.sd-page[data-pending] .sd-bio__text { min-height: calc(260 * var(--u)); }
.sd-page[data-pending] .sd-profile__media { min-height: calc(650 * var(--u)); }
@media (max-width: 1023.98px) {
  .sd-page[data-pending] .sd-identity { min-height: calc(64 * var(--u)); }
  .sd-page[data-pending] .sd-bio__text { min-height: calc(60 * var(--u)); }
  .sd-page[data-pending] .sd-profile__media { min-height: calc(110 * var(--u)); width: calc(88 * var(--u)); align-self: center; }
}
.sd-profile__img:not([src]) { visibility: hidden; }
.sd-noscript { padding: 40px 0; color: var(--blue); font-weight: 500; }

/* ---------- Mobile: sticky "Register now" (home hero button) ----------
   Pinned just above the bottom nav. At the top of the page it sits exactly where it was (the hero is sized so
   the button ends 12 px above the nav); its old space is kept, so nothing moves. Hidden while the menu is open
   and while the Register section's own button is on screen (no two Register buttons at once). */
@media (max-width: 1023.98px) {
  .hero__info { padding-top: calc((16 + 62 + 37) * var(--u)); }
  .hero__info > .btn-reg--full {
    position: fixed; z-index: 85;
    left: calc((var(--vw, 100vw) - min(var(--vw, 100vw), 540px)) / 2 + 56 * var(--u));
    width: calc(294 * var(--u));
    bottom: calc(var(--botnav-h, 0px) + 12 * var(--u));
    transition: opacity .25s ease, transform .25s ease;
  }
  html.menu-open .hero__info > .btn-reg--full,
  html.reg-sticky-off .hero__info > .btn-reg--full { opacity: 0; transform: translateY(12px); pointer-events: none; }
}
@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) { .hero__info > .btn-reg--full { transition: none; } }

/* festival film poster: thumbnail image (assets/img/thumbnail.png) fills the poster, play button on top */
.film__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
@media (hover: hover) { .film__poster:hover .film__thumb { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .film__thumb { transition: none; } }

/* speakers carousel: no counter / dashes — desktop keeps the arrows on the right; mobile (no arrows) drops the row */
.spk-carousel__controls { justify-content: flex-end; }
@media (max-width: 1023.98px) { .spk-carousel__controls { display: none; } }

/* ==========================================================================
   Contact Us page (contact.html) — Figma "Contact Us — Desktop" 1331:3434 / "— Mobile" 1331:3637
   ========================================================================== */
.ct-form { display: flex; flex-direction: column; align-items: stretch; }
.ct-row { display: flex; }
.ct-field { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; }
.ct-label { font-weight: 500; color: var(--blue); line-height: 1.2; }
.ct-input {
  display: block; width: 100%; margin: 0; background: #fff; color: var(--deep);
  border: calc(1.5 * var(--u)) solid rgba(35, 74, 220, .35); border-radius: calc(14 * var(--u));
  font-family: inherit; font-weight: 400; line-height: 1.3;
  transition: border-color .2s ease, box-shadow .2s ease; -webkit-appearance: none; appearance: none;
}
.ct-input::placeholder { color: #b2bddb; opacity: 1; }
@media (hover: hover) { .ct-input:hover { border-color: rgba(35, 74, 220, .6); } }
.ct-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(35, 74, 220, .15); }
.ct-input[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 3px rgba(210, 13, 26, .12); }
.ct-input--area { resize: vertical; }
.ct-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ct-status { margin: 0; font-weight: 500; line-height: 1.4; color: var(--blue); }
.ct-status.is-error { color: var(--red); }
.ct-status.is-ok { color: #067a2b; }
.ct-actions { display: flex; }
button.ct-submit { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
button.ct-submit:disabled { cursor: progress; opacity: .7; }
button.ct-submit:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; border-radius: 999px; }
.ct-submit .btn-reg__outline { border-color: var(--blue); }
@media (hover: hover) { .ct-submit:hover .btn-reg__pill { border-color: var(--blue); } }
@media (min-width: 1024px) {
  .ct-form { width: calc(800 * var(--u)); gap: calc(28 * var(--u)); }
  .ct-row { gap: calc(16 * var(--u)); }
  .ct-field { gap: calc(10 * var(--u)); }
  .ct-label { font-size: max(12px, calc(16 * var(--u))); }
  .ct-input { height: calc(56 * var(--u)); padding: 0 calc(18 * var(--u)); font-size: max(14px, calc(18 * var(--u))); }
  .ct-input--area { height: calc(168 * var(--u)); padding: calc(16 * var(--u)) calc(18 * var(--u)); }
  .ct-status { font-size: max(13px, calc(17 * var(--u))); }
  .ct-actions { padding-top: calc(8 * var(--u)); }
  .ct-submit { width: calc(300 * var(--u)); height: calc(62 * var(--u)); }
  .ct-submit .btn-reg__outline { left: calc(4 * var(--u)); right: calc(4 * var(--u)); top: 0; height: calc(56 * var(--u)); border-width: calc(1.5 * var(--u)); }
  .ct-submit .btn-reg__pill { left: 0; right: 0; top: calc(6 * var(--u)); height: calc(56 * var(--u)); border-width: calc(1.5 * var(--u)); font-size: max(16px, calc(24 * var(--u))); letter-spacing: calc(-.24 * var(--u)); }
}
@media (max-width: 1023.98px) {
  .ct.ab { padding-top: calc(8 * var(--u)); }
  .ct-form { width: 100%; gap: calc(22 * var(--u)); }
  .ct-row { flex-direction: column; gap: calc(22 * var(--u)); }
  .ct-field { gap: calc(10 * var(--u)); }
  .ct-label { font-size: calc(15 * var(--u)); }
  .ct-input { height: calc(52 * var(--u)); padding: 0 calc(18 * var(--u)); font-size: calc(16 * var(--u)); }
  .ct-input--area { height: calc(148 * var(--u)); padding: calc(16 * var(--u)) calc(18 * var(--u)); }
  .ct-status { font-size: calc(15 * var(--u)); }
  .ct-submit { width: 100%; height: calc(62 * var(--u)); }
  .ct-submit .btn-reg__outline { left: calc(4 * var(--u)); right: calc(4 * var(--u)); top: 0; height: calc(56 * var(--u)); border-width: calc(1.5 * var(--u)); }
  .ct-submit .btn-reg__pill { left: 0; right: 0; top: calc(6 * var(--u)); height: calc(56 * var(--u)); border-width: calc(1.5 * var(--u)); font-size: calc(24 * var(--u)); letter-spacing: calc(-.24 * var(--u)); }
}