/* ============================================================
   DDAARR — DESIGN SPECS
   ------------------------------------------------------------
   Everything in this file is driven by the values below. Change
   a value here and it updates everywhere that color/font/spacing
   is used across the whole site — you shouldn't need to touch
   anything past this block for basic look-and-feel tweaks.

   Colors are hex codes like #c25a0a (redder as the last 2 digits
   get smaller, e.g. #c2XX0a). Paste any hex into a color picker
   (search "hex color picker") to preview before committing.
   ============================================================ */
:root {
  /* --- THE 3 MAIN BRAND COLORS --- */
  --color-bg: #c25a0a;         /* Main orange — page background on most sections */
  --color-dark: #170e08;       /* Near-black — background on the alternating dark sections (About, Gallery, Contact) */
  --color-ink: #1e0f05;        /* Dark text color used ON TOP of the orange background */
  --color-cream: #fbf1e2;      /* Light warm-white text color used ON TOP of the dark background */

  /* --- ACCENT / SECONDARY COLORS --- */
  --color-accent-bright: #ffb066;  /* Lighter orange highlight — used for the active nav pill, hover glows */
  --color-bg-deep: #a24907;        /* Slightly deeper orange, used sparingly for depth */
  --color-ink-soft: #3a2012;       /* Softer/lighter version of the ink color, for secondary text on orange */
  --color-cream-muted: rgba(251, 241, 226, 0.72);  /* Softer version of cream, for secondary text on dark */
  --color-bg-card: rgba(30, 15, 5, 0.09);          /* Very subtle dark tint used behind cards/tracks on orange */
  --color-line-ink: rgba(30, 15, 5, 0.22);         /* Faint divider lines on orange backgrounds */
  --color-line-cream: rgba(251, 241, 226, 0.16);   /* Faint divider lines on dark backgrounds */
  --color-dark-2: #241407;     /* A second, slightly lighter near-black — used for button hover states */

  /* --- FONTS ---
     To change a font: pick a new one from fonts.google.com, then
     update the <link href="...family=..."> tag in index.html's
     <head> to match, in addition to changing the name below. */
  --font-display: "Anton", "Archivo Black", sans-serif;  /* Big bold headings (e.g. "UPCOMING SHOWS") */
  --font-body: "Archivo", -apple-system, BlinkMacSystemFont, sans-serif;  /* Everything else (paragraphs, nav, buttons) */

  /* --- SPACING SCALE ---
     Used for padding/gaps throughout. Bump these up or down to
     make the whole site feel more spacious or more compact. */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;   /* Top/bottom padding for every section — increase for more breathing room between sections */
  --space-7: 140px;

  /* --- SHAPES --- */
  --container-max: 1180px;  /* Max width of the content column on large screens */
  --radius-sm: 6px;          /* Small corner rounding (photos, cards) */
  --radius-md: 14px;         /* Medium corner rounding (bigger cards) */
  --radius-pill: 999px;      /* Fully rounded (nav pills, buttons) */

  /* --- MOTION ---
     Timing/easing for hover and scroll animations. Higher ms = slower. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);  /* The playful "overshoot" bounce used on a few hovers */
  --dur-fast: 180ms;
  --dur-med: 300ms;

  /* --- "ENGRAVED" TEXT EFFECT ---
     The carved/3D drop-shadow look on headings. Leave as-is unless
     you want to change how deep/bold the engraving looks. */
  --shadow-engrave:
    0 1px 0 rgba(255, 255, 255, 0.25),
    1px 2px 0 rgba(30, 15, 5, 0.55),
    2px 4px 0 rgba(30, 15, 5, 0.32),
    3px 6px 12px rgba(0, 0, 0, 0.22);
  --shadow-engrave-light:
    0 1px 0 rgba(0, 0, 0, 0.4),
    1px 2px 0 rgba(0, 0, 0, 0.35),
    2px 5px 14px rgba(0, 0, 0, 0.45);
}

@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;
  }
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 18px;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 { margin: 0; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--color-ink); color: var(--color-cream); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-dark);
  color: var(--color-cream);
  padding: 12px 20px;
  z-index: 1000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* Engraved / carved text effect, matching the EPK's stamped titles */
