/* ============================================================================
   LILYANNA MARIE — Official Site
   Design system: Bold Editorial / Poster-Brutalist
   Palette: Blue · Purple · Red on near-black (client-specified)

   This stylesheet is SELF-SUFFICIENT and has no dependencies. The site
   renders correctly with JavaScript disabled; scripts only enhance it.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. TOKENS */

:root {
  /* --- Core palette (blue / purple / red) --- */
  --ink:          #06050F;   /* page base — near-black indigo                 */
  --ink-2:        #0C0A24;   /* raised surface                                */
  --ink-3:        #141133;   /* cards                                         */

  --blue:         #2438E0;   /* electric royal blue — primary field           */
  --blue-deep:    #101A8C;   /* deep blue — gradients, hovers                 */
  --blue-bright:  #4E63FF;   /* lifted blue — links, focus                    */

  --violet:       #7B3FF2;   /* purple — secondary field                      */
  --violet-brt:   #A855F7;   /* bright purple — accents on dark               */

  --red:          #FF2D55;   /* hot red — display type, accents  (5.6:1)      */
  --red-cta:      #E11D48;   /* red for solid fills w/ white text (4.7:1)     */

  --paper:        #F6F4FF;   /* primary text — cool off-white                 */
  --muted:        #A9A3D0;   /* secondary text                    (8.5:1)     */
  --muted-dim:    #8B85B5;   /* tertiary — site credit only       (5.9:1)     */
  --line:         rgba(169, 163, 208, 0.22);
  --line-strong:  rgba(169, 163, 208, 0.42);

  /* --- Typography --- */
  --font-display: 'Anton', 'Arial Narrow', 'Haettenschweiler', sans-serif;
  --font-cond:    'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:    'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script:  'Dancing Script', 'Brush Script MT', cursive;

  /* Fluid scale */
  --fs-hero:    clamp(3.4rem, 13.5vw, 11.5rem);
  --fs-h1:      clamp(2.75rem, 8.5vw, 7rem);
  --fs-h2:      clamp(2rem, 5vw, 3.75rem);
  --fs-h3:      clamp(1.35rem, 2.4vw, 1.9rem);
  --fs-body:    clamp(1rem, 1.05vw, 1.125rem);
  --fs-lead:    clamp(1.1rem, 1.5vw, 1.375rem);
  --fs-label:   0.75rem;

  /* --- Spacing (density 3/10 — spacious) --- */
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --gutter:    clamp(1.25rem, 4vw, 4rem);
  --max-w:     1600px;

  /* --- Motion --- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:  150ms;
  --dur:       260ms;
  --dur-slow:  600ms;

  /* --- Photo treatment ---
     Her studio portraits have an emerald-green backdrop. This tint layer
     recolours them into the blue/purple palette using `mix-blend-mode: color`,
     which keeps every detail of the photograph (luminance) and replaces only
     hue + saturation — the look of coloured stage lighting.
     Lower this value to let more of the original photo through.            */
  --photo-tint: 0.86;

  /* The hero photo was shot under blue light and is already on-palette, so it
     gets its own much lighter tint. See .hero__media::before.               */
  --hero-tint: 0.22;
}

/* ------------------------------------------------------------- 2. RESET */

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

html {
  -webkit-text-size-adjust: 100%;
  /* Keeps section headings clear of the fixed header when jumping to an anchor */
  scroll-padding-top: 96px;
}
section[id] { scroll-margin-top: 96px; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }

/* Visible focus for keyboard users — never removed. */
:focus-visible {
  outline: 3px solid var(--blue-bright);
  outline-offset: 3px;
  border-radius: 2px;
}

.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: absolute; top: 0; left: 0; z-index: 200;
  transform: translateY(-120%);
  background: var(--red-cta); color: #fff;
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-cond); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.skip-link:focus { transform: translateY(0); }

/* -------------------------------------------------- 3. TYPE PRIMITIVES */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

