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

.hero-visual {
	padding: 1.4rem 0 0;
	overflow: hidden;
}

.hero-frame {
	position: relative;
	width: min(calc(100% - 3.4rem), 22rem);
	aspect-ratio: 0.74;
	margin: 0 auto;
	padding: clamp(0.6rem, 2.4vw, 1.6rem);
	background:
		linear-gradient(#fbfaf7, #ede9e0) padding-box,
		linear-gradient(135deg, #fff, #d8d0c0, #fff) border-box;
	border: clamp(0.35rem, 1vw, 0.7rem) solid transparent;
	box-shadow:
		inset 0 0 0 1px rgba(61, 59, 55, 0.12),
		0 1rem 2.8rem rgba(61, 59, 55, 0.12);
}

.hero-frame::before {
	content: "";
	position: absolute;
	inset: clamp(0.55rem, 2vw, 1.4rem);
	border: 1px solid rgba(61, 59, 55, 0.18);
	box-shadow: inset 0 0 0 0.35rem rgba(255, 255, 255, 0.45);
	pointer-events: none;
}

.hero-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
	filter: saturate(0.88) contrast(0.96);
}

.hero-content {
	width: min(calc(100% - 2rem), 46rem);
	padding: 2.2rem 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.hero-content .eyebrow {
	padding-bottom: 1rem;
}

.hero-content h1 {
	font-family: var(--font-script);
	font-size: clamp(3.65rem, 13vw, 7.25rem);
	font-weight: 400;
	line-height: 0.9;
	white-space: nowrap;
}

.hero-date {
	font-size: clamp(1.15rem, 5vw, 2.35rem);
	letter-spacing: clamp(0.3rem, 1.5vw, 0.72rem);
	text-transform: uppercase;
}

.countdown {
	display: flex;
	justify-content: center;
	flex-wrap: nowrap;
	gap: clamp(0.35rem, 2.6vw, 1.4rem);
	margin-top: 0.5rem;
	color: var(--color-soft-ink);
	white-space: nowrap;
}

.countdown div {
	display: flex;
	gap: clamp(0.18rem, 0.8vw, 0.35rem);
	align-items: baseline;
	font-size: clamp(0.62rem, 2.35vw, 0.85rem);
	letter-spacing: clamp(0.04em, 0.9vw, 0.12em);
	text-transform: uppercase;
}

.countdown strong {
	color: var(--color-ink);
	font-size: clamp(0.74rem, 2.7vw, 1rem);
}

@media (min-width: 48rem) {
	.hero-visual {
		padding-top: 1.8rem;
	}

	.hero-frame {
		width: min(calc(100% - 4rem), 25rem);
	}
}

@media (max-width: 34rem) {
	.hero-frame {
		width: min(calc(100% - 3.2rem), 20rem);
		aspect-ratio: 0.73;
	}

	.hero-image {
		object-position: center 42%;
	}
}