/*
 * The Destination File — component layer.
 *
 * Cards, the guide opening, buttons, navigation, the appearance control,
 * breadcrumbs, contents, pagination, editorial furniture. Every component draws
 * from tokens.css and no raw colour appears below, which is why every component
 * follows the reader's appearance with no second stylesheet (D-054).
 *
 * @package The_Destination_File
 */

/* ---------------------------------------------------------------------------
 * LABELS — the ONLY place capitals are used
 *
 * Caps are harder to read because every word becomes the same rectangle, so they
 * are confined to short labels and always letterspaced. Never a sentence, never
 * a paragraph.
 * ------------------------------------------------------------------------ */

.tdf-label,
.tdf-card__kicker,
.tdf-lead__kicker,
.tdf-filters__legend {
	font-family: var( --tdf-font-ui );
	font-size: var( --tdf-text-label );
	font-weight: 600;
	letter-spacing: var( --tdf-tracking-label );
	text-transform: uppercase;
	color: var( --tdf-ink-muted );
	font-feature-settings: 'kern' 1;
}

/* ---------------------------------------------------------------------------
 * BUTTONS
 *
 * Two variants and no more. A rectangle with a 2px radius, not a pill — a pill
 * reads as an app chip and there is no third "tertiary ghost outline" tier,
 * because a third tier means nobody knows which one is primary.
 * ------------------------------------------------------------------------ */

.tdf-btn {
	display: inline-block;
	padding: var( --tdf-space-xs ) var( --tdf-space-md );
	border: var( --tdf-border ) solid transparent;
	border-radius: var( --tdf-radius );
	font-family: var( --tdf-font-ui );
	font-size: var( --tdf-text-meta );
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var( --tdf-duration ) var( --tdf-ease ),
	            border-color var( --tdf-duration ) var( --tdf-ease ),
	            color var( --tdf-duration ) var( --tdf-ease );
	/* 44px minimum touch target — a 15px label with this padding clears it. */
	min-height: 44px;
}

.tdf-btn--primary {
	background-color: var( --tdf-accent );
	color: var( --tdf-on-accent );   /* 7.80 / 8.44 — measured */
}

.tdf-btn--primary:hover,
.tdf-btn--primary:focus-visible {
	background-color: var( --tdf-accent-deep );
	color: var( --tdf-on-accent );
}

.tdf-btn--quiet {
	background-color: transparent;
	border-color: var( --tdf-rule-strong );
	color: var( --tdf-ink );
}

.tdf-btn--quiet:hover,
.tdf-btn--quiet:focus-visible {
	border-color: var( --tdf-accent );
	color: var( --tdf-accent-deep );
}

.tdf-btn:active {
	transform: none;   /* no press-down bounce; this is a publication */
}

/* ---------------------------------------------------------------------------
 * SITE HEADER AND NAVIGATION
 *
 * One row at every width: the masthead on the left, navigation and the appearance
 * control grouped on the right. The rule beneath is the quiet divider, not the
 * structural one — the header should frame the page, not fence it.
 * ------------------------------------------------------------------------ */

.tdf-site-header {
	border-block-end: var( --tdf-border ) solid var( --tdf-rule );
	background-color: var( --tdf-paper );
}

.tdf-site-header > .tdf-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var( --tdf-space-2xs ) var( --tdf-space-md );
	min-height: 4.5rem;
	padding-block: var( --tdf-space-2xs );
}

.tdf-site-title {
	margin: 0;
	font-family: var( --tdf-font-editorial );
	font-size: var( --tdf-text-h3 );
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: var( --tdf-tracking-heading );
}

/* The home link. Measured at 22px before D2 — it had the spacing exception to lean
 * on, but it is the most-used control in the masthead and there is no reason it
 * should be the smallest. */
.tdf-site-title a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var( --tdf-ink-strong );
	text-decoration: none;
}

.tdf-site-header__actions {
	display: flex;
	align-items: center;
	gap: var( --tdf-space-xs );
}

.tdf-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var( --tdf-space-md );
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * 44px minimum, measured (D2). These rendered at 42px — two short of the minimum
 * this system claims — because padding alone decided their height. min-height makes
 * the target explicit rather than emergent from font metrics, which drift.
 */
.tdf-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-block: var( --tdf-space-2xs );
	font-family: var( --tdf-font-ui );
	font-size: var( --tdf-text-meta );
	font-weight: var( --tdf-weight-ui );
	color: var( --tdf-ink );
	text-decoration: none;
	border-block-end: var( --tdf-border-heavy ) solid transparent;
}

.tdf-nav a:hover,
.tdf-nav a[aria-current] {
	color: var( --tdf-accent-deep );
	border-block-end-color: var( --tdf-accent );
}

/*
 * APPEARANCE CONTROL (D-054)
 *
 * A native <details> holding a real radio group. The label is visible on wide
 * screens and folds into the icon on phones, where the icon keeps a 44px target and
 * the label stays the accessible name. The [hidden] rule is not redundant: an author
 * `display` on this element would otherwise beat the user-agent's [hidden] and show
 * a control that cannot work without JavaScript.
 */
.tdf-appearance {
	position: relative;
}

.tdf-appearance[hidden] {
	display: none;
}

.tdf-appearance__toggle {
	display: inline-flex;
	align-items: center;
	gap: var( --tdf-space-2xs );
	min-width: 44px;
	min-height: 44px;
	padding-inline: var( --tdf-space-2xs );
	border-radius: var( --tdf-radius );
	font-family: var( --tdf-font-ui );
	font-size: var( --tdf-text-meta );
	font-weight: var( --tdf-weight-ui );
	color: var( --tdf-ink-muted );
	cursor: pointer;
	list-style: none;
	user-select: none;
	transition: color var( --tdf-duration ) var( --tdf-ease );
}

.tdf-appearance__toggle::-webkit-details-marker {
	display: none;
}

.tdf-appearance__toggle:hover,
.tdf-appearance[open] > .tdf-appearance__toggle {
	color: var( --tdf-ink-strong );
}

.tdf-appearance__icon {
	flex: 0 0 auto;
}

.tdf-appearance__menu {
	position: absolute;
	inset-block-start: calc( 100% + var( --tdf-space-3xs ) );
	inset-inline-end: 0;
	z-index: 30;
	min-width: 11rem;
	padding-block: var( --tdf-space-3xs );
	background-color: var( --tdf-surface );
	border: var( --tdf-border ) solid var( --tdf-rule-strong );
	border-radius: var( --tdf-radius );
}

.tdf-appearance__options {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.tdf-appearance__option {
	display: flex;
	align-items: center;
	gap: var( --tdf-space-xs );
	min-height: 44px;
	padding-inline: var( --tdf-space-sm );
	font-family: var( --tdf-font-ui );
	font-size: var( --tdf-text-meta );
	color: var( --tdf-ink );
	cursor: pointer;
}

.tdf-appearance__option:hover {
	background-color: var( --tdf-accent-wash );
	color: var( --tdf-ink-strong );
}

.tdf-appearance__option input {
	width: 1rem;
	height: 1rem;
	margin: 0;
	accent-color: var( --tdf-accent );
}

.tdf-appearance__option:has( input:checked ) {
	color: var( --tdf-ink-strong );
	font-weight: 600;
}

/*
 * MEGA-MENU
 *
 * Opens on click, not hover. A hover menu is unreachable by touch and it opens
 * by accident when a pointer crosses it on the way somewhere else. It is a plain
 * grid of links grouped by parent destination — no imagery, no promotional
 * panel, no third column of "featured" anything.
 *
 * Built on native <details>/<summary>. That is a real disclosure widget: keyboard
 * operable, announced with its expanded state, and open by default when CSS or
 * scripting is unavailable. There is no JavaScript behind it at all.
 */
.tdf-megamenu {
	border-block-end: var( --tdf-border ) solid var( --tdf-rule-strong );
	background-color: var( --tdf-surface );
}

.tdf-megamenu__toggle {
	display: block;
	padding-block: var( --tdf-space-xs );
	font-family: var( --tdf-font-ui );
	font-size: var( --tdf-text-meta );
	font-weight: 500;
	color: var( --tdf-ink );
	cursor: pointer;
	list-style: none;   /* the default triangle is replaced below */
}

/* Safari still paints the marker without this. */
.tdf-megamenu__toggle::-webkit-details-marker {
	display: none;
}

/* A text caret, not an icon font — it survives with the stylesheet off and costs
 * no request. It rotates rather than swapping glyphs so the label never shifts. */
.tdf-megamenu__toggle > .tdf-container::after {
	content: '\203A';   /* › */
	display: inline-block;
	margin-inline-start: var( --tdf-space-2xs );
	color: var( --tdf-rule-strong );
	transform: rotate( 90deg );
	transition: transform var( --tdf-duration ) var( --tdf-ease );
}

.tdf-megamenu[open] .tdf-megamenu__toggle > .tdf-container::after {
	transform: rotate( -90deg );
}

.tdf-megamenu__toggle:hover {
	color: var( --tdf-accent-deep );
}

.tdf-megamenu__grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
	gap: var( --tdf-grid-gap );
	padding-block: var( --tdf-space-lg );
}

.tdf-megamenu__group-title {
	margin-block-end: var( --tdf-space-2xs );
	padding-block-end: var( --tdf-space-3xs );
	border-block-end: var( --tdf-border ) solid var( --tdf-rule );
	font-family: var( --tdf-font-ui );
	font-size: var( --tdf-text-label );
	font-weight: 600;
	letter-spacing: var( --tdf-tracking-label );
	text-transform: uppercase;
	color: var( --tdf-ink-muted );
}

