/* ==========================================================================
   THE SOUL OF ABBA — stylesheet
   --------------------------------------------------------------------------
   Section 1 is the design system's tokens, copied verbatim from the handoff.
   Change a colour or a size there and it changes everywhere on the site.
   Everything below section 1 uses those tokens and should rarely need editing.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS  —  the palette, type and spacing. Edit here to recolour the site.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Righteous&family=Archivo:ital,wght@0,400..800;1,400..700&family=Archivo+Narrow:wght@400..700&family=DM+Mono:wght@400;500&display=swap");

:root {
  /* -- fonts -- */
  --font-display: "Alfa Slab One", "Cooper Black", Georgia, serif;
  --font-groove: "Righteous", "Bauhaus 93", system-ui, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", system-ui, sans-serif;
  --font-condensed: "Archivo Narrow", "Archivo", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", monospace;

  /* -- base palette: midnight (the club) -- */
  --midnight-900: #0B0616;
  --midnight-800: #150C2B;
  --midnight-700: #221345;
  --midnight-600: #311D5E;
  --midnight-500: #452A7E;

  /* -- base palette: paper (the sleeve) -- */
  --paper-100: #FDF8EE;
  --paper-200: #F6ECD9;
  --paper-300: #EFE0C4;
  --paper-400: #DFCBA9;
  --paper-500: #BCA485;

  /* -- base palette: chroma -- */
  --rust-500: #C2452D;
  --rust-600: #9E3421;
  --gold-400: #F0B93C;
  --gold-500: #E0982A;
  --magenta-500: #E0338C;
  --magenta-600: #B81F6D;
  --grape-500: #7A3CC8;
  --grape-600: #5D2AA0;
  --cobalt-500: #4B57D8;
  --teal-500: #35A7C4;
  --lime-400: #BCE14D;

  /* -- ink -- */
  --ink-900: #100A1F;
  --ink-700: #3A2C4E;
  --ink-500: #6B5B7E;

  /* -- semantic: surfaces -- */
  --surface-stage: var(--midnight-900);
  --surface-floor: var(--midnight-800);
  --surface-riser: var(--midnight-700);
  --surface-card: var(--midnight-600);
  --surface-sleeve: var(--paper-200);
  --surface-sleeve-alt: var(--paper-300);
  --surface-card-light: var(--paper-100);

  /* -- semantic: text -- */
  --text-hero: var(--gold-400);
  --text-title: var(--paper-100);
  --text-body: var(--paper-300);
  --text-muted: #8E7CA3;
  --text-on-light: var(--ink-900);
  --text-body-on-light: var(--ink-700);
  --text-muted-on-light: var(--ink-500);
  --text-link: var(--magenta-500);
  --text-link-hover: var(--gold-400);

  /* -- semantic: interactive -- */
  --action-primary: var(--rust-500);
  --action-primary-hover: #D4553C;
  --action-primary-press: var(--rust-600);
  --action-secondary: var(--gold-400);
  --action-secondary-hover: #F7C95C;
  --action-accent: var(--magenta-500);
  --action-accent-hover: #F04C9E;
  --action-on-dark-ghost: rgba(246, 236, 217, 0.10);

  /* -- semantic: lines -- */
  --line-hairline: rgba(246, 236, 217, 0.16);
  --line-strong: var(--paper-300);
  --line-ink: var(--ink-900);
  --line-hairline-on-light: rgba(16, 10, 31, 0.16);

  /* -- semantic: status -- */
  --status-live: var(--magenta-500);
  --status-ok: var(--lime-400);
  --status-warn: var(--gold-500);
  --status-danger: var(--rust-500);
  --status-info: var(--teal-500);

  /* -- gradients / stage lighting -- */
  --spot-warm: radial-gradient(120% 90% at 50% 0%, rgba(240,185,60,.30) 0%, rgba(224,51,140,.14) 38%, rgba(11,6,22,0) 72%);
  --spot-cool: radial-gradient(100% 80% at 80% 10%, rgba(75,87,216,.34) 0%, rgba(11,6,22,0) 70%);
  --protect-bottom: linear-gradient(180deg, rgba(11,6,22,0) 0%, rgba(11,6,22,.86) 70%, #0B0616 100%);
  --sunset-rays: repeating-linear-gradient(100deg, var(--rust-500) 0 6px, var(--gold-400) 6px 12px, var(--magenta-500) 12px 18px, var(--grape-500) 18px 24px);

  /* -- type ramp -- */
  --text-3xs: 11px;
  --text-2xs: 12px;
  --text-xs: 13px;
  --text-sm: 15px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 25px;
  --text-2xl: 32px;
  --text-3xl: 42px;
  --text-4xl: 56px;
  --text-5xl: 76px;
  --text-6xl: 104px;
  --text-7xl: 148px;

  --leading-tight: 0.92;
  --leading-display: 1.02;
  --leading-snug: 1.25;
  --leading-body: 1.55;
  --leading-loose: 1.7;

  --tracking-poster: -0.02em;
  --tracking-normal: 0em;
  --tracking-label: 0.14em;
  --tracking-eyebrow: 0.28em;

  --weight-body: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 800;

  --type-poster: var(--weight-body) var(--text-6xl)/var(--leading-tight) var(--font-display);
  --type-display: var(--weight-body) var(--text-4xl)/var(--leading-display) var(--font-display);
  --type-title: var(--weight-body) var(--text-2xl)/var(--leading-snug) var(--font-groove);
  --type-heading: var(--weight-bold) var(--text-lg)/var(--leading-snug) var(--font-body);
  --type-body: var(--weight-body) var(--text-md)/var(--leading-body) var(--font-body);
  --type-body-sm: var(--weight-body) var(--text-sm)/var(--leading-body) var(--font-body);
  --type-label: var(--weight-bold) var(--text-2xs)/1.2 var(--font-condensed);
  --type-eyebrow: var(--weight-bold) var(--text-3xs)/1.2 var(--font-condensed);
  --type-mono: var(--weight-body) var(--text-2xs)/1.4 var(--font-mono);

  /* -- spacing: 4px base, with the 6px half-step the posters use -- */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 56px;
  --space-11: 72px;
  --space-12: 96px;
  --space-13: 128px;

  --gutter-tight: var(--space-4);
  --gutter: var(--space-7);
  --gutter-wide: var(--space-9);
  --section-y: var(--space-12);
  --section-y-sm: var(--space-10);
  --page-x: clamp(16px, 5vw, 56px);

  --container-max: 1240px;
  --container-narrow: 760px;
  --header-h: 64px;

  /* -- radius -- */
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --radius-disc: 50%;

  --border-hair: 1px;
  --border-rule: 2px;
  --border-poster: 3px;
  --border-chunk: 4px;

  /* -- elevation -- */
  --shadow-offset-sm: 3px 3px 0 var(--ink-900);
  --shadow-offset-md: 6px 6px 0 var(--ink-900);
  --shadow-offset-lg: 10px 10px 0 var(--ink-900);
  --shadow-offset-magenta: 6px 6px 0 var(--magenta-500);
  --shadow-offset-gold: 6px 6px 0 var(--gold-400);

  --shadow-card: 0 2px 0 rgba(16,10,31,.5), 0 18px 40px -24px rgba(0,0,0,.9);
  --shadow-pop: 0 24px 60px -28px rgba(0,0,0,.95);
  --shadow-inset-groove: inset 0 1px 0 rgba(246,236,217,.10), inset 0 -1px 0 rgba(0,0,0,.35);

  --glow-magenta: 0 0 0 1px rgba(224,51,140,.5), 0 0 32px -6px rgba(224,51,140,.65);
  --glow-gold: 0 0 0 1px rgba(240,185,60,.55), 0 0 30px -6px rgba(240,185,60,.6);
  --focus-ring: 0 0 0 3px rgba(240,185,60,.9);

  /* -- motion -- */
  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --dur-marquee: 26s;

  --ease-standard: cubic-bezier(.2, .6, .2, 1);
  --ease-out-groove: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.5, 0, .9, .3);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);

  --press-scale: 0.97;
  --hover-lift: -2px;

  /* -- texture: every large surface carries print grain -- */
  --grain-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
  --grain-opacity: 0.14;
  --grain-opacity-light: 0.09;
  --grain-blend: overlay;
}


