/* Linger blog.
   One stylesheet for the index and every post, so a new post is one HTML file
   and nothing else.

   These pages are plain static HTML in site-src/public/, copied to site/ by the
   build. They are deliberately NOT part of the React bundle: a blog post should
   render with JavaScript off, load in one request, and still be here when the
   landing is next rebuilt.

   Token values are copied from site-src/src/index.css rather than imported,
   because a static page in public/ cannot see the app's CSS. If a brand colour
   changes, it changes in both places. That is the cost of pages that work
   without the bundle, and it is worth paying here.

   No webfont. The app's Inter is fingerprinted into the hashed build output and
   a static page cannot reference it stably, so these pages use the system stack.
   The reading experience is the same and nothing is fetched. */

:root {
  --anchor: #1E5AEB;
  --deep: #0A2540;
  --muted: #5A6B82;
  --whisper: #EDF1FB;
  --line: #DCE7F5;
  --pure: #FFFFFF;
  --measure: 34rem;
}

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

body {
  background: var(--pure);
  color: var(--deep);
  font: 400 18px/1.7 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--anchor); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Chrome ─────────────────────────────────────────────────────── */

.top {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
.wrap { width: 100%; max-width: var(--measure); margin: 0 auto; padding: 0 22px; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--deep); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; }
.brand:hover { text-decoration: none; }
.brand svg { display: block; }

.top nav { display: flex; gap: 20px; font-size: 15px; }
.top nav a { color: var(--muted); }

/* ── Type ───────────────────────────────────────────────────────── */

main { padding: 56px 0 72px; }

h1 {
  font-size: clamp(30px, 6vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin-bottom: 18px;
}

h2 {
  font-size: 23px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 650;
  margin: 44px 0 14px;
}

p { margin-bottom: 20px; }
p + h2 { margin-top: 44px; }

.dek { font-size: 20px; line-height: 1.55; color: var(--muted); margin-bottom: 26px; }
.meta { font-size: 14px; color: var(--muted); margin-bottom: 40px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }

strong { font-weight: 650; }
em { font-style: italic; }

ul, ol { margin: 0 0 22px 22px; }
li { margin-bottom: 9px; }

blockquote {
  margin: 30px 0;
  padding: 2px 0 2px 22px;
  border-left: 3px solid var(--anchor);
  color: var(--deep);
  font-size: 19px;
}

/* A quiet aside for the caveats and the "what this does not say" notes. */
.note {
  background: var(--whisper);
  border-radius: 14px;
  padding: 22px 24px;
  margin: 32px 0;
  font-size: 16px;
  line-height: 1.6;
}
.note p:last-child { margin-bottom: 0; }
.note strong { color: var(--deep); }

/* ── Index list ─────────────────────────────────────────────────── */

.posts { list-style: none; margin: 40px 0 0; }
.posts li { margin-bottom: 34px; padding-bottom: 34px; border-bottom: 1px solid var(--line); }
.posts li:last-child { border-bottom: 0; }
.posts h2 { margin: 0 0 8px; font-size: 22px; }
.posts h2 a { color: var(--deep); }
.posts p { color: var(--muted); font-size: 17px; margin: 0; }

/* ── Sources ────────────────────────────────────────────────────── */

.sources { margin-top: 52px; padding-top: 28px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.6; color: var(--muted); }
.sources h2 { font-size: 17px; margin: 0 0 14px; color: var(--deep); }
.sources li { margin-bottom: 10px; }

/* ── Foot ───────────────────────────────────────────────────────── */

.end { margin-top: 56px; padding-top: 30px; border-top: 1px solid var(--line); }
.end .cta { display: inline-block; background: var(--anchor); color: var(--pure); font-size: 16px; font-weight: 600; padding: 13px 24px; border-radius: 999px; }
.end .cta:hover { text-decoration: none; }
.end .small { margin-top: 16px; font-size: 15px; color: var(--muted); }

footer.site { border-top: 1px solid var(--line); padding: 28px 0 46px; font-size: 15px; color: var(--muted); }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 8px 20px; }