/* -------------------------------------------------------------------------
 * We Tour The World — home page
 * Destination-first road journal magazine, built to the approved mock.
 * Shared utilities, header and footer live in chrome.css.
 *
 *  1. Hero + world map
 *  2. Destination directory
 *  3. Featured stories
 *  4. Advertisement + journey figures
 *  5. Two journeys
 *  6. Plan your tour
 *  7. About
 *  8. Recognition
 *  9. Responsive
 * ---------------------------------------------------------------------- */

/* 1. Hero + world map --------------------------------------------------- */

.wttw-hero {
	display: grid;
	grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
	min-height: min(calc(100svh - var(--wttw-header-h)), 47rem);
	background: var(--wttw-ocean);
}

.wttw-hero__story {
	position: relative;
	display: flex;
	background: var(--wttw-paper-deep);
	isolation: isolate;
	overflow: hidden;
}

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

.wttw-hero__media picture,
.wttw-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 18% 56%;
}

.wttw-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(250, 248, 245, 0.94) 0%,
		rgba(250, 248, 245, 0.8) 26%,
		rgba(250, 248, 245, 0.34) 48%,
		rgba(250, 248, 245, 0) 66%
	);
}

.wttw-hero__copy {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	padding: clamp(1.75rem, 5vh, 3.2rem) clamp(1rem, 1.6vw, 1.75rem)
		clamp(2rem, 4vh, 3rem) clamp(1.5rem, var(--wttw-gutter), 6rem);
}

.wttw-hero__title {
	margin-top: clamp(0.9rem, 2.4vh, 1.7rem);
	font-size: clamp(2.05rem, 1.05rem + 3.85vw, 5.1rem);
	letter-spacing: 0.004em;
	line-height: 1;
}

/* Two fixed lines; the second is set a touch smaller, as in the mock. */
.wttw-hero__title-line {
	display: block;
	white-space: nowrap;
}

.wttw-hero__title-line + .wttw-hero__title-line {
	font-size: 0.86em;
	line-height: 1.05;
}

.wttw-hero__lead {
	display: grid;
	grid-template-areas:
		"eyebrow ."
		"intro note";
	grid-template-columns: minmax(0, auto) minmax(0, auto);
	justify-content: start;
	align-items: center;
	column-gap: clamp(1.25rem, 4.2vw, 4rem);
	margin-top: clamp(1.1rem, 3vh, 2.1rem);
}

.wttw-hero__eyebrow {
	grid-area: eyebrow;
	display: inline-block;
	margin-bottom: 0.85rem;
	color: var(--wttw-ink);
	font-family: var(--wttw-font-display);
	font-size: clamp(1rem, 0.7rem + 0.55vw, 1.22rem);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-decoration: none;
	text-transform: uppercase;
}

.wttw-hero__eyebrow:hover {
	color: var(--wttw-sand-ink);
	text-decoration: underline;
}

.wttw-hero__intro {
	grid-area: intro;
	max-width: 18rem;
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.6;
}

.wttw-hero__note {
	grid-area: note;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	color: var(--wttw-coral);
}

.wttw-hero__note-arrow {
	width: clamp(3.75rem, 4.4vw, 5.75rem);
	height: auto;
	margin-top: 0.1rem;
	margin-left: 1.1rem;
}

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

.wttw-hero__map {
	position: relative;
	background: var(--wttw-ocean);
	overflow: hidden;
}

.wttw-map {
	position: relative;
	height: 100%;
	min-height: 20rem;
}

.wttw-map__sheet {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.wttw-map__grid {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
			to right,
			rgba(255, 255, 255, 0.19) 1px,
			transparent 1px
		),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.19) 1px, transparent 1px);
	background-size: 12.5% 14.2857%;
}

.wttw-map__corner {
	position: absolute;
	left: clamp(1.1rem, 2.2vw, 2.1rem);
	z-index: 3;
	color: var(--wttw-white);
}

.wttw-map__corner--top {
	top: clamp(0.75rem, 2vh, 1.6rem);
}

