:root{
  --ash:#171310;
  --ember:#D9531B;
  --gold:#E7B24C;
  --cream:#F3E9D6;
  --clay:#5A3218;
  --muted:#9C8F7C;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  background:var(--ash);
  color:var(--cream);
  font-family:'Work Sans',system-ui,sans-serif;
  font-weight:300;
  line-height:1.65;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  left:50%;
  bottom:-32vh;
  transform:translateX(-50%);
  width:120vmax;
  height:70vmax;
  background:radial-gradient(ellipse at center,
    rgba(217,83,27,.28) 0%,
    rgba(217,83,27,.12) 32%,
    rgba(231,178,76,.045) 55%,
    transparent 72%);
  pointer-events:none;
  z-index:0;
  animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{opacity:.85;transform:translateX(-50%) scale(1)}
  50%{opacity:1;transform:translateX(-50%) scale(1.05)}
}
@media (prefers-reduced-motion:reduce){
  body::before{animation:none}
}

/* ---------- nav ---------- */
nav{
  position:relative;
  z-index:2;
  display:flex;
  gap:28px;
  justify-content:center;
  flex-wrap:wrap;
  padding:32px 24px 0;
}
nav a{
  font-size:.76rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  text-decoration:none;
  transition:color .2s ease;
}
nav a:hover,nav a:focus-visible{color:var(--gold)}
nav a.current{color:var(--gold)}

/* ---------- layout ---------- */
.wrap{
  position:relative;
  z-index:1;
  max-width:560px;
  margin:0 auto;
  padding:7vh 24px 6vh;
  text-align:center;
}
.wrap.wide{max-width:680px}

.mark{
  width:42px;
  height:42px;
  margin:0 auto 30px;
  display:block;
}

h1{
  font-family:'Fraunces',Georgia,serif;
  font-weight:400;
  font-size:clamp(2.7rem,10vw,4.2rem);
  line-height:1;
  letter-spacing:-.015em;
  color:var(--gold);
  margin-bottom:20px;
}

h2{
  font-family:'Fraunces',Georgia,serif;
  font-weight:400;
  font-size:clamp(1.8rem,6vw,2.5rem);
  line-height:1.15;
  color:var(--gold);
  margin-bottom:18px;
}

.tagline{font-size:1.05rem;opacity:.9;margin-bottom:6px}

.place{
  font-size:.82rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:46px;
}

.rule{
  width:46px;height:1px;
  background:var(--clay);
  margin:0 auto 46px;
  position:relative;
}
.rule::after{
  content:"";
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:5px;height:5px;border-radius:50%;
  background:var(--ember);
  box-shadow:0 0 9px rgba(217,83,27,.9);
}

p{margin-bottom:16px}
.bio{opacity:.78}
.bio em,em.gold{font-style:italic;color:var(--gold);opacity:.95}

.lead{
  font-family:'Fraunces',Georgia,serif;
  font-size:clamp(1.3rem,4.6vw,1.75rem);
  line-height:1.35;
  color:var(--cream);
  margin-bottom:28px;
}

/* ---------- releases ---------- */
.release{
  margin-top:52px;
  padding-top:38px;
  border-top:1px solid rgba(90,50,24,.55);
}
.eyebrow{
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ember);
  margin-bottom:14px;
}
.track{
  font-family:'Fraunces',Georgia,serif;
  font-size:1.9rem;
  font-weight:300;
  color:var(--cream);
  margin-bottom:8px;
}
.date{font-size:.9rem;color:var(--muted);margin-bottom:16px}
.note{font-size:.95rem;opacity:.72;margin-bottom:24px;font-style:italic}

.listen{
  display:inline-block;
  font-size:.85rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--ash);background:var(--gold);
  padding:15px 34px;border-radius:2px;
  text-decoration:none;
  transition:background .25s ease,transform .25s ease;
}
.listen:hover,.listen:focus-visible{
  background:var(--ember);color:var(--cream);transform:translateY(-2px);
}
.listen.ghost{background:transparent;color:var(--gold);border:1px solid var(--clay)}
.listen.ghost:hover,.listen.ghost:focus-visible{background:var(--gold);color:var(--ash);border-color:var(--gold)}

.platforms{
  margin-top:22px;
  display:flex;gap:8px 20px;
  justify-content:center;flex-wrap:wrap;
}
.platforms a{
  font-size:.74rem;letter-spacing:.08em;
  color:var(--muted);text-decoration:none;
  transition:color .2s ease;
}
.platforms a:hover,.platforms a:focus-visible{color:var(--gold)}

a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* ---------- story ---------- */
.stats{
  display:flex;justify-content:center;
  gap:44px;flex-wrap:wrap;
  margin:44px 0 10px;
}
.stat .num{
  font-family:'Fraunces',Georgia,serif;
  font-size:2.4rem;color:var(--gold);line-height:1;
}
.stat .lbl{
  font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
  margin-top:6px;
}

.chapter{
  margin-top:66px;
  padding-top:40px;
  border-top:1px solid rgba(90,50,24,.55);
  text-align:left;
}
.chapter .num{
  font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ember);
  margin-bottom:10px;
}
.chapter h3{
  font-family:'Fraunces',Georgia,serif;
  font-weight:400;font-size:1.65rem;
  color:var(--cream);margin-bottom:4px;
}
.chapter .years{
  font-size:.85rem;color:var(--muted);
  letter-spacing:.08em;margin-bottom:22px;
}
.chapter p{opacity:.82}

figure{margin:28px 0 8px}
figure img{
  width:100%;height:auto;display:block;
  border-radius:3px;
  filter:saturate(.92) contrast(1.02);
}
figcaption{
  font-size:.78rem;color:var(--muted);
  margin-top:10px;line-height:1.5;
}

.closing{
  margin-top:70px;padding-top:44px;
  border-top:1px solid rgba(90,50,24,.55);
  text-align:center;
}

/* ---------- footer ---------- */
footer{
  position:relative;z-index:1;
  max-width:680px;margin:0 auto;
  padding:40px 24px 60px;
  border-top:1px solid rgba(90,50,24,.55);
  display:flex;gap:24px;
  justify-content:center;flex-wrap:wrap;
}
footer a{
  font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
  text-decoration:none;transition:color .2s ease;
}
footer a:hover,footer a:focus-visible{color:var(--gold)}

.legal{
  text-align:center;font-size:.72rem;
  color:#6B6055;letter-spacing:.04em;
  padding-bottom:50px;
  position:relative;z-index:1;
}