/* ==========================================================================
   Design tokens, reset and base typography.
   Everything else in styles/ builds on this file, so load it first.
   ========================================================================== */

:root{
  /* Surfaces, darkest to lightest */
  --bg:#0a0a0a;
  --bg-2:#111;
  --bg-3:#1a1a1a;

  /* Text */
  --ink:#f5f5f5;
  --ink-dim:#8a8a8a;
  --ink-body:#c9c9c9;

  /* Borders and brand.
     --accent is the program's red, taken from kcbycoppell.com where it is the
     colour used for show headings. It is dark, so it works behind white text
     (7.7:1) but reads at only 2.6:1 as text on this background, under the
     4.5:1 needed to be legible. --accent-text is the lighter companion red the
     old site also uses, at 5.0:1, for anything set in the accent colour.

     Rule of thumb: --accent fills a shape, --accent-text writes on one. */
  --line:#262626;
  --line-strong:#3a3a3a;
  --accent:#9d1313;
  --accent-text:#da4444;
  --accent-2:#ffb703;
  --danger:#9d1313;

  /* Layout */
  --max:1200px;
  --gutter:28px;
  --gutter-sm:20px;

  /* Type families.
     Archivo for headlines, Inter for body. Deliberately not Bricolage
     Grotesque or Instrument Serif, which are the pairing generated pages
     default to and the fastest way for the site to read as machine-made.

     To change these, edit these two lines and the font link in index.html. */
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Archivo','Inter',system-ui,sans-serif;
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Respect users who ask the OS to reduce motion. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* ---------- Type roles ---------- */
.display{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.1;
}

/* Visible only to screen readers. */
.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;
}