/* Audiorage — site styles */

/* ---------- Fonts ---------- */

@font-face {
  font-family: "RightHereRightNow";
  src: url("../fonts/right-here-right-now.woff2") format("woff2");
  font-display: swap;
}

/* Google fonts (SIL OFL, via Fontsource). Each family is split into latin and
   latin-ext; browsers only download the half a page actually needs. */
@font-face {
  font-family: "Anton";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/anton-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Anton";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/anton-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow Condensed";
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed";
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-condensed-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow Condensed";
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed";
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-condensed-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Mono";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/space-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/space-mono-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */

:root {
  --bg: #0a0908;
  --bg-raised: #100e0c;
  --bg-hover: #110f0d;
  --line: #241f1c;
  --line-strong: #3a332e;
  --line-button: #6b6259;
  --text: #e9e4dd;
  --text-body: #cfc8c0;
  --text-soft: #b9b1a8;
  --text-muted: #8e857c;
  --text-faint: #6b6259;
  --accent: #ff3b1f;
  --white: #ffffff;

  --font-display: "RightHereRightNow", "Anton", Impact, sans-serif;
  --font-heading: "Anton", Impact, sans-serif;
  --font-condensed: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;

  /* "Duotone" treatment from the design, applied to the band photos */
  --photo-filter: grayscale(0.75) contrast(1.18) brightness(0.82) sepia(0.25) hue-rotate(-18deg) saturate(1.35);

  /* Text sitting directly on the hero photo, over content we don't
     control the detail of (guitar strings, fretboards, gravel). A single
     soft blur isn't enough there — it gets visually broken up by fine,
     high-contrast detail. Stacking several 0-offset halos of increasing
     radius hugs every glyph edge on all sides like a soft outline, which
     holds up far better; the last layer adds a bit of grounding depth. */
  --photo-text-shadow: 0 0 2px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.85), 0 0 16px rgba(0, 0, 0, 0.7), 0 2px 4px rgba(0, 0, 0, 0.9);

  --page-width: 1240px;
  --gutter: 24px;
  --header-height: 60px;
}

/* ---------- Base ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Scroll reveals (motion.js) slide some columns in from the side. clip,
   unlike the body's hidden, also stops the page from being scrolled
   sideways by script or focus while they're mid-slide. On main rather than
   body so the sticky header (outside main) is unaffected. */
main {
  overflow-x: clip;
}

