/* ------------------------------------------------------------------
   The Arcade — everything the palette swap in build_arcade.py cannot
   express on its own. Loaded after the theme's own bundle.

   Two faces only, both Barlow: the condensed one for headings and the
   regular one for everything else. No third face.
   ------------------------------------------------------------------ */

:root {
  --arc-green: #00ff01;
  --arc-cyan: #29ffe3;
  --arc-dim: #0a3d0b;
  --arc-ink: #000000;
  --arc-paper: #f3eded;
  /* The Arcade's mark is two lines deep where Raspoutine's was one, so the
     theme's logo heights leave it unreadable. Each is scaled back up. */
  --logosize: 58px;
  --logosizemobile: 44px;
  --logostickysize: 40px;
}

/* The clone was built for a desktop mouse. This is a club site: most of its
   traffic is a thumb on a phone, at night, on a notched screen. */
body {
  /* the 300ms the browser waits to see if a tap was a double-tap */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* `.drawer` is the one real scroll container on the page (the theme gives it
   `overflow: auto`). Reaching its end used to hand the scroll to the page
   underneath, which then moved behind the open drawer. */
.drawer {
  overscroll-behavior: contain;
}

/* The theme's .subtitle role: same face as the copy, held apart by tracking
   and case rather than by a third family. */
.subtitle,
dt.subtitle,
.text-button span,
.button span,
.menu-item-description,
.banner-scroll-text,
.form-group label span,
.accordion-btn .title {
  font-family: "Arcade Body", Arial, sans-serif !important;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.subtitle,
dt.subtitle,
.banner-scroll-text {
  font-size: 1.25rem;
}

/* The mark carries no fill of its own, so the ground decides its colour.
   Every ground on this site is black now, the sticky bar included. */
.main-logo svg,
.main-logo svg *,
.sticky-logo svg,
.sticky-logo svg *,
.page-loader svg,
.page-loader svg *,
.footer-logo .logo svg,
.footer-logo .logo svg *,
.icon-widget .icon svg,
.icon-widget .icon svg * {
  fill: var(--arc-green);
}
footer .footer-bottom .footer-logo .logo svg {
  height: 4.6rem;
}
.page-loader .logo {
  width: min(320px, 52vw);
}

/* The sticky bar: black, hairline of phosphor, mark always visible. */
.header.sticky-fixed,
.header.sticky-fixed .container-fluid {
  background: var(--arc-ink) !important;
  border-bottom: 1px solid var(--arc-dim);
}
.header.sticky-fixed .logo-wrap .logo svg.sticky-logo {
  opacity: 1;
  height: var(--logostickysize);
}
.header.sticky-fixed .logo-wrap .logo svg.main-logo {
  opacity: 0;
}
.header .location-switcher-wrap span,
.header.sticky-fixed .location-switcher-wrap span {
  color: var(--arc-green);
}

/* Cyan is the companion colour, and it only ever appears on interaction. */
body.nonTouchDevice a:hover,
body.nonTouchDevice a:hover span {
  color: var(--arc-cyan) !important;
}

/* The invader tile behind the map copy was competing with the copy and
   winning. It moves to a layer of its own, at an opacity type can sit on. */
.map-widget .text[style*="invader"] {
  position: relative;
  background-image: none !important;
}
.map-widget .text[style*="invader"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(/uploads/invader-pattern.svg);
  background-size: 150px auto;
  opacity: 0.22;
  pointer-events: none;
}
.map-widget .text > *,
.map-widget .text > dl {
  position: relative;
}

/* ---- forms on a black ground -------------------------------------- */
/* The theme draws white fields, which on this site read as holes. */
.border-input input,
.border-input textarea,
.border-input select,
.contact-widget input,
.contact-widget textarea,
.contact-widget select {
  background: transparent !important;
  color: var(--arc-paper) !important;
  border: 1px solid var(--arc-dim) !important;
  border-radius: 0 !important;
}
.contact-widget input::placeholder,
.contact-widget textarea::placeholder {
  color: rgb(243 237 237 / 0.35);
}
/* A green border alone was the whole focus signal here, and it was dropped on
   `:focus`, so a keyboard run through the booking form had nothing to follow on
   a dark ground. The border still moves; the ring comes back for the keyboard. */
.contact-widget input:focus,
.contact-widget textarea:focus,
.contact-widget select:focus {
  border-color: var(--arc-green) !important;
  outline: none;
}
.contact-widget input:focus-visible,
.contact-widget textarea:focus-visible,
.contact-widget select:focus-visible {
  outline: 2px solid var(--arc-cyan);
  outline-offset: 2px;
}
.check-input input + label {
  color: var(--arc-paper);
}

/* ---- the season, set the way the stories set it -------------------- */
.season-widget { background: var(--arc-ink); padding: 96px 0; }
@media (max-width: 767px) { .season-widget { padding: 56px 0; } }

.programme-head { margin-bottom: 34px; }
.programme-head h2 { margin: 0 0 8px; }
.programme-season {
  margin: 0 0 6px;
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--arc-cyan);
}
.programme-strap {
  margin: 0;
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--arc-paper);
  opacity: 0.7;
}

.programme {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--arc-dim);
}
.programme-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--arc-dim);
  opacity: 0;
  transform: translateY(6px);
  /* One transition per row, staggered by the row's own index in CSS rather than
     by a timer per row: a chain of setTimeouts arrived unevenly and the list
     read as stuttering. */
  transition: opacity 520ms ease, transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--row, 0) * 55ms);
}
.programme.is-in .programme-row { opacity: 1; transform: none; }
.programme-row[hidden] { display: none; }

/* date and its note on the left, then the leader, then the name hard against
   the right edge -- the order the calendar story reads in */
