/* page.css: "Alexander Morari as panel moderator" (RealTimes people page, v7)
   v7 (2026-09-17) = v6 with the P4d sessions panel, no Watch section and
   the 21 owner-picked stage photographs in the gallery.
   v6 (2026-09-17) = v4 plus three changes only: the blue-stage hero photo
   (aligned eyebrow to CTA row, no frame), the circuit line solid through
   Warsaw with a wipe reveal and a corrected baseline, and the Continents stat.
   Loaded after styles.css, rtns.css, rtns-event.css (kept for the RealTimes
   footer chrome and the .yt-lite facade). v4 (2026-09-17) is a dark-first
   stage look: plum ground, cream type, Anton display (self-hosted, OFL),
   brand red for the primary action and headline key words, gold for
   hairlines, the promise line, the Circuit and active filters.
   Sections: nav with section highlighting and scroll progress, full-viewport
   hero with drifting stage photographs, logo marquee, proof strip,
   method tabs, two stories, The Circuit (city line that filters the
   timeline), P4d timeline list with filmstrip stage and theme chips, masonry gallery with
   lightbox, biography, booking close, mobile booking bar.
   Carried over from v3: accordion logic, video facades, dialog lightbox,
   reveal failsafe and the ?static=1 capture mode. */

@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/anton-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/anton-latin.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; }

:root {
  --plum: #120e17;
  --raise: #1b1620;
  --raise2: #241d2b;
  --cream: #f4eee2;
  --cream-2: #c3bcb1;          /* secondary copy on plum, 9:1 */
  --edge: rgba(244, 238, 226, 0.12);
  --edge-2: rgba(244, 238, 226, 0.28);
  --red: #e4141b;
  --red-hi: #ff2a2a;
  --au: #d8ad63;
  --au-ink: #8c6a32;           /* gold text on cream */
  --ink: #120e17;
  --ink-2: #4c4552;            /* secondary copy on cream, 8:1 */
  --anton: "Anton", "Arial Narrow", "Helvetica Neue", Impact, sans-serif;
  --body: Arial, Helvetica, sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --gutter: 40px;
  --nav-h: 76px;
}
@media (max-width: 700px) { :root { --gutter: 18px; --nav-h: 64px; } }
html { scrollbar-gutter: stable; }
body.am { font: 17px/1.65 var(--body); background: var(--plum); color: var(--cream); }
.am main { overflow-x: clip; }
.am .shell { max-width: 1400px; padding-inline: var(--gutter); }
.am [id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
.am ::selection { background: var(--red); color: #fff; }

/* ---------- shared bits ---------- */
.eb { margin: 0 0 16px; display: flex; align-items: center; gap: 12px; font: 700 12px/1.4 var(--body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--au); }
.eb::before, .eb::after { content: ""; flex: 0 0 22px; height: 1px; background: currentColor; }
.eb.no-rule::before, .eb.no-rule::after { display: none; }
.on-cream .eb { color: var(--au-ink); }
.sec { padding: 104px 0 100px; position: relative; }
.sec.on-cream { background: var(--cream); color: var(--ink); }
.sec-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 18px 64px; align-items: end; margin: 0 0 52px; }
.h2 { margin: 0; font: 400 clamp(48px, 7vw, 116px)/0.92 var(--anton); letter-spacing: 0.005em; text-transform: uppercase; color: var(--cream); }
.h2 em { font-style: normal; color: var(--red); }
.on-cream .h2 { color: var(--ink); }
.sec-sub { margin: 0 0 8px; font-size: 18px; line-height: 1.6; color: var(--cream-2); max-width: 52ch; }
.on-cream .sec-sub { color: var(--ink-2); }
@media (max-width: 899px) {
  .sec { padding: 68px 0 64px; }
  .sec-head { grid-template-columns: 1fr; margin-bottom: 32px; }
  .sec-sub { font-size: 17px; }
}

.btn-a {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 30px; border: 1px solid transparent; border-radius: 4px;
  font: 700 14px/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease);
}
.btn-a.red { background: var(--red); color: #fff; }
.btn-a.red:hover { background: var(--red-hi); transform: translateY(-2px); }
.btn-a.line { border-color: var(--edge-2); color: var(--cream); font-size: 13px; }
.btn-a.line:hover { border-color: var(--cream); transform: translateY(-2px); }
.btn-a.pill { border-radius: 999px; min-height: 46px; padding: 0 24px; font-size: 13px; }
.btn-a.big { min-height: 66px; padding: 0 40px; font-size: 16px; }
.btn-a.is-soon { border: 1px dashed var(--edge-2); color: var(--cream); cursor: default; font-size: 13px; }
.btn-a:focus-visible { outline: 2px solid var(--au); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.card { background: var(--raise); border: 1px solid var(--edge); border-radius: 4px; position: relative; transition: transform 260ms var(--ease), border-color 260ms var(--ease); }
.card::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; border-radius: 4px 4px 0 0; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; transition: transform 320ms var(--ease); z-index: 2; }
@media (hover: hover) {
  .card:hover { transform: translateY(-6px); border-color: var(--edge-2); }
  .card:hover::before { transform: scaleX(1); }
}
.card:focus-within::before { transform: scaleX(1); }

/* reveal helper (opt in with data-reveal, optional --i for stagger) */
html.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
html.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .card, .card::before, .btn-a { transition: none; }
}
/* QA capture mode (?static=1): nothing moves, everything is at its end state */
html.static *, html.static *::before, html.static *::after { transition: none !important; animation: none !important; }
html.static [data-reveal] { opacity: 1 !important; transform: none !important; }
html.static { scroll-behavior: auto; }

/* =====================================================================
   NAV: transparent over the hero, solid plum after it. Section links
   highlight as you scroll; the red line is scroll progress.
   ===================================================================== */
