/* ============================================================
   AKASHALIPI DESIGN SYSTEM — "Night observatory"
   Permanent foundation. Every page imports this file and uses
   only these variables. Never hardcode a colour or size.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600&family=Mukta:wght@300;400;500;600&display=swap');

:root{

  /* ---- surfaces: darkest to lightest ---- */
  --sky-0:#080C18;   /* page canvas, deepest */
  --sky-1:#0E1428;   /* default surface */
  --sky-2:#161F38;   /* raised panel, cards */
  --sky-3:#1F2B49;   /* hover, active rows */

  /* ---- ink on sky ---- */
  --star:#EDE7DA;        /* primary text */
  --star-dim:#9AA3BA;    /* secondary text */
  --star-mute:#6E7DA8;   /* labels, captions, disabled */

  /* ---- accents ---- */
  --brass:#C9A227;       /* the single accent. use sparingly */
  --brass-deep:#8F7219;  /* pressed / borders on brass */
  --brass-wash:rgba(201,162,39,.12);

  /* ---- semantic, for chart data only ---- */
  --exalt:#7FA6D8;       /* exalted */
  --debil:#C4643F;       /* debilitated, retrograde */
  --own:#C9A227;         /* own sign */

  /* ---- lines ---- */
  --line:rgba(237,231,218,.13);
  --line-strong:rgba(237,231,218,.26);
  --line-brass:rgba(201,162,39,.34);

  /* ---- type families ---- */
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-ui:'Inter','Mukta',system-ui,sans-serif;
  --font-deva:'Mukta','Inter',system-ui,sans-serif;

  /* ---- type scale ---- */
  --t-display:clamp(2.6rem,7vw,4.2rem);
  --t-h1:clamp(2rem,4.6vw,3rem);
  --t-h2:clamp(1.5rem,3.1vw,2.1rem);
  --t-h3:1.3rem;
  --t-lead:1.075rem;
  --t-body:1rem;
  --t-small:.875rem;
  --t-micro:.7rem;

  /* ---- spacing, 4px base ---- */
  --s-1:.25rem;  --s-2:.5rem;   --s-3:.75rem;  --s-4:1rem;
  --s-6:1.5rem;  --s-8:2rem;    --s-12:3rem;   --s-16:4rem;  --s-24:6rem;
  --gutter:clamp(1.1rem,4vw,3.5rem);
  --measure:38rem;      /* max line length for prose */
  --page:1180px;

  /* ---- geometry: sharp. this is an instrument, not a card deck ---- */
  --radius:0px;

  /* ---- motion: one signature, everything else is 160ms ---- */
  --dur:160ms;
  --dur-slow:2400ms;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-draw:cubic-bezier(.6,0,.25,1);
}

/* ============================================================
   BASE
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--sky-0);
  color:var(--star);
  font-family:var(--font-ui);
  font-size:var(--t-body);
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
html[lang="hi"] body{font-family:var(--font-deva);line-height:1.9}

h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1.14;letter-spacing:-.005em}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3)}
.display{font-family:var(--font-display);font-size:var(--t-display);font-weight:600;line-height:1.05}
.lead{font-size:var(--t-lead);color:var(--star-dim);font-weight:400;max-width:var(--measure)}
em{font-style:italic;color:var(--brass)}
a{color:inherit;text-decoration-color:var(--line-brass);text-underline-offset:3px}
a:hover{color:var(--brass)}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

.wrap{max-width:var(--page);margin:0 auto;padding:0 var(--gutter)}
.prose{max-width:var(--measure)}
.prose p{margin-bottom:var(--s-4);color:var(--star-dim)}
.prose strong{color:var(--star);font-weight:500}

/* label / eyebrow — the only place uppercase is allowed */
.label{
  font-size:var(--t-micro);font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--star-mute);
}

/* ============================================================
   CONTROLS
   ============================================================ */
.btn{
  display:inline-block;font-family:var(--font-ui);font-size:var(--t-small);
  font-weight:600;letter-spacing:.02em;padding:.8rem 1.7rem;cursor:pointer;
  text-decoration:none;border-radius:var(--radius);transition:var(--dur) var(--ease);
  border:1px solid var(--brass);background:var(--brass);color:var(--sky-0);
}
.btn:hover{background:var(--brass-deep);border-color:var(--brass-deep);color:var(--star)}
.btn-ghost{background:transparent;color:var(--star);border-color:var(--line-strong)}
.btn-ghost:hover{background:transparent;border-color:var(--brass);color:var(--brass)}
.btn-quiet{background:none;border:none;color:var(--star-dim);padding:0;font-weight:400;
  text-decoration:underline;text-underline-offset:3px}
