/* =========================================================================
   suPedra
   Palette, type and layout for a single holiday apartment in Gallura.
   No framework, no build step.
   ========================================================================= */

:root {
	--cream: #f6f1e7;
	--warm-white: #fdfbf7;
	--ink: #2b2622;
	--soft-ink: #4a433c;
	--gold: #f2b033;
	--gold-dark: #d99a22;
	--glow: #ffe08a;
	--beige: #c9ad7f;
	--beige-dark: #ae9268;
	--granite: #9a9289;
	--granite-light: #b3aca2;
	--hairline: #e0d9cb;
	--hairline-dark: #4a433c;
	--grey: #6b6560;

	--wrap: 1240px;
	--gutter: clamp(20px, 4vw, 40px);
	--section-y: clamp(64px, 8.5vw, 132px);

	--serif: "Lora", Georgia, "Times New Roman", serif;
	--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--radius: 2px;
	--shadow: 0 18px 50px rgba(43, 38, 34, 0.1);
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------------------------------------------------------------- base */

*,
*::before,
*::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	scroll-padding-top: 90px;
	-webkit-text-size-adjust: 100%;
}

/* Native smooth scrolling and Lenis fight each other: every frame Lenis sets
   a new scroll position, and the browser starts a fresh smooth animation to
   it, so the page lags seconds behind and anchors land short. When Lenis is
   driving, hand it the wheel. Without it, native smooth stays.
   The class deliberately avoids the string "lenis": Lenis rewrites the html
   className every frame and strips anything matching /lenis(-\w+)?/. */
html.smoothscroll { scroll-behavior: auto !important; }

body {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--grey); }

h1, h2, h3, h4, blockquote, figure, p, ul, ol { margin: 0; }
ul { padding: 0; list-style: none; }

button { font: inherit; color: inherit; }

:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* ---------------------------------------------------------------- type */

.display,
.h2,
.h3 {
	font-family: var(--serif);
	font-weight: 500;
	letter-spacing: -0.022em;
	line-height: 1.1;
}

.display { font-size: clamp(40px, 5.8vw, 82px); line-height: 1.03; }
.h2 { font-size: clamp(27px, 3.3vw, 42px); line-height: 1.16; max-width: 22ch; }
.h2--wide { max-width: 20ch; }
.h2--sm { font-size: clamp(24px, 2.8vw, 34px); }
.h2--light { color: var(--warm-white); max-width: 17ch; }
.h2--spaced { margin-bottom: clamp(28px, 4vw, 52px); }

.lede {
	margin-top: 22px;
	max-width: 56ch;
	font-size: clamp(16px, 1.35vw, 18.5px);
	line-height: 1.72;
	color: var(--soft-ink);
}
.lede--sm { font-size: 16.5px; max-width: 46ch; }

.label {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--grey);
	margin: 0 0 16px;
}
.label--muted { color: var(--granite); margin: 0; }
.label--light { color: var(--glow); }
.label--gold { color: var(--gold); }

.smallprint {
	margin-top: 18px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--grey);
}

.prose p { margin-bottom: 1.1em; max-width: 64ch; }
.prose h2 { font-family: var(--serif); font-size: 30px; margin: 1.6em 0 .5em; }

/* ---------------------------------------------------------------- buttons */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 16px 30px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background-color .22s var(--ease), color .22s var(--ease),
		border-color .22s var(--ease), transform .22s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn--sm { padding: 12px 22px; font-size: 14px; }

.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--gold-dark); color: var(--ink); }

.btn--ghost { border-color: rgba(253, 251, 247, 0.55); color: var(--warm-white); }
.btn--ghost:hover { background: rgba(253, 251, 247, 0.12); color: var(--warm-white); }

.btn--outline { border-color: var(--beige); color: var(--ink); }
.btn--outline:hover { background: var(--beige); color: var(--ink); }

/* ---------------------------------------------------------------- header */

.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 60;
	transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
	border-bottom: 1px solid transparent;
}
.site-header__inner {
	display: flex;
	align-items: center;
	gap: 16px 28px;
	min-height: 78px;
}

body:not(.has-transparent-header) .site-header,
.site-header.is-stuck {
	background: var(--cream);
	border-bottom-color: var(--hairline);
}

.logo {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	margin-right: auto;
	padding: 12px 0;
	flex-shrink: 0;
}
.wordmark {
	font-family: var(--serif);
	font-size: 27px;
	letter-spacing: -0.022em;
	line-height: 1;
	white-space: nowrap;
}
.wordmark__a { font-weight: 400; }
.wordmark__b { font-weight: 600; }

.has-transparent-header .site-header:not(.is-stuck) .logo,
.has-transparent-header .site-header:not(.is-stuck) .nav__list a,
.has-transparent-header .site-header:not(.is-stuck) .langs__item {
	color: var(--warm-white);
}
.has-transparent-header .site-header:not(.is-stuck) .supedra-mark rect:last-of-type { fill: var(--warm-white); }
.has-transparent-header .site-header:not(.is-stuck) .nav-toggle__bars i { background: var(--warm-white); }

.site-header__nav {
	display: flex;
	align-items: center;
	gap: 10px 26px;
	flex-wrap: wrap;
}

.nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 26px;
	font-size: 15px;
}
.nav__list a { padding: 6px 0; position: relative; }
.nav__list a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s var(--ease);
}
.nav__list a:hover::after { transform: scaleX(1); }

.langs { display: flex; gap: 10px; font-size: 13px; font-weight: 500; }
.langs__item { letter-spacing: 0.08em; color: var(--grey); }
.langs__item.is-current { color: var(--ink); font-weight: 600; }
.langs--footer .langs__item { color: var(--granite-light); }
.langs--footer .langs__item.is-current { color: var(--cream); }
.langs--footer { margin-top: 22px; }

/* .nav-toggle is defined once, with the full-screen menu it opens. */

/* ---------------------------------------------------------------- hero */

.hero {
	position: relative;
	min-height: clamp(540px, 86vh, 880px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__video,
.hero__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero__poster { z-index: -1; }
.hero__video { z-index: 0; }
.hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--ink);
}

.hero__inner {
	position: relative;
	z-index: 2;
	padding-top: 140px;
	padding-bottom: clamp(64px, 9vh, 110px);
}
.hero__eyebrow { margin-bottom: 20px; }
.hero__title { color: var(--warm-white); max-width: 15ch; text-wrap: balance; }
.hero__text {
	margin-top: 24px;
	max-width: 44ch;
	font-size: clamp(16px, 1.5vw, 19px);
	line-height: 1.62;
	color: #f0eadf;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.hero__videotoggle {
	position: absolute;
	right: var(--gutter);
	bottom: 28px;
	z-index: 3;
	width: 40px; height: 40px;
	display: grid; place-items: center;
	border: 1px solid rgba(253,251,247,.4);
	border-radius: 50%;
	background: rgba(43,38,34,.3);
	color: var(--warm-white);
	cursor: pointer;
	transition: background-color .2s var(--ease);
}
.hero__videotoggle:hover { background: rgba(43,38,34,.55); }

.hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 22px;
	z-index: 3;
	transform: translateX(-50%);
	width: 28px; height: 46px;
	display: grid; place-items: center;
}
.hero__scrollline {
	display: block;
	width: 1px; height: 38px;
	background: linear-gradient(to bottom, rgba(253,251,247,0), rgba(253,251,247,.85));
	animation: scrollcue 2.4s var(--ease) infinite;
}
@keyframes scrollcue {
	0% { transform: scaleY(.25); transform-origin: top; opacity: 0; }
	40% { opacity: 1; }
	100% { transform: scaleY(1); transform-origin: top; opacity: 0; }
}

/* ---------------------------------------------------------------- search bar */

.searchbar { position: relative; z-index: 10; }
.searchbar__card {
	margin-top: -46px;
	background: var(--warm-white);
	border: 1px solid var(--hairline);
	box-shadow: var(--shadow);
	padding: clamp(18px, 2.4vw, 26px);
}

.booking-search {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 18px;
}
.booking-search__field { flex: 1 1 180px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.booking-search__field--narrow { flex: 0 1 130px; }
.booking-search__field--wide { flex: 1 1 100%; }
.booking-search__field label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--grey);
}
.booking-search input,
.booking-search textarea {
	font-family: var(--sans);
	font-size: 16px;
	color: var(--ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--hairline);
	padding: 9px 0;
	border-radius: 0;
	width: 100%;
}
.booking-search textarea { border: 1px solid var(--hairline); padding: 10px 12px; resize: vertical; }
.booking-search input:focus,
.booking-search textarea:focus { outline: none; border-color: var(--beige-dark); }
.booking-search__submit { flex: 0 1 auto; }
.booking-search__hp { position: absolute; left: -9999px; }
.booking-search__ok,
.booking-search__error { flex: 1 1 100%; margin: 0; font-size: 15px; }
.booking-search__ok { color: #3f6b46; }
.booking-search__error { color: #9c3b2e; }

/* MotoPress Hotel Booking, dressed to match */
.booking-search--plugin { display: block; }
.booking-search--plugin .mphb_sc_search-wrapper { margin: 0; }
.booking-search--plugin input[type="text"],
.booking-search--plugin input[type="date"],
.booking-search--plugin select {
	font-family: var(--sans) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--hairline) !important;
	border-radius: 0 !important;
	background: transparent !important;
	padding: 9px 0 !important;
}
.booking-search--plugin button,
.booking-search--plugin input[type="submit"] {
	background: var(--gold) !important;
	color: var(--ink) !important;
	border: 0 !important;
	border-radius: var(--radius) !important;
	font-family: var(--sans) !important;
	font-weight: 600 !important;
	padding: 16px 30px !important;
}

/* ---------------------------------------------------------------- sections */

.section { padding-block: var(--section-y); }
.section--alt {
	background: var(--warm-white);
	border-block: 1px solid var(--hairline);
}
.section--intro { padding-bottom: clamp(44px, 6vw, 86px); }
.section--gallery { padding-top: 0; }

.section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 20px 46px;
	margin-bottom: clamp(28px, 4vw, 50px);
}
.section__head > div { flex: 1 1 420px; min-width: 0; }
.section__head > p { flex: 1 1 320px; min-width: 0; margin: 0; }