.nv { position: fixed; left: 0; right: 0; top: 0; z-index: 100; height: var(--nav-h); color: var(--cream); }
.nv::before { content: ""; position: absolute; inset: 0; background: var(--plum); border-bottom: 1px solid var(--edge); opacity: 0; transition: opacity 260ms var(--ease); }
.nv.is-solid::before { opacity: 1; }
.nv-in { position: relative; height: 100%; display: flex; align-items: center; gap: 28px; }
.nv-brand { display: flex; align-items: center; gap: 16px; min-height: 44px; flex: 0 0 auto; }
.nv-brand b { font: 400 25px/1 var(--anton); letter-spacing: 0.02em; text-transform: uppercase; color: var(--cream); white-space: nowrap; }
.nv-brand .nv-rt { display: flex; align-items: center; gap: 14px; }
.nv-brand .nv-rt::after { content: ""; width: 1px; height: 22px; background: var(--edge-2); }
.nv-brand img { width: auto; height: 22px; object-fit: contain; }
.nv-links { flex: 1 1 auto; display: flex; justify-content: flex-end; gap: 4px; }
.nv-links a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 11px; font: 700 12px/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream); }
.nv-links a::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 8px; height: 2px; background: var(--au); transform: scaleX(0); transform-origin: 0 50%; transition: transform 240ms var(--ease); }
.nv-links a:hover::after, .nv-links a.is-active::after { transform: scaleX(1); }
.nv-links a.is-active { color: var(--au); }
.nv a:focus-visible, .nv button:focus-visible { outline: 2px solid var(--au); outline-offset: 2px; }
.nv-prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; }
.nv-prog i { display: block; height: 100%; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; }
.nv-toggle { display: none; appearance: none; border: 1px solid var(--edge-2); border-radius: 4px; background: transparent; color: var(--cream); width: 46px; height: 46px; padding: 0; cursor: pointer; place-items: center; }
.nv-toggle svg { width: 22px; height: 22px; display: block; }
.nv-toggle .x { display: none; }
.nv-toggle[aria-expanded="true"] .x { display: block; }
.nv-toggle[aria-expanded="true"] .m { display: none; }
.nv-panel { display: none; }
@media (max-width: 1179px) {
  .nv-links { display: none; }
  .nv-in { justify-content: space-between; gap: 12px; }
  .nv-in .btn-a.pill { margin-left: auto; }
  .nv-toggle { display: grid; }
  .nv-panel { display: block; position: fixed; left: 0; right: 0; top: var(--nav-h); z-index: 99; background: var(--plum); border-bottom: 1px solid var(--edge); padding: 10px var(--gutter) 22px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 0s linear 220ms; }
  .nv-panel.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nv-panel a { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--edge); font: 400 26px/1 var(--anton); letter-spacing: 0.02em; text-transform: uppercase; color: var(--cream); }
  .nv-panel a:last-child { border-bottom: 0; }
}
@media (max-width: 599px) {
  .nv-brand b { font-size: 21px; }
  .nv-brand .nv-rt { display: none; }
  .nv-in .btn-a.pill { min-height: 44px; padding: 0 16px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .nv::before, .nv-links a::after, .nv-panel { transition: none; } }

/* =====================================================================
   1. HERO: full viewport. Stage photographs drift and cross-fade behind
      a red wash from the right and a plum vignette; they stay readable.
   ===================================================================== */
.hx { position: relative; z-index: 2; min-height: min(100vh, 980px); min-height: min(100svh, 980px); display: flex; align-items: stretch; background: var(--plum); color: var(--cream); }
.hx-bg { position: absolute; inset: 0; overflow: hidden; }
.hx-bg img { position: absolute; inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); object-fit: cover; filter: blur(5px) brightness(0.62) saturate(0.9); opacity: 0; transition: opacity 1800ms linear; }
.hx-bg img.is-on { opacity: 1; }
.hx-bg img:nth-child(1) { object-position: 62% 40%; }
.hx-bg img:nth-child(2) { object-position: 50% 70%; }
.hx-bg img:nth-child(3) { object-position: 50% 50%; }
html.js .hx-bg img { animation: hx-drift 24s ease-in-out infinite alternate; }
@keyframes hx-drift { from { transform: scale(1); } to { transform: scale(1.08); } }
.hx-wash { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(270deg, rgba(228, 20, 27, 0.46) 0%, rgba(228, 20, 27, 0.16) 34%, rgba(228, 20, 27, 0) 62%),
    linear-gradient(90deg, rgba(18, 14, 23, 0.86) 0%, rgba(18, 14, 23, 0.58) 42%, rgba(18, 14, 23, 0.1) 78%),
    radial-gradient(120% 90% at 50% 45%, rgba(18, 14, 23, 0) 52%, rgba(18, 14, 23, 0.82) 100%),
    linear-gradient(to top, rgba(18, 14, 23, 1) 0%, rgba(18, 14, 23, 0) 22%); }
/* scan lines, as on a stage LED wall */
.hx-wash::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(18, 14, 23, 0.16) 0 1px, rgba(18, 14, 23, 0) 1px 4px); }
.hx-grid { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0 56px; align-content: center; align-items: stretch; padding-top: calc(var(--nav-h) + 64px); padding-bottom: 96px; }
.hx-copy { align-self: center; padding: 0; }
/* the widest line, "who keeps a panel", is 17 Anton caps at about 0.44em each; the copy column is 100vw minus gutters, gap and portrait */
.hx-title { margin: 0; font: 400 clamp(56px, min(8.6vw, calc((100vw - 476px) / 7.6)), 120px)/0.92 var(--anton); letter-spacing: 0.004em; text-transform: uppercase; color: var(--cream); }
.hx-title span { display: block; white-space: nowrap; }
.hx-title em { font-style: normal; color: var(--red); }
html.js .hx-title span { opacity: 0; transform: translateY(0.35em); transition: opacity 800ms var(--ease), transform 800ms var(--ease); transition-delay: calc(var(--i) * 140ms + 100ms); }
html.js .hx.is-lit .hx-title span { opacity: 1; transform: none; }
.hx-sub { margin: 26px 0 0; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; color: var(--cream-2); max-width: 46ch; }
.hx-sub b { color: var(--cream); font-weight: 700; }
.hx-promise { margin: 16px 0 0; font: 700 17px/1.45 var(--body); color: var(--au); max-width: 40ch; }
.hx-cta { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }

/* v6: the hero image fills the copy column's height exactly (eyebrow to CTA row), no frame */
.hx-photo { position: relative; z-index: 3; margin: 0; overflow: hidden; border-radius: 4px; background: #0d3a78; box-shadow: 0 24px 60px rgba(8, 6, 12, 0.45); }
/* variant 1: name plate on the photo, bottom-anchored, soft gradient into a solid band */
.hx-plate { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; padding: 58px 22px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; background: linear-gradient(to top, rgba(9, 7, 13, 0.95) 0%, rgba(9, 7, 13, 0.95) 46%, rgba(9, 7, 13, 0.72) 66%, rgba(9, 7, 13, 0) 100%); }
.hx-plate-name { font: 400 clamp(19px, 2vw, 26px)/1.08 var(--anton); letter-spacing: 0.006em; text-transform: uppercase; color: var(--cream); }
.hx-plate-rule { width: 34px; height: 2px; background: var(--au); }
.hx-plate-role { font: 700 11px/1.4 var(--body); letter-spacing: 0.13em; text-transform: uppercase; color: var(--cream-2); }
.hx-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; display: block; }
.hx-credit { position: absolute; left: var(--gutter); bottom: 22px; margin: 0; font: 700 10px/1.4 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream); display: flex; align-items: center; gap: 12px; }
.hx-credit::before { content: ""; width: 30px; height: 1px; background: var(--au); }
@media (max-width: 1099px) {
  .hx-grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 0 36px; }
  .hx-title { font-size: clamp(50px, calc((100vw - 396px) / 7.6), 148px); }
}
@media (max-width: 899px) {
  .hx { min-height: 0; }
  .hx-grid { display: flex; flex-direction: column; align-items: stretch; padding-top: calc(var(--nav-h) + 28px); padding-bottom: 72px; }
  .hx-copy { display: contents; }
  .hx-copy > .eb { order: 1; }
  .hx-title { order: 2; font-size: clamp(38px, 11.4vw, 108px); }
  .hx-photo { order: 3; margin: 26px 0 0; width: 100%; aspect-ratio: 4 / 5; max-height: 70vh; }
  .hx-plate { padding: 40px 16px 16px; gap: 5px; }
  .hx-plate-name { font-size: clamp(17px, 4.6vw, 22px); }
  .hx-plate-role { font-size: 10px; letter-spacing: 0.11em; }
  .hx-sub { order: 4; }
  .hx-promise { order: 5; }
  .hx-cta { order: 6; }
  .hx-cta .btn-a { flex: 1 1 100%; }
  .hx-credit { bottom: 18px; }
  .hx-wash { background:
    linear-gradient(270deg, rgba(228, 20, 27, 0.36) 0%, rgba(228, 20, 27, 0) 70%),
    linear-gradient(to top, rgba(18, 14, 23, 1) 0%, rgba(18, 14, 23, 0.72) 46%, rgba(18, 14, 23, 0.4) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  html.js .hx-bg img { animation: none; transition: none; }
  html.js .hx-title span { opacity: 1; transform: none; transition: none; }
}
html.static .hx-title span { opacity: 1 !important; transform: none !important; }

/* =====================================================================
   2. STAGES HE HAS CHAIRED: logo marquee flush under the hero edge.
      White marks on the raised band, uniform height, no filters.
   ===================================================================== */
.lg { position: relative; z-index: 1; background: var(--raise); border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); padding: 34px 0 30px; }
.lg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; margin: 0 0 22px; padding-right: 420px; }
.lg-head h2 { margin: 0; font: 400 clamp(22px, 2.2vw, 30px)/1 var(--anton); letter-spacing: 0.03em; text-transform: uppercase; color: var(--cream); }
.lg-head p { margin: 0; font-size: 14px; color: var(--cream-2); }
.lg-view { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.lg-track { display: flex; width: max-content; animation: lg-run 56s linear infinite; }
.lg-view:hover .lg-track, .lg-view:focus-within .lg-track { animation-play-state: paused; }
.lg-set { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex: 0 0 auto; }
.lg-cell { flex: 0 0 auto; height: 88px; padding: 0 46px; display: flex; align-items: center; justify-content: center; }
.lg-cell img { width: auto; height: 36px; max-width: 240px; object-fit: contain; }
.lg-cell a { display: flex; align-items: center; min-height: 44px; border-radius: 4px; }
.lg-cell a:focus-visible { outline: 2px solid var(--au); outline-offset: 8px; }
.lg-name { font: 400 25px/1 var(--anton); letter-spacing: 0.02em; text-transform: uppercase; color: var(--cream); white-space: nowrap; }
.lg-name i { font-style: normal; color: var(--au); margin-left: 10px; }
@keyframes lg-run { to { transform: translateX(-50%); } }
@media (max-width: 1099px) { .lg-head { padding-right: 340px; } }
@media (max-width: 899px) {
  .lg { padding: 26px 0 24px; }
  .lg-head { padding-right: 0; margin-bottom: 14px; }
  .lg-cell { height: 72px; padding: 0 26px; }
  .lg-cell img { height: 30px; max-width: 180px; }
  .lg-name { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .lg-view { -webkit-mask-image: none; mask-image: none; }
  .lg-track { animation: none; width: auto; display: block; }
  .lg-set { flex-wrap: wrap; justify-content: center; }
  .lg-set[aria-hidden="true"] { display: none; }
}

/* =====================================================================
   2b. STATEMENT: one sentence that lights up word by word on scroll
   ===================================================================== */
.sl { background: var(--plum); padding: 120px 0 110px; border-top: 1px solid var(--edge); }
.sl p { margin: 0; font: 400 clamp(32px, 4.6vw, 74px)/1.06 var(--anton); text-transform: uppercase; color: var(--cream); max-width: 22ch; }
.sl .w { display: inline-block; opacity: 0.25; transition: opacity 120ms linear; }
.sl .w.is-lit { opacity: 1; }
.sl .w.is-red { color: var(--red); }
html:not(.js) .sl .w, html.static .sl .w { opacity: 1; }
@media (max-width: 899px) { .sl { padding: 72px 0 68px; } }
@media (prefers-reduced-motion: reduce) { .sl .w { opacity: 1; transition: none; } }

/* =====================================================================
   2c. SOCIAL RAIL: right edge, desktop only
   ===================================================================== */
.rl { display: none; }
@media (min-width: 1100px) {
  .rl { display: grid; gap: 10px; position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 90; }
  .rl a { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--edge-2); background: rgba(18, 14, 23, 0.85); color: var(--cream); font: 700 10px/1 var(--body); letter-spacing: 0.06em; text-transform: uppercase; transition: background 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease); }
  .rl a:hover { background: var(--red); border-color: var(--red); color: #fff; transform: scale(1.08); }
  .rl a:focus-visible { outline: 2px solid var(--au); outline-offset: 3px; }
  .rl a span { position: absolute; right: calc(100% + 10px); top: 50%; transform: translate(6px, -50%); padding: 8px 10px; border-radius: 4px; background: var(--raise); border: 1px solid var(--edge-2); font: 700 10px/1 var(--body); letter-spacing: 0.12em; white-space: nowrap; color: var(--cream); opacity: 0; pointer-events: none; transition: opacity 160ms var(--ease), transform 160ms var(--ease); }
  .rl a:hover span, .rl a:focus-visible span { opacity: 1; transform: translate(0, -50%); }
}
@media (prefers-reduced-motion: reduce) { .rl a, .rl a span { transition: none; } }

/* =====================================================================
   3. PROOF STRIP
   ===================================================================== */
.pf { background: var(--plum); }
.pf ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.pf li { padding: 64px 32px 60px; border-left: 1px solid var(--edge); display: grid; gap: 14px; align-content: start; }
.pf li:first-child { border-left: 0; padding-left: 0; }
.pf b { display: block; font: 400 clamp(84px, 10vw, 168px)/0.84 var(--anton); color: var(--cream); font-variant-numeric: tabular-nums; }
.pf li:nth-child(4) b { color: var(--red); }
.pf em { display: block; font: 700 12px/1.4 var(--body); letter-spacing: 0.18em; text-transform: uppercase; font-style: normal; color: var(--au); }
.pf span { font-size: 15px; line-height: 1.5; color: var(--cream-2); max-width: 28ch; }
@media (max-width: 899px) {
  .pf ol { grid-template-columns: 1fr 1fr; }
  .pf li { padding: 32px 16px 30px; border-top: 1px solid var(--edge); }
  .pf li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .pf li:nth-child(-n+2) { border-top: 0; }
}

/* =====================================================================
   5. HOW HE WORKS (cream band): format tabs, then before / after
   ===================================================================== */
.mt-tabs { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 56px; align-items: stretch; }
.mt-list { display: flex; flex-direction: column; border-top: 2px solid var(--ink); }
.mt-tab { appearance: none; border: 0; border-bottom: 1px solid rgba(18, 14, 23, 0.22); background: none; cursor: pointer; text-align: left; padding: 18px 56px 16px 0; min-height: 76px; position: relative; font: 400 clamp(30px, 3.4vw, 52px)/0.95 var(--anton); text-transform: uppercase; color: rgba(18, 14, 23, 0.42); transition: color 200ms var(--ease), padding 260ms var(--ease); }
.mt-tab::after { content: ""; position: absolute; right: 4px; top: 50%; width: 30px; height: 3px; margin-top: -2px; background: var(--red); transform: scaleX(0); transform-origin: 100% 50%; transition: transform 260ms var(--ease); }
.mt-tab:hover { color: var(--ink); }
.mt-tab[aria-selected="true"] { color: var(--ink); }
.mt-tab[aria-selected="true"]::after { transform: scaleX(1); }
.mt-tab:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.mt-panels { position: relative; background: var(--plum); color: var(--cream); border-radius: 4px; min-height: 340px; border-top: 3px solid var(--red); }
.mt-panel { padding: 48px 52px 46px; display: grid; gap: 20px; align-content: center; min-height: 340px; }
html.js .mt-panel[hidden] { display: none; }
html.js .mt-panel:not([hidden]) { animation: mt-in 420ms var(--ease) both; }
@keyframes mt-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.mt-panel h3 { margin: 0; font: 700 12px/1.4 var(--body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--au); }
.mt-panel .lead { margin: 0; font: 700 clamp(22px, 2.2vw, 30px)/1.3 var(--body); color: var(--cream); max-width: 32ch; }
.mt-panel .rec { margin: 0; padding-top: 20px; border-top: 1px solid var(--edge-2); font-size: 15px; line-height: 1.55; color: var(--cream); max-width: 60ch; }
.mt-panel .rec b { display: block; margin-bottom: 4px; font: 700 10px/1.4 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--au); }
html:not(.js) .mt-panel { min-height: 0; border-bottom: 1px solid var(--edge-2); }
.mt-cols { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--ink); }
.mt-col { padding: 30px 48px 0 0; }
.mt-col + .mt-col { padding: 30px 0 0 48px; border-left: 1px solid rgba(18, 14, 23, 0.22); }
.mt-col h3 { margin: 0 0 12px; font: 400 clamp(28px, 2.6vw, 38px)/1 var(--anton); text-transform: uppercase; color: var(--ink); }
.mt-col p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--ink); max-width: 50ch; }
@media (max-width: 899px) {
  .mt-tabs { grid-template-columns: 1fr; }
  .mt-list { flex-direction: row; overflow-x: auto; border-top: 0; border-bottom: 2px solid var(--ink); scrollbar-width: none; margin: 0 calc(var(--gutter) * -1) 18px; padding: 0 var(--gutter); }
  .mt-list::-webkit-scrollbar { display: none; }
  .mt-tab { flex: 0 0 auto; border-bottom: 0; padding: 12px 0 14px; margin-right: 24px; min-height: 52px; font-size: 28px; white-space: nowrap; }
  .mt-tab::after { left: 0; right: 0; top: auto; bottom: 0; width: auto; margin: 0; height: 4px; transform-origin: 0 50%; }
  .mt-panel { padding: 30px 24px 32px; min-height: 0; }
  .mt-panels { min-height: 0; }
  .mt-cols { grid-template-columns: 1fr; margin-top: 40px; }
  .mt-col, .mt-col + .mt-col { padding: 26px 0 0; border-left: 0; }
  .mt-col + .mt-col { margin-top: 26px; border-top: 1px solid rgba(18, 14, 23, 0.22); }
}
@media (prefers-reduced-motion: reduce) { html.js .mt-panel:not([hidden]) { animation: none; } .mt-tab, .mt-tab::after { transition: none; } }

