/* ── Fonts ───────────────────────────────────────────── */
@font-face {
  font-family: 'ChunkFive Roman';
  src: url('ChunkFive-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* ── Reset & base ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #139A43;
  --text-body:   #c2e1c2;   /* all non-title text */
  --text-title:  #2D2D2A;   /* page title headings */
  --text-active: #e8f5e8;   /* active nav tab */
  --text-bright: #f5fdf5;   /* hover */
  --banner-h:    364px;     /* banner/spacer height — JS reads this too */
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  font-family: 'ChunkFive Roman', serif;
  color: var(--text-body);
}

/* ── Scroll container — JS controls scrollTop ───────── */
#scroll-container {
  height: 100vh;
  height: 100dvh;   /* track the dynamic viewport so mobile URL bars don't clip content */
  overflow: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#scroll-container::-webkit-scrollbar { display: none; }

/* ── Sections ───────────────────────────────────────── */
.section {
  height: 100vh;
  height: 100dvh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

/* ── Fixed Navigation ───────────────────────────────── */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 1.2rem 2rem;
  pointer-events: none;
}
#nav > * { pointer-events: all; }

.nav-links {
  display: flex;
  gap: 1.8rem;
  align-items: center;
}

.nav-sep {
  font-size: 1.8rem;
  color: var(--text-body);
  opacity: .45;
  user-select: none;
}

.nav-link {
  font-size: 1.95rem;
  letter-spacing: .18em;
  color: var(--text-body);
  text-decoration: none;
  cursor: pointer;
  transition: color .3s;
  background: none;
  border: none;
  font-family: inherit;
}
.nav-link:hover  { color: var(--text-bright); }
.nav-link.active { color: var(--text-title); }

/* Hamburger — hidden on desktop, shown on mobile via media query below */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 7px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--text-body);
  transition: transform .25s, opacity .25s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 768px) {
  #nav { padding: 1rem 1.3rem; }
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute;
    top: 100%;
    right: 1.3rem;
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    background: var(--bg);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-sep { display: none; }
  .nav-link { font-size: 1.5rem; }
}

/* ── HOME ──────────────────────────────────────────── */
#home .home-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 5rem;
  gap: .6rem;
}

.home-title {
  font-size: clamp(5rem, 14vw, 14rem);
  letter-spacing: .08em;
  color: var(--text-title);
  text-transform: uppercase;
  line-height: 1;
}

.home-role {
  font-size: clamp(1.6rem, 4.2vw, 4.2rem);
  letter-spacing: .28em;
  color: var(--text-body);
  text-transform: uppercase;
}

/* ── Combined Home + Credits (mobile only; hidden on desktop) ── */
.home-banner-slot { display: none; height: var(--banner-h); flex-shrink: 0; }
.home-credits     { display: none; }

/* ── "BEATSTORE BELOW" prompt (mobile only; hidden on desktop) ── */
.beats-below { display: none; }
.below-arrow {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
  flex-shrink: 0;
}

/* ── Title Rule ─────────────────────────────────────── */
.title-rule {
  width: 70%;
  height: 3px;
  background: var(--text-title);
  opacity: .55;
  margin: .4rem auto .2rem;
  flex-shrink: 0;
  align-self: center;
}

/* ── Beats contact footer ────────────────────────────── */
.beats-contact {
  padding: 0 4rem 1.8rem;
  flex-shrink: 0;
  text-align: center;
}

/* ── Social Blocks (shared across all pages) ─────────── */
.page-socials {
  display: flex;
  justify-content: space-between;
  padding: 0 4rem 1.8rem;
  flex-shrink: 0;
}

.social-block {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  text-decoration: none;
}
.social-block.right { text-align: right; }

.social-platform {
  font-size: clamp(1.6rem, 3.5vw, 3.2rem);
  letter-spacing: .22em;
  color: var(--text-body);
  text-transform: uppercase;
  transition: color .25s;
}
.social-handle {
  font-size: clamp(2rem, 5vw, 4.6rem);
  letter-spacing: .1em;
  color: var(--text-body);
  text-transform: uppercase;
  transition: color .25s;
}
.social-block:hover .social-platform,
.social-block:hover .social-handle { color: var(--text-bright); }

