/* ==========================================================================
   Behind the Curtain Performing Arts — website styles

   BRAND COLOURS AND FONTS
   The first block below holds the brand colours and fonts. The second and
   third blocks are the same colours for dark mode.

   HEADING STYLE
   Headings use a bold, condensed style to match the logo. To switch back to
   the earlier serif headings, change these three lines in the first block:
     --font-display: var(--font-serif);
     --display-weight: 400;
     --display-case: none;
   ========================================================================== */

/* Layout: a stage. A royal-blue curtain proscenium opens each page onto a
   theatre-programme layout; classes and trials are set as ticket stubs. */
:root {
  /* Page */
  --paper: #f1f5fd;           /* soft blue page background */
  --surface: #ffffff;
  --ink: #141a3a;
  --muted: #4d5778;
  --line: #d9e1f4;
  --edge: #b5c2e6;
  --shadow-c: rgb(20 35 90 / 0.10);

  /* Brand (from the logo) */
  --accent: #1f3a9e;          /* deep royal blue: buttons and links */
  --accent-hover: #172d80;
  --on-accent: #ffffff;
  --soft: #dde6fb;            /* softer blue fills */
  --soft-ink: #1f3a9e;
  --brass: #c99a3e;           /* gold highlights */
  --brass-ink: #7a5813;
  --on-brass: #2a1a08;

  /* Stage and curtains (dark in both themes) */
  --curtain: #2443b6;
  --curtain-shade: #12267a;
  --stage: #0b1233;
  --on-stage: #f4f7ff;
  --on-stage-muted: #c6d0ef;
  --spot: rgb(255 222 170 / 0.18);

  /* Status colours */
  --ok: #22704a;     --ok-bg: #e1f1e7;
  --warn: #87580b;   --warn-bg: #fbeed2;
  --alert: #a5303e;  --alert-bg: #f9e0e3;

  /* Type */
  --font-condensed: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-serif: "Yeseva One", "Bodoni Moda", Didot, Georgia, "Times New Roman", serif;
  --font-display: var(--font-condensed);
  --display-weight: 700;
  --display-case: uppercase;  /* main page headings */
  --font-body: "Figtree", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(1.45rem, 1.25rem + 0.8vw, 1.85rem);
  --fs-2xl: clamp(1.9rem, 1.5rem + 1.7vw, 2.8rem);
  --fs-hero: clamp(2.5rem, 1.6rem + 3.9vw, 4.6rem);

  /* Shape */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --wrap: 72rem;
  --curtain-w: clamp(2.25rem, 13vw, 12rem);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0b1024; --surface: #141b38; --ink: #e9eefc; --muted: #a8b2d4;
    --line: #242d52; --edge: #38436e; --shadow-c: rgb(0 0 0 / 0.35);
    --accent: #93abf6; --accent-hover: #b5c6fa; --on-accent: #0b1440;
    --soft: #1b2552; --soft-ink: #c4d1fb;
    --brass: #d7ac55; --brass-ink: #e3bd6b; --on-brass: #2a1a08;
    --curtain: #1f3998; --curtain-shade: #0d1b5c; --stage: #060a1d;
    --on-stage: #f4f7ff; --on-stage-muted: #bdc8ea; --spot: rgb(255 222 170 / 0.14);
    --ok: #82d6a8; --ok-bg: #16301f; --warn: #ecc26e; --warn-bg: #33260f;
    --alert: #f29ca6; --alert-bg: #3a161c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0b1024; --surface: #141b38; --ink: #e9eefc; --muted: #a8b2d4;
  --line: #242d52; --edge: #38436e; --shadow-c: rgb(0 0 0 / 0.35);
  --accent: #93abf6; --accent-hover: #b5c6fa; --on-accent: #0b1440;
  --soft: #1b2552; --soft-ink: #c4d1fb;
  --brass: #d7ac55; --brass-ink: #e3bd6b; --on-brass: #2a1a08;
  --curtain: #1f3998; --curtain-shade: #0d1b5c; --stage: #060a1d;
  --on-stage: #f4f7ff; --on-stage-muted: #bdc8ea; --spot: rgb(255 222 170 / 0.14);
  --ok: #82d6a8; --ok-bg: #16301f; --warn: #ecc26e; --warn-bg: #33260f;
  --alert: #f29ca6; --alert-bg: #3a161c;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 8.5rem; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--display-weight); line-height: 1.12; letter-spacing: 0.005em; margin: 0; text-wrap: balance; }
h1 { text-transform: var(--display-case); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
p, ul, ol, dl, dd, figure { margin: 0; }
a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; border-radius: 4px; }
button, select, input { font: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.section { padding-block: clamp(2.75rem, 6vw, 4.75rem); }
.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.section--tint { background: var(--surface); border-block: 1px solid var(--line); }
.stack { display: flex; flex-direction: column; gap: var(--gap, 1rem); }
.stack--md { --gap: 1.25rem; }
.stack--lg { --gap: clamp(2rem, 5vw, 3rem); }
.prose { max-width: 65ch; }

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-ink);
}
.lead { font-size: var(--fs-lg); line-height: 1.5; }
.muted { color: var(--muted); }
.todo { background: var(--warn-bg); color: var(--warn); border-radius: 3px; padding: 0 0.2em; }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--accent); color: var(--on-accent); padding: 0.6rem 1rem; border-radius: var(--r-sm);
}
.skip-link:focus { top: 1rem; }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.875rem; padding: 0.6rem 1.35rem;
  border: 2px solid transparent; border-radius: 999px;
  font: 700 var(--fs-sm)/1.2 var(--font-body); letter-spacing: 0.01em;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.btn--sm { min-height: 2.5rem; padding: 0.45rem 1.05rem; }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn--ghost { border-color: var(--accent); color: var(--accent); background: transparent; }
