/* Round 5 tokens. Ported from round5/theme.html :root, renamed --r5-*.
   Ink pairs on --r5-paper: body 12.2:1, captions 10.0:1, headlines 14.4:1 (see ROUND5.md). */
:root {
  /* colour */
  --r5-paper: #ECE6D9;
  --r5-paper-2: #E3DCCB;
  --r5-sheet: #F5F1E8;
  --r5-receipt: #FBFAF6;
  --r5-tin: #E7DDD3;
  --r5-ink: #1A1714;
  --r5-ink-body: #2B251F;
  --r5-ink-2: #3A332B;
  --r5-rule: #8C8478;
  --r5-hair: rgba(26, 23, 20, 0.18);
  --r5-red: #A32619;
  --r5-red-d: #861E13;
  --r5-gold: #B8964E; /* 2.25:1 on paper: never carries text on a light ground */
  --r5-gold-l: #E2C98E;
  --r5-black: #14100C;
  --r5-ivory: #EDE7DA;
  --r5-ivory-2: #D8D1C3;
  --r5-tint-red: #F7ECE6;

  /* type families (self-hosted, see snippets/r5-fonts.liquid) */
  --r5-disp: 'R5 Newsreader', 'R5 Noto Serif SC', Georgia, serif;
  --r5-poster: 'R5 Archivo', 'Arial Narrow', sans-serif;
  --r5-read: 'R5 Literata', 'R5 Noto Serif SC', Georgia, serif;
  --r5-ui: 'R5 Hanken Grotesk', system-ui, sans-serif;
  --r5-type: 'R5 Courier Prime', 'Courier New', monospace;
  --r5-han: 'R5 Noto Serif SC', serif;

  /* type scale */
  --r5-logo-h: 34px; /* header lockup height, BRAND_MASTER 2 */
  --r5-masthead-w: min(560px, 80vw); /* home horizontal lockup */
  --r5-fs-d1: clamp(44px, 5.2vw, 76px);
  --r5-fs-d2: clamp(34px, 3.8vw, 56px);
  --r5-fs-d3: 40px;
  --r5-fs-d4: 28px;
  --r5-fs-body: 18px;
  --r5-lh: 1.6;
  --r5-fs-slip: 18px; /* Courier Prime x-height 0.451 x 18 = 8.12px, passes the 8px slip gate */
  --r5-fs-small: 16px;
  --r5-fs-ui: 15px;
  --r5-fs-cap: 12.5px;
  --r5-type-w: 400;
  --r5-disp-vs: 'opsz' 16;
  --r5-disp-stretch: normal;
  --r5-read-vs: 'opsz' 12;
  --r5-type-vs: normal;

  /* lines, radii, shadows */
  --r5-bw: 1.5px;
  --r5-bw-heavy: 3px;
  --r5-r: 0;
  --r5-sh-card: 0 18px 30px -18px rgba(40, 25, 10, 0.4);
  --r5-sh-slip: 0 22px 34px -22px rgba(40, 25, 10, 0.55), 0 1px 0 rgba(0, 0, 0, 0.05);
  --r5-sh-press: 3px 3px 0;

  /* spacing */
  --r5-s1: 8px;
  --r5-s2: 12px;
  --r5-s3: 16px;
  --r5-s4: 24px;
  --r5-s5: 32px;
  --r5-s6: 48px;
  --r5-s7: 64px;
  --r5-s8: 96px;
  --r5-gutter: 40px;
  --r5-hd: 60px;

  /* paper textures */
  --r5-fibre: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.55 .08' numOctaves='3' seed='3'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .24  0 0 0 0 .12  0 0 0 .12 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
  --r5-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -16 12.4'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

@media (max-width: 760px) {
  :root {
    --r5-gutter: 16px;
    --r5-hd: 54px;
    --r5-logo-h: 24px;
    --r5-fs-d3: 34px;
    --r5-fs-d4: 24px;
    --r5-fs-body: 17px;
  }
}