/**
 * Destination pages.
 *
 * Depends on the theme's brand.css for every token — this sheet is enqueued
 * with `pub-brand` as a dependency, so the custom properties it reads are
 * always defined by the time these rules apply. Nothing here invents a value.
 */

.pub-shell {
	inline-size: min(1320px, 100%);
	margin-inline: auto;
	padding-inline: clamp(20px, 5vw, 64px);
}

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

.pub-dhero {
	position: relative;
	display: grid;
	align-items: end;
	min-block-size: min(68vh, 620px);
	min-block-size: min(68svh, 620px);
	padding-block: var(--wp--preset--spacing--80);
	isolation: isolate;
	overflow: hidden;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.pub-dhero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.pub-dhero__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	border-radius: 0;
}

/* The same two-part scrim the guide specifies, so heroes match site-wide. */
.pub-dhero::before,
.pub-dhero::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	z-index: -1;
	pointer-events: none;
}

.pub-dhero::before {
	inset-block-start: 0;
	block-size: 30%;
	background: var(--wp--custom--scrim--top);
}

.pub-dhero::after {
	inset-block-end: 0;
	block-size: 82%;
	background: var(--wp--custom--scrim--bottom);
}

.pub-dhero__inner {
	inline-size: min(1320px, 100%);
	margin-inline: auto;
	padding-inline: clamp(20px, 5vw, 64px);
}

.pub-dhero__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: var(--wp--preset--font-size--display);
	line-height: 0.95;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--yellow);
	margin-block: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

.pub-dhero__lede {
	max-inline-size: 52ch;
	font-size: var(--wp--preset--font-size--lead);
	color: rgba(255, 255, 255, 0.9);
	margin: 0;
}

.pub-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-block-end: var(--wp--preset--spacing--40);
	color: rgba(255, 255, 255, 0.72);
}

.pub-crumbs a {
	color: inherit;
	text-decoration: none;
}

.pub-crumbs a:hover {
	color: var(--wp--preset--color--yellow);
	text-decoration: underline;
}

/* ------------------------------------------------------------ facts --- */

.pub-facts-band {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	padding-block: var(--wp--preset--spacing--70);
}

.pub-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--wp--preset--spacing--50);
	margin: 0;
}

.pub-fact dt {
	font-family: var(--wp--preset--font-family--body);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--yellow);
	margin-block-end: 6px;
}

.pub-fact dd {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--white);
}

/* ------------------------------------------------------------ bands --- */

.pub-band--alt {
	background: var(--wp--preset--color--off-white);
}

.pub-prose {
	max-inline-size: var(--wp--custom--measure);
	margin-inline: auto;
}

.pub-prose p {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.7;
	margin-block: 0 var(--wp--preset--spacing--50);
}

.pub-prose p:last-child {
	margin-block-end: 0;
}

/* ----------------------------------------------------------- routes --- */

.pub-routes {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--wp--preset--spacing--70);
	align-items: center;
}

@media (max-width: 900px) {
	.pub-routes {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--50);
	}
}

.pub-routes__map svg {
	inline-size: 100%;
	block-size: auto;
}

.pub-routes__caveat {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--micro);
	line-height: 1.5;
	color: var(--wp--preset--color--grey-500);
}

/*
 * Everything below is sized in the artboard's own units, where the country is
 * about 900 wide. A 19px label renders around 12px once the viewBox is scaled
 * into a column, which is the smallest that stays legible on a phone.
 */

.pub-routes__arc {
	fill: none;
	stroke: var(--wp--preset--color--blue);
	stroke-width: 3;
	stroke-linecap: round;
	opacity: 0.6;
}

.pub-routes__dot {
	fill: var(--wp--preset--color--navy);
	stroke: var(--wp--preset--color--white);
	stroke-width: 2.5;
}

.pub-routes__hub {
	fill: var(--wp--preset--color--yellow);
	stroke: var(--wp--preset--color--navy);
	stroke-width: 5;
}

/*
 * A country has more than one arrival airport, so the arcs are coloured by
 * where they land. Without this the map says how many cities fly out and
 * nothing at all about where any of them arrive. The first is the brand blue
 * and stays that way on a single-airport city page, so nothing changes there.
 */
.pub-routes__arc--h1 {
	stroke: #b4531f;
}

.pub-routes__arc--h2 {
	stroke: #1a8a4a;
}

.pub-routes__arc--h3 {
	stroke: #7d3c98;
}

.pub-routes__hub--h1,
.pub-routes__exit--h1 {
	fill: #f0a05a;
}

.pub-routes__hub--h2,
.pub-routes__exit--h2 {
	fill: #7fd0a2;
}

.pub-routes__hub--h3,
.pub-routes__exit--h3 {
	fill: #c9a0dc;
}

/* The airport's name above its own list, in the colour of its arcs — the one
   thing that ties the map to the column beside it. */
.pub-routes__hubname {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--navy);
}

.pub-routes__hubname::before {
	content: "";
	inline-size: 22px;
	block-size: 4px;
	border-radius: 2px;
	flex: 0 0 auto;
	background: var(--wp--preset--color--blue);
}

.pub-routes__hubname--h1::before {
	background: #b4531f;
}

.pub-routes__hubname--h2::before {
	background: #1a8a4a;
}

