/* ==========================================================================
   Fonts
   --------------------------------------------------------------------------
   One face, IBM Plex Mono, at three weights. The site used to pair Inter with
   Plex Mono and let the mono carry only nav, labels and tags; the two never
   settled next to each other, so the sans is gone and the mono does all of it.
   Everything that used to reach for --font-sans now gets the same stack, which
   is why that token still exists rather than being deleted out of every rule.
   ========================================================================== */
@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 — "Paper" ────────────────────────────────────────────────────
     Warm paper ground, deep forest ink, rose as the one accent. Every ratio
     below is measured against --color-bg; text clears 4.5:1 and graph node
     fills clear 3:1.

     Two swatches from the source palette cannot carry type on this ground and
     are never used for it: #DDD7CB (1.87:1) rules and decoration only, and
     #DDD7CB (2.18:1) fills only, and only under --color-ink. Where the page
     wants the rose as *text*, it uses --color-accent, which is the same hue
     (333.5°) and saturation dropped in value until it reads. */
  --color-bg: #F8F6F0;
  --color-ink: #1C1A17;          /* 10.29:1 */
  --color-accent: #1C1A17;       /*  5.65:1 — rose; links, the one accent */
  --color-accent-2: #1C1A17;     /*  6.22:1 — forest; second tier */
  --color-body: #68645C;         /*  5.32:1 */
  --color-meta: #68645C;         /*  5.02:1 */
  --color-nav: #68645C;          /*  5.02:1 */
  /* Past work reads as grey rather than as a hue — it is still a node with a
     label under it, so it is a real contrast, not just "dimmer". */
  --color-node-past: #68645C;    /*  4.60:1 */
  /* On paper the most prominent thing is the darkest, not the brightest. */
  --color-node-self: #1C1A17;    /* 10.29:1 */

  --color-border: rgba(28, 26, 23, 0.16);
  --color-border-strong: rgba(28, 26, 23, 0.34);
  --color-divider: rgba(28, 26, 23, 0.10);
  --color-bg-dot: rgba(28, 26, 23, 0.09);
  --color-accent-tint: rgba(200, 138, 36, 0.14);

  /* Raised panels (tooltip, hint, mobile legend). On a dark ground these were
     lighter than the page by being less black; here they are lighter by being
     closer to white, and opaque enough that the graph can't show through. */
  --color-surface: rgba(248, 246, 240, 0.97);
  --color-surface-border: rgba(28, 26, 23, 0.20);
  --color-shadow: rgba(28, 26, 23, 0.16);
  --color-liked: #1C1A17;        /*  5.65:1 */

  /* Strand colour for the graph's links. Carried at 0.55–0.85 alpha by the
     gradients, which lands the bright end at 3.91:1 and the faint end at the
     taper. On the dark theme this was bone; on paper it is the body green. */
  --color-strand: #68645C;

  /* Type families — the same stack twice on purpose; see the fonts note. */
  --font-sans: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 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 — every step went up a notch when the sans left. A mono glyph
     at the same px reads smaller and sits on a wider advance, so the old
     11/12/13 floor was borderline; nothing here is below 12px. */
  --text-xs: 12px;        /* smallest allowed — tags, tight labels */
  --text-sm: 13px;        /* meta, dates, legend, section labels */
  --text-base: 14px;      /* nav, card titles, small links */
  --text-md: 15px;        /* body copy — the reading size */
  --text-subtitle: 16px;  /* page leads, item headings */
  --text-lg: 19px;        /* header wordmark */
  --text-xl: 27px;        /* page titles */

  /* Tracking — mono sits on a fixed advance, so the sans-era negative tracking
     on large type now reads as cramped rather than as closing up. */
  --track-title: -0.01em;
  --track-mono: 0;
  --track-mono-caps: 0.05em;

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

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

  color-scheme: light;
}

/* ==========================================================================
   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.7;
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ==========================================================================
   Header
   ========================================================================== */
.header { position: absolute; top: var(--space-5); left: var(--space-7); z-index: 100; }
.header h1 {
  font-size: var(--text-lg); font-weight: 600;
  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: absolute; 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: calc(var(--space-10) + var(--space-7)) 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: underline; text-decoration-color: #C88A24; text-underline-offset: 3px; }
.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 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); }
}

/* Night palette — set by theme.js (system preference or the toggle). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #121210;
  --color-ink: #ECE8DE;
  --color-accent: #ECE8DE;
  --color-accent-2: #ECE8DE;
  --color-body: #8A877E;
  --color-meta: #8A877E;
  --color-nav: #8A877E;
  --color-node-past: #8A877E;
  --color-node-self: #ECE8DE;
  --color-border: rgba(236, 232, 222, 0.16);
  --color-border-strong: rgba(236, 232, 222, 0.34);
  --color-divider: rgba(236, 232, 222, 0.10);
  --color-bg-dot: rgba(236, 232, 222, 0.07);
  --color-accent-tint: rgba(224, 159, 62, 0.16);
  --color-surface: rgba(28, 27, 23, 0.97);
  --color-surface-border: #2D2B24;
  --color-shadow: rgba(0, 0, 0, 0.5);
  --color-liked: #ECE8DE;
  --color-strand: #8A877E;
}
:root[data-theme="dark"] .page-subtitle a { text-decoration-color: #E09F3E; }