:root {
	--color-cream: #f7f1e7;
	--color-white: #fffdf9;
	--color-sage: #98a28d;
	--color-olive: #465443;
	--color-olive-dark: #344033;
	--color-copper: #a77b46;
	--color-charcoal: #292a27;
	--color-border: #e4dacb;
	--shadow: 0 24px 70px rgba(41, 42, 39, 0.10);
}

body {
	background:
		radial-gradient(circle at 10% 0%, rgba(167, 123, 70, .06), transparent 28rem),
		linear-gradient(180deg, #fffdf9 0%, var(--color-cream) 100%);
	font-family: "Source Sans 3", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
select,
textarea,
.button,
.primary-menu,
.footer-menu {
	font-family: "Source Sans 3", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.site-title,
.hero h1,
.section-heading h2,
.about-copy h2,
.newsletter-panel h2,
.recipe-card__title,
.category-card__name,
.archive-hero h1,
.archive-header h1,
.recipe-hero h1,
.page-hero h1,
.footer-logo {
	font-family: "Cormorant Garamond", Georgia, serif;
}

.site-header {
	background: rgba(255, 253, 249, .92);
	border-bottom-color: rgba(228, 218, 203, .72);
}

.site-branding {
	width: min(270px, 42vw);
	min-width: 190px;
}

.site-branding picture {
	display: block;
	line-height: 0;
}

.site-branding__mark {
	display: block;
	width: 100%;
	height: auto;
}

.hero {
	position: relative;
	overflow: hidden;
}

.hero::before {
	content: "";
	position: absolute;
	inset: 8% auto auto -8%;
	width: 330px;
	height: 330px;
	border: 1px solid rgba(167, 123, 70, .18);
	border-radius: 50%;
	pointer-events: none;
}

.hero h1 {
	max-width: 780px;
	font-size: clamp(3.2rem, 7vw, 6.8rem);
	letter-spacing: -.035em;
}

.hero-copy {
	max-width: 610px;
	color: #4f594f;
}

.hero-media,
.about-portrait,
.recipe-card,
.category-card,
.newsletter-panel {
	box-shadow: var(--shadow);
}

.hero-media {
	position: relative;
	isolation: isolate;
	min-height: 640px;
	padding: 0;
	border: 10px solid rgba(255, 255, 255, .65);
	background: #ede4d7;
}

.hero-media img {
	width: 100%;
	height: 100%;
	min-height: 620px;
	object-fit: cover;
	object-position: center 45%;
}

.hero-media__placeholder {
	display: grid;
	place-items: center;
	min-height: 620px;
	padding: 30px;
	text-align: center;
}

.hero-media::after {
	content: "";
	position: absolute;
	inset: auto -26px -26px auto;
	width: 52%;
	height: 52%;
	border-right: 2px solid rgba(167, 123, 70, .5);
	border-bottom: 2px solid rgba(167, 123, 70, .5);
	border-radius: 0 0 28px 0;
	z-index: -1;
}

.button {
	border-radius: 5px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.button-primary,
.newsletter-button {
	background: var(--color-olive-dark);
	border-color: var(--color-olive-dark);
}

.recipe-card {
	border-radius: 10px;
}

.recipe-card__media {
	aspect-ratio: 4 / 5;
}

.category-card {
	border-radius: 8px;
}

.home-newsletter .newsletter-panel {
	background: linear-gradient(135deg, var(--color-olive), var(--color-olive-dark));
}

.about-grid--compact {
	grid-template-columns: minmax(0, 1fr) minmax(150px, 260px);
}

.about-portrait--small {
	min-height: 0;
	width: min(100%, 220px);
	justify-self: end;
	padding: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .78);
}

.about-portrait--small img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
}

.site-footer {
	background: var(--color-olive-dark);
}

.footer-logo {
	font-size: clamp(1.7rem, 3vw, 2.6rem);
}

.footer-domain {
	opacity: .65;
	font-size: .82rem;
}

:focus-visible {
	outline: 3px solid var(--color-copper);
	outline-offset: 4px;
}

::selection {
	background: rgba(167, 123, 70, .28);
}

@media (max-width: 900px) {
	.site-branding { width: 210px; }
	.hero h1 { font-size: clamp(2.8rem, 11vw, 4.8rem); }
	.hero-media,
	.hero-media img,
	.hero-media__placeholder { min-height: 520px; }
	.about-grid--compact { grid-template-columns: 1fr; }
	.about-portrait--small { justify-self: start; width: 165px; }
}

@media (max-width: 620px) {
	.site-branding {
		width: 142px;
		min-width: 142px;
	}

	.header-inner {
		gap: 12px;
	}

	.hero::before { display: none; }
	.hero-media,
	.hero-media img,
	.hero-media__placeholder { min-height: 430px; }
	.about-portrait--small { width: 130px; }
}