/* ==========================================================================
   Scared by the Sound — scaredbythesound.com
   Plain CSS, no build step. One stylesheet for every page.

   Layout concept: one dark column, one call to action. The key art runs full
   bleed behind a header whose logo starts large and overhangs the bar, then
   compacts into a solid sticky bar on scroll. Amber is spent on the Buy
   Tickets button, the printed calendar and the schedule swatches.

   Type system. Four roles, and nothing outside them:

   | Role          | Face                | Used for                          |
   | ------------- | ------------------- | --------------------------------- |
   | Brand display | Wrecked Ship        | h1, section h2, the closer        |
   | Heading       | Cinzel 700          | h3, card titles, schedule labels  |
   | Control       | Oswald 600, caps    | buttons, eyebrows, column         |
   |               |                     | headings, times, price units      |
   | Navigation    | Oswald 400, caps    | header, hero and footer links,    |
   |               |                     | the address block                 |
   | Body          | Nunito Sans 400     | all running copy                  |

   Nothing is set below 1rem on desktop or 0.875rem on a phone.

   Paths are relative, so index.html also opens straight off disk.

   The header and footer are shared components: the markup block is identical
   on every page, and the active nav item is driven off <body data-page="…">.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Brand display face. Wrecked Ship is what the logo, the posters and the
   printed calendar are set in. Cinzel backs it up: same Roman caps, and it is
   what the calendar numerals are already set in.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Wrecked Ship";
  src: url("../fonts/WreckedShip.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  /* The file in Drive is the demo build: its digits are a "Ronin Design
     Premium" watermark block rather than numerals. Excluding U+0030-0039 drops
     digits through to Cinzel. Swap in the purchased file, delete this line. */
  unicode-range: U+0000-002F, U+003A-10FFFF;
}

/* --------------------------------------------------------------------------
   The three Google faces, served from this origin rather than fonts.gstatic.
   Hosted here they cost no extra DNS, TLS or render-blocking stylesheet: the
   Google Fonts <link> sat on the critical path and the files behind it could
   not start until it came back. These are the same latin-subset variable
   files Google serves, so the type is unchanged; each covers its whole weight
   range from one file. Latin only — the site is English.

   Refresh them from
   fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Nunito+Sans:wght@400;600&family=Oswald:wght@400;600
   and take, for each family, the src under the comment marked latin.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Cinzel";
  src: url("../fonts/cinzel-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/nunito-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%; /* the file carries a width axis; pin it as Google does */
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Oswald";
  src: url("../fonts/oswald-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: dark; /* a single committed dark theme */

  /* The two band tones carry the seams between them, so they are held a few
     steps apart rather than at the edge of telling apart. */
  --bg: #090b0e;
  --bg-raised: #101317;
  --bg-sunk: #010204;
  --bone: #f2ece0;
  --fg: #f2ece0;
  --fg-dim: rgba(242, 236, 224, 0.74);
  --fg-mute: rgba(242, 236, 224, 0.58);
  --amber: #e89b01; /* sampled from the printed calendar */
  --amber-lit: #f8b418;
  --ink: #140d00; /* type on amber */
  --beam: #8fb8cf; /* the lighthouse beam in the key art */
  --rule: rgba(242, 236, 224, 0.14);
  --rule-strong: rgba(242, 236, 224, 0.28);

  --font-brand: "Wrecked Ship", "Cinzel", Georgia, serif;
  --font-display: "Cinzel", Georgia, "Times New Roman", serif;
  --font-ui: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Every step bottoms out at 14px on a phone and 16px on a desktop. */
  --step-hero: clamp(2.05rem, 9.5vw, 4.25rem); /* homepage */
  --step-page-title: clamp(3rem, 6.5vw, 4.25rem); /* inner pages: same ceiling */
  --step-h2: clamp(2.5rem, 4vw, 3rem);
  --step-h3: clamp(1.375rem, 2.4vw, 1.625rem);
  --step-body: clamp(1rem, 1.15vw, 1.0625rem);
  --step-small: clamp(0.875rem, 0.5rem + 0.6vw, 1rem);
  --step-label: clamp(0.875rem, 0.5rem + 0.6vw, 1rem);

  --wrap: 80rem; /* 1280px */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 8vw, 6rem);

  --promo-h: 2.875rem; /* the amber bar above the hero */
  --header-h: 5.5rem; /* the bar itself; the logo overhangs it downward */
  --logo-h: 7rem; /* at the top of the page */
  --logo-h-stuck: 3.5rem; /* once the header compacts */
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The closed drawer is parked off the right edge; clip it at the root so it
     never becomes horizontal scroll. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: `hidden` would make body a scroll container and the
     sticky header would scroll away with the page. */
  overflow-x: clip;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}

