/* =========================================================
   FinMinds - Design System Foundation (Phase 3)
   Redesign direction: premium editorial European business
   conference. High-contrast dark/cream sections, one accent,
   confident type scale, restrained decoration - hairline
   borders instead of shadow cards, limited/no rounded corners,
   no pill buttons, no glassmorphism, no generic SaaS cards.
   ========================================================= */

/* ---- Self-hosted fonts ---- */
@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/bebas-neue-v16-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/bebas-neue-v16-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF;
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/inter-tight-v9-latin-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/inter-tight-v9-latin-ext-variable.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF;
}

/* ---- Design tokens ---- */
:root {
  /* Brand palette - kept from existing identity, applied more confidently */
  --cream: #f4f0ea;
  --cream-deep: #eae4d9;
  --ink: #100e0b;
  --ink-soft: #221c16;
  --near-black: #070605;
  --gold: #b98a3d;
  --gold-light: #d9ad63;
  --gold-dark: #8a672d;
  --line-on-cream: rgba(16, 14, 11, 0.14);
  --line-on-dark: rgba(244, 240, 234, 0.16);
  --text-on-cream: #221c16;
  --text-on-cream-muted: #5c5044;
  --text-on-dark: #f4f0ea;
  --text-on-dark-muted: #b9ada0;
  --white: #ffffff;

  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-body: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale - confident, editorial */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.3rem;
  --display-xs: clamp(1.7rem, 1.4rem + 1.4vw, 2.2rem);
  --display-sm: clamp(2.1rem, 1.7rem + 2vw, 2.9rem);
  --display-md: clamp(2.8rem, 2.1rem + 3.4vw, 4.6rem);
  --display-lg: clamp(3.6rem, 2.4rem + 5.6vw, 6.8rem);
  --display-xl: clamp(4.4rem, 2.4rem + 9vw, 9.5rem);

  /* Spacing scale (4px base) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* Restrained radius - no pill shapes, minimal rounding only */
  --radius-sm: 2px;
  --radius-md: 3px;

  /* Layout */
  --container-max: 1320px;
  --gutter: 24px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 720px) {
  :root {
    --gutter: 40px;
  }
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--text-on-cream);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; height: auto; }
/* contents: the <picture> wrapper eleventy-img adds should be invisible to
   layout - its <img> behaves exactly as if it were a direct child of
   whatever sizes it (grid/flex stretch, width/height:100%, absolute
   positioning). <source> children are never rendered regardless. */
picture { display: contents; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.98;
  color: var(--ink);
}

/* ---- Layout primitives ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(var(--sp-8), 8vw, var(--sp-10)); }
.section--tight { padding-block: clamp(var(--sp-6), 5vw, var(--sp-8)); }

.section-dark { background: var(--ink); color: var(--text-on-dark); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--white); }
.section-dark p { color: var(--text-on-dark-muted); }

.section-darker { background: var(--near-black); color: var(--text-on-dark); }
.section-darker h1, .section-darker h2, .section-darker h3, .section-darker h4 { color: var(--white); }

.hairline-top { border-top: 1px solid var(--line-on-cream); }
.hairline-bottom { border-bottom: 1px solid var(--line-on-cream); }
.section-dark.hairline-top, .section-darker.hairline-top { border-top-color: var(--line-on-dark); }
.section-dark.hairline-bottom, .section-darker.hairline-bottom { border-bottom-color: var(--line-on-dark); }

/* ---- Section heading primitive ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-dark);
}
.section-dark .eyebrow, .section-darker .eyebrow { color: var(--gold-light); }

.context-heading {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

.section-heading { max-width: 46rem; }
.section-heading h2 { font-size: var(--display-md); margin-top: var(--sp-3); }
.section-heading p { margin-top: var(--sp-4); font-size: var(--text-lg); color: var(--text-on-cream-muted); max-width: 42rem; }
.section-dark .section-heading p, .section-darker .section-heading p { color: var(--text-on-dark-muted); }

.lede { font-size: var(--text-xl); color: var(--text-on-cream-muted); max-width: 60ch; }

/* ---- Buttons - sharp, restrained, no pills ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1.5px solid transparent;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn:hover { transform: translateY(-1px); }

.btn-primary { background: var(--ink); color: var(--white); }
.btn-primary:hover { background: var(--near-black); }

.btn-cta { background: var(--gold); color: var(--ink); }
.btn-cta:hover { background: var(--gold-light); }

.btn-outline { border-color: currentColor; color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--white); }
.section-dark .btn-outline, .section-darker .btn-outline, .hero .btn-outline { color: var(--white); }
.section-dark .btn-outline:hover, .section-darker .btn-outline:hover, .hero .btn-outline:hover { background: var(--white); color: var(--ink); }

.btn-text {
  padding: 0;
  border-radius: 0;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1.5px solid var(--gold);
}
.section-dark .btn-text, .section-darker .btn-text { color: var(--white); }
.btn-text:hover { color: var(--gold-dark); }

.btn-block { width: 100%; }
.btn-sm { padding: 10px 18px; }

/* ---- Skip link / focus ---- */
.skip-link {
  position: fixed;
  top: -48px;
  left: 16px;
  z-index: 1000;
  background: var(--ink);
  color: var(--white);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 16px; }
:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--ink);
}

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

/* ---- Motion ---- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* =========================================================
   Navbar
   ========================================================= */
.brand { display: flex; align-items: center; gap: 10px; }
.brand__mark { width: 30px; height: 30px; flex-shrink: 0; }
.brand__word { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.02em; line-height: 1; color: var(--ink); }

/* Header/drawer brand lockup: larger mark, tighter gap than the footer's
   more modest use of the same .brand component - a deliberate, confident
   lockup where the header is the primary brand moment on the page. */
