/* New-IA components: nav active state, show/format/past-show cards,
   story fragment cards, sign-up block, TBD placeholders, site footer. */

.postshow-nav .nav-links a.active { color: #fff; background: rgba(255,255,255,.11); }

/* Make sure the header CTA never clips or goes illegible at narrow widths —
   "Support the next show" / "Get the next date" both need to fit on 2 lines. */
.postshow-nav .nav-cta { min-width: 0; }
@media (max-width: 720px) {
  .postshow-nav .nav-cta { max-width: 150px; white-space: normal; line-height: 1.2; }
}
@media (max-width: 380px) {
  .postshow-nav .nav-cta { max-width: 128px; }
}

.tbd { color: #ffb37a; font-family: 'Courier New', monospace; font-size: 0.85em; }

/* ── Primary CTA — solid, high-contrast, matches the nav pill's weight
   (the base .cta ghost style — ~6% fill, 30% border — is too weak to be
   the main conversion action in the hero or on a show card). ── */
.cta-primary {
  background: rgba(255,255,255,.96);
  border-color: rgba(255,255,255,.98);
  color: #0a0a0a !important;
  font-weight: 700;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cta-primary:hover { background: #fff; box-shadow: 0 0 24px rgba(255,255,255,.18); }
.cta-primary.is-disabled { background: rgba(255,255,255,.3); color: rgba(0,0,0,.6) !important; cursor: not-allowed; }

/* Hero date/venue/price line — this is key decision info, not fine print,
   so it needs body-size type and full contrast, not a tiny low-contrast
   caption (was 11px at 75% white). */
.hero-key-info {
  font-family: 'Courier New', monospace;
  font-size: 16px;
  letter-spacing: .02em;
  color: rgba(255,255,255,.94);
}

/* ── Show card — media thumbnail + content split, same card/button/badge
   tokens as before (bg, border, radius, fonts, colors untouched), just a
   different arrangement: image beside the details, price next to the
   title, a short description, labeled date/venue, and a primary CTA
   paired with a secondary "What is X?" action. ── */
/* Card content (media + title + the two-button row) tops out around 480px
   wide on its own — past that it's just empty padding, so the card caps
   there instead of stretching across the whole page. */
.show-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 480px)); gap: 20px; margin: 24px 0; justify-content: start; }
.show-card {
  max-width: 480px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 14px; padding: 16px;
  background: rgba(255,255,255,.03);
  display: grid; grid-template-columns: 104px 1fr; gap: 16px; align-items: start;
}
.show-card-media {
  position: relative;
  grid-row: 1 / -1; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.02));
}
.show-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.show-card-media-tag { position: absolute; top: 8px; left: 8px; }
.show-card-media-tag .status-badge { background: rgba(5,5,6,.75); backdrop-filter: blur(6px); white-space: nowrap; }

/* ── Carousel (On sale now): compact label + nav arrows + horizontal scroll —
   "What's on." above already carries the page title, so this section gets
   a small label instead of another full heading. ── */
.carousel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.carousel-label { display: flex; align-items: center; gap: 10px; font: 13px/1 'Courier New', monospace; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.carousel-tick { width: 20px; height: 2px; background: #fff; display: inline-block; }
.carousel-nav { display: flex; gap: 8px; }
.carousel-arrow {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.3); border-radius: 8px; background: rgba(255,255,255,.04);
  color: #fff; font-size: 14px; cursor: pointer; transition: all .2s ease;
}
.carousel-arrow:hover:not(:disabled) { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); }
.carousel-arrow:disabled { opacity: .3; cursor: default; }
/* .editorial-story's direct child is a grid item, which defaults to
   min-width:auto — without this it refuses to shrink below the carousel's
   full content width and the whole page scrolls instead of the carousel. */