.pub-routes__hubname--h3::before {
	background: #7d3c98;
}

/* The first list sits straight under the count; later ones get their heading
   as the separator instead. */
.pub-routes__hubname:first-of-type {
	margin-block-start: 0;
}

/* The destination is beyond the frame — an arrow off the edge, not a dot at
   it, so nobody reads the marker as the city's position. */
.pub-routes__exit {
	fill: var(--wp--preset--color--yellow);
	stroke: var(--wp--preset--color--navy);
	stroke-width: 5;
	stroke-linejoin: round;
}

.pub-routes__label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 19px;
	font-weight: 600;
	fill: var(--wp--preset--color--navy);
	/* The labels cross both the pale map and the page ground, so they carry
	   their own halo rather than relying on whatever sits behind them. */
	paint-order: stroke;
	stroke: var(--wp--preset--color--off-white);
	stroke-width: 4;
	stroke-linejoin: round;
}

.pub-routes__hub-label {
	font-family: var(--wp--preset--font-family--display);
	font-size: 30px;
	font-weight: 900;
	fill: var(--wp--preset--color--navy);
	paint-order: stroke;
	stroke: var(--wp--preset--color--off-white);
	stroke-width: 5;
	stroke-linejoin: round;
}

.pub-routes__count {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--navy);
	margin-block: 0 var(--wp--preset--spacing--40);
}

.pub-routes__list ul {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: var(--wp--preset--spacing--50);
}

@media (max-width: 560px) {
	.pub-routes__list ul {
		columns: 1;
	}
}

.pub-routes__list li {
	break-inside: avoid;
	padding-block: var(--wp--preset--spacing--30);
	border-block-end: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-100);
}

.pub-routes__city {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--navy);
}

.pub-routes__detail {
	display: block;
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--grey-500);
	margin-block-start: 2px;
}

/* ----------------------------------------------- destination rail --- */

.pub-drail {
	position: relative;
}

.pub-drail__track {
	display: flex;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0 0 var(--wp--preset--spacing--30);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* The rail bleeds to the window edge on a phone so a card is visibly cut
	   off, which is what tells a thumb there is more to the right. */
	scroll-padding-inline: 0;
}

.pub-drail__track::-webkit-scrollbar {
	display: none;
}

.pub-drail__track > li {
	flex: 0 0 300px;
	scroll-snap-align: start;
}

@media (max-width: 700px) {
	.pub-drail__track > li {
		flex-basis: 78vw;
	}
}

.pub-dcard {
	position: relative;
	display: block;
	block-size: 380px;
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	background: var(--wp--preset--color--navy);
	text-decoration: none;
	isolation: isolate;
}

.pub-dcard img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	z-index: -2;
	transition: transform 600ms var(--wp--custom--ease--entrance, ease);
}

.pub-dcard:hover img,
.pub-dcard:focus-visible img {
	transform: scale(1.05);
}

/* The name sits on the picture, so it needs its own ground rather than luck
   with whatever the photograph happens to be doing behind it. */
.pub-dcard::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to top,
		rgba(10, 14, 26, 0.88) 0%,
		rgba(10, 14, 26, 0.55) 34%,
		rgba(10, 14, 26, 0.05) 70%
	);
}

.pub-dcard--noimg::after {
	background: linear-gradient(to top, rgba(10, 14, 26, 0.7), rgba(10, 14, 26, 0.1));
}

.pub-dcard__body {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: var(--wp--preset--spacing--40);
}

.pub-dcard__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--white);
}

.pub-dcard__from {
	margin: 6px 0 0;
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 600;
	color: var(--wp--preset--color--yellow);
}

.pub-drail__btn {
	position: absolute;
	inset-block-start: calc(190px - 22px);
	inline-size: 44px;
	block-size: 44px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	cursor: pointer;
}

.pub-drail__btn svg {
	inline-size: 20px;
	block-size: 20px;
}

.pub-drail__btn--prev {
	inset-inline-start: -14px;
}

.pub-drail__btn--next {
	inset-inline-end: -14px;
}

.pub-drail__btn[disabled] {
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 700px) {
	/* Swipe is the interaction on a phone; the arrows would only cover a card. */
	.pub-drail__btn {
		display: none;
	}
}

/* ------------------------------------------------------ photography --- */

.pub-figure {
	margin: 0;
}

.pub-figure img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--lg);
	display: block;
}

.pub-figure--tall img {
	aspect-ratio: 4 / 5;
}

.pub-figure figcaption {
	margin-block-start: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--micro);
	line-height: 1.5;
	color: var(--wp--preset--color--grey-500);
}

.pub-figure__caption {
	display: block;
	color: var(--wp--preset--color--grey-700);
}

.pub-figure__credit a {
	color: inherit;
}

/* Text and picture side by side, stacking on a phone with the words first —
   the reader came for the words. */
.pub-split {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: var(--wp--preset--spacing--70);
	align-items: start;
}

@media (max-width: 900px) {
	.pub-split {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--50);
	}
}

.pub-split__text p {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.7;
	margin-block: 0 var(--wp--preset--spacing--40);
}

.pub-split__text p:last-child {
	margin-block-end: 0;
}

/* ------------------------------------------------------- feature --- */

