:root { --ink:#11100f; --purple:#ddd7fe; --purple-dark:#6e54ff; --orange:#ff5c35; --cream:#f3efe6; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--purple); color:var(--ink); font-family:"DM Sans",sans-serif; -webkit-font-smoothing:antialiased; }
body.veiled { overflow:hidden; }
button,a { font:inherit; }
.entry-veil { position:fixed; inset:0; z-index:200; display:grid; place-items:center; overflow:hidden; background:radial-gradient(ellipse at 18% 18%,rgba(243,239,230,.9),transparent 48%),radial-gradient(ellipse at 78% 70%,rgba(110,84,255,.24),transparent 53%),rgba(221,215,254,.94); }
.entry-veil::before,.entry-veil::after { content:""; position:absolute; width:72vw; height:58vh; border-radius:50%; background:radial-gradient(ellipse,rgba(243,239,230,.55),rgba(221,215,254,.2) 48%,transparent 72%); opacity:.8; }
.entry-veil::before { left:-16vw; top:5vh; transform:rotate(12deg); }
.entry-veil::after { right:-14vw; bottom:-10vh; transform:rotate(-16deg); }
.entry-veil button { position:relative; z-index:3; border:2px solid var(--ink); background:var(--ink); color:var(--cream); padding:19px 27px; box-shadow:8px 8px 0 var(--orange); cursor:pointer; font-weight:800; text-transform:uppercase; letter-spacing:.06em; transition:transform .18s ease,box-shadow .18s ease; }
.entry-veil button:hover { transform:translate(-2px,-2px); box-shadow:11px 11px 0 var(--orange); }
.entry-veil.leaving { pointer-events:none; animation:veil-lift 1.45s cubic-bezier(.55,.02,.2,1) forwards; }
.entry-veil.leaving button { animation:button-vanish .32s ease forwards; }
.entry-veil.leaving::before,.entry-veil.leaving::after { animation:smoke-blow 1.15s cubic-bezier(.45,.05,.25,1) forwards; }
.entry-veil.leaving::after { animation-delay:.08s; }
@keyframes veil-lift { 0% { opacity:1; transform:translateY(0); } 55% { opacity:.92; } 100% { opacity:0; transform:translateY(-108%); } }
@keyframes smoke-blow { 0% { opacity:.8; translate:0 0; scale:1; } 100% { opacity:0; translate:16vw -70vh; scale:1.35; } }
@keyframes button-vanish { to { opacity:0; transform:scale(.85); } }
nav { height:76px; padding:0 max(22px,calc((100vw - 1240px)/2)); display:flex; align-items:center; justify-content:space-between; border-bottom:2px solid var(--ink); font-size:12px; font-weight:800; letter-spacing:.08em; }
nav a { color:inherit; text-decoration:none; }
.brand { display:flex; align-items:center; gap:10px; }
.brand-dot { width:16px; height:20px; border:3px solid var(--ink); border-radius:45% 45% 40% 40%; background:var(--purple-dark); transform:rotate(5deg); }
.nav-links { display:flex; align-items:center; gap:26px; }
.nav-chart { border:0; padding:0; background:none; cursor:pointer; font-weight:800; letter-spacing:.08em; }
.nav-chart span { color:var(--orange); margin-left:4px; }
.hero { min-height:calc(100vh - 76px); display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:35px; padding:60px max(22px,calc((100vw - 1240px)/2)); overflow:hidden; }
.kicker,.eyebrow,.section-number { text-transform:uppercase; font-size:11px; font-weight:800; letter-spacing:.14em; }
.kicker span { color:var(--orange); }
h1,h2 { margin:0; font-family:"Space Grotesk",sans-serif; letter-spacing:-.065em; }
h1 { font-size:clamp(66px,10.5vw,148px); line-height:.79; }
h1 em { color:var(--orange); font-style:normal; }
.hero-line { margin:30px 0; font-size:clamp(21px,2.4vw,31px); font-weight:600; }
.hero-actions { display:flex; align-items:center; gap:27px; flex-wrap:wrap; }
.primary,.quiz-button { border:2px solid var(--ink); background:var(--ink); color:white; padding:17px 22px; text-decoration:none; font-weight:800; text-transform:uppercase; font-size:12px; letter-spacing:.06em; box-shadow:7px 7px 0 var(--orange); cursor:pointer; transition:.18s ease; }
.primary:hover,.quiz-button:hover { transform:translate(-2px,-2px); box-shadow:10px 10px 0 var(--orange); }
.play-icon { display:inline-block; margin-right:8px; color:var(--purple); }
.text-link { color:var(--ink); font-weight:800; text-decoration:none; border-bottom:2px solid var(--ink); padding-bottom:4px; }
.text-link span { color:var(--orange); }
.hero-art { min-height:620px; position:relative; display:grid; place-items:center; isolation:isolate; }
.hero-art::before,.hero-art::after { content:""; position:absolute; width:88%; aspect-ratio:1; border-radius:50%; border:3px solid var(--ink); }
.hero-art::before { z-index:0; background:var(--orange); transform:translate(18px,18px); }
.hero-art::after { z-index:1; background:var(--cream); transform:translate(-9px,-9px); }
.gallon-trigger { position:relative; z-index:2; width:min(85%,560px); padding:0; border:0; background:none; cursor:pointer; animation:float 4.2s ease-in-out infinite; }
.gallon-trigger img { display:block; width:100%; max-height:670px; object-fit:contain; filter:drop-shadow(18px 22px 0 rgba(17,16,15,.12)); }
.gallon-trigger:focus-visible { outline:4px solid var(--orange); outline-offset:8px; border-radius:35%; }
.gallon-trigger:hover img { filter:drop-shadow(20px 24px 0 rgba(17,16,15,.16)) saturate(1.08); }
.stamp { position:absolute; z-index:3; padding:8px 12px; border:2px solid var(--ink); background:var(--cream); font:800 10px "DM Sans"; letter-spacing:.12em; }
.stamp-one { top:12%; left:0; transform:rotate(-8deg); }
.stamp-two { right:0; bottom:15%; transform:rotate(7deg); }
@keyframes float { 50% { transform:translateY(-13px) rotate(1deg); } }
.rainbow-ripple { position:fixed; z-index:180; inset:0; pointer-events:none; opacity:0; background:repeating-radial-gradient(circle at var(--ripple-x) var(--ripple-y),transparent 0 4.5vmax,rgba(255,92,53,.16) 5.4vmax,rgba(255,224,92,.14) 6.2vmax,rgba(92,255,186,.14) 7vmax,rgba(101,174,255,.16) 7.8vmax,rgba(183,116,255,.18) 8.6vmax,transparent 10vmax); mix-blend-mode:screen; clip-path:circle(0 at var(--ripple-x) var(--ripple-y)); animation:rainbow-pond 1.25s cubic-bezier(.12,.62,.24,1) forwards; }
body.rippling main,body.rippling nav,body.rippling footer { animation:page-refraction .9s ease-out; transform-origin:var(--ripple-x) var(--ripple-y); }
@keyframes rainbow-pond { 0% { clip-path:circle(0 at var(--ripple-x) var(--ripple-y)); opacity:.88; } 55% { opacity:.65; } 100% { clip-path:circle(145vmax at var(--ripple-x) var(--ripple-y)); opacity:0; } }
@keyframes page-refraction { 0%,100% { transform:scale(1); } 35% { transform:scale(1.004); } 68% { transform:scale(.998); } }
.ticker { border-block:2px solid var(--ink); background:var(--orange); overflow:hidden; white-space:nowrap; font:700 19px/1 "Space Grotesk"; padding:16px 0; }
.ticker div { width:max-content; animation:ticker 22s linear infinite; }
@keyframes ticker { to { transform:translateX(-50%); } }
.song-section { background:var(--cream); padding:105px max(22px,calc((100vw - 1120px)/2)); }
.section-number { border-top:2px solid var(--ink); padding-top:12px; color:#615d58; }
.song-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:end; padding-top:65px; }
.eyebrow { color:var(--orange); margin:0 0 12px; }
.song-grid h2,.quiz-callout h2,.manifesto h2 { font-size:clamp(50px,7vw,90px); line-height:.88; }
.acronym-heading span,.acronym-label span { color:var(--purple); -webkit-text-stroke:1px var(--purple-dark); text-shadow:2px 2px 0 rgba(110,84,255,.12); }
.player-card { display:flex; align-items:center; gap:22px; padding:28px; background:var(--purple); border:2px solid var(--ink); box-shadow:10px 10px 0 var(--ink); }
.player-toggle { flex:0 0 64px; height:64px; border:2px solid var(--ink); border-radius:50%; background:var(--orange); cursor:pointer; font-size:20px; }
.player-toggle span { display:inline-block; margin-left:3px; }
.track-info { flex:1; min-width:0; }
.track-info strong,.track-info > span { display:block; }
.track-info strong { font:700 21px "Space Grotesk"; }
.track-info > span { color:#625d57; font-size:11px; margin-top:3px; }
.progress { height:9px; background:rgba(17,16,15,.18); margin-top:17px; cursor:pointer; }
.progress div { width:0; height:100%; background:var(--purple-dark); }
.times { display:flex; justify-content:space-between; margin-top:6px; font:700 10px "DM Sans"; }
.quiz-callout { min-height:720px; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:100px 22px; background:var(--ink); color:var(--cream); overflow:hidden; }
.quiz-callout .section-number { width:min(1120px,100%); position:absolute; top:50px; border-color:#77716b; text-align:left; }
.quiz-callout h2 em { color:var(--orange); font-style:normal; }
.quiz-callout > p:not(.eyebrow) { max-width:540px; color:#aaa49c; font-size:18px; }
.quiz-button { margin-top:28px; background:var(--purple); color:var(--ink); box-shadow:7px 7px 0 var(--orange); }
.quiz-mark { position:absolute; font:700 650px/1 "Space Grotesk"; color:transparent; -webkit-text-stroke:3px rgba(221,215,254,.11); transform:rotate(7deg); }
.quiz-callout > *:not(.quiz-mark) { position:relative; }
.manifesto { padding:110px max(22px,calc((100vw - 1120px)/2)); background:var(--orange); }
.manifesto h2 { margin-top:75px; font-size:clamp(60px,10vw,130px); }
.manifesto h2 span { color:var(--purple); -webkit-text-stroke:2px var(--ink); }
.manifesto-note { margin:60px 0 0 auto; width:min(430px,100%); display:grid; grid-template-columns:110px 1fr; gap:24px; padding-top:16px; border-top:2px solid var(--ink); }
.manifesto-note span { font-size:10px; font-weight:800; letter-spacing:.1em; }
.manifesto-note p { margin:0; font-size:14px; line-height:1.5; }
footer { display:flex; justify-content:space-between; gap:20px; padding:25px max(22px,calc((100vw - 1240px)/2)); background:var(--ink); color:#99938d; font-size:10px; font-weight:800; letter-spacing:.1em; }
footer a { color:var(--purple); text-decoration:none; }
@media(max-width:800px){
  .nav-chart{display:none}.hero{grid-template-columns:1fr;padding-top:80px}.hero-art{min-height:480px}.song-grid{grid-template-columns:1fr;gap:38px}.manifesto-note{margin-left:0}.stamp-one{left:4%}.stamp-two{right:4%}
}
@media(max-width:520px){
  nav{height:64px}.nav-links{gap:12px}.hero{min-height:auto;padding-block:70px 35px}.hero-art{min-height:390px}.gallon-trigger img{max-height:420px}.song-section{padding-block:75px}.player-card{padding:20px;gap:14px}.player-toggle{flex-basis:52px;height:52px}.quiz-callout{min-height:650px}.manifesto{padding-block:80px}footer{flex-direction:column}.stamp{font-size:8px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.gallon-trigger,.ticker div{animation:none}.entry-veil.leaving{animation:button-vanish .2s ease forwards}.entry-veil.leaving::before,.entry-veil.leaving::after{animation:none}.rainbow-ripple{animation-duration:.35s}body.rippling main,body.rippling nav,body.rippling footer{animation:none}}