/* ==========================================================================
   Site chrome, page sections and components
   ========================================================================== */

/* ==========================================================================
   Sticky header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgb(8 8 10 / 0.72);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
}

/* Solid once the page has scrolled, so nav never sits on a busy image. */
.site-header.is-stuck {
  background: rgb(6 6 8 / 0.97);
  border-bottom-color: rgb(201 169 97 / 0.28);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 5.5rem;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  flex-shrink: 0;
}
.site-header__brand img { width: auto; height: clamp(2.9rem, 4.6vw, 3.6rem); }

/* Wordmark fallback, used if the logo image is ever removed. */
.brand-word {
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-white);
  line-height: 1;
}
.brand-word span { display: block; font-size: 0.5em; letter-spacing: var(--ls-widest); color: var(--c-gold); }

/* ---- Nav ----------------------------------------------------------------- */
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-4), 2vw, var(--sp-6));
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav__link {
  position: relative;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-text-dim);
  text-decoration: none;
  padding-block: var(--sp-2);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--c-gold);
  scale: 0 1;
  transform-origin: left;
  transition: scale var(--d-base) var(--e-out);
}
.nav__link:hover,
.nav__link:focus-visible,
.nav__link[aria-current="true"] { color: var(--c-white); }
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current="true"]::after { scale: 1 1; }

.nav__cta { margin-left: var(--sp-3); }

/* ---- Hamburger ----------------------------------------------------------- */
.nav-toggle {
  display: none;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.nav-toggle__bar {
  position: absolute;
  left: 50%;
  width: 1.25rem;
  height: 1.5px;
  margin-left: -0.625rem;
  background: var(--c-text);
}
.nav-toggle__bar:nth-child(1) { top: 0.95rem; }
.nav-toggle__bar:nth-child(2) { top: 1.32rem; }
.nav-toggle__bar:nth-child(3) { top: 1.69rem; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(0.37rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-0.37rem) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: block; }

  .nav {
    position: fixed;
    inset: 5.5rem 0 auto 0;
    max-height: calc(100dvh - 5.5rem);
    overflow-y: auto;
    background: rgb(6 6 8 / 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgb(201 169 97 / 0.28);
    padding: var(--sp-5) var(--gutter) var(--sp-7);
    /* Collapsed state. clip-path + opacity keeps it off the layout path. */
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, -8px, 0);
    transition:
      opacity    var(--d-base) var(--e-out),
      transform  var(--d-base) var(--e-out),
      visibility 0s linear var(--d-base);
  }
  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity   var(--d-base) var(--e-out),
      transform var(--d-base) var(--e-out),
      visibility 0s;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav__list li { border-bottom: 1px solid rgb(255 255 255 / 0.07); }
  .nav__link {
    display: block;
    padding: var(--sp-4) 0;
    font-size: var(--fs-sm);
  }
  .nav__link::after { display: none; }
  .nav__cta { margin: var(--sp-5) 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nav { transform: none; }
  .nav__link::after { transition: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem);
  text-align: center;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgb(30 22 26 / 0.9), transparent 70%),
    var(--c-black);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  object-fit: cover;
  width: 100%; height: 100%;
  /* The reference hero reads as near-black with faint bokeh. The source
     photo is a brightly lit crowd, so it is dimmed hard and desaturated
     to sit behind the logo instead of competing with it. */
  opacity: 0.28;
  filter: saturate(0.55) brightness(0.75);
}

/* Scrim so the tagline always clears AA over whatever the photo does. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 55% 45% at 50% 34%, rgb(0 0 0 / 0.75), transparent 72%),
    linear-gradient(180deg,
      rgb(0 0 0 / 0.72) 0%,
      rgb(0 0 0 / 0.45) 40%,
      rgb(8 8 10 / 0.95) 100%);
  pointer-events: none;
}

.hero__inner { position: relative; z-index: var(--z-base); }

.hero__logo-wrap {
  position: relative;
  display: inline-block;
  max-width: min(680px, 88vw);
  margin-inline: auto;
}
.hero__logo { width: 100%; height: auto; }

.hero__logo-glow {
  position: absolute;
  inset: 8% 10%;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgb(211 43 43 / 0.5), transparent 68%);
  filter: blur(40px);
  pointer-events: none;
}

.hero__tagline {
  margin-top: var(--sp-5);
  font-family: var(--f-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-white);
  max-width: 28ch;
  margin-inline: auto;
  text-shadow: 0 2px 20px rgb(0 0 0 / 0.8);
}

.hero__subline {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-gold);
}

/* ---- Hero video, torn-paper frame ---------------------------------------- */
.hero__media {
  position: relative;
  max-width: 900px;
  margin: clamp(2rem, 5vw, 3.5rem) auto 0;
}

