/* ==========================================================================
   Pittsburgh Opera homepage concept — page styles
   Visual source of truth: Pittsburgh Opera Homepage.dc.html (approved design).
   Built on tokens.css; where the design and tokens.css disagree the token
   wins (each instance flagged in the parity report):
   - hero panel scrim: --po-scrim 0.55 (design shows 0.60)
   - footer contained panels: --po-scrim-panel 0.72 (design shows 0.60)
   - .po-btn border 2px (design shows 1px)
   - .po-link weight 700 (design shows 800 on CTA links)
   - .po-input 1px grey border (design input is borderless white)
   Unnamed design alphas carried verbatim: footer band scrim 0.35,
   plan-your-visit label scrim 0.65.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body { margin: 0; font-size: 1.125rem; line-height: 1.55; }

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

/* Design column: 1240px content + 24px gutters (design measures content-box) */
.wrap { max-width: 1288px; margin: 0 auto; padding: 0 24px; }

/* Accessible skip link */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--po-accent); color: var(--po-canvas);
  padding: 10px 16px; font-weight: 700; text-transform: uppercase;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Band scaffolding ---------------------------------------------------------*/
.band { position: relative; padding-block: 48px; } /* bands flow together on the shared black canvas — no rules between bands */
.band-head h2 {
  margin: 0 0 24px;
  font-size: clamp(2.125rem, 4vw, 3.125rem);
  line-height: 1.05;
}
.eyebrow {
  font-weight: var(--po-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.9375rem;
  line-height: 1.2;
  color: var(--po-accent);
  margin: 0;
}

.band-foot { margin-top: 24px; }
.band-foot .po-link { font-size: 0.9375rem; letter-spacing: 0.04em; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }

/* Card / tile links */
.card-link { font-size: 0.875rem; letter-spacing: 0.04em; min-height: 40px; display: inline-flex; align-items: center; gap: 8px; }

/* ==========================================================================
   HEADER (Band 1)
   Fixed, two-row, hides on scroll down / shows on scroll up.
   ========================================================================== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--po-canvas);
  transition: transform 260ms ease;
}
/* Reduced motion: hide/show still functions, just without the slide */
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}
.site-header.is-hidden { transform: translateY(-100%); }

/* Utility (top) row — no rules above or below the nav row; the solid black
   header background and spacing carry the separation */
.utility-bar { }
.utility-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 24px; flex-wrap: wrap; padding: 10px 0;
}
.logo-lockup { text-decoration: none; display: inline-flex; align-items: center; padding: 6px 0; }
.logo-lockup img { height: 36px; width: auto; } /* per design; asset native 460x63 */

/* Mobile logo bar (hidden on desktop): one clean row — compact lockup left,
   hamburger right. Utility links live inside the opened menu on mobile. */
.mobile-logo-bar {
  display: none; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: var(--po-canvas);
}
.logo-mobile { display: block; }
.logo-mobile img { width: 170px; height: auto; }

/* Mobile only: compact utility group at the top of the opened menu */
.drawer-utils { display: none; }

.utility-links { display: flex; align-items: center; gap: 4px 24px; flex-wrap: wrap; }
.util {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--po-white); text-decoration: none;
  text-transform: uppercase; font-weight: var(--po-weight-extrabold);
  font-size: 0.8125rem; letter-spacing: 0.08em;
  min-height: 44px;
}
.util svg { width: 15px; height: 15px; fill: currentColor; }
.util:hover { color: var(--po-accent); }
.util--give { /* header GIVE NOW: live-site computed metrics — ~28px tall,
                 5x13 padding, 17px extrabold blue on transparent, 1px accent
                 border (live renders a 0.8px outline), 8px radius; fills
                 solid accent with dark text on hover (.po-btn--secondary).
                 Live computes weight 900; the kit's heaviest licensed weight
                 is 800, so 800 renders (no faux bold). */
  padding: 5px 13px; min-height: 0; letter-spacing: 0.04em;
  font-size: 1.0625rem; line-height: 1; justify-content: center;
  font-weight: var(--po-weight-extrabold);
  border-width: 1px;
  color: var(--po-accent);
}

/* Primary nav (bottom) row */
.nav-row { position: relative; }
.nav-row > .wrap { position: relative; } /* mega panels align to the nav container, not the viewport */
.primary-nav { display: flex; }
.primary-nav > ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 0; flex-wrap: wrap;
  width: max-content; /* mega panels span exactly the item list, About -> Facilities */
  position: relative;
}
.nav-item:last-child > .nav-top { margin-right: 0; }
.nav-item { position: static; }
.nav-item > .nav-top {
  display: inline-flex; align-items: center;
  min-height: 56px; padding: 3px 0 0; margin-right: 34px;
  color: var(--po-white);
  text-transform: uppercase; text-decoration: none;
  font-weight: var(--po-weight-bold); font-size: 1rem; letter-spacing: 0.04em;
  white-space: nowrap;
}
.nav-item > .nav-top:hover { color: var(--po-accent); }

/* Sliding hover indicator: one accent bar easing between items (live-site
   behavior). Reduced motion: it fades per item instead of sliding. */
.nav-indicator {
  position: absolute; bottom: 0; left: 0;
  height: 3px; width: 0;
  background: var(--po-accent);
  opacity: 0;
  transform: translateX(0);
  transition: transform 200ms ease-out, width 200ms ease-out, opacity 150ms linear;
  will-change: transform, width;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .nav-indicator { transition: opacity 150ms linear; }
}

.acc-toggle { display: none; }

/* Mega menu panel — slate panel spanning the nav item list. Slate separates
   cleanly from the black header on its own, so the old border is dropped. */
.mega {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--po-slate);
  border-radius: 0 0 var(--po-radius-panel) var(--po-radius-panel);
  padding: 36px 40px;
  display: none;
  z-index: 90;
}
.nav-item:hover > .mega,
.nav-item:focus-within > .mega { display: grid; }
.mega { grid-template-columns: 1fr 279px; gap: 48px; align-items: start; } /* every panel carries the promo unit */

