*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.6; color: var(--ink-900); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; color: var(--ink-900); text-wrap: balance; }
.display { font-size: var(--fs-display); letter-spacing: -0.035em; line-height: .98; }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.h4 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-700); text-wrap: pretty; }
.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
em.accent { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--forest-700); letter-spacing: -0.01em; }
/* No italics in Chinese: CJK fonts have none, and the slanted fallback reads badly. */
:lang(zh-CN) :is(em, i, .serif, .quote, blockquote, figcaption, .table__section--sub th) { font-style: normal; }
:lang(zh-CN) :is(.display, .h1, .h2, h1, h2) { letter-spacing: 0; }
.small { font-size: var(--fs-small); }
.xs { font-size: var(--fs-xs); }
.muted { color: var(--ink-500); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--forest-700); margin-bottom: 18px; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--amber-500); border-radius: 2px; }
.eyebrow--num { gap: 14px; }
.eyebrow--num::before { content: attr(data-num); width: auto; height: auto; background: none; font-family: var(--font-serif); font-style: italic; font-size: 1.25rem; letter-spacing: 0; text-transform: none; color: var(--amber-600); line-height: 1; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: var(--wide); }
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .6); }
.section--sand { background: var(--sand-100); }
.section--sage { background: var(--sage-50); }
.section--white { background: var(--white); }
.section--forest { background: var(--forest-900); color: var(--white); }
.section--forest h1, .section--forest h2, .section--forest h3, .section--forest h4 { color: var(--white); }
.section--forest .muted, .section--forest .lead { color: var(--forest-200); }
.section--forest .eyebrow { color: var(--forest-200); }
.section__head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px); }
.section__head .lead { margin-top: 16px; }
.section__head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; }
.flow > * + * { margin-top: 1em; }
.skip { position: absolute; left: -9999px; top: 12px; z-index: 100; background: var(--forest-800); color: #fff; padding: 10px 14px; border-radius: 8px; }
.skip:focus { left: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--forest-500); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--forest-100); }
.grid { display: grid; gap: clamp(16px, 2vw, 28px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } .section__head--row { flex-direction: column; align-items: flex-start; } }