/* ==========================================================================
   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: clamp(1.5rem, 1.1rem + 1.2vw, 1.75rem); line-height: 1.35; 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; }
/* Interior titles are LIGHT, not extrabold: live sets .subpage-right h1 to
   50px/300 uppercase on every interior page, and the sitewide h1 default
   (tokens.css) plus .hero__title both say 800. Scoped to interior bands so the
   homepage hero keeps its extrabold. Reported to Tom 2026-08-17: this was the
   template style, never a page-level override, so it lands on every interior
   page including show and event heroes. */
.hero--interior .hero__title {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: var(--po-weight-light);
}
.hero--titleband { background-image: none; }
.hero--titleband .hero__panel { background: none; padding-inline: 0; }

/* ---- Event hero: text-only compact title band. No imagery in the band
        (the event image lives in the content well), so the fixed image-hero
        height gives way to content height + the standard wrap padding, and
        the title runs the full content container so long event names hold
        to two lines. Values reused from the base hero/wrap rules. ---- */
.hero--event { height: auto; min-height: 0; }
/* Scrimless panel: the 32px block padding belonged to the scrim box, so it
   goes to 0 like titleband's padding-inline; the wrap's 40px carries the band. */
.hero--event .hero__panel { width: 100%; max-width: none; padding-block: 0; }
.hero--event .hero__title { max-width: none; } /* base title caps at 20ch */

/* (Removed 2026-07-30: the .event-media slot styles. Event pages no longer
   place the featured image; body images carry their own block styling.) */

/* ---- 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; }
/* Body-copy links carry no resting underline (client direction, 2026-08-03);
   it appears on hover and on keyboard focus.
   ACCESSIBILITY TRADE-OFF, accepted knowingly: with the underline gone,
   colour is the only thing marking a link at rest, and neither link colour
   reaches the 3:1 contrast against its own body text that WCAG technique
   G183 asks for (accent vs grey-100 = 1.60:1 on canvas; accent-deep vs slate
   = 1.90:1 in the white well). Both still clear 4.5:1 against their
   background, so legibility is fine; it is 1.4.1 Use of Color that this
   fails. Adding font-weight: var(--po-weight-bold) here would restore a
   non-colour cue without bringing the underline back. */
.po-prose a { color: var(--po-accent); text-decoration: none; text-underline-offset: 3px; }
.po-prose a:hover,
.po-prose a:focus-visible { color: var(--po-white); text-decoration: underline; }
.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; }
/* EE "image-left" tables (a photo, sometimes with a caption row, in a table
   shell) float like alignleft images so body text wraps beside them; the
   data-table chrome (full width, cell padding, rules) doesn't apply. */
.po-prose table.image-left {
  width: auto; max-width: min(50%, 340px);
  float: left; margin: 6px 28px 12px 0;
}
.po-prose table.image-left th,
.po-prose table.image-left td { padding: 0; border-bottom: 0; }
.po-prose table.image-left img { max-width: 100%; }
@media (max-width: 640px) {
  .po-prose table.image-left { float: none; max-width: 100%; margin: 16px 0; }
}

/* ---- 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; display: flow-root; /* contains floated images */ }
@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: tagline, performances table + meta ---- */
/* Tagline leads the body copy a step above body size, under .po-prose h2
   (1.5rem) and just over h3 (1.25rem). Color inherits from .po-prose so it
   reads grey on the dark canvas and slate inside the white content well. */
.show-tagline {
  font-size: 1.375rem;
  font-weight: var(--po-weight-extrabold);
  line-height: 1.3;
  margin: 0 0 1em;
}
.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__note { color: var(--po-grey-100); font-size: 0.9375rem; }
/* The note is a WYSIWYG field: flatten its paragraph wrapper so the row keeps
   its single-baseline rhythm. */
.performance-row__note p { margin: 0; }
.performance-row__note p + p { margin-top: 0.35em; }
.performance-row__status { text-transform: uppercase; font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--po-grey-200); }
.performances__venue { color: var(--po-grey-100); margin: 4px 0 14px; }

/* ---- 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;
}
/* Expanded branch (the trail to the current page): indented sub-list under
   its parent item, lighter weight so the hierarchy reads at a glance. */
.section-nav .section-nav__sub {
  margin: 0 0 6px;
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}
.section-nav .section-nav__sub a {
  font-weight: var(--po-weight-regular);
  font-size: 0.9375rem;
  min-height: 40px;
  padding-block: 7px;
}

.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,
.content-well .po-prose a:focus-visible { color: var(--po-slate); text-decoration: underline; }
.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;
  }
}

/* ---- Video embeds fill the content column at every width (sitewide).
        Migrated EE iframes carry fixed width="560" height="315" attributes,
        which read undersized in the ~750px content column; scale them to
        the column at 16:9 instead. (Client feedback 2026-07-29: bigger
        videos on About / Resident Artists / Schools.) ---- */
