/* ==========================================================================
   base.css — reset, surfaces, layout primitives, typography, utilities
   Mobile-first. Breakpoints: 640px / 768px / 1024px (min-width).
   ========================================================================== */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, dl, dd, figure, ul, ol { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
/* height:auto is the required partner to max-width:100%. Without it, an image
   whose intrinsic width exceeds its column keeps the fixed `height` attribute
   from the markup while the width shrinks, so it renders stretched. Every image
   on the site before now happened to display at its natural width, which hid
   this; the 1920px-wide GUI screenshots do not. */
img, picture, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
table { border-collapse: collapse; }

/* Sticky-header offset: anchor targets (#work, #experience, ...) must clear the
   sticky header instead of scrolling underneath it. */
[id] { scroll-margin-top: 7rem; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

html {
  background: var(--black);
  color-scheme: dark;
}

body {
  background: var(--surface-bg);
  color: var(--surface-text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---- Surfaces ----
   A surface class may be placed on any element (section, div, aside) and sets
   the --surface-* variables consumed by every component, plus bg/colour. */
.surface-black {
  --surface-bg: var(--black);
  --surface-text: var(--white);
  --surface-muted: var(--muted);
  --surface-line: var(--line);
  --surface-link: var(--pine-bright);
  --surface-accent: var(--pine-bright);
  background: var(--surface-bg);
  color: var(--surface-text);
}
.surface-ink {
  --surface-bg: var(--ink-900);
  --surface-text: var(--white);
  --surface-muted: var(--muted);
  --surface-line: var(--line);
  --surface-link: var(--pine-bright);
  --surface-accent: var(--pine-bright);
  background: var(--surface-bg);
  color: var(--surface-text);
}
.surface-pine {
  --surface-bg: var(--pine-deep);
  --surface-text: var(--white);
  --surface-muted: var(--white);
  --surface-line: rgba(244, 245, 242, 0.3);
  --surface-link: var(--white);
  --surface-accent: var(--white);
  background: var(--surface-bg);
  color: var(--surface-text);
}
.surface-pine a { text-decoration: underline; text-underline-offset: 0.15em; }
.surface-light {
  --surface-bg: var(--paper);
  --surface-text: var(--ink);
  --surface-muted: var(--ink-muted);
  --surface-line: var(--line-light);
  --surface-link: var(--pine-text);
  --surface-accent: var(--pine-text);
  background: var(--surface-bg);
  color: var(--surface-text);
  color-scheme: light;
}

/* ---- Sections & containers ---- */
.section {
  padding-block: var(--space-7);
}
@media (min-width: 1024px) {
  .section { padding-block: var(--space-8); }
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.container--reading {
  max-width: var(--container-reading);
}

.prose > p,
.prose > ul,
.prose > ol,
.prose > h2,
.prose > h3 {
  max-width: var(--measure);
}
.prose > * + * { margin-top: var(--space-4); }
.prose h2, .prose h3 { margin-top: var(--space-7); }
.prose ul, .prose ol { padding-left: 1.25em; list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: var(--space-2); }

/* ---- Utilities ---- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mono {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* ---- Headings ---- */
h1, h2, h3 {
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
}
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }

.display {
  font-size: var(--step-5);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--surface-accent);
  margin-bottom: var(--space-3);
}

.lead {
  font-size: var(--step-1);
  color: var(--surface-text);
  max-width: var(--measure);
}
.lead + .lead,
p.lead {
  color: var(--surface-muted);
}

/* ---- Links ---- */
a {
  color: var(--surface-link);
  text-underline-offset: 0.15em;
}
a:not([class]) {
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--surface-accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}
/* Dark surfaces need an explicit bright ring; light surfaces use --pine-text via --surface-accent. */
.surface-black :focus-visible,
.surface-ink :focus-visible,
.surface-pine :focus-visible { outline-color: var(--pine-bright); }
.surface-light :focus-visible { outline-color: var(--pine-text); }

/* ---- Print ---- */
@media print {
  .site-header, .site-footer, .skip-link, .lightbox, .cs-pager { display: none; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
  .section { padding-block: 1rem; }
}