/* wgs.ie — design tokens and shared primitives.
 *
 * Single source of truth for the palette and the three type faces. Every page
 * links this file. Values are documented, with measured contrast ratios, in
 * STYLE.md — change them there in the same commit.
 *
 * Extracted 2026-09-02. They had been duplicated in index.html,
 * about/index.html and 404.html; README and STYLE.md both set "a fourth page"
 * as the trigger to stop copying them, and a fourth page arrived.
 *
 * The cost is one render-blocking request per page. It is a same-origin file
 * behind Netlify's CDN and it is cached across every page, which is cheaper
 * than the cross-origin Google Fonts request already in each head.
 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Ink. --ink3 is the colour of every date, journal name and section label.
     It must not be lightened past #6e6a63 — it was #8a8680, which is 3.4:1 on
     --paper and fails WCAG AA, and much of the text using it is 9-10px. */
  --ink: #1a1814; --ink2: #4a4740; --ink3: #6e6a63;

  /* Ground */
  --paper: #faf8f4; --paper2: #f2efe8; --rule: #d8d4cc;

  /* Accent. --accent2 is 4.71:1 on --paper and 4.35:1 on --paper2, so it is a
     label colour, not a body-text colour. */
  --accent: #1a4a3a; --accent2: #c8401a;

  /* The site's one dark surface, used by the featured study card. Anything
     placed on it takes the on-dark tag colours — see STYLE.md section 2. */
  --featured-bg: #1e1c17;

  /* Three faces, each with one job. Never introduce a fourth. */
  --serif: 'Source Serif 4', Georgia, serif;
  --display: 'Playfair Display', serif;
  --mono: 'JetBrains Mono', monospace;
}

/* Visually hidden but read aloud — used for the search field's label. */
.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;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.skip-link:focus {
  left: 40px; top: 10px; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: 9px 14px; border-radius: 3px; text-decoration: none;
}
@media (max-width: 768px) {
  .skip-link:focus { left: 18px; }
}

/* Smooth scrolling and the fade-up on every card are a vestibular problem for
   some readers. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}