/**
 * Cottage section styles.
 *
 * Design intent: a monochrome light-grey and dark-grey palette, generous
 * whitespace, and type that carries the premium feel rather than decoration.
 * Colours resolve from theme.json presets, so the owner can retint the whole
 * site from the Styles panel without editing this file.
 *
 * Because there is no hue left to carry meaning, status states (the
 * availability result, form errors) separate themselves by background
 * lightness and by their wording, never by colour alone.
 *
 * Every animation is wrapped in a reduced-motion guard at the end of the file.
 */

:root {
	--cottage-radius: 14px;
	--cottage-radius-lg: 22px;
	--cottage-shadow: 0 1px 2px rgba(35, 35, 35, 0.05), 0 12px 32px -12px rgba(35, 35, 35, 0.18);
	--cottage-shadow-lift: 0 2px 4px rgba(35, 35, 35, 0.06), 0 24px 48px -16px rgba(35, 35, 35, 0.26);
	--cottage-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--cottage-paper: var(--wp--preset--color--paper, #f5f5f5);
	--cottage-ink: var(--wp--preset--color--ink, #232323);
	--cottage-moss: var(--wp--preset--color--moss, #2f2f2f);
	--cottage-clay: var(--wp--preset--color--clay, #4a4a4a);
	--cottage-lake: var(--wp--preset--color--lake, #7a7a7a);
	--cottage-stone: var(--wp--preset--color--stone, #6b6b6b);
	--cottage-line: var(--wp--preset--color--line, #d6d6d6);
	--cottage-sand: var(--wp--preset--color--sand, #e8e8e8);
}

/*
 * Block controls use full-width buttons and form fields on phones. Keep their
 * padding inside the declared width so mobile layouts do not spill sideways.
 */
.cottage-section,
.cottage-section *,
.cottage-hero,
.cottage-hero *,
.cottage-booking,
.cottage-booking *,
.cottage-request,
.cottage-request * {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- Utilities */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: fixed !important;
	top: 1rem;
	left: 1rem;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 0.75rem 1.25rem;
	clip: auto;
	background: var(--cottage-paper);
	color: var(--cottage-ink);
	border-radius: var(--cottage-radius);
	box-shadow: var(--cottage-shadow-lift);
}

/*
 * Sections are full-bleed by default so photographic and coloured backgrounds
 * reach the viewport edge. Reading width is restored by the inner containers
 * below rather than by the block layout, which keeps the two concerns separate
 * and avoids fighting WordPress's nested-container alignment rules.
 */
.cottage-section {
	padding-block: clamp(3.5rem, 2.5rem + 4vw, 7rem);
	padding-inline: clamp(1.25rem, 4vw, 3rem);
}

/*
 * Sections run edge to edge, so in landscape on a notched phone their first and
 * last characters end up under the display cutout. `max()` keeps the designed
 * gutter everywhere the inset is zero, which is every other device.
 */
@supports (padding: max(0px)) {
	.cottage-section {
		padding-left: max(clamp(1.25rem, 4vw, 3rem), env(safe-area-inset-left, 0px));
		padding-right: max(clamp(1.25rem, 4vw, 3rem), env(safe-area-inset-right, 0px));
	}
}

.cottage-highlights__grid,
.cottage-gallery__grid,
.cottage-gallery__actions,
.cottage-attractions__grid,
.cottage-attractions__actions,
.cottage-why__grid,
.cottage-faq__list,
.cottage-map__layout,
.cottage-newsletter__inner,
.cottage-reviews__slider,
.cottage-availability__card {
	max-width: 82rem;
	margin-inline: auto;
}

/* The FAQ column stays narrower than the grids: long lines are hard to read. */
.cottage-faq__list {
	max-width: 48rem;
}

.cottage-section__head {
	max-width: 46rem;
	margin-inline: auto;
	margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
	text-align: center;
}

.cottage-section__eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cottage-clay);
}

.cottage-section__title {
	margin: 0;
	font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
}

.cottage-section__intro {
	margin: 1rem auto 0;
	max-width: 38rem;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--cottage-stone);
}

.cottage-empty-notice {
	max-width: 34rem;
	margin-inline: auto;
	padding: 1.25rem 1.5rem;
	border: 1px dashed var(--cottage-line);
	border-radius: var(--cottage-radius);
	background: var(--cottage-sand);
	text-align: center;
	font-size: 0.95rem;
	color: var(--cottage-stone);
}

/* ------------------------------------------------------------------ Buttons */

.cottage-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	max-width: 100%;
	min-height: 3rem;
	padding: 0.85rem 1.75rem;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.25s var(--cottage-ease), background-color 0.25s var(--cottage-ease),
		border-color 0.25s var(--cottage-ease), color 0.25s var(--cottage-ease),
		box-shadow 0.25s var(--cottage-ease);
}

.cottage-button--primary {
	background: var(--cottage-clay);
	color: #fff;
	box-shadow: var(--cottage-shadow);
}

.cottage-button--secondary {
	background: rgba(255, 255, 255, 0.92);
	border-color: var(--cottage-line);
	color: var(--cottage-ink);
}

.cottage-button--ghost {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}

/*
 * Hover styling is gated on a device that actually has a hovering pointer.
 * A touch browser fakes `:hover` on tap and then leaves it stuck until the
 * guest taps something else, so an ungated lift means half the buttons on a
 * phone sit 2px out of place for the rest of the visit.
 *
 * The focus-visible half is kept outside the gate: a keyboard reaches these on
 * every device.
 */
@media (hover: hover) {
	.cottage-button--primary:hover {
		background: #2f2f2f;
		color: #fff;
		transform: translateY(-2px);
		box-shadow: var(--cottage-shadow-lift);
	}

	.cottage-button--secondary:hover {
		background: #fff;
		border-color: var(--cottage-moss);
		color: var(--cottage-moss);
		transform: translateY(-2px);
	}

	.cottage-button--ghost:hover {
		background: rgba(255, 255, 255, 0.14);
	}
}

.cottage-button--primary:focus-visible {
	background: #2f2f2f;
	color: #fff;
	box-shadow: var(--cottage-shadow-lift);
}

.cottage-button--secondary:focus-visible {
	background: #fff;
	border-color: var(--cottage-moss);
	color: var(--cottage-moss);
}

.cottage-button--ghost:focus-visible {
	background: rgba(255, 255, 255, 0.14);
}

/*
 * A tap that produces no visible change reads as a tap the page missed. The
 * press state is a colour shift only — nothing that moves the button's box, so
 * neighbouring content cannot jitter under the finger.
 */
.cottage-button:active {
	filter: brightness(0.94);
}

/*
 * A visible focus ring on every interactive element, at a contrast that works
 * on both the light sections and the dark photographic ones.
 */
.cottage-button:focus-visible,
.cottage-field__input:focus-visible,
.cottage-faq__question:focus-visible,
.cottage-map__consent:focus-visible,
.cottage-reviews__arrow:focus-visible,
.cottage-attraction__link:focus-visible,
.cottage-reviews__track:focus-visible {
	outline: 3px solid var(--cottage-lake);
	outline-offset: 3px;
}

.cottage-icon {
	flex: 0 0 auto;
	width: 1.25em;
	height: 1.25em;
}

/* --------------------------------------------------------------------- Hero */

.cottage-hero {
	position: relative;
	display: grid;
	align-items: center;
	isolation: isolate;
	padding-block: clamp(5rem, 4rem + 8vw, 9rem);
	overflow: hidden;
	color: #fff;
}

/*
 * `vh` on a phone means the viewport with the address bar *hidden*, so a hero
 * sized in `vh` is taller than the screen on first paint and then appears to
 * resize as the bar retracts. `svh` is the small viewport — what is actually
 * visible when the page loads — so the hero is the intended height immediately
 * and never reflows mid-scroll. The `vh` line stays as the fallback.
 */
.cottage-hero--medium {
	min-height: 58vh;
	min-height: 58svh;
}

.cottage-hero--tall {
	min-height: 78vh;
	min-height: 78svh;
}

.cottage-hero--full {
	min-height: 100vh;
	min-height: 100svh;
}

/*
 * A phone held sideways has almost no vertical room. A full-height hero there
 * costs the guest an entire screen of scrolling before any content appears, so
 * the height caps and the padding tightens.
 */
@media (max-height: 500px) and (orientation: landscape) {
	.cottage-hero--medium,
	.cottage-hero--tall,
	.cottage-hero--full {
		min-height: 0;
	}

	.cottage-hero {
		padding-block: clamp(2.5rem, 2rem + 4vh, 4rem);
	}

	.cottage-hero__cue {
		display: none;
	}
}

.cottage-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.cottage-hero__image,
.cottage-hero__iframe {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.cottage-hero__video {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.2s var(--cottage-ease);
	pointer-events: none;
}

.cottage-hero__video[data-loaded='true'] {
	opacity: 1;
}

.cottage-hero__iframe {
	/*
	 * A 16:9 iframe scaled to cover the viewport. The scale hides the player
	 * chrome that YouTube draws at the very edges of the frame.
	 */
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw;
	min-height: 100%;
	min-width: 177.77vh;
	transform: translate(-50%, -50%) scale(1.02);
}

.cottage-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(24, 24, 24, calc(var(--cottage-hero-overlay, 0.35) * 0.9)) 0%,
		rgba(24, 24, 24, calc(var(--cottage-hero-overlay, 0.35) * 0.55)) 45%,
		rgba(24, 24, 24, calc(var(--cottage-hero-overlay, 0.35) * 1.15)) 100%
	);
}

.cottage-hero__inner {
	position: relative;
	max-width: 52rem;
	margin-inline: auto;
	padding-inline: 1.5rem;
	text-align: center;
	animation: cottage-rise 0.9s var(--cottage-ease) both;
}

.cottage-hero--align-left .cottage-hero__inner {
	margin-inline: 0 auto;
	text-align: left;
}

.cottage-hero__title {
	margin: 0;
	font-size: clamp(2.4rem, 1.6rem + 4.4vw, 4.4rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: #fff;
	text-wrap: balance;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.28);
}

.cottage-hero__subtitle {
	margin: 1.25rem auto 0;
	max-width: 34rem;
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.92);
	text-wrap: pretty;
}

.cottage-hero--align-left .cottage-hero__subtitle {
	margin-inline: 0;
}

.cottage-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
	justify-content: center;
	margin-top: 2rem;
}

.cottage-hero--align-left .cottage-hero__actions {
	justify-content: flex-start;
}

/*
 * Two pill buttons side by side on a 360px screen leave each one about 150px
 * wide with the label wrapping inside it. Stacking them full width gives both
 * a comfortable target and puts the primary action under the thumb.
 */
@media (max-width: 480px) {
	.cottage-hero__actions,
	.cottage-booking__actions {
		flex-direction: column;
		align-items: center;
	}

	.cottage-hero__actions .cottage-button,
	.cottage-booking__actions .cottage-button {
		width: min(100%, 34rem);
	}
}

@media (max-width: 700px) {
	.cottage-hero {
		align-items: center;
		min-height: 72svh;
		padding-block: clamp(4rem, 12vw, 6rem);
	}

	.cottage-hero__inner,
	.cottage-hero--align-left .cottage-hero__inner {
		width: min(100%, 42rem);
		margin-inline: auto;
		padding-inline: 1.25rem;
		text-align: center;
	}

	.cottage-hero--align-left .cottage-hero__subtitle {
		margin-inline: auto;
	}

	.cottage-hero--align-left .cottage-hero__actions,
	.cottage-hero--align-left .cottage-hero__facts {
		justify-content: center;
	}

	.cottage-hero__facts {
		max-width: 100%;
		gap: 0.75rem 1.1rem;
	}

	.cottage-hero__fact {
		min-width: 0;
	}
}

.cottage-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	justify-content: center;
	margin: 2.25rem 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.24);
	list-style: none;
}