.editorial-story > div { min-width: 0; }
.show-card-carousel {
  display: flex; gap: 20px; overflow-x: auto; padding: 24px 2px 10px;
  scroll-snap-type: x proximity; scrollbar-width: none; min-width: 0;
}
.show-card-carousel::-webkit-scrollbar { display: none; }
.show-card-carousel .show-card { flex: 0 0 auto; width: 480px; scroll-snap-align: start; }
.show-card-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.show-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.format-tag { font: 11px/1 'Courier New', monospace; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.status-badge { font: 11px/1 'Courier New', monospace; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); }
.status-on-sale { color: #50dc78; border-color: rgba(80,220,120,.5); }
.status-few-left { color: #ffcf5c; border-color: rgba(255,207,92,.5); }
.status-sold-out, .status-past { color: rgba(255,255,255,.5); }
.status-announced { color: #8ab4ff; border-color: rgba(138,180,255,.5); }
.show-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.show-card-title { font-family: 'PP Mondwest', Georgia, serif; font-size: 22px; margin: 0; }
.show-card-price { font-size: 14px; font-weight: 700; color: #fff; margin: 4px 0 0; white-space: nowrap; }
.show-card-label { display: block; font: 10px/1 'Courier New', monospace; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 3px; }
.show-card-description p { font-size: 12.5px; color: rgba(255,255,255,.65); margin: 0; }
.show-card-meta-row { display: flex; flex-wrap: wrap; gap: 14px; }
.show-card-meta { font-size: 13px; color: rgba(255,255,255,.7); margin: 0; }
.show-card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0; }
/* Both buttons hug their own text (padding 16px) instead of stretching to
   the card's width — the card width is a max, not a target. */
.show-card-cta, .show-card-secondary-cta {
  display: inline-flex; width: auto; min-width: 0; flex: 0 0 auto;
  white-space: nowrap; padding: 16px;
}
.show-card-cta.is-disabled { opacity: .5; cursor: not-allowed; }
.show-details { margin-top: 2px; font-size: 13px; color: rgba(255,255,255,.65); }
.show-details summary { cursor: pointer; color: #fff; }
.show-details dl { margin: 10px 0 0; }
.show-detail-row { display: grid; grid-template-columns: 140px 1fr; gap: 10px; padding: 4px 0; border-top: 1px solid rgba(255,255,255,.08); }
.show-detail-row dt { color: rgba(255,255,255,.5); }
.show-detail-row dd { margin: 0; }

@media (max-width: 460px) {
  .show-card-grid { grid-template-columns: 1fr; }
  .show-card { grid-template-columns: 1fr; max-width: none; }
  .show-card-media { grid-row: auto; aspect-ratio: 16 / 9; width: 100%; }
  /* Carousel cards keep the media+body split and peek at ~85% width so the
     next card is visible, instead of stacking full-width like grid cards. */
  .show-card-carousel .show-card { width: 85vw; max-width: 340px; grid-template-columns: 72px 1fr; }
  .show-card-carousel .show-card-media { grid-row: 1 / -1; aspect-ratio: 1 / 1; width: auto; }
}

/* ── Format cards (on /shows) ──
   auto-fit + minmax: 2 formats share the row evenly at full container width
   (same width as the section dividers); a lone card (format page's "Other
   formats") stretches to fill the row instead of sitting at minmax width. */
.format-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 24px 0; }
.format-card {
  position: relative; display: block; overflow: hidden; border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14); background: #0a0a0a;
  text-decoration: none; color: #fff;
  height: clamp(280px, 36vw, 460px);
}
.format-card-media { position: absolute; inset: 0; }
.format-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.format-card:hover .format-card-media img { transform: scale(1.05); }
.format-card-pattern {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 16px),
    radial-gradient(130% 90% at 50% 110%, rgba(255,255,255,.1), transparent 60%),
    #060606;
}
.format-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.3) 48%, transparent 72%);
}
.format-card-body { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding: 26px; }
.format-card h3 { font-family: 'PP Mondwest', Georgia, serif; font-weight: 400; font-size: clamp(26px, 3.2vw, 36px); margin: 0 0 8px; }
.format-card p { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.75); margin: 0; max-width: 34ch; }

@media (max-width: 640px) {
  .format-card-grid { grid-template-columns: 1fr; }
  .format-card { height: clamp(220px, 60vw, 340px); }
}

/* ── Past show cards ── */
.past-show-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 24px 0; }
.past-show-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: #fff; }
.past-show-cover { display: block; aspect-ratio: 4/3; border-radius: 10px; background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.02)); }
.past-show-meta { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: rgba(255,255,255,.7); }
.past-show-meta strong { color: #fff; font-size: 14px; }

/* ── Empty states / sign-up ── */
.empty-state { padding: 24px 0; color: rgba(255,255,255,.65); }
.signup-block { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.signup-block input[type=email] { flex: 1; min-width: 200px; padding: 12px 14px; background: #101012; color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 6px; font: 14px 'Courier New', monospace; }
.signup-block button { padding: 12px 18px; }

/* ── Story fragment cards ── */
.fragment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin: 20px 0 40px; }
.fragment-card { border: 1px solid rgba(255,255,255,.15); border-radius: 12px; padding: 16px; background: rgba(255,255,255,.02); }
.fragment-card img { width: 100%; border-radius: 8px; margin-bottom: 10px; opacity: .85; }
.fragment-card h4 { font-family: 'PP Mondwest', Georgia, serif; margin: 0 0 6px; font-size: 17px; }
.fragment-card p { font-size: 13px; color: rgba(255,255,255,.65); margin: 0; }

/* ── Format page hero — a background image behind the header, like a
   ticket-site event banner, when the format has one (Sound doesn't yet,
   so its header stays plain text, same as before). ── */
.editorial-intro.format-hero {
  max-width: none;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  padding: 64px 28px 32px;
  isolation: isolate;
}
.editorial-intro.format-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,5,6,.25) 0%, rgba(5,5,6,.55) 55%, rgba(5,5,6,.92) 100%);
  z-index: -1;
}
.editorial-intro.format-hero .section-kicker { color: rgba(255,255,255,.6); }
.editorial-intro.format-hero h1 { text-shadow: 0 2px 24px rgba(0,0,0,.6); }