/* ---------------------------------------------------------------- splits */

.split { display: flex; flex-wrap: wrap; gap: clamp(30px, 5vw, 76px); }
.split--intro .split__main { flex: 2 1 420px; min-width: 0; }
.split--media { align-items: center; }
.split--media .split__media { flex: 1 1 380px; min-width: 0; margin: 0; }
.split--media .split__text { flex: 1 1 400px; min-width: 0; }
.split--apartment .split__media--wide { flex: 1.3 1 420px; min-width: 0; margin: 0; }
.split--apartment .split__aside { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.split--rates > div { flex: 1 1 340px; min-width: 0; }
.split--rates > div:first-child { flex: 1.25 1 380px; }

.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split--media .split__media { aspect-ratio: 4 / 5; }
.split--apartment .split__media--wide { aspect-ratio: 3 / 2; }

/* ---------------------------------------------------------------- stats */

.stats {
	flex: 1 1 280px;
	min-width: 0;
	align-self: start;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--hairline);
	border: 1px solid var(--hairline);
}
.stats__item { background: var(--cream); padding: 22px 20px; }
.stats__num {
	display: block;
	font-family: var(--serif);
	font-size: clamp(32px, 3.4vw, 42px);
	line-height: 1;
	letter-spacing: -0.022em;
	margin-bottom: 9px;
}

/* ---------------------------------------------------------------- mosaic */

.mosaic {
	display: grid;
	grid-template-columns: 1.85fr 1fr;
	gap: 14px;
	align-items: stretch;
}
.mosaic__big { min-width: 0; }
.mosaic__side { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.mosaic__side .tile--side { flex: 1; aspect-ratio: auto; min-height: 0; }

.tile { display: block; overflow: hidden; background: var(--hairline); }
.tile__img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.tile:hover .tile__img { transform: scale(1.035); }
.tile--big { aspect-ratio: 3 / 2; }
.tile--side { aspect-ratio: 16 / 10; }
.tile--row { aspect-ratio: 4 / 3; }


/* ---------------------------------------------------------------- points */

.points { margin-top: 30px; }
.points__item {
	display: flex;
	gap: 18px;
	padding: 22px 0;
	border-top: 1px solid var(--hairline);
}
.points__item:last-child { border-bottom: 1px solid var(--hairline); }
.points__icon { flex: 0 0 auto; color: var(--beige); margin-top: 2px; }
.points__title {
	display: block;
	font-family: var(--serif);
	font-weight: 500;
	font-size: 20px;
	margin-bottom: 6px;
	letter-spacing: -0.015em;
}
.points__text { font-size: 16px; line-height: 1.65; color: var(--soft-ink); }

/* ---------------------------------------------------------------- amenities */

.amenities {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--hairline);
	border: 1px solid var(--hairline);
}
.amenities__item {
	background: var(--cream);
	padding: 17px 16px;
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 15px;
}
.amenities__item svg { color: var(--beige-dark); flex: 0 0 auto; }

.pricebox {
	border: 1px solid var(--hairline);
	background: var(--warm-white);
	padding: 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}
.pricebox__num {
	display: block;
	margin-top: 6px;
	font-family: var(--serif);
	font-size: 34px;
	line-height: 1;
	letter-spacing: -0.022em;
}
.pricebox__unit { font-family: var(--sans); font-size: 15px; color: var(--grey); letter-spacing: 0; }

/* ---------------------------------------------------------------- cards */

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: clamp(20px, 2.6vw, 34px);
}
.card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--hairline); }
.card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.card:hover .card__img { transform: scale(1.035); }
.card__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	border-bottom: 1px solid var(--hairline);
	padding: 18px 0 12px;
}
.card__title { font-family: var(--serif); font-weight: 500; font-size: 22px; letter-spacing: -0.015em; }
.card__text { margin-top: 14px; font-size: 16px; line-height: 1.65; color: var(--soft-ink); }

/* ---------------------------------------------------------------- book */

.book {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	background: var(--ink);
}
.book__panel {
	flex: 1.15 1 480px;
	min-width: 0;
	display: flex;
	justify-content: flex-end;
	padding: clamp(52px, 7vw, 100px) var(--gutter);
}
.book__inner { width: 100%; max-width: 620px; }
.book__text { margin-top: 22px; max-width: 46ch; font-size: 17px; line-height: 1.7; color: #cfc7b9; }
.book__form { margin-top: 32px; }
.book__form .booking-search input,
.book__form .booking-search textarea {
	color: var(--warm-white);
	border-bottom-color: var(--hairline-dark);
}
.book__form .booking-search textarea { border-color: var(--hairline-dark); }
.book__form .booking-search__field label { color: var(--granite-light); }
.book__form .booking-search input::placeholder { color: #7d756b; }

.book__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 40px;
	margin-top: 36px;
	border-top: 1px solid var(--hairline-dark);
	padding-top: 24px;
}
.book__facts strong {
	display: block;
	font-family: var(--serif);
	font-weight: 500;
	font-size: 24px;
	line-height: 1.1;
	color: var(--warm-white);
	margin-bottom: 5px;
}

.book__media { flex: 1 1 360px; min-width: 0; position: relative; min-height: 320px; }
.book__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- rates */

.rates { margin-top: 28px; }
.rates__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	padding: 20px 0;
	border-top: 1px solid var(--hairline);
}
.rates__row:last-child { border-bottom: 1px solid var(--hairline); }
.rates__name { display: block; font-family: var(--serif); font-size: 21px; letter-spacing: -0.015em; }
.rates__months { display: block; margin-top: 4px; font-size: 14px; color: var(--grey); }
.rates__price { font-family: var(--serif); font-size: 26px; letter-spacing: -0.022em; }

.facts { margin-top: 10px; }
.facts__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 0;
	border-top: 1px solid var(--hairline);
	font-size: 16px;
	line-height: 1.6;
}
.facts__item:last-child { border-bottom: 1px solid var(--hairline); }
.facts__item svg { flex: 0 0 auto; color: var(--beige-dark); margin-top: 3px; }

/* ---------------------------------------------------------------- quote */

.section--quote { text-align: center; }
.quote { max-width: 900px; margin-inline: auto; }
.quote__mark { margin: 0 auto 26px; }
.quote__text {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(21px, 2.5vw, 31px);
	line-height: 1.4;
	letter-spacing: -0.012em;
	text-wrap: balance;
}
.quote .label { margin-top: 22px; }

/* ---------------------------------------------------------------- footer */

.site-footer {
	background: var(--ink);
	color: var(--cream);
	padding-block: clamp(48px, 6vw, 80px) 30px;
}
.site-footer__top { display: flex; flex-wrap: wrap; gap: clamp(30px, 5vw, 64px); }
.site-footer__brand { flex: 1.5 1 280px; min-width: 0; }
.site-footer__col { flex: 1 1 200px; min-width: 0; }
.site-footer__blurb { margin-top: 20px; max-width: 34ch; font-size: 15px; line-height: 1.65; color: var(--granite-light); }
.site-footer .label--muted { margin-bottom: 18px; }
.site-footer__brand .label--muted { margin: 16px 0 0; letter-spacing: 0.3em; font-size: 11px; }

.contact-list { display: flex; flex-direction: column; gap: 13px; font-size: 16px; }
.contact-list a,
.contact-list__plain { display: flex; gap: 11px; align-items: flex-start; color: var(--cream); }
.contact-list svg { color: var(--gold); flex: 0 0 auto; margin-top: 3px; }
.contact-list a:hover { color: var(--gold); }
.contact-list__plain { color: var(--granite-light); }

.footer-nav { display: flex; flex-direction: column; gap: 13px; font-size: 16px; }
.footer-nav a:hover { color: var(--gold); }

.site-footer__bottom {
	margin-top: clamp(34px, 5vw, 56px);
	border-top: 1px solid var(--hairline-dark);
	padding-top: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 28px;
	align-items: center;
	font-size: 13px;
	color: var(--granite-light);
}
.legal-nav__list { display: flex; gap: 20px; }

.site-footer .supedra-mark rect:last-of-type { fill: var(--cream); }
.site-footer .wordmark { color: var(--cream); font-size: 30px; }

/* ---------------------------------------------------------------- lightbox */

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(23, 20, 18, 0.94);
	display: none;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vw, 48px);
}
.lightbox.is-open { display: flex; }
.lightbox__img { max-width: 100%; max-height: 86vh; object-fit: contain; }
.lightbox__btn {
	position: absolute;
	background: none;
	border: 1px solid rgba(246, 241, 231, 0.35);
	color: var(--cream);
	width: 46px; height: 46px;
	border-radius: 50%;
	display: grid; place-items: center;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	transition: background-color .2s var(--ease);
}
.lightbox__btn:hover { background: rgba(246, 241, 231, 0.14); }
.lightbox__close { top: 20px; right: 20px; }
.lightbox__prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); }

/* ---------------------------------------------------------------- reveal */

/* The reveal rules live in the motion layer at the bottom of this file and
   are all prefixed with .js, which only exists once the script has run. An
   unprefixed rule here would hide content for good when JavaScript is off. */

/* ---------------------------------------------------------------- inner pages */

.page-hero {
	padding-top: clamp(130px, 16vh, 190px);
	padding-bottom: clamp(36px, 5vw, 64px);
	border-bottom: 1px solid var(--hairline);
}
.page-hero .display { font-size: clamp(32px, 4.4vw, 58px); }

/* ---------------------------------------------------------------- responsive */

