/* ==========================================================================
   TEDSports Turin
   Design system + page styles.
   Sections follow the order of the page: tokens, base, primitives, layout,
   then one block per page section.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Fonts — self-hosted, latin subset, swap so text never waits
   -------------------------------------------------------------------------- */
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-tight-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-tight-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/inter-tight-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --red: #ff2b33;
  --red-dark: #d4141c;
  --ink: #0a0a0a;
  --ink-soft: #141416;
  --paper: #f3f2f0;
  --paper-warm: #ebe9e6;
  --white: #ffffff;

  --on-ink: rgba(255, 255, 255, 0.92);
  --on-ink-dim: rgba(255, 255, 255, 0.58);
  --on-ink-faint: rgba(255, 255, 255, 0.14);
  --on-paper: #0a0a0a;
  --on-paper-dim: rgba(10, 10, 10, 0.62);
  --on-paper-faint: rgba(10, 10, 10, 0.14);

  /* Resolved per surface by .section--ink / .section--paper. */
  --fg: var(--on-paper);
  --fg-dim: var(--on-paper-dim);
  --hairline: var(--on-paper-faint);
  --surface: var(--paper);

  --font-display: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --shell: 1560px;
  --gutter: clamp(20px, 4vw, 72px);
  --section-y: clamp(72px, 9vw, 150px);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Motion. Five durations, each with its easing; nothing else is timed
     ad hoc. Reduced motion collapses them all below. */
  --dur-ui: 160ms;            --ease-ui: cubic-bezier(0.2, 0, 0, 1);
  --dur-interaction: 260ms;   --ease-interaction: var(--ease-out);
  --dur-reveal: 700ms;        --ease-reveal: var(--ease-out);
  /* Narrative reveals (speakers, questions, the generic fade-up) are slower
     and gentler than everything else, and on a curve without the snap of
     an expo ease-out: a short fast move at this scale reads as a glitch,
     not as an entrance. */
  --dur-narrative: 1200ms;    --ease-narrative: cubic-bezier(0.215, 0.61, 0.355, 1);
  --stagger-narrative: 140ms;
  --dur-cinematic: 1200ms;    --ease-cinematic: var(--ease);
  --dur-ambient: 24s;
  --header-h: 84px;

  /* One arrow for every button and text link: a vector mask filled with
     currentColor, so shaft and head are a single shape at any size or DPR. */
  --arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16.4M11.9 1l4.5 4-4.5 4' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--on-paper);
  font-family: var(--font-body);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
/* The word reveal rotates headings by up to 2° about their left edge, and
   a rotated block's box pokes past the viewport on the right while it is
   live — enough for iOS to let the page travel sideways. The bleed belongs
   to its section, so each section clips on the x axis; html/body clip as
   the last net. `clip` rather than `hidden`: it creates no scroll container. */
html, body,
.section, .closing, .motion, .numbers { overflow-x: clip; }
@supports not (overflow: clip) {
  html, body, .section, .closing, .motion, .numbers { overflow-x: hidden; }
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

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

::selection { background: var(--red); color: #fff; }

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

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  padding: 10px 18px; background: var(--red); color: #fff;
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  transform: translateY(-160%);
  transition: transform var(--dur-ui) var(--ease-ui);
}
.skip-link:focus { transform: none; }

/* --------------------------------------------------------------------------
   3. Typography primitives
   -------------------------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.94;
  text-wrap: balance;
}
.display--xl { font-size: clamp(40px, min(7.1vw, 13.5vh), 118px); }
.display--lg { font-size: clamp(36px, 4.6vw, 74px); }
.display--md { font-size: clamp(28px, 3.1vw, 50px); line-height: 1.02; }
.display--sm { font-size: clamp(22px, 2.1vw, 34px); line-height: 1.12; letter-spacing: -0.025em; }

.accent { color: var(--red); }

.lede {
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.62;
  color: var(--fg-dim);
  max-width: 44ch;
}
/* The TED / TEDx line: same measure, set in the foreground so it is read as a statement. */
.lede--ted { margin-top: 14px; color: var(--fg); font-weight: 500; }
.hero__claim { color: var(--on-ink); font-weight: 600; }

/* Small letterspaced caps — the connective tissue of the whole layout. */
.meta {
  font-size: clamp(11px, 0.75vw, 12px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.75;
  color: var(--fg-dim);
  font-weight: 500;
}
.meta strong { color: var(--fg); font-weight: 600; }

/* Content that used to be set as .meta — dates, roles, programme items,
   captions. Labels stay .meta; anything a reader needs to read is .small. */
.small {
  font-size: clamp(13px, 0.95vw, 14px);
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--fg-dim);
  font-weight: 500;
}
.small strong { color: var(--fg); font-weight: 600; }

/* Two phases, one page. The attribute on <body> picks which islands show. */
[data-phase='launch'] .only-t2,
[data-phase='t2'] .only-launch { display: none !important; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: clamp(28px, 4vw, 56px);
}
.eyebrow__line { width: 44px; height: 1px; background: currentColor; opacity: 0.45; }

.vertical-tag {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  line-height: 1.9;
  text-align: right;
  color: var(--fg-dim);
}
.vertical-tag::after {
  content: '';
  display: block;
  width: 34px; height: 1px;
  margin: 14px 0 0 auto;
  background: currentColor;
  opacity: 0.4;
}

.rule { display: block; width: 46px; height: 1px; background: var(--hairline); }
.rule--red { background: var(--red); height: 2px; width: 34px; }

/* --------------------------------------------------------------------------
   4. Buttons, links, arrows
   -------------------------------------------------------------------------- */
.arr {
  --size: 18px;
  display: inline-block;
  width: var(--size); height: calc(var(--size) * 0.556);
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--arrow-mask) center / contain no-repeat;
  mask: var(--arrow-mask) center / contain no-repeat;
  transition: transform var(--dur-interaction) var(--ease-out);
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 26px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  background-clip: padding-box;   /* overflow clips the sweep to the padding box, so the fill must stop there too */
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-interaction) var(--ease), border-color var(--dur-interaction) var(--ease);
}
/* The hover is a second colour rising under the label, not a swap. */
.btn::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--btn-sweep);
  transform: translateY(101%);
  transition: transform var(--dur-interaction) var(--ease-out);
}
.btn:hover::before { transform: translateY(0); }
.btn:hover { border-color: var(--btn-sweep); }
/* A button that lifts on hover and does nothing on press feels unfinished,
   and on touch the press is the only feedback there is. */
.btn:active { transform: translateY(1px); }
.link-underline:active { opacity: 0.75; }
.btn > span { transition: transform var(--dur-interaction) var(--ease-out); }
.btn:hover > span { transform: translateX(2px); }
.btn:hover .arr { transform: translateX(6px); }
.btn--sm { padding: 12px 20px; font-size: 13px; }