/* ── Site footer (shared across all restructured pages) ──
   Full-bleed bar (like .info-section) with its own solid background and a
   top border, so it reads as a proper footer instead of just trailing off
   into whatever's behind the page — on Home that's a fixed WebGL canvas,
   and position+z-index here (matching .info-section) is what keeps it from
   painting over a footer that's otherwise non-positioned. The centered
   content lives in .footer-inner. */
.site-footer { position: relative; z-index: 20; background: #050505; border-top: 1px solid rgba(255,255,255,.1); }
.footer-inner { max-width: 1100px; margin: 0 auto; padding: 60px 28px 50px; text-align: center; }
.footer-support { margin-bottom: 16px; }

/* ── Home: sections live inside the existing .info-section/.info-inner
   wrapper (that's what gives them the z-index/backdrop to sit above the
   fixed prism-background canvas) — this just adds spacing between them. ── */
.home-section { padding: clamp(20px,4vw,36px) 0; }
.home-section h2 { font-family: 'PP Mondwest', Georgia, serif; font-weight: 400; font-size: clamp(24px,4vw,34px); margin: 0 0 14px; }
.home-section > p { margin: 0 0 16px; }

/* Hero's two CTAs sit side by side (hugging their own text) instead of
   .bottom-cta's default full-width stack. */
.hero-cta-pair { flex-direction: row; flex-wrap: wrap; justify-content: center; width: min(calc(100% - 32px), 580px); }
.hero-cta-pair .cta { width: auto; }

/* Homepage closing sequence: one cinematic invitation, then music,
   a compact support note and a single collaborator band. */
.info-section .next-show-banner {
  position: relative; display: flex; align-items: flex-end; justify-content: space-between;
  gap: 28px; padding: clamp(28px, 4.5vw, 52px); min-height: 380px; overflow: hidden;
  border: 0; border-radius: 16px;
  background: #171513 url('/assets/experience-car-poster.jpg') center 38%/cover;
  color: #fff; text-decoration: none; isolation: isolate;
}
.next-show-banner-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 38%; border-radius:inherit; z-index:0; pointer-events:none; }
.next-show-banner::before { content:''; position:absolute; inset:-1px; border-radius:inherit; z-index:1; background:linear-gradient(90deg,rgba(5,5,6,.83),rgba(5,5,6,.22)),linear-gradient(0deg,rgba(5,5,6,.7),transparent 75%); pointer-events:none; }
.next-show-banner-copy { position:relative; z-index:2; display:flex; flex-direction:column; gap:18px; max-width:660px; }
.next-show-banner-copy .section-kicker { margin:0; color:rgba(255,255,255,.8); }
.next-show-banner-copy strong { font:400 clamp(38px,5.5vw,68px)/.98 'PP Mondwest',Georgia,serif; letter-spacing:-.03em; }
.next-show-banner-copy > span:last-child { font:12px/1.6 'Courier New',monospace; color:rgba(255,255,255,.85); }
.next-show-banner-action { position:relative; z-index:2; flex:0 0 auto; display:inline-flex; align-items:center; gap:20px; min-height:48px; padding:0 18px; border:1px solid rgba(255,255,255,.8); border-radius:8px; background:rgba(5,5,6,.25); backdrop-filter:blur(8px); font:700 11px/1 'Courier New',monospace; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap; transition:background .25s ease; }
.next-show-banner-action span { font-size:20px; transition:transform .25s ease; }
.next-show-banner:hover .next-show-banner-action, .next-show-banner:focus-visible .next-show-banner-action { background:#fff; color:#111; }
.next-show-banner:hover .next-show-banner-action span { transform:translate(3px,-3px); }

.home-refined .social-stage { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,8vw,100px); align-items:center; padding:clamp(44px,6vw,76px) 0; }
.social-stage-intro .section-kicker { display:block; color:rgba(255,255,255,.62); margin-bottom:20px; }
.home-refined .social-stage h2 { font:400 clamp(42px,5.4vw,68px)/.98 'PP Mondwest',Georgia,serif; letter-spacing:-.03em; margin:0 0 22px; }
.home-refined .social-stage-intro p { max-width:34ch; color:rgba(255,255,255,.65); font-size:16px; line-height:1.6; margin:0; }
.social-stage-links { display:flex; flex-direction:column; }
.info-section .social-stage-links a { display:grid; grid-template-columns:62px minmax(0,1fr) 40px; gap:14px; align-items:center; min-height:78px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.18); color:#fff; text-decoration:none; transition:padding .25s ease,background .25s ease; }
.social-stage-links a:first-child { border-top:1px solid rgba(255,255,255,.18); }
.info-section .social-stage-links a:hover, .info-section .social-stage-links a:focus-visible { padding-inline:12px; background:rgba(var(--social-accent),.045); }
.social-stage-index { font:11px/1 'Courier New',monospace; color:rgba(var(--social-accent),.85); }
.social-stage-links strong { font:400 34px/1 'PP Mondwest',Georgia,serif; }
.social-stage-links [data-ga-cta="home_social_spotify"] { --social-accent:87,219,135; }
.social-stage-links [data-ga-cta="home_social_tidal"] { --social-accent:113,210,224; }
.social-stage-links [data-ga-cta="home_social_youtube"] { --social-accent:255,111,111; }
.social-stage-links [data-ga-cta="home_social_instagram"] { --social-accent:238,150,197; }
.social-stage-arrow { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; border:1px solid rgba(var(--social-accent),.24); background:rgba(var(--social-accent),.1); color:rgb(var(--social-accent)); font-size:21px; line-height:1; }
.home-support { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:56px; align-items:center; padding:56px 0; border-top:1px solid rgba(255,255,255,.17); border-bottom:1px solid rgba(255,255,255,.17); }
.home-support .section-kicker { display:block; margin:0 0 12px; color:rgba(255,255,255,.6); }
.home-refined .home-support h2 { font:400 clamp(28px,3vw,38px)/1.1 'PP Mondwest',Georgia,serif; margin:0 0 10px; }
.home-refined .home-support p { max-width:62ch; font-size:15px; line-height:1.65; color:rgba(255,255,255,.65); margin:0; }
.home-refined .home-support p + p { margin-top:12px; }
.home-support-action { display:flex; flex-direction:column; align-items:flex-start; gap:11px; }
.home-refined .home-support .cta { margin:0; width:auto; padding:15px 20px; font:11px/1.2 'Courier New',monospace; text-decoration:none; color:#fff; }
.home-support-action > span { font:11px/1.5 'Courier New',monospace; color:rgba(255,255,255,.55); }
.home-collaborators { padding:60px 0 8px; }
.home-collaborators-heading { display:flex; justify-content:space-between; align-items:baseline; gap:20px; }
.home-refined .home-collaborators h2 { font:400 26px/1.1 'PP Mondwest',Georgia,serif; margin:0; }
.home-refined .home-collaborators-heading a { font:12px/1.4 'Courier New',monospace; color:rgba(255,255,255,.72); }
.home-refined .home-collaborators .sponsors { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:center; gap:28px; margin:38px 0 0; border:0; }
.home-refined .home-collaborators .sponsors > a { border:0; padding:14px 0; min-height:0; }
.home-refined .home-collaborators .sponsors img { height:auto; max-height:25px; max-width:100%; width:auto; opacity:.75; }
.home-refined .home-collaborators .sponsor-label { font-size:10px; line-height:1.4; color:rgba(255,255,255,.5); margin-top:10px; }
.home-refined .info-inner { padding-bottom:64px; }
.home-refined .footer-inner { padding:24px 28px; }
.home-refined .footer-logo { display:flex; align-items:center; flex-wrap:wrap; gap:12px; text-align:left; }
.home-refined .footer-logo > p { margin:0 !important; font-size:10px !important; color:rgba(255,255,255,.5) !important; }
.home-refined .footer-logo > img { width:112px; height:auto; opacity:.7; }
.home-refined .site-legal-links { margin:0 0 0 auto; gap:16px; }
.home-refined .site-legal-links a { font-size:10px; color:rgba(255,255,255,.6); }
@media (prefers-reduced-motion:reduce) { .next-show-banner-video { display:none; } }

.channel-icons { display: flex; gap: 10px; justify-content: flex-start; margin-top: 18px; }
.channel-icons a {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.75); transition: border-color 250ms ease, background 250ms ease, color 250ms ease, transform 250ms ease;
}
.channel-icons a:hover { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.08); color: #fff; transform: translateY(-2px); }
.channel-icons svg { width: 18px; height: 18px; }

