/* ==========================================================================
   HRTC theme — base.css
   Loads on every page: tokens, reset, type, buttons, layout, header,
   side banner, footer. Module styles live in assets/css/blocks/.
   Values come from the Figma file "New Human Race Theme" (desktop frame 1728).
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;

  /* Color */
  --c-red: #ec1d25;
  --c-red-hover: #c4191f;
  --c-purple: #2b0051;
  --c-purple-dark: #1a0032;
  --c-purple-night: #10011d;
  --c-lavender: #e2e2ff;      /* headings on dark, was cream in Figma */
  --c-wash: #f3f3ff;          /* alternating light section background */
  --c-black: #191919;         /* "muted black" */
  --c-charcoal: #28252b;
  --c-plum: #282032;          /* Season 41 Dark Plum (QA #137) */
  --c-neon: #d5ff9f;
  --c-white: #fff;
  --c-text: #000;
  --c-line: #c4c4c4;
  --c-overlay: rgb(0 0 0 / .30);   /* QA #26/#87 */
  --g-night: linear-gradient(100deg, var(--c-purple-night) 41%, var(--c-purple-dark) 78%, var(--c-purple-night) 98%);

  /* Type families. Typekit names first; the second name is a Google Fonts
     stand-in used only in the prototype preview. Body font swaps in one place. */
  --f-serif: "droid-serif", "Noto Serif", Georgia, serif;
  --f-cond: "futura-pt-condensed", "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-body: "helvetica-neue-lt-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;   /* Helvetica Neue LT Pro, Adobe Fonts kit xsx7krj (was Roboto) */

  /* Type scale (desktop) */
  --t-h1: 40px;
  --t-h2: 30px;
  --t-sub: 26px;     /* italic hero subtitle */
  --t-h3: 22px;
  --t-person: 25px;  /* Futura names */
  --t-label: 23px;   /* Futura Book roles */
  --t-nav: 20px;
  --t-body: 18px;
  --t-small: 15.5px;

  /* Layout */
  --banner-w: calc(100vh * 0.1687);   /* side rail art is 163×966; it scales to the window height */
  --wrap: 1317px;
  --gap: 40px;
  --header-h: 94px;
  --section-y: 90px;
  --stack: 30px;     /* default vertical rhythm inside a module */
}

@media (max-width: 1199px) {
  :root { --banner-w: 0px; --header-h: 80px; --gap: 32px; --section-y: 72px; }
}
@media (max-width: 767px) {
  :root {
    --t-h1: 32px; --t-h2: 26px; --t-sub: 21px; --t-h3: 20px;
    --t-person: 22px; --t-label: 20px; --t-body: 16px; --t-small: 14px;
    --header-h: 72px; --gap: 20px; --section-y: 56px; --stack: 24px;
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* --sticky-top: where things stick under the header. Logged-in editors also have the admin bar above it
   (WordPress lets that bar scroll away at 600px and below). */
:root { --bar-h: 0px; --sticky-top: calc(var(--bar-h) + var(--header-h)); }
:root:has(body.admin-bar) { --bar-h: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { :root:has(body.admin-bar) { --bar-h: 0px; } }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--sticky-top) + 16px); }
body {
  margin: 0;
  overflow-x: clip;   /* nothing can push the page sideways (QA #189); clip, not hidden, so sticky headers still work */
  background: var(--c-white);
  color: var(--c-text);
  font: 400 var(--t-body)/1.44 var(--f-body);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--c-red); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---------- Type ---------- */
