@import url('/css/pv-font-newsreader.css?v=20261112nr1');
/* Previously Music — front stylesheet (2026-10-27 rebuild, owner order).
   The Direction D/E concert-film sheet is retired wholesale: full-bleed
   vh stills with type burned over photography, the blue title band and
   the empty intertitle are gone. This sheet builds the front as an
   editorial composition in the site's settled system — dark d3 ground
   #0C121B, gold #F2BC68 signature, Marathon section chrome, Anton story
   titles, Inter body, hairline rules, bounded media boxes (photos at
   natural editorial aspect, faces never distorted, type never laid
   over a subject).
   TWO COMPOSITIONS, each designed for its canvas:
   - PHONE (base): one deliberate stacked column inside 20px gutters.
   - LAPTOP (>=1024px): a 1280px editorial grid — lead story split
     media/body, four-up card grids, two-up features, chart columns,
     verse split. Not the phone layout widened.
   Page-family CSS for /music/ only. Header/footer come from the
   canonical bible + footer components — not styled here. */

:root{
  --bg:#0C121B; --card:#141F2C; --card2:#0A0F16;
  --line:#223343; --line-soft:rgba(199,208,218,.14);
  --ink:#E8EEF4; --soft:#A4B3C2; --dim:#8FA3B5;
  --gold:#F2BC68;
  --anton:'Previously Headline','Anton',Impact,sans-serif;
  --marathon:'Marathon Long Run Display','Previously Display','Arial Narrow',sans-serif;
  --inter:'Inter',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
}
body{margin:0; font-family:var(--inter);}
.stage{background:var(--bg); color:var(--ink); font-family:var(--inter);
  max-width:1280px; margin:0 auto; padding:18px 20px 8px; box-sizing:border-box;}
.stage img{display:block; max-width:100%;}
.stage .r{color:var(--gold);}
.stage .src{color:var(--dim); font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-family:var(--inter);}
.stage a:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
/* .mf-sr is the page H1 (screen-reader only): set in the headline
   face like every H1 in the d3 canon -- it previously inherited Inter. */
.mf-sr{font-family:var(--anton); position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;}

/* ---------- shared grammar ---------- */
.stage .ck{font-family:var(--marathon); color:var(--gold); font-size:12px;
  letter-spacing:.26em; text-transform:uppercase; line-height:1.5;}
.stage .meta{font-family:var(--inter); color:var(--soft); font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; margin-top:12px;}
.stage .meta .r{color:var(--gold);}
.stage .meta--credit{color:var(--dim); font-size:11px; margin-top:5px;}
.stage .dek{font-family:var(--inter); color:var(--soft); font-size:15.5px;
  line-height:1.55; margin-top:10px;}
.mf-sec-head{display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; border-top:1px solid var(--line); padding-top:16px; margin-bottom:16px;}
.stage .mf-sec-head h2{font-family:var(--marathon); font-weight:400; color:#C7D0DA;
  font-size:24px; letter-spacing:.05em; text-transform:uppercase; margin:0;}
section{margin-top:34px;}
.mf-leadwrap{margin-top:2px;}

/* ---------- lead story — editorial card ---------- */
.mf-lead{display:block; text-decoration:none; color:inherit;}
.mf-lead__media{aspect-ratio:16/10; overflow:hidden; border-radius:12px; background:var(--card);}
.mf-lead__media img{width:100%; height:100%; object-fit:cover;}
.mf-lead__body{padding:16px 2px 0;}
.stage .mf-lead .mf-title{font-family:var(--anton); font-weight:400; color:#FFFFFF;
  font-size:31px; line-height:1.04; text-transform:uppercase; margin:8px 0 0;}
a.mf-lead:hover .mf-title, a.mf-lead:focus-visible .mf-title{
  text-decoration:underline; text-decoration-color:var(--gold);
  text-decoration-thickness:3px; text-underline-offset:5px;}
.mf-lead--type{background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:26px 22px;}
.mf-lead--type .mf-lead__body{padding:0;}

