/* Split Mask Theatre Company: site styles.
   Every colour is a custom property. build.mjs sets them on each page from the show
   the page belongs to (the "theme.*" lines in shows/*.md), so the whole site takes
   on the look of the next production. */

:root {
  --bg: #FBF8F1;        /* page background */
  --ink: #1E2A24;       /* body text, header, footer */
  --accent: #AC1E23;    /* big colour blocks, headings, buttons */
  --accent2: #31493C;   /* decoration only (never small text) */
  --highlight: #FDCD79; /* pop colour: nav underline, buttons on accent, sticker */
  --onaccent: #FFFFFF;  /* text on the accent colour */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --text: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --header-h: 5rem;     /* height of the fixed menu; pages without a poster start below it */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
/* Always keep room for the scroll bar, so pages too short to scroll don't shift sideways. */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

/* Scroll bar in the show's colours: accent-coloured handle on the page colour. */
html { scrollbar-color: var(--accent) var(--bg); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 6px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ink); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.65 var(--text); }
.page { display: flex; flex-direction: column; min-height: 100vh; background: var(--bg); color: var(--ink); }
.page > main { flex: 1; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: none; transition: opacity 0.2s ease; }
a:hover { opacity: 0.75; }
.btn:hover, .site-header a:hover, .gallery a:hover, .lightbox a:hover { opacity: 1; }
a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
p { margin: 0 0 1em; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

h1, h2, h3 {
  margin: 0; font-family: var(--display); font-stretch: 112%; font-weight: 850;
  line-height: 1; letter-spacing: -0.015em; text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 8vw, 5rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); }

.wrap {
  width: 100%; max-width: 1120px; margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.eyebrow { margin: 0 0 0.9rem; font: 700 0.8rem/1.2 var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }

/* Faded halftone dots, echoing the lettering on the Next to Normal poster. */
.dots { position: relative; isolation: isolate; overflow: hidden; }
.dots::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: var(--dots-h, 170px); z-index: -1;
  background-image: radial-gradient(circle, var(--onaccent) 0 1.9px, transparent 2.4px);
  background-size: 13px 13px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
  opacity: 0.32;
}

/* Header and footer */
/* The menu is a solid bar in the page colour, fixed to the top of the window.
   Brand: the mask on its own, then SPLITMASKTHEATRECOMPANY on two lines with the words in
   alternating colours (--word1 / --word2, set per show). site.js sizes the wordmark to fit.
   Top right: a slim strip of social icons (--social-h tall). The menu buttons run the full height
   of the bar, so their hover glow rises all the way to the top, passing behind the icons. */
.site-header {
  --logo-h: 64px;
  --social-h: 1.6rem;
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: var(--bg); color: var(--ink);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent);
}
.site-header .bar {
  position: relative;
  display: flex; align-items: stretch; justify-content: space-between; gap: 0.75rem 1.1rem;
}
.brand {
  position: relative; display: flex; align-items: center; gap: 1.1rem; flex: 0 1 auto; min-width: 0;
  align-self: center; margin-block: 0.4rem; text-decoration: none;
}
.brand:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.brand img { flex: none; height: var(--logo-h); width: auto; }
.wordmark {
  white-space: nowrap; text-transform: uppercase;
  font: 900 var(--wm-compact, 1.2rem)/1 var(--display); font-stretch: 100%; letter-spacing: -0.005em;
}
.wm-line { display: block; }
.wm-line > span:nth-child(odd) { color: var(--word1); }
.wm-line > span:nth-child(even) { color: var(--word2); }
/* If the bar is too narrow for the wordmark (mid-size windows), the logo stands alone. */
.wm-off .wordmark { position: absolute; visibility: hidden; }
/* The menu never gets squeezed by the logo and wordmark (flex: none). */
.site-header nav { display: flex; flex: none; }

/* Social icons: the strip at the top right of the bar, lined up with the menu's right edge,
   sitting on top of the menu's glow. */