.mega ul {
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: 48px;
}
.mega li { break-inside: avoid; }
.mega a {
  color: var(--po-white); text-decoration: none;
  font-size: 1.0625rem; font-weight: var(--po-weight-regular);
  display: block; padding: 9px 0; line-height: 1.3;
}
.mega a:hover { /* slate surface: text stays white (accent is 4.43:1 there,
  below the 4.5:1 text minimum); the accent underline is non-text decoration
  and clears 3:1 */
  color: var(--po-white);
  text-decoration: underline;
  text-decoration-color: var(--po-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Mega promo unit (Seasons) — native 279px image, caption, trailing-arrow link */
.mega-promo { width: 279px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.mega-promo img { width: 279px; height: auto; border-radius: var(--po-radius-panel); }
.mega-promo p {
  color: var(--po-grey-100); font-size: 1rem; font-weight: var(--po-weight-bold); line-height: 1.3;
  margin: 0;
}
.mega-promo .po-link { font-size: 0.875rem; letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 8px; }
.mega .mega-promo .po-link { /* bold like the News card links, but white:
  accent TEXT fails AA on slate (4.43:1) */
  color: var(--po-white);
  font-weight: var(--po-weight-bold);
}
/* Rollover underlines the label only, never the arrow (the inline-flex link
   would otherwise propagate the underline to the arrow flex item) */
.mega .mega-promo .po-link:hover { text-decoration: none; }
.mega .mega-promo .po-link:hover .label { text-decoration: underline; }

/* Mobile hamburger */
.hamburger {
  display: none;
  flex: none;
  position: relative;
  width: 44px; height: 44px;
  background: transparent; border: 0; cursor: pointer;
  padding: 10px;
}
.hamburger span {
  display: block; height: 3px; background: var(--po-white);
  margin: 5px 0; border-radius: 2px; transition: 0.2s;
}
/* Open state: symmetrical X — two equal-length bars crossing at the button
   center, each rotated 45deg about their shared center */
.site-header.nav-open .hamburger span {
  position: absolute; left: 10px; right: 10px; top: 50%; margin: 0;
  transform-origin: center;
}
.site-header.nav-open .hamburger span:nth-child(1) { transform: translateY(-50%) rotate(45deg); }
.site-header.nav-open .hamburger span:nth-child(2) { opacity: 0; }
.site-header.nav-open .hamburger span:nth-child(3) { transform: translateY(-50%) rotate(-45deg); }

/* Header spacer height is set from the real header height by JS */
.header-spacer { height: 114px; }

/* ==========================================================================
   HERO (Band 2) — full-width square image band; rounded translucent content
   panel on the right, over the image's negative space. Flat scrim, no
   gradients. Height per design: min(56vh, 540px), floor 440px.
   ========================================================================== */
.hero {
  position: relative;
  padding-block: 0;
  border-radius: var(--po-radius-band);
  background-color: var(--po-canvas);
  /* background-image set inline by the hero template from the ACF field */
  background-size: cover;
  background-position: 50% 30%;
  height: min(56vh, 540px);
  min-height: 440px;
  display: flex; align-items: center;
  overflow: hidden;
}
.hero > .wrap { width: 100%; display: flex; justify-content: flex-end; padding-block: 40px; }
.hero__panel {
  background: var(--po-scrim); /* token 0.55 wins over design 0.60 — flagged */
  border-radius: var(--po-radius-panel);
  padding: 32px 36px;
  width: min(672px, 100%);
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}
.hero__title {
  font-family: var(--po-font);
  font-weight: var(--po-weight-extrabold);
  text-transform: uppercase;
  color: var(--po-white);
  margin: 0;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.02;
  max-width: 20ch;
}
.hero__credit { color: var(--po-grey-100); font-weight: var(--po-weight-regular); font-size: 1.375rem; line-height: 1.3; margin: 0; }
.hero__dates {
  color: var(--po-accent); font-weight: var(--po-weight-bold);
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.9375rem; margin: 0;
}
.hero__tagline { color: var(--po-grey-100); font-size: 1.375rem; line-height: 1.4; margin: 0; max-width: 46ch; }
.hero__cta { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.hero__cta .po-btn--primary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 28px; font-size: 0.9375rem; letter-spacing: 0.04em;
}
.hero__cta .po-link { font-size: 0.9375rem; letter-spacing: 0.04em; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }

/* ==========================================================================
   SPOTLIGHT TILES (Band 3) — black tile bodies with hairline borders,
   200px image strips, first tile carries the wider column and larger label.
   ========================================================================== */
.spotlight-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 16px; align-items: stretch;
}
.spot-tile {
  border-radius: var(--po-radius-panel);
  overflow: hidden;
  background: var(--po-canvas);
  border: 1px solid var(--po-rule-dark);
  display: flex; flex-direction: column;
}
.spot-tile__media { height: 200px; flex: none; background: var(--po-grey-400); overflow: hidden; }
.spot-tile__media img { width: 100%; height: 100%; object-fit: cover; }
/* 26-27 season collage: keep the top row of faces in frame */
.spot-tile:first-child .spot-tile__media img { object-position: 50% 0; }
.spot-tile__body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.spot-tile__label {
  font-weight: var(--po-weight-extrabold); text-transform: uppercase;
  font-size: 1.25rem; line-height: 1.1; color: var(--po-white); margin: 0;
}
.spot-tile:first-child .spot-tile__label { font-size: 1.625rem; }
.spot-tile__copy { color: var(--po-grey-100); font-size: 0.9375rem; line-height: 1.55; margin: 0; }
.spot-tile .spot-tile__foot { margin-top: auto; padding-top: 8px; }

/* ==========================================================================
   SEASON LIST (Band 4) — featured first row (larger thumb + title), then
   uniform rows. Panel-grey rules between rows.
   ========================================================================== */
.season-list { display: flex; flex-direction: column; }
.season-row {
  display: flex; align-items: center; gap: 16px 28px; flex-wrap: wrap;
  padding: 14px 0;
  border-top: 1px solid var(--po-grey-400);
  text-decoration: none;
}
.season-row--featured { padding: 20px 0; }
.season-list .season-row:last-child { border-bottom: 1px solid var(--po-grey-400); }
.season-row__thumb {
  width: 176px; flex: none; aspect-ratio: 16 / 9;
  border-radius: var(--po-radius-panel); overflow: hidden;
  background: var(--po-grey-400);
}
.season-row--featured .season-row__thumb { width: 240px; }
.season-row__thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 300ms ease-out; /* subtle zoom inside the fixed rounded mask */
}
.season-row:hover .season-row__thumb img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .season-row__thumb img { transition: none; }
}
.season-row__title {
  font-weight: var(--po-weight-bold); text-transform: uppercase;
  color: var(--po-white); font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.1;
  transition: color 120ms ease;
}
.season-row--featured .season-row__title {
  font-weight: var(--po-weight-extrabold);
  font-size: clamp(1.75rem, 3.4vw, 2.625rem); line-height: 1.05;
}
.season-row__right { margin-left: auto; display: inline-flex; align-items: baseline; gap: 20px; }
.season-row__dates {
  color: var(--po-accent); text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.9375rem; font-weight: var(--po-weight-bold);
}
.season-row__arrow {
  color: var(--po-accent); font-weight: var(--po-weight-extrabold);
  font-size: 1.375rem; line-height: 1;
  transition: transform 120ms ease;
}
.season-row:hover .season-row__title { color: var(--po-accent); }
.season-row:hover .season-row__arrow { transform: translateX(6px); }

/* ---- Seasons landing cards: image-led grid, live-page parity (image,
        title, dates), two-up on desktop (2-2-1), one-up on phones. Cards
        keep .season-row so the reveal observer and base hover behaviors
        carry over; the whole card is the link. ---- */
.season-list--cards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 32px;
}
.season-list--cards .season-row {
  display: block; padding: 0; border: 0;
  text-decoration: none;
}
.season-list--cards .season-row:last-child { border-bottom: 0; }
/* Fixed mask: block-level (an inline <a>/<span> drops vertical margins —
   the rev-2 zero-gap bug), 16px radius + overflow hidden at EVERY width so
   the 1.05 hover zoom scales inside and never paints over the title. Only
   the viewport-flush structural surface goes square below 600px; images
   inside the padded well keep their radius. */
.season-list--cards .season-row__thumb {
  display: block; width: 100%; aspect-ratio: 392 / 238;
  margin: 0 0 14px;
  border-radius: var(--po-radius-panel); overflow: hidden;
}
.season-list--cards .season-row__title {
  display: block; color: var(--po-slate);
  font-weight: var(--po-weight-extrabold);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.1;
}
.season-list--cards .season-row__dates { display: block; margin-top: 8px; }
.season-list--cards .season-row__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.9375rem; letter-spacing: 0.04em; }
.season-list--cards .season-row:hover .season-row__more .arrow { transform: translateX(4px); }
/* Touch devices: tap-triggered zoom serves no purpose */
@media (hover: none) {
  .season-list--cards .season-row__thumb img { transition: none; }
  .season-list--cards .season-row:hover .season-row__thumb img { transform: none; }
}
@media (max-width: 599px) {
  .season-list--cards { grid-template-columns: 1fr; gap: 32px; }
}

/* ==========================================================================
   NEWS (Band 5) — featured card left (black body, hairline border), four
   compact rows right with panel-grey rules.
   ========================================================================== */