.text-engraved {
  color: var(--color-ink);
  text-shadow: var(--shadow-engrave);
}
.text-engraved-light {
  color: var(--color-cream);
  text-shadow: var(--shadow-engrave-light);
}

/* ============================================
   Layout helpers
   ============================================ */
.section {
  padding: var(--space-6) var(--space-2);
  scroll-margin-top: 72px;
  position: relative;
}
.section-dark {
  background: var(--color-dark);
  color: var(--color-cream);
}
.section-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* True gradient fades between sections. Each section fades into the NEXT
   one's color from its own bottom edge, using an eased (cubic ease-in)
   curve sampled at many stops — not a straight linear blend. It holds close
   to its own color through most of the band (slow), then curves quickly
   into the next color right at the seam, so the next section always starts
   on fully-settled color (headings never land mid-fade). The band is big
   enough to cover roughly half a typical section's height. */
.hero::after, .section::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 620px;
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  background: linear-gradient(180deg,
    transparent 0%, transparent 8.3%, rgba(23,14,8,0.02) 16.7%, rgba(23,14,8,0.06) 25%,
    rgba(23,14,8,0.13) 33.3%, rgba(23,14,8,0.24) 41.7%, rgba(23,14,8,0.4) 50%,
    rgba(23,14,8,0.58) 58.3%, rgba(23,14,8,0.75) 66.7%, rgba(23,14,8,0.87) 75%,
    var(--color-dark) 83.3%, var(--color-dark) 91.7%, var(--color-bg) 100%);
}
#shows::after,
#music::after,
#epk::after {
  background: linear-gradient(180deg,
    rgb(194,90,10) 0%, rgb(194,90,10) 8.3%, rgb(193,90,10) 16.7%, rgb(191,89,10) 25%,
    rgb(188,87,10) 33.3%, rgb(182,85,10) 41.7%, rgb(173,80,10) 50%, rgb(160,75,10) 58.3%,
    rgb(143,67,9) 66.7%, rgb(122,58,9) 75%, rgb(95,46,9) 83.3%, rgb(62,31,8) 91.7%,
    rgb(23,14,8) 100%);
}
#about::after,
#gallery::after {
  background: linear-gradient(180deg,
    rgb(23,14,8) 0%, rgb(23,14,8) 8.3%, rgb(24,14,8) 16.7%, rgb(26,15,8) 25%,
    rgb(29,17,8) 33.3%, rgb(35,19,8) 41.7%, rgb(44,24,8) 50%, rgb(57,29,8) 58.3%,
    rgb(74,37,9) 66.7%, rgb(95,46,9) 75%, rgb(122,58,9) 83.3%, rgb(155,73,10) 91.7%,
    rgb(194,90,10) 100%);
}
#contact::after { content: none; }

/* ============================================
   Section background textures — generative art
   inspired by the artist's own TouchDesigner piece
   ============================================ */
.section-texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
}
/* Layered offset drop-shadows give the flat linework a bit of embossed
   depth/parallax instead of reading as one flat silhouette. (A highlight
   copy would be canceled by multiply and a shadow copy canceled by screen,
   so each context only doubles up on the shadow direction that actually
   shows through its blend mode.) */
.section-dark .section-texture {
  mix-blend-mode: screen;
  filter: drop-shadow(5px 7px 2px rgba(251, 241, 226, 0.3)) drop-shadow(-3px -3px 4px rgba(251, 241, 226, 0.16));
}
.section:not(.section-dark) .section-texture {
  mix-blend-mode: multiply;
  filter: drop-shadow(5px 7px 2px rgba(30, 15, 5, 0.45)) drop-shadow(-3px -3px 4px rgba(30, 15, 5, 0.22));
}

/* Orange sections — your original TD piece + the pulse waveform, boosted */
.texture-shows {
  background-image: url("../assets/textures/texture-original-ink.png");
  background-size: 1150px auto;
  background-position: top right;
  opacity: 0.26;
}
.texture-music {
  background-image: url("../assets/textures/texture-original-ink.png");
  background-size: 1300px auto;
  background-position: center -180px;
  transform: rotate(3deg) scale(1.1);
  opacity: 0.24;
}
.texture-epk {
  background-image: url("../assets/textures/texture-original-ink.png");
  background-size: 1000px auto;
  background-position: bottom right -60px;
  transform: scale(-1, -1);
  opacity: 0.26;
}

