/* Superbeats.com clean separated-asset build v1.00.01 */
:root{
  --black:#020202;
  --near-black:#080808;
  --panel:#0d0d0b;
  --panel-2:#11100d;
  --red:#c90b12;
  --red-bright:#e20d16;
  --cream:#efe5cc;
  --cream-2:#d9ceb3;
  --gold:#d8a91e;
  --muted:#b8b3a4;
  --line:rgba(255,255,255,.12);
  --line-red:rgba(201,11,18,.72);
  --shadow:0 22px 60px rgba(0,0,0,.72);
  --header-h:112px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0;
  color:#fff;
  background:var(--black);
  font-family:Inter,Arial,sans-serif;
  line-height:1.35;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.05), transparent 16rem),
    radial-gradient(circle at 83% 14%, rgba(180,0,0,.10), transparent 24rem),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px);
  mix-blend-mode:screen;
  opacity:.38;
  z-index:10;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button,input{font:inherit}
.skip-link{
  position:absolute;left:16px;top:12px;z-index:999;
  transform:translateY(-140%);
  background:#fff;color:#000;padding:10px 14px;border-radius:4px;font-weight:800;
}
.skip-link:focus{transform:translateY(0)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:linear-gradient(180deg,#050505 0%,#030303 74%,rgba(3,3,3,.96) 100%);
  border-bottom:2px solid var(--red);
  box-shadow:0 16px 28px rgba(0,0,0,.56);
}
.header-inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(300px,510px) 1fr;
  min-height:var(--header-h);
  max-width:1920px;
  margin:0 auto;
}
.brand{
  position:relative;
  display:flex;
  align-items:flex-start;
  padding:6px 0 6px 32px;
  min-height:var(--header-h);
  background:#050505;
  isolation:isolate;
}
.brand::after{
  content:"";
  position:absolute;
  top:0;right:-76px;bottom:0;
  width:130px;
  background:linear-gradient(106deg,#050505 0 58%,transparent 59%);
  border-right:1px solid rgba(255,255,255,.23);
  transform:skewX(-16deg);
  transform-origin:top right;
  z-index:-1;
}
.brand img{
  width:min(390px,27vw);
  min-width:315px;
  margin-top:-1px;
  filter:drop-shadow(0 4px 2px rgba(0,0,0,.75)) drop-shadow(0 0 8px rgba(255,255,255,.09));
}
.header-right{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:40px 1fr;
  align-items:center;
  column-gap:18px;
  padding:6px 32px 14px 78px;
}
.utility{
  grid-column:1 / -1;
  justify-self:end;
  display:flex;
  align-items:center;
  gap:14px;
  color:#eee7d9;
  font:700 12px/1 Inter,Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.045em;
}
.utility a:hover,.primary-nav a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:6px}
.primary-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:26px;
  min-width:0;
}
.primary-nav a{
  position:relative;
  color:#efe8d8;
  text-transform:uppercase;
  font:400 20px/1 Bebas Neue,Impact,sans-serif;
  letter-spacing:.045em;
  padding:16px 0 15px;
  white-space:nowrap;
}
.primary-nav a[aria-current="page"]::after,
.primary-nav a:hover::after{
  content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;background:var(--red-bright);
}
.search-form{
  display:flex;
  width:260px;
  height:46px;
  background:#201d1d;
  border:1px solid rgba(255,255,255,.1);
}
.search-form input{
  min-width:0;flex:1;border:0;background:transparent;color:#fff;padding:0 14px;font-size:14px;
}
.search-form input::placeholder{color:#bcb3aa;opacity:1}
.search-form button{
  width:52px;border:0;background:var(--red);color:#fff;display:grid;place-items:center;cursor:pointer;
}
.search-form svg{width:21px;height:21px;fill:currentColor}
.menu-toggle{display:none}
.hero{
  position:relative;
  min-height:330px;
  max-width:1920px;
  margin:0 auto;
  overflow:hidden;
  background:#050505;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hero-bg{
  position:absolute;
  inset:0 0 0 34%;
  background-image:url("img/hero-boombox-scene.webp");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  filter:contrast(1.08) saturate(.98) brightness(1.02);
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.54),rgba(0,0,0,.02) 21%,rgba(0,0,0,.02) 75%,rgba(0,0,0,.48)),
    linear-gradient(0deg,rgba(0,0,0,.43),rgba(0,0,0,0) 34%);
}
.hero-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,#030303 0 31%,rgba(3,3,3,.82) 35%,rgba(3,3,3,.10) 51%,rgba(3,3,3,.06) 100%),
    radial-gradient(circle at 12% 50%,rgba(255,255,255,.065),transparent 17rem);
}
.hero-content{
  position:relative;
  width:min(650px,36%);
  min-height:330px;
  padding:64px 34px 32px 76px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  color:#fff;
}
.hero-crown{
  width:72px;
  margin:0 0 4px -18px;
  transform:rotate(-12deg);
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.85));
}
.hero-crown svg{display:block;width:100%;height:auto;overflow:visible}
.hero-crown path:first-child{
  fill:#d8a91e;
  stroke:#5f3b00;
  stroke-width:4;
  stroke-linejoin:round;
}
.hero-crown path:last-child{
  fill:none;
  stroke:#d8a91e;
  stroke-width:8;
  stroke-linecap:round;
}

