/* Reset and element defaults. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--green-brand);
	color: var(--body-dk);
	font-family: var(--serif);
	font-size: var(--t-body);
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, video, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; }

p { margin: 0 0 var(--s5); max-width: min(var(--measure), 100%); }
p:last-child { margin-bottom: 0; }

a { color: var(--local-accent, var(--accent)); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--fg, var(--ink-dk)); }

:focus-visible { outline: 2px solid var(--local-accent, var(--accent)); outline-offset: 3px; border-radius: 2px; }

button { font: inherit; color: inherit; }

ul, ol { margin: 0 0 var(--s5); padding-left: var(--s5); max-width: min(var(--measure), 100%); }
li { margin-bottom: var(--s3); }
li::marker { color: var(--local-accent, var(--accent)); }

table { border-collapse: collapse; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	background: var(--accent); color: var(--green-950);
	font-family: var(--serif); font-size: 12px;
	padding: 12px 18px; text-decoration: none;
}
.skip-link:focus { left: var(--s5); top: var(--s5); }

/* Type roles */

.t-hero, .t-display, .t-section {
	font-family: var(--display);
	letter-spacing: -.025em;
	color: var(--fg);
	text-wrap: balance;
}
.t-hero    { font-weight: 800; font-size: var(--t-hero);    line-height: .98; font-variation-settings: "wdth" 112; }
.t-display { font-weight: 800; font-size: var(--t-display); line-height: 1; font-variation-settings: "wdth" 110; }
.t-section { font-weight: 800; font-size: var(--t-section); line-height: 1.06; font-variation-settings: "wdth" 108; letter-spacing: -.02em; }

/* A statement at 60px is a headline, so it takes the display face. Kept at a
   moderate weight and open line-height so it still reads as a quiet breath
   between the reel and the work rather than another shout. */
.t-statement {
	font-family: var(--display); font-weight: 800;
	font-variation-settings: "wdth" 110;
	font-size: var(--t-statement); line-height: 1.2;
	letter-spacing: -.02em;
	/* 20ch was set for a four word statement. A full paragraph at this size
	   needs a proper measure or it stacks into a narrow tower. */
	color: var(--fg); max-width: min(34ch, 100%); text-wrap: balance;
}

.t-lead { font-size: var(--t-lead); line-height: 1.5; color: var(--fg); max-width: min(52ch, 100%); }

/* Line height is a function of size, and these are set for 60-100px type.
   At the mobile sizes the same ratios put the lines almost in contact, with
   descenders running into the caps below, which is the crowding you see on a
   phone. Opened up wherever the type has clamped down. Nothing here applies
   above 700px, where the original ratios are correct. */
@media (max-width: 700px) {
	.t-hero      { line-height: 1.12; }
	.t-display   { line-height: 1.1; }
	.t-section   { line-height: 1.16; }
	.t-statement { line-height: 1.32; }
}

.t-label {
	font-family: var(--serif); font-weight: 500;
	font-size: var(--t-label);
	color: var(--local-accent-ink, var(--accent-ink));
	margin: 0;
}

/* A modest section heading. Where an eyebrow used to sit and the words were
   actually doing work, this is what replaces it: the display face sized
   down, sentence case, hierarchy from weight and scale. */
.t-minor {
	font-family: var(--display); font-weight: 700;
	font-variation-settings: "wdth" 108;
	font-size: clamp(20px, 2.2vw, 30px); line-height: 1.15;
	letter-spacing: -.015em; color: var(--fg); margin: 0;
}

.t-meta { font-family: var(--serif); font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }

/* Available to a screen reader, not to the eye. */
.u-sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Nothing is allowed to push the page sideways on a narrow viewport. */
html, body { max-width: 100%; }
.wrap, .hero__inner { overflow-wrap: break-word; }