/* ==========================================================================
   Fonts
   --------------------------------------------------------------------------
   Two roles:
   · Inter (humanist sans) — the quiet body/heading voice.
   · IBM Plex Mono — the signature utility face. Used ONLY for nav links,
     section labels, project tags, graph node labels, dates, and the legend.
   ========================================================================== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-600.woff2') format('woff2');
}

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
  /* Color */
  --color-bg: #f0ebe0;
  --color-ink: #1a2e1a;
  --color-accent: #2d5a2d;
  --color-body: #537153;   /* was #5a7a5a — darkened to meet 4.5:1 against --color-bg */
  --color-meta: #567056;   /* was #6a8a6a — darkened to meet 4.5:1 against --color-bg */
  --color-nav: #586f58;    /* was #7a9a7a — darkened to meet 4.5:1 against --color-bg */
  --color-node-past: #7c897c; /* was #b8cbb8 — darkened to meet 3:1 against --color-bg */

  --color-border: rgba(60, 100, 60, 0.15);
  --color-divider: rgba(60, 100, 60, 0.08);
  --color-bg-dot: rgba(60, 100, 60, 0.12);
  --color-accent-tint: rgba(45, 90, 45, 0.1);

  /* Type families */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing scale */
  --space-1: 5px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 20px;
  --space-5: 28px;
  --space-6: 32px;
  --space-7: 36px;
  --space-8: 48px;
  --space-9: 80px;
  --space-10: 110px;

  /* Type scale — nothing below 11px, body ≥ 15px */
  --text-xs: 11px;        /* smallest allowed — tags, tight labels */
  --text-sm: 12px;        /* meta, dates, legend, section labels */
  --text-base: 13px;      /* nav, card titles, small links */
  --text-md: 15px;        /* body copy — the reading size */
  --text-subtitle: 16px;  /* page leads, item headings */
  --text-lg: 20px;        /* header wordmark */
  --text-xl: 30px;        /* page titles */

  /* Tracking — deliberate, not blanket */
  --track-title: -0.015em;   /* large sans wants to close up */
  --track-mono: 0;           /* mono at reading sizes: neutral */
  --track-mono-caps: 0.05em; /* uppercase mono labels need a little air */

  /* Border / radius */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --border-width: 1px;

  /* Transitions */
  --transition-fast: 180ms;
  --transition-med: 200ms;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  background-color: var(--color-bg);
  background-image: radial-gradient(circle, var(--color-bg-dot) 1px, transparent 1px);
  background-size: 26px 26px;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ==========================================================================
   Header
   ========================================================================== */
.header { position: fixed; top: var(--space-5); left: var(--space-7); z-index: 100; }
.header h1 {
  font-size: var(--text-lg); font-weight: 700;
  color: var(--color-ink); letter-spacing: -0.01em; line-height: 1.1;
}
.header h1,
.header h1 a { display: flex; align-items: center; gap: 9px; }
.header h1 a { color: inherit; text-decoration: none; }
.header h1 img { width: 26px; height: 26px; display: block; flex-shrink: 0; }
.header .sub {
  font-size: var(--text-sm); color: var(--color-meta);
  margin-top: var(--space-1); letter-spacing: 0;
}

/* ==========================================================================
   Nav — mono (signature)
   ========================================================================== */
.nav {
  position: fixed; top: var(--space-6); right: var(--space-7); z-index: 100;
  display: flex; gap: var(--space-4);
}
.nav a {
  font-family: var(--font-mono);
  font-size: var(--text-base); font-weight: 400;
  color: var(--color-nav); text-decoration: none; letter-spacing: var(--track-mono);
  transition: color var(--transition-fast);
}
.nav a:hover { color: var(--color-ink); }
.nav a.active { color: var(--color-ink); font-weight: 500; }

/* ==========================================================================
   Content column
   ========================================================================== */
.content { max-width: 640px; margin: 0 auto; padding: var(--space-10) var(--space-7) var(--space-9); }

.page-title {
  font-size: var(--text-xl); font-weight: 600;
  color: var(--color-ink); letter-spacing: var(--track-title); line-height: 1.15;
  margin-bottom: var(--space-3);
}
.page-subtitle {
  font-size: var(--text-subtitle); color: var(--color-body);
  line-height: 1.6; margin-bottom: var(--space-8); max-width: 54ch;
}
.page-subtitle a { color: var(--color-accent); text-decoration: none; }
.page-subtitle a:hover { text-decoration: underline; }

/* Section labels — mono (signature) */
.section-label {
  font-family: var(--font-mono);
  font-size: var(--text-sm); font-weight: 500; letter-spacing: var(--track-mono-caps);
  text-transform: uppercase; color: var(--color-meta);
  margin-bottom: var(--space-3); padding-bottom: var(--space-2);
  border-bottom: var(--border-width) solid var(--color-border);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  font-size: var(--text-sm); color: var(--color-meta);
  text-align: center; padding: var(--space-8) 0;
}

/* ==========================================================================
   Shared misc
   ========================================================================== */
.tagline {
  position: fixed; bottom: var(--space-5); left: var(--space-7);
  font-size: var(--text-xs); color: var(--color-meta); letter-spacing: 0;
}

/* ==========================================================================
   Mobile (<=700px)
   Header/nav are fixed+absolutely positioned for desktop; on small screens
   that collides, so they drop into normal flow and stack instead.
   ========================================================================== */
@media (max-width: 700px) {
  .header {
    position: static;
    top: auto; left: auto;
    padding: var(--space-5) var(--space-4) 0;
  }
  .nav {
    position: static;
    top: auto; right: auto;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    padding: var(--space-3) var(--space-4) var(--space-2);
  }
  .nav a {
    display: inline-flex; align-items: center;
    min-height: 44px;
  }
  .content {
    padding: var(--space-3) var(--space-4) var(--space-8);
  }
  .tagline { display: none; }

  .footer { padding: var(--space-6) var(--space-3); }
}