.news-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: stretch; }
.news-feature {
  border-radius: var(--po-radius-panel); overflow: hidden;
  background: var(--po-canvas); border: 1px solid var(--po-rule-dark);
  display: flex; flex-direction: column;
}
.news-feature__media { aspect-ratio: 16 / 9; background: var(--po-grey-400); overflow: hidden; }
.news-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.news-feature__body { padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.news-feature h3 {
  font-weight: var(--po-weight-bold); text-transform: none;
  color: var(--po-white); font-size: 1.625rem; line-height: 1.25; margin: 0;
}
.news-stack { display: flex; flex-direction: column; justify-content: space-between; }
.news-item {
  display: flex; align-items: center; gap: 20px;
  padding: 14px 0; border-bottom: 1px solid var(--po-grey-400);
}
.news-item:first-child { padding-top: 0; }
.news-item:last-child { border-bottom: 0; padding-bottom: 0; }
.news-item__thumb {
  width: 132px; flex: none; aspect-ratio: 4 / 3;
  border-radius: var(--po-radius-panel); overflow: hidden;
  background: var(--po-grey-400);
}
.news-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-item__body { display: flex; flex-direction: column; gap: 8px; }
.news-item h3 {
  font-weight: var(--po-weight-bold); text-transform: none;
  color: var(--po-white); font-size: 1.1875rem; line-height: 1.3; margin: 0;
}

/* ==========================================================================
   PLAN YOUR VISIT (Band 6) — five uniform 4:3 tiles, label over a flat
   scrim bar at the bottom, arrow bottom right.
   ========================================================================== */
.visit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.visit-tile {
  position: relative; display: flex; flex-direction: column;
  aspect-ratio: 4 / 3;
  border-radius: var(--po-radius-panel); overflow: hidden;
  background: var(--po-grey-400);
  text-decoration: none;
}
.visit-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.visit-tile__label {
  position: relative; margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px;
  /* uniform bar height across all five tiles: fits the tallest two-line
     label (2 lines x 17px x 1.2 lh + vertical padding); shorter labels
     center vertically within it */
  min-height: calc(1.0625rem * 1.2 * 2 + 28px);
  background: rgba(0, 0, 0, 0.65); /* design value; no matching token — flagged */
}
.visit-tile__label span:first-child {
  color: var(--po-white); font-weight: var(--po-weight-extrabold);
  text-transform: uppercase; font-size: 1.0625rem; line-height: 1.2;
  transition: color 120ms ease;
}
.visit-tile__label .arrow { color: var(--po-accent); font-weight: var(--po-weight-extrabold); font-size: 1.25rem; line-height: 1; transition: transform 120ms ease; }
.visit-tile:hover .visit-tile__label span:first-child { color: var(--po-accent); }
.visit-tile:hover .visit-tile__label .arrow { transform: translateX(5px); }

/* ==========================================================================
   BAND 7 — E-UPDATES + FOOTER. Stage photo anchored bottom behind the whole
   band, light flat band scrim (design 0.35); content sits on contained dark
   panels (--po-scrim-panel).
   ========================================================================== */
.site-footer {
  position: relative;
  overflow: hidden;
  background-color: var(--po-canvas);
  /* Photographic top-fade scrim: solid black at the image's top edge easing
     out at ~1/3 of the image height, so the photo melts into the canvas
     above with no seam. Permitted per the amended DS rule (gradients stay
     banned on UI surfaces; photographic blend scrims are allowed). Desktop
     cover is height-driven, so the image's top edge is the band's top. */
  /* --po-footer-image is set inline by footer.php from Site Options */
  background-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 33.3%),
    var(--po-footer-image);
  background-size: 100% 100%, cover;
  background-position: center top, center bottom; /* anchor to reveal the stage, per live site */
  background-repeat: no-repeat, no-repeat;
  border-radius: var(--po-radius-band);
}
/* No scrim: measured over the real footer-FPO.jpg pixels, every text element
   passes WCAG AA at its glyph positions (text sits over the dark auditorium
   and black canvas; the bright stage lives in the unencumbered window). */
.footer-scrim { position: relative; }
.footer-window { height: clamp(260px, 22vw, 320px); }
.footer__inner { position: relative; padding: 48px 24px 24px; display: flex; flex-direction: column; gap: 16px; }

/* E-updates signup — contained dark panel */
/* One signup module: heading + field + GO as a single tight cluster, aligned
   to the footer content grid, sitting close to the columns below */
.eupdates {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 12px 24px; flex-wrap: wrap;
  padding: 0;
}
.eupdates h2 { margin: 0; font-size: 2.125rem; line-height: 1.05; }
/* Field + GO always share one line: the field flexes up to its cap, GO fixed.
   min-width: 0 lets the form shrink below the field's 420px preferred size
   on narrow screens instead of being floored at its content width. */
.eupdates form { display: flex; gap: 8px; flex-wrap: nowrap; flex: 0 1 auto; min-width: 0; }
.eupdates .po-input { flex: 0 1 420px; min-width: 0; width: 420px; height: 48px; font-size: 0.9375rem; }
.eupdates .po-btn {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; font-size: 0.9375rem; letter-spacing: 0.04em;
}

/* Main footer panel */
.footer-top {
  padding: 16px 32px 32px 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px;
  align-items: start;
}
.footer-logo img { width: 200px; height: auto; margin-bottom: 20px; }
.footer-address {
  font-style: normal;
  color: var(--po-grey-100); text-transform: uppercase; letter-spacing: 0.03em;
  font-size: 0.9375rem; line-height: 1.7; font-weight: var(--po-weight-regular);
}
.footer-social { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 16px; margin-left: -11px; }
.footer-social a {
  width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--po-grey-100);
}
.footer-social a:hover { color: var(--po-accent); }
.footer-social svg { width: 27px; height: 27px; fill: currentColor; }

.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; }
.footer-links a { font-size: 1.0625rem; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
/* .po-footer a color handled by tokens.css (grey-100 -> white on hover) */

/* All four footer-area buttons (BUY TICKETS / GIVE NOW / SUBSCRIBE / GO) share
   the token secondary treatment exactly; the .po-footer link color rule would
   otherwise repaint the anchor buttons grey */
.po-footer .po-btn--secondary { color: var(--po-white); }
.po-footer .po-btn--secondary:hover { color: var(--po-canvas); }

.footer-actions { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.footer-actions .po-btn {
  width: 262px; max-width: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 20px; font-size: 0.9375rem; letter-spacing: 0.04em;
}

.footer-bottom {
  position: relative;
  padding: 14px 4px;
  color: var(--po-grey-100); font-size: 0.8125rem;
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* ==========================================================================
   SCROLL REVEALS — subtle fade + 20px rise, once per element, staggered.
   Above-the-fold elements (hero children, spotlight tiles) are pre-hidden
   by CSS from first paint under html.js, so the load choreography is always
   human-visible; :where() keeps specificity at (0,1,0) so .rv.in wins.
   Without JS the .js class never lands and everything renders visible.
   Below-the-fold elements get .rv from JS as before.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js :where(.hero__panel > *, .spotlight-grid .spot-tile) {
    opacity: 0; transform: translateY(20px);
  }
}
.rv { opacity: 0; transform: translateY(20px); transition: opacity 450ms ease-out, transform 450ms ease-out; }
.rv.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .primary-nav > ul { flex-direction: column; width: 100%; }
}

/* Switch to mobile header + accordion nav: one clean row (compact lockup +
   hamburger); GIVE NOW / LOGIN / CALENDAR / SEARCH move into the opened menu */
@media (max-width: 1080px) {
  .logo-lockup { display: none; }
  .mobile-logo-bar { display: flex; }
  .hamburger { display: inline-block; }

  .utility-bar { display: none; }

  .drawer-utils {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 6px 16px; align-items: center;
    padding: 18px 20px 12px;
    border-bottom: 1px solid var(--po-rule-dark);
  }
  .drawer-utils .util {
    color: var(--po-accent);
    font-size: clamp(15px, 4.6vw, 20px); /* sized so every item holds one line at 360-390 */
    min-height: 44px;
    white-space: nowrap;
  }
  .drawer-utils .util:nth-child(even) { justify-self: end; }
  .drawer-utils .util svg { width: 20px; height: 20px; }

  .nav-row {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--po-canvas);
    border-top: 1px solid var(--po-rule-dark);
    max-height: 0; overflow: hidden;
    transition: max-height 260ms ease;
  }
  .site-header.nav-open .nav-row { max-height: calc(100vh - var(--header-h, 220px)); overflow-y: auto; }

  .primary-nav > ul { gap: 0; }
  .nav-item { border-top: 1px solid var(--po-rule-dark); position: relative; }
  .nav-item > .nav-top {
    padding: 16px 20px; margin-right: 0; border-bottom: 0; width: 100%;
    justify-content: flex-start; min-height: 56px;
  }
  .nav-item.is-active > .nav-top { border-bottom: 0; color: var(--po-accent); }

  /* accordion caret */
  .acc-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; right: 8px; top: 6px;
    width: 44px; height: 44px;
    background: transparent; border: 0; cursor: pointer; color: var(--po-white);
    font-size: 20px;
  }

  .nav-indicator { display: none; }

  /* mega -> accordion body, disable hover reveal */
  .mega {
    position: static; display: none; border: 0; border-radius: 0;
    background: var(--po-canvas); min-width: 0; width: auto; max-width: none;
    padding: 0 20px 18px; grid-template-columns: 1fr;
  }
  .nav-item:hover > .mega,
  .nav-item:focus-within > .mega { display: none; }
  .nav-item.open > .mega { display: block; }
  .nav-item.open .acc-toggle { transform: rotate(180deg); }

  .mega ul { columns: 1; }
  /* 44px minimum touch target on drawer child links (was 42px) */
  .mega a { color: var(--po-grey-100); padding: 10px 0; min-height: 44px; display: inline-flex; align-items: center; }
  .mega a:hover { color: var(--po-accent); }
  .mega-promo { display: none; } /* promo irrelevant in mobile accordion */
}