/* ==========================================================================
   2. BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--surface-stage);
  color: var(--text-body);
  font: var(--type-body);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; color: var(--text-title); }
p { margin: 0; }
img { max-width: 100%; }

a {
  color: var(--text-link);
  text-decoration: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--text-link-hover); }

::selection { background: var(--magenta-500); color: var(--paper-100); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.skip-link {
  position: absolute;
  left: var(--space-5);
  top: -60px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--gold-400);
  color: var(--ink-900);
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  transition: top var(--dur-base) var(--ease-out-groove);
}
.skip-link:focus { top: var(--space-5); color: var(--ink-900); }

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


/* ==========================================================================
   3. LAYOUT HELPERS
   ========================================================================== */

.section { position: relative; padding: var(--section-y) var(--page-x); }
.section--stage  { background: var(--surface-stage); }
.section--floor  { background: var(--surface-floor); }
.section--sleeve { background: var(--surface-sleeve); }
.section--sleeve-alt { background: var(--surface-sleeve-alt); }

.section__top { padding-top: calc(var(--space-13) + 20px); padding-bottom: var(--space-10); }

.container { position: relative; max-width: var(--container-max); margin: 0 auto; }
.container--narrow { max-width: var(--container-narrow); }

.stack { display: flex; flex-direction: column; }
.stack--3 { gap: var(--space-3); }
.stack--4 { gap: var(--space-4); }
.stack--5 { gap: var(--space-5); }
.stack--6 { gap: var(--space-6); }
.stack--7 { gap: var(--space-7); }
.stack--8 { gap: var(--space-8); }
.stack--9 { gap: var(--space-9); }

