/* MBK v1.2 — home.css. Extends tokens.css / base.css / motion.css for the six-beat homepage arc.
   v1.2 (HOME2 elevation pass): Beat 0 rebuilt as THE PROJECTION pinned scene (see js/home.js for the
   scrub logic — GSAP/ScrollTrigger if vendored, position:sticky + rAF fallback if not, static composed
   hero on mobile/reduced-motion). Beats 2-5 keep their v1 skeleton, broken up per the addendum:
   museum poster teaser, count-up stat, platform marquee, proof rhythm pass, one status dot. */

/* ============ BEAT 0 · THE PROJECTION ============ */
.beat-projection {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
}

.proj-plate {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.proj-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* KOVAS note 2026-07-08: he was cropped out on wide viewports — anchor the frame
     to the left edge of the photo (where he sits at the console) and lift it. */
  object-position: 18% 32%;
  filter: grayscale(1) contrast(1.1) brightness(0.92); /* lit up per KOVAS 2026-07-08 */
}

/* duotone: grayscale photo + a blend-mode color wash from ink through ecru, never full color */
.proj-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, rgba(10, 10, 10, 0.92) 0%, rgba(111, 106, 96, 0.58) 55%, rgba(245, 241, 228, 0.24) 100%);
  mix-blend-mode: color;
}

/* ===== M1 THE HEARTBEAT · M4 PROJECTOR DUST · M5 MONITOR BREATH (KOVAS greenlights 2026-07-10) =====
   The only living red in a black-and-white room: the hat heart and the headline period share one
   pulse, like they're on the same wire. Dust drifts in the light; the console screens breathe. */
.proj-heart {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  filter: contrast(1.05) brightness(1.08) drop-shadow(0 0 2px rgba(235, 28, 36, 0.18));   /* LIT, even at rest */
}
.hero-period { display: inline-block; }   /* transformable for the beat */

.proj-air { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.proj-air i {
  position: absolute; display: block; width: 4px; height: 4px; border-radius: 50%;
  background: rgba(245, 241, 228, 0.5); box-shadow: 0 0 5px 1px rgba(245, 241, 228, 0.18);
  filter: blur(0.5px); opacity: 0;
}
.proj-air i:nth-child(1) { left: 14%; top: 62%; width: 3px; height: 3px; animation-duration: 26s; animation-delay: -4s; }
.proj-air i:nth-child(2) { left: 27%; top: 38%; animation-duration: 34s; animation-delay: -19s; }
.proj-air i:nth-child(3) { left: 41%; top: 70%; width: 3px; height: 3px; animation-duration: 29s; animation-delay: -11s; }
.proj-air i:nth-child(4) { left: 52%; top: 30%; animation-duration: 40s; animation-delay: -27s; }
.proj-air i:nth-child(5) { left: 63%; top: 55%; width: 5px; height: 5px; animation-duration: 24s; animation-delay: -8s; }
.proj-air i:nth-child(6) { left: 74%; top: 42%; width: 3px; height: 3px; animation-duration: 37s; animation-delay: -31s; }
.proj-air i:nth-child(7) { left: 85%; top: 66%; animation-duration: 31s; animation-delay: -15s; }

/* M5 v2 — the ACTUAL monitors breathe: a pixel overlay of the two waveform screens (baked from
   the photo, geometry-locked like the heart). screen-blend + opacity swell = the displays glow. */
.proj-screens {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  mix-blend-mode: screen; opacity: 0.45;
}

/* M3 · ● REC — the room is rolling (KOVAS greenlight round 2, 2026-07-10) */
.file-rec { display: inline-flex; align-items: center; gap: 7px; margin-left: 18px; color: var(--red); letter-spacing: 0.3em; }
.rec-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px 1px rgba(235, 28, 36, 0.55); }

