@font-face{font-family:Syne;font-weight:800;font-display:swap;src:url(../fonts/syne-800.woff2) format("woff2")}
@font-face{font-family:Syne;font-weight:700;font-display:swap;src:url(../fonts/syne-700.woff2) format("woff2")}
@font-face{font-family:Newsreader;font-weight:400;font-display:swap;src:url(../fonts/news-400.woff2) format("woff2")}
@font-face{font-family:Newsreader;font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/news-400i.woff2) format("woff2")}
@font-face{font-family:Newsreader;font-weight:600;font-display:swap;src:url(../fonts/news-600.woff2) format("woff2")}
@font-face{font-family:"Noto Sans Gurmukhi";font-weight:500;font-display:swap;src:url(../fonts/gur-500.woff2) format("woff2")}
@font-face{font-family:"Noto Sans Gurmukhi";font-weight:700;font-display:swap;src:url(../fonts/gur-700.woff2) format("woff2")}
@font-face{font-family:"Noto Sans Gurmukhi";font-weight:800;font-display:swap;src:url(../fonts/gur-800.woff2) format("woff2")}
:root{--night:#050d1c;--navy:#0b1d3d;--steel:#c4cedb;--gold:#e0a93e;--gold2:#ffd98a;--blood:#a3241b;--cream:#f4e9cc;
--disp:Syne,"Noto Sans Gurmukhi",sans-serif;--gur:"Noto Sans Gurmukhi",sans-serif;--body:Newsreader,Georgia,serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;background:var(--night);color-scheme:dark}
body{background:var(--night);color:var(--cream);font:400 19px/1.6 var(--body);overflow-x:hidden;padding-inline:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold2);outline-offset:4px}
.wrap{padding-inline:max(20px,env(safe-area-inset-left,0px)) max(20px,env(safe-area-inset-right,0px))}
canvas#embers{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;mix-blend-mode:screen}
main,footer{position:relative;z-index:2}

