/* ============================================================
   MAX FUSTER — warm editorial music site
   Palette: bone paper · warm ink · gold · rust
   Type: Fraunces (display) · Space Grotesk (ui) · Space Mono (labels)
   ============================================================ */

:root {
  --paper:      #F3EEE3;
  --paper-2:    #EBE3D3;
  --ink:        #211F18;
  --ink-soft:   #5C5747;
  --ink-faint:  #8B8674;
  --gold:       #B07E28;
  --gold-deep:  #8F6417;
  --rust:       #AE5731;
  --dark:       #17150F;
  --dark-2:     #201D15;
  --canvas:     #1E1A12;       /* warm dark canvas */
  --line:       rgba(33, 31, 24, 0.16);
  --line-soft:  rgba(33, 31, 24, 0.09);

  --maxw: 1440px;
  --pad: clamp(1.25rem, 4vw, 4rem);

  --f-logo: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-display: "Fraunces", Georgia, serif;   /* serif headlines */
  --f-ui: "Space Grotesk", system-ui, sans-serif;
  --f-mono: "Space Mono", ui-monospace, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  padding: clamp(10px, 3.4vw, 64px);
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* ---------- Content card (the light, navigable surface) ---------- */
.shell {
  position: relative; z-index: 2;
  max-width: 1600px; margin: 0 auto;
  background: var(--paper);
  box-shadow: 0 40px 130px rgba(0,0,0,0.5);
  overflow-x: clip;
}
/* subtle paper grain, now scoped to the card */
.shell::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
  background:
    radial-gradient(120% 80% at 80% -5%, rgba(176,126,40,0.06), transparent 60%),
    radial-gradient(90% 60% at -10% 105%, rgba(174,87,49,0.05), transparent 55%);
}

/* ---------- shared bits ---------- */
.label {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--rust);
  text-transform: lowercase;
}
.label--light { color: #E0A24A; }

.meta-val {
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  line-height: 1.25;
  color: var(--ink);
  margin-top: 0.35rem;
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: 0.75rem 1rem; font-family: var(--f-mono); font-size: 0.8rem;
}
.skip-link:focus { left: 0; }

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

/* ============================================================
   MOBILE TOP BAR + NAV (hidden on desktop)
   ============================================================ */
.topbar {
  display: none;
  position: sticky; top: 0; z-index: 40;
  align-items: center; justify-content: space-between;
  padding: 0.9rem var(--pad);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar__brand {
  font-family: var(--f-ui); font-weight: 700; letter-spacing: 0.04em;
  font-size: 0.95rem;
}
.topbar__toggle {
  display: grid; gap: 5px; padding: 8px; background: none; border: 0; cursor: pointer;
}
.topbar__toggle span { width: 26px; height: 2px; background: var(--ink); transition: transform 0.3s var(--ease), opacity 0.3s; }
.topbar__toggle[aria-expanded="true"] span:first-child { transform: translateY(7px) rotate(45deg); }
.topbar__toggle[aria-expanded="true"] span:last-child { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  position: fixed; inset: 0; z-index: 39;
  flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 0.5rem; padding: var(--pad);
  background: var(--paper);
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 11vw, 3.4rem);
  font-weight: 400; line-height: 1.05; color: var(--ink);
}
.mobile-nav a:active { color: var(--gold); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; z-index: 2;
  max-width: var(--maxw); margin: 0 auto;
  min-height: 100vh;
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--pad) clamp(3.25rem, 6vw, 6rem);
  display: flex; flex-direction: column;
  container-type: inline-size;
}

.hero__grid {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(190px, 15%) 1fr minmax(150px, 15%);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  padding-top: clamp(0.5rem, 2vw, 1.5rem);
}

/* left column */
.hero__aside { display: flex; flex-direction: column; gap: 1.1rem; }
.chip {
  width: 100%; max-width: 180px; aspect-ratio: 4 / 3;
  overflow: hidden; background: var(--paper-2);
  border: 1px solid var(--line-soft);
}
.chip img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.95) contrast(1.02); }

