/* ============================================================
   HAB EMPIRE — site-wide type-scale bump + theme system v18
   Loaded on EVERY page after other styles.
   Themes: dark (default) · light · aurora · emerald · nile
   Covers BOTH systems: hv- variables (V14/Intelligence pages)
   and legacy variables (--gold-bright/--ivory-dim/--terminal-*).
   ============================================================ */

/* ---------- 1) READABILITY: raise the micro-type scale ---------- */
/* The mono micro-labels were 7.7–10px; lift them to ~11–12.5px.   */
.hv-link{font-size:.72rem !important}
.hv-btn{font-size:.76rem !important}
.hv-badge{font-size:.62rem !important}
.hv-kicker{font-size:.74rem !important}
.hv-chip{font-size:.7rem !important}
.hv-flabel{font-size:.68rem !important}
.hv-fcount{font-size:.82rem !important}
.hv-clear{font-size:.68rem !important}
.hv-brand span{font-size:.55rem !important}
.hv-bee-cat{font-size:.6rem !important}
.hv-bee-num{font-size:.68rem !important}
.hv-orb-role{font-size:.66rem !important}
.hv-tier-tag,.hv-tier-return{font-size:.66rem !important}
.hv-gate-who{font-size:.66rem !important}
.hv-gate-cta{font-size:.7rem !important}
.hv-dk{font-size:.62rem !important}
.hv-field label{font-size:.68rem !important}
.hv-foot h4{font-size:.68rem !important}
.hv-foot-base{font-size:.66rem !important}
.hv-cue{font-size:.66rem !important}
/* module pages (page-scoped classes) */
.pic-counter span,.prob-stat span,.opp-stat span,.imp-stat span,.tk-stat span{font-size:.62rem !important}
.pic-pill{font-size:.68rem !important}
.pic-mod span{font-size:.6rem !important}
.pic-soon{font-size:.6rem !important}
.prob-layer,.prob-region,.prob-meterlabel{font-size:.62rem !important}
.opp-from{font-size:.6rem !important}
.imp-sub,.tk-sub,.kg-type,.map-meta{font-size:.64rem !important}
.imp-l,.imp-leg{font-size:.66rem !important}
.tk-label,.tk-chip{font-size:.66rem !important}
.kg-hint,.map-lab{font-size:.6rem !important}
.kg-rel li small,.map-prob small{font-size:.6rem !important}
/* universal components (all pages incl. legacy) */
.hab-dock a,.hab-backtop,.hab-install{font-size:.7rem !important}
.hab-skip-link{font-size:.74rem !important}
#status-bar,#sbar{font-size:.68rem !important}
.hab-v7-strip{font-size:.66rem !important}
.empire-page-rune{font-size:.62rem !important}
.empire-signal-chip{font-size:.62rem !important}
.empire-live-card::after{font-size:.56rem !important}
/* legacy kickers/labels */
.v11-kicker,.hab-launch-kicker,.hab-proof-kicker,.hab-payment-kicker,.hab-legal-kicker,
.hab-sample-kicker,.hab-section-kicker{font-size:.7rem !important}
.hab-mini-btn{font-size:.7rem !important}
.hab-gate-action,.hab-action-pill{font-size:.62rem !important}
.hero-transmission{font-size:.78rem !important}