.cottage-hero--align-left .cottage-hero__facts {
	justify-content: flex-start;
}

.cottage-hero__fact {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.94);
}

.cottage-hero__cue {
	position: absolute;
	left: 50%;
	bottom: 1.75rem;
	transform: translateX(-50%);
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	display: grid;
	place-items: center;
	animation: cottage-bob 2.4s var(--cottage-ease) infinite;
}

.cottage-hero__cue-arrow {
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: translateY(-2px) rotate(45deg);
}

@keyframes cottage-rise {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes cottage-bob {
	0%,
	100% {
		transform: translateX(-50%) translateY(0);
	}
	50% {
		transform: translateX(-50%) translateY(7px);
	}
}

/* ------------------------------------------------------- Availability search */

.cottage-availability {
	padding-block: 0;
}

.cottage-availability--overlap {
	position: relative;
	z-index: 2;
	margin-top: clamp(-5rem, -4rem - 2vw, -2.5rem);
}

/*
 * The overlap is a desktop flourish. On a phone the card is a tall stack of
 * four fields, and pulling it up 70px puts it straight over the hero's scroll
 * cue and the bottom of the headline.
 */
@media (max-width: 700px) {
	.cottage-availability--overlap {
		margin-top: 0;
	}
}

.cottage-availability__card {
	max-width: 62rem;
	margin-inline: auto;
	padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
	background: #fff;
	border: 1px solid var(--cottage-line);
	border-radius: var(--cottage-radius-lg);
	box-shadow: var(--cottage-shadow-lift);
}

.cottage-availability__title {
	margin: 0 0 1.25rem;
	font-size: 1.25rem;
	text-align: center;
}

.cottage-availability__form {
	display: grid;
	gap: 0.875rem;
	grid-template-columns: 1fr;
	align-items: end;
}

@media (min-width: 720px) {
	.cottage-availability__form {
		grid-template-columns: minmax(10.5rem, 1fr) minmax(10.5rem, 1fr) minmax(9rem, 0.7fr) minmax(11rem, auto);
	}
}

.cottage-field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.cottage-field__label {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cottage-stone);
}