.site-header .brand, .mobile-menu .brand { gap: 8px; }
.site-header .brand__mark, .mobile-menu .brand__mark { width: 38px; height: 38px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(244, 240, 234, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-on-cream);
}

.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: 20px;
}

.primary-nav { display: none; align-items: center; gap: var(--sp-6); }
.primary-nav a {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-on-cream-muted);
  position: relative;
  padding-block: 4px;
}
.primary-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -3px; height: 1.5px; width: 0;
  background: var(--gold); transition: width 0.25s var(--ease);
}
.primary-nav a:hover, .primary-nav a[aria-current="page"] { color: var(--ink); }
.primary-nav a:hover::after, .primary-nav a[aria-current="page"]::after { width: 100%; }

.site-header__actions { display: flex; align-items: center; gap: var(--sp-4); }
.site-header__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-on-cream);
  color: var(--ink);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.site-header__social:hover { color: var(--gold-dark); border-color: var(--gold-dark); background: var(--white); }
.site-header__social svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.site-header__social-dot { fill: currentColor; stroke: none; }

.menu-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 8px;
}
.menu-toggle span { display: block; height: 1.5px; width: 100%; background: var(--ink); }

@media (min-width: 960px) {
  .site-header__row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .site-header .brand { justify-self: start; }
  .primary-nav { display: flex; }
  .site-header__actions { justify-self: end; }
  .menu-toggle { display: none; }
}
@media (max-width: 480px) {
  .btn-cta.site-header__cta { display: none; }
}

/* ---- Mobile menu (drawer) ---- */
.mobile-menu {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(88vw, 400px);
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  background: var(--ink);
  color: var(--white);
  z-index: 200;
  padding: var(--sp-5) var(--sp-5) var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
  transform: translateX(100%);
  transition: transform 0.32s var(--ease);
}
.mobile-menu[data-open] { transform: none; }
.mobile-menu .brand__word { color: var(--white); }

.mobile-menu__head { display: flex; align-items: center; justify-content: space-between; }
.menu-close { width: 40px; height: 40px; position: relative; }
.menu-close span {
  position: absolute; top: 50%; left: 50%; width: 20px; height: 1.5px; background: var(--white);
}
.menu-close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.menu-close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }

.mobile-menu__nav { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.mobile-menu__nav a {
  font-family: var(--font-display);
  font-size: var(--display-xs);
  padding-block: var(--sp-2);
  color: var(--white);
  border-bottom: 1px solid var(--line-on-dark);
}
.mobile-menu__nav a[aria-current="page"] { color: var(--gold-light); }

.mobile-menu__scrim {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(7, 6, 5, 0.5);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.mobile-menu__scrim[data-open] { opacity: 1; }

body.menu-open { overflow: hidden; }

@media (min-width: 960px) {
  .mobile-menu, .mobile-menu__scrim { display: none; }
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer { background: var(--near-black); color: var(--text-on-dark-muted); padding-block: var(--sp-9) var(--sp-6); }
.site-footer .brand__word { color: var(--white); }

.site-footer__top {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid var(--line-on-dark);
}
@media (min-width: 720px) {
  .site-footer__top { grid-template-columns: 1.4fr 1fr 1fr; }
}

.site-footer__brand p { margin-top: var(--sp-3); max-width: 32ch; font-size: var(--text-sm); }

.label {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-light); margin-bottom: var(--sp-4);
}

.site-footer__nav, .site-footer__contact { display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--text-sm); }
.site-footer__nav a:hover, .site-footer__contact a:hover { color: var(--white); }

.site-footer__bottom {
  margin-top: var(--sp-6);
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between;
  font-size: var(--text-xs);
}
.site-footer__bottom a:hover { color: var(--white); }

/* ---- Footer venue map -----------------------------------
   Isolated block: safe to delete this rule set + the
   .footer-map markup in footer.njk to fully restore the
   previous footer with no other side effects.
   ------------------------------------------------------- */
.footer-map { margin-top: var(--sp-5); }
.footer-map__frame-wrap {
  width: 100%;
  height: 200px;
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--near-black);
}
.footer-map__frame { display: block; width: 100%; height: 100%; border: 0; }
.footer-map__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--sp-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.footer-map__link:hover { color: var(--white); }
@media (min-width: 720px) {
  .footer-map__frame-wrap { max-width: 300px; height: 165px; }
}

/* =========================================================
   Generic content primitives (used by skeleton inner pages
   until Phase 4/5 bespoke composition)
   ========================================================= */
.prose p + p { margin-top: var(--sp-4); }
.prose p { font-size: var(--text-lg); color: var(--text-on-cream-muted); max-width: 68ch; }
.section-dark .prose p, .section-darker .prose p { color: var(--text-on-dark-muted); }

.simple-grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 640px) { .simple-grid--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 720px) { .simple-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 860px) { .simple-grid--4 { grid-template-columns: repeat(4, 1fr); } }

.simple-card {
  border: 1px solid var(--line-on-cream);
  border-radius: var(--radius-sm);
  padding: var(--sp-5);
}
.section-dark .simple-card, .section-darker .simple-card { border-color: var(--line-on-dark); }

.simple-card__media { aspect-ratio: 1 / 1; overflow: hidden; margin-bottom: var(--sp-4); border-radius: var(--radius-sm); background: var(--cream-deep); }
.simple-card__media img { width: 100%; height: 100%; object-fit: cover; }

.simple-card h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-base); color: var(--ink); }
.section-dark .simple-card h3, .section-darker .simple-card h3 { color: var(--white); }
.simple-card .role { font-size: var(--text-sm); color: var(--gold-dark); font-weight: 600; margin-top: 4px; }
.section-dark .simple-card .role, .section-darker .simple-card .role { color: var(--gold-light); }
.simple-card p.bio { margin-top: var(--sp-3); font-size: var(--text-sm); color: var(--text-on-cream-muted); }

