/* -- FONT FACES -- */
/* Gate Loud is the one display face - headings, labels, buttons, nav.
   (Gate Loud 082 replaced Gate 03 on 6 Nov 2026: same metrics, more
   accented capitals.)
   (PP Right Grotesk, which Gate 03 replaced, is no longer used anywhere.)
   Editorial New Light (Pangram Pangram) is the serif, self-hosted like Gate Loud -
   it replaced Instrument Serif on 5 Nov 2026. Both files are commercial:
   they live on the server only (.gitignore). Balto and Franklin Gothic URW
   come from the Adobe Fonts project (functions/enqueue_assets.php). */
@font-face {
  font-family: "Gate Loud";
  src: url("../assets/fonts/GateLoud-Ultra.woff2") format("woff2"),
       url("../assets/fonts/GateLoud-Ultra.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/* The serif is Editorial New Light (9 Nov 2026; Regular before). It is
   declared at weight 400 so every serif rule, which asks for 400, gets
   it without a change. */
@font-face {
  font-family: "Editorial New";
  src: url("../assets/fonts/EditorialNew-Light.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* -- FONT FACES END -- */

/* -- VARIABLES -- */
:root {
  --header-logo-height: 26px;
  /* The Gate nav bar is a fixed-height strip around the 64px wordmark
     logo, so a set height rather than one derived from padding. */
  --header-height: 96px;
  /* The header's gap from the top of the window. */
  --header-top: 10px;
  /* The bar's type (nav, Quick book, MENU) in Gate Loud: the same 16px as
     the label type (card dates). A fixed size, not one that grows with
     the window: window-based type cancels out browser zoom (WCAG 1.4.4 -
     see the type scale below). */
  --header-type-size: var(--font-size-subheading);
  /* Default letter spacing for type at the 16px label size (dates, tags,
     arrow links, the header) - a hover spread is added on top of it. */
  --tracking-label: 0.02em;

  /* Gate type families, from Figma "Ready for Dev > Type System - Desktop"
     (docs/design-tokens.md). Display is Gate Loud Ultra, the "Gate Sans"
     Figma marked TBD. It has no lowercase or accented letters (fadas), so
     those fall through to Arial Black.
     Balto and Franklin Gothic URW list both their desktop and Adobe Fonts
     names. */
  --font-family-display: "Gate Loud", "Arial Black", Arial, sans-serif;
  /* Labels - nav, tags, arrow links, small caps headings - are Gate Loud
     too (Balto, in the Figma type system, never had its Adobe kit set up;
     it stays as the fallback). */
  --font-family-label: "Gate Loud", "Balto", "balto", Arial, sans-serif;
  /* Sentence-case sans copy (CTA card text). Not the label stack: Gate Loud
     has capitals and punctuation but no lowercase, so mixed-case text set
     in it comes out in two faces. */
  /* Was "Balto", which is never loaded (it fell back to Arial): the
     running-text face, Franklin Gothic, as everywhere else. */
  --font-family-text: var(--font-family-base);
  --font-family-serif: "Editorial New", Georgia, serif;
  --font-family-base: "FranklinGothic URW", "franklin-gothic-urw",
    "Franklin Gothic Medium", Arial, sans-serif;

  /* Fluid type scale. Max = the desktop type system (1440 canvas); min =
     the size the same role takes in the Figma mobile designs (375). The
     mobile type system is marked TBD in Figma, so the mins are provisional.
     Line heights are the Figma percentages. */
  --font-size-xxl: clamp(4.5rem, 2.5634rem + 8.2629vw, 10rem); /* H1 160 */
  --font-size-xl: clamp(3rem, 1.9437rem + 4.5070vw, 6rem); /* H2 96 - section headings */
  --font-size-large: clamp(2.25rem, 1.6338rem + 2.6291vw, 4rem); /* H3 64 */
  --font-size-medium: clamp(2rem, 1.6479rem + 1.5023vw, 3rem); /* H4 48 */
  --font-size-small: clamp(1.75rem, 1.6620rem + 0.3756vw, 2rem); /* H5 32 */
  --font-size-intro-large: clamp(2rem, 1.6479rem + 1.5023vw, 3rem); /* serif 48 */
  --font-size-intro-medium: clamp(1.5rem, 1.3239rem + 0.7512vw, 2rem); /* serif 32 */
  --font-size-intro-small: clamp(1.25rem, 1.1620rem + 0.3756vw, 1.5rem); /* serif 24 */
  /* Body copy - the p tag size. Any block of running text should use this,
     whether or not it is wrapped in a <p>. */
  --font-size-body: 1rem; /* 16 */
  --font-size-body-large: 1.25rem; /* 20 */
  --font-size-xsmall: 0.875rem; /* 14 - small Balto labels */
  --font-size-subheading: 1rem; /* H6 16, Balto */
  --font-size-menu: 1.25rem; /* nav link 20, Balto */
  --font-size-menu-small: 1.75rem;

  /* One design pixel. 1px up to the 1440 canvas, then growing evenly to
     1.667px at 2560 (a 5K iMac), where H2 reaches 160. Every type size
     past 1440 is a multiple of it (below), so the whole scale grows
     together and keeps its proportions. */
  --px: 1px;

  --line-height-xxl: 0.8;
  --line-height-xl: 0.8;
  --line-height-large: 0.85;
  --line-height-medium: 0.9;
  /* No tighter than 1: at this size titles often run to three or four
     lines (cards, tiers), and below 1 the lines crowd each other. */
  --line-height-small: 1;
  --line-height-intro: 1.1;
  --line-height-intro-small: 1.2;
  --line-height-body: 1.2;
  --line-height-label: 1;

  /* Gate palette. --dark / --light are the contrast pair used by
     functions/text_colour.php; every colour here is also in the ACF colour
     picker (functions/acf_colour_picker_palette.php) - keep all three in
     sync. */
  --dark: #000000;
  --dark-alt: #141414;
  --light: #ffffff;
  /* Was orange (#fd7a49): pages set to the Orange accent show the brand
     red since 5 Nov 2026. */
  --orange: #ef263a;
  --pink: #ff5cfa;
  --brand-red: #ef263a;
  /* Was blue (#3f8ff7): pages set to the Blue accent show the brand red
     since 5 Nov 2026. */
  --blue: #ef263a;
  /* Not a page accent: for warnings and errors only (the checkout's
     notice). Dark enough to read as text on white. */
  --red: #d81f26;
  --accent: var(--brand-red);

  --global-spacing-3: 3px;
  --global-spacing-6: 6px;
  --global-spacing-12: 12px;
  --global-spacing-25: 25px;
  --global-spacing-50: 50px;
  --global-spacing-75: 75px;
  --global-spacing-100: 100px;
  --global-spacing-150: 150px;
  --global-spacing-200: 200px;

  /* Gate spacing rules (Figma "Main Rules" + "Spacing"):
     16 small internal spacing, gutters, space between text blocks
     24 space after rules when the text is smaller; card interior padding
     32 large internal spacing; exterior / card padding
     64 between a heading and its section content
     96 between sections / components */
  --global-spacing-16: 16px;
  --global-spacing-24: 24px;
  --global-spacing-32: 32px;
  /* The space between the screen edge and the content - halved on
     phones (see the 600px override below). */
  --page-inset: var(--global-spacing-32);
  --global-spacing-48: 48px;
  --global-spacing-64: 64px;
  --global-spacing-96: 96px;
  --gutter: var(--global-spacing-16);
  --border-radius-tag: 6px;
}
@media (max-width: 992px) {
  :root {
    --global-spacing-25: 12px;
    --global-spacing-100: 75px;
  }
}
@media (max-width: 768px) {
  :root {
    --global-spacing-100: 50px;
  }
}
@media (max-width: 548px) {
  :root {
    --global-spacing-100: 25px;
  }
}
/* No type grows past the 1440 canvas: sizes set by the window's width
   cancel out browser zoom (zooming narrows the window the page is laid
   out for), and text has to reach 200% (WCAG 1.4.4). Large screens show
   the 1440 design sizes; --px stays 1px. */
@media (max-width: 600px) {
  :root {
    --page-inset: var(--global-spacing-16);
  }
}
/* -- VARIABLES END -- */

/* An image switched to Greyscale in the media library
   (functions/media_greyscale.php). */
.is-greyscale {
  filter: grayscale(1);
}

/* -- FONTS -- */
.no-hyphen {
  hyphens: none;
}

/* Franklin Gothic URW Medium is the running-text face. */
body {
  font-family: var(--font-family-base);
  font-weight: 500;
  line-height: var(--line-height-body);
}

.font-light {
  font-weight: 300 !important;
}
.font-regular {
  font-weight: 400 !important;
}
.font-medium {
  font-weight: 500 !important;
}
.font-semibold {
  font-weight: 600 !important;
}
.font-bold {
  font-weight: 700 !important;
}

/* Family utilities - one per face in the Gate type system. */
.font-display {
  font-family: var(--font-family-display);
  font-weight: 900;
  text-transform: uppercase;
}
.font-label {
  font-family: var(--font-family-label);
  font-weight: 800;
  text-transform: uppercase;
  line-height: var(--line-height-label);
}
.font-serif {
  font-family: var(--font-family-serif);
  font-weight: 400;
}

/* reset.css turns on automatic hyphenation for every div, which headings
   inherit; display type must never break mid-word. */
h1,
h2,
h3,
h4,
h5,
h6 {
  hyphens: manual;
  overflow-wrap: normal;
  /* reset.css also sets word-break: break-word on headings, which splits
     a word anywhere just the same. */
  word-break: normal;
  /* Free to be narrower than their longest word in a grid or flex row, so
     that word overflows the heading itself - which js/script.js (Fit)
     notices and shrinks to fit - rather than widening the row and the
     page with it. */
  min-width: 0;
  max-width: 100%;
}

/* H1-H5 are Gate Loud, uppercase, each with its own
   tight line height. H6 (the subheading) is Balto Super. */
h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-family-display);
  font-weight: 900;
  text-transform: uppercase;
}
h1,
.font-size-xxl {
  font-size: var(--font-size-xxl);
  line-height: var(--line-height-xxl);
}
h2,
.font-size-xl {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-xl);
}
h3,
.font-size-large {
  font-size: var(--font-size-large);
  line-height: var(--line-height-large);
}
h4,
.font-size-medium {
  font-size: var(--font-size-medium);
  line-height: var(--line-height-medium);
}
h5,
.font-size-small {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}
h6,
.font-size-subheading {
  font-family: var(--font-family-label);
  font-size: var(--font-size-subheading);
  font-weight: 800;
  line-height: var(--line-height-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
p,
.font-size-body {
  font-size: var(--font-size-body);
}
.font-size-body-large {
  font-size: var(--font-size-body-large);
}
.font-size-xsmall {
  font-size: var(--font-size-xsmall);
}
/* Intro text - Editorial New in three sizes. */
.font-size-intro-large,
.font-size-intro-medium,
.font-size-intro-small {
  font-family: var(--font-family-serif);
  font-weight: 400;
}
.font-size-intro-large {
  font-size: var(--font-size-intro-large);
  line-height: var(--line-height-intro);
}
.font-size-intro-medium {
  font-size: var(--font-size-intro-medium);
  line-height: var(--line-height-intro);
}
.font-size-intro-small {
  font-size: var(--font-size-intro-small);
  line-height: var(--line-height-intro-small);
}
/* The serif text under a card's title. Held to three-quarters of the
   card, so a wide card doesn't run it into one long line; full width on
   a phone, where the cards are narrow anyway. */
.card-text {
  max-width: 75%;
}
/* A card's serif line straight under its sans title (credits, an excerpt,
   a description) sits 10px closer than the card's usual gap: Production,
   Show, Content, Story and Explore More cards alike. */
:is(h2, h3) + .card-text,
.show-card-text > p.font-serif {
  margin-top: -10px;
}
@media (max-width: 768px) {
  .card-text {
    max-width: none;
  }
}
/* A size utility on a wrapper has to reach the <p> tags inside it -
   otherwise the rule above wins and editor content ignores the class. */
.font-size-xxl > p,
.font-size-xl > p,
.font-size-large > p,
.font-size-medium > p,
.font-size-small > p,
.font-size-body > p,
.font-size-body-large > p,
.font-size-xsmall > p,
.font-size-intro-large > p,
.font-size-intro-medium > p,
.font-size-intro-small > p {
  font-size: inherit;
  line-height: inherit;
}
/* Copy from a WYSIWYG field (gate_rich_text()): its paragraphs and lists
   take the size and leading of the element around them, which may be a
   class on a parent rather than the wrapper itself, and sit a line apart. */
/* Aligned like its surroundings, as the <p> it replaced was: reset.css
   sets every div to text-align: left, which un-centred the captions. */
/* No bold or italic - a house rule. The editors can't add them and
   gate_rich_text() strips them; this catches anything else (older copy,
   pasted fields). Zero specificity, so it only replaces the browser's own
   bold/italic: interface parts that set their own weight on a <strong>
   (the booking calendar) keep it. */
:where(main, .site-footer) :where(strong, b, em, i, cite, dfn, var) {
  font-weight: inherit;
  font-style: inherit;
}
.rich-text {
  text-align: inherit;
}
.rich-text p,
.rich-text li {
  font-size: inherit;
  line-height: inherit;
}
.rich-text > * + * {
  margin-top: 0.75em;
}
/* Lists show their bullets and numbers. reset.css strips every ul
   (list-style, and padding with !important, at the specificity of its
   :not() list), so the class is doubled to outrank it. */
.rich-text.rich-text ul,
.rich-text.rich-text ol {
  margin-bottom: 0;
  padding-left: 1.2em !important;
}
.rich-text.rich-text ul {
  list-style: disc;
}
.rich-text.rich-text ol {
  list-style: decimal;
}
.rich-text li + li {
  margin-top: 0.4em;
}
/* Small Text (Split Text Image, Text Images, Text): the sans running-text
   face at body size, 16px - all body copy is 16 (snag list, 11 Nov); only
   the footer's newsletter text and full-width callouts are larger. */
.small-text {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  font-weight: 500;
  line-height: var(--line-height-body);
}
/* Nav links - Balto Ultra 20, uppercase. */
.font-size-menu {
  font-family: var(--font-family-label);
  font-size: var(--font-size-menu);
  font-weight: 900;
  line-height: var(--line-height-label);
  text-transform: uppercase;
}
.font-size-menu-small {
  font-size: var(--font-size-menu-small) !important;
}

/* -- FONTS END -- */

/* -- LINKS -- */
/* Links take the colour of whatever section they sit in rather than the
   browser/Bootstrap blue. Underlined by
   default, underline removed on hover.
   Bootstrap loads after reset.css and re-colours links, so the colour rule
   lives here (this sheet loads after Bootstrap). reset.css sets
   text-decoration: none !important, so the underline needs !important. */
a {
  color: inherit;
  text-decoration: underline !important;
}
a:hover,
a:focus {
  text-decoration: none !important;
}
/* -- LINKS END -- */

/* -- HEADER -- */
/* Fixed over the page, with no background of its own - only the rules
   and the type, in the page theme's --header-fg (see PAGE THEME). The
   menu is split around the centred wordmark. Pages that do not open with
   a hero are offset by --header-height instead (see .main-offset below). */
.site-header {
  position: fixed;
  top: var(--header-top);
  left: 0;
  right: 0;
  z-index: 100;
  color: var(--header-fg);
}
/* Ruled above and below, inside the side padding. The rules sit
   --header-rule-gap apart around the bar's middle: the full height
   normally, closer in while the home logo animation holds the bar
   mid-screen (js/script.js). */
.site-header {
  --header-rule-gap: var(--header-height);
}
.site-header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--global-spacing-24);
  height: var(--header-height);
  background:
    linear-gradient(currentColor, currentColor)
      center calc((var(--header-height) - var(--header-rule-gap)) / 2) /
      calc(100% - 2 * var(--page-inset)) 1px no-repeat,
    linear-gradient(currentColor, currentColor)
      center calc((var(--header-height) + var(--header-rule-gap)) / 2 - 1px) /
      calc(100% - 2 * var(--page-inset)) 1px no-repeat;
}
.site-header .menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--global-spacing-24);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* The bar's own type - nav, Book now, MENU - is the display face. */
.site-header .menu a,
.site-header .site-header-book,
.site-header .menu-toggle {
  --cap-nudge: 0.12em;
  font-family: var(--font-family-display);
  text-transform: uppercase;
  font-weight: 900;
}
/* Gate Loud keeps a quarter of its line below the baseline for descenders,
   which capitals never use, so centred caps ride 0.12em high (the line's
   middle is at 0.5em, the caps' at 0.75 - 0.734 / 2 = 0.383em). Nudge
   the type down by that much: the links by position, Book now by moving
   that much of its padding from the bottom to the top, so its height
   (and the icon boxes matched to it) stays the same. */