/* =====================================================================
   6. WHEN THE MODERATOR DROPPED: two cards
   ===================================================================== */
.st { background: var(--plum); }
.st-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.st-card { padding: 44px 44px 40px; display: grid; gap: 18px; align-content: start; }
.st-card .st-city { margin: 0; font: 400 clamp(72px, 9vw, 148px)/0.84 var(--anton); text-transform: uppercase; color: var(--red); }
.st-card h3 { margin: 0; font: 400 clamp(26px, 2.4vw, 34px)/1.04 var(--anton); text-transform: uppercase; color: var(--cream); }
.st-card .st-body { margin: 0; font-size: 17px; line-height: 1.6; color: var(--cream); }
.st-card .eb { margin: 0; }
.st-facts { list-style: none; margin: 6px 0 0; padding: 18px 0 0; border-top: 1px solid var(--edge-2); display: flex; flex-wrap: wrap; gap: 8px; }
.st-facts li { padding: 8px 12px; border: 1px solid var(--au); border-radius: 4px; font: 700 11px/1.3 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream); }
@media (max-width: 899px) { .st-grid { grid-template-columns: 1fr; } .st-card { padding: 30px 24px; } }

/* =====================================================================
   7. THE CIRCUIT: one line, west to east, six stations. A station
      filters the timeline below.
   ===================================================================== */
