:root,:root[data-theme=dark]{
  --bg:#070605;--bg2:#12100e;--ink:#efe6da;--mute:#a8a094;--line:#2a2520;
  --hot:#ff6a13;--gold:#ffb347;--cool:#6f8fb8;--dim:#2b2622;--on:#120806;
  --nav-h:3.9rem;
}
:root[data-theme=light]{
  --bg:#f6f1ea;--bg2:#ece5db;--ink:#17120e;--mute:#5d544a;--line:#d6ccbe;
  --hot:#d4480a;--gold:#c9760a;--cool:#3f6190;--dim:#d9cfc1;--on:#fff;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font:400 1.0625rem/1.65 "Outfit",system-ui,sans-serif;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,.brand,.price{
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;
  line-height:1.12;letter-spacing:0;
}
a{color:inherit}img{display:block}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
html[lang=en] [data-lang=fr],html[lang=fr] [data-lang=en]{display:none}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--ink);color:var(--bg);padding:.5rem 1rem}

/* --- Nav: brand + links together, tools flush right --- */
.nav{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:1rem;
  min-height:var(--nav-h);
  padding:.75rem clamp(1rem,4vw,3rem);
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-family:Outfit,system-ui,sans-serif;font-weight:600;font-size:1.05rem;letter-spacing:0;flex:0 0 auto}
.brand img{border-radius:50%;width:36px;height:36px}
.nav-links{display:flex;flex-wrap:wrap;align-items:center;gap:1.15rem;margin-left:.75rem;font-size:.95rem}
.nav-links a{text-decoration:none;color:var(--mute);white-space:nowrap}
.nav-links a:hover,.nav-links a[aria-current=page]{color:var(--ink)}
.tools{display:flex;align-items:center;gap:.55rem;margin-left:auto;flex:0 0 auto}
.lang{display:flex;border:1px solid var(--line);border-radius:99px;overflow:hidden}
.lang button,.mode{background:none;border:0;color:var(--mute);font:600 .8rem inherit;padding:.4rem .7rem;cursor:pointer}
.lang button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.mode{border:1px solid var(--line);border-radius:50%;width:34px;height:34px;padding:0;display:grid;place-items:center}
.pill,.btn{
  display:inline-block;text-decoration:none;font-weight:600;border-radius:99px;
  background:linear-gradient(100deg,var(--hot),var(--gold));color:#1a0a02;padding:.7rem 1.4rem;
}
.pill{padding:.45rem 1.1rem;font-size:.9rem}
.btn.ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--hot)}
.btn.big{font-size:clamp(1.1rem,3vw,1.5rem);padding:1rem 2rem}
.nav-checkbox{position:absolute;opacity:0;pointer-events:none}
.nav-toggle{display:none;width:40px;height:40px;cursor:pointer;place-items:center;flex:0 0 auto}
.nav-toggle span,.nav-toggle span::before{display:block;width:20px;height:2px;background:var(--ink);position:relative}
.nav-toggle span::before{content:"";top:-6px;position:absolute}

