/* Shared stylesheet for pages generated by the Eleventy build (the Writing
   section). The homepage, /follow and /press keep their own inline <style>
   blocks unchanged in Phase 1 (see MODEL_DECISIONS.md D-005's revisit
   trigger for the eventual migration). This file holds only the palette,
   type and small pieces (section labels, footer) the generated pages need,
   extracted from those three pages' shared rules. Keep it small.
*/

:root {
  --color-bg: #f4efe4;
  --color-ink: #1c1a16;
  --color-ink-soft: #3d362c;
  --color-muted: #6a6354;
  --color-faint: #9a9080;
  --color-rule: #d8d1bf;
  --color-rule-soft: #d4ccba;
  --color-accent: #b8893a;
  --color-accent-dark: #805c23;
  --font-serif: 'Newsreader', serif;
  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
}

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

html { background: var(--color-bg); }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }

a:focus-visible {
  outline: 2px solid var(--color-accent-dark);
  outline-offset: 5px;
}

.section-title {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-faint);
}

footer {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--color-muted);
}

/* Pull quote on an essay page (D-011): a sentence from the essay, set large
   in italic serif inside curly double quotation marks, for readers who scan.
   Shown only on the page (never in the feed), hidden from assistive
   technology (aria-hidden) because it repeats a paragraph nearby. The marks
   are added here, not in the text, so the data and the verify string match
   stay plain. No box or background; no animation. */
.pull-quote { margin: 2.5em 0; }

.pull-quote::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--color-accent);
  margin-bottom: .7em;
}

.pull-quote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(21px, 4.4vw, 26px);
  line-height: 1.3;
  color: var(--color-ink);
  margin: 0;
  /* Hang the opening mark into the margin so the words align with the column. */
  text-indent: -.42em;
}

.pull-quote p::before { content: "\201C"; }
.pull-quote p::after { content: "\201D"; }

/* Primary navigation (all pages). The hand-written pages carry a copy of this
   block in their own inline <style>; keep the two in step. */
  /* Primary navigation (shared pattern; copied into each hand-written page) */
  .site-nav { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 24px; min-height: 44px; margin: 0 0 24px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #6a6354; }
  .site-nav a { color: inherit; text-decoration: none; padding: 10px 0; }
  .site-nav .name { font-family: 'DM Sans', system-ui, sans-serif; font-size: 14px; font-weight: 500; letter-spacing: .01em; text-transform: none; color: #1c1a16; }
  .site-nav ul { display: flex; flex-wrap: wrap; gap: 0 24px; list-style: none; margin: 0; padding: 0; }
  .site-nav ul a { display: inline-block; border-bottom: 1px solid transparent; padding: 10px 0 4px; }
  .site-nav ul a:hover { color: #1c1a16; border-bottom-color: #d4ccba; }
  .site-nav a[aria-current] { color: #805c23; border-bottom-color: #b8893a; }
  .site-nav a:focus-visible { outline: 2px solid #805c23; outline-offset: 3px; }
  @media (max-width: 640px) { .site-nav { flex-direction: column; align-items: flex-start; gap: 0; margin-bottom: 16px; } .site-nav ul { gap: 0 18px; } }