:root{
  /* ===== FINAL LAYOUT SPEC — 08 Jul 2026 ===== */
  --sidebar-w: 39.3%;      /* access panel  */
  --ticker-h:  6.0%;       /* ≈ 90px @1500h */
  --hero-zoom: 1.05;
  --hero-focus-x: 11%;
  --hero-brightness: 1.22;   /* lift the hero to a lively level */
  --panel-width: 440px;
  --panel-pad: 47px;
  --brand-size: 45px;

  /* ===== LEMARC palette ===== */
  /* espresso base — warmed off dead-black toward oxblood so darkness has depth */
  --espresso-0:#271a11;   /* lit warm espresso — well off the murk */
  --espresso-1:#3d2a1b;   /* oxblood-warmed mid, brightened */

  /* house metal — gold with real travel: rose → champagne → bronze */
  --gold:#c9a24b;
  --gold-bright:#e8cd8a;
  --gold-deep:#b8892f;
  --rose:#e3b489;         /* rose-gold warm end */
  --champagne:#f3e3b8;
  --bronze:#8f6a22;

  /* house jewel — blue sapphire (Nīlam / Śani) */
  --sapphire:#27407e;
  --sapphire-bright:#4f74c8;
  --sapphire-deep:#132247;
  --sapphire-glow:rgba(79,116,200,.55);

  --cream:#f7f0e2;
  --muted:#c2a67c;
  --line:rgba(201,162,75,.48);
  --sapphire-line:rgba(79,116,200,.40);
  --green:#4fa860;        /* living pulse — deepened toward emerald */
  --red:#c0554b;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--espresso-0);color:var(--cream);
  font-family:'Cormorant Garamond',serif;overflow:hidden;
  position:relative;width:100vw;height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* ===== HERO ===== */
.hero{position:absolute;inset:0 var(--sidebar-w) var(--ticker-h) 0;overflow:hidden;background:#271a11}
.hero img{width:100%;height:100%;object-fit:cover;object-position:var(--hero-focus-x) center;
  transform:scale(var(--hero-zoom));transform-origin:var(--hero-focus-x) 55%;display:block;
  filter:brightness(var(--hero-brightness)) saturate(1.08) contrast(1.02);
  animation:heroDrift 34s ease-in-out infinite alternate}
@keyframes heroDrift{
  0%{transform:scale(var(--hero-zoom))}
  100%{transform:scale(calc(var(--hero-zoom) + 0.05))}}
@media (prefers-reduced-motion:reduce){.hero img{animation:none}}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    /* warm key-light landing on the subject (focus-x ≈ 11%) */
    radial-gradient(58% 62% at 20% 44%, rgba(255,214,150,.12), rgba(255,214,150,0) 46%),
    /* cinematic vignette so the frame holds the eye inward */
    radial-gradient(135% 120% at 44% 48%, transparent 52%, rgba(18,11,6,.34) 82%, rgba(14,9,5,.58) 100%),
    /* seam fade toward the panel */
    linear-gradient(90deg,transparent 56%,rgba(39,26,17,.06) 78%,rgba(39,26,17,.34) 100%)}

/* ===== SIDEBAR / ACCESS PANEL ===== */
.sidebar{position:absolute;top:0;right:0;bottom:var(--ticker-h);width:var(--sidebar-w);
  background:
    /* the house jewel — crisp, cut-stone halo cradling the Lo Shu seal (was a wide smudge) */
    radial-gradient(62% 34% at 50% 70%, rgba(79,116,200,.52), rgba(56,88,168,0) 56%),
    /* second sapphire note carried up behind the fields so the jewel reads twice, not once */
    radial-gradient(48% 20% at 50% 45%, rgba(79,116,200,.16), rgba(79,116,200,0) 62%),
    radial-gradient(80% 50% at 50% 22%, rgba(201,162,75,.32), rgba(201,162,75,0) 68%),
    linear-gradient(175deg,#33241a 0%,var(--espresso-1) 46%,#35261a 100%);
  border-left:1px solid var(--line);
  /* feathered seam: gold outer hairline, sapphire pinstripe just inside, then a soft dark falloff */
  box-shadow:
    inset 2px 0 0 -1px rgba(79,116,200,.38),
    inset 12px 0 30px -12px rgba(0,0,0,.55),
    inset 0 0 120px 14px rgba(0,0,0,.20);
  display:flex;justify-content:center;align-items:center;overflow:hidden}
.panel{width:100%;max-width:var(--panel-width);
  padding:var(--panel-pad) clamp(16px,var(--panel-pad),var(--panel-pad));
  display:flex;flex-direction:column;align-items:center;text-align:center}
.astro-top{color:var(--gold);font-size:16px;letter-spacing:.5em;margin-bottom:8px;opacity:.9}
.brand{font-family:'Cinzel',serif;font-weight:600;font-size:var(--brand-size);line-height:.95;
  letter-spacing:.06em;
  background:linear-gradient(100deg,#8f6a22 0%,#c9a24b 20%,#e3b489 33%,#f3e3b8 46%,#fffbe9 50%,#f3e3b8 54%,#d9b45f 66%,#b8892f 82%,#8f6a22 100%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:12px;
  animation:brandshimmer 7.5s ease-in-out infinite}
@keyframes brandshimmer{0%{background-position:160% 0}100%{background-position:-160% 0}}
@media (prefers-reduced-motion:reduce){.brand{animation:none;background-position:50% 0}}
.tagline{font-style:italic;color:var(--muted);font-size:14px;letter-spacing:.14em;line-height:1.55;
  text-transform:uppercase;margin-bottom:16px}
.access{font-family:'Cinzel',serif;color:var(--gold);font-size:12px;letter-spacing:.28em;
  display:flex;align-items:center;gap:10px;margin-bottom:22px}
.access::before,.access::after{content:"";width:24px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.access::after{background:linear-gradient(90deg,var(--gold),transparent)}
.flabel{align-self:flex-start;font-family:'Cinzel',serif;font-size:10px;letter-spacing:.22em;
  color:#dcc188;text-transform:uppercase;margin-bottom:6px}
.field{width:100%;display:flex;align-items:center;gap:10px;padding:13px 14px;margin-bottom:15px;
  background:rgba(255,247,232,.13);border:1px solid var(--line);border-radius:5px;
  transition:border-color .2s,background .2s,box-shadow .3s}
.field:focus-within{border-color:var(--gold);background:rgba(255,247,232,.16);
  box-shadow:0 0 0 1px rgba(79,116,200,.45),0 0 26px -2px var(--sapphire-glow)}
.field .fi{color:var(--gold);font-size:14px;width:15px;text-align:center}
.field input{flex:1;background:transparent;border:none;outline:none;color:var(--cream);
  font-family:'Cormorant Garamond',serif;font-size:16px;letter-spacing:.04em}
.field input::placeholder{color:#a08a6a}
.field .show{font-family:'Cinzel',serif;font-size:8px;letter-spacing:.16em;color:var(--muted);cursor:pointer;
  text-transform:uppercase;background:none;border:none;padding:2px 4px}
.field .show:hover{color:var(--gold-bright)}
.enter{position:relative;z-index:4;isolation:isolate;overflow:hidden;width:100%;margin-top:14px;padding:20px 16px;border:none;border-radius:6px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:11px;
  font-family:'Cinzel',serif;font-weight:700;font-size:15px;letter-spacing:.26em;color:#160f04;
  text-shadow:0 1px 0 rgba(255,248,224,.55);
  background:linear-gradient(180deg,#fffaee 0%,#f6e2ad 16%,#e8c46f 40%,#fff6dc 50%,#e0b64c 58%,#c2912f 82%,#9d6b1c 100%);
  box-shadow:0 12px 36px rgba(184,137,47,.42),0 3px 8px rgba(20,14,5,.34),
             0 0 0 1px rgba(122,78,18,.55),
             inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 5px rgba(122,78,18,.38);
  transition:filter .3s,box-shadow .4s,transform .15s}
/* travelling specular — light rakes across the polished face */
.enter::after{content:'';position:absolute;z-index:1;top:-60%;left:-70%;width:38%;height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
  transform:skewX(-22deg);pointer-events:none;
  animation:gateGlint 5s ease-in-out infinite}
@keyframes gateGlint{0%{left:-70%}42%,100%{left:135%}}
.enter:hover{filter:brightness(1.07);transform:translateY(-1px);
  box-shadow:0 16px 44px rgba(184,137,47,.5),0 3px 8px rgba(20,14,5,.36),
             0 0 30px -2px var(--sapphire-glow),0 0 0 1px rgba(150,100,26,.65),
             inset 0 1px 0 rgba(255,255,255,.95),inset 0 -2px 5px rgba(122,78,18,.42)}
.enter:active{filter:brightness(.97);transform:translateY(1px);
  box-shadow:0 5px 16px rgba(184,137,47,.34),0 0 0 1px rgba(122,78,18,.6),
             inset 0 2px 6px rgba(90,56,12,.45)}
.enter:focus-visible{outline:none;
  box-shadow:0 0 0 2px var(--espresso-0),0 0 0 4px var(--gold-bright),0 12px 36px rgba(184,137,47,.42)}
.enter .mangala{font-family:'Noto Sans Devanagari',serif;font-weight:600;font-size:17px;
  color:#7a4e12;opacity:.95;line-height:1;transform:translateY(-1px);transition:opacity .4s,text-shadow .4s}

/* ===== muhūrta-reactive gate — the portal weighs the moment ===== */
/* FAVOURABLE horā: the gate warms, breathes gold, the śrī bīja brightens */
.enter.favourable{
  background:linear-gradient(180deg,#fffdf6 0%,#fbeec2 16%,#f2d685 40%,#fffaea 50%,#eac75c 58%,#cf9c33 82%,#a8741e 100%);
  animation:gateBreath 4.2s ease-in-out infinite}
.enter.favourable .mangala{opacity:1;color:#5c3a0c;text-shadow:0 0 6px rgba(243,227,184,.9)}
@keyframes gateBreath{
  0%,100%{box-shadow:0 12px 36px rgba(184,137,47,.44),0 3px 8px rgba(20,14,5,.34),
          0 0 22px -4px rgba(243,227,184,.6),0 0 0 1px rgba(122,78,18,.55),
          inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 5px rgba(122,78,18,.38)}
  50%{box-shadow:0 16px 48px rgba(232,205,138,.6),0 3px 8px rgba(20,14,5,.34),
      0 0 52px -2px rgba(243,227,184,.95),0 0 0 1px rgba(150,100,26,.6),
      inset 0 1px 0 rgba(255,255,255,1),inset 0 -2px 5px rgba(122,78,18,.42)}}

/* HOLD horā / Rāhu Kāla: the gate cools and quiets — it does not go grey */
.enter.hold{
  color:#160f04;
  background:linear-gradient(180deg,#f7ecd2 0%,#eed6a0 16%,#dcbc79 40%,#f8ecca 50%,#cfa85c 58%,#ab7d29 82%,#8a5f18 100%);
  box-shadow:0 10px 30px rgba(39,64,126,.36),0 3px 8px rgba(20,14,5,.32),
             0 0 0 1px rgba(39,64,126,.4),
             inset 0 1px 0 rgba(255,255,255,.72),inset 0 -2px 5px rgba(90,56,12,.34)}
.enter.hold .mangala{opacity:1;color:#6b4310;text-shadow:0 0 5px rgba(243,227,184,.45)}
.enter.rahu{
  box-shadow:0 10px 30px rgba(39,64,126,.36),0 3px 8px rgba(20,14,5,.32),
             0 0 22px -5px rgba(192,85,75,.6),0 0 0 1px rgba(192,85,75,.45),
             inset 0 1px 0 rgba(255,255,255,.68),inset 0 -2px 5px rgba(90,56,12,.34)}

@media (prefers-reduced-motion:reduce){
  .enter.favourable{animation:none}
  .enter::after{animation:none;opacity:0}
  .enter:hover,.enter:active{transform:none}}

/* ===== submit payoff — the seal closes on entry ===== */
.enter.sealing{pointer-events:none}
.enter .ripple{position:absolute;z-index:2;top:var(--ry,50%);left:var(--rx,50%);width:14px;height:14px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,251,233,.95),rgba(243,227,184,.5) 60%,transparent 72%);
  transform:translate(-50%,-50%) scale(0);pointer-events:none;
  animation:sealRipple .62s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes sealRipple{to{transform:translate(-50%,-50%) scale(42);opacity:0}}
/* the consecrated seal ring flashes closed when the vault opens */
.seal .ring.closing{animation:ringClose .7s ease-out}
@keyframes ringClose{
  0%{opacity:.55;transform:translate(-50%,-50%) scale(1) rotate(0deg)}
  40%{opacity:1;transform:translate(-50%,-50%) scale(1.06) rotate(6deg)}
  100%{opacity:.55;transform:translate(-50%,-50%) scale(1) rotate(0deg)}}
@media (prefers-reduced-motion:reduce){
  .enter .ripple{animation:none;opacity:0}
  .seal .ring.closing{animation:none}}
.forget{font-style:italic;color:var(--muted);font-size:13px;margin:15px 0 20px;letter-spacing:.05em;
  cursor:pointer;transition:color .2s}
.forget:hover{color:var(--gold)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;width:100%;
  border:1px solid var(--line);background:var(--line);margin-bottom:18px;border-radius:4px;overflow:hidden}
.cell{background:linear-gradient(180deg,#38281c,#2c1e13);aspect-ratio:1.7/1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;color:var(--gold);cursor:help;position:relative;
  transition:background .25s,box-shadow .25s}
.cell:hover{background:linear-gradient(180deg,#43301f,#362619);
  box-shadow:inset 0 0 0 1px rgba(232,205,138,.35),inset 0 0 16px -6px var(--gold-bright)}
.cell:hover .n{color:var(--gold-bright)}
.cell.hot:hover{background:linear-gradient(180deg,#22331b,#172712)}
.cell .n{font-family:'Cinzel',serif;font-size:17px;line-height:1}
.cell .g{font-size:8px;opacity:.7;line-height:1}
.cell.hot{background:linear-gradient(180deg,#1a2a16,#12200f)}
.cell.hot .n,.cell.hot .g{color:var(--green)}
/* bindu at the true centre of the square — 5 / Budha */
.cell.hot .bindu{position:absolute;top:50%;left:50%;width:5px;height:5px;border-radius:50%;z-index:0;
  background:var(--green);box-shadow:0 0 10px 2px var(--green);animation:binduPulse 3.6s ease-in-out infinite}
.cell.hot .n,.cell.hot .g{position:relative;z-index:1}
@keyframes binduPulse{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}}
.astro-row{color:var(--gold);font-size:14px;letter-spacing:.34em;margin-bottom:9px;opacity:.62}
.hora{display:flex;align-items:center;gap:8px;color:var(--green);font-size:12px;letter-spacing:.12em;margin-bottom:10px}
.hora .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.mantra{font-family:'Noto Sans Devanagari',serif;color:var(--gold);opacity:.46;font-size:14px;
  letter-spacing:.05em;margin-bottom:14px}
.dots{display:flex;gap:7px;margin-bottom:18px}
.dots i{width:5px;height:5px;border-radius:50%;background:#3a2e18;cursor:pointer;transition:.2s}
.dots i.on{background:radial-gradient(circle at 40% 34%,var(--sapphire-bright),var(--sapphire) 72%);
  box-shadow:0 0 9px var(--sapphire-glow)}
.foot{font-style:italic;color:#93805f;font-size:11px;letter-spacing:.06em;line-height:1.4}

/* ===== TICKER ===== */
.ticker{position:absolute;left:0;right:0;bottom:0;height:var(--ticker-h);min-height:26px;
  background:linear-gradient(180deg,#241811,#160e08);border-top:1px solid var(--line);
  display:flex;align-items:center;overflow:hidden}
.tick-track{display:flex;gap:40px;white-space:nowrap;animation:scroll 40s linear infinite;padding-left:40px}
.tick{font-family:'Cinzel',serif;font-size:12px;letter-spacing:.06em;color:var(--cream);display:flex;gap:8px;align-items:center}
.tick .sym{color:#b8a988}
.tick .up{color:var(--green)}.tick .dn{color:var(--red)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ===== PORTRAIT / NARROW FALLBACK ===== */
@media (max-width:860px),(orientation:portrait){
  .hero{inset:0}
  .hero::after{background:linear-gradient(180deg,rgba(10,7,5,.2) 0%,rgba(10,7,5,.55) 55%,rgba(10,7,5,.9) 100%)}
  .sidebar{top:auto;bottom:var(--ticker-h);width:100%;height:auto;max-height:82vh;
    border-left:none;border-top:1px solid var(--line);
    background:linear-gradient(180deg,rgba(12,9,7,.72),rgba(14,10,7,.95) 30%);
    backdrop-filter:blur(6px);align-items:flex-start;overflow:auto}
  .panel{transform:none!important;padding:26px 22px}
  .astro-top,.tagline,.astro-row{margin-bottom:10px}
}
@media (prefers-reduced-motion:reduce){.tick-track{animation:none}}

/* ===== CONSECRATED LO SHU SEAL (inert) ===== */
.seal{position:relative;width:100%;margin-bottom:14px;display:flex;justify-content:center}
.seal .grid{margin-bottom:0;position:relative;z-index:2;
  box-shadow:0 0 0 1px rgba(201,162,75,.22),
    0 0 22px -6px rgba(201,162,75,.35),
    0 0 70px -8px var(--sapphire-glow)}
.seal .ring{position:absolute;z-index:1;pointer-events:none;top:50%;left:50%;
  transform:translate(-50%,-50%);width:118%;aspect-ratio:1/1;opacity:.55}
.seal-note{font-family:'Cinzel',serif;font-size:8px;letter-spacing:.24em;color:var(--muted);
  opacity:.55;text-transform:uppercase;margin:-4px 0 16px;cursor:help;transition:opacity .3s}
.seal-note:hover{opacity:.9}

/* faint bindu-centred seal watermark behind the whole panel */
.watermark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(560px,120%);aspect-ratio:1/1;pointer-events:none;z-index:0;opacity:.11;
  animation:sealbreath 9s ease-in-out infinite}
@keyframes sealbreath{0%,100%{opacity:.09}50%{opacity:.15}}
@media (prefers-reduced-motion:reduce){.watermark{animation:none;opacity:.07}}

/* ===== NE (Īśāna) Śrīṃ seal — Lakṣmī bīja at the auspicious gate ===== */
.ne-seal{position:absolute;top:14px;right:14px;z-index:3;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  border:1px solid rgba(201,162,75,.35);
  background:radial-gradient(circle,rgba(201,162,75,.14),transparent 70%);
  box-shadow:0 0 14px -4px rgba(201,162,75,.5);cursor:help}
.ne-seal span{font-family:'Noto Sans Devanagari',serif;font-size:15px;color:var(--gold-bright);
  opacity:.9;line-height:1}
.ne-seal::after{content:"NE";position:absolute;bottom:-13px;font-family:'Cinzel',serif;
  font-size:6px;letter-spacing:.2em;color:var(--muted);opacity:.6}

/* ===== hora + Rahu Kaal timing strip ===== */
.hora.hold{color:var(--muted)}
.hora.hold .dot{background:var(--muted);box-shadow:0 0 8px var(--muted)}
.rahu{font-family:'Cinzel',serif;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);opacity:.7;margin-bottom:12px;transition:color .3s,opacity .3s}
.rahu.active{color:var(--red);opacity:1}
.rahu .rk-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;
  margin-right:6px;vertical-align:middle}
.rahu.active .rk-dot{box-shadow:0 0 8px var(--red);animation:rkPulse 1.4s ease-in-out infinite}
@keyframes rkPulse{0%,100%{opacity:.5}50%{opacity:1}}

.mantra{transition:opacity .8s ease}

/* ===== HOUSE MARK — rising bull (Nandi · Vṛṣabha · the bull market) ===== */
/* A discreet gold marque worked in the Śrī Yantra hairline idiom, not a logo. */
.crest-bull{width:58px;height:auto;display:block;margin:0 auto 12px;
  transform:scaleX(-1);          /* Vastu: turn Nandi to face East — toward the rising sun & the NE (Īśāna) Śrīṃ seal */
  filter:drop-shadow(0 0 9px rgba(201,162,75,.35)) drop-shadow(0 0 22px var(--sapphire-glow));
  opacity:.96;animation:crestBreath 9s ease-in-out infinite}
@keyframes crestBreath{0%,100%{opacity:.9}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.crest-bull{animation:none;opacity:.9}}

/* ===== PŪRṆA-KALAŚA — the full pot of abundance, maṅgala at the threshold ===== */
.gate-kalasha{width:76px;height:auto;display:block;margin:4px auto 18px;cursor:help;
  filter:drop-shadow(0 0 16px rgba(243,227,184,.72)) drop-shadow(0 0 34px var(--sapphire-glow)) drop-shadow(0 0 54px rgba(201,162,75,.38));
  opacity:1;transition:opacity .4s,filter .4s;
  animation:kalashaGlow 5.5s ease-in-out infinite}
@keyframes kalashaGlow{
  0%,100%{filter:drop-shadow(0 0 14px rgba(201,162,75,.6)) drop-shadow(0 0 30px var(--sapphire-glow)) drop-shadow(0 0 46px rgba(201,162,75,.32));opacity:.96}
  50%{filter:drop-shadow(0 0 22px rgba(243,227,184,.92)) drop-shadow(0 0 46px var(--sapphire-glow)) drop-shadow(0 0 68px rgba(243,227,184,.5));opacity:1}}
.gate-kalasha:hover{opacity:1;filter:drop-shadow(0 0 26px rgba(243,227,184,.95)) drop-shadow(0 0 50px var(--sapphire-glow)) drop-shadow(0 0 74px rgba(243,227,184,.5))}
@media (prefers-reduced-motion:reduce){.gate-kalasha{animation:none;opacity:1}}
/* the kalaśa warms in step with a favourable muhūrta */
.panel:has(.enter.favourable) .gate-kalasha{opacity:1;
  filter:drop-shadow(0 0 26px rgba(243,227,184,1)) drop-shadow(0 0 52px var(--sapphire-glow)) drop-shadow(0 0 78px rgba(243,227,184,.55))}

/* ===== live form additions (sign-in, reset) ===== */
.panel form{width:100%;display:flex;flex-direction:column;align-items:center}
.msg{width:100%;font-style:italic;font-size:14px;letter-spacing:.03em;line-height:1.45;margin:-4px 0 14px;text-align:center}
.msg.err{color:#f0a097}
.msg.ok{color:#a9d8a0}
.forget a{color:inherit;text-decoration:none}
.panel .back{font-style:italic;color:var(--muted);font-size:13px;margin:15px 0 20px;letter-spacing:.05em}
.panel .back a{color:inherit}
.panel .back a:hover{color:var(--gold)}