/*
 * Base: reset, elements, typography, prose, accessibility, reveal primitives.
 */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Anchor links land below the fixed chrome instead of underneath it. */
	scroll-padding-top: calc(var(--header-h) + var(--sp-5));
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background: var(--c-canvas);
	color: var(--c-ink);
	font-family: var(--ff-sans);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-synthesis-weight: none;
	/*
	 * clip, not hidden: overflow-x:hidden turns the body into a scroll
	 * container, which silently breaks every position:sticky descendant.
	 * clip contains the same overflow without that side effect.
	 */
	overflow-x: clip;
}

@supports not (overflow: clip) {
	body {
		overflow-x: hidden;
	}
}

body.eg-sheet-open {
	overflow: hidden;
}

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

a {
	color: inherit;
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: color var(--d-fast) var(--e-out),
		text-decoration-color var(--d-fast) var(--e-out);
}

a:hover {
	color: var(--c-accent);
	text-decoration-color: currentColor;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

/* One focus treatment for the whole site, visible on every surface. */
:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

:focus:not(:focus-visible) {
	outline: none;
}

hr {
	border: 0;
	border-top: 1px solid var(--c-line);
	margin: var(--sp-7) 0;
}

::selection {
	background: var(--c-accent-soft);
	color: var(--c-ink);
}

/* ---------------------------------------------------------------- Headings */

h1,
h2,
h3,
h4 {
	font-family: var(--ff-display);
	font-weight: 600;
	margin: 0;
	text-wrap: balance;
	font-optical-sizing: auto;
}

.eg-h1,
h1 {
	font-size: var(--fs-h1);
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-h1);
}

.eg-h2 {
	font-size: var(--fs-h2);
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-h2);
	max-width: 20ch;
}

.eg-h2--wide {
	max-width: 26ch;
}

.eg-h3 {
	font-size: var(--fs-h3);
	line-height: 1.3;
	letter-spacing: var(--ls-h3);
}

p {
	margin: 0 0 var(--sp-4);
	max-width: var(--measure);
}

p:last-child {
	margin-bottom: 0;
}

/*
 * Eyebrow. Used sparingly: at most a handful across the whole landing page, so
 * sections are distinguished by their content rather than by identical labels.
 */
.eg-eyebrow {
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-accent);
	margin: 0 0 var(--sp-4);
}

.eg-tag {
	display: inline-block;
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--c-accent);
	background: var(--c-accent-soft);
	border: 1px solid var(--c-accent-line);
	border-radius: var(--r-pill);
	padding: var(--sp-1) var(--sp-3);
	margin: 0;
}

.eg-textlink {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--c-accent);
	cursor: pointer;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--c-accent) 35%, transparent);
	text-underline-offset: 0.2em;
}

.eg-textlink:hover {
	text-decoration-color: currentColor;
}

/* ------------------------------------------------------------------- Prose */

.eg-prose {
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
	color: var(--c-ink-2);
}

.eg-prose > * + * {
	margin-top: var(--sp-5);
}

.eg-prose h2,
.eg-prose h3 {
	color: var(--c-ink);
	margin-top: var(--sp-8);
}

.eg-prose h2 {
	font-size: var(--fs-h2);
	letter-spacing: var(--ls-h2);
	line-height: var(--lh-heading);
}

.eg-prose h3 {
	font-size: var(--fs-h3);
	letter-spacing: var(--ls-h3);
}

.eg-prose ul,
.eg-prose ol {
	padding-left: 1.2em;
}

.eg-prose li + li {
	margin-top: var(--sp-2);
}

.eg-prose blockquote {
	margin: 0;
	padding-left: var(--sp-5);
	border-left: 2px solid var(--c-accent);
	font-size: var(--fs-lead);
	color: var(--c-ink);
}

.eg-prose img,
.eg-prose figure {
	border-radius: var(--r-lg);
	overflow: hidden;
}

/* Wide content scrolls inside its own container; the page body never does. */
.eg-prose table,
.eg-prose pre {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/* --------------------------------------------------------- Accessibility */

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

.eg-skip-link {
	position: absolute;
	top: -100px;
	left: var(--sp-4);
	z-index: 999;
	background: var(--c-surface);
	color: var(--c-ink);
	padding: var(--sp-3) var(--sp-5);
	border-radius: var(--r-pill);
	box-shadow: var(--sh-md);
	font-weight: 600;
	text-decoration: none;
	transition: top var(--d-base) var(--e-out);
}

.eg-skip-link:focus {
	top: var(--sp-4);
}

/* --------------------------------------------------- Scroll reveal system */

/*
 * The hidden state only applies once JavaScript has confirmed it is running
 * (html.eg-js). Without it, everything renders visible: content is never
 * hostage to a script that failed to load.
 */
.eg-js [data-eg-reveal] {
	opacity: 0;
	transform: translate3d(0, 20px, 0);
	transition:
		opacity var(--d-slow) var(--e-out),
		transform var(--d-slow) var(--e-out);
	transition-delay: calc(var(--eg-reveal-order, 0) * 65ms);
	will-change: opacity, transform;
}

.eg-js [data-eg-reveal].is-revealed {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/*
 * Reduced motion keeps the reveal as a plain cross fade. The information that
 * "new content arrived" survives; the vestibular movement does not.
 */
@media (prefers-reduced-motion: reduce) {
	.eg-js [data-eg-reveal] {
		transform: none;
		transition: opacity 200ms linear;
		transition-delay: 0ms;
	}
}