/* ==========================================================================
   GPG event system.
   Loads on top of the main site's style.css and uses its variables, so the
   palette lives in one place. Only the surfaces the event system adds are
   defined here.

   Audience note: this is built for people in their sixties and seventies on
   a phone or an iPad. Controls are large, contrast is strong, and nothing
   important is smaller than 17px.
   ========================================================================== */

/* The main site's header is transparent over a coloured band and turns solid
   on scroll via its own JS. The microsite has no band and does not load that
   script, so the header is solid from the start. */
.header--solid {
  position: sticky;
  top: 0;
  height: auto;
  min-height: 88px;
  background: var(--sage-dark);
  border-bottom: 1px solid var(--rule-light);
}
.header--solid .header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 14px 24px;
  height: auto;
}
/* style.css parks this lockup with position:absolute, top:50% and a
   translateY(-50%) to centre it. Switching it back to static kills the top
   offset but NOT the transform, which applies to any element however it is
   positioned, so the mark and wordmark were being dragged up by half their own
   height and clipped against the top of the header while the phone number,
   which has no transform, stayed put and read as sitting too low. Cancel the
   transform explicitly. */
.header--solid .brand-inline {
  opacity: 1;
  pointer-events: auto;
  position: static;
  transform: none;
}
.header--solid .header__brand { width: auto; height: auto; }
.header--solid .header__phone { white-space: nowrap; }

/* style.css hides the inline lockup below 880px because the main site swaps to
   its stacked mark there. This microsite has no stacked mark, so that rule left
   the header with no logo at all on a phone, which is most of this audience. */
@media (max-width: 880px) {
  .header--solid .brand-inline { display: flex; }
}

/* On a narrow phone the mark, the wordmark and the phone number cannot all sit
   on one row without crushing. The phone number is the one Tim asked to keep
   visible everywhere, so the wordmark steps aside and the mark carries the
   brand. */
@media (max-width: 600px) {
  .header--solid { min-height: 72px; }
  .header--solid .brand-inline__text { display: none; }
  .header--solid .brand-inline img { height: 44px; }
  .header--solid .header__inner { padding: 12px 18px; gap: 14px; }
  .header--solid .header__phone { font-size: 17px; }
}

/* --- page hero ------------------------------------------------------------
   style.css pads .page-hero with calc(var(--header-h) + 70px) on top, which is
   254px, because the main site's header is transparent and overlays its hero.
   This microsite's header is solid and sticky (see .header--solid above), so it
   already occupies that space and the inherited padding left roughly 250px of
   dead olive band above the title. Reset it here rather than in style.css,
   which is a synced copy of the main site's and must not be forked. */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 78px 0 86px;
}

/* The engraved stag as a quiet watermark, the same treatment the main site
   gives its homepage hero. Without it this band is a flat slab of olive, which
   is exactly how it read on 2026-09-04. Content sits above it at z-index 2. */
.page-hero::before {
  content: '';
  position: absolute;
  top: 50%;
  right: max(2vw, 20px);
  transform: translateY(-52%);
  width: min(40vw, 520px);
  aspect-ratio: 320 / 173;
  background: url('../img/brand/gpg-mark-cream.webp') no-repeat center / contain;
  opacity: 0.15;
  pointer-events: none;
}
.page-hero > .container { position: relative; z-index: 2; }

/* Below the point where the stag would sit behind the text rather than beside
   it. Cream on olive at 0.15 is quiet, but not quiet enough under body copy. */
@media (max-width: 900px) {
  .page-hero::before { display: none; }
  .page-hero { padding: 56px 0 62px; }
}

/* --- empty state ----------------------------------------------------------
   Shown when no event is open. It was a bare paragraph in a tall cream void,
   which reads as a page that failed to load rather than a deliberate state.
   This is also the page an invited client lands on, so it carries the mark and
   a real call to action. */
.sem-empty {
  max-width: 720px;
  margin: 0 auto;
  padding: 44px 40px 46px;
  text-align: center;
  background: var(--paper-soft);
  border: 1px solid var(--paper-line);
  border-radius: 6px;
}
.sem-empty__mark {
  width: 148px;
  height: auto;
  opacity: 0.5;
  margin-bottom: 18px;
}
.sem-empty h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  margin-bottom: 12px;
}
.sem-empty p {
  color: var(--ink-mute);
  font-size: 18px;
  max-width: 46ch;
  margin: 0 auto 26px;
}

@media (max-width: 600px) {
  .sem-empty { padding: 32px 22px 34px; }
  .sem-empty h2 { font-size: 25px; }
}

/* --- GPG Events public hub ------------------------------------------------------
   The landing page and the event page are Ava's GPG Events public hub design
   (September 2026), ported rule for rule: its own ink, teal and aqua palette,
   Georgia and Arial, and its blue hour London artwork. That is deliberate. The
   hub lists events Tim runs for other companies too, and it is the shape of a
   platform GNL can offer to others, so it does not wear the GPG site's sage
   and cream. The shared header and footer from layout.html are replaced on
   these pages by the hub's own. Everything else (register, watch, admin)
   keeps the site's look. */