h1, .h1 { font: 700 var(--t-h1)/1.2 var(--f-serif); text-wrap: pretty; }   /* lines run full width, only avoiding a lone last word (QA #214/#215) */
h2, .h2 { font: 700 var(--t-h2)/1.2 var(--f-serif); text-wrap: pretty; }
h3, .h3 { font: 700 var(--t-h3)/1.25 var(--f-serif); color: var(--c-purple); text-wrap: pretty; }   /* purple on light backgrounds */
h4, .h4 { font: 800 var(--t-nav)/1.1 var(--f-cond); text-transform: uppercase; letter-spacing: .01em; }
h5, .h5 { font: 700 var(--t-body)/1.44 var(--f-body); }
.sub { font: italic 400 var(--t-sub)/1.25 var(--f-serif); }
/* Subheading under a block heading, one level down (QA #91). Pulled up inside the grid containers. */
.subhead { margin-top: 6px; font-style: italic; }   /* subheadings are always italic (QA #180) */
:is(.rt, .split__text) > .subhead { margin-top: -12px; }
.cards__head > .subhead { margin-top: -6px; }
/* Heading + intro stack used by several blocks. */
.rt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; justify-items: start; }   /* the column never grows wider than the page (multi-column text) */
.eyebrow { font: 800 var(--t-person)/1 var(--f-cond); text-transform: uppercase; letter-spacing: .01em; }
.small { font-size: var(--t-small); line-height: 1.23; letter-spacing: -.03em; }
.prose > * + * { margin-top: 1em; }
.prose a { color: var(--c-red); font-weight: 700; text-decoration: none; }
.prose a:hover { color: var(--c-red-hover); }
.prose ul { padding-left: 1.25em; list-style: square; }   /* traditional bullets, small squares (QA #196) */
.prose ul > li::marker { color: var(--c-purple); font-size: .8em; }
.prose ul > li + li { margin-top: 6px; }
.section--night .prose ul > li::marker { color: var(--c-lavender); }

