/* Sargam — shared tokens, nav, hero (same visual language as Déuva) */
@font-face{font-family:"Quivert";src:url("../fonts/Quivert.ttf") format("truetype");font-display:swap}
:root{--cream:#FAF3E7;--ink:#1E1A17;--turmeric:#E3A018;--terracotta:#B5532F;--sage:#7C8B6A;--indigo:#2D3A5A;--mute:#6f6458;
--font-display:"Quivert","Cormorant Garamond",Georgia,serif;--font-text:"Newsreader",Georgia,serif;
--wm-size:clamp(4.5rem,25vw,15rem);--nav-h:52px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font-text);font-size:1.125rem;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
img,svg{display:block}
:focus-visible{outline:2px solid var(--turmeric);outline-offset:3px}

/* brand + floating pill nav */
.brand{position:fixed;z-index:60;left:24px;top:14px;font-family:var(--font-display);font-size:2rem;line-height:1;color:var(--ink);transition:color .4s}
.nav{position:fixed;z-index:55;top:12px;right:20px}
.nav nav{position:relative;display:flex;gap:.2rem;padding:.3rem;border-radius:999px;background:rgba(250,243,231,.72);-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);border:1px solid rgba(30,26,23,.1);isolation:isolate}
.nav a{position:relative;z-index:1;padding:.5rem 1rem;border-radius:999px;font-size:1rem;overflow:hidden;display:block}
.nav a span{display:block;transition:transform .35s cubic-bezier(.7,0,.2,1)}
.nav a span+span{position:absolute;left:1rem;top:100%;color:var(--terracotta);font-style:italic}
.nav a:hover span:first-child{transform:translateY(-120%)}
.nav a:hover span+span{transform:translateY(calc(-100% - .5rem))}
.pill{position:absolute;z-index:0;top:.3rem;left:0;height:calc(100% - .6rem);border-radius:999px;background:rgba(227,160,24,.34);box-shadow:0 0 16px rgba(227,160,24,.38),inset 0 1px 1px rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.55);pointer-events:none;opacity:0}
body.on-dark .brand{color:#FBF3E4}
@media(max-width:640px){.nav{left:12px;right:12px;top:58px}.nav nav{justify-content:space-between}.nav a{padding:.45rem .7rem;font-size:.95rem}.nav a span+span{display:none}.brand{left:16px;font-size:1.7rem}}

/* cover art */
.cover{position:relative;overflow:hidden;background:var(--ink);border-radius:14px;aspect-ratio:1}
.cover svg{width:100%;height:100%}

/* hero */
.hero{height:600vh;position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#1a120d;--fg:#FBF3E4;--btn-bg:var(--turmeric);--btn-fg:var(--ink);--shadow:0 2px 30px rgba(10,5,2,.5)}
.stage[data-tone="ink"]{--fg:#1E1A17;--btn-bg:#1E1A17;--btn-fg:#FAF3E7;--shadow:none}
.art{position:absolute;inset:0}
.art__img{position:absolute;inset:0;opacity:0;transform:scale(1.06)}
.art__img svg{width:100%;height:100%}
.art__img[data-i="0"]{opacity:1}
.title{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 1.5rem;color:var(--fg);transition:color .6s}
.wordmark{margin:0;font-family:var(--font-display);font-weight:400;font-size:var(--wm-size);line-height:.95;text-shadow:var(--shadow)}
html.motion .wordmark{opacity:0}
.stack{margin-top:1.2rem;width:100%;display:flex;flex-direction:column;align-items:center}
.beats{display:grid;justify-items:center;align-items:center;width:100%}
.beat{grid-area:1/1;margin:0;max-width:22ch;font-weight:500;font-size:clamp(1.8rem,5vw,3.4rem);line-height:1.2;text-wrap:balance;text-shadow:var(--shadow);opacity:0}
.beat:last-child{font-style:italic;font-weight:400}
html:not(.motion) .beat:not(:last-child){display:none}
html:not(.motion) .beat:last-child{opacity:1}
.button{margin-top:2rem;display:inline-block;padding:.85rem 1.8rem;border-radius:999px;background:var(--btn-bg);color:var(--btn-fg);font-weight:500;font-size:1.05rem;transition:background-color .6s,color .6s,transform .2s}
html.motion .button{opacity:0;pointer-events:none}
.button:hover{transform:translateY(-2px)}
.cue{position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);margin:0;font-style:italic;font-size:1.3rem;color:var(--fg);text-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:.4rem;animation:bob 2s ease-in-out infinite}
@keyframes bob{50%{transform:translate(-50%,6px)}}

/* after the hero */
.wrap{width:min(1200px,100% - 40px);margin-inline:auto}
section.block{padding:clamp(70px,10vw,130px) 0}
h2.big{font-family:var(--font-display);font-weight:400;font-size:clamp(2.6rem,7vw,5rem);line-height:1;margin:0 0 .6rem}
.lede{color:var(--mute);max-width:46ch;margin:0 0 2.4rem}
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:26px}
.card{display:block}
.card .cover{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.card:hover .cover{transform:translateY(-6px) rotate(-1deg);box-shadow:0 22px 40px rgba(30,26,23,.22)}
.card h3{font-weight:500;font-size:1.1rem;margin:.8rem 0 0;line-height:1.25}
.card p{margin:0;color:var(--mute);font-size:.95rem}
.moods{display:flex;flex-wrap:wrap;gap:12px}
.mood{padding:.7rem 1.4rem;border-radius:999px;border:1.5px solid var(--ink);font-size:1.05rem;transition:background .25s,color .25s}
.mood:hover{background:var(--ink);color:var(--cream)}
.rv{opacity:0;transform:translateY(30px)}
html:not(.motion) .rv{opacity:1;transform:none}
footer.site{padding:40px 0 60px;color:var(--mute);font-size:.95rem;border-top:1px solid rgba(30,26,23,.12)}
footer.site .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
@media(prefers-reduced-motion:reduce){.cue{animation:none}}
.title::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 45% at 50% 55%,rgba(18,10,6,.45),rgba(18,10,6,0) 75%);opacity:1}
.stage[data-tone="ink"] .title::before{background:radial-gradient(ellipse 60% 45% at 50% 55%,rgba(250,243,231,.8),rgba(250,243,231,0) 75%)}
.title>*{position:relative}