.cottage-field__input {
	width: 100%;
	min-width: 0;
	min-height: 3rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--cottage-line);
	border-radius: var(--cottage-radius);
	background: #fff;
	color: var(--cottage-ink);
	font-family: inherit;
	font-size: 1rem;
}

.cottage-field__input:hover {
	border-color: var(--cottage-stone);
}

.cottage-field__input:focus {
	border-color: var(--cottage-lake);
	box-shadow: 0 0 0 3px rgba(74, 74, 74, 0.18);
	outline: 0;
}

.cottage-field--submit .cottage-button {
	width: 100%;
	white-space: nowrap;
}

.cottage-availability__result {
	margin: 1.25rem 0 0;
	padding: 0.9rem 1.1rem;
	border-radius: var(--cottage-radius);
	border-left: 4px solid var(--cottage-stone);
	background: var(--cottage-sand);
	font-size: 0.95rem;
}

.cottage-availability__result[data-state='available'] {
	border-left-color: var(--cottage-moss);
	background: #ededed;
}

.cottage-availability__result[data-state='unavailable'],
.cottage-availability__result[data-state='invalid'],
.cottage-availability__result[data-state='error'] {
	border-left-color: var(--cottage-clay);
	background: #e0e0e0;
}

.cottage-availability__result-link {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	margin-top: 0.5rem;
	font-weight: 600;
}

.cottage-availability__note {
	margin: 1rem 0 0;
	font-size: 0.85rem;
	color: var(--cottage-stone);
	text-align: center;
}

/* --------------------------------------------------------------- Highlights */