/* ---------- Buttons ---------- */
/* .btn_red_outline_big, and the .btn inside post text: button classes from posts imported from the live site. */
.btn, .prose a.btn, .prose .btn_red_outline_big {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 16px;
  background: var(--c-red); color: var(--c-white);
  font: 800 var(--t-nav)/1.2 var(--f-cond); letter-spacing: .04em; text-transform: uppercase;   /* QA #140 */
  text-decoration: none; border: 0; cursor: pointer;
  transition: background-color .15s;
}
.btn:hover, .prose a.btn:hover, .prose .btn_red_outline_big:hover { background: var(--c-red-hover); }
.btn--purple { background: var(--c-purple-dark); }
.btn--purple:hover { background: var(--c-purple); }
.btn--light { background: var(--c-white); color: var(--c-red); }
.btn--light:hover { background: var(--c-red); color: var(--c-white); }
.btn--ghost { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
.btn--ghost:hover { background: rgb(255 255 255 / .12); }
.btn--block { display: flex; width: 100%; }

/* ---------- Layout ---------- */
/* Content column: 1317px wide, starting 264px from the left at 1728,
   i.e. clear of the red side banner, and never closer than --gap to an edge. */
.wrap {
  width: min(var(--wrap), 100% - var(--banner-w) - var(--gap) * 2);
  margin-left: max(var(--banner-w) + var(--gap), (100% - var(--wrap)) / 2 + 58px);
  margin-right: auto;
}
@media (max-width: 1199px) { .wrap { margin-left: auto; } }
.wrap--narrow { --wrap: 920px; }

.section { padding-block: var(--section-y); }
.section--wash { background: var(--c-wash); }
.section--night { background: var(--g-night); color: var(--c-white); }
.section--plum { background: var(--c-plum); }   /* a night section in Season 41 plum (it carries both classes) */
.section--night :is(h1, h2, h3, h4) { color: var(--c-lavender); }
.section.section--flush-top { padding-top: 0; }   /* "Remove top padding" switch */
.section.section--flush-bottom { padding-bottom: 0; }
.stack > * + * { margin-top: var(--stack); }

/* ---------- Side banner ---------- */
.side-banner {
  position: fixed; inset: 0 auto 0 0; z-index: 30;
  width: var(--banner-w); height: 100vh;
  background: url(../img/side-banner.webp) left top / 100% 100% no-repeat;
}
@media (max-width: 1199px) { .side-banner { display: none; } }

/* ---------- Header ---------- */
/* Over a page that opens on a dark band (hero, show, event, news), the header starts transparent with
   white links and icons, and turns white once the page scrolls or a menu opens (QA #136). */
.overlay-header .site-header { position: fixed; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; background: transparent; transition: background-color .25s, box-shadow .25s; }
.overlay-header .site-header.is-solid { background: var(--c-white); box-shadow: 0 2px 14px rgb(0 0 0 / .08); }
.overlay-header .site-header:not(.is-solid) .nav > li > a { color: var(--c-white); }
.overlay-header .site-header:not(.is-solid) .nav > li > a:hover { color: var(--c-lavender); }
.overlay-header .site-header:not(.is-solid) .icon-btn img { filter: brightness(0) invert(1); }
.overlay-header .site-header:not(.is-solid) .menu-toggle span,
.overlay-header .site-header:not(.is-solid) .menu-toggle span::before,
.overlay-header .site-header:not(.is-solid) .menu-toggle span::after { background: var(--c-white); }
/* The dark band starts at the very top, under the header. */
.overlay-header .hero { min-height: calc(var(--hero-min) + var(--header-h)); padding-top: calc(46px + var(--header-h)); }
.overlay-header .hero--feature { padding-top: var(--header-h); }
.overlay-header .show { padding-top: calc(46px + var(--header-h)); }

.site-header {
  position: sticky; top: var(--bar-h); z-index: 20;
  background: var(--c-white);
  height: var(--header-h);
}
.site-header .wrap { width: auto; margin-right: 0; height: 100%; display: flex; align-items: center; gap: clamp(10px, 1.2vw, 20px); container-type: inline-size; }   /* runs to the right edge: the tiles sit flush against it */
.site-logo { flex: none; }
.site-logo img { width: 45px; height: auto; }
.nav-wrap { flex: 1; }
.nav {
  display: flex; align-items: center; justify-content: space-between; max-width: 860px; margin-inline: auto;
  --nav-size: clamp(16px, 1.8vw - 5.5px, 20px);   /* top-level and dropdown links: 16px at 1200 wide, full size by about 1420, so the menu fits beside the buttons */
}
.nav > li { position: relative; }
.nav > li > a {
  display: block; padding: 12px clamp(3px, .5vw - 2px, 6px); white-space: nowrap;   /* the dropdown arrow stays beside its label */
  font: 800 var(--nav-size)/1 var(--f-cond); text-transform: uppercase; text-decoration: none;
}
.nav > li > a:hover, .nav > li:focus-within > a { color: var(--c-red); }
.nav .has-sub > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 4px 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.subnav {
  position: absolute; left: -12px; top: 100%; min-width: 260px;
  padding: 10px 0; background: var(--c-white); box-shadow: 0 10px 30px rgb(0 0 0 / .15);
  opacity: 0; visibility: hidden; translate: 0 6px; transition: opacity .15s, translate .15s, visibility .15s;
}
.has-sub:hover .subnav, .has-sub:focus-within .subnav { opacity: 1; visibility: visible; translate: 0 0; }
.subnav a { display: block; padding: 8px 18px; font: 400 var(--nav-size)/1.25 var(--f-cond); text-transform: uppercase; text-decoration: none; color: var(--c-text); }   /* Futura PT Condensed Book, same size as the top level (QA #172) */
.subnav a:hover { background: var(--c-wash); color: var(--c-purple); }
/* Quick-link tiles at the right of the header, full header height: Calendar, Shop, Donate, Buy Tickets. */
.nav-tiles { display: none; }
.header-tiles { align-self: stretch; display: flex; }
.tile {
  display: flex; align-items: center; justify-content: center; gap: clamp(6px, .6vw, 10px); padding: 0 clamp(8px, 2.2vw - 18px, 30px);   /* tighter on narrower desktops so the bar fits */
  font: 800 var(--nav-size, 20px)/1 var(--f-cond); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
  text-decoration: none; color: var(--c-white); transition: background-color .15s, color .15s;
}
.tile .icon { flex: none; width: auto; height: 1.45em; }
/* Each tile is two colors; on hover (or keyboard focus) they swap: the text and icon take the background color and the background turns white (QA #257). */
.tile--calendar { --tile-bg: var(--c-red); --tile-fg: var(--c-white); }
.tile--shop { --tile-bg: var(--c-purple); --tile-fg: var(--c-white); }
.tile--donate { --tile-bg: var(--c-purple-dark); --tile-fg: var(--c-white); }
.tile--tickets { --tile-bg: var(--c-red); --tile-fg: var(--c-white); }   /* same as Calendar (QA #242) */
.tile { background: var(--tile-bg); color: var(--tile-fg); }
.tile:is(:hover, :focus-visible) { background: var(--tile-fg); color: var(--tile-bg); }
/* Narrower desktops: Shop, Donate and Buy Tickets show their icon only (the label stays for screen readers);
   Calendar keeps its label (QA #236, #240). Phones and tablets: all four as icons (below). */
@container (max-width: 1420px) {
  .header-tiles .tile:not(.tile--calendar) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .header-tiles .tile:not(.tile--calendar) { padding-inline: clamp(12px, 1.2vw, 18px); }
}
.icon-btn { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; background: none; border: 0; cursor: pointer; }
.menu-toggle { display: none; }
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { display: block; width: 32px; height: 3px; background: var(--c-red); position: relative; transition: transform .2s, background-color .2s; }
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; }
.menu-toggle span::before { top: -11px; }
.menu-toggle span::after { top: 11px; }
.menu-open .menu-toggle span { background: transparent; }
.menu-open .menu-toggle span::before { transform: translateY(11px) rotate(45deg); }
.menu-open .menu-toggle span::after { transform: translateY(-11px) rotate(-45deg); }