@media (max-width:720px) {
  .info-section .next-show-banner { flex-direction:column; align-items:flex-start; justify-content:flex-end; min-height:430px; gap:24px; }
  .next-show-banner::before { background:linear-gradient(0deg,rgba(5,5,6,.92),rgba(5,5,6,.05)); }
  .home-refined .social-stage { grid-template-columns:1fr; gap:30px; }
  .home-support { grid-template-columns:1fr; gap:24px; }
  .home-collaborators-heading { flex-direction:column; gap:12px; }
  .home-refined .home-collaborators .sponsors { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 22px; }
  .home-refined .home-collaborators .sponsors > a:last-child { grid-column:1 / -1; justify-self:center; width:160px; }
  .home-refined .site-legal-links { width:100%; margin:8px 0 0; justify-content:flex-start; flex-wrap:wrap; }
  .show-detail-row { grid-template-columns:1fr; gap:2px; }
  .editorial { padding-top:120px; }
}
@media (max-width:360px) {
  .social-stage-links strong { font-size:29px; }
  .info-section .social-stage-links a { grid-template-columns:48px minmax(0,1fr) 40px; gap:10px; }
}

/* ── Film reel: YouTube-hosted films. The 16:9 iframe is widened and centred
   so it fills the portrait reel frame, matching the live homepage. ── */
