:root{
  --bg:#0e1320; --panel:#161d2e; --panel2:#1d2740; --line:#2a3550;
  --text:#e8edf7; --muted:#8a96b0; --accent:#6ea8fe; --gold:#e8a317;
  --sun:#e8a317; --moon:#9aa6c8; --mars:#e0524a; --mercury:#33a852;
  --jupiter:#d98a1f; --venus:#e069ad; --saturn:#5f76b0; --rahu:#8b6cf0; --ketu:#9a7b45;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:'Cinzel',serif}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#2c3a57;border-radius:5px}

/* ---- site nav ---- */
.site-nav{background:var(--panel);border-bottom:1px solid var(--line);padding:0 24px;display:flex;align-items:center;height:52px;gap:24px;position:relative;z-index:3000}
.site-nav .brand{font-family:'Cinzel',serif;font-size:16px;font-weight:700;letter-spacing:1px;color:var(--text);white-space:nowrap}
/* brand wordmark links home; keep it visually identical to the plain wordmark */
.site-nav .brand a,#side h1 a{color:inherit;font:inherit;letter-spacing:inherit;text-decoration:none}
.site-nav .brand a:hover,#side h1 a:hover{color:var(--gold)}
.site-nav .links{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.site-nav .links a{font-size:13px;padding:6px 10px;border-radius:6px;color:var(--muted);transition:background .15s}
.site-nav .links a:hover,.site-nav .links a.active{color:var(--text);background:var(--panel2);text-decoration:none}
.site-nav .nav-ham{display:none;background:none;border:none;color:var(--text);font-size:22px;cursor:pointer;margin-left:auto;padding:6px}

/* ---- site footer ---- */
.site-footer{border-top:1px solid var(--line);padding:24px;text-align:center;color:var(--muted);font-size:11px;line-height:1.8}
.site-footer .ft-brand{font-family:'Cinzel',serif;font-size:12px;letter-spacing:.8px;color:var(--text);opacity:.55}

/* ---- page container ---- */
.page{max-width:820px;margin:0 auto;padding:40px 24px 60px}
.page h1{font-size:28px;margin:0 0 6px;letter-spacing:1px}
.page .subtitle{color:var(--muted);font-size:14px;margin-bottom:28px}
.page p,.page li{font-size:14px;line-height:1.75;color:var(--text)}

/* ---- cards ---- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin:32px 0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px 20px;transition:border-color .15s,transform .15s;display:flex;flex-direction:column}
.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.card h3{margin:0 0 6px;font-size:16px;letter-spacing:.5px}
.card .card-label{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:8px}
.card p{font-size:13px;color:var(--muted);line-height:1.6;margin:0}
.card .card-link{margin-top:auto;padding-top:14px;font-size:13px;font-weight:600;color:var(--accent)}

/* ---- buttons ---- */
.btn{display:inline-block;padding:10px 20px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:none;text-align:center}
.btn-primary{background:var(--accent);color:#0b1020}
.btn-primary:hover{filter:brightness(1.08);text-decoration:none}

/* ---- in-article wrapped images (inline float + caption) ---- */
/* margin-top:.875em drops the float by the paragraph's first-line leading
   (line-height 1.75) so the photo top sits flush with the first line of text. */
.wrap-img{display:block;width:240px;max-width:42%;float:right;margin:.875em 0 14px 22px}
.wrap-img img{width:100%;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.4);display:block}
.wrap-img .wrap-cap{display:block;margin-top:6px;font-size:12px;color:var(--muted);font-style:italic;text-align:center;line-height:1.4}
.wrap-img.left{float:left;margin:.875em 22px 14px 0}
/* nudge-up: raise this one photo ~10px above the flush baseline (desktop only) */
.wrap-img.nudge-up{margin-top:calc(.875em - 10px)}
@media(max-width:768px){.wrap-img,.wrap-img.left{float:none;display:block;width:100%;max-width:100%;margin:16px 0}.wrap-img.nudge-up{margin-top:0}}

/* ---- glossary term styling ---- */
.term{border-bottom:1.5px dotted var(--gold);cursor:help}
.g-popover{position:fixed;z-index:9000;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;max-width:340px;box-shadow:0 8px 30px rgba(0,0,0,.5);font-size:13px;line-height:1.6}
.g-popover .g-term{font-family:'Cinzel',serif;font-size:14px;color:var(--gold)}
.g-popover .g-pron{font-size:11px;color:var(--muted);font-style:italic;margin:2px 0 6px}
.g-popover .g-def{color:var(--text)}

/* ---- invocation block ---- */
.invocation{text-align:center;padding:48px 24px;border-top:1px solid var(--line);margin-top:48px}
.invocation img{width:120px;height:auto;opacity:.85;margin-bottom:16px}
.invocation .mantra{font-family:'Cinzel',serif;font-size:18px;color:var(--gold);letter-spacing:1px;cursor:pointer;border-bottom:1.5px dotted var(--gold);display:inline-block}
.invocation .mantra-pron{font-size:12px;color:var(--muted);margin-top:6px}

/* ---- mobile nav ---- */
@media(max-width:768px){
  .site-nav .links{display:none;position:absolute;top:52px;left:0;right:0;background:var(--panel);border-bottom:1px solid var(--line);flex-direction:column;padding:8px 16px;gap:2px}
  .site-nav .links.open{display:flex}
  .site-nav .nav-ham{display:block}
  .page{padding:28px 16px 48px}
  .page h1{font-size:22px}
  .card-grid{grid-template-columns:1fr}
  .invocation img{width:90px}
  .invocation .mantra{font-size:15px}
}

/* ---- western vs sidereal infographic ---- */
.zinfo{display:flex;gap:24px;align-items:flex-start;margin:30px 0}
.zwheel{flex:0 0 44%;max-width:420px;width:44%;height:auto;border-radius:10px}
.zcards{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:14px}
.zcard{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:8px;padding:14px 16px}
.zcard h3{margin:0 0 6px;font-family:'Cinzel',serif;font-size:14px;letter-spacing:.5px;color:var(--gold);text-transform:uppercase}
.zcard p{margin:0;font-size:13px;line-height:1.6;color:var(--text)}
@media(max-width:768px){.zinfo{flex-direction:column}.zwheel{flex:none;width:100%;max-width:100%}}