@media (prefers-reduced-motion: no-preference) {
  .proj-heart  { animation: mbk-heartbeat 6.5s ease-in-out infinite; }
  .hero-period { animation: mbk-heartbeat-period 6.5s ease-in-out infinite; }
  .proj-air i  { animation-name: mbk-dust; animation-timing-function: linear; animation-iteration-count: infinite; }
  .proj-screens { animation: mbk-breath 9s ease-in-out infinite alternate; }
  .rec-dot     { animation: mbk-rec 1.3s steps(1) infinite; }

  @keyframes mbk-heartbeat {
    0%, 26%, 100% { filter: contrast(1.05) brightness(1.08) drop-shadow(0 0 2px rgba(235, 28, 36, 0.18)); }
    5%  { filter: contrast(1.05) brightness(1.45) drop-shadow(0 0 20px rgba(235, 28, 36, 0.60)); }
    10% { filter: contrast(1.05) brightness(1.12) drop-shadow(0 0 6px rgba(235, 28, 36, 0.22)); }
    15% { filter: contrast(1.05) brightness(1.35) drop-shadow(0 0 15px rgba(235, 28, 36, 0.45)); }
  }
  @keyframes mbk-rec { 0%, 100% { opacity: 1; } 50% { opacity: 0.18; } }
  /* the period beats WITH the heart — scale + brightness so the pulse is unmistakable */
  @keyframes mbk-heartbeat-period {
    0%, 26%, 100% { transform: scale(1); text-shadow: 0 0 0 rgba(235, 28, 36, 0); filter: brightness(1); }
    5%  { transform: scale(1.45); text-shadow: 0 0 18px rgba(235, 28, 36, 0.95); filter: brightness(1.5); }
    10% { transform: scale(1.08); text-shadow: 0 0 5px rgba(235, 28, 36, 0.30); filter: brightness(1.1); }
    15% { transform: scale(1.32); text-shadow: 0 0 13px rgba(235, 28, 36, 0.75); filter: brightness(1.35); }
  }
  @keyframes mbk-dust {
    0%   { transform: translate3d(0, 0, 0); opacity: 0; }
    12%  { opacity: 0.55; }
    82%  { opacity: 0.28; }
    100% { transform: translate3d(90px, -160px, 0); opacity: 0; }
  }
  /* the monitors swell from a faint idle to clearly LIT and settle back — visible, not neon */
  @keyframes mbk-breath { from { opacity: 0.15; } to { opacity: 0.95; } }
}
@media (prefers-reduced-motion: reduce) { .proj-air { display: none; } }

.proj-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* lightened with the photo (KOVAS note): keep the left third clearer so he reads,
     hold the darkness on the right where the type sits over console texture.
     Contrast pass 2026-07-10: one added LOCALIZED ellipse behind the centered
     text block (headline → proof line) instead of crushing the whole photograph —
     the face and console grade stay exactly as KOVAS approved them. */
  background:
    radial-gradient(ellipse 60% 42% at 50% 46%, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0) 72%),
    radial-gradient(ellipse at 32% 40%, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.58) 85%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.16) 38%, rgba(0, 0, 0, 0.88) 100%);
}

/* the projector glow — warm-white/ecru, never red (spec: the beam is light, not red) */
.proj-glow {
  position: absolute;
  z-index: 2;
  top: -12%;
  right: -8%;
  width: 60vw;
  height: 60vw;
  max-width: 720px;
  max-height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 241, 228, 0.55) 0%, rgba(245, 241, 228, 0) 68%);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

.beat-projection .site-nav,
.beat-projection .dark-frame {
  position: relative;
  z-index: 3;
}

.nav-on-dark {
  background: transparent;
  border-bottom: 0;
}

.dark-frame {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* 2026-07-09 (KOVAS: "trim dead padding so the paper body arrives sooner") —
     resting/mobile/reduced-motion state only; the pinned-scrub state below
     (.is-pinned) already uses its own compact clamp() values and is untouched. */
  padding-block: 108px 48px;
  gap: 16px;
  will-change: opacity, transform;
}

.dark-mark {
  position: absolute;
  top: 64px;
  left: 32px;
}

.hero-line {
  max-width: 20ch;
  letter-spacing: 0.01em;
}

/* Contrast pass 2026-07-10 (extends KOVAS's own legibility note):
   the support line was 62%-opacity ecru at weight 300 over a live photograph —
   the page's biggest contrast failure. Warm ivory, real weight, a step larger.
   The words themselves are untouched (copy = KOVAS's gate). */
.hero-support {
  max-width: 46ch;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.125rem;
  color: rgba(245, 241, 228, 0.94);
  line-height: 1.55;
}

.proof-intro {
  font-family: var(--font-didone);
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(245, 241, 228, 0.8);
  margin-top: 8px;
}

/* FILE/MBK-000 read as an accident at grey-1 over the photo; it's an insider mark,
   not decoration — lifted into the deliberate range but kept quiet. */
.dark-mark {
  color: rgba(245, 241, 228, 0.72);
}

