/* Base Styles - Match Static Design Typography */

:root {
	--white: #FFFFFF;
	--paper: #F5F3F0;
	--ink: #161513;
	--body: #5F5B55;
	--faint: #9B968E;
	--line: rgba(22, 21, 19, 0.14);
	--navy: #3A4C7A;
	--serif: "Poppins", Arial, sans-serif;
	--sans: "Poppins", Arial, sans-serif;
	--blush: #F7D6DE;
	--gold: #9C7715;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-size: 16px;
}

body {
	font-family: var(--sans);
	color: var(--body);
	line-height: 1.6;
	background: #fff;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

button {
	cursor: pointer;
	border: none;
	background: none;
	font: inherit;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--serif);
	font-weight: 400;
	line-height: 1.2;
	margin: 0;
}

/* Headings */
h1 {
	font-size: clamp(27px, 2.45vw, 42px);
	letter-spacing: -0.035em;
}

h2 {
	font-size: clamp(22px, 2vw, 36px);
	letter-spacing: -0.025em;
}

h3 {
	font-size: 18px;
	letter-spacing: -0.015em;
}

/* Body text */
p {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--body);
}

small {
	font-size: 14px;
	color: var(--faint);
}

/* Focus states */
:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
}

:where(a, button, input):focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
}

/* Tablet — max-width 940px */
@media (max-width: 940px) {
	.wrap {
		padding: 0 22px;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Utility classes */
.wrap {
	max-width: 1800px;
	margin: 0 auto;
	padding: 0 clamp(24px, 4vw, 72px);
}

.text-center {
	text-align: center;
}

.text-uppercase {
	text-transform: uppercase;
}

.text-muted {
	color: var(--faint);
}

.text-dark {
	color: var(--ink);
}