/* ==========================================================================
   DESIGN TOKENS — the one file to edit to change the look.
   Light and bright on purpose: warm white page, ink text, yellow as a small accent.
   ========================================================================== */
:root {
  --paper: #FCFAF6;        /* page */
  --paper-2: #F4EFE6;      /* quiet bands */
  --ink: #1F1C19;
  --ink-2: #4E4740;        /* secondary text */
  --mute: #7A7168;
  --line: rgba(31, 28, 25, .12);
  --yellow: #F2B33D;       /* accent: buttons, active states */
  --yellow-text: #A86F00;  /* yellow that reads on white, for links */
  --screen: #111;          /* behind video and slides */

  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Source Sans 3', 'Source Sans Pro', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  --fs-0: .8125rem;
  --fs-1: 1rem;
  --fs-2: 1.125rem;
  --fs-3: 1.375rem;
  --fs-4: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  --fs-5: clamp(2rem, 1.5rem + 2vw, 3rem);

  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 6.5rem;
  --wrap: 1180px;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --r: 4px;
  --r-pill: 999px;
  --measure: 66ch;
  color-scheme: light;
}