/* Grain and stage-light overlays. Both are decorative and never catch clicks. */
.grain::after,
.overlay {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.grain { position: relative; }
.grain::after {
  background-image: var(--grain-url);
  background-size: 150px 150px;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
}
.grain--light::after { opacity: var(--grain-opacity-light); }

.overlay--warm { background: var(--spot-warm); }
.overlay--warm-soft { background: var(--spot-warm); opacity: .5; }
.overlay--cool { background: var(--spot-cool); }


/* ==========================================================================
   4. TYPE ROLES
   ========================================================================== */

.eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.eyebrow--gold { color: var(--gold-400); }
.eyebrow--rust { color: var(--rust-600); }
.eyebrow--muted { color: var(--text-muted); }
.eyebrow--paper { color: var(--paper-300); }

.label {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.mono { font: var(--type-mono); }

.section-title {
  font: var(--type-title);
  font-size: clamp(25px, 4vw, 42px);
  color: var(--text-title);
}
.section-title--on-light { color: var(--text-on-light); }

.lede {
  font: var(--type-body);
  font-size: clamp(17px, 2vw, 20px);
  color: var(--paper-200);
}
.body-sm { font: var(--type-body-sm); }
.muted { color: var(--text-muted); }
.on-light { color: var(--text-body-on-light); }

/* The brand mark, set in type: fat display caps with a hard offset shadow.
   Matches the supplied logo artwork exactly, but stays sharp and selectable. */
.poster {
  font-family: var(--font-display);
  font-weight: var(--weight-body);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-poster);
  text-transform: uppercase;
  margin: 0;
}
.poster > span { display: block; }
.poster--gold > span    { color: var(--gold-400);    text-shadow: var(--poster-offset, 6px) var(--poster-offset, 6px) 0 var(--ink-900); }
.poster--paper > span   { color: var(--paper-100);   text-shadow: var(--poster-offset, 6px) var(--poster-offset, 6px) 0 var(--ink-900); }
.poster--rust > span    { color: var(--rust-500);    text-shadow: var(--poster-offset, 6px) var(--poster-offset, 6px) 0 var(--ink-900); }
.poster--magenta > span { color: var(--magenta-500); text-shadow: var(--poster-offset, 6px) var(--poster-offset, 6px) 0 var(--ink-900); }


/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

/* -- Button ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  font-family: var(--font-condensed);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition:
    transform var(--dur-fast) var(--ease-standard),
    background var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}
.btn--sm { padding: 8px 16px;  font-size: var(--text-3xs); }
.btn--md { padding: 12px 24px; font-size: var(--text-2xs); }
.btn--lg { padding: 16px 34px; font-size: var(--text-sm); }

.btn--primary   { background: var(--action-primary);   color: var(--paper-100); box-shadow: var(--shadow-offset-sm); }
.btn--secondary { background: var(--action-secondary); color: var(--ink-900);   box-shadow: var(--shadow-offset-sm); }
.btn--accent    { background: var(--action-accent);    color: var(--paper-100); box-shadow: var(--shadow-offset-sm); }
.btn--outline   { background: transparent; color: var(--paper-200); box-shadow: inset 0 0 0 var(--border-rule) var(--line-strong); }
.btn--ghost     { background: var(--action-on-dark-ghost); color: var(--paper-200); }

.btn--primary:hover   { background: var(--action-primary-hover);   color: var(--paper-100); }
.btn--secondary:hover { background: var(--action-secondary-hover); color: var(--ink-900); }
.btn--accent:hover    { background: var(--action-accent-hover);    color: var(--paper-100); }
.btn--outline:hover   { background: var(--paper-200); color: var(--ink-900); }
.btn--ghost:hover     { background: rgba(246, 236, 217, 0.18); color: var(--paper-200); }

/* Press: the button travels into its own offset shadow, which disappears. */
.btn:active { transform: translate(2px, 2px) scale(var(--press-scale)); box-shadow: none; }

/* -- Tag ------------------------------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 500;
  color: var(--paper-300);
  background: transparent;
  box-shadow: inset 0 0 0 var(--border-hair) var(--line-hairline);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
a.tag:hover, .tag--interactive:hover { background: rgba(246, 236, 217, .14); color: var(--paper-300); }

/* -- Badge ----------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  background: var(--magenta-500);
  color: var(--paper-100);
}
.badge__dot { width: 6px; height: 6px; border-radius: var(--radius-disc); background: currentColor; }

/* -- Card ------------------------------------------------------------------ */
.card {
  position: relative;
  padding: var(--space-7);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-card);
  color: var(--text-body);
  box-shadow: var(--shadow-card);
  border: none;
  transition: transform var(--dur-base) var(--ease-out-groove), box-shadow var(--dur-base) var(--ease-out-groove);
}
/* Every card carries print grain — it is what makes the layout read as printed. */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--grain-url);
  background-size: 140px 140px;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
}
.card--sleeve::after { opacity: var(--grain-opacity-light); }
.card--flush { padding: 0; }
.card--sleeve {
  background: var(--surface-card-light);
  color: var(--text-body-on-light);
  box-shadow: var(--shadow-offset-md);
  border: var(--border-poster) solid var(--ink-900);
}
.card--interactive { cursor: pointer; }
.card--interactive:hover { transform: translateY(var(--hover-lift)); }

