/* Classic Vinyl 931 — practice rebuild
   Clean, light theme to match the live Google Sites look:
   Oswald headings, Open Sans body, white background, #5F6368 text.
   Fonts are loaded by a <link> tag in each page's <head>. */

:root {
  /* Palette */
  --bg: #ffffff;            /* page background */
  --surface: #f8f9fa;       /* cards, soft panels */
  --surface-alt: #f1f3f4;   /* footer, nav hover, dividers */
  --border: #dadce0;        /* light gray lines */
  --text: #5f6368;          /* body text (live site gray) */
  --heading: #202124;       /* headings, strong text */
  --accent: #8c2f39;        /* muted classic burgundy (from the logo red) */
  --accent-dark: #6f2430;   /* accent hover */
  --accent-soft: rgba(140, 47, 57, 0.08);
  --band: #3c4043;          /* dark hero band (soft charcoal, not black) */
  --band-dark: #2d3033;
  --on-band: #ffffff;       /* white text on the dark band */
  --on-band-muted: #e8eaed;
  --cream: #f2e8d5;         /* logo lettering color, used sparingly on the band */
  --focus: #1a73e8;
  --radius: 8px;
  --max: 1120px;
  --shadow: 0 1px 2px rgba(60, 64, 67, 0.15), 0 1px 3px 1px rgba(60, 64, 67, 0.08);
  --shadow-lift: 0 2px 6px rgba(60, 64, 67, 0.15), 0 4px 12px rgba(60, 64, 67, 0.12);
  --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Oswald", "Arial Narrow", Arial, sans-serif;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.site-header,
main,
.site-footer {
  position: relative;
  z-index: 1;
}

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

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

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

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: 0.75rem 1rem;
  z-index: 10000;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* —— Header / Nav —— */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.08);
}

.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.4rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--heading);
  text-decoration: none;
  font-weight: 700;
  min-width: 0;
}

.brand:hover {
  color: var(--heading);
}

/* Band name beside the header record. Shown in full at every width; on phones it
   is a little smaller and wraps onto extra lines instead of being cut off. */
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}

/* Keep the record and Menu button full size; the text wraps to fit between them. */
.brand .logo-lockup--header,
.nav-toggle {
  flex-shrink: 0;
}

.brand-text span {
  overflow-wrap: break-word;
  text-wrap: balance;
}

.brand-text span:first-child {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--heading);
}

.brand-text span:last-child {
  font-size: 0.7rem;
  color: var(--text);
  font-weight: 400;
}

@media (min-width: 900px) {
  .brand-text span:first-child {
    font-size: 1.05rem;
    letter-spacing: 0.06em;
  }

  .brand-text span:last-child {
    font-size: 0.75rem;
  }
}

.nav-toggle {
  display: none;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--heading);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.nav-toggle[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.25rem;
}

.site-nav a {
  display: block;
  padding: 0.55rem 1rem;
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.98rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.site-nav a:hover {
  color: var(--heading);
  background: var(--surface-alt);
}

.site-nav a[aria-current="page"] {
  color: var(--heading);
  border-bottom-color: var(--accent);
}

@media (max-width: 700px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
  }

  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: 0.5rem 1.25rem 1rem;
    box-shadow: 0 6px 12px rgba(60, 64, 67, 0.12);
  }

  .site-nav.is-open {
    display: block;
  }

  .site-nav ul {
    flex-direction: column;
  }

  .site-nav a {
    padding: 0.85rem 1rem;
  }
}

/* —— Layout —— */
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem;
}

main {
  padding-bottom: 3.5rem;
}

.section {
  padding: 3.25rem 0;
  position: relative;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin: 0 0 0.5rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--heading);
  line-height: 1.15;
}

.section-lead {
  color: var(--text);
  margin: 0 0 1.75rem;
  max-width: 40rem;
  font-size: 1.05rem;
}

/* Simple section divider: thin line with a small label */
.ticket-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 auto 2rem;
  max-width: var(--max);
  padding: 0 1.25rem;
}

.ticket-divider::before,
.ticket-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.ticket-divider span {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}

/* Breathing room when a divider follows the hero band */
.hero + .ticket-divider {
  margin-top: 2.5rem;
}

/* —— Buttons —— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.8rem 1.5rem;
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.btn-primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(1px);
}

.btn-secondary {
  background: #fff;
  color: var(--accent);
  border-color: var(--accent);
}

.btn-secondary:hover {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

/* Secondary button sitting on the dark hero band */
.hero .btn-secondary {
  background: transparent;
  color: var(--on-band);
  border-color: rgba(255, 255, 255, 0.85);
}

