/* ============================================================
   Kishorify · style.css — Empowering Souls, Enriching Lives
   Luxury spiritual dark aesthetic · gold on near-black
   ============================================================ */

/* ---------------- Design tokens ---------------- */
:root{
  /* Brand colours sampled from the original logo. The site runs on gold —
     the logo itself is recoloured to match — so these are kept for reference
     and off-site material rather than used in the interface. */
  --teal:#55D8C2;
  --teal-deep:#1F9E8A;
  --teal-soft:rgba(85,216,194,.14);
  --purple:#4525C0;
  --purple-light:#6B4BE0;
  --blue:#1056C2;

  --gold:#D4AF37;
  --gold-light:#F8E6A0;
  --gold-deep:#9A7414;
  --bg:#0B0B0B;
  --bg-2:#100D09;
  --brown:#1A120B;
  --ink:#0B0B0B;
  --text:#F5EFE2;
  --muted:#B9AE97;
  --line:rgba(212,175,55,.22);
  --line-soft:rgba(212,175,55,.12);
  --card:rgba(26,18,11,.62);
  --card-solid:#14100A;
  --glow:0 0 44px rgba(212,175,55,.16);
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --r-lg:26px;
  --r-md:18px;
  --r-sm:12px;
  --font-display:"Cormorant Garamond", Georgia, serif;
  --font-body:"Jost", "Segoe UI", system-ui, sans-serif;
  --font-dev:"Noto Serif Devanagari", "Cormorant Garamond", serif;
  --header-h:76px;
  --ease:cubic-bezier(.22,.8,.28,1);

  /* Filled controls get their own tokens. --gold-light doubles as a bright
     text colour, so reusing it as a button gradient broke light mode. */
  --btn-from:#F8E6A0;
  --btn-to:#A47C16;
  --btn-mid:#D4AF37;
  --btn-ink:#141005;
}
/* Light theme — deliberately darker text and stronger lines than a naive
   inversion. The previous values were washed out and hard to read; these hit
   at least 7:1 on body copy and 4.5:1 on every accent. */