@media (max-width: 960px) {
  .spotlight-grid { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .season-row__right { margin-left: 0; }
}

@media (max-width: 600px) {
  /* Footer photo reads at viewport width on phones (full composition, no
     cover zoom): one image, no tiling, anchored just above the copyright
     bar so the (c) line stays on the black canvas — measured AA without a
     flat scrim. The top-fade starts at the image's top edge (100% width
     image is ~44.3vw tall) and eases out a third of the way in. */
  .site-footer {
    background-image:
      linear-gradient(to bottom,
        rgba(0, 0, 0, 1) calc(100% - 44px - 44.3vw),
        rgba(0, 0, 0, 0) calc(100% - 44px - 29.5vw)),
      var(--po-footer-image);
    background-size: 100% 100%, 100% auto;
    background-position: center top, center bottom 44px;
    background-repeat: no-repeat, no-repeat;
  }
  .footer-window { height: 150px; }

  .hero { min-height: 420px; }
  .hero > .wrap { justify-content: center; }
  .hero__panel { padding: 28px 24px; }
  .hero__title { font-size: clamp(2.5rem, 11vw, 3rem); }
  .season-row__thumb, .season-row--featured .season-row__thumb { width: 120px; }
  /* Form takes its own row under the heading; field + GO stay on one line.
     The Forminator selector must out-rank the desktop
     .eupdates .forminator-ui.forminator-custom-form { flex: 1 } (basis 0%),
     or the form shares the heading's row and the field collapses. */
  .eupdates form,
  .eupdates form.forminator-ui.forminator-custom-form { flex-basis: 100%; }
  /* Concept: field flexes to fill the row, GO fixed at its content width.
     Without this, the base .forminator-row { flex: 1 } splits the form
     50/50 between the field row and the button row. Double class beats the
     base rule, which is equal-specificity but later in the file. */
  .eupdates .forminator-ui .forminator-row.forminator-row-last { flex: 0 0 auto; }
  .footer-actions .po-btn { width: 100%; }
}

/* ==========================================================================
   WP PORT EXTENSIONS — components the homepage concept did not need.
   Tokens only: no new colors, radii, shadows, or gradients (DS v3 rules).
   ========================================================================== */

/* ---- Interior page hero: homepage hero treatment, shorter, title over the
        flat scrim panel. hero--titleband = no image, plain black band. ---- */
.hero--interior {
  height: min(34vh, 320px);
  min-height: 240px;
}
.hero--interior > .wrap { justify-content: flex-start; }
.hero--interior .hero__panel { max-width: 640px; }
.hero--interior .hero__title { font-size: clamp(2rem, 4.5vw, 3.25rem); }
.hero--titleband { background-image: none; }
.hero--titleband .hero__panel { background: none; padding-inline: 0; }

/* ---- Long-form prose (interior page content) ---- */
.po-prose {
  max-width: 76ch;
  color: var(--po-grey-100);
}
.po-prose h2, .po-prose h3, .po-prose h4 {
  color: var(--po-white);
  text-transform: uppercase;
  font-weight: var(--po-weight-extrabold);
  margin: 1.6em 0 0.6em;
}
.po-prose h2 { font-size: 1.5rem; }
.po-prose h3 { font-size: 1.25rem; }
.po-prose h4 { font-size: 1.05rem; }
.po-prose p, .po-prose ul, .po-prose ol { margin: 0 0 1em; }
.po-prose a { color: var(--po-accent); text-decoration: underline; text-underline-offset: 3px; }
.po-prose a:hover { color: var(--po-white); }
.po-prose img { border-radius: var(--po-radius-panel); height: auto; }
.po-prose hr { border: 0; border-top: 1px solid var(--po-rule-dark); margin: 2em 0; }
.po-prose blockquote {
  border-left: 3px solid var(--po-accent);
  margin: 1.5em 0; padding: 0.25em 0 0.25em 1.25em;
  color: var(--po-white);
}
.po-prose table {
  width: 100%; border-collapse: collapse; margin: 0 0 1.5em;
  font-size: 0.95rem;
}
.po-prose th {
  text-transform: uppercase; font-weight: var(--po-weight-bold);
  color: var(--po-white); text-align: left;
}
.po-prose th, .po-prose td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--po-rule-dark);
}
.po-prose .table-scroll { overflow-x: auto; }

/* ---- Interior content band ---- */
.band--content { padding-block: 48px 72px; }

/* ---- Accordion (slide downs): native details/summary, tokens only ---- */
.po-accordion { margin: 24px 0; clear: both; width: 100%; }
.po-accordion__item {
  border: 1px solid var(--po-rule-dark);
  border-radius: var(--po-radius-panel);
  margin-bottom: 12px;
  background: var(--po-canvas);
  overflow: hidden;
}
.po-accordion__title {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px;
  color: var(--po-white);
  text-transform: uppercase;
  font-weight: var(--po-weight-bold);
  letter-spacing: 0.04em;
  min-height: 44px;
}
.po-accordion__title::-webkit-details-marker { display: none; }
.po-accordion__title:hover { color: var(--po-accent-deep); }
.po-accordion__marker {
  flex: 0 0 auto; position: relative; width: 14px; height: 14px;
}
.po-accordion__marker::before,
.po-accordion__marker::after {
  content: ""; position: absolute; background: currentColor;
  top: 50%; left: 50%; translate: -50% -50%;
}
.po-accordion__marker::before { width: 14px; height: 2px; }
.po-accordion__marker::after { width: 2px; height: 14px; transition: opacity 200ms ease-out; }
.po-accordion__item[open] > .po-accordion__title { color: var(--po-accent-deep); }
.po-accordion__item[open] > .po-accordion__title .po-accordion__marker::after { opacity: 0; }
.po-accordion__content { padding: 4px 22px 22px; }
@media (prefers-reduced-motion: reduce) {
  .po-accordion__marker::after { transition: none; }
}