.cx { background: var(--raise); border-top: 1px solid var(--edge); padding-bottom: 36px; }
.cx-map { position: relative; height: 350px; margin-top: 4px; }
.cx-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cx-line path { fill: none; stroke: var(--au); stroke-width: 4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.cx-line path.is-long { stroke-dasharray: 3 10; stroke-linecap: round; }
/* v6: the solid line runs London to Warsaw in one stroke, revealed by a wipe (a pathLength dash offset breaks under non-scaling-stroke) */
html.js .cx-line { clip-path: inset(0 100% 0 0); transition: clip-path 1800ms var(--ease); }
html.js .cx-map.is-in .cx-line { clip-path: inset(0 0 0 0); }
.cx-zones { position: absolute; left: 0; right: 0; bottom: 0; height: 24px; font: 700 11px/1 var(--body); letter-spacing: 0.24em; text-transform: uppercase; color: var(--cream); }
.cx-zones span { position: absolute; top: 0; padding-top: 12px; border-top: 1px solid var(--edge-2); }
/* Europe spans London through Warsaw (x 72%), the gap sits under the dashed Warsaw to Dubai leg, the Gulf sits under Dubai (x 93%) */
.cx-zones .z-eu { left: 0; width: 78%; }
.cx-zones .z-gap { left: 78%; width: 8%; border-top-style: dashed; }
.cx-zones .z-gulf { left: 86%; right: 0; text-align: right; border-top-color: var(--au); color: var(--au); }
.cx-stops { list-style: none; margin: 0; padding: 0; }
.cx-stop { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.cx-btn { appearance: none; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; color: var(--cream); font: inherit; position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); width: 170px; height: 210px; display: block; text-align: center; }
.cx-dot { position: absolute; left: 50%; top: 50%; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border-radius: 50%; background: var(--raise); border: 4px solid var(--au); display: grid; place-items: center; font: 400 calc(var(--d) * 0.46)/1 var(--anton); color: var(--cream); transition: transform 240ms var(--ease); }
.cx-dot::after { content: ""; position: absolute; inset: -11px; border-radius: 50%; border: 1px solid var(--au); opacity: 0; transform: scale(0.8); transition: opacity 240ms var(--ease), transform 240ms var(--ease); }
.cx-city { position: absolute; left: 0; right: 0; bottom: calc(50% + var(--d) / 2 + 16px); font: 400 clamp(26px, 2.5vw, 38px)/0.95 var(--anton); letter-spacing: 0.01em; text-transform: uppercase; color: var(--cream); white-space: nowrap; }
.cx-meta { position: absolute; left: 0; right: 0; top: calc(50% + var(--d) / 2 + 16px); display: grid; gap: 6px; font: 700 11px/1.3 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream); }
.cx-meta i { font-style: normal; color: var(--au); }
.cx-btn:hover .cx-dot, .cx-btn:focus-visible .cx-dot { transform: scale(1.1); }
.cx-btn:focus-visible { outline: 2px solid var(--au); outline-offset: -6px; border-radius: 4px; }
.cx-btn[aria-pressed="true"] .cx-dot { background: var(--au); color: var(--ink); }
.cx-btn[aria-pressed="true"] .cx-dot::after { opacity: 1; transform: none; }
.cx-btn[aria-pressed="true"] .cx-city { color: var(--au); }
.cx-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--edge); }
.cx-foot p { margin: 0; font-size: 15px; color: var(--cream); }
.chip { appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--edge-2); border-radius: 4px; background: transparent; color: var(--cream); cursor: pointer; font: 700 11px/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease); }
.chip i { font-style: normal; font-weight: 400; color: var(--au); letter-spacing: 0.04em; }
.chip:hover { border-color: var(--au); }
.chip[aria-pressed="true"] { background: var(--au); border-color: var(--au); color: var(--ink); }
.chip[aria-pressed="true"] i { color: var(--ink); }
.chip:focus-visible { outline: 2px solid var(--au); outline-offset: 3px; }
@media (max-width: 899px) {
  .cx-map { height: auto; margin-top: 0; }
  .cx-line, .cx-zones { display: none; }
  .cx-stops { position: relative; display: grid; }
  .cx-stops::before { content: ""; position: absolute; left: 30px; top: 38px; bottom: 38px; width: 4px; background: var(--au); }
  .cx-stop { position: relative; left: auto; top: auto; width: auto; height: auto; }
  .cx-stop:last-child::before { content: ""; position: absolute; left: 28px; top: -8px; height: 46px; width: 8px; background: repeating-linear-gradient(to bottom, var(--raise) 0 7px, transparent 7px 14px); }
  .cx-btn { position: relative; transform: none; width: 100%; height: auto; min-height: 76px; display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; align-items: center; text-align: left; padding: 10px 0; column-gap: 14px; }
  .cx-dot { position: relative; left: auto; top: auto; margin: 0; justify-self: center; grid-column: 1; grid-row: 1 / span 2; }
  .cx-city { position: static; grid-column: 2; grid-row: 1; font-size: 30px; align-self: end; }
  .cx-meta { position: static; grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; gap: 4px 14px; align-self: start; margin-top: 6px; }
  .cx-btn:focus-visible { outline-offset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .cx-line { transition: none; clip-path: none; }
  .cx-dot, .cx-dot::after, .chip { transition: none; }
}
html.static .cx-line { clip-path: none !important; }

/* =====================================================================
   8. WHERE HE HAS CHAIRED: filter bar + P4d timeline list & filmstrip stage
   (ported from panel-proposals/p4d.html, owner-approved 2026-09-17; all
   selectors namespaced .p4-*; filter state hides items and empty years)
   ===================================================================== */
.tl { background: var(--plum); color: var(--cream); }
/* recent three, above the rail */
.rc { list-style: none; margin: 0 0 44px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rc-card { display: block; padding: 24px 26px 22px; color: inherit; text-decoration: none; }
.rc-card .rc-date { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 14px; font: 700 11px/1.4 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--au); }
.rc-card .rc-date i { font-style: normal; color: var(--cream); }
.rc-card h3 { margin: 0 0 8px; font: 400 clamp(24px, 2vw, 30px)/1 var(--anton); letter-spacing: 0.01em; text-transform: uppercase; color: var(--cream); }
.rc-card p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--cream); }
.rc-card .rc-role { display: inline-block; margin-top: 14px; padding: 5px 9px; border-radius: 3px; border: 1px solid var(--au); font: 700 10px/1.3 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream); }
.rc-card:focus-visible { outline: 2px solid var(--au); outline-offset: 3px; }
@media (max-width: 899px) { .rc { grid-template-columns: 1fr; gap: 10px; margin-bottom: 30px; } .rc-card { padding: 20px 20px 18px; } }
.tf { margin: 0 0 34px; display: grid; gap: 18px; }
.tf-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tf-k { flex: 0 0 100%; margin: 0 0 4px; }
.tf-state { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding-top: 18px; border-top: 1px solid var(--edge); }
.tf-count { margin: 0; font: 400 clamp(30px, 3vw, 44px)/1 var(--anton); text-transform: uppercase; color: var(--cream); }
.tf-count b { font-weight: 400; color: var(--au); }
.tf-what { margin: 0; font: 700 12px/1.4 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream); }
.tf-tools { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tf-clear[hidden] { display: none; }
.tl-note { margin: 26px 0 0; font-size: 14px; line-height: 1.5; color: var(--cream-2); max-width: 78ch; }
.tf-empty { margin: 0 0 18px; padding: 18px 20px; border: 1px dashed var(--au); border-radius: 4px; font-size: 15px; color: var(--cream); }
.tf-empty[hidden] { display: none; }
@media (max-width: 899px) {
  .tf-row.is-themes { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
  .tf-row.is-themes::-webkit-scrollbar { display: none; }
  .tf-row.is-themes .tf-k { flex: 0 0 auto; margin: 0 8px 0 0; }
  .tf-row.is-themes .chip { flex: 0 0 auto; }
  .tf-tools { margin-left: 0; width: 100%; justify-content: space-between; }
}
.tl-cta { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--edge); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 24px; }
.tl-cta p { margin: 0; font: 400 clamp(26px, 2.8vw, 40px)/1 var(--anton); text-transform: uppercase; color: var(--cream); }
@media (max-width: 700px) { .tl-cta .btn-a { flex: 1 1 100%; } }

/* P4d list + stage */
.p4 { font: 16px/1.6 var(--body); color: var(--cream); margin-top: 44px; }
.p4-year.is-hidden, .p4-items.is-hidden, .p4-item.is-hidden { display: none; }

.p4-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 0 48px;
  align-items: start;
}

/* ---------- left: timeline list ---------- */
.p4-list-col { min-width: 0; }

/* year headings: much bigger, red accent, count line below (variant D) */
.p4-year { margin: 0; padding: 36px 0 20px; border-top: 1px solid var(--edge); display: flex; flex-direction: column; }
.p4-year:first-child, .p4-year.is-lead { border-top: none; padding-top: 0; }
.p4-year:not(.is-lead):not(:first-child) { border-top: 1px solid var(--edge); padding-top: 36px; }
.p4-year-num { font: 400 clamp(56px, 6.8vw, 80px)/0.84 var(--anton); letter-spacing: 0.008em; color: var(--red); }
.p4-year-count { margin-top: 8px; font: 700 12px/1.4 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-2); }

.p4-items { list-style: none; margin: 0 0 4px; padding: 0; }
.p4-item { border-top: 1px solid var(--edge); }
.p4-item:first-child { border-top: none; }
.p4-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 24px 12px 24px 2px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background 160ms var(--ease);
}
.p4-row:hover, .p4-row:focus-visible { background: var(--raise); }
.p4-row:focus-visible { outline: 2px solid var(--au); outline-offset: -2px; }

