/* ============================================================================
   SINAN — sections 02 … 07
   ----------------------------------------------------------------------------
   Everything below the room. One rule governs the whole file:

     THE PAGE IS ONE CONTINUOUS SPACE. Each section's background ENDS on the
     exact colour the next one BEGINS with, and the join is covered either by
     a bleed that reaches up over the section above or — where that section is
     pinned — by a scroll-linked flood painted inside the pin itself. Edit one
     end of a pair without the other and the page goes back to reading as six
     stacked slabs.

       01 room ──flood──▸ 02 #EA031D … #5D001D
       02 ──flood──▸ 03 #5D001D … #030A94
       03 ──bleed──▸ 04 #020666 … #020666
       04 ──fp fade──▸ 05 #030A94 … #020666
       05 ──bleed──▸ 06 #020666 … #020666
       06 ──────────▸ 07 #020666 … #090122

   Red is only ever emitted by an opening; blue is only ever a surface holding
   light. Nothing is a card, nothing is a panel.
   ========================================================================= */

/* ═══════════════════════════════════════════════════════════════════════
   CHROME — the navigation that takes over once the room is behind us
   ═══════════════════════════════════════════════════════════════════════ */

.chrome {
  position: fixed; z-index: 40;
  top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gut);
  padding: clamp(16px, 1.9vw, 26px) var(--gut);
  background: linear-gradient(180deg, rgba(9,1,34,.90), rgba(2,6,102,.50) 62%, transparent);
  opacity: 0; visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .7s var(--ease), transform .7s var(--ease), visibility 0s linear .7s;
}
.chrome.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.chrome__mark { color: var(--paper); letter-spacing: .24em; }
.chrome__links { display: flex; gap: clamp(16px, 2.2vw, 36px); }
.chrome__links a { position: relative; padding-bottom: 4px; transition: color .5s var(--ease); }
.chrome__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .6s var(--ease);
}
.chrome__links a:hover { color: var(--paper); }
.chrome__links a:hover::after,
.chrome__links a[aria-current="true"]::after { transform: scaleX(1); }
.chrome__links a[aria-current="true"] { color: var(--paper); }

/* ═══════════════════════════════════════════════════════════════════════
   SEAM BLEED
   A section reaches --seam UP over the one above it and dissolves into it.
   z-index:-1 keeps it under its own content but, because the section is its
   own stacking context, still over the section above. Every gradient ends on
   that section's OWN first background stop, so the join is invisible by
   construction.

   ONLY for sections whose predecessor is NOT pinned. MUSIC follows the hero's
   pin and ABOUT follows the film's; a static band laid across either would sit
   on top of a live frame. Those two seams are driven from inside the pin
   instead (.record__next in hero.css, and .film__ground::before below).

   With VISUAL at 04 and ABOUT at 05 the two static seams are VISUAL's (over
   MUSIC) and LIVE's (over ABOUT). ABOUT sits under the film's pin and is fed
   from inside it.
   ═══════════════════════════════════════════════════════════════════════ */