/* --- Hero: two columns so copy never sits under the disc --- */
.hero{
  position:relative;
  min-height:calc(100svh - var(--nav-h));
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;
  column-gap:clamp(1rem,3vw,2.5rem);
  padding:clamp(2.5rem,6vw,4rem) clamp(1rem,5vw,4rem) 4.5rem;
  overflow:hidden;
}
@property --p{
  syntax:"<number>";
  inherits:true;
  initial-value:0;
}
.disc{
  position:relative;z-index:0;grid-column:2;grid-row:1;
  width:min(100%,42rem);aspect-ratio:1;
  justify-self:end;align-self:center;
  margin-right:clamp(-4rem,-8vw,-1.5rem);
  animation:disc-rise 1.35s cubic-bezier(.22,1,.36,1) both;
}
.disc-haze{
  position:absolute;inset:6%;border-radius:50%;
  background:
    radial-gradient(circle at 42% 38%,color-mix(in srgb,var(--gold) 28%,transparent),transparent 42%),
    radial-gradient(circle at 62% 58%,color-mix(in srgb,var(--cool) 22%,transparent),transparent 48%);
  filter:blur(2.5vmin);
  animation:haze-drift 14s ease-in-out infinite alternate;
  pointer-events:none;
}
.corona,.corona-shimmer{
  position:absolute;inset:0;border-radius:50%;
  -webkit-mask:radial-gradient(circle,transparent 0 63%,#000 63.4% 72%,transparent 72.4%),repeating-conic-gradient(from -90deg,#000 0 21deg,transparent 21deg 24deg);
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle,transparent 0 63%,#000 63.4% 72%,transparent 72.4%),repeating-conic-gradient(from -90deg,#000 0 21deg,transparent 21deg 24deg);
  mask-composite:intersect;
}
.corona{
  /* Progress stays fixed so segments map to the challenge; only the shimmer layer spins. */
  background:conic-gradient(from -90deg,var(--hot),var(--gold) calc(var(--p)*360deg),var(--dim) 0);
  transition:--p 1.8s cubic-bezier(.22,1,.36,1);
}
.corona-shimmer{
  background:conic-gradient(from 0deg,transparent 0 68%,color-mix(in srgb,var(--gold) 55%,transparent) 78%,transparent 90% 100%);
  mix-blend-mode:screen;
  opacity:.55;
  animation:corona-spin 28s linear infinite;
  will-change:transform;
  pointer-events:none;
}
.moon{
  position:absolute;inset:14%;border-radius:50%;
  background:
    radial-gradient(circle at 34% 32%,color-mix(in srgb,var(--cool) 18%,transparent),transparent 42%),
    radial-gradient(circle at 50% 50%,#000 66%,#0c0a08 100%);
  box-shadow:
    0 0 6vmin 1vmin color-mix(in srgb,var(--hot) 55%,transparent),
    0 0 14vmin 2vmin color-mix(in srgb,var(--gold) 18%,transparent),
    inset 0 0 4vmin color-mix(in srgb,var(--cool) 35%,transparent);
  animation:moon-breathe 7.5s ease-in-out infinite alternate;
}
.moon-rim{
  position:absolute;inset:13.2%;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--gold) 28%,transparent);
  box-shadow:0 0 2.5vmin color-mix(in srgb,var(--hot) 35%,transparent);
  animation:rim-pulse 7.5s ease-in-out infinite alternate;
  pointer-events:none;
}
:root[data-theme=light] .moon{
  background:
    radial-gradient(circle at 34% 32%,color-mix(in srgb,var(--cool) 12%,transparent),transparent 42%),
    #17120e;
}
:root[data-theme=light] .moon-rim{border-color:color-mix(in srgb,var(--hot) 35%,transparent)}
@keyframes disc-rise{
  from{opacity:0;transform:scale(.92) translateY(1.25rem)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes corona-spin{to{transform:rotate(360deg)}}
@keyframes moon-breathe{
  from{box-shadow:0 0 5vmin .6vmin color-mix(in srgb,var(--hot) 42%,transparent),0 0 10vmin 1vmin color-mix(in srgb,var(--gold) 12%,transparent),inset 0 0 3.5vmin color-mix(in srgb,var(--cool) 28%,transparent);transform:scale(1)}
  to{box-shadow:0 0 8vmin 1.4vmin color-mix(in srgb,var(--hot) 62%,transparent),0 0 18vmin 3vmin color-mix(in srgb,var(--gold) 22%,transparent),inset 0 0 5vmin color-mix(in srgb,var(--cool) 40%,transparent);transform:scale(1.015)}
}
@keyframes rim-pulse{
  from{opacity:.35;transform:scale(1)}
  to{opacity:.85;transform:scale(1.012)}
}
@keyframes haze-drift{
  from{transform:translate(-1.5%,-1%) scale(1);opacity:.7}
  to{transform:translate(2%,1.5%) scale(1.06);opacity:1}
}
.hero-copy{position:relative;z-index:1;grid-column:1;grid-row:1;max-width:34rem;min-width:0}
.kicker{color:var(--gold);font-weight:500;margin-bottom:1rem}
:root[data-theme=light] .kicker{color:var(--hot)}
h1{
  font-size:clamp(2.4rem,6.2vw,5.4rem);
  margin-bottom:1.25rem;
  letter-spacing:0;
  text-wrap:balance;
  text-shadow:0 2px 24px var(--bg);
}
.lede{color:var(--mute);max-width:30rem;margin-bottom:2rem}
.cta{display:flex;flex-wrap:wrap;gap:.8rem}
.ring-note{
  position:absolute;left:clamp(1rem,5vw,4rem);bottom:1.25rem;z-index:1;
  font-size:.85rem;color:var(--mute);max-width:22rem;
}

.sec{padding:clamp(4rem,10vw,8rem) clamp(1rem,5vw,4rem);max-width:72rem;margin:auto}
h2{font-size:clamp(2rem,5vw,3.4rem);margin-bottom:1rem;max-width:18ch;text-wrap:balance}
.sub{color:var(--mute);max-width:36rem;margin-bottom:2.5rem}
blockquote{
  font:600 clamp(1.6rem,4.2vw,2.8rem)/1.15 "Cormorant Garamond",Georgia,serif;
  max-width:22ch;margin-bottom:3rem;color:var(--gold);text-wrap:balance;
}
:root[data-theme=light] blockquote{color:var(--hot)}
.beats{list-style:none;padding:0 0 0 1.4rem;border-left:2px solid var(--line);display:grid;gap:2rem;max-width:34rem}
.beats li{position:relative}
.beats li::before{
  content:"";position:absolute;left:calc(-1.4rem - 6px);top:.55rem;
  width:10px;height:10px;border-radius:50%;background:var(--hot);
}
.beats time{font-weight:600;color:var(--mute);font-size:.9rem}

.offers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.15rem;align-items:stretch}
.offer{
  background:var(--bg2);border-radius:1.5rem;padding:1.65rem 1.5rem;
  display:flex;flex-direction:column;gap:1rem;min-width:0;
  border:1px solid var(--line);
}
.offer-featured{
  border-color:color-mix(in srgb,var(--hot) 50%,var(--line));
  background:linear-gradient(165deg,color-mix(in srgb,var(--hot) 16%,var(--bg2)),var(--bg2));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--hot) 22%,transparent);
}
.offer h3{font-size:1.25rem}
.price{font-size:clamp(2.4rem,4.5vw,3.6rem);color:var(--gold);line-height:1}
:root[data-theme=light] .price{color:var(--hot)}
.price small{display:inline-block;font:500 .95rem/1.2 "Outfit",sans-serif;color:var(--mute);margin-left:.45rem;vertical-align:middle}
.tags{color:var(--mute);font-size:.95rem}
.offer > p:not(.price):not(.tags){flex:1}
.offer .btn{align-self:start;margin-top:auto}
.offers-note{color:var(--mute);font-size:.9rem;margin-top:1.25rem;max-width:48rem}
.offers-note a{color:var(--gold);text-decoration:underline;text-underline-offset:.15em}

