/* ============================================================
   On the Banks 2027 — Homepage Mockup
   Brand source: docs/Artworks/07 Style Guide/On The Banks Style
   Guide 2025.pdf (Visual Identity v01, Nov 2025). Colours and
   type roles below are copied verbatim from that guide, not
   invented — see docs/phase1-design-plan.md.
   ============================================================ */

@font-face {
  font-family: "Bandit Super Condensed";
  src: url("assets/fonts/Bandit-Super-Condensed.otf") format("opentype");
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: "Bandit Super Condensed Fallback";
  src:
    local("Arial Narrow"),
    local("Liberation Sans Narrow"),
    local("Nimbus Sans Narrow");
  font-weight: 400;
  size-adjust: 112%;
  ascent-override: 82%;
  descent-override: 18%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/InstrumentSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/InstrumentSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("assets/fonts/DMMono-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}

:root {
  /* Brand palette — exact hex from the style guide */
  --pink-light: #f9ecff;
  --pink: #e69fff;
  --twilight: #405cce;
  --riverbank: #390000;
  --canopy: #2c310a;
  --bark: #945d1f;

  --font-display: "Bandit Super Condensed", "Bandit Super Condensed Fallback", sans-serif;
  --font-sans: "Instrument Sans", -apple-system, sans-serif;
  --font-mono: "DM Mono", "Courier New", monospace;

  --radius-sm: 4px;
  --radius-md: 8px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --header-h: 72px;
  --stack-h: var(--header-h);

  --shell-w: min(1180px, 100% - 48px);
}

@media (max-width: 560px) {
  :root {
    --header-h: 64px;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--riverbank);
  color: var(--pink-light);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  /* Bandit ships as a single 400 weight — never let the browser fake a bold
     from it (UA default h1/h2 weight is 700, which smears the condensed
     letterforms). */
  font-synthesis: none;
}
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
a { color: inherit; }

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

.skip-link {
  position: fixed;
  top: -60px; left: 12px;
  z-index: 200;
  background: var(--pink);
  color: var(--riverbank);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }

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

.shell { width: var(--shell-w); margin-inline: auto; }

/* ---------- Grain: the brand's final noise layer, over everything ---------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background: url("assets/textures/Noise-dark-transparent.png") repeat;
  background-size: 420px;
  opacity: 0.5;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 201;
  width: 100%;
  height: 3px;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 59;
  height: var(--header-h);
  background: transparent;
}
/* Transparent toolbar over the hero — a dark top-to-transparent gradient
   keeps the light logo + nav legible against the photography (QB pattern).
   Fixed header carries the scrim, so it also holds up over sections on scroll. */
.site-header::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(var(--header-h) + 48px);
  background: linear-gradient(
    180deg,
    rgba(18, 0, 0, 0.78) 0%,
    rgba(18, 0, 0, 0.48) 42%,
    rgba(18, 0, 0, 0) 100%
  );
  pointer-events: none;
  z-index: -1;
}
.masthead-main {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-inline: 24px;
}
/* Header partner credit. Replaces the masthead QPAC logo — partner logos now
   appear once, in the footer lockup. Same label/name pairing as
   .hero-presented so the two read as one system. */
.masthead-credit {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.05;
  color: var(--pink-light);
}
.masthead-credit span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pink);
}

.primary-nav { display: flex; gap: 1.75rem; }
.primary-nav a:not(.nav-mobile-cta) {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--pink-light);
  padding-block: 4px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.primary-nav a:not(.nav-mobile-cta):hover,
.primary-nav a:not(.nav-mobile-cta):focus-visible { color: var(--pink); border-color: var(--pink); }
/* Beats .button's display:inline-flex regardless of source order */
.primary-nav .nav-mobile-cta { display: none; }

.nav-toggle {
  display: none;
  appearance: none;
  border: 1px solid var(--pink-light);
  background: transparent;
  color: var(--pink-light);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  align-items: center;
  justify-content: center;
}
.nav-toggle svg { width: 20px; height: 20px; }

@media (max-width: 860px) {
  .primary-nav {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    z-index: 58;
    background: var(--riverbank);
    border-bottom: 1px solid rgba(249, 236, 255, 0.14);
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 16px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  }
  .primary-nav.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .primary-nav a:not(.nav-mobile-cta) { padding-block: 12px; border-bottom: 1px solid rgba(249, 236, 255, 0.1); }
  .primary-nav .nav-mobile-cta {
    display: inline-flex;
    justify-content: center;
    margin-top: 14px;
    border-bottom: 0;
    border-radius: var(--radius-sm);
    color: var(--riverbank);
  }
  .site-header > .button-small { display: none; }
  .masthead-main > .button-small { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-toggle svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
}

@media (max-width: 560px) {
  .masthead-main { padding-inline: 16px; }
  .masthead-credit { font-size: 0.85rem; }
  .masthead-credit span { font-size: 0.56rem; }
}

/* ---------- Buttons, chips, kickers ---------- */
.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 0.85em 1.4em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--pink); color: var(--riverbank); }
.button-primary:hover { box-shadow: 0 10px 24px rgba(230, 159, 255, 0.35); }
.button-ghost { background: transparent; color: var(--pink-light); border-color: rgba(249, 236, 255, 0.5); }
.button-ghost:hover { border-color: var(--pink-light); }
.button-small { padding: 0.55em 1.1em; font-size: 0.85rem; }