.visual-reel-frame video[hidden],
.visual-reel-frame iframe[hidden] { display: none; }
.visual-reel-frame iframe {
  position: absolute; top: 0; left: 50%;
  width: 100%; height: 100%; border: 0;
  transform: translateX(-50%);
}
.visual-reel-frame.is-youtube iframe { width: 267%; }
.visual-reel-frame.is-portrait { width: min(100%, 360px); aspect-ratio: 9 / 16; justify-self: center; }
@media (max-width: 700px) {
  .visual-reel-frame.is-youtube iframe { width: 316%; }
}

/* Home hero when the next show has poster art — the layout itself comes
   from featured-event.css (copied from the live site); this only makes our
   two-button CTA pair sit left-aligned inside it. */
.featured-event-actions.hero-cta-pair { justify-content: flex-start; width: auto; padding: 0; }

/* Show card text: `.editorial p` (17px, 16px top/bottom margin) outranks
   the bare card classes on editorial pages, which blew up the When/Where
   row and pushed the venue off the card. Scope to .show-card to win. */
.show-card .show-card-meta { font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.7); margin: 0; }
.show-card .show-card-meta-row { gap: 6px 22px; margin-bottom: 6px; }
.show-card .show-card-meta-row > div { min-width: 0; }
.show-card .show-card-address { color: rgba(255,255,255,.5); font-size: 12px; }
.show-card .show-card-description p { font-size: 12.5px; line-height: 1.5; margin: 0; }
.show-card .show-card-price { font-size: 14px; margin: 4px 0 0; }

/* Home hero key-info line: the format's title wordmark, inline and small. */
.hero-key-info { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; }
.hero-key-info .hero-title-art { display: inline-flex; }
.hero-key-info .hero-title-art img,
.postshow-hero .center-title .hero-key-info .hero-title-art img { height: 22px; width: auto; max-width: none; margin: 0; display: block; filter: none; }

/* Format page with the poster header above it: the hero already clears the
   fixed nav, so the editorial column doesn't need its own top offset. */
.editorial.editorial--after-hero { padding-top: 24px; }

/* Story: book cover beside the synopsis + Buy the book CTA; stacks on
   narrow screens with the cover on top. */
.editorial-story.story-book { grid-template-columns: minmax(180px, 260px) 1fr !important; gap: clamp(24px, 4vw, 56px); align-items: start; }
.story-book-cover { margin: 0; }
.story-book-cover img {
  display: block; width: 100%; height: auto;
  border-radius: 4px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
  transition: transform .25s ease;
}
.story-book-cover a:hover img { transform: translateY(-3px); }
@media (max-width: 720px) {
  .editorial-story.story-book { grid-template-columns: 1fr !important; }
  .story-book-cover { width: min(220px, 60vw); }
}
.story-book .postshow-actions .cta-primary { display: inline-flex; width: auto; padding: 0 28px; }

/* Story: author portrait beside "A screenplay by Horacio Bolz" — same
   two-column layout as the book cover above it. */
.story-portrait { margin: 0; }
.story-portrait img {
  display: block; width: 100%; height: auto;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
}
.story-author h2 { margin-top: 0; }
@media (max-width: 720px) {
  .story-portrait { width: min(260px, 70vw); }
}

/* Poster header on format pages: share the editorial column's edges
   (.editorial is min(1100px,100%) with 28px / 22px side padding) so the
   header's copy lines up with "Upcoming" and the sections below it.
   Doubled class beats featured-event.css, which loads after this file. */
body.featured-landing .featured-event-hero.featured-event-hero { padding-inline: 28px; }
body.featured-landing .featured-event-hero .featured-event-grid { width: min(1044px, 100%); }
@media (max-width: 720px) {
  body.featured-landing .featured-event-hero.featured-event-hero { padding-inline: 22px; }
}

/* Shared nav positioning. These normally come from postshow-base.css's bare
   `nav` rules, but /merch (and anything else that only loads postshow.css +
   ia.css) doesn't load that file, so the nav lost its fixed position and
   padding there. Stated here against the shared class so every page gets
   the same header. postshow.css zeroes the padding at <=720px. */