.hero .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--on-band);
  border-color: #fff;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* —— Hero (dark charcoal band, white text — like a Google Sites header) —— */
.hero {
  padding: 3rem 0 3.5rem;
  position: relative;
  overflow: hidden;
  color: var(--on-band-muted);
  background: linear-gradient(180deg, var(--band) 0%, var(--band-dark) 100%);
}

.hero-grid {
  display: grid;
  gap: 2.25rem;
  align-items: center;
  position: relative;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.75rem;
}

.hero .eyebrow {
  color: var(--cream);
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.1rem, 5.5vw, 3.4rem);
  line-height: 1.1;
  margin: 0 0 1rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--on-band);
}

.hero-tagline {
  font-size: 1.12rem;
  color: var(--on-band-muted);
  margin: 0 0 1.85rem;
  max-width: 34rem;
}

.hero-visual {
  display: flex;
  justify-content: center;
  position: relative;
}

.hero-logo-wrap {
  position: relative;
  width: 100%;
  padding: 0;
}

/* Soft halo behind the logo (gentle breathing animation) */
.hero-logo-wrap::before {
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 65%);
  animation: pulse-glow 3.5s ease-in-out infinite;
  z-index: 0;
}

/* —— Hero background video (assets/video/smooth.mp4) ——
   Stacking inside the hero: video (0) < dark overlay (1) < content (2).
   The overlay keeps at least ~66% dark coverage everywhere, so the white
   headline and light tagline stay above 4.5:1 contrast even over the
   brightest parts of the video. With reduced motion the video is hidden
   and a still frame (smooth-poster.jpg) shows under the same overlay. */
.hero {
  isolation: isolate;
  /* Taller hero so more of the background video shows; content stays centered */
  display: grid;
  align-content: center;
  min-height: clamp(560px, 82vh, 900px);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Favor the upper part of the frame, where the band's faces are */
  object-position: 50% 22%;
  z-index: 0;
  pointer-events: none;
}

.hero-video-overlay {
  --hero-shade: linear-gradient(180deg, rgba(16, 12, 14, 0.68) 0%, rgba(40, 14, 22, 0.7) 100%);
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--hero-shade);
}

.hero > .container {
  position: relative;
  z-index: 2;
}

.hero h1,
.hero .eyebrow,
.hero-tagline {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* Desktop: text on the left gets the darkest shade; a burgundy tint on
   the turntable side */
@media (min-width: 800px) {
  .hero-video-overlay {
    --hero-shade: linear-gradient(90deg, rgba(16, 12, 14, 0.76) 0%, rgba(16, 12, 14, 0.68) 55%, rgba(60, 18, 26, 0.66) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video {
    display: none;
  }

  .hero-video-overlay {
    background: var(--hero-shade), url("assets/video/smooth-poster.jpg") 50% 22% / cover no-repeat;
  }
}
/* Spinning vinyl motif behind / beside logo */
.vinyl-spin {
  position: absolute;
  width: min(160px, 38vw);
  height: min(160px, 38vw);
  border-radius: 50%;
  z-index: 0;
  opacity: 0.35;
  background:
    radial-gradient(circle at center, #1b1b1b 0 10%, var(--accent) 10% 22%, #222 22% 24%, #1b1b1b 24% 100%);
  box-shadow: inset 0 0 0 18px rgba(40, 40, 40, 0.9);
  animation: spin-vinyl 14s linear infinite;
}

.vinyl-spin::after {
  content: "";
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.vinyl-spin--bl {
  left: -12%;
  bottom: -8%;
}

.vinyl-spin--tr {
  right: -10%;
  top: -12%;
  width: min(110px, 28vw);
  height: min(110px, 28vw);
  animation-duration: 18s;
  animation-direction: reverse;
  opacity: 0.25;
}

@keyframes spin-vinyl {
  to { transform: rotate(360deg); }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

/* —— Cards —— */
.card-grid {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .card-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.35rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: var(--shadow);
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.card h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--heading);
}

.card p {
  margin: 0;
  color: var(--text);
  font-size: 0.98rem;
}

.card .icon {
  font-size: 1.65rem;
  margin-bottom: 0.55rem;
}

/* —— Song list "teleprompter" (What we play) ——
   Without JavaScript (or with reduced motion): a plain scrollable list.
   With JavaScript (.is-running): the list steps upward one song at a time;
   the song in the highlight row glows for a moment, then the next one moves up. */
.songroll {
  --row: 2.6rem;      /* height of one song row */
  --rows: 7;          /* rows visible in the window */
  --hl-row: 2;        /* highlight row (0 = top): 3rd row, about 1/3 down */
  margin-top: 2.5rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem 1.35rem 1.25rem;
  position: relative;
}

@media (max-width: 600px) {
  .songroll {
    --rows: 5.5;
    --hl-row: 1;      /* 2nd row on phones */
  }
}

.songroll-title {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--heading);
}

.songroll-intro {
  margin: 0 0 1rem;
  color: var(--text);
}

.songroll-window {
  position: relative;
  height: calc(var(--row) * var(--rows));
  overflow-y: auto;           /* no-JS / reduced motion: scroll by hand */
  border-radius: 6px;
  background: var(--surface);
}

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

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

.songroll-list li {
  height: var(--row);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--heading);
}

/* Running (animated) state */
.songroll.is-running .songroll-window {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 78%, transparent 100%);
}

/* Subtle marker band at the highlight row */
.songroll.is-running .songroll-window::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--row) * var(--hl-row));
  height: var(--row);
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-right: 3px solid var(--accent);
  pointer-events: none;
}