/* Straight-edged white frame around the show reel. */
.torn-frame {
  position: relative;
  padding: 10px;
  background: var(--c-white);
  border-radius: 2px;
}

.torn-frame__inner {
  position: relative;
  overflow: hidden;
  background: var(--c-black);
  aspect-ratio: 16 / 9;
}
.torn-frame__inner img {
  width: 100%; height: 100%;
  object-fit: cover;
}

@media (max-width: 600px) {
  /* The artwork carries its own white torn edge, so the CSS frame only
     needs to be a hairline at phone width. */
  .torn-frame { padding: 3px; }
}

.hero__cta { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* ==========================================================================
   Play button
   ========================================================================== */

.play-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(3.5rem, 7vw, 5rem);
  aspect-ratio: 1;
  padding: 0;
  color: var(--c-white);
  background: rgb(0 0 0 / 0.35);
  border: 2px solid currentColor;
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.play-btn svg {
  width: 38%;
  height: auto;
  margin-left: 8%;   /* optically centre the triangle */
  fill: currentColor;
}
.play-btn:hover { background: rgb(0 0 0 / 0.55); }

/* Centred over a media panel */
.play-btn--overlay {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  z-index: 3;
}

/* The red variant used on the Psychic Vampire section */
.play-btn--red { color: var(--c-red-bright); }

/* ==========================================================================
   Hidden Chamber
   ========================================================================== */

.chamber {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(26rem, 52vw, 40rem);
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--section-y);
}

.chamber__bg {
  position: absolute;
  inset: -10% 0;           /* extra height so parallax never reveals an edge */
  z-index: -2;
  width: 100%;
  height: 120%;
  object-fit: cover;
}

.chamber::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 60% 60% at 50% 45%,
                rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.82) 100%);
  pointer-events: none;
}

.chamber__inner { position: relative; z-index: var(--z-base); }

.chamber__logo-wrap {
  position: relative;
  display: inline-block;
  overflow: hidden;         /* clips the sweep to the logo box */
  max-width: min(560px, 86vw);
}
.chamber__logo { width: 100%; height: auto; }

.chamber__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(var(--sp-3), 2vw, var(--sp-5));
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

/* The art-deco frame buttons are supplied as pre-rendered PNGs. */
.deco-btn {
  display: block;
  width: clamp(11rem, 22vw, 15rem);
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  transition: transform var(--d-base) var(--e-out),
              filter    var(--d-base) var(--e-soft);
}
.deco-btn img { width: 100%; height: auto; }

@media (hover: hover) and (pointer: fine) {
  .deco-btn:hover { transform: translate3d(0, -3px, 0); filter: brightness(1.18); }
}
.deco-btn:focus-visible { transform: translate3d(0, -3px, 0); filter: brightness(1.18); }

@media (prefers-reduced-motion: reduce) {
  .deco-btn:hover, .deco-btn:focus-visible { transform: none; }
}

/* ==========================================================================
   Show grid
   Four full-bleed portrait cards, edge to edge as in the reference.
   Becomes a snap-scrolling carousel below 900px.
   ========================================================================== */

/* ---- Show row --------------------------------------------------------------
   A static four-up row. No auto-scroll and no duplicated cards: on desktop
   the four cards fill the width as a grid, and below 900px the row becomes a
   horizontal scroller that can be swiped on touch or dragged with a mouse.
   -------------------------------------------------------------------------- */
.show-marquee {
  position: relative;
  background: var(--c-black);
  overflow-x: hidden;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  /* The row is dragged, not scrolled by a bar. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.show-marquee::-webkit-scrollbar { display: none; }

/* Grab cursor only where there is a mouse to grab with. */
@media (hover: hover) and (pointer: fine) {
  .show-marquee.is-draggable { cursor: grab; }
  .show-marquee.is-dragging  { cursor: grabbing; }
}

/* While dragging, stop cards swallowing the pointer so a drag that starts on
   a card still pans the row, and text selection does not kick in. */
.show-marquee.is-dragging { user-select: none; scroll-behavior: auto; }
.show-marquee.is-dragging .show-card { pointer-events: none; }

/* Desktop: four equal columns filling the container, as in the reference. */
.show-marquee__track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  width: 100%;
}