.wttw-map__compass {
	width: clamp(2.9rem, 4.1vw, 4.9rem);
	height: auto;
	opacity: 0.82;
}

.wttw-map__corner--bottom {
	right: clamp(1.1rem, 2.2vw, 2.1rem);
	bottom: clamp(1rem, 2.4vh, 1.9rem);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 1.1rem;
}

.wttw-map__meta {
	width: 100%;
	font-family: var(--wttw-font-display);
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.72;
}

.wttw-map__coords {
	color: var(--wttw-ink);
	font-family: var(--wttw-font-display);
	font-size: clamp(0.85rem, 0.6rem + 0.4vw, 1.05rem);
	font-weight: 500;
	letter-spacing: 0.02em;
	opacity: 0.7;
}

.wttw-map__hint {
	margin: 0;
	margin-inline-start: auto;
	color: var(--wttw-ink);
	font-size: 0.9rem;
	opacity: 0.72;
}

.wttw-map__frame {
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 2;
	width: 100%;
	aspect-ratio: 360 / 205;
	transform: translateY(-50%);
}

.wttw-map__land,
.wttw-map__route {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.wttw-map__land {
	object-fit: fill;
}

.wttw-map__route-line path {
	fill: none;
	stroke: var(--wttw-coral);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 7 7;
	vector-effect: non-scaling-stroke;
	opacity: 0.92;
}

.wttw-map__pins ellipse {
	fill: var(--wttw-white);
	stroke: var(--wttw-coral);
	stroke-width: 3;
	vector-effect: non-scaling-stroke;
}

.wttw-map__hotspots {
	position: absolute;
	inset: 0;
	z-index: 3;
}

.wttw-map-link,
.wttw-map-label--static {
	position: absolute;
	color: var(--wttw-ink);
	top: var(--map-y);
	left: var(--map-x);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0.3rem 0.5rem;
	text-decoration: none;
	transform: translate(-50%, -50%);
}

.wttw-map-label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.05rem;
	pointer-events: none;
}

.wttw-map-label__text {
	max-width: 7ch;
	color: var(--wttw-ink);
	font-family: var(--wttw-font-display);
	font-size: clamp(0.68rem, 0.35rem + 0.95vw, 1.2rem);
	font-weight: 600;
	letter-spacing: 0.055em;
	line-height: 1.04;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
	text-align: center;
	text-transform: uppercase;
	transition: color var(--wttw-fast) var(--wttw-ease);
}

.wttw-map-label__plane {
	width: clamp(0.62rem, 1.1vw, 1.15rem);
	height: auto;
	color: var(--wttw-ink);
	opacity: 0.7;
}

.wttw-map-label--static .wttw-map-label__text,
.wttw-map-label--static .wttw-map-label__plane {
	opacity: 0.58;
}

.wttw-map-link__count {
	position: absolute;
	top: 100%;
	margin-top: 0.15rem;
	padding: 0.15rem 0.4rem;
	background: var(--wttw-ink);
	color: var(--wttw-white);
	font-family: var(--wttw-font-display);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity var(--wttw-fast) var(--wttw-ease),
		transform var(--wttw-fast) var(--wttw-ease);
	pointer-events: none;
}

.wttw-map-link:hover .wttw-map-label__text,
.wttw-map-link:focus-visible .wttw-map-label__text {
	color: var(--wttw-coral);
}

.wttw-map-link:hover .wttw-map-link__count,
.wttw-map-link:focus-visible .wttw-map-link__count {
	opacity: 1;
	transform: translateY(0);
}

/* 2. Destination directory ---------------------------------------------- */

.wttw-destinations {
	padding-block: var(--wttw-space-5) var(--wttw-space-6);
	background: var(--wttw-paper);
}

.wttw-destinations__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wttw-space-3);
}

.wttw-destinations__stamp {
	flex: none;
	width: clamp(9rem, 19vw, 17rem);
	height: auto;
	margin-top: -2.1rem;
	color: var(--wttw-ink-soft);
	opacity: 0.5;
}

.wttw-destinations__stamp text {
	font-family: var(--wttw-font-display);
}

