/* उनतालीस लंकाएँ: the journey. Scroll scenes (frames drawn on a canvas as you scroll), film strips, layers of other
   Lankas in depth, a ring of thirty nine doors. Everything here is scoped to .yj (script on, motion allowed); without
   them every scene is a still picture with its words under it. */
:root{--ink:#06070C;--gold:#F2C35A;--gold2:#FFF1C6;--ember:#FF8A3D;--dut:#FFD43B;--mist:rgba(6,7,12,.72)}
body{background:var(--ink)}
.y-h{position:relative;min-height:92svh;display:grid;align-items:end;overflow:hidden;isolation:isolate;padding-bottom:clamp(40px,8vh,90px)}
.y-h .bg{position:absolute;inset:0;z-index:-2}
.y-h .bg img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:scale(1.08);transform-origin:50% 40%;will-change:transform}
.y-h::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 60% at 50% 35%,transparent 0,rgba(6,7,12,.35) 55%,rgba(6,7,12,.92) 100%),linear-gradient(180deg,rgba(6,7,12,.55),transparent 30%,transparent 55%,var(--ink) 100%)}
.y-h .fx{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.y-h h1{margin:6px 0 0;font:400 clamp(54px,11vw,150px)/1 var(--hf);background:linear-gradient(180deg,#FFF5D6 0%,#F2C35A 55%,#A86C1C 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 30px rgba(0,0,0,.6));padding-bottom:.06em}
.y-h .en{margin:6px 0 0;font:italic 400 clamp(19px,2vw,25px)/1.4 "EB Garamond",Georgia,serif;color:#CFC6B2}
.y-h .lead{max-width:34ch;font-size:clamp(20px,2.1vw,26px);color:#EDE5D3;text-shadow:0 2px 14px rgba(0,0,0,.8)}
.cue{display:inline-flex;align-items:center;gap:12px;margin-top:28px;color:var(--gold2)!important;border:0!important;font-size:17px}
.cue i{display:block;width:22px;height:36px;border:1.5px solid rgba(255,241,198,.6);border-radius:12px;position:relative}
.cue i::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--gold);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
.state{display:inline-flex;align-items:center;gap:8px;margin:16px 0 0;padding:6px 14px;border:1px solid rgba(242,195,90,.35);border-radius:999px;font-size:15px;line-height:1.4;color:#EDE5D3;background:rgba(6,7,12,.72)}
.state::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}

/* a stop on the journey: its name card */
.stop{position:relative;padding:clamp(60px,12vh,140px) 0 clamp(24px,5vh,50px);text-align:center}
.stop .no{display:block;font-size:14px;letter-spacing:.3em;color:var(--acct)}
.stop h2{margin:8px 0 0;font-size:clamp(36px,6vw,72px)}
.stop .when{display:block;margin-top:6px;font:400 clamp(17px,1.6vw,20px)/1.5 var(--bf);color:var(--s)}
.stop .rule{display:block;width:1px;height:60px;margin:22px auto 0;background:linear-gradient(var(--gold),transparent)}

/* a scroll scene */
.jx{position:relative}
.jx-stage{position:relative;overflow:hidden;background:#000}
.jx-poster{display:block;width:100%;height:auto}
.jx-cv,.jx-fx,.jx-dut{display:none}
.jx-caps{padding:18px max(16px,4vw) 6px;display:grid;gap:10px;max-width:900px;margin:0 auto}
.jx-cap p{margin:0;font-size:clamp(20px,2vw,24px);line-height:1.6;color:var(--t)}
.jx-cap .card{font:400 clamp(26px,3.4vw,44px)/1.3 var(--hf);color:var(--gold2);letter-spacing:.02em}
.jx-cap .big{font:400 clamp(30px,4.4vw,58px)/1.25 var(--hf);color:var(--gold2)}
.jx-cap a{color:var(--gold2)}
.yj .jx{height:var(--len,260vh)}
.yj .jx-stage{position:sticky;top:0;height:100svh}
.yj .jx-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;transition:opacity .6s}
.yj .jx.live .jx-poster{opacity:0}
.yj .jx-cv,.yj .jx-fx{display:block;position:absolute;inset:0;width:100%;height:100%}
.yj .jx-fx{pointer-events:none}
.yj .jx-stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.55) 0,transparent 18%,transparent 58%,rgba(0,0,0,.78) 100%)}
.yj .jx-caps{position:absolute;inset:auto 0 0 0;z-index:3;display:block;max-width:none;padding:0 max(16px,6vw) clamp(70px,13vh,130px);pointer-events:none}
.yj .jx-cap{position:absolute;left:max(16px,6vw);right:max(16px,6vw);bottom:clamp(70px,13vh,130px);opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1);text-align:center}
.yj .jx-cap.on{opacity:1;transform:none;pointer-events:auto}
.yj .jx-cap p{max-width:30ch;margin:0 auto;text-shadow:0 2px 18px rgba(0,0,0,.95),0 0 4px rgba(0,0,0,.9);color:#F4EFE4;font-size:clamp(21px,2.3vw,30px)}
.yj .jx-cap .card{max-width:none}
.yj .jx-cap.mid{bottom:auto;top:50%;transform:translateY(-40%)}.yj .jx-cap.mid.on{transform:translateY(-50%)}
/* the place tag a scene carries in its corner */
.yj .jx-tag{position:absolute;z-index:3;left:max(16px,4vw);top:calc(env(safe-area-inset-top) + 72px);font-size:14px;letter-spacing:.18em;color:rgba(255,241,198,.85);text-shadow:0 1px 8px #000}
.jx-tag{display:none}.yj .jx-tag{display:block}

/* दूत: the device's yellow frames on faces */
.yj .jx-dut{display:block;position:absolute;inset:0;z-index:2;pointer-events:none}
.dut-f{position:absolute;width:var(--s);height:var(--s);transform:translate(-50%,-50%) scale(1.4);opacity:0;transition:opacity .35s,transform .45s cubic-bezier(.2,.9,.3,1.3)}
.dut-f.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.dut-f::before,.dut-f::after,.dut-f i::before,.dut-f i::after{content:"";position:absolute;width:28%;height:28%;border:2.5px solid var(--dut)}
.dut-f::before{left:0;top:0;border-right:0;border-bottom:0}.dut-f::after{right:0;top:0;border-left:0;border-bottom:0}
.dut-f i::before{left:0;bottom:0;border-right:0;border-top:0}.dut-f i::after{right:0;bottom:0;border-left:0;border-top:0}
.dut-f b{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap;font:700 clamp(12px,1.2vw,16px)/1 var(--bf);color:var(--dut);text-shadow:0 1px 6px #000}
.dut-n{position:absolute;right:max(16px,4vw);top:calc(env(safe-area-inset-top) + 66px);display:flex;align-items:baseline;gap:8px;padding:8px 14px;border-radius:12px;background:rgba(0,0,0,.55);border:1px solid rgba(255,212,59,.5);color:var(--dut);font:700 15px/1 var(--bf);opacity:0;transition:opacity .4s}
.dut-n b{font:400 34px/1 var(--hf)}
.dut-n.on{opacity:1}

/* film strips: shots that slide across as you scroll */
.sx{position:relative;overflow:hidden;padding:clamp(20px,4vh,40px) 0}
.sx-row{display:flex;gap:clamp(12px,1.6vw,22px);padding-inline:max(16px,6vw);width:max-content;will-change:transform}
.sx figure{position:relative;margin:0;flex:none;width:clamp(240px,34vw,520px)}
.sx figure.tall{width:clamp(180px,20vw,300px)}
.sx img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:10px;box-shadow:0 20px 40px rgba(0,0,0,.5)}
.sx figure.tall img{aspect-ratio:3/4}
.sx figcaption{margin-top:10px;font-size:16px;line-height:1.55;color:var(--s)}
.sx figcaption b{display:block;font:400 21px/1.3 var(--hf);color:var(--h)}
.sx a{color:inherit;border:0}.sx a:hover b,.sx a:focus-visible b{color:var(--gold)}
.sx-note{max-width:760px;margin:0 auto;padding:clamp(18px,3vh,30px) max(16px,4vw) 0;font-size:clamp(19px,1.8vw,22px);line-height:1.75;color:var(--t);text-align:center}
.no-yj .sx-row,html:not(.yj) .sx-row{width:auto;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory}
html:not(.yj) .sx figure{scroll-snap-align:start}

/* a still that drifts closer as you scroll */
.kb{position:relative;overflow:hidden;isolation:isolate}
.kb>img{display:block;width:100%;height:auto}
.yj .kb{height:120svh}
.yj .kb>img{position:sticky;top:0;height:100svh;object-fit:cover;transform:scale(var(--k,1.04));transform-origin:50% 45%;will-change:transform}
.kb .fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:none}
.yj .kb .fx{display:block;position:sticky;top:0;height:100svh;margin-top:-100svh}
.kb .kb-cap{position:relative;padding:16px max(16px,4vw);text-align:center}
.yj .kb .kb-cap{position:absolute;left:0;right:0;bottom:12vh;z-index:2}
.kb .kb-cap p{margin:0 auto;max-width:28ch;font:400 clamp(28px,4vw,52px)/1.3 var(--hf);color:var(--gold2);text-shadow:0 2px 20px #000}
.kb .kb-cap small{display:block;margin-top:10px;font:400 18px/1.6 var(--bf);color:#EDE5D3;text-shadow:0 1px 10px #000}
.rays{position:absolute;inset:0;z-index:1;pointer-events:none;background:conic-gradient(from 200deg at 52% 42%,transparent 0deg,rgba(255,220,150,.16) 8deg,transparent 16deg,rgba(255,220,150,.1) 26deg,transparent 36deg,rgba(255,220,150,.14) 48deg,transparent 60deg);mix-blend-mode:screen;animation:rays 14s linear infinite alternate}
@keyframes rays{to{transform:rotate(6deg) scale(1.05)}}
.yj .kb .rays{position:sticky;top:0;height:100svh;margin-top:-100svh}

/* परतें: the other Lankas, in depth */
.lay{position:relative}
.lay-stage{position:relative;padding:20px max(16px,4vw)}
.lay-p{position:relative;margin:0 0 18px;border-radius:14px;overflow:hidden;background:#000;color:var(--t);display:block;border:1px solid rgba(242,195,90,.25)}
.lay-p img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.lay-p .tx{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;background:linear-gradient(transparent,rgba(0,0,0,.85))}
.lay-p b{display:block;font:400 clamp(24px,2.6vw,34px)/1.2 var(--hf);color:var(--gold2)}
.lay-p small{display:block;margin-top:4px;font-size:16px;line-height:1.5;color:#EDE5D3}
.lay-p i{display:block;margin-top:6px;font-style:normal;font-size:15px;color:var(--gold)}
.yj .lay{height:340vh}
.yj .lay-stage{position:sticky;top:0;height:100svh;padding:0;perspective:1100px;perspective-origin:50% 45%;overflow:hidden}
.yj .lay-p{position:absolute;left:50%;top:54%;width:min(40vw,560px);margin:0;transform-style:preserve-3d;will-change:transform,opacity;box-shadow:0 40px 80px rgba(0,0,0,.6)}
.lay-h{text-align:center;padding:0 max(16px,4vw)}
.yj .lay-h{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top) + 80px);z-index:5}
.lay-h p{margin:0 auto;max-width:34ch;font:400 clamp(22px,2.6vw,32px)/1.4 var(--hf);color:var(--gold2);text-shadow:0 2px 16px #000}

/* कौन कौन: portraits as the दूत sees them */
.cast{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:clamp(12px,1.8vw,22px);margin:0;padding:0;list-style:none}
.pc{position:relative;display:block;border:0!important;color:var(--t);border-radius:14px;overflow:hidden;background:#0C0E15;transform-style:preserve-3d;transition:transform .25s}
.pc img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 18%;filter:saturate(.95) contrast(1.04)}
.pc::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 70% at 50% 30%,transparent 50%,rgba(6,7,12,.55) 100%),linear-gradient(180deg,transparent 55%,rgba(6,7,12,.95) 100%);pointer-events:none}
.pc .fr{position:absolute;left:50%;top:var(--fy,17%);width:28%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:1;opacity:.85;transition:opacity .3s,width .3s}
.pc .fr::before,.pc .fr::after,.pc .fr i::before,.pc .fr i::after{content:"";position:absolute;width:30%;height:30%;border:2px solid var(--dut)}
.pc .fr::before{left:0;top:0;border-right:0;border-bottom:0}.pc .fr::after{right:0;top:0;border-left:0;border-bottom:0}
.pc .fr i::before{left:0;bottom:0;border-right:0;border-top:0}.pc .fr i::after{right:0;bottom:0;border-left:0;border-top:0}
.pc:hover .fr,.pc:focus-visible .fr{opacity:1;width:32%}
.pc .tx{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 16px 16px}
.pc b{display:block;font:400 clamp(22px,2vw,27px)/1.2 var(--hf);color:var(--gold2)}
.pc small{display:block;margin-top:4px;font-size:14.5px;line-height:1.45;color:#D9D2C2}
.pc .role{position:absolute;z-index:2;right:12px;top:12px;padding:3px 10px;border-radius:999px;background:rgba(0,0,0,.55);border:1px solid rgba(255,212,59,.55);color:var(--dut);font-size:13px;font-weight:700}

/* books */
.books{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.6vw,34px);margin:0;padding:0;list-style:none;perspective:1200px}
.bk{display:flex;flex-direction:column;gap:14px;height:100%;color:var(--t);border:0!important}
.bk .bt{font:400 clamp(22px,2.2vw,27px)/1.25 var(--hf);color:var(--h)}.bk .bs{color:var(--s);font-size:16.5px;line-height:1.6}
.cv{position:relative;display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:2/3;padding:9% 9% 8%;border-radius:6px 12px 12px 6px;overflow:hidden;box-shadow:0 26px 50px rgba(0,0,0,.6),inset 6px 0 0 rgba(0,0,0,.35);text-align:center;transform-style:preserve-3d;transition:transform .25s,box-shadow .3s}
a.bk:hover .cv,a.bk:focus-visible .cv{box-shadow:0 34px 60px rgba(0,0,0,.7),0 0 0 1px var(--gold)}
.cv .s1{font-size:clamp(12px,1.1vw,14px);line-height:1.5;color:rgba(255,241,198,.8)}
.cv .t{font:400 clamp(26px,3vw,42px)/1.15 var(--hf);color:#FFF1C6;text-shadow:0 2px 18px rgba(0,0,0,.8)}
.cv .k{font-size:clamp(13px,1.2vw,15px);letter-spacing:.1em;color:#F2C35A}.cv .a{font-size:clamp(13px,1.2vw,15px);color:rgba(255,241,198,.85)}
.cv.cvimg{display:block;padding:0;aspect-ratio:1800/2552;background:#05060A}.cv.cvimg img{display:block;width:100%;height:100%;object-fit:contain}
.cv1{background:radial-gradient(60% 30% at 50% 38%,rgba(242,195,90,.55),transparent 70%),radial-gradient(40% 18% at 30% 44%,rgba(242,195,90,.35),transparent 70%),linear-gradient(180deg,#0B1424 0%,#132238 45%,#2A3140 60%,#C8B48A 61%,#8C7A58 100%)}
.cv2{background:radial-gradient(70% 28% at 50% 46%,rgba(255,120,40,.75),transparent 70%),radial-gradient(30% 10% at 30% 70%,rgba(255,150,60,.5),transparent 70%),radial-gradient(25% 8% at 72% 78%,rgba(255,150,60,.45),transparent 70%),linear-gradient(180deg,#120A0C 0%,#3A1610 45%,#1B1416 56%,#0E1622 100%)}
.cv3{background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(178,34,34,.55) 9px 10.5px,transparent 10.5px 17px),linear-gradient(180deg,rgba(232,220,196,.75),rgba(232,220,196,.25)),linear-gradient(180deg,#E8DCC4 0%,#CDBB98 100%)}
.cv3 .t,.cv3 .s1{color:#3A1C12;text-shadow:none}
.cv3::after{content:"";position:absolute;left:32%;right:32%;bottom:0;height:28%;border-radius:999px 999px 0 0;background:linear-gradient(180deg,#F7C77A,#9CC3D6 60%,#4E7C93)}
.cv3>span:last-child{position:relative;z-index:1}.cv3 .a,.cv3 .k{color:#FFF7E6;text-shadow:0 1px 6px rgba(0,0,0,.45)}

/* उनतालीस दरवाज़े: a ring of doors in 3D */
.ring-w{position:relative;padding:20px 0}
.ring{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:0;padding:0 max(16px,4vw);list-style:none}
.door{display:flex;flex-direction:column;justify-content:flex-end;min-height:120px;padding:14px 12px;border-radius:70px 70px 8px 8px;border:1px solid rgba(242,195,90,.4);background:linear-gradient(180deg,rgba(242,195,90,.18),rgba(12,14,21,.95) 60%);color:var(--t);text-align:center;border-bottom:1px solid rgba(242,195,90,.4)}
.door small{font-size:12px;letter-spacing:.06em;color:var(--acct)}.door b{font:400 17px/1.25 var(--hf);color:var(--gold2)}
.door.in{background:linear-gradient(180deg,rgba(255,170,70,.5),rgba(12,14,21,.95) 65%);border-color:var(--gold)}
a.door:hover,a.door:focus-visible{border-color:var(--gold2);color:var(--t)}
.yj .ring-w{height:300vh}
.yj .ring-st{position:sticky;top:0;height:100svh;perspective:1400px;perspective-origin:50% 40%;overflow:hidden;display:grid;place-items:center}
.yj .ring{position:relative;display:block;width:0;height:0;padding:0;transform-style:preserve-3d;will-change:transform}
.yj .ring li{position:absolute;left:0;top:0;transform-style:preserve-3d}
.yj .door{position:absolute;left:-70px;top:-100px;width:140px;height:200px;min-height:0;backface-visibility:hidden;transition:filter .3s,box-shadow .3s}
.yj .door.front{box-shadow:0 0 40px rgba(242,195,90,.45);filter:brightness(1.2)}
.ring-cap{position:relative;text-align:center;padding:0 max(16px,4vw) 20px}
.yj .ring-cap{position:absolute;left:0;right:0;bottom:8vh;z-index:3}
.ring-cap p{margin:0 auto;max-width:36ch;color:var(--t)}
.ring-cap .now{font:400 clamp(26px,3vw,38px)/1.3 var(--hf);color:var(--gold2);min-height:1.3em}
.ring-hint{font-size:15px;color:var(--s)}

/* the journey map: every stop is a way back in */
.ymap{display:none}
.yj .ymap{display:block;position:fixed;z-index:30;left:14px;top:50%;transform:translateY(-50%);opacity:0;transition:opacity .4s}
.yj .ymap.on{opacity:1}
.ymap ol{margin:0;padding:0;list-style:none;display:grid;gap:4px;position:relative}
.ymap ol::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:rgba(242,195,90,.25)}
.ymap a{position:relative;display:flex;align-items:center;gap:10px;padding:5px 6px 5px 0;border:0;color:rgba(232,226,212,.55);font-size:14px;line-height:1.2}
.ymap a::before{content:"";flex:none;width:11px;height:11px;border-radius:50%;border:1px solid rgba(242,195,90,.6);background:var(--ink);transition:background .3s,box-shadow .3s}
.ymap a span{opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s;white-space:nowrap;padding:3px 8px;border-radius:6px;background:rgba(6,7,12,.8)}
.ymap:hover a span,.ymap a:focus-visible span,.ymap a.on span{opacity:1;transform:none}
.ymap a.on{color:var(--gold2)}.ymap a.on::before{background:var(--gold);box-shadow:0 0 12px var(--gold)}
.ymap a.past::before{background:rgba(242,195,90,.5)}
@media (max-width:760px){
 .yj .ymap{left:0;right:0;top:auto;bottom:0;transform:none;background:linear-gradient(transparent,rgba(6,7,12,.92) 40%);padding:16px 10px max(8px,env(safe-area-inset-bottom))}
 .ymap ol{display:flex;justify-content:space-between;gap:0}.ymap ol::before{left:12px;right:12px;top:50%;bottom:auto;width:auto;height:1px}
 .ymap a{padding:8px 4px}.ymap a span{display:none}
 .books{grid-template-columns:minmax(0,1fr)}.bk{display:grid;grid-template-columns:116px minmax(0,1fr);align-items:start}.bk .cv{padding:10px 8px;justify-content:center;gap:10px}.bk .cv.cvimg{padding:0}.bk .cv .s1,.bk .cv .a{display:none}.bk .cv .t{font-size:17px}
 .yj .lay-p{width:78vw}
 .cast{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pc b{font-size:19px}.pc small{font-size:13px}.pc .role{font-size:12px;right:8px;top:8px}
 .yj .jx-cap{bottom:96px}
 .yj .door{left:-55px;top:-80px;width:110px;height:160px}.door b{font-size:15px}
}
/* two doors */
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.door2{position:relative;display:flex;flex-direction:column;gap:6px;padding:clamp(20px,3vw,32px);border:1px solid var(--line)!important;border-radius:18px;background:var(--card);color:var(--t);overflow:hidden;min-height:220px;isolation:isolate}
.door2 img{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;opacity:.32;transition:opacity .4s,transform .6s}
.door2::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,7,12,.2),rgba(6,7,12,.9))}
a.door2:hover img,a.door2:focus-visible img{opacity:.5;transform:scale(1.04)}
.door2 small{font-size:14px;letter-spacing:.08em;color:var(--gold)}.door2 b{font:400 clamp(28px,3vw,40px)/1.2 var(--hf);color:var(--gold2)}
.door2 span{color:#DCD5C6;font-size:17px;line-height:1.6;max-width:40ch}.door2 i{margin-top:auto;font-style:normal;color:var(--gold)}
@media (max-width:640px){.doors{grid-template-columns:minmax(0,1fr)}}
/* a character's own page */
.ch{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,70px);align-items:center}
.ch .pc{max-width:420px;width:100%}
.ch .pc .tx{display:none}
.ch .alt{display:flex;gap:12px;margin-top:14px}
.ch .alt figure{margin:0;width:110px}.ch .alt img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 15%;border-radius:10px}
.ch .alt figcaption{margin-top:6px;font-size:13.5px;line-height:1.4;color:var(--s)}
.rolechip{display:inline-flex;align-items:center;gap:8px;margin:14px 0 0;padding:6px 14px;border-radius:999px;border:1px solid rgba(255,212,59,.5);color:var(--dut)!important;font-weight:700;font-size:15px}
.rolechip span{font-weight:400;color:#DCD5C6}
@media (max-width:820px){.ch{grid-template-columns:minmax(0,1fr)}.ch .pc{max-width:300px}}
@media (prefers-reduced-motion:reduce){.cue i::after,.rays{animation:none}}

/* झलकियाँ: a featured gallery. The big frame plays a scene on its own; the cards preview theirs under the pointer */
.nf{position:relative;padding-bottom:clamp(30px,6vh,60px)}
.nf-bb{position:relative;height:min(78svh,56vw);min-height:420px;overflow:hidden;background:#000;isolation:isolate}
.nf-po,.nf-cv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nf-cv{display:none}.yj .nf-cv{display:block}
.nf-bb::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(6,7,12,.92) 0%,rgba(6,7,12,.6) 32%,transparent 62%),linear-gradient(180deg,transparent 60%,var(--ink) 100%);pointer-events:none}
.nf-tx{position:absolute;z-index:2;left:max(16px,5vw);bottom:clamp(60px,12%,120px);max-width:min(520px,80vw);transition:opacity .45s}
.nf-tx.fade{opacity:0}
.nf-k{margin:0;font-size:14px;letter-spacing:.14em;color:var(--gold)}.nf-k span{color:#DCD5C6;letter-spacing:.04em}
.nf-t{margin:8px 0 0;font:400 clamp(40px,6vw,82px)/1.05 var(--hf);color:var(--gold2);text-shadow:0 4px 30px rgba(0,0,0,.7)}
.nf-l{margin:14px 0 0;font-size:clamp(18px,1.7vw,22px);line-height:1.6;color:#EDE5D3;text-shadow:0 1px 10px #000}
.nf-b{display:flex;flex-wrap:wrap;gap:10px 12px}.nf-b .cta{margin-top:20px}
.nf-pr{position:absolute;z-index:2;left:max(16px,5vw);right:max(16px,5vw);bottom:28px;height:2px;background:rgba(255,241,198,.15);border-radius:2px;overflow:hidden}
.nf-pr i{display:block;height:100%;width:0;background:var(--gold)}
.nf-pr i.run{animation:nfp var(--dur,9s) linear forwards}
.nf.hold .nf-pr i.run{animation-play-state:paused}
@keyframes nfp{to{width:100%}}
.nf-row{position:relative;z-index:3;display:flex;gap:10px;margin:-40px 0 0;padding:26px max(16px,5vw) 34px;list-style:none;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.nf-row::-webkit-scrollbar{display:none}
.nf-row li{flex:none;width:clamp(180px,17vw,270px);scroll-snap-align:start}
.nf-c{position:relative;display:block;border:0!important;color:var(--t);border-radius:8px;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;transform-origin:50% 60%}
.nf-c img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,.5)}
.nf-ct{display:block;padding:8px 2px 0}.nf-ct b{display:block;font:400 18px/1.25 var(--hf);color:var(--h)}.nf-ct small{display:block;margin-top:2px;font-size:13px;color:var(--s)}
.nf-c::after{content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:16/9;border-radius:8px;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .3s}
.nf-c.on::after{box-shadow:inset 0 0 0 2px var(--gold)}
.nf-c.on .nf-ct b{color:var(--gold)}
@media (hover:hover){.nf-c:hover,.nf-c:focus-visible{transform:scale(1.12);z-index:2}.nf-c:hover img{box-shadow:0 18px 40px rgba(0,0,0,.7)}}
@media (max-width:760px){.nf-bb{height:auto;aspect-ratio:4/5;min-height:0}.nf-bb::after{background:linear-gradient(180deg,transparent 35%,rgba(6,7,12,.85) 75%,var(--ink) 100%)}
 .nf-tx{left:16px;right:16px;bottom:44px}.nf-row li{width:46vw}.nf-pr{bottom:18px}}
.cta.ghost{background:rgba(6,7,12,.35);color:var(--gold2)!important;box-shadow:inset 0 0 0 1.5px var(--gold)}

/* उनतालीस दरवाज़े: the door in front opens its telling in the panel below the ring */
.ring-top{text-align:center;padding:0 max(16px,4vw) 14px}.ring-top h2{margin:0}.ring-top p{margin:6px auto 0;max-width:60ch;color:var(--s);font-size:16.5px;line-height:1.6}
.door small{display:block;font-size:14px;line-height:1.3;color:var(--gold2);font-weight:400;margin-bottom:4px;overflow-wrap:anywhere}
.door i{display:block;margin-top:4px;font-style:normal;font-size:11.5px;color:var(--s)}
.dp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.3fr) minmax(0,1fr);gap:clamp(16px,2.4vw,30px);margin:18px max(16px,4vw) 0;padding:clamp(16px,2vw,24px);
 border:1px solid rgba(242,195,90,.35);border-radius:18px;background:rgba(10,12,18,.96);transition:opacity .25s,transform .25s}
.dp.sw{opacity:.15;transform:translateY(6px)}
.dp-nat{margin:0;font-size:clamp(26px,2.8vw,40px);line-height:1.25;color:var(--gold);font-family:"Noto Serif","Noto Sans",system-ui,var(--dv);overflow-wrap:anywhere}
.dp-n{margin:6px 0 0;font-size:clamp(22px,2vw,28px)}.dp-n a{color:var(--gold2);border:0}
.dp-l{margin:2px 0 0;font:italic 400 16px/1.4 "EB Garamond",Georgia,serif;color:var(--s)}
.dp-s{margin:8px 0 0;font-size:14px;color:var(--dut)}.dp-s:empty{display:none}
.dp-f{margin:12px 0 0;display:grid;gap:6px}.dp-f div{display:grid;grid-template-columns:3.2em minmax(0,1fr);gap:8px}
.dp-f dt{font-size:13.5px;color:var(--acct)}.dp-f dd{margin:0;font-size:15px;line-height:1.5;color:var(--t)}
.dp-k{margin:0 0 6px;font-size:13.5px;letter-spacing:.08em;color:var(--acct)}
.dp-p{margin:0;padding-left:1.1em;display:grid;gap:8px}.dp-p li{font-size:16px;line-height:1.6;color:var(--t)}
.dp-aaj{margin:10px 0 0;font-size:14.5px;line-height:1.55;color:var(--s)}.dp-aaj:empty{display:none}
.dp-map,.ov-map{display:block;width:100%;height:auto;border-radius:10px;background:#0A0D16}
.land{fill:#241E12;stroke:rgba(242,195,90,.5);stroke-width:.8}
.dots circle{fill:rgba(242,195,90,.35)}.dots a{border:0}
.dots circle.on{fill:var(--gold)}
.pin{fill:var(--gold);stroke:#06070C;stroke-width:2}.pin2{fill:none;stroke:var(--gold);stroke-width:2;opacity:.6;animation:pin 2s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pin{from{transform:scale(.4);opacity:.9}to{transform:scale(1.6);opacity:0}}
.dp-line,.ov-line{display:block;width:100%;height:auto;margin-top:8px;overflow:visible}
.axis{stroke:rgba(242,195,90,.4);stroke-width:2}.dp-line line,.ov-line line{stroke:rgba(242,195,90,.4)}
.dp-line text,.ov-line text{fill:var(--s);font-size:16px;text-anchor:middle;font-family:var(--bf)}
.dp-go{display:flex;flex-wrap:wrap;gap:8px 10px;margin:4px 0 0}.dp-go .cta{margin-top:10px;padding:8px 16px;font-size:15px}
.dp-nav{display:none}
.yj .ring-w{height:420vh}
.yj .ring-st{display:block}
.yj .ring-top{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top) + 64px);z-index:3}
.yj .ring{position:absolute;left:50%;top:39%}
.yj .door{left:-62px;top:-88px;width:124px;height:176px;padding:12px 8px}
.yj .dp{position:absolute;z-index:4;left:50%;bottom:62px;overflow:auto;width:min(1180px,calc(100% - 2*max(16px,4vw)));margin:0;transform:translateX(-50%)}
.yj .dp.sw{transform:translateX(-50%) translateY(6px)}
.yj .dp-nav{position:absolute;z-index:5;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:14px}
.dp-nav button{width:40px;height:40px;border-radius:50%;border:1px solid rgba(242,195,90,.5);background:rgba(6,7,12,.7);color:var(--gold2);font-size:24px;line-height:1;cursor:pointer}
.dp-nav button:hover{background:rgba(242,195,90,.18)}.dp-no{min-width:5em;text-align:center;font-size:15px;color:var(--s);font-variant-numeric:tabular-nums}
@media (max-width:980px){.dp{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.dp-c{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:12px;align-items:center}.dp-go{grid-column:1/-1}}
@media (max-width:760px){
 .yj .ring-top p{display:none}.yj .ring{top:30%}.yj .door{left:-48px;top:-68px;width:96px;height:136px;padding:8px 6px}.door small{font-size:12px}.door b{font-size:13.5px}
 .dp{grid-template-columns:minmax(0,1fr);gap:12px}.yj .dp{bottom:58px;max-height:52svh;overflow:auto;-webkit-overflow-scrolling:touch}
 .dp-c{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.dp-f div{grid-template-columns:3em minmax(0,1fr)}
}
/* the Lankas page: an overview, and every telling as a card */
.ov{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;max-width:980px;margin-top:8px}.ov-line{margin-top:0}
.ov-map .dots circle{r:5;cursor:pointer}.ov-line .dots circle{cursor:pointer}
.ov .dots a:hover circle,.ov .dots a:focus-visible circle{fill:var(--gold2)}
.ov .pin,.ov .pin2{display:none}
@media (max-width:760px){.ov{grid-template-columns:minmax(0,1fr)}}
.dks{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:16px}
.dk{scroll-margin-top:80px;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.dk:target{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.dk-nat{margin:0;font-size:26px;line-height:1.3;color:var(--gold);font-family:"Noto Serif","Noto Sans",system-ui,var(--dv);overflow-wrap:anywhere}
.dk h3{margin:4px 0 0;font-size:24px}.dk h3 a{color:var(--gold2);border:0}
.dk-l{margin:2px 0 0;font:italic 400 15.5px/1.4 "EB Garamond",Georgia,serif;color:var(--s)}.dk-g{margin:6px 0 0;font-size:14px;color:var(--dut)}
.dk-c{margin:14px 0;padding:0;list-style:none;display:grid;gap:5px}.dk-c li{font-size:15px;line-height:1.5;color:var(--t)}.dk-c span{display:inline-block;min-width:3.2em;color:var(--acct);font-size:13.5px}
.dk-p{margin:0;padding-left:1.1em;display:grid;gap:7px}.dk-p li{font-size:16px;line-height:1.6}
.dk-a{margin:10px 0 0;font-size:14.5px;line-height:1.55;color:var(--s)}
.dk-s{overflow-wrap:anywhere;margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.7;color:var(--s)}
.yj .ring-w{overflow-x:clip}
.dp-nat:empty{display:none}.dp-cap{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--dut)}
.ov .ov-map{max-width:760px}
.nf-pv{position:absolute;left:0;top:0;width:100%;aspect-ratio:16/9;border-radius:8px;opacity:0;transition:opacity .3s;pointer-events:none}.nf-pv.on{opacity:1}
.cvpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,3vw,28px);margin-top:22px}.cvpair figure{margin:0}.cvpair img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 18px 40px rgba(0,0,0,.55)}.cvpair figcaption{margin-top:8px;font-size:15px;color:var(--s);text-align:center}