.show-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(26rem, 42vw, 38rem);
  padding: var(--sp-5) var(--sp-4) var(--sp-6);
  text-align: center;
  overflow: hidden;
  scroll-snap-align: start;
}

/* Card border.
   A 1px gold rule held IN from the card's edge, so a margin of artwork shows
   outside it — matching the supplied reference. Square corners and a real
   `border` (rather than an outset ring) mean nothing can be clipped by the
   card's overflow:hidden.

   It is present AT REST. Hover only brightens it; it does not introduce a
   border that was not already there. */
.show-card__frame {
  position: absolute;
  inset: var(--card-rule-inset);
  z-index: 2;
  pointer-events: none;
  border: 1px solid var(--card-rule);
  border-radius: 0;
  transition: border-color var(--d-base) var(--e-soft);
}

.show-card__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}

.show-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    transparent 30%,
    rgb(0 0 0 / 0.55) 62%,
    rgb(0 0 0 / 0.92) 100%);
  pointer-events: none;
}

.show-card__title {
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-white);
  text-shadow: 0 2px 16px rgb(0 0 0 / 0.9);
}

.show-card__title--ghost {
  font-family: var(--f-ghost);
  font-weight: 400;
  font-size: clamp(1.45rem, 1.05rem + 1.5vw, 2.1rem);
  letter-spacing: 0.01em;
  line-height: 1;
  text-shadow: 0 0 18px rgb(220 228 255 / 0.3), 0 2px 16px rgb(0 0 0 / 0.9);
}
.show-card__title--vampire {
  font-family: var(--f-vampire);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.05rem + 1.7vw, 2.25rem);
  letter-spacing: -0.005em;
  line-height: 1.02;
  text-transform: none;
}
.show-card__title--mind {
  font-family: var(--f-mind);
  font-weight: 400;
  font-size: clamp(1.3rem, 0.95rem + 1.35vw, 1.9rem);
  letter-spacing: 0.02em;
  line-height: 1.05;
}
/* The Magic Show has no supplied display face — stays on Oswald. */
.show-card__title--magic { letter-spacing: var(--ls-wide); }

/* Ghost Stories breaks to two lines, as in the reference. */
.show-card__title--ghost span { display: block; }

/* "The" sits on its own line above PSYCHIC VAMPIRE. */
.show-card__title--vampire .sm {
  display: block;
  font-size: 0.46em;
  font-weight: 400;
  line-height: 1.1;
}

/* THE / MIND+READER */
.show-card__title--mind .show-card__title-the {
  display: block;
  font-family: var(--f-display);
  font-size: 0.34em;
  font-weight: 600;
  letter-spacing: var(--ls-widest);
  color: var(--c-gold);
  margin-bottom: 0.15em;
}
.show-card__title--mind .mind-a { color: var(--c-gold); }
.show-card__title--mind .mind-b { color: #c9c9cf; }

/* "Is seeing really believing?" — set in Enigma, with the LIE inside
   BELIEVING picked out in white. */
.show-card__sub--enigma,
.feature__sub--enigma {
  font-family: var(--f-ghost);
  font-weight: 400;
  text-transform: uppercase;
}
.show-card__sub--enigma .lie,
.feature__sub--enigma .lie { color: var(--c-white); }

.feature__sub--enigma {
  font-size: clamp(0.95rem, 0.8rem + 0.55vw, 1.3rem);
  letter-spacing: 0.06em;
}
.show-card__sub--enigma {
  font-size: clamp(0.72rem, 0.62rem + 0.35vw, 0.9rem);
  letter-spacing: 0.04em;
}

.show-card__sub {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-dim);
  text-shadow: 0 1px 10px rgb(0 0 0 / 0.9);
}

/* ---- Subtitle modifiers ---------------------------------------------------
   These MUST come after the base rule above: they share its specificity
   (one class each), so source order decides the winner. Defined earlier,
   the base `color` silently overrode every one of them. */

/* Ghost Stories card subtitle takes the same gold as its feature section.
   It has to live HERE, after the base rule: the rest of the --enigma styling
   is declared further up, and at equal specificity the base `color` would
   otherwise win. The white LIE is unaffected — `.show-card__sub--enigma .lie`
   is a two-class selector, so it outranks this regardless of order. */
.show-card__sub--enigma { color: var(--c-gold); }

/* Red subtitle (Psychic Vampire). --c-red-bright is the AA-safe red. */
.show-card__sub--red {
  color: var(--c-red-bright);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
}

/* Title + bar share a shrink-to-fit wrapper, so the bar can be exactly as
   wide as the title sitting above it rather than the full card. */