/* -- Form fields ----------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--space-3); }
.field__label {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--paper-400);
}
.field__control {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: rgba(11, 6, 22, .45);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  box-shadow: inset 0 0 0 var(--border-hair) var(--line-hairline);
  transition: box-shadow var(--dur-fast) var(--ease-standard);
}
.field__control:hover { box-shadow: inset 0 0 0 var(--border-hair) rgba(246, 236, 217, .34); }
.field__control:focus-within { box-shadow: var(--focus-ring); }
.field.is-invalid .field__control,
.field.is-invalid .field__control:hover { box-shadow: inset 0 0 0 var(--border-rule) var(--status-danger); }

.field__control input,
.field textarea {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--paper-100);
  font: var(--type-body-sm);
}
.field textarea {
  background: rgba(11, 6, 22, .45);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  box-shadow: inset 0 0 0 var(--border-hair) var(--line-hairline);
  resize: vertical;
  transition: box-shadow var(--dur-fast) var(--ease-standard);
}
.field textarea:focus { box-shadow: var(--focus-ring); }

/* Date inputs render their own calendar glyph dark on dark — lift it. */
.field__control input[type="date"] { color-scheme: dark; }

.field__error {
  font: var(--type-body-sm);
  font-size: var(--text-2xs);
  color: var(--status-danger);
  min-height: 0;
}
.field:not(.is-invalid) .field__error { display: none; }

.select-wrap { position: relative; display: flex; }
.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  cursor: pointer;
  padding: 13px 40px 13px 16px;
  border-radius: var(--radius-sm);
  border: none;
  background: rgba(11, 6, 22, .45);
  color: var(--paper-100);
  font: var(--type-body-sm);
  box-shadow: inset 0 0 0 var(--border-hair) var(--line-hairline);
  outline: none;
  transition: box-shadow var(--dur-fast) var(--ease-standard);
}
.select-wrap select:focus { box-shadow: var(--focus-ring); }
.select-wrap select option { background: var(--midnight-800); color: var(--paper-100); }
.select-wrap::after {
  content: "\25BC";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--paper-400);
  pointer-events: none;
  font-size: 11px;
}

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* -- Marquee --------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  height: 44px;
  display: flex;
  align-items: center;
  background: var(--gold-400);
  color: var(--ink-900);
}
.marquee__track {
  display: flex;
  white-space: nowrap;
  will-change: transform;
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  animation: marquee 30s linear infinite;
}
.marquee__run { display: flex; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding-right: var(--space-6);
}
.marquee__sep { opacity: .7; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }


/* ==========================================================================
   6. HEADER, SCROLL PROGRESS, FOOTER
   ========================================================================== */

.progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--gold-400);
  box-shadow: var(--glow-gold);
  z-index: 80;
}

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: 20px clamp(16px, 4vw, 40px);
  background: transparent;
  transition:
    background var(--dur-base) var(--ease-standard),
    padding var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard);
}
.site-header.is-solid {
  background: rgba(11, 6, 22, .82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 12px clamp(16px, 4vw, 40px);
  box-shadow: 0 1px 0 rgba(246, 236, 217, .16);
}

.site-header__mark {
  font: var(--type-label);
  font-size: clamp(13px, 1.6vw, 15px);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold-400);
}
.site-header__mark:hover { color: var(--gold-400); }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.4vw, 28px);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.site-nav a {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--paper-200);
}
.site-nav a:hover { color: var(--gold-400); }
.site-nav a[aria-current="page"] { color: var(--gold-400); }

