:root {
	color-scheme: light dark;
	--bg: #ffffff;
	--fg: #0b0d12;
	--muted: #5b6472;
	--accent: #2f6df6;
	--border: #e4e7ec;
	--danger: #b42318;
	--radius: 10px;
	--space: 1rem;
	--font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0b0d12;
		--fg: #f4f6fa;
		--muted: #9aa4b2;
		--accent: #6f9bff;
		--border: #232833;
		--danger: #ff9a8f;
	}
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.shell {
	max-width: 42rem;
	margin: 0 auto;
	padding: calc(var(--space) * 3) var(--space);
}

h1 {
	margin: 0 0 0.5rem;
	font-size: clamp(1.6rem, 4vw, 2.25rem);
	letter-spacing: -0.02em;
}

.lede {
	margin: 0 0 0.75rem;
	font-size: 1.05rem;
}

.hint {
	margin: 0;
	color: var(--muted);
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0.9rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: var(--accent);
	color: #fff;
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

.btn:hover {
	filter: brightness(1.05);
}

.btn-secondary {
	background: transparent;
	color: var(--fg);
	border-color: var(--border);
}

.card {
	padding: var(--space);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg);
}

.input,
.select,
.textarea {
	width: 100%;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg);
	color: var(--fg);
	font: inherit;
}

.field {
	display: grid;
	gap: 0.35rem;
	margin-bottom: var(--space);
}

.field > label {
	font-size: 0.875rem;
	color: var(--muted);
}

.stack {
	display: grid;
	gap: var(--space);
}

.row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/*
 * 390px-safe. An unclamped minmax track overflows a 390px viewport once the
 * shell padding is subtracted, and nothing in the pipeline ever looked at a
 * phone-width layout, so every generated app inherited the horizontal scroll.
 * min() clamps the track to the container instead.
 */
.grid {
	display: grid;
	gap: var(--space);
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

.list {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

.table {
	width: 100%;
	border-collapse: collapse;
}

.table th,
.table td {
	padding: 0.6rem 0.5rem;
	text-align: left;
	border-bottom: 1px solid var(--border);
}

.table th {
	font-size: 0.8125rem;
	color: var(--muted);
	font-weight: 600;
}

.empty {
	padding: calc(var(--space) * 2);
	text-align: center;
	color: var(--muted);
}

.empty-title {
	margin: 0 0 0.25rem;
	color: var(--fg);
	font-weight: 600;
}

/* Loading. Every fetch has one; without a primitive each app invented its own. */
.loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: calc(var(--space) * 1.5);
	color: var(--muted);
}

.spinner {
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	border: 2px solid var(--border);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: fab-spin 0.7s linear infinite;
}

@keyframes fab-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Placeholder for content whose shape is known before its data arrives. */
.skeleton {
	display: block;
	height: 1rem;
	border-radius: calc(var(--radius) / 2);
	background: linear-gradient(90deg, var(--border), transparent, var(--border));
	background-size: 200% 100%;
	animation: fab-shimmer 1.2s linear infinite;
}

@keyframes fab-shimmer {
	to {
		background-position: -200% 0;
	}
}

/* Error strip: a failure the user can see and retry, never a silent no-op. */
.alert {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--border);
	border-left: 3px solid var(--muted);
	border-radius: var(--radius);
}

.alert-error {
	border-left-color: var(--danger);
	color: var(--danger);
}

.badge {
	display: inline-block;
	padding: 0.1rem 0.5rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	font-size: 0.8125rem;
	color: var(--muted);
}

/*
 * The scaffold had exactly one @media rule (prefers-color-scheme) and no width
 * breakpoint at all, so the shell was a 42rem column at every size.
 * Mobile-first stays the default; these only widen it.
 */
@media (min-width: 48rem) {
	.shell {
		max-width: 52rem;
		padding: calc(var(--space) * 3) calc(var(--space) * 1.5);
	}
}

