/* ═══════════════════════════════════════════════════════════════════════════
   JUNGLE NATAL · the Diaspora Chart
   Palette lock: #0B1220 navy · #F5F1E6 cream · #131B2E panel
                 #D4AF37 gold · #3B5FD9 lapis-bright
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --navy:        #0B1220;
  --navy-deep:   #070C17;
  --panel:       #131B2E;
  --panel-2:     #1A2340;
  --cream:       #F5F1E6;
  --cream-dim:   #CFC8B2;
  --cream-mute:  rgba(245,241,230,.56);
  --cream-soft:  rgba(245,241,230,.78);
  --gold:        #D4AF37;
  --gold-dim:    #8E751F;
  --gold-soft:   rgba(212,175,55,.22);
  --lapis:       #3B5FD9;
  --lapis-soft:  rgba(59,95,217,.22);
  --rule:        rgba(212,175,55,.28);
  --rule-soft:   rgba(245,241,230,.12);
  --ge-red:      #B23A3A; /* Ge'ez liturgical red */

  --serif:       'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --sans:        'Inter', ui-sans-serif, system-ui, sans-serif;
  --mono:        'JetBrains Mono', ui-monospace, Menlo, monospace;
  --ethiopic:    'Noto Sans Ethiopic', 'Fraunces', serif;
  --hieroglyph:  'Noto Sans Egyptian Hieroglyphs', 'Fraunces', serif;
  --arabic:      'Noto Naskh Arabic', 'Fraunces', serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body{
  background: var(--navy);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Star-field (Sba-inspired hieroglyph grain) */
.starfield{
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(212,175,55,.38) 50%, transparent 51%),
    radial-gradient(1px 1px at 75% 15%, rgba(212,175,55,.25) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 10% 80%, rgba(245,241,230,.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 85% 68%, rgba(212,175,55,.22) 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 55%, rgba(245,241,230,.2) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 60% 92%, rgba(212,175,55,.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 40%, rgba(245,241,230,.25) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 30% 10%, rgba(212,175,55,.22) 50%, transparent 51%);
  background-size: 100% 100%;
  opacity: .7;
}

main{ position: relative; z-index: 1; }

/* ── utility ── */
.wrap{ max-width: 1240px; margin: 0 auto; padding: 0 40px; }
.wrap-narrow{ max-width: 920px; margin: 0 auto; padding: 0 40px; }
.mono{ font-family: var(--mono); }
.serif{ font-family: var(--serif); }
.italic{ font-style: italic; }
.uppercase{ text-transform: uppercase; letter-spacing: .14em; }
.hairline{ height: 1px; background: var(--rule); border: 0; margin: 0; }
.hairline-soft{ height: 1px; background: var(--rule-soft); border: 0; margin: 0; }
.gold{ color: var(--gold); }
.lapis{ color: var(--lapis); }
.cream-mute{ color: var(--cream-mute); }

/* ── section chrome ── */
section{ position: relative; padding: 88px 0; border-top: 1px solid var(--rule-soft); }
section:first-child{ border-top: 0; }
.sec-label{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--gold);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.sec-label::before{
  content: '';
  width: 28px; height: 1px; background: var(--gold); display: inline-block;
}
.sec-head{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin: 0 0 22px;
  text-wrap: pretty;
}
.sec-sub{
  color: var(--cream-mute);
  font-size: 14px;
  max-width: 640px;
  margin: 0 0 28px;
}

/* ── tier badges ── */
.tier{
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  padding: 2px 7px;
  border-radius: 2px;
  border: 1px solid;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: middle;
}
.tier.calc{  color: var(--gold);  border-color: var(--gold);  background: rgba(212,175,55,.05); }
.tier.canon{ color: var(--cream-dim); border-color: var(--rule-soft); background: rgba(245,241,230,.03); font-family: var(--serif); font-style: italic; font-size: 11px; letter-spacing: .04em; padding: 1px 8px;}
.tier.interp{color: #A9BDFF; border-color: rgba(59,95,217,.5); background: rgba(59,95,217,.08); font-family: var(--serif); font-style: italic; font-size: 11px; letter-spacing: .04em; padding: 1px 8px;}

/* ── disclosure banners ── */
.disclosure{
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 18px;
  border: 1px dashed var(--rule);
  background: rgba(212,175,55,.04);
  font-size: 13px;
  color: var(--cream-dim);
  margin: 22px 0;
  border-radius: 2px;
  line-height: 1.55;
}
.disclosure .bulb{ color: var(--gold); font-family: var(--mono); flex-shrink: 0; }

/* ═══════════ DEMO BUTTON ═══════════ */
.demo-btn{
  position: fixed;
  top: 18px; right: 18px;
  z-index: 9998;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: rgba(7,12,23,.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--rule);
  color: var(--cream-dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 999px;
  transition: border-color .18s, color .18s, background .18s;
}
.demo-btn:hover{ border-color: var(--gold); color: var(--gold); background: rgba(212,175,55,.06); }
.demo-btn .dot{
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 0 rgba(212,175,55,.6);
}
.demo-btn.live .dot{
  animation: demo-pulse 1.4s ease-out infinite;
}
@keyframes demo-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(212,175,55,.55); }
  70%{ box-shadow: 0 0 0 10px rgba(212,175,55,0); }
  100%{ box-shadow: 0 0 0 0 rgba(212,175,55,0); }
}
.demo-btn.live{ border-color: var(--gold); color: var(--gold); }

.demo-overlay{
  position: fixed; left: 50%; bottom: 28px;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px;
  background: var(--navy-deep);
  border: 1px solid var(--gold);
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--cream);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.demo-overlay .lab{ color: var(--gold); }
.demo-overlay .bar{
  width: 220px; height: 2px; background: var(--rule-soft); position: relative; overflow: hidden;
}
.demo-overlay .bar i{
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--gold);
  width: 0%; transition: width .25s linear;
}
.demo-overlay .stage{ color: var(--cream-dim); }

.mandala-svg.demo-spin .ring-group{
  animation: demo-spin 12s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes demo-spin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

.demo-ring-flash{
  animation: ring-flash 1.6s ease-in-out;
}
@keyframes ring-flash{
  0%,100%{ filter: none; }
  50%{ filter: drop-shadow(0 0 18px rgba(212,175,55,.85)); }
}

/* ═══════════ HERO ═══════════ */
.hero{
  min-height: 100vh;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(212,175,55,.08), transparent 55%),
    radial-gradient(ellipse at 85% 15%, rgba(59,95,217,.08), transparent 50%),
    var(--navy);
}
.hero-glyphs{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--hieroglyph);
  color: rgba(212,175,55,.055);
  font-size: min(36vw, 520px);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  letter-spacing: -.05em;
}
.hero-top{
  display: flex; justify-content: space-between; align-items: center;
  padding: 28px 40px;
  position: relative; z-index: 2;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--cream-mute);
}
.hero-top .mark{ color: var(--gold); }
.hero-top .pill{
  display: inline-flex; gap: 10px; align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--cream-dim);
}
.hero-top .pill b{ color: var(--gold); font-weight: 600; }

