/* Music Therapy, Vol. 1 — production site. Gold-on-velvet theatrical. */
:root{
  --maroon:#5e1622; --maroon-d:#3a0c14; --maroon-x:#220409;
  --gold:#d4af37; --gold-b:#ecd089; --gold-d:#9a6a05;
  --cream:#f7f0e2; --cream-d:#e9dcc2; --ink:#241a1c;
  --paper:#fbf7ee;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --serif:'Spectral',Georgia,'Times New Roman',serif;
  --disp:'Playfair Display',Georgia,serif;
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--serif); color:var(--cream); line-height:1.65;
  background:
    radial-gradient(1200px 700px at 50% -10%, #7a1f2e 0%, transparent 60%),
    linear-gradient(180deg,#2c0810 0%, #220409 40%, #1a0509 100%);
  background-attachment:fixed;
}
a{color:var(--gold-b);text-decoration:none}
a:hover{color:#fff}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.eyebrow{font-family:var(--serif);font-style:italic;letter-spacing:.28em;text-transform:uppercase;
  font-size:.78rem;color:var(--gold);margin:0 0 .6rem}
h1,h2,h3{font-family:var(--disp);font-weight:800;line-height:1.08;text-wrap:balance}
h2.section-title{font-size:clamp(2rem,4.6vw,3.4rem);margin:.1em 0 .35em;color:var(--cream)}
h2 .gild{color:var(--gold)}
.lede{font-size:clamp(1.05rem,1.7vw,1.35rem);color:var(--cream-d);max-width:65ch}

/* curtains framing the whole page */
.curtain{position:fixed;top:0;bottom:0;width:8vw;max-width:130px;z-index:5;pointer-events:none}
.curtain.l{left:0;background:
  repeating-linear-gradient(90deg,#4d0f1a 0,#6e1b29 14px,#3a0a13 28px,#5a1623 42px);
  box-shadow:inset -26px 0 40px rgba(0,0,0,.6)}
.curtain.r{right:0;background:
  repeating-linear-gradient(90deg,#5a1623 0,#3a0a13 14px,#6e1b29 28px,#4d0f1a 42px);
  box-shadow:inset 26px 0 40px rgba(0,0,0,.6)}
@media(max-width:900px){.curtain{display:none}}

/* nav */
.nav{position:sticky;top:0;z-index:20;backdrop-filter:blur(8px);
  background:linear-gradient(180deg,rgba(26,5,9,.92),rgba(26,5,9,.6));
  border-bottom:1px solid rgba(212,175,55,.28)}
.nav .wrap{display:flex;align-items:center;gap:1.2rem;height:60px}
.brand{font-family:var(--disp);font-weight:800;letter-spacing:.02em;color:var(--gold);font-size:1.05rem;margin-right:auto}
.brand b{color:var(--cream)}
.nav a.link{color:var(--cream-d);font-size:.92rem;position:relative;padding:4px 2px}
.nav a.link::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--gold);transition:right .25s}
.nav a.link:hover{color:#fff}.nav a.link:hover::after{right:0}
@media(max-width:760px){.nav a.link{display:none}}

/* hero */
.hero{padding:clamp(2.5rem,6vw,5rem) 0 clamp(2rem,5vw,4rem)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:920px){.hero .wrap{grid-template-columns:1fr;text-align:center}}
.poster{position:relative;border-radius:14px;overflow:hidden;border:2px solid var(--gold-d);
  box-shadow:var(--shadow), 0 0 0 8px rgba(212,175,55,.08);max-width:480px;margin-inline:auto;width:100%}
.poster::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 60px rgba(0,0,0,.5)}
.hero h1{font-size:clamp(2.5rem,5.6vw,4.4rem);margin:0;letter-spacing:-0.5px;
  background:linear-gradient(180deg,#f7e7b0,#d4af37 55%,#9a6a05);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.35))}
.hero .vol{font-family:var(--disp);font-style:italic;color:var(--maroon);background:var(--gold-b);
  display:inline-block;padding:.05em .6em;border-radius:4px;font-size:1.3rem;margin:.4rem 0 0;font-weight:700}
.hero .tagline{font-style:italic;font-size:clamp(1.15rem,2.4vw,1.6rem);color:var(--cream);margin:1.3rem 0 1rem}
.hero p.sub{color:var(--cream-d);max-width:48ch}
@media(max-width:920px){.hero p.sub{margin-inline:auto}}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
@media(max-width:920px){.cta-row{justify-content:center}}
.btn{font-family:var(--serif);font-weight:600;font-size:1rem;border-radius:999px;padding:.7em 1.4em;
  border:1.5px solid var(--gold);cursor:pointer;transition:.2s;display:inline-flex;gap:.5em;align-items:center}
.btn.gold{background:linear-gradient(180deg,#ecd089,#d4af37);color:#3a0c14;border-color:var(--gold-b)}
.btn.gold:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--gold-b)}
.btn.ghost:hover{background:rgba(212,175,55,.12);color:#fff}

/* generic section */
section.band{padding:clamp(3rem,7vw,5.5rem) 0;border-top:1px solid rgba(212,175,55,.16)}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.4rem 0}
.chip{border:1px solid rgba(212,175,55,.4);border-radius:999px;padding:.35em .9em;font-size:.86rem;color:var(--gold-b);
  background:rgba(212,175,55,.06)}
/* tone arc */
.arc{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:1.4rem;font-family:var(--disp);font-weight:700}
.arc .step{padding:.4em .85em;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid rgba(212,175,55,.25)}
.arc .step.happy{color:#ffd76a}.arc .step.funny{color:#ff9d6a}.arc .step.sad{color:#9ec6ff}.arc .step.hope{color:#9bf0c0}
.arc .ar{color:var(--gold-d)}

/* musical numbers */
.act-head{font-family:var(--disp);font-size:clamp(1.4rem,3vw,2rem);color:var(--gold);margin:2.2rem 0 1rem;
  display:flex;align-items:baseline;gap:.8rem}
.act-head .sub{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--cream-d)}
.songs{display:grid;gap:1rem}
.song{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));
  border:1px solid rgba(212,175,55,.22);border-left:3px solid var(--gold-d);border-radius:12px;
  padding:1.1rem 1.2rem}
.song .top{display:flex;gap:.9rem;align-items:baseline;flex-wrap:wrap}
.song .num{font-family:var(--disp);font-weight:800;color:var(--gold-d);font-size:1.5rem;line-height:1;min-width:1.6em}
.song h4{font-family:var(--disp);font-size:1.22rem;margin:0;color:var(--cream)}
.song .who{font-style:italic;color:var(--gold-b);font-size:.95rem;margin-left:auto;text-align:right}
.song .fn{color:var(--cream-d);font-size:.98rem;margin:.55rem 0 .2rem}
.song .tone{font-size:.82rem;color:var(--gold);letter-spacing:.04em;font-style:italic}
.badge-new{font-family:var(--serif);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:#3a0c14;background:var(--gold-b);border-radius:4px;padding:.15em .5em;font-weight:700;vertical-align:middle}
/* player */
.player{margin-top:.8rem}
.versions{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.6rem}
.vpill{font-family:var(--serif);font-size:.82rem;border:1px solid rgba(212,175,55,.5);background:rgba(212,175,55,.07);
  color:var(--gold-b);border-radius:999px;padding:.3em .85em;cursor:pointer;transition:.15s}
.vpill:hover{background:rgba(212,175,55,.18);color:#fff}
.vpill.active{background:linear-gradient(180deg,#ecd089,#d4af37);color:#3a0c14;border-color:var(--gold-b);font-weight:600}
audio{width:100%;height:40px;filter:sepia(.25) saturate(1.2) hue-rotate(-8deg)}
.lyrics{margin-top:.7rem;border-top:1px dashed rgba(212,175,55,.3);padding-top:.7rem}
.lyrics summary{cursor:pointer;color:var(--gold-b);font-style:italic;list-style:none}
.lyrics summary::-webkit-details-marker{display:none}
.lyrics summary::before{content:"\25B8 ";color:var(--gold-d)}
.lyrics[open] summary::before{content:"\25BE "}
.lyrics pre{font-family:var(--serif);white-space:pre-wrap;color:var(--cream);margin:.7rem 0 0;font-size:.98rem;line-height:1.55}
.lyrics pre em{color:var(--gold);font-style:italic}

/* motifs */
.motifs{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.8rem;margin-top:1rem}
.motif{background:rgba(255,255,255,.03);border:1px solid rgba(212,175,55,.2);border-radius:10px;padding:.9rem}
.motif h5{font-family:var(--disp);margin:0 0 .2rem;color:var(--gold-b)}
.motif .note{font-size:.86rem;color:var(--cream-d);font-style:italic;margin-bottom:.5rem}

/* characters */
.chars{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;margin-top:1.6rem}
.char{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(212,175,55,.22);border-radius:12px;padding:1.1rem}
.char h4{font-family:var(--disp);color:var(--gold);margin:0 0 .15rem;font-size:1.2rem}
.char .role{font-style:italic;color:var(--gold-b);font-size:.86rem;margin-bottom:.5rem}
.char p{color:var(--cream-d);font-size:.94rem;margin:.3rem 0 0}
.char .owns{font-size:.84rem;color:var(--gold-b);margin-top:.6rem}
/* band chart */
.tablewrap{overflow-x:auto;margin-top:1.8rem;border:1px solid rgba(212,175,55,.25);border-radius:12px}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:.92rem}
th,td{text-align:left;padding:.7em .9em;border-bottom:1px solid rgba(212,175,55,.16);vertical-align:top}
thead th{background:var(--maroon);color:var(--gold-b);font-family:var(--disp);font-weight:700}
tbody tr:nth-child(even){background:rgba(212,175,55,.05)}
td b{color:var(--cream)}

/* set & staging */
.dial{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.6rem 0}
@media(max-width:760px){.dial{grid-template-columns:1fr}}
.dialcard{border:1px solid rgba(212,175,55,.25);border-radius:12px;padding:1.1rem;background:rgba(255,255,255,.03)}
.dialcard h4{font-family:var(--disp);color:var(--gold);margin:0 0 .4rem}
.planwrap{background:var(--paper);border-radius:14px;padding:1rem;margin:1.6rem 0;box-shadow:var(--shadow)}
.planwrap .cap{color:var(--maroon);font-style:italic;font-size:.9rem;text-align:center;margin-top:.5rem}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin-top:1.4rem}
.shot{border:1px solid rgba(212,175,55,.3);border-radius:12px;overflow:hidden;background:#1a0509;box-shadow:var(--shadow)}
.shot img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#120307}
.shot .cap{padding:.6em .9em;font-size:.86rem;color:var(--cream-d);font-style:italic}
.shot.placeholder{display:flex;align-items:center;justify-content:center;min-height:170px;color:var(--gold-d);font-style:italic;text-align:center;padding:1rem}
.empty-callout{margin-top:1.6rem;border-left:3px solid var(--gold);padding:1rem 1.2rem;background:rgba(212,175,55,.06);border-radius:0 12px 12px 0}
.empty-callout b{color:var(--gold)}

/* script */
.script-cta{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin:1.4rem 0}
.readerframe{width:100%;height:80vh;min-height:560px;border:1px solid rgba(212,175,55,.3);border-radius:12px;background:#2a2226;box-shadow:var(--shadow)}

/* footer */
footer{padding:3rem 0 4rem;border-top:1px solid rgba(212,175,55,.2);color:var(--cream-d);font-size:.92rem}
footer h3{font-family:var(--disp);color:var(--gold);font-size:1.3rem;margin:0 0 .6rem}
.foot-grid{display:grid;grid-template-columns:2fr 1fr;gap:2rem}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr}}
.note-loading{color:var(--gold-d);font-style:italic}