.cottage-highlights__grid {
	display: grid;
	gap: 1rem;
	margin-block: 0;
	margin-inline: auto;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/*
 * From medium screens up the grid becomes a centred flex wrap.
 *
 * The amenity count is whatever the owner has entered, so a trailing row is
 * almost always partial — ten cards across three columns leaves one card
 * hanging under the first column, and it reads as a layout bug rather than as
 * the end of a list. CSS Grid has no way to centre a partial final row, so the
 * columns are rebuilt with `flex-wrap` plus `justify-content: center`, which
 * does. The basis is derived from the same gap and column count the grid used,
 * so every full row is pixel-identical to before; only the orphans move.
 */
@media (min-width: 640px) {
	.cottage-highlights__grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	/*
	 * Three columns: two gaps of 1rem to share out. `min-width` overrides the
	 * `auto` a flex item defaults to, which would otherwise let a long unbroken
	 * amenity name push the card wider than its share of the row.
	 */
	.cottage-highlights__grid > .cottage-highlight {
		flex: 0 1 calc((100% - 2rem) / 3);
		min-width: 0;
	}
}

@media (min-width: 1024px) {
	.cottage-highlights--cols-4 .cottage-highlights__grid > .cottage-highlight {
		flex-basis: calc((100% - 3rem) / 4);
	}

	.cottage-highlights--cols-5 .cottage-highlights__grid > .cottage-highlight {
		flex-basis: calc((100% - 4rem) / 5);
	}

	.cottage-highlights--cols-6 .cottage-highlights__grid > .cottage-highlight {
		flex-basis: calc((100% - 5rem) / 6);
	}
}

.cottage-highlight {
	padding: 1.75rem 1.25rem;
	background: #fff;
	border: 1px solid var(--cottage-line);
	border-radius: var(--cottage-radius-lg);
	text-align: center;
	transition: transform 0.3s var(--cottage-ease), box-shadow 0.3s var(--cottage-ease),
		border-color 0.3s var(--cottage-ease);
}

/* Gated on a real pointer — see the note on the button hover block above. */
@media (hover: hover) {
	.cottage-highlight:hover {
		transform: translateY(-4px);
		border-color: transparent;
		box-shadow: var(--cottage-shadow-lift);
	}
}

.cottage-highlight__icon {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin: 0 auto 1rem;
	border-radius: 999px;
	background: var(--cottage-sand);
	color: var(--cottage-moss);
}

.cottage-highlight__icon .cottage-icon {
	width: 1.5rem;
	height: 1.5rem;
}

.cottage-highlight__title {
	margin: 0;
	font-size: 1rem;
	line-height: 1.35;
}

.cottage-highlight__text {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--cottage-stone);
}

/* ------------------------------------------------------------------ Gallery */

.cottage-gallery__grid {
	display: grid;
	gap: 0.75rem;
	margin-block: 0;
	margin-inline: auto;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 11rem;
	/*
	 * Dense packing backfills the holes that the double-height tiles would
	 * otherwise leave behind. Safe here because the gallery is a set of
	 * equivalent photos, so visual order carries no meaning.
	 */
	grid-auto-flow: row dense;
}

/*
 * From medium screens up the tiles become a centred flex wrap, for the same
 * reason as the highlights above: the owner controls how many photos are shown,
 * so the last row is usually partial and grid cannot centre it.
 *
 * The double-height tiles are dropped along with the grid, because a flex row
 * has one height and cannot span two of them. That trade is deliberate: on a
 * wide screen the staggered bottom edge the masonry produced was itself part of
 * what looked unaligned, and uniform tiles let every row — including the last —
 * sit flush and centred. Phones keep the masonry, where two columns of dense
 * packing stay level anyway.
 */
@media (min-width: 700px) {
	.cottage-gallery__grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	/* Three columns: two gaps of 0.75rem to share out. */
	.cottage-gallery__grid > .cottage-gallery__item {
		flex: 0 1 calc((100% - 1.5rem) / 3);
		min-width: 0;
		height: 13rem;
	}
}

@media (min-width: 1100px) {
	.cottage-gallery__grid > .cottage-gallery__item {
		flex-basis: calc((100% - 2.25rem) / 4);
		height: 14rem;
	}
}

.cottage-gallery__item {
	overflow: hidden;
	border-radius: var(--cottage-radius);
	background: var(--cottage-sand);
}

/*
 * Every third tile is double height on phones, which reads as masonry without
 * any JS. `grid-row` is ignored once the container becomes a flex wrap above,
 * so the class costs nothing at the wider breakpoints.
 */
.cottage-gallery__item.is-tall {
	grid-row: span 2;
}

.cottage-gallery__button {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: zoom-in;
}

.cottage-gallery__button:focus-visible {
	outline: 3px solid var(--cottage-lake);
	outline-offset: -5px;
}

.cottage-gallery__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--cottage-ease);
}

@media (hover: hover) {
	.cottage-gallery__button:hover .cottage-gallery__image {
		transform: scale(1.05);
	}
}

.cottage-gallery-open {
	overflow: hidden;
}

.cottage-gallery-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: max(1rem, env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) max(1rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
	background: rgba(24, 24, 24, 0.9);
}

.cottage-gallery-lightbox[hidden] {
	display: none;
}

.cottage-gallery-lightbox__frame {
	display: grid;
	place-items: center;
	width: min(100%, 76rem);
	height: min(100%, 48rem);
}

.cottage-gallery-lightbox__image {
	max-width: 100%;
	max-height: 100%;
	border-radius: var(--cottage-radius);
	box-shadow: 0 24px 80px -24px rgba(0, 0, 0, 0.55);
	object-fit: contain;
}

