*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color 500ms ease-in-out, color var(--t) var(--ease);
}
html.is-routing body { transition-duration: 220ms; }
#root { opacity: 0; transition: opacity 600ms var(--ease); }
html.is-ready #root { opacity: 1; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--lavender); color: var(--espresso); }
:focus-visible { outline: 1.5px solid currentColor; outline-offset: 3px; border-radius: 4px; }

/* ---------- Type ---------- */
.serif { font-family: var(--f-serif); font-weight: 350; font-variation-settings: 'opsz' 72; letter-spacing: -0.02em; text-wrap: balance; }
.h-80 { font-size: var(--fs-80); line-height: 1; }
.h-72 { font-size: var(--fs-72); line-height: 1; }
.h-60 { font-size: var(--fs-60); line-height: .95; }
.h-56 { font-size: var(--fs-56); line-height: 1.05; }
.h-40 { font-size: var(--fs-40); line-height: 1.1; font-weight: 380; }
.h-32 { font-size: var(--fs-32); line-height: 1.1; font-weight: 380; }
.h-26 { font-size: var(--fs-26); line-height: 1.12; font-weight: 400; letter-spacing: -0.005em; }
.h-22 { font-size: var(--fs-22); line-height: 1.18; font-weight: 400; letter-spacing: -0.005em; }
.lead { font-size: var(--fs-body-l); line-height: 1.45; color: var(--fg-2); max-width: 46ch; text-wrap: pretty; }
.body { color: var(--fg-2); max-width: 60ch; text-wrap: pretty; }
.eyebrow { font-size: var(--fs-eyebrow); line-height: 1.3; color: var(--fg-3); }
/* Second half of a headline fades out, as in a printed statement */
.fade .sw > span { background: linear-gradient(180deg, var(--taupe) 0%, rgba(163, 152, 147, .35) 140%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--pad)); margin: 0 auto; padding-left: max(var(--pad), env(safe-area-inset-left, 0px)); padding-right: max(var(--pad), env(safe-area-inset-right, 0px)); }
.container-wide { max-width: calc(var(--container-wide) + 2 * var(--pad)); }
.section { padding-block: var(--section); position: relative; }
.hairline { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Reveal ---------- */
.js-motion [data-reveal] { opacity: 0; transform: translateY(14px); }
.js-motion [data-split] .sw > span { opacity: 0; transform: translateY(.3em); }
.sw, .sw > span { display: inline-block; }

/* ---------- Buttons: 38px, 8px radius, colours invert on hover ---------- */
.btn { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid transparent; font-size: var(--fs-small); line-height: 1; white-space: nowrap; overflow: hidden; transition: background-color 250ms var(--ease), color 250ms var(--ease), border-color 250ms var(--ease); }
.btn .icon { width: 15px; height: 15px; transition: transform 250ms var(--ease); }
.btn:hover .icon { transform: translateX(2px); }
.btn--peach { background: var(--peach); color: var(--espresso); }
.btn--peach:hover { background: var(--peach-2); }
.btn--ghost-dark { background: rgba(55, 21, 6, .1); color: var(--white); border-color: rgba(231, 229, 228, .4); }
.btn--ghost-dark:hover { background: var(--mahogany); border-color: var(--mahogany); }
.btn--solid { background: var(--mahogany); color: var(--white); border-color: var(--mahogany); }
.btn--solid:hover { background: transparent; color: var(--mahogany); border-color: rgba(163, 152, 147, .5); }
.btn--ghost { background: rgba(231, 229, 228, .2); color: var(--mahogany); border-color: rgba(163, 152, 147, .25); }
.btn--ghost:hover { background: var(--mahogany); color: var(--white); border-color: var(--mahogany); }

/* Text link with an underline that grows from the left */
.ulink { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.ulink::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 250ms ease-in-out; }
.ulink:hover::after { transform: scaleX(1); }
.ulink .icon { width: 14px; height: 14px; }

.page { transition: opacity 220ms var(--ease); }
.page.is-leaving { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}