body.hub {
  --hub-ink: #06191c;
  --hub-teal: #063c3e;
  --hub-aqua: #9bd2cb;
  --hub-paper: #f3f0e9;
  --hub-line: rgba(6, 25, 28, 0.18);
  --hub-mute: #536263;
  --hub-accent: #d66f45;
  --hub-serif: Georgia, 'Times New Roman', serif;
  --hub-sans: Arial, Helvetica, sans-serif;
  background: var(--hub-paper);
  color: var(--hub-ink);
  font-family: var(--hub-sans);
}
body.hub .header--solid { display: none; }
body.hub .footer { background: var(--hub-ink); }
/* Deliberately .hub not body.hub: body is the only element that ever
   carries this class, so this reaches the same elements either way, but
   body.hub h1 (0,1,2) out-specifies every "one class + h1" component rule
   in this file (0,1,1) regardless of source order, silently zeroing
   margin-top on every heading and paragraph below. Caught 2026-09-05 after
   it ate three separate spacing fixes. */
.hub h1, .hub h2, .hub h3, .hub p { margin: 0; }

.hub-header {
  position: absolute;
  z-index: 10;
  inset: 0 0 auto;
  height: 88px;
  display: flex;
  align-items: center;
  padding: 0 clamp(22px, 5vw, 78px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
}
.hub-header--detail {
  position: static;
  height: 82px;
  justify-content: space-between;
  background: var(--hub-ink);
  border-bottom: 0;
}
.hub-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.hub-brand__mark {
  font: 700 25px/1 var(--hub-serif);
  letter-spacing: -0.04em;
  padding-right: 12px;
  border-right: 1px solid;
}
.hub-brand__division { font-size: 11px; font-weight: 700; }
.hub-header nav {
  display: flex;
  gap: 32px;
  margin: auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hub-header nav a { color: inherit; opacity: 0.78; }
.hub-header nav a:hover { opacity: 1; }
.hub-header__cta,
.hub-header__back {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid;
  color: inherit;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.hub-header__back { border-bottom: 0; letter-spacing: 0.12em; font-size: 11px; }

.hub-hero {
  position: relative;
  min-height: 860px;
  height: 100svh;
  color: #fff;
  overflow: hidden;
  background: var(--hub-ink);
}
.hub-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: hubZoom 1.4s ease-out both;
}
.hub-hero__wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #031216f5 0%, #031216cc 38%, #0312161f 75%),
    linear-gradient(0deg, #031216b3, transparent 45%);
}
.hub-hero__content {
  position: relative;
  z-index: 2;
  max-width: 790px;
  padding: clamp(155px, 20vh, 215px) 5vw 70px;
  animation: hubRise .9s .15s ease-out both;
}
.hub-eyebrow,
.hub-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--hub-sans);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 12px;
  font-weight: 700;
}
.hub-eyebrow span {
  width: 8px; height: 8px;
  background: var(--hub-accent);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(214, 111, 69, 0.15);
}
.hub-kicker { color: #497071; }
.hub-kicker--light { color: var(--hub-aqua); }
.hub-hero h1 {
  margin-top: 48px;
  font: 400 clamp(48px, 6.1vw, 92px)/0.98 var(--hub-serif);
  letter-spacing: -0.045em;
  color: #fff;
}
.hub-hero__intro {
  max-width: 580px;
  /* The headline runs at line-height .98, so its final line box is shorter
     than the glyphs and a flat 56px read far tighter than it measured.
     Scales with the headline (2026-09-07, Graham: "needs to come down a bit"). */
  margin-top: clamp(48px, 5.2vw, 80px);
  font: 18px/1.6 var(--hub-serif);
  color: rgba(255, 255, 255, 0.76);
}
.hub-hero__invite {
  max-width: 520px;
  padding: 13px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font: 16px/1.55 var(--hub-serif);
  color: rgba(255, 255, 255, 0.82);
}

.hub-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 34px;
  font-size: 13px;
}
.hub-hero__meta span,
.hub-venue__meta span { display: flex; align-items: center; gap: 9px; }
.hub-hero__meta span::before,
.hub-venue__meta span::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--hub-aqua);
}
.countdown {
  display: flex;
  width: max-content;
  margin-top: 42px;
  border-top: 1px solid rgba(255, 255, 255, 0.26);
  border-bottom: 1px solid rgba(255, 255, 255, 0.26);
}
.countdown__cell {
  display: grid;
  min-width: 91px;
  padding: 18px 25px 15px 0;
}
.countdown__cell + .countdown__cell {
  padding-left: 25px;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}
