/* ==========================================================================
   Reset
   ========================================================================== */

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

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

ul, ol {
	list-style: none;
	padding: 0;
}

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

a {
	color: inherit;
}


/* ==========================================================================
   Custom Properties
   All sizing in rem so browser / accessibility font-size changes apply.
   clamp() gives fluid scaling: clamp(min, preferred, max).
   ========================================================================== */

:root {
	/* --- Spacing (used for gutters / section padding) --- */
	--ut-gutter: clamp(1.25rem, 3vw, 3.5rem);

	/* --- Body text --- */
	--ut-text-size: clamp(1rem, 0.5vw + 0.875rem, 1.25rem);
	--ut-text-line-height: 1.6;
	--ut-text-max-width: 72ch;

	/* --- Heading 1 — hero / display --- */
	--ut-h1-size: clamp(2.5rem, 4vw, 5rem);
	--ut-h1-line-height: 1.05;
	--ut-h1-weight: 400;

	/* --- Heading 2 — section titles --- */
	--ut-h2-size: clamp(1.75rem, 3vw + 0.5rem, 3.5rem);
	--ut-h2-line-height: 1.15;
	--ut-h2-weight: 400;

	/* --- Heading 3 — sub-headings --- */
	--ut-h3-size: clamp(1.25rem, 1.5vw + 0.5rem, 2rem);
	--ut-h3-line-height: 1.25;
	--ut-h3-weight: 400;

	/* --- Header --- */
	--ut-header-padding-y: clamp(1.15rem, 2.4vw, 2.25rem);
	--ut-header-padding-x: var(--ut-gutter);
	--ut-header-logo-height: clamp(0.75rem, 1vw + 0.5rem, 1.5rem);
	--ut-header-nav-size: clamp(1rem, 1vw + 0.625rem, 2rem);
	--ut-header-nav-gap: clamp(1.25rem, 2.8vw, 4rem);

	/* --- Section spacing --- */
	--ut-space-sm: clamp(1.5rem, 3vw, 3rem);
	--ut-space-md: clamp(2rem, 4vw, 4rem);
	--ut-space-lg: clamp(2.5rem, 5vw, 5rem);
	--ut-space-xs: clamp(1rem, 2vw, 2rem);
	--ut-caption-size: clamp(0.6875rem, 0.4vw + 0.5rem, 0.8125rem);
	--ut-display-size: clamp(2rem, 3vw, 8rem);

	/* --- Easing --- */
	--ut-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--ut-ease-out-smooth: cubic-bezier(0.22, 1, 0.36, 1);
	--ut-ease-out-spring: cubic-bezier(0.2, 1, 0.3, 1);
}

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

body {
	font-family: var(--wp--preset--font-family--makira);
	font-size: var(--ut-text-size);
	line-height: var(--ut-text-line-height);
	color: var(--wp--preset--color--foreground);
	background-color: var(--wp--preset--color--warm);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
	font-family: var(--wp--preset--font-family--pp-woodland);
	margin-top: 0;
}

h1 {
	font-size: var(--ut-h1-size);
	line-height: var(--ut-h1-line-height);
	font-weight: var(--ut-h1-weight);
}

h2 {
	font-size: var(--ut-h2-size);
	line-height: var(--ut-h2-line-height);
	font-weight: var(--ut-h2-weight);
}

h3 {
	font-size: var(--ut-h3-size);
	line-height: var(--ut-h3-line-height);
	font-weight: var(--ut-h3-weight);
}

p {
	max-width: var(--ut-text-max-width);
}

/* --- Font family utilities --- */

.ut-font-serif {
	font-family: var(--wp--preset--font-family--pp-woodland);
}

.ut-font-sans {
	font-family: var(--wp--preset--font-family--makira);
}

/* --- Grain overlay utility --- */

.ut-grain {
	position: relative;
	isolation: isolate;
}

.ut-grain > * {
	position: relative;
	z-index: 1;
}

.ut-grain::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
	background-size: 320px;
	opacity: .75;
	pointer-events: none;
	mix-blend-mode: luminosity;
}

/* --- Size utilities (independent of font) --- */

.ut-text-h1 {
	font-size: var(--ut-h1-size);
	line-height: var(--ut-h1-line-height);
	font-weight: var(--ut-h1-weight);
}

.ut-text-h2 {
	font-size: var(--ut-h2-size);
	line-height: var(--ut-h2-line-height);
	font-weight: var(--ut-h2-weight);
}

.ut-text-h3 {
	font-size: var(--ut-h3-size);
	line-height: var(--ut-h3-line-height);
	font-weight: var(--ut-h3-weight);
}

.ut-text-body {
	font-size: var(--ut-text-size);
	line-height: var(--ut-text-line-height);
}

/* ==========================================================================
   Containers
   ========================================================================== */

.ut-container--full-width {
	width: 100%;
	padding-left: var(--ut-gutter);
	padding-right: var(--ut-gutter);
}

.ut-container {
		max-width: none;
	max-width: 100rem; /* 1600px */
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ut-gutter);
	padding-right: var(--ut-gutter);
}

.ut-container--narrow {
	width: 100%;
	max-width: 75rem; /* 1200px */
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ut-gutter);
	padding-right: var(--ut-gutter);
}