.label {
  font-family: var(--font-cond);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.label--red   { color: var(--red); }
.label--brt   { color: var(--paper); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--muted);
  max-width: 46ch;
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 0.85;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.txt-red    { color: var(--red); }
.txt-violet { color: var(--violet-brt); }
.txt-muted  { color: var(--muted); }

/* ------------------------------------------------------- 4. LAYOUT SHELL */

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

.section { padding-block: clamp(4rem, 10vw, var(--space-32)); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: clamp(2rem, 5vw, var(--space-16));
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--line);
}

/* ---------------------------------------------------------- 5. BUTTONS */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  /* 44px min touch target */
  min-height: 48px;
  padding: 0 var(--space-8);
  font-family: var(--font-cond);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }

.btn--red {
  background: var(--red-cta);
  color: #fff;
}
.btn--red:hover { background: #fff; color: var(--ink); }

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--paper);
}
.btn--ghost:hover { border-color: var(--paper); background: var(--paper); color: var(--ink); }

.btn--sm { min-height: 44px; padding: 0 var(--space-6); font-size: 0.8125rem; }

/* Underlined text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  font-family: var(--font-cond);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  cursor: pointer;
  transition: color var(--dur) var(--ease-out), gap var(--dur) var(--ease-out);
}
.link-arrow:hover { color: var(--paper); gap: 0.9em; }
.link-arrow svg { width: 1em; height: 1em; flex: none; }

/* ------------------------------------------------------------ 6. HEADER */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-4) var(--gutter);
  transition: background var(--dur-slow) var(--ease-out),
              backdrop-filter var(--dur-slow) var(--ease-out),
              border-color var(--dur-slow) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.header.is-stuck {
  background: rgba(6, 5, 15, 0.82);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

/* Wordmark — type lockup, no logo file (see CONTENT.md to swap in a logo) */
.wordmark {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 48px;      /* keeps the logo a legal touch target */
  line-height: 1;
}
.wordmark__name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.wordmark__sub {
  display: block;
  font-family: var(--font-script);
  font-size: clamp(0.9rem, 1.2vw, 1.1rem);
  color: var(--red);
  margin-top: -0.15em;
  margin-left: 0.15em;
}

.nav { display: none; }
@media (min-width: 1024px) {
  .nav { display: flex; gap: clamp(1rem, 2.2vw, 2.25rem); margin-inline: auto; }
}
.nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;                        /* full 44x44 touch target */
  font-family: var(--font-cond);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  position: relative;
  transition: color var(--dur) var(--ease-out);
}
.nav a::after {
  content: '';
  position: absolute; left: 0; right: 100%; bottom: 10px;
  height: 2px; background: var(--red);
  transition: right var(--dur) var(--ease-out);
}
.nav a:hover { color: var(--red); }
.nav a:hover::after { right: 0; }

.header__right { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; }
@media (min-width: 1024px) { .header__right { margin-left: 0; } }

.socials { display: flex; gap: var(--space-2); }
.socials li { display: block; }
/* Only the header hides them on small screens, where the burger and wordmark
   already fill the bar. The footer keeps them at every width. */
@media (max-width: 639px) { .header .socials { display: none; } }
.socials a {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  color: var(--muted); cursor: pointer;
  transition: color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.socials a:hover { color: var(--red); transform: translateY(-2px); }
.socials svg { width: 19px; height: 19px; }

.header .btn--red { display: none; }
@media (min-width: 768px) { .header .btn--red { display: inline-flex; } }

/* Mobile menu */
.burger {
  display: grid; place-items: center;
  width: 48px; height: 48px; cursor: pointer; color: var(--paper);
}
@media (min-width: 1024px) { .burger { display: none; } }
.burger svg { width: 26px; height: 26px; }
.burger .icon-close { display: none; }
.burger[aria-expanded='true'] .icon-open  { display: none; }
.burger[aria-expanded='true'] .icon-close { display: block; }

.mobile-menu {
  position: fixed; inset: 0; z-index: 99;
  background: var(--ink);
  padding: calc(var(--space-24) + 1rem) var(--gutter) var(--space-12);
  display: flex; flex-direction: column; gap: var(--space-2);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
  overflow-y: auto;
}
.mobile-menu[data-open='true'] { transform: translateY(0); visibility: visible; }
.mobile-menu a {
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 3.25rem);
  text-transform: uppercase;
  line-height: 1.1;
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--line);
  transition: color var(--dur) var(--ease-out), padding-left var(--dur) var(--ease-out);
}
.mobile-menu a:hover { color: var(--red); padding-left: var(--space-3); }
.mobile-menu .btn { margin-top: var(--space-8); }

