/*
 * Design "Members": in the manner of a private members' club and its houses. Deep bottle green and
 * cream, small brass details, tall heavy uppercase titles. The header has the name in the middle,
 * the menu on the left and the booking on the right, over a double brass rule. The hero is split:
 * a green panel on the left holds the title and the search form, the photo stands on the right in a
 * tall arched window with a brass outline. Below, the sections alternate on green and cream bands;
 * the amenities are a two-column "menu card" with dotted leaders, the reviews a row of serif
 * italic quotes divided by brass rules, the theme pages a cream card under a green plaque title.
 * Loaded after main.css for villas with "villa.design": "members". Same sections, order and markup
 * as Classic; only the look and the layout change. Default colours are in villa_designs().
 */

/* ==========================================================================
   Fonts (self-hosted: Archivo latin + latin-ext; Inter and EB Garamond latin, latin-ext, greek)
   Greek headings fall back to Inter, Archivo has no Greek.
   ========================================================================== */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/archivo-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: "Archivo"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/archivo-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; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/archivo-latin-800-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: "Archivo"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/archivo-latin-ext-800-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: "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: italic; font-weight: 400; font-display: swap; src: url("../fonts/eb-garamond-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: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/eb-garamond-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: "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: 400; font-display: swap; src: url("../fonts/eb-garamond-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: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/eb-garamond-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: "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: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/eb-garamond-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: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/eb-garamond-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: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-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: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-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: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-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: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-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: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-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: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-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: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-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: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-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: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-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 {
	--green: #1f3b2f; /* the club's bands */
	--green-deep: #15291f; /* footer, plaque titles */
	--green-soft: #2a4a3c; /* fields and lines on green */
	--cream: #f3ecdf; /* the cream bands */
	--cream-light: #faf6ee; /* cards on cream */
	--on-green: #f1e9d8;
	--on-green-muted: #c9c4b0;
	/* Brass: the accent as it is (on green), lightened for text on green, darkened for text on cream */
	--brass: var(--color-accent);
	--brass-light: var(--color-accent); /* brass as text on green */
	--brass-ink: color-mix(in srgb, var(--color-accent) 48%, #241a0e);
	--brass-line: color-mix(in srgb, var(--color-accent) 55%, transparent);
	--brass-hair: color-mix(in srgb, var(--color-accent) 32%, transparent);
	/* Text on the button and accent colours: white on dark ones, dark on light ones (below) */
	--on-button: #fff;
	--on-accent: #1b160d;
	--hero-edge: clamp(20px, 6vw, 112px);
	--hero-gap: clamp(32px, 5vw, 96px); /* green, right of the title and form */
	--hero-window-gap: clamp(32px, 4vw, 72px); /* cream, left of the window */

	--color-text: #1c2a22;
	--color-text-muted: #575c51;
	--color-bg: var(--cream);
	--color-bg-soft: #ebe3d3;
	--color-bg-sand: var(--cream);
	--color-dark: #15291f;
	--color-footer: var(--green-deep);
	--color-border: rgb(31 59 47 / 0.14);
	--color-day-available: #e3e6d6;
	--color-day-today: var(--green);
	--color-day-booked: #8c3b2e;
	--color-day-past: #ebe5d8;

	--font-heading: "Archivo", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-serif: "EB Garamond", Georgia, "Times New Roman", serif;
	--header-height: 96px;
	--shadow-card: 0 18px 50px rgb(21 41 31 / 0.14);
	--radius: 0;
}

/* 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));
	}
}

@media (max-width: 900px) {
	:root {
		--header-height: 72px;
	}
}

html {
	background: var(--cream);
}

body {
	font-size: 15px;
}

/* Tall, heavy, uppercase titles; no faux bold on the Greek fallback */
h1,
h2,
h3,
h4 {
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	overflow-wrap: break-word;
	font-synthesis-weight: none;
}

/* ==========================================================================
   Buttons, labels, titles
   ========================================================================== */