/* Wrecked Ship has its own capitals built in, so brand-face headings are set
   as written rather than forced to upper case. Cinzel headings stay upper.

   The family ships a single weight, so asking for 700 makes the browser fake
   the bold, and macOS fakes it far heavier than iOS. Ask for the weight that
   exists and switch synthesis off, so it renders the same everywhere. */
.hero__title,
.page-head h1,
.section-head h2,
.closer h2,
.sponsor-wall h2,
.cal__title {
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-transform: none;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--amber-lit);
  outline-offset: 3px;
}

/* Deliberately short of the header height, so an anchored section's top rule
   lands behind the bar instead of sitting just under it. */
[id] {
  scroll-margin-top: calc(var(--header-h) - 2.125rem);
}

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

/* --------------------------------------------------------------------------
   Primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
}

/* Band dividers: a hairline wherever one band of the page meets the next. */
.edge-top,
.edge-bottom {
  position: relative;
}

.edge-top::before,
.edge-bottom::after {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rule);
  pointer-events: none;
  content: "";
}

.edge-top::before {
  top: 0;
}

.edge-bottom::after {
  bottom: 0;
}

/* One divider per boundary: a band's bottom edge stands down when the band
   below draws its own top edge. */
.edge-bottom:has(+ .edge-top)::after {
  content: none;
}

.section--sunk {
  position: relative;
  background: var(--bg-sunk);
}

.eyebrow {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
}

.eyebrow--cool {
  color: var(--beam);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section-head h2 {
  font-family: var(--font-brand);
  font-size: var(--step-h2);
  letter-spacing: 0.02em;
}

/* Paragraphs run the full width of their container, not a narrower measure. */
.section-head p {
  color: var(--fg-dim);
}

.section-head--center {
  align-items: center;
  text-align: center;
}

/* A head with no standfirst of its own sits at paragraph rhythm against the
   copy that follows, not at section rhythm. */
.section-head--tight {
  margin-bottom: 1rem;
}

.prose {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  color: var(--fg-dim);
}

.prose a {
  color: var(--amber-lit);
  text-underline-offset: 0.2em;
}


/* Emphasis in running copy lifts to the full foreground, the way the live
   site bolds the name, the season and the square footage. */
.prose strong {
  font-weight: 600;
  color: var(--fg);
}

.note {
  font-size: var(--step-small);
  color: var(--fg-mute);
}

/* Buy Tickets is the only button on the page outside the ticket cards. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.75rem;
  background: var(--amber);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.btn {
  transition:
    background-color 0.18s ease,
    filter 0.25s ease;
}

.btn:hover,
.btn:focus-visible {
  background: var(--amber-lit);
  filter: drop-shadow(0 0 0.5rem rgba(248, 180, 24, 0.55))
    drop-shadow(0 0 1.75rem rgba(232, 155, 1, 0.4));
}

.btn--lg {
  min-height: 3.75rem;
  padding: 1rem 2.75rem;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  letter-spacing: 0.12em;
}

.btn--sm {
  min-height: 2.75rem;
  padding: 0.5rem 1.25rem;
  font-size: var(--step-small);
}

.link {
  display: inline-block;
  padding-bottom: 0.125rem;
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 400; /* navigation */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg-dim);
  transition:
    color 0.18s ease,
    border-color 0.18s ease;
}

.link:hover {
  color: var(--amber);
  border-color: var(--amber);
}

/* --------------------------------------------------------------------------
   Promo bar and header
   -------------------------------------------------------------------------- */
.promo {
  padding: 0.625rem var(--gutter);
  background: var(--amber);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

.promo a {
  text-underline-offset: 0.2em;
}

.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  /* Above the drawer scrim: the header creates the stacking context the
     drawer lives in, so the drawer can only rise as high as the header. */
  z-index: 90;
  background: linear-gradient(to bottom, rgba(4, 5, 7, 0.9), rgba(4, 5, 7, 0));
  transition: background-color 0.25s ease;
}

.site-header.is-stuck {
  background: rgba(4, 5, 7, 0.96);
  border-bottom: 1px solid var(--rule);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* backdrop-filter makes the header the containing block for its fixed
   descendants, which would trap the drawer inside the bar once the header is
   stuck. Drop the blur while the drawer is open; the scrim covers it anyway. */
body.nav-open .site-header.is-stuck {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--header-h);
}

/* The anchor keeps a fixed box in the bar while the logo inside it is taller
   and hangs below, so nothing in the nav moves when the logo resizes. */
.site-header__logo {
  position: relative;
  flex: 0 0 auto;
  display: block;
  width: calc(var(--logo-h) * 4 / 3);
  height: 2.75rem;
  transition: width 0.25s ease;
}

