/* -- FONT FACES -- */
/* Gate 03 (the Gate display face) and PP Right Grotesk (Pangram Pangram)
   are not in git: the web font files are gitignored and live on the server
   only - see docs/design-tokens.md.
   Instrument Serif comes from Google Fonts (functions/enqueue_assets.php);
   Balto and Franklin Gothic URW are expected from an Adobe Fonts kit. */
@font-face {
  font-family: "Gate 03";
  src: url("../assets/fonts/Gate03-Ultra.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Right Grotesk Spatial";
  src: url("../assets/fonts/PPRightGrotesk-SpatialBlack.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Right Grotesk Wide";
  src: url("../assets/fonts/PPRightGrotesk-WideBlack.woff2") format("woff2");
  font-weight: 900;
  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 bar's type (nav, Book now, MENU) in Gate 03, which runs much
     wider than the label face: 12px (the Figma header frames) up to a
     1440 screen, rising evenly to 24px at 2560 (a 5K iMac). */
  --header-type-size: clamp(12px, 1.0714vw - 3.43px, 24px);

  /* Gate type families, from Figma "Ready for Dev > Type System - Desktop"
     (docs/design-tokens.md). Display is Gate 03 Ultra, the "Gate Sans"
     Figma marked TBD. It has no lowercase or accented letters (fadas), so
     those fall through to PP Right Grotesk Spatial, the face it replaced.
     Balto and Franklin Gothic URW list both their desktop and Adobe Fonts
     names. */
  --font-family-display: "Gate 03", "PP Right Grotesk Spatial",
    "PP Right Grotesk", "Arial Black", Arial, sans-serif;
  --font-family-display-wide: "PP Right Grotesk Wide", "PP Right Grotesk",
    "Arial Black", Arial, sans-serif;
  /* Labels - nav, tags, arrow links, small caps headings - are Gate 03
     too (Balto, in the Figma type system, never had its Adobe kit set up;
     it stays as the fallback). */
  --font-family-label: "Gate 03", "Balto", "balto", Arial, sans-serif;
  /* Sentence-case sans copy (CTA card text). Not the label stack: Gate 03
     has capitals and punctuation but no lowercase, so mixed-case text set
     in it comes out in two faces. */
  --font-family-text: "Balto", "balto", Arial, sans-serif;
  --font-family-serif: "Instrument Serif", 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;
  --line-height-small: 0.9;
  --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;
  --orange: #fd7a49;
  --pink: #ff5cfa;
  --green: #3fff82;
  --blue: #3f8ff7;
  /* 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(--green);

  --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;
  --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;
  }
}
/* Past the 1440 canvas, every type size grows with --px. */
@media (min-width: 1441px) {
  :root {
    --px: min(0.142857px + 0.0595238vw, 1.6667px);
    --font-size-xxl: calc(160 * var(--px));
    --font-size-xl: calc(96 * var(--px));
    --font-size-large: calc(64 * var(--px));
    --font-size-medium: calc(48 * var(--px));
    --font-size-small: calc(32 * var(--px));
    --font-size-intro-large: calc(48 * var(--px));
    --font-size-intro-medium: calc(32 * var(--px));
    --font-size-intro-small: calc(24 * var(--px));
    --font-size-body: calc(16 * var(--px));
    --font-size-body-large: calc(20 * var(--px));
    --font-size-xsmall: calc(14 * var(--px));
    --font-size-subheading: calc(16 * var(--px));
    --font-size-menu: calc(20 * var(--px));
    --font-size-menu-small: calc(28 * var(--px));
  }
}
/* -- VARIABLES END -- */

/* -- 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-display-wide {
  font-family: var(--font-family-display-wide);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.3;
}
.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 PP Right Grotesk Spatial Black, 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);
  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 - Instrument Serif 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%;
}
@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;
}
/* 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: 0;
  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(--global-spacing-32)) 1px no-repeat,
    linear-gradient(currentColor, currentColor)
      center calc((var(--header-height) + var(--header-rule-gap)) / 2 - 1px) /
      calc(100% - 2 * var(--global-spacing-32)) 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);
  font-weight: 900;
}
/* Gate 03 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: 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.12em;
}
@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 {
  display: block;
  width: 136px;
  height: 64px;
  background-color: currentColor;
  -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;
}
/* 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));
}
.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 page has scrolled. */
body.logo-animation .site-logo {
  visibility: hidden;
}
body.logo-animation .site-header.menu-open .site-logo {
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  body.logo-animation .site-header.is-scrolled .site-logo {
    visibility: visible;
  }
}
/* 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;
}
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);
  cursor: pointer;
}
/* Just above the phone header, the full bar only fits with its gaps
   tightened. */
@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;
  }
}
.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;
  justify-content: flex-end;
  overflow-y: auto;
  padding: var(--global-spacing-32) var(--global-spacing-16);
  background-color: var(--dark);
  color: var(--accent);
}
.mobile-menu[hidden] {
  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;
}
.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 03'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: var(--header-height);
}
/* 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: 32px;
}
body.admin-bar .main-offset {
  padding-top: calc(var(--header-height) + 32px);
}
@media (max-width: 782px) {
  body.admin-bar .site-header {
    top: 0;
  }
  body.admin-bar .main-offset {
    padding-top: var(--header-height);
  }
}
/* -- HEADER END -- */

