/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-block-start: 24px;
}

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

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	overflow-x: clip;
}

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

h1, h2, h3, h4 { margin: 0; line-height: 1.15; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
figure, blockquote { margin: 0; }

a { color: var(--ink); text-underline-offset: 0.18em; }
a:hover { color: var(--wood-dark); }

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

:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
	border-radius: var(--radius);
}
.on-dark :focus-visible, .process :focus-visible, .statement :focus-visible { outline-color: var(--amber); }

::selection { background: var(--amber); color: var(--ink); }

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

.skip-link {
	position: absolute;
	inset-inline-start: 16px;
	inset-block-start: -80px;
	z-index: 100;
	background: var(--ink);
	color: var(--cream);
	padding: 12px 18px;
	border-radius: var(--radius);
	text-decoration: none;
}
.skip-link:focus { inset-block-start: 16px; color: var(--cream); }

main:focus { outline: none; }

/* Display type */
.section-title,
.page-hero__title,
.process__title,
.statement__text,
.hero__title {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: var(--lh-display);
	letter-spacing: -0.3px;
}

/* Wood grain highlight – one per heading at most (DESIGN.md) */
.grain {
	color: var(--wood);
	background-image: linear-gradient(105deg, transparent 42%, rgba(255, 226, 170, .42) 50%, transparent 58%), var(--grain);
	background-size: 260% 100%, 180px 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Long-form text (service content, guides, legal) */
.prose { max-width: 68ch; }
.prose > * + * { margin-block-start: 1em; }
.prose h2 { font-size: var(--fs-m); font-family: var(--font-display); line-height: 1; margin-block-start: 1.4em; }
.prose h3 { font-size: 1.25em; margin-block-start: 1.2em; }
.prose ul, .prose ol { padding-inline-start: 1.2em; }
.prose li + li { margin-block-start: .35em; }
.prose a { color: var(--wood-dark); text-decoration: underline; }
.prose img { border-radius: var(--radius); }
.prose blockquote { border-inline-start: 4px solid var(--wood); padding-inline-start: 1em; color: var(--text-2); }
.prose--wide { max-width: 75ch; }

/* Classic editor output (images, captions, alignment) */
.prose .alignright { float: right; margin: .3em 0 1em 1.5em; }
.prose .alignleft { float: left; margin: .3em 1.5em 1em 0; }
.prose .aligncenter { display: block; margin-inline: auto; }
.prose .wp-caption { max-width: 100%; }
.prose .wp-caption-text { font-size: 14px; color: var(--muted); margin-block-start: 6px; }
.prose::after { content: ""; display: table; clear: both; }
@media (max-width: 600px) { .prose .alignright, .prose .alignleft { float: none; margin: 1em 0; } }