.hero-body{
  flex: 1;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items: center;
  padding: 40px 40px 40px;
  position: relative; z-index: 2;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}
.hero-title{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(60px, 10vw, 148px);
  line-height: .88;
  letter-spacing: -0.035em;
  margin: 0 0 18px;
  color: var(--cream);
  font-variation-settings: "opsz" 144;
}
.hero-title .amp{ color: var(--gold); font-style: italic; font-weight: 400; }
.hero-sub{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px);
  color: var(--gold);
  margin: 0 0 12px;
  font-weight: 400;
}
.hero-plain{
  margin: 0 0 6px;
  color: var(--cream);
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.35;
  max-width: 560px;
}
.hero-bridge{
  margin: 0 0 30px;
  color: var(--cream-mute);
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  max-width: 560px;
}
.hero-tag{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .25em;
  color: var(--cream-mute);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 14px 0;
  margin: 0 0 36px;
  max-width: 560px;
}
.hero-tag .dot{ color: var(--gold); margin: 0 6px;}

.cta{
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 30px;
  background: var(--gold);
  color: var(--navy);
  border: 0;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow: 0 0 0 1px var(--gold-dim) inset, 0 8px 24px rgba(212,175,55,.15);
}
.cta:hover{ background: #E6C04A; transform: translateY(-1px); box-shadow: 0 0 0 1px var(--gold-dim) inset, 0 10px 32px rgba(212,175,55,.25); }
.cta .arrow{ font-family: var(--serif); font-size: 16px;}

.cta-ghost{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.cta-ghost:hover{ border-color: var(--gold); color: var(--gold); background: rgba(212,175,55,.04); }
.cta-ghost span{
  color: var(--cream-mute);
  font-size: 9px;
  letter-spacing: .12em;
}

/* Hero right column: layer stack preview */
.hero-stack{
  display: flex; flex-direction: column; gap: 12px;
  padding: 28px;
  border: 1px solid var(--rule);
  background: linear-gradient(180deg, rgba(19,27,46,.8), rgba(11,18,32,.5));
  border-radius: 3px;
  backdrop-filter: blur(6px);
}
.hero-stack-head{
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--cream-mute);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: 6px;
}
.hero-stack-head b{ color: var(--gold); }
.hero-layer{
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.hero-layer:last-child{ border-bottom: 0; }
.hero-layer .glyph{
  font-size: 22px; line-height: 1;
  color: var(--gold);
  display: flex; justify-content: center;
}
.hero-layer .glyph.eth{ font-family: var(--ethiopic); font-size: 18px; }
.hero-layer .glyph.hi{ font-family: var(--hieroglyph); font-size: 22px; }
.hero-layer .glyph.ar{ font-family: var(--arabic); font-size: 20px; }
.hero-layer .nm{ font-family: var(--serif); font-size: 16px; color: var(--cream); }
.hero-layer .nm em{ color: var(--cream-mute); font-style: italic; font-size: 13px; display: block; margin-top: 1px;}
.hero-layer .rng{ font-family: var(--mono); font-size: 10px; color: var(--cream-mute); letter-spacing: .1em; }

.hero-bottom{
  padding: 20px 40px 28px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--cream-mute);
  position: relative; z-index: 2;
  border-top: 1px solid var(--rule-soft);
}
.hero-bottom a{ color: var(--cream-dim); text-decoration: none; border-bottom: 1px dotted var(--rule); }
.hero-bottom a:hover{ color: var(--gold); }

/* ═══════════ ENTRY ═══════════ */
.first-time-strip{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  margin: 0 0 22px;
  padding: 14px 18px;
  border: 1px solid var(--rule-soft);
  border-left: 2px solid var(--gold);
  background: rgba(212,175,55,.045);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--cream-mute);
  text-transform: uppercase;
}
.first-time-strip b{ color: var(--gold); font-weight: 600; }
.entry-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
}
.entry-field{
  padding: 24px 22px;
  background: var(--panel);
  display: flex; flex-direction: column; gap: 8px;
  min-height: 120px;
  position: relative;
}
.entry-field label{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--cream-mute);
  text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: center;
}
.entry-field .num{ color: var(--gold); }
.entry-field input{
  background: transparent;
  border: 0;
  color: var(--cream);
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  padding: 4px 0;
  outline: none;
  border-bottom: 1px solid var(--rule-soft);
  transition: border-color .18s;
}
.entry-field input:focus{ border-bottom-color: var(--gold); }
.entry-field .locked{
  position: absolute; top: 22px; right: 22px;
  color: var(--gold); font-size: 14px;
  animation: pop .3s ease;
}
.entry-field .hint{
  font-family: var(--mono);
  font-size: 10px;
  color: var(--cream-mute);
  letter-spacing: .1em;
}
.entry-field.toggle{
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  padding: 22px;
}
.entry-toggle-btn{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  color: var(--cream-mute); cursor: pointer; user-select: none;
  padding: 4px 8px; border: 1px solid var(--rule-soft); border-radius: 2px;
}
.entry-toggle-btn.on{ color: var(--gold); border-color: var(--gold); }