html[data-theme="light"]{
  --teal:#12897A;
  --teal-deep:#0B6357;
  --teal-soft:rgba(18,137,122,.12);
  --purple:#3A1DA6;
  --purple-light:#4F2FCC;
  --blue:#0C459E;

  --bg:#FBF8F1;
  --bg-2:#F2EBDC;
  --brown:#EFE6D0;
  --text:#120E07;
  --muted:#453B28;
  --gold:#6A4C08;
  --gold-light:#4C3705;
  --gold-deep:#3A2A03;
  --line:rgba(58,42,3,.55);
  --line-soft:rgba(58,42,3,.28);
  --card:rgba(255,253,248,.94);
  --card-solid:#FFFDF7;
  --glow:0 0 30px rgba(122,91,14,.18);
  --shadow:0 14px 34px rgba(64,48,10,.16);

  /* deep bronze fill with cream text — reads clearly on cream */
  --btn-from:#8A6710;
  --btn-to:#5E460A;
  --btn-mid:#7A5B0E;
  --btn-ink:#FFF8E7;
}
/* Light backgrounds need a touch more weight to read as crisply as light-on-dark. */
html[data-theme="light"] body{font-weight:400}
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4{color:var(--text);font-weight:600}
html[data-theme="light"] .lead,
html[data-theme="light"] .p-desc,
html[data-theme="light"] .m-mean,
html[data-theme="light"] .m-sig,
html[data-theme="light"] .m-facts dd,
html[data-theme="light"] .f-note,
html[data-theme="light"] .sage-story,
html[data-theme="light"] .step-list li,
html[data-theme="light"] .gold-list li,
html[data-theme="light"] .warn-list li,
html[data-theme="light"] .data-table td{color:#3A3020}
html[data-theme="light"] .fine-note,
html[data-theme="light"] .mala-label,
html[data-theme="light"] .jap-lifetime,
html[data-theme="light"] .lab-note{color:#4F452F;opacity:1}
html[data-theme="light"] .kicker,
html[data-theme="light"] .m-deity,
html[data-theme="light"] .daily-kind,
html[data-theme="light"] .f-col h3,
html[data-theme="light"] .mini-head,
html[data-theme="light"] .m-facts dt,
html[data-theme="light"] .def-list dt{color:#6B4E0A}
html[data-theme="light"] .tag{color:#6B4E0A;border-color:rgba(107,78,10,.4)}
/* On cream, the dark-theme gold gradient is unreadable — deepen it to bronze. */
html[data-theme="light"] .page-title,
html[data-theme="light"] .hero-title{
  background:linear-gradient(120deg,#5E460A 6%,#8A6710 45%,#4A3707 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
html[data-theme="light"] .nav-list a{color:#4A4030}
html[data-theme="light"] .nav-list a:hover{color:#6B4E0A}
html[data-theme="light"] .nav-list a.active{color:#6B4E0A}
html[data-theme="light"] .card{border-color:rgba(74,55,7,.18)}
html[data-theme="light"] .card:hover{border-color:rgba(74,55,7,.34)}

/* ---------------- Reset & base ---------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
/* Mobile browsers paint a square grey flash over the whole hit box on tap,
   ignoring border-radius. Kill it everywhere and give real :active feedback
   instead, so round buttons stay round when touched. */
a,button,label,summary,input,textarea,select,[role="button"],[role="tab"]{
  -webkit-tap-highlight-color:transparent;
}
.btn,.chip,.icon-btn,.tab,.nav-toggle,.to-top,.switch,.pager button{
  touch-action:manipulation;
  -webkit-touch-callout:none;
  -webkit-user-select:none;user-select:none;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html:focus-within{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  font-weight:300;
  letter-spacing:.01em;
  overflow-x:hidden;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
body::before{ /* candlelit vignette */
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1100px 520px at 50% -12%, rgba(212,175,55,.10), transparent 62%),
    radial-gradient(900px 700px at 88% 108%, rgba(212,175,55,.05), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
html[data-theme="light"] body::before{
  background:
    radial-gradient(1100px 520px at 50% -12%, rgba(154,116,20,.12), transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
img{max-width:100%;display:block}
a{color:var(--gold-light);text-decoration:none;transition:color .25s var(--ease)}
a:hover{color:var(--gold)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.18;color:var(--text)}
p{max-width:70ch}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font:inherit;color:inherit}
::selection{background:rgba(212,175,55,.35);color:#fff}
html[data-theme="light"] ::selection{background:rgba(154,116,20,.28);color:#1A120B}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
[id]{scroll-margin-top:calc(var(--header-h) + 18px)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--gold-deep),var(--gold));border-radius:8px;border:2px solid var(--bg)}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-60px;left:16px;z-index:300;background:var(--btn-mid);color:var(--btn-ink);padding:.6rem 1.1rem;border-radius:10px;font-weight:500;transition:top .25s}
.skip-link:focus{top:14px;color:var(--ink)}
.noscript-note{position:fixed;bottom:0;left:0;right:0;z-index:400;background:var(--btn-mid);color:var(--btn-ink);text-align:center;padding:.7rem 1rem;font-weight:400}
.center{text-align:center}
.center p{margin-inline:auto}

/* ---------------- Layout ---------------- */
.container{width:min(1180px,92%);margin-inline:auto}
.container.narrow{width:min(860px,92%)}
.section{padding:clamp(72px,9vw,120px) 0;position:relative}
.section.alt{background:linear-gradient(180deg, transparent, rgba(212,175,55,.035) 18%, rgba(212,175,55,.035) 82%, transparent)}
html[data-theme="light"] .section.alt{background:linear-gradient(180deg, transparent, rgba(154,116,20,.05) 18%, rgba(154,116,20,.05) 82%, transparent)}
.section.pt-0{padding-top:0}
.section-head{max-width:720px;margin:0 auto clamp(36px,5vw,56px);text-align:center}
.section-head p{margin-inline:auto}
.kicker{
  font-size:.78rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);font-weight:400;margin-bottom:14px;
}
.kicker::before,.kicker::after{content:"—";margin:0 .7em;opacity:.5}
.section-title{font-size:clamp(1.9rem,4vw,2.9rem);margin-bottom:14px}
.lead{color:var(--muted);font-size:1.06rem;font-weight:300}
.grid-2{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:clamp(20px,3vw,36px)}
.grid-3{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:clamp(18px,2.5vw,28px)}
.grid-4{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:clamp(16px,2vw,24px)}

.devanagari{font-family:var(--font-dev);font-weight:400}
.dev-xl{font-size:clamp(2.4rem,6vw,4rem);line-height:1.5;color:var(--gold-light);text-shadow:0 0 34px rgba(212,175,55,.35)}
.dev-lg{font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.7;color:var(--gold-light);text-shadow:0 0 26px rgba(212,175,55,.28)}
html[data-theme="light"] .dev-xl,
html[data-theme="light"] .dev-lg{text-shadow:none;color:var(--gold-deep)}
.translit{letter-spacing:.14em;text-transform:uppercase;font-size:.86rem;color:var(--muted);margin-top:10px}
.fine-note{font-size:.85rem;color:var(--muted);opacity:.9;margin-top:14px}
.fine-note.center{margin-inline:auto;text-align:center}

/* ---------------- Buttons ---------------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.55em;
  background:linear-gradient(135deg,var(--btn-from),var(--btn-mid) 55%,var(--btn-to));
  color:var(--btn-ink);font-weight:500;letter-spacing:.05em;
  padding:.85em 1.7em;border-radius:999px;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
  box-shadow:0 8px 26px rgba(212,175,55,.22);
  border:1px solid rgba(255,255,255,.18);
}
.btn svg{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn::after{ /* shine sweep */
  content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-20deg);transition:left .6s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(212,175,55,.34);color:var(--btn-ink)}
.btn:hover::after{left:130%}
.btn:active{transform:scale(.97);box-shadow:0 6px 18px rgba(212,175,55,.2)}
.icon-btn:active,.chip:active{transform:scale(.94)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-outline{
  background:transparent;color:var(--gold-light);
  border:1px solid var(--gold);box-shadow:none;
}
.btn-outline:hover{background:rgba(212,175,55,.12);color:var(--gold-light);box-shadow:var(--glow)}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--line-soft);box-shadow:none}
.btn-ghost:hover{color:var(--gold-light);border-color:var(--line);box-shadow:none}
.btn-sm{padding:.55em 1.15em;font-size:.9rem}
.btn-lg{padding:1em 2.2em;font-size:1.04rem}
.btn-xl{padding:1.15em 2.6em;font-size:1.12rem}
.soon-tag{
  display:inline-block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  background:rgba(212,175,55,.16);color:var(--gold-light);
  border:1px solid var(--line);border-radius:999px;padding:.28em .8em;
}
.icon-btn{
  display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line-soft);color:var(--muted);
  transition:all .3s var(--ease);
}
.icon-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon-btn:hover{color:var(--gold-light);border-color:var(--gold);box-shadow:var(--glow);transform:translateY(-1px)}
.icon-btn.fav[aria-pressed="true"]{color:var(--gold);border-color:var(--gold)}
.icon-btn.fav[aria-pressed="true"] svg{fill:var(--gold)}
.icon-btn.is-speaking,.btn.is-speaking,[aria-pressed="true"].btn-outline{
  color:var(--gold);border-color:var(--gold);box-shadow:var(--glow);
}
.icon-btn.is-speaking svg,.btn.is-speaking svg{animation:pulseSoft 1.1s ease-in-out infinite}

.chip{
  padding:.5em 1.2em;border-radius:999px;border:1px solid var(--line-soft);
  color:var(--muted);font-size:.9rem;letter-spacing:.03em;
  transition:all .3s var(--ease);white-space:nowrap;
}
.chip:hover{color:var(--gold-light);border-color:var(--line)}
.chip[aria-pressed="true"]{
  background:linear-gradient(135deg,var(--btn-from),var(--btn-to));
  color:var(--btn-ink);border-color:transparent;font-weight:600;
  box-shadow:0 6px 18px rgba(212,175,55,.28);
}
.chip-row{display:flex;flex-wrap:wrap;gap:10px}
.chip-row.center{justify-content:center}
.tag{
  display:inline-block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--line);border-radius:999px;padding:.3em .95em;
}

/* ---------------- Cards ---------------- */
.card{
  background:var(--card);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  padding:clamp(24px,3.4vw,40px);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
}
.card:hover{border-color:var(--line);box-shadow:var(--shadow),var(--glow)}
.card-gold{
  border-color:var(--line);
  background:
    linear-gradient(var(--card-solid),var(--card-solid)) padding-box,
    linear-gradient(140deg,rgba(212,175,55,.65),rgba(212,175,55,.08) 45%,rgba(212,175,55,.55)) border-box;
  border:1px solid transparent;
}
.card-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.gold-list li,.warn-list li{position:relative;padding-left:1.5em;margin:.45em 0;color:var(--muted)}
.gold-list li::before{content:"❁";position:absolute;left:0;color:var(--gold);font-size:.85em;top:.2em}
.warn-list li::before{content:"◆";position:absolute;left:0;color:var(--gold-deep);font-size:.7em;top:.45em}
html[data-theme="light"] .warn-list li::before{color:var(--gold)}

/* ---------------- Loader ---------------- */
#loader{
  position:fixed;inset:0;z-index:500;display:grid;place-items:center;
  background:var(--bg);transition:opacity .6s var(--ease),visibility .6s;
}
#loader.hide{opacity:0;visibility:hidden}
.loader-inner{display:grid;place-items:center;gap:18px;animation:loaderPulse 2.2s ease-in-out infinite}
.loader-word{font-family:var(--font-display);letter-spacing:.5em;padding-left:.5em;color:var(--gold-light);font-size:1.05rem}

/* ---------------- Scroll progress / particles ---------------- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:220;background:transparent}
#scrollBar{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-light));box-shadow:0 0 12px rgba(212,175,55,.6)}
#particles{position:fixed;inset:0;z-index:-1;pointer-events:none}


/* ============================================================
   BRAND — registered trademark artwork + the type lockup

   assets/images/kishorify-logo.png is a byte-for-byte copy of the
   registered artwork. It is only ever scaled proportionally.
   Do not add filter, opacity, mix-blend-mode, background-clip,
   border-radius, or any width/height pair that changes its ratio.
   Do not crop it. Do not recolour it. Do not knock out its
   background. Do not replace it with SVG or CSS art.

   WHY THE ARTWORK IS NOT DISPLAYED AT ALL
   By the owner's instruction the site shows the NAME and TAGLINE as
   ordinary text, not the logo image. The file is still shipped and
   is still referenced by the schema.org Organization record and the
   social share card, so it must stay byte-identical — but no page
   renders it.

   The text lockup below is set in the site's own typefaces. It is
   not a reproduction of the mark and makes no attempt to imitate
   its lettering. Do not restyle it to resemble the logo's script.
   ============================================================ */
.brand-logo{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  object-fit:contain;          /* never stretched, never cropped */
  filter:none;                 /* never colour corrected */
  -webkit-filter:none;
  mix-blend-mode:normal;
  image-rendering:auto;
  background:none;border:0;border-radius:0;box-shadow:none;
}

/* ---------- type lockup (site typography, NOT the logo lettering) ---------- */
.brand-type{
  display:grid;gap:.16em;line-height:1;text-align:left;
}
.brand-type-name{
  font-family:var(--font-display);
  font-weight:600;font-size:1.58rem;letter-spacing:.01em;white-space:nowrap;
  color:var(--gold-light);
  background:linear-gradient(96deg,var(--gold-light),var(--gold) 48%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.brand-type-tag{
  font-family:var(--font-body);
  font-size:.545rem;letter-spacing:.208em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
}
/* The ® sits inside gradient text. `opacity` on a child of a
   background-clip:text element makes it its own stacking context, so it
   stops inheriting the clipped gradient and paints with the transparent
   fill — i.e. it disappears. Give it a solid fill of its own. */
.brand-type .rt{
  opacity:1;color:var(--gold);-webkit-text-fill-color:var(--gold);
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
}
.brand:hover .brand-type-tag{color:var(--gold)}

.brand-type-foot .brand-type-name{font-size:1.74rem}
.brand-type-foot .brand-type-tag{font-size:.585rem}
.brand-type-note .brand-type-name{font-size:1.5rem}
.brand-type-note .brand-type-tag{font-size:.53rem}

/* ---------- showcase: hero + about ---------- */
.brand-show{display:grid;justify-items:center;gap:0;line-height:0}
.brand-type-lg{justify-items:center;text-align:center;gap:.3em}
.brand-type-lg .brand-type-name{
  font-size:clamp(2.9rem,8.4vw,5rem);letter-spacing:.005em;
}
.brand-type-lg .brand-type-tag{
  font-size:clamp(.66rem,1.55vw,.94rem);letter-spacing:.3em;
  color:var(--gold-light);-webkit-text-fill-color:currentColor;
  white-space:normal;
}
.brand-type-about .brand-type-name{font-size:clamp(2.5rem,7vw,3.9rem)}

.hero-logo{height:clamp(170px,26vh,260px)}
.about-logo{height:clamp(200px,30vw,320px)}

/* The type lockup is the brand on the site, in both themes. */
.brand-show .brand-type{display:grid}

@media (max-width:900px){
  .brand-type-name{font-size:1.42rem}
  .brand-type-tag{font-size:.5rem;letter-spacing:.18em}
}
@media (max-width:720px){
  .brand-type-name{font-size:1.3rem}
  .brand-type-tag{font-size:.465rem;letter-spacing:.15em}
  .brand-type-foot .brand-type-name{font-size:1.5rem}
  .brand-type-foot .brand-type-tag{font-size:.52rem}
  .hero-logo{height:clamp(150px,34vw,210px)}
}
@media (max-width:480px){
  .brand-type-name{font-size:1.19rem}
  .brand-type-tag{font-size:.425rem;letter-spacing:.12em}
  .brand-type-lg .brand-type-tag{letter-spacing:.2em}
}

/* ---------------- Header ---------------- */
#siteHeader{
  position:sticky;top:0;z-index:200;
  transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
  border-bottom:1px solid transparent;
}
#siteHeader.scrolled{
  background:rgba(11,11,11,.82);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom-color:var(--line-soft);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
html[data-theme="light"] #siteHeader.scrolled{background:rgba(250,246,236,.86);box-shadow:0 10px 30px rgba(64,48,10,.10)}
.header-inner{
  width:min(1320px,94%);margin-inline:auto;height:var(--header-h);
  display:flex;align-items:center;gap:26px;
}
.brand{display:flex;align-items:center;gap:13px;margin-right:auto}
.rt{
  font-size:.42em;vertical-align:super;line-height:0;letter-spacing:0;
  margin-left:.12em;opacity:.7;font-weight:500;
}
.nav-list{display:flex;align-items:center;gap:6px}
.nav-list a{
  position:relative;display:block;padding:.55em .85em;font-size:.94rem;
  letter-spacing:.04em;color:var(--muted);
}
.nav-list a::after{
  content:"";position:absolute;left:.85em;right:.85em;bottom:.28em;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:scaleX(0);transition:transform .35s var(--ease);
}
.nav-list a:hover{color:var(--text)}
.nav-list a:hover::after{transform:scaleX(1)}
.nav-list a.active{color:var(--gold-light)}
.nav-list a.active::after{transform:scaleX(1)}
.nav-extra{display:none}
.header-actions{display:flex;align-items:center;gap:10px}
#themeToggle .i-sun{display:none}
#themeToggle .i-moon{display:block}
html[data-theme="light"] #themeToggle .i-sun{display:block}
html[data-theme="light"] #themeToggle .i-moon{display:none}

/* hamburger */
#navToggle{display:none;flex-direction:column;justify-content:center;gap:5px}
#navToggle span{display:block;width:20px;height:1.6px;background:currentColor;transition:transform .35s var(--ease),opacity .3s}
body.nav-open #navToggle span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
body.nav-open #navToggle span:nth-child(2){opacity:0}
body.nav-open #navToggle span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

/* ---------------- Search overlay ---------------- */
.search-overlay[hidden]{display:none}
.search-overlay{
  position:fixed;inset:0;z-index:320;display:grid;place-items:start center;
  padding:12vh 5% 5%;background:rgba(5,4,2,.72);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity .22s var(--ease);
}
.search-overlay.open{opacity:1}
html[data-theme="light"] .search-overlay{background:rgba(40,32,12,.4)}
.search-panel{
  width:min(620px,100%);background:var(--card-solid);
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--shadow),var(--glow);
  transform:translateY(10px);transition:transform .25s var(--ease);
}
.search-overlay.open .search-panel{transform:translateY(0)}
.search-bar{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line-soft)}
.search-bar svg{width:20px;height:20px;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;flex:none}
.search-bar input{flex:1;background:none;border:0;outline:0;font-size:1.05rem;color:var(--text)}
.search-bar input::placeholder{color:var(--muted)}
#searchResults{max-height:52vh;overflow:auto;padding:8px}
#searchResults a{
  display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;color:var(--text);
}
#searchResults a:hover,#searchResults a:focus{background:rgba(212,175,55,.1);color:var(--gold-light)}
.sr-tag{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line-soft);border-radius:999px;padding:.2em .7em;flex:none}
.sr-none{padding:18px 14px;color:var(--muted)}
.search-hint{display:flex;gap:16px;padding:10px 18px;border-top:1px solid var(--line-soft);color:var(--muted);font-size:.78rem}
.search-hint kbd{border:1px solid var(--line-soft);border-radius:5px;padding:.05em .45em;font-family:inherit;font-size:.92em;color:var(--gold-light)}

/* ---------------- Diya (lamp) component ---------------- */
.diya{position:relative;width:64px;height:64px;display:inline-grid;place-items:end center}
.diya .bowl{
  width:56px;height:20px;border-radius:0 0 30px 30px;
  background:linear-gradient(180deg,var(--gold),var(--gold-deep));
  box-shadow:0 6px 16px rgba(0,0,0,.4), inset 0 2px 3px rgba(255,255,255,.35);
}
.diya .flame{
  position:absolute;bottom:17px;width:15px;height:24px;
  background:radial-gradient(closest-side at 50% 72%, #fff8dc, #F8E6A0 34%, #E9A319 68%, rgba(233,163,25,0) 100%);
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  filter:drop-shadow(0 0 12px rgba(248,230,160,.85)) drop-shadow(0 0 30px rgba(212,175,55,.5));
  transform-origin:50% 90%;
  animation:flick 2.4s ease-in-out infinite;
}
.diya.diya-sm{transform:scale(.72)}

/* ---------------- Hero (home) ---------------- */
.hero{position:relative;min-height:calc(100svh - var(--header-h));display:grid;place-items:center;text-align:center;overflow-x:clip;overflow-y:visible;padding:60px 0 80px}
.hero-glow{
  position:absolute;top:-18%;left:50%;transform:translateX(-50%);
  width:min(900px,120vw);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(212,175,55,.16), transparent 62%);
  animation:pulseGlow 6s ease-in-out infinite;
}
.hero-om{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  font-family:var(--font-dev);font-size:min(46vh,52vw);color:var(--gold);
  opacity:.05;animation:floatOm 11s ease-in-out infinite;user-select:none;
}
.hero-inner{position:relative;z-index:2;display:grid;justify-items:center;gap:8px;width:min(880px,92%)}
.hero-title{
  font-size:clamp(2.7rem,8.5vw,5.4rem);letter-spacing:.32em;padding-left:.32em;font-weight:600;
  background:linear-gradient(120deg,var(--gold-light) 10%,var(--gold) 45%,#fff6d8 60%,var(--gold) 78%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 7s linear infinite;
}
.hero-tagline{font-family:var(--font-display);font-style:italic;font-size:clamp(1.05rem,2.4vw,1.5rem);color:var(--gold-light);letter-spacing:.08em}
.hero-sub{color:var(--muted);max-width:56ch;margin-top:8px}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:30px}
.scroll-hint{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  color:var(--muted);display:grid;justify-items:center;gap:4px;font-size:.72rem;
  letter-spacing:.26em;text-transform:uppercase;z-index:2;
}
.scroll-hint svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;animation:bounceHint 2.2s infinite}
.scroll-hint:hover{color:var(--gold-light)}

/* ---------------- Page hero (subpages) ---------------- */
.page-hero{padding:clamp(64px,9vw,110px) 0 clamp(30px,4vw,48px);text-align:center}
.page-hero p{margin-inline:auto}
.page-title{
  font-size:clamp(2.3rem,6vw,3.8rem);letter-spacing:.12em;margin-bottom:14px;
  background:linear-gradient(120deg,var(--gold-light),var(--gold) 60%,var(--gold-light));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------------- Shravan special ---------------- */
.shravan{position:relative}
.deco{position:absolute;width:130px;opacity:.16;pointer-events:none}
.deco-bilva-l{top:36px;left:2%}
.deco-bilva-r{bottom:36px;right:2%;transform:scaleX(-1)}
.shiva-card{text-align:center;max-width:880px;margin-inline:auto}
.shiva-icons{display:flex;justify-content:center;align-items:flex-end;gap:34px;margin-bottom:26px}
.shiva-icons img{width:46px;height:46px;opacity:.9;filter:drop-shadow(0 0 10px rgba(212,175,55,.35))}
.shiva-body{margin:22px auto 0;max-width:62ch}
.shiva-card .gold-list{display:inline-block;text-align:left;margin-top:18px}

/* ---------------- Rudra section ---------------- */
.rudra-grid{display:grid;grid-template-columns:minmax(0, 1.25fr) minmax(0, .85fr);gap:clamp(22px,3vw,36px);align-items:stretch}
.mantra-feature{display:flex;flex-direction:column}
.def-list{margin-top:20px;display:grid;gap:12px}
.def-list div{display:grid;grid-template-columns:130px minmax(0, 1fr);gap:8px;align-items:baseline}
.def-list dt{color:var(--gold);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase}
.def-list dd{color:var(--muted)}
.syllables{font-family:var(--font-display);letter-spacing:.1em;color:var(--text)}
.jap-card{text-align:center;display:flex;flex-direction:column;justify-content:center;gap:8px}
.jap-title{font-size:1.5rem}
.jap-sub{color:var(--muted);font-size:.92rem}
.jap-count{
  font-family:var(--font-display);font-size:clamp(3.4rem,6vw,4.6rem);font-weight:600;
  color:var(--gold-light);line-height:1;margin:10px 0 4px;text-shadow:0 0 30px rgba(212,175,55,.35);
}
.jap-count.tick{animation:countPop .35s var(--ease)}
.mala-track{height:8px;border-radius:999px;background:rgba(212,175,55,.14);overflow:hidden;margin:14px 0 6px}
#malaFill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-light));box-shadow:0 0 12px rgba(212,175,55,.5);transition:width .4s var(--ease)}
.mala-label{font-size:.82rem;letter-spacing:.1em;color:var(--muted)}
.jap-actions{display:flex;justify-content:center;gap:12px;margin-top:16px}

/* ---------------- Universal prayer ---------------- */
.prayer-card{text-align:center;max-width:820px;margin-inline:auto}
.prayer-verse{font-size:clamp(1.35rem,3vw,1.9rem);line-height:2}
.prayer-om{margin-top:10px;color:var(--gold);letter-spacing:.2em}
.prayer-trans{margin-top:24px;display:grid;gap:12px;color:var(--muted);font-style:italic}
.prayer-trans strong{color:var(--gold-light);font-style:normal;font-weight:500;letter-spacing:.1em;font-size:.82rem;text-transform:uppercase}

/* ---------------- Daily light ---------------- */
.daily-card{display:flex;flex-direction:column;gap:14px;min-height:230px}
.daily-kind{color:var(--gold);font-size:.78rem;letter-spacing:.3em;text-transform:uppercase}
.daily-text{
  font-family:var(--font-display);font-size:clamp(1.25rem,2.4vw,1.6rem);
  line-height:1.55;flex:1;color:var(--text);
}
.daily-text.swap{animation:fadeSwap .5s var(--ease)}
.daily-card .btn{align-self:flex-start}

/* ---------------- Explore grid & notice strip ---------------- */
.link-card{display:flex;flex-direction:column;gap:10px;color:var(--text);height:100%}
.lc-glyph{font-family:var(--font-dev);font-size:2rem;color:var(--gold);line-height:1}
.link-card h3{font-size:1.35rem}
.link-card p{color:var(--muted);font-size:.95rem;flex:1}
.lc-arrow{color:var(--gold-light);letter-spacing:.14em;font-size:.8rem;text-transform:uppercase;display:inline-flex;align-items:center;gap:.5em}
.lc-arrow svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.link-card:hover .lc-arrow svg{transform:translateX(4px)}
.notice-strip{
  margin-top:clamp(30px,4vw,44px);display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  justify-content:space-between;border:1px solid var(--line);border-radius:var(--r-md);
  padding:18px 24px;background:rgba(212,175,55,.06);
}
.notice-strip p{color:var(--muted);max-width:none}
.notice-strip strong{color:var(--gold-light);font-weight:500}
.notice-strip .btn svg{width:1em;height:1em}

/* ---------------- About page ---------------- */
.acrostic-card{max-width:640px;margin-inline:auto;text-align:center}
.acrostic{display:grid;gap:6px;font-family:var(--font-display);font-size:clamp(1.15rem,2.6vw,1.5rem)}
.acrostic b{color:var(--gold-light);font-weight:600;letter-spacing:.06em}
/* .about-emblem is styled in the brand showcase block further down. */
.mission-card h3{font-size:1.3rem;margin-bottom:8px}
.mission-card .lc-glyph{margin-bottom:10px}
.mission-card p{color:var(--muted);font-size:.95rem}
.steward-card{max-width:760px;margin-inline:auto;text-align:center}
.steward-card h2{margin-bottom:12px}
.steward-card p{margin-inline:auto;color:var(--muted)}
.steward-card strong{color:var(--gold-light);font-weight:500}

.prose h2{font-size:clamp(1.4rem,3vw,1.9rem);margin:1.8em 0 .6em;color:var(--gold-light)}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--muted);margin:.7em 0}
.prose strong{color:var(--text);font-weight:500}
.legal p{font-size:.98rem}

