/* ==========================================================================
   THE RECORD BAND — a short strip under the founder: who Haq has stood
   beside, and what came back to them.

   Two things only, as the owner asked for them. A slow roll of client marks,
   and three figures. The marks are placeholders: abstract, unnamed, and
   flagged in the markup, so nothing on this page claims a client that has
   not given permission to be named.

   The roll is a CSS animation on a duplicated set, never a scroll listener,
   and it stops for anyone who has asked the system for less motion. Each set
   carries its own trailing gap so translating the track by exactly half its
   width lands seam to seam with no jump.
   ========================================================================== */

.band {
  --band-gap: clamp(30px, 6vw, 60px);
  position: relative;
  z-index: 2;
  background: var(--haq-ground, #061019);
  color: #f4efe4;
  padding-block: clamp(40px, 6.5vh, 72px);
  padding-inline: var(--haq-gutter, clamp(20px, 4vw, 48px));
  border-block: 1px solid rgba(244,239,228,.08);
  overflow: clip;
}
.band-in { max-width: 1080px; margin-inline: auto; }

.band-title {
  margin: 0;
  font-family: "Instrument Serif", Newsreader, Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 3.8vw, 2.6rem);
  line-height: 1.08;
  max-width: 24ch;
  text-wrap: balance;
}
.band-title em { font-style: normal; color: var(--record-amber, #f49f2e); }

/* The three figures. Tabular numerals so they line up as a set. */
.band-nums {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(18px, 3.4vw, 40px);
  margin-block: clamp(26px, 4.5vh, 44px);
}
.band-num b {
  display: block;
  font-family: "Instrument Serif", Newsreader, Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 3.6rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--record-amber, #f49f2e);
}
.band-num span {
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(244,239,228,.16);
  font-family: Manrope, system-ui, sans-serif;
  font-size: .84rem;
  line-height: 1.45;
  color: rgba(244,239,228,.72);
  max-width: 22ch;
}
/* Three figures do not divide into two columns: auto-fit left the third one
   alone beside a hole. On a phone they become three ruled rows instead. */
@media (max-width: 719px) {
  .band-nums { grid-template-columns: 1fr; gap: 0; }
  .band-num {
    display: grid;
    grid-template-columns: minmax(0, 4.8rem) 1fr;
    align-items: center;
    gap: 18px;
    padding-block: 15px;
    border-top: 1px solid rgba(244,239,228,.12);
  }
  .band-num:last-child { border-bottom: 1px solid rgba(244,239,228,.12); }
  .band-num b { font-size: 2.15rem; }
  .band-num span { margin: 0; padding: 0; border: 0; max-width: none; }
}

.band-kicker {
  margin: 0 0 clamp(16px, 2.6vh, 24px);
  font-family: Manrope, system-ui, sans-serif;
  font-size: var(--haq-eyebrow, .74rem);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(244,239,228,.5);
}
[dir="rtl"] .band-kicker { letter-spacing: 0; }

/* The roll. Masked at both edges so marks arrive and leave rather than
   appearing at a hard border. */
.band-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.band-track { display: flex; gap: 0; width: max-content; }
.band-set {
  display: flex;
  align-items: center;
  gap: var(--band-gap);
  padding-inline-end: var(--band-gap);
}
.band-mark {
  display: block;
  flex: none;
  width: clamp(84px, 18vw, 118px);
  height: auto;
  color: rgba(244,239,228,.5);
  transition: color .3s ease;
}
.band-marquee:hover .band-mark { color: rgba(244,239,228,.68); }
.band-mark path, .band-mark circle, .band-mark rect, .band-mark line, .band-mark polygon {
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round;
}
.band-mark .bar { fill: currentColor; stroke: none; }

@media (prefers-reduced-motion: no-preference) {
  .band-track { animation: band-roll 42s linear infinite; }
  [dir="rtl"] .band-track { animation-name: band-roll-rtl; }
  .band-marquee:hover .band-track,
  .band-marquee:focus-within .band-track { animation-play-state: paused; }
}
@keyframes band-roll { to { transform: translateX(-50%); } }
@keyframes band-roll-rtl { to { transform: translateX(50%); } }

/* Entrance, gated, so a blocked script ships the band whole. */
@media (prefers-reduced-motion: no-preference) {
  html.band-js .band-title,
  html.band-js .band-num,
  html.band-js .band-kicker,
  html.band-js .band-marquee { opacity: 0; translate: 0 16px; }
  html.band-js .band.in .band-title,
  html.band-js .band.in .band-num,
  html.band-js .band.in .band-kicker,
  html.band-js .band.in .band-marquee {
    opacity: 1; translate: 0 0;
    transition: opacity .55s ease, translate .6s cubic-bezier(.25,.8,.25,1);
  }
  html.band-js .band.in .band-num:nth-child(1) { transition-delay: .08s; }
  html.band-js .band.in .band-num:nth-child(2) { transition-delay: .16s; }
  html.band-js .band.in .band-num:nth-child(3) { transition-delay: .24s; }
  html.band-js .band.in .band-kicker { transition-delay: .3s; }
  html.band-js .band.in .band-marquee { transition-delay: .36s; }
}