/* ---- Cast & Artistic Team headshot grid: styles the migrated EE
        .twocol/.left-col/.right-col markup (the theme had none, so
        headshots stacked full width). Two quirks of the migrated markup
        shape these rules: each .twocol NESTS inside the previous one
        (unclosed divs in the source), and the artistic-team text list is
        a direct child of a nested .twocol. So: every child spans the
        full grid by default (keeps the text list single column, lets
        nested containers restart their own two columns), and only
        .left-col/.right-col take a column each. Live-site parity: two
        columns on desktop, one below 600px. ---- */
.po-accordion__content .twocol {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
}
.po-accordion__content .twocol > * { grid-column: 1 / -1; }
.po-accordion__content .twocol > .left-col { grid-column: 1; }
.po-accordion__content .twocol > .right-col { grid-column: 2; }
.po-accordion__content .twocol img {
  max-width: 100%; height: auto !important; /* beats the inline 240px height; aspect-ratio keeps the square when the column caps the width */
  aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--po-radius-panel); /* tiles inside the well stay rounded at every width */
  margin-bottom: 8px;
}
/* Caption sits tight under its own image: the theme's global img
   { display: block } already wraps the caption to a new line, so the
   markup's separator <br> only adds a blank line that pushes the caption
   toward the NEXT photo. Suppress it in headshot cells only (the
   artistic-team list's real <br> line breaks are outside .left/.right-col);
   the cell's paragraph then carries the row spacing below the caption. */
.po-accordion__content .twocol .left-col br,
.po-accordion__content .twocol .right-col br { display: none; }
.po-accordion__content .twocol .left-col p,
.po-accordion__content .twocol .right-col p { margin-bottom: 32px; }
/* 44px tap target on artist links without shifting the caption line */
.po-accordion__content .twocol a { display: inline-block; padding-block: 10px; margin-block: -10px; }
@media (max-width: 599px) {
  .po-accordion__content .twocol > .left-col,
  .po-accordion__content .twocol > .right-col { grid-column: 1 / -1; }
}

/* ---- Show single: performances table + meta ---- */
.show-meta { display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: baseline; margin: 0 0 8px; }
.show-meta .hero__dates { margin: 0; }
.performances { margin: 32px 0; }
.performances h2 { font-size: 1.5rem; }
.performance-row {
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--po-rule-dark);
}
.performance-row__date { color: var(--po-white); font-weight: var(--po-weight-bold); text-transform: uppercase; min-width: 220px; }
.performance-row__time { color: var(--po-grey-100); }
.performance-row__status { text-transform: uppercase; font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--po-grey-200); }

/* ---- Subpage layout: dark canvas, white content well, section rail ----
   Restyles the established old-site subpage anatomy into the system:
   slate rail panel (like the mega menu surface), white 16px-radius well,
   slate text on light per the DS on-light color. */
.subpage-grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
/* The rail is LAST in the DOM (matches the single-column mobile reading
   order: content, then subnav, then footer); explicit grid placement keeps
   it in the left column on desktop. */
.subpage-rail { grid-column: 1; grid-row: 1; }
.subpage-grid > .content-well { grid-column: 2; grid-row: 1; }
.subpage-grid--no-rail { grid-template-columns: minmax(0, 1fr); }
.subpage-grid--no-rail > .content-well { grid-column: 1; }

.section-nav {
  background: var(--po-slate);
  border-radius: var(--po-radius-panel);
  padding: 22px 26px;
}
/* ---- Desktop sticky subnav, synced to the hide-on-scroll header: pins
        below the header while it shows (header height + 24px, from the
        --header-h custom property main.js maintains on load/resize), and
        24px from the viewport top while the header is hidden. :has() keys
        off the header's own .is-hidden toggle — no second scroll listener
        — and the top transition matches the header's real 260ms ease so
        the panel rides with it. The stretched rail gives the sticky its
        full-row travel and releases it before the footer. Mobile (<=1080px)
        keeps the spec v14 bottom-of-page placement, untouched. ---- */
@media (min-width: 1081px) {
  .subpage-rail { align-self: stretch; }
  .subpage-rail .section-nav {
    position: sticky;
    top: calc(var(--header-h, 96px) + 24px);
    transition: top 260ms ease;
  }
  body:has(.site-header.is-hidden) .subpage-rail .section-nav { top: 24px; }
}
@media (min-width: 1081px) and (prefers-reduced-motion: reduce) {
  .subpage-rail .section-nav { transition: none; }
}
.section-nav ul { list-style: none; margin: 0; padding: 0; }
.section-nav a {
  display: block; padding: 9px 0;
  color: var(--po-white); text-decoration: none;
  font-weight: var(--po-weight-bold); line-height: 1.3;
  min-height: 44px; display: flex; align-items: center;
}
.section-nav a:hover { /* white text on slate; accent only as the underline
  (non-text, 4.43:1 vs slate, clears 3:1) */
  color: var(--po-white);
  text-decoration: underline;
  text-decoration-color: var(--po-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
/* Current item: white text + accent indicator bar in the panel's left
   padding gutter (no layout shift; non-text decoration at 4.43:1 vs slate) */
.section-nav a { position: relative; }
.section-nav .is-current > a { color: var(--po-white); }
.section-nav .is-current > a::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  translate: 0 -50%;
  width: 3px;
  height: 1.2em;
  background: var(--po-accent);
  border-radius: 2px;
}

.content-well {
  background: var(--po-white);
  border-radius: var(--po-radius-panel);
  padding: 44px 48px;
  color: var(--po-slate);
}
.content-well .po-prose { color: var(--po-slate); }
.content-well .po-prose h2,
.content-well .po-prose h3,
.content-well .po-prose h4,
.content-well .po-prose blockquote,
.content-well .po-prose th { color: var(--po-slate); }
.content-well .po-prose a { color: var(--po-accent-deep); }
.content-well .po-prose a:hover { color: var(--po-slate); }
.content-well .po-prose th,
.content-well .po-prose td { border-bottom-color: var(--po-grey-100); }
.content-well .po-prose hr { border-top-color: var(--po-grey-100); }

/* Accordion on the light surface: white cards, accent titles (old-site look) */
.content-well .po-accordion__item {
  background: var(--po-white);
  border-color: var(--po-grey-100);
}
.content-well .po-accordion__title { color: var(--po-accent-deep); }
.content-well .po-accordion__title:hover,
.content-well .po-accordion__item[open] > .po-accordion__title { color: var(--po-slate); }
.content-well .po-accordion__content { color: var(--po-slate); }

@media (max-width: 900px) {
  .subpage-grid { grid-template-columns: 1fr; gap: 24px; }
  /* Release the desktop pinning: DOM order rules, so the rail lands after
     the content, directly above the footer. */
  .subpage-rail,
  .subpage-grid > .content-well { grid-column: auto; grid-row: auto; }
  .content-well { padding: 28px 22px; }
}

/* Phones: the white content surface reads as a structural band — full bleed
   (cancelling the .wrap 24px gutter), square like every band, with the body
   copy widened out to where the card's outer edge used to sit. The slate
   section-nav rail stays on the black canvas with its own margins. */
@media (max-width: 599px) {
  .content-well {
    margin-left: -24px;  /* mirrors the .wrap side padding exactly */
    margin-right: -24px;
    border-radius: 0;
    padding: 28px 24px;
  }
  /* Embedded media scale to the widened column instead of overflowing
     (the theme declares no responsive-embeds support; raw iframes carry
     fixed pixel widths) */
  .content-well .po-prose iframe,
  .content-well .wp-block-embed iframe { max-width: 100%; }
  .content-well iframe[src*="youtube"],
  .content-well iframe[src*="youtu.be"],
  .content-well iframe[src*="vimeo"] {
    width: 100%; height: auto; aspect-ratio: 16 / 9;
  }
}

/* ---- Content-image safety net (sitewide): every image in the content
        area scales responsively and carries the tile radius regardless of
        markup. Migrated EE content includes bare <img> tags with fixed
        width/height attributes; without this, phones compress the width
        while the attribute height holds and the image stretches. Gallery
        mosaic tiles are unaffected: their selectors are more specific and
        set height:100% / object-fit explicitly. ---- */
.po-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--po-radius-panel);
}
/* Most migrated dimensions live in inline style attributes
   (style="width:240px;height:180px"), which beat the stylesheet height
   above. Scoped !important: only images that declare an inline height —
   gallery mosaic tiles never carry one, so they keep their height:100%.
   max-width needs no !important (it clamps inline width by definition). */
