:root{
  --paper:#fffdf9; --paper-2:#f6f3ee; --tone:#ebe4d8;
  --ink:#14213d; --ink-soft:#394662;
  --kesri:#ff9933; --kesri-ink:#8f4600; --kesri-wash:#ffe9d0;
  --black:#000; --white:#fff;
  --font-head:'Noto Sans Gurmukhi','Inter',system-ui,sans-serif;
  --font-body:'Noto Sans Gurmukhi','Inter',system-ui,sans-serif;
  --font-latin:'Inter','Noto Sans Gurmukhi',system-ui,sans-serif;
  /* critically damped: fast, then rest, no overshoot */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.18s; --t-med:.5s; --t-slow:.9s;
  --gut:clamp(1.25rem,4vw,4rem);
  --gap:clamp(3rem,5vw,4.5rem);
  --measure:62ch;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-block-start:4.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{background:var(--paper);color:var(--ink);font:400 1.0625rem/1.7 var(--font-body);overflow-x:clip;min-block-size:100dvh}
html[lang=en] body{font-family:var(--font-latin);line-height:1.6}
img,svg{display:block;max-inline-size:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--kesri);color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
h1,h2,h3{font-family:var(--font-head);font-weight:600;letter-spacing:-.01em;line-height:1.4;text-wrap:balance}
html[lang=en] h1,html[lang=en] h2,html[lang=en] h3{font-family:var(--font-latin);line-height:1.2}
p,li{text-wrap:pretty;max-inline-size:var(--measure)}
.wrap{inline-size:min(76rem,100% - var(--gut)*2);margin-inline:auto}
section{position:relative}
.sec{padding-block:var(--gap)}
.h2{font-size:clamp(1.75rem,4.6vw,3.5rem);margin-block-end:1.25rem;max-inline-size:22ch}
.lede{max-inline-size:52ch;margin-block-end:1rem}
.tbc{font-family:var(--font-latin);font-weight:600;color:var(--kesri-ink);white-space:nowrap}
.two{display:grid;gap:3rem;align-items:center}
@media(min-width:861px){.two{grid-template-columns:1fr 1fr;gap:5rem}}

/* reveal: staggered, calm */
.js .rv{opacity:0;transform:translate3d(0,1.5rem,0);transition:opacity var(--t-med) var(--ease-out),transform var(--t-slow) var(--ease-out);transition-delay:calc(var(--d,0)*75ms)}
.js .rv.in{opacity:1;transform:none}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-block:.05em}
.w>i{display:inline-block;font-style:normal;transform:translate3d(0,105%,0);transition:transform var(--t-slow) var(--ease-out);transition-delay:calc(var(--i)*90ms + 120ms)}
.in .w>i,.w.in>i{transform:none}

/* nav: plain bar */
.nav{position:fixed;inset-block-start:0;inset-inline:0;z-index:20;transition:background-color var(--t-med) var(--ease-out)}
.nav.stuck{background:var(--paper)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;block-size:3.75rem}
.brand{font:600 1rem/1.3 var(--font-head)}
.nav ul{display:flex;gap:1.75rem;list-style:none;font:500 .9375rem/1.2 var(--font-body)}
.nav ul li{max-inline-size:none}
.nav ul a{position:relative;display:inline-block;padding-block:.5rem}
.nav ul a::after{content:"";position:absolute;inset-inline:0;inset-block-end:.1rem;block-size:3px;background:var(--kesri);transform:scaleX(0);transform-origin:left;transition:transform var(--t-med) var(--ease-out)}
.nav ul a.cur::after{transform:scaleX(1)}
.tog{display:flex;gap:.25rem;font:600 .9375rem/1 var(--font-latin)}
.tog a{padding:.65rem .9rem}
.tog a{position:relative;font-weight:500}
.tog a::after{content:"";position:absolute;inset-inline:.9rem;inset-block-end:.4rem;block-size:3px;background:var(--kesri);transform:scaleX(0);transform-origin:left;transition:transform var(--t-med) var(--ease-out)}
.tog a[aria-current=true]{font-weight:700}
.tog a[aria-current=true]::after{transform:scaleX(1)}
.bar{position:fixed;inset-block-start:0;inset-inline:0;block-size:3px;background:var(--kesri);transform:scaleX(0);transform-origin:left;z-index:30}
@media(hover:hover){.nav ul a:hover::after{transform:scaleX(1)}.tog a:hover::after{transform:scaleX(1)}}
@media(max-width:900px){.nav ul{display:none}}