.cottage-gallery-lightbox__close {
	position: fixed;
	top: max(1rem, env(safe-area-inset-top, 0px));
	right: max(1rem, env(safe-area-inset-right, 0px));
	min-height: 44px;
	padding: 0.65rem 1rem;
	border: 1px solid rgba(245, 245, 245, 0.38);
	border-radius: 999px;
	background: rgba(245, 245, 245, 0.96);
	color: var(--cottage-ink);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.cottage-gallery__actions,
.cottage-attractions__actions {
	margin-top: 2rem;
	text-align: center;
}

/* --------------------------------------------------------------- Why choose */

.cottage-why__grid,
.cottage-editor-why .block-editor-inner-blocks > .block-editor-block-list__layout {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.cottage-why__grid,
	.cottage-editor-why .block-editor-inner-blocks > .block-editor-block-list__layout {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.cottage-why--cols-3 .cottage-why__grid,
	.cottage-why--cols-3 .block-editor-inner-blocks > .block-editor-block-list__layout {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cottage-why--cols-4 .cottage-why__grid,
	.cottage-why--cols-4 .block-editor-inner-blocks > .block-editor-block-list__layout {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.cottage-reason {
	padding: 2rem 1.75rem;
	background: var(--cottage-sand);
	border-radius: var(--cottage-radius-lg);
	border: 1px solid transparent;
	transition: transform 0.3s var(--cottage-ease), box-shadow 0.3s var(--cottage-ease),
		background-color 0.3s var(--cottage-ease);
}

@media (hover: hover) {
	.cottage-reason:hover {
		transform: translateY(-4px);
		background: #fff;
		box-shadow: var(--cottage-shadow-lift);
	}
}

.cottage-reason__icon {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: 1.25rem;
	border-radius: var(--cottage-radius);
	background: #fff;
	color: var(--cottage-clay);
}

@media (hover: hover) {
	.cottage-reason:hover .cottage-reason__icon {
		background: var(--cottage-sand);
	}
}

.cottage-reason__icon .cottage-icon {
	width: 1.4rem;
	height: 1.4rem;
}

.cottage-reason__title {
	margin: 0;
	font-size: 1.1875rem;
	line-height: 1.3;
}

.cottage-reason__text {
	margin: 0.625rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--cottage-stone);
}

/* -------------------------------------------------------------- Attractions */

.cottage-attractions__grid {
	display: grid;
	gap: 1.25rem;
	margin-block: 0;
	margin-inline: auto;
	padding: 0;
	list-style: none;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.cottage-attractions__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 980px) {
	.cottage-attractions__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.cottage-attraction {
	background: #fff;
	border: 1px solid var(--cottage-line);
	border-radius: var(--cottage-radius-lg);
	overflow: hidden;
	transition: transform 0.3s var(--cottage-ease), box-shadow 0.3s var(--cottage-ease);
}

@media (hover: hover) {
	.cottage-attraction:hover {
		transform: translateY(-5px);
		box-shadow: var(--cottage-shadow-lift);
	}
}

/*
 * The whole card is one link, so on touch it gets the press state instead of
 * the hover lift — a background tint, which cannot shift the grid around it.
 */
.cottage-attraction__link:active {
	background: var(--cottage-sand);
}

.cottage-attraction__link {
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.cottage-attraction__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--cottage-sand);
}

.cottage-attraction__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--cottage-ease);
}

@media (hover: hover) {
	.cottage-attraction:hover .cottage-attraction__image {
		transform: scale(1.06);
	}
}

.cottage-attraction__body {
	display: block;
	padding: 1.5rem;
}

.cottage-attraction__type {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cottage-clay);
}

.cottage-attraction__title {
	margin: 0.625rem 0 0;
	font-size: 1.1875rem;
	line-height: 1.3;
}

.cottage-attraction__text {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--cottage-stone);
}

.cottage-attraction__meta {
	display: block;
	margin-top: 0.875rem;
	font-size: 0.8125rem;
	color: var(--cottage-lake);
	font-weight: 600;
}

/* ------------------------------------------------------------------ Reviews */

.cottage-reviews {
	background: var(--cottage-sand);
}

.cottage-stars {
	display: inline-flex;
	align-items: center;
	gap: 0.125rem;
	color: var(--cottage-clay);
}

.cottage-star .cottage-icon {
	width: 1.1rem;
	height: 1.1rem;
}

.cottage-star.is-full .cottage-icon {
	fill: currentColor;
}

.cottage-star.is-empty {
	opacity: 0.32;
}

.cottage-reviews__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin: 1.25rem 0 0;
}

.cottage-reviews__score {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--cottage-ink);
}

.cottage-reviews__source {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	color: #4f4f4f;
}

/* Was a 17px-tall link sitting on its own line — nothing for a thumb to aim at. */
.cottage-reviews__source a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-block: 0.5rem;
}

.cottage-reviews__slider {
	position: relative;
	/*
	 * The track scrolls horizontally on its own. Without clipping here, that
	 * overflow escapes and drags the whole document wider than the viewport,
	 * which shows up as a horizontal scrollbar on phones.
	 *
	 * `clip` rather than `hidden`: it does not turn this into a scroll
	 * container, so the cards' drop shadows are not cut off vertically.
	 */
	overflow-x: clip;
	max-width: 82rem;
	margin-inline: auto;
}

.cottage-reviews__track {
	display: grid;
	grid-auto-flow: column;
	/*
	 * 17rem is wider than a 320px screen once the gutters are taken off, which
	 * left the first card clipped on the smallest phones. `min()` lets the card
	 * shrink to the available width there and keeps the fixed size everywhere
	 * with room for it.
	 */
	grid-auto-columns: minmax(min(17rem, 78vw), 22rem);
	gap: 1.25rem;
	margin: 0;
	padding: 0.5rem 1.5rem 1.75rem;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/* Without this the snapped card aligns under the track's own left padding. */
	scroll-padding-inline: 1.5rem;
	scrollbar-width: thin;
	overscroll-behavior-x: contain;
	/*
	 * A horizontal swipe should page the reviews, not fight the browser over
	 * whether it meant to scroll the document.
	 */
	touch-action: pan-x pan-y;
}