/* --------------------------------------------------------------- 7. HERO */

.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: grid;
  isolation: isolate;
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Portrait source (1080x1440) in a wide frame: bias upward so her head and
     the negative space above it stay in shot. */
  object-position: 50% 28%;
}

/* Cinematic hero video: same crop as the photo underneath, faded in only
   once main.js confirms it is actually playing. Until then (or if it never
   starts) opacity stays 0 and the photo above is all anyone sees. */
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  opacity: 0;
  transition: opacity 900ms ease;
}
.hero__video.is-playing { opacity: 1; }

/* The delivered clip is a 16:9 (1920x1080) export; the hero photo is
   portrait (1280x1706). Both use identical cover/object-position rules, but
   `cover` crops a 16:9 source into a narrow phone viewport far harder than
   it crops a portrait one: measured at 375x812 the photo keeps ~62% of its
   width on screen, the video only ~26%. That is not a small difference —
   it would zoom in tight on a strip through the centre of the frame,
   visibly clipping the glow the video is supposed to show around her, and
   would jump noticeably against the photo's own crop the instant playback
   starts. main.js also skips loading the file below this width, so phones
   are not spending ~5MB on a clip they'd never see well cropped. Matches
   the project's existing phone/desktop split (see .header .socials above). */
@media (max-width: 639px) {
  .hero__video { display: none; }
}

/* The hero photograph was shot under blue light and is already in-palette, so
   it needs almost none of the recolour the green-backdrop photos require.
   A light violet push only, to tie it to the purple used elsewhere.
   Raise --hero-tint toward 1 for a stronger shift; 0 leaves the photo alone. */
.hero__media::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--blue) 0%, var(--violet) 100%);
  mix-blend-mode: color;
  opacity: var(--hero-tint);
}
/* Red rim light in the top-right, for palette completeness */
.hero__media::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(60% 55% at 88% 8%, rgba(255, 45, 85, 0.42), transparent 70%);
  mix-blend-mode: screen;
}

/* Legibility scrim — separate layer so it is never affected by blend modes */
/* Legibility scrim, tuned by measurement against THIS photograph.
   The hero shot is brightly lit, so the red headline needs real help: the
   band from ~55% down is deepened until "SOUND WAVES" clears WCAG's 3:1
   large-text minimum. The 30-45% band is left lighter so her face reads. */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgba(6,5,15,0.74) 0%, rgba(6,5,15,0.16) 30%,
                                rgba(6,5,15,0.30) 50%, rgba(6,5,15,0.62) 68%,
                                rgba(6,5,15,0.92) 100%),
    linear-gradient(to right,  rgba(6,5,15,0.55) 0%, transparent 30%,
                                transparent 70%, rgba(6,5,15,0.55) 100%);
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding: calc(var(--space-24) + 1rem) var(--gutter) var(--space-12);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-8);
}

/* Side rails (single-single / shows) */
.hero__rails {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .hero__rails { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; }
  .hero__rails > :last-child { justify-self: end; text-align: right; }
}

.rail__title { margin-bottom: var(--space-3); }

.rail__single {
  font-family: var(--font-cond);
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.05;
}

/* The oversized hero statement, split around the subject */
.hero__type {
  display: grid;
  gap: 0.04em;
  align-content: center;
  justify-items: stretch;
  pointer-events: none;
}
.hero__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 0.8;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.hero__line--1 { color: var(--paper); }
.hero__line--2 { color: var(--red); }

/* Mobile: keep the words together and left-aligned so the line still reads. */
.hero__line > span + span { margin-left: 0.22em; }