.site-header .menu a,
.site-header .menu-toggle > span {
  position: relative;
  top: var(--cap-nudge);
}
/* Blocks, so each list item is exactly its link's 1em line rather than
   a taller line box with the link sat on its baseline. */
.site-header .menu a {
  display: block;
}
.site-header .menu a {
  font-size: var(--header-type-size);
  line-height: 1;
  text-transform: uppercase;
}
/* Hover: the letters spread apart, pushing the items beside it along.
   Letter-spacing also adds space after the last letter, so a matching
   negative margin takes that back off - the gap to the next item stays
   as it is and only the word itself grows. */
.site-header .menu a {
  --menu-spread: 0em;
  margin-right: calc(-1 * var(--menu-spread));
  letter-spacing: calc(var(--tracking-label) + var(--menu-spread));
  transition: letter-spacing 0.3s ease, margin-right 0.3s ease;
}
.site-header .menu a:hover,
.site-header .menu a:focus-visible {
  --menu-spread: 0.05em;
}
@media (prefers-reduced-motion: reduce) {
  .site-header .menu a {
    transition: none;
  }
}
.site-header .menu a[aria-current="page"] {
  text-decoration: underline !important;
  text-underline-offset: 4px;
}
/* The wordmark, recoloured to the header colour: the logo file is used as
   a mask over a block of currentColor. The Home Hero's logo animation uses
   the same file the same way (.home-hero-wordmark), so the two match when
   it docks here. */
.site-logo {
  /* The ink the wordmark is drawn in (cleared below to hide it). */
  --logo-ink: currentColor;
  position: relative;
  display: block;
  width: 136px;
  height: 64px;
}
/* Drawn in two halves, GATE and THEATRE (the file splits at half height,
   in the gap between the lines), so each can rise on hover. */
.site-logo::before,
.site-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--logo-ink);
  -webkit-mask: url("../assets/images/logos/gate-logo.svg") center / contain no-repeat;
  mask: url("../assets/images/logos/gate-logo.svg") center / contain no-repeat;
}
.site-logo::before {
  clip-path: inset(0 0 50% 0);
}
.site-logo::after {
  clip-path: inset(50% 0 0 0);
}
/* Hover (or keyboard focus): a run of the home hero's intro, kept to the
   logo's own box -
   GATE drops in from its top edge, then THEATRE rises out of its
   baseline. */
@media (prefers-reduced-motion: no-preference) {
  .site-logo:hover::before,
  .site-logo:focus-visible::before {
    animation: logo-drop-top 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .site-logo:hover::after,
  .site-logo:focus-visible::after {
    animation: logo-rise-bottom 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
  }
}
@keyframes logo-drop-top {
  from {
    translate: 0 -50%;
    clip-path: inset(50% 0 50% 0);
  }
  to {
    translate: 0 0;
    clip-path: inset(0 0 50% 0);
  }
}
@keyframes logo-rise-bottom {
  from {
    translate: 0 50%;
    clip-path: inset(50% 0 50% 0);
  }
  to {
    translate: 0 0;
    clip-path: inset(50% 0 0 0);
  }
}
/* Navigation is not body copy - it keeps the global link colour but not
   the underline. */
.site-header a {
  text-decoration: none !important;
}
.site-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--global-spacing-16);
}
.site-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 30px;
  border-radius: 4px;
  /* An inset shadow, like Book now's hover outline, so the two render
     at the same weight at every zoom (a border can round to a hairline). */
  box-shadow: inset 0 0 0 1px currentColor;
}
.site-header-icon svg {
  width: 18px;
  height: 18px;
}
/* Hover inverts the icon boxes: they fill with the header colour and the
   glyph takes --header-ink. (Book now is a filled button - see "Filled
   buttons" under LINKS AND BUTTONS.) */
.site-header-icon {
  transition: background-color 0.2s ease, color 0.2s ease;
}
.site-header-icon:hover,
.site-header-icon:focus-visible {
  background-color: currentColor;
}
.site-header-icon:hover svg,
.site-header-icon:focus-visible svg {
  color: var(--header-ink);
}
/* Ticket count on the basket icon, kept in step by gate_header_icons(). */
.site-header-basket {
  position: relative;
}
.site-header-basket-count {
  position: absolute;
  top: -7px;
  right: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 50%;
  background: #f750f5;
  color: #000;
  font: 700 11px/1 Arial, sans-serif;
}
.site-header-basket-count[hidden] {
  display: none !important;
}