.pub-feature {
	position: relative;
	isolation: isolate;
}

.pub-figure--bleed img {
	border-radius: 0;
	aspect-ratio: 21 / 9;
	max-block-size: 620px;
}

@media (max-width: 700px) {
	.pub-figure--bleed img {
		aspect-ratio: 4 / 3;
	}
}

/* The credit sits inside the picture here rather than under it, because a
   full-bleed band has no "under". */
.pub-figure--bleed figcaption {
	position: absolute;
	inset-block-end: 8px;
	inset-inline-end: 14px;
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.pub-figure--bleed figcaption a {
	color: rgba(255, 255, 255, 0.92);
}

.pub-feature__overlay {
	position: absolute;
	inset: 0;
	display: grid;
	align-items: end;
	padding-block-end: var(--wp--preset--spacing--70);
	background: var(--wp--custom--scrim--bottom);
	pointer-events: none;
}

.pub-feature__line {
	max-inline-size: 22ch;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: clamp(1.75rem, 4vw, 3.25rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--white);
}

/* ------------------------------------------------------- credits --- */

.pub-credits {
	padding-block: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--off-white);
	border-block-start: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-100);
}

.pub-credits h2 {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grey-500);
	margin-block: 0 var(--wp--preset--spacing--30);
}

.pub-credits ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--grey-500);
}

.pub-credits li span {
	margin-inline-start: 6px;
}

.pub-credits a {
	color: var(--wp--preset--color--navy);
}

/* -------------------------------------------------------- airlines --- */

.pub-airlines {
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-100);
}

.pub-airlines__title {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grey-500);
	margin-block: 0 var(--wp--preset--spacing--30);
}

.pub-airlines ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	list-style: none;
	margin: 0;
	padding: 0;
}

.pub-airlines li {
	padding: 6px 14px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--white);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-100);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--navy);
}

/* ----------------------------------------------------------- guide --- */

/*
 * The practical half of the page is long, so it opens with its own contents.
 * Reading it top to bottom is nobody's plan — people arrive wanting one
 * answer, usually about the visa or the plugs.
 */
.pub-guide__jump {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-block-end: var(--wp--preset--spacing--50);
}

.pub-guide__jump a {
	padding: 6px 14px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--off-white);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 500;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

.pub-guide__jump a:hover,
.pub-guide__jump a:focus-visible {
	background: var(--wp--preset--color--yellow);
}

/*
 * Masonry, not a grid.
 *
 * A grid forces every tile in a row to the height of the tallest, so a short
 * tile like Language sat in a box half full of nothing while Visas ran long
 * beside it. Multi-column layout lets each tile keep its natural height and
 * lets the next one start immediately underneath, so the columns knit
 * together and the section reads as a stack rather than a table.
 *
 * `columns` is used rather than grid's own masonry because that is still
 * Firefox-only; this works everywhere today and needs no JavaScript.
 *
 * The trade: reading order runs down each column rather than across the rows.
 * For nine independent lookups that is fine — nobody reads this section in
 * sequence, they arrive for one answer — and the chips above jump straight to
 * any of them.
 */
.pub-guide {
	columns: 3;
	column-gap: var(--wp--preset--spacing--50);
}

@media (max-width: 1100px) {
	.pub-guide {
		columns: 2;
	}
}

@media (max-width: 700px) {
	.pub-guide {
		columns: 1;
	}
}

.pub-guide__card {
	position: relative;
	/*
	 * Block, not flex: a flex container inside a multi-column layout is
	 * allowed to be split across a column break in some browsers, and a tile
	 * torn in half between two columns is the worst thing this layout could
	 * do. `break-inside: avoid` keeps each one whole.
	 */
	display: block;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	/* Multi-column has no row gap, so the tile carries its own. */
	margin-block-end: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--white);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-100);
	overflow: hidden;
	/* Anchored from the jump list, so the heading must clear the sticky
	   header rather than hide behind it. */
	scroll-margin-block-start: calc(var(--pub-header-h, 96px) + 16px);
	transition: transform var(--wp--custom--dur--base) var(--wp--custom--ease--standard),
		box-shadow var(--wp--custom--dur--base) var(--wp--custom--ease--standard),
		border-color var(--wp--custom--dur--base) var(--wp--custom--ease--standard);
}

/*
 * A yellow rule wipes across the top on hover. Drawn as a scaled pseudo-element
 * rather than a border, because a border appearing on hover would push every
 * word in the tile down by its own width.
 */
.pub-guide__card::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 4px;
	background: var(--wp--preset--color--yellow);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--wp--custom--dur--base) var(--wp--custom--ease--entrance);
	z-index: 1;
}

.pub-guide__card:hover,
.pub-guide__card:focus-within {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--grey-300);
	box-shadow: 0 18px 40px rgba(31, 52, 101, 0.12);
}

.pub-guide__card:hover::before,
.pub-guide__card:focus-within::before,
.pub-guide__card:target::before {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.pub-guide__card,
	.pub-guide__card::before,
	.pub-guide__media img {
		transition: none;
	}

	.pub-guide__card:hover,
	.pub-guide__card:focus-within {
		transform: none;
	}
}

/* An illustrated tile carries its picture across the top and keeps the text
   padding of its plain neighbours. */