.screening-frame {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 900px;
  margin-top: 12px;
  padding: 24px;
  background: var(--ink);
  border: 1px solid rgba(245, 241, 228, 0.12);
  box-shadow: 0 0 60px rgba(245, 241, 228, 0.06), 0 24px 60px rgba(0, 0, 0, 0.55);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.screening-frame iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}

.proof-slate {
  min-height: min(52vh, 420px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(28px, 4vw, 52px);
  padding: clamp(28px, 5vw, 64px);
  border: 1px solid rgba(245, 241, 228, 0.18);
  background:
    linear-gradient(135deg, rgba(245, 241, 228, 0.05), rgba(245, 241, 228, 0)),
    rgba(5, 5, 5, 0.82); /* firmer fill so the stats hold against the photo (KOVAS legibility note) */
}

.proof-slate-kicker {
  display: block;
  max-width: 18ch;
  margin-inline: auto;
  font-family: var(--font-didone);
  font-style: italic;
  font-size: clamp(1.8rem, 4.6vw, 3.6rem);
  line-height: 1.04;
  color: var(--paper);
}

.proof-slate-grid {
  display: grid;
  /* minmax(0,1fr), not bare 1fr: a nowrap stat ("Emmy · Clio") must compress its
     column, never push the grid wider than the slate's border box. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-on-ink);
  border-bottom: 1px solid var(--line-on-ink);
}

.proof-slate-grid span {
  padding: 18px 20px;
  border-left: 1px solid var(--line-on-ink);
}

.proof-slate-grid span:first-child { border-left: 0; }

/* Legibility + red pass per KOVAS 2026-07-09: the numbers ARE the red splash up top —
   larger, Rebellion Red, on a firmer slate; labels lifted out of the dim range. */
.proof-slate-grid strong {
  display: block;
  font-family: var(--font-didone);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  line-height: 1.1;
  color: var(--red);
}

/* Third stat is words, not a number — at the numeric clamp "Emmy · Clio" wraps into
   a weaker shape than its siblings (review note 2026-07-10). Hold it on one line at a
   slightly tempered size so the three columns read as equals. */
.proof-slate-grid span:last-child strong {
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  white-space: nowrap;
}

.proof-slate-grid em {
  display: block;
  margin-top: 10px;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.8125rem; /* 13px — interactive-adjacent type raised per the polish spec */
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: rgba(245, 241, 228, 0.88);
}

.chapter-chips {
  display: flex;
  gap: 28px;
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.chip {
  font-family: var(--font-sans);
  font-size: var(--size-eyebrow);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--grey-1);
  font-variant-numeric: tabular-nums;
}

/* Compact composition for the pinned/sticky-scrub path ONLY (JS adds .is-pinned when it builds
   the gsap or sticky-fallback scene). transform:scale() in home.js's applyProgress() shrinks
   things visually but never changes layout height, so the pin (a fixed-height, overflow:hidden
   box) needs its content sized to actually fit any real viewport, not just a tall one. The
   static/mobile hero above is untouched by this — it isn't height-constrained, so it keeps the
   fuller, more generous v1 sizing. Everything below is vh-relative so it degrades gracefully on
   short windows instead of clipping the proof slate or the chips. */
.beat-projection.is-pinned .dark-frame {
  padding-block: clamp(64px, 9vh, 112px) clamp(12px, 2.2vh, 32px);
  gap: clamp(8px, 1.6vh, 18px);
}
.beat-projection.is-pinned .dark-mark { top: 28px; }
.beat-projection.is-pinned .hero-line { font-size: clamp(1.8rem, 5.6vh, 3.6rem); }
.beat-projection.is-pinned .hero-support { font-size: clamp(0.8rem, 1.9vh, 1rem); }
.beat-projection.is-pinned .proof-intro { font-size: clamp(0.9rem, 2vh, 1.05rem); margin-top: 0; }
.beat-projection.is-pinned .screening-frame {
  max-width: min(760px, 60vh);
  padding: clamp(10px, 1.6vh, 24px) 16px;
  margin-top: 0;
}
/* Pinned slate typography (KOVAS 2026-07-10: "the wording is outside the box").
   The pinned box above is vh-constrained, but the resting slate type scales with
   vw — on a wide, short window the words outgrow the border. In the pin, every
   piece of slate type follows the SAME axis as its box (vh), so text and frame
   grow and shrink together on any viewport. Resting/mobile hero is untouched. */
.beat-projection.is-pinned .proof-slate {
  min-height: 0;
  gap: clamp(14px, 3vh, 36px);
  padding: clamp(16px, 3.4vh, 44px);
}
.beat-projection.is-pinned .proof-slate-kicker { font-size: clamp(1.3rem, 4.4vh, 2.8rem); }
.beat-projection.is-pinned .proof-slate-grid strong { font-size: clamp(1rem, 2.6vh, 1.9rem); }
.beat-projection.is-pinned .proof-slate-grid span:last-child strong {
  font-size: clamp(0.9rem, 2.2vh, 1.6rem);
  white-space: normal; /* at vh size it holds one line anyway; never force overflow */
}
.beat-projection.is-pinned .proof-slate-grid em { font-size: clamp(0.6rem, 1.4vh, 0.8125rem); }
.beat-projection.is-pinned .chapter-chips { margin-top: 0; gap: clamp(14px, 2vw, 28px); }

/* letterbox bars — transform-only (translateY), never height: the arch lesson from gate-v06.
   Resting state is fully off-canvas + invisible, so a no-JS page reads as a clean static hero. */
.letterbox {
  position: absolute;
  left: 0;
  right: 0;
  /* 52% of the SECTION, not 52vh: on short windows (≤ ~625px) the pinned
     content outgrows 100vh, and vh-sized bars left an uncovered photo strip
     right where the title card lands (measured: 57px at 1280×540). Percent
     bars always total 104% of whatever the section actually is. */
  height: 52%;
  background: #050505;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.letterbox-top {
  top: 0;
  transform: translateY(-101%);
  box-shadow: inset 0 -2px 20px -6px rgba(245, 241, 228, 0.18);
}

.letterbox-bottom {
  bottom: 0;
  transform: translateY(101%);
  box-shadow: inset 0 2px 20px -6px rgba(245, 241, 228, 0.18);
}

/* title card — the black-beat pre-echo of the proof headline. Resting state hidden. */
.title-card {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  padding-inline: 24px;
  text-align: center;
}

.title-card span {
  font-family: var(--font-didone);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 4.2vw, 3.2rem);
  letter-spacing: 0.01em;
  color: var(--paper);
}

/* ============ BEAT 1 · HOUSE LIGHTS ============ */
/* KOVAS 2026-07-10: 42vh of centered cream read as a loading state, not a beat.
   Cut ~40% and anchor the rule/timecode just under the ink seam — a breath
   between scenes, with the Cue Sheet heading arriving in the same viewport. */
.room-transition {
  position: relative;
  background: var(--paper);
  min-height: 25vh;
  overflow: hidden;
}

.ink-veil {
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: 1;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}

.room-transition.is-lit .ink-veil { opacity: 0; }
.room-transition.no-motion .ink-veil { transition: none; opacity: 0; }

.seam-row {
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: 25vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: clamp(40px, 7vh, 72px);
  gap: 14px;
}

.seam-time { color: var(--grey-1); }

/* ============ BEAT 2 · THE CUE SHEET ============ */
.beat-cuesheet { padding-block: 72px 88px; }

.cuesheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 18px;
}

