/*
 * Design "Retreat": in the manner of a sustainable wellness-resort site. Earthy and slow: an oat and
 * linen page, terracotta and olive, soft serif titles, a generous line height and organic shapes.
 * Photos are pebbles (irregular rounded outlines), never rectangles. The hero is not a full-bleed
 * photo: the photo is a large pebble on the right and the title flows around its curve (a float
 * with shape-outside), the search form a linen stone beside it. The sections below are stepping
 * stones, offset left and right in turn: About a linen stone whose photo rises out of it, the
 * gallery offset right with photos of different pebble shapes, amenities as round icon pebbles,
 * the prices band a rounded stone with the calendar card stepping off it, the reviews on a
 * textured clay band with staggered cards, house rules as gentle cards, Get in Touch a sand
 * stone with its photo pebble half outside, a footer with a soft curved top.
 * Loaded after main.css for villas with "villa.design": "retreat". Same sections, order and markup
 * as Classic; only the look and the layout change. Colours: villa_designs().
 */

/* ==========================================================================
   Fonts (self-hosted): Fraunces (titles, latin + latin-ext; Greek falls back to EB Garamond),
   Manrope (text, latin + latin-ext + greek)
   ========================================================================== */

@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/eb-garamond-greek-400-italic.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/eb-garamond-greek-400-normal.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/eb-garamond-greek-500-normal.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/fraunces-latin-400-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/fraunces-latin-ext-400-italic.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/fraunces-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/fraunces-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/fraunces-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/fraunces-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/manrope-greek-400-normal.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/manrope-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/manrope-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/manrope-greek-500-normal.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/manrope-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/manrope-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/manrope-greek-600-normal.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/manrope-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/manrope-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
	--oat: #efe7da; /* the page */
	--linen: #f8f3ea; /* stones and cards */
	--sand: #e5d9c6; /* deeper stones, icon pebbles */
	--clay: #94512f; /* the reviews band */
	--clay-light: #b86d45;
	--clay-dark: #6f3a20;
	--moss: #2f3727; /* footer */
	--color-text: #3a3128;
	--color-text-muted: #675b4e;
	--color-bg: var(--oat);
	--color-bg-soft: #e7ddcd;
	--color-bg-sand: var(--sand);
	--color-footer: var(--moss);
	--color-border: rgb(58 49 40 / 0.12);
	--color-day-available: #e2e4cf; /* plain colours: the design check reads hex/rgb only */
	--color-day-today: #3f4a33;
	--color-day-booked: #9c4f2c;
	--color-day-past: #e9e2d6;
	--font-heading: "Fraunces", "EB Garamond", Georgia, "Times New Roman", serif;
	--font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--on-button: #fff;
	--radius: 22px;
	--shadow-card: 0 24px 60px rgb(84 60 36 / 0.1);
	--section-space: clamp(84px, 7.4vw, 140px);
	--edge: clamp(20px, 5vw, 96px); /* page edge to the hero, bands and stones */
	--step: clamp(0px, 7vw, 150px); /* how far a stepping stone moves to one side */

	/* Pebbles: elliptical corners of different sizes, so no two photos have the same outline */
	--pebble-1: 62% 38% 54% 46% / 48% 56% 44% 52%;
	--pebble-2: 44% 56% 38% 62% / 58% 44% 56% 42%;
	--pebble-3: 54% 46% 64% 36% / 42% 60% 40% 58%;
	--pebble-4: 38% 62% 50% 50% / 52% 40% 60% 48%;

	/* Stones: large soft corners for cards and bands */
	--stone: 64px 96px 72px 110px / 72px 64px 104px 80px;
	--stone-soft: 34px 48px 30px 52px / 40px 32px 50px 36px;
	--button-shape: 30px 26px 32px 24px / 26px 32px 24px 30px;
}

/* Each villa sets its own button and accent colour: pick the text colour from its lightness */
@supports (color: rgb(from red r g b)) {
	:root {
		/* Grey from 21 to 255: dark when the colour is light (perceived brightness above 150), else white */
		--on-button: rgb(from var(--color-button) clamp(21, calc((150 - (0.299 * r + 0.587 * g + 0.114 * b)) * 1000), 255) clamp(21, calc((150 - (0.299 * r + 0.587 * g + 0.114 * b)) * 1000), 255) clamp(21, calc((150 - (0.299 * r + 0.587 * g + 0.114 * b)) * 1000), 255));
		--on-accent: rgb(from var(--color-accent) clamp(21, calc((150 - (0.299 * r + 0.587 * g + 0.114 * b)) * 1000), 255) clamp(21, calc((150 - (0.299 * r + 0.587 * g + 0.114 * b)) * 1000), 255) clamp(21, calc((150 - (0.299 * r + 0.587 * g + 0.114 * b)) * 1000), 255));
	}
}

