/* ============================================================
   B2BV2V26 London - Dialogue of Skyscrapers, Edition II
   RealTimes Seashell edition. The London site previews the
   RealTimes news-portal aesthetic: Seashell canvas, warm ink,
   gold hairlines, Obsidian accent bands. Sharp corners, Inter.
   ============================================================ */

:root {
  /* Locked brand tokens (never change) */
  --rt-red: #e31b23;
  --rt-gold: #c5a55a;
  --background: #0f0f0f;            /* Obsidian: accent bands + canonical footer */
  --rt-charcoal: #1a1a1a;
  --rt-line: rgba(255, 255, 255, 0.12);

  /* Seashell edition (canonical light canvas, rt-brand-golden-standard) */
  --seashell: #fff5ee;
  --seashell-alt: #fff0e5;
  --card: #fffaf6;
  --ink: #1a1210;
  --ink-soft: #2d2420;
  --ink-muted: #8b7b6e;
  --ink-faint: rgba(26, 18, 16, 0.45);
  --line-warm: #e8d5c8;
  --line-warm-soft: rgba(26, 18, 16, 0.08);
  --gold-ink: #8a6d2f;              /* readable gold for text on Seashell */
  --seashell-92: rgba(255, 245, 238, 0.92);

  /* Gold / red derivatives (consumed via var() only) */
  --rt-gold-bright: #ddc074;
  --rt-gold-04: rgba(197, 165, 90, 0.04);
  --rt-gold-08: rgba(197, 165, 90, 0.08);
  --rt-gold-12: rgba(197, 165, 90, 0.12);
  --rt-gold-25: rgba(197, 165, 90, 0.25);
  --rt-gold-45: rgba(197, 165, 90, 0.45);
  --rt-gold-60: rgba(197, 165, 90, 0.6);
  --rt-red-12: rgba(227, 27, 35, 0.12);
  --rt-red-dim: #b8161d;

  /* On-dark set (accent bands + canonical footer) */
  --on-dark-primary: #ffffff;
  --on-dark-secondary: rgba(255, 255, 255, 0.72);
  --on-dark-muted: #8a8580;
  --on-dark-faint: rgba(255, 255, 255, 0.38);
  --line-soft: rgba(255, 255, 255, 0.08);
  --obsidian-92: rgba(15, 15, 15, 0.92);
  --obsidian-70: rgba(15, 15, 15, 0.7);
  --obsidian-00: rgba(15, 15, 15, 0);

  /* CANON:photo-scrim-tokens */
  /* CANONICAL PHOTO SCRIM. Approved by Alex 2026-07-16, applies to every
     photograph on this site. Flat, whole-frame, one constant alpha. Never a
     shaped gradient: a gradient buys darkness in the band under the copy and
     spends it there, so the strip reads as a "pasek" while the sky stays
     bright. Measured: white copy holds WCAG AA 4.5:1 at this alpha against
     the p95 of the backdrop (the blown speculars on tower glass set the
     failing number, not the mean). saturate() is luminance-preserving and so
     costs no contrast; it buys back the colour the veil takes. Never reach
     for contrast(), which lifts speculars and costs contrast.

     Two alphas, because the alpha is set by the JOB, not by the house look:
       --photo-scrim       photos that CARRY COPY. 0.55 is the lowest constant
                           that holds AA for white text on both the hero and
                           the venue frame; mobile sets it, not desktop.
       --photo-scrim-light photos that carry NO copy. Legibility asks nothing
                           here, so the veil exists only to make photos of
                           different native exposure read as one system. Using
                           0.55 here would buy nothing and cost the picture.
     Full rule: PHOTO-SCRIM-STANDARD.md (canon-locked). */
  --photo-scrim: rgba(15, 15, 15, 0.55);
  --photo-scrim-light: rgba(15, 15, 15, 0.20);
  --photo-saturate: 1.3;
  /* /CANON:photo-scrim-tokens */

  /* Inter, chosen for small-size legibility (taller x-height, more open
     apertures than Geist at 12-14px). Geist Mono retired: it was used on 41
     label/meta sites, none of them numeric, where monospace + uppercase +
     wide tracking made short text slow to read (Alex, round-2 feedback).
     --font-mono is kept as an alias so every call site flips in one line. */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: var(--font-sans);
  --ui-ease: 180ms ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; border-radius: 0 !important; }

html { scroll-behavior: smooth; scroll-padding-top: 104px; }

body {
  background: var(--seashell);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; }

.rt-shell {
  width: min(1160px, calc(100vw - 2.5rem));
  margin: 0 auto;
}

/* ---------- Typography primitives ---------- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-ink);
  display: inline-block;
}
.eyebrow-rule {
  display: block;
  width: 0;
  height: 1px;
  margin-top: 0.7rem;
  background: linear-gradient(90deg, var(--rt-gold), transparent);
  transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1) 200ms;
}
.revealed .eyebrow-rule { width: 72px; }

h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--ink);
  margin: 1.1rem 0 1.2rem;
  text-wrap: balance;
}
h3 { color: var(--ink); font-weight: 600; letter-spacing: -0.01em; }

section { padding: 5.5rem 0; position: relative; }
.section-note {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  margin-top: 1.6rem;
}
.section-lede { max-width: 58ch; color: var(--ink-soft); }

/* ---------- Buttons ---------- */
.btn-red {
  display: inline-block;
  background: var(--rt-red);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.85rem 1.7rem;
  text-decoration: none;
  border: 1px solid var(--rt-red);
  cursor: pointer;
  transition: background var(--ui-ease), transform var(--ui-ease), box-shadow var(--ui-ease);
}
.btn-red:hover {
  background: var(--rt-red-dim);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px var(--rt-red-12);
}
.btn-ghost {
  display: inline-block;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.8rem 1.5rem;
  text-decoration: none;
  border: 1px solid var(--rt-gold-60);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--ui-ease), background var(--ui-ease), transform var(--ui-ease);
}
.btn-ghost:hover {
  border-color: var(--rt-gold);
  background: var(--rt-gold-08);
  transform: translateY(-2px);
}