/* the museum door → a small poster teaser strip, three FIRST DESK posters peeking out */
.museum-teaser {
  display: flex;
  align-items: center;
  gap: 14px;
}

.museum-teaser-posters {
  display: flex;
}

.museum-teaser-posters img {
  width: 34px;
  height: 48px;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1) brightness(0.92);
  border: 1px solid var(--line-on-paper);
  box-shadow: 0 4px 10px rgba(10, 10, 10, 0.18);
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}

.museum-teaser-posters img:not(:first-child) { margin-left: -14px; }
.museum-teaser-posters img:nth-child(1) { transform: rotate(-4deg); z-index: 3; }
.museum-teaser-posters img:nth-child(2) { transform: rotate(2deg) translateY(-3px); z-index: 2; }
.museum-teaser-posters img:nth-child(3) { transform: rotate(-2deg) translateY(2px); z-index: 1; }

.museum-teaser:hover .museum-teaser-posters img { filter: grayscale(0) contrast(1) brightness(1); }
.museum-teaser:hover .museum-teaser-posters img:nth-child(1) { transform: rotate(-7deg) translateY(-2px); }
.museum-teaser:hover .museum-teaser-posters img:nth-child(2) { transform: rotate(3deg) translateY(-7px); }
.museum-teaser:hover .museum-teaser-posters img:nth-child(3) { transform: rotate(-3deg) translateY(-1px); }

.museum-teaser-label {
  font-size: var(--size-ui);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-on-paper);
  padding-bottom: 2px;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.museum-teaser:hover .museum-teaser-label { color: var(--red); border-color: var(--red); }