/* ── Beats Page Player ───────────────────────────────── */
.beats-player {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
  width: 100%;
  background: #111111;
  border-top: 1px solid rgba(255, 255, 255, .07);
  padding: .5rem 1.4rem;
  box-sizing: border-box;
  border-radius: 0 0 8px 8px;
}

.player-time {
  font-size: clamp(.55rem, .85vw, .72rem);
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: .08em;
  color: #888888;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 2.8em;
  text-align: right;
}

.player-scrubber {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 2px;
  background: #2a2a2a;
  border-radius: 1px;
  cursor: pointer;
  outline: none;
  margin: 0;
}
.player-scrubber::-webkit-slider-runnable-track {
  height: 2px;
  background: #2a2a2a;
  border-radius: 1px;
}
.player-scrubber::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  margin-top: -5px;
}
.player-scrubber::-moz-range-track {
  height: 2px;
  background: #2a2a2a;
  border-radius: 1px;
}
.player-scrubber::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  border: none;
  cursor: pointer;
}

.player-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: clamp(.9rem, 1.4vw, 1.2rem);
  color: #666666;
  padding: .15rem .25rem;
  transition: color .2s;
  line-height: 1;
  flex-shrink: 0;
}

.player-btn:hover { color: #ffffff; }

.player-btn-active { color: #ffffff; }

.player-btn-skip {
  font-size: clamp(1rem, 1.5vw, 1.3rem);
}

.player-btn-main {
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  font-weight: bold;
  color: #ffffff;
}

/* SVG control glyphs — render identically across platforms (no emoji fallback) */
.player-btn svg,
.play-btn svg,
.sort-spc-play svg {
  width: 1.15em;
  height: 1.15em;
  fill: currentColor;
  display: block;
  pointer-events: none;
}

/* ── Infinite Banner ────────────────────────────────── */
.banner-wrapper {
  width: 100%;
  height: var(--banner-h);
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.banner-shared {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  will-change: transform;
}

.banner-shared.is-hidden {
  visibility: hidden;
  pointer-events: none;
}

.banner-spacer {
  height: var(--banner-h);
  flex-shrink: 0;
}

.credits-banner-spacer {
  margin-top: 5rem;
}
.banner-track {
  display: flex;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  gap: 20px;
  touch-action: none;        /* we drive horizontal drag ourselves (see initBannerDrag) */
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.banner-track.dragging { cursor: grabbing; }
.banner-item {
  height: 100%;
  flex-shrink: 0;
  display: block;
  cursor: inherit;
}
.banner-item img {
  height: 100%;
  width: auto;
  display: block;
  -webkit-user-drag: none;   /* stop the native image ghost-drag while sliding */
  user-drag: none;
}

/* ── CREDITS ────────────────────────────────────────── */
.credits-title {
  padding-top: 1rem;
}

.credits-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: .5rem 2rem .5rem;
}
.credits-line {
  font-size: clamp(1.8rem, 4vw, 3.8rem);
  letter-spacing: .22em;
  color: var(--text-body);
  text-transform: uppercase;
  line-height: 1.2;
}

/* ── BEATS ──────────────────────────────────────────── */
.beats-title-row {
  position: relative;
  flex-shrink: 0;
}
#beats .section-title { padding-top: 5rem; }

.beats-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: .4rem 0.3rem 1.2rem;
  overflow: hidden;
}

/* ── Grid container fills beats-body ── */
.beats-grid {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ── Window ── */
.beats-window {
  width: 100%;
  display: flex;
  flex-direction: column;
  font-family: 'Rajdhani', sans-serif;
  background: #0d0d0d;
  border: 1px solid rgba(255, 255, 255, .1);
  overflow: hidden;
  border-radius: 8px;
}

.beats-window-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .55rem 1.4rem;
  background: #111111;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  flex-shrink: 0;
}
.beats-window-title {
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  letter-spacing: .25em;
  color: #d8d8d8;
  text-transform: uppercase;
}
.beats-window-count {
  font-size: clamp(.6rem, .9vw, .85rem);
  letter-spacing: .18em;
  color: #888888;
  text-transform: uppercase;
}
.beats-window-right {
  display: flex;
  align-items: center;
  gap: .7rem;
}
.filter-clear-chip {
  font-family: inherit;
  font-size: clamp(.55rem, .8vw, .72rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #d8e8d8;
  background: rgba(45, 110, 56, .55);
  border: none;
  border-radius: 3px;
  padding: .22rem .55rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.filter-clear-chip:hover { background: rgba(45, 110, 56, .85); }

/* ── Sort bar ── */
.beats-sort-bar {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .3rem 1.2rem;
  background: #111111;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  flex-shrink: 0;
}
.sort-spc { visibility: hidden; }
.sort-num-header {
  width: 1.6em;
  text-align: right;
  flex-shrink: 0;
  padding: 0;
}
.sort-spc-play {
  font-size: .85rem;
  line-height: 1;
  padding: .2rem .3rem;
  flex-shrink: 0;
  visibility: hidden;
}
.sort-spc-wave { flex: 1; }
.sort-spc-buy {
  font-size: clamp(.6rem, .85vw, .8rem);
  padding: .4rem 1rem;
  flex-shrink: 0;
  visibility: hidden;
}
.sort-col {
  background: none;
  border: none;
  color: #777777;
  font-family: inherit;
  font-size: clamp(.52rem, .75vw, .67rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  white-space: nowrap;
  transition: color .15s;
}
.sort-col:hover { color: #888888; }
.sort-col.sort-active { color: #bbbbbb; }
.sort-col[data-sort="title"] {
  width: clamp(8rem, 22vw, 28rem);
  text-align: left;
}

/* ── Beat list (one row per beat) ── */
.beats-table {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #333333 transparent;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(255, 255, 255, .06);
}
.beats-table::-webkit-scrollbar { width: 5px; }
.beats-table::-webkit-scrollbar-track { background: transparent; }
.beats-table::-webkit-scrollbar-thumb { background: #333333; border-radius: 3px; }

.beat-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .9rem;
  padding: .6rem 1.2rem;
  background: #0d0d0d;
  transition: background .15s;
  cursor: default;
}
.beat-row:hover { background: #141414; }
.beat-row.playing { background: #181818; }
.beat-row.playing .beat-title { color: #ffffff; font-weight: 600; letter-spacing: .12em; }

.beat-num {
  font-size: clamp(.6rem, .9vw, .8rem);
  letter-spacing: .05em;
  color: #777777;
  width: 1.6em;
  text-align: right;
  flex-shrink: 0;
}

.play-btn {
  background: none;
  border: none;
  color: #666666;
  font-size: .85rem;
  line-height: 1;
  padding: .2rem .3rem;
  cursor: pointer;
  font-family: inherit;
  transition: color .2s;
  flex-shrink: 0;
}
.play-btn:hover { color: #ffffff; }
.beat-row.playing .play-btn { color: #ffffff; }

.beat-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(.7rem, .95vw, .88rem);
  font-weight: 500;
  letter-spacing: .1em;
  color: #d8d8d8;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: clamp(8rem, 22vw, 28rem);
  flex-shrink: 0;
}

.waveform-wrap {
  flex: 1;
  height: 26px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}
.waveform-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Tags row (BPM + genre pills) ── */
.beat-tags {
  display: flex;
  gap: .35rem;
  align-items: center;
  flex-shrink: 0;
}

.beat-bpm {
  font-size: clamp(.55rem, .8vw, .72rem);
  letter-spacing: .12em;
  color: #999999;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.beat-tag {
  font-size: clamp(.52rem, .75vw, .68rem);
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: .1em;
  color: #cccccc;
  background: rgba(255, 255, 255, .09);
  border: none;
  border-radius: 2px;
  padding: .16rem .45rem;
  text-transform: uppercase;
  white-space: nowrap;
  font-family: inherit;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.beat-tag:hover { color: #ffffff; background: rgba(255, 255, 255, .15); }
.beat-tag-active { color: #ffffff !important; background: rgba(255, 255, 255, .22) !important; }

/* ── Buy button ── */
.buy-btn {
  width: auto;
  flex-shrink: 0;
  background: #2d6e38;
  border: none;
  color: #c2e1c2;
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(.7rem, 1vw, .9rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: .4rem 1.2rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s;
  border-radius: 2px;
}
.buy-btn:hover { background: #366040; }
.buy-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── Beat list: mobile reflow ── */
@media (max-width: 768px) {
  .beats-sort-bar { gap: .5rem; padding: .3rem .9rem; }
  .sort-spc-wave { display: none; }
  .sort-col[data-sort="title"] { width: auto; flex: 1; }

  .beat-row { gap: .5rem; padding: .25rem .9rem; flex-wrap: wrap; }
  .waveform-wrap { display: none; }   /* seek via the bottom player scrubber instead */
  .beat-tags { display: none; }       /* hides the STYLE sort header in the sort bar */
  .beat-row .beat-tags {              /* but show genre pills on a 2nd line under the title */
    display: flex;
    flex-wrap: wrap;
    flex-basis: 100%;
    gap: .25rem;
    padding-left: 3.5rem;             /* indent so pills line up under the title */
    margin-top: -.15rem;              /* pull pills up tight under the title */
    order: 10;                        /* keep BUY on line 1; tags wrap below it */
  }
  .beat-row .beat-tag {               /* small & muted so the 2nd line stays subordinate */
    font-size: .55rem;
    padding: .08rem .35rem;
    letter-spacing: .08em;
    color: #9a9a9a;
    background: rgba(255, 255, 255, .06);
  }
  .beat-title { width: auto; flex: 1; min-width: 0; }
  .buy-btn { padding: .3rem .9rem; }
}

/* ── Buy modal ── */
.buy-modal-overlay {
  position: fixed;
  inset: 0;
  top: 0; right: 0; bottom: 0; left: 0;   /* explicit offsets for Safari ≤14 (no `inset`) */
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, .72);
  opacity: 0;
  transition: opacity .2s ease;
}
.buy-modal-overlay[hidden] { display: none; }
.buy-modal-overlay.is-open { opacity: 1; }

.buy-modal {
  position: relative;
  background: #111111;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  color: #e8e8e8;
  font-family: 'Rajdhani', sans-serif;
  width: min(560px, 100%);
  padding: 2rem 1.6rem 1.8rem;
  transform: translateY(12px) scale(.98);
  transition: transform .2s ease;
}
.buy-modal-overlay.is-open .buy-modal { transform: none; }

.buy-modal-close {
  position: absolute;
  top: .5rem;
  right: .8rem;
  background: none;
  border: none;
  color: #d8d8d8;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  opacity: .7;
  transition: opacity .2s;
}
.buy-modal-close:hover { opacity: 1; }

.buy-modal-title {
  text-align: center;
  font-size: clamp(1rem, 2.4vw, 1.4rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 1.4rem;
  color: #ffffff;
}

.buy-options {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.buy-option-wrap {
  flex: 1 1 0;
  max-width: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.buy-option-price {
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  letter-spacing: .06em;
  color: #c2e1c2;
  margin: 0 0 .5rem;
}

.buy-option {
  width: 100%;
  background: #0d0d0d;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  color: #e8e8e8;
  font-family: 'Rajdhani', sans-serif;
  padding: 1.1rem 1rem 1.2rem;
  cursor: pointer;
  text-align: left;
  transition: border-color .2s, background .2s;
}
.buy-option:hover { background: #16331b; border-color: #2d6e38; }
.buy-option:disabled { opacity: .45; cursor: not-allowed; }

.buy-option-format {
  display: block;
  text-align: center;
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: .8rem;
}

.buy-option-terms {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.buy-option-terms li {
  font-size: clamp(.65rem, 1.4vw, .82rem);
  letter-spacing: .03em;
  color: #e8e8e8;
  padding-left: .9rem;
  position: relative;
}
.buy-option-terms li::before {
  content: '-';
  position: absolute;
  left: 0;
}

.buy-modal-error {
  margin: 1.1rem 0 0;
  text-align: center;
  font-size: clamp(.75rem, 1.6vw, .9rem);
  letter-spacing: .03em;
  color: #ffb4b4;
}
.buy-modal-error[hidden] { display: none; }

@media (max-width: 480px) {
  .buy-options { flex-direction: column; align-items: center; }
  .buy-option-wrap { max-width: 320px; width: 100%; }
}

/* ── MIXING & SERVICES ──────────────────────────────── */
#mixing .mixing-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 5rem 2rem 1rem;
  gap: 2rem;
}

.mixing-title {
  font-size: clamp(3.5rem, 10vw, 11rem);
  letter-spacing: .07em;
  color: var(--text-title);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.02;
}
.mixing-email {
  font-size: clamp(1.2rem, 3.2vw, 3rem);
  letter-spacing: .18em;
  color: var(--text-body);
  text-transform: uppercase;
  margin-top: .3rem;
}
.mixing-price {
  font-size: clamp(1.2rem, 3.2vw, 3rem);
  letter-spacing: .18em;
  color: var(--text-body);
  text-transform: uppercase;
}
.mixing-note {
  font-size: clamp(1.2rem, 3.2vw, 3rem);
  letter-spacing: .18em;
  color: var(--text-title);
  text-transform: uppercase;
  text-align: center;
  margin-top: .2rem;
}

/* ── Shared section title ───────────────────────────── */
.section-title {
  font-size: clamp(5rem, 14vw, 16rem);
  letter-spacing: .06em;
  color: var(--text-title);
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
}

/* ── Mobile layout: shrink banner + fit oversized type on phones ── */
@media (max-width: 768px) {
  /* Scale the banner down so it stops dominating the screen and crowding content */
  :root { --banner-h: 200px; }

  /* Home title/roles: lower the minimums so long words don't overflow narrow screens */
  #home .home-main { flex: 1 1 0; padding-top: 4rem; gap: .4rem; }
  .home-title { font-size: clamp(2.8rem, 13vw, 5rem); letter-spacing: .04em; }
  .home-role  { font-size: clamp(1.1rem, 4.4vw, 2rem); letter-spacing: .18em; }

  /* Merge credits into the home screen: roles on top, banner in the middle slot,
     credits below, socials pinned at the bottom. Hide the standalone credits screen.
     The equal top/bottom margin puts matching space above the banner (between PRODUCER
     and the banner) and below it (which lowers the CREDITS block and everything under). */
  #home .home-banner-slot { display: block; margin: 1.75rem 0; }
  #home .banner-spacer    { display: none; }   /* desktop's bottom slot — unused here */
  #credits.section        { display: none; }   /* folded into home on mobile */

  .home-credits {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
  }
  .home-credits .credits-list { flex: 0 0 auto; padding: .3rem 1rem; gap: .15rem; }
  .home-credits .credits-line { font-size: clamp(.95rem, 3.8vw, 1.7rem); line-height: 1.25; }
  .home-credits-title { font-size: clamp(2rem, 9vw, 3.2rem); padding-top: .2rem; }

  /* Social blocks: smaller type + tighter side padding so handles stay on-screen */
  .page-socials { padding: 0 1.3rem 1.3rem; gap: .8rem; }
  #home .page-socials { padding-bottom: .6rem; }   /* sit the home socials a touch lower */
  .social-platform { font-size: clamp(.9rem, 3.4vw, 1.4rem); letter-spacing: .12em; }
  .social-handle   { font-size: clamp(1.05rem, 4.6vw, 2rem); letter-spacing: .04em; }

  /* Credits lines */
  .credits-line { font-size: clamp(1.2rem, 4.6vw, 2.4rem); letter-spacing: .12em; }

  /* Mixing & Services: tighten spacing and shrink the long email/price lines.
     Body sits at the top; the BEATSTORE prompt fills the leftover space below. */
  #mixing .mixing-body { flex: 1 1 auto; justify-content: space-evenly; padding: 4rem 1rem 1rem; gap: 1rem; }
  .mixing-title { font-size: clamp(2.6rem, 11vw, 5rem); }
  .mixing-price,
  .mixing-note { font-size: clamp(1.1rem, 4vw, 1.8rem); letter-spacing: .1em; }
  .mixing-email { font-size: clamp(.8rem, 3.2vw, 1.3rem); letter-spacing: .06em; }

  /* BEATSTORE \/ BELOW \/ prompt — taps to the store. The services list above grows to
     fill the upper space, so the socials sit at their natural height and drop down to
     cluster with the BEATSTORE prompt at the bottom (minimal gap around them). */
  #mixing .page-socials { flex: 0 0 auto; align-items: center; padding: 0 1.3rem .4rem; margin-top: 1.4rem; }

  .beats-below {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .25rem 1rem 1.5rem;
    cursor: pointer;
  }
  .beats-below-store {
    font-size: clamp(2.6rem, 13vw, 5rem);
    letter-spacing: .1em;
    color: var(--text-title);
    text-transform: uppercase;
    line-height: 1;
  }
  .beats-below-row {
    display: flex;
    align-items: center;
    gap: .7rem;
    color: var(--text-body);
  }
  .beats-below-word {
    font-size: clamp(1.7rem, 8vw, 3.2rem);
    letter-spacing: .3em;
    text-indent: .3em;   /* balance the trailing letter-spacing so the word stays centered */
    text-transform: uppercase;
    line-height: 1;
  }
  .beats-below .below-arrow { width: clamp(1.6rem, 7.5vw, 3rem); height: auto; }

  /* Beats: shrink the oversized BEATSTORE title so it fits the screen width */
  #beats .section-title { font-size: clamp(2.2rem, 10vw, 4rem); letter-spacing: .04em; padding-top: 4rem; }

  /* Beats contact footer */
  .beats-contact { padding: 0 1.3rem 1.3rem; }
}

/* ── Flexbox `gap` fallback (Safari ≤14, where flex `gap` is unsupported) ──────
   `@supports` can't detect flex-gap (grid-gap masks it), so the inline JS runs a
   feature test and adds `.no-flexgap` to <html> when needed. These rules mirror the
   existing gap values with child margins so spacing holds and nothing overlaps.
   Modern browsers never match this class, so the normal `gap` rules are unaffected. */
.no-flexgap .banner-track > .banner-item { margin-right: 20px; }

.no-flexgap .nav-links > * { margin-left: 1.8rem; }
.no-flexgap .nav-links > *:first-child { margin-left: 0; }

.no-flexgap #home .home-main > * { margin-bottom: .6rem; }
.no-flexgap #home .home-main > *:last-child { margin-bottom: 0; }

.no-flexgap .social-block > * { margin-bottom: .15rem; }
.no-flexgap .social-block > *:last-child { margin-bottom: 0; }

.no-flexgap .beats-sort-bar > * { margin-right: .9rem; }
.no-flexgap .beats-player > *   { margin-right: 1rem; }
.no-flexgap .beat-row > *       { margin-right: .9rem; }
.no-flexgap .beat-tags > *      { margin-right: .35rem; }

@media (max-width: 768px) {
  .no-flexgap .nav-links > * { margin-left: 0; margin-bottom: 1rem; }
  .no-flexgap .nav-links > *:last-child { margin-bottom: 0; }
  .no-flexgap #home .home-main > * { margin-bottom: .4rem; }
  .no-flexgap .beat-row > * { margin-right: .5rem; }
}