.programme-when {
  flex: 0 0 auto;
  min-width: 8.5em;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.programme-date {
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: 0.16em;
  color: var(--arc-green);
}
.programme-note {
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arc-cyan);
}
.programme-leader {
  flex: 1 1 auto;
  align-self: center;
  height: 1px;
  border-bottom: 1px dotted var(--arc-dim);
}
.programme-who {
  /* no min-width: the name hugs the right edge and the dot leader runs all the
     way to it. It used to sit in a 9em box, which the genre column filled; with
     the genre gone a short name left a gap between the dots and itself. */
  flex: 0 0 auto;
  min-width: 0;
  text-align: right;
  font-family: "Arcade Display", Arial, sans-serif;
  font-size: clamp(2.2rem, 3vw, 3.4rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--arc-paper);
}
.programme-support {
  display: block;
  margin-top: 4px;
  font-size: 0.4em;
  line-height: 1.1;
  letter-spacing: 0.06em;
  color: var(--arc-green);
}
/* a week with no artist billed: it is on the calendar, it just has no page */
.programme-row.is-blank { cursor: default; }
.programme-row.is-blank .programme-who { color: var(--arc-dim); }
@media (max-width: 767px) {
  .programme-row { flex-wrap: wrap; gap: 6px 14px; }
  .programme-leader { display: none; }
  .programme-when { min-width: 0; flex-direction: row; align-items: baseline; gap: 10px; }
  .programme-who { width: 100%; min-width: 0; text-align: left; }
}

/* The tube drops a line now and then. It used to jump in steps and slice itself
   with clip-path, which read as a stutter rather than as a screen; now it is a
   short flicker of colour and a hair of movement. */
.is-glitch { animation: glitch 220ms ease-out 1; }
.programme-row.is-glitch .programme-who { color: var(--arc-cyan); }
.programme-row.is-glitch .programme-leader { border-bottom-color: var(--arc-green); }
@keyframes glitch {
  0% { opacity: 1; transform: translateX(0); }
  35% { opacity: 0.55; transform: translateX(-1px); }
  70% { opacity: 1; transform: translateX(1px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* ---- the tube ------------------------------------------------------
   Scanlines, vignette and a hair of flicker over the whole page, at the
   values the stories use (FX in arcade-story-maker's tokens). The photos
   are dithered to the same tube at build time.
   -------------------------------------------------------------------- */
.crt {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
}
.crt::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background-image: repeating-linear-gradient(
    to bottom,
    #000 0px,
    #000 1px,
    transparent 1px,
    transparent 3px
  );
  animation: crt-flicker 0.14s steps(2) infinite;
}
.crt::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(120% 100% at 50% 50%, transparent 55%, rgb(0 0 0 / 0.55) 100%);
}
@keyframes crt-flicker {
  0%, 100% { opacity: 0.28; }
  50% { opacity: 0.25; }
}

/* Each photo gets the tube's own edges: phosphor bloom in, black out. */
.image.image-absolute::after,
.hero-multi .slide .image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(110% 90% at 50% 50%, transparent 50%, rgb(0 0 0 / 0.7) 100%);
}

/* ---- the readout ---------------------------------------------------- */
.arcade-terminal-widget {
  background: var(--arc-ink);
  padding: 90px 0;
}
@media (max-width: 767px) {
  .arcade-terminal-widget { padding: 50px 0; }
}

.terminal {
  position: relative;
  border: 1px solid var(--arc-dim);
  padding: 26px clamp(16px, 4vw, 48px) 30px;
  background:
    radial-gradient(120% 130% at 50% 20%, rgb(0 255 1 / 0.06) 0%, transparent 60%),
    var(--arc-ink);
}

/* Pips in the corners, the way the stories mark a panel. */
.terminal-pip {
  position: absolute;
  width: 9px;
  height: 9px;
  background: var(--arc-green);
}
.terminal-pip--tl { top: -5px; left: -5px; }
.terminal-pip--tr { top: -5px; right: -5px; }
.terminal-pip--bl { bottom: -5px; left: -5px; }
.terminal-pip--br { bottom: -5px; right: -5px; }

.terminal-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: "Arcade Body", Arial, sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arc-dim);
  border-bottom: 1px solid var(--arc-dim);
  padding-bottom: 12px;
}
.terminal-head .terminal-season { color: var(--arc-cyan); }

.terminal-screen {
  display: grid;
  grid-template-columns: 160px 1fr 160px;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  min-height: 300px;
  padding: 34px 0 26px;
}
@media (max-width: 991px) {
  .terminal-screen { grid-template-columns: 1fr; min-height: 200px; }
  .terminal-rail { display: none; }
}

.terminal-rail {
  font-family: "Arcade Body", Arial, sans-serif;
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  line-height: 1.7;
  color: var(--arc-dim);
  white-space: pre;
  overflow: hidden;
}
.terminal-rail .hex-row.is-live { color: var(--arc-green); }
.terminal-rail--right { justify-self: end; }
.terminal-rail svg { display: block; width: 160px; height: 120px; }
.terminal-rail svg .wave-grid { stroke: var(--arc-dim); stroke-width: 1; }
.terminal-rail svg .wave-line { stroke: var(--arc-green); stroke-width: 2; fill: none; }

/* The message itself: one line at a time, typed, in the club's green. */
.terminal-log {
  text-align: center;
  font-family: "Arcade Display", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 4.4vw, 4.4rem);
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--arc-green);
  text-shadow: 0 0 20px rgb(0 255 1 / 0.45);
  min-height: 2.6em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25em;
}
.terminal-log .log-line { margin: 0; }
.terminal-log .log-line--past { color: var(--arc-dim); text-shadow: none; }
.terminal-log .cursor {
  display: inline-block;
  width: 0.5em;
  height: 0.82em;
  vertical-align: -0.08em;
  margin-left: 0.08em;
  background: var(--arc-green);
  animation: cursor-blink 1s steps(2) infinite;
}
@keyframes cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* A squad of invaders walking the panel's bottom edge, in steps. */
.terminal-invaders {
  height: 24px;
  background-image: url(/uploads/invader.svg);
  background-repeat: repeat-x;
  background-size: auto 18px;
  background-position: 0 center;
  opacity: 0.45;
  animation: squad-walk 1.6s steps(4) infinite;
}
@keyframes squad-walk {
  from { background-position-x: 0; }
  to { background-position-x: 36px; }
}

.terminal-copy {
  border-top: 1px solid var(--arc-dim);
  margin-top: 24px;
  padding-top: 26px;
  max-width: 900px;
}
.terminal-copy h2 { margin: 0 0 14px; }
.terminal-copy p { margin: 0; color: var(--arc-paper); opacity: 0.86; }

.terminal-data {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--arc-dim);
  border: 1px solid var(--arc-dim);
  margin: 26px 0 0;
  padding: 0;
}
@media (max-width: 767px) {
  .terminal-data { grid-template-columns: 1fr; }
}
.terminal-data .data-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px clamp(16px, 2.4vw, 28px) 26px;
  background: var(--arc-ink);
}
.terminal-data dt {
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--arc-green);
}
/* Set at heading scale on purpose: the address and the doors are the two
   things a stranger came for, and they were reading as a caption. */
