:root{--ink:#181217;--plum:#2a1d27;--mauve:#8d596c;--rose:#c98699;--blush:#f2d9df;--cream:#fff9f2;--copper:#cf8a62;--gold:#f0c68d;--line:rgba(255,249,242,.16);--sans:"DM Sans",sans-serif;--serif:"Playfair Display",serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--sans);font-size:16px;line-height:1.6}a{color:inherit;text-decoration:none}button{font:inherit}.site-header{position:absolute;z-index:10;top:0;left:0;right:0;height:88px;padding:0 clamp(22px,5vw,80px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.1)}.brand{display:flex;align-items:center;gap:13px;font-weight:700;letter-spacing:.04em}.brand-mark{width:40px;height:40px;border:1px solid var(--copper);border-radius:50%;display:grid;place-items:center;color:var(--gold);font-size:.67rem;letter-spacing:.12em}.site-header nav{display:flex;gap:30px}.site-header nav a{font-size:.88rem;font-weight:600;opacity:.82}.site-header nav a:hover{opacity:1;color:var(--gold)}.menu-button{display:none;background:transparent;border:1px solid var(--line);color:var(--cream);padding:8px 13px;border-radius:999px}.hero{min-height:760px;height:100vh;max-height:980px;position:relative;display:flex;align-items:center;overflow:hidden}.hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,10,14,.96) 0%,rgba(22,14,20,.78) 39%,rgba(22,14,20,.18) 72%),linear-gradient(0deg,rgba(24,18,23,.75),transparent 35%)}.hero-copy{position:relative;z-index:2;width:min(720px,88vw);margin-left:clamp(22px,8vw,140px);padding-top:70px}.eyebrow{margin:0 0 18px;color:var(--gold);font-size:.76rem;letter-spacing:.17em;text-transform:uppercase;font-weight:700}.hero h1{font-family:var(--serif);font-size:clamp(3.7rem,7.8vw,8rem);line-height:.87;letter-spacing:-.045em;margin:0 0 30px;max-width:900px}.hero h1 em{color:var(--blush);font-weight:600}.intro{font-size:clamp(1rem,1.35vw,1.25rem);max-width:650px;color:rgba(255,249,242,.78);line-height:1.65}.hero-actions{display:flex;gap:13px;margin-top:32px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:49px;padding:0 24px;border-radius:999px;font-weight:700;font-size:.92rem}.button-primary{background:linear-gradient(135deg,var(--copper),var(--gold));color:#211217}.button-ghost{border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(8px)}.button:hover{transform:translateY(-2px)}.scroll-cue{position:absolute;z-index:2;bottom:28px;right:clamp(22px,5vw,80px);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;display:flex;gap:10px;align-items:center}.scroll-cue span{font-size:1.2rem;color:var(--gold)}.listen-bar{background:var(--cream);color:var(--ink);padding:25px clamp(22px,5vw,80px);display:flex;justify-content:space-between;align-items:center;gap:30px}.listen-bar p{font-family:var(--serif);font-size:1.12rem;margin:0}.listen-bar div{display:flex;gap:28px;flex-wrap:wrap}.listen-bar a{font-weight:700;font-size:.86rem}.listen-bar a:hover{color:var(--mauve)}.section{padding:clamp(80px,10vw,150px) clamp(22px,8vw,140px)}.section-heading h2,.about h2,.shop h2{font-family:var(--serif);font-size:clamp(2.7rem,5vw,5.2rem);letter-spacing:-.04em;line-height:1.02;margin:0}.split-heading{display:grid;grid-template-columns:1.3fr .7fr;gap:60px;align-items:end;margin-bottom:50px}.split-heading>p{color:rgba(255,249,242,.66);max-width:470px;margin:0}.latest{background:#211820}.feature-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,.82fr);gap:24px;margin-top:50px}.feature-card{display:grid;grid-template-columns:minmax(240px,.82fr) 1.18fr;background:var(--cream);color:var(--ink);min-height:440px}.album-art{min-height:440px;padding:32px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.aligned-art{background:radial-gradient(circle at 24% 20%,#fff 0 5%,transparent 6%),linear-gradient(145deg,#e7b1c1 0%,#f9ebe8 35%,#b87b92 36%,#fff5ec 60%,#9c6176 61%,#30202b 100%)}.aligned-art:after{content:"";position:absolute;inset:-20%;background:repeating-linear-gradient(72deg,transparent 0 68px,rgba(227,167,103,.65) 69px 71px,transparent 72px 114px);transform:rotate(-8deg)}.album-art>*{position:relative;z-index:1}.album-kicker{text-transform:uppercase;letter-spacing:.14em;font-size:.64rem;font-weight:700}.album-art strong{font-family:var(--serif);font-size:clamp(2.2rem,4vw,4.6rem);line-height:.87;color:#2a1923;text-shadow:0 1px #fff}.feature-copy{padding:clamp(34px,5vw,72px);display:flex;flex-direction:column;justify-content:center}.feature-copy h3,.spotlight-card h3{font-family:var(--serif);font-size:clamp(2rem,3vw,3.2rem);line-height:1.1;margin:8px 0 18px}.feature-copy>p:not(.track-count){color:#6b5862}.track-count{text-transform:uppercase;font-size:.73rem;letter-spacing:.12em;color:var(--mauve);font-weight:700}.inline-actions{display:flex;gap:25px;flex-wrap:wrap;margin-top:24px}.text-link{font-weight:700;border-bottom:1px solid var(--copper);padding-bottom:4px}.text-link.muted{color:#766770;border-color:#b9a9b1}.spotlight-card{background:linear-gradient(160deg,#7c465a,#3a2433);padding:42px;display:flex;flex-direction:column;min-height:440px}.spotlight-card>p:not(.eyebrow){color:rgba(255,255,255,.72)}.round-play{margin-top:auto;width:58px;height:58px;border-radius:50%;background:var(--cream);color:var(--plum);display:grid;place-items:center;padding-left:4px}.playlists{background:var(--ink)}.playlist-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.playlist-card{min-height:390px;padding:25px;display:flex;flex-direction:column;border:1px solid var(--line);position:relative;overflow:hidden;transition:.25s ease}.playlist-card:before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;filter:blur(10px);opacity:.38;right:-120px;top:-80px}.playlist-card>*{position:relative}.playlist-card:hover{transform:translateY(-5px);border-color:rgba(240,198,141,.5)}.playlist-number{font-family:var(--serif);font-size:1.5rem;color:var(--gold)}.playlist-type{text-transform:uppercase;letter-spacing:.13em;font-size:.68rem;margin-top:8px;color:rgba(255,255,255,.56)}.playlist-card h3{font-family:var(--serif);font-size:2rem;line-height:1.05;margin:auto 0 12px}.playlist-card p{color:rgba(255,255,255,.65);font-size:.92rem}.card-arrow{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);margin-top:25px}.discover{background:#3e2635}.discover:before{background:#c77991}.feel{background:#2d2332}.feel:before{background:#9b62a4}.sunday{background:#4b3828}.sunday:before{background:#e4b96e}.sleep{background:#1d2b3a}.sleep:before{background:#668ebc}.social{background:#f4e8e3;color:var(--ink)}.social .eyebrow{color:#9c573d}.social .split-heading{margin-bottom:45px}.social-links{display:flex;justify-content:flex-end;gap:24px;font-weight:700}.social-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.social-post{aspect-ratio:4/5;padding:30px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.social-post:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 15%,rgba(255,255,255,.3),transparent 30%),repeating-linear-gradient(128deg,transparent 0 55px,rgba(235,184,124,.25) 56px 58px,transparent 59px 100px)}.social-post>*{position:relative}.social-post span,.social-post small{font-size:.68rem;font-weight:700;letter-spacing:.12em}.social-post blockquote{font-family:var(--serif);font-size:clamp(1.8rem,3vw,3.2rem);line-height:1.05;margin:0}.post-one{background:#472e3c;color:#fff}.post-two{background:#1f1a21;color:#f1d1da}.post-three{background:#c78598;color:#25151c}.shop{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:center;background:#271c25}.shop-panel{border-left:1px solid var(--copper);padding:25px 0 25px 45px}.shop-panel p{font-size:1.17rem;color:rgba(255,255,255,.72);max-width:500px}.button-disabled{background:rgba(255,255,255,.1);color:rgba(255,255,255,.55);margin:18px 0 14px}.shop-panel small{display:block;color:rgba(255,255,255,.46)}.about{background:var(--cream);color:var(--ink);display:grid;grid-template-columns:1fr 1fr;gap:clamp(50px,10vw,150px)}.about .eyebrow{color:#9c573d}.about-copy{padding-top:32px}.about-copy p{color:#66535d}.about-copy .lead{font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1.35;color:var(--ink);margin-top:0}footer{padding:55px clamp(22px,8vw,140px);display:grid;grid-template-columns:1fr auto;gap:16px 40px;align-items:center;background:#120e12;border-top:1px solid var(--line)}footer p{font-family:var(--serif);font-style:italic;color:var(--blush);margin:0;text-align:right}footer>div{display:flex;gap:24px;font-size:.82rem}footer small{text-align:right;color:rgba(255,255,255,.42)}
@media(max-width:980px){.hero{grid-template-columns:minmax(0,.95fr) minmax(360px,1.05fr)}.playlist-grid{grid-template-columns:1fr 1fr}.feature-grid{grid-template-columns:1fr}.site-header nav{gap:18px}.feature-card{grid-template-columns:.8fr 1.2fr}.social-post blockquote{font-size:2rem}}
@media(max-width:720px){.site-header{height:72px}.site-header nav{display:none;position:absolute;top:72px;left:16px;right:16px;background:#201820;padding:18px;border:1px solid var(--line);border-radius:14px;flex-direction:column;gap:7px}.site-header nav.open{display:flex}.site-header nav a{padding:8px}.menu-button{display:block}.hero{height:auto;min-height:740px;align-items:flex-end}.hero-art{object-position:61% center}.hero-shade{background:linear-gradient(0deg,rgba(14,10,14,.98) 0%,rgba(14,10,14,.78) 60%,rgba(14,10,14,.25) 100%)}.hero-copy{margin:0;padding:150px 22px 95px;width:100%}.hero h1{font-size:clamp(3.35rem,17vw,5.2rem)}.intro{font-size:1rem}.scroll-cue{display:none}.listen-bar{align-items:flex-start;flex-direction:column}.listen-bar div{gap:14px 22px}.split-heading,.shop,.about{grid-template-columns:1fr;gap:35px}.feature-card{grid-template-columns:1fr}.album-art{min-height:380px}.feature-copy{padding:35px}.playlist-grid,.social-grid{grid-template-columns:1fr}.playlist-card{min-height:320px}.social-post{aspect-ratio:4/4.7}.social-links{justify-content:flex-start}.shop-panel{padding:15px 0 15px 25px}.about-copy{padding-top:0}footer{grid-template-columns:1fr}footer p,footer small{text-align:left}.footer-brand{margin-bottom:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,.playlist-card{transition:none}}

/* Hero portrait layout */
.hero{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(420px,.96fr);align-items:stretch;background:radial-gradient(circle at 25% 40%,#39202d 0,transparent 42%),#120e12}
.hero-copy{align-self:center;padding:110px 40px 70px 0}
.hero-visual{position:relative;min-width:0;overflow:hidden}
.hero-visual:before{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,#120e12 0,rgba(18,14,18,.5) 12%,transparent 38%),linear-gradient(0deg,rgba(18,14,18,.5),transparent 30%)}
.hero-visual img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.scroll-cue{left:clamp(22px,8vw,140px);right:auto}

@media(max-width:980px){.hero{grid-template-columns:minmax(0,.95fr) minmax(360px,1.05fr)}}
@media(max-width:720px){.hero{height:auto;max-height:none;min-height:0;grid-template-columns:1fr;padding-top:72px}.hero-copy{grid-row:2;margin:0;padding:55px 22px 80px;width:100%}.hero-visual{grid-row:1;height:min(116vw,620px)}.hero-visual:before{background:linear-gradient(0deg,#120e12 0,transparent 28%)}.hero-visual img{object-position:center}}

/* Final hero composition: story portrait far left over the branded background */
.hero{grid-template-columns:minmax(420px,.92fr) minmax(0,1.08fr);background-image:linear-gradient(90deg,rgba(10,7,10,.12),rgba(18,12,17,.5)),url("hero-background.png");background-size:cover;background-position:center}
.hero-visual{grid-column:1;grid-row:1;display:flex;align-items:flex-end;justify-content:flex-start;padding-top:88px}
.hero-visual:before{background:linear-gradient(90deg,transparent 60%,rgba(22,13,19,.88) 100%),linear-gradient(0deg,rgba(18,14,18,.55),transparent 26%)}
.hero-visual img{width:100%;height:100%;object-fit:contain;object-position:left bottom;filter:drop-shadow(26px 0 38px rgba(0,0,0,.28))}
.hero-copy{grid-column:2;grid-row:1;margin:0;padding:115px clamp(26px,7vw,120px) 80px clamp(28px,5vw,92px);width:auto}
.scroll-cue{left:auto;right:clamp(22px,5vw,80px)}
@media(max-width:980px){.hero{grid-template-columns:minmax(360px,.9fr) minmax(0,1.1fr)}.hero-copy{padding-left:38px;padding-right:38px}.hero h1{font-size:clamp(3.4rem,7vw,5.4rem)}}
@media(max-width:720px){.hero{grid-template-columns:1fr;background-position:60% center;padding-top:72px}.hero-visual{grid-column:1;grid-row:1;height:min(112vw,610px);padding-top:0}.hero-visual:before{background:linear-gradient(0deg,#120e12 0,transparent 32%)}.hero-visual img{object-position:left bottom}.hero-copy{grid-column:1;grid-row:2;padding:45px 22px 80px;background:#120e12}}

/* Aligned at 808 release palette */
.latest{position:relative;overflow:hidden;background:linear-gradient(145deg,#fffaf3 0%,#f6e8e5 42%,#ead0d8 72%,#fff8ef 100%);color:var(--ink)}
.latest:before{content:"";position:absolute;inset:-15%;pointer-events:none;background:repeating-linear-gradient(116deg,transparent 0 112px,rgba(190,127,72,.34) 113px 115px,transparent 116px 204px);transform:rotate(-4deg);opacity:.72}
.latest>*{position:relative}
.latest .eyebrow{color:#9a5c3c}
.latest .section-heading h2{color:#2b1c25}
.latest .feature-card{box-shadow:0 24px 70px rgba(77,45,55,.16);border:1px solid rgba(162,105,78,.18)}
.latest .spotlight-card{background:linear-gradient(155deg,#fffaf4 0%,#f0d7dc 50%,#c98ca0 100%);color:#2b1c25;border:1px solid rgba(162,105,78,.22);box-shadow:0 24px 70px rgba(77,45,55,.13)}
.latest .spotlight-card>p:not(.eyebrow){color:#654f59}
.latest .round-play{background:linear-gradient(135deg,#b8754e,#e4bd7c);color:#24151d;box-shadow:0 10px 28px rgba(123,75,49,.24)}

/* Homepage hero: Aligned at 808 visual world */
body .hero{isolation:isolate;background:radial-gradient(circle at 78% 20%,rgba(255,255,255,.92) 0 7%,transparent 28%),radial-gradient(circle at 68% 72%,rgba(202,139,160,.42),transparent 34%),linear-gradient(132deg,#fffaf2 0%,#f5e5e3 42%,#e7c2cc 72%,#fff8ef 100%);color:#281a22}
body .hero:before{content:"";position:absolute;z-index:0;inset:-18%;pointer-events:none;background:repeating-linear-gradient(111deg,transparent 0 104px,rgba(183,116,62,.48) 105px 108px,transparent 109px 190px);transform:rotate(-5deg);opacity:.75}
body .hero-copy,body .hero-visual,body .scroll-cue{z-index:2}
body .hero h1{color:#291b23;text-shadow:0 1px rgba(255,255,255,.65)}
body .hero h1 em{color:#9c5d75}
body .hero .eyebrow{color:#915335}
body .hero .intro{color:#66505a}
body .hero .button-ghost{border-color:rgba(63,35,48,.38);background:rgba(255,255,255,.3);color:#2a1922}
body .hero .scroll-cue{color:#4e3540}
body .hero .scroll-cue span{color:#9a5b3c}
body .hero-visual:before{background:linear-gradient(90deg,transparent 58%,rgba(246,229,228,.72) 100%),linear-gradient(0deg,rgba(255,250,242,.38),transparent 28%)}
body .site-header{color:#2a1922;border-bottom-color:rgba(68,39,50,.16)}
body .site-header .brand-mark{color:#8a4d34;border-color:#b9784f}
body .site-header nav a:hover{color:#8d4e35}
@media(max-width:720px){body .site-header{background:rgba(255,250,242,.9);backdrop-filter:blur(12px)}body .site-header nav{background:#fff9f2;border-color:rgba(68,39,50,.15)}body .menu-button{color:#2a1922;border-color:rgba(68,39,50,.3)}body .hero-copy{background:linear-gradient(180deg,#f7e6e5,#fffaf2)}body .hero-visual:before{background:linear-gradient(0deg,#f7e6e5 0,transparent 32%)}}
.hero-release{display:grid;grid-template-columns:clamp(120px,15vw,210px) minmax(0,1fr);gap:clamp(22px,3.5vw,48px);align-items:center}.hero-album-cover{display:block;width:100%;aspect-ratio:1;object-fit:cover;box-shadow:0 20px 55px rgba(75,40,53,.25)}body .hero-release h1{font-size:clamp(2.8rem,5vw,5.6rem);line-height:.92;margin-bottom:20px}body .hero-release .intro{max-width:560px}.hero-quote{font:italic 600 clamp(1rem,1.5vw,1.25rem)/1.4 var(--serif);color:#7c4a5e;margin:18px 0 0}@media(max-width:980px){.hero-release{grid-template-columns:130px 1fr}}@media(max-width:720px){.hero-release{grid-template-columns:95px 1fr;gap:18px}.hero-album-cover{align-self:start}body .hero-release h1{font-size:clamp(2.4rem,11vw,4rem)}body .hero-release .intro{font-size:.94rem}.hero-quote{font-size:.95rem}.hero-actions{flex-wrap:wrap}}.hero-release{display:flex;flex-direction:column;align-items:flex-start;gap:0}.hero-release .hero-album-cover{width:clamp(165px,19vw,270px);margin-top:24px}.hero-release .hero-actions{margin-top:22px}.hero-release .hero-quote{display:none}@media(max-width:720px){.hero-release{display:flex}.hero-release .hero-album-cover{width:min(210px,58vw);margin-top:20px}}.hero-release{width:min(620px,100%)}.hero-release .hero-album-cover{align-self:center}.spotify-embed{display:block;width:100%;max-width:620px;margin:24px auto 0;border:0;border-radius:12px;background:#121212}.hero-release .hero-actions{align-self:center}@media(max-width:720px){.spotify-embed{height:152px}}
/* Centered champagne album announcement */
body .hero-copy{display:flex;align-items:center;justify-content:center;padding-left:clamp(26px,4vw,70px);padding-right:clamp(26px,4vw,70px)}
body .hero-release{width:min(680px,100%);align-items:center;text-align:center;padding:clamp(28px,4vw,52px);border:1px solid rgba(153,105,62,.3);border-radius:28px;background:linear-gradient(135deg,rgba(255,253,246,.94) 0%,rgba(248,237,211,.94) 38%,rgba(234,211,167,.9) 62%,rgba(255,249,232,.95) 100%);box-shadow:0 24px 70px rgba(91,57,42,.16),inset 0 1px 0 rgba(255,255,255,.9)}
body .hero-release:before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:28px;background:linear-gradient(112deg,transparent 12%,rgba(255,255,255,.5) 34%,transparent 52%);opacity:.65}
body .hero-release>*{position:relative}
body .hero-release h1{font-family:var(--sans);font-weight:700;letter-spacing:-.02em;line-height:1.08;color:#2b211d}
body .hero-release .eyebrow{font-family:var(--sans);letter-spacing:.14em;color:#76502f}
body .hero-release .intro{width:min(590px,100%);font-family:var(--sans);font-size:clamp(1.05rem,1.4vw,1.25rem);font-weight:500;line-height:1.75;letter-spacing:.012em;text-align:left;color:#3f332e}
body .hero-release .hero-album-cover{width:clamp(198px,22.8vw,324px);margin-top:28px;filter:brightness(1.08) saturate(.96);box-shadow:0 22px 55px rgba(85,53,43,.22)}
body .hero-release .spotify-embed{margin-top:26px}
body .hero-release .hero-actions{justify-content:center}
@media(max-width:980px){body .hero{grid-template-columns:minmax(300px,.78fr) minmax(0,1.22fr)}body .hero-release{padding:28px}}
@media(max-width:720px){body .hero-copy{padding:30px 18px 70px}body .hero-release{width:100%;padding:25px 20px;border-radius:20px}body .hero-release:before{border-radius:20px}body .hero-release .hero-album-cover{width:min(252px,70vw)}body .hero-release .intro{text-align:left;line-height:1.7}}

/* Final homepage release composition */
body .hero{align-items:stretch}
body .hero-visual{align-items:flex-start;padding-top:88px}
body .hero-visual img{height:auto;max-height:calc(100vh - 88px);object-position:left top;align-self:flex-start}
body .hero-copy{align-items:center;padding-top:112px}
body .hero-release{width:min(760px,100%)}
.release-media{width:100%;display:grid;grid-template-columns:minmax(210px,.82fr) minmax(280px,1.18fr);gap:22px;align-items:start;margin-top:28px}
body .hero-release .release-media .hero-album-cover{width:100%;margin:0;align-self:start;filter:brightness(1.08) saturate(.96)}
body .hero-release .release-media .spotify-embed{width:100%;height:352px;margin:0;border:0;border-radius:12px}
body .hero-release>.hero-actions{margin-top:22px}
@media(max-width:980px){body .hero-visual{padding-top:88px}.release-media{grid-template-columns:minmax(180px,.78fr) minmax(250px,1.22fr);gap:16px}}
@media(max-width:720px){body .hero-visual{padding-top:0}body .hero-visual img{height:100%;max-height:none;object-position:left top}.release-media{grid-template-columns:1fr}.release-media .hero-album-cover{max-width:280px;justify-self:center}body .hero-release .release-media .spotify-embed{height:352px}}

/* Compact smoky-black homepage hero */
body .hero{min-height:720px;height:100vh;max-height:900px;background:radial-gradient(circle at 42% 28%,#2d292c 0%,#181719 38%,#0d0c0e 78%);color:#fffaf3}
body .hero:before{display:none}
body .site-header{color:#fffaf3;border-bottom-color:rgba(255,255,255,.12)}
body .site-header .brand-mark{color:#e5b77c;border-color:#b8764f}
body .site-header nav a:hover{color:#e5b77c}
body .hero-copy{padding-top:100px;padding-bottom:34px}
body .hero-release{width:min(780px,100%);padding:20px 24px;background:rgba(14,13,15,.36);border:1px solid rgba(255,255,255,.1);border-radius:18px;box-shadow:none;text-align:left;align-items:stretch}
body .hero-release:before{display:none}
body .hero-release .eyebrow{margin:0 0 6px;color:#d5a978;font-size:.66rem;letter-spacing:.15em}
body .hero-release h1{margin:0 0 9px;color:#fffaf3;font-size:clamp(1.9rem,3vw,3.1rem);line-height:1.05;letter-spacing:-.02em}
body .hero-release .intro{max-width:720px;width:100%;margin:0;color:rgba(255,250,243,.76);font-size:clamp(.92rem,1.05vw,1.05rem);line-height:1.48;letter-spacing:0}
body .hero-release .intro em{font-style:normal}
body .hero-release .release-media{margin-top:16px;grid-template-columns:minmax(210px,.8fr) minmax(330px,1.2fr);gap:18px}
body .hero-release .release-media .hero-album-cover{max-height:352px}
body .hero-release>.hero-actions{margin-top:14px}
body .hero-release .button{min-height:42px;padding:0 19px;font-size:.82rem}
body .hero-release .button-ghost{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.07);color:#fffaf3}
body .hero-visual:before{background:linear-gradient(90deg,transparent 63%,rgba(13,12,14,.86) 100%),linear-gradient(0deg,rgba(13,12,14,.35),transparent 26%)}
body .hero .scroll-cue{color:rgba(255,250,243,.7)}
@media(max-width:980px){body .hero{grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr)}body .hero-release{padding:18px}.release-media{gap:14px}}
@media(max-width:720px){body .hero{height:auto;max-height:none;background:#0d0c0e}body .site-header{background:rgba(13,12,14,.92);color:#fffaf3}body .menu-button{color:#fffaf3;border-color:rgba(255,255,255,.3)}body .site-header nav{background:#171518;border-color:rgba(255,255,255,.12)}body .hero-copy{padding:24px 16px 60px;background:#0d0c0e}body .hero-release{padding:18px 16px}.release-media{grid-template-columns:1fr}body .hero-release .release-media .hero-album-cover{width:min(250px,68vw);justify-self:center}}

/* Album platform menu */
.album-platform-bar{width:100%;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:22px 0 0;padding:10px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(0,0,0,.28)}
.album-platform-bar>span{padding:8px 12px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.68)}
.album-platform-bar a{padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font-size:.78rem;font-weight:700}
.album-platform-bar a:hover,.album-platform-bar a:focus-visible{background:#e7bc82;color:#25191c}
.album-aligned .album-platform-bar{max-width:680px;background:rgba(43,28,37,.08);border-color:rgba(43,28,37,.18)}
.album-aligned .album-platform-bar>span{color:#6b5660}
.album-aligned .album-platform-bar a{background:#2b1c25;color:#fff}
@media(max-width:720px){.album-platform-bar{border-radius:16px}.album-platform-bar>span{width:100%}.album-platform-bar a{flex:1;text-align:center;min-width:120px}}

/* Compact player beneath the site brand */
.compact-player-bar{position:absolute;z-index:9;top:98px;left:clamp(22px,5vw,80px);width:min(390px,calc(100vw - 44px))}
.compact-player-bar iframe{display:block;width:100%;height:80px;border:0;border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.28)}
body .hero-visual{padding-top:190px}
.release-media{grid-template-columns:1fr;justify-items:center}
body .hero-release .release-media .hero-album-cover{width:min(340px,100%)}
@media(max-width:980px){body .hero-visual{padding-top:190px}}
@media(max-width:720px){.compact-player-bar{position:relative;top:auto;left:auto;width:100%;padding:10px 16px;background:#0d0c0e}.compact-player-bar iframe{height:80px}body .hero{padding-top:0}body .hero-visual{padding-top:0}}

/* Header: brand, compact player, navigation */
body .site-header{height:100px;display:grid;grid-template-columns:minmax(220px,1fr) minmax(300px,420px) minmax(330px,1fr);gap:24px;align-items:center}
.header-player{display:block;width:100%;height:80px;border:0;border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.24)}
body .site-header nav{justify-self:end}
.compact-player-bar{display:none}
body .hero-visual{padding-top:100px}
body .hero-visual img{max-height:calc(100vh - 100px)}
@media(max-width:1100px){body .site-header{grid-template-columns:210px minmax(280px,360px) 1fr;gap:15px}body .site-header nav{gap:14px}body .site-header nav a{font-size:.78rem}}
@media(max-width:820px){body .site-header{height:172px;grid-template-columns:1fr auto;grid-template-rows:72px 88px;padding-top:0}.header-player{grid-column:1/-1;grid-row:2;height:80px;width:min(480px,100%);justify-self:center}.menu-button{grid-column:2;grid-row:1}body .site-header nav{top:72px}body .hero{padding-top:172px}body .hero-visual{padding-top:0}body .hero-visual img{max-height:none}}

/* Header order: player left, artist centered, navigation right */
body .site-header{display:grid;grid-template-columns:minmax(260px,390px) minmax(190px,1fr) auto;gap:clamp(16px,2.5vw,36px)}
body .site-header .header-player{grid-column:1;width:100%;height:80px;border:0;border-radius:12px}
body .site-header .header-brand{grid-column:2;justify-self:center;white-space:nowrap}
body .site-header .menu-button,body .site-header nav{grid-column:3}
@media(max-width:1100px){body .site-header{grid-template-columns:minmax(220px,310px) minmax(170px,1fr) auto;gap:14px}body .site-header nav{gap:14px}}
@media(max-width:820px){body .site-header{height:auto;min-height:152px;grid-template-columns:1fr auto;padding-top:10px;padding-bottom:10px}body .site-header .header-player{grid-column:1/-1;grid-row:2;height:80px}body .site-header .header-brand{grid-column:1;grid-row:1;justify-self:start}body .site-header .menu-button{grid-column:2;grid-row:1}body .site-header nav{grid-column:1/-1;top:152px}body .hero{padding-top:152px}body .hero-visual{padding-top:0}}


/* Playlist cover artwork */
.playlist-card.has-cover{padding:0;background:#101b32;display:flex;flex-direction:column}
.playlist-card.has-cover:before{display:none}
.playlist-cover{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.playlist-card-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.03em}
.playlist-card-footer span:last-child{color:#b9d4ff;text-align:right}
@media(max-width:720px){.playlist-card.has-cover{min-height:0}.playlist-card-footer{padding:15px 16px}}


/* Right-half hero background: original flowing cream, pink, gold and kintsugi artwork */
body .hero-copy{
  background-image:url("hero-background.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
@media(max-width:720px){
  body .hero-copy{
    background-image:url("hero-background.png");
    background-size:cover;
    background-position:center;
  }
}


/* Let the right-side kintsugi artwork show through the Aligned at 808 announcement */
body .hero-release{
  background:transparent;
  box-shadow:none;
}

/* Playlist actions and accessible submission form */
.playlist-card.has-cover{padding:0;display:grid;grid-template-rows:1fr auto auto;background:#181217}
.playlist-cover{grid-column:1;grid-row:1/-1;width:100%;height:100%;min-height:390px;object-fit:cover}
.playlist-card-footer{grid-column:1;grid-row:2;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px;background:linear-gradient(180deg,transparent,rgba(12,8,12,.94));font-weight:700}
.playlist-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;position:relative;z-index:3}
.playlist-actions-cover{grid-column:1;grid-row:3;margin:0;padding:14px;background:rgba(18,12,18,.97)}
.spotify-save,.submission-open{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border-radius:999px;padding:9px 13px;font:inherit;font-size:.76rem;font-weight:700;line-height:1.25;text-align:center}
.spotify-save{background:#1ed760;color:#101510}
.submission-open{border:1px solid rgba(255,255,255,.5);background:#2d202b;color:#fff;cursor:pointer}
.spotify-save:hover,.spotify-save:focus-visible{background:#fff;color:#111}
.submission-open:hover,.submission-open:focus-visible{background:var(--cream);color:var(--ink)}
.submission-dialog{width:min(620px,calc(100% - 32px));max-height:90vh;overflow:auto;border:1px solid rgba(195,118,80,.55);border-radius:18px;padding:clamp(26px,5vw,48px);background:#fff9f2;color:var(--ink);box-shadow:0 24px 80px rgba(0,0,0,.55)}
.submission-dialog::backdrop{background:rgba(12,8,12,.78);backdrop-filter:blur(4px)}
.submission-dialog h2{font-family:var(--serif);font-size:clamp(2rem,5vw,3.2rem);line-height:1.15;margin:0 0 12px}
.submission-dialog>p:not(.eyebrow){color:#66535d}
.dialog-close{position:absolute;right:18px;top:14px;border:0;background:transparent;color:var(--ink);font-size:2rem;line-height:1;cursor:pointer}
.submission-dialog form{display:grid;gap:18px;margin-top:26px}
.submission-dialog label:not(.consent-row){display:grid;gap:7px;font-weight:700}
.submission-dialog input[type="text"],.submission-dialog input[type="email"],.submission-dialog input[type="url"]{width:100%;min-height:48px;border:1px solid #796873;border-radius:8px;background:#fff;color:#211820;padding:10px 12px;font:inherit}
.submission-dialog input:focus-visible,.submission-dialog button:focus-visible,.playlist-actions a:focus-visible{outline:3px solid #b35e3e;outline-offset:3px}
.submission-dialog small{margin-top:-13px;color:#66535d}
.consent-row{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;font-size:1rem;line-height:1.55}
.consent-row input{width:20px;height:20px;margin-top:3px}
.privacy-note{font-size:.95rem;color:#66535d;margin:0}
.privacy-note a{text-decoration:underline}
.form-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.submission-dialog .button{border:0;cursor:pointer;width:max-content}
@media(max-width:720px){.playlist-cover{min-height:320px}.playlist-actions{align-items:stretch;flex-direction:column}.spotify-save,.submission-open{width:100%}}


/* Launch-ready accessibility and layout refinements */
:focus-visible{outline:3px solid #ffd18f;outline-offset:4px}
.skip-link{position:fixed;z-index:1000;top:10px;left:10px;transform:translateY(-150%);padding:10px 14px;border-radius:8px;background:#fff;color:#181217;font-weight:700}
.skip-link:focus{transform:none}
img{max-width:100%}
.site-header{background:rgba(13,12,14,.78);backdrop-filter:blur(14px)}
.header-player{min-width:0}
.header-brand{font-size:.95rem}
body .hero-copy{background-color:#171117}
body .hero-release{border-color:rgba(255,255,255,.28);backdrop-filter:blur(2px)}
body .hero-release h1,body .hero-release .intro{font-family:var(--sans)}
body .hero-release h1{max-width:none}
body .hero-release .intro{font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.85)}
body .hero-release .eyebrow{text-shadow:0 1px 2px rgba(0,0,0,.85)}
.playlists .split-heading>p{color:rgba(255,249,242,.82)}
.playlist-card{border-radius:14px}
.playlist-actions-cover{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.spotify-note{grid-column:1/-1;color:rgba(255,255,255,.72);font-size:.72rem;line-height:1.4;text-align:center}
.discover .spotify-note{margin-top:4px}
.spotify-save,.submission-open{min-height:48px}
.form-status{min-height:1.6em;margin:0;font-weight:700}
.form-status.is-pending{color:#6a5360}
.form-status.is-success{color:#24642f}
.form-status.is-error{color:#9d2d2d}
.submission-dialog button:disabled{cursor:wait;opacity:.7}
.submission-dialog strong{color:#6b3f2e}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

@media(max-width:1100px){
  body .site-header{padding-left:20px;padding-right:20px}
  body .site-header nav{gap:12px}
}
@media(max-width:820px){
  body .site-header{position:absolute;background:#0d0c0e}
  body .site-header nav{z-index:20}
  .header-brand{font-size:.9rem}
  body .hero{grid-template-columns:1fr;padding-top:172px}
  body .hero-visual{grid-column:1;grid-row:1;height:min(105vw,560px)}
  body .hero-copy{grid-column:1;grid-row:2;padding:34px 18px 64px}
  body .hero-release{width:min(680px,100%);margin-inline:auto}
  body .hero-release .release-media .hero-album-cover{width:min(320px,78vw)}
}
@media(max-width:520px){
  body .site-header{grid-template-columns:minmax(0,1fr) auto}
  .header-brand span:last-child{font-size:.82rem}
  .brand-mark{width:36px;height:36px}
  .header-player{height:80px}
  body .hero{padding-top:172px}
  body .hero-visual{height:min(118vw,520px)}
  body .hero-release h1{font-size:2rem}
  .album-platform-bar a{min-width:0;width:100%}
  .playlist-actions-cover{grid-template-columns:1fr}
  .spotify-note{grid-column:1}
}
@media(prefers-contrast:more){
  body{color:#fff}
  .intro,.split-heading>p,.playlist-card p{color:#fff!important}
  .site-header,.playlist-card,.submission-dialog{border-width:2px}
}
@media(forced-colors:active){
  .button,.spotify-save,.submission-open,.brand-mark{forced-color-adjust:auto}
}


/* Header social and streaming squares */
body .site-header{grid-template-columns:minmax(245px,350px) auto minmax(190px,auto) auto;gap:clamp(10px,1.4vw,22px)}
body .site-header .header-player{grid-column:1}
.header-socials{grid-column:2;display:grid!important;grid-template-columns:repeat(4,30px);gap:6px;justify-self:center}
body .site-header .header-brand{grid-column:3}
body .site-header .menu-button,body .site-header #main-nav{grid-column:4}
.social-square{width:30px;height:30px;border-radius:7px;display:grid!important;place-items:center;padding:0!important;font-size:.64rem!important;font-weight:800!important;line-height:1!important;letter-spacing:0!important;opacity:1!important;border:1px solid rgba(255,255,255,.32);box-shadow:0 4px 12px rgba(0,0,0,.2);transition:transform .18s ease,filter .18s ease}
.social-square:hover,.social-square:focus-visible{transform:translateY(-2px);filter:brightness(1.12);color:#fff!important}
.social-square.tiktok{background:#111;color:#fff;border-color:#52e4df}
.social-square.instagram{background:linear-gradient(135deg,#6d35c5,#d83283 55%,#f2a441);color:#fff}
.social-square.youtube{background:#f00000;color:#fff}
.social-square.x-social{background:#050505;color:#fff}
.social-square.facebook{background:#1877f2;color:#fff}
.social-square.pinterest{background:#bd081c;color:#fff}
.social-square.spotify{background:#1ed760;color:#07150c}
.social-square.apple{background:linear-gradient(135deg,#f7f7f7,#fa57c1);color:#27111f}

@media(max-width:1200px){
  body .site-header{grid-template-columns:minmax(220px,285px) auto minmax(175px,auto) auto;gap:10px;padding-left:16px;padding-right:16px}
  body .site-header #main-nav{gap:10px}
  body .site-header #main-nav a{font-size:.72rem}
}
@media(max-width:980px){
  body .site-header{height:172px;min-height:172px;grid-template-columns:minmax(260px,1fr) auto auto;grid-template-rows:64px 88px;padding-top:0;padding-bottom:8px}
  body .site-header .header-brand{grid-column:1;grid-row:1;justify-self:start}
  body .site-header .menu-button{grid-column:3;grid-row:1}
  body .site-header .header-player{grid-column:1;grid-row:2;width:min(360px,100%);height:80px}
  .header-socials{grid-column:2/4;grid-row:2;grid-template-columns:repeat(4,30px);align-self:center;justify-self:end}
  body .site-header #main-nav{grid-column:1/-1;top:164px}
  body .hero{padding-top:172px}
}
@media(max-width:620px){
  body .site-header{height:252px;min-height:252px;grid-template-columns:1fr auto;grid-template-rows:64px 88px 76px;padding:0 16px 12px}
  body .site-header .header-brand{grid-column:1;grid-row:1}
  body .site-header .menu-button{grid-column:2;grid-row:1}
  body .site-header .header-player{grid-column:1/-1;grid-row:2;width:100%}
  .header-socials{grid-column:1/-1;grid-row:3;grid-template-columns:repeat(8,30px);justify-self:center}
  body .site-header #main-nav{top:240px}
  body .hero{padding-top:252px}
}
@media(max-width:360px){
  .header-socials{grid-template-columns:repeat(4,30px)}
  body .site-header{height:292px;min-height:292px;grid-template-rows:64px 88px 116px}
  body .hero{padding-top:292px}
}


/* Keep account squares between the player and centered artist name */
body .site-header .header-socials{
  grid-column:2;
  display:grid!important;
  grid-template-columns:repeat(4,30px);
  gap:6px;
  justify-self:center;
}
@media(max-width:980px){
  body .site-header .header-socials{grid-column:2/4;grid-row:2;justify-self:end}
}
@media(max-width:620px){
  body .site-header .header-socials{grid-column:1/-1;grid-row:3;justify-self:center;grid-template-columns:repeat(8,30px)}
}
@media(max-width:360px){
  body .site-header .header-socials{grid-template-columns:repeat(4,30px)}
}


/* Email-list signup */
.newsletter{display:grid;grid-template-columns:minmax(0,.85fr) minmax(320px,1.15fr);gap:clamp(40px,8vw,110px);align-items:center;background:linear-gradient(135deg,#2a1d27,#171117);color:var(--cream)}
.newsletter h2{font-family:var(--serif);font-size:clamp(2.5rem,5vw,5rem);line-height:1.02;letter-spacing:-.04em;margin:0 0 22px}
.newsletter-copy>p:last-child{color:rgba(255,249,242,.76);max-width:540px}
.newsletter-form{display:grid;gap:16px;padding:clamp(24px,4vw,42px);border:1px solid rgba(255,255,255,.18);border-radius:20px;background:rgba(255,255,255,.06)}
.newsletter-form>label:not(.consent-row){display:grid;gap:7px;font-weight:700}
.newsletter-form label>span{font-weight:500;color:rgba(255,249,242,.7)}
.newsletter-form input[type="text"],.newsletter-form input[type="email"]{width:100%;min-height:50px;border:1px solid rgba(255,255,255,.45);border-radius:9px;background:#fff;color:#211820;padding:11px 13px;font:inherit}
.newsletter-form .newsletter-consent{color:#fff}
.newsletter-form .privacy-note{color:rgba(255,249,242,.76)}
.newsletter-form .privacy-note a{text-decoration:underline}
.newsletter-form .button{border:0;cursor:pointer;width:max-content}
.newsletter-form button:disabled{cursor:wait;opacity:.7}
@media(max-width:760px){.newsletter{grid-template-columns:1fr}.newsletter-form{padding:24px 20px}}


/* Keep the social-profile row inside the mobile header instead of overlaying the portrait. */
@media(max-width:720px){
  body .site-header .header-socials{
    position:static;
    inset:auto;
    top:auto;
    right:auto;
    bottom:auto;
    left:auto;
    width:auto;
    max-width:100%;
    padding:0;
    background:transparent;
    border:0;
    border-radius:0;
    z-index:auto;
  }
}


/* Floating section navigation remains available after the main header scrolls away. */
.floating-navigation{
  position:fixed;
  right:max(18px,env(safe-area-inset-right));
  bottom:max(18px,env(safe-area-inset-bottom));
  z-index:60;
  display:grid;
  justify-items:end;
  gap:10px;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.floating-navigation.is-visible{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
}
.floating-nav-actions{display:flex;gap:8px;align-items:center}
.floating-menu-toggle,.back-to-top{
  min-height:46px;
  border:1px solid rgba(240,198,141,.58);
  border-radius:999px;
  background:rgba(18,14,18,.94);
  color:#fff9f2;
  box-shadow:0 10px 28px rgba(0,0,0,.32);
  backdrop-filter:blur(14px);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 17px;
  font:700 .82rem/1 var(--sans);
  cursor:pointer;
}
.floating-menu-toggle:hover,.floating-menu-toggle:focus-visible,.back-to-top:hover,.back-to-top:focus-visible{
  color:var(--gold);
  border-color:var(--gold);
}
.floating-menu-panel{
  min-width:190px;
  padding:10px;
  border:1px solid rgba(240,198,141,.42);
  border-radius:16px;
  background:rgba(18,14,18,.97);
  box-shadow:0 18px 45px rgba(0,0,0,.42);
  backdrop-filter:blur(16px);
}
.floating-menu-panel[hidden]{display:none}
.floating-menu-panel a{
  display:block;
  border-radius:10px;
  padding:10px 12px;
  color:#fff9f2;
  font-size:.9rem;
  font-weight:650;
}
.floating-menu-panel a:hover,.floating-menu-panel a:focus-visible{background:rgba(255,255,255,.09);color:var(--gold)}
@media(max-width:520px){
  .floating-navigation{
    right:max(12px,env(safe-area-inset-right));
    bottom:max(12px,env(safe-area-inset-bottom));
  }
  .floating-menu-toggle,.back-to-top{min-height:48px;padding:0 16px}
}
@media(prefers-reduced-motion:reduce){
  .floating-navigation{transition:none}
}


/* Copper kintsugi navigation system */
body .site-header{
  position:absolute;
  z-index:30;
  top:0;
  left:0;
  right:0;
  height:126px;
  min-height:126px;
  padding:12px clamp(18px,2.6vw,48px);
  display:grid;
  grid-template-columns:minmax(270px,350px) minmax(190px,1fr) auto;
  grid-template-rows:1fr;
  gap:clamp(16px,2.2vw,34px);
  align-items:center;
  color:#fffaf3;
  background:
    linear-gradient(90deg,rgba(8,6,7,.35),rgba(8,6,7,.78) 43%,rgba(8,6,7,.38)),
    url("header-kintsugi-v1.webp") center 54%/cover no-repeat;
  border-bottom:1px solid rgba(223,158,95,.48);
  box-shadow:0 12px 34px rgba(0,0,0,.28);
  backdrop-filter:none;
}
body .site-header .header-player{
  grid-column:1;
  grid-row:1;
  width:100%;
  height:80px;
  border:0;
  border-radius:12px;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}
body .site-header .header-brand{
  grid-column:2;
  grid-row:1;
  justify-self:center;
  color:#fff7ec;
  white-space:nowrap;
  letter-spacing:.09em;
  text-shadow:0 2px 14px rgba(0,0,0,.7);
}
body .site-header .header-brand .brand-mark{
  width:58px;
  height:58px;
  color:#f4c68f;
  border:2px solid #c87b43;
  background:
    radial-gradient(circle at 32% 25%,rgba(255,214,159,.25),transparent 32%),
    linear-gradient(145deg,#21130f,#0d0909 62%,#3b1c12);
  box-shadow:inset 0 0 0 2px rgba(255,209,151,.12),0 0 18px rgba(204,114,61,.28);
}
body .site-header .header-socials{display:none!important}
body .site-header #main-nav{
  grid-column:3;
  grid-row:1;
  position:static;
  display:grid;
  grid-template-columns:repeat(6,minmax(62px,1fr));
  align-items:start;
  justify-self:end;
  gap:clamp(7px,1vw,14px);
  padding:0;
  background:transparent;
  border:0;
}
body .site-header #main-nav .nav-bubble-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  min-width:62px;
  padding:0;
  color:#fff4e5;
  opacity:1;
  text-align:center;
}
.nav-bubble-circle{
  position:relative;
  isolation:isolate;
  width:clamp(58px,5vw,76px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:2px solid #c9824e;
  overflow:hidden;
  color:#3a1e18;
  background:
    radial-gradient(circle at 32% 25%,rgba(255,255,255,.92),transparent 24%),
    repeating-linear-gradient(132deg,transparent 0 24px,rgba(194,113,63,.34) 25px 27px,transparent 28px 47px),
    linear-gradient(145deg,#fff6e8,#e9bb83 52%,#fff0da);
  box-shadow:
    inset 0 0 0 3px rgba(255,248,231,.65),
    inset 0 0 16px rgba(169,83,42,.16),
    0 0 0 1px rgba(250,198,132,.45),
    0 6px 16px rgba(0,0,0,.32);
  font-size:clamp(.65rem,.72vw,.82rem);
  font-weight:800;
  letter-spacing:.035em;
  line-height:1;
}
.nav-bubble-circle:after{
  content:"";
  position:absolute;
  inset:8%;
  z-index:-1;
  border-radius:50%;
  border:1px solid rgba(189,105,60,.32);
}
.nav-bubble-caption{
  color:#f5cf9c;
  font-size:.52rem;
  font-weight:700;
  letter-spacing:.12em;
  line-height:1.15;
  text-transform:uppercase;
  text-shadow:0 1px 7px #000;
}
body .site-header #main-nav .nav-bubble-link:hover .nav-bubble-circle,
body .site-header #main-nav .nav-bubble-link:focus-visible .nav-bubble-circle{
  transform:translateY(-2px);
  border-color:#ffd29b;
  box-shadow:inset 0 0 0 3px rgba(255,248,231,.75),0 0 24px rgba(230,155,91,.55);
}
body .site-header #main-nav .nav-bubble-link:focus-visible{
  outline:2px solid #fff3df;
  outline-offset:5px;
  border-radius:10px;
}
body .site-header .menu-button{
  display:none;
  align-items:center;
  gap:9px;
  min-height:46px;
  padding:8px 15px;
  border:1px solid rgba(231,166,103,.72);
  border-radius:12px;
  color:#fff7ec;
  background:rgba(12,9,9,.66);
  font-weight:700;
}
.menu-glyph{display:grid;gap:4px;width:20px}
.menu-glyph i{display:block;height:2px;background:currentColor;border-radius:999px}

@media(max-width:1180px){
  body .site-header{
    height:172px;
    min-height:172px;
    grid-template-columns:1fr auto;
    grid-template-rows:66px 86px;
    padding:4px 18px 12px;
  }
  body .site-header .header-brand{
    grid-column:1;
    grid-row:1;
    justify-self:start;
  }
  body .site-header .header-brand .brand-mark{width:44px;height:44px}
  body .site-header .menu-button{
    display:inline-flex;
    grid-column:2;
    grid-row:1;
    justify-self:end;
  }
  body .site-header .header-player{
    grid-column:1/-1;
    grid-row:2;
    width:min(480px,100%);
    height:80px;
    justify-self:center;
  }
  body .site-header #main-nav{
    display:none;
    position:absolute;
    z-index:60;
    top:164px;
    left:14px;
    right:14px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px 12px;
    padding:24px 18px;
    border:1px solid rgba(226,157,92,.6);
    border-radius:18px;
    background:
      linear-gradient(rgba(10,7,8,.83),rgba(10,7,8,.94)),
      url("header-kintsugi-v1.webp") center/cover no-repeat;
    box-shadow:0 20px 50px rgba(0,0,0,.55);
  }
  body .site-header #main-nav.open{display:grid}
  body .site-header #main-nav .nav-bubble-link{min-width:0}
  .nav-bubble-circle{width:72px;font-size:.76rem}
  .nav-bubble-caption{font-size:.58rem}
  body .hero{padding-top:172px}
}
@media(max-width:520px){
  body .site-header{padding-left:14px;padding-right:14px}
  body .site-header .header-brand{font-size:.86rem;letter-spacing:.04em}
  body .site-header .header-brand .brand-mark{width:42px;height:42px;font-size:.62rem}
  body .site-header .menu-button{padding:8px 12px}
  body .site-header #main-nav{top:164px;padding:22px 14px}
  .nav-bubble-circle{width:68px}
}
@media(prefers-reduced-motion:reduce){
  .nav-bubble-circle{transition:none!important}
}

/* Temporary live-review action: Option C. It never displaces the six bubbles. */
.live-submission-bar{
  position:absolute;
  z-index:29;
  top:126px;
  left:0;
  right:0;
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 16px;
  background:linear-gradient(90deg,rgba(8,6,7,.92),rgba(42,24,16,.96),rgba(8,6,7,.92));
  border-bottom:1px solid rgba(226,181,111,.42);
  box-shadow:0 12px 28px rgba(0,0,0,.28);
}
.live-submission-bar[hidden]{display:none}
.live-review-capsule{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:6px 18px 6px 8px;
  border:2px solid #ffe1a1;
  border-radius:999px;
  color:#261309;
  background:linear-gradient(135deg,#fff0ba,#eaa64b 54%,#b8682c);
  box-shadow:0 0 22px rgba(238,164,72,.42);
  font-family:var(--sans);
  line-height:1.05;
}
.live-review-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:50%;
  color:#fff3cd;
  background:#5e2913;
  font-size:1.05rem;
}
.live-review-capsule strong,.live-review-capsule small{display:block}
.live-review-capsule strong{font-size:.72rem;font-weight:900;letter-spacing:.075em}
.live-review-capsule small{margin-top:3px;font-size:.56rem;font-weight:800;letter-spacing:.1em}
.live-review-capsule:hover,.live-review-capsule:focus-visible{transform:translateY(-1px);box-shadow:0 0 28px rgba(255,198,99,.62)}
@media(max-width:1180px){.live-submission-bar{top:172px}}
@media(max-width:620px){.live-submission-bar{top:252px}}
@media(max-width:360px){.live-submission-bar{top:292px}}
@media(max-width:520px){.live-submission-bar{padding:7px 10px}.live-review-capsule{min-height:44px;padding-right:14px}.live-review-capsule strong{font-size:.68rem}}

/* Final header layout: player, social links, artist name, and six bubbles. */
body .site-header{
  grid-template-columns:minmax(245px,340px) 138px minmax(185px,auto) auto;
  gap:clamp(10px,1.25vw,20px);
}
body .site-header .header-player{grid-column:1}
body .site-header .header-socials{
  display:grid!important;
  grid-column:2;
  grid-row:1;
  grid-template-columns:repeat(4,30px);
  gap:7px 6px;
  justify-self:center;
  align-self:center;
}
body .site-header .header-brand{grid-column:3}
body .site-header .menu-button,
body .site-header #main-nav{grid-column:4}

@media(max-width:1180px){
  body .site-header{
    height:224px;
    min-height:224px;
    grid-template-columns:1fr auto;
    grid-template-rows:60px 86px 58px;
    padding:4px 14px 12px;
  }
  body .site-header .header-brand{grid-column:1;grid-row:1;justify-self:start}
  body .site-header .menu-button{grid-column:2;grid-row:1;justify-self:end}
  body .site-header .header-player{grid-column:1/-1;grid-row:2;width:min(480px,100%);justify-self:center}
  body .site-header .header-socials{
    grid-column:1/-1;
    grid-row:3;
    grid-template-columns:repeat(8,30px);
    justify-self:center;
  }
  body .site-header #main-nav.open{top:224px;max-height:calc(100dvh - 240px)}
  body .hero{padding-top:224px}
  .live-submission-bar{top:224px}
  body.live-submission-visible .hero{padding-top:286px}
}

@media(max-width:360px){
  body .site-header{padding-left:8px;padding-right:8px}
  body .site-header .header-socials{gap:5px}
  .live-submission-bar{top:224px}
}


/* Mobile bubble-menu two-column alignment fix */
@media(max-width:1180px){
  body .site-header #main-nav{
    box-sizing:border-box;
    left:14px;
    right:auto;
    width:calc(100vw - 28px);
    max-width:none;
    margin:0;
    justify-self:stretch;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-flow:row;
    justify-items:center;
    align-items:start;
  }
  body .site-header #main-nav .nav-bubble-link{
    width:100%;
    max-width:180px;
    justify-self:center;
  }
  body .site-header #main-nav .nav-bubble-caption{
    width:100%;
    min-height:1.3em;
    white-space:nowrap;
    text-align:center;
  }
}
@media(max-width:520px){
  body .site-header #main-nav{
    left:10px;
    width:calc(100vw - 20px);
    gap:20px 8px;
  }
}


/* Center the mobile menu over the portrait instead of docking right */
@media(max-width:1180px){
  body .site-header #main-nav.open{
    position:fixed;
    z-index:1000;
    top:172px;
    left:50%;
    right:auto;
    width:min(calc(100vw - 24px),560px);
    max-width:560px;
    max-height:calc(100dvh - 188px);
    margin:0;
    transform:translateX(-50%);
    overflow-y:auto;
    overscroll-behavior:contain;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(3,auto);
    grid-auto-flow:row;
    justify-items:center;
    align-items:start;
    gap:22px 14px;
    padding:26px 18px;
  }
}
@media(max-width:520px){
  body .site-header #main-nav.open{
    top:164px;
    width:calc(100vw - 16px);
    padding:24px 12px;
    gap:20px 8px;
  }
}


/* Kintsugi logo and complete playlist-cover display */
.brand-mark{
  overflow:visible;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.brand-mark img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.48));
}
.playlist-card.has-cover{
  display:flex;
  flex-direction:column;
  padding:0;
}
.playlist-card.has-cover .playlist-cover{
  display:block;
  width:calc(100% - 24px);
  max-width:320px;
  height:auto;
  min-height:0;
  aspect-ratio:1;
  object-fit:contain;
  margin:12px auto 0;
  border-radius:10px;
}
.playlist-card.has-cover .playlist-card-footer{
  position:static;
  display:flex;
  padding:14px 18px 10px;
  background:transparent;
}
.playlist-card.has-cover .playlist-actions-cover{
  margin-top:auto;
}
@media(max-width:720px){
  .playlist-card.has-cover .playlist-cover{
    width:min(68vw,250px);
    max-width:250px;
    margin-top:18px;
  }
  .playlist-card.has-cover .playlist-card-footer{
    justify-content:center;
    padding:12px 16px 8px;
    text-align:center;
  }
}

.live-submit-link[hidden]{display:none!important}

/* Keep the expanded mobile menu below the complete three-row header. */
@media(max-width:1180px){
  body .site-header #main-nav.open{
    top:224px;
    max-height:calc(100dvh - 240px);
  }
}