/* Legible Systems — forked from the nickgomez.me design (same family, its own
   presentation). Warm ink on warm paper, structured by space and hairlines,
   not boxes. Serif to read, sans for chrome, mono as the machine voice.
   Company differences: a ledger-green accent with a job, a mono wordmark
   masthead, and a tighter, more operational register. Almost nothing moves. */

/* ---- Self-hosted fonts (Latin subset, woff2). No CDN at runtime. ---- */
@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --font-serif: "Newsreader", Charter, "Iowan Old Style", Georgia, Cambria, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --measure: 34rem;   /* ~66ch of prose */
  --wide: 52rem;      /* page container */

  /* warm paper + ink + one ledger-green accent (light) */
  --paper: #fbfaf6;
  --paper-2: #f2f0ea;
  --ink: #1b1a17;
  --muted: #6e6a62;
  --rule: #e3dfd6;
  --accent: #2e5d4b;
  --accent-fg: #fbfaf6;

  --rhythm: 1.75rem;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #161513;
    --paper-2: #1f1e19;
    --ink: #e9e5dc;
    --muted: #9a948a;
    --rule: #2c2a25;
    --accent: #96c8ab;
    --accent-fg: #161513;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

/* ---- Skip link ---- */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: 1rem; top: 1rem; z-index: 10;
  background: var(--paper); color: var(--ink);
  padding: 0.5rem 0.75rem; border: 1px solid var(--rule);
}

.site-header, main, .site-footer {
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: max(1.25rem, 5vw);
}

/* ---- Masthead: the wordmark is the mark ---- */
.site-header {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 1.5rem 1.1rem;
  border-bottom: 1px solid var(--rule);
}
.site-name {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.95rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; color: var(--ink);
}

main { padding-block: 3rem 3.5rem; }

/* ---- Links: ink + underline, never blue. Accent has other jobs. ---- */
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--muted); text-decoration-thickness: 1px; text-underline-offset: 0.15em; transition: text-decoration-color 120ms ease, text-decoration-thickness 120ms ease; }
a:hover { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

/* ---- Headings ---- */
h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; line-height: 1.15; text-wrap: balance; }
h1 { font-size: 1.95rem; letter-spacing: -0.01em; margin-block: 0 0.75rem; }
h2 { font-size: 1.55rem; margin-block: var(--rhythm) 0.5rem; }
h3 { font-size: 1.2rem; margin-block: 1.4rem 0.35rem; }
p { text-wrap: pretty; }

.lead { font-size: 1.3rem; line-height: 1.4; color: var(--muted); max-width: var(--measure); font-style: italic; }

/* ---- Prose column ---- */
.prose { max-width: var(--measure); }
.prose > * + * { margin-block-start: 1.1em; }
.prose h2, .prose h3 { max-width: var(--measure); }
.prose blockquote {
  margin-inline: 0; padding-left: 1.1rem;
  border-left: 2px solid var(--accent);
  color: var(--muted); font-style: italic;
}
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li + li { margin-top: 0.4rem; }
.prose code, kbd, samp { font-family: var(--font-mono); font-size: 0.88em; }

/* ---- Machine voice (mono) ---- */
.eyebrow {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  margin-block: 0 0.6rem;
}
.eyebrow + h2 { margin-top: 0; }   /* keep the mono label bound to its heading */

/* ---- Home sections ---- */
.section { padding-block: var(--rhythm); }
.section + .section { border-top: 1px solid var(--rule); }

.recognition { padding-top: clamp(1.5rem, 6vh, 3.5rem); }
.recognition h1 {
  font-size: clamp(2.3rem, 1.7rem + 2.6vw, 3.4rem);
  line-height: 1.08; letter-spacing: -0.015em;
  max-width: 18ch; margin-bottom: 0;
}
.recognition .prose { margin-top: 1.4rem; }

/* ---- Method: the four numbered steps ---- */
.method { max-width: var(--measure); padding-left: 1.1rem; margin-block: 0.75rem; }
.method li { margin-block: 0.85rem; }
.method li strong { font-weight: 600; }
.method li::marker { font-family: var(--font-mono); font-size: 0.85em; color: var(--muted); }

/* ---- CTA: de-boxed, hairline + space ---- */
.cta { margin-block: 2.5rem 0; padding-top: var(--rhythm); border-top: 1px solid var(--rule); }
.cta h2 { margin-top: 0; }
.cta p { max-width: var(--measure); }
.cta-button {
  font-family: var(--font-sans); font-weight: 600; font-size: 0.95rem;
  display: inline-block; margin-top: 0.75rem; padding: 0.6rem 1.1rem;
  background: var(--accent); color: var(--accent-fg);
  text-decoration: none; border-radius: 2px;
  transition: transform 120ms ease, filter 120ms ease;
}
.cta-button:hover { filter: brightness(1.08); text-decoration: none; }
.cta-button:active { transform: translateY(1px); }
.cta-email { font-family: var(--font-sans); font-size: 0.9rem; color: var(--muted); margin-top: 0.6rem; }
.cta-email a { color: var(--muted); }

/* ---- Footer ---- */
.site-footer { border-top: 1px solid var(--rule); padding-block: 1.5rem 3rem; color: var(--muted); }
.site-footer .footer-contact { font-family: var(--font-serif); font-size: 1rem; margin: 0 0 0.75rem; }
.colophon { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.02em; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0; }
.colophon .sep { opacity: 0.5; }
.colophon a { color: var(--muted); }

/* ---- Focus: a first-class, on-palette craft detail ---- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- Reduced motion: neutralize everything ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}