.pill-tag {
  display: inline-block; padding: 5px 12px; border: 1px solid var(--line-on-cream);
  border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-dark);
}
.section-dark .pill-tag, .section-darker .pill-tag { border-color: var(--line-on-dark); color: var(--gold-light); }
/* Modifier for the "2026 opportunity details..." notice only: the
   inherited line-height left uneven leading above/below the all-caps
   text, reading as visually off-center within the border. Resetting
   line-height to the font's own natural metrics for this instance
   removes that leading asymmetry at the source (padding/border/font/
   copy are all untouched). Scoped so every other .pill-tag usage
   (role tags, "coming soon" notices) is unaffected. */
.pill-tag--notice { line-height: normal; }

.section-dark .pill-tag, .section-darker .pill-tag { border-color: var(--line-on-dark); color: var(--gold-light); }

/* =========================================================
   Phase 4 - Homepage composition
   Editorial, asymmetric, photography-led. Deliberately NOT a
   repeating card-grid pattern - each section has its own shape.
   ========================================================= */

/* ---- B. Hero: 58/42 split, photo bleeds to the edge ---- */
.hero-split {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 56vh;
}
.hero-split > * { min-width: 0; }
@media (min-width: 960px) {
  .hero-split {
    grid-template-columns: minmax(0, 58%) 1fr;
    min-height: min(92vh, 840px);
  }
}

.hero-split__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(var(--sp-8), 10vh, var(--sp-10)) var(--gutter) var(--sp-8);
}

.hero-split__media {
  position: relative;
  min-height: 42vh;
  order: -1;
}
@media (min-width: 960px) {
  .hero-split__media { min-height: auto; order: 0; }
}
.hero-split__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

/* Progressive-enhancement video layer. Sits on top of the (always
   present, always real) hero photo and only becomes visible once
   src/js/hero-video.js confirms it is actually playing - see that
   file for the full fallback chain. Static photo is the default
   and the fallback; nothing here can leave the hero without an
   image. */
.hero-split__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s var(--ease);
  pointer-events: none;
}
.hero-split__video.is-playing { opacity: 1; }

.hero-split__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, var(--ink) 0%, rgba(16,14,11,0) 32%);
}
@media (min-width: 960px) {
  .hero-split__media::after {
    background: linear-gradient(90deg, var(--ink) 0%, rgba(16,14,11,0.05) 22%, rgba(16,14,11,0) 45%);
  }
}

.hero-eyebrow { color: var(--gold-light); flex-wrap: wrap; }
.hero-eyebrow::before { display: none; }
.hero-eyebrow__separator { color: var(--text-on-dark-muted); }
.hero-powered { display: inline-flex; align-items: center; gap: 7px; }

.hero-split h1 {
  font-size: var(--display-xl);
  color: var(--white);
  margin-top: var(--sp-3);
}

.hero-meta {
  margin-top: var(--sp-5);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
}

.hero-split p.supporting {
  margin-top: var(--sp-3);
  font-size: var(--text-lg);
  color: var(--text-on-dark-muted);
  max-width: 40ch;
}

.hero-split__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); }

/* ---- C. Event metrics ---- */
.metric-strip { display: flex; flex-direction: column; row-gap: var(--sp-6); }
.metric-strip__item {
  padding-bottom: var(--sp-6);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--line-on-cream);
}
.metric-strip__item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
@media (min-width: 640px) {
  .metric-strip { flex-direction: row; flex-wrap: wrap; }
  .metric-strip__item {
    flex: 1 1 150px;
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
    padding-right: var(--sp-6);
    margin-right: var(--sp-6);
    border-right: 1px solid var(--line-on-cream);
  }
  .metric-strip__item:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
}
.metric-strip__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw, 3.4rem);
  color: var(--ink);
  line-height: 0.92;
  font-variant-numeric: tabular-nums;
}
.metric-strip__label {
  margin-top: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--text-on-cream-muted);
  max-width: 20ch;
}

/* ---- E / F. Editorial asymmetric split (Experience / Opportunities) ---- */
.editorial-split {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .editorial-split { grid-template-columns: 0.9fr 1.1fr; align-items: stretch; gap: var(--sp-9); }
  .editorial-split--reverse { grid-template-columns: 1.1fr 0.9fr; }
  .editorial-split--reverse .editorial-split__media { order: 2; }
}
.editorial-split > * { min-width: 0; }
/* width/height 100% (not aspect-ratio) deliberately: a stretched grid
   item combining align-items:stretch with aspect-ratio can recompute its
   inline size from the ratio and overflow its track ("grid blowout") once
   the sibling column's content makes the row taller than the ratio would
   naturally produce. Filling the resolved grid-area avoids that entirely;
   object-fit:cover on the image still crops sensibly at any resulting box. */
.editorial-split__media { width: 100%; height: 100%; overflow: hidden; min-height: 0; }
.editorial-split__media img { width: 100%; height: 100%; object-fit: cover; }

.editorial-list { display: flex; flex-direction: column; }
.editorial-list__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-5);
  padding-block: var(--sp-6);
  border-top: 1px solid var(--line-on-cream);
}
.section-dark .editorial-list__item, .section-darker .editorial-list__item { border-top-color: var(--line-on-dark); }
.editorial-list__item:last-child { border-bottom: 1px solid var(--line-on-cream); }
.section-dark .editorial-list__item:last-child, .section-darker .editorial-list__item:last-child { border-bottom-color: var(--line-on-dark); }