@keyframes pop{ from{ transform: scale(.6); opacity: 0;} to{ transform: scale(1); opacity: 1;} }

.entry-submit-row{
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 0 0;
  gap: 20px;
}
.entry-meta{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--cream-mute);
}

.persona-row{
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 18px;
}
.persona-chip{
  padding: 8px 14px;
  border: 1px solid var(--rule-soft);
  background: transparent;
  color: var(--cream-dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: border-color .18s, color .18s, background .18s;
}
.persona-chip:hover{ color: var(--gold); border-color: var(--rule); }
.persona-chip.active{ color: var(--navy); background: var(--gold); border-color: var(--gold); font-weight: 600; }
.persona-note{
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--cream-mute);
  text-transform: uppercase;
}

/* ═══════════ MANDALA ═══════════ */
.mandala-wrap{
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: center;
}
.mandala-svg{
  width: 100%;
  max-width: 760px;
  aspect-ratio: 1;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 30px 80px rgba(0,0,0,.45));
}
.mandala-svg.breathing .ring-group{
  transform-origin: center;
  animation: breath 4s ease-in-out infinite;
}
@keyframes breath{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.012); }
}
.mandala-side{
  display: flex; flex-direction: column; gap: 18px;
}
.mandala-tap-hint{
  display: inline-flex;
  align-self: flex-start;
  padding: 8px 10px;
  border: 1px solid var(--gold);
  background: rgba(212,175,55,.06);
  color: var(--gold);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.mandala-legend{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--cream-mute);
  letter-spacing: .12em;
  line-height: 1.8;
}
.mandala-legend .lg-row{
  display: grid; grid-template-columns: 20px 1fr auto; gap: 10px;
  padding: 8px 0;
  align-items: center;
  border-bottom: 1px solid var(--rule-soft);
  cursor: pointer;
  transition: color .15s, background .15s, padding-left .15s, box-shadow .15s;
}
.mandala-legend .lg-row:hover{
  color: var(--cream);
  background: rgba(212,175,55,.07);
  padding-left: 8px;
  box-shadow: inset 2px 0 0 var(--gold);
}
.mandala-legend .lg-row:last-child{ border-bottom: 0; }
.mandala-legend .swatch{ width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--gold); justify-self: center; }
.mandala-legend .swatch.r1{ background: rgba(212,175,55,.1); }
.mandala-legend .swatch.r2{ background: rgba(212,175,55,.2); }
.mandala-legend .swatch.r3{ background: rgba(212,175,55,.3); border-color: var(--ge-red); }
.mandala-legend .swatch.r4{ background: rgba(212,175,55,.45); }
.mandala-legend .swatch.r5{ background: var(--gold); }

