/*
 * Reset, element typography, global utilities. Nothing component specific.
 */

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

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-block-start: var(--space-3);
}

body {
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--font-4);
	font-weight: var(--weight-regular);
	line-height: var(--leading);
	letter-spacing: var(--tracking-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;   /* the gallery's middle frame is transformed on scroll and must not widen the page */

	/* No paragraph on the site ends in an orphan. */
	text-wrap: pretty;
}

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

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

button {
	background: none;
	border: 0;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
 * Headings
 *
 * Sentence case, not uppercase. The logo is a tracked uppercase wordmark, and headings set the
 * same way read as a second logo rather than as a heading.
 * ----------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--color-heading);
	font-family: var(--font-display);
	font-weight: var(--weight-heading);
	line-height: var(--leading-heading);
	letter-spacing: var(--tracking-display);
	text-wrap: balance;
}

h1 {
	font-size: var(--font-9);
}

h2 {
	font-size: var(--font-8);
}

h3 {
	font-size: var(--font-7);
}

h4 {
	font-size: var(--font-6);
}

h5,
h6 {
	font-size: var(--font-4);
}

/* --------------------------------------------------------------------------
 * The marker
 *
 * A phrase inside a heading, set bold italic on a sage block that straddles the baseline. Drawn
 * as a background gradient rather than a pseudo-element so it wraps with the text and needs no
 * extra markup, and so the reveal can sweep it by animating background-size alone.
 *
 * The offset is measured from the top of the inline content box, which is the font's ascent plus
 * descent and not the line-height. That is what keeps the block on the baseline whether the
 * phrase sits in a 60px headline or a 24px lede.
 * ----------------------------------------------------------------------- */

.marker {
	font-weight: var(--weight-heading);
	font-style: italic;
	color: var(--color-heading);
	background-image: linear-gradient(var(--color-marker), var(--color-marker));
	background-repeat: no-repeat;
	background-position: 0 var(--marker-offset);
	background-size: 100% var(--marker-height);

	/* So the block breaks with the phrase instead of stretching across the wrap. */
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* --------------------------------------------------------------------------
 * Flow
 * ----------------------------------------------------------------------- */

p,
ul,
ol,
dl,
blockquote,
figure,
table {
	margin-block-end: var(--space-3);
}

:is(p, ul, ol, dl, blockquote, figure, table):last-child {
	margin-block-end: 0;
}

h2,
h3,
h4 {
	margin-block-start: var(--space-4);
}

/* A heading that opens a container takes its spacing from the container. */
:is(h1, h2, h3, h4, h5, h6):first-child {
	margin-block-start: 0;
}

ul,
ol {
	padding-inline-start: var(--space-3);
}

/*
 * The list trap. This margin is for prose. A list that lays its own items out uses gap, and there
 * the margin both pushes items down and makes the row taller than any card in it, so tiles stop
 * lining up. Layout lists opt out explicitly.
 */
li + li {
	margin-block-start: var(--space-1);
}

:is(.is-layout-list, .proof__list, .gallery__list, .choice-set, .rail__steps, .done__actions) > li + li {
	margin-block-start: 0;
}

:is(.is-layout-list, .proof__list, .gallery__list, .choice-set, .rail__steps, .done__actions) {
	padding-inline-start: 0;
	list-style: none;
}

/* --------------------------------------------------------------------------
 * Links
 * ----------------------------------------------------------------------- */

a {
	color: var(--color-link);
	text-decoration-thickness: max(0.06em, var(--border-hairline));
	text-underline-offset: 0.16em;
	transition: color var(--duration) var(--ease);
}

a:hover,
a:focus-visible {
	color: var(--color-link-hover);
}

/* --------------------------------------------------------------------------
 * Focus
 *
 * No border-radius here. Setting one changes the element's own geometry while it happens to be
 * focused, so a pill squares off the moment someone tabs to it. The outline traces whatever
 * radius the component already has.
 * ----------------------------------------------------------------------- */

:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

.skip-link {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 50%;
	z-index: 100;
	padding: var(--space-15) var(--space-3);
	background-color: var(--bnk-green);
	color: var(--bnk-cream);
	font-size: var(--font-3);
	font-weight: var(--weight-medium);
	text-decoration: none;
	border-end-start-radius: var(--radius-md);
	border-end-end-radius: var(--radius-md);
	transform: translate(-50%, -100%);
}

.skip-link:focus {
	color: var(--bnk-cream);
	transform: translate(-50%, 0);
}

/* --------------------------------------------------------------------------
 * Layout utilities
 * ----------------------------------------------------------------------- */

.container {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--form {
	max-width: calc(var(--container-form) + var(--gutter) * 2);
}

.container--text {
	max-width: calc(var(--container-text) + var(--gutter) * 2);
}

.center {
	margin-inline: auto;
	text-align: center;
}

.measure {
	max-width: var(--measure);
}

.measure--short {
	max-width: var(--measure-short);
}

/* --------------------------------------------------------------------------
 * Text utilities
 * ----------------------------------------------------------------------- */

.lede {
	font-size: var(--font-6);
	line-height: var(--leading-snug);
	color: var(--color-text);
}

.muted {
	color: var(--color-text-muted);
}

.accent {
	color: var(--color-accent);
}

.label,
.eyebrow {
	display: block;
	font-size: var(--font-2);
	font-weight: var(--weight-medium);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}

.u-caps {
	text-transform: uppercase;
}

.u-sentence {
	text-transform: none;
	letter-spacing: var(--tracking-body);
}

.u-nowrap {
	white-space: nowrap;
}

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

/* --------------------------------------------------------------------------
 * Motion guard, last
 * ----------------------------------------------------------------------- */

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}