/* Self-hosted fonts (SIL Open Font License; see fonts/OFL-*.txt) */
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/spectral-latin-ext-300-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/spectral-latin-300-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/spectral-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/spectral-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/spectral-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/spectral-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/instrument-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/instrument-sans-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ground: #ECEEEA;
  --ink: #1E2329;
  --muted: #59616C;
  --rule: #C9CEC8;
  --accent: #1F6F6B;
  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rail: 11rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 1.125rem/1.65 var(--serif);
}
a { color: var(--accent); text-decoration: none; text-underline-offset: 0.18em; text-decoration-thickness: 0.06em; }
a:hover, a:focus-visible { text-decoration: underline; text-decoration-thickness: 0.12em; }
nav a:hover, nav a:focus-visible, .wordmark:hover, .wordmark:focus-visible { text-decoration: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--ground); padding: .5rem 1rem; }
.skip:focus { left: 0; z-index: 10; }

.masthead, main, .foot { max-width: 68rem; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.masthead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; padding-top: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule); }
.wordmark { font: 600 1.25rem/1 var(--serif); color: var(--ink); text-decoration: none; }
nav { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; font: 400 .95rem/1.4 var(--sans); }
nav a { color: var(--ink); text-decoration: none; padding: .25rem 0; border-bottom: 2px solid transparent; }
nav a:hover { border-bottom-color: var(--rule); }
nav a[aria-current="page"] { border-bottom-color: var(--accent); }

main { padding-top: 2.5rem; padding-bottom: 3rem; }

.hero h1 { font: 300 clamp(2.75rem, 8.5vw, 5.5rem)/0.95 var(--serif); letter-spacing: -0.02em; margin: 1rem 0 2.25rem; }
.lede { font-size: 1.25rem; line-height: 1.6; margin: 0 0 2.5rem; }
.pulse { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 225; margin-bottom: 2.5rem; }
@media (max-width: 640px) { .pulse { aspect-ratio: 1000 / 320; } }
.pulse path { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.pulse path.hot { stroke: var(--accent); stroke-width: 2.25; }

.pagehead { font: 300 clamp(2.25rem, 6vw, 3.5rem)/1.05 var(--serif); letter-spacing: -0.01em; margin: 0 0 1rem; }
.subhead { font: 300 clamp(1.75rem, 4vw, 2.25rem)/1.1 var(--serif); margin: 4rem 0 1rem; }
.note { margin: 0 0 .5rem; max-width: 38rem; }

.split, .row { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 0 2rem; padding: 1.5rem 0; border-top: 1px solid var(--rule); }
.rows { list-style: none; margin: 0; padding: 0; }
.rail { font: 400 .95rem/1.65 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.entry h2, .entry h3, .feature h2 { font: 600 1.25rem/1.3 var(--serif); margin: 0 0 .15rem; }
.feature h2 a, .entry h2 a, .entry h3 a { color: var(--ink); }
@media (hover: none) { .feature h2 a, .entry h2 a, .entry h3 a { text-decoration: underline; text-decoration-color: rgba(30, 35, 41, .55); } }  /* ink-colored titles have no other cue on touch screens: hairline */
.meta { font: 400 .9rem/1.55 var(--sans); color: var(--muted); margin: .2rem 0 0; }
.meta a { color: var(--accent); }
/* Links inside running text or meta lines sit in gray text of nearly the same lightness (1.06:1), so they keep a hairline underline at rest; full on hover or focus. Links that are a line of their own (.meta.links) and titles underline only on hover. */
.meta a, .prose a, .note a, .privacy a, .foot a { text-decoration: underline; text-decoration-color: rgba(31, 111, 107, .7); }
.meta a:hover, .meta a:focus-visible, .prose a:hover, .prose a:focus-visible, .note a:hover, .note a:focus-visible,
.privacy a:hover, .privacy a:focus-visible, .foot a:hover, .foot a:focus-visible { text-decoration-color: currentColor; }
.meta.links a { text-decoration: none; }
.meta.links a:hover, .meta.links a:focus-visible { text-decoration: underline; text-decoration-color: currentColor; }
.plain { list-style: none; margin: 0; padding: 0; }
.plain li { padding: .1rem 0; }
.feature { display: flex; gap: 1.75rem; align-items: flex-start; }
.feature p { margin: 0 0 .5rem; }
.cover img { display: block; width: 100%; height: auto; }
.feature .cover { flex: 0 0 min(220px, 38%); }
.rec { display: flex; gap: 1.5rem; align-items: flex-start; }
.rec .cover { flex: 0 0 120px; }
.rec .cover.none { display: none; }
.rec p { margin: 0 0 .3rem; }

.prose { max-width: 40rem; }
.prose h2 { font: 600 1.25rem/1.3 var(--serif); margin: 2.5rem 0 .5rem; }
.foot { padding-top: 1.5rem; padding-bottom: 3rem; border-top: 1px solid var(--rule); font: 400 .9rem/1.5 var(--sans); color: var(--muted); }
.foot p { margin: 0; }

@media (max-width: 700px) {
  body { font-size: 1.0625rem; }
  .split, .row { grid-template-columns: 1fr; gap: .25rem; }
  .feature { flex-direction: column; }
  .feature .cover { flex-basis: auto; width: min(260px, 70%); }
}

/* contact form */
.contact { max-width: 34rem; }
.field { margin: 0 0 1.25rem; }
.field label { display: block; font: 400 .9rem/1.4 var(--sans); color: var(--muted); margin: 0 0 .3rem; }
.field input, .field select, .field textarea { display: block; width: 100%; font: 400 1.0625rem/1.5 var(--serif); color: var(--ink); background: transparent; border: 1px solid var(--rule); border-radius: 0; padding: .6rem .7rem; }
.field textarea { min-height: 10rem; resize: vertical; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { margin: 0 0 1.25rem; min-height: 65px; }
.contact button { font: 600 .95rem/1 var(--sans); color: #fff; background: var(--accent); border: 0; border-radius: 0; padding: .85rem 1.6rem; cursor: pointer; }
.contact button[disabled] { opacity: .6; cursor: default; }
.status { font: 400 .95rem/1.5 var(--sans); margin: 1rem 0 0; min-height: 1.5em; }
h2.rail { margin: 0; }
.privacy { font: 400 .9rem/1.5 var(--sans); color: var(--muted); max-width: 34rem; margin: 1.5rem 0 0; }