:root{
  --leaf:#1f3d2b; --leaf2:#2c5539; --marigold:#f2a900; --sindoor:#b3261e;
  --paper:#fffcf5; --ink:#2a1d12; --muted:#6f5f50; --line:#ead9b8;
  --serif:"Tiro Devanagari Hindi","Noto Serif Devanagari",Georgia,serif;
  --sans:"Mukta","Noto Sans Devanagari",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-padding-top:4rem}
body{margin:0;font:400 1.0625rem/1.7 var(--sans);color:var(--ink);background:var(--paper);display:flex;min-height:100vh}
a{color:var(--sindoor)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--marigold);outline-offset:2px}

#side{width:15rem;flex:none;background:var(--leaf);color:#f6ead0;padding:1.25rem 0;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:block;font:400 1.75rem/1.2 var(--serif);color:var(--marigold);text-decoration:none;padding:0 1.25rem 1rem;border-bottom:1px solid var(--leaf2)}
#side nav{display:flex;flex-direction:column;padding-top:.5rem}
#side nav a{color:#f6ead0;text-decoration:none;padding:.5rem 1.25rem;border-left:4px solid transparent}
#side nav a:hover{background:var(--leaf2);border-left-color:var(--marigold)}
.sep{display:block;height:1px;margin:.5rem 1.25rem;background:var(--leaf2)}

#main{flex:1;min-width:0;display:flex;flex-direction:column}
.garland{height:.7rem;background:
  radial-gradient(circle at 50% 50%,var(--marigold) 0 .22rem,transparent .24rem) 0 0/1.2rem .7rem,
  linear-gradient(var(--sindoor),var(--sindoor)) bottom/100% 2px no-repeat}
header{display:flex;align-items:center;gap:.75rem;padding:.6rem 1.25rem;border-bottom:1px solid var(--line)}
#menu{display:none;font-size:1.4rem;background:none;border:0;cursor:pointer;color:var(--ink)}
.hbrand{display:none;font:400 1.4rem var(--serif);color:var(--sindoor);text-decoration:none}
#auth{margin-left:auto;display:flex;align-items:center;gap:.6rem;font-size:.95rem}
#auth img{width:2rem;height:2rem;border-radius:50%}
button,.btn{font:600 1rem var(--sans);background:var(--sindoor);color:#fff;border:0;border-radius:.4rem;padding:.5rem 1rem;cursor:pointer}
button.alt{background:transparent;color:var(--sindoor);border:1px solid var(--sindoor)}
main{flex:1;width:100%;max-width:62rem;margin:0 auto;padding:1.5rem 1.25rem 3rem}
footer{padding:1rem 1.25rem;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}

.hero{padding:2.5rem 0 1.5rem;border-bottom:1px solid var(--line);margin-bottom:1.5rem}
.hero h1{font:400 clamp(2.4rem,6vw,3.8rem)/1.15 var(--serif);margin:0;color:var(--leaf)}
.hero p{margin:.5rem 0 0;color:var(--muted);font-size:1.15rem}
h2{font:400 1.5rem var(--serif);margin:2rem 0 .75rem;color:var(--leaf)}
h2 a{color:inherit;text-decoration:none;border-bottom:2px solid var(--marigold)}
.ptitle{font:400 2rem var(--serif);color:var(--leaf);margin:.5rem 0 1rem}
.empty{color:var(--muted)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:1rem}
.card{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);border:1px solid var(--line);background:#fff;border-radius:.3rem;overflow:hidden}
.card:hover{border-color:var(--sindoor)}
.card img,.card .ph{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--leaf2)}
.card .ph{display:grid;place-items:center;color:var(--marigold);font:400 2.6rem var(--serif)}
.ct{padding:.6rem .75rem .2rem;font-weight:600;line-height:1.35}
.aud{padding:0 .75rem .6rem;font-size:.85rem;color:var(--leaf2)}

.item h1{font:400 clamp(1.8rem,4vw,2.5rem)/1.25 var(--serif);color:var(--leaf);margin:.25rem 0 1rem}
.crumb{font-size:.9rem;color:var(--muted);margin:0}
.cover{max-width:100%;border-radius:.3rem;margin-bottom:1rem}
audio{width:100%;margin:0 0 1rem}
.text{white-space:pre-line;max-width:42rem;line-height:1.9}

form{display:grid;gap:1rem;max-width:40rem}
label{display:grid;gap:.3rem;font-weight:600}
input,select,textarea{font:400 1rem var(--sans);padding:.55rem .7rem;border:1px solid var(--line);border-radius:.3rem;background:#fff;color:var(--ink)}
.row{display:flex;gap:.75rem}
.scroll{overflow-x:auto}
table{border-collapse:collapse;min-width:30rem;width:100%}
th,td{text-align:left;padding:.5rem .75rem;border-bottom:1px solid var(--line)}

@media (max-width:48rem){
  body{display:block}
  #side{position:fixed;inset:0 auto 0 0;z-index:20;height:100%;transform:translateX(-100%);transition:transform .2s}
  body.open #side{transform:none}
  #menu,.hbrand{display:block}
}
@media (prefers-reduced-motion:reduce){#side{transition:none}}