/* ============ SONATA · music · staff lines, playable keys, movements ============
   v2 foundation: 4pt scale · 52px btn · SVG icons · esc() · focus rings ·
   paused marquees · reduced-motion safe · 768px discipline · 2 webfonts
   ============================================================================ */
:root{
  --surface:#121016; --surface-2:#1B1822; --panel:#221E2C; --ink:#F0EBF4; --muted:#A79FB4;
  --gold:#D9B25E; --gold-ink:#241B05; --rose:#E08AA0; --teal:#7BC8B7; --violet:#9D8CFF;
  --line:#332E40; --wa:#1FAB55;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --t-display:clamp(2.6rem,9vw,5.2rem); --t-h2:clamp(1.6rem,4.8vw,2.5rem);
  --t-h3:1.15rem; --t-body:1rem; --t-small:.875rem; --t-caption:.75rem; --t-micro:.6875rem;
  --r-s:8px;--r-m:16px;--r-full:999px;
  --shadow-1:0 1px 2px rgba(0,0,0,.4),0 14px 34px -14px rgba(0,0,0,.55);
  --shadow-2:0 32px 64px -28px rgba(0,0,0,.7);
  --ease:cubic-bezier(.22,1,.36,1); --dur:.6s;
  --d:'Fraunces',Georgia,serif; --m:'JetBrains Mono',ui-monospace,monospace;
  --b:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--b);background:var(--surface);color:var(--ink);line-height:1.65;font-size:var(--t-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{text-decoration:none;color:inherit}
h1,h2,h3{font-family:var(--d);font-weight:600;line-height:1.08;letter-spacing:-.015em;overflow-wrap:break-word}
.wrap{max-width:940px;margin:0 auto;padding-inline:var(--s4)}
section{padding-block:var(--s8);position:relative}
@media(min-width:768px){section{padding-block:var(--s9)}}
.skip{position:absolute;left:-999px;top:var(--s2)}
.skip:focus{left:var(--s2);z-index:100;background:var(--gold);color:var(--gold-ink);padding:var(--s2) var(--s4);border-radius:var(--r-s)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:var(--r-s)}
.rv{opacity:0;transform:translateY(26px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.1s}.rv[data-d="2"]{transition-delay:.2s}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}html{scroll-behavior:auto}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);font-family:var(--b);font-weight:650;font-size:var(--t-small);height:52px;padding-inline:var(--s5);border-radius:var(--r-full);border:1.5px solid transparent;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease);white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.98)}
.btn svg{width:18px;height:18px;flex-shrink:0}
.btn-gold{background:linear-gradient(110deg,var(--gold),#EBCB86);color:var(--gold-ink);box-shadow:0 0 34px -10px rgba(217,178,94,.55)}
.btn-outline{border-color:var(--line);color:var(--ink);background:var(--surface-2)}
.btn-outline:hover{border-color:var(--gold)}
.btn-wa{background:var(--wa);color:#fff}
.k{font-family:var(--m);font-size:var(--t-micro);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--rose);display:block;margin-bottom:var(--s3)}
.k::before{content:"♩ = "}
h2{font-size:var(--t-h2)}
h2 em{font-style:italic;font-weight:400;color:var(--gold)}
.lead{color:var(--muted);max-width:56ch;margin-top:var(--s3)}
/* scroll progress — a bow drawn across the top */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--gold),var(--rose));z-index:60}

/* ---------- HERO — the grand staff ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;position:relative;overflow:hidden;
background:radial-gradient(640px 460px at 82% 12%,rgba(157,140,255,.14),transparent 60%),radial-gradient(560px 420px at 8% 88%,rgba(217,178,94,.1),transparent 60%),var(--surface)}
/* five staff lines drawn across the hero */
.staff{position:absolute;inset-inline:0;top:34%;height:200px;opacity:.5;pointer-events:none}
.staff line{stroke:var(--line);stroke-width:1.5}
/* floating notes with gentle drift */
.note{position:absolute;font-family:var(--d);color:var(--gold);opacity:0;animation:floatnote 9s var(--ease) infinite}
.note.n1{top:30%;left:12%;font-size:2rem;animation-delay:0s}
.note.n2{top:42%;left:72%;font-size:2.6rem;animation-delay:2.2s;color:var(--rose)}
.note.n3{top:26%;left:52%;font-size:1.7rem;animation-delay:4.4s;color:var(--teal)}
.note.n4{top:48%;left:30%;font-size:2.2rem;animation-delay:6.6s;color:var(--violet)}
@keyframes floatnote{0%{opacity:0;transform:translateY(16px) rotate(-6deg)}12%{opacity:.85}55%{opacity:.85}100%{opacity:0;transform:translateY(-44px) rotate(6deg)}}
.hero-nav{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s4);max-width:940px;margin:0 auto;width:100%}
.mark{font-family:var(--d);font-style:italic;font-size:1.1rem}
.mark b{color:var(--gold);font-style:normal}
.hero-body{position:relative;z-index:3;flex:1;display:flex;flex-direction:column;justify-content:center;padding-block:var(--s6) var(--s8)}
.stamp{font-family:var(--m);font-size:var(--t-caption);letter-spacing:.2em;text-transform:uppercase;color:var(--teal);display:block;margin-bottom:var(--s5)}
.hero h1{font-size:var(--t-display);max-width:14ch}
.hero h1 em{font-style:italic;font-weight:400;background:linear-gradient(100deg,var(--gold),var(--rose) 60%,var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% auto;animation:shimmer 7s linear infinite}
@keyframes shimmer{to{background-position:200% center}}
.hero .sub{color:var(--muted);max-width:52ch;margin-block:var(--s5) var(--s6);font-size:1.05rem}
.cta-row{display:flex;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s5)}
.meta-row{display:flex;gap:var(--s5);flex-wrap:wrap;font-size:var(--t-small);color:var(--muted)}
.meta-row span{display:inline-flex;align-items:center;gap:var(--s2)}
.meta-row svg{width:16px;height:16px;color:var(--gold)}