.button {
	min-height: 50px;
	padding: 0 30px;
	color: var(--on-button);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	box-shadow: inset 0 0 0 1px var(--brass-line);
}

.button--whatsapp {
	color: #fff;
	box-shadow: none;
}

/* On the green bands the buttons are brass */
.hero .button,
.small-gallery .button,
.prices .button,
.site-footer .button {
	background: var(--brass);
	color: var(--on-accent);
	box-shadow: none;
}

.hero .button:hover,
.small-gallery .button:hover,
.prices .button:hover,
.site-footer .button:hover {
	background: color-mix(in srgb, var(--brass) 82%, #fff);
}

.button--outline {
	border-color: var(--color-button);
	color: var(--color-button);
	box-shadow: none;
}

.button--outline:hover {
	color: var(--on-button);
}

/* "— AMENITIES —": small brass capitals between two short rules */
.section-label {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
	color: var(--brass-ink);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.3em;
}

.section-label::before,
.section-label::after {
	content: "";
	flex: none;
	width: 32px;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
}

.section-header--center .section-label {
	justify-content: center;
}

.section-label--light {
	color: var(--brass-light);
}

.section-title {
	font-size: clamp(34px, 3.6vw, 66px);
	line-height: 0.96;
}

.section-header--center .section-title {
	max-width: 15em;
	text-wrap: balance;
}

.section-title--light {
	color: var(--on-green);
}

.link-arrow {
	color: var(--color-text);
	letter-spacing: 0.2em;
}

.link-arrow:hover {
	color: var(--brass-ink);
}

@media (max-width: 768px) {
	.section-title {
		font-size: 32px;
	}
}

/* ==========================================================================
   Header: the name in the middle, the menu left, the booking right, a double brass rule under it
   ========================================================================== */

.site-header {
	background: var(--cream);
	border-bottom: 0;
	box-shadow: 0 1px 0 var(--brass-line), 0 4px 0 var(--cream), 0 5px 0 var(--brass-hair);
}

.site-branding {
	align-items: center;
	text-align: center;
}

.site-branding__name {
	font-family: var(--font-heading);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: 0.24em;
	line-height: 1.1;
	font-synthesis-weight: none;
}

.site-branding__location {
	margin-top: 4px;
	color: var(--brass-ink);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.3em;
}

.site-nav__menu {
	gap: 30px;
}

.site-nav__menu a {
	color: var(--color-text);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
}

.site-nav__menu a:hover {
	color: var(--brass-ink);
}

.site-header .button {
	min-height: 42px;
	padding: 0 22px;
}

.language-switcher ul {
	background: var(--cream-light);
}

.language-switcher a:hover,
.language-switcher a.is-current {
	color: var(--brass-ink);
}

@media (min-width: 901px) {
	/* The header across the whole screen (with margins): the menu, the name and the buttons each need room */
	.site-header .container {
		max-width: none;
		padding-inline: clamp(24px, 3vw, 56px);
	}

	.site-header__inner {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		gap: 32px;
	}

	.site-nav {
		grid-row: 1;
		grid-column: 1;
		justify-self: start;
	}

	.site-branding {
		grid-row: 1;
		grid-column: 2;
		justify-self: center;
		margin: 0;		/* A long name wraps into two even lines rather than running into the menu or the buttons */
		max-width: min(26vw, 420px);
	}

	.site-branding__name {
		white-space: normal;
		text-wrap: balance;
	}

	.site-header__actions {
		grid-row: 1;
		grid-column: 3;
	}
}

/* Narrow laptops: the WhatsApp button keeps only its icon and the menu draws closer, so the three columns fit */
@media (min-width: 901px) and (max-width: 1240px) {
	.site-nav__menu {
		gap: 20px;
	}

	.site-branding__name {
		font-size: 19px;
		letter-spacing: 0.18em;
	}

	.site-header .header-whatsapp {
		width: 44px;
		padding: 0;
	}

	.header-whatsapp__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}


/* Tablets and phones: the menu button left, the name centred, WhatsApp right */
@media (max-width: 900px) {
	.site-header__inner {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr) 44px;
		gap: 12px;
	}

	.site-header__actions {
		display: contents;
	}

	.menu-toggle {
		grid-row: 1;
		grid-column: 1;
		justify-self: start;
		padding: 8px 0;
	}

	.site-branding {
		grid-row: 1;
		grid-column: 2;
		margin: 0;
	}

	.site-branding__name {
		font-size: 17px;
		letter-spacing: 0.18em;
	}

	.site-branding__location {
		max-width: 100%;
		overflow: hidden;
		font-size: 9px;
		letter-spacing: 0.22em;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.header-whatsapp {
		grid-row: 1;
		grid-column: 3;
		justify-self: end;
	}

	.site-nav {
		padding: 28px var(--gutter) 24px;
		background: var(--cream-light);
		border-bottom: 1px solid var(--brass-line);
	}

	.site-nav__menu {
		gap: 0;
	}

	.site-nav__menu li {
		border-bottom: 1px dotted var(--brass-line);
	}

	.site-nav__menu a {
		display: block;
		padding: 14px 0;
		font-family: var(--font-heading);
		font-size: 22px;
		font-weight: 800;
		letter-spacing: 0.04em;
		font-synthesis-weight: none;
	}

	.site-nav__close {
		border-color: var(--brass-line);
	}
}

/* ==========================================================================
   Hero: a green panel on the left (title, text, search), the photo in an arched window on the right
   ========================================================================== */

.hero {
	display: grid;
	grid-template-columns: var(--hero-edge) minmax(0, 1fr) var(--hero-gap) var(--hero-window-gap) minmax(0, 0.78fr) var(--hero-edge);
	grid-template-rows: minmax(48px, 1fr) auto auto minmax(56px, 1fr);
	gap: 0;
	padding: 0;
	background: var(--cream);
	color: var(--on-green);
}

/* The green panel */
.hero::before {
	content: "";
	grid-row: 1 / -1;
	grid-column: 1 / 4;
	background: var(--green);
}

.hero::after {
	display: none;
}

/* The arched window, with a brass outline around it */
.hero__photo {
	position: relative;
	inset: auto;
	z-index: 1;
	grid-row: 1 / -1;
	grid-column: 5;
	width: 100%;
	height: calc(100% - clamp(32px, 4vw, 64px));
	margin-top: clamp(32px, 4vw, 64px);
	border-radius: 999px 999px 0 0;
	outline: 1px solid var(--brass-line);
	outline-offset: 10px;
}

.hero__inner {
	grid-row: 2;
	grid-column: 2;
	max-width: 660px;
	margin: 0;
	padding: 0;
}

.hero__content {
	text-align: left;
}

/* A brass rule and diamond over the title */
.hero__content::before {
	content: "";
	display: block;
	width: 72px;
	height: 10px;
	margin-bottom: 28px;
	background: var(--brass);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='10'%3E%3Cpath d='M0 5h56' stroke='%23000'/%3E%3Cpath d='M66 0l5 5-5 5-5-5z'/%3E%3C/svg%3E") no-repeat left center;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='10'%3E%3Cpath d='M0 5h56' stroke='%23000'/%3E%3Cpath d='M66 0l5 5-5 5-5-5z'/%3E%3C/svg%3E") no-repeat left center;
}