.stacknav { display: flex; flex-direction: column; }
.stacknav a {
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2.15rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-transform: uppercase;
  width: max-content;
  transition: color 0.25s var(--ease), transform 0.25s var(--ease);
}
.stacknav a:hover, .stacknav a:focus-visible { color: var(--gold); transform: translateX(6px); }
.stacknav a.is-active { color: var(--gold-deep); }

/* center column */
.hero__center {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  gap: 0.75rem 1.5rem;
  justify-items: start;
}
.hero__meta--genres { grid-column: 1 / -1; align-self: end; }
.hero__portrait {
  grid-column: 1 / -1;
  width: min(100%, 460px);
  aspect-ratio: 3 / 4;
  max-height: 56vh;
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  margin-inline: auto;
}
.hero__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.hero__meta--years { grid-column: 1 / -1; }

/* right column */
.hero__side {
  display: flex; flex-direction: column; align-items: flex-end;
  align-self: stretch; justify-content: space-between; gap: 2rem;
}
.hero__meta--occ { text-align: right; }
.hero__meta--occ .label { text-align: right; }

/* wordmark row */
.hero__wordmark {
  padding-top: clamp(0.5rem, 2vw, 1.25rem);
  border-top: 1px solid var(--line);
  margin-top: clamp(1rem, 2vw, 1.75rem);
}
.wordmark {
  font-family: var(--f-logo);
  font-weight: 800;
  font-size: clamp(2.8rem, 13vw, 13rem);      /* fallback for no container-query support */
  font-size: clamp(2.8rem, 15cqw, 14rem);     /* sized to the hero's actual width -> never clips */
  line-height: 0.84;
  letter-spacing: -0.04em;
  color: var(--gold);
  text-transform: uppercase;
  white-space: nowrap;
  width: 100%;
}
.hero__foot { display: flex; align-items: flex-end; gap: 1.25rem; }
.chip--foot { max-width: 150px; aspect-ratio: 5 / 4; }
.hero__based {
  font-family: var(--f-ui);
  font-size: clamp(0.9rem, 1.05vw, 1.05rem);
  line-height: 1.4;
  color: var(--ink-soft);
  max-width: 22ch;
  text-align: right;
}

.scroll-cue {
  position: absolute; bottom: clamp(1rem, 2vw, 1.6rem); left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em;
  color: var(--ink-soft); text-transform: uppercase;
}
.scroll-cue svg { animation: bob 1.8s var(--ease) infinite; }
@keyframes bob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(4px);} }
@media (prefers-reduced-motion: reduce) { .scroll-cue svg { animation: none; } }

/* ============================================================
   SECTIONS (generic)
   ============================================================ */
.section {
  position: relative; z-index: 2;
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(3.5rem, 9vw, 8rem) var(--pad);
}
.section__head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section__title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 8vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0.4rem 0 0.9rem;
}
.section__lede {
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 52ch;
}

/* ---------- CATALOG (album-art grids) ---------- */
.section__ext {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 1.25rem;
  font-family: var(--f-mono); font-size: 0.8rem; color: var(--rust);
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: border-color 0.25s var(--ease), gap 0.25s var(--ease);
}
.section__ext:hover { border-color: var(--rust); gap: 0.65rem; }

.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.9rem, 1.6vw, 1.5rem);
}
.tile {
  display: flex; flex-direction: column; gap: 0.7rem;
  background: none; border: 0; padding: 0; margin: 0;
  text-align: left; cursor: pointer; color: inherit;
  font: inherit;
}
.tile__art {
  position: relative;
  aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--paper-2); border: 1px solid var(--line-soft);
}
.tile__art img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s var(--ease), filter 0.4s var(--ease);
}
.tile__art::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 55%, rgba(23,21,15,0.35), rgba(23,21,15,0.65));
  opacity: 0; transition: opacity 0.35s var(--ease);
}
.tile__badge {
  position: absolute; z-index: 2; left: 50%; top: 50%;
  transform: translate(-50%, -46%) scale(0.9);
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold); color: var(--paper);
  opacity: 0; transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.tile:hover .tile__art img,