.po-prose img[style*="height"] {
  height: auto !important;
}

/* ---- Content image captions: figcaption per the system — smaller, quiet
        grey, tight leading, a comfortable gap below the image. Gallery
        mosaic tiles keep hiding theirs (more specific display:none rule);
        the lightbox shows those credits instead. ---- */
.po-prose .wp-block-image figcaption {
  margin: 8px 0 0;
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--po-grey-300);
}

/* ---- sup/sub normalization: migrated EE content used <sup> as a
        caption-styling hack, and vertical-align: super inflates line boxes
        (uneven paragraph spacing). The sweep moves caption abuse into
        figcaptions; this keeps any stray instance — and legitimate
        superscript — from ever stretching a line: zero line-height and a
        positioned baseline shift instead of vertical-align. ---- */
.po-prose sup,
.po-prose sub {
  font-size: 0.72em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
.po-prose sup { top: -0.5em; }
.po-prose sub { bottom: -0.25em; }

/* ---- Floated images (legacy float-and-wrap content, editor alignments) ---- */
.po-prose { display: flow-root; }
/* Section boundaries contain floats: an alignright image from one event
   block can never push the next block's layout around (h3 = the section
   heading level in migrated event/listing pages). */
.content-well .po-prose h3 { clear: both; }
.po-prose .wp-block-image.alignleft,
.po-prose .alignleft {
  float: left;
  max-width: min(50%, 340px);
  margin: 6px 28px 16px 0;
}
.po-prose .wp-block-image.alignright,
.po-prose .alignright {
  float: right;
  max-width: min(50%, 340px);
  margin: 6px 0 16px 28px;
}
@media (max-width: 640px) {
  .po-prose .alignleft, .po-prose .alignright,
  .po-prose .wp-block-image.alignleft, .po-prose .wp-block-image.alignright {
    float: none; max-width: 100%; margin: 16px 0;
  }
}

/* ---- Embedded video: the same 16px radius as images and tiles, sitewide
        and at every width (media inside the padded well stays rounded even
        when the well itself goes square below 600px). Clip at the WRAPPER
        so the player chrome renders inside the rounded shape regardless of
        what the iframe does internally; the iframe/video radius doubles as
        the fallback for legacy unwrapped embeds in migrated content (plain
        <p> iframes on past-show and event pages). Sizing, aspect ratio,
        and loading behavior untouched. ---- */
figure.wp-block-embed,
.wp-block-embed__wrapper,
.wp-block-video {
  border-radius: var(--po-radius-panel);
  overflow: hidden;
}
.wp-block-video video,
.wp-block-embed iframe,
.po-prose iframe[src*="youtube.com"],
.po-prose iframe[src*="youtube-nocookie.com"],
.po-prose iframe[src*="youtu.be"],
.po-prose iframe[src*="vimeo.com"],
.po-prose iframe[src*="player."] {
  border-radius: var(--po-radius-panel);
}

/* ---- Light-surface variants for well-contained components ---- */
/* Season landing cards and listing rows reuse black-canvas components inside
   the white well; their accent text drops to the deep token there. */
.content-well .season-row__dates { color: var(--po-accent-deep); }
.content-well .season-row:hover .season-row__title { color: var(--po-accent-deep); }
.content-well .eyebrow { color: var(--po-accent-deep); }
.content-well .performances h2 { color: var(--po-slate); font-size: 1.5rem; }
.content-well .performance-row { border-bottom-color: var(--po-grey-100); }
.content-well .performance-row__date { color: var(--po-slate); }
.content-well .performance-row__time { color: var(--po-grey-300); }
.content-well .po-link { color: var(--po-accent-deep); }
.content-well .po-link:hover { color: var(--po-slate); }

.section-nav__heading {
  margin: 0 0 10px;
  font-size: 1.0625rem;
  color: var(--po-white);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--po-weight-extrabold);
}

/* ---- Buttons in content: default = po-btn primary look; giving style is
        the sole sanctioned use of giving red (DS v3 token rule) ---- */
.po-prose .wp-block-button__link {
  background: var(--po-accent);
  color: var(--po-canvas);
  border-radius: var(--po-radius-control);
  text-transform: uppercase;
  font-weight: var(--po-weight-bold);
  letter-spacing: 0.04em;
  font-size: 0.9375rem;
  padding: 12px 22px;
  text-decoration: none;
}
.po-prose .wp-block-button.is-style-giving .wp-block-button__link {
  background: var(--po-giving-red);
  color: var(--po-white);
}
.po-prose .wp-block-button__link:hover { filter: none; opacity: 0.9; }

/* ---- Columns content normalization: legacy fixed-size thumbnails become
        uniform column-width images; buttons in columns center (old-site look) ---- */
.po-prose .wp-block-columns .wp-block-image img {
  width: 100%;
  height: auto;
}
.po-prose .wp-block-column > .wp-block-buttons {
  display: flex;
  justify-content: center;
}

/* ---- Buttons blocks: deterministic flow + justification (core's generated
        layout styles are unreliable in classic context) ---- */
.po-prose .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 1.75em;
}
.po-prose .wp-block-buttons.is-content-justification-right { justify-content: flex-end; }
.po-prose .wp-block-buttons.is-content-justification-center { justify-content: center; }
.po-prose .wp-block-button__link { display: inline-block; }

/* ---- News index rows ---- */
.news-index__row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--po-grey-100);
}
.news-index__row:first-child { padding-top: 0; }
.news-index__thumb img { border-radius: var(--po-radius-panel); width: 100%; height: auto; display: block; }
.news-index__body h2 { margin: 4px 0 10px; font-size: 1.25rem; }
.news-index__body h2 a { color: var(--po-slate); text-decoration: none; }
.news-index__body h2 a:hover { color: var(--po-accent-deep); }
.news-index__body .eyebrow { font-size: 0.8125rem; }
@media (max-width: 640px) {
  .news-index__row { grid-template-columns: 1fr; }
}
.content-well .page-numbers { color: var(--po-slate); padding: 4px 8px; }
.content-well .page-numbers.current { color: var(--po-accent-deep); font-weight: var(--po-weight-bold); }

/* ---- CTA band block ---- */
.po-cta-band {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  background: var(--po-slate);
  border-radius: var(--po-radius-panel);
  padding: 32px 36px;
  margin: 32px 0;
  clear: both;
}
.po-cta-band h2 { margin: 0 0 6px; color: var(--po-white); font-size: 1.5rem; text-transform: uppercase; }
.po-cta-band p { margin: 0; color: var(--po-grey-100); }
.po-cta-band .po-btn { flex: 0 0 auto; }
.po-btn--giving { background: var(--po-giving-red); color: var(--po-white); border-color: var(--po-giving-red); }

/* ---- Image + text row block ---- */
.po-itr {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 32px; align-items: center; margin: 32px 0; clear: both;
}
.po-itr--image-right .po-itr__media { order: 2; }
.po-itr__media img { width: 100%; height: auto; border-radius: var(--po-radius-panel); display: block; }
.po-itr__body h2 { margin: 0 0 10px; font-size: 1.5rem; text-transform: uppercase; }
.content-well .po-itr__body h2 { color: var(--po-slate); }
@media (max-width: 700px) {
  .po-itr { grid-template-columns: 1fr; }
  .po-itr--image-right .po-itr__media { order: 0; }
}