.btn--primary { background: var(--red); border-color: var(--red); color: #fff; --btn-sweep: var(--ink); }
.btn--ink { background: var(--ink); border-color: var(--ink); color: #fff; --btn-sweep: var(--red); }
/* On dark ground the ink sweep would vanish into the surface, so the primary rises to white there. */
.hero .btn--primary,
.section--ink .btn--primary,
.newsletter .btn--primary,
.pass-card--featured .btn--primary,
.site-header[data-theme='dark'] .btn--primary { --btn-sweep: var(--white); }
.hero .btn--primary:hover,
.section--ink .btn--primary:hover,
.newsletter .btn--primary:hover,
.pass-card--featured .btn--primary:hover,
.site-header[data-theme='dark'] .btn--primary:hover { color: var(--ink); }
.btn--outline { border-color: var(--hairline); color: var(--fg); --btn-sweep: var(--fg); }
.btn--outline:hover { border-color: var(--fg); color: var(--surface); }

.link-underline {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 9px;
  font-size: 15px;
  font-weight: 500;
  /* Two stacked underlines: a static hairline, plus a red one that wipes in. */
  background-image:
    linear-gradient(var(--red), var(--red)),
    linear-gradient(currentColor, currentColor);
  background-size: 0% 1px, 100% 1px;
  background-position: left bottom, left bottom;
  background-repeat: no-repeat;
  transition: background-size var(--dur-interaction) var(--ease-out);
}
.link-underline::after {
  content: '';
  width: 18px; height: 10px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--arrow-mask) center / contain no-repeat;
  mask: var(--arrow-mask) center / contain no-repeat;
  transition: transform var(--dur-interaction) var(--ease-out);
}
.link-underline:hover { background-size: 100% 1px, 100% 1px; }
.link-underline:hover::after { transform: translateX(4px); }
.link-underline--sm { font-size: 13px; gap: 10px; }
.link-underline--sm::after { width: 14px; height: 8px; }

.round-btn {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  color: var(--fg);
  transition: background-color var(--dur-interaction) var(--ease), border-color var(--dur-interaction) var(--ease), color var(--dur-interaction) var(--ease);
}
.round-btn svg { width: 18px; height: 18px; }
.round-btn:hover:not(:disabled) { background: var(--red); border-color: var(--red); color: #fff; }
.round-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.arr--circle {
  --size: 22px;
  color: var(--white);
}

/* A form without an endpoint still shows its field — the design is the
   point — but submitting says sign-up is not open yet rather than
   claiming a subscription that never happened. */
.newsletter__msg { white-space: normal; max-width: 46ch; }

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

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--paper {
  --fg: var(--on-paper);
  --fg-dim: var(--on-paper-dim);
  --hairline: var(--on-paper-faint);
  --surface: var(--paper);
  background: var(--paper);
  color: var(--on-paper);
}

.section--ink {
  --fg: var(--on-ink);
  --fg-dim: var(--on-ink-dim);
  --hairline: var(--on-ink-faint);
  --surface: var(--ink);
  background: var(--ink);
  color: var(--on-ink);
}

.section__grid {
  display: grid;
  grid-template-columns: minmax(280px, 30%) 1fr;
  gap: clamp(32px, 4.5vw, 84px);
  align-items: start;
}
.section__body { position: relative; }
.section__body .eyebrow { margin-top: 0; }
.display + .lede { margin-top: clamp(20px, 2vw, 30px); }
.lede + .link-underline,
.lede + .btn { margin-top: clamp(24px, 2.4vw, 38px); }

.scroll-progress {
  position: fixed; inset: 0 0 auto 0; z-index: 120;
  height: 2px;
  background: transparent;
  pointer-events: none;
}
.scroll-progress span {
  display: block; height: 100%; width: 100%;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
}

/* Scroll-linked word reveal. The spans only exist once JS has split the
   text, so a failure leaves the heading plainly visible. */
[data-reveal='words'] { transform-origin: 0% 50%; }
.rw { display: inline-block; }
/* Compositor promises only while the block is in view (main.js toggles the class). */
[data-reveal='words'].is-live { will-change: transform; }
[data-reveal='words'].is-live .rw { will-change: opacity, filter, transform; }

/* Reveal-on-scroll. The hidden starting state exists only once JS has
   declared itself (html.js), so with scripts off or failed the page is
   simply visible. Opt-out respected below. */
.reveal {
  transition:
    opacity var(--dur-narrative) var(--ease-narrative),
    translate var(--dur-narrative) var(--ease-narrative);
  transition-delay: calc(var(--i, 0) * var(--stagger-narrative));
}
html.js .reveal:not(.is-in) { opacity: 0; translate: 0 18px; }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
/* The logo is the supplied artwork. Both variants are always in the header
   markup; the surface under the header picks which one shows. */
.logo { display: inline-flex; align-items: center; line-height: 0; min-width: 0; }
/* The lockup is a single line (TEDSports, no city line), 720×145. --logo-h
   is set so it keeps the footprint the two-line lockup had. Sized by width
   with height following the file's ratio, so when a narrow header row has
   less room than that (a phone with the CTA showing), the mark scales down
   whole instead of being squeezed sideways. */
.logo__img { --logo-h: clamp(26px, 1.96vw, 32px); display: block; width: calc(var(--logo-h) * 720 / 145); max-width: 100%; height: auto; }
.logo--lg .logo__img { --logo-h: clamp(33px, 3vw, 45px); }
.site-header[data-theme='dark'] .logo__img--dark,
.site-header[data-theme='light'] .logo__img--light { display: none; }

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 110;
  transition: background-color var(--dur-interaction) var(--ease), color var(--dur-interaction) var(--ease), transform var(--dur-interaction) var(--ease), border-color var(--dur-interaction) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header[data-theme='dark'] { color: var(--white); }
.site-header[data-theme='light'] { color: var(--ink); }
.site-header.is-stuck {
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.site-header.is-stuck[data-theme='light'] {
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  border-bottom-color: rgba(10, 10, 10, 0.1);
}
.site-header.is-hidden { transform: translateY(-104%); }

.site-header__inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 16px var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  min-height: var(--header-h);
}

.nav {
  display: flex;
  gap: clamp(14px, 1.8vw, 32px);
  margin-inline: auto;
  font-size: 14px;
  font-weight: 500;
}
.nav a { position: relative; padding: 6px 2px; opacity: 0.85; transition: opacity var(--dur-ui) var(--ease-ui); }
.nav a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-interaction) var(--ease-out);
}
.nav a:hover { opacity: 1; }
.nav a:hover::after, .nav a.is-current::after { transform: scaleX(1); }
.nav a.is-current { opacity: 1; }

.site-header__actions { display: flex; align-items: center; gap: clamp(10px, 1.2vw, 20px); }

.nav__extra { display: none; }

.burger { display: none; width: 38px; height: 38px; position: relative; }
.burger span {
  position: absolute; left: 8px; right: 8px; height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-interaction) var(--ease), opacity var(--dur-ui) var(--ease-ui);
}
.burger span:first-child { top: 15px; }
.burger span:last-child { top: 22px; }
.burger[aria-expanded='true'] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded='true'] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-block: calc(var(--header-h) + 40px) clamp(70px, 8vw, 110px);
  background: var(--ink);
  color: var(--on-ink);
  --fg: var(--on-ink);
  --fg-dim: var(--on-ink-dim);
  --hairline: var(--on-ink-faint);
  --surface: var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity var(--dur-cinematic) var(--ease-cinematic), transform calc(var(--dur-ambient) / 3) linear;
}
.hero__media img.is-active { opacity: 1; transform: scale(1); }
/* Sits over the still and under the scrim, and fades in only once it is
   actually playing, so a failed load leaves the still in place. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-cinematic) var(--ease-cinematic);
}
.hero__video.is-playing { opacity: 1; }

.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(8, 8, 10, 0.95) 0%, rgba(8, 8, 10, 0.78) 34%, rgba(8, 8, 10, 0.25) 62%, rgba(8, 8, 10, 0.55) 100%),
    linear-gradient(to bottom, rgba(8, 8, 10, 0.8) 0%, transparent 28%, transparent 62%, rgba(8, 8, 10, 0.85) 100%);
}

.hero__inner { position: relative; }
.hero__meta { margin-bottom: clamp(24px, 3.4vw, 44px); text-transform: uppercase; letter-spacing: 0.12em; }
.hero__lede { max-width: 44ch; margin-top: clamp(18px, 2vw, 30px); font-size: clamp(15px, 1.15vw, 18px); line-height: 1.7; color: var(--on-ink-dim); }
.hero__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(18px, 2.4vw, 40px);
  margin-top: clamp(30px, 3.4vw, 50px);
}

.hero__quote {
  position: absolute;
  top: clamp(130px, 19vh, 210px);
  right: var(--gutter);
  width: min(300px, 28vw);
  display: none;
}
.hero__quote blockquote {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.15vw, 19px);
  line-height: 1.5;
  color: var(--on-ink);
}
.hero__quote .rule { margin: 20px 0 14px; }
.hero__quote figcaption { color: var(--on-ink-dim); }

.hero__tag { position: absolute; right: var(--gutter); top: 55%; display: none; }
/* The claim, as a spinning ring of type. The text is spread along the full
   circle by textLength, so the ring stays closed in either language. */
.hero__emblem {
  position: absolute; right: var(--gutter); bottom: 12%;
  width: clamp(124px, 11vw, 170px);
  aspect-ratio: 1;
  display: none;
}
.emblem svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: emblem-spin var(--dur-ambient) linear infinite; }
.emblem circle { fill: none; stroke: rgba(255, 255, 255, 0.24); stroke-width: 1; }
.emblem text {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: rgba(255, 255, 255, 0.86);
}
.emblem__core {
  position: absolute; inset: 0;
  display: grid; place-content: center;
  text-align: center; line-height: 1.15;
}
.emblem__core b { color: var(--red); font-family: var(--font-display); font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.emblem__core span { display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); }
@keyframes emblem-spin { to { transform: rotate(360deg); } }

.hero__foot {
  position: absolute;
  left: var(--gutter); right: var(--gutter); bottom: clamp(22px, 3vw, 40px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
}
.hero__foot-left { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); min-height: 32px; }   /* room for the pause button before it appears, so nothing shifts */

.hero__motion {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--on-ink-faint);
  border-radius: 100px;
  color: var(--on-ink-dim);
  transition: color var(--dur-ui) var(--ease-ui), border-color var(--dur-ui) var(--ease-ui);
}
.hero__motion:hover { color: var(--on-ink); border-color: var(--on-ink-dim); }
.hero__motion svg { width: 12px; height: 12px; flex: none; }
.hero__motion__play path { fill: currentColor; stroke: none; }
.hero__motion[aria-pressed='false'] .hero__motion__play,
.hero__motion[aria-pressed='true'] .hero__motion__pause { display: none; }

.counter {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: 0.2em;
  color: var(--on-ink-dim);
}
.counter__line { width: 54px; height: 1px; background: currentColor; opacity: 0.4; }
.hero__scroll { display: flex; align-items: center; gap: 12px; color: var(--on-ink-dim); }
.hero__scrollline {
  position: relative;
  display: block; width: 1px; height: 26px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.16);
}
.hero__scrollline::after {
  content: '';
  position: absolute; left: 0; top: 0;
  width: 100%; height: 42%;
  background: currentColor;
  animation: scroll-run calc(var(--dur-cinematic) * 2) var(--ease) infinite;
}
@keyframes scroll-run {
  0% { transform: translateY(-110%); }
  60%, 100% { transform: translateY(260%); }
}

@media (max-height: 860px) and (min-width: 1000px) {
  .hero { padding-block: calc(var(--header-h) + 18px) clamp(58px, 7vw, 84px); }
  .hero__meta { margin-bottom: clamp(18px, 2.4vw, 30px); }
  .hero__actions { margin-top: clamp(22px, 2.4vw, 34px); }
  .hero__lede { line-height: 1.7; }
}

/* --------------------------------------------------------------------------
   8. 01 — The Idea
   -------------------------------------------------------------------------- */
/* The photograph runs full-bleed to the right edge and the section's full
   height, with the copy sitting on the paper beside it and the quote over
   the bright part of the sky. */
.idea {
  position: relative;
  overflow: hidden;
  min-height: clamp(360px, 32vw, 520px);
  padding-block: clamp(46px, 5.2vw, 90px);
}

.idea__media { position: absolute; inset: 0 0 0 auto; width: 64%; z-index: 0; }
.idea__media img { width: 100%; height: 100%; object-fit: cover; object-position: 88% 22%; }

/* Lifts the corner the quote sits over toward paper — reads as haze, and
   means the crop shifting with viewport width can never bury the text. */
.idea__media::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(118% 88% at 100% 0%, rgba(243, 242, 240, 0.88), rgba(243, 242, 240, 0) 54%);
}

/* Softens the join and keeps the copy clear of the photograph as the
   columns narrow. The sky on that edge is near-white, so it barely reads. */
.idea__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--paper), rgba(243, 242, 240, 0.55) 9%, transparent 27%);
}