/* Pinned to the top of its box and allowed to hang below it, so growing the
   logo never pushes it up into the promo bar. */
.site-header__logo img {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: var(--logo-h);
  filter:
    drop-shadow(0 0.25rem 1rem rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.85));
  transition:
    height 0.25s ease,
    filter 0.25s ease;
}

/* The logo is the only lit thing in the artwork, so hovering it lifts the
   glow rather than changing its colour. */
.site-header__logo:hover img,
.site-header__logo:focus-visible img {
  filter: drop-shadow(0 0 0.5rem rgba(248, 180, 24, 0.55))
    drop-shadow(0 0 1.75rem rgba(232, 155, 1, 0.4));
}

.site-header.is-stuck .site-header__logo {
  width: calc(var(--logo-h-stuck) * 4 / 3);
}

.site-header.is-stuck .site-header__logo img {
  height: var(--logo-h-stuck);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-left: auto;
}

.site-nav[hidden] {
  display: none;
}

.site-nav__link {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 400; /* navigation: same weight in the header, hero and footer */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg-dim);
  white-space: nowrap;
  transition: color 0.18s ease;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--amber);
}

body[data-page="tickets"] .site-nav__link[data-nav="tickets"],
body[data-page="hours"] .site-nav__link[data-nav="hours"],
body[data-page="location"] .site-nav__link[data-nav="location"],
body[data-page="reviews"] .site-nav__link[data-nav="reviews"],
body[data-page="about"] .site-nav__link[data-nav="about"],
body[data-page="casting"] .site-nav__link[data-nav="casting"],
body[data-page="faq"] .site-nav__link[data-nav="faq"] {
  color: var(--amber);
}

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: none;
  border: 1px solid var(--rule-strong);
  color: var(--fg);
  font-size: 1rem;
  cursor: pointer;
}

.nav-toggle span {
  position: relative;
  display: block;
  width: 1.125rem;
  height: 1px;
  margin-inline: auto;
  background: currentColor;
}

.nav-toggle span::before,
.nav-toggle span::after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  content: "";
}

.nav-toggle span::before {
  top: -5px;
}

.nav-toggle span::after {
  top: 5px;
}

/* Below the breakpoint the nav slides in over the page instead of pushing
   it, so opening the menu never reflows what is behind it. The logo also
   stops overhanging, since there is no room for it. */
@media (max-width: 62rem) {
  :root {
    --logo-h: 5.75rem;
    --logo-h-stuck: 3.25rem;
    --header-h: 5.25rem;
  }

  .site-header__logo {
    height: 2.75rem;
  }

  .nav-toggle {
    display: block;
  }

  .nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(4, 5, 7, 0.65);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    width: min(20rem, 82vw);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding: calc(5.5rem + env(safe-area-inset-top, 0px)) 1.5rem
      calc(2rem + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    background: var(--bg-sunk);
    border-left: 1px solid var(--rule);
    transform: translateX(100%);
    visibility: hidden;
    transition:
      transform 0.28s ease,
      visibility 0s linear 0.28s;
  }

  /* The drawer is always in the DOM; `hidden` would kill the transition. */
  .site-nav[hidden] {
    display: flex;
  }

  .site-nav__link {
    padding-block: 1rem;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--rule);
  }

  .site-nav .btn {
    margin-top: 1.5rem;
    min-height: 3.25rem;
  }

  body.nav-open .site-nav {
    transform: translateX(0);
    visibility: visible;
    transition:
      transform 0.28s ease,
      visibility 0s;
  }

  body.nav-open .nav-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  .nav-close {
    position: absolute;
    top: calc(1.25rem + env(safe-area-inset-top, 0px));
    right: 1.25rem;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: none;
    border: 1px solid var(--rule-strong);
    color: var(--fg);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
  }
}