.terminal-data dd {
  margin: 0;
  font-family: "Arcade Display", Arial, sans-serif;
  font-size: clamp(2rem, 2.1vw, 2.6rem);
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--arc-paper);
}
.terminal-data dd a {
  color: var(--arc-paper);
  text-decoration: none;
  border-bottom: 1px solid var(--arc-dim);
}
body.nonTouchDevice .terminal-data dd a:hover { border-bottom-color: var(--arc-cyan); }

/* The machine stops for anyone who asked it to. */
@media (prefers-reduced-motion: reduce) {
  .crt::before,
  .terminal-invaders,
  .terminal-log .cursor {
    animation: none;
  }
}


/* ---- the hero: a tube warming up, then a cabinet --------------------
   No photograph. The club's own mark comes up out of a boot log, and the
   cabinet under it is playable.
   -------------------------------------------------------------------- */
.arcade-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--arc-ink);
  overflow: hidden;
}
/* the glow the tube throws before anything is on it */
.arcade-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, rgb(0 255 1 / 0.09) 0%, transparent 62%);
  pointer-events: none;
}
/* one bright line down the screen as it comes up */
.arcade-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 42vh;
  top: -42vh;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgb(0 255 1 / 0.16), transparent);
}
.arcade-hero.is-booted::after {
  animation: tube-sweep 900ms ease-out 1;
}
@keyframes tube-sweep {
  from { top: -42vh; }
  to { top: 100%; }
}

.arcade-hero-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px 24px 80px;
  text-align: center;
}

.arcade-hero .boot-log {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  margin: 0;
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(1.4rem, 2vw, 2rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--arc-green);
}
.arcade-hero.is-booted .boot-log { display: none; }

.arcade-hero-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

/* Everything the boot hands over to, in the order it arrives. */
.arcade-hero-kicker,
.arcade-attract,
.arcade-hero-rule,
.arcade-hero .arcade-start {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 460ms ease, transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
}
.arcade-hero.is-booted .arcade-hero-kicker { opacity: 1; transform: none; transition-delay: 40ms; }
.arcade-hero.is-booted .arcade-attract { opacity: 1; transform: none; transition-delay: 180ms; }
.arcade-hero.is-booted .arcade-hero-rule { opacity: 1; transform: none; transition-delay: 420ms; }
.arcade-hero.is-booted .arcade-start { opacity: 1; transform: none; transition-delay: 620ms; }

.arcade-hero-kicker {
  margin: 0;
  text-shadow: 0 0 14px rgb(0 255 1 / 0.55);
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--arc-green);
}

/* The name is set once, in the header's own mark. The hero shows the cabinet
   playing itself instead of saying it a second time at 150px. The h1 stays in
   the markup, off-screen, so the page keeps its heading. */
.visuallyhidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.arcade-attract {
  display: block;
  width: min(1000px, 88vw);
  height: clamp(260px, 40vh, 440px);
  /* clear of the header's mark: the formation was reading as part of it */
  margin-top: clamp(30px, 6vh, 70px);
}

.arcade-hero-rule {
  width: min(420px, 60vw);
  height: 1px;
  background: var(--arc-dim);
}

.arcade-hero-strap {
  margin: 0;
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--arc-paper);
  opacity: 0.75;
}

/* INSERT COIN: the one thing on the page that blinks. */
.arcade-hero .arcade-start {
  margin-top: 8px;
  border: 1px solid var(--arc-green);
  background: transparent;
  color: var(--arc-green);
  font-family: "Arcade Display", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 2.6vw, 2.8rem);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 34px 14px;
  cursor: pointer;
}
.arcade-hero.is-booted .arcade-start span { animation: coin-blink 1.4s steps(2) infinite 1.2s; }
.arcade-hero .arcade-start:hover,
.arcade-hero .arcade-start:focus-visible {
  background: rgb(0 255 1 / 0.14);
  border-color: var(--arc-cyan);
  color: var(--arc-cyan);
}
.arcade-hero .arcade-start:hover span { animation: none; }
@keyframes coin-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.35; }
}

.arcade-hero.is-playing .arcade-hero-inner { visibility: hidden; }
.arcade-hero.is-playing .scroll-down { display: none; }

/* ---- the cabinet ---------------------------------------------------- */
.cabinet {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  background: var(--arc-ink);
}
.cabinet[hidden] { display: none; }
.cabinet canvas {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display: block;
}
.cabinet-hud,
.cabinet-pads {
  display: flex;
  justify-content: center;
  gap: clamp(14px, 4vw, 46px);
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--arc-green);
}
/* One bar, in flow. Exit used to be absolute and sat on top of the lives. */
.cabinet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 118px clamp(14px, 3vw, 24px) 12px;
  border-bottom: 1px solid var(--arc-dim);
}
.cabinet-hud {
  flex: 1 1 auto;
  justify-content: flex-start;
  gap: clamp(12px, 3vw, 40px);
  min-width: 0;
  flex-wrap: wrap;
}
.cabinet-pads { padding: 14px 20px 26px; }
.cabinet-pads button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  padding: 14px 18px;
  border: 1px solid var(--arc-dim);
  background: transparent;
  color: var(--arc-green);
  font-family: "Arcade Display", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.cabinet-pads button:active { background: var(--arc-dim); }
@media (hover: hover) and (min-width: 992px) {
  .cabinet-pads { display: none; }
}

.cabinet-quit {
  flex: 0 0 auto;
  border: 1px solid var(--arc-dim);
  background: transparent;
  color: var(--arc-green);
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
}

.cabinet-over {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: rgb(0 0 0 / 0.82);
  text-align: center;
}
.cabinet-over[hidden] { display: none; }
.cabinet-over-title {
  margin: 0;
  font-family: "Arcade Display", Arial, sans-serif;
  font-size: clamp(3.6rem, 8vw, 8rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--arc-green);
  text-shadow: 0 0 26px rgb(0 255 1 / 0.5);
}
.cabinet-over-score {
  margin: 0;
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--arc-paper);
}
.cabinet-over button {
  border: 1px solid var(--arc-green);
  background: transparent;
  color: var(--arc-green);
  font-family: "Arcade Display", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.2rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 28px 12px;
  cursor: pointer;
}
.cabinet-over button:hover {
  background: rgb(0 255 1 / 0.14);
  border-color: var(--arc-cyan);
  color: var(--arc-cyan);
}