/* Where the browser has it, contrast-color(): black or white, whichever reads better on the colour */
@supports (color: contrast-color(red)) {
	:root {
		--on-button: contrast-color(var(--color-button));
		--on-accent: contrast-color(var(--color-accent));
	}
}

@media (max-width: 768px) {
	:root {
		--section-space: 72px;
		--edge: var(--gutter);
		--step: 0px;
		--stone: 40px 56px 44px 60px / 44px 40px 58px 48px;
	}
}

/* ==========================================================================
   Base: slow and breathing
   ========================================================================== */

body {
	font-size: 16px;
	line-height: 1.85;
}

h1,
h2,
h3,
h4 {
	font-weight: 400;
	letter-spacing: -0.012em;
	line-height: 1.16;
}

.button {
	min-height: 52px;
	padding: 0 30px;
	border-radius: var(--button-shape);
	color: var(--on-button);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: none;
}

.button--outline:hover,
.skip-link:focus {
	color: var(--on-button);
}

/* A small terracotta pebble before each label, in lower case italic */
.section-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	color: var(--color-accent);
	font-family: var(--font-heading);
	font-size: 19px;
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.section-label::before {
	content: "";
	flex: none;
	width: 12px;
	height: 9px;
	border-radius: var(--pebble-1);
	background: currentColor;
	opacity: 0.8;
}

.section-title {
	font-size: clamp(34px, 3.3vw, 62px);
	text-wrap: balance;
}

.link-arrow {
	padding: 10px 20px;
	border-radius: var(--button-shape);
	background: var(--sand);
	font-size: 14px;
	letter-spacing: 0.02em;
	text-transform: none;
}

.link-arrow:hover {
	color: var(--color-text);
	background: #dccdb6;
}

/* ==========================================================================
   Header: oat, the name in the soft serif, links in sentence case
   ========================================================================== */

.site-header {
	background: var(--oat);
	border-bottom: 1px solid var(--color-border);
}

.site-header > .container {
	max-width: none;
	padding-inline: var(--edge);
}

.site-branding__name {
	font-size: 25px;
	font-weight: 400;
	letter-spacing: -0.01em;
	text-transform: none;
}

.site-branding__location {
	font-family: var(--font-heading);
	font-size: 14px;
	font-style: italic;
	letter-spacing: 0;
	text-transform: none;
}

.site-nav__menu {
	gap: 6px;
}

.site-nav__menu a {
	display: inline-block;
	padding: 6px 14px;
	border-radius: var(--button-shape);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-transform: none;
	transition: background-color 0.3s ease;
}

.site-nav__menu a:hover {
	background: var(--sand);
	color: var(--color-text);
}

.language-switcher ul {
	border-radius: 20px;
	background: var(--linen);
	overflow: hidden;
}

.language-list a {
	border-radius: 999px;
}

@media (max-width: 900px) {
	.site-branding__name {
		font-size: 21px;
		letter-spacing: 0;
	}

	.site-branding__location {
		font-size: 13px;
		letter-spacing: 0;
	}

	.site-nav {
		padding-bottom: 32px;
		background: var(--oat);
		border-bottom: 0;
		border-radius: 0 0 56px 72px / 0 0 40px 48px;
		box-shadow: 0 30px 50px rgb(84 60 36 / 0.16);
	}

	.site-nav__menu {
		gap: 4px;
	}

	.site-nav__menu a {
		padding: 4px 0;
		font-family: var(--font-heading);
		font-size: 28px;
		font-weight: 400;
		letter-spacing: -0.01em;
	}

	.site-nav__menu a:hover {
		background: none;
		color: var(--color-accent);
	}

	.site-nav__close {
		border-radius: var(--button-shape);
		letter-spacing: 0.03em;
		text-transform: none;
	}
}

/* ==========================================================================
   Hero: the photo a large pebble on the right, the title flowing around its curve, the search
   form a linen stone beside it. A float with shape-outside: the lines follow the pebble's outline.
   ========================================================================== */

.hero {
	display: block;
	min-height: 0;
	padding: clamp(28px, 3vw, 56px) var(--edge) clamp(96px, 8vw, 140px);
	background: var(--oat);
	color: var(--color-text);
}

.admin-bar .hero {
	min-height: 0;
}

