/* ==========================================================================
   Nia Imani Academy design system (redesigned pages only)
   Direction: "Bright Futures", with three touches borrowed from "Heritage and Purpose":
   the woven-textile divider, parent testimonial cards, and gold as a small accent on navy.
   Documented in docs/DESIGN.md. Contrast ratios for every pair are listed there.
   ========================================================================== */

@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url(../fonts/atkinson/atkinson-hyperlegible-400.woff2) format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url(../fonts/atkinson/atkinson-hyperlegible-700.woff2) format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
	/* Color. White and the accessible blue do most of the work. */
	--c-blue: #1f6fc5;         /* white text on it 5.07:1; as text on white 5.07:1 */
	--c-blue-dark: #14508f;    /* links; white text on it 8.16:1 */
	--c-sky: #eaf3fd;          /* light section background */
	--c-line: #b9cbe0;         /* card and field borders (decorative) */
	--c-white: #ffffff;
	--c-ink: #12263a;          /* body text 15.40:1 on white; navy for footer and dividers */
	--c-muted: #46566a;        /* secondary text 7.50:1 on white, 6.69:1 on sky */
	--c-sun: #ffd24a;          /* donate buttons; ink text on it 10.68:1 */
	--c-sun-hover: #ffdf74;
	--c-gold: #e0ac3f;         /* fills and borders on navy only, never text on light backgrounds */
	--c-error: #b42318;        /* error text 6.57:1 on white */
	--c-success: #1e6b34;      /* success text 6.55:1 on white */

	/* Program accents: small tags and icons only. White text on each passes 4.5:1. */
	--c-math: #1f6fc5;
	--c-english: #b4431b;
	--c-languages: #0f766e;
	--c-arts: #9c2f9c;
	--c-stem: #4d7a12;

	/* Type */
	--font: "Atkinson Hyperlegible", "Helvetica Neue", Arial, sans-serif;
	--fs-small: 0.875rem;                                   /* 14px */
	--fs-base: 1.125rem;                                    /* 18px */
	--fs-lead: 1.25rem;                                     /* 20px */
	--fs-h3: 1.5rem;                                        /* 24px */
	--fs-h2: clamp(1.75rem, 1.3rem + 1.8vw, 2.4rem);        /* 28-38px */
	--fs-h1: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);          /* 36-56px */
	--lh-body: 1.65;
	--lh-heading: 1.15;

	/* Spacing */
	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1rem;
	--s-5: 1.5rem;
	--s-6: 2rem;
	--s-7: 3rem;
	--s-8: 4.5rem;

	/* Radius and depth */
	--r-sm: 8px;
	--r-md: 16px;
	--r-lg: 28px;
	--r-pill: 999px;
	--shadow: 0 10px 30px rgba(18, 38, 58, 0.14);

	/* Role colors: components use these, so the dark theme only has to change them here */
	--bg: var(--c-white);
	--surface: var(--c-white);         /* cards, header, fields, chips */
	--alt: var(--c-sky);               /* alternating sections, hover */
	--text: var(--c-ink);
	--text-muted: var(--c-muted);
	--link: var(--c-blue-dark);
	--border: var(--c-line);           /* decorative borders */
	--control-border: var(--c-muted);  /* form fields and placeholder outlines: 3:1 or more */
	--current-bg: var(--c-blue-dark);  /* current page in the menu */
	--current-text: var(--c-white);
	--footer-bg: var(--c-ink);
	--error: var(--c-error);
	--success: var(--c-success);

	--container: 1180px;
	--tap: 48px;               /* minimum button height (WCAG minimum is 24px) */
}

/* Dark theme for visitors whose device is set to dark mode. Declaring it also stops browsers
   from auto-darkening the site with their own (unchecked) colors. Contrast of every pair is in docs/DESIGN.md. */
:root {
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0e1824;
		--surface: #16263a;
		--alt: #112236;
		--text: #e8eef6;           /* 15.31:1 on bg, 13.11:1 on surface */
		--text-muted: #b3c1d1;     /* 9.76:1 on bg, 8.35:1 on surface */
		--link: #93c5ff;           /* 9.93:1 on bg, 8.50:1 on surface */
		--border: #34506d;
		--control-border: #8aa0b8; /* 5.68:1 against surface */
		--current-bg: #93c5ff;     /* the dark-blue pill would only be 1.88:1 against the header */
		--current-text: #0e1824;   /* 9.93:1 */
		--footer-bg: #09111a;
		--error: #ff9e94;          /* 7.70:1 on surface */
		--success: #7fdc98;        /* 9.18:1 on surface */
	}
}

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

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 400 var(--fs-base) / var(--lh-body) var(--font);
}

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