.kicker {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--twilight);
  margin: 0 0 0.85em;
}
.kicker-on-dark { color: var(--pink); }

.chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--pink-light);
  color: var(--riverbank);
  padding: 0.5em 0.9em;
  border-radius: var(--radius-sm);
}
.chip-outline {
  background: transparent;
  color: var(--pink-light);
  border: 1px solid rgba(249, 236, 255, 0.6);
}

.text-link { color: var(--pink); font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 3px; }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-sans);
  font-weight: 600;
  text-decoration: none;
  color: var(--twilight);
}
.arrow-link .ic-arrow { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform 0.2s var(--ease); }
.arrow-link:hover .ic-arrow { transform: translateX(4px); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: calc(100svh - 44px);
  padding-top: calc(var(--stack-h) + 2.5rem);
  padding-bottom: 4rem;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.river-ticker {
  overflow: hidden;
  background: var(--pink);
  color: var(--riverbank);
  border-block: 1px solid var(--riverbank);
}
.river-ticker-track {
  width: max-content;
  display: flex;
  align-items: center;
  animation: ticker-current 28s linear infinite;
}
.river-ticker span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.river-ticker span::after {
  content: "";
  width: 34px;
  height: 1px;
  margin-inline: 18px;
  background: currentColor;
}
@keyframes ticker-current { to { transform: translateX(-50%); } }
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: -4;
  background: url("assets/photos/hero-video-poster.jpg") center / cover no-repeat;
}
/* Full-bleed background video (OOTB pattern): covers the hero at any aspect
   ratio, sits over the poster photo, fades in only once actually playing. */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  pointer-events: none;
}
.hero-video iframe {
  position: absolute;
  top: 50%; left: 50%;
  height: 100%;
  width: auto;
  aspect-ratio: 16 / 9;
  min-width: 100%;
  min-height: 100%;
  /* Crop YouTube's embed-only title/link overlays out of the background frame. */
  transform: translate(-50%, -50%) scale(1.2);
  border: 0;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.hero-video-ready .hero-video iframe { opacity: 1; }
.hero-tex {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("assets/textures/Flow-00-Full.jpg") center / cover no-repeat;
  mix-blend-mode: soft-light;
  opacity: 0.35;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(26, 0, 0, 0.35) 0%, rgba(26, 0, 0, 0.25) 40%, rgba(57, 0, 0, 0.92) 100%),
    linear-gradient(90deg, rgba(26, 0, 0, 0.66) 0%, rgba(26, 0, 0, 0.1) 60%);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 2.25rem;
}
/* min-width:0 lets the column shrink below item min-content — without it the
   hero mark's fixed px cap forces the column wider than the shell on small
   screens and the whole page overflows horizontally. */
.hero-grid > * { min-width: 0; }
.hero-mark-wrap { align-self: start; }
.hero-mark { position: relative; width: 100%; max-width: 640px; }
.hero-mark img { width: 100%; height: auto; }
.hero-mark .tile {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  background: var(--riverbank);
}

.hero-copy { max-width: 46ch; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 1.25rem; }
.hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  line-height: 1;
  /* Bandit is already super-condensed — give it air, don't tighten it */
  letter-spacing: 0.015em;
  margin: 0 0 0.6em;
}
/* The announcement itself — semi-bold and at full opacity so it reads a step
   above the line that follows it, without borrowing the display face and
   competing with the tagline directly above. */
.hero-news {
  font-size: 1.15rem;
  font-weight: 600;
  max-width: 34ch;
  margin: -0.35rem 0 0.5rem;
  color: var(--pink-light);
}
.hero-lede { font-size: 1.05rem; max-width: 40ch; margin-bottom: 1.75rem; color: rgba(249, 236, 255, 0.88); }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 1.75rem; }
.hero-cta-row .ic-arrow { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform 0.2s var(--ease); }
.hero-cta-row .button:hover .ic-arrow { transform: translateX(4px); }
.hero-presented {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  align-items: baseline;
  margin: -0.75rem 0 1.5rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--pink-light);
}
.hero-presented span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pink);
}
.hero-note {
  position: absolute;
  right: 24px; bottom: 18px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(249, 236, 255, 0.75);
  background: rgba(26, 0, 0, 0.55);
  padding: 0.45em 0.8em;
  border-radius: var(--radius-sm);
}