/* ============================================================
   NAV - Seashell, blur on scroll
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--seashell);
  border-bottom: 1px solid transparent;
  transition: background var(--ui-ease), border-color var(--ui-ease), box-shadow var(--ui-ease);
}
.nav.scrolled {
  background: var(--seashell-92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--line-warm);
  box-shadow: 0 6px 24px rgba(26, 18, 16, 0.06);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 1rem;
}
.nav-logo img { height: 26px; width: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.nav-links a:not(.btn-red) {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color var(--ui-ease);
}
.nav-links a:not(.btn-red):hover { color: var(--rt-red); }
.nav-links .btn-red { padding: 0.55rem 1.1rem; font-size: 0.82rem; }

.nav-burger {
  display: none;
  width: 44px; height: 44px;
  background: transparent;
  border: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-burger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--ink);
  transition: transform var(--ui-ease), opacity var(--ui-ease);
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   TICKER - Obsidian market strip under the nav
   ============================================================ */
.ticker {
  position: fixed;
  top: 64px; left: 0; right: 0;
  z-index: 99;
  height: 40px;
  background: var(--background);
  border-bottom: 1px solid var(--rt-gold-25);
  overflow: hidden;
  /* No edge-fade mask (Alex, round-2): the gradient dissolved the strip's
     text at both ends, which cost legibility for no design gain. */
}
.ticker-row {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 2.6rem;
  width: max-content;
  animation: tickerScroll 46s linear infinite;
  padding-left: 1rem;
}
.ticker:hover .ticker-row { animation-play-state: paused; }
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 2.6rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  /* Dark band rule (SAR 2026-06-12): pure white, never muted */
  color: var(--on-dark-primary);
  white-space: nowrap;
  text-decoration: none;
}
.ticker .tick-sep { color: var(--rt-gold-bright); font-size: 0.55rem; }
.ticker-item.tick-cta { color: var(--rt-gold-bright); font-weight: 600; }
a.ticker-item:hover { color: var(--rt-gold-bright); }

/* ============================================================
   HERO - copy ON the full-bleed banner (Alex, round-1 feedback).
   A local gradient scrim darkens the copy's band only (added
   post-QA; measured contrast was 1.65-2.56:1 against white text,
   under WCAG AA); the sky/skyline stay visible above and below.
   Dark band rule: all white + full-brightness gold, preserved
   (gold-bright accents moved to white on this specific banner
   only, where gold-on-golden-photo cannot pass contrast).
   ============================================================ */
.hero {
  padding-top: 104px; /* nav 64 + ticker 40 */
  background: var(--seashell);
}
.hero-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rt-gold-bright);
}
.hero h1 {
  font-size: clamp(2.4rem, 6.2vw, 4.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--on-dark-primary);
  margin: 1.1rem 0 1.1rem;
  max-width: 17ch;
  text-wrap: balance;
}
.hero h1 .h1-red { color: var(--rt-red); }
.hero-sub {
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  color: var(--on-dark-primary);
  max-width: 46ch;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.4rem;
  margin: 1.5rem 0 1.9rem;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rt-gold-bright);
}
.hero-meta .meta-dot { color: var(--on-dark-primary); }
/* On this banner, gold-on-golden-photo is the same hue family as the sky,
   so gold-bright cannot reach 4.5:1 here even under the scrim. Use white
   to match the h1/sub already on this surface; --rt-gold-bright keeps its
   full brightness everywhere else on the site. */
.hero-on-banner .hero-eyebrow,
.hero-on-banner .hero-meta {
  color: var(--on-dark-primary);
}
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* On-banner ghost button: white on dark, gold on hover */
.btn-on-banner {
  display: inline-block;
  color: var(--on-dark-primary);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.8rem 1.5rem;
  text-decoration: none;
  border: 1px solid var(--on-dark-primary);
  background: rgba(15, 15, 15, 0.18);
  cursor: pointer;
  transition: border-color var(--ui-ease), color var(--ui-ease), transform var(--ui-ease);
}
.btn-on-banner:hover {
  border-color: var(--rt-gold-bright);
  color: var(--rt-gold-bright);
  transform: translateY(-2px);
}

/* Full-bleed banner carrying the copy */
.hero-banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(540px, 80vh, 780px);
  overflow: hidden;
  border-bottom: 1px solid var(--rt-gold-45);
  background: var(--rt-charcoal); /* paint-before-image fallback */
}
/* Descendant, not child: the hero <img> is wrapped in a <picture> for the
   art-directed portrait crop, so `> img` would no longer match. */
