:root {
    color-scheme: light dark;
    --paper: #f4f1ea;
    --ink: #1c1b18;
    --muted: #55524a;
    --rule: #cfc9bb;
    --accent: #b4431f;
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
  @media (prefers-color-scheme: dark) {
    :root { --paper: #16150f; --ink: #f1ede2; --muted: #b5b0a2; --rule: #3a382f; --accent: #f0845f; }
  }
  * { box-sizing: border-box; }
  html { scroll-padding-top: 5rem; }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 400 1.0625rem/1.65 var(--sans);
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
  a:hover { color: var(--accent); }
  :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
  .wrap { width: min(100% - 2rem, 68rem); margin-inline: auto; }

  header { border-bottom: 1px solid var(--rule); }
  header .wrap { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; align-items: baseline; justify-content: space-between; padding-block: 1.25rem; }
  .mark { font: 700 1.25rem/1 var(--serif); letter-spacing: -0.01em; text-decoration: none; }
  .mark i { font-style: normal; color: var(--accent); }
  nav { display: flex; gap: 1.5rem; font-size: 0.9375rem; }
  nav a { text-decoration: none; padding-block: 0.5rem; }
  nav a:hover { text-decoration: underline; }

  .hero { padding-block: clamp(3.5rem, 11vw, 8rem) clamp(3rem, 8vw, 6rem); }
  h1 {
    margin: 0;
    max-width: 16ch;
    font: 700 clamp(2.5rem, 7.5vw, 5.25rem)/1.02 var(--serif);
    letter-spacing: -0.025em;
    text-wrap: balance;
  }
  .nb { white-space: nowrap; }
  .lead { max-width: 38rem; margin: 2rem 0 0; font-size: clamp(1.125rem, 2vw, 1.3125rem); color: var(--muted); }
  .route { display: block; width: min(100%, 26rem); height: auto; margin-top: 3rem; color: var(--ink); }

  section { border-top: 1px solid var(--rule); padding-block: clamp(2.5rem, 6vw, 4.5rem); }
  .grid { display: grid; gap: 1.25rem 3rem; }
  @media (min-width: 52rem) { .grid { grid-template-columns: 14rem 1fr; } }
  h2 { margin: 0; font: 700 1.0625rem/1.3 var(--sans); letter-spacing: 0.02em; color: var(--muted); }
  .rows { margin: 0; padding: 0; list-style: none; }
  .rows li { display: grid; grid-template-columns: 2.75rem 1fr; gap: 0.25rem 1rem; padding-block: 1.75rem; border-bottom: 1px solid var(--rule); }
  .rows li:first-child { padding-top: 0; }
  .rows li:last-child { border-bottom: 0; padding-bottom: 0; }
  .num { font: 400 1rem/1.9 var(--serif); color: var(--accent); }
  h3 { margin: 0 0 0.4rem; font: 700 1.5rem/1.2 var(--serif); letter-spacing: -0.01em; }
  .rows p, .prose p { margin: 0; max-width: 40rem; }
  .prose p + p { margin-top: 1.1rem; }

  .contact .grid { align-items: baseline; }
  .contact p { margin: 0; }
  .contact a { font: 700 clamp(1.4rem, 4.2vw, 2.5rem)/1.2 var(--serif); letter-spacing: -0.015em; overflow-wrap: anywhere; }
  footer { border-top: 1px solid var(--rule); padding-block: 1.5rem 2.5rem; font-size: 0.875rem; color: var(--muted); }
  footer .wrap { display: flex; flex-wrap: wrap; gap: 0.25rem 2rem; justify-content: space-between; }
  .page { padding-block: clamp(3rem, 8vw, 6rem) clamp(3rem, 6vw, 5rem); }
  .page h1 { max-width: 20ch; font-size: clamp(2.25rem, 6vw, 4rem); }
  .page .lead { margin-top: 1.5rem; }
  .doc { margin-top: clamp(2.5rem, 6vw, 4rem); border-top: 1px solid var(--rule); }
  .doc section { padding-block: clamp(1.75rem, 4vw, 2.75rem); }
  .doc h2 { font: 700 1.5rem/1.25 var(--serif); letter-spacing: -0.01em; color: var(--ink); }
  .doc .body p, .doc .body ul { margin: 0.9rem 0 0; max-width: 40rem; }
  .doc .body > :first-child { margin-top: 0; }
  .doc ul { padding-left: 1.2rem; }
  .doc li + li { margin-top: 0.4rem; }
  .meta { margin-top: 1rem; font-size: 0.9375rem; color: var(--muted); }
  footer .links { display: flex; gap: 1.25rem; }
  footer a { text-underline-offset: 0.2em; }
.page .wrap { width: auto; margin-inline: 0; }
nav { flex-wrap: wrap; gap: 0 1.25rem; }
nav a { white-space: nowrap; }
@media (max-width: 30rem) { nav { gap: 0 1rem; font-size: 0.875rem; } }