/* ═══════════════════════════════════════════════════════════
   5TO9 — stylesheet
   Palette lifted straight off the logo: cream, teal, mustard
   on near-black printed paper.
   ═══════════════════════════════════════════════════════════ */

:root {
  --ink:        #0E0D0C;
  --ink-2:      #15130F;
  --ink-3:      #1D1A15;
  --paper:      #EFE7D5;
  --paper-2:    rgba(239, 231, 213, .66);
  --paper-3:    rgba(239, 231, 213, .40);
  --teal:       #3C8177;
  --teal-lift:  #4EA294;
  --gold:       #D3A951;
  --gold-lift:  #E5BE68;
  --line:       rgba(239, 231, 213, .14);
  --line-soft:  rgba(239, 231, 213, .07);

  --shell:      1240px;
  --gutter:     clamp(16px, 5vw, 56px);
  --header-h:   68px;

  --display:    "Anton", "Arial Narrow", Impact, sans-serif;
  --body:       "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ease:       cubic-bezier(.2, .7, .2, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

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

/* Faint paper grain over the whole page, like the logo artwork. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  opacity: .16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

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

/* Several components below set `display`, which would otherwise beat the
   UA rule for [hidden]. Keep the attribute authoritative. */
[hidden] { display: none !important; }

a { color: var(--paper); text-decoration-color: var(--paper-3); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--gold); }

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

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

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

.skip-link {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--gold);
  color: var(--ink);
  font-weight: 600;
  border-radius: 3px;
  transform: translateY(-160%);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: none; }

.muted { color: var(--paper-3); }

/* ─────────────────────────── Header ─────────────────────── */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(14, 13, 12, .88);
  backdrop-filter: blur(14px) saturate(130%);
  border-bottom-color: var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
}

.brand {
  flex: none;
  display: block;
  width: 34px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  pointer-events: none;
}
.site-header.is-stuck .brand { opacity: 1; transform: none; pointer-events: auto; }
.brand img { width: 100%; }

.nav {
  margin-left: auto;
  display: flex;
  gap: clamp(14px, 2.2vw, 30px);
}
.nav a {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: .10em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper-2);
  padding: 6px 0;
  position: relative;
  transition: color .2s;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav a:hover, .nav a.is-active { color: var(--paper); }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }

.header-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lang {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.lang button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--paper-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  padding: 6px 11px;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.lang button:hover { color: var(--paper); }
.lang button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }

.icon-btn {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--paper-2);
  transition: color .2s, border-color .2s, background-color .2s;
}
.icon-btn svg { width: 17px; height: 17px; fill: currentColor; }
.icon-btn:hover { color: var(--ink); background: var(--paper); border-color: var(--paper); }

.burger {
  display: none;
  width: 38px; height: 34px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  padding: 9px 9px;
}
.burger span {
  display: block;
  height: 2px;
  background: var(--paper);
  transition: transform .28s var(--ease), opacity .2s;
}
.burger span + span { margin-top: 4px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ─────────────────────────── Hero ───────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-block: calc(var(--header-h) + 40px) clamp(64px, 12vh, 130px);
  overflow: hidden;
}

.hero-media { position: absolute; inset: 0; }
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 48% 26%;
  filter: grayscale(1) contrast(1.16) brightness(.84);
  /* The three of them stand across the left two thirds of the photo — exactly
     where the logo and the headline sit. Sliding the picture right clears the
     left-hand man, and the strip left behind reads as part of the shot, since
     the photo's own background is black too.

     How far it slides tracks the window: below 1024px the crop already keeps
     the band clear of the copy and no shift is wanted, while above it the
     centred shell walks the logo rightwards and the picture has to keep up.
     The ceiling stops the right-hand man being pushed out of frame. */
  transform: translateX(clamp(0px, calc((100vw - 1024px) * 0.28), 360px));
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Two scrims instead of one heavy diagonal: a gentle one from the left that
     grounds the copy column, and a stronger one from the bottom, where the
     text actually is. The faces sit above it and stay lit. */
  background:
    linear-gradient(94deg, var(--ink) 0%, rgba(14,13,12,.80) 17%, rgba(14,13,12,.40) 37%, rgba(14,13,12,.08) 60%, rgba(14,13,12,0) 76%),
    linear-gradient(to bottom, rgba(14,13,12,.58) 0%, rgba(14,13,12,0) 24%),
    linear-gradient(to top, var(--ink) 3%, rgba(14,13,12,.74) 26%, rgba(14,13,12,0) 60%);
}