.countdown__cell span {
  font: 35px/1 var(--hub-serif);
  font-variant-numeric: tabular-nums;
}
.countdown__cell small {
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.hub-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 35px;
}
.hub-button {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  background: var(--hub-aqua);
  color: var(--hub-ink);
  padding: 18px 22px;
  font-family: var(--hub-sans);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: background .2s ease, transform .2s ease;
}
.hub-button i { font-style: normal; font-size: 18px; line-height: 1; }
.hub-button:hover { background: #fff; transform: translateY(-2px); }
.hub-textlink {
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  padding-bottom: 6px;
}
.hub-hero__index {
  position: absolute;
  z-index: 2;
  right: 5vw;
  bottom: 48px;
  display: flex;
  align-items: center;
  gap: 16px;
  font: 12px var(--hub-serif);
}
.hub-hero__index i { width: 90px; height: 1px; background: rgba(255, 255, 255, 0.5); }
@keyframes hubRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes hubZoom { from { transform: scale(1.04); opacity: .6; } to { transform: scale(1); opacity: 1; } }

.hub-manifesto {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10vw;
  padding: 95px 5vw;
  border-bottom: 1px solid var(--hub-line);
}
.hub-manifesto p {
  max-width: 1050px;
  font: clamp(29px, 3.3vw, 52px)/1.16 var(--hub-serif);
  letter-spacing: -0.025em;
}
.hub-manifesto > span {
  align-self: end;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  color: #526264;
}

.hub-programme { padding: 110px 5vw 125px; }
.hub-section-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 30px;
  margin-bottom: 55px;
}
.hub-section-heading h2,
.hub-watch h2,
.hub-venue__copy h2 {
  margin-top: 12px;
  font: clamp(40px, 5vw, 72px)/1 var(--hub-serif);
  letter-spacing: -0.04em;
}
.hub-section-heading > p {
  max-width: 430px;
  justify-self: end;
  font: 17px/1.55 var(--hub-serif);
  color: var(--hub-mute);
}
.hub-list { border-top: 1px solid var(--hub-line); }
.hub-row {
  display: grid;
  grid-template-columns: 60px 140px minmax(0, 1fr) 60px;
  gap: 30px;
  align-items: center;
  padding: 34px 5px;
  border-bottom: 1px solid var(--hub-line);
  color: inherit;
  transition: padding .25s ease, background .25s ease;
}
.hub-row:hover { padding-left: 18px; background: rgba(255, 255, 255, 0.42); }
.hub-row__num { font: italic 13px var(--hub-serif); color: #738081; }
.hub-row__date { display: grid; }
.hub-row__date strong { font: 25px var(--hub-serif); }
.hub-row__date span { margin-top: 5px; font-size: 12px; color: #667475; }
.hub-row__type {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #3b6868;
  font-weight: 800;
}
.hub-row__copy h3 { margin-top: 9px; font: clamp(24px, 2.4vw, 38px)/1.1 var(--hub-serif); }
.hub-row__copy p { margin-top: 9px; color: #657274; }
.hub-row__arrow {
  width: 48px; height: 48px;
  border: 1px solid var(--hub-line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 20px var(--hub-serif);
}
/* By-invitation events are listed rather than hidden (2026-09-07), so the
   badge has to read as a status, not a button, and the note below the list
   has to explain that there is nothing to click. */
.hub-row__badge {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 8px;
  border: 1px solid rgba(59, 104, 104, 0.35);
  border-radius: 999px;
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: #3b6868;
  background: rgba(59, 104, 104, 0.06);
  vertical-align: 1px;
}
.hub-invited {
  max-width: 720px;
  margin-top: 44px;
  padding: 28px 30px;
  border-left: 3px solid rgba(59, 104, 104, 0.5);
  background: rgba(59, 104, 104, 0.05);
}
.hub-invited h3 { font: clamp(20px, 1.9vw, 27px)/1.2 var(--hub-serif); letter-spacing: -0.01em; }
.hub-invited p { margin-top: 13px; font: 16px/1.65 var(--hub-serif); color: var(--hub-mute); }
.hub-invited a { color: var(--hub-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .hub-invited { padding: 22px 20px; margin-top: 32px; } }

.hub-empty { max-width: 640px; padding: 40px 0; }
.hub-empty h3 { margin-top: 14px; font: clamp(28px, 3vw, 40px)/1.1 var(--hub-serif); letter-spacing: -0.02em; }
.hub-empty p { margin-top: 16px; font: 18px/1.6 var(--hub-serif); color: var(--hub-mute); }
.hub-empty a { color: var(--hub-ink); text-decoration: underline; text-underline-offset: 3px; }

.hub-venue {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 680px;
  background: var(--hub-ink);
  color: #fff;
}
.hub-venue__art {
  position: relative;
  min-height: 540px;
  background: url('../hub/hero.webp') center / cover;
}
.hub-venue__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(20deg, #001418b3, transparent);
}
.hub-venue__art span {
  position: absolute;
  z-index: 1;
  left: 50px;
  bottom: 45px;
  font: italic 14px/1.4 var(--hub-serif);
  color: rgba(255, 255, 255, 0.7);
}
.hub-venue__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 70px clamp(35px, 7vw, 120px);
}
/* More than the shared .hub-section-heading/.hub-watch h2 margin: this
   kicker sits alone with nothing above it (no eyebrow dot, no image), so it
   reads tighter than the same 12px does elsewhere against a 72px headline. */
.hub-venue__copy h2 { margin-top: 20px; }
.hub-venue__copy p {
  max-width: 580px;
  margin-top: 40px;
  font: 17px/1.7 var(--hub-serif);
  color: rgba(255, 255, 255, 0.68);
}
.hub-venue__meta { display: flex; gap: 28px; margin-top: 32px; font-size: 13px; }
.hub-venue__copy > a,
.hub-watch a {
  display: flex;
  align-items: center;
  gap: 22px;
  width: max-content;
  margin-top: 42px;
  padding-bottom: 8px;
  border-bottom: 1px solid;
  color: inherit;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
}
.hub-venue__copy > a i { font-style: normal; font-size: 18px; }

.hub-watch {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 10vw;
  padding: 120px 5vw;
  background: #dfe9e4;
}
.hub-watch > div:last-child { align-self: end; }
.hub-watch p {
  max-width: 520px;
  font: 18px/1.65 var(--hub-serif);
  color: #526163;
}

/* Event page. */
.detail-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 670px;
  background: var(--hub-ink);
  color: #fff;
}
.detail-hero__image { position: relative; min-height: 670px; }
.detail-hero__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.detail-hero__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(20deg, #00141866, transparent);
}
.detail-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 70px clamp(35px, 7vw, 120px);
}
.detail-hero__content h1 {
  margin-top: 24px;
  font: clamp(50px, 6vw, 90px)/0.98 var(--hub-serif);
  letter-spacing: -0.045em;
  color: #fff;
}
.detail-hero__content > p {
  margin-top: 28px;
  font: 18px/1.65 var(--hub-serif);
  color: rgba(255, 255, 255, 0.7);
  max-width: 590px;
}
.detail-hero__meta {
  display: grid;
  gap: 14px;
  margin-top: 38px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.detail-hero__meta span { display: flex; gap: 12px; align-items: center; font-size: 13px; }
.detail-hero__meta span::before {
  content: '';
  flex: 0 0 auto;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--hub-aqua);
}
.detail-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10vw;
  padding: 100px 5vw;
}
.detail-body h2 {
  margin-top: 15px;
  font: clamp(35px, 4vw, 59px)/1.08 var(--hub-serif);
  letter-spacing: -0.035em;
}
.detail-body__lead,
.detail-body__note,
.detail-body__closed {
  font: 18px/1.7 var(--hub-serif);
  color: var(--hub-mute);
}
.detail-body__note, .detail-body__closed { margin-top: 22px; }
.detail-body__closed a, .detail-body small a { color: var(--hub-ink); text-decoration: underline; text-underline-offset: 3px; }
.detail-points {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
}
.detail-points li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 14px;
  font: 17px/1.55 var(--hub-serif);
  color: var(--hub-ink);
}
.detail-points li::before {
  content: '';
  position: absolute;
  left: 0; top: 13px;
  width: 12px; height: 1px;
  background: var(--hub-teal);
}
.detail-body .hub-button { margin-top: 35px; }
.detail-body small {
  display: block;
  margin-top: 14px;
  max-width: 450px;
  color: #718081;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  body.hub * { animation: none !important; transition: none !important; }
}