@media (max-width: 860px) {
  .hero { min-height: calc(100svh - 44px); }
  .hero-copy { max-width: none; }
  .hero-note { right: 16px; bottom: 14px; }
}

@media (max-width: 560px) {
  .hero {
    align-items: center;
    padding-top: calc(var(--stack-h) + 1rem);
    padding-bottom: 1rem;
  }
  .hero-grid { row-gap: 1.5rem; }
}

/* ---------- Section scaffolding ---------- */
section { padding-block: clamp(3.5rem, 8vw, 6.5rem); scroll-margin-top: calc(var(--stack-h) + 12px); }
h2 {
  font-family: var(--font-display);
  /* Bandit is the brand's headline face ("a bold headline that fills the
     room"). Sized a step under the hero tagline so section heads read as
     secondary; condensed letterforms need more px than a serif at parity. */
  font-size: clamp(2.4rem, 4.8vw, 4.1rem);
  line-height: 0.98;
  /* Already super-condensed — give it air, don't tighten it (matches hero). */
  letter-spacing: 0.01em;
}
.section-head { max-width: 60ch; margin-bottom: 2.5rem; }

/* Twilight-dominant, echoing the brand's lineup posters (Twilight base +
   river texture). Canopy/Bark stay as supporting accents only. */
.shows {
  background:
    linear-gradient(rgba(64, 92, 206, 0.9), rgba(64, 92, 206, 0.9)),
    url("assets/textures/Wave-01-Canopy.jpg") center / cover no-repeat;
  background-color: var(--twilight);
}
.shows[hidden] { display: none; }
/* Shows breathes wider than the other bands — keeps the blue matting + card
   borders, just gives the two featured panels more presence above ~1228px. */
.shows .shell { width: min(1440px, 100% - 48px); }
.shows .kicker-on-dark { color: var(--pink-light); opacity: 0.9; }
.event-cards {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.event-card { min-width: 0; }
.event-link {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  text-decoration: none;
  color: var(--pink-light);
  border: 1px solid rgba(249, 236, 255, 0.3);
  border-radius: 0;
  overflow: hidden;
  background: rgba(26, 0, 0, 0.5);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.event-card:nth-child(even) .event-media { order: 2; }
.event-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(8, 4, 2, 0.45);
}
.event-link:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 4px;
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(8, 4, 2, 0.45);
}
.event-media { position: relative; margin: 0; min-height: clamp(480px, 52vw, 640px); overflow: hidden; }
.event-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(var(--event-zoom, 1.34));
  will-change: transform;
}
/* The QPAC Madness artwork is a 1920x720 (2.67:1) panorama with the band inset
   across the middle ~20-80% of the width. The 1.15fr media column is about
   1.25:1, so cover alone crops it to the middle 47% -- the outer two members are
   gone before scale(1.34) is applied. Widening the frame is the fix, not
   dropping the zoom: at full width and 2.4:1 the crop is the middle 67%
   (16-84%), which clears the inset and leaves the shared parallax untouched. */
#event-madness {
  /* The band also sits high in the frame -- the tallest crown is 12% down. A
     centred 1.34 zoom starts its crop at 12.7%, so it shaves heads before the
     drift even runs. Anchor the zoom near the top and shorten the travel to
     match: the crop then starts at 11% at the top of the drift, and the bottom
     of the zoom still has room to spare. */
  --event-zoom-anchor: 24%;
  --event-drift: 7;
}
#event-madness .event-link { grid-template-columns: minmax(0, 1fr); }
#event-madness .event-media { min-height: 0; aspect-ratio: 2.4 / 1; }
#event-madness .event-info { padding: clamp(1.5rem, 3vw, 2.5rem); }
/* The supplied Leon Bridges file is a 600x300 brand template, not a photograph:
   the actual photo is a 431x249 (1.73:1) inset sitting dead centre, with blue
   texture and the maroon arc filling the rest. In the default 1.25:1 frame,
   cover plus scale(1.34) magnified a 282x225 slice of that inset to 799x640 --
   a 2.8x upscale, which is the mush. Framing the media at the inset's own
   aspect is what fixes it: the crop lands on the photograph instead of on a
   slice of his face, and the upscale drops by a quarter.

   Zoom and drift then trade against each other, because every pixel the drift
   travels has to come out of the zoom. A fit-exactly 1.24 is the sharpest this
   file gets (1.9x) but leaves nothing to drift into; 1.40 keeps the Madness
   travel of 7 and still stops inside the photo at both ends of the scroll
   (rows 27.9-272.1 of the 27-275 inset), for 2.2x. Tuned to 1.40 on request --
   the card moving with the others is worth the 13%. Do not raise the drift
   past 7 without raising the zoom to match, or the template's blue texture
   swings into frame at the top of the travel.

   None of this makes the card genuinely sharp. That needs a higher-resolution
   file from QPAC -- ideally the raw photograph rather than the template
   lockup. When it lands, delete this block: the card returns to the default
   frame and the default drift, and no tuning is needed. */