/* ---------- 2) THEME BUTTON accents for new themes ---------- */
body.theme-emerald .hab-theme-btn{background:rgba(4,18,12,.85);border-color:rgba(60,200,140,.55);color:#7dedb7}
body.theme-nile .hab-theme-btn{background:rgba(4,12,24,.85);border-color:rgba(80,170,255,.55);color:#8fd0ff}

/* ---------- 3) THEMES ---------- */
/* Each block remaps BOTH variable systems so legacy pages theme too. */

/* AURORA — indigo/violet + neon (extend to legacy vars) */
body.theme-aurora{
  --terminal-green:#52f0a8; --terminal-amber:#ffcb57;
  --ivory-dim:#a39ed0; --glow-gold:0 0 18px rgba(201,139,255,.4);
}

/* EMERALD — deep forest + gold (Ethiopian flag energy, dark family) */
body.theme-emerald{
  /* hv system */
  --void:#04120c; --void2:#07180f; --earth-bg:#0a1f14; --panel:rgba(60,200,140,.06);
  --clay:#1f8f5f; --gold:#3cc88c; --gold-bright:#7dedb7; --ember:#e0a83c;
  --ivory:#e6f5ec; --dim:#9dc4ae; --faint:#5f8a72;
  --intel:#57b8ff; --green:#7dedb7;
  --line:rgba(60,200,140,.18); --line-bright:rgba(60,200,140,.5);
  /* legacy system */
  --terminal-green:#7dedb7; --terminal-amber:#3cc88c; --ivory-dim:#9dc4ae;
}
body.theme-emerald .hv-aether::before{background:radial-gradient(1100px 700px at 72% -8%,rgba(60,200,140,.14),transparent 60%),radial-gradient(900px 700px at 12% 108%,rgba(224,168,60,.06),transparent 60%),#04120c}
body.theme-emerald .hv-nav{background:rgba(4,18,12,.8)}
body.theme-emerald .hv-drawer{background:#07180f}

/* NILE — midnight blue + cyan/gold (dark family) */
body.theme-nile{
  /* hv system */
  --void:#04101f; --void2:#071527; --earth-bg:#0a1a30; --panel:rgba(80,170,255,.07);
  --clay:#2a6cb0; --gold:#57b8ff; --gold-bright:#9bd7ff; --ember:#ffb454;
  --ivory:#e8f2fc; --dim:#9db8d4; --faint:#5f7a9a;
  --intel:#42e8c8; --green:#5cf2b8;
  --line:rgba(80,170,255,.2); --line-bright:rgba(80,170,255,.5);
  /* legacy system */
  --terminal-green:#42e8c8; --terminal-amber:#57b8ff; --ivory-dim:#9db8d4;
}
body.theme-nile .hv-aether::before{background:radial-gradient(1100px 700px at 72% -8%,rgba(80,170,255,.16),transparent 60%),radial-gradient(900px 700px at 12% 108%,rgba(66,232,200,.08),transparent 60%),#04101f}
body.theme-nile .hv-nav{background:rgba(4,16,31,.8)}
body.theme-nile .hv-drawer{background:#071527}

/* LIGHT on legacy vars (hv light lives in hab-hive.css) */
body.theme-light{
  --terminal-green:#0d7a45; --terminal-amber:#a9720f; --ivory-dim:#5f4f38;
}

/* Legacy pages: retint the fixed dark body background per dark theme. */
body.theme-emerald{background:#04120c}
body.theme-nile{background:#04101f}
body.theme-aurora{background:#0a0a20}

/* ---------- hero hierarchy: HAB EMPIRE is the headline ---------- */
/* sized to fit the desktop left column (~710px) as two clean lines
   "HAB" / "EMPIRE"; keep-all prevents the ugly mid-word "EMPIR / E" break. */
#empire-tag{
  font-family:var(--font-display,'Cinzel',serif) !important;
  font-size:clamp(2.6rem,6.2vw,5.6rem) !important;
  font-weight:900 !important;line-height:.98 !important;
  letter-spacing:clamp(2px,.5vw,6px) !important;
  color:var(--gold-bright,#f0c463) !important;
  text-shadow:0 0 34px rgba(224,168,60,.34),0 0 8px rgba(0,224,240,.2) !important;
  margin:0 0 10px !important;
  max-width:12ch;
  word-break:keep-all !important;overflow-wrap:normal !important;hyphens:none !important;
  white-space:normal !important;
}
.hero-h1{
  font-size:clamp(1.5rem,3.4vw,3rem) !important;
  font-weight:600 !important;
  letter-spacing:1.5px !important;
  line-height:1.08 !important;
  max-width:none !important;
  word-break:keep-all !important;overflow-wrap:normal !important;
}
.hero-h1 em{color:var(--gold-bright) !important}
/* let the left column breathe so nothing clips */
@media(min-width:1040px) and (min-height:650px){
  .hero-content{grid-template-columns:minmax(0,1.15fr) minmax(320px,380px) !important}
}

/* ============================================================
   HOMEPAGE NAV — reveal a real desktop menu (was hamburger-only)
   ≥1024px: horizontal links, hamburger hidden.  <1024px: hamburger.
   ============================================================ */
@media (min-width: 1024px) {
  #navbar .nav-links {
    display: flex !important; align-items: center;
    gap: clamp(12px, 1.7vw, 24px); list-style: none; margin: 0; padding: 0; flex-wrap: nowrap;
  }
  #navbar .nav-links li { list-style: none; }
  #navbar .nav-links a {
    font-family: var(--font-mono, 'Share Tech Mono', monospace);
    font-size: .68rem; letter-spacing: 2px; text-transform: uppercase;
    color: var(--ivory-dim, #a89878); text-decoration: none; white-space: nowrap;
    padding: 6px 2px; transition: color .25s; position: relative;
  }
  #navbar .nav-links a::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px;
    background: var(--gold, #e0a83c); transition: right .25s ease;
  }
  #navbar .nav-links a:hover { color: var(--gold, #e0a83c); }
  #navbar .nav-links a:hover::after { right: 0; }
  #navbar .nav-hamburger, #navbar #menu-open { display: none !important; }
}
@media (max-width: 1023px) {
  #navbar .nav-links { display: none !important; }
  #navbar .nav-hamburger, #navbar #menu-open { display: flex !important; }
}

/* ============================================================
   UX: homepage hero — ONE clear primary action.
   "Start Here" dominates; the other two become quiet secondary
   buttons (removes the competing green + equal-weight paralysis).
   ============================================================ */
.hero-cta-row .btn-gold{
  font-size:.74rem !important; letter-spacing:3px; padding:18px 42px !important;
  box-shadow:0 10px 34px rgba(224,168,60,.30); transform:translateZ(0);
}
.hero-cta-row .btn-outline,
.hero-cta-row .btn-terminal{
  font-size:.58rem !important; padding:12px 22px !important;
  color:var(--ivory-dim,#a89878) !important;
  border:1px solid rgba(168,152,120,.28) !important;
  background:transparent !important; box-shadow:none !important;
}
.hero-cta-row .btn-outline:hover,
.hero-cta-row .btn-terminal:hover{
  border-color:var(--gold,#e0a83c) !important; color:var(--gold-bright,#f0c463) !important; box-shadow:none !important;
}

/* UX: respect data-saver / reduced-motion on the heavy ambient layer */
@media (prefers-reduced-motion: reduce){
  .empire-ambient-canvas, #stars, #geo-canvas,
  .pro-sigil-orbit, .pro-sigil-mark, .orbit-ring, .hero-grid{ animation:none !important; }
}

/* PERF: data-saver users get the static site (no heavy background canvases) */
@media (prefers-reduced-data: reduce){
  .empire-ambient-canvas, #geo-canvas, #stars, .hero-grid { display:none !important; }
  .pro-sigil-orbit, .pro-sigil-mark, .orbit-ring { animation:none !important; }
}