/* ============================================================
   DOUSCS — SHARED SITE CHROME
   The menu bar and the footer, in one file so they are edited in
   one place. Every public page links this BEFORE its own <style>,
   so a page can still override anything here if it needs to.

   The tokens are repeated from index.html on purpose: this file
   has to stand on its own if it is ever linked from a page that
   does not define them.
   ============================================================ */

:root {
  --ink:      #E8EBF2;
  --ink-soft: #B9C1D2;
  --red:      #E2707A;
  --pewter:   #6C7488;
  --ground:   #0D1424;
  --ground-2: #131C30;
  --rule:     #29344C;
  --muted:    #939DB2;
  --font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Charter, Georgia, serif;
  --font-ui:      ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --pad: clamp(1.25rem, 5vw, 3rem);
  color-scheme: dark;
}

/* Keyboard users get a way past the menu on every page. */
.skip {
  position: absolute; left: -9999px;
  font-family: var(--font-ui); font-size: 0.8125rem;
  background: var(--ink); color: var(--ground);
  padding: 0.6rem 1rem; z-index: 50;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- the menu bar ----------
   No hamburger. Five short links wrap onto a second line on a
   phone, which needs no JavaScript, no duplicate copy of the
   links, and nothing that can break with scripts turned off. */

.sitenav {
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-ui);
}

.sitenav .navrow {
  display: flex;
  align-items: center;
  gap: 0.6rem 1.15rem;
  flex-wrap: wrap;
  padding-block: 0.7rem;
  max-width: 76rem;
}

.sitenav .brand {
  display: flex; align-items: center; gap: 0.6rem;
  text-decoration: none; color: var(--ink); flex: 0 0 auto;
}
.sitenav .brand img { width: 2.1rem; height: 2.1rem; }
.sitenav .brand b {
  font-family: var(--font-display); font-size: 1.0625rem;
  font-weight: 600; line-height: 1.05; display: block;
}
.sitenav .brand small {
  display: block; font-size: 0.5625rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
}

.sitenav .navlinks {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.4rem 1.15rem; font-size: 0.8438rem;
}
.sitenav .navlinks a {
  color: var(--ink); text-decoration: none;
  padding-block: 0.15rem; border-bottom: 2px solid transparent;
}
.sitenav .navlinks a:hover { color: var(--red); }
.sitenav .navlinks a[aria-current="page"] { border-bottom-color: var(--red); }
.sitenav .navlinks a:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* The one link that leaves this site says so. */
.sitenav .navlinks a.out { color: var(--muted); font-size: 0.8125rem; }
@media (min-width: 52rem) {
  .sitenav .navlinks a.out { border-left: 1px solid var(--rule); padding-left: 1.15rem; }
  .sitenav { position: sticky; top: 0; z-index: 20; }
}

.sitenav .navcta {
  margin-left: auto; flex: 0 0 auto;
  font-size: 0.6563rem; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  background: var(--ink); color: var(--ground);
  border: 1px solid var(--ink); padding: 0.5rem 0.8rem;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.sitenav .navcta:hover { background: var(--red); border-color: var(--red); color: #fff; }
.sitenav .navcta:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
@media (max-width: 51.99rem) { .sitenav .navcta { margin-left: 0; } }

/* ---------- the footer ---------- */

.sitefoot {
  border-top: 1px solid var(--rule);
  padding-block: 2.75rem 3.25rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--muted);
}
.sitefoot .footrow {
  display: grid;
  grid-template-columns: 4.25rem 1fr auto;
  gap: 1.5rem 2.5rem;
  align-items: start;
}
@media (max-width: 46rem) {
  .sitefoot .footrow { grid-template-columns: 1fr; }
}
.sitefoot .footer-mark { width: 4.25rem; height: auto; }
.sitefoot p { margin: 0 0 0.75rem; max-width: 48ch; }
.sitefoot p:last-child { margin-bottom: 0; }
.sitefoot .orgname { color: var(--ink-soft); font-weight: 600; }
.sitefoot .legal { font-size: 0.75rem; line-height: 1.6; }
.sitefoot .footlinks {
  display: flex; flex-direction: column; gap: 0.5rem;
  text-align: right;
}
@media (max-width: 46rem) {
  .sitefoot .footlinks { flex-direction: row; flex-wrap: wrap; gap: 0.6rem 1.25rem; text-align: left; }
}
.sitefoot a { color: var(--muted); text-decoration-color: var(--rule); text-underline-offset: 0.2em; }
.sitefoot a:hover { color: var(--red); text-decoration-color: var(--red); }
.sitefoot a.official { font-weight: 600; color: var(--ink-soft); text-decoration-color: var(--red); }
.sitefoot a.staff { color: var(--pewter); }

/* ---------- page header used by the inner pages ---------- */

.pagehead {
  padding-block: clamp(2.25rem, 6vw, 3.75rem) clamp(1.5rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
}
.pagehead .eyebrow {
  font-family: var(--font-ui); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--red);
  margin: 0 0 0.9rem;
}
.pagehead h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.9rem, 4.4vw, 2.9rem); line-height: 1.15;
  letter-spacing: -0.015em; margin: 0 0 1rem; max-width: 22ch;
  text-wrap: balance;
}
.pagehead .lede {
  font-size: 1.1875rem; color: var(--ink-soft); max-width: 46ch; margin: 0;
}