.idea__grid {
  position: relative;
  z-index: 2;
  grid-template-columns: minmax(280px, 34%) 1fr;
}
.idea .lede--ted + .link-underline { margin-top: clamp(24px, 2.4vw, 38px); }

/* Cursor lens — only in The Idea section.
   A real magnification of the section's own markup: a clone is scaled about
   the pointer inside a circular clip, with the rim drawn separately so it
   lands exactly on the edge. */
.lens {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-interaction) var(--ease);
  clip-path: circle(var(--lens-r, 108px) at var(--lens-x, -500px) var(--lens-y, -500px));
}
.lens.is-on { opacity: 1; }
.lens__stage {
  position: absolute;
  will-change: transform;
  backface-visibility: hidden;
}

.lens-rim {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(var(--lens-r, 108px) * 2);
  height: calc(var(--lens-r, 108px) * 2);
  border-radius: 50%;
  z-index: 91;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-interaction) var(--ease);
  will-change: transform;
  /* Glass body: a specular highlight, a lit top edge and weight underneath. */
  background:
    radial-gradient(circle at 33% 25%, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0) 44%),
    radial-gradient(circle at 72% 84%, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 38%);
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow:
    inset 0 1px 3px rgba(255, 255, 255, 0.38),
    inset 0 -12px 24px rgba(10, 10, 10, 0.1),
    0 16px 38px rgba(10, 10, 10, 0.18);
}
.lens-rim.is-on { opacity: 1; }

/* Chromatic fringe, kept to a hairline at the very edge. */
.lens-rim::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: conic-gradient(from 210deg,
    rgba(255, 43, 51, 0.6), rgba(80, 200, 255, 0.5) 32%,
    rgba(255, 43, 51, 0.45) 64%, rgba(80, 200, 255, 0.55));
  -webkit-mask: radial-gradient(circle, transparent 0 calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(circle, transparent 0 calc(100% - 4px), #000 calc(100% - 3px));
  mix-blend-mode: screen;
  opacity: 0.6;
}

/* --------------------------------------------------------------------------
   9. 02 — The Questions
   -------------------------------------------------------------------------- */
/* The one section without a left column: the heading runs the full
   measure over the grid, the lede sits against the right edge beneath it. */
.questions__head {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 34%);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 60px);
}
.questions__head .display { grid-column: 1 / -1; max-width: 16ch; }
.questions__head .lede { grid-column: 2; margin-top: 0; }
.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1vw, 18px);
}
.theme-card a {
  position: relative;
  display: block;
  height: 100%;
  min-height: clamp(180px, 17vw, 240px);
  padding: clamp(18px, 1.6vw, 26px);
  border: 1px solid var(--hairline);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}
.theme-card img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
  transition: transform var(--dur-reveal) var(--ease-reveal);
}
.theme-card a::after {
  content: '';
  position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(to top, rgba(6, 6, 8, 0.92) 8%, rgba(6, 6, 8, 0.45) 55%, rgba(6, 6, 8, 0.2) 100%);
  transition: background var(--dur-interaction) var(--ease);
}
.theme-card a:hover img { transform: scale(1.08); }
/* A spotlight that follows the pointer, between the scrim and the copy. */
.theme-card a::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: radial-gradient(360px circle at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(255, 255, 255, 0.2), rgba(255, 43, 51, 0.12) 36%, transparent 62%);
  opacity: 0;
  transition: opacity var(--dur-interaction) var(--ease);
}
.theme-card a:hover::before { opacity: 1; }
.theme-card__num { font-size: 11px; letter-spacing: 0.2em; color: var(--on-ink-dim); transition: opacity calc(var(--dur-narrative) * 0.7) var(--ease-narrative) calc(var(--i, 0) * var(--stagger-narrative)); }
.theme-card__cluster { margin-top: 8px; color: rgba(255, 255, 255, 0.72); transition: opacity calc(var(--dur-narrative) * 0.7) var(--ease-narrative) calc(var(--i, 0) * var(--stagger-narrative) + 90ms); }
/* The structure line under the marker; it draws itself as the card activates. */
.theme-card__line {
  display: block;
  width: 36px; height: 1px;
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.42);
  transform-origin: left;
  transition: transform calc(var(--dur-narrative) * 0.85) var(--ease-narrative) calc(var(--i, 0) * var(--stagger-narrative) + 200ms);
}
/* The question is the content of the card, so it is set in display, not as a caption. */
.theme-card h3 {
  margin-top: auto;
  padding-top: 26px;
  max-width: 14ch;
  font-size: clamp(22px, 1.9vw, 30px);
  color: var(--white);
  text-wrap: balance;
  transition:
    opacity var(--dur-narrative) var(--ease-narrative) calc(var(--i, 0) * var(--stagger-narrative) + 340ms),
    translate var(--dur-narrative) var(--ease-narrative) calc(var(--i, 0) * var(--stagger-narrative) + 340ms);
}
/* Activation: marker, then the line, then the question — card after card
   across the field. The question stays the content; nothing else moves. */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal='cards']:not(.is-in) .theme-card__num,
  html.js [data-reveal='cards']:not(.is-in) .theme-card__cluster { opacity: 0; }
  html.js [data-reveal='cards']:not(.is-in) .theme-card__line { transform: scaleX(0); }
  html.js [data-reveal='cards']:not(.is-in) .theme-card h3 { opacity: 0; translate: 0 10px; }
}

/* Two edges of one wipe. Registered so they can interpolate, and set on
   the card so the photograph and the red matte inherit the same pair of
   numbers — the offset between them is a delay, never a second curve. */
@property --wipe-img { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
@property --wipe-red { syntax: '<percentage>'; inherits: true; initial-value: 0%; }

/* --------------------------------------------------------------------------
   10. 03 — Voices
   -------------------------------------------------------------------------- */
/* Questions and Voices are both ink, so their combined rhythm read as one
   void; the seam between them is tightened. */
.voices { padding-bottom: clamp(36px, 4vw, 64px); }
.questions { padding-top: clamp(44px, 5.5vw, 88px); }
.voices__head {
  display: grid;
  grid-template-columns: minmax(280px, 1.2fr) minmax(240px, 1fr);
  gap: clamp(28px, 3.4vw, 64px);
  align-items: start;
  padding-bottom: clamp(36px, 4.4vw, 70px);
}
.voices__head .display { position: relative; }
.voices__intro .link-underline { margin-top: clamp(18px, 2vw, 28px); }

@media (min-width: 1100px) {
  .voices__intro { padding-left: clamp(24px, 3vw, 56px); border-left: 1px solid var(--hairline); }
}

/* As a grid item this would otherwise refuse to shrink below the combined
   width of its cards, clipping them instead of letting the track scroll. */
.carousel { position: relative; min-width: 0; }
.carousel__track {
  display: flex;
  min-width: 0;
  gap: clamp(8px, 0.8vw, 14px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-inline: var(--gutter);
  /* Snapping ignores padding, so the first card would jump flush to the edge. */
  scroll-padding-inline: var(--gutter);
}
.carousel__track::-webkit-scrollbar { display: none; }

.voices__track > * {
  flex: 0 0 clamp(230px, 19vw, 300px);
  scroll-snap-align: start;
}
.voice-card article {
  position: relative;
  height: clamp(360px, 30vw, 460px);
  overflow: hidden;
  border: 1px solid var(--hairline);
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(16px, 1.4vw, 24px);
  cursor: pointer;
}
.voice-card img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 22%;
  filter: grayscale(1) contrast(1.06);
  clip-path: inset(0 0 var(--wipe-img) 0);
  transition:
    transform var(--dur-reveal) var(--ease-reveal),
    filter var(--dur-interaction) var(--ease);
}
.voice-card article::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  /* The scrim, with the hover rule riding on top of it as a second layer:
     ::before is the reveal's matte and cannot be spent on a hover line. */
  background:
    linear-gradient(var(--red), var(--red)) 0 0 no-repeat,
    linear-gradient(to top, rgba(5, 5, 7, 0.95) 6%, rgba(5, 5, 7, 0.35) 52%, rgba(5, 5, 7, 0.55) 100%);
  background-size: 0% 2px, auto;
  transition: background-size var(--dur-interaction) var(--ease-out);
}
.voice-card article:hover::after { background-size: 100% 2px, auto; }
.voice-card article:hover img { transform: scale(1.06); filter: grayscale(0.35) contrast(1.05); }
.voice-card__num {
  transition: color var(--dur-interaction) var(--ease), opacity var(--dur-narrative) var(--ease-narrative) calc(var(--i, 0) * var(--stagger-narrative) + 380ms);
  position: absolute; top: clamp(14px, 1.2vw, 20px); left: clamp(16px, 1.4vw, 24px);
  font-size: 11px; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.7);
}
/* The offset is small on purpose: enough to see a red edge lead the
   photograph, not enough to read as a red screen. */
.voice-card { --wipe-offset: 65ms; }
@media (prefers-reduced-motion: no-preference) {
  html.js .voice-card {
    transition:
      --wipe-red var(--dur-narrative) var(--ease-narrative) calc(var(--i, 0) * var(--stagger-narrative)),
      --wipe-img var(--dur-narrative) var(--ease-narrative) calc(var(--i, 0) * var(--stagger-narrative) + var(--wipe-offset));
  }
  html.js [data-reveal='cards']:not(.is-in) .voice-card { --wipe-img: 100%; --wipe-red: 100%; }
}

.voice-card__body {
  position: relative;
  z-index: 1;
  padding-right: 40px;
  transition:
    transform var(--dur-interaction) var(--ease-out),
    opacity var(--dur-narrative) var(--ease-narrative) calc(var(--i, 0) * var(--stagger-narrative) + 380ms),
    translate var(--dur-narrative) var(--ease-narrative) calc(var(--i, 0) * var(--stagger-narrative) + 380ms);
}
.voice-card .arr--circle { transition: transform var(--dur-interaction) var(--ease-out), opacity var(--dur-narrative) var(--ease-narrative) calc(var(--i, 0) * var(--stagger-narrative) + 480ms); }
.voice-soon { transition: opacity var(--dur-narrative) var(--ease-narrative) calc(var(--i, 0) * var(--stagger-narrative)); }

