:root { --gold: #ffd27a; --accent: #ff9a3c; --text: #fff6e6; --dim: #e0cfb0; --bg: #0a0710; --card: rgba(255,255,255,.05); --line: rgba(255,255,255,.12); --serif: 'Tiro Devanagari Hindi', 'Noto Serif Devanagari', 'Nirmala UI', serif; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.doc { background: radial-gradient(ellipse at 50% -10%, #2a1418 0%, #0a0710 60%) fixed; color: var(--text); font: 400 1rem/1.75 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; min-height: 100vh; }
a { color: var(--gold); text-decoration-color: rgba(255,210,122,.4); text-underline-offset: 3px; }
a:hover { color: #fff; }
.site-head { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; padding: .7rem 1.1rem; background: rgba(10,7,16,.92); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.brand { font: 700 1.05rem 'Cinzel', var(--serif); color: var(--gold); text-decoration: none; letter-spacing: .04em; }
.site-head nav { display: flex; gap: .2rem .9rem; flex-wrap: wrap; font-size: .82rem; }
.site-head nav a { color: var(--dim); text-decoration: none; padding: .25rem 0; border-bottom: 2px solid transparent; }
.site-head nav a.home-link { display: inline-flex; align-items: center; gap: .3rem; color: #fff; font-weight: 600; }
.site-head nav a[aria-current="page"], .site-head nav a:hover { color: #fff; border-bottom-color: var(--accent); }
.doc-main { max-width: 820px; margin: 0 auto; padding: 1.6rem 1.1rem 4rem; }
.crumbs { font-size: .78rem; color: var(--dim); margin-bottom: 1rem; }
.crumbs a { color: var(--dim); }
h1 { font: 700 clamp(1.7rem, 5.5vw, 2.6rem)/1.2 'Cinzel', var(--serif); color: var(--gold); margin-bottom: .8rem; }
h2 { font: 700 clamp(1.25rem, 3.8vw, 1.6rem)/1.3 'Cinzel', var(--serif); color: var(--gold); margin: 2.4rem 0 .8rem; padding-top: .4rem; border-top: 1px solid var(--line); }
h3 { font-size: 1.02rem; color: var(--text); margin: 1.4rem 0 .3rem; font-weight: 600; }
p { margin-bottom: .9rem; color: var(--dim); }
p strong, li strong { color: var(--text); }
.lead { font-size: 1.08rem; color: var(--text); }
.updated { font-size: .78rem; color: var(--dim); opacity: .8; }
.cta { display: inline-block; margin: .6rem .6rem .6rem 0; padding: .75rem 1.4rem; border-radius: 999px; background: linear-gradient(135deg, #ff9a3c, #ff6a1a); color: #200; font-weight: 600; text-decoration: none; min-height: 44px; }
.cta.ghost { background: transparent; color: var(--gold); border: 1px solid var(--gold); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; padding: 1rem 1.1rem; margin: 1.2rem 0; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 12px; font-size: .92rem; }
.facts dt { color: var(--gold); font-weight: 500; } .facts dd { color: var(--dim); }
.qa h3 { color: var(--gold); font-size: 1.02rem; margin-top: 1.2rem; }
.toc { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: .6rem 0 1rem; }
.toc a { display: inline-block; padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 999px; font-size: .8rem; text-decoration: none; color: var(--dim); }
.toc a:hover { border-color: var(--accent); color: #fff; }
.v { padding: 1rem 0; border-bottom: 1px solid var(--line); scroll-margin-top: 4.5rem; }
.v h3 { margin: 0 0 .5rem; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
.v h3 a { color: inherit; text-decoration: none; }
.v .hi { font: 400 clamp(1.2rem, 4.6vw, 1.55rem)/1.75 var(--serif); color: var(--text); margin-bottom: .3rem; }
.v .tr { color: var(--gold); font-size: .95rem; margin-bottom: .5rem; }
.v .en, .v .hm { color: var(--dim); margin-bottom: .4rem; }
.v .hm { font-family: var(--serif); font-size: 1.05rem; color: var(--text); }
.v .note { font-size: .88rem; opacity: .85; }
.v .more { font-size: .8rem; }
.gloss dt { color: var(--gold); font-weight: 600; margin-top: 1rem; } .gloss dd { color: var(--dim); margin: 0 0 .4rem; }
.steps { padding-left: 1.3rem; margin-bottom: 1rem; color: var(--dim); } .steps li { margin-bottom: .55rem; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: .8rem; list-style: none; margin-top: 1rem; }
.gallery figure { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.gallery img { display: block; width: 100%; height: auto; aspect-ratio: 1216 / 848; object-fit: cover; }
.gallery figcaption { padding: .55rem .7rem .7rem; font-size: .8rem; line-height: 1.45; color: var(--dim); }
.audio-box { margin: 1rem 0; padding: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.audio-box audio { width: 100%; margin-top: .5rem; }
.site-foot { border-top: 1px solid var(--line); padding: 2rem 1.1rem 3rem; text-align: center; font-size: .82rem; color: var(--dim); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; justify-content: center; margin-bottom: .8rem; }
.site-foot a { color: var(--dim); }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; gap: 0; } .facts dd { margin-bottom: .55rem; } }
@media print { .site-head, .site-foot, .cta { display: none; } body.doc { background: #fff; color: #000; } p, .v .en { color: #222; } h1, h2 { color: #000; } }