@media (prefers-reduced-motion: reduce) {
  .arcade-hero::after,
  .arcade-hero.is-booted .arcade-start span {
    animation: none;
  }
  .arcade-hero-kicker,
  .arcade-attract,
  .arcade-hero-rule,
  .arcade-hero .arcade-start {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* The field the hero type sits on: the poster mesh, rolling. */
.hero-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0.75;
  pointer-events: none;
}
.arcade-hero.is-playing .hero-field { display: none; }

/* Phosphor blooms. Only the green does: white type under a glow reads as a
   printing fault, which is what the first pass of the hero looked like. */
.terminal-head .terminal-season,
.terminal-data dt,
.season-widget dl .dl-row dt,
.subtitle,
dt.subtitle,
h2 {
  text-shadow: 0 0 12px rgb(0 255 1 / 0.35);
}
.bg-colour-one h2,
.map-widget h2,
.contact-widget h2 {
  text-shadow: 0 0 16px rgb(0 255 1 / 0.4);
}


/* The focus ring the browser draws by default is red here, on a page with no
   red in it. */
/* The browser's own ring is red on this page, and it draws it on click as well
   as on keyboard focus. */
button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
  outline-color: var(--arc-cyan);
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
  outline: none;
}
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--arc-cyan);
  outline-offset: 2px;
}


/* The sweep over the club's position. Written, not filmed: the reference clip
   was watermarked and had a red target in it. */
.acf-map.has-radar { position: relative; }
.acf-map .radar {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}


/* The moving twin of each poster, laid over the still. */
.art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .programme-row { opacity: 1; transform: none; transition: none; }
  .is-glitch { animation: none; }
}


/* ---- the season drawer ----------------------------------------------
   The theme tiles a pattern behind its menus (--menuspattern). On this site
   the menu is the season, so it gets the same black ground and the same
   rhythm the programme has.
   -------------------------------------------------------------------- */
.drawer {
  background-color: var(--arc-ink) !important;
  background-image: none !important;
}
.drawer .menus ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--arc-dim);
}
.drawer .menus li {
  border-bottom: 1px solid var(--arc-dim);
}
.drawer .menus li a {
  display: block;
  padding: 16px 0;
  font-family: "Arcade Display", Arial, sans-serif;
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--arc-paper);
  text-decoration: none;
}
.drawer .menus li.subtitle {
  border-bottom: 0;
}
.drawer .menus li.subtitle a {
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: 0.24em;
  color: var(--arc-green);
  padding-bottom: 10px;
}
.drawer .menus li a .menu-item-description {
  display: block;
  margin-top: 6px;
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: 0.18em;
  color: var(--arc-green);
}
body.nonTouchDevice .drawer .menus li a:hover { color: var(--arc-cyan) !important; }


/* ---- the two footer calls to action ---------------------------------
   These are the only blocks with type sitting ON a graphic, and the blinds
   poster was winning. The art dims, a flat scrim goes over it, and the type
   sits above both.
   -------------------------------------------------------------------- */
.inline-ctas-widget .image .art { opacity: 0.45; }
.inline-ctas-widget .image::after {
  background-image:
    linear-gradient(rgb(0 0 0 / 0.66), rgb(0 0 0 / 0.66)),
    radial-gradient(110% 90% at 50% 50%, transparent 40%, rgb(0 0 0 / 0.8) 100%);
}
.inline-ctas-widget .text {
  position: relative;
  z-index: 3;
}
.inline-ctas-widget .text h2 {
  text-shadow: 0 2px 18px rgb(0 0 0 / 0.9);
}
.inline-ctas-widget .button,
.inline-ctas-widget .button span {
  border-color: var(--arc-green);
  background: rgb(0 0 0 / 0.72);
  color: var(--arc-green) !important;
}
body.nonTouchDevice .inline-ctas-widget a:hover .button,
body.nonTouchDevice .inline-ctas-widget a:hover .button span {
  background: rgb(0 255 1 / 0.16);
  border-color: var(--arc-cyan);
  color: var(--arc-cyan) !important;
}


/* ---- one night: the story's own furniture, on a wide stage -----------
   Ported from arcade-story-maker's window-stack scene: a cascade of wireframe
   windows, each holding a crop of the dithered portrait, drifting a few pixels
   off their own phase, with the billing and the data rows under them.
   -------------------------------------------------------------------- */
.night-stage {
  position: relative;
  min-height: 92vh;
  overflow: hidden;
  background: var(--arc-ink);
  isolation: isolate;
}

/* One field behind every night, and it is the globe: the invader poster was
   reading as a smear behind the windows. */
.night-stage .art { z-index: 0; opacity: 0.55; }
.stack { position: absolute; inset: 0; z-index: 1; }
.stack-window {
  position: absolute;
  border: 2px solid var(--arc-green);
  background: var(--arc-ink);
  display: flex;
  flex-direction: column;
  animation: window-drift var(--drift, 8s) ease-in-out var(--delay, 0s) infinite alternate;
}
.stack-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 6px;
  background: var(--arc-green);
  color: var(--arc-ink);
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.06em;
  flex: 0 0 auto;
}
.stack-crop {
  flex: 1 1 auto;
  background-repeat: no-repeat;
  background-color: var(--arc-ink);
}
@keyframes window-drift {
  from { transform: translate(-7px, -4px); }
  to { transform: translate(7px, 5px); }
}

