:root {
	--color-bg: #f6efe4;          /* oatmeal */
	--color-surface: #fbf7f0;     /* cream: header, alternate sections */
	--color-text: #3b2a20;        /* warm dark brown: 11.95 on bg */
	--color-text-muted: #6b5546;  /* 6.10 on bg */
	--color-accent: #6e3b5c;      /* plum (echoes the headshot): 7.53 on bg */
	--color-accent-hover: #552c47;/* 10.01 on bg */
	--color-secondary: #55654a;   /* deep sage, text-safe: 5.49 on bg */
	--color-secondary-soft: #e4e8da; /* pale sage band; text on it 10.96 */
	--color-border: #e2d6c6;
	--font-heading: "Gentium Book Plus", Georgia, "Times New Roman", serif;
	--font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
	--measure: 40rem;
	--wide: 64rem;
	--space: 1.5rem;
	--radius: 0.75rem;
}

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

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 1.125rem;
	line-height: 1.65;
}

h1, h2, h3 {
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-text);
}

h1 {
	font-size: clamp(2rem, 5vw, 3rem);
}

h2 {
	font-size: clamp(1.5rem, 3.5vw, 2.125rem);
}

a {
	color: var(--color-accent);
	text-underline-offset: 0.15em;
}

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

:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 2px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--color-surface);
	color: var(--color-text);
	padding: 0.75rem 1.25rem;
	z-index: 100;
}

.skip-link:focus {
	left: 0;
	top: 0;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
}

/* Soft shadow once the page is scrolled; browsers without scroll-driven animations show none. */
@supports (animation-timeline: scroll()) {
	.site-header {
		animation: site-header-shadow linear both;
		animation-timeline: scroll(root);
		animation-range: 0 4rem;
	}

	@keyframes site-header-shadow {
		to {
			box-shadow: 0 2px 12px rgb(59 42 32 / 0.12);
		}
	}
}

.site-header__inner {
	max-width: var(--wide);
	margin: 0 auto;
	padding: 1rem var(--space);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
}

.site-name {
	font-family: var(--font-heading);
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--color-text);
	text-decoration: none;
}

.site-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
}

.site-nav a {
	color: var(--color-text);
	text-decoration: none;
}

.site-nav a:hover,
.site-nav a:focus-visible {
	color: var(--color-accent);
	text-decoration: underline;
}

.site-nav__toggle {
	display: none;
}

.section {
	padding: calc(var(--space) * 2.5) var(--space);
}

.section > * {
	max-width: var(--measure);
	margin-left: auto;
	margin-right: auto;
}

/* Keep anchor targets and the skip-link target clear of the pinned header. */
main,
.section {
	scroll-margin-top: 5rem;
}

.office-gallery {
	max-width: var(--wide);
	display: grid;
	gap: var(--space);
	margin-top: var(--space);
}

.office-gallery picture,
.office-gallery img {
	display: block;
	width: 100%;
}

.office-gallery img {
	height: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.office-gallery > :first-child img {
	aspect-ratio: 3 / 2;
}

@media (min-width: 40rem) {
	.office-gallery {
		grid-template-columns: 1fr 1fr;
	}

	.office-gallery > :first-child {
		grid-column: 1 / -1;
	}
}

.section:nth-of-type(even) {
	background: var(--color-secondary-soft);
}

.hero__lede {
	font-size: 1.25rem;
	color: var(--color-text-muted);
}

.button {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	border-radius: var(--radius);
	background: var(--color-accent);
	color: var(--color-surface);
	font-weight: 600;
	text-decoration: none;
}

.button:hover,
.button:focus-visible {
	background: var(--color-accent-hover);
	color: var(--color-surface);
}

.contact-form {
	margin-top: calc(var(--space) * 1.5);
}

.contact-form label,
.contact-form legend {
	display: block;
	margin-top: 1rem;
	font-weight: 600;
}

.contact-form fieldset {
	border: 0;
	margin: 1rem 0 0;
	padding: 0;
}

.contact-form fieldset legend {
	margin-top: 0;
	padding: 0; /* Firefox pads legends, which pushed this one right of the other labels */
}

.contact-form fieldset label {
	margin-top: 0.5rem;
}

.contact-form fieldset label,
.contact-form .contact-form__check {
	font-weight: 400;
}

/* Browser-default radios and checkboxes are tiny in Firefox; size them to the text. */
.contact-form input[type="radio"],
.contact-form input[type="checkbox"] {
	width: 1.15em;
	height: 1.15em;
	margin: 0 0.5em 0 0;
	vertical-align: -0.125em;
	accent-color: var(--color-accent);
}

.contact-form input[type="text"],
.contact-form select {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin-top: 0.35rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--color-text-muted);
	border-radius: var(--radius);
	background: var(--color-surface);
	color: var(--color-text);
	font: inherit;
}

.contact-form button {
	margin-top: 1.5rem;
	border: 0;
	font: inherit;
	font-weight: 600;
}

.contact-form button:disabled {
	background: var(--color-border);
	color: var(--color-text-muted);
	cursor: not-allowed;
}

.headshot {
	max-width: 18rem;
	margin: 0 auto calc(var(--space) * 1.5);
}

.headshot img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius);
}

.site-footer {
	border-top: 1px solid var(--color-border);
	color: var(--color-text-muted);
	text-align: center;
	padding: 2rem var(--space);
	font-size: 0.95rem;
}

@media (max-width: 40rem) {
	:root {
		--space: 1rem;
	}

	body {
		font-size: 1.0625rem;
	}

	/* Keep the toggle on the site name's row when it is showing (JS enabled): a second row
	   would make the pinned header taller than the fragment scroll offset above accounts
	   for. The site name scales down with the viewport and, where it still doesn't fit
	   beside the toggle, wraps onto two short lines inside its own box rather than being
	   truncated, keeping the header under 5rem down to 320px. Scoped to the toggle's
	   visible state so the no-JS fallback, where the full nav list wraps under the site
	   name, is unaffected. */
	.site-header__inner:has(.site-nav__toggle:not([hidden])) {
		flex-wrap: nowrap;
		align-items: center;
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
	}

	.site-header__inner:has(.site-nav__toggle:not([hidden])) .site-name {
		flex: 1 1 auto;
		min-width: 0;
		font-size: clamp(1.125rem, 0.75rem + 2.5vw, 1.375rem);
		line-height: 1.2;
		text-wrap: balance;
	}

	.site-header__inner:has(.site-nav__toggle:not([hidden])) .site-nav {
		flex: 0 0 auto;
	}

	/* Toggle is only ever shown by the inline script in base.njk; without JS it keeps `hidden`
	   and the list below stays visible. */
	.site-nav__toggle:not([hidden]) {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		padding: 0.35rem 0.75rem;
		border: 1px solid var(--color-border);
		border-radius: var(--radius);
		background: none;
		color: var(--color-text);
		font: inherit;
		font-weight: 600;
		cursor: pointer;
	}

	.site-nav__toggle:hover,
	.site-nav__toggle:focus-visible {
		color: var(--color-accent);
		border-color: var(--color-accent);
	}

	.site-nav__toggle:not([hidden]) + ul {
		display: none;
	}

	.site-nav__toggle[aria-expanded="true"] + ul {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		padding: var(--space);
		background: var(--color-surface);
		border-bottom: 1px solid var(--color-border);
		box-shadow: 0 8px 16px rgb(59 42 32 / 0.12);
	}
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}