/* logo: fixed-width column, up to 44px tall and crisp (variant D) */
.p4-logo { width: 96px; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.p4-logo img { max-width: 92px; max-height: 44px; width: auto; height: auto; display: block; object-fit: contain; }
.p4-logo-tag { font: 700 8.5px/1.15 var(--body); letter-spacing: 0.05em; text-transform: uppercase; color: var(--cream-2); white-space: nowrap; }

.p4-row-body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.p4-row-body br { display: none; }
.p4-row-meta { margin: 0; font: 700 11px/1.3 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-2); display: flex; gap: 8px; flex-wrap: wrap; }
.p4-row-meta .p4-city::before { content: "\2022"; margin-right: 8px; color: var(--edge-2); }
.p4-row-event { margin: 0; font: 700 15px/1.3 var(--body); color: var(--cream); }
.p4-row-session { margin: 0; font: 400 13.5px/1.4 var(--body); color: var(--cream-2); }
.p4-row-badge { display: inline-block; margin-top: 4px; font: 700 10px/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--au-ink); background: rgba(216, 173, 99, 0.16); border: 1px solid rgba(216, 173, 99, 0.4); border-radius: 999px; padding: 4px 8px; }
.p4-item.is-active .p4-row { background: var(--raise2); }
.p4-item.is-active .p4-row-event { color: var(--red-hi); }
.p4-row-dot { display: none; }

/* mobile accordion photo slot (hidden on desktop) */
.p4-row-inline-stage { display: none; }

/* ---------- right: sticky stage ---------- */
.p4-stage-col { position: sticky; top: calc(var(--nav-h) + 20px); min-width: 0; }
.p4-stage {
  border-radius: 10px;
  overflow: hidden;
  background: var(--raise);
  border: 1px solid var(--edge);
}
.p4-stage-photo {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--raise2);
  overflow: hidden;
}
.p4-stage-photo.is-portrait { aspect-ratio: 4 / 5; }
.p4-stage-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  opacity: 0;
  transition: opacity 360ms var(--ease);
}
.p4-stage-img.is-shown { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .p4-stage-img { transition: none; } }

/* no-photo composed logo card */
.p4-stage-card {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 32px;
  text-align: center;
  background:
    radial-gradient(120% 140% at 20% 0%, rgba(228, 20, 27, 0.16), transparent 55%),
    linear-gradient(155deg, var(--raise2), var(--plum));
}
.p4-stage-photo.is-nophoto .p4-stage-card { display: flex; }
.p4-stage-card-logo { max-width: 62%; max-height: 88px; width: auto; height: auto; object-fit: contain; }
.p4-stage-card-ev { margin: 0; font: 400 26px/1.05 var(--anton); letter-spacing: 0.005em; text-transform: uppercase; color: var(--cream); max-width: 26ch; }
.p4-card-meta { margin: 0; font: 700 11px/1.4 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--au); }

/* prev/next controls on the photo itself: always visible, 44px tap target */
.p4-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--edge-2);
  background: rgba(18, 14, 23, 0.62);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 19px;
  line-height: 1;
  transition: background 160ms var(--ease), border-color 160ms var(--ease);
}
.p4-nav-btn:hover, .p4-nav-btn:focus-visible { background: var(--red); border-color: var(--red); }
.p4-nav-prev { left: 14px; }
.p4-nav-next { right: 14px; }
.p4-stage-photo[data-count="1"] .p4-nav-btn,
.p4-stage-photo.is-nophoto .p4-nav-btn { display: none; }

/* filmstrip: thumbnail row under the main photo, flanked by arrows (variant D) */
.p4-filmstrip { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--raise); border-top: 1px solid var(--edge); }
.p4-filmstrip[hidden] { display: none; }
.p4-fs-arrow {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--edge-2);
  background: rgba(18, 14, 23, 0.55);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: background 160ms var(--ease), border-color 160ms var(--ease);
}
.p4-fs-arrow:hover, .p4-fs-arrow:focus-visible { background: var(--red); border-color: var(--red); }
.p4-fs-track {
  flex: 1 1 auto;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 2px;
  scrollbar-width: thin;
}
.p4-fs-track::-webkit-scrollbar { height: 6px; }
.p4-fs-track::-webkit-scrollbar-thumb { background: var(--edge-2); border-radius: 999px; }
.p4-fs-thumb {
  flex: 0 0 auto;
  width: 84px;
  height: 54px;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  background: var(--raise2);
  scroll-snap-align: start;
  opacity: 0.66;
  transition: border-color 160ms var(--ease), opacity 160ms var(--ease);
}
.p4-fs-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; }
.p4-fs-thumb:hover, .p4-fs-thumb:focus-visible { opacity: 0.92; outline: none; }
.p4-fs-thumb.is-active { border-color: var(--au); opacity: 1; }

/* caption block */
.p4-cap { padding: 22px 26px 26px; }
.p4-cap-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.p4-cap-logo { height: 52px; width: auto; max-width: 210px; object-fit: contain; }
.p4-cap-logo-tag { font: 700 10px/1.2 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream-2); background: var(--raise2); border: 1px solid var(--edge); border-radius: 999px; padding: 5px 11px; }
.p4-cap-meta { margin: 0; font: 700 11px/1.3 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--au); }
.p4-cap-counter { margin-left: auto; font: 700 12px/1 var(--body); letter-spacing: 0.05em; color: var(--cream); background: var(--raise2); border: 1px solid var(--edge-2); border-radius: 999px; padding: 7px 13px; }
.p4-cap-title { margin: 0 0 8px; font: 400 26px/1.08 var(--anton); letter-spacing: 0.005em; text-transform: uppercase; color: var(--cream); }
.p4-cap-role { margin: 0 0 14px; font: 400 14px/1.5 var(--body); color: var(--cream-2); }
.p4-cap-role b { color: var(--red-hi); font-weight: 700; margin-right: 8px; text-transform: uppercase; font-size: 12px; letter-spacing: 0.06em; }
.p4-cap-k { margin: 0 0 6px; font: 700 11px/1.3 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-2); }
.p4-people { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.p4-people li { font: 400 13px/1.4 var(--body); background: var(--raise2); border: 1px solid var(--edge); border-radius: 999px; padding: 6px 12px; color: var(--cream-2); }
.p4-people li b { color: var(--cream); font-weight: 700; }
.p4-people li span { color: var(--cream-2); }
.p4-people li span::before { content: ", "; }
.p4-src { display: inline-flex; align-items: center; gap: 8px; font: 700 12px/1.3 var(--body); color: var(--au); text-decoration: none; border-bottom: 1px solid transparent; }
.p4-src:hover, .p4-src:focus-visible { border-bottom-color: var(--au); }
.p4-src.is-quiet { color: var(--cream-2); cursor: default; }

/* ---------- mobile: accordion, no sticky stage ---------- */
@media (max-width: 860px) {
  .p4-grid { grid-template-columns: 1fr; }
  .p4-stage-col { display: none; }
  .p4-row-dot { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--edge-2); flex: 0 0 auto; align-self: center; }
  .p4-item.is-active .p4-row-dot { background: var(--red); }
  .p4-row { grid-template-columns: 84px minmax(0, 1fr) 14px; padding: 20px 10px 20px 2px; }
  .p4-logo { width: 84px; }
  .p4-logo img { max-width: 80px; }
  .p4-row-inline-stage {
    display: none;
    padding: 0 0 20px 0;
  }
  .p4-item.is-active .p4-row-inline-stage { display: block; }
  .p4-row-inline-stage .p4-stage { border-radius: 8px; }
  .p4-row-inline-stage .p4-cap { padding: 16px 18px 20px; }
  .p4-row-inline-stage .p4-cap-title { font-size: 21px; }
  .p4-row-inline-stage .p4-cap-logo { height: 44px; }
  /* filmstrip becomes a horizontal scroll-snap row, arrows stay 44px tappable */
  .p4-row-inline-stage .p4-filmstrip { padding: 10px 10px; gap: 8px; }
  .p4-row-inline-stage .p4-fs-track { scroll-snap-type: x mandatory; }
  .p4-row-inline-stage .p4-fs-thumb { width: 68px; height: 46px; }
  .p4-nav-btn, .p4-fs-arrow { width: 44px; height: 44px; }
  .p4-fs-arrow { font-size: 18px; }
}