.pub-guide__card--illustrated {
	padding: 0;
}

.pub-guide__media {
	overflow: hidden;
}

.pub-guide__media img {
	inline-size: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
	transition: transform 600ms var(--wp--custom--ease--entrance);
}

.pub-guide__card--illustrated:hover .pub-guide__media img {
	transform: scale(1.06);
}

.pub-guide__card--illustrated .pub-guide__text {
	padding: var(--wp--preset--spacing--50);
}

/* The mark. Nine tiles of prose look identical at a glance; a distinct shape
   per tile lets the eye find one without reading all nine headings. */
.pub-guide__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: 50%;
	background: var(--wp--preset--color--off-white);
	color: var(--wp--preset--color--navy);
	margin-block-end: var(--wp--preset--spacing--30);
	transition: background-color var(--wp--custom--dur--base) var(--wp--custom--ease--standard);
}

.pub-guide__mark svg {
	inline-size: 22px;
	block-size: 22px;
}

.pub-guide__card:hover .pub-guide__mark,
.pub-guide__card:focus-within .pub-guide__mark {
	background: var(--wp--preset--color--yellow);
}

.pub-guide__card h3 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 1.2rem;
	line-height: 1.2;
	color: var(--wp--preset--color--navy);
	margin-block: 0 var(--wp--preset--spacing--30);
}

.pub-guide__card p {
	margin-block: 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.6;
}

.pub-guide__card p:last-child {
	margin-block-end: 0;
}

/* --------------------------------------------------------- highlights --- */

.pub-things {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: var(--wp--preset--spacing--50);
	/* The counter is decorative — the real number is written into the markup
	   so a screen reader hears "01" as content, not as a CSS accident. */
	counter-reset: none;
}

.pub-thing {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	align-items: flex-start;
	padding-block-end: var(--wp--preset--spacing--40);
	border-block-end: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-100);
}

.pub-thing__no {
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: 1.9rem;
	line-height: 1;
	/*
	 * Solid navy, not outlined. These were yellow with a dark edge drawn round
	 * them, because yellow numerals on off-white are close to invisible and the
	 * guide bans that pairing — but an outline is a workaround for a colour
	 * that was wrong, not a decision. The yellow still does its job on the note
	 * rule beneath, where it sits against text rather than trying to be text.
	 */
	color: var(--wp--preset--color--navy);
	opacity: 0.32;
}

.pub-thing__name {
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 1.1rem;
	line-height: 1.25;
	color: var(--wp--preset--color--navy);
}

.pub-thing__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.6;
}

/* The practical aside — opening times, what to wear, when to turn up. */
.pub-thing__note {
	margin: 8px 0 0;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	color: var(--wp--preset--color--grey-500);
	padding-inline-start: 10px;
	border-inline-start: 3px solid var(--wp--preset--color--yellow);
}

/* ------------------------------------------------------- quick facts --- */

/*
 * A definition list rather than a paragraph, because these are lookups. Each
 * row is its own flex line so the label and the value share a baseline and
 * wrap independently — a `dl` left to itself stacks every `dd` under its `dt`
 * and turns eight facts into sixteen lines.
 */
.pub-quick {
	margin: 0 0 var(--wp--preset--spacing--40);
	display: grid;
	gap: 10px;
}

.pub-quick > div {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	align-items: baseline;
	padding-block-end: 10px;
	border-block-end: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-100);
}

.pub-quick > div:last-child {
	border-block-end: 0;
	padding-block-end: 0;
}

.pub-quick dt {
	flex: 0 0 92px;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grey-500);
}

.pub-quick dd {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.45;
	color: var(--wp--preset--color--navy);
}

/* ----------------------------------------------------------- plugs --- */

.pub-plugs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--40);
}

.pub-plug {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	flex: 1 1 240px;
}

.pub-plug svg {
	inline-size: 64px;
	block-size: 64px;
	flex: 0 0 auto;
}

.pub-plug__body {
	fill: var(--wp--preset--color--white);
	stroke: var(--wp--preset--color--grey-300);
	stroke-width: 3;
}

.pub-plug__pins {
	fill: var(--wp--preset--color--navy);
}

.pub-plug figcaption {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pub-plug__label {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--navy);
}

.pub-plug__note {
	font-size: var(--wp--preset--font-size--micro);
	line-height: 1.4;
	color: var(--wp--preset--color--grey-500);
}

.pub-plugs__volts {
	margin-block: var(--wp--preset--spacing--40) 0;
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 600;
	color: var(--wp--preset--color--navy);
}

/* ------------------------------------------------------- empty state --- */

.pub-empty {
	max-inline-size: 62ch;
}

.pub-empty h2 {
	margin-block: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
}

.pub-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--50);
}

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

.pub-cta-band {
	background: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--navy);
}

/* Capped for readability, but not centred — the shell already owns the page
   gutter, so this sits against its left edge like every other section. */
.pub-cta {
	max-inline-size: 62ch;
	margin-inline: 0;
}

.pub-btn__icon {
	inline-size: 20px;
	block-size: 20px;
	flex: 0 0 auto;
}

.pub-cta h2 {
	color: var(--wp--preset--color--navy);
	margin-block: 0 var(--wp--preset--spacing--40);
}