/* The mobile menu is the full-screen overlay defined in the motion layer. */

@media (max-width: 760px) {
	body { font-size: 16px; }
	.hero { min-height: 78vh; }
	.hero__inner { padding-top: 120px; }
	.searchbar__card { margin-top: -30px; }
	.split--media .split__media { aspect-ratio: 3 / 2; }
	.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.book__panel { justify-content: flex-start; }
	.book__media { min-height: 260px; order: -1; }
	.mosaic { grid-template-columns: 1fr; }
	.mosaic__side .tile--side { aspect-ratio: 16 / 10; }
}

@media (max-width: 420px) {
	.amenities { grid-template-columns: 1fr; }
	.book__facts { gap: 14px 24px; }
}

/* ---------------------------------------------------------------- motion & print */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	[data-reveal] { opacity: 1; transform: none; }
	.hero__video { display: none; }
	.hero__scrollline { animation: none; }
}

@media print {
	.site-header, .hero__video, .hero__videotoggle, .hero__scroll,
	.searchbar, .book__form, .lightbox { display: none !important; }
	body { background: #fff; color: #000; font-size: 11pt; }
	.section { padding-block: 18pt; }
	a { text-decoration: underline; }
}


/* =========================================================================
   Motion layer.

   House rules:
   · slow, long easing — this is a stone house, not a sports brand
   · the frame holds still, the picture inside moves
   · nothing that is observed for a reveal is ever clipped, because a clipped
     element reports an empty intersection rectangle and would never reveal
   · every effect below is switched off under prefers-reduced-motion
   ========================================================================= */

:root {
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--slow: 1.1s;
}

/* ---------------------------------------------------------------- scale up */

.display { font-size: clamp(42px, 6.6vw, 94px); line-height: 1.015; letter-spacing: -0.03em; }
.h2 { font-size: clamp(29px, 4vw, 54px); line-height: 1.1; letter-spacing: -0.028em; }
.h2--sm { font-size: clamp(25px, 3vw, 38px); }

/* ---------------------------------------------------------- scroll progress */

.progress {
	position: fixed;
	inset: 0 0 auto;
	height: 2px;
	z-index: 90;
	pointer-events: none;
	background: transparent;
}
.progress i {
	display: block;
	height: 100%;
	background: var(--gold);
	transform: scaleX(0);
	transform-origin: left center;
}

/* ------------------------------------------------------------------ header */
/* Present, quiet, and it stays where it is. */

.site-header {
	transition: background-color .45s var(--ease-out), border-color .45s var(--ease-out);
}
.site-header .logo { transition: transform .45s var(--ease-out); }
.site-header.is-stuck .logo { transform: scale(0.94); transform-origin: left center; }

/* -------------------------------------------------------------------- hero */

.hero__scrim {
	background:
		linear-gradient(to bottom,
			rgba(20, 17, 15, calc(var(--scrim, .46) * 1.05)) 0%,
			rgba(20, 17, 15, calc(var(--scrim, .46) * 0.38)) 34%,
			rgba(20, 17, 15, calc(var(--scrim, .46) * 0.60)) 62%,
			rgba(20, 17, 15, calc(var(--scrim, .46) * 1.25)) 100%);
}

.hero__video,
.hero__poster { transform: scale(1.05); }
.hero.is-ready .hero__video,
.hero.is-ready .hero__poster { animation: heroDrift 42s ease-in-out infinite alternate; }
@keyframes heroDrift {
	from { transform: scale(1.04) translate3d(0, 0, 0); }
	to   { transform: scale(1.15) translate3d(-1.2%, -1.4%, 0); }
}

/* the vertical rule and label down the left edge */
.hero__side {
	position: absolute;
	left: calc(var(--gutter) - 2px);
	bottom: 150px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 16px;
	transform-origin: left bottom;
	transform: rotate(-90deg) translateX(0);
	opacity: 0;
	transition: opacity 1s var(--ease-out) .9s;
}
.hero.is-ready .hero__side { opacity: 1; }
.hero__side span {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: rgba(246, 241, 231, .72);
	white-space: nowrap;
}
.hero__side i {
	display: block;
	width: 54px;
	height: 1px;
	background: rgba(246, 241, 231, .5);
}

/* ------------------------------------------------------- word-by-word type */

.word {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	padding-bottom: 0.1em;
	margin-bottom: -0.1em;
}
.word__in { display: inline-block; transform: translateY(104%); }

.js .hero.is-ready .hero__title .word__in {
	animation: wordUp 1.25s var(--ease-out) forwards;
	animation-delay: calc(var(--i) * 72ms + 140ms);
}
.js [data-split].is-split .word__in { transform: translateY(104%); }
.js [data-split].is-split.is-in .word__in {
	animation: wordUp 1.1s var(--ease-out) forwards;
	animation-delay: calc(var(--i) * 46ms);
}
@keyframes wordUp { to { transform: translateY(0); } }

html:not(.js) .word__in,
.reduced .word__in { transform: none !important; animation: none !important; }

/* the rest of the hero */
.js [data-hero-el] { opacity: 0; transform: translateY(18px); }
.js .hero.is-ready [data-hero-el] { animation: fadeUp 1.1s var(--ease-out) forwards; }
.js .hero.is-ready .hero__eyebrow { animation-delay: .06s; }
.js .hero.is-ready .hero__text { animation-delay: .62s; }
.js .hero.is-ready .hero__actions { animation-delay: .78s; }
@keyframes fadeUp { to { opacity: 1; transform: none; } }

.hero__videotoggle-off { display: none; }
.hero__videotoggle.is-paused .hero__videotoggle-on { display: none; }
.hero__videotoggle.is-paused .hero__videotoggle-off { display: block; }

/* ---------------------------------------------------------------- reveals */

.js [data-reveal] {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity var(--slow) var(--ease-out), transform var(--slow) var(--ease-out);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

.js [data-stagger] > * {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .85s var(--ease-out) var(--d, 0ms), transform .85s var(--ease-out) var(--d, 0ms);
}
.js [data-reveal].is-in [data-stagger] > *,
.js [data-stagger].is-in > * { opacity: 1; transform: none; }

/* a gold rule that draws itself in under a section label */
.label--rule { position: relative; padding-bottom: 16px; }
.label--rule::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 54px; height: 2px;
	background: var(--gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .9s var(--ease-out) .15s;
}
.js [data-reveal].is-in .label--rule::after,
html:not(.js) .label--rule::after,
.reduced .label--rule::after { transform: scaleX(1); }

/* ------------------------------------------------------- media with depth
 * The frame is the fixed shape; the picture is oversized inside it and
 * drifts as the page scrolls. */

.media {
	position: relative;
	overflow: hidden;
	background: var(--hairline);
}
.media > img,
.media > video {
	position: absolute;
	inset: -14% 0;
	width: 100%;
	height: 128%;
	object-fit: cover;
	will-change: transform;
}
/* 14% of slack top and bottom against a drift of at most 9% of the picture's
   own height — the frame can never show through at either edge. */
.reduced .media > img,
.reduced .media > video { inset: 0; height: 100%; transform: none !important; }

/* the wipe goes on the picture, never on the observed frame */
.js .media > img { clip-path: inset(0 0 100% 0); transition: clip-path 1.25s var(--ease-out); }
.js [data-reveal].is-in .media > img,
.js .media.is-in > img { clip-path: inset(0 0 0 0); }
.reduced .media > img { clip-path: none !important; }

/* --------------------------------------------------------- sticky column */

@media (min-width: 900px) {
	.split__text--sticky {
		position: sticky;
		top: 128px;
		align-self: start;
	}
}

/* ------------------------------------------------------------------- band */

.band {
	position: relative;
	min-height: clamp(440px, 70vh, 760px);
	display: flex;
	align-items: center;
	overflow: hidden;
	isolation: isolate;
	background: var(--ink);
}
.band__media { position: absolute; inset: 0; z-index: 0; }
.band__video,
.band__poster { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; }
.band__video { opacity: 0; transition: opacity 1.4s var(--ease-out); z-index: 1; }
.band__video.is-playing { opacity: 1; }
.band__scrim {
	position: absolute; inset: 0; z-index: 2;
	background: linear-gradient(to bottom, rgba(20,17,15,.58), rgba(20,17,15,.26) 45%, rgba(20,17,15,.68));
}
.band__inner { position: relative; z-index: 3; text-align: center; }
.band__line { margin: 0 auto; max-width: 19ch; color: var(--warm-white); text-wrap: balance; }
.display--sm { font-size: clamp(28px, 4.4vw, 62px); line-height: 1.08; letter-spacing: -0.03em; }

/* --------------------------------------------------------- horizontal strip */

.strip { padding-block: var(--section-y) 0; }
.strip__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 30px;
}
.strip__nav { display: flex; gap: 10px; }
.strip__btn {
	width: 48px; height: 48px;
	border-radius: 50%;
	border: 1px solid var(--hairline);
	background: transparent;
	color: var(--ink);
	display: grid; place-items: center;
	cursor: pointer;
	font-size: 20px; line-height: 1;
	transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out), opacity .3s;
}
.strip__btn:hover:not(:disabled) { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.strip__btn:disabled { opacity: .3; cursor: default; }

.strip__rail {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-inline: var(--gutter);
	padding-bottom: 28px;
	margin-inline: calc(var(--gutter) * -1);
	cursor: grab;
}
.strip__rail::-webkit-scrollbar { display: none; }
.strip__rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.strip__item {
	flex: 0 0 min(62vw, 560px);
	scroll-snap-align: center;
	aspect-ratio: 4 / 3;
	position: relative;
	overflow: hidden;
	background: var(--hairline);
}
.strip__item img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 1.1s var(--ease-out);
}
.strip__item:hover img { transform: scale(1.04); }
.strip__item figcaption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 56px 20px 18px;
	color: var(--warm-white);
	font-size: 14px;
	background: linear-gradient(to top, rgba(20,17,15,.72), rgba(20,17,15,0));
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.strip__item:hover figcaption { opacity: 1; transform: none; }