.postshow-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 30; }
@media (min-width: 721px) {
  .postshow-nav { padding: 20px 32px; }
}
@media (max-width: 640px) {
  .postshow-nav {
    z-index: 80;
    border-bottom: 1px solid rgba(255,255,255,0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}

/* Story: "The films" video — left-aligned with the text column (the shared
   .video-embed centers itself at 640px for Home's media grid). */
.video-embed.story-film { max-width: 820px; margin: 20px 0 0; }

/* Show collection and individual retrospectives share the editorial system. */
.shows-collection .editorial-intro > p { max-width:640px; }
.collection-jumps { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.collection-jumps a { display:inline-flex; gap:18px; padding:12px 16px; border:1px solid rgba(255,255,255,.24); border-radius:999px; color:#fff; text-decoration:none; font:12px/1 'Courier New',monospace; }
.collection-jumps span { color:rgba(255,255,255,.55); }
.collection-section { margin:56px 0 72px; scroll-margin-top:100px; }
.collection-section-head { display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.16); margin-bottom:28px; }
.editorial .collection-section-head h2 { margin:0; font-size:36px; }
.collection-section-head > span { color:rgba(255,255,255,.6); font-size:14px; }
.collection-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.collection-show { display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid rgba(255,255,255,.16); border-radius:15px; color:#fff; text-decoration:none; background:rgba(255,255,255,.025); transition:border-color .25s ease,background .25s ease; }
.collection-show:hover, .collection-show:focus-visible { border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.05); }
.collection-show-art { aspect-ratio:1; overflow:hidden; }
.collection-show-art img { width:100%; height:100%; display:block; object-fit:cover; }
.collection-show-copy { display:flex; flex-direction:column; padding:clamp(22px,3vw,36px); min-width:0; }
.collection-show-top { display:flex; justify-content:space-between; gap:12px; font:11px/1.4 'Courier New',monospace; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.72); }
.editorial .collection-show h3 { font:400 clamp(30px,4vw,48px)/1 'PP Mondwest',Georgia,serif; margin:20px 0 14px; }
.editorial .collection-show-meta { font:12px/1.6 'Courier New',monospace; color:rgba(255,255,255,.72); margin:0 0 14px; }
.editorial .collection-show-summary { font-size:15px; line-height:1.6; color:rgba(255,255,255,.65); margin:0 0 22px; }
.collection-show-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; padding-top:24px; margin-top:auto; font:12px/1.5 'Courier New',monospace; }
.collection-show-bottom > span:last-child { color:rgba(255,255,255,.58); }
.collection-show:only-child { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
.collection-show--text:only-child { grid-template-columns:1fr; }
.show-collection-back { display:inline-block; color:rgba(255,255,255,.75); font:12px/1.4 'Courier New',monospace; margin-bottom:28px; }
.show-memory-hero.has-image { max-width:none; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:48px; align-items:center; }
.show-memory-art { display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:14px; }
.show-memory-hero .cta { width:fit-content; font:12px/1.4 'Courier New',monospace; padding:15px 20px; margin-top:24px; }
#memories-section { scroll-margin-top:100px; }
@media(max-width:720px) {
 .collection-section-head { align-items:flex-start; flex-direction:column; gap:8px; }
 .collection-grid { grid-template-columns:1fr; }
 .collection-show:only-child { display:flex; }
 .show-memory-hero.has-image { grid-template-columns:1fr; gap:28px; }
 .show-memory-art { max-width:420px; }
}

/* Two featured films, preserving each supplied edit's composition. */
.film-feature { margin:24px 0 20px; }
.film-feature-tabs { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.film-feature-tabs button { display:inline-flex; align-items:center; justify-content:center; gap:22px; min-height:46px; padding:12px 20px; border:1px solid rgba(255,255,255,.25); border-radius:999px; background:rgba(255,255,255,.035); color:#fff; font:14px/1.2 Arial,sans-serif; cursor:pointer; transition:background .2s ease,border-color .2s ease; }
.film-feature-tabs button[aria-pressed=true] { background:#f7f6f2; color:#111; border-color:#f7f6f2; }
.film-feature-tabs button:hover { border-color:rgba(255,255,255,.7); }
.film-feature-tabs small { font:11px/1 'Courier New',monospace; opacity:.65; }
.film-feature-frame { margin:0; }
.film-feature-frame video { display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:contain; background:#000; border:1px solid rgba(255,255,255,.14); border-radius:12px; }
.film-feature-frame.is-portrait { max-width:360px; margin-inline:auto; }
.film-feature-frame.is-portrait video { aspect-ratio:9 / 16; }
.film-feature-frame figcaption { margin-top:10px; font:12px/1.5 'Courier New',monospace; color:rgba(255,255,255,.65); }
.show-extra-films { margin:28px 0 58px; }
.show-extra-films summary { padding:18px 0; border-top:1px solid rgba(255,255,255,.18); cursor:pointer; font:14px/1.4 'Courier New',monospace; color:rgba(255,255,255,.8); }
.show-extra-films .visual-reel-layout { margin-top:24px; }
/* A deliberate, uniform stroke over the clipped media layers. */
.next-show-banner::after { content:''; position:absolute; inset:0; z-index:3; border:2px solid rgba(255,255,255,.4); border-radius:inherit; pointer-events:none; }
.home-refined .home-support .cta-primary { background:#f7f6f2; border-color:#f7f6f2; color:#111 !important; font-weight:700; min-height:48px; }
.home-refined .home-support .cta-primary:hover { background:#fff; box-shadow:0 0 24px rgba(255,255,255,.14); }
.home-refined .home-collaborators h2 { font-size:32px; }
.home-refined .home-collaborators-heading p { font-size:14px; line-height:1.6; color:rgba(255,255,255,.65); margin:12px 0 0; }
.home-credits-row { display:flex; align-items:baseline; justify-content:space-between; gap:24px; border-top:1px solid rgba(255,255,255,.14); margin-top:40px; padding-top:32px; }
.home-credits-row > span { font-size:14px; line-height:1.5; color:rgba(255,255,255,.65); }
.home-refined .home-credits-row a { color:rgba(255,255,255,.9); }
@media(max-width:700px) {
 .film-feature-tabs { flex-wrap:nowrap; }
 .film-feature-tabs button { flex:1; min-width:0; gap:12px; padding:12px; font-size:13px; }
 .film-feature-frame { max-width:360px; margin-inline:auto; }
 .film-feature-frame video { aspect-ratio:9 / 16; }
 .home-credits-row { flex-direction:column; gap:12px; }
}

/* About uses the same restrained partner strip as the show pages. */
.editorial-story.about-partners { grid-template-columns:1fr; }
.about-partners .sponsors { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:24px; margin-top:28px; padding:28px 0; border-top:1px solid rgba(255,255,255,.15); border-bottom:1px solid rgba(255,255,255,.15); }
.about-partners .sponsors a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; min-width:0; min-height:80px; text-decoration:none; }
.about-partners .sponsors img { display:block; width:100%; max-width:140px; height:30px; object-fit:contain; opacity:.85; }
.about-partners .sponsor-label { font-size:11px; line-height:1.4; text-align:center; color:rgba(255,255,255,.58); }
@media(max-width:700px) { .about-partners .sponsors { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 20px; } .about-partners .sponsors a:last-child { grid-column:1/-1; } }

/* Give the closing chapters room while retaining their existing visual language. */
@media(max-width:720px) {
  .home-refined .home-support { padding-block:44px; gap:28px; }
  .home-refined .home-collaborators { padding-top:48px; }
  .home-refined .home-collaborators .sponsors { margin-top:30px; gap:24px 22px; }
  .home-refined .home-credits-row { margin-top:34px; padding-top:28px; gap:18px; }
  .home-refined .info-inner { padding-bottom:48px; }
}

/* The landing's film is part of the concert introduction. */
.home-discovery-film { margin-top:28px; scroll-margin-top:100px; }
.home-discovery-film .film-feature { margin:0; }
.film-feature--overlay .film-feature-media { position:relative; }
.film-feature--overlay .film-feature-tabs { position:absolute; right:16px; bottom:56px; z-index:1; margin:0; gap:8px; }
.film-feature--overlay .film-feature-tabs button { min-height:44px; gap:12px; padding:10px 16px; background:rgba(12,12,12,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-color:rgba(255,255,255,.45); box-shadow:0 2px 12px rgba(0,0,0,.2); }
.film-feature--overlay .film-feature-tabs button[aria-pressed=true] { background:#f7f6f2; color:#111; border-color:#f7f6f2; }
.film-feature--overlay .film-feature-tabs button:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.home-discovery-actions { display:flex; justify-content:flex-end; margin-top:22px; }
.home-refined .home-discovery-actions .cta { display:inline-flex; align-items:center; justify-content:center; gap:16px; width:auto; min-height:48px; padding:15px 22px; font:12px/1.4 'Courier New',monospace; text-decoration:none; text-align:center; }
.film-feature--overlay figcaption { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(max-width:700px) {
 .film-feature--overlay .film-feature-tabs { right:10px; left:10px; bottom:56px; justify-content:flex-end; gap:6px; }
 .film-feature--overlay .film-feature-tabs button { flex:0 1 auto; gap:8px; padding:10px 12px; font-size:12px; }
 .film-feature--overlay .film-feature-tabs small { font-size:10px; }
 .home-discovery-actions { justify-content:center; }
 .home-refined .home-discovery-actions .cta { max-width:100%; }
}
@media(max-width:380px) {
 .film-feature--overlay .film-feature-tabs small { display:none; }
 .film-feature--overlay .film-feature-tabs button span { white-space:nowrap; }
}

/* Floating pixel interactions share the landing's monochrome, unboxed language. */
.home-interactions { margin-top:38px; padding:14px 0 0; scroll-margin-top:100px; }
.home-interaction-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.interaction-demo { min-width:0; padding:0 12px; color:#f7f6f2; text-align:center; }
.interaction-demo-play { display:block; width:100%; padding:0; background:none; color:inherit; border:0; text-align:center; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.interaction-demo-play:focus-visible { outline:1px dashed rgba(255,255,255,.7); outline-offset:6px; }
.interaction-demo-stage { display:flex; justify-content:center; align-items:center; height:142px; }
.interaction-demo-stage svg { display:block; width:220px; max-width:100%; height:132px; overflow:visible; image-rendering:pixelated; }
.interaction-demo-title { display:inline-flex; align-items:center; justify-content:center; gap:10px; font:12px/1.5 'Courier New',monospace; color:rgba(255,255,255,.8); transition:color .2s; }
.is-playing .interaction-demo-title { color:#fff; }
.home-refined .interaction-demo .demo-description { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.home-refined .home-interaction-grid .interaction-demo a { display:block; width:fit-content; margin:10px auto 0; padding:8px 12px; font:11px/1.5 'Courier New',monospace; text-decoration:none; color:rgba(255,255,255,.5); transition:color .2s; }
.home-refined .home-interaction-grid .interaction-demo a:hover { color:#fff; }
.interaction-demo a:focus-visible { outline:1px dashed #fff; outline-offset:3px; }
.cookie-peek { opacity:.8; transition:opacity .15s; }
.is-playing .cookie-peek { opacity:0; }
.cookie-half { transition:transform .48s steps(7,end); }
.fortune-paper { opacity:0; transform:translateY(4px); transition:opacity .15s .15s,transform .38s steps(5,end); }
.cookie-sparks { opacity:0; transition:opacity .2s; }
.is-playing .cookie-left { transform:translate(-14px,2px); }
.is-playing .cookie-right { transform:translate(14px,2px); }
.is-playing .fortune-paper { opacity:1; transform:translateY(0); }
.is-playing .cookie-sparks { opacity:.65; }
.crowd-wave { opacity:.2; transition:opacity .3s; }
.wave-bar { transform-box:fill-box; transform-origin:center; transform:scaleY(.2); }
.phone-check { opacity:0; transition:opacity .3s; }
.encore-rays { opacity:0; }
.is-playing .crowd-wave { opacity:.9; }
.is-playing .wave-bar { animation:demo-wave .7s var(--beat) steps(4,end) infinite alternate; }
.is-playing .phone-light { animation:demo-phone 1.8s steps(4,end) infinite alternate; }
.is-playing .phone-1 .phone-light { animation-delay:.3s; }
.is-playing .phone-2 .phone-light { animation-delay:.6s; }
.is-playing .phone-check { opacity:1; }
.is-playing .encore-rays { animation:demo-rays 1.8s steps(2,end) infinite; }
.memory-pin { transform-box:fill-box; transform-origin:center; }
.memory-photo { opacity:0; transform:translateY(4px); transition:opacity .22s,transform .45s steps(4,end); }
.is-playing .memory-pin { animation:demo-pin 1.5s var(--beat) steps(2,end) infinite; }
.is-playing .memory-photo { opacity:1; transform:translateY(0); }
.is-playing .photo-1 { transition-delay:.15s; }
.is-playing .photo-2 { transition-delay:.3s; }
@keyframes demo-wave { to { transform:scaleY(1); } }
@keyframes demo-phone { to { opacity:.5; } }
@keyframes demo-rays { 0%,30%,100% { opacity:0; } 50%,75% { opacity:.7; } }
@keyframes demo-pin { 50% { opacity:.4; } }
@media(max-width:760px) {
 .home-interaction-grid { gap:6px; }
 .interaction-demo { padding:0; }
 .interaction-demo-stage { height:106px; }
 .interaction-demo-stage svg { width:150px; height:auto; }
 .interaction-demo-title { font-size:10px; gap:5px; }
 .home-refined .home-interaction-grid .interaction-demo a { font-size:10px; padding:8px 4px; }
 .home-interactions { margin-top:30px; }
}
@media(max-width:380px) {
 .home-interaction-grid { gap:3px; }
 .interaction-demo-title { font-size:9px; gap:3px; }
 .interaction-demo-stage { height:90px; }
 .home-refined .home-interaction-grid .interaction-demo a { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) {
 .interaction-demo,.interaction-demo * { animation:none !important; transition:none !important; }
 .is-playing .wave-bar { transform:scaleY(1); }
 .is-playing .phone-light { opacity:.5; }
 .is-playing .encore-rays { opacity:.6; }
}

/* Homepage hero, content and footer share one set of desktop edges. */
@media(min-width:721px) {
  body.home-refined .featured-event-hero.featured-event-hero { padding-inline:0; }
  body.home-refined .featured-event-hero .featured-event-grid {
    width:min(1180px,100%); padding-inline:clamp(24px,4vw,52px); box-sizing:border-box;
  }
  .home-refined .footer-inner { max-width:1180px; padding-inline:clamp(24px,4vw,52px); }
  .home-refined .home-support-action { align-items:flex-end; text-align:right; }
  .support-layout .support-form { padding-top:0; border-top:0; }
  .support-layout > section > h2, .support-layout > .support-form > h2 { margin-top:0; }
}
@media(min-width:721px) and (max-width:900px) {
  body.home-refined .featured-event-hero .featured-event-grid,
  .home-refined .footer-inner { padding-inline:28px; }
}