/* ============================================================
   Mainframe — design tokens + base layout.
   Tokens lifted from gabrielpenman.co.uk's "Engineering Calm"
   design language (read-only source). Newsreader serif, Inter
   sans, ink-blue accent on cream. No emoji — Phosphor icons.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg:           #fcfaf3;
  --bg-sunk:      #f5f1e4;
  --bg-ink:       #1c1e22;
  --fg:           #1a1a1a;
  --fg-muted:     #6b6b6b;
  --fg-faint:     #a0a0a0;
  --rule:         #e8e2cf;
  --accent:       #2d4a6b;

  --font-serif:   'Newsreader', 'Source Serif 4', Georgia, serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  --t-xs:    13px;
  --t-sm:    14px;
  --t-base:  19px;
  --t-lg:    22px;
  --t-h3:    24px;
  --t-h2:    28px;
  --t-h1:    34px;
  --t-display: 44px;

  --lh-tight: 1.2;
  --lh-body:  1.65;

  --ls-caps:  0.08em;

  --measure:       680px;
  --measure-wide:  760px;
  --gutter:        24px;
  --space-1:  8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;

  --rule-thin: 1px solid var(--rule);
  --radius-1: 2px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-serif);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: color-mix(in oklch, var(--accent) 25%, transparent); }

/* Header */
.site-header {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-5) var(--gutter) var(--space-3);
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: var(--t-xs);
}
.site-header .brand {
  font-family: var(--font-serif);
  font-size: 18px;
  text-decoration: none;
  color: var(--fg);
  letter-spacing: -0.005em;
  font-weight: 500;
}

/* Main */
.site-main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-4) var(--gutter) var(--space-7);
}

/* Page title — serif, variable axis hover on em. */
h1, .h1 {
  font-family: var(--font-serif);
  font-size: var(--t-h1);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-2);
  text-wrap: balance;
  font-variation-settings: 'wght' 400, 'opsz' 36;
  animation: mf-rise 800ms cubic-bezier(0.2, 0.6, 0.2, 1) both;
}
@starting-style {
  h1 { opacity: 0; transform: translateY(10px); }
}
h1 em {
  font-style: italic;
  color: var(--accent);
  font-variation-settings: 'wght' 400, 'opsz' 36;
  transition: font-variation-settings 500ms ease;
}
h1 em:hover { font-variation-settings: 'wght' 600, 'opsz' 36; }

@keyframes mf-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Section labels — small sans caps, muted */
h2, .caps {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--fg-muted);
  margin: var(--space-5) 0 var(--space-2);
}

h3 {
  font-family: var(--font-serif);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: var(--lh-tight);
  margin: var(--space-4) 0 var(--space-1);
  text-wrap: balance;
}

.sublabel {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  color: var(--fg-muted);
  margin: 0 0 var(--space-3);
}

/* Body prose */
p {
  margin: 0 0 var(--space-3);
  max-width: var(--measure);
  text-wrap: pretty;
}

.lede {
  font-size: var(--t-lg);
  line-height: 1.5;
  color: color-mix(in oklch, var(--fg) 88%, transparent);
  margin-bottom: var(--space-4);
}

/* Links — squiggle in body, plain in chrome. */
a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-thickness 120ms linear;
}
a:hover { text-decoration-thickness: 2px; }

.site-header a,
.site-footer a,
.no-squiggle {
  text-decoration: none;
}
.site-header a:hover,
.site-footer a:hover {
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
}

/* Single button — accent border */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: var(--radius-1);
  padding: 10px 20px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms linear;
}
.btn:hover {
  background: color-mix(in oklch, var(--accent) 8%, transparent);
  text-decoration: none;
}

hr {
  border: 0;
  border-top: var(--rule-thin);
  margin: var(--space-4) 0;
}

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--bg-sunk);
  padding: 1px 5px;
  border-radius: var(--radius-1);
}

@media (prefers-reduced-motion: reduce) {
  h1 { animation: none; opacity: 1; transform: none; }
  h1 em { transition: none; }
}

/* Footer */
.site-footer {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-3) var(--gutter) var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  color: var(--fg-muted);
  border-top: var(--rule-thin);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.site-footer a { color: var(--fg-muted); }