/* Beside Book now, as tall as it: the tag's text (line-height 1) plus its
   padding top and bottom. The phone header has no button to match. */
.site-header .site-header-book {
  font-size: var(--header-type-size);
  padding-top: calc(var(--global-spacing-12) + var(--cap-nudge));
  padding-bottom: calc(var(--global-spacing-12) - var(--cap-nudge));
  /* The icon boxes' height (below), so the three line up - the 0.85
     line-height on Gate Loud would otherwise leave it 2-3px shorter. */
  height: calc(var(--header-type-size) + 2 * var(--global-spacing-12));
  box-sizing: border-box;
}
.site-header-actions > .site-header-icon {
  height: calc(var(--header-type-size) + 2 * var(--global-spacing-12));
}
/* A Home Hero with Logo Animation on brings its own wordmark up into this
   slot (js/script.js), so the bar drops its logo. It comes back while the
   phone menu is open, and - with reduced motion, when the wordmark stays
   in the hero - once the whole hero has scrolled out from under the bar.
   The mark is a mask over the background colour, so it is hidden by
   clearing that colour - not with visibility, because the flying words
   let clicks through (pointer-events: none) and the link under them has
   to stay clickable to take the visitor home. */
body.logo-animation .site-logo {
  --logo-ink: transparent;
}
body.logo-animation .site-header.menu-open .site-logo {
  --logo-ink: currentColor;
}
@media (prefers-reduced-motion: reduce) {
  body.logo-animation .site-header.is-past-wordmark .site-logo {
    --logo-ink: currentColor;
  }
}
/* js/script.js moves and fades the bar through the animation. While it is
   faded it stays in the page for screen readers (opacity, never display
   or visibility) but takes no clicks; tabbing into it brings it straight
   up. The phone menu always gets it back whole. */
body.logo-animation .site-header.is-faded {
  pointer-events: none;
}
/* Stage 1 has the bar faded out, but js/script.js loads at the foot of
   the page, so until it takes over (.logo-flying) the bar would paint
   whole for a moment. Start it faded here, before the first paint. */
@media (prefers-reduced-motion: no-preference) {
  .has-js body.logo-animation:not(.logo-flying) .site-header {
    opacity: 0;
  }
}
body.logo-animation .site-header:focus-within {
  opacity: 1 !important;
  pointer-events: auto;
}
body.logo-animation .site-header.menu-open {
  --header-rule-gap: var(--header-height) !important;
  transform: none !important;
  opacity: 1 !important;
}
.site-header-start {
  display: flex;
  align-items: center;
  gap: var(--global-spacing-16);
}
.site-header-mobile-icons,
.menu-toggle,
.menu-toggle-close {
  display: none;
}
.menu-toggle {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: var(--header-type-size);
  letter-spacing: var(--tracking-label);
  cursor: pointer;
}
/* Just above the phone header, the full bar only fits with its gaps
   tightened. */
/* 16px needs the full bar's width (about 1300px) in one line, so the
   header type steps down where there isn't room: 14px, then the 12px it
   had, until the phone header takes over at 1100px. Width steps, not
   window-scaled type, so browser zoom still works (WCAG 1.4.4). */
@media (max-width: 1359px) {
  :root {
    --header-type-size: 0.875rem;
  }
}
@media (max-width: 1239px) {
  :root {
    --header-type-size: 0.75rem;
  }
}
.site-header .menu a {
  white-space: nowrap;
}
@media (max-width: 1250px) {
  .site-header .menu,
  .site-header-inner {
    gap: var(--global-spacing-16);
  }
  .site-header-actions {
    gap: var(--global-spacing-12);
  }
}
/* Phone / tablet header (Figma mobile frames): account and basket on the
   left, logo centred, MENU on the right; the nav moves into the panel. */
@media (max-width: 1100px) {
  .site-header-nav,
  .site-header-actions > .site-header-icon,
  .site-header-book {
    display: none !important;
  }
  .site-header-mobile-icons,
  .menu-toggle {
    display: flex;
    gap: var(--global-spacing-12);
  }
  .site-logo {
    width: 104px;
    height: 48px;
  }
  /* A tighter bar round the smaller wordmark: 12px above and below. */
  :root {
    --header-height: 72px;
  }
}
/* Never on a desktop-width screen, even if left open while the window
   was widened (js/script.js closes it too). */
@media (min-width: 1101px) {
  .mobile-menu {
    display: none !important;
  }
}
.menu-open .menu-toggle-open {
  display: none;
}
.menu-open .menu-toggle-close {
  display: inline;
}
.mobile-menu {
  position: fixed;
  inset: var(--header-height) 0 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  /* From the top: the Quick book button's auto margin still drops the
     links to the foot, but anything taller than the screen (the Quick
     book panel open) runs off the bottom, where it scrolls, not off the
     top, where it can't. */
  justify-content: flex-start;
  overflow-y: auto;
  padding: var(--global-spacing-32) var(--global-spacing-16);
  background-color: var(--dark);
  color: var(--accent);
}
/* It slides up from the foot of the screen, and back down when it
   closes. Shut, it stays laid out (hidden by visibility, not display) so
   it has somewhere to move from; visibility still keeps it out of the tab
   order and from screen readers. */
.mobile-menu {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-menu[hidden] {
  /* Over Bootstrap's [hidden] { display: none !important }. */
  display: flex !important;
  visibility: hidden;
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s 0.45s;
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .mobile-menu[hidden] {
    transition: none;
  }
}
/* Header blur: the page under the bar is blurred, so the type never
   tangles with a photograph or a colour change beneath it, and it stops
   dead at the foot of the bar. Where the ground under it is too close to
   the bar's colour (under 3:1 contrast) - black type over a dark
   photograph, blue type on a blue card -
   js/script.js fades in a tint the other way, just across that stretch,
   at these strengths (rgba - the script reads the alpha). */
.site-header {
  /* The full tint, for no contrast at all; less contrast-poor grounds
     get proportionally less. Only the alpha is read. */
  --header-tint-light: rgba(255, 255, 255, 0.3);
  --header-tint-dark: rgba(0, 0, 0, 0.3);
}
/* It reaches up to the top of the window (over the --header-top gap the
   bar sits below) and stops dead at the bar's bottom rule. */
.site-header-blur {
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--header-top));
  left: 0;
  right: 0;
  height: calc(var(--header-top) + var(--header-height));
  pointer-events: none;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
/* Not while the home logo animation carries the bar down the screen
   (js/script.js), nor behind the phone menu's black panel. */
.site-header.is-travelling .site-header-blur,
.site-header.menu-open .site-header-blur {
  display: none;
}
/* The one time the header has a background: black while the phone menu
   panel is open, as the top of that full-screen panel. */
.site-header.menu-open {
  background-color: var(--dark) !important;
  color: var(--accent) !important;
}
/* Quick book, full width at the top of the menu; the links stay at the
   foot. (Doubled class: .tag, later in this file, sets its own size.) */
.mobile-menu .mobile-menu-book {
  justify-content: center;
  width: 100%;
  margin-bottom: auto;
  font-family: var(--font-family-display);
  text-transform: uppercase;
  font-size: var(--font-size-medium);
}
.mobile-menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mobile-menu-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--global-spacing-12);
  border-top: 1px solid currentColor;
  font-family: var(--font-family-display);
  font-size: var(--font-size-small);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}
.mobile-menu-list li:last-child a {
  border-bottom: 1px solid currentColor;
}
.mobile-menu-list svg {
  /* Gate Loud's arrow, at the size it has in the font: as tall as the
     caps beside it. */
  width: 0.9em;
  height: auto;
}
.mobile-menu-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--global-spacing-16);
  padding-top: var(--global-spacing-16);
  font-size: var(--font-size-xsmall);
}
.mobile-menu-social {
  display: flex;
  gap: var(--global-spacing-12);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Pages that do not open with a hero banner start below the header
   rather than underneath it (see functions/header_offset.php). */
.main-offset {
  padding-top: calc(var(--header-height) + var(--header-top));
}
/* Development only. With the admin toolbar showing, WordPress puts a
   32px fixed bar at the top of the viewport, which our own fixed header
   would sit underneath. WordPress marks the page with .admin-bar, so
   drop the header (and the offset that follows it) clear of the bar.
   Below 782px the toolbar is absolute rather than fixed - it scrolls
   away with the page - so it is left alone there. */
body.admin-bar .site-header {
  top: calc(var(--header-top) + 32px);
}
body.admin-bar .main-offset {
  padding-top: calc(var(--header-height) + var(--header-top) + 32px);
}
@media (max-width: 782px) {
  body.admin-bar .site-header {
    top: var(--header-top);
  }
  body.admin-bar .main-offset {
    padding-top: calc(var(--header-height) + var(--header-top));
  }
}
/* -- HEADER END -- */

/* -- FOOTER -- */
/* Above the show page's fixed Book tickets button (z-index 90), so the
   footer slides up over it at the foot of the page - and below the header
   (100) and phone menu (99). */
.site-footer {
  position: relative;
  z-index: 91;
}
/* Two bands: the red "Stay in touch" newsletter, then the black footer
   with the GATE THEATRE wordmark set large behind its content. */
.site-footer-newsletter {
  background-color: var(--accent);
  color: var(--dark);
}
/* On a page that is already the accent colour the band turns white so it
   still reads as its own strip. */
.ground-accent .site-footer-newsletter {
  background-color: var(--light);
}
.site-footer-newsletter-inner {
  border-top: 1px solid currentColor;
}
.site-footer-newsletter-text p {
  font-size: inherit;
}
.site-footer-signup .wpforms-form {
  display: flex;
  /* On the text's baseline, so what's typed sits level with SUBSCRIBE. */
  align-items: last baseline;
  gap: var(--global-spacing-32);
}
.site-footer-signup .wpforms-field-container {
  flex: 1 1 auto;
  min-width: 0;
}
/* A WPForms field (functions/wpforms.php), set as the underlined line it
   replaced rather than the Form component's bordered box. */
.site-footer-signup .wpforms-field {
  position: relative;
}
.site-footer-signup .gate-form-field input {
  display: block;
  width: 100%;
  padding: 0 0 var(--global-spacing-12);
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--font-size-body);
}
.site-footer-signup .gate-form-field input.wpforms-error {
  border-bottom-width: 2px;
}
.site-footer-signup input::placeholder {
  color: inherit;
  opacity: 1;
}
.site-footer-signup .gate-form-field label:not(.wpforms-error),
.site-footer-signup .wpforms-screen-reader-element {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Under the line, out of the flow so the button stays level with it. */
.site-footer-signup .wpforms-error:not(input) {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 8px;
  color: inherit;
  font-style: normal;
  font-size: var(--font-size-body);
}
.site-footer-signup .wpforms-field-hp,
.site-footer-signup .wpforms-hidden,
.site-footer-signup .wpforms-submit-spinner {
  display: none !important;
}
.site-footer-signup .wpforms-confirmation-container,
.site-footer-signup .wpforms-confirmation-container p {
  font-size: inherit;
  line-height: inherit;
}
/* WPForms moves focus to the thank-you so screen readers announce it;
   it isn't something to act on, so no focus ring. */
.site-footer-signup .wpforms-confirmation-container:focus {
  outline: none;
}
/* The sign-up (footer.php): first and last name side by side, then the
   email, each an underlined line; Subscribe level with the last line. */
.gate-signup {
  display: flex;
  align-items: last baseline;
  gap: var(--global-spacing-32);
}
.gate-signup-fields {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--global-spacing-24) var(--global-spacing-16);
  min-width: 0;
}
.gate-signup-email {
  grid-column: 1 / -1;
}
.gate-signup-field input {
  display: block;
  width: 100%;
  padding: 0 0 var(--global-spacing-12);
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--font-size-body);
}
.gate-signup-field input::placeholder {
  color: inherit;
  opacity: 1;
}
.gate-signup-field input:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
.site-footer-signup-thanks {
  font-size: var(--font-size-body-large);
}
@media (max-width: 575.98px) {
  .gate-signup {
    flex-direction: column;
    align-items: stretch;
  }
  .gate-signup-fields {
    grid-template-columns: 1fr;
  }
  .gate-signup .tag {
    justify-content: center;
  }
}
/* The black band (Figma footer frame). Its type is on the site's scale -
   16px for the menu, contact and social links, 12px for the small print -
   so it grows with browser zoom (WCAG 1.4.4). */
