@charset "UTF-8";
/* ==========================================================================
   Ceylon Paradise — inner page styles
   Loaded after theme.css and sections.css.

   1. Tour archive
   2. Single tour
   3. Destinations
   4. Contact
   5. Search and 404
   6. Post and comments
   ========================================================================== */

/* 1. Tour archive ========================================================== */

.cp-archive {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	align-items: start;
}

@media (min-width: 960px) {
	.cp-archive {
		grid-template-columns: 290px minmax(0, 1fr);
	}

	.cp-filters {
		position: sticky;
		top: calc(var(--cp-header-h) + 1.5rem);
	}
}

.cp-filters__form {
	display: grid;
	gap: 1.5rem;
	padding: 1.4rem 1.5rem 1.6rem;
	background: var(--cp-mist);
	border-radius: var(--cp-radius-lg);
}

.cp-filters__title {
	margin: 0;
	font-size: var(--cp-fs-h4);
}

.cp-filters__group {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.cp-filters__group + .cp-filters__group {
	padding-top: 1.35rem;
	border-top: 1px solid var(--cp-line);
}

.cp-filters__options {
	display: grid;
	gap: 0.15rem;
}

.cp-radio {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.3rem 0;
	font-size: var(--cp-fs-sm);
	color: var(--cp-navy);
	cursor: pointer;
}

.cp-radio input {
	accent-color: var(--cp-teal);
	flex: none;
}

.cp-radio__count {
	margin-left: auto;
	font-family: var(--cp-font-mono);
	font-size: var(--cp-fs-mono);
	color: var(--cp-muted);
}

.cp-filters__actions {
	display: grid;
	gap: 0.6rem;
	justify-items: center;
	padding-top: 1.35rem;
	border-top: 1px solid var(--cp-line);
}

.cp-filters__help {
	padding: 1.1rem 1.15rem;
	background: var(--cp-paper);
	border-radius: var(--cp-radius);
	text-align: center;
}

.cp-filters__help p {
	margin: 0 0 0.9rem;
	font-size: var(--cp-fs-xs);
	color: var(--cp-muted);
}

.cp-archive__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--cp-line);
}

.cp-archive__count {
	margin: 0;
	font-size: var(--cp-fs-sm);
	color: var(--cp-muted);
}

.cp-archive__count strong {
	color: var(--cp-navy);
	font-size: 1.15rem;
}

.cp-archive__sort select {
	width: auto;
	min-width: 190px;
	font-size: var(--cp-fs-xs);
}

/* 2. Single tour =========================================================== */

.cp-tour__facts {
	gap: 1.25rem;
}

.cp-page-hero--image .cp-tour__facts .cp-data {
	color: var(--cp-aqua);
}

.cp-page-hero--image .cp-tour__facts .cp-rating {
	color: rgba(255, 255, 255, 0.78);
}

.cp-page-hero--image .cp-stars__value {
	color: #fff;
}

.cp-tour__layout {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
	align-items: start;
}

@media (min-width: 1000px) {
	.cp-tour__layout {
		grid-template-columns: minmax(0, 1fr) 340px;
	}

	.cp-tour__aside {
		position: sticky;
		top: calc(var(--cp-header-h) + 1.5rem);
	}
}

.cp-tour__block + .cp-tour__block {
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
	padding-top: clamp(2.5rem, 4vw, 3.5rem);
	border-top: 1px solid var(--cp-line);
}

.cp-tour__heading {
	font-size: var(--cp-fs-h3);
	margin-bottom: 1.1rem;
}

/* The route: stops in order with the real travel time between them. Order
   carries meaning here, which is why it is a list and not a set of cards. */
.cp-routeline {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cp-routeline__stop {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
	padding: 0 0 1.25rem 1.9rem;
}

.cp-routeline__stop::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 0.9rem;
	bottom: -0.35rem;
	width: 2px;
	background: linear-gradient(to bottom, var(--cp-aqua), rgba(68, 208, 219, 0.25));
}

.cp-routeline__stop:last-child {
	padding-bottom: 0;
}

.cp-routeline__stop:last-child::before {
	display: none;
}

.cp-routeline__dot {
	position: absolute;
	left: 0;
	top: 0.42rem;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--cp-paper);
	border: 3px solid var(--cp-teal);
}

.cp-routeline__name {
	font-family: var(--cp-font-display);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--cp-navy);
}

.cp-routeline__travel {
	font-family: var(--cp-font-mono);
	font-size: var(--cp-fs-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cp-teal);
}

.cp-ticklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.cp-ticklist li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	font-size: var(--cp-fs-sm);
}