.count{font:600 clamp(3rem,10vw,7rem)/1 "Cormorant Garamond",Georgia,serif;margin-bottom:1rem}
.count span{color:var(--hot)}
.bar{height:6px;background:var(--dim);border-radius:9px;overflow:hidden;margin-bottom:2rem}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--hot),var(--gold));transition:width .8s}
/* Spotify-style: compact tiles, square art on top, meta underneath (overall rectangle). */
.song-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(5.75rem,1fr));
  gap:1rem .65rem;
  margin-bottom:2.5rem;
  align-items:start;
}
.song-card{
  min-width:0;display:grid;gap:.55rem;align-content:start;
  padding:.55rem .55rem .7rem;
  border-radius:.75rem;border:0;background:transparent;
  transition:background .25s ease,transform .25s ease;
}
.song-card.released{
  grid-column:span 2;
  background:color-mix(in srgb,var(--bg2) 88%,transparent);
}
.song-card.released:hover{
  background:color-mix(in srgb,var(--dim) 55%,var(--bg2));
  transform:translateY(-2px);
}
.song-card.mystery{
  opacity:.72;
}
.song-card.mystery:hover{opacity:.9}
.song-cover{
  display:block;width:100%;height:auto;max-width:100%;
  aspect-ratio:1/1;object-fit:cover;object-position:center;
  border-radius:.55rem;background:var(--dim);
  box-shadow:0 8px 20px color-mix(in srgb,var(--on) 22%,transparent);
}
img.song-cover{height:auto} /* override HTML height attr so tiles stay compact */
.song-cover-fallback{
  width:100%;aspect-ratio:1/1;box-shadow:none;border:1px dashed var(--line);
  background:
    radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--hot) 18%,transparent) 0 36%,transparent 58%),
    linear-gradient(155deg,var(--bg2),var(--dim));
}
.song-body{
  display:grid;gap:.15rem;padding:0 .15rem;min-width:0;
}
.song-num{
  font-weight:600;font-size:.68rem;letter-spacing:.08em;color:var(--mute);
}
.song-title{
  font:600 .92rem/1.2 "Cormorant Garamond",Georgia,serif;
  margin:0;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.song-card.mystery .song-title{color:var(--mute);font-size:.8rem}
.song-body a,.song-body>span{
  font-size:.72rem;font-weight:500;color:var(--mute);text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.song-body a{color:var(--gold);font-weight:600}
.song-body a:hover{color:var(--hot);text-decoration:underline}
.song-card.mystery .song-body>span{
  font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);
}
@media(max-width:640px){
  .song-grid{grid-template-columns:repeat(auto-fill,minmax(5.5rem,1fr));gap:.85rem .55rem}
  .song-card{padding:.4rem .4rem .55rem;border-radius:.6rem}
  .song-cover{border-radius:.45rem}
  .song-title{font-size:.85rem}
}
@media(prefers-reduced-motion:reduce){
  .song-card,.song-card.released:hover{transition:none;transform:none}
}

.people{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:0 2rem}
.people a{
  display:flex;justify-content:space-between;gap:1rem;padding:1rem 0;
  border-bottom:1px solid var(--line);text-decoration:none;
}
.people a:hover b{color:var(--hot)}
.people span{color:var(--mute);font-size:.9rem;text-align:right}

.book{text-align:left}
.meta{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1.5rem;color:var(--mute)}
.foot{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:2rem clamp(1rem,5vw,4rem);border-top:1px solid var(--line);
  color:var(--mute);font-size:.9rem;
}

.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s,transform .7s}
.js .reveal.in{opacity:1;transform:none}