/* Dark sections — the actual complex TD piece (not the simplified line art),
   recropped/rotated per section so it isn't a literal repeat */
.texture-about {
  background-image: url("../assets/textures/texture-original-cream.png");
  background-size: 1300px auto;
  background-position: top -100px left -200px;
  transform: rotate(-5deg) scale(1.15);
  opacity: 0.16;
}
.texture-gallery {
  background-image: url("../assets/textures/texture-original-cream.png");
  background-size: 1400px auto;
  background-position: bottom -150px right -250px;
  transform: scaleX(-1) rotate(4deg);
  opacity: 0.16;
}
.texture-contact {
  background-image: url("../assets/textures/texture-original-cream.png");
  background-size: 1250px auto;
  background-position: center;
  transform: scale(-1, 1) rotate(10deg);
  opacity: 0.16;
}

/* ============================================
   Scroll-reveal "pop in" animation
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.reveal.reveal-pop { transform: translateY(30px) scale(0.9) rotate(-3deg); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================
   Torn-paper photo frame
   ============================================ */
.torn-frame {
  background: var(--color-ink);
  padding: 7px;
  clip-path: polygon(2% 1%, 14% 4%, 29% 0%, 44% 5%, 58% 1%, 76% 4%, 91% 0%, 100% 7%, 96% 19%, 100% 33%, 95% 48%, 100% 63%, 97% 79%, 100% 91%, 89% 100%, 74% 96%, 59% 100%, 45% 95%, 30% 100%, 16% 97%, 3% 100%, 0% 87%, 5% 69%, 0% 54%, 4% 39%, 0% 24%, 3% 11%);
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  transition: transform var(--dur-med) var(--ease-out);
}
.torn-frame:hover { transform: rotate(-1.2deg) scale(1.015); }
.torn-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(2% 1%, 14% 4%, 29% 0%, 44% 5%, 58% 1%, 76% 4%, 91% 0%, 100% 7%, 96% 19%, 100% 33%, 95% 48%, 100% 63%, 97% 79%, 100% 91%, 89% 100%, 74% 96%, 59% 100%, 45% 95%, 30% 100%, 16% 97%, 3% 100%, 0% 87%, 5% 69%, 0% 54%, 4% 39%, 0% 24%, 3% 11%);
}
.section-title {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin-bottom: var(--space-4);
}
.section-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 5px;
  background: var(--color-ink);
  margin-top: var(--space-2);
  border-radius: var(--radius-pill);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.section-dark .section-title::after {
  background: var(--color-accent-bright);
  box-shadow: none;
}

/* Buttons — dark ink pops on the orange field; hero uses a light variant on its scrim */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  min-height: 44px;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.btn:active { transform: scale(0.97); }
.btn-accent {
  background: var(--color-ink);
  color: var(--color-cream);
}
.btn-accent:hover { background: var(--color-dark-2); }
.btn-outline {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-line-ink);
}
.btn-outline:hover { border-color: var(--color-ink); background: rgba(30, 15, 5, 0.18); }
.btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

.section-dark .btn-outline { color: var(--color-cream); border-color: var(--color-line-cream); }
.section-dark .btn-outline:hover { border-color: var(--color-cream); background: rgba(251, 241, 226, 0.08); }
.section-dark .btn-accent { background: var(--color-bg); color: var(--color-cream); }
.section-dark .btn-accent:hover { background: var(--color-bg-deep); }

.hero .btn-accent { background: var(--color-bg); color: var(--color-cream); }
.hero .btn-accent:hover { background: var(--color-bg-deep); }
.hero .btn-outline { color: var(--color-cream); border-color: rgba(251, 241, 226, 0.4); }
.hero .btn-outline:hover { border-color: var(--color-cream); background: rgba(251, 241, 226, 0.1); }

.link-btn {
  background: none;
  border: none;
  color: var(--color-ink);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 8px 0;
  min-height: 44px;
  border-bottom: 2px solid var(--color-line-ink);
}
.link-btn:hover { border-color: var(--color-ink); }