.strip__progress {
	height: 2px;
	background: var(--hairline);
	margin-top: 4px;
}
.strip__progress i {
	display: block; height: 100%;
	background: var(--ink);
	transform-origin: left;
	transform: scaleX(.06);
	transition: transform .25s linear;
}

/* ---------------------------------------------------------------- gallery */

.tile { position: relative; }
.tile::after {
	content: "";
	position: absolute; inset: 0;
	background: rgba(20,17,15,0);
	transition: background-color .55s var(--ease-out);
	pointer-events: none;
}
.tile:hover::after { background: rgba(20,17,15,.12); }
.tile__zoom {
	position: absolute; right: 14px; bottom: 14px; z-index: 2;
	width: 40px; height: 40px; border-radius: 50%;
	display: grid; place-items: center;
	background: rgba(253,251,247,.92); color: var(--ink);
	opacity: 0; transform: translateY(8px) scale(.9);
	transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
	pointer-events: none;
}
.tile:hover .tile__zoom { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ cards */

.card__media { position: relative; overflow: hidden; }
.card__title { position: relative; display: inline-block; }
.card__title::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: -4px;
	height: 1px; background: var(--ink);
	transform: scaleX(0); transform-origin: left;
	transition: transform .6s var(--ease-out);
}
.card:hover .card__title::after { transform: scaleX(1); }

/* ------------------------------------------------------------------ stats */

.stats__num { font-size: clamp(38px, 4.4vw, 58px); }
.stats__item { transition: background-color .45s var(--ease-out); }
.stats__item:hover { background: var(--warm-white); }

/* -------------------------------------------------------------- amenities */

.amenities__item { transition: background-color .35s var(--ease-out), color .35s var(--ease-out); }
.amenities__item:hover { background: var(--warm-white); }
.amenities__item svg { transition: transform .4s var(--ease-out); }
.amenities__item:hover svg { transform: translateX(2px) scale(1.08); }

.points__item { transition: background-color .4s var(--ease-out); }
.points__item:hover { background: rgba(201,173,127,.08); }

/* ---------------------------------------------------------------- buttons */

.btn { will-change: transform; }
.btn--gold { box-shadow: 0 0 0 0 rgba(242,176,51,.45); }
.btn--gold:hover { box-shadow: 0 12px 30px -12px rgba(242,176,51,.8); }

/* ------------------------------------------------------------------ quote */

.quote__text { font-size: clamp(23px, 3vw, 40px); line-height: 1.32; }
.quote__mark { margin-bottom: 30px; }

/* --------------------------------------------------------------- lightbox */

body.is-locked { overflow: hidden; }
.lightbox { backdrop-filter: blur(3px); }
.lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.lightbox__img { opacity: 0; transform: scale(.985); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
.lightbox__img.is-in { opacity: 1; transform: none; }
.lightbox__cap { color: var(--granite-light); font-size: 14px; max-width: 62ch; text-align: center; margin: 0; }
.lightbox__count {
	position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
	margin: 0; font-size: 12px; letter-spacing: .22em; color: var(--granite-light);
}

/* ------------------------------------------------------------ tap targets */

@media (pointer: coarse), (max-width: 900px) {
	.nav__list a,
	.footer-nav a,
	.contact-list a,
	.legal-nav__list a,
	.langs__item { min-height: 44px; display: inline-flex; align-items: center; }
	.langs__item { padding-inline: 6px; }
}

@media (max-width: 760px) {
	.hero__side { display: none; }
	.strip__item { flex-basis: 82vw; }
	.band { min-height: 56vh; }
}

/* ------------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	.hero.is-ready .hero__video,
	.hero.is-ready .hero__poster { animation: none; transform: none; }
	.js [data-hero-el],
	.js [data-reveal],
	.js [data-stagger] > * { opacity: 1 !important; transform: none !important; animation: none !important; }
	.hero__side { opacity: 1; }
	.band__video { opacity: 1; }
	.progress { display: none; }
	.strip__item figcaption { opacity: 1; transform: none; }
}

/* the strip's tile sits flush inside its figure */
.strip__item .tile { position: absolute; inset: 0; display: block; }
.strip__item .tile::after { display: none; }
.strip__hint { margin: 0; font-size: 14px; color: var(--grey); }
.strip__rail:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* Inside a horizontal rail the wipe fights the drag: an item scrolled in from
   the side would arrive mid-animation. The strip's pictures are simply there. */
.js .strip__item .tile > img { clip-path: none !important; }

/* No vertical drift inside a horizontal rail: there is nothing for it to
   parallax against, and it only risks a gap at an edge. */
.strip__item .tile > img {
	position: absolute;
	inset: 0;
	height: 100%;
	transform: none !important;
}

/* =========================================================================
   Today, and A day here — the two sections that give someone a reason to
   open the site again when they are not booking anything.
   ========================================================================= */

.today {
	background: var(--ink);
	color: var(--cream);
	padding-block: clamp(52px, 6.5vw, 96px);
}
.today__grid {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(32px, 5vw, 76px);
	align-items: flex-start;
}
.today__now { flex: 1 1 300px; min-width: 0; }
.today__note { flex: 1.6 1 420px; min-width: 0; }

.today .label--rule { color: var(--granite-light); }
.today .label--rule::after { background: var(--gold); }
.today .label--muted { color: var(--granite-light); }

.today__sun {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 40px;
	margin-top: 4px;
}
.today__fig {
	display: block;
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(34px, 3.6vw, 46px);
	line-height: 1;
	letter-spacing: -0.022em;
	color: var(--warm-white);
	margin-bottom: 8px;
}
.today__daylight {
	margin: 22px 0 0;
	font-size: 15px;
	color: var(--granite-light);
}
.today__note .h2 { color: var(--warm-white); margin-top: 10px; }
.today__note .lede { color: #cfc7b9; margin-top: 18px; max-width: 58ch; }
.today__foot {
	margin: 22px 0 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--granite);
	max-width: 48ch;
}

/* ------------------------------------------------------------ a day here */

.day__head { margin-bottom: clamp(30px, 4vw, 54px); }
.day__list { counter-reset: hour; }
.day__item {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 36px;
	padding: 26px 0;
	border-top: 1px solid var(--hairline);
	transition: background-color .4s var(--ease-out);
}
.day__item:last-child { border-bottom: 1px solid var(--hairline); }
.day__item:hover { background: rgba(201,173,127,.07); }
.day__time {
	flex: 0 0 110px;
	font-family: var(--serif);
	font-size: 22px;
	letter-spacing: -0.015em;
	color: var(--beige-dark);
	padding-top: 2px;
}
.day__body { flex: 1 1 320px; min-width: 0; }
.day__title {
	display: block;
	font-family: var(--serif);
	font-weight: 500;
	font-size: 21px;
	letter-spacing: -0.015em;
	margin-bottom: 7px;
}
.day__text { font-size: 16.5px; line-height: 1.68; color: var(--soft-ink); max-width: 62ch; display: block; }

@media (max-width: 620px) {
	.day__time { flex-basis: 100%; font-size: 19px; }
	.today__sun { gap: 14px 28px; }
}

/* =========================================================================
   Navigation, curtain, cursor, grain and the WebGL canvas.
   ========================================================================= */

/* ------------------------------------------------------------------ header */

.site-header__inner { gap: 16px 32px; }
.nav--desktop { margin-left: auto; }
.nav--desktop .nav__list { display: flex; gap: 6px 30px; font-size: 15px; }
.site-header__end { display: flex; align-items: center; gap: 14px 18px; }

.nav-toggle {
	display: none;
	align-items: center;
	gap: 10px;
	background: none;
	border: 0;
	padding: 10px 2px;
	cursor: pointer;
}
.nav-toggle__bars { display: block; width: 22px; }
.nav-toggle__bars i {
	display: block;
	height: 1.5px;
	background: currentColor;
	margin: 5px 0;
	transition: transform .4s var(--ease-out), opacity .25s var(--ease-out);
}
.nav-toggle__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
/* One word at a time: "Menu" closed, "Close" open. */
.nav-toggle__label[data-label-close] { display: none; }
body.menu-open .nav-toggle__label[data-label-open] { display: none; }
body.menu-open .nav-toggle__label[data-label-close] { display: inline; }
body.menu-open .nav-toggle__bars i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.menu-open .nav-toggle__bars i:nth-child(2) { opacity: 0; }
body.menu-open .nav-toggle__bars i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1180px) {
	.nav--desktop { display: none; }
	.site-header__cta { display: none; }
	.langs--header { display: none; }
	.nav-toggle { display: inline-flex; }
	.site-header__end { margin-left: auto; }
}

/* The logo and the close button have to stay on top of the panel they opened,
   or the only way out of the menu is an invisible button on an invisible bar.
   The bars inherit currentColor, so the cream here is what makes the X show. */
body.menu-open .site-header {
	z-index: 80;
	color: var(--cream);
	background: transparent;
	border-color: transparent;
}
body.menu-open .site-header .wordmark { color: var(--cream); }
body.menu-open .site-header .supedra-mark rect:last-of-type { fill: var(--cream); }

/* ------------------------------------------------------------- full menu */

.menu {
	position: fixed;
	inset: 0;
	z-index: 70;
	background: var(--ink);
	color: var(--cream);
	display: flex;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	clip-path: inset(0 0 100% 0);
	transition: opacity .45s var(--ease-out), visibility .45s, clip-path .62s var(--ease-out);
	overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; visibility: visible; clip-path: inset(0 0 0 0); }

.menu__inner {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(36px, 7vw, 90px);
	align-items: flex-end;
	padding-top: 120px;
	padding-bottom: 60px;
}
.menu__nav { flex: 2 1 420px; min-width: 0; }
.menu__aside { flex: 1 1 260px; min-width: 0; }