/* Editorial reveal, once, as the row enters: the portrait uncovers top to
   bottom through a mask, then the name, 80ms from one card to the next.
   Only under JS and only when motion is welcome; the settled state is the
   static one, so nothing here changes what the hover does. */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal='cards']:not(.is-in) .voice-card__body,
  html.js [data-reveal='cards']:not(.is-in) .voice-card__num,
  html.js [data-reveal='cards']:not(.is-in) .voice-card .arr--circle { opacity: 0; translate: 0 8px; }
  html.js [data-reveal='cards']:not(.is-in) .voice-soon { opacity: 0; }
}
/* The matte: a band of brand red between the photograph's leading edge and
   its own, which runs a little ahead. Both edges are the same curve over
   the same distance, so the band is only ever the ground the red has
   covered and the photograph has not — it opens from nothing at the top
   and closes to nothing at the bottom. Above the scrim so the red stays
   the brand red, below the name so it never crosses type. */
.voice-card article::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: var(--red);
  clip-path: inset(calc(100% - var(--wipe-img)) 0 var(--wipe-red) 0);
  pointer-events: none;
}
.voice-card article:hover .voice-card__body { transform: translateY(-6px); }
.voice-card article:hover .voice-card__num { color: var(--red); }
.voice-card h3 {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.2vw, 20px);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--white);
}
/* Two lines are always reserved for the role, so every name sits on the same line. */
.voice-card .small { margin-top: 8px; color: rgba(255, 255, 255, 0.6); min-height: calc(2 * 1.6em); }

/* Launch phase: five unnamed slots in place of the carousel. */
.voices__soon {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(8px, 0.8vw, 14px);
}
.voice-soon {
  position: relative;
  height: clamp(260px, 22vw, 340px);
  border: 1px solid var(--hairline);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 12px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(16px, 1.4vw, 24px);
}
.voice-soon .voice-card__num { position: absolute; top: clamp(14px, 1.2vw, 20px); left: clamp(16px, 1.4vw, 24px); }
.voice-soon .small { color: rgba(255, 255, 255, 0.5); }
.voice-card .arr--circle {
  position: absolute;
  right: clamp(16px, 1.4vw, 24px);
  bottom: clamp(22px, 2vw, 32px);
}
.voice-card article:hover .arr--circle { transform: translateX(5px); }

.carousel__foot {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 48px);
  padding-top: clamp(26px, 3vw, 44px);
  padding-bottom: clamp(26px, 3vw, 44px);
}
.carousel__nav { display: flex; gap: 12px; }
/* Nothing to page through when every card already fits. */
.carousel.is-static .carousel__nav { display: none; }
.carousel__count { display: flex; align-items: center; gap: 18px; flex: 1; }
.carousel__bar { display: block; width: clamp(80px, 12vw, 190px); height: 1px; background: var(--hairline); }
.carousel__bar i { display: block; height: 100%; background: var(--fg); width: 30%; transition: width var(--dur-interaction) var(--ease); }
.carousel__foot .link-underline { margin-left: auto; }
.carousel__label { text-align: right; margin-left: auto; }

.marquee {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
  padding-block: clamp(18px, 2.2vw, 30px);
}
.marquee__track {
  display: flex;
  gap: 42px;
  width: max-content;
  animation: marquee var(--dur-ambient) linear infinite;
  font-size: clamp(16px, 1.9vw, 30px);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.34);
  font-weight: 400;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   10a. Ideas in Motion — the signature line as a band
   Same treatment as the marquee it grew out of: ink, hairlines, thin
   letterspaced caps. The acid-green experiment is gone; the palette is
   black, off-white and TED red.
   -------------------------------------------------------------------------- */
.motion {
  --fg: var(--on-ink); --fg-dim: var(--on-ink-dim); --hairline: var(--on-ink-faint); --surface: var(--ink);
  background: var(--ink);
  color: var(--on-ink);
}
/* A small scroll-linked drift on top of the loop: with the marquee on the
   way down, against it on the way up. --mx is written by main.js. */
.motion__track { translate: var(--mx, 0) 0; }

/* --------------------------------------------------------------------------
   10b. Numbers — a scoreboard between Voices and Program
   -------------------------------------------------------------------------- */
.numbers {
  --fg: var(--on-ink); --fg-dim: var(--on-ink-dim); --hairline: var(--on-ink-faint); --surface: var(--ink);
  background: var(--ink);
  color: var(--on-ink);
}
.scoreboard {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-block: 1px solid var(--hairline);
}
.scoreboard__cell {
  position: relative;
  padding: clamp(30px, 3.2vw, 54px) clamp(16px, 2vw, 34px);
}
.scoreboard__cell:first-child { padding-left: 0; }
.scoreboard__cell + .scoreboard__cell { border-left: 1px solid var(--hairline); }
/* A red rule that fills as its figure counts up: a measure, not decoration.
   --m is written by main.js alongside the number; without JS it is 1. */
.scoreboard__cell::after {
  content: '';
  position: absolute;
  left: clamp(16px, 2vw, 34px); bottom: clamp(16px, 1.8vw, 26px);
  width: 34px; height: 2px;
  background: var(--red);
  transform-origin: left;
  transition: transform var(--dur-narrative) var(--ease-narrative) calc(var(--i, 0) * 110ms);
}
html.js [data-count-group]:not(.is-in) .scoreboard__cell::after { transform: scaleX(0); }
.scoreboard__cell:first-child::after { left: 0; }
.scoreboard dt {
  display: flex;
  align-items: flex-start;
  font-family: var(--font-display);
  font-size: clamp(40px, 4.4vw, 76px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.scoreboard dt sup { font-size: 0.4em; margin-top: 0.12em; margin-left: 0.04em; color: var(--red); line-height: 1; }

/* The counter is an odometer: one column of digits per place, each rolling
   a full turn before it lands. Built by main.js, which keeps the plain
   figure alongside it for assistive technology; without JS or with motion
   turned down only that figure is ever shown. */
.odo { display: inline-flex; align-items: flex-start; line-height: 1; user-select: none; }   /* only the plain figure beside it is selectable */
.odo__col { display: block; height: 1em; overflow: hidden; }
.odo__strip {
  display: block;
  transform: translateY(calc(var(--n, 0) * -1em));
  transition: transform var(--dur-odo, 1500ms) cubic-bezier(0.22, 1, 0.36, 1) var(--odo-delay, 0ms);
}
.odo__strip i { display: block; height: 1em; font-style: normal; }
.odo__lit { display: block; height: 1em; }
.scoreboard dd { margin-top: 16px; margin-bottom: clamp(24px, 2.4vw, 34px); color: var(--fg-dim); }

/* --------------------------------------------------------------------------
   11. 04 — Program
   -------------------------------------------------------------------------- */
.program .section__grid {
  grid-template-columns: minmax(260px, 27%) 1fr;
  gap: clamp(24px, 2.6vw, 46px);
}
.carousel--program .carousel__track { padding-inline: 0; scroll-padding-inline: 0; }
.program__track > * { flex: 0 0 clamp(210px, 24%, 300px); scroll-snap-align: start; }

.day-card article {
  position: relative;
  height: clamp(420px, 42vw, 600px);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(18px, 1.6vw, 28px);
  color: var(--white);
}
.day-card img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-reveal) var(--ease-reveal);
}
.day-card article::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(6, 6, 8, 0.92) 0%, rgba(6, 6, 8, 0.4) 42%, rgba(6, 6, 8, 0.9) 100%);
}
.day-card article:hover img { transform: scale(1.07); }
.day-card .small { color: rgba(255, 255, 255, 0.72); }
.day-card .small strong { color: var(--white); }
.day-card h3 {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: clamp(22px, 1.9vw, 31px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
}
.day-card__top > p:last-child {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.8);
  max-width: 20ch;
}
.day-card__list li + li { margin-top: 2px; }

/* Saturday is not a conference day: optional, partner-hosted, limited
   places. Same slot in the rail, a different kind of object — no
   photograph, a dashed edge on the paper, a rule in the gap before it, and
   an "Optional" label in place of a day number. */
.day-card--optional { position: relative; }
.day-card--optional::before {
  content: '';
  position: absolute;
  top: 6%; bottom: 6%;
  left: calc(clamp(8px, 0.8vw, 14px) / -2);
  border-left: 1px dashed var(--on-paper-faint);
}
.day-card--optional article {
  color: var(--ink);
  border: 1px dashed rgba(10, 10, 10, 0.32);
  justify-content: flex-start;
}
.day-card--optional article::after { content: none; }
.day-card--optional .small { color: var(--on-paper-dim); }
.day-card--optional .small strong { color: var(--red); }
.day-card--optional .day-card__top > p:last-child { color: var(--on-paper-dim); max-width: 28ch; }

.progress-steps {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: clamp(8px, 0.8vw, 14px);
  margin-top: 22px;
}
/* The process rail: each day surfaces in turn as the block travels up the
   viewport, and the rail beneath draws itself segment by segment behind it.
   Scrubbed to scroll, so it plays back on the way up. --r and --fill are
   written by main.js; without it everything is simply visible. */
html.js .carousel--program .day-card {
  opacity: var(--r, 1);
  transform: translateY(calc((1 - var(--r, 1)) * 36px));
}
.progress-steps li { display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 0.2em; color: var(--fg-dim); transition: color var(--dur-interaction) var(--ease); }
.progress-steps li::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--red) calc(var(--fill, 0) * 100%), var(--hairline) 0);
}
.progress-steps li.is-reached { color: var(--fg); }
.progress-steps li.is-active { color: var(--fg); }
.progress-steps li.is-active::after { background: var(--red); }
/* The optional Saturday never fills red: it is not a step of the conference. */
.progress-steps li.progress-steps__optional { opacity: 0.6; }
.progress-steps li.progress-steps__optional::after,
.progress-steps li.progress-steps__optional.is-active::after {
  background: repeating-linear-gradient(to right, var(--hairline) 0 4px, transparent 4px 9px);
}