.tdf-megamenu__grid ul {
	display: grid;
	gap: var( --tdf-space-3xs );
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Measured at 20px before D2 — the worst offender on the site, and the only one
 * actually below WCAG 2.2 SC 2.5.8's 24px floor without a spacing exception to fall
 * back on, since these stack 4px apart in a dense grid. 32px plus that gap gives a
 * 36px pitch. Not pushed to 44px: a destination list is scanned, and 44px rows would
 * make a twenty-destination menu a scrolling chore.
 */
.tdf-megamenu__grid a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	font-family: var( --tdf-font-ui );
	font-size: var( --tdf-text-meta );
	color: var( --tdf-ink );
	text-decoration: none;
}

.tdf-megamenu__grid a:hover {
	color: var( --tdf-accent-deep );
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* ---------------------------------------------------------------------------
 * BREADCRUMBS
 *
 * Small, quiet, and never a decorative chevron font — the separator is a real
 * character in the markup so it survives with CSS off.
 * ------------------------------------------------------------------------ */

.tdf-breadcrumbs {
	margin-block-end: var( --tdf-space-sm );
	font-family: var( --tdf-font-ui );
	font-size: var( --tdf-text-meta );
	color: var( --tdf-ink-muted );
}

.tdf-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var( --tdf-space-3xs ) var( --tdf-space-2xs );
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Each crumb centres its separator, link and current-page label on one line — the
 * current page used to sit 4px above its links (measured 2026-09-13). */
.tdf-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
}

.tdf-breadcrumbs__item + .tdf-breadcrumbs__item::before {
	content: '\203A';   /* › */
	margin-inline-end: var( --tdf-space-2xs );
	color: var( --tdf-rule-strong );
}

/*
 * Measured at 20px at 360px wide — below the SC 2.5.8 floor, and breadcrumbs are
 * navigation chrome rather than inline editorial prose, so enlarging them costs no
 * reading flow. 32px, not 44px: a breadcrumb trail is dense by nature and 44px rows
 * would push the page heading off a phone screen to solve a smaller problem.
 */
.tdf-breadcrumbs a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	color: var( --tdf-ink-muted );
	text-decoration-color: var( --tdf-rule-strong );
}

.tdf-breadcrumbs a:hover {
	color: var( --tdf-accent-deep );
}

.tdf-breadcrumbs [aria-current='page'] {
	color: var( --tdf-ink );
}

/* ---------------------------------------------------------------------------
 * GUIDE OPENING (D-056)
 *
 * Wide screens: the title and standfirst sit ON the photograph, over a shade that
 * covers only the side the text occupies and is gone before the middle of the
 * frame, so the subject of the photograph stays untouched. Which side carries the
 * text is chosen per guide (`hero_text_side`), because only the photograph knows
 * where its calm tone is. Narrow screens: the title comes first, on the page, and
 * the photograph follows at its natural 3:2 — a phone gets the whole view at half
 * the height of a portrait crop, and reaches the article sooner.
 *
 * The DOM order is the same at every width — title, standfirst, photograph — so a
 * screen reader always hears what the page is before anything else. Only the wide
 * layout lays the text over the image.
 *
 * The photograph spans the content width, not the viewport: a 2200px original on a
 * Retina laptop is sharp at 1120px (ratio 0.98) and soft edge to edge (0.76).
 * ------------------------------------------------------------------------ */

.tdf-guide__header {
	margin-block-end: var( --tdf-space-lg );
}

.tdf-guide__intro {
	max-width: var( --tdf-measure-wide );
}

.tdf-guide__eyebrow {
	margin-block-end: var( --tdf-space-2xs );
	font-family: var( --tdf-font-ui );
	font-size: var( --tdf-text-label );
	font-weight: 600;
	letter-spacing: var( --tdf-tracking-label );
	text-transform: uppercase;
	color: var( --tdf-accent );
}

.tdf-guide__title {
	margin: 0;
	font-size: var( --tdf-text-h1 );
	font-weight: var( --tdf-weight-display );
	line-height: var( --tdf-leading-display );
	letter-spacing: var( --tdf-tracking-display );
}

.tdf-guide__subtitle {
	max-width: var( --tdf-measure-narrow );
	margin-block-start: var( --tdf-space-sm );
	font-family: var( --tdf-font-editorial );
	font-size: var( --tdf-text-lede );
	font-weight: 400;
	line-height: 1.42;
	color: var( --tdf-ink-muted );
}

.tdf-guide__hero {
	position: relative;
	margin: var( --tdf-space-md ) 0 0;
}

/* WordPress-media hero: one original, cropped live to its natural 3:2 (D-056). The
 * R2 path keeps its §13.1 rendition crops, under IMAGE TREATMENT below. */
.tdf-guide__hero .tdf-picture--wp-media img {
	aspect-ratio: var( --tdf-ratio-hero-media );
}

.tdf-guide__hero-credit {
	margin-block-start: var( --tdf-space-3xs );
	font-family: var( --tdf-font-ui );
	font-size: var( --tdf-text-label );
	color: var( --tdf-ink-muted );
}

/* Byline, read time, review date: one quiet line on the page's left edge. */
.tdf-guide__byline {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var( --tdf-space-3xs ) var( --tdf-space-xs );
	margin-block-start: var( --tdf-space-sm );
	font-family: var( --tdf-font-ui );
	font-size: var( --tdf-text-meta );
	color: var( --tdf-ink-muted );
}

.tdf-guide__byline p {
	margin: 0;
}

/* A middle dot between items, drawn by CSS: without the stylesheet the items simply
 * stack, which reads just as well. */
.tdf-guide__byline p + p::before {
	content: '\00B7';
	margin-inline-end: var( --tdf-space-xs );
	color: var( --tdf-rule-strong );
}

@media ( max-width: 47.99em ) {

	/* Edge to edge on a phone: the gutter would only shrink the photograph. */
	.tdf-guide__hero {
		margin-inline: calc( var( --tdf-gutter ) * -1 );
	}

	.tdf-guide__hero-credit {
		padding-inline: var( --tdf-gutter );
	}
}

@media ( min-width: 62em ) {

	/*
	 * 21:9 is the band's PREFERRED shape — 480px at the full 1120px width — not a cap.
	 * With no explicit min/max height and visible overflow, an aspect-ratio box grows
	 * to fit its content, so a long title makes the band taller instead of being cut
	 * off (a 100-character title measured 683px of text in a 625px band, 2026-09-13).
	 */
	.tdf-guide__opening--image {
		--tdf-focal: 50% 65%;   /* landscapes and aerials: keep the land, give up sky */

		position: relative;
		display: flex;
		align-items: center;
		aspect-ratio: var( --tdf-ratio-opening );
		background-color: var( --tdf-paper-sunk );
	}

	.tdf-guide__opening--text-right {
		--tdf-scrim-angle: 270deg;   /* dark at the right edge, clear by the middle */

		justify-content: flex-end;
	}

	.tdf-guide__opening--image .tdf-guide__hero {
		position: absolute;
		inset: 0;
		margin: 0;
		overflow: hidden;
	}

	.tdf-guide__opening--image .tdf-picture,
	.tdf-guide__opening--image .tdf-picture img {
		width: 100%;
		height: 100%;
	}

	.tdf-guide__opening--image .tdf-picture img {
		aspect-ratio: auto;
	}

	/*
	 * THE ONE GRADIENT (D-055). It exists to make type readable on a photograph, not
	 * to decorate one: strongest at the edge the text sits on, clear before the middle
	 * of the frame. Contrast is measured on the rendered pixels behind the text.
	 *
	 * The stops were widened on 2026-09-16 (D-074). At 0.7/0.46 over 34%/62% the subtitle
	 * measured 2.39:1 on Where to Stay and 4.26:1 on Beaches over their own photographs,
	 * against the 4.5:1 that text size requires. Bright sky, sand and sunlit lawn all fall
	 * inside the text column of an aerial, and no focal point or title side avoids them
	 * without cropping the subject out of the frame.
	 *
	 * Since 2026-09-17 the same declaration also shades the homepage band's photograph
	 * (D-076). The band changes the stop colours, never this declaration, so the system
	 * still has one gradient.
	 */
	.tdf-guide__opening--image .tdf-guide__hero::after,
	.tdf-home-hero__photo::after {
		content: '';
		position: absolute;
		inset: 0;
		pointer-events: none;
		background-image: linear-gradient( var( --tdf-scrim-angle ), var( --tdf-scrim-strong ) 0%, var( --tdf-scrim-carry ) 46%, var( --tdf-scrim-none ) 72% );
	}

	.tdf-guide__opening--image .tdf-guide__intro {
		position: relative;
		z-index: 1;
		max-width: min( 34rem, 50% );
		padding: var( --tdf-space-xl );
	}

	.tdf-guide__opening--image .tdf-guide__title {
		font-size: clamp( 2.5rem, 3.8vw, 3.5rem );
		color: var( --tdf-on-image );
	}

	.tdf-guide__opening--image .tdf-guide__eyebrow {
		color: var( --tdf-on-image-muted );
	}

	/*
	 * The subtitle carries the sentence saying what the guide answers, so over a
	 * photograph it reads as text rather than as a caption: full on-image ink here,
	 * muted only on paper. Worth 0.4:1 of the measured gain; the gradient is the rest
	 * (D-074).
	 */
	.tdf-guide__opening--image .tdf-guide__subtitle {
		color: var( --tdf-on-image );
	}

	.tdf-guide__opening--image .tdf-guide__hero-credit {
		position: absolute;
		inset-block-end: var( --tdf-space-2xs );
		inset-inline-end: var( --tdf-space-sm );
		z-index: 1;
		margin: 0;
		padding: 0 var( --tdf-space-3xs );
		background-color: var( --tdf-scrim-mid );
		color: var( --tdf-on-image-muted );
	}
}

