/* ============================================================
   Out of the Box Festival 2027 — Phase 2 homepage
   "Tree of Hope, living world" — palette derived from the
   hand-painted 2025 festival artwork.
   ============================================================ */

:root {
  --aqua: #2bb3d6;
  --aqua-bright: #5fcfe8;
  --aqua-pale: #e3f5fb;
  --teal: #0b86a8;
  --teal-deep: #075d77;
  --navy: #0c2f57;
  --navy-deep: #082441;
  --green: #6fbf73;
  --green-deep: #3f9d5a;
  --grass: #8cc63f;
  --grass-deep: #5fa733;
  --yellow: #ffc23d;
  --coral: #ff6b54;
  --coral-deep: #e5523c;
  --pink: #ec4f9c;
  --cream: #fbf7ec;
  --paper: #ffffff;
  --ink: #11243d;
  --muted: #51657a;
  --line: rgba(12, 47, 87, 0.12);

  --shadow-sm: 0 10px 28px rgba(12, 47, 87, 0.1);
  --shadow-md: 0 20px 50px rgba(12, 47, 87, 0.16);
  --shadow-lg: 0 36px 80px rgba(8, 36, 65, 0.28);

  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;

  --font-display: "Fredoka", "Trebuchet MS", sans-serif;
  --font-hand: "Amatic SC", "Trebuchet MS", sans-serif;
  --font-body: "Nunito Sans", "Segoe UI", Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* The header's own minimum height. */
  --header-h: 92px;
  /* Space anything else must leave clear of the fixed header. JS publishes the
     measured height as --actual-header-h; the literals are the no-JS floor for
     each breakpoint, since the nav re-flows and then wraps as the page narrows. */
  --header-reserve: var(--actual-header-h, 92px);
}

* { box-sizing: border-box; }

html { overflow-x: clip; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: clip;
}

a { color: inherit; }
img { display: block; max-width: 100%; }
p { margin-top: 0; }

h1, h2, h3 {
  margin-top: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}
h2 { margin-bottom: 18px; font-size: clamp(29px, 3.8vw, 47px); line-height: 1.05; }
h3 { margin-bottom: 10px; font-size: clamp(20px, 2vw, 27px); line-height: 1.14; }

:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -70px; left: 16px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--coral);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  border-radius: 0 0 12px 12px;
  transition: top 160ms var(--ease);
}
.skip-link:focus { top: 0; }

.shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
section[id] { scroll-margin-top: calc(var(--header-reserve) + 12px); }

.ic {
  width: 1em; height: 1em;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ic-external {
  display: inline-block;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -1px;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 26px;
  min-height: var(--header-h);
  padding: 12px clamp(24px, 5vw, 72px);
  color: var(--navy);
  border-bottom: 1px solid transparent;
  transition: background-color 320ms var(--ease), border-color 320ms var(--ease),
              color 320ms var(--ease), backdrop-filter 320ms var(--ease),
              -webkit-backdrop-filter 320ms var(--ease);
}

/* Adaptive states (set by JS from the section behind the bar).
   Light glass is the default — also the no-JS fallback. */
.site-header,
.site-header.is-light {
  background: rgba(255, 255, 255, 0.82);
  border-bottom-color: var(--line);
  color: var(--navy);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.site-header.is-dark {
  background: rgba(8, 36, 65, 0.5);
  border-bottom-color: rgba(255, 255, 255, 0.16);
  color: #fff;
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
}
.site-header.is-transparent {
  background: transparent;
  border-bottom-color: transparent;
  color: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-shadow: 0 2px 14px rgba(8, 36, 65, 0.5);
}
/* a soft top scrim keeps white nav legible over the bright hero sky */
.site-header.is-transparent::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: linear-gradient(to bottom, rgba(8, 36, 65, 0.45), rgba(8, 36, 65, 0));
  pointer-events: none;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--teal-deep);
  text-decoration: none;
}
.logo-image { display: block; width: 220px; height: auto; }
/* Tint the supplied artwork with exactly the header's navigation colour. */
.site-header .logo { color: inherit; }
.logo-artwork { display: block; }
@supports (mask-image: url("/assets/ootb-logo-2025.png")) {
  .logo-artwork {
    background-color: currentColor;
    mask: url("/assets/ootb-logo-2025.png") center / contain no-repeat;
  }
  .logo-artwork .logo-image { opacity: 0; }
}
@media (forced-colors: active) {
  .logo-artwork { forced-color-adjust: none; background-color: LinkText; }
}
/* The approved wordmark uses its white treatment over dark sections. */
.site-header.is-dark .logo-image,
.site-header.is-transparent .logo-image { filter: brightness(0) invert(1); }

.primary-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.4vw, 40px);
}
.primary-nav a {
  position: relative;
  /* the span carries the remaining 10px so the header height is unchanged */
  padding: 6px 3px 2px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.03em;
  transition: color 260ms var(--ease), opacity 200ms var(--ease);
}
/* A painted coral brush-stroke that draws in on hover/focus. It lives on the
   span, not the link, so it spans the word rather than the whole hit area —
   which matters once the links go full-width in the mobile panel. */
.primary-nav a > span {
  display: inline-block;
  padding-bottom: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5C18 1.5 34 7 62 3' fill='none' stroke='%23ff6b54' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 7px;
  transition: background-size 260ms var(--ease);
}
.primary-nav a:hover > span,
.primary-nav a:focus-visible > span { background-size: 100% 7px; }

.summit-tab {
  position: absolute;
  top: 100%;
  right: clamp(24px, 5vw, 72px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background: #fff;
  color: var(--navy);
  box-shadow: 0 4px 12px rgba(8, 36, 65, 0.12);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.summit-tab:hover { background: var(--yellow); }
.nav-related { display: none; }

/* search collapses to an icon; the field expands on demand */
.header-search { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.search-field { display: flex; }
.search-field input {
  width: 0; min-width: 0; height: 46px;
  padding: 0; opacity: 0;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: #fff; color: var(--ink);
  font: inherit; font-family: var(--font-body);
  transition: width 300ms var(--ease), padding 300ms var(--ease),
              opacity 200ms var(--ease), border-color 200ms var(--ease),
              background 200ms var(--ease), color 200ms var(--ease);
}
.search-field input::placeholder { color: var(--muted); }
.header-search.is-open .search-field input {
  width: clamp(170px, 20vw, 230px);
  padding: 0 18px;
  opacity: 1;
  border-color: rgba(12, 47, 87, 0.22);
}
.search-toggle {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px;
  border: 0; border-radius: 999px;
  background: transparent; color: inherit;
  cursor: pointer;
  transition: background 200ms var(--ease), transform 200ms var(--ease);
}
.search-toggle .ic { width: 22px; height: 22px; stroke-width: 2.2; }
.search-toggle:hover { background: rgba(12, 47, 87, 0.08); transform: scale(1.05); }

/* search adapts to the dark/transparent header states */
.site-header.is-dark .search-toggle:hover,
.site-header.is-transparent .search-toggle:hover { background: rgba(255, 255, 255, 0.18); }
.site-header.is-dark .header-search.is-open .search-field input,
.site-header.is-transparent .header-search.is-open .search-field input {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}
.site-header.is-dark .search-field input::placeholder,
.site-header.is-transparent .search-field input::placeholder { color: rgba(255, 255, 255, 0.82); }

/* ---------- Mobile nav drawer (see nav.js) ----------
   Above 680px the panel is display:contents, so .primary-nav stays a direct
   child of the header grid and the desktop bar is untouched. */
.nav-panel { display: contents; }
.nav-panel-foot { display: none; }
.nav-toggle { display: none; }
.nav-toggle[hidden] { display: none; }

.nav-toggle svg { display: block; width: 27px; height: 20px; overflow: visible; }
.nt-stroke {
  fill: none;
  stroke: var(--coral);
  stroke-width: 3.2;
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: 15px 11px;
  transition: transform 300ms var(--ease), opacity 180ms var(--ease);
}
/* The X is drawn, not rotated: the three menu lines are asymmetric curves, so
   spinning two of them into a cross left one arm longer than the other. Two
   mirrored strokes crossing at the same centre swap in instead. */
.nt-x { opacity: 0; transform: scale(0.68); }
.nav-toggle[aria-expanded="true"] .nt-1,
.nav-toggle[aria-expanded="true"] .nt-2,
.nav-toggle[aria-expanded="true"] .nt-3 { opacity: 0; transform: scaleX(0.45); }
.nav-toggle[aria-expanded="true"] .nt-x { opacity: 1; transform: none; }

html.nav-open, body.nav-open { overflow: hidden; }

/* ---------- Buttons ---------- */
/* Keep button text consistent even inside panels with local link styles or
   controls with their own font shorthand. */
button, [role="button"], .button {
  font-size: 15px !important;
  font-weight: 400 !important;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-display);
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease);
}
.button-primary { background: var(--yellow); color: var(--navy); box-shadow: 0 12px 26px rgba(255, 194, 61, 0.4); }
.button-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(255, 194, 61, 0.52); }
.button-secondary { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); }
.button-secondary:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.button-outline { background: rgba(255, 255, 255, 0.14); color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.5); }
.button-outline:hover { background: rgba(255, 255, 255, 0.24); }
/* A submit button is disabled while a form is sending and, on /subscribe,
   whenever the environment has no reCAPTCHA key. Without this it stays bright
   yellow and invites a click that does nothing. */
.button:disabled { opacity: 0.55; box-shadow: none; cursor: not-allowed; }
.button:disabled:hover { transform: none; box-shadow: none; }

.text-link {
  color: var(--navy);
  font-weight: 800;
  text-decoration-line: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
  text-decoration-color: var(--coral);
}

.arrow-link { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; color: var(--teal); font-weight: 900; text-decoration: none; }
.arrow-link-dark { color: var(--teal-deep); }
.arrow-link .ic-arrow {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 180ms var(--ease);
}
.arrow-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.arrow-link:hover .ic-arrow { transform: translateX(4px); }

/* ---------- Kickers ---------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 13px; font-weight: 900;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.kicker::before { width: 26px; height: 4px; border-radius: 99px; background: currentColor; content: ""; }
.kicker-aqua { color: var(--teal); }
.kicker-coral { color: var(--coral-deep); }
.kicker-yellow { color: var(--coral-deep); }
.kicker-green { color: var(--green-deep); }
.kicker-on-dark { color: #fff; }

/* ============================================================
   HERO — full-bleed festival film + overlay text, with the
   Tree of Hope drawing itself over the footage as you scroll.
   ============================================================ */
.hero {
  position: relative;
  min-height: 92vh;
  display: grid;
  align-items: end;
  overflow: hidden;
  color: #fff;
  background: var(--navy);
}
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: url("https://u.qtix.com.au/media/yokhwx0o/2560x1092-ootb-1.gif") center / cover no-repeat;
}
.hero-video video {
  position: absolute;
  top: 50%; left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.hero-poster {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("https://u.qtix.com.au/media/yokhwx0o/2560x1092-ootb-1.gif") center / cover no-repeat;
  opacity: 1;
  pointer-events: none;
  transition: opacity 600ms var(--ease);
}
.hero-video-ready .hero-poster { opacity: 0; }

/* readability scrim: strong behind the text column, lets the film breathe on the right */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,36,65,0.88) 0%, rgba(8,36,65,0.64) 34%, rgba(11,134,168,0.14) 66%, rgba(11,134,168,0) 100%),
    linear-gradient(180deg, rgba(8,36,65,0) 38%, rgba(8,36,65,0.6) 100%);
}

.hero-tree {
  position: absolute;
  right: clamp(-60px, 1vw, 36px);
  bottom: 0;
  z-index: 3;
  width: clamp(380px, 50vw, 760px);
  height: 96%;
  pointer-events: none;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.38));
}
.fruit { transform-box: fill-box; transform-origin: center; }

/* Reserve the fixed header at every width. On short desktop windows the hero
   must grow with its content instead of lifting the date chips under the nav. */
.hero-intro { position: relative; z-index: 4; width: 100%; padding: calc(var(--header-reserve) + 40px) 0 clamp(88px, 14vh, 132px); }
.hero-inner { max-width: 640px; }

.hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px;
  border-radius: 999px;
  font-size: 13px; font-weight: 800; letter-spacing: 0.01em;
}
.chip .ic { font-size: 15px; stroke-width: 2.2; }
.chip-light { background: rgba(255, 255, 255, 0.94); color: var(--navy); }
.chip-coral { background: var(--coral); color: #fff; }

.hero h1 {
  max-width: 14ch;
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 7.4vw, 104px);
  line-height: 0.92;
  text-shadow: 0 4px 30px rgba(8, 36, 65, 0.45);
}
.hero-lede {
  max-width: 30rem;
  margin: 0 0 32px;
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(18px, 1.9vw, 23px);
  line-height: 1.4;
  text-shadow: 0 2px 16px rgba(8, 36, 65, 0.55);
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.hero .text-link { color: #fff; }
/* Sits on the text column's left edge, level with the scroll cue. */
.hero-video-toggle {
  position: absolute;
  left: max(24px, calc((100% - 1180px) / 2));
  bottom: 20px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px 0 0;
  border: 0;
  background: none;
  color: #fff;
  font-family: var(--font-body);
  cursor: pointer;
  text-shadow: 0 1px 8px rgba(8, 36, 65, 0.6);
}
.hero-video-toggle[hidden] { display: none; }
.hero-video-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background: rgba(8, 36, 65, 0.45);
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.hero-video-toggle:hover .hero-video-icon { background: var(--navy); border-color: #fff; }
.hero-video-icon svg { width: 16px; height: 16px; fill: currentColor; }
.hero-video-toggle .ic-pause,
.hero-video-toggle[data-playing="true"] .ic-play { display: none; }
.hero-video-toggle[data-playing="true"] .ic-pause { display: block; }

.hero-scroll {
  position: absolute;
  bottom: 20px; left: 50%;
  z-index: 5;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  text-decoration: none;
}
.hero-scroll span {
  width: 9px; height: 9px;
  border-right: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: translateY(-2px) rotate(45deg);
  animation: bob 1.8s var(--ease) infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(-3px) rotate(45deg); }
  50% { transform: translateY(2px) rotate(45deg); }
}

/* ============================================================
   VINE THREADS  (draw-on via stroke-dashoffset)
   Default = fully drawn so the page is complete without JS.
   ============================================================ */
.thread { display: block; }
.thread-down { width: 60px; height: 84px; margin: -8px auto 0; }
.band-vine, .footer-vine {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 70px;
  z-index: 2;
}

/* ============================================================
   INTRO + PATHWAYS
   ============================================================ */
.intro {
  position: relative;
  padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 7vw, 84px);
  background: radial-gradient(120% 110% at 88% -10%, var(--aqua-pale) 0%, transparent 52%), var(--cream);
}
.intro-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: end;
  margin-bottom: clamp(40px, 6vw, 64px);
}
.intro-aside p { margin-bottom: 22px; color: var(--muted); font-size: 18px; }
.intro-jumps { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 0; margin: 0; list-style: none; }
.intro-jumps a { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; text-decoration: none; }
.intro-jumps a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* 2027 festival theme pills */
.theme-tags { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 22px 0 0; list-style: none; }
.theme-tags li {
  display: inline-flex; align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-weight: 800; font-size: 14px;
  color: var(--teal-deep);
}
.theme-tags li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; margin-right: 9px; background: currentColor; }
.theme-tags li:nth-child(1) { color: var(--green-deep); }
.theme-tags li:nth-child(2) { color: var(--coral-deep); }
.theme-tags li:nth-child(3) { color: var(--teal); }
.theme-tags li:nth-child(4) { color: var(--pink); }

.dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.dot-coral { background: var(--coral); }
.dot-green { background: var(--green-deep); }
.dot-yellow { background: var(--yellow); }
.dot-pink { background: var(--pink); }
.dot-aqua { background: var(--aqua); }

.pathways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pathway {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.pathway::before { position: absolute; top: 0; left: 0; right: 0; height: 6px; z-index: 2; content: ""; }
.accent-coral::before { background: var(--coral); }
.accent-green::before { background: var(--green-deep); }
.accent-yellow::before { background: var(--yellow); }
.pathway:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

.pathway-media { position: relative; aspect-ratio: 1200 / 650; overflow: hidden; }
.pathway-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); }
.pathway:hover .pathway-media img { transform: scale(1.05); }
.pathway-media::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,47,87,0) 40%, rgba(12,47,87,0.2) 100%); content: ""; }
.pathway-tag {
  position: absolute;
  top: 16px; left: 16px; z-index: 2;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--navy);
  font-size: 12px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase;
}
.pathway-body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 24px; }
.pathway-body p { margin-bottom: 18px; color: var(--muted); }

/* ============================================================
   REGIONAL / TOURING
   ============================================================ */
.touring {
  position: relative;
  padding: clamp(56px, 7vw, 88px) 0;
  overflow: hidden;
  background:
    radial-gradient(75% 130% at 100% 0%, rgba(255, 107, 84, 0.22), transparent 58%),
    var(--cream);
}
.touring[hidden],
.touring-card[hidden] { display: none !important; }
.touring::after {
  position: absolute;
  right: -8vw;
  bottom: -120px;
  width: min(430px, 48vw);
  aspect-ratio: 1;
  border: 28px solid rgba(11, 134, 168, 0.1);
  border-radius: 50%;
  content: "";
}
.touring-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(320px, 1.2fr);
  gap: clamp(32px, 6vw, 76px);
  align-items: center;
}
.touring-copy p { max-width: 580px; color: var(--muted); font-size: 18px; }
.touring-items { display: grid; gap: 18px; }
.touring-card {
  position: relative;
  padding: clamp(26px, 4vw, 42px);
  border: 1px solid rgba(12, 47, 87, 0.12);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(232, 249, 248, 0.96)),
    url("assets/ootb-2025-artwork.jpg") center / cover;
  box-shadow: var(--shadow-md);
}
.touring-card::before {
  position: absolute;
  inset: 12px;
  border: 2px dashed rgba(11, 134, 168, 0.28);
  border-radius: calc(var(--radius-xl) - 8px);
  pointer-events: none;
  content: "";
}
.touring-card > * { position: relative; z-index: 1; }
.touring-card h3 { margin-bottom: 12px; font-size: clamp(30px, 4vw, 48px); }
.touring-card p { max-width: 650px; color: var(--muted); }
.touring-eyebrow,
.touring-date { font-size: 13px; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; }
.touring-eyebrow { margin-bottom: 12px; color: var(--coral-deep) !important; }
.touring-date { display: inline-flex; margin: 16px 0 0; padding: 7px 13px; border-radius: 999px; background: var(--navy); color: #fff !important; }
.touring-card .touring-date + p { margin-top: 16px; }

/* ============================================================
   PROGRAM / WHAT'S ON
   ============================================================ */
.program {
  position: relative;
  padding: clamp(64px, 8vw, 96px) 0 clamp(60px, 8vw, 92px);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(11, 134, 168, 0.55), transparent 55%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
}
.program-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px; margin-bottom: 26px; }
.program-head h2 { margin-bottom: 12px; }
.program-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.lede-light { max-width: 540px; color: rgba(255, 255, 255, 0.82); font-size: 18px; margin: 0; }

.filter-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.filter-row a {
  display: inline-flex; align-items: center;
  min-height: 38px; padding: 0 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff; font-size: 14px; font-weight: 800;
}
.filter-row a { text-decoration: none; transition: background .18s ease, border-color .18s ease, color .18s ease; }
.filter-row a:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.4); }
.filter-row a.is-on { background: var(--yellow); border-color: var(--yellow); color: var(--navy); }
.filter-row a.is-on:hover { background: #fff; border-color: #fff; }
.program .text-link { color: #fff; }

.event-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding: 0; margin: 0 0 18px; list-style: none; }
.event-card {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius);
  background: var(--cream); color: var(--ink);
  box-shadow: var(--shadow-md);
  transition: transform 220ms var(--ease);
}
.event-card:hover { transform: translateY(-5px); }
.event-media { position: relative; min-height: 156px; }
/* A photo has to end up the same shape as a painted tile, or one card towers
   over the row. Out of flow, so the box is the tile's min-height whether or
   not the image has arrived; cover, so a press still is cropped to that box
   rather than stretched to whatever the width and height attributes say. */