@media (max-width: 800px) {
  .hub-header { height: 72px; padding: 0 20px; justify-content: space-between; }
  .hub-header nav { display: none; }
  .hub-hero { min-height: 780px; height: auto; }
  .hub-hero__wash {
    background:
      linear-gradient(90deg, #031216ed, #03121673),
      linear-gradient(0deg, #031216d1, transparent);
  }
  .hub-hero__content { padding: 140px 22px 110px; }
  .hub-hero__intro { font-size: 16px; }
  .hub-hero__meta { gap: 13px 20px; }
  .countdown { width: 100%; }
  .countdown__cell { min-width: 0; flex: 1; padding: 14px 10px 12px 0; }
  .countdown__cell + .countdown__cell { padding-left: 10px; }
  .countdown__cell span { font-size: 28px; }
  .hub-hero__actions { align-items: flex-start; flex-direction: column; gap: 22px; }
  .hub-hero__index { display: none; }
  .hub-manifesto, .hub-section-heading, .hub-watch { grid-template-columns: 1fr; }
  .hub-manifesto { padding: 70px 22px; }
  .hub-programme { padding: 80px 22px; }
  .hub-section-heading > p { justify-self: start; }
  .hub-row { grid-template-columns: 40px 72px 1fr; gap: 10px; padding: 25px 0; }
  .hub-row:hover { padding-left: 0; }
  .hub-row__copy h3 { font-size: 22px; }
  .hub-row__arrow { display: none; }
  .hub-venue { grid-template-columns: 1fr; }
  .hub-venue__copy { padding: 65px 22px 75px; }
  .hub-venue__meta { flex-direction: column; gap: 12px; }
  .hub-watch { padding: 80px 22px; }
  .hub-header--detail { height: 72px; }
  .detail-hero, .detail-body { grid-template-columns: 1fr; }
  .detail-hero__image { min-height: 330px; }
  .detail-hero__content { padding: 60px 22px 75px; }
  .detail-body { padding: 75px 22px; }
}

/* --- hub craft layer ------------------------------------------------------------
   What turns the ported design into the finished thing. Kept as a layer on
   top of Ava's rules rather than mixed into them, so her structure can still
   be read as she wrote it. Everything in here is presentation: type, light,
   motion, legibility. Nothing is gated on it and all motion respects
   prefers-reduced-motion. */

/* Type is Ava's as delivered: Georgia for display, Arial for labels. Both are
   on every iPad and PC already, so nothing waits on a webfont. (Fraunces was
   tried on 2026-09-04; Graham preferred Ava's.) */

/* Legibility for the audience this is for. Nothing under 14px. */
.hub-hero__meta, .hub-venue__meta, .detail-hero__meta span { font-size: 15px; }
.hub-row__date span, .hub-row__num { font-size: 14px; }
.countdown__cell small { font-size: 11px; }
.hub-row__type { font-size: 11px; }
.hub-hero__index { font-size: 13px; }
.hub-header nav { font-size: 13px; }

.hub-header__right { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.hub-header nav + .hub-header__right { margin-left: 0; }
.hub-shard-toggle {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font: 500 16px/1 var(--hub-serif);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.hub-shard-toggle:hover, .hub-shard-toggle[aria-pressed="true"] {
  background: var(--hub-aqua);
  border-color: var(--hub-aqua);
  color: var(--hub-ink);
}

/* The hero as a scene: a slow drift on the artwork, a vignette, and a light
   that follows the pointer on desktop. The tint follows the visitor's clock. */
.hub-hero__image {
  animation: hubDrift 32s ease-in-out infinite alternate;
  transform-origin: 62% 42%;
  will-change: transform;
}
@keyframes hubDrift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.10) translate3d(-1.5%, -1%, 0); }
}
.hub-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(3, 18, 22, 0.55) 100%);
}
.hub-hero__content { z-index: 2; }