/* photos: muted, colour on hover / focus */
.ph{overflow:hidden;background:var(--paper-2)}
.ph img{inline-size:100%;block-size:100%;object-fit:cover;outline:1px solid oklch(0 0 0/.1);outline-offset:-1px;filter:grayscale(.92) contrast(.96);transition:filter var(--t-slow) var(--ease-out),transform 1.2s var(--ease-out)}
.ph.focus img{filter:none;transform:scale(1.03)}
@media(hover:hover){.ph:hover img{filter:none;transform:scale(1.03)}}

/* hero */
.hero{min-block-size:100dvh;display:grid;align-items:end;overflow:hidden;padding-block:7rem 4.5rem}
.hero-ph{position:absolute;inset:0;z-index:0;background:var(--paper-2)}
.hero-ph img{inline-size:100%;block-size:100%;object-fit:cover;filter:grayscale(1);transition:filter var(--t-slow) var(--ease-out)}
.hero-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,oklch(1 0 0/.94) 0%,oklch(1 0 0/.84) 38%,oklch(1 0 0/.3) 62%,oklch(1 0 0/.3) 100%);pointer-events:none}
.hero-ph.focus img{filter:none}
@media(hover:hover){.hero-ph:hover img{filter:none}}
.hero .wrap{position:relative;z-index:1;pointer-events:none}
.hero .wrap a{pointer-events:auto}
.hero h1{font-size:clamp(1.75rem,8.6vw,7.25rem);line-height:1.35;font-weight:700;max-inline-size:none;letter-spacing:-.01em}
.hero .en{font:600 clamp(1.125rem,2.6vw,1.75rem)/1.4 var(--font-latin);margin-block-start:1rem}
.hero .sub{margin-block-start:.5rem;font-size:1.0625rem;max-inline-size:44ch}
.hero .btns{margin-block-start:1.75rem}
.cue{position:absolute;inset-block-end:1rem;inset-inline-start:50%;inline-size:3px;block-size:2.5rem;background:var(--paper-2);overflow:hidden;z-index:1}
.cue::after{content:"";position:absolute;inset:0;background:var(--ink);animation:cue 2.4s var(--ease-out) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* saakhi: the signature move */
.saakhi-head{padding-block:4.5rem 0}
.saakhi-head .tr{margin-block-end:0}
.panel{display:grid;gap:2rem;align-items:center;grid-template-columns:1fr}
.panel .art{inline-size:min(28rem,100%);margin-inline:auto}
.panel h3{font-size:clamp(1.5rem,3.6vw,2.5rem);margin-block-end:1rem;max-inline-size:20ch}
.art svg{inline-size:100%;block-size:auto;fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.art .ac{stroke:var(--kesri)}
.dr{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease-out);transition-delay:calc(var(--k,0)*160ms)}
.on .dr,.no-js .dr{stroke-dashoffset:0}
.note{margin-block-start:var(--gap);font-size:1rem;background:var(--paper-2);padding:1.25rem 1.5rem;max-inline-size:60ch}
@media(min-width:761px){
  .js .saakhi-pin{block-size:520dvh}
  .js .pin{position:sticky;inset-block-start:0;block-size:100dvh;overflow:hidden;display:grid;grid-template-rows:auto 1fr;align-items:center}
  .js .pin .stage{position:relative;inline-size:min(76rem,100% - var(--gut)*2);margin-inline:auto;block-size:min(34rem,100%);align-self:start;margin-block-start:1.5rem}
  .js .panel{position:absolute;inset:0;grid-template-columns:1fr 1fr;gap:4rem;opacity:0;visibility:hidden;transition:opacity var(--t-med) var(--ease-out),visibility 0s linear var(--t-med)}
  .js .panel.on{opacity:1;visibility:visible;transition-delay:0s}
  .js .panel>div{transform:translate3d(0,1rem,0);transition:transform var(--t-slow) var(--ease-out)}
  .js .panel.on>div{transform:none}
  .js .panel.on>div:first-child{transition-delay:.12s}
  .steps{position:absolute;inset-block-end:2rem;inset-inline:var(--gut);display:flex;gap:.5rem;justify-content:center}
  .steps i{inline-size:2.5rem;block-size:6px;background:var(--tone);transition:background-color var(--t-med)}
  .steps i.on{background:var(--kesri)}
}
@media(max-width:760px){
  .steps{display:none}
  .saakhi .stage{display:grid;gap:4.5rem;inline-size:min(76rem,100% - var(--gut)*2);margin-inline:auto;padding-block:1rem 2rem}
  .js .panel>div{opacity:0;transform:translate3d(0,1.25rem,0);transition:opacity var(--t-med) var(--ease-out),transform var(--t-slow) var(--ease-out)}
  .js .panel.on>div{opacity:1;transform:none}
}

/* timeline: a real sequence */
.tl{position:relative;margin-block-start:3rem;padding-inline-start:2.75rem;display:grid;gap:3.5rem}
.tl::before,.tl::after{content:"";position:absolute;inset-block:.5rem;inset-inline-start:.3rem;inline-size:6px;background:var(--tone)}
.tl::after{background:var(--kesri);transform:scaleY(var(--p,1));transform-origin:top}
.tl li{list-style:none;position:relative;max-inline-size:none}
.tl li::before{content:"";position:absolute;inset-inline-start:-2.75rem;inset-block-start:1.2rem;inline-size:1.5rem;block-size:1.5rem;margin-inline-start:-.05rem;border-radius:50%;background:var(--tone);transition:background-color var(--t-med),transform var(--t-med) var(--ease-out)}
.tl li.on::before{background:var(--kesri);transform:scale(1.15)}
.yr{white-space:nowrap;font:700 clamp(2rem,5.2vw,3.75rem)/1.2 var(--font-latin);letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums}
.yr.sm{font-size:clamp(1.75rem,3.4vw,2.75rem)}
.tl h3{font-size:1.5rem;margin-block:.25rem .5rem}
@media(min-width:900px){.tl li{display:grid;grid-template-columns:21rem 1fr;gap:2rem;align-items:start}.yr.sm{font-size:clamp(1.75rem,3.4vw,2.75rem)}
.tl h3{margin-block-start:1rem}}

/* schedule */
.sched{background:var(--paper-2)}
table{inline-size:100%;border-collapse:collapse;margin-block-start:1.5rem}
th,td{text-align:start;padding:1.1rem .75rem;border-block-end:1px solid oklch(0 0 0/.12);vertical-align:baseline}
th{font-weight:600;font-size:1rem}
td:first-child{font-weight:600;font-size:1.25rem}
tbody tr{transition:background-color var(--t-fast)}
@media(hover:hover){tbody tr:hover{background:var(--paper)}}
.fine{margin-block-start:1rem}
.sched .ph,.visit .ph{aspect-ratio:4/3}

/* notices */
.notes{display:grid;gap:1rem;margin-block-start:1.5rem}
.notes article{background:var(--paper-2);padding:1.5rem;display:grid;gap:.25rem}
.notes time{font:600 .9375rem/1.4 var(--font-latin);color:var(--kesri-ink)}
.notes h3{font-size:1.5rem}
.empty{margin-block-start:1.5rem;padding:1.5rem;background:var(--paper-2);max-inline-size:36rem}
.ph.sq{aspect-ratio:4/3}

/* visit */
address{font-style:normal;font-weight:600;font-size:clamp(1.25rem,2.6vw,1.75rem);line-height:1.6;margin-block-end:.5rem}
.btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-block-start:1.5rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-block-size:3rem;padding:.7rem 1.5rem;border-radius:3em;background:var(--ink);color:var(--white);font:600 1rem/1.3 var(--font-body);transition-property:background-color,color,transform;transition-duration:var(--t-fast);transition-timing-function:var(--ease-out)}
.btn.pri{background:var(--kesri);color:var(--ink)}
.btn:active:not([aria-disabled=true]){transform:scale(.96)}
.btn[aria-disabled=true]{background:var(--paper-2);color:var(--ink-soft);cursor:not-allowed}
@media(hover:hover){.btn:not([aria-disabled=true]):hover{background:var(--black);color:var(--white)}}
.map{inline-size:100%;aspect-ratio:4/3;border:0;background:var(--paper-2);filter:grayscale(.9);transition:filter var(--t-slow) var(--ease-out)}
.map:hover,.map.focus{filter:none}