.editorial-list__num { font-family: var(--font-display); font-size: var(--display-xs); color: var(--gold-dark); line-height: 1; }
.section-dark .editorial-list__num, .section-darker .editorial-list__num { color: var(--gold); }
.editorial-list__item h3 { font-size: var(--display-xs); color: var(--ink); }
.section-dark .editorial-list__item h3, .section-darker .editorial-list__item h3 { color: var(--white); }
.editorial-list__item p { margin-top: var(--sp-2); color: var(--text-on-cream-muted); max-width: 52ch; }
.section-dark .editorial-list__item p, .section-darker .editorial-list__item p { color: var(--text-on-dark-muted); }

.opportunity-entry h3 { font-size: var(--display-sm); }
.opportunity-entry .role { display: block; margin-top: 4px; }
.opportunity-facts {
  margin-top: var(--sp-5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5) var(--sp-5);
  font-size: var(--text-sm);
}
.opportunity-facts dt {
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: var(--text-xs);
  color: var(--gold-light);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-on-dark);
  margin-bottom: 8px;
}
.opportunity-facts dd { margin: 0; color: var(--text-on-dark-muted); }

/* ---- G. Speakers preview: featured + secondary ---- */
.speaker-feature {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .speaker-feature { grid-template-columns: 1.3fr 1fr; gap: var(--sp-8); }
}
.speaker-feature > * { min-width: 0; }
/* width/height 100%, not aspect-ratio - see .editorial-split__media comment
   for why (avoids a grid stretch + aspect-ratio blowout). */
.speaker-feature__media { width: 100%; height: 100%; overflow: hidden; min-height: 0; }
.speaker-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.speaker-feature__body { display: flex; flex-direction: column; justify-content: flex-end; }
.speaker-feature__body h3 { font-size: var(--display-md); }

.speaker-secondary-list { display: flex; flex-direction: column; margin-top: var(--sp-6); }
@media (min-width: 860px) { .speaker-secondary-list { margin-top: 0; } }
.speaker-secondary {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--sp-4);
  align-items: center;
  padding-block: var(--sp-4);
  border-top: 1px solid var(--line-on-cream);
}
.speaker-secondary:last-child { border-bottom: 1px solid var(--line-on-cream); }
.speaker-secondary__media { width: 72px; height: 72px; overflow: hidden; border-radius: var(--radius-sm); }
.speaker-secondary__media img { width: 100%; height: 100%; object-fit: cover; }
.speaker-secondary h4 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-base); color: var(--ink); }

/* ---- H. Program preview: typographic split ---- */
.program-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line-on-dark);
}
@media (min-width: 720px) {
  .program-split { grid-template-columns: 1fr 1fr; }
}
.program-split__day {
  background: var(--ink);
  padding: var(--sp-8) var(--gutter);
}
.program-split__day .eyebrow { justify-content: flex-start; }
.program-split__day h3 { font-size: var(--display-lg); color: var(--white); margin-top: var(--sp-3); }
.program-split__day p { margin-top: var(--sp-3); color: var(--text-on-dark-muted); font-size: var(--text-lg); }

/* ---- I. Previous edition proof ---- */
.evidence-block {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .evidence-block { grid-template-columns: 1fr 1fr; gap: var(--sp-9); }
}
.evidence-block > * { min-width: 0; }
.evidence-block__media { aspect-ratio: 4 / 3; overflow: hidden; min-height: 0; }
.evidence-block__media img { width: 100%; height: 100%; object-fit: cover; }
.evidence-block__stats { display: flex; gap: var(--sp-7); margin-top: var(--sp-6); }
.evidence-block__stats strong { display: block; font-family: var(--font-display); font-size: var(--display-sm); color: var(--gold-dark); line-height: 1; }
.evidence-block__stats span { display: block; margin-top: var(--sp-2); font-size: var(--text-sm); color: var(--text-on-cream-muted); }

/* ---- K. Final ticket CTA ---- */
.final-cta {
  position: relative;
  overflow: hidden;
  scroll-margin-top: 72px;
}
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: clamp(4px, 0.7vw, 10px);
  background: var(--gold);
}
.final-cta__layout { display: grid; gap: var(--sp-7); align-items: start; }
.final-cta__intro { padding-top: var(--sp-4); }
.final-cta__intro h2 { font-size: var(--display-lg); color: var(--white); max-width: 12ch; }
.final-cta__intro p { margin-top: var(--sp-4); color: var(--text-on-dark-muted); max-width: 34ch; }
.ticket-shop {
  --pretix-brand-primary: var(--gold-dark);
  --pretix-brand-primary-darken-5: #8f6700;
  --pretix-brand-primary-darken-10: #765500;
  --pretix-border-radius-base: var(--radius-sm);
  --pretix-border-radius-large: var(--radius-md);
  --pretix-border-radius-small: var(--radius-sm);
  padding: clamp(var(--sp-4), 4vw, var(--sp-7));
  background: var(--cream);
  border-left: 4px solid var(--gold);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
  color: var(--ink);
  text-align: left;
}
.ticket-shop .pretix-widget { font-family: var(--font-body); }
.ticket-shop .pretix-widget-item-title,
.ticket-shop .pretix-widget-voucher-headline,
.ticket-shop .pretix-widget-category-name,
.ticket-shop .pretix-widget-item-description > p:not([class]) {
  color: var(--ink);
}
.ticket-shop__special {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-on-cream);
}
.ticket-shop__special > p { font-size: var(--text-sm); font-weight: 700; color: var(--ink); }
.ticket-shop__special-actions { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
.ticket-shop__special-actions .btn { width: 100%; }
.ticket-shop__special-actions .btn-outline { color: var(--ink); border-color: var(--ink); }
.ticket-shop__special-actions .btn-outline:hover { color: var(--white); background: var(--ink); }
@media (min-width: 560px) {
  .ticket-shop__special-actions { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .final-cta__layout { grid-template-columns: minmax(0, 0.8fr) minmax(32rem, 1.2fr); gap: var(--sp-9); }
}

/* =========================================================
   Phase 5 - Inner-page components
   Same tokens/vocabulary as the homepage, but distinct shapes:
   zigzag profiles, index lists, chapter bands, a timeline,
   a mosaic gallery, a masthead list. None of these repeat a
   homepage section pattern at a larger size.
   ========================================================= */

/* Page intro - compact, not a full hero-split */
.page-intro { padding-block: clamp(var(--sp-8), 9vw, var(--sp-9)) var(--sp-7); }
.page-intro h1 { font-size: var(--display-lg); margin-top: var(--sp-3); }
.page-intro p.lede { margin-top: var(--sp-4); }

/* ---- Zigzag profile rows (Speakers page) ---- */
.profile-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  padding-block: var(--sp-8);
  border-top: 1px solid var(--line-on-cream);
}
.profile-row:last-child { border-bottom: 1px solid var(--line-on-cream); }
@media (min-width: 860px) {
  .profile-row { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--sp-9); }
  .profile-row--reverse .profile-row__media { order: 2; }
}
.profile-row__media { aspect-ratio: 5 / 4; overflow: hidden; }
.profile-row__media img { width: 100%; height: 100%; object-fit: cover; }
.profile-row__body h3 { font-size: var(--display-md); }
.profile-row__body .role { display: block; margin-top: var(--sp-2); font-size: var(--text-lg); color: var(--text-on-cream-muted); }
.profile-row__body .org { display: block; margin-top: 2px; font-weight: 600; color: var(--gold-dark); }
.profile-row__body p.bio { margin-top: var(--sp-4); color: var(--text-on-cream-muted); max-width: 52ch; }
.profile-row__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-4); }

