/* IW Brickwork tokens. Navy and grey from the logo, a stone ground from his porcelain and sandstone paving,
   brick from the Cheshunt extension as the one accent (the quote action, the active stage). Fira Sans continues
   the humanist bold of "IW BRICKWORK". */
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/fira-sans-400.woff2) format("woff2"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/fira-sans-500.woff2) format("woff2"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/fira-sans-600.woff2) format("woff2"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/fira-sans-700.woff2) format("woff2"); }

:root {
  --c-bg: #F2F0EB;
  --c-bg-2: #E7E4DD;
  --c-bg-3: #191B45;
  --c-ink: #17183A;
  --c-ink-2: rgb(23 24 58 / .78);
  --c-ink-3: rgb(23 24 58 / .66);
  --c-line: rgb(23 24 58 / .15);
  --c-paper: #FBFAF7;
  --c-accent: #A2482C;
  --c-accent-ink: #FFFFFF;
  --c-navy: #2D2F79;
  --c-grey: #BABEC1;
  --c-on-dark: #F2F0EB;
  --c-on-dark-2: rgb(242 240 235 / .78);
  --c-line-dark: rgb(242 240 235 / .18);

  --f-display: "Fira Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --f-text: "Fira Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, Menlo, monospace;

  --t-display: clamp(2.375rem, 1.15rem + 4.1vw, 4.875rem);   /* 38 → 78 */
  --t-display-xl: clamp(2.5rem, 1.3rem + 4.2vw, 4.75rem);
  --t-h2: clamp(2rem, 1.05rem + 3vw, 3.75rem);              /* 32 → 60 */
  --t-h3: clamp(1.25rem, 1rem + .9vw, 1.75rem);             /* 20 → 28 */
  --t-lead: clamp(1.125rem, 1.03rem + .35vw, 1.3125rem);
  --t-body: 1.0625rem;
  --t-small: .9375rem;
  --t-label: .8125rem;
  --lh-display: .98;
  --lh-h2: 1.02;
  --lh-body: 1.55;
  --track-display: -.036em;
  --track-h2: -.03em;
  --track-label: .04em;
  --w-display: 500;
  --w-h2: 500;
  --w-body: 400;
  --measure: 60ch;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px; --s-12: 200px;
  --sec: clamp(72px, 5.5vw + 40px, 144px);
  --sec-tight: clamp(44px, 3.5vw + 24px, 88px);
  --sec-top: var(--sec);
  --sec-bottom: var(--sec);

  --wrap: 1360px;
  --gutter: clamp(20px, 4.5vw, 64px);
  --col-gap: clamp(16px, 2.2vw, 32px);
  --plate-gap: clamp(12px, 1.6vw, 24px);

  --ease: cubic-bezier(.33, 1, .68, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --d-fb: 160ms;
  --d-ui: 320ms;
  --d-media: 700ms;
  --d-reveal: 1000ms;
  --rise: 14px;
  --zoom: 1.04;
  --lift: -3px;
  --stagger: 90ms;

  --r: 0px;
  --r-ctl: 0px;
  --hair: 1px solid var(--c-line);
  --nav-h: 76px;

  color-scheme: light;
}

.on-dark {
  --c-bg: var(--c-bg-3);
  --c-bg-2: #22245A;
  --c-ink: var(--c-on-dark);
  --c-ink-2: var(--c-on-dark-2);
  --c-ink-3: rgb(242 240 235 / .68);
  --c-line: var(--c-line-dark);
  --c-paper: #22245A;
  --hair: 1px solid var(--c-line);
  color-scheme: dark;
  background: var(--c-bg);
  color: var(--c-ink);
}