.cottage-review {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	padding: 1.75rem;
	background: #fff;
	border-radius: var(--cottage-radius-lg);
	box-shadow: var(--cottage-shadow);
	scroll-snap-align: start;
}

.cottage-review::before {
	content: '';
	width: 2.4rem;
	height: 0.28rem;
	border-radius: 999px;
	background: var(--cottage-clay);
	opacity: 0.42;
}

.cottage-review__quote {
	margin: 0;
	flex: 1 1 auto;
}

.cottage-review__title {
	margin: 0 0 0.5rem;
	font-size: 1.0625rem;
	font-weight: 600;
}

.cottage-review__body {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: #4f4f4f;
}

.cottage-review__meta {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	margin: 0;
	padding-top: 0.875rem;
	border-top: 1px solid var(--cottage-line);
	font-size: 0.8125rem;
}

.cottage-review__author {
	font-weight: 600;
	color: var(--cottage-ink);
}

.cottage-review__origin {
	color: #4f4f4f;
}

.cottage-reviews__nav {
	display: flex;
	justify-content: center;
	gap: 0.625rem;
	margin-top: 0.5rem;
}

.cottage-reviews__arrow {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	border: 1px solid var(--cottage-line);
	background: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: border-color 0.25s var(--cottage-ease), opacity 0.25s var(--cottage-ease);
}

.cottage-reviews__arrow:hover:not(:disabled) {
	border-color: var(--cottage-moss);
}

.cottage-reviews__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.cottage-reviews__arrow span {
	width: 0.55rem;
	height: 0.55rem;
	border-top: 2px solid var(--cottage-ink);
	border-right: 2px solid var(--cottage-ink);
}

.cottage-reviews__arrow--prev span {
	transform: translateX(1px) rotate(-135deg);
}

.cottage-reviews__arrow--next span {
	transform: translateX(-1px) rotate(45deg);
}

/* ---------------------------------------------------------------------- Map */

.cottage-map__layout {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 900px) {
	.cottage-map__layout {
		grid-template-columns: 1.6fr 1fr;
	}
}

.cottage-map__frame {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--cottage-radius-lg);
	border: 1px solid var(--cottage-line);
	background: var(--cottage-sand);
}

.cottage-map__iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.cottage-map__consent {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	gap: 0.5rem;
	padding: 2rem;
	border: 0;
	background: var(--cottage-sand);
	cursor: pointer;
	text-align: center;
	font-family: inherit;
	color: var(--cottage-ink);
}

.cottage-map__consent:hover {
	background: #dcdcdc;
}

.cottage-map__consent-icon {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin: 0 auto;
	border-radius: 999px;
	background: #fff;
	color: var(--cottage-clay);
}

.cottage-map__consent-label {
	font-size: 1.0625rem;
	font-weight: 600;
}

.cottage-map__consent-note {
	font-size: 0.85rem;
	color: var(--cottage-stone);
}

.cottage-map__location {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1rem;
	font-size: 1.0625rem;
	font-weight: 600;
}

.cottage-map__location .cottage-icon {
	color: var(--cottage-clay);
}

.cottage-map__subtitle {
	margin: 2rem 0 0.75rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cottage-stone);
}

.cottage-map__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cottage-map__list-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--cottage-line);
	font-size: 0.9375rem;
}

/*
 * The row is tall enough, but the tappable part was only the text inside it.
 * Growing the link to fill the row means a tap anywhere along it lands.
 */
.cottage-map__list-item a {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-height: 44px;
}

.cottage-map__list-item:last-child {
	border-bottom: 0;
}

.cottage-map__distance {
	color: var(--cottage-stone);
	font-size: 0.85rem;
}

/* ------------------------------------------------------------- Booking CTA */

.cottage-booking {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--cottage-moss);
	color: #fff;
	text-align: center;
}

.cottage-booking__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.cottage-booking__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cottage-booking__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(35, 35, 35, 0.82),
		rgba(35, 35, 35, 0.72)
	);
}

.cottage-booking__inner {
	max-width: 44rem;
	margin-inline: auto;
	padding-inline: 1.5rem;
}

.cottage-booking__title {
	margin: 0;
	font-size: clamp(2rem, 1.5rem + 2.6vw, 3.25rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #fff;
	text-wrap: balance;
}

.cottage-booking__intro {
	margin: 1.125rem auto 0;
	max-width: 34rem;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.9);
}

.cottage-booking__price {
	margin: 1.25rem 0 0;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.88);
}

.cottage-booking__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
	justify-content: center;
	margin-top: 1.75rem;
}

.cottage-booking__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	justify-content: center;
	margin: 2rem 0 0;
	padding: 1.5rem 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.24);
	list-style: none;
}

.cottage-booking__contact li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1rem;
}

/*
 * On a phone the `tel:` and `mailto:` links here are the two highest-intent
 * taps on the page, and as bare inline text they were about 19px tall. They get
 * a real 44px target — and enough gap that a thumb cannot catch both.
 */
.cottage-booking__contact a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-block: 0.5rem;
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

.cottage-booking__contact a:hover {
	border-bottom-color: #fff;
}

