/* V92: every value here comes from css/system.css (the site's design system): the same paper, ink, face, three sizes
   of type, measure and gutter as the home page, and the small wordmark. this sheet only lays the page out */
/* the legal pages (terms.html, privacy.html). V83, V84. the site's own page: its paper, its ink, its one sans, and its
   three sizes of type (the title, the text, the small line). V84: the whole of the writing is ONE column in the
   middle of the page ("move this whole section to the center"); the words in it still start from its left edge, as
   a long read should. things are set apart by space, never by a rule */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.lg { margin: 0; min-height: 100svh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font-family: var(--sans); font-weight: 400; font-size: var(--t-body); line-height: 1.45; letter-spacing: -0.012em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.lg a { color: inherit; text-decoration: none; }
.lg__top { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; max-width: calc(var(--max) + var(--gut) * 2); margin: 0 auto; padding: clamp(18px, 3svh, 30px) var(--gut); }
.lg__home { display: block; line-height: 0; }
.lg__home img { display: block; height: var(--logo-h); width: auto; }
.lg__nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); font-size: var(--t-tab); color: var(--mute); }
.lg__nav a { display: inline-flex; align-items: center; min-height: 44px; transition: color 0.2s; }
.lg__nav a[aria-current="page"] { color: var(--ink); }
@media (hover: hover) { .lg__nav a:hover, .lg__foot a:hover { color: var(--ink); } }
.lg a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
.lg__main { flex: 1; width: 100%; max-width: calc(var(--max) + var(--gut) * 2); margin: 0 auto; padding: clamp(36px, 9svh, 110px) var(--gut) clamp(56px, 12svh, 140px); }
.lg__main > * { width: 100%; max-width: var(--col); margin-left: auto; margin-right: auto; }
.lg__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 0; margin-bottom: clamp(14px, 2.4svh, 24px); font-size: var(--t-tab); line-height: 1.3; color: var(--mute); }
.lg__draft { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; background: #fff; box-shadow: 0 0 0 1px rgba(27, 29, 28, 0.08); color: var(--ink); }
.lg__t { margin-top: 0; margin-bottom: 0; font-size: var(--t-heading); font-weight: 400; line-height: var(--lh-heading); letter-spacing: var(--ls-heading); text-wrap: balance; }
.lg__lead { margin-top: clamp(16px, 2.6svh, 28px); margin-bottom: 0; color: var(--text); text-wrap: pretty; }
.lg__body { margin-top: clamp(44px, 9svh, 96px); display: grid; row-gap: clamp(30px, 5svh, 48px); }
.lg__h { margin: 0 0 0.5em; font-size: var(--t-body); font-weight: 400; line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); }
.lg__s p { margin: 0; color: var(--text); text-wrap: pretty; }
.lg__s p + p { margin-top: 0.7em; }
.lg__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; width: 100%; max-width: calc(var(--max) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut) clamp(22px, 4svh, 40px); font-size: var(--t-tab); color: var(--mute); }
.lg__foot a { display: inline-flex; align-items: center; min-height: 44px; transition: color 0.2s; }