.social { display: flex; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }
.bar > .social {
  /* --social-inset (set by site.js) moves the strip in so the last icon ends where the last
     menu word ends, rather than at the edge of its button. */
  position: absolute; top: 0; z-index: 2;
  right: calc(max(16px, env(safe-area-inset-right, 0px)) + var(--social-inset, 0px));
  height: var(--social-h); align-items: center;
}
.social a {
  display: grid; place-items: center; width: 2rem; height: var(--social-h);
  color: var(--accent); border-radius: 4px;
  transition: color 0.2s ease, transform 0.2s ease;
}
.social a:hover { color: var(--ink); transform: translateY(1px) scale(1.15); }
.social a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.social svg { display: block; }
.nav-social { display: none !important; } /* the phone menu's copy of the icons */
.menu-toggle { display: none; } /* the burger button only appears on phones */
/* Menu links: the show's accent colour (purple for Next to Normal), all the same width.
   Hover and the current page show an accent-coloured glow, solid at the bottom of the text and
   fading upwards to transparent at the top of the page. --nav-item-w sets the width of every link. */
.site-header nav > ul { --nav-item-w: 7.6rem; display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-end; gap: 0 0.3rem; margin: 0; padding: 0; list-style: none; }
.site-header nav > ul > li { display: flex; }
.site-header nav > ul > li > a {
  display: flex; align-items: flex-end; justify-content: center;
  width: var(--nav-item-w); padding: 0.5rem 0 0.4rem; text-align: center;
  color: var(--accent); text-decoration: none;
  font: 700 0.9rem/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase;
  /* The hover glow works like a Photoshop gradient with opacity stops. Each line is
     "how much purple" at "how far up the button" (0% = bottom, 100% = top of the page).
     It falls away steadily above the text, then tails off gently into transparent at the top. */
  --glow: linear-gradient(to top,
    var(--accent) 0%,
    color-mix(in srgb, var(--accent) 88%, transparent) 12%,
    color-mix(in srgb, var(--accent) 68%, transparent) 26%,
    color-mix(in srgb, var(--accent) 48%, transparent) 40%,
    color-mix(in srgb, var(--accent) 30%, transparent) 55%,
    color-mix(in srgb, var(--accent) 16%, transparent) 70%,
    color-mix(in srgb, var(--accent) 6%, transparent) 85%,
    transparent 100%);
  position: relative; isolation: isolate;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
/* The glow (::before) and the yellow line (::after) sit behind the word.
   On hover the glow grows up from the bottom of the button with a slight spring at the end,
   fading in as it goes; the yellow line fades in. Both reverse when the pointer leaves. */
.site-header nav > ul > li > a::before, .site-header nav > ul > li > a::after {
  content: ""; position: absolute; z-index: -1; opacity: 0;
}
/* The glow grows by animating its background height, not a transform: a transform makes the
   browser draw it as a separate pixel-snapped layer, which pokes out a pixel past the button
   while it animates. */
.site-header nav > ul > li > a::before {
  inset: 0; background: var(--glow) no-repeat center bottom / 100% 0%;
  transition: background-size 0.35s cubic-bezier(0.34, 1.5, 0.64, 1), opacity 0.25s ease;
}
.site-header nav > ul > li > a::after {
  left: 0; right: 0; bottom: 0; height: 4px; background: var(--highlight);
  transition: opacity 0.25s ease;
}
/* Hover (including over the page you're on): the glow rises behind the word with the yellow
   line along its base, and the text turns white with an accent halo to stay readable. */
.site-header nav > ul > li > a:hover::before { opacity: 1; background-size: 100% 100%; }
.site-header nav > ul > li > a:hover::after { opacity: 1; }
.site-header nav > ul > li > a:hover { color: var(--onaccent); text-shadow: 0 0 6px var(--accent), 0 0 2px var(--accent); }
/* The page you're on: the yellow line stays on. */
.site-header nav > ul > li > a[aria-current]::after { opacity: 1; }
.site-footer a:focus-visible { outline-color: var(--highlight); }
.site-footer { background: var(--ink); color: var(--bg); padding-block: 2.2rem; font-size: 1rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2.5rem; }
.site-footer a { color: var(--highlight); }
.site-footer p { margin: 0; }
/* NODA membership: their logo (from the Footloose programme) and a link to our page on their site */
.site-footer .noda { display: inline-flex; align-items: center; gap: 0.8rem; color: var(--bg); font: 700 0.78rem/1.2 var(--display); letter-spacing: 0.1em; text-transform: uppercase; }
.site-footer .noda img { width: 96px; height: auto; display: block; }
.site-footer .noda:hover { opacity: 0.8; }
/* Social logos in the footer: larger, gold on the dark footer, white on hover. */
.site-footer .wrap { align-items: center; }
.footer-social { gap: 0.4rem; margin-inline: -10px; } /* lines the drawings up with the text edges */
.footer-social a { width: 2.75rem; height: 2.75rem; color: var(--highlight); }
.footer-social svg { width: 24px; height: 24px; }
.footer-social a:hover { color: #fff; }
.footer-social a:focus-visible { outline-color: var(--highlight); }

/* Hero: the show's poster or artwork, always the full width of the window at its natural
   proportions. It is never cropped, so licensed logos and credit lines stay in.
   Parallax: site.js moves .hero-inner down as you scroll, so the hero moves more slowly than the
   page and the sections below slide up over it. */
.hero-poster, .hero-art { position: relative; overflow: hidden; isolation: isolate; }
.hero-poster { background: var(--bg); }
.hero-inner { position: relative; will-change: transform; }
.hero-inner img { position: relative; width: 100%; height: auto; }
/* Layered hero: a full-height split. The artwork fills the right-hand share of the screen (--hl-art-share)
   (cropped around --focus); the show's title logo and our live text fill the left, lined up with
   the logo and menu. The proportions stay the same from laptop to widescreen. The art drifts
   slowest, the text a little faster, for a sense of depth. */
.hero-layered {
  --hl-art-share: 0.52; /* 0.52 = the artwork takes 52% of the width */
  /* where the page's content column starts, so the text lines up with the logo */
  --wrap-left: max(16px, calc((100vw - 1120px) / 2 + 16px));
  /* the text column: from the logo's edge to just short of the artwork */
  --hl-col: min(36rem, calc(100vw * (1 - var(--hl-art-share)) - var(--wrap-left) - 2.5rem));
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center;
  /* As tall as the artwork panel needs to show the whole image uncropped (--art-ratio is the
     image's width ÷ height), up to the full height of the window. */
  min-height: min(100vh, calc(100vw * var(--hl-art-share) / var(--art-ratio, 1)));
  min-height: min(100svh, calc(100vw * var(--hl-art-share) / var(--art-ratio, 1)));
  background: var(--hero-bg, var(--bg));
}
.hl-art {
  position: absolute; top: 0; bottom: 0; right: 0; width: calc(var(--hl-art-share) * 100%); z-index: -1;
  background: center / cover no-repeat; background-position: var(--focus); will-change: transform;
}
.hl-content { position: relative; padding-top: var(--header-h); will-change: transform; }
.hl-content > * { max-width: var(--hl-col); }
.hl-title { margin: 0 0 1.4rem; width: var(--hl-col); }
.hl-title img { width: 100%; height: auto; }
/* On the home page the title links to the show's page: it lifts slightly on hover. */
.hl-title a { display: block; border-radius: 4px; }
.hl-title a img { transition: transform 0.25s ease; }
.hl-title a:hover img { transform: scale(1.02); }
.hl-title a:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }
.hl-about { margin: 1.1rem 0 0; }
/* Company hero (between seasons): a big headline in place of a show title, and the Split Mask logo
   in the art panel until the company reel exists. */
.hl-heading { margin: 0 0 1.2rem; font-size: clamp(2.4rem, 4.6vw, 4.2rem); line-height: 0.95; color: var(--accent); text-wrap: balance; }
.hl-mark { background-size: min(70%, 30rem) !important; background-position: center !important; }
.hl-when { margin: 0 0 0.3rem; font: 850 clamp(1.4rem, 2.3vw, 2.2rem)/1.1 var(--display); font-stretch: 112%; color: var(--ink); text-wrap: balance; }
.hl-venue { margin: 0 0 1.5rem; font-weight: 600; max-width: min(var(--hl-col), 30ch); }

/* On phones and portrait-shaped screens (taller than wide), the art becomes a tall picture at the
   top, cropped around the focal point, with the title and text underneath on the page colour.
   Anything wider than it is tall keeps the half-and-half split. */
/* Full-bleed layout (hero_layout: full): the artwork fills the whole hero, and the text sits over
   its left half, on a soft wash of the hero colour so it stays readable over sparkly artwork. */
.hero-layered.hl-full {
  --hl-art-share: 1;
  --hl-col: min(30rem, calc(40vw - var(--wrap-left) - 1rem)); /* ends before 40% of the width, clear of the figure */
}
.hl-full .hl-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, color-mix(in srgb, var(--hero-bg, #000) 70%, transparent) 0, transparent 55%);
}
/* Video background (show_video, on the show's own page): the clip starts in line with the text's
   left edge (--wrap-left) and runs to the right edge of the window, sized so the whole frame shows.
   The page colour fades over its left part, behind the text. The fade's stops are measured across
   the window (26vw, 38vw, 62vw), so it sits in the same place as before the video was moved in. */
.hero-layered.hl-video {
  min-height: min(100vh, calc((100vw - var(--wrap-left)) / var(--art-ratio, 1.778)));
  min-height: min(100svh, calc((100vw - var(--wrap-left)) / var(--art-ratio, 1.778)));
}
/* same sum as the content column, measured against the hero's own width (so the scroll bar doesn't skew it) */
.hl-video .hl-art { left: max(16px, env(safe-area-inset-left, 0px), calc((100% - 1120px) / 2 + 16px)); width: auto; }
.hl-bgvideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus); }
.hl-video .hl-art::after {
  background: linear-gradient(to right, var(--bg) 0, var(--bg) calc(26vw - var(--wrap-left)), color-mix(in srgb, var(--bg) 75%, transparent) calc(38vw - var(--wrap-left)), transparent calc(62vw - var(--wrap-left)));
}
/* Light text (hero_text: light) for dark artwork. */
.hl-light .eyebrow { color: var(--highlight); }
.hl-light .hl-when, .hl-light .hl-venue { color: #fff; }
.hl-light .hl-content { text-shadow: 0 1px 14px rgb(0 0 0 / 0.35); }
.hl-light .btn { background: var(--highlight); color: var(--ink); border-color: var(--highlight); text-shadow: none; }
.hl-light .btn:hover { background: #fff; border-color: #fff; }
.hl-light .btn.is-off { background: transparent; color: #fff; border-color: #fff; }
.hl-light .more { color: #fff; }

@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .hero-layered { display: block; height: auto; min-height: 0; }
  .hl-full .hl-art::after { display: none; }
  .hl-art, .hl-video .hl-art { position: relative; inset: auto; left: auto; width: 100%; height: 56vh; height: 56svh; }
  .hl-content { padding-top: 1.4rem; padding-bottom: 2rem; transform: none !important; }
  .hl-content > * { max-width: none; }
  .hl-title { width: min(80vw, 420px); }
}

/* Slim ticket band (under a layered hero): just the date cards, with the price sticker beside them. */
.ticket-band-slim .dates { margin-top: 0; }
.ticket-band-slim .price { margin-bottom: 0; }

/* Everything after the hero sits above it, so it slides over the slower-moving hero. */
main > :not(.hero-poster, .hero-art, .hero-layered) { position: relative; z-index: 1; }
.hero-type { background: var(--accent); color: var(--onaccent); padding-block: calc(var(--header-h) + clamp(1.5rem, 5vw, 4rem)) clamp(2.5rem, 7vw, 5rem); }
.hero-type h1 { font-size: clamp(3.4rem, 14vw, 10rem); color: var(--onaccent); }
.hero-art { background: var(--ink); }
.card-art.fit { object-fit: contain; background: var(--ink); }
.band-title { margin: 0 0 0.4rem; font: 850 clamp(3.2rem, 11vw, 7.5rem)/0.95 var(--display); font-stretch: 112%; letter-spacing: -0.02em; color: var(--onaccent); }

/* Ticket band */
.ticket-band { background: var(--accent); color: var(--onaccent); padding-block: clamp(2.2rem, 5vw, 3.8rem); }
.ticket-band .eyebrow { color: var(--onaccent); }
.ticket-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.5rem 2.5rem; }
.big-dates { margin: 0 0 0.7rem; font: 850 clamp(2.1rem, 6vw, 4.4rem)/1 var(--display); font-stretch: 112%; letter-spacing: -0.015em; color: var(--onaccent); text-wrap: balance; }
.venue-line { margin: 0 0 1.4rem; font-weight: 600; font-size: 1.15rem; }
.sticker {
  display: grid; place-content: center; width: 8.6rem; aspect-ratio: 1; border-radius: 50%; text-align: center;
  background: var(--highlight); color: var(--ink); border: 3px solid var(--ink);
  transform: rotate(-9deg); box-shadow: 0 12px 24px -14px rgb(0 0 0 / 0.7);
}
.sticker .amt { font: 850 2.5rem/1 var(--display); font-stretch: 112%; }
.sticker .fees { font: 700 0.8rem/1.3 var(--display); letter-spacing: 0.12em; text-transform: uppercase; }

.dates { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-top: 2rem; }
.date-card {
  display: grid; gap: 0.15rem; padding: 1rem 1.2rem; text-decoration: none;
  border: 2px solid var(--onaccent); background: transparent; color: var(--onaccent);
}
.date-card .day { font: 850 2rem/1 var(--display); font-stretch: 112%; }
.date-card .time { font-weight: 700; }
.date-card .go { margin-top: 0.6rem; font: 700 0.78rem/1.2 var(--display); letter-spacing: 0.12em; text-transform: uppercase; }
.date-card:hover { background: var(--highlight); border-color: var(--highlight); color: var(--ink); }
.ticket-band a:focus-visible { outline-color: var(--highlight); }
.price { margin: 1rem 0 0; font-weight: 600; }

/* Buttons and links */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.6rem; margin: 0; }
.btn {
  display: inline-block; padding: 0.9em 1.6em; text-decoration: none;
  background: var(--accent); color: var(--onaccent); border: 2px solid var(--accent); border-radius: 2px;
  font: 800 0.95rem/1.1 var(--display); font-stretch: 108%; letter-spacing: 0.06em; text-transform: uppercase;
}
.btn:hover { background: var(--ink); border-color: var(--ink); }
.btn.on-accent { background: var(--highlight); color: var(--ink); border-color: var(--highlight); }
.btn.on-accent:hover { background: var(--onaccent); border-color: var(--onaccent); }
.btn.is-off { background: transparent; color: var(--ink); border: 2px dashed var(--ink); }
.ticket-band .btn.is-off { color: var(--onaccent); border-color: var(--onaccent); }
.more { font: 700 0.9rem/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; }

/* Content bands */
.band { padding-block: clamp(2.2rem, 5vw, 3.8rem); }
.band.gold { background: var(--highlight); color: var(--ink); }
.band.gold a.more { color: var(--ink); }
.lede { font-size: 1.35rem; line-height: 1.5; }
.prose { max-width: 62ch; }
.prose h2 { margin: 2rem 0 0.8rem; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.2em; }

/* Contact form */
.contact-form { display: grid; gap: 1.1rem; margin: 1.8rem 0 2.2rem; max-width: 36rem; }
.contact-form p { margin: 0; }
.cf-field { display: grid; gap: 0.35rem; }
.cf-field label { font: 700 0.8rem/1.2 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.cf-field :is(input, select, textarea) {
  width: 100%; padding: 0.7rem 0.8rem; font: 400 1rem/1.4 var(--text); color: var(--ink);
  background: #fff; border: 2px solid color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 3px;
}
.cf-field textarea { resize: vertical; min-height: 9rem; }
.cf-field :is(input, select, textarea):focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* hidden spam trap */
.cf-note { font-size: 0.9rem; opacity: 0.8; }
.contact-form .btn { cursor: pointer; font-family: var(--display); }
.contact-form .btn:disabled { opacity: 0.6; cursor: wait; }
.cf-status:empty { display: none; }
.cf-status { padding: 0.8rem 1rem; border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.cf-status[data-kind="ok"] { border-color: #2E7D4F; background: color-mix(in srgb, #2E7D4F 10%, var(--bg)); }
.cf-status[data-kind="error"] { border-color: #B3261E; background: color-mix(in srgb, #B3261E 8%, var(--bg)); }
.note { max-width: 62ch; margin: 1.8rem 0; padding: 1rem 1.2rem; border: 2px solid var(--ink); font-size: 1rem; }
.note p { margin: 0.3rem 0 0; }
.note strong { font: 700 0.78rem/1.2 var(--display); letter-spacing: 0.14em; text-transform: uppercase; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; margin-bottom: 1.6rem; }

/* Show cards */
.cards { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: stretch; }
/* Cards side by side share the row's height; the shadow is a soft glow in the show's second colour. */
.card { display: flex; flex-direction: column; background: var(--bg); color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 22px 48px -14px color-mix(in srgb, var(--accent2) 60%, transparent), 0 6px 16px -6px color-mix(in srgb, var(--accent2) 40%, transparent); }
.card-art-link { display: block; overflow: hidden; }
.card-art-link:hover { opacity: 1; }
.card-art-link .card-art { display: block; transition: transform 0.35s ease; }
.card-art-link:hover .card-art { transform: scale(1.04); }
.card-art { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; }
.card-art.type { display: grid; place-items: center; padding: 1rem; background: var(--accent); color: var(--onaccent); }
.card-art.type span { font: 850 clamp(2.6rem, 9vw, 4.2rem)/1 var(--display); font-stretch: 112%; letter-spacing: -0.015em; text-align: center; text-wrap: balance; }
.card-body { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; padding: 1.3rem 1.4rem 1.5rem; }
.card h3 { font-size: 1.9rem; color: var(--accent); }
.card p { margin: 0; }
.card .when { font: 700 1.15rem/1.3 var(--display); }
.card .actions { margin-top: auto; padding-top: 0.8rem; }

/* Inner page headers */
.page-head { background: var(--accent); color: var(--onaccent); padding-block: calc(var(--header-h) + 1.2rem) clamp(2.6rem, 7vw, 5rem); }
.page-head .eyebrow { color: var(--onaccent); }
.page-head h1 { font-size: clamp(2.8rem, 10vw, 6.4rem); color: var(--onaccent); }

/* Past productions */
.year { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; padding-block: 1.2rem; border-top: 2px solid var(--ink); }
.year h2 { color: var(--accent); font-variant-numeric: tabular-nums; }
.year ul { display: grid; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.year li { font: 700 1.3rem/1.3 var(--display); }
.year li a { color: var(--ink); }
/* Shows with photos: a small picture before the title */
.year li.has-photos a { display: inline-flex; align-items: center; gap: 0.8rem; }
.year li.has-photos img { width: 96px; height: 64px; object-fit: cover; border-radius: 4px; transition: transform 0.25s ease; }
.year li.has-photos a:hover img { transform: scale(1.06); }

.archive-intro { margin-bottom: 2.5rem; }
/* Archive page: the show's title artwork beside the intro, then audience quotes and the photo gallery */
.archive-intro.has-art { display: grid; grid-template-columns: minmax(0, 62ch) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.archive-intro .title-art { grid-column: 2; grid-row: 1; width: 100%; max-width: 30rem; height: auto; justify-self: center; border-radius: 6px; }
.archive-intro.has-art .prose { grid-column: 1; grid-row: 1; }
@media (max-width: 900px) {
  .archive-intro.has-art { grid-template-columns: minmax(0, 1fr); }
  .archive-intro .title-art, .archive-intro.has-art .prose { grid-column: 1; grid-row: auto; }
  .archive-intro .title-art { max-width: 22rem; justify-self: start; }
}
/* Archive page: audience quotes and the photo gallery */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.2rem; margin: 2rem 0 3rem; }
/* 3, 6 or 9 quotes sit in rows of three, so no row is left half-empty */
.quotes.quotes-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.quotes figure { margin: 0; padding: 1.4rem 1.4rem 1.2rem; background: var(--accent); color: var(--onaccent); border-radius: 6px; }
.quotes blockquote { margin: 0; }
.quotes blockquote p { margin: 0; font: 800 1.25rem/1.3 var(--display); font-stretch: 105%; }
.quotes blockquote p::before { content: "\201C"; display: block; font-size: 3rem; line-height: 0.6; margin-bottom: 0.4rem; color: var(--highlight); }
.quotes figcaption { margin-top: 0.9rem; font: 700 0.72rem/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.gallery-head { margin: 0 0 1.2rem; }
.gallery { columns: 3 16rem; column-gap: 1rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.gallery li { break-inside: avoid; margin-bottom: 1rem; }
.gallery a { display: block; overflow: hidden; border-radius: 6px; background: var(--ink); }
.gallery img { display: block; width: 100%; height: auto; transition: transform 0.35s ease, opacity 0.35s ease; }
.gallery a:hover img, .gallery a:focus-visible img { transform: scale(1.04); opacity: 0.9; }

/* Full-size photo viewer */
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(10, 10, 10, 0.94); color: #fff; }
.lightbox::backdrop { background: rgba(10, 10, 10, 0.94); }
.lightbox[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; }
.lightbox img { max-width: calc(100vw - 2rem); max-height: calc(100dvh - 5rem); object-fit: contain; border-radius: 4px; user-select: none; }
.lightbox .lb-count { white-space: nowrap; }
.lightbox .lb-bar { display: flex; gap: 1rem; align-items: center; padding: 0.8rem 1rem 1rem; font: 700 0.85rem/1.3 var(--display); }
.lightbox button { position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.lightbox button:hover, .lightbox button:focus-visible { background: var(--accent); }
.lightbox .lb-close { top: 1rem; right: 1rem; }
.lightbox .lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 760px) { .lightbox .lb-prev, .lightbox .lb-next { top: auto; bottom: 0.6rem; transform: none; } .lightbox .lb-bar { padding-inline: 4.5rem; } }

.tag { margin-left: 0.7rem; font: 700 0.72rem/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); opacity: 0.7; }

@media (max-width: 760px) {
  .ticket-grid { grid-template-columns: minmax(0, 1fr); }
  .sticker { width: 6.8rem; justify-self: start; }
  .sticker .amt { font-size: 2rem; }
  .year { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
  /* Keep the fixed menu compact on phones: small logo, links wrapping beside it. */
  :root { --header-h: 4.4rem; }
  .site-header { --logo-h: 46px; }
  .site-header .bar { flex-wrap: nowrap; gap: 0.75rem; padding-block: 0 0.4rem; }
  .brand { gap: 0.6rem; }
  .site-header nav > ul { --nav-item-w: 5.7rem; gap: 0 0.2rem; }
  .site-header nav > ul > li > a { padding-block: 0.35rem 0.3rem; font-size: 0.72rem; letter-spacing: 0.08em; }

  /* Burger menu (when scripts run; otherwise the links above stay visible). */
  .js .site-header .bar { align-items: center; padding-block: 0.4rem; }
  .js .brand { margin-block: 0; }
  /* The social icons move from the bar into the bottom of the drop-down menu. */
  .js .bar > .social { display: none; }
  .js .nav-social { display: block !important; padding: 0.4rem max(10px, env(safe-area-inset-left, 0px)) 0; }
  .js .nav-social .social a { width: 2.75rem; height: 2.75rem; }
  .js .nav-social .social svg { width: 22px; height: 22px; }
  .js .menu-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px; margin-right: -10px;
    background: none; border: 0; cursor: pointer; pointer-events: auto;
    filter: drop-shadow(0 0 3px var(--bg)) drop-shadow(0 0 6px var(--bg));
  }
  .js .menu-toggle span { display: block; height: 3px; border-radius: 2px; background: var(--accent); transition: transform 0.25s ease, opacity 0.2s ease; }
  .js .menu-open .menu-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .js .menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
  .js .menu-open .menu-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .js .menu-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

  /* The links drop down as a full-width panel under the bar. */
  .js .site-header nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg); box-shadow: 0 18px 30px -18px rgb(0 0 0 / 0.45);
    visibility: hidden; opacity: 0; transform: translateY(-10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .js .menu-open nav { visibility: visible; opacity: 1; transform: none; transition: opacity 0.25s ease, transform 0.25s ease; }
  .js .site-header nav { margin-top: 0; }
  .js .site-header nav > ul { flex-direction: column; flex-wrap: nowrap; width: 100%; gap: 0; padding-block: 0.3rem 0.6rem; }
  .js .site-header nav > ul > li { display: block; }
  .js .site-header nav > ul > li > a {
    width: 100%; height: 3.2rem; align-items: center; justify-content: flex-start;
    padding: 0 max(16px, env(safe-area-inset-left, 0px));
    font-size: 1rem; letter-spacing: 0.1em;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .btn, .date-card { transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
}