/* A soft clay pebble peeking out behind the photo's upper right */
.hero::after {
	inset: clamp(12px, 1.4vw, 28px) calc(var(--edge) - clamp(14px, 2vw, 40px)) auto auto;
	width: clamp(150px, 14vw, 260px);
	aspect-ratio: 1 / 0.82;
	border-radius: var(--pebble-3);
	background: #e3cdb6;
}

.hero__photo {
	position: relative;
	inset: auto;
	z-index: 1;
	float: right;
	width: min(52%, 860px);
	height: clamp(480px, 76vh, 800px);
	margin: 0 0 24px clamp(20px, 2vw, 40px);
	border-radius: var(--pebble-1);
	shape-outside: border-box;
	shape-margin: clamp(18px, 2vw, 36px);
}

.hero__inner {
	z-index: 2;
	max-width: none;
	margin: 0;
	padding: clamp(32px, 6vh, 96px) 0 0;
}

.hero__content {
	text-align: left;
}

.hero__title {
	max-width: none;
	margin: 0 0 clamp(20px, 2vw, 32px);
	font-size: clamp(50px, 5.6vw, 108px);
	line-height: 1.04;
	letter-spacing: -0.025em;
	text-wrap: pretty;
}

.hero__text {
	max-width: 32em;
	margin: 0;
	color: var(--color-text-muted);
	font-size: 17px;
	line-height: 1.9;
}

.hero__text p:last-child {
	margin-bottom: 0;
}

.hero .availability-form-section {
	margin-top: clamp(32px, 4vw, 64px);
}

.hero .availability-form-section > .container {
	max-width: none;
	padding: 0;
}

/* A grid: next to the float it is narrowed to the room left beside the pebble */
.hero .availability-form {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 18px;
	width: auto;
	max-width: 600px;
	margin: 0;
	padding: clamp(22px, 2.2vw, 34px);
}

.hero .availability-form__submit {
	min-height: 50px;
}

.hero__scroll {
	left: var(--edge);
	bottom: 32px;
	flex-direction: row;
	gap: 10px;
	transform: none;
	color: var(--color-text-muted);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: none;
}

/* No photo: an empty clay pebble takes the photo's place, and the title flows around it the same way */
.hero--no-photo::after {
	display: none;
}

.hero--no-photo .hero__content::before {
	content: "";
	float: right;
	width: min(42%, 640px);
	height: clamp(340px, 34vw, 560px);
	margin: 0 0 24px clamp(20px, 2vw, 40px);
	border-radius: var(--pebble-2);
	background:
		radial-gradient(ellipse at 30% 25%, rgb(255 255 255 / 0.28), transparent 55%),
		radial-gradient(ellipse at 75% 80%, rgb(111 58 32 / 0.35), transparent 60%),
		#c0805a;
	shape-outside: border-box;
	shape-margin: clamp(18px, 2vw, 36px);
}

/* Tablets and phones: the pebble on top, the title and the form under it */
@media (max-width: 900px) {
	.hero {
		padding: 20px var(--edge) 96px;
	}

	.hero::after {
		inset: 4px 6px auto auto;
		width: 92px;
		z-index: 2;
	}

	.hero__photo {
		float: none;
		width: 100%;
		height: auto;
		aspect-ratio: 5 / 4;
		margin: 0;
		shape-outside: none;
	}

	.hero__inner {
		padding-top: 32px;
	}

	.hero__title {
		font-size: clamp(40px, 7vw, 60px);
	}

	.hero .availability-form {
		max-width: 640px;
	}

	.hero--no-photo .hero__content::before {
		float: none;
		display: block;
		width: 72%;
		height: auto;
		aspect-ratio: 5 / 4;
		margin: 0 0 32px auto;
	}
}

@media (max-width: 768px) {
	.hero__photo {
		aspect-ratio: 1 / 1.05;
	}

	.hero__title {
		font-size: clamp(38px, 10.6vw, 48px);
		line-height: 1.06;
	}

	.hero__text {
		font-size: 16px;
		line-height: 1.85;
	}

	.hero .availability-form {
		grid-template-columns: minmax(0, 1fr);
	}

	.hero__scroll {
		bottom: 28px;
	}
}

@media (max-width: 420px) {
	.hero .availability-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px 12px;
	}

	.hero .availability-form__field:has(select),
	.hero .availability-form__submit {
		grid-column: 1 / -1;
	}
}

/* ==========================================================================
   Availability form: a linen stone, fields as soft pills
   ========================================================================== */

.availability-form {
	border-radius: var(--stone-soft);
	background: var(--linen);
	box-shadow: var(--shadow-card);
}

.availability-form__field label {
	color: var(--color-text-muted);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-transform: none;
}

