/* Natya Shastralaya — temple journey
   Layout: full-screen 3D temple behind a thin gallery frame; chapter copy on the left,
   place caption + walkthrough controls on the right, chapter rail along the bottom. */
:root{
  --ink:#f7f2e8;
  --soft:rgba(250,246,238,.93);
  --mute:rgba(250,246,238,.72);
  --line:rgba(247,242,232,.24);
  --sand:#e9d3ab;
  --sand-ink:#2b2219;
  --deep:#1b2123;
  --glass:rgba(22,27,28,.84);
  --display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --edge:14px;                         /* frame inset */
  --gx:clamp(22px,3.6vw,54px);         /* gutter inside the frame */
  --L:calc(var(--edge) + var(--gx));
  color-scheme:dark;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--deep);color:var(--ink);font-family:var(--sans);font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-kerning:normal;font-variant-numeric:lining-nums;overflow-x:hidden;}
button{font:inherit;color:inherit;}
a{color:inherit;}
:focus-visible{outline:1px solid var(--sand);outline-offset:4px;}

#track{height:560vh;}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;touch-action:pan-y;cursor:grab;
  background:linear-gradient(180deg,#5b6570 0%,#a9afb0 55%,#5f605c 100%);}
#scene.dragging{cursor:grabbing;}
.scrim{position:fixed;inset:0;z-index:1;pointer-events:none;transition:opacity .8s ease;
  background:
    linear-gradient(90deg,rgba(12,15,16,.88) 0%,rgba(12,15,16,.74) 26%,rgba(12,15,16,.38) 46%,rgba(12,15,16,.06) 64%,rgba(12,15,16,0) 76%),
    linear-gradient(0deg,rgba(12,15,16,.78) 0%,rgba(12,15,16,.32) 18%,rgba(12,15,16,0) 34%),
    linear-gradient(180deg,rgba(12,15,16,.6) 0%,rgba(12,15,16,0) 22%);}
.frame{position:fixed;inset:var(--edge);border:1px solid rgba(247,242,232,.22);z-index:2;pointer-events:none;}

/* ---------- loader ---------- */
#loader{position:fixed;inset:0;z-index:60;background:var(--deep);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;transition:opacity 1.1s ease,visibility 0s 1.1s;}
#loader img{width:78px;height:78px;border-radius:50%;background:#fbf7ef;object-fit:cover;}
.ld-name{font-family:var(--display);font-size:30px;font-weight:600;letter-spacing:.02em;}
.ld-line{width:170px;height:1px;background:var(--line);overflow:hidden;}
.ld-line i{display:block;height:100%;width:40%;background:var(--sand);animation:ld 1.4s ease-in-out infinite;}
@keyframes ld{0%{transform:translateX(-100%);}100%{transform:translateX(260%);}}
.ld-sub{font-size:10.5px;letter-spacing:.28em;color:var(--mute);text-transform:uppercase;}
#loader.done{opacity:0;visibility:hidden;}

/* ---------- header ---------- */
.top{position:fixed;z-index:10;top:calc(var(--edge) + env(safe-area-inset-top,0px));left:var(--edge);right:var(--edge);
  display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px var(--gx);}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;min-width:0;}
.mark{width:50px;height:50px;border-radius:50%;overflow:hidden;background:#fbf7ef;flex-shrink:0;border:1px solid rgba(233,211,171,.6);}
.mark img{width:100%;height:100%;object-fit:cover;display:block;}
.brand-t{min-width:0;}
.name{display:block;font-family:var(--display);font-size:28px;font-weight:600;line-height:1.05;letter-spacing:.005em;}
.sub{display:block;margin-top:5px;font-size:10.5px;font-weight:500;letter-spacing:.18em;color:var(--soft);}
.top-r{display:flex;align-items:center;gap:clamp(18px,3vw,40px);}
.tag{font-size:11px;font-weight:500;letter-spacing:.24em;color:var(--mute);white-space:nowrap;}
.join{font-size:14px;font-weight:500;letter-spacing:.01em;text-decoration:none;padding-bottom:8px;border-bottom:1px solid var(--line);white-space:nowrap;transition:border-color .3s,color .3s;}
.join span{margin-left:14px;}
.join:hover{color:var(--sand);border-color:var(--sand);}
.menu-btn{all:unset;cursor:pointer;display:flex;align-items:center;gap:14px;font-size:15px;font-weight:500;}
.menu-btn i{width:24px;height:7px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);}
.menu-btn:focus-visible{outline:1px solid var(--sand);outline-offset:6px;}