#event-leon-bridges {
  --event-zoom: 1.4;
  --event-drift: 7;
}
#event-leon-bridges .event-media { min-height: 0; aspect-ratio: 431 / 249; }
.event-media-note {
  position: absolute;
  left: 10px; bottom: 10px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(249, 236, 255, 0.85);
  background: rgba(26, 0, 0, 0.65);
  padding: 0.4em 0.7em;
  border-radius: var(--radius-sm);
}
/* image.note is optional in the API contract. Without this an event that ships
   without a credit still paints a padded empty chip over the artwork — easy to
   miss before, obvious now the card is the first thing under the hero. */
.event-media-note:empty { display: none; }
.event-info { display: grid; align-content: end; gap: 0.35rem; padding: clamp(1.5rem, 4vw, 3.5rem); }
.event-date {
  justify-self: start;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--riverbank);
  background: var(--pink);
  padding: 0.35em 0.75em;
  border-radius: var(--radius-sm);
}
.event-name {
  font-family: var(--font-display);
  font-size: clamp(4rem, 8vw, 7.2rem);
  line-height: 0.98;
  margin-top: 0.3rem;
}
/* Mono, not uppercase — a place name set as a label would compete with the pink
   date pill. */
.event-venue {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: rgba(249, 236, 255, 0.75);
}
/* Sits directly under the name so "when / who / where" reads as one block. */
.event-support { font-family: var(--font-sans); font-size: 0.95rem; color: rgba(249, 236, 255, 0.75); margin-top: 0.15rem; }
.event-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.55rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--pink);
}
.event-cta .ic-arrow { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform 0.2s var(--ease); }
.event-link:hover .event-cta .ic-arrow { transform: translateX(4px); }
.shows-note { color: rgba(249, 236, 255, 0.8); font-size: 0.95rem; }
@media (max-width: 860px) {
  .event-link { grid-template-columns: 1fr; }
  .event-card:nth-child(even) .event-media { order: initial; }
  .event-media { min-height: clamp(360px, 105vw, 500px); aspect-ratio: auto; }
  .event-name { font-size: clamp(3.6rem, 16vw, 6rem); }
}

.gallery { background: var(--pink-light); color: var(--riverbank); }
.gallery .kicker { color: var(--twilight); }
/* Contact sheet. 15 photos of mixed orientation, so every tile is a square
   cell and the crop is done by object-fit — the wordmark's own tiled-block
   language, and the only geometry that lets portrait and landscape sources
   sit in one grid without ragged rows. Three 2x2 feature tiles break the
   regularity; because a 2x2 tile is also square (2 cells + 1 gap in both
   axes), dense packing leaves no holes. */
.gallery-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  gap: 1rem;
}
.gallery-tile {
  aspect-ratio: 1;
  border-radius: 0;
  overflow: hidden;
  min-width: 0;
  position: relative;
}
.gallery-tile-feature { grid-column: span 2; grid-row: span 2; }
.gallery-trigger {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: zoom-in;
  text-align: left;
}
.gallery-trigger:focus-visible {
  outline: 2px solid var(--twilight);
  outline-offset: -6px;
}
.gallery-tile img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
/* Wide shots where the subject sits low in the frame — a centred square crop
   would keep the sky and lose the crowd. */
.gallery-tile-low img { object-position: 50% 76%; }
.gallery-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
  background: linear-gradient(180deg, rgba(57, 0, 0, 0.08), rgba(57, 0, 0, 0.82));
  color: var(--pink-light);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.gallery-trigger:hover .gallery-overlay,