/* HUB HERO (destination). A wide band, with the title on paper below it —
 * never text burned into the photograph. */
.tdf-hub__hero {
	margin-block-end: var( --tdf-space-lg );
}

.tdf-hub__title {
	font-size: var( --tdf-text-display );
	line-height: var( --tdf-leading-display );
	letter-spacing: var( --tdf-tracking-display );
}

.tdf-hub__intro {
	max-width: var( --tdf-measure );
	margin-block-start: var( --tdf-space-sm );
	font-family: var( --tdf-font-editorial );
	font-size: var( --tdf-text-lede );
	color: var( --tdf-ink-muted );
}

/* ---------------------------------------------------------------------------
 * IMAGE TREATMENT
 *
 * aspect-ratio reserves the box in CSS as well as the width/height attributes
 * the helper emits (§13.5). Belt and braces on purpose: the attributes cover the
 * no-CSS case, the ratio covers a container narrower than the intrinsic size.
 * ------------------------------------------------------------------------ */

.tdf-picture {
	display: block;
}

.tdf-picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var( --tdf-focal );
	border-radius: var( --tdf-radius-media );
	background-color: var( --tdf-paper-sunk );   /* the box is visible before the pixels land, in either appearance */
}

.tdf-picture--hero img { aspect-ratio: var( --tdf-ratio-hero ); }
.tdf-picture--card img,
.tdf-picture--card-lg img,
.tdf-picture--lead img,
.tdf-picture--row img,
.tdf-picture--thumb img { aspect-ratio: var( --tdf-ratio-card ); }
.tdf-picture--square img { aspect-ratio: var( --tdf-ratio-square ); }

/* A lead story's WordPress upload keeps its natural 3:2 — the whole view, as the
 * article shows it on a phone (D-056, D-060). An R2 lead keeps its 4:3 rendition. */
.tdf-picture--lead.tdf-picture--wp-media img { aspect-ratio: var( --tdf-ratio-hero-media ); }

@media ( max-width: 47.99em ) {

	.tdf-picture--hero img { aspect-ratio: var( --tdf-ratio-hero-mob ); }
}

/* Focal point for a live object-fit crop (WordPress-media path only — centre is the
 * default). Set as a custom property so an enclosing layout can supply its own
 * default and the editor's explicit choice still wins. */
.tdf-picture--focal-top { --tdf-focal: 50% 0%; }
.tdf-picture--focal-bottom { --tdf-focal: 50% 100%; }
.tdf-picture--focal-left { --tdf-focal: 0% 50%; }
.tdf-picture--focal-right { --tdf-focal: 100% 50%; }

/* ---------------------------------------------------------------------------
 * GUIDE LAYOUT — reading column + contents rail (§8.2, D-058)
 *
 * The reading column starts on the page's single left edge. Above 62em the
 * contents sit in a rail on the right that stays in view while the reader moves
 * through the article and stops where the article stops — it is sticky INSIDE its
 * own grid column, so it can never ride over the footer. Below 62em the contents
 * are a closed disclosure above the article instead.
 * ------------------------------------------------------------------------ */

.tdf-guide__layout {
	margin-block-start: var( --tdf-space-lg );
}

.tdf-guide__main {
	min-width: 0;
}

.tdf-guide__sidebar {
	display: flex;
	flex-direction: column;
	gap: var( --tdf-space-md );
}

@media ( min-width: 62em ) {

	.tdf-guide__layout {
		display: grid;
		grid-template-columns: minmax( 0, var( --tdf-measure ) ) minmax( 13rem, 16rem );
		justify-content: space-between;
		column-gap: var( --tdf-space-xl );
	}

	.tdf-guide-toc--rail {
		position: sticky;
		top: var( --tdf-space-lg );
		max-height: calc( 100vh - ( 2 * var( --tdf-space-lg ) ) );
		overflow-y: auto;
	}

	.tdf-guide-toc--compact {
		display: none;
	}
}

@media ( max-width: 61.99em ) {

	.tdf-guide-toc--rail {
		display: none;
	}

	/* Only when something other than the (hidden) rail is in it. */
	.tdf-guide__sidebar:has( > :not( .tdf-guide-toc--rail ) ) {
		margin-block-start: var( --tdf-space-lg );
	}
}

/* The heading a reader jumped to gets a brief wash — feedback that works with or
 * without the script. */
.tdf-guide__content :target {
	background-color: var( --tdf-accent-wash );
}

/*
 * CONTENTS (D-058)
 *
 * Quiet by design: no box, a hairline down the side, the five main sections
 * numbered and the lodging sub-sections indented without numbers. The section being
 * read carries a claret marker — set by assets/js/tdf.js as aria-current, so the
 * state is announced as well as drawn.
 */
.tdf-guide-toc {
	font-family: var( --tdf-font-ui );
}

.tdf-guide-toc__label {
	margin: 0 0 var( --tdf-space-xs );
	font-size: var( --tdf-text-label );
	font-weight: 600;
	letter-spacing: var( --tdf-tracking-label );
	text-transform: uppercase;
	color: var( --tdf-ink-muted );
}

.tdf-guide-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: tdf-toc;
}

.tdf-guide-toc--rail .tdf-guide-toc__list {
	border-inline-start: var( --tdf-border ) solid var( --tdf-rule );
}

.tdf-guide-toc__item--main {
	counter-increment: tdf-toc;
}

.tdf-guide-toc__item a {
	display: flex;
	align-items: baseline;
	gap: var( --tdf-space-xs );
	margin-inline-start: calc( var( --tdf-border ) * -1 );
	padding-block: 0.4375rem;
	padding-inline: var( --tdf-space-sm ) 0;
	border-inline-start: var( --tdf-border-heavy ) solid transparent;
	font-size: var( --tdf-text-meta );
	line-height: var( --tdf-leading-tight );
	color: var( --tdf-ink-muted );
	text-decoration: none;
	transition: color var( --tdf-duration ) var( --tdf-ease ),
	            border-color var( --tdf-duration ) var( --tdf-ease );
}

.tdf-guide-toc__item--main > a::before {
	content: counter( tdf-toc );
	flex: 0 0 1.1em;
	font-variant-numeric: tabular-nums;
	color: var( --tdf-ink-muted );
}

.tdf-guide-toc__item--sub > a {
	padding-inline-start: calc( var( --tdf-space-sm ) + 1.1em + var( --tdf-space-xs ) );
	font-size: 0.875rem;
}

.tdf-guide-toc__item a:hover {
	color: var( --tdf-ink-strong );
}

.tdf-guide-toc__item a[aria-current='true'] {
	color: var( --tdf-ink-strong );
	border-inline-start-color: var( --tdf-accent );
}

.tdf-guide-toc__item--main > a[aria-current='true']::before {
	color: var( --tdf-accent );
}

/* Narrow screens: a closed disclosure with an unmistakable arrow. Native <details>
 * gives the keyboard handling and the expanded state for free. */
.tdf-guide-toc--compact {
	margin-block-start: var( --tdf-space-md );
	border-block: var( --tdf-border ) solid var( --tdf-rule );
}

.tdf-guide-toc__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --tdf-space-sm );
	min-height: 3rem;
	font-size: var( --tdf-text-meta );
	font-weight: 600;
	color: var( --tdf-ink-strong );
	cursor: pointer;
	list-style: none;
}

.tdf-guide-toc__summary::-webkit-details-marker {
	display: none;
}

/* The arrow: two borders of a small square, rotated — no glyph, no icon font. It
 * points down when closed and up when open. */
.tdf-guide-toc__summary::after {
	content: '';
	flex: 0 0 auto;
	width: 0.5625rem;
	height: 0.5625rem;
	margin-inline-end: var( --tdf-space-3xs );
	border-inline-end: var( --tdf-border-heavy ) solid var( --tdf-accent );
	border-block-end: var( --tdf-border-heavy ) solid var( --tdf-accent );
	transform: translateY( -0.1875rem ) rotate( 45deg );
	transition: transform var( --tdf-duration ) var( --tdf-ease );
}

.tdf-guide-toc--compact[open] > .tdf-guide-toc__summary::after {
	transform: translateY( 0.1875rem ) rotate( -135deg );
}

.tdf-guide-toc--compact .tdf-guide-toc__list {
	padding-block-end: var( --tdf-space-xs );
}

.tdf-guide-toc--compact .tdf-guide-toc__item a {
	align-items: center;
	min-height: 44px;
	margin-inline-start: 0;
	padding-block: 0;
	padding-inline-start: 0;
	border-inline-start: 0;
}

.tdf-guide-toc--compact .tdf-guide-toc__item--sub > a {
	padding-inline-start: calc( 1.1em + var( --tdf-space-xs ) );
}

.tdf-guide-sidebar__trust,
.tdf-guide-sidebar__explore {
	font-family: var( --tdf-font-ui );
	font-size: var( --tdf-text-meta );
	color: var( --tdf-ink-muted );
	padding-top: var( --tdf-space-sm );
	border-top: var( --tdf-border ) solid var( --tdf-rule );
	margin: 0;
}