/* ---------- card grids (Latest band + Week module tiles + Late) ---- */
.d-issue{padding:0;}
.d-issue .d-sec-head{display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; border-top:1px solid var(--line); padding-top:16px; margin-bottom:16px;}
.stage .d-issue .d-sec-head h3{font-family:var(--marathon); font-weight:400; color:#C7D0DA;
  font-size:24px; letter-spacing:.05em; text-transform:uppercase; margin:0;}
.d-issue .d-sec-head span{font-family:var(--inter); color:var(--dim); font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;}
.d-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px 12px;}
.d-card{display:block; background:transparent; text-decoration:none; color:inherit;}
.d-card .th{aspect-ratio:16/10; overflow:hidden; border-radius:12px; background:var(--card);}
.d-card .th img{width:100%; height:100%; object-fit:cover;}
.d-card .cb{padding:10px 2px 0;}
.d-card .ck{font-family:var(--marathon); color:var(--gold); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; line-height:1.5;}
.stage .d-card h4{font-family:var(--anton); font-weight:400; color:#FFFFFF; font-size:16px;
  line-height:1.16; text-transform:uppercase; margin:5px 0 0;}
.d-card:hover h4{box-shadow:inset 0 -2px 0 var(--gold);}
.d-card p{font-family:var(--inter); color:var(--soft); 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:6px 2px;}
.stage .d-card--spot .nm{font-family:var(--anton); font-weight:400; color:#FFFFFF;
  font-size:29px; line-height:1.05; text-transform:uppercase; margin-top:8px;}
.d-card--spot .nm .r{color:var(--gold);}

/* ---------- The Week in Music — one module, contents shown -------- */
.mf-week{background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:22px 18px;}
.mf-week__head{border-bottom:1px solid var(--line-soft); padding-bottom:16px; margin-bottom:18px;}
.stage .mf-week__title{font-family:var(--anton); font-weight:400; color:#FFFFFF;
  font-size:34px; line-height:1.02; text-transform:uppercase; margin:8px 0 0;}
.mf-week__sub{font-family:var(--inter); color:var(--soft); font-size:15px;
  line-height:1.55; margin-top:9px; max-width:52ch;}
.mf-week__stamp{font-family:var(--inter); color:var(--dim); font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;}
.mf-week .d-card .th{background:var(--card2);}

/* ---------- featured story cards ---------- */
.mf-features__grid{display:grid; grid-template-columns:1fr; gap:26px;}
.mf-card{display:block; text-decoration:none; color:inherit;}
.mf-card__media{aspect-ratio:16/9; overflow:hidden; border-radius:12px; background:var(--card);}
.mf-card__media img{width:100%; height:100%; object-fit:cover;}
.mf-card__body{padding:14px 2px 0;}
.stage .mf-card__title{font-family:var(--anton); font-weight:400; color:#FFFFFF;
  font-size:25px; line-height:1.06; text-transform:uppercase; margin:7px 0 0;}
a.mf-card:hover .mf-card__title{box-shadow:inset 0 -3px 0 var(--gold);}
.mf-card--type{background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:24px 20px;}
.mf-card--type .mf-card__body{padding:0;}
.mf-closing{margin-top:34px;}

/* ---------- scoreboard — The Chart crossover ---------- */
.d-score{background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:22px 18px;}
.d-score .s-kick{font-family:var(--inter); color:var(--dim); font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; margin-bottom:8px;}
.stage .d-score .s-title{font-family:var(--marathon); font-weight:400; color:#C7D0DA;
  font-size:26px; letter-spacing:.05em; text-transform:uppercase; margin:0 0 6px;}
.d-score .s-title .r{color:var(--gold);}
.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 a.s-sleeve-link{display:block; flex:none; line-height:0;}
.d-score .s-sleeve{width:74px; height:74px; flex:none; object-fit:cover;
  border-radius:12px; background:var(--card2);}
.d-score .s-bignum{font-family:var(--anton); font-size:56px; line-height:1;
  color:var(--gold); flex:none;}
.d-score .s-fmain{min-width:0;}
.d-score .s-t{font-family:var(--anton); font-weight:400; color:#FFFFFF;
  font-size:19px; text-transform:uppercase; line-height:1.12;}