.hero-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  object-position: center 30%;
  will-change: transform;
  /* Pairs with --photo-scrim: the veil desaturates, this gives the colour
     back. Luminance-preserving, so it costs no contrast. */
  filter: saturate(var(--photo-saturate));
}
/* Canonical photo scrim, flat and whole-frame. See --photo-scrim.
   Superseded a 7-stop vertical gradient (0.20 to 0.72 to 0.08) that shaped
   itself around the copy band. It held AA at 6.44:1, roughly 2x the 4.5:1
   floor, and paid for that unused margin by smearing 0.58-0.72 across 82% of
   the frame: the band read as a strip and the photograph read as gloom.
   Flat 0.55 measures 4.69:1 desktop / 5.13:1 mobile against the p95 backdrop
   with the copy hidden. Honest note: the mean frame is 0.98x / 0.90x of the
   old gradient's, so this is not a brighter hero, it is an evenly lit one.
   The copy band gains ~102%; the open sky gives back ~43% and the skyline at
   the foot of the towers ~62%. That trade was made deliberately. */
/* CANON:photo-scrim-hero */
.hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--photo-scrim);
  pointer-events: none;
}
/* /CANON:photo-scrim-hero */
.hero-on-banner {
  position: relative;
  z-index: 2;
  padding: clamp(3rem, 9vh, 5.5rem) 0;
  /* Legibility text-shadow, paired with the .hero-banner::before scrim above */
  text-shadow: 0 2px 26px rgba(15, 15, 15, 0.5), 0 1px 3px rgba(15, 15, 15, 0.4);
}
.hero-on-banner .hero-cta-row { text-shadow: none; }
.hero-banner .banner-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: 0.55rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rt-gold-bright);
  background: var(--obsidian-70);
  backdrop-filter: blur(4px);
  border-top: 1px solid var(--rt-gold-25);
  border-right: 1px solid var(--rt-gold-25);
}
/* Golden-hour sweep lives on the image band only */
.hero-banner .banner-sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 38%,
    var(--rt-gold-04) 46%,
    var(--rt-gold-12) 50%,
    var(--rt-gold-04) 54%,
    transparent 62%);
  background-size: 280% 100%;
  background-position: 120% 0;
  animation: goldSweep 8s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes goldSweep {
  0%   { background-position: 120% 0; }
  55%  { background-position: -20% 0; }
  100% { background-position: -20% 0; }
}

/* Staged masthead entrance */
.stage {
  opacity: 0;
  transform: translateY(22px);
  animation: stageIn 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes stageIn { to { opacity: 1; transform: translateY(0); } }
.d1 { animation-delay: 100ms !important; }
.d2 { animation-delay: 260ms !important; }
.d3 { animation-delay: 440ms !important; }
.d4 { animation-delay: 620ms !important; }
.d5 { animation-delay: 800ms !important; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.revealed { opacity: 1; transform: translateY(0); }
.reveal[data-stagger="1"] { transition-delay: 90ms; }
.reveal[data-stagger="2"] { transition-delay: 180ms; }
.reveal[data-stagger="3"] { transition-delay: 270ms; }
.reveal[data-stagger="4"] { transition-delay: 360ms; }
.reveal[data-stagger="5"] { transition-delay: 450ms; }
.reveal[data-stagger="6"] { transition-delay: 540ms; }

/* ============================================================
   TRUST BLOCK - the evening, plainly
   ============================================================ */
.trust { padding-top: 4.4rem; }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-warm);
  border: 1px solid var(--line-warm);
  margin-top: 2.2rem;
}
.trust-cell {
  background: var(--card);
  padding: 1.5rem 1.4rem 1.6rem;
  transition: background var(--ui-ease);
}
.trust-cell:hover { background: var(--seashell-alt); }
.trust-cell h3 {
  font-size: 0.78rem;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 0.7rem;
}
.trust-cell p { font-size: 0.9rem; color: var(--ink-soft); }
.trust-cell p strong { color: var(--ink); font-weight: 600; }
.trust-sla {
  margin-top: 1.4rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
}
.trust-sla strong { color: var(--gold-ink); font-weight: 600; }

/* ============================================================
   CONCEPT
   ============================================================ */
.concept-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 3.5rem;
  align-items: start;
}
.concept-copy p { margin-bottom: 1.1rem; max-width: 58ch; }
.concept-copy p strong { color: var(--ink); font-weight: 600; }
.concept-facts {
  display: grid;
  gap: 1px;
  background: var(--line-warm);
  border: 1px solid var(--line-warm);
}
.fact-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1rem;
  padding: 1.05rem 1.2rem;
  background: var(--card);
  transition: background var(--ui-ease);
}
.fact-row:hover { background: var(--seashell-alt); }
.fact-row dt {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-ink);
  padding-top: 0.2rem;
}
.fact-row dd { color: var(--ink); font-size: 0.95rem; font-weight: 500; }
.fact-row dd .dd-sub { display: block; color: var(--ink-muted); font-size: 0.82rem; font-weight: 400; margin-top: 0.15rem; }

/* ============================================================
   SERIES - horizontal scroll-snap timeline
   ============================================================ */
.series { background: var(--seashell-alt); border-top: 1px solid var(--line-warm); border-bottom: 1px solid var(--line-warm); overflow: hidden; }
.series-track-wrap { position: relative; margin-top: 2.4rem; }
.series-track {
  display: flex;
  gap: 1.1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.5rem 0.2rem 1.4rem;
  scrollbar-width: thin;
  scrollbar-color: var(--rt-gold-60) transparent;
}
.series-track::-webkit-scrollbar { height: 4px; }
.series-track::-webkit-scrollbar-thumb { background: var(--rt-gold-60); }
.series-track::-webkit-scrollbar-track { background: var(--line-warm-soft); }