.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; }
/* ...except a heading directly after a floated image: it belongs beside the
   float, with its section wrapping (Employment header, bio pages). */
.content-well .po-prose .alignleft + h2,
.content-well .po-prose .alignleft + h3,
.content-well .po-prose .alignright + h2,
.content-well .po-prose .alignright + h3 { clear: none; }
/* Editor "Align center" (images) and "Align text center" (paragraphs,
   headings). The theme does not load WordPress's block-library stylesheet,
   which is where core defines these classes, so without this block a
   centred image or paragraph in the editor rendered left on the site
   (Tom, 2026-09-16). Vertical rhythm matches the floated-image margins. */
.po-prose .wp-block-image.aligncenter,
.po-prose .aligncenter {
  display: block;
  margin: 16px auto;
  text-align: center;
}
.po-prose .wp-block-image.aligncenter > img,
.po-prose .wp-block-image.aligncenter > a,
.po-prose img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.po-prose .wp-block-image.aligncenter > a > img { display: block; margin: 0 auto; }
.po-prose .has-text-align-center { text-align: center; }
.po-prose .has-text-align-right  { text-align: right; }
.po-prose .has-text-align-left   { text-align: left; }
.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;
  }
}
/* Faculty & Administration bios: one consistent photo treatment across the
   staff pages under /resident-artists/faculty-administration/, whose headshots
   arrived at assorted intrinsic sizes and alignments. A quarter of the content
   column, floated left, text wrapping. parent-pageid-208 is WordPress's own
   body class for children of that page, so a new bio page inherits this with
   no extra markup. The 640px rule above still unstacks it on mobile. */
.parent-pageid-208 .po-prose .wp-block-image.alignleft {
  width: 25%;
  max-width: 25%;
}
.parent-pageid-208 .po-prose .wp-block-image.alignleft img { width: 100%; }
/* These bios run "photo, name paragraph, h3 role, biography", so the h3 is not
   the float's adjacent sibling and the .content-well h3 { clear: both } rule
   above would drop the heading and the whole biography below the photo,
   leaving nothing wrapped beside it. Same specificity as that rule (three
   classes + element), later in the file, so it wins. */
.parent-pageid-208 .content-well .po-prose h3 { clear: none; }
@media (max-width: 640px) {
  /* Unfloated on a phone (the rule above this block), where a quarter column
     would be an 82px thumbnail. Half keeps the photo close to its desktop
     rendered size and, unlike the sitewide max-width:100% fallback, keeps the
     five bios consistent with each other instead of reverting to whatever
     intrinsic size each headshot happens to have (240px to 1600px). */
  .parent-pageid-208 .po-prose .wp-block-image.alignleft {
    width: 50%;
    max-width: 50%;
  }
}

/* ---- 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 .performances__venue { color: var(--po-grey-300); }
.content-well .performance-row__note { color: var(--po-grey-300); }
.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) !important;
  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) !important;
}
.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;
}
/* Tile grids (Support/Sponsorship): halve core's 1.75em stack margin so tile
   rows and their Give buttons read as one unit (client feedback 2026-07-29). */
.po-prose .wp-block-columns { margin-block: 0 16px; }
.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 ---- */
/* Anchor jumps land below the fixed header (it slides back in on upward
   scrolls, so the offset is needed in both directions). */
.cal-month { margin-bottom: 40px; scroll-margin-top: calc(var(--header-h, 0px) + 16px); }
/* Jump-to-month select above the agenda; main.js removes [hidden]. */
.cal-jump { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 32px; }
.cal-jump[hidden] { display: none; }
.cal-jump__label {
  font-weight: var(--po-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.9375rem;
  color: var(--po-slate);
}
/* Same control chrome as the contact and board-login fields (2026-08-17): this
   is the only other form control on a white well. Scoped to .cal-jump, not the
   .po-input base, because the footer E-Updates fallback also uses that class and
   its white fill on the black footer is deliberate. */
.cal-jump .po-input {
  height: 48px;
  min-width: 240px;
  font-size: 1rem;
  background: var(--po-field-fill);
  border-color: var(--po-grey-300);
  color: var(--po-slate);
}
.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__mon,
.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);
}
/* ---- Row thumbnail + CTA: one right-aligned column in the row's third
        cell — image on top, CTA under it, left edges aligned — vertically
        centered by the row's align-items. Imageless rows put the bare CTA
        in the same cell, so their layout is untouched. Every image fills
        the fixed box (cover), logos included. ---- */