.site-footer-main {
  --footer-type: var(--font-size-body);
  --footer-type-sm: 0.75rem;
  --footer-wordmark-top: calc(var(--global-spacing-64) + 0.6vw);
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  background-color: var(--dark);
  color: var(--accent);
}
.site-footer-main .row {
  position: relative;
  z-index: 1;
}
/* At least as tall as the wordmark behind it, so the bottom bar always
   starts below the logo. */
.site-footer-upper {
  position: relative;
  min-height: calc(var(--footer-wordmark-top) + (100cqi - 2 * var(--page-inset)) * 1589 / 3446 + var(--global-spacing-16));
}
/* The logo file as a mask, in a dark grey (#1a1a1a) so it reads. A
   known accessibility trade-off, chosen 11 Nov: the footer's small red
   text over its letters is 4.15:1 (AA needs 4.5:1; #101010 would pass) -
   listed in the accessibility statement. */
.site-footer-wordmark {
  position: absolute;
  top: var(--footer-wordmark-top);
  left: var(--page-inset);
  right: var(--page-inset);
  aspect-ratio: 3446 / 1589;
  background-color: #1a1a1a;
  -webkit-mask: url("../assets/images/logos/gate-logo.svg") center / contain no-repeat;
  mask: url("../assets/images/logos/gate-logo.svg") center / contain no-repeat;
  pointer-events: none;
}
.site-footer-menu,
.site-footer-social,
.site-footer-legal {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer-menu {
  gap: var(--global-spacing-16) var(--global-spacing-32);
}
/* Ruled above and below; caps nudged down to sit centred between the
   rules (Gate Loud centres high - see .site-header .menu a). */
.site-footer-menu a {
  --cap-nudge: 0.12em;
  display: block;
  padding-block: calc(0.85em + var(--cap-nudge)) calc(0.85em - var(--cap-nudge));
  /* The rules are drawn as backgrounds rather than borders, so hover can
     shrink them to nothing from both ends. */
  background:
    linear-gradient(var(--accent), var(--accent)) center top / 100% 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center bottom / 100% 1px no-repeat;
  font-family: var(--font-family-label);
  font-size: var(--footer-type);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  /* Hover spreads the letters, as on the header nav; the negative margin
     takes back the space letter-spacing adds after the last letter. */
  --footer-spread: 0em;
  margin-right: calc(-1 * var(--footer-spread));
  letter-spacing: var(--footer-spread);
  transition: background-size 0.3s ease, letter-spacing 0.3s ease, margin-right 0.3s ease;
}
.site-footer-menu a:hover,
.site-footer-menu a:focus-visible {
  --footer-spread: 0.03em;
  background-size: 0% 1px;
}
@media (prefers-reduced-motion: reduce) {
  .site-footer-menu a {
    transition: none;
  }
}
.site-footer-social {
  justify-content: flex-end;
  padding-top: 0.85em;
  font-size: var(--footer-type);
  line-height: 1;
}
/* Below lg the column stacks under the menu, so the links line up on
   the left with everything else. */
@media (max-width: 991.98px) {
  .site-footer-social {
    justify-content: flex-start;
  }
}
.site-footer-social li + li::before {
  /* A drawn rule, not a "|" character: nothing for a screen reader to read
     out, and no need for content's alt-text syntax ("|" / ""), which
     Safari before 17.4 rejects - dropping the separator and its spacing. */
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.9em;
  margin-inline: 0.5em;
  vertical-align: -0.1em;
  background-color: currentColor;
}
.site-footer a {
  text-decoration: none !important;
}
/* Links inside running text - the newsletter blurb, the offices' contact
   details - are underlined, so colour isn't the only thing marking them
   (WCAG 1.4.1). Menus and the small-print list are plainly lists of links
   and stay bare. */
.site-footer-newsletter-text a,
.site-footer-office-details a {
  text-decoration: underline !important;
  /* A hairline: one device pixel on a sharp screen. */
  text-decoration-thickness: 0.5px !important;
  text-underline-offset: 0.15em;
}
/* Hover takes the underline away. */
.site-footer-newsletter-text a:hover,
.site-footer-office-details a:hover {
  text-decoration: none !important;
}
/* The small print's links - "Site by Unthink" (bare, by choice: a known
   exception to the 1.4.1 rule above) and the grey legal links - turn
   white on hover and keyboard focus. */
.site-footer-small a {
  transition: color 0.2s ease;
}
.site-footer-small a:hover,
.site-footer-small a:focus-visible {
  color: var(--light);
}
@media (prefers-reduced-motion: reduce) {
  .site-footer-small a {
    transition: none;
  }
}
.site-footer-contact-inner {
  padding-top: clamp(var(--global-spacing-64), 11vw, 280px);
}
/* Each office is as wide as its text (to 15em), and so is its rule. */
.site-footer-office {
  width: fit-content;
  max-width: 15em;
  font-size: var(--footer-type);
}
.site-footer-office + .site-footer-office {
  margin-top: 2.75em;
}
.site-footer-office-title {
  padding-top: var(--global-spacing-16);
  border-top: 1px solid var(--accent);
  font-family: var(--font-family-label);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}
.site-footer-office-details p {
  font-size: inherit;
  line-height: 1.3;
}
.site-footer-office-details p + p {
  margin-top: 0.6em;
}
.site-footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--global-spacing-32);
  padding-block: var(--global-spacing-24);
  border-top: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
}
.site-footer-small {
  font-size: var(--footer-type-sm);
  line-height: 1.3;
}
.site-footer-small-row,
.site-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em 1.6em;
}
/* On the text's baseline: "Site by Unthink" holds a 24px-tall link (above),
   which would otherwise sit it lower than the copyright beside it. */
.site-footer-small-row {
  align-items: baseline;
}
/* Padding, not margin: reset.css zeroes list margins with a selector that
   outranks a single class. */
.site-footer-legal {
  padding-top: 2em !important;
}
.site-footer-legal a {
  color: rgba(255, 255, 255, 0.5);
}
/* The small print is 12px type: each link is made at least 24px tall so
   it can be tapped on a phone (WCAG 2.5.8) - the rows sit a little further
   apart for it. A 24px line, not a flex box, so a link inside a line of
   text ("Site by Unthink") stays on its baseline. */
.site-footer-small a {
  display: inline-block;
  line-height: 24px;
}
.site-footer-partners {
  display: flex;
  align-items: center;
  gap: clamp(var(--global-spacing-16), 2.5vw, 64px);
}
/* The logos are drawn larger than the room the row gives them
   (--logo-slot, unchanged): negative margins take back the difference, so
   the row and the footer stay the same height. */
.site-footer-partners img {
  --logo-slot: clamp(28px, 2.4vw, 60px);
  --logo-h: clamp(48px, 4.4vw, 110px);
  display: block;
  width: auto;
  height: var(--logo-h);
  margin-block: calc((var(--logo-slot) - var(--logo-h)) / 2);
}
/* Phone footer (Mobile Footer design): the sign-up's button under its
   line; the menu one link to a row between rules; then Location, Box
   office and the social links; then the GATE THEATRE logo in full colour
   across the width - not the grey one behind the menu - above the small
   print. The order is set here, so the markup (footer.php) is unchanged. */
@media (max-width: 767.98px) {
  .site-footer-signup .wpforms-form {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--global-spacing-24);
  }
  .site-footer-signup .wpforms-field-container {
    width: 100%;
  }
  .site-footer-upper {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .site-footer-top {
    display: contents;
  }
  /* Without its row box, each column takes back the row's half-gutter, so
     it lines up with Location, Box office and the small print. */
  .site-footer-top > * {
    width: auto;
    max-width: none;
    margin-inline: calc(-0.5 * var(--bs-gutter-x, 1.5rem));
  }
  .site-footer-top > :first-child {
    order: 1;
  }
  .site-footer-contact {
    order: 2;
  }
  .site-footer-top > :last-child {
    order: 3;
  }
  .site-footer-wordmark {
    order: 4;
    position: static;
    display: block;
    /* In the flow now, inside the container's half-gutter. */
    margin: var(--global-spacing-48) calc(var(--page-inset) - 0.5 * var(--bs-gutter-x, 1.5rem)) var(--global-spacing-32);
    background-color: var(--accent);
  }
  .site-footer-menu {
    flex-direction: column;
    gap: 0;
  }
  /* One rule between links: each has the rule above it, the last one
     below as well. */
  .site-footer-menu a {
    background:
      linear-gradient(var(--accent), var(--accent)) center top / 100% 1px no-repeat;
  }
  .site-footer-menu li:last-child a {
    background:
      linear-gradient(var(--accent), var(--accent)) center top / 100% 1px no-repeat,
      linear-gradient(var(--accent), var(--accent)) center bottom / 100% 1px no-repeat;
  }
  .site-footer-contact-inner {
    padding-top: var(--global-spacing-48);
  }
  /* Rules across the full width. */
  .site-footer-office {
    width: auto;
    max-width: none;
  }
  .site-footer-top > :last-child > * {
    padding-top: var(--global-spacing-48);
  }
}
/* -- FOOTER END -- */