.cp-ticklist svg {
	flex: none;
	margin-top: 0.22rem;
	color: var(--cp-teal);
}

.cp-ticklist--out svg {
	color: #a8b6bf;
}

.cp-incl {
	padding: 1.35rem 1.5rem;
	background: var(--cp-mist);
	border-radius: var(--cp-radius-lg);
}

.cp-incl--out {
	background: transparent;
	border: 1px dashed var(--cp-line-strong);
}

.cp-incl__title {
	margin: 0 0 0.9rem;
	font-size: var(--cp-fs-h4);
}

.cp-days {
	display: grid;
	gap: 0.6rem;
}

.cp-day {
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius);
	overflow: hidden;
	background: var(--cp-paper);
}

.cp-day__trigger {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1rem;
	width: 100%;
	padding: 1rem 1.15rem;
	border: 0;
	background: transparent;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
}

.cp-day__trigger:hover {
	background: var(--cp-aqua-050);
}

.cp-day__num {
	flex: none;
	padding: 0.2rem 0.55rem;
	border-radius: 6px;
	background: var(--cp-navy);
	color: #fff;
	font-family: var(--cp-font-mono);
	font-size: var(--cp-fs-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cp-day__title {
	font-weight: 600;
	color: var(--cp-navy);
	font-size: var(--cp-fs-sm);
}

.cp-day__travel {
	font-family: var(--cp-font-mono);
	font-size: var(--cp-fs-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cp-teal);
}

.cp-day__chevron {
	margin-left: auto;
	color: var(--cp-muted);
	display: inline-flex;
	transition: transform 0.25s var(--cp-ease);
}

.cp-day__trigger[aria-expanded="true"] .cp-day__chevron {
	transform: rotate(180deg);
}

.cp-day__panel {
	padding: 0 1.15rem 1.2rem;
	font-size: var(--cp-fs-sm);
	color: var(--cp-muted);
}

.cp-day__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	margin: 0.9rem 0 0;
	padding-top: 0.85rem;
	border-top: 1px solid var(--cp-line);
}

.cp-day__facts dt {
	font-family: var(--cp-font-mono);
	font-size: var(--cp-fs-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cp-muted);
}

.cp-day__facts dd {
	margin: 0.15rem 0 0;
	color: var(--cp-navy);
	font-weight: 500;
}

.cp-monthbar {
	list-style: none;
	display: flex;
	gap: 3px;
	margin: 0;
	padding: 5px;
	background: var(--cp-mist);
	border-radius: var(--cp-radius-pill);
	max-width: 560px;
}

.cp-monthbar__item {
	flex: 1;
	text-align: center;
	padding: 0.5rem 0.1rem;
	border-radius: var(--cp-radius-pill);
	font-family: var(--cp-font-mono);
	font-size: 0.6875rem;
	color: var(--cp-muted);
}

.cp-monthbar__item.is-good {
	background: var(--cp-aqua);
	color: var(--cp-navy-900);
	font-weight: 500;
}

.cp-booking {
	padding: 1.5rem 1.6rem 1.75rem;
	background: var(--cp-paper);
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius-lg);
	box-shadow: var(--cp-shadow);
	display: grid;
	gap: 0.75rem;
}

.cp-booking--dest {
	margin-top: 1.25rem;
	box-shadow: none;
	background: var(--cp-mist);
	border-color: transparent;
}

.cp-booking__title {
	margin: 0;
	font-size: var(--cp-fs-h4);
}

.cp-booking__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem;
	margin: 0;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--cp-line);
}

.cp-booking__amount {
	font-family: var(--cp-font-display);
	font-size: 2.1rem;
	font-weight: 600;
	letter-spacing: -0.03em;
	color: var(--cp-navy);
	line-height: 1;
}

.cp-booking__facts {
	display: grid;
	gap: 0.85rem;
	margin: 0 0 0.35rem;
}

.cp-booking__facts dt {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--cp-font-mono);
	font-size: var(--cp-fs-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cp-muted);
}

.cp-booking__facts dt svg {
	color: var(--cp-teal);
}

.cp-booking__facts dd {
	margin: 0.2rem 0 0;
	font-size: var(--cp-fs-sm);
	color: var(--cp-navy);
	font-weight: 500;
}

.cp-booking__note {
	margin: 0.35rem 0 0;
	font-size: var(--cp-fs-xs);
	line-height: 1.55;
	color: var(--cp-muted);
}

.cp-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 0.7rem;
}

.cp-gallery--tight {
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.cp-gallery__item {
	position: relative;
	padding: 0;
	border: 0;
	background: var(--cp-mist-deep);
	border-radius: var(--cp-radius);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	cursor: zoom-in;
}

.cp-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--cp-ease);
}