/* ============================================
   Header / Nav
   ============================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: rgba(23, 14, 8, 0);
  transition: background var(--dur-med) var(--ease-out), backdrop-filter var(--dur-med);
}
.site-header.scrolled {
  background: rgba(23, 14, 8, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-line-cream);
}
.header-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 14px var(--space-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.brand {
  display: inline-flex;
  margin-left: -18px;
}
.brand-logo {
  height: 62px;
  width: auto;
  transition: height var(--dur-med) var(--ease-out);
}
.site-header.scrolled .brand-logo { height: 42px; }

.main-nav ul { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.main-nav a {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  min-height: 44px;
  line-height: 24px;
  color: var(--color-accent-bright);
  transition: background var(--dur-fast), color var(--dur-fast), font-size var(--dur-med) var(--ease-out), padding var(--dur-med) var(--ease-out);
}
.main-nav a:hover { background: rgba(255, 176, 102, 0.16); }
.main-nav a.active { background: var(--color-accent-bright); color: var(--color-ink); }
.site-header.scrolled .main-nav a {
  font-size: 0.88rem;
  padding: 8px 15px;
  min-height: 38px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2.5px;
  background: var(--color-accent-bright);
  margin: 0 auto;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================
   Hero
   ============================================ */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: var(--space-2);
  padding-bottom: var(--space-6);
  overflow: hidden;
  background: var(--color-dark);
  color: var(--color-cream);
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media video, .hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(23,14,8,0.55) 0%, rgba(23,14,8,0.35) 35%, rgba(23,14,8,0.88) 88%, rgba(23,14,8,1) 100%),
    linear-gradient(90deg, rgba(23,14,8,0.55) 0%, rgba(23,14,8,0.05) 45%);
}
.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  max-width: 900px;
}
.hero-logo {
  width: min(80vw, 560px);
  height: auto;
  filter: drop-shadow(0 8px 30px rgba(0,0,0,0.6));
  animation: hero-in 900ms var(--ease-out) both;
}
.hero-roles {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(0.85rem, 2vw, 1.1rem);
  color: var(--color-accent-bright);
  margin: 0;
  animation: hero-in 700ms var(--ease-out) both;
  animation-delay: 250ms;
}
.hero-location {
  font-weight: 500;
  color: var(--color-cream-muted);
  margin: 0;
  letter-spacing: 0.02em;
  animation: hero-in 700ms var(--ease-out) both;
  animation-delay: 380ms;
}
.hero-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
  animation: hero-in 700ms var(--ease-out) both;
  animation-delay: 500ms;
}
@keyframes hero-in {
  from { opacity: 0; transform: translateY(26px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-logo, .hero-roles, .hero-location, .hero-actions { animation: none; }
}
.scroll-cue {
  position: absolute;
  bottom: var(--space-2);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  color: var(--color-cream);
  text-decoration: none;
  font-size: 1.4rem;
  opacity: 0.75;
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}

/* ============================================
   Mirrored-logo motif — the "cut & mirrored" element
   from the Music / Booking pages of the EPK
   ============================================ */
.motif-grid {
  display: grid;
  grid-template-columns: 1fr minmax(120px, 200px) 1fr;
  gap: var(--space-4);
  align-items: stretch;
}
.motif {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}
.motif-title {
  position: relative;
  z-index: 1;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: clamp(3.2rem, 9vw, 5.6rem);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ============================================
   Events / Shows
   ============================================ */
.events-list { display: flex; flex-direction: column; gap: 2px; }
.event-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--color-line-ink);
  transition: background var(--dur-fast);
}
.event-row:first-child { border-top: 1px solid var(--color-line-ink); }
.event-row:hover { background: var(--color-bg-card); }
.event-date { text-align: center; line-height: 1.1; }
.event-date .day { display: block; font-family: var(--font-display); font-size: 2.1rem; color: var(--color-ink); }
.event-date .month-year { display: block; font-size: 0.75rem; letter-spacing: 0.1em; color: var(--color-ink-soft); text-transform: uppercase; }
.event-info .title { font-weight: 700; font-size: 1.15rem; margin: 0 0 2px; }
.event-info .venue { color: var(--color-ink-soft); font-size: 0.95rem; margin: 0; }
.event-info .details { color: var(--color-ink-soft); font-size: 0.85rem; margin: 2px 0 0; font-style: italic; }

/* ============================================
   About
   ============================================ */
.about-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--space-5); align-items: center; }
.about-media .torn-frame { aspect-ratio: 4/5; width: 100%; }
.about-short { font-size: 1.3rem; font-weight: 700; line-height: 1.45; margin-bottom: var(--space-3); }
.about-full { display: flex; flex-direction: column; gap: 1em; margin-bottom: var(--space-2); font-weight: 500; }
.about-full[hidden] { display: none; }
.section-dark .about-short,
.section-dark .about-full { color: var(--color-cream); }