/* the instrument furniture around the picture */
.stage-chrome {
  position: absolute;
  inset: 26px 26px 22px;
  z-index: 3;
  pointer-events: none;
  border-top: 1px solid var(--arc-dim);
  border-bottom: 1px solid var(--arc-dim);
}
.stage-serial,
.stage-season {
  position: absolute;
  top: -22px;
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.stage-serial { left: 0; color: var(--arc-dim); }
.stage-season { right: 0; color: var(--arc-cyan); }

/* the season, running up the right edge */
.stage-ticker {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 8px;
  z-index: 3;
  width: 22px;
  overflow: hidden;
  mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
  pointer-events: none;
}
.ticker-run {
  display: flex;
  flex-direction: column;
  gap: 34px;
  animation: ticker 46s linear infinite;
}
.ticker-run span {
  writing-mode: vertical-rl;
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: 0.24em;
  color: var(--arc-dim);
  white-space: nowrap;
}
@keyframes ticker {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

/* the billing, on the scrim the story puts under its own copy */
.stage-copy {
  position: relative;
  z-index: 4;
  padding: 62vh clamp(20px, 5vw, 76px) 70px;
  max-width: 900px;
}
.night-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: linear-gradient(to top, rgb(0 0 0 / 0.95) 22%, rgb(0 0 0 / 0) 62%);
}
.night-kicker {
  margin: 0 0 14px;
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--arc-green);
  text-shadow: 0 0 14px rgb(0 255 1 / 0.5);
}
.night-stage h1 {
  margin: 0;
  font-family: "Arcade Display", Arial, sans-serif;
  font-size: clamp(3.6rem, 9.5vw, 10rem);
  line-height: 0.88;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--arc-paper);
}
/* The support act, at two fifths of the headline, the ratio the stories use
   (SUPPORT_SCALE in src/blocks/support-billing.ts). */
.night-support {
  margin: 6px 0 0;
  font-family: "Arcade Display", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 3.8vw, 4rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--arc-green);
}

.night-when {
  margin: 16px 0 0;
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(1.3rem, 1.7vw, 1.7rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--arc-green);
}
.stage-rows {
  margin: 26px 0 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 44px;
}
.stage-row { display: flex; align-items: baseline; gap: 10px; }
.stage-row dt {
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--arc-dim);
}
.stage-row dd {
  margin: 0;
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arc-cyan);
}

/* the squad walking the stage's own floor */
.stage-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  height: 22px;
  background-image: url(/uploads/invader.svg);
  background-repeat: repeat-x;
  background-size: auto 16px;
  opacity: 0.4;
  animation: squad-walk 1.6s steps(4) infinite;
}

@media (max-width: 900px) {
  .stage-copy { padding-top: 54vh; }
  .stage-ticker { display: none; }
}

/* the delivered render, in a band of its own rather than a thumbnail */
.night-story-band { background: var(--arc-ink); padding: 80px 0 20px; }
.band-label {
  margin: 0 0 20px;
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--arc-green);
}
.night-story {
  position: relative;
  margin: 0;
  width: min(360px, 74vw);
  border: 1px solid var(--arc-dim);
  background: var(--arc-ink);
  /* the picture is the sound switch as much as the button is */
  cursor: pointer;
}
.night-story video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--arc-ink);
}
.story-sound {
  position: absolute;
  left: 10px;
  bottom: 10px;
  border: 1px solid var(--arc-green);
  background: rgb(0 0 0 / 0.72);
  color: var(--arc-green);
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 12px;
  cursor: pointer;
}
.story-sound[aria-pressed="true"] { border-color: var(--arc-cyan); color: var(--arc-cyan); }

.night-body { background: var(--arc-ink); padding: 60px 0 100px; }
.night-data {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--arc-dim);
  border: 1px solid var(--arc-dim);
  margin: 0;
}
@media (max-width: 767px) { .night-data { grid-template-columns: 1fr; } }
.night-data .data-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px clamp(16px, 2.4vw, 28px) 24px;
  background: var(--arc-ink);
}
.night-data dt {
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--arc-green);
}
.night-data dd {
  margin: 0;
  font-family: "Arcade Display", Arial, sans-serif;
  font-size: clamp(1.9rem, 2.1vw, 2.4rem);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--arc-paper);
}
.night-nav {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--arc-dim);
  margin-top: 46px;
  padding-top: 22px;
}
.night-nav a {
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--arc-green);
  text-decoration: none;
}
.night-nav a[hidden] { visibility: hidden; }

a.programme-row { text-decoration: none; transition: background 200ms ease, padding-left 200ms ease; }
body.nonTouchDevice a.programme-row:hover { background: rgb(0 255 1 / 0.06); padding-left: 14px; }
body.nonTouchDevice a.programme-row:hover .programme-who { color: var(--arc-green) !important; }

@media (prefers-reduced-motion: reduce) {
  .stack-window, .ticker-run, .stage-band { animation: none; }
}

/* ---- the small print ------------------------------------------------- */
.legal-widget { background: var(--arc-ink); padding: 150px 0 110px; }
.legal-kicker {
  margin: 0 0 12px;
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--arc-green);
}
.legal-widget h1 {
  margin: 0;
  font-family: "Arcade Display", Arial, sans-serif;
  font-size: clamp(3.4rem, 7vw, 6.4rem);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--arc-paper);
}
.legal-updated {
  margin: 14px 0 44px;
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--arc-green);
  opacity: 0.7;
}
.legal-body { max-width: 760px; }
.legal-body h2 { margin: 42px 0 12px; }
.legal-body p { margin: 0 0 14px; color: var(--arc-paper); opacity: 0.88; }
.legal-body a { color: var(--arc-green); }


/* No button on this site fills solid: the tube's scanlines run over the top of
   it and turn a dark label on phosphor into mush. They light up instead. */
.button,
.button span,
.footer-button,
.footer-button span {
  background: transparent !important;
  border: 1px solid var(--arc-green) !important;
  color: var(--arc-green) !important;
}
.button span,
.footer-button span { border: 0 !important; }
body.nonTouchDevice .button:hover,
body.nonTouchDevice .button:hover span,
body.nonTouchDevice .footer-button:hover,
body.nonTouchDevice .footer-button:hover span {
  background: rgb(0 255 1 / 0.14) !important;
  border-color: var(--arc-cyan) !important;
  color: var(--arc-cyan) !important;
}
body.nonTouchDevice .button:hover span,
body.nonTouchDevice .footer-button:hover span { background: transparent !important; }


