.home-intro {
	padding: 100px var(--spacing-page);
	background: var(--color-white);
	grid-template: "head img" "head copy" 1fr / minmax(0, 626px) minmax(0, 448px);
	justify-content: space-between;
	align-items: stretch;
	gap: 24px 48px;
	display: grid;
}

.home-intro-head {
	flex-direction: column;
	grid-area: head;
	gap: 32px;
	display: flex;
}

.home-intro-head h1 {
	margin: 0;
}

.home-intro-img {
	aspect-ratio: 448 / 615;
	grid-area: img;
	width: 100%;
}

.home-intro-img .cover {
	object-position: 50% 99.5%;
}

.home-intro-copy {
	color: var(--color-muted);
	grid-area: copy;
	max-width: 301px;
}

.swipe-row {
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	display: flex;
	overflow-x: auto;
	overflow-y: hidden; /* Otherwise the link's tap area makes the row scroll vertically and swallow page swipes on touch. */
}

.swipe-row::-webkit-scrollbar {
	display: none;
}

.sec-head-aside {
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 20px;
	width: auto;
	display: flex;
}

.home-collections h2,
.home-guide h2,
.villa-card h3,
.villa-card p,
.home-guide p {
	margin: 0;
}

.home-collections {
	background: var(--color-cream);
	padding: 100px var(--spacing-page);
	flex-flow: column;
	align-items: stretch;
	gap: 48px;
	display: flex;
	overflow: hidden;
}

.home-collections .sec-head h2 {
	max-width: 382px;
}

.card-row {
	margin-right: calc(-1 * var(--spacing-page));
	gap: 16px;
	width: auto;
	max-width: none;
}

.villa-card {
	flex: 0 0 calc((100% - var(--spacing-page) - 32px) / 3);
	scroll-snap-align: start;
	min-width: 0;
}

.villa-card-link {
	flex-direction: column;
	gap: 16px;
	display: flex;
}

.villa-card-img {
	aspect-ratio: 448 / 615;
}

.villa-card-body {
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	display: flex;
}

.villa-card-text {
	flex-direction: column;
	gap: 8px;
	display: flex;
}

.villa-card .ts24.is-name {
	line-height: 1;
}

.villa-card-text p {
	max-width: 277px;
}

.villa-card.is-heritage-villas .villa-card-text p {
	max-width: 265px;
}

.villa-card.is-heritage-villas .cover {
	object-position: 50% 0%;
}

.villa-card.is-bold .cover {
	object-position: 50% 99%;
}

/* A villa that is opening soon shows its photo under a shade. */
.villa-card.is-opening_soon .villa-card-img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--color-shade);
	pointer-events: none;
}

.home-guide {
	background: var(--color-cream);
	padding: 125px var(--spacing-page) 100px;
	flex-flow: column;
	align-items: stretch;
	gap: 72px;
	display: flex;
}

.home-guide .sec-head-aside p {
	color: var(--color-muted);
	max-width: 353px;
}

.guide-list {
	border-top: 1px solid var(--color-divider);
}

.guide-row {
	--gap1: clamp(64px, 10.4167vw, 150px);
	--gap2: clamp(64px, calc(150px - (1440px - 100vw) * .25), 150px);
	--desc: clamp(280px, calc(396px - (1440px - 100vw) * .5), 396px);
	grid-template-columns: 20px var(--gap1) auto minmax(0, 1fr) var(--desc) var(--gap2) 32px;
	border-bottom: 1px solid var(--color-divider);
	grid-template-areas: "num . title . desc . arrow";
	align-items: center;
	height: 149px;
	padding: 0 28px;
	transition: background-color .3s;
	display: grid;
	position: relative;
}

.guide-row.is-dining {
	--row-color: var(--color-guide-dining);
}

.guide-row.is-wellness {
	--row-color: var(--color-guide-wellness);
}

.guide-row.is-culture {
	--row-color: var(--color-sand);
}

.guide-row.is-experience {
	--row-color: var(--color-guide-experience);
}

.guide-num {
	font-family: var(--font-body);
	letter-spacing: .1em;
	color: var(--color-sand);
	grid-area: num;
	font-size: 12px;
	line-height: normal;
	transition: color .3s;
}

.guide-title-wrap {
	grid-area: title;
	position: relative;
}

.guide-row .guide-title {
	white-space: nowrap;
	color: var(--color-ink);
	transition: color .3s;
	display: block;
}