.edition-card {
  flex: 0 0 clamp(240px, 24vw, 300px);
  scroll-snap-align: start;
  border: 1px solid var(--line-warm);
  background: var(--card);
  transition: transform var(--ui-ease), border-color var(--ui-ease), box-shadow var(--ui-ease);
  position: relative;
}
.edition-card:hover {
  transform: translateY(-5px);
  border-color: var(--rt-gold-60);
  box-shadow: 0 16px 44px rgba(26, 18, 16, 0.12);
}
.edition-card.current {
  border-color: var(--rt-gold);
  box-shadow: 0 0 0 1px var(--rt-gold-45), 0 18px 50px rgba(26, 18, 16, 0.14);
}
.edition-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--rt-charcoal); }
.edition-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Not in the transition list, so it does not fight the hover scale.
     saturate() does not expand the box the way blur() would, so the parent's
     overflow:hidden still clips the scaled image exactly as before. */
  filter: saturate(var(--photo-saturate));
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.edition-card:hover .edition-img img { transform: scale(1.05); }
/* Canonical photo scrim at the LIGHT alpha. See --photo-scrim-light.
   Superseded a 2-stop bottom lift (0 to 0.70), a pasek at the foot of every
   card. Nothing here needs a scrim to be legible: the city, building and
   stats live in .edition-body BELOW the photo on solid ground, and the only
   element on the image is .edition-badge, which carries its own opaque plate
   and measures 7.29:1 with the scrim removed entirely. So this veil has no
   legibility job, only a unifying one: six photos of very different native
   exposure read as one system. The hero's 0.55 here would take the Warsaw
   sunset from vivid to muddy and buy nothing. These are the proof a first
   edition happened; do not make them gloomy to match a number. */
/* CANON:photo-scrim-edition */
.edition-img::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--photo-scrim-light);
}
/* /CANON:photo-scrim-edition */
.edition-badge {
  position: absolute;
  top: 0.8rem; left: 0.8rem;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--rt-line);
  background: var(--obsidian-70);
  color: var(--on-dark-primary);
  backdrop-filter: blur(4px);
}
.edition-badge.next { background: var(--rt-red); border-color: var(--rt-red); color: var(--on-dark-primary); }
.edition-badge.done { color: var(--rt-gold-bright); border-color: var(--rt-gold-45); }
.edition-body { padding: 1.1rem 1.2rem 1.25rem; }
.edition-no {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.edition-city {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0.4rem 0 0.1rem;
}
.edition-building { font-size: 0.86rem; color: var(--ink-soft); }
.edition-stats {
  display: flex;
  gap: 1rem;
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line-warm);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}
.edition-stats .ht { color: var(--gold-ink); }
.series-hint {
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Circular swipe arrows (desktop) flanking the infinite strip */
.series-arrow {
  position: absolute;
  top: 42%;
  z-index: 3;
  width: 46px;
  height: 46px;
  border-radius: 50% !important;
  border: 1px solid var(--rt-gold-60);
  background: var(--seashell-92);
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(3px);
  transition: border-color var(--ui-ease), color var(--ui-ease), background var(--ui-ease);
}
.series-arrow:hover { border-color: var(--rt-red); color: var(--rt-red); }
.series-arrow.prev { left: -10px; }
.series-arrow.next { right: -10px; }
@media (min-width: 981px) {
  .series-arrow { display: inline-flex; }
}

/* ============================================================
   PROGRAMME - four-act evening arc
   ============================================================ */
.acts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
  margin-top: 2.6rem;
  position: relative;
}
.acts::before {
  content: "";
  position: absolute;
  top: 7px; left: 2%; right: 2%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rt-gold-60) 12%, var(--rt-gold-60) 88%, transparent);
}
.act { position: relative; padding-top: 2rem; }
.act::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 15px; height: 15px;
  border: 1px solid var(--rt-gold);
  background: var(--seashell);
  transform: rotate(45deg);
  transition: background var(--ui-ease);
}
.act:hover::before { background: var(--rt-gold); }
.act-no {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.act h3 { font-size: 1.25rem; margin: 0.45rem 0 0.5rem; }
.act p { font-size: 0.88rem; color: var(--ink-muted); max-width: 30ch; }
.act-time {
  display: inline-block;
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--line-warm);
  padding: 0.3rem 0.65rem;
}

/* ============================================================
   SPEAKERS - panels + capital-mandate filter chips
   ============================================================ */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.8rem;
}
.chip {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--card);
  border: 1px solid var(--line-warm);
  padding: 0.5rem 0.95rem;
  cursor: pointer;
  transition: border-color var(--ui-ease), background var(--ui-ease), color var(--ui-ease);
}
.chip:hover { border-color: var(--rt-gold-60); }
.chip.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--seashell);
}
.panels-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
  margin-top: 1.8rem;
}
.panel-block {
  border: 1px solid var(--line-warm);
  background: var(--card);
  padding: 1.6rem 1.6rem 1.5rem;
  transition: border-color var(--ui-ease), transform var(--ui-ease), opacity 300ms ease;
}
.panel-block:hover { border-color: var(--rt-gold-60); transform: translateY(-3px); }
.panel-block.chip-hidden { display: none; }
.panel-no {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.panel-block h3 { font-size: 1.3rem; margin: 0.5rem 0 0.35rem; }
.panel-block .panel-desc { font-size: 0.88rem; color: var(--ink-muted); margin-bottom: 1.3rem; }
/* 6 seats per panel: two rows of three, moderator first (Alex, round-1) */
.panel-people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem 0.8rem; }
.tba-card { min-width: 0; }

