:root {
	color-scheme: light;
	--ink: #35242c;
	--muted: #806e73;
	--pink: #ef8fa7;
	--cream: #fff8ed;
	--mint: #b9dfc9;
}
* { box-sizing: border-box; }
body {
	min-height: 100vh;
	margin: 0;
	display: grid;
	place-items: center;
	padding: 28px 18px;
	color: var(--ink);
	background: radial-gradient(ellipse at 50% 0%, #fbf3e8 0, #f5e8d9 68%, #eddcc9 100%);
	font-family: ui-rounded, "SF Pro Rounded", "Trebuchet MS", sans-serif;
}
.page {
	width: min(1040px, 100%);
	display: grid;
	gap: 18px;
}
.card {
	width: 100%;
	overflow: hidden;
	border: 1px solid #f2e3d8;
	border-radius: 26px;
	background: rgba(255, 253, 249, .9);
	box-shadow: 0 24px 70px #75484b18, 0 3px 10px #75484b0b;
}
.contact-card {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(280px, 1.1fr);
	gap: clamp(24px, 5vw, 56px);
	padding: clamp(24px, 5vw, 42px) clamp(22px, 6vw, 58px);
	border: 1px solid #f2e3d8;
	border-radius: 26px;
	background: rgba(255, 253, 249, .94);
	box-shadow: 0 16px 48px #75484b12;
}
.contact-intro h2 { margin: 11px 0 8px; font-size: clamp(26px, 4vw, 34px); letter-spacing: -.04em; }
.contact-intro p { margin: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.contact-email { color: #a95669; font-size: 14px; font-weight: 800; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.contact-form { display: grid; gap: 8px; }
.contact-form label { margin-top: 4px; color: #5b4146; font-size: 12px; font-weight: 800; }
.contact-form input,
.contact-form textarea {
	width: 100%;
	border: 1px solid #eadbd0;
	border-radius: 11px;
	padding: 11px 12px;
	color: var(--ink);
	background: #fffaf4;
	font: inherit;
	font-size: 13px;
}
.contact-form textarea { resize: vertical; min-height: 96px; }
.contact-form input:focus,
.contact-form textarea:focus { outline: 3px solid #cf718844; border-color: #cf7188; }
.contact-form button { justify-self: start; margin-top: 5px; }
.form-note { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
header { padding: clamp(24px, 5vw, 48px) clamp(22px, 6vw, 58px) 10px; }
.brand-header { display: flex; align-items: center; gap: clamp(18px, 4vw, 34px); }
.brand-logo {
	flex: 0 0 auto;
	width: clamp(104px, 17vw, 150px);
	aspect-ratio: 1;
	border: 3px solid #8c5938;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 5px 18px #70452b2b;
}
.brand-copy { min-width: 0; }
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #bd647c;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .15em;
	text-transform: uppercase;
}
.eyebrow::before { content: "✦"; font-size: 14px; }
h1 { margin: 12px 0 8px; font-size: clamp(28px, 5vw, 44px); letter-spacing: -.055em; }
header p { max-width: 560px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.opening-date {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 17px;
	padding: 9px 13px;
	border: 1px solid #f1d5ce;
	border-radius: 999px;
	color: #a95669;
	background: #fff4eb;
	font-size: 12px;
	font-weight: 800;
}
.opening-date span {
	padding-right: 9px;
	border-right: 1px solid #eac8bf;
	font-size: 9px;
	letter-spacing: .12em;
}
.opening-date time { font-variant-numeric: tabular-nums; }
.countdown {
	display: flex;
	align-items: center;
	gap: 12px;
	width: fit-content;
	margin-top: 12px;
	padding: 10px 12px;
	border: 1px solid #ead7c7;
	border-radius: 14px;
	background: #fffaf2;
}
.countdown-title { color: #a95669; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.countdown-units { display: flex; gap: 8px; }
.countdown-unit { min-width: 39px; text-align: center; }
.countdown-unit > span { display: block; color: #583b39; font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; }
.countdown-unit small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.countdown.is-open { color: #347653; border-color: #b9d9c1; background: #f0f8ef; font-size: 14px; font-weight: 900; }
.scene-wrap { padding: 8px clamp(12px, 3vw, 28px) 0; }
canvas {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 18px;
	background: #f6ecdf;
	image-rendering: auto;
}
.controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin: 0 clamp(22px, 6vw, 58px) 26px;
	padding-top: 15px;
	border-top: 1px solid #f1e7de;
}
.caption { color: var(--muted); font-size: 12px; }
button {
	border: 0;
	border-radius: 999px;
	padding: 11px 17px;
	color: white;
	background: #cf7188;
	box-shadow: 0 5px 12px #cf718833;
	font: inherit;
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
	transition: transform .2s, background .2s;
}
button:hover { transform: translateY(-2px); background: #b95e77; }
button:focus-visible { outline: 3px solid #35242c; outline-offset: 3px; }
@media (max-width: 520px) {
	.brand-header { align-items: flex-start; gap: 14px; }
	.brand-logo { width: 78px; border-width: 2px; }
	h1 { font-size: clamp(23px, 7vw, 32px); }
	.brand-copy > p:not(.opening-date) { font-size: 13px; }
	.controls { align-items: stretch; flex-direction: column; }
	.caption { line-height: 1.5; }
	.controls button { align-self: flex-end; }
	.contact-card { grid-template-columns: 1fr; gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}