/* Human Biology Investments, L3C
   Matched to humanbiology.eth.limo original sizing */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; scroll-padding-top: 4rem; }

:root {
  --font-label: 'JetBrains Mono', monospace;
  --font-body: 'Carlito', 'Calibri', 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', sans-serif;
  --color-bg: #050508;
  --color-text: #FFFFFF;
  --color-text-muted: #BBBBBB;
  --color-text-faint: #888888;
  --color-primary: #00E5A0;
  --color-gold: #FFD54F;
  --color-failure: #FF6B4A;
  --color-divider: #2A2A2A;
  --color-border: #333333;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --content-wide: 1200px;
}

body {
  min-height: 100dvh; line-height: 1.6;
  font-family: var(--font-body); font-size: 19px; color: var(--color-text);
  background-color: var(--color-bg);
  background-image: url('./space-bg-final.jpg');
  background-size: cover; background-position: center top; background-attachment: fixed; background-repeat: no-repeat;
}

/* Fixed background fallback for iOS Safari (does not support background-attachment:fixed) */
@supports (-webkit-touch-callout: none) {
  body {
    background-image: none;
  }
  body::before {
    content: ''; position: fixed; inset: 0; z-index: -1;
    background: url('./space-bg-final.jpg') center top / cover no-repeat;
    background-color: var(--color-bg);
  }
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: #00CC8E; }
button { cursor: pointer; background: none; border: none; }
table { border-collapse: collapse; width: 100%; }
::selection { background: rgba(0,229,160,0.25); }

.container { max-width: var(--content-wide); margin-inline: auto; padding-inline: 24px; }
@media (min-width:768px) { .container { padding-inline: 40px; } }

/* ═══ NAV ═══ */
.nav { position:fixed; top:0; left:0; right:0; z-index:100; padding:14px 0; background:transparent; border-bottom:1px solid transparent; transition:all .3s var(--ease-out); }
.nav--scrolled { background:rgba(5,5,8,.65); backdrop-filter:blur(16px); border-bottom-color:rgba(255,255,255,.06); }
.nav__inner { display:flex; align-items:center; justify-content:space-between; max-width:var(--content-wide); margin-inline:auto; padding-inline:24px; }
@media (min-width:768px) { .nav__inner { padding-inline:40px; } }
.nav__logo { display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--color-text); letter-spacing:.05em; text-transform:uppercase; text-decoration:none; }
.nav__logo:hover { color:var(--color-primary); }
.nav__logo-img { width:32px; height:32px; border-radius:4px; object-fit:cover; }
.nav__links { display:flex; align-items:center; gap:24px; list-style:none; }
.nav__links a { font-size:17px; color:var(--color-text-muted); letter-spacing:.02em; }
.nav__links a:hover { color:var(--color-primary); }
.nav__toggle { display:none; color:var(--color-text); padding:8px; }
@media (max-width:900px) {
  .nav__links { display:none; }
  .nav__links.open { display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:rgba(5,5,8,.92); backdrop-filter:blur(20px); padding:24px; border-bottom:1px solid rgba(255,255,255,.06); gap:16px; }
  .nav__links.open a { font-size:15px; }
  .nav__toggle { display:block; }
}

/* ═══ HERO — tighter, not 80vh ═══ */
.hero { min-height: 50vh; display:flex; align-items:center; }
.hero__content { max-width:var(--content-wide); margin-inline:auto; padding:100px 24px 40px; text-align:center; display:flex; flex-direction:column; align-items:center; }
@media (min-width:768px) { .hero__content { padding:120px 40px 48px; } }
.hero__equation { font-family:var(--font-label); color:var(--color-gold); padding:10px 0; display:inline-block; }

/* ═══ STATS ═══ */
.stats { padding:40px 0; }
.stats__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
@media (min-width:768px) { .stats__grid { grid-template-columns:repeat(4,1fr); gap:32px; } }
.stat { text-align:center; }
.stat__value { font-family:var(--font-display); font-size:clamp(28px,4vw,36px); font-weight:700; color:var(--color-primary); font-variant-numeric:tabular-nums; }
.stat__value--gold { color:var(--color-gold); }
.stat__value--failure { color:var(--color-failure); }
.stat__label { font-size:15px; color:var(--color-text-muted); margin-top:4px; text-transform:uppercase; letter-spacing:.08em; }
.stat__live { font-size:.8em; opacity:.7; }
#debtClock { font-variant-numeric:tabular-nums; letter-spacing:-.02em; }

/* ═══ SECTIONS — tighter padding ═══ */
.section { padding:48px 0; }
.section--tight { padding:24px 0; }

/* Green label — matches original: 13-14px monospaced uppercase */
.section__label {
  font-family: var(--font-label);
  font-size: 15px;
  color: var(--color-primary);
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-weight: 400;
}