.mandala-legend .nm{ color: var(--cream); font-family: var(--serif); font-size: 14px; letter-spacing: 0; }
.mandala-legend .nm em{ color: var(--cream-mute); font-style: italic; font-size: 11px; display: block; }

.mandala-tooltip{
  position: fixed;
  pointer-events: none;
  background: var(--navy-deep);
  border: 1px solid var(--gold);
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--cream);
  z-index: 100;
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
  max-width: 240px;
  transform: translate(12px, 12px);
}
.mandala-tooltip .nt-name{ color: var(--gold); font-family: var(--serif); font-size: 14px; letter-spacing: .02em; display: block; margin-bottom: 2px;}
.mandala-tooltip .nt-lit{ color: var(--cream-mute); font-style: italic; font-family: var(--serif); font-size: 12px; display: block; margin-bottom: 6px;}
.mandala-tooltip .nt-gloss{ font-family: var(--sans); font-size: 11px; letter-spacing: 0; color: var(--cream-dim); line-height: 1.5; }

/* ═══════════ LAYER CARDS ═══════════ */
.layer-banner{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 24px 28px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-bottom: 2px solid var(--gold);
  margin-bottom: 2px;
}
.layer-banner .native{
  font-size: 52px;
  line-height: 1;
  color: var(--gold);
}
.layer-banner.sba .native{ font-family: var(--hieroglyph); }
.layer-banner.bahere .native{ font-family: var(--ethiopic); }
.layer-banner.manzil .native{ font-family: var(--arabic); direction: rtl; }
.layer-banner .title-stack{
  display: flex; flex-direction: column; gap: 4px;
}
.layer-banner .title-stack h2{
  font-family: var(--serif); font-weight: 300; font-size: 34px;
  margin: 0; letter-spacing: -.01em; color: var(--cream);
}
.layer-banner .title-stack .en{
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
  color: var(--cream-mute); text-transform: uppercase;
}
.layer-banner .region{
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .22em;
  color: var(--cream-mute);
  text-transform: uppercase;
  text-align: right;
  line-height: 1.6;
}
.layer-banner .region b{ color: var(--gold); font-weight: 500; display: block;}

.layer-body{
  background: var(--panel);
  border: 1px solid var(--rule-soft);
  border-top: 0;
  padding: 28px;
}