.wttw-dest-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	grid-template-rows: auto auto;
	margin-top: var(--wttw-space-3);
}

.wttw-dest-col {
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid;
}

.wttw-dest-col + .wttw-dest-col {
	border-inline-start: 1px solid var(--wttw-line);
}

.wttw-dest-col__head,
.wttw-dest-col__list {
	padding-inline: 1.6rem 2.2rem;
}

.wttw-dest-col:first-child .wttw-dest-col__head,
.wttw-dest-col:first-child .wttw-dest-col__list {
	padding-inline-start: 0.85rem;
}

.wttw-dest-col__head {
	margin: 0;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--wttw-line);
}

.wttw-dest-col__head a {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	margin-inline-start: -0.85rem;
	padding: 0.35rem 0.85rem;
	color: var(--wttw-slate-deep);
	font-family: var(--wttw-font-display);
	font-size: clamp(0.95rem, 0.7rem + 0.4vw, 1.15rem);
	font-weight: 600;
	letter-spacing: 0.085em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background var(--wttw-fast) var(--wttw-ease),
		color var(--wttw-fast) var(--wttw-ease);
}

/* The sand marker rests on the first column and follows pointer or focus. */
.wttw-dest-col:first-child .wttw-dest-col__head a,
.wttw-dest-col:hover .wttw-dest-col__head a,
.wttw-dest-col:focus-within .wttw-dest-col__head a,
.wttw-dest-col.is-linked .wttw-dest-col__head a {
	background: var(--wttw-sand);
	color: var(--wttw-ink);
}

.wttw-dest-grid:has(.wttw-dest-col:hover)
	.wttw-dest-col:first-child:not(:hover):not(:focus-within):not(.is-linked)
	.wttw-dest-col__head a,
.wttw-dest-grid:has(.wttw-dest-col:focus-within)
	.wttw-dest-col:first-child:not(:hover):not(:focus-within):not(.is-linked)
	.wttw-dest-col__head a,
.wttw-dest-grid:has(.wttw-dest-col.is-linked)
	.wttw-dest-col:first-child:not(:hover):not(:focus-within):not(.is-linked)
	.wttw-dest-col__head a {
	background: transparent;
	color: var(--wttw-slate-deep);
}

.wttw-dest-col__list {
	margin: 0;
	padding-block: 0.4rem 0;
	list-style: none;
}

.wttw-dest-col__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 3rem;
	padding-block: 0.4rem;
	border-bottom: 1px solid var(--wttw-line);
	color: var(--wttw-ink);
	font-size: 1.05rem;
	font-weight: 700;
	text-decoration: none;
	transition: color var(--wttw-fast) var(--wttw-ease);
}

.wttw-dest-col__list .wttw-icon {
	flex: none;
	color: var(--wttw-ink-mute);
	transition: transform var(--wttw-fast) var(--wttw-ease),
		color var(--wttw-fast) var(--wttw-ease);
}

.wttw-dest-col__list a:hover {
	color: var(--wttw-sand-ink);
}

.wttw-dest-col__list a:hover .wttw-icon {
	color: var(--wttw-sand-ink);
	transform: translateX(3px);
}

/* 3. Featured stories --------------------------------------------------- */

.wttw-stories {
	padding-block: var(--wttw-space-5);
	background: var(--wttw-white);
}

.wttw-stories__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem var(--wttw-space-3);
	margin-bottom: var(--wttw-space-3);
}

/* One uniform 3:2 frame per card, so real landscape photography stays intact
   and every row lines up. */
.wttw-story-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wttw-space-3) 1.35rem;
}

.wttw-story-card {
	display: grid;
	grid-template-rows: auto 1fr;
	align-content: start;
	min-width: 0;
}

.wttw-story-card__media {
	position: relative;
	display: block;
}

.wttw-story-card__frame {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	background: var(--wttw-paper-deep);
	overflow: hidden;
}

.wttw-story-card__frame picture,
.wttw-story-card__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wttw-story-card__frame img {
	transition: transform 620ms var(--wttw-ease);
}