/* ============================================
   Music
   ============================================ */
.music-col-title { font-size: 1.1rem; margin-bottom: var(--space-2); letter-spacing: 0.04em; }
.track-list { display: flex; flex-direction: column; gap: var(--space-2); }
.track-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-line-ink);
  border-radius: var(--radius-md);
  padding: var(--space-2);
}
.track-card .track-title { font-weight: 700; margin-bottom: 8px; }
.track-embed { border-radius: var(--radius-sm); overflow: hidden; }
.track-embed iframe { width: 100%; border: none; display: block; }
.track-empty { color: var(--color-ink-soft); font-size: 0.9rem; font-style: italic; }
.platform-icons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-3); }
.platform-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  color: var(--color-ink);
  text-decoration: none;
  transition: transform 380ms var(--ease-bounce), opacity var(--dur-fast);
}
.platform-badge .icon { width: 36px; height: 36px; }
.platform-badge:hover { transform: scale(1.16) rotate(-4deg); }
.platform-badge[aria-disabled="true"] { opacity: 0.35; }
.section-dark .platform-badge { color: var(--color-cream); }

.music-divider {
  height: 1px;
  background: var(--color-line-ink);
  margin: var(--space-3) 0;
}
.music-subheading {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-2);
}
.youtube-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

/* Hover-to-play video tiles */
.video-tile {
  position: relative;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16/9;
  text-decoration: none;
  border: 2px solid var(--color-ink);
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}
.video-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: blur(7px) brightness(0.6) saturate(1.1);
  transform: scale(1.08);
  transition: filter var(--dur-med) var(--ease-out), transform 480ms var(--ease-bounce);
}
.video-tile:hover video, .video-tile:focus-visible video {
  filter: blur(0) brightness(0.8) saturate(1.1);
  transform: scale(1.16);
}
.video-tile-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--color-cream);
  pointer-events: none;
  background: linear-gradient(180deg, rgba(23,14,8,0.15), rgba(23,14,8,0.35));
}
.video-tile-overlay .icon { width: 34px; height: 34px; }
.video-tile-label {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1.3rem;
  text-shadow: var(--shadow-engrave-light);
}
.video-tile-sm { aspect-ratio: 16/10; border-width: 1.5px; }
.video-tile-sm .video-tile-overlay .icon { width: 22px; height: 22px; }
.video-tile-sm .video-tile-label { font-size: 0.8rem; letter-spacing: 0.03em; }

/* ============================================
   Gallery
   ============================================ */
#gallery .section-inner { padding: 0 var(--space-4); }
.gallery-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); }
.gallery-item {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  background: var(--color-dark);
  aspect-ratio: 1/1;
  border: none;
  padding: 0;
  display: block;
  width: 100%;
}
.gallery-item img, .gallery-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 420ms var(--ease-bounce), opacity var(--dur-fast);
}
.gallery-item:hover img, .gallery-item:hover video { transform: scale(1.16) rotate(-3deg); }
.gallery-item:hover::after { content: ""; position: absolute; inset: 0; background: rgba(30, 15, 5, 0.28); }
.gallery-item .play-badge {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(23, 14, 8, 0.62);
  border: 2px solid rgba(251, 241, 226, 0.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
  transition: transform var(--dur-fast) var(--ease-out);
}
.gallery-item .play-badge svg { width: 18px; height: 18px; fill: var(--color-cream); margin-left: 3px; }
.gallery-item:hover .play-badge { transform: translate(-50%, -50%) scale(1.1); }

/* ============================================
   EPK
   ============================================ */
.epk-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--space-5); align-items: center; }
.epk-media .torn-frame { aspect-ratio: 4/5; width: 100%; }
.epk-copy p { font-size: 1.05rem; margin-bottom: var(--space-3); font-weight: 500; }
.epk-copy { display: flex; flex-direction: column; }
.epk-copy .btn { align-self: flex-start; }
.epk-copy .btn + .btn { margin-top: var(--space-2); }