/* =====================================================================
   9. ON STAGE: masonry gallery + lightbox
   ===================================================================== */
.ph { background: var(--raise); border-top: 1px solid var(--edge); }
.pg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 112px; gap: 10px;
  grid-template-areas:
    "a a a a a a a b b b b b"
    "a a a a a a a b b b b b"
    "a a a a a a a b b b b b"
    "a a a a a a a c c c c c"
    "d d d d e e e c c c c c"
    "d d d d e e e c c c c c"
    "d d d d f f f g g g g g"
    "d d d d f f f g g g g g"; }
.pg li:nth-child(1) { grid-area: a; } .pg li:nth-child(2) { grid-area: f; } .pg li:nth-child(3) { grid-area: b; }
.pg li:nth-child(4) { grid-area: d; } .pg li:nth-child(5) { grid-area: c; } .pg li:nth-child(6) { grid-area: g; }
.pg li:nth-child(7) { grid-area: e; }
.pg li { min-width: 0; min-height: 0; display: grid; }
.pg-thumb { appearance: none; border: 0; padding: 0; margin: 0; background: var(--plum); cursor: pointer; display: block; width: 100%; height: 100%; overflow: hidden; position: relative; border-radius: 4px; }
.pg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 700ms var(--ease); }
.pg-thumb::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; transition: transform 320ms var(--ease); }
.pg-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; font: 700 11px/1.4 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream); background: linear-gradient(to top, rgba(18, 14, 23, 0.92), rgba(18, 14, 23, 0)); text-align: left; opacity: 0; transform: translateY(10px); transition: opacity 260ms var(--ease), transform 260ms var(--ease); }
@media (hover: hover) {
  .pg-thumb:hover img { transform: scale(1.05); }
  .pg-thumb:hover .pg-cap { opacity: 1; transform: none; }
  .pg-thumb:hover::after { transform: scaleX(1); }
}
.pg-thumb:focus-visible { outline: 2px solid var(--au); outline-offset: 3px; }
.pg-thumb:focus-visible .pg-cap { opacity: 1; transform: none; }
@media (hover: none) { .pg li:nth-child(1) .pg-cap { opacity: 1; transform: none; } }
html.static .pg-cap { opacity: 1; transform: none; }
@media (max-width: 899px) {
  .pg { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; grid-template-areas: none; gap: 8px; }
  .pg li:nth-child(n) { grid-area: auto; }
  .pg li:nth-child(1), .pg li:nth-child(6) { grid-column: span 2; }
  .pg-thumb { aspect-ratio: 3 / 2; }
  .pg li:nth-child(4) .pg-thumb, .pg li:nth-child(7) .pg-thumb { aspect-ratio: 4 / 5; }
  .pg li:nth-child(4), .pg li:nth-child(7) { grid-row: span 1; }
}
/* v7: 21 photographs. The first seven keep the v6 mosaic; the rest wait behind "Show all" */
.pg li.pg-more { grid-column: span 3; grid-row: span 2; }
.pg li.pg-more.pg-wide { grid-column: span 6; }
html.js .pg:not(.is-all) li.pg-more { display: none; }
.pg-foot { margin: 22px 0 0; display: flex; justify-content: center; }
.pg-foot[hidden] { display: none; }
.pg-foot .btn-a { appearance: none; background: transparent; cursor: pointer; }
@media (max-width: 899px) {
  .pg li.pg-more, .pg li.pg-more.pg-wide { grid-column: auto; grid-row: auto; }
  .pg li.pg-more:last-child { grid-column: span 2; }
  .pg-foot .btn-a { flex: 1 1 100%; }
}
.lb { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100dvh; color: var(--cream); }
.lb::backdrop { background: rgba(18, 14, 23, 0.95); }
.lb[open] { display: grid; place-items: center; }
.lb-fig { margin: 0; display: grid; justify-items: center; gap: 16px; pointer-events: none; }
.lb-img { width: auto; height: auto; max-width: min(92vw, 1400px); max-height: 78vh; object-fit: contain; pointer-events: auto; opacity: 0; transform: scale(0.985); transition: opacity 220ms var(--ease), transform 220ms var(--ease); }
.lb-img.is-ready { opacity: 1; transform: none; }
.lb-cap { text-align: center; padding: 0 16px; max-width: 70ch; }
.lb-cap b { display: block; font: 400 26px/1.05 var(--anton); text-transform: uppercase; color: var(--cream); }
.lb-cap span { display: block; margin-top: 8px; font: 700 11px/1.4 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--au); }
.lb-count { position: fixed; top: 22px; left: 50%; transform: translateX(-50%); margin: 0; font: 400 20px/1 var(--anton); letter-spacing: 0.06em; color: var(--au); }
.lb-nav, .lb-close { position: fixed; appearance: none; border: 1px solid var(--edge-2); background: rgba(18, 14, 23, 0.8); color: var(--cream); width: 52px; height: 52px; border-radius: 50%; font: 28px/1 var(--body); cursor: pointer; display: grid; place-items: center; padding: 0; }
.lb-nav:hover, .lb-close:hover { background: var(--red); border-color: var(--red); color: #fff; }
.lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
.lb-close { top: 16px; right: 16px; }
.lb-nav:focus-visible, .lb-close:focus-visible { outline: 2px solid var(--au); outline-offset: 3px; }
body:has(dialog[open]) { overflow: hidden; }
@media (max-width: 699px) {
  .lb-img { max-height: 68vh; }
  .lb-nav { top: auto; bottom: 16px; transform: none; }
  .lb-next { right: 84px; }
  .lb-close { top: auto; bottom: 16px; right: 16px; }
}
@media (prefers-reduced-motion: reduce) { .lb-img, .pg-thumb img, .pg-cap, .pg-thumb::after, .wt-card .yt-lite-play { transition: none; } }

/* =====================================================================
   10. ABOUT: rounded stage photo with a floating stat card, text beside
       it, credentials, facts, then the memberships row in white marks
   ===================================================================== */
.ab { background: var(--plum); border-top: 1px solid var(--edge); }
.ab-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 72px; align-items: start; }
.ab-photo { position: relative; margin: 0 0 40px 0; padding-bottom: 44px; padding-left: 0; }
.ab-photo .ab-img { display: block; overflow: hidden; border-radius: 14px; aspect-ratio: 4 / 5; background: var(--raise); }
.ab-photo .ab-img img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; display: block; }
.ab-stat { position: absolute; left: -22px; bottom: 0; width: 220px; padding: 22px 24px 20px; background: var(--cream); color: var(--ink); border-radius: 10px; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45); }
.ab-stat b { display: block; font: 400 64px/0.84 var(--anton); color: var(--red); }
.ab-stat span { display: block; margin-top: 10px; font: 700 11px/1.45 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.ab-text p { margin: 0 0 18px; font-size: 18px; line-height: 1.68; color: var(--cream); }
.ab-text p:first-child::first-letter { font: 400 4.6em/0.8 var(--anton); float: left; margin: 8px 14px 0 0; color: var(--red); }
.ab-chips { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ab-chips li { display: inline-flex; align-items: center; min-height: 38px; padding: 0 13px; border: 1px solid var(--edge-2); border-radius: 4px; font: 700 11px/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream); }
.ab-chips li b { color: var(--au); margin-right: 7px; }
.ab-facts { margin: 30px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; border-top: 1px solid var(--edge-2); }
.ab-fact { padding: 26px 0 0; }
.ab-fact + .ab-fact { border-left: 1px solid var(--edge-2); padding-left: 40px; }
.ab-fact h3 { margin: 0 0 12px; font: 400 24px/1 var(--anton); letter-spacing: 0.02em; text-transform: uppercase; color: var(--cream); }
.ab-fact ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ab-fact li { font-size: 14px; line-height: 1.45; color: var(--cream); }
.ab-fact li span { display: block; color: var(--cream-2); font-size: 13px; }
.ab-links { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 26px; }
.ab-links a { display: inline-flex; align-items: center; min-height: 44px; font: 700 12px/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--red); }
.ab-links a:hover { color: var(--au); }
.ab-links a:focus-visible { outline: 2px solid var(--au); outline-offset: 2px; }
.ab-members { margin: 48px 0 0; padding-top: 30px; border-top: 1px solid var(--edge); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 40px; }
.ab-members .eb { margin: 0; }
.ab-members ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 44px; }
.ab-members li { display: flex; align-items: center; gap: 14px; min-height: 48px; font-size: 13px; line-height: 1.35; color: var(--cream-2); }
.ab-members li img { width: auto; height: 36px; max-width: 150px; object-fit: contain; }
.ab-members li b { font: 400 24px/1 var(--anton); letter-spacing: 0.03em; text-transform: uppercase; color: var(--cream); }
@media (max-width: 999px) {
  .ab-grid { grid-template-columns: 1fr; gap: 36px; }
  .ab-photo { max-width: 420px; margin-bottom: 8px; }
  .ab-stat { left: -8px; }
  .ab-facts { grid-template-columns: 1fr; }
  .ab-fact + .ab-fact { border-left: 0; padding-left: 0; margin-top: 22px; border-top: 1px solid var(--edge-2); }
}
@media (max-width: 599px) {
  .ab-photo { padding-bottom: 60px; }
  .ab-stat { width: 190px; padding: 18px 18px 16px; }
  .ab-stat b { font-size: 52px; }
}