/* Lighter than Ava's wash. The type column keeps its contrast; the sky and
   the glass come through on the right, so the first screen reads as an
   evening, not a cellar. This audience is in its sixties and seventies. */
.hub-hero__wash {
  background:
    linear-gradient(90deg, rgba(3, 18, 22, 0.86) 0%, rgba(3, 18, 22, 0.62) 40%, rgba(3, 18, 22, 0.04) 78%),
    linear-gradient(0deg, rgba(3, 18, 22, 0.55), transparent 50%);
}
.hub-hero::after {
  background: radial-gradient(120% 90% at 50% 50%, transparent 62%, rgba(3, 18, 22, 0.4) 100%);
}
/* ?hero=day: the daytime view, cooler and lighter still. */
.hub-hero[data-hero="day"] .hub-hero__wash {
  background:
    linear-gradient(90deg, rgba(6, 25, 28, 0.82) 0%, rgba(6, 25, 28, 0.58) 40%, rgba(6, 25, 28, 0.02) 78%),
    linear-gradient(0deg, rgba(6, 25, 28, 0.5), transparent 50%);
}
.hub-hero[data-hero="day"] .hub-eyebrow span { background: var(--hub-aqua); box-shadow: 0 0 0 6px rgba(155, 210, 203, 0.18); }

/* The hero follows the event's clock (hub.js sets data-phase): before,
   doors, live, ended. One line of copy per state; the rest stays put. */
.hub-hero__phase {
  display: none;
  max-width: 560px;
  margin-top: 30px;
  font: 18px/1.6 var(--hub-serif);
  font-style: italic;
  color: rgba(255, 255, 255, 0.82);
  padding-left: 18px;
  border-left: 2px solid var(--hub-aqua);
}
.hub-hero[data-phase="doors"] .hub-hero__phase--doors,
.hub-hero[data-phase="live"] .hub-hero__phase--live,
.hub-hero[data-phase="ended"] .hub-hero__phase--ended { display: block; }
.hub-hero[data-phase="live"] .hub-eyebrow span,
.hub-hero[data-phase="doors"] .hub-eyebrow span { animation: hubPulse 1.6s ease-in-out infinite; }
@keyframes hubPulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(214, 111, 69, 0.15); }
  50% { box-shadow: 0 0 0 12px rgba(214, 111, 69, 0.05); }
}
.hub-eyebrow em { font-style: normal; }

/* Arriving: house lights down, once per visit. Shown only while hub.js says
   so (html.hub-arriving), so without JS it never appears. */
.hub-curtain {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  place-items: center;
  background: #020a0e;
  color: #fff;
  transition: opacity .9s ease;
}
html.hub-arriving .hub-curtain,
.hub-curtain.is-up { display: grid; }
.hub-curtain .hub-brand { animation: hubCurtainMark 1s ease both; }
.hub-curtain.is-up { opacity: 0; pointer-events: none; }
html.hub-arriving .hub-hero__content { animation: none; opacity: 0; }
@keyframes hubCurtainMark {
  from { opacity: 0; letter-spacing: 0.3em; }
  to   { opacity: 1; letter-spacing: 0.16em; }
}
.hub-hero__index { z-index: 2; }

/* Film grain on the dark sections, so they read as surfaces, not fills. */
.hub-hero::before,
.hub-venue::before,
.detail-hero::before,
body.hub .footer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
}
.hub-venue, .detail-hero, body.hub .footer { position: relative; }
.hub-venue > *, .detail-hero > * { position: relative; z-index: 2; }
body.hub .footer > * { position: relative; z-index: 2; }

/* The countdown ticks. */
.countdown__cell span.tick { animation: hubTick .45s ease; }
@keyframes hubTick { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Things arrive. Hidden only when JS is running; otherwise simply there. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }
html.js .hub-row[data-reveal]:nth-child(2) { transition-delay: .06s; }
html.js .hub-row[data-reveal]:nth-child(3) { transition-delay: .12s; }
html.js .hub-how__step[data-reveal]:nth-child(2) { transition-delay: .1s; }
html.js .hub-how__step[data-reveal]:nth-child(3) { transition-delay: .2s; }