.guide-thumb {
	z-index: 2;
	opacity: 0;
	pointer-events: none;
	width: 194px;
	max-width: none;
	height: 241px;
	transition: opacity .3s;
	position: absolute;
	top: 50%;
	left: max(100% + 24px, 254px);
	overflow: hidden;
	transform: translateY(-50%);
}

.guide-row.is-culture .cover {
	object-position: 50% 30%;
}

.guide-row .guide-desc {
	color: var(--color-muted);
	grid-area: desc;
	transition: color .3s;
}

.guide-arrow {
	grid-area: arrow;
	width: 32px;
	height: 32px;
	position: relative;
}

.guide-arrow img {
	transition: opacity .3s;
	position: absolute;
	inset: 0;
}

.guide-arrow .for-light {
	opacity: 0;
}

.guide-row.is-active {
	z-index: 1;
	background: var(--row-color);
}

.guide-row.is-active .guide-num {
	color: var(--color-cream);
}

.guide-row.is-active .guide-title {
	color: var(--color-white);
}

.guide-row.is-active .guide-desc {
	color: var(--color-guide-active-copy);
}

.guide-row.is-active .guide-thumb,
.guide-row.is-active .for-light {
	opacity: 1;
}

.guide-row.is-active .for-dark {
	opacity: 0;
}

.home-story h2,
.home-story p,
.home-ready h2,
.home-journal h2,
.home-journal h3,
.home-journal p {
	margin: 0;
}

.home-story {
	background: var(--color-white);
	padding: 125px 0 0 var(--spacing-page);
	flex-flow: column;
	align-items: stretch;
	gap: 72px;
	display: flex;
}

.home-story .sec-head h2 {
	max-width: 424px;
}

.story-row {
	align-items: flex-start;
	display: flex;
}

.story-left {
	flex: 1 1 0;
	justify-content: flex-end;
	min-width: 0;
	display: flex;
}

.story-small {
	flex-direction: column;
	gap: 24px;
	width: 51.5988%;
	display: flex;
}

.story-small-img {
	aspect-ratio: 355 / 476;
}

.story-small p {
	max-width: 274px;
}

.story-big {
	aspect-ratio: 720 / 915;
	flex-shrink: 0;
	width: 51.1364%;
}

.story-big .cover {
	object-position: 50% 99.5%;
}

.home-ready {
	background: var(--color-white);
	padding: 200px 0 200px var(--spacing-page);
	text-align: center;
	flex-flow: column;
	align-items: center;
	gap: 56px;
	display: flex;
}

.home-ready h2 {
	max-width: 668px;
}

.home-journal {
	background: var(--color-cream);
	padding: 100px var(--spacing-page) 150px;
	flex-flow: column;
	align-items: stretch;
	gap: 56px;
	display: flex;
}

.journal-grid {
	scroll-snap-type: none;
	justify-content: space-between;
	align-items: flex-end;
	overflow: visible;
}

.journal-main {
	flex-direction: column;
	flex-shrink: 0;
	gap: 32px;
	width: 49.4186%;
	display: flex;
}

.journal-main-img {
	aspect-ratio: 1;
	display: block;
}

.journal-main-body {
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	gap: 32px;
	min-height: 276.25px;
	display: flex;
}

.journal-main-text {
	flex-direction: column;
	gap: 16px;
	display: flex;
}

.journal-main-text h3 {
	max-width: 439px;
}

.journal-main-text p {
	max-width: 505.446px;
}

.journal-side {
	flex-direction: column;
	flex: 1 1 0;
	gap: 20px;
	min-width: 0;
	padding-left: 8.8663%;
	display: flex;
}

.journal-item {
	align-items: flex-start;
	gap: 40px;
	display: flex;
}

.journal-item-img {
	aspect-ratio: 235 / 309;
	flex-shrink: 0;
	width: 40.9408%;
	display: block;
}

.journal-item-body {
	flex-direction: column;
	flex: 1 1 0;
	align-items: flex-start;
	gap: 24px;
	min-width: 0;
	display: flex;
}

.journal-item-text {
	flex-direction: column;
	gap: 8px;
	display: flex;
}

.journal-item-text h3 {
	max-width: 249px;
}

.journal-item-text p {
	max-width: 305px;
}