/* ---- Speakers: Alain as the featured historical speaker - wider, ----
   taller and larger-typed than the base .profile-row, so the page
   reads "this is the featured one" before any text is read. Image
   takes ~56% of the row (vs the base 50/50) and a near-square crop
   for more vertical presence than the base 5:4. */
@media (min-width: 860px) {
  .profile-row--featured { grid-template-columns: 1.3fr 1fr; gap: var(--sp-10); }
}
.profile-row--featured .profile-row__media { aspect-ratio: 1 / 1; }
.profile-row--featured .profile-row__media img { object-position: 42% center; }
.profile-row--featured .profile-row__body h3 { font-size: var(--display-lg); }
.profile-row--featured .profile-row__body .role { font-size: var(--text-xl); }
.profile-row--featured .profile-row__body p.bio { font-size: var(--text-lg); max-width: 46ch; }

/* ---- Speakers: 2026 full-list rows - the poster artwork is already
   4:5 finished artwork (not a plain headshot), so its own media box
   keeps that exact ratio instead of the base row's 5:4 crop. Anchor
   target for the poster slider above; scroll-margin-top clears the
   sticky header (measured at ~93px desktop / ~81px mobile - 100px
   covers both with a small gutter to spare). */
/* No hairlines between 2026 profiles - spacing/typography carry the
   rhythm instead of long rules (padding-block is already inherited
   from the base .profile-row; this only cancels the border). */
.profile-row--poster { scroll-margin-top: 100px; border-top: 0; }
.profile-row--poster:last-child { border-bottom: 0; }
.profile-row--poster .profile-row__media { aspect-ratio: 4 / 5; max-width: 420px; }
@media (min-width: 860px) { .profile-row--poster .profile-row__media { max-width: none; } }

/* ---- Index list (Jury on /speakers/, roster on /about/) ---- */
.index-list { display: grid; grid-template-columns: 1fr; }
@media (min-width: 640px) { .index-list--2col { grid-template-columns: 1fr 1fr; column-gap: var(--sp-7); } }
.index-list__item {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--line-on-dark);
}
.index-list--light .index-list__item { border-top-color: var(--line-on-cream); }
.index-list__media { width: 56px; height: 56px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; background: var(--near-black); }
.index-list__media img { width: 100%; height: 100%; object-fit: cover; }
.index-list__item h4 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-base); color: var(--white); }
.index-list--light .index-list__item h4 { color: var(--ink); }
.index-list__item p { font-size: var(--text-sm); color: var(--text-on-dark-muted); margin-top: 2px; }
.index-list--light .index-list__item p { color: var(--text-on-cream-muted); }

/* ---- Chapter band (full-width day / step spreads) ---- */
.chapter-band { padding-block: clamp(var(--sp-8), 10vw, var(--sp-10)); }
.chapter-band__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: center; }
@media (min-width: 860px) { .chapter-band__grid--media { grid-template-columns: 1fr 1fr; gap: var(--sp-9); align-items: center; } }
.chapter-band__num { font-family: var(--font-display); font-size: var(--display-xl); line-height: 0.85; color: var(--gold-dark); opacity: 0.9; }
.section-dark .chapter-band__num, .section-darker .chapter-band__num { color: var(--gold); }
.chapter-band h2 { font-size: var(--display-lg); margin-top: var(--sp-3); }
.chapter-band p.lede { margin-top: var(--sp-4); max-width: 46ch; }
.chapter-band__media { aspect-ratio: 4 / 3; overflow: hidden; }
.chapter-band__media img { width: 100%; height: 100%; object-fit: cover; }
.chapter-band__caption {
  margin-top: var(--sp-3);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-on-cream-muted);
}
.chapter-band__caption span { display: block; font-weight: 400; letter-spacing: 0.04em; margin-top: 2px; opacity: 0.8; }

