/* ---------------------------------------------------------------------------
   96Astro — /astrocartography, page-specific layer.

   Loads AFTER seo-page.css and only on this page. The shared file owns the
   design system — tokens, contrast ladder, nav, buttons, cards, table, FAQ,
   footer — and none of it is re-declared here. What the flagship page needed
   was composition, not a new palette: the old layout ran every section as one
   70ch column down the left, which reads as a document rather than a product.

   So this file adds the pieces that carry the page:
     · a split hero with the live globe doing the explaining
     · a sticky section rail for a long read
     · diagrams on the four angle cards, because a line's position IS the point
     · an anatomy diagram and a statement carrying the opening argument
     · a comparison block, a timeline, and full-width grids under measured text
--------------------------------------------------------------------------- */

/* Anchors have to clear the sticky header + section rail. */
:root{ --rail-h:52px; }
[id]{ scroll-margin-top:calc(72px + var(--rail-h) + 16px); }

/* "Open your world map" wraps onto two lines in a phone header and pushes the
   bar out of shape. Below 560px it reads "Open map" instead. */
.nav .btn{white-space:nowrap}
@media(max-width:559px){
  .nav-long{display:none}
  .nav .btn{padding:10px 14px;font-size:.86rem}
  .nav .wrap{gap:12px}
}

/* ── hero: copy left, live globe right ──────────────────────────────────── */
.hero{padding-bottom:40px}
.hero-split{display:grid;gap:clamp(28px,5vw,60px);align-items:center}
@media(min-width:1000px){
  .hero-split{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}
  /* Half the width means the shared 4rem display size wraps to four ragged
     lines. Step it down so the headline holds together beside the globe. */
  .hero h1{font-size:clamp(2.4rem,3.6vw,3.3rem);max-width:17ch}
}
.hero-copy{min-width:0}

/* The globe is the argument the page is making, so it gets real estate. */
.globe-stage{position:relative;width:100%;max-width:520px;margin:0 auto;aspect-ratio:1/1}
.globe-canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y}
.globe-canvas.is-dragging{cursor:grabbing}
.globe-canvas:focus-visible{outline:2px solid var(--primary-2);outline-offset:6px;border-radius:50%}
.globe-cap{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-size:.68rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-2);background:rgba(10,8,36,.78);border:1px solid var(--line-2);
  border-radius:999px;padding:6px 14px;backdrop-filter:blur(6px)}
.globe-cap svg{width:13px;height:13px;stroke:var(--primary-2);fill:none;stroke-width:1.8}
@media(max-width:520px){.globe-cap{font-size:.6rem;padding:5px 11px}}

/* The stat strip leaves the hero grid so it can span the full width. */
.stats-band{padding:0 0 clamp(36px,5vw,56px)}
.stats-band .stats{margin-top:0}

/* ── sticky section rail ────────────────────────────────────────────────── */
.rail{position:sticky;top:71px;z-index:50;border-block:1px solid var(--line);
  background:rgba(7,5,26,.86);backdrop-filter:blur(14px) saturate(140%)}
.rail .wrap{display:flex;gap:4px;height:var(--rail-h);align-items:center;
  overflow-x:auto;scrollbar-width:none}
.rail .wrap::-webkit-scrollbar{display:none}
.rail a{flex:0 0 auto;font-size:.82rem;color:var(--ink-3);padding:7px 13px;border-radius:9px;
  white-space:nowrap;transition:color .16s,background .16s}
.rail a:hover{color:var(--ink);background:var(--primary-soft)}
.rail a.is-active{color:var(--ink);background:var(--primary-soft);
  box-shadow:inset 0 0 0 1px var(--line-2)}

/* ── the opening lead: prose beside the anatomy of an angle ─────────────────
   A floating quote box in the right column read as filler and left a hole
   beneath it. The right column now earns its place — one diagram showing all
   four angles around an observer, which the four cards then take apart — and
   the line about two people in one city is promoted to a full-width statement
   between the two, where it works as the turn in the argument.
   --------------------------------------------------------------------------- */