.tdf-guide-sidebar__explore a {
	color: var( --tdf-accent );
	font-weight: 600;
	text-decoration: none;
}

.tdf-guide-sidebar__explore a:hover {
	color: var( --tdf-accent-deep );
}

/* ---------------------------------------------------------------------------
 * CARD FAMILY
 *
 * One skeleton, two skins. Cards sit on the ground with a hairline and NO shadow —
 * a drop shadow reads as a floating SaaS tile, and depth here comes from the rule
 * and the space around it.
 * ------------------------------------------------------------------------ */

.tdf-card-list {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
	gap: var( --tdf-grid-gap );
	align-items: start;   /* cards size to content; no stretched blanks */
}

/*
 * The card is positioned so its title link can cover it (D-061): the photograph and
 * the text open the guide, while a keyboard or screen-reader user meets ONE stop,
 * named by the guide's own title. A live hub's link in the kicker sits above the cover.
 */
.tdf-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var( --tdf-space-2xs );
	background-color: transparent;
}

.tdf-card__media {
	overflow: hidden;
	margin-block-end: var( --tdf-space-3xs );
	border-radius: var( --tdf-radius-media );
}

.tdf-card__body > * + * {
	margin-block-start: var( --tdf-space-2xs );
}

/* The kicker: where the guide is, and its own label when it has one. Claret caps, like
 * the article's eyebrow (the label style is set with the other labels at the top of
 * this file); a middle dot drawn in CSS separates the two parts. The destination is a
 * link only when its hub is live (D-057), and reads the same either way. */
.tdf-card__kicker,
.tdf-lead__kicker {
	color: var( --tdf-accent );
}

.tdf-card__kicker > * + *::before {
	content: '\00B7';
	margin-inline: var( --tdf-space-2xs );
	color: var( --tdf-rule-strong );
}

/* 24px tall (SC 2.5.8): the card's stretched link surrounds it, so it cannot lean on
 * the spacing exception. Not 44px, which would make a linked kicker taller than an
 * unlinked one. */
.tdf-card__kicker a,
.tdf-lead__kicker a {
	position: relative;
	z-index: 1;   /* above the stretched link */
	display: inline-flex;
	align-items: center;
	min-height: 1.5rem;
	color: inherit;
	text-decoration: none;
}

.tdf-card__kicker a:hover,
.tdf-lead__kicker a:hover {
	color: var( --tdf-accent-deep );
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.tdf-card__title {
	font-size: var( --tdf-text-h3 );
	line-height: var( --tdf-leading-tight );
	letter-spacing: var( --tdf-tracking-heading );
	text-wrap: balance;
	overflow-wrap: break-word;
}

.tdf-card__link {
	color: var( --tdf-ink-strong );
	text-decoration: none;
}

.tdf-card__link::after {
	content: '';
	position: absolute;
	inset: 0;
}

.tdf-card__link:hover {
	color: var( --tdf-accent-deep );
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.14em;
}

/* Where :has() is supported the focus ring goes round the whole card — what the link
 * opens — and the title drops its own; elsewhere the title keeps the ordinary ring. */
@supports selector( :has( * ) ) {

	.tdf-card:has( .tdf-card__link:focus-visible ) {
		outline: var( --tdf-focus-width ) solid var( --tdf-focus-color );
		outline-offset: var( --tdf-space-2xs );
	}

	.tdf-card__link:focus-visible {
		outline: none;
	}
}

.tdf-card__subtitle,
.tdf-card__intro {
	font-size: var( --tdf-text-body-sm );
	line-height: 1.5;
	color: var( --tdf-ink-muted );
}

/* Read time: quiet, and set a little apart from the text it measures. */
.tdf-card__body > .tdf-card__meta {
	margin-block-start: var( --tdf-space-xs );
}

.tdf-card__meta {
	font-family: var( --tdf-font-ui );
	font-size: var( --tdf-text-label );
	font-variant-numeric: tabular-nums;
	color: var( --tdf-ink-muted );
}

/* Destination card: the one card that carries a rule, because a hub is a place
 * rather than an article and the rule distinguishes it in a mixed grid. */
.tdf-card--destination {
	padding-block-end: var( --tdf-space-sm );
	border-block-end: var( --tdf-border ) solid var( --tdf-rule-strong );
}

/* The image lifts very slightly on hover. It is the only scale transform in the
 * system, it is 1.5%, and it is off entirely under reduced motion. */
.tdf-card__media img,
.tdf-lead__media img {
	transition: transform var( --tdf-duration-slow ) var( --tdf-ease );
}

@media ( hover: hover ) and ( prefers-reduced-motion: no-preference ) {

	.tdf-card:hover .tdf-card__media img,
	.tdf-lead:hover .tdf-lead__media img {
		transform: scale( 1.015 );
	}
}

/* ---------------------------------------------------------------------------
 * HUB SECTIONS AND EDITORIAL FURNITURE
 * ------------------------------------------------------------------------ */

.tdf-hub-section {
	margin-block: var( --tdf-section-pad-tight );
}

.tdf-hub-section__heading {
	margin-block-end: var( --tdf-space-md );
	padding-block-end: var( --tdf-space-3xs );
	border-block-end: var( --tdf-border ) solid var( --tdf-rule-strong );
	font-size: var( --tdf-text-h2 );
}

/* A hub section's own copy (section_intro) reads like the long intro: held to the
 * reading measure, its paragraphs spaced, so a two-paragraph intro never runs the
 * full container as one block (D-071). */
.tdf-hub-section__body {
	max-width: var( --tdf-measure );
}

.tdf-hub-section__body > * + * {
	margin-block-start: var( --tdf-space-md );
}

/* All Guides — the crawl guarantee (§11.5). A dense, quiet index. It is a list
 * of links and must never become a card grid: its job is completeness. */
.tdf-all-guides {
	columns: 2;
	column-gap: var( --tdf-grid-gap );
	margin: 0;
	padding: 0;
	list-style: none;
}

.tdf-all-guides__item {
	break-inside: avoid;
	font-size: var( --tdf-text-body-sm );
}

/* 44px targets, as in the footer: the list is navigation, and a column of 19px
 * links is too tight to tap once a hub has more than one guide (D-071). */
.tdf-all-guides__item a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

@media ( max-width: 47.99em ) {

	.tdf-all-guides { columns: 1; }
}

/* Quick facts — a label/value ledger, right-aligned values so they scan. */
.tdf-quick-facts {
	margin: 0;
	font-family: var( --tdf-font-ui );
	font-size: var( --tdf-text-meta );
}

.tdf-quick-facts__row {
	display: flex;
	justify-content: space-between;
	gap: var( --tdf-space-md );
	padding-block: var( --tdf-space-2xs );
	border-block-end: var( --tdf-border ) solid var( --tdf-rule );
}

.tdf-quick-facts dt {
	color: var( --tdf-ink-muted );
}

.tdf-quick-facts dd {
	margin: 0;
	text-align: end;
	font-variant-numeric: tabular-nums;
}

/* Quick answer / takeaways — recessed bands, not tinted boxes. The ground
 * changes; the ink does not. They sit on the reading column's left edge. */
.tdf-guide__quick-answer,
.tdf-guide__takeaways {
	max-width: var( --tdf-measure );
	margin: 0 0 var( --tdf-space-lg );
	padding: var( --tdf-space-md );
	background-color: var( --tdf-paper-sunk );
	border-inline-start: var( --tdf-border-heavy ) solid var( --tdf-accent );
}

.tdf-guide__quick-answer-heading,
.tdf-guide__takeaways-heading {
	margin-block-end: var( --tdf-space-2xs );
	font-family: var( --tdf-font-ui );
	font-size: var( --tdf-text-label );
	font-weight: 600;
	letter-spacing: var( --tdf-tracking-label );
	text-transform: uppercase;
	color: var( --tdf-ink-muted );
}

.tdf-guide__quick-answer p {
	margin: 0;
	font-size: var( --tdf-text-lede );
	line-height: 1.5;
}

/*
 * THE COMMERCIAL RECOMMENDATION — on the reading column, after the content (§16.1).
 */
.tdf-guide__commercial {
	max-width: var( --tdf-measure );
	margin: var( --tdf-space-2xl ) 0 0;
	padding-block-start: var( --tdf-space-md );
	border-block-start: var( --tdf-border ) solid var( --tdf-rule-strong );
	font-family: var( --tdf-font-ui );
	font-size: var( --tdf-text-meta );
}

/*
 * SOURCES AND REFERENCES (D-072) — the last section of a guide page, below the
 * related guides and the hub link-back, closed by default.
 *
 * The summary is the only control: a 44px row in the label style the old "Sources"
 * heading used. The references are plain text, never links (the site links only its
 * owners' websites), so each is a compact row rather than a 44px target. Long titles
 * wrap inside the reading measure.
 */
.tdf-guide-sources {
	margin-block-start: var( --tdf-section-pad-tight );
	border-block-start: var( --tdf-border ) solid var( --tdf-rule-strong );
	font-family: var( --tdf-font-ui );
}

.tdf-guide-sources__summary {
	display: flex;
	align-items: center;
	gap: var( --tdf-space-xs );
	min-height: 44px;
	cursor: pointer;
	list-style: none;
	font-size: var( --tdf-text-label );
	font-weight: 600;
	letter-spacing: var( --tdf-tracking-label );
	text-transform: uppercase;
	color: var( --tdf-ink-muted );
}

.tdf-guide-sources__summary::-webkit-details-marker {
	display: none;
}

.tdf-guide-sources__summary::after {
	content: "";
	inline-size: 0.5em;
	block-size: 0.5em;
	margin-inline-start: var( --tdf-space-2xs );
	border-inline-end: 1.5px solid currentColor;
	border-block-end: 1.5px solid currentColor;
	transform: translateY( -0.15em ) rotate( 45deg );
}

.tdf-guide-sources__details[open] > .tdf-guide-sources__summary::after {
	transform: translateY( 0.1em ) rotate( -135deg );
}

.tdf-guide-sources__summary:hover {
	color: var( --tdf-ink );
}

.tdf-guide-sources__count {
	font-weight: 400;
	letter-spacing: 0;
}

.tdf-guide-sources .tdf-sources {
	max-width: var( --tdf-measure );
	padding-block-end: var( --tdf-space-md );
	font-size: var( --tdf-text-meta );
	color: var( --tdf-ink-muted );
}

.tdf-sources__item {
	padding-block: var( --tdf-space-2xs );
	line-height: var( --tdf-leading-tight );
	overflow-wrap: anywhere;
}

.tdf-sources__item + .tdf-sources__item {
	border-block-start: var( --tdf-border ) solid var( --tdf-rule );
}

.tdf-related,
.tdf-hub-linkback {
	margin-block-start: var( --tdf-section-pad-tight );
	padding-block-start: var( --tdf-space-md );
	border-block-start: var( --tdf-border ) solid var( --tdf-rule-strong );
}

.tdf-related__heading,
.tdf-hub-linkback__heading {
	margin-block-end: var( --tdf-space-md );
	font-size: var( --tdf-text-h2 );
}

/* ---------------------------------------------------------------------------
 * FILTERS (Guide Explorer) — real links, styled as text, never as chips
 * ------------------------------------------------------------------------ */

.tdf-filters {
	margin-block-end: var( --tdf-space-xl );
	padding-block: var( --tdf-space-md );
	border-block: var( --tdf-border ) solid var( --tdf-rule-strong );
}

.tdf-filters__group + .tdf-filters__group {
	margin-block-start: var( --tdf-space-md );
}

/* From 48em the groups sit side by side, so the filters take one band, not a column. */
@media ( min-width: 48em ) {

	.tdf-filters {
		display: grid;
		grid-template-columns: repeat( auto-fit, minmax( 12rem, 1fr ) );
		gap: var( --tdf-space-md ) var( --tdf-space-xl );
	}

	.tdf-filters__group + .tdf-filters__group {
		margin-block-start: 0;
	}
}

.tdf-filters__legend {
	margin-block-end: var( --tdf-space-2xs );
	font-size: var( --tdf-text-label );
}

.tdf-filters__list {
	display: flex;
	flex-wrap: wrap;
	gap: var( --tdf-space-2xs ) var( --tdf-space-md );
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 44px targets: a filter is navigation, like the masthead's links. */
.tdf-filters__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-family: var( --tdf-font-ui );
	font-size: var( --tdf-text-meta );
	color: var( --tdf-ink );
	text-decoration: none;
	border-block-end: var( --tdf-border-heavy ) solid transparent;
}

.tdf-filters__link:hover {
	color: var( --tdf-accent-deep );
	border-block-end-color: var( --tdf-rule-strong );
}

.tdf-filters__link.is-active,
.tdf-filters__link[aria-current] {
	color: var( --tdf-accent-deep );
	font-weight: 600;
	border-block-end-color: var( --tdf-accent );
}

/* ---------------------------------------------------------------------------
 * PAGINATION — crawlable, and visually quiet (§11.5)
 * ------------------------------------------------------------------------ */

.wp-block-query-pagination,
.navigation.pagination {
	margin-block-start: var( --tdf-section-pad-tight );
	padding-block-start: var( --tdf-space-md );
	border-block-start: var( --tdf-border ) solid var( --tdf-rule-strong );
	font-family: var( --tdf-font-ui );
	font-size: var( --tdf-text-meta );
}

.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var( --tdf-space-2xs );
	align-items: center;
}