.wttw-story-card:hover .wttw-story-card__frame img {
	transform: scale(1.035);
}

.wttw-story-card__region {
	position: absolute;
	bottom: -0.7rem;
	left: 0.55rem;
	padding: 0.28rem 0.6rem;
	background: var(--wttw-slate);
	color: #fff;
	font-family: var(--wttw-font-display);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.wttw-story-card__body {
	padding-top: 1.45rem;
}

.wttw-story-card__title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-family: var(--wttw-font-body);
	font-size: 1.12rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: none;
}

.wttw-story-card__title a {
	color: var(--wttw-ink);
	text-decoration: none;
	transition: color var(--wttw-fast) var(--wttw-ease);
}

.wttw-story-card__title a:hover,
.wttw-story-card__title a:focus-visible {
	color: var(--wttw-slate-deep);
}

.wttw-story-card__excerpt {
	display: -webkit-box;
	overflow: hidden;
	margin: 0.45rem 0 0;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	color: var(--wttw-ink-soft);
	font-size: 0.98rem;
	line-height: 1.55;
}

/* 4. Advertisement + journey figures ------------------------------------ */

.wttw-figures {
	padding-bottom: var(--wttw-space-5);
	background: var(--wttw-white);
}

.wttw-ad-slot {
	display: grid;
	place-items: center;
	gap: 0.5rem;
	min-height: 8.25rem;
	padding: var(--wttw-space-2);
	border: 1px solid var(--wttw-line);
	background: var(--wttw-paper);
	text-align: center;
}

.wttw-ad-slot__label {
	color: var(--wttw-ink-mute);
	font-family: var(--wttw-font-display);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.42em;
	text-indent: 0.42em;
	text-transform: uppercase;
}

.wttw-ad-slot__content {
	color: var(--wttw-ink-mute);
	font-size: 0.85rem;
}

.wttw-ad-slot__content:empty {
	display: none;
}

.wttw-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: var(--wttw-space-4) 0 0;
	padding-top: var(--wttw-space-4);
	border-top: 1px solid var(--wttw-line);
}

.wttw-stat {
	display: flex;
	align-items: center;
	gap: clamp(0.85rem, 1.8vw, 1.6rem);
	padding-inline: clamp(0.75rem, 3vw, 3rem);
}

.wttw-stat + .wttw-stat {
	border-inline-start: 1px solid var(--wttw-line);
}

.wttw-stat__icon {
	flex: none;
	width: clamp(3.1rem, 5.3vw, 5.25rem);
	height: auto;
	aspect-ratio: 1;
	color: var(--wttw-ink-mute);
	opacity: 0.8;
}

.wttw-stat__text {
	min-width: 0;
}

.wttw-stat__value {
	color: var(--wttw-sand);
	font-family: var(--wttw-font-display);
	font-size: clamp(2.2rem, 0.9rem + 3vw, 4.25rem);
	font-weight: 600;
	line-height: 0.92;
}

.wttw-stat__label {
	margin: 0.2rem 0 0;
	color: var(--wttw-ink);
	font-family: var(--wttw-font-display);
	font-size: clamp(0.8rem, 0.5rem + 0.5vw, 1.15rem);
	font-weight: 600;
	letter-spacing: 0.095em;
	text-transform: uppercase;
}

/* 5. Two journeys ------------------------------------------------------- */

.wttw-journeys {
	padding-block: var(--wttw-space-5);
	background: var(--wttw-paper);
}

.wttw-journeys__head {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: end;
	gap: clamp(1.5rem, 4vw, 4rem);
}

.wttw-journeys__intro {
	max-width: 46ch;
	margin: 0;
	color: var(--wttw-ink-soft);
}

.wttw-journey-line {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.5rem, 4vw, 4rem);
	margin: var(--wttw-space-3) 0 0;
	padding: 0;
	list-style: none;
}

.wttw-journey {
	padding-top: var(--wttw-space-2);
	border-top: 2px solid var(--wttw-line);
}