/* -- SECTION HEIGHT -- */
/* Every component is a direct child of <main>, laid out as a column with
   its content at the top. The starter gave each a 75vh floor; the Gate
   designs size sections by their content, so there is none here. */
main > section,
main > article {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
/* -- SECTION HEIGHT END -- */

/* -- PAGE THEME -- */
/* functions/page_theme.php puts accent-<colour> and ground-<light|dark|
   accent> on <body>. Everything themed reads these. */
body {
  --accent: var(--brand-red);
  --page-bg: var(--light);
  --page-fg: var(--dark);
  --link-accent: var(--dark);
  --header-fg: var(--accent);
  /* The header's second colour: the icon glyphs when the icon boxes
     fill on hover. Dark against a coloured header, the accent against a
     dark one - the same pair as Book now. */
  --header-ink: var(--dark);
}
body.accent-orange { --accent: var(--orange); }
body.accent-pink { --accent: var(--pink); }
body.accent-blue { --accent: var(--blue); }
/* A light page keeps the black links set above: no accent reads as link
   text on white at WCAG AA (red 4.2:1, pink 2.6 -
   AA wants 4.5). */
body.ground-dark {
  --page-bg: var(--dark);
  --page-fg: var(--light);
  --link-accent: var(--accent);
}
body.ground-accent {
  --page-bg: var(--accent);
  --page-fg: var(--dark);
  --header-fg: var(--dark);
  --header-ink: var(--accent);
}
/* A red (accent value "green") light page uses black for its
   header and links. */
body.accent-green.ground-light,
body.accent-orange.ground-light,
body.accent-blue.ground-light {
  --header-fg: var(--dark);
  --header-ink: var(--accent);
}
/* Doubled class to outrank the accent/ground pairs above. Any page that
   opens with a Home Hero, not only the home page. */
body.home.home,
body.hero-home.hero-home {
  --header-fg: var(--brand-red);
  --header-ink: var(--dark);
}
body.hero-colour .site-header:not(.is-scrolled) {
  --header-ink: var(--accent);
  color: var(--dark);
}
/* Not while hovered, so the outline hover (see "Filled buttons") wins. */
body.hero-colour .site-header:not(.is-scrolled) .tag-accent:not(:hover, :focus-visible) {
  background-color: var(--dark);
  color: var(--accent) !important;
}
body.hero-dark .site-header:not(.is-scrolled),
body.hero-image .site-header:not(.is-scrolled) {
  --header-ink: var(--dark);
  color: var(--accent);
}
.site-header {
  transition: color 0.2s ease;
}
/* An image left empty (gate_image() in functions/component_helpers.php):
   a block in the page's colour, or black where the page's ground is that
   colour already, with the cards' rules top and bottom and the title of
   what the picture is of in the middle. It carries the image's own class,
   so the component's sizing still applies; the 4:3 is only for images
   whose shape came from the picture itself. Here, before
   component-classes.css, so those rules win. The inset, rules and title
   scale with the block's width (cqi), and a block too small to hold a
   title (a credit thumbnail) keeps just the colour. */
.image-placeholder {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  container-type: inline-size;
  /* Square, like the photos it stands in for and sits among - only
     cards that aren't placeholders are rounded. */
  border-radius: 0;
  background-color: var(--accent);
  color: var(--dark);
}
body.ground-accent .image-placeholder {
  background-color: var(--dark);
  color: var(--accent);
}
.image-placeholder-inner {
  --placeholder-inset: clamp(8px, 6cqi, 32px);
  position: absolute;
  inset: var(--placeholder-inset);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: clamp(4px, 4cqi, 24px);
  text-align: center;
}
.image-placeholder-label {
  font-family: var(--font-family-display);
  font-weight: 900;
  font-size: clamp(0.875rem, 8cqi, 3rem);
  line-height: 1;
  text-transform: uppercase;
  text-wrap: balance;
  /* Gate Loud's capitals ride about 0.12em high in their line box (at
     the 0.85 line-height), so the letters sat above the block's middle;
     this drops them back to it. */
  position: relative;
  top: 0.12em;
}
/* Once script.js has fixed its line breaks: one line per row, centred, so
   a line that the hover's spread makes wider runs past both edges evenly
   rather than wrapping. */
.image-placeholder-label.is-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.image-placeholder-label.is-locked > span {
  white-space: nowrap;
}
/* On a card's hover, in place of the photo's zoom: the title spreads
   (--card-spread, see HOVER CARDS in component-classes.css). */
.hover-card .image-placeholder-label {
  letter-spacing: var(--card-spread, 0em);
  transition: letter-spacing 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .hover-card .image-placeholder-label {
    transition: none;
  }
}
@container (max-width: 140px) {
  .image-placeholder-inner {
    display: none;
  }
}
/* -- PAGE THEME END -- */

/* -- BASE COLOUR -- */
/* --light is the site default. --dark only appears where a component has had
   it set as its background - those components also set their own text
   colour inline (see functions/text_colour.php), overriding this. */
body {
  background-color: var(--page-bg);
  color: var(--page-fg);
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}
/* -- BASE COLOUR END -- */

/* -- SPACING -- */
.padding-3 {
  padding: var(--global-spacing-3);
}
.padding-6 {
  padding: var(--global-spacing-6);
}
.padding-12 {
  padding: var(--global-spacing-12);
}
.padding-25 {
  padding: var(--global-spacing-25);
}
.padding-50 {
  padding: var(--global-spacing-50);
}
.padding-75 {
  padding: var(--global-spacing-75);
}
.padding-100 {
  padding: var(--global-spacing-100);
}

.padding-left-3 {
  padding-left: var(--global-spacing-3);
}
.padding-left-6 {
  padding-left: var(--global-spacing-6);
}
.padding-left-12 {
  padding-left: var(--global-spacing-12);
}
.padding-left-25 {
  padding-left: var(--global-spacing-25);
}
.padding-left-50 {
  padding-left: var(--global-spacing-50);
}
.padding-left-75 {
  padding-left: var(--global-spacing-75);
}
.padding-left-100 {
  padding-left: var(--global-spacing-100);
}

.padding-right-3 {
  padding-right: var(--global-spacing-3);
}
.padding-right-6 {
  padding-right: var(--global-spacing-6);
}
.padding-right-12 {
  padding-right: var(--global-spacing-12);
}
.padding-right-25 {
  padding-right: var(--global-spacing-25);
}
.padding-right-50 {
  padding-right: var(--global-spacing-50);
}
.padding-right-75 {
  padding-right: var(--global-spacing-75);
}
.padding-right-100 {
  padding-right: var(--global-spacing-100);
}

.padding-top-3 {
  padding-top: var(--global-spacing-3);
}
.padding-top-6 {
  padding-top: var(--global-spacing-6);
}
.padding-top-12 {
  padding-top: var(--global-spacing-12);
}
.padding-top-25 {
  padding-top: var(--global-spacing-25);
}
.padding-top-50 {
  padding-top: var(--global-spacing-50);
}
.padding-top-75 {
  padding-top: var(--global-spacing-75);
}
.padding-top-100 {
  padding-top: var(--global-spacing-100);
}
.padding-top-150 {
  padding-top: var(--global-spacing-150);
}
.padding-top-200 {
  padding-top: var(--global-spacing-200);
}

.padding-bottom-3 {
  padding-bottom: var(--global-spacing-3);
}
.padding-bottom-6 {
  padding-bottom: var(--global-spacing-6);
}
.padding-bottom-12 {
  padding-bottom: var(--global-spacing-12);
}
.padding-bottom-25 {
  padding-bottom: var(--global-spacing-25);
}
.padding-bottom-50 {
  padding-bottom: var(--global-spacing-50);
}
.padding-bottom-75 {
  padding-bottom: var(--global-spacing-75);
}
.padding-bottom-100 {
  padding-bottom: var(--global-spacing-100);
}
.padding-bottom-150 {
  padding-bottom: var(--global-spacing-150);
}

.padding-block-3 {
  padding-block: var(--global-spacing-3);
}
.padding-block-6 {
  padding-block: var(--global-spacing-6);
}
.padding-block-12 {
  padding-block: var(--global-spacing-12);
}
.padding-block-25 {
  padding-block: var(--global-spacing-25);
}
.padding-block-50 {
  padding-block: var(--global-spacing-50);
}
.padding-block-75 {
  padding-block: var(--global-spacing-75);
}
.padding-block-100 {
  padding-block: var(--global-spacing-100);
}
.padding-block-150 {
  padding-block: var(--global-spacing-150);
}

.padding-inline-3 {
  padding-inline: var(--global-spacing-3);
}
.padding-inline-6 {
  padding-inline: var(--global-spacing-6);
}
.padding-inline-12 {
  padding-inline: var(--global-spacing-12);
}
.padding-inline-25 {
  padding-inline: var(--global-spacing-25);
}
.padding-inline-50 {
  padding-inline: var(--global-spacing-50);
}
.padding-inline-75 {
  padding-inline: var(--global-spacing-75);
}
.padding-inline-100 {
  padding-inline: var(--global-spacing-100);
}
.padding-inline-150 {
  padding-inline: var(--global-spacing-150);
}

.margin-3 {
  margin: var(--global-spacing-3);
}
.margin-6 {
  margin: var(--global-spacing-6);
}
.margin-12 {
  margin: var(--global-spacing-12);
}
.margin-25 {
  margin: var(--global-spacing-25);
}
.margin-50 {
  margin: var(--global-spacing-50);
}
.margin-75 {
  margin: var(--global-spacing-75);
}
.margin-100 {
  margin: var(--global-spacing-100);
}
.margin-150 {
  margin: var(--global-spacing-150);
}
.margin-200 {
  margin: var(--global-spacing-200);
}

.margin-left-3 {
  margin-left: var(--global-spacing-3);
}
.margin-left-6 {
  margin-left: var(--global-spacing-6);
}
.margin-left-12 {
  margin-left: var(--global-spacing-12);
}
.margin-left-25 {
  margin-left: var(--global-spacing-25);
}
.margin-left-50 {
  margin-left: var(--global-spacing-50);
}
.margin-left-75 {
  margin-left: var(--global-spacing-75);
}
.margin-left-100 {
  margin-left: var(--global-spacing-100);
}
.margin-left-150 {
  margin-left: var(--global-spacing-150);
}
.margin-left-200 {
  margin-left: var(--global-spacing-200);
}

.margin-right-3 {
  margin-right: var(--global-spacing-3);
}
.margin-right-6 {
  margin-right: var(--global-spacing-6);
}
.margin-right-12 {
  margin-right: var(--global-spacing-12);
}
.margin-right-25 {
  margin-right: var(--global-spacing-25);
}
.margin-right-50 {
  margin-right: var(--global-spacing-50);
}
.margin-right-75 {
  margin-right: var(--global-spacing-75);
}
.margin-right-100 {
  margin-right: var(--global-spacing-100);
}
.margin-right-150 {
  margin-right: var(--global-spacing-150);
}
.margin-right-200 {
  margin-right: var(--global-spacing-200);
}

.margin-top-3 {
  margin-top: var(--global-spacing-3);
}
.margin-top-6 {
  margin-top: var(--global-spacing-6);
}
.margin-top-12 {
  margin-top: var(--global-spacing-12);
}
.margin-top-25 {
  margin-top: var(--global-spacing-25);
}
.margin-top-50 {
  margin-top: var(--global-spacing-50);
}
.margin-top-75 {
  margin-top: var(--global-spacing-75);
}
.margin-top-100 {
  margin-top: var(--global-spacing-100);
}
.margin-top-150 {
  margin-top: var(--global-spacing-150);
}
.margin-top-200 {
  margin-top: var(--global-spacing-200);
}

.margin-bottom-3 {
  margin-bottom: var(--global-spacing-3);
}
.margin-bottom-6 {
  margin-bottom: var(--global-spacing-6);
}
.margin-bottom-12 {
  margin-bottom: var(--global-spacing-12);
}
.margin-bottom-25 {
  margin-bottom: var(--global-spacing-25);
}
.margin-bottom-50 {
  margin-bottom: var(--global-spacing-50);
}
.margin-bottom-75 {
  margin-bottom: var(--global-spacing-75);
}
.margin-bottom-100 {
  margin-bottom: var(--global-spacing-100);
}
.margin-bottom-150 {
  margin-bottom: var(--global-spacing-150);
}
.margin-bottom-200 {
  margin-bottom: var(--global-spacing-200);
}
@media (max-width: 767px) {
  .margin-bottom-200 {
    margin-bottom: 25px !important;
  }
}

.margin-block-3 {
  margin-block: var(--global-spacing-3);
}
.margin-block-6 {
  margin-block: var(--global-spacing-6);
}
.margin-block-12 {
  margin-block: var(--global-spacing-12);
}
.margin-block-25 {
  margin-block: var(--global-spacing-25);
}
.margin-block-50 {
  margin-block: var(--global-spacing-50);
}
.margin-block-75 {
  margin-block: var(--global-spacing-75);
}
.margin-block-100 {
  margin-block: var(--global-spacing-100);
}
.margin-block-150 {
  margin-block: var(--global-spacing-150);
}
.margin-block-200 {
  margin-block: var(--global-spacing-200);
}

.margin-inline-3 {
  margin-inline: var(--global-spacing-3);
}
.margin-inline-6 {
  margin-inline: var(--global-spacing-6);
}
.margin-inline-12 {
  margin-inline: var(--global-spacing-12);
}
.margin-inline-25 {
  margin-inline: var(--global-spacing-25);
}
.margin-inline-50 {
  margin-inline: var(--global-spacing-50);
}
.margin-inline-75 {
  margin-inline: var(--global-spacing-75);
}
.margin-inline-100 {
  margin-inline: var(--global-spacing-100);
}
.margin-inline-150 {
  margin-inline: var(--global-spacing-150);
}
.margin-inline-200 {
  margin-inline: var(--global-spacing-200);
}
/* Gate scale (16 / 24 / 32 / 64 / 96) - the values the designs use. */
.padding-16 {
  padding: var(--global-spacing-16);
}
.padding-24 {
  padding: var(--global-spacing-24);
}
.padding-32 {
  padding: var(--global-spacing-32) var(--page-inset);
}
.padding-64 {
  padding: var(--global-spacing-64);
}
.padding-96 {
  padding: var(--global-spacing-96);
}
.padding-left-16 {
  padding-left: var(--global-spacing-16);
}
.padding-left-24 {
  padding-left: var(--global-spacing-24);
}
.padding-left-32 {
  padding-left: var(--page-inset);
}
.padding-left-64 {
  padding-left: var(--global-spacing-64);
}
.padding-left-96 {
  padding-left: var(--global-spacing-96);
}
.padding-right-16 {
  padding-right: var(--global-spacing-16);
}
.padding-right-24 {
  padding-right: var(--global-spacing-24);
}
.padding-right-32 {
  padding-right: var(--page-inset);
}
.padding-right-64 {
  padding-right: var(--global-spacing-64);
}
.padding-right-96 {
  padding-right: var(--global-spacing-96);
}
.padding-top-16 {
  padding-top: var(--global-spacing-16);
}
.padding-top-24 {
  padding-top: var(--global-spacing-24);
}
.padding-top-32 {
  padding-top: var(--global-spacing-32);
}
.padding-top-64 {
  padding-top: var(--global-spacing-64);
}
.padding-top-96 {
  padding-top: var(--global-spacing-96);
}
.padding-bottom-16 {
  padding-bottom: var(--global-spacing-16);
}
.padding-bottom-24 {
  padding-bottom: var(--global-spacing-24);
}
.padding-bottom-32 {
  padding-bottom: var(--global-spacing-32);
}
.padding-bottom-64 {
  padding-bottom: var(--global-spacing-64);
}
.padding-bottom-96 {
  padding-bottom: var(--global-spacing-96);
}
.padding-block-16 {
  padding-block: var(--global-spacing-16);
}
.padding-block-24 {
  padding-block: var(--global-spacing-24);
}
.padding-block-32 {
  padding-block: var(--global-spacing-32);
}
.padding-block-64 {
  padding-block: var(--global-spacing-64);
}
.padding-block-96 {
  padding-block: var(--global-spacing-96);
}
.padding-inline-16 {
  padding-inline: var(--global-spacing-16);
}
.padding-inline-24 {
  padding-inline: var(--global-spacing-24);
}
.padding-inline-32 {
  padding-inline: var(--page-inset);
}
.padding-inline-64 {
  padding-inline: var(--global-spacing-64);
}
.padding-inline-96 {
  padding-inline: var(--global-spacing-96);
}
.margin-16 {
  margin: var(--global-spacing-16);
}
.margin-24 {
  margin: var(--global-spacing-24);
}
.margin-32 {
  margin: var(--global-spacing-32);
}
.margin-64 {
  margin: var(--global-spacing-64);
}
.margin-96 {
  margin: var(--global-spacing-96);
}
.margin-left-16 {
  margin-left: var(--global-spacing-16);
}
.margin-left-24 {
  margin-left: var(--global-spacing-24);
}
.margin-left-32 {
  margin-left: var(--global-spacing-32);
}
.margin-left-64 {
  margin-left: var(--global-spacing-64);
}
.margin-left-96 {
  margin-left: var(--global-spacing-96);
}
.margin-right-16 {
  margin-right: var(--global-spacing-16);
}
.margin-right-24 {
  margin-right: var(--global-spacing-24);
}
.margin-right-32 {
  margin-right: var(--global-spacing-32);
}
.margin-right-64 {
  margin-right: var(--global-spacing-64);
}
.margin-right-96 {
  margin-right: var(--global-spacing-96);
}
.margin-top-16 {
  margin-top: var(--global-spacing-16);
}
.margin-top-24 {
  margin-top: var(--global-spacing-24);
}
.margin-top-32 {
  margin-top: var(--global-spacing-32);
}
.margin-top-64 {
  margin-top: var(--global-spacing-64);
}
.margin-top-96 {
  margin-top: var(--global-spacing-96);
}
.margin-bottom-16 {
  margin-bottom: var(--global-spacing-16);
}
.margin-bottom-24 {
  margin-bottom: var(--global-spacing-24);
}
.margin-bottom-32 {
  margin-bottom: var(--global-spacing-32);
}
.margin-bottom-64 {
  margin-bottom: var(--global-spacing-64);
}
.margin-bottom-96 {
  margin-bottom: var(--global-spacing-96);
}
.margin-block-16 {
  margin-block: var(--global-spacing-16);
}
.margin-block-24 {
  margin-block: var(--global-spacing-24);
}
.margin-block-32 {
  margin-block: var(--global-spacing-32);
}
.margin-block-64 {
  margin-block: var(--global-spacing-64);
}
.margin-block-96 {
  margin-block: var(--global-spacing-96);
}
.margin-inline-16 {
  margin-inline: var(--global-spacing-16);
}
.margin-inline-24 {
  margin-inline: var(--global-spacing-24);
}
.margin-inline-32 {
  margin-inline: var(--page-inset);
}
.margin-inline-64 {
  margin-inline: var(--global-spacing-64);
}
.margin-inline-96 {
  margin-inline: var(--global-spacing-96);
}
/* -- SPACING END -- */

/* -- POSITION -- */
.position-fixed {
  position: fixed !important;
}
/* -- POSITION END -- */

/* -- SIZING -- */
.vh-100 {
  height: auto !important;
  min-height: 100vh !important;
}

.object-contain {
  object-fit: contain !important;
}

.object-cover {
  object-fit: cover !important;
}
/* -- SIZING END -- */

/* -- BORDER -- */
.border-radius-12 {
  border-radius: var(--global-spacing-12);
}
.border-radius-25 {
  border-radius: var(--global-spacing-25);
}
.border-radius-100 {
  border-radius: var(--global-spacing-100);
}
/* -- BORDER END -- */

/* -- GENERAL -- */
.hidden {
  opacity: 0;
}
.ml-auto {
  margin-left: auto !important;
}
.mr-auto {
  margin-right: auto !important;
}
/* -- GENERAL END -- */

/* -- LINKS AND BUTTONS -- */
/* The two link styles every component draws from. Both carry their own
   type styling, so a component never has to pair them with a size class. */

/* Arrow link - "LABEL ->", no underline, the arrow nudging right on
   hover. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--global-spacing-12);
  font-family: var(--font-family-label);
  font-size: var(--font-size-subheading);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none !important;
}
/* Raised to the middle of the caps, which Gate Loud sets 0.12em above the
   middle of the line (see .site-header .menu a). */
.arrow-link svg {
  position: relative;
  top: -0.12em;
  /* Gate Loud's arrow, at the size it has in the font: as tall as the
     caps beside it. */
  width: 0.9em;
  height: auto;
  flex: none;
  /* Takes back the space letter-spacing leaves after the last letter,
     so the gap to the arrow stays the same while the word spreads. */
  margin-left: calc(-1 * var(--link-spread));
  transition: transform 0.2s ease, margin-left 0.3s ease;
}
.arrow-link:hover svg,
.arrow-link:focus svg {
  transform: translateX(3px);
}
/* Hover spreads the letters, as on the header nav (.site-header .menu a). */
.arrow-link {
  --link-spread: 0em;
  letter-spacing: calc(var(--tracking-label) + var(--link-spread));
  transition: letter-spacing 0.3s ease;
}
.arrow-link:hover,
.arrow-link:focus-visible {
  --link-spread: 0.03em;
}
@media (prefers-reduced-motion: reduce) {
  .arrow-link,
  .arrow-link svg {
    transition: none;
  }
}

/* Pill button - filled with the section's text colour, label in the
   section's background colour, so it sits correctly on any ground.
   --section-bg / --section-text come from the page (body) or from a
   component's own background colour; set them on a component wrapper and
   every pill inside it follows.
   The pair is held in --pill-bg / --pill-fg so hover can simply swap
   them, and so anything needing a different pair (a button over a dark
   image) only has to set those two. */
.pill-button {
  --pill-bg: var(--section-text, var(--dark));
  --pill-fg: var(--section-bg, var(--light));
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 1.1em 2.2em;
  border: 0;
  border-radius: 999px;
  background-color: var(--pill-bg);
  color: var(--pill-fg);
  /* An inset outline rather than a border, so the button does not change
     size - it is what keeps the shape visible once inverted. */
  box-shadow: inset 0 0 0 1px var(--pill-bg);
  font-size: var(--font-size-xsmall);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: background-color 0.25s ease, color 0.25s ease;
}
/* Inverts on hover: the fill drops away and the label takes the fill's
   colour, the outline holding the shape. */
.pill-button:hover,
.pill-button:focus-visible {
  background-color: var(--pill-fg);
  color: var(--pill-bg);
}
.pill-button svg {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}
/* Outline version - the same colours without the fill. */
.pill-button-outline {
  background-color: transparent;
  color: var(--pill-bg);
}
.pill-button-outline:hover,
.pill-button-outline:focus-visible {
  background-color: var(--pill-bg);
  color: var(--pill-fg);
}
/* Tag - the small Balto label used for prices, status and the header's
   "Book now": 12px / 16px padding, 6px corners. */
.tag {
  /* Gate Loud centres its caps high in a box - see .site-header .menu a. */
  --cap-nudge: 0.12em;
  display: inline-flex;
  align-items: center;
  padding: calc(var(--global-spacing-12) + var(--cap-nudge)) var(--global-spacing-16) calc(var(--global-spacing-12) - var(--cap-nudge));
  border: 0;
  border-radius: var(--border-radius-tag);
  font-family: var(--font-family-label);
  font-size: var(--font-size-subheading);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none !important;
}
.tag-brand-red {
  background-color: var(--brand-red);
  color: var(--dark) !important;
}
.tag-black {
  background-color: var(--dark);
  color: var(--accent, var(--brand-red)) !important;
}
.tag-accent {
  background-color: var(--accent, var(--brand-red));
  color: var(--dark) !important;
}
button.tag {
  cursor: pointer;
}
/* A large call to action ("Become a member ->"): the display face at the
   H5 size, the arrow after it. */
.tag-large {
  gap: 0.4em;
  /* Padding in proportion to the type, like Quick book and Book tickets. */
  padding: calc(0.6em + var(--cap-nudge)) 0.85em calc(0.6em - var(--cap-nudge));
  font-family: var(--font-family-display);
  text-transform: uppercase;
  font-size: var(--font-size-small);
  font-weight: 900;
}
/* On a phone the label shrinks with the screen and may wrap, so a long one
   ("Become a member") never runs off the side. */
@media (max-width: 600px) {
  .tag-large {
    max-width: 100%;
    font-size: min(var(--font-size-small), 5.4vw);
    white-space: normal;
  }
}
.tag-large svg {
  width: 0.9em;
  height: auto;
  flex: none;
  /* The padding drops the caps by --cap-nudge to centre them; the arrow
     is centred already, so it goes back up by the same amount. */
  transform: translateY(calc(-1 * var(--cap-nudge)));
}
/* Filled buttons - a tag that is a link or a button (Quick book,
   Subscribe, the large "Become a member" tags), the CTA card buttons,
   Jump to: on hover the fill becomes
   an outline, in the colour of the text around it. The outline is an
   inset shadow, so the button doesn't change size. (Book tickets on a
   show page does the same over a dark backing - see .show-book.) */
a.tag,
button.tag,
.cta-card-button,
.jump-to-button {
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
a.tag:hover,
a.tag:focus-visible,
button.tag:hover,
button.tag:focus-visible,
.cta-card-button:hover,
.cta-card-button:focus-visible,
.jump-to-button:hover,
.jump-to-button:focus-visible {
  background-color: transparent !important;
  box-shadow: inset 0 0 0 1px currentColor;
  color: inherit !important;
}
/* -- LINKS AND BUTTONS END -- */

/* -- SECTION HEADER -- */
/* functions/component_helpers.php gate_section_header(). A rule, the title
   centred with the link level with it at the right, the caption, a rule.
   The rules take the text colour. */
.section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--global-spacing-32);
  padding-block: var(--global-spacing-48);
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  text-align: center;
}
.section-header-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
}
.section-header-title {
  grid-column: 2;
  margin: 0;
  font-size: var(--font-size-xl);
  /* Gate Loud's caps ride 0.12em high in their line (see .site-header
     .menu a), so the title sat closer to the top rule than the bottom.
     Nudged down to centre the caps; the link stays on the row's middle,
     which is now the caps' middle too. */
  position: relative;
  top: 0.12em;
}
.section-header-link {
  grid-column: 3;
  justify-self: end;
}
/* Side by side (above 1100): the link drops out of the row to sit just
   above the bottom rule, in the right-hand corner. Its column stays, so
   the title is still centred. */