/* The cabinet's own caption and its remaining lives. */
.cabinet-hint {
  margin: 0;
  padding: 0 20px 20px;
  text-align: center;
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--arc-dim);
}
.cabinet-hud .hud-lives {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.cabinet-hud .hud-lives svg { display: block; }
.cabinet:focus,
.cabinet:focus-visible { outline: none; }


/* ---- the night's story ----------------------------------------------
   The delivered 9:16 render, in its own frame rather than cropped into a
   background: the composition has a safe area and a wordmark, and a
   full-bleed crop throws both away. Muted until asked, like every autoplay.
   -------------------------------------------------------------------- */
.night-hero.has-story .night-hero-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: clamp(24px, 5vw, 80px);
}
@media (max-width: 900px) {
  .night-hero.has-story .night-hero-inner {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .night-story { order: -1; margin: 0 auto 28px; }
}

.night-story {
  position: relative;
  margin: 0;
  width: min(300px, 62vw);
  border: 1px solid var(--arc-dim);
  background: var(--arc-ink);
}
.night-story video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--arc-ink);
}
.story-sound {
  position: absolute;
  left: 10px;
  bottom: 10px;
  border: 1px solid var(--arc-green);
  background: rgb(0 0 0 / 0.72);
  color: var(--arc-green);
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 12px;
  cursor: pointer;
}
.story-sound[aria-pressed="true"] {
  border-color: var(--arc-cyan);
  color: var(--arc-cyan);
}


/* ---- the one action the page is asking for --------------------------
   It was set as a text link among other text links, which is what made it
   disappear. It gets the display face, a box, and the bloom.
   -------------------------------------------------------------------- */
.cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border: 2px solid var(--arc-green);
  padding: 16px 30px 14px;
  font-family: "Arcade Display", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 2.6vw, 2.8rem);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--arc-green) !important;
  text-decoration: none;
  box-shadow: 0 0 26px rgb(0 255 1 / 0.22);
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.cta-primary span {
  font-family: inherit !important;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit !important;
}
.cta-primary .fa-icon svg { height: 1.4rem; }
.cta-primary .fa-icon svg * { fill: var(--arc-green); }
body.nonTouchDevice .cta-primary:hover {
  background: rgb(0 255 1 / 0.14);
  border-color: var(--arc-cyan);
  color: var(--arc-cyan) !important;
  box-shadow: 0 0 34px rgb(41 255 227 / 0.3);
}
body.nonTouchDevice .cta-primary:hover span { color: var(--arc-cyan) !important; }
body.nonTouchDevice .cta-primary:hover .fa-icon svg * { fill: var(--arc-cyan); }


/* ---- the questions ---------------------------------------------------- */
.faq-widget { background: var(--arc-ink); padding: 90px 0; }
.faq-widget h2 { margin: 0 0 40px; }
.faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--arc-dim);
  border: 1px solid var(--arc-dim);
}
@media (max-width: 767px) { .faq-list { grid-template-columns: 1fr; } }
.faq-item {
  background: var(--arc-ink);
  padding: 26px clamp(18px, 2.4vw, 30px) 28px;
}
.faq-item h3 {
  margin: 0 0 10px;
  font-family: "Arcade Display", Arial, sans-serif;
  font-size: clamp(1.9rem, 2vw, 2.3rem);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--arc-green);
}
.faq-item p { margin: 0; color: var(--arc-paper); opacity: 0.86; }


/* ---- the group's other rooms ---------------------------------------- */
.footer-group {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  padding-left: clamp(18px, 3vw, 40px);
  border-left: 1px solid var(--arc-dim);
}
@media (max-width: 767px) {
  .footer-group {
    width: 100%;
    margin-top: 22px;
    padding: 20px 0 0;
    border-left: 0;
    border-top: 1px solid var(--arc-dim);
    flex-wrap: wrap;
    gap: 16px 26px;
  }
}
.footer-group-label {
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--arc-dim);
}
.sister { display: inline-flex; align-items: center; text-decoration: none; }
.sister-mark { display: block; color: var(--arc-paper); opacity: 0.55; transition: opacity 220ms ease, color 220ms ease; }
.sister-mark svg { display: block; height: 22px; width: auto; }
body.nonTouchDevice a.sister:hover .sister-mark { opacity: 1; color: var(--arc-green); }


/* What the form says when the endpoint refuses it. */
.enquiry-error {
  margin: 18px 0 0;
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  color: var(--arc-cyan);
}
.enquiry-error:empty { display: none; }


@media (max-width: 767px) {
  .cabinet-top { padding-top: 96px; }
  .cabinet-hud { font-size: 1.15rem; letter-spacing: 0.12em; }
}


/* ---- nothing drags sideways ------------------------------------------
   The theme parks each closed drawer one whole screen to the right, with
   `position: fixed` and `transform: translate(100%, 0)`. That is what could be
   dragged into: a screen width of empty black.

   Clipping the root does not touch it. `overflow` never clips a `position:
   fixed` descendant -- a fixed box is laid out against the viewport and escapes
   ancestor clipping unless the ancestor is itself a containing block for fixed
   positioning. Which is why the first two attempts at this changed nothing on a
   phone while measuring clean in a desktop engine.

   So the box stops moving and its contents move instead. The drawer sits over
   the viewport at all times, invisible when closed, and `.drawer-inner` slides
   inside it -- the drawer already has `overflow: auto`, so the slide is clipped
   by its own box and nothing ever extends past the screen. The animation is the
   same one, just one element further in.
   -------------------------------------------------------------------- */
.drawer {
  transform: none !important;
  max-width: 100%;
}
.drawer .drawer-inner {
  transition: transform 0.75s cubic-bezier(0.83, 0, 0.17, 1);
  will-change: transform;
}
.drawer.right-side:not(.show) .drawer-inner { transform: translateX(101%); }
.drawer.left-side:not(.show) .drawer-inner { transform: translateX(-101%); }
.drawer.show .drawer-inner { transform: none; }

/* Belt and braces for anything else that reaches past the edge. */
html,
body {
  overflow-x: clip;
  max-width: 100%;
}
/* An anchor in the menu jumped. It glides now, and stops clear of the header
   rather than under it. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: clamp(80px, 12vh, 120px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}
#wrap,
main,
.night-stage,
.arcade-hero {
  max-width: 100%;
  overflow-x: clip;
}

/* The corner pips sat 5px outside their own box, which is 5px of overflow on a
   narrow screen. Inside on phones. */
@media (max-width: 767px) {
  .terminal-pip--tl { top: 0; left: 0; }
  .terminal-pip--tr { top: 0; right: 0; }
  .terminal-pip--bl { bottom: 0; left: 0; }
  .terminal-pip--br { bottom: 0; right: 0; }
}


/* ---- the season drawer, laid out like the schedule scene ------------- */
.drawer .drawer-inner .top {
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
}
/* the theme pins the drawer's social block absolutely, right where the close
   button sits, so the two drew on top of each other */