.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: var( --tdf-space-2xs );
	border: var( --tdf-border ) solid transparent;
	border-radius: var( --tdf-radius );
	color: var( --tdf-ink );
	text-decoration: none;
}

.navigation.pagination a.page-numbers:hover {
	border-color: var( --tdf-rule-strong );
	color: var( --tdf-accent-deep );
}

.navigation.pagination .page-numbers.current {
	background-color: var( --tdf-accent );
	color: var( --tdf-on-accent );
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * FOOTER
 * ------------------------------------------------------------------------ */

/* No top margin: <main>'s own bottom padding is the space before the footer. A second
 * section-sized margin here doubled it to about 200px on a desktop (2026-09-13). */
.tdf-site-footer {
	padding-block: var( --tdf-space-lg );
	border-block-start: var( --tdf-border ) solid var( --tdf-rule-strong );
	font-family: var( --tdf-font-ui );
	font-size: var( --tdf-text-meta );
	color: var( --tdf-ink-muted );
}

/* ---------------------------------------------------------------------------
 * TERM INDEXES AND ARCHIVES
 * ------------------------------------------------------------------------ */

/* The article's own h1 scale: a listing title is a page title, not a poster. */
.tdf-archive__title,
.tdf-term__title {
	font-size: var( --tdf-text-h1 );
	line-height: var( --tdf-leading-display );
	letter-spacing: var( --tdf-tracking-display );
}

.tdf-term__intro {
	max-width: var( --tdf-measure );
	margin-block-start: var( --tdf-space-sm );
	font-family: var( --tdf-font-editorial );
	font-size: var( --tdf-text-lede );
	color: var( --tdf-ink-muted );
}

.tdf-term-group {
	margin-block: var( --tdf-section-pad-tight );
}

.tdf-term-group__heading {
	margin-block-end: var( --tdf-space-md );
	padding-block-end: var( --tdf-space-3xs );
	border-block-end: var( --tdf-border ) solid var( --tdf-rule-strong );
	font-size: var( --tdf-text-h2 );
}

.tdf-term-group__heading a {
	color: var( --tdf-ink-strong );
	text-decoration: none;
}

.tdf-term-group__heading a:hover {
	color: var( --tdf-accent-deep );
}

.tdf-no-results {
	max-width: var( --tdf-measure );
	color: var( --tdf-ink-muted );
}

.tdf-archive__header,
.tdf-hub__header,
.tdf-term__header {
	margin-block-end: var( --tdf-space-xl );
}

.tdf-archive__intro {
	max-width: var( --tdf-measure );
	margin-block-start: var( --tdf-space-xs );
	font-family: var( --tdf-font-editorial );
	font-size: var( --tdf-text-lede );
	line-height: 1.42;
	color: var( --tdf-ink-muted );
}

/* A way back out of a filtered view, including one that matched nothing. */
.tdf-filters__reset {
	margin-block-end: var( --tdf-space-lg );
	font-family: var( --tdf-font-ui );
	font-size: var( --tdf-text-meta );
}

.tdf-filters__reset a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* ---------------------------------------------------------------------------
 * LEAD STORIES — the homepage lead (D-060) and the Guide Explorer's newest guide (D-061)
 *
 * One story given room: the photograph beside its text from 62em — seven columns to
 * five, text centred on the photograph — and above it below that. Both open on the
 * article's own detail, the short claret rule that starts each of its sections. The
 * photograph's `sizes` (tdf_image_lead_sizes()) describes this grid; change them
 * together.
 * ------------------------------------------------------------------------ */

.tdf-lead {
	position: relative;   /* "Read the guide" is stretched over the whole story */
	margin-block-start: var( --tdf-space-lg );
}

.tdf-lead__media {
	overflow: hidden;
	margin: 0;
}

.tdf-lead__text {
	padding-block-start: var( --tdf-space-md );
}

.tdf-lead__text::before,
.tdf-guides__lead .tdf-card__body::before {
	content: '';
	display: block;
	width: var( --tdf-space-lg );
	margin-block-end: var( --tdf-space-sm );
	border-block-start: var( --tdf-border-heavy ) solid var( --tdf-accent );
}

.tdf-lead__title {
	margin-block-start: var( --tdf-space-2xs );
	font-size: clamp( 2.25rem, 3.4vw, 3.25rem );
	font-weight: var( --tdf-weight-display );
	line-height: var( --tdf-leading-display );
	letter-spacing: var( --tdf-tracking-display );
}

.tdf-lead__dek {
	max-width: 24em;
	margin-block-start: var( --tdf-space-sm );
	font-family: var( --tdf-font-editorial );
	font-size: var( --tdf-text-lede );
	line-height: 1.42;
	color: var( --tdf-ink-muted );
}

.tdf-lead__action {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var( --tdf-space-md );
	margin-block-start: var( --tdf-space-md );
	font-family: var( --tdf-font-ui );
	font-size: var( --tdf-text-meta );
}

/* The story's one link. Its ::before covers the whole story, so the photograph and the
 * title open the guide too; its ::after is the arrow — two borders of a small square,
 * rotated, like the contents chevron, turned to point onward. */
.tdf-lead__link {
	display: inline-flex;
	align-items: center;
	gap: var( --tdf-space-xs );
	min-height: 44px;
	font-weight: 600;
	color: var( --tdf-accent );
	text-decoration-color: var( --tdf-accent-line );
	text-underline-offset: 0.22em;
}

.tdf-lead__link::before {
	content: '';
	position: absolute;
	inset: 0;
}

.tdf-lead__link::after {
	content: '';
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	border-block-start: var( --tdf-border-heavy ) solid currentColor;
	border-inline-end: var( --tdf-border-heavy ) solid currentColor;
	transform: rotate( 45deg );
}

.tdf-lead__link:hover {
	color: var( --tdf-accent-deep );
	text-decoration-color: currentColor;
}

.tdf-lead__meta {
	color: var( --tdf-ink-muted );
	font-variant-numeric: tabular-nums;
}

/* The Explorer's lead is an ordinary guide card, promoted by its parent. */
.tdf-guides__lead .tdf-card__title {
	font-size: clamp( 1.875rem, 2.8vw, 2.625rem );
	font-weight: var( --tdf-weight-display );
	line-height: 1.1;
	letter-spacing: var( --tdf-tracking-display );
}

.tdf-guides__lead .tdf-card__subtitle {
	max-width: 24em;
	font-family: var( --tdf-font-editorial );
	font-size: var( --tdf-text-lede );
	line-height: 1.42;
}

.tdf-guides__lead .tdf-card__media {
	margin-block-end: var( --tdf-space-sm );
}

/* The grid of the remaining guides starts under a hairline, apart from the lead. */
.tdf-guides__lead + .tdf-guides__grid {
	margin-block-start: var( --tdf-space-xl );
	padding-block-start: var( --tdf-space-xl );
	border-block-start: var( --tdf-border ) solid var( --tdf-rule );
}

@media ( max-width: 47.99em ) {

	/* Edge to edge on a phone, like the article's photograph. */
	.tdf-lead__media,
	.tdf-guides__lead .tdf-card__media {
		margin-inline: calc( var( --tdf-gutter ) * -1 );
	}
}

@media ( min-width: 62em ) {

	.tdf-lead:has( > .tdf-lead__media ),
	.tdf-guides__lead .tdf-card:has( > .tdf-card__media ) {
		display: grid;
		grid-template-columns: minmax( 0, 7fr ) minmax( 0, 5fr );
		column-gap: var( --tdf-space-xl );
		align-items: center;
	}

	.tdf-lead {
		margin-block-start: var( --tdf-space-xl );
	}

	.tdf-lead:has( > .tdf-lead__media ) .tdf-lead__text {
		padding-block-start: 0;
	}

	.tdf-guides__lead .tdf-card__media {
		margin-block-end: 0;
	}
}

.tdf-hub__long-intro {
	max-width: var( --tdf-measure );
	margin-block-end: var( --tdf-section-pad-tight );
}

.tdf-hub__long-intro > p {
	margin-block-end: var( --tdf-space-md );
}

/* ---------------------------------------------------------------------------
 * HOMEPAGE (§8.6, D-060, D-076)
 *
 * The front page is an editorial judgement, not a feed, and the layout says so: the
 * publication's one-line introduction and the search, then the destinations and one
 * lead story (LEAD STORIES, above). Below the opening, sections are separated by space
 * and a single rule, never by alternating background colours — banded backgrounds are
 * how a publication starts to look like a landing page. The one band is the opening
 * itself (D-076). The masthead already names the site, so nothing repeats it at
 * display size.
 * ------------------------------------------------------------------------ */

/* The Guide Explorer and search start close under the masthead, like a guide: each
 * opens on a short heading, and a section's worth of empty paper above it only delays
 * what the reader came for. The homepage's band starts directly under it. */
.tdf-guides,
.tdf-search {
	padding-block-start: var( --tdf-space-lg );
}

.tdf-home {
	padding-block-start: 0;
}

/*
 * THE BAND (D-076). Luis's direction, 2026-09-17, after the MICHELIN Guide's homepage:
 * the introduction and a large search field on the left of a dark band, the photograph
 * showing through a shade that clears towards the subject on the right, and a short
 * caption at the foot of the text naming the place.
 *
 * The band looks the same in both appearances, like the guide opening: its ground
 * belongs to the photograph, not to the page. Every colour inside it is a fixed band
 * token, and the focus ring turns light so that it shows on the band.
 *
 * Below 62em the photograph follows the search, edge to edge, with the caption under it.
 * From 62em it fills the band, under a 70% shade (D-055) on the text side.
 */
.tdf-home-hero {
	--tdf-focus-color: var( --tdf-on-image );

	position: relative;   /* the photograph's box from 62em */
	background-color: var( --tdf-band );
	color: var( --tdf-on-image );
}

.tdf-home-hero__inner {
	display: grid;
	gap: var( --tdf-space-lg );
	padding-block-start: var( --tdf-space-xl );
}

/* With no photograph, the band still closes with space under the way in. */
.tdf-home-hero:not( .tdf-home-hero--image ) .tdf-home-hero__inner {
	padding-block-end: var( --tdf-space-xl );
}

/* A search field stretched across a tablet reads as a form, not a way in. */
.tdf-home-hero__text {
	display: grid;
	gap: var( --tdf-space-lg );
	max-width: 40rem;
}

.tdf-home__title {
	max-width: 14em;
	font-size: clamp( 1.875rem, 3.2vw, 2.75rem );
	line-height: 1.1;
	color: var( --tdf-on-image );
}

.tdf-home__search .tdf-quicklinks {
	margin-block-start: var( --tdf-space-sm );
}

.tdf-home-hero .tdf-quicklinks a {
	color: var( --tdf-on-image );
	border-block-end-color: var( --tdf-band-rule );
}

.tdf-home-hero .tdf-quicklinks a:hover {
	color: var( --tdf-on-image );
	border-block-end-color: var( --tdf-band-accent );
}

.tdf-home-hero__media {
	display: grid;
	gap: var( --tdf-space-sm );
	margin: 0;
	padding-block-end: var( --tdf-space-lg );
}

/* Edge to edge below 62em: the gutter would only shrink the photograph. The band's crops
 * mostly take the top and bottom, so the default keeps a little more above the middle,
 * and where a crop takes the sides it keeps the right, where the subject sits beside the
 * text. The photograph's own focal point still wins. */
.tdf-home-hero__photo {
	--tdf-focal: 70% 45%;

	margin-inline: calc( var( --tdf-gutter ) * -1 );
}

/* Until the pixels land, the box shows the band through it, never a pale rectangle, in
 * either appearance. */
.tdf-home-hero__photo .tdf-picture img {
	background-color: transparent;
}

/* A WordPress upload shows its natural 3:2 on a phone and 16:9 on a tablet. An R2
 * photograph keeps its rendition crops. */
.tdf-home-hero__photo .tdf-picture--wp-media img {
	aspect-ratio: var( --tdf-ratio-hero-media );
}

/* The caption: the claret mark, then the place, the region and the credit. */
.tdf-home-hero__caption {
	display: grid;
	justify-items: start;
	gap: var( --tdf-space-3xs );
	font-family: var( --tdf-font-ui );
	font-size: var( --tdf-text-meta );
	line-height: var( --tdf-leading-tight );
	color: var( --tdf-on-image );
}

.tdf-home-hero__caption::before {
	content: '';
	width: var( --tdf-space-lg );
	margin-block-end: var( --tdf-space-2xs );
	border-block-start: var( --tdf-border-heavy ) solid var( --tdf-band-accent );
}

.tdf-home-hero__place {
	font-weight: var( --tdf-weight-ui );
}

.tdf-home-hero__credit {
	font-size: var( --tdf-text-label );
	color: var( --tdf-on-image-muted );
}

@media ( min-width: 48em ) {

	.tdf-home-hero__photo .tdf-picture--wp-media img {
		aspect-ratio: var( --tdf-ratio-hero );
	}
}

@media ( min-width: 62em ) {

	.tdf-home-hero__inner {
		grid-template-rows: 1fr auto 1fr auto;
		row-gap: 0;
		padding-block: var( --tdf-space-xl );
	}

	/*
	 * 42rem is the band's height at every wide width: the text column fills about that
	 * much at the narrowest of them. A fixed height is what lets the photograph's `sizes`
	 * (tdf_image_home_hero_sizes()) name the width the photograph really paints: the band's
	 * width, or its height times the photograph's shape where that is wider. Change the
	 * two together.
	 */
	.tdf-home-hero--image .tdf-home-hero__inner {
		min-height: 42rem;
	}

	/* The text and the caption sit above the photograph, which is positioned. */
	.tdf-home-hero__text,
	.tdf-home-hero__caption {
		position: relative;
		z-index: 1;
		max-width: var( --tdf-band-measure );
	}

	.tdf-home-hero__text {
		grid-row: 2;
	}

	.tdf-home-hero__media {
		grid-row: 4;
		padding: 0;
	}

	/*
	 * The photograph fills the band, under the shade (D-055). Luis's direction, 2026-09-17:
	 * the shade starts at 70%, not at full black, so the photograph shows behind the text.
	 * It holds 70% to 46% of the width, where the text column ends, then clears by 72%. The
	 * text is measured on the photograph's own pixels (D-076).
	 */
	.tdf-home-hero__photo {
		--tdf-scrim-strong: var( --tdf-band-scrim );
		--tdf-scrim-carry: var( --tdf-band-scrim );

		position: absolute;
		inset: 0;
		margin: 0;
	}

	.tdf-home-hero__photo .tdf-picture,
	.tdf-home-hero__photo .tdf-picture img {
		width: 100%;
		height: 100%;
	}

	.tdf-home-hero__photo .tdf-picture img,
	.tdf-home-hero__photo .tdf-picture--wp-media img {
		aspect-ratio: auto;
	}
}

.tdf-home__section {
	margin-block-start: var( --tdf-section-pad );
}

/* Heading and its "see all" link share a baseline; the link is quiet because the
 * cards beneath it are the actual invitation. */
.tdf-home__section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var( --tdf-space-2xs ) var( --tdf-space-md );
}