/* gallery */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(16rem,100%),1fr));gap:.75rem;margin-block-start:2rem}
.tile{aspect-ratio:4/3;display:block;inline-size:100%;cursor:zoom-in}
.tile .ph{block-size:100%}
.lb{position:fixed;inset:0;z-index:50;background:var(--black);opacity:0;visibility:hidden;transition:opacity var(--t-med) var(--ease-out),visibility 0s linear var(--t-med);cursor:zoom-out;overscroll-behavior:contain}
.lb.open{opacity:1;visibility:visible;transition-delay:0s}
.lb img{position:fixed;inset-block-start:0;inset-inline-start:0;max-inline-size:none;will-change:transform}
.lb .x{position:fixed;inset-block-start:.75rem;inset-inline-end:.75rem;color:var(--white);font:400 1.75rem/1 var(--font-latin);min-inline-size:3rem;min-block-size:3rem;transition:opacity var(--t-fast);opacity:.8}
.lb .x:hover,.lb .x:focus-visible{opacity:1}
.lb .x:focus-visible{outline-color:var(--white)}

/* footer */
.foot{padding-block:var(--gap) 2rem;overflow:hidden;background:var(--paper-2)}
.giant{font:700 clamp(4rem,23vw,21rem)/1.3 var(--font-head);letter-spacing:-.01em;text-align:center;white-space:nowrap;max-inline-size:none}
.giant .l{display:inline-block;transition:opacity 1s var(--ease-out),transform 1.4s var(--ease-out),color var(--t-med);transition-delay:calc(var(--i)*90ms)}
.js .giant:not(.in) .l{opacity:0;transform:translate3d(0,40%,0)}
.foot-row{display:flex;flex-wrap:wrap;gap:1.25rem 2.5rem;justify-content:space-between;align-items:center;margin-block-start:3rem}
.foot-row a.fb{font-weight:600;border-block-end:3px solid var(--kesri);padding-block-end:2px;transition:border-color var(--t-fast)}
@media(hover:hover){.foot-row a.fb:hover{border-color:var(--ink)}}
.credit{margin-block-start:1.5rem;font-size:.9375rem;color:var(--ink-soft)}

