:root{
  /* ---- Spacing. 4px root, but the brand lives at the generous end:
         section rhythm is measured in whole multiples of 8, never tight. ---- */
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:20px;
  --s-6:24px;
  --s-8:32px;
  --s-10:40px;
  --s-12:48px;
  --s-16:64px;
  --s-20:80px;
  --s-24:96px;
  --s-32:128px;
  --s-40:160px;

  /* ---- Vertical section rhythm ---- */
  --section-y:clamp(72px,9vw,144px); /* @kind spacing */
  --section-y-tight:clamp(56px,6vw,96px); /* @kind spacing */
  --band-y:clamp(64px,7.5vw,112px); /* @kind spacing */

  /* ---- Horizontal gutters & measures ---- */
  --gutter:clamp(24px,7vw,120px); /* @kind spacing */
  --content-max:1240px;
  --prose-max:820px;

  /* ---- Grid gaps ---- */
  --gap-grid:clamp(24px,3vw,48px);
  --gap-tile:2px;      /* work tiles sit almost flush */
  --gap-stack:var(--s-6);

  /* ---- Radii. Sharp by default. The only curve in the system is a circle
         (submark seal, the check glyph). Everything rectangular stays square. ---- */
  --radius-none:0;
  --radius-full:999px;
}

.mf-container{width:100%;max-width:var(--content-max);margin-inline:auto;padding-inline:var(--gutter)}
.mf-prose{max-width:var(--prose-max)}
.mf-section{padding-block:var(--section-y)}
.mf-band{padding-block:var(--band-y)}