.cp-gallery__item:hover img {
	transform: scale(1.05);
}

/* 3. Destinations ========================================================== */

.cp-destgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--cp-gap);
}

.cp-destgrid .cp-dest {
	width: auto;
}

.cp-destinations__filters {
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.cp-keyfacts {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2.5rem;
}

.cp-keyfact {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.cp-keyfact__label {
	font-family: var(--cp-font-mono);
	font-size: var(--cp-fs-mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cp-aqua);
}

.cp-keyfact__value {
	font-weight: 600;
	color: #fff;
}

.cp-page-hero:not(.cp-page-hero--image) .cp-keyfact__label {
	color: var(--cp-teal);
}

.cp-page-hero:not(.cp-page-hero--image) .cp-keyfact__value {
	color: var(--cp-navy);
}

/* 4. Contact =============================================================== */

.cp-contact__about {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1rem;
	padding: 0.7rem 1rem;
	background: var(--cp-aqua-100);
	border-radius: var(--cp-radius);
	font-size: var(--cp-fs-sm);
	color: var(--cp-teal-600);
}

.cp-contact__form .cp-enquiry {
	box-shadow: var(--cp-shadow);
	border: 1px solid var(--cp-line);
}

.cp-contact-list--light {
	color: var(--cp-ink);
	margin-bottom: 2rem;
}

.cp-contact-list--light svg {
	color: var(--cp-teal);
}

.cp-contact-list--light a {
	color: var(--cp-teal);
}

.cp-contact-list--light strong {
	color: var(--cp-navy);
}

.cp-contact__note {
	padding: 1.4rem 1.5rem;
	background: var(--cp-mist);
	border-radius: var(--cp-radius-lg);
}

.cp-contact__note-title {
	margin: 0 0 0.9rem;
	font-size: var(--cp-fs-h4);
}

.cp-contact__intro {
	margin-bottom: 1.75rem;
}

/* 5. Search and 404 ======================================================== */

.cp-search {
	display: flex;
	gap: 0.6rem;
	max-width: 560px;
}

.cp-search__input {
	flex: 1;
}

.cp-search__submit {
	flex: none;
}

.cp-404__actions {
	margin-bottom: 2rem;
}

.cp-404__search {
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.cp-404__tours {
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--cp-line);
}

.cp-results {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.85rem;
}

.cp-result {
	display: flex;
	gap: 1.1rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius-lg);
	transition: border-color 0.2s var(--cp-ease), box-shadow 0.2s var(--cp-ease);
}

.cp-result:hover {
	border-color: transparent;
	box-shadow: var(--cp-shadow-sm);
}

.cp-result__media {
	flex: none;
	width: 84px;
	height: 84px;
	border-radius: var(--cp-radius);
	overflow: hidden;
}

.cp-result__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cp-result__title {
	margin: 0.2rem 0 0.35rem;
	font-size: var(--cp-fs-h4);
}

.cp-result__title a {
	color: inherit;
	text-decoration: none;
}

.cp-result__excerpt {
	margin: 0;
	font-size: var(--cp-fs-sm);
	color: var(--cp-muted);
}

/* 6. Post and comments ===================================================== */

.cp-post__meta .cp-data {
	color: var(--cp-aqua);
}

.cp-post__tags {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--cp-line);
}

.cp-comments {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--cp-line);
}

.cp-comments__title {
	font-size: var(--cp-fs-h3);
}

.cp-comments__list {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
}

.cp-comments__list ol {
	list-style: none;
	padding-left: 1.5rem;
}

.cp-comments__list .comment-body {
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--cp-line);
}

.cp-stats--wide {
	border-top: 0;
	padding-top: 0;
	margin-top: 0;
}

/* 12. Destination detail ===================================================
   Ordered to answer questions in the sequence a traveller asks them:
   the facts panel first, then the argument, then what to see, then the
   things people type into a search box.
   ========================================================================= */

.cp-dest-page__grid {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 960px) {
	.cp-dest-page__grid {
		grid-template-columns: minmax(0, 1fr) 20rem;
		align-items: start;
	}

	.cp-dest-page__side {
		position: sticky;
		top: calc(var(--cp-header-h) + 1.5rem);
	}
}

.cp-dest-page__main > * + * {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* At a glance ------------------------------------------------------------ */

.cp-factpanel {
	padding: 1.4rem 1.5rem 1.5rem;
	background: var(--cp-mist);
	border-radius: var(--cp-radius-lg);
}

.cp-factpanel__title {
	margin: 0 0 1rem;
	font-size: var(--cp-fs-h4);
}

/* Label above value, in cells. A two-column list of label-dotted-value rows
   put each value hard against the next row's label — unreadable at a glance,
   which is the one thing this panel exists to be. */
.cp-factpanel__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: 1.15rem 2rem;
	margin: 0;
}

