/* HIP HOP UNIVERSAL — brutalist / streetwear */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;600;800&family=JetBrains+Mono:wght@400;700&display=swap');

:root{
  --bg:#0b0b0b;
  --ink:#f5f5f0;
  --acid:#d6ff00;
  --grey:#8a8a82;
  --line:#2a2a26;
  --disp:'Archivo Black',Impact,sans-serif;
  --body:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);font-family:var(--body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--acid);color:#000}

/* ---- ticker ---- */
.ticker{border-bottom:2px solid var(--ink);background:var(--acid);color:#000;overflow:hidden;white-space:nowrap}
.ticker-track{display:inline-block;padding:6px 0;animation:roll 32s linear infinite;font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.14em}
.ticker-track span{padding:0 26px}
@keyframes roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- header ---- */
header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:2px solid var(--ink)}
.bar{display:flex;align-items:stretch;justify-content:space-between;flex-wrap:wrap}
.brand{font-family:var(--disp);font-size:clamp(15px,2.4vw,22px);letter-spacing:-.02em;padding:14px 18px;border-right:2px solid var(--ink);text-transform:uppercase;line-height:1}
.brand em{font-style:normal;color:var(--acid)}
nav{display:flex;flex-wrap:wrap}
nav button{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  background:none;border:0;border-left:2px solid var(--ink);color:var(--grey);
  padding:14px 16px;cursor:pointer;transition:.12s;
}
nav button:hover{color:#000;background:var(--ink)}
nav button.on{background:var(--acid);color:#000}

/* ---- layout ---- */
main{max-width:1360px;margin:0 auto;padding:0 0 120px}
section{display:none;animation:in .25s ease-out}
section.live{display:block}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--acid)}
.slab{border-bottom:2px solid var(--ink);padding:34px 18px}
h1.mega{
  font-family:var(--disp);text-transform:uppercase;line-height:.86;letter-spacing:-.035em;
  font-size:clamp(48px,12.5vw,168px);margin:10px 0;
}
h1.mega .out{color:transparent;-webkit-text-stroke:2px var(--ink)}
.lede{max-width:62ch;font-size:clamp(15px,1.5vw,19px);line-height:1.5;color:#cfcfc8;margin-top:16px}

h2.sect{font-family:var(--disp);text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(28px,5vw,64px);line-height:.92}
.sub{color:var(--grey);max-width:70ch;margin-top:12px;line-height:1.55;font-size:15px}

/* ---- stat grid ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));border-bottom:2px solid var(--ink)}
.stat{padding:24px 18px;border-right:2px solid var(--line)}
.stat b{display:block;font-family:var(--disp);font-size:clamp(30px,4.4vw,52px);line-height:1;color:var(--acid)}
.stat span{display:block;margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}

/* ---- elements strip ---- */
.els{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));border-bottom:2px solid var(--ink)}
.el{padding:26px 18px;border-right:2px solid var(--line);transition:.15s}
.el:hover{background:var(--ink);color:#000}
.el b{font-family:var(--disp);text-transform:uppercase;font-size:20px;display:block}
.el i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--acid)}
.el:hover i{color:#000}
.el p{margin-top:10px;font-size:14px;line-height:1.5;color:var(--grey)}
.el:hover p{color:#222}

/* ---- timeline ---- */
.era{border-bottom:2px solid var(--ink)}
.era-head{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;padding:28px 18px 6px}
.era-yrs{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.1em;color:var(--acid);white-space:nowrap}
.era-name{font-family:var(--disp);text-transform:uppercase;font-size:clamp(22px,3.6vw,44px);line-height:1;letter-spacing:-.02em}
.era-note{padding:0 18px 18px;color:var(--grey);max-width:80ch;line-height:1.55;font-size:15px}
.beats{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));border-top:2px solid var(--line)}
.beat{padding:18px;border-right:2px solid var(--line);border-bottom:2px solid var(--line)}
.beat b{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--acid);display:block;margin-bottom:6px}
.beat p{font-size:14px;line-height:1.5}

/* ---- cards / regions ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));border-top:2px solid var(--ink)}
.card{padding:24px 18px;border-right:2px solid var(--line);border-bottom:2px solid var(--line);position:relative}
.card:hover{background:#131310}
.card .tag{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}
.card h3{font-family:var(--disp);text-transform:uppercase;font-size:26px;line-height:1;margin:8px 0 4px;letter-spacing:-.02em}
.card .sound{font-family:var(--mono);font-size:11px;color:var(--acid);letter-spacing:.08em}
.card p{margin-top:12px;font-size:14px;line-height:1.55;color:#c3c3bc}
.chips{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px}
.chip{font-family:var(--mono);font-size:10px;letter-spacing:.08em;border:1px solid var(--line);padding:4px 7px;color:var(--grey);text-transform:uppercase}

/* ---- albums table ---- */
.tools{display:flex;gap:10px;flex-wrap:wrap;padding:18px;border-bottom:2px solid var(--ink);align-items:center}
.tools input{
  background:#000;border:2px solid var(--line);color:var(--ink);font-family:var(--mono);font-size:12px;
  padding:10px 12px;min-width:230px;outline:none
}
.tools input:focus{border-color:var(--acid)}
.tools button{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  background:none;border:2px solid var(--line);color:var(--grey);padding:9px 12px;cursor:pointer
}
.tools button.on{background:var(--acid);border-color:var(--acid);color:#000}
.rows{display:block}
.row{display:grid;grid-template-columns:76px minmax(0,1.05fr) minmax(0,1fr) minmax(0,1.5fr);gap:14px;
  padding:16px 18px;border-bottom:2px solid var(--line);align-items:baseline}
.row:hover{background:#131310}
.row .yr{font-family:var(--disp);font-size:20px;color:var(--acid);line-height:1}
.row .ti{font-family:var(--disp);text-transform:uppercase;font-size:17px;line-height:1.05;letter-spacing:-.01em}
.row .ar{font-family:var(--mono);font-size:12px;color:var(--ink);letter-spacing:.04em}
.row .wh{font-size:13.5px;color:var(--grey);line-height:1.5}
.rows .row.head{background:#000;position:sticky;top:0}
.row.head span{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}
@media(max-width:820px){
  .row{grid-template-columns:60px 1fr}
  .row .wh,.row.head{display:none}
  .row .ar{grid-column:2}
}

/* ---- figures ---- */
.figs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));border-top:2px solid var(--ink)}
.fig{padding:20px 18px;border-right:2px solid var(--line);border-bottom:2px solid var(--line)}
.fig .n{font-family:var(--disp);text-transform:uppercase;font-size:19px;line-height:1.05}
.fig .r{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--acid);margin-top:6px}
.fig p{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--grey)}

footer{border-top:2px solid var(--ink);padding:30px 18px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
footer b{color:var(--acid)}

.powered{
  border-top:2px solid var(--ink);text-align:center;padding:22px 18px;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey)
}
.powered a{color:var(--acid);border-bottom:1px solid transparent;transition:.15s}
.powered a:hover{border-bottom-color:var(--acid)}