:root {
    --ink: #243e33; --muted: #5c6b60; --bg: #f8f3df; --panel: #fffdf5;
    --edge: #ddd9c6; --accent: #a83f30;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --ink: #f5f0dc; --muted: #b5c1b5; --bg: #18251e; --panel: #22352a;
      --edge: #435548; --accent: #ffc49e;
    }
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; padding: 3rem 1.25rem 5rem; background: var(--bg); color: var(--ink);
    font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  }
  main { max-width: 40rem; margin: 0 auto; }
  h1 { font-size: 2rem; line-height: 1.15; margin: 0 0 .35rem; letter-spacing: -.02em; }
  .sub { color: var(--muted); margin: 0 0 2.5rem; }
  h2 { font-size: 1.075rem; margin: 2.5rem 0 .6rem; letter-spacing: -.01em; }
  p, li { color: var(--ink); }
  ul { padding-left: 1.15rem; }
  li { margin: .3rem 0; }
  .lede {
    background: var(--panel); border: 1px solid var(--edge); border-radius: 14px;
    padding: 1.1rem 1.25rem; margin: 0 0 1rem;
  }
  a { color: var(--accent); }
  footer { color: var(--muted); font-size: .875rem; margin-top: 3rem;
           border-top: 1px solid var(--edge); padding-top: 1.25rem; }

  a { text-underline-offset: .18em; overflow-wrap: anywhere; }
  a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
  nav { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 2rem; }
  nav a { padding: .5rem 0; }