/* ─────────────────────────────────────────────────────────────
   KAREEM FAHMY — INSTITUTIONAL MATRIX
   Master Stylesheet · Version 1.0
   Centralized design tokens. All pages link this file.
   Brand Bible reference: Part Three — Visual Identity.
──────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────
   FONTS
   Google Fonts: Cormorant Garamond (300) + IBM Plex Mono (300, 400)
   Brand Bible §11 — The Typography System.
───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;1,300&family=IBM+Plex+Mono:wght@300;400&display=swap');


/* ─────────────────────────────────────────────
   BRAND TOKENS
   Single source of truth for every color, font,
   and structural constant in the system.
   Brand Bible §10–12.
───────────────────────────────────────────── */
:root {
  /* Colors */
  --color-abyss:    #0A0A0A;                   /* Abyss Black — all backgrounds */
  --color-gold:     #C9A84C;                   /* Institutional Gold — structural accent */
  --color-primary:  rgba(255, 255, 255, 0.88); /* Primary White — headlines, data values */
  --color-muted:    rgba(255, 255, 255, 0.55); /* Muted White — body copy, secondary text */
  --color-ghost:    rgba(255, 255, 255, 0.22); /* Ghost White — labels, micro-copy, footers */
  --color-trace:    rgba(255, 255, 255, 0.08); /* Trace White — borders, dividers only */

  /* Fonts */
  --font-display:   'Cormorant Garamond', Georgia, serif;
  --font-mono:      'IBM Plex Mono', monospace;
}


/* ─────────────────────────────────────────────
   BRAND UTILITY CLASSES
   Token-based utilities for use directly in markup.
   Use these instead of hardcoding raw values.
───────────────────────────────────────────── */
.text-primary { color: var(--color-primary); }
.text-muted   { color: var(--color-muted);   }
.text-ghost   { color: var(--color-ghost);   }
.text-gold    { color: var(--color-gold);    }

/* border-trace: apply alongside a border shorthand that sets style/width */
.border-trace { border-color: var(--color-trace); }

/* font-display: switches to the editorial serif at weight 300 */
.font-display {
  font-family: var(--font-display);
  font-weight: 300;
}


/* ─────────────────────────────────────────────
   RESET
───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* ─────────────────────────────────────────────
   BASE
   Body defaults to Muted White — any copy that
   does not set an explicit color is secondary text.
   Primary elements use .text-primary or set color
   explicitly in their component rule.
───────────────────────────────────────────── */
html, body {
  background-color: var(--color-abyss);
}

body {
  font-family: var(--font-mono);
  font-weight: 300;
  color: var(--color-muted);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ─────────────────────────────────────────────
   ENTRANCE ANIMATION
   Aesthetic Law 03: staggered vertical reveal.
   Rise 7px, fade in. Duration 0.7s per element.
   Easing: cubic-bezier(0.16, 1, 0.3, 1).
   No scroll-triggered animations. No loops.
───────────────────────────────────────────── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.node {
  opacity: 0;
  animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.n01 { animation-delay: 0.00s; }
.n02 { animation-delay: 0.18s; }
.n03 { animation-delay: 0.50s; }
.n04 { animation-delay: 0.65s; }
.n05 { animation-delay: 1.00s; }
.n06 { animation-delay: 1.35s; }
.n07 { animation-delay: 1.70s; }
.n08 { animation-delay: 2.10s; }
.n09 { animation-delay: 2.45s; }
.n10 { animation-delay: 2.80s; }
.n11 { animation-delay: 3.10s; }


/* ─────────────────────────────────────────────
   LAYOUT
   Max content width: 800px.
   All copy is left-aligned. Brand Bible §12.
───────────────────────────────────────────── */
.page {
  max-width: 800px;
  margin: 0 auto;
  padding: 5.5rem 2.5rem 7rem;
}

@media (max-width: 640px) {
  .page {
    padding: 4rem 1.5rem 6rem;
  }
}


/* ─────────────────────────────────────────────
   NODE 01 — CLASSIFICATION TAG
   Micro-copy: 0.5–0.55rem, spacing 0.14–0.30em.
   Ghost white. Sets register before anything loads.
───────────────────────────────────────────── */
.classification {
  font-size: 0.52rem;
  letter-spacing: 0.28em;
  color: var(--color-ghost);
  font-weight: 300;
}


/* ─────────────────────────────────────────────
   NODE 02 — DISPLAY NAME
   Cormorant Garamond, weight 300.
   clamp(4.5rem, 13vw, 9.5rem). Brand Bible §12.
   Do not use below 28px or at weight 400+.
───────────────────────────────────────────── */
.display-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(4.5rem, 13vw, 9.5rem);
  line-height: 0.87;
  color: var(--color-primary);
  letter-spacing: -0.015em;
}


/* ─────────────────────────────────────────────
   NODE 03 — GOLD RULE
   Aesthetic Law 02: 1px height, 2rem width.
   Never full-width. Never decorative beyond this.
   Primary gold structural element — appears once.
───────────────────────────────────────────── */
.gold-rule {
  display: block;
  width: 2rem;
  height: 1px;
  background-color: var(--color-gold);
}


/* ─────────────────────────────────────────────
   NODE 04 — POSITION DESCRIPTOR
───────────────────────────────────────────── */
.pos-primary {
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  color: var(--color-primary);
  font-weight: 300;
  line-height: 1.9;
}

.pos-secondary {
  font-size: 0.65rem;
  letter-spacing: 0.07em;
  color: var(--color-muted);
  font-weight: 300;
  line-height: 1.9;
}


/* ─────────────────────────────────────────────
   NODE 05 — THESIS STATEMENT
───────────────────────────────────────────── */
.thesis-line {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  font-weight: 300;
  line-height: 2.1;
}


/* ─────────────────────────────────────────────
   LEDGER TABLE — shared by NODE 06 and NODE 08
   Label left (ghost white), value right (primary white).
   Borders use Trace White. Brand Bible §10.
───────────────────────────────────────────── */
.ledger {
  width: 100%;
}

.ledger-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-trace);
}