.drawer .drawer-inner .top .social-links {
  position: static !important;
  order: 2;
  flex: 0 0 auto;
  /* it was touching the close button */
  margin: 0 clamp(16px, 5vw, 28px) 0 auto;
}
.drawer .drawer-inner .top .social-links .fa-icon svg,
.drawer .drawer-inner .top .social-links svg { height: 20px; width: auto; }
.drawer-mark {
  display: block;
  flex: 0 1 auto;
  text-decoration: none;
  transition: opacity 200ms ease;
}
body.nonTouchDevice .drawer-mark:hover { opacity: 0.75; }
.drawer-mark svg { display: block; height: 40px; width: auto; fill: var(--arc-green); }
.drawer-head { margin: 26px 0 14px; border-bottom: 1px solid var(--arc-dim); padding-bottom: 12px; }
.drawer-calendar {
  margin: 0 0 6px;
  font-family: "Arcade Display", Arial, sans-serif;
  font-size: 2.4rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--arc-paper);
}
.drawer-season {
  margin: 0;
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--arc-cyan);
}
/* the theme draws its close cross in the ink colour, which on black is a
   cross nobody can see */
.drawer .close-mob-menu-btn {
  order: 3;
  width: 40px;
  height: 40px;
  border: 1px solid var(--arc-dim);
  flex: 0 0 auto;
}
.drawer .close-mob-menu-btn:before,
.drawer .close-mob-menu-btn:after {
  background: var(--arc-paper) !important;
  width: 20px !important;
  height: 2px !important;
}
body.nonTouchDevice .drawer .close-mob-menu-btn:hover { border-color: var(--arc-cyan); }
body.nonTouchDevice .drawer .close-mob-menu-btn:hover:before,
body.nonTouchDevice .drawer .close-mob-menu-btn:hover:after { background: var(--arc-cyan) !important; }

/* ---- the footer mark had no ceiling on a phone ---------------------- */
footer .footer-bottom .footer-logo .logo svg,
footer .footer-bottom .footer-logo .logo i svg {
  height: 4.6rem;
  width: auto;
  max-width: 62vw;
  fill: var(--arc-green);
}
@media (max-width: 767px) {
  footer .footer-bottom .footer-logo .logo svg { height: 3.4rem; }
  .footer-bottom { flex-wrap: wrap; row-gap: 18px; }
}

/* ---- the story, at a size worth watching ---------------------------- */
.night-story { width: min(520px, 92vw); }
@media (max-width: 767px) {
  .night-story-band { padding-top: 56px; }
  .night-story { width: 100%; }
}
.story-sound {
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  font-size: 1.3rem;
  padding: 12px 20px;
}

/* ---- the night stage on a phone -------------------------------------
   The cascade started at the top of the stage and ran straight through the
   header's mark, with the serial line printing across it.
   -------------------------------------------------------------------- */
@media (max-width: 900px) {
  .stage-chrome .stage-serial,
  .stage-chrome .stage-season { display: none; }
  .night-stage .stack { top: 86px; }
  .stage-chrome { inset: 78px 14px 18px; }
}


/* The way out when the mailbox is not wired. */
.enquiry-fallback {
  margin: 26px 0 0;
  padding: 22px;
  border: 1px solid var(--arc-dim);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.enquiry-fallback p {
  margin: 0;
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--arc-paper);
}
.enquiry-fallback-link {
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 1.2rem;
  color: var(--arc-green);
}


/* ---- one animation at a time on a phone ------------------------------
   The feature widget stacks its two graphics when the columns collapse, so a
   phone got the mesh and the globe one under the other, both moving. The mesh
   is the bigger statement; the globe steps aside.
   -------------------------------------------------------------------- */
@media (max-width: 900px) {
  .fullscreen-image-text-widget .text-area > .image-wrap { display: none; }
}


/* ---- the header's menu ----------------------------------------------
   Where Raspoutine kept a locations switcher. A club with one room has the
   sections of its own site there instead.
   -------------------------------------------------------------------- */
.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(24px, 2.8vw, 52px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: block;
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--arc-green);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}
body.nonTouchDevice .site-nav a:hover {
  color: var(--arc-cyan) !important;
  border-bottom-color: var(--arc-cyan);
}
/* the last one is the ask, so it reads as one */
.site-nav li:last-child a {
  border: 1px solid var(--arc-green);
  padding: 11px 20px;
  margin-left: clamp(4px, 1vw, 16px);
}
body.nonTouchDevice .site-nav li:last-child a:hover {
  background: rgb(0 255 1 / 0.14);
  border-color: var(--arc-cyan);
}

/* ---- the same list at the top of the drawer -------------------------- */
.drawer-sections ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--arc-dim);
}
.drawer-sections li { border-bottom: 1px solid var(--arc-dim); }
.drawer-sections a {
  display: block;
  padding: 14px 0;
  font-family: "Arcade Display", Arial, sans-serif;
  font-size: clamp(1.9rem, 4.6vw, 2.4rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--arc-paper);
  text-decoration: none;
}
body.nonTouchDevice .drawer-sections a:hover { color: var(--arc-green) !important; }
.drawer-nights { list-style: none; margin: 0; padding: 0; }


/* The sticky bar was a hairline with the menu jammed into it. */
.header.sticky-fixed .container-fluid {
  padding-top: 18px;
  padding-bottom: 18px;
}
.header .right-nav-wrap { gap: clamp(16px, 2vw, 34px); }


/* ---- the dim green was too dim for type -----------------------------
   #0a3d0b is right for a rule or a grid line and wrong for a word: the labels
   on a night's data rows, the serial, and the cabinet's help line were all
   sitting just above the black.
   -------------------------------------------------------------------- */
.stage-row dt {
  color: var(--arc-green) !important;
  opacity: 0.8;
}
.stage-serial {
  color: var(--arc-green) !important;
  opacity: 0.55;
}
.cabinet-hint {
  color: var(--arc-green) !important;
  opacity: 0.7;
}
.terminal-head .terminal-serial {
  color: var(--arc-green);
  opacity: 0.6;
}
.programme-row.is-blank .programme-who {
  color: var(--arc-paper) !important;
  opacity: 0.45;
}


/* ---- the footer, as a panel -----------------------------------------
   Cells on a hairline grid, the same furniture the readout uses, carrying what
   someone at the bottom of the page is actually after.
   -------------------------------------------------------------------- */
