@font-face{font-family:"Proxima Nova";src:url(/assets/fonts/pn-black.otf) format("opentype");font-weight:900;font-display:swap}
@font-face{font-family:"Proxima Nova";src:url(/assets/fonts/pn-xbold.otf) format("opentype");font-weight:800;font-display:swap}
@font-face{font-family:"Proxima Nova";src:url(/assets/fonts/pn-bold.otf) format("opentype");font-weight:700;font-display:swap}

:root{
  --ground:oklch(0.12 0.02 245);
  --ground-2:oklch(0.16 0.025 245);
  --ground-3:oklch(0.1 0.02 245);
  --ink:oklch(0.96 0.01 230);
  --ink-2:oklch(0.82 0.02 240);
  --ink-3:oklch(0.72 0.02 240);
  --accent:oklch(0.79 0.12 232);
  --line:oklch(1 0 none / 0.1);
  --gutter:clamp(16px,4vw,40px);
  --ease:cubic-bezier(0.2,0.8,0.2,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:"Proxima Nova",system-ui,sans-serif;overflow-x:clip}
img{display:block;max-inline-size:100%}
a{color:inherit}
h1,h2,h3,p,dl,dd{margin:0}
::selection{background:var(--accent);color:var(--ground)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;letter-spacing:0.12em;text-transform:uppercase}
.wrap{max-inline-size:1360px;margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute;inline-size:1px;block-size:1px;overflow:clip;clip-path:inset(50%);white-space:nowrap}

/* nav */
.top{position:absolute;inset-block-start:0;inset-inline:0;z-index:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-block:24px}
.brand{text-decoration:none;font-weight:900;font-size:20px;letter-spacing:0.32em}
.top nav{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(12px,3vw,32px)}
.top nav a.mono{font-size:12px;text-decoration:none;color:var(--ink-2);min-block-size:44px;display:inline-flex;align-items:center}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;min-block-size:48px;padding-inline:22px;border-radius:999px;text-decoration:none;font-weight:800;font-size:15px;letter-spacing:0.02em;transition:background-color 200ms ease-out,color 200ms ease-out}
.btn-accent{background:var(--accent);color:var(--ground)}
.btn-light{background:var(--ink);color:var(--ground)}
.btn-ghost{border:1px solid oklch(1 0 none / 0.28);color:var(--ink)}
.btn-sm{min-block-size:44px}
.btn:active{transform:scale(0.97)}
.pill{appearance:none;cursor:pointer;min-block-size:44px;padding-inline:16px;border-radius:999px;border:1px solid oklch(1 0 none / 0.16);background:transparent;color:var(--ink-2);font-size:12px;transition:background-color 200ms ease-out,color 200ms ease-out,border-color 200ms ease-out}
.pill:active{transform:scale(0.97)}
.pill[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.icon-btn{appearance:none;cursor:pointer;inline-size:48px;block-size:48px;display:grid;place-items:center;border-radius:999px;border:1px solid oklch(1 0 none / 0.2);background:transparent;color:var(--ink)}
.icon-btn:active{transform:scale(0.94)}

/* hero */
.hero{position:relative;padding-block:140px 72px;min-block-size:100svh;display:flex;align-items:center;overflow:clip}
.hero-bg{position:absolute;inset:-10%;background:url(/assets/covers/2026-shouldve-been.webp) center 30%/cover;filter:blur(70px) saturate(1.4);opacity:0.5;transform:scale(1.15)}
.scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,oklch(0 0 none / 0.28) 0 1px,transparent 1px 3px)}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 60% 40%,transparent 30%,var(--ground) 85%)}
.hero-grid{position:relative;z-index:2;inline-size:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:clamp(40px,6vw,96px);align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:28px;min-inline-size:0;container-type:inline-size}
.kicker{font-size:13px;color:var(--accent);display:flex;align-items:center;gap:12px}
.dot{inline-size:8px;block-size:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.cover-fill{font-weight:900;font-size:clamp(40px,17.5cqi,168px);line-height:0.84;letter-spacing:-0.02em;text-transform:uppercase;background:linear-gradient(oklch(1 0 none / 0.45),oklch(1 0 none / 0.45)),url(/assets/covers/2026-shouldve-been.webp) 30% 35%/140% auto;-webkit-background-clip:text;background-clip:text;color:transparent}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.facts{margin-block-start:8px;display:flex;flex-wrap:wrap;gap:12px 40px;font-size:12px;color:var(--ink-3)}
.facts div{display:flex;flex-direction:column;gap:6px}
.facts dd{color:var(--ink)}
.stage{perspective:1200px;display:flex;justify-content:center;min-inline-size:0}
.cover{position:relative;inline-size:min(100%,560px);aspect-ratio:1;border-radius:8px;overflow:clip;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));box-shadow:0 0 0 1px oklch(1 0 none / 0.08),0 40px 120px -20px oklch(0.6 0.15 235 / 0.65),0 0 220px -40px oklch(0.75 0.14 225 / 0.6)}
.cover img{inline-size:100%;block-size:100%;object-fit:cover}
.glare{position:absolute;inset:0;mix-blend-mode:screen;background:radial-gradient(circle at var(--gx,30%) var(--gy,25%),oklch(0.9 0.08 220 / 0.35),transparent 45%)}
.cover .scan{opacity:0.6}