.event-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.event-media.media-aqua { background: radial-gradient(circle at 70% 30%, rgba(255,255,255,0.4), transparent 45%), linear-gradient(140deg, var(--aqua-bright), var(--teal)); }
.event-media.media-paperplanet { background: radial-gradient(circle at 30% 70%, rgba(255,255,255,0.35), transparent 50%), linear-gradient(140deg, var(--green), var(--green-deep)); }
.event-media.media-art { background: url("assets/ootb-2025-artwork.jpg") center / cover no-repeat; }
/* Glow Nation — a First Nations night sky of stars */
.event-media.media-glow {
  background:
    radial-gradient(2px 2px at 22% 32%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 64% 22%, #fff, transparent),
    radial-gradient(2.5px 2.5px at 80% 60%, var(--yellow), transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 12% 64%, var(--aqua-bright), transparent),
    linear-gradient(160deg, #15234d 0%, #2c1a52 100%);
}
.event-type { position: absolute; top: 14px; left: 14px; padding: 5px 12px; border-radius: 999px; background: rgba(12,47,87,0.82); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.03em; }
.event-state {
  position: absolute;
  top: 14px;
  right: 14px;
  max-width: calc(100% - 120px);
  padding: 5px 12px;
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
}
.event-state.state-free { background: var(--green-deep); color: #fff; }
.event-state.state-interest { background: var(--yellow); color: var(--navy); }
.event-state.state-soon { background: var(--pink); color: #fff; }
.event-state.state-sale { background: var(--coral); color: #fff; }
.event-body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.event-body h3 { margin-bottom: 8px; }
.event-meta { margin-bottom: 8px; font-size: 13px; font-weight: 800; color: var(--muted); }
.event-duration { margin: 8px 0 12px; color: var(--navy); font-size: 14px; font-weight: 700; }
.event-desc { margin-bottom: 16px; color: var(--muted); font-size: 15px; }
.event-foot { display: flex; align-items: center; justify-content: space-between; margin: auto 0 0; }
.age-chip { display: inline-flex; align-items: center; padding: 5px 13px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 13px; font-weight: 800; }
.access { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--aqua-pale); color: var(--teal-deep); }
.access .ic { font-size: 18px; }

/* ============================================================
   SCHOOLS
   ============================================================ */
.schools {
  padding: clamp(56px, 7vw, 84px) 0;
  background: radial-gradient(70% 90% at 100% 50%, rgba(111, 191, 115, 0.18), transparent 60%), var(--aqua-pale);
}
.schools-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
.schools-copy p { margin-bottom: 26px; color: var(--muted); font-size: 18px; }
/* The same row .hero-actions and .program-head-actions use: without it the
   two anchors are siblings and the link's coral underline crowds the
   button's shadow. */
.schools-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.school-tools { padding: 28px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.tools-label { margin-bottom: 16px; font-size: 13px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green-deep); }
.school-tools ul { display: grid; gap: 14px; padding: 0; margin: 0; list-style: none; }
.school-tools li { display: flex; align-items: center; gap: 13px; font-weight: 700; }
.teacher-search-criteria strong,
.teacher-search-criteria small { display: block; }
.teacher-search-criteria small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.school-season-note {
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

/* ============================================================
   ENERGY BAND  (full-bleed Holi photo, duotone + blended head)
   ============================================================ */
.energy {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 86vh;
  padding: clamp(80px, 12vw, 160px) 0;
  background: var(--teal-deep);
  color: #fff;
}
.energy::before {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(120deg, var(--teal-deep) 0%, var(--teal) 42%, var(--coral) 100%);
}
/* duotone: grayscale photo mapped onto the gradient via luminosity blend.
   Oversized so the parallax drift never reveals an edge. */
.energy-media {
  position: absolute;
  top: -20%; left: 0; right: 0;
  height: 140%;
  z-index: 1;
  background: url("assets/homepage/made-with-children.jpg") 62% 35% / cover no-repeat;
  filter: grayscale(1) contrast(1.08) brightness(1.02);
  mix-blend-mode: luminosity;
  opacity: 0.92;
}
/* readability scrim — the contrast-safe fallback behind the blended headline */
.energy-scrim {
  position: absolute;
  inset: 0; z-index: 2;
  background: linear-gradient(90deg, rgba(7, 50, 65, 0.82) 0%, rgba(7, 50, 65, 0.5) 48%, rgba(7, 50, 65, 0.12) 100%);
}
.energy-shell { position: relative; z-index: 3; max-width: 880px; }
.energy .kicker-on-dark { color: rgba(255, 255, 255, 0.92); }
.blend-head {
  font-size: clamp(42px, 8.4vw, 116px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
  color: #fff;
  /* mix-blend-mode lets the headline interact with the photo behind it;
     the scrim above guarantees AA contrast even where blending washes out */
  mix-blend-mode: screen;
}
.blend-head em { font-style: normal; color: var(--yellow); }
.energy-lede { max-width: 600px; margin: 0; font-size: clamp(17px, 1.8vw, 21px); line-height: 1.45; color: rgba(255, 255, 255, 0.95); }

/* ============================================================
   VISIT
   ============================================================ */
.visit { position: relative; padding: clamp(60px, 8vw, 88px) 0 clamp(56px, 7vw, 84px); }
.band-vine-soft { opacity: 0.8; }
.visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
.map-embed {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--aqua-pale);
  box-shadow: var(--shadow-md);
}
.map-embed iframe { display: block; width: 100%; min-height: 360px; border: 0; }
.visit-copy p { color: var(--muted); font-size: 18px; }
.visit-chips { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0 0 26px; list-style: none; }
.visit-chips li { display: flex; }
.visit-chips a {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 16px;
  border-radius: 999px;
  background: var(--aqua-pale); color: var(--teal-deep);
  font-weight: 800; font-size: 14px;
  text-decoration: none;
}
.visit-chips a:hover { text-decoration: underline; text-underline-offset: 4px; }
.visit-intro { max-width: 80ch; margin: 24px 0 0; color: var(--teal-deep); font-size: clamp(18px, 2vw, 22px); line-height: 1.65; }
.visit-navigation { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 28px; }
.visit-navigation a { color: var(--teal-deep); font-weight: 800; text-underline-offset: 6px; }
.visit-navigation a[aria-current] { text-decoration-thickness: 3px; }
.visit-destinations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 64px); padding-top: 48px; }
.visit-destinations > a { padding: 28px 0; border-top: 4px solid var(--green-deep); color: var(--navy); text-decoration: none; }
.visit-destinations h2 { display: flex; align-items: flex-start; gap: 16px; margin: 0 0 16px; font-size: clamp(28px, 3.2vw, 42px); }
.visit-destinations h2 span { flex: 0 0 auto; }
.visit-destinations > a:hover h2 { text-decoration: underline; text-underline-offset: 5px; }
.visit-destinations p { margin: 0; color: var(--muted); font-size: 18px; }
.visit-address { padding: 20px 24px; border-left: 4px solid var(--green-deep); background: var(--aqua-pale); color: var(--navy); }
.venue-directory h2 a { color: var(--navy); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.venue-directory section + section { margin-top: 28px; padding-top: 28px; }
.other-festival-spaces { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
.other-festival-spaces h3 { color: var(--navy); }
.visit-document-list { display: grid; gap: 16px; padding-left: 22px; }
.visit-document-list a { color: var(--teal-deep); font-weight: 800; }
.visit-download { max-width: 100%; white-space: normal; text-align: center; }
.editorial-copy section[id] { scroll-margin-top: calc(var(--header-reserve) + 24px); }
@media (max-width: 680px) {
  .visit-destinations { grid-template-columns: 1fr; gap: 12px; padding-top: 28px; }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
.access-band {
  padding: clamp(56px, 7vw, 84px) 0;
  background: radial-gradient(80% 90% at 0% 0%, var(--aqua-pale), transparent 55%), var(--cream);
}
.access-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
.access-media { margin: 0; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); transform: rotate(-1deg); }
.access-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.access-copy p { color: var(--muted); font-size: 18px; }
.access-list { display: grid; gap: 12px; padding: 0; margin: 0 0 24px; list-style: none; }
.access-list li { display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--ink); }
.accessibility-intro { max-width: 68ch; margin-top: 24px; color: var(--teal-deep); font-size: clamp(18px, 2vw, 22px); line-height: 1.65; }
.accessibility-intro p:last-child { margin-bottom: 0; }
.accessible-performance-group { margin-top: 32px; scroll-margin-top: calc(var(--header-reserve) + 24px); }
.accessible-performance-group h3 { color: var(--teal-deep); }
.accessible-performance-list { list-style: none; padding: 0; margin: 16px 0 0; }
.accessible-performance-list li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.accessible-performance-list a { color: var(--navy); font-weight: 800; text-underline-offset: 4px; }
.accessible-performance-list time { display: block; margin-top: 4px; }
.accessibility-facilities { padding-left: 24px; }
.accessibility-facilities li + li { margin-top: 12px; }

/* ============================================================
   EDITORIAL PAGES
   ============================================================ */
/* Editorial pages share the festival's type and colours while keeping long
   copy readable. Section links remain visible beside the story on desktop. */
.editorial-main { padding-top: var(--header-reserve); padding-bottom: 80px; }
.editorial-hero { padding: 28px 0 clamp(40px, 6vw, 72px); background: var(--aqua-pale); }
.editorial-hero .kicker { color: var(--teal-deep); }
.editorial-hero .event-breadcrumb { margin-bottom: clamp(30px, 5vw, 56px); }
.editorial-hero h1 {
  max-width: 16ch; margin: 12px 0 0; color: var(--navy);
  font-size: clamp(40px, 5.6vw, 76px); line-height: 1.04;
}
.editorial-grid {
  display: grid; grid-template-columns: minmax(170px, 220px) minmax(0, 68ch);
  gap: clamp(32px, 6vw, 88px); align-items: start; padding-top: clamp(36px, 5vw, 64px);
}
.editorial-sections { position: sticky; top: calc(var(--header-reserve) + 28px); }
.editorial-sections > p { margin-bottom: 16px; color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.editorial-sections ul { display: grid; gap: 14px; padding: 0; margin: 0; list-style: none; }
.editorial-sections a { color: var(--teal-deep); font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.editorial-sections a:hover { color: var(--navy); }
.editorial-copy { min-width: 0; font-size: 18px; line-height: 1.7; }
.editorial-copy section + section { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); }
.editorial-copy h2 { color: var(--navy); font-size: clamp(30px, 3vw, 42px); line-height: 1.12; }
.editorial-copy p { margin-bottom: 24px; }
.editorial-copy p:last-child { margin-bottom: 0; }
.editorial-copy .editorial-lede { color: var(--teal-deep); font-size: clamp(20px, 2vw, 24px); line-height: 1.6; }
.editorial-copy .editorial-highlight { margin-block: 32px; padding-left: 22px; border-left: 5px solid var(--yellow); color: var(--navy); font-family: var(--font-display); font-size: clamp(26px, 3vw, 34px); line-height: 1.25; }
.editorial-copy p a { color: var(--teal-deep); font-weight: 800; text-underline-offset: 4px; }
.editorial-page .primary-nav a[aria-current="page"] > span { background-size: 100% 7px; }
.content-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.content-image { min-width: 0; margin: 32px 0; }
.content-image img { display: block; width: 100%; height: auto; border-radius: 16px; }
.content-image figcaption { margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.content-image-hero { margin: 0; }
.listing-hero .content-image figcaption { color: inherit; }
.content-image-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 32px 0; align-items: start; }
.content-image-pair .content-image { margin: 0; }
@media (max-width: 800px) {
  .content-hero-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .content-image-pair { grid-template-columns: minmax(0, 1fr); }
}
/* Keep the logo and menu on one row on laptops. Expanded search gets its own
   row so typing never squeezes or overlaps the six navigation destinations. */
@media (min-width: 1021px) and (max-width: 1360px) {
  .site-header { gap: 16px; padding-inline: 24px; }
  .logo-image { width: 190px; }
  .primary-nav { gap: clamp(12px, 1.5vw, 20px); }
  .primary-nav a { font-size: 15px; }
  .site-header:has(.header-search.is-open) .header-search { grid-column: 1 / -1; justify-self: end; }
}
@media (max-width: 680px) {
  .editorial-main { padding-bottom: 56px; }
  .editorial-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .editorial-sections { position: static; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
  .editorial-sections ul { display: flex; flex-wrap: wrap; gap: 14px 24px; }
  .editorial-copy { font-size: 17px; }
}

/* ---------- Partners page ---------- */
.partners-main { padding: calc(var(--header-reserve) + 28px) 0 80px; }
.partners-intro { max-width: 46rem; margin-bottom: clamp(28px, 4vw, 44px); }
.partners-heading { margin: 6px 0 12px; color: var(--navy); font-size: clamp(34px, 4.4vw, 54px); line-height: 1.02; }
.partners-copy { color: var(--muted); font-size: 18px; line-height: 1.7; }
.partners-copy p { margin: 0 0 20px; }
.partners-contact { margin-top: 28px; color: var(--navy); font-style: normal; font-size: 18px; line-height: 1.7; }
.partners-contact p { margin: 0 0 8px; }
.partners-contact a { color: var(--teal-deep); font-weight: 800; text-underline-offset: 4px; }
/* One band per tier. The logo and its name, nothing else: the partnership asks
   for the acknowledgement, not a feature about the partner. */
.partners-tier {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 16px 40px;
  align-items: center;
  padding: clamp(24px, 3vw, 36px) 0;
  border-top: 1px solid var(--line);
}
.partners-tier-title { margin: 0; color: var(--navy); font-size: clamp(22px, 2.2vw, 28px); }
.partners-logos { display: flex; flex-wrap: wrap; gap: 24px 40px; margin: 0; padding: 0; list-style: none; }
/* The link carries the width: an image sized in percent inside a
   shrink-to-fit box falls back to its 620px attribute and sits off centre.
   The crop trims the file's own top and bottom margin. */
.partners-logo-link { display: block; width: min(320px, 100%); border-radius: var(--radius); }
.partners-logo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 620 / 250;
  object-fit: cover;
}

/* ============================================================
   SUMMIT
   ============================================================ */
.signup { padding: clamp(56px, 7vw, 84px) 0; }
.signup-grid { display: grid; gap: 24px; }
.summit-card {
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--radius-xl);
  background: radial-gradient(90% 120% at 0% 0%, rgba(255, 194, 61, 0.22), transparent 55%), linear-gradient(150deg, var(--green-deep), var(--teal-deep));
  color: #fff;
}
.summit-card .kicker-yellow { color: var(--yellow); }
.summit-card p { color: rgba(255, 255, 255, 0.9); margin-bottom: 24px; max-width: 68ch; }

/* The sign-up is a link to /subscribe in the footer. align-self keeps it at
   its own width inside the flex column instead of stretching to the column,
   which would read as a form field. */
.newsletter-cta { align-self: flex-start; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  position: relative;
  padding: 80px 0 26px;
  background: radial-gradient(80% 120% at 12% 0%, rgba(11, 134, 168, 0.55), transparent 55%), linear-gradient(160deg, var(--teal-deep) 0%, var(--navy-deep) 100%);
  color: #fff;
}
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 0.8fr 1fr; gap: clamp(28px, 5vw, 60px); align-items: start; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 20px; }
.footer-logo { width: auto; }
.footer-logo-qpac { height: 50px; }
.footer-logo-qld-lockup { width: 280px; max-width: 100%; height: auto; }
.footer-about p { color: rgba(255, 255, 255, 0.82); }
.site-footer h2 { margin-bottom: 16px; font-size: 20px; }
.site-footer .acknowledge-title { margin: 0 0 8px; font-size: 15px; }
.acknowledge { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.78) !important; }
.site-footer p, .site-footer li { color: rgba(255, 255, 255, 0.82); }
.site-footer ul { display: grid; gap: 9px; padding: 0; margin: 0; list-style: none; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-ticketing > h2 { margin-bottom: 10px; line-height: 1.25; max-width: 30ch; }
.footer-ticketing > p { line-height: 1.4; max-width: 34ch; }
.footer-ticketing > p a { color: var(--yellow); text-decoration: underline; text-underline-offset: 0.18em; }
.footer-ticketing-contact { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.24); }
.footer-ticketing-contact h2 { margin-bottom: 9px; }
.footer-ticketing-contact p { margin-bottom: 12px; line-height: 1.4; }
.footer-ticketing-contact p:last-child { margin-bottom: 0; }
.footer-bottom {
  display: flex; flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 28px;
  margin-top: 52px; padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 14px; color: rgba(255, 255, 255, 0.78);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 18px; }
/* Credited the way QPAC credits Hyundai: a title and the logo, last before the
   copyright line. The navy wordmark needs a white ground on the dark footer;
   the crop trims the file's own top and bottom margin. */
.footer-partner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px 24px;
  margin-top: 52px;
}
.site-footer .footer-partner h2 { margin: 0; font-size: 16px; }
.footer-partner a {
  display: block;
  max-width: 100%;
  padding: 6px 0;
}
.footer-partner-logo {
  display: block;
  width: 280px; max-width: 100%; height: auto;
}
.footer-partner + .footer-bottom { margin-top: 28px; }

/* ============================================================
   NOT FOUND
   ============================================================ */
.error-page { background: var(--cream); }

.error-page .site-header {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: var(--line);
}

/* The header is fixed, so the page's own content has to start below it. */
.error-main {
  padding: calc(var(--header-reserve) + 72px) 0 96px;
  max-width: 44rem;
}

.error-main h1 { margin: 0 0 12px; }
.error-main p { margin: 0 0 20px; color: var(--muted); }

.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ============================================================
   FESTIVAL SCHEDULE
   ============================================================ */
.schedule-page {
  background: var(--cream);
}

.schedule-page .site-header {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 24px rgba(12, 47, 87, 0.06);
}

.schedule-page .primary-nav a[aria-current="page"] {
  background-size: 100% 7px;
}

.schedule-main {
  min-height: 100vh;
}

.schedule-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-reserve) + 70px) 0 72px;
  background:
    radial-gradient(circle at 15% 18%, rgba(255, 255, 255, 0.64) 0 7%, transparent 7.4%),
    linear-gradient(145deg, var(--aqua-pale) 0%, #d9f0df 52%, var(--cream) 100%);
  border-bottom: 1px solid rgba(12, 47, 87, 0.09);
}

.schedule-hero::after {
  content: "";
  position: absolute;
  right: -6vw;
  bottom: -72px;
  width: clamp(260px, 42vw, 620px);
  height: 190px;
  background: var(--yellow);
  opacity: 0.2;
  border-radius: 54% 46% 0 0 / 68% 58% 0 0;
  transform: rotate(-5deg);
}

.schedule-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 850px;
}

.schedule-hero h1 {
  max-width: 720px;
  margin-bottom: 18px;
  color: var(--navy);
  font-size: clamp(52px, 9vw, 108px);
  line-height: 0.9;
  letter-spacing: -0.045em;
}

.schedule-hero-lede {
  max-width: 690px;
  margin-bottom: 28px;
  color: var(--navy);
  font-size: clamp(19px, 2.4vw, 27px);
  line-height: 1.35;
}

.schedule-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
}

.schedule-hero-vine {
  position: absolute;
  right: -40px;
  top: calc(var(--header-reserve) + 20px);
  width: min(52vw, 760px);
  opacity: 0.65;
  transform: rotate(4deg);
}