.menu__list { display: flex; flex-direction: column; gap: 2px; }
.menu__item {
	overflow: hidden;
	opacity: 0;
	transform: translateY(80%);
	transition: opacity .6s var(--ease-out), transform .7s var(--ease-out);
	transition-delay: calc(var(--i) * 55ms + 120ms);
}
.menu.is-open .menu__item { opacity: 1; transform: none; }
.menu__item a {
	display: block;
	padding: 8px 0;
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(32px, 7vw, 62px);
	line-height: 1.12;
	letter-spacing: -0.028em;
	color: var(--cream);
	transition: color .3s var(--ease-out), transform .5s var(--ease-out);
}
.menu__item a:hover { color: var(--gold); transform: translateX(10px); }

.menu__contact {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 9px 0;
	font-size: 16px;
	color: var(--cream);
}
.menu__contact svg { color: var(--gold); }
.menu__contact:hover { color: var(--gold); }
.menu__place {
	margin: 16px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--granite-light);
}
.langs--menu { margin-top: 26px; }
.langs--menu .langs__item { color: var(--granite-light); font-size: 14px; }
.langs--menu .langs__item.is-current { color: var(--cream); }

body.menu-open { overflow: hidden; }

/* ----------------------------------------------------------------- curtain */

/* Hidden until a script says otherwise — an overlay that only JavaScript can
   lift must never exist on a page where JavaScript did not run. */
.curtain { display: none; }

html.curtain-ready .curtain {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: var(--ink);
	display: grid;
	place-items: center;
	transition: clip-path 1s var(--ease-out), opacity .5s var(--ease-out) .5s;
	clip-path: inset(0 0 0 0);
}
.curtain__mark { opacity: .9; animation: curtainPulse 1.6s ease-in-out infinite alternate; }
@keyframes curtainPulse { from { opacity: .45; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.curtain.is-up { clip-path: inset(0 0 100% 0); opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------------ cursor */

.cursor {
	position: fixed;
	top: 0; left: 0;
	z-index: 180;
	width: 26px; height: 26px;
	border: 1px solid rgba(246, 241, 231, .55);
	border-radius: 50%;
	pointer-events: none;
	mix-blend-mode: difference;
	transition: width .3s var(--ease-out), height .3s var(--ease-out), background-color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.cursor.is-active {
	width: 46px; height: 46px;
	background: rgba(246, 241, 231, .18);
	border-color: rgba(246, 241, 231, .9);
}
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ------------------------------------------------------------------- grain
 * A single repeating noise tile over the whole page at very low opacity.
 * It is what stops large flat areas of cream looking like a template. */

body::after {
	content: "";
	position: fixed;
	inset: -120px;
	z-index: 150;
	pointer-events: none;
	opacity: .035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
	animation: grain 1.2s steps(3) infinite;
}
@keyframes grain {
	0%   { transform: translate(0, 0); }
	33%  { transform: translate(-24px, 14px); }
	66%  { transform: translate(18px, -20px); }
	100% { transform: translate(0, 0); }
}

/* ------------------------------------------------------------- gl canvas */

.hero__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: block;
}
/* Once the shader is drawing, the DOM media underneath is redundant. */
.hero.has-gl .hero__poster,
.hero.has-gl .hero__video { opacity: 0; transition: opacity .6s var(--ease-out); }
.hero.has-gl .hero__scrim { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
	.curtain { display: none; }
	.cursor { display: none; }
	body::after { animation: none; opacity: .028; }
	.menu { transition: opacity .001ms; clip-path: none; }
	.menu__item { opacity: 1; transform: none; transition: none; }
}


/* =========================================================================
   THE DAY
   The front page is one day at the house. It opens at this morning's
   sunrise, the page colour moves through noon and the gold hour, and it is
   dark by the time you reach the booking form. Everything below serves that.
   ========================================================================= */

/* ------------------------------------------------------------------- sky */

html.sky-on body { background: var(--sky, var(--cream)); }

/* Parts of the page stop painting their own background and let the sky
   through. The hero and the video band are pictures and keep theirs. */
.sky-on [data-sky]:not(.hero):not(.band),
.sky-on .book__panel { background: transparent; }

/* Without script there is no sky, so the evening parts are simply dark. */
.night { background: #1d1917; }

/* Parts written for a light page, turned for the dark by re-pointing the
   tokens they already use. */
.night--flip {
	--ink: #f6f1e7;
	--soft-ink: #d9d1c4;
	--grey: #b3aca2;
	--granite: #9a9289;
	--hairline: rgba(246, 241, 231, .16);
	--cream: #1d1917;
	--warm-white: #27221f;
	color: var(--ink);
}
.night--flip .btn--gold { color: #2b2622; }

/* The header takes the colour of the sky it is sitting in. */
.sky-on .site-header.is-stuck { background: var(--sky, var(--cream)); }
.is-night .site-header.is-stuck { border-bottom-color: rgba(246, 241, 231, .14); }
.is-night .site-header.is-stuck .logo,
.is-night .site-header.is-stuck .nav__list a,
.is-night .site-header.is-stuck .langs__item,
.is-night .site-header.is-stuck .nav-toggle { color: var(--cream); }
.is-night .site-header.is-stuck .supedra-mark rect:last-of-type { fill: var(--cream); }

/* ----------------------------------------------------------------- clock
 * The time of day you have scrolled to, and where the sun is. It sits in
 * the header beside the name, so nothing ever scrolls underneath it. */

.sky-on .site-header .logo { margin-right: 0; }
.clock {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	margin: 0 auto 0 clamp(4px, 1.6vw, 26px);
	padding-left: clamp(12px, 1.6vw, 26px);
	border-left: 1px solid currentColor;
	color: var(--ink);
	transition: color .45s var(--ease-out);
}
.has-transparent-header .site-header:not(.is-stuck) .clock,
.is-night .site-header.is-stuck .clock,
body.menu-open .clock { color: var(--warm-white); }
.clock svg { display: block; overflow: visible; width: 46px; height: 26px; }
.clock__arc { stroke: currentColor; stroke-width: 1.2; stroke-dasharray: 2 4; opacity: .65; }
.clock__hz { stroke: currentColor; stroke-width: 1.2; opacity: .65; }
.clock__sun { fill: var(--gold); transition: opacity .6s var(--ease-out); }
.clock.is-down .clock__sun { opacity: .3; }
.clock__time {
	font-family: var(--serif);
	font-size: 18px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	min-width: 5ch;
}
@media (max-width: 420px) { .clock svg { display: none; } }

/* ------------------------------------------------------------ the canvas
 * Fixed, behind the page content, in front of the sky. */

.gl {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	z-index: -1;
	pointer-events: none;
	display: block;
}
.media.gl-on { background: transparent; }
.media.gl-on > img { opacity: 0; }

/* -------------------------------------------------------------- curtain */

html.curtain-ready .curtain { align-content: center; gap: 26px; }
.curtain__clock {
	font-family: var(--serif);
	font-size: clamp(46px, 7.5vw, 104px);
	line-height: 1;
	letter-spacing: -0.035em;
	font-variant-numeric: tabular-nums;
	color: var(--cream);
}
.curtain.is-up .curtain__clock,
.curtain.is-up .curtain__mark { opacity: 0; transition: opacity .3s var(--ease-out); animation: none; }

/* ----------------------------------------------------------------- hero */

.hero { min-height: 100vh; min-height: 100svh; }
.hero__inner { width: 100%; padding-bottom: clamp(24px, 4.5vh, 48px); }
.hero__title {
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(44px, 8.6vw, 156px);
	line-height: 0.94;
	letter-spacing: -0.045em;
	max-width: 14ch;
	text-wrap: balance;
	color: var(--warm-white);
}
.hero__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 28px 56px;
	margin-top: clamp(26px, 5vh, 56px);
	padding-top: 24px;
	border-top: 1px solid rgba(253, 251, 247, .3);
}
.hero__lead { display: flex; align-items: flex-end; gap: 22px 40px; }
@media (max-width: 1100px) { .hero__lead { flex-wrap: wrap; } }
.hero__text { margin: 0; max-width: 40ch; font-size: clamp(15.5px, 1.2vw, 17.5px); }
.hero__actions { margin-top: 0; }
.hero__sun { display: flex; gap: clamp(22px, 2.6vw, 44px); margin: 0; padding-right: 60px; color: #f0eadf; }
.hero__sun dt { font-size: 12.5px; color: rgba(240, 234, 223, .72); }
.hero__sun dd {
	margin: 3px 0 0;
	font-family: var(--serif);
	font-size: clamp(19px, 1.7vw, 25px);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.js .hero.is-ready .hero__lead { animation-delay: .7s; }
.js .hero.is-ready .hero__sun { animation-delay: .86s; }
.js .hero.is-ready .hero__title .word__in { animation-delay: calc(var(--i) * 80ms + 220ms); }
@media (max-width: 760px) {
	.hero__sun { padding-right: 0; gap: 22px; }
	.hero__sun div:last-child { display: none; }
}

/* ------------------------------------------------------------ statement */

.stmt { padding-block: clamp(96px, 15vw, 230px) var(--section-y); }
.stmt__line {
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(34px, 6.3vw, 108px);
	line-height: 1.02;
	letter-spacing: -0.04em;
	max-width: 17ch;
}
.scrub__w { opacity: .15; transition: opacity .55s var(--ease-out); }
.scrub__w.is-lit { opacity: 1; }

.stmt__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(36px, 7vw, 120px);
	align-items: start;
	margin-top: clamp(52px, 8vw, 128px);
}
.stmt__text { font-size: clamp(17px, 1.5vw, 21.5px); line-height: 1.58; max-width: 44ch; color: var(--soft-ink); }
.stmt__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 30px clamp(20px, 3vw, 44px); }
.stmt__stats li { border-top: 1px solid var(--ink); padding-top: 14px; }
.stmt__num {
	display: block;
	font-family: var(--serif);
	font-size: clamp(40px, 4.8vw, 76px);
	line-height: 1;
	letter-spacing: -0.035em;
	font-variant-numeric: tabular-nums;
}
.stmt__unit { display: block; margin-top: 6px; font-size: 14.5px; color: var(--grey); }

.month {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 14px clamp(36px, 7vw, 120px);
	margin-top: clamp(68px, 10vw, 150px);
	padding-top: 26px;
	border-top: 1px solid var(--hairline);
}
.month__name { font-size: 14.5px; color: var(--grey); }
.month__sea { grid-column: 1; grid-row: 2; align-self: end; font-size: 14.5px; color: var(--grey); }
.month__what {
	grid-column: 2; grid-row: 1;
	font-family: var(--serif);
	font-size: clamp(24px, 2.7vw, 38px);
	line-height: 1.14;
	letter-spacing: -0.025em;
	max-width: 22ch;
}
.month__text { grid-column: 2; grid-row: 2; max-width: 56ch; color: var(--soft-ink); }

@media (max-width: 820px) {
	.stmt__grid, .month { grid-template-columns: minmax(0, 1fr); }
	.month__what, .month__text, .month__sea { grid-column: 1; grid-row: auto; }
}

/* ---------------------------------------------------------------- rooms */

.rooms { position: relative; padding-block: var(--section-y); --h: min(52vh, 440px); }
.rooms__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	margin-bottom: clamp(22px, 3.5vh, 44px);
}
.rooms__title {
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(34px, 5.6vw, 92px);
	line-height: 1;
	letter-spacing: -0.04em;
}
.rooms__count { font-family: var(--serif); font-size: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.rooms__track {
	--edge: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
	display: flex;
	align-items: flex-end;
	gap: clamp(14px, 2.6vw, 44px);
	padding-inline: var(--edge);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--edge);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.rooms__track::-webkit-scrollbar { display: none; }
.rooms__item { flex: none; margin: 0; scroll-snap-align: start; }
.rooms__frame { display: block; height: var(--h); aspect-ratio: 3 / 2; }
.rooms__item--tall .rooms__frame { aspect-ratio: 4 / 5; }
.rooms__item--square .rooms__frame { height: calc(var(--h) * .74); aspect-ratio: 1; }
.rooms__item--wide:nth-child(3n) .rooms__frame { height: calc(var(--h) * .86); }
.rooms__item figcaption { margin-top: 12px; max-width: 34ch; font-size: 13.5px; line-height: 1.45; color: var(--grey); }
@media (max-width: 600px) {
	.rooms__frame, .rooms__item--tall .rooms__frame, .rooms__item--square .rooms__frame,
	.rooms__item--wide:nth-child(3n) .rooms__frame { height: auto; width: 82vw; }
	.rooms__item figcaption { max-width: 80vw; }
}

.rooms__bar { margin: clamp(22px, 3.5vh, 40px) var(--gutter) 0; height: 1px; background: var(--hairline); }
.rooms__bar i { display: block; height: 100%; background: var(--ink); transform: scaleX(.04); transform-origin: left center; }

/* pinned: vertical scroll becomes travel along the track */
.rooms.is-pinned { padding: 0; --h: min(56vh, 640px); }
.rooms.is-pinned .rooms__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: clip;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 64px;
}
.rooms.is-pinned .rooms__track {
	overflow: visible;
	width: max-content;
	scroll-snap-type: none;
	will-change: transform;
}

/* --------------------------------------------------------------- places */

.places { padding-block: var(--section-y); }
.places__title {
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(30px, 4.6vw, 72px);
	line-height: 1.04;
	letter-spacing: -0.035em;
	max-width: 16ch;
	margin-bottom: clamp(40px, 6vw, 92px);
}
.places__row {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) 130px minmax(0, 1fr);
	gap: 14px clamp(20px, 3vw, 44px);
	align-items: baseline;
	padding: clamp(22px, 3.2vw, 44px) 0;
	border-top: 1px solid rgba(43, 38, 34, .3);
}
.places__row:last-child { border-bottom: 1px solid rgba(43, 38, 34, .3); }
.places__name {
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(36px, 6.2vw, 100px);
	line-height: 1;
	letter-spacing: -0.045em;
	transition: transform .7s var(--ease-out);
}
.places__dist { font-size: 14.5px; white-space: nowrap; }
.places__text { font-size: 16px; line-height: 1.6; max-width: 44ch; color: var(--soft-ink); }
.places__thumb { grid-column: 1 / -1; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-top: 14px; }

.has-float .places__thumb { display: none; }
.has-float .places__row.is-in { transition: opacity .45s var(--ease-out), transform var(--slow) var(--ease-out); }
.has-float:hover .places__row.is-in:not(:hover) { opacity: .34; }
.has-float .places__row:hover .places__name { transform: translateX(20px); }

.places__float {
	position: fixed;
	left: 0; top: 0;
	z-index: 40;
	width: min(22vw, 300px);
	aspect-ratio: 4 / 5;
	margin: -210px 0 0 40px;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	clip-path: inset(50% 0 50% 0);
	transition: opacity .3s var(--ease-out), clip-path .65s var(--ease-out);
	will-change: transform;
}
.places__float.is-on { opacity: 1; clip-path: inset(0 0 0 0); }
.places__float img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.14);
	transition: opacity .45s var(--ease-out), transform 1s var(--ease-out);
}
.places__float img.is-on { opacity: 1; transform: none; }

