/* ============ RIYAAZ · dance · stage lights, teentaal grid, chakkar ============
   v2 foundation: 4pt scale · 52px btn · SVG icons · esc() · focus rings ·
   paused marquees · reduced-motion safe · 768px discipline · 2 webfonts
   ============================================================================ */
:root{
  --surface:#160F14; --surface-2:#201620; --panel:#2A1D29; --ink:#F5EDF1; --muted:#B39CAB;
  --rose:#E4577B; --rose-ink:#2B060F; --gold:#DFAF5E; --teal:#6EC9BC; --lilac:#B48BE0;
  --line:#3B2A38; --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,9.5vw,5.4rem); --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 34px 68px -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(--rose);color:#fff;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-rose{background:linear-gradient(110deg,var(--rose),#F07A9A);color:#fff;box-shadow:0 0 36px -10px rgba(228,87,123,.6)}
.btn-gold{background:var(--gold);color:#2E1F04}
.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(--teal);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(--rose)}
.lead{color:var(--muted);max-width:56ch;margin-top:var(--s3)}
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--rose),var(--gold));z-index:60}

/* ---------- HERO — the stage ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;position:relative;overflow:hidden;background:var(--surface)}
/* two sweeping spotlights */
.spot-l,.spot-r{position:absolute;top:-18%;width:60vw;height:130%;pointer-events:none;opacity:.5;filter:blur(24px)}
.spot-l{left:-12%;background:conic-gradient(from 165deg at 50% 0%,transparent 0deg,rgba(228,87,123,.4) 8deg,transparent 22deg);transform-origin:top center;animation:sweepL 11s ease-in-out infinite alternate}
.spot-r{right:-12%;background:conic-gradient(from 178deg at 50% 0%,transparent 0deg,rgba(223,175,94,.35) 8deg,transparent 22deg);transform-origin:top center;animation:sweepR 13s ease-in-out infinite alternate}
@keyframes sweepL{from{transform:rotate(-7deg)}to{transform:rotate(9deg)}}
@keyframes sweepR{from{transform:rotate(8deg)}to{transform:rotate(-8deg)}}
/* stage floor glow */
.floor{position:absolute;inset-inline:0;bottom:0;height:26%;background:linear-gradient(0deg,rgba(228,87,123,.12),transparent);pointer-events:none}
.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(--s7)}
.stamp{font-family:var(--m);font-size:var(--t-caption);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:var(--s5)}
.hero h1{font-size:var(--t-display);max-width:13ch}
.hero h1 em{font-style:italic;font-weight:400;background:linear-gradient(100deg,var(--rose),var(--gold) 70%);-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(--rose)}
/* chakkar — spinning skirt motif, decorative */
.chakkar{display:none;position:absolute;right:6%;top:50%;transform:translateY(-50%);width:min(260px,26vw);aspect-ratio:1;z-index:2;opacity:.9}
.chakkar svg{width:100%;height:100%;animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(min-width:900px){.chakkar{display:block}}
/* ghungroo pulse row — beats visualised */
.ghungroo{position:relative;z-index:3;display:flex;gap:var(--s3);padding:0 var(--s4) var(--s6);max-width:940px;margin:0 auto;width:100%;align-items:center}
.ghungroo .lbl{font-family:var(--m);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);flex-shrink:0}
.ghungroo i{width:10px;height:10px;border-radius:50%;background:var(--gold);opacity:.25;animation:bell 1.92s linear infinite}
.ghungroo i:nth-child(odd){background:var(--rose)}
@keyframes bell{0%,100%{opacity:.25;transform:scale(1)}6%{opacity:1;transform:scale(1.5)}18%{opacity:.25;transform:scale(1)}}