.film::before, .live::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 0; right: 0; top: calc(var(--seam) * -1); height: var(--seam);
}
/* over MUSIC, which ends on #030A94, down to the film ground's own #020666 */
.film::before  { background:
  radial-gradient(58% 130% at 62% 100%, rgba(234,3,29,.12), transparent 72%),
  linear-gradient(180deg, rgba(2,6,102,0), rgba(2,6,102,.24) 30%, rgba(2,6,102,.68) 66%, #020666 100%); }
/* over ABOUT, which ends on #020666 — LIVE's own first stop, so this one
   carries only the haze and lands on the colour already there */
.live::before  { background:
  radial-gradient(64% 130% at 92% 100%, rgba(36,79,246,.20), transparent 70%),
  linear-gradient(180deg, rgba(2,6,102,0), rgba(2,6,102,.24) 30%, rgba(2,6,102,.68) 66%, #020666 100%); }

.record__disc {
  position: absolute; left: 50%; top: 50%;
  width: 900px; height: 900px;
  transform: translate(-50%, -50%) scale(var(--disc-scale));
  will-change: transform;
}
.disc { position: absolute; inset: 0; border-radius: 50%; }

.disc__body {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    /* grooves — a wide, low-contrast pitch. Anything finer beats against the
       pixel grid as the disc scales and the whole face starts to shimmer. */
    repeating-radial-gradient(circle at 50% 50%,
      rgba(36,79,246,.13) 0 1.5px, rgba(9,1,34,.22) 1.5px 6px, transparent 6px 13px),
    radial-gradient(circle at 50% 50%,
      #090122 0 27%, #020666 27.2% 30%, #090122 30.2% 78%, #020666 78.2% 96%, #090122 96.2% 100%),
    #090122;
  box-shadow: 0 0 0 1px rgba(234,3,29,.34), 0 60px 120px -30px rgba(9,1,34,.92);
  animation: spin 17s linear infinite;
}
.disc__body::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%,
    transparent 0 52px, rgba(36,79,246,.20) 52px 54px, transparent 54px 106px);
  opacity: var(--disc-o);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* the label — pressed, not printed: it holds the room's own red */
.disc__label {
  position: absolute; left: 50%; top: 50%;
  width: 34%; height: 34%;
  transform: translate(-50%, -50%);
  border-radius: 50%; overflow: hidden;
  display: grid; place-content: center; gap: 10px; text-align: center;
  background: radial-gradient(circle at 42% 34%, #EA031D 0%, #EA031D 36%, #A0011C 74%, #5D001D 100%);
  box-shadow: inset 0 0 42px rgba(93,0,29,.66);
}
.disc__label-name {
  font-family: var(--display); font-weight: 800;
  font-variation-settings: "opsz" 32;
  font-size: 38px; line-height: 1; letter-spacing: -.018em; text-transform: uppercase;
  color: var(--paper);
}
/* Twenty-seven characters where two used to sit, so it drops to 9.5px and sets
   as a centred two-line stack under the name. text-wrap balances the break to
   FATE IS IN LOVE / WITH EFFORT rather than orphaning EFFORT on its own line.

   padding-left matches the tracking on purpose: letter-spacing adds a trailing
   space to EVERY line, which pulls each centred line half a space to the left.
   text-indent only ever corrects the first.

   Soft White, not a tint: this surface momentarily fills the whole viewport,
   and .72 white on #EA031D measures 2.7:1. */
.disc__label-meta {
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  padding-left: .2em;
  line-height: 1.64;
  max-width: 62%;
  margin-inline: auto;
  text-wrap: balance;
  color: var(--paper);
}

/* the light standing still while the record turns under it */
.disc__sheen {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    conic-gradient(from 210deg at 50% 50%,
      rgba(255,255,255,0) 0deg, rgba(36,79,246,.34) 26deg, rgba(255,255,255,0) 64deg,
      rgba(255,255,255,0) 180deg, rgba(234,3,29,.22) 210deg, rgba(255,255,255,0) 250deg,
      rgba(255,255,255,0) 360deg),
    radial-gradient(58% 58% at 26% 22%, rgba(243,243,248,.16), transparent 62%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.disc__hole {
  position: absolute; left: 50%; top: 50%;
  width: 2.2%; height: 2.2%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #090122;
  box-shadow: 0 0 0 1px rgba(9,1,34,.90), inset 0 1px 2px rgba(234,3,29,.40);
}

/* ═══════════════════════════════════════════════════════════════════════
   03 · MUSIC
   Inside the chamber. The section opens on the red the record ended on and
   cools into the blue world over its own height — so the crossfade IS the
   section, not a band at its edge.
   ═══════════════════════════════════════════════════════════════════════ */

.music {
  position: relative; z-index: 5;
  padding: clamp(88px, 14vh, 170px) 0 clamp(80px, 12vh, 150px);
  /* opens on the hand-off colour and holds it long enough that the section's
     leading edge is invisible as it arrives, then cools into the blue world */
  background:
    radial-gradient(60% 34% at 4% 14%, rgba(234,3,29,.12), transparent 70%),
    linear-gradient(180deg, #5D001D 0%, #5D001D 9%, #A0011C 20%, #020666 58%, #030A94 100%);
}
.music__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 86px);
  align-items: start;
  padding-right: var(--gut);
}

/* ── the visual field ─────────────────────────────────────────────── */
.music__field { position: relative; }

.field {
  position: relative;
  aspect-ratio: 4 / 3.35;
  overflow: hidden;
  background: #5D001D;
  box-shadow: 0 40px 120px -40px rgba(234,3,29,.55);
}
.field__stills { position: absolute; inset: 0; }
.field__stills img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1100ms var(--ease), transform 2400ms var(--ease);
}
.field__stills img.on { opacity: 1; transform: scale(1); }

/* the chamber's own light, laid back over the photograph */
.field__light {
  position: absolute; inset: 0;
  background:
    radial-gradient(78% 52% at 50% 22%, rgba(234,3,29,.40), transparent 66%),
    linear-gradient(180deg, transparent 40%, rgba(93,0,29,.50) 86%, rgba(9,1,34,.80) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.field__light::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 46%, rgba(9,1,34,.72) 100%);
  mix-blend-mode: multiply;
}
.field__grain {
  position: absolute; inset: 0;
  background-image: var(--grain);
  background-size: 260px 260px;
  opacity: .06; mix-blend-mode: soft-light;
  pointer-events: none;
}

/* ── transport ────────────────────────────────────────────────────────
   The only controls on the site. A button, a name, the shape of the file,
   a clock. Nothing that belongs to a streaming app.
   ------------------------------------------------------------------- */
.transport {
  display: grid;
  grid-template-columns: auto minmax(120px, 1.1fr) minmax(0, 1.6fr) auto;
  align-items: center;
  gap: clamp(14px, 1.8vw, 28px);
  padding: clamp(16px, 2vh, 22px) 0 0;
  margin-top: clamp(14px, 2vh, 20px);
  border-top: 1px solid var(--hair);
}
.transport__play {
  appearance: none; border: 1px solid rgba(234,3,29,.50); background: none;
  width: clamp(40px, 3.4vw, 52px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  transition: border-color .5s var(--ease), background-color .5s var(--ease);
}
.transport__play:hover { border-color: #EA031D; background: rgba(234,3,29,.18); }
.transport__glyph {
  display: block; width: 0; height: 0;
  border-left: 9px solid var(--ember);
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  margin-left: 3px;
}
.is-playing .transport__glyph {
  width: 9px; height: 12px; margin-left: 0; border: 0;
  background: linear-gradient(90deg, var(--ember) 0 3px, transparent 3px 6px, var(--ember) 6px 9px);
}
.transport__now { min-width: 0; }
.transport__title {
  margin: 0 0 5px;
  font-weight: 500; font-size: clamp(13px, 1.06vw, 16px); letter-spacing: -.008em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.transport__meta { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.transport__time { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* the file as a shape — deterministic, so a track always looks like itself */
.wave { display: flex; align-items: center; gap: 2px; height: 26px; cursor: pointer; }
.wave i {
  display: block; flex: 1 1 0; min-width: 1px;
  height: calc(var(--h) * 1%);
  background: rgba(243,243,248,.22);
  transition: background-color .35s linear, height .5s var(--ease);
}
.wave i.lit { background: var(--ember); }

/* ── the catalogue ────────────────────────────────────────────────── */
.music__list { padding-top: clamp(0px, 4vh, 60px); }

.sechead { margin-bottom: clamp(30px, 5vh, 56px); }
.sechead__idx { margin: 0 0 clamp(18px, 2.6vh, 30px); }

.tracks { border-top: 1px solid var(--hair); }

.trk {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  grid-template-areas: "n title meta";
  align-items: baseline;
  gap: 0 clamp(12px, 1.4vw, 22px);
  width: 100%;
  padding: clamp(15px, 2.1vh, 24px) 0;
  border: 0; border-bottom: 1px solid var(--hair);
  background: none; color: inherit; text-align: left; cursor: pointer;
  font: inherit;
}
/* the light a row gives back when it is under the cursor */
.trk::before {
  content: ""; position: absolute; left: -16px; right: -16px; top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(234,3,29,.22), rgba(234,3,29,.04) 58%, transparent);
  opacity: 0; transition: opacity .5s var(--ease);
  pointer-events: none;
}
.trk:hover::before, .trk.on::before { opacity: 1; }

.trk__n {
  grid-area: n;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  color: var(--paper-faint);
  transition: color .4s var(--ease);
}
.trk:hover .trk__n, .trk.on .trk__n { color: var(--paper); }

.trk__title {
  grid-area: title;
  font-weight: 600; text-transform: uppercase;
  font-variation-settings: "opsz" 32;
  font-size: clamp(19px, 2.05vw, 32px);
  line-height: 1.06; letter-spacing: -.024em;
  color: rgba(243,243,248,.86);
  transition: color .4s var(--ease), transform .6s var(--ease);
}
.trk:hover .trk__title { color: var(--paper); transform: translateX(6px); }
.trk.on .trk__title { color: var(--paper); }

.trk__meta {
  grid-area: meta;
  display: grid;
  grid-template-columns: 52px 46px;
  align-items: baseline;
  gap: clamp(8px, 1vw, 16px);
  width: clamp(110px, 11vw, 140px);
  white-space: nowrap;
}
.trk__meta span { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-faint); }
.trk__meta .trk__year, .trk__meta .trk__len { font-variant-numeric: tabular-nums; text-align: right; }

/* the playhead, drawn on the row that is up */
.trk__line { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ember); transform: scaleX(0); transform-origin: 0 50%; }
.trk.on .trk__line { transform: scaleX(var(--pp, 0)); }

/* an unreleased row: reads as an announcement, not a track — nothing to play */
.trk--soon { cursor: default; }
.trk--soon .trk__title { color: var(--paper-faint); font-style: italic; }
.trk--soon:hover .trk__title { transform: none; }
.trk--soon .trk__line { display: none; }

/* a row that has somewhere to go: the hairline moves to the wrapper so the
   "Stream now" line sits inside the same cell as its song */
.trkw--linked { border-bottom: 1px solid var(--hair); }
.trkw--linked .trk { border-bottom: 0; }
.trk__stream {
  display: inline-block;
  margin: -4px 0 clamp(14px, 2vh, 20px) calc(38px + clamp(12px, 1.4vw, 22px));
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper-dim);
}
.trk__stream span { display: inline-block; transition: transform .5s var(--ease); }
.trk__stream:hover span { transform: translateX(4px); }

.music__note { margin-top: clamp(24px, 3.6vh, 40px); max-width: 40ch; }

/* ═══════════════════════════════════════════════════════════════════════
   04 · VISUAL
   No information. The world with the interface taken off it. The ground is
   the deep hall the hero was standing in, put back behind one plate.
   ═══════════════════════════════════════════════════════════════════════ */

.film {
  position: relative; z-index: 5;
  height: 190vh;
  --fp: 0;
}
.film__pin {
  position: sticky; top: 0;
  height: 100svh; overflow: hidden;
  display: grid; place-items: center;
}
.film__ground {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 62% at 50% 42%, rgba(36,79,246,.34), transparent 70%),
    radial-gradient(34% 30% at 50% 50%, rgba(234,3,29,.26), transparent 72%),
    linear-gradient(180deg, rgba(2,6,102,.86) 0%, rgba(3,10,148,.58) 42%, rgba(2,6,102,.90) 78%, #020666 100%),
    var(--mat-hall) center / cover no-repeat,
    #020666;
}
/* the seam into 05, driven from inside the pin because the section after a
   pin cannot lay a static band across a live frame. It lands on #030A94 —
   ABOUT's own first background stop — so the join has no edge. */
.film__ground::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 40%, rgba(6,28,219,.30) 74%, #030A94 100%);
  opacity: clamp(0, calc((var(--fp) - .55) / .45), 1);
}
/* Ambient red, thrown by the opening onto the blue around it. Above the band,
   so the type sits in that light too; below the video, so it never washes it. */
.film__spill {
  position: absolute; z-index: 1;
  left: 50%; top: 50%;
  width: min(80vw, 940px); height: min(88svh, 900px);
  transform: translate(-50%, -50%);
  background: radial-gradient(44% 42% at 50% 50%, rgba(234,3,29,.34), rgba(160,1,28,.14) 48%, transparent 74%);
  filter: blur(56px);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* One grain over the video AND the room. Shared stock is most of what makes
   two pieces of footage read as the same world. */
.film__air {
  position: absolute; inset: 0; z-index: 4;
  background-image: var(--grain); background-size: 260px 260px;
  opacity: .07; mix-blend-mode: soft-light;
  pointer-events: none;
}

/* the plate — an opening standing in the room rather than a full-bleed crop */
.film__frame {
  position: relative; z-index: 2; margin: 0;
  width: clamp(240px, 30vw, 432px);
  aspect-ratio: 9 / 16;          /* the source is 1080x1920 */
  max-height: 74svh;
  overflow: hidden;
  /* No ring, and no hard top or bottom: the opening fades into the floor and
     the ceiling so only its two sides read as cut into the wall. That is the
     difference between a slit in architecture and a poster on a page. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 86%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 86%, transparent 100%);
}
/* No parallax on the video: it is already the motion in this section, and a
   transform on a playing <video> is a composited layer for no gain. */
.film__video {
  display: block;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.03);
}


.film__edge {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(2,6,102,.50), transparent 26%, transparent 72%, rgba(9,1,34,.70)),
    radial-gradient(96% 74% at 50% 46%, transparent 52%, rgba(9,1,34,.46));
}

/* the one loud line on the site, kept quiet by opacity, running behind */
.marquee {
  position: absolute; z-index: 1; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  overflow: hidden; pointer-events: none;
  /* exactly 0.25 for the whole band, so the two type colours below can stay
     at full strength and the value is stated in one place */
  opacity: .25;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__row {
  display: flex; width: max-content;
  animation: slide 74s linear infinite;
}
.marquee__row span {
  font-family: var(--display); font-weight: 800;
  font-variation-settings: "opsz" 32;
  font-size: clamp(52px, 9.2vw, 150px);
  line-height: 1; letter-spacing: -.026em; text-transform: uppercase;
  color: #244FF6;
  padding-right: .3em;
  white-space: nowrap;
}
.marquee__row span i { font-style: normal; color: #EA031D; }
@keyframes slide { to { transform: translateX(-50%); } }

.film__idx { position: absolute; z-index: 3; left: var(--gut); top: clamp(84px, 12vh, 130px); margin: 0; }
.film__cap { position: absolute; z-index: 3; left: var(--gut); bottom: clamp(26px, 4vh, 44px); margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   05 · ABOUT
   Two sentences and four facts, in the coolest air on the page.
   ═══════════════════════════════════════════════════════════════════════ */

.about {
  position: relative; z-index: 5;
  padding: clamp(84px, 13vh, 168px) var(--gut);
  background:
    radial-gradient(74% 52% at 8% 0%, rgba(36,79,246,.50), transparent 64%),
    linear-gradient(180deg, #030A94 0%, #020666 58%, #020666 100%);
}
.about__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  grid-template-areas:
    "head  ."
    "body  plate"
    "spec  .";
  gap: clamp(28px, 4.4vh, 56px) clamp(36px, 6vw, 96px);
  align-items: start;
  max-width: 1500px; margin: 0 auto;
}
.about .sechead { grid-area: head; margin: 0; }
.about__body { grid-area: body; max-width: clamp(300px, 33vw, 560px); }
.about__body .lead-in { font-size: clamp(21px, 2.32vw, 38px); line-height: 1.3; letter-spacing: -.022em; }
.about__body .lead-in + .lead-in { margin-top: clamp(14px, 2vh, 22px); }
.lead-in--dim { color: rgba(243,243,248,.62); }

.spec { grid-area: spec; margin: 0; display: grid; gap: 0; align-self: end; max-width: 520px; }
.spec__row {
  display: grid; grid-template-columns: clamp(88px, 11vw, 150px) minmax(0, 1fr);
  gap: 18px; align-items: baseline;
  padding: clamp(11px, 1.6vh, 16px) 0;
  border-top: 1px solid var(--hair);
}
.spec__row:last-child { border-bottom: 1px solid var(--hair); }
.spec dt { margin: 0; }
.spec dd { margin: 0; font-weight: 400; font-size: clamp(12.5px, 1vw, 15px); color: rgba(243,243,248,.78); }

/* a last narrow opening, in the wall of the quietest section */
/* NOT a framed plate. It runs off the right edge of the page and dissolves into
   the room on the other three sides, so there is no rectangle left to read —
   the photograph is a lit surface in the same wall as everything else.

   The bleed: the section is centred and gutter-padded, so the gap from the
   inner's right edge to the viewport is the gutter until the inner hits its
   1500px cap, and half the overflow after that. */
/* It no longer runs off the page: it sits inside the composition, stretched to
   the height of the text column beside it so the two read as one spread. The
   figure is a column — caption at the bottom, image taking whatever height is
   left — which is what ties its height to the type rather than to its own
   aspect ratio. */
.about__plate {
  grid-area: plate; margin: 0;
  position: relative;
  isolation: isolate;          /* keeps the spill behind the image, not the page */
  /* The picture is taken out of flow below, so this box is sized by the two
     paragraphs sharing its row: top edge on "Sinan is a Turkish DJ…", bottom
     edge on "…rooms anywhere." */
  align-self: stretch;
  /* reaches left, into the gutter between the columns, so the fade has room to
     dissolve toward the type instead of stopping at the column edge */
  margin-left: max(-90px, -5vw);

  /* LATERAL ONLY, and declared once so the tone below wears the same fade.
     The left ramp is the long one — 44% of the width — because that is the
     side facing the type; the right only has to meet the page edge. */
  --plate-fade: linear-gradient(90deg,
    transparent 0%, rgba(0,0,0,.22) 9%, rgba(0,0,0,.62) 24%, #000 44%,
    #000 78%, rgba(0,0,0,.55) 92%, transparent 100%);
}
.about__plate img {
  display: block;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 46%;
  filter: saturate(1.06) contrast(1.05);
  /* top and bottom are left clean, so the media still reads as a picture
     rather than a smudge */
  -webkit-mask-image: var(--plate-fade);
          mask-image: var(--plate-fade);
}
/* the light it throws back into the room. NOT a drop shadow — a drop shadow
   would redraw the rectangle the mask just took away. */
.about__plate::before {
  content: ""; position: absolute; z-index: -1;
  inset: 6% 4% 14% 6%;
  background: radial-gradient(56% 62% at 58% 48%, rgba(234,3,29,.32), rgba(160,1,28,.12) 52%, transparent 74%);
  filter: blur(48px);
}
/* the room's own tone settling back over it */
.about__plate::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(2,6,102,.60), rgba(2,6,102,.30) 24%, transparent 46%,
    transparent 80%, rgba(2,6,102,.44));
  /* the tone can only exist where the picture does */
  -webkit-mask-image: var(--plate-fade);
          mask-image: var(--plate-fade);
}
.about__plate figcaption {
  position: absolute; left: max(90px, 5vw); top: 100%;
  margin: 0; padding-top: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════
   06 · LIVE
   A ledger, not a table. Hairlines, a lot of air, and nothing claimed.
   ═══════════════════════════════════════════════════════════════════════ */

.live {
  position: relative; z-index: 5;
  padding: clamp(92px, 16vh, 190px) var(--gut) clamp(80px, 13vh, 160px);
  background:
    radial-gradient(66% 48% at 92% 8%, rgba(36,79,246,.42), transparent 62%),
    linear-gradient(180deg, #020666 0%, #030A94 38%, #020666 100%);
}
.live__inner { max-width: 1500px; margin: 0 auto; }

.live__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "idx  note" "title note";
  gap: clamp(16px, 2.6vh, 30px) clamp(36px, 6vw, 96px);
  align-items: end;
  margin-bottom: clamp(44px, 7vh, 84px);
}
.live__head .sechead__idx { grid-area: idx; margin: 0; }
.live__head .h-section { grid-area: title; }
.live__note { grid-area: note; max-width: 34ch; align-self: end; }

.dates { border-top: 1px solid var(--hair); }

.date {
  display: grid;
  grid-template-columns: clamp(96px, 12vw, 170px) minmax(0, 1.5fr) minmax(0, 1fr) auto;
  gap: clamp(14px, 2vw, 34px);
  align-items: center;
  padding: clamp(18px, 2.8vh, 30px) 0;
  border-bottom: 1px solid var(--hair);
  position: relative;
}
.date::before {
  content: ""; position: absolute; left: -16px; right: -16px; top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(36,79,246,.30), transparent 62%);
  opacity: 0; transition: opacity .5s var(--ease); pointer-events: none;
}
.date--live:hover::before { opacity: 1; }
.date__when { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--paper-dim); font-variant-numeric: tabular-nums; }
.date--empty .date__when { color: var(--paper-ghost); }
.date__city {
  font-weight: 600; font-variation-settings: "opsz" 32;
  font-size: clamp(19px, 2.2vw, 34px); line-height: 1; letter-spacing: -.022em; text-transform: uppercase;
  color: rgba(243,243,248,.88);
}
.date--empty .date__city { color: rgba(243,243,248,.34); }
.date__venue { font-weight: 400; font-size: clamp(12.5px, 1vw, 15px); color: var(--paper-dim); }
.date__status {
  justify-self: end;
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--paper-faint); white-space: nowrap;
}
.date__status--soon { color: var(--paper); }
.date__status--tickets { color: var(--paper); }

.live__book {
  display: inline-grid; grid-auto-flow: column; align-items: baseline; gap: clamp(14px, 2vw, 26px);
  margin-top: clamp(44px, 7vh, 84px);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(243,243,248,.28);
  transition: border-color .6s var(--ease);
}
.live__book:hover { border-color: var(--blue-hot); }
.live__book-value { font-weight: 400; font-size: clamp(17px, 1.8vw, 27px); letter-spacing: -.014em; }
.live__book-arrow { font-size: 14px; color: var(--paper); transition: transform .5s var(--ease); }
.live__book:hover .live__book-arrow { transform: translate(3px, -3px); }

/* ═══════════════════════════════════════════════════════════════════════
   07 · CONTACT
   The calmest surface on the site. The name, and the ways to reach it.
   ═══════════════════════════════════════════════════════════════════════ */

.foot {
  position: relative; z-index: 5;
  padding: clamp(72px, 12vh, 140px) var(--gut) clamp(26px, 4vh, 40px);
  /* 06 ends on #020666 and this begins on it, so the join needs no bleed —
     which is why .foot keeps its clip for .foot__name */
  background: linear-gradient(180deg, #020666 0%, #090122 58%, #090122 100%);
  overflow: hidden;
}
.foot__inner { max-width: 1500px; margin: 0 auto; }

.foot__top { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-bottom: clamp(40px, 7vh, 82px); }
.foot__top p { margin: 0; }

.foot__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(30px, 5vw, 86px);
  padding-bottom: clamp(56px, 10vh, 120px);
}
.foot__col > p { margin: 0 0 clamp(16px, 2.4vh, 24px); }
.foot__list { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(8px, 1.2vh, 13px); }
.foot__list a, .foot__list span { font-weight: 400; font-size: clamp(14px, 1.15vw, 17px); letter-spacing: -.008em; color: rgba(243,243,248,.78); }
.foot__list--contact li { display: grid; grid-template-columns: clamp(88px, 10vw, 132px) minmax(0, 1fr); gap: 16px; align-items: baseline; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* the ways out carry their marks */
.link--icon { display: inline-flex; align-items: center; gap: 10px; }
.link__icon { display: inline-flex; width: 16px; height: 16px; flex: 0 0 16px; opacity: .72; transition: opacity .5s var(--ease); }
.link__icon svg { width: 100%; height: 100%; display: block; }
.link--icon:hover .link__icon { opacity: 1; }

/* the list — one line in, the same voice as the rest of the footer */
.foot__sub {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(30px, 5vw, 86px);
  align-items: start;
  padding: clamp(28px, 4.4vh, 44px) 0 clamp(56px, 10vh, 120px);
  border-top: 1px solid var(--hair);
}
.foot__sub-copy p { margin: 0; }
.foot__sub-copy .tag { margin-bottom: clamp(10px, 1.6vh, 16px); }
.foot__sub-note { font-weight: 400; font-size: clamp(14px, 1.15vw, 17px); letter-spacing: -.008em; color: rgba(243,243,248,.78); max-width: 34ch; }
.foot__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 18px; align-items: end; max-width: 560px; }
.foot__input {
  width: 100%; min-width: 0; height: 46px; padding: 0 0 2px; margin: 0;
  background: transparent; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0;
  color: var(--paper); font: inherit; font-size: clamp(15px, 1.2vw, 18px); letter-spacing: -.008em;
  transition: border-color .5s var(--ease);
}
.foot__input::placeholder { color: var(--paper-ghost); }
.foot__input:focus { outline: none; border-bottom-color: var(--paper); }
.foot__input:disabled { opacity: .55; }
.foot__btn {
  display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px; margin: 0;
  background: transparent; border: 1px solid var(--hair); border-radius: 999px; color: var(--paper);
  cursor: pointer; white-space: nowrap;
  transition: border-color .5s var(--ease), background .5s var(--ease), color .5s var(--ease);
}
.foot__btn:hover { border-color: var(--paper); background: var(--paper); color: var(--ink); }
.foot__btn:disabled { cursor: default; opacity: .55; }
.foot__btn:disabled:hover { background: transparent; color: var(--paper); border-color: var(--hair); }
.foot__btn-arrow { transition: transform .5s var(--ease); }
.foot__btn:hover .foot__btn-arrow { transform: translateX(4px); }
.foot__form-msg { grid-column: 1 / -1; margin: 12px 0 0; letter-spacing: .14em; }
.foot__form-msg[data-state="error"] { color: #ff6b7a; }
.foot__form-msg[data-state="ok"] { color: var(--paper); }
.foot__form.is-done .foot__btn { border-color: var(--paper); }

/* the name, sitting on the bottom edge of the page */
.foot__mark { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: clamp(18px, 3vh, 30px); }
.foot__name {
  font-size: clamp(44px, 9.6vw, 172px);
  font-variation-settings: "opsz" 32;
  letter-spacing: -.03em;
  line-height: .8;
  color: var(--paper);
}
.foot__role { padding-bottom: clamp(6px, 1.6vh, 16px); white-space: nowrap; }

.foot__base { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: clamp(16px, 2.6vh, 26px); border-top: 1px solid var(--hair); }
.foot__base p, .foot__base a { margin: 0; }
.foot__legal { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); }

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   The desktop composition is not squeezed; each break re-stacks it.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .music__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 5vh, 54px); padding: 0 var(--gut); }
  .field { aspect-ratio: 16 / 11; }
  .music__list { padding-top: 0; }

  .about__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "body" "plate" "spec";
    gap: clamp(26px, 4vh, 44px);
  }
  .about__body { max-width: 34ch; }

  /* One column: the plate gets a row of its own, so there is no paragraph
     block left to take its height from. The picture goes back IN FLOW at its
     own 3:2 — out of flow it would collapse the row to nothing — and the
     caption follows it rather than hanging in a gap that no longer exists. */
  .about__plate {
    max-width: none;
    margin-left: 0;
  }
  .about__plate img {
    position: static;
    width: 100%; height: auto;
    aspect-ratio: 3 / 2;
  }
  .about__plate figcaption {
    position: static; left: auto; top: auto;
    padding-top: 10px;
  }

  .live__head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "idx" "title" "note"; }
  .live__note { max-width: 42ch; }

  .foot__cols { grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vh, 48px); }
  .foot__sub { grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 3vh, 28px); }
}