img {
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

a {
  color: var(--text);
  text-decoration: none;
}

a:hover {
  color: var(--accent);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

h1,
h2,
h3,
p {
  margin: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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

.text-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.accent {
  color: var(--accent);
}

/* ---------- Buttons ---------- */

.button {
  display: inline-block;
  padding: 15px 30px;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.button--solid {
  background: var(--accent);
  color: var(--bg);
}

.button--solid:hover {
  background: var(--text);
  color: var(--bg);
}

.button--outline {
  border: 1px solid var(--line-button);
  color: var(--text);
  background: rgba(10, 9, 8, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.button--outline:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.button--small {
  padding: 14px 26px;
  font-size: 17px;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding: 14px var(--gutter);
  background: rgba(10, 9, 8, 0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.wordmark {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-family: var(--font-condensed);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-nav a {
  color: var(--text-soft);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.site-nav a:hover {
  color: var(--white);
  border-bottom-color: var(--white);
}

.site-nav .nav-book {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* ---------- Hero ---------- */

/* ---------------------------------------------------------------------
   Hero layout knobs — the values worth playing with, and how they
   actually interact (one of them is not what it looks like):

   .hero { min-height }
     THE dominant control. This is the overall height of the whole photo
     section. .hero__top (the title) sits at the top; .hero__bottom (the
     tagline/buttons) is glued to the very bottom via `margin-top: auto`
     below. Whatever height is left over in between becomes the gap
     between them — so min-height is what you're really adjusting when
     the gap between the title and the tagline block feels too big or
     too small. Try 80vh or 70vh to see the effect; smaller = tighter.

   .hero__top { padding-top }
     Gap between the sticky header and the top of the "AUDIORAGE" title.
     Scales with width (capped at wide screens) so the title stays clear
     of the band's heads; change both numbers together.

   .hero__top { padding-bottom }
     Looks like it should control the gap below the title, but doesn't
     do much — see min-height above. Because the leftover space between
     the two blocks is mostly what min-height leaves over (often several
     hundred pixels), a change here just shifts a small amount between
     "padding baked into the title block" and "space absorbed by the
     auto-margin below" — the title's on-screen position barely moves.

   .hero__bottom { padding-bottom }
     Gap between the tagline/buttons block and the very bottom edge of
     the hero section (where the marquee strip starts).
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  /* dvh accounts for a mobile browser's collapsing/expanding address bar;
     vh doesn't, and visibly resizes the section while scrolling on
     phones/tablets wide enough to still use this overlay layout (below
     the 640px breakpoint, the mobile override further down drops vh
     entirely). The vh line is a fallback for browsers without dvh
     support; a browser that understands dvh uses that line instead. */
  /* The hero photo's height / width. site.js overwrites this with the real
     photo's shape once it loads, so any hero.jpg works without CSS edits;
     this default only matters until then (set it to the current photo's
     shape to avoid a small resize on load). */
  --hero-ratio: 0.665;
  /* Never shorter than this fraction of the width, however short the
     window: below it the tagline block climbs over the band's faces, so a
     very wide, short window scrolls instead. */
  --hero-min-ratio: 0.51;
  /* Never taller than the full-width photo, so the photo can
     always span the whole width without cropping band members at the sides.
     Content can still push it taller; the photo then fades into the
     background below it (see .hero__photo). */
  min-height: clamp(calc(100vw * var(--hero-min-ratio)), 92vh, calc(100vw * var(--hero-ratio)));
  min-height: clamp(calc(100vw * var(--hero-min-ratio)), 92dvh, calc(100vw * var(--hero-ratio)));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

/* Always the full width of the hero at the photo's own aspect ratio: never
   object-fit: cover, which crops the sides whenever the hero is narrower
   than the photo's shape. Always pinned to the top: when the photo is
   taller than the hero, only its bottom is trimmed, so the band's heads
   keep the same spacing below the title at any window height (the title
   and photo both scale with width only). When it's shorter, it fades out
   at its bottom edge. */
.hero__photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  /* A touch darker than the shared duotone, to match the design preview */
  filter: var(--photo-filter) brightness(0.9);
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero::before {
  background: linear-gradient(180deg, rgba(10, 9, 8, 0.78) 0%, rgba(10, 9, 8, 0.55) 22%, rgba(10, 9, 8, 0.4) 42%, rgba(10, 9, 8, 0.78) 64%, rgba(10, 9, 8, 0.95) 88%, rgba(10, 9, 8, 0.99) 100%);
}

.hero::after {
  background: radial-gradient(120% 70% at 18% 100%, rgba(255, 59, 31, 0.2), transparent 60%);
}

.hero__top,
.hero__bottom {
  position: relative;
  z-index: 1;
}

.hero__top {
  /* Scales with width like the title and photo do, so the title keeps the
     same spacing above the band's heads at every desktop width (a fixed
     gap pushes it down into them on narrower windows). */
  padding-top: min(48px, 3.6vw);
  padding-bottom: 72px;
}

.hero__bottom {
  margin-top: auto;
  padding-bottom: 60px;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(56px, 12.5vw, 172px);
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: var(--photo-text-shadow);
  /* Flicker is driven by assets/js/motion.js (data-flicker) */
}

.hero__tagline {
  max-width: 620px;
  font-family: var(--font-condensed);
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-shadow: var(--photo-text-shadow);
}

.hero__lede {
  max-width: 560px;
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  text-shadow: var(--photo-text-shadow);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

/* ---------- Marquee ---------- */

.marquee {
  overflow: hidden;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 34s linear infinite;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.marquee__track > span {
  white-space: nowrap;
}

.marquee__star {
  color: var(--accent);
}

.marquee__tag {
  color: var(--text);
}

/* ---------- Sections ---------- */

.section {
  padding-top: 84px;
  padding-bottom: 24px;
}

.section--shows {
  padding-top: 96px;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--accent);
}

.section-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1;
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.section-note {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* ---------- Shows ---------- */

.show-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.show {
  display: grid;
  grid-template-columns: minmax(0, 130px) minmax(0, 1fr) minmax(0, 0.8fr);
  gap: 20px;
  align-items: center;
  padding: 28px 4px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}

a.show:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.show__date {
  font-family: var(--font-heading);
  line-height: 1.05;
  text-transform: uppercase;
}

.show__month {
  font-size: 15px;
  letter-spacing: 0.2em;
  color: var(--accent);
}

.show__day {
  font-size: 52px;
}

.show__weekday {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--text-muted);
}

.show__venue {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.05;
  text-transform: uppercase;
}

.show__city {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--text-soft);
}

.show__time {
  justify-self: start;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.1em;
}

.status-message {
  padding: 28px 4px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--text-soft);
}

/* ---------- Videos ---------- */

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 20px;
  margin-top: 28px;
}

.video {
  max-width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--line);
}

.video__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.video__play,
.video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video__play {
  position: relative;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.video__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.25) brightness(0.9);
  transition: filter 0.2s;
}

/* Full fidelity on hover (rare: most visitors are on touchscreens) */
.video__play:hover .video__thumb {
  filter: none;
}

.video__icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video__icon::before {
  content: "▶";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  padding-left: 5px;
  border-radius: 50%;
  background: rgba(255, 59, 31, 0.92);
  color: var(--bg);
  font-size: 26px;
}

.video__caption {
  margin: 0;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--text-soft);
}

/* ---------- About ---------- */

.about {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 44px;
  align-items: center;
}

.about__figure {
  position: relative;
  margin: 0;
  background: var(--bg-raised);
}

.about__photo {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  filter: var(--photo-filter);
}

.about__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 59, 31, 0.14), rgba(10, 9, 8, 0.25));
  pointer-events: none;
}

.about__title {
  margin-bottom: 20px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 0.95;
  text-transform: uppercase;
}

.body-copy {
  max-width: 56ch;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-body);
}

.body-copy + .body-copy {
  margin-top: 16px;
}

.about__email {
  display: inline-block;
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* ---------- Book ---------- */

.book {
  margin-top: 84px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
}

.book__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 40px;
  align-items: center;
  padding-top: 80px;
  padding-bottom: 80px;
}

.book__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(48px, 8vw, 110px);
  line-height: 0.86;
  text-transform: uppercase;
}

.book__contacts {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-link {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
  transition: border-color 0.15s, color 0.15s;
}

.contact-link:hover {
  border-color: var(--accent);
}

.contact-link::after {
  content: "→";
  color: var(--accent);
}

/* ---------- Merch ----------
   Same typographic treatment as .about__title/.body-copy — one statement
   heading, one line of copy, a button — no card chrome, since a single
   surviving item doesn't read as a "grid" of anything. */

/* Last section before the footer — .section's own 24px bottom padding
   (fine between two sections) reads as cramped right above the footer. */
#merch {
  padding-bottom: 84px;
}

.merch__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 40px;
  align-items: center;
}