footer .footer-top { padding: 0 0 clamp(40px, 6vh, 70px); }
.footer-panel {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1px;
  background: var(--arc-dim);
  border: 1px solid var(--arc-dim);
}
@media (max-width: 991px) { .footer-panel { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .footer-panel { grid-template-columns: 1fr; } }

.footer-cell {
  background: var(--arc-ink);
  padding: clamp(24px, 3vw, 38px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.footer-label {
  margin: 0;
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--arc-green);
}
.footer-label--second { margin-top: 12px; }
.footer-lede {
  margin: 0;
  max-width: 34ch;
  color: var(--arc-paper);
  opacity: 0.82;
}

.footer-facts { margin: 4px 0 0; display: flex; flex-direction: column; gap: 12px; width: 100%; }
.footer-facts > div { display: flex; flex-direction: column; gap: 3px; }
.footer-facts dt {
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--arc-green);
  opacity: 0.7;
}
.footer-facts dd {
  margin: 0;
  font-family: "Arcade Display", Arial, sans-serif;
  font-size: 1.9rem;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--arc-paper);
}
.footer-facts dd a { color: var(--arc-paper); text-decoration: none; border-bottom: 1px solid var(--arc-dim); }
body.nonTouchDevice .footer-facts dd a:hover { color: var(--arc-cyan) !important; border-bottom-color: var(--arc-cyan); }

.footer-cell .cta-primary { margin-top: auto; font-size: 1.9rem; padding: 12px 20px 10px; }

.footer-nights { list-style: none; margin: 0; padding: 0; width: 100%; }
.footer-nights li { border-bottom: 1px solid var(--arc-dim); }
.footer-nights li:first-child { border-top: 1px solid var(--arc-dim); }
.footer-nights a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  text-decoration: none;
}
.footer-night-date {
  flex: 0 0 auto;
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  color: var(--arc-green);
}
.footer-night-who {
  font-family: "Arcade Display", Arial, sans-serif;
  font-size: 2rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--arc-paper);
}
body.nonTouchDevice .footer-nights a:hover .footer-night-who { color: var(--arc-cyan) !important; }

.footer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.footer-link {
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arc-paper);
  text-decoration: none;
}
.footer-link--strong { color: var(--arc-green); margin-top: 4px; }
.footer-list--small .footer-link { font-size: 1.1rem; opacity: 0.62; letter-spacing: 0.12em; }
body.nonTouchDevice .footer-link:hover { color: var(--arc-cyan) !important; opacity: 1; }

/* the bottom bar keeps the mark, the group and the year, on one rule */
footer .footer-bottom {
  border-top: 1px solid var(--arc-dim);
  align-items: center;
  padding-top: 26px;
  padding-bottom: 26px;
}


/* same dim-green-as-type problem, in the bottom bar */
.footer-group-label { color: var(--arc-green) !important; opacity: 0.6; }


/* ---- the drawer, in the same order as the rest of the site ----------- */
.drawer .menus { display: flex; flex-direction: column; }
.drawer-cta {
  align-self: flex-start;
  margin: 22px 0 4px;
  font-size: 2rem;
  padding: 12px 20px 10px;
}
.drawer-nights li { border-bottom: 1px solid var(--arc-dim); }
.drawer-nights li:first-child { border-top: 1px solid var(--arc-dim); }
.drawer-more {
  display: inline-block;
  margin: 16px 0 0;
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--arc-green);
  text-decoration: none;
  border-bottom: 1px solid var(--arc-dim);
}
.drawer-reach {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 32px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--arc-dim);
}
.drawer-reach-line {
  font-family: "Arcade Display", Arial, sans-serif;
  font-size: 2.2rem;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--arc-paper);
  text-decoration: none;
}
.drawer-reach-address {
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arc-green);
  opacity: 0.7;
}
.drawer-legal {
  list-style: none;
  margin: 26px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--arc-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}
.drawer-legal a {
  font-family: "Arcade Body", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--arc-paper);
  opacity: 0.6;
  text-decoration: none;
}


/* ---- notch and home bar ---------------------------------------------------
   Only two things on this site are pinned to the edges of the glass: the header
   and the full-screen drawer behind the burger. In landscape on a notched
   phone, the theme's flat 60px let both slide under the cutout. Everything else
   sits inside a container that already has its own gutter.
   -------------------------------------------------------------------------- */
.header,
.header.sticky-fixed {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.drawer {
  padding-left: max(60px, env(safe-area-inset-left));
  padding-right: max(60px, env(safe-area-inset-right));
  padding-bottom: max(60px, env(safe-area-inset-bottom));
}

/* ------------------------------------------------------------ elsewhere ---
   The DJ's own places: the Spotify player and the Instagram account. Two
   cells on the same hairline grid the readout and the data rows use, so the
   band reads as part of the page's furniture rather than as a widget bolted
   under it. */

.night-listen-band {
  background: var(--arc-ink);
  padding: 40px 0 20px;
}
.night-listen {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1px;
  background: var(--arc-dim);
  border: 1px solid var(--arc-dim);
}
@media (max-width: 767px) {
  .night-listen { grid-template-columns: 1fr; }
}

.spotify-facade,
.night-social {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 96px;
  padding: 22px clamp(16px, 2.4vw, 28px);
  background: var(--arc-ink);
  color: var(--arc-green);
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
}
.spotify-facade:hover,
.night-social:hover { color: var(--arc-cyan); background: #030b03; }

/* A triangle drawn in CSS rather than an icon file: it is one shape, and the
   page already refuses third-party requests. */
.spotify-play {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-left: 18px solid currentColor;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}
.spotify-lines { display: flex; flex-direction: column; gap: 6px; }
.spotify-line {
  font-family: "Arcade Display", Impact, sans-serif;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.05;
}
.spotify-note {
  font-family: "Arcade Body", Arial, sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arc-dim-text, #2f8f30);
}
.spotify-embed {
  display: block;
  width: 100%;
  min-height: 352px;
  border: 0;
  background: var(--arc-ink);
}

/* the player is 352px tall once it loads, so the handle sits on its middle
   rather than floating at the top of a tall empty cell */
.night-social { flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; }
.night-social-label {
  font-family: "Arcade Body", Arial, sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--arc-dim-text, #2f8f30);
}
.night-social-handle {
  font-family: "Arcade Display", Impact, sans-serif;
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}