/* Mixtapes follows GrooveFile's product-page rhythm, in its own evening palette. */
:root { color-scheme:dark; --bg:#141a19; --bg2:#141a19; --ink:#f4eddf; --muted:#b8bbb1; --accent:#f1cb8b; --line:#ffffff26; --card:#1c2522; --shadow:none; }
body { background:radial-gradient(ellipse at 85% 10%,#62303930,transparent 40rem),#141a19; }
.wrap { width:100%; max-width:1320px; padding-inline:32px; }
.suitebar { padding-bottom:22px; border-bottom:1px solid var(--line); }
.mixtapes-hero { display:grid; grid-template-columns:1fr 1.05fr; align-items:center; gap:64px; padding:72px 0 58px; }
.mixtapes-intro { min-width:0; }
.mixtapes-brand { display:flex; align-items:center; gap:14px; font-size:18px; font-weight:650; }
.mixtapes-brand img { width:64px; height:64px; }
.verb { color:var(--accent); }
.mixtapes-hero .verb { margin:30px 0 16px; }
.mixtapes-hero h1 { font:400 clamp(48px,5.3vw,76px)/1.04 Georgia,serif; letter-spacing:-.045em; }
.mixtapes-hero h1 em { font-weight:400; color:var(--accent); }
.mixtapes-lede { color:var(--muted); font-size:17px; line-height:1.75; margin:24px 0 0; max-width:580px; }
.download-actions { justify-content:flex-start; flex-wrap:wrap; gap:16px 24px; }
.download-button { padding:13px 22px; background:var(--accent); color:#1d2722; text-align:center; }
.source-link { color:var(--ink); text-decoration:underline; text-decoration-color:#f1cb8b66; text-underline-offset:5px; }
.mixtapes-beta { font-size:13px; color:var(--muted); margin:17px 0 0; }
.mixtapes-hero-art { position:relative; min-width:0; margin:0; padding:32px 0; background:radial-gradient(ellipse,#a53a4a35,transparent 68%); }
.mixtapes-hero-art img { display:block; width:100%; height:auto; transform:rotate(-5deg); filter:drop-shadow(0 30px 30px #0007); }
.mixtapes-hero-art figcaption { margin-top:20px; font-size:10px; letter-spacing:.2em; text-align:center; color:var(--muted); }
.mixtapes-facts { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px 28px; padding:23px 0; border-block:1px solid var(--line); color:var(--muted); font-size:13px; }
#features { scroll-margin-top:28px; }
.mixtapes-story { display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:80px; padding-top:96px; }
.mixtapes-story-reverse { grid-template-columns:1.15fr .85fr; }
.mixtapes-story-reverse .mixtapes-story-copy { grid-column:2; grid-row:1; }
.mixtapes-story-reverse .mixtapes-illustration { grid-column:1; grid-row:1; }
.mixtapes-story .verb { margin:0 0 18px; }
.mixtapes-story h2,.mixtapes-download h2,.seo-answers h2 { font:400 clamp(32px,3.4vw,48px)/1.13 Georgia,serif; letter-spacing:-.035em; }
.mixtapes-story-copy > p:not(.verb) { margin:24px 0 0; max-width:480px; color:var(--muted); font-size:17px; line-height:1.8; }
.mixtapes-illustration { position:relative; display:grid; place-items:center; min-width:0; min-height:360px; padding:38px; border-radius:24px; overflow:hidden; }
.mixtapes-sequence { background:#293d3c; }
.mixtapes-paper { width:min(100%,340px); padding:30px; border-radius:4px; background:#f4e9d2; color:#263b35; box-shadow:0 24px 40px #0003; transform:rotate(-4deg); overflow:hidden; }
.mixtapes-art-label { font-size:10px; letter-spacing:.15em; }
.mixtapes-track { display:flex; align-items:center; gap:16px; padding:19px 0; border-bottom:1px solid #263b3526; }
.mixtapes-track b { font:italic 26px Georgia,serif; font-weight:400; }
.mixtapes-track span { width:65%; height:5px; border-radius:4px; background:#6f8b7a; }
.mixtapes-track:nth-child(3) span { width:44%; background:#b65b49; }
.mixtapes-track:nth-child(4) span { width:55%; }
.mixtapes-track i { margin-left:auto; width:7px; height:7px; border-radius:50%; background:#b65b49; }
.mixtapes-wave { color:#b65b49; font-size:20px; letter-spacing:2px; margin-top:21px; white-space:nowrap; }
.mixtapes-together { background:#492b34; display:flex; justify-content:center; padding-bottom:68px; }
.mixtapes-sleeve { position:relative; display:grid; place-items:center; width:44%; aspect-ratio:1; padding:15px; color:#293a34; background:#e8bd83; box-shadow:0 15px 30px #0003; transform:rotate(-10deg); }
.mixtapes-sleeve > span:last-child { position:absolute; left:14px; bottom:10px; font:italic 24px Georgia,serif; }
.mixtapes-disc { display:block; width:75%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,#f0c47e 0 6%,#b55a49 7% 25%,#262b29 26% 28%,#171d1b 29% 33%,#303632 34% 35%,#171d1b 36% 52%,#303632 53% 54%,#171d1b 55%); }
.mixtapes-together .mixtapes-sleeve:nth-child(2) { margin-left:-8%; background:#9cb5a2; transform:rotate(12deg) translateY(24px); }
.mixtapes-together-note { position:absolute; bottom:25px; color:#f2d9b1; font:italic 32px Georgia,serif; }
.mixtapes-discover { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; background:#202c37; padding:40px 60px; }
.mixtapes-discover .mixtapes-sleeve { width:100%; transform:rotate(-5deg); }
.mixtapes-discover .mixtapes-sleeve:nth-child(2) { background:#a7b6aa; transform:rotate(6deg); }
.mixtapes-discover .mixtapes-sleeve:nth-child(3) { background:#b66657; transform:rotate(3deg); }
.mixtapes-discover .mixtapes-sleeve:nth-child(4) { background:#b9c3ce; transform:rotate(-4deg); }
.mixtapes-discover .mixtapes-sleeve > span:last-child { font:11px -apple-system,BlinkMacSystemFont,sans-serif; }
.mixtapes-gift { background:#3b3930; padding-top:75px; }
.mixtapes-envelope { position:relative; width:85%; max-width:350px; height:210px; background:#d6ba89; border-radius:4px; box-shadow:0 22px 35px #0004; transform:rotate(-5deg); }
.mixtapes-envelope::after { content:""; position:absolute; inset:0; clip-path:polygon(0 0,50% 52%,100% 0,100% 100%,0 100%); background:#eddbb5; border-radius:4px; }
.mixtapes-gift-note { position:absolute; display:flex; align-items:flex-start; justify-content:center; gap:18px; inset:-40px 17px 35px; padding:20px; background:#fcf2dd; color:#334438; border-radius:3px; box-shadow:0 -5px 20px #0001; }
.mixtapes-gift-note img { width:80px; height:80px; border-radius:22%; }
.mixtapes-gift-note span { font:italic 25px/1.1 Georgia,serif; }
.notice { margin-top:86px; max-width:none; padding:32px 0; font-size:14px; line-height:1.75; }
.mixtapes-download { display:flex; align-items:center; justify-content:space-between; gap:32px; padding:42px; margin:16px 0 72px; background:#263a31; border-radius:24px; }
.mixtapes-download .verb { margin-top:0; }
.mixtapes-download h2 { font-size:36px; }
.mixtapes-download p:not(.verb) { margin-bottom:0; color:var(--muted); font-size:14px; }
.mixtapes-download > a { flex-shrink:0; }
.seo-answers { margin-top:0; }
.seo-answers dl { gap:32px 48px; }
.seo-answers dl > div { padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.seo-answers .kicker,.suite-more-title { color:var(--accent); }
@media(max-width:1000px) { .mixtapes-hero { gap:30px; } .mixtapes-story,.mixtapes-story-reverse { gap:36px; } .mixtapes-illustration { min-height:320px; padding:28px; } .mixtapes-discover { padding:35px 45px; } }
@media(max-width:800px) { .mixtapes-hero { grid-template-columns:1fr; padding-top:40px; gap:12px; } .mixtapes-hero-art { width:min(100%,520px); justify-self:center; padding:0; } .mixtapes-lede { max-width:620px; } .mixtapes-story,.mixtapes-story-reverse { grid-template-columns:1fr 1fr; } .mixtapes-story h2 { font-size:34px; } .mixtapes-download { align-items:flex-start; flex-direction:column; } }
@media(max-width:620px) { .wrap { padding-inline:20px; } .mixtapes-hero { padding:28px 0 34px; } .mixtapes-brand { font-size:16px; } .mixtapes-brand img { width:52px; height:52px; } .mixtapes-hero .verb { margin-top:25px; font-size:10px; } .mixtapes-hero h1 { font-size:clamp(44px,11vw,64px); } .mixtapes-lede { font-size:16px; line-height:1.7; } .download-actions { flex-direction:row; align-items:center; } .download-button { font-size:14px; } .mixtapes-hero-art { max-width:400px; } .mixtapes-facts { display:grid; grid-template-columns:1fr 1fr; font-size:12px; gap:15px; } .mixtapes-story,.mixtapes-story-reverse { grid-template-columns:1fr; gap:25px; padding-top:58px; } .mixtapes-story-reverse .mixtapes-story-copy,.mixtapes-story-reverse .mixtapes-illustration { grid-column:auto; grid-row:auto; } .mixtapes-story-copy > p:not(.verb) { font-size:16px; margin-top:20px; } .mixtapes-illustration { min-height:300px; } .mixtapes-paper { padding:25px; } .mixtapes-wave { font-size:16px; letter-spacing:1px; } .mixtapes-gift-note { gap:10px; padding:12px; } .mixtapes-gift-note img { width:58px; height:58px; } .mixtapes-gift-note span { font-size:22px; } .mixtapes-envelope { width:95%; height:175px; } .mixtapes-download { padding:28px 24px; margin-bottom:55px; } .mixtapes-download h2 { font-size:29px; } .notice { margin-top:56px; } }