/**
 * Costa Estates — the area guide. Tidewater edition.
 *
 * A long editorial page, loaded only where [costa_estates_guide] renders. It
 * depends on costa-estates.css for the tokens, the typefaces and the base
 * controls, and adds nothing to any other page on the site. The design rules
 * it follows are in docs/DESIGN.md ("Area guide"): a slate cover with the
 * display heading, a white sticky contents strip with clay numbers, big
 * outlined Fraunces section numerals, figures drawn in sea / clay / hairline /
 * ink, town cards on the property-card rules, and hairline FAQ disclosures.
 *
 * Two structural rules carry the whole layout, and breaking either one is how
 * this page goes wrong:
 *
 * 1. ONE BLEED, ONE GUTTER. `.cse-guide__bleed` is the only element that reads
 *    the viewport. Every section inside it is therefore already full-viewport
 *    wide, and insets its own content with a padding derived from its OWN width
 *    (50%), never from vw. That is what keeps every heading, every band edge and
 *    every table on one column at any width and any browser zoom.
 *
 * 2. NEVER put `overflow-x: clip` on an ancestor of the bleed. An element that
 *    clips its overflow clips the child trying to escape it, which silently
 *    boxes the whole page back to the theme's container. The 100vw overshoot
 *    is clipped at the ROOT instead.
 *
 * Colour: every value resolves to a design token or a color-mix() of tokens.
 * There is no hex literal in this file, so the palette switches with the rest
 * of the plugin. No text is set in capitals anywhere; eyebrows are sentence
 * case with a short clay rule in front.
 */

/* ============================================================ page + bleed */

/*
 * The theme's page heading, suppressed. The guide opens on its own full-bleed
 * cover carrying the <h1>; Astra is handled properly through its own filter in
 * PageChrome and this catches themes with no equivalent switch.
 */
.cse-guide-page .entry-title,
.cse-guide-page .page-title {
	display: none;
}

/*
 * Close the band of page background above the cover and below the closing band.
 * Two selectors because Astra sets this from its customizer as
 * `.ast-plain-container.ast-no-sidebar #primary`, 1,2,0, which no number of
 * classes can outrank; the second borrows the same id to win at 1,3,0.
 */
.cse-guide-page .site-content .content-area,
.cse-guide-page .site-content .content-area#primary {
	margin-top: 0;
	margin-bottom: 0;
}

/* Scoped to this page only, so no other page has its root overflow touched. */
html:has(> body.cse-guide-page) {
	overflow-x: clip;
}

/*
 * Smooth scrolling only while the contents strip is being used, so a jump from
 * the strip glides but every other scroll (find-in-page, a script, a capture
 * tool returning to the top of a 50,000px page) is instant.
 */
@media (prefers-reduced-motion: no-preference) {
	html:has(> body.cse-guide-page .cse-guide__contents:is(:hover, :focus-within)) {
		scroll-behavior: smooth;
	}
}

.cse-guide {
	/*
	 * The measure for full-width furniture: tables, card grids, the map. It is
	 * the site's page column (DESIGN.md "Page edge"), so the guide's content
	 * edge lines up with Astra's header and footer on desktop.
	 */
	--cse-guide-max: var(--cse-page-max, 1200px);

	/* The measure for running prose. Roughly 70 characters at this size. */
	--cse-guide-text: 40rem;

	/*
	 * DESIGN.md "Page edge": Astra's .ast-container gutter, 20px from the
	 * screen on phones and tablets, like the theme's own page title.
	 */
	--cse-gutter: var(--cse-page-gutter, 20px);

	/*
	 * The one inset every band shares; see rule 1 above. The site-wide band
	 * pad, max(20px, (100vw - 1200px) / 2); every section is exactly the
	 * bleed's 100vw wide, so this equals the percentage form of rule 1.
	 */
	--cse-guide-inset: var(--cse-band-pad, max(var(--cse-gutter), calc(50% - var(--cse-guide-max) / 2)));

	/* Vertical rhythm: DESIGN.md section rhythm for bands, a step for inside. */
	--cse-guide-band: clamp(3rem, 7vw, 6rem);
	--cse-guide-gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	--cse-guide-numeral: clamp(5.5rem, 3rem + 6.5vw, 10rem);

	/* The ground a section paints; panels inside read it to pick a contrast. */
	--cse-guide-ground: var(--cse-surface);
	--cse-guide-panel: var(--cse-surface-alt);

	/*
	 * Secondary text. --cse-muted clears 4.5:1 on white but lands at 4.44:1 on
	 * limestone, so every limestone ground (sections and panels) swaps it for
	 * the body text colour. Use this, never --cse-muted directly.
	 */
	--cse-guide-quiet: var(--cse-muted);

	/* Local fallbacks for the base stylesheet's derived values. */
	--cse-guide-hairline: var(--cse-hairline, 1px solid var(--cse-line));
	--cse-guide-ease: var(--cse-ease, cubic-bezier(0.2, 0.7, 0.2, 1));
	--cse-guide-rule: color-mix(in srgb, var(--cse-ink) 72%, transparent);

	/* Figure palette: sea, terracotta, hairline, ink. Nothing else. */
	--cse-map-sea: color-mix(in srgb, var(--cse-primary) 9%, var(--cse-surface));
	--cse-map-wave: color-mix(in srgb, var(--cse-primary) 32%, transparent);
	--cse-map-ridge: color-mix(in srgb, var(--cse-primary) 26%, var(--cse-surface-alt));
	--cse-map-ridge-front: color-mix(in srgb, var(--cse-primary) 72%, var(--cse-slate));
	--cse-chart-rain: color-mix(in srgb, var(--cse-primary) 34%, var(--cse-surface));
	--cse-chart-band: color-mix(in srgb, var(--cse-clay) 17%, transparent);

	color: var(--cse-text);
	font-family: var(--cse-font);
	font-size: clamp(16px, 0.96rem + 0.2vw, 1.0625rem);
	line-height: 1.65;
}

/*
 * Static fallbacks for the derived colours, for browsers without color-mix().
 * A custom property holding an unsupported function is only rejected at use
 * time, so these are swapped in wholesale rather than declared first.
 */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.cse-guide {
		--cse-map-sea: var(--cse-panel-tint);
		--cse-map-wave: var(--cse-line);
		--cse-map-ridge: var(--cse-panel-tint);
		--cse-map-ridge-front: var(--cse-primary);
		--cse-chart-rain: var(--cse-panel-tint);
		--cse-chart-band: var(--cse-surface-alt);
		--cse-guide-rule: var(--cse-ink);
	}
}

.cse-guide__bleed {
	margin-inline: calc(50% - 50vw);
	max-width: 100vw;
}

/*
 * Theme defence. Themes style bare headings, lists and links with capitals,
 * tracking and their own faces; inside the guide the display face and
 * sentence case win. Low specificity on purpose, so every rule below that
 * names a class overrides it.
 */
.cse-guide :is(h1, h2, h3, h4) {
	font-family: var(--cse-font-display);
	font-optical-sizing: auto;
	text-transform: none;
	letter-spacing: normal;
}

.cse-guide :is(p, dt, dd, li, th, td, summary, figcaption) {
	text-transform: none;
}

/*
 * Every section is already viewport-wide. This is the ONE inset, and it is a
 * percentage of the section's own width rather than of the viewport, so browser
 * zoom cannot make the two paddings exceed the box.
 */
.cse-guide .cse-section {
	position: relative;
	padding-block: var(--cse-guide-band);
	padding-inline: var(--cse-guide-inset);
	background: var(--cse-guide-ground);
	scroll-margin-top: 4.5rem;
}

/* The bled bands paint their own ground and manage their own padding. */
.cse-guide .cse-section--cover,
.cse-guide .cse-section--next {
	padding: 0;
	background: var(--cse-slate);
}

/*
 * Alternating limestone ground. Named rather than nth-child so dropping a
 * section with the shortcode's `sections` attribute cannot invert the whole
 * rhythm below it. Panels inside a limestone section flip to white.
 */
.cse-guide .cse-section--climate,
.cse-guide .cse-section--life,
.cse-guide .cse-section--access,
.cse-guide .cse-section--process,
.cse-guide .cse-section--rules,
.cse-guide .cse-section--faq {
	--cse-guide-ground: var(--cse-surface-alt);
	--cse-guide-panel: var(--cse-surface);
	--cse-guide-quiet: var(--cse-text);
}

/* Panels may be limestone; their secondary text follows suit. */
.cse-guide__aside,
.cse-guide__example,
.cse-guide__door,
.cse-guide__note,
.cse-guide__route,
.cse-guide__risk {
	--cse-guide-quiet: var(--cse-text);
}

/*
 * The reading number: a big outlined Fraunces numeral in the hairline colour,
 * top right of each numbered section. Drawn from the wrapper's own data
 * attribute, so the sequence is whatever the shell computed and cannot drift
 * from the contents strip. Pure decoration: pseudo-element content is not
 * read out, and the contents strip carries the same number as text.
 */
.cse-guide .cse-section[data-cse-number]::before {
	content: attr(data-cse-number);
	position: absolute;
	top: calc(var(--cse-guide-band) - 0.14em);
	right: var(--cse-guide-inset);
	color: transparent;
	font-family: var(--cse-font-display);
	font-optical-sizing: auto;
	font-size: var(--cse-guide-numeral);
	font-weight: 300;
	font-variant-numeric: lining-nums tabular-nums;
	line-height: 0.8;
	letter-spacing: -0.03em;
	-webkit-text-stroke: 1.5px var(--cse-line);
	pointer-events: none;
	user-select: none;
}

/*
 * On limestone the hairline colour is only a shade off the ground; a slightly
 * heavier stroke keeps the outline present without changing its colour.
 */
.cse-guide .cse-section--climate[data-cse-number]::before,
.cse-guide .cse-section--life[data-cse-number]::before,
.cse-guide .cse-section--access[data-cse-number]::before,
.cse-guide .cse-section--process[data-cse-number]::before,
.cse-guide .cse-section--rules[data-cse-number]::before,
.cse-guide .cse-section--faq[data-cse-number]::before {
	-webkit-text-stroke-width: 2.5px;
}

/*
 * Below the width where it clears the heading, the numeral stops floating and
 * becomes the first line of the section, above the eyebrow.
 */
@media (max-width: 61.99em) {
	.cse-guide .cse-section[data-cse-number]::before {
		position: static;
		display: block;
		margin: 0 0 1rem -0.04em;
		font-size: clamp(4.5rem, 3rem + 6vw, 6rem);
	}
}

/* ================================================================== cover */

.cse-guide__cover {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(88vh, 50rem);
	padding-block: clamp(5rem, 3rem + 7vw, 9rem) clamp(2.5rem, 1.5rem + 3vw, 4rem);
	padding-inline: var(--cse-guide-inset);
	overflow: hidden;
	background: var(--cse-slate);
	color: var(--cse-on-dark);
	isolation: isolate;
}

.cse-guide__cover-media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.cse-guide__cover-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Without a photograph the band is drawn: a low terracotta sun on the horizon
 * in the upper right, tide-rings radiating from it above the line, and fine
 * swells ruled across the sea below it, fading out before they reach the type.
 * It is the cover's composition, not a placeholder for one, and it uses only
 * the on-dark, clay-soft and slate tokens.
 */