@media (min-width: 62.01rem) {
  .nav-scrim,
  .nav-close {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  /* A phone gets the hero in roughly four fifths of the screen, so the press
     marquee shows under it and the page reads as having more below. min-height,
     not height, so the copy is never clipped if someone scales their text up;
     it just grows past that in that case. */
  min-height: max(80svh, 41rem);
  margin-top: calc(-1 * var(--header-h) - env(safe-area-inset-top, 0px));
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  /* Storm sky behind, scarecrow in front, nothing in between. The old key art
     is still the social card and the schema image; it is not the hero, because
     a plate with a figure already in it cannot be re-composed per breakpoint. */
  background:
    linear-gradient(
      to bottom,
      rgba(9, 11, 14, 0.62) 0%,
      rgba(9, 11, 14, 0.22) 26%,
      rgba(9, 11, 14, 0.55) 72%,
      var(--bg) 100%
    ),
    #04050a url("../img/hero-sky-tall.webp") center 32% / cover no-repeat;
}

@media (min-width: 46.01rem) {
  .hero {
    background-image:
      linear-gradient(
        to bottom,
        rgba(9, 11, 14, 0.62) 0%,
        rgba(9, 11, 14, 0.22) 26%,
        rgba(9, 11, 14, 0.55) 72%,
        var(--bg) 100%
      ),
      url("../img/hero-sky.webp");
  }
}

/* He stands on the hero's bottom edge at every width; only his size and how
   much of the copy he sits behind change. */
.hero__figure {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 0;
  width: auto;
  /* Never let anything constrain both axes: the global `img { max-width: 100% }`
     would cap his width against this pinned height and squash him. He is wider
     than a phone on purpose, and .hero crops the overhang. */
  max-width: none;
  /* Height drives his size, but on a phone the 203vw ceiling takes over so his
     head always fits across the screen instead of losing both cheeks. */
  height: min(95%, 230vw);
  aspect-ratio: 1116 / 1400;
  pointer-events: none;
  user-select: none;
  /* His head sits left of the middle of the cut-out, so centring the box would
     leave the head off-centre over centred copy. -46.5% centres the head. */
  transform: translateX(-46.5%);
}

/* The firelight he throws onto the sky behind him. */
.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 0;
  width: min(42rem, 92vw);
  height: min(34rem, 62vh);
  pointer-events: none;
  transform: translateX(-50%);
  background: radial-gradient(
    closest-side,
    rgba(232, 155, 1, 0.22) 0%,
    rgba(232, 155, 1, 0.07) 52%,
    rgba(232, 155, 1, 0) 100%
  );
  animation: hero-ember 5.5s ease-in-out infinite;
}

/* The ember breathes: firelight, not a UI effect. */
@keyframes hero-ember {
  0%,
  100% {
    opacity: 0.82;
  }
  50% {
    opacity: 1;
  }
}

/* Over his coat the copy wants its own local shadow rather than a wash across
   the whole picture, which would dim him too. */
.hero__title,
.hero__sub,
.hero .eyebrow {
  text-shadow:
    0 0 2rem rgba(4, 5, 7, 0.95),
    0 0 0.75rem rgba(4, 5, 7, 0.95),
    0 0.0625rem 0.25rem rgba(4, 5, 7, 0.9);
}

/* Desktop: the copy sits in the left half of the normal container, aligned
   with the logo, and he takes the right. Nothing has to clear his head any
   more, so the band can be a good deal shorter than the stacked version. */
@media (min-width: 62.01rem) {
  .hero {
    /* A column rather than a centred block, so the title is set smaller than
       it was across the full width. */
    --step-hero: clamp(2.5rem, 3.7vw, 3.5rem);

    min-height: min(38rem, 80vh);
    justify-content: center;
    /* The copy is beside the logo now, not under the middle of the header, so
       the band reserves the whole logo rather than the bar it hangs off. */
    padding-top: calc(var(--logo-h) + 4rem + env(safe-area-inset-top, 0px));
  }

  /* His right edge lands on the container's right edge, so he and the copy
     share the page's gutters. */
  .hero__figure {
    left: auto;
    right: calc(var(--gutter) + max(0px, (100vw - var(--wrap)) / 2));
    /* Short of the top so his flames stay clear of the nav; 48vw takes over at
       the narrow end of this range, where the container has less room across
       than his height alone would spend. */
    height: min(90%, 40rem, 48vw);
    transform: none;
  }

  /* The firelight follows him. His centre is half his width in from the
     container edge, and that half-width tracks the height above. */
  .hero::before {
    left: auto;
    right: calc(
      var(--gutter) + max(0px, (100vw - var(--wrap)) / 2) + min(15rem, 20vw)
    );
    width: min(40rem, 52vw);
    height: min(32rem, 58vh);
    transform: translateX(50%);
  }
}

/* --------------------------------------------------------------------------
   Inner pages: no key art, a solid bar, and a logo that stays one size.
   -------------------------------------------------------------------------- */
body:not([data-page="home"]) .site-header {
  background: rgba(4, 5, 7, 0.96);
  border-bottom: 1px solid var(--rule);
}

body:not([data-page="home"]) .site-header__logo {
  width: calc(var(--logo-h-stuck) * 4 / 3);
}

body:not([data-page="home"]) .site-header__logo img {
  height: var(--logo-h-stuck);
}

.page-head {
  padding-block: clamp(2.5rem, 6vw, 4rem) 0;
}