/* Rows and buttons move a little under the hand. */
.hub-row__arrow { transition: transform .3s cubic-bezier(.2, .7, .2, 1), background .25s ease, color .25s ease, border-color .25s ease; }
.hub-row:hover .hub-row__arrow { transform: translateX(6px); background: var(--hub-ink); color: #fff; border-color: var(--hub-ink); }
.hub-row__copy h3 { transition: color .25s ease; }
.hub-row:hover .hub-row__copy h3 { color: var(--hub-teal); }
.hub-button i { transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.hub-button:hover i { transform: translateX(5px); }
.hub-venue__copy > a i, .hub-watch a i { transition: transform .25s ease; }
.hub-venue__copy > a:hover i { transform: translateX(5px); }
.hub-textlink { transition: border-color .2s ease, color .2s ease; }
.hub-textlink:hover { border-color: #fff; }
.detail-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; margin-top: 36px; }

/* How it works, in the hub's own voice. */
.hub-how {
  padding: 110px 5vw 120px;
  background: var(--hub-paper);
  border-top: 1px solid var(--hub-line);
}
.hub-how__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
  margin-top: 10px;
}
.hub-how__step { padding-top: 22px; border-top: 1px solid var(--hub-ink); }
.hub-how__num {
  display: block;
  font: 300 64px/1 var(--hub-serif);
  letter-spacing: -0.04em;
  color: var(--hub-teal);
}
.hub-how__step h3 { margin-top: 18px; font: 400 clamp(22px, 2vw, 28px)/1.15 var(--hub-serif); }
.hub-how__step p { margin-top: 10px; font: 17px/1.6 var(--hub-serif); font-style: italic; color: var(--hub-mute); }

@media (prefers-reduced-motion: reduce) {
  .hub-hero__image { animation: none; }
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 800px) {
  .hub-how { padding: 80px 22px; }
  .hub-how__grid { grid-template-columns: 1fr; gap: 34px; }
  .hub-header__right { gap: 14px; }
  .hub-header__cta { font-size: 11px; }
  .detail-hero__actions { gap: 18px; }
}

/* --- the invitation --------------------------------------------------------
   Two views: blue hour for arriving on the hub, daylight for the invitation
   itself. The venue section and the event page carry the daytime Shard by
   default; the event page ends its hero with an RSVP card, the date set
   large. The header's toggle (data-shard-toggle, hub.js) swaps the Shard
   photo to blue hour for comparison, since Graham's original "never a
   day/night swap" call changed 2026-09-05 once there was a reason to. */
.hub-venue__art { background-image: url('../hub/hero-day.webp'); }
.hub-venue__art::after { background: linear-gradient(20deg, rgba(0, 20, 24, 0.55), transparent 55%); }
.hub-venue__art span { color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 12px rgba(0, 20, 24, 0.6); }
html.hub-shard-dusk .hub-venue__art { background-image: url('../hub/hero.webp'); }
html.hub-shard-dusk .hub-venue__art::after { background: linear-gradient(20deg, #001418b3, transparent); }
html.hub-shard-dusk .hub-venue__art span { color: rgba(255, 255, 255, 0.7); text-shadow: none; }

.invite-band {
  position: relative;
  padding: 0 5vw 20px;
  background: var(--hub-ink);
}
.invite-band::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 50%;
  background: var(--hub-paper);
}
.invite-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  max-width: 1080px;
  margin: 0 auto;
  background: var(--hub-paper);
  color: var(--hub-ink);
  box-shadow: 0 40px 80px -40px rgba(3, 18, 22, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.invite-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
}
.invite-card > * { position: relative; }
.invite-card__date {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px 24px;
  background: var(--hub-teal);
  color: #fff;
}
.invite-card__weekday {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hub-aqua);
}
.invite-card__day {
  margin: 8px 0 2px;
  font: 300 124px/0.9 var(--hub-serif);
  letter-spacing: -0.05em;
}
.invite-card__month { font: 400 22px/1.2 var(--hub-serif); }
.invite-card__body { padding: 44px 48px 42px; }
.invite-card__body h2 {
  margin-top: 14px;
  font: 300 clamp(30px, 3.4vw, 46px)/1.05 var(--hub-serif);
  letter-spacing: -0.03em;
}
.invite-card__facts {
  list-style: none;
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--hub-line);
  display: grid;
  gap: 8px;
  font: 17px/1.5 var(--hub-serif);
  color: var(--hub-mute);
}
.invite-card__facts strong { color: var(--hub-ink); font-weight: 500; }
.invite-card__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 28px;
  margin-top: 28px;
}
.hub-button--ink { background: var(--hub-ink); color: #fff; }
.hub-button--ink:hover { background: var(--hub-teal); color: #fff; }
.invite-card__link {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hub-ink);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hub-line);
  transition: border-color .2s ease;
}
.invite-card__link:hover { border-color: var(--hub-ink); }
.invite-card__closed { font: 17px/1.5 var(--hub-serif); color: var(--hub-mute); }
.invite-card__closed a { color: var(--hub-ink); text-decoration: underline; text-underline-offset: 3px; }
.detail-body { padding-top: 90px; }

@media (max-width: 800px) {
  .invite-band { padding: 0 16px 16px; }
  .invite-card { grid-template-columns: 1fr; }
  .invite-card__date {
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
    gap: 10px 16px;
    flex-wrap: wrap;
    text-align: left;
    padding: 20px 24px;
  }
  .invite-card__weekday { flex-basis: 100%; }
  .invite-card__day { margin: 0; font-size: 64px; }
  .invite-card__body { padding: 26px 22px 28px; }
  .invite-card__actions .hub-button { width: 100%; justify-content: space-between; }
  .detail-body { padding-top: 64px; }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brass);
  color: var(--paper);
  padding: 12px 18px;
  z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

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

/* The hidden attribute is only a user agent rule of display:none, so any
   element that sets its own display beats it and stays on screen. That is
   what kept the player poster sitting on top of the playing video. This makes
   hidden mean hidden, whatever else an element asks for. */
[hidden] { display: none !important; }

/* Visible focus everywhere. Half this audience navigates by keyboard without
   thinking of it as navigating by keyboard. */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 2px;
}

.container.narrow, .narrow { max-width: 760px; }

.lead { font-size: 20px; line-height: 1.6; margin-bottom: 20px; }
.muted { color: var(--ink-mute); }

.sem-split {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.event-aside {
  background: var(--paper-soft);
  border: 1px solid var(--paper-line);
  border-radius: 6px;
  padding: 24px;
}
.event-aside img { width: 100%; height: auto; border-radius: 4px; margin-bottom: 16px; }
.event-aside h3 { font-family: var(--font-display); font-size: 24px; margin-bottom: 4px; }
.event-aside p { margin-bottom: 12px; }
.event-aside__when {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--sage-deep);
  margin: 16px 0;
}