.skip{position:fixed;inset-block-start:.5rem;inset-inline-start:.5rem;z-index:60;background:var(--ink);color:var(--white);padding:.6rem 1rem;border-radius:.5rem;transform:translateY(-200%)}
.skip:focus{transform:none}
@media(max-width:380px){.btn{inline-size:100%}.tl{padding-inline-start:2.25rem}.tl li::before{inset-inline-start:-2.25rem}}
@media(forced-colors:active){.btn{border:1px solid ButtonText}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js .rv,.js .giant:not(.in) .l{transform:none!important;transition:opacity .4s linear!important}
  .js .w>i{transform:none!important;opacity:0;transition:opacity .4s linear!important}
  .js .in .w>i{opacity:1}
  .js .panel,.js .panel.on{transition:opacity .4s linear!important}
  .js .panel>div{transform:none!important}
  .dr{stroke-dashoffset:0!important}
  .ph img{transform:none!important}
  .cue{display:none}
}

.tr{font:500 1.0625rem/1.5 var(--font-latin);color:var(--ink-soft);margin-block:-.75rem 1.25rem}
html[lang=en] .tr{font-family:var(--font-body)}
.tl{list-style:none}
.tog a{min-block-size:2.75rem;display:inline-flex;align-items:center;padding-inline:.9rem}
.nav ul a{min-block-size:2.75rem;display:inline-flex;align-items:center}
.lb img{inline-size:auto}

.panel p{font-size:clamp(1.125rem,1.9vw,1.5rem);line-height:1.65}
html[lang=en] .panel p{line-height:1.5}

.tbc-line{margin-block-start:.75rem}
.tbc-line .tbc{font-size:1.0625rem}
.giant{color:var(--ink)}