@media (max-width: 820px) {
	.places__row { grid-template-columns: minmax(0, 1fr) auto; }
	.places__text { grid-column: 1 / -1; }
}

/* ----------------------------------------------------------------- dusk */

.dusk {
	min-height: 96vh;
	display: flex;
	align-items: center;
	padding-block: 26vh;
	color: var(--warm-white);
	background: #5c3a2e;
}
.dusk__time { font-size: 14.5px; color: var(--glow); margin-bottom: 22px; }
.dusk__line {
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(32px, 5.6vw, 92px);
	line-height: 1.04;
	letter-spacing: -0.04em;
	max-width: 18ch;
}

/* --------------------------------------------------------------- footer */

.site-footer { overflow: hidden; }
.site-footer__giant {
	position: relative;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	margin: clamp(44px, 7vw, 110px) 0 clamp(10px, 2vw, 28px);
	font-family: var(--serif);
	font-weight: 600;
	font-size: 25vw;
	line-height: .82;
	letter-spacing: -0.05em;
	text-align: center;
	white-space: nowrap;
	color: var(--cream);
}
.site-footer__giant span { font-weight: 400; }

/* --------------------------------------------------------------- cursor */

.cursor { display: grid; place-items: center; font-size: 0; }
.cursor.is-label {
	width: 86px; height: 86px;
	background: var(--gold);
	border-color: transparent;
	color: #2b2622;
	mix-blend-mode: normal;
	font-size: 12.5px;
	font-weight: 600;
}

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	.scrub__w { opacity: 1; }
	.places__float { display: none; }
}

/* --------------------------------------------------------- larger heads */

.home .h2 { font-size: clamp(30px, 4.5vw, 68px); line-height: 1.04; letter-spacing: -0.036em; max-width: 18ch; }
.home .h2--sm { font-size: clamp(27px, 3.4vw, 48px); }

/* ------------------------------------------------------------ small screens */

@media (max-width: 600px) {
	/* one shape on a phone: a mixed rail leaves holes above the short ones */
	.rooms__track { align-items: flex-start; }
	.rooms__item .rooms__frame,
	.rooms__item--tall .rooms__frame,
	.rooms__item--square .rooms__frame { aspect-ratio: 4 / 3; }
}
@media (max-width: 480px) {
	/* the clock has the room the word "Menu" had; the bars say it anyway */
	.nav-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	body.menu-open .nav-toggle__label[data-label-close] { position: static; width: auto; height: auto; clip-path: none; }
}

/* =========================================================================
   Second pass: the things that move with the day.
   ========================================================================= */

/* ----------------------------------------------------------------- stars */

.stars {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	z-index: -2;
	pointer-events: none;
	opacity: 0;
	transition: opacity .5s linear;
}

/* ---------------------------------------------------- the short headline */

.hero__title--xl {
	/* As large as the screen allows in both directions: two lines must fit
	   the width of the column and leave the height for what sits under them. */
	font-size: clamp(60px, min(13.6vw, 25vh), 240px);
	line-height: 0.86;
	letter-spacing: -0.055em;
	max-width: none;
	text-wrap: balance;
}
.hero__title--xl .word { padding-bottom: 0.24em; margin-bottom: -0.24em; }
.hero__media { will-change: clip-path; }
.hero__title, .hero__foot { will-change: transform, opacity; }

/* -------------------------------------------------------------- dusk sun */

.dusk { position: relative; overflow: hidden; }
.dusk > .wrap { position: relative; z-index: 1; }
.dusk__sun {
	--red: 0;
	position: absolute;
	right: clamp(-40px, 8vw, 180px);
	top: 0;
	width: min(52vw, 620px);
	aspect-ratio: 1;
	border-radius: 50%;
	/* two close tones only: a wider range shows as rings on most screens */
	background:
		radial-gradient(circle at 50% 38%,
			rgb(252, calc(176 - 92 * var(--red)), calc(74 - 40 * var(--red))),
			rgb(244, calc(150 - 86 * var(--red)), calc(52 - 26 * var(--red))));
	box-shadow: 0 0 120px 40px rgba(246, 160, 60, calc(.34 - .2 * var(--red)));
	transform: translate3d(0, -34%, 0);
	will-change: transform;
}

/* -------------------------------------------------------------- day rows */

