@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,500;0,600;0,750;1,400&display=swap');

/* Palette taken from the USGS topographic map sheet: the paper, the slate ink of the
   lettering, index-contour brown, hydrography blue, and vegetation green. */
:root {
  --sheet: #e8ebe3;      /* map paper, cool sage (not cream) */
  --sheet-2: #dde2d6;    /* tint for panels and table heads */
  --rule: #c2c9bc;       /* grid and section lines */
  --ink: #1b252e;        /* lettering */
  --dim: #56636b;        /* secondary lettering, 5.6:1 on the sheet */
  --contour: #8f5427;    /* index contour brown: county outlines */
  --water: #255d8c;      /* hydrography blue: links and actions */
  --met: #3f6a3a;        /* vegetation green: criterion met */
  --miss: #a3361f;       /* criterion not met, protection broken */
  --sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --measure: 68ch;
}

* { box-sizing: border-box; }
html { background: var(--sheet); color: var(--ink); }
body { margin: 0; font: 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; font-feature-settings: 'tnum' 0; }
a { color: var(--water); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--water); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

/* site bar */
.bar { display: flex; align-items: baseline; gap: 28px; padding: 22px 0 18px; border-bottom: 1px solid var(--rule); }
.bar .mark { font: 750 20px/1 var(--sans); color: var(--ink); text-decoration: none; letter-spacing: -.01em; margin-right: auto; }
.bar nav { display: flex; gap: 22px; font: 500 15px/1 var(--sans); }
.bar nav a { color: var(--dim); text-decoration: none; }
.bar nav a:hover, .bar nav a[aria-current] { color: var(--ink); }
.bar nav a[aria-current] { box-shadow: 0 2px 0 var(--contour); }

h1, h2, h3 { font-family: var(--sans); font-weight: 750; line-height: 1.08; letter-spacing: -.02em; margin: 0; }
h3 { font-weight: 600; letter-spacing: -.005em; line-height: 1.2; }
p { margin: 0 0 1em; max-width: var(--measure); }
.lede { font-size: 21px; line-height: 1.5; max-width: 36ch; }
.dim { color: var(--dim); }
.sans { font-family: var(--sans); }
.small { font: 14.5px/1.55 var(--sans); color: var(--dim); }

/* buttons */
.btn { display: inline-block; font: 600 15px/1 var(--sans); padding: 13px 17px; border-radius: 3px;
       background: var(--water); color: #fff; text-decoration: none; border: 0; cursor: pointer; }
.btn:hover { background: #1c4a70; }
.btn.quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn.quiet:hover { background: var(--sheet-2); }

/* footer */
.foot { border-top: 1px solid var(--rule); margin-top: 96px; padding: 28px 0 48px; }
.foot p { font: 14px/1.6 var(--sans); color: var(--dim); max-width: 80ch; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media (max-width: 720px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  .bar { flex-wrap: wrap; gap: 14px; }
  .bar .mark { width: 100%; }
  .lede { font-size: 19px; }
}