.pub-cta p {
	font-size: var(--wp--preset--font-size--lead);
	margin: 0;
}

/*
 * On the yellow field the standard yellow pill would vanish, so the primary
 * action inverts to navy. Chapter 11 bans the low-contrast pairing outright;
 * this is the same rule applied to a button rather than to body text.
 */
.pub-cta-band .pub-btn--yellow {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.pub-cta-band .pub-btn--yellow:hover {
	background: var(--wp--preset--color--navy-dark);
	color: var(--wp--preset--color--white);
}

/* =========================================================== masthead === */

/*
 * Picture on the left, the terms of the trip on the right. The old full-bleed
 * hero looked more expensive and answered nothing — which airport, which
 * months, how many nights and what about money were all three screens down.
 */
.pub-mast {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
	background: var(--wp--preset--color--off-white);
}

.pub-mast__title {
	margin: 4px 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: clamp(40px, 6vw, 76px);
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--navy);
}

.pub-mast__lede {
	margin: var(--wp--preset--spacing--30) 0 0;
	max-inline-size: 60ch;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
	color: var(--wp--preset--color--grey-700);
}

.pub-mast__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: start;
	margin-block-start: var(--wp--preset--spacing--50);
}

@media (max-width: 980px) {
	.pub-mast__grid {
		grid-template-columns: 1fr;
	}
}

/*
 * This copy sets its own type rather than borrowing `.pub-prose`. That
 * component centres itself inside a 66ch measure, which is right for a
 * full-width band and wrong here: in a column already narrower than the
 * measure it just indents the text away from the picture above it. Overriding
 * the centring would have worked and would also have left the next person
 * wondering which of the two rules wins. The block owns its own type instead,
 * and runs edge to edge with the slider.
 */
.pub-mast__prose {
	margin-block-start: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.7;
	color: var(--wp--preset--color--grey-700);
}

.pub-mast__prose p {
	margin-block: 0 var(--wp--preset--spacing--30);
	max-inline-size: none;
	font-size: inherit;
	line-height: inherit;
}

.pub-mast__prose > :first-child {
	margin-block-start: 0;
}

.pub-mast__prose > :last-child {
	margin-block-end: 0;
}

/* ------------------------------------------------------------- slider --- */

/*
 * A scroll-snap row, so this is a working carousel before any script runs:
 * it swipes, it scrolls, it takes arrow keys. The script only adds the arrows
 * and the dots.
 */
.pub-slider {
	position: relative;
}

.pub-slider__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: var(--wp--custom--radius--lg);
	overscroll-behavior-x: contain;
}

.pub-slider__track::-webkit-scrollbar {
	display: none;
}

.pub-slider__slide {
	position: relative;
	scroll-snap-align: start;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--grey-100);
}

.pub-slider__slide img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

/* The credit sits on the picture rather than under it, so the slider stays one
   rectangle and no slide is taller than another because of a longer name. */
.pub-slider__credit {
	position: absolute;
	inset-inline-end: 10px;
	inset-block-end: 10px;
	margin: 0;
	padding: 4px 10px;
	border-radius: var(--wp--custom--radius--pill);
	background: rgba(0, 0, 0, 0.55);
	font-size: 11px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
}

.pub-slider__credit a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.pub-slider__credit a:hover {
	text-decoration: underline;
}

.pub-slider__nav {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--30);
}

.pub-slider__arrow {
	display: grid;
	place-items: center;
	inline-size: 40px;
	block-size: 40px;
	flex: 0 0 auto;
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-300);
	border-radius: var(--wp--custom--radius--circle);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	cursor: pointer;
	transition:
		background-color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard),
		color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard);
}

.pub-slider__arrow svg {
	inline-size: 18px;
	block-size: 18px;
}

.pub-slider__arrow:hover:not(:disabled) {
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.pub-slider__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.pub-slider__dots {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
}

.pub-slider__dot {
	inline-size: 9px;
	block-size: 9px;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--circle);
	background: var(--wp--preset--color--grey-300);
	cursor: pointer;
	transition:
		inline-size var(--wp--custom--dur--fast) var(--wp--custom--ease--standard),
		background-color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard);
}

.pub-slider__dot[aria-selected="true"] {
	inline-size: 26px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--navy);
}

/* ---------------------------------------------------------- facts tile --- */

.pub-keys {
	margin: 0;
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.pub-key + .pub-key {
	margin-block-start: var(--wp--preset--spacing--40);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: var(--wp--custom--border--hairline) solid rgba(255, 255, 255, 0.16);
}

.pub-key__label {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.pub-key__value {
	margin: 4px 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 1.25rem;
	line-height: 1.2;
	color: var(--wp--preset--color--white);
}

/* The note is what stops the short answer being misleading — "Nov to Feb" is
   only useful next to "April is punishing". */
.pub-key__note {
	margin: 6px 0 0;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.72);
}

.pub-mast .pub-crumbs a {
	color: var(--wp--preset--color--grey-500);
}

.pub-mast .pub-crumbs a:hover {
	color: var(--wp--preset--color--navy);
}

.pub-dcard__hop {
	margin: 4px 0 0;
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--grey-500);
}

/* ========================================================== city page === */

/* ------------------------------------------------------- where to stay --- */

