/* Raga & Rhythm offer page.
   Idea: Ajrakh block-print palette (indigo night, madder red, temple gold) and the jharokha,
   the cusped Mughal window. Every Kontakt interface is the view through one window.
   Geometry: centred axis, 8px spacing scale, one arch drawing (#crown) reused everywhere. */
:root{
  --night:#0b1226; --indigo:#141d42; --indigo2:#1b2654;
  --madder:#7a241c; --madder-dk:#4a140f;
  --gold:#c89820; --gold2:#e2c27a; --ivory:#f2e8d5; --ivory2:rgba(242,232,213,.74); --ivory3:rgba(242,232,213,.5);
  --green:#75C249; --green-ink:#0e1a07;
  --serif:"Cormorant Garamond",Georgia,serif; --sans:"DM Sans",system-ui,sans-serif;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px;
  --jaali:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23c89820' stroke-width='1'%3E%3Cpath d='M32 8l7 17 17 7-17 7-7 17-7-17-17-7 17-7z'/%3E%3Crect x='20' y='20' width='24' height='24' transform='rotate(45 32 32)'/%3E%3Ccircle cx='32' cy='32' r='3'/%3E%3C/g%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--night);color:var(--ivory);font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--gold2);text-underline-offset:3px}
img{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.08;margin:0}
p{margin:0}
:focus-visible{outline:3px solid var(--gold2);outline-offset:3px;border-radius:4px}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--s3)}
.center{text-align:center}

/* Section rhythm: every section has the same centred head */
section{padding:var(--s6) 0}
.title{font-size:clamp(2.1rem,4.6vw,3.2rem);color:var(--gold2);text-align:center}
.title::after{content:"";display:block;width:96px;height:12px;margin:var(--s2) auto 0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='12' viewBox='0 0 96 12'%3E%3Cpath d='M0 6H38M58 6H96' stroke='%23c89820'/%3E%3Cpath d='M48 0l6 6-6 6-6-6z' fill='%23e2c27a'/%3E%3Ccircle cx='40' cy='6' r='1.5' fill='%23c89820'/%3E%3Ccircle cx='56' cy='6' r='1.5' fill='%23c89820'/%3E%3C/svg%3E") center/contain no-repeat}
.kicker{max-width:40em;margin:var(--s3) auto 0;text-align:center;font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.6rem);font-weight:600;color:var(--ivory);line-height:1.3}
.kicker+.intro{margin-top:var(--s2)}
.intro{max-width:46em;margin:var(--s3) auto var(--s5);text-align:center;color:var(--ivory2);font-size:1.08rem}

/* ---------- The window (jharokha) ---------- */
.arch{container-type:inline-size;position:relative;display:flex;flex-direction:column}
.crown{position:relative;line-height:0}
.crown svg{width:100%;height:auto;display:block;overflow:visible;filter:drop-shadow(0 -2px 0 rgba(0,0,0,.25))}
.crown h3,.crown h2{position:absolute;left:14%;right:14%;bottom:8%;text-align:center;color:var(--ivory);font-weight:700;line-height:1.05;font-size:clamp(1rem,7.2cqi,2.2rem);text-wrap:balance}
.window{position:relative;display:block;margin-top:-1px;background:#0d1117;
  border:solid var(--madder);border-width:0 9px;
  box-shadow:inset 0 0 0 1px var(--gold),0 0 0 1px var(--gold)}