/* --------------------------------------------------------------------------
   12. 05 — Experience
   -------------------------------------------------------------------------- */
.experience { padding-block: 0; }
.experience__top {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, 36%) 1fr;
  align-items: stretch;
  min-height: clamp(420px, 56vw, 720px);
}
.experience__intro {
  padding-block: var(--section-y) clamp(40px, 5vw, 80px);
  padding-right: clamp(24px, 3vw, 56px);
  align-self: center;
  max-width: none;
}
.experience__intro .eyebrow { padding-top: 0; }

.experience__hero { position: relative; overflow: hidden; isolation: isolate; }
.experience__hero img { width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; }
.experience__hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(6, 6, 8, 0.7), rgba(6, 6, 8, 0.08) 40%, rgba(6, 6, 8, 0.2));
}
.experience__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  background: rgba(255, 255, 255, 0.1);
  border-block: 1px solid rgba(255, 255, 255, 0.1);
}
.exp-card a {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(240px, 24vw, 330px);
  padding: clamp(18px, 1.6vw, 28px);
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
}
.exp-card img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.94;
  transition: transform var(--dur-reveal) var(--ease-reveal), opacity var(--dur-interaction) var(--ease);
}
.exp-card a::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  /* Top-weighted: the titles sit at the top of the card, so the scrim carries
     its density there and lets the photograph stay open through the middle. */
  background: linear-gradient(to bottom, rgba(6, 6, 8, 0.66), rgba(6, 6, 8, 0.2) 52%, rgba(6, 6, 8, 0.46));
}
.exp-card a:hover img { transform: scale(1.07); opacity: 1; }
.exp-card__num { font-size: 12px; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.72); }
.exp-card h3 {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: clamp(22px, 1.85vw, 31px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.02;
  max-width: 11ch;
}
.exp-card .small { margin-top: auto; padding-top: 30px; max-width: 18ch; color: rgba(255, 255, 255, 0.66); }
.exp-card .arr { position: absolute; right: clamp(18px, 1.6vw, 28px); bottom: clamp(20px, 1.8vw, 30px); }
.exp-card a:hover .arr { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   13. Location (Turin)
   -------------------------------------------------------------------------- */
.location { position: relative; }

.location__grid {
  display: grid;
  grid-template-columns: minmax(260px, 24%) 1fr minmax(240px, 30%);
  gap: clamp(12px, 1.1vw, 18px);
  align-items: stretch;
}
.location__body { align-self: center; padding-right: clamp(6px, 1.4vw, 28px); }
/* A narrower column than the other sections give their headings. */
.location__title { font-size: clamp(34px, 3.85vw, 60px); }

.location-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: 0;
  background: var(--ink);
  color: var(--white);
  /* The venue map carries its title and compass in the pixels at 2:3, so the
     row is tall enough to keep both in frame rather than crop them away. */
  min-height: clamp(380px, 41vw, 660px);
}
.location-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-reveal) var(--ease-reveal); }
.location-card:hover img { transform: scale(1.04); }
.location-card--venue img { object-position: 50% 0; }
.location-card--city::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(6, 6, 8, 0.55), transparent 30%, transparent 68%, rgba(6, 6, 8, 0.55));
}
.location-card__tag,
.location-card__foot { position: absolute; z-index: 1; margin: 0; color: rgba(255, 255, 255, 0.9); }
.location-card__tag { top: clamp(18px, 1.8vw, 30px); left: clamp(20px, 2.2vw, 36px); }
.location-card__foot { right: clamp(20px, 2.2vw, 36px); bottom: clamp(18px, 1.8vw, 30px); text-align: right; }
.location-card__foot::after {
  content: '';
  display: block;
  width: 34px; height: 1px;
  margin: 12px 0 0 auto;
  background: currentColor;
  opacity: 0.6;
}

.location-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(36px, 4vw, 60px);
  padding-top: clamp(26px, 3vw, 44px);
  border-top: 1px solid var(--hairline);
}
.location-stats { display: contents; }
.location-facts .fact { margin: 0; padding: 6px clamp(16px, 2vw, 34px); }
.location-facts .fact:first-child { padding-left: 0; }
.location-facts .fact + .fact { border-left: 1px solid var(--hairline); }
.location-facts dt {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
}
.location-facts dt::after {
  content: '';
  display: block;
  width: 22px; height: 1px;
  margin: 14px 0 12px;
  background: var(--fg);
  opacity: 0.5;
}
.location-facts dd { max-width: 24ch; }

/* --------------------------------------------------------------------------
   14. 06 — Passes
   -------------------------------------------------------------------------- */
.passes { padding-bottom: 0; }
.passes__layout {
  display: grid;
  grid-template-columns: minmax(260px, 24%) 1fr;
  gap: clamp(28px, 3.4vw, 64px);
  align-items: start;
}
.passes__intro .lede { margin-top: clamp(20px, 2vw, 30px); }

/* Launch phase: the ladder's place is taken by a waitlist. */
.waitlist {
  --fg: var(--on-ink); --fg-dim: var(--on-ink-dim); --hairline: var(--on-ink-faint); --surface: var(--ink);
  align-self: start;
  padding: clamp(28px, 2.6vw, 44px);
  background: var(--ink);
  color: var(--on-ink);
  /* Every pass CTA lands here: clear the sticky header by a margin, not flush. */
  scroll-margin-top: 24px;
}
.waitlist .display { max-width: 16ch; }
.waitlist .pass-card__text { margin-top: 18px; color: var(--on-ink-dim); max-width: 44ch; }
.waitlist__form { position: relative; margin-top: clamp(26px, 2.6vw, 40px); }
/* The flag is a label, not a bar: it keeps its own width in a block layout. */
.waitlist .pass-card__badge { display: inline-block; padding: 6px 12px; }
.waitlist .display { font-size: clamp(32px, 3.1vw, 50px); }
.waitlist .pass-card__text { font-size: 16px; line-height: 1.55; }

/* The second way in, under the form. */
.waitlist__alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: clamp(30px, 3vw, 44px);
  padding-top: clamp(18px, 1.8vw, 24px);
  border-top: 1px solid var(--on-ink-faint);
}
.waitlist__alt-text { flex: 1 1 260px; color: var(--on-ink-dim); }

/* The privacy line under both forms. Links stay underlined so they read as links on ink. */
.form-legal { margin-top: 14px; color: var(--on-ink-dim); }
.form-legal a { color: var(--on-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.form-legal a:hover { color: var(--red); }

/* The badge you are buying, hanging beneath the intro copy. The 3D stage
   mounts into this box on capable desktops; everyone else sees the flat
   artwork, which is kept current either way. */
.badge-stage {
  position: relative;
  margin-top: clamp(28px, 3vw, 44px);
  height: clamp(340px, 28vw, 440px);
  display: grid;
  place-items: center;
}
.badge-stage__flat {
  width: min(220px, 62%);
  height: auto;
  box-shadow: 0 26px 60px rgba(10, 10, 10, 0.22);
  transition: opacity var(--dur-interaction) var(--ease);
}
.badge-stage.is-live .badge-stage__flat { opacity: 0; pointer-events: none; }
/* The canvas is larger than the stage — into the gutter on the left, the
   column gap on the right and the margin below — so a swinging card has
   room before it meets the edge. The frame marks the stage itself; the
   card crossing that line reads as depth, not clipping. */
.badge-stage { --bleed-l: clamp(20px, 3.6vw, 56px); --bleed-r: clamp(20px, 2.6vw, 44px); --bleed-t: 8px; --bleed-b: 72px; }
.badge-stage__canvas {
  position: absolute;
  top: calc(-1 * var(--bleed-t));
  left: calc(-1 * var(--bleed-l));
  width: calc(100% + var(--bleed-l) + var(--bleed-r)) !important;
  height: calc(100% + var(--bleed-t) + var(--bleed-b)) !important;
  touch-action: none;
}
/* On touch the canvas lets the page pan by default, so a swipe across its
   empty area scrolls. A touch that lands on the badge itself, with the page
   at rest, is claimed for the drag in lanyard.js at touchstart. */
@media (pointer: coarse) {
  .badge-stage__canvas { touch-action: pan-y; }
}
.badge-stage.is-live::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--hairline);
  pointer-events: none;
}
.badge-stage__hint {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  display: none;
}
.badge-stage.is-live .badge-stage__hint,
.badge-stage.is-swing .badge-stage__hint { display: block; }
.badge-stage__hint { transition: opacity var(--dur-reveal) var(--ease); }
.badge-stage.is-hint-done .badge-stage__hint { opacity: 0; }

/* The drag hint: a line-drawn hand over the badge, animated from main.js.
   Never in the way — no pointer events, invisible until it plays. */
.drag-hint {
  position: absolute;
  z-index: 3;
  width: 46px; height: 46px;
  pointer-events: none;
  opacity: 0;
}
.drag-hint.is-static { opacity: 1; }
.drag-hint__hand {
  display: block;
  width: 100%; height: 100%;
  overflow: visible;
  fill: var(--white);
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 3px 8px rgba(10, 10, 10, 0.3));
}
/* The press: a ring that opens under the fingertip (14, 4.6 of 32). */
.drag-hint__ring {
  position: absolute;
  left: calc(14 / 32 * 100% - 14px);
  top: calc(4.6 / 32 * 100% - 14px);
  width: 28px; height: 28px;
  border: 2px solid var(--red);
  border-radius: 50%;
  opacity: 0;
}

/* Touch devices: the same artwork as a card hanging from a strap. A drag
   swings it, a tap turns it over; vertical panning is left to the page. */