@media (max-width: 720px) {
  /* the wordmark and the sections cannot share a line this narrow;
     the sections win, because they are the way out */
  .chrome { padding: 14px 18px; }
  .chrome__mark { display: none; }
  .chrome__links { width: 100%; justify-content: space-between; gap: 6px; }
  .chrome__links a { font-size: 9px; letter-spacing: .16em; }

  /* a 16:9 crop throws most of a portrait frame away */
  .field { aspect-ratio: 4 / 4.2; }


  .transport { grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; }
  .transport .wave { display: none; }

  .trk { grid-template-columns: 30px minmax(0, 1fr); grid-template-areas: "n title" ".  meta"; gap: 8px 12px; }
  .trk__meta { margin-top: 8px; width: auto; }

  .spec__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }

  .date { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "when status" "city status" "venue status"; gap: 4px 16px; align-items: start; }
  .date__when { grid-area: when; }
  .date__city { grid-area: city; margin-top: 4px; }
  .date__venue { grid-area: venue; margin-top: 4px; }
  .date__status { grid-area: status; align-self: center; }

  .foot__mark { flex-direction: column; align-items: flex-start; gap: 14px; }
  .foot__list--contact li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .marquee { top: 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .disc__body, .marquee__row { animation: none; }

  /* the disc's approach is capped in js/hero.js for this mode */
  .film   { height: 130vh; }
}