:root{
      /* darks — backgrounds only */
      --slate:      #1E3138;
      --ink:        #22232D;
      /* lights */
      --offwhite:   #F7F5F0;
      --paleblue:   #B5C7C7;
      /* action */
      --citron:     #C2B252;
      --mustard:    #B0A04A;
      /* decoration only */
      /* Backgrounds — five, each with a job (per the spec) */
      --cream:      #E6E0D4;   /* the dark beige — hero and page openings */
      --bluefield:  #DDE7E7;   /* pale blue field — set-apart sections */
      /* Accents */
      --moss:       #6E6B48;   /* eyebrows on off-white and white */
      --mossdeep:   #5E5B3D;   /* eyebrows on cream and pale blue field */
      --terracotta: #C45F49;

      --display: 'Fraunces', Georgia, serif;
      --body:    'Atkinson Hyperlegible', 'Helvetica Neue', Arial, sans-serif;
      --radius:  999px;
      --headerH: 74px; /* replaced at runtime by the real header height */
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--body);
      font-size: 21px;
      line-height: 1.65;
      color: var(--ink);
      background: var(--offwhite);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }
    @media (max-width: 600px){ body { font-size: 18px; } :root{ --headerH: 66px; } }

    ::selection { background: var(--citron); color: var(--ink); }

    /* ── Focus rings ──────────────────────────────────────────
       Spec calls for a 3px citron ring. Citron measures only
       2.0:1 against off-white, below the 3:1 WCAG 2.2 needs for
       a focus indicator, so on light backgrounds the citron ring
       is bounded by slate on both edges — it still reads citron
       and it passes. On dark, off-white alone is 12.4:1.        */
    :focus { outline: none; }
    button:focus-visible, a:focus-visible {
      outline: 3px solid var(--citron);
      outline-offset: 3px;
      box-shadow: 0 0 0 8px var(--slate);
    }
    .on-dark button:focus-visible, .on-dark a:focus-visible {
      outline: 3px solid var(--offwhite);
      outline-offset: 3px;
      box-shadow: none;
    }

    button { font-family: var(--body); }

    @keyframes breathe { 0%, 100% { transform: scale(1); opacity: 0.4; } 50% { transform: scale(1.1); opacity: 0.8; } }
    @keyframes fadeUp  { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    .sr-only {
      position:absolute; width:1px; height:1px; padding:0; margin:-1px;
      overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
    }

    a.inline-link {
      color: inherit;
      text-decoration: underline;
      text-decoration-thickness: 2px;
      text-underline-offset: 3px;
    }
    a.inline-link:hover { background: var(--citron); color: var(--ink); }
    .on-dark a.inline-link:hover { background: var(--citron); color: var(--ink); }