.show-card__titleblock {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

/* Solid gold bar behind the subtitle (The Mindreader).

   `width: 0; min-width: 100%` is deliberate: it makes the bar fill the
   wrapper WITHOUT contributing its own text width to the wrapper's
   fit-content sizing. Without it the wrapper sizes to the longer subtitle
   and the bar overhangs the title on both sides. The title alone therefore
   sets the width, and the bar matches its endpoints exactly.

   The subtitle is stepped down and tracked in so its text still fits that
   width on one line. */
.show-card__sub--bar {
  display: block;
  width: 0;
  min-width: 100%;
  margin-inline: 0;
  padding: 0.5em 0.5em;
  background: var(--c-gold);
  color: var(--c-black);
  font-size: clamp(0.5rem, 0.36rem + 0.42vw, 0.7rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-shadow: none;
  box-sizing: border-box;
}

/* Diagonal sheen that crosses the artwork as the card zooms. Sits above the
   image (z-index -1) but below the copy, so text never dims. */
.show-card__shine {
  position: absolute;
  top: -60%;
  left: 0;
  z-index: -1;
  width: 55%;
  height: 220%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgb(255 255 255 / 0.06) 30%,
    rgb(255 255 255 / 0.30) 48%,
    rgb(255 255 255 / 0.42) 50%,
    rgb(255 255 255 / 0.30) 52%,
    rgb(255 255 255 / 0.06) 70%,
    transparent 100%);
  filter: blur(10px);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-180%, 0, 0) rotate(16deg);
}

.show-card__cta { margin-top: var(--sp-4); align-self: center; }

/* Make the whole card clickable without nesting interactive elements:
   the link's ::before covers the card. */
.show-card__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}

@media (max-width: 900px) {
  /* On a narrow card the subtitle cannot fit the title's width on one line.
     Let it wrap rather than overflow — the bar still matches the title's
     endpoints exactly, which is the point of it. */
  .show-card__sub--bar { white-space: normal; line-height: 1.35; }

  /* Below 900px the four cards no longer fit, so the row becomes a
     swipeable / draggable scroller. */
  .show-marquee {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
  }
  .show-marquee__track {
    display: flex;
    width: max-content;
    padding-inline: var(--gutter);
  }
  .show-card {
    flex: 0 0 auto;
    width: clamp(13rem, 62vw, 18rem);
    min-height: 24rem;
  }
}

/* ==========================================================================
   Show feature sections
   ========================================================================== */

.feature {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* All four feature sections are exactly the same height at any given
     viewport width, because this depends only on vw — not on how long each
     show's copy happens to be. The 54rem floor is what keeps the longest
     copy (The Psychic Vampire, 854px at its worst) inside the box, so no
     section is ever pushed taller than its siblings by its own content. */
  min-height: max(54rem, 100vw / 1.85);
  display: flex;
  align-items: center;
  padding-block: var(--section-y);
  border-bottom: 1px solid rgb(201 169 97 / 0.22);
}

/* Fills the section completely, anchored to the top of the photograph so
   any crop is taken off the BOTTOM and the performer's head is never cut.

   These are <img> elements, so the object-* properties do the work that
   background-size / background-position would do on a background image;
   background-repeat has no equivalent because a replaced image never tiles. */
.feature__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;            /* fills the container completely      */
  object-position: top center;  /* anchors the top; crops the bottom   */
}

/* Per-show colour wash. --tint is set per section in the markup's class. */
.feature::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: hsl(var(--tint) / 0.55);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Directional scrim: darkens the side the text sits on. */
.feature::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(var(--scrim-angle, 90deg),
    rgb(0 0 0 / 0.92) 0%,
    rgb(0 0 0 / 0.72) 38%,
    rgb(0 0 0 / 0.15) 72%,
    transparent 100%);
  pointer-events: none;
}

.feature--right { --scrim-angle: 270deg; }

.feature__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(var(--sp-5), 4vw, var(--sp-8));
  align-items: center;
  width: 100%;
}

/* Text column sits left by default, right on .feature--right */
.feature__body { grid-column: 1; }
.feature--right .feature__body { grid-column: 2; }
.feature__media { grid-column: 2; }
.feature--right .feature__media { grid-column: 1; grid-row: 1; }

.feature__title {
  font-family: var(--f-display);
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-white);
  text-shadow: 0 4px 30px rgb(0 0 0 / 0.9);
}

/* ---- Per-show title faces -------------------------------------------------
   Each show's title is set in its own face. Sizes are tuned per font
   because their cap heights differ substantially at the same font-size. */

