*, *::before, *::after { box-sizing: border-box; } html, body { overflow-x: clip; } html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); } body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); } ::selection { background: color-mix(in oklab, var(--color-accent) 45%, transparent); color: var(--color-card-ink); } :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; } h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight, 700); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance; } h1 { max-width: 20ch; font-size: var(--text-display); } h2 { max-width: 30ch; font-size: var(--text-section); } h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; } .lead { font-size: var(--text-lead); line-height: 1.45; max-width: 52ch; } p { margin: 0; text-wrap: pretty; } p:not([class]) { max-width: 65ch; } img, video { max-width: 100%; height: auto; display: block; } svg { display: block; } [hidden] { display: none !important; } button, input, select, textarea { font: inherit; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; } .num, .figure, td.num { font-variant-numeric: tabular-nums; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } [data-slot] { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--color-paper-2, var(--color-paper)), var(--color-paper-3, var(--color-paper))); } [data-slot] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } [data-slot]:has(> img) > :not(img):not([data-keep]) { display: none !important; } @media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } } @media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } } @media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* photographs: natural vib=12 con=4 */ [data-slot] > img { filter: saturate(1.06) contrast(1.04); }