/* Mid desktop: keep two columns but shrink type / disc */
@media(max-width:1200px){
  h1{font-size:clamp(2.2rem,5.4vw,4rem)}
  .disc{width:min(100%,34rem);margin-right:clamp(-3rem,-6vw,-1rem)}
  .nav-links{gap:.9rem;font-size:.9rem}
}

/* Compact desktop / large tablet: hamburger + stacked hero */
@media(max-width:980px){
  .nav-toggle{display:grid;margin-left:auto;order:2}
  .tools{margin-left:.25rem;order:3}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;order:4;
    flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;margin-left:0;
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:.5rem clamp(1rem,4vw,3rem);
  }
  .nav-links a{padding:.9rem 0}
  .nav-checkbox:checked~.nav-links{display:flex}
  .nav-checkbox:focus-visible~.nav-toggle{outline:2px solid var(--gold)}
  .pill{display:none}
  .hero{
    grid-template-columns:1fr;
    align-items:start;
    min-height:auto;
    padding:2.5rem clamp(1rem,5vw,4rem) 3rem;
    row-gap:1.5rem;
  }
  .hero-copy{grid-column:1;grid-row:1;max-width:40rem}
  .disc{
    grid-column:1;grid-row:2;
    width:min(88vw,28rem);justify-self:center;margin:0 0 -2rem;
  }
  .ring-note{position:static;grid-column:1;grid-row:3;max-width:34rem;margin-top:.5rem}
  .offers{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:720px){
  .offers{grid-template-columns:1fr}
  .offer-featured{order:-1}
}

@media(max-width:640px){
  .disc{width:120%;max-width:none;margin-left:-10%;margin-right:-10%;opacity:.92}
  .ring-note{display:none}
  h1{font-size:clamp(2.3rem,11vw,3.4rem)}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto;animation:none!important}
  .js .reveal{opacity:1;transform:none}
  .disc,.corona,.moon,.moon-rim,.disc-haze{animation:none!important;opacity:1;transform:none}
  .corona{transition:none}
}