h1,
h2,
h3 {
	margin: 0 0 0.5em;
	color: var(--text);
	font-weight: 700;
	line-height: var(--lh-heading);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p {
	margin: 0 0 1em;
}

a {
	color: var(--link);
	text-decoration: underline;
	text-underline-offset: 3px;
}

a:hover {
	text-decoration-thickness: 3px;
}

/* Visible focus everywhere: white then navy, so it shows on light and dark backgrounds */
:focus-visible {
	outline: 3px solid var(--c-white);
	outline-offset: 0;
	box-shadow: 0 0 0 6px var(--c-ink);
}

.skip-link {
	position: absolute;
	top: var(--s-2);
	left: -9999px;
	z-index: 100;
	padding: var(--s-3) var(--s-5);
	border-radius: var(--r-sm);
	background: var(--c-ink);
	color: var(--c-white);
	font-weight: 700;
}

.skip-link:focus {
	left: var(--s-2);
}

/* The skip link target takes focus without a ring around the whole page */
#main:focus {
	outline: none;
	box-shadow: none;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.container {
	width: min(var(--container), 100% - 2rem);
	margin-inline: auto;
}

.section {
	padding-block: var(--s-8);
}

.section--sky {
	background: var(--alt);
}

.section__intro {
	max-width: 46rem;
	margin-bottom: var(--s-6);
}

.lead {
	font-size: var(--fs-lead);
}

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

.small {
	font-size: var(--fs-small);
}

.grid {
	display: grid;
	gap: var(--s-5);
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

.grid--wide {
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

/* every card the same height, also when they stack on a phone */
.grid--equal {
	grid-auto-rows: 1fr;
}

/* Woven-textile-style divider: decorative, on navy, gold and blue diamonds */
.divider {
	height: 24px;
	background-color: var(--c-ink);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='24' viewBox='0 0 72 24'%3E%3Cpath d='M0 12 9 4 18 12 9 20Z' fill='%23e0ac3f'/%3E%3Cpath d='M18 12 27 4 36 12 27 20Z' fill='%23eaf3fd'/%3E%3Cpath d='M36 12 45 4 54 12 45 20Z' fill='%231f6fc5'/%3E%3Cpath d='M54 12 63 4 72 12 63 20Z' fill='%23e0ac3f'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-position: center;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	min-height: var(--tap);
	padding: var(--s-2) var(--s-5);
	border: 2px solid transparent;
	border-radius: var(--r-pill);
	font: 700 1.05rem / 1.2 var(--font);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.btn:hover {
	text-decoration: none;
}

.btn--primary {
	background: var(--c-blue);
	color: var(--c-white);
}

.btn--primary:hover {
	background: var(--c-blue-dark);
	color: var(--c-white);
}

.btn--secondary {
	background: var(--surface);
	border-color: var(--link);
	color: var(--link);
}

.btn--secondary:hover {
	background: var(--c-blue-dark);
	color: var(--c-white);
}

.btn--sun {
	background: var(--c-sun);
	color: var(--c-ink);
}

.btn--sun:hover {
	background: var(--c-sun-hover);
	color: var(--c-ink);
}

/* On blue or navy backgrounds */
.btn--on-dark {
	background: transparent;
	border-color: var(--c-white);
	color: var(--c-white);
}

.btn--on-dark:hover {
	background: var(--c-white);
	color: var(--c-ink);
}

/* Placeholder for actions that are not built yet (for example "Payment coming soon") */
.btn[aria-disabled="true"] {
	background: var(--alt);
	border: 2px dashed var(--control-border);
	color: var(--text-muted);
	cursor: not-allowed;
}

/* Big rounded donate button, centered in the space left in the Donations card (Support page) */
.donate-form {
	display: flex;
	flex: 1;
	align-items: center;
	margin-top: var(--s-3);
}

.btn--donate {
	width: 100%;
	min-height: 4rem;
	font-size: 1.25rem;
}

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3) var(--s-4);
}

/* --------------------------------------------------------------------------
   Cards, tags, quotes
   -------------------------------------------------------------------------- */
.card {
	display: flex;
	flex-direction: column;
	padding: var(--s-5);
	border: 2px solid var(--border);
	border-radius: var(--r-md);
	background: var(--surface);
}

.card > :last-child {
	margin-bottom: 0;
}

.card__title {
	margin-bottom: var(--s-2);
	font-size: var(--fs-h3);
}

.card--todo {
	border-style: dashed;
	border-color: var(--control-border);
}

/* Small program tag; the program name is always written out, color is never the only clue */
.tag {
	align-self: flex-start;
	display: inline-block;
	margin-bottom: var(--s-3);
	padding: 0.2rem 0.75rem;
	border-radius: var(--r-pill);
	background: var(--c-blue-dark);
	color: var(--c-white);
	font-size: var(--fs-small);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.tag--math { background: var(--c-math); }
.tag--english { background: var(--c-english); }
.tag--languages { background: var(--c-languages); }
.tag--arts { background: var(--c-arts); }
.tag--stem { background: var(--c-stem); }
.tag--neutral { background: var(--surface); color: var(--text); border: 2px solid var(--border); }

/* Small decorative program color mark next to a written program name */
.dot {
	display: inline-block;
	width: 0.75em;
	height: 0.75em;
	margin-right: 0.4em;
	border-radius: 50%;
	background: var(--c-blue);
	vertical-align: 0.05em;
}

.dot--math { background: var(--c-math); }
.dot--english { background: var(--c-english); }
.dot--languages { background: var(--c-languages); }
.dot--arts { background: var(--c-arts); }
.dot--stem { background: var(--c-stem); }

/* Visible marker for content Angela still needs to supply */
.todo {
	display: inline-block;
	padding: 0 0.4rem;
	border-radius: 4px;
	background: var(--c-sun);
	color: var(--c-ink);
	font-size: var(--fs-small);
	font-weight: 700;
}

.quote {
	margin: 0;
	border-top: 6px solid var(--c-blue);
}

.quote blockquote {
	margin: 0 0 var(--s-4);
	font-size: var(--fs-lead);
	line-height: 1.55;
}

.quote__cite {
	margin: 0;
	font-weight: 700;
}

.quote__role {
	display: block;
	color: var(--text-muted);
	font-weight: 400;
}

/* Quiet list of values */
.value-list {
	display: grid;
	gap: var(--s-3) var(--s-6);
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.value-list li {
	padding: var(--s-2) 0 var(--s-2) var(--s-4);
	border-left: 4px solid var(--c-blue);
}

/* --------------------------------------------------------------------------
   Header and navigation
   -------------------------------------------------------------------------- */
.site-header {
	border-bottom: 1px solid var(--border);
	background: var(--surface);
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-3) var(--s-5);
	padding-block: var(--s-3);
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
	color: var(--text);
	font-size: 1.3rem;
	font-weight: 700;
	text-decoration: none;
}

.brand img {
	width: 52px;
}

.site-nav {
	margin-left: auto;
}

.site-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	padding: var(--s-2) var(--s-4);
	border-radius: var(--r-pill);
	color: var(--text);
	font-weight: 700;
	text-decoration: none;
}

.site-nav__link:hover {
	background: var(--alt);
	color: var(--text);
	text-decoration: none;
}

.site-nav__link[aria-current="page"] {
	background: var(--current-bg);
	color: var(--current-text);
}

/* Mobile menu button: only shown when JavaScript is running, so the menu always works without it */
.menu-toggle {
	display: none;
	align-items: center;
	gap: var(--s-2);
	min-height: var(--tap);
	margin-left: auto;
	padding: var(--s-2) var(--s-4);
	border: 2px solid var(--text);
	border-radius: var(--r-pill);
	background: var(--surface);
	color: var(--text);
	font: 700 1rem / 1 var(--font);
	cursor: pointer;
}

.menu-toggle__icon,
.menu-toggle__icon::before,
.menu-toggle__icon::after {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	content: "";
}

.menu-toggle__icon {
	position: relative;
}

.menu-toggle__icon::before {
	position: absolute;
	top: -6px;
}

.menu-toggle__icon::after {
	position: absolute;
	top: 6px;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon {
	background: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before {
	top: 0;
	transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after {
	top: 0;
	transform: rotate(-45deg);
}

@media (max-width: 30em) {
	.brand {
		gap: var(--s-2);
		font-size: 1.1rem;
	}

	.brand img {
		width: 44px;
	}

	.menu-toggle {
		padding-inline: var(--s-3);
	}
}

@media (max-width: 54.99em) {
	.js .menu-toggle {
		display: inline-flex;
	}

	.js .site-nav {
		display: none;
		flex-basis: 100%;
		margin-left: 0;
	}

	.js .site-nav.is-open {
		display: block;
	}

	.js .site-nav__list {
		flex-direction: column;
		padding-bottom: var(--s-3);
	}

	.js .site-nav__link {
		display: flex;
		border-radius: var(--r-sm);
	}
}

/* --------------------------------------------------------------------------
   Footer (navy; gold allowed here for borders only)
   -------------------------------------------------------------------------- */
.site-footer {
	background: var(--footer-bg);
	color: var(--c-white);
}

.site-footer__inner {
	display: grid;
	gap: var(--s-6);
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	padding-block: var(--s-7);
}

.site-footer h2 {
	margin-bottom: var(--s-3);
	padding-bottom: var(--s-2);
	border-bottom: 3px solid var(--c-gold);
	color: var(--c-white);
	font-size: 1.15rem;
}

.site-footer a:not(.btn) {
	display: inline-block;
	padding-block: 0.15rem;   /* keeps every footer link at least 24px tall */
	color: var(--c-white);
}

.site-footer address {
	font-style: normal;
}

.site-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer li + li {
	margin-top: var(--s-2);
}

.site-footer__logo {
	width: 64px;
	margin-bottom: var(--s-3);
}

.site-footer__bottom {
	padding-block: var(--s-4);
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	font-size: var(--fs-small);
}

/* --------------------------------------------------------------------------
   Page sections (hero, prices, donation band)
   -------------------------------------------------------------------------- */
.kicker {
	margin: 0 0 var(--s-2);
	color: var(--link);
	font-size: var(--fs-lead);
	font-weight: 700;
}

.hero {
	background: var(--alt);
}

.hero__inner {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: var(--s-7);
	align-items: center;
	padding-block: var(--s-8);
}

.hero__text p {
	max-width: 38rem;
}

.hero__media {
	margin: 0;
}

/* <picture> wrappers (WebP with JPEG or PNG fallback) behave like the image inside them */
.hero__media picture,
.media__img picture,
.gallery picture {
	display: block;
}

.gallery picture {
	height: 100%;
}

.hero__media img {
	width: 100%;
	height: 22rem;
	object-fit: cover;
	object-position: 52% 40%;
	border-radius: var(--r-lg);
	box-shadow: var(--shadow);
}

@media (max-width: 54.99em) {
	.hero__inner {
		grid-template-columns: 1fr;
		gap: var(--s-6);
		padding-block: var(--s-7);
	}

	.hero__media img {
		height: 15rem;
	}
}

.chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin: 0 0 var(--s-5);
	padding: 0;
	list-style: none;
}

.chip-list li {
	padding: var(--s-2) var(--s-4);
	border: 2px solid var(--border);
	border-radius: var(--r-pill);
	background: var(--surface);
	font-weight: 700;
}

.price {
	margin: 0 0 var(--s-1);
	color: var(--link);
	font-size: 2.75rem;
	font-weight: 700;
	line-height: 1;
}

.footnotes {
	margin: var(--s-5) 0 0;
	padding: 0;
	color: var(--text-muted);
	font-size: var(--fs-small);
	list-style: none;
}

.band--blue {
	background: var(--c-blue);
	color: var(--c-white);
}

.band--blue h2,
.band--blue p,
.band--blue a {
	color: var(--c-white);
}

.support__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-5) var(--s-7);
}

.support__inner > div {
	max-width: 44rem;
}

/* --------------------------------------------------------------------------
   Inner pages: page header, "on this page" links, image beside text, numbered list
   -------------------------------------------------------------------------- */
.page-header {
	padding-block: var(--s-7);
	background: var(--alt);
}

.page-header h1 {
	margin-bottom: var(--s-3);
}

.page-header .lead {
	max-width: 46rem;
	margin-bottom: 0;
}

.jump-nav {
	margin-top: var(--s-5);
}

.jump-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jump-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: var(--s-2) var(--s-4);
	border: 2px solid var(--link);
	border-radius: var(--r-pill);
	background: var(--surface);
	font-weight: 700;
	text-decoration: none;
}

.jump-nav a:hover {
	background: var(--c-blue-dark);
	color: var(--c-white);
}

.media {
	display: grid;
	grid-template-columns: minmax(0, 15rem) 1fr;
	gap: var(--s-6);
	align-items: start;
}

.media__img {
	margin: 0;
}

.media__img img {
	width: 100%;
	max-width: 15rem;   /* the founder photo is only 370px wide; larger would look blurry */
	border-radius: var(--r-md);
}

@media (max-width: 47.99em) {
	.media {
		grid-template-columns: 1fr;
	}
}

.steps {
	display: grid;
	gap: var(--s-5);
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

.steps li {
	counter-increment: step;
	padding: var(--s-5);
	border: 2px solid var(--border);
	border-radius: var(--r-md);
	background: var(--surface);
}

.steps li::before {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: var(--s-3);
	border-radius: 50%;
	background: var(--c-blue-dark);
	color: var(--c-white);
	font-weight: 700;
	content: counter(step);
}

.steps h3 {
	margin-bottom: var(--s-2);
}

.steps p {
	margin: 0;
}

.plain-list {
	margin: 0 0 var(--s-5);
	padding-left: 1.25rem;
}

.plain-list li + li {
	margin-top: var(--s-2);
}

/* --------------------------------------------------------------------------
   Gallery: rows of photos at their natural shape (no zoomed-in crops), and a
   photo viewer built on the native <dialog> element (js/gallery.js)
   -------------------------------------------------------------------------- */
.gallery {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --ar is the photo's width divided by its height, set on each item */
.gallery li {
	flex: calc(var(--ar) * 10) 1 calc(var(--ar) * 15rem);
	height: 15rem;
}

/* keeps the last row from stretching */
.gallery::after {
	flex-grow: 1000;
	content: "";
}

.gallery a {
	display: block;
	height: 100%;
	border-radius: var(--r-sm);
}

.gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--r-sm);
	background: var(--alt);
}

.lightbox {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: var(--s-4);
	border: 0;
	background: var(--c-ink);
	color: var(--c-white);
}

.lightbox::backdrop {
	background: var(--c-ink);
}

.lightbox__inner {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	height: 100%;
	max-width: var(--container);
	margin-inline: auto;
}

.lightbox__bar,
.lightbox__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
}