/* The head's copy and the first section's copy read as consecutive paragraphs,
   so the space between them is the normal paragraph gap, not a section gap. A
   head with no standfirst needs a little more room under the h1. */
.page-head + .section {
  padding-top: 1.125rem;
}

.page-head:not(:has(p)) + .section {
  padding-top: clamp(1.5rem, 3vw, 2rem);
}

.page-head__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

.page-head h1 {
  font-family: var(--font-brand);
  font-size: var(--step-page-title);
  letter-spacing: 0.02em;
}

.page-head p {
  color: var(--fg-dim);
}

/* A section that opens with copy instead of a heading, because the page's h1
   already named it. */
.section-intro {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  color: var(--fg-dim);
}

/* On a short phone the copy starts over his jaw rather than below it, and his
   teeth are the brightest thing on the page. A scrim that fades in behind the
   copy block tames them locally, without the wash over the whole picture that
   used to dim him. Nothing to see where he is already dark. */
.hero__inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  right: 0;
  top: -2.5rem;
  bottom: 0;
  width: 100vw;
  pointer-events: none;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    rgba(4, 5, 7, 0) 0%,
    rgba(4, 5, 7, 0.55) 14%,
    rgba(4, 5, 7, 0.72) 34%,
    rgba(4, 5, 7, 0.72) 100%
  );
}

@media (min-width: 62.01rem) {
  .hero__inner::before {
    display: none;
  }
}

/* On a phone the copy stays centred over him; on a desktop it moves to the
   left of the container and he takes the right. */
.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  width: 100%;
  padding-block: 0 clamp(0.75rem, 2svh, 1.5rem);
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.75rem, 1.8svh, 1.25rem);
  /* A flex item sizes to its content unless told otherwise, and the hero type
     is far wider than a phone. */
  width: 100%;
  text-align: center;
}

/* Very small phones: the copy is what has to give, because his size there is
   governed by his head having to fit across the screen. */
@media (max-width: 23rem) {
  :root {
    --step-hero: 2.1rem;
    --promo-h: 4.5rem; /* the bar wraps to two lines down here */
  }

  /* Too short for the floor the other phones get, and the promo bar takes two
     lines here, so the hero keeps to what the screen actually has. */
  .hero {
    min-height: max(80svh, 38rem);
  }

  .hero__copy {
    gap: 0.875rem;
  }

  .hero__figure {
    height: min(95%, 230vw);
  }
}

@media (min-width: 62.01rem) {
  .hero__inner {
    justify-content: flex-start;
    padding-block: 0 clamp(1.5rem, 4vh, 3rem);
  }

  /* A percentage as well as a measure: at the narrow end of this range the
     container has to seat him too. */
  .hero__copy {
    align-items: flex-start;
    max-width: min(36rem, 50%);
    text-align: left;
  }

}

.hero .eyebrow {
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  letter-spacing: 0.16em;
}

.hero__title {
  /* Just wide enough to break as two lines on a desktop. */
  max-width: 18ch;
  font-family: var(--font-brand);
  font-size: var(--step-hero);
  letter-spacing: 0.015em;
  text-shadow: 0 0.125rem 1.75rem rgba(0, 0, 0, 0.85);
}

/* The one paragraph on the site with a measure: the homepage hero, which is
   centred display copy. Nowhere else. */
.hero__sub {
  max-width: 36rem;
  color: var(--fg-dim);
  text-shadow: 0 0.0625rem 0.75rem rgba(0, 0, 0, 0.95);
}

.hero__sub strong {
  font-weight: 600;
  color: var(--fg);
}

.hero__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

@media (min-width: 62.01rem) {
  /* The copy column is the measure in the left/right layout, so the title
     does not need one of its own. */
  .hero__title {
    max-width: none;
  }

  /* Room across here, so the secondary link sits beside the button rather
     than under it. */
  .hero__cta {
    flex-direction: row;
    align-items: center;
    gap: clamp(1.25rem, 2.5vw, 2rem);
  }
}

/* --------------------------------------------------------------------------
   Press marquee. The logos were cut out of the "featured on" banner, keyed off
   their white backing and recoloured bone.
   -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  position: relative;
  padding-block: 1.5rem;
  background: var(--bg-sunk);
}

.marquee__label {
  margin: 0 var(--gutter) 0.875rem;
  font-family: var(--font-ui);
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.marquee__track {
  display: flex;
  width: max-content;
  /* The track is ~4800px per group, so the duration keeps it near 45px/s. */
  animation: marquee 108s linear infinite;
}

/* Two identical groups, each wider than any viewport, so -50% lands exactly
   where the loop started and no gap is ever visible. */
.marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  padding-right: clamp(2.5rem, 6vw, 4.5rem);
}