/* Ghost Stories — Enigma */
.feature__title--ghost {
  font-family: var(--f-ghost);
  font-weight: 400;
  font-size: clamp(3rem, 1.5rem + 6.6vw, 7rem);
  letter-spacing: 0.01em;
  line-height: 0.95;
  text-transform: uppercase;
  /* Enigma is a distressed face; a soft bloom sells the spectral look
     the reference gets from its artwork. */
  text-shadow:
    0 0 28px rgb(220 228 255 / 0.35),
    0 4px 30px rgb(0 0 0 / 0.9);
}

/* The Psychic Vampire — ITC Benguiat Condensed */
.feature__title--vampire {
  font-family: var(--f-vampire);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.005em;
  line-height: 0.92;
}
.feature__title--vampire .sm {
  display: block;
  font-size: 0.42em;
  font-weight: 400;
}

/* The Mindreader — Cloudsters */
.feature__title--mind {
  font-family: var(--f-mind);
  font-weight: 400;
  font-size: clamp(2.5rem, 1.2rem + 5.4vw, 5.75rem);
  letter-spacing: 0.02em;
  line-height: 1;
}
.feature__title--mind .feature__title-the {
  display: block;
  font-family: var(--f-display);
  font-size: 0.28em;
  font-weight: 600;
  letter-spacing: var(--ls-widest);
  color: var(--c-gold);
}
.feature__title--mind .mind-a { color: var(--c-gold); }
.feature__title--mind .mind-b { color: #c9c9cf; }

/* Show logo used in place of a text title (Ghost Stories) */
.feature__logo { max-width: min(420px, 78%); height: auto; }

.feature__sub {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-gold);
}
.feature__sub--red   { color: var(--c-red-bright); }
/* Highlighted subtitle bar, as on The Mindreader */
.feature__sub--bar {
  display: inline-block;
  padding: 0.35em 0.7em;
  background: var(--c-gold);
  color: var(--c-black);
}

.feature__text {
  margin-top: var(--sp-5);
  max-width: 54ch;
  color: var(--c-text);
  text-shadow: 0 1px 14px rgb(0 0 0 / 0.85);
}
.feature__text strong { color: var(--c-white); }

/* Two-column detail list */
/* DOM order is column-major (see index.html), so desktop fills DOWN the
   first column then down the second, and the single-column mobile stack
   reads in the same order without any reordering. */
.feature__details {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-5);
  margin: var(--sp-5) 0 0;
  padding: 0 0 var(--sp-5);
  list-style: none;
  border-bottom: 1px solid rgb(201 169 97 / 0.35);
  max-width: 56ch;
}
.feature__details li {
  font-size: var(--fs-sm);
  color: var(--c-gold);
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.9);
}

.feature__cta { margin-top: var(--sp-5); }

/* Aligns the button's right edge with the right end of the gold rule that
   closes the detail list. The rule is the bottom border of .feature__details,
   so the CTA has to share that element's max-width to line up with it. */
.feature__cta--end {
  max-width: 56ch;
  text-align: right;
}

.feature__media {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 12rem;
}