.cottage-booking__listings a {
	display: inline-block;
	min-height: 44px;
	padding-block: 0.6rem;
}

.cottage-booking__listings {
	margin: 1.5rem 0 0;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.75);
}

.cottage-booking__listings a {
	color: #fff;
	margin-left: 0.5rem;
}

/* ---------------------------------------------------------------------- FAQ */

.cottage-faq__list {
	max-width: 46rem;
	margin-inline: auto;
	border-top: 1px solid var(--cottage-line);
}

.cottage-faq__item {
	border-bottom: 1px solid var(--cottage-line);
}

.cottage-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 0.25rem;
	cursor: pointer;
	list-style: none;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--cottage-ink);
}

/* Hide the default disclosure triangle in favour of the custom marker. */
.cottage-faq__question::-webkit-details-marker {
	display: none;
}

.cottage-faq__question::marker {
	content: '';
}

.cottage-faq__question:hover {
	color: var(--cottage-moss);
}

.cottage-faq__marker {
	position: relative;
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
}

.cottage-faq__marker::before,
.cottage-faq__marker::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	transition: transform 0.3s var(--cottage-ease);
}

.cottage-faq__marker::after {
	transform: rotate(90deg);
}

.cottage-faq__item[open] .cottage-faq__marker::after {
	transform: rotate(0deg);
}

.cottage-faq__answer {
	padding: 0 0.25rem 1.5rem;
	font-size: 0.9875rem;
	line-height: 1.75;
	color: var(--cottage-stone);
	max-width: 40rem;
}

.cottage-faq__answer > :first-child {
	margin-top: 0;
}

.cottage-faq__answer > :last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------- Newsletter */

.cottage-newsletter {
	padding-block: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.cottage-newsletter__inner {
	display: grid;
	gap: 1.5rem;
	align-items: center;
	max-width: 62rem;
	margin-inline: auto;
	padding: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
	background: var(--cottage-sand);
	border-radius: var(--cottage-radius-lg);
}

@media (min-width: 860px) {
	.cottage-newsletter__inner {
		grid-template-columns: 1.2fr 1fr;
	}
}

.cottage-newsletter__title {
	margin: 0;
	font-size: 1.5rem;
	line-height: 1.25;
}

.cottage-newsletter__intro {
	margin: 0.625rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--cottage-stone);
}

.cottage-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 0.625rem;
}

/*
 * The 12rem basis belongs on the wrapper, which is a child of the row-direction
 * form. Leaving it on the input made the basis a *height* instead, because the
 * label-plus-input wrapper is a column, which grew the field to 12rem tall.
 */
.cottage-newsletter__field {
	flex: 1 1 12rem;
}

/*
 * Below this width the field and the button cannot share a row without the
 * button label wrapping, so the pair stacks and both go full width.
 */
@media (max-width: 480px) {
	.cottage-newsletter__form {
		flex-direction: column;
		align-items: stretch;
	}

	/*
	 * The form is a column here, so the wrapper's 12rem basis would be read as
	 * a height and leave 12rem of dead space under the input.
	 */
	.cottage-newsletter__field {
		flex: 0 0 auto;
	}

	.cottage-newsletter__form .cottage-button {
		width: 100%;
	}
}

/* ------------------------------------------------------- Booking request form */

.cottage-request__card {
	max-width: 52rem;
	margin-inline: auto;
	padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
	background: #fff;
	border: 1px solid var(--cottage-line);
	border-radius: var(--cottage-radius-lg);
	box-shadow: var(--cottage-shadow);
}

/* One column on a phone; two once there is room for a label pair per row. */
.cottage-request__grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.cottage-request__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.cottage-request__message {
	margin-top: 1rem;
}

.cottage-request__form textarea.cottage-field__input {
	min-height: 7rem;
	line-height: 1.6;
	resize: vertical;
}

/* ------------------------------------------------- Estimate panel */

.cottage-request__quote {
	margin: 1.5rem 0 0;
	padding: 1rem 1.1rem;
	border-radius: var(--cottage-radius);
	background: var(--cottage-sand);
	font-size: 0.95rem;
}

.cottage-request__quote-hint {
	margin: 0;
	color: var(--cottage-stone);
}

.cottage-request__quote-lines {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cottage-request__quote-lines li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.3rem 0;
	color: var(--cottage-stone);
}

.cottage-request__quote-total {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	align-items: baseline;
	margin: 0.5rem 0 0;
	padding-top: 0.6rem;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	color: var(--cottage-ink);
}

.cottage-request__quote-total strong,
.cottage-modal__total strong {
	font-size: 1.25rem;
	font-variant-numeric: tabular-nums;
}

/* On the confirmation panel the figure stands alone, with no line items above
   it to be separated from. */
.cottage-request__quote-total--done {
	margin-top: 1.25rem;
	padding: 0.75rem 1.1rem;
	border-top: 0;
	border-radius: var(--cottage-radius);
	background: var(--cottage-sand);
}

.cottage-request__quote-note,
.cottage-modal__note {
	margin: 0.6rem 0 0;
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--cottage-stone);
}

.cottage-modal__total {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	align-items: baseline;
	margin: 1.25rem 0 0;
	padding: 0.75rem 1.1rem;
	border-radius: var(--cottage-radius);
	background: var(--cottage-sand);
	color: var(--cottage-ink);
}

.cottage-request__actions {
	margin: 1.5rem 0 0;
}