@media (min-width: 64rem) {
	.shell {
		max-width: 64rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.spinner,
	.skeleton {
		animation: none;
	}
}

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

/* Fall Stroller Walk */
:root {
	color-scheme: light;
	--bg: #fbf6ee; --fg: #2a1a10; --muted: #6b5443; --accent: #b4521e; --border: #e6d8c4;
	--pumpkin: #d9731f; --brown: #3b2415; --yellow: #e8b04b; --red: #9e2f1e; --beige: #f1e6d6; --cream: #fbf6ee;
	--serif: "Fraunces", "Iowan Old Style", Georgia, serif;
	--font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) { :root { --bg: #fbf6ee; --fg: #2a1a10; --muted: #6b5443; --border: #e6d8c4; --accent: #b4521e; } }
html { scroll-behavior: smooth; }
body { font-size: 1.0625rem; padding-bottom: 5.5rem; }
.serif { font-family: var(--serif); font-weight: 500; letter-spacing: -0.015em; line-height: 1.1; }
h2.serif { font-size: clamp(1.9rem, 6vw, 2.8rem); margin: 0 0 0.75rem; }
h3.serif { font-size: 1.5rem; margin: 0 0 0.35rem; outline: none; }
h2.serif:focus { outline: none; }
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
.muted { color: var(--muted); }
.muted-l { color: #d9c7b2; margin: 0.2rem 0; }
.small-t { font-size: 0.875rem; margin: 0; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 99; background: #fff; padding: 0.5rem 1rem; border-radius: 8px; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.75rem; font-weight: 600; color: var(--yellow); margin: 0 0 0.75rem; }
.eyebrow.dark { color: var(--accent); }

.btn { justify-content: center; min-height: 48px; padding: 0.7rem 1.3rem; border-radius: 999px; font-weight: 600; text-decoration: none; transition: filter .15s, transform .15s; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-light { background: rgba(251,246,238,0.14); color: #fff; border-color: rgba(255,255,255,0.6); backdrop-filter: blur(6px); }
.btn-ghost { background: transparent; color: var(--brown); border-color: var(--border); }
.btn-ghost:hover { background: var(--beige); }
.btn.small { min-height: 40px; padding: 0.45rem 1rem; font-size: 0.9rem; }
.btn.lg { min-height: 54px; padding: 0.9rem 1.6rem; font-size: 1.05rem; }

.topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; }
.brand { font-family: var(--serif); color: #fff; text-decoration: none; font-size: 1.2rem; }
.brand em { color: var(--yellow); font-style: italic; }

.photo { position: relative; overflow: hidden; background: linear-gradient(140deg, #c7692a, #7a3a1a 60%, #3b2415); }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(251,230,190,0.35); }
.photo-sprig { width: 40%; max-width: 160px; }

.hero { position: relative; min-height: 92svh; display: flex; align-items: flex-end; color: #fff; }
.hero-img { position: absolute; inset: 0; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,15,6,0.35) 0%, rgba(30,15,6,0.1) 35%, rgba(30,15,6,0.85) 100%); }
.hero-inner { position: relative; max-width: 72rem; width: 100%; margin: 0 auto; padding: 6rem 1.25rem 3rem; }
.hero h1 { font-size: clamp(3rem, 13vw, 6.5rem); margin: 0; color: #fff; }
.hero-sub { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 4vw, 1.6rem); color: #f6d9a6; margin: 0.4rem 0 1rem; }
.hero-copy { max-width: 34rem; margin: 0 0 1.1rem; color: #f5ebdd; }
.tags { font-size: 0.78rem; letter-spacing: 0.14em; font-weight: 700; margin: 0 0 1.5rem; color: #fff; }
.tags i { color: var(--yellow); font-style: normal; padding: 0 0.3rem; }
.hero-cta { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.details { position: relative; margin-top: -1.5rem; z-index: 2; }
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 40px -24px rgba(59,36,21,0.35); }
.detail { background: #fff; padding: 1.1rem; display: grid; gap: 0.15rem; color: var(--accent); }
.detail:first-child { grid-column: 1 / -1; }
.detail span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-top: 0.4rem; }
.detail strong { color: var(--fg); font-size: 1.05rem; }
.detail small { color: var(--muted); }
.details-foot { display: grid; gap: 1rem; margin-top: 1.25rem; }
.counter { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 1rem 1.1rem; }
.counter-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.6rem; }
.counter-top span { color: var(--accent); font-weight: 600; }
.bar { height: 8px; background: var(--beige); border-radius: 99px; overflow: hidden; }
.bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--yellow), var(--pumpkin), var(--red)); }

.register-sec { background: var(--beige); padding: 4rem 0; margin-top: 3.5rem; }
.reg-wrap { display: grid; gap: 2rem; }
.reg-intro { position: relative; }
.reg-sprig { position: absolute; right: 0; top: -1rem; width: 90px; color: var(--pumpkin); opacity: 0.35; }
.deadline { display: flex; gap: 0.75rem; align-items: flex-start; background: #fff; border-left: 4px solid var(--pumpkin); padding: 0.9rem 1rem; border-radius: 12px; color: var(--accent); }
.deadline div { display: grid; gap: 0.2rem; color: var(--fg); }
.deadline span { color: var(--muted); font-size: 0.95rem; }
.reg-card { background: #fff; border-radius: 24px; padding: 1.4rem; box-shadow: 0 24px 50px -30px rgba(59,36,21,0.4); scroll-margin-top: 1rem; }
.reg-card fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; }
.reg-card legend { padding: 0; }
.full-banner { background: #fbe6dd; color: var(--red); padding: 0.8rem 1rem; border-radius: 12px; margin-bottom: 1rem; }
.stepper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.stepper li { display: grid; justify-items: center; gap: 0.3rem; font-size: 0.72rem; color: var(--muted); text-align: center; position: relative; }
.stepper .dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--border); font-weight: 600; background: #fff; }
.stepper .on { color: var(--fg); font-weight: 600; }
.stepper .on .dot { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px #f6e2d3; }
.stepper .past .dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.slots { display: grid; gap: 0.75rem; margin: 1rem 0 0.5rem; }
.slot { position: relative; display: grid; gap: 0.15rem; padding: 1rem 3rem 1rem 1.1rem; border: 1.5px solid var(--border); border-radius: 16px; cursor: pointer; background: var(--cream); transition: border-color .15s, background .15s; }
.slot input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.slot:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.slot-date { font-size: 0.85rem; color: var(--muted); }
.slot-time { font-family: var(--serif); font-size: 1.3rem; }
.slot-state { font-size: 0.78rem; color: var(--muted); }
.slot-check { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--border); display: grid; place-items: center; background: #fff; }
.slot.on { border-color: var(--accent); background: #fcefe4; }
.slot.on .slot-check { background: var(--accent); border-color: var(--accent); color: #fff; }
.slot.on .slot-state { color: var(--accent); font-weight: 600; }
.note, .privacy { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.92rem; color: var(--muted); }
.note svg, .privacy svg { flex: none; color: var(--accent); margin-top: 2px; }
.field > label { color: var(--fg); font-weight: 500; font-size: 0.92rem; }
.input { min-height: 48px; font-size: 1rem; border-radius: 12px; background: var(--cream); border: 1.5px solid var(--border); }
.input:focus { border-color: var(--accent); background: #fff; }
.input[aria-invalid="true"] { border-color: var(--red); }
textarea.input { min-height: 90px; resize: vertical; }
.help { font-size: 0.85rem; color: var(--muted); }
.err { color: var(--red); font-size: 0.87rem; font-weight: 500; }
.two { display: grid; gap: 0 1rem; margin-top: 1rem; }
.check { display: flex; gap: 0.7rem; align-items: flex-start; margin: 0 0 1rem; cursor: pointer; font-size: 0.95rem; }
.check input { width: 22px; height: 22px; flex: none; accent-color: var(--accent); margin-top: 1px; }
.inline-ico { vertical-align: -3px; color: var(--accent); }
.q { font-weight: 600; margin: 1rem 0 0.6rem; }
.seg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; }
.seg.two-up { grid-template-columns: repeat(2, 1fr); }
.seg label { position: relative; min-height: 50px; display: grid; place-items: center; border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; font-weight: 600; background: var(--cream); }
.seg input { position: absolute; opacity: 0; }
.seg label:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.seg label.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.child-row { display: grid; grid-template-columns: 1fr 6rem; gap: 0.75rem; }
.agrees { margin-top: 1rem; }
.reg-nav { display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 1.1rem; }
.reg-nav .btn-primary { flex: 1; max-width: 20rem; margin-left: auto; }
.done { text-align: center; padding: 2.5rem 1.5rem; }
.done-mark { width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-grid; place-items: center; margin-bottom: 1rem; }
.deadline-pill { display: inline-flex; gap: 0.5rem; align-items: center; background: var(--beige); padding: 0.55rem 1rem; border-radius: 99px; font-weight: 600; font-size: 0.92rem; }

.wa { margin-top: 3.5rem; }
.wa-card { display: grid; gap: 1rem; background: var(--brown); color: #f5ebdd; padding: 1.75rem; border-radius: 24px; }
.wa-card h2 { color: #fff; }
.wa-card .muted { color: #d9c7b2; }
.wa-ico { width: 52px; height: 52px; border-radius: 16px; background: var(--pumpkin); color: #fff; display: grid; place-items: center; }
.know { margin-top: 3.5rem; }
.know-alert { display: flex; gap: 0.8rem; align-items: flex-start; background: #fbe6dd; border: 1.5px solid #e9b39c; color: var(--red); padding: 1rem 1.1rem; border-radius: 16px; }
.know-alert svg { flex: none; }
.know-alert p { margin: 0; color: var(--fg); }
.know-grid { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); gap: 0.6rem; }
.know-grid li { display: flex; gap: 0.7rem; align-items: center; background: #fff; border: 1px solid var(--border); padding: 0.85rem 1rem; border-radius: 14px; font-size: 0.97rem; }
.know-grid svg { color: var(--accent); flex: none; }
.after { margin-top: 3.5rem; display: grid; gap: 1.5rem; align-items: center; }
.after-img { aspect-ratio: 4 / 3; border-radius: 24px; }
.park { background: var(--brown); color: #f5ebdd; padding: 4rem 0; margin-top: 4rem; }
.park h2 { color: #fff; margin-bottom: 0.2rem; }
.park-loc { font-family: var(--serif); font-style: italic; color: var(--yellow); margin: 0 0 1rem; }
.park-head { display: grid; gap: 0.5rem; margin-bottom: 1.5rem; }
.park-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1.5rem; }
.park-grid .photo { border-radius: 18px; aspect-ratio: 4 / 3; }
.pg-a { grid-column: 1 / -1; aspect-ratio: 16 / 10 !important; }
.grow { text-align: center; padding: 4rem 1.25rem; max-width: 40rem; color: var(--accent); }
.grow h2 { color: var(--fg); margin-top: 0.75rem; }
.grow p { color: var(--muted); }
.foot { background: #1c120b; color: #fff; padding: 2.5rem 0 3rem; }
.foot-in { display: grid; gap: 1.5rem; }
.foot p { margin: 0.2rem 0; }
.foot-brand { font-weight: 700; letter-spacing: 0.2em; color: var(--yellow); }
.foot nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.foot nav a { color: #f5ebdd; }
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)); background: rgba(251,246,238,0.94); backdrop-filter: blur(8px); border-top: 1px solid var(--border); }
.sticky-cta .btn { width: 100%; }

@media (min-width: 48rem) {
	body { padding-bottom: 0; }
	.sticky-cta { display: none; }
	.detail-grid { grid-template-columns: repeat(5, 1fr); }
	.detail:first-child { grid-column: auto; }
	.details-foot { grid-template-columns: 1fr auto; align-items: center; }
	.two { grid-template-columns: 1fr 1fr; }
	.wa-card { grid-template-columns: auto 1fr; padding: 2.5rem; }
	.after { grid-template-columns: 1.1fr 1fr; gap: 3rem; }
	.park-head { grid-template-columns: 1fr 1fr; align-items: end; }
	.park-grid { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
	.pg-a { grid-column: 1; grid-row: 1 / 3; aspect-ratio: auto !important; }
	.foot-in { grid-template-columns: 1fr 1fr auto; }
}
@media (min-width: 64rem) {
	.reg-wrap { grid-template-columns: 0.8fr 1.2fr; align-items: start; }
	.reg-intro { position: sticky; top: 2rem; }
}