/* hero */
.hero{min-height:100svh;display:grid;place-items:center;position:relative;overflow:hidden;text-align:center;
background:radial-gradient(60% 50% at 50% 55%,#12305f 0,#0a1a36 45%,var(--night) 80%)}
.chakkar{position:absolute;left:50%;top:50%;width:min(130vmin,1100px);aspect-ratio:1;translate:-50% -50%;opacity:.55;will-change:transform}
.chakkar svg{width:100%;height:100%;display:block}
.hero-in{position:relative;display:grid;gap:18px;justify-items:center;padding:0 16px}
.hero h1{font:800 clamp(34px,9.2vw,150px)/.95 var(--disp);letter-spacing:-.02em;color:var(--cream);text-wrap:balance;
clip-path:inset(0 100% 0 0);animation:reveal 1.1s .5s cubic-bezier(.7,0,.2,1) forwards}
.hero .gu{font:800 clamp(30px,6vw,84px)/1.1 var(--gur);color:var(--gold);opacity:0;animation:fade 1s 1.3s forwards}
.hero .tag{font:italic 400 clamp(17px,2.2vw,26px)/1.4 var(--body);color:var(--steel);opacity:0;animation:fade 1s 1.7s forwards}
.slash{position:absolute;left:-10%;top:48%;width:120%;height:3px;background:linear-gradient(90deg,transparent,#fff 40%,var(--gold2) 60%,transparent);
transform:rotate(-14deg) scaleX(0);transform-origin:left;box-shadow:0 0 30px 6px rgba(255,217,138,.7);animation:slash .6s .15s cubic-bezier(.2,.8,.2,1) forwards}
.cue{position:absolute;bottom:max(24px,env(safe-area-inset-bottom,0px));left:50%;translate:-50% 0;font:700 13px var(--disp);letter-spacing:.3em;color:var(--steel);opacity:0;animation:fade 1s 2.4s forwards}
.cue::after{content:"";display:block;width:1px;height:46px;background:linear-gradient(var(--gold),transparent);margin:10px auto 0;animation:drop 2s infinite}
@keyframes reveal{to{clip-path:inset(0 0 0 0)}}
@keyframes fade{to{opacity:1}}
@keyframes slash{60%{transform:rotate(-14deg) scaleX(1);opacity:1}100%{transform:rotate(-14deg) scaleX(1);opacity:0}}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* verse */
.verse{padding-block:clamp(90px,16vh,200px);display:grid;gap:clamp(40px,8vh,90px);max-width:1100px;margin-inline:auto}
.verse .lab{font:700 14px var(--disp);letter-spacing:.2em;color:var(--gold)}
.verse h2{font:800 clamp(34px,6vw,76px)/1.15 var(--gur);color:var(--cream);text-wrap:balance}
.verse h2 small{display:block;font:italic 400 clamp(18px,2vw,24px)/1.4 var(--body);color:var(--steel);margin-top:14px}
.pau{display:grid;gap:16px;border-left:3px solid var(--blood);padding-left:clamp(18px,3vw,40px)}
.pau .g{font:500 clamp(24px,3.6vw,46px)/1.65 var(--gur);color:var(--cream)}
.pau .g span{opacity:.18;transition:opacity .5s,color .5s}
.pau .g span.on{opacity:1}
.pau .e{font:italic 400 clamp(17px,1.8vw,22px)/1.6 var(--body);color:var(--steel);max-width:62ch}
.pau .n{font:700 13px var(--disp);color:var(--gold);letter-spacing:.2em}

/* pothi */
.pothi{height:420vh;position:relative}
.stage{position:sticky;top:0;height:100svh;display:grid;place-items:center;align-content:center;gap:clamp(18px,4vh,40px);overflow:hidden;
background:radial-gradient(50% 45% at 50% 50%,#1a2f57 0,transparent 70%)}
.stage .cap{text-align:center;display:grid;gap:8px;padding-inline:20px;z-index:2}
.stage .cap h2{font:800 clamp(30px,5vw,64px)/1 var(--disp)}
.stage .cap p{color:var(--steel);font-style:italic;max-width:46ch;margin-inline:auto}
.book{--pw:min(40vw,330px);position:relative;width:calc(var(--pw)*2);height:calc(var(--pw)*1.414);perspective:2200px;translate:calc(var(--pw)*-.5*var(--shift,1)) 0}
.book .base{position:absolute;right:0;top:0;width:var(--pw);height:100%;background:#241a10 url(../img/pg-006.jpg) center/cover;border-radius:0 6px 6px 0;box-shadow:0 30px 70px -10px #000,0 0 0 1px #0006}
.leaf{position:absolute;right:0;top:0;width:var(--pw);height:100%;transform-origin:left center;transform-style:preserve-3d;will-change:transform}
.leaf>div{position:absolute;inset:0;backface-visibility:hidden;background-size:cover;background-position:center;border-radius:0 6px 6px 0;box-shadow:inset 8px 0 14px -8px #0008}
.leaf>div.b{transform:rotateY(180deg);border-radius:6px 0 0 6px;box-shadow:inset -8px 0 14px -8px #0008}
.btn{display:inline-flex;align-items:center;gap:14px;font:800 clamp(16px,1.8vw,20px) var(--disp);color:var(--night);background:linear-gradient(120deg,var(--gold2),var(--gold));padding:16px 28px;border-radius:999px;text-decoration:none;min-height:52px;transition:transform .25s,box-shadow .25s}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 40px -10px rgba(224,169,62,.8)}

/* links */
.links{padding-block:clamp(80px,14vh,160px);max-width:1200px;margin-inline:auto}
.links h2{font:700 14px var(--disp);letter-spacing:.2em;color:var(--gold);margin-bottom:18px}
.lk{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding-block:clamp(20px,4vh,40px);border-top:1px solid #ffffff22;text-decoration:none;position:relative;isolation:isolate;overflow:hidden}
.lk:last-child{border-bottom:1px solid #ffffff22}
.lk::before{content:"";position:absolute;inset:0;background:var(--gold);transform:translateY(101%);transition:transform .45s cubic-bezier(.7,0,.2,1);z-index:-1}
.lk:hover::before,.lk:focus-visible::before{transform:none}
.lk:hover,.lk:focus-visible{color:var(--night)}
.lk b{font:800 clamp(34px,8vw,110px)/1 var(--disp);letter-spacing:-.02em;transition:padding .4s}
.lk:hover b{padding-left:clamp(10px,2vw,30px)}
.lk small{display:block;font:italic 400 clamp(15px,1.6vw,20px)/1.4 var(--body);opacity:.8;margin-top:6px}
.lk i{font:normal 800 clamp(28px,5vw,64px) var(--disp);padding-right:8px}

footer{padding-block:clamp(70px,12vh,130px) max(40px,env(safe-area-inset-bottom,0px));text-align:center;display:grid;gap:18px;justify-items:center;background:linear-gradient(transparent,#000 70%)}
footer img{width:96px;height:96px}
footer .f{font:800 clamp(22px,3.4vw,40px)/1.4 var(--gur);color:var(--gold);text-wrap:balance;max-width:20ch}
footer p{font:700 13px var(--disp);letter-spacing:.2em;color:var(--steel)}

@media (max-width:640px){.book{--pw:min(42vw,200px)}.pothi{height:380vh}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero h1{clip-path:none;animation:none}.hero .gu,.hero .tag,.cue{animation:none;opacity:1}.slash{display:none}.pau .g span{opacity:1}}