:root {
  --ink: #2d2018;
  --brown: #765024;
  --cream: #fff8e8;
  --paper: #fffdf7;
  --yellow: #ffcf45;
  --yellow-light: #ffe997;
  --blue: #8fdbf4;
  --blue-dark: #2f8faa;
  --pink: #ff5f96;
  --pink-dark: #c52f67;
  --green: #87c95d;
  --white: #fff;
  --shadow: 0 18px 55px rgba(61, 38, 15, .13);
  --radius: 28px;
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
}
body.dialog-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 1rem; top: -5rem; z-index: 1000;
  background: var(--ink); color: #fff; padding: .8rem 1rem; border-radius: 8px;
}
.skip-link:focus { top: 1rem; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.section-pad { padding: 110px 0; }

h1, h2, h3, .brand, .footer-brand, .album-title, .pixel-title {
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", ui-rounded, sans-serif;
  letter-spacing: -.035em;
}
h1, h2, h3, p { margin-top: 0; }
h1 {
  font-size: clamp(3.2rem, 6.4vw, 6.4rem);
  line-height: .98;
  margin-bottom: 28px;
}
h2 {
  font-size: clamp(2.4rem, 4.7vw, 4.8rem);
  line-height: 1.02;
  margin-bottom: 24px;
}
h3 { font-size: clamp(1.35rem, 2vw, 2rem); line-height: 1.1; }
em { font-style: normal; color: var(--pink-dark); }

.eyebrow {
  display: flex; align-items: center; gap: 10px; margin-bottom: 22px;
  text-transform: uppercase; font-size: .76rem; font-weight: 900; letter-spacing: .14em;
}
.eyebrow span { width: 34px; height: 4px; border-radius: 99px; background: var(--pink); }
.mini-label { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 900; margin-bottom: 9px; }

.button {
  min-height: 54px; padding: 0 24px; border: 2px solid var(--ink); border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 850; text-decoration: none; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.button:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: 0 9px 0 rgba(45,32,24,.13); }
.button:focus-visible, a:focus-visible, button:focus-visible { outline: 4px solid rgba(47,143,170,.35); outline-offset: 4px; }
.button svg { width: 20px; height: 20px; fill: currentColor; }
.button-dark { background: var(--ink); color: #fff; }
.button-light { background: #fff; color: var(--ink); }
.button-pink { background: var(--pink); color: #fff; border-color: var(--ink); }
.button-small { min-height: 42px; padding: 0 18px; }
.text-link { font-weight: 850; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 4px; }
.text-link span { margin-left: 6px; }
.dark-link { color: var(--ink); }

.site-header {
  position: fixed; z-index: 100; top: 0; left: 0; right: 0;
  padding: 16px 0; transition: background .25s ease, box-shadow .25s ease, padding .25s ease;
}
.site-header.is-scrolled { background: rgba(255,253,247,.92); backdrop-filter: blur(18px); box-shadow: 0 7px 30px rgba(45,32,24,.08); padding: 10px 0; }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; }
.brand, .footer-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.35rem; font-weight: 950; text-decoration: none; }
.brand img { width: 42px; height: 52px; object-fit: contain; }
.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav > a { font-size: .91rem; font-weight: 800; text-decoration: none; position: relative; }
.main-nav > a::after { content:""; position:absolute; left:0; right:100%; bottom:-5px; height:3px; background:var(--pink); transition:right .2s ease; }
.main-nav > a:hover::after { right:0; }
.menu-toggle { display: none; width: 45px; height: 45px; border: 2px solid var(--ink); background: #fff; border-radius: 50%; padding: 10px; }
.menu-toggle span:not(.sr-only) { display: block; height: 2px; background: var(--ink); margin: 4px 0; transition: .2s ease; }

.hero {
  position: relative; min-height: 760px; padding-top: 150px;
  background: var(--yellow); overflow: hidden; display: grid; align-items: center;
}
.hero::after {
  content:""; position:absolute; inset:auto 0 0; height:28px;
  background: radial-gradient(circle at 14px -1px, transparent 15px, var(--paper) 16px) 0 0/28px 28px repeat-x;
}
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 30px; position: relative; z-index: 2; }
.hero-copy { max-width: 700px; }
.hero-lead { max-width: 650px; font-size: clamp(1.08rem, 1.45vw, 1.28rem); margin-bottom: 34px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 44px; }
.hero-proof { display: flex; gap: clamp(20px, 4vw, 52px); }
.hero-proof div { display: grid; }
.hero-proof strong { font-size: 1.6rem; line-height: 1; font-family: "Arial Rounded MT Bold", sans-serif; }
.hero-proof span { font-size: .75rem; font-weight: 750; margin-top: 5px; }
.hero-visual { min-height: 610px; position: relative; display: grid; place-items: center; }
.character-stage { position: relative; width: min(90%, 520px); aspect-ratio: .92; display: grid; place-items: center; }
.character-stage img { width: 76%; position: relative; z-index: 3; filter: drop-shadow(0 28px 22px rgba(71,43,12,.22)); transform: rotate(3deg); animation: float 4.5s ease-in-out infinite; }
.sunburst { position:absolute; inset:4%; border-radius:50%; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.44) 0deg 10deg, transparent 10deg 20deg); animation: spin 40s linear infinite; }
.hero-sticker {
  position:absolute; right:-8px; bottom:44px; z-index:4; width:150px; height:150px;
  background:var(--pink); color:#fff; border:3px solid var(--ink); border-radius:48% 52% 43% 57% / 56% 40% 60% 44%;
  display:grid; place-content:center; text-align:center; font-weight:800; line-height:1.05; transform:rotate(8deg); box-shadow: 8px 9px 0 var(--ink);
}
.hero-sticker strong { font-size:1.35rem; }
.burst { position:absolute; z-index:5; font-family:"Arial Rounded MT Bold",sans-serif; font-size:1.3rem; font-weight:950; background:#fff; border:3px solid var(--ink); padding:10px 15px; box-shadow:5px 5px 0 var(--ink); }
.burst-a { top:80px; left:-5px; transform:rotate(-10deg); }
.burst-b { top:190px; right:-25px; transform:rotate(9deg); background:var(--blue); }
.music-note { position:absolute; z-index:5; font-size:3rem; font-weight:900; color:var(--pink-dark); }
.note-one { left:8%; bottom:18%; transform:rotate(-18deg); }
.note-two { right:8%; top:18%; transform:rotate(15deg); }
.hero-shape { position:absolute; border:3px solid rgba(45,32,24,.18); border-radius:50%; }
.hero-shape-one { width:190px; height:190px; left:-100px; top:150px; }
.hero-shape-two { width:90px; height:90px; right:42%; bottom:45px; }
.scroll-cue { position:absolute; z-index:4; bottom:38px; left:50%; width:34px; height:50px; border:2px solid var(--ink); border-radius:20px; transform:translateX(-50%); }
.scroll-cue span { position:absolute; top:8px; left:50%; width:5px; height:9px; background:var(--ink); border-radius:9px; transform:translateX(-50%); animation: scrollDot 1.7s ease infinite; }

.section-heading { max-width: 760px; margin: 0 auto 58px; text-align: center; }
.section-heading .eyebrow { justify-content: center; }
.section-heading > p:last-child { font-size: 1.1rem; }
.section-heading-left { margin-left:0; text-align:left; max-width:900px; }
.section-heading-left .eyebrow { justify-content:flex-start; }

.music { background: var(--paper); }
.album-grid { display:grid; grid-template-columns: .82fr 1.18fr; gap: clamp(35px,6vw,82px); align-items:center; }
.album-card { max-width: 475px; margin-inline:auto; }
.album-cover {
  position:relative; aspect-ratio:1; overflow:hidden; border:3px solid var(--ink); border-radius:25px;
  background:linear-gradient(145deg,#d9f5ff,#77cee9); box-shadow:12px 14px 0 var(--ink);
}
.album-rays { position:absolute; inset:-25%; background:repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.52) 0 9deg, transparent 9deg 18deg); }
.album-cover img { position:absolute; width:56%; left:23%; top:4%; z-index:2; filter:drop-shadow(0 15px 12px rgba(45,32,24,.18)); }
.album-title { position:absolute; z-index:3; left:7%; bottom:8%; color:#fff; font-size:clamp(2rem,5vw,4.5rem); line-height:.68; text-shadow:-3px -3px 0 var(--brown),3px -3px 0 var(--brown),-3px 3px 0 var(--brown),3px 3px 0 var(--brown); transform:rotate(-3deg); }
.album-title strong { font-size:1.35em; }
.album-badge { position:absolute; right:4%; bottom:7%; z-index:4; color:#fff; background:var(--pink); border:3px solid var(--ink); padding:8px 13px; font-size:1.2rem; font-weight:950; transform:rotate(7deg); box-shadow:5px 5px 0 var(--ink); }
.album-meta { display:flex; align-items:center; justify-content:space-between; padding-top:30px; }
.album-meta p { margin-bottom:4px; font-size:.82rem; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:var(--brown); }
.album-meta h3 { margin:0; font-size:2rem; }
.round-play { width:58px; height:58px; border:2px solid var(--ink); border-radius:50%; background:var(--yellow); cursor:pointer; display:grid; place-items:center; transition:.2s ease; }
.round-play:hover { transform:scale(1.06) rotate(4deg); }
.round-play svg { width:24px; fill:var(--ink); }
.tracklist ol { list-style:none; margin:0; padding:0; border-top:2px solid var(--ink); }
.tracklist li { min-height:58px; display:grid; grid-template-columns:45px 1fr auto; align-items:center; gap:12px; border-bottom:1px solid rgba(45,32,24,.22); transition:background .15s ease,padding .15s ease; }
.tracklist li:hover { background:var(--cream); padding-inline:12px; }
.track-number,.track-time { font-size:.74rem; font-weight:800; color:#795f4b; }
.track-name { font-weight:850; }
.tracklist-actions { display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:30px; }
.karaoke-card { margin-top:90px; background:var(--ink); color:#fff; border-radius:var(--radius); padding:30px 35px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:25px; box-shadow:var(--shadow); }
.karaoke-card h3 { margin:0; max-width:680px; }
.karaoke-icon { width:72px; height:72px; background:var(--yellow); border-radius:50%; display:grid; place-items:center; transform:rotate(-7deg); }
.karaoke-icon svg { width:42px; fill:var(--ink); }

.universe { background:var(--cream); position:relative; }
.universe::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.3; background-image:radial-gradient(var(--brown) 1px,transparent 1px); background-size:28px 28px; }
.universe .container { position:relative; }
.universe-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.universe-card { position:relative; min-height:340px; padding:34px; border:3px solid var(--ink); border-radius:var(--radius); overflow:hidden; box-shadow:8px 9px 0 var(--ink); transition:transform .2s ease; }
.universe-card:hover { transform:translateY(-8px) rotate(.8deg); }
.card-yellow { background:var(--yellow); }
.card-blue { background:var(--blue); }
.card-pink { background:var(--pink); color:#fff; }
.card-kicker { font-size:.8rem; font-weight:900; letter-spacing:.1em; }
.universe-card h3 { margin-top:120px; margin-bottom:14px; font-size:1.8rem; }
.universe-card p { margin-bottom:0; font-weight:650; }
.doodle { position:absolute; top:35px; right:35px; width:115px; height:115px; display:grid; place-items:center; font-size:4.5rem; }
.candy { border:14px solid #fff; border-radius:50%; color:var(--pink); box-shadow:-25px 0 0 -15px var(--pink),25px 0 0 -15px var(--pink); }
.snow { color:#fff; font-size:7rem; }
.note { color:var(--yellow); font-size:6rem; transform:rotate(12deg); }
.manifesto { margin-top:75px; max-width:880px; padding-left:34px; border-left:8px solid var(--pink); }
.manifesto p { font-family:"Arial Rounded MT Bold",sans-serif; font-size:clamp(1.6rem,3vw,2.7rem); line-height:1.2; margin-bottom:14px; }
.manifesto span { font-weight:850; }

.story { background:var(--blue); overflow:hidden; }
.story-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(40px,7vw,100px); align-items:center; }
.story-visual { position:relative; }
.browser-window { border:3px solid var(--ink); border-radius:18px; overflow:hidden; background:#ddd; box-shadow:14px 15px 0 var(--ink); transform:rotate(-2deg); }
.browser-bar { height:48px; background:#e8e8e8; border-bottom:3px solid var(--ink); display:flex; align-items:center; gap:7px; padding:0 14px; }
.browser-bar span { width:12px; height:12px; border:2px solid var(--ink); border-radius:50%; }
.browser-bar span:nth-child(1){background:var(--pink)} .browser-bar span:nth-child(2){background:var(--yellow)} .browser-bar span:nth-child(3){background:var(--green)}
.browser-bar b { margin-left:12px; font-family:monospace; font-size:.8rem; }
.browser-screen { min-height:470px; position:relative; display:grid; place-items:center; background:#242047; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:18px 18px; overflow:hidden; }
.browser-screen img { width:42%; z-index:2; margin-top:45px; filter:drop-shadow(0 10px 8px #0005); }
.pixel-title { position:absolute; top:30px; left:0; right:0; color:var(--yellow); text-align:center; font-size:1.8rem; line-height:.95; text-shadow:4px 4px 0 #d62f6b; }
.dialup { position:absolute; bottom:18px; left:18px; right:18px; color:#adff9d; font-family:monospace; font-size:.8rem; }
.year-stamp { position:absolute; z-index:5; right:-24px; bottom:-30px; background:var(--yellow); border:3px solid var(--ink); box-shadow:7px 8px 0 var(--ink); padding:12px 20px; font-size:2rem; font-weight:950; transform:rotate(8deg); }
.story-copy p:not(.eyebrow) { font-size:1.09rem; }
.story-facts { list-style:none; margin:35px 0; padding:0; display:grid; gap:18px; }
.story-facts li { display:grid; grid-template-columns:130px 1fr; gap:20px; align-items:center; padding-bottom:18px; border-bottom:1px solid rgba(45,32,24,.3); }
.story-facts strong { font-family:"Arial Rounded MT Bold",sans-serif; font-size:1.55rem; }
.story-facts span { font-weight:700; }

.press { background:var(--paper); }
.press-header { display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:end; }
.press-logos { display:flex; justify-content:flex-end; gap:24px; flex-wrap:wrap; padding-bottom:30px; }
.press-logos span { font-family:Georgia,serif; font-weight:900; font-size:1.05rem; }
.quotes { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:52px; }
blockquote { margin:0; min-height:245px; background:var(--cream); border:2px solid var(--ink); border-radius:22px; padding:28px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:6px 7px 0 rgba(45,32,24,.16); }
blockquote::before { content:"“"; font-family:Georgia,serif; color:var(--pink); font-size:4rem; line-height:.5; }
blockquote p { margin:24px 0; font-size:1.16rem; font-weight:720; }
blockquote cite { font-size:.78rem; font-style:normal; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }

.shop { background:var(--yellow); }
.shop-grid { display:grid; grid-template-columns:.95fr 1.05fr; gap:80px; align-items:center; }
.shop-copy p:not(.eyebrow) { max-width:590px; font-size:1.1rem; }
.shop-actions { display:flex; gap:24px; align-items:center; flex-wrap:wrap; margin-top:34px; }
.merch-stage { min-height:520px; position:relative; }
.shirt { position:absolute; left:8%; top:5%; width:300px; height:360px; background:#fff4d5; clip-path:polygon(26% 0,39% 9%,61% 9%,74% 0,100% 17%,88% 40%,75% 34%,75% 100%,25% 100%,25% 34%,12% 40%,0 17%); filter:drop-shadow(14px 18px 0 var(--ink)); display:grid; place-items:center; }
.shirt img { width:42%; margin-top:30px; }
.shirt span { position:absolute; bottom:52px; font-weight:950; font-size:1.2rem; }
.shirt-neck { position:absolute; top:0; left:50%; width:70px; height:42px; border-radius:0 0 50px 50px; background:var(--yellow); transform:translateX(-50%); }
.mug { position:absolute; right:5%; bottom:7%; width:180px; height:220px; background:var(--blue); border:3px solid var(--ink); border-radius:15px 15px 38px 38px; display:grid; place-items:center; box-shadow:10px 12px 0 var(--ink); }
.mug::after { content:""; position:absolute; right:-58px; top:50px; width:70px; height:92px; border:18px solid var(--ink); border-left:0; border-radius:0 50px 50px 0; }
.mug::before { content:""; position:absolute; right:-47px; top:60px; width:45px; height:70px; border:12px solid var(--blue); border-left:0; border-radius:0 40px 40px 0; z-index:2; }
.mug img { width:45%; }
.cap { position:absolute; right:8%; top:5%; width:210px; height:135px; background:var(--pink); border:3px solid var(--ink); border-radius:100px 100px 28px 28px; box-shadow:8px 9px 0 var(--ink); display:grid; place-items:center; transform:rotate(6deg); }
.cap::after { content:""; position:absolute; right:-50px; bottom:-10px; width:110px; height:42px; background:var(--pink); border:3px solid var(--ink); border-radius:0 100% 50% 0; transform:rotate(9deg); z-index:-1; }
.cap span { color:#fff; font-weight:950; text-align:center; line-height:.9; }
.merch-sticker { position:absolute; left:0; bottom:0; background:var(--green); border:3px solid var(--ink); box-shadow:6px 7px 0 var(--ink); border-radius:50%; width:135px; height:135px; display:grid; place-content:center; text-align:center; font-weight:950; transform:rotate(-10deg); }

.contact { background:var(--paper); }
.contact-card { position:relative; overflow:hidden; min-height:350px; background:var(--ink); color:#fff; border-radius:35px; padding:55px 300px 55px 55px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; box-shadow:var(--shadow); }
.contact-card h2 { margin-bottom:14px; }
.contact-card p:not(.eyebrow) { max-width:630px; }
.contact-card .button { margin-top:16px; }
.contact-card > img { position:absolute; right:35px; bottom:-35px; width:220px; transform:rotate(4deg); filter:drop-shadow(0 16px 12px #0007); }

.site-footer { background:#17110e; color:#fff; padding:50px 0 24px; }
.footer-top { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.18); }
.footer-brand img { width:46px; }
.footer-top p { margin:0; max-width:520px; color:#d6cbc1; }
.footer-links { display:flex; gap:20px; }
.footer-links a { font-weight:800; text-decoration:none; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; padding-top:22px; color:#a99d94; font-size:.76rem; }

.mobile-listen { display:none; }
.listen-dialog { width:min(calc(100% - 32px),540px); border:3px solid var(--ink); border-radius:30px; padding:42px; background:var(--cream); color:var(--ink); box-shadow:18px 20px 0 var(--ink); overflow:visible; }
.listen-dialog::backdrop { background:rgba(23,17,14,.72); backdrop-filter:blur(7px); }
.listen-dialog h2 { font-size:2.35rem; margin-bottom:26px; max-width:360px; }
.dialog-close { position:absolute; right:18px; top:18px; width:42px; height:42px; border:2px solid var(--ink); border-radius:50%; background:#fff; font-size:1.6rem; cursor:pointer; z-index:3; }
.dialog-character { position:absolute; right:50px; top:-92px; width:130px; height:150px; overflow:hidden; }
.dialog-character img { width:100%; }
.platform-list { display:grid; gap:10px; }
.platform { display:grid; grid-template-columns:48px 1fr auto; gap:14px; align-items:center; min-height:72px; padding:10px 16px; background:#fff; border:2px solid var(--ink); border-radius:16px; text-decoration:none; transition:.18s ease; }
.platform:hover { transform:translateX(6px); box-shadow:5px 6px 0 var(--ink); }
.platform-icon { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-size:1.35rem; font-weight:950; color:#fff; background:var(--ink); }
.spotify .platform-icon{background:#1db954}.deezer .platform-icon{background:#a238ff}.apple .platform-icon{background:#fa365a}.youtube .platform-icon{background:#ff0033}
.platform span:nth-child(2) { display:grid; }
.platform strong { font-size:1.05rem; }
.platform small { color:#705f54; }

.reveal { opacity:0; transform:translateY(28px); transition:opacity .65s ease,transform .65s ease; }
.reveal.is-visible { opacity:1; transform:none; }
.reveal-delay,.reveal-delay-one { transition-delay:.12s; }
.reveal-delay-two { transition-delay:.24s; }

@keyframes float { 0%,100%{transform:translateY(0) rotate(3deg)} 50%{transform:translateY(-18px) rotate(1deg)} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes scrollDot { 0%{opacity:0;transform:translate(-50%,0)} 30%{opacity:1} 100%{opacity:0;transform:translate(-50%,18px)} }

@media (max-width: 980px) {
  .section-pad { padding:85px 0; }
  .menu-toggle { display:block; }
  .main-nav {
    position:fixed; top:78px; left:20px; right:20px; padding:22px; background:var(--paper); border:3px solid var(--ink); border-radius:22px; box-shadow:9px 10px 0 var(--ink);
    display:grid; gap:18px; opacity:0; visibility:hidden; transform:translateY(-15px); transition:.2s ease;
  }
  .main-nav.is-open { opacity:1; visibility:visible; transform:none; }
  .main-nav > a { font-size:1.15rem; }
  .main-nav .button { width:100%; }
  .hero { padding-top:130px; }
  .hero-grid { grid-template-columns:1fr; }
  .hero-copy { max-width:780px; }
  .hero-visual { min-height:480px; }
  .character-stage { width:min(70vw,490px); }
  .album-grid { grid-template-columns:1fr; }
  .album-card { max-width:430px; }
  .universe-grid { grid-template-columns:1fr; }
  .universe-card { min-height:260px; }
  .universe-card h3 { margin-top:70px; }
  .doodle { width:90px;height:90px;font-size:3.5rem; }
  .story-grid,.shop-grid { grid-template-columns:1fr; }
  .story-visual { max-width:600px; margin-inline:auto; }
  .press-header { grid-template-columns:1fr; }
  .press-logos { justify-content:flex-start; padding-bottom:0; }
  .quotes { grid-template-columns:1fr; }
  blockquote { min-height:210px; }
  .shop-grid { gap:25px; }
  .merch-stage { max-width:600px; width:100%; margin-inline:auto; }
  .footer-top { grid-template-columns:1fr; }
  .footer-links { flex-wrap:wrap; }
}

@media (max-width: 680px) {
  .container { width:min(calc(100% - 28px),var(--container)); }
  .section-pad { padding:70px 0; }
  .site-header { padding:10px 0; }
  .brand span { font-size:1.15rem; }
  .brand img { width:36px; height:44px; }
  h1 { font-size:clamp(2.85rem,14vw,4.3rem); }
  h2 { font-size:clamp(2.25rem,11vw,3.2rem); }
  .hero { min-height:auto; padding-top:115px; padding-bottom:80px; }
  .hero-lead { font-size:1rem; }
  .hero-actions { display:grid; }
  .hero-actions .button { width:100%; }
  .hero-proof { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
  .hero-proof strong { font-size:1.25rem; }
  .hero-proof span { font-size:.64rem; }
  .hero-visual { min-height:390px; }
  .character-stage { width:100%; }
  .character-stage img { width:66%; }
  .hero-sticker { width:115px;height:115px;right:0;bottom:22px;font-size:.8rem;box-shadow:5px 6px 0 var(--ink); }
  .hero-sticker strong { font-size:1.05rem; }
  .burst { font-size:.9rem;padding:7px 10px; }
  .burst-a { top:58px;left:0; }.burst-b { top:115px;right:0; }
  .scroll-cue { display:none; }
  .section-heading { text-align:left; margin-bottom:40px; }
  .section-heading .eyebrow { justify-content:flex-start; }
  .album-cover { border-radius:18px; box-shadow:8px 9px 0 var(--ink); }
  .tracklist li { grid-template-columns:35px 1fr auto; gap:7px; }
  .track-name { font-size:.91rem; }
  .tracklist-actions { align-items:stretch; display:grid; }
  .karaoke-card { margin-top:60px; grid-template-columns:1fr; padding:25px; }
  .karaoke-icon { width:60px;height:60px; }
  .karaoke-card .button { width:100%; }
  .universe-card { padding:25px; }
  .manifesto { margin-top:55px;padding-left:22px; }
  .browser-screen { min-height:380px; }
  .story-facts li { grid-template-columns:1fr; gap:3px; }
  .press-logos { gap:14px; }
  .press-logos span { font-size:.85rem; }
  .merch-stage { min-height:430px; transform:scale(.84); transform-origin:top center; margin-bottom:-60px; }
  .contact-card { padding:35px 28px 260px; }
  .contact-card > img { right:50%; transform:translateX(50%) rotate(4deg); width:190px; }
  .contact-card .button { width:100%; font-size:.85rem; }
  .footer-bottom { flex-direction:column; }
  .mobile-listen {
    position:fixed; z-index:90; left:50%; bottom:max(16px,env(safe-area-inset-bottom)); transform:translateX(-50%);
    min-width:150px; height:52px; border:3px solid var(--ink); border-radius:999px; background:var(--pink); color:#fff; box-shadow:5px 6px 0 var(--ink); display:flex; align-items:center; justify-content:center; gap:8px; font-weight:900;
  }
  .mobile-listen svg { width:18px; fill:currentColor; }
  .listen-dialog { padding:35px 20px 22px; border-radius:24px; box-shadow:8px 9px 0 var(--ink); }
  .listen-dialog h2 { font-size:2rem; }
  .dialog-character { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .reveal { opacity:1; transform:none; }
}