/* Full width on a phone, where a centred pill wastes the row. */
.cottage-request__actions .cottage-button {
	width: 100%;
}

@media (min-width: 640px) {
	.cottage-request__actions .cottage-button {
		width: auto;
		min-width: 16rem;
	}
}

.cottage-request__note {
	margin: 1rem 0 0;
	font-size: 0.85rem;
	color: var(--cottage-stone);
}

.cottage-request__status {
	margin: 1rem 0 0;
	padding: 0.9rem 1.1rem;
	border-radius: var(--cottage-radius);
	border-left: 4px solid var(--cottage-stone);
	background: var(--cottage-sand);
	font-size: 0.95rem;
}

.cottage-request__status[data-state='error'] {
	border-left-color: var(--cottage-clay);
	background: #e0e0e0;
}

.cottage-request__error {
	margin: 0 0 1.25rem;
	padding: 0.9rem 1.1rem;
	border-radius: var(--cottage-radius);
	border-left: 4px solid var(--cottage-clay);
	background: #e0e0e0;
	font-size: 0.95rem;
}

/*
 * The honeypot. Moved off-screen rather than `display:none`, because some bots
 * skip fields that are obviously hidden — and kept out of the accessibility
 * tree by `aria-hidden` on the wrapper so no screen reader ever offers it.
 */
.cottage-request__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --------------------------------------------- No-JavaScript confirmation */

.cottage-request__done {
	text-align: center;
}

.cottage-request__done:focus {
	outline: none;
}

.cottage-request__tick,
.cottage-modal__tick {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	margin: 0 auto 1.25rem;
	border-radius: 999px;
	background: #ededed;
	color: var(--cottage-moss);
}

.cottage-request__tick .cottage-icon,
.cottage-modal__tick .cottage-icon {
	width: 1.75rem;
	height: 1.75rem;
}

.cottage-request__done-title,
.cottage-modal__title {
	margin: 0;
	font-size: 1.375rem;
	line-height: 1.25;
}

.cottage-request__done-text,
.cottage-modal__text {
	margin: 0.75rem 0 0;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--cottage-stone);
}

.cottage-request__reference,
.cottage-modal__reference {
	margin: 1.25rem 0 0;
	font-size: 0.9375rem;
	color: var(--cottage-stone);
}

.cottage-request__reference strong,
.cottage-modal__reference strong {
	display: inline-block;
	margin-left: 0.375rem;
	padding: 0.25rem 0.6rem;
	border-radius: 6px;
	background: var(--cottage-sand);
	color: var(--cottage-ink);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	letter-spacing: 0.04em;
}

/* --------------------------------------------------------------- Modal */

.cottage-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: 1.25rem;
	/* Clears the phone's home indicator and the sticky booking bar. */
	padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
}

.cottage-modal[hidden] {
	display: none;
}

/*
 * A scrim strong enough that the page behind stops competing for attention.
 * Anything lighter and the confirmation reads as part of the page rather than
 * as the answer to what the guest just did.
 */
.cottage-modal__scrim {
	position: absolute;
	inset: 0;
	background: rgba(24, 24, 24, 0.58);
	animation: cottage-fade 0.2s var(--cottage-ease) both;
}

.cottage-modal__panel {
	position: relative;
	width: min(30rem, 100%);
	max-height: calc(100dvh - 2.5rem);
	overflow-y: auto;
	padding: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
	background: #fff;
	border-radius: var(--cottage-radius-lg);
	box-shadow: var(--cottage-shadow-lift);
	text-align: center;
	animation: cottage-pop 0.25s var(--cottage-ease) both;
}

.cottage-modal__panel:focus {
	outline: none;
}

.cottage-modal__close {
	margin-top: 1.75rem;
	width: 100%;
}

/* Nothing behind the modal should scroll while it is open. */
.cottage-modal-open,
.cottage-modal-open body {
	overflow: hidden;
}

@keyframes cottage-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes cottage-pop {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------------------------------ Editor tweaks */

.cottage-editor-preview {
	pointer-events: none;
}

.cottage-editor-why__eyebrow {
	margin: 0 0 0.5rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cottage-clay);
	text-align: center;
}

.cottage-editor-why__title {
	margin: 0 0 1.5rem;
	text-align: center;
}

/* -------------------------------------------------------- Motion preference */

/*
 * Anyone who has asked their operating system to reduce motion gets a static
 * page: no rise-in, no bobbing arrow, no hover lifts, and instant scrolling.
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.cottage-hero__inner {
		animation: none;
	}

	.cottage-hero__cue {
		animation: none;
	}

	.cottage-highlight:hover,
	.cottage-reason:hover,
	.cottage-attraction:hover,
	.cottage-button:hover {
		transform: none;
	}

	.cottage-gallery__item:hover .cottage-gallery__image,
	.cottage-attraction:hover .cottage-attraction__image {
		transform: none;
	}
}

/* ------------------------------------------------------------- Print styles */

@media print {
	.cottage-hero__media,
	.cottage-hero__cue,
	.cottage-reviews__nav,
	.cottage-newsletter,
	.cottage-map__frame {
		display: none !important;
	}

	.cottage-hero,
	.cottage-booking {
		color: #000;
		background: none;
	}

	.cottage-hero__title,
	.cottage-booking__title {
		color: #000;
		text-shadow: none;
	}

	.cottage-faq__item {
		break-inside: avoid;
	}

	.cottage-faq__answer {
		display: block !important;
	}
}