/* ---------------- Mantra library ---------------- */
.toolbar{display:grid;gap:18px;padding:clamp(18px,2.5vw,26px)}
.search-field{position:relative;display:flex;align-items:center;gap:12px;border:1px solid var(--line-soft);border-radius:999px;padding:.75em 1.3em;background:rgba(11,11,11,.35);transition:border-color .3s,box-shadow .3s}
html[data-theme="light"] .search-field{background:rgba(255,253,246,.7)}
.search-field:focus-within{border-color:var(--gold);box-shadow:var(--glow)}
.search-field svg{width:18px;height:18px;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;flex:none}
.search-field input{flex:1;background:none;border:0;outline:0;color:var(--text)}
.search-field input::placeholder{color:var(--muted)}
.result-count{margin:20px 4px 14px;color:var(--muted);font-size:.86rem;letter-spacing:.06em}
.mantra-grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:clamp(18px,2.5vw,26px)}
.mantra-card{display:flex;flex-direction:column;gap:10px}
.m-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.m-actions{display:flex;gap:8px}
.m-name{font-size:1.4rem}
.m-dev{font-size:clamp(1.25rem,2.6vw,1.6rem);line-height:1.9;color:var(--gold-light)}
html[data-theme="light"] .m-dev{color:var(--gold-deep)}
.m-tr{color:var(--muted);font-size:.9rem;letter-spacing:.06em;font-style:italic}
.m-mean,.m-sig{color:var(--muted);font-size:.95rem}
.m-mean strong,.m-sig strong{color:var(--gold);font-weight:400;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase}
.empty-state{text-align:center;margin-top:24px;display:grid;justify-items:center;gap:10px}
.empty-state h2{font-size:1.5rem}
.empty-state p{color:var(--muted)}