.pub-stay__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-block-end: var(--wp--preset--spacing--50);
}

.pub-stay__tab {
	padding: 10px 18px;
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-100);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--navy);
	cursor: pointer;
	white-space: nowrap;
	transition:
		background-color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard),
		border-color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard),
		color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard);
}

.pub-stay__tab:hover {
	border-color: var(--wp--preset--color--grey-300);
}

.pub-stay__tab[aria-selected="true"] {
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

/*
 * With no script every panel is on screen, which is the correct fallback for
 * four short blocks of prose. The rule below only separates them in that state;
 * once the tabs are live exactly one panel is ever visible, so the divider is
 * dropped again rather than left hanging above a single panel.
 */
.pub-stay__panel + .pub-stay__panel {
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--50);
	border-block-start: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-100);
}

.pub-stay[data-enhanced] .pub-stay__panel + .pub-stay__panel {
	margin-block-start: 0;
	padding-block-start: 0;
	border-block-start: 0;
}

.pub-stay__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-block-end: var(--wp--preset--spacing--40);
}

.pub-chip {
	padding: 6px 14px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
}

.pub-chip--plain {
	background: var(--wp--preset--color--white);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-100);
	color: var(--wp--preset--color--grey-700);
	font-weight: 500;
}

.pub-stay__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--wp--preset--spacing--50);
}

.pub-stay__col {
	padding: var(--wp--preset--spacing--50);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-100);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--white);
}

.pub-stay__col h3 {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 1rem;
	color: var(--wp--preset--color--navy);
}

.pub-stay__col ul {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pub-stay__col li {
	position: relative;
	padding-inline-start: 26px;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.55;
}

/* Tick and cross are drawn in CSS so the two columns read apart at a glance
   without waiting on an icon font or another request. */
.pub-stay__col li::before {
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0;
	font-weight: 800;
}

.pub-stay__col--yes li::before {
	content: "\2713";
	color: #1a8a4a;
}

.pub-stay__col--no li::before {
	content: "\2715";
	color: #c0392b;
}

/* -------------------------------------------------------- when to come --- */

.pub-legend {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--grey-500);
}

.pub-legend__bar {
	inline-size: 8px;
	block-size: 18px;
	border-radius: 2px;
	background: linear-gradient(to top, var(--wp--preset--color--blue) 40%, var(--wp--preset--color--grey-100) 40%);
}

/*
 * Months are the control, the season paragraph is the answer. A twelve-tile
 * grid gave every month equal weight, which is the opposite of how anyone
 * reads this — you arrive with April in mind and want a paragraph about April.
 * The gauge and the crowd word stay on the button so the scan for "which month
 * is driest" still takes one look rather than twelve clicks.
 */
.pub-when {
	display: grid;
	grid-template-columns: 7fr 3fr;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

/*
 * A weather chart, not a list. The bar is rainfall, the sky above it is the
 * same number drawn as a picture, and the marks below are how busy it gets.
 * The shape of the year is then legible before a word is read — the two
 * monsoon humps on Sri Lanka's chart say more at a glance than the twelve
 * paragraphs behind them.
 */
.pub-when__chart {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 4px;
	padding-block-end: var(--wp--preset--spacing--30);
	border-block-end: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-100);
}

.pub-when__month {
	display: grid;
	/* Sky, then a fixed-height plot so every bar shares one baseline, then the
	   crowd marks and the label. Fixing the plot row is what makes the bars
	   comparable — sized to content they would each be their own scale. */
	grid-template-rows: 26px 132px auto auto;
	justify-items: center;
	gap: 6px;
	padding: 6px 2px 8px;
	border: 0;
	border-radius: var(--wp--custom--radius--md);
	background: none;
	cursor: pointer;
	color: var(--wp--preset--color--grey-500);
}

.pub-when__month:hover {
	background: var(--wp--preset--color--white);
}

.pub-when__sky {
	inline-size: 22px;
	block-size: 22px;
	align-self: center;
}

/* A heat chart has no sky pictures to draw, so the row they occupied goes with
   them and the plot takes the height back. The row count is written out rather
   than left to `auto` for the same reason it is above: an explicit plot row is
   what keeps every bar on one baseline. */
.pub-when--nosky .pub-when__month {
	grid-template-rows: 158px auto auto;
}

.pub-when__bar {
	display: flex;
	align-items: flex-end;
	inline-size: min(100%, 44px);
	block-size: 100%;
}

.pub-when__fill {
	inline-size: 100%;
	border-radius: 5px 5px 0 0;
	background: var(--wp--preset--color--grey-100);
	transition: background-color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard);
}

.pub-when__month:hover .pub-when__fill {
	background: var(--wp--preset--color--grey-300);
}

/* How busy, as marks rather than a word: three columns of the same thing read
   as a scale, where "Quiet / Steady / Busy" has to be read one at a time. */
.pub-when__crowd {
	display: flex;
	gap: 3px;
}

.pub-when__crowd i {
	inline-size: 5px;
	block-size: 5px;
	border-radius: var(--wp--custom--radius--circle);
	background: var(--wp--preset--color--grey-100);
}

.pub-when__crowd i.is-on {
	background: var(--wp--preset--color--grey-300);
}

.pub-when__month--high .pub-when__crowd i.is-on {
	background: #c0392b;
}

