@font-face { font-family: "Plex Sans"; src: url("../fonts/plex-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("../fonts/plex-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("../fonts/plex-sans-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Plex Sans Condensed"; src: url("../fonts/plex-sans-condensed-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --ink: #111111;
  --red: #A60000;
  --red-10: rgba(166, 0, 0, 0.10);
  --ink-2: rgba(17, 17, 17, 0.62);
  --paper: #ffffff;
  --tint-light: #f2f2f2;   /* ink at ~5% on white */
  --tint-dark: #2a2a2a;    /* ink lifted for a dark band */
  --tint-darker: #1c1c1c;  /* footer, one step below the dark band */
  --on-dark: #ffffff;
  --on-dark-2: rgba(255, 255, 255, 0.66);
  --radius: 5px;
  --font-sans: "Plex Sans", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-cond: "Plex Sans Condensed", "IBM Plex Sans Condensed", var(--font-sans);

  /* Fluid type: floor at 360px, ceiling at 1280px */
  --step--1: clamp(0.8125rem, 0.78rem + 0.11vw, 0.875rem);   /* 13 → 14 */
  --step-0:  clamp(0.9375rem, 0.89rem + 0.22vw, 1.0625rem);  /* 15 → 17 */
  --step-1:  clamp(1.0625rem, 0.995rem + 0.33vw, 1.25rem);   /* 17 → 20 */
  --step-2:  clamp(1.25rem, 1.11rem + 0.65vw, 1.625rem);     /* 20 → 26 */
  --step-3:  clamp(1.5rem, 1.32rem + 0.87vw, 2rem);          /* 24 → 32 */

  --lh-base: 1.55;
  --lh-head: 1.3;
  --lh-tight: 1.15;

  /* Fluid spacing: ~75% at 360px → 100% at 1280px */
  --space-1: clamp(0.1875rem, 0.17rem + 0.07vw, 0.25rem);    /* 3 → 4 */
  --space-2: clamp(0.375rem, 0.34rem + 0.14vw, 0.5rem);      /* 6 → 8 */
  --space-3: clamp(0.5625rem, 0.51rem + 0.22vw, 0.75rem);    /* 9 → 12 */
  --space-4: clamp(0.75rem, 0.68rem + 0.29vw, 1rem);         /* 12 → 16 */
  --space-5: clamp(1.125rem, 1.02rem + 0.43vw, 1.5rem);      /* 18 → 24 */
  --space-6: clamp(1.5rem, 1.36rem + 0.58vw, 2rem);          /* 24 → 32 */
  --space-7: clamp(2.25rem, 2.04rem + 0.87vw, 3rem);         /* 36 → 48 */
  --space-8: clamp(3rem, 2.72rem + 1.16vw, 4rem);            /* 48 → 64 */

  --measure: 68ch;
  --content-max: 1180px;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: var(--lh-base);
  font-weight: 400;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { color: var(--red); }
a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
hr { display: none; } /* no rules in the default look */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

/* Type roles */
.rr-t-head { font-family: var(--font-cond); font-weight: 700; font-size: var(--step-3); line-height: var(--lh-tight); color: var(--red); letter-spacing: 0.01em; }
.rr-t-headline { font-weight: 700; font-size: var(--step-1); line-height: var(--lh-head); }
.rr-t-context { font-weight: 500; font-size: var(--step-2); line-height: var(--lh-head); }
.rr-t-meta { font-weight: 400; font-size: var(--step--1); line-height: var(--lh-base); color: var(--ink-2); }