.gallery-trigger:focus-visible .gallery-overlay {
  opacity: 1;
}
.gallery-index,
.gallery-view {
  width: fit-content;
  max-width: 100%;
  padding: 0.55rem 0.7rem;
  background: rgba(57, 0, 0, 0.72);
  border: 1px solid rgba(249, 236, 255, 0.25);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gallery-view {
  align-self: flex-end;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.gallery-credit {
  margin-top: 3rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(57, 0, 0, 0.6);
}
body.gallery-lightbox-open { overflow: hidden; }
.gallery-lightbox {
  width: min(1220px, calc(100vw - 2rem));
  max-width: none;
  margin: auto;
  padding: 0;
  border: 1px solid rgba(249, 236, 255, 0.16);
  background: var(--riverbank);
  color: var(--pink-light);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}
.gallery-lightbox[open] {
  opacity: 1;
  transform: translateY(0);
}
.gallery-lightbox::backdrop {
  background: rgba(10, 1, 12, 0.86);
  backdrop-filter: blur(4px);
}
.gallery-lightbox-inner {
  position: relative;
  padding: 1.5rem;
}
.gallery-lightbox-close,
.gallery-lightbox-prev,
.gallery-lightbox-next {
  border: 1px solid rgba(249, 236, 255, 0.25);
  background: rgba(249, 236, 255, 0.08);
  color: var(--pink-light);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
}
.gallery-lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  padding: 0.8rem 0.95rem;
}
.gallery-lightbox-prev,
.gallery-lightbox-next {
  align-self: center;
  padding: 0.95rem 0.8rem;
}
.gallery-lightbox-close:focus-visible,
.gallery-lightbox-prev:focus-visible,
.gallery-lightbox-next:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
}
.gallery-lightbox-stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
}
.gallery-lightbox-figure {
  margin: 0;
}
#gallery-lightbox-image {
  display: block;
  width: 100%;
  max-width: min(100%, 900px);
  max-height: 72vh;
  margin-inline: auto;
  object-fit: contain;
  background: rgba(249, 236, 255, 0.03);
}
.gallery-lightbox-copy {
  display: grid;
  gap: 0.55rem;
  margin-top: 1rem;
}
.gallery-lightbox-counter,
.gallery-lightbox-credit {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gallery-lightbox-caption {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: rgba(249, 236, 255, 0.86);
}
/* Below the 4-column sheet the feature tiles are dropped: 15 uniform squares
   divide evenly into 3 columns, and a 2x2 tile in a 3-column grid can only
   pack by reordering tiles out of DOM order. */
@media (max-width: 1080px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-tile-feature { grid-column: auto; grid-row: auto; }
}
/* Two columns only once three would leave the tiles too small to read.
   15 tiles over 2 columns leaves an orphan, so the last one runs full width
   and closes the sheet. */
@media (max-width: 720px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .gallery-tile:last-child { grid-column: span 2; aspect-ratio: 16 / 10; }
}
@media (max-width: 860px) {
  .gallery-credit { margin-top: 2rem; }
  /* No hover on touch, so the overlay is permanent. Across 15 tiles a
     full-tile scrim dulls the whole sheet, so keep only the index chip —
     it carries its own background and the tile is obviously tappable. */
  .gallery-overlay { opacity: 1; padding: 0.8rem; background: none; }
  .gallery-view { display: none; }
  .gallery-index { padding: 0.45rem 0.6rem; font-size: 0.66rem; }
  .gallery-lightbox {
    width: calc(100vw - 1rem);
  }
  .gallery-lightbox-inner { padding: 3.75rem 0.75rem 1rem; }
  .gallery-lightbox-close {
    top: 0.75rem;
    right: 0.75rem;
  }
  .gallery-lightbox-stage {
    grid-template-columns: 1fr;
  }
  .gallery-lightbox-prev,
  .gallery-lightbox-next {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-tile img,
  .gallery-overlay,
  .gallery-lightbox {
    transition: none;
  }
}

/* Light band. Sits between the dark Announcement and the blue Shows, so it's
   deliberately pink-light — keeps the dark → light → blue rhythm and makes the
   Get Notified CTA (moved up for launch) read as a bright priority band. */
.subscribe { background: var(--pink-light); color: var(--riverbank); }
.subscribe .kicker { color: var(--twilight); opacity: 1; }
.subscribe-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; }
.subscribe-grid > div p { color: rgba(57, 0, 0, 0.78); margin-top: 0.75rem; max-width: 40ch; }
.subscribe-action { display: grid; justify-items: start; gap: 0.3rem; }
.subscribe-action p { margin: 0; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; }
.subscribe-cta { background: var(--twilight); color: var(--pink-light); }
.subscribe-cta .ic-arrow { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform 0.2s var(--ease); }
.subscribe-cta:hover { box-shadow: 0 10px 24px rgba(64, 92, 206, 0.35); }
.subscribe-cta:hover .ic-arrow { transform: translateX(4px); }
@media (max-width: 860px) {
  .subscribe-grid { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* Blue band. Now that Subscribe moved up (and turned light), About takes the
   Twilight treatment Subscribe vacated — keeps Gallery (light) and Visit (dark)
   on either side from touching same-coloured neighbours. */
.about {
  background:
    linear-gradient(rgba(64, 92, 206, 0.92), rgba(64, 92, 206, 0.92)),
    url("assets/textures/Ripple-01-Riverbank.jpg") center / cover no-repeat;
  background-color: var(--twilight);
  color: var(--pink-light);
}
.about .kicker { color: var(--pink-light); opacity: 0.9; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.about-copy p { color: rgba(249, 236, 255, 0.85); max-width: 46ch; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; gap: 1.25rem; } }

.visit { background: var(--riverbank); }
.visit-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; }
.map-embed { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; border: 1px solid rgba(249, 236, 255, 0.25); }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.15) invert(0.92) hue-rotate(180deg) contrast(0.9); }
.visit-copy p { color: rgba(249, 236, 255, 0.85); max-width: 40ch; margin-top: 0.75rem; }
@media (max-width: 860px) { .visit-grid { grid-template-columns: 1fr; gap: 1.75rem; } .visit-grid .map-embed { order: 2; } }