/* Panel description box: appears beside the lone card when one category is filtered */
.panel-detail { display: none; }
.panels-grid.single-cat { grid-template-columns: 1fr 1fr; align-items: stretch; }
.panels-grid.single-cat .panel-detail:not(.chip-hidden) {
  display: block;
  border: 1px solid var(--rt-gold-45);
  background: var(--seashell-alt);
  padding: 1.6rem 1.6rem 1.5rem;
}
.panel-detail-label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.panel-detail h4 { font-size: 1.1rem; color: var(--ink); margin: 0.5rem 0 0.6rem; }
.panel-detail p { font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 0.8rem; }
.panel-detail .panel-detail-who { color: var(--ink); font-weight: 600; margin-bottom: 0; }

/* Nominate-a-speaker CTA */
.nominate-cta {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.2rem;
  border: 1px dashed var(--rt-gold-60);
  background: var(--rt-gold-04);
  padding: 1rem 1.3rem;
}
.nominate-cta span { font-size: 0.92rem; color: var(--ink-soft); }
.nominate-cta a {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--rt-red);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.nominate-cta a:hover { color: var(--rt-red-dim); }
.tba-avatar {
  aspect-ratio: 1 / 1;
  max-width: 120px;
  border: 1px solid var(--line-warm);
  background:
    linear-gradient(160deg, var(--rt-gold-12), transparent 60%),
    var(--seashell-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--rt-gold);
  transition: border-color var(--ui-ease), color var(--ui-ease);
}
.tba-card:hover .tba-avatar { border-color: var(--rt-gold-60); color: var(--gold-ink); }
.tba-name {
  margin-top: 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.tba-role {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 0.15rem;
}
.mod-tag {
  display: inline-block;
  margin-top: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rt-red);
  border: 1px solid var(--rt-red);
  padding: 0.14rem 0.4rem;
}

/* ============================================================
   VENUE - The Shard. Obsidian accent band (image + scrim).
   ============================================================ */
.venue { padding: 0; }
.venue-frame {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-top: 1px solid var(--rt-gold-45);
  border-bottom: 1px solid var(--rt-gold-45);
  background: var(--background);
}
.venue-bg { position: absolute; inset: 0; }
.venue-bg img {
  width: 100%; height: 110%;
  object-fit: cover;
  object-position: center 25%;
  will-change: transform;
  filter: saturate(var(--photo-saturate));
}
/* Canonical photo scrim, flat and whole-frame. See --photo-scrim.
   Superseded a stacked pair of gradients (a 90deg wipe from 0.92 down to 0
   by 70%, plus a 0deg lift) that hid the left ~43% of the frame, exactly
   where the copy sits, behind a near-solid panel. That gradient did not even
   do its job: the desktop copy measured 4.02:1, a live AA FAIL. Flat 0.55
   measures 5.32:1 desktop / 4.86:1 mobile and needs no text-shadow.
   Brightness where it counts: the text column goes 0.026 to 0.084 on desktop
   (3x) and the mobile frame 0.017 to 0.084 (5x, the photo was effectively
   invisible). One alpha clears both viewports, so the old mobile-only
   override is gone rather than replaced. Mobile sets this number, not
   desktop: mobile copy crosses more bright sky with no two-column split. */
/* CANON:photo-scrim-venue */
.venue-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--photo-scrim);
}
/* /CANON:photo-scrim-venue */
.venue-content {
  position: relative;
  z-index: 2;
  padding: 5.5rem 0 4.5rem;
  max-width: 620px;
}
/* Gold goes white on a photo. Identical call to .hero-on-banner above, and
   for the identical reason: gold is mid-luminance, --photo-scrim is
   mid-luminance, and mid-on-mid is the worst possible pairing. No alpha
   rescues it (gold only reaches 4.31:1 at 0.55 -> 0.65, still short of 4.5,
   while re-darkening the photo the flat scrim just freed). The old shaped
   gradient hid this by burying the copy column under a near-black panel:
   gold measured 6.37:1 there, but only because nobody could see the Shard.
   Gold keeps its full brightness everywhere else on this site, on solid
   ground where it belongs. */
/* CANON:photo-scrim-gold-on-photo */
.venue-content .eyebrow,
.venue-content .vstat .vstat-num,
.venue-content .vstat .vstat-num .unit { color: var(--on-dark-primary); }
/* /CANON:photo-scrim-gold-on-photo */
.venue-content h2 { color: var(--on-dark-primary); }
.venue-content > p { margin: 0.4rem 0 1rem; max-width: 52ch; color: var(--on-dark-primary); }
.venue-stats {
  display: flex;
  gap: 2.4rem;
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rt-gold-25);
}
.vstat .vstat-num {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--rt-gold-bright);
  font-variant-numeric: tabular-nums;
}
.vstat .vstat-num .unit { font-size: 0.55em; color: var(--rt-gold); margin-left: 0.12em; }
.vstat .vstat-label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-primary);
  margin-top: 0.3rem;
}

