@font-face {
  font-family: Belleza; font-weight: 400; font-style: normal; font-display: swap;
  src: url(assets/fonts/belleza.woff2) format("woff2");
}

/* Colors sampled from the original letterhead scan: buff stock, warm black ink. */
:root {
  --paper: #fbe6c6; --ink: #2b2421; --muted: #6b5d52; --rule: #2b2421; --accent: #7a3b1e;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Real Optima where installed (Apple devices), Belleza (a free Optima-like face) elsewhere. */
  --optima: Optima, "Optima nova", Belleza, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1f1a16; --ink: #f1dfc2; --muted: #b5a38c; --rule: #f1dfc2; --accent: #e9a36f;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  font: 17px/1.6 var(--optima);
  padding-inline: 16px;
}
.sheet { width: 100%; max-width: 760px; margin: 0 auto; flex: 1; display: flex; flex-direction: column; }

/* Letterhead: wordmark right-aligned over a hairline rule, address line beneath it. */
.letterhead { padding-top: 48px; }
.wordmark { display: block; margin-left: auto; width: min(100%, 360px); color: var(--ink); }
.wordmark svg { display: block; width: 100%; height: auto; }
.letterhead hr { border: 0; border-top: 1.5px solid var(--rule); margin: 8px 0 4px; }
.address {
  margin: 0; display: flex; flex-wrap: wrap; gap: 2px 32px;
  font: 13px/1.5 var(--sans); letter-spacing: .02em; text-transform: uppercase;
}

main { flex: 1; padding-block: 12vh 64px; max-width: 580px; }
main.doc { padding-block: 48px; }
h1 { font-weight: 400; font-size: 30px; line-height: 1.25; margin: 0 0 12px; text-wrap: balance; }
h2 { font-weight: 400; font-size: 21px; margin: 32px 0 6px; }
.lede { font-size: 19px; color: var(--muted); margin: 0 0 28px; }
.meta { color: var(--muted); margin-top: 0; }
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Footer echoes the letterhead's bottom rule and Optima tagline. */
footer { border-top: 1.5px solid var(--rule); padding-block: 10px 32px; }
.tagline {
  margin: 0 0 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 72px;
  font: 15px/1.5 var(--optima); word-spacing: .12em;
}
.fine {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px;
  font: 12px/1.4 var(--sans); color: var(--muted);
}