@font-face { font-family: "ABC Areal"; src: url("../fonts/Areal.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "ABC Areal Mono"; src: url("../fonts/ArealMono.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root, html[data-theme] {
  --font-family-primary: "ABC Areal", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
}

:root {
  --mono: "ABC Areal Mono", ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Consolas, monospace;

  --fs-label: clamp(0.7188rem, 0.6193rem + 0.2652vw, 0.9375rem);
  --fs-caption: clamp(0.8rem, 0.6949rem + 0.2803vw, 1.031rem);
  --fs-small: clamp(0.85rem, 0.725rem + 0.3333vw, 1.125rem);
  --fs-body: clamp(0.95rem, 0.8136rem + 0.3636vw, 1.25rem);
  --fs-h4: clamp(1.05rem, 0.8739rem + 0.4697vw, 1.438rem);
  --fs-h3: clamp(1.15rem, 0.9341rem + 0.5758vw, 1.625rem);
  --fs-figure-sm: clamp(1.3rem, 1.067rem + 0.6212vw, 1.812rem);
  --fs-figure: clamp(1.7rem, 1.365rem + 0.8939vw, 2.438rem);
  --fs-display: clamp(2.6rem, 2.077rem + 1.394vw, 3.75rem);

  --measure: 68ch;
  --measure-wide: 92ch;
}

/* The four rules below exist only to unpin fixed sizes Django's own base.css and responsive.css set on body, li/dt/dd, code/pre and label. Deleting them puts those elements back on 14px/13px/12px/16px, unreachable by any token. */
#content { font-size: var(--fs-small); }
#content li, #content dt, #content dd { font-size: inherit; }
#content code, #content pre { font-size: var(--fs-caption); }
#content label { font-size: inherit; }

:is(#content, #header) button,
:is(#content, #header) input,
:is(#content, #header) select,
:is(#content, #header) textarea { font-family: inherit; font-size: inherit; }
#nav-sidebar button { font-family: inherit; }

#content .t-h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; color: var(--ink-strong); text-wrap: balance; }
#content .t-h4 { font-size: var(--fs-h4); font-weight: 600; line-height: 1.25; color: var(--ink-strong); }
#content .t-body { font-size: var(--fs-body); line-height: 1.55; }
#content .t-small { font-size: var(--fs-small); line-height: 1.5; }
#content .t-caption { font-size: var(--fs-caption); line-height: 1.45; color: var(--ink-muted); }
#content .t-label { font-size: var(--fs-caption); font-weight: 600; text-transform: none; color: var(--ink-muted); }
#content .t-figure { font-size: var(--fs-figure); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
#content .t-figure-sm { font-size: var(--fs-figure-sm); font-weight: 700; line-height: 1.15; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
#content .t-measure { max-width: var(--measure); }
#content .t-measure-wide { max-width: var(--measure-wide); }