/* Getting there + stay nearby (light band under the venue image) */
.venue-practical { padding: 4.2rem 0 5.5rem; }
.practical-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  margin-top: 2.2rem;
}
.practical-col {
  border: 1px solid var(--line-warm);
  background: var(--card);
  padding: 1.6rem 1.6rem 1.4rem;
}
.practical-col h3 {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 1.1rem;
}
.practical-list { list-style: none; display: grid; gap: 0.85rem; }
.practical-list li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line-warm-soft);
}
.practical-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.practical-list .pl-key {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-top: 0.2rem;
}
.practical-list strong { color: var(--ink); font-weight: 600; }
.practical-list .pl-sub { display: block; font-size: 0.8rem; color: var(--ink-muted); margin-top: 0.1rem; }
.practical-note {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

/* ============================================================
   INVITATIONS - tiers (prices TBA) + member terms
   ============================================================ */
.tickets { background: var(--seashell-alt); border-top: 1px solid var(--line-warm); border-bottom: 1px solid var(--line-warm); }
.ticket-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  margin-top: 2.4rem;
}
.ticket-card {
  position: relative;
  border: 1px solid var(--line-warm);
  background: var(--card);
  padding: 1.8rem 1.6rem 1.7rem;
  display: flex;
  flex-direction: column;
  transition: transform var(--ui-ease), border-color var(--ui-ease), box-shadow var(--ui-ease);
}
.ticket-card:hover {
  transform: translateY(-4px);
  border-color: var(--rt-gold-60);
  box-shadow: 0 16px 44px rgba(26, 18, 16, 0.1);
}
.ticket-card.popular { border-color: var(--rt-red); }
.popular-badge {
  position: absolute;
  top: 0; left: 1.4rem;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--rt-red);
  padding: 0.3rem 0.7rem;
}
/* Tier names: larger and bold (Alex, round-1 feedback) */
.ticket-tier {
  font-family: var(--font-sans);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.ticket-price {
  margin: 0.7rem 0 0.2rem;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.ticket-price-note {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--gold-ink);
  margin-bottom: 1.2rem;
}
.ticket-benefits { list-style: none; display: grid; gap: 0.6rem; flex: 1; margin-bottom: 1.5rem; }
.ticket-benefits li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.ticket-benefits li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.52em;
  width: 7px; height: 7px;
  background: var(--rt-gold);
  transform: rotate(45deg);
}
.ticket-card .btn-red, .ticket-card .btn-ghost { text-align: center; }

.group-nudge {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.4rem;
  border: 1px solid var(--rt-gold-45);
  background: var(--rt-gold-08);
  padding: 1.1rem 1.4rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.group-nudge strong { color: var(--ink); }

.member-terms {
  margin-top: 1.1rem;
  border-left: 3px solid var(--rt-red);
  background: var(--card);
  border-top: 1px solid var(--line-warm);
  border-right: 1px solid var(--line-warm);
  border-bottom: 1px solid var(--line-warm);
  padding: 1.1rem 1.4rem;
}
.member-terms .mt-label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rt-red);
}
.member-terms p { margin-top: 0.4rem; font-size: 0.92rem; color: var(--ink-soft); }
.member-terms p strong { color: var(--ink); }

/* ============================================================
   PARTNERS - sponsor products + dark marquee band
   ============================================================ */
.products {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line-warm);
  border: 1px solid var(--line-warm);
  margin-top: 2.4rem;
}
.product {
  background: var(--card);
  padding: 1.5rem 1.2rem 1.4rem;
  transition: background var(--ui-ease);
  position: relative;
}
.product:hover { background: var(--seashell-alt); }
.product::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--tier-accent, var(--rt-gold-60));
}
.product h3 { font-size: 0.98rem; letter-spacing: 0.01em; }
.product .product-kicker {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 0.5rem;
}
.product p { font-size: 0.8rem; color: var(--ink-muted); margin-top: 0.45rem; }
.partner-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-top: 2rem;
}
.partner-cta-note { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-muted); letter-spacing: 0.06em; }

/* Previous-editions marquee: Obsidian band */
.marquee-band {
  margin-top: 3.6rem;
  background: var(--background);
  border-top: 1px solid var(--rt-gold-25);
  border-bottom: 1px solid var(--rt-gold-25);
  padding: 2.2rem 0 2.4rem;
}
.marquee-label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Dark band rule (SAR 2026-06-12): pure white, never muted */
  color: var(--on-dark-primary);
  text-align: center;
}
.marquee {
  margin-top: 1.6rem;
  overflow: hidden;
  position: relative;
  padding: 0.4rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-row {
  display: flex;
  align-items: center;
  gap: 4.5rem;
  width: max-content;
  animation: marqueeScroll 42s linear infinite;
}
.marquee:hover .marquee-row { animation-play-state: paused; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-row img {
  height: 30px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  /* Dark band rule (SAR 2026-06-12): logos full white at rest, zero dimming.
     brightness(0) invert(1) forces any residual tint to pure #fff. */
  opacity: 1;
  filter: brightness(0) invert(1);
}

/* ============================================================
   REGISTRATION - request an invitation
   ============================================================ */
.register { border-top: 1px solid var(--line-warm); }
.register-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 3.5rem;
  align-items: start;
}
.register-intro > p { margin-top: 0.4rem; max-width: 44ch; }
.register-meta {
  margin-top: 1.6rem;
  display: grid;
  gap: 0.55rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
}
.register-meta strong { color: var(--gold-ink); font-weight: 500; }
.register-steps {
  margin-top: 1.8rem;
  border-top: 1px solid var(--line-warm);
  padding-top: 1.4rem;
  display: grid;
  gap: 0.85rem;
}
.register-steps .rstep {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 0.8rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.register-steps .rstep-no {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold-ink);
  border: 1px solid var(--rt-gold-45);
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
}

.reg-form {
  border: 1px solid var(--line-warm);
  background: var(--card);
  padding: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  box-shadow: 0 18px 50px rgba(26, 18, 16, 0.06);
}
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.field label .opt { color: var(--ink-faint); text-transform: none; letter-spacing: 0.04em; }
.field input, .field select {
  background: #ffffff;
  border: 1px solid var(--line-warm);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  padding: 0.75rem 0.9rem;
  transition: border-color var(--ui-ease);
  width: 100%;
  appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--gold-ink) 50%), linear-gradient(135deg, var(--gold-ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--rt-gold);
}
.field input::placeholder { color: var(--ink-faint); }
.field .field-hint { font-size: 0.72rem; color: var(--ink-muted); }
.field-error { font-size: 0.74rem; color: var(--rt-red); display: none; }
.field.invalid input, .field.invalid select { border-color: var(--rt-red); }
.field.invalid .field-error { display: block; }

