/* Top 100 Refresh — BILLBOARD HOT 100 editorial theme. Black ink on paper, chart red accent. */
:root{
  --paper:#ffffff;--paper-2:#f4f2ec;--ink:#0a0a0a;--line:#e2ded4;--line-2:#c9c4b8;
  --hot:#E7141A;--hot-dk:#c40f14;
  --fg:#0a0a0a;--fg-2:#46443f;--fg-3:#8a867c;
  /* safety aliases for any legacy refs */
  --amber:#E7141A;--amber-lt:#ff2a30;--pine:#0a0a0a;--night:#ffffff;--panel:#ffffff;--panel-2:#0a0a0a;--mist:#8a867c;
  --display:'Anton',sans-serif;--cond:'Barlow Condensed',sans-serif;--body:'Barlow',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink)}
body{font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--hot);text-decoration:none}
a:hover{color:var(--hot-dk)}
img{display:block;max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;letter-spacing:.005em;line-height:.92;text-transform:uppercase}

/* HOT 100 ticker strip (replaces ridgelines) */
.ridge{height:42px;background:var(--ink);border-block:3px solid var(--hot);overflow:hidden;display:flex;align-items:center}
.ridge svg{display:none}
.ridge::before{content:"THE TOP 100 REFRESH ✦ EVERY GENRE ✦ REBUILT LIVE ✦ THE TOP 100 REFRESH ✦ EVERY GENRE ✦ REBUILT LIVE ✦ THE TOP 100 REFRESH ✦ EVERY GENRE ✦ REBUILT LIVE ✦ ";white-space:nowrap;font-family:var(--cond);font-weight:700;letter-spacing:.22em;font-size:13px;text-transform:uppercase;color:#fff;padding-left:100%;animation:tick 26s linear infinite;will-change:transform}
@keyframes tick{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

/* top bar / masthead */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 0;border-bottom:3px solid var(--ink);flex-wrap:wrap}
.mark{display:flex;align-items:baseline;gap:11px}
.mark .hh{font-family:var(--display);font-size:26px;letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}
.mark .hh b{color:var(--hot);font-weight:400}
.mark .by{font-family:var(--cond);font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:var(--fg-3)}
.datepill{font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:#fff;background:var(--hot);padding:8px 15px;border-radius:0}

/* hero */
.hero{position:relative;padding:46px 0 56px;overflow:hidden;border-bottom:1px solid var(--line)}
.hero .grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:start}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--hot);margin:0 0 18px}
.eyebrow i{width:9px;height:9px;background:var(--hot)}
h1.big{font-size:clamp(46px,6.6vw,92px);color:var(--ink)}
h1.big em{font-style:normal;color:var(--hot)}
.big .huge{display:block;font-size:1.34em;line-height:.82;color:var(--ink);-webkit-text-stroke:0}
.lede{color:var(--fg-2);font-size:18.5px;max-width:52ch;margin:22px 0 0;text-wrap:pretty}
.lede strong{color:var(--ink);font-weight:600}
.facts{list-style:none;display:grid;gap:11px;margin:26px 0 0;padding:0}
.facts li{position:relative;padding-left:24px;font-size:16.5px;color:var(--fg-2)}
.facts li b{color:var(--ink);font-weight:600}
.facts li::before{content:"";position:absolute;left:0;top:8px;width:11px;height:11px;background:var(--hot)}