.ledger-row:first-child {
  border-top: 1px solid var(--color-trace);
}

.ledger-label {
  font-size: 0.55rem;
  letter-spacing: 0.25em;
  color: var(--color-ghost);
  font-weight: 300;
  flex-shrink: 0;
}

.ledger-value {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  font-weight: 400;
  text-align: right;
}


/* ─────────────────────────────────────────────
   NODE 07 — CONFRONTATION
   Body copy: 0.65–0.75rem, spacing 0.05–0.1em.
   Muted white. Maximum three sentences per paragraph.
───────────────────────────────────────────── */
.body-para {
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  color: var(--color-muted);
  font-weight: 300;
  line-height: 2.1;
}


/* ─────────────────────────────────────────────
   NODE 08 — PROGRAM SIGNAL
───────────────────────────────────────────── */
.program-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--color-primary);
  letter-spacing: 0.02em;
}


/* ─────────────────────────────────────────────
   NODE 09 — NAVIGATION
   Declarative link labels. No hover beyond color.
   Aesthetic Law 03: color transitions only.
───────────────────────────────────────────── */
.nav-intro {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--color-muted);
  font-weight: 300;
}

.nav-link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  text-decoration: none;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--color-trace);
  transition: color 0.3s ease;
}

.nav-link:first-of-type {
  border-top: 1px solid var(--color-trace);
}

.nav-link-text {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  font-weight: 300;
  transition: color 0.3s ease;
}

.nav-destination {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-shrink: 0;
}

.nav-arrow {
  font-size: 0.62rem;
  color: var(--color-ghost);
  transition: color 0.3s ease;
}

.nav-path {
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  color: var(--color-ghost);
  font-weight: 300;
  transition: color 0.3s ease;
}

.nav-link:hover .nav-link-text {
  color: var(--color-primary);
}

.nav-link:hover .nav-arrow,
.nav-link:hover .nav-path {
  color: var(--color-muted);
}


/* ─────────────────────────────────────────────
   NODE 10 — CLOSING SIGNAL
───────────────────────────────────────────── */
.closing-line {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--color-ghost);
  font-weight: 300;
  line-height: 2.1;
}


/* ─────────────────────────────────────────────
   NODE 11 — LEGAL FOOTER
   Micro-copy. Ghost white. Minimum visual weight.
───────────────────────────────────────────── */
.footer-line {
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  color: var(--color-ghost);
  font-weight: 300;
}

.footer-link {
  color: var(--color-ghost);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-link:hover {
  color: var(--color-muted);
}