.cal-row__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.cal-row__thumb {
  display: block;
  width: 180px;
  height: 120px;
  border-radius: var(--po-radius-panel);
  overflow: hidden;
}
.cal-row__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) {
  .cal-row { grid-template-columns: 56px minmax(0, 1fr); }
  .cal-row__cta { grid-column: 2; justify-self: start; }
  .cal-row__side { grid-column: 2; justify-self: start; }
}
@media (max-width: 600px) {
  /* The side column dissolves into the row grid: the image spans the full
     row width on top (200px cover band) and the CTA flows back to the
     bottom of the row; date box and text block keep their mobile layout. */
  .cal-row__side { display: contents; }
  .cal-row__thumb { grid-column: 1 / -1; grid-row: 1; width: 100%; height: 200px; }
}

/* ---- 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;
  background: transparent !important;
  box-shadow: none !important; /* plugin's inset edge stripe (red/green) */
}
/* 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; }
}
/* Footer form error states: white text on the black band; the input border
   flags the field in accent (non-text contrast on black clears 3:1). */
.eupdates .forminator-ui .forminator-response-message.forminator-error,
.eupdates .forminator-ui .forminator-error-message { color: var(--po-white); }
.eupdates .forminator-ui .forminator-has_error .forminator-input { border-color: var(--po-accent); }
/* ---- Forminator overrides: contact form on the white well ----
   Forminator's default skin floats its columns and paints its own control
   chrome; these rules re-skin it with the token set.
   Label and control values are matched from the live site's computed styles
   (2026-08-17): main labels 18px/700/slate, sub-labels 13px, fill #F4F5F8,
   asterisk --po-required. Two deliberate departures from live: the control
   radius is 8px (--po-radius-control, our approved refinement over live's 3px)
   and the submit takes the locked primary-button treatment. Errors and focus
   rings use --po-accent-deep, not red: red stays reserved for giving CTAs. */
.content-well .forminator-ui.forminator-custom-form .forminator-row {
  display: flex;
  gap: 0 16px;
  margin: 0 0 20px;
}
.content-well .forminator-ui.forminator-custom-form .forminator-col {
  float: none;
  width: auto;
  flex: 1 1 0;
  padding: 0;
  margin: 0;
}
.content-well .forminator-ui.forminator-custom-form .forminator-label {
  display: block;
  color: var(--po-slate);
  font-family: var(--po-font);
  font-size: 1.125rem;              /* 18px, live's .dform_element .dform_label */
  font-weight: var(--po-weight-bold);
  margin: 0 0 6px;
}
.content-well .forminator-ui.forminator-custom-form .forminator-required { color: var(--po-required); }
/* Address group: live prints one bold 18px "Address" heading above the group
   and puts each sub-field's own label BELOW its control. Forminator renders no
   group heading (we supply it as an HTML field) and labels above, so the sub-
   fields flip order here. */
.po-field-group-label {
  display: block;
  color: var(--po-slate);
  font-family: var(--po-font);
  font-size: 1.125rem;
  font-weight: var(--po-weight-bold);
  margin: 0 0 6px;
}
.content-well .forminator-ui.forminator-custom-form .forminator-field-address .forminator-field {
  display: flex;
  flex-direction: column;
}
.content-well .forminator-ui.forminator-custom-form .forminator-field-address .forminator-label {
  order: 2;                         /* label below its control, as on live */
  color: var(--po-grey-300);        /* live is #848994 (3.51:1); grey-300 is 5.74:1 */
  font-size: 0.8125rem;             /* 13px, live's .main-content form label */
  font-weight: var(--po-weight-regular);
  margin: 6px 0 0;
}
/* The !importants below match the footer-form precedent: Forminator's skin
   loads after the theme stylesheet and ties or beats these selectors. */