/* Desktop: push the two halves to the outer edges so the portrait shows
   through the middle — the framing device from the reference layout. */
@media (min-width: 900px) {
  .hero__type { gap: clamp(3rem, 16vh, 9rem); }
  .hero__line { flex-wrap: nowrap; justify-content: space-between; }
  .hero__line > span + span { margin-left: 0; }
  .hero__line--2 { justify-content: space-between; }
}

.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
}
.hero__tagline {
  font-family: var(--font-cond);
  font-size: clamp(1rem, 1.7vw, 1.3rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.35;
}
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.btn-row--hero { margin-top: var(--space-6); }

.scroll-cue {
  display: none;
  font-family: var(--font-cond);
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted);
  align-items: center; gap: var(--space-3);
}
@media (min-width: 900px) { .scroll-cue { display: inline-flex; } }
.scroll-cue::after {
  content: ''; width: 1px; height: 44px;
  background: linear-gradient(var(--muted), transparent);
  animation: cue 2.4s var(--ease-out) infinite;
}
@keyframes cue {
  0%, 100% { transform: scaleY(0.35); transform-origin: top; opacity: 0.4; }
  50%      { transform: scaleY(1);    transform-origin: top; opacity: 1; }
}

/* ------------------------------------------------------------ 8. MARQUEE */

.marquee {
  border-block: 1px solid var(--line);
  background: var(--red-cta);
  color: #fff;
  overflow: hidden;
  padding-block: var(--space-3);
  display: flex;
}
.marquee__track {
  display: flex;
  flex: none;
  gap: var(--space-8);
  padding-right: var(--space-8);
  animation: marquee 38s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee span {
  font-family: var(--font-cond);
  font-size: clamp(0.875rem, 1.4vw, 1.0625rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* -------------------------------------------------------------- 9. MUSIC */

.release-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, var(--space-12));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* The whole card is a single link to the release. */
.release {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  cursor: pointer;
}
.release:focus-visible { outline-offset: 6px; }

.release__art {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: linear-gradient(140deg, var(--blue-deep), var(--violet));
  isolation: isolate;
}
.release__art img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.release:hover .release__art img { transform: scale(1.05); }

.release__badge {
  position: absolute; z-index: 2; top: 0; left: 0;
  background: var(--red-cta); color: #fff;
  font-family: var(--font-cond); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0.5em 1em;
}

.release__play {
  position: absolute; z-index: 2; inset: auto var(--space-4) var(--space-4) auto;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: var(--paper); color: var(--ink);
  border-radius: 50%;
  pointer-events: none;          /* decorative — the whole card is the link */
  transform: translateY(8px);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.release:hover .release__play,
.release:focus-visible .release__play { opacity: 1; transform: translateY(0); }
.release__play svg { width: 20px; height: 20px; margin-left: 2px; }

.release__title {
  font-family: var(--font-cond);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  line-height: 1.1;
}
.release__meta {
  font-family: var(--font-cond); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}

/* -------------------------------------------------------------- 10. SHOWS */

.shows {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.shows__bg { position: absolute; inset: 0; z-index: -2; }
.shows__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%;
  filter: blur(2px);
}
.shows__bg::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--blue-deep), var(--violet));
  mix-blend-mode: color;
  opacity: 0.8;
}
.shows__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,5,15,0.92) 0%, rgba(6,5,15,0.78) 45%, rgba(6,5,15,0.96) 100%);
}

.show {
  display: grid;
  gap: var(--space-4) var(--space-8);
  grid-template-columns: auto 1fr;
  align-items: center;
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--line);
}
.show:first-child { border-top: 1px solid var(--line); }

/* Hover feedback is reserved for rows that are actually links (i.e. once a
   ticket URL exists). A hover state on a static row implies a click target
   that is not there. */
.show--linked {
  transition: background var(--dur) var(--ease-out), padding-left var(--dur) var(--ease-out);
}
.show--linked:hover,
.show--linked:focus-within { background: rgba(246,244,255,0.04); padding-left: var(--space-4); }