/* ============================================
   Contact
   ============================================ */
.contact-copy p { color: var(--color-cream-muted); }
.contact-links { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-3); }
.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 600;
  padding: 8px 0;
  min-height: 44px;
  color: var(--color-cream);
}
.contact-link:hover { color: var(--color-accent-bright); }
.contact-link .icon { width: 20px; height: 20px; flex-shrink: 0; }

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: rgba(251, 241, 226, 0.05);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-line-cream);
}
.field { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-cream-muted); }
.field input, .field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-cream);
  background: rgba(251, 241, 226, 0.07);
  border: 1px solid var(--color-line-cream);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  min-height: 44px;
  resize: vertical;
}
.field input:focus, .field textarea:focus { border-color: var(--color-accent-bright); }
.form-note { font-size: 0.9rem; color: var(--color-accent-bright); min-height: 1.2em; }

/* ============================================
   Footer
   ============================================ */
.site-footer { padding: var(--space-4) var(--space-2); background: var(--color-dark); color: var(--color-cream); }
.footer-inner { max-width: var(--container-max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); }
.footer-logo { height: 22px; width: auto; opacity: 0.9; }
.footer-socials { display: flex; gap: var(--space-2); }
.footer-socials a { color: var(--color-cream-muted); text-decoration: none; font-weight: 600; font-size: 0.9rem; min-height: 44px; display: inline-flex; align-items: center; }
.footer-socials a:hover { color: var(--color-accent-bright); }
.footer-copy { color: var(--color-cream-muted); font-size: 0.85rem; margin: 0; width: 100%; text-align: center; order: 3; }

/* ============================================
   Lightbox
   ============================================ */
.lightbox { position: fixed; inset: 0; z-index: 500; background: rgba(10, 6, 3, 0.94); display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox-image, .lightbox-video { max-width: min(90vw, 1100px); max-height: 86vh; object-fit: contain; border-radius: var(--radius-sm); }
.lightbox-close, .lightbox-nav {
  position: absolute;
  background: rgba(23, 14, 8, 0.7);
  color: var(--color-cream);
  border: 1px solid var(--color-line-cream);
  border-radius: 50%;
  width: 48px; height: 48px;
  font-size: 1.4rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover, .lightbox-nav:hover { background: var(--color-accent-bright); color: var(--color-ink); }
.lightbox-close { top: var(--space-2); right: var(--space-2); }
.lightbox-prev { left: var(--space-2); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: var(--space-2); top: 50%; transform: translateY(-50%); }

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 900px) {
  .about-grid, .epk-grid, .contact-grid { grid-template-columns: 1fr; }
  .about-media, .epk-media { max-width: 340px; margin: 0 auto var(--space-3); }

  .motif-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .motif { min-height: 180px; order: -1; }
  .motif-title { writing-mode: horizontal-tb; transform: none; font-size: clamp(2.4rem, 11vw, 3.4rem); }

  #gallery .section-inner { padding: 0 var(--space-2); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
}

@media (max-width: 720px) {
  .hero::after, .section::after { height: 340px; }

  .main-nav {
    position: fixed;
    top: 62px;
    left: 0; right: 0;
    background: rgba(23, 14, 8, 0.98);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-line-cream);
    max-height: calc(100dvh - 62px);
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-med);
  }
  .main-nav.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .main-nav ul { flex-direction: column; padding: var(--space-2); gap: 4px; }
  .main-nav a { display: block; }
  .nav-toggle { display: flex; }

  .event-row { grid-template-columns: 64px 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .section { padding: var(--space-5) var(--space-2); }
}

@media (max-width: 480px) {
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { width: 100%; }
}