/* Music Offtrack — soft white editorial, midnight navy, royal violet, berry pink, warm gold.
   Fonts: Fraunces and Inter (SIL OFL 1.1, see fonts/*-OFL.txt). */
@font-face{font-family:"MO Serif";src:url("fonts/Fraunces-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"MO Text";src:url("fonts/Inter-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"MO Text";src:url("fonts/Inter-SemiBold.woff") format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"MO Text";src:url("fonts/Inter-Bold.woff") format("woff");font-weight:700 900;font-style:normal;font-display:swap}

:root{
  --font-display:"MO Serif",Georgia,"Times New Roman",serif;
  --font-body:"MO Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --head-weight:600;--head-tracking:-.015em;--head-transform:none;
  --section-tracking:-.01em;--section-transform:none;--rule-width:1px;
  --brand-weight:600;--art-weight:600;
  --radius-btn:999px;--radius-pill:999px;--radius-field:10px;--radius-panel:14px;--radius-media:10px;
}
html[data-mode="light"]{
  color-scheme:light;
  --bg:#faf8f5;--surface:#ffffff;--surface-2:#f1edf6;--field-bg:#ffffff;
  --line:#e8e3ee;--line-strong:#cdc5da;
  --text:#141b3d;--muted:#555b79;
  --accent:#5b2bd6;--accent-ink:#ffffff;--link:#5022c4;--kicker:#5b2bd6;--focus:#5b2bd6;
  --trend:#c2185b;--trend-ink:#ffffff;--rank:#c2185b;--rule:#141b3d;--gold:#a87b2a;
  --topbar-bg:#0e1433;--topbar-text:#cfd3ec;--mast-bg:#faf8f5;
  --nav-bg:#141b3d;--nav-text:#e9eaf6;--nav-hover:#ffb3d1;--nav-line:#141b3d;
  --footer-bg:#141b3d;--footer-text:#ffffff;--footer-muted:#c3c7e2;--footer-line:#2a3263;
  --house-bg:linear-gradient(120deg,#ffffff,#f3eefc);
  --art-line:rgba(91,43,214,.2);--art-label:radial-gradient(circle,#faf8f5 0 18%,#c79a45 19% 100%);--art-text:rgba(20,27,61,.82);
  --cover-bg:linear-gradient(165deg,#ffffff 0%,#efe8fb 70%,#fbe3ee 100%);--cover-text:#141b3d;--cover-brand:#5b2bd6;--cover-line:#e3dcef;
  --rail-bg:#ffffff;
}
html[data-mode="dark"]{
  color-scheme:dark;
  --bg:#0b0f2a;--surface:#121739;--surface-2:#1a2050;--field-bg:#0e1233;
  --line:#252b5a;--line-strong:#3b4279;
  --text:#f3f2fb;--muted:#aeb2d4;
  --accent:#a98bff;--accent-ink:#130a33;--link:#bba4ff;--kicker:#bba4ff;--focus:#c7b5ff;
  --trend:#ff5c9d;--trend-ink:#1d0412;--rank:#ff79ae;--rule:#3b4279;--gold:#dcb46c;
  --topbar-bg:#060920;--topbar-text:#a9aed3;--mast-bg:#0b0f2a;
  --nav-bg:#060920;--nav-text:#e3e4f6;--nav-hover:#ff8fbd;--nav-line:#1b2150;
  --footer-bg:#060920;--footer-text:#ffffff;--footer-muted:#aeb2d4;--footer-line:#1b2150;
  --house-bg:linear-gradient(120deg,#151a42,#1d1650);
  --art-line:rgba(169,139,255,.28);--art-label:radial-gradient(circle,#0b0f2a 0 18%,#dcb46c 19% 100%);--art-text:rgba(243,242,251,.9);
  --cover-bg:linear-gradient(165deg,#1a2050 0%,#140f3a 60%,#3a1239 100%);--cover-text:#f3f2fb;--cover-brand:#c7b5ff;--cover-line:#2f3570;
  --rail-bg:#121739;
}
.nav .nav-cta{background:#6d3ef0;color:#fff}
html[data-mode="dark"] .nav .nav-cta{background:#a98bff;color:#130a33}

/* Section artwork used when a story has no photo yet */
html[data-mode="light"] .art-news{--art-bg:linear-gradient(135deg,#efe7ff 0%,#fbe6ef 60%,#fff6e8 100%)}
html[data-mode="light"] .art-artists{--art-bg:linear-gradient(150deg,#fde3ee 0%,#f2eaff 70%)}
html[data-mode="light"] .art-genres{--art-bg:linear-gradient(120deg,#e6ecff 0%,#efe7ff 50%,#ffe8f1 100%)}
html[data-mode="light"] .art-tours{--art-bg:linear-gradient(160deg,#fff1df 0%,#fde3ee 55%,#ece4ff 100%)}
html[data-mode="light"] .art-business{--art-bg:linear-gradient(140deg,#e8eaf6 0%,#f4efff 60%,#fff4e4 100%)}
html[data-mode="light"] .art-magazine{--art-bg:linear-gradient(150deg,#efe7ff 0%,#ffffff 50%,#fbe1ec 100%)}
html[data-mode="dark"] .media--art{--art-bg:linear-gradient(140deg,#1c1750 0%,#121739 55%,#3a1440 100%)}
html[data-mode="dark"] .art-tours,html[data-mode="dark"] .art-artists{--art-bg:linear-gradient(160deg,#3a1440 0%,#161a46 60%,#0b0f2a 100%)}

/* Masthead: serif "Music" with violet spaced OFFTRACK and a thin warm-gold rule */
.mast-inner{grid-template-columns:auto 1fr auto;padding:1.6rem 0 1.3rem}
.brand{grid-column:1;flex-direction:row;align-items:baseline;gap:.9rem}
.brand-top{font-size:clamp(2.6rem,6vw,4.4rem);letter-spacing:-.035em;line-height:.9}
.brand-bottom{font-family:var(--font-body);font-weight:800;font-size:clamp(.72rem,1.3vw,.9rem);letter-spacing:.42em;color:var(--accent)}
.brand-tagline{grid-column:2;justify-self:start;padding-left:1.4rem;margin-left:.2rem;border-left:1px solid var(--gold);color:var(--muted)}
.mast{border-bottom:1px solid var(--gold)}
.brand--footer{flex-direction:column;align-items:flex-start;gap:.35rem}
.brand--footer .brand-top{font-size:2.4rem}
.brand--footer .brand-bottom{color:#c7b5ff}
.nav a{letter-spacing:.1em}
.nav a[aria-current="page"]{border-bottom-color:#ff5c9d}

/* Section headings: navy hairline with a short violet bar */
.section-head{position:relative;padding-top:1rem}
.section-head::before{content:"";position:absolute;top:-2px;left:0;width:3.2rem;height:3px;background:var(--accent);border-radius:3px}
.section-title{font-size:clamp(1.6rem,2.8vw,2.2rem)}
.section-more{color:var(--accent)}
.rail-title{font-family:var(--font-body);font-weight:800;color:var(--trend);border-bottom-color:var(--trend)}

/* Front page: text-led top stories | cover story | Trending Now */
.front{grid-template-columns:minmax(0,1fr) minmax(0,2.15fr) minmax(0,1fr);grid-template-areas:"side lead rail";gap:2rem;margin-top:.4rem}
.front-lead{grid-area:lead}
.front-side{grid-area:side;gap:0}
.front-rail{grid-area:rail}
.front-side .card--feature{padding-block:1.1rem;border-top:1px solid var(--line)}
.front-side .card--feature:first-child{border-top:0;padding-top:0}
.front-side .card--feature .media{aspect-ratio:3/2}
.front-side .card--feature:not(:first-child) .media{display:none}
.front-side .card--feature:not(:first-child) .card-title{font-size:1.28rem}
.front-side .card--feature .card-title{font-size:1.18rem}
.card--lead .media{aspect-ratio:3/2}
.card--lead .card-title{font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.05}
.card--lead .card-body{padding-top:1.1rem}
.rail{border:1px solid var(--line);border-radius:var(--radius-panel);padding:1.2rem 1.25rem}
.rank-num{font-family:var(--font-display);font-weight:600;font-size:2.1rem}
.flag-trending{font-weight:700}
.card--grid,.card--feature{background:transparent}
.media{border-radius:var(--radius-media)}
.card--compact .media,.card--list .media{border-radius:8px}

/* Gold restrained: drop caps, covers, story rule */
.story-body>p:first-child::first-letter{color:var(--accent);font-weight:600}
.story-head{border-bottom:1px solid var(--gold);padding-bottom:1.4rem}
.cover{border-radius:12px}
.cover-brand{font-family:var(--font-display);font-weight:600;text-transform:none;font-size:1.7rem}
.cover-brand span:last-child{font-family:var(--font-body);font-weight:800;font-size:.6rem;letter-spacing:.4em;color:var(--gold);margin-top:.3rem}
.cover::after{content:"";position:absolute;left:1.2rem;right:1.2rem;bottom:.85rem;height:1px;background:var(--gold);opacity:.6}
.trend-strip{border-bottom:0;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.45rem .5rem .45rem .45rem}
.trend-items a:hover{color:var(--trend)}
.ad-placeholder{border-radius:var(--radius-panel)}
.chip[aria-current="true"],.chip:hover{background:var(--trend);border-color:var(--trend);color:var(--trend-ink)}

@media (max-width:1080px){
  .front{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-template-areas:"lead side" "rail rail"}
}
@media (max-width:820px){
  .mast-inner{grid-template-columns:1fr auto}
  .brand{flex-direction:column;gap:.15rem}
  .brand-top{font-size:2.3rem}
  .brand-tagline{display:none}
  .front{grid-template-columns:1fr;grid-template-areas:"lead" "side" "rail"}
  .front-side .card--feature{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:.9rem}
  .front-side .card--feature:not(:first-child) .media{display:block}
  .front-side .card--feature:not(:first-child) .card-title{font-size:1.02rem}
  .front-side .card--feature .media{aspect-ratio:4/3}
  .front-side .card--feature .card-body{padding-top:0}
  .front-side .card--feature .card-title{font-size:1.02rem}
  .front-side .card--feature .art-word{font-size:1rem;padding:.4rem .5rem}
  .trend-strip{border-radius:12px}
}