.badge-stage.is-swing .badge-stage__flat { opacity: 0; pointer-events: none; }
.badge-swing {
  position: absolute; inset: 0;
  display: grid; justify-items: center; align-content: start;
  perspective: 1100px;
  touch-action: pan-y;
  cursor: grab;
}
/* Full width, so the card's percentage has something to resolve against; the pivot itself stays centred. */
.badge-swing__pivot { width: 100%; display: grid; justify-items: center; transform-origin: 50% 0; will-change: rotate; }
.badge-swing.is-idle .badge-swing__pivot { animation: sway calc(var(--dur-ambient) / 4) ease-in-out infinite alternate; }
@keyframes sway { from { rotate: -2.4deg; } to { rotate: 2.4deg; } }
.badge-swing__strap { position: relative; width: 24px; height: clamp(40px, 6vw, 60px); background: var(--ink); }
.badge-swing__strap::before {
  content: ''; position: absolute; left: 50%; bottom: 14px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--red);
  translate: -50% 0;
}
.badge-swing__strap::after {
  content: ''; position: absolute; left: 50%; bottom: -9px;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid #2a2a2a; background: var(--surface);
  translate: -50% 0;
}
.badge-swing__card {
  position: relative;
  width: min(200px, 56%);
  aspect-ratio: 1024 / 1546;
  margin-top: 8px;
  transform-style: preserve-3d;
  transition: transform calc(var(--dur-interaction) * 2.2) var(--ease-out);
  box-shadow: 0 26px 60px rgba(10, 10, 10, 0.22);
}
.badge-swing__card.is-flipped { transform: rotateY(180deg); }
.badge-swing__card img { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.badge-swing__card img.is-back { transform: rotateY(180deg); }

/* Cards preview on hover and stick on click; the stripe marks the one chosen. */
.pass-card { cursor: pointer; }
.pass-card.is-selected { box-shadow: inset 0 3px 0 var(--red); }
.pass-card--featured.is-selected { box-shadow: inset 0 3px 0 var(--red), 0 30px 70px rgba(10, 10, 10, 0.18); }
.pass-card.is-selected:hover { box-shadow: inset 0 3px 0 var(--red), 0 22px 48px rgba(10, 10, 10, 0.1); }

.pass-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  gap: clamp(8px, 0.8vw, 16px);
  align-items: stretch;
}
.pass-card {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 1.7vw, 30px);
  background: var(--white);
  border: 1px solid var(--on-paper-faint);
  /* The hover lift and the entrance are different speeds on different
     properties, so both have to be named here — a bare shorthand would
     drop the entrance back to hover speed. */
  transition:
    transform var(--dur-interaction) var(--ease-out),
    box-shadow var(--dur-interaction) var(--ease),
    opacity var(--dur-narrative) var(--ease-narrative) calc(var(--i, 0) * var(--stagger-narrative)),
    translate var(--dur-narrative) var(--ease-narrative) calc(var(--i, 0) * var(--stagger-narrative));
}
.pass-card:hover { transform: translateY(-5px); box-shadow: 0 22px 48px rgba(10, 10, 10, 0.1); }
.pass-card--featured:hover { box-shadow: 0 36px 80px rgba(10, 10, 10, 0.24); }
.pass-card h3 {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.28vw, 22px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.12;
  text-wrap: balance;
}
.pass-card--featured h3 { font-size: clamp(26px, 2.1vw, 36px); font-weight: 700; }
.pass-card__tag { margin-top: 6px; }
.pass-card--featured .btn { padding: 19px 30px; font-size: 16px; }
.pass-card__price {
  margin-top: clamp(14px, 1.4vw, 22px);
  font-family: var(--font-display);
  font-size: clamp(26px, 2vw, 33px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}
.pass-card .rule { margin: clamp(18px, 1.6vw, 26px) 0; }
.pass-card__text { font-size: 14px; line-height: 1.5; color: var(--on-paper-dim); }
.pass-card .btn { margin-top: auto; justify-content: center; padding-inline: 18px; white-space: nowrap; }

.pass-card--featured {
  /* On a paper section the black box has to sit above the other two, not
     merely beside them: it carries a permanent lift, a larger title and the
     only large price on the row. No fourth colour is introduced for it. */
  box-shadow: 0 30px 70px rgba(10, 10, 10, 0.18);
  padding: clamp(24px, 2.1vw, 38px);
  --fg: var(--on-ink);
  --fg-dim: var(--on-ink-dim);
  --hairline: var(--on-ink-faint);
  --surface: var(--ink);
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}

/* The price ladder: one pass, three windows, read top to bottom as time. */
.ladder {
  display: grid;
  gap: 6px;
  margin: clamp(16px, 1.6vw, 24px) 0;
  padding: clamp(12px, 1.2vw, 18px) 0;
  border-top: 1px solid var(--on-ink-faint);
  border-bottom: 1px solid var(--on-ink-faint);
}
.ladder__step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 12px;
  align-items: baseline;
  padding: 6px 0 6px 20px;
  cursor: pointer;
  transition: opacity var(--dur-ui) var(--ease-ui);
}
/* On the name rather than the step: the row's height is set by the price,
   which is half as large again, so anything centred on the row sits above
   the name it marks. */
.ladder__name::before {
  content: '';
  position: absolute; right: calc(100% + 12px); top: 50%;
  width: 8px; height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.55;
}
.ladder__step.is-current .ladder__name::before {
  background: var(--red);
  border-color: var(--red);
  opacity: 1;
  animation: pulse-ring calc(var(--dur-cinematic) * 2) ease-out infinite;
}
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(255, 43, 51, 0.5); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(255, 43, 51, 0); }
}
.ladder__name { position: relative; font-weight: 600; font-size: 15px; }
.ladder__price {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.2vw, 21px);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
/* The window that is actually on sale is the headline price of the page. */
.ladder__step.is-current { padding-block: 10px 12px; }
.ladder__step.is-current .ladder__name { font-size: 16px; font-weight: 700; }
.ladder__step.is-current .ladder__price {
  font-size: clamp(38px, 3.4vw, 58px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.9;
}
.ladder__note { grid-column: 1 / -1; margin-top: 1px; }
.ladder__step.is-past,
.ladder__step.is-next { color: var(--on-ink-dim); }
.ladder__step.is-past .ladder__price { text-decoration: line-through; }
.ladder__step.is-current .ladder__note { color: var(--red); }
.ladder__step:hover { opacity: 0.85; }
.pass-card--featured .pass-card__tag,
.pass-card--featured .pass-card__text { color: var(--on-ink-dim); }
.pass-card--featured .rule { background: var(--on-ink-faint); }
.pass-card__badge {
  align-self: start;
  padding: 6px 12px;
  background: var(--red);
  color: #fff;
  margin-bottom: clamp(14px, 1.4vw, 22px);
}

.ticks { margin: clamp(16px, 1.6vw, 24px) 0 clamp(22px, 2.4vw, 36px); display: grid; gap: 9px; }
.ticks li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  line-height: 1.4;
}
.ticks li::before {
  content: '';
  position: absolute; left: 2px; top: 5px;
  width: 11px; height: 6px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.75;
}
.pass-card--featured .ticks li::before { color: var(--on-ink); }

.trust {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: clamp(44px, 5vw, 80px);
  border-top: 1px solid var(--on-paper-faint);
  border-bottom: 1px solid var(--on-paper-faint);
}
.trust li {
  display: flex;
  gap: 16px;
  padding: clamp(22px, 2.4vw, 34px) clamp(18px, 2vw, 34px);
}
.trust li + li { border-left: 1px solid var(--on-paper-faint); }
.trust svg { width: 26px; height: 26px; flex: none; opacity: 0.8; }
.trust p:first-child { font-size: 14px; font-weight: 500; line-height: 1.35; }
.trust .small { margin-top: 6px; letter-spacing: 0.04em; }
.trust .link-underline { margin-top: 6px; }

/* --------------------------------------------------------------------------
   15. Closing quote band
   -------------------------------------------------------------------------- */
.closing {
  position: relative;
  min-height: clamp(360px, 42vw, 560px);
  display: grid;
  align-items: center;
  background: var(--ink);
  color: var(--on-ink);
  --fg: var(--on-ink); --fg-dim: var(--on-ink-dim); --hairline: var(--on-ink-faint);
  overflow: hidden;
  isolation: isolate;
}
.closing__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.closing::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right, rgba(6, 6, 8, 0.96) 12%, rgba(6, 6, 8, 0.35) 55%, rgba(6, 6, 8, 0.6));
}
.closing__inner { padding-block: clamp(50px, 6vw, 90px); }
.closing__text { color: var(--white); max-width: 14ch; }

/* --------------------------------------------------------------------------
   15b. 07 — Partners
   -------------------------------------------------------------------------- */
.partners .section__grid { grid-template-columns: minmax(280px, 34%) 1fr; }
.partners .lede + .btn { margin-top: clamp(24px, 2.4vw, 38px); }
.tiers { display: grid; gap: clamp(22px, 2.4vw, 34px); }
.tier { padding-top: clamp(14px, 1.5vw, 22px); border-top: 1px solid var(--hairline); }
/* Name left, what the tier buys right — the way the old partner page set it. */
.tier__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px clamp(16px, 2vw, 32px);
  margin-bottom: clamp(14px, 1.4vw, 22px);
}
/* The tier name is the label — uppercase, tracked, full ink. The line
   next to it is a sentence someone actually reads, so it drops the label
   treatment entirely: sentence case, no tracking to fight, lighter weight
   and a dimmer value, which is what makes it secondary rather than a
   second title competing with the first. */
.tier__name { color: var(--fg); }
.tier__role {
  font-size: clamp(12px, 0.85vw, 13px);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.45;
  /* Dim on top of dim: the line has to sit under the label without
     turning into grey mush, and 0.85 of the section's own dim value
     tracks whichever ground it is on. */
  color: var(--fg-dim);
  opacity: 0.85;
  text-align: right;
  max-width: 42ch;
}