/* -- FOOTER -- */
/* Two bands: the green "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 {
  display: flex;
  align-items: flex-end;
  gap: var(--global-spacing-32);
}
.site-footer-signup input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 0 var(--global-spacing-12);
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--font-size-body);
}
.site-footer-signup input::placeholder {
  color: inherit;
  opacity: 1;
}
/* The black band (Figma footer frame). Its type scales with the screen
   like the header's: 1.1vw for the menu, contact and social links (16px
   at 1440, 28px on a 5K iMac), 0.83vw for the small print. */
.site-footer-main {
  --footer-type: clamp(14px, 1.1vw, 28px);
  --footer-type-sm: clamp(12px, 0.83vw, 21px);
  --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(--global-spacing-32)) * 650 / 1390 + var(--global-spacing-16));
}
/* The logo file as a mask, in a grey just off the black. */
.site-footer-wordmark {
  position: absolute;
  top: var(--footer-wordmark-top);
  left: var(--global-spacing-32);
  right: var(--global-spacing-32);
  aspect-ratio: 1390 / 650;
  background-color: rgba(255, 255, 255, 0.15);
  -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 03 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.12em;
  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;
}
.site-footer-social li + li::before {
  content: "|";
  padding-inline: 0.35em;
}
.site-footer a {
  text-decoration: none !important;
}
.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;
}
/* 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);
}
.site-footer-partners {
  display: flex;
  align-items: center;
  gap: clamp(var(--global-spacing-16), 2.5vw, 64px);
}
.site-footer-partners img {
  display: block;
  width: auto;
  height: clamp(28px, 2.4vw, 60px);
}
/* -- 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 > 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(--green);
  --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); }
body.ground-light {
  --link-accent: var(--accent);
}
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);
}
/* Green on white is unreadable, so a green light page uses black for its
   header and links. */
body.accent-green.ground-light {
  --header-fg: var(--dark);
  --header-ink: var(--accent);
}
/* Doubled class to outrank the accent/ground pairs above. */
body.home.home {
  --header-fg: var(--green);
  --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;
}
/* -- 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);
}
.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(--global-spacing-32);
}
.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(--global-spacing-32);
}
.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(--global-spacing-32);
}
.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(--global-spacing-32);
}
.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 03 sets 0.12em above the
   middle of the line (see .site-header .menu a). */
.arrow-link svg {
  position: relative;
  top: -0.12em;
  /* Gate 03'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: var(--link-spread);
  transition: letter-spacing 0.3s ease;
}
.arrow-link:hover,
.arrow-link:focus-visible {
  --link-spread: 0.12em;
}
@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 03 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;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none !important;
}
.tag-green {
  background-color: var(--green);
  color: var(--dark) !important;
}
.tag-black {
  background-color: var(--dark);
  color: var(--accent, var(--green)) !important;
}
.tag-accent {
  background-color: var(--accent, var(--green));
  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-inline: var(--global-spacing-24);
  font-family: var(--font-family-display);
  font-size: var(--font-size-small);
  font-weight: 900;
}
.tag-large svg {
  width: 0.9em;
  height: auto;
}
/* Filled buttons - a tag that is a link or a button (Book now,
   Subscribe), 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 03'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;
}
.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;
  }
}
/* -- 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;
  }

  .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);
}
.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.12em;
}
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 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 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;
}
.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.04em;
}
.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 -- */