/* ---------- chapter copy ---------- */
.copy{position:fixed;z-index:5;left:var(--L);top:clamp(116px,19vh,190px);width:min(540px,44vw);bottom:170px;pointer-events:none;}
.chap{position:absolute;left:0;right:0;top:0;visibility:hidden;transition:visibility 0s .6s;}
.chap.on{visibility:visible;pointer-events:auto;transition-delay:0s;}
.chap > *{opacity:0;transform:translateY(18px);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1);}
.chap.on > *{opacity:1;transform:none;transition-duration:.9s,1.1s;}
.chap.on > :nth-child(2){transition-delay:.08s;} .chap.on > :nth-child(3){transition-delay:.16s;}
.chap.on > :nth-child(4){transition-delay:.24s;} .chap.on > :nth-child(5){transition-delay:.32s;} .chap.on > :nth-child(6){transition-delay:.4s;}
body.explore .copy,body.explore .hint,body.explore .place{opacity:0;pointer-events:none;}
body.explore .scrim{opacity:.2;}
/* keep every line readable over bright sky and stone */
.copy,.top,.place,.controls,.counter,.bar,.foot,.hint{text-shadow:0 1px 2px rgba(0,0,0,.55),0 2px 22px rgba(0,0,0,.45);}
.cta,.ghost{text-shadow:none;}
.copy,.hint,.place{transition:opacity .6s ease;}

.eyebrow{display:flex;align-items:center;gap:16px;font-size:12px;font-weight:600;letter-spacing:.26em;color:var(--sand);text-transform:uppercase;}
.eyebrow i{display:block;width:34px;height:1px;background:var(--sand);}
h1,h2,h3{font-family:var(--display);font-weight:500;margin:0;text-wrap:balance;}
h1{margin-top:22px;font-size:clamp(46px,min(5.8vw,10.6vh),92px);line-height:.98;letter-spacing:-.018em;}
h2{margin-top:20px;font-size:clamp(36px,min(4.4vw,8.6vh),68px);line-height:1;letter-spacing:-.015em;}
h1 em,h2 em{font-style:italic;color:var(--sand);font-weight:500;letter-spacing:-.005em;}
.chap p{margin:20px 0 0;max-width:44ch;font-size:clamp(16px,1.25vw,18.5px);line-height:1.72;letter-spacing:.003em;color:rgba(250,246,238,.95);}
.motto{margin-top:22px;font-family:var(--display);font-size:24px;font-weight:500;letter-spacing:.06em;color:var(--ink);}
.motto span{color:var(--sand);padding:0 .3em;}
.cta{all:unset;box-sizing:border-box;cursor:pointer;margin-top:30px;display:inline-flex;align-items:center;justify-content:space-between;gap:34px;
  min-width:212px;padding:21px 22px;background:var(--sand);color:var(--sand-ink);font-size:15px;font-weight:600;letter-spacing:.01em;text-decoration:none;transition:background .3s;}
.cta:hover{background:#f3e2c2;}
.cta:focus-visible{outline:1px solid var(--sand);outline-offset:4px;}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px;margin-top:24px;}
.duo > div{border-left:1px solid var(--sand);padding-left:16px;min-width:0;}
.duo small,.kv small,.dr-foot small,.menu-side small,.drawer article small{display:block;font-size:10.5px;letter-spacing:.2em;color:var(--sand);text-transform:uppercase;}
.duo strong{display:block;margin-top:6px;font-family:var(--display);font-size:24px;font-weight:600;line-height:1.1;}
.duo span{display:block;margin-top:4px;font-size:13.5px;color:var(--soft);}
.creds{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:8px;max-width:48ch;}
.creds li{font-size:14.5px;line-height:1.6;color:rgba(250,246,238,.93);}
.creds b{color:var(--sand);font-weight:600;letter-spacing:.02em;}
.creds span{color:var(--mute);padding:0 .4em;}

.levels{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;margin-top:24px;max-width:500px;}
.levels button{all:unset;cursor:pointer;display:flex;align-items:baseline;gap:12px;padding:14px 0 12px;border-bottom:1px solid var(--line);
  font-family:var(--display);font-size:clamp(22px,2vw,27px);font-weight:500;transition:color .3s,border-color .3s;}
