/* Layout: a Vrindavan dusk palette. Peacock-blue night bands frame the page; lotus-white reading sections sit between them. One sticky nav, hash-routed views. */
:root{
  --bg:#fbf8fb;          /* lotus white, faint pink bias */
  --surface:#ffffff;
  --ink:#1b1f3a;         /* Shyam blue-black */
  --muted:#5b5f7d;
  --line:#e6dfea;
  --peacock:#0c4a6e;     /* mor pankh deep blue */
  --teal:#0f766e;        /* mor pankh green */
  --gold:#c98a12;        /* pitambar gold */
  --gold-soft:#f6e7c1;
  --lotus:#c2417a;       /* Radha rani pink */
  --night:#0b1735;       /* hero / footer band */
  --night-ink:#f3eedc;
  --ok:#15803d; --warn:#b45309; --bad:#b91c1c;
  --f-display:"Rozha One", "Tiro Devanagari Hindi", Georgia, serif;
  --f-body:"Mukta", "Noto Sans Devanagari", system-ui, sans-serif;
  --f-hand:"Kalam", "Mukta", cursive;
  --r:10px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0d1226; --surface:#151b36; --ink:#ece8f5; --muted:#a6a9c4; --line:#283058;
  --peacock:#5fb4e0; --teal:#3fc1b0; --gold:#e8b44a; --gold-soft:#3a2f17; --lotus:#ec7fae;
  --night:#060b1d; --night-ink:#f3eedc; --ok:#4ade80; --warn:#fbbf24; --bad:#f87171; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0d1226; --surface:#151b36; --ink:#ece8f5; --muted:#a6a9c4; --line:#283058;
  --peacock:#5fb4e0; --teal:#3fc1b0; --gold:#e8b44a; --gold-soft:#3a2f17; --lotus:#ec7fae;
  --night:#060b1d; --night-ink:#f3eedc; --ok:#4ade80; --warn:#fbbf24; --bad:#f87171; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
img,video{max-width:100%}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;margin:0}
h1,h2,h3{font-family:var(--f-display);font-weight:400;line-height:1.15;text-wrap:balance;margin:0}
h2{font-size:clamp(1.8rem,4vw,2.5rem);color:var(--peacock)}
h3{font-size:1.3rem}
p{margin:0}
a{color:var(--teal)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700}
.hindi{font-family:var(--f-display)}
.draft{background:var(--gold-soft);color:var(--ink);font-size:.85rem;text-align:center;padding-block:6px}