.schedule-day-nav {
  position: sticky;
  top: var(--header-reserve);
  z-index: 80;
  /* Opaque, not 96%: there is no blur behind it, so the translucency only let
     the day heading ghost through the rail as it scrolled under. */
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 22px rgba(12, 47, 87, 0.08);
}

.schedule-day-nav-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Six columns that divide the width rather than a 760px floor that forced the
   rail to scroll sideways on anything narrower. The wrapper keeps overflow-x
   as a safety net, but nothing should reach it. */
.schedule-day-nav-inner {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.schedule-day-link {
  display: grid;
  gap: 1px;
  min-height: 66px;
  padding: 10px 14px;
  color: var(--navy);
  border: 2px solid transparent;
  border-radius: 13px;
  text-align: center;
  text-decoration: none;
  transition: color 160ms var(--ease), background 160ms var(--ease), border-color 160ms var(--ease), transform 160ms var(--ease);
}

.schedule-day-link span {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.schedule-day-link strong {
  font-family: var(--font-display);
  font-size: 19px;
}

.schedule-day-link:hover {
  border-color: var(--yellow);
  transform: translateY(-2px);
}

.schedule-day-link.is-active,
.schedule-day-link[aria-current="date"] {
  background: var(--yellow);
  border-color: var(--yellow);
  box-shadow: 0 7px 16px rgba(255, 194, 61, 0.28);
}

.schedule-content {
  padding: clamp(48px, 8vw, 96px) 0 90px;
  background:
    linear-gradient(rgba(12, 47, 87, 0.035) 1px, transparent 1px),
    var(--cream);
  background-size: 100% 38px;
}

.schedule-days {
  display: grid;
  gap: 44px;
}

.schedule-day {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

/* Land a chosen day just below the header + date rail, and just above the
   reading line the rail uses to decide which date is current. Needs to outrank
   the generic `section[id]` offset, which only clears the header. */
.schedule-page .schedule-day {
  scroll-margin-top: calc(var(--schedule-sticky-h, calc(var(--header-reserve) + 100px)) + 8px);
}

.schedule-day:nth-child(odd) {
  transform: rotate(-0.12deg);
}

.schedule-day:nth-child(even) {
  transform: rotate(0.12deg);
}

.schedule-day-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: 26px clamp(22px, 4vw, 42px);
  background: var(--navy);
  color: #fff;
}

.schedule-day-heading p {
  margin-bottom: 3px;
  color: var(--aqua-bright);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.schedule-day-heading h2 {
  margin: 0;
  font-size: clamp(29px, 4vw, 44px);
}

.schedule-day-heading > span {
  flex: 0 0 auto;
  padding: 7px 12px;
  background: var(--yellow);
  color: var(--navy);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
}

.schedule-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.schedule-event {
  display: grid;
  grid-template-columns: minmax(105px, 0.75fr) minmax(300px, 2.4fr) minmax(180px, 1.2fr);
  align-items: center;
  gap: 24px;
  min-height: 136px;
  padding: 24px clamp(22px, 4vw, 42px);
  border-top: 1px solid var(--line);
}

.schedule-event:first-child {
  border-top: 0;
}

.schedule-event > time {
  align-self: start;
  color: var(--coral-deep);
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 31px);
  font-weight: 700;
  line-height: 1;
}

.schedule-event-type {
  margin-bottom: 4px;
  color: var(--teal-deep);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.schedule-event-title {
  margin-bottom: 7px;
  color: var(--navy);
}

.schedule-event-title a {
  color: inherit;
  text-decoration-color: var(--teal-deep);
  text-underline-offset: 4px;
}

.schedule-event-title a:hover {
  color: var(--teal-deep);
}

.schedule-event-title a:focus-visible {
  outline: 3px solid var(--coral-deep);
  outline-offset: 3px;
}

.schedule-event div > p:last-child,
.schedule-event-venue {
  margin: 0;
  color: var(--muted);
}

.schedule-event-venue {
  padding-left: 21px;
  border-left: 3px solid var(--aqua);
  font-weight: 800;
}

.schedule-event-venue small {
  display: block;
  margin-top: 2px;
  font-weight: 600;
}

.schedule-event-all-day {
  background: rgba(95, 207, 232, 0.12);
}

/* Opening hours, not a start time: a range and a "Time TBC" are longer than
   "9:30am", so they drop a size to stay inside the time column. */
.schedule-event-dropins > time,
.schedule-event-tbc > time {
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.15;
}
.schedule-event-tbc > time { color: var(--muted); }

.schedule-event-dropins {
  background: rgba(127, 194, 65, 0.1);
}
/* The list is the content of the row, so it reads as the text column, not as
   the closing meta line the generic "last paragraph" rule styles. */
.schedule-dropin-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.schedule-event-dropins div > p:not(.schedule-event-type) { margin: 0; color: var(--muted); }
@media (min-width: 900px) {
  .schedule-dropin-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
}
.schedule-dropin-list li { color: var(--navy); }
.schedule-dropin-list strong { font-weight: 800; }
.schedule-dropin-list span { display: block; color: var(--muted); font-size: 15px; }

.schedule-event-potential {
  background: rgba(255, 194, 61, 0.09);
  box-shadow: inset 7px 0 0 var(--yellow);
}

.schedule-badge {
  display: inline-block;
  padding: 3px 9px;
  background: var(--yellow);
  color: var(--navy);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.extended-season,
.schedule-access {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(300px, 1.5fr);
  gap: 36px;
  margin-top: 54px;
  padding: clamp(28px, 5vw, 48px);
  color: #fff;
  background: linear-gradient(135deg, var(--teal-deep), var(--navy));
  box-shadow: var(--shadow-md);
}

.extended-season h2,
.schedule-access h2 {
  margin-bottom: 10px;
}

.extended-season p,
.schedule-access p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
}

.schedule-access {
  margin-top: 24px;
  border-radius: var(--radius-lg);
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.schedule-access p {
  color: var(--muted);
}

.schedule-access a {
  color: var(--teal-deep);
  font-weight: 900;
  text-underline-offset: 4px;
}

@media (max-width: 1020px) {
  /* the nav drops onto its own row inside the header */
  :root { --header-reserve: var(--actual-header-h, 142px); }
  .schedule-hero-vine { width: 60vw; opacity: 0.38; }
  .schedule-event { grid-template-columns: 100px minmax(260px, 1fr); }
  .schedule-event-venue { grid-column: 2; padding-left: 0; border-left: 0; }
}

@media (max-width: 680px) {
  /* and wraps onto a second line once the six links no longer fit */
  :root { --header-reserve: var(--actual-header-h, 184px); }
  .schedule-hero { padding-bottom: 54px; }
  .schedule-hero h1 { font-size: clamp(50px, 19vw, 76px); }
  .schedule-hero-vine { right: -120px; width: 520px; opacity: 0.23; }
  .schedule-hero-actions,
  .schedule-hero-actions .button { width: 100%; }
  .schedule-hero-actions .text-link { margin: 4px auto 0; }
  /* The festival is exactly six days, so the rail should show all six rather
     than scroll. Sideways scrolling hid the weekend — the days families care
     most about — and the active pill never scrolled itself back into view.
     Every day is in June, which the hero kicker and each day heading already
     say, so the month drops out of the pill (kept for screen readers) and the
     weekday sits above the date. */
  .schedule-day-nav-inner {
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    min-width: 0;
    /* no inset of its own, so the rail's six columns line up with the edges of
       the day cards below it */
    padding: 9px 0 10px;
  }
  .schedule-day-link {
    gap: 0;
    min-height: 0;
    padding: 8px 2px 9px;
    border-radius: 11px;
  }
  .schedule-day-link span { font-size: 11px; line-height: 1.35; letter-spacing: 0.04em; }
  .schedule-day-link strong { font-size: 21px; line-height: 1.2; }
  .schedule-day-month {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .schedule-day { transform: none !important; }
  .schedule-day-heading { align-items: start; padding: 22px 20px; }
  .schedule-event { grid-template-columns: 1fr; gap: 9px; min-height: 0; padding: 23px 20px; }
  .schedule-event > time { font-size: 25px; }
  .schedule-event-venue { grid-column: auto; margin-top: 2px; padding: 0; border-top: 0; }
  .extended-season,
  .schedule-access { grid-template-columns: 1fr; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .schedule-day-link { transition: none; }
  .schedule-day-link:hover { transform: none; }
}

@media print {
  @page { margin: 14mm; }
  body.schedule-page { background: #fff; color: #000; font-size: 10pt; }
  .schedule-page .site-header,
  .schedule-day-nav,
  .schedule-hero-actions,
  .schedule-hero-vine,
  .schedule-page .site-footer { display: none !important; }
  .schedule-hero { padding: 0 0 18pt; background: #fff; border: 0; }
  .schedule-hero::after { display: none; }
  .schedule-hero h1 { color: #000; font-size: 34pt; }
  .schedule-content { padding: 0; background: #fff; }
  .schedule-days { gap: 18pt; }
  .schedule-day { border: 1px solid #777; box-shadow: none; transform: none !important; }
  .schedule-day-heading { padding: 10pt 12pt; background: #eee; color: #000; break-after: avoid-page; page-break-after: avoid; }
  .schedule-day-heading p { color: #333; }
  .schedule-event { min-height: 0; padding: 8pt 12pt; break-inside: avoid; page-break-inside: avoid; }
  .schedule-event > time,
  .schedule-event-title,
  .schedule-event-venue { color: #000; }
  .extended-season,
  .schedule-access { margin-top: 18pt; padding: 12pt; color: #000; background: #fff; border: 1px solid #777; box-shadow: none; break-inside: avoid; }
  .extended-season p,
  .schedule-access p { color: #000; }
}

/* ============================================================
   EVENT PAGE
   One template, two audience views. Everything below the hero is
   rendered at build time by src/lib/event-render.mjs; the styles
   here describe shapes, not content.

   Cards are rationed. A card means "this is a thing you act on":
   the booking rail, the plan card, a workshop, a related show.
   Everything else is prose on the page, separated by rules and
   space rather than fenced off in its own white box.
   ============================================================ */
.event-page { background: var(--cream); }

.event-activities-list { margin: 0; padding: 0; list-style: none; }
.event-activities-list li { padding: 20px 0; border-bottom: 1px solid var(--line); }
.event-activities-list li:first-child { padding-top: 0; }
.event-activities-list h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 22px; color: var(--navy); }
.event-activities-list p { margin: 0; color: var(--muted); }
.event-activities-list a { color: var(--teal-deep); text-underline-offset: 4px; }

/* The renderer switches views with the hidden attribute so assistive
   technology skips the inactive one. Nothing in this section may set a
   display that outranks it. */
.event-page [hidden] { display: none !important; }

.event-page .site-header {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 24px rgba(12, 47, 87, 0.06);
}

.event-main {
  min-height: 100vh;
  padding: calc(var(--header-reserve) + 26px) 0 96px;
}

.event-noscript { padding: 20px 0; }
.event-noscript p {
  margin: 0;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--navy);
  font-weight: 700;
}

/* ---- breadcrumb ---- */
.event-breadcrumb { margin-bottom: 18px; }
.event-breadcrumb ol {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  margin: 0; padding: 0; list-style: none;
  color: var(--muted); font-size: 13px; font-weight: 800;
}
.event-breadcrumb li + li::before { margin-right: 10px; color: rgba(12, 47, 87, 0.4); content: "\203A"; }
.event-breadcrumb a { color: var(--teal-deep); text-underline-offset: 4px; }
.event-breadcrumb [aria-current="page"] { color: var(--navy); }

/* ---- hero and title card ---- */
/* The band is full-bleed: the section sits outside .shell, so it is already the
   width of the window and needs no 100vw trick to escape one, and so no
   scrollbar-width overflow either. The title card carries its own measure. */
.event-hero {
  position: relative;
  margin-bottom: 4px;
}

/* The frame takes the shape of the 2560x1092 festival master, so on a laptop
   or tablet the picture fills the width whole. A wide or short window caps the
   height to keep the title card in reach; the width is stated rather than auto
   so that cap cannot be transferred through the ratio and narrow the band. */
.event-hero-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 2560 / 1092;
  max-height: min(900px, 70vh);
  overflow: hidden;
  background: var(--teal-deep);
}
.event-hero-img {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.event-hero-fill { display: none; }

/* Capped: the frame is wider than the picture, and these two queries are
   exactly when (width / 2.344 beyond 70vh, or beyond 900px). The picture is
   then never cropped. It shows whole at the frame's height, centred, its side
   edges fading into a blurred copy of itself that fills the rest of the band. */
@media (min-aspect-ratio: 1641/1000), (min-width: 2110px) {
  .event-hero-img {
    width: auto; max-width: 100%;
    margin-inline: auto;
    aspect-ratio: auto 2560 / 1092;
    object-fit: contain;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 max(56px, 8%), #000 min(calc(100% - 56px), 92%), transparent);
    mask-image: linear-gradient(to right, transparent, #000 max(56px, 8%), #000 min(calc(100% - 56px), 92%), transparent);
  }
  .event-hero-fill {
    position: absolute; inset: 0;
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: blur(28px) saturate(1.08);
    transform: scale(1.12);
  }
  .event-free-activities .event-hero-fill {
    filter: blur(12px) saturate(1.08);
  }
}
/* A camera in the frame's lower right. The title card overlaps the lower
   68px of the frame, so the button sits just above that and stays in view.
   The credit is positioned off the button rather than in flow, so the hidden
   pill leaves no invisible hover area beside it. */
.event-hero-credit {
  position: absolute; right: 24px; bottom: 84px;
  z-index: 1;
}
.event-hero-credit-toggle {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(8, 36, 65, 0.66);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.event-hero-credit-toggle svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round;
}
.event-hero-credit-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.event-hero-credit-text {
  position: absolute; right: calc(100% + 8px); top: 50%;
  width: max-content;
  max-width: min(420px, calc(100vw - 104px));
  margin: 0;
  padding: 6px 13px;
  background: rgba(8, 36, 65, 0.82);
  border-radius: 18px;
  color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1.4;
  text-align: right;
  opacity: 0; visibility: hidden;
  transform: translate(6px, -50%);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.event-hero-credit:hover .event-hero-credit-text,
.event-hero-credit-toggle:focus-visible + .event-hero-credit-text,
.event-hero-credit-toggle[aria-expanded="true"] + .event-hero-credit-text {
  opacity: 1; visibility: visible;
  transform: translate(0, -50%);
}
@media (prefers-reduced-motion: reduce) {
  .event-hero-credit-text { transition: none; }
}

.event-titlecard {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 48px), 940px);
  margin: 0 auto;
  padding: clamp(24px, 3.4vw, 38px);
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
/* Text never sits on the picture: the card overlaps only the frame's lower
   edge, which the image spec keeps free of essential content. */
.event-hero.has-hero .event-titlecard { margin-top: -68px; }

.event-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.event-page .event-chips .event-type { position: static; top: auto; left: auto; }
.event-page .chip {
  padding: 6px 13px;
  background: var(--aqua-pale);
  color: var(--teal-deep);
  font-size: 12px;
}
.event-page .chip-price { background: rgba(255, 194, 61, 0.26); color: #7a5200; }
.event-page .chip-price-free { background: rgba(111, 191, 115, 0.2); color: #236b38; }
.event-page .chip-access { background: var(--aqua-pale); color: var(--teal-deep); }
.event-page .chip-code {
  background: rgba(12, 47, 87, 0.07);
  color: var(--navy);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: 0.02em;
}

.event-title {
  margin: 0 0 8px;
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 5.2vw, 60px);
  line-height: 1.03;
}
.event-byline { margin: 0; color: var(--muted); font-size: 17px; font-weight: 700; }

/* The company above the title, as on a QPAC show page. Tracked-out small caps
   rather than a second heading: it has to name the company without competing
   with the show's own name directly under it. */
.event-presenter {
  margin: 0 0 6px;
  color: var(--teal-deep);
  font-size: 14px; font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.event-facts {
  display: flex; flex-wrap: wrap; gap: 14px 34px;
  margin: 22px 0 0; padding-top: 18px;
  border-top: 1px solid var(--line);
}
.event-facts dt {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 12px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase;
}
.event-facts dd { margin: 0; max-width: 34ch; color: var(--navy); font-size: 15px; font-weight: 800; }

/* ---- audience switch and section nav ---- */
/* One solid band, and the only one on a cream-and-white page. As a white pill
   under the white title card the bar read as the tail of the card rather than
   as a control, and nothing about it said "this follows you down the page". */
/* the wrapper carries the stickiness: a sticky box can only travel inside
   its own parent, and the bar fills its slot exactly */
.event-shell > [data-slot="switch"] {
  position: sticky;
  top: var(--header-reserve);
  z-index: 70;
  margin: 18px 0 0;
  /* the page colour, so content scrolling past the bar's rounded
     corners is masked rather than peeking out beside them */
  padding: 8px 0;
  background: var(--cream);
}
.audience-switch {
  display: flex; align-items: center; flex-wrap: wrap;
  margin: 0;
  padding: 0 10px 0 20px;
  /* opaque, for the same reason as the schedule day rail: content scrolls under it */
  background: var(--teal-deep);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 28px rgba(7, 93, 119, 0.26);
}
.audience-switch-control {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 0;
}
.audience-switch-label, .event-jump-label {
  flex: none;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase;
}
.audience-switch-buttons {
  display: flex; gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
}
.audience-btn {
  padding: 8px 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-family: var(--font-display);
  font-size: 15px; font-weight: 600;
  cursor: pointer;
  transition: background 180ms var(--ease), color 180ms var(--ease);
}
.audience-btn:hover { background: rgba(255, 255, 255, 0.22); }
/* the audience keeps its colour, read the other way round: a light fill on the
   dark band rather than a dark fill on a light one */
.audience-btn[aria-pressed="true"] { background: #fff; color: var(--navy); }
html[data-view="schools"] .audience-btn[aria-pressed="true"] { background: var(--green); }
html[data-view="families"] .audience-btn[aria-pressed="true"] { background: var(--aqua-bright); }
.audience-btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

/* the section nav takes the rest of the band; a hairline rather than a gap, so
   the bar stays one object */
.event-jump {
  display: flex; align-items: center; min-width: 0; gap: 14px;
  margin-left: auto;
  padding: 9px 0 9px 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.24);
}
/* an event with only one audience has no switch to sit beside, so the nav
   starts at the left edge instead of floating against nothing */
.event-jump:only-child { margin-left: 0; padding-left: 0; border-left: 0; }
.event-jump-links {
  display: flex; align-items: center; gap: 2px;
  min-width: 0;
}
.event-jump a {
  flex: none;
  padding: 8px 13px;
  border-radius: 999px;
  color: #fff;
  font-size: 14px; font-weight: 800;
  text-decoration: none;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.event-jump a:hover { background: rgba(255, 255, 255, 0.2); }
.event-jump a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
/* the filled pill travels with the reader: event-view.js marks whichever
   section the bar is currently sitting over */
.event-jump a[aria-current] { background: #fff; color: var(--teal-deep); }

/* Both audiences are in the HTML; data-view on <html> is set before first
   paint, so the inactive one never flashes. */
html[data-view="schools"] [data-audience="families"] { display: none; }
html[data-view="families"] [data-audience="schools"] { display: none; }
.audience-btn[aria-pressed="true"]:hover { filter: brightness(1.08); }

/* ---- two-column body ---- */
.event-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 348px;
  gap: 40px;
  align-items: start;
  margin-top: 32px;
}
/* --event-bar-h is the measured height of the sticky bar, published by
   event-view.js; the literal is the no-JS floor. Anything that has to clear
   the bar reads it rather than carrying its own guess. */
.event-rail { position: sticky; top: calc(var(--header-reserve) + var(--event-bar-h, 62px) + 24px); }
.event-content, .event-rail { min-width: 0; }

/* Sections are separated by a rule and a wide gutter rather than by a border
   drawn all the way round each one. */
.event-page .event-section {
  margin: 0 0 38px;
  scroll-margin-top: calc(var(--header-reserve) + var(--event-bar-h, 62px) + 22px);
}
.event-section + .event-section { padding-top: 30px; border-top: 1px solid var(--line); }
.event-audience { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--line); }
/* the warning band rides above the copy with no rule of its own */
.event-audience-flush { margin-top: 0; padding-top: 0; border-top: 0; }
.event-section:last-child { margin-bottom: 0; }
/* Extras share the main content column. The decorative vine interrupts the
   adjacent-section rule, so the first section after it needs its own spacing. */
.event-page .band-vine + .event-section:not(.teacher-connect) {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.event-section-title { margin: 0 0 16px; color: var(--navy); font-size: clamp(22px, 2.3vw, 28px); }
.event-section p { color: var(--muted); }
.event-section a { color: var(--teal-deep); font-weight: 800; text-underline-offset: 4px; }
.event-audience > .kicker { margin: 0 0 18px; }
.event-audience > .event-warning-band + * { margin-top: 0; }

/* ---- warning, sitting above the copy it applies to ---- */
.event-warning-band {
  display: flex; align-items: flex-start; gap: 14px;
  margin: 0 0 28px;
  padding: 16px 20px;
  background: rgba(255, 107, 84, 0.11);
  border-left: 5px solid var(--coral);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.event-warning-icon {
  flex: none;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  background: var(--coral);
  border-radius: 50%;
  color: #fff;
  font-family: var(--font-display);
  font-size: 17px; font-weight: 700; line-height: 1;
}
.event-warning-text { min-width: 0; }
.event-warning-text p { margin: 0; color: var(--navy); }
.event-warning-title {
  margin: 0 0 3px !important;
  font-size: 12px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase;
}
.event-page .event-warning-text p + p { font-weight: 700; }

/* ---- note block, above the main copy ---- */
.event-note {
  margin: 0 0 22px;
  padding: 16px 20px;
  background: var(--aqua-pale);
  border-left: 5px solid var(--aqua);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.event-note p { margin: 0; color: var(--navy); }
.event-note-title {
  margin: 0 0 3px !important;
  color: var(--teal-deep) !important;
  font-size: 12px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase;
}

/* ---- folding sections ---- */
.event-fold > details { border-bottom: 1px solid var(--line); }
.event-fold > details[open] { padding-bottom: 22px; }
.event-fold-summary {
  display: flex; align-items: center; gap: 14px;
  padding: 2px 0 18px;
  list-style: none;
  cursor: pointer;
}
.event-fold-summary::-webkit-details-marker { display: none; }
.event-fold-summary .event-section-title { margin: 0; }
.event-fold-mark {
  flex: none;
  position: relative;
  width: 32px; height: 32px;
  margin-left: auto;
  background: rgba(12, 47, 87, 0.07);
  border-radius: 50%;
  transition: background 180ms var(--ease), transform 220ms var(--ease);
}
.event-fold-mark::before,
.event-fold-mark::after {
  position: absolute; left: 50%; top: 50%;
  background: var(--navy);
  content: "";
  transform: translate(-50%, -50%);
}
.event-fold-mark::before { width: 13px; height: 2.5px; }
.event-fold-mark::after { width: 2.5px; height: 13px; transition: opacity 180ms var(--ease); }
.event-fold-summary:hover .event-fold-mark { background: rgba(12, 47, 87, 0.14); }
.event-fold > details[open] .event-fold-mark::after { opacity: 0; }
.event-fold-summary:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }

/* ---- booking cards ---- */
.booking-card {
  padding: 24px 24px 26px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  color: #fff;
}
.booking-families { background: linear-gradient(150deg, var(--navy), var(--navy-deep)); border-top: 6px solid var(--aqua); }
.booking-schools { background: linear-gradient(150deg, var(--teal-deep), var(--navy-deep)); border-top: 6px solid var(--green); }

.event-page .booking-card .event-state {
  position: static; top: auto; right: auto;
  display: inline-block;
  max-width: none;
  margin: 0 0 14px;
}
.booking-price {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 34px; font-weight: 700; line-height: 1;
}
.booking-star { font-size: 0.5em; top: -0.7em; }
.booking-note, .booking-hours { margin: 0 0 2px; color: rgba(255, 255, 255, 0.7); font-size: 13px; font-weight: 700; }
.booking-line { margin: 0 0 6px; color: rgba(255, 255, 255, 0.78); font-size: 13px; font-weight: 700; }
.booking-price + .booking-note + .booking-line { margin-top: 10px; }
.booking-cta { width: 100%; justify-content: center; margin-top: 16px; }
.booking-cta.is-disabled { opacity: 0.55; box-shadow: none; }
.booking-subtitle {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase;
}
/* Discounts live with the price they change, so the box answers "what will
   this cost us" in one place. */
.booking-discounts { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.booking-discounts .discount-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.booking-discounts .discount-list > li { padding: 0; background: none; border: 0; }
.booking-discounts .discount-list h3 { margin: 0 0 3px; color: var(--yellow); font-size: 15px; }
.booking-discounts .discount-list p { margin: 0; color: rgba(255, 255, 255, 0.76); font-size: 13px; line-height: 1.45; }
.booking-discounts .discount-rows { display: grid; margin: 8px 0 0; padding: 0; list-style: none; }
.booking-discounts .discount-rows li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 6px 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.82); font-size: 13px; font-weight: 700;
}
.booking-discounts .discount-rows strong { color: #fff; }

/* A pull-out, not a panel: it sits directly under the ticket button now, so it
   needs enough air above it to read as a separate offer rather than as more
   fine print attached to the button. */
.booking-callout {
  margin: 22px 0 4px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
}
.booking-callout h3 { margin: 0 0 4px; color: var(--yellow); font-size: 16px; }
.booking-callout p { margin: 0; color: rgba(255, 255, 255, 0.9); font-size: 14px; }
.booking-group { margin: 14px 0 0; font-size: 14px; }
.booking-card a:not(.button) { color: #fff; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.booking-fineprint { margin: 10px 0 0; color: rgba(255, 255, 255, 0.62); font-size: 12px; }
.booking-contact { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.booking-contact p { margin: 0 0 5px; color: rgba(255, 255, 255, 0.9); font-size: 15px; }
.booking-contact-title {
  color: #fff;
  font-size: 12px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase;
}

/* the one "Plan your visit" on the page */
.plan-card {
  margin-top: 20px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.plan-card-title { margin: 0 0 10px; color: var(--navy); font-size: 19px; }
.plan-intro { margin: 0; color: var(--muted); font-size: 15px; }
.event-presenting-credits { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.6; }
.event-presenting-credits p:last-child { margin-bottom: 0; }
.event-billing-credits { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.6; }
.event-billing-credits p, .event-billing-credits ~ .event-presenting-credits p { margin-bottom: 0; }
.event-partner-footer { padding: 24px 0; }
.event-partner-footer .event-partner-logos { margin-top: 0; }
.event-partner-footer .event-partner-logos img { width: 300px; }
.event-partner-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin: 24px 0 0; padding: 0; list-style: none; }
.event-partner-logos li { max-width: 100%; }
.event-partner-logos a { display: block; }
.event-partner-logos img { display: block; width: 220px; max-width: 100%; height: auto; }
.plan-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 15px; }
.plan-card a { color: var(--teal-deep); font-weight: 800; text-underline-offset: 4px; }
.plan-group { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.plan-group-title {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase;
}

/* ---- families modules ---- */
.quote-strip { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.quote-strip blockquote {
  margin: 0;
  padding: 4px 0 4px 20px;
  border-left: 4px solid var(--coral);
}
.quote-strip p { margin: 0 0 4px; color: var(--navy); font-family: var(--font-display); font-size: 18px; font-weight: 500; }
.quote-strip cite { color: var(--muted); font-size: 13px; font-weight: 800; font-style: normal; }

.access-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.access-note { margin: 0 0 12px; font-size: 14px; }
.access-details { display: grid; gap: 12px; margin: 0 0 18px; padding-left: 24px; }
.access-links { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 15px; }

/* ---- heading and body pairs: the teacher's guide, good to know ---- */
.note-list { display: grid; gap: 0; margin: 0; }
.note-list > div { padding: 16px 0; border-top: 1px solid var(--line); }
.note-list > div:first-child { padding-top: 0; border-top: 0; }
.note-list dt { margin: 0 0 4px; color: var(--navy); font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.note-list dd { margin: 0; color: var(--muted); }

/* ---- curriculum ---- */
.curriculum-groups { display: grid; gap: 0; }
.curriculum-group { padding: 18px 0; border-top: 1px solid var(--line); }
.curriculum-group:first-child { padding-top: 0; border-top: 0; }
.curriculum-group h3 { margin: 0 0 9px; color: var(--teal-deep); font-size: 16px; }
.curriculum-group p { margin: 0 0 10px; color: var(--muted); }
.curriculum-codes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
/* a syllabus sentence is a line, not a pill */
.curriculum-notes { display: grid; gap: 8px; margin: 10px 0 0; padding: 0 0 0 20px; color: var(--muted); }
.curriculum-notes li { padding-left: 2px; }
.curriculum-codes + .curriculum-notes { margin-top: 12px; }

.doc-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

/* ---- workshops ---- */
.workshop-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.workshop-list > li {
  padding: 20px 22px;
  background: #fff;
  border-left: 5px solid var(--grass);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow-sm);
}
.workshop-list h3 { margin: 0 0 6px; color: var(--navy); font-size: 19px; }
.workshop-list p { margin: 0; }
.workshop-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px !important; }
.workshop-meta span { color: var(--green-deep); font-size: 12px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.workshop-link { margin-top: 10px !important; }

/* ---- sessions ---- */
.session-runtime {
  margin: -6px 0 14px;
  color: var(--muted) !important;
  font-size: 14px; font-weight: 800;
}
/* one panel of days, not a stack of separate boxes */
.session-days {
  display: grid;
  margin: 0; padding: 0 4px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.session-day {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 8px 18px;
  align-items: center;
  padding: 13px 16px;
  border-top: 1px solid var(--line);
}
.session-days > .session-day:first-child { border-top: 0; }
.session-day-label { margin: 0; color: var(--navy); font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.session-times { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.session {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 9px;
  padding: 7px 13px;
  background: var(--cream);
  border-radius: var(--radius);
}
.session-time { color: var(--navy); font-size: 15px; font-weight: 900; }
.event-page .session .event-state {
  position: static; top: auto; right: auto;
  max-width: none;
  padding: 3px 9px;
  font-size: 11px;
}
.session-note { flex-basis: 100%; color: var(--muted); font-size: 12px; font-weight: 700; }

/* a long season folds the tail of its dates away */
.session-more { margin-top: 10px; }
.session-more .session-days { margin-top: 10px; }
.session-more-summary {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 18px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--teal-deep);
  font-size: 14px; font-weight: 800;
  cursor: pointer;
}
.session-more-summary::-webkit-details-marker { display: none; }
.session-more-summary::after {
  width: 8px; height: 8px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  content: "";
  transform: translateY(-2px) rotate(45deg);
}
.session-more-summary:hover { background: var(--aqua-pale); }
.session-more[open] .session-more-summary::after { transform: translateY(2px) rotate(225deg); }
.session-more-close { display: none; }
.session-more[open] .session-more-open { display: none; }
.session-more[open] .session-more-close { display: inline; }

.event-state.state-limited { background: var(--yellow); color: var(--navy); }
.event-state.state-soldout { background: rgba(12, 47, 87, 0.16); color: var(--navy); }
.event-state.state-neutral { background: #fff; color: var(--navy); border: 1px solid var(--line); }

/* ---- shared tail ---- */
/* A tinted band needs air above it or it reads as attached to whatever ends the
   audience column — which on the families tab is the "Bringing a class?" button
   it was sitting flush against. The margin lives here rather than on the button
   because this band is the thing that always needs clearance, whichever
   audience is showing and whatever happens to precede it. */
.event-section.teacher-connect {
  margin-top: 28px;
  padding: 26px 28px;
  background: linear-gradient(140deg, var(--aqua-pale), #fff);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.event-section.teacher-connect p { margin: 0; }

.touring-list { display: grid; margin: 0; padding: 0; list-style: none; }
.touring-item {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.touring-list > .touring-item:first-child { border-top: 0; padding-top: 0; }
.touring-place { color: var(--navy); font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.touring-dates { color: var(--muted); font-weight: 700; }

.event-video { margin-top: 24px; aspect-ratio: 16 / 9; }
.event-video iframe { display: block; width: 100%; height: 100%; border: 0; }

/* the one intentional horizontal scroller, and it is contained */
.gallery-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 31%);
  gap: 14px;
  margin: 0;
  padding: 0 0 12px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}
.gallery-strip > li { scroll-snap-align: start; }
.gallery-strip figure { margin: 0; }
.gallery-strip img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.gallery-strip figcaption { margin-top: 8px; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.4; }

/* ---- gallery lightbox ---- */
.gallery-open {
  position: relative;
  display: block;
  border-radius: var(--radius);
  cursor: zoom-in;
}
.gallery-open:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
.gallery-zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(17, 36, 61, 0.72) center / 14px 14px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cpath d='M12.5 12.5 17 17M8.5 6v5M6 8.5h5'/%3E%3C/svg%3E");
  opacity: 0;
  transition: opacity 0.18s ease;
}
.gallery-open:hover .gallery-zoom,
.gallery-open:focus-visible .gallery-zoom { opacity: 1; }

.lightbox {
  /* sized to the file, not to the screen: the supplied derivatives are small and
     stretching one to fill a desktop viewport only makes it look worse */
  width: fit-content;
  max-width: min(96vw, 1100px);
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-lg);
  overflow: visible;
}
.lightbox::backdrop { background: rgba(8, 20, 36, 0.86); }
.lightbox-figure { margin: 0; display: grid; justify-items: center; }
.lightbox-img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: calc(92vh - 78px);
  object-fit: contain;
  background: #0b1a2d;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.lightbox-caption {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 20px 16px;
  font-size: 13px;
  line-height: 1.45;
}
.lightbox-text { color: rgba(255, 255, 255, 0.86); font-weight: 700; }
.lightbox-count { color: rgba(255, 255, 255, 0.6); font-weight: 700; white-space: nowrap; }

.lightbox-close,
.lightbox-nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92) center / 16px 16px no-repeat;
  color: transparent;
  cursor: pointer;
}
.lightbox-close:focus-visible,
.lightbox-nav:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
.lightbox-close {
  top: -14px;
  right: -14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2311243d' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 5l10 10M15 5L5 15'/%3E%3C/svg%3E");
}
.lightbox-nav { top: calc(50% - 22px); }
.lightbox-prev {
  left: -14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2311243d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.5 4L6 10l6.5 6'/%3E%3C/svg%3E");
}
.lightbox-next {
  right: -14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2311243d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 4L14 10l-6.5 6'/%3E%3C/svg%3E");
}

@media (max-width: 680px) {
  .lightbox { width: 94vw; overflow: hidden; }
  .lightbox-close { top: 8px; right: 8px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
}

/* ---- cast and creatives ---- */
.people-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 4px 26px;
  margin: 0; padding: 0;
  list-style: none;
}
.person {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 16px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.person.has-photo { grid-template-columns: 64px minmax(0, 1fr); }
.person-photo {
  grid-row: span 2;
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
}
.person-text { min-width: 0; }
.people-note { margin: 16px 0 0; color: var(--muted); font-size: 14px; }
.person-text strong { display: block; color: var(--navy); font-size: 16px; }
.person-text > span { display: block; color: var(--muted); font-size: 14px; font-weight: 700; }
.person-bio > summary {
  display: inline-block;
  margin-top: 6px;
  list-style: none;
  color: var(--teal-deep);
  font-size: 13px; font-weight: 800;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.person-bio > summary::-webkit-details-marker { display: none; }
.person-bio p { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.person-bio-close { display: none; }
.person-bio[open] .person-bio-open { display: none; }
.person-bio[open] .person-bio-close { display: inline; }

/* "More at Out of the Box" closes the page whatever ran before it: an extras
   fold, or the two-column layout with nothing between. The rule that separates
   stacked sections is an adjacent-sibling one and cannot see past .event-layout,
   so on a show with no gallery, cast or creatives the heading landed flush
   against the last line of the column. This section carries its own gap. */
.event-page .related-section {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.related-hint { margin: 0 0 16px; color: var(--muted); font-size: 15px; }
.event-grid.related-grid {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 40px) / 3);
  gap: 20px;
  margin-bottom: 0;
  padding-bottom: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}
.related-grid > li { min-width: 0; scroll-snap-align: start; }

.related-grid .event-card h3 { margin-bottom: 6px; font-size: 20px; }

/* ---- stub, not-found and error ---- */
.event-stub, .event-message {
  max-width: 720px;
  margin: 20px 0 40px;
  padding: clamp(26px, 4vw, 44px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.event-message h1 { margin: 0 0 10px; color: var(--navy); font-size: clamp(28px, 4vw, 40px); }
.event-message p { color: var(--muted); }
.event-stub p { color: var(--muted); }

/* ---- mobile action bar (shown only under 681px) ---- */
.event-cta-bar { display: none; }
.event-cta-price {
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 21px; font-weight: 700; line-height: 1.1;
}

@media (max-width: 1020px) {
  .event-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .event-grid.related-grid { grid-auto-columns: calc((100% - 20px) / 2); }
  /* the card follows the title, where the decision is being made */
  .event-rail { position: static; order: -1; }
  .event-hero.has-hero .event-titlecard { margin-top: -44px; }
  .event-hero-credit { bottom: 60px; }
  /* the band no longer fits on one line, so the nav takes a line of its own and
     the divider turns from a hairline beside it into one above it */
  .event-jump {
    width: 100%;
    margin-left: 0;
    padding: 8px 0 10px;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.24);
  }
  .event-jump-links { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
}

@media (max-width: 680px) {
  .event-grid.related-grid { grid-auto-columns: 86%; }
  /* the bar covers the page foot, so the page reserves room for it */
  .event-main { padding-bottom: 132px; }
  /* the bar stops travelling here, so sections only have to clear the header */
  .event-page .event-section { scroll-margin-top: calc(var(--header-reserve) + 16px); }
  .event-shell > [data-slot="switch"] { position: static; }
  .audience-switch { padding: 0 16px; }
  .audience-switch-control {
    align-items: flex-start; flex-direction: column; gap: 8px;
    width: 100%;
    padding: 14px 0 12px;
  }
  .audience-switch-buttons { width: 100%; }
  .audience-btn { flex: 1; padding: 10px 12px; }
  .event-jump { align-items: flex-start; flex-direction: column; gap: 6px; padding: 10px 0 14px; }
  /* four links wrap onto two lines here rather than sliding off the right edge
     of a scroller nothing tells you is there */
  .event-jump-links { flex-wrap: wrap; width: 100%; overflow-x: visible; }
  .event-jump a { padding: 8px 11px; }
  .event-titlecard { width: calc(100% - 32px); }
  /* clears the phone's 20px title-card overlap */
  .event-hero-credit { right: 12px; bottom: 30px; }
  .event-hero-credit-toggle { width: 36px; height: 36px; }
  .event-hero-credit-text { max-width: calc(100vw - 80px); font-size: 11px; }
  /* A phone shows the band at its natural height, so the overlap stays small. */
  .event-hero.has-hero .event-titlecard { margin-top: -20px; }
  .event-facts { gap: 12px 24px; }
  .event-fold-summary { gap: 10px; }
  .session-day { grid-template-columns: 1fr; align-items: start; }
  .gallery-strip { grid-auto-columns: minmax(220px, 78%); }
  .people-list { gap: 0; }

  .event-cta-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 90;
    display: block;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 26px rgba(12, 47, 87, 0.12);
  }
  .event-cta-inner { display: flex; align-items: center; gap: 12px; }
  .event-cta-inner .button { flex: 1; justify-content: center; margin: 0; }
  /* Both newsletter labels are a sentence long, so they wrap to two lines. */
  .event-cta-inner .button[href$="/subscribe"] { padding: 9px 12px; line-height: 1.3; text-align: center; }
  .event-page .event-cta-inner .event-state {
    position: static; top: auto; right: auto;
    max-width: 42%;
    margin: 0;
  }
}

@media print {
  body.event-page { background: #fff; color: #000; font-size: 10pt; }
  .event-page .site-header,
  .event-page .site-footer,
  .audience-switch,
  .event-cta-bar,
  .related-section,
  .gallery-section { display: none !important; }
  /* both audience views print: paper has no switch */
  html[data-view] [data-audience] { display: block !important; }
  /* nothing folded stays folded on paper: the headings print, the
     controls do not, and every body is forced open */
  .event-fold-mark, .session-more-summary, .person-bio > summary { display: none !important; }
  .event-fold > details, .event-fold-body,
  .session-more, .session-more > .session-days,
  .person-bio, .person-bio p { display: block !important; }
  .event-fold > details { border-bottom: 0; }
  .event-fold-summary { padding-bottom: 8pt; cursor: default; }
  .event-main { padding: 0; }
  .event-layout { display: block; }
  .event-rail { position: static; margin-bottom: 18pt; }
  .event-hero-frame { display: none; }
  .event-hero.has-hero .event-titlecard { width: 100%; margin-top: 0; }
  .event-titlecard, .booking-card, .plan-card, .event-section {
    margin-top: 0;
    box-shadow: none;
    break-inside: avoid;
  }
  .event-section + .event-section { border-top: 0; padding-top: 0; }
  .booking-card { color: #000; background: #fff; border: 1px solid #777; }
  .booking-card a:not(.button) { color: #000; }
  .booking-discounts .discount-list h3,
  .booking-callout h3 { color: #000; }
}

/* ============================================================
   SIGNATURE MOTION — the living growth-vine + bolder lines
   ============================================================ */
.scroll-vine {
  position: fixed;
  top: 0;
  left: clamp(12px, 2vw, 40px);
  z-index: 60;
  width: clamp(40px, 3.4vw, 60px);
  height: 100vh;
  pointer-events: none;
  display: none; /* shown only on wide screens where the side margin has room */
  filter: drop-shadow(0 6px 12px rgba(8, 36, 65, 0.16));
}
.scroll-vine .leaf,
.scroll-vine .leaf-fruit { transform-box: fill-box; transform-origin: center; }

.band-vine .vine-path,
.footer-vine .vine-path { stroke-width: 6px; opacity: 0.85; }
.thread .vine-path { stroke-width: 5px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 1360px) { .scroll-vine { display: block; } }

@media (max-width: 1020px) {
  .site-header { grid-template-columns: 1fr auto; gap: 12px 20px; }
  .primary-nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; }

  .hero { min-height: auto; display: block; }
  .hero-intro { padding: calc(var(--header-reserve) + 40px) 0 clamp(64px, 11vh, 100px); }
  .hero-inner { max-width: 100%; }
  .hero-tree { width: clamp(220px, 44vw, 380px); height: 78%; opacity: 0.5; right: -28px; }

  .pathways, .event-grid { grid-template-columns: repeat(2, 1fr); }
  .intro-grid, .program-head, .schools-grid, .visit-grid,
  .access-grid, .signup-grid, .footer-grid,
  .touring-layout { grid-template-columns: 1fr; }
  .footer-grid { gap: 36px; }
  .map-embed { order: 2; }
  .access-media { order: -1; }
}

@media (max-width: 680px) {
  body { font-size: 15px; }
  .summit-tab { display: none; }
  .nav-related { display: grid; gap: 5px; padding: 14px 2px; border-top: 1px solid currentColor; }
  .nav-related-label { font-size: 12px; text-transform: uppercase; }
  .nav-related a { color: inherit; font-family: var(--font-display); font-size: 18px; text-decoration: underline; text-underline-offset: 4px; }
  .site-header { min-height: auto; gap: 14px; padding: 14px 20px; }
  .logo { gap: 9px; }
  .logo-image { width: min(180px, 46vw); }
  .primary-nav { width: 100%; gap: 10px 18px; flex-wrap: wrap; overflow-x: visible; }
  .primary-nav a { font-size: 15px; padding-bottom: 9px; }
  .header-search.is-open .search-field input { width: min(56vw, 210px); }

  /* Over the hero the bar had no edge of its own, so the nav read as loose
     text painted onto the artwork. On a phone it always keeps its glass. */
  .site-header.is-transparent {
    background: rgba(8, 36, 65, 0.58);
    border-bottom-color: rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    backdrop-filter: blur(16px) saturate(1.1);
    text-shadow: none;
  }
  .site-header.is-transparent::before { display: none; }

  /* ---- one row: logo | search | menu ---- */
  .site-header.has-nav-toggle {
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    padding: 10px 16px;
  }
  .site-header.has-nav-toggle .logo {
    gap: 8px; min-width: 0;
    transition: opacity 200ms var(--ease), visibility 200ms var(--ease);
  }

  /* An open field wants the width the logo is holding. The logo's 1fr column
     collapses to nothing and its words spill out under the field, so on a
     phone the logo steps aside for as long as the field is open. */
  .site-header.has-nav-toggle:has(.header-search.is-open) .logo {
    opacity: 0;
    visibility: hidden;
  }

  .site-header.has-nav-toggle .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 44px;
    padding: 0 15px 0 11px;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
  }
  .site-header.has-nav-toggle .search-toggle { width: 42px; height: 42px; }

  /* ---- the panel ---- */
  .site-header.has-nav-toggle .nav-panel {
    /* Absolute, not fixed: the bar's backdrop-filter makes it the containing
       block for fixed descendants, which would collapse the panel to bar height. */
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    height: calc(100vh - var(--header-reserve));
    height: calc(100dvh - var(--header-reserve));
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 22px 22px calc(22px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    /* The 2025 festival artwork is the ground, not the backdrop the nav was
       stranded on: a heavy scrim at the top keeps the links crisp and thins
       towards the bottom so the painting surfaces behind the two CTAs. */
    background-color: var(--navy-deep);
    background-image:
      linear-gradient(to bottom,
        rgba(8, 36, 65, 0.97) 0%,
        rgba(8, 36, 65, 0.94) 42%,
        rgba(8, 60, 92, 0.8) 100%),
      url("assets/ootb-2025-artwork.jpg");
    background-position: center, center bottom;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
    color: #fff;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 240ms var(--ease), transform 320ms var(--ease),
                visibility 0s linear 320ms;
  }
  .site-header.has-nav-toggle.is-nav-open .nav-panel {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }

  .site-header.has-nav-toggle .primary-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: auto;
    flex-wrap: nowrap;
    overflow: visible;
  }
  /* Sized so the primary links and both CTAs fit a short phone without the panel
     scrolling — big enough to thumb, not so big the list becomes the page. */
  .site-header.has-nav-toggle .primary-nav a {
    padding: 12px 2px 7px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 23px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.05;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 260ms var(--ease), transform 340ms var(--ease);
  }
  .site-header.has-nav-toggle .primary-nav a > span {
    padding-bottom: 6px;
    background-size: 0% 8px;
  }
  /* the same brush that underlines on hover marks where you already are */
  .site-header.has-nav-toggle .primary-nav a[aria-current="page"] > span { background-size: 100% 8px; }
  .site-header.has-nav-toggle.is-nav-open .primary-nav a { opacity: 1; transform: none; }
  .site-header.has-nav-toggle.is-nav-open .primary-nav a:nth-child(2) { transition-delay: 40ms; }
  .site-header.has-nav-toggle.is-nav-open .primary-nav a:nth-child(3) { transition-delay: 80ms; }
  .site-header.has-nav-toggle.is-nav-open .primary-nav a:nth-child(4) { transition-delay: 120ms; }
  .site-header.has-nav-toggle.is-nav-open .primary-nav a:nth-child(5) { transition-delay: 160ms; }
  .site-header.has-nav-toggle.is-nav-open .primary-nav a:nth-child(6) { transition-delay: 200ms; }

  .site-header.has-nav-toggle .nav-panel-foot {
    display: grid;
    gap: 11px;
    margin-top: auto;
    padding-top: 8px;
  }
  .site-header.has-nav-toggle .nav-panel-foot .button { width: 100%; }
  .nav-panel-meta {
    margin: 6px 0 0;
    color: #fff;
    font-family: var(--font-hand);
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-align: center;
    text-wrap: balance;
  }

  .hero-intro { padding: calc(var(--header-reserve) + 34px) 0 84px; }
  .hero-tree { opacity: 0.34; }
  .hero-actions, .hero-actions .button { width: 100%; }
  .hero-actions .text-link { width: auto; margin: 4px auto 24px; }
  /* icon only, so it clears the centred scroll cue; the label stays for screen readers */
  .hero-video-toggle { padding: 0; }
  .hero-video-toggle [data-video-label] {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .pathways, .event-grid { grid-template-columns: 1fr; }
  .program-head .button { width: 100%; }
  .program-head-actions { width: 100%; }
  .touring::after { width: 280px; right: -120px; opacity: 0.7; }
  .touring-card { padding: 28px 24px; }
  .energy { min-height: 70vh; }
  .partners-tier { grid-template-columns: 1fr; }
  .partners-logo-link { width: min(100%, 280px); }
  .footer-bottom { flex-direction: column; }
}

/* Must follow the 680px block: the staggered link reveal sets opacity:0 there,
   and this has to win by source order. */
@media (prefers-reduced-motion: reduce) {
  .nt-stroke,
  .site-header.has-nav-toggle .nav-panel { transition: none; }
  .site-header.has-nav-toggle .nav-panel { transform: none; }
  .site-header.has-nav-toggle .primary-nav a {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
}

/* very small phones: the wordmark and a labelled pill will not both fit */
@media (max-width: 359px) {
  .site-header.has-nav-toggle .nav-toggle { gap: 0; padding: 0; width: 44px; }
  .site-header.has-nav-toggle .nav-toggle-label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

/* ============================================================
   School booking enquiry form  (/schools/booking)
   ============================================================ */
.booking-main { padding: calc(var(--header-reserve) + 28px) 0 80px; }
.booking-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
.booking-title { margin: 6px 0 12px; color: var(--navy); font-size: clamp(34px, 4.4vw, 54px); line-height: 1.02; }
.booking-lede { max-width: 62ch; color: var(--muted); font-size: 18px; }
.booking-noscript { padding: 16px 18px; border-radius: var(--radius); background: var(--aqua-pale); }

.booking-form { margin-top: 28px; }
.form-section { margin: 0 0 28px; padding: 0 0 28px; border: 0; border-bottom: 1px solid var(--line); }
.form-section legend { margin-bottom: 14px; padding: 0; color: var(--navy); font-family: var(--font-display); font-size: clamp(22px, 2.3vw, 28px); font-weight: 600; }
.form-send { border-bottom: 0; }

.field { margin-bottom: 18px; }
.field label, .field .label { display: block; margin-bottom: 6px; color: var(--navy); font-weight: 800; }
.field .optional { color: var(--muted); font-weight: 600; }
.field .hint { margin: -2px 0 8px; color: var(--muted); font-size: 15px; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="number"],
.field select, .field textarea {
  width: 100%; min-height: 48px; padding: 10px 14px;
  border: 1px solid rgba(12, 47, 87, 0.28); border-radius: 10px;
  background: #fff; color: var(--ink); font: inherit; font-size: 16px;
}
.field textarea { min-height: 96px; resize: vertical; }
.field select { appearance: auto; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 16px; }
.field-short { max-width: 200px; }
.field-check { display: flex; align-items: center; gap: 10px; }
.field-check label { display: flex; align-items: center; min-height: 44px; margin: 0; font-weight: 600; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--coral-deep); box-shadow: inset 0 0 0 1px var(--coral-deep); }
.field-error { margin: 6px 0 0; color: var(--coral-deep); font-weight: 700; }
.field-error::before { content: "\26A0\FE0E  "; }

.choice-list { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0; padding: 0; list-style: none; }
.choice-list li { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; border: 1px solid rgba(12, 47, 87, 0.28); border-radius: 999px; background: #fff; }
.choice-list li:has(:checked) { border-color: var(--green-deep); background: rgba(111, 191, 115, 0.16); }
.choice-list input { width: 18px; height: 18px; margin: 0; accent-color: var(--green-deep); }
.choice-list label { display: flex; align-items: center; align-self: stretch; min-height: 44px; margin: 0; font-weight: 600; }

.show-meta { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.show-meta a { color: var(--teal-deep); }

.combobox { position: relative; }
.combobox [role="listbox"] {
  position: absolute; inset: calc(100% + 4px) 0 auto 0; z-index: 5;
  margin: 0; padding: 6px; list-style: none; max-height: 320px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow-md);
}
.combobox [role="option"] { padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.combobox [role="option"] small { display: block; color: var(--muted); }
.combobox [role="option"][aria-selected="true"], .combobox [role="option"]:hover { background: var(--aqua-pale); }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-summary { margin-bottom: 24px; padding: 16px 20px; border-left: 6px solid var(--coral-deep); border-radius: 10px; background: rgba(255, 107, 84, 0.1); }
.form-summary-title { margin-bottom: 8px; font-size: 20px; }
.form-summary ul { margin: 0; padding-left: 20px; }
.form-summary a { color: var(--navy); font-weight: 700; }
.form-status { min-height: 24px; margin: 12px 0 0; color: var(--muted); }
.form-status.is-error { color: var(--coral-deep); font-weight: 700; }
.recaptcha-note { color: var(--muted); font-size: 14px; }
.grecaptcha-badge { visibility: hidden; }

.booking-confirmation { padding: 28px; border-radius: var(--radius-xl); background: var(--cream); border: 1px solid var(--line); }
/* Both take focus after submit, so they must clear the fixed header the way section[id] does. */
.booking-confirmation, .form-summary { scroll-margin-top: calc(var(--header-reserve) + 12px); }
.confirmation-summary { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 20px; }
.confirmation-summary dt { color: var(--muted); font-weight: 700; }
.confirmation-summary dd { margin: 0; }

.booking-aside { position: sticky; top: calc(var(--header-reserve) + 24px); display: grid; gap: 20px; }
.booking-contact-card { padding: 22px; border-radius: var(--radius-lg); background: linear-gradient(150deg, var(--teal-deep), var(--navy-deep)); border-top: 6px solid var(--green); color: #fff; }
.booking-contact-card a { color: #fff; font-weight: 800; }
.booking-contact-title { margin-bottom: 8px; font-family: var(--font-display); font-size: 20px; }
.booking-docs { padding: 20px 22px; border-radius: var(--radius-lg); border: 1px solid var(--line); }
.booking-docs h3 { font-size: 20px; }
.booking-docs ul { margin: 0; padding-left: 18px; }
.booking-docs a { color: var(--teal-deep); }
.booking-empty { margin-top: 28px; padding: 24px; border-radius: var(--radius-lg); background: var(--aqua-pale); }

/* ============================================================
   Subscribe  (/subscribe)
   ============================================================ */
/* The card reuses .field, .field-row, .field-error, .form-summary,
   .form-status, .recaptcha-note and .honeypot from the booking form above;
   only the page frame is new. */
.subscribe-main { padding: calc(var(--header-reserve) + 28px) 0 80px; }
.subscribe-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 48px; align-items: start; }
.subscribe-title { margin: 6px 0 12px; color: var(--navy); font-size: clamp(34px, 4.4vw, 54px); line-height: 1.02; }
.subscribe-lede { max-width: 46ch; color: var(--muted); font-size: 18px; }
.subscribe-dates { margin-top: 14px; color: var(--teal-deep); font-weight: 800; }
.subscribe-schools-crosslink { margin-top: 18px; max-width: 46ch; color: var(--muted); }
.subscribe-schools-crosslink a { color: var(--teal-deep); font-weight: 700; }
.subscribe-noscript { margin-top: 20px; padding: 16px 18px; border-radius: var(--radius); background: var(--aqua-pale); }
.subscribe-card { padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-xl); background: var(--cream); border: 1px solid var(--line); }
.subscribe-consent { color: var(--muted); font-size: 15px; }
.subscribe-form button[type="submit"] { width: 100%; margin-top: 6px; }
.subscribe-confirmation { scroll-margin-top: calc(var(--header-reserve) + 12px); }
.subscribe-confirmation a { color: var(--teal-deep); font-weight: 700; }

@media (max-width: 1020px) {
  .booking-layout { grid-template-columns: 1fr; gap: 28px; }
  .booking-aside { position: static; }
  /* The intro reads as the page heading, so it stays above the card. */
  .subscribe-layout { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 680px) {
  .field-short { max-width: none; }
  .confirmation-summary { grid-template-columns: 1fr; gap: 2px; }
  .confirmation-summary dd { margin-bottom: 10px; }
}

/* ============================================================
   LISTING  (/whats-on, /schools)
   ============================================================ */
body.listing-page { background: var(--cream); }
.listing-main { padding: calc(var(--header-reserve) + 28px) 0 80px; }

/* The listing page has its own search field in a better place. */
body.listing-page .header-search { display: none; }

.listing-hero { padding: 0 0 26px; }
.listing-hero h1 { margin: 6px 0 12px; color: var(--navy); font-size: clamp(34px, 4.4vw, 54px); line-height: 1.02; }
.listing-hero .lede { max-width: none; margin: 0; color: var(--muted); font-size: 18px; }

/* The one signpost from the family listing to the teacher one. A rule and a
   green marker rather than a card: it is a sentence between the lede and the
   filters, and a panel there would read as the first result. */
.listing-crosslink { margin: 0 0 24px; }
.listing-crosslink p {
  margin: 0;
  padding-left: 16px;
  border-left: 3px solid var(--green);
  color: var(--muted);
  font-size: 17px;
  line-height: 1.5;
}
/* The marker bar carries the schools green; the link itself is the deep teal
   every other body link uses, because green-deep on cream is 3.2:1 and this is
   17px text. Decoration can be green, a sentence cannot. */
.listing-crosslink a { color: var(--teal-deep); font-weight: 600; }

.listing-shell { padding-bottom: 8px; }
.listing-none { padding: 24px; border-radius: var(--radius-lg); background: var(--aqua-pale); }

.listing-filters {
  display: grid; grid-template-columns: minmax(280px, 1fr) auto; gap: 14px 24px;
  align-items: end;
  margin: 0 0 22px; padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.listing-search label { display: block; margin-bottom: 6px; color: var(--navy); font-weight: 800; }
.listing-search input {
  width: 100%; min-height: 48px; padding: 10px 16px;
  border: 1px solid rgba(12, 47, 87, 0.28); border-radius: 999px;
  background: #fff; color: var(--ink); font: inherit; font-size: 16px;
}

.listing-filter-menus { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filter-menu { position: relative; }
.filter-menu summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 44px; padding: 0 14px;
  border: 1px solid rgba(12, 47, 87, 0.28); border-radius: 999px;
  background: #fff; color: var(--navy); font-size: 14px; font-weight: 800;
  cursor: pointer; list-style: none;
}
.filter-menu summary::-webkit-details-marker { display: none; }
.filter-menu summary::after {
  width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  content: ""; transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms ease;
}
.filter-menu[open] summary::after { transform: translateY(2px) rotate(225deg); }
.filter-menu[open] summary { border-color: var(--teal-deep); }
.filter-menu:has(input:checked) summary { border-color: var(--yellow); background: var(--yellow); }
.filter-menu summary:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

.filter-group {
  position: absolute; z-index: 12; top: calc(100% + 8px); left: 0;
  display: grid; gap: 2px;
  min-width: 230px; max-width: min(320px, calc(100vw - 40px));
  margin: 0; padding: 10px;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: #fff; box-shadow: var(--shadow-md);
}
.filter-chip {
  display: flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 7px 10px;
  border-radius: 6px;
  color: var(--navy); font-size: 14px; font-weight: 800;
  cursor: pointer;
}
.filter-chip input { width: 16px; height: 16px; margin: 0; accent-color: var(--navy); }
.filter-chip:hover, .filter-chip:has(:checked) { background: var(--aqua-pale); }
.filter-chip:focus-within { outline: 3px solid var(--teal); outline-offset: -1px; }

.listing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; grid-column: 1 / -1; }
.listing-clear {
  min-height: 44px; padding: 0 16px;
  border: 1px solid rgba(12, 47, 87, 0.28); border-radius: 999px;
  background: #fff; color: var(--navy); font: inherit; font-weight: 800;
  cursor: pointer;
}
.listing-clear:hover { background: var(--aqua-pale); }
.listing-noscript { margin: 0; color: var(--muted); font-size: 15px; }

.listing-count { margin: 0 0 16px; color: var(--muted); font-size: 15px; font-weight: 800; }

.listing-grid { grid-template-columns: repeat(3, 1fr); margin-bottom: 24px; }
.listing-grid .event-card h2 { margin-bottom: 8px; font-size: 22px; }

/* A card behaves the same wherever it is rendered — the listings, the homepage
   programme band and the related strip all use renderCards(). */
.event-card { position: relative; background: #fff; }
.event-card h2 a, .event-card h3 a { color: var(--navy); text-decoration: none; }
/* One tab stop per card: the heading link covers it, so the whole card is
   clickable without adding a second focusable element. */
.event-card h2 a::after, .event-card h3 a::after { position: absolute; inset: 0; content: ""; }
.event-card h2 a:focus-visible, .event-card h3 a:focus-visible { outline: none; }
.event-card:focus-within { outline: 3px solid var(--teal); outline-offset: 3px; }
.event-card .event-foot { position: relative; z-index: 1; }
/* whats-on.js filters by setting the hidden attribute, and .event-card's own
   display: flex would otherwise win over the user agent's [hidden] rule and
   leave every filtered-out card on the page. */
.event-card[hidden] { display: none; }

.listing-empty { padding: 24px; border-radius: var(--radius-lg); background: var(--aqua-pale); }
.listing-empty p { margin: 0 0 12px; font-weight: 800; }

/* A filtered deep link hides the grid until whats-on.js has applied the
   filters, so the reader never sees the unfiltered set flash past. */
html[data-filters-pending] .listing-grid { visibility: hidden; }

/* The Apply button is the no-JavaScript path; live filtering replaces it. */
.listing-filters.is-live .listing-apply { display: none; }

@media (max-width: 1020px) {
  .listing-filters { grid-template-columns: 1fr; align-items: stretch; }
  .listing-actions { grid-column: auto; }
  .listing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .listing-filters { padding: 16px; }
  .listing-filter-menus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-menu[open] { grid-column: 1 / -1; }
  .filter-menu summary { width: 100%; }
  .filter-group {
    position: static;
    max-width: none; margin-top: 6px;
    border-color: rgba(12, 47, 87, 0.18); box-shadow: none;
  }
  .listing-grid { grid-template-columns: 1fr; }
}

.educator-intro { margin: 0 0 42px; }
.educator-intro-actions { margin: 22px 0 28px; }
.educator-overview .content-image { margin: 0; }
.educator-page-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 20px 0 0; }
.educator-page-links a { color: var(--teal-deep); font-weight: 800; }
.educator-statement {
  margin-bottom: 34px;
  padding: clamp(24px, 4vw, 44px);
  border-left: 6px solid var(--green-deep);
  border-radius: var(--radius-lg);
  background: var(--aqua-pale);
}
.educator-statement h2 { max-width: 24ch; margin: 8px 0 18px; color: var(--navy); }
.educator-download-title { margin: 24px 0 12px; color: var(--navy); font-size: clamp(18px, 1.6vw, 22px); }
.educator-statement > p:not(.kicker) { max-width: 80ch; margin: 0 0 12px; color: var(--ink); font-size: 17px; }
.educator-statement > p.educator-download-action { margin-bottom: 28px; }
.educator-statement > p:last-child { margin-bottom: 0; }
.educator-pathways {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr);
  border-top: 4px solid var(--teal-deep);
  border-bottom: 1px solid var(--line);
}
.educator-path { display: flex; flex-direction: column; min-width: 0; padding: 28px; border-right: 1px solid var(--line); }
.educator-path:first-child { padding-left: 0; border-bottom: 1px solid var(--line); }
.educator-path:nth-child(2) { grid-column: 2; grid-row: 1 / 3; padding-right: 0; border-right: 0; }
.educator-path:last-child { grid-column: 1; padding-left: 0; }
.educator-path h3 { margin-bottom: 14px; color: var(--navy); font-size: clamp(23px, 2vw, 28px); }
.educator-path h4 { margin: 4px 0 10px; color: var(--navy); font-size: 18px; }
.educator-prices { margin: 0 0 18px; padding-left: 22px; color: var(--muted); }
.educator-path p, .educator-path ol { margin: 0 0 18px; color: var(--muted); }
.educator-path ol { padding-left: 22px; }
.educator-path li { margin-bottom: 8px; }
.educator-path li:last-child { margin-bottom: 0; }
.educator-path a:not(.button) { color: var(--teal-deep); font-weight: 800; }
.educator-path .educator-path-link { align-self: flex-start; max-width: 100%; margin-top: auto; padding: 10px 20px; color: var(--navy); text-align: center; }
.educator-path-actions { margin-top: auto; }
.educator-path .educator-path-subtitle { margin: 0 0 10px; color: var(--navy); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.educator-path-links { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.educator-path-actions p { margin: 0 0 14px; font-size: 14px; }
.educator-newsletter { margin: 18px 0 0; color: var(--muted); font-size: 15px; }
.educator-newsletter a { color: var(--teal-deep); font-weight: 800; }
.educator-discover { margin-bottom: 22px; scroll-margin-top: calc(var(--header-reserve) + 12px); }
.educator-discover h2 { margin: 0 0 8px; color: var(--navy); }
.educator-discover > p:last-child { margin: 0; }

@media (max-width: 1020px) {
  .educator-pathways { grid-template-columns: 1fr; }
  .educator-path { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .educator-path:nth-child(2), .educator-path:last-child { grid-column: auto; grid-row: auto; }
  .educator-path:first-child { padding-top: 24px; }
  .educator-path:last-child { padding-bottom: 24px; border-bottom: 0; }
}
@media (max-width: 680px) {
  .educator-statement { padding: 22px; }
  .educator-statement > p:not(.kicker) { font-size: 16px; }
}