.tdf-home__section-heading {
	margin-block-end: var( --tdf-space-md );
	padding-block-end: var( --tdf-space-3xs );
	border-block-end: var( --tdf-border ) solid var( --tdf-rule-strong );
	font-size: var( --tdf-text-h2 );
}

.tdf-home__section-head .tdf-home__section-heading {
	flex: 1 1 auto;
}

/* Measured at 24px before D2 — exactly on the SC 2.5.8 floor, which is not a margin
 * worth keeping. It is a navigation affordance, not prose, so 44px costs nothing. */
.tdf-home__section-more {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	min-height: 44px;
	margin-block-end: var( --tdf-space-md );
	font-family: var( --tdf-font-ui );
	font-size: var( --tdf-text-meta );
	white-space: nowrap;
}

/* Explore Destinations sits on a wider minimum so hubs read as places rather than
 * as another row of article cards. */
.tdf-card-list--feature {
	grid-template-columns: repeat( auto-fill, minmax( 320px, 1fr ) );
}

/* LATEST — the only chronological module. A list, deliberately: cards would give
 * recency the same visual weight as editorial selection. */
.tdf-latest {
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: var( --tdf-measure-wide );
}

.tdf-latest__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var( --tdf-space-2xs ) var( --tdf-space-md );
	padding-block: var( --tdf-space-xs );
	border-block-end: var( --tdf-border ) solid var( --tdf-rule );
}