/* The copy is left-aligned inside the page's shell, the same edge every
   section below it starts at. It used to be centred on the viewport instead,
   which on a wide screen walked the logo straight onto the left man's face. */
.hero-inner { position: relative; z-index: 2; }
/* 628px is what the copy column measured before (740px box less its two
   56px gutters), so the headline still breaks where it always did. */
.hero-inner > * { max-width: 628px; }

.hero-logo {
  /* Smaller than it was: at this size it stays clear of the faces behind it
     on every window width, and the header carries the mark as well. */
  width: clamp(132px, 15vw, 200px);
  margin-bottom: clamp(20px, 3.4vw, 34px);
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.6));
  animation: rise .9s var(--ease) both;
}

.hero-kicker {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold);
  animation: rise .9s .08s var(--ease) both;
}

.hero-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(42px, 7.6vw, 98px);
  line-height: .92;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-wrap: balance;
  animation: rise .9s .14s var(--ease) both;
}
.hero-title .accent { color: var(--teal-lift); }
/* Keeps "Nine-to-Five" from wrapping at one of its own hyphens. */
.nb { white-space: nowrap; }

.hero-lead {
  margin: 20px 0 0;
  max-width: 44ch;
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--paper-2);
  animation: rise .9s .22s var(--ease) both;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
  animation: rise .9s .30s var(--ease) both;
}

.hero-scroll {
  position: absolute;
  left: 50%; bottom: 22px;
  z-index: 3;
  width: 22px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  transform: translateX(-50%);
}
.hero-scroll span {
  position: absolute;
  left: 50%; top: 8px;
  width: 3px; height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--gold);
  animation: scrollHint 1.8s var(--ease) infinite;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes scrollHint {
  0%   { opacity: 0; transform: translateY(0); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(15px); }
}

/* ─────────────────────────── Buttons ────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border: 1px solid var(--paper-3);
  border-radius: 999px;
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  transition: background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease);
}
.btn:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); transform: translateY(-2px); }

.btn-primary { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn-primary:hover { background: var(--gold-lift); border-color: var(--gold-lift); color: var(--ink); }

.btn-ghost { border-color: var(--line); color: var(--paper-2); }

/* ─────────────────────────── Ticker ─────────────────────── */

.ticker {
  border-block: 1px solid var(--line);
  background: var(--ink-2);
  overflow: hidden;
  padding-block: 13px;
}
.ticker-track {
  display: flex;
  width: max-content;
  gap: 34px;
  animation: marquee 34s linear infinite;
}
.ticker-track span {
  font-family: var(--display);
  font-size: clamp(17px, 2.4vw, 25px);
  letter-spacing: .10em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--paper-3);
}
.ticker-track span:nth-child(even) { color: var(--teal-lift); }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─────────────────────────── Sections ───────────────────── */

.section { padding-block: clamp(70px, 11vw, 140px); position: relative; }
.section-band { background: var(--ink-2); border-block: 1px solid var(--line-soft); }
.section-live { background: var(--ink-2); border-block: 1px solid var(--line-soft); }

.sec-head { margin-bottom: clamp(32px, 5vw, 60px); }

.sec-num {
  display: inline-block;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .3em;
  color: var(--gold);
  margin-bottom: 10px;
}
.sec-num::after {
  content: "";
  display: inline-block;
  width: 40px; height: 1px;
  background: var(--line);
  vertical-align: middle;
  margin-left: 12px;
}

.sec-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(38px, 7vw, 82px);
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: -.005em;
}

.sec-lead {
  margin: 16px 0 0;
  max-width: 52ch;
  color: var(--paper-2);
  font-size: clamp(15px, 1.4vw, 18px);
}

/* ─────────────────────────── Tracks ─────────────────────── */

.tracks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }

.track {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: center;
  gap: 18px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--line);
  transition: background-color .25s var(--ease);
}
.track:hover { background: rgba(239,231,213,.035); }
.track.is-active { background: rgba(60,129,119,.10); }

.track-play {
  position: relative;
  flex: none;
  width: 52px; height: 52px;
  border-radius: 999px;
  border: 1px solid var(--paper-3);
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color .22s, color .22s, border-color .22s, transform .22s;
}
.track-play svg { width: 21px; height: 21px; fill: currentColor; grid-area: 1 / 1; }
.track-play .i-pause { display: none; }
.track-play:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); transform: scale(1.06); }
.track.is-playing .track-play { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.track.is-playing .track-play .i-play  { display: none; }
.track.is-playing .track-play .i-pause { display: block; }

.track-num {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: .18em;
  color: var(--paper-3);
}

.track-body { min-width: 0; }

.track-name {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 3.4vw, 34px);
  line-height: 1.1;
  text-transform: uppercase;
}

