/**
 * base.css — reset, elements, typography and layout primitives.
 * No component or section styling belongs in this file.
 */

/* ----------------------------------------------------------------------
 * Reset
 * ------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	overflow-x: clip;
}

/* Lenis drives scrolling when it is active; let it own the behaviour. */
html.lenis,
html.lenis body {
	height: auto;
}

html.lenis {
	scroll-behavior: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text-body);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: var(--fw-regular);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.is-locked {
	overflow: hidden;
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
	margin: 0;
}

ul[class],
ol[class] {
	margin: 0;
	padding: 0;
	list-style: none;
}

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

img {
	height: auto;
	border: 0;
}

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

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

table {
	width: 100%;
	border-collapse: collapse;
}

hr {
	height: 0;
	margin: var(--space-9) 0;
	border: 0;
	border-top: var(--border-w) solid var(--border);
}

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

/* ----------------------------------------------------------------------
 * Typography
 * ------------------------------------------------------------------- */

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

h1, .h1 {
	font-size: var(--fs-h1);
	font-weight: var(--fw-bold);
	line-height: var(--lh-display);
	letter-spacing: var(--ls-display);
}

.display {
	font-family: var(--font-display);
	font-size: var(--fs-display);
	font-weight: var(--fw-bold);
	line-height: var(--lh-display);
	letter-spacing: var(--ls-display);
	color: var(--deep-teal);
}

h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-subheading); }
h4, .h4 { font-size: var(--fs-h4); line-height: var(--lh-subheading); color: var(--text-heading-alt); }
h5, .h5 { font-size: var(--fs-h5); line-height: var(--lh-subheading); color: var(--text-heading-alt); }
h6      { font-size: var(--fs-body); text-transform: uppercase; letter-spacing: var(--ls-label); }

p {
	text-wrap: pretty;
}

.lead {
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
	color: var(--text);
}

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

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

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

.on-dark,
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark h5 {
	color: var(--text-on-dark);
}

.on-dark p,
.on-dark .lead {
	color: var(--text-on-dark-soft);
}

a {
	color: var(--link);
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	transition: color var(--dur-fast) var(--ease-out);
}

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

strong, b {
	font-weight: var(--fw-bold);
}

/* Prose — only inside editor content, never applied to designed sections. */

.prose > * + * {
	margin-top: var(--space-6);
}

.prose h2 { margin-top: var(--space-11); }
.prose h3 { margin-top: var(--space-9); }

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

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

.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }

.prose blockquote {
	padding: var(--space-6) var(--space-7);
	border-left: 3px solid var(--ochre);
	background: var(--ochre-100);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
	color: var(--ink);
}

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

.prose figcaption {
	margin-top: var(--space-3);
	font-size: var(--fs-xs);
	color: var(--text-muted);
}

/* ----------------------------------------------------------------------
 * Layout primitives
 * ------------------------------------------------------------------- */

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

.container--narrow {
	width: min(var(--container-narrow), 100% - var(--gutter) * 2);
}

.container--text {
	width: min(var(--container-text), 100% - var(--gutter) * 2);
}

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

.section--sm { padding-block: var(--section-y-sm); }
.section--lg { padding-block: var(--section-y-lg); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

.section--cream { background: var(--bg-alt); }
.section--teal  { background: var(--bg-dark); color: var(--text-on-dark); }
.section--tint  { background: var(--bg-tint); }

.grid {
	display: grid;
	gap: var(--gap-grid);
}

.grid--2 { grid-template-columns: var(--grid-2); }
.grid--3 { grid-template-columns: var(--grid-3); }
.grid--4 { grid-template-columns: var(--grid-4); }

.stack > * + * {
	margin-top: var(--space-5);
}

.cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gap-inline);
}

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

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

.skip-link {
	position: absolute;
	top: -100px;
	left: var(--space-4);
	z-index: var(--z-toast);
	padding: var(--space-3) var(--space-5);
	background: var(--deep-teal);
	color: var(--white);
	font-weight: var(--fw-medium);
	text-decoration: none;
	transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
	top: var(--space-4);
	color: var(--white);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ----------------------------------------------------------------------
 * WordPress core classes
 * ------------------------------------------------------------------- */

.alignleft {
	float: left;
	margin: 0 var(--space-6) var(--space-4) 0;
}

.alignright {
	float: right;
	margin: 0 0 var(--space-4) var(--space-6);
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.alignwide {
	width: min(var(--container-narrow), 100%);
	margin-inline: auto;
}

.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text,
.gallery-caption {
	margin-top: var(--space-3);
	font-size: var(--fs-xs);
	color: var(--text-muted);
}

.sticky,
.bypostauthor {
	display: block;
}

/* ----------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------- */

@media (max-width: 900px) {
	.grid--3,
	.grid--4 {
		grid-template-columns: var(--grid-2);
	}
}

@media (max-width: 600px) {
	.grid--2,
	.grid--3,
	.grid--4 {
		grid-template-columns: 1fr;
	}

	.alignleft,
	.alignright {
		float: none;
		margin: 0 0 var(--space-4);
	}
}