/* LinkedIn-first row (button rendered by register.js when enabled) */
.li-row { grid-column: 1 / -1; display: none; }
.li-row.enabled { display: block; }
.btn-linkedin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  background: #0a66c2;
  border: 1px solid #0a66c2;
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.85rem 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: filter var(--ui-ease);
}
.btn-linkedin:hover { filter: brightness(1.08); }
.li-divider {
  grid-column: 1 / -1;
  display: none;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.li-divider.enabled { display: flex; }
.li-divider::before, .li-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-warm);
}

/* Consent block */
.consents {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.7rem;
  border-top: 1px solid var(--line-warm);
  padding-top: 1.2rem;
}
.consent {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 0.7rem;
  align-items: start;
  font-size: 0.8rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.consent input[type="checkbox"] {
  appearance: none;
  width: 16px; height: 16px;
  margin-top: 0.15rem;
  border: 1px solid var(--ink-muted);
  background: #ffffff;
  cursor: pointer;
  position: relative;
  transition: background var(--ui-ease), border-color var(--ui-ease);
}
.consent input[type="checkbox"]:checked {
  background: var(--rt-red);
  border-color: var(--rt-red);
}
.consent input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4.5px; top: 1.5px;
  width: 4px; height: 8px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.consent a { color: var(--gold-ink); }
.consent .req { color: var(--rt-red); }

.reg-submit-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.reg-note {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
.reg-status {
  grid-column: 1 / -1;
  display: none;
  border: 1px solid var(--rt-gold-60);
  background: var(--rt-gold-08);
  padding: 1rem 1.2rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.reg-status a { color: var(--gold-ink); }
.reg-status.visible { display: block; }
.reg-status.error { border-color: var(--rt-red); background: var(--rt-red-12); }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list { margin-top: 2.2rem; border-top: 1px solid var(--line-warm); }
.faq-list details { border-bottom: 1px solid var(--line-warm); }
.faq-list summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0.2rem;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  transition: color var(--ui-ease);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--rt-red); }
.faq-list summary .faq-x {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--gold-ink);
  transition: transform var(--ui-ease);
}
.faq-list details[open] summary .faq-x { transform: rotate(45deg); }
.faq-list .faq-a {
  padding: 0 0.2rem 1.4rem;
  max-width: 68ch;
  color: var(--ink-soft);
  font-size: 0.94rem;
}
.faq-list .faq-a a { color: var(--gold-ink); }

/* ============================================================
   EVENT FOOTER STRIP - policies, above the canonical footer
   ============================================================ */
.event-strip {
  border-top: 1px solid var(--line-warm);
  background: var(--seashell-alt);
  padding: 1.1rem 0;
}
.event-strip-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}
.event-strip-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.event-strip a { color: var(--ink-soft); text-decoration: none; transition: color var(--ui-ease); }
.event-strip a:hover { color: var(--rt-red); }

/* ============================================================
   CANONICAL RT FOOTER (verbatim port - rt-www-home SiteFooter)
   Stays Obsidian. Never restyled by edition changes.
   ============================================================ */
.cf-footer {
  border-top: 1px solid var(--rt-line);
  padding: 3.5rem 0 2.5rem;
  background: var(--background);
  width: 100vw;
  max-width: none;
  margin: 0;
  text-align: left;
}
.cf-footer .cf-container {
  width: min(1160px, calc(100vw - 2rem));
  margin: 0 auto;
  padding: 0 1rem;
}
.cf-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
.cf-footer-brand img { display: block; height: 32px; width: auto; }
/* Alex 2026-06-12: footer body text ALL WHITE on dark (gold accents stay gold).
   The home SiteFooter still uses --on-dark-muted; lift is London-side only. */