.wttw-journey--next {
	border-top-color: var(--wttw-coral);
}

.wttw-journey__year {
	display: block;
	color: var(--wttw-sand-ink);
	font-family: var(--wttw-font-display);
	font-size: clamp(1.9rem, 1rem + 2.2vw, 3rem);
	font-weight: 600;
	line-height: 1;
}

.wttw-journey--next .wttw-journey__year {
	color: var(--wttw-coral);
}

.wttw-journey__title {
	margin-top: 0.55rem;
	font-size: 1.2rem;
	letter-spacing: 0.045em;
}

.wttw-journey p {
	max-width: 34ch;
	margin: 0.55rem 0 0;
	color: var(--wttw-ink-soft);
}

/* 6. Plan your tour ----------------------------------------------------- */

.wttw-planning {
	padding-block: var(--wttw-space-5);
	background: var(--wttw-white);
}

.wttw-planning__head {
	margin-bottom: var(--wttw-space-3);
}

.wttw-planning__links {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.35rem;
}

.wttw-planning-card {
	display: grid;
	color: var(--wttw-ink);
	align-content: start;
	gap: 0.3rem;
	padding: var(--wttw-space-3);
	border: 1px solid var(--wttw-line);
	background: var(--wttw-paper);
	text-decoration: none;
	transition: background var(--wttw-fast) var(--wttw-ease),
		transform var(--wttw-fast) var(--wttw-ease);
}

.wttw-planning-card:hover,
.wttw-planning-card:focus-visible {
	background: var(--wttw-paper-deep);
	color: var(--wttw-ink);
	transform: translateY(-2px);
}

.wttw-planning-card__title {
	font-family: var(--wttw-font-display);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.055em;
	text-transform: uppercase;
}

.wttw-planning-card__note {
	color: var(--wttw-ink-soft);
}

.wttw-planning-card__arrow {
	margin-top: 0.9rem;
	color: var(--wttw-slate-deep);
	transition: transform var(--wttw-fast) var(--wttw-ease);
}

.wttw-planning-card:hover .wttw-planning-card__arrow {
	transform: translateX(4px);
}

/* 7. About -------------------------------------------------------------- */

.wttw-about {
	padding-block: var(--wttw-space-5);
	background: var(--wttw-paper);
}

.wttw-about__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(1.5rem, 4vw, 4rem);
}

.wttw-about__photo picture,
.wttw-about__photo img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.wttw-about__copy p {
	max-width: 48ch;
	margin: 0.9rem 0 0;
	color: var(--wttw-ink-soft);
}

/* 8. Recognition ------------------------------------------------------- */

.wttw-recognition {
	padding-block: var(--wttw-space-4);
	background: var(--wttw-slate-band);
	color: #fff;
}

.wttw-recognition__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wttw-space-2);
	text-align: center;
}

.wttw-recognition__title {
	font-size: clamp(1rem, 0.7rem + 0.7vw, 1.3rem);
	letter-spacing: 0.17em;
}

.wttw-recognition__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1.5rem, 6vw, 5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wttw-award {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}

.wttw-award__laurel {
	width: 1.5rem;
	height: 3.4rem;
	opacity: 0.8;
}

.wttw-award__laurel--right {
	transform: scaleX(-1);
}

.wttw-award__text {
	display: flex;
	flex-direction: column;
	font-size: 0.95rem;
	line-height: 1.35;
}

.wttw-award__text strong {
	font-weight: 400;
}

/* 9. Responsive -------------------------------------------------------- */

