@import url('https://fonts.googleapis.com/css2?family=Anton&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
:root{--purple:#6d28d9;--pink:#31d7ff;--paper:#f5f3f8;--metal:#9b8db7}
body{font-family:'IBM Plex Sans',sans-serif}
.hero h1,.section-head h2,.manifesto h2,.join h2,.profile-copy h1,.world-line,.dj-meta h3,.release-row h3,.profile-info h2,.spotify-block h3{font-family:'Anton',sans-serif;letter-spacing:.005em}
.brand img{display:block;width:76px;height:48px;object-fit:contain}
.vinyl img{position:relative;z-index:2;width:30%;height:30%;border-radius:50%;object-fit:cover;box-shadow:0 0 26px var(--pink)}
.vinyl:before{display:none}
footer .brand img{width:70px;height:44px}
.hero .label-anthem{font-size:clamp(4.5rem,9.5vw,9.8rem);margin-bottom:1.2rem}
.hero{min-height:calc(100vh - 86px);background-image:linear-gradient(90deg,rgba(6,4,18,.94) 0%,rgba(6,4,18,.8) 34%,rgba(6,4,18,.18) 62%,rgba(6,4,18,.08) 100%),url('4f-dj-crowd-hero.png');background-size:cover;background-position:center;color:#fff}
.hero-copy{width:min(780px,58%)}
.hero .label-anthem span{color:#fff}.hero .label-anthem em{color:var(--pink);text-shadow:4px 4px 0 var(--purple)}
.hero .kicker{color:#c8f7ff}.hero .lede{color:#fff}.hero .primary{background:var(--pink);color:var(--ink)}.hero .ghost{color:#fff;border-color:#fff}
.world-line{margin:.2rem 0 .7rem;font-family:'Oswald',sans-serif;font-size:clamp(1.45rem,2.8vw,2.75rem);font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.role-line{display:inline-block;margin:0 0 1rem;padding:.42rem .65rem;background:var(--pink);color:var(--ink);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.anthem-close{margin-top:.15rem;text-transform:uppercase}
.anthem-close strong{color:var(--purple)}
.stage-stamp{position:absolute;right:3vw;bottom:5.4rem;z-index:3;padding:1rem 1.2rem;border:1px solid rgba(255,255,255,.75);background:rgba(7,4,16,.5);backdrop-filter:blur(8px);transform:rotate(-2deg);text-transform:uppercase}.stage-stamp span,.stage-stamp small{display:block;font:600 .58rem 'IBM Plex Mono',monospace;letter-spacing:.16em}.stage-stamp b{display:block;font:400 2.3rem 'Anton',sans-serif;color:var(--pink)}
.hero-brand-mark{position:absolute;right:5vw;top:8vh;z-index:3;width:clamp(110px,12vw,180px);height:auto;object-fit:contain;filter:drop-shadow(0 0 18px rgba(49,215,255,.35))}
body{overflow-x:hidden}
.menu-toggle{display:none;border:0;background:transparent;padding:.7rem;cursor:pointer;color:inherit}.menu-toggle span{display:block;width:25px;height:2px;margin:5px 0;background:currentColor;transition:transform .25s,opacity .25s}
.manifesto,.roster,.development,.releases,.join{position:relative}.section-logo{position:absolute;right:5vw;top:4rem;width:92px;height:70px;object-fit:contain;filter:drop-shadow(0 5px 8px rgba(49,215,255,.28));z-index:2}
.development{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:7vw;padding:7rem 5vw;background:#f5f3f8;color:var(--ink)}
.development-intro{position:sticky;top:2rem;align-self:start}.development-intro h2{font:400 clamp(3.6rem,6vw,7rem)/.9 'Anton',sans-serif;text-transform:uppercase;margin:1.1rem 0 2rem}.development-intro>p:last-child{max-width:560px;line-height:1.75}.development-list{border-top:1px solid rgba(12,7,18,.25)}.development-list article{display:grid;grid-template-columns:58px 1fr;gap:1rem;padding:2rem 0;border-bottom:1px solid rgba(12,7,18,.25)}.development-list article>span{font:600 .7rem 'IBM Plex Mono',monospace;color:var(--purple)}.development-list h3{font:400 2.3rem/1 'Anton',sans-serif;text-transform:uppercase;margin:0 0 .7rem}.development-list p{margin:0;line-height:1.65;color:#4e4458}
.release-row>a{display:grid;place-items:center;border:1px solid;width:44px;height:44px;border-radius:50%;color:inherit;text-decoration:none}.catalog-cta{display:flex;justify-content:space-between;align-items:center;padding:2.5rem 0 0}.catalog-cta p{max-width:460px}.catalog-cta div{display:flex;gap:.8rem}.catalog-cta a{padding:.85rem 1rem;border:1px solid;color:inherit;text-decoration:none;text-transform:uppercase;font-size:.68rem;font-weight:700}
.youtube-spotlight{background:#080b11;color:#fff}.youtube-heading{display:flex;align-items:end;justify-content:space-between;gap:3rem;margin-bottom:2.5rem}.youtube-heading h2{margin:1rem 0 0;font:400 clamp(4rem,7vw,7.5rem)/.85 'Anton',sans-serif;text-transform:uppercase}.youtube-heading h2 span{color:var(--pink)}.youtube-heading>p{max-width:440px;line-height:1.7;color:#b8c5d1}.youtube-player{position:relative;overflow:hidden;width:100%;aspect-ratio:16/9;border:1px solid rgba(49,215,255,.35);background:#000;box-shadow:0 0 55px rgba(49,215,255,.12)}.youtube-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.youtube-spotlight .catalog-cta{border-top:1px solid rgba(255,255,255,.18);margin-top:2rem}.youtube-spotlight .catalog-cta a{border-color:rgba(255,255,255,.4)}
.join-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:6vw;align-items:end}.join-grid h2{margin-top:1rem}.submission-card{padding:2rem;border:1px solid rgba(255,255,255,.5);background:rgba(9,7,20,.16);backdrop-filter:blur(8px)}.submission-label{text-transform:uppercase;font-size:.68rem!important;font-weight:700;letter-spacing:.12em}.submission-card ol{padding-left:1.2rem;line-height:2}.submission-card small{display:block;margin-top:1rem;line-height:1.5;opacity:.76}footer p a{color:inherit}
@media(max-width:800px){
  .nav{padding:0 1.2rem}
  .nav-cta{display:none}
  .menu-toggle{display:block;position:relative;z-index:12;margin-left:auto}
  .nav nav{display:flex;position:fixed;inset:72px 0 auto 0;z-index:11;flex-direction:column;gap:0;padding:1rem 1.2rem 1.4rem;background:rgba(7,10,15,.98);border-bottom:1px solid rgba(49,215,255,.35);transform:translateY(-140%);opacity:0;pointer-events:none;transition:transform .28s ease,opacity .28s ease}
  .nav nav a{display:block;padding:1rem 0;color:#fff!important;border-bottom:1px solid rgba(255,255,255,.14);font-size:.82rem}
  .menu-open .nav nav{transform:translateY(0);opacity:1;pointer-events:auto}
  .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hero{padding:4rem 1.2rem 5rem;background-image:linear-gradient(180deg,rgba(6,4,18,.86) 0%,rgba(6,4,18,.72) 54%,rgba(6,4,18,.26) 100%),url('4f-dj-crowd-hero.png');background-position:68% center}
  .hero-copy{min-width:0}
  .hero h1{font-size:19.5vw}
  .hero .label-anthem{font-size:18vw;line-height:.82}
  .world-line{font-size:1.25rem}
  .stage-stamp{display:none}
  .hero-brand-mark{left:auto!important;right:1.2rem!important;top:1.4rem!important;width:86px!important;max-width:86px!important;transform:none!important}
  .section-logo{right:1.2rem;top:2rem;width:64px;height:50px}
  .lede{font-size:.84rem;line-height:1.62;max-width:100%;overflow-wrap:anywhere}
  .development,.join-grid{grid-template-columns:1fr}.development{padding:5rem 1.2rem;gap:2.5rem}.development-intro{position:static}.development-intro h2{font-size:3.7rem}.development-list h3{font-size:1.8rem}.youtube-heading{align-items:flex-start;flex-direction:column;gap:1rem}.youtube-heading h2{font-size:3.8rem}.youtube-heading>p{font-size:.9rem}.youtube-player{margin-top:.5rem}.catalog-cta{align-items:flex-start;flex-direction:column;gap:1rem}.catalog-cta div{flex-wrap:wrap}.submission-card{padding:1.25rem}.hero-actions{flex-wrap:wrap}
}
/* One typography system across every public 4F Music page. */
body,button,input,textarea,select{font-family:'IBM Plex Sans',sans-serif}
h1,h2,h3,.hero h1,.section-head h2,.manifesto h2,.join h2,.profile-copy h1,.world-line,.dj-meta h3,.release-row h3,.profile-info h2,.spotify-block h3,.development-intro h2,.development-list h3,.youtube-heading h2,.stage-stamp b,.seo-hero h1,.seo-section h2,.seo-card h3,.seo-prose h3,.seo-cta h2,.artist-code,.about-hero h1,.origin h2,.belief-grid h3,.about-cta h2{font-family:'Anton',sans-serif}
.kicker,.section-no,.eyebrow,.nav nav a,.nav-cta,.button,.service-number,.service-card summary b,.development-ticker,.stage-stamp span,.stage-stamp small{font-family:'IBM Plex Mono',monospace}