.accessibility { background: var(--pink-light); color: var(--riverbank); }
.accessibility .kicker { color: var(--twilight); }
.accessibility-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.accessibility-copy p { color: rgba(57, 0, 0, 0.78); max-width: 46ch; margin-bottom: 1.25rem; }
.accessibility-copy .arrow-link { color: var(--riverbank); }
@media (max-width: 860px) { .accessibility-grid { grid-template-columns: 1fr; gap: 1.25rem; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--riverbank); padding-block: 4rem 2rem; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(249, 236, 255, 0.16);
}
.footer-presented {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 0.75rem;
}
.footer-brand { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.partner-logo { width: auto; }
/* QPAC signature is the full QPAC + Queensland Government lockup, so it sits
   taller than the SB mark — the QGov wordmark is unreadable much below this. */
.partner-logo-qpac { height: 72px; }
/* South Bank's minimum-size lockup: the mark and wordmark sit side by side
   rather than stacked inside the monogram, so it stays legible at footer
   scale. 40px keeps the wordmark weight level with the QPAC signature's. */
.partner-logo-sb {
  height: 40px;
  padding-left: 1.5rem;
  border-left: 1px solid rgba(249, 236, 255, 0.3);
}
/* The pair no longer fits on one line below ~433px, and a left rule would then
   hang off the start of the wrapped row. Dropping the rule first also buys
   back 24px, keeping them side by side down to ~409px. */
@media (max-width: 440px) {
  .partner-logo-sb { padding-left: 0; border-left: 0; }
}
.footer-about p { color: rgba(249, 236, 255, 0.75); max-width: 38ch; }
.site-footer h2 { font-family: var(--font-mono); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.site-footer a { text-decoration: none; color: rgba(249, 236, 255, 0.85); }
.site-footer a:hover { color: var(--pink); }
/* Poster grammar: content columns, then the logo, then a thin fine-print
   row — the same order the style guide's posters end on, but capped to a
   sane scale for a desktop page rather than literal margin-to-margin. */
.footer-mark { margin-top: 3rem; padding-inline: 24px; line-height: 0; display: flex; justify-content: center; }
.footer-mark img { width: min(680px, 100%); height: auto; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: 1.1rem 0.2rem;
  border-top: 1px solid rgba(249, 236, 255, 0.16);
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(249, 236, 255, 0.65);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } .footer-mark { padding-inline: 16px; margin-top: 2rem; } }

/* ---------- Reveal states (gated behind .anim-ready so content is
   never invisible if JS fails to run) ---------- */
html.anim-ready [data-reveal] { opacity: 0; transform: translateY(28px); }
html.anim-ready [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  /* Motion is intentionally forced on for this mockup (matches OOTB 2026 /
     Clancestry 2026's documented trade-off) — see phase1-design-plan.md. */
}

/* ---------- Stacked arrow-links (homepage accessibility block) ---------- */
.link-stack { display: flex; flex-direction: column; align-items: start; gap: 0.75rem; }

/* ============================================================
   FAQ PAGE (faq.html)
   Utility second page — no hero, no Locomotive/GSAP. Reuses the
   brand tokens, header, and footer above. The accordion is the
   page's signature: hard-edged ruled rows echoing the tiled-block
   wordmark, with a DM Mono +/– marker. Native <details>/<summary>,
   so it works with zero JavaScript.
   ============================================================ */

/* No dark hero sits behind the header here, so give it a solid base
   and drop the hero gradient scrim. */
.faq-page .site-header {
  background: var(--riverbank);
  border-bottom: 1px solid rgba(249, 236, 255, 0.14);
}
.faq-page .site-header::before { display: none; }
.faq-page main { padding-top: var(--header-h); }
/* :not() keeps the current-page tint off the mobile CTA — that button is
   already pink-on-riverbank, so recolouring it renders pink text on pink. */
.faq-page .primary-nav a[aria-current="page"]:not(.nav-mobile-cta) { color: var(--pink); border-color: var(--pink); }

/* ---- Banner ---- */
.faq-banner { position: relative; overflow: hidden; }
.faq-banner::after {
  content: "";
  position: absolute;
  width: min(46vw, 640px);
  aspect-ratio: 1;
  right: -9vw;
  top: -32%;
  background: url("assets/textures/Ripple-01-Riverbank.jpg") center / cover no-repeat;
  opacity: 0.18;
  pointer-events: none;
}
.faq-banner-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 3rem;
  align-items: end;
}
.faq-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 0.92;
  /* Bandit is already super-condensed — give it air (matches hero/H2). */
  letter-spacing: 0.015em;
}
.faq-intro p { max-width: 48ch; color: rgba(249, 236, 255, 0.88); }
.faq-intro p + p { margin-top: 1rem; }
.faq-disclaimer { font-size: 0.92rem; color: rgba(249, 236, 255, 0.66); }