@media (width<=1279px) {
	.home-collections {
		gap: 56px;
		padding: 120px 0;
	}

	.home-collections .sec-head {
		padding: 0 var(--spacing-page);
	}

	.home-collections .sec-head h2 {
		max-width: 276px;
	}

	.home-collections .card-row {
		padding: 0 var(--spacing-page);
		scroll-padding-left: var(--spacing-page);
		margin-right: 0;
	}

	.villa-card {
		flex-basis: 310px;
	}

	.villa-card-img {
		aspect-ratio: 310 / 410;
	}

	.villa-card-link,
	.villa-card-body {
		gap: 20px;
	}

	.home-guide {
		padding: 120px var(--spacing-page);
		gap: 48px;
	}

	.home-guide .sec-head-row {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
	}

	.home-guide .sec-head {
		gap: 12px;
	}

	.home-guide .sec-head-aside {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
	}

	.home-guide .sec-head-aside p {
		max-width: 332px;
	}

	.home-guide .sec-head-aside .text-link {
		align-self: flex-end;
	}

	.guide-row {
		grid-template-columns: 34px minmax(0, 1fr) minmax(0, 334px) 32px;
		grid-template-areas: "num title desc arrow";
		align-items: center;
		column-gap: 0;
		height: auto;
		padding: 58px 48px 58px 0;
	}

	.guide-num {
		align-self: center;
	}

	.guide-title-wrap {
		padding-right: 12px;
	}

	.guide-thumb {
		display: none;
	}

	.home-guide .guide-row .guide-desc {
		max-width: 232px;
		font-size: 14px;
	}

	.home-story {
		padding: 120px var(--spacing-page);
		gap: 64px;
	}

	.home-story .sec-head {
		gap: 20px;
	}

	.story-row {
		gap: 24px;
	}

	.story-left {
		flex: 0 0 45.42%;
		justify-content: flex-start;
	}

	.story-small {
		width: 100%;
	}

	.story-small-img {
		aspect-ratio: 357 / 440;
	}

	.story-small p {
		max-width: 320px;
	}

	.story-big {
		aspect-ratio: 405 / 640;
		flex: 1 1 0;
		width: auto;
	}

	.home-ready {
		padding: 160px var(--spacing-page);
		gap: 40px;
	}

	.home-ready h2 {
		max-width: 524px;
	}

	.home-journal {
		padding: 120px var(--spacing-page);
	}

	.home-journal .sec-head-row > .text-link {
		align-self: flex-end;
	}

	.journal-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
		gap: 56px 24px;
		display: grid;
	}

	.journal-main {
		grid-column: 1 / -1;
		gap: 28px;
		width: auto;
	}

	.journal-main-img {
		aspect-ratio: 786 / 480;
	}

	.journal-main-body {
		gap: 48px;
		min-height: 0;
	}

	.journal-main-text {
		gap: 12px;
	}

	.journal-main-text p {
		max-width: 481px;
	}

	.journal-main-text h3 {
		max-width: none;
	}

	.journal-side {
		display: contents;
	}

	.journal-item {
		flex-direction: column;
		gap: 24px;
	}

	.journal-item-img {
		aspect-ratio: 381 / 440;
		width: 100%;
	}

	.journal-item-text {
		gap: 12px;
	}

	.journal-item-text h3,
	.journal-item-text p {
		max-width: none;
	}
}

@media (width>=768px) and (width<=1279px) {
	.home-intro {
		padding: 120px var(--spacing-page);
		grid-template: "head head" ". img" ". copy" / minmax(0, 1fr) minmax(0, 357px);
		row-gap: 20px;
	}

	.home-intro-head {
		gap: 20px;
		margin-bottom: 44px;
	}

	.home-intro-head h1 {
		max-width: 603px;
	}

	.home-intro-img {
		aspect-ratio: 357 / 470;
	}

	.home-intro p.home-intro-copy {
		max-width: 300px;
		font-size: 15px;
	}
}