/* A rule per fact rather than a boxed table: the number of facts varies by
   destination, and a table leaves dead cells whenever it does not divide. */
.cp-factpanel__row {
	padding-top: 0.7rem;
	border-top: 1px solid var(--cp-line-strong);
}

.cp-factpanel__row dt {
	margin: 0 0 0.2rem;
	font-family: var(--cp-font-mono);
	font-size: var(--cp-fs-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cp-muted);
}

.cp-factpanel__row dd {
	margin: 0;
	font-weight: 500;
	line-height: 1.3;
	color: var(--cp-navy);
}

.cp-factpanel__note {
	margin: 1rem 0 0;
	font-size: var(--cp-fs-sm);
	color: var(--cp-muted);
}

/* Long-form body --------------------------------------------------------- */

.cp-prose--dest h2 {
	margin-top: 2.25rem;
	font-size: var(--cp-fs-h3);
}

.cp-prose--dest h3 {
	margin-top: 1.75rem;
	font-size: var(--cp-fs-h4);
}

.cp-prose--dest > :first-child {
	margin-top: 0;
}

/* What to see ------------------------------------------------------------ */

.cp-things {
	display: grid;
	gap: 0.85rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 700px) {
	.cp-things {
		grid-template-columns: 1fr 1fr;
	}
}

.cp-thing {
	padding: 1.1rem 1.2rem 1.2rem;
	background: var(--cp-paper);
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius);
	border-left: 3px solid var(--cp-aqua);
}

.cp-thing__title {
	margin: 0;
	font-size: 1.05rem;
}

.cp-thing__meta {
	margin: 0.3rem 0 0;
	color: var(--cp-teal);
}

.cp-thing__text {
	margin: 0.5rem 0 0;
	font-size: var(--cp-fs-sm);
	color: var(--cp-muted);
}

/* Questions -------------------------------------------------------------- */

.cp-accordion {
	margin-top: 1.5rem;
	border-top: 1px solid var(--cp-line);
}

.cp-accordion__item {
	border-bottom: 1px solid var(--cp-line);
}

.cp-accordion__heading {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

.cp-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
	padding: 1.1rem 0;
	border: 0;
	background: none;
	text-align: left;
	font-family: var(--cp-font-display);
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--cp-navy);
	cursor: pointer;
}

.cp-accordion__trigger:hover {
	color: var(--cp-teal);
}

.cp-accordion__icon {
	flex: none;
	color: var(--cp-teal);
	transition: transform 0.25s var(--cp-ease);
}

.cp-accordion__trigger[aria-expanded="true"] .cp-accordion__icon {
	transform: rotate(180deg);
}

.cp-accordion__body {
	padding-bottom: 1.25rem;
	max-width: 60ch;
	color: var(--cp-muted);
}

.cp-accordion__body p {
	margin: 0 0 0.75rem;
}

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

/* Pairs well with -------------------------------------------------------- */

.cp-nearby {
	margin-top: 1.25rem;
	padding: 1.35rem 1.5rem 1.5rem;
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius-lg);
}

.cp-nearby__title {
	margin: 0 0 0.5rem;
	font-size: var(--cp-fs-h4);
}

.cp-nearby__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cp-nearby__list li + li {
	border-top: 1px solid var(--cp-line);
}

.cp-nearby__list a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.6rem 0;
	text-decoration: none;
}

.cp-nearby__list a:hover .cp-nearby__name {
	color: var(--cp-teal);
}

.cp-nearby__name {
	font-weight: 500;
	color: var(--cp-navy);
}

.cp-nearby__drive {
	flex: none;
	color: var(--cp-muted);
}

/* 13. Tour route map =======================================================
   A list of stop names says nothing about the shape of a trip. Drawn on the
   coastline, the same data answers the real question: how much of the country
   does this cover, and how much of it is spent in the car.
   ========================================================================= */

.cp-routemap {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: start;
}

@media (min-width: 700px) {
	.cp-routemap {
		/* The map carries the point of this section, so it gets the larger
		   share. At 15rem the island was too small to read. */
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	}
}

.cp-routemap__map {
	margin: 0;
	border-radius: var(--cp-radius-lg);
	overflow: hidden;
}

.cp-routemap__map svg {
	display: block;
	width: 100%;
	height: auto;
	/* Was capped at 22rem, which shrank the island to about the size of a
	   postage stamp and made the stop names unreadable. */
	max-height: none;
}

/* Matches the sea in route-island.png, so the padded strip either side of the
   picture is indistinguishable from the picture itself. */
.cp-routemap__sea {
	fill: #c8ebff;
}

.cp-routemap__casing {
	fill: none;
	stroke: #fff;
	stroke-width: 20;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.85;
}

.cp-routemap__line {
	fill: none;
	stroke: var(--cp-teal);
	stroke-width: 9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cp-routemap__leader {
	stroke: var(--cp-navy);
	stroke-width: 2.5;
	opacity: 0.45;
}

.cp-routemap__pin circle {
	fill: var(--cp-navy);
	stroke: #fff;
	stroke-width: 5;
}

/* The number inside the pin. */
.cp-routemap__num {
	fill: #fff;
	font-family: var(--cp-font-mono);
	font-size: 27px;
	font-weight: 500;
}

/* The place name beside it — the thing the old map was missing entirely. */
.cp-routemap__label {
	fill: var(--cp-ink);
	font-family: var(--cp-font-body);
	font-size: 34px;
	font-weight: 600;
	paint-order: stroke;
	stroke: #fff;
	stroke-width: 9;
	stroke-linejoin: round;
}

/* The stop list, with the drive time on the connector rather than beside the
   place — the time belongs to the gap, not to either end of it. */

.cp-routelist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cp-routelist__stop {
	display: flex;
	align-items: baseline;
	gap: 0.85rem;
}

.cp-routelist__num {
	flex: none;
	width: 2.2rem;
	color: var(--cp-teal);
}

.cp-routelist__name {
	font-family: var(--cp-font-display);
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--cp-navy);
}

.cp-routelist__name a {
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid transparent;
}

.cp-routelist__name a:hover {
	color: var(--cp-teal);
	border-bottom-color: currentColor;
}

.cp-routelist__start {
	color: var(--cp-muted);
}

.cp-routelist__leg {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.15rem 0;
}

.cp-routelist__legline {
	flex: none;
	width: 2.2rem;
	display: flex;
	justify-content: center;
}

.cp-routelist__legline::before {
	content: "";
	width: 1px;
	height: 1.9rem;
	background: linear-gradient(to bottom, var(--cp-line-strong), var(--cp-aqua));
}

.cp-routelist__legtime {
	color: var(--cp-muted);
}

/* 14. Day by day ===========================================================
   A journey, not a stack of boxes: one continuous rail, with the drive time
   sitting on the connector between days rather than inside them.
   ========================================================================= */

.cp-itin {
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.cp-itin__day {
	position: relative;
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	column-gap: 1.1rem;
}

/* The rail. Starts at the first marker and stops at the last, so the journey
   ends rather than trailing off the bottom of the section. */
.cp-itin__day::before {
	content: "";
	position: absolute;
	left: 1.37rem;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--cp-line-strong);
}

.cp-itin__day:first-child::before {
	top: 1.4rem;
}

.cp-itin__day:last-child::before {
	bottom: auto;
	height: 1.4rem;
}

.cp-itin__leg {
	grid-column: 2;
	margin: 0;
	padding: 0.55rem 0;
}

.cp-itin__legtime {
	color: var(--cp-muted);
}

.cp-itin__marker {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	padding-top: 0.9rem;
}

.cp-itin__num {
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: var(--cp-paper);
	border: 1px solid var(--cp-line-strong);
	color: var(--cp-navy);
	font-size: var(--cp-fs-mono);
	letter-spacing: 0;
	transition: background-color 0.2s var(--cp-ease), border-color 0.2s var(--cp-ease),
		color 0.2s var(--cp-ease);
}

.cp-itin__day:has(.cp-itin__trigger[aria-expanded="true"]) .cp-itin__num {
	background: var(--cp-navy);
	border-color: var(--cp-navy);
	color: #fff;
}

.cp-itin__content {
	padding-bottom: 0.35rem;
}

.cp-itin__heading {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

.cp-itin__trigger {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	padding: 1.1rem 0 0.9rem;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
	color: var(--cp-navy);
}

.cp-itin__daylabel {
	flex: none;
	color: var(--cp-teal);
}

.cp-itin__title {
	flex: 1;
	font-family: var(--cp-font-display);
	font-size: 1.1rem;
	font-weight: 500;
	line-height: 1.3;
}

.cp-itin__trigger:hover .cp-itin__title {
	color: var(--cp-teal);
}

.cp-itin__chevron {
	flex: none;
	color: var(--cp-teal);
	transition: transform 0.25s var(--cp-ease);
}

.cp-itin__trigger[aria-expanded="true"] .cp-itin__chevron {
	transform: rotate(180deg);
}

.cp-itin__panel {
	padding-bottom: 1.1rem;
	max-width: 62ch;
}

/* Shown only on narrow screens, where the connector between days is dropped. */
.cp-itin__travel {
	display: none;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 0.6rem;
	color: var(--cp-muted);
}

.cp-itin__text {
	margin: 0;
	color: var(--cp-muted);
}

.cp-itin__pips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.9rem 0 0;
	padding: 0;
	list-style: none;
}

.cp-itin__pips li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.7rem;
	border-radius: var(--cp-radius-pill);
	background: var(--cp-mist);
	font-size: var(--cp-fs-sm);
	color: var(--cp-navy);
}

.cp-itin__pips svg {
	color: var(--cp-teal);
}

@media (max-width: 560px) {
	.cp-itin__day {
		grid-template-columns: 2.2rem minmax(0, 1fr);
		column-gap: 0.8rem;
	}

	.cp-itin__day::before {
		left: 1.1rem;
	}

	.cp-itin__num {
		width: 2rem;
		height: 2rem;
	}

	.cp-itin__leg {
		display: none;
	}

	.cp-itin__travel {
		display: flex;
	}

	.cp-itin__trigger {
		flex-wrap: wrap;
		gap: 0.35rem 0.8rem;
	}

	.cp-itin__title {
		flex: 1 0 100%;
		order: 3;
	}
}

/* 15. Activities ==========================================================*/

.cp-act {
	height: 100%;
}

.cp-act__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius-lg);
	overflow: hidden;
	text-decoration: none;
	background: var(--cp-paper);
	transition: border-color 0.2s var(--cp-ease), box-shadow 0.2s var(--cp-ease),
		transform 0.2s var(--cp-ease);
}

.cp-act__link:hover {
	border-color: var(--cp-aqua);
	box-shadow: var(--cp-shadow);
	transform: translateY(-2px);
}

.cp-act__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--cp-mist-deep);
}

.cp-act__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--cp-ease);
}

.cp-act__link:hover .cp-act__img {
	transform: scale(1.05);
}

.cp-act__badge {
	position: absolute;
	left: 0.85rem;
	bottom: 0.85rem;
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	color: var(--cp-navy);
	backdrop-filter: blur(6px);
}

.cp-act__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.1rem 1.2rem 1.25rem;
}

.cp-act__type {
	margin: 0 0 0.35rem;
	font-family: var(--cp-font-mono);
	font-size: var(--cp-fs-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cp-teal);
}

.cp-act__title {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.25;
	color: var(--cp-navy);
}

.cp-act__tagline {
	margin: 0.4rem 0 0;
	font-size: var(--cp-fs-sm);
	color: var(--cp-muted);
}

.cp-act__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.9rem;
	margin: auto 0 0;
	padding-top: 0.9rem;
	color: var(--cp-muted);
}

.cp-act__price {
	color: var(--cp-navy);
	font-weight: 500;
}

.cp-acts__filters {
	margin-bottom: 2rem;
}

.cp-acts__filters .cp-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

/* Steps on an activity page ----------------------------------------------- */

.cp-steps {
	counter-reset: cp-step;
	display: grid;
	gap: 0.85rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.cp-step {
	position: relative;
	padding: 1rem 1.2rem 1.1rem 3.2rem;
	background: var(--cp-paper);
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius);
}

.cp-step::before {
	counter-increment: cp-step;
	content: counter(cp-step, decimal-leading-zero);
	position: absolute;
	left: 1.1rem;
	top: 1.05rem;
	font-family: var(--cp-font-mono);
	font-size: var(--cp-fs-mono);
	color: var(--cp-aqua);
}

.cp-step__time {
	margin: 0 0 0.15rem;
	color: var(--cp-teal);
}

.cp-step__title {
	margin: 0;
	font-size: 1.05rem;
}

.cp-step__text {
	margin: 0.4rem 0 0;
	font-size: var(--cp-fs-sm);
	color: var(--cp-muted);
}

/* Before-you-book note ---------------------------------------------------- */

.cp-note {
	padding: 1.2rem 1.35rem 1.3rem;
	background: var(--cp-mist);
	border-left: 3px solid var(--cp-thambil);
	border-radius: var(--cp-radius);
}

.cp-note__title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
	font-size: 1rem;
}

.cp-note__title svg {
	color: var(--cp-thambil);
}

.cp-note p {
	margin: 0;
	color: var(--cp-muted);
}

.cp-factpanel__note--good {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--cp-teal);
}

.cp-itin__travel.is-always {
	display: flex;
}

/* 16. FAQs and legal pages =================================================*/