/* A list of links is navigation: 44px targets, like the masthead's. */
.tdf-latest__item > a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-family: var( --tdf-font-editorial );
	font-size: var( --tdf-text-lede );
	color: var( --tdf-ink-strong );
	text-decoration: none;
}

.tdf-latest__item > a:hover {
	color: var( --tdf-accent-deep );
	text-decoration: underline;
	text-underline-offset: 0.14em;
}

.tdf-latest__date {
	flex: 0 0 auto;
	font-family: var( --tdf-font-ui );
	font-size: var( --tdf-text-meta );
	font-variant-numeric: tabular-nums;
	color: var( --tdf-ink-muted );
}

/* ---------------------------------------------------------------------------
 * QUICK LINKS — destinations as text, never as chips
 *
 * A row of rounded pills would read as filter chips in an app. These are links
 * separated by a rule, which is what a masthead does.
 * ------------------------------------------------------------------------ */

.tdf-quicklinks ul {
	display: flex;
	flex-wrap: wrap;
	gap: var( --tdf-space-2xs ) var( --tdf-space-md );
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Measured at 34px before D2. These are wayfinding, not prose — safe to enlarge. */
.tdf-quicklinks a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-block: var( --tdf-space-3xs );
	font-family: var( --tdf-font-ui );
	font-size: var( --tdf-text-meta );
	color: var( --tdf-ink );
	text-decoration: none;
	border-block-end: var( --tdf-border-heavy ) solid var( --tdf-rule );
}

.tdf-quicklinks a:hover {
	color: var( --tdf-accent-deep );
	border-block-end-color: var( --tdf-accent );
}

/* ---------------------------------------------------------------------------
 * SEARCH (§14)
 *
 * The field is a rectangle with a real border at 3:1, not a rounded search
 * capsule with a magnifier glyph inside it. The label is visible — a placeholder
 * is not a label, and it disappears exactly when the user needs it. The field
 * sits on the raised surface of either appearance; `color-scheme` keeps the
 * browser's own autofill and caret colours matched to it.
 * ------------------------------------------------------------------------ */

.tdf-search-form__label {
	display: block;
	margin-block-end: var( --tdf-space-2xs );
	font-family: var( --tdf-font-ui );
	font-size: var( --tdf-text-label );
	font-weight: 600;
	letter-spacing: var( --tdf-tracking-label );
	text-transform: uppercase;
	color: var( --tdf-ink-muted );
}

.tdf-search-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: var( --tdf-space-2xs );
}

.tdf-search-form__field {
	flex: 1 1 14rem;
	min-height: 44px;
	padding: var( --tdf-space-2xs ) var( --tdf-space-xs );
	background-color: var( --tdf-surface );
	border: var( --tdf-border ) solid var( --tdf-rule-strong );   /* 3.32 / 3.44 — meets 1.4.11 */
	border-radius: var( --tdf-radius );
	font-family: var( --tdf-font-ui );
	font-size: var( --tdf-text-body-sm );   /* 16px: anything smaller zooms iOS on focus */
	color: var( --tdf-ink );
}

.tdf-search-form__field:focus {
	border-color: var( --tdf-accent );
}

/* What to type — in the reading face's UI size, never below the meta floor. */
.tdf-search-form__hint {
	margin-block-start: var( --tdf-space-2xs );
	font-family: var( --tdf-font-ui );
	font-size: var( --tdf-text-meta );
	line-height: var( --tdf-leading-tight );
	color: var( --tdf-ink-muted );
}

/*
 * THE BAND'S SEARCH (D-076) — the homepage's one departure from the rules above. It is a
 * white field on the dark band, as tall as a heading, with the magnifier inside it, after
 * the MICHELIN Guide's. The magnifier IS the submit button, so the field needs no second
 * control. The label stays in the accessible name, and the hint becomes the placeholder,
 * shown until the reader types. The corners stay square. The field is white in both
 * appearances, so its native parts (caret, autofill, the suggestion list) follow a light
 * scheme.
 */
.tdf-search-form--hero .tdf-search-form__row {
	position: relative;
	flex-wrap: nowrap;
	gap: 0;
}

.tdf-search-form--hero .tdf-search-form__field {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 3.5rem;
	padding-inline: 3.25rem var( --tdf-space-sm );
	background-color: var( --tdf-field );
	border-color: var( --tdf-field );   /* 19.67 against the band: the field is its own boundary */
	color: var( --tdf-field-ink );
	color-scheme: light;
}

.tdf-search-form--hero .tdf-search-form__field::placeholder {
	color: var( --tdf-field-muted );   /* 7.96 — the hint, so it is read as text */
	opacity: 1;
}

.tdf-search-form--hero .tdf-search-form__field:focus {
	border-color: var( --tdf-field );   /* the light focus ring on the band marks it */
}

.tdf-search-form__submit {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	display: grid;
	place-items: center;
	width: 3.25rem;
	padding: 0;
	border: 0;
	background-color: transparent;
	color: var( --tdf-field-muted );   /* 7.96 */
	cursor: pointer;
	transition: color var( --tdf-duration ) var( --tdf-ease );
}

.tdf-search-form__submit:hover {
	color: var( --tdf-field-ink );
}

/* The ring is drawn INSIDE the button and in ink: outside it, a light ring would fall on
 * the white field and disappear. */
.tdf-search-form__submit:focus-visible {
	outline-color: var( --tdf-field-ink );
	outline-offset: calc( var( --tdf-focus-offset ) * -2 );
}

.tdf-search-form__icon {
	width: 1.25rem;
	height: 1.25rem;
}

@media ( min-width: 62em ) {

	.tdf-search-form--hero .tdf-search-form__field {
		min-height: 4rem;
		padding-inline-start: 3.75rem;
		font-size: var( --tdf-text-body );
	}

	.tdf-search-form__submit {
		width: 3.75rem;
	}
}

.tdf-search__again {
	max-width: 34rem;
	margin-block-start: var( --tdf-space-md );
}

/* SEARCH RESULTS (D-062) — a list read down one edge: a thumbnail beside each result,
 * a hairline between them. The query sits in the h1 and must wrap, never widen the
 * page, however long it is. */
.tdf-search__header {
	max-width: var( --tdf-measure-wide );
	margin-block-end: var( --tdf-space-xl );
}

.tdf-search__title {
	font-size: clamp( 1.875rem, 3.2vw, 2.75rem );   /* the homepage line's scale: a search page reports, it does not announce */
	font-weight: var( --tdf-weight-display );
	line-height: var( --tdf-leading-display );
	letter-spacing: var( --tdf-tracking-display );
	overflow-wrap: anywhere;
}

.tdf-search__status {
	margin-block-start: var( --tdf-space-xs );
	font-family: var( --tdf-font-ui );
	font-size: var( --tdf-text-meta );
	color: var( --tdf-ink-muted );
}

.tdf-search__form {
	max-width: 34rem;
	margin-block-start: var( --tdf-space-md );
}

.tdf-result-list {
	max-width: var( --tdf-measure-wide );
}

.tdf-result-list > .tdf-card {
	padding-block: var( --tdf-space-md );
	border-block-start: var( --tdf-border ) solid var( --tdf-rule );
}

.tdf-result-list > .tdf-card:last-child {
	border-block-end: var( --tdf-border ) solid var( --tdf-rule );
}

.tdf-result-list > .tdf-card:has( > .tdf-card__media ) {
	display: grid;
	grid-template-columns: 7.5rem minmax( 0, 1fr );
	column-gap: var( --tdf-space-sm );
	align-items: start;
}

.tdf-result-list .tdf-card__media {
	margin-block-end: 0;
}

@media ( min-width: 48em ) {

	.tdf-result-list > .tdf-card:has( > .tdf-card__media ) {
		grid-template-columns: 12.5rem minmax( 0, 1fr );
		column-gap: var( --tdf-space-md );
	}
}

/* ---------------------------------------------------------------------------
 * EMPTY STATES — 404 and no-results
 *
 * An empty state routes the reader onward. No oversized numeral, no illustration,
 * no apology: search first because it is the fastest way back, destinations second
 * because place is how readers of a travel publication think.
 * ------------------------------------------------------------------------ */

.tdf-empty {
	max-width: var( --tdf-measure-wide );
	padding-block: var( --tdf-space-lg );
}

.tdf-empty__lead {
	max-width: var( --tdf-measure );
	font-family: var( --tdf-font-editorial );
	font-size: var( --tdf-text-lede );
	line-height: 1.45;
	color: var( --tdf-ink-muted );
}

.tdf-empty__heading {
	margin-block: var( --tdf-space-xl ) var( --tdf-space-sm );
	font-size: var( --tdf-text-h3 );
}

.tdf-empty > p:last-child {
	margin-block-start: var( --tdf-space-lg );
}

/* On the search page the header above already carries the space. */
.tdf-search .tdf-empty {
	padding-block: 0;
}

.tdf-empty__section > .tdf-empty__heading {
	margin-block-start: 0;
}

.tdf-empty__section + .tdf-empty__section {
	margin-block-start: var( --tdf-space-xl );
}

/* A non-guide search hit (a Page) is a row with no photograph. */
.tdf-card--plain {
	padding-block-end: var( --tdf-space-sm );
	border-block-end: var( --tdf-border ) solid var( --tdf-rule );
}

.tdf-result-list > .tdf-card--plain {
	padding-block-end: var( --tdf-space-md );
	border-block-end: 0;
}

/* ---------------------------------------------------------------------------
 * AUTHOR ARCHIVE (§7.4)
 *
 * This page is where the publication's authority becomes checkable, so it is set
 * like a masthead biography: portrait, name, role, then the work. Expertise and
 * covered destinations are claims, so they are listed plainly and the destinations
 * are links the reader can follow — not badges.
 * ------------------------------------------------------------------------ */

.tdf-author__header {
	display: flex;
	flex-wrap: wrap;
	gap: var( --tdf-space-lg );
	align-items: start;
	padding-block-end: var( --tdf-space-lg );
	border-block-end: var( --tdf-border ) solid var( --tdf-rule-strong );
}

.tdf-author__portrait {
	flex: 0 0 auto;
	width: 8.5rem;
}

.tdf-author__identity {
	flex: 1 1 18rem;
}

.tdf-author__name {
	font-size: var( --tdf-text-h1 );
	line-height: var( --tdf-leading-heading );
	letter-spacing: var( --tdf-tracking-display );
}

.tdf-author__role {
	margin-block-start: var( --tdf-space-3xs );
	font-family: var( --tdf-font-ui );
	font-size: var( --tdf-text-label );
	font-weight: 600;
	letter-spacing: var( --tdf-tracking-label );
	text-transform: uppercase;
	color: var( --tdf-accent );
}

.tdf-author__standfirst {
	max-width: var( --tdf-measure );
	margin-block-start: var( --tdf-space-sm );
	font-family: var( --tdf-font-editorial );
	font-size: var( --tdf-text-lede );
	line-height: 1.45;
	color: var( --tdf-ink-muted );
}

.tdf-author__links {
	display: flex;
	flex-wrap: wrap;
	gap: var( --tdf-space-2xs ) var( --tdf-space-md );
	margin-block-start: var( --tdf-space-md );
	padding: 0;
	list-style: none;
	font-family: var( --tdf-font-ui );
	font-size: var( --tdf-text-meta );
}

.tdf-author__bio {
	max-width: var( --tdf-measure );
	margin-block-start: var( --tdf-space-lg );
}

.tdf-author__bio > p {
	margin-block-end: var( --tdf-space-md );
}

.tdf-author__credentials {
	display: flex;
	flex-wrap: wrap;
	gap: var( --tdf-space-lg ) var( --tdf-space-2xl );
	margin-block-start: var( --tdf-space-lg );
}

.tdf-author__credential {
	flex: 1 1 16rem;
}

.tdf-author__expertise,
.tdf-author__covers {
	display: flex;
	flex-wrap: wrap;
	gap: var( --tdf-space-3xs ) var( --tdf-space-md );
	margin-block-start: var( --tdf-space-2xs );
	padding: 0;
	list-style: none;
	font-family: var( --tdf-font-ui );
	font-size: var( --tdf-text-meta );
	color: var( --tdf-ink );
}

.tdf-author__work {
	margin-block-start: var( --tdf-section-pad-tight );
}

/* ---------------------------------------------------------------------------
 * FOOTER (§15.3)
 *
 * Editorial links only. A commercial link here would be sitewide, which §16.1
 * forbids — see the note in the template, guarded by D-028.
 * ------------------------------------------------------------------------ */

.tdf-site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var( --tdf-space-md ) var( --tdf-space-lg );
}

.tdf-site-footer__brand {
	font-family: var( --tdf-font-editorial );
	font-size: var( --tdf-text-h3 );
	font-weight: 500;
	color: var( --tdf-ink-strong );
}

.tdf-site-footer__nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var( --tdf-space-md );
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 44px targets: the footer is navigation, not prose. */
.tdf-site-footer__nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var( --tdf-ink-muted );
	text-decoration: none;
}

.tdf-site-footer__nav a:hover {
	color: var( --tdf-accent-deep );
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.tdf-copyright {
	margin: 0;
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * COMMERCIAL RECOMMENDATION (§16)
 *
 * Visually SUBORDINATE to the article and visibly distinct from it, which is the
 * §16 requirement and also the honest presentation: a recommendation the reader
 * can tell apart from reporting is the only kind worth having. It is a bordered
 * aside on a recessed ground — never a full-width banner, never a button styled
 * like the primary action on the page.
 * ------------------------------------------------------------------------ */

.tdf-guide__commercial {
	padding: var( --tdf-space-md );
	background-color: var( --tdf-paper-sunk );
	border-block-start: var( --tdf-border-heavy ) solid var( --tdf-rule-strong );
}

.tdf-guide__commercial-note {
	max-width: var( --tdf-measure );
	margin-block-end: var( --tdf-space-sm );
	color: var( --tdf-ink-muted );
}

.tdf-guide__commercial-cta {
	margin: 0;
}

.tdf-guide__takeaways ul {
	margin: 0;
	padding-inline-start: var( --tdf-space-md );
}

.tdf-guide__takeaways li {
	margin-block-end: var( --tdf-space-2xs );
}

/* ---------------------------------------------------------------------------
 * MOBILE
 *
 * Mobile is not a fallback. The single layout breakpoint is 48em; below it the
 * header tightens to one compact row, the mega-menu becomes a full-width accordion,
 * and multi-column arrangements collapse to one column rather than shrinking to
 * unreadable. (The guide's contents rail and opening overlay switch at 62em, where
 * a sidebar and a text column still both fit.)
 * ------------------------------------------------------------------------ */

@media ( max-width: 47.99em ) {

	.tdf-site-header > .tdf-container {
		min-height: 3.5rem;
		gap: 0 var( --tdf-space-xs );
		padding-block: var( --tdf-space-3xs );
	}

	.tdf-site-title {
		font-size: 1.1875rem;
	}

	.tdf-site-header__actions {
		gap: var( --tdf-space-3xs );
	}

	.tdf-nav ul {
		gap: 0 var( --tdf-space-sm );
	}

	/* The label folds away and remains the control's accessible name. */
	.tdf-appearance__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset( 50% );
		white-space: nowrap;
	}

	.tdf-author__header {
		gap: var( --tdf-space-md );
	}

	.tdf-author__portrait {
		width: 6rem;
	}

	.tdf-latest__item {
		flex-direction: column;
		gap: var( --tdf-space-3xs );
	}

	.tdf-home__section-more {
		margin-block-end: var( --tdf-space-sm );
	}
}

/* The homepage explanation sits on the band under the introduction (D-076), in the band's
 * quieter ink: 15.55:1 on the plain band, and measured over the photograph in D-076. */
.tdf-home__description {
	max-width: 58ch;
	margin-block-start: var( --tdf-space-md );
	color: var( --tdf-on-image-muted );
}

.tdf-home__about > p {
	max-width: 68ch;
}

/* The publication's introduction (1b): the About measure, no surface of its own, and the
 * lead story's link idiom — the same drawn arrow, without the ::before that covers a story. */
.tdf-home__pitch-text {
	max-width: 68ch;
	margin-block: 0;
}

.tdf-home__pitch-action {
	margin-block: var( --tdf-space-sm ) 0;
	font-family: var( --tdf-font-ui );
	font-size: var( --tdf-text-meta );
}

.tdf-home__pitch-link {
	display: inline-flex;
	align-items: center;
	gap: var( --tdf-space-xs );
	min-height: 44px;
	font-weight: 600;
	color: var( --tdf-accent );
	text-decoration-color: var( --tdf-accent-line );
	text-underline-offset: 0.22em;
}

.tdf-home__pitch-link::after {
	content: '';
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	border-block-start: var( --tdf-border-heavy ) solid currentColor;
	border-inline-end: var( --tdf-border-heavy ) solid currentColor;
	transform: rotate( 45deg );
}

.tdf-home__pitch-link:hover {
	color: var( --tdf-accent-deep );
	text-decoration-color: currentColor;
}