@media (max-width: 860px) {
  /* ---- Mobile feature layout ------------------------------------------------
     Follows the supplied reference: a portrait image band at the top with the
     play button low over the body (never the face), then a centred title and
     subtitle, then left-aligned copy, a single-column detail list split into
     two groups, the gold rule, and a centred CTA.
     -------------------------------------------------------------------------- */
  .feature {
    --scrim-angle: 180deg !important;
    min-height: 0;
    display: block;
    align-items: stretch;
    padding-block: 0 var(--section-y);
  }

  /* Image band. 1.18:1 portrait, matching the reference proportions. */
  .feature__bg {
    inset: auto;
    top: 0; left: 0; right: 0;
    width: 100%;
    height: var(--feature-img-h, min(118vw, 27rem));
    object-fit: cover;
    object-position: center top;
  }

  /* Scrim covers only the image band and fades it into the section. */
  /* An opaque overlay in the page's own background colour, ramping to FULLY
     solid before the image's bottom edge and staying solid to the end.
     By the time the image stops there is nothing left of it to see, and the
     colour above the cut already equals the colour below it, so a seam is
     impossible — this does not depend on the gradient landing on an exact
     pixel the way a partially-transparent scrim does. */
  .feature::after {
    inset: 0 0 auto 0;
    height: var(--feature-img-h, min(118vw, 27rem));
    background: linear-gradient(180deg,
      rgb(8 8 10 / 0) 0%,
      rgb(8 8 10 / 0) 44%,
      rgb(8 8 10 / 0.14) 60%,
      rgb(8 8 10 / 0.45) 74%,
      rgb(8 8 10 / 0.80) 85%,
      rgb(8 8 10 / 0.97) 93%,
      var(--c-ink) 97%,
      var(--c-ink) 100%);
  }
  .feature::before { display: none; }   /* colour wash off — band is short */

  .feature__grid {
    grid-template-columns: 1fr;
    /* Start the copy just under the image, overlapping the fade slightly. */
    padding-top: calc(var(--feature-img-h, min(118vw, 27rem)) - 1.5rem);
  }

  .feature__body,
  .feature--right .feature__body { grid-column: 1; grid-row: 1; }

  /* Play button sits low in the image band, clear of the face.
     The MEDIA CONTAINER is what gets positioned, not the button inside it:
     .feature__media carries [data-reveal], so it has to sit where it is
     actually drawn or its IntersectionObserver never fires and the button
     stays at opacity 0. Absolute positioning also takes it out of the grid
     flow, so it adds no height below the copy. */
  .feature__media,
  .feature--right .feature__media {
    position: absolute;
    top: calc(var(--feature-img-h, min(118vw, 27rem)) * 0.82);
    left: 50%;
    translate: -50% -50%;
    z-index: 4;
    display: block;
    min-height: 0;
    width: auto;
  }
  .feature__media .play-btn { width: 4.25rem; }

  /* Centred title block, as in the reference. */
  .feature__title,
  .feature__sub { text-align: center; }
  .feature__sub--bar { display: inline-block; }
  .feature__body > .feature__sub { display: block; }
  .feature__sub--bar { margin-inline: auto; width: fit-content; }

  .feature__text { margin-top: var(--sp-4); max-width: none; }

  /* Single column, split 3 + 3 with a gap between the groups. */
  .feature__details {
    grid-template-rows: none;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: 1fr;
    max-width: none;
    gap: var(--sp-2);
  }
  .feature__details li:nth-child(3) { margin-bottom: var(--sp-4); }

  /* CTA centred under the rule. */
  .feature__cta,
  .feature__cta--end {
    max-width: none;
    text-align: center;
  }
}

/* Taller phones get a slightly taller image band. */
@media (max-width: 860px) and (min-height: 760px) {
  .feature { --feature-img-h: min(124vw, 30rem); }
}

@media (max-width: 420px) {
  .feature__details { gap: var(--sp-1); }
}

/* ==========================================================================
   The Team
   ========================================================================== */

.team { text-align: center; background: var(--c-black); }

.team__logo {
  max-width: min(560px, 84vw);
  height: auto;
  margin: 0 auto clamp(2rem, 5vw, 3.5rem);
}

.team__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(var(--sp-3), 2vw, var(--sp-5));
}

.team-card { text-align: center; }

.team-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--c-ink-2);
  border: 1px solid rgb(255 255 255 / 0.08);
}
.team-card__img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.team-card__name {
  margin-top: var(--sp-4);
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-white);
}
.team-card__role {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-gold);
}

@media (max-width: 860px) { .team__grid { grid-template-columns: repeat(2, 1fr); } }

/* Phone: stay two-up (2 x 2) with smaller portraits rather than dropping to
   a single column, which made the section very tall. */
@media (max-width: 560px) {
  .team__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5) var(--sp-3);
  }
  .team-card__media { aspect-ratio: 4 / 5; }
  .team-card__name { margin-top: var(--sp-3); font-size: var(--fs-sm); }
  .team-card__role { font-size: var(--fs-xs); }
}

/* ==========================================================================
   Contact / booking
   ========================================================================== */

.contact {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgb(24 20 16 / 0.85), transparent 70%),
    var(--c-ink);
  border-top: 1px solid rgb(201 169 97 / 0.22);
}

.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: clamp(var(--sp-6), 5vw, var(--sp-9));
  align-items: start;
}

.contact__aside p { color: var(--c-text-dim); }

.contact__details {
  margin-top: var(--sp-6);
  display: grid;
  gap: var(--sp-5);
  list-style: none;
  padding: 0;
}
.contact__details dt {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: var(--sp-1);
}
.contact__details dd { margin: 0; color: var(--c-text); }
.contact__details a { color: var(--c-text); text-decoration-color: rgb(255 255 255 / 0.3); }
.contact__details a:hover { color: var(--c-gold-bright); }