/* --- event list --------------------------------------------------------- */

.event-list { display: grid; gap: 24px; }
.event-card {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
  gap: 32px;
  align-items: center;
  border: 1px solid var(--paper-line);
  border-radius: 6px;
  padding: 28px;
  background: var(--paper-soft);
}
.event-card h2 { font-family: var(--font-display); font-size: 28px; margin-bottom: 6px; }
.event-card__sub { color: var(--ink-mute); margin-bottom: 10px; }
.event-card__when {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--sage-deep);
  margin-bottom: 12px;
}
.event-card__actions { display: grid; gap: 12px; }

/* --- forms ---------------------------------------------------------------- */

.form { max-width: 620px; }
.form__row { margin-bottom: 22px; }
.form__row label {
  display: block;
  font-weight: 500;
  font-size: 18px;
  margin-bottom: 8px;
}
.form__row input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 19px;
  padding: 14px 16px;
  border: 2px solid var(--paper-line);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
}
.form__row input:focus { border-color: var(--sage); }
.form__hint { font-size: 16px; color: var(--ink-mute); margin-top: 6px; }

.form__check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 24px 0;
  font-size: 17px;
}
.form__check input {
  width: 24px; height: 24px; margin-top: 2px; flex: 0 0 auto;
  accent-color: var(--sage-deep);
}

.form-error {
  background: #fbe9e7;
  border-left: 4px solid #a33;
  color: #7a1f16;
  padding: 14px 18px;
  margin-bottom: 24px;
  font-size: 17px;
}

.privacy-note {
  background: var(--paper-soft);
  border: 1px solid var(--paper-line);
  border-radius: 6px;
  padding: 20px 24px;
  margin: 28px 0;
  font-size: 16px;
}
.privacy-note h2 { font-size: 18px; margin-bottom: 8px; font-family: var(--font-body); }
.privacy-note p { margin-bottom: 10px; }

/* Honeypot: off screen rather than display:none, because some bots skip
   fields that are explicitly hidden. */
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

.btn--large { font-size: 19px; padding: 18px 34px; }
.btn--block { display: block; width: 100%; text-align: center; }

/* --- watch page ----------------------------------------------------------- */

.watch-page { background: var(--paper); }
/* The page fills the window so the footer sits at the bottom. Without this a
   short state (the thank you) left a band of paper under the footer. */
body.watch-page { min-height: 100svh; display: flex; flex-direction: column; }
body.watch-page main { flex: 1 0 auto; }
.panel { padding: 48px 0 64px; }
.panel--player { padding: 24px 0 48px; background: var(--sage-dark); }

/* Afterwards: the same next step as Tim's end card, composed rather than
   stacked. Fades in so the player does not simply vanish. */
.panel--thanks { padding: 88px 0 104px; }
.panel--thanks:not([hidden]) { animation: thanksIn .9s ease both; }
@keyframes thanksIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.thanks {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr);
  gap: 56px;
  align-items: start;
}
.thanks__copy .eyebrow { margin-bottom: 18px; }
.thanks__copy h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(36px, 4.4vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}
.thanks__lead { font-size: 19px; line-height: 1.6; max-width: 52ch; color: var(--ink); }
.thanks__from {
  margin-top: 26px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  color: var(--ink-mute);
}
.thanks__next {
  background: var(--sage-deep);
  color: var(--paper);
  padding: 34px 36px 32px;
  border-radius: 6px;
  border-top: 3px solid var(--brass);
  box-shadow: 0 24px 50px -30px rgba(52, 58, 42, 0.5);
}
.thanks__kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-light);
  margin-bottom: 12px;
}
.thanks__next h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
  color: var(--paper);
  margin-bottom: 14px;
}
.thanks__detail { font-size: 17px; line-height: 1.55; color: rgba(245, 242, 233, 0.85); }
.thanks__places {
  margin: 16px 0 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(245, 242, 233, 0.22);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 242, 233, 0.8);
}
.thanks__next .btn--block { margin: 0; }
.thanks__contact { margin-top: 18px; font-size: 17px; color: rgba(245, 242, 233, 0.85); }
.thanks__contact a {
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 22px;
  margin-left: 8px;
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 242, 233, 0.4);
}

.watch__sub { font-size: 19px; color: var(--ink-mute); margin-bottom: 8px; }
.waiting__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  margin-top: 24px;
}
.waiting__when {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--sage-deep);
  margin-bottom: 20px;
}
.waiting__status { font-size: 18px; margin: 20px 0; }

.wait-countdown {
  display: flex;
  gap: 12px;
  margin: 8px 0 4px;
}
.wait-countdown > div {
  background: var(--sage-deep);
  color: var(--paper);
  border-radius: 6px;
  padding: 14px 10px;
  min-width: 84px;
  text-align: center;
}
.wait-countdown span {
  display: block;
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1.1;
}
.wait-countdown small {
  display: block;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .85;
}

/* Waiting room, desktop breathing room (2026-09-07, Graham: "a bit wider,
   not so bunched together"). The narrow 760px column suited a form, not a
   two column page with a countdown; the phone layout below 900px is
   untouched. */