/* Inline fact line - alternative to the homepage's dt/dd grid */
.fact-line { display: flex; flex-wrap: wrap; gap: var(--sp-7); margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line-on-dark); }
.section:not(.section-dark):not(.section-darker) .fact-line { border-top-color: var(--line-on-cream); }
.fact-line__item dt { font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--text-xs); color: var(--gold-light); }
.section:not(.section-dark):not(.section-darker) .fact-line__item dt { color: var(--gold-dark); }
.fact-line__item dd { margin: 6px 0 0; font-size: var(--text-sm); max-width: 26ch; }

/* ---- Timeline (Previous Editions full schedule) ---- */
.timeline { display: flex; flex-direction: column; }
.timeline__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  padding-block: var(--sp-6);
  border-top: 1px solid var(--line-on-cream);
}
.timeline__item:last-child { border-bottom: 1px solid var(--line-on-cream); }
@media (min-width: 720px) {
  .timeline__item { grid-template-columns: 160px 1fr; gap: var(--sp-6); }
}
.timeline__time { font-family: var(--font-display); font-size: var(--display-xs); color: var(--gold-dark); line-height: 1; }
.timeline__time span { display: block; font-family: var(--font-body); font-weight: 600; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-on-cream-muted); margin-top: 6px; }
.timeline__item h3 { font-size: var(--display-xs); }
.timeline__item p { margin-top: var(--sp-2); color: var(--text-on-cream-muted); max-width: 60ch; }

/* ---- Mosaic gallery (Previous Editions) ---- */
.mosaic-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 130px;
  gap: 6px;
}
@media (min-width: 640px) { .mosaic-gallery { grid-auto-rows: 180px; } }
.mosaic-gallery__item { overflow: hidden; grid-column: span 2; grid-row: span 2; }
.mosaic-gallery__item--wide { grid-column: span 4; grid-row: span 2; }
@media (min-width: 640px) {
  .mosaic-gallery__item--lg { grid-column: span 2; grid-row: span 3; }
  .mosaic-gallery__item--wide { grid-column: span 2; grid-row: span 2; }
}
.mosaic-gallery__item img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Masthead list (About: Edition 1 roster) ---- */
.masthead-list {
  columns: 1;
  column-gap: var(--sp-7);
}
@media (min-width: 640px) { .masthead-list { columns: 2; } }
@media (min-width: 960px) { .masthead-list { columns: 3; } }
.masthead-list__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-top: 1px solid var(--line-on-cream);
  break-inside: avoid;
}
.masthead-list__media { width: 44px; height: 44px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; }
.masthead-list__media img { width: 100%; height: 100%; object-fit: cover; }
.masthead-list__item h4 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-sm); color: var(--ink); }
.masthead-list__item p { font-size: var(--text-xs); color: var(--text-on-cream-muted); margin-top: 1px; }

/* ---- Lead trio (About: Edition 2 leads) ---- */
.lead-trio { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.lead-trio__item { display: flex; align-items: center; gap: var(--sp-4); }
.lead-trio__media { width: 84px; height: 84px; border-radius: 999px; overflow: hidden; flex-shrink: 0; }
.lead-trio__media img { width: 100%; height: 100%; object-fit: cover; }
.lead-trio__item h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-lg); color: var(--white); }
.lead-trio__item .role { display: block; margin-top: 2px; font-size: var(--text-sm); color: var(--gold-light); }

/* ---- Pull quote (About story) ---- */
.pull-statement { font-size: var(--display-md); max-width: 18ch; }
.pull-statement em { font-style: normal; color: var(--gold-dark); }
.section-dark .pull-statement em, .section-darker .pull-statement em { color: var(--gold-light); }

/* ---- Opportunities: shared logo + eyebrow header (IE + ING) ---- */
.opportunity-head {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.opportunity-head__logo { width: clamp(72px, 8vw, 108px); flex-shrink: 0; }
.opportunity-head__logo img { width: 100%; height: auto; display: block; }
.opportunity-head__logo--wordmark { width: clamp(96px, 9vw, 132px); }

/* ---- IE flagship opportunity: tower contained in the right half. ---- */
.ie-flagship { position: relative; overflow: hidden; padding-block: clamp(var(--sp-9), 10vw, var(--sp-10)); }
.ie-flagship__backdrop {
  position: absolute;
  inset: 0 0 0 50%;
  z-index: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* width:100%/height:auto (rather than height:100% + object-fit:contain) so the
   <img> element's own box matches the actual visible photo with no invisible
   letterbox padding - otherwise the top-15% mask below would land on empty
   space above the image instead of the image itself. */
.ie-flagship__backdrop img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(0.6) sepia(0.15);
  opacity: 0.65;
  mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 100%);
}
.ie-flagship__backdrop::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--cream) 0%,
    rgba(244, 240, 234, 0.88) 18%,
    rgba(244, 240, 234, 0.42) 58%,
    rgba(244, 240, 234, 0.14) 100%
  );
}
@media (max-width: 720px) {
  .ie-flagship__backdrop img { opacity: 0.48; }
}
.ie-flagship__content { position: relative; z-index: 1; }
.ie-flagship h2 { font-size: var(--display-lg); margin-top: var(--sp-4); }
.ie-flagship__explainer { margin-top: var(--sp-6); max-width: 60ch; color: var(--text-on-cream-muted); font-size: var(--text-lg); }

/* ---- Editorial fact treatment - confirmed facts as typography, ----
   not tiny metadata. Shared by IE (3 facts) and ING (1 fact). */
