:root {
	--bg1: #f7f4ed;
	/* --bg1: #f1ebe3; */
	--bg2: #f2e9d6;
	--white: #fff;
	--black: #1a1a1a;
	--muted: #6b6357;
	/* --accent: #d4af37; */
	--accent: #b08d2e;
	/* --accent: #8c6f4b; */
	--border-color: #cfc4b3;
	--font-family: 'Cardo', Georgia, serif;
	--container-padding: 20px;
}

@media (width >= 1200px) {
	:root {
		--container-padding: 40px;
	}
}

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: 100px;
}

body {
	font-family: var(--font-family);
	background-color: var(--white);
	color: var(--black);
	font-size: 16px;
	font-weight: 300;
	line-height: normal;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: inherit;
}

input {
	accent-color: var(--accent);
}

.section {
	position: relative;
	padding-block: clamp(40px, 8vw, 80px);

	&:not(:last-of-type) {
		border-bottom: 1px solid var(--border-color);
	}
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--container-padding);

	@media (width < 768px) {
		max-width: 600px;
	}
}

.section-title {
	font-family: var(--font-family);
	font-weight: 400;
	font-size: clamp(2rem, 4vw, 3.2rem);
	text-align: center;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 24px;
}
.section-title::after {
	content: '';
	display: block;
	width: 60px;
	height: 1px;
	background: var(--accent);
	margin: 1.2rem auto 0;
}

/* HEADER */
.site-header {
	padding: 20px;
	text-align: center;
	background-color: var(--bg1);
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--border-color);

	.site-nav {
		display: flex;
		justify-content: safe center;
		gap: 8px 24px;
		font-size: 0.85rem;
		letter-spacing: 0.25em;
		text-transform: uppercase;
		overflow-x: auto;

		&::-webkit-scrollbar {
			display: none;
		}

		a {
			flex-shrink: 0;
			text-decoration: none;
			color: var(--muted);
			transition: 0.2s;

			&:hover {
				color: var(--black);
			}
		}
	}
}

/* HERO */
.hero-section {
	text-align: center;

	.hero-eyebrow {
		font-family: var(--font-family);
		font-style: italic;
		font-weight: 400;
		font-size: 22px;
		letter-spacing: 0.02em;
		color: var(--accent);
		margin-bottom: 2rem;
	}

	.hero-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem;
		align-items: center;

		figure {
			position: relative;
			overflow: hidden;

			&::before {
				content: '';
				position: absolute;
				inset: 0;
				pointer-events: none;
				/* background-color: rgba(0, 0, 0, 0.8); */
				background-color: rgba(0, 0, 0, 0.3);
				z-index: 1;
			}
		}

		figcaption {
			position: absolute;
			z-index: 2;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
			font-size: 7rem;
			font-weight: 400;
			line-height: 1;
			color: #fff;
			/* text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35); */
		}

		img {
			aspect-ratio: 3/4;
			object-fit: cover;
			width: 100%;
			/* filter: saturate(0.95); */
		}
	}

	@media (width < 768px) {
		.hero-grid {
			grid-template-columns: 1fr;
		}
	}
}

.couple-name {
	margin-top: 30px;
	font-size: clamp(1.4rem, 3vw, 2.4rem);
	letter-spacing: 0.4em;
	font-weight: 500;

	span {
		font-size: 1.25em;
		font-weight: 400;
		letter-spacing: 0;
		color: var(--accent);
	}
}

.location-section {
	.grid {
		gap: 24px 48px;
	}

	.image {
		img {
			aspect-ratio: 4/5;
		}
	}

	@media (width >= 768px) {
		.grid {
			grid-template-columns: 1fr 1fr;
		}
	}

	@media (width < 768px) {
		.image {
			order: -1;
		}
	}
}

.families-section {
	.box {
		background-color: var(--white);
		padding: 30px;
	}

	.section-title {
		font-size: 20px;
		margin-bottom: 5px;

		&::after {
			margin: 1rem auto 0;
		}
	}

	@media (width >= 768px) {
		.grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}
}

/* RSVP */
.rsvp-section {
	.rsvp-deadline {
		text-align: center;
		margin-bottom: 2.5rem;
		color: var(--muted);
		font-size: 1.1rem;

		strong {
			display: block;
			font-size: 1.6rem;
			color: var(--black);
			margin-top: 0.4rem;
			font-weight: 500;
		}
	}
}

/* BUTTONS */
.btn {
	display: inline-block;
	padding: 0.85rem 2.2rem;
	font-size: 0.8rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid var(--black);
	transition: 0.25s;
	font-family: inherit;
}
.btn-black {
	background-color: var(--black);
	color: #fff;

	&:hover {
		background-color: var(--accent);
		border-color: var(--accent);
	}
}
.btn-outline {
	background-color: transparent;
	color: var(--black);

	&:hover {
		background-color: var(--black);
		color: var(--white);
	}
}
.btn-accent {
	border-color: var(--accent);
	background-color: var(--accent);
	color: #fff;

	&:hover {
		background-color: var(--black);
		border-color: var(--black);
	}
}

