/* ==========================================================================
   base.css — fonts, reset, typography, layout primitives
   ========================================================================== */
@font-face { font-family: "Clash Display"; src: url("../fonts/ClashDisplay-Regular.woff2") format("woff2");  font-weight: 400; font-display: swap; }
@font-face { font-family: "Clash Display"; src: url("../fonts/ClashDisplay-Medium.woff2") format("woff2");   font-weight: 500; font-display: swap; }
@font-face { font-family: "Clash Display"; src: url("../fonts/ClashDisplay-Semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Clash Display"; src: url("../fonts/ClashDisplay-Bold.woff2") format("woff2");     font-weight: 700; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/Lato-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/Lato-Bold.woff2") format("woff2");    font-weight: 700; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
	margin: 0;
	font-family: var(--f-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-ink);
	background: var(--c-surface);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 500; line-height: var(--lh-head); margin: 0; letter-spacing: .001em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
b, strong { font-weight: 700; }
small { font-size: var(--fs-small); }

:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -9999px; top: 1rem; background: var(--c-ink); color: #fff; padding: .5rem 1rem; z-index: 999; }
.skip:focus { left: 1rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
.section { padding-block: var(--section-pad); }
.section--tight { padding-top: 0; }
.site-main { display: block; }

/* Placeholder block for empty image/video fields */
.wz-ph {
	display: grid; place-items: center; width: 100%; height: 100%; min-height: 120px;
	background: repeating-linear-gradient(135deg, rgba(47,47,47,.06) 0 12px, transparent 12px 24px), var(--c-tint);
	color: var(--c-brand); font-family: var(--f-display); font-size: 1rem; text-align: center; padding: 1rem; border-radius: inherit;
}

/* Prose (page + post content) */
.prose > * + * { margin-top: 1.25em; }
.prose h2 { font-size: var(--fs-h3); margin-top: 2em; }
.prose h3 { font-size: var(--fs-card); margin-top: 1.6em; }
.prose p, .prose li { font-size: var(--fs-body-l); line-height: 1.55; }
.prose ul { list-style: disc; padding-left: 1.4em; }
.prose ol { list-style: decimal; padding-left: 1.4em; }
.prose a { color: var(--c-brand); text-decoration: underline; text-underline-offset: .2em; }
.prose img { border-radius: var(--r-md); }
.prose blockquote { border-left: 4px solid var(--c-brand); padding-left: 1.25rem; font-family: var(--f-display); font-size: var(--fs-card); }
.prose pre { background: var(--c-ink); color: #fff; padding: 1.25rem; border-radius: var(--r-sm); overflow: auto; }