/* The band assembles: one instrument joins each landing chapter. */
.page-index main > section:not(.hero) .eyebrow,
.page-index .chapter-next a,
.page-index .handoff-label,
.page-index .instrument figcaption .track-number { font-family: 'DM Mono', ui-monospace, SFMono-Regular, Consolas, monospace; }

/* Chapter intro: copy beside the chapter's instrument */
.page-index .chapter-intro { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: 40px 6%; margin-bottom: 56px; }
.page-index .chapter-intro--reverse { grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); }
.atelier.page-index .chapter-intro h2 { font-size: clamp(38px, 4.3vw, 70px); }
.page-index .chapter-copy h2 { margin-bottom: 26px; }
.page-index .chapter-lede { max-width: 470px; margin: 0 0 22px; font-size: 15px; line-height: 1.85; color: var(--studio-muted); }
.atelier.page-index .process-section .chapter-lede { color: #d6d9ca; }
.atelier.page-index .process-section .chapter-copy .text-link { color: #fff9e9; }

/* Instrument stage */
.instrument { --spot: #fffaf0; --ring: #26392d1f; margin: 0; position: relative; min-width: 0; }
.instrument-frame { position: relative; aspect-ratio: 1 / 1; isolation: isolate; }
.instrument--tall .instrument-frame { aspect-ratio: 5 / 6; max-height: 560px; margin-inline: auto; }
.instrument--wide .instrument-frame { aspect-ratio: 16 / 10; }
.instrument--mic .instrument-frame { aspect-ratio: 4 / 5; }
.instrument--turntable .instrument-frame { aspect-ratio: 5 / 4; }
.instrument-frame::before { content: ''; position: absolute; inset: 6% 8%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, var(--spot), transparent 100%); opacity: .9; pointer-events: none; }
.instrument-frame::after { content: 'DRAG TO TURN · TAP TO PLAY'; position: absolute; left: 50%; bottom: 4px; transform: translate(-50%, 6px); font: 500 9px/1 'DM Mono', ui-monospace, monospace; letter-spacing: .14em; white-space: nowrap; color: currentColor; opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; }
.instrument.is-live .instrument-frame:hover::after { opacity: .55; transform: translate(-50%, 0); }
.instrument-poster, .instrument-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.instrument-poster { object-fit: contain; transition: opacity .6s ease; }
.instrument-canvas { opacity: 0; transition: opacity .6s ease; cursor: grab; touch-action: pan-y; }
.instrument-canvas:active { cursor: grabbing; }
.instrument.is-live .instrument-canvas { opacity: 1; }
.instrument.is-live .instrument-poster { opacity: 0; }
.instruments-static .instrument-canvas { display: none; }
.instruments-static .instrument-poster { opacity: 1 !important; }
.instruments-static .instrument-play { display: none; }

.instrument figcaption { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 'num title play' 'num note play'; align-items: center; gap: 2px 18px; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--ring); }
.instrument .track-number { grid-area: num; align-self: start; padding-top: 6px; font-size: 10px; letter-spacing: .14em; opacity: .7; }
.instrument .track-title { grid-area: title; font-family: var(--studio-display); font-size: 24px; line-height: 1.1; }
.instrument .track-note { grid-area: note; font-size: 13px; opacity: .72; }
.instrument .tempo-readout { grid-area: title; justify-self: end; align-self: center; font: 500 13px 'DM Mono', ui-monospace, monospace; opacity: .8; }
.instrument-play { grid-area: play; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font-size: 12px; transition: background .2s, color .2s; }
.instrument-play:hover { background: #dce6bd; border-color: #dce6bd; color: #263b2d; }

/* Section-specific placement */
.atelier.page-index .process-section .instrument,
.atelier.page-index .artist-section .instrument,
.atelier.page-index .closing-section .instrument { --spot: #4d6b52; --ring: #fff9e933; color: #fff9e9; }
.atelier.page-index .pricing-section .instrument { --spot: #f8f6ec; }
.atelier.page-index .voice-section .instrument { --spot: #eef0e2; }
.atelier.page-index .features-section .instrument { --spot: #f8f1e4; }
.page-index .voice-section { align-items: start; }
.page-index .voice-section .voice-paper { margin-top: 70px; }
.page-index .instrument--trumpet { margin-top: 34px; max-width: 560px; }
.page-index .instrument--trumpet .instrument-frame { aspect-ratio: 16 / 9; }
.page-index .instrument--turntable .instrument-frame::before { inset: 10% 6%; }

/* The first take sits on cream, not on the old dark studio panel. */
.atelier.page-index .inside-section .instrument { color: #263b2d; }
.atelier.page-index .inside-section .session-editorial-note span { color: #526047; }

/* 04 · The mic booth replaces the old lyric form. */
.page-index .mic-booth { --neon: #dcf18c; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: 'top top' 'mic cta'; align-items: center; gap: 18px 28px; padding: 26px 30px 34px; border-radius: 10px; background: #263b2d; color: #fff9e9; box-shadow: 0 24px 60px #1a2a2026; }
.page-index .booth-top { grid-area: top; display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid #fff9e922; font: 500 10px 'DM Mono', ui-monospace, monospace; letter-spacing: .14em; color: #c1cbbd; }
.page-index .on-air { display: inline-flex; align-items: center; gap: 9px; padding: 7px 12px; border: 1px solid #fff9e955; border-radius: 4px; color: #fff9e9aa; transition: background .3s, color .3s, box-shadow .3s, border-color .3s; }
.page-index .on-air i { width: 8px; height: 8px; border-radius: 50%; background: #6b4a42; transition: background .3s, box-shadow .3s; }
.page-index .on-air.is-on { background: #c8402a; border-color: #c8402a; color: #fff; box-shadow: 0 0 24px #e0533a88; }
.page-index .on-air.is-on i { background: #ffd2c4; box-shadow: 0 0 10px #ffd2c4; }
.atelier.page-index .mic-booth .instrument { grid-area: mic; --spot: #3f5c47; --ring: #fff9e926; color: #fff9e9; }
.page-index .mic-booth .instrument--mic .instrument-frame { aspect-ratio: 4 / 5; }
.page-index .mic-booth figcaption { display: flex; justify-content: center; border: 0; margin-top: 4px; padding-top: 0; }
.page-index .mic-booth figcaption > span { display: none; }
.page-index .booth-cta { grid-area: cta; }
.page-index .booth-kicker { margin: 0 0 14px; font: 500 11px 'DM Mono', ui-monospace, monospace; letter-spacing: .16em; color: var(--neon); }
.atelier.page-index .booth-cta h3 { margin: 0 0 18px; font: 400 clamp(34px, 3.2vw, 48px)/1.05 var(--studio-display); color: #fff9e9; }
.atelier.page-index .booth-cta h3 em { color: var(--neon); }
.page-index .booth-cta p:not(.booth-kicker) { max-width: 320px; margin: 0 0 26px; font-size: 14px; line-height: 1.8; color: #c1cbbd; }
.atelier.page-index .booth-cta .button { background: var(--neon); border-color: var(--neon); color: #1d2f24; }
.atelier.page-index .booth-cta .button:hover { filter: brightness(1.06); }

/* Hand-off between chapters */
.page-index .handoff-label { display: block; margin-bottom: 6px; font-size: 10px; letter-spacing: .16em; opacity: .66; }
.page-index .chapter-next p { position: relative; }

/* Steps read as a count-in */
.atelier.page-index .process-section .step-number { flex: none; width: 44px; height: 44px; border-radius: 50%; font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; }

/* 08 · Your turn */
.atelier.page-index .closing-section { padding: 110px 7% 70px; text-align: left; }
.page-index .closing-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 40px 6%; max-width: 1240px; margin: 0 auto; }
.atelier.page-index .closing-section .closing-inner h2 { margin-inline: 0; }
.page-index .closing-copy > p:not(.eyebrow) { max-width: 520px; margin: 26px 0 30px; font-size: 15px; line-height: 1.85; }
.page-index .band-roll { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 1240px; margin: 70px auto 0; padding: 26px 0 0; list-style: none; border-top: 1px solid #fff9e933; }
.page-index .band-roll li { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border: 1px solid #fff9e940; border-radius: 999px; font-size: 12px; color: #fff9e9; }
.page-index .band-roll li span { font: 500 10px 'DM Mono', ui-monospace, monospace; opacity: .7; }
.page-index .band-roll .is-you { background: #fff9e9; border-color: #fff9e9; color: #20362a; font-weight: 600; }

@media (max-width: 1000px) {
  .page-index .chapter-intro, .page-index .chapter-intro--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 32px 5%; }
}
@media (max-width: 768px) {
  .page-index .chapter-intro, .page-index .chapter-intro--reverse, .page-index .closing-inner { grid-template-columns: 1fr; margin-bottom: 36px; }
  .page-index .chapter-intro--reverse .instrument { order: 2; }
  .page-index .section-heading { align-items: flex-start; }
  .page-index .chapter-lede { font-size: 14px; }
  .instrument--tall .instrument-frame, .instrument--mic .instrument-frame { aspect-ratio: 1 / 1; max-height: 380px; }
  .instrument--wide .instrument-frame { aspect-ratio: 4 / 3; }
  .page-index .instrument--trumpet .instrument-frame { aspect-ratio: 4 / 3; }
  .instrument figcaption { gap: 2px 12px; }
  .instrument .track-title { font-size: 20px; }
  .instrument-play { padding: 0 12px; }
  .page-index .voice-section .voice-paper { margin-top: 0; }
  .atelier.page-index .closing-section { padding: 80px 24px 56px; }
  .page-index .band-roll { margin-top: 46px; justify-content: flex-start; }
  .page-index .band-roll li { font-size: 11px; padding: 8px 12px; }
}
@media (max-width: 900px) {
  .page-index .mic-booth { grid-template-columns: 1fr; grid-template-areas: 'top' 'mic' 'cta'; padding: 22px 22px 28px; }
  .page-index .mic-booth .instrument--mic .instrument-frame { aspect-ratio: 1 / 1; max-height: 360px; }
}
@media (hover: none) { .instrument-frame::after { display: none; } }