/* FORMS */
.form {
	max-width: 560px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 1rem;

	.grid {
		gap: 16px 20px;
	}

	.input-wrapper {
		label {
			display: block;
			margin-bottom: 5px;
		}
	}

	input,
	textarea,
	select {
		width: 100%;
		padding: 12px 16px;
		border: 1px solid var(--border-color);
		background-color: var(--white);
		font-family: inherit;
		font-size: 16px;
		color: var(--black);

		&:focus {
			outline: none;
			border-color: var(--accent);
		}
	}

	input,
	textarea {
		&::placeholder {
			color: #6b6357;
			/* opacity: 0.7; */
		}
	}

	fieldset {
		padding: 8px 16px;
		background-color: var(--white);
		border-color: var(--border-color);
		border-width: 1px;

		input {
			width: unset;
			padding: unset;
		}
	}
}

@keyframes countdown_fade_desktop {
	0% {
		opacity: 0;
		transform: translate(0, 100px);
	}
	100% {
		opacity: 1;
		transform: translate(0, 0);
	}
}

@keyframes countdown_fade_mobile {
	0% {
		opacity: 0;
		transform: translate(-50%, 100px) scale(0.8);
	}
	100% {
		opacity: 1;
		transform: translate(-50%, 0) scale(0.8);
	}
}

/* COUNTDOWN */
.countdown-wrapper {
	position: fixed;
	bottom: 30px;
	right: 30px;
	background: var(--white);
	padding: 0.8rem 1.2rem;
	border: 1px solid var(--border-color);
	border-radius: 20px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	z-index: 100;

	@media (width >= 576px) {
		animation: countdown_fade_desktop 1s both 1.5s;
	}

	@media (width < 576px) {
		right: unset;
		left: 50%;
		transform: translateX(-50%) scale(0.8);
		bottom: 15px;
		animation: countdown_fade_mobile 1s both 1.5s;
	}
}
.countdown {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 0.6rem;
	color: var(--black);
	font-weight: 400;
}
.countdown > div {
	min-width: 70px;
	text-align: center;
}
.countdown .num {
	font-size: 24px;
	display: block;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.countdown small {
	display: block;
	font-size: 12px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--muted);
	margin-top: 0.4rem;
}
.countdown .sep {
	font-size: 2rem;
	color: var(--accent);
	align-self: flex-start;
	margin-top: 0.1rem;
}

/* FOOTER */
.site-footer {
	padding: 20px var(--container-padding);
	text-align: center;
	background-color: var(--black);
	color: var(--white);
	font-size: 0.85rem;

	a {
		color: var(--accent);
		text-decoration: none;
	}
}

.html-content {
	b,
	strong {
		font-weight: 700;
	}

	* {
		&:not(:last-child) {
			margin-bottom: 1.25rem;
		}

		&:last-child {
			margin-bottom: 0;
		}
	}
}

/* utilities */
.text-center {
	text-align: center;
}

.hidden {
	display: none;
}

.bg1 {
	background-color: var(--bg1);
}
.bg2 {
	background-color: var(--bg2);
}
.bg-white {
	background-color: var(--white);
}

.block {
	display: block;
}

.grid {
	display: grid;
}

.grid-cols-2 {
	@media (width >= 1020px) {
		grid-template-columns: repeat(2, 1fr);
	}
}

.flex {
	display: flex;
}

.flex-col {
	flex-direction: column;
}

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

.justify-center {
	justify-content: center;
}

.gap-1 {
	gap: 4px;
}
.gap-2 {
	gap: 8px;
}
.gap-3 {
	gap: 12px;
}
.gap-4 {
	gap: 16px;
}
.gap-5 {
	gap: 20px;
}
.gap-6 {
	gap: 24px;
}
.gap-7 {
	gap: 28px;
}
.gap-8 {
	gap: 32px;
}

.mt-1 {
	margin-top: 4px;
}
.mt-2 {
	margin-top: 8px;
}
.mt-3 {
	margin-top: 12px;
}
.mt-4 {
	margin-top: 16px;
}
.mt-5 {
	margin-top: 20px;
}
.mt-6 {
	margin-top: 24px;
}
.mt-7 {
	margin-top: 28px;
}
.mt-8 {
	margin-top: 32px;
}
.mb-1 {
	margin-bottom: 4px;
}
.mb-2 {
	margin-bottom: 8px;
}
.mb-3 {
	margin-bottom: 12px;
}
.mb-4 {
	margin-bottom: 16px;
}
.mb-5 {
	margin-bottom: 20px;
}
.mb-6 {
	margin-bottom: 24px;
}
.mb-7 {
	margin-bottom: 28px;
}
.mb-8 {
	margin-bottom: 32px;
}

.image {
	img {
		width: 100%;
		height: auto;
		object-fit: cover;
	}
}

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

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