/* ---- Groups ---- */
.faq-body { padding-bottom: clamp(3rem, 6vw, 5rem); }
.faq-group {
  display: grid;
  grid-template-columns: 0.5fr 1.5fr;
  gap: 1.5rem 4rem;
  padding-block: clamp(2.25rem, 4vw, 3.5rem);
  border-top: 1px solid rgba(249, 236, 255, 0.14);
}
.faq-group:first-of-type { border-top: 0; padding-top: 0; }
.faq-group-title {
  position: sticky;
  top: calc(var(--header-h) + 1rem);
  align-self: start;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.9rem);
  line-height: 0.98;
  letter-spacing: 0.01em;
  color: var(--pink);
}

/* ---- Accordion items ---- */
.faq-list { border-top: 1px solid rgba(249, 236, 255, 0.16); }
.faq-item { border-bottom: 1px solid rgba(249, 236, 255, 0.16); }
.faq-item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--pink-light);
  list-style: none;
  transition: color 0.2s var(--ease);
}
/* Suppress the native disclosure triangle across engines. */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary:hover { color: var(--pink); }
.faq-item summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-mono);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--pink);
}
.faq-item[open] summary::after { content: "\2013"; } /* en dash */
.faq-answer { padding: 0 0 1.5rem; display: grid; gap: 0.85rem; }
.faq-answer p { max-width: 62ch; color: rgba(249, 236, 255, 0.82); }
.faq-answer strong { font-weight: 600; color: var(--pink-light); }
/* Square bullets echo the tiled-block wordmark rather than default discs. */
.faq-answer ul {
  max-width: 62ch;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
  color: rgba(249, 236, 255, 0.82);
}
.faq-answer li { position: relative; padding-left: 1.1rem; }
.faq-answer li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  background: var(--pink);
}
.faq-answer li ul { margin-top: 0.4rem; }
.faq-answer li li::before { background: rgba(230, 159, 255, 0.4); }

.faq-foot-note { margin-top: 3rem; color: rgba(249, 236, 255, 0.7); }

@media (max-width: 860px) {
  .faq-banner-grid { grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
  .faq-group { grid-template-columns: 1fr; gap: 1.25rem; }
  .faq-group-title { position: static; }
  .faq-banner::after { width: 80vw; right: -30vw; top: -8%; }
}

/* ============================================================
   SUBSCRIPTION PAGE (subscribe.html)
   One deliberate gesture: a fluorescent riverline crosses the dark
   introduction and points toward the light sign-up panel. Everything
   else stays quiet, square, and consistent with the wordmark grid.
   ============================================================ */

.subscribe-page .site-header {
  background: var(--riverbank);
  border-bottom: 1px solid rgba(249, 236, 255, 0.14);
}
.subscribe-page .site-header::before { display: none; }
/* See .faq-page equivalent above — the mobile CTA stays riverbank-on-pink. */
.subscribe-page .primary-nav a[aria-current="page"]:not(.nav-mobile-cta) { color: var(--pink); border-color: var(--pink); }
.subscription-main { padding-top: var(--header-h); }

.subscription-hero {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - var(--header-h));
  padding-block: clamp(3.5rem, 8vw, 7rem);
  background:
    linear-gradient(112deg, rgba(57, 0, 0, 0.96) 0%, rgba(57, 0, 0, 0.91) 49%, rgba(64, 92, 206, 0.92) 100%),
    url("assets/textures/Flow-00-Full.jpg") center / cover no-repeat;
}
.subscription-hero::after {
  content: "";
  position: absolute;
  width: min(52vw, 760px);
  aspect-ratio: 1;
  left: -19vw;
  bottom: -45%;
  border: 1px solid rgba(230, 159, 255, 0.2);
  border-radius: 50%;
  box-shadow:
    0 0 0 4vw rgba(230, 159, 255, 0.025),
    0 0 0 8vw rgba(230, 159, 255, 0.018);
  pointer-events: none;
}
.subscription-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}
.subscription-layout > * { min-width: 0; }
.subscription-intro { max-width: 540px; }
.subscription-intro h1 {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 10vw, 8.5rem);
  line-height: 0.82;
  letter-spacing: 0.015em;
  color: var(--pink-light);
}
.subscription-lede {
  max-width: 34ch;
  margin-top: 1.5rem;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.5;
  color: rgba(249, 236, 255, 0.82);
}
.subscription-riverline {
  display: grid;
  grid-template-columns: auto minmax(2rem, 1fr) auto;
  align-items: center;
  gap: 1rem;
  width: min(100%, 460px);
  margin-top: clamp(2.5rem, 6vw, 5rem);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pink);
}
.subscription-riverline-rule {
  height: 3px;
  background: var(--pink);
  box-shadow: 0 0 18px rgba(230, 159, 255, 0.75);
}