.levels button span{font-family:var(--sans);font-size:11px;color:var(--sand);}
.levels button i{margin-left:auto;font-style:normal;font-family:var(--sans);font-size:14px;color:var(--mute);transition:transform .3s,color .3s;}
.levels button:hover{color:var(--sand);border-color:var(--sand);}
.levels button:hover i{transform:translate(2px,-2px);color:var(--sand);}
.levels button:focus-visible{outline:1px solid var(--sand);outline-offset:3px;}
.textlink{all:unset;cursor:pointer;margin-top:20px;display:inline-block;font-size:13.5px;color:var(--sand);padding-bottom:5px;border-bottom:1px solid rgba(233,211,171,.5);}
.textlink:focus-visible{outline:1px solid var(--sand);outline-offset:4px;}

.kv{margin-top:22px;}
.kv p{margin-top:8px !important;color:var(--ink) !important;}
blockquote{margin:22px 0 0;padding:2px 0 2px 18px;border-left:1px solid var(--sand);font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(20px,1.9vw,26px);line-height:1.3;max-width:26ch;}
.tri{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:520px;}
.tri li{font-size:13.5px;line-height:1.5;color:var(--soft);border-top:1px solid var(--line);padding-top:10px;}
.tri b{display:block;font-family:var(--display);font-size:21px;font-weight:600;color:var(--ink);margin-bottom:2px;}

.info{margin:22px 0 0;display:grid;gap:12px;max-width:470px;}
.info div{display:grid;grid-template-columns:86px 1fr;gap:14px;align-items:baseline;}
.info dt{font-size:10.5px;letter-spacing:.2em;color:var(--sand);text-transform:uppercase;}
.info dd{margin:0;font-size:15px;line-height:1.55;color:var(--soft);}
.info a{text-decoration:none;border-bottom:1px solid var(--line);color:var(--ink);}
.info a:hover{border-color:var(--sand);}
.ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.ctas .cta{min-width:0;}
.ghost{margin-top:30px;padding:20px 22px;border:1px solid var(--line);text-decoration:none;font-size:15px;display:inline-flex;gap:26px;transition:border-color .3s,color .3s;}
.ghost:hover{border-color:var(--sand);color:var(--sand);}

/* ---------- right side + bottom rail ---------- */
.hint{position:fixed;z-index:5;left:var(--L);bottom:128px;display:flex;align-items:center;gap:12px;font-size:13.5px;font-weight:500;color:var(--soft);}
.hint em{font-style:normal;color:var(--mute);}
.mouse{width:13px;height:21px;border:1px solid var(--soft);border-radius:7px;position:relative;}
.mouse::after{content:'';position:absolute;left:50%;top:4px;width:1px;height:5px;margin-left:-.5px;background:var(--ink);animation:wheel 1.8s ease-in-out infinite;}
@keyframes wheel{0%{opacity:0;transform:translateY(-2px);}40%{opacity:1;}100%{opacity:0;transform:translateY(6px);}}

.place{position:fixed;z-index:5;right:var(--L);bottom:236px;text-align:right;}
.place em{display:block;font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(26px,2.4vw,34px);line-height:1;transition:opacity .4s,transform .5s;}
.place em.swap{opacity:0;transform:translateY(8px);}
.place small{display:block;margin-top:8px;font-size:11.5px;letter-spacing:.2em;color:var(--soft);}
.controls{position:fixed;z-index:6;right:var(--L);bottom:168px;display:flex;gap:28px;}
.controls button{all:unset;cursor:pointer;display:flex;align-items:center;gap:12px;font-size:15px;transition:color .3s;}
.controls button:hover{color:var(--sand);}
.controls button:focus-visible{outline:1px solid var(--sand);outline-offset:5px;}
.controls svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.3;}
.controls .i-pause{display:none;}
#playBtn[aria-pressed="true"] .i-play{display:none;}
#playBtn[aria-pressed="true"] .i-pause{display:block;}
.counter{position:fixed;z-index:5;right:var(--L);bottom:128px;font-size:11px;letter-spacing:.14em;color:var(--mute);font-variant-numeric:tabular-nums;}
.counter b{font-family:var(--display);font-size:20px;font-weight:600;color:var(--ink);letter-spacing:.02em;}