/* ---------------- Meditation ---------------- */
.med-card{display:grid;gap:22px}
.tab-row{display:flex;justify-content:center;gap:8px;border-bottom:1px solid var(--line-soft);padding-bottom:14px;flex-wrap:wrap}
.tab{padding:.55em 1.5em;border-radius:999px;color:var(--muted);letter-spacing:.06em;border:1px solid transparent;transition:all .3s var(--ease)}
.tab:hover{color:var(--text)}
.tab[aria-selected="true"]{color:var(--gold-light);border-color:var(--line);background:rgba(212,175,55,.08)}
.med-desc{text-align:center;color:var(--muted);max-width:52ch;margin-inline:auto;min-height:3.2em}
.med-stage{display:grid;justify-items:center;gap:24px;padding:8px 0 4px}
.med-stage:fullscreen,.med-stage:-webkit-full-screen{
  background:radial-gradient(700px 500px at 50% 30%, rgba(212,175,55,.08), transparent 65%), var(--bg);
  place-content:center;padding:6vh 5vw;
}
body.zen .med-stage{position:fixed;inset:0;z-index:340;background:var(--bg);place-content:center}
.ring-wrap{position:relative;width:min(280px,72vw);aspect-ratio:1}
.ring-wrap.ring-sm{width:min(230px,64vw)}
.ring{width:100%;height:100%;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(212,175,55,.14);stroke-width:5}
.ring-fg{fill:none;stroke:url(#goldGrad);stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset .25s linear;filter:drop-shadow(0 0 8px rgba(212,175,55,.55))}
#plyRingFg{stroke:url(#goldGrad2)}
.ring-center{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:4px}
.time-left{font-family:var(--font-display);font-size:clamp(2.4rem,5vw,3.2rem);font-weight:600;color:var(--gold-light);line-height:1}
.med-status{color:var(--muted);font-size:.82rem;letter-spacing:.12em;max-width:22ch}
.control-row{display:flex;justify-content:center;flex-wrap:wrap;gap:14px}
.toggle-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;width:100%;max-width:460px}
.toggle-row.center{justify-content:center}
.switch{display:inline-flex;align-items:center;gap:12px;cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{
  width:46px;height:25px;border-radius:999px;background:rgba(212,175,55,.16);
  border:1px solid var(--line-soft);position:relative;transition:background .3s var(--ease);flex:none;
}
.switch .track::after{
  content:"";position:absolute;top:2px;left:2.5px;width:19px;height:19px;border-radius:50%;
  background:var(--muted);transition:transform .3s var(--ease),background .3s;
}
.switch input:checked + .track{background:linear-gradient(135deg,var(--btn-from),var(--btn-to))}
.switch input:checked + .track::after{transform:translateX(20px);background:var(--btn-ink)}
.switch input:focus-visible + .track{outline:2px solid var(--gold);outline-offset:3px}
.switch-label{color:var(--muted);font-size:.92rem}

.breath-card{display:grid;justify-items:center;gap:22px;text-align:center}
.breath-stage{position:relative;width:min(300px,74vw);aspect-ratio:1;display:grid;place-items:center}
.breath-halo{position:absolute;inset:6%;border-radius:50%;border:1px dashed var(--line);opacity:.7}
.breath-core{
  width:46%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 38% 32%, rgba(248,230,160,.9), var(--gold) 58%, var(--gold-deep));
  box-shadow:0 0 44px rgba(212,175,55,.5), inset 0 4px 14px rgba(255,255,255,.4);
  transform:scale(1);transition:transform 4s ease-in-out;will-change:transform;
}
.breath-phase{color:var(--btn-ink);font-weight:500;letter-spacing:.2em;text-transform:uppercase;font-size:.82rem}
.breath-count{color:var(--muted);font-size:.9rem;letter-spacing:.08em}

/* ---------------- Trainer / player (yoga & exercise) ---------------- */
.player-card{text-align:center}
.player-idle,.player-live{display:grid;justify-items:center;gap:20px}
.player-title{font-size:clamp(1.6rem,3vw,2.1rem)}
.player-sub{color:var(--muted)}
.player-step{color:var(--gold);letter-spacing:.3em;font-size:.76rem;text-transform:uppercase}
.player-name{font-size:clamp(1.7rem,3.6vw,2.4rem)}
.player-phase{color:var(--muted);letter-spacing:.06em;min-height:1.6em}
.player-next{color:var(--muted);font-size:.88rem;font-style:italic;min-height:1.4em}
.practice-grid{align-items:stretch}
.practice-card{display:flex;flex-direction:column;gap:10px}
.practice-card h4{color:var(--gold);font-family:var(--font-body);font-weight:400;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;margin-top:10px}
.p-illus{position:relative;display:grid;place-items:center;padding:10px 0 2px}
.p-illus img{width:96px;height:96px;opacity:.9;filter:drop-shadow(0 0 14px rgba(212,175,55,.3))}
.p-index{position:absolute;top:0;right:0;font-family:var(--font-display);font-size:2.1rem;color:var(--line);font-weight:600;line-height:1}
.p-name{font-size:1.35rem}
.p-sans{color:var(--gold-light);font-style:italic;font-size:.92rem;margin-top:-6px}
.p-desc{color:var(--muted);font-size:.95rem}
.practice-card .tag{align-self:flex-start}
.practice-card .btn{margin-top:auto;align-self:flex-start}

/* ---------------- Coming soon ---------------- */
.soon-card{display:flex;flex-direction:column;gap:12px}
.soon-card h2{font-size:1.4rem}
.soon-card p{color:var(--muted);font-size:.95rem}
.soon-card .soon-tag{align-self:flex-start}

/* ---------------- Official notice ---------------- */
.notice-doc{padding:clamp(28px,4vw,48px)}
.notice-doc h2{font-size:1.35rem;color:var(--gold-light);margin:1.7em 0 .5em}
.notice-doc p,.notice-doc li{color:var(--muted)}
.notice-doc p strong{color:var(--text);font-weight:500}
.notice-head{display:flex;align-items:center;gap:16px;padding-bottom:20px;border-bottom:1px solid var(--line-soft)}
.notice-head img{border-radius:50%;box-shadow:0 0 16px rgba(212,175,55,.35)}
.notice-org{font-family:var(--font-display);font-size:1.2rem;color:var(--gold-light);letter-spacing:.08em}
.notice-date{color:var(--muted);font-size:.85rem}
.never-list li{display:flex;gap:12px;align-items:baseline;padding:.5em 0;border-bottom:1px dashed var(--line-soft);color:var(--text)}
.never-list li:last-child{border-bottom:0}
.never-list span{color:#E86A5E;font-weight:600}
.notice-foot{margin-top:34px;padding-top:24px;border-top:1px solid var(--line-soft);display:grid;justify-items:center;gap:10px;text-align:center}
.notice-foot strong{color:var(--gold-light);font-weight:500}

/* ---------------- Contact ---------------- */
.contact-grid{grid-template-columns:minmax(0, 1.2fr) minmax(0, .9fr);align-items:start}
.contact-form-card h2,.info-card h2{font-size:1.5rem;margin-bottom:18px}
.field{display:grid;gap:6px;margin-bottom:16px}
.field label{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.field input,.field textarea{
  background:rgba(11,11,11,.35);border:1px solid var(--line-soft);border-radius:var(--r-sm);
  padding:.85em 1.05em;color:var(--text);transition:border-color .3s,box-shadow .3s;resize:vertical;
}
html[data-theme="light"] .field input,html[data-theme="light"] .field textarea{background:rgba(255,253,246,.7)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:var(--glow)}
.field input.invalid,.field textarea.invalid{border-color:#E86A5E}
.field-err{color:#E8907F;font-size:.82rem;min-height:1.1em}
html[data-theme="light"] .field-err{color:#B23B2A}
html[data-theme="light"] .never-list span{color:#B23B2A}
.success-card{text-align:center;display:grid;justify-items:center;gap:10px;margin-top:6px}
.success-card h3{font-size:1.4rem;color:var(--gold-light)}
.success-card p{color:var(--muted)}
.contact-side{display:grid;gap:22px}
.info-list{display:grid;gap:18px}
.info-list li{display:flex;gap:14px;align-items:flex-start;color:var(--muted)}
.info-list strong{color:var(--text);font-weight:500;letter-spacing:.04em}
.info-list svg{width:20px;height:20px;flex:none;margin-top:4px;fill:none;stroke:var(--gold);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.map-ph{display:grid;place-items:center;gap:10px;min-height:190px;text-align:center;color:var(--muted);border-style:dashed}
.map-ph svg{width:34px;height:34px;fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.8}

/* Slowly turning globe — replaces the old map placeholder */
.globe-card{display:grid;justify-items:center;gap:16px;text-align:center}
.globe{width:min(230px,66%)}
.globe svg{width:100%;height:auto;display:block}
.globe .g-fill{fill:rgba(212,175,55,.05)}
html[data-theme="light"] .globe .g-fill{fill:rgba(154,116,20,.06)}
.globe .g-line{fill:none;stroke:var(--gold);stroke-width:1.4;opacity:.4}
.globe .g-edge{fill:none;stroke:var(--gold);stroke-width:2;opacity:.75}
.globe .g-spin{transform-box:view-box;transform-origin:100px 100px;animation:globeSpin 26s linear infinite}
.globe .g-pin-dot{fill:var(--gold-light);stroke:none}
.globe .g-pin-ring{fill:none;stroke:var(--gold-light);stroke-width:1.6;transform-box:view-box;transform-origin:122px 112px;animation:pinPulse 3.2s ease-out infinite}
.globe-note{color:var(--muted);font-size:.94rem;max-width:38ch;margin-inline:auto}
.globe-note strong{color:var(--gold-light);font-weight:500}

.faq{display:grid;gap:12px}
.faq details{
  background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:0;overflow:hidden;transition:border-color .3s;
}
.faq details[open]{border-color:var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 52px 18px 22px;position:relative;
  font-family:var(--font-display);font-size:1.12rem;color:var(--text);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  color:var(--gold);font-size:1.4rem;transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{padding:0 22px 20px;color:var(--muted)}

/* ---------------- Footer ---------------- */
.site-footer{margin-top:40px;border-top:1px solid var(--line-soft);background:linear-gradient(180deg,transparent,rgba(212,175,55,.04))}
.footer-grid{
  display:grid;grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);gap:clamp(26px,4vw,48px);
  padding:clamp(48px,6vw,72px) 0 clamp(30px,4vw,44px);
}
.f-brand{display:grid;gap:14px;align-content:start;justify-items:start}
.f-brand .brand{margin:0}
.f-note{color:var(--muted);font-size:.92rem}
.f-col h3{font-size:.8rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-family:var(--font-body);font-weight:400;margin-bottom:16px}
.f-col ul{display:grid;gap:9px}
.f-col a{color:var(--muted);font-size:.95rem}
.f-col a:hover{color:var(--gold-light)}
.nl-form{display:flex;border:1px solid var(--line-soft);border-radius:999px;overflow:hidden;background:rgba(11,11,11,.3);transition:border-color .3s,box-shadow .3s}
html[data-theme="light"] .nl-form{background:rgba(255,253,246,.7)}
.nl-form:focus-within{border-color:var(--gold);box-shadow:var(--glow)}
.nl-form input{flex:1;background:none;border:0;outline:0;padding:.8em 1.2em;color:var(--text);min-width:0}
.nl-form input::placeholder{color:var(--muted)}
.nl-form button{border-radius:0 999px 999px 0;padding:.8em 1.4em}
.nl-msg{font-size:.85rem;min-height:1.3em;margin-top:10px}
.nl-msg.ok{color:var(--gold-light)}
.nl-msg.err{color:#E8907F}
.f-legal{display:flex;gap:16px;margin-top:14px;font-size:.85rem}
.footer-bottom{border-top:1px solid var(--line-soft);padding:20px 0}
.fb-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;color:var(--muted);font-size:.88rem}
.fb-inner strong{color:var(--gold-light);font-weight:500}
.to-top{
  position:fixed;right:22px;bottom:22px;z-index:210;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;background:var(--card-solid);border:1px solid var(--line);
  color:var(--gold-light);box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(12px);
  transition:all .35s var(--ease);
}
.to-top svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{box-shadow:var(--shadow),var(--glow);transform:translateY(-3px)}

/* ---------------- Toast ---------------- */
.toast{
  position:fixed;left:50%;bottom:30px;transform:translate(-50%,16px);z-index:360;
  background:var(--card-solid);border:1px solid var(--line);color:var(--gold-light);
  padding:.8em 1.6em;border-radius:999px;box-shadow:var(--shadow),var(--glow);
  opacity:0;visibility:hidden;transition:all .35s var(--ease);pointer-events:none;
  font-size:.94rem;letter-spacing:.03em;max-width:88vw;text-align:center;
}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* ---------------- Cursor ---------------- */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:600;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .3s}
body.has-cursor .cursor-dot,body.has-cursor .cursor-ring{opacity:1}
.cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--gold-light);box-shadow:0 0 10px rgba(212,175,55,.9)}
.cursor-ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(212,175,55,.55);transition:width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease),opacity .3s}
.cursor-ring.on-link{width:52px;height:52px;margin:-26px 0 0 -26px;border-color:var(--gold)}

/* ---------------- Reveal & page transitions ---------------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.12s}
[data-reveal-delay="2"]{transition-delay:.24s}
[data-reveal-delay="3"]{transition-delay:.36s}
[data-reveal-delay="4"]{transition-delay:.48s}
[data-reveal-delay="5"]{transition-delay:.6s}
body.page-enter main{animation:pageIn .55s var(--ease) both}
body.page-exit{opacity:0;transition:opacity .24s ease}

/* ---------------- Jap counter (home) ---------------- */
.jap-card{gap:6px}
.jap-modes{margin:14px 0 4px}
.jap-modes .chip{font-size:.82rem;padding:.42em 1em}
.jap-goal{display:grid;gap:12px;justify-items:center;margin:6px 0 2px}
.jap-goal .chip{font-size:.82rem;padding:.42em .95em}
.jap-custom{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:.84rem}
.jap-custom input{
  width:104px;text-align:center;background:rgba(11,11,11,.35);
  border:1px solid var(--line-soft);border-radius:999px;padding:.42em .8em;
  color:var(--text);transition:border-color .3s,box-shadow .3s;
}
html[data-theme="light"] .jap-custom input{background:rgba(255,253,246,.7)}
.jap-custom input:focus{outline:none;border-color:var(--gold);box-shadow:var(--glow)}
.jap-custom input::-webkit-outer-spin-button,
.jap-custom input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.jap-custom input[type=number]{-moz-appearance:textfield;appearance:textfield}
.jap-session{
  color:var(--gold-light);font-size:.9rem;letter-spacing:.1em;
  text-transform:uppercase;min-height:1.4em;
}
.jap-lifetime{color:var(--muted);font-size:.82rem;letter-spacing:.08em;margin-top:2px}
.jap-tap{
  width:100%;justify-content:center;font-size:1.1rem;padding:1.15em 2em;
  transition:transform .12s var(--ease),box-shadow .3s var(--ease);
}
.jap-tap:active{transform:scale(.965)}
.jap-tap .jap-tap-sub{
  display:block;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  opacity:.72;font-weight:400;margin-top:2px;
}
.jap-toggles{margin-top:18px;gap:14px 22px;max-width:none;justify-content:center}
.jap-toggles .switch-label{font-size:.86rem}
.jap-note{font-size:.78rem;color:var(--muted);opacity:.85;margin-top:10px}
.jap-actions .btn-danger{color:#E8907F;border-color:rgba(232,144,127,.45)}
html[data-theme="light"] .jap-actions .btn-danger{color:#B23B2A;border-color:rgba(178,59,42,.4)}

/* ---------------- Mantra library ---------------- */
.lib-toolbar{display:grid;gap:16px;padding:clamp(18px,2.5vw,26px)}
.lib-filters{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:12px}
.select-field{display:grid;gap:6px}
.select-field span{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.select-field select{
  appearance:none;-webkit-appearance:none;font:inherit;color:var(--text);
  background:rgba(11,11,11,.35) no-repeat right 1em center;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-size:6px 6px,6px 6px;background-position:right 1.2em top 55%,right .95em top 55%;
  border:1px solid var(--line-soft);border-radius:999px;padding:.7em 2.6em .7em 1.2em;
  width:100%;cursor:pointer;transition:border-color .3s,box-shadow .3s;
}
html[data-theme="light"] .select-field select{background-color:rgba(255,253,246,.7)}
.select-field select:focus{outline:none;border-color:var(--gold);box-shadow:var(--glow)}
.select-field select option{background:var(--card-solid);color:var(--text)}

.group-rail{display:flex;gap:9px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:thin}
.group-rail::-webkit-scrollbar{height:6px}
.group-rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px;border:0}
.group-rail .chip{flex:none}
.group-rail .chip small{display:block;font-size:.62rem;letter-spacing:.06em;opacity:.72;text-transform:none}

.lib-meta{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:10px;margin:20px 4px 14px;color:var(--muted);font-size:.86rem;letter-spacing:.05em;
}
.lib-total{color:var(--gold-light)}
.lib-total b{font-weight:600}

.mantra-card{gap:12px}
.m-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.m-tags{display:flex;flex-wrap:wrap;gap:7px}
.m-tags .tag{font-size:.64rem;padding:.28em .8em}
.m-tags .tag-type{color:var(--gold-light);border-color:var(--line-soft)}
.m-deity{color:var(--gold);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase}
.m-scripts{display:flex;gap:6px;margin-top:2px}
.m-scripts button{
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  border:1px solid transparent;border-radius:999px;padding:.28em .8em;transition:all .3s var(--ease);
}
.m-scripts button[aria-pressed="true"]{color:var(--gold-light);border-color:var(--line);background:rgba(212,175,55,.09)}
.m-body{min-height:4.6em}
.m-iast{color:var(--muted);font-size:1rem;letter-spacing:.03em;font-style:italic;line-height:1.75}
.m-pron{color:var(--muted);font-size:.82rem;letter-spacing:.05em;opacity:.9}
.m-facts{display:grid;gap:7px;margin-top:4px}
.m-facts div{display:grid;grid-template-columns:118px minmax(0, 1fr);gap:8px;align-items:baseline}
.m-facts dt{color:var(--gold);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase}
.m-facts dd{color:var(--muted);font-size:.92rem}
.m-more{margin-top:2px}
.m-more summary{
  cursor:pointer;list-style:none;color:var(--gold-light);font-size:.76rem;
  letter-spacing:.18em;text-transform:uppercase;padding:.35em 0;
}
.m-more summary::-webkit-details-marker{display:none}
.m-more summary::after{content:" ↓";opacity:.7}
.m-more[open] summary::after{content:" ↑"}
.m-more .gold-list{margin-top:6px}
.m-more p{color:var(--muted);font-size:.92rem;margin-top:8px}

.m-count{
  display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:16px;
  border-top:1px solid var(--line-soft);
}
.m-count-btn{
  display:inline-flex;align-items:center;gap:.5em;flex:1;justify-content:center;
  border:1px solid var(--gold);border-radius:999px;padding:.62em 1.1em;
  color:var(--gold-light);font-size:.92rem;letter-spacing:.04em;
  transition:transform .12s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.m-count-btn:hover{background:rgba(212,175,55,.12);box-shadow:var(--glow)}
.m-count-btn:active{transform:scale(.96)}
.m-count-num{
  font-family:var(--font-display);font-size:1.5rem;font-weight:600;color:var(--gold-light);
  line-height:1;min-width:3.2ch;text-align:right;
}
.m-count-num.tick{animation:countPop .35s var(--ease)}
.m-count-meta{display:grid;gap:2px;text-align:right}
.m-count-meta small{color:var(--muted);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}
.m-count-reset{opacity:.6}
.m-count-reset:hover{opacity:1}

/* Pagination */
.pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:clamp(30px,4vw,44px)}
.pager button{
  min-width:42px;height:42px;padding:0 .8em;border-radius:999px;
  border:1px solid var(--line-soft);color:var(--muted);font-size:.92rem;
  transition:all .3s var(--ease);
}
.pager button:hover:not(:disabled){color:var(--gold-light);border-color:var(--line)}
.pager button[aria-current="page"]{
  background:linear-gradient(135deg,var(--btn-from),var(--btn-to));
  color:var(--btn-ink);border-color:transparent;font-weight:600;
}
.pager button:disabled{opacity:.35;cursor:not-allowed}
.pager .pager-gap{color:var(--muted);padding:0 .2em;align-self:center}
.pager-jump{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.82rem;margin-left:8px}
.pager-jump input{
  width:66px;text-align:center;background:rgba(11,11,11,.35);border:1px solid var(--line-soft);
  border-radius:999px;padding:.4em .6em;color:var(--text);
}
html[data-theme="light"] .pager-jump input{background:rgba(255,253,246,.7)}
.pager-jump input:focus{outline:none;border-color:var(--gold)}

/* ---------------- Pose illustrations (yoga & exercise) ---------------- */
.pose-frame{
  position:relative;display:grid;place-items:center;
  color:var(--gold);width:100%;
}
.pose-frame .pose-svg{width:min(150px,60%);height:auto;display:block;overflow:visible}
.pose-frame-lg{
  margin:0 auto 4px;padding:10px;width:min(230px,62vw);
  border:1px solid var(--line-soft);border-radius:var(--r-md);
  background:radial-gradient(circle at 50% 40%, rgba(212,175,55,.07), transparent 70%);
}
.pose-frame-lg .pose-svg{width:100%}
html[data-theme="light"] .pose-frame{color:var(--gold-deep)}
.practice-card .p-illus .pose-svg{width:118px}

.step-list{counter-reset:st;display:grid;gap:.4em;margin:.2em 0;list-style:none;padding-left:0}
.step-list li{
  position:relative;padding-left:2.1em;color:var(--muted);font-size:.93rem;line-height:1.6;
  counter-increment:st;
}
.step-list li::before{
  content:counter(st);position:absolute;left:0;top:.12em;
  width:1.5em;height:1.5em;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--gold);font-size:.7rem;font-weight:500;
}
.player-how{width:100%;max-width:46ch;margin-inline:auto;text-align:left}
.player-how .step-list li{font-size:.9rem}

/* ---------------- Breathing ring ---------------- */
.breath-ring{
  position:absolute;inset:0;width:100%;height:100%;
  transform:rotate(-90deg);pointer-events:none;
}
.breath-ring .ring-fg{stroke:url(#breathGrad)}
.breath-secs{
  display:block;color:#141005;font-family:var(--font-display);
  font-size:1.5rem;font-weight:600;line-height:1;margin-top:4px;opacity:.72;
}
.breath-legend{
  display:flex;justify-content:center;flex-wrap:wrap;gap:8px 20px;
  color:var(--muted);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
}
.breath-legend b{color:var(--gold-light);font-weight:600;margin-right:.4em}

/* ---------------- About page brand showcase ----------------
   The registered artwork, whole and unaltered, on a clear-space plate. */
.about-emblem{
  display:grid;justify-items:center;gap:18px;
  margin:clamp(30px,5vw,54px) auto;max-width:520px;
}
.about-emblem figcaption{color:var(--muted);font-size:.88rem;font-style:italic;text-align:center;max-width:44ch}
.about-emblem figcaption strong{color:var(--gold-light);font-weight:500}
html[data-theme="light"] .about-emblem figcaption{color:#4F452F}

/* ---------------- Shared: tables, mini headings ---------------- */
.mini-head{
  color:var(--gold);font-family:var(--font-body);font-weight:400;
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;margin:16px 0 6px;
}
.table-wrap{overflow-x:auto;border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--card)}
.data-table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:640px}
.data-table th,.data-table td{padding:.85em 1em;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)}
.data-table thead th{
  color:var(--gold);font-family:var(--font-body);font-weight:400;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  background:rgba(212,175,55,.06);
}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table tbody tr:hover{background:rgba(212,175,55,.045)}
.data-table td{color:var(--muted)}
.data-table td strong{color:var(--text);font-weight:500}
.data-table .devanagari{color:var(--gold-light);font-size:1.05em}
html[data-theme="light"] .data-table .devanagari{color:var(--gold-deep)}
.v-note{color:var(--muted);opacity:.8;font-size:.82em;font-style:italic}

/* ---------------- Jain page ---------------- */
.navkar-card{text-align:left}
.navkar-body .m-dev{font-size:clamp(1.2rem,2.4vw,1.55rem);line-height:2}
.navkar-lines{counter-reset:nk;display:grid;gap:12px;margin:22px 0 6px;list-style:none;padding-left:0}
.navkar-lines li{
  counter-increment:nk;display:grid;gap:2px;position:relative;
  padding:12px 14px 12px 46px;border:1px solid var(--line-soft);border-radius:var(--r-sm);
  background:rgba(212,175,55,.035);
}
.navkar-lines li::before{
  content:counter(nk);position:absolute;left:14px;top:14px;
  width:1.7em;height:1.7em;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--gold);font-size:.68rem;
}
.nl-dev{font-family:var(--font-dev);color:var(--gold-light);font-size:1.12rem;line-height:1.7}
html[data-theme="light"] .nl-dev{color:var(--gold-deep)}
.nl-tr{color:var(--muted);font-size:.82rem;font-style:italic;letter-spacing:.04em}
.nl-mean{color:var(--muted);font-size:.92rem;margin-top:3px}

.tirth-grid{align-items:stretch}
.tirth-card{display:flex;flex-direction:column;gap:10px}
.tirth-card .t-num{
  font-family:var(--font-display);font-size:2.2rem;color:var(--line);
  font-weight:600;line-height:1;flex:none;
}
.t-dev{color:var(--gold-light);font-size:1.15rem;margin-top:2px}
html[data-theme="light"] .t-dev{color:var(--gold-deep)}
.m-count-row{display:flex;justify-content:flex-end;margin-top:auto}
.r-dev{color:var(--gold-light);font-size:.9em;font-weight:400;margin-left:.4em}
html[data-theme="light"] .r-dev{color:var(--gold-deep)}

/* ---------------- Rishi & Guru library ---------------- */
.sage-grid{align-items:stretch}
.sage-card{display:flex;flex-direction:column;gap:10px;transition:border-color .4s var(--ease),box-shadow .4s var(--ease)}
.sage-card.is-open{border-color:var(--line);box-shadow:var(--shadow),var(--glow)}
.sage-card.flash{animation:sageFlash 2.2s var(--ease)}
.sage-dev{color:var(--gold-light);font-size:1.2rem;line-height:1.6;margin-top:2px}
html[data-theme="light"] .sage-dev{color:var(--gold-deep)}
.sage-tr{color:var(--muted);font-family:var(--font-body);font-size:.8rem;font-style:italic;letter-spacing:.05em;margin-left:.5em}
.sage-glyph{font-family:var(--font-dev);font-size:1.6rem;color:var(--line);line-height:1;flex:none}
.sage-card .p-desc{font-family:var(--font-display);font-size:1.06rem;color:var(--text);line-height:1.6}
.sage-full{border-top:1px solid var(--line-soft);margin-top:6px;padding-top:14px}
.sage-story{color:var(--muted);font-size:.93rem}
.sage-rel{margin-top:6px}
.sage-rel .chip{font-size:.8rem;padding:.35em .9em}
.sage-actions{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:14px}
.sage-actions .btn{flex:1;justify-content:center}
#rRail .chip small{opacity:.62;margin-left:.4em;font-size:.86em}

/* ---------------- TTS lab (internal) ---------------- */
.lab-warn{border-color:rgba(232,144,127,.4)}
.lab-warn h2{font-size:1.3rem;margin-bottom:12px;color:#E8907F}
html[data-theme="light"] .lab-warn h2{color:#B23B2A}
.lab-warn code{background:rgba(212,175,55,.12);border-radius:5px;padding:.1em .45em;font-size:.92em}
.om-demo{display:flex;align-items:center;justify-content:center;gap:clamp(16px,4vw,40px);flex-wrap:wrap;margin-top:20px}
.om-demo>div{text-align:center}
.om-arrow{color:var(--gold);font-size:1.6rem;opacity:.7}
.lab-dev{font-size:clamp(1.4rem,3vw,1.9rem);line-height:1.9;color:var(--gold-light)}
html[data-theme="light"] .lab-dev{color:var(--gold-deep)}
.lab-bench .mini-head{margin-top:22px}
.lab-source{margin:12px 0 4px}
.lab-tr{color:var(--muted);font-style:italic;font-size:.92rem}
.lab-why{color:var(--muted);font-size:.92rem;margin-top:8px;max-width:70ch}
.lab-why strong{color:var(--gold);font-weight:400;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase}
.lab-note{color:var(--muted);font-size:.86rem;margin:8px 0}
.lab-sent{
  background:rgba(11,11,11,.45);border:1px solid var(--line-soft);border-radius:var(--r-sm);
  padding:14px 16px;color:var(--text);font-family:var(--font-dev);font-size:1.06rem;line-height:1.9;
  white-space:pre-wrap;word-break:break-word;overflow-x:auto;
}
html[data-theme="light"] .lab-sent{background:rgba(255,253,246,.85)}
.lab-alert{color:#E8907F;font-size:.88rem;margin-top:8px}
html[data-theme="light"] .lab-alert{color:#B23B2A}
.lab-row{display:flex;flex-wrap:wrap;align-items:end;gap:16px;margin-top:10px}
.lab-range,.lab-proxy{display:grid;gap:5px;color:var(--muted);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
.lab-range{grid-template-columns:auto minmax(0, 1fr) auto;align-items:center;gap:10px;min-width:230px}
.lab-range input{accent-color:var(--gold)}
.lab-range output{color:var(--gold-light);font-variant-numeric:tabular-nums}
html[data-theme="light"] .lab-range output{color:var(--gold-deep)}
.lab-proxy input,.lab-key input{
  background:rgba(11,11,11,.4);border:1px solid var(--line-soft);border-radius:999px;
  padding:.55em 1.1em;color:var(--text);min-width:230px;font-family:var(--font-body);
  text-transform:none;letter-spacing:normal;
}
html[data-theme="light"] .lab-proxy input,html[data-theme="light"] .lab-key input{background:rgba(255,253,246,.85)}
.lab-proxy input:focus,.lab-key input:focus{outline:none;border-color:var(--gold);box-shadow:var(--glow)}
.eng-card{display:flex;flex-direction:column;gap:12px}
.lab-cost{color:var(--gold-light);font-size:.82rem;letter-spacing:.06em}
html[data-theme="light"] .lab-cost{color:var(--gold-deep)}
.lab-key{display:grid;gap:6px;color:var(--muted);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
.lab-key input{width:100%;min-width:0}
.voice-group{margin-top:10px}
.voice-group .mini-head{margin:8px 0 6px}
.voice-list{display:flex;flex-wrap:wrap;gap:8px}
.eng-play{
  display:inline-flex;align-items:center;gap:.5em;
  border:1px solid var(--line-soft);border-radius:999px;padding:.45em 1em;
  color:var(--muted);font-size:.85rem;transition:all .3s var(--ease);
}
.eng-play svg{width:.9em;height:.9em;fill:currentColor;stroke:none;flex:none}
.eng-play:hover{color:var(--gold-light);border-color:var(--line)}
html[data-theme="light"] .eng-play:hover{color:var(--gold-deep)}
.eng-play.is-playing{background:linear-gradient(135deg,var(--btn-from),var(--btn-to));color:var(--btn-ink);border-color:transparent}
.eng-status{min-height:1.4em;font-size:.84rem;color:var(--muted)}
.eng-status.is-err{color:#E8907F}
html[data-theme="light"] .eng-status.is-err{color:#B23B2A}
.lab-empty{color:var(--muted);font-size:.88rem;font-style:italic}
.eng-score{margin-top:auto;padding-top:14px;border-top:1px solid var(--line-soft)}
.score-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:5px 0;color:var(--muted);font-size:.88rem}
.stars{display:inline-flex;gap:2px}
.stars button{color:var(--line);font-size:1.15rem;line-height:1;padding:0 1px;transition:color .2s}
.stars button.on{color:var(--gold)}
.stars button:hover{color:var(--gold-light)}
.eng-score textarea{
  width:100%;margin-top:10px;background:rgba(11,11,11,.4);border:1px solid var(--line-soft);
  border-radius:var(--r-sm);padding:.6em .9em;color:var(--text);font-size:.88rem;resize:vertical;
}
html[data-theme="light"] .eng-score textarea{background:rgba(255,253,246,.85)}
.eng-score textarea:focus{outline:none;border-color:var(--gold)}
.lab-export{
  width:100%;margin-top:14px;background:rgba(11,11,11,.5);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:14px 16px;color:var(--text);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.84rem;line-height:1.7;
}
html[data-theme="light"] .lab-export{background:#FFFDF7}

/* ---------------- Pace slider + TTS honesty note ---------------- */
.pace-row{
  display:grid;grid-template-columns:auto minmax(0, 1fr) auto;align-items:center;gap:10px;
  margin:2px 0 4px;color:var(--muted);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
}
.pace-row input{accent-color:var(--gold);min-width:0}
.pace-row output{color:var(--gold-light);font-variant-numeric:tabular-nums;letter-spacing:normal;font-size:.8rem}
html[data-theme="light"] .pace-row output,
html[data-theme="light"] .pace-row{color:#6B4E0A}

.tts-note{
  display:flex;gap:14px;align-items:flex-start;
  margin:clamp(20px,3vw,30px) 0 4px;padding:16px 20px;
  border:1px solid var(--line-soft);border-left:3px solid var(--gold);
  border-radius:var(--r-md);background:rgba(212,175,55,.07);
}
.tts-note svg{
  width:22px;height:22px;flex:none;margin-top:2px;fill:none;stroke:var(--gold);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
html[data-theme="light"] .tts-note svg{stroke:#6B4E0A}
.tts-note p{color:var(--muted);font-size:.9rem;line-height:1.7;max-width:none;margin:0}
.tts-note strong{color:var(--text);font-weight:500}
html[data-theme="light"] .tts-note p{color:#3A3020}

/* ---------------- Responsive ---------------- */
@media (max-width:1240px){
  .nav-list{gap:1px}
  .nav-list a{font-size:.88rem;padding:.55em .58em;letter-spacing:.02em}
    .header-inner{gap:16px}
}
@media (max-width:1080px){
  .grid-4{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .footer-grid{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr)}
    .nav-list a{font-size:.84rem;padding:.55em .48em}
}
@media (max-width:960px){
  .rudra-grid,.contact-grid{grid-template-columns:minmax(0, 1fr)}
  .sage-grid,.tirth-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .grid-3{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .mantra-grid{grid-template-columns:minmax(0, 1fr)}
  .sage-grid,.tirth-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
/* The drawer used to take over at 900px. With a tenth nav item (Wellbeing) and
   the language button added, the header row no longer fits at 1024 — iPad
   landscape — so the breakpoint moves up rather than letting the controls
   spill off the edge. */
@media (max-width:1080px){
  #navToggle{display:flex}
  #siteNav{
    position:fixed;inset:var(--header-h) 0 auto 0;z-index:190;
    background:rgba(11,11,11,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line-soft);
    transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:all .35s var(--ease);max-height:calc(100vh - var(--header-h));overflow:auto;
  }
  html[data-theme="light"] #siteNav{background:rgba(250,246,236,.97)}
  body.nav-open #siteNav{transform:none;opacity:1;visibility:visible}
  .nav-list{flex-direction:column;align-items:stretch;padding:18px 6%;gap:2px}
  .nav-list a{font-size:1.1rem;padding:.8em .4em;border-bottom:1px solid var(--line-soft)}
  .nav-list a::after{display:none}
  .nav-extra{display:grid;padding:4px 6% 22px;gap:2px}
  .nav-extra a{
    display:block;color:var(--gold);font-size:1.02rem;
    padding:.75em .4em;border-bottom:1px solid var(--line-soft);
  }
  .nav-extra a:last-child{border-bottom:0}
}
@media (max-width:820px){
  .lib-filters{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr)}
  .lib-filters .select-field:last-child{grid-column:1 / -1}
}
@media (max-width:720px){
  .grid-2,.grid-3{grid-template-columns:minmax(0, 1fr)}
  .sage-grid,.tirth-grid{grid-template-columns:minmax(0, 1fr)}
  .navkar-lines li{padding-left:40px}
  .om-demo{flex-direction:column;gap:12px}
  .om-arrow{transform:rotate(90deg)}
  .lab-row{flex-direction:column;align-items:stretch}
  .lab-proxy input,.lab-range{min-width:0;width:100%}
  .om-demo{flex-direction:column;gap:12px}
  .om-arrow{transform:rotate(90deg)}
  .lab-row{flex-direction:column;align-items:stretch}
  .lab-proxy input,.lab-range{min-width:0;width:100%}
  .sage-grid,.tirth-grid{grid-template-columns:minmax(0, 1fr)}
  .navkar-lines li{padding-left:40px}
  .breath-legend{gap:6px 14px;font-size:.7rem}
  .m-facts div{grid-template-columns:minmax(0, 1fr);gap:2px}
  .m-facts dd{margin-bottom:4px}
  .lib-meta{flex-direction:column;align-items:flex-start;gap:4px}
  .pager-jump{margin-left:0;width:100%;justify-content:center;margin-top:6px}
  .footer-grid{grid-template-columns:minmax(0, 1fr)}
  .def-list div{grid-template-columns:minmax(0, 1fr)}
    .hero{min-height:calc(94svh - var(--header-h))}
  .deco{width:90px;opacity:.1}
  .notice-strip{flex-direction:column;align-items:flex-start}
  .toggle-row{justify-content:center}
}
@media (max-width:480px){
  .hero-cta .btn{width:100%;justify-content:center}
  .jap-actions{flex-direction:column}
  .jap-actions .btn{width:100%;justify-content:center}
  .control-row .btn{flex:1;justify-content:center}
  .shiva-icons{gap:22px}
  .lib-filters{grid-template-columns:minmax(0, 1fr)}
  .lib-filters .select-field:last-child{grid-column:auto}
  .m-count{flex-wrap:wrap}
  .m-count-btn{flex:1 1 100%;order:2}
  .m-count-meta{order:1;flex:1;text-align:left}
  .pager button{min-width:38px;height:38px}
}

/* ---------------- Print ---------------- */
@media print{
  #siteHeader,.site-footer,.to-top,#particles,.scroll-progress,#loader,.hero-cta,.control-row{display:none!important}
  body{background:#fff;color:#000}
}

/* ============================================================
   LIGHT MODE LEGIBILITY
   The pale-on-pale problem was not raw contrast — the tokens already
   passed AA. It was that the site leans on 0.7rem uppercase labels
   with 0.24em tracking at weight 400, and wide-tracked thin type of
   that size reads as a smudge on cream however dark the hex is.
   So: darken the accent ramp AND add weight back to every tracked
   label, and stop using weight 300 anywhere on a light ground.
   These rules sit last in the file so they win on order.
   ============================================================ */
html[data-theme="light"]{
  /* a fractionally cooler, cleaner page so cream cards separate from it */
  --bg:#FAF6ED;
  --bg-2:#F0E8D6;
}

/* --- nothing on a light ground is thinner than 400 --- */
html[data-theme="light"] .lead,
html[data-theme="light"] .hero-sub,
html[data-theme="light"] p{font-weight:400}
html[data-theme="light"] .lead{color:#3A3122}

/* --- tracked uppercase labels: darker AND heavier --- */
html[data-theme="light"] .kicker,
html[data-theme="light"] .m-deity,
html[data-theme="light"] .mini-head,
html[data-theme="light"] .practice-card h4,
html[data-theme="light"] .f-col h3,
html[data-theme="light"] .f-col h4,
html[data-theme="light"] .select-field span,
html[data-theme="light"] .m-mean strong,
html[data-theme="light"] .m-sig strong,
html[data-theme="light"] .breath-legend,
html[data-theme="light"] .sage-role,
html[data-theme="light"] .tirth-meta,
html[data-theme="light"] .field-label,
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .stat-label,
html[data-theme="light"] .wb-kicker{
  color:#4A3505;
  font-weight:600;
  letter-spacing:.16em;
}
html[data-theme="light"] .kicker::before,
html[data-theme="light"] .kicker::after{opacity:.8}

/* --- navigation: full-strength ink, not muted --- */
html[data-theme="light"] .nav-list a,
html[data-theme="light"] .nav-extra a,
html[data-theme="light"] .footer-bottom a,
html[data-theme="light"] .f-col a{color:#231C0E;font-weight:450}
html[data-theme="light"] .nav-list a.active,
html[data-theme="light"] .nav-list a:hover,
html[data-theme="light"] .f-col a:hover{color:#4A3505;font-weight:600}

/* --- the brand tagline is 9px; it needs every bit of help --- */
html[data-theme="light"] .brand-type-tag{color:#3A3122;font-weight:500}
html[data-theme="light"] .brand-type-lg .brand-type-tag{color:#4A3505;font-weight:600}

/* --- secondary copy: stop dimming it with opacity --- */
html[data-theme="light"] .fine-note{opacity:1;color:#3F3627}
html[data-theme="light"] .m-pron,
html[data-theme="light"] .search-hint,
html[data-theme="light"] .lib-meta p,
html[data-theme="light"] .f-note{color:#3A3122}

/* --- structure: cards and rules need to be seen, not felt --- */
html[data-theme="light"] .card,
html[data-theme="light"] .m-card,
html[data-theme="light"] .sage-card,
html[data-theme="light"] .tirth-card,
html[data-theme="light"] .practice-card{
  border-color:rgba(58,42,3,.30);
  box-shadow:0 10px 26px rgba(58,42,3,.10);
}
html[data-theme="light"] .data-table th{color:#3A2A03;font-weight:600}
html[data-theme="light"] .data-table td,
html[data-theme="light"] .data-table th{border-color:rgba(58,42,3,.24)}

/* --- form controls --- */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea{color:#120E07;border-color:rgba(58,42,3,.40)}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder{color:#5C5240}

/* --- the decorative Om watermarks were almost invisible; give them presence --- */
html[data-theme="light"] .hero-om{color:rgba(106,76,8,.10)}

/* ============================================================
   COMPLETE STOTRAS — verse by verse
   ============================================================ */
.stotra-card{margin-bottom:clamp(22px,4vw,38px)}
.stotra-card .m-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5em}
.s-dev{font-size:.72em;color:var(--gold);font-weight:400}

.stotra-meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:10px 20px;margin:16px 0 4px;padding:14px 0;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.stotra-meta dt{
  color:var(--gold);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:3px;
}
.stotra-meta dd{color:var(--text);font-size:.92rem;line-height:1.45}

.verse-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:4px}
.verse{
  position:relative;padding:18px 0 20px 0;border-top:1px solid var(--line-soft);
}
.verse:first-child{border-top:0}
.verse-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.verse-n{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:30px;padding:0 8px;border-radius:999px;
  background:var(--card-solid);border:1px solid var(--line);
  color:var(--gold);font-family:var(--font-display);font-size:.94rem;font-weight:600;
}
.verse .m-body{margin:10px 0 2px}
.verse-mean{color:var(--text);margin-top:10px;line-height:1.62}
.verse-note{
  color:var(--muted);font-size:.87rem;line-height:1.6;margin-top:8px;
  padding-left:12px;border-left:2px solid var(--line);
}
.verse-note strong{color:var(--gold);font-weight:500}
.stotra-appendix{margin-top:18px}
.stotra-appendix .verse-list{margin-top:10px}

/* ---------------- Nava smarana index ---------------- */
.smarana-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.smarana-list li{
  display:grid;grid-template-columns:auto minmax(0, 1fr);gap:16px;align-items:start;
  padding:16px 0;border-top:1px solid var(--line-soft);
}
.smarana-list li:first-child{border-top:0}
.smarana-list li.is-here{
  background:linear-gradient(90deg,rgba(212,175,55,.09),transparent 60%);
  border-radius:12px;padding-inline:14px;
}
html[data-theme="light"] .smarana-list li.is-here{
  background:linear-gradient(90deg,rgba(106,76,8,.10),transparent 60%);
}
.sm-n{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:999px;
  border:1px solid var(--line);color:var(--gold);
  font-family:var(--font-display);font-size:.96rem;font-weight:600;
}
.smarana-list h3{font-size:1.06rem;margin:0 0 4px;display:flex;flex-wrap:wrap;gap:.5em;align-items:baseline}
.sm-alt{font-size:.78rem;color:var(--muted);font-family:var(--font-body);font-weight:400;font-style:italic}
.smarana-list p{color:var(--muted);line-height:1.6;margin:0}
.sm-count{
  color:var(--gold) !important;font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;margin-top:6px !important;
}
.note-card{margin-top:26px}
.note-card p{color:var(--muted);line-height:1.68}
.text-link{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.text-link:hover{color:var(--gold-light)}

@media (max-width:600px){
  .stotra-meta{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:10px 14px}
  .smarana-list li{grid-template-columns:auto minmax(0, 1fr);gap:12px}
  .verse-note{padding-left:10px}
}
@media (max-width:420px){
  .stotra-meta{grid-template-columns:minmax(0, 1fr)}
}

/* ============================================================
   NATURE AMBIENCE MIXER
   ============================================================ */
.amb-panel{padding:clamp(18px,3vw,28px)}
.amb-top{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px 22px;padding-bottom:18px;margin-bottom:18px;
  border-bottom:1px solid var(--line-soft);
}
.amb-master{display:flex;align-items:center;gap:12px;flex:1 1 260px;min-width:0}
.amb-master > span{
  color:var(--gold);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  white-space:nowrap;
}
.amb-master input[type="range"]{flex:1 1 auto;min-width:90px}
.amb-master output{
  color:var(--text);font-variant-numeric:tabular-nums;font-size:.86rem;
  min-width:3.4em;text-align:right;
}

.amb-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:12px;
}
.amb-card{
  border:1px solid var(--line-soft);border-radius:var(--r-md);
  background:var(--card);padding:4px 4px 12px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
}
.amb-card.is-on{
  border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold-deep) inset, 0 6px 22px rgba(212,175,55,.13);
}
html[data-theme="light"] .amb-card.is-on{box-shadow:0 0 0 1px var(--gold) inset, 0 6px 18px rgba(106,76,8,.14)}

.amb-btn{
  display:grid;grid-template-columns:auto minmax(0, 1fr);grid-template-rows:auto auto;
  gap:2px 12px;width:100%;text-align:left;
  background:none;border:0;padding:12px 12px 8px;cursor:pointer;
  border-radius:var(--r-sm);color:inherit;
}
.amb-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.amb-btn svg{
  grid-row:1 / span 2;width:26px;height:26px;align-self:center;
  fill:none;stroke:var(--muted);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .3s var(--ease);
}
.amb-card.is-on .amb-btn svg{stroke:var(--gold)}
.amb-name{font-family:var(--font-display);font-size:1.06rem;color:var(--text);line-height:1.2}
.amb-hint{font-size:.74rem;color:var(--muted);line-height:1.35}
.amb-card.is-on .amb-name{color:var(--gold-light)}
html[data-theme="light"] .amb-card.is-on .amb-name{color:var(--gold-deep)}

.amb-level{display:block;padding:0 14px}
.amb-level input[type="range"]{width:100%;opacity:.5;transition:opacity .3s var(--ease)}
.amb-card.is-on .amb-level input[type="range"]{opacity:1}

@media (max-width:560px){
  .amb-grid{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:10px}
  .amb-hint{display:none}
  .amb-btn{grid-template-columns:auto minmax(0, 1fr);grid-template-rows:auto;padding:12px 10px 6px}
  .amb-btn svg{grid-row:1}
  .amb-name{font-size:.98rem}
  .amb-top{flex-direction:column;align-items:stretch}
  .amb-top .btn{width:100%}
  /* .amb-master carries flex:1 1 260px for the horizontal layout. Once .amb-top
     becomes a column that basis is read on the BLOCK axis, so it became a 260px
     tall box with a large empty gap above the slider. Reset to content height. */
  .amb-master{flex:0 0 auto}
}
@media (max-width:380px){
  .amb-grid{grid-template-columns:minmax(0, 1fr)}
}

/* ============================================================
   WELLBEING
   The crisis treatment is intentionally louder than everything else on the
   page. Do not tone it down for visual harmony.
   ============================================================ */
.crisis-bar{
  display:grid;grid-template-columns:auto minmax(0, 1fr) auto;gap:16px 18px;align-items:center;
  padding:18px 22px;border-radius:var(--r-md);
  background:linear-gradient(100deg,rgba(196,60,44,.16),rgba(196,60,44,.06));
  border:1px solid rgba(224,88,68,.55);
}
html[data-theme="light"] .crisis-bar{
  background:linear-gradient(100deg,rgba(168,32,18,.10),rgba(168,32,18,.03));
  border-color:rgba(150,28,16,.5);
}
.crisis-bar-icon svg{
  width:30px;height:30px;fill:none;stroke:#E8705C;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
html[data-theme="light"] .crisis-bar-icon svg{stroke:#A8200F}
.crisis-bar-lead{color:var(--text);font-weight:500;margin:0 0 4px;line-height:1.45}
.crisis-bar-sub{color:var(--muted);font-size:.9rem;margin:0;line-height:1.5}
.crisis-bar-sub strong{color:#F0A395;font-weight:500}
html[data-theme="light"] .crisis-bar-sub strong{color:#8E1A0B;font-weight:600}

.crisis-panel{
  margin:18px 0;padding:18px 20px;border-radius:var(--r-md);
  background:rgba(196,60,44,.12);border:1px solid rgba(224,88,68,.5);
}
html[data-theme="light"] .crisis-panel{background:rgba(168,32,18,.07);border-color:rgba(150,28,16,.45)}
.crisis-heading{color:var(--text);font-weight:500;margin:0 0 12px;font-size:1.02rem}
.crisis-lines{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px}
.crisis-lines li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.crisis-tel{
  font-family:var(--font-display);font-size:1.34rem;font-weight:600;
  color:#F3B4A7;text-decoration:none;letter-spacing:.01em;
}
.crisis-tel:hover{text-decoration:underline}
html[data-theme="light"] .crisis-tel{color:#8E1A0B}
.crisis-who{color:var(--muted);font-size:.84rem}
.crisis-foot{color:var(--muted);font-size:.86rem;line-height:1.55;margin:0}
.crisis-foot a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

/* ---------------- situation chooser ---------------- */
.sit-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:10px;margin-bottom:26px;
}
.sit-chip{
  display:grid;gap:3px;text-align:left;padding:14px 16px;cursor:pointer;
  background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-md);
  color:inherit;transition:border-color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease);
}
.sit-chip:hover{border-color:var(--gold);transform:translateY(-2px)}
.sit-chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sit-chip[aria-selected="true"]{
  border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold) inset, 0 8px 24px rgba(212,175,55,.12);
}
.sit-chip-name{font-family:var(--font-display);font-size:1.1rem;color:var(--text);line-height:1.25}
.sit-chip-sub{font-size:.78rem;color:var(--muted);line-height:1.4}
.sit-chip.is-crisis{border-color:rgba(224,88,68,.55);background:rgba(196,60,44,.09)}
.sit-chip.is-crisis .sit-chip-name{color:#F0A395}
.sit-chip.is-crisis[aria-selected="true"]{box-shadow:0 0 0 1px rgba(224,88,68,.8) inset}
html[data-theme="light"] .sit-chip.is-crisis{border-color:rgba(150,28,16,.5);background:rgba(168,32,18,.06)}
html[data-theme="light"] .sit-chip.is-crisis .sit-chip-name{color:#8E1A0B}

.sit-card{padding:clamp(20px,3.4vw,34px)}
.sit-card p{color:var(--muted);line-height:1.72;margin-bottom:14px}
.sit-open{
  font-family:var(--font-display);font-size:clamp(1.3rem,2.6vw,1.72rem);
  color:var(--gold-light);line-height:1.3;margin:0 0 16px;
}
html[data-theme="light"] .sit-open{color:var(--gold-deep)}
.sit-close{
  color:var(--text) !important;font-style:italic;
  padding-top:14px;margin-top:6px;border-top:1px solid var(--line-soft);
}
.is-crisis-card{border-color:rgba(224,88,68,.5)}
.sit-jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

.wb-practices{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;margin:10px 0 20px;
}
.wb-practice{
  padding:16px 18px;border-radius:var(--r-md);
  background:var(--bg-2);border:1px solid var(--line-soft);
}
.wb-practice h4{font-size:1.04rem;margin:0 0 8px;color:var(--text)}
.wb-how{color:var(--muted);font-size:.9rem;line-height:1.6;margin-bottom:8px !important}
.wb-dose{
  color:var(--gold) !important;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:8px !important;font-weight:600;
}
.wb-why{color:var(--muted);font-size:.85rem;font-style:italic;line-height:1.55;margin:0 !important}

/* ---------------- journal ---------------- */
.journal-card{padding:clamp(20px,3.4vw,32px)}
.journal-intro{color:var(--muted);line-height:1.68;margin-bottom:16px}
.journal-honest{
  padding:14px 16px;margin-bottom:20px;border-radius:var(--r-sm);
  background:var(--bg-2);border-left:3px solid var(--gold);
  color:var(--muted);font-size:.9rem;line-height:1.6;
}
.journal-honest strong{color:var(--gold-light)}
html[data-theme="light"] .journal-honest strong{color:var(--gold-deep)}
.journal-honest a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.journal-label{display:block;margin-bottom:8px;color:var(--text);font-weight:500}
#jrText{
  width:100%;padding:14px 16px;border-radius:var(--r-sm);resize:vertical;
  background:var(--card-solid);border:1px solid var(--line);color:var(--text);
  font-family:var(--font-body);font-size:1rem;line-height:1.6;
}
#jrText:focus{outline:2px solid var(--gold);outline-offset:1px}
.journal-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:14px}
.journal-count{color:var(--muted);font-size:.82rem}
.journal-response{margin-top:22px;padding-top:20px;border-top:1px solid var(--line-soft)}
.jr-reply{color:var(--text);font-size:1.06rem;line-height:1.6;margin-bottom:10px}
.jr-reply-sub{color:var(--muted);line-height:1.65;margin-bottom:12px}
.jr-prompts{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:9px}
.jr-prompts li{
  color:var(--muted);line-height:1.6;padding-left:18px;position:relative;
}
.jr-prompts li::before{content:"—";position:absolute;left:0;color:var(--gold)}

.journal-log-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:26px;
}
.journal-log-head .mini-head{margin:0}
.journal-log{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.journal-log li{
  padding:14px 16px;border-radius:var(--r-sm);
  background:var(--bg-2);border:1px solid var(--line-soft);
}
.jr-entry-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.jr-when{color:var(--gold);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}
.jr-sit{color:var(--muted);font-size:.72rem;font-style:italic;margin-right:auto}
.jr-del{width:30px;height:30px;margin-left:auto;flex:0 0 auto}
.journal-log p{color:var(--text);line-height:1.62;margin:0;white-space:pre-wrap}

/* ---------------- helplines ---------------- */
.help-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px;
}
.help-card{
  padding:18px 20px;border-radius:var(--r-md);position:relative;
  background:var(--card);border:1px solid var(--line-soft);
}
.help-card.is-primary{border-color:var(--gold)}
.help-tag{
  position:absolute;top:14px;right:16px;
  color:var(--gold);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;
}
.help-card h3{font-size:1.14rem;margin:0 0 2px;padding-right:70px}
.help-org{color:var(--muted);font-size:.78rem;margin:0 0 10px}
.help-tels{margin:0 0 8px;line-height:1.4}
.help-tels a{
  font-family:var(--font-display);font-size:1.2rem;font-weight:600;
  color:var(--gold-light);text-decoration:none;
}
html[data-theme="light"] .help-tels a{color:var(--gold-deep)}
.help-tels a:hover{text-decoration:underline}
.help-hours{color:var(--text);font-size:.84rem;margin:0 0 8px}
.help-note{color:var(--muted);font-size:.85rem;line-height:1.55;margin:0}

@media (max-width:700px){
  .crisis-bar{grid-template-columns:auto minmax(0, 1fr);gap:12px 14px}
  .crisis-bar .btn{grid-column:1 / -1;width:100%}
  .sit-grid{grid-template-columns:minmax(0, 1fr)}
  .wb-practices{grid-template-columns:minmax(0, 1fr)}
  .journal-log-head{flex-direction:column;align-items:flex-start;gap:8px}
}
@media (max-width:480px){
  .crisis-tel{font-size:1.2rem}
  .help-card h3{padding-right:0}
  .help-tag{position:static;display:block;margin-bottom:6px}
}

/* ============================================================
   PHYSIOTHERAPY BY CONDITION
   ============================================================ */
.physio-warn{
  padding:18px 22px;margin-bottom:22px;border-radius:var(--r-md);
  background:var(--bg-2);border-left:3px solid var(--gold);
  color:var(--muted);line-height:1.68;font-size:.94rem;
}
.physio-warn strong{color:var(--gold-light);font-weight:500}
html[data-theme="light"] .physio-warn strong{color:var(--gold-deep);font-weight:600}

.physio-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.physio-tabs .chip small{opacity:.7;font-size:.8em;margin-left:.35em}

.physio-list{display:grid;gap:clamp(16px,2.6vw,26px)}
.px-card{padding:clamp(20px,3vw,32px)}
.px-head{margin-bottom:14px}
.px-also{color:var(--muted);font-size:.88rem;font-style:italic;margin-top:4px}
.px-usually{color:var(--muted);line-height:1.72;margin-bottom:18px}

/* Red flags are deliberately loud and never collapsed. */
.px-flags{
  padding:16px 20px;margin-bottom:22px;border-radius:var(--r-md);
  background:rgba(196,60,44,.10);border:1px solid rgba(224,88,68,.45);
}
html[data-theme="light"] .px-flags{background:rgba(168,32,18,.06);border-color:rgba(150,28,16,.4)}
.px-flags h4{
  color:#F0A395;font-family:var(--font-body);font-weight:600;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;margin:0 0 10px;
}
html[data-theme="light"] .px-flags h4{color:#8E1A0B}
.px-flags ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.px-flags li{
  color:var(--text);font-size:.9rem;line-height:1.55;padding-left:18px;position:relative;
}
.px-flags li::before{content:"!";position:absolute;left:2px;color:#E8705C;font-weight:700}
html[data-theme="light"] .px-flags li::before{color:#A8200F}

.px-list{list-style:none;margin:10px 0 20px;padding:0;display:grid;gap:2px}
.px-ex{
  display:grid;grid-template-columns:minmax(0, 1fr) auto;gap:16px 22px;align-items:start;
  padding:16px 0;border-top:1px solid var(--line-soft);
}
.px-ex:first-child{border-top:0}
.px-ex h5{
  display:flex;align-items:baseline;gap:10px;
  font-family:var(--font-display);font-size:1.1rem;font-weight:500;
  color:var(--text);margin:0 0 7px;
}
.px-n{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:24px;height:24px;border-radius:999px;border:1px solid var(--line);
  color:var(--gold);font-family:var(--font-body);font-size:.74rem;font-weight:600;
}
.px-how{color:var(--muted);line-height:1.62;margin:0 0 7px;font-size:.94rem}
.px-dose{
  color:var(--gold);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;margin:0 0 7px;
}
.px-why{color:var(--muted);font-size:.86rem;font-style:italic;line-height:1.55;margin:0}
.px-art{
  flex:0 0 auto;width:118px;height:118px;border-radius:var(--r-sm);
  background:var(--bg-2);border:1px solid var(--line-soft);
  display:grid;place-items:center;overflow:hidden;
}
.px-art svg{width:100%;height:100%}

.px-meta{
  display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:12px 24px;
  padding-top:16px;border-top:1px solid var(--line-soft);
}
.px-meta dt{
  color:var(--gold);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:4px;font-weight:600;
}
.px-meta dd{color:var(--muted);font-size:.9rem;line-height:1.55}

.physio-mind{margin-top:clamp(20px,3vw,30px);text-align:center}
.physio-mind p{color:var(--muted);line-height:1.7;max-width:62ch;margin:10px auto 18px}

@media (max-width:760px){
  .px-ex{grid-template-columns:minmax(0, 1fr)}
  .px-art{width:100%;height:150px;order:-1}
  .px-meta{grid-template-columns:minmax(0, 1fr)}
}

/* ============================================================
   MOBILE AND TABLET HARDENING

   Two classes of bug are fixed here.

   1. HORIZONTAL SCROLL. Grid tracks were already switched from `1fr` to
      `minmax(0, 1fr)` above so a wide child cannot widen its own track. The
      remaining offenders are form controls: a native <select> takes its
      min-content width from its longest <option>, and an <input> defaults to
      about twenty characters. Both must be told they may shrink.

   2. TAP TARGETS. Anything a finger has to hit needs about 44px. Several
      controls were well under — the menu button was 20x15.
   ============================================================ */

/* --- controls may shrink --- */
input, select, textarea{min-width:0;max-width:100%}
select{width:100%;text-overflow:ellipsis}
.search-field{min-width:0}
.search-field input{min-width:0;width:100%}
.select-field, .lib-filters, .toolbar{min-width:0}
.nl-form{flex-wrap:wrap;min-width:0}
.nl-form input{min-width:0;flex:1 1 12ch}
.m-count{min-width:0;flex-wrap:wrap}
.m-count-btn{min-width:0}
.m-count-meta{min-width:0}
.stotra-meta dd, .px-meta dd, .help-note, .verse-mean, .verse-note{
  overflow-wrap:anywhere;
}
/* Devanagari and IAST lines have few break opportunities; let them break
   rather than push the card wide. */
.m-dev, .m-iast, .nl-dev{overflow-wrap:anywhere}

/* The footer brand tagline is nowrap by design in the header, where it has
   room. In the footer column at 320px it does not. */
@media (max-width:520px){
  .f-brand .brand-type-tag{white-space:normal;line-height:1.35}
}

/* --- tap targets --- */
.nav-toggle{
  width:44px;height:44px;
  display:none;                 /* the 900px query turns it on */
  align-items:center;justify-content:center;
  flex-direction:column;gap:5px;
  background:none;border:0;padding:0;cursor:pointer;
}
.nav-toggle span{
  display:block;width:22px;height:2px;border-radius:2px;
  background:var(--gold);transition:transform .3s var(--ease),opacity .3s var(--ease);
}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.brand{min-height:44px}

@media (hover:none), (pointer:coarse), (max-width:1024px){
  .chip,
  .m-scripts button,
  .pager button,
  .tab,
  .physio-tabs .chip{min-height:42px}
  .chip{padding-inline:1.05em}
  .m-scripts button{padding-inline:.85em}
  input[type="text"], input[type="search"], input[type="email"],
  input[type="number"], select, .search-field{min-height:44px}
  .search-field{padding-block:.5em}
  .icon-btn{min-width:42px;min-height:42px}
  .amb-btn{min-height:56px}
  .sit-chip{min-height:56px}
  .jr-del{min-width:38px;min-height:38px}
  input[type="range"]{height:42px}
}

/* Tablet: two columns reads better than one on a 768–1024 canvas. */
@media (min-width:768px) and (max-width:1024px){
  .help-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .sit-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .amb-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .wb-practices{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .stotra-meta{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .container{width:min(1320px, 92%)}
}

/* Nothing may create a horizontal scrollbar. Decorative glows and the Om
   watermark are positioned outside the viewport by design. */
html, body{overflow-x:clip}
@supports not (overflow-x:clip){
  html, body{overflow-x:hidden}
}
.hero, .page-hero, .section{overflow-x:clip}

/* --- very small phones: the header must not push its own controls off --- */
@media (max-width:400px){
  .header-inner{gap:10px;width:min(1320px,96%)}
  .header-actions{gap:2px;flex:0 0 auto}
  .brand-type-name{font-size:1.06rem}
  .brand-type-tag{font-size:.4rem;letter-spacing:.09em}
  .icon-btn{min-width:38px;min-height:38px}
  .nav-toggle{width:40px;height:40px}
}
@media (max-width:340px){
  .brand-type-tag{display:none}
}

/* --- wide data tables scroll inside their own frame --- */
.table-scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin-inline:calc(-1 * var(--r-sm));padding-inline:var(--r-sm);
  scrollbar-width:thin;
}
.table-scroll table{min-width:640px}
.table-scroll::after{
  content:"";display:block;height:1px;
}
.table-hint{
  color:var(--muted);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:6px;
}
@media (min-width:900px){.table-hint{display:none}}

/* the ambience master row needs to stack before it runs out of room */
@media (max-width:420px){
  .amb-master{flex-wrap:wrap}
  .amb-master input[type="range"]{flex:1 1 100%;order:3}
  .amb-master output{margin-left:auto}
}

/* pager arrows are square targets */
.pager button{min-width:42px}

/* Footer legal links are the smallest targets on the site; give them room. */
@media (hover:none), (pointer:coarse), (max-width:1024px){
  .f-legal{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px}
  .f-legal a{display:inline-flex;align-items:center;min-height:40px;padding-inline:6px}
}

/* ============================================================
   RANGE SLIDERS
   The browser default is a bright blue that has nothing to do with this site.
   Track and thumb are styled for both engines; the vendor pseudo-elements
   cannot be combined into one selector list, so they are written out twice.
   ============================================================ */
input[type="range"]{
  -webkit-appearance:none;appearance:none;
  background:transparent;cursor:pointer;
  height:42px;                       /* the touch target */
  margin:0;
}
input[type="range"]:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

/* WebKit / Blink */
input[type="range"]::-webkit-slider-runnable-track{
  height:5px;border-radius:999px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold));
  border:1px solid var(--line-soft);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:19px;height:19px;border-radius:50%;margin-top:-8px;
  background:radial-gradient(circle at 34% 30%,var(--btn-from),var(--btn-mid) 58%,var(--btn-to));
  border:1px solid var(--gold-deep);
  box-shadow:0 1px 6px rgba(0,0,0,.45);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
input[type="range"]:hover::-webkit-slider-thumb{transform:scale(1.12)}
input[type="range"]:active::-webkit-slider-thumb{transform:scale(1.04);box-shadow:0 0 0 6px rgba(212,175,55,.18)}

/* Gecko */
input[type="range"]::-moz-range-track{
  height:5px;border-radius:999px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold));
  border:1px solid var(--line-soft);
}
input[type="range"]::-moz-range-thumb{
  width:17px;height:17px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,var(--btn-from),var(--btn-mid) 58%,var(--btn-to));
  border:1px solid var(--gold-deep);
  box-shadow:0 1px 6px rgba(0,0,0,.45);
}
input[type="range"]::-moz-focus-outer{border:0}

html[data-theme="light"] input[type="range"]::-webkit-slider-runnable-track,
html[data-theme="light"] input[type="range"]::-moz-range-track{
  background:linear-gradient(90deg,var(--gold-deep),var(--gold));
  border-color:rgba(58,42,3,.35);
}

/* The ambience master row: keep the label, slider and readout on one tidy line
   rather than letting a 42px-tall slider stretch the row. */
.amb-master{align-items:center;min-height:42px}
.amb-master input[type="range"]{align-self:center}
.amb-level{padding-block:0}
.amb-card{padding-bottom:6px}

/* ============================================================
   SOCIAL / OFFICIAL CHANNELS
   ============================================================ */
.social-head{margin-top:4px}
.social-row{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.social-row a{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--muted);font-size:.94rem;line-height:1.3;
  padding:7px 0;transition:color .3s var(--ease);
}
.social-row a:hover{color:var(--gold)}
.social-row svg{
  width:19px;height:19px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
/* the Facebook glyph is a filled shape, not a stroked outline */
.social-row li:last-child svg{fill:currentColor;stroke:none}

.social-lg{grid-auto-flow:column;grid-auto-columns:max-content;gap:8px;align-items:center}
.social-lg a{
  padding:11px 18px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);
  color:var(--text);font-size:.92rem;
}
.social-lg a:hover{border-color:var(--gold);color:var(--gold-light)}
html[data-theme="light"] .social-lg a:hover{color:var(--gold-deep)}

.connect-panel{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:20px 32px;margin:clamp(24px,4vw,38px) 0;
  padding:clamp(20px,3vw,30px) clamp(20px,3.4vw,34px);
  border:1px solid var(--line-soft);border-radius:var(--r-lg);
  background:var(--card);
}
.connect-panel h3{font-size:clamp(1.2rem,2.4vw,1.6rem);margin:6px 0 8px}
.connect-panel p:last-of-type{color:var(--muted);line-height:1.62;max-width:46ch;margin:0}

/* ---- Official Notice: the definitive channel list ---- */
.channel-list{list-style:none;margin:14px 0 8px;padding:0;display:grid;gap:2px}
.channel-list li{
  display:grid;grid-template-columns:minmax(0, 9.5rem) minmax(0, 1fr);
  gap:4px 18px;align-items:baseline;
  padding:13px 0;border-top:1px solid var(--line-soft);
}
.channel-list li:first-child{border-top:0}
.ch-what{
  color:var(--gold);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;
}
.channel-list a{
  color:var(--text);font-family:var(--font-display);font-size:1.1rem;
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line);
  overflow-wrap:anywhere;
}
.channel-list a:hover{color:var(--gold);text-decoration-color:var(--gold)}
.ch-note{grid-column:2;color:var(--muted);font-size:.86rem;line-height:1.5}

@media (max-width:640px){
  .social-lg{grid-auto-flow:row;grid-auto-columns:auto}
  .social-lg a{justify-content:center;width:100%}
  .connect-panel{flex-direction:column;align-items:stretch}
  .connect-panel .social-lg{width:100%}
  .channel-list li{grid-template-columns:minmax(0, 1fr)}
  .ch-note{grid-column:1}
}

/* ============================================================
   LANGUAGE
   Jost and Cormorant Garamond have no Devanagari coverage, so in Hindi the
   font stacks lead with Noto Serif Devanagari. Without this the browser picks
   an arbitrary fallback and the page changes character between languages.
   ============================================================ */
.lang-btn{
  font-family:var(--font-body);font-size:.72rem;font-weight:600;
  letter-spacing:.06em;color:var(--gold);
}
.lang-btn[data-lang-label]{padding:0}
html[data-lang="hi"] .lang-btn{font-size:.86rem;letter-spacing:0}

html[data-lang="hi"]{
  --font-display:"Noto Serif Devanagari","Cormorant Garamond",Georgia,serif;
  --font-body:"Noto Serif Devanagari","Jost","Segoe UI",system-ui,sans-serif;
}
/* Devanagari sits taller than Latin at the same size, so tracked uppercase
   labels need their tracking relaxed or the conjuncts collide. */
html[data-lang="hi"] .kicker,
html[data-lang="hi"] .m-deity,
html[data-lang="hi"] .mini-head,
html[data-lang="hi"] .brand-type-tag,
html[data-lang="hi"] .wb-dose,
html[data-lang="hi"] .px-dose,
html[data-lang="hi"] .ch-what,
html[data-lang="hi"] .stotra-meta dt,
html[data-lang="hi"] .px-meta dt,
html[data-lang="hi"] .f-col h3,
html[data-lang="hi"] .help-tag,
html[data-lang="hi"] .jr-when{
  letter-spacing:.04em;text-transform:none;
}
html[data-lang="hi"] .page-title,
html[data-lang="hi"] .section-title{letter-spacing:0;line-height:1.3}
html[data-lang="hi"] body{line-height:1.75}
html[data-lang="hi"] .nav-list a{letter-spacing:0}
/* Hindi runs longer than English; give the nav a little more room to breathe
   before it collapses into the drawer. */
@media (min-width:901px) and (max-width:1180px){
  html[data-lang="hi"] .nav-list a{font-size:.82rem;padding-inline:.42em}
}

/* The footer social links are list rows, not prose links — they need a proper
   finger target like every other control. */
@media (hover:none), (pointer:coarse), (max-width:1024px){
  .social-row a{min-height:42px;padding-block:9px}
  .social-lg a{min-height:48px}
}

/* The channel list on the Official Notice is a set of links people tap. */
@media (hover:none), (pointer:coarse), (max-width:1024px){
  .channel-list a{display:inline-flex;align-items:center;min-height:42px}
}