.subscription-panel {
  position: relative;
  min-width: 0;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  background: var(--pink-light);
  color: var(--riverbank);
  box-shadow: 18px 18px 0 rgba(230, 159, 255, 0.22);
}
.subscription-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34%;
  height: 7px;
  background: var(--twilight);
}
.subscription-panel-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--twilight);
}
.subscription-panel h2 {
  margin-top: 0.3rem;
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 0.9;
  letter-spacing: 0.012em;
}
.subscription-panel-intro {
  max-width: 42ch;
  margin-top: 0.9rem;
  color: rgba(57, 0, 0, 0.72);
}
.subscription-form { margin-top: 2rem; }
.subscription-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem;
}
.subscription-field { display: grid; gap: 0.4rem; }
.subscription-field-email { grid-column: 1 / -1; }
.subscription-field label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9rem;
}
.subscription-field input {
  width: 100%;
  min-height: 48px;
  padding: 0.78rem 0.9rem;
  border: 1px solid rgba(57, 0, 0, 0.36);
  border-radius: 0;
  background: #fff;
  color: var(--riverbank);
  font: inherit;
}
.subscription-field input:hover { border-color: var(--twilight); }
.subscription-field input:focus-visible {
  outline-color: var(--twilight);
  border-color: var(--twilight);
}
.subscription-form[data-validation-attempted="true"] .subscription-field input:invalid:not(:focus) { border-color: #9b1c1c; }
.subscription-consent {
  margin-top: 1rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(57, 0, 0, 0.68);
}
.subscription-consent a,
.recaptcha-notice a { color: var(--twilight); font-weight: 600; text-underline-offset: 2px; }
.subscription-submit {
  width: 100%;
  min-height: 52px;
  margin-top: 1.4rem;
  border: 0;
  border-radius: 0;
  background: var(--twilight);
  color: var(--pink-light);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), opacity 0.2s var(--ease);
}
.subscription-submit:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(64, 92, 206, 0.34);
}
.subscription-submit:disabled { cursor: wait; opacity: 0.58; }
.subscription-form[data-state="complete"] .subscription-submit:disabled { cursor: default; opacity: 1; }
.subscription-form[data-state="complete"] .subscription-fields,
.subscription-form[data-state="complete"] .subscription-consent,
.subscription-form[data-state="complete"] .recaptcha-notice { display: none; }
.subscription-status {
  min-height: 1.5em;
  margin-top: 0.9rem;
  font-weight: 600;
  font-size: 0.9rem;
}
.subscription-status[data-state="pending"] { color: var(--twilight); }
.subscription-status[data-state="error"] { color: #7f1515; }
.subscription-status[data-state="success"] { color: var(--canopy); }
.recaptcha-notice {
  margin-top: 0.65rem;
  font-size: 0.7rem;
  line-height: 1.45;
  color: rgba(57, 0, 0, 0.56);
}
.subscription-noscript {
  margin-top: 1rem;
  padding: 0.8rem;
  border: 1px solid #7f1515;
  color: #7f1515;
  font-weight: 600;
}

@media (max-width: 860px) {
  .subscription-layout { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  .subscription-intro { max-width: 650px; }
  .subscription-panel { box-shadow: 12px 12px 0 rgba(230, 159, 255, 0.22); }
}

@media (max-width: 560px) {
  .subscription-hero { padding-block: 2.75rem 4rem; }
  .subscription-layout { grid-template-columns: minmax(0, 1fr); }
  .subscription-intro h1 { font-size: clamp(4.3rem, 24vw, 6.5rem); }
  .subscription-fields { grid-template-columns: 1fr; }
  .subscription-field-email { grid-column: auto; }
  .subscription-panel { margin-right: 7px; padding: 1.4rem; box-shadow: 7px 7px 0 rgba(230, 159, 255, 0.25); }
  .subscription-riverline { gap: 0.7rem; font-size: 0.68rem; }
}

@media (prefers-reduced-motion: reduce) {
  .subscription-submit { transition: none; }
}