@media (min-width: 1101px) {
  .section-header {
    position: relative;
  }
  .section-header-link {
    position: absolute;
    right: 0;
    bottom: var(--global-spacing-12);
  }
}
.section-header-caption {
  /* About 60 characters a line, in ems so it widens with the type. */
  max-width: 32em;
  line-height: 1;
  /* Gives back the room the title's nudge took from the gap above. */
  margin: calc(var(--font-size-xl) * 0.12) 0 0;
}
/* Stacked below 1100 (where the header goes to its phone layout too):
   any narrower and a long title runs into the link beside it. */
@media (max-width: 1100px) {
  .section-header-row {
    grid-template-columns: 1fr;
    gap: var(--global-spacing-16);
  }
  .section-header-title,
  .section-header-link {
    grid-column: 1;
    justify-self: center;
  }
  /* Centred lines too, so a title or caption that wraps stays centred. */
  .section-header-title,
  .section-header-caption {
    text-align: center;
  }
}
/* -- SECTION HEADER END -- */

/* -- REVEALS -- */
/* Two scroll-in animations, driven by js/script.js:
     .shutter-reveal  on an <img> - it fades up from nothing
     .text-reveal     on a piece of text - it drops into place
   clip-path rather than a mask or overflow, so it survives inside
   transformed parents (staggered grids, Splide).

   The hidden start state is scoped to .has-js (set in header.php before
   first paint), so with JS off or broken everything simply shows.

   Staggering: --reveal-i is an image's position in its grid, --card-i a
   card's position, --text-i a line's position inside its own block. The
   first two are set by script.js from [data-reveal-group]; --text-i is
   written in the component markup. */