.site-footer {
  position: relative;
  background: var(--midnight-900);
  padding: var(--space-11) var(--page-x) var(--space-9);
  border-top: 1px solid var(--line-hairline);
}
.site-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-9);
  justify-content: space-between;
  align-items: flex-start;
}
.site-footer__mark {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 32px);
  line-height: var(--leading-tight);
  color: var(--gold-400);
  text-shadow: 4px 4px 0 var(--ink-900);
  letter-spacing: var(--tracking-poster);
  text-transform: uppercase;
}
.site-footer__mark:hover { color: var(--gold-400); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.site-footer nav a,
.site-footer__socials a {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--paper-200);
}
.site-footer__socials { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.site-footer__socials a { font: var(--type-body-sm); text-transform: none; letter-spacing: 0; color: var(--paper-300); }
.site-footer nav a:hover, .site-footer__socials a:hover { color: var(--gold-400); }
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  justify-content: space-between;
  padding-top: var(--space-6);
  border-top: 1px solid var(--line-hairline);
}
.site-footer__legal span {
  font: var(--type-body-sm);
  font-size: var(--text-2xs);
  color: var(--text-muted);
}
.site-footer__legal span + span { max-width: 60ch; }


/* ==========================================================================
   7. HOME — hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--space-13) + 40px) clamp(16px, 5vw, 56px) var(--space-12);
  overflow: hidden;
}
.hero__img {
  position: absolute;
  inset: -8% 0 -8% 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  object-position: 50% 45%;
  filter: contrast(1.12) saturate(.92) brightness(.62);
  will-change: transform;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,6,22,.82) 0%, rgba(11,6,22,.55) 42%, rgba(11,6,22,.94) 100%);
}
.hero__spot { position: absolute; inset: 0; background: var(--spot-warm); mix-blend-mode: screen; opacity: .85; }
.hero__grain {
  position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain-url);
  background-size: 150px 150px;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.hero__wordmark { position: relative; display: flex; flex-direction: column; gap: 0; }
.hero__line { overflow: hidden; padding-bottom: .06em; }
.hero__line > span {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-body);
  font-size: clamp(52px, 11vw, 148px);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-poster);
  text-transform: uppercase;
  animation: maskUp 820ms var(--ease-out-groove) both;
}
/* The supplied logo artwork: gold over magenta, both on a hard ink offset. */
.hero__line--gold > span    { color: var(--gold-400);    text-shadow: 9px 9px 0 var(--ink-900); }
.hero__line--magenta > span { color: var(--magenta-500); text-shadow: 9px 9px 0 var(--ink-900); animation-delay: 140ms; }

/* A single soft light sweep travelling across the wordmark.

   The shine is a duplicate of the text with a moving gradient clipped to the
   glyphs, so light only ever falls on the letterforms. An overlay rectangle
   would show its own edges in the empty space beside the shorter line, and
   blend modes over a dark photograph go grey rather than bright. */
.hero__line > span { position: relative; }
.hero__line > span::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  text-shadow: none;             /* never redraw the hard ink offset */
  background-image: linear-gradient(
    102deg,
    transparent 42%,
    rgba(255, 252, 245, .34) 48%,
    rgba(255, 252, 245, .62) 50%,
    rgba(255, 252, 245, .34) 52%,
    transparent 58%);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: wordmarkShine 7.5s var(--ease-standard) 1.6s infinite;
}
/* Offset slightly so the light reads as one diagonal pass across both lines. */
.hero__line--magenta > span::after { animation-delay: 1.78s; }

.hero__strap {
  font: var(--type-body);
  font-size: clamp(17px, 2vw, 25px);
  color: var(--paper-200);
  max-width: 620px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-5); }

.hero__cue {
  position: absolute;
  left: 50%;
  bottom: var(--space-8);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  color: var(--paper-300);
}
.hero__cue:hover { color: var(--gold-400); }
.hero__cue span:first-child {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.hero__cue span:last-child { animation: cue 2.2s var(--ease-standard) infinite; font-size: 16px; }

@keyframes maskUp { from { transform: translateY(108%); } to { transform: translateY(0); } }
/* The band travels across in the first fifth, then rests off-frame. Both the
   start and end positions sit outside the glyphs, so the loop never jumps. */
@keyframes wordmarkShine { 0% { background-position: 100% 0; } 20%, 100% { background-position: 0% 0; } }
@keyframes cue    { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(9px); opacity: 1; } }
@keyframes popIn  { from { transform: translateY(22px) scale(.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }


/* ==========================================================================
   8. HOME — showreel, intro, line-ups, credits, reviews, contact
   ========================================================================== */

/* The showreel frame holds a real player. Until site.js builds it, the still
   below sits in the same 16:9 window, so nothing shifts when it swaps in. */
.showreel__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--midnight-900);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
}
.showreel__still {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.06) brightness(.88) saturate(.98);
}
.showreel__protect { position: absolute; inset: 0; background: var(--protect-bottom); opacity: .55; }

/* The player fills the frame once it is in. */
.showreel__player {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  background: var(--ink-900);
}
/* Nothing sits over the player, so the scrim goes with the still. */
.showreel__frame.is-playing .showreel__protect { display: none; }