/* ---- Calendar agenda ---- */
.cal-month { margin-bottom: 40px; }
.cal-month__heading {
  color: var(--po-slate);
  text-transform: uppercase;
  font-size: 1.5rem;
  margin: 0 0 8px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--po-slate);
}
.cal-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--po-grey-100);
}
.cal-row__date {
  text-align: center;
  color: var(--po-slate);
  border-radius: var(--po-radius-control);
  border: 1px solid var(--po-grey-100);
  padding: 8px 4px;
}
.cal-row__dow { display: block; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.08em; }
.cal-row__day { display: block; font-size: 1.6rem; font-weight: var(--po-weight-extrabold); line-height: 1.1; }
.cal-row__body h3 { margin: 2px 0 4px; font-size: 1.25rem; text-transform: uppercase; }
.cal-row__body h3 a { color: var(--po-slate); text-decoration: none; }
.cal-row__body h3 a:hover { color: var(--po-accent-deep); }
.cal-row__body .eyebrow { font-size: 0.75rem; }
.cal-row__meta { margin: 0; color: var(--po-grey-300); font-size: 0.9375rem; }
.cal-row__summary { margin: 6px 0 0; color: var(--po-slate); font-size: 0.9375rem; }
.cal-row__status {
  text-transform: uppercase; font-weight: var(--po-weight-bold);
  letter-spacing: 0.06em; font-size: 0.8125rem; color: var(--po-grey-300);
}
@media (max-width: 640px) {
  .cal-row { grid-template-columns: 56px minmax(0, 1fr); }
  .cal-row__cta { grid-column: 2; justify-self: start; }
}

/* ---- Forminator overrides: footer E-Updates one-line unit ---- */
.eupdates .forminator-ui.forminator-custom-form,
.eupdates .forminator-ui.forminator-custom-form .forminator-row {
  margin: 0 !important;
}
.eupdates .forminator-ui.forminator-custom-form {
  display: flex !important;
  gap: 12px;
  align-items: stretch;
  flex: 1;
}
.eupdates .forminator-ui .forminator-row { flex: 1; display: block; }
.eupdates .forminator-ui .forminator-col { float: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
.eupdates .forminator-ui .forminator-field { margin: 0 !important; }
.eupdates .forminator-ui .forminator-field label { display: none !important; }
.eupdates .forminator-ui.forminator-custom-form .forminator-input {
  background: var(--po-white);
  border: 1px solid var(--po-grey-200);
  border-radius: var(--po-radius-control);
  color: var(--po-canvas);
  font-family: var(--po-font);
  font-size: 1rem;
  padding: 12px 16px;
  width: 100%;
  height: 48px; /* exactly the GO button height (was 100% of an auto parent = 45px) */
}
/* GO matches the three .po-btn--secondary footer buttons: white label on
   transparent, 48px control height (height:100% collapsed — parent is auto) */
.eupdates .forminator-ui.forminator-custom-form .forminator-button-submit {
  background: transparent;
  border: 2px solid var(--po-accent);
  border-radius: var(--po-radius-control);
  color: var(--po-white);
  text-transform: uppercase;
  font-family: var(--po-font);
  font-weight: var(--po-weight-bold);
  letter-spacing: 0.04em;
  font-size: 0.9375rem;
  padding: 0 24px;
  cursor: pointer;
  min-height: 48px;
  min-width: 75px;
}
.eupdates .forminator-ui.forminator-custom-form .forminator-button-submit:hover {
  background: var(--po-accent);
  color: var(--po-canvas);
}
.eupdates .forminator-ui .forminator-response-message { color: var(--po-grey-100); margin-top: 8px; }
/* Mobile: the empty aria-hidden response-message div is the form's first
   flex item; zero-width but it still costs one 12px flex gap, indenting the
   email field off the E-UPDATES heading's left edge. Drop it from layout
   while hidden (it returns when Forminator actually shows a message). */
@media (max-width: 1080px) {
  .site-footer .forminator-custom-form-3178 .forminator-response-message[aria-hidden="true"] { display: none; }
}
/* Contact form on the white well */
.content-well .forminator-ui.forminator-custom-form .forminator-input,
.content-well .forminator-ui.forminator-custom-form .forminator-textarea {
  border: 1px solid var(--po-grey-200);
  border-radius: var(--po-radius-control);
  font-family: var(--po-font);
}
.content-well .forminator-ui.forminator-custom-form .forminator-button-submit {
  background: var(--po-accent);
  color: var(--po-canvas);
  border-radius: var(--po-radius-control);
  text-transform: uppercase;
  font-weight: var(--po-weight-bold);
  font-family: var(--po-font);
  letter-spacing: 0.04em;
}

/* ---- Past seasons listing ---- */
.past-season { margin-bottom: 36px; }
.past-season__heading {
  color: var(--po-slate);
  text-transform: uppercase;
  font-size: 1.5rem;
  margin: 0 0 8px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--po-slate);
}
.past-season__shows { list-style: none; margin: 0; padding: 0; }
.past-season__shows li {
  display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--po-grey-100);
}
.past-season__shows a {
  color: var(--po-slate);
  font-weight: var(--po-weight-bold);
  text-transform: uppercase;
  text-decoration: none;
}
.past-season__shows a:hover { color: var(--po-accent-deep); }
.past-season__dates { color: var(--po-grey-300); font-size: 0.9375rem; }

/* ==========================================================================
   Gallery mosaic — the sitewide treatment for every core Gallery block
   (migrated production stills and anything editors add later). The pattern
   is CSS-only: a 4-column dense grid with an nth-child rhythm, so editors
   never set per-image sizes and any image count from 2 up degrades to a
   clean composition. Count-aware tail rules keep the dominant gallery
   sizes on this site (4-10 images) rectangular. Carousels are banned
   (kickoff decision); the lightbox is the core Gallery lightbox, forced on
   at render in inc/gutenberg.php.
   ========================================================================== */
.po-prose .wp-block-gallery.has-nested-images {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(110px, 19vw, 150px);
  grid-auto-flow: dense;
  gap: 12px;
  margin: 28px 0;
}
/* Core sizes gallery figures with an id-hack selector (:not(#individual-image)),
   so width/margin need !important to hand sizing to the grid. */
.po-prose .wp-block-gallery.has-nested-images figure.wp-block-image {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  position: relative;
  overflow: hidden;               /* the fixed mask the hover zoom lives inside */
  border-radius: var(--po-radius-panel);
}
.po-prose .wp-block-gallery.has-nested-images figure.wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;              /* mixed portrait/landscape crop to their tile */
  border-radius: var(--po-radius-panel);
  transition: transform 300ms ease-out;  /* same subtle zoom as season thumbs */
  cursor: zoom-in;
}
.po-prose .wp-block-gallery.has-nested-images figure.wp-block-image:hover img,
.po-prose .wp-block-gallery.has-nested-images figure.wp-block-image:focus-within img {
  transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
  .po-prose .wp-block-gallery.has-nested-images figure.wp-block-image img {
    transition: none;
  }
  .po-prose .wp-block-gallery.has-nested-images figure.wp-block-image:hover img,
  .po-prose .wp-block-gallery.has-nested-images figure.wp-block-image:focus-within img {
    transform: none;
  }
}
/* Tile captions are photo credits; they read in the lightbox, not stamped
   across every tile (the old slider also showed one caption at a time). */
.po-prose .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
  display: none;
}

/* ---- The rhythm: lead image prominent, then rows of
        [wide,1,1] / [1,1,wide] / [1,1,1,1] so no two adjacent rows match ---- */
.po-prose .wp-block-gallery.has-nested-images figure.wp-block-image:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
.po-prose .wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(4),
.po-prose .wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(10n + 5):not(:first-child),
.po-prose .wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(10n + 10) {
  grid-column: span 2;
}

/* ---- Count-aware tails (dominant sizes on this site fill their rectangle).
        Each rule keys off the total via :first-child:nth-last-child(n). ---- */