.show__venue {
  font-family: var(--font-cond);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.15;
}
.show__city {
  font-family: var(--font-cond); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}

/* -------------------------------------------------------------- 11. ABOUT */

.about {
  display: grid;
  gap: clamp(2rem, 6vw, var(--space-16));
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .about { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

.about__media { position: relative; isolation: isolate; }
.about__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 20%; }
.about__media::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(160deg, var(--violet) 0%, var(--blue-deep) 100%);
  mix-blend-mode: color;
  opacity: var(--photo-tint);
}
/* Offset colour block behind the portrait — editorial framing device */
.about__media::after {
  content: '';
  position: absolute; z-index: -1;
  inset: auto -1.25rem -1.25rem auto;
  width: 62%; height: 62%;
  border: 2px solid var(--red);
}

.about__body p + p { margin-top: var(--space-6); }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--line);
}
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1; color: var(--violet-brt);
}

/* -------------------------------------------------------------- 12. MERCH */

.merch {
  display: grid;
  gap: clamp(2rem, 5vw, var(--space-16));
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) { .merch { grid-template-columns: minmax(0,6fr) minmax(0,5fr); } }

.merch__media {
  position: relative;
  background: linear-gradient(150deg, var(--blue-deep), var(--violet));
  overflow: hidden;
}
.merch__media img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: 50% 45%;
  transition: transform var(--dur-slow) var(--ease-out);
}
.merch__media:hover img { transform: scale(1.04); }

/* ------------------------------------------------------------ 13. GALLERY */

/* Fixed column counts rather than auto-fit: with six photos, auto-fit resolved
   to five columns and left a single orphan on the second row. 2-up then 3-up
   divides six evenly and gives each shot more room. */