.marquee img {
  width: auto;
  height: 3rem;
  opacity: 0.65;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------------------
   About: the film beside the copy
   -------------------------------------------------------------------------- */
.intro {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  align-items: start;
}

.player {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--rule);
}

/* contain, never cover: the film itself is never cropped. The placeholder
   above it is a separate image, and that is what gets cropped square on a
   phone. */
.player video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.player__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.player.is-playing .player__poster {
  display: none;
}

.player__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: linear-gradient(to top, rgba(4, 5, 7, 0.55) 0%, rgba(4, 5, 7, 0) 55%);
  cursor: pointer;
}

.player__play::before {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--amber);
  color: var(--ink);
  font-size: 1.25rem;
  content: "\25B6";
  transition: background-color 0.18s ease;
}

.player__play:hover::before {
  background: var(--amber-lit);
}

.player.is-playing .player__play {
  display: none;
}

/* On a phone, tapping play promotes the whole player to a full-screen
   overlay rather than asking the browser for native full screen, which some
   in-app browsers refuse and which would otherwise leave the film letterboxed
   inside the square placeholder box. */
.film-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: rgba(4, 5, 7, 0.7);
  border: 1px solid var(--rule-strong);
  color: var(--fg);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

body.film-open .player {
  position: fixed;
  inset: 0;
  z-index: 100;
  width: 100%;
  max-width: none;
  margin: 0;
  aspect-ratio: auto;
  background: #000;
  border: 0;
}

body.film-open .film-close {
  display: block;
}

/* On a phone the film follows the copy rather than leading it, and its
   placeholder is cropped square. */
/* A landscape photo beside a tall column of copy leaves a dead corner, so the
   picture sits in the flow of the story instead of beside it. */
/* No width of its own: the global `max-width: 100%` fits it to the column, and
   a small source is never upscaled into mush. */
.story__media {
  margin-block: clamp(0.875rem, 2vw, 1.5rem);
  border: 1px solid var(--rule);
}


@media (max-width: 54rem) {
  .intro {
    grid-template-columns: minmax(0, 1fr);
  }

  .intro__copy {
    order: 1;
  }

  .player {
    order: 2;
    aspect-ratio: 1;
    width: min(26rem, 100%);
    margin-inline: auto;
  }
}

/* The film's words, for anyone who cannot hear them or cannot see the screen
   the burned-in captions are on. Shut by default, so it costs the column
   nothing until someone wants it. */
/* --------------------------------------------------------------------------
   Dates and hours
   -------------------------------------------------------------------------- */
/* The generic two-column split: media on one side, content on the other. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

/* Flat art that is worth opening larger: the printed calendar, the matinee
   flyer. The button is the image; the overlay it feeds is shared. */
.art-zoom {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  font-size: 1rem;
  cursor: zoom-in;
}

.art-zoom__img {
  width: 100%;
  border: 1px solid var(--rule);
}

.art-zoom__hint {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: rgba(4, 5, 7, 0.82);
  border: 1px solid var(--rule-strong);
  color: var(--fg);
}

.art-zoom:hover .art-zoom__hint {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--ink);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  padding-top: calc(clamp(1rem, 4vw, 3rem) + env(safe-area-inset-top, 0px));
  background: rgba(4, 5, 7, 0.94);
  overflow: auto;
}

.lightbox[hidden] {
  display: none;
}

/* Tap the image again to go to 2x and pan, which is the only way the printed
   times are readable on a phone. */
.lightbox img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-in;
}

.lightbox.is-zoomed {
  align-items: flex-start;
  justify-content: flex-start;
}

.lightbox.is-zoomed img {
  width: 200%;
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}

@media (max-width: 46rem) {
  .lightbox {
    padding: 0.5rem;
    padding-top: calc(4rem + env(safe-area-inset-top, 0px));
  }

  .lightbox img {
    width: 100%;
  }
}