.window img{width:100%;height:100%;object-fit:contain;padding:10px;transition:transform .6s ease}
.window::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,9,15,.55),transparent 18%,transparent 85%,rgba(7,9,15,.35))}
.window:hover img{transform:scale(1.025)}
@media (prefers-reduced-motion:reduce){.window img{transition:none}.window:hover img{transform:none}}
.sill{height:12px;margin:0 -10px;background:linear-gradient(180deg,var(--gold2),var(--gold) 40%,#7d5f12);border-radius:2px;box-shadow:0 10px 24px -10px rgba(0,0,0,.9)}
.cap{margin-top:var(--s2);text-align:center;color:var(--ivory2);font-size:.95rem;padding:0 var(--s1)}

/* Narrow windows (phones, 2 per row): name moves under the window so it never crosses the arch */
.nm{display:none;margin-top:var(--s2);text-align:center;font-family:var(--serif);font-weight:700;font-size:1.15rem;line-height:1.15;color:var(--ivory)}
@container (max-width:250px){
  .crown h3{display:none}
  .nm{display:block}
  .arch .cap{margin-top:6px}
}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:radial-gradient(90% 70% at 50% 0%,var(--indigo2),var(--night) 72%);border-bottom:1px solid rgba(200,152,32,.35)}
.hero::before{content:"";position:absolute;inset:0;background:var(--jaali);opacity:.06;pointer-events:none}
.hero-in{position:relative;max-width:1200px;margin:0 auto;padding:var(--s5) var(--s3) var(--s6);text-align:center}
.from{color:var(--gold2);font-size:.95rem;letter-spacing:.03em}
h1{font-size:clamp(3.4rem,10vw,7.4rem);font-weight:700;letter-spacing:-.01em;margin-top:var(--s2)}
.sub{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2.1rem);color:var(--gold2);margin-top:var(--s1)}
.lead{max-width:38em;margin:var(--s3) auto var(--s5);font-size:1.12rem;color:var(--ivory2)}

