/* Previously Music — "The Stage" (Direction D, approved 2026-10-17).
   Concert-film composition: full-bleed stills, type burned over photography,
   black intertitles, the chart as one late Scoreboard strip.
   Page-family CSS for /music/ only. Header/footer come from the canonical
   bible + footer components — not styled here. */

:root{
  --bg:#000000; --s1:#101010; --s2:#1B1B1B; --line:#2C2C2C;
  --silver:#A5ACAF; --white:#FFFFFF; --red:#E10600; --dim:#6E7478;
  --font:'Previously Display', 'Marathon Long Run Display', 'Arial Narrow', sans-serif;
}
.stage{background:var(--bg); color:var(--white); font-family:var(--font); font-weight:400;}
.stage img{display:block; max-width:100%;}
.stage .r{color:var(--red);}
.stage .src{color:var(--dim); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;}

/* ---------- still frame ---------- */
.d-still{position:relative; overflow:hidden; background:#000; display:block; text-decoration:none; color:inherit;}
.d-still img.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.d-still .scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 46%, rgba(0,0,0,.86) 100%);}
.d-still .frame{position:relative; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; height:100%; padding:24px 20px 30px;}
.d-still:focus-visible{outline:2px solid var(--red); outline-offset:-2px;}
.d-open{height:92vh; min-height:560px;}
.d-mid{height:78vh; min-height:480px;}
.d-cap .ck{color:var(--red); font-size:13.5px; letter-spacing:.3em; text-transform:uppercase;}
.d-cap h2{font-size:42px; line-height:1.0; text-transform:uppercase; margin-top:10px; max-width:15ch; font-weight:400;}
.d-cap .dek{color:#D8DBDD; font-size:16.5px; line-height:1.5; margin-top:10px; max-width:44ch;}
.d-cap .meta{color:var(--silver); font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; margin-top:14px;}
.d-cap .meta .r{color:var(--red);}
.d-cap .meta--credit{color:var(--dim); font-size:11px; margin-top:6px;}

/* ---------- intertitle — pure black title card, centered ---------- */
.d-inter{min-height:52vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:56px 28px; background:#000;}
.d-inter .ik{color:var(--red); font-size:13.5px; letter-spacing:.34em; text-transform:uppercase;}
.d-inter .it{font-size:44px; line-height:1.02; text-transform:uppercase; margin-top:14px; font-weight:400;}
.d-inter .it .r{color:var(--red);}
.d-inter .isub{color:var(--silver); font-size:16px; line-height:1.55; margin-top:14px; max-width:40ch;}
.d-inter .irule{width:54px; height:2px; background:var(--red); margin-top:22px;}
.d-inter a.it{color:var(--white); text-decoration:none;}
.d-inter a.it:hover{box-shadow:inset 0 -3px 0 var(--red);}

/* ---------- coming attraction — portrait still ---------- */
.d-attract{height:88vh; min-height:520px;}
.d-attract img.bg{object-position:center 22%;}

/* ---------- scoreboard — one letterbox strip, late in the film ---------- */
.d-score{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 20px 22px; background:#050505;}
.d-score .s-head{display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:16px;}
.d-score .s-title{font-size:22px; letter-spacing:.08em; text-transform:uppercase; font-weight:400;}
.d-score .s-title .r{color:var(--red);}
.d-score .s-week{color:var(--dim); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;}
.d-score .s-row{display:flex; align-items:baseline; gap:14px; padding:10px 0;}
.d-score .s-row + .s-row{box-shadow:inset 0 1px 0 rgba(255,255,255,.05);}
.d-score .s-num{font-size:26px; color:var(--silver); width:30px; flex:none; text-align:right;}
.d-score .s-num.first{color:var(--red); font-size:32px;}
.d-score .s-t{font-size:19px; text-transform:uppercase; line-height:1.1;}
.d-score .s-a{color:var(--silver); font-size:14.5px;}
.d-score .s-dur{margin-left:auto; color:var(--dim); font-size:13.5px; flex:none;}
.d-score .s-album{margin-top:16px; padding-top:14px; box-shadow:inset 0 1px 0 rgba(255,255,255,.05); color:var(--silver); font-size:15px; line-height:1.55;}
.d-score .s-album b{color:var(--white); font-weight:400;}
.d-score .src{margin-top:12px;}

/* ---------- verse still — bars as a lower-third ---------- */
.d-verse{height:80vh; min-height:500px;}
.d-verse img.bg{object-position:center 30%;}
.d-verse .v-bars{font-size:27px; line-height:1.3; text-transform:uppercase; margin-top:10px; max-width:22ch;}
.d-verse .v-bars .r{color:var(--red);}
.d-verse .v-credit{color:var(--silver); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; margin-top:12px; line-height:1.7;}

/* ---------- end card ---------- */
.d-end{min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:60px 28px 30px; background:#000;}
.d-end .ek{color:var(--red); font-size:13.5px; letter-spacing:.34em; text-transform:uppercase;}
.d-end .et{font-size:38px; line-height:1.05; text-transform:uppercase; margin-top:14px; font-weight:400;}
.d-end .esub{color:var(--silver); font-size:16px; line-height:1.55; margin-top:12px; max-width:42ch;}
.d-end .d-link{display:inline-block; margin-top:18px; color:var(--white); font-size:14px; letter-spacing:.18em; text-transform:uppercase; box-shadow:inset 0 -2px 0 var(--red); padding-bottom:3px; text-decoration:none;}
.d-end .credits{color:var(--dim); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; line-height:2.1; margin-top:44px;}

/* ================= LAPTOP ================= */
@media (min-width:1100px){
  .d-open{height:92vh;}
  .d-mid{height:86vh;}
  .d-still .frame{padding:44px 48px 48px;}
  .d-cap h2{font-size:84px; max-width:16ch;}
  .d-cap .dek{font-size:19px;}
  .d-inter{min-height:64vh;}
  .d-inter .it{font-size:76px;}
  .d-inter .isub{font-size:18px;}
  .d-attract{height:92vh;}
  .d-attract img.bg{object-position:center 18%;}
  .d-score{padding:36px 48px 30px;}
  .stage .d-score .s-cols{display:grid; grid-template-columns:1fr 1fr; gap:0 64px; align-items:start;}
  .stage .d-score .s-first{border-top:none; padding-top:4px;}
  .stage .d-score .s-sleeve{width:118px; height:118px;}
  .stage .d-score .s-bignum{font-size:84px;}
  .stage .d-score .s-first .s-t{font-size:26px;}
  .stage .d-score .s-row:first-child{padding-top:4px;}
  .d-verse{height:88vh;}
  .d-verse .v-bars{font-size:38px;}
  .d-end .et{font-size:56px;}
}

/* ================= Direction E — "The Second Set" (2026-10-17) =================
   Three deltas on D's spine: the In This Issue index, the Scoreboard in
   The Chart's grammar, and the honest end card with three doors.
   All selectors stay scoped under .stage / page classes — no globals. */

/* ---------- in this issue — the bounded index ---------- */
.d-issue{padding:42px 20px 34px; background:#000;}
.d-issue .d-sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:14px; border-top:1px solid var(--line); padding-top:18px; margin-bottom:16px;}
.d-issue .d-sec-head h3{font-size:26px; letter-spacing:.06em; text-transform:uppercase; font-weight:400;}
.d-issue .d-sec-head span{color:var(--dim); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;}
.d-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
/* Seamless tiles (amendment, James's order 2026-10-17): no borders, no
   outline trays. Second amendment (James, 2026-10-17 14:46 PT — "get rid
   of the black box behind the text… transparent floating on the
   screen", scope: ALL FOUR Issue tiles): the box itself is gone —
   transparent background, no shadow block. The tile content floats
   directly on the page's black ground: photo tiles keep their art
   full-bleed with the type floating beneath it; the Spotlight card is
   pure floating type, no container at all. The story headline's house
   red underline on hover is now the tile's only accent. */
.d-card{display:block; background:transparent; box-shadow:none; text-decoration:none; color:inherit;}
.d-card:hover h4{box-shadow:inset 0 -2px 0 var(--red);}
.d-card:focus-visible{outline:2px solid var(--red); outline-offset:2px;}
.d-card .th{aspect-ratio:16/10; overflow:hidden; background:var(--s2);}
.d-card .th img{width:100%; height:100%; object-fit:cover;}
.d-card .cb{padding:12px 12px 14px;}
.d-card .ck{color:var(--red); font-size:11px; letter-spacing:.18em; text-transform:uppercase; line-height:1.5;}
.d-card h4{font-size:17px; line-height:1.18; text-transform:uppercase; margin-top:6px; font-weight:400;}
.d-card p{color:var(--silver); font-size:13.5px; line-height:1.45; margin-top:5px;}
.d-card--spot{display:flex;}
.d-card--spot .cb{flex:1; display:flex; flex-direction:column; justify-content:center; padding:16px 12px;}
.d-card--spot .nm{font-size:30px; line-height:1.05; text-transform:uppercase; margin-top:8px;}
.d-card--spot .nm .r{color:var(--red);}

/* ---------- scoreboard — chart grammar (No. 1 feature + rows 2–5) ---------- */
.d-score .s-kick{color:var(--dim); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:8px;}
.d-score .s-title{margin-bottom:6px;}
.d-score .s-first{display:flex; gap:16px; align-items:center; padding:14px 0 16px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.d-score .s-sleeve{width:74px; height:74px; flex:none; object-fit:cover; background:var(--s2);}
.d-score .s-bignum{font-size:56px; line-height:1; color:var(--red); flex:none;}
.d-score .s-fmain{min-width:0;}
.d-score .s-first .s-t{font-size:21px;}
.d-score .s-first .s-dur{font-size:14.5px;}

/* ---------- end card — told straight, three working doors ---------- */
.d-end .esub b{color:var(--white); font-weight:400;}
.d-doors{display:grid; gap:10px; margin-top:26px; width:100%; max-width:460px;}
.d-door{display:flex; align-items:center; justify-content:space-between; gap:12px; background:linear-gradient(180deg, var(--s2) 0%, var(--s1) 100%); box-shadow:0 12px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.5); padding:15px 16px; text-decoration:none; color:var(--white); text-align:left; transition:box-shadow .25s ease;}
.d-door:hover{box-shadow:0 18px 44px rgba(0,0,0,.7), 0 4px 12px rgba(0,0,0,.55);}
.d-door:focus-visible{outline:2px solid var(--red); outline-offset:2px;}
.d-door .dl{display:block; font-size:16px; letter-spacing:.08em; text-transform:uppercase;}
.d-door .ds{display:block; color:var(--silver); font-size:12.5px; letter-spacing:.04em; margin-top:3px;}
.d-door .arr{color:var(--red); font-size:18px; flex:none;}

@media (min-width:1100px){
  .d-issue{padding:54px 48px 44px;}
  .d-issue .d-sec-head h3{font-size:32px;}
  .d-grid{grid-template-columns:repeat(4,1fr); gap:16px;}
  .d-card h4{font-size:19px;}
  .d-doors{grid-template-columns:repeat(3,1fr); max-width:1020px; gap:14px;}
}

@media (prefers-reduced-motion: reduce){
  .stage *{transition:none !important; animation:none !important;}
}