/* ============================================================
   TOKENS — the three logo colours, on light ground only
   ============================================================ */
:root{
  --yellow:#F0E7A4;
  --yellow-fluo:#FEF71D;
  --turq:#5CDECE;
  --pink:#F3C1CF;
  --turq-deep:#12A794;
  --pink-deep:#D47894;

  --ink:#14201E;
  --paper:#FCFCF7;
  --mint:#E7FAF4;
  --card:#FFFFFF;
  --glass:rgba(255,255,255,.3);
  --glass-border:rgba(255,255,255,.5);
  --glass-blur:blur(12px) saturate(1.3);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 18px 48px -34px rgba(20,32,30,.22);

  --tx:#14201E;
  --tx-muted:#657570;

  --display:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --body:"Karla","Helvetica Neue",Helvetica,Arial,sans-serif;

  --pad:clamp(28px,5vw,72px);
  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* Breakpoints (custom properties can't be used in media queries, so they
   live here as documentation only):
     1000px — multi-column grids collapse to one column
      760px — nav becomes the full-screen mobile menu; also mirrored in js/nav.js */