@import url('https://fonts.googleapis.com/css2?family=Tiro+Devanagari+Hindi&family=Tiro+Devanagari+Sanskrit&family=Noto+Serif+Devanagari:wght@700&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');
:root{
  --bg:#07070e; --ink:#ece9f5; --dim:rgba(236,233,245,.62); --faint:rgba(236,233,245,.13);
  --gold:#cdb488; --gold-bright:#e7d3a8;
  --serif:'EB Garamond',Georgia,serif;
  --dev:'Tiro Devanagari Hindi','Noto Serif Devanagari',serif;
  --dev-sa:'Tiro Devanagari Sanskrit','Noto Serif Devanagari',serif;
  --ease:cubic-bezier(.16,.7,.2,1);
}
::selection{background:rgba(205,180,136,.25);color:var(--gold-bright)}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(236,233,245,.15);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(236,233,245,.25)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--serif);line-height:1.78;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.028'/%3E%3C/svg%3E");}
.aura{position:fixed;inset:-25vmax;z-index:-2;pointer-events:none;
  background:radial-gradient(38vmax 38vmax at 30% 18%, rgba(205,180,136,.14), transparent 60%),
    radial-gradient(42vmax 42vmax at 78% 30%, rgba(120,140,220,.10), transparent 62%),
    radial-gradient(46vmax 46vmax at 50% 92%, rgba(47,184,155,.07), transparent 60%);
  animation:drift 34s ease-in-out infinite alternate;filter:blur(8px)}
@keyframes drift{to{transform:translate3d(0,-4%,0) scale(1.08)}}
.vignette{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 30%, transparent 55%, rgba(4,4,10,.7) 100%)}
.wrap{max-width:44rem;margin:0 auto;padding:0 clamp(1.2rem,5vw,1.8rem)}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.5rem 0 .5rem;border-bottom:1px solid var(--faint);margin-bottom:.5rem}
.home{font-family:var(--dev-sa);color:var(--gold-bright);text-decoration:none;font-size:1.4rem;
  text-shadow:0 0 26px rgba(231,211,168,.4);line-height:1}
.topmid{flex:1}
.back{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  text-decoration:none;border-bottom:1px solid var(--faint)}
.back:hover{color:var(--gold);border-color:var(--gold)}

.langtoggle{display:inline-flex;gap:.2rem;border:1px solid var(--faint);border-radius:999px;padding:.2rem}
.langtoggle button{background:none;border:0;color:var(--dim);font-family:var(--serif);font-size:.8rem;
  letter-spacing:.05em;padding:.28rem .85rem;border-radius:999px;cursor:pointer;transition:color .3s,background .3s}
.langtoggle button.active{color:#141019;background:var(--gold)}
.lang-hi{display:none}
body.hi .lang-en{display:none}
body.hi .lang-hi{display:block}
.lang-en{font-family:var(--serif)}
.lang-hi{font-family:var(--dev);letter-spacing:normal}

article{padding:1.6rem 0 1rem}
article h1{font-weight:500;font-size:clamp(2rem,6.5vw,3rem);line-height:1.22;margin:.2rem 0 .3rem;
  background:linear-gradient(180deg,#fff 0%,#efe7d4 60%,#cdb488 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
body.hi article h1{font-family:'Noto Serif Devanagari',var(--dev);font-weight:700;line-height:1.4;padding:.1em 0}
article h2{font-weight:500;font-size:clamp(1.4rem,4vw,1.85rem);line-height:1.3;color:var(--gold-bright);
  margin:2.4rem 0 .9rem;padding-top:.4rem}
article h3{font-weight:500;font-size:clamp(1.08rem,3vw,1.28rem);color:var(--ink);margin:1.7rem 0 .6rem;opacity:.95}
article p{margin:0 0 1.1rem;color:var(--ink);opacity:.9;text-wrap:pretty}
article ul,article ol{margin:0 0 1.2rem;padding-left:1.3rem}
article li{margin:.35rem 0;color:var(--ink);opacity:.88}
article li::marker{color:var(--gold)}
article strong{font-weight:600;color:var(--ink)}
article em{font-style:italic;color:var(--gold-bright)}
article a{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--faint)}
article a:hover{border-color:var(--gold)}
article blockquote{border-left:2px solid var(--gold);padding:.5rem 0 .5rem 1.15rem;margin:1.5rem 0;
  color:var(--dim);background:linear-gradient(90deg,rgba(205,180,136,.06),transparent)}
article blockquote p{margin:.4rem 0}
article hr{border:0;height:1px;width:70px;margin:2.6rem auto;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.4}
article h3 + p code, article code{font-family:ui-monospace,monospace;font-size:.85em;
  background:rgba(236,233,245,.07);padding:.1em .35em;border-radius:4px}

.subtitle{color:var(--dim);font-style:italic;font-size:1.1rem;margin:.1rem 0 1.6rem;text-wrap:balance}
body.hi .subtitle{font-style:normal}

.doorway{text-align:center;padding:2.2rem 0 1rem}
.doorway .eyebrow{font-family:var(--dev-sa);font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1rem}
.doorway h1{margin-bottom:.2rem}
.stance{max-width:33rem;margin:1.6rem auto 2.6rem;font-style:italic;color:var(--dim);
  font-size:clamp(1.05rem,2.8vw,1.2rem);text-wrap:balance;line-height:1.75}
body.hi .stance{font-style:normal}
.pieces{display:flex;flex-direction:column;gap:1.2rem;max-width:34rem;margin:0 auto;text-align:left}
.piece{display:block;text-decoration:none;color:inherit;border:1px solid var(--faint);border-radius:14px;
  padding:1.25rem 1.5rem;transition:border-color .5s var(--ease),transform .5s var(--ease),background .5s}
.piece:hover{border-color:var(--gold);transform:translateY(-3px);background:rgba(205,180,136,.05)}
.piece .t{font-size:1.35rem;color:var(--gold-bright);display:block}
.piece .d{color:var(--dim);margin-top:.35rem;font-size:1rem;line-height:1.6}
.leadin{max-width:33rem;margin:0 auto 1.4rem;color:var(--dim);font-size:.95rem;letter-spacing:.02em}

footer{text-align:center;padding:3rem 0 3.4rem;margin-top:2.2rem;border-top:1px solid var(--faint);
  color:rgba(236,233,245,.5);font-size:.78rem;letter-spacing:.08em}
footer a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--faint)}
footer a:hover{color:var(--gold)}
footer .om2{font-family:var(--dev-sa)}
@media (prefers-reduced-motion:reduce){*{animation:none!important}.aura{animation:none}html{scroll-behavior:auto}}

/* Tooltips */
.tooltip { position: relative; cursor: help; border-bottom: 1px dashed var(--gold); text-decoration: none; }
.tooltip::after {
  content: attr(data-tip);
  position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%) translateY(5px);
  background: var(--bg); border: 1px solid var(--gold); color: var(--ink);
  padding: 0.5rem 0.8rem; border-radius: 6px; font-size: 0.85rem; font-family: var(--serif);
  white-space: normal; width: max-content; max-width: 260px; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5); z-index: 10;
}
.tooltip:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }