/*
Theme Name: Longhand
Theme URI: https://longhandtravel.com
Author: Longhand Travel
Description: Custom block theme for Longhand Travel, a luxury travel advisory for rail and small-ship journeys in remote Canada. Built to the Longhand brand guidelines v2.0: paper ground with vellum accent fields, iron gall ink text and lines, ink hero and footer bands, EB Garamond display, Instrument Sans body, IBM Plex Mono for every numeral.
Version: 0.23.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: longhand
*/

/* ---- Numerals: every number renders in IBM Plex Mono ---- */
/* Plex Mono runs optically larger and tighter-set than Instrument Sans,
   so inline figures drop to 0.88em with negative tracking to sit level
   with the prose around them. Colour is inherited from the sentence. */
.lh-num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.88em;
	letter-spacing: -0.05em;
	word-spacing: 0;
	padding: 0;
	margin: 0;
}

/* ---- The inscription: positioning line beneath the wordmark ---- */
.lh-inscription {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 400;
	font-size: 1.1875rem;
	letter-spacing: 0.01em;
	opacity: 0.85;
}

/* ---- The ruled underline: hand-drawn, vermilion, one per composition ---- */
.lh-ruled-underline {
	display: block;
	margin-top: 0.3em;
}
.lh-ruled-underline svg {
	display: block;
	overflow: visible;
	max-width: 100%;
}

/* ---- The lockup: live wordmark with the looped stroke beneath ---- */
/* The stroke is a clean SVG retrace of lockup-B-final.png: one pen
   line rising from a small ink dot, looping once, and sweeping down
   to the vermilion terminal. Stroke and start dot take currentColor
   so the lockup recolours with its ground; the terminal never does. */
.lh-lockup-stroke {
	display: block;
	height: auto;
	overflow: visible;
}

/* ---- Home hero: the lockup set in the quiet sky of the Rockies ---- */
.lh-hero-lockup {
	position: relative;
}
/* 92vh full bleed: a sliver of the next section stays above the fold
   as the scroll invitation. object-position biases the crop toward
   the sky so the lockup's backdrop survives wide viewports. */
.lh-hero-lockup img {
	display: block;
	width: 100%;
	height: 92vh;
	min-height: 34rem;
	object-fit: cover;
	object-position: 50% 38%;
}
/* A soft ink veil over the sky only, fading out by mid-frame, so the
   paper lockup and the overlaid navigation hold against pale cloud. */
.lh-hero-lockup__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(31, 27, 22, 0.5),
		rgba(31, 27, 22, 0.18) 30%,
		rgba(31, 27, 22, 0) 54%
	);
	pointer-events: none;
}
/* The lockup group sits vertically centred in the hero image; the
   centred block starts far below the fixed nav at every size. */
.lh-hero-lockup__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--wp--preset--color--paper);
}
.lh-hero-lockup__content h1 {
	color: var(--wp--preset--color--paper);
	font-size: clamp(2.1rem, 5.4vw, 4rem);
	line-height: 1.05;
	margin: 0;
}
.lh-hero-lockup .lh-lockup-stroke {
	width: clamp(9rem, 20vw, 15rem);
	margin-top: 0.4rem;
}
.lh-hero-lockup .lh-inscription {
	margin-top: 0.9rem;
	color: var(--wp--preset--color--paper);
	opacity: 0.92;
}
/* ---- Fixed navigation site-wide, keyed to hero presence ---- */
/* ONE header part, ONE behaviour: the header is position:fixed on
   every page (position:sticky cannot work here, because WordPress
   wraps the template part in an element exactly the header's own
   height, leaving sticky no room to travel). Pages with a
   photographic hero start transparent with paper links and turn
   solid white once scrolled; every other page is solid white from
   the start and the content is offset by the header's height. */
:root {
	--lh-header-h: 4.4rem;
}
.lh-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 40;
	background: var(--wp--preset--color--white);
	border-bottom: 1px solid var(--wp--custom--hairline);
	transition: background-color 240ms ease, border-color 240ms ease;
}
body:not(:has(.lh-hero-lockup)):not(:has(.lh-hero-cover)) .wp-site-blocks {
	padding-top: var(--lh-header-h);
}
body:has(.lh-hero-lockup) .lh-header,
body:has(.lh-hero-cover) .lh-header {
	background: transparent;
	border-bottom-color: transparent;
}
/* With the header out of flow, the hero is the first in-flow element;
   strip the root block gap above it on hero pages. */
body:has(.lh-hero-lockup) .wp-site-blocks > main,
body:has(.lh-hero-cover) .wp-site-blocks > main {
	margin-block-start: 0;
}
body:has(.lh-hero-lockup) .lh-header:not(.lh-header--solid) .wp-block-site-title a,
body:has(.lh-hero-lockup) .lh-header:not(.lh-header--solid) .wp-block-navigation a,
body:has(.lh-hero-lockup) .lh-header:not(.lh-header--solid) .wp-block-navigation button,
body:has(.lh-hero-cover) .lh-header:not(.lh-header--solid) .wp-block-site-title a,
body:has(.lh-hero-cover) .lh-header:not(.lh-header--solid) .wp-block-navigation a,
body:has(.lh-hero-cover) .lh-header:not(.lh-header--solid) .wp-block-navigation button {
	color: var(--wp--preset--color--paper);
}
body:has(.lh-hero-lockup) .lh-header.lh-header--solid,
body:has(.lh-hero-cover) .lh-header.lh-header--solid {
	background: var(--wp--preset--color--white);
	border-bottom-color: var(--wp--custom--hairline);
}

/* ---- Journey hero: title over a full-bleed 80vh image ---- */
.lh-hero-cover {
	position: relative;
	overflow: hidden;
}
.lh-hero-cover img {
	display: block;
	width: 100%;
	height: 80vh;
	min-height: 30rem;
	object-fit: cover;
}
@media (prefers-reduced-motion: no-preference) {
	.lh-hero-cover img {
		animation: lh-hero-drift 20s ease forwards;
	}
	@keyframes lh-hero-drift {
		from { transform: scale(1); }
		to { transform: scale(1.05); }
	}
}
.lh-hero-cover__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(31, 27, 22, 0.5),
		rgba(31, 27, 22, 0.26) 34%,
		rgba(31, 27, 22, 0.26) 72%,
		rgba(31, 27, 22, 0.42)
	);
	pointer-events: none;
}
.lh-hero-cover__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 clamp(1.25rem, 4vw, 3rem);
	color: var(--wp--preset--color--paper);
}
.lh-hero-cover .lh-overline {
	color: var(--wp--preset--color--paper);
	opacity: 0.85;
	margin-bottom: 1rem;
}
.lh-hero-cover h1 {
	color: var(--wp--preset--color--paper);
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	line-height: 1.08;
	margin: 0;
}
.lh-hero-cover .lh-ruled-underline {
	margin-top: 0.6rem;
}
.lh-hero-cover .lh-ruled-underline svg {
	margin: 0 auto;
}
/* Dek: one plain line beneath the title, hero pages that carry one. */
.lh-hero-cover__dek {
	margin: 1.1rem 0 0;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--paper);
	opacity: 0.92;
}
/* Sky-biased hero: the title block rides high, over the open sky. */
.lh-hero-cover--sky img {
	object-position: 50% 32%;
}
.lh-hero-cover--sky .lh-hero-cover__content {
	justify-content: flex-start;
	padding-top: clamp(5rem, 15vh, 9.5rem);
}

/* ---- Header row: wordmark left, links centered, CTA right ---- */
.lh-header__row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: 1.5rem;
}
.lh-header__row .wp-block-site-title {
	justify-self: start;
	margin: 0;
}
.lh-header__row .wp-block-navigation {
	justify-self: center;
}
.lh-header .wp-block-navigation a {
	letter-spacing: 0.05em;
	font-size: 0.9rem;
}
.lh-header .lh-nav-cta {
	justify-self: end;
}
@media (max-width: 900px) {
	.lh-header__row {
		grid-template-columns: 1fr auto;
	}
	.lh-header .lh-nav-cta {
		display: none;
	}
}

/* ---- Buttons: the Longhand CTA system ---- */
/* Vermilion serves primary CTAs and terminal dots (rule amended
   2026-08-04). All buttons: uppercase, letterspaced, square. */
.lh-btn {
	display: inline-block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	line-height: 1;
	padding: 1.05rem 1.9rem;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.lh-btn--sm {
	font-size: 0.6875rem;
	padding: 0.75rem 1.2rem;
}
.lh-btn--vermilion {
	background: var(--wp--preset--color--port-vermilion);
	border-color: var(--wp--preset--color--port-vermilion);
	color: var(--wp--preset--color--paper);
}
.lh-btn--vermilion:hover,
.lh-btn--vermilion:focus {
	background: #93300F;
	border-color: #93300F;
	color: var(--wp--preset--color--paper);
}
.lh-btn--outline-paper {
	border-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--paper);
	background: transparent;
}
.lh-btn--outline-paper:hover,
.lh-btn--outline-paper:focus {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--iron-gall-ink);
}
.lh-btn--outline-ink {
	border-color: var(--wp--preset--color--iron-gall-ink);
	color: var(--wp--preset--color--iron-gall-ink);
	background: transparent;
}
.lh-btn--outline-ink:hover,
.lh-btn--outline-ink:focus {
	background: var(--wp--preset--color--iron-gall-ink);
	color: var(--wp--preset--color--paper);
}
.lh-btn--ink {
	background: var(--wp--preset--color--iron-gall-ink);
	border-color: var(--wp--preset--color--iron-gall-ink);
	color: var(--wp--preset--color--paper);
}
.lh-btn--ink:hover,
.lh-btn--ink:focus {
	background: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--iron-gall-ink);
}
/* Band link rules must not recolour or dim buttons. */
.lh-band-ink .lh-btn,
.lh-band-deep-sea .lh-btn,
.lh-band-ink .lh-btn:hover,
.lh-band-deep-sea .lh-btn:hover {
	opacity: 1;
}
.lh-band-ink a.lh-btn--vermilion,
.home .lh-header:not(.lh-header--solid) a.lh-btn--vermilion {
	color: var(--wp--preset--color--paper);
}

/* ---- Footer lockup: small wordmark with stroke, above the nav ---- */
.lh-footer-lockup {
	display: inline-flex;
	flex-direction: column;
}
.lh-footer-lockup .lh-lockup-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 1.375rem;
	letter-spacing: 0.005em;
}
.lh-footer-lockup .lh-lockup-stroke {
	width: 7.25rem;
	margin-top: 0.4rem;
	align-self: center;
}

/* ---- ABN: figures dress as figures, even in the small print ---- */
.lh-abn {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.96em;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

/* ---- Hero photographs: full-width bands below the ink band ---- */
/* No text or overlay ever sits on a photograph. Each image is cropped
   to a wide band; object-position keeps the subject in frame. */
.lh-hero-photo {
	margin: 0;
}
.lh-hero-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2.4 / 1;
	object-fit: cover;
}
.lh-hero-photo--frontenac img {
	object-position: 50% 74%;
}
.lh-hero-photo--jasper img {
	aspect-ratio: 2 / 1;
	object-position: 50% 62%;
}
.lh-hero-photo--aurora img {
	aspect-ratio: 2.2 / 1;
	object-position: 50% 42%;
}
@media (max-width: 600px) {
	.lh-hero-photo img {
		aspect-ratio: 3 / 2;
	}
}
/* Supplier credit: a small letterspaced caption attached bottom-right
   beneath its photograph, never floating free of it. */
.lh-photo-credit,
figcaption.lh-photo-credit {
	text-align: right;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--faded-ink);
	margin-top: 0.6rem;
	margin-bottom: 0;
}

/* ---- Overline section labels ---- */
.lh-overline {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--wp--preset--color--faded-ink);
	margin-bottom: 1.1rem;
}
.lh-band-ink .lh-overline,
.lh-band-deep-sea .lh-overline {
	color: var(--wp--preset--color--vellum);
	opacity: 0.62;
}

/* ---- Scroll reveal: a quiet fade and rise on entry ---- */
@media (prefers-reduced-motion: no-preference) {
	.lh-reveal {
		opacity: 0;
		transform: translateY(22px);
		transition: opacity 480ms ease-out, transform 480ms ease-out;
	}
	.lh-reveal.lh-in {
		opacity: 1;
		transform: none;
	}
}

/* ---- Specification plate: the boldest informational moment ---- */
/* Deep sea field between paper hairlines; small muted-paper labels
   over large paper values, numerals dressing in mono as everywhere. */
.lh-spec {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1.5rem 2.5rem;
	background: var(--wp--preset--color--deep-sea);
	color: var(--wp--preset--color--paper);
	border-top: 1px solid var(--wp--preset--color--paper);
	border-bottom: 1px solid var(--wp--preset--color--paper);
	padding: 1.8rem 1.6rem;
}
.lh-spec__label {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: rgba(251, 249, 245, 0.62);
}
.lh-spec__value {
	display: block;
	margin-top: 0.55rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: clamp(1.6rem, 2.4vw, 2rem);
	line-height: 1.1;
}
.lh-spec__value .lh-num {
	letter-spacing: -0.03em;
}
.lh-spec--sm {
	padding: 1.3rem 1.4rem;
	gap: 1.25rem 2.5rem;
	justify-content: flex-start;
}
.lh-spec--sm .lh-spec__item {
	min-width: 9rem;
}
.lh-spec--sm .lh-spec__value {
	font-size: clamp(1.35rem, 2vw, 1.65rem);
}

/* ---- Stop blocks: mono day marker and serif name left, prose right ---- */
.lh-stop {
	display: grid;
	grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
	gap: 1.5rem clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}
.lh-stop + .lh-stop {
	margin-top: var(--wp--preset--spacing--50);
}
.lh-stop__marker {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--faded-ink);
}
.lh-stop__name {
	font-size: clamp(1.7rem, 2.6vw, 2.3rem);
	line-height: 1.12;
	margin: 0.5rem 0 0;
}
.lh-stop__prose p {
	margin: 0 0 1.1rem;
}
.lh-stop__prose p:last-child {
	margin-bottom: 0;
}
@media (max-width: 781px) {
	.lh-stop {
		grid-template-columns: 1fr;
		gap: 0.9rem;
	}
}

/* Stops with an image: text and photograph side by side, the image
   at roughly 42% width, sides alternating down the page. */
.lh-stop--media {
	grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
	align-items: center;
}
.lh-stop--media-left {
	grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
}
.lh-stop--media .lh-stop__figure {
	margin: 0;
}
.lh-stop--media .lh-stop__figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.lh-stop--media-left .lh-stop__figure {
	order: -1;
}
.lh-stop--media .lh-stop__text {
	min-width: 0;
}
@media (max-width: 781px) {
	.lh-stop--media,
	.lh-stop--media-left {
		grid-template-columns: 1fr;
	}
	/* Stacked stops always put the photograph above the text, whichever
	   side it sat on at desktop width. */
	.lh-stop--media .lh-stop__figure,
	.lh-stop--media-left .lh-stop__figure {
		order: -1;
	}
}

/* Seasonal split blocks (Far North): image beside text, sides
   alternating, matching the advisor-block composition. */
.lh-season {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 45%);
	gap: 1.5rem clamp(2rem, 5vw, 4rem);
	align-items: center;
}
.lh-season--flip {
	grid-template-columns: minmax(0, 45%) minmax(0, 1fr);
}
.lh-season__figure {
	margin: 0;
}
.lh-season__figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.lh-season--flip .lh-season__figure {
	order: -1;
}
@media (max-width: 781px) {
	.lh-season,
	.lh-season--flip {
		grid-template-columns: 1fr;
	}
	.lh-season--flip .lh-season__figure {
		order: 0;
	}
}

/* ---- Uniform journey photographs: shared width, 3:2 crop ---- */
.lh-photo--32 img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* ---- Gallery rail: contained to the wide column, arrow-driven ---- */
/* The rail is a contained box: its left and right edges are the wide
   column's edges, matching the eyebrow above; nothing bleeds to the
   viewport. Uniform image height, fixed-height caption band, native
   scroll + snap, drag for mouse, arrow keys when focused, chevron
   arrows in the head row, scrollbar hidden. */
.lh-gallery {
	display: flex;
	justify-content: flex-start;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	cursor: grab;
}
.lh-gallery-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.lh-gallery-head .lh-overline {
	margin-bottom: 0;
}
.lh-gallery-nav {
	display: flex;
	gap: 0.25rem;
}
.lh-gallery-nav button {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--wp--preset--color--iron-gall-ink);
	cursor: pointer;
	transition: opacity 180ms ease;
}
.lh-gallery-nav button[disabled] {
	opacity: 0.25;
	pointer-events: none;
}
@media (max-width: 767px) {
	.lh-gallery-nav {
		display: none;
	}
}
.lh-gallery::-webkit-scrollbar {
	display: none;
}
.lh-gallery:focus-visible {
	outline: 2px solid var(--wp--preset--color--iron-gall-ink);
	outline-offset: 3px;
}
.lh-gallery.lh-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	user-select: none;
}
.lh-gallery figure {
	flex: 0 0 auto;
	margin: 0;
	scroll-snap-align: start;
}
.lh-gallery img {
	display: block;
	height: 420px;
	width: auto;
	object-fit: cover;
	pointer-events: none;
}
/* width:0 + min-width:100% pins the caption to its image's width so
   long captions wrap instead of widening the figure. Fixed height
   keeps single- and two-line captions from staggering the row. */
.lh-gallery figcaption {
	width: 0;
	min-width: 100%;
	height: 2.6rem;
	overflow: hidden;
	margin-top: 0.6rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--wp--preset--color--faded-ink);
	text-align: left;
}
.lh-gallery figcaption .lh-photo-credit {
	display: inline;
	position: static;
	margin: 0 0 0 0.6rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--faded-ink);
	opacity: 1;
}
@media (max-width: 600px) {
	.lh-gallery {
		gap: 16px;
	}
	.lh-gallery img {
		height: 260px;
	}
}

/* ---- Legacy figures ledger (kept for any remaining uses) ---- */
.lh-figures {
	font-family: var(--wp--preset--font-family--mono);
	background: var(--wp--preset--color--warm-grey);
	border-top: 1px solid var(--wp--custom--hairline);
	border-bottom: 1px solid var(--wp--custom--hairline);
	padding: 1.1rem 1.25rem;
	letter-spacing: 0.01em;
	white-space: pre-wrap;
	overflow-x: auto;
}

/* ---- The written route: hand-drawn SVG drawings ---- */
.lh-route svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}
.lh-route text {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	fill: var(--wp--preset--color--vellum);
}
.lh-route--ink text {
	fill: var(--wp--preset--color--iron-gall-ink);
}

/* ---- Route self-drawing animation ---- */
/* The .lh-route-anim marker is added by JavaScript, so with no JS
   (or reduced motion, or ?noreveal) the drawing is simply visible.
   The line draws left to right over 2.5s; each stop's dot and label
   appear as the pen reaches them, the vermilion terminal last. */
@media (prefers-reduced-motion: no-preference) {
	.lh-route-anim .lh-route-line {
		stroke-dasharray: 1000;
		stroke-dashoffset: 1000;
	}
	.lh-route-anim.lh-drawn .lh-route-line {
		transition: stroke-dashoffset 4s cubic-bezier(0.5, 0.05, 0.3, 1);
		stroke-dashoffset: 0;
	}
	.lh-route-anim circle,
	.lh-route-anim text,
	.lh-route-anim .lh-route-later {
		opacity: 0;
	}
	.lh-route-anim.lh-drawn .lh-route-later {
		transition: opacity 0.6s ease 4s;
		opacity: 1;
	}
	.lh-route-anim circle {
		transform: scale(0.2);
		transform-box: fill-box;
		transform-origin: center;
	}
	.lh-route-anim.lh-drawn circle,
	.lh-route-anim.lh-drawn text {
		transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
		opacity: 1;
		transform: scale(1);
	}
	.lh-route-anim.lh-drawn circle:nth-of-type(1),
	.lh-route-anim.lh-drawn text:nth-of-type(1) { transition-delay: 0.15s; }
	.lh-route-anim.lh-drawn circle:nth-of-type(2),
	.lh-route-anim.lh-drawn text:nth-of-type(2) { transition-delay: 0.9s; }
	.lh-route-anim.lh-drawn circle:nth-of-type(3),
	.lh-route-anim.lh-drawn text:nth-of-type(3) { transition-delay: 1.45s; }
	.lh-route-anim.lh-drawn circle:nth-of-type(4),
	.lh-route-anim.lh-drawn text:nth-of-type(4) { transition-delay: 2s; }
	.lh-route-anim.lh-drawn circle:nth-of-type(5),
	.lh-route-anim.lh-drawn text:nth-of-type(5) { transition-delay: 3.15s; }
	.lh-route-anim.lh-drawn circle:nth-of-type(6),
	.lh-route-anim.lh-drawn text:nth-of-type(6) { transition-delay: 3.85s; }
}
.lh-route-vertical {
	max-width: 21rem;
}
/* First Passage route (Rockies page): four stops whose dots must wait
   for the pen. The default nth-of-type delays assume six stops; these
   overrides time Kamloops, Lake Louise, and the Banff terminal to the
   draw's easing so each appears as the stroke reaches it. */
@media (prefers-reduced-motion: no-preference) {
	.lh-route--fptw.lh-route-anim.lh-drawn circle:nth-of-type(2),
	.lh-route--fptw.lh-route-anim.lh-drawn text:nth-of-type(2) { transition-delay: 2s; }
	.lh-route--fptw.lh-route-anim.lh-drawn circle:nth-of-type(3),
	.lh-route--fptw.lh-route-anim.lh-drawn text:nth-of-type(3) { transition-delay: 3.1s; }
	.lh-route--fptw.lh-route-anim.lh-drawn circle:nth-of-type(4),
	.lh-route--fptw.lh-route-anim.lh-drawn text:nth-of-type(4) { transition-delay: 3.8s; }
}

/* ---- Hero action buttons beneath the positioning line ---- */
.lh-hero-lockup__actions {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 1.7rem;
}

/* ---- Journey cards: three tall portraits on the warm grey band ---- */
.lh-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.25rem, 2.5vw, 2rem);
}
.lh-jcard {
	position: relative;
	display: block;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	transition: transform 320ms ease;
}
.lh-jcard:hover {
	transform: translateY(-6px);
}
.lh-jcard img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.lh-jcard::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(31, 27, 22, 0.82),
		rgba(31, 27, 22, 0.34) 33%,
		rgba(31, 27, 22, 0) 58%
	);
	pointer-events: none;
}
.lh-jcard__badge {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 2;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--paper);
	border: 1px solid rgba(251, 249, 245, 0.65);
	background: rgba(31, 27, 22, 0.3);
	padding: 0.4rem 0.65rem;
}
.lh-jcard__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: clamp(1.25rem, 2vw, 1.75rem);
	color: var(--wp--preset--color--paper);
}
.lh-jcard__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.85;
	margin: 0 0 0.6rem;
}
.lh-jcard__body h3 {
	color: var(--wp--preset--color--paper);
	font-size: clamp(1.35rem, 1.8vw, 1.7rem);
	line-height: 1.15;
	margin: 0;
}
.lh-jcard__line {
	font-size: 0.9375rem;
	opacity: 0.88;
	margin: 0.55rem 0 0;
}
.lh-jcard__price {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	margin-top: 0.55rem;
	opacity: 0.92;
}
.lh-jcard__body .lh-btn {
	margin-top: 1.1rem;
}
.lh-jcard__credit {
	position: absolute;
	right: 1rem;
	bottom: 0.65rem;
	z-index: 2;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.625rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--paper);
	opacity: 0.5;
}
@media (max-width: 900px) {
	.lh-cards {
		grid-template-columns: 1fr;
		max-width: 26rem;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ---- Why Longhand: four type-only items, centered heading ---- */
.lh-rule {
	width: 3rem;
	height: 1px;
	background: var(--wp--preset--color--iron-gall-ink);
	border: 0;
	margin: 1.3rem auto 0;
}
.lh-why {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(2.5rem, 4.5vw, 4.5rem);
}
.lh-why__rule {
	display: block;
	margin-bottom: 1rem;
	overflow: visible;
}
.lh-why h3 {
	font-size: 2.25rem;
	line-height: 1.15;
	font-variant-caps: small-caps;
	letter-spacing: 0.035em;
	margin: 0;
}
.lh-why p {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--faded-ink);
	margin: 0.8rem 0 0;
}
@media (max-width: 900px) {
	.lh-why {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 540px) {
	.lh-why {
		grid-template-columns: 1fr;
	}
}

/* ---- Vermilion CTA band ---- */
.lh-band-vermilion :is(h1, h2, h3) {
	color: var(--wp--preset--color--paper);
}
.lh-band-vermilion ::selection {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--port-vermilion);
}

/* ---- Footer: newsletter strip, credentials, bottom rows ---- */
.lh-news {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: center;
	padding-bottom: var(--wp--preset--spacing--40);
	border-bottom: 1px solid rgba(251, 249, 245, 0.16);
}
.lh-news__line {
	margin: 0.4rem 0 0;
	opacity: 0.8;
}
.lh-news__form {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	justify-self: end;
}
.lh-news__form input {
	background: transparent;
	border: 1px solid rgba(251, 249, 245, 0.35);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	padding: 0.75rem 1rem;
	min-width: 0;
}
.lh-news__form input::placeholder {
	color: rgba(251, 249, 245, 0.55);
}
.lh-news__form input:focus-visible {
	outline: 1px solid var(--wp--preset--color--paper);
	outline-offset: 2px;
}
.lh-cred {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2.5rem;
	align-items: baseline;
	padding: var(--wp--preset--spacing--40) 0;
	border-bottom: 1px solid rgba(251, 249, 245, 0.16);
	opacity: 0.6;
	font-size: 0.8125rem;
}
.lh-cred__fora {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.75rem;
}
.lh-mono {
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: 0.02em;
}
.lh-foot-bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	align-items: baseline;
	justify-content: space-between;
	font-size: 0.8125rem;
	opacity: 0.75;
}
@media (max-width: 781px) {
	.lh-news {
		grid-template-columns: 1fr;
	}
	.lh-news__form {
		justify-self: start;
	}
}
.lh-journey-figures {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	margin-top: 1.6rem !important;
}

/* ---- Photographs in prose ---- */
.lh-photo img {
	width: 100%;
	height: auto;
	display: block;
}

/* ---- Ink bands (hero, footer): vellum type on ink ---- */
.lh-band-ink :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--vellum);
}
.lh-band-ink a:not(.wp-element-button) {
	color: var(--wp--preset--color--vellum);
}
.lh-band-ink a:not(.wp-element-button):hover {
	opacity: 0.72;
}
.lh-band-ink ::selection {
	background: var(--wp--preset--color--vellum);
	color: var(--wp--preset--color--iron-gall-ink);
}

/* ---- Deep sea bands: large quiet fields, paper type ---- */
.lh-band-deep-sea :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--paper);
}
.lh-band-deep-sea a:not(.wp-element-button) {
	color: var(--wp--preset--color--paper);
}
.lh-band-deep-sea .lh-overline {
	color: var(--wp--preset--color--paper);
	opacity: 0.62;
}
.lh-band-deep-sea a:not(.wp-element-button):hover {
	opacity: 0.72;
}
.lh-band-deep-sea ::selection {
	background: var(--wp--preset--color--vellum);
	color: var(--wp--preset--color--deep-sea);
}


/* ---- Links: colour and hover only; the ruled vermilion device is
        the sole underline on the site ---- */
a {
	text-decoration: none;
}
.wp-block-navigation a:hover {
	text-decoration: none;
	opacity: 0.65;
}

/* ---- Footer ---- */
.lh-footer-wordmark {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 1.375rem;
	letter-spacing: 0.005em;
}
.lh-footer .wp-block-navigation {
	font-size: 0.9375rem;
}
.lh-footer-legal {
	font-size: 0.8125rem;
	letter-spacing: 0.015em;
	opacity: 0.62;
}

/* ---- Journal ---- */
.lh-hairline {
	border: 0;
	height: 1px;
	width: 100%;
	background: var(--wp--custom--hairline);
	margin: 1.8rem 0 0;
}
.lh-journal-masthead__line {
	margin-top: 0.5rem;
}
.lh-jdate {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--faded-ink);
}
/* Lead essay: one block, one link, real weight. */
.lh-jlead-query {
	margin-top: var(--wp--preset--spacing--50);
}
.lh-jlead {
	position: relative;
}
.lh-jlead__img img {
	width: 100%;
	height: auto;
	aspect-ratio: 1.9 / 1;
	object-fit: cover;
	display: block;
}
.lh-jlead__title {
	font-size: clamp(1.9rem, 3.6vw, 3rem);
	line-height: 1.1;
	margin: 1.5rem 0 0;
}
.lh-jlead__title a {
	color: inherit;
}
.lh-jlead__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.lh-jlead__deck p {
	font-size: 1.1875rem;
	line-height: 1.5;
	margin: 0.8rem 0 0;
	max-width: 44rem;
}
.lh-jlead .lh-jdate {
	margin-top: 1rem;
}
/* Ruled entries: stacked, unequal to the lead by design. */
.lh-jentries {
	margin-top: var(--wp--preset--spacing--60);
}
.lh-jentries li {
	margin-top: 2.4rem;
}
.lh-jentry {
	border-top: 1px solid var(--wp--custom--hairline);
	padding-top: 1.9rem;
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	gap: 1.6rem;
	align-items: start;
}
.lh-jentry:not(:has(.lh-jentry__img)) {
	grid-template-columns: 1fr;
}
.lh-jentry__img img {
	width: 160px;
	height: 160px;
	object-fit: cover;
	display: block;
}
.lh-jentry__title {
	font-size: 1.45rem;
	line-height: 1.2;
	margin: 0;
}
.lh-jentry__title a {
	color: inherit;
}
.lh-jentry__deck p {
	font-size: 1rem;
	margin: 0.5rem 0 0;
}
.lh-jentry .lh-jdate {
	margin-top: 0.7rem;
}
@media (max-width: 600px) {
	.lh-jentry {
		grid-template-columns: 1fr;
	}
	.lh-jentry__img img {
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 2;
	}
}

/* ---- The essay page: magazine setting ---- */
.lh-essay__title {
	font-size: clamp(2rem, 4.2vw, 2.9rem);
	line-height: 1.1;
}
.lh-essay__deck p {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.1875rem;
	line-height: 1.5;
	color: var(--wp--preset--color--faded-ink);
	margin: 0.9rem 0 0;
}
.lh-essay .lh-jdate {
	margin-top: 1rem;
}
.lh-essay .lh-hairline {
	margin: 1.6rem 0 2.2rem;
}
.lh-essay__leadimg img {
	width: 100%;
	height: auto;
	display: block;
}
.lh-essay__leadimg {
	margin: 0 0 2.4rem;
}
/* The main thing separating this from a blog: first-line indents,
   no paragraph gaps. Flush after the title and after any break. */
.lh-essay__body p {
	font-family: var(--wp--preset--font-family--display);
	font-size: 21px;
	line-height: 1.65;
	margin: 0;
	text-indent: 1.5em;
}
/* Minimal paragraph air: 0.4em between body paragraphs only; the
   indent scheme is unchanged. */
.lh-essay__body p + p {
	margin-top: 0.4em;
}
.lh-essay__body > p:first-child,
.lh-essay__body .lh-break + p {
	text-indent: 0;
}
/* Section break: a single small ink dot, centred, generous space. */
.lh-essay__body .lh-break {
	text-indent: 0;
	text-align: center;
	margin: 2.5rem 0;
	font-size: 0.8rem;
	line-height: 1;
	color: var(--wp--preset--color--iron-gall-ink);
}
/* End mark: a small vermilion dot after the final word. */
.lh-endmark {
	display: inline-block;
	width: 0.4em;
	height: 0.4em;
	border-radius: 50%;
	background: var(--wp--preset--color--port-vermilion);
	margin-left: 0.28em;
}
/* Foot of essay: quiet text links, no navigation apparatus. */
.lh-essay__body hr.lh-essay-rule {
	border: 0;
	height: 1px;
	background: var(--wp--custom--hairline);
	margin: 3rem 0 1.4rem;
}
.lh-essay__body .lh-essay-foot {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	text-indent: 0;
	margin: 0.4rem 0 0;
}
@media (max-width: 600px) {
	.lh-essay__body p {
		font-size: 18px;
	}
}

/* ---- Inclusions list: nested bullets in the section's body voice ---- */
.lh-incl {
	margin-top: var(--wp--preset--spacing--40);
}
.lh-incl ul {
	margin: 0.9rem 0 0;
	padding-left: 1.3rem;
}
.lh-incl li {
	margin-top: 0.55rem;
}
.lh-incl ul ul {
	margin-top: 0.55rem;
}

/* ---- Rocky Mountaineer Specialist badge: the page's one gold ---- */
/* The badge is placed as supplied, never recoloured or cropped. The
   margins and caption offset keep clear space around it well beyond
   the height of the R in its wordmark (about 7px at this size). */
.lh-specialist-badge {
	margin: 3rem 0 0;
}
.lh-specialist-badge img {
	display: block;
	width: 120px;
	height: auto;
}
.lh-specialist-badge figcaption {
	margin-top: 0.9rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--faded-ink);
}

/* ---- Lede: prose promoted to a larger serif setting ---- */
.lh-lede {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.25rem, 1.8vw, 1.5rem);
	line-height: 1.55;
}

/* ---- Legal pages: serif section headings, lettered lists ---- */
.lh-legal .lh-intro-note {
	font-size: 0.9375rem;
}
.lh-legal-body h2 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
	margin: 2.6rem 0 0;
}
.lh-legal-body p {
	margin: 1.1rem 0 0;
}
.lh-legal-body ol.lh-alpha {
	list-style: lower-alpha;
	margin: 1.1rem 0 0;
	padding-left: 1.6rem;
}
.lh-legal-body ol.lh-alpha li {
	margin-top: 0.7rem;
	padding-left: 0.3rem;
}

/* ---- Contact form: the site's own styling, none of Kit's ---- */
.lh-form {
	margin-top: 2.2rem;
	max-width: 34rem;
}
.lh-form__field {
	margin-top: 1.5rem;
}
.lh-form__field label {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--iron-gall-ink);
}
.lh-form__field input {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 0.5rem 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(31, 27, 22, 0.35);
	border-radius: 0;
	box-shadow: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	color: var(--wp--preset--color--iron-gall-ink);
}
.lh-form__field input:focus {
	outline: none;
	border-bottom-color: var(--wp--preset--color--iron-gall-ink);
}
.lh-form__submit {
	margin: 2.2rem 0 0;
}
.lh-form-success {
	margin-top: 2.2rem;
	font-size: 1.125rem;
}
.lh-form-note {
	margin: 0.9rem 0 0;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--faded-ink);
}

/* ---- Selection and focus ---- */
::selection {
	background: var(--wp--preset--color--iron-gall-ink);
	color: var(--wp--preset--color--vellum);
}
:focus-visible {
	outline: 2px solid var(--wp--preset--color--iron-gall-ink);
	outline-offset: 3px;
}
.lh-band-ink :focus-visible,
.lh-band-deep-sea :focus-visible {
	outline-color: var(--wp--preset--color--vellum);
}

/* ---- Buttons: quiet ink outline, inverts on hover ---- */
.wp-block-button__link:hover,
.wp-block-button__link:focus {
	background-color: var(--wp--preset--color--iron-gall-ink);
	color: var(--wp--preset--color--vellum);
}