.track-bar {
  height: 3px;
  margin-top: 10px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  max-height: 0;
  transition: opacity .3s var(--ease), max-height .3s var(--ease), margin-top .3s var(--ease);
}
.track.is-active .track-bar { opacity: 1; max-height: 3px; }
.track-fill {
  height: 100%;
  width: 0;
  background: var(--gold);
  border-radius: 2px;
}

.eq { display: flex; align-items: flex-end; gap: 3px; height: 18px; opacity: 0; transition: opacity .3s; }
.eq i { width: 3px; height: 4px; background: var(--teal-lift); border-radius: 1px; }
.track.is-playing .eq { opacity: 1; }
.track.is-playing .eq i { animation: bounce .9s var(--ease) infinite; }
.track.is-playing .eq i:nth-child(2) { animation-duration: .7s; }
.track.is-playing .eq i:nth-child(3) { animation-duration: 1.1s; }
.track.is-playing .eq i:nth-child(4) { animation-duration: .8s; }
@keyframes bounce {
  0%, 100% { height: 4px; }
  50%      { height: 17px; }
}

.track-time {
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--paper-3);
  min-width: 42px;
  text-align: right;
}

.streaming {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
  color: var(--paper-2);
}
.streaming p { margin: 0; }

/* ─────────────────────────── Band ───────────────────────── */

.band-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}

.band-photo {
  position: sticky;
  top: calc(var(--header-h) + 40px);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.band-photo img {
  width: 100%;
  filter: grayscale(.45) contrast(1.06);
  transition: filter .5s var(--ease), transform .7s var(--ease);
}
.band-photo:hover img { filter: grayscale(0) contrast(1.06); transform: scale(1.02); }

.prose p {
  margin: 0 0 1.05em;
  color: var(--paper-2);
  font-size: clamp(16px, 1.45vw, 18px);
}
.prose p:first-child { color: var(--paper); font-size: clamp(18px, 1.8vw, 22px); }

.pull {
  margin: 34px 0 0;
  padding: 26px 0 0;
  border-top: 2px solid var(--gold);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(21px, 2.7vw, 34px);
  line-height: 1.2;
  text-transform: uppercase;
}

/* ─────────────────────────── Blog ───────────────────────── */

.posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}

.post {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--ink-2);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  transition: border-color .3s var(--ease), transform .3s var(--ease), background-color .3s var(--ease);
}
.post:hover { border-color: var(--paper-3); transform: translateY(-4px); background: var(--ink-3); }
.post:focus-within { border-color: var(--gold); }

/* The title link is the real control; it is stretched over the whole card. */
.post-link { color: inherit; text-decoration: none; }
.post-link::after { content: ""; position: absolute; inset: 0; }
.post-link:focus-visible { outline: none; }

.post-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ink-3); }
.post-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.3);
  transition: transform .7s var(--ease), filter .5s var(--ease);
}
.post:hover .post-media img { transform: scale(1.05); filter: grayscale(0); }

.post-flag {
  position: absolute;
  top: 12px; left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(14,13,12,.8);
  backdrop-filter: blur(6px);
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.post-flag svg { width: 11px; height: 11px; fill: currentColor; }

.post-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }

.post-date {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper-3);
}

.post-title {
  margin: 8px 0 10px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(21px, 2.2vw, 27px);
  line-height: 1.12;
  text-transform: uppercase;
}

.post-excerpt { margin: 0; color: var(--paper-2); font-size: 15.5px; }

.post-more {
  margin-top: auto;      /* keeps the link on a common baseline across cards */
  padding-top: 18px;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.post-more svg { width: 13px; height: 13px; fill: currentColor; transition: transform .25s var(--ease); }
.post:hover .post-more svg { transform: translateX(4px); }

/* ─────────────────────────── Live ───────────────────────── */

.gig {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
}
.gig:first-of-type { border-top: 1px solid var(--line); }
.gig-date {
  flex: none;
  min-width: 96px;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper-3);
}
.gig-date b { display: block; font-size: 34px; letter-spacing: 0; color: var(--paper); font-weight: 400; }
.gig-venue { flex: 1 1 220px; color: var(--paper-2); }
.gig-venue b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(19px, 2.2vw, 26px);
  text-transform: uppercase;
  color: var(--paper);
}