.cse-guide__cover:not(.cse-guide__cover--photo)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(circle at 84% 24%, var(--cse-clay-soft) 0 2.75rem, transparent calc(2.75rem + 1px)),
		repeating-radial-gradient(circle at 84% 24%, transparent 0 2.4rem, color-mix(in srgb, var(--cse-on-dark) 11%, transparent) 2.4rem calc(2.4rem + 1px));
	-webkit-mask-image: radial-gradient(circle at 84% 24%, black 0 16rem, transparent 32rem);
	mask-image: radial-gradient(circle at 84% 24%, black 0 16rem, transparent 32rem);
	pointer-events: none;
}

/* The sea: opaque slate from the horizon down, so the sun sets into it. */
.cse-guide__cover:not(.cse-guide__cover--photo)::after {
	content: "";
	position: absolute;
	inset: 24% 0 0;
	z-index: -1;
	border-top: 1px solid color-mix(in srgb, var(--cse-on-dark) 22%, transparent);
	background:
		linear-gradient(to right, var(--cse-slate) 58%, transparent 92%),
		linear-gradient(to bottom, transparent, var(--cse-slate) 60%),
		repeating-linear-gradient(to bottom, transparent 0 0.875rem, color-mix(in srgb, var(--cse-on-dark) 9%, transparent) 0.875rem calc(0.875rem + 1px)),
		var(--cse-slate);
	-webkit-mask-image: linear-gradient(to right, transparent 30%, black 70%);
	mask-image: linear-gradient(to right, transparent 30%, black 70%);
	pointer-events: none;
}

@media (max-width: 47.99em) {
	.cse-guide__cover:not(.cse-guide__cover--photo)::before {
		background:
			radial-gradient(circle at 86% 9%, var(--cse-clay-soft) 0 1.5rem, transparent calc(1.5rem + 1px)),
			repeating-radial-gradient(circle at 86% 9%, transparent 0 1.6rem, color-mix(in srgb, var(--cse-on-dark) 9%, transparent) 1.6rem calc(1.6rem + 1px));
		-webkit-mask-image: radial-gradient(circle at 86% 9%, black 0 7rem, transparent 14rem);
		mask-image: radial-gradient(circle at 86% 9%, black 0 7rem, transparent 14rem);
	}

	.cse-guide__cover:not(.cse-guide__cover--photo)::after {
		inset: 9% 0 auto;
		height: 12rem;
		background:
			linear-gradient(to bottom, transparent, var(--cse-slate) 90%),
			repeating-linear-gradient(to bottom, transparent 0 0.75rem, color-mix(in srgb, var(--cse-on-dark) 8%, transparent) 0.75rem calc(0.75rem + 1px)),
			var(--cse-slate);
		-webkit-mask-image: linear-gradient(to right, transparent 40%, black 85%);
		mask-image: linear-gradient(to right, transparent 40%, black 85%);
	}
}

/*
 * With a photograph: the legibility floor, painted on the BAND rather than on
 * the image, so the agency's choice of picture can never make the title
 * unreadable. A flat wash, a bottom ramp and a pool of shade under the words.
 */
.cse-guide__cover--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(115% 95% at 10% 100%, color-mix(in srgb, var(--cse-slate) 94%, transparent) 0%, transparent 70%),
		linear-gradient(to top,
			color-mix(in srgb, var(--cse-slate) 90%, transparent) 0%,
			color-mix(in srgb, var(--cse-slate) 62%, transparent) 38%,
			color-mix(in srgb, var(--cse-slate) 22%, transparent) 68%,
			transparent 100%),
		color-mix(in srgb, var(--cse-slate) 8%, transparent);
}

/*
 * The wedge that carries the type, anchored left where the words are, so the
 * right of the frame stays sunny.
 */
.cse-guide__cover--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to right,
		color-mix(in srgb, var(--cse-slate) 94%, transparent) 0%,
		color-mix(in srgb, var(--cse-slate) 88%, transparent) 32%,
		color-mix(in srgb, var(--cse-slate) 62%, transparent) 56%,
		color-mix(in srgb, var(--cse-slate) 22%, transparent) 78%,
		transparent 94%);
	pointer-events: none;
}

/* On a phone the text runs the full width, so the wedge becomes a veil. */
@media (max-width: 47.99em) {
	.cse-guide__cover--photo::before {
		background: linear-gradient(to top,
			color-mix(in srgb, var(--cse-slate) 93%, transparent) 0%,
			color-mix(in srgb, var(--cse-slate) 80%, transparent) 55%,
			color-mix(in srgb, var(--cse-slate) 66%, transparent) 100%);
	}
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.cse-guide__cover--photo::before,
	.cse-guide__cover--photo::after {
		background: var(--cse-slate);
		opacity: 0.7;
	}

	.cse-guide__cover:not(.cse-guide__cover--photo)::before,
	.cse-guide__cover:not(.cse-guide__cover--photo)::after {
		display: none;
	}
}

.cse-guide__cover-inner {
	position: relative;
	width: 100%;
}

/* A soft shadow under the type, only where a photograph sits behind it. */
.cse-guide__cover--photo .cse-guide__cover-inner {
	text-shadow: 0 1px 2px rgb(0 0 0 / 25%), 0 2px 18px rgb(0 0 0 / 30%);
}