.pub-when__month--low .pub-when__crowd i.is-on {
	background: #1a8a4a;
}

.pub-when__name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--grey-500);
	padding-block-end: 4px;
	border-block-end: 3px solid transparent;
}

/* The selected month: yellow bar, navy label, and the rule under the name that
   ties the column to the paragraph beside it. */
.pub-when__month[aria-selected="true"] .pub-when__fill,
.pub-when__month[aria-selected="true"]:hover .pub-when__fill {
	background: var(--wp--preset--color--yellow);
}

.pub-when__month[aria-selected="true"] .pub-when__sky {
	color: var(--wp--preset--color--navy);
}

.pub-when__month[aria-selected="true"] .pub-when__name {
	color: var(--wp--preset--color--navy);
	border-block-end-color: var(--wp--preset--color--yellow);
}

.pub-when__hint {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--grey-500);
}

/* Without the script every panel is on screen and the hint would be a lie. */
.pub-when:not([data-enhanced]) .pub-when__hint {
	display: none;
}

.pub-when__panels {
	padding: var(--wp--preset--spacing--50);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-100);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--white);
}

/* No script, no tabs: the twelve paragraphs simply stack and read as a
   month-by-month guide, which is a perfectly good page on its own. */
.pub-when__panel + .pub-when__panel {
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--50);
	border-block-start: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-100);
}

.pub-when[data-enhanced] .pub-when__panel + .pub-when__panel {
	margin-block-start: 0;
	padding-block-start: 0;
	border-block-start: 0;
}

.pub-when__title {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: 1.75rem;
	line-height: 1.15;
	color: var(--wp--preset--color--navy);
}

/* A third of the width is too narrow for three facts side by side, so they
   stack as rows with the value ranged right. */
.pub-when__stats {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0 0 var(--wp--preset--spacing--40);
	padding-block-end: var(--wp--preset--spacing--40);
	border-block-end: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-100);
}

.pub-when__stats > div {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: var(--wp--preset--spacing--30);
}

.pub-when__stats dt {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grey-500);
}

.pub-when__stats dd {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 1rem;
	text-align: end;
	color: var(--wp--preset--color--navy);
}

.pub-when__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.7;
	color: var(--wp--preset--color--grey-700);
}

/* Narrow: the chart keeps all twelve columns and the description drops below
   it. Twelve bars still fit at this width — it is the paragraph beside them
   that does not. */
@media (max-width: 900px) {
	.pub-when {
		grid-template-columns: 1fr;
	}

	.pub-when__month {
		grid-template-rows: 22px 96px auto auto;
	}

	/* Same trap as the 560px rule below: the row list has to match the children
	   that exist, and a heat chart has one fewer. */
	.pub-when--nosky .pub-when__month {
		grid-template-rows: 118px auto auto;
	}

	.pub-when__sky {
		inline-size: 18px;
		block-size: 18px;
	}
}

/*
 * On a phone the sky icons are the first thing to go — at this width they are
 * too small to read as weather, and the bar already carries the number.
 *
 * The row list drops to three when they do. `display: none` takes the icon out
 * of the grid entirely rather than leaving an empty cell, so a four-row list
 * here shunted the bar into the zero-height first row and the chart lost every
 * bar it had. Rows have to match the children that actually exist.
 */
@media (max-width: 560px) {
	.pub-when__chart {
		gap: 2px;
	}

	.pub-when__month {
		grid-template-rows: 84px auto auto;
		padding-inline: 0;
	}

	.pub-when__sky {
		display: none;
	}
}

/* ------------------------------------------------------- worth knowing --- */

/*
 * Four equal columns, not the guide's masonry. The card is the same component;
 * only the container differs. The two resets below undo the assumptions that
 * card makes about living in a multi-column flow — a bottom margin to separate
 * it from the card beneath, and a break rule that means nothing in a grid.
 */
.pub-worth {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
	align-items: stretch;
}

.pub-worth .pub-guide__card {
	margin-block-end: 0;
	break-inside: auto;
	block-size: 100%;
}

@media (max-width: 1180px) {
	.pub-worth {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.pub-worth {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------- how long, what shape --- */

.pub-shapes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--wp--preset--spacing--50);
}

.pub-shape {
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--50);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-100);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--white);
}

.pub-shape__head {
	margin-block-end: var(--wp--preset--spacing--40);
	padding-block-end: var(--wp--preset--spacing--30);
	border-block-end: 3px solid var(--wp--preset--color--yellow);
}

.pub-shape__label {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: 1.15rem;
	color: var(--wp--preset--color--navy);
}

.pub-shape__len {
	margin: 2px 0 0;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--blue);
}

.pub-shape__days {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pub-shape__days li {
	display: grid;
	grid-template-columns: 52px 1fr;
	gap: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.55;
}

.pub-shape__day {
	padding-block-start: 3px;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grey-500);
}

.pub-shape__note {
	margin: var(--wp--preset--spacing--40) 0 0;
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-100);
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--grey-500);
}

/* --------------------------------------------------- getting in / around --- */

/*
 * The entry notice used to be a full-width navy block on its own, a screen
 * away from "getting around". They answer the same question — what do I need
 * to know before I turn up — so they became two tiles, and the navy went with
 * the merge. It was competing with the navy fact tile in the header anyway.
 */