/* ---------- PLAYABLE PIANO — the wow ---------- */
.piano-wrap{position:relative;z-index:3;padding:0 var(--s4) var(--s6);max-width:940px;margin:0 auto;width:100%}
.piano-hint{font-family:var(--m);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s2);display:block}
.piano{display:flex;height:110px;border-radius:var(--r-s) var(--r-s) var(--r-m) var(--r-m);overflow:hidden;box-shadow:var(--shadow-2);position:relative;border:1px solid var(--line)}
.key{flex:1;background:linear-gradient(180deg,#F5F2EA,#E4DFD2);border-right:1px solid #C9C2B2;position:relative;cursor:pointer;transition:background .12s;border-top:4px solid var(--panel)}
.key:last-child{border-right:none}
.key:active,.key.on{background:linear-gradient(180deg,var(--gold),#EBCB86)}
.key .bk{position:absolute;top:0;right:-16px;width:32px;height:58%;background:linear-gradient(180deg,#2A2533,#14111B);border-radius:0 0 5px 5px;z-index:2;cursor:pointer;box-shadow:0 4px 8px rgba(0,0,0,.5)}
.key .bk:active,.key .bk.on{background:linear-gradient(180deg,var(--violet),#6A5ACD)}
.key:focus-visible,.key .bk:focus-visible{outline:3px solid var(--rose);outline-offset:-3px}

/* repertoire marquee */
.band{background:#0C0A10;border-block:1px solid var(--line);overflow:hidden;padding-block:var(--s3)}
.band-track{display:flex;gap:var(--s7);width:max-content;animation:mq 30s linear infinite;font-family:var(--d);font-style:italic;font-size:var(--t-small);color:var(--muted)}
.band-track.paused{animation-play-state:paused}
.band b{color:var(--gold);font-style:normal;font-family:var(--m);font-size:var(--t-micro);align-self:center;letter-spacing:.14em}
@keyframes mq{to{transform:translateX(-50%)}}

/* stats — tempo markings */
.tempi{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);margin-top:var(--s6)}
.tempo{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--s5) var(--s4);position:relative;transition:transform .3s var(--ease),border-color .3s var(--ease)}
.tempo:hover{transform:translateY(-5px);border-color:var(--gold)}
.tempo .marking{font-family:var(--d);font-style:italic;font-size:var(--t-caption);color:var(--rose);display:block;margin-bottom:var(--s1)}
.tempo b{font-family:var(--d);font-size:clamp(1.8rem,5vw,2.4rem);display:block;color:var(--gold)}
.tempo span{font-size:var(--t-caption);color:var(--muted)}
@media(min-width:768px){.tempi{grid-template-columns:repeat(4,1fr)}}

/* subjects — setlist */
.setlist{margin-top:var(--s6);border-top:1px solid var(--line)}
.song{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) var(--s2);border-bottom:1px solid var(--line);transition:padding .3s var(--ease),background .3s var(--ease);flex-wrap:wrap}
.song:hover{padding-left:var(--s5);background:rgba(217,178,94,.05)}
.song .no{font-family:var(--m);font-size:var(--t-caption);color:var(--rose);width:28px;flex-shrink:0}
.song b{font-family:var(--d);font-size:var(--t-h3)}
.song .bars{margin-left:auto;display:flex;gap:3px;align-items:flex-end;height:22px}
.song .bars i{width:3.5px;background:var(--teal);border-radius:2px;animation:eq 1.3s ease-in-out infinite alternate}
.song .bars i:nth-child(1){height:35%}.song .bars i:nth-child(2){height:85%;animation-delay:.15s}.song .bars i:nth-child(3){height:55%;animation-delay:.3s}.song .bars i:nth-child(4){height:95%;animation-delay:.45s}
@keyframes eq{to{transform:scaleY(.4)}}
.song small{color:var(--muted);font-size:var(--t-caption);flex-basis:100%;padding-left:calc(28px + var(--s4))}
@media(min-width:768px){.song small{flex-basis:auto;padding-left:0}}

/* timeline — movements */
.movements{margin-top:var(--s7)}
.mv{display:grid;grid-template-columns:64px 1fr;gap:var(--s4);padding-bottom:var(--s7);position:relative}
.mv:not(:last-child)::before{content:"";position:absolute;left:31px;top:70px;bottom:8px;width:1.5px;background:linear-gradient(var(--gold),transparent)}
.mv .roman{width:64px;height:64px;border:1.5px solid var(--gold);border-radius:50%;display:grid;place-items:center;font-family:var(--d);font-style:italic;font-size:1.3rem;color:var(--gold);background:var(--surface-2)}
.mv .tempo-name{font-family:var(--d);font-style:italic;color:var(--rose);font-size:var(--t-body)}
.mv .yr{font-family:var(--m);font-size:var(--t-micro);color:var(--muted);letter-spacing:.1em;display:block;margin-top:var(--s1)}
.mv h3{font-size:var(--t-h3);margin-block:var(--s2) var(--s1)}
.mv .org{font-size:var(--t-small);color:var(--teal);font-weight:650;margin-bottom:var(--s2)}
.mv p{color:var(--muted);font-size:var(--t-small);max-width:56ch}

/* awards — encore list */
.aw{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s4) var(--s1);border-bottom:1px dashed var(--line);flex-wrap:wrap;align-items:baseline;transition:padding .3s var(--ease)}
.aw:hover{padding-left:var(--s4)}
.aw .t{font-family:var(--d);font-size:var(--t-h3)}
.aw .t::before{content:"♪ ";color:var(--gold)}
.aw .n{color:var(--muted);font-size:var(--t-small);flex-basis:100%;padding-left:var(--s5)}
.aw .y{font-family:var(--m);color:var(--violet);font-weight:700;font-size:var(--t-caption)}

/* testimonials — programme notes */
.spot{background:linear-gradient(150deg,rgba(217,178,94,.12),rgba(157,140,255,.1));border:1px solid var(--line);border-radius:var(--r-m);padding:clamp(var(--s6),6vw,var(--s8));margin-top:var(--s6);position:relative}
.spot blockquote{font-family:var(--d);font-style:italic;font-size:clamp(1.2rem,3.6vw,1.8rem);line-height:1.4;max-width:28ch}
.spot cite{display:block;font-style:normal;margin-top:var(--s5);font-size:var(--t-small);color:var(--muted)}
.spot cite b{color:var(--ink)}
.spot .clef{position:absolute;top:var(--s4);right:var(--s5);font-family:var(--d);font-size:3rem;color:var(--gold);opacity:.3}
.mini{display:grid;gap:var(--s3);margin-top:var(--s3)}
.mq2{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--s5);font-size:var(--t-small);color:var(--muted)}
.mq2 b{display:block;color:var(--ink);margin-top:var(--s2);font-family:var(--d);font-size:var(--t-small)}
@media(min-width:768px){.mini{grid-template-columns:1fr 1fr}}

/* job prefs — concert rider */
.rider{background:#0C0A10;border:1px solid var(--gold);border-radius:var(--r-m);margin-top:var(--s6);overflow:hidden;box-shadow:var(--shadow-2)}
.rider-head{text-align:center;padding:var(--s5);border-bottom:1px solid var(--line)}
.rider-head h3{font-family:var(--d);font-style:italic;font-size:1.35rem;color:var(--gold)}
.rider-head span{font-family:var(--m);font-size:var(--t-micro);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.rrow{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s5);font-size:var(--t-small);border-bottom:1px dashed var(--line);flex-wrap:wrap}
.rrow:last-child{border:none}
.rrow span{color:var(--muted);font-family:var(--m);font-size:var(--t-caption);text-transform:uppercase;letter-spacing:.08em;align-self:center}
.rrow b{text-align:right;overflow-wrap:anywhere}
.rrow .yes{color:var(--teal)}
.refs{display:grid;gap:var(--s3);margin-top:var(--s4)}
.ref{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-s);padding:var(--s4);font-size:var(--t-small)}
.ref b{font-family:var(--d)}
.ref span{display:block;color:var(--muted);font-size:var(--t-caption)}
@media(min-width:768px){.refs{grid-template-columns:1fr 1fr}}

.fin{text-align:center}
.fin p{color:var(--muted);margin-top:var(--s3)}
.fin .cta-row{justify-content:center;margin-top:var(--s6)}
.fin .fine{font-family:var(--d);font-style:italic;color:var(--gold);font-size:var(--t-small);margin-top:var(--s6);letter-spacing:.1em}
footer{border-top:1px solid var(--line);padding:var(--s5);text-align:center;font-size:var(--t-caption);color:var(--muted)}
footer a{color:var(--gold);font-weight:650}
.stick{position:fixed;inset-inline:0;bottom:0;z-index:40;background:rgba(18,16,22,.92);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));display:flex;gap:var(--s3);transform:translateY(110%);transition:transform .4s var(--ease)}
.stick.show{transform:none}
.stick .btn{flex:1}
@media(min-width:768px){.stick{display:none}}