.panel--waiting .container.narrow { max-width: 1120px; }
.panel--waiting .eyebrow { display: block; margin-bottom: 16px; }
.panel--waiting h1 { max-width: 20ch; line-height: 1.2; margin-bottom: 16px; }
.panel--waiting .watch__sub { line-height: 1.5; margin-bottom: 10px; }
.panel--waiting .watch__sub { max-width: 60ch; }
.waiting__grid {
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
  gap: 80px;
  margin-top: 36px;
}
.waiting__when { font-size: 27px; margin-bottom: 24px; }
.waiting__status { margin: 26px 0 22px; }
.wait-countdown { gap: 16px; margin: 12px 0 8px; }
.wait-countdown > div { min-width: 110px; padding: 18px 12px; }
.wait-countdown span { font-size: 40px; }
.panel--waiting .form__hint { max-width: 52ch; }
.panel--waiting .section__title { margin-top: 44px; }
.panel--waiting .points li { max-width: 60ch; }
.panel--waiting .event-aside { padding: 30px 32px; }
/* Presenter box: a small round portrait beside the name, so the box keeps
   its size (Graham, 2026-09-07: "a smaller Tim in there"). */
.event-aside__head { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.event-aside__head h3 { margin-bottom: 2px; }
.event-aside__head .muted { margin-bottom: 0; }
.event-aside .event-aside__photo {
  width: 88px; height: 88px; flex: 0 0 88px;
  border-radius: 50%; object-fit: cover; margin: 0;
  border: 2px solid var(--paper-line);
}

/* --- player --------------------------------------------------------------- */

.player { max-width: 1100px; margin: 0 auto; }
.player__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
}
.player__frame iframe,
.player__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* contain, not cover: a talking head must never be cropped to fit. */
  object-fit: contain;
  background: #000;
}
.player__poster {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: center;
  background: var(--sage-dark);
  color: var(--paper);
  text-align: center;
  padding: 24px;
  z-index: 2;
}
.player__poster p { font-size: 20px; }

.player__poster[hidden] { display: none; }

.player__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 4px 0;
  color: var(--paper);
  flex-wrap: wrap;
}
.player__btn {
  font-family: var(--font-body);
  font-size: 17px;
  padding: 12px 20px;
  min-height: 48px;
  border: 2px solid var(--paper);
  border-radius: 4px;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
}
.player__btn:hover { background: var(--paper); color: var(--sage-dark); }
.player__btn--right { margin-left: auto; }
.player__vol input { width: 140px; height: 32px; accent-color: var(--brass-light); }
.player__live {
  font-size: 14px;
  letter-spacing: .1em;
  padding: 6px 12px;
  border-radius: 3px;
  background: #8f2f24;
  color: #fff;
}
/* A replay is not urgent and should not wear the red badge that means
   "this is happening now". Quiet, and clearly not live. */
.player__live--replay {
  background: transparent;
  color: rgba(233,230,220,.66);
  border: 1px solid rgba(233,230,220,.3);
}
.player__status { color: var(--paper); font-size: 17px; margin-top: 12px; min-height: 24px; }

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
  .sem-split, .waiting__grid, .event-card, .thanks { grid-template-columns: 1fr; gap: 28px; }
  .panel--thanks { padding: 56px 0 72px; }
  .thanks__next { padding: 26px 22px 24px; }
  .wait-countdown > div { min-width: 0; flex: 1; }
  .wait-countdown span { font-size: 28px; }
  .panel { padding: 32px 0 48px; }
  .player__btn { flex: 1 1 auto; }
  .player__btn--right { margin-left: 0; }
}

@media (max-width: 420px) {
  .wait-countdown { gap: 8px; }
  .wait-countdown > div { padding: 10px 6px; }
  .wait-countdown span { font-size: 24px; }
  .btn--large { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* --- replay chapters ---------------------------------------------------
   Replay only: the live player has no seek bar, so no chapter list is
   rendered there at all. One column, because chapter titles are sentences
   and a multi column grid wraps them into ragged fragments with an orphan on
   the last row. Buttons rather than links: there is no URL to go to, the
   seek happens in place. */
.chapters { margin: 26px auto 0; max-width: 640px;
  border-top: 1px solid rgba(233,230,220,.18); padding-top: 18px; }
.chapters__title { color: rgba(233,230,220,.72); font-size: 13px;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  margin: 0 0 8px; }
.chapters__list { list-style: none; margin: 0; padding: 0; }
.chapters__list li + li { border-top: 1px solid rgba(233,230,220,.09); }
.chapters__item { display: flex; gap: 16px; align-items: baseline; width: 100%;
  background: none; border: 0; padding: 11px 10px; border-radius: 4px;
  color: var(--paper); font: inherit; font-size: 16px; line-height: 1.35;
  text-align: left; cursor: pointer; transition: background .12s ease; }
.chapters__item:hover, .chapters__item:focus-visible { background: rgba(233,230,220,.08); }
.chapters__item:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }
.chapters__at { color: var(--brass); font-variant-numeric: tabular-nums;
  font-size: 14px; min-width: 3.2em; text-align: right; flex: none; }
.chapters__label { flex: 1; }
@media (max-width: 640px) {
  .chapters { margin-top: 20px; }
  .chapters__item { font-size: 15px; gap: 12px; }
}

/* Context for someone watching the recording days later: what it was, when
   it happened. Sits above the chapter divider, quiet enough not to compete
   with the player. */
.replay-meta { max-width: 640px; margin: 18px auto 0; color: rgba(233,230,220,.62);
  font-size: 14px; line-height: 1.5; text-align: center; }

/* divider on the claim page, between "it is me" and "it was shared with me" */
.rule { border: 0; border-top: 1px solid rgba(47,52,56,.15); margin: 32px 0 24px; }