.lightbox__close {
  position: fixed;
  top: calc(1rem + env(safe-area-inset-top, 0px));
  right: 1rem;
  width: 3rem;
  height: 3rem;
  padding: 0;
  background: rgba(4, 5, 7, 0.8);
  border: 1px solid var(--rule-strong);
  color: var(--fg);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

/* The root is the scroll container, so locking body alone leaves the page
   scrolling behind the overlay. Lock both. */
/* The root is the scroll container, so locking body alone leaves the page
   scrolling behind an overlay. Lock both. */
html:has(body.lightbox-open),
html:has(body.nav-open),
html:has(body.film-open),
body.lightbox-open,
body.nav-open,
body.film-open {
  overflow: hidden;
}

.split__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

/* A list inside half a split reads as one column, not two short ones. */
.split .fineprint {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
}

.split .story__media {
  margin-block: 0;
}

@media (max-width: 54rem) {
  .split {
    grid-template-columns: minmax(0, 1fr);
  }

  .art-zoom__img {
    width: min(30rem, 100%);
    margin-inline: auto;
  }
}

/* One block that is both the legend and the schedule: which nights, which
   dates, what time. */
.hours__key {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Swatch, label and time share the first row; everything under it runs the
   full width of the row rather than sitting in the label column. */
.hours__key li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.375rem 1rem;
  padding-block: 1.125rem;
  border-bottom: 1px solid var(--rule);
}

.hours__key .sw {
  width: 0.875rem;
  height: 0.875rem;
  align-self: center;
}

.hours__key .sw--open {
  background: var(--amber);
}

.hours__key .sw--mat {
  background: var(--beam);
}

.hours__key .label {
  min-width: 0;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 2.4vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.hours__key .dates,
.hours__key .what {
  grid-column: 1 / -1;
  font-size: 1rem;
  color: var(--fg-mute);
}

.hours__key .what {
  color: var(--fg-dim);
}

.hours__key .time {
  font-family: var(--font-ui);
  font-size: clamp(1.0625rem, 2.4vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hours__key li.is-matinee .time {
  color: var(--beam);
}

/* The matinee carries the beam rather than the amber, so the link out to its
   own section matches the swatch and the time on the same row. */
.hours__key .what a {
  color: var(--beam);
  text-underline-offset: 0.2em;
}

/* A short list of practical facts, each behind its own mark. Not a definition
   list: there is not enough to say for every line to carry a heading. The mark
   is the beam, like every other matinee cue on the page. */
.facts {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.facts li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.875rem;
  align-items: start;
  font-size: 1rem;
  color: var(--fg-dim);
}

/* Nudged to sit on the first line's baseline rather than its box. */
.facts svg {
  margin-top: 0.2em;
  color: var(--beam);
}

/* --------------------------------------------------------------------------
   Tickets
   -------------------------------------------------------------------------- */
.tickets {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.ticket {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--bg-raised);
  border: 1px solid var(--rule);
}

.ticket h3 {
  font-size: var(--step-h3);
  letter-spacing: 0.02em;
}

.ticket p {
  font-size: 1rem;
  color: var(--fg-dim);
}

.ticket .price {
  margin-top: auto;
  padding-top: 1rem;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}

.ticket .price small {
  display: block;
  margin-top: 0.1875rem;
  font-family: var(--font-ui);
  font-size: var(--step-small);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.ticket .btn {
  margin-top: 0.75rem;
}

.fineprint {
  display: grid;
  gap: 1.25rem clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin: clamp(2.25rem, 4.5vw, 3rem) 0 0;
}

/* A heading immediately above the list already provides the separation. */
.section-head + .fineprint {
  margin-top: 0;
}

/* When the callouts lead the section they stack, so their columns never line
   up with the ticket cards below and read as captions for them. */
.fineprint--lead {
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin: 0 0 clamp(2.25rem, 4.5vw, 3rem);
}

.fineprint dt {
  margin-bottom: 0.5rem;
  font-family: var(--font-ui);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
}

.fineprint dd {
  margin: 0;
  font-size: 1rem;
  color: var(--fg-dim);
}

.section-intro a,
.fineprint dd a {
  color: var(--amber-lit);
  text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
   Reviews
   -------------------------------------------------------------------------- */
.ratings {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 3rem;
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
}

.ratings div {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
}

.ratings .score {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}

.ratings .src {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.quotes {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.quote {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin: 0;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--bg-raised);
  border: 1px solid var(--rule);
}

.quote p {
  font-size: 1.0625rem;
}

.quote .stars {
  color: var(--amber);
  font-size: 1rem;
  letter-spacing: 0.15em;
}

.quote figcaption {
  margin-top: auto;
  font-family: var(--font-ui);
  font-size: var(--step-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* --------------------------------------------------------------------------
   Location
   -------------------------------------------------------------------------- */
.location__grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  align-items: start;
}

.address {
  font-style: normal;
}

.address h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.address .street {
  margin-top: 0.625rem;
  font-family: var(--font-ui);
  font-size: var(--step-h3);
  font-weight: 400; /* supporting UI: read, not clicked */
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--amber);
}

.map {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--bg-raised);
}

.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  /* Google serves no dark tiles, so the embed is inverted and desaturated to
     sit on the page instead of glowing white. The embed gives no control over
     the marker colour, so the pin stays neutral with the rest of the map. */
  filter: invert(92%) grayscale(100%) contrast(88%);
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule);
}

.faq details {
  border-bottom: 1px solid var(--rule);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding-block: 1.125rem;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 2.2vw, 1.1875rem);
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  flex: 0 0 auto;
  color: var(--amber);
  font-family: var(--font-ui);
  font-size: 1.375rem;
  font-weight: 600;
  content: "+";
}

.faq details[open] summary::after {
  content: "\2013";
}

.faq details p + p {
  margin-top: 0.75rem;
}

.faq details > p:last-of-type {
  padding-bottom: 1.25rem;
}

.faq details p {
  color: var(--fg-dim);
}

/* --------------------------------------------------------------------------
   Closer
   -------------------------------------------------------------------------- */
.closer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

.closer h2 {
  font-family: var(--font-brand);
  font-size: var(--step-h2);
}

.closer p {
  color: var(--fg-dim);
}

.closer p a {
  color: var(--amber-lit);
  text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  background: var(--bg-sunk);
}

/* A centred stack: mark, menu, contact. */
.site-footer__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2rem);
  text-align: center;
}

.site-footer__logo {
  display: inline-block;
  line-height: 0;
}

.site-footer__logo img {
  width: clamp(9rem, 18vw, 12rem);
  transition: filter 0.25s ease;
}

.site-footer__logo:hover img,
.site-footer__logo:focus-visible img {
  filter: drop-shadow(0 0 0.5rem rgba(248, 180, 24, 0.55))
    drop-shadow(0 0 1.75rem rgba(232, 155, 1, 0.4));
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem clamp(1.5rem, 3.5vw, 2.75rem);
}

.footer-nav a {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg-dim);
  transition: color 0.18s ease;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--amber);
}

