@font-face {
  font-family: "Libre Caslon Display";
  src: url("fonts/libre-caslon-display-latin-400-normal.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --paper: #f7f9fb;
  --ink: #0f1419;
  --ink-soft: #4a535c;
  --deep: #0c2547;
  --cyan: #1b3a6e;
  --rule: #d9e1ea;
  color-scheme: light;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}
.doc-bar {
  background: var(--deep);
  padding: 14px 16px;
}
.doc-bar a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #f7f9fb;
  text-decoration: none;
  font-weight: 600;
}
.doc-bar img { border-radius: 7px; }
.doc {
  max-width: 40rem;
  margin: 0 auto;
  padding: 40px 16px 72px;
}
h1, h2 {
  font-family: "Libre Caslon Display", "Times New Roman", serif;
  font-weight: 400;
  color: var(--deep);
  line-height: 1.1;
}
h1 { font-size: clamp(2.2rem, 7vw, 3.2rem); margin: 0 0 18px; }
h2 { font-size: 1.7rem; margin: 40px 0 10px; padding-top: 22px; border-top: 1px solid var(--rule); }
h3 { font-size: 1rem; margin: 22px 0 6px; }
.lede { font-size: 1.1rem; color: var(--ink-soft); }
ul, ol { padding-left: 1.3em; }
li { margin: 6px 0; }
li ul { margin-top: 4px; }
a { color: var(--cyan); text-underline-offset: 2px; }
a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
code { font-size: 0.92em; background: #e5ebf2; padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.meta { margin-top: 36px; font-size: 0.9rem; color: var(--ink-soft); }