/* ═══════════════════════════════════════════════
   सनातन ध्वनि — Sanatana Dhwani
   ═══════════════════════════════════════════════ */

:root{
  /* these three are rewritten by scene.js as the hours turn */
  --sky-1:#1a0f0a;
  --sky-2:#3d1d0f;
  --sky-3:#0a0605;
  --glow:#f2a93b;
  --glow-soft:rgba(242,169,59,.35);

  --ink:#f7ead6;
  --ink-2:rgba(247,234,214,.68);
  --ink-3:rgba(247,234,214,.42);
  --accent:#f2a93b;
  --accent-deep:#d4541e;
  --brass:#e0b544;

  --panel:rgba(22,13,8,.62);
  --panel-2:rgba(30,18,11,.78);
  --line:rgba(247,234,214,.14);

  --r-sm:10px;
  --r-md:16px;
  --r-lg:26px;
  --r-pill:999px;

  --gut:clamp(16px,4vw,44px);
  --player-h:96px;

  --f-display:'Martel',Georgia,serif;
  --f-ui:'Mukta','Segoe UI',system-ui,sans-serif;
}

/* বাংলা needs its own faces — Martel and Mukta carry no Bengali */
:root[data-lang="bn"]{
  --f-display:'Noto Serif Bengali','Martel',Georgia,serif;
  --f-ui:'Hind Siliguri','Mukta','Segoe UI',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}

body{
  min-height:100dvh;
  font-family:var(--f-ui);
  color:var(--ink);
  background:#0a0605;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ol,ul{margin:0;padding:0;list-style:none}

::selection{background:var(--accent);color:#1a0f0a}

/* ───────────── ambient scene ───────────── */
.scene{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}

.sky{
  position:absolute;inset:-10%;
  background:
    radial-gradient(120% 80% at 50% 96%, var(--sky-2) 0%, transparent 62%),
    linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 58%, var(--sky-3) 100%);
  transition:background 3s ease;
}

.sun{
  position:absolute;left:50%;bottom:16%;
  width:min(46vw,440px);aspect-ratio:1;
  transform:translate(-50%,0);
  border-radius:50%;
  background:radial-gradient(circle, var(--glow) 0%, var(--glow-soft) 34%, transparent 68%);
  filter:blur(6px);
  opacity:.75;
  transition:background 3s ease,bottom 3s ease,opacity 3s ease;
  animation:breathe 14s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{transform:translate(-50%,0) scale(1);opacity:.7}
  50%    {transform:translate(-50%,0) scale(1.06);opacity:.85}
}

.haze{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(10,6,5,.55) 78%,rgba(10,6,5,.92) 100%);
}

.skyline{position:absolute;inset:0;width:100%;height:100%;opacity:.95}

.embers{position:absolute;inset:0;width:100%;height:100%}

.grain{
  position:absolute;inset:-200%;
  opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.55'/></svg>");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}      20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}  60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,3%)}   100%{transform:translate(0,0)}
}

.vignette{
  position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 45%,transparent 38%,rgba(6,3,2,.62) 100%);
}

/* ───────────── top bar ─────────────
   brand (and the way home) · ভক্ত · nav or ☰ */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:12px;
  padding:10px var(--gut);
  padding-top:max(10px,env(safe-area-inset-top));
  background:linear-gradient(to bottom,rgba(8,4,2,.62),rgba(8,4,2,.22) 62%,transparent);
}

/* ─── the mark, and the way home from anywhere ───
   No wordmark: the seal carries it, and the site's name is already the
   first thing on the home page. */
.tb-left{display:flex;align-items:center;gap:11px;min-width:0}