/* item 2: the teaser is a single <a> wrapping the poster fan + label — focus/active
   styling on the wrapper itself (not just the label span) so keyboard users get the
   same "the whole door lit up" read that mouse hover already gives. */
.museum-teaser:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
.museum-teaser:active .museum-teaser-label { opacity: 0.72; }

.stat-line {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  margin-bottom: 32px;
}

/* "In The Room With" — collaborator marquee, same .marquee/.marquee-track kit as
   the platform marquee (Beat 3); Didot italic distinguishes "who" from "where".
   2026-07-09 (KOVAS ruling: scores + collaborators front and center). */
.room-marquee-eyebrow {
  margin-bottom: 14px;
}

.collab-marquee {
  margin: 0 0 40px;
  padding-block: 18px;
  border-top: 1px solid var(--line-on-paper);
  border-bottom: 1px solid var(--line-on-paper);
}

.collab-marquee .marquee-item {
  font-family: var(--font-didone);
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--grey-2);
  white-space: nowrap;
}

.collab-marquee .marquee-sep {
  color: var(--grey-1);
  margin: 0 22px;
}

/* ============ BEAT 3 · THE PROOF ============ */
.beat-proof { padding-block: 72px 88px; border-top: 1px solid var(--line-on-paper); }

/* rhythm pass: larger Didot type, more air, alternating alignment, hairlines between each claim */
.hardware-bar {
  list-style: none;
  margin: 32px 0 8px;
  display: flex;
  flex-direction: column;
}

.hardware-bar li {
  font-family: var(--font-didone);
  font-weight: 400;
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  line-height: 1.4;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-on-paper);
}

.hardware-bar li:nth-child(even) { text-align: right; }

.hardware-bar .award-mark { margin-right: 12px; font-size: 0.82em; vertical-align: middle; }
.hardware-bar li:nth-child(even) .award-mark { margin-right: 0; margin-left: 12px; }

/* a quiet aside, not a claim competing with the award strings above */
.artist-line {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--size-small);
  color: var(--grey-2);
  margin: 0 0 32px;
}

/* platform marquee — decoration only; overflow/animation mechanics live in css/motion.css */
.platform-marquee {
  margin: 8px 0 56px;
  padding-block: 18px;
  border-top: 1px solid var(--line-on-paper);
  border-bottom: 1px solid var(--line-on-paper);
}

.platform-marquee .marquee-item {
  font-family: var(--font-sans);
  font-size: var(--size-small);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  font-variant-caps: small-caps;
  color: var(--grey-2);
  white-space: nowrap;
}

.platform-marquee .marquee-sep {
  color: var(--grey-1);
  margin: 0 22px;
}

.testimonial-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.testimonial {
  padding-top: 20px;
  border-top: 1px solid var(--line-on-paper);
}

.testimonial p {
  font-family: var(--font-didone);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--grey-2);
}

.testimonial cite {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-size: var(--size-eyebrow);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--grey-1);
}

/* ============ BEAT 3.25 · THE LISTENING ROOM ============ */
.beat-listening {
  padding-block: 80px 92px;
  border-top: 1px solid var(--line-on-ink);
}

.listening-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(340px, 1fr);
  gap: clamp(40px, 6vw, 72px);
  align-items: start;
}

.listening-line {
  max-width: 12ch;
  margin: 14px 0 20px;
  font-size: clamp(2rem, 4.8vw, 4rem);
  line-height: 1;
}

.listening-note {
  max-width: 46ch;
  color: var(--ecru-dim);
}

.listening-menu {
  list-style: none;
  margin-top: 36px;
  border-top: 1px solid var(--line-on-ink);
}

.listening-menu li {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-on-ink);
}

.listening-menu span {
  font-size: var(--size-eyebrow);
  letter-spacing: var(--track-wide);
  color: var(--grey-1);
}

.listening-menu strong {
  display: block;
  font-family: var(--font-didone);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--paper);
}

.listening-menu em {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: var(--size-small);
  color: var(--ecru-dim);
}

.spotify-shell {
  padding: 18px;
  border: 1px solid var(--line-on-ink);
  background: rgba(245, 241, 228, 0.035);
}

.spotify-note {
  margin-bottom: 14px;
  font-size: var(--size-eyebrow);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ecru-dim);
}

.spotify-shell iframe {
  width: 100%;
  border: 0;
  display: block;
}