/* Scripts off: the still stays, with a plain link out to YouTube. */
.showreel__nojs {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--gold-400);
  color: var(--ink-900);
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--glow-gold);
}

/* No film configured at all: the still is all there is. */
.showreel__frame--static .showreel__protect { opacity: .35; }

.intro__hook {
  font: var(--type-body);
  font-size: clamp(19px, 2.4vw, 25px);
  color: var(--text-on-light);
}

/* -- Line-up cards --------------------------------------------------------- */
.lineups__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
}
.lineups__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: var(--space-6);
  align-items: stretch;
}
.lineup { display: flex; flex-direction: column; width: 100%; }
.lineup__media { display: block; width: 100%; height: 186px; overflow: hidden; }
/* Same trick as the showreel frame: the picture is taller than its window so
   the parallax always has slack to move within. */
.lineup__media img {
  display: block;
  width: 100%;
  height: 256px;
  margin-top: -35px;
  object-fit: cover;
  filter: contrast(1.1) brightness(.78) saturate(.9);
}
.lineup__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-7);
  flex: 1;
}
.lineup__title-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.lineup__title { font: var(--type-title); font-size: var(--text-xl); color: var(--gold-400); }
.lineup__summary {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--magenta-500);
}
.lineup__desc { font: var(--type-body-sm); color: var(--text-body); }
.lineup__foot { display: flex; flex-direction: column; gap: var(--space-3); margin-top: auto; }
.lineup__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lineup__cta {
  margin-top: var(--space-4);
  width: 100%;
  border: none;
  cursor: pointer;
  padding: 13px 18px;
  border-radius: var(--radius-pill);
  background: var(--action-primary);
  color: var(--paper-100);
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  opacity: .82;
  transition: opacity var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.lineup__cta:hover { opacity: 1; background: var(--action-primary-hover); }

.lineups__note {
  font: var(--type-body-sm);
  color: var(--text-muted);
  max-width: 70ch;
  border-top: 1px solid var(--line-hairline);
  padding-top: var(--space-6);
}

/* A step quieter again than the note above it: this is small print, and it
   should read as such without disappearing into the background. */
.lineups__caveat {
  font: var(--type-body-sm);
  font-size: var(--text-xs);
  color: var(--text-muted);
  opacity: .78;
  max-width: 70ch;
  margin-top: var(--space-5);
}

/* -- Credibility strip ----------------------------------------------------- */
.credits__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
}
.credit {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-7);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}
.credit__figure {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-poster);
  color: var(--gold-400);
  text-shadow: 4px 4px 0 var(--ink-900);
}
.credit__label { font: var(--type-body-sm); color: var(--text-body); }

/* -- Reviews --------------------------------------------------------------- */
.reviews__card {
  width: 100%;
  min-height: 330px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
  padding: clamp(24px, 5vw, 56px);
}
.reviews__quotemark {
  font-family: var(--font-display);
  font-size: clamp(56px, 9vw, 104px);
  line-height: .6;
  color: var(--rust-500);
  text-shadow: 4px 4px 0 var(--ink-900);
}
.reviews__quote {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  transition: opacity 240ms var(--ease-standard);
}
.reviews__quote p {
  font: var(--type-body);
  font-size: clamp(19px, 2.6vw, 32px);
  line-height: var(--leading-snug);
  color: var(--text-on-light);
}
.reviews__quote footer { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4); }
.reviews__quote cite {
  font: var(--type-label);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--rust-600);
  font-style: normal;
}
.reviews__quote .mono { color: var(--text-muted-on-light); }

.reviews__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.reviews__dots { display: flex; gap: var(--space-3); }
.reviews__dot {
  width: 8px;
  height: 8px;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: var(--radius-pill);
  background: rgba(16, 10, 31, .28);
  /* Only the colour is transitioned. The width is set the moment the section
     first paints, while it is still hidden by the reveal — and a width
     transition started in that state can stick at its opening value, leaving
     no dot marked at all. The colour change carries the state on its own. */
  transition: background var(--dur-base) var(--ease-standard);
}
.reviews__dot.is-current { width: 34px; background: var(--rust-500); }
.reviews__arrows { display: flex; gap: var(--space-3); }
.reviews__arrow {
  width: 44px; height: 44px;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-disc);
  background: transparent;
  color: var(--ink-900);
  box-shadow: inset 0 0 0 2px var(--ink-900);
  font-size: 15px;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.reviews__arrow:hover { background: var(--ink-900); color: var(--paper-100); }