.brand{
  display:block;flex:none;line-height:0;border-radius:12px;
  transition:transform .22s,box-shadow .22s,filter .22s;
}
.brand-mark{
  width:38px;height:38px;display:block;border-radius:12px;
  box-shadow:0 2px 16px rgba(0,0,0,.55),0 0 0 1px rgba(242,169,59,.16) inset;
}
.brand:hover{transform:translateY(-1px);filter:saturate(1.12)}
.brand:hover .brand-mark{box-shadow:0 4px 22px rgba(0,0,0,.55),0 0 0 1px rgba(242,169,59,.5)}
.brand:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.tb-time{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.clock{
  font-family:var(--f-ui);font-weight:300;
  font-size:12.5px;letter-spacing:.16em;
  color:var(--ink-2);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.tb-where{display:flex;align-items:baseline;gap:5px;min-width:0;margin-top:2px}
.prahar,.tb-place{
  font-style:normal;
  font-size:9.5px;font-weight:600;
  letter-spacing:.12em;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tb-place{opacity:.72}
.tb-place:not(:empty)::before{content:"· "}

/* said only to screen readers — the sheet needs a name, not a caption */
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ─── ভক্ত ─── */
/* Pinned to the middle of the page rather than centred in a grid cell,
   so it sits dead centre whatever is to either side of it. The nav
   below waits for 1240px precisely so it never reaches this. */
.topbar .bhakta-chip{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  margin-top:calc(env(safe-area-inset-top) / 2);
}
.bhakta-chip{
  display:inline-flex;align-items:center;gap:7px;
  cursor:pointer;color:inherit;font:inherit;
  transition:background .2s,border-color .2s;
  font-size:12px;color:var(--ink-2);
  padding:5px 13px;border-radius:var(--r-pill);
  background:rgba(12,7,4,.4);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(247,234,214,.08);
  white-space:nowrap;
}
.bhakta-chip:hover{background:rgba(242,169,59,.14);border-color:rgba(242,169,59,.4)}
.bhakta-chip:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.bhakta-live b{color:var(--accent);font-weight:700}
.bhakta-dot{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 var(--glow-soft);
  animation:ping 2.6s ease-out infinite;
}
@keyframes ping{
  0%{box-shadow:0 0 0 0 rgba(242,169,59,.55)}
  70%{box-shadow:0 0 0 9px rgba(242,169,59,0)}
  100%{box-shadow:0 0 0 0 rgba(242,169,59,0)}
}

/* ─── nav ─── */
.tb-nav{display:none;gap:7px;align-items:center}
.tb-end{display:flex;gap:8px;align-items:center;justify-self:end;min-width:0}
.tb-end > *{flex:none}

.langsw{
  display:flex;align-items:center;gap:2px;
  padding:3px;border-radius:var(--r-pill);
  background:rgba(12,7,4,.46);
  border:1px solid rgba(247,234,214,.13);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.lang{
  padding:4px 10px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:600;line-height:1.35;
  color:var(--ink-3);white-space:nowrap;
  transition:background .18s,color .18s;
}
.lang:hover{color:var(--ink)}
.lang.on{background:var(--accent);color:#1a0f0a}

.btn{
  font-size:12.5px;font-weight:500;letter-spacing:.02em;
  padding:7px 14px;border-radius:var(--r-pill);
  background:rgba(12,7,4,.46);
  border:1px solid rgba(247,234,214,.13);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .2s,border-color .2s,transform .2s;
  white-space:nowrap;
}
.btn:hover{background:rgba(242,169,59,.16);border-color:rgba(242,169,59,.42);transform:translateY(-1px)}
.btn.on{background:rgba(242,169,59,.2);border-color:rgba(242,169,59,.5);color:var(--ink)}

/* ─── ☰ ─── */
.menu-btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 14px 7px 12px;border-radius:var(--r-pill);
  background:rgba(12,7,4,.5);
  border:1px solid rgba(247,234,214,.16);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--ink);font-size:12.5px;font-weight:500;
  transition:background .2s,border-color .2s;
}
.menu-btn:hover{background:rgba(242,169,59,.16);border-color:rgba(242,169,59,.42)}
.mb-bars{display:flex;flex-direction:column;gap:3.5px;width:15px}
.mb-bars i{display:block;height:1.6px;background:var(--accent);border-radius:2px;transition:width .2s}
.mb-bars i:nth-child(2){width:72%}
body.menu-open .mb-bars i:nth-child(2){width:100%}

/* ─── the sheet behind ☰ ─── */
.drawer{position:fixed;inset:0;z-index:60}
.drawer[hidden]{display:none}
.dr-scrim{
  position:absolute;inset:0;
  background:rgba(6,3,2,.66);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  animation:fade .22s ease both;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.dr-sheet{
  position:absolute;top:0;right:0;bottom:0;
  width:min(360px,88vw);
  display:flex;flex-direction:column;gap:14px;
  padding:max(16px,env(safe-area-inset-top)) 18px calc(var(--player-h) + 24px);
  overflow-y:auto;overscroll-behavior:contain;
  background:linear-gradient(180deg,#1b0f09 0%,#120906 100%);
  border-left:1px solid rgba(247,234,214,.12);
  box-shadow:-24px 0 70px rgba(0,0,0,.6);
  animation:slidein .26s cubic-bezier(.22,.8,.3,1) both;
}
@keyframes slidein{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}

.dr-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dr-brand{display:flex;align-items:center;gap:10px;min-width:0}
.dr-brand img{
  width:34px;height:34px;border-radius:10px;flex:none;
  box-shadow:0 2px 14px rgba(0,0,0,.5),0 0 0 1px rgba(242,169,59,.18) inset;
}
.dr-x{
  width:34px;height:34px;flex:none;border-radius:50%;
  border:1px solid rgba(247,234,214,.16);
  background:rgba(247,234,214,.05);
  color:var(--ink-2);font-size:14px;line-height:1;
  transition:background .2s,color .2s;
}
.dr-x:hover{background:rgba(247,234,214,.12);color:var(--ink)}

.dr-bhakta{align-self:flex-start}

.dr-nav{display:flex;flex-direction:column;gap:7px}
.dr-link{
  display:block;padding:12px 15px;border-radius:var(--r-md);
  background:rgba(247,234,214,.035);
  border:1px solid rgba(247,234,214,.09);
  transition:background .18s,border-color .18s,transform .18s;
}
.dr-link:hover{background:rgba(242,169,59,.12);border-color:rgba(242,169,59,.4);transform:translateX(2px)}
.dr-link.on{background:rgba(242,169,59,.16);border-color:rgba(242,169,59,.5)}
.dr-link b{display:block;font-size:15.5px;font-weight:600;line-height:1.3}
.dr-link i{display:block;font-style:normal;font-size:11.5px;color:var(--ink-3);margin-top:4px;line-height:1.5}
.dr-link.btn-pujo b{color:var(--accent)}

.dr-langs{display:flex;gap:7px;margin-top:2px}
.dr-langs .lang{
  flex:1;text-align:center;padding:9px 6px;font-size:12.5px;
  border:1px solid rgba(247,234,214,.14);
}
.dr-install{
  padding:11px 16px;border-radius:var(--r-pill);
  border:1px solid rgba(242,169,59,.45);
  background:rgba(242,169,59,.12);color:var(--accent);
  font-size:13px;font-weight:600;
}

/* ───────────── views ───────────── */
#main{position:relative;z-index:10}
.view{display:block}
.view[hidden]{display:none}

/* ─── home ─── */
.view-home{
  min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:104px var(--gut) calc(var(--player-h) + 56px);
  position:relative;
}

.yantra{
  position:absolute;top:50%;left:50%;
  width:min(96vw,760px);aspect-ratio:1;
  transform:translate(-50%,-58%);
  opacity:.17;pointer-events:none;
  animation:turn 220s linear infinite;
}
.yantra svg{width:100%;height:100%}
@keyframes turn{to{transform:translate(-50%,-58%) rotate(360deg)}}

.wordmark{
  position:relative;
  margin:0;
  font-family:var(--f-display);font-weight:900;
  font-size:clamp(3.1rem,15.5vw,11rem);
  line-height:.84;
  letter-spacing:-.01em;
  display:flex;flex-direction:column;
  text-shadow:0 6px 44px rgba(0,0,0,.6),0 2px 10px rgba(0,0,0,.5);
}
.wordmark span{display:block}
.wordmark span:last-child{color:var(--accent);text-shadow:0 6px 48px rgba(212,84,30,.45),0 2px 10px rgba(0,0,0,.55)}

.kicker{
  position:relative;
  margin:22px 0 0;
  font-size:clamp(9px,1.5vw,11.5px);
  font-weight:600;letter-spacing:.34em;
  color:var(--ink-3);
  text-shadow:0 1px 12px rgba(0,0,0,.75);
}

.verse{
  position:relative;
  margin:34px 0 0;min-height:60px;
  display:flex;flex-direction:column;gap:6px;align-items:center;
}
.verse-line{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.1rem,3.4vw,1.75rem);
  color:var(--ink);opacity:0;
  transition:opacity 1.1s ease;
  text-shadow:0 2px 20px rgba(0,0,0,.7);
}
.verse-mean{
  font-size:clamp(11px,1.7vw,13px);
  letter-spacing:.1em;color:var(--ink-3);
  opacity:0;transition:opacity 1.1s ease .15s;
  font-style:italic;
}
.verse.on .verse-line,.verse.on .verse-mean{opacity:1}

.lede{position:relative;max-width:46ch;margin:34px auto 0}
.lede p{
  margin:0;font-size:clamp(13.5px,1.9vw,15.5px);
  line-height:1.68;color:var(--ink-2);font-weight:300;
  text-shadow:0 1px 14px rgba(0,0,0,.7);
}

.rot-head{
  position:relative;
  margin:52px 0 16px;
  font-size:10px;font-weight:700;letter-spacing:.36em;
  color:var(--ink-3);
}

.rot-strip{
  position:relative;
  display:flex;gap:9px;flex-wrap:wrap;justify-content:center;
  max-width:820px;
}

.rot-chip{
  display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:9px 17px;border-radius:var(--r-pill);
  background:rgba(12,7,4,.5);
  border:1px solid rgba(247,234,214,.13);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .2s,border-color .2s,transform .2s;
  text-align:left;
}
.rot-chip:hover{background:rgba(242,169,59,.15);border-color:rgba(242,169,59,.45);transform:translateY(-2px)}
.rot-chip.now{border-color:rgba(242,169,59,.6);background:rgba(242,169,59,.14)}
.rot-chip b{font-size:14px;font-weight:600;line-height:1.2}
.rot-chip i{font-style:normal;font-size:9px;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase}

.rot-more{border-style:dashed;border-color:rgba(247,234,214,.24)}
.rot-more b{font-weight:500;color:var(--ink-2)}
.rot-more:hover b{color:var(--ink)}

.home-links{position:relative;display:flex;gap:10px;margin-top:28px;flex-wrap:wrap;justify-content:center}
.pill{
  font-size:12.5px;padding:9px 20px;border-radius:var(--r-pill);
  border:1px solid rgba(247,234,214,.2);
  transition:background .2s,border-color .2s;
}
.pill:hover{background:rgba(247,234,214,.1);border-color:rgba(247,234,214,.4)}

/* ─── list pages ─── */
.view-list{
  max-width:860px;margin:0 auto;
  padding:110px var(--gut) calc(var(--player-h) + 72px);
  min-height:100dvh;
}

.back{
  display:inline-block;font-size:12.5px;color:var(--ink-3);
  letter-spacing:.06em;margin-bottom:26px;
  transition:color .2s;
}
.back:hover{color:var(--accent)}

.page-title{
  margin:0;font-family:var(--f-display);font-weight:900;
  font-size:clamp(1.9rem,6.5vw,3.4rem);line-height:1.08;
  text-shadow:0 4px 30px rgba(0,0,0,.55);
}
.page-title .pt-main{display:block}
.page-title .pt-sub{
  display:block;font-family:var(--f-ui);font-weight:600;
  font-size:10px;letter-spacing:.32em;color:var(--ink-3);
  margin-top:11px;
}
.page-sub{
  margin:14px 0 0;max-width:56ch;
  font-size:14px;line-height:1.65;color:var(--ink-2);font-weight:300;
}

.play-all{
  margin:26px 0 8px;
  padding:11px 24px;border-radius:var(--r-pill);
  background:var(--accent);color:#1a0f0a;
  font-weight:600;font-size:13.5px;
  transition:filter .2s,transform .2s;
  box-shadow:0 6px 26px rgba(242,169,59,.28);
}
.play-all:hover{filter:brightness(1.08);transform:translateY(-1px)}

.rot-grid{
  display:grid;gap:12px;margin-top:30px;
  grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
}
.rot-card{
  display:block;padding:22px;border-radius:var(--r-md);
  background:var(--panel);
  border:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:background .22s,border-color .22s,transform .22s;
}
.rot-card:hover{background:var(--panel-2);border-color:rgba(242,169,59,.4);transform:translateY(-3px)}
.rot-card h3{
  margin:0;font-family:var(--f-display);font-weight:700;
  font-size:1.32rem;line-height:1.25;
}
.rot-card .en{
  display:block;font-size:9.5px;letter-spacing:.24em;
  color:var(--ink-3);margin-top:7px;text-transform:uppercase;
}
.rot-card p{margin:13px 0 0;font-size:12.8px;line-height:1.6;color:var(--ink-2);font-weight:300}
.rot-card .n{
  display:inline-block;margin-top:14px;font-size:10.5px;
  letter-spacing:.16em;color:var(--accent);
}

.search{
  width:100%;margin:24px 0 6px;
  padding:13px 18px;border-radius:var(--r-pill);
  background:rgba(12,7,4,.5);color:var(--ink);
  border:1px solid var(--line);
  font-family:var(--f-ui);font-size:14px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  outline:none;transition:border-color .2s;
}
.search::placeholder{color:var(--ink-3)}
.search:focus{border-color:rgba(242,169,59,.55)}

.tracklist{margin-top:18px;display:flex;flex-direction:column}

.trk{
  display:grid;
  grid-template-columns:30px 1fr auto;
  align-items:center;gap:14px;
  padding:12px 14px;border-radius:var(--r-sm);
  cursor:pointer;
  border:1px solid transparent;
  transition:background .16s,border-color .16s;
  text-align:left;width:100%;
}
.trk:hover{background:rgba(247,234,214,.06);border-color:rgba(247,234,214,.09)}
.trk.on{background:rgba(242,169,59,.13);border-color:rgba(242,169,59,.34)}

.trk-i{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;text-align:center}
.trk.on .trk-i{color:var(--accent)}

.trk-m{min-width:0}
.trk-t{
  display:block;
  font-size:15px;font-weight:400;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.trk.on .trk-t{color:var(--accent)}
.trk-b{
  display:block;
  font-size:11.5px;color:var(--ink-3);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.trk-d{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}

.empty{padding:40px 6px;color:var(--ink-3);font-size:14px;text-align:center}

/* ───────────── footer ───────────── */
.foot{
  position:relative;z-index:10;
  max-width:640px;margin:0 auto;
  padding:0 var(--gut) calc(var(--player-h) + 34px);
  text-align:center;
}
.foot p{margin:0;font-size:11px;line-height:1.75;color:var(--ink-3);font-weight:300}
.foot-om{margin-top:16px !important;font-size:19px;color:var(--ink-3);opacity:.5}

/* ───────────── player ───────────── */
.player{
  position:fixed;z-index:50;
  left:50%;bottom:max(16px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:min(calc(100vw - 2*var(--gut)),900px);
  display:grid;
  /* six children, so every one gets a named slot — art/controls/volume/
     rotation span both rows, title sits over the seek bar */
  grid-template-columns:auto minmax(0,1fr) auto auto auto;
  grid-template-areas:
    "art meta ctl vol rot"
    "art seek ctl vol rot";
  align-items:center;
  gap:2px 16px;
  padding:11px 18px;
  border-radius:var(--r-lg);
  background:rgba(18,10,6,.76);
  border:1px solid rgba(247,234,214,.13);
  backdrop-filter:blur(22px) saturate(1.3);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);
  box-shadow:0 18px 60px rgba(0,0,0,.55),0 1px 0 rgba(247,234,214,.07) inset;
  animation:rise .55s cubic-bezier(.2,.8,.2,1);
}
.player[hidden]{display:none}
@keyframes rise{from{opacity:0;transform:translate(-50%,22px)}to{opacity:1;transform:translate(-50%,0)}}

.pl-art{
  grid-area:art;align-self:center;
  position:relative;width:52px;height:52px;flex:none;
  border-radius:12px;overflow:hidden;
  background:linear-gradient(145deg,#3a1d0e,#1a0d06);
  box-shadow:0 3px 14px rgba(0,0,0,.45);
}
.pl-art img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s}
.pl-art img.on{opacity:1}
.pl-om{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:23px;color:var(--accent);opacity:.65;
}
.pl-art img.on + .pl-om{opacity:0}

.pl-meta{grid-area:meta;align-self:end;min-width:0}
.pl-title{
  font-size:14.5px;font-weight:400;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pl-by{
  font-size:11.5px;color:var(--ink-3);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.pl-controls{grid-area:ctl;display:flex;align-items:center;gap:4px}

.ctl{
  width:34px;height:34px;flex:none;
  display:grid;place-items:center;border-radius:50%;
  transition:background .18s,transform .18s;
}
.ctl:hover{background:rgba(247,234,214,.11)}
.ctl:active{transform:scale(.92)}
.ctl svg{
  width:19px;height:19px;
  fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}
#btnPrev svg path:last-child,#btnNext svg path:last-child{fill:currentColor}

.ctl-main{
  width:42px;height:42px;
  background:var(--ink);color:#160d07;
}
.ctl-main:hover{background:#fff;transform:scale(1.05)}
.ctl-main svg{width:17px;height:17px;stroke-width:2.1}
.ctl-main .i-play{fill:currentColor;stroke:none;margin-left:2px}
.ctl-main .i-pause,.ctl-main .i-load{display:none}
.ctl-main .i-load{stroke-dasharray:14 36;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.player.playing .ctl-main .i-play{display:none}
.player.playing .ctl-main .i-pause{display:block}
.player.loading .ctl-main .i-play,
.player.loading .ctl-main .i-pause{display:none}
.player.loading .ctl-main .i-load{display:block}

.ctl-sm{width:28px;height:28px}
.ctl-sm svg{width:16px;height:16px}
.i-muted{display:none}
.player.muted .i-vol{display:none}
.player.muted .i-muted{display:block}

.pl-seek{grid-area:seek;align-self:start;display:flex;align-items:center;gap:9px;min-width:0}
.t{font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;flex:none;width:32px}
.t:last-child{text-align:right}

.bar{
  position:relative;flex:1;height:16px;
  display:flex;align-items:center;cursor:pointer;
  touch-action:none;
}
.bar::before{
  content:'';position:absolute;left:0;right:0;height:3px;
  border-radius:2px;background:rgba(247,234,214,.2);
}
.bar-fill{
  position:absolute;left:0;height:3px;width:0;
  border-radius:2px;background:var(--accent);
  box-shadow:0 0 10px rgba(242,169,59,.5);
}
.bar-knob{
  position:absolute;left:0;width:10px;height:10px;
  border-radius:50%;background:var(--ink);
  transform:translateX(-50%);
  opacity:0;transition:opacity .18s;
  box-shadow:0 1px 5px rgba(0,0,0,.5);
}
.bar:hover .bar-knob,.bar:focus-visible .bar-knob{opacity:1}
.bar:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

.pl-vol{grid-area:vol;display:flex;align-items:center;gap:7px}
.bar-vol{width:66px;flex:none}

.pl-rot{
  grid-area:rot;
  font-size:9.5px;letter-spacing:.18em;color:var(--ink-3);
  text-transform:uppercase;white-space:nowrap;
  padding-left:4px;border-left:1px solid var(--line);
  padding-block:3px;
}

/* ───────────── live ─────────────
   A live stream has no length and nowhere to seek to, so the bar and
   the timestamps give way to a broadcast badge. */
.live-tag{
  display:none;align-items:center;gap:7px;
  font-size:10.5px;letter-spacing:.05em;color:var(--ink-3);
  white-space:nowrap;min-width:0;
}
.live-tag b{color:#ff6b4a;font-weight:700;letter-spacing:.14em}
.live-tag i{font-style:normal;overflow:hidden;text-overflow:ellipsis}
.live-dot{
  width:7px;height:7px;border-radius:50%;background:#ff6b4a;flex:none;
  animation:ping2 2.2s ease-out infinite;
}
@keyframes ping2{
  0%{box-shadow:0 0 0 0 rgba(255,107,74,.6)}
  70%{box-shadow:0 0 0 8px rgba(255,107,74,0)}
  100%{box-shadow:0 0 0 0 rgba(255,107,74,0)}
}
.player.live .pl-seek .bar,
.player.live .pl-seek .t{display:none}
.player.live .live-tag{display:flex}

/* a track row that is a live stream */
.trk-live{
  display:inline-flex;align-items:center;gap:5px;
  font-size:9.5px;font-weight:700;letter-spacing:.12em;color:#ff6b4a;
}
.trk-live::before{
  content:'';width:6px;height:6px;border-radius:50%;background:#ff6b4a;
  animation:ping2 2.2s ease-out infinite;
}

/* the live rotation, called out among the others */
.rot-card.is-live{border-color:rgba(255,107,74,.38)}
.rot-card.is-live:hover{border-color:rgba(255,107,74,.6)}
.rot-card .live-badge,.rot-chip .live-badge{
  display:inline-flex;align-items:center;gap:5px;
  margin-left:8px;padding:2px 8px;border-radius:var(--r-pill);
  background:rgba(255,107,74,.16);border:1px solid rgba(255,107,74,.4);
  font-size:9px;font-weight:700;letter-spacing:.1em;color:#ff6b4a;
  vertical-align:middle;
}
.rot-card .live-badge::before,.rot-chip .live-badge::before{
  content:'';width:5px;height:5px;border-radius:50%;background:#ff6b4a;
}
.rot-chip.is-live{border-color:rgba(255,107,74,.42)}

/* ───────────── gate ───────────── */
.gate{
  position:fixed;inset:0;z-index:100;
  display:grid;place-items:center;
  padding:var(--gut);
  background:rgba(8,4,3,.78);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  transition:opacity .6s ease,visibility .6s;
}
.gate.gone{opacity:0;visibility:hidden;pointer-events:none}

.gate-inner{text-align:center;max-width:430px}

.gate-langs{
  display:flex;justify-content:center;gap:6px;
  margin-bottom:34px;flex-wrap:wrap;
}
.gate-langs .lang{
  padding:8px 18px;font-size:13px;
  border:1px solid rgba(247,234,214,.16);
}
.gate-langs .lang.on{border-color:transparent}
.gate-om{
  font-size:clamp(46px,12vw,78px);color:var(--accent);
  line-height:1;margin-bottom:22px;
  text-shadow:0 0 60px rgba(242,169,59,.5);
  animation:breathe2 4.5s ease-in-out infinite;
}
@keyframes breathe2{
  0%,100%{opacity:.78;transform:scale(1)}
  50%{opacity:1;transform:scale(1.05)}
}
.gate-inner h2{
  margin:0;font-family:var(--f-display);font-weight:900;
  font-size:clamp(1.7rem,7vw,2.5rem);
}
.gate-line{
  margin:14px 0 0;font-size:13px;color:var(--ink-2);
  font-weight:300;line-height:1.6;
}
.gate-btn{
  margin-top:30px;padding:14px 32px;
  border-radius:var(--r-pill);
  background:var(--accent);color:#180e07;
  font-weight:600;font-size:14px;letter-spacing:.02em;
  box-shadow:0 8px 34px rgba(242,169,59,.34);
  transition:filter .2s,transform .2s;
}
.gate-btn:hover{filter:brightness(1.08);transform:translateY(-2px)}
.gate-note{margin:20px 0 0;font-size:10.5px;color:var(--ink-3);line-height:1.6}

/* ───────────── misc ───────────── */
.yt-host{position:fixed;width:1px;height:1px;left:-9999px;top:0;overflow:hidden;opacity:0;pointer-events:none}

.toast{
  position:fixed;z-index:90;
  left:50%;bottom:calc(var(--player-h) + 30px);
  transform:translate(-50%,14px);
  padding:10px 20px;border-radius:var(--r-pill);
  background:rgba(22,13,8,.94);
  border:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  font-size:12.5px;color:var(--ink-2);
  opacity:0;pointer-events:none;
  transition:opacity .3s,transform .3s;
  max-width:calc(100vw - 32px);text-align:center;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ───────────── Indic typography ─────────────
   The airy letter-spacing that suits small-caps Latin pulls Devanagari
   and Bengali conjuncts apart, so it is dialled back per script. */
:root[data-lang="hi"] .kicker,
:root[data-lang="bn"] .kicker{letter-spacing:.13em}

:root[data-lang="hi"] .prahar,
:root[data-lang="bn"] .prahar{letter-spacing:.06em}

:root[data-lang="hi"] .rot-head,
:root[data-lang="bn"] .rot-head{letter-spacing:.15em}

:root[data-lang="hi"] .rot-card .n,
:root[data-lang="bn"] .rot-card .n{letter-spacing:.03em}

:root[data-lang="hi"] .pl-rot,
:root[data-lang="bn"] .pl-rot{letter-spacing:.03em;text-transform:none;font-size:10.5px}

:root[data-lang="hi"] .verse-mean,
:root[data-lang="bn"] .verse-mean{letter-spacing:.01em;font-style:normal}

:root[data-lang="hi"] .back,
:root[data-lang="bn"] .back{letter-spacing:0}

/* both scripts hang glyphs above and below the line — give them room */
:root[data-lang="hi"] .rot-card h3,
:root[data-lang="bn"] .rot-card h3{line-height:1.4}
:root[data-lang="hi"] .trk-t,
:root[data-lang="bn"] .trk-t{line-height:1.45}
:root[data-lang="hi"] .wordmark{line-height:.92}
:root[data-lang="bn"] .wordmark{line-height:1.02}
:root[data-lang="bn"] .page-title{line-height:1.2}

/* an empty romanised caption should not leave a gap */
.rot-chip i:empty,.rot-card .en:empty,.page-title .pt-sub:empty{display:none}

/* in English the romanised sub-caption would just repeat the heading */
:root[data-lang="en"] .page-title .pt-sub{display:none}

/* ───────────── narrow ───────────── */
@media (max-width:860px){
  :root{--player-h:150px}

  .player{
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:
      "art meta vol"
      "seek seek seek"
      "ctl ctl ctl";
    gap:10px 14px;
    padding:12px 16px 14px;
  }
  .pl-art{grid-area:art}
  .pl-meta{grid-area:meta}
  .pl-vol{grid-area:vol}
  .pl-seek{grid-area:seek;min-width:0}
  .pl-controls{grid-area:ctl;justify-content:center;gap:18px}
  .pl-rot{display:none}
  .bar-vol{width:48px}
}

/* ─── what the bar shows, by width ───
   Wide: brand · ভক্ত · the six sections inline.
   Medium: brand · ভক্ত · ☰.
   Phone: brand · ☰, with ভক্ত inside the menu and in the foot. */
/* The inline nav only appears where six names plus the switcher still
   leave ভক্ত the middle of the bar to itself. Measured in English,
   which is the widest of the three. */
@media (min-width:1400px){
  .tb-nav{display:flex}
  .tb-nav .btn{padding:7px 12px;font-size:12px}
  .menu-btn{display:none}
}
/* ভক্ত holds the middle of the bar at every width; what gives way
   around it is the time, then the place under it */
@media (max-width:620px){
  .topbar{gap:8px}
  .bhakta-chip{padding:5px 10px;font-size:11px;gap:6px}
  .tb-place{display:none}
}
@media (max-width:430px){
  /* the clock stays; the prahar and the place name go, and are read
     on the পঞ্জিকা page instead */
  .tb-where{display:none}
  .clock{font-size:10.5px;letter-spacing:.08em}
}
@media (max-width:340px){
  .tb-time{display:none}
}
@media (max-width:560px){
  .topbar{gap:8px;padding-inline:14px}
  .tb-left{gap:9px}
  .brand-mark{width:34px;height:34px;border-radius:10px}
  .clock{font-size:11px;letter-spacing:.1em}
  .prahar{font-size:9px;letter-spacing:.06em;max-width:14ch}
  .menu-btn{padding:7px 11px;gap:0}
  .mb-lbl{display:none}
  /* a three-way switcher will not fit beside ☰, so in the bar it
     collapses to the active language and cycles on tap — the menu
     still shows all three */
  .langsw{padding:2px}
  .lang{padding:5px 9px;font-size:11px}
  .langsw .lang:not(.on){display:none}
  .dr-langs .lang{display:block}
  .rot-chip{padding:8px 14px}
  .rot-chip b{font-size:13px}
  .trk{grid-template-columns:24px 1fr auto;gap:10px;padding:11px 8px}
  .trk-t{font-size:14px}
}
@media (max-width:360px){
  .topbar{padding-inline:11px;gap:6px}
  .brand-mark{width:32px;height:32px}
  /* ভক্ত keeps the middle — the switcher is in the menu, spelled out */
  .topbar .langsw{display:none}
  .bhakta-chip{padding:5px 9px;font-size:10.5px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .yantra{animation:none}
}

/* ═══════════════════════════════════════════════
   panchang · parva · vidhi
   ═══════════════════════════════════════════════ */

/* ── the strip on the home page ── */
.today-strip{
  position:relative;
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
  margin-top:40px;width:100%;max-width:760px;
}
.today-strip a{
  display:flex;flex-direction:column;gap:3px;
  padding:12px 20px;border-radius:var(--r-md);
  background:rgba(12,7,4,.5);
  border:1px solid rgba(247,234,214,.13);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .2s,border-color .2s,transform .2s;
  text-align:left;min-width:0;
}
.today-strip a:hover{background:rgba(242,169,59,.14);border-color:rgba(242,169,59,.45);transform:translateY(-2px)}
.today-strip b{font-size:14.5px;font-weight:600;line-height:1.35}
.today-strip i{font-style:normal;font-size:11px;color:var(--ink-3);line-height:1.4}
.ts-main{border-color:rgba(242,169,59,.34) !important}
.ts-main b{color:var(--accent)}

/* which day the card is about — said, not implied */
.ts-k{
  display:block;margin-bottom:7px;
  font-size:9px;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-3);
}
.ts-main .ts-k{color:var(--accent);opacity:.92}
:root[data-lang="bn"] .ts-k,
:root[data-lang="hi"] .ts-k{letter-spacing:.1em;text-transform:none;font-size:10px}

.pill-hi{border-color:rgba(242,169,59,.45);color:var(--accent)}

/* ── place picker ── */
.place-row{display:flex;align-items:center;gap:10px;margin:24px 0 4px;flex-wrap:wrap}
.place-lbl{font-size:10px;font-weight:700;letter-spacing:.2em;color:var(--ink-3);text-transform:uppercase}
.place-sel{
  padding:9px 14px;border-radius:var(--r-pill);
  background:rgba(12,7,4,.6);color:var(--ink);
  border:1px solid var(--line);
  font-family:var(--f-ui);font-size:13.5px;
  outline:none;cursor:pointer;
}
.place-sel:focus{border-color:rgba(242,169,59,.55)}
.place-sel option{background:#1a0f0a;color:var(--ink)}
.place-sel optgroup{background:#140b07;color:var(--accent);font-weight:700;font-style:normal}
.place-auto{
  font-size:10.5px;color:var(--ink-3);
  display:inline-flex;align-items:center;gap:6px;
}
.place-auto[hidden]{display:none}
.place-auto::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--accent);opacity:.75;flex:none;
}

/* ── panchang card ── */
.pc-head{margin-top:26px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.pc-date{font-size:12.5px;color:var(--ink-3);letter-spacing:.04em}
.pc-sum{
  margin-top:7px;font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.25rem,4.5vw,1.9rem);line-height:1.3;color:var(--accent);
}

.pc-l{
  display:block;font-size:9.5px;font-weight:700;letter-spacing:.2em;
  color:var(--ink-3);text-transform:uppercase;margin-bottom:5px;
}
:root[data-lang="hi"] .pc-l,:root[data-lang="bn"] .pc-l{letter-spacing:.08em;text-transform:none;font-size:10.5px}

.pc-special{
  margin:20px 0 4px;padding:18px;border-radius:var(--r-md);
  background:var(--panel);border:1px solid var(--line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.pc-ev{display:flex;flex-direction:column;gap:11px}
.pc-ev li{
  padding-left:14px;border-left:2px solid var(--accent);
}
.pc-ev li.vrat{border-left-color:rgba(247,234,214,.3)}
.pc-ev b{display:block;font-size:15.5px;font-weight:600}
.pc-ev i{display:block;font-style:normal;font-size:12.5px;color:var(--ink-2);margin-top:3px;line-height:1.5}
.pc-none{margin:0;font-size:14px;color:var(--ink-2);font-weight:300}

.pc-deity{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
}
.pc-deity b{font-size:15px;font-weight:600;color:var(--dc,var(--accent))}
.pc-deity i{display:block;font-style:normal;font-size:12.5px;color:var(--ink-2);margin-top:3px;line-height:1.5}

.pc-grid{
  display:grid;gap:1px;margin-top:20px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;
}
.pc-cell{padding:14px 16px;background:rgba(18,10,6,.72)}
.pc-v{display:block;font-size:15px;font-weight:500;line-height:1.35}
.pc-s{display:block;font-size:10.5px;color:var(--ink-3);margin-top:4px}

.pc-sec{
  margin:28px 0 12px;font-size:10px;font-weight:700;
  letter-spacing:.28em;color:var(--ink-3);text-transform:uppercase;
}
:root[data-lang="hi"] .pc-sec,:root[data-lang="bn"] .pc-sec{letter-spacing:.1em;text-transform:none;font-size:11.5px}

.pc-times{display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.pc-time{
  padding:13px 16px;border-radius:var(--r-sm);
  background:rgba(18,10,6,.6);border:1px solid var(--line);border-left-width:3px;
}
.pc-time.good{border-left-color:#5fbf7a}
.pc-time.bad{border-left-color:#d4541e}
.pc-time .pc-v{font-size:14px;font-variant-numeric:tabular-nums}

.fine{
  margin-top:28px;font-size:11px;line-height:1.7;
  color:var(--ink-3);font-weight:300;max-width:60ch;
}

/* ── festival list ── */
.parva-list{display:flex;flex-direction:column;margin-top:24px}
.pv{
  display:grid;grid-template-columns:104px 1fr;gap:16px;
  padding:14px 12px;border-radius:var(--r-sm);
  border:1px solid transparent;border-bottom-color:var(--line);
}
.pv:last-child{border-bottom-color:transparent}
.pv.is-today{background:rgba(242,169,59,.12);border-color:rgba(242,169,59,.34)}
.pv-d b{display:block;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.pv-d i{display:block;font-style:normal;font-size:10.5px;color:var(--ink-3);margin-top:3px}
.pv-m b{display:block;font-size:15.5px;font-weight:500;line-height:1.35}
.pv-m i{display:block;font-style:normal;font-size:12.5px;color:var(--ink-3);margin-top:3px;line-height:1.5}
.pv.vrat .pv-m b{font-weight:400;color:var(--ink-2)}
.pv.parva .pv-m b{color:var(--accent)}

/* ── one ritual ── */
.rt-when{
  margin:22px 0 4px;padding:14px 18px;border-radius:var(--r-sm);
  background:rgba(18,10,6,.6);border:1px solid var(--line);
  font-size:14px;color:var(--ink-2);
}
.rt-items,.rt-steps{display:flex;flex-direction:column;gap:10px}
.rt-items li{
  padding-left:20px;position:relative;
  font-size:14.5px;line-height:1.6;color:var(--ink-2);font-weight:300;
}
.rt-items li::before{
  content:'';position:absolute;left:4px;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--accent);
}
.rt-steps{counter-reset:st}
.rt-steps li{
  counter-increment:st;position:relative;padding-left:38px;
  font-size:15px;line-height:1.65;
}
.rt-steps li::before{
  content:counter(st);position:absolute;left:0;top:0;
  width:25px;height:25px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(242,169,59,.16);border:1px solid rgba(242,169,59,.4);
  color:var(--accent);font-size:11.5px;font-weight:700;
  font-variant-numeric:tabular-nums;
}
.rt-note{
  margin-top:28px;padding:18px;border-radius:var(--r-md);
  background:rgba(242,169,59,.09);border:1px solid rgba(242,169,59,.26);
  font-size:14px;line-height:1.65;color:var(--ink-2);
}

@media (max-width:560px){
  .pv{grid-template-columns:88px 1fr;gap:12px;padding:13px 6px}
  .today-strip{flex-direction:column;margin-top:32px}
  .today-strip a{width:100%}
  .pc-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
}

/* ═══════════════════════════════════════════════
   দুর্গাপুজো
   ═══════════════════════════════════════════════ */

/* the kash phool layer only exists during the season */
.kash{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  transition:opacity 2.5s ease;pointer-events:none}
:root[data-theme="pujo"] .kash{opacity:1}
.kash-sway{transform-origin:50% 100%;animation:sway 11s ease-in-out infinite}
@keyframes sway{
  0%,100%{transform:skewX(0deg)}
  50%{transform:skewX(1.1deg)}
}

/* sindoor red joins the marigold for the season */
:root[data-theme="pujo"]{
  --accent:#ff6a52;
  --accent-deep:#c8102e;
  --brass:#f0c24a;
}
:root[data-theme="pujo"] .wordmark span:last-child{
  text-shadow:0 6px 48px rgba(200,16,46,.45),0 2px 10px rgba(0,0,0,.55);
}
.btn-pujo{border-color:rgba(255,106,82,.5);color:var(--accent)}
.btn-pujo:hover{background:rgba(255,106,82,.18);border-color:rgba(255,106,82,.7)}

/* ── the hero strip on the home page ── */
.pujo-strip{position:relative;width:100%;max-width:560px;margin-bottom:30px}
.pujo-hero{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:20px 26px;border-radius:var(--r-lg);
  background:rgba(22,10,10,.6);
  border:1px solid rgba(255,106,82,.34);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:background .22s,border-color .22s,transform .22s;
  text-align:center;
}
.pujo-hero:hover{background:rgba(255,106,82,.14);border-color:rgba(255,106,82,.6);transform:translateY(-2px)}
.ph-l{font-size:9.5px;font-weight:700;letter-spacing:.24em;color:var(--ink-3);text-transform:uppercase}
:root[data-lang="hi"] .ph-l,:root[data-lang="bn"] .ph-l{letter-spacing:.08em;text-transform:none;font-size:11px}
.ph-t{font-family:var(--f-display);font-weight:900;
  font-size:clamp(1.5rem,6vw,2.2rem);line-height:1.15;color:var(--accent)}
.ph-today{font-size:15px;font-weight:600}
.ph-m{font-size:11px;color:var(--ink-3)}

/* ── the countdown itself ── */
.cd{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.cd-u{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  min-width:52px;padding:8px 10px;border-radius:var(--r-sm);
  background:rgba(12,6,6,.5);border:1px solid rgba(247,234,214,.1);
}
.cd-u b{
  font-family:var(--f-display);font-weight:900;
  font-size:clamp(1.15rem,4.4vw,1.6rem);line-height:1;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.cd-u i{font-style:normal;font-size:9px;letter-spacing:.1em;color:var(--ink-3)}

/* ── the Mahalaya card ── */
.mahalaya{
  margin-top:26px;padding:24px;border-radius:var(--r-md);
  background:linear-gradient(160deg,rgba(200,16,46,.16),rgba(22,10,10,.6));
  border:1px solid rgba(255,106,82,.38);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.mahalaya.is-live{border-color:rgba(255,106,82,.85);box-shadow:0 0 38px rgba(255,106,82,.22)}
.mahalaya.is-over{opacity:.82}
.mh-top b{
  display:block;font-family:var(--f-display);font-weight:900;
  font-size:clamp(1.5rem,6vw,2.1rem);line-height:1.15;color:var(--accent);
}
.mh-top i{display:block;font-style:normal;font-size:12px;color:var(--ink-3);margin-top:5px}
.mh-blurb{margin:14px 0 18px;font-size:14px;line-height:1.65;color:var(--ink-2);font-weight:300}
.mh-when{font-size:10px;font-weight:700;letter-spacing:.2em;color:var(--ink-3);
  text-transform:uppercase;margin:16px 0 10px}
:root[data-lang="hi"] .mh-when,:root[data-lang="bn"] .mh-when{letter-spacing:.06em;text-transform:none;font-size:12px}
.mh-live{
  display:flex;align-items:center;gap:8px;margin:16px 0 10px;
  font-size:13.5px;font-weight:700;color:#ff6a52;letter-spacing:.06em;
}
.mh-play{
  margin-top:18px;padding:12px 26px;border-radius:var(--r-pill);
  background:var(--accent);color:#1a0806;font-weight:600;font-size:14px;
  box-shadow:0 6px 26px rgba(255,106,82,.3);
  transition:filter .2s,transform .2s;
}
.mh-play:hover{filter:brightness(1.08);transform:translateY(-1px)}

/* ── the countdown block on the Pujo page ── */
.pujo-cd{
  margin:24px 0 8px;padding:20px;border-radius:var(--r-md);
  background:var(--panel);border:1px solid var(--line);
}
.pujo-cd.is-now{border-color:rgba(255,106,82,.4);background:rgba(255,106,82,.1)}
.pujo-today{display:block;font-size:17px;font-weight:600;color:var(--accent);margin-top:4px}

/* ── the six days ── */
.pujo-days{display:flex;flex-direction:column;margin-top:14px}
.pd{
  display:grid;grid-template-columns:104px 1fr;gap:16px;
  padding:15px 12px;border-radius:var(--r-sm);
  border:1px solid transparent;border-bottom-color:var(--line);
}
.pd:last-child{border-bottom-color:transparent}
.pd.is-today{background:rgba(255,106,82,.14);border-color:rgba(255,106,82,.4)}
.pd.is-past{opacity:.45}
.pd-d b{display:block;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.pd-d i{display:block;font-style:normal;font-size:10.5px;color:var(--ink-3);margin-top:3px}
.pd-m b{display:block;font-size:16.5px;font-weight:600;line-height:1.35;color:var(--accent)}
.pd-m i{display:block;font-style:normal;font-size:12.5px;color:var(--ink-2);margin-top:4px;line-height:1.55}

@media (max-width:560px){
  .pd{grid-template-columns:82px 1fr;gap:12px;padding:14px 6px}
  .cd-u{min-width:46px;padding:7px 8px}
  .pujo-strip{margin-bottom:22px}
}

/* ═══════════════════════════════════════════════
   the calendar
   ═══════════════════════════════════════════════ */
.cal-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:26px 0 16px;
}
.cal-month{
  font-family:var(--f-display);font-weight:900;
  font-size:clamp(1.15rem,4.6vw,1.7rem);line-height:1.2;text-align:center;flex:1;
}
.cal-nav{
  width:38px;height:38px;flex:none;border-radius:50%;
  display:grid;place-items:center;font-size:22px;line-height:1;
  background:rgba(12,7,4,.5);border:1px solid var(--line);color:var(--ink-2);
  transition:background .18s,color .18s,border-color .18s;
}
.cal-nav:hover{background:rgba(242,169,59,.16);border-color:rgba(242,169,59,.45);color:var(--ink)}

.cal-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
}
.cal-wd{
  padding:6px 2px;text-align:center;
  font-size:9.5px;font-weight:700;letter-spacing:.1em;
  color:var(--ink-3);text-transform:uppercase;
}
.cal-pad{min-height:0}
.cal-d{
  position:relative;display:flex;flex-direction:column;gap:1px;
  min-height:74px;padding:7px 6px;border-radius:var(--r-sm);
  background:rgba(18,10,6,.5);border:1px solid var(--line);
  transition:background .16s,border-color .16s,transform .16s;
  overflow:hidden;
}
.cal-d:hover{background:rgba(242,169,59,.12);border-color:rgba(242,169,59,.42);transform:translateY(-1px)}
.cal-d b{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
.cal-t{
  font-style:normal;font-size:9px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;line-height:1;
}
.cal-ev{
  margin-top:auto;font-size:9.5px;line-height:1.25;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.cal-more{position:absolute;top:6px;right:6px;font-size:8.5px;color:var(--ink-3)}
.cal-d.has-parva{border-color:rgba(242,169,59,.45);background:rgba(242,169,59,.1)}
.cal-d.has-parva .cal-ev{color:var(--accent)}
.cal-d.has-vrat{border-color:rgba(247,234,214,.22)}
.cal-d.is-today{outline:2px solid var(--accent);outline-offset:-2px}
.cal-d.is-today b{color:var(--accent)}

/* ── a day's events ── */
.day-ev{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.de{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 17px;border-radius:var(--r-md);
  background:var(--panel);border:1px solid var(--line);
  transition:background .2s,border-color .2s,transform .2s;
}
.de:hover{background:var(--panel-2);border-color:rgba(242,169,59,.45);transform:translateY(-2px)}
.de-m b{display:block;font-size:16px;font-weight:600;color:var(--accent);line-height:1.3}
.de-m i{display:block;font-style:normal;font-size:12.5px;color:var(--ink-2);margin-top:4px;line-height:1.5}
.de-go{font-size:11px;color:var(--ink-3);white-space:nowrap;flex:none}

/* ── one event ── */
.ev-when{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin:22px 0 4px;padding:15px 18px;border-radius:var(--r-sm);
  background:rgba(18,10,6,.6);border:1px solid var(--line);
}
.ev-when b{font-size:16px;font-weight:600}
.ev-when i{font-style:normal;font-size:12.5px;color:var(--accent)}
.ev-cd{margin:14px 0 4px}
.ev-note{margin:18px 0 0;font-size:15.5px;line-height:1.65;color:var(--ink-2)}
.ev-detail{margin:0;font-size:15px;line-height:1.75;color:var(--ink-2);font-weight:300;max-width:62ch}
.ev-vidhi{
  display:block;padding:17px 19px;border-radius:var(--r-md);
  background:var(--panel);border:1px solid var(--line);
  transition:background .2s,border-color .2s,transform .2s;
}
.ev-vidhi:hover{background:var(--panel-2);border-color:rgba(242,169,59,.45);transform:translateY(-2px)}
.ev-vidhi b{display:block;font-size:16px;font-weight:600}
.ev-vidhi i{display:block;font-style:normal;font-size:12.5px;color:var(--ink-2);margin-top:5px;line-height:1.55}

@media (max-width:560px){
  .cal-grid{gap:3px}
  .cal-d{min-height:60px;padding:5px 4px}
  .cal-d b{font-size:12.5px}
  .cal-ev{font-size:8px;-webkit-line-clamp:2}
  .cal-wd{font-size:8.5px;letter-spacing:.04em}
  .de{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ভক্ত */
.bhakta-n{color:var(--ink-2);font-weight:600;white-space:nowrap}
.foot-bhakta{
  margin-bottom:12px !important;
  font-size:11px;letter-spacing:.1em;
  color:var(--ink-3);opacity:.9;
}


/* ═══════════════════════════════════════════════
   পঞ্জিকা — today, the month and the parvas, one
   section with three tabs
   ═══════════════════════════════════════════════ */
.tabs{
  display:flex;gap:6px;margin:22px 0 4px;
  padding:5px;border-radius:var(--r-pill);
  background:rgba(12,7,4,.45);
  border:1px solid rgba(247,234,214,.1);
  width:fit-content;max-width:100%;
  overflow-x:auto;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:none;
  padding:8px 20px;border-radius:var(--r-pill);
  font-size:13px;font-weight:600;color:var(--ink-3);
  white-space:nowrap;
  transition:background .18s,color .18s;
}
.tab:hover{color:var(--ink)}
.tab.on{background:var(--accent);color:#1a0f0a}

.tab-panel[hidden]{display:none}

@media (max-width:560px){
  .tabs{width:100%;justify-content:space-between}
  .tab{flex:1;text-align:center;padding:9px 10px;font-size:12.5px}
}


/* ═══════════════════════════════════════════════
   ভক্ত — what is behind the chip
   ═══════════════════════════════════════════════ */
/* the page does not scroll away underneath an open sheet */
body.modal-open{overflow:hidden}
.bpanel{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:var(--gut)}
.bpanel[hidden]{display:none}
.bp-scrim{
  position:absolute;inset:0;
  background:rgba(6,3,2,.66);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  animation:fade .2s ease both;
}
.bp-card{
  position:relative;width:min(380px,100%);
  display:flex;flex-direction:column;gap:14px;
  padding:20px;border-radius:var(--r-lg,20px);
  background:linear-gradient(180deg,#1b0f09 0%,#120906 100%);
  border:1px solid rgba(247,234,214,.14);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  animation:rise .24s cubic-bezier(.22,.8,.3,1) both;
}
@keyframes rise{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}

.bp-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bp-head b{font-size:15px;font-weight:700;letter-spacing:.02em}

.bp-live{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:16px 14px;border-radius:var(--r-md);
  background:rgba(242,169,59,.1);
  border:1px solid rgba(242,169,59,.3);
  text-align:center;
}
.bp-live .n{
  font-family:var(--f-display);font-size:38px;font-weight:900;line-height:1;
  color:var(--accent);font-variant-numeric:tabular-nums;
}
.bp-live .l{
  font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);display:flex;align-items:center;gap:7px;
}
.bp-live .l::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);
  animation:ping 2.6s ease-out infinite;
}
:root[data-lang="bn"] .bp-live .l,
:root[data-lang="hi"] .bp-live .l{letter-spacing:.08em;text-transform:none;font-size:11px}

.bp-rows{margin:0;display:flex;flex-direction:column;gap:1px;
  border-radius:var(--r-md);overflow:hidden;border:1px solid rgba(247,234,214,.1)}
.bp-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:11px 14px;background:rgba(247,234,214,.03);
}
.bp-row dt{font-size:12.5px;color:var(--ink-2)}
.bp-row dd{margin:0;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.bp-row.is-total dd{color:var(--accent)}
.bp-note{margin:0;text-align:center}
/* marks a number that is this device's own while the others are shared */
.bp-own{font-style:normal;color:var(--ink-3);font-size:11px;vertical-align:super;margin-left:2px}
.bp-live.is-own .n{color:var(--ink)}