.content-well .forminator-ui.forminator-custom-form .forminator-input,
.content-well .forminator-ui.forminator-custom-form .forminator-textarea,
.content-well .forminator-ui.forminator-custom-form select {
  background: var(--po-field-fill) !important;
  border: 1px solid var(--po-grey-300) !important;
  border-radius: var(--po-radius-control) !important;
  color: var(--po-slate) !important;
  font-family: var(--po-font) !important;
  font-size: 1rem !important;
  padding: 12px 16px !important;
  width: 100%;
}
.content-well .forminator-ui.forminator-custom-form .forminator-input,
.content-well .forminator-ui.forminator-custom-form select { height: 48px !important; }
.content-well .forminator-ui.forminator-custom-form .forminator-textarea { min-height: 140px; resize: vertical; }
.content-well .forminator-ui.forminator-custom-form .forminator-input:focus-visible,
.content-well .forminator-ui.forminator-custom-form .forminator-textarea:focus-visible,
.content-well .forminator-ui.forminator-custom-form select:focus-visible {
  outline: 2px solid var(--po-accent-deep);
  outline-offset: 1px;
  border-color: var(--po-accent-deep) !important;
}
.content-well .forminator-ui.forminator-custom-form .forminator-has_error .forminator-input,
.content-well .forminator-ui.forminator-custom-form .forminator-has_error .forminator-textarea,
.content-well .forminator-ui.forminator-custom-form .forminator-has_error select {
  border-color: var(--po-accent-deep) !important;
}
.content-well .forminator-ui.forminator-custom-form .forminator-error-message {
  display: block;
  background: transparent !important; /* kill the plugin's pink wash (red is giving-only) */
  color: var(--po-accent-deep) !important;
  font-family: var(--po-font);
  font-size: 0.875rem;
  margin: 6px 0 0;
  padding: 0 !important;
}
/* Submission outcome panel (success and error share the panel treatment) */
.content-well .forminator-ui.forminator-custom-form .forminator-response-message,
.content-well .forminator-ui .forminator-response-message {
  background: transparent !important; /* plugin paints these pink/green */
  border: 1px solid var(--po-accent-deep) !important;
  border-radius: var(--po-radius-panel);
  box-shadow: none !important; /* plugin's inset edge stripe (red/green) */
  color: var(--po-slate);
  font-family: var(--po-font);
  padding: 16px 20px;
  margin: 0 0 20px;
}
.content-well .forminator-ui .forminator-response-message[aria-hidden="true"] { display: none; }
.content-well .forminator-ui .forminator-response-message.forminator-error { color: var(--po-accent-deep) !important; }
.content-well .forminator-ui.forminator-custom-form .forminator-button-submit {
  background: var(--po-accent) !important;
  border: 2px solid var(--po-accent) !important;
  border-radius: var(--po-radius-control) !important;
  color: var(--po-canvas) !important;
  cursor: pointer;
  font-family: var(--po-font) !important;
  font-size: 0.9375rem;
  font-weight: var(--po-weight-extrabold);
  letter-spacing: 0.04em;
  min-height: 48px !important;
  padding: 0 32px !important;
  text-transform: uppercase;
}
/* Primary inversion, white-surface variant: accent label fails AA on white,
   so the hover label uses accent-deep while the border keeps the accent. */
.content-well .forminator-ui.forminator-custom-form .forminator-button-submit:hover {
  background: transparent !important;
  color: var(--po-accent-deep) !important;
}
.content-well .forminator-ui.forminator-custom-form .forminator-button-submit:disabled {
  opacity: 0.6;
  cursor: default;
}
@media (max-width: 640px) {
  .content-well .forminator-ui.forminator-custom-form .forminator-row {
    flex-direction: column;
    gap: 0;
    margin: 0;
  }
  .content-well .forminator-ui.forminator-custom-form .forminator-col { margin: 0 0 20px; }
}

/* ---- Board portal: login and password forms on the white well ----
   Same control treatment as the contact form; notices share the response-
   panel look. Errors in accent-deep (red stays reserved for giving). */
.board-login__form { max-width: 420px; }
.board-login__form p { margin: 0 0 20px; }
.board-login__form label {
  display: block;
  color: var(--po-slate);
  font-size: 1.125rem;              /* 18px, live's main form labels */
  font-weight: var(--po-weight-bold);
  margin: 0 0 6px;
}
.board-login .po-input {
  background: var(--po-field-fill);
  border-color: var(--po-grey-300);
  color: var(--po-slate);
  font-size: 1rem;
  height: 48px;
  padding: 12px 16px;
  width: 100%;
}
.board-login .po-input:focus-visible {
  outline: 2px solid var(--po-accent-deep);
  outline-offset: 1px;
  border-color: var(--po-accent-deep);
}
/* Log In matches the contact form's submit exactly: .po-btn alone gives weight
   700 and em padding with no fixed height, so pin both here. Scoped to the
   portal so the sitewide button system keeps its 700. */
.board-login .po-btn--primary {
  align-items: center;
  display: inline-flex;
  font-size: 0.9375rem;
  font-weight: var(--po-weight-extrabold);
  letter-spacing: 0.04em;
  min-height: 48px;
  padding: 0 32px;
}
/* Primary inversion on white: hover label drops to accent-deep for AA. */
.board-login .po-btn--primary:hover { color: var(--po-accent-deep); }
.board-login__actions {
  align-items: center;
  display: flex;
  gap: 20px;
}
/* Link, not a button sibling: pin it rather than leaning on .po-prose a. */
.board-login__forgot {
  color: var(--po-accent-deep);
  font-weight: var(--po-weight-regular);
  text-transform: none;
}
.board-form-notice {
  border: 1px solid var(--po-accent-deep);
  border-radius: var(--po-radius-panel);
  color: var(--po-slate);
  padding: 16px 20px;
  margin: 0 0 20px;
}
.board-form-notice--error { color: var(--po-accent-deep); }
.board-logout { text-align: right; margin: 0 0 8px; }

/* ---- 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);
}