/* nav */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--night)}
header.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--night);color:var(--night-ink);border-bottom:2px solid var(--gold)}
.nav .wrap{display:flex;align-items:center;gap:16px;padding-block:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:var(--night-ink);text-decoration:none;margin-right:auto}
.brand b{font-family:var(--f-display);font-weight:400;font-size:1.35rem;line-height:1}
.brand small{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.nav nav{display:flex;gap:4px;flex-wrap:wrap}
.nav nav a{color:var(--night-ink);text-decoration:none;padding:6px 12px;border-radius:999px;font-weight:600;font-size:.95rem;white-space:nowrap}
.nav nav a:hover{background:rgba(255,255,255,.08)}
.nav nav a[aria-current="page"]{background:var(--gold);color:#1b1404}
.nav nav a.cta{border:1px solid var(--gold)}

/* hero */
.hero{background:radial-gradient(120% 90% at 85% 10%,#174a7a 0%,var(--night) 60%);color:var(--night-ink);overflow:hidden;position:relative}
.hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;padding-block:56px 64px}
.hero h1{font-size:clamp(2.4rem,6.5vw,4.4rem);color:#fff}
.hero h1 span{display:block;font-size:.5em;color:var(--gold);margin-bottom:.3em}
.hero p.lead{font-size:1.15rem;max-width:34em;margin-top:16px;opacity:.9}
.hero .shloka{font-family:var(--f-hand);color:#f1c96a;font-size:1.15rem;margin-top:22px;border-left:3px solid var(--gold);padding-left:14px}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:8px;font:600 1rem var(--f-body);padding:11px 22px;border-radius:999px;border:0;cursor:pointer;text-decoration:none}
.btn.gold{background:var(--gold);color:#1b1404}
.btn.ghost{background:transparent;color:inherit;border:1.5px solid currentColor}
.btn.solid{background:var(--peacock);color:#fff}
:root[data-theme="dark"] .btn.solid{color:#071425}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn.solid{color:#071425}}
.feather{width:100%;max-width:340px;justify-self:center}
.flute-line{height:6px;background:repeating-linear-gradient(90deg,var(--gold) 0 40px,transparent 40px 52px);opacity:.6}

section{padding-block:56px}
.sec-head{display:grid;gap:6px;margin-bottom:28px}
.sec-head p{color:var(--muted);max-width:60ch}

/* darshan timings */
.timings{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.t{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.t .time{font:700 1.4rem var(--f-body);color:var(--peacock);font-variant-numeric:tabular-nums}
.t .name{font-weight:600}
.t .hi{color:var(--muted);font-size:.9rem}

/* about */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center}
.portrait{aspect-ratio:4/5;max-width:100%;border-radius:200px 200px var(--r) var(--r);background:linear-gradient(180deg,var(--teal),var(--peacock));display:grid;place-items:center;color:#fff;text-align:center;padding:24px;position:relative;overflow:hidden}
.portrait .ph{font-size:.9rem;opacity:.85}
.portrait .om{font-family:var(--f-display);font-size:5rem;line-height:1;color:var(--gold-soft)}
.about p+p{margin-top:14px}
.about .body{min-width:0}

/* kathas */
.katha-list{display:grid;gap:12px}
.k{display:grid;grid-template-columns:110px 1fr auto;gap:18px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.k .date{text-align:center;border-right:1px solid var(--line);padding-right:16px;font-variant-numeric:tabular-nums}
.k .date b{display:block;font:700 1.6rem var(--f-body);color:var(--lotus);line-height:1.1}
.k .date span{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.k .info{min-width:0}
.k .info h3{font-size:1.15rem;color:var(--ink)}
.k .info p{color:var(--muted);font-size:.95rem}
.pill{display:inline-block;font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--gold-soft);color:var(--ink);white-space:nowrap}
.pill.live{background:var(--teal);color:#fff}
.pill.full{background:var(--line);color:var(--muted)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.panel h3{color:var(--peacock);margin-bottom:8px}
.panel ul{margin:10px 0 0;padding-left:20px}

/* booking */
.tabs{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px;gap:4px;margin-bottom:24px;flex-wrap:wrap}
.tabs button{font:600 .98rem var(--f-body);border:0;background:transparent;color:var(--ink);padding:9px 18px;border-radius:999px;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--peacock);color:#fff}
:root[data-theme="dark"] .tabs button[aria-selected="true"]{color:#071425}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tabs button[aria-selected="true"]{color:#071425}}
.book{display:grid;grid-template-columns:1.25fr .75fr;gap:24px;align-items:start}
form.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:grid;gap:18px;min-width:0}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
label{display:grid;gap:5px;font-weight:600;font-size:.92rem}
label small{font-weight:400;color:var(--muted)}
input,select,textarea{font:400 1rem var(--f-body);padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);width:100%;min-width:0}
textarea{min-height:84px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--peacock);outline:2px solid color-mix(in srgb,var(--peacock) 30%,transparent)}
.rooms{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.room{position:relative;display:block;border:1.5px solid var(--line);border-radius:var(--r);padding:14px;cursor:pointer;background:var(--bg)}
.room input{position:absolute;opacity:0;pointer-events:none}
.room:has(input:checked){border-color:var(--peacock);box-shadow:0 0 0 3px color-mix(in srgb,var(--peacock) 18%,transparent)}
.room:has(input:disabled){opacity:.55;cursor:not-allowed}
.room .rt{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.room .rt b{font-size:1rem}
.room .price{font-weight:700;color:var(--teal);font-variant-numeric:tabular-nums;white-space:nowrap}
.room .desc{font-size:.85rem;color:var(--muted);font-weight:400;margin-top:4px}
.room .avail{margin-top:8px;font-size:.82rem;font-weight:700}
.room.has-photos{overflow:hidden}
.room .rph{position:relative;margin:-14px -14px 12px;aspect-ratio:4/3;background:var(--line)}
.room .rph .strip{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.room .rph .strip::-webkit-scrollbar{display:none}
.room .rslide{flex:0 0 100%;height:100%;padding:0;border:0;background:none;scroll-snap-align:center;cursor:zoom-in;display:block}
.room .rslide img{width:100%;height:100%;object-fit:cover;display:block}
.room .rnav{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;border:0;background:rgba(10,18,48,.6);color:#fff;font:700 1.3rem/1 var(--f-body);display:grid;place-items:center;padding:0 0 3px;cursor:pointer}
.room .rnav.prev{left:8px}.room .rnav.next{right:8px}
.room .rnav:hover{background:rgba(10,18,48,.85)}
.room .rcount{position:absolute;right:8px;bottom:8px;background:rgba(10,18,48,.65);color:#fff;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:999px;pointer-events:none}
.lightbox .lb-nav{display:flex;gap:16px;align-items:center;justify-content:center;font-weight:600}
.lightbox .lb-nav button{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;font:700 1.5rem/1 var(--f-body);cursor:pointer;padding:0 0 4px}
.avail.ok{color:var(--ok)} .avail.low{color:var(--warn)} .avail.none{color:var(--bad)}
.live-avail{margin:0 0 10px;font-size:.92rem;font-weight:700}
.err{color:var(--bad);font-size:.88rem;font-weight:600}
.summary{position:sticky;top:calc(env(safe-area-inset-top,0px) + 84px);background:var(--night);color:var(--night-ink);border-radius:var(--r);padding:22px;display:grid;gap:12px}
.summary h3{color:var(--gold)}
.summary dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:.95rem}
.summary dt{opacity:.7}
.summary dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.summary .total{border-top:1px dashed rgba(255,255,255,.3);padding-top:10px;display:flex;justify-content:space-between;font-size:1.2rem;font-weight:700}
.summary .note{font-size:.82rem;opacity:.75}
.confirm{border:2px solid var(--teal);background:var(--surface);border-radius:var(--r);padding:24px;display:grid;gap:12px}
.confirm .ref{font:700 1.5rem var(--f-body);letter-spacing:.06em;color:var(--lotus);font-variant-numeric:tabular-nums}
.copyrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.copybox{font-family:ui-monospace,monospace;font-size:.85rem;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px;white-space:pre-wrap;word-break:break-word;user-select:all}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.g{aspect-ratio:4/3;max-width:100%;border-radius:var(--r);display:flex;align-items:flex-end;padding:14px;color:#fff;font-weight:600}
.g:nth-child(6n+1){background:linear-gradient(160deg,#0f766e,#0c4a6e)}
.g:nth-child(6n+2){background:linear-gradient(160deg,#c2417a,#6b1d4a)}
.g:nth-child(6n+3){background:linear-gradient(160deg,#c98a12,#7a4a05)}
.g:nth-child(6n+4){background:linear-gradient(160deg,#1e3a8a,#0b1735)}
.g:nth-child(6n+5){background:linear-gradient(160deg,#15803d,#0f3d2a)}
.g:nth-child(6n+6){background:linear-gradient(160deg,#7c3aed,#2e1065)}

/* contact */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.contact .panel p{color:var(--muted)}

footer{background:var(--night);color:var(--night-ink);padding-block:40px}
footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}
footer h4{font-family:var(--f-display);font-weight:400;font-size:1.2rem;color:var(--gold);margin:0 0 8px}
footer a{color:var(--night-ink);text-decoration:none;opacity:.85}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
footer .legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.15);padding-top:16px;font-size:.85rem;opacity:.7}

.view{animation:fade .35s ease}
@keyframes fade{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.view{animation:none}}

@media (max-width:820px){
  .hero .wrap,.about,.split,.book,footer .wrap{grid-template-columns:1fr}
  .feather{max-width:200px;order:-1}
  .summary{position:static}
  .k{grid-template-columns:80px 1fr}
  .k .pill{grid-column:2;justify-self:start}
  .nav nav{width:100%;overflow-x:auto;flex-wrap:nowrap;order:3}
}

/* ---------- v2 additions ---------- */
.lang{font:600 .9rem var(--f-body);background:transparent;color:var(--night-ink);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:6px 12px;cursor:pointer;white-space:nowrap}
.lang:hover{border-color:var(--gold)}

/* hero slider */
.slider{position:relative;background:var(--night);color:var(--night-ink);overflow:hidden;min-height:clamp(420px,62vh,620px);display:grid}
.slide{grid-area:1/1;background-size:cover;background-position:center;opacity:0;transition:opacity .9s ease}
.slide.on{opacity:1}
.slide.fallback{background:radial-gradient(120% 90% at 85% 10%,#174a7a 0%,#0b1735 60%)}
.slider::after{content:"";grid-area:1/1;background:linear-gradient(90deg,rgba(6,11,29,.88) 0%,rgba(6,11,29,.55) 55%,rgba(6,11,29,.1) 100%);pointer-events:none;z-index:1}
.slider .wrap{grid-area:1/1;z-index:2;align-self:center;width:100%;padding-block:48px}
.slider .copy{max-width:640px}
.slider h1{font-size:clamp(2.2rem,6vw,4rem);color:#fff}
.slider h1 span{display:block;font-size:.5em;color:var(--gold);margin-bottom:.3em}
.slider .lead{font-size:1.1rem;max-width:34em;margin-top:14px;opacity:.92}
/* the shloka sits in a small golden frame with a jewel on top, lettering in gold, and its meaning underneath */
.slider .shloka-card{position:relative;margin:26px 0 0;max-width:33rem;padding:18px 22px 14px;text-align:center;border-radius:16px;background:linear-gradient(180deg,rgba(201,138,18,.22),rgba(120,72,10,.1));border:1px solid rgba(232,180,74,.42);box-shadow:inset 0 0 0 4px rgba(8,16,40,.4),inset 0 0 0 5px rgba(232,180,74,.24),0 12px 34px rgba(0,0,0,.28)}
.slider .shloka-card::before{content:"";position:absolute;left:50%;top:-8px;width:14px;height:14px;margin-left:-7px;border-radius:3px;background:linear-gradient(135deg,#fff1b8,#c98a12);transform:rotate(45deg);box-shadow:0 0 12px rgba(241,201,106,.7)}
.slider .shloka{font-family:var(--f-hand);font-size:clamp(1rem,4.6vw,1.3rem);line-height:1.8;margin:0;padding:0;border:0;color:#f1c96a;background:linear-gradient(180deg,#fff3c4 0%,#f1c96a 48%,#d79a1c 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 10px rgba(241,201,106,.32))}
.slider .shloka-card figcaption{margin-top:8px;font-size:.86rem;line-height:1.5;color:rgba(243,238,220,.76);font-style:italic}
:lang(hi) .slider .shloka-card figcaption{font-style:normal}
.slider .caption{font-size:.85rem;opacity:.8;margin-top:18px;min-height:1.4em}
.sl-ctrl{position:absolute;z-index:3;bottom:16px;right:max(16px,env(safe-area-inset-right,0px));display:flex;gap:8px;align-items:center}
.sl-ctrl button{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:999px;width:36px;height:36px;cursor:pointer;font-size:1.1rem}
.sl-dots{display:flex;gap:6px}
.sl-dots button{width:10px;height:10px;padding:0;border-radius:50%}
.sl-dots button[aria-current="true"]{background:var(--gold);border-color:var(--gold)}

/* youtube */
.videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.yt{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:var(--r);overflow:hidden;background:#000;border:0;padding:0;cursor:pointer;display:block;width:100%}
.yt img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85}
.yt .play{position:absolute;inset:0;display:grid;place-items:center}
.yt .play span{width:64px;height:44px;border-radius:12px;background:#d11;display:grid;place-items:center;color:#fff;font-size:1.3rem}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vcap{font-weight:600;margin-top:6px}
.empty{border:1.5px dashed var(--line);border-radius:var(--r);padding:24px;color:var(--muted);text-align:center}

/* gallery */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip{font:600 .9rem var(--f-body);border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:6px 14px;border-radius:999px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--peacock);border-color:var(--peacock);color:#fff}
.gitem{position:relative;aspect-ratio:4/3;max-width:100%;border-radius:var(--r);overflow:hidden;background:var(--line);border:0;padding:0;cursor:pointer;display:block;width:100%}
.gitem img,.gitem video{width:100%;height:100%;object-fit:cover;display:block}
.gitem .tag{position:absolute;left:8px;top:8px;background:rgba(6,11,29,.75);color:#fff;font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:999px}
.gitem .cap{position:absolute;inset:auto 0 0 0;padding:20px 10px 8px;background:linear-gradient(transparent,rgba(6,11,29,.85));color:#fff;font-size:.88rem;text-align:left}
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(3,6,18,.92);display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.lightbox .inner{max-width:min(1000px,100%);width:100%;display:grid;gap:10px;color:#fff}
.lightbox img,.lightbox video{max-width:100%;max-height:78vh;margin:0 auto;display:block;border-radius:8px}
.lightbox .frame{aspect-ratio:16/9;width:100%;max-width:100%}
.lightbox .frame iframe{width:100%;height:100%;border:0;border-radius:8px}
.lightbox .close{justify-self:end;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:6px 14px;cursor:pointer;font:600 .9rem var(--f-body)}

/* admin */
.admin-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.admin-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-block:20px}
table.tbl{width:100%;border-collapse:collapse;font-size:.92rem;background:var(--surface)}
.tbl th,.tbl td{text-align:left;padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.tbl td{font-variant-numeric:tabular-nums}
.scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.st{display:inline-block;font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--line);color:var(--ink)}
.st.pending,.st.new{background:var(--gold-soft)}
.st.confirmed{background:var(--teal);color:#fff}
.st.cancelled,.st.declined{background:var(--line);color:var(--muted);text-decoration:line-through}
.btn.sm{padding:6px 12px;font-size:.85rem}
.btn.danger{background:transparent;color:var(--bad);border:1px solid var(--bad)}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.mcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:grid}
.mcard .thumb{aspect-ratio:16/10;background:var(--line);max-width:100%}
.mcard .thumb img,.mcard .thumb video{width:100%;height:100%;object-fit:cover;display:block}
.mcard .body{padding:10px 12px;display:grid;gap:6px;font-size:.88rem}
.mcard label{display:flex;gap:6px;align-items:center;font-weight:400}
.mcard input[type=checkbox]{width:auto}
.toast{position:fixed;z-index:60;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--night);color:var(--night-ink);padding:10px 18px;border-radius:999px;font-weight:600;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.inline-confirm{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}

@media (max-width:820px){
  .slider::after{background:linear-gradient(180deg,rgba(6,11,29,.55) 0%,rgba(6,11,29,.9) 70%)}
  .sl-ctrl{bottom:10px}
}

/* logo */
.brand .logo{width:48px;height:48px;border-radius:50%;flex:none;filter:drop-shadow(0 1px 4px rgba(0,0,0,.35))}

/* ---------- 3D medallion ---------- */
/* js/coin.js builds a thick gold coin inside every [data-coin] box. Edge layers, faces and the
   spines that fill the edge-on view are all stacked in real 3D, so the coin can turn freely. */
#app{overflow-x:clip}   /* the coin's glow may reach past the screen edge on phones; clip keeps the page from scrolling sideways */
.coin-box{display:grid;justify-items:center;gap:28px;min-width:0}
.coin-hint{font-size:.85rem;color:var(--muted);text-align:center}
.coin-stage{--coin:min(78vw,380px);--t:calc(var(--coin) * .085);position:relative;width:var(--coin);height:var(--coin);perspective:1300px;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:50%}
.coin-stage.dragging{cursor:grabbing}
.coin-stage:focus-visible{outline:3px solid var(--gold);outline-offset:14px}
.coin-flat{display:block;width:100%;height:100%;border-radius:50%}
.coin{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.coin-layer{position:absolute;inset:calc(var(--coin) * .004);border-radius:50%;pointer-events:none;transform:translateZ(calc(var(--t) * var(--z)))}
.coin-spine{position:absolute;pointer-events:none}
.coin-spine.v{top:calc(var(--coin) * .004);bottom:calc(var(--coin) * .004);left:calc(50% - var(--t) * .48);width:calc(var(--t) * .96);transform:rotateY(90deg)}
.coin-spine.h{left:calc(var(--coin) * .004);right:calc(var(--coin) * .004);top:calc(50% - var(--t) * .48);height:calc(var(--t) * .96);transform:rotateX(90deg)}
.coin-face{position:absolute;inset:0;border-radius:50%;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.coin-front{transform:translateZ(calc(var(--t) / 2 + .5px))}
.coin-back{transform:rotateY(180deg) translateZ(calc(var(--t) / 2 + .5px))}
.coin-face img{display:block;width:100%;height:100%;border-radius:50%;pointer-events:none;-webkit-user-drag:none}
.coin-dim,.coin-shine{position:absolute;inset:0;border-radius:50%;pointer-events:none}
.coin-dim{background:#0a1230;opacity:var(--dim,0)}
.coin-shine{background:linear-gradient(104deg,transparent 41%,rgba(255,244,205,.0) 43%,rgba(255,244,205,.7) 50%,rgba(255,244,205,.0) 57%,transparent 59%);background-size:300% 100%;background-position:calc(var(--sheen,.6) * 100%) 0;opacity:var(--sheen-o,.6);mix-blend-mode:soft-light}
.coin-glow{position:absolute;inset:-24%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(201,138,18,.22) 0%,rgba(201,138,18,.08) 42%,transparent 68%);animation:coin-glow 6s ease-in-out infinite alternate}
.coin-stage.on-dark .coin-glow{background:radial-gradient(circle,rgba(232,180,74,.42) 0%,rgba(232,180,74,.14) 42%,transparent 68%)}
.coin-shadow{position:absolute;left:10%;right:10%;bottom:-8%;height:8%;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse at center,rgba(8,14,40,.5) 0%,transparent 70%);filter:blur(5px);transform:scaleX(var(--shx,1));opacity:var(--sho,.8)}
@keyframes coin-glow{from{opacity:.65}to{opacity:1}}
/* The lotus, flute and mor pankh float above the coin face. js/coin.js stacks img/relief/* into slices at
   slightly different depths, puts a soft shadow on the face below, and lights the lotus from underneath. */
.coin-side{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.coin-side.front{--sx:var(--fx,.4);--sy:var(--fy,.6);--so:var(--fso,1)}
.coin-side.back{transform:rotateY(180deg);--sx:var(--bx,.4);--sy:var(--by,.6);--so:var(--bso,1)}
.coin-rel{position:absolute;left:calc(var(--x) * 100%);top:calc(var(--y) * 100%);width:calc(var(--w) * 100%);height:calc(var(--h) * 100%);pointer-events:none;background-repeat:no-repeat;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.coin-slice{transform:translateZ(calc(var(--t) / 2 + .5px + var(--coin) * var(--lz)))}
.coin-rshadow{opacity:var(--so);transform:translateZ(calc(var(--t) / 2 + .8px)) translate(calc(var(--sx) * var(--zf) * var(--coin)),calc(var(--sy) * var(--zf) * var(--coin)))}
.coin-aura{transform:translateZ(calc(var(--t) / 2 + var(--coin) * .03));background:radial-gradient(closest-side,rgba(255,226,150,.7),rgba(255,200,100,.32) 50%,rgba(255,190,90,0));animation:coin-aura 4.8s ease-in-out infinite alternate}
.coin-mote{position:absolute;left:calc(var(--x) * 100%);top:calc(var(--y) * 100%);width:calc(var(--coin) * var(--s));height:calc(var(--coin) * var(--s));margin:calc(var(--coin) * var(--s) * -.5) 0 0 calc(var(--coin) * var(--s) * -.5);pointer-events:none;opacity:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;
  background:radial-gradient(circle,#fff 0 10%,rgba(255,236,170,.9) 18%,rgba(255,214,120,0) 58%),linear-gradient(90deg,rgba(255,236,170,0),rgba(255,246,210,.95) 50%,rgba(255,236,170,0)) center/100% 7% no-repeat,linear-gradient(0deg,rgba(255,236,170,0),rgba(255,246,210,.95) 50%,rgba(255,236,170,0)) center/7% 100% no-repeat;
  transform:translateZ(calc(var(--t) / 2 + var(--coin) * var(--lz)));animation:coin-twinkle var(--dur) ease-in-out var(--delay) infinite}
/* The sky behind the portrait drifts (js/coin.js paints it on a canvas) and a beam of light goes round the golden
   ring: img/relief/ring-gloss.webp is the ring's brightest engraving, shown only through a turning wedge of light. */
.coin-sky{position:absolute;pointer-events:none;mix-blend-mode:screen}
.coin-gloss{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:center/100% 100% no-repeat;
  -webkit-mask-image:conic-gradient(from var(--sw,0deg),rgba(0,0,0,.08) 0deg,rgba(0,0,0,.5) 32deg,#000 46deg,rgba(0,0,0,.08) 70deg,rgba(0,0,0,.08) 166deg,rgba(0,0,0,.45) 196deg,rgba(0,0,0,.75) 206deg,rgba(0,0,0,.08) 226deg,rgba(0,0,0,.08) 360deg);
  mask-image:conic-gradient(from var(--sw,0deg),rgba(0,0,0,.08) 0deg,rgba(0,0,0,.5) 32deg,#000 46deg,rgba(0,0,0,.08) 70deg,rgba(0,0,0,.08) 166deg,rgba(0,0,0,.45) 196deg,rgba(0,0,0,.75) 206deg,rgba(0,0,0,.08) 226deg,rgba(0,0,0,.08) 360deg)}
.coin-sweep{position:absolute;inset:0;border-radius:50%;pointer-events:none;mix-blend-mode:overlay;
  background:conic-gradient(from var(--sw,0deg),rgba(255,244,205,0) 0deg,rgba(255,244,205,.55) 34deg,#fff 48deg,rgba(255,244,205,0) 74deg,rgba(255,244,205,0) 168deg,rgba(255,244,205,.45) 198deg,rgba(255,250,230,.85) 208deg,rgba(255,244,205,0) 230deg,rgba(255,244,205,0) 360deg);
  -webkit-mask-image:radial-gradient(closest-side,transparent 62%,#000 64%,#000 98%,transparent 99.6%);mask-image:radial-gradient(closest-side,transparent 62%,#000 64%,#000 98%,transparent 99.6%)}
@keyframes coin-aura{from{opacity:.5}to{opacity:1}}
@keyframes coin-twinkle{0%,100%{opacity:0;scale:.35}40%{opacity:1;scale:1}55%{opacity:.85;scale:.8}}
@media (prefers-reduced-motion:reduce){.coin-aura{animation:none}.coin-mote{display:none}.coin-gloss,.coin-sweep{display:none}}

@media (prefers-reduced-motion:reduce){.coin-glow{animation:none}}

/* hero: coin on the right (desktop) or above the heading (phone), shown only when there are no slider photos */
.slider{--hero-coin:clamp(250px,29vw,360px)}
.slider .hero-coin-wrap{grid-area:1/1;z-index:3;align-self:center;padding-block:36px;display:flex;justify-content:flex-end;pointer-events:none}
.slider .hero-coin-wrap .coin-stage{--coin:var(--hero-coin);pointer-events:auto}
.hero-coin-wrap .coin-hint{color:rgba(243,238,220,.7)}
.slider .wrap{pointer-events:none}
.slider .copy{pointer-events:auto}
.slider.has-coin .copy{max-width:min(640px,calc(100% - var(--hero-coin) - 28px))}
@media (max-width:820px){
  .slider{--hero-coin:min(58vw,230px)}
  .slider .hero-coin-wrap{align-self:start;justify-content:center;padding-block:22px 0}
  .slider.has-coin .wrap:not(.hero-coin-wrap){align-self:end;padding-top:calc(var(--hero-coin) + 72px)}
  .slider.has-coin .copy{max-width:none}
}

/* photos that ship with the site */
.portrait-box{position:relative;max-width:420px;width:100%;justify-self:center}
.portrait{margin:0;padding:0;background:#fff;border:1px solid var(--line);box-shadow:0 18px 44px rgba(11,23,53,.16)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.portrait-coin{--coin:clamp(96px,26%,132px);position:absolute;right:-10px;bottom:-18px}
.feature{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:28px;align-items:start}
.feature .poster img,.banner{width:100%;height:auto;display:block;border-radius:var(--r);border:1px solid var(--line);box-shadow:0 12px 32px rgba(11,23,53,.14)}
.banner{margin-bottom:24px}
.dham-photos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:28px}
.dham-photos img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:var(--r);border:1px solid var(--line)}
/* hero with photos: the photo fills the right side (desktop) or the top (phone), so faces are never under the text */
.slide.photo{margin-left:40%;background-position:center 22%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%);mask-image:linear-gradient(90deg,transparent 0,#000 26%)}
.slider:not(.has-coin) .copy{max-width:min(560px,46%)}
.slider:not(.has-coin)::after{background:linear-gradient(90deg,rgba(6,11,29,.5) 0%,rgba(6,11,29,.2) 45%,rgba(6,11,29,0) 62%)}
@media (max-width:900px){
  .feature{grid-template-columns:1fr}
  .dham-photos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .slide.photo{margin-left:0;height:min(78vw,420px);align-self:start;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 62%,transparent 100%)}
  .slider:not(.has-coin) .copy{max-width:none}
  .slider:not(.has-coin) .wrap:not(.hero-coin-wrap){align-self:end;padding-top:min(70vw,380px)}
  .slider:not(.has-coin)::after{background:none}
}
/* ONO mode: the room cards are for looking only; availability and booking happen on ONO */
#room-form.ono .room input[type=radio]{display:none}