.cp-faqpage {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

@media (min-width: 960px) {
	.cp-faqpage {
		grid-template-columns: minmax(0, 1fr) 18rem;
	}

	.cp-faqpage__side {
		position: sticky;
		top: calc(var(--cp-header-h) + 1.5rem);
	}
}

.cp-faqpage__main > * + * {
	margin-top: clamp(2.25rem, 4vw, 3rem);
}

.cp-faqpage .cp-faq h2 {
	font-size: var(--cp-fs-h3);
}

/* Anchored sections must not land under the sticky header. */
.cp-faqpage .cp-faq {
	scroll-margin-top: calc(var(--cp-header-h) + 1.5rem);
}

/* A draft that must not go live by accident ------------------------------- */

.cp-legal-note {
	margin: 0 0 2rem;
	padding: 1.15rem 1.35rem 1.25rem;
	background: #FFF6E4;
	border: 1px solid var(--cp-thambil);
	border-left-width: 4px;
	border-radius: var(--cp-radius);
}

.cp-legal-note p {
	margin: 0;
	color: #6B4A05;
	font-size: var(--cp-fs-sm);
}

/* Placeholders left for the office to complete, made impossible to miss. */
.cp-prose--legal p,
.cp-prose--legal li,
.cp-prose--legal td {
	--cp-placeholder: #B3261E;
}

/* Long-form legal text ---------------------------------------------------- */

.cp-prose--legal {
	max-width: 68ch;
}

.cp-prose--legal h2 {
	margin-top: 2.5rem;
	font-size: var(--cp-fs-h4);
}

.cp-prose--legal table {
	width: 100%;
	margin: 1.25rem 0;
	border-collapse: collapse;
	font-size: var(--cp-fs-sm);
}

.cp-prose--legal th,
.cp-prose--legal td {
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--cp-line);
	text-align: left;
	vertical-align: top;
}

.cp-prose--legal th {
	background: var(--cp-mist);
	font-family: var(--cp-font-mono);
	font-size: var(--cp-fs-mono);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--cp-muted);
	font-weight: 500;
}

.cp-prose--legal ul {
	padding-left: 1.2rem;
}

.cp-prose--legal li + li {
	margin-top: 0.4rem;
}

/* 17. Responsive corrections ===============================================
   From a sweep across eleven viewports from 320px up. Each rule here fixes a
   measured fault, not a guess.
   ========================================================================= */

/* A grid item defaults to min-width:auto, so the widest child — the twelve
   month buttons — was setting the width of the whole column and pushing the
   island section past the edge of a 320px screen. */
.cp-island__layout {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 940px) {
	.cp-island__layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	}
}

/* Twelve months across a 280px screen gives 23px per button, which is neither
   readable nor tappable. Two rows of six is both. */
.cp-months__strip {
	flex-wrap: wrap;
}

.cp-month {
	flex: 1 1 2.5rem;
	min-width: 2.5rem;
	min-height: 40px;
}

/* Pin labels sit to one side of their pin, which pushed the eastern ones past
   the edge of the screen once the map got narrow. Centring them above the pin
   keeps them inside the map whatever the width — flipping sides only moves the
   problem to the other coast. */
@media (max-width: 1100px) {
	.cp-island__label,
	.cp-island__pin-wrap--left .cp-island__label {
		left: 50%;
		right: auto;
		top: auto;
		bottom: calc(100% + 8px);
		transform: translateX(-50%);
	}
}

/* Small print, raised to the 12px floor. 11px is below what most people can
   read comfortably on a phone, and these are real labels rather than
   decoration. */
:root {
	--cp-fs-mono: 0.78125rem; /* 12.5px */
}

.cp-month,
.cp-island__label {
	font-size: 0.75rem; /* 12px */
}

/* Tap targets. WCAG 2.2 asks for 24x24 as a minimum; these were between 19 and
   26px tall. Padding rather than font size, so nothing reflows. */
@media (max-width: 767px) {
	.cp-crumbs a,
	.cp-crumbs__item {
		display: inline-block;
		padding-block: 0.45rem;
	}

	.cp-link {
		padding-block: 0.4rem;
	}

	.cp-radio {
		padding-block: 0.55rem;
	}

	.cp-filters__options a,
	.cp-chip {
		min-height: 40px;
		display: inline-flex;
		align-items: center;
	}

	/* The hero slideshow bars: the bar stays thin, the target around it grows. */
	.cp-slides__bar {
		height: 40px;
	}
}

/* Touch corrections, measured rather than guessed --------------------------- */

@media (max-width: 767px) {
	/* Footer navigation was 19px tall — thumbs need more than that. */
	.cp-footer__list a {
		display: inline-block;
		padding-block: 0.5rem;
	}

	/* The label is the pin's accessible name, so it is hidden visually rather
	   than removed — a display:none here would leave the link unnamed. */
	.cp-island__label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
		opacity: 1;
	}
}

