/* Hip Hop Offtrack — cinematic black & gold. Fonts: Inter / Inter Display (SIL OFL 1.1, see fonts/Inter-OFL.txt). */
@font-face{font-family:"HHO Display";src:url("fonts/InterDisplay-Black.woff") format("woff");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"HHO Display";src:url("fonts/InterDisplay-ExtraBold.woff") format("woff");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"HHO Text";src:url("fonts/Inter-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"HHO Text";src:url("fonts/Inter-SemiBold.woff") format("woff");font-weight:600 700;font-style:normal;font-display:swap}

:root{
  --font-display:"HHO Display","Arial Black",Impact,system-ui,sans-serif;
  --font-body:"HHO Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --head-weight:800;--head-tracking:-.02em;--head-transform:none;
  --section-tracking:.06em;--section-transform:uppercase;
  --radius-btn:2px;--radius-pill:2px;--radius-panel:2px;--radius-media:0;
  --gold-grad:linear-gradient(100deg,#f7e3a1 0%,#e2b85a 38%,#b8862b 70%,#f0d58a 100%);
}
html[data-mode="dark"]{
  color-scheme:dark;
  --bg:#0a0a0b;--surface:#131315;--surface-2:#1b1b1f;--field-bg:#0d0d0f;
  --line:#26262b;--line-strong:#3c3c43;
  --text:#f4f0e6;--muted:#aaa497;
  --accent:#ddb052;--accent-ink:#140f04;--link:#e6bf6a;--kicker:#e2b85a;--focus:#f1cf7d;
  --trend:#ddb052;--trend-ink:#140f04;--rank:#ddb052;--rule:#ddb052;
  --topbar-bg:#000;--topbar-text:#b8b1a2;--mast-bg:#0a0a0b;
  --nav-bg:rgba(8,8,9,.94);--nav-text:#ece7db;--nav-hover:#e8c066;--nav-line:#26262b;
  --footer-bg:#050506;--footer-text:#f4f0e6;--footer-muted:#a39d90;--footer-line:#1f1f23;
  --house-bg:linear-gradient(120deg,#141310,#0d0d0f 60%);
  --art-line:rgba(221,176,82,.32);--art-label:radial-gradient(circle,#0a0a0b 0 18%,#c99a3c 19% 100%);--art-text:rgba(244,240,230,.92);
  --cover-bg:linear-gradient(165deg,#1d1912 0%,#0c0c0d 70%);--cover-text:#f4f0e6;--cover-line:#3a3222;
}
html[data-mode="light"]{
  color-scheme:light;
  --bg:#f6f3ec;--surface:#fffdf8;--surface-2:#ece6d8;--field-bg:#fffdf8;
  --line:#e2dccd;--line-strong:#c9c0aa;
  --text:#121212;--muted:#5a5446;
  --accent:#8a6410;--accent-ink:#fffaf0;--link:#7a560b;--kicker:#7a560b;--focus:#8a6410;
  --trend:#121212;--trend-ink:#f1cd76;--rank:#8a6410;--rule:#121212;
  --topbar-bg:#000;--topbar-text:#c9c2b2;--mast-bg:#f6f3ec;
  --nav-bg:rgba(10,10,11,.96);--nav-text:#f4f0e6;--nav-hover:#e8c066;--nav-line:#000;
  --footer-bg:#0a0a0b;--footer-text:#f4f0e6;--footer-muted:#aaa497;--footer-line:#222;
  --house-bg:linear-gradient(120deg,#fffdf8,#f1ead9);
  --art-line:rgba(138,100,16,.3);--art-label:radial-gradient(circle,#f6f3ec 0 18%,#b88a2c 19% 100%);--art-text:rgba(18,18,18,.88);
  --cover-bg:linear-gradient(165deg,#ffffff 0%,#efe6d2 80%);--cover-text:#121212;--cover-line:#d8ccb0;
}
/* The navigation stays black in both modes, so its call-to-action is always gold. */
.nav .nav-cta{background:#ddb052;color:#140f04}

/* Section artwork used when a story has no photo yet */
html[data-mode="dark"] .art-news{--art-bg:radial-gradient(120% 90% at 85% 40%,#3a2c10 0%,#141210 55%,#0a0a0b 100%)}
html[data-mode="dark"] .art-artists{--art-bg:radial-gradient(120% 90% at 80% 30%,#40311a 0%,#17130c 55%,#0a0a0b 100%)}
html[data-mode="dark"] .art-genres{--art-bg:linear-gradient(135deg,#0a0a0b 0%,#221a0b 55%,#5a4314 100%)}
html[data-mode="dark"] .art-tours{--art-bg:radial-gradient(140% 100% at 20% 100%,#4b3912 0%,#16120b 50%,#0a0a0b 100%)}
html[data-mode="dark"] .art-business{--art-bg:linear-gradient(160deg,#16140f 0%,#0a0a0b 45%,#2e2310 100%)}
html[data-mode="dark"] .art-magazine{--art-bg:radial-gradient(110% 90% at 70% 20%,#5c4515 0%,#1a150c 50%,#0a0a0b 100%)}
html[data-mode="light"] .media--art{--art-bg:radial-gradient(120% 90% at 85% 40%,#f3dfa6 0%,#efe6d2 50%,#e4dac3 100%)}
html[data-mode="light"] .art-tours,html[data-mode="light"] .art-business{--art-bg:linear-gradient(150deg,#ece3cd 0%,#f6f0e2 50%,#e3c983 100%)}

/* Masthead: towering HIP HOP, gold spaced OFFTRACK framed by hairlines */
.brand-top{font-size:clamp(2.6rem,7.4vw,5.6rem);letter-spacing:-.045em;text-transform:uppercase}
.brand-bottom{display:flex;align-items:center;gap:.9rem;margin-top:.45rem;font-weight:800;font-size:clamp(.8rem,1.6vw,1.05rem);letter-spacing:.62em;padding-left:.62em;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-bottom::before,.brand-bottom::after{content:"";width:clamp(1.5rem,6vw,4.5rem);height:1px;background:var(--gold-grad)}
html[data-mode="light"] .brand-bottom{background:linear-gradient(100deg,#7a560b,#a8791a,#6b4a07);-webkit-background-clip:text;background-clip:text}
.brand--footer .brand-top{font-size:2.2rem}
.brand--footer .brand-bottom{font-size:.7rem}
.brand--footer .brand-bottom::before{display:none}
.mast{border-bottom:1px solid var(--line)}
.nav{-webkit-backdrop-filter:saturate(140%) blur(10px);backdrop-filter:saturate(140%) blur(10px)}
.section-head{--rule-width:2px}
.section-title::before{content:"";display:inline-block;width:.55em;height:.55em;margin-right:.55em;background:var(--gold-grad);transform:rotate(45deg) translateY(-.1em)}

/* Front page: full-width cinematic cover story, then three top stories beside the ranked rail */
.front{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"lead lead lead lead" "side side side rail"}
.front-lead{grid-area:lead}
.front-side{grid-area:side;grid-template-columns:repeat(3,minmax(0,1fr))}
.front-rail{grid-area:rail}
.card--lead{border:1px solid rgba(221,176,82,.28);background:#000}
.card--lead .media{aspect-ratio:21/9}
.card--lead .media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.95) 0%,rgba(0,0,0,.62) 34%,rgba(0,0,0,.12) 66%,transparent 100%);pointer-events:none}
.card--lead .card-body{position:absolute;left:0;bottom:0;right:0;padding:clamp(1.2rem,3.4vw,2.8rem);max-width:58rem;z-index:1}
.card--lead .card-title{text-transform:uppercase;font-weight:900;letter-spacing:-.03em;font-size:clamp(1.9rem,4.6vw,4rem);line-height:.96}
.card--lead .card-link,.card--lead .card-link:hover{color:#fff}
.card--lead .dek{color:rgba(255,255,255,.82)}
.card--lead .meta{color:rgba(255,255,255,.7)}
.card--lead .kicker-link{color:#f0cb73}
.card--lead .art-word{align-self:flex-start;padding-top:1.4rem;font-size:clamp(3rem,10vw,8rem);opacity:.22}
.listing-main>.card--lead .media{aspect-ratio:16/9}
.rail{border:1px solid var(--line);padding:1.1rem 1.2rem;background:var(--surface)}
.rank-num{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-mode="light"] .rank-num{background:none;color:var(--rank)}
.card--feature .card-title{font-size:1.12rem}
.flag-trending{font-weight:800}

/* Magazine covers framed in gold */
.cover{border-color:var(--cover-line)}
.cover-brand{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-mode="light"] .cover-brand{background:none;color:#7a560b}
.cover-title{text-transform:uppercase;letter-spacing:-.02em}

/* Story pages */
.story-title{text-transform:uppercase;font-weight:900;letter-spacing:-.035em}
.story-body>p:first-child::first-letter{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-mode="light"] .story-body>p:first-child::first-letter{background:none;color:var(--accent)}
.page-title{text-transform:uppercase;font-weight:900;letter-spacing:-.035em}

@media (max-width:1080px){
  .front{grid-template-areas:"lead lead lead lead" "side side side side" "rail rail rail rail"}
}
@media (max-width:820px){
  .brand-top{font-size:clamp(1.9rem,9vw,2.6rem)}
  .brand-bottom{font-size:.62rem;margin-top:.3rem;letter-spacing:.5em}
  .brand-bottom::before{display:none}
  .brand-bottom::after{width:1.2rem}
  .card--lead .media{aspect-ratio:4/5}
  .listing-main>.card--lead .media{aspect-ratio:4/5}
}
@media (max-width:560px){
  .front{grid-template-columns:1fr;grid-template-areas:"lead" "side" "rail"}
  .front-side{grid-template-columns:1fr}
  .front-side .card--feature{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:.9rem;padding-block:.9rem;border-top:1px solid var(--line)}
  .front-side .card--feature:first-child{border-top:0}
  .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:1rem}
  .front-side .card--feature .art-word{font-size:1rem;padding:.4rem .5rem}
}