.day__list { position: relative; }
.day__list.is-live { padding-left: clamp(18px, 2.4vw, 34px); border-left: 1px solid rgba(43, 38, 34, .18); }
.day__line {
	position: absolute;
	left: -1px; top: 0;
	width: 2px; height: 100%;
	background: var(--ink);
	transform: scaleY(0);
	transform-origin: top center;
}
.day__list.is-live .day__item {
	opacity: .34;
	transition: opacity .6s var(--ease-out), transform .7s var(--ease-out);
}
.day__list.is-live .day__item.is-past { opacity: .6; }
.day__list.is-live .day__item.is-now { opacity: 1; transform: translateX(14px); }
.day__list.is-live .day__time { transition: color .5s var(--ease-out); }
.day__list.is-live .is-now .day__time { color: var(--ink); }
.day__time { font-size: clamp(24px, 2.6vw, 38px); flex-basis: clamp(110px, 12vw, 180px); font-variant-numeric: tabular-nums; }
.day__title { font-size: clamp(21px, 2.2vw, 30px); }
.day__item:hover { background: transparent; }

/* dusk: the line keeps to the left, the sun to the right, and the bottom
   edge of the section is the horizon it sets behind */
.dusk { border-bottom: 1px solid rgba(246, 241, 231, .22); }
.dusk__line { max-width: 11ch; }
.dusk__sun { right: clamp(-60px, 6vw, 150px); width: min(40vw, 540px); }
@media (max-width: 760px) {
	.dusk__sun { width: 62vw; right: -14vw; opacity: .9; }
	.dusk__line { max-width: 9ch; }
}

/* --------------------------------------------------------------- details */

.nav--desktop .nav__list { flex-wrap: nowrap; white-space: nowrap; }
.site-header__cta { white-space: nowrap; }
.booking-search input:not([type="hidden"]) { min-height: 44px; }

/* =========================================================================
   One timeline. Each part of the page carries the hour it sits at — the same
   hour the clock in the header reaches when you get there.
   ========================================================================= */

.hour {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 0 0 clamp(18px, 2.4vw, 30px);
	color: var(--ink);
}
.hour__time {
	font-family: var(--serif);
	font-size: clamp(19px, 1.7vw, 24px);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.hour__what {
	position: relative;
	padding-left: 40px;
	font-size: 14.5px;
	color: var(--grey);
}
.hour__what::before {
	content: "";
	position: absolute;
	left: 0; top: 50%;
	width: 26px; height: 1px;
	background: currentColor;
	opacity: .6;
}
.hour--light { color: var(--warm-white); }
.hour--light .hour__what { color: rgba(253, 251, 247, .74); }
.hour--center { justify-content: center; }
.rooms__head { align-items: flex-end; }
.rooms__head .hour { margin-bottom: 10px; }
.stmt .hour { margin-bottom: clamp(26px, 4vw, 54px); }


/* =========================================================================
   THE SITE
   The front page is the story and nothing else. What a guest looks up — the
   rooms, the places, the prices, the form — is on four pages of its own.
   Each of those sits at an hour too, so the whole site keeps one sky.
   ========================================================================= */

/* ---------------------------------------------------------------- shared */

.link {
	display: inline-block;
	position: relative;
	padding-bottom: 5px;
	font-size: 15.5px;
	font-weight: 500;
	color: var(--ink);
	background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
	transition: background-size .5s var(--ease-out), color .3s var(--ease-out);
}
.link:hover { color: var(--ink); background-size: 0 1px; background-position: 100% 100%; }
.link--light, .link--light:hover { color: var(--warm-white); }

.btn--lg { padding: 19px 38px; font-size: 16px; }

/* the hour that heads a chapter is a numeral you can read from across a room */
.hour__time { font-size: clamp(26px, 3.2vw, 46px); letter-spacing: -0.02em; }
.hour { align-items: center; gap: 18px; }

/* ------------------------------------------------------------- sun glow */

.sunglow {
	position: fixed;
	left: 0; top: 0;
	width: 120vmax;
	height: 120vmax;
	z-index: -3;
	pointer-events: none;
	border-radius: 50%;
	background: radial-gradient(circle,
		rgba(255, 221, 150, .62) 0%,
		rgba(255, 221, 150, .26) 24%,
		rgba(255, 221, 150, 0) 58%);
	opacity: 0;
	will-change: transform, opacity;
}
.stars { z-index: -2; }

/* ------------------------------------------------------- between pages */

.veil {
	position: fixed;
	inset: 0;
	z-index: 300;
	background: #1d1917;
	clip-path: inset(100% 0 0 0);
	transition: clip-path .44s cubic-bezier(.76, 0, .24, 1);
	pointer-events: none;
}
.is-leaving .veil { clip-path: inset(0 0 0 0); }
html.veil-in::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 300;
	background: #1d1917;
	pointer-events: none;
	animation: veilOut .8s cubic-bezier(.76, 0, .24, 1) .06s both;
}
@keyframes veilOut {
	from { clip-path: inset(0 0 0 0); }
	to   { clip-path: inset(0 0 100% 0); }
}

/* ------------------------------------------------------- inner page sky
 * The right colour before any script has run, then the script takes over. */

body.page-sky { background: var(--sky, var(--cream)); }
body.page-sky--late { --sky-static: #faf6ee; }
body.page-sky--noon { --sky-static: #fcfaf5; }
body.page-sky--afternoon { --sky-static: #f8efdd; }
body.page-sky--night { --sky-static: #1d1917; }
html:not(.sky-on) body.page-sky { background: var(--sky-static, var(--cream)); }

.sky-on body:not(.has-transparent-header) .site-header { background: var(--sky, var(--cream)); }
body.page-sky:not(.has-transparent-header) .site-header { background: var(--sky, var(--sky-static, var(--cream))); border-bottom-color: transparent; }
body.page-sky .site-header.is-stuck { border-bottom-color: var(--hairline); }

/* night, wherever it is: the header reads in cream */
.is-night .site-header .logo,
.is-night .site-header .nav__list a,
.is-night .site-header .langs__item,
.is-night .site-header .nav-toggle,
.is-night .site-header .clock,
html:not(.sky-on) body.page-sky--night .site-header .logo,
html:not(.sky-on) body.page-sky--night .site-header .nav__list a,
html:not(.sky-on) body.page-sky--night .site-header .nav-toggle { color: var(--cream); }
.is-night .site-header .supedra-mark rect:last-of-type,
html:not(.sky-on) body.page-sky--night .site-header .supedra-mark rect:last-of-type { fill: var(--cream); }
.is-night .site-header.is-stuck,
.is-night body.page-sky .site-header.is-stuck { border-bottom-color: rgba(246, 241, 231, .14); }
.night--flip input, .night--flip textarea { color-scheme: dark; }

/* ---------------------------------------------------------- page head */

.page-head { padding: clamp(150px, 22vh, 250px) 0 clamp(44px, 6vw, 90px); }
.page-head__title {
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(42px, 8.4vw, 136px);
	line-height: 0.96;
	letter-spacing: -0.045em;
	max-width: 13ch;
	text-wrap: balance;
	color: var(--ink);
}
.js .page-head__title .word__in { animation: wordUp 1.15s var(--ease-out) forwards; animation-delay: calc(var(--i) * 60ms + 160ms); }
.page-head__lede {
	margin-top: clamp(22px, 3vw, 40px);
	max-width: 46ch;
	font-size: clamp(17px, 1.5vw, 21px);
	line-height: 1.58;
	color: var(--soft-ink);
}

/* --------------------------------------------------------------- next */

.next { padding: clamp(90px, 13vw, 200px) 0 clamp(80px, 11vw, 170px); }
.next__line {
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(34px, 6.2vw, 104px);
	line-height: 1;
	letter-spacing: -0.04em;
	max-width: 14ch;
	color: var(--ink);
}
.next__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 40px; margin-top: clamp(28px, 4vw, 52px); }

/* ============================================================ the house */

.figures { padding-bottom: clamp(56px, 8vw, 120px); }
.figures__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px clamp(18px, 3vw, 48px); }
.figures__list li { border-top: 1px solid var(--ink); padding-top: 16px; }
.figures__num {
	display: block;
	font-family: var(--serif);
	font-size: clamp(38px, 5.2vw, 84px);
	line-height: 1;
	letter-spacing: -0.035em;
	font-variant-numeric: tabular-nums;
}
.figures__unit { display: block; margin-top: 8px; font-size: 14.5px; color: var(--grey); }

.room {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(28px, 6vw, 110px);
	align-items: center;
	padding: clamp(44px, 7vw, 110px) 0;
}
.room--flip .room__media { order: 2; }
.room__media { aspect-ratio: 4 / 3; }
.room:nth-child(3n + 2) .room__media { aspect-ratio: 5 / 4; }
.room__title {
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(34px, 5vw, 80px);
	line-height: 1;
	letter-spacing: -0.04em;
}
.room__text { margin-top: 18px; max-width: 36ch; font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.6; color: var(--soft-ink); }
.room__facts { margin-top: clamp(22px, 2.6vw, 36px); border-top: 1px solid var(--ink); }
.room__facts li { padding: 13px 0; border-bottom: 1px solid var(--hairline); font-size: 15.5px; }

.provided { padding: clamp(60px, 9vw, 140px) 0 0; }
.provided__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.provided__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(20px, 3vw, 44px); border-top: 1px solid var(--ink); }
.provided__list li { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--hairline); font-size: 15.5px; }
.provided__list svg { flex: none; color: var(--beige-dark); }

/* ============================================================ around us */

.spot {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
	grid-template-areas: "head media" "text media";
	gap: 18px clamp(28px, 6vw, 110px);
	align-items: start;
	padding: clamp(40px, 6vw, 96px) 0;
	border-top: 1px solid rgba(43, 38, 34, .26);
}
.spot__head { grid-area: head; }
.spot__media { grid-area: media; aspect-ratio: 3 / 2; }
.spot__body { grid-area: text; align-self: end; }
.spot__text { max-width: 36ch; font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.6; color: var(--soft-ink); }
.spot__credit { margin-top: 16px; font-size: 12.5px; color: var(--grey); }
.spot__credit a { text-decoration: underline; text-underline-offset: 2px; }
.spot__title {
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(38px, 6vw, 96px);
	line-height: 0.98;
	letter-spacing: -0.045em;
}
.spot__dist { margin-top: 12px; font-size: 14.5px; color: var(--grey); }