@media (width<=767px) {
	.home-intro {
		padding: 96px var(--spacing-page);
		grid-template-columns: minmax(0, 1fr) 75.43%;
		grid-template-areas: "head head" ". img" ". copy";
		row-gap: 16px;
	}

	.home-intro-head {
		gap: 12px;
		margin-bottom: 24px;
	}

	.home-intro-img {
		aspect-ratio: 264 / 340;
	}

	.home-intro p.home-intro-copy {
		max-width: none;
		font-size: 14px;
	}

	.home-collections {
		gap: 40px;
		padding: 96px 0;
	}

	.home-collections .sec-head h2 {
		max-width: 224px;
	}

	.home-collections .card-row {
		gap: 12px;
	}

	.villa-card {
		flex-basis: min(300px, 85.71%);
	}

	.villa-card-img {
		aspect-ratio: 300 / 412;
	}

	.villa-card-link {
		gap: 16px;
	}

	.villa-card-body {
		gap: 24px;
	}

	.home-guide {
		padding: 96px var(--spacing-page);
		gap: 40px;
	}

	.home-guide .sec-head-aside {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.home-guide .sec-head-aside .text-link {
		align-self: flex-start;
	}

	.home-guide .sec-head-aside p {
		max-width: none;
	}

	.guide-row {
		grid-template-columns: 34px minmax(0, 1fr) 32px;
		grid-template-areas: "num title title" ". desc arrow";
		row-gap: 12px;
		padding: 28px 0;
	}

	.guide-title-wrap {
		padding-right: 0;
	}

	.guide-row .guide-title {
		white-space: normal;
	}

	.home-guide .guide-row .guide-desc {
		max-width: 246px;
		padding-left: 2px;
	}

	.home-story {
		padding: 96px var(--spacing-page);
		gap: 40px;
	}

	.home-story .sec-head {
		gap: 12px;
	}

	.story-row {
		flex-direction: column;
		gap: 80px;
	}

	.story-left {
		flex: none;
		width: 100%;
	}

	.story-small-img {
		aspect-ratio: 220 / 270;
		align-self: flex-end;
		width: 62.86%;
	}

	.story-small p {
		max-width: 274px;
	}

	.story-big {
		aspect-ratio: 350 / 440;
		flex: none;
		width: 100%;
	}

	.home-ready {
		padding: 128px var(--spacing-page);
	}

	.home-ready h2 {
		max-width: 248px;
	}

	.home-journal {
		padding: 96px var(--spacing-page);
		gap: 40px;
	}

	.home-journal .sec-head-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 32px;
	}

	.home-journal .sec-head-row > .sec-head {
		flex: none;
		width: 100%;
	}

	.home-journal .sec-head-row > .text-link {
		align-self: flex-start;
	}

	.journal-grid {
		flex-direction: column;
		gap: 56px;
		display: flex;
	}

	.journal-main {
		flex: none;
		gap: 32px;
	}

	.journal-main-img {
		aspect-ratio: 350 / 420;
	}

	.journal-main-body {
		gap: 24px;
	}

	.journal-main-text {
		gap: 16px;
	}

	.journal-main-text h3 {
		max-width: 439px;
	}

	.journal-side {
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		flex: none;
		flex-direction: row;
		gap: 16px;
		max-width: none;
		margin-right: calc(-1 * var(--spacing-page));
		padding-left: 0;
		padding-right: var(--spacing-page);
		display: flex;
		overflow-x: auto;
		overflow-y: hidden;
		padding-bottom: 14px;
		margin-bottom: -14px;
	}

	.journal-side::-webkit-scrollbar {
		display: none;
	}

	.journal-item {
		scroll-snap-align: start;
		flex: 0 0 min(280px, 80%);
		gap: 32px;
	}

	.journal-item-img {
		aspect-ratio: 280 / 340;
	}

	.journal-item-text {
		gap: 8px;
	}
}

/* With JavaScript the row is dragged (drag-row.js): the cards move and the row clips them. */
html.azuma-js .card-row {
	scroll-snap-type: none;
	touch-action: pan-y;
	cursor: grab;
	-webkit-user-select: none;
	user-select: none;
	overflow: hidden;
	overflow: clip; /* Can't be scrolled, so focusing a card doesn't shift the row. */
}

/* Cards keep the pointer for clicking. The grab hand shows between them, and grabbing while dragging. */
html.azuma-js .card-row.is-dragging,
html.azuma-js .card-row.is-dragging a {
	cursor: grabbing;
}

html.azuma-js .card-row .villa-card {
	will-change: transform;
}

/* All cards fit, so there is nothing to drag. */
html.azuma-js .card-row.is-static {
	cursor: auto;
}

.card-row a,
.card-row img {
	-webkit-user-drag: none;
}

@media (prefers-reduced-motion: reduce) {
	.guide-row,
	.guide-num,
	.guide-title,
	.guide-thumb,
	.guide-desc,
	.guide-arrow img {
		transition-duration: .01ms;
	}
}