.cse-guide .cse-guide__cover-title {
	max-width: 13em;
	margin: 0 0 1.5rem;
	color: var(--cse-on-dark);
	font-family: var(--cse-font-display);
	font-optical-sizing: auto;
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

/* The one italic word, in the cover's warm accent. */
.cse-guide .cse-guide__cover-title em {
	color: var(--cse-clay-soft);
	font-style: italic;
	font-weight: 400;
}

.cse-guide__cover-title-sub {
	display: block;
	max-width: 22em;
	margin-top: 0.75em;
	color: color-mix(in srgb, var(--cse-on-dark) 84%, transparent);
	font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: -0.005em;
}

.cse-guide__cover-standfirst {
	max-width: 38rem;
	margin: 0 0 clamp(2.5rem, 2rem + 2vw, 4rem);
	color: color-mix(in srgb, var(--cse-on-dark) 86%, transparent);
	font-size: clamp(17px, 1rem + 0.3vw, 1.1875rem);
	line-height: 1.6;
}

/*
 * The five figures: Fraunces numerals in clay-soft over small labels, each
 * column opened by a hairline, the row running the full measure.
 */
.cse-guide .cse-guide__cover-figures {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem 1rem;
	margin: 0 0 1.75rem;
	padding: 0;
	list-style: none;
}

@media (min-width: 48em) {
	.cse-guide .cse-guide__cover-figures {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2rem 1.5rem;
	}
}

@media (min-width: 62em) {
	.cse-guide .cse-guide__cover-figures {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

.cse-guide .cse-guide__cover-figures li {
	margin: 0;
	padding-top: 1rem;
	border-top: 1px solid color-mix(in srgb, var(--cse-on-dark) 24%, transparent);
}

/* Five into two leaves one alone; give it the whole row. */
@media (max-width: 47.99em) {
	.cse-guide .cse-guide__cover-figures li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

.cse-guide__cover-figure {
	display: block;
	color: var(--cse-clay-soft);
	font-family: var(--cse-font-display);
	font-optical-sizing: auto;
	font-size: clamp(2.125rem, 1.6rem + 1.6vw, 3rem);
	font-weight: 400;
	font-variant-numeric: lining-nums tabular-nums;
	line-height: 1;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.cse-guide__cover-unit {
	display: block;
	max-width: 14rem;
	margin-top: 0.6rem;
	color: color-mix(in srgb, var(--cse-on-dark) 80%, transparent);
	font-size: max(14px, 0.875rem);
	line-height: 1.45;
}

.cse-guide__cover-note {
	margin: 0;
	color: color-mix(in srgb, var(--cse-on-dark) 72%, transparent);
	font-size: max(13px, 0.8125rem);
}

/* ============================================================== eyebrows */

/*
 * One eyebrow for the whole page: 13px, 600, sentence case, clay, preceded by
 * a 20 x 1px clay rule. On dark grounds it switches to clay-soft.
 */
.cse-guide__eyebrow,
.cse-guide__cover-eyebrow,
.cse-guide__myth-label {
	display: flex;
	/*
	 * Top, not centre: when an eyebrow wraps on a phone the rule must stay
	 * beside the first line, not float at the middle of the block. The rule
	 * is then dropped by half a line (line-height 1.3 / 2) to sit where
	 * centring would have put it on a single line.
	 */
	align-items: flex-start;
	gap: 0.625rem;
	margin: 0 0 0.875rem;
	color: var(--cse-clay);
	font-family: var(--cse-font);
	font-size: max(13px, 0.8125rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.01em;
	text-transform: none;
}

.cse-guide__eyebrow::before,
.cse-guide__cover-eyebrow::before,
.cse-guide__myth-label::before {
	content: "";
	flex: 0 0 1.25rem;
	height: 1px;
	margin-top: calc(0.65em - 0.5px);
	background: currentColor;
}

.cse-guide__cover-eyebrow {
	margin-bottom: 1.5rem;
}

.cse-guide__cover-eyebrow,
.cse-guide__myth-label,
.cse-guide__verdict .cse-guide__eyebrow,
.cse-guide__next .cse-guide__eyebrow {
	color: var(--cse-clay-soft);
}

/* ======================================================== contents / nav */

/*
 * A white bar with a hairline, stuck to the top of the viewport once the cover
 * has scrolled away. Numbers in clay, labels in text colour, the section being
 * read in ink with a sea underline, and a sea progress line along the foot.
 */
.cse-guide__contents {
	position: sticky;
	top: 0;
	z-index: 20;
	border-bottom: var(--cse-guide-hairline);
	background: var(--cse-surface);
	color: var(--cse-text);
}

@media (min-width: 783px) {
	.admin-bar .cse-guide__contents {
		top: 32px;
	}
}

.cse-guide__contents-inner {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	max-width: var(--cse-guide-max);
	margin-inline: auto;
	padding-inline: var(--cse-gutter);
	/*
	 * content-box, so the 74rem is the width of the CONTENTS and the gutter
	 * sits outside it, exactly as in every section: the strip's first link
	 * and every section heading share one left edge at any width.
	 */
	box-sizing: content-box;
}

.cse-guide__contents-label {
	flex: 0 0 auto;
	margin: 0;
	padding-right: 1rem;
	border-right: var(--cse-guide-hairline);
	color: var(--cse-ink);
	font-family: var(--cse-font-display);
	font-size: max(16px, 1rem);
	font-style: italic;
	font-weight: 400;
	line-height: 1.5rem;
	white-space: nowrap;
}

@media (max-width: 61.99em) {
	.cse-guide__contents-label {
		display: none;
	}
}

/*
 * A horizontal scroller rather than a wrap-to-three-lines bar. Thirteen labels
 * will not fit on a phone at any size that is still readable, and a sticky bar
 * that grows to a third of the screen is worse than one you swipe. Its links
 * are focusable, so the strip is keyboard-scrollable without a tabindex of
 * its own.
 *
 * The track is the positioning box for the edge fades and the scroll buttons.
 * It, not the list, reaches into the right-hand gutter, so the list's last
 * link can scroll clear of the column edge and the "later" button sits on it.
 */
.cse-guide__contents-track {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	margin-right: calc(-1 * var(--cse-gutter));
}

.cse-guide .cse-guide__contents-list {
	display: flex;
	flex: 1 1 auto;
	gap: 0;
	min-width: 0;
	margin: 0;
	padding: 0 var(--cse-gutter) 0 0;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	scroll-padding-inline: 3.5rem;
}

.cse-guide .cse-guide__contents-list::-webkit-scrollbar {
	display: none;
}

.cse-guide .cse-guide__contents-list li {
	flex: 0 0 auto;
	margin: 0;
}

.cse-guide .cse-guide__contents-list a {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	min-height: 3.5rem;
	padding: 0 0.5rem;
	color: var(--cse-text);
	font-family: var(--cse-font);
	font-size: max(15px, 0.9375rem);
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	box-shadow: inset 0 -2px 0 transparent;
	transition: color 180ms var(--cse-guide-ease), box-shadow 180ms var(--cse-guide-ease);
}

/* With no label in front, pull the first link's text onto the gutter line. */
@media (max-width: 61.99em) {
	.cse-guide__contents-track {
		margin-left: -0.5rem;
	}
}

@media (max-width: 47.99em) {
	.cse-guide__contents-track {
		margin-left: -0.5rem;
	}

	.cse-guide .cse-guide__contents-list a {
		min-height: 3rem;
		padding: 0 0.5rem;
	}
}

/*
 * Overflow cues, switched on by guide.js through data-more-before/-after on
 * the track: a surface-coloured fade over whichever end has links out of
 * sight, and on wider screens a scroll button standing in that fade. On a
 * phone the fade and the half-cut link are the cue, and a swipe is the
 * control; two 44px buttons there would cost a fifth of the strip.
 */
.cse-guide__contents-track::before,
.cse-guide__contents-track::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 1;
	width: 3rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity 180ms var(--cse-guide-ease);
}

.cse-guide__contents-track::before {
	left: 0;
	background: linear-gradient(to right, var(--cse-surface) 15%, color-mix(in srgb, var(--cse-surface) 0%, transparent));
}

.cse-guide__contents-track::after {
	right: 0;
	background: linear-gradient(to left, var(--cse-surface) 15%, color-mix(in srgb, var(--cse-surface) 0%, transparent));
}

.cse-guide__contents-track[data-more-before]::before,
.cse-guide__contents-track[data-more-after]::after {
	opacity: 1;
}

.cse-guide__contents-arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: var(--cse-guide-hairline);
	border-radius: var(--cse-radius);
	background: var(--cse-surface);
	color: var(--cse-ink);
	cursor: pointer;
	translate: 0 -50%;
	transition: background-color 180ms var(--cse-guide-ease), border-color 180ms var(--cse-guide-ease), opacity 180ms var(--cse-guide-ease);
}

.cse-guide__contents-arrow[hidden] {
	display: none;
}

.cse-guide__contents-arrow svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cse-guide__contents-arrow:hover {
	border-color: color-mix(in srgb, var(--cse-ink) 40%, transparent);
	background: var(--cse-surface-alt);
}

.cse-guide__contents-arrow--prev {
	left: 0;
}

/* Inside the gutter reach, so it lines up with the column's right edge. */
.cse-guide__contents-arrow--next {
	right: var(--cse-gutter);
}

/* At an end the button stays put, dimmed, so focus is never dropped. */
.cse-guide__contents-arrow[aria-disabled="true"] {
	opacity: 0;
	pointer-events: none;
}

.cse-guide__contents-arrow[aria-disabled="true"]:focus-visible {
	opacity: 0.4;
}

.cse-guide__contents-track[data-more-after]::after {
	width: calc(var(--cse-gutter) + 4.5rem);
}

.cse-guide__contents-track:has(.cse-guide__contents-arrow--prev:not([hidden])[aria-disabled="false"])::before {
	width: 4.5rem;
}

@media (max-width: 47.99em) {
	.cse-guide__contents-arrow {
		display: none;
	}

	.cse-guide__contents-track[data-more-after]::after {
		width: calc(var(--cse-gutter) + 2rem);
	}

	.cse-guide__contents-track:has(.cse-guide__contents-arrow--prev:not([hidden])[aria-disabled="false"])::before {
		width: 2.5rem;
	}
}

.cse-guide .cse-guide__contents-list a:hover {
	color: var(--cse-ink);
}

.cse-guide .cse-guide__contents-list a:focus-visible {
	outline-offset: -2px;
}

/* Set by guide.js as each section passes under the bar. */
.cse-guide .cse-guide__contents-list a[aria-current="true"] {
	color: var(--cse-ink);
	box-shadow: inset 0 -2px 0 var(--cse-primary);
}

.cse-guide__contents-num {
	color: var(--cse-clay);
	font-family: var(--cse-font-display);
	font-size: max(15px, 0.9375rem);
	font-weight: 500;
	font-variant-numeric: lining-nums tabular-nums;
}

.cse-guide__progress {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 2px;
	background: var(--cse-clay);
	transform: scaleX(var(--cse-progress, 0));
	transform-origin: left center;
}

/* ============================================================== headings */

.cse-guide__head {
	max-width: 46rem;
	margin-bottom: var(--cse-guide-gap);
}

/* Leave the floating numeral its corner on wide screens. */
@media (min-width: 62em) {
	.cse-section[data-cse-number] > .cse-guide__head {
		max-width: min(46rem, calc(100% - 14rem));
		/* Whatever follows the heading starts below the numeral, not beside it. */
		min-height: calc(var(--cse-guide-numeral) * 0.72);
	}
}

.cse-guide .cse-guide__title {
	max-width: 22em;
	margin: 0;
	color: var(--cse-ink);
	font-family: var(--cse-font-display);
	font-optical-sizing: auto;
	font-size: clamp(1.875rem, 3.2vw, 2.5rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.cse-guide__standfirst {
	max-width: var(--cse-guide-text);
	margin: 1.25rem 0 0;
	color: var(--cse-text);
	font-size: clamp(17px, 1rem + 0.3vw, 1.1875rem);
	line-height: 1.6;
}

.cse-guide .cse-guide__sub {
	margin: 2.5rem 0 0.875rem;
	color: var(--cse-ink);
	font-family: var(--cse-font-display);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.cse-guide .cse-guide__prose > .cse-guide__sub:first-child {
	margin-top: 0;
}

/* A wide sub-heading opens a new movement inside a section: hairline above. */
.cse-guide .cse-guide__sub--wide {
	max-width: none;
	margin-top: var(--cse-guide-band);
	padding-top: 1.5rem;
	border-top: var(--cse-guide-hairline);
}

/* ================================================================= prose */

.cse-guide__prose {
	max-width: var(--cse-guide-text);
}

.cse-guide__prose p {
	margin: 0 0 1.25rem;
}

.cse-guide__prose p:last-child {
	margin-bottom: 0;
}

/* The lede: the first paragraph set in the display face, like a magazine dek. */
.cse-guide__lede {
	color: var(--cse-ink);
	font-family: var(--cse-font-display);
	font-optical-sizing: auto;
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	font-weight: 350;
	line-height: 1.45;
	letter-spacing: -0.005em;
}

.cse-guide__prose .cse-guide__lede {
	margin-bottom: 1.5rem;
}

.cse-guide__muted {
	color: var(--cse-guide-quiet);
	font-size: max(15px, 0.9375rem);
}

.cse-guide__caption {
	max-width: var(--cse-guide-text);
	margin: 1rem 0 0;
	color: var(--cse-guide-quiet);
	font-size: max(14px, 0.875rem);
	line-height: 1.5;
}

/*
 * Prose beside a narrower aside. The aside drops below the text on a phone;
 * `align-items: start` stops it stretching to the height of a long article.
 */
.cse-guide__split {
	display: grid;
	align-items: start;
	gap: clamp(2rem, 1rem + 4vw, 4.5rem);
	margin-top: var(--cse-guide-gap);
}

@media (min-width: 62em) {
	.cse-guide__split {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	}
}

/* After a full-width panel, a split opens a new movement: give it a band. */
.cse-guide :is(.cse-guide__verdict, .cse-guide__status, .cse-guide__myth, .cse-guide__note, .cse-guide__tablewrap) + .cse-guide__split {
	margin-top: calc(var(--cse-guide-band) * 0.75);
}

.cse-guide__aside {
	padding: clamp(1.5rem, 1rem + 1.5vw, 2rem);
	border: 1px solid transparent;
	border-radius: var(--cse-radius-lg);
	background: var(--cse-guide-panel);
	color: var(--cse-text);
	font-size: max(15px, 0.9375rem);
	line-height: 1.6;
}

/* White panels on limestone take a hairline so their edge is drawn, not implied. */
.cse-guide .cse-section--climate .cse-guide__aside,
.cse-guide .cse-section--life .cse-guide__aside,
.cse-guide .cse-section--access .cse-guide__aside,
.cse-guide .cse-section--rules .cse-guide__aside {
	border-color: var(--cse-line);
}

.cse-guide__aside--warn,
.cse-guide .cse-section .cse-guide__aside--warn {
	border-color: color-mix(in srgb, var(--cse-clay) 38%, transparent);
	background: color-mix(in srgb, var(--cse-clay) 5%, var(--cse-surface));
}

.cse-guide__aside--warn .cse-guide__aside-title::before {
	content: "";
	display: block;
	width: 1.25rem;
	height: 1px;
	margin-bottom: 0.875rem;
	background: var(--cse-clay);
}

.cse-guide__aside p {
	margin: 0 0 1rem;
}

.cse-guide__aside p:last-child {
	margin-bottom: 0;
}

.cse-guide .cse-guide__aside-title {
	margin: 0 0 0.75rem;
	color: var(--cse-ink);
	font-family: var(--cse-font-display);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.005em;
}

.cse-guide .cse-guide__aside * + .cse-guide__aside-title {
	margin-top: 1.75rem;
}

.cse-guide__aside-media {
	margin: 0 0 1.25rem;
	border-radius: var(--cse-radius);
	overflow: hidden;
}

.cse-guide__aside-media img {
	display: block;
	width: 100%;
	height: auto;
}

.cse-guide .cse-guide__ticks,
.cse-guide .cse-guide__plain {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.cse-guide .cse-guide__ticks li,
.cse-guide .cse-guide__plain li {
	position: relative;
	margin: 0;
	padding: 0.75rem 0 0.75rem 1.5rem;
	border-top: var(--cse-guide-hairline);
	line-height: 1.55;
}

.cse-guide .cse-guide__ticks li:first-child,
.cse-guide .cse-guide__plain li:first-child {
	border-top: 0;
	padding-top: 0.25rem;
}

/* The clay rule of the eyebrow, reused as the bullet. */
.cse-guide .cse-guide__ticks li::before,
.cse-guide .cse-guide__plain li::before {
	content: "";
	position: absolute;
	top: 1.55em;
	left: 0;
	width: 0.75rem;
	height: 1px;
	background: var(--cse-clay);
}

.cse-guide .cse-guide__ticks li:first-child::before,
.cse-guide .cse-guide__plain li:first-child::before {
	top: 1.05em;
}

.cse-guide .cse-guide__ticks strong,
.cse-guide .cse-guide__plain strong {
	color: var(--cse-ink);
	font-weight: 600;
}

/* ================================================== figures, map, charts */

.cse-guide__figure {
	margin: var(--cse-guide-gap) 0 0;
}

.cse-guide__figure--map,
.cse-guide__figure--chart {
	padding: clamp(1rem, 0.5rem + 2vw, 2.25rem);
	border: var(--cse-guide-hairline);
	border-radius: var(--cse-radius-lg);
	background: var(--cse-guide-panel);
}

.cse-guide__figure--map {
	background: var(--cse-surface);
}

/*
 * Each figure carries two drawings of the same thing: a wide one, and a phone
 * one laid out in a 360-unit viewBox so it fits a phone at legible sizes with
 * nothing to scroll. Exactly one is displayed; `display: none` on the other
 * keeps it out of the accessibility tree too.
 */
.cse-guide__drawing--phone {
	display: none;
}

@media (max-width: 47.99em) {
	.cse-guide__drawing--wide {
		display: none;
	}

	.cse-guide__drawing--phone {
		display: block;
	}
}

.cse-guide__map,
.cse-guide__chart {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/*
 * SVG text is styled here rather than with presentation attributes so it picks
 * up the page's typefaces and scales with the palette.
 */
.cse-guide__map text,
.cse-guide__chart text {
	font-family: var(--cse-font);
	fill: var(--cse-ink);
}

/* ---- map ---- */

.cse-guide__map-sea {
	fill: var(--cse-map-sea);
}

.cse-guide__map-wave path {
	fill: none;
	stroke: var(--cse-map-wave);
	stroke-width: 1.5;
	stroke-linecap: round;
}

.cse-guide__map-ridge {
	fill: var(--cse-map-ridge);
}

.cse-guide__map-ridge-front {
	fill: var(--cse-map-ridge-front);
}

.cse-guide__map-snow {
	fill: var(--cse-surface);
}

.cse-guide__map-coast {
	fill: none;
	stroke: var(--cse-primary);
	stroke-width: 2.5;
}

.cse-guide__map-route {
	fill: none;
	stroke: var(--cse-clay);
	stroke-width: 3;
	stroke-dasharray: 0.5 8;
	stroke-linecap: round;
}

.cse-guide__map-city {
	fill: var(--cse-clay);
}

.cse-guide__map-city-ring {
	fill: var(--cse-surface);
	stroke: var(--cse-clay);
	stroke-width: 1.5;
}

.cse-guide__map-leader {
	stroke: var(--cse-primary);
	stroke-width: 1.5;
}

.cse-guide__map-pin {
	fill: var(--cse-surface);
	stroke: var(--cse-primary);
	stroke-width: 3;
}

.cse-guide .cse-guide__map-town,
.cse-guide .cse-guide__map-inland {
	font-family: var(--cse-font-display);
	font-size: 22px;
	font-weight: 500;
	fill: var(--cse-ink);
}

.cse-guide .cse-guide__map-small {
	font-size: 15px;
	fill: var(--cse-text);
}

.cse-guide .cse-guide__map-road {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	fill: var(--cse-clay);
}

.cse-guide .cse-guide__map-water {
	font-family: var(--cse-font-display);
	font-size: 18px;
	font-style: italic;
	letter-spacing: 0.04em;
	fill: var(--cse-primary);
}

/* ---- climograph ---- */

.cse-guide__chart-grid {
	stroke: var(--cse-line);
	stroke-width: 1;
}

.cse-guide__chart-base {
	stroke: var(--cse-guide-rule);
	stroke-width: 1.25;
}

.cse-guide__chart-rain {
	fill: var(--cse-chart-rain);
}

.cse-guide__chart-band {
	fill: var(--cse-chart-band);
}

.cse-guide__chart-line {
	fill: none;
	stroke: var(--cse-clay);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cse-guide__chart-dot {
	fill: var(--cse-surface);
	stroke: var(--cse-clay);
	stroke-width: 2;
}

.cse-guide .cse-guide__chart-axis,
.cse-guide .cse-guide__chart-value,
.cse-guide .cse-guide__chart-note {
	font-size: 15px;
	fill: var(--cse-text);
}

.cse-guide .cse-guide__chart-month {
	font-family: var(--cse-font-display);
	font-size: 18px;
	font-weight: 500;
	fill: var(--cse-ink);
}

.cse-guide .cse-guide__chart-value {
	font-variant-numeric: lining-nums tabular-nums;
}

/* ------------------------------------------------- drawings on a phone
 *
 * The phone drawings are laid out at roughly one viewBox unit per CSS pixel
 * (360 units across a 328-390px figure), so type is set here at the size it
 * should read at. The panel keeps a slim inset: the drawings carry their own
 * margins, so the figure can use nearly the full width of the screen.
 */
@media (max-width: 47.99em) {
	/*
	 * True full bleed: the panel and the drawing run edge to edge (the
	 * drawings carry their own margins), and only the caption comes back to
	 * the page's 20px edge. A half-inset drawing at 7px was neither.
	 */
	.cse-guide__figure--map,
	.cse-guide__figure--chart {
		padding: 0.75rem 0;
		/* Bleed the panel to the screen edges: every unit of width is type size. */
		margin-inline: calc(-1 * var(--cse-gutter));
		border-inline: 0;
		border-radius: 0;
	}

	.cse-guide__figure--map .cse-guide__caption,
	.cse-guide__figure--chart .cse-guide__caption {
		padding-inline: var(--cse-gutter);
	}

	.cse-guide .cse-guide__map--phone .cse-guide__map-town,
	.cse-guide .cse-guide__map--phone .cse-guide__map-inland { font-size: 15px; }

	/* 14 units reads at 13.4px on a 360px screen: the meta floor, never below. */
	.cse-guide .cse-guide__map--phone .cse-guide__map-small { font-size: 14px; }

	.cse-guide__map--phone .cse-guide__map-pin { stroke-width: 2.25; }
	.cse-guide__map--phone .cse-guide__map-coast { stroke-width: 2; }
	.cse-guide__map--phone .cse-guide__map-leader { stroke-width: 1; }

	.cse-guide__map--phone .cse-guide__map-route {
		stroke-width: 2.5;
		stroke-dasharray: 0.5 6;
	}

	.cse-guide .cse-guide__chart--phone .cse-guide__chart-month { font-size: 15px; }
	.cse-guide .cse-guide__chart--phone .cse-guide__chart-value,
	.cse-guide .cse-guide__chart--phone .cse-guide__chart-axis,
	.cse-guide .cse-guide__chart--phone .cse-guide__chart-note { font-size: 14px; }

	.cse-guide__chart--phone .cse-guide__chart-line { stroke-width: 2; }
	.cse-guide__chart--phone .cse-guide__chart-dot { stroke-width: 1.5; }
}

/* ============================================================ at a glance */

.cse-guide__glance {
	max-width: var(--cse-guide-max);
	margin: var(--cse-guide-gap) 0 0;
	border-bottom: var(--cse-guide-hairline);
}

.cse-guide__glance-row {
	display: grid;
	gap: 0.25rem 2rem;
	padding: 1rem 0;
	border-top: var(--cse-guide-hairline);
}

@media (min-width: 48em) {
	.cse-guide__glance {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(2rem, 4vw, 4rem);
	}

	.cse-guide__glance-row {
		grid-template-columns: 9.5rem minmax(0, 1fr);
		align-items: baseline;
	}
}

.cse-guide__glance dt {
	margin: 0;
	color: var(--cse-ink);
	font-family: var(--cse-font-display);
	font-size: max(18px, 1.125rem);
	font-weight: 500;
	line-height: 1.3;
}

.cse-guide__glance dd {
	margin: 0;
	color: var(--cse-text);
	font-size: max(15px, 0.9375rem);
}

/* ================================================================= towns */

/* DESIGN.md card grid: minmax(300px, 1fr), 24px gap, 32 from 1200px. */
.cse-guide .cse-guide__towns {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 1.5rem;
	margin: var(--cse-guide-gap) 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 75em) {
	.cse-guide .cse-guide__towns {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2rem;
	}
}

.cse-guide .cse-guide__towns-strip + .cse-guide__caption {
	margin-top: 1.5rem;
}

/*
 * Phones: a swipe strip. The strip bleeds to both screen edges and pads back
 * to the page edge, so the first card starts on the 20px line and the next one
 * visibly continues past the screen. Snap per card; a soft fade on the right
 * edge says there is more, and the peek of the next card shows it.
 */
@media (max-width: 47.99em) {
	.cse-guide__towns-strip {
		margin: var(--cse-guide-gap) calc(-1 * var(--cse-gutter)) 0;
		padding: 0.25rem var(--cse-gutter) 1.25rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--cse-gutter);
		scrollbar-width: thin;
		scrollbar-color: var(--cse-line) transparent;
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.25rem), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 1.25rem), transparent);
	}

	.cse-guide__towns-strip:focus-visible {
		outline: 2px solid var(--cse-primary);
		outline-offset: -2px;
	}

	/*
	 * Top-aligned, not stretched: an equal-height row made every card as tall
	 * as the longest (972px on an 844px screen) and left a blank band in the
	 * shorter ones. Each card is its own height; the clamped description
	 * below keeps each one within a screen.
	 */
	.cse-guide .cse-guide__towns {
		display: flex;
		align-items: flex-start;
		gap: 1rem;
		width: max-content;
		margin: 0;
	}

	.cse-guide__towns > .cse-guide__town {
		flex: 0 0 auto;
		width: calc(100vw - 2 * var(--cse-gutter) - 2.5rem);
		max-width: 22rem;
		scroll-snap-align: start;
	}
}

/* Property-card rules: white, hairline, 10px corners, no resting shadow. */
.cse-guide__town {
	display: flex;
	flex-direction: column;
	margin: 0;
	border: var(--cse-guide-hairline);
	border-radius: var(--cse-radius-lg);
	background: var(--cse-surface);
	overflow: hidden;
}

.cse-guide__town-media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--cse-surface-alt);
	overflow: hidden;
}

/* Only a clip wants the dark matte behind it. */
.cse-guide__town-media:has(video) {
	background: var(--cse-slate);
}

.cse-guide__town-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * The drawn state. Not a placeholder: a limestone sky over a sea-mist band
 * ruled with fine swells, and the emblem standing on the horizon. Same box as
 * a photograph, so a card with a picture and a card without sit level.
 */
.cse-guide__town-media--drawn {
	--cse-emblem-accent: var(--cse-clay);
	background:
		repeating-linear-gradient(to bottom,
			transparent 0 1rem,
			color-mix(in srgb, var(--cse-primary) 10%, transparent) 1rem calc(1rem + 1px)),
		linear-gradient(to bottom, transparent 70%, color-mix(in srgb, var(--cse-primary) 6%, var(--cse-surface-alt)) 70%),
		var(--cse-surface-alt);
	background-size: 100% 30%, auto, auto;
	background-position: 0 100%, 0 0, 0 0;
	background-repeat: no-repeat;
}

.cse-guide__town-media--drawn::after {
	content: "";
	position: absolute;
	top: 70%;
	right: 0;
	left: 0;
	height: 1px;
	background: color-mix(in srgb, var(--cse-primary) 40%, transparent);
}

.cse-guide__emblem {
	position: absolute;
	bottom: 30%;
	left: 50%;
	z-index: 1;
	width: clamp(6rem, 4rem + 6vw, 8.5rem);
	height: auto;
	color: var(--cse-primary);
	/* The emblem's ground line is 80% down its box; stand it on the horizon. */
	translate: -50% 20%;
}

/*
 * On a phone the cards are one column, so there is no neighbour to sit level
 * with, and a 4:3 box round a small drawing is a screen of sky. A letterbox
 * keeps the scene and gives the height back to the text.
 */
@media (max-width: 47.99em) {
	.cse-guide__town-media--drawn {
		aspect-ratio: 5 / 2;
	}

	.cse-guide__town-media--drawn .cse-guide__emblem {
		width: 6.5rem;
	}
}

.cse-guide__town-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.25rem;
}

@media (min-width: 48em) {
	.cse-guide__town-body {
		padding: 1.5rem;
	}
}

.cse-guide .cse-guide__town-tag {
	margin: 0 0 0.375rem;
	color: var(--cse-clay);
	font-size: max(13px, 0.8125rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.01em;
}

.cse-guide .cse-guide__town-name {
	margin: 0 0 1.125rem;
	color: var(--cse-ink);
	font-family: var(--cse-font-display);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

/* Key facts: Fraunces figures over small labels, divided by hairlines. */
.cse-guide__town-stats {
	display: grid;
	grid-template-columns: repeat(3, auto);
	margin: 0 0 1.25rem;
	border-block: var(--cse-guide-hairline);
}

.cse-guide__town-stats > div {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: 0.25rem;
	padding: 0.875rem 0.75rem;
	border-left: var(--cse-guide-hairline);
}

.cse-guide__town-stats > div:first-child {
	padding-left: 0;
	border-left: 0;
}

.cse-guide__town-stats dt {
	margin: 0;
	color: var(--cse-guide-quiet);
	font-size: max(13px, 0.8125rem);
	font-weight: 500;
	line-height: 1.3;
}

.cse-guide__town-stats dd {
	margin: 0;
	color: var(--cse-ink);
	font-family: var(--cse-font-display);
	font-size: max(18px, 1.125rem);
	font-weight: 500;
	font-variant-numeric: lining-nums tabular-nums;
	line-height: 1.2;
}

/*
 * A worded value in a figure cell. Instrument, smaller, but on the same
 * 1.2 line so its first line sits where a numeral's would.
 */
.cse-guide__town-stats dd.cse-guide__town-phrase {
	padding-top: 0.125rem;
	font-family: var(--cse-font);
	font-size: max(14px, 0.875rem);
	font-weight: 500;
	line-height: 1.3;
}

/*
 * The town-card paragraphs carry the .cse-guide prefix so their margins beat
 * Astra's `.entry-content p { margin-bottom: 1.6em }` (0,1,1), which had been
 * adding a stray 24px under the tag and under each verdict line.
 */
.cse-guide .cse-guide__town-text {
	margin: 0 0 1.25rem;
	font-size: max(15px, 0.9375rem);
	line-height: 1.6;
}

/*
 * Phones: guide.js adds .is-clampable and clamps the description to five
 * lines; "Read more" (a real button with aria-expanded) opens it in place.
 * The toggle is hidden everywhere else, and with no script.
 */
.cse-guide .cse-guide__town-more {
	display: none;
}

@media (max-width: 47.99em) {
	.cse-guide .cse-guide__town-text.is-clampable:not(.is-open) {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 5;
		line-clamp: 5;
		overflow: hidden;
	}

	.cse-guide .cse-guide__town-text.is-clampable {
		margin-bottom: 0.25rem;
	}

	.cse-guide .cse-guide__town-more:not([hidden]) {
		display: inline-flex;
		align-items: center;
		align-self: flex-start;
		min-height: 44px;
		margin: 0 0 0.75rem;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		color: var(--cse-primary);
		font: 600 max(15px, 0.9375rem)/1.3 var(--cse-font);
		letter-spacing: 0;
		text-transform: none;
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.2em;
		cursor: pointer;
	}

	.cse-guide .cse-guide__town-more:is(:hover, :focus) {
		background: none;
		color: var(--cse-primary);
	}

	.cse-guide .cse-guide__town-more:hover {
		color: var(--cse-ink);
	}

	.cse-guide .cse-guide__town-more:focus-visible {
		outline: 2px solid var(--cse-primary);
		outline-offset: 2px;
	}
}

.cse-guide__town-suits,
.cse-guide__town-against,
.cse-guide .cse-guide__town-suits,
.cse-guide .cse-guide__town-against {
	position: relative;
	margin: 0;
	padding: 0.75rem 0 0.75rem 1.875rem;
	border-top: var(--cse-guide-hairline);
	font-size: max(15px, 0.9375rem);
	line-height: 1.5;
}

.cse-guide .cse-guide__town-suits {
	margin-top: auto;
	color: var(--cse-ink);
}

.cse-guide .cse-guide__town-against {
	padding-bottom: 0;
	color: var(--cse-text);
}

.cse-guide__mark {
	position: absolute;
	top: calc(0.75rem + 0.125em);
	left: 0;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 50%;
}

.cse-guide__mark--yes {
	background: var(--cse-primary);
}

.cse-guide__mark--yes::after {
	content: "";
	position: absolute;
	top: 0.32rem;
	left: 0.33rem;
	width: 0.45rem;
	height: 0.22rem;
	border-bottom: 1.5px solid var(--cse-accent-ink);
	border-left: 1.5px solid var(--cse-accent-ink);
	rotate: -45deg;
}

.cse-guide__mark--no {
	border: 1.5px solid var(--cse-clay);
}

.cse-guide__mark--no::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.5rem;
	border-top: 1.5px solid var(--cse-clay);
	translate: -50% -50%;
}

/* ============================================================== calendar */

.cse-guide .cse-guide__calendar {
	display: grid;
	gap: 0 clamp(1.5rem, 3vw, 2.5rem);
	margin: var(--cse-guide-gap) 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48em) {
	.cse-guide .cse-guide__calendar {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 75em) {
	.cse-guide .cse-guide__calendar {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.cse-guide__calendar-item {
	margin: 0;
	padding: 1.25rem 0 1.75rem;
	border-top: 1px solid var(--cse-guide-rule);
}

.cse-guide__calendar-when {
	margin: 0 0 0.375rem;
	color: var(--cse-clay);
	font-size: max(13px, 0.8125rem);
	font-weight: 600;
	letter-spacing: 0.01em;
}

.cse-guide .cse-guide__calendar-what {
	margin: 0 0 0.5rem;
	color: var(--cse-ink);
	font-family: var(--cse-font-display);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.25;
}

.cse-guide__calendar-text {
	margin: 0;
	font-size: max(15px, 0.9375rem);
	line-height: 1.6;
}

/* ============================================================ photo band */

.cse-guide__band {
	margin: var(--cse-guide-gap) 0;
	border-radius: var(--cse-radius-lg);
	overflow: hidden;
}

.cse-guide__band-img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 1;
	object-fit: cover;
}

@media (max-width: 47.99em) {
	.cse-guide__band-img {
		aspect-ratio: 4 / 3;
	}
}

/* ========================================================= health doors */

.cse-guide .cse-guide__doors {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48em) {
	.cse-guide .cse-guide__doors {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

@media (min-width: 75em) {
	.cse-guide .cse-guide__doors {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.cse-guide__door {
	margin: 0;
	padding: clamp(1.25rem, 1rem + 1vw, 1.5rem);
	border-radius: var(--cse-radius-lg);
	background: var(--cse-guide-panel);
	font-size: max(15px, 0.9375rem);
	line-height: 1.6;
}

.cse-guide__door-who {
	margin: 0 0 0.5rem;
	color: var(--cse-clay);
	font-size: max(13px, 0.8125rem);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.01em;
}

.cse-guide .cse-guide__door-what {
	margin: 0 0 0.75rem;
	padding-bottom: 0.75rem;
	border-bottom: var(--cse-guide-hairline);
	color: var(--cse-ink);
	font-family: var(--cse-font-display);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.25;
}

.cse-guide__door-how {
	margin: 0;
}

/* ================================================================ tables */

/*
 * The wrapper scrolls, not the page. It is focusable and named in the markup
 * (tabindex, role="region", aria-label) because a scroll container that cannot
 * take focus cannot be scrolled from a keyboard.
 */
.cse-guide__tablewrap {
	margin: var(--cse-guide-gap) 0 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	border-radius: 2px;
	scrollbar-width: thin;
	scrollbar-color: var(--cse-line) transparent;
}

.cse-guide .cse-guide__table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: transparent;
	font-size: max(15px, 0.9375rem);
	line-height: 1.55;
	text-align: left;
}

.cse-guide .cse-guide__table th,
.cse-guide .cse-guide__table td {
	padding: 0.875rem 1.5rem 0.875rem 0;
	border: 0;
	border-bottom: var(--cse-guide-hairline);
	background: transparent;
	vertical-align: top;
}

.cse-guide .cse-guide__table :is(th, td):last-child {
	padding-right: 0;
}

.cse-guide .cse-guide__table thead th {
	padding-bottom: 0.625rem;
	border-bottom: 1px solid var(--cse-guide-rule);
	color: var(--cse-ink);
	font-family: var(--cse-font);
	font-size: max(13px, 0.8125rem);
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.cse-guide .cse-guide__table tbody th {
	color: var(--cse-ink);
	font-weight: 600;
}

/* Figures in the display face, lining and tabular so columns align. */
.cse-guide .cse-guide__table td.cse-guide__num,
.cse-guide__num {
	color: var(--cse-ink);
	font-family: var(--cse-font-display);
	font-size: max(17px, 1.0625rem);
	font-weight: 500;
	font-variant-numeric: lining-nums tabular-nums;
	white-space: nowrap;
}

.cse-guide .cse-guide__table--journeys td:last-child {
	min-width: 18rem;
	white-space: normal;
}

.cse-guide .cse-guide__table--ledger td {
	text-align: right;
}

.cse-guide .cse-guide__ledger-price th,
.cse-guide .cse-guide__ledger-price td {
	color: var(--cse-ink);
	font-weight: 600;
}

.cse-guide .cse-guide__table tfoot th,
.cse-guide .cse-guide__table tfoot td {
	border-top: 1px solid var(--cse-guide-rule);
	border-bottom: 0;
	color: var(--cse-ink);
	font-weight: 600;
}

.cse-guide .cse-guide__table tfoot .cse-guide__muted {
	font-weight: 400;
}

.cse-guide .cse-guide__table tfoot tr + tr :is(th, td) {
	border-top: var(--cse-guide-hairline);
}

.cse-guide .cse-guide__ledger-total th {
	vertical-align: baseline;
}

.cse-guide .cse-guide__ledger-total td.cse-guide__num {
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.1;
	vertical-align: baseline;
}

.cse-guide .cse-guide__table tfoot .cse-guide__ledger-total td:not(.cse-guide__num) {
	font-weight: 400;
}

/*
 * Phone: the three- and four-column tables with a prose column become stacked
 * rows (name and figure on one line, the note beneath), because a note squeezed
 * into a 60px column is unreadable and a sideways swipe per row is worse. The
 * markup carries explicit table roles so the semantics survive the display
 * change. The column headings stay in the document, visually hidden.
 */
@media (max-width: 47.99em) {
	.cse-guide .cse-guide__table--stack,
	.cse-guide .cse-guide__table--stack :is(thead, tbody, tfoot) {
		display: block;
		width: 100%;
	}

	.cse-guide .cse-guide__table--stack thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.cse-guide .cse-guide__table--stack tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 0.375rem 1rem;
		padding: 1rem 0;
		border-bottom: var(--cse-guide-hairline);
	}

	.cse-guide .cse-guide__table--stack tbody tr:first-child {
		border-top: 1px solid var(--cse-guide-rule);
	}

	.cse-guide .cse-guide__table--stack tbody tr:last-child {
		border-bottom: 0;
	}

	.cse-guide .cse-guide__table--stack tfoot tr {
		border-top: 1px solid var(--cse-guide-rule);
		border-bottom: 0;
	}

	.cse-guide .cse-guide__table--stack :is(th, td),
	.cse-guide .cse-guide__table--stack tfoot :is(th, td) {
		display: block;
		min-width: 0;
		padding: 0;
		border: 0;
	}

	.cse-guide .cse-guide__table--stack td.cse-guide__num {
		text-align: right;
	}

	.cse-guide .cse-guide__table--stack td:not(.cse-guide__num) {
		grid-column: 1 / -1;
		font-size: max(15px, 0.9375rem);
	}

	/*
	 * Journeys and prices: the name on its own line, the figures labelled
	 * beneath it in equal columns (distance | time; one per town).
	 */
	.cse-guide .cse-guide__table--journeys tr {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cse-guide .cse-guide__table--prices tr {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.5rem 0.75rem;
	}

	.cse-guide :is(.cse-guide__table--journeys, .cse-guide__table--prices) tbody th {
		grid-column: 1 / -1;
	}

	.cse-guide :is(.cse-guide__table--journeys, .cse-guide__table--prices) td.cse-guide__num {
		text-align: left;
		white-space: normal;
	}

	.cse-guide :is(.cse-guide__table--journeys, .cse-guide__table--prices) td[data-label]::before {
		content: attr(data-label);
		display: block;
		color: var(--cse-guide-quiet);
		font-family: var(--cse-font);
		font-size: max(13px, 0.8125rem);
		font-weight: 500;
	}

	.cse-guide .cse-guide__table--journeys td:last-child {
		min-width: 0;
	}
}

/* ============================================================ price bars */

.cse-guide .cse-guide__bars {
	display: grid;
	gap: 0.875rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Phone: name and value on one line, the bar full width beneath. Wider: the
 * classic three columns, name | bar | value.
 */
.cse-guide__bar {
	display: grid;
	grid-template-areas: "name value" "track track";
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 0.375rem 1rem;
	margin: 0;
}

@media (min-width: 48em) {
	.cse-guide__bar {
		grid-template-areas: "name track value";
		grid-template-columns: 11rem minmax(0, 1fr) 12.5rem;
		align-items: center;
		gap: 0 1.5rem;
	}
}

.cse-guide__bar-name {
	grid-area: name;
	color: var(--cse-text);
	font-size: max(15px, 0.9375rem);
	font-weight: 400;
}

.cse-guide__bar--here .cse-guide__bar-name {
	color: var(--cse-ink);
	font-weight: 700;
}

.cse-guide__bar-track {
	display: block;
	grid-area: track;
	height: 0.875rem;
	border-bottom: var(--cse-guide-hairline);
}

.cse-guide__bar-fill {
	display: block;
	width: var(--cse-bar, 0%);
	height: 100%;
	border-radius: 2px 2px 0 0;
	background: var(--cse-line);
}

.cse-guide__bar--here .cse-guide__bar-fill {
	background: var(--cse-primary);
}

.cse-guide__bar-value {
	grid-area: value;
	color: var(--cse-ink);
	font-family: var(--cse-font-display);
	font-size: max(17px, 1.0625rem);
	font-weight: 500;
	font-variant-numeric: lining-nums tabular-nums;
	white-space: nowrap;
	text-align: right;
}

@media (min-width: 48em) {
	.cse-guide__bar-value {
		text-align: left;
	}
}

.cse-guide__bar-change {
	margin-left: 0.5rem;
	color: var(--cse-guide-quiet);
	font-family: var(--cse-font);
	font-size: max(13px, 0.8125rem);
	font-weight: 500;
}

.cse-guide__bar--here .cse-guide__bar-change {
	color: var(--cse-primary);
	font-weight: 600;
}

/* ============================================================ cost stack */

/*
 * Each worked example is a limestone panel: story and bar on the left, the
 * ledger on the right from 62em, all of it stacked on a phone.
 */
.cse-guide__example {
	display: grid;
	align-items: start;
	max-width: var(--cse-guide-max);
	margin-top: 1.5rem;
	padding: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
	border-radius: var(--cse-radius-lg);
	background: var(--cse-guide-panel);
}

.cse-guide .cse-section > header + .cse-guide__example {
	margin-top: var(--cse-guide-gap);
}

@media (min-width: 62em) {
	.cse-guide__example {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		/* Spare height from the ledger goes under the key, not between rows. */
		grid-template-rows: auto auto auto 1fr;
		column-gap: clamp(2rem, 4vw, 4rem);
	}

	.cse-guide__example > .cse-guide__tablewrap {
		grid-column: 2;
		grid-row: 1 / span 4;
		margin-top: 0;
	}
}

.cse-guide .cse-guide__example-title {
	margin: 0 0 0.5rem;
	color: var(--cse-ink);
	font-family: var(--cse-font-display);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.cse-guide__example-note {
	max-width: var(--cse-guide-text);
	margin: 0 0 1.5rem;
	color: var(--cse-text);
	font-size: max(15px, 0.9375rem);
	line-height: 1.6;
}

.cse-guide__stack {
	display: flex;
	gap: 3px;
	height: 3rem;
}

.cse-guide__stack-seg {
	flex: 0 1 auto;
	width: var(--cse-seg, 0%);
	min-width: 4px;
	border-radius: 2px;
}

.cse-guide__stack-seg:first-child {
	border-radius: var(--cse-radius) 2px 2px var(--cse-radius);
}

.cse-guide__stack-seg:last-child {
	border-radius: 2px var(--cse-radius) var(--cse-radius) 2px;
}

.cse-guide__stack-seg--price,
.cse-guide__swatch--price {
	background: var(--cse-primary);
}

.cse-guide__stack-seg--tax,
.cse-guide__swatch--tax {
	background: var(--cse-clay);
}

.cse-guide__stack-seg--fees,
.cse-guide__swatch--fees {
	background: var(--cse-clay-soft);
}

.cse-guide .cse-guide__stack-key {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0.875rem 0 0;
	padding: 0;
	list-style: none;
	font-size: max(15px, 0.9375rem);
}

.cse-guide .cse-guide__stack-key li {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0;
}

.cse-guide .cse-guide__stack-key b {
	color: var(--cse-ink);
	font-family: var(--cse-font-display);
	font-size: max(16px, 1rem);
	font-weight: 500;
	font-variant-numeric: lining-nums tabular-nums;
}

.cse-guide__swatch {
	flex: 0 0 auto;
	align-self: center;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 2px;
}

.cse-guide__example .cse-guide__tablewrap {
	margin-top: 1.75rem;
}

/* ================================================================ steps */

/*
 * The nine-step timeline: a hairline spine with white numbered stations,
 * clay Fraunces numerals, and each step's "watch out" as a terracotta note.
 */
.cse-guide .cse-guide__steps {
	max-width: 54rem;
	margin: var(--cse-guide-gap) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.cse-guide__step {
	position: relative;
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	gap: 1rem;
	margin: 0;
	padding-bottom: 2.5rem;
}

@media (min-width: 48em) {
	.cse-guide__step {
		grid-template-columns: 3.5rem minmax(0, 1fr);
		gap: 2rem;
		padding-bottom: 3.5rem;
	}
}

/*
 * The spine. Drawn on the item rather than as a border on a container so the
 * last step can stop it cleanly.
 */
.cse-guide__step::before {
	content: "";
	position: absolute;
	top: 2.75rem;
	bottom: 0;
	left: 1.375rem;
	width: 1px;
	background: color-mix(in srgb, var(--cse-ink) 18%, transparent);
}

@media (min-width: 48em) {
	.cse-guide__step::before {
		top: 3.5rem;
		left: 1.75rem;
	}
}

.cse-guide__step:last-child {
	padding-bottom: 0;
}

.cse-guide__step:last-child::before {
	display: none;
}

.cse-guide__step-marker {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid color-mix(in srgb, var(--cse-ink) 18%, transparent);
	border-radius: 50%;
	background: var(--cse-surface);
	color: var(--cse-clay);
	font-family: var(--cse-font-display);
	font-size: 1.25rem;
	font-weight: 400;
	font-variant-numeric: lining-nums tabular-nums;
	line-height: 1;
}

@media (min-width: 48em) {
	.cse-guide__step-marker {
		width: 3.5rem;
		height: 3.5rem;
		font-size: 1.625rem;
	}
}

.cse-guide__step-body {
	max-width: 44rem;
	padding-top: 0.5rem;
}

@media (min-width: 48em) {
	.cse-guide__step-body {
		padding-top: 0.875rem;
	}
}

/*
 * From 75em each step reads as a spread: the story in a comfortable measure on
 * the left, its "watch out" set beside it on the right instead of beneath.
 */
@media (min-width: 75em) {
	.cse-guide .cse-guide__steps {
		max-width: none;
	}

	.cse-guide__step-body {
		display: grid;
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		grid-template-rows: auto auto 1fr;
		column-gap: clamp(2.5rem, 4vw, 4rem);
		max-width: none;
	}

	.cse-guide__step-body > * {
		grid-column: 1;
	}

	.cse-guide__step-body > .cse-guide__watch {
		grid-column: 2;
		grid-row: 1 / span 3;
		align-self: start;
		margin-top: 1.75rem;
	}

	.cse-guide__step-text {
		margin-bottom: 0;
	}
}

.cse-guide__step-when {
	margin: 0 0 0.375rem;
	color: var(--cse-clay);
	font-size: max(13px, 0.8125rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.01em;
}

.cse-guide .cse-guide__step-title {
	margin: 0 0 0.75rem;
	color: var(--cse-ink);
	font-family: var(--cse-font-display);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

/*
 * Prefixed so the margins beat Astra's `.entry-content p { margin-bottom:
 * 1.6em }`, which had been adding 24px under every "watch out" note on top of
 * the step's own spacing (about 60px of air between stations on a phone).
 */
.cse-guide .cse-guide__step-text {
	margin: 0 0 1.25rem;
}

.cse-guide .cse-guide__step-body > .cse-guide__watch {
	margin-bottom: 0;
}

/* ================================================= warnings and notices */

.cse-guide__watch {
	margin: 0;
	padding: 0.875rem 1.125rem;
	border-left: 2px solid var(--cse-clay);
	border-radius: 0 var(--cse-radius) var(--cse-radius) 0;
	background: color-mix(in srgb, var(--cse-clay) 6%, var(--cse-surface));
	color: var(--cse-text);
	font-size: max(15px, 0.9375rem);
	line-height: 1.55;
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.cse-guide__watch {
		background: var(--cse-surface);
	}
}

.cse-guide__watch-label {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--cse-clay);
	font-size: max(13px, 0.8125rem);
	font-weight: 600;
	letter-spacing: 0.01em;
}

.cse-guide__note {
	max-width: var(--cse-guide-max);
	margin-top: var(--cse-guide-gap);
	padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
	border: 1px solid transparent;
	border-radius: var(--cse-radius-lg);
	background: var(--cse-guide-panel);
}

.cse-guide .cse-section--process .cse-guide__note,
.cse-guide .cse-section--rules .cse-guide__note {
	border-color: var(--cse-line);
}

/* The closing note of the timeline hangs on the same line as the step text. */
@media (min-width: 48em) {
	.cse-guide .cse-guide__steps + .cse-guide__note {
		margin-left: 5.5rem;
	}
}

.cse-guide__note--warn,
.cse-guide .cse-section .cse-guide__note--warn {
	border-color: color-mix(in srgb, var(--cse-clay) 38%, transparent);
	background: color-mix(in srgb, var(--cse-clay) 5%, var(--cse-surface));
}

.cse-guide .cse-guide__note-title {
	margin: 0 0 0.5rem;
	color: var(--cse-ink);
	font-family: var(--cse-font-display);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.25;
}

.cse-guide__note p {
	max-width: var(--cse-guide-text);
	margin: 0;
}

/* ====================================================== myth and status */

.cse-guide__myth {
	position: relative;
	max-width: var(--cse-guide-max);
	margin-top: var(--cse-guide-band);
	padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
	border-radius: var(--cse-radius-lg);
	background: var(--cse-slate);
	color: var(--cse-on-dark);
	overflow: hidden;
	isolation: isolate;
}

/* A struck-through ring: the "no longer exists" of the heading, drawn. */
.cse-guide__myth::after {
	content: "";
	position: absolute;
	top: 50%;
	right: clamp(-6rem, -4vw, -2rem);
	z-index: -1;
	width: 18rem;
	aspect-ratio: 1;
	border: 1px solid color-mix(in srgb, var(--cse-clay-soft) 30%, transparent);
	border-radius: 50%;
	background: linear-gradient(135deg, transparent calc(50% - 0.5px), color-mix(in srgb, var(--cse-clay-soft) 30%, transparent) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px));
	translate: 0 -50%;
	pointer-events: none;
}

@media (max-width: 61.99em) {
	.cse-guide__myth::after {
		display: none;
	}
}

.cse-guide .cse-guide__myth-title {
	max-width: 18em;
	margin: 0 0 1.25rem;
	color: var(--cse-on-dark);
	font-family: var(--cse-font-display);
	font-size: clamp(1.875rem, 3.2vw, 2.5rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.015em;
}

.cse-guide__myth p {
	max-width: 44rem;
	margin: 0 0 1rem;
	color: color-mix(in srgb, var(--cse-on-dark) 86%, transparent);
}

.cse-guide__myth p.cse-guide__myth-label {
	margin-bottom: 0.875rem;
	color: var(--cse-clay-soft);
}

.cse-guide__myth p:last-child {
	margin-bottom: 0;
}

.cse-guide__status {
	display: grid;
	gap: clamp(1.25rem, 1rem + 2vw, 2.5rem);
	max-width: var(--cse-guide-max);
	margin-top: var(--cse-guide-gap);
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	border: var(--cse-guide-hairline);
	border-radius: var(--cse-radius-lg);
	background: var(--cse-surface);
}

@media (min-width: 48em) {
	.cse-guide__status {
		grid-template-columns: 11rem minmax(0, 1fr);
	}
}

/* A stamp: clay outline, clay Fraunces word, the date beneath. */
.cse-guide__status-flag {
	align-self: start;
	justify-self: start;
	min-width: 9rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--cse-clay);
	border-radius: var(--cse-radius);
	background: var(--cse-surface);
	text-align: center;
	rotate: -2deg;
}

@media (prefers-reduced-motion: reduce) {
	.cse-guide__status-flag {
		rotate: none;
	}
}

.cse-guide__status-word {
	display: block;
	color: var(--cse-clay);
	font-family: var(--cse-font-display);
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.cse-guide__status-date {
	display: block;
	margin-top: 0.375rem;
	color: var(--cse-guide-quiet);
	font-size: max(13px, 0.8125rem);
}

.cse-guide .cse-guide__status-title {
	margin: 0 0 0.75rem;
	color: var(--cse-ink);
	font-family: var(--cse-font-display);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.2;
}

.cse-guide__status-body p {
	max-width: var(--cse-guide-text);
	margin: 0 0 1rem;
}

.cse-guide__status-body p:last-child {
	margin-bottom: 0;
}

/* =============================================================== verdict */

.cse-guide__verdict {
	display: grid;
	max-width: var(--cse-guide-max);
	margin-top: var(--cse-guide-band);
	border-radius: var(--cse-radius-lg);
	background: var(--cse-slate);
	color: var(--cse-on-dark);
	overflow: hidden;
}

@media (min-width: 62em) {
	.cse-guide__verdict:has(.cse-guide__verdict-media) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	}
}

/*
 * With no photograph the panel would be text in its left half and nothing in
 * its right. Set it as a spread instead: the claim and the answer on the left,
 * the working on the right.
 */
@media (min-width: 62em) {
	.cse-guide__verdict:not(:has(.cse-guide__verdict-media)) .cse-guide__verdict-body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
		grid-template-rows: auto auto 1fr;
		column-gap: clamp(2.5rem, 5vw, 5rem);
	}

	.cse-guide__verdict:not(:has(.cse-guide__verdict-media)) .cse-guide__verdict-body > * {
		grid-column: 1;
	}

	.cse-guide__verdict:not(:has(.cse-guide__verdict-media)) .cse-guide__verdict-text {
		grid-column: 2;
		grid-row: 1 / span 3;
		padding-top: 2rem;
	}

	.cse-guide__verdict:not(:has(.cse-guide__verdict-media)) .cse-guide__verdict-answer {
		border-bottom: 0;
	}
}

.cse-guide__verdict-media {
	min-height: 14rem;
}

.cse-guide__verdict-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cse-guide__verdict-body {
	padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
}

.cse-guide .cse-guide__verdict-title {
	max-width: 18em;
	margin: 0 0 1.25rem;
	color: var(--cse-on-dark);
	font-family: var(--cse-font-display);
	font-size: clamp(1.875rem, 3.2vw, 2.5rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.015em;
}

.cse-guide .cse-guide__verdict-answer {
	max-width: 32rem;
	margin: 0 0 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid color-mix(in srgb, var(--cse-on-dark) 22%, transparent);
	color: var(--cse-clay-soft);
	font-family: var(--cse-font-display);
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	font-weight: 400;
	line-height: 1.35;
}

.cse-guide__verdict-body p {
	max-width: 42rem;
	margin: 0 0 1rem;
	color: color-mix(in srgb, var(--cse-on-dark) 86%, transparent);
}

.cse-guide__verdict-body .cse-guide__muted {
	margin-bottom: 0;
	color: color-mix(in srgb, var(--cse-on-dark) 74%, transparent);
}

/* ================================================================ routes */

.cse-guide .cse-guide__routes,
.cse-guide .cse-guide__risks {
	display: grid;
	gap: 1rem;
	margin: var(--cse-guide-gap) 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48em) {
	.cse-guide .cse-guide__risks {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

@media (min-width: 62em) {
	.cse-guide .cse-guide__routes {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

.cse-guide__route,
.cse-guide__risk {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	border: var(--cse-guide-hairline);
	border-radius: var(--cse-radius-lg);
	background: var(--cse-guide-panel);
	font-size: max(15px, 0.9375rem);
	line-height: 1.6;
}

.cse-guide__route p,
.cse-guide__risk p {
	margin: 0 0 1rem;
}

.cse-guide__route p:last-child,
.cse-guide__risk p:last-child {
	margin-bottom: 0;
}

.cse-guide__route .cse-guide__watch {
	margin-top: auto;
}

.cse-guide .cse-guide__route-name,
.cse-guide .cse-guide__risk-name {
	margin: 0 0 0.5rem;
	color: var(--cse-ink);
	font-family: var(--cse-font-display);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.25;
}

.cse-guide .cse-guide__route-test {
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: var(--cse-guide-hairline);
	color: var(--cse-clay);
	font-family: var(--cse-font-display);
	font-size: max(18px, 1.125rem);
	font-weight: 500;
	font-variant-numeric: lining-nums;
}

/* ============================================================= checklist */

.cse-guide__checklist {
	display: grid;
	gap: clamp(2rem, 1rem + 3vw, 3rem);
	margin-top: var(--cse-guide-gap);
}

@media (min-width: 62em) {
	.cse-guide__checklist {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: start;
	}
}

.cse-guide__checkgroup {
	margin: 0;
}

.cse-guide .cse-guide__checkgroup-title {
	margin: 0 0 0.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--cse-guide-rule);
	color: var(--cse-ink);
	font-family: var(--cse-font-display);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.25;
}

.cse-guide .cse-guide__checks {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cse-guide .cse-guide__checks li {
	position: relative;
	margin: 0;
	padding: 0.875rem 0 0.875rem 2rem;
	border-bottom: var(--cse-guide-hairline);
	font-size: max(15px, 0.9375rem);
	line-height: 1.55;
}

/*
 * A list to take to the lawyer, not a form: a small sea tick marks each line
 * rather than an empty square that looks tappable and is not.
 */
.cse-guide .cse-guide__checkmark {
	position: absolute;
	top: calc(0.875rem + 0.2em);
	left: 0;
	width: 1rem;
	height: 1rem;
	color: var(--cse-primary);
}

/* =================================================================== faq */

/*
 * From 62em the FAQ section becomes two columns: the heading stays pinned on
 * the left while the questions scroll past on the right.
 */
@media (min-width: 62em) {
	.cse-guide .cse-section--faq {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr);
		grid-template-rows: auto 1fr;
		align-items: start;
		column-gap: clamp(2.5rem, 5vw, 5rem);
	}

	.cse-guide .cse-section--faq > .cse-guide__head {
		position: sticky;
		top: 6rem;
		max-width: none;
		margin-bottom: 0;
	}

	.cse-guide .cse-section--faq[data-cse-number]::before {
		position: static;
		display: block;
		grid-column: 1;
		margin: 0 0 1.25rem -0.04em;
	}

	.cse-guide .cse-section--faq > .cse-guide__faq {
		grid-column: 2;
		grid-row: 1 / span 2;
		margin-top: 0;
	}
}

.cse-guide__faq {
	max-width: 52rem;
	margin-top: var(--cse-guide-gap);
	border-top: 1px solid var(--cse-guide-rule);
}

.cse-guide__faq-item {
	border-bottom: var(--cse-guide-hairline);
}

.cse-guide .cse-guide__faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 4rem;
	padding: 1.125rem 0;
	color: var(--cse-ink);
	font-family: var(--cse-font-display);
	font-size: clamp(18px, 1.05rem + 0.35vw, 1.3125rem);
	font-weight: 400;
	line-height: 1.35;
	cursor: pointer;
	list-style: none;
	transition: color 180ms var(--cse-guide-ease);
}

.cse-guide .cse-guide__faq-q::-webkit-details-marker {
	display: none;
}

.cse-guide .cse-guide__faq-q::marker {
	content: "";
}

.cse-guide .cse-guide__faq-q:hover {
	color: var(--cse-primary);
}

/*
 * A plus that becomes a minus, in a 32px hairline square. One element with two
 * gradient bars; the vertical bar collapses when the item opens.
 */
.cse-guide .cse-guide__faq-q::after {
	content: "";
	flex: 0 0 2rem;
	width: 2rem;
	height: 2rem;
	border: var(--cse-guide-hairline);
	border-radius: var(--cse-radius);
	background:
		linear-gradient(var(--cse-primary), var(--cse-primary)) center / 0.75rem 1.5px no-repeat,
		linear-gradient(var(--cse-primary), var(--cse-primary)) center / 1.5px 0.75rem no-repeat,
		var(--cse-surface);
	transition: background-size 180ms var(--cse-guide-ease), border-color 180ms var(--cse-guide-ease);
}

.cse-guide .cse-guide__faq-q:hover::after {
	border-color: var(--cse-primary);
}

.cse-guide__faq-item[open] .cse-guide__faq-q::after {
	background-size: 0.75rem 1.5px, 1.5px 0, auto;
}

@media (prefers-reduced-motion: reduce) {
	.cse-guide .cse-guide__faq-q,
	.cse-guide .cse-guide__faq-q::after {
		transition: none;
	}
}

.cse-guide__faq-a {
	padding: 0 3.5rem 1.5rem 0;
}

@media (max-width: 47.99em) {
	.cse-guide__faq-a {
		padding-right: 0;
	}
}

.cse-guide__faq-a p {
	max-width: var(--cse-guide-text);
	margin: 0;
}

/* ============================================================== glossary */

.cse-guide__glossary {
	max-width: var(--cse-guide-max);
	margin: var(--cse-guide-gap) 0 0;
	column-gap: clamp(2.5rem, 5vw, 5rem);
}

@media (min-width: 62em) {
	.cse-guide__glossary {
		columns: 2;
	}
}

.cse-guide__glossary-row {
	padding: 1.125rem 0;
	border-top: var(--cse-guide-hairline);
	break-inside: avoid;
}

@media (min-width: 62em) {
	.cse-guide__glossary-row {
		display: grid;
		grid-template-columns: 11rem minmax(0, 1fr);
		column-gap: 1.5rem;
		align-items: baseline;
	}
}

.cse-guide__glossary dt {
	margin: 0 0 0.25rem;
	color: var(--cse-ink);
	font-family: var(--cse-font-display);
	font-size: max(18px, 1.125rem);
	font-weight: 500;
	line-height: 1.3;
}

.cse-guide__glossary dd {
	margin: 0;
	font-size: max(15px, 0.9375rem);
	line-height: 1.6;
}

/* ============================================================== closing */

.cse-guide__next {
	position: relative;
	padding-block: clamp(4rem, 2.5rem + 6vw, 8rem);
	padding-inline: var(--cse-guide-inset);
	overflow: hidden;
	background: var(--cse-slate);
	color: var(--cse-on-dark);
	isolation: isolate;
}

.cse-guide__next-media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.cse-guide__next-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The same tide-rings as the cover, rising from the lower right: the book closes. */
.cse-guide__next:not(.cse-guide__next--photo)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: repeating-radial-gradient(circle at 92% 110%, transparent 0 2.4rem, color-mix(in srgb, var(--cse-on-dark) 9%, transparent) 2.4rem calc(2.4rem + 1px));
	-webkit-mask-image: radial-gradient(circle at 92% 110%, black 0 16rem, transparent 32rem);
	mask-image: radial-gradient(circle at 92% 110%, black 0 16rem, transparent 32rem);
	pointer-events: none;
}

.cse-guide__next--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to right, color-mix(in srgb, var(--cse-slate) 94%, transparent), color-mix(in srgb, var(--cse-slate) 72%, transparent));
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.cse-guide__next--photo::after {
		background: var(--cse-slate);
		opacity: 0.9;
	}

	.cse-guide__next:not(.cse-guide__next--photo)::after {
		display: none;
	}
}

.cse-guide__next-inner {
	max-width: 46rem;
}

.cse-guide .cse-guide__next-title {
	max-width: 17em;
	margin: 0 0 1.5rem;
	color: var(--cse-on-dark);
	font-family: var(--cse-font-display);
	font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.cse-guide__next-text {
	max-width: 38rem;
	margin: 0 0 2.25rem;
	color: color-mix(in srgb, var(--cse-on-dark) 86%, transparent);
	font-size: clamp(17px, 1rem + 0.3vw, 1.1875rem);
	line-height: 1.6;
}

.cse-guide .cse-guide__next-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0 0 3rem;
}

/*
 * Buttons on dark, per DESIGN.md: limestone fill with slate text for the
 * primary, a limestone outline for the secondary. Size, type, corners and
 * the arrow come from the base .cse-btn in costa-estates.css; only the two
 * things the base has no variant for are set here: the on-dark colours, and
 * the 48px height, which the base's 44px touch-target floor would otherwise
 * undercut.
 */
.cse-guide .cse-guide__next-actions .cse-btn {
	min-height: 48px;
}

/* Phones: one full-width column, both buttons the same width. */
@media (max-width: 47.99em) {
	.cse-guide .cse-guide__next-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.cse-guide .cse-guide__next-actions .cse-btn {
		width: 100%;
		justify-content: center;
		text-align: center;
	}
}

.cse-guide .cse-guide__next-actions .cse-btn--accent {
	border-color: var(--cse-on-dark);
	background: var(--cse-on-dark);
	color: var(--cse-slate);
}

.cse-guide .cse-guide__next-actions .cse-btn--accent:is(:hover, :focus-visible) {
	border-color: var(--cse-surface);
	background: var(--cse-surface);
	color: var(--cse-slate);
}

.cse-guide .cse-guide__next-actions .cse-btn--ghost {
	border-color: color-mix(in srgb, var(--cse-on-dark) 55%, transparent);
	background: transparent;
	color: var(--cse-on-dark);
}

.cse-guide .cse-guide__next-actions .cse-btn--ghost:is(:hover, :focus-visible) {
	border-color: var(--cse-on-dark);
	background: color-mix(in srgb, var(--cse-on-dark) 10%, transparent);
	color: var(--cse-on-dark);
}

.cse-guide__next-small {
	max-width: 42rem;
	margin: 0;
	padding-top: 1.5rem;
	border-top: 1px solid color-mix(in srgb, var(--cse-on-dark) 20%, transparent);
	color: color-mix(in srgb, var(--cse-on-dark) 74%, transparent);
	font-size: max(13px, 0.8125rem);
	line-height: 1.6;
}

/* ========================================================= media: video */

/*
 * Video shares the photograph's classes, so every `object-fit` rule above
 * already applies to it. What it needs on top is a sensible intrinsic shape
 * before metadata loads.
 */
.cse-guide video {
	display: block;
	max-width: 100%;
	background: var(--cse-slate);
}

.cse-guide__cover-img,
.cse-guide__next-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * A played clip in the wide band gets its own 16:9 shape rather than the 3:1
 * crop a still takes, so the browser's controls are not squeezed.
 */
.cse-guide__band video.cse-guide__band-img {
	aspect-ratio: 16 / 9;
	width: 100%;
	height: auto;
	object-fit: contain;
	background: var(--cse-slate);
}

.cse-guide__aside-media video,
.cse-guide__verdict-media video {
	width: 100%;
	height: auto;
}

.cse-guide__town-media video.cse-guide__town-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ============================================================ "See it" rail */

/*
 * A horizontal scroll-snap rail. It is focusable and labelled in the markup,
 * so it can be scrolled from a keyboard.
 */
.cse-guide__rail {
	margin-top: var(--cse-guide-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: var(--cse-line) transparent;

	/*
	 * Break out to the full section width so the rail runs to both edges and
	 * reads as something that continues past the screen, borrowing back the
	 * section's own padding rather than measuring the viewport.
	 */
	margin-inline: calc(-1 * var(--cse-guide-inset));
	padding-inline: var(--cse-guide-inset);
	padding-block: 0.25rem 1.5rem;
	scroll-padding-inline: var(--cse-guide-inset);
}

.cse-guide .cse-guide__rail-track {
	display: flex;
	align-items: stretch;
	gap: 1.5rem;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cse-guide__rail-item {
	flex: 0 0 auto;
	width: clamp(15rem, 40vw, 26rem);
	margin: 0;
	scroll-snap-align: start;
}

.cse-guide__rail-figure {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	border: var(--cse-guide-hairline);
	border-radius: var(--cse-radius-lg);
	background: var(--cse-surface);
	overflow: hidden;
}

/*
 * One ratio for every item in the rail, stills and clips alike, so the
 * captions sit on one line. Stills crop to fill; a clip is contained.
 */
.cse-guide__rail-media {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--cse-surface-alt);
}

.cse-guide__rail-item--video .cse-guide__rail-media {
	object-fit: contain;
	background: var(--cse-slate);
}

.cse-guide__rail-caption {
	margin-top: auto;
	padding: 0.875rem 1.25rem 1.125rem;
	color: var(--cse-text);
	font-size: max(14px, 0.875rem);
	line-height: 1.5;
}

@media (max-width: 47.99em) {
	.cse-guide__rail-item {
		width: 80vw;
	}
}

/* ============================================================== animation
 *
 * Everything here is behind prefers-reduced-motion, and none of it animates
 * opacity: a visitor whose browser never runs these still sees every word.
 */

/* A slow push on the full-bleed photographs, too small to read as sliding. */
@keyframes cse-guide-push {
	from { scale: 1; }
	to { scale: 1.08; }
}

@media (prefers-reduced-motion: no-preference) {
	.cse-guide__cover-img,
	.cse-guide__next-img {
		animation: cse-guide-push 24s ease-out both;
		transform-origin: 50% 60%;
	}

	.cse-guide__next-img {
		animation-duration: 30s;
		transform-origin: 40% 45%;
	}
}

/*
 * Property-card hover: the card lifts 3px and takes the hover shadow; its
 * photograph pushes in over 600ms. Gated on (hover: hover) so a touch device
 * never gets a stuck hover state.
 */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.cse-guide__town,
	.cse-guide__rail-figure {
		transition: transform 180ms var(--cse-guide-ease), box-shadow 180ms var(--cse-guide-ease);
	}

	.cse-guide__town:hover,
	.cse-guide__rail-figure:hover {
		transform: translateY(-3px);
		box-shadow: var(--cse-shadow-hover, 0 18px 40px -18px color-mix(in srgb, var(--cse-slate) 45%, transparent));
	}

	.cse-guide__town-img,
	.cse-guide__emblem,
	.cse-guide__rail-item:not(.cse-guide__rail-item--video) .cse-guide__rail-media {
		transition: scale 600ms var(--cse-guide-ease);
	}

	.cse-guide__town:hover .cse-guide__town-img,
	.cse-guide__rail-figure:hover .cse-guide__rail-media {
		scale: 1.04;
	}

	.cse-guide__town:hover .cse-guide__emblem {
		scale: 1.04;
	}
}

/* Hover without motion: the hairline darkens instead of the card moving. */
@media (hover: hover) {
	.cse-guide__town:hover {
		border-color: color-mix(in srgb, var(--cse-ink) 22%, transparent);
	}
}

/*
 * The cover figures count up. guide.js does the counting; this is only the
 * resting state, so a page with no JavaScript shows the final number.
 */
.cse-guide__cover-figure {
	font-variant-numeric: lining-nums tabular-nums;
}

/*
 * No scroll-driven reveals. Motion is kept to hover, colour and the slow
 * photographic push, so a long read never has its furniture moving under it
 * and a full-page capture shows the page exactly as it rests.
 */

/* ================================================================= focus */

.cse-guide :is(a, button, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--cse-primary);
	outline-offset: 2px;
	border-radius: 2px;
}

.cse-guide :is(.cse-guide__tablewrap, .cse-guide__rail):focus-visible {
	outline-offset: 4px;
	border-radius: var(--cse-radius);
}

/* On the slate grounds the ring is limestone. */
.cse-guide :is(.cse-guide__cover, .cse-guide__next, .cse-guide__myth, .cse-guide__verdict) :is(a, button, summary, [tabindex]):focus-visible {
	outline-color: var(--cse-on-dark);
}

.cse-guide ::selection {
	background: color-mix(in srgb, var(--cse-primary) 22%, transparent);
	color: var(--cse-ink);
}

/* ================================================================= print */

/* The checklist is the part people actually print. */
@media print {
	.cse-guide *,
	.cse-guide *::before,
	.cse-guide *::after {
		animation: none !important;
		translate: none !important;
	}

	.cse-guide__contents,
	.cse-guide__cover-media,
	.cse-guide__next-media,
	.cse-guide video {
		display: none;
	}

	.cse-guide__rail,
	.cse-guide__tablewrap {
		overflow: visible;
	}

	.cse-guide .cse-section {
		padding-block: 1.5rem;
		background: none;
		break-inside: avoid;
	}

	.cse-guide .cse-section[data-cse-number]::before {
		display: none;
	}

	.cse-guide__checkbox {
		border-color: currentColor;
	}
}