.row-planet{
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--rule-soft);
}
.row-planet:first-child{ border-top: 0; }
.row-planet .planet-sym{
  font-family: var(--serif);
  font-size: 28px;
  color: var(--gold);
  text-align: center;
  font-variation-settings: "opsz" 144;
}
.row-planet .planet-sym em{ display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .18em; color: var(--cream-mute); font-style: normal; text-transform: uppercase; margin-top: 2px;}
.row-planet .body{ display: flex; flex-direction: column; gap: 6px; }
.row-planet .top-line{
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.row-planet .native-nm{
  font-family: var(--serif);
  font-size: 22px; color: var(--cream);
  letter-spacing: -.01em;
}
.row-planet .native-nm.hi{ font-family: var(--hieroglyph); color: var(--gold); font-size: 24px;}
.row-planet .translit{ font-family: var(--serif); font-style: italic; color: var(--gold); font-size: 16px; }
.row-planet .en-gloss{ font-family: var(--serif); color: var(--cream-mute); font-style: italic; font-size: 15px; }
.row-planet .range{ font-family: var(--mono); font-size: 11px; color: var(--cream-mute); letter-spacing: .1em; }
.row-planet .canon-line{
  font-family: var(--serif); font-style: italic; font-size: 14px;
  color: var(--cream-dim); line-height: 1.55;
  padding-left: 14px; border-left: 2px solid var(--rule);
  margin-top: 4px;
}
.row-planet .tags{ display: flex; gap: 8px; flex-direction: column; align-items: flex-end; }

.source-footer{
  margin-top: 22px; padding-top: 18px;
  border-top: 1px dashed var(--rule);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  color: var(--cream-mute); line-height: 1.6;
}
.source-footer b{ color: var(--gold); font-weight: 500; }

/* ── Ifá specific ── */
.ifa-cast{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 36px;
  align-items: start;
  padding: 18px 0 30px;
}
.ifa-marks{
  display: flex; flex-direction: column; gap: 14px;
  align-items: center;
  padding: 20px 18px;
  background: rgba(245,241,230,.03);
  border: 1px dashed var(--rule);
}
.ifa-mark-row{ display: flex; gap: 10px; }
.ifa-mark{ width: 18px; height: 32px; }
.ifa-mark.single{
  background: var(--cream);
}
.ifa-mark.double{
  background: linear-gradient(to right, var(--cream) 0 40%, transparent 40% 60%, var(--cream) 60%);
}
.ifa-label{
  font-family: var(--serif); font-size: 12px; color: var(--cream-mute); font-style: italic;
  margin-top: 6px; text-align: center;
}
.ifa-name{
  font-family: var(--serif); font-weight: 400; font-size: 40px;
  color: var(--gold);
  margin: 0 0 6px;
  line-height: 1;
}
.ifa-variants{
  font-family: var(--mono); font-size: 11px; color: var(--cream-mute); letter-spacing: .14em;
  margin: 0 0 18px;
}
.ifa-variants b{ color: var(--cream-dim); font-weight: 500; }
.ifa-canon{
  font-family: var(--serif); font-style: italic; font-size: 16px;
  color: var(--cream-dim); line-height: 1.6; text-wrap: pretty;
  border-left: 2px solid var(--gold); padding-left: 18px;
  max-width: 560px;
}

/* ── Bahere specific ── */
.bahere-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
  margin-top: 6px;
}
.bahere-cell{
  background: var(--panel);
  padding: 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.bahere-cell .lbl{
  font-family: var(--mono); font-size: 10px; color: var(--cream-mute);
  letter-spacing: .22em; text-transform: uppercase;
}
.bahere-cell .geez{
  font-family: var(--ethiopic);
  font-size: 40px;
  color: var(--gold);
  line-height: 1;
}
.bahere-cell .arab{
  font-family: var(--mono);
  font-size: 13px; color: var(--cream-mute);
  letter-spacing: .1em;
}
.bahere-cell .en{
  font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--cream-dim);
}
.bahere-cell .accent-red{ color: var(--ge-red); }