.gallery {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.gallery figure { position: relative; overflow: hidden; margin: 0; isolation: isolate; }
.gallery img {
  width: 100%; height: 100%; aspect-ratio: 3/4; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.gallery figure:hover img,
.gallery figure:focus-within img { transform: scale(1.06); }
.gallery figure::before {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(160deg, var(--blue) 0%, var(--violet) 100%);
  mix-blend-mode: color;
  opacity: var(--photo-tint);
}
/* Shots already lit blue only need the light hero-strength push, not the full
   green-backdrop correction — same reasoning as .hero__media::before. */
.gallery figure.is-blue::before { opacity: var(--hero-tint); }

/* ------------------------------------------------------------ 14. CONTACT */

.contact {
  display: grid;
  gap: clamp(2rem, 6vw, var(--space-16));
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .contact { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.booking-card {
  padding: clamp(1.5rem, 3vw, var(--space-12));
  background: var(--ink-2);
  border: 1px solid var(--line);
}
.booking-list dt {
  font-family: var(--font-cond); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
  margin-top: var(--space-6);
}
.booking-list dt:first-of-type { margin-top: 0; }
.booking-list dd {
  margin: var(--space-2) 0 0;
  font-family: var(--font-cond); font-size: 1.25rem; font-weight: 600; letter-spacing: 0.02em;
}
.booking-list dd a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;      /* touch target */
  transition: color var(--dur) var(--ease-out);
}
.booking-list dd a:hover { color: var(--red); }

/* ------------------------------------------------------------- 15. FOOTER */

.footer {
  border-top: 1px solid var(--line);
  padding-block: var(--space-16) var(--space-8);
}
.footer__top {
  display: flex; flex-wrap: wrap; gap: var(--space-8);
  justify-content: space-between; align-items: flex-start;
  margin-bottom: var(--space-16);
}
.footer__nav { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.footer__nav a {
  font-family: var(--font-cond); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  min-height: 44px; min-width: 44px;      /* full 44x44 touch target */
  display: inline-flex; align-items: center;
  transition: color var(--dur) var(--ease-out);
}
.footer__nav a:hover { color: var(--red); }

.footer__mark {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 13vw, 11rem);
  line-height: 0.8; text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
  margin-bottom: var(--space-8);
  user-select: none;
}

.footer__base {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  justify-content: space-between; align-items: center;
  padding-top: var(--space-8); border-top: 1px solid var(--line);
  font-size: 0.8125rem; color: var(--muted);
}

/* ------------------------------------------------- 16. SCROLL REVEAL */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Belt-and-braces: if JS never runs, content must still be visible. */
.no-js .reveal { opacity: 1; transform: none; }

/* --------------------------------------------- 17. REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .marquee__track { animation: none; transform: none; }
  .reveal { opacity: 1; transform: none; }
  .scroll-cue::after { animation: none; opacity: 0.7; }
  /* main.js already declines to start this; hiding it too means a video
     that somehow got a src (e.g. a later code path) still never renders. */
  .hero__video { display: none; }
}

/* --------------------------------------------- 18. FALLBACKS */

/* If mix-blend-mode is unsupported, drop the tints rather than showing a
   flat colour slab over the photograph. */
@supports not (mix-blend-mode: color) {
  .hero__media::before,
  .about__media::before,
  .gallery figure::before,
  .shows__bg::before { display: none; }
}

/* =========================================================================
   19. COMPONENTS ADDED FOR PRODUCTION
   ========================================================================= */

/* ---- Utilities ---- */

.sprite { position: absolute; }

.icon-inline { width: 1em; height: 1em; flex: none; }

.lead--measure { max-width: 54ch; }

.section-title--spaced { margin-bottom: var(--space-8); }

picture { display: block; }

/* ---- Reveal stagger ----
   Replaces per-element inline --reveal-delay values. Position in the grid
   drives the delay, so adding or removing a card needs no markup change. */
.release-grid > .reveal:nth-child(4n+2) { --reveal-delay:  60ms; }
.release-grid > .reveal:nth-child(4n+3) { --reveal-delay: 120ms; }
.release-grid > .reveal:nth-child(4n+4) { --reveal-delay: 180ms; }
.gallery > .reveal:nth-child(3n+2)      { --reveal-delay:  80ms; }
.gallery > .reveal:nth-child(3n+3)      { --reveal-delay: 160ms; }
.about__body, .merch__body, .booking-card { --reveal-delay: 120ms; }

/* ---- Header / menu ---- */

.header__cta { display: none; }
@media (min-width: 768px) { .header__cta { display: inline-flex; } }

.mobile-menu__cta { margin-top: var(--space-8); }

/* Scroll lock while the full-screen menu is open. */
.is-menu-open, .is-menu-open body { overflow: hidden; }

/* ---- Discography disclosure ---- */

.release-grid.is-collapsible .release--extra { display: none; }
.release-grid.is-collapsible.is-expanded .release--extra { display: flex; }

.disclosure {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 5vw, var(--space-16));
}
.disclosure button[hidden] { display: none; }
.disclosure__count { color: var(--muted); margin-left: -0.4em; }
.disclosure__chevron {
  width: 1.1em; height: 1.1em; flex: none;
  transition: transform var(--dur) var(--ease-out);
}
.disclosure button[aria-expanded='true'] .disclosure__chevron { transform: rotate(180deg); }

/* ---- Shows empty state ---- */

.shows-empty__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--red);
}
.shows-empty__body { margin-top: var(--space-4); }
.shows-empty .btn-row { margin-top: var(--space-8); }

/* ---- Merch product (Shopify-ready shell) ---- */

.product__status {
  display: inline-block;
  font-family: var(--font-cond);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--violet-brt);
  border: 1px solid var(--violet-brt);
  padding: 0.45em 0.9em;
  margin-bottom: var(--space-6);
}
.product__name {
  font-family: var(--font-cond);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: var(--space-3);
}
.product__desc { font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); max-width: 46ch; }
.product__cta { margin-top: var(--space-8); }

/* ---- 404 ---- */

.error-page {
  min-height: 100svh;
  min-height: 100vh;
  display: grid;
  place-content: center;
  text-align: center;
  padding: var(--space-24) var(--gutter);
}
.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(6rem, 26vw, 18rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 2px var(--red);
  margin-bottom: var(--space-8);
}
.error-page .btn-row { justify-content: center; margin-top: var(--space-12); }
.error-page .lead { margin-inline: auto; }