.availability-form input,
.availability-form select,
.availability-form .choices__inner {
	border: 1px solid #ddd0bd;
	border-radius: 999px;
	background-color: #fffcf7;
	padding-left: 20px;
}

.availability-form input[readonly] {
	background-color: #fffcf7;
	background-position: right 18px center;
}

.availability-form .choices.is-focused .choices__inner,
.availability-form .choices.is-open .choices__inner {
	border-radius: 24px;
}

.availability-form .choices__list--dropdown {
	margin-top: 6px;
	border-color: #ddd0bd;
	border-radius: 20px;
	overflow: hidden;
}

.availability-form .choices__list--dropdown .choices__item--selectable.is-highlighted {
	background: var(--color-day-available);
}

/* Date picker */
.flatpickr-calendar {
	border: 0;
	border-radius: 28px;
	background: var(--linen);
	box-shadow: 0 24px 60px rgb(84 60 36 / 0.2);
}

.flatpickr-current-month {
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 400;
}

.flatpickr-current-month span.cur-month,
.flatpickr-current-month input.cur-year {
	font-weight: 400;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
	border-radius: 50%;
}

.flatpickr-day {
	border-radius: 16px;
}

.flatpickr-day.inRange,
.flatpickr-day.inRange:hover {
	border-radius: 0;
	background: #efdccd;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.flatpickr-disabled.startRange,
.flatpickr-day.selected.startRange,
.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange {
	border-radius: 16px;
	color: var(--on-accent, #fff);
}

/* ==========================================================================
   About: the first stepping stone, to the left. A linen stone; the photo pebble rises out of it.
   ========================================================================== */

.about {
	padding-top: calc(var(--section-space) * 0.9);
}

.about__inner {
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	align-items: center;
	gap: clamp(36px, 5vw, 96px);
	width: auto;
	max-width: 1400px;
	margin: 0 calc(var(--edge) + var(--step)) 0 max(var(--edge), (100% - 1560px) / 2);
	padding: 0 clamp(28px, 5vw, 96px) clamp(40px, 5vw, 88px);
	border-radius: var(--stone);
	background: var(--linen);
}

.about__photo {
	align-self: start;
	margin-top: calc(-1 * clamp(48px, 5vw, 96px));
	border-radius: var(--pebble-2);
}

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

.about__content {
	padding-top: clamp(40px, 5vw, 88px);
}

.about__text {
	font-size: 17px;
	line-height: 1.95;
}

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

.about--no-photo .about__inner {
	max-width: 900px;
}

@media (max-width: 768px) {
	.about__inner {
		grid-template-columns: minmax(0, 1fr);
		padding: 0 22px 36px;
		gap: 0;
	}

	.about__photo {
		width: 86%;
		margin: -36px auto 0;
	}

	.about__content {
		padding-top: 32px;
	}

	.about__text {
		font-size: 16px;
		line-height: 1.85;
	}
}

/* ==========================================================================
   Gallery: the second stone, to the right; every photo its own pebble
   ========================================================================== */

.small-gallery {
	padding-top: 0;
}

.small-gallery > .container {
	max-width: 1760px;
	padding-inline: calc(var(--edge) + var(--step)) var(--edge);
}

.small-gallery .section-title {
	margin-bottom: clamp(32px, 3vw, 56px);
}

.small-gallery__grid {
	grid-template-rows: repeat(2, clamp(200px, 21vw, 340px));
	gap: clamp(14px, 1.4vw, 24px);
}

.small-gallery__item {
	border-radius: var(--pebble-1);
	background: var(--sand);
}

.small-gallery__item:nth-child(4n + 2) {
	border-radius: var(--stone);
}

.small-gallery__item:nth-child(4n + 3) {
	border-radius: var(--pebble-3);
}

.small-gallery__item:nth-child(4n + 4) {
	border-radius: var(--pebble-4);
}

.small-gallery__row {
	gap: clamp(14px, 1.4vw, 24px);
	height: clamp(170px, 15vw, 260px);
	margin-top: clamp(14px, 1.4vw, 24px);
}

/* The row steps gently up and down, like stones across a stream */
.small-gallery__row > .small-gallery__item:nth-child(even) {
	translate: 0 26px;
}

.small-gallery__caption {
	left: 22px;
	right: 22px;
	bottom: 18px;
	font-weight: 500;
	text-align: center;
}

.small-gallery__more {
	margin-top: 56px;
	text-align: left;
}

@media (max-width: 768px) {
	.small-gallery__grid,
	.small-gallery__grid--2,
	.small-gallery__grid--3 {
		grid-template-rows: none;
		gap: 12px;
		grid-auto-rows: 46vw;
	}

	.small-gallery__row {
		gap: 12px;
		height: auto;
		margin-top: 12px;
	}

	.small-gallery__row > .small-gallery__item {
		flex-basis: calc(50% - 6px);
		height: 46vw;
	}

	.small-gallery__row > .small-gallery__item:nth-child(even) {
		translate: 0 16px;
	}

	.small-gallery__more {
		margin-top: 40px;
	}
}

/* ==========================================================================
   Amenities: round icon pebbles with the name under each
   ========================================================================== */

.amenities {
	padding-top: 0;
}

.amenities__grid {
	--amenity-gap: clamp(20px, 2.4vw, 40px);
	row-gap: clamp(32px, 3vw, 48px);
	max-width: 1180px;
	margin-inline: auto;
}

.amenity {
	align-items: center;
	gap: 14px;
	padding: 0;
	background: none;
	box-shadow: none;
	text-align: center;
}

.amenity__icon {
	width: 84px;
	height: 76px;
	padding: 24px 26px;
	border-radius: var(--pebble-1);
	background: var(--sand);
	color: var(--color-text);
	stroke-width: 1.3;
	transition: background-color 0.4s ease, color 0.4s ease;
}

.amenity:nth-child(3n + 2) .amenity__icon {
	border-radius: var(--pebble-2);
	background: #e2dfc8;
}

.amenity:nth-child(3n + 3) .amenity__icon {
	border-radius: var(--pebble-3);
	background: #ecd6c4;
}

.amenity:hover .amenity__icon {
	background: var(--color-accent);
	color: var(--on-accent, #fff);
}

.amenity__label {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
}

@media (max-width: 600px) {
	.amenities__grid {
		--amenity-gap: 8px;
		--amenity-columns-now: 3;
		row-gap: 26px;
	}

	.amenity {
		gap: 10px;
	}

	.amenity__icon {
		width: 64px;
		height: 58px;
		padding: 17px 19px;
	}

	.amenity__label {
		font-size: 13px;
		line-height: 1.4;
	}
}

/* ==========================================================================
   Prices: the third stone, to the left: a rounded photo band, the calendar card stepping off
   it to the right
   ========================================================================== */

.prices {
	--prices-card-overlap: clamp(120px, 11vw, 190px);
	padding-top: 0;
}

.prices__band {
	justify-content: flex-start;
	margin-inline: var(--edge) calc(var(--edge) + var(--step));
	padding: clamp(64px, 6vw, 110px) 0 calc(var(--prices-card-overlap) + 48px);
	border-radius: 80px 180px 70px 150px / 90px 120px 80px 130px;
	background: #4a5340;
	text-align: left;
}

.prices__band::after {
	background: linear-gradient(100deg, rgb(38 30 20 / 0.62), rgb(38 30 20 / 0.18) 70%);
}

.prices__band--no-photo {
	background-image:
		radial-gradient(ellipse at 85% 20%, rgb(255 255 255 / 0.1), transparent 50%),
		radial-gradient(ellipse at 10% 90%, rgb(20 24 14 / 0.35), transparent 55%);
}

.prices__band--no-photo::after {
	display: none;
}

.prices__heading {
	max-width: none;
	margin: 0;
	padding-inline: clamp(32px, 6vw, 120px);
}

.prices__heading .section-label {
	color: #f3dccb;
}

.prices__heading .section-title {
	max-width: 13em;
}

/* A linen button: it reads on the photo and on the plain olive band alike */
.prices__heading .button {
	background: var(--linen);
	color: var(--color-text);
}

.prices__heading .button:hover {
	background: #fff;
}

.prices > .container {
	max-width: 1760px;
	padding-inline: calc(var(--edge) + var(--step) * 1.6) var(--edge);
}

.prices__card {
	max-width: 1240px;
	margin-right: 0;
	padding: clamp(32px, 3.4vw, 56px) clamp(22px, 4vw, 64px) 36px;
	border-radius: var(--stone);
	background: var(--linen);
}

.calendar-month__title {
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 400;
}

.calendar-month__grid {
	gap: 5px;
}

.calendar-month__weekday {
	font-weight: 500;
}

.calendar-day {
	border-radius: 14px;
}

.calendar__swatch {
	border-radius: var(--pebble-1);
}

.calendar__button {
	border-radius: 50%;
}

@media (max-width: 768px) {
	.prices {
		--prices-card-overlap: 96px;
	}

	.prices__band {
		padding-top: 56px;
		border-radius: 44px 72px 36px 64px / 48px 56px 40px 60px;
	}

	.prices__heading {
		padding-inline: 26px;
	}

	.prices > .container {
		padding-inline: calc(var(--edge) + 10px) var(--edge);
	}

	.prices__card {
		padding: 28px 16px 24px;
	}

	.calendar-month__grid {
		gap: 3px;
	}

	.calendar-day {
		min-height: 44px;
		border-radius: 10px;
	}
}

/* ==========================================================================
   Rooms (villas with room types, in place of the prices): linen stones with pebble photos
   ========================================================================== */

.rooms__grid {
	gap: clamp(20px, 2.4vw, 36px);
}

.room-card {
	border: 0;
	border-radius: var(--stone-soft);
	background: var(--linen);
	box-shadow: none;
}

.room-card__photo {
	margin: 14px 14px 0;
	overflow: hidden;
	border-radius: var(--stone-soft);
}

.room-card:nth-child(even) .room-card__photo {
	border-radius: var(--pebble-4);
}

.room-card__name {
	font-size: 26px;
}

/* ==========================================================================
   Reviews: a textured clay band across the page, the cards staggered like stones
   ========================================================================== */

.reviews {
	position: relative;
	margin: 0 clamp(0px, 1.4vw, 24px);
	padding-block: clamp(80px, 8vw, 140px) clamp(96px, 9vw, 160px);
	border-radius: 120px 60px 140px 80px / 70px 40px 80px 56px;
	background-color: var(--clay);
	background-image:
		radial-gradient(rgb(255 236 214 / 0.09) 1px, transparent 1.6px),
		radial-gradient(rgb(60 26 10 / 0.12) 1px, transparent 1.8px),
		radial-gradient(ellipse at 12% 8%, var(--clay-light), transparent 55%),
		radial-gradient(ellipse at 92% 96%, var(--clay-dark), transparent 50%),
		linear-gradient(170deg, #a35d39, #8a4a2b);
	background-size: 7px 7px, 11px 11px, auto, auto, auto;
	background-position: 0 0, 3px 5px, 0 0, 0 0, 0 0;
	color: #fbf3e9;
}

.reviews .section-label {
	color: #f6d7c2;
}

.reviews .section-title {
	color: #fbf3e9;
}

.reviews__list {
	align-items: flex-start;
	gap: clamp(20px, 2.4vw, 36px);
	max-width: 1240px;
}

.review {
	position: relative;
	padding: clamp(32px, 3vw, 48px) clamp(26px, 2.6vw, 40px) clamp(28px, 2.6vw, 40px);
	border-radius: 48px 64px 40px 72px / 56px 44px 68px 52px;
	background: var(--linen);
	color: var(--color-text);
	box-shadow: 0 24px 50px rgb(60 26 10 / 0.25);
}

/* The middle stone steps down */
.review:nth-child(2) {
	margin-top: clamp(32px, 4vw, 72px);
	border-radius: 64px 44px 72px 40px / 48px 64px 44px 60px;
}

.review:nth-child(3) {
	margin-top: clamp(12px, 1.4vw, 24px);
}

/* Stars, then the words, then who wrote them */
.review__stars {
	order: -1;
	margin: 0;
	color: #c27a3c;
	font-size: 15px;
}

.review__stars-off {
	color: #e3d7c6;
}

.review__text {
	color: var(--color-text);
	font-family: var(--font-heading);
	font-size: 18px;
	font-style: italic;
	line-height: 1.7;
}

.review__author {
	order: 1;
	padding-top: 16px;
	border-top: 1px solid var(--color-border);
}

.review__name {
	color: var(--color-text);
	font-weight: 600;
}

.review__country {
	color: var(--color-text-muted);
	font-size: 13px;
}

.reviews__action {
	margin-top: clamp(56px, 5vw, 88px);
}

.reviews__action .button {
	background: var(--linen);
	color: var(--color-text);
}

.reviews__action .button:hover {
	background: #fff;
}

@media (max-width: 760px) {
	.reviews {
		margin-inline: 0;
		border-radius: 56px 32px 64px 40px / 40px 24px 44px 32px;
	}

	.review,
	.review:nth-child(2),
	.review:nth-child(3) {
		margin-top: 0;
	}

	.review:nth-child(2) {
		margin-left: 22px;
	}

	.review:nth-child(3) {
		margin-right: 22px;
	}

	.review__text {
		font-size: 17px;
	}
}

/* ==========================================================================
   House rules: gentle cards, the icon in a small pebble
   ========================================================================== */

.house-rules:not(.house-rules--small) {
	padding-top: var(--section-space);
}

.house-rules__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: clamp(16px, 1.8vw, 28px);
	max-width: 1180px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.house-rule {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px 28px 30px;
	border: 0;
	border-radius: var(--stone-soft);
	background: var(--linen);
}

.house-rule:nth-child(even) {
	border-radius: 48px 30px 52px 34px / 36px 46px 32px 50px;
}

.house-rule__name {
	align-items: center;
	gap: 14px;
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
}

.house-rule__icon {
	width: 46px;
	height: 42px;
	padding: 11px 12px;
	border-radius: var(--pebble-2);
	background: var(--sand);
	color: var(--color-accent);
}

.house-rule__value {
	font-size: 15px;
	line-height: 1.8;
}

/* Inside the Availability card: smaller cards on the oat */
.house-rules--small .house-rules__list {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.house-rules--small .house-rule {
	padding: 22px;
	background: var(--oat);
}

@media (max-width: 600px) {
	.house-rule {
		padding: 22px 22px 24px;
	}

	.house-rule__value {
		padding-left: 0;
	}
}

/* ==========================================================================
   Get in Touch: a sand stone, the photo pebble half outside it on the right
   ========================================================================== */

.get-in-touch {
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	margin: 40px calc(var(--edge) + var(--step) * 0.6) 0 var(--edge);
	background: none;
}

.get-in-touch__content {
	grid-column: 1 / -1;
	grid-row: 1;
	max-width: none;
	margin: 0;
	padding: clamp(48px, 5vw, 96px) calc(41.6% + clamp(32px, 4vw, 72px)) clamp(48px, 5vw, 96px) clamp(32px, 5vw, 96px);
	border-radius: var(--stone);
	background: var(--sand);
}

.get-in-touch__text {
	font-size: 17px;
	line-height: 1.9;
}

.get-in-touch__photo {
	position: relative;
	z-index: 1;
	grid-column: 2;
	grid-row: 1;
	margin: -40px clamp(24px, 3vw, 56px) -40px 0;
	overflow: hidden;
	border-radius: var(--pebble-3);
}

.get-in-touch__photo img {
	min-height: 0;
	max-height: none;
}

.get-in-touch--no-photo {
	grid-template-columns: minmax(0, 1fr);
	max-width: 1100px;
}

.get-in-touch--no-photo .get-in-touch__content {
	padding-inline: clamp(32px, 5vw, 96px);
}

.contact-items {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px 32px;
	text-align: left;
}

.contact-item {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	align-items: center;
	gap: 0 16px;
}

.contact-item__icon {
	grid-row: 1 / 3;
	width: 48px;
	height: 44px;
	padding: 12px 13px;
	border-radius: var(--pebble-4);
	background: var(--color-button);
	color: var(--on-button);
}

.contact-item__title {
	font-size: 19px;
	line-height: 1.3;
}

.contact-item__value {
	font-size: 15px;
	line-height: 1.5;
}

a.contact-item__value {
	color: #8a4527;
}

@media (max-width: 1100px) {
	.contact-items,
	.contact-items:where(:has(> :nth-child(3))) {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 768px) {
	.get-in-touch {
		grid-template-columns: minmax(0, 1fr);
		margin: 0 var(--edge);
	}

	.get-in-touch__content {
		padding: 44px 24px 48px;
	}

	.get-in-touch__photo {
		grid-column: 1;
		grid-row: 2;
		width: 88%;
		margin: -28px 0 0 auto;
	}

	.get-in-touch__photo img {
		min-height: 0;
		aspect-ratio: 1 / 0.9;
	}

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

/* ==========================================================================
   Footer: deep moss with a soft curved top
   ========================================================================== */

.site-footer {
	margin-top: var(--section-space);
	padding-block: clamp(72px, 6vw, 110px) 48px;
	border-radius: 50% 50% 0 0 / clamp(36px, 5vw, 90px) clamp(36px, 5vw, 90px) 0 0;
	background: var(--moss);
	color: #c9cbb9;
}

.site-footer__menu {
	gap: 10px 32px;
}

.site-footer__menu a {
	color: #f1ebdd;
	font-family: var(--font-heading);
	font-size: 19px;
	letter-spacing: 0;
	text-transform: none;
}

.site-footer__menu a:hover {
	color: #e8b896;
}

.platform-link {
	border-radius: var(--button-shape);
	color: #d8dac9;
}

.site-footer__legal a {
	color: #f1ebdd;
}

/* The theme pages already end on their own oat: the footer follows straight after */
.site-main:has(> .theme-page) + .site-footer {
	margin-top: 0;
}

@media (max-width: 768px) {
	.site-footer__menu a {
		font-size: 18px;
	}
}

/* ==========================================================================
   Theme pages (About, Gallery, Availability, Privacy): a rounded photo stone, a linen card
   stepping off it
   ========================================================================== */

.theme-page {
	padding-bottom: var(--section-space);
	background: var(--oat);
}

.theme-page__band {
	margin: 20px var(--edge) 0;
	border-radius: 70px 160px 60px 130px / 80px 110px 70px 120px;
	background: #4a5340;
}

.theme-page__band--no-photo {
	background-image:
		radial-gradient(ellipse at 80% 20%, rgb(255 255 255 / 0.1), transparent 50%),
		radial-gradient(ellipse at 15% 90%, rgb(20 24 14 / 0.3), transparent 55%);
}

.theme-page__band::after {
	background: rgb(38 30 20 / 0.12);
}

.theme-page__card {
	max-width: 1160px;
	border-radius: var(--stone);
	background: var(--linen);
	box-shadow: var(--shadow-card);
}

.theme-page__title {
	font-size: clamp(36px, 3.6vw, 64px);
	letter-spacing: -0.02em;
}

@media (max-width: 768px) {
	.theme-page {
		padding-bottom: 48px;
	}

	.theme-page__band {
		margin-top: 12px;
		border-radius: 40px 72px 32px 60px / 44px 52px 36px 56px;
	}

	.theme-page > .container {
		padding-inline: 10px;
	}

	.theme-page__card {
		--page-pad-x: 18px;
		border-radius: 40px 52px 44px 56px / 44px 40px 54px 48px;
	}
}

/* Gallery page: three columns, the middle one stepped down, every photo a pebble */
.gallery-grid {
	gap: clamp(12px, 1.4vw, 22px);
	padding-bottom: 48px;
}

.gallery-grid__item {
	border-radius: var(--pebble-1);
	background: var(--sand);
}

.gallery-grid__item:nth-child(3n + 2) {
	translate: 0 48px;
	border-radius: var(--pebble-2);
}

.gallery-grid__item:nth-child(3n + 3) {
	border-radius: var(--pebble-3);
}

.gallery-grid__item:nth-child(4n + 4) {
	border-radius: var(--stone);
}

.gallery-grid__caption {
	text-align: center;
}

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

.gallery-filter__button {
	padding: 8px 18px;
	border-color: #dccdb6;
	border-radius: var(--button-shape);
	background: var(--oat);
}

.gallery-filter__button[aria-pressed="true"] {
	color: var(--on-button);
}

@media (max-width: 768px) {
	.gallery-grid {
		gap: 10px;
		padding-bottom: 28px;
	}

	.gallery-grid__item:nth-child(3n + 2) {
		translate: none;
	}

	.gallery-grid__item:nth-child(even) {
		translate: 0 28px;
	}
}

/* About page: the photo a pebble, the host on a sand stone, the map rounded */
.about-page__photo {
	border-radius: var(--pebble-2);
}

.about-page__title,
.about-page__subtitle {
	letter-spacing: -0.015em;
}

.about-page .about__text {
	font-size: 17px;
	line-height: 1.95;
}

.owner-card {
	padding: clamp(24px, 3vw, 44px);
	border-radius: var(--stone-soft);
	background: var(--sand);
}

.owner-card__avatar {
	border-radius: var(--pebble-1);
	background: var(--clay);
	color: var(--linen);
}

.owner-card__label {
	font-family: var(--font-heading);
	font-size: 17px;
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.about-page__location {
	border-top: 0;
}

.about-page__map {
	overflow: hidden;
	border-radius: var(--stone-soft);
}

.about-page__map-load {
	border: 0;
	background: var(--sand);
}

.about-page__map-button {
	font-size: 14px;
	letter-spacing: 0.02em;
	text-transform: none;
}

/* Availability page: the result as gentle stones */
.availability-form-section--plain .availability-form {
	background: none;
}

.availability-result,
.availability-message,
.booking-request,
.house-rules--small {
	border-top-style: dashed;
	border-top-color: #d6c8b3;
}

.availability-result__notice {
	border-left: 0;
	border-radius: 20px;
	background: var(--sand);
}

.availability-result__villa .photo-slider {
	border-radius: var(--pebble-2);
}

.photo-slider__button {
	border-radius: 50%;
	background: var(--linen);
}

.availability-room {
	border: 0;
	border-radius: var(--stone-soft);
	background: var(--oat);
}

.availability-room__photo {
	border-radius: var(--pebble-4);
}

.booking-request__field input {
	border-color: #ddd0bd;
	border-radius: 999px;
	background: #fffcf7;
	padding-left: 20px;
}

.text-page {
	font-size: 16px;
	line-height: 1.9;
}