.bar{position:fixed;z-index:6;left:var(--L);right:var(--L);bottom:62px;display:grid;grid-template-columns:repeat(5,1fr);gap:24px;}
.bar button{all:unset;cursor:pointer;display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:14px;min-width:0;}
.bar .n{font-family:var(--display);font-size:20px;font-weight:500;color:var(--mute);}
.bar .l{font-size:14px;font-weight:500;letter-spacing:.01em;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s;}
.bar i{grid-column:1/-1;height:1px;background:var(--line);margin-top:12px;display:block;}
.bar b{display:block;height:100%;width:calc(var(--f,0) * 100%);background:var(--sand);}
.bar button.on .l{color:var(--ink);}
.bar button.on .n{color:var(--sand);}
.bar button:hover .l{color:var(--ink);}
.bar button:focus-visible{outline:1px solid var(--sand);outline-offset:6px;}
.foot{position:fixed;z-index:5;left:var(--L);right:var(--L);bottom:calc(var(--edge) + 12px);display:flex;justify-content:space-between;gap:20px;font-size:12px;letter-spacing:.03em;color:var(--mute);}

/* ---------- course drawer ---------- */
.drawer{position:fixed;z-index:30;top:var(--edge);right:var(--edge);bottom:var(--edge);width:min(480px,calc(100% - 2 * var(--edge)));
  background:var(--glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--line);
  transform:translateX(calc(100% + 30px));transition:transform .7s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;overflow:auto;padding:30px 34px 34px;}
