/* Article pages -- standalone, no React, no Tailwind.
 *
 * Every value here is lifted from the SPA so article pages read as the same
 * site: palette from tailwind.config.js, fonts and base rules from
 * src/index.css, nav/footer treatment from components/Nav.tsx + Footer.tsx.
 *
 * If you change a brand colour in tailwind.config.js, change it here too.
 * That duplication is the accepted cost of not adding a build step -- see
 * the tradeoff note in the plan. There is exactly one file to keep in sync.
 */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --warm-bg: #f4f1ea;
  --warm-surface: #fffdf8;
  --warm-border: #ded7c9;
  --ink: #101d2e;
  --ink-deeper: #0a1420;
  --body: #3f4a58;
  --muted: #5a6572;
  --amber-muted: #7a6a4e;
  --cyan: #0b7f9e;
  --cyan-hover: #095f76;
  --footer-text: #6f849c;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--warm-bg);
  color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--cyan-hover); }
::selection { background: var(--cyan); color: #fff; }

.skip-link {
  position: absolute; left: -999px; top: .5rem;
  background: var(--ink); color: #fff; padding: .5rem 1rem; border-radius: .5rem;
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; z-index: 999;
}
.skip-link:focus { left: .75rem; color: #fff; }

/* ---------------------------------------------------------------- nav --- */

.site-nav {
  position: sticky; top: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  max-width: 1200px; margin: 0 auto; padding: 1rem 2rem;
  background: rgba(244, 241, 234, .9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--warm-border);
}
.site-nav .wordmark {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: var(--ink);
}
.site-nav .wordmark:hover { color: var(--cyan); }
.site-nav nav { display: flex; gap: 1.25rem; }
.site-nav nav a {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px; letter-spacing: .025em; color: var(--muted);
}
.site-nav nav a:hover { color: var(--ink); }

/* ------------------------------------------------------------ article --- */

.article { max-width: 680px; margin: 0 auto; padding: 4.5rem 2rem 5rem; }

.article .eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: .875rem;
}

.article h1 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.08; letter-spacing: -.025em;
  text-wrap: balance;
  margin-bottom: 1.125rem;
}

.article .byline {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px; color: var(--amber-muted);
  padding-bottom: 2rem; margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--warm-border);
}

.article .standfirst {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55; color: var(--body); margin-bottom: 2.25rem;
}

.article p { font-size: 17px; color: var(--body); margin-bottom: 1.375rem; }

.article h2 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700; font-size: 26px; letter-spacing: -.02em; color: var(--ink);
  margin: 3rem 0 1rem;
}
.article h3 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 600; font-size: 19px; color: var(--ink);
  margin: 2rem 0 .625rem;
}

.article ul, .article ol { margin: 0 0 1.375rem 1.25rem; }
.article li { font-size: 17px; color: var(--body); margin-bottom: .5rem; }

.article blockquote {
  border-left: 3px solid var(--cyan);
  padding: .25rem 0 .25rem 1.25rem;
  margin: 0 0 1.5rem;
  color: var(--ink); font-size: 18px;
}

.article code {
  font-family: 'IBM Plex Mono', monospace; font-size: .9em;
  background: var(--warm-surface); border: 1px solid var(--warm-border);
  border-radius: 3px; padding: .1em .35em;
}
.article pre {
  background: var(--ink); color: #dbe4ee;
  border-radius: .75rem; padding: 1.25rem;
  overflow-x: auto; margin-bottom: 1.5rem;
}
.article pre code { background: none; border: 0; padding: 0; color: inherit; font-size: 13.5px; }

.article img { max-width: 100%; height: auto; border-radius: .75rem; margin-bottom: 1.5rem; }

.article hr { border: 0; border-top: 1px solid var(--warm-border); margin: 2.5rem 0; }

.article-end {
  margin-top: 3.5rem; padding-top: 1.75rem;
  border-top: 1px solid var(--warm-border);
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--muted);
}
.article-end a { font-weight: 500; }

/* -------------------------------------------------------------- index --- */

.writing-index { max-width: 760px; margin: 0 auto; padding: 4.5rem 2rem 5rem; }
.writing-index h1 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700; font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -.025em; margin-bottom: .75rem;
}
.writing-index .lede { font-size: 17px; color: var(--body); margin-bottom: 3rem; max-width: 560px; }
.writing-index ol { list-style: none; margin: 0; }
.writing-index li { border-top: 1px solid var(--warm-border); padding: 1.75rem 0; }
.writing-index li:last-child { border-bottom: 1px solid var(--warm-border); }
.writing-index .entry-date {
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--amber-muted);
  margin-bottom: .5rem;
}
.writing-index .entry-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700; font-size: 22px; letter-spacing: -.02em;
  color: var(--ink); display: block; margin-bottom: .375rem;
}
.writing-index .entry-title:hover { color: var(--cyan); }
.writing-index .entry-desc { font-size: 15.5px; color: var(--muted); }

/* ------------------------------------------------------------- footer --- */

.site-footer {
  background: var(--ink-deeper); color: var(--footer-text);
  padding: 2rem; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px;
}
.site-footer div {
  max-width: 1200px; margin: 0 auto;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .75rem;
}
.site-footer a { color: var(--footer-text); }
.site-footer a:hover { color: #a8bccf; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}