@media (prefers-reduced-motion: no-preference) {
  /* Images fade up from nothing. (The class keeps its old name - it
     opened as a shutter until Oct 2026 - so gate_image() and script.js
     are unchanged.) */
  .has-js .shutter-reveal {
    opacity: 0;
    /* Slow and even. A curve that covers most of its travel early reads
       as fast however long the duration is - this one eases gently. */
    transition: opacity 1.5s cubic-bezier(0.33, 0.1, 0.25, 1);
    transition-delay: calc(var(--reveal-i, 0) * 0.18s);
    will-change: opacity;
  }
  .has-js .shutter-reveal.is-in {
    opacity: 1;
  }
  /* Labels on a picture (price, status, category) fade in with it, not
     ahead of it - otherwise they float over an empty frame. */
  .has-js :is(.show-card-tags, .production-card-tags) {
    transition: opacity 1.5s cubic-bezier(0.33, 0.1, 0.25, 1);
    transition-delay: calc(var(--reveal-i, 0) * 0.18s);
  }
  .has-js :is(.show-card-media, .production-card-media):has(.shutter-reveal:not(.is-in)) :is(.show-card-tags, .production-card-tags) {
    opacity: 0;
  }

  .has-js .text-reveal {
    opacity: 0;
    transform: translateY(-0.6em);
    transition: opacity 1.5s cubic-bezier(0.33, 0.1, 0.25, 1),
      transform 1.5s cubic-bezier(0.33, 0.1, 0.25, 1);
    /* Kept short - a long wait on the later cards reads as lag rather
       than as a stagger. */
    transition-delay: calc(var(--card-i, 0) * 0.1s + var(--text-i, 0) * 0.07s);
    will-change: opacity, transform;
  }
  .has-js .text-reveal.is-in {
    opacity: 1;
    transform: none;
  }

  /* The header drops in the same way on load - it is on screen from the
     start, so there is nothing to scroll into. Order: wordmark, each nav
     item, then the button. The indexes are set here rather than in the
     markup because the nav items come from a menu. */
  .has-js .site-header .site-logo,
  .has-js .site-header .menu > li,
  .has-js .site-header .site-header-button {
    opacity: 0;
    transform: translateY(-0.6em);
    transition: opacity 1.5s cubic-bezier(0.33, 0.1, 0.25, 1),
      transform 1.5s cubic-bezier(0.33, 0.1, 0.25, 1);
    transition-delay: calc(var(--text-i, 0) * 0.09s);
  }
  .has-js .site-header .menu > li:nth-child(1) { --text-i: 1; }
  .has-js .site-header .menu > li:nth-child(2) { --text-i: 2; }
  .has-js .site-header .menu > li:nth-child(3) { --text-i: 3; }
  .has-js .site-header .menu > li:nth-child(4) { --text-i: 4; }
  .has-js .site-header .menu > li:nth-child(5) { --text-i: 5; }
  .has-js .site-header .menu > li:nth-child(6) { --text-i: 6; }
  .has-js .site-header .menu > li:nth-child(7) { --text-i: 7; }
  .has-js .site-header .menu > li:nth-child(8) { --text-i: 8; }
  .has-js .site-header .site-header-button { --text-i: 9; }
  .has-js .site-header.is-revealed .site-logo,
  .has-js .site-header.is-revealed .menu > li,
  .has-js .site-header.is-revealed .site-header-button {
    opacity: 1;
    transform: none;
  }
}
/* -- REVEALS END -- */

/* -- SPLIT SECTIONS -- */
/* functions/component_helpers.php gate_split_open(): a rule, the title in
   the left third, content in the right two thirds. Shared by the About,
   Gateways, Visit and show page sections. */