.d-score .s-first .s-t{font-size:21px;}
.d-score .s-a{font-family:var(--inter); color:var(--soft); font-size:14.5px; margin-top:2px;}
.d-score .s-dur{font-family:var(--inter); margin-left:auto; color:var(--dim);
  font-size:13.5px; flex:none;}
.d-score .s-row{display:flex; align-items:baseline; gap:14px; padding:11px 0;}
.d-score .s-row + .s-row{box-shadow:inset 0 1px 0 var(--line-soft);}
.d-score .s-num{font-family:var(--anton); font-size:25px; color:var(--soft);
  width:30px; flex:none; text-align:right;}
.d-score .s-album{font-family:var(--inter); margin-top:16px; padding-top:14px;
  box-shadow:inset 0 1px 0 var(--line-soft); color:var(--soft); font-size:15px; line-height:1.55;}
.d-score .s-album b{color:#FFFFFF; font-weight:600;}
.d-score .src{margin-top:12px;}
.d-score a.s-tl, .d-score a.s-al, .d-score .s-album a{color:inherit; text-decoration:none;}
.d-score a.s-tl:hover, .d-score a.s-tl:focus-visible,
.d-score a.s-al:hover, .d-score a.s-al:focus-visible,
.d-score .s-album a:hover, .d-score .s-album a:focus-visible{
  color:var(--gold); text-decoration:underline; text-underline-offset:3px;}

/* ---------- verse of the week — editorial card ---------- */
.mf-verse{display:block; text-decoration:none; color:inherit;
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:18px; }
.mf-verse__media{aspect-ratio:16/10; overflow:hidden; border-radius:12px; background:var(--card2);}
.mf-verse__media img{width:100%; height:100%; object-fit:cover;}
.mf-verse__body{padding:16px 2px 0;}
.mf-verse--type .mf-verse__body{padding:0;}
.stage .mf-verse .v-bars{font-family:var(--anton); font-weight:400; color:#FFFFFF;
  font-size:24px; line-height:1.28; text-transform:uppercase; margin:10px 0 0;}
.mf-verse .v-bars .r{color:var(--gold);}
.mf-verse .v-credit{font-family:var(--inter); color:var(--soft); font-size:12.5px;
  letter-spacing:.13em; text-transform:uppercase; margin-top:12px; line-height:1.7;}
a.mf-verse:hover .v-bars{box-shadow:inset 0 -3px 0 var(--gold);}

/* ---------- end card — told straight, three working doors --------- */
.d-end{border-top:1px solid var(--line); padding:30px 0 6px; margin-top:40px;}
.d-end .ek{font-family:var(--marathon); color:var(--gold); font-size:12px;
  letter-spacing:.26em; text-transform:uppercase;}
.stage .d-end .et{font-family:var(--anton); font-weight:400; color:#FFFFFF;
  font-size:31px; line-height:1.06; text-transform:uppercase; margin-top:10px;}
.d-end .esub{font-family:var(--inter); color:var(--soft); font-size:15.5px;
  line-height:1.55; margin-top:12px; max-width:58ch;}
.d-doors{display:grid; gap:10px; margin-top:22px;}
.d-door{display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:15px 16px; text-decoration:none; color:var(--ink); text-align:left;}
.d-door:hover{border-color:var(--gold);}
.d-door .dl{display:block; font-family:var(--anton); font-weight:400; font-size:16px;
  letter-spacing:.06em; text-transform:uppercase; color:#FFFFFF;}
.d-door .ds{display:block; font-family:var(--inter); color:var(--soft);
  font-size:12.5px; margin-top:3px;}
.d-door .arr{color:var(--gold); font-size:18px; flex:none;}
.d-end .credits{font-family:var(--inter); color:var(--dim); font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; line-height:2; margin-top:30px;}
.d-end .d-lyr{margin-top:18px; color:var(--soft); font-size:13.5px;}
.d-end .d-lyr a{color:#FFFFFF; text-transform:uppercase; letter-spacing:.08em; text-decoration:none;}
.d-end .d-lyr a:hover, .d-end .d-lyr a:focus-visible{
  color:var(--gold); text-decoration:underline; text-underline-offset:3px;}

/* link cascade repair (carried from the retired sheet): the d3 base
   sheet's global link rules outrank page-level text-decoration/color —
   restated at stage scope so the cards' own design wins. */
.stage a.mf-lead, .stage a.mf-lead:hover,
.stage a.mf-card, .stage a.mf-card:hover,
.stage a.mf-verse, .stage a.mf-verse:hover,
.stage a.d-card, .stage a.d-card:hover,
.stage a.d-door, .stage a.d-door:hover{text-decoration:none; color:inherit;}
.stage a.d-door{color:var(--ink);}

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

/* ================= LAPTOP COMPOSITION (>=1024px) =================
   Designed for the wide canvas, not stretched from the phone stack:
   the lead splits media/body, grids go four-up and two-up, the chart
   reads in two columns, the verse splits. */
@media (min-width:1024px){
  .stage{padding:26px 32px 12px;}
  section{margin-top:44px;}
  .mf-leadwrap{margin-top:4px;}

  .mf-lead{display:grid; grid-template-columns:7fr 5fr; gap:30px; align-items:center;}
  .mf-lead__media{aspect-ratio:16/11;}
  .mf-lead__body{padding:0;}
  .stage .mf-lead .mf-title{font-size:45px; line-height:1.02;}
  .mf-lead .dek{font-size:17px;}
  .mf-lead--type{padding:36px 34px;}

  .d-grid{grid-template-columns:repeat(4,1fr); gap:20px 16px;}
  .stage .d-card h4{font-size:18px;}
  .stage .d-issue .d-sec-head h3{font-size:29px;}
  .stage .mf-sec-head h2{font-size:29px;}

  .mf-week{padding:30px 28px;}
  .mf-week__head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px;}
  .stage .mf-week__title{font-size:46px;}
  .mf-week__sub{font-size:16px;}

  .mf-features__grid{grid-template-columns:1fr 1fr; gap:28px;}
  .stage .mf-card__title{font-size:29px;}
  .mf-card--wide{display:grid; grid-template-columns:5fr 7fr; gap:26px; align-items:center;}
  .mf-card--wide .mf-card__body{padding:0;}
  .mf-card--wide .mf-card__media{aspect-ratio:4/3;}

  .d-score{padding:28px;}
  .d-score .s-cols{display:grid; grid-template-columns:1fr 1fr; gap:0 56px; align-items:start;}
  .d-score .s-first{border-top:none; padding-top:4px;}
  .d-score .s-sleeve{width:112px; height:112px;}
  .d-score .s-bignum{font-size:80px;}
  .d-score .s-first .s-t{font-size:25px;}
  .d-score .s-row:first-child{padding-top:4px;}

  .mf-verse{display:grid; grid-template-columns:5fr 7fr; gap:26px; align-items:center; padding:24px;}
  .mf-verse__media{aspect-ratio:4/3;}
  .mf-verse__body{padding:0;}
  .stage .mf-verse .v-bars{font-size:31px;}
  .mf-verse--type{display:block; padding:30px 28px;}

  .stage .d-end .et{font-size:42px;}
  .d-doors{grid-template-columns:repeat(3,1fr); gap:14px;}
}

/* cascade + wrap trims (mf2): the d3 base sheet paints main headings/links
   gold at (0,1,2); title rules above are restated at stage scope to win.
   Phone section heads take a smaller step so they hold one line. */
@media (max-width:1023px){
  .stage .d-issue .d-sec-head h3{font-size:20px;}
  .stage .mf-sec-head h2{font-size:20px;}
  .stage .d-score .s-title{font-size:22px;}
}

/* Thumbnail headlines (James, 2026-11-12): the site-wide Newsreader Bold
   treatment, applied to the Music front's own story-headline classes —
   they are not in the shared sheet's selector list, so the front's own
   sheet carries them. Sizes and colours stay with the base rules above. */
.stage .mf-lead .mf-title,
.stage .mf-week__title,
.stage .mf-card__title,
.stage .d-card h4,
.stage .d-card--spot .nm{font-family:'PV Newsreader',Georgia,'Times New Roman',serif;font-weight:700;font-style:normal;text-transform:none;letter-spacing:-.005em;line-height:1.18;font-variant:normal}