.hero__title {
	max-width: none;
	margin: 0 0 24px;
	color: var(--on-green);
	font-size: clamp(46px, 5vw, 96px);
	line-height: 0.92;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.hero__text {
	max-width: 520px;
	margin: 0;
	color: var(--on-green-muted);
	font-size: 16px;
	line-height: 1.75;
}

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

.hero .availability-form-section {
	grid-row: 3;
	grid-column: 2;
	margin-top: clamp(32px, 3vw, 48px);
}

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

.hero__scroll {
	display: none;
}

/* Tablets: a narrower window */
@media (max-width: 1100px) {
	.hero {
		grid-template-columns: var(--hero-edge) minmax(0, 1fr) 40px 32px minmax(0, 0.62fr) var(--hero-edge);
	}
}

/* Phones: the window on top, half on the cream; the green panel under it */
@media (max-width: 768px) {
	.hero {
		grid-template-columns: var(--gutter) minmax(0, 1fr) var(--gutter);
		grid-template-rows: auto auto auto 48px;
		min-height: 0;
	}

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

	.hero::before {
		grid-column: 1 / -1;
		margin-top: 52vw;
	}

	.hero__photo {
		grid-row: 1;
		grid-column: 2;
		width: calc(100% - 24px);
		height: min(112vw, 64svh);
		margin: 24px auto 0;
		object-fit: cover;
		outline-offset: 8px;
	}

	.hero__inner {
		grid-row: 2;
		grid-column: 2;
		padding-top: 44px;
	}

	.hero__content::before {
		margin-bottom: 22px;
	}

	.hero__title {
		font-size: 42px;
		margin-bottom: 18px;
	}

	.hero__text {
		font-size: 15px;
	}

	.hero .availability-form-section {
		grid-row: 3;
		grid-column: 2;
		margin-top: 32px;
	}
}

@media (max-width: 380px) {
	.hero__title {
		font-size: 36px;
	}
}

/* No photo: the green panel takes the whole hero, its content centred */
.hero--no-photo::before {
	grid-column: 1 / -1;
	margin-top: 0;
}

.hero--no-photo .hero__inner,
.hero--no-photo .availability-form-section {
	grid-column: 2 / 6;
	justify-self: center;
	width: 100%;
	max-width: 760px;
}

.hero--no-photo .hero__content {
	text-align: center;
}

.hero--no-photo .hero__content::before {
	margin-inline: auto;
}

.hero--no-photo .hero__text {
	margin-inline: auto;
}

.hero--no-photo .availability-form-section > .container {
	max-width: none;
}

@media (max-width: 768px) {
	.hero--no-photo {
		grid-template-rows: 0 auto auto 48px;
	}

	.hero--no-photo .hero__inner,
	.hero--no-photo .availability-form-section {
		grid-column: 2;
	}
}

/* ==========================================================================
   Availability form: on the green panel (hero) and in the page card (Availability)
   ========================================================================== */

.availability-form {
	padding: 28px 32px;
	background: var(--cream-light);
	box-shadow: var(--shadow-card);
}

.availability-form__field label {
	color: var(--color-text-muted);
	font-size: 11px;
	letter-spacing: 0.18em;
}

.availability-form input,
.availability-form select,
.availability-form input[readonly],
.availability-form .choices__inner {
	height: 52px;
	min-height: 52px;
	border: 1px solid rgb(31 59 47 / 0.22);
	background-color: #fff;
}

.availability-form input:focus,
.availability-form select:focus {
	outline-color: var(--brass);
}

.availability-form__submit {
	min-height: 52px;
}

/* Hero: no card; two by two, on a brass rule */
.hero .availability-form {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 16px;
	max-width: none;
	margin: 0;
	padding: 28px 0 0;
	border-top: 1px solid var(--brass-hair);
	background: transparent;
	box-shadow: none;
}

.hero .availability-form__field label {
	color: var(--brass-light);
}

.hero .availability-form input,
.hero .availability-form select,
.hero .availability-form input[readonly],
.hero .availability-form .choices__inner {
	border-color: transparent;
	background-color: var(--cream-light);
}

/* The Availability page: plain fields in the card */
.availability-form-section--plain .availability-form {
	background: transparent;
}

@media (max-width: 768px) {
	.availability-form {
		padding: 20px;
	}

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

/* Date picker and guests list: cream, the stay in green */
.flatpickr-calendar {
	background: var(--cream-light);
	border-color: var(--brass-line);
	box-shadow: 0 20px 50px rgb(21 41 31 / 0.2);
}

.flatpickr-current-month {
	font-family: var(--font-heading);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

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

.flatpickr-day.today {
	color: var(--brass-ink);
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
	color: var(--brass-ink);
}

.flatpickr-day.inRange,
.flatpickr-day.inRange:hover {
	background: color-mix(in srgb, var(--color-accent) 20%, var(--cream-light));
}

.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 {
	background: var(--green);
	color: var(--on-green);
}

.availability-form .choices__list--dropdown {
	background: var(--cream-light);
}

/* ==========================================================================
   About: cream; the photo in a framed print, the story beside it
   ========================================================================== */

.about {
	background: var(--cream);
}

.about__inner {
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(40px, 7vw, 128px);
}

.about--no-photo .about__inner {
	grid-template-columns: minmax(0, 1fr);
}

.about__photo {
	position: relative;
	box-shadow: var(--shadow-card);
}

/* A thin cream frame inside the print */
.about__photo::after {
	content: "";
	position: absolute;
	inset: 14px;
	border: 1px solid rgb(250 246 238 / 0.7);
	pointer-events: none;
}

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

.about__content {
	max-width: 600px;
}

.about__content .section-title {
	margin-bottom: 28px;
}

.about__text {
	font-size: 16px;
}

.about__signature {
	margin: 28px 0 32px;
	color: var(--brass-ink);
	font-family: var(--font-serif);
	font-size: 30px;
	font-style: italic;
	line-height: 1.2;
}

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

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

/* ==========================================================================
   Small gallery: a green band, the photos as framed prints
   ========================================================================== */

.small-gallery {
	padding-top: var(--section-space);
	background: var(--green);
	color: var(--on-green);
}

.small-gallery .section-title {
	display: flex;
	align-items: center;
	gap: 28px;
	margin-bottom: clamp(32px, 3vw, 56px);
	color: var(--on-green);
}

/* A brass rule runs from the title to the right edge */
.small-gallery .section-title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--brass-line);
}

.small-gallery__grid,
.small-gallery__row {
	gap: 12px;
}

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

.small-gallery__item {
	background: var(--green-soft);
}

.small-gallery__item::after {
	content: "";
	position: absolute;
	inset: 10px;
	border: 1px solid rgb(250 246 238 / 0.45);
	pointer-events: none;
}

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

.small-gallery .link-arrow {
	color: var(--brass-light);
}

.small-gallery .link-arrow:hover {
	color: var(--on-green);
}

@media (max-width: 768px) {
	.small-gallery__grid,
	.small-gallery__row {
		gap: 8px;
	}

	.small-gallery__row {
		margin-top: 8px;
	}

	.small-gallery__row > .small-gallery__item {
		flex-basis: calc(50% - 4px);
	}

	.small-gallery__item::after {
		inset: 6px;
	}
}

/* ==========================================================================
   Amenities: a cream "menu card", two columns, dotted leaders to a brass mark
   ========================================================================== */

.amenities {
	padding-top: var(--section-space);
	background: var(--cream);
}

.amenities__grid {
	display: block;
	max-width: 980px;
	margin-inline: auto;
	padding: clamp(36px, 4vw, 60px) clamp(28px, 5vw, 72px);
	column-count: 2;
	column-gap: clamp(40px, 6vw, 96px);
	column-rule: 1px solid var(--brass-hair);
	background: var(--cream-light);
	border: 1px solid var(--brass-line);
	outline: 1px solid var(--brass-hair);
	outline-offset: -9px;
	box-shadow: var(--shadow-card);
}

.amenity {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	gap: 12px;
	padding: 11px 0;
	background: none;
	box-shadow: none;
	break-inside: avoid;
}

.amenity__label {
	order: 1;
	color: var(--color-text);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
}

/* The dotted leader */
.amenity::after {
	content: "";
	order: 2;
	flex: 1 1 24px;
	min-width: 24px;
	margin-bottom: 6px;
	border-bottom: 2px dotted var(--brass-line);
}

.amenity__icon {
	order: 3;
	width: 22px;
	height: 22px;
	color: var(--brass-ink);
}

@media (max-width: 700px) {
	.amenities__grid {
		column-count: 1;
		padding: 28px 22px;
	}

	.amenity {
		padding: 9px 0;
	}
}

/* ==========================================================================
   Prices calendar: a green band, the photo tinted green behind the heading, a cream card
   ========================================================================== */

.prices {
	padding-bottom: var(--section-space);
	background: var(--green);
}

.prices__band {
	background: var(--green);
}

.prices__band::after {
	background: linear-gradient(to bottom, rgb(31 59 47 / 0.7), var(--green) 96%);
}

.prices__heading .section-title {
	margin-inline: auto;
	max-width: 15em;
	text-wrap: balance;
}

.prices__heading .section-label {
	justify-content: center;
}

.prices__card {
	background: var(--cream-light);
	outline: 1px solid var(--brass-line);
	outline-offset: -10px;
	box-shadow: 0 30px 70px rgb(0 0 0 / 0.3);
}

.calendar-month__title {
	font-family: var(--font-heading);
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-synthesis-weight: none;
}

.calendar-month__weekday {
	letter-spacing: 0.1em;
}

.calendar-day--today {
	color: var(--on-green);
}

.calendar__swatch--available {
	box-shadow: inset 0 0 0 1px var(--brass-hair);
}

/* ==========================================================================
   Guest reviews: on cream, serif italic quotes divided by brass rules
   ========================================================================== */

.reviews {
	padding-top: var(--section-space);
	background: var(--cream);
}

.reviews__list {
	gap: 0;
	max-width: 1180px;
}

.review {
	flex-basis: calc(100% / 3);
	gap: 18px;
	padding: 4px clamp(20px, 3vw, 44px);
	background: none;
	box-shadow: none;
	text-align: center;
}

.review + .review {
	border-left: 1px solid var(--brass-hair);
}

.review::before {
	content: "\201C";
	order: 1;
	height: 36px;
	color: var(--brass-ink);
	font-family: var(--font-serif);
	font-size: 76px;
	line-height: 1;
}

.review__stars {
	order: 0;
	margin: 0;
	color: var(--brass);
	font-size: 13px;
	letter-spacing: 5px;
}

.review__stars-off {
	color: rgb(31 59 47 / 0.15);
}

.review__text {
	order: 2;
	color: var(--color-text);
	font-family: var(--font-serif);
	font-size: 19px;
	font-style: italic;
	line-height: 1.5;
}

.review__author {
	order: 3;
	align-items: center;
	margin-top: auto;
	padding-top: 6px;
}

.review__name {
	color: var(--color-text);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.review__country {
	color: var(--color-text-muted);
	font-family: var(--font-serif);
	font-size: 15px;
	font-style: italic;
}

.reviews__action {
	margin-top: 48px;
}

@media (max-width: 760px) {
	.review {
		flex-basis: auto;
		padding: 28px 4px;
	}

	.review + .review {
		border-top: 1px solid var(--brass-hair);
		border-left: 0;
	}

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

/* ==========================================================================
   House rules: a green band, a ruled list
   ========================================================================== */

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

.house-rules:not(.house-rules--small) .section-label {
	color: var(--brass-light);
}

.house-rules:not(.house-rules--small) .section-title {
	color: var(--on-green);
}

.house-rules:not(.house-rules--small) .house-rules__list {
	padding: 8px clamp(20px, 3vw, 44px);
	border: 1px solid var(--brass-line);
	background: var(--green);
}

.house-rules:not(.house-rules--small) .house-rule {
	border-bottom: 1px dotted var(--brass-hair);
}

.house-rules:not(.house-rules--small) .house-rule:last-child {
	border-bottom: 0;
}

.house-rules:not(.house-rules--small) .house-rule__name {
	color: var(--on-green);
}

.house-rules:not(.house-rules--small) .house-rule__value {
	color: var(--on-green-muted);
}

.house-rule__name {
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.house-rule__icon {
	color: var(--brass-ink);
}

.house-rules:not(.house-rules--small) .house-rule__icon {
	color: var(--brass);
}

.house-rules--small .house-rules__list {
	background: var(--cream-light);
}

/* ==========================================================================
   Get in touch: cream, the photo in an arched window like the hero's
   ========================================================================== */

.get-in-touch {
	background: var(--cream);
}

.get-in-touch__photo {
	display: flex;
	padding: clamp(40px, 5vw, 88px) var(--gutter) 0 clamp(16px, 2vw, 40px);
}

.get-in-touch__photo img {
	align-self: flex-end;
	max-width: 480px;
	height: auto;
	min-height: 0;
	max-height: none;
	aspect-ratio: 3 / 4;
	border-radius: 999px 999px 0 0;
}

.contact-items {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	margin-top: 36px;
	border-top: 1px solid var(--brass-hair);
	text-align: left;
}

.contact-item {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	align-items: center;
	gap: 2px 14px;
	padding: 18px 0;
	border-bottom: 1px dotted var(--brass-line);
}

.contact-item__icon {
	grid-row: 1 / 3;
	width: 40px;
	height: 40px;
	padding: 10px;
	border: 1px solid var(--brass-line);
	border-radius: 50%;
	color: var(--brass-ink);
}

.contact-item__title {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-synthesis-weight: none;
}

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

a.contact-item__value {
	color: var(--brass-ink);
}

@media (max-width: 768px) {
	.get-in-touch__photo {
		order: -1;
		padding: 40px var(--gutter) 0;
	}

	.get-in-touch__photo img {
		max-width: none;
		aspect-ratio: 4 / 5;
	}

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

/* ==========================================================================
   Footer: deep green, a brass rule and diamond on top
   ========================================================================== */

.site-footer {
	padding-block: 64px 44px;
	background: var(--green-deep);
	color: var(--on-green-muted);
	box-shadow: inset 0 4px 0 var(--green), inset 0 5px 0 var(--brass-hair);
}

.site-footer__inner::before {
	content: "";
	width: 160px;
	height: 12px;
	background: var(--brass);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='12'%3E%3Cpath d='M0 6h66M94 6h66' stroke='%23000' stroke-opacity='.6'/%3E%3Cpath d='M80 0l6 6-6 6-6-6z'/%3E%3Cpath d='M70 6l2-2 2 2-2 2zM86 6l2-2 2 2-2 2z' fill-opacity='.6'/%3E%3C/svg%3E") no-repeat center;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='12'%3E%3Cpath d='M0 6h66M94 6h66' stroke='%23000' stroke-opacity='.6'/%3E%3Cpath d='M80 0l6 6-6 6-6-6z'/%3E%3Cpath d='M70 6l2-2 2 2-2 2zM86 6l2-2 2 2-2 2z' fill-opacity='.6'/%3E%3C/svg%3E") no-repeat center;
}

.site-footer__menu a {
	color: var(--on-green);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.22em;
}

.site-footer__menu a:hover {
	color: var(--brass-light);
}

.platform-link {
	border-color: var(--brass-line);
	border-radius: 0;
	color: var(--on-green);
}

.platform-link:hover,
.platform-link:focus-visible {
	border-color: var(--brass);
	color: #fff;
}

.site-footer__social a {
	color: var(--brass-light);
}

.site-footer__legal a {
	color: var(--on-green);
}

/* ==========================================================================
   Lightbox
   ========================================================================== */

.lightbox::backdrop {
	background: rgb(13 26 20 / 0.94);
}

.lightbox__caption {
	color: var(--on-green);
	font-family: var(--font-serif);
	font-size: 16px;
	font-style: italic;
}

/* ==========================================================================
   Theme pages: a cream card under a tinted photo; its title a green plaque across the top
   ========================================================================== */

.theme-page {
	background: var(--cream);
}

.theme-page__band {
	background: var(--green);
}

.theme-page__band::after {
	background: linear-gradient(to bottom, rgb(21 41 31 / 0.15), rgb(21 41 31 / 0.55));
}

.theme-page__card {
	background: var(--cream-light);
	box-shadow: var(--shadow-card);
}

.theme-page__title {
	margin: calc(-1 * var(--page-pad-y)) calc(-1 * var(--page-pad-x)) var(--page-gap);
	padding: clamp(32px, 3.4vw, 52px) var(--page-pad-x);
	background: var(--green);
	color: var(--on-green);
	font-size: clamp(34px, 3.8vw, 62px);
	box-shadow: inset 0 -4px 0 var(--green), inset 0 -5px 0 var(--brass-line);
}

.availability-result__name,
.about-page__title,
.availability-rooms__title {
	font-size: clamp(26px, 2.4vw, 38px);
}

.about-page__subtitle,
.house-rules__title,
.owner-card__name,
.booking-request__title {
	font-size: clamp(22px, 1.9vw, 30px);
}

.availability-result__price strong,
.availability-room__price strong,
.room-card__price {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
}

.availability-result__notice {
	border-left-color: var(--brass);
	background: var(--cream);
}

.availability-message__text {
	font-family: var(--font-serif);
	font-size: clamp(22px, 2vw, 28px);
	font-style: italic;
}

.availability-message__link,
.availability-result__room a {
	color: var(--brass-ink);
}

.booking-request__field input {
	border-color: rgb(31 59 47 / 0.22);
	background: #fff;
}

.gallery-filter__button {
	border-color: var(--brass-line);
	border-radius: 0;
	background: transparent;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

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

.gallery-grid__item {
	position: relative;
}

.gallery-grid__item::after {
	content: "";
	position: absolute;
	inset: 8px;
	border: 1px solid rgb(250 246 238 / 0.4);
	pointer-events: none;
}

/* About page: the host as a ruled card */
.about-page__photo {
	position: relative;
}

.about-page__photo::after {
	content: "";
	position: absolute;
	inset: 12px;
	border: 1px solid rgb(250 246 238 / 0.7);
	pointer-events: none;
}

.owner-card {
	background: var(--cream);
	border: 1px solid var(--brass-hair);
}

.owner-card__avatar {
	background: var(--green);
	color: var(--brass-light);
	box-shadow: 0 0 0 1px var(--cream), 0 0 0 2px var(--brass-line);
}

.owner-card__label {
	color: var(--brass-ink);
	letter-spacing: 0.26em;
}

.about-page__location {
	border-top-color: var(--brass-hair);
}

.about-page__address-icon,
.about-page__map-icon {
	color: var(--brass-ink);
}

.about-page__map-load {
	border-color: var(--brass-line);
	background: var(--cream);
}

.text-page h2 {
	font-size: 18px;
	letter-spacing: 0.04em;
}

.text-page a {
	color: var(--brass-ink);
}

.availability-result,
.availability-message,
.booking-request,
.house-rules--small {
	border-top-color: var(--brass-hair);
}

/* ==========================================================================
   Rooms (villas with room types): a green band, cream cards
   ========================================================================== */

.rooms {
	background: var(--green);
	color: var(--on-green);
}

.rooms .section-label {
	color: var(--brass-light);
}

.rooms .section-title {
	color: var(--on-green);
}

.room-card {
	border: 0;
	background: var(--cream-light);
	box-shadow: 0 24px 60px rgb(0 0 0 / 0.28);
}

.room-card__name {
	font-weight: 800;
	font-size: 24px;
}

.room-card__price {
	font-size: 22px;
}

.room-card__photos-link {
	color: var(--brass-ink);
}

/* ==========================================================================
   404
   ========================================================================== */

.not-found__code {
	font-family: var(--font-heading);
	font-weight: 800;
	color: var(--cream);
	-webkit-text-stroke: 1px var(--brass-line);
}