/* ticker */
.ticker{position:relative;z-index:2;border-block:1px solid var(--line);background:oklch(0.15 0.025 245);overflow:clip;padding-block:18px}
.marquee{display:flex;inline-size:max-content}
.marquee span{display:inline-flex;align-items:center;gap:28px;padding-inline-end:28px;white-space:nowrap;font-weight:900;font-size:22px;letter-spacing:0.04em;text-transform:uppercase}
.marquee span::after{content:"";inline-size:6px;block-size:6px;border-radius:50%;background:oklch(1 0 none / 0.3)}
.marquee span:nth-child(3n+1){color:var(--accent)}

/* discography */
.disco{padding-block:clamp(72px,10vw,128px) clamp(56px,8vw,96px);display:flex;flex-direction:column;gap:48px}
.disco-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:24px}
.disco-head > div:first-child{display:flex;flex-direction:column;gap:16px}
.label{font-size:13px;color:var(--accent)}
.big{font-weight:900;font-size:clamp(40px,6vw,88px);line-height:0.92;letter-spacing:-0.01em;text-transform:uppercase}
.group{display:flex;flex-wrap:wrap;gap:8px}
.spot{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(28px,5vw,72px);align-items:center;padding:clamp(20px,3vw,36px);border-radius:16px;background:var(--ground-2);box-shadow:inset 0 0 0 1px oklch(1 0 none / 0.07)}
.spot-art{max-inline-size:440px;inline-size:100%;aspect-ratio:1;border-radius:8px;overflow:clip;background:var(--ground)}
.spot-art img{inline-size:100%;block-size:100%;object-fit:cover}
.spot-copy{display:flex;flex-direction:column;gap:20px;min-inline-size:0}
.spot-no{font-size:12px;color:var(--ink-3);display:flex;align-items:center;gap:14px}
.badge{padding:4px 10px;border-radius:999px;background:var(--accent);color:var(--ground)}
.spot-year{font-weight:900;font-size:clamp(72px,10vw,140px);line-height:0.8;color:oklch(1 0 none / 0.07)}
.spot-title{margin-block-start:-0.6em;font-weight:900;font-size:clamp(36px,4.6vw,64px);line-height:0.95;text-transform:uppercase;overflow-wrap:anywhere}
.spot-meta{font-weight:700;font-size:18px;color:var(--ink-2)}
.spot-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-block-start:8px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:32px 20px}
.sleeve{appearance:none;cursor:pointer;padding:0;border:0;background:none;color:inherit;text-align:start;font:inherit;display:flex;flex-direction:column;gap:12px;min-inline-size:0;transition:opacity 250ms ease-out}
.art{position:relative;aspect-ratio:1;border-radius:6px;overflow:clip;background:var(--ground-2);box-shadow:0 0 0 1px oklch(1 0 none / 0.06)}
.art img{inline-size:100%;block-size:100%;object-fit:cover}
.art::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,oklch(0 0 none / 0.22) 0 1px,transparent 1px 3px);opacity:0;transition:opacity 250ms ease-out}
.sleeve[aria-pressed="true"] .art{box-shadow:0 0 0 2px var(--accent),0 20px 60px -20px oklch(0.6 0.15 235 / 0.8)}
.sleeve[aria-pressed="true"] .art::after{opacity:1}
.sleeve:active .art{transform:scale(0.98)}
.sleeve.dim{opacity:0.22}
.s-title{font-weight:800;font-size:16px;line-height:1.2}
.s-date{font-size:11px;color:var(--ink-3)}
.s-text{display:flex;flex-direction:column;gap:4px}