.merch__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 0.95;
  text-transform: uppercase;
}

.merch__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.merch__content .button {
  align-self: flex-start;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 44px;
  padding-bottom: 44px;
}

.site-footer .wordmark {
  font-size: 32px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  font-family: var(--font-condensed);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.footer-place {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--text-faint);
}

/* ---------- Small screens ---------- */

@media (max-width: 640px) {
  :root {
    --gutter: 18px;
    --header-height: 96px;
  }

  .site-nav {
    gap: 6px 16px;
    font-size: 15px;
    letter-spacing: 0.1em;
  }

  /* Mobile hero: a wide 6-person group photo and viewport-height units
     both behave badly on a narrow, tall phone screen. object-fit: cover
     (used above this breakpoint) crops the sides to fill the box, which
     here means cropping out band members entirely; and min-height in vh
     visibly resizes the section as the browser's address bar
     collapses/expands while scrolling, reading as a "jerky zoom".
     Below this width, the photo instead becomes a normal, full-width,
     un-cropped image sized by its own aspect ratio (no vh at all). The
     title stays overlaid on the photo (it already reads fine there with
     its shadow) but the tagline/lede/buttons move to a plain block
     underneath — they're smaller and were the pieces actually struggling
     for contrast against busy detail like the guitars. */
  .hero {
    min-height: 0;
  }

  .hero__photo {
    position: static;
    width: 100%;
    height: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* Scoped to the photo's own box (aspect-ratio, not inset: 0) rather
     than the whole section, now that .hero__bottom lives below it in
     plain flow instead of overlaid — inset: 0 here would stretch the
     same gradient down over that solid-background block too. */
  .hero::before {
    bottom: auto;
    width: 100%;
    aspect-ratio: 1 / var(--hero-ratio);
  }

  .hero::after {
    display: none;
  }

  .hero__top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 14px;
    padding-bottom: 0;
  }

  .hero__bottom {
    margin-top: 0;
    padding-top: 24px;
    padding-bottom: 32px;
  }

  .hero__tagline,
  .hero__lede {
    text-shadow: none;
  }

  .button {
    padding: 13px 22px;
    font-size: 16px;
  }

  /* Date on the left; venue, city and time stacked on the right */
  .show {
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-areas:
      "date venue"
      "date time";
    gap: 6px 16px;
    padding: 22px 2px;
  }

  .show__date {
    grid-area: date;
    align-self: start;
  }

  .show__day {
    font-size: 40px;
  }

  .show__info {
    grid-area: venue;
  }

  .show__time {
    grid-area: time;
    font-size: 13px;
    color: var(--text-soft);
  }

  .contact-link {
    padding: 16px 18px;
    font-size: 14px;
  }
}

/* ---------- Motion ---------- */

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .marquee__track {
    animation: none;
  }

  .marquee__track {
    flex-wrap: wrap;
    width: auto;
    padding-inline: var(--gutter);
  }

  .marquee__track > span + span {
    display: none;
  }

  .marquee__track > span {
    white-space: normal;
  }
}