/* A partner wall, not a grid of boxes: every mark sits on the ink at its
   own width, knocked back to one ink value the way a sponsor wall knocks
   every logo to a single colour. Two sizes per tier — `--h` is the optical
   height a piece of artwork is set at, `--wh` the type size a name is set
   at when the artwork has not arrived. Each mark corrects `--h` for its own
   proportions, because a wide swoosh and a tall trident do not read as
   equal at equal height. */
.tier__slots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(24px, 3vw, 54px);
  --h: clamp(19px, 1.7vw, 25px);
  --wh: clamp(17px, 1.4vw, 21px);
}
.tier__slots--xl { --h: clamp(30px, 2.7vw, 42px); --wh: clamp(19px, 1.6vw, 24px); gap: clamp(34px, 4vw, 70px); }
.tier__slots--lg { --h: clamp(24px, 2.1vw, 32px); --wh: clamp(18px, 1.5vw, 22px); gap: clamp(30px, 3.6vw, 62px); }
.tier__slots--sm { --h: clamp(16px, 1.4vw, 20px); --wh: clamp(13px, 1.05vw, 15px); gap: clamp(22px, 2.6vw, 44px); }
.tier__slots--inst { --h: clamp(16px, 1.4vw, 20px); --wh: clamp(12px, 1vw, 14px); gap: clamp(22px, 2.6vw, 44px); }

.mark {
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.88);
  transition: color var(--dur-interaction) var(--ease);
}
/* Every mark is the negative variant of its own artwork, so the wall is
   already one ink value; the images only lose a little weight so nothing
   glares against the off-white type. */
.mark img { display: block; width: auto; height: var(--h); opacity: 0.92; }
/* Where the pack has nothing this wall can use, the name stands as a
   wordmark in the site typeface. */
.mark--word {
  font-family: var(--font-display);
  font-size: var(--wh);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
/* Per-mark optical correction: artwork that is wide, square or full of
   fine detail does not read as equal at equal height. The factor is on
   the file, not the tier, so a mark keeps its weight wherever it sits. */
.mark--nike img { height: calc(var(--h) * 0.85); }
.mark--san-paolo img { height: calc(var(--h) * 1.25); }
.mark--maserati img { height: calc(var(--h) * 2.0); }
.mark--fiat img { height: calc(var(--h) * 1.55); }
.mark--lavazza img { height: calc(var(--h) * 0.9); }
.mark--fondazione-crt img { height: calc(var(--h) * 1.15); }
.mark--sky img { height: calc(var(--h) * 1.6); }
.mark--polito img { height: calc(var(--h) * 1.7); }
.mark--reale-mutua img { height: calc(var(--h) * 0.9); }
.mark--sparco img { height: calc(var(--h) * 1.15); }
.mark--sport-e-salute img { height: calc(var(--h) * 1.35); }
.mark--linkedin img { height: calc(var(--h) * 0.85); }
.mark--fever img { height: calc(var(--h) * 0.95); }
.mark--cdp img { height: calc(var(--h) * 1.15); }
.mark--camera-commercio img { height: calc(var(--h) * 1.7); }
.mark--turismo-torino img { height: calc(var(--h) * 1.6); }
.mark--una-hotels img { height: calc(var(--h) * 2.6); }
.mark--nh-hotels img { height: calc(var(--h) * 1.7); }
.mark--casa-martini img { height: calc(var(--h) * 1.15); }
.mark--juventus img { height: calc(var(--h) * 0.85); }
.mark--pasqua img { height: calc(var(--h) * 0.9); }
.mark--maeci img { height: calc(var(--h) * 2.2); }
.mark--dip-sport img { height: calc(var(--h) * 1.8); }
.mark--unesco img { height: calc(var(--h) * 1.2); }
/* Two brands sold as one slot, joined the way the old page joined them. */
.mark--pair { gap: 0.55em; }
.mark--pair b { font-size: calc(var(--wh) * 0.8); font-weight: 400; opacity: 0.5; }

.tier__slots--inst .mark { color: rgba(255, 255, 255, 0.66); }
.tier__slots--inst .mark--word {
  font-family: var(--font-body);
  font-size: var(--wh);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */
.faq .section__grid { grid-template-columns: minmax(280px, 34%) 1fr; }
.accordion { border-top: 1px solid var(--hairline); }
.accordion details { border-bottom: 1px solid var(--hairline); }
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(20px, 2vw, 30px) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.45vw, 24px);
  font-weight: 600;
  letter-spacing: -0.02em;
  transition: color var(--dur-ui) var(--ease-ui);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { color: var(--red); }
.plus { position: relative; width: 16px; height: 16px; flex: none; }
.plus::before, .plus::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  background: currentColor;
  transition: transform var(--dur-interaction) var(--ease);
}
.plus::before { width: 16px; height: 1.5px; transform: translate(-50%, -50%); }
.plus::after { width: 1.5px; height: 16px; transform: translate(-50%, -50%); }
.accordion details[open] .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.accordion details[open] summary { color: var(--red); }
/* The answer opens by growing a grid row, which is the one animatable
   route to "height: auto". The close is scripted; without JS the browser's
   own instant open/close stands. */
/* Addresses in the FAQ are links now (the contact address comes from
   config.js), so they look like links. */
.faq .lede a,
.accordion__body a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.faq .lede a:hover,
.accordion__body a:hover { color: var(--red); }
.accordion__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-interaction) var(--ease); }
.accordion__body > div { overflow: hidden; }
.accordion details.is-open .accordion__body,
html:not(.js) .accordion details[open] .accordion__body { grid-template-rows: 1fr; }
.accordion p {
  padding-bottom: clamp(20px, 2vw, 30px);
  max-width: 62ch;
  color: var(--fg-dim);
}

/* --------------------------------------------------------------------------
   Email field
   One component for every email capture on the page. An underline on ink
   read as decoration rather than a place to type; this is a box with its
   own edge, the placeholder at a value you can read, and the button joined
   to it so the two are one action.
   -------------------------------------------------------------------------- */
.field__label { display: block; margin-bottom: 12px; color: var(--on-ink); }
.field {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.05);
  transition: border-color var(--dur-interaction) var(--ease), box-shadow var(--dur-interaction) var(--ease);
}
.field:hover { border-color: rgba(255, 255, 255, 0.55); }
.field:focus-within { border-color: var(--on-ink); box-shadow: 0 0 0 1px var(--on-ink); }
.field input {
  flex: 1 1 auto;
  min-width: 0;
  height: 60px;
  padding: 0 20px;
  background: none;
  border: 0;
  color: var(--on-ink);
  font-family: inherit;
  font-size: 17px;
}
.field input::placeholder { color: rgba(255, 255, 255, 0.55); }
.field input:focus { outline: none; }
.field input[readonly] { cursor: default; color: rgba(255, 255, 255, 0.72); }
/* The button sits on the field's edge, not inside it. */
.field .btn { flex: none; margin: -1px -1px -1px 0; padding-inline: 28px; font-size: 15px; justify-content: center; }

/* The message under a field sits in the flow, so a two-line answer pushes
   what follows down instead of printing over it. */
.field + .newsletter__msg { position: static; }
.field + .newsletter__msg:not(:empty) { margin-top: 12px; }
.field--solo { display: block; }
.field--solo input { width: 100%; }

/* After the address is saved, an optional panel. It reads as its own piece,
   and it can be closed. */
.form-more {
  display: grid;
  gap: 14px;
  width: 100%;
  margin-top: 16px;
  padding: 16px 16px 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-left: 3px solid var(--red);
}
.form-more[hidden],
.form-more-open[hidden] { display: none; }
.form-more-open {
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--on-ink);
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.form-more-open:hover { color: var(--red); }
.form-more__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.form-more__lead { margin: 0; color: var(--on-ink); }
.form-more__close {
  flex: none;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: transparent;
  color: var(--on-ink);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.form-more__close:hover { border-color: var(--on-ink); color: var(--red); }
.form-more__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.form-more .field__label { margin-bottom: 8px; }
.form-more .btn { justify-self: start; }

/* The WhatsApp Channel: a secondary way in, never a second primary button.
   This link alone uses WhatsApp green so it reads as WhatsApp. */
.wa-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #25d366;
  font-size: 15px;
  font-weight: 500;
}
.wa-link__icon { width: 22px; height: 22px; flex: none; fill: currentColor; }
.wa-link span { padding-bottom: 3px; border-bottom: 1px solid rgba(37, 211, 102, 0.45); transition: border-color var(--dur-interaction) var(--ease); }
.wa-link:hover { color: #5eeb8b; }
.wa-link:hover span { border-bottom-color: currentColor; }
.wa-link:hover .arr { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   17. Newsletter
   -------------------------------------------------------------------------- */
.newsletter { background: var(--ink); color: var(--on-ink); --fg: var(--on-ink); --fg-dim: var(--on-ink-dim); --hairline: var(--on-ink-faint); }
.newsletter__inner {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 44%);
  gap: clamp(28px, 3.4vw, 64px);
  align-items: center;
  padding-block: clamp(50px, 6vw, 90px);
}
.newsletter__actions { display: grid; gap: clamp(26px, 2.6vw, 36px); justify-items: start; }
.newsletter__form { position: relative; width: 100%; }
.newsletter__msg { position: absolute; top: calc(100% + 10px); left: 0; color: var(--red); }
.newsletter__msg.is-ok { color: rgba(255, 255, 255, 0.7); }
.newsletter__msg.is-done { color: var(--on-ink); font-size: 16px; }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--on-ink);
  --fg: var(--on-ink); --fg-dim: var(--on-ink-dim); --hairline: var(--on-ink-faint);
  border-top: 1px solid var(--on-ink-faint);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(240px, 30%) 1fr;
  gap: clamp(32px, 4vw, 70px);
  padding-block: clamp(46px, 5.5vw, 86px);
}
.site-footer__brand .small { margin-top: clamp(20px, 2vw, 30px); }
.site-footer__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 48px); }
.site-footer__nav h3 { margin-bottom: 18px; color: var(--on-ink-dim); font-weight: 500; }
.site-footer__nav li + li { margin-top: 10px; }
.site-footer__nav a { font-size: 15px; opacity: 0.82; transition: opacity var(--dur-ui) var(--ease-ui), color var(--dur-ui) var(--ease-ui); }
.site-footer__nav a:hover { opacity: 1; color: var(--red); }