.flagship-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8) var(--sp-9);
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-on-cream);
}
.section-dark .flagship-facts, .section-darker .flagship-facts { border-top-color: var(--line-on-dark); }
.flagship-facts__value {
  font-family: var(--font-display);
  font-size: var(--display-sm);
  line-height: 0.95;
  color: var(--ink);
}
.section-dark .flagship-facts__value, .section-darker .flagship-facts__value { color: var(--white); }
.flagship-facts__item--lead .flagship-facts__value { font-size: var(--display-md); color: var(--gold-dark); }
.section-dark .flagship-facts__item--lead .flagship-facts__value,
.section-darker .flagship-facts__item--lead .flagship-facts__value { color: var(--gold); }
.flagship-facts__sub { margin-top: 2px; font-family: var(--font-display); font-size: var(--display-xs); line-height: 1; color: var(--text-on-cream-muted); }
.section-dark .flagship-facts__sub, .section-darker .flagship-facts__sub { color: var(--text-on-dark-muted); }
.flagship-facts__label { margin-top: var(--sp-3); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gold-dark); }
.section-dark .flagship-facts__label, .section-darker .flagship-facts__label { color: var(--gold-light); }

/* ---- ING secondary opportunity: darker, corporate, behind-the-scenes ---- */
.ing-feature .pull-statement { font-size: var(--display-sm); max-width: 22ch; margin-top: var(--sp-5); color: var(--white); }
.ing-feature__framing { margin-top: var(--sp-4); max-width: 52ch; color: var(--text-on-dark-muted); }

/* ---- Text reveal: word-by-word fade-in-blur, selected editorial ----
   headings only. main.js wraps each word of a [data-text-reveal="words"]
   heading in .text-reveal__word (inline-block, so wrapping/line-breaks
   are identical to plain text - no layout shift) and adds .is-revealed
   to the heading once, via IntersectionObserver. This file only owns
   the transition itself; the heading's own type styles are untouched. */
.text-reveal__word {
  display: inline-block;
  opacity: 0;
  filter: blur(9px);
  transform: translateY(16px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), filter 0.4s var(--ease);
}
[data-text-reveal].is-revealed .text-reveal__word {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .text-reveal__word { opacity: 1; filter: none; transform: none; transition: none; }
}

/* ---- People rail: one shared editorial horizontal portrait ----
   carousel, reused as-is for every people section on the site
   (About: 2026 team + 2025 team; Speakers: previous edition jury) -
   same markup, same CSS, same main.js behavior everywhere; nothing
   below is section-specific. Native scroll-snap does the actual
   scrolling - touch/trackpad/native keyboard scrolling all work with
   zero JS. main.js only adds prev/next buttons, the numeric counter,
   and disables an arrow at each end; it never replaces native scroll.
   No cards, no shadows, no dots - the portraits themselves carry the
   section, at one consistent aspect ratio, cropped (never distorted)
   toward the top so heads are never cut off. */
.people-rail { margin-top: var(--sp-8); }
.people-rail__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  overflow-anchor: none;
  scroll-snap-type: x proximity;
  /* Must match .people-rail__track's padding-left exactly: without it,
     "start"-aligning item 0 against the padded track means the only
     valid snap position is scrollLeft = that padding, so proximity
     snapping silently scrolls past it on first layout. Telling the
     snap algorithm the snapport itself already starts this far in
     makes scrollLeft 0 the correct, stable resting position for item 0. */
  scroll-padding-left: max(var(--gutter), calc((100vw - var(--container-max)) / 2 + var(--gutter)));
  scrollbar-width: none;
}
.people-rail__viewport::-webkit-scrollbar { display: none; }
.people-rail__track {
  display: flex;
  gap: var(--sp-5);
  margin: 0;
  padding-left: max(var(--gutter), calc((100vw - var(--container-max)) / 2 + var(--gutter)));
  padding-right: var(--gutter);
}
.people-rail__item { scroll-snap-align: start; flex: 0 0 auto; width: 82vw; max-width: 320px; }
@media (min-width: 640px) { .people-rail__item { width: 42vw; max-width: 360px; } }
@media (min-width: 960px) { .people-rail__item { width: 27vw; max-width: 340px; } }

/* ---- 2026 poster lineup: one large poster in focus (infinite loop,
   see data-rail-loop in main.js) below LINEUP_BP, a static 5-column
   lineup wall above it. Below the breakpoint this is the same
   narrow-centered-column, one-at-a-time treatment used throughout
   (goToRelative's one-step-per-click behaves as a classic carousel
   with zero extra JS beyond the loop wrap-around). Above it, the
   track becomes a CSS grid and the clone items main.js adds for
   looping are hidden - looping is meaningless once all 5 are visible
   at once. LINEUP_BP was re-checked when a 5th speaker was added
   (was 1180px for 4 columns): below it, 5 columns start compressing
   the poster typography past comfortable legibility, so the
   breakpoint moved later rather than shrinking the columns to fit. */
.people-rail--lineup { max-width: 560px; margin-inline: auto; padding-inline: var(--gutter); }
.people-rail--lineup .people-rail__viewport { scroll-padding-left: 0; }
.people-rail--lineup .people-rail__track { padding-left: 0; padding-right: 0; }
.people-rail--lineup .people-rail__item { width: 100%; max-width: none; }
.people-rail--lineup .people-rail__controls { padding-inline: 0; }
@media (min-width: 1360px) {
  .people-rail--lineup { max-width: var(--container-max); padding-inline: var(--gutter); }
  .people-rail--lineup .people-rail__viewport { overflow: visible; }
  .people-rail--lineup .people-rail__track { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); }
  .people-rail--lineup .people-rail__item { width: auto; scroll-snap-align: none; }
  .people-rail--lineup .people-rail__item--clone { display: none; }
  .people-rail--lineup .people-rail__controls { display: none; }
}