/* -- Contact --------------------------------------------------------------- */
.contact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-11);
}
.contact__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line-hairline);
}
.contact__detail { display: flex; flex-direction: column; gap: var(--space-2); }
.contact__detail a { font: var(--type-body); color: var(--paper-100); }
.contact__detail a:hover { color: var(--gold-400); }
.contact__socials { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.contact__form { display: flex; flex-direction: column; gap: var(--space-5); }
.contact__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-5); }
.contact__submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); padding-top: var(--space-2); }
.contact__smallprint { font: var(--type-body-sm); font-size: var(--text-2xs); color: var(--text-muted); }
.contact__success { display: flex; flex-direction: column; gap: var(--space-5); animation: popIn 320ms var(--ease-out-groove) both; }
[hidden] { display: none !important; }


/* ==========================================================================
   9. NOTABLE SHOWS — timeline
   ========================================================================== */

.timeline { position: relative; max-width: 960px; margin: 0 auto; padding-top: var(--space-9); }
.timeline__spine {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-1px);
  background: var(--line-hairline);
}
.timeline__fill {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 0%;
  background: var(--gold-400);
  box-shadow: var(--glow-gold);
}
.timeline__rows { display: flex; flex-direction: column; gap: var(--space-11); }

.tl-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-11);
  align-items: center;
}
.tl-dot {
  position: absolute;
  left: 50%;
  top: 24px;
  width: 14px; height: 14px;
  margin-left: -7px;
  border-radius: var(--radius-disc);
  background: var(--midnight-600);
  transition:
    transform var(--dur-base) var(--ease-pop),
    background var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard);
}
.tl-dot.is-lit { background: var(--magenta-500); box-shadow: var(--glow-magenta); transform: scale(1.25); }

.tl-text { display: flex; flex-direction: column; gap: var(--space-3); }
.tl-row--left  .tl-text { grid-column: 1; text-align: right; align-items: flex-end; }
.tl-row--left  .tl-media { grid-column: 2; grid-row: 1; }
.tl-row--right .tl-text { grid-column: 2; text-align: left; align-items: flex-start; }
.tl-row--right .tl-media { grid-column: 1; grid-row: 1; }

.tl-year { font: var(--type-mono); font-size: var(--text-sm); color: var(--gold-400); }
.tl-name { font: var(--type-title); font-size: clamp(20px, 2.6vw, 32px); color: var(--text-title); }
.tl-place {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--magenta-500);
}
.tl-copy { font: var(--type-body-sm); color: var(--text-body); max-width: 42ch; }

.tl-media button {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  cursor: zoom-in;
  background: none;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-base) var(--ease-out-groove);
}
.tl-media button:hover { transform: translateY(-2px); }
.tl-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: contrast(1.1) brightness(.76) saturate(.92);
}


/* ==========================================================================
   10. THE BAND
   ========================================================================== */

/* Flex, not grid: with 7 members the last row only has three cards, and a
   grid's empty fourth track would leave them stuck at the left edge. Flex
   wrap centers whatever is left over on the final row instead. */
.band__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-7);
}
.band__grid .member {
  flex: 1 1 272px;
  max-width: 300px;
}
/* The card is an article so the name can be a real heading. A single button
   inside it is stretched over the whole card, so the entire tile is clickable
   while the button's accessible name stays just the person's name. */
.member {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  padding: 0;
  border: none;
  background: var(--surface-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  text-align: left;
  transition: transform var(--dur-base) var(--ease-out-groove);
}
.member:hover,
.member:focus-within { transform: translateY(-2px); }

.member__trigger {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.member__trigger::after { content: ""; position: absolute; inset: 0; }
.member__trigger:focus-visible { outline: none; box-shadow: none; }
.member:focus-within { box-shadow: var(--shadow-card), var(--focus-ring); }
.member__portrait {
  position: relative;
  display: block;
  width: 100%;
  height: 300px;
  overflow: hidden;
}
.member__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  /* Duotone at rest, full colour on hover — the design's portrait treatment. */
  filter: grayscale(1) contrast(1.15) sepia(.4) hue-rotate(215deg) saturate(2.6);
  transition: filter var(--dur-base) var(--ease-standard);
}
.member:hover .member__portrait img,
.member:focus-within .member__portrait img { filter: none; }

.member__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-7); }
.member__name { font: var(--type-title); font-size: var(--text-xl); color: var(--text-title); margin: 0; }
.member__role {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold-400);
}
.member__short { font: var(--type-body-sm); color: var(--text-body); margin-top: var(--space-2); }
.member__more {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--magenta-500);
  margin-top: var(--space-3);
}

.band__hero-shot {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* The band are in the foreground at the bottom of this frame, so the crop
     is weighted downwards to keep them in shot. */
  object-position: 50% 68%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  filter: contrast(1.06) brightness(.9) saturate(.95);
}