/* Map pins are 12px dots by design. The dot stays that size and an invisible
   target is laid over it, which takes the tap area to 28px — the WCAG 2.2 AA
   minimum is 24. Nineteen pins on a 280px island will never be a comfortable
   tap, which is why the destinations carousel below is the real navigation on
   a phone; this stops them being impossible rather than making them ideal. */
.cp-island__pin::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 28px;
	height: 28px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
}

@media (max-width: 767px) {
	/* Footer contact and legal links were 25px and 16px tall. */
	.cp-contact-list a,
	.cp-footer__legal a {
		display: inline-block;
		padding-block: 0.45rem;
	}
}

/* Tour detail, narrow screens ---------------------------------------------
   Same fault as the island section: a grid item defaults to min-width:auto, so
   the widest row in the route list was setting the width of the whole column
   and pushing the page 19px past a 320px screen. */

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

@media (min-width: 1000px) {
	.cp-tour__layout {
		grid-template-columns: minmax(0, 1fr) 340px;
	}
}

.cp-routelist__stop {
	flex-wrap: wrap;
}

.cp-routelist__name {
	min-width: 0;
}

/* The stop names are the only links in the route; 22px was too short a target. */
@media (max-width: 767px) {
	.cp-routelist__name a {
		display: inline-block;
		padding-block: 0.3rem;
	}
}

/* The month strip on a tour was still at 11px after the global rise. */
.cp-monthbar__item {
	font-size: 0.75rem;
}

/* Twelve month cells across a 280px screen cannot fit on one row, and with
   flex:1 and no min-width:0 they were forcing the whole tour column wider than
   the phone. Two rows of six, the same answer as the island strip. */
.cp-monthbar {
	flex-wrap: wrap;
}

.cp-monthbar__item {
	flex: 1 1 2.5rem;
	min-width: 2.5rem;
}

/* 18. Island map illustration =============================================
   When a picture is used instead of the drawn coastline. The pins are still
   the interactive layer; the illustration's own icons are texture behind them.
   ========================================================================= */

.cp-island__map--art {
	position: relative;
}

.cp-island__art {
	display: block;
	width: 100%;
	height: auto;
	max-width: 34rem;
	margin-inline: auto;
}

/* The pin layer has to sit exactly over the picture, not over the column the
   picture is centred in, or every pin drifts sideways. */
.cp-island__map--art .cp-island__pins {
	max-width: 34rem;
	margin-inline: auto;
	inset: 0;
}

/* Against a light illustration the pins need a dark centre and a light ring;
   over the dark drawn coastline it is the other way round. */
.cp-island__map--art .cp-island__dot {
	background: var(--cp-navy);
	box-shadow: 0 0 0 3px #fff, 0 1px 4px rgba(4, 24, 43, 0.35);
}

.cp-island__map--art .cp-island__pin:hover .cp-island__dot,
.cp-island__map--art .cp-island__pin:focus-visible .cp-island__dot {
	background: var(--cp-thambil);
	box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(4, 24, 43, 0.45);
}

/* Out of season, on a light background, greying out reads better than fading. */
.cp-island__map--art .cp-island__pin.is-off-season .cp-island__dot {
	background: #8FA0AC;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9);
}

/* Length switcher ========================================================== */

/* Only appears where a tour runs to more than one length. A segmented control
   rather than a dropdown, because two or three options are worth showing in
   full: the choice is part of the offer, not a setting. */
.cp-lengths {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: clamp(2rem, 4vw, 2.75rem);
	padding-bottom: clamp(1.5rem, 3vw, 2rem);
	border-bottom: 1px solid var(--cp-line);
}

.cp-lengths__label {
	margin-right: 0.35rem;
	font-family: var(--cp-font-mono);
	font-size: var(--cp-fs-mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cp-muted);
}

.cp-lengths__option {
	padding: 0.5rem 1.1rem;
	border: 1px solid var(--cp-line-strong);
	border-radius: var(--cp-radius-pill);
	background: var(--cp-paper);
	color: var(--cp-navy);
	font-size: var(--cp-fs-sm);
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.18s var(--cp-ease), border-color 0.18s var(--cp-ease);
}

a.cp-lengths__option:hover,
a.cp-lengths__option:focus-visible {
	border-color: var(--cp-teal);
	background: var(--cp-aqua-050);
	color: var(--cp-teal);
}

.cp-lengths__option.is-current {
	border-color: var(--cp-navy);
	background: var(--cp-navy);
	color: #fff;
}