.tile:focus-visible .tile__art img { transform: scale(1.06); }
.tile:hover .tile__art::after,
.tile:focus-visible .tile__art::after { opacity: 1; }
.tile:hover .tile__badge,
.tile:focus-visible .tile__badge { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.tile__title {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(0.95rem, 1.1vw, 1.1rem); line-height: 1.15;
  letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.tile__artist {
  font-size: 0.82rem; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- COLLAGE (production wall) ---------- */
.collage {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 6px;
  overflow: visible; /* let tiles grow past the grid on hover */
}
.ctile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--paper-2);
  outline: 1px solid var(--line-soft);
  cursor: pointer;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), z-index 0s;
  z-index: 1;
}
.ctile img { width: 100%; height: 100%; object-fit: cover; }
.ctile__count {
  position: absolute; top: 6px; right: 6px; z-index: 3;
  font-family: var(--f-mono); font-size: 0.62rem; line-height: 1;
  padding: 3px 5px; border-radius: 100px;
  background: rgba(23,21,15,0.7); color: var(--paper);
  opacity: 0.85;
}
.ctile__cap {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 7px 6px;
  background: linear-gradient(to top, rgba(17,15,9,0.9), rgba(17,15,9,0.2) 55%, transparent);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.ctile__cap b {
  font-family: var(--f-display); font-weight: 600;
  font-size: 0.66rem; line-height: 1.12; letter-spacing: -0.01em;
  color: var(--paper);
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ctile__cap i {
  font-style: normal; font-size: 0.52rem; color: rgba(243,238,227,0.85);
  margin-top: 2px; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* hover / focus: grow and reveal */
.ctile:hover, .ctile:focus-visible {
  transform: scale(1.28);
  z-index: 10;
  box-shadow: 0 12px 30px rgba(17,15,9,0.4);
  outline-color: transparent;
}
.ctile:hover .ctile__cap, .ctile:focus-visible .ctile__cap { opacity: 1; }
.ctile:hover .ctile__count, .ctile:focus-visible .ctile__count { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .ctile:hover, .ctile:focus-visible { transform: scale(1.25); }
}

/* ---------- MODAL ---------- */
.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: var(--pad);
}
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(17,15,9,0.62);
  backdrop-filter: blur(6px);
  animation: fade 0.3s var(--ease);
}
.modal__card {
  position: relative; z-index: 2;
  width: min(660px, 100%);
  display: grid; grid-template-columns: 200px 1fr;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--paper); border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(17,15,9,0.4);
  animation: pop 0.35s var(--ease);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .modal__backdrop, .modal__card { animation: none; }
}
.modal__close {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 3;
  width: 40px; height: 40px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  border: 0; border-radius: 50%; color: var(--ink); cursor: pointer;
  transition: background 0.2s var(--ease);
}
.modal__close:hover { background: var(--paper-2); }
.modal__art {
  position: relative; align-self: center;
  background: var(--paper-2); aspect-ratio: 1/1; overflow: hidden;
}
.modal__art img { width: 100%; height: 100%; object-fit: cover; }
.modal__preview {
  position: absolute; left: 0.6rem; bottom: 0.6rem;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold); color: var(--paper); border: 0; cursor: pointer;
  box-shadow: 0 6px 20px rgba(17,15,9,0.35);
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.modal__preview .ic-play { transform: translateX(1px); } /* optical centering of the triangle */
.modal__preview .ic-pause { display: none; }
.modal__preview.is-playing .ic-play { display: none; }
.modal__preview.is-playing .ic-pause { display: block; }
.modal__preview:hover { transform: scale(1.07); }
.modal__meta { display: flex; flex-direction: column; justify-content: center; }
.modal__kicker { margin-bottom: 0.5rem; }
.modal__title {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.08; letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}
.modal__artist { color: var(--ink-soft); font-size: 1rem; margin-bottom: 1.75rem; }
.modal__links { display: flex; flex-direction: column; gap: 0.7rem; }
.stream {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.8rem 1.1rem; border-radius: 100px;
  font-family: var(--f-ui); font-weight: 600; font-size: 0.95rem;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.stream__ico { flex: none; width: 24px; height: 24px; display: grid; place-items: center; }
.stream__ico svg { display: block; width: 24px; height: 24px; }
.stream:hover { transform: translateY(-2px); }
.stream--sp { background: #1DB954; color: #fff; }
.stream--am { background: var(--ink); color: var(--paper); }

/* ---------- REEL ---------- */
.reel {
  position: relative; z-index: 2;
  height: clamp(60vh, 78vh, 900px);
  overflow: hidden;
  background: var(--dark);
}
.reel__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,13,9,0.7), rgba(15,13,9,0.15) 45%, rgba(15,13,9,0.4));
}
.reel__overlay {
  position: absolute; z-index: 2; left: var(--pad); bottom: clamp(1.75rem, 4vw, 3rem);
  max-width: var(--maxw);
}
.reel__caption {
  font-family: var(--f-mono); font-weight: 400;
  font-size: clamp(1.35rem, 3.4vw, 2.9rem); line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff; margin-top: 0.6rem; text-wrap: balance;
}