@media (max-width: 900px) {
  .contact__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Form
   ========================================================================== */

.form {
  background: var(--c-ink-2);
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: var(--r-md);
  padding: clamp(var(--sp-5), 3vw, var(--sp-7));
}

.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }

.field { margin-bottom: var(--sp-4); }

.field__label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-dim);
}
.field__label .req { color: var(--c-gold); }

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  background: rgb(0 0 0 / 0.45);
  color: var(--c-text);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--r-sm);
  transition: border-color var(--d-fast) var(--e-soft),
              box-shadow   var(--d-fast) var(--e-soft);
}
.field__textarea { min-height: 8rem; resize: vertical; }

.field__input:hover,
.field__select:hover,
.field__textarea:hover { border-color: rgb(255 255 255 / 0.26); }

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgb(201 169 97 / 0.22);
}

.field__input::placeholder,
.field__textarea::placeholder { color: var(--c-text-faint); }

/* Error state */
.field.has-error .field__input,
.field.has-error .field__select,
.field.has-error .field__textarea {
  border-color: var(--c-red-bright);
}
.field.has-error .field__input:focus,
.field.has-error .field__select:focus,
.field.has-error .field__textarea:focus {
  box-shadow: 0 0 0 3px rgb(255 59 59 / 0.25);
}

.field__error {
  display: none;
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-red-bright);
}
.field.has-error .field__error { display: flex; gap: var(--sp-2); align-items: flex-start; }
.field__error::before { content: "!"; font-weight: 700; }

/* ---- Consent ------------------------------------------------------------- */
/* A <fieldset>'s UA default border is `2px groove`. Overriding only
   border-top left that 2px groove in place on the other three sides, which
   is why the box read as heavier on the left, right and bottom than across
   the top. Declare all four explicitly so the weight is uniform. */
.consent {
  margin-top: var(--sp-6);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: var(--r-sm);
  /* min-inline-size: auto stops a fieldset refusing to shrink below its
     content's intrinsic width, which can force overflow on narrow screens. */
  min-inline-size: 0;
}

.consent__legend {
  /* Sits in the notch in the top border. */
  padding-inline: var(--sp-2);
  margin-inline-start: calc(-1 * var(--sp-2));
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-gold);
  padding: 0;
  margin-bottom: var(--sp-4);
}

.checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
  margin-bottom: var(--sp-4);
  cursor: pointer;
}
.checkbox input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.2rem 0 0;
  accent-color: var(--c-gold);
  cursor: pointer;
  flex-shrink: 0;
}
.checkbox span {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--c-text-dim);
}

.consent__note {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-text-faint);
  line-height: 1.6;
}

.form__actions {
  margin-top: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
}

/* ---- Form status --------------------------------------------------------- */
.form__status {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  display: none;
}
.form__status.is-success {
  display: block;
  background: rgb(201 169 97 / 0.12);
  border: 1px solid var(--c-gold-dim);
  color: var(--c-gold-bright);
}
.form__status.is-error {
  display: block;
  background: rgb(255 59 59 / 0.1);
  border: 1px solid rgb(255 59 59 / 0.45);
  color: var(--c-red-bright);
}

/* Summary of validation errors, focused on failed submit */
.form__errors {
  display: none;
  margin-bottom: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: rgb(255 59 59 / 0.1);
  border: 1px solid rgb(255 59 59 / 0.45);
  border-radius: var(--r-sm);
  color: var(--c-red-bright);
  font-size: var(--fs-sm);
}
.form__errors.is-visible { display: block; }
.form__errors ul { margin: var(--sp-2) 0 0; padding-left: 1.2em; }
.form__errors a { color: inherit; }

.btn[aria-busy="true"] { opacity: 0.65; pointer-events: none; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--c-black);
  border-top: 1px solid rgb(201 169 97 / 0.35);
  padding-block: var(--sp-8) var(--sp-6);
  font-size: var(--fs-sm);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr;
  gap: clamp(var(--sp-6), 4vw, var(--sp-8));
}

.footer__brand img { width: auto; height: 2.4rem; margin-bottom: var(--sp-4); }
.footer__tagline { color: var(--c-text-dim); max-width: 42ch; }

.footer__heading {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-white);
  margin-bottom: var(--sp-4);
}

.footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.footer__links a {
  color: var(--c-text-dim);
  text-decoration: none;
}
.footer__links a:hover,
.footer__links a:focus-visible { color: var(--c-gold-bright); }