/* One item per line on a phone, rather than an uneven wrap. */
@media (max-width: 46rem) {
  .footer-nav {
    flex-direction: column;
    gap: 0.875rem;
  }

  .site-footer__contact {
    flex-direction: column;
    gap: 0.5rem;
  }
}

.site-footer__contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.375rem clamp(1.25rem, 3vw, 2.25rem);
  font-size: var(--step-small);
  color: var(--fg-dim);
}

.site-footer__contact a {
  text-decoration: none;
}

.site-footer__contact a:hover {
  color: var(--amber);
}

/* Sponsor wall. The marks were cut out of the printed amber band and set in
   bone so they sit on the dark footer without a light panel behind them.
   Swap in the sponsors' own vector files when they send them. */
/* Two marks under the contact line. Square targets, not bare glyphs, so the
   tap area is a thumb rather than a 20px icon. */
.footer-social {
  display: flex;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--rule);
  color: var(--fg-dim);
  transition:
    color 0.18s ease,
    border-color 0.18s ease;
}

.footer-social a:hover,
.footer-social a:focus-visible {
  color: var(--amber);
  border-color: var(--amber);
}

.sponsor-wall {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 0;
  text-align: center;
}

.sponsor-wall h2 {
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
  font-family: var(--font-brand);
  font-size: clamp(1.5rem, 3.4vw, 2.125rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg);
}

.sponsor-wall ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.75rem, 4.5vw, 3.5rem);
}

.sponsor-wall li {
  display: flex;
  align-items: center;
  justify-content: center;
  /* One box per mark, so a wide logo and a tall one carry the same weight. */
  height: clamp(2.75rem, 6.5vw, 4rem);
  max-width: clamp(7rem, 16vw, 11rem);
}

.sponsor-wall img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.8;
  transition: opacity 0.18s ease;
}

.sponsor-wall li:hover img {
  opacity: 1;
}

/* Same reasoning as the press marks: a size of their own on a phone. */
@media (max-width: 46rem) {
  .sponsor-wall li {
    height: 3.575rem;
    max-width: 9.1rem;
  }
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem clamp(1.25rem, 3vw, 2.25rem);
  margin-top: clamp(2.25rem, 4.5vw, 3rem);
  font-size: var(--step-small);
  text-align: center;
  color: var(--fg-mute);
}



/* --------------------------------------------------------------------------
   Sticky buy bar, narrow screens only
   -------------------------------------------------------------------------- */
.buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem var(--gutter);
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: rgba(4, 5, 7, 0.96);
  border-top: 1px solid var(--rule);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.buybar p {
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg);
}

@media (max-width: 46rem) {
  .buybar {
    display: flex;
  }

  body {
    padding-bottom: 5.5rem;
  }

  /* On the homepage the hero already carries a Buy Tickets button, so the bar
     waits until the hero has scrolled away. Other pages show it at once. */
  body[data-page="home"] .buybar {
    transform: translateY(100%);
    transition: transform 0.25s ease;
  }

  body[data-page="home"].buybar-on .buybar {
    transform: none;
  }
}

/* Utilities --------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--amber);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

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