.songroll.is-running .songroll-track {
  transition: transform 0.6s ease;
  will-change: transform;
}

.songroll.is-running .songroll-track.no-anim,
.songroll.is-running .songroll-track.no-anim li {
  transition: none;
}

.songroll.is-running .songroll-list li {
  display: block;
  line-height: var(--row);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  transition: color 0.4s ease, transform 0.4s ease, text-shadow 0.4s ease;
}

/* The highlighted song: burgundy, a bit larger/bolder, soft glow */
.songroll.is-running .songroll-list li.is-current {
  color: var(--accent);
  font-weight: 600;
  transform: scale(1.1);
  text-shadow: 0 0 14px rgba(140, 47, 57, 0.35);
}

.songroll-toggle {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
}

.songroll-toggle:hover {
  border-color: var(--accent);
}

.songroll-toggle[hidden] {
  display: none;
}

/* Space between the set list and the What we play cards below it */
.songroll + .card-grid {
  margin-top: 2.5rem;
}

/* —— Social —— */
.social-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.social-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--heading);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s, color 0.15s;
}

.social-list a:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

/* —— Media —— */
.page-banner {
  padding: 2.5rem 0 0.5rem;
  position: relative;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
}

.page-banner .section-title {
  font-size: clamp(2.2rem, 6vw, 3.25rem);
}

.media-grid {
  display: grid;
  gap: 1.35rem;
}

@media (min-width: 640px) {
  .media-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.media-card {
  margin: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow);
  transition: transform 0.2s, box-shadow 0.2s;
}

.media-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.media-card figcaption {
  padding: 0.9rem 1rem;
  font-size: 0.92rem;
  color: var(--heading);
  border-top: 1px solid var(--border);
  font-family: var(--font-display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: #fff;
}

.video-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}

.video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  cursor: pointer;
  background: #202124 center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 0;
}

.video-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

.video-facade:hover .play-btn,
.video-facade:focus-visible .play-btn {
  transform: scale(1.08);
  background: var(--accent-dark);
}