.spotify-open {
  display: inline-block;
  margin-top: 16px;
  font-size: var(--size-ui);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-on-ink);
  padding-bottom: 2px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.spotify-open:hover {
  color: var(--red);
  border-color: var(--red);
}

.spotify-open:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.spotify-open:active {
  opacity: 0.72;
}

/* ============ BEAT 3.5 · FOR THE ROOM ============ */
/* professional-utility layer: proof (Beat 3) first, myth second, access (Beat 4) third.
   Four tight columns, hairline rules only — no icons, no card ceremony. */
.beat-for-room { padding-block: 72px 88px; border-top: 1px solid var(--line-on-paper); }

.for-room-intro {
  max-width: 52ch;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  margin: 14px 0 48px;
}

.for-room-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px;
  row-gap: 40px;
}

.for-room-col {
  padding-top: 18px;
  border-top: 1px solid var(--line-on-paper);
}

.for-room-col-head {
  margin-bottom: 12px;
}

.for-room-col-lead {
  font-size: 1.05rem;
  line-height: 1.42;
}

.for-room-cta {
  display: inline-block;
  margin-top: 48px;
  font-family: var(--font-sans);
  font-size: var(--size-ui);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-on-paper);
  padding-bottom: 2px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.for-room-cta:hover {
  color: var(--red);
  border-color: var(--red);
}

.for-room-cta:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.for-room-cta:active {
  opacity: 0.72;
}

/* 1080px (was 900px, raised per the v2 reference): 1024px tablets land the 2×3 layout */
@media (max-width: 1080px) {
  .for-room-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .for-room-grid { grid-template-columns: 1fr; row-gap: 28px; }
}

/* ============ BEAT 4 · THE DESK ============ */
.beat-desk { padding-block: 72px 88px; border-top: 1px solid var(--line-on-paper); }

.desk-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.room-open {
  font-size: var(--size-eyebrow);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--grey-2);
}

/* .status-dot itself is owned by css/motion.css (8px, red, pulse 2.6s, with the reduced-motion
   bail-out already wired) — .desk-head above just places it next to the eyebrow. */

.beat-desk h2 { margin-top: 8px; margin-bottom: 40px; }

.desk-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  max-width: 720px;
}

.desk-form .field:nth-child(4) { grid-column: 1 / -1; }

.desk-form .btn {
  margin-top: 8px;
  grid-column: 1 / -1;
  justify-self: start;
}

.desk-direct {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line-on-paper);
}

.desk-direct p { font-size: var(--size-small); margin-bottom: 8px; }
.desk-direct .management { color: var(--grey-2); }

.furnish-note {
  margin-top: 20px;
  font-size: var(--size-small);
  color: var(--grey-2);
  font-style: italic;
}

/* ============ BEAT 5 · THE AISLE ============ */
.beat-aisle { padding-top: 72px; border-top: 1px solid var(--line-on-paper); }

.aisle-pitch {
  max-width: 42ch;
  color: var(--grey-2);
  margin: 12px 0 28px;
}

.capture-form {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  max-width: 480px;
  margin-bottom: 24px;
}

.capture-form .field { flex: 1; margin-bottom: 0; }

/* ============ RESPONSIVE ============ */
@media (max-width: 720px) {
  .dark-mark { top: 84px; left: 20px; }
  .screening-frame { padding: 14px; }
  .proof-slate { min-height: 360px; }
  .proof-slate-grid { grid-template-columns: 1fr; }
  .proof-slate-grid span { border-left: 0; border-top: 1px solid var(--line-on-ink); }
  .proof-slate-grid span:first-child { border-top: 0; }
  .testimonial-row { grid-template-columns: 1fr; }
  .listening-layout { grid-template-columns: 1fr; }
  .desk-form { grid-template-columns: 1fr; }
  .desk-form .field:nth-child(4) { grid-column: auto; }
  .capture-form { flex-direction: column; align-items: stretch; }
  .hardware-bar li:nth-child(even) { text-align: left; }
  .hardware-bar li:nth-child(even) .award-mark { margin-right: 12px; margin-left: 0; }
  .museum-teaser-posters img { width: 26px; height: 38px; }
  .cuesheet-head { align-items: flex-start; }
}

/* ============ MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  .ink-veil { transition: none !important; }
}

/* the hero's red splash (KOVAS 2026-07-09): the headline's terminal period in
   Rebellion Red — with the red slate numbers, the only red in the dark room. */
.hero-period { color: var(--red); }