.btn-quiet:hover{color:var(--brass)}

label{display:block;font-size:var(--t-micro);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--star-mute);margin-bottom:var(--s-2)}
input,select,textarea{
  width:100%;font-family:var(--font-ui);font-size:var(--t-body);color:var(--star);
  background:var(--sky-2);border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:.7rem .8rem;transition:var(--dur) var(--ease);
}
input:hover,select:hover{border-color:var(--star-mute)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brass);background:var(--sky-3)}
input::placeholder{color:var(--star-mute)}

/* ============================================================
   SURFACES
   ============================================================ */
.panel{background:var(--sky-1);border:1px solid var(--line);padding:var(--s-6)}
.panel-raised{background:var(--sky-2);border:1px solid var(--line-strong);padding:var(--s-6)}
.rule{border:0;border-top:1px solid var(--line);margin:var(--s-8) 0}
.note{border-left:2px solid var(--brass);padding-left:var(--s-4);color:var(--star-dim);
  font-size:var(--t-small);line-height:1.65}
.quote{font-family:var(--font-display);font-size:1.35rem;color:var(--brass);
  border-left:2px solid var(--brass);padding-left:var(--s-4);line-height:1.45;max-width:32rem}

/* fact list */
.facts{border-top:1px solid var(--line-strong)}
.fact{display:grid;grid-template-columns:minmax(86px,.45fr) 1fr;gap:var(--s-4);
  padding:var(--s-3) 0;border-bottom:1px solid var(--line)}
.fact dt{font-size:var(--t-micro);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--star-mute);padding-top:.3rem}
.fact dd{font-family:var(--font-display);font-size:1.15rem;color:var(--star)}
.fact dd small{display:block;font-family:var(--font-ui);font-size:var(--t-small);
  color:var(--star-dim);line-height:1.5}

/* tables */
table{width:100%;border-collapse:collapse;font-size:var(--t-small)}
th{text-align:left;font-size:var(--t-micro);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--star-mute);padding:var(--s-2) var(--s-3) var(--s-2) 0;
  border-bottom:1px solid var(--line-strong);white-space:nowrap}
td{padding:var(--s-2) var(--s-3) var(--s-2) 0;border-bottom:1px solid var(--line);color:var(--star-dim)}
td.key{font-family:var(--font-display);font-size:1.02rem;color:var(--star);white-space:nowrap}
tr.current td{background:var(--brass-wash);color:var(--star)}

.tag{display:inline-block;font-size:var(--t-micro);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:.08rem .4rem;border:1px solid currentColor;margin-left:.3rem}
.tag-exalt{color:var(--exalt)}
.tag-debil{color:var(--debil)}
.tag-own{color:var(--own)}

/* tabs */
.tabs{display:flex;overflow-x:auto;border-bottom:1px solid var(--line-strong);scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{background:none;border:none;border-bottom:2px solid transparent;
  font-family:var(--font-ui);font-size:var(--t-micro);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;padding:var(--s-3) var(--s-4);cursor:pointer;color:var(--star-mute);
  white-space:nowrap;transition:var(--dur) var(--ease)}
.tabs button:hover{color:var(--star-dim)}
.tabs button[aria-selected="true"]{color:var(--brass);border-bottom-color:var(--brass)}

/* ============================================================
   THE CHART — the one place with a signature motion
   ============================================================ */
.kundali{width:100%;height:auto;display:block}
.kundali .frame{fill:none;stroke:var(--star);stroke-width:1.4;opacity:.85}
.kundali .diag{fill:none;stroke:var(--star);stroke-width:.8;opacity:.35}
.kundali .inner{fill:none;stroke:var(--brass);stroke-width:1.1;opacity:.9}
.kundali .house-num{font-family:var(--font-ui);font-size:10.5px;font-weight:600;
  fill:var(--star-mute);text-anchor:middle}
.kundali .graha{font-family:var(--font-display);font-size:14px;fill:var(--brass);
  text-anchor:middle;font-weight:500}

.scribe{stroke-dasharray:1600;stroke-dashoffset:1600;
  animation:scribe var(--dur-slow) var(--ease-draw) forwards}
.scribe-2{animation-delay:.45s}
.scribe-3{animation-delay:.85s}
.settle{opacity:0;animation:settle .8s var(--ease) forwards;animation-delay:1.9s}
@keyframes scribe{to{stroke-dashoffset:0}}
@keyframes settle{to{opacity:1}}

@media(prefers-reduced-motion:reduce){
  .scribe,.settle{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}
  *{transition-duration:1ms!important}
}