.search-panel { position: fixed; top: var(--sticky-top); left: 0; right: 0; z-index: 19; background: var(--c-white); border-top: 1px solid var(--c-wash); box-shadow: 0 8px 20px rgb(0 0 0 / .08); }   /* opens under the header wherever the page is scrolled (QA #146) */
.search-panel form { display: flex; gap: 12px; padding-block: 16px; }
.search-panel input { flex: 1; min-width: 0; padding: 10px 14px; border: 1px solid var(--c-line); background: var(--c-white); }

@media (max-width: 1199px) {
  .site-logo img { width: 58px; }
  .site-header .nav-wrap { flex: none;
    position: fixed; inset: var(--sticky-top) 0 0 0; z-index: 19;
    background: var(--c-white); overflow-y: auto; padding: 24px var(--gap) 40px;
    display: none;
  }
  .menu-open .nav-wrap { display: block; }
  .menu-open .header-tiles { display: none; }   /* the open menu shows the same four tiles with labels (QA #274) */
  .menu-open { overflow: hidden; }
  .nav { display: block; max-width: none; --nav-size: 26px; }
  .nav > li { border-bottom: 1px solid var(--c-wash); }
  .nav > li > a { padding: 16px 0; }
  .nav .has-sub > a::after { display: none; }
  .subnav { position: static; opacity: 1; visibility: visible; translate: none; box-shadow: none; padding: 0 0 12px; min-width: 0; }
  .menu-toggle { display: grid; }
  /* The open menu repeats them with labels, above Season Shows (QA #243): two across on phones, four on tablets. */
  .nav-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 20px; }
  .nav-tiles .tile { min-height: 60px; padding: 10px 8px; --nav-size: 19px; }
  /* All four tiles stay in the bar as icons (QA #241); their labels are for screen readers. */
  .header-tiles .tile { padding-inline: 14px; --nav-size: 20px; }
  .header-tiles .tile span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .search-toggle { margin-left: auto; }
  .site-header .wrap { margin-left: var(--gap); padding-right: var(--gap); gap: 12px; }
}
@media (max-width: 767px) {
  .site-logo img { width: 52px; }
  .site-header .wrap { gap: 6px; }
  .header-tiles .tile { padding-inline: 10px; }
}
@media (max-width: 599px) {
  .nav-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Breadcrumb ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--t-small); line-height: 19px; letter-spacing: -.03em; color: var(--c-white); }