.getting { padding: clamp(60px, 9vw, 140px) 0 0; }
.getting__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.getting__list { border-top: 1px solid var(--ink); }
.getting__list li { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--hairline); font-size: 15.5px; line-height: 1.5; }
.getting__list svg { flex: none; margin-top: 2px; color: var(--beige-dark); }
.getting__list strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 19px; margin-bottom: 2px; }
.getting .lede + p { margin-top: 18px; }

/* ================================================================ rates */

.prices__list { border-top: 1px solid var(--ink); }
.prices__row {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
	gap: 10px clamp(20px, 4vw, 60px);
	align-items: baseline;
	padding: clamp(22px, 3vw, 40px) 0;
	border-bottom: 1px solid var(--hairline);
}
.prices__name { font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 3.4vw, 50px); line-height: 1.05; letter-spacing: -0.035em; }
.prices__months { margin-top: 6px; font-size: 15px; color: var(--grey); }
.prices__min { font-size: 15px; color: var(--grey); }
.prices__price { font-family: var(--serif); font-size: clamp(30px, 4.4vw, 68px); line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prices__price span { font-family: var(--sans); font-size: 14.5px; letter-spacing: 0; color: var(--grey); }

.know { padding: clamp(70px, 10vw, 150px) 0 0; }
.know__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.know__list { border-top: 1px solid var(--ink); }
.know__list li { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--hairline); font-size: 15.5px; line-height: 1.5; }
.know__list svg { flex: none; margin-top: 2px; color: var(--beige-dark); }

.months { padding: clamp(70px, 10vw, 150px) 0 0; }
.months__list { margin: clamp(28px, 4vw, 56px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.months__row {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.6fr) 80px;
	gap: 6px clamp(16px, 3vw, 44px);
	align-items: baseline;
	padding: 17px 0;
	border-bottom: 1px solid var(--hairline);
	font-size: 15.5px;
	line-height: 1.5;
}
.months__name { font-family: var(--serif); font-size: 20px; }
.months__what { font-weight: 500; }
.months__text { color: var(--soft-ink); }
.months__sea { text-align: right; color: var(--grey); white-space: nowrap; font-variant-numeric: tabular-nums; }
.months__row.is-now { border-bottom-color: var(--ink); box-shadow: inset 3px 0 0 var(--gold); padding-left: 16px; }

/* ================================================================= book */

.ask { padding-bottom: clamp(80px, 11vw, 170px); }
.ask__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(36px, 7vw, 130px); align-items: start; }
.ask__form .booking-search { gap: 26px 22px; }
.ask__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; border-top: 1px solid var(--ink); padding-top: 18px; }
.ask__facts strong { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 2.8vw, 40px); line-height: 1; letter-spacing: -0.03em; }
.ask__facts span { display: block; margin-top: 8px; font-size: 14px; color: var(--grey); }
.ask__quote { margin: clamp(34px, 4vw, 56px) 0 0; }
.ask__quote p { font-family: var(--serif); font-size: clamp(21px, 2vw, 28px); line-height: 1.3; letter-spacing: -0.02em; }
.ask__quote cite { display: block; margin-top: 14px; font-style: normal; font-size: 14.5px; color: var(--grey); }
.ask__contact { margin-top: clamp(28px, 3.4vw, 44px); }
.ask__contact a { display: inline-flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 16px; }
.ask__contact svg { color: var(--gold); }

/* With the Bookings plugin: the calendar takes the full width, the facts sit under it. */
.ask--calendar .ask__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(56px, 7vw, 110px); }
.ask--calendar .ask__side { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.ask--calendar .ask__facts { grid-column: 1; }
.ask--calendar .ask__quote { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.ask--calendar .ask__contact { grid-column: 1; margin-top: 0; }
@media (max-width: 899px) {
	.ask--calendar .ask__side { grid-template-columns: minmax(0, 1fr); }
	.ask--calendar .ask__quote { grid-column: 1; grid-row: auto; }
}

/* ============================================== the front page, story only */

.stmt__text { margin-top: clamp(40px, 6vw, 90px); margin-left: auto; }

/* coffee on the loggia: two photographs at different distances */
.scene { padding-block: var(--section-y) calc(var(--section-y) + 60px); }
.scene__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 7vw, 130px); align-items: center; }
.scene__media { position: relative; padding: 0 16% 12% 0; }
.scene__img--a { aspect-ratio: 4 / 5; }
.scene__img--b { position: absolute; right: 0; bottom: 0; width: 44%; aspect-ratio: 4 / 3; box-shadow: 0 30px 60px -30px rgba(43, 38, 34, .45); }
.scene__title {
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(34px, 5.4vw, 88px);
	line-height: 0.98;
	letter-spacing: -0.04em;
	max-width: 11ch;
}
.scene__lede { margin: clamp(18px, 2.4vw, 30px) 0 clamp(22px, 2.8vw, 36px); max-width: 38ch; font-size: clamp(16.5px, 1.35vw, 19.5px); line-height: 1.6; color: var(--soft-ink); }

/* out before the crowd: names only */
.places__row { display: block; padding: 0; }
.places__link { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: clamp(20px, 2.8vw, 40px) 0; color: var(--ink); }
.places__link:hover { color: var(--ink); }
.places__name { display: block; }
.places__thumb { margin: 0 0 22px; }
.places__more { margin-top: clamp(28px, 4vw, 56px); }
.has-float .places__row:hover .places__name { transform: translateX(22px); }

/* the last card on the track */
.rooms__end { align-self: stretch; display: flex; }
.rooms__endlink {
	display: flex;
	align-items: flex-end;
	width: min(70vw, 420px);
	min-height: calc(var(--h) * .86);
	padding: 28px;
	border: 1px solid var(--ink);
	color: var(--ink);
	font-family: var(--serif);
	font-size: clamp(26px, 2.8vw, 40px);
	line-height: 1.05;
	letter-spacing: -0.03em;
	transition: background-color .5s var(--ease-out), color .5s var(--ease-out);
}
.rooms__endlink:hover { background: var(--ink); color: var(--cream); }
.rooms__endlink span { max-width: 9ch; }

/* the quiet hours: one photograph opening to the whole screen */
.quiet { position: relative; }
.quiet__sticky { position: relative; }
.quiet__frame { aspect-ratio: 16 / 10; }
.quiet__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 17, 15, .72), rgba(20, 17, 15, 0) 58%); }
.quiet__text { position: absolute; left: 0; right: 0; bottom: clamp(26px, 6vh, 70px); color: var(--warm-white); }
.quiet__line {
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(34px, 7.4vw, 124px);
	line-height: 0.98;
	letter-spacing: -0.045em;
	max-width: 11ch;
}
@media (max-width: 760px) { .quiet__frame { aspect-ratio: 4 / 5; } }
.quiet.is-live { height: 240vh; }
.quiet.is-live .quiet__sticky { position: sticky; top: 0; height: 100vh; overflow: clip; }
.quiet.is-live .quiet__frame { position: absolute; inset: 0; aspect-ratio: auto; transform: scale(.4); will-change: transform; }
.quiet.is-live .quiet__text { opacity: 0; will-change: transform, opacity; }

/* after dark */
.finale { padding: clamp(110px, 20vh, 240px) 0 clamp(90px, 14vh, 180px); color: var(--warm-white); }
.finale__line {
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(54px, 13vw, 230px);
	line-height: 0.9;
	letter-spacing: -0.055em;
}
.finale__price { margin-top: clamp(26px, 3.4vw, 48px); max-width: 40ch; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; color: #d9d1c4; }
.finale__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 40px; margin-top: clamp(28px, 3.6vw, 48px); }

/* ---------------------------------------------------------- small screens */

@media (max-width: 860px) {
	.figures__list { grid-template-columns: 1fr 1fr; }
	.room, .provided__grid, .getting__grid, .know__grid, .ask__grid, .scene__grid { grid-template-columns: minmax(0, 1fr); }
	.room--flip .room__media { order: 0; }
	.spot { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "media" "text"; }
	.prices__row { grid-template-columns: minmax(0, 1fr) auto; }
	.prices__min { grid-column: 1; grid-row: 2; }
	.prices__price { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
	.months__row { grid-template-columns: minmax(0, 1fr) auto; }
	.months__what, .months__text { grid-column: 1 / -1; }
	.months__sea { grid-column: 2; grid-row: 1; }
	.scene__media { padding-right: 10%; }
	.stmt__text { margin-left: 0; }
}
@media (max-width: 520px) {
	.provided__list { grid-template-columns: 1fr; }
	.ask__facts { grid-template-columns: 1fr 1fr; }
}

/* a text link is still a thing to hit with a thumb */
@media (pointer: coarse) { .link { padding-top: 11px; padding-bottom: 12px; } }


/* ------------------------------------------------------------------ blocks
   A page made of section blocks. The sections bring their own width; an
   ordinary paragraph, picture or list written between them gets the reading
   column, so it sits as it would on a plain page. */
.page-blocks > :not(section):not(header):not(.alignfull):not(script):not(style) {
	width: min(100% - 2 * var(--gutter, 24px), 720px);
	margin-inline: auto;
	margin-block: 1.1em;
}
.page-blocks > .alignwide { width: min(100% - 2 * var(--gutter, 24px), 1180px); }
.page-blocks > .alignfull { width: 100%; margin-block: 0; }
.page-blocks > h2:not([class]), .page-blocks > h3:not([class]) { font-family: var(--serif); margin-top: 1.8em; }