/* ── Manzil specific ── */
.manzil-feature{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 30px 6px;
}
.manzil-arabic{
  font-family: var(--arabic);
  font-size: 72px;
  color: var(--gold);
  direction: rtl;
  line-height: 1.2;
  text-align: center;
}
.manzil-stars{
  width: 100%; aspect-ratio: 1; max-width: 280px; margin: 0 auto;
}
.manzil-details .label{
  font-family: var(--mono); font-size: 10px; color: var(--gold); letter-spacing: .22em; text-transform: uppercase; margin-bottom: 6px;
}
.manzil-details .translit{
  font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--cream); margin: 0 0 4px;
}
.manzil-details .swahili{
  font-family: var(--serif); font-size: 16px; color: var(--cream-mute); margin: 0 0 18px;
}
.manzil-details .gloss{
  font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--cream-dim); line-height: 1.6;
  margin-bottom: 14px;
}
.manzil-details .asterism{
  font-family: var(--mono); font-size: 11px; color: var(--cream-mute); letter-spacing: .1em;
  padding-top: 14px; border-top: 1px solid var(--rule-soft);
}
.manzil-details .asterism b{ color: var(--gold); font-weight: 500; }

/* ── Orisha specific ── */
.orisha-feature{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  padding: 20px 0 10px;
  align-items: stretch;
}
.orisha-portrait{
  background: linear-gradient(160deg, #1A2340, #0B1220);
  border: 1px solid var(--rule);
  padding: 40px 28px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.orisha-portrait::before{
  content: ''; position: absolute; inset: 10px;
  border: 1px solid rgba(212,175,55,.18);
  pointer-events: none;
}
.orisha-portrait .cowrie{
  font-size: 56px; color: var(--gold); line-height: 1;
}
.orisha-portrait .yr{
  font-family: var(--serif); font-weight: 500; font-size: 42px;
  color: var(--gold); margin: 0; line-height: 1;
  letter-spacing: -.01em;
}
.orisha-portrait .day{
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  color: var(--cream-mute); text-transform: uppercase;
}
.orisha-details dl{
  display: grid; grid-template-columns: 140px 1fr;
  gap: 14px 22px;
  margin: 0;
}
.orisha-details dt{
  font-family: var(--mono); font-size: 10px; color: var(--cream-mute);
  letter-spacing: .22em; text-transform: uppercase;
  padding-top: 4px;
}
.orisha-details dd{
  margin: 0;
  font-family: var(--serif); font-size: 16px; color: var(--cream-dim);
}
.orisha-details dd b{ color: var(--cream); font-weight: 500; }
.orisha-details dd em{ color: var(--cream-mute); }

/* ═══════════ SYNTHESIS ═══════════ */
.syn-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 2px;
  background: var(--rule-soft);
  border: 1px solid var(--rule);
}
.syn-cell{
  background: var(--panel);
  padding: 28px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 180px;
}
.syn-cell.full{ grid-column: 1 / -1; }
.syn-cell.final{
  background: linear-gradient(180deg, rgba(212,175,55,.06), var(--panel));
  border-top: 2px solid var(--gold);
  padding: 36px 40px;
}
.syn-lbl{
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  color: var(--gold); text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
}
.syn-lbl .sym{ font-family: var(--serif); font-size: 16px; color: var(--gold);}
.syn-cell h3{
  font-family: var(--serif); font-weight: 400; font-size: 22px;
  margin: 0 0 4px; color: var(--cream); letter-spacing: -.01em;
}
.syn-sources{
  font-family: var(--mono); font-size: 10px; color: var(--cream-mute); letter-spacing: .14em;
  margin-bottom: 10px;
}
.syn-text{
  font-family: var(--serif); font-style: italic; font-size: 15px;
  color: var(--cream-dim); line-height: 1.65; text-wrap: pretty;
}
.syn-cell.final .syn-text{
  font-size: 19px;
  color: var(--cream);
  font-style: italic;
  max-width: 700px;
  line-height: 1.7;
}
.syn-cell.final .stamp{
  font-family: var(--mono); font-size: 11px; color: var(--gold); letter-spacing: .18em;
  margin-top: 18px;
}

/* ═══════════ RECEIPT ═══════════ */
.receipt-actions{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
}
.r-btn{
  background: var(--panel);
  padding: 26px 24px;
  display: flex; flex-direction: column; gap: 6px;
  cursor: pointer;
  border: 0; color: var(--cream); text-align: left;
  font: inherit;
  transition: background .18s, color .18s;
}
.r-btn:hover{ background: var(--panel-2); color: var(--gold);}
.r-btn.main{
  background: linear-gradient(180deg, rgba(212,175,55,.12), var(--panel));
  box-shadow: inset 0 0 0 1px rgba(212,175,55,.36);
}
.r-btn.dev{ color: var(--cream-dim); }
.r-btn.social .r-ico{ color: #A9BDFF; }
.r-btn .r-ico{ font-family: var(--mono); font-size: 22px; color: var(--gold); }
.r-btn .r-lbl{ font-family: var(--serif); font-size: 18px; }
.r-btn .r-hint{ font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: var(--cream-mute); text-transform: uppercase;}

.stamp-block{
  margin-top: 36px;
  padding: 22px 28px;
  border: 1px solid var(--rule);
  background: var(--navy-deep);
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--cream-dim);
  letter-spacing: .12em;
  line-height: 1.9;
}
.stamp-block .big{ color: var(--gold); font-size: 13px; }
.stamp-block .di{ color: var(--cream-mute); }

/* ═══════════ ROOTS ═══════════ */
.roots-body{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 56px;
}
.roots-pro{
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--cream-dim);
  text-wrap: pretty;
}
.roots-pro p{ margin: 0 0 20px; }
.roots-pro p:first-child::first-line{ font-variant: small-caps; letter-spacing: .06em; color: var(--cream);}
.roots-aside{
  display: flex; flex-direction: column; gap: 24px;
}
.roots-card{
  padding: 22px 24px;
  border: 1px solid var(--rule-soft);
  background: rgba(19,27,46,.6);
}
.roots-card h4{
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  color: var(--gold); text-transform: uppercase;
  margin: 0 0 14px;
}
.roots-card .src{
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-top: 1px solid var(--rule-soft);
  font-family: var(--serif); font-style: italic; font-size: 14px;
  color: var(--cream-dim);
}
.roots-card .src:first-of-type{ border-top: 0; }
.roots-card .src b{
  font-family: var(--mono); font-style: normal; font-size: 10px;
  color: var(--gold); letter-spacing: .18em; text-transform: uppercase;
  flex-shrink: 0; padding-top: 3px;
}