.btn--ghost:hover { background: var(--soft); color: var(--soft-ink); }
.btn--gold { background: var(--brass); color: var(--on-brass); }
.btn--gold:hover { background: var(--on-stage); color: var(--on-brass); }
.btn--on-stage { border-color: var(--on-stage-muted); color: var(--on-stage); background: transparent; }
.btn--on-stage:hover { background: var(--on-stage); color: var(--stage); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.link-arrow { font-weight: 700; text-decoration: none; white-space: nowrap; }
.link-arrow::after { content: " \2192"; }
.link-arrow:hover { text-decoration: underline; }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
  display: inline-flex; align-items: center; width: fit-content;
  padding: 0.15rem 0.65rem; border-radius: 999px;
  background: var(--soft); color: var(--soft-ink);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.02em;
}

/* ---------- Draft banner ---------- */
.draft-banner {
  background: var(--brass); color: var(--on-brass);
  font-size: var(--fs-xs); font-weight: 600; text-align: center;
  padding: 0.45rem 1rem;
}

/* ---------- Header ---------- */
/* The wrapper is see-through to layout so the header can stay fixed at the top while scrolling. */
#site-header { display: contents; }
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.header-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.8rem; }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; line-height: 1; color: var(--accent); }
.brand__text { display: flex; flex-direction: column; }
.brand:hover { color: var(--accent); }
.brand__name { font-family: var(--font-condensed); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.7rem); }
/* Small curtain emblem based on the logo, shown until the logo file is added */
.brand__mark {
  flex: none; width: 2.1rem; height: 2.7rem; border-radius: 2px;
  background:
    linear-gradient(to top right, transparent calc(50% - 0.5px), var(--curtain) 50%),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.25) 0 2px, transparent 2px 5px),
    linear-gradient(#6f93ec, #dbe5fd);
}
.brand__mark::before { content: ""; display: block; height: 100%; background: repeating-linear-gradient(90deg, rgb(0 0 0 / 0.18) 0 1px, transparent 1px 5px); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.brand__sub { margin-top: 0.2rem; font-family: var(--font-condensed); font-size: 0.86rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.brand img { max-height: 3.5rem; width: auto; }
.header-actions { display: flex; align-items: center; gap: 0.6rem; }

.nav-row { border-top: 1px solid var(--line); }
.site-nav ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.6rem; }
.site-nav a {
  display: inline-block; padding-block: 0.65rem 0.55rem;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: var(--fs-sm);
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--accent); }
.site-nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--brass); }
.nav-actions { display: none; }

.menu-toggle {
  display: none; align-items: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0.4rem 0.95rem;
  border: 2px solid var(--accent); border-radius: 999px;
  background: transparent; color: var(--accent); font-weight: 700; cursor: pointer;
}
.menu-toggle__bars { display: grid; gap: 4px; }
.menu-toggle__bars span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }

@media (max-width: 63.99rem) {
  .header-actions { display: none; }
  .menu-toggle { display: inline-flex; }
  .nav-row { display: none; }
  .site-header.is-open .nav-row { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; padding-block: 0.5rem; }
  .site-nav li + li { border-top: 1px solid var(--line); }
  .site-nav a { display: block; padding-block: 0.8rem; font-size: var(--fs-base); border-bottom: 0; }
  .site-nav a[aria-current="page"] { border-bottom: 0; }
  .site-nav a[aria-current="page"]::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.6rem; border-radius: 50%; background: var(--brass); vertical-align: middle; }
  .nav-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; padding-block: 0.5rem 1.25rem; }
  .site-header.is-open { max-height: 100vh; overflow-y: auto; }
}

/* ---------- Notices ---------- */
.notices { display: flex; flex-direction: column; gap: 0.5rem; padding-block: 0.9rem; }
.notice {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.75rem;
  padding: 0.7rem 1rem; border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.notice__label { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.notice__msg { flex: 1 1 18rem; min-width: 0; }
.notice a { font-weight: 700; }
.notice--info { background: var(--soft); color: var(--ink); }
.notice--info .notice__label { color: var(--soft-ink); }
.notice--important { background: var(--warn-bg); color: var(--ink); }
.notice--important .notice__label { color: var(--warn); }
.notice--cancelled { background: var(--alert-bg); color: var(--ink); }
.notice--cancelled .notice__label { color: var(--alert); }

/* ---------- Stage (page openers) ---------- */
.stage {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(ellipse 55% 75% at 50% 8%, var(--spot), transparent 72%),
    var(--stage);
  color: var(--on-stage);
}
.valance {
  position: absolute; inset: 0 0 auto 0; z-index: 6; height: 2.9rem;
  background:
    linear-gradient(var(--curtain-shade), var(--curtain)) 0 0 / 100% 0.9rem no-repeat,
    radial-gradient(ellipse 50% 100% at 50% 0, var(--curtain) 0 66%, var(--brass) 67% 71%, transparent 72%) 0 0.4rem / 6.5rem 2.5rem repeat-x;
}
.curtain {
  position: absolute; top: 0; bottom: 0; z-index: 2; width: var(--curtain-w);
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.35), transparent 35%, transparent 65%, rgb(0 0 0 / 0.25)),
    repeating-linear-gradient(90deg, var(--curtain-shade) 0, var(--curtain) 1.1rem, var(--curtain) 1.45rem, var(--curtain-shade) 2.6rem);
  clip-path: polygon(0 0, 100% 0, 99% 22%, 95% 36%, 86% 48%, 72% 57%, 52% 63%, 44% 66%, 52% 72%, 66% 82%, 80% 92%, 90% 100%, 0 100%);
}
.curtain--left { left: 0; }
.curtain--right { right: 0; transform: scaleX(-1); }
.tassel {
  position: absolute; left: 38%; top: 64%; width: 0.85rem; height: 0.85rem;
  border-radius: 50%; background: var(--brass);
  box-shadow: 0 0.55rem 0 -0.15rem var(--brass), 0 1.05rem 0 -0.25rem var(--brass);
}
.stage__inner {
  position: relative; z-index: 4;
  max-width: 46rem; margin-inline: auto; text-align: center;
  padding-block: clamp(4.5rem, 9vw, 7rem) clamp(2.5rem, 5vw, 3.5rem);
  padding-inline: max(1rem, calc(var(--curtain-w) * 0.75));
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.stage .eyebrow { color: var(--brass); }
.stage h1 { font-size: var(--fs-hero); color: var(--on-stage); }
.stage__intro { max-width: 40rem; font-size: var(--fs-lg); line-height: 1.5; color: var(--on-stage-muted); }
.stage .btn-row { justify-content: center; margin-top: 0.5rem; }
.stage__link { color: var(--on-stage); }
.stage__link:hover { color: var(--brass); }

.stage--page { --curtain-w: clamp(1.75rem, 9vw, 8rem); }
.stage--page .stage__inner { padding-block: clamp(4rem, 7vw, 5.5rem) clamp(2.25rem, 4vw, 3rem); }
.stage--page h1 { font-size: var(--fs-2xl); }
.stage--page .stage__intro { font-size: var(--fs-base); }

/* Footlights and the highlights set on the stage floor */
.stage__floor {
  position: relative; z-index: 7; /* in front of the curtains, like a stage apron */
  border-top: 1px solid rgb(255 255 255 / 0.12);
  background:
    radial-gradient(circle at 50% 0, var(--brass) 0 2.5px, transparent 3.5px) 0 0 / 3.25rem 100% repeat-x,
    radial-gradient(ellipse 50% 100% at 50% 0, var(--spot), transparent 70%),
    linear-gradient(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.35));
}
.highlights {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 1.5rem;
  padding-block: 1.6rem 1.8rem;
}
.highlights div { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.highlights dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); }
.highlights dd { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.2rem; line-height: 1.3; color: var(--on-stage); }
@media (max-width: 52rem) { .highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (prefers-reduced-motion: no-preference) and (min-width: 48rem) {
  .stage--home .curtain { animation: curtain-open 1.6s cubic-bezier(0.6, 0.05, 0.25, 1) 0.15s backwards; }
  .stage--home .stage__inner { animation: rise-in 0.9s ease-out 0.5s both; }
}
@keyframes curtain-open { from { width: 27%; } to { width: var(--curtain-w); } }
@keyframes rise-in { from { transform: translateY(0.75rem); } to { transform: none; } }

/* Home page: curtains close as the visitor scrolls down and reopen on the
   way back up. The script sets --close from 0 (open) to 1 (closed).
   Turn it on or off in content/pages.js (curtainCloseOnScroll). */
.stage--home { --close: 0; }
.stage--home .curtain {
  width: calc(var(--curtain-w) + (50.5% - var(--curtain-w)) * var(--close));
  clip-path: polygon(
    0 0, 100% 0,
    calc(99% + 1% * var(--close)) 22%,
    calc(95% + 5% * var(--close)) 36%,
    calc(86% + 14% * var(--close)) 48%,
    calc(72% + 28% * var(--close)) 57%,
    calc(52% + 48% * var(--close)) 63%,
    calc(44% + 56% * var(--close)) 66%,
    calc(52% + 48% * var(--close)) 72%,
    calc(66% + 34% * var(--close)) 82%,
    calc(80% + 20% * var(--close)) 92%,
    calc(90% + 10% * var(--close)) 100%,
    0 100%);
}
.stage--home .tassel { opacity: calc(1 - var(--close) * 2); }
.stage--home.is-closing .curtain { z-index: 5; }

/* ---------- Section headings ---------- */
.section-head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 0.75rem 1.5rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.section-head > div { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }

.split { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 56rem) {
  .split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------- Photos and placeholders ---------- */
.photo {
  position: relative; overflow: hidden; max-width: 100%;
  aspect-ratio: 4 / 3; border-radius: var(--r-md); background: var(--soft);
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--empty {
  display: flex; align-items: flex-end;
  background:
    radial-gradient(ellipse 45% 70% at 50% -5%, rgb(255 230 190 / 0.45), transparent 70%),
    linear-gradient(165deg, var(--curtain), var(--curtain-shade));
}
.photo--empty[data-tone="1"] {
  background:
    radial-gradient(ellipse 45% 70% at 50% -5%, rgb(255 240 220 / 0.55), transparent 70%),
    linear-gradient(165deg, #6f93ec, #2a47b4);
}
.photo--empty[data-tone="2"] {
  background:
    radial-gradient(ellipse 45% 70% at 50% -5%, rgb(255 245 225 / 0.55), transparent 70%),
    linear-gradient(165deg, #b98a3a, #6b4419);
}
.photo--empty span {
  margin: 0.75rem; padding: 0.25rem 0.65rem; border-radius: 999px;
  background: rgb(20 8 16 / 0.45); color: #fbeff5;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.03em;
}

/* ---------- Style cards (Home) ---------- */
.card-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.style-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.style-card .photo { border-radius: 0; }
.style-card__body { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.25rem 1.35rem 1.5rem; flex: 1; }
.style-card__body p:not(.chip) { color: var(--muted); flex: 1; }

/* ---------- Tickets (classes) ---------- */
.tickets { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 25rem), 1fr)); }
.ticket-wrap { filter: drop-shadow(0 0 0.6px var(--edge)) drop-shadow(0 6px 12px var(--shadow-c)); min-width: 0; }
.ticket {
  --stub: 6.5rem; --notch: 0.6rem;
  display: grid; grid-template-columns: var(--stub) minmax(0, 1fr);
  height: 100%; background: var(--surface); border-radius: var(--r-md);
  -webkit-mask:
    radial-gradient(circle var(--notch) at var(--stub) 0, #0000 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at var(--stub) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle var(--notch) at var(--stub) 0, #0000 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at var(--stub) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}
.ticket__stub {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem;
  padding: 1rem 0.5rem; background: var(--soft); color: var(--soft-ink);
  border-right: 2px dashed var(--edge); text-align: center;
}
.ticket__time { font-size: 1.65rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ticket__time small { font-size: 0.8rem; font-weight: 700; margin-left: 0.1rem; }
.ticket__dur { font-size: var(--fs-xs); font-weight: 600; opacity: 0.85; }
.ticket__main { display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem 1.15rem 1.05rem 1.25rem; min-width: 0; }
.ticket__title { font-size: 1.28rem; }
.ticket__meta { color: var(--muted); font-size: var(--fs-sm); }
.ticket__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; margin-top: auto; padding-top: 0.35rem; }
.ticket__note { font-size: var(--fs-xs); color: var(--muted); }
.ticket__foot .link-arrow { margin-left: auto; font-size: var(--fs-sm); }
.ticket.is-cancelled .ticket__title, .ticket.is-cancelled .ticket__time { text-decoration: line-through; text-decoration-thickness: 2px; }
.ticket.is-cancelled .ticket__stub { background: var(--line); color: var(--muted); }

.pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.18rem 0.6rem; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 700; white-space: nowrap;
}
.pill::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
.pill--ok { background: var(--ok-bg); color: var(--ok); }
.pill--warn { background: var(--warn-bg); color: var(--warn); }
.pill--alert { background: var(--alert-bg); color: var(--alert); }
.pill--muted { background: var(--line); color: var(--muted); }
.pill--new { background: var(--soft); color: var(--soft-ink); }

/* ---------- Timetable page ---------- */
.tt-summary {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 0.75rem 1.5rem;
  margin-bottom: 1.25rem;
}
.tt-summary > div { display: flex; flex-direction: column; gap: 0.2rem; }
.tt-term { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--fs-xl); }
.tt-updated { font-size: var(--fs-sm); color: var(--muted); }
.filters {
  display: flex; flex-wrap: wrap; align-items: end; gap: 0.75rem 1rem;
  padding: 1rem 1.1rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.field { display: flex; flex-direction: column; gap: 0.3rem; flex: 1 1 8.5rem; min-width: 0; }
.field label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.field select {
  width: 100%; min-height: 2.75rem; padding: 0.5rem 0.75rem;
  border: 1px solid var(--edge); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink);
}
.legend { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.tt-count { margin-block: 1.25rem 0.5rem; font-size: var(--fs-sm); color: var(--muted); }
.day-group { display: flex; flex-direction: column; gap: 1rem; padding-block: 1.25rem; }
.day-group + .day-group { border-top: 1px solid var(--line); }
.day-group__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.9rem; }
.day-group__head h2 { font-size: var(--fs-xl); }
.empty-state {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem;
  padding: 1.5rem; border: 1px dashed var(--edge); border-radius: var(--r-md);
}

/* ---------- Admit-one ticket (trials) ---------- */
.admit-wrap { filter: drop-shadow(0 0 0.6px var(--edge)) drop-shadow(0 10px 22px var(--shadow-c)); }
.admit {
  --stub: 15rem; --notch: 0.8rem;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--stub);
  background: var(--surface); border-radius: var(--r-lg);
  -webkit-mask:
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}
.admit__main { display: flex; flex-direction: column; gap: 0.6rem; padding: clamp(1.5rem, 4vw, 2.5rem); min-width: 0; }
.admit__kicker { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase; color: var(--brass-ink); }
.admit__title { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-case); font-size: var(--fs-2xl); line-height: 1.1; color: var(--accent); }
.admit__main p:last-child { color: var(--muted); max-width: 52ch; }
.admit__stub {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  padding: 1.5rem 1.25rem; text-align: center;
  background: var(--curtain); color: var(--on-stage);
  border-left: 2px dashed var(--edge);
}
.admit__serial { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brass); font-variant-numeric: tabular-nums; }
.admit__stub .btn--primary { background: var(--brass); color: var(--on-brass); }
.admit__stub .btn--primary:hover { background: var(--on-stage); color: var(--on-brass); }
@media (max-width: 40rem) {
  .admit {
    --stub-h: 7.5rem;
    grid-template-columns: minmax(0, 1fr);
    -webkit-mask:
      radial-gradient(circle var(--notch) at 0 calc(100% - var(--stub-h)), #0000 98%, #000) left / 51% 100% no-repeat,
      radial-gradient(circle var(--notch) at 100% calc(100% - var(--stub-h)), #0000 98%, #000) right / 51% 100% no-repeat;
    mask:
      radial-gradient(circle var(--notch) at 0 calc(100% - var(--stub-h)), #0000 98%, #000) left / 51% 100% no-repeat,
      radial-gradient(circle var(--notch) at 100% calc(100% - var(--stub-h)), #0000 98%, #000) right / 51% 100% no-repeat;
  }
  .admit__stub { height: var(--stub-h); border-left: 0; border-top: 2px dashed var(--edge); padding-block: 1rem; gap: 0.6rem; }
}

/* ---------- Steps ---------- */
.steps { list-style: none; padding: 0; display: grid; gap: 1.5rem 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); counter-reset: step; }
.steps li { display: flex; flex-direction: column; gap: 0.5rem; counter-increment: step; min-width: 0; }
.steps li::before {
  content: counter(step);
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--brass); color: var(--on-brass);
  font-weight: 800; font-variant-numeric: tabular-nums;
}
.steps h3 { font-size: 1.2rem; }
.steps p { color: var(--muted); font-size: var(--fs-sm); }

/* ---------- Lists ---------- */
.ticks { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.ticks li { display: flex; gap: 0.7rem; align-items: baseline; }
.ticks li::before {
  content: ""; flex: none; width: 0.45rem; height: 0.85rem; margin-left: 0.15rem;
  border: solid var(--brass-ink); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-0.1rem);
}

/* ---------- FAQs ---------- */
.faqs { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.faqs details { border-bottom: 1px solid var(--line); }
.faqs summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding-block: 1rem; cursor: pointer; list-style: none;
  font-weight: 700; font-size: var(--fs-base);
}
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary::after { content: "+"; flex: none; font-size: 1.5rem; line-height: 1; color: var(--accent); }
.faqs details[open] summary::after { content: "\2212"; }
.faqs details p { padding-bottom: 1.1rem; color: var(--muted); max-width: 65ch; }

/* ---------- Styles page ---------- */
.jump { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.jump a { text-decoration: none; }
.jump a:hover { background: var(--accent); color: var(--on-accent); }
.style-rows { display: flex; flex-direction: column; }
.style-row {
  display: grid; gap: clamp(1.25rem, 4vw, 3rem); align-items: center;
  padding-block: clamp(2rem, 5vw, 3.25rem);
}
.style-row + .style-row { border-top: 1px solid var(--line); }
@media (min-width: 52rem) {
  .style-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .style-row:nth-child(even) .photo { order: 2; }
}
.style-row__body { display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; }
.style-row__body h2 { font-size: var(--fs-2xl); }
.style-row__body h3 { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 0.4rem; }

/* ---------- Pricing ---------- */
.plans { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); align-items: stretch; }
.plan {
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.75rem 1.6rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.plan h2 { font-size: var(--fs-xl); }
.plan__price { display: flex; align-items: baseline; gap: 0.45rem; }
.plan__price strong { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(2.4rem, 2rem + 1.5vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums; }
.plan__price span { color: var(--muted); font-size: var(--fs-sm); }
.plan--featured { background: var(--curtain); border-color: var(--curtain); color: var(--on-stage); }
.plan--featured .plan__price span { color: var(--on-stage-muted); }
.plan--featured .ticks li::before { border-color: var(--brass); }
.plan__badge { align-self: flex-start; background: var(--brass); color: var(--on-brass); }

.programme { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.programme li { display: flex; flex-direction: column; gap: 0.15rem; }
.programme__line { display: flex; align-items: baseline; gap: 0.5rem; font-weight: 700; }
.programme__line .leader { flex: 1; min-width: 1.5rem; border-bottom: 2px dotted var(--edge); transform: translateY(-0.3em); }
.programme__line .price { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--accent); }
.programme__note { font-size: var(--fs-sm); color: var(--muted); }
.panel {
  display: flex; flex-direction: column; gap: 1.25rem;
  padding: clamp(1.25rem, 3vw, 2rem); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.panel h2 { font-size: var(--fs-xl); }

/* ---------- Formatted text (news posts and the About story) ---------- */
.rich { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.rich ul, .rich ol { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.35rem; }
.rich h3 { font-size: 1.2rem; }
.rich a { overflow-wrap: anywhere; }
.story > p:first-child { font-size: var(--fs-lg); line-height: 1.5; }

/* ---------- Program groups (Styles page) ---------- */
.chip--plain { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--edge); }
.chip--gold { background: var(--brass); color: var(--on-brass); }
.group-head { display: flex; flex-direction: column; gap: 1.25rem; padding-bottom: 0.5rem; }
.group-head .stack { --gap: 0.6rem; max-width: 65ch; }

/* ---------- Callout band ---------- */
.callout {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--r-lg);
  background: var(--soft);
}
.callout > div { display: flex; flex-direction: column; gap: 0.35rem; flex: 1 1 22rem; min-width: 0; }
.callout h2 { font-size: var(--fs-xl); color: var(--soft-ink); }

/* ---------- Shop ---------- */
.shop-category + .shop-category { margin-top: clamp(2.25rem, 5vw, 3.5rem); }
.shop-category h2 { font-size: var(--fs-xl); margin-bottom: 1.1rem; }
.products { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr)); }
.product {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.product .photo { aspect-ratio: 1 / 1; border-radius: 0; }
.product__body { display: flex; flex-direction: column; gap: 0.4rem; padding: 1rem 1.1rem 1.2rem; flex: 1; }
.product__top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.product h3 { font-size: 1.15rem; min-width: 0; }
.product__price { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.product__desc { color: var(--muted); font-size: var(--fs-sm); flex: 1; }
.product__sizes { font-size: var(--fs-xs); color: var(--muted); }

/* ---------- News and calendar ---------- */
.news-list { display: flex; flex-direction: column; }
.post { display: flex; flex-direction: column; gap: 0.6rem; padding-block: 1.6rem; }
.post + .post { border-top: 1px solid var(--line); }
.post:first-child { padding-top: 0; }
.post h3 { font-size: var(--fs-xl); }
.post time { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-ink); }
.post .photo { margin-top: 0.4rem; }
.post p { max-width: 65ch; }

.cal-panel { align-self: start; }
@media (min-width: 56rem) { .cal-panel { position: sticky; top: 8.5rem; } }
.cal-controls { display: flex; flex-direction: column; gap: 0.75rem; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.filter-chips button {
  min-height: 2.25rem; padding: 0.3rem 0.85rem; border-radius: 999px;
  border: 1px solid var(--edge); background: transparent; color: var(--ink);
  font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.filter-chips button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.check { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); color: var(--muted); cursor: pointer; }
.check input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
.month { display: flex; flex-direction: column; gap: 0.6rem; }
.month + .month { margin-top: 1.25rem; }
.month h3 { font-size: 1.15rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--line); }
.events { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.event { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0.85rem; align-items: start; }
.event__date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0.4rem 0.25rem; border-radius: var(--r-sm);
  background: var(--soft); color: var(--soft-ink); line-height: 1.1; text-align: center;
}
.event__date strong { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.event__date span { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.event--closed .event__date { background: var(--alert-bg); color: var(--alert); }
.event--event .event__date { background: var(--warn-bg); color: var(--warn); }
.event__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; padding-top: 0.15rem; }
.event__title { font-weight: 700; }
.event__meta { font-size: var(--fs-sm); color: var(--muted); }
.event.is-past { opacity: 0.6; }

/* ---------- About ---------- */
.values { display: flex; flex-direction: column; gap: 1.25rem; }
.values div { display: flex; flex-direction: column; gap: 0.3rem; padding-left: 1rem; border-left: 2px solid var(--brass); }
.values h3 { font-size: 1.2rem; }
.values p { color: var(--muted); font-size: var(--fs-sm); }
.team { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.member {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1.1rem; align-items: start;
  padding: 1.35rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.member__photo {
  width: 5.5rem; height: 5.5rem; max-width: 100%; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: var(--soft); color: var(--soft-ink);
  font-family: var(--font-display); font-weight: var(--display-weight); font-size: 2rem;
}
.member__photo img { width: 100%; height: 100%; object-fit: cover; }
.member > div:last-child { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.member h3 { font-size: var(--fs-xl); }
.member__role { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-ink); }
.member p:last-child { color: var(--muted); font-size: var(--fs-sm); }

/* ---------- Contact ---------- */
.details { display: flex; flex-direction: column; gap: 1.1rem; }
.details > div { display: flex; flex-direction: column; gap: 0.25rem; }
.details dt { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.details dd { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; font-size: var(--fs-lg); }
.details dd.small { font-size: var(--fs-sm); color: var(--muted); }
.copy-btn {
  min-height: 2rem; padding: 0.2rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--edge); background: transparent; color: var(--muted);
  font-size: var(--fs-xs); font-weight: 700; cursor: pointer;
}
.copy-btn:hover { border-color: var(--accent); color: var(--accent); }
.hours { width: 100%; list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; font-size: var(--fs-sm); }
.hours li { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.hours li span:first-child { font-weight: 700; }
.social { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative; margin-top: 0;
  background: var(--curtain-shade); color: var(--on-stage-muted);
  padding-block: 4.25rem 1.5rem; font-size: var(--fs-sm);
}
.footer-grid { display: grid; gap: 2rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.footer-grid > div { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.site-footer h2 { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); }
.site-footer a { color: var(--on-stage); }
.site-footer a:hover { color: var(--brass); }
.site-footer ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.footer-brand { font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.6rem; color: var(--on-stage); line-height: 1.15; }
.footer-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem;
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgb(255 255 255 / 0.14);
  font-size: var(--fs-xs);
}

/* ---------- Errors ---------- */
.load-error {
  margin-block: 1.5rem; padding: 1rem 1.25rem; border-radius: var(--r-md);
  background: var(--alert-bg); color: var(--ink); font-size: var(--fs-sm);
}
.load-error code { font-weight: 700; }
noscript p { padding: 1rem; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Version 22 (system prototype): forms sent to the system */
.field input, .field textarea {
  width: 100%; min-height: 2.75rem; padding: 0.5rem 0.75rem; font: inherit;
  border: 1px solid var(--edge); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink);
}
.field textarea { min-height: 5.5rem; resize: vertical; }
.web-form { display: flex; flex-direction: column; gap: 1rem; }
.form-row { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; }
.form-row[hidden] { display: none; }
.choice-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0; padding: 0; border: 0; }
.choice-row legend { width: 100%; margin-bottom: 0.4rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.field-err { font-size: var(--fs-xs); font-weight: 700; color: var(--alert, #a3262c); }
.field.has-err input, .field.has-err select { border-color: var(--alert, #a3262c); }
.form-alert { margin: 0; padding: 0.6rem 0.8rem; border-radius: var(--r-sm); background: var(--warn-bg); color: var(--warn); font-weight: 700; font-size: var(--fs-sm); }
.form-done h2 { color: var(--soft-ink, inherit); }

/* Version 22 (system prototype): calendar colours and NSW school holidays */
.event.has-colour { box-shadow: inset 4px 0 0 var(--ev); padding-left: 0.5rem; border-radius: var(--r-sm); }
.event--holidays .event__date {
  background-color: var(--surface);
  background-image: repeating-linear-gradient(135deg, rgb(110 110 110 / 0.30) 0 2px, transparent 2px 8px);
  color: var(--ink);
}

/* Version 25: notices and the preview strip can be closed with X */
.notice { position: relative; padding-right: 3.25rem; }
.notice__close { position: absolute; top: 50%; right: 0.4rem; transform: translateY(-50%); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.notice__close:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.notice__close:focus-visible { outline: 3px solid var(--brass); outline-offset: 0; }
.draft-banner { position: relative; padding-right: 3.25rem; }
.draft-banner .notice__close { width: 2.25rem; height: 2.25rem; }