/* The step every rem below resolves against, and the one number that moves the
   whole page — type, and every measure the theme writes in rem. It does not
   change with the window: the theme raised it at 1600px and again at 2000px,
   so a wide screen got a different design rather than more of the same one.
   Lower than this and a table cell falls under 12px; what the page needed
   was less air between the rows, not smaller letters. One rule covers both of
   the theme's steps: 100em is also true at 125em, and this sheet loads last. */
@media screen and (min-width: 100em) { html { font-size: 125%; } }

/* The reading measure is not the type size, and the theme welds them: its grid
   is 61rem, so freezing the root above froze the column with it and a wide
   screen stopped buying any width. It grows with the window instead, to the
   measure the reference this was compared against runs at — about 103
   characters — and stays where it was on anything narrower. A plain cap, not a
   viewport calc: below it the grid is already limited by its parent, and a calc
   made a phone column narrower than the phone. */
.md-grid { max-width: 68rem; }

/* [data-md-color-scheme], not :root: on :root a role resolves against the light ladder once */
[data-md-color-scheme] {
  --fs-32: 1.6rem;
  --fs-24: 1.2rem;
  --fs-20: 1rem;
  --fs-18: .9rem;
  --fs-16: .8rem;
  --fs-14: .7rem;
  --fs-13: .65rem;
  --fs-12: .6rem;
  /* what a scroll target has to clear to land under the sticky header — the
     second value is the header carrying the tabs row, which is taller */
  --ui-scroll-clear: 3.6rem;
  --ui-scroll-clear-lifted: 6rem;
  --ui-tab-strip: 1.9rem;
  --ui-t-dur: .15s;
  --ui-t-control: var(--ui-t-dur) ease;
  --ui-t-surface: .2s ease;
  --ui-disabled: .55;
  --ui-alert-warn: var(--rcp-warn);
  --ui-shadow-sm: 0 1px 2px var(--rcp-shadow-ink);
  --ui-fs-mono: var(--fs-13);
  --ui-fs-code: var(--fs-12);
  --ui-label-fs: var(--fs-12);
  --ui-fw-strong: 600;
  --ui-label-fw: var(--ui-fw-strong);
  --ui-lh-prose: 1.75;
  --ui-prose-gap: 1.25em;
  --ui-lh-code: 1.55;
  --ui-lh-dense: 1.5;
  --ui-lh-heading: 1.3;
  --ui-lh-control: var(--ui-lh-heading);
  --ui-label-ls: .08em;
  --ui-ls-display: -.02em;
  --ui-ls-section: -.01em;
  --ui-label-fg: var(--rcp-faint);
  --ui-hairline-w: 1px;
  --ui-hairline: var(--ui-hairline-w) solid var(--rcp-border);
  --ui-rail-w: 3px;
  /* the weight of a current-position marker: the left nav's bar and the right
     TOC's rail draw one line, at the hairline doubled so it reads as deliberate */
  --ui-marker-w: calc(var(--ui-hairline-w) * 2);
  --ui-ring: calc(var(--ui-hairline-w) * 2);
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-80: 80px;
  --ui-chip-pad: var(--sp-4) var(--sp-10);
  --ui-radius-sm: var(--rcp-radius-xs);
  --ui-radius: var(--rcp-radius-sm);
  --ui-radius-lg: var(--rcp-radius);
  --ui-radius-pill: 999px;
}

html[lang="ko"] [data-md-color-scheme] {
  --ui-label-ls: normal;
  --ui-ls-display: normal;
  --ui-ls-section: normal;
  --ui-lh-prose: 1.85;
}