/* banger */
.banger{display:none;width:100%;margin:22px 0 0;padding:19px 20px;border:0;border-radius:0;background:var(--ink);color:#fff;font-family:var(--display);font-size:21px;letter-spacing:.02em;text-transform:uppercase;cursor:pointer;min-height:56px}
.banger:hover{background:var(--hot)}
.banger:active{transform:scale(.985)}
.banger span{display:block;font-family:var(--cond);font-weight:600;font-size:12.5px;letter-spacing:.15em;color:rgba(255,255,255,.7);margin-top:3px}

/* RSVP card */
.rsvp{background:var(--paper);border:3px solid var(--ink);border-radius:0;padding:26px 24px 22px}
.rsvp .kicker{display:inline-block;font-family:var(--cond);font-weight:700;font-size:12.5px;letter-spacing:.17em;text-transform:uppercase;color:#fff;background:var(--hot);padding:5px 11px;margin:0 0 12px}
.rsvp h2{font-size:31px;margin:0 0 6px;color:var(--ink)}
.rsvp .sub{color:var(--fg-3);font-size:14.5px;margin:0 0 20px}
.rsvp .fine{color:var(--fg-3);font-size:12.5px;text-align:center;margin:13px 0 0;font-family:var(--cond);letter-spacing:.07em;text-transform:uppercase}
.rsvp form{display:flex;flex-direction:column;gap:11px}
.rsvp input[type=text],.rsvp input[type=email],.rsvp input[type=tel]{width:100%;background:#fafafa;border:1px solid var(--line-2);border-radius:0;padding:15px;font-family:var(--body);font-size:16px;color:var(--ink);min-height:52px}
.rsvp input::placeholder{color:#8c8c8c}
.rsvp input:focus{outline:none;border-color:var(--hot);box-shadow:0 0 0 3px rgba(231,20,26,.18)}
.rsvp button[type=submit]{width:100%;margin-top:6px;padding:19px 18px;border:0;border-radius:0;background:var(--ink);color:#fff;font-family:var(--display);font-size:22px;letter-spacing:.02em;text-transform:uppercase;cursor:pointer;min-height:58px}
.rsvp button[type=submit]:hover{background:var(--hot)}
.rsvp button[type=submit]:active{transform:scale(.985)}
.rsvp .js_captcha_wrapper:empty{display:none}

/* attendance radio group */
.rsvp .attn-radio{border:0;margin:2px 0 0;padding:0;display:grid;gap:10px}
.rsvp .attn-radio legend{font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin:0 0 4px;padding:0}
.rsvp .attn-radio label{display:flex;align-items:center;gap:11px;background:#fafafa;border:1px solid var(--line-2);border-radius:0;padding:13px 15px;cursor:pointer;transition:border-color .15s,background .15s}
.rsvp .attn-radio label:hover{border-color:var(--hot)}
.rsvp .attn-radio input[type="radio"]{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:20px;height:20px;margin:0;border:2px solid var(--line-2);border-radius:50%;cursor:pointer;position:relative}
.rsvp .attn-radio input[type="radio"]:checked{border-color:var(--hot)}
.rsvp .attn-radio input[type="radio"]:checked::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--hot)}
.rsvp .attn-radio label:has(input:checked){border-color:var(--hot);background:rgba(231,20,26,.07)}
.rsvp .attn-radio span{font-size:15px;color:var(--ink)}

/* section heads */
.sec{padding-block:64px}
.sec-head{margin:0 0 32px;max-width:none}
.sec-head .eyebrow{margin-bottom:14px}
.sec-head h2{font-size:clamp(32px,4.4vw,58px);color:var(--ink)}
.sec-head h2 em{font-style:normal;color:var(--hot)}
.sec-head p{color:var(--fg-2);font-size:17px;max-width:64ch;margin:16px 0 0}

/* genre grid = chart entries */
.genres{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:3px solid var(--ink);border-left:1px solid var(--line)}
.gen{background:var(--paper);border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 20px 24px;position:relative;transition:background .15s}
.gen:hover{background:var(--paper-2)}
.gen .rank{font-family:var(--display);font-size:52px;line-height:.78;color:var(--ink)}
.gen:hover .rank{color:var(--hot)}
.gen .nm{font-family:var(--cond);font-weight:700;font-size:20px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);margin-top:14px;padding-top:12px;border-top:2px solid var(--ink)}
.gen .tag{font-family:var(--cond);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--hot);margin-top:6px}

/* how it works */
.agenda{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:3px solid var(--ink)}
.step{background:var(--paper);border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 24px 28px}
.step:last-child{border-right:0}
.step .n{font-family:var(--display);font-size:34px;color:var(--hot);line-height:.8}
.step h3{font-size:24px;margin:14px 0 10px;color:var(--ink)}
.step p{color:var(--fg-2);font-size:15.5px;margin:0}

/* cabin callout */
.cabin{display:flex;align-items:center;gap:26px;margin-top:24px;background:var(--ink);color:#fff;border-radius:0;padding:26px 28px;flex-wrap:wrap}
.cabin .badge{flex:0 0 auto;width:104px;height:104px;border-radius:0;background:var(--hot);display:grid;place-content:center;text-align:center;line-height:.9}
.cabin .badge b{display:block;font-family:var(--display);color:#fff;font-size:40px}
.cabin .badge span{display:block;font-family:var(--cond);font-weight:700;color:#fff;font-size:10px;letter-spacing:.14em;margin-top:5px}
.cabin .cx .rl{font-family:var(--cond);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--hot)}
.cabin .cx .nm{font-family:var(--display);font-size:30px;text-transform:uppercase;line-height:1;margin-top:6px;color:#fff}
.cabin .cx p{color:rgba(255,255,255,.78);font-size:15.5px;margin:9px 0 0;max-width:60ch}

/* team photo */
.team{margin:0;border:3px solid var(--ink);border-radius:0;overflow:hidden;background:var(--paper)}
.team img{width:100%;height:auto;display:block}

/* closing band = Billboard cover footer */
.band{background:var(--ink);color:#fff;border-top:3px solid var(--hot);padding:70px 0 76px}
.band .inner{max-width:640px;margin:0 auto;text-align:center}
.band h2{font-size:clamp(34px,4.6vw,60px);margin-bottom:14px;color:#fff}
.band h2 em{font-style:normal;color:var(--hot)}
.band p{color:rgba(255,255,255,.8);font-size:17px;margin:0 0 26px}

/* footer */
.foot{padding:34px 0 48px;border-top:1px solid var(--line);color:var(--fg-3);font-family:var(--cond);font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media (max-width:900px){
  .hero .grid{grid-template-columns:1fr;gap:0}
  .hero{padding:26px 0 40px}
  .hero .form-col{order:-1;margin-bottom:28px}
  .banger{display:block}
  .genres{grid-template-columns:repeat(2,1fr)}
  .agenda{grid-template-columns:1fr}
  .step{border-right:0}
  .cabin{flex-direction:column;text-align:center}
  .cabin .cx p{max-width:none}
  h1.big{font-size:clamp(40px,11vw,58px)}
  .sec{padding-block:48px}
}