/* =====================================================================
   11. BRING ALEX TO YOUR STAGE: red-washed close
   ===================================================================== */
.bk { position: relative; overflow: hidden; background: var(--plum); color: var(--cream); padding: 128px 0 120px; }
.bk-bg { position: absolute; inset: 0; }
.bk-bg img { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); object-fit: cover; object-position: 50% 40%; filter: blur(4px) brightness(0.5) saturate(0.85); }
.bk-bg::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(228, 20, 27, 0.5) 0%, rgba(228, 20, 27, 0.18) 45%, rgba(228, 20, 27, 0) 75%),
  linear-gradient(to bottom, rgba(18, 14, 23, 1) 0%, rgba(18, 14, 23, 0.5) 24%, rgba(18, 14, 23, 0.62) 100%),
  repeating-linear-gradient(to bottom, rgba(18, 14, 23, 0.16) 0 1px, rgba(18, 14, 23, 0) 1px 4px); }
.bk-in { position: relative; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 48px 72px; align-items: end; }
.bk-title { margin: 0 0 28px; font: 400 clamp(60px, 10vw, 176px)/0.88 var(--anton); text-transform: uppercase; color: var(--cream); }
.bk-title em { font-style: normal; color: var(--cream); -webkit-text-stroke: 0; }
.bk-title span { display: block; }
.bk .bk-lead { margin: 0 0 20px; font-size: 18px; line-height: 1.6; color: var(--cream); max-width: 62ch; }
.bk-avail { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 30px; font: 700 13px/1.4 var(--body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--au); }
.bk-avail::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--au); }
.bk-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.bk-cta .btn-a.red { background: var(--cream); color: var(--ink); }
.bk-cta .btn-a.red:hover { background: #fff; }
.bk-aside { padding: 30px 30px 28px; background: rgba(18, 14, 23, 0.78); border: 1px solid var(--edge-2); border-radius: 4px; }
.bk-aside h3 { margin: 0 0 12px; }
.bk-aside ul { list-style: none; margin: 0 0 22px; padding: 0; }
.bk-aside li { font: 400 28px/1 var(--anton); text-transform: uppercase; color: var(--cream); padding: 12px 0; border-bottom: 1px solid var(--edge-2); }
.bk-aside p { font-size: 15px; margin: 0; }
.bk-aside a { color: var(--cream); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--au); display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.bk-aside a:hover { color: var(--au); }
.bk-aside a:focus-visible { outline: 2px solid var(--au); outline-offset: 2px; }
@media (max-width: 999px) {
  .bk { padding: 80px 0 96px; }
  .bk-in { grid-template-columns: 1fr; }
  .bk-cta .btn-a { flex: 1 1 100%; white-space: normal; text-align: center; padding: 12px 20px; }
}

/* mobile booking bar: shows after the hero, hides at the booking block */
.bar { display: none; }
@media (max-width: 899px) {
  .bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--plum); border-top: 1px solid var(--edge-2); transform: translateY(110%); transition: transform 320ms var(--ease); }
  .bar.is-on { transform: none; }
  .bar p { margin: 0; font: 400 19px/1 var(--anton); letter-spacing: 0.02em; text-transform: uppercase; color: var(--cream); }
  .bar p small { display: block; margin-top: 4px; font: 700 9px/1.2 var(--body); letter-spacing: 0.14em; color: var(--au); }
  .bar .btn-a { min-height: 46px; padding: 0 22px; }
}
@media (prefers-reduced-motion: reduce) { .bar { transition: none; } }
html.static .bar { display: none !important; }

/* RealTimes footer chrome on the plum ground */
.am footer { background: #0b0910; border-top: 1px solid var(--edge); }