/* Body text — Carlito, white, 19px matching original */
.body-text {
  font-family: var(--font-body);
  font-size: 19px;
  color: var(--color-text);
  line-height: 1.65;
  margin-bottom: 12px;
}
.body-text--italic { font-style: italic; color: var(--color-text-muted); }

/* ═══ EQUATIONS ═══ */
.eq-section { margin: 28px 0; }
.eq-label { font-family:var(--font-label); font-size:15px; color:var(--color-primary); letter-spacing:.1em; text-transform:uppercase; margin-bottom:12px; font-weight:400; }
.eq-formula { color:var(--color-gold); margin-bottom:12px; overflow-x:auto; padding:8px 0; }
.eq-formula .katex { font-size:1.4em; }
@media (max-width:767px) { .eq-formula .katex { font-size:1em; } }
.eq-legend { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
.eq-legend span { font-size:15px; color:var(--color-text-muted); }
.eq-legend code { font-family:var(--font-label); color:var(--color-primary); font-size:.95em; }

/* ═══ DOMAINS ═══ */
.domain-list { display:grid; gap:28px; margin-top:12px; }
@media (min-width:768px) { .domain-list { grid-template-columns:repeat(2,1fr); } }
.domain-item__title { font-family:var(--font-body); font-size:19px; font-weight:700; color:var(--color-text); margin-bottom:4px; }
.domain-item__baseline { font-size:17px; color:var(--color-failure); margin-bottom:8px; }

/* ═══ PUBLICATION TIMELINE ═══ */
.pub-timeline { position:relative; height:260px; overflow-x:auto; overflow-y:visible; min-width:100%; }
.pub-timeline__line { position:absolute; top:50%; left:3%; right:3%; height:1px; background:rgba(192,192,192,.35); transform:translateY(-50%); }
.pub-timeline__node { position:absolute; top:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; z-index:2; }
.pub-timeline__node::before { content:''; width:8px; height:8px; border-radius:50%; flex-shrink:0; box-shadow:0 0 6px currentColor; }
.pub-timeline__node--green::before { background:rgba(0,229,160,.5); color:rgba(0,229,160,.3); }
.pub-timeline__node--red::before { background:rgba(255,107,74,.5); color:rgba(255,107,74,.3); }
.pub-timeline__label { position:absolute; font-family:var(--font-body); font-size:12px; color:rgba(255,255,255,.9); text-align:center; white-space:nowrap; line-height:1.3; }
.pub-timeline__label small { font-size:10px; color:var(--color-text-faint); display:block; }
.pub-timeline__label--above { bottom:calc(100% + 24px); }
.pub-timeline__label--below { top:calc(100% + 24px); }
.pub-timeline__node::after { content:''; position:absolute; width:1px; background:rgba(192,192,192,.25); }
.pub-timeline__node:has(.pub-timeline__label--above)::after { bottom:calc(100% + 4px); height:20px; }
.pub-timeline__node:has(.pub-timeline__label--below)::after { top:calc(100% + 4px); height:20px; }
.pub-timeline__date { position:absolute; top:calc(50% + 20px); font-family:var(--font-label); font-size:10px; color:var(--color-text-faint); white-space:nowrap; }

/* ═══ VQ CARDS (keep boxes) ═══ */
.vq-ladder { display:grid; gap:20px; margin-bottom:32px; }
@media (min-width:768px) { .vq-ladder { grid-template-columns:repeat(2,1fr); } }
.vq-card { padding:0 0 24px 0; position:relative; }
.vq-card__num { font-family:var(--font-label); font-size:12px; color:var(--color-primary); margin-bottom:8px; }
.vq-card__title { font-family:var(--font-display); font-size:24px; font-weight:700; margin-bottom:8px; color:var(--color-text); text-transform:uppercase; }
.vq-card .body-text { margin-bottom:0; color:var(--color-text-muted); font-size:17px; }

/* ═══ COMPARE TABLE (keep box) ═══ */
.compare-table-wrap { overflow-x:auto; border:1px solid rgba(255,255,255,.08); border-radius:8px; background:rgba(15,15,15,.5); backdrop-filter:blur(8px); margin-top:20px; }
.compare-table { font-size:17px; }
.compare-table th { font-family:var(--font-display); font-weight:700; text-align:left; padding:14px 18px; border-bottom:2px solid var(--color-border); font-size:15px; text-transform:uppercase; letter-spacing:.08em; color:var(--color-text-muted); white-space:nowrap; }
.compare-table th:last-child { color:var(--color-primary); }
.compare-table td { padding:14px 18px; border-bottom:1px solid var(--color-divider); color:var(--color-text-muted); vertical-align:top; font-size:17px; }
.compare-table td:first-child { color:var(--color-text); font-weight:600; white-space:nowrap; }
.compare-table td:last-child { color:var(--color-primary); font-weight:600; }

/* ═══ CAMDEN ═══ */
.camden-grid { display:grid; gap:16px; grid-template-columns:repeat(3,1fr); margin-bottom:20px; }
@media (min-width:1024px) { .camden-grid { grid-template-columns:repeat(6,1fr); } }
@media (max-width:767px) { .camden-grid { grid-template-columns:repeat(2,1fr); } }
.camden-stat { text-align:center; padding:12px 0; }
.camden-stat__value { font-family:var(--font-display); font-size:clamp(28px,4vw,36px); font-weight:700; margin-bottom:4px; }
.camden-stat__label { font-size:15px; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.08em; }
.entropy-clock { font-variant-numeric:tabular-nums; }
.camden-note { font-size:12px; color:var(--color-text-faint); line-height:1.6; margin-bottom:28px; max-width:100%; text-align:center; margin-inline:auto; }

/* ═══ SECTOR BARS ═══ */
.sector-bars { margin-top:12px; }
.sector-bar { margin-bottom:16px; }
.sector-bar__header { display:flex; justify-content:space-between; font-size:17px; margin-bottom:4px; }
.sector-bar__name { font-weight:600; }
.sector-bar__pct { color:var(--color-text-muted); font-family:var(--font-label); font-size:15px; }
.sector-bar__track { height:8px; background:rgba(255,255,255,.06); border-radius:999px; overflow:hidden; }
.sector-bar__fill { height:100%; border-radius:999px; }
.sector-bar__fill--health { background:var(--color-primary); }
.sector-bar__fill--justice { background:var(--color-gold); }
.sector-bar__fill--education { background:#5591C7; }
.sector-bar__fill--growth { background:var(--color-failure); }

/* ═══ SYNTROPY LIST ═══ */
.syntropy-list { display:grid; gap:24px; margin-top:28px; }
@media (min-width:768px) { .syntropy-list { grid-template-columns:repeat(2,1fr); } }
.syntropy-item__title { font-size:19px; font-weight:700; color:var(--color-primary); margin-bottom:4px; }

/* ═══ TIMELINE ═══ */
.timeline { position:relative; padding-left:32px; margin-top:20px; }
.timeline::before { content:''; position:absolute; top:0; left:12px; bottom:0; width:2px; background:linear-gradient(to bottom,var(--color-primary),var(--color-gold),var(--color-failure)); }
.timeline__item { position:relative; margin-bottom:36px; }
.timeline__item::before { content:''; position:absolute; left:calc(-32px + 8px); top:6px; width:10px; height:10px; border-radius:50%; background:var(--color-primary); border:2px solid var(--color-bg); }
.timeline__item:nth-child(2)::before { background:var(--color-gold); }
.timeline__item:nth-child(3)::before { background:var(--color-failure); }
.timeline__phase { font-family:var(--font-label); font-size:12px; color:var(--color-text-faint); text-transform:uppercase; letter-spacing:.1em; margin-bottom:4px; }
.timeline__title { font-family:var(--font-body); font-size:24px; font-weight:700; margin-bottom:8px; }
.timeline__products { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.timeline__tag { font-family:var(--font-label); font-size:12px; padding:4px 12px; border-radius:999px; border:1px solid var(--color-border); color:var(--color-text-muted); }

/* ═══ BIG LONG ═══ */
.big-long-list { display:flex; flex-direction:column; gap:28px; margin-top:12px; }
.big-long-item__phase { font-family:var(--font-label); font-size:12px; color:var(--color-text-faint); text-transform:uppercase; letter-spacing:.1em; margin-bottom:8px; }
.big-long-item__stats { font-size:17px; color:var(--color-text-muted); display:flex; flex-wrap:wrap; gap:16px; }
.big-long-item__stats strong { color:var(--color-primary); font-weight:700; }

/* ═══ FOOTER / DISCLAIMER ═══ */
.footer { padding:40px 0 24px; }
.disclaimer { border-top:1px solid var(--color-divider); padding-top:24px; }
.disclaimer p { font-size:11px; color:var(--color-text-faint); line-height:1.7; margin-bottom:12px; opacity:0.7; }
.disclaimer p:last-child { margin-top:16px; font-size:12px; opacity:0.5; }

/* ═══ ANIMATIONS ═══ */
.reveal { opacity:0; transform:translateY(12px); transition:opacity .7s var(--ease-out),transform .7s var(--ease-out); }
.reveal.visible { opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce) { .reveal { opacity:1; transform:none; } }

.katex { color:var(--color-gold); }

@media (max-width:767px) {
  .hero__content { padding-top:80px; }
}

@media print {
  body { background-attachment: scroll; }
  body::before { position: absolute; }
}