.how-lead{display:grid;gap:clamp(26px,4vw,54px);align-items:center}
@media(min-width:980px){.how-lead{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}}

.anatomy{margin:0}
.anatomy svg{display:block;width:100%;max-width:400px;margin:0 auto;height:auto;overflow:visible}
.anatomy .sky{fill:url(#sky);stroke:var(--line-2);stroke-width:1}
.anatomy .axis{stroke:rgba(157,140,255,.30);stroke-width:1;stroke-dasharray:4 5;fill:none}
.anatomy .horizon{stroke:rgba(157,140,255,.5);stroke-width:1.4;fill:none}
.anatomy .cap{fill:var(--ink-3);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700}
.anatomy .you circle{fill:var(--ink)}
.anatomy .you text{fill:var(--ink-3);font-size:11.5px;font-weight:600}
.anatomy .pt text{font-size:12px;font-weight:700;letter-spacing:.02em}
.anatomy .mc circle{fill:#FFB454}.anatomy .mc text{fill:#FFB454}
.anatomy .ic circle{fill:#4ADE80}.anatomy .ic text{fill:#4ADE80}
.anatomy .ac circle{fill:#60A5FA}.anatomy .ac text{fill:#60A5FA}
.anatomy .dc circle{fill:#F472B6}.anatomy .dc text{fill:#F472B6}
.anatomy .pt circle{filter:drop-shadow(0 0 7px currentColor)}
.anatomy figcaption{margin-top:16px;text-align:center;font-size:.84rem;color:var(--ink-3);
  max-width:42ch;margin-inline:auto}

.statement{margin:clamp(30px,4vw,44px) 0 0;padding:0 0 0 26px;position:relative;
  border-left:3px solid transparent;
  border-image:linear-gradient(180deg,var(--primary-2),transparent) 1}
.statement p{margin:0;max-width:34ch;font-size:clamp(1.3rem,2.4vw,1.72rem);line-height:1.34;
  font-weight:700;letter-spacing:-.022em;color:var(--ink);text-wrap:balance}

/* ── section headers: measured text, full-width grids beneath ───────────── */
.sec-head{max-width:72ch}
.sec-head h2{max-width:26ch}
.sec-head .muted + .muted{margin-top:14px}

/* ── the four angle cards, each with its own diagram ────────────────────── */
.angles{display:grid;gap:18px;margin-top:34px}
@media(min-width:680px){.angles{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.angles{grid-template-columns:repeat(4,1fr)}}
.angle{display:flex;flex-direction:column;gap:2px;padding-top:22px}
.angle .dia{width:100%;max-width:132px;height:auto;margin:0 0 16px;display:block}
.angle .dia .sphere{fill:rgba(157,140,255,.07);stroke:var(--line-2);stroke-width:1}
.angle .dia .grid-l{stroke:rgba(157,140,255,.22);stroke-width:.8;fill:none}
.angle .dia .line{stroke-width:2.6;fill:none;stroke-linecap:round}
.angle .dia .pip{stroke:none}
/* Colour the stroke and the pip separately — a shared rule would put a fill
   back on the arc and turn the AC/DC diagrams into solid half-discs. */
.angle--mc .dia .line{stroke:#FFB454} .angle--mc .dia .pip{fill:#FFB454}
.angle--ic .dia .line{stroke:#4ADE80} .angle--ic .dia .pip{fill:#4ADE80}
.angle--ac .dia .line{stroke:#60A5FA} .angle--ac .dia .pip{fill:#60A5FA}
.angle--dc .dia .line{stroke:#F472B6} .angle--dc .dia .pip{fill:#F472B6}

/* ── six Vedic layers ───────────────────────────────────────────────────── */
.layers{margin-top:34px}
@media(min-width:760px){.layers{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.layers{grid-template-columns:repeat(3,1fr)}}

/* ── comparison: one panel, two halves ──────────────────────────────────────
   Two separate cards with large abstract artwork on top read as a gallery, not
   a comparison — and the art was doing no explaining. This is a single panel
   split by a rail, so the two things are visibly weighed against each other,
   with the footer making the point that you get both.
   --------------------------------------------------------------------------- */
.vs{margin-top:34px;display:grid;border:1px solid var(--line-2);border-radius:var(--r-xl);
  overflow:hidden;background:linear-gradient(168deg,var(--panel-2),var(--panel) 68%);
  box-shadow:var(--shadow),0 0 0 1px rgba(157,140,255,.05)}
@media(min-width:900px){.vs{grid-template-columns:1fr auto 1fr}}

.vs-side{position:relative;padding:clamp(26px,3vw,40px)}
.vs-side::before{content:"";position:absolute;left:0;right:0;top:0;height:3px}
.vs-a::before{background:linear-gradient(90deg,#60A5FA,transparent 85%)}
.vs-b::before{background:linear-gradient(270deg,#F472B6,transparent 85%)}
.vs-a{background:radial-gradient(460px 220px at 0% 0%,rgba(96,165,250,.11),transparent 68%)}
.vs-b{background:radial-gradient(460px 220px at 100% 0%,rgba(244,114,182,.10),transparent 68%)}
.vs-side .q{display:block;font-size:.72rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.vs-side h3{font-size:1.28rem;margin-bottom:12px;letter-spacing:-.022em}
.vs-side p{margin:0;font-size:.98rem;line-height:1.64;color:var(--ink-2)}

.vs-ic{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;margin-bottom:20px;
  border:1px solid var(--line-2);
  background:linear-gradient(140deg,rgba(108,99,255,.28),rgba(157,123,255,.07))}
.vs-ic svg{width:27px;height:27px;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vs-a .vs-ic svg{stroke:#8CC2FF}
.vs-b .vs-ic svg{stroke:#F9A8D4}

/* The rail: a divider that names the relationship instead of just splitting. */
.vs-rail{position:relative;display:grid;place-items:center}
.vs-rail::before{content:"";position:absolute;top:24px;bottom:24px;width:1px;
  background:linear-gradient(180deg,transparent,var(--line-2),transparent)}
.vs-rail span{position:relative;z-index:1;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;font-size:.68rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);background:var(--bg-2);
  border:1px solid var(--line-2);box-shadow:0 10px 24px -14px rgba(0,0,0,.9)}
@media(max-width:899px){
  .vs-rail{height:58px}
  .vs-rail::before{top:auto;bottom:auto;left:24px;right:24px;width:auto;height:1px;
    background:linear-gradient(90deg,transparent,var(--line-2),transparent)}
}

.vs-foot{grid-column:1/-1;padding:clamp(20px,2.4vw,28px) clamp(26px,3vw,40px);
  border-top:1px solid var(--line);background:rgba(157,140,255,.045)}
.vs-foot p{margin:0;max-width:94ch}

/* ── steps, as a timeline ───────────────────────────────────────────────── */
ol.steps{position:relative}
@media(min-width:720px){
  ol.steps::before{content:"";position:absolute;left:36px;top:26px;bottom:26px;width:2px;
    background:linear-gradient(180deg,var(--primary-2),transparent);opacity:.45}
  ol.steps li{margin-left:0}
}

/* ── closing band ───────────────────────────────────────────────────────── */
.band{overflow:hidden}
.band-grid{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(to right,rgba(157,140,255,.09) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(157,140,255,.09) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(60% 80% at 50% 0%,#000,transparent 75%);
  mask-image:radial-gradient(60% 80% at 50% 0%,#000,transparent 75%)}
.band > *{position:relative}

/* ── lifting the body to match the hero ─────────────────────────────────────
   The hero carries a live globe and a lit background; next to it the rest of
   the page read as a plain document. These rules give every section the same
   treatment: an ambient light source, surfaces with real material, and content
   that arrives as you reach it.
   --------------------------------------------------------------------------- */

/* Ambient glow, alternating side to side so the page has a light that moves. */
section{overflow:hidden}
section::after{content:"";position:absolute;z-index:0;width:min(760px,70vw);height:420px;
  top:-140px;right:-160px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(108,99,255,.17),transparent 72%)}
section:nth-of-type(even)::after{right:auto;left:-180px;
  background:radial-gradient(closest-side,rgba(157,123,255,.14),transparent 72%)}
section > .wrap{position:relative;z-index:1}

/* Section labels get a rule, so a heading block reads as a deliberate opening. */
.sec-head .sec-label{display:flex;align-items:center;gap:12px}
.sec-head .sec-label::after{content:"";height:1px;flex:1;max-width:120px;
  background:linear-gradient(90deg,var(--line-2),transparent)}

/* Arrive-on-scroll. The class is applied by script, so no-JS shows everything. */
.reveal{opacity:0;transform:translateY(16px);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1) var(--d,0ms),
             transform .62s cubic-bezier(.22,.61,.36,1) var(--d,0ms)}
.reveal.in{opacity:1;transform:none}

/* ── reference table: planet badges and a rail per row ──────────────────── */
.tbl-scroll{box-shadow:var(--shadow)}
tbody th[data-dot]::before{display:none}          /* the badge replaces the dot */
tbody th[data-dot]{box-shadow:inset 3px 0 0 var(--dot);padding-left:22px}
.p-glyph{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:11px;
  vertical-align:-9px;border-radius:9px;font-size:1rem;line-height:1;
  color:var(--dot);background:rgba(157,140,255,.10);
  background:color-mix(in srgb,var(--dot) 15%,transparent);
  border:1px solid rgba(157,140,255,.28);
  border-color:color-mix(in srgb,var(--dot) 38%,transparent);
  box-shadow:0 0 16px -6px var(--dot)}
tbody tr{transition:background .16s}

/* ── six layers: gradient tiles, lit corners ────────────────────────────── */
.layers .card{padding:26px 24px}
.layers .card::after{content:"";position:absolute;inset:-40% -30% auto auto;width:220px;height:200px;
  background:radial-gradient(closest-side,rgba(157,123,255,.16),transparent 70%);
  pointer-events:none;opacity:0;transition:opacity .25s}
.layers .card:hover::after{opacity:1}
.layers .card-ico{width:44px;height:44px;border-radius:13px;
  background:linear-gradient(140deg,rgba(108,99,255,.34),rgba(157,123,255,.12));
  border-color:rgba(157,140,255,.34)}
.layers .card-ico svg{width:21px;height:21px;stroke:#CFC4FF}
.layers h3{font-size:1.06rem;margin-bottom:9px}

/* ── method: a heavier timeline ─────────────────────────────────────────── */
ol.steps{gap:16px}
ol.steps li{padding:24px 26px 24px 78px;transition:border-color .18s,transform .18s,box-shadow .18s}
ol.steps li:hover{transform:translateY(-2px);box-shadow:0 18px 40px -26px rgba(0,0,0,.9)}
ol.steps li b{display:block;margin-bottom:5px;font-size:1.04rem;color:var(--ink);
  letter-spacing:-.012em}
ol.steps li::before{left:22px;top:22px;width:38px;height:38px;border-radius:12px;font-size:.8rem;
  box-shadow:0 8px 20px -8px var(--glow),inset 0 0 0 1px rgba(255,255,255,.14)}
@media(min-width:720px){ol.steps::before{left:41px;top:34px;bottom:34px}}

/* ── FAQ: a lit edge when open ──────────────────────────────────────────── */
#faq details{padding:20px 24px}
#faq summary{font-size:1.02rem}
#faq details[open]{background:linear-gradient(165deg,rgba(108,99,255,.16),var(--panel) 62%)}

/* ── related, as cards rather than pills ────────────────────────────────── */
.related{display:grid;gap:12px;margin-top:28px}
@media(min-width:640px){.related{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.related{grid-template-columns:repeat(3,1fr)}}
.related a{display:flex;align-items:center;justify-content:space-between;gap:14px;
  border-radius:var(--r);padding:16px 18px;font-size:.92rem;font-weight:600;
  color:var(--ink-2);background:linear-gradient(165deg,var(--panel-2),var(--panel) 62%)}
.related a::after{content:"→";color:var(--primary-2);transition:transform .16s}
.related a:hover::after{transform:translateX(3px)}

@media (prefers-reduced-motion:reduce){
  .related a:hover::after{transform:none}
}