/* ==========================================================================
   site.css — static template, zero JavaScript
   Layers: 1 fonts · 2 tokens · 3 base · 4 layout · 5 nav · 6 content
           7 forms · 8 accessibility preference queries · 9 print
   ========================================================================== */

/* --- 1. Fonts -------------------------------------------------------------
   Liberation Sans: metrically compatible with Arial/Helvetica, SIL OFL 1.1.
   Subset to Latin-1 + common punctuation. Local Helvetica/Arial is preferred
   via local() so returning visitors on macOS/Windows download nothing.
   font-display: swap keeps text readable during the font load.
-------------------------------------------------------------------------- */
@font-face {
  font-family: "Site Sans";
  src: local("Helvetica Neue"), local("Helvetica"), local("Arial"),
       url("../fonts/liberation-sans-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Site Sans";
  src: local("Helvetica Neue Bold"), local("Helvetica Bold"), local("Arial Bold"),
       url("../fonts/liberation-sans-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Site Sans";
  src: local("Helvetica Neue Italic"), local("Helvetica Oblique"), local("Arial Italic"),
       url("../fonts/liberation-sans-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* --- 2. Tokens ---------------------------------------------------------- */
:root {
  --ink: #16191c;
  --ink-quiet: #4a5157;
  --surface: #ffffff;
  --page-bg: #e4e7e9;
  --rule: #97a1a8;
  --rule-quiet: #c9cfd3;
  --link: #0b3d91;
  --link-visited: #5a2a7a;
  --focus: #a03000;
  --field: #ffffff;

  --measure: 68ch;
  --gap: 1.5rem;
  --sidebar: 13rem;

  /* Fallback chain ends at the browser default, per the brief. */
  --font-stack: "Site Sans", "Helvetica Neue", Helvetica,
                "Liberation Sans", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e9ecee;
    --ink-quiet: #b3bbc1;
    --surface: #1b1e21;
    --page-bg: #101214;
    --rule: #6f797f;
    --rule-quiet: #343a3f;
    --link: #a6c1ff;
    --link-visited: #d8adf5;
    --focus: #ffb066;
    --field: #24282c;
  }
}

/* --- 3. Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* No px root size: the visitor's own browser text size is respected. */
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0 0 3rem;
  font-family: var(--font-stack);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  background-color: var(--page-bg);

  /* The single repeating image block: a 32x32 grey+alpha PNG, 123 bytes,
     inlined as a data URI so it costs no HTTP request at all. The 2x variant
     (169 bytes) is fetched only by high-density screens via image-set().
     Regenerate both with img/make-tile.py; the files in img/ are the source.
     If a Content-Security-Policy forbids data: in img-src, swap the three
     declarations below for:  background-image: url("../img/tile.png");      */
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAAQklEQVR42mNsMGagDBAygJA8E4X2jxpAEwMaNBs06eoCFgwXXB+NBbobwDhaHowaQI4B6OUF9csDgi64PhoLVDcAADaLCcMfdUcBAAAAAElFTkSuQmCC");
  background-image: -webkit-image-set(
    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAAQklEQVR42mNsMGagDBAygJA8E4X2jxpAEwMaNBs06eoCFgwXXB+NBbobwDhaHowaQI4B6OUF9csDgi64PhoLVDcAADaLCcMfdUcBAAAAAElFTkSuQmCC") 1x,
    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAQAAAAAYLlVAAAAcElEQVR42u3YMQrAIAwF0Fi8TGcv6AU7e50u3YWWklKfi5P68AfElN4idWyRPGpERD/ub9Dbs/XpNwAAAAAAAFCnr91+zUMEy9bAEAEAAADAzwFFf0B/AAAAAADA3/DtA2b9BREsUANDBAAAAAAfB5xCyQ85Rp4uMQAAAABJRU5ErkJggg==") 2x);
  background-image: image-set(
    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAAQklEQVR42mNsMGagDBAygJA8E4X2jxpAEwMaNBs06eoCFgwXXB+NBbobwDhaHowaQI4B6OUF9csDgi64PhoLVDcAADaLCcMfdUcBAAAAAElFTkSuQmCC") 1x,
    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAQAAAAAYLlVAAAAcElEQVR42u3YMQrAIAwF0Fi8TGcv6AU7e50u3YWWklKfi5P68AfElN4idWyRPGpERD/ub9Dbs/XpNwAAAAAAAFCnr91+zUMEy9bAEAEAAADAzwFFf0B/AAAAAADA3/DtA2b9BREsUANDBAAAAAAfB5xCyQ85Rp4uMQAAAABJRU5ErkJggg==") 2x);

  background-repeat: repeat;
  background-size: 32px 32px;   /* fixes the tile in CSS px for both densities */

  /* scroll, never fixed: a fixed background repaints on every scroll frame. */
  background-attachment: scroll;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 0.5em; font-weight: 700; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.3rem; margin-top: 1.75em; }
h3 { font-size: 1.05rem; margin-top: 1.5em; }
p, ul, ol, dl { margin: 0 0 1em; max-width: var(--measure); }
li { margin-bottom: 0.35em; }
small { font-size: 0.875rem; color: var(--ink-quiet); }

/* Links carry an underline, so they are not distinguished by colour alone. */
a { color: var(--link); text-decoration: underline; text-underline-offset: 0.15em; }
a:visited { color: var(--link-visited); }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
/* Fallback for browsers without :focus-visible support. */
:focus:not(:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 0.6rem 1rem;
  z-index: 10;
}
.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* --- 4. Layout ---------------------------------------------------------- */
.page {
  max-width: 62rem;
  margin: 0 auto;
  padding: 1rem;
}

.masthead {
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 0.9rem 1.1rem;
  margin-bottom: var(--gap);
}
.wordmark { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
.wordmark a { color: inherit; text-decoration: none; }
.wordmark a:hover, .wordmark a:focus { text-decoration: underline; }
.tagline { margin: 0.15rem 0 0; color: var(--ink-quiet); font-size: 0.9rem; }

.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  align-items: start;
}

.sitefoot {
  margin-top: var(--gap);
  padding: 0.75rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  font-size: 0.875rem;
  color: var(--ink-quiet);
}
.sitefoot p { margin: 0; max-width: none; }

/* --- 5. Navigation: <details> disclosure, no script ---------------------- */
.nav-disclosure {
  background: var(--surface);
  border: 1px solid var(--rule);
}

.nav-toggle {
  display: block;              /* keeps the native marker in most browsers */
  padding: 0.75rem 1rem;
  min-height: 2.75rem;         /* ~44px pointer target */
  font-weight: 700;
  cursor: pointer;
  background: var(--surface);
}
.nav-toggle:hover { background: var(--rule-quiet); }

.nav-body { padding: 0.25rem 0 0.5rem; }
.nav-body ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.nav-body li { margin: 0; }

.nav-body a {
  display: block;
  padding: 0.6rem 1rem;
  min-height: 2.75rem;
  color: var(--link);
  text-decoration: none;
  border-left: 4px solid transparent;
  border-bottom: 1px solid var(--rule-quiet);
}
.nav-body a:hover { text-decoration: underline; }

/* Current page marked by weight and a bar, not by colour alone. */
.nav-body a[aria-current="page"] {
  font-weight: 700;
  color: var(--ink);
  border-left-color: var(--ink);
  background: var(--rule-quiet);
}

@media (min-width: 48em) {
  .layout { grid-template-columns: var(--sidebar) 1fr; }

  /* Desktop: the menu is simply present. The toggle is not needed. */
  .nav-disclosure > .nav-toggle { display: none; }
  .nav-disclosure > .nav-body { display: block; }
}
/* Separate rule: an unsupported selector must not invalidate the block above. */
@media (min-width: 48em) {
  .nav-disclosure::details-content {
    content-visibility: visible;
    block-size: auto;
  }
}

/* --- 6. Content --------------------------------------------------------- */
.content {
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 1.25rem 1.4rem 1.75rem;
}
.content:focus { outline: none; }        /* target of the skip link */
.content > :first-child { margin-top: 0; }

.lede { font-size: 1.08rem; color: var(--ink); }

.rule { border: 0; border-top: 1px solid var(--rule-quiet); margin: 1.75rem 0; }

dl.pairs { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; max-width: var(--measure); }
dl.pairs dt { font-weight: 700; }
dl.pairs dd { margin: 0; }

.note {
  border-left: 4px solid var(--rule);
  padding: 0.6rem 0.9rem;
  background: var(--field);
  max-width: var(--measure);
}
.note p:last-child { margin-bottom: 0; }

/* --- 7. Forms ----------------------------------------------------------- */
form { max-width: var(--measure); }

fieldset {
  border: 1px solid var(--rule);
  padding: 0.9rem 1rem 1.1rem;
  margin: 0 0 1.25rem;
}
legend { font-weight: 700; padding: 0 0.4rem; }

.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 700; margin-bottom: 0.25rem; }
.hint { display: block; font-size: 0.875rem; color: var(--ink-quiet); margin-bottom: 0.3rem; }

input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.6rem;
  font: inherit;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--rule);
}
textarea { min-height: 9rem; resize: vertical; }

button, input[type="submit"] {
  font: inherit;
  font-weight: 700;
  min-height: 2.75rem;
  padding: 0.6rem 1.2rem;
  color: var(--surface);
  background: var(--link);
  border: 1px solid var(--link);
  cursor: pointer;
}
button:hover, input[type="submit"]:hover { background: var(--ink); border-color: var(--ink); }

.required-mark { font-weight: 400; color: var(--ink-quiet); }

/* --- 8. Accessibility preference queries -------------------------------- */

/* More contrast: the tile is dropped so nothing competes with text edges. */
@media (prefers-contrast: more) {
  body { background-image: none; background-color: var(--surface); }
  .content, .masthead, .nav-disclosure, .sitefoot { border-color: var(--ink); border-width: 2px; }
  a { text-decoration-thickness: 2px; }
}

/* Windows High Contrast / forced colours: hand control to the OS palette. */
@media (forced-colors: active) {
  body { background-image: none; }
  .content, .masthead, .nav-disclosure, .sitefoot, fieldset { border: 1px solid CanvasText; }
  .nav-body a[aria-current="page"] { border-left-color: Highlight; }
  :focus-visible { outline: 3px solid Highlight; }
}

/* No motion is used by default; this guards anything added later. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Reduced data: skip the webfont download, use the local stack. */
@media (prefers-reduced-data: reduce) {
  body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
}

/* --- 9. Print ----------------------------------------------------------- */
@media print {
  body { background: #fff; color: #000; }
  .nav-disclosure, .skip-link { display: none; }
  .content, .masthead, .sitefoot { border: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}