/* ---------- ABOUT ---------- */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.about__img { overflow: hidden; background: var(--paper-2); border: 1px solid var(--line-soft); }
.about__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.about__lead {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2.6rem); line-height: 1.14;
  letter-spacing: -0.01em; margin: 0.75rem 0 1.5rem; text-wrap: balance;
}
.about__text { color: var(--ink-soft); font-size: clamp(1rem, 1.2vw, 1.1rem); max-width: 46ch; }
.about__stats {
  margin-top: 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 2rem;
  border-top: 1px solid var(--line); padding-top: 1.5rem;
}
.about__stats dt { font-family: var(--f-mono); font-size: 0.72rem; color: var(--rust); text-transform: lowercase; margin-bottom: 0.25rem; }
.about__stats dd { font-weight: 500; font-size: 0.98rem; }

/* ---------- SHOWS ---------- */
.showlist { list-style: none; border-top: 1px solid var(--line); }
.show {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center; gap: 1rem;
  padding: clamp(1.1rem, 2.4vw, 1.75rem) 0.5rem;
  border-bottom: 1px solid var(--line);
  transition: background 0.3s var(--ease), padding-left 0.3s var(--ease);
}
.show:hover { background: var(--paper-2); padding-left: 1.25rem; }
.show__date { display: flex; flex-direction: column; line-height: 1; }
.show__date b { font-family: var(--f-display); font-weight: 500; font-size: 1.25rem; }
.show__date i { font-family: var(--f-mono); font-style: normal; font-size: 0.72rem; color: var(--ink-faint); margin-top: 0.3rem; }
.show__city { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.2rem, 2.4vw, 1.85rem); }
.show__venue { color: var(--ink-soft); font-size: 0.95rem; }
.show__cta {
  justify-self: end;
  font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.02em;
  padding: 0.55rem 1.15rem; border: 1px solid var(--ink); border-radius: 100px;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
a.show__cta:hover { background: var(--ink); color: var(--paper); }
.show__cta.is-sold { border-color: var(--line); color: var(--ink-faint); cursor: default; }
.show--sold .show__city { color: var(--ink-soft); }
.show--past .show__date b,
.show--past .show__date i,
.show--past .show__city,
.show--past .show__venue { color: var(--ink-faint); }
.show--past:hover { background: transparent; padding-left: 0.5rem; }
.show__cta.is-past { border-color: var(--line); color: var(--ink-faint); cursor: default; }
.show__cta.is-private { border-color: var(--line); color: var(--ink-faint); cursor: default; letter-spacing: 0.04em; }

/* ---------- CONTACT ---------- */
.contact {
  position: relative; z-index: 2;
  background: var(--dark); color: var(--paper);
  padding: clamp(4rem, 9vw, 8rem) var(--pad) clamp(1.5rem, 3vw, 2.5rem);
  overflow: hidden;
}
.contact__inner { max-width: var(--maxw); margin: 0 auto; }
.contact__mail {
  display: inline-block;
  font-family: var(--f-mono); font-weight: 400;
  font-size: clamp(1.5rem, 4.6vw, 3.6rem); line-height: 1.05;
  letter-spacing: -0.02em; margin: 0.75rem 0 2rem;
  color: #fff;
  transition: color 0.3s var(--ease);
  word-break: break-word;
}
.contact__mail:hover { color: #E0A24A; }
.contact__socials { display: flex; flex-wrap: wrap; gap: 1.5rem 2.25rem; }
.contact__socials a {
  font-family: var(--f-ui); font-weight: 500; font-size: 1.05rem;
  color: var(--paper); position: relative; padding-bottom: 3px;
}
.contact__socials a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: #E0A24A; transition: width 0.3s var(--ease);
}
.contact__socials a:hover::after { width: 100%; }

.footmarquee {
  width: 100%; overflow: hidden;
  margin: clamp(2.5rem, 7vw, 6rem) 0 1.5rem;
}
.footmarquee__track {
  display: flex; width: max-content;
  animation: marquee 26s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .footmarquee__track { animation: none; }
}
.footmark {
  font-family: var(--f-logo); font-weight: 800;
  font-size: clamp(3.5rem, 20vw, 20rem); line-height: 0.82;
  letter-spacing: 0.015em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1px rgba(224,162,74,0.45);
  white-space: nowrap; padding-right: 0.35em; flex: none;
}
.contact__legal {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 0.5rem 2rem;
  padding-top: 1.5rem; border-top: 1px solid rgba(243,238,227,0.15);
  font-family: var(--f-mono); font-size: 0.75rem; color: rgba(243,238,227,0.6);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .topbar { display: flex; }

  .hero { min-height: auto; padding-top: 1.5rem; }
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .hero__aside { flex-direction: row; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
  .hero__aside .chip { order: 2; }
  .stacknav { display: none; } /* mobile uses top-bar menu */
  .hero__aside .label { display: none; }
  .hero__center { justify-items: stretch; }
  .hero__portrait { max-height: none; width: 100%; }
  .hero__meta--genres { align-self: start; }
  .hero__side {
    flex-direction: column; align-items: flex-start;
    align-self: auto; justify-content: flex-start; gap: 1.25rem;
  }
  .hero__meta--occ, .hero__meta--occ .label { text-align: left; }
  .hero__meta--occ .meta-val { columns: 2; }
  .hero__based { text-align: left; max-width: 32ch; }

  .hero__wordmark { grid-template-columns: 1fr; }
  .wordmark { white-space: normal; font-size: clamp(3rem, 17vw, 6rem); }
  .hero__foot { justify-content: space-between; }
  .scroll-cue { display: none; }

  .about__grid { grid-template-columns: 1fr; }
  .about__img { order: -1; }

  .grid { grid-template-columns: repeat(3, 1fr); }
  .collage { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 5px; }

  .modal__card { grid-template-columns: 1fr; max-width: 380px; }
  .modal__art { aspect-ratio: 16/10; }

  .show {
    grid-template-columns: 4.5rem 1fr auto;
    grid-template-areas:
      "date city cta"
      "date venue cta";
    row-gap: 0.2rem;
  }
  .show__date { grid-area: date; }
  .show__city { grid-area: city; }
  .show__venue { grid-area: venue; }
  .show__cta { grid-area: cta; }
}

@media (max-width: 560px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .collage { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
}

/* touch devices: no hover — reveal caption on the active/pressed tile */
@media (hover: none) {
  .ctile:active { transform: scale(1.28); z-index: 10; box-shadow: 0 12px 30px rgba(17,15,9,0.4); }
  .ctile:active .ctile__cap { opacity: 1; }
}

@media (max-width: 600px) {
  /* phones use the vertical (jumping) clip in a 4:5 portrait band */
  .reel { height: auto; aspect-ratio: 4 / 5; }
}

@media (max-width: 520px) {
  .hero__aside .chip { max-width: 120px; }
  .about__stats { grid-template-columns: 1fr; }
  .footmark { -webkit-text-stroke-width: 0.75px; }
}