/* 2 images: two equal prominent halves */
.po-prose .wp-block-gallery.has-nested-images figure.wp-block-image:first-child:nth-last-child(2) ~ figure.wp-block-image {
  grid-column: span 2;
  grid-row: span 2;
}
/* 3 images: lead + two wides stacked beside it */
.po-prose .wp-block-gallery.has-nested-images figure.wp-block-image:first-child:nth-last-child(3) ~ figure.wp-block-image {
  grid-column: span 2;
  grid-row: span 1;
}
/* 5 images: lead + four singles (perfect 4x2) */
.po-prose .wp-block-gallery.has-nested-images figure.wp-block-image:first-child:nth-last-child(5) ~ figure.wp-block-image {
  grid-column: span 1;
  grid-row: span 1;
}
/* 6 images: third row is two wides */
.po-prose .wp-block-gallery.has-nested-images figure.wp-block-image:first-child:nth-last-child(6) ~ figure.wp-block-image:nth-child(6) {
  grid-column: span 2;
}
/* 8 images: third row is four singles */
.po-prose .wp-block-gallery.has-nested-images figure.wp-block-image:first-child:nth-last-child(8) ~ figure.wp-block-image:nth-child(n + 5) {
  grid-column: span 1;
}
/* 9 images: fourth row is two wides */
.po-prose .wp-block-gallery.has-nested-images figure.wp-block-image:first-child:nth-last-child(9) ~ figure.wp-block-image:nth-child(8),
.po-prose .wp-block-gallery.has-nested-images figure.wp-block-image:first-child:nth-last-child(9) ~ figure.wp-block-image:nth-child(9) {
  grid-column: span 2;
}

/* ---- Expand affordance: core's lightbox trigger button, restyled as the
        always-visible corner glyph (subtle at rest, brighter with the zoom
        on hover/focus). Not hover-gated, so it reads on touch screens.
        Core positions it top-right via inline JS styles. ---- */
.po-prose .wp-block-gallery.has-nested-images .lightbox-trigger {
  opacity: 0.75;
  background: var(--po-scrim);    /* flat translucent black — no gradients */
  border: 0;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  cursor: zoom-in;
  transition: opacity 300ms ease-out;
  padding: 0;
}
.po-prose .wp-block-gallery.has-nested-images figure.wp-block-image:hover .lightbox-trigger,
.po-prose .wp-block-gallery.has-nested-images .lightbox-trigger:focus-visible {
  opacity: 1;
}
.po-prose .wp-block-gallery.has-nested-images .lightbox-trigger:focus-visible {
  outline: 2px solid var(--po-accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .po-prose .wp-block-gallery.has-nested-images .lightbox-trigger { transition: none; }
}

/* ---- Lightbox overlay, styled to brand: black scrim comes from theme.json
        global background; chrome inherits Proxima. The caption element is
        injected by main.js (core's overlay shows no captions) and carries
        the photo credit beneath the image. ---- */
.wp-lightbox-overlay .scrim { opacity: 0.94; }
/* Core sizes the enlarged image from the SOURCE figure's aspect ratio and
   stamps object-fit:cover inline — correct for core's proportional gallery
   tiles, but our mosaic tiles are arbitrary crops, so the "enlarged" image
   would inherit the tile crop. Force the overlay image back to the full
   frame: viewport-sized container, contain, breathing room for the close
   control and the caption. !important beats core's inline styles/vars. */
.wp-lightbox-overlay .lightbox-image-container {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  /* Core's zoom keyframes animate this container's transform from
     tile-geometry vars, which fights the viewport-sized box above and can
     strand the image scaled/offset. Pin the centering transform and drop
     the container animation; the overlay's own fade (turn-on-visibility)
     still runs, which suits the motion standard. */
  animation: none !important;
  transform: translate(-50%, -50%) !important;
}
.wp-lightbox-overlay .lightbox-image-container figure,
.wp-lightbox-overlay .lightbox-image-container img {
  width: 100% !important;
  height: 100% !important;
}
.wp-lightbox-overlay .lightbox-image-container img {
  object-fit: contain !important;
  padding: 56px min(7vw, 90px) 88px !important;
  box-sizing: border-box !important;
}
.wp-lightbox-overlay button {
  font-family: var(--po-font);
  cursor: pointer;
}
.wp-lightbox-overlay .wp-lightbox-close-button svg,
.wp-lightbox-overlay .wp-lightbox-navigation-button svg {
  fill: var(--po-white);
  transition: fill 120ms ease;
}
.wp-lightbox-overlay .wp-lightbox-close-button:hover svg,
.wp-lightbox-overlay .wp-lightbox-navigation-button:hover svg,
.wp-lightbox-overlay .wp-lightbox-close-button:focus-visible svg,
.wp-lightbox-overlay .wp-lightbox-navigation-button:focus-visible svg {
  fill: var(--po-accent);
}
.wp-lightbox-overlay .wp-lightbox-close-button:focus-visible,
.wp-lightbox-overlay .wp-lightbox-navigation-button:focus-visible {
  outline: 2px solid var(--po-accent);
  outline-offset: 2px;
}
.po-lightbox-caption {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  max-width: min(80ch, 86vw);
  padding: 6px 14px;
  color: var(--po-grey-100);
  font-family: var(--po-font);
  font-size: 0.9375rem;
  line-height: 1.2;               /* tight: the credit wraps to 2-3 lines on
                                     phones and looser leading read as a gap */
  text-align: center;
  background: var(--po-scrim);    /* flat legibility scrim, per token rules */
  border-radius: var(--po-radius-control);
  pointer-events: none;
  z-index: 5000000;               /* above core's overlay stacking */
}
.po-lightbox-caption[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  /* Keep the lightbox functional but effectively motionless. Durations are
     floored rather than zeroed so core's transition-end hooks still fire. */
  .wp-lightbox-overlay,
  .wp-lightbox-overlay * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---- Phones: mosaic simplifies to a two-column flow, lead image full
        width; radii stay intact inside the full-bleed content surface ---- */
@media (max-width: 599px) {
  .po-prose .wp-block-gallery.has-nested-images {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(100px, 30vw, 150px);
    gap: 10px;
  }
  .po-prose .wp-block-gallery.has-nested-images figure.wp-block-image,
  .po-prose .wp-block-gallery.has-nested-images figure.wp-block-image:first-child:nth-last-child(2) ~ figure.wp-block-image,
  .po-prose .wp-block-gallery.has-nested-images figure.wp-block-image:first-child:nth-last-child(3) ~ figure.wp-block-image,
  .po-prose .wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(4),
  .po-prose .wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(10n + 5):not(:first-child),
  .po-prose .wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(10n + 10),
  .po-prose .wp-block-gallery.has-nested-images figure.wp-block-image:first-child:nth-last-child(6) ~ figure.wp-block-image:nth-child(6),
  .po-prose .wp-block-gallery.has-nested-images figure.wp-block-image:first-child:nth-last-child(9) ~ figure.wp-block-image:nth-child(8),
  .po-prose .wp-block-gallery.has-nested-images figure.wp-block-image:first-child:nth-last-child(9) ~ figure.wp-block-image:nth-child(9) {
    grid-column: span 1;
    grid-row: span 1;
  }
  .po-prose .wp-block-gallery.has-nested-images figure.wp-block-image:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* ==========================================================================
   Focus-visible, per surface (AA remediation, July 17): the ring must clear
   3:1 against its own surface — accent on the black canvas (9.5:1) and on
   slate (4.43:1); accent-deep on the white well (5.1:1). Component-level
   rings (gallery trigger, lightbox chrome) already comply and win on
   specificity.
   ========================================================================== */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--po-accent);
  outline-offset: 2px;
}
.content-well a:focus-visible,
.content-well button:focus-visible,
.content-well summary:focus-visible,
.content-well input:focus-visible,
.content-well select:focus-visible,
.content-well textarea:focus-visible {
  outline-color: var(--po-accent-deep);
}