.play-btn {
  position: relative;
  z-index: 1;
  width: 72px;
  height: 50px;
  border-radius: 12px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, background 0.15s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.play-btn svg {
  margin-left: 3px;
}

/* —— Contact —— */
/* Contact info: a single centered column */
.contact-layout {
  display: grid;
  gap: 2rem;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.contact-layout .contact-method {
  border-left-width: 1px;
  border-top: 4px solid var(--accent);
}

.contact-layout .social-list {
  justify-content: center;
}

.contact-methods {
  display: grid;
  gap: 1rem;
}

.contact-method {
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.25rem;
  color: var(--text);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.15s, transform 0.15s;
  box-shadow: var(--shadow);
}

.contact-method:hover {
  color: var(--text);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}

.contact-method strong {
  display: block;
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.contact-method span {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--heading);
  word-break: break-word;
}

.service-area {
  margin-top: 1.5rem;
  color: var(--text);
  font-size: 0.95rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.service-area strong {
  color: var(--heading);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.9rem;
}

/* —— Footer —— */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface-alt);
  padding: 2.25rem 0;
  margin-top: auto;
  position: relative;
}

.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-brand {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
  color: var(--heading);
}

.footer-logo {
  height: 48px;
  width: auto;
  margin-bottom: 0.75rem;
  border-radius: 4px;
}

.footer-meta,
.footer-meta a {
  color: var(--text);
  font-size: 0.92rem;
  text-decoration: none;
}

.footer-meta a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.footer-meta p {
  margin: 0.25rem 0;
}

.footer-copy {
  width: 100%;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  color: var(--text);
  font-size: 0.82rem;
}

/* —— Spinning record logo —— */
.logo-lockup {
  position: relative;
  display: block;
  line-height: 0;
  isolation: isolate;
  aspect-ratio: 1 / 1;
  flex: none;
}

/* The record: one unit (disc image + red label + label text) that spins
   in place around its own center. It just fills its box (no offsets, no
   transform positioning), so the spin can never move it off its spot. */
.logo-lockup .logo-disc {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  transform-origin: 50% 50%;
  animation: disc-spin 12s linear infinite;
  container-type: inline-size;
  pointer-events: none;
}

.logo-disc .logo-disc-img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Burgundy center label carrying the original logo lettering
   (assets/label-lettering.png, cut out of logo-original.png), spinning with the record */
.logo-disc-label {
  position: absolute;
  inset: 28%; /* label = 44% of the record's width */
  border-radius: 50%;
  background: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(242, 232, 213, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-disc-lettering {
  display: block;
  width: 84%; /* fits the 2:1 lettering inside the round label */
  height: auto;
}

/* Spindle hole */
.logo-disc-label::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2cqw;
  height: 2cqw;
  z-index: 1;
  border-radius: 50%;
  background: #111;
  transform: translate(-50%, -50%);
}

@keyframes disc-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Home page record. On the homepage it sits on the turntable; its final
   size and position come from .turntable .logo-lockup--hero below. */
.logo-lockup--hero {
  width: clamp(200px, 80vw, 440px);
  max-width: 100%;
  margin: 0 auto;
  z-index: 1;
  border-radius: 50%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Header: record in the brand spot. ~72px on phones up to 116px on desktop. */
.logo-lockup--header {
  width: clamp(72px, 4.5vw + 55px, 116px);
}

.logo-lockup--header .logo-disc {
  animation-duration: 16s;
}

/* Equalizer bars (shown in the turntable's "Now playing" meter) */
.eq-bars {
  position: absolute;
  left: 50%;
  bottom: -0.35rem;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 28px;
  pointer-events: none;
}

.eq-bars span {
  display: block;
  width: 5px;
  height: 40%;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--cream), #c9848b);
  animation: eq-bounce 0.85s ease-in-out infinite;
}

.eq-bars span:nth-child(1) { animation-delay: 0.05s; height: 35%; }
.eq-bars span:nth-child(2) { animation-delay: 0.15s; height: 70%; }
.eq-bars span:nth-child(3) { animation-delay: 0.28s; height: 50%; }
.eq-bars span:nth-child(4) { animation-delay: 0.08s; height: 90%; }
.eq-bars span:nth-child(5) { animation-delay: 0.22s; height: 45%; }
.eq-bars span:nth-child(6) { animation-delay: 0.12s; height: 75%; }
.eq-bars span:nth-child(7) { animation-delay: 0.3s; height: 40%; }

@keyframes eq-bounce {
  0%, 100% { transform: scaleY(0.45); }
  50% { transform: scaleY(1); }
}

/* Pulsing Call Now / primary buttons: a soft burgundy ring that grows and fades */
.btn-primary {
  animation: cta-pulse 2.4s ease-in-out infinite;
}

@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(140, 47, 57, 0.45), 0 2px 6px rgba(60, 64, 67, 0.2); }
  50% { box-shadow: 0 0 0 9px rgba(140, 47, 57, 0), 0 4px 12px rgba(60, 64, 67, 0.25); }
}

/* On the dark hero band, pulse with a light ring so it stays visible */
.hero .btn-primary {
  animation-name: cta-pulse-light;
}

@keyframes cta-pulse-light {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25); }
  50% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0), 0 4px 12px rgba(0, 0, 0, 0.3); }
}

/* —— Home hero turntable: the spinning record sits on a boxed record
   player (walnut plinth, satin deck, platter, tonearm). Only the record
   (.logo-disc) spins; plinth, platter and tonearm stay still.
   Geometry is drawn on a 600 x 480 grid (the SVG viewBox), so every
   position below is a percentage of that box.
   Easy knobs: --tt-wood-* (plinth color), .turntable max-width (size),
   and the tonearm angle in index.html: rotate(28.7) on .tt-arm. —— */
.turntable {
  --tt-wood-1: #5a3522;
  --tt-wood-2: #7a4a2e;
  --tt-wood-3: #835233;
  --tt-deck: #26282c;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  aspect-ratio: 5 / 4;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.2)),
    repeating-linear-gradient(93deg, rgba(0, 0, 0, 0.07) 0 2px, transparent 2px 7px, rgba(255, 255, 255, 0.04) 7px 9px, transparent 9px 15px),
    linear-gradient(90deg, var(--tt-wood-1), var(--tt-wood-2) 30%, #6a3f27 55%, var(--tt-wood-3) 80%, var(--tt-wood-1));
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.45),
    0 2px 4px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3);
  container-type: inline-size; /* lets the meter size itself in cqw */
}