/* bol marquee */
.band{background:#0F0A0E;border-block:1px solid var(--line);overflow:hidden;padding-block:var(--s3)}
.band-track{display:flex;gap:var(--s7);width:max-content;animation:mq 24s linear infinite;font-family:var(--m);font-size:var(--t-small);color:var(--muted)}
.band-track.paused{animation-play-state:paused}
.band b{color:var(--gold)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- STATS — teentaal 16-beat grid ---------- */
.taal{margin-top:var(--s6);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--s5);box-shadow:var(--shadow-1)}
.taal-head{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;font-family:var(--m);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s4)}
.taal-head b{color:var(--gold)}
.beats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);margin-bottom:var(--s5)}
.beat{aspect-ratio:1;border:1px solid var(--line);border-radius:var(--r-s);display:grid;place-items:center;font-family:var(--m);font-size:var(--t-caption);color:var(--muted);transition:.2s}
.beat.sam{border-color:var(--rose);color:var(--rose);font-weight:700}
.beat.on{background:var(--panel);color:var(--gold);border-color:var(--gold)}
.tempi{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
.tempo{border-top:2px solid var(--line);padding-top:var(--s3)}
.tempo b{font-family:var(--d);font-size:clamp(1.6rem,4.5vw,2.1rem);display:block;color:var(--rose)}
.tempo:nth-child(2) b{color:var(--gold)}
.tempo:nth-child(3) b{color:var(--teal)}
.tempo:nth-child(4) b{color:var(--lilac)}
.tempo span{font-size:var(--t-caption);color:var(--muted)}
@media(min-width:768px){.beats{grid-template-columns:repeat(16,1fr)}.tempi{grid-template-columns:repeat(4,1fr)}}

/* subjects — repertoire cards */
.rep{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s6)}
.piece{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--s4);position:relative;overflow:hidden;transition:transform .3s var(--ease),border-color .3s var(--ease)}
.piece::after{content:"";position:absolute;bottom:-30px;right:-30px;width:90px;height:90px;border:1.5px dashed var(--line);border-radius:50%;transition:.4s var(--ease)}
.piece:hover{transform:translateY(-4px);border-color:var(--rose)}
.piece:hover::after{transform:rotate(120deg);border-color:var(--rose)}
.piece b{font-family:var(--d);font-size:var(--t-body);display:block;margin-bottom:var(--s1)}
.piece span{font-size:var(--t-caption);color:var(--muted)}
@media(min-width:768px){.rep{grid-template-columns:repeat(3,1fr)}}

/* timeline — acts */
.acts{margin-top:var(--s7)}
.act{display:grid;grid-template-columns:70px 1fr;gap:var(--s4);padding-bottom:var(--s7);position:relative}
.act:not(:last-child)::before{content:"";position:absolute;left:34px;top:78px;bottom:8px;width:1.5px;background:linear-gradient(var(--rose),transparent)}
.act .curtain{width:70px;height:70px;border-radius:var(--r-s) var(--r-s) 50% 50%;background:linear-gradient(180deg,var(--rose),#8E2A47);display:grid;place-items:center;font-family:var(--d);font-style:italic;font-size:1.1rem;color:#FFE3EB;box-shadow:var(--shadow-1)}
.act .tempo-name{font-family:var(--d);font-style:italic;color:var(--gold);font-size:var(--t-body)}
.act .yr{font-family:var(--m);font-size:var(--t-micro);color:var(--muted);letter-spacing:.12em;display:block;margin-top:var(--s1)}
.act h3{font-size:var(--t-h3);margin-block:var(--s2) var(--s1)}
.act .org{font-size:var(--t-small);color:var(--teal);font-weight:650;margin-bottom:var(--s2)}
.act p{color:var(--muted);font-size:var(--t-small);max-width:56ch}

/* awards — curtain calls */
.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(--lilac);font-weight:700;font-size:var(--t-caption)}

/* testimonials — standing ovation */
.spot-quote{background:linear-gradient(150deg,rgba(228,87,123,.14),rgba(223,175,94,.12));border:1px solid var(--line);border-radius:var(--r-m);padding:clamp(var(--s6),6vw,var(--s8));margin-top:var(--s6);position:relative}
.spot-quote 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-quote cite{display:block;font-style:normal;margin-top:var(--s5);font-size:var(--t-small);color:var(--muted)}
.spot-quote cite b{color:var(--ink)}
.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)}
@media(min-width:768px){.mini{grid-template-columns:1fr 1fr}}

/* job prefs — tour rider */
.rider{background:#0F0A0E;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 .bow{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(--rose);font-weight:650}
.stick{position:fixed;inset-inline:0;bottom:0;z-index:40;background:rgba(22,15,20,.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}}