.footer__contact { display: grid; gap: var(--sp-3); margin: 0; }
.footer__contact dt {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.footer__contact dd { margin: 0; color: var(--c-text-dim); }
.footer__contact a { color: var(--c-text-dim); text-decoration: none; }
.footer__contact a:hover { color: var(--c-gold-bright); }

/* ---- Social -------------------------------------------------------------- */
.social {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  list-style: none;
  padding: 0;
}
.social a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  aspect-ratio: 1;
  color: var(--c-text-dim);
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 50%;
  transition: color        var(--d-fast) var(--e-soft),
              border-color var(--d-fast) var(--e-soft),
              transform    var(--d-base) var(--e-out);
}
.social svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }

@media (hover: hover) and (pointer: fine) {
  .social a:hover { color: var(--c-gold-bright); border-color: var(--c-gold); transform: translate3d(0, -2px, 0); }
}
.social a:focus-visible { color: var(--c-gold-bright); border-color: var(--c-gold); }

@media (prefers-reduced-motion: reduce) {
  .social a:hover { transform: none; }
}

/* ---- Footer bottom ------------------------------------------------------- */
.footer__bottom {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid rgb(255 255 255 / 0.08);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  color: var(--c-text-faint);
  font-size: var(--fs-xs);
}

.footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-5); list-style: none; padding: 0; margin: 0; }
.footer__legal a { color: var(--c-text-faint); text-decoration: none; }
.footer__legal a:hover { color: var(--c-gold-bright); }

.footer__sms {
  margin-top: var(--sp-4);
  color: var(--c-text-faint);
  font-size: var(--fs-xs);
  max-width: 68ch;
}

@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Lightbox
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgb(0 0 0 / 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.lightbox__panel {
  position: relative;
  width: min(1100px, 100%);
  aspect-ratio: 16 / 9;
  background: var(--c-black);
  border: 1px solid rgb(201 169 97 / 0.4);
  border-radius: var(--r-md);
  overflow: hidden;
}
.lightbox__panel iframe,
.lightbox__panel video {
  width: 100%; height: 100%;
  border: 0;
  display: block;
}

.lightbox__close {
  position: absolute;
  top: calc(-1 * var(--sp-6));
  right: 0;
  display: grid;
  place-items: center;
  width: 2.5rem; aspect-ratio: 1;
  background: transparent;
  color: var(--c-white);
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--d-fast) var(--e-soft),
              border-color     var(--d-fast) var(--e-soft);
}
.lightbox__close:hover { background: rgb(255 255 255 / 0.12); border-color: var(--c-gold); }
.lightbox__close svg { width: 0.9rem; height: 0.9rem; stroke: currentColor; stroke-width: 2.5; fill: none; }

@media (max-width: 700px) {
  .lightbox__close { top: calc(-1 * var(--sp-7)); right: 50%; translate: 50% 0; }
}

body.is-locked { overflow: hidden; }

/* ==========================================================================
   Legal pages
   ========================================================================== */

.legal {
  padding-block: clamp(3rem, 7vw, 6rem);
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgb(24 20 16 / 0.7), transparent 70%),
    var(--c-ink);
}

.legal__header { text-align: center; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.legal__updated { margin-top: var(--sp-3); color: var(--c-text-faint); font-size: var(--fs-sm); }

.prose {
  max-width: var(--maxw-prose);
  margin-inline: auto;
  color: var(--c-text-dim);
}
.prose > * + * { margin-top: var(--sp-4); }

.prose h2 {
  margin-top: var(--sp-8);
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-white);
}
.prose h2:first-child { margin-top: 0; }

.prose h3 {
  margin-top: var(--sp-6);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--c-gold);
}

.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: var(--sp-2); }
.prose li::marker { color: var(--c-gold-dim); }
.prose strong { color: var(--c-text); }

/* Verbatim carrier-required statement — visually distinct so it is easy to
   locate during A2P review and hard to edit by accident. */
.prose .callout {
  padding: var(--sp-5);
  background: rgb(201 169 97 / 0.08);
  border-left: 3px solid var(--c-gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--c-text);
}

.prose address {
  font-style: normal;
  padding: var(--sp-5);
  background: var(--c-ink-2);
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: var(--r-sm);
}

/* Anchored table of contents on legal pages */
.toc {
  max-width: var(--maxw-prose);
  margin: 0 auto clamp(2rem, 5vw, 3rem);
  padding: var(--sp-5);
  background: var(--c-ink-2);
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: var(--r-md);
}
.toc h2 {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: var(--sp-3);
}
.toc ol { margin: 0; padding-left: 1.3em; display: grid; gap: var(--sp-1); font-size: var(--fs-sm); }