.eyebrow{
  margin:0 0 9px;
  color:var(--gold);
  font:400 22px/1.1 Permanent Marker,cursive;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-shadow:0 2px 2px rgba(0,0,0,.8);
}
h1{
  position:relative;
  margin:0;
  max-width:610px;
  font:400 clamp(56px,5.25vw,88px)/.84 Anton,Impact,sans-serif;
  text-transform:uppercase;
  letter-spacing:.016em;
  text-shadow:0 4px 0 rgba(0,0,0,.72),0 0 18px rgba(0,0,0,.72);
}
h1 span{display:block;color:#f1ead7}
h1 span:last-child{color:var(--red-bright)}
.distressed-title{isolation:isolate}
.distressed-title::after{
  content:"";
  position:absolute;
  inset:-7px -10px -5px -8px;
  pointer-events:none;
  opacity:.42;
  mix-blend-mode:multiply;
  background-image:url("img/title-grunge.png");
  background-size:300px 180px;
  background-repeat:repeat;
  z-index:2;
}
.distressed-title span{position:relative;z-index:1}
.hero-copy{
  max-width:470px;
  margin:18px 0 20px;
  color:#fff;
  font-size:16px;
  line-height:1.3;
  text-shadow:0 2px 3px rgba(0,0,0,.9);
}
.hero-actions{display:flex;gap:28px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:42px;min-width:180px;padding:0 22px;
  border:2px solid rgba(255,255,255,.35);
  text-transform:uppercase;font:800 14px/1 Inter,Arial,sans-serif;letter-spacing:.08em;
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--red);border-color:var(--red);color:#fff}
.btn-outline{background:rgba(0,0,0,.42);border-color:rgba(255,255,255,.58);color:#fff}
.dashboard-grid{
  max-width:1920px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.08fr 1.06fr 1fr;
  gap:8px;
  padding:0 10px 8px;
  background:#050505;
}
.panel{
  background:linear-gradient(180deg,rgba(21,20,17,.98),rgba(8,8,7,.98));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow);
  min-width:0;
}
.panel-heading{
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 24px;
  background:linear-gradient(180deg,#cf1118,#a9090f);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.panel-heading h2{
  margin:0;
  color:#fff;
  font:400 23px/1 Bebas Neue,Impact,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.panel-heading a{
  color:var(--gold);
  font:800 11px/1 Inter,Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.track-list{list-style:none;margin:0;padding:13px 18px 13px 18px;display:grid;gap:8px}
.track-list li{
  display:grid;
  grid-template-columns:32px 43px minmax(118px,1fr) minmax(118px,.86fr) 58px 58px 30px;
  align-items:center;
  gap:10px;
  min-height:34px;
}
.play,.cart-btn,.arrow-btn{
  border:0;cursor:pointer;color:#fff;background:var(--red);display:grid;place-items:center;
}
.play{width:28px;height:28px;border-radius:50%;font-size:12px;padding-left:2px}
.cart-btn{width:28px;height:28px;border-radius:2px;background:#ac1116;color:#f5d7d7;font-weight:900}
.mini-cover{width:43px;height:33px;background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.18)}
.cover-a,.cover-e{background-image:url("img/cover-check-resume.webp")}
.cover-b{background-image:url("img/cover-classic-material.webp")}
.cover-c,.cover-d{background-image:url("img/cover-raw-uncut.webp")}
.track-meta strong{display:block;color:#fff;font-size:13px;line-height:1.05}
.track-meta span{display:block;color:#cfc5b7;font-size:11px;line-height:1.05;margin-top:2px}
.waveform{
  height:22px;opacity:.75;
  background:
    repeating-linear-gradient(90deg,transparent 0 5px,rgba(234,224,202,.62) 5px 7px,transparent 7px 10px),
    linear-gradient(0deg,transparent 0 35%,rgba(255,255,255,.18) 35% 63%,transparent 63%);
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent);
}
.bpm{color:#f1e9d7;font-size:11px;font-weight:800;white-space:nowrap}
.price{color:#f4e8c2;font-size:11px;white-space:nowrap}
.featured-panel .panel-heading{padding-left:20px}
.arrow-btn{width:26px;height:26px;background:transparent;color:#fff;font-size:36px;line-height:1}
.featured-covers{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  padding:14px 22px 15px;
  align-items:stretch;
}
.cover-card{
  position:relative;
  margin:0;
  border:1px solid rgba(255,255,255,.16);
  background:#000;
  aspect-ratio:1/1;
  overflow:hidden;
}
.cover-card img{width:100%;height:100%;object-fit:cover;filter:contrast(1.03) saturate(.95)}
.cover-card span{
  position:absolute;left:0;bottom:0;background:var(--gold);color:#111;padding:5px 10px;
  text-transform:uppercase;font:900 11px/1 Inter,Arial,sans-serif;letter-spacing:.08em;
}
.licensing-panel{display:flex;flex-direction:column}
.license-list{padding:18px 22px 8px;display:grid;gap:0;flex:1}
.license-item{
  display:grid;grid-template-columns:50px minmax(0,1fr) auto;gap:18px;align-items:center;
  padding:7px 0 10px;border-bottom:1px solid rgba(255,255,255,.09);
}
.license-item:last-child{border-bottom:0}
.license-icon{color:var(--cream);font-size:42px;line-height:1;text-align:center;font-family:Georgia,serif}
.license-item h3{margin:0 0 3px;color:#fff;text-transform:uppercase;font:800 15px/1 Inter,Arial,sans-serif;letter-spacing:.08em}
.license-item p{margin:0;color:#d3c8b9;font-size:13px;line-height:1.25}
.license-item strong{color:var(--gold);font:900 22px/1 Inter,Arial,sans-serif;white-space:nowrap}
.license-item strong span{display:inline-block;margin-right:8px;color:#f4e9d6;font-size:10px;text-transform:uppercase;vertical-align:middle}
.license-link{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:0 26px 16px;min-height:36px;
  border:1px solid var(--gold);color:#fff;background:rgba(0,0,0,.32);
  text-transform:uppercase;font:900 12px/1 Inter,Arial,sans-serif;letter-spacing:.09em;
}
.trust-strip{
  max-width:1920px;margin:0 auto;
  display:grid;grid-template-columns:repeat(5,1fr);
  background:#dfd2b6;color:#0a0806;
  border-top:1px solid rgba(255,255,255,.6);border-bottom:1px solid rgba(0,0,0,.45);
}
.trust-item{
  display:grid;grid-template-columns:54px 1fr;grid-template-rows:auto auto;column-gap:16px;align-items:center;
  min-height:58px;padding:8px 28px;border-right:1px solid rgba(0,0,0,.18);
}
.trust-item:last-child{border-right:0}
.trust-item span{grid-row:1/3;color:#b81219;font-size:42px;text-align:center;opacity:.9}
.trust-item strong{align-self:end;text-transform:uppercase;font:900 17px/1 Bebas Neue,Impact,sans-serif;letter-spacing:.08em}
.trust-item p{margin:2px 0 0;color:#1a1712;font-size:13px;line-height:1.12}
.site-footer{
  max-width:1920px;margin:0 auto;min-height:46px;padding:11px 70px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  background:#030303;color:#d8d0bf;
}
.site-footer p{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.site-footer .tagline{color:var(--gold);font:400 22px/1 Permanent Marker,cursive;text-transform:none;letter-spacing:.12em;text-align:center}
.socials{display:flex;justify-self:end;gap:10px}.socials a{width:26px;height:26px;border-radius:50%;background:#d8cfb7;color:#111;display:grid;place-items:center;font-weight:900;font-size:13px}.socials a:hover{background:#fff}
@media (max-width:1450px){
  :root{--header-h:106px}.brand img{width:350px;min-width:280px}.header-inner{grid-template-columns:minmax(280px,430px) 1fr}.header-right{padding-left:62px;padding-right:24px}.primary-nav{gap:20px}.primary-nav a{font-size:18px}.search-form{width:220px}.hero-content{padding-left:52px;width:38%}h1{font-size:clamp(54px,5.15vw,82px)}.hero-bg{inset-left:32%}.dashboard-grid{grid-template-columns:1.05fr 1.02fr 1fr}.track-list li{grid-template-columns:28px 38px minmax(106px,1fr) minmax(86px,.74fr) 50px 50px 26px;gap:8px}.trust-item{padding-inline:18px}.trust-item strong{font-size:15px}}
@media (max-width:1180px){
  :root{--header-h:auto}.header-inner{grid-template-columns:1fr}.brand{min-height:94px;padding:10px 24px;justify-content:center}.brand::after{display:none}.brand img{width:min(420px,82vw);min-width:0}.header-right{grid-template-columns:1fr auto;grid-template-rows:auto auto;padding:0 24px 16px;gap:10px}.utility{justify-self:center}.primary-nav{justify-content:center;flex-wrap:wrap;gap:18px}.search-form{width:240px}.hero{min-height:500px}.hero-bg{inset:0;background-position:center}.hero-overlay{background:linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.42) 55%,rgba(0,0,0,.28))}.hero-content{width:min(620px,72%);min-height:500px}.dashboard-grid{grid-template-columns:1fr 1fr}.licensing-panel{grid-column:1 / -1}.trust-strip{grid-template-columns:repeat(2,1fr)}.trust-item:last-child{grid-column:1 / -1}.site-footer{grid-template-columns:1fr;padding-inline:24px;text-align:center}.socials{justify-self:center}}
@media (max-width:780px){
  .site-header{position:sticky}.header-inner{display:block}.brand{min-height:82px;padding:8px 18px}.header-right{display:flex;align-items:center;justify-content:space-between;padding:10px 16px 12px;border-top:1px solid rgba(255,255,255,.09)}.utility{display:none}.menu-toggle{display:grid;place-items:center;width:46px;height:42px;background:#131313;border:1px solid rgba(255,255,255,.2);color:#fff}.menu-bars,.menu-bars::before,.menu-bars::after{display:block;width:22px;height:2px;background:#fff;position:relative}.menu-bars::before,.menu-bars::after{content:"";position:absolute;left:0}.menu-bars::before{top:-7px}.menu-bars::after{top:7px}.primary-nav{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;align-items:stretch;gap:0;background:#070707;border-top:1px solid var(--red);box-shadow:0 20px 30px rgba(0,0,0,.7)}.primary-nav.is-open{display:flex}.primary-nav a{padding:15px 24px;border-bottom:1px solid rgba(255,255,255,.08)}.primary-nav a[aria-current="page"]::after,.primary-nav a:hover::after{display:none}.search-form{width:min(52vw,260px);height:42px}.hero{min-height:600px}.hero-bg{inset:0;background-size:cover;background-position:62% center}.hero-overlay{background:linear-gradient(180deg,rgba(0,0,0,.82),rgba(0,0,0,.76) 42%,rgba(0,0,0,.38))}.hero-content{width:100%;min-height:600px;padding:38px 24px 260px;justify-content:flex-start}.eyebrow{font-size:20px}.hero-copy{font-size:16px}.hero-actions{gap:12px}.btn{min-width:0;flex:1 1 180px}.dashboard-grid{grid-template-columns:1fr;padding-inline:8px}.featured-covers{gap:10px;padding-inline:14px}.panel-heading{padding-inline:16px}.track-list{padding-inline:12px}.track-list li{grid-template-columns:28px 38px 1fr 52px 28px}.waveform,.bpm{display:none}.licensing-panel{grid-column:auto}.trust-strip{grid-template-columns:1fr}.trust-item{border-right:0;border-bottom:1px solid rgba(0,0,0,.18)}}
@media (max-width:480px){
  .hero-crown{width:58px;margin-left:-10px}
  .brand img{width:94vw}.header-right{gap:8px}.search-form{width:50vw}.search-form input{font-size:12px;padding-inline:10px}.search-form button{width:44px}.hero-content{padding-left:18px;padding-right:18px}.eyebrow{font-size:18px}h1{font-size:64px}.hero-copy{max-width:94%;font-size:15px}.featured-covers{grid-template-columns:1fr}.cover-card{aspect-ratio:1.18/1}.license-item{grid-template-columns:40px 1fr;gap:12px}.license-item strong{grid-column:2}.site-footer .tagline{font-size:18px}.track-list li{grid-template-columns:28px 34px 1fr 44px 26px}.price{font-size:10px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* =========================================================
   v1.00.01 HEADER SLANTED MOCKUP v5
   Focus: match approved mockup header plaque/nav line only.
   ========================================================= */
@media (min-width:1181px){
  :root{--header-h:132px;}

  .site-header{
    height:var(--header-h);
    overflow:visible;
    background:#030303;
    border-bottom:0;
    box-shadow:0 18px 30px rgba(0,0,0,.62);
  }

  .header-inner{
    max-width:1920px;
    min-height:var(--header-h);
    grid-template-columns:520px 1fr;
    overflow:visible;
  }

  .brand{
    min-height:var(--header-h);
    padding:16px 0 12px 34px;
    align-items:flex-start;
    background:linear-gradient(180deg,#050505 0%,#020202 100%);
    clip-path:polygon(0 0, 100% 0, calc(100% - 54px) 100%, 0 100%);
    z-index:4;
  }

  .brand::before{
    content:"";
    position:absolute;
    left:0;
    right:54px;
    bottom:0;
    height:1px;
    background:rgba(255,255,255,.25);
    box-shadow:0 -1px 0 rgba(0,0,0,.85);
    z-index:5;
  }

  .brand::after{
    content:"";
    position:absolute;
    right:34px;
    top:0;
    width:1px;
    height:134px;
    background:rgba(255,255,255,.25);
    transform:skewX(-14deg);
    transform-origin:top center;
    z-index:6;
  }

  .brand img{
    width:450px;
    min-width:0;
    margin-top:0;
    filter:drop-shadow(0 5px 4px rgba(0,0,0,.8));
  }

  .header-right{
    position:relative;
    display:grid;
    grid-template-columns:1fr 340px;
    grid-template-rows:42px 58px;
    align-items:start;
    column-gap:22px;
    padding:0 32px 0 0;
    z-index:3;
  }

  .header-right::before{
    content:"";
    position:absolute;
    left:0;
    right:32px;
    top:44px;
    height:1px;
    background:rgba(255,255,255,.27);
    z-index:0;
  }

  .header-right::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:92px;
    height:2px;
    background:var(--red);
    z-index:0;
  }

  .utility{
    grid-column:1 / -1;
    justify-self:end;
    align-self:start;
    height:34px;
    padding-top:12px;
    z-index:2;
  }

  .primary-nav{
    justify-content:flex-start;
    gap:25px;
    align-self:start;
    padding-left:62px;
    padding-top:30px;
    z-index:2;
  }

  .primary-nav a{
    font-size:20px;
    line-height:1;
    padding:0 0 22px;
  }

  .primary-nav a[aria-current="page"]::after,
  .primary-nav a:hover::after{
    bottom:14px;
    height:2px;
  }

  .search-form{
    width:330px;
    height:45px;
    align-self:start;
    margin-top:26px;
    z-index:2;
  }

  .hero{
    margin-top:0;
  }

  .hero-content{
    padding-top:10px;
  }
}

@media (min-width:1181px) and (max-width:1450px){
  :root{--header-h:124px;}
  .header-inner{grid-template-columns:455px 1fr;}
  .brand{padding-left:26px;clip-path:polygon(0 0, 100% 0, calc(100% - 46px) 100%, 0 100%);}
  .brand::before{right:46px;}
  .brand::after{right:29px;height:126px;}
  .brand img{width:392px;}
  .header-right{grid-template-columns:1fr 280px;padding-right:22px;}
  .header-right::before{right:22px;top:42px;}
  .header-right::after{top:86px;}
  .primary-nav{padding-left:44px;padding-top:28px;gap:20px;}
  .primary-nav a{font-size:18px;padding-bottom:18px;}
  .search-form{width:270px;height:42px;margin-top:24px;}
  .utility{padding-top:10px;}
}

/* =========================================================
   v1.00.01 HEADER SLANTED MOCKUP v6
   Focus: clean search placement and header line alignment.
   ========================================================= */
@media (min-width:1181px){
  .brand{
    padding-top:20px;
  }

  .brand img{
    width:438px;
    filter:drop-shadow(0 4px 3px rgba(0,0,0,.75));
  }

  .header-right{
    grid-template-columns:1fr 300px;
    grid-template-rows:40px 56px;
  }

  .header-right::before{
    top:42px;
    opacity:.82;
  }

  .header-right::after{
    top:96px;
  }

  .primary-nav{
    padding-left:58px;
    padding-top:26px;
  }

  .primary-nav a{
    padding-bottom:18px;
  }

  .primary-nav a[aria-current="page"]::after,
  .primary-nav a:hover::after{
    bottom:10px;
  }

  .search-form{
    width:300px;
    height:38px;
    margin-top:16px;
    background:#211f20;
    border-color:rgba(255,255,255,.11);
  }

  .search-form button{
    width:48px;
  }

  .search-form input{
    font-size:14px;
    padding:0 15px;
  }
}

@media (min-width:1181px) and (max-width:1450px){
  .brand{
    padding-top:18px;
  }

  .brand img{
    width:384px;
  }

  .header-right{
    grid-template-columns:1fr 245px;
  }

  .header-right::after{
    top:91px;
  }

  .primary-nav{
    padding-left:42px;
    padding-top:25px;
    gap:19px;
  }

  .primary-nav a{
    padding-bottom:16px;
  }

  .search-form{
    width:245px;
    height:36px;
    margin-top:15px;
  }

  .search-form button{
    width:44px;
  }
}

/* =========================================================
   v1.00.01 HEADER SLANTED MOCKUP v7
   Focus: visible correction pass after marked screenshot notes.
   - Pull logo down from top edge
   - Make plaque/cut read as one deliberate shape
   - Re-align top nav rule, red rule, nav, and search
   ========================================================= */
@media (min-width:1181px){
  :root{--header-h:175px;}

  .site-header{
    height:var(--header-h);
    background:#030303;
    border-bottom:0;
    overflow:visible;
  }

  .header-inner{
    grid-template-columns:520px 1fr;
    min-height:var(--header-h);
    overflow:visible;
  }

  .brand{
    min-height:var(--header-h);
    padding: 20px 0 0 1px;
    background:
      linear-gradient(180deg,#050505 0%,#020202 100%);
    clip-path:polygon(0 0, 100% 0, calc(100% - 74px) 100%, 0 100%);
    z-index:5;
  }

  .brand img{
    width:460px;
    max-width:none;
    min-width:0;
    margin-top:5;
    filter:drop-shadow(0 4px 3px rgba(0,0,0,.78));
  }

  .brand::before{
    content:"";
    position:absolute;
    left:0;
    right:72px;
    bottom:0;
    height:1px;
    background:rgba(255,255,255,.30);
    box-shadow:0 1px 0 rgba(0,0,0,.9);
    z-index:7;
  }

  .brand::after{
    content:"";
    position:absolute;
    right:42px;
    top:0;
    width:1px;
    height:142px;
    background:rgba(255,255,255,.30);
    transform:skewX(-15deg);
    transform-origin:top center;
    z-index:8;
  }

  .header-right{
    position:relative;
    display:grid;
    grid-template-columns:1fr 270px;
    grid-template-rows:43px 54px;
    column-gap:22px;
    align-items:start;
    margin-left:-36px;
    padding:0 26px 0 0;
    z-index:4;
  }

  .header-right::before{
    content:"";
    position:absolute;
    left:84px;
    right:26px;
    top:42px;
    height:1px;
    background:rgba(255,255,255,.34);
    z-index:0;
  }

  .header-right::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:88px;
    height:2px;
    background:var(--red);
    z-index:0;
  }

  .utility{
    grid-column:1 / -1;
    justify-self:end;
    height:30px;
    padding-top:42px;
    padding-right:0;
    z-index:2;
  }

  .primary-nav{
    justify-content:flex-start;
    align-self:start;
    gap:24px;
    padding-left:82px;
    padding-top:46px;
    z-index:2;
  }

  .primary-nav a{
    font-size:20px;
    line-height:1;
    padding:0 0 17px;
  }

  .primary-nav a[aria-current="page"]::after,
  .primary-nav a:hover::after{
    bottom:9px;
    height:2px;
  }

  .search-form{
    width:270px;
    height:38px;
    align-self:start;
    margin-top:38px;
    background:#201e1f;
    border:1px solid rgba(255,255,255,.12);
    z-index:2;
  }

  .search-form input{
    font-size:14px;
    padding:0 14px;
  }

  .search-form button{
    width:48px;
  }

  .hero{
    margin-top:0;
  }
}

@media (min-width:1181px) and (max-width:1450px){
  :root{--header-h:132px;}

  .header-inner{
    grid-template-columns:455px 1fr;
  }

  .brand{
    min-height:var(--header-h);
    padding:21px 0 0 28px;
    clip-path:polygon(0 0, 100% 0, calc(100% - 60px) 100%, 0 100%);
  }

  .brand img{
    width:370px;
  }

  .brand::before{
    right:60px;
  }

  .brand::after{
    right:35px;
    height:134px;
  }

  .header-right{
    grid-template-columns:1fr 232px;
    grid-template-rows:40px 52px;
    margin-left:-28px;
    padding-right:20px;
  }

  .header-right::before{
    left:66px;
    right:20px;
    top:39px;
  }

  .header-right::after{
    top:82px;
  }

  .primary-nav{
    padding-left:66px;
    padding-top:21px;
    gap:18px;
  }

  .primary-nav a{
    font-size:18px;
    padding-bottom:15px;
  }

  .primary-nav a[aria-current="page"]::after,
  .primary-nav a:hover::after{
    bottom:8px;
  }

  .search-form{
    width:232px;
    height:36px;
    margin-top:14px;
  }

  .search-form button{
    width:44px;
  }
}

/* =========================================================
   HEADER LINE CONNECTOR PATCH v8
   Goal: keep the approved header height/layout, but connect the
   gray plaque/nav ruler lines and the red nav rule to the slanted cut.
   No page redesign; desktop header-only correction.
   ========================================================= */
@media (min-width:1181px){
  .site-header{
    border-bottom:0;
  }

  .header-inner{
    isolation:isolate;
  }

  /* Turn off older separated line pieces so they cannot leave gaps. */
  .brand::before,
  .header-right::before,
  .header-right::after{
    display:none;
  }

  /* Single diagonal cut line: this is the anchor all ruler lines meet. */
  .brand::after{
    content:"";
    position:absolute;
    right:41px;
    top:0;
    width:1px;
    height:var(--header-h);
    display:block;
    background:linear-gradient(180deg,rgba(255,255,255,.46),rgba(255,255,255,.20));
    transform:skewX(-15deg);
    transform-origin:top center;
    z-index:8;
  }

  /* Gray top nav ruler and gray bottom plaque line, both aimed into the same cut. */
  .header-inner::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:6;
    background:
      linear-gradient(90deg,rgba(255,255,255,.34),rgba(255,255,255,.34)) 0 calc(var(--header-h) - 1px) / 448px 1px no-repeat,
      linear-gradient(90deg,rgba(255,255,255,.34),rgba(255,255,255,.34)) 498px 42px / calc(100% - 524px) 1px no-repeat;
  }

  /* Red rule begins at the diagonal cut intersection, not floating to the right. */
  .header-inner::after{
    content:"";
    position:absolute;
    left:475px;
    right:0;
    top:88px;
    height:2px;
    background:var(--red);
    pointer-events:none;
    z-index:6;
  }

  .primary-nav,
  .search-form,
  .utility,
  .brand img{
    position:relative;
    z-index:9;
  }
}

@media (min-width:1181px) and (max-width:1450px){
  .brand::after{
    right:35px;
  }

  .header-inner::before{
    background:
      linear-gradient(90deg,rgba(255,255,255,.34),rgba(255,255,255,.34)) 0 calc(var(--header-h) - 1px) / 395px 1px no-repeat,
      linear-gradient(90deg,rgba(255,255,255,.34),rgba(255,255,255,.34)) 438px 39px / calc(100% - 458px) 1px no-repeat;
  }

  .header-inner::after{
    left:417px;
    top:82px;
  }
}

/* =========================================================
   HEADER RULER LINE MICROFIX v9
   User approved the current header height. This only tightens
   the connected ruler lines around the slanted plaque cut.
   ========================================================= */
@media (min-width:1181px){
  .site-header{
    border-bottom:0;
  }

  /* Keep one visible diagonal seam and make every rule terminate at it. */
  .brand::after{
    right:43px;
    top:0;
    height:var(--header-h);
    width:1px;
    background:linear-gradient(180deg,rgba(255,255,255,.50),rgba(255,255,255,.22));
    transform:skewX(-15deg);
    z-index:12;
  }

  /* Re-draw only the gray rules: lower logo plaque rule + upper nav rule. */
  .header-inner::before{
    z-index:7;
    background:
      /* lower line under logo, ending at the slanted cut */
      linear-gradient(90deg,rgba(255,255,255,.34),rgba(255,255,255,.34)) 0 calc(var(--header-h) - 1px) / 452px 1px no-repeat,
      /* upper line above nav, beginning right at the slanted cut */
      linear-gradient(90deg,rgba(255,255,255,.34),rgba(255,255,255,.34)) 472px 42px / calc(100% - 498px) 1px no-repeat;
  }

  /* Red rule starts at the same slanted seam so it does not float. */
  .header-inner::after{
    left:454px;
    top:88px;
    right:0;
    height:2px;
    z-index:7;
    background:var(--red);
  }

  .primary-nav{
    padding-left:64px;
  }
}

@media (min-width:1181px) and (max-width:1450px){
  .brand::after{
    right:37px;
  }

  .header-inner::before{
    background:
      linear-gradient(90deg,rgba(255,255,255,.34),rgba(255,255,255,.34)) 0 calc(var(--header-h) - 1px) / 401px 1px no-repeat,
      linear-gradient(90deg,rgba(255,255,255,.34),rgba(255,255,255,.34)) 421px 39px / calc(100% - 441px) 1px no-repeat;
  }

  .header-inner::after{
    left:403px;
    top:82px;
  }

  .primary-nav{
    padding-left:54px;
  }
}


/* =========================================================
   HEADER RULER LINE SEAM LOCK v10
   User approved the header height. This only locks all ruler
   lines to one shared slanted seam point: bottom logo line,
   upper nav line, and red nav rule.
   ========================================================= */
@media (min-width:1181px){
  .site-header{
    border-bottom:0;
  }

  .header-inner{
    position:relative;
  }

  /* Remove all older split rule fragments so only this seam system shows. */
  .brand::before,
  .header-right::before,
  .header-right::after{
    display:none !important;
  }

  /* One shared diagonal seam: top point feeds the upper nav ruler;
     bottom point receives the lower logo-plaque ruler. */
  .brand::after{
    content:"";
    position:absolute;
    right:42px;
    top:39px;
    width:1px;
    height:74px;
    display:block !important;
    background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.28));
    transform:skewX(-15deg);
    transform-origin:top center;
    z-index:14;
  }

  /* Draw the gray ruler system as two lines that meet the same seam:
     1) lower logo plaque line ends at seam bottom
     2) upper nav line starts at seam top */
  .header-inner::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:8;
    background:
      linear-gradient(90deg,rgba(255,255,255,.34),rgba(255,255,255,.34)) 0 111px / 454px 1px no-repeat,
      linear-gradient(90deg,rgba(255,255,255,.34),rgba(255,255,255,.34)) 494px 39px / calc(100% - 520px) 1px no-repeat;
  }

  /* Red nav rule starts on the same diagonal seam at its y-position. */
  .header-inner::after{
    content:"";
    position:absolute;
    left:467px;
    right:0;
    top:88px;
    height:2px;
    background:var(--red);
    pointer-events:none;
    z-index:8;
  }

  .primary-nav,
  .search-form,
  .utility,
  .brand img{
    position:relative;
    z-index:15;
  }
}

@media (min-width:1181px) and (max-width:1450px){
  .brand::after{
    right:36px;
    top:37px;
    height:69px;
  }

  .header-inner::before{
    background:
      linear-gradient(90deg,rgba(255,255,255,.34),rgba(255,255,255,.34)) 0 105px / 402px 1px no-repeat,
      linear-gradient(90deg,rgba(255,255,255,.34),rgba(255,255,255,.34)) 439px 37px / calc(100% - 459px) 1px no-repeat;
  }

  .header-inner::after{
    left:414px;
    top:82px;
  }
}

/* =========================================================
   HEADER RULER LINE SEAM LOCK v11
   Height stays the same. This only lowers the upper gray
   ruler line so it sits closer to the mockup/nav instead of
   riding too high near the top edge.
   ========================================================= */
@media (min-width:1181px){
  .brand::after{
    right:42px;
    top:47px;
    height:66px;
  }

  .header-inner::before{
    background:
      /* lower logo plaque line unchanged */
      linear-gradient(90deg,rgba(255,255,255,.34),rgba(255,255,255,.34)) 0 111px / 454px 1px no-repeat,
      /* upper nav ruler lowered to sit just above the nav row */
      linear-gradient(90deg,rgba(255,255,255,.34),rgba(255,255,255,.34)) 486px 53px / calc(100% - 512px) 1px no-repeat;
  }

  .header-inner::after{
    left:467px;
    top:88px;
  }
}

@media (min-width:1181px) and (max-width:1450px){
  .brand::after{
    right:36px;
    top:44px;
    height:62px;
  }

  .header-inner::before{
    background:
      linear-gradient(90deg,rgba(255,255,255,.34),rgba(255,255,255,.34)) 0 105px / 402px 1px no-repeat,
      linear-gradient(90deg,rgba(255,255,255,.34),rgba(255,255,255,.34)) 431px 50px / calc(100% - 451px) 1px no-repeat;
  }

  .header-inner::after{
    left:414px;
    top:82px;
  }
}

/* =========================================================
   HEADER RULER LINE FINAL PASS v12
   Goal: match the approved mockup header geometry using one
   connected line system. Height and page layout stay the same.
   - lower logo plaque ruler sits under the logo
   - diagonal cut connects lower ruler to upper nav ruler
   - red nav rule starts on that same diagonal seam
   - no additional design direction or new imagery
   ========================================================= */
@media (min-width:1181px){
  .site-header{
    border-bottom:0 !important;
  }

  .header-inner{
    position:relative;
    isolation:isolate;
  }

  /* Kill previous separate fragments so the header only has one line system. */
  .brand::before,
  .brand::after,
  .header-right::before,
  .header-right::after{
    display:none !important;
  }

  /* One connected gray ruler system: lower logo line -> slanted cut -> upper nav line. */
  .header-inner::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:8;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 140' preserveAspectRatio='none'%3E%3Cpath d='M0 126 H454 L502 52 H1920' fill='none' stroke='rgba(255,255,255,.36)' stroke-width='1' shape-rendering='crispEdges'/%3E%3Cpath d='M454 126 L502 52' fill='none' stroke='rgba(255,255,255,.42)' stroke-width='1.25' shape-rendering='geometricPrecision'/%3E%3C/svg%3E");
    background-size:100% var(--header-h);
    background-position:0 0;
    background-repeat:no-repeat;
  }

  /* Red rule starts at the same diagonal seam, not before it. */
  .header-inner::after{
    content:"";
    position:absolute;
    left:472px;
    right:0;
    top:88px;
    height:2px;
    background:var(--red);
    pointer-events:none;
    z-index:8;
  }

  .brand,
  .brand img,
  .primary-nav,
  .search-form,
  .utility{
    position:relative;
    z-index:12;
  }
}

@media (min-width:1181px) and (max-width:1450px){
  .header-inner::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1450 132' preserveAspectRatio='none'%3E%3Cpath d='M0 118 H402 L448 50 H1450' fill='none' stroke='rgba(255,255,255,.36)' stroke-width='1' shape-rendering='crispEdges'/%3E%3Cpath d='M402 118 L448 50' fill='none' stroke='rgba(255,255,255,.42)' stroke-width='1.25' shape-rendering='geometricPrecision'/%3E%3C/svg%3E");
    background-size:100% var(--header-h);
  }

  .header-inner::after{
    left:426px;
    top:82px;
  }
}


/* =========================================================
   HEADER RULER LINE FINAL TWEAK v13
   Requested: remove the gray/white lower ruler under the logo
   and drop the red nav rule slightly. No other layout changes.
   ========================================================= */
@media (min-width:1181px){
  .header-inner::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 140' preserveAspectRatio='none'%3E%3Cpath d='M502 52 H1920' fill='none' stroke='rgba(255,255,255,.36)' stroke-width='1' shape-rendering='crispEdges'/%3E%3Cpath d='M454 126 L502 52' fill='none' stroke='rgba(255,255,255,.42)' stroke-width='1.25' shape-rendering='geometricPrecision'/%3E%3C/svg%3E") !important;
  }

  .header-inner::after{
    top:98px !important;
  }
}

@media (min-width:1181px) and (max-width:1450px){
  .header-inner::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1450 132' preserveAspectRatio='none'%3E%3Cpath d='M448 50 H1450' fill='none' stroke='rgba(255,255,255,.36)' stroke-width='1' shape-rendering='crispEdges'/%3E%3Cpath d='M402 118 L448 50' fill='none' stroke='rgba(255,255,255,.42)' stroke-width='1.25' shape-rendering='geometricPrecision'/%3E%3C/svg%3E") !important;
  }

  .header-inner::after{
    top:92px !important;
  }
}


/* =========================================================
   HEADER RULER LINE MICRO TWEAK v15
   Requested: drop the red nav rule just a little more to match
   the approved spacing reference. No other layout changes.
   ========================================================= */
@media (min-width:1181px){
  .header-inner::after{
    top:125px !important;
  }
}

@media (min-width:1181px) and (max-width:1450px){
  .header-inner::after{
    top:96px !important;
  }
}

/* =========================================================
   HEADER RULER LINE MICRO TWEAK v16
   Requested: keep the red line as approved and drop the upper
   gray ruler line a little more to match the target mockup.
   No other layout changes.
   ========================================================= */
@media (min-width:1181px){
  .header-inner::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 140' preserveAspectRatio='none'%3E%3Cpath d='M502 60 H1920' fill='none' stroke='rgba(255,255,255,.36)' stroke-width='1' shape-rendering='crispEdges'/%3E%3Cpath d='M454 126 L502 60' fill='none' stroke='rgba(255,255,255,.42)' stroke-width='1.25' shape-rendering='geometricPrecision'/%3E%3C/svg%3E") !important;
  }
}

@media (min-width:1181px) and (max-width:1450px){
  .header-inner::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1450 132' preserveAspectRatio='none'%3E%3Cpath d='M448 58 H1450' fill='none' stroke='rgba(255,255,255,.36)' stroke-width='1' shape-rendering='crispEdges'/%3E%3Cpath d='M402 118 L448 58' fill='none' stroke='rgba(255,255,255,.42)' stroke-width='1.25' shape-rendering='geometricPrecision'/%3E%3C/svg%3E") !important;
  }
}


/* =========================================================
   HEADER RULER LINE MICRO TWEAK v17
   Requested: keep the approved red line and add back a matching
   gray ruler line underneath the header logo. CSS only; image is
   not modified.
   ========================================================= */
@media (min-width:1181px){
  .header-inner::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 140' preserveAspectRatio='none'%3E%3Cpath d='M0 126 H454 L502 60 H1920' fill='none' stroke='rgba(255,255,255,.36)' stroke-width='1' shape-rendering='crispEdges'/%3E%3Cpath d='M454 126 L502 60' fill='none' stroke='rgba(255,255,255,.42)' stroke-width='1.25' shape-rendering='geometricPrecision'/%3E%3C/svg%3E") !important;
  }
}

@media (min-width:1181px) and (max-width:1450px){
  .header-inner::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1450 132' preserveAspectRatio='none'%3E%3Cpath d='M0 118 H402 L448 58 H1450' fill='none' stroke='rgba(255,255,255,.36)' stroke-width='1' shape-rendering='crispEdges'/%3E%3Cpath d='M402 118 L448 58' fill='none' stroke='rgba(255,255,255,.42)' stroke-width='1.25' shape-rendering='geometricPrecision'/%3E%3C/svg%3E") !important;
  }
}

/* =========================================================
   HEADER RULER LINE MICRO TWEAK v18
   Requested: draw a separate gray ruler line underneath the
   header logo so we can connect it in the next pass. CSS only;
   the logo image is not modified.
   ========================================================= */
@media (min-width:1181px){
  .brand::before{
    content:"" !important;
    display:block !important;
    position:absolute;
    left:0px;
    right:26px;
    bottom:17px;
    height:1px;
    background:rgba(255,255,255,.36);
    pointer-events:none;
    z-index:14;
  }
}

@media (min-width:1181px) and (max-width:1450px){
  .brand::before{
    left:24px;
    right:24px;
    bottom:9px;
  }
}


/* =========================================================
   NAV RADIO PLAYER — polished 400px version
   ========================================================= */

.nav-radio-player{
  position:absolute;
  right:300px;
  top:78px;
  z-index:30;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 62px;
  align-items:center;
  gap:11px;
  width:400px;
  height:44px;
  padding:6px 8px 6px 11px;
  background:
    linear-gradient(180deg, rgba(18,18,16,.96), rgba(3,3,3,.98)),
    #030303;
  border:1px solid rgba(255,255,255,.16);
  border-left:2px solid rgba(216,169,30,.65);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.9),
    0 8px 18px rgba(0,0,0,.38);
  color:#fff;
  overflow:hidden;
}

.nav-radio-eq{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:3px;
  width:36px;
  height:24px;
}

.nav-radio-eq span{
  display:block;
  width:4px;
  background:var(--gold);
  box-shadow:0 0 8px rgba(216,169,30,.35);
  animation:radioBars .72s ease-in-out infinite alternate;
  animation-play-state:paused;
}

.nav-radio-eq span:nth-child(1){height:8px;animation-delay:.05s}
.nav-radio-eq span:nth-child(2){height:16px;animation-delay:.16s}
.nav-radio-eq span:nth-child(3){height:23px;animation-delay:.28s}
.nav-radio-eq span:nth-child(4){height:13px;animation-delay:.11s}
.nav-radio-eq span:nth-child(5){height:19px;animation-delay:.22s}

.nav-radio-player.is-playing .nav-radio-eq span{
  animation-play-state:running;
}

@keyframes radioBars{
  0%{transform:scaleY(.45);opacity:.65}
  100%{transform:scaleY(1.15);opacity:1}
}

.nav-radio-copy{
  min-width:0;
  line-height:1;
  padding-right:4px;
}

.nav-radio-copy-top{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.nav-radio-kicker{
  color:var(--red-bright);
  font:400 16px/1 Bebas Neue,Impact,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
}

.nav-radio-station{
  color:#fff;
  font:900 10px/1 Inter,Arial,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}

.nav-radio-track{
  display:block;
  margin-top:4px;
  color:var(--gold);
  font:800 10px/1 Inter,Arial,sans-serif;
  letter-spacing:.025em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.nav-radio-button{
  justify-self:end;
  min-width:58px;
  height:30px;
  border:0;
  background:var(--red);
  color:#fff;
  cursor:pointer;
  text-transform:uppercase;
  font:900 11px/1 Inter,Arial,sans-serif;
  letter-spacing:.08em;
}

.nav-radio-button:hover{
  background:var(--red-bright);
}

.nav-radio-button[aria-pressed="true"]{
  background:var(--gold);
  color:#090909;
}
/* =========================================================
   v1.00.47 homepage light/dark mode foundation
   Scope: shared header/footer theme-toggle styling only.
   Dark mode remains the approved v1.00.46 default.
   ========================================================= */
.archive-theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:4px 9px;
  border:1px solid rgba(216,169,30,.52);
  color:var(--gold);
  background:rgba(0,0,0,.28);
  cursor:pointer;
  text-transform:uppercase;
  font:900 10px/1 Inter,Arial,sans-serif;
  letter-spacing:.08em;
}

.archive-theme-toggle:hover,
.archive-theme-toggle:focus-visible{
  color:#fff;
  border-color:rgba(216,169,30,.82);
  background:rgba(201,11,18,.28);
}

html[data-theme="light"] .site-header{
  background:linear-gradient(180deg,#21140f 0%,#120b08 74%,rgba(18,11,8,.97) 100%);
  box-shadow:0 16px 28px rgba(80,54,22,.26);
}

html[data-theme="light"] .brand,
html[data-theme="light"] .brand::after{
  background:#160d09;
}

html[data-theme="light"] .header-right::before{
  background:rgba(255,244,214,.22);
}

html[data-theme="light"] .primary-nav a,
html[data-theme="light"] .utility,
html[data-theme="light"] .utility a{
  color:#f8efd8;
}

html[data-theme="light"] .search-form{
  background:#f8f0df;
  border-color:rgba(71,48,20,.30);
}

html[data-theme="light"] .search-form input{
  color:#17130f;
}

html[data-theme="light"] .search-form input::placeholder{
  color:#665b4a;
}

html[data-theme="light"] .nav-radio-player{
  color:#17130f;
  background:linear-gradient(180deg,rgba(255,251,240,.97),rgba(235,222,197,.98)),#f6eddc;
  border-color:rgba(71,48,20,.22);
  border-left-color:rgba(216,169,30,.82);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 8px 18px rgba(80,54,22,.16);
}

html[data-theme="light"] .nav-radio-station{
  color:#17130f;
}

html[data-theme="light"] .archive-theme-toggle{
  color:#17130f;
  background:#f6eddc;
  border-color:rgba(216,169,30,.76);
}

html[data-theme="light"] .archive-theme-toggle:hover,
html[data-theme="light"] .archive-theme-toggle:focus-visible{
  color:#fff;
  background:var(--red);
}

@media (max-width:780px){
  .archive-theme-toggle{
    display:none;
  }
}


/* =========================================================
   v1.00.82 internal title size/color standardization
   Scope: internal page hero titles only. Homepage hero is untouched.
   Uses existing distressed-title overlay and preserves white top line / gold second line.
   ========================================================= */
.directory-intro h1.distressed-title,
.beats-intro h1.distressed-title,
.mixes-intro h1.distressed-title,
.genres-intro h1.distressed-title{
  font:400 clamp(56px,5.25vw,88px)/.84 Anton,Impact,sans-serif !important;
  color:#f1ead7 !important;
  letter-spacing:.016em !important;
}
.directory-intro h1.distressed-title > span,
.beats-intro h1.distressed-title > span,
.mixes-intro h1.distressed-title > span,
.genres-intro h1.distressed-title > span{
  display:block !important;
  color:var(--gold) !important;
  font-size:1em !important;
  letter-spacing:.016em !important;
  margin-top:0 !important;
}
@media (max-width:780px){
  .directory-intro h1.distressed-title,
  .beats-intro h1.distressed-title,
  .mixes-intro h1.distressed-title,
  .genres-intro h1.distressed-title{
    font-size:clamp(48px,15vw,72px) !important;
  }
}


/* =========================================================
   v1.00.86 internal header layout standardization
   Scope: internal page title line wrapping only. Homepage hero remains protected.
   ========================================================= */
.distressed-title .internal-title-line{
  display:block !important;
}

.distressed-title .internal-title-primary{
  color:#f1ead7 !important;
  -webkit-text-fill-color:#f1ead7 !important;
}

.distressed-title .internal-title-secondary{
  color:var(--gold) !important;
  -webkit-text-fill-color:var(--gold) !important;
}

.beats-intro h1.distressed-title,
.directory-intro h1.distressed-title{
  max-width:1100px !important;
}

.about-archive-page .beats-intro h1.distressed-title{
  max-width:1180px !important;
}