/* About TED events: required by TED, word for word. Set in the footer's
   own voice, but at body size and a readable value, not as fine print. */
.site-footer__about {
  display: grid;
  gap: 12px;
  padding-block: clamp(28px, 3vw, 44px);
  border-top: 1px solid var(--on-ink-faint);
}
.site-footer__about-title {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.3vw, 20px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--on-ink);
}
.site-footer__about p { max-width: 76ch; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.74); }
.site-footer__about a { color: var(--on-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.site-footer__about a:hover { color: var(--red); }

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-block: clamp(18px, 2vw, 28px);
  border-top: 1px solid var(--on-ink-faint);
}
.site-footer__bar a {
  color: var(--on-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.site-footer__bar a:hover { color: var(--red); }

/* --------------------------------------------------------------------------
   Legal pages — privacy policy and terms
   -------------------------------------------------------------------------- */
.legal-page {
  padding-top: calc(var(--header-h) + clamp(40px, 6vw, 88px));
  padding-bottom: clamp(80px, 10vw, 140px);
}
.legal { max-width: 74ch; }
.legal h1 { max-width: 14ch; }
.legal__meta { margin-top: 22px; }
.legal__intro { margin-top: clamp(22px, 2.4vw, 36px); max-width: 62ch; color: var(--on-paper); }
.legal h2 {
  margin: 2.2em 0 0.65em;
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.legal p { margin-top: 0.85em; }
.legal h2 + p,
.legal h2 + .legal__table { margin-top: 0; }
.legal strong { font-weight: 600; }
.legal a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.legal a:hover { color: var(--red); }
.legal ul { list-style: disc; margin: 0.9em 0 0; padding-left: 1.2em; }
.legal li { margin-top: 0.55em; }
.legal__table { margin-top: 0.4em; overflow-x: auto; }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.legal th,
.legal td {
  text-align: left;
  vertical-align: top;
  padding: 12px 18px 12px 0;
  border-bottom: 1px solid var(--hairline);
}
.legal th {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  font-weight: 600;
}
.legal-tools {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px 22px;
}
.legal-back {
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.legal-back:hover { color: var(--red); }
/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) {
  .hero__quote, .hero__tag, .hero__emblem { display: block; }
}

@media (max-width: 1240px) {
  .theme-grid { grid-template-columns: repeat(2, 1fr); }
  .experience__grid { grid-template-columns: repeat(3, 1fr); }
  .pass-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pass-card--ladder { grid-column: 1 / -1; }
  .trust { grid-template-columns: repeat(2, 1fr); }
  .trust li:nth-child(odd) { border-left: 0; }
  .trust li { border-top: 1px solid var(--on-paper-faint); }
  .scoreboard { grid-template-columns: repeat(3, 1fr); }
  .scoreboard__cell:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
  .scoreboard__cell:nth-child(3n + 1)::after { left: 0; }
  .scoreboard__cell:nth-child(n + 4) { border-top: 1px solid var(--hairline); }
  .voices__soon { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1100px) {
  :root { --header-h: 72px; }
  .section__grid,
  .program .section__grid,
  .faq .section__grid,
  .partners .section__grid,
  .questions__head,
  .passes__layout,
  .voices__head,
  .experience__top,
  .newsletter__inner,
  .site-footer__inner { grid-template-columns: 1fr; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 18px var(--gutter) 28px;
    background: color-mix(in srgb, var(--ink) 97%, transparent);
    backdrop-filter: blur(16px);
    color: var(--white);
    transform: translateY(-120%);
    transition: transform var(--dur-interaction) var(--ease-out);
    max-height: calc(100svh - var(--header-h));
    overflow-y: auto;
  }
  .nav.is-open { transform: none; }
  .nav a {
    padding: 15px 0;
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .burger { display: grid; place-items: center; }
  /* logo | GET YOUR PASS | menu. Quiet during the hero; from the first
     viewport on it is the page's persistent way to the passes. */
  .site-header__cta {
    min-height: 44px;
    padding: 0 14px;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    gap: 10px;
    opacity: 0;
    translate: 0 -4px;
    pointer-events: none;
    transition: opacity var(--dur-interaction) var(--ease), translate var(--dur-interaction) var(--ease), color var(--dur-interaction) var(--ease), border-color var(--dur-interaction) var(--ease);
  }
  .site-header__cta .arr { --size: 14px; }
  .site-header.is-past-hero .site-header__cta { opacity: 1; translate: 0 0; pointer-events: auto; }
  .site-header__actions { gap: 10px; }
  .nav__extra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding-top: 26px;
  }
  .nav__extra .btn { flex: 1 1 200px; justify-content: center; }
  .nav a:last-of-type { border-bottom: 0; }
  .site-header__inner { gap: 12px; }
  .site-header__actions { margin-left: auto; }

  /* Stacked: the photograph becomes a band above the copy. */
  .idea { min-height: 0; }
  .idea__media {
    position: relative;
    width: auto;
    margin: 0 calc(var(--gutter) * -1) clamp(28px, 4vw, 48px);
  }
  .idea__media img { aspect-ratio: 16 / 9; height: auto; }
  .idea__media::before,
  .idea__media::after { background: none; }
  .idea__grid { grid-template-columns: 1fr; }
  .questions__head .lede { grid-column: 1; }
  .experience__intro { padding-right: 0; padding-block: var(--section-y) clamp(28px, 4vw, 44px); }
  .experience__hero { min-height: 62vw; }
  .experience__top { min-height: 0; }
  .tier__head { display: block; }
  /* Stacked, the line belongs under its label, not against the far edge. */
  .tier__role { margin-top: 4px; text-align: left; max-width: none; }
  .location__grid { grid-template-columns: 1fr; }
  .location-card { min-height: 0; }
  .location-card--city { aspect-ratio: 3 / 2; }
  .location-card--venue { aspect-ratio: 2 / 3; }
  .location-facts { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .location-facts .fact,
  .location-facts .fact + .fact { padding-left: 0; padding-right: clamp(12px, 2vw, 24px); border-left: 0; }
  .program__track > * { flex-basis: min(66vw, 300px); }
  .carousel--program .carousel__track { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .carousel--program .carousel__foot { padding-bottom: 0; }
  .site-footer__inner { gap: 40px; }
  .badge-stage { height: 380px; }
}

@media (max-width: 860px) {
  .display--xl { font-size: clamp(38px, 11vw, 62px); }
  .experience__grid { grid-template-columns: repeat(2, 1fr); }
  .hero__lede { line-height: 1.85; }
  .carousel__foot { flex-wrap: wrap; }
  .carousel__count { order: 3; width: 100%; }
  .carousel__foot .link-underline { margin-left: 0; }
}

@media (max-width: 360px) {
  .logo__img { --logo-h: 23px; }
  .site-header__cta { padding: 0 10px; font-size: 11px; }
  .site-header__cta .arr { display: none; }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; }
  .theme-grid,
  .experience__grid,
  .pass-grid,
  .trust,
  .location-facts { grid-template-columns: 1fr; }
  .trust li { border-left: 0 !important; }
  .site-footer__nav { grid-template-columns: repeat(2, 1fr); }
  .voices__track > * { flex-basis: 74vw; }
  .badge-swing__card { width: min(168px, 50%); }
  .badge-swing__strap { height: 40px; }
  .scoreboard { grid-template-columns: repeat(2, 1fr); }
  .scoreboard__cell:nth-child(n) { border-left: 0; padding-left: 0; }
  .scoreboard__cell:nth-child(n)::after { left: 0; }
  .scoreboard__cell:nth-child(n + 3) { border-top: 1px solid var(--hairline); }
  .scoreboard__cell:last-child { grid-column: 1 / -1; }   /* five cells, so the last one closes the row */
  .tier__slots { gap: clamp(22px, 7vw, 34px); }
  .voices__soon { grid-template-columns: repeat(2, 1fr); }
  .field { flex-direction: column; }
  .field .btn { margin: 0 -1px -1px; }
  .form-more__grid { grid-template-columns: 1fr; }
  .hero__foot { position: static; margin-top: 40px; padding-inline: var(--gutter); }
  .site-footer__bar { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   20. Preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-ui: 0.01ms; --dur-interaction: 0.01ms; --dur-reveal: 0.01ms; --dur-narrative: 0.01ms; --stagger-narrative: 0ms; --dur-cinematic: 0.01ms; --dur-ambient: 0.01ms; }
  html { scroll-behavior: auto; }
  html.js .reveal:not(.is-in), .reveal { opacity: 1; translate: none; transform: none; transition: none; }
  .lens, .lens-rim { display: none !important; }
  [data-reveal='words'] { transform: none !important; }
  .rw { opacity: 1 !important; filter: none !important; transform: none !important; }
  .marquee__track { animation: none; }
  .motion__track { translate: 0 0; }
  .scoreboard__cell::after { transform: scaleX(1); }
  .badge-swing.is-idle .badge-swing__pivot { animation: none; }
  .emblem svg { animation: none; }
  .hero__scrollline::after, .ladder__step.is-current .ladder__name::before { animation: none; }
  html.js .carousel--program .day-card { opacity: 1; transform: none; }
  html.js [data-count-group]:not(.is-in) .scoreboard__cell::after { transform: scaleX(1); }
  .hero__media img { transition: opacity var(--dur-interaction) linear; transform: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media print {
  .site-header, .scroll-progress, .marquee, .hero__media, .closing__bg { display: none !important; }
  body { background: #fff; color: #000; }
  .reveal { opacity: 1; translate: none; transform: none; }
}