/* Date, venue and the odds and ends — time, who else is on the bill. */
.gig-meta {
  flex: 0 1 auto;
  margin-left: auto;
  font-size: 15px;
  color: var(--paper-2);
}
.gig-meta b { color: var(--paper); font-weight: 600; }
/* Venue and support band link out; same understated underline as elsewhere. */
.gig a { text-decoration-color: var(--paper-3); }
.gig a:hover { color: var(--gold); }

.gigs-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-top: clamp(22px, 3vw, 34px);
}
.gigs-note p { margin: 0; color: var(--paper-3); font-size: 15.5px; }

.gigs-empty {
  border: 1px dashed var(--line);
  border-radius: 3px;
  padding: clamp(30px, 5vw, 54px);
  text-align: center;
}
.gigs-empty p { margin: 0 0 6px; font-family: var(--display); font-size: clamp(20px, 2.6vw, 30px); text-transform: uppercase; }
.gigs-empty p.muted { font-family: var(--body); font-size: 16px; text-transform: none; margin-bottom: 22px; }

/* ─────────────────────────── Kontakt ────────────────────── */

.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(14px, 2vw, 22px);
}

.ccard {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 26px 24px 28px;
  border: 1px solid var(--line);
  border-radius: 3px;
  text-decoration: none;
  background: var(--ink-2);
  transition: border-color .3s var(--ease), transform .3s var(--ease), background-color .3s var(--ease);
}
.ccard:hover { border-color: var(--gold); transform: translateY(-4px); background: var(--ink-3); }
.ccard-label {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}
.ccard-value {
  font-family: var(--display);
  font-size: clamp(20px, 2.4vw, 28px);
  text-transform: uppercase;
  line-height: 1.15;
}
.ccard-note { color: var(--paper-3); font-size: 14.5px; }

/* ─────────────────────────── Footer ─────────────────────── */

.site-footer { border-top: 1px solid var(--line); padding-block: clamp(46px, 7vw, 76px); }
.footer-inner { display: grid; justify-items: center; gap: 18px; text-align: center; }
.footer-logo { width: 74px; opacity: .85; }
.footer-claim {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(19px, 2.6vw, 28px);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.footer-links a, .footer-links button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: 14px;
  color: var(--paper-3);
  text-decoration: none;
  transition: color .2s;
}
.footer-links a:hover, .footer-links button:hover { color: var(--gold); }
.footer-copy { margin: 0; font-size: 13px; color: var(--paper-3); }

/* ─────────────────────────── Modal ──────────────────────── */

.modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 0; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(6,5,5,.82); backdrop-filter: blur(6px); animation: fade .28s var(--ease) both; }

.modal-panel {
  position: relative;
  width: min(820px, 100%);
  max-height: 100svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--ink-2);
  border: 1px solid var(--line);
  animation: pop .34s var(--ease) both;
}
@media (min-width: 720px) { .modal-panel { max-height: 90svh; border-radius: 4px; } }

.modal-close {
  position: sticky;
  top: 12px;
  float: right;
  margin: 12px 12px -48px 0;
  z-index: 3;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(14,13,12,.78);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.modal-close svg { width: 16px; height: 16px; fill: currentColor; }
.modal-close:hover { background: var(--paper); color: var(--ink); }

.modal-body { padding: 0 0 clamp(30px, 5vw, 48px); }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop  { from { opacity: 0; transform: translateY(20px) scale(.985); } to { opacity: 1; transform: none; } }

/* post inside the modal */
.pm-hero { aspect-ratio: 16 / 9; background: var(--ink-3); }
.pm-hero img { width: 100%; height: 100%; object-fit: cover; }

.pm-wrap { padding-inline: clamp(20px, 4.4vw, 48px); }
.pm-head { padding-top: clamp(24px, 4vw, 38px); }
.pm-date {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}
.pm-title {
  margin: 10px 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 4.6vw, 48px);
  line-height: 1.02;
  text-transform: uppercase;
}
.pm-body { margin-top: 22px; }
.pm-body p { margin: 0 0 1.05em; color: var(--paper-2); }
.pm-body p:first-child { color: var(--paper); font-size: 18.5px; }

.pm-video { margin-top: 28px; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; background: #000; }
.pm-video video { width: 100%; height: auto; display: block; }

.pm-gallery {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.pm-gallery button {
  padding: 0;
  border: 0;
  background: var(--ink-3);
  aspect-ratio: 1;
  overflow: hidden;
  cursor: pointer;
  border-radius: 2px;
}
.pm-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease), opacity .3s; }
.pm-gallery button:hover img { transform: scale(1.07); opacity: .85; }