.year-row{display:grid;gap:16px;padding-block:28px;border-block-start:1px solid var(--line)}
.year-row > div:first-child{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.year-row h3{font-weight:900;font-size:clamp(36px,5vw,64px);line-height:1;transition:color 250ms ease-out}
.year-row.faded h3{color:oklch(1 0 none / 0.18)}
.year-row p{font-size:12px;color:var(--ink-3)}
.row-scroll{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding-block-end:8px;scrollbar-width:thin}
.row-scroll > *{scroll-snap-align:start;flex:0 0 clamp(130px,16vw,170px)}

/* follow */
.follow{border-block-start:1px solid var(--line);background:var(--ground-3)}
.follow-grid{padding-block:clamp(72px,10vw,128px) 40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:clamp(40px,6vw,96px)}
.follow h2{font-weight:900;font-size:clamp(44px,6.4vw,96px);line-height:0.9;text-transform:uppercase}
.socials{display:flex;flex-direction:column;border-block-start:1px solid oklch(1 0 none / 0.12)}
.social{display:flex;align-items:center;justify-content:space-between;gap:16px;min-block-size:72px;padding-inline:4px;border-block-end:1px solid oklch(1 0 none / 0.12);text-decoration:none;transition:color 200ms ease-out}
.social:active{color:var(--accent)}
.social > span:first-child{font-weight:900;font-size:clamp(24px,3vw,36px);text-transform:uppercase}
.social > span:last-child{font-size:12px;display:flex;align-items:center;gap:10px;color:var(--ink-3)}
.foot{padding-block:32px 40px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:11px;color:oklch(0.68 0.02 240)}

@media (hover:hover) and (pointer:fine){
  .btn-accent:hover{background:color-mix(in oklch,var(--accent),white 18%)}
  .btn-light:hover{background:white}
  .btn-ghost:hover{background:oklch(1 0 none / 0.1)}
  .top nav a.mono:hover{color:var(--ink)}
  .pill:hover{border-color:oklch(1 0 none / 0.5);color:var(--ink)}
  .pill[aria-pressed="true"]:hover{color:var(--ground)}
  .icon-btn:hover{background:oklch(1 0 none / 0.1)}
  .sleeve:hover .art::after{opacity:1}
  .sleeve:hover .art{transform:translateY(-6px) rotate(-1deg)}
  .sleeve.dim:hover{opacity:0.6}
  .social:hover{color:var(--accent)}
}
@media (prefers-reduced-motion:no-preference){
  .marquee{animation:tk-marquee 60s linear infinite}
  .hero-bg{animation:tk-drift 18s ease-in-out infinite alternate}
  .cover-fill{animation:tk-pan 14s ease-in-out infinite alternate}
  .cover{transition:transform 600ms var(--ease)}
  .cover.live{transition:transform 90ms linear}
  .art{transition:transform 350ms var(--ease),box-shadow 250ms ease-out}
  .spot-art img.land{animation:tk-land 600ms var(--ease)}
  .flicker{animation:tk-flicker 4s steps(1) infinite}
  .social{transition:color 200ms ease-out,padding-inline-start 300ms var(--ease)}
}
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  .social:hover{padding-inline-start:20px}
}
@keyframes tk-marquee{to{transform:translateX(-50%)}}
@keyframes tk-drift{to{transform:scale(1.3) translate(3%,-2%)}}
@keyframes tk-pan{to{background-position:60% 55%}}
@keyframes tk-land{from{opacity:0;transform:translateY(16px) scale(0.96);filter:blur(6px)}}
@keyframes tk-flicker{0%,100%{opacity:1}92%{opacity:0.4}94%{opacity:1}96%{opacity:0.6}}
@media (width < 640px){
  .top nav a.mono{display:none}
  .hero{padding-block-start:112px}
}