.lightbox__count {
	margin: 0;
	font-weight: 700;
}

.lightbox__figure {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 0;
	margin: 0;
}

.lightbox__figure img {
	max-width: 100%;
	max-height: 100%;
	min-height: 0;
	object-fit: contain;
	border-radius: var(--r-sm);
}

.lightbox__caption {
	margin: var(--s-3) 0 0;
	text-align: center;
}

body.has-lightbox {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Forms (used by the Contact page)
   -------------------------------------------------------------------------- */
.field {
	margin-bottom: var(--s-5);
}

.field__label {
	display: block;
	margin-bottom: var(--s-1);
	font-weight: 700;
}

.field__hint {
	display: block;
	margin-bottom: var(--s-2);
	color: var(--text-muted);
	font-size: var(--fs-small);
}

.input {
	display: block;
	width: 100%;
	min-height: var(--tap);
	padding: var(--s-2) var(--s-3);
	border: 2px solid var(--control-border);   /* 7.50:1 against white, above the 3:1 for controls */
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--text);
	font: inherit;
}

textarea.input {
	min-height: 9rem;
	resize: vertical;
}

.input[aria-invalid="true"] {
	border-color: var(--error);
	border-width: 3px;
}

.field__error {
	display: block;
	margin-top: var(--s-1);
	color: var(--error);
	font-weight: 700;
}