/* legal text inside the modal */
.legal { padding-top: clamp(30px, 5vw, 46px); }
.legal h2 {
  margin: 0 0 20px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 4.4vw, 42px);
  text-transform: uppercase;
}
.legal h3 {
  margin: 26px 0 8px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
}
.legal p, .legal li { color: var(--paper-2); font-size: 15.5px; }
.legal p { margin: 0 0 .9em; }
.legal ul { margin: 0 0 .9em; padding-left: 20px; }
.legal .todo {
  border: 1px dashed var(--gold);
  border-radius: 3px;
  padding: 14px 16px;
  color: var(--gold-lift);
  font-size: 14.5px;
}

/* ─────────────────────────── Lightbox ──────────────────── */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 140;
  background: rgba(6,5,5,.94);
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  animation: fade .24s var(--ease) both;
}
.lb-figure { margin: 0; max-width: 100%; max-height: 100%; display: grid; gap: 12px; justify-items: center; }
.lb-figure img { max-width: 100%; max-height: 82svh; object-fit: contain; border-radius: 3px; }
.lb-figure figcaption { color: var(--paper-3); font-size: 14px; text-align: center; }

.lb-close, .lb-nav {
  position: absolute;
  z-index: 2;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(14,13,12,.7);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.lb-close svg, .lb-nav svg { width: 20px; height: 20px; fill: currentColor; }
.lb-close:hover, .lb-nav:hover { background: var(--paper); color: var(--ink); }
.lb-close { top: 16px; right: 16px; }
.lb-nav { top: 50%; transform: translateY(-50%); }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }

body.is-locked { overflow: hidden; }

/* ─────────────────────────── Reveal ─────────────────────── */

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ─────────────────────────── Responsive ─────────────────── */

@media (max-width: 900px) {
  .band-grid { grid-template-columns: 1fr; }
  .band-photo { position: static; max-width: 460px; }
}

@media (max-width: 760px) {
  .burger { display: block; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    margin: 0;
    flex-direction: column;
    gap: 0;
    padding: 10px var(--gutter) 26px;
    background: rgba(14,13,12,.97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
  }
  .nav.is-open { opacity: 1; transform: none; visibility: visible; }
  .nav a { font-size: 26px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
  .nav a::after { display: none; }

  /* The nav is out of flow here, so its auto margin no longer pushes
     the controls over. */
  .header-tools { margin-left: auto; }
  .icon-btn { display: none; }


  .hero-logo { width: clamp(104px, 30vw, 132px); }

  .track { grid-template-columns: auto 1fr auto; gap: 14px; padding: 16px 2px; }
  .track-num, .eq { display: none; }
  .track-play { width: 46px; height: 46px; }

  .lb-nav { width: 40px; height: 40px; }
  .lb-prev { left: 6px; }
  .lb-next { right: 6px; }
}

/* Two regimes for the hero picture. Wide windows get the full-bleed crop
   above; a phone or a portrait tablet gets the band. The same query sits on
   the <source> in index.html, so the rules and the file always agree on
   which of the two photos is on screen. */
@media (max-width: 760px), (max-aspect-ratio: 5/4) {
  /* A square group photo cropped to fill a tall phone screen shows one man and
     two pairs of shoulders. So it stops filling: the picture keeps its own
     shape as a band across the top, all three faces intact, and fades out at
     the bottom into the page — which is the same black it was shot on. The
     copy then sits underneath it on plain background.

     The band's height is also the hero's top padding, so the copy can never
     ride up into the faces; on a short phone the hero grows instead. */
  .hero {
    align-items: flex-end;
    padding-top: calc(min(80vw, 46svh) + 26px);
    padding-bottom: clamp(48px, 8vh, 96px);
  }
  .hero-media { inset: 0 0 auto; height: min(80vw, 46svh); }
  .hero-media img {
    object-position: 50% 58%;
    transform: none;
    filter: grayscale(1) contrast(1.1) brightness(.92);
    -webkit-mask-image: linear-gradient(to bottom, #000 74%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to bottom, #000 74%, rgba(0,0,0,0) 100%);
  }
  .hero-media::after {
    background:
      linear-gradient(to bottom, rgba(14,13,12,.82) 0%, rgba(14,13,12,.20) 30%, rgba(14,13,12,0) 52%),
      linear-gradient(to top, var(--ink) 0%, rgba(14,13,12,.34) 30%, rgba(14,13,12,0) 58%);
  }
  .hero-scroll { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .ticker-track { animation: none; }
}