/* Without JS the burger cannot open anything, so it is hidden rather than
   left as a dead control. All content stays reachable by scrolling, and the
   footer navigation still provides in-page links. */
.no-js .burger { display: none; }

/* ---- Site credit ----
   Deliberately quieter than everything around it: 12px against the 13px legal
   line, and --muted-dim rather than --muted. Still clears WCAG AA (5.9:1) so
   "subtle" never becomes "unreadable". */
.footer__credit {
  margin-top: var(--space-4);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--muted-dim);
}
.footer__credit a {
  color: var(--muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(169, 163, 208, 0.35);
  transition: color var(--dur) var(--ease-out),
              text-decoration-color var(--dur) var(--ease-out);
}
/* Focus gets the same treatment as hover, so keyboard users see it too. */
.footer__credit a:hover,
.footer__credit a:focus-visible {
  color: var(--paper);
  text-decoration-color: var(--red);
}

/* ---- Upcoming shows ----
   The day number carries the row so a visitor can scan dates at a glance;
   weekday, month and year sit around it in the supporting condensed face. */
.shows-list { margin-top: var(--space-4); }

.show__when {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.1em;
  min-width: 104px;
  padding: var(--space-3) var(--space-4);
  background: var(--ink-2);
  border: 1px solid var(--line-strong);
}
.show__weekday,
.show__year {
  font-family: var(--font-cond);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.show__day {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 7vw, 3.75rem);
  line-height: 0.88;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.show__month {
  font-family: var(--font-cond);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
}

.show__venue {
  font-family: var(--font-cond);
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.05;
}
.show__city {
  margin-top: var(--space-2);
  font-family: var(--font-cond);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Optional supporting line — use it for a door time or ticket note once one
   is confirmed. Nothing is shown while it is absent. */
.show__meta {
  margin-top: var(--space-2);
  font-family: var(--font-cond);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--violet-brt);
}

.shows-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
  font-family: var(--font-cond);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Below ~480px the row stacks and the date runs along a single baseline
   rather than squeezing a tall block beside the venue. */
@media (max-width: 30em) {
  .show { grid-template-columns: 1fr; gap: var(--space-3); }
  .show__when {
    grid-template-columns: repeat(4, auto);
    justify-items: start;
    justify-self: start;
    align-items: baseline;
    gap: 0 0.45em;
    min-width: 0;
    padding: var(--space-2) var(--space-4);
  }
}

/* ---- Follow block ----
   Takes the place of the old mailing-list column. The social profiles are now
   the way fans keep up, so they are given real weight rather than being left
   as small icons in the header. */
.follow__intro {
  color: var(--muted);
  margin: var(--space-3) 0 var(--space-8);
  max-width: 38ch;
}

.follow__list { display: grid; gap: var(--space-3); }

.follow__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  min-height: 72px;
  padding: var(--space-3) var(--space-6);
  background: var(--ink-2);
  border: 1px solid var(--line);
  color: var(--paper);
  transition: border-color var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out);
}
.follow__link:hover,
.follow__link:focus-visible { border-color: var(--paper); background: var(--ink-3); }

.follow__icon { width: 26px; height: 26px; flex: none; color: var(--muted); }
.follow__link:hover .follow__icon,
.follow__link:focus-visible .follow__icon { color: var(--red); }

.follow__text { display: grid; gap: 0.1em; min-width: 0; }
.follow__name {
  font-family: var(--font-cond);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.1;
}
.follow__handle {
  font-family: var(--font-cond);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.follow__arrow {
  width: 20px; height: 20px; flex: none;
  color: var(--muted);
  transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.follow__link:hover .follow__arrow,
.follow__link:focus-visible .follow__arrow { color: var(--red); transform: translateX(4px); }

/* Card headings shared by the Follow and Bookings columns. */
.card-legend {
  font-family: var(--font-cond);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
}