/* ==========================================================================
   11. MODALS — showreel, lightbox, member bio
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(16, 10, 31, .78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 48px);
}
.modal--showreel { background: rgba(16, 10, 31, .72); }
.modal--lightbox { background: rgba(16, 10, 31, .82); }

.modal__panel {
  position: relative;
  width: 100%;
  background: var(--midnight-800);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
  animation: popIn 300ms var(--ease-out-groove) both;
}
.modal__panel--showreel { max-width: 1080px; }
.modal__panel--member { max-width: 620px; background: var(--surface-card); }
.modal__panel--plain { max-width: 1100px; background: none; box-shadow: none; overflow: visible; border-radius: 0; }

/* The 6px ray strip the design uses as a cap on dialogs. */
.modal__rays { height: 6px; background: var(--sunset-rays); }

.modal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-7);
}
.modal__title {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--paper-200);
}
.modal__close {
  border: none;
  cursor: pointer;
  width: 40px; height: 40px;
  border-radius: var(--radius-disc);
  background: var(--action-on-dark-ghost);
  color: var(--paper-100);
  font-size: 18px;
  transition: background var(--dur-fast) var(--ease-standard);
}
.modal__close:hover { background: rgba(246, 236, 217, .2); }
.modal__close--corner { position: absolute; top: 18px; right: 18px; }
.modal__close--float {
  position: absolute;
  top: -14px; right: -14px;
  width: 44px; height: 44px;
  background: var(--gold-400);
  color: var(--ink-900);
  box-shadow: var(--shadow-offset-sm);
}
.modal__close--float:hover { background: var(--action-secondary-hover); }

.modal__video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--midnight-900); }
.modal__video iframe,
.modal__video video { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
/* The showreel is wider than 16:9, so it is fitted inside the frame rather
   than cropped. Any letterboxing falls on the modal's own dark ground. */
.modal__video video { object-fit: contain; background: var(--midnight-900); }

.modal__body { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-9); }
.modal__body h3 { font: var(--type-title); font-size: var(--text-2xl); color: var(--text-title); }
.modal__body p { font: var(--type-body); color: var(--text-body); }

.lightbox__img {
  display: block;
  width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
}

body.is-locked { overflow: hidden; }


/* ==========================================================================
   12. SCROLL REVEALS AND PAGE TRANSITION
   ========================================================================== */

/* Elements start hidden only once JS has confirmed it can animate them, so the
   page is fully readable if JS fails or is switched off. */
.js-ready [data-reveal] { opacity: 0; }
.js-ready [data-reveal="up"]    { transform: translateY(26px); }
.js-ready [data-reveal="left"]  { transform: translateX(-34px); }
.js-ready [data-reveal="right"] { transform: translateX(34px); }
.js-ready [data-reveal].is-in { opacity: 1; transform: none; }

.page-wrap { transition: opacity 180ms var(--ease-standard); }
.page-wrap.is-leaving { opacity: 0; }


/* ==========================================================================
   13. RESPONSIVE
   ========================================================================== */

@media (max-width: 820px) {
  /* Timeline collapses to one left-aligned column with the spine down the side. */
  .tl-row { grid-template-columns: 1fr; gap: var(--space-6); padding-left: 46px; }
  .tl-row .tl-text,
  .tl-row .tl-media { grid-column: 1; grid-row: auto; text-align: left; align-items: flex-start; }
  .tl-row .tl-text { order: 1; }
  .tl-row .tl-media { order: 2; }
  .timeline__spine { left: 15px; }
  .tl-dot { left: 15px; margin-left: -7px; }
  .timeline__rows { gap: var(--space-10); }

  /* In one column the entries no longer have a side to arrive from, so they
     rise like every other section instead of sliding in from left and right. */
  .js-ready .tl-row[data-reveal] { transform: translateY(26px); }
  .js-ready .tl-row[data-reveal].is-in { transform: none; }

  [data-nav-cta] { display: none; }
  .contact__grid { gap: var(--space-9); }
}

@media (max-width: 560px) {
  :root { --section-y: var(--space-10); }
  /* Keep the wordmark on one line and shrink the links just enough that the
     whole bar still fits across a phone. */
  .site-header { gap: var(--space-4); padding-left: 16px; padding-right: 16px; }
  .site-header__mark { white-space: nowrap; flex: 0 0 auto; font-size: 12px; letter-spacing: .1em; }
  .site-nav { gap: 12px; flex-wrap: nowrap; }
  .site-nav a { font-size: var(--text-3xs); letter-spacing: .08em; }
  .hero { padding-top: calc(var(--space-12) + 40px); }
  .hero__line--gold > span,
  .hero__line--magenta > span { text-shadow: 5px 5px 0 var(--ink-900); }
  .hero__actions .btn { flex: 1 1 auto; }
  .site-footer__top { gap: var(--space-7); }
}


/* ==========================================================================
   14. REDUCED MOTION — everything falls back to static
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .js-ready [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero__line > span { animation: none; }
  .hero__line > span::after { display: none; }
  .marquee__track { animation: none; }
  .hero__cue span:last-child { animation: none; }
}