.drawer.open{transform:none;}
.dr-head{display:flex;justify-content:space-between;align-items:center;gap:16px;}
.dr-close{all:unset;cursor:pointer;font-size:14px;color:var(--soft);}
.dr-close span{font-size:20px;margin-left:6px;vertical-align:-2px;}
.dr-close:hover{color:var(--sand);}
.dr-close:focus-visible{outline:1px solid var(--sand);outline-offset:4px;}
.dr-tabs{display:grid;grid-template-columns:repeat(4,1fr);margin-top:28px;border-bottom:1px solid var(--line);}
.dr-tabs button{all:unset;cursor:pointer;text-align:center;padding:12px 0;font-family:var(--display);font-size:22px;color:var(--mute);border-bottom:1px solid transparent;margin-bottom:-1px;transition:color .3s,border-color .3s;}
.dr-tabs button[aria-selected="true"]{color:var(--sand);border-color:var(--sand);}
.dr-tabs button:focus-visible{outline:1px solid var(--sand);outline-offset:-4px;}
.dr-body{padding-top:26px;flex:1;}
.drawer article{display:none;animation:rise .6s cubic-bezier(.2,.7,.2,1);}
.drawer article.on{display:block;}
@keyframes rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.drawer h3{margin-top:10px;font-size:44px;line-height:1;}
.drawer article p{margin:14px 0 0;font-size:15px;line-height:1.65;color:var(--soft);}
.drawer ul{list-style:none;margin:22px 0 0;padding:0;}
.drawer li{padding:12px 0;border-top:1px solid var(--line);font-size:15px;color:var(--ink);display:flex;gap:14px;align-items:baseline;}
.drawer li::before{content:'';width:6px;height:6px;flex-shrink:0;background:var(--sand);transform:rotate(45deg) translateY(-1px);}
.dr-foot{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.chips span{font-size:12px;padding:7px 11px;border:1px solid var(--line);color:var(--soft);}
.dr-foot p{margin:16px 0 0;font-size:13.5px;color:var(--soft);line-height:1.6;}
.dr-foot a{color:var(--sand);}

/* ---------- menu ---------- */
.menu{position:fixed;inset:0;z-index:40;background:rgba(16,20,21,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  display:flex;align-items:center;padding:100px calc(var(--L) + 10px);animation:fadein .5s ease;}
.menu[hidden]{display:none;}
@keyframes fadein{from{opacity:0;}to{opacity:1;}}
.menu-in{display:grid;grid-template-columns:1.4fr 1fr;gap:60px;width:100%;align-items:end;}
.menu ol{list-style:none;margin:0;padding:0;}
.menu ol a,.menu ol button{all:unset;cursor:pointer;display:flex;align-items:baseline;gap:22px;padding:8px 0;font-family:var(--display);font-size:clamp(34px,5vw,64px);font-weight:500;line-height:1.1;transition:color .3s,transform .4s;}
.menu ol a span,.menu ol button span{font-family:var(--sans);font-size:12px;color:var(--sand);}
.menu ol a:hover,.menu ol a[aria-current="page"],.menu ol button:hover{color:var(--sand);transform:translateX(6px);}
.menu ol a:focus-visible,.menu ol button:focus-visible{outline:1px solid var(--sand);outline-offset:4px;}
.menu-side p{margin:6px 0 20px;font-size:15px;line-height:1.6;color:var(--soft);}
.menu-side a{color:var(--ink);}
.menu-close{all:unset;cursor:pointer;position:absolute;top:calc(var(--edge) + 34px);right:var(--L);font-size:15px;}
.menu-close span{font-size:22px;margin-left:6px;vertical-align:-3px;}
.menu-close:focus-visible{outline:1px solid var(--sand);outline-offset:4px;}

/* ---------- smaller laptop heights ---------- */
@media (min-width:761px) and (max-height:760px){
  .copy{top:108px;bottom:150px;}
  h1{margin-top:16px;} h2{margin-top:14px;}
  .chap p{margin-top:14px;line-height:1.6;}
  .tri{display:none;}
  .duo{margin-top:14px;} .duo strong{font-size:20px;} .duo span{font-size:12.5px;} .creds{margin-top:10px;gap:4px;} .creds li{font-size:13px;line-height:1.5;}
  .levels{margin-top:16px;} .levels button{padding:10px 0 9px;}
  .kv,blockquote,.info{margin-top:16px;}
  .cta,.ghost{margin-top:20px;padding:17px 20px;}
  .motto{margin-top:16px;}
  .hint{bottom:112px;}
  .place{bottom:214px;} .controls{bottom:156px;} .counter{bottom:118px;}
}
@media (min-width:761px) and (max-height:660px){
  .hint,.motto{display:none;}
  h2{font-size:clamp(32px,min(4vw,7.4vh),52px);}
  .duo strong{font-size:21px;}
  .creds li{font-size:12.5px;line-height:1.5;}
  .chap p{font-size:14px;}
}
@media (max-width:1100px) and (min-width:761px){
  .tag{display:none;}
  .copy{width:min(520px,52vw);}
  .bar .l{font-size:13px;}
}

/* ---------- phones ---------- */
@media (max-width:760px){
  :root{--edge:8px;--gx:16px;}
  .scrim{background:
    linear-gradient(0deg,rgba(12,15,16,.95) 0%,rgba(12,15,16,.84) 40%,rgba(12,15,16,.3) 64%,rgba(12,15,16,0) 78%),
    linear-gradient(180deg,rgba(12,15,16,.62) 0%,rgba(12,15,16,0) 18%);}
  .top{padding:14px 14px;}
  .mark{width:40px;height:40px;}
  .name{font-size:21px;}
  .sub{font-size:9px;letter-spacing:.12em;}
  .tag,.join{display:none;}
  .copy{left:24px;right:24px;width:auto;top:auto;bottom:112px;height:calc(100% - 200px);}
  .chap{top:auto;bottom:0;}
  h1{font-size:40px;margin-top:14px;}
  h2{font-size:32px;margin-top:12px;}
  .chap p{font-size:14.5px;margin-top:12px;line-height:1.6;}
  .motto{font-size:18px;margin-top:14px;}
  .cta,.ghost{margin-top:18px;padding:15px 18px;font-size:14px;}
  .duo{margin-top:14px;gap:12px 16px;} .duo strong{font-size:19px;}
  .creds{margin-top:12px;} .creds li{font-size:12.5px;}
  .levels{gap:0 16px;margin-top:14px;} .levels button{font-size:20px;padding:10px 0 8px;}
  .kv,blockquote{margin-top:14px;} blockquote{font-size:19px;}
  .tri,.hint,.place,.counter,.foot{display:none;}
  .info{margin-top:14px;gap:8px;}
  .info div{grid-template-columns:1fr;gap:2px;}
  .info dd{font-size:14px;}
  .controls{right:24px;bottom:auto;top:calc(var(--edge) + 76px + env(safe-area-inset-top,0px));gap:18px;}
  .controls span{display:none;}
  .controls svg{width:20px;height:20px;}
  .bar{left:24px;right:24px;bottom:calc(30px + env(safe-area-inset-bottom,0px));gap:8px;}
  .bar .l{display:none;}
  .bar .n{font-size:15px;}
  .bar i{margin-top:8px;}
  .drawer{padding:24px 22px;}
  .drawer h3{font-size:36px;}
  .menu{padding:90px 26px 40px;align-items:flex-start;overflow:auto;}
  .menu-in{grid-template-columns:1fr;gap:30px;}
}
@media (max-width:760px) and (max-height:700px){
  .motto,.tri{display:none;}
  h1{font-size:34px;} h2{font-size:28px;}
}

@media (prefers-reduced-motion:reduce){
  .chap > *,.chap.on > *{transition:opacity .3s ease;transform:none !important;}
  .mouse::after,.ld-line i{animation:none;}
  .drawer{transition:none;}
}