.etym{
  font-family: var(--serif); font-style: italic; font-size: 15px;
  color: var(--cream-dim); line-height: 1.7;
  padding: 20px 22px;
  border-left: 2px solid var(--gold);
  background: rgba(212,175,55,.04);
}
.etym b{ color: var(--gold); font-style: normal; font-weight: 500;}

/* ═══════════ FOOTER ═══════════ */
.page-footer{
  padding: 60px 40px 80px;
  margin-top: 60px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--cream-mute);
  letter-spacing: .14em;
  text-align: center;
  line-height: 1.9;
}
.page-footer b{ color: var(--gold); font-weight: 500; }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 960px){
  .wrap, .wrap-narrow{ padding: 0 22px;}
  .hero-body{ grid-template-columns: 1fr; padding: 24px; gap: 32px;}
  .hero-top{ padding: 20px 22px; }
  .hero-bottom{ padding: 16px 22px 22px; flex-direction: column; gap: 10px; align-items: flex-start;}
  .mandala-wrap{ grid-template-columns: 1fr; }
  .entry-grid{ grid-template-columns: 1fr 1fr; }
  .syn-grid{ grid-template-columns: 1fr; }
  .roots-body{ grid-template-columns: 1fr; }
  .orisha-feature{ grid-template-columns: 1fr; }
  .manzil-feature{ grid-template-columns: 1fr; }
  .ifa-cast{ grid-template-columns: 1fr; }
  .layer-banner{ grid-template-columns: auto 1fr; padding: 20px; gap: 18px;}
  .layer-banner .region{ grid-column: 1 / -1; text-align: left; padding-top: 12px; border-top: 1px solid var(--rule-soft); }
  .bahere-grid{ grid-template-columns: 1fr 1fr; }
  section{ padding: 56px 0; }
}

@media (max-width: 520px){
  .entry-grid{ grid-template-columns: 1fr; }
  .bahere-grid{ grid-template-columns: 1fr; }
  .row-planet{ grid-template-columns: 50px 1fr; }
  .row-planet .tags{ grid-column: 1 / -1; flex-direction: row; padding-left: 70px;}
  .receipt-actions{ grid-template-columns: 1fr; }
}