.pub-arrive {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: var(--wp--preset--spacing--50);
	align-items: stretch;
}

/* One tile alone gets a measure rather than the full page width, because a
   paragraph set across 1300px is not a paragraph anyone finishes. */
.pub-arrive--one {
	grid-template-columns: minmax(0, var(--wp--custom--measure));
}

.pub-arrive__tile {
	padding: var(--wp--preset--spacing--50);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-100);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--white);
}

/* The visa tile is the one with consequences if it is skipped, so it carries a
   rule the other does not. A whole second colour would have said "these two
   things are unrelated", which is the opposite of why they are side by side. */
.pub-arrive__tile--key {
	border-block-start: 4px solid var(--wp--preset--color--yellow);
}

.pub-arrive__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: 1.3rem;
	line-height: 1.2;
	color: var(--wp--preset--color--navy);
}

.pub-arrive__for {
	margin: 4px 0 0;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grey-500);
}

.pub-arrive__body {
	margin-block-start: var(--wp--preset--spacing--40);
}

.pub-arrive__body p {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.7;
	color: var(--wp--preset--color--grey-700);
}

.pub-arrive__body p:last-child {
	margin-block-end: 0;
}

.pub-arrive__body strong {
	color: var(--wp--preset--color--navy);
}

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

/*
 * The package card, used on destination pages. Shares nothing with the
 * destination card on purpose: that one sells a place and leads with a
 * photograph, this one sells a trip and leads with its shape and its price.
 */
/*
 * `auto-fit` was wrong here. It collapses the empty tracks and shares their
 * width out, so a destination with one package got a single card stretched the
 * full 1320px and a destination with two got cards half again as wide as the
 * three-up pages — the same card, three different sizes, depending only on how
 * many happened to be tagged. A package card is a fixed object. The track is
 * fixed with it, the row fills from the left, and what is left over stays
 * empty, which is what an unfilled row should look like.
 */
.pub-pkgs {
	display: grid;
	grid-template-columns: repeat(auto-fill, min(380px, 100%));
	justify-content: start;
	gap: var(--wp--preset--spacing--50);
}

.pub-pkgcard {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-100);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--white);
	text-decoration: none;
	transition:
		border-color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard),
		transform var(--wp--custom--dur--fast) var(--wp--custom--ease--standard);
}

/* A fixed ratio rather than a fixed height: every card in the row shows the
   same crop, and the photograph keeps its shape at any track width. */
.pub-pkgcard__shot {
	display: block;
	aspect-ratio: 3 / 2;
	background: var(--wp--preset--color--grey-100);
}

.pub-pkgcard__shot img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.pub-pkgcard__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: var(--wp--preset--spacing--50);
}

.pub-pkgcard:hover {
	border-color: var(--wp--preset--color--navy);
	transform: translateY(-2px);
}

.pub-pkgcard__len {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--blue);
}

.pub-pkgcard__name {
	margin: 8px 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 1.15rem;
	line-height: 1.25;
	color: var(--wp--preset--color--navy);
}

.pub-pkgcard__route {
	margin: 10px 0 0;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.6;
	color: var(--wp--preset--color--grey-700);
	flex: 1 1 auto;
}

.pub-pkgcard__from {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-100);
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--grey-500);
}

.pub-pkgcard__from strong {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: 1.35rem;
	color: var(--wp--preset--color--navy);
}

/* ---------------------------------------------------- destinations index --- */

/*
 * The archive. Countries offered as filters, every place below them as the
 * same card the country pages already use — so a destination looks the same
 * wherever a reader meets it.
 */
.pub-index__filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-block-end: var(--wp--preset--spacing--60);
}

.pub-pill {
	padding: 9px 18px;
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-100);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 600;
	color: var(--wp--preset--color--grey-700);
	cursor: pointer;
	transition:
		background var(--wp--custom--dur--fast) var(--wp--custom--ease--standard),
		border-color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard),
		color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard);
}

.pub-pill:hover {
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--navy);
}

.pub-pill.is-on {
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

/*
 * Four across, stepping down by breakpoint.
 *
 * This was `auto-fill` against a fixed 340px track, which worked out at three
 * on the 1320px shell and would have quietly been a different number on the
 * next screen size. How many columns the index has is a design decision, not
 * an arithmetic result — so it is stated, at each width where the answer
 * changes.
 */
.pub-index__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
}

@media (max-width: 1180px) {
	.pub-index__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	.pub-index__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--40);
	}
}

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

/*
 * The card is 380px tall by default, which was set when it sat three-up and a
 * good deal wider. At a quarter of the shell that reads as a column rather
 * than a card, so the index takes its own height.
 */
.pub-index__card {
	block-size: 320px;
}

@media (max-width: 520px) {
	.pub-index__card {
		block-size: 260px;
	}
}

/* A country reads as the parent of the cards beside it, so it carries a mark
   the cities do not. */
.pub-index__kind {
	margin: 0 0 4px;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--yellow);
}

.pub-index__card--country {
	outline: 3px solid var(--wp--preset--color--yellow);
	outline-offset: -3px;
}

.pub-index__empty {
	margin-block-start: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--grey-500);
}