.cf-footer-brand p {
  color: var(--on-dark-primary);
  font-size: 0.88rem;
  line-height: 1.55;
  margin-top: 0.8rem;
  max-width: 420px;
}
.cf-footer h4 {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rt-gold);
  margin: 0 0 0.9rem;
  font-family: var(--font-mono);
}
.cf-footer div:not(.cf-footer-brand):not(.cf-footer-grid) {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.cf-footer a {
  color: var(--on-dark-primary);
  font-size: 0.86rem;
  text-decoration: none;
  transition: color 0.15s ease;
}
.cf-footer a:hover { color: var(--rt-gold-bright); }
.cf-footer span { color: var(--on-dark-primary); font-size: 0.82rem; }
.cf-footer-cta { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; max-width: 420px; }
.cf-footer-cta-label { color: var(--rt-gold); font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; }
.cf-footer-cta-link { display: flex; align-items: stretch; border: 1px solid var(--rt-line); transition: border-color 180ms ease; }
.cf-footer-cta-link:hover { border-color: var(--rt-gold-45); }
.cf-footer-cta-fauxinput { flex: 1; padding: 0.7rem 0.9rem; color: var(--on-dark-primary); font-size: 0.85rem; }
.cf-footer-cta-btn { padding: 0.7rem 0.9rem; background: var(--rt-gold-12); color: var(--rt-gold-bright); font-size: 0.82rem; white-space: nowrap; }
.cf-footer-cta-help { color: var(--on-dark-primary); font-size: 0.78rem; line-height: 1.5; }
.cf-footer a.cf-footer-cta-partner { color: var(--rt-gold); }
.cf-footer a.cf-footer-cta-partner:hover { color: var(--rt-gold-bright); }
.cf-footer a.cf-footer-event-featured { color: var(--rt-gold); font-weight: 600; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; }
.cf-footer a.cf-footer-event-featured:hover { color: var(--rt-gold-bright); }
.cf-footer a.cf-footer-event-featured:hover .cf-footer-event-badge { border-color: var(--rt-gold-60); background: var(--rt-gold-12); }
.cf-footer-event-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50% !important; background: var(--rt-gold-bright); box-shadow: 0 0 0 0 var(--rt-gold-60); animation: cf-footer-pulse 2s ease-out infinite; }
.cf-footer-event-badge { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rt-gold); border: 1px solid var(--rt-gold-45); background: var(--rt-gold-08); padding: 0.12rem 0.45rem; white-space: nowrap; transition: border-color 180ms ease, background 180ms ease; }
@keyframes cf-footer-pulse {
  0% { box-shadow: 0 0 0 0 var(--rt-gold-60); }
  70% { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ============================================================
   BREAKPOINTS
   ============================================================ */
@media (max-width: 980px) {
  .concept-grid, .register-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .acts { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.4rem; }
  .acts::before { display: none; }
  .panels-grid { grid-template-columns: 1fr; }
  .panels-grid.single-cat { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .ticket-cards { grid-template-columns: 1fr; max-width: 560px; }
  .practical-grid { grid-template-columns: 1fr; }
  .products { grid-template-columns: repeat(2, 1fr); }
  .product:last-child { grid-column: 1 / -1; }
  .cf-footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  section { padding: 4.2rem 0; }
  /* Mobile hero: anchor copy over the darker lower city band and steady it
     with a stronger (still subtle) shadow - the bright sky band stays clear */
  .hero-banner { align-items: flex-end; min-height: clamp(560px, 86vh, 740px); }
  .hero-on-banner {
    padding: 2.2rem 0 2.8rem;
    text-shadow: 0 2px 18px rgba(15, 15, 15, 0.75), 0 1px 3px rgba(15, 15, 15, 0.6);
  }
  .hero-meta { margin: 1.1rem 0 1.3rem; }
  .nav-links {
    position: fixed;
    top: 64px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--seashell-92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line-warm);
    padding: 0.6rem 1.4rem 1.4rem;
    display: none;
    z-index: 101;
  }
  .nav-links.open { display: flex; }
  .nav-links a:not(.btn-red) { padding: 0.85rem 0; border-bottom: 1px solid var(--line-warm-soft); font-size: 0.95rem; }
  .nav-links .btn-red { margin-top: 1rem; text-align: center; }
  .nav-burger { display: flex; }

  .hero-mast { padding: 2.2rem 0 1.8rem; }
  .hero-meta { gap: 0.4rem 0.9rem; font-size: 0.74rem; }
  .hero-banner { height: clamp(240px, 38vh, 420px); }

  .trust-grid { grid-template-columns: 1fr; }
  .acts { grid-template-columns: 1fr; }
  .panel-people { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
  .venue-frame { min-height: 0; }
  .venue-content { padding: 4rem 0 3.5rem; }
  /* No mobile scrim override: --photo-scrim is set BY mobile (the harder of
     the two viewports here, since the copy crosses more bright sky without
     the desktop two-column split) and clears AA on both. One flat rule. */
  .venue-stats { gap: 1.6rem; flex-wrap: wrap; }
  .products { grid-template-columns: 1fr; }
  .product:last-child { grid-column: auto; }
  .reg-form { grid-template-columns: 1fr; padding: 1.4rem; }
  .practical-list li { grid-template-columns: 1fr; gap: 0.2rem; }
  .event-strip-inner { justify-content: center; text-align: center; }

  .cf-footer-grid { grid-template-columns: 1fr; text-align: center; }
  .cf-footer-brand { display: flex; flex-direction: column; align-items: center; }
  .cf-footer-brand img { margin: 0 auto; }
  .cf-footer-brand p { margin-left: auto; margin-right: auto; max-width: none; }
  .cf-footer-cta { margin-left: auto; margin-right: auto; }
  .cf-footer div:not(.cf-footer-brand):not(.cf-footer-grid) { align-items: center; }
}

@media (max-width: 640px) {
  .rt-shell { width: calc(100vw - 1.5rem); }
  .cf-footer a.cf-footer-event-featured { justify-content: center; width: 100%; text-align: center; }
}

/* ============================================================
   REDUCED MOTION - freeze cinematics, keep everything legible
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .banner-sweep { animation: none; }
  .stage { animation: none; opacity: 1; transform: none; }
  .ticker-row { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .eyebrow-rule { width: 72px; transition: none; }
  .marquee-row { animation: none; flex-wrap: wrap; width: auto; justify-content: center; gap: 2rem 3rem; }
  .cf-footer-event-dot { animation: none; }
  .edition-card:hover, .panel-block:hover, .ticket-card:hover, .btn-red:hover, .btn-ghost:hover { transform: none; }
}