/* ---- Homepage 2026 speaker teaser rail: a cinematic preview, not
   the full lineup - part of the next poster always peeks at the
   trailing edge (same bleed-track mechanism the base .people-rail
   uses for jury/team, just sized larger for posters), so the rail
   itself signals "there are more speakers" without a counter. Full
   profiles live on /speakers/, which is where this sizing stops
   growing - unlike .people-rail--lineup there is no grid-mode
   breakpoint here, it stays an infinite carousel at every width.
   Below 960px it stays full-bleed edge-to-edge (same mechanism as
   jury/team). At 960px+ the rail itself is width-capped and centered
   (like .people-rail--lineup) rather than left full-bleed: with only
   5 real speakers, an uncapped full-bleed rail on a common 1920px
   desktop showed 4 of them plus most of the 5th simultaneously -
   over the "~3 to 3.5" target, and critically too few items left
   off-screen for main.js's single-clone loop buffer to resolve a
   wrap cleanly (confirmed by testing: the loop visibly jumped several
   speakers instead of stepping one). Capping the rail's own width
   keeps the visible count stable at ~3 real + a peeking 4th
   regardless of how wide the browser window is. */
.people-rail--teaser .people-rail__item { width: 78vw; max-width: 300px; }
@media (min-width: 640px) { .people-rail--teaser .people-rail__item { width: 44vw; max-width: 360px; } }
@media (min-width: 960px) {
  .people-rail--teaser .people-rail__item { width: 30vw; max-width: 390px; }
  .people-rail--teaser { max-width: 1400px; margin-inline: auto; }
  .people-rail--teaser .people-rail__viewport { scroll-padding-left: var(--gutter); }
  .people-rail--teaser .people-rail__track { padding-left: var(--gutter); padding-right: var(--gutter); }
}

.poster-slide { display: block; color: inherit; text-decoration: none; }
.poster-slide__media img { transition: opacity 0.2s var(--ease); object-fit: contain; }
.poster-slide:hover .poster-slide__media img, .poster-slide:focus-visible .poster-slide__media img { opacity: 0.88; }
.poster-slide__cue {
  display: flex; align-items: center; gap: 6px;
  margin-top: var(--sp-3);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold-light);
}
.poster-slide:hover .poster-slide__cue, .poster-slide:focus-visible .poster-slide__cue { color: var(--white); }
.people-rail__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--near-black); }
.people-rail__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.people-rail__name { margin-top: var(--sp-4); font-family: var(--font-body); font-weight: 700; font-size: var(--text-lg); color: var(--white); }
.section:not(.section-dark):not(.section-darker) .people-rail__name { color: var(--ink); }
.people-rail__role { margin-top: 2px; font-size: var(--text-sm); color: var(--text-on-dark-muted); }
.section:not(.section-dark):not(.section-darker) .people-rail__role { color: var(--text-on-cream-muted); }

.people-rail__controls { display: flex; align-items: center; gap: var(--sp-5); margin-top: var(--sp-6); }
.people-rail__arrow {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-on-dark);
  color: var(--white);
  transition: border-color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.section:not(.section-dark):not(.section-darker) .people-rail__arrow { border-color: var(--line-on-cream); color: var(--ink); }
.people-rail__arrow:hover:not(:disabled) { border-color: var(--gold); }
.people-rail__arrow:disabled { opacity: 0.3; }
.people-rail__counter { font-family: var(--font-body); font-weight: 600; font-size: var(--text-xs); letter-spacing: 0.1em; color: var(--text-on-dark-muted); min-width: 5ch; }
.section:not(.section-dark):not(.section-darker) .people-rail__counter { color: var(--text-on-cream-muted); }

@media (prefers-reduced-motion: reduce) {
  .people-rail__viewport { scroll-behavior: auto; }
}

/* ---- Speakers: wide proof photo, full-bleed like .ie-flagship__backdrop's ----
   host (a direct section child, not wrapped in .container). */
.speakers-proof { aspect-ratio: 21 / 9; overflow: hidden; }
.speakers-proof img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; }
@media (max-width: 640px) { .speakers-proof { aspect-ratio: 4 / 3; } }

/* ---- Speakers: Andrei + Philipp paired editorial spread - clearly ----
   secondary to Alain's full .profile-row feature. Both columns use
   minmax(0, 1fr), not plain 1fr: a grid item's default min-width is
   "auto" (its content's min-content size), so with plain 1fr the two
   tracks were only equal when both items' content happened to need the
   same minimum width - in practice one speaker's bio content pushed its
   track wider than the other's, so the two portraits (same aspect-ratio,
   same code) rendered at visibly different sizes. minmax(0, 1fr) forces
   both tracks to actually split the row 50/50 regardless of content, so
   the two equal-aspect-ratio media boxes render pixel-identical. No
   divider between them - the identical frames themselves read as the
   pair; a rule here read as a grid line and made the mismatch worse. */
.speaker-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
@media (min-width: 720px) { .speaker-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); align-items: start; } }
.speaker-pair__item { min-width: 0; padding-top: var(--sp-6); border-top: 1px solid var(--line-on-cream); }
.speaker-pair__item:first-child { padding-top: 0; border-top: 0; }
@media (min-width: 720px) {
  .speaker-pair__item { padding-top: 0; border-top: 0; }
}
.speaker-pair__media { aspect-ratio: 4 / 4.2; overflow: hidden; }
.speaker-pair__media img { width: 100%; height: 100%; object-fit: cover; }
.speaker-pair__item h3 { margin-top: var(--sp-4); font-size: var(--display-xs); }
.speaker-pair__item .role { display: block; margin-top: var(--sp-2); color: var(--text-on-cream-muted); }
.speaker-pair__item .org { display: block; margin-top: 2px; font-weight: 600; color: var(--gold-dark); }
.speaker-pair__item p.bio { margin-top: var(--sp-3); color: var(--text-on-cream-muted); max-width: 42ch; }