.crumbs__home { display: inline-flex; }
.crumbs__home .icon { width: 16px; height: 16px; }
.crumbs img { width: 14px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ---------- Footer ---------- */
.site-footer { background: var(--c-charcoal); color: var(--c-white); padding-block: 71px 64px; }
.site-footer .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 394px)); gap: 40px 72px; }
.site-footer h2 { font: 700 var(--t-h3)/1.2 var(--f-serif); color: var(--c-white); }
.footer-col { display: flex; flex-direction: column; gap: 30px; align-items: flex-start; }
.footer-links { display: grid; gap: 10px; font: 800 var(--t-nav)/1.2 var(--f-cond); text-transform: uppercase; color: var(--c-red); }
.footer-links a { text-decoration: none; }
.signup { width: 100%; }
.signup input { width: 100%; height: 43px; padding: 0 18px; border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-text); }
.signup input::placeholder { color: rgb(0 0 0 / .5); }
/* Bloomerang mailing-list form (injected by signup.js). Selectors outrank the embed's own <style>. */
.signup { min-height: 260px; }
.section .signup { max-width: 460px; padding: 28px; background: var(--c-purple); color: var(--c-white); }   /* holds the space so the footer doesn't jump when the form arrives */
.signup .email-registration-form p.h6 { display: none; }   /* the footer heading already says this */
.signup .email-registration-form .section { padding: 0; }   /* Bloomerang reuses the theme's .section class */
.signup .email-registration-form .section.contact { display: grid; gap: 12px; }
.signup .email-registration-form .field { padding: 0; }
.signup .email-registration-form label { display: block; margin-bottom: 4px; color: var(--c-white); font-size: 14px; }
.signup .email-registration-form .field .required-star { color: var(--c-red); }
.signup .email-registration-form .field input { width: 100%; height: 43px; padding: 0 14px; border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-text); }
.signup .email-registration-form .consent { padding: 4px 0 0; font-size: 14px; opacity: .8; }
.signup .email-registration-form .section.captcha { margin-top: 12px; }
.signup .btn-group .btn-submit-email { width: 100%; margin-top: 15px; padding: 8px 16px; background: var(--c-red); color: var(--c-white); border: 0; cursor: pointer; font: 800 var(--t-nav)/22px var(--f-cond); letter-spacing: .04em; text-transform: uppercase; }
.signup .btn-group .btn-submit-email:hover { background: var(--c-red-hover); }
.signup .email-registration-form label.error, .signup .email-registration-form .errors { color: #ffb3b6; border-color: #ffb3b6; padding: 4px 0 0; }
.social { display: flex; gap: 15px; }
.social img { width: 40px; height: 46px; }
.contact { display: grid; gap: 15px; font-style: normal; }
.contact a { color: var(--c-red); text-decoration: none; }
@media (max-width: 1199px) { .site-footer .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .site-footer .wrap { grid-template-columns: 1fr; } }

/* Space between a module heading block and its content */
.mt { margin-top: 40px; }

/* Back-to-back sections on the same background share one gap. */
.section--night + .section--night,
.section--wash + .section--wash,
.section:not(.section--night):not(.section--wash) + .section:not(.section--night):not(.section--wash) { padding-top: 0; }

/* ---------- News ---------- */
/* News filter bar (QA #122) */
.news-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 40px; }
.news-filter__label { font: 400 var(--t-label)/1 var(--f-cond); text-transform: uppercase; color: var(--c-purple); }
.news-filter select { min-width: 220px; padding: 9px 36px 9px 12px; border: 2px solid var(--c-purple); border-radius: 0; background: var(--c-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232b0051' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center; font: 400 16px/1.2 var(--f-body); color: var(--c-text); appearance: none; cursor: pointer; }
@media (max-width: 599px) { .news-filter select { flex: 1 1 100%; min-width: 0; } }

/* News post (QA #124): a sticky left column (breadcrumb, image, date, categories, tags), title and text on the right. */
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 56px; align-items: start; }
.post-aside { position: sticky; top: calc(var(--sticky-top) + 32px); display: grid; gap: 20px; }
.post-main .crumbs { margin-bottom: 20px; color: var(--c-text); }
.post-main .crumbs a { color: inherit; }
.post-aside figure img { width: 100%; height: auto; }
.post-aside figcaption, .post-gallery figcaption { margin-top: 8px; font-size: var(--t-small); line-height: 1.35; color: #555; }
/* Photo gallery under a post's text: two across, each photo whole, with its caption; click for full size. */
/* Photo galleries (news posts, events): one row that scrolls sideways; photo-strip.js adds the arrows (QA #250, #254). */
.photo-strip { min-width: 0; }
.photo-strip ul { margin: 0; padding: 0; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.photo-strip ul::-webkit-scrollbar { display: none; }
.photo-strip li { scroll-snap-align: start; }
.strip-nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.strip-nav[hidden] { display: none; }
.strip-arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2px solid currentColor; border-radius: 50%; background: transparent; color: var(--c-purple-dark); cursor: pointer; }
.strip-arrow:not(:disabled):is(:hover, :focus-visible) { background: var(--c-purple-dark); color: var(--c-white); }
.section--night .strip-arrow { color: var(--c-white); }
.section--night .strip-arrow:not(:disabled):is(:hover, :focus-visible) { background: var(--c-white); color: var(--c-purple-dark); }
.strip-arrow:disabled { opacity: .35; cursor: default; }
.post-gallery { margin-top: 48px; }
.post-gallery__intro { max-width: 760px; margin-bottom: 24px; }
/* Photos keep their shape: one height, their own width; captions wrap to the photo's width. */
.post-gallery ul { display: flex; gap: 24px; align-items: start; margin: 0; padding: 0; list-style: none; }
.post-gallery li { flex: none; }
.post-gallery img { width: auto; height: clamp(260px, 30vw, 420px); max-width: calc(100vw - 2 * var(--gap)); object-fit: cover; }
.post-gallery figcaption { contain: inline-size; }
.post-meta { display: grid; gap: 14px; font-size: var(--t-small); }
.post-meta dt { font: 400 var(--t-label)/1 var(--f-cond); text-transform: uppercase; color: var(--c-purple); }
.post-meta dd { margin: 4px 0 0; }
.post-meta a { color: var(--c-red); font-weight: 700; text-decoration: none; }
.post-meta a:hover { text-decoration: underline; }
.post-main h1 { margin-bottom: 32px; }
@media (max-width: 767px) {
  .post-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .post-aside { display: contents; }   /* one column: photo, then the post, then date, categories and tags (QA #193) */
  .post-aside figure { order: -1; }
  .post-meta { order: 1; padding-top: 24px; border-top: 1px solid var(--c-line); }
}
.post-body { max-width: 760px; }
/* Full-width posts (built with the page modules): date, categories and tags in a row at the bottom. */
.post-foot { padding-block: 40px; border-top: 1px solid var(--c-line); }
.post-foot .post-meta { grid-template-columns: repeat(3, max-content); gap: 16px 56px; }
@media (max-width: 599px) { .post-foot .post-meta { grid-template-columns: minmax(0, 1fr); } }
.post-body__image { margin-bottom: 40px; }
.post-body .prose img { height: auto; }
.post-body .prose h2 { margin-top: 1.4em; }
.post-body .prose h3 { margin-top: 1.2em; }
.prose h5 > :is(i, em) { margin-left: .35em; }   /* bios imported from live: "Name<i>Role</i>" (QA #198) */
/* Tables in posts (QA #181-#183): the site's table style instead of core's black cell borders. */
.post-body .wp-block-table { margin: 24px 0; overflow-x: auto; }
.post-body .wp-block-table table { width: 100%; border-collapse: collapse; }
.post-body .wp-block-table :is(th, td) { padding: 14px 16px; border: 0; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; line-height: 1.45; }
.post-body .wp-block-table th { background: var(--c-black); color: var(--c-white); font: 800 var(--t-nav)/1 var(--f-cond); letter-spacing: .03em; text-transform: uppercase; }
.post-body .wp-block-table td { background: var(--c-wash); }
.post-body .wp-block-table td:first-child { font-weight: 700; }
.post-body .wp-block-table thead { border: 0; }
/* Season lineup in a post: poster beside title, credits, dates, tagline, text and button. */
.post-body .season-show { gap: 32px; margin: 32px 0; }
.post-body .season-show img { width: 100%; height: auto; }
.post-body .season-show__title { margin: 0 0 6px; font: italic 700 var(--t-h3)/1.2 var(--f-serif); }
.post-body .season-show__by { margin: 0; font-family: var(--f-serif); }
.post-body .season-show p:has(> .btn) { margin-top: 20px; }   /* space above each show's button (QA #184) */
.post-body .season-show__dates { margin: 10px 0 4px; font: 800 var(--t-nav)/1.2 var(--f-cond); letter-spacing: .04em; text-transform: uppercase; color: var(--c-red); }
.pager { display: flex; flex-wrap: wrap; gap: 10px; }
.pager .page-numbers { padding: 6px 12px; border: 1px solid var(--c-line); text-decoration: none; }
.pager .current { background: var(--c-purple); border-color: var(--c-purple); color: var(--c-white); }

/* "Read more" style link: bold Futura, one right chevron, no underline. */
/* Phone and email links with an icon (QA #111, #112). */
.icon-link { white-space: nowrap; }   /* stays on the text's own line: no taller line box (QA #222) */
.icon-link .icon { display: inline-block; width: auto; height: 1.15em; margin-right: .3em; vertical-align: -.22em; }
/* Photo viewer for posts (lightbox.js, QA #212) */
.lightbox { width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; padding: 56px 72px 40px; border: 0; background: rgb(10 4 18 / .94); color: var(--c-white); }
.lightbox::backdrop { background: transparent; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox__figure { display: grid; justify-items: center; gap: 12px; max-height: 100%; }
.lightbox__figure img { max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto; object-fit: contain; }
.lightbox__figure figcaption { max-width: 760px; text-align: center; font-size: var(--t-small); line-height: 1.4; }
.lightbox__count { position: absolute; top: 18px; left: 24px; margin: 0; font: 400 var(--t-label)/1 var(--f-cond); }
.lightbox button { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; background: none; color: var(--c-white); font: 300 44px/1 var(--f-body); cursor: pointer; }
.lightbox button:hover { color: var(--c-lavender); }
.lightbox__close { top: 8px; right: 12px; }
.lightbox__prev { left: 12px; top: 50%; translate: 0 -50%; }
.lightbox__next { right: 12px; top: 50%; translate: 0 -50%; }
.lightbox--single :is(.lightbox__prev, .lightbox__next) { display: none; }
@media (max-width: 599px) { .lightbox { padding: 56px 12px 24px; } .lightbox :is(.lightbox__prev, .lightbox__next) { top: auto; bottom: 8px; translate: none; } }
.card__link { display: inline-block; font: 800 var(--t-nav)/1.1 var(--f-cond); text-transform: uppercase; color: var(--c-red); text-decoration: none; }
.card__link::after { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 2px 0 8px; vertical-align: .12em; border: solid currentColor; border-width: 2.5px 2.5px 0 0; transform: rotate(45deg); }
.card__link .term { white-space: nowrap; }   /* QA #245/#246: "Pay What You CAN" stays on one line */
.card__link:hover, a:hover > .card__link { color: var(--c-red-hover); }

/* ---------- Entrance animations (motion.js adds .motion and data-reveal) ---------- */
.motion [data-reveal] { opacity: 0; transition: opacity .7s ease, translate .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--reveal-delay, 0ms); }
.motion [data-reveal="up"] { translate: 0 24px; }
.motion [data-reveal="left"] { translate: -40px 0; }
.motion [data-reveal="right"] { translate: 40px 0; }
.motion [data-reveal].is-in { opacity: 1; translate: 0 0; }