@media (max-width: 68rem) {
	.wttw-story-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 62rem) {
	/* Hero stacks: a compact story block, then the map straight away. */
	.wttw-hero {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.wttw-hero__story {
		min-height: min(56svh, 28rem);
	}

	.wttw-hero__media picture,
	.wttw-hero__image {
		object-position: 23% 58%;
	}

	.wttw-hero__scrim {
		background: linear-gradient(
			180deg,
			rgba(250, 248, 245, 0.95) 0%,
			rgba(250, 248, 245, 0.9) 42%,
			rgba(250, 248, 245, 0.72) 62%,
			rgba(250, 248, 245, 0.1) 88%,
			rgba(250, 248, 245, 0) 100%
		);
	}

	.wttw-hero__copy {
		padding-block: clamp(1.5rem, 4vh, 2.5rem) clamp(1.5rem, 3vh, 2.25rem);
		padding-inline: var(--wttw-gutter);
	}

	.wttw-hero__lead {
		grid-template-areas:
			"eyebrow note"
			"intro note";
		align-items: start;
		width: 100%;
	}

	.wttw-hero__intro {
		max-width: 26rem;
	}

	.wttw-hero__note {
		align-self: center;
	}

	.wttw-hero__note-arrow {
		transform: rotate(38deg);
	}

	.wttw-map {
		height: auto;
		min-height: 0;
		padding-block: clamp(3.25rem, 9vw, 4.5rem);
	}

	.wttw-map__frame {
		position: relative;
		top: auto;
		aspect-ratio: 360 / 215;
		transform: none;
	}

	.wttw-map__corner--top {
		top: clamp(0.75rem, 2vw, 1.25rem);
	}

	.wttw-map__corner--bottom {
		bottom: clamp(0.6rem, 2vw, 1rem);
	}

	.wttw-map__hint {
		width: 100%;
		font-size: 0.85rem;
	}

	/* Destinations become a readable stack with full-size tap targets. */
	.wttw-dest-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		gap: var(--wttw-space-3) 0;
	}

	.wttw-dest-col {
		grid-row: auto;
		grid-template-rows: none;
	}

	.wttw-dest-col:nth-child(odd) {
		border-inline-start: 0;
	}

	.wttw-dest-col:nth-child(even) {
		border-inline-start: 1px solid var(--wttw-line);
	}

	.wttw-dest-col:nth-child(odd) .wttw-dest-col__head,
	.wttw-dest-col:nth-child(odd) .wttw-dest-col__list {
		padding-inline-start: 0.85rem;
	}

	.wttw-destinations__stamp {
		width: clamp(7rem, 24vw, 10rem);
		margin-top: -0.75rem;
	}

	.wttw-about__grid,
	.wttw-journeys__head {
		grid-template-columns: minmax(0, 1fr);
	}

	.wttw-planning__links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

@media (max-width: 43.75rem) {
	.wttw-hero__lead {
		grid-template-areas:
			"eyebrow"
			"intro"
			"note";
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0.9rem;
	}

	/* Marker note moves to the open sand on the right, clear of the photo. */
	.wttw-hero__note {
		flex-direction: row;
		align-items: center;
		gap: 0.5rem;
		align-self: start;
		justify-self: end;
	}

	.wttw-hero__note-arrow {
		width: 3.25rem;
		margin: 0;
		transform: rotate(12deg);
	}

	.wttw-map {
		padding-block: clamp(2.75rem, 12vw, 3.5rem) 0;
	}

	.wttw-map__corner--bottom {
		position: static;
		display: flex;
		padding: 0.9rem var(--wttw-gutter) 0;
	}

	.wttw-map__meta,
	.wttw-map__coords {
		display: none;
	}

	.wttw-map__hint {
		margin: 0;
		text-align: center;
	}

	.wttw-dest-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.wttw-dest-col:nth-child(even) {
		border-inline-start: 0;
	}

	.wttw-dest-col:nth-child(even) .wttw-dest-col__head,
	.wttw-dest-col:nth-child(even) .wttw-dest-col__list {
		padding-inline-start: 0.85rem;
	}

	.wttw-story-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.wttw-journey-line,
	.wttw-planning__links {
		grid-template-columns: minmax(0, 1fr);
	}

	.wttw-stats {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wttw-space-2);
	}

	.wttw-stat {
		padding-inline: 0;
	}

	.wttw-stat + .wttw-stat {
		padding-top: var(--wttw-space-2);
		border-inline-start: 0;
		border-top: 1px solid var(--wttw-line);
	}

	.wttw-recognition__list {
		gap: var(--wttw-space-3);
	}
}