.form-status {
	margin-bottom: var(--s-5);
	padding: var(--s-4);
	border: 2px solid currentColor;
	border-radius: var(--r-sm);
	font-weight: 700;
}

.form-status--success {
	color: var(--success);
}

.form-status--error {
	color: var(--error);
}

/* Spam trap: moved off screen; in the HTML also give it aria-hidden="true" and tabindex="-1" */
.form-trap {
	position: absolute;
	left: -9999px;
}

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */
.contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: var(--s-7);
	align-items: start;
}

@media (max-width: 54.99em) {
	.contact-grid {
		grid-template-columns: 1fr;
	}
}

.contact-list {
	margin: 0 0 var(--s-5);
	padding: 0;
	list-style: none;
}

.contact-list li + li {
	margin-top: var(--s-2);
}

.contact-list a {
	display: inline-block;
	padding-block: 0.15rem;
}

.contact-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact-actions .btn {
	overflow-wrap: anywhere;
}

address {
	font-style: normal;
}

.map {
	height: 26rem;
	margin-bottom: var(--s-4);
	overflow: hidden;
	border: 2px solid var(--border);
	border-radius: var(--r-md);
}

.map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Browsers give a map from another site no focus style while focus is inside it, so js/contact.js
   adds .is-focused to the frame around it */
.map.is-focused {
	box-shadow: 0 0 0 3px var(--c-white), 0 0 0 6px var(--c-ink);
}

/* --------------------------------------------------------------------------
   Motion: nothing here animates on its own. Hover changes are instant when
   the visitor asks their device for reduced motion.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.btn,
	.site-nav__link {
		transition: background-color 0.15s ease, color 0.15s ease;
	}
}