/*
  The site's look, for the pages that link it: the brand's tokens, light
  and dark, the base type, and the footer. A page's own layout stays in its
  own <style>.
*/
:root {
  --terracotta: #C8533E;
  --navy: #0E2233;
  --cream: #F8F1E6;
  --gold: #E3A719;

  --bg: var(--cream);
  --ink: var(--navy);
  --muted: #4A5866;
  --rule: #D9CFC0;
  --banner-ink: #FFFFFF;
  --focus: var(--navy);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B1A27;
    --ink: var(--cream);
    --muted: #B4C0C8;
    --rule: #22384A;
    --focus: var(--gold);
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

footer {
  max-width: 960px; margin: 64px auto 0; padding: 20px 16px 40px;
  border-top: 1px solid var(--rule);
  display: flex; gap: 20px; justify-content: center;
  color: var(--muted); font-size: 0.95rem;
}
footer a { color: var(--muted); text-underline-offset: 3px; }
footer a:hover { color: var(--ink); }