.split-frame {
  padding-top: var(--global-spacing-32);
  border-top: 1px solid currentColor;
}
.split-title {
  margin: 0;
}
.split-intro {
  max-width: 46rem;
}
.split-link .arrow-link,
.ground-light .split-intro .arrow-link,
.ground-dark .split-intro .arrow-link {
  color: var(--link-accent);
}
/* Accent card - solid accent, black type, rules top and bottom, arrow in
   the corner (Tickets & Prices, the Work with us call to action). On a
   page that is itself the accent colour it inverts to black. */
.accent-card {
  display: block;
  height: 100%;
  padding: var(--global-spacing-32);
  border-radius: 8px;
  background-color: var(--accent);
  color: var(--dark);
  text-decoration: none !important;
}
.ground-accent .accent-card {
  background-color: var(--dark);
  color: var(--accent);
}
/* Tighter on a phone. */
@media (max-width: 768px) {
  .accent-card {
    padding: var(--global-spacing-16);
  }
}
.accent-card-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--global-spacing-12);
  min-height: 236px;
  height: 100%;
  padding-block: var(--global-spacing-24);
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}
.accent-card-text {
  max-width: 28rem;
}
/* Hover (a linked card): the title spreads, left edge fixed, like the
   header nav, and the arrow nudges on. The subtitle and copy stay still. */
a.accent-card {
  --card-spread: 0em;
}
a.accent-card .font-display {
  letter-spacing: var(--card-spread);
  transition: letter-spacing 0.3s ease;
}
a.accent-card .accent-card-arrow svg {
  transition: transform 0.3s ease;
}
a.accent-card:hover,
a.accent-card:focus-visible {
  --card-spread: 0.03em;
}
a.accent-card:hover .accent-card-arrow svg,
a.accent-card:focus-visible .accent-card-arrow svg {
  transform: translateX(6px);
}
@media (prefers-reduced-motion: reduce) {
  a.accent-card .font-display,
  a.accent-card .accent-card-arrow svg {
    transition: none;
  }
}
.accent-card-arrow {
  margin-top: auto;
  align-self: flex-end;
}
.accent-card-arrow svg,
.link-card-arrow svg,
.promo-card-arrow svg {
  display: block;
  width: 32px;
  height: auto;
}
.accent-card-wide .accent-card-inner {
  min-height: 0;
}
/* Accordion - native <details>, a + that turns to a - when open. */
.accordion-item {
  border-top: 1px solid currentColor;
}
/* Bootstrap's own .accordion-item:not(:first-of-type) { border-top: 0 }
   outranks the rule above and leaves only the first row ruled. */
.accordion-list .accordion-item:not(:first-of-type) {
  border-top: 1px solid currentColor;
}
.accordion-item:last-child {
  border-bottom: 1px solid currentColor;
}
.accordion-item summary {
  display: flex;
  justify-content: space-between;
  gap: var(--global-spacing-16);
  padding-block: var(--global-spacing-16);
  cursor: pointer;
  list-style: none;
}
.accordion-item summary::-webkit-details-marker {
  display: none;
}
/* The + is two bars (.accordion-icon's ::before and ::after), so it can
   move: hovering the row spins it a half turn, and opening the row turns
   its upright bar flat, leaving a minus. */
.accordion-icon {
  position: relative;
  flex: none;
  align-self: center;
  width: 0.75em;
  height: 0.75em;
  transition: transform 0.4s ease;
}
.accordion-icon::before,
.accordion-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0.16em;
  margin-top: -0.08em;
  background-color: currentColor;
  transition: transform 0.4s ease;
}
.accordion-icon::after {
  transform: rotate(90deg);
}
.accordion-item summary:hover .accordion-icon,
.accordion-item summary:focus-visible .accordion-icon {
  transform: rotate(180deg);
}
/* Not while closing (script.js animates the close, and only then drops
   [open]) - so the minus turns back into a + as the row starts to shut. */
.accordion-item[open]:not(.is-closing) .accordion-icon::after {
  transform: rotate(0deg);
}
@media (prefers-reduced-motion: reduce) {
  .accordion-icon,
  .accordion-icon::before,
  .accordion-icon::after {
    transition: none;
  }
}
.accordion-answer {
  max-width: 40rem;
  padding-bottom: var(--global-spacing-24);
}
.map-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 906 / 506;
  border: 0;
  filter: grayscale(1);
}
/* Split Section's Video block: the player fills the column at 16:9. */
.split-section-video iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}
/* TEXT SIZE: a component's Text size setting (gate_text_size_class()) sizes
   its smaller sans-serif text and its drop-down text - 16, 20 or 24px.
   Unset, each keeps its own: drop-downs 16, Small Text 20. */
.text-size-small :is(.small-text, .accordion-answer) {
  font-size: var(--font-size-body);
}
.text-size-medium :is(.small-text, .accordion-answer),
.text-size-large :is(.small-text, .accordion-answer) {
  /* All body copy at 16 (11 Nov) - Medium and Large no longer step up. */
  font-size: var(--font-size-body);
}
:is(.text-size-small, .text-size-medium, .text-size-large) :is(.small-text, .accordion-answer) :is(p, li) {
  font-size: inherit;
}
/* Image size (Split Section's Image block, Split Text Image): Small and
   Medium take part of the column, from its left edge; on phones a little
   more, so the picture stays clear. */
:is(.split-section-figure, .split-text-image-figure).image-size-small {
  max-width: 50%;
}
:is(.split-section-figure, .split-text-image-figure).image-size-medium {
  max-width: 75%;
}
@media (max-width: 767px) {
  :is(.split-section-figure, .split-text-image-figure).image-size-small {
    max-width: 75%;
  }
  :is(.split-section-figure, .split-text-image-figure).image-size-medium {
    max-width: 100%;
  }
}
/* -- SPLIT SECTIONS END -- */

/* -- CARDS -- */
/* The show card (functions/show_helpers.php gate_show_card()) and the
   content card share their media and text treatment. */
.show-card-media {
  position: relative;
  display: block;
}
.show-card-image,
.content-card-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 459 / 566;
  object-fit: cover;
}
.show-card-wide .show-card-image {
  aspect-ratio: auto;
  height: 100%;
  min-height: 0;
}
.show-card-tags {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-wrap: wrap;
}
.show-card-tags .tag {
  border-radius: 0;
}
.show-card-text {
  display: flex;
  flex-direction: column;
  gap: var(--global-spacing-16);
}
.show-card-text h2,
.show-card-text h3,
.show-card-text p {
  margin: 0;
}
.show-card-text a,
.content-card a {
  text-decoration: none !important;
}
/* Promo card - black, accent type, arrow in the corner ("Become a
   member"); .promo-card-centre stacks it in the middle ("View all"). */
.promo-card {
  display: flex;
  flex-direction: column;
  gap: var(--global-spacing-16);
  padding: var(--global-spacing-32);
  border-radius: 8px;
  background-color: var(--dark);
  color: var(--accent) !important;
  text-decoration: none !important;
}
/* Rules top and bottom inside the padding, as the accent and CTA cards
   (What's On's Become a member; the arrow sits on the bottom rule's line). */
.promo-card-inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--global-spacing-16);
  padding-block: var(--global-spacing-24);
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}
.promo-card-arrow {
  margin-top: auto;
  align-self: flex-end;
}
.promo-card-centre {
  align-items: center;
  justify-content: center;
  text-align: center;
  aspect-ratio: 459 / 566;
}
/* Hover: as the accent cards - the title spreads (less, as it is bigger
   and runs to several lines) and the arrow nudges on. */
.promo-card {
  --card-spread: 0em;
}
.promo-card .font-display {
  letter-spacing: var(--card-spread);
  transition: letter-spacing 0.3s ease;
}
.promo-card-arrow svg {
  transition: transform 0.3s ease;
}
.promo-card:hover,
.promo-card:focus-visible {
  --card-spread: 0.01em;
}
.promo-card:hover .promo-card-arrow svg,
.promo-card:focus-visible .promo-card-arrow svg {
  transform: translateX(6px);
}
@media (prefers-reduced-motion: reduce) {
  .promo-card .font-display,
  .promo-card-arrow svg {
    transition: none;
  }
}
/* -- CARDS END -- */

/* -- ACCESSIBILITY -- */
/* Skip link (header.php): off screen until it takes focus, then over the
   header's top left - the first thing a keyboard user reaches. */
.skip-link {
  position: fixed;
  top: var(--global-spacing-16);
  left: var(--page-inset);
  z-index: 1100;
  padding: var(--global-spacing-12) var(--global-spacing-16);
  border-radius: var(--border-radius-tag);
  background-color: var(--dark);
  color: var(--light) !important;
  font-family: var(--font-family-display);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none !important;
  transform: translateY(calc(-100% - 2 * var(--global-spacing-16)));
}
.skip-link:focus {
  transform: none;
  outline: 2px solid var(--light);
  outline-offset: 2px;
}
/* <main> takes focus from the skip link only to move the reading point -
   it is not a control, so no ring. */
main:focus {
  outline: none;
}
/* Anything scrolled to - a focused link, a Jump to section - stops clear
   of the fixed header above and the fixed Book tickets / Jump to buttons
   below, rather than underneath them. */
html {
  scroll-padding-top: calc(var(--header-height) + var(--header-top) + var(--global-spacing-16));
  scroll-padding-bottom: calc(var(--global-spacing-96) + var(--global-spacing-16));
}
/* Revealed text that takes focus shows at once (js/script.js also
   reveals its group on focusin) - never a focused link still invisible. */
@media (prefers-reduced-motion: no-preference) {
  .has-js .text-reveal:focus-within,
  .has-js [data-reveal-item]:focus-within .text-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* Windows High Contrast / forced colours: these are drawn as a colour
   behind a mask, which forced colours would wipe - keep them painted in
   the system text colour. */
@media (forced-colors: active) {
  .site-logo {
    --logo-ink: CanvasText;
  }
  .site-logo::before,
  .site-logo::after {
    forced-color-adjust: none;
  }
  .home-hero-word,
  .site-footer-wordmark,
  .accordion-icon::before,
  .accordion-icon::after {
    forced-color-adjust: none;
    background-color: CanvasText;
  }
}
/* A very short window (a laptop zoomed to 400%): the header scrolls away
   with the page instead of holding a slice of the screen. */
@media (max-height: 500px) {
  .site-header {
    position: absolute;
  }
}
/* A long arrow-link label may wrap on the narrowest screens rather than
   run off the side. */
@media (max-width: 400px) {
  .arrow-link {
    white-space: normal;
  }
}
/* -- ACCESSIBILITY END -- */