.door{max-width:640px;margin:0 auto;text-align:left;container-type:inline-size}
.door .crown h2{font-size:clamp(1.5rem,7cqi,2.4rem)}
.redeem{position:relative;margin-top:-1px;padding:var(--s4) var(--s4) var(--s4);
  background:linear-gradient(180deg,#140c12,var(--indigo) 30%,var(--night));
  border:solid var(--madder);border-width:0 12px;box-shadow:inset 0 0 0 1px var(--gold),0 0 0 1px var(--gold)}
.door .sill{margin:0 -12px;height:14px}
.redeem label{display:block;font-weight:500;margin:var(--s2) 0 var(--s1);font-size:.95rem}
.redeem>label:first-of-type{margin-top:0}
.redeem input:not([type=checkbox]){width:100%;padding:13px 14px;border-radius:8px;border:1px solid rgba(242,232,213,.26);background:rgba(7,9,15,.7);color:var(--ivory);font:inherit}
.redeem input:not([type=checkbox]):focus{border-color:var(--gold2);outline:none;box-shadow:0 0 0 3px rgba(226,194,122,.25)}
#f-code{font-size:1.25rem;letter-spacing:.14em;text-align:center;font-family:ui-monospace,Menlo,monospace}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s2)}
.redeem .check{display:grid;grid-template-columns:20px 1fr;gap:var(--s1);font-weight:400;color:var(--ivory2);font-size:.92rem;line-height:1.5;margin:var(--s2) 0 0}
.check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--green)}
.check strong{color:var(--ivory)}
.hp{position:absolute;left:-9999px}
.go{display:block;width:100%;margin-top:var(--s3);padding:16px;border:0;border-radius:10px;background:var(--green);color:var(--green-ink);font:700 1.1rem var(--sans);cursor:pointer;text-align:center;text-decoration:none}
.go:hover{background:#86d35a}
.go.inline{display:inline-block;width:auto;padding:14px 32px}
.help{margin-top:var(--s2);font-size:.86rem;color:var(--ivory3);text-align:center}

/* ---------- Premiere: two equal windows ---------- */
.premiere{background:linear-gradient(180deg,var(--night),#170d0f 55%,var(--night))}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,460px));justify-content:center;gap:var(--s5)}
.pair .window{aspect-ratio:1412/1634}
.pair .cap{font-size:1.05rem;color:var(--ivory)}
/* Quiet plates: thin gold hairline with an offset inner line, no colour fill */
.plate{margin:0}
.plate a{display:block;padding:12px;border:1px solid rgba(200,152,32,.55);outline:1px solid rgba(200,152,32,.18);outline-offset:6px;background:#0d1117}
.plate img{width:100%;aspect-ratio:1412/1634;object-fit:contain}
.plate figcaption{margin-top:var(--s3);text-align:center;display:flex;flex-direction:column;gap:4px}
.plate strong{font-family:var(--serif);font-size:1.6rem;font-weight:600;color:var(--ivory)}
.plate span{color:var(--ivory2);font-size:.98rem}

/* ---------- Gallery: identical windows, rows of 4, last row centred ---------- */
.collection{background:var(--indigo)}
.gallery{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s5) var(--s4)}
.gallery .arch{flex:0 0 calc((100% - 3 * var(--s4)) / 4)}
.gallery .window{aspect-ratio:1/1}
.gallery .window img{padding:6px}

/* ---------- Demos: one player, tabs above ---------- */
.demos{background:linear-gradient(180deg,var(--night),#120a0c)}
.player{max-width:900px;margin:0 auto}
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s1);margin-bottom:var(--s3)}
.tab{padding:8px 16px;border:1px solid rgba(200,152,32,.55);border-radius:99px;color:var(--ivory2);text-decoration:none;font-size:.9rem;line-height:1.3}
.tab:hover{color:var(--ivory);border-color:var(--gold2)}
.tab[aria-selected=true]{background:var(--gold);border-color:var(--gold);color:#1a1205;font-weight:500}
#sc{width:100%;height:420px;border:1px solid rgba(200,152,32,.45);border-radius:12px;background:#fff}

/* ---------- Watch: one screen, a reel of clips beside it ---------- */
.watch{background:var(--indigo)}
.theatre{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s3);align-items:stretch}
.screen{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--gold);border-radius:12px;overflow:hidden;box-shadow:0 0 0 8px var(--madder),0 0 0 9px var(--gold),0 30px 60px -30px #000}
.screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.poster{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer}
.poster img{width:100%;height:100%;object-fit:cover;opacity:.85}
.play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:rgba(122,36,28,.92);box-shadow:0 0 0 2px var(--gold)}
.play::after{content:"";position:absolute;left:34px;top:26px;border-left:24px solid var(--ivory);border-top:16px solid transparent;border-bottom:16px solid transparent}
.poster:hover .play{background:var(--madder)}
.reel{contain:size;overflow:auto;padding:var(--s2);background:rgba(7,9,15,.55);border:1px solid rgba(200,152,32,.45);border-radius:12px;scrollbar-color:var(--gold) transparent}
.reel-h{font-family:var(--serif);font-weight:600;font-size:1.05rem;color:var(--gold2);margin:var(--s2) 0 var(--s1)}
.reel-h:first-child{margin-top:0}
.clip{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:center;padding:6px;border-radius:8px;color:var(--ivory2);text-decoration:none;font-size:.82rem;line-height:1.35}
.clip img{width:96px;height:54px;object-fit:cover;border-radius:4px}
.clip:hover{background:rgba(200,152,32,.12);color:var(--ivory)}
.clip[aria-current=true]{background:rgba(200,152,32,.22);color:var(--ivory)}

/* ---------- What producers say ---------- */
.voices{background:linear-gradient(180deg,var(--night),#120a0c)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.quote{margin:0;padding:var(--s3);border:1px solid rgba(200,152,32,.35);border-top:3px solid var(--gold);border-radius:4px 4px 12px 12px;background:rgba(20,29,66,.5);display:flex;flex-direction:column;justify-content:space-between;text-align:center}
.quote blockquote{margin:0 0 var(--s2);font-family:var(--serif);font-size:1.35rem;line-height:1.3;color:var(--ivory)}
.quote blockquote::before{content:"\201C"}
.quote blockquote::after{content:"\201D"}
.quote figcaption{display:flex;flex-direction:column;gap:2px;font-size:.84rem;color:var(--ivory3)}
.quote strong{color:var(--gold2);font-size:.98rem;font-weight:500}
.quote .credits{font-style:italic}

/* ---------- Everything inside: one big scroll box ---------- */
.inside{background:var(--indigo)}
.patches{max-width:1040px;height:560px;margin:0 auto;overflow:auto;padding:var(--s4);
  background:rgba(7,9,15,.55);border:1px solid rgba(200,152,32,.45);border-radius:14px;
  scrollbar-color:var(--gold) transparent;box-shadow:inset 0 -40px 40px -30px rgba(7,9,15,.9)}
.cols{columns:3 240px;column-gap:var(--s4);column-rule:1px solid rgba(200,152,32,.18)}
.pl{break-inside:avoid;margin:0 0 var(--s3);padding:0}
.pl h3{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s1);font-size:1.2rem;color:var(--gold2);border-bottom:1px solid rgba(200,152,32,.35);padding-bottom:4px;margin-bottom:6px}
.pl h3 em{font-family:var(--sans);font-style:normal;font-size:.62rem;font-weight:500;background:var(--gold);color:#1a1205;padding:1px 6px;border-radius:99px;margin-right:auto}
.pl h3 span{font-family:var(--sans);font-size:.72rem;font-weight:400;color:var(--ivory3)}
.pl h4{font-family:var(--sans);font-weight:500;font-size:.72rem;color:var(--gold2);margin:8px 0 2px;opacity:.85}
.pl ul{list-style:none;margin:0;padding:0}
.pl li{font-size:.74rem;line-height:1.55;color:var(--ivory2)}

/* ---------- Coming free: glimpses through a lens ---------- */
.next{background:linear-gradient(180deg,var(--night),#120a0a)}
.glimpses{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.glimpse{margin:0}
.lens{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:120px 120px 8px 8px / 60px 60px 8px 8px;border:1px solid var(--gold);background:#0d1117}
.lens img{width:100%;height:100%;object-fit:cover;filter:saturate(.95);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 45%,#000 55%,transparent 100%);mask-image:radial-gradient(120% 100% at 50% 45%,#000 55%,transparent 100%)}
.glimpse figcaption{margin-top:var(--s2);text-align:center;font-family:var(--serif);font-size:1.25rem;font-weight:600;color:var(--ivory)}
.fine{max-width:46em;margin:var(--s5) auto 0;text-align:center;font-size:.9rem;color:var(--ivory3)}

/* ---------- Before you download ---------- */
.before{background:var(--indigo)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin:var(--s5) 0}
.facts div{border-top:1px solid var(--gold);padding-top:var(--s2);text-align:center}
.facts dt{font-family:var(--serif);font-size:1.4rem;font-weight:600;color:var(--gold2)}
.facts dd{margin:var(--s1) 0 0;color:var(--ivory2);font-size:.98rem}
.foot{padding:var(--s4) 0;color:var(--ivory3);font-size:.86rem;text-align:center;border-top:1px solid rgba(200,152,32,.3)}

/* ---------- Widget page (patches.php) ---------- */
body.widget{background:var(--night);padding:var(--s3)}
.widget-head{text-align:center;margin-bottom:var(--s3)}
.widget-head h2{font-size:1.8rem;color:var(--gold2)}
.widget-head p{color:var(--ivory2);font-size:.9rem;margin-top:4px}
body.widget .patches{height:calc(100vh - 150px);min-height:360px}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .gallery .arch{flex-basis:calc((100% - 2 * var(--s4)) / 3)}
}
@media (max-width:980px){
  .theatre{grid-template-columns:1fr}
  .reel{contain:none;max-height:360px}
  .quotes{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  section{padding:var(--s5) 0}
  .gallery{gap:var(--s4) var(--s3)}
  .gallery .arch{flex-basis:calc((100% - var(--s3)) / 2)}
  .pair{gap:var(--s4)}
  .glimpses{grid-template-columns:1fr 1fr;gap:var(--s3)}
  .facts{grid-template-columns:1fr;gap:var(--s3)}
  #sc{height:380px}
}
@media (max-width:560px){
  body{font-size:16px}
  .wrap,.hero-in{padding-left:var(--s2);padding-right:var(--s2)}
  .hero-in{padding-top:var(--s4);padding-bottom:var(--s5)}
  .redeem{padding:var(--s3) var(--s2);border-width:0 7px}
  .door .sill{margin:0 -7px}
  .two{grid-template-columns:1fr}
  .pair{grid-template-columns:minmax(0,420px)}
  .gallery{gap:var(--s4) var(--s2)}
  .gallery .arch{flex-basis:calc((100% - var(--s2)) / 2)}
  .gallery .cap{font-size:.82rem}
  .glimpses{grid-template-columns:1fr}
  .patches{height:480px;padding:var(--s3) var(--s2)}
  .quotes{grid-template-columns:1fr}
  .screen{box-shadow:0 0 0 5px var(--madder),0 0 0 6px var(--gold)}
  .cols{columns:1}
  .intro{margin-bottom:var(--s4)}
}

/* Widget extras */
body.widget .theatre{max-width:1100px;margin:0 auto}
body.widget .player{max-width:900px}
.widget-foot{text-align:center;margin-top:var(--s2);font-size:.78rem}
.widget-foot a{color:var(--ivory3);text-decoration:none}