/* Dark satin top plate inside the wood frame */
.turntable-deck {
  position: absolute;
  left: 2.667%;
  right: 2.667%;
  top: 3.333%;
  bottom: 3.333%;
  border-radius: 12px;
  background: linear-gradient(160deg, #3a3d42 0%, var(--tt-deck) 55%, #1b1d20 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Platter: brushed rim with strobe dots peeking out around the record */
.turntable-platter {
  position: absolute;
  left: 4%;
  top: 5%;
  width: 72%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: repeating-conic-gradient(#d9dce0 0deg 1.5deg, #9aa0a6 1.5deg 3deg);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.55),
    inset 0 0 0 2px rgba(255, 255, 255, 0.35),
    inset 0 0 0 4px rgba(0, 0, 0, 0.3);
}

/* The record on the platter (69% of the turntable width) */
.turntable .logo-lockup--hero {
  position: absolute;
  left: 5.5%;
  top: 6.875%;
  width: 69%;
  max-width: none;
  margin: 0;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}

/* Tonearm, pivot, arm rest and buttons: one still SVG over the deck */
.turntable-hardware {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.45));
}

.turntable-hardware .tt-led {
  filter: drop-shadow(0 0 3px rgba(224, 96, 108, 0.9));
}

/* "Now playing" meter: a small inset display on the deck, just left of the
   pitch slider and above the START/33/45 buttons, holding the EQ bars.
   Placed on the same 600 x 480 grid: x 462-554, y 300-392. Sizes use cqw
   (1cqw = 1% of the turntable width) so it scales with the turntable. */
.tt-meter {
  position: absolute;
  left: 77%;
  top: 62.5%;
  width: 15.333%;
  height: 19.167%;
  z-index: 2;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8cqw;
  padding: 1.2cqw 1.1cqw 1.3cqw;
  border-radius: 1.4cqw;
  background: linear-gradient(180deg, #0e0f11, #17191c);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.75),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.08);
}

.tt-meter-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: max(2.3cqw, 7.5px);
  line-height: 1.05;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: #f0b9bf;
  text-shadow: 0 0 0.6cqw rgba(224, 96, 108, 0.7);
}

.tt-meter-label span {
  display: block;
}

.tt-meter .eq-bars {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  z-index: auto;
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  justify-content: center;
  gap: 5%;
}

.tt-meter .eq-bars span {
  width: 9%;
  border-radius: 1px;
  background: linear-gradient(180deg, #f6c4c9, #d0586a 45%, #8c2f39);
  box-shadow: 0 0 0.6cqw rgba(224, 96, 108, 0.6);
}

/* —— Home hero, desktop (800px+): text on the left, turntable on the right.
   The text block is split into grid rows; the turntable starts level with
   the top of the big headline and fills the right column. An extra
   flexible last row soaks up any height the turntable needs beyond the
   text, so the headline/tagline/buttons spacing never stretches. —— */
@media (min-width: 800px) {
  .hero-grid {
    grid-template-columns: 1.15fr 0.85fr;
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 2.25rem;
    row-gap: 0;
    align-items: start;
  }

  .hero-copy {
    display: contents;
  }

  .hero-copy > .eyebrow { grid-column: 1; grid-row: 1; justify-self: start; }
  .hero-copy > h1 { grid-column: 1; grid-row: 2; }
  .hero-copy > .hero-tagline { grid-column: 1; grid-row: 3; margin-bottom: 0; }
  .hero-copy > .btn-row { grid-column: 1; grid-row: 4; margin-top: 1.85rem; }

  .hero-visual {
    grid-column: 2;
    grid-row: 2 / 6; /* top of the headline, down past the buttons if needed */
    align-self: start;
    min-width: 0;
  }
}

/* Narrow desktops/tablets landscape: give the turntable an even column */
@media (min-width: 800px) and (max-width: 1023px) {
  .hero-grid {
    grid-template-columns: 1fr 1fr;
  }
}

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

  .vinyl-spin,
  .hero-logo-wrap::before,
  .logo-lockup .logo-disc,
  .eq-bars span,
  .btn-primary {
    animation: none !important;
  }

  .card:hover,
  .media-card:hover,
  .contact-method:hover,
  .social-list a:hover,
  .btn-primary:hover {
    transform: none;
  }
}