/*
Theme Name: Kelmscott
Theme URI: https://www.cotswoldstourism.org/
Author: Cotswolds Tourism
Author URI: https://www.cotswoldstourism.org/
Description: An Arts & Crafts revival block theme for cotswoldstourism.org. Parchment ground, deep green and madder, gold ornament; Cormorant Unicase and EB Garamond, self-hosted. Framed plates, double rules, a CSS trellis and roman numerals — built for a long-form regional guide.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kelmscott
Tags: blog, news, one-column, block-patterns, full-site-editing, block-styles, custom-colors, custom-logo, custom-menu, editor-style, featured-images, template-editing, threaded-comments, translation-ready, wide-blocks
*/

/* ==========================================================================
   Contents
   1.  Tokens
   2.  Base
   3.  Ornaments (lattice, dots, plates, rules, small caps, glyph separators)
   4.  Header
   5.  Navigation (desktop + mobile panel)
   6.  Footer
   7.  Cards & query loops
   8.  Home
   9.  Guide (single)
   10. Article content
   11. Aside furniture (At a Glance, In this Guide, Nearby)
   12. Category hub & pagination
   13. Page, search, 404, comments
   14. Motion, focus, print
   15. Responsive
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */

:root {
	--kls-parchment: #efe6d2;
	--kls-parchment-dark: #e8dcc2;
	--kls-parchment-muted: #cdbb93;
	--kls-green: #2e4a3a;
	--kls-madder: #9b3b2e;
	--kls-gold: #b8923f;
	--kls-indigo: #2c3a5a;
	--kls-ink: #26221c;
	--kls-ink-soft: #4a4338;
	--kls-ink-muted: #6b6152;
	--kls-disabled: #a89f8c;
	--kls-hairline: rgba(184, 146, 63, 0.55);

	--kls-rule: 3px double var(--kls-green);
	--kls-frame-outer: 1px solid var(--kls-gold);
	--kls-frame-inner: 3px double var(--kls-green);

	--kls-page-margin: 40px;
	--kls-inset: 120px;
	--kls-wide: 1120px;
	--kls-article: 1080px;

	--kls-ornament-font: "EB Garamond", "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", Georgia, serif;

	--kls-header-height: 64px;
	--kls-transition: 150ms ease;
}

/* 2. Base ------------------------------------------------------------------ */

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--kls-header-height) + 24px);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-kerning: normal;
	font-variant-ligatures: common-ligatures;
}

/* Sections carry their own margins and spacing; core's block gap between the
   top-level header, main and footer would double it. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Every gap in this design is set on the element that needs it. Core's flow
   layout adds its own block gap on top of that, and inside the header's flex
   row it pushes the navigation under the wordmark, so it is cleared in the
   containers this theme lays out itself. */
.kls-header__bar > *,
.kls-header__inner > *,
.kls-lockup > *,
.kls-footer__inner > *,
.kls-hero > *,
.kls-guide-head > *,
.kls-guide-body > *,
.kls-guide-aside > *,
.kls-hub-head > *,
.kls-itineraries > *,
.kls-stay > *,
.kls-stay__body > *,
.kls-latest__inner > *,
.kls-continue__inner > *,
.kls-hub-grid__inner > *,
.kls-empty > * {
	margin-block-start: 0;
}

/* Sections carry the page margin themselves; the root has none. */
.kls-section {
	padding-inline: var(--kls-page-margin);
}

.kls-inset {
	padding-inline: calc(var(--kls-page-margin) + var(--kls-inset));
}

/* Skip link, matched to the palette. */
.skip-link.screen-reader-text:focus {
	background: var(--kls-parchment);
	color: var(--kls-green);
	border: 3px double var(--kls-green);
	font-family: "EB Garamond", Georgia, serif;
	font-variant: small-caps;
	letter-spacing: 0.12em;
	border-radius: 0;
	box-shadow: none;
	z-index: 100000;
}

/* Links: the global rule is "colour inherited, no underline"; body copy
   overrides this inside .entry-content (§10). */
a {
	transition: opacity var(--kls-transition), color var(--kls-transition);
}

:where(.wp-site-blocks) a:where(:not(.entry-content a):not(.wp-element-button)) {
	color: inherit;
	text-decoration: none;
}

:where(.wp-site-blocks) a:where(:not(.entry-content a):not(.wp-element-button)):hover {
	opacity: 0.72;
}

img {
	max-width: 100%;
	height: auto;
}

/* Core's inline text colour uses <mark>, which browsers paint yellow. */
mark.has-inline-color {
	background-color: transparent;
}

/* Images never collapse their frame before loading. */
.wp-block-post-featured-image,
.wp-block-image {
	background-color: transparent;
}

/* 3. Ornaments ------------------------------------------------------------- */

/* Lattice band — the trellis, 14px tall, full width. */
.kls-ornament--lattice {
	height: 14px;
	background-color: var(--kls-green);
	background-image:
		repeating-linear-gradient(45deg, rgba(184, 146, 63, 0.55) 0 1px, transparent 1px 12px),
		repeating-linear-gradient(-45deg, rgba(184, 146, 63, 0.55) 0 1px, transparent 1px 12px);
}

/* Low-contrast lattice used as a section ground. */
.kls-lattice-ground {
	background-color: var(--kls-green);
	background-image:
		repeating-linear-gradient(45deg, rgba(184, 146, 63, 0.28) 0 1px, transparent 1px 14px),
		repeating-linear-gradient(-45deg, rgba(184, 146, 63, 0.28) 0 1px, transparent 1px 14px);
}

/* Dot ornament, 180 x 10, centred. */
.kls-ornament--dots {
	width: 180px;
	height: 10px;
	margin-inline: auto;
	background-image: radial-gradient(circle at 5px 5px, var(--kls-gold) 2.5px, transparent 3px);
	background-size: 12px 10px;
}

.kls-ornament--rule {
	border-top: var(--kls-rule);
	height: 0;
}

/* Framed plate. Outer gold hairline, inner double green rule.
   Variants change the padding, and the lighter ones drop the inner rule. */
.kls-plate {
	padding: 10px;
	border: var(--kls-frame-outer);
}

.kls-plate > * {
	display: block;
	margin: 0;
	border: var(--kls-frame-inner);
	overflow: hidden;
	background: var(--kls-parchment-dark);
}

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

.kls-plate--article {
	padding: 8px;
}

.kls-plate--card {
	padding: 5px;
}

.kls-plate--thumb {
	padding: 3px;
}

.kls-plate--card > *,
.kls-plate--thumb > * {
	border: 0;
}

/* Itinerary cards: a double rule on its own, no gold hairline. */
.kls-plate--double {
	padding: 5px;
	border: var(--kls-frame-inner);
}

.kls-plate--double > * {
	border: 0;
}

/* Until a picture is chosen the two standalone plates would be empty frames,
   so on the published page they step aside — the hero's caption with them, and
   Where to Stay drops to one column. The editor canvas keeps them visible
   (assets/css/editor.css) so there is somewhere to drop the image. */
.kls-hero__plate:not(:has(img)),
.kls-hero__plate:not(:has(img)) + .kls-hero__caption,
.kls-stay__plate:not(:has(img)) {
	display: none;
}

.kls-stay:not(:has(.kls-stay__plate img)) {
	grid-template-columns: 1fr;
	max-width: calc(880px + var(--kls-page-margin) * 2);
}

/* The two standalone plates hold their shape before a picture is chosen. */
.kls-hero__plate > *,
.kls-stay__plate > * {
	display: block;
	background: var(--kls-parchment-dark);
}

.kls-hero__plate > * {
	aspect-ratio: 860 / 400;
}

.kls-stay__plate > * {
	aspect-ratio: 4 / 3;
}

/* Section rule heading: two double rules flanking a display heading. */
.kls-rule-heading {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-block: 0 36px;
	font-size: clamp(22px, 7vw, 40px);
	line-height: 1;
	letter-spacing: 0;
	white-space: nowrap;
	min-width: 0;
}

.kls-rule-heading::before,
.kls-rule-heading::after {
	content: "";
	flex: 1 1 auto;
	border-top: var(--kls-rule);
	min-width: 24px;
}

.kls-rule-heading--sm {
	font-size: clamp(20px, 6.4vw, 36px);
}

/* Small caps. Real small caps on EB Garamond — never uppercase. */
.kls-smallcaps,
.kls-kicker,
.kls-meta {
	font-family: "EB Garamond", Georgia, serif;
	font-variant: small-caps;
	font-weight: 500;
	line-height: 1;
}

.kls-kicker {
	font-size: 14px;
	letter-spacing: 0.14em;
	color: var(--kls-madder);
}

.kls-kicker--card {
	font-size: 13px;
	letter-spacing: 0.12em;
}

.kls-meta {
	font-size: 14px;
	letter-spacing: 0.12em;
	color: var(--kls-ink-muted);
}

/* Diamond separators between inline items. */
.kls-sep {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.kls-sep > * {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.kls-sep > *:not(:first-child)::before {
	content: "◆";
	font-family: var(--kls-ornament-font);
	font-size: 8px;
	font-variant: normal;
	letter-spacing: 0;
	color: var(--kls-gold);
	line-height: 1;
	transform: translateY(-1px);
}

/* 4. Header ---------------------------------------------------------------- */

/* The sticky element has to be the template part itself: a sticky box can only
   travel inside its own parent, and the part wrapper is the only ancestor tall
   enough to give it room. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--kls-parchment);
}

.kls-header {
	background: var(--kls-parchment);
}

.kls-header__bar {
	padding-inline: var(--kls-page-margin);
}

.kls-header__inner {
	max-width: var(--kls-wide);
	margin: 22px auto 0;
	padding: 26px 0 20px;
	border-top: var(--kls-rule);
	border-bottom: var(--kls-rule);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	transition: padding 200ms ease, margin 200ms ease;
}

.kls-lockup {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	text-decoration: none;
}

.kls-site-mark,
.kls-site-mark a {
	display: block;
	line-height: 0;
}

.kls-lockup .kls-site-mark svg,
.kls-lockup .kls-site-mark img {
	display: block;
	width: 40px;
	height: 40px;
	transition: width 200ms ease, height 200ms ease;
}

.kls-lockup .wp-block-site-title {
	margin: 0;
	line-height: 1;
	transition: font-size 200ms ease;
}

.kls-lockup .wp-block-site-title a {
	text-decoration: none;
	color: var(--kls-green);
}

/* Condensed state after 300px of scroll. */
body.kls-scrolled .kls-header .kls-ornament--lattice {
	height: 0;
}

body.kls-scrolled .kls-header__inner {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin-top: 0;
	padding: 9px 0;
	border-top-width: 0;
	gap: 24px;
}

body.kls-scrolled .kls-lockup .kls-site-mark svg,
body.kls-scrolled .kls-lockup .kls-site-mark img {
	width: 28px;
	height: 28px;
}

body.kls-scrolled .kls-lockup .wp-block-site-title {
	font-size: 22px;
}

body.kls-scrolled .kls-nav {
	font-size: 14px;
}

/* 5. Navigation ------------------------------------------------------------ */

.kls-nav.wp-block-navigation {
	align-items: center;
	gap: 18px;
}

.kls-nav .wp-block-navigation__container {
	gap: 18px;
	align-items: center;
}

.kls-nav .wp-block-navigation__responsive-container-content {
	align-items: center;
	gap: 18px;
}

/* Core renders the search block as a sibling of the list, not an item in it,
   so the list carries the separator that would otherwise precede it. */
@media (min-width: 900px) {
	.kls-nav .wp-block-navigation__container:has(+ .wp-block-search)::after {
		content: "◆";
		font-family: var(--kls-ornament-font);
		font-size: 9px;
		font-variant: normal;
		letter-spacing: 0;
		color: var(--kls-gold);
		line-height: 1;
		align-self: center;
	}
}

.kls-nav .wp-block-navigation-item__content {
	font-variant: small-caps;
	text-decoration: none;
	color: var(--kls-ink);
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
}

.kls-nav .wp-block-navigation-item__content:hover {
	opacity: 0.72;
}

/* Current section. */
.kls-nav .current-menu-item > .wp-block-navigation-item__content,
.kls-nav .current-menu-ancestor > .wp-block-navigation-item__content,
.kls-nav .wp-block-navigation-item.current-menu-item a,
.kls-nav .kls-nav-current > .wp-block-navigation-item__content {
	color: var(--kls-madder);
	border-bottom-color: var(--kls-gold);
}

/* Diamond separators. */
.kls-nav .wp-block-navigation__container > li:not(:first-child)::before {
	content: "◆";
	font-family: var(--kls-ornament-font);
	font-size: 9px;
	font-variant: normal;
	letter-spacing: 0;
	color: var(--kls-gold);
	line-height: 1;
	margin-right: 18px;
	align-self: center;
}

.kls-nav .wp-block-navigation__container > li {
	display: flex;
	align-items: center;
}

/* The search item reads as a nav link until it is opened. */
.kls-nav .wp-block-search {
	margin: 0;
}

.kls-nav .wp-block-search__button {
	align-items: center;
	background: transparent;
	border: 0;
	padding: 0 0 2px;
	margin: 0;
	color: var(--kls-madder);
	font-family: "EB Garamond", Georgia, serif;
	font-variant: small-caps;
	font-weight: 500;
	font-size: 15px;
	line-height: 1;
	letter-spacing: 0.08em;
	border-bottom: 1px solid transparent;
	cursor: pointer;
}

.kls-nav .wp-block-search__button:hover {
	opacity: 0.72;
	background: transparent;
	color: var(--kls-madder);
}

/* The nav's search field is collapsed until it is opened, but its box still
   sets the height of the whole row, so it is trimmed to the nav's rhythm. */
.kls-nav .wp-block-search__input {
	padding-block: 10px;
	font-size: 16px;
}

/* Search form styling, everywhere. */
.wp-block-search__input {
	background: var(--kls-parchment);
	border: 1px solid var(--kls-gold);
	border-radius: 0;
	padding: 12px 14px;
	font-family: "EB Garamond", Georgia, serif;
	font-size: 18px;
	color: var(--kls-ink);
}

.wp-block-search__input:focus {
	outline: 3px double var(--kls-green);
	outline-offset: 2px;
}

.wp-block-search:not(.kls-nav-search) .wp-block-search__button {
	background: var(--kls-green);
	color: var(--kls-parchment);
	border: 0;
	border-radius: 0;
	padding: 13px 18px;
	font-family: "EB Garamond", Georgia, serif;
	font-variant: small-caps;
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.14em;
}

/* Mobile panel. Core's overlay, dressed as a parchment plate. */
.kls-nav .wp-block-navigation__responsive-container-open,
.kls-nav .wp-block-navigation__responsive-container-close {
	font-family: "EB Garamond", Georgia, serif;
	font-variant: small-caps;
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.08em;
	color: var(--kls-ink);
	text-transform: none;
}

.kls-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--kls-parchment);
	color: var(--kls-ink);
	padding: 24px var(--kls-page-margin) 40px;
}

.kls-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 24px;
}

.kls-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	width: 100%;
}

.kls-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li {
	display: block;
	width: 100%;
	border-bottom: 1px solid var(--kls-hairline);
}

.kls-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li::before {
	content: none;
}

.kls-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	padding: 14px 0;
	font-size: 22px;
	border-bottom: 0;
}

.kls-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-search {
	width: 100%;
	margin-bottom: 8px;
	order: -1;
}

.kls-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-search__button {
	background: var(--kls-green);
	color: var(--kls-parchment);
	padding: 13px 18px;
	font-size: 14px;
	letter-spacing: 0.14em;
	border-bottom: 0;
}

/* Spec breakpoint is 900px, not core's 600px. */
@media (max-width: 899px) {
	.kls-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.kls-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.kls-nav .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
		position: fixed;
		inset: 0;
		z-index: 100000;
	}
}

@media (min-width: 900px) {
	.kls-nav .wp-block-navigation__responsive-container-open {
		display: none;
	}
}

/* 6. Footer ---------------------------------------------------------------- */

.kls-footer {
	background: var(--kls-green);
	color: var(--kls-parchment);
	padding: 48px var(--kls-page-margin) 32px;
	text-align: center;
}

.kls-footer__inner {
	max-width: var(--kls-wide);
	margin-inline: auto;
}

.kls-footer :where(h1, h2, h3, h4, h5, h6),
.kls-footer .wp-block-site-title a {
	color: var(--kls-parchment);
}

.kls-footer .kls-footer__mark {
	margin: 0 auto 14px;
}

.kls-footer .kls-footer__mark svg,
.kls-footer .kls-footer__mark img {
	display: block;
	margin-inline: auto;
	width: 40px;
	height: 40px;
}

.kls-footer .kls-footer__wordmark {
	font-family: "Cormorant Unicase", "EB Garamond", Georgia, serif;
	font-weight: 500;
	font-size: 24px;
	line-height: 1;
	letter-spacing: 0.04em;
	color: var(--kls-parchment);
	margin: 0 0 22px;
}

.kls-footer .kls-footer__nav .wp-block-navigation__container {
	gap: 18px;
	justify-content: center;
}

.kls-footer .kls-footer__nav .wp-block-navigation__container > li {
	display: flex;
	align-items: center;
}

.kls-footer .kls-footer__nav .wp-block-navigation__container > li:not(:first-child)::before {
	content: "◆";
	font-family: var(--kls-ornament-font);
	font-size: 9px;
	color: var(--kls-gold);
	line-height: 1;
	margin-right: 18px;
}

.kls-footer .kls-footer__nav .wp-block-navigation-item__content {
	font-family: "EB Garamond", Georgia, serif;
	font-variant: small-caps;
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.08em;
	color: var(--kls-parchment);
	text-decoration: none;
}

.kls-footer .kls-footer__colophon {
	font-style: italic;
	font-size: 14px;
	line-height: 1.4;
	color: var(--kls-parchment-muted);
	margin: 28px 0 0;
}

.kls-footer .kls-footer__colophon a {
	color: var(--kls-parchment-muted);
}

/* 7. Cards & query loops --------------------------------------------------- */

.kls-card {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
}

/* One link per card: the title anchor is stretched over the whole card. */
.kls-card .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.kls-card .wp-block-post-title {
	margin: 0;
	transition: color var(--kls-transition);
}

.kls-card .wp-block-post-title a {
	color: var(--kls-green);
	text-decoration: none;
}

.kls-card:hover .wp-block-post-title a {
	color: var(--kls-madder);
	opacity: 1;
}

.kls-card:hover img {
	transform: scale(1.02);
}

.kls-card img {
	transition: transform 400ms ease-out;
}

.kls-card .wp-block-post-featured-image {
	margin: 0;
}

.kls-card:focus-within .wp-block-post-title a {
	color: var(--kls-madder);
}

/* Keep the stretched link's focus ring visible on the card, not the text. */
.kls-card .wp-block-post-title a:focus-visible {
	outline: none;
}

.kls-card:focus-within {
	outline: 2px solid var(--kls-madder);
	outline-offset: 3px;
}

.kls-card__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin: 14px 0 6px;
	font-family: "EB Garamond", Georgia, serif;
	font-variant: small-caps;
	font-weight: 500;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 0.12em;
	color: var(--kls-madder);
}

.kls-card__kicker > * {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit;
}

.kls-card__kicker .wp-block-post-date,
.kls-card__kicker .kls-reading-time {
	color: var(--kls-madder);
}

.kls-card__kicker > *:not(:first-child)::before {
	content: "· ";
	color: var(--kls-madder);
}

.kls-card__kicker a {
	color: inherit;
	text-decoration: none;
	pointer-events: none;
}

/* Query loop grids reset their list chrome. Core's flow layout also puts a
   block gap on every sibling, which knocks the second card of a grid out of
   line — the grid's own gap does that job instead. */
.wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-post-template > li {
	margin-block: 0;
}

/* Cards in a grid fill their row. */
.kls-grid-3 .wp-block-post-template > li,
.kls-grid-4 .wp-block-post-template > li,
.kls-hub-grid .wp-block-post-template > li {
	display: flex;
	flex-direction: column;
}

.kls-grid-3 .wp-block-post-template > li > .kls-card,
.kls-grid-4 .wp-block-post-template > li > .kls-card,
.kls-hub-grid .wp-block-post-template > li > .kls-card {
	flex: 1 1 auto;
}

/* A card with no featured image loses its frame rather than showing a hollow
   one. The standalone plates keep their shape (§8) so an editor can see where
   the picture goes. */
.kls-card .kls-plate:not(:has(img)),
.kls-featured .kls-plate:not(:has(img)),
.kls-nearby__thumb:not(:has(img)) {
	display: none;
}

/* 8. Home ------------------------------------------------------------------ */

.kls-hero {
	text-align: center;
	padding: 76px calc(var(--kls-page-margin) + var(--kls-inset)) 64px;
}

.kls-hero__plate {
	max-width: 880px;
	margin-inline: auto;
}

.kls-hero__title {
	font-size: clamp(48px, 7.2vw, 86px);
	line-height: 1.02;
	letter-spacing: 0.01em;
	color: var(--kls-green);
	margin: 28px 0 22px;
	text-wrap: balance;
}

.kls-hero__title em,
.kls-hero__title .kls-em {
	font-style: normal;
	color: var(--kls-madder);
}

.kls-hero__standfirst {
	font-style: italic;
	font-size: clamp(19px, 1.8vw, 22px);
	line-height: 1.5;
	color: var(--kls-ink-soft);
	max-width: 640px;
	margin: 0 auto 44px;
}

.kls-hero__caption,
.kls-plate-caption {
	font-style: italic;
	font-size: 16px;
	line-height: 1.4;
	color: var(--kls-ink-muted);
	margin-top: 16px;
	text-align: center;
}

/* Curated Itineraries */
.kls-itineraries {
	padding: 60px var(--kls-page-margin) 68px;
	color: var(--kls-parchment);
}

.kls-itineraries :where(h2) {
	color: var(--kls-parchment);
	font-size: clamp(32px, 3.8vw, 44px);
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-align: center;
	margin: 0 0 8px;
}

.kls-itineraries__sub {
	text-align: center;
	font-style: italic;
	font-size: 17px;
	line-height: 1.4;
	color: var(--kls-parchment-muted);
	margin: 0 0 40px;
}

.kls-itineraries .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	counter-reset: kls-roman;
	max-width: var(--kls-wide);
	margin-inline: auto;
}

.kls-itineraries .wp-block-post {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--kls-parchment);
	color: var(--kls-ink);
	padding: 18px 18px 24px;
	border: 1px solid var(--kls-gold);
	text-align: center;
}

.kls-itineraries .wp-block-post::before {
	counter-increment: kls-roman;
	content: counter(kls-roman, upper-roman);
	display: block;
	font-family: "Cormorant Unicase", "EB Garamond", Georgia, serif;
	font-weight: 500;
	font-size: 30px;
	line-height: 1;
	color: var(--kls-madder);
	margin-bottom: 14px;
}

.kls-itineraries .wp-block-post .wp-block-post-title {
	font-size: clamp(20px, 2vw, 24px);
	line-height: 1.2;
	margin: 18px 0 8px;
}

.kls-itineraries .wp-block-post .wp-block-post-excerpt {
	font-size: 16px;
	line-height: 1.5;
	color: var(--kls-ink-soft);
	font-style: normal;
	margin: 0;
}

.kls-itineraries .wp-block-post .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.kls-itineraries .kls-plate__inner,
.kls-itineraries .wp-block-post-featured-image {
	aspect-ratio: 4 / 3;
}

/* Where to Stay */
.kls-stay {
	padding: 72px var(--kls-page-margin);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
	max-width: calc(var(--kls-wide) + var(--kls-page-margin) * 2);
	margin-inline: auto;
}

.kls-stay__plate .kls-plate__inner,
.kls-stay__plate .wp-block-post-featured-image,
.kls-stay__plate .wp-block-image {
	aspect-ratio: 4 / 3;
}

.kls-stay__body .kls-kicker {
	margin: 0 0 14px;
}

.kls-stay__body :where(h2) {
	font-size: clamp(32px, 3.8vw, 44px);
	line-height: 1.1;
	color: var(--kls-green);
	margin: 0 0 26px;
}

.kls-stay .wp-block-post-template {
	display: block;
}

.kls-stay .wp-block-post {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--kls-hairline);
	align-items: start;
}

.kls-stay .wp-block-post:last-child {
	border-bottom: 0;
}

.kls-stay .wp-block-post::before {
	content: "❧";
	font-family: var(--kls-ornament-font);
	font-size: 20px;
	line-height: 1.2;
	color: var(--kls-gold);
}

.kls-stay .wp-block-post-title {
	font-size: 22px;
	line-height: 1.2;
	margin: 0;
}

.kls-stay .wp-block-post-excerpt {
	font-style: italic;
	font-size: 16px;
	line-height: 1.4;
	color: var(--kls-ink-muted);
	margin: 2px 0 0;
}

.kls-stay .wp-block-post-excerpt p {
	margin: 0;
}

/* Latest Guides */
.kls-latest {
	padding: 0 var(--kls-page-margin) 72px;
}

.kls-latest__inner,
.kls-continue__inner {
	max-width: var(--kls-wide);
	margin-inline: auto;
}

.kls-grid-4 .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.kls-grid-3 .wp-block-post-template,
.kls-hub-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px 24px;
}

.kls-grid-4 .wp-block-post-title {
	font-size: 21px;
	line-height: 1.25;
}

.kls-grid-4 .kls-plate__inner,
.kls-grid-4 .wp-block-post-featured-image {
	aspect-ratio: 3 / 2;
}

/* 9. Guide (single) -------------------------------------------------------- */

.kls-guide-head {
	text-align: center;
	padding: 40px calc(var(--kls-page-margin) + var(--kls-inset)) 0;
}

.kls-breadcrumb {
	justify-content: center;
}

.kls-breadcrumb .kls-breadcrumb__current,
.kls-breadcrumb .last {
	color: var(--kls-madder);
}

.kls-guide-head .wp-block-post-title,
.kls-guide-head h1 {
	font-size: clamp(40px, 5.4vw, 64px);
	line-height: 1.08;
	letter-spacing: 0.01em;
	color: var(--kls-green);
	max-width: 880px;
	margin: 30px auto 20px;
	text-wrap: balance;
}

.kls-guide-head .kls-standfirst,
.kls-standfirst {
	font-style: italic;
	font-size: clamp(19px, 1.8vw, 22px);
	line-height: 1.5;
	color: var(--kls-ink-soft);
	max-width: 680px;
	margin: 0 auto 26px;
}

.kls-standfirst p {
	margin: 0;
}

.kls-guide-head .kls-ornament--dots {
	margin: 26px auto 36px;
}

.kls-guide-plate {
	max-width: 880px;
	margin-inline: auto;
}

.kls-guide-plate .kls-plate__inner,
.kls-guide-plate .wp-block-post-featured-image {
	aspect-ratio: 860 / 440;
}

.kls-guide-body {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 64px;
	max-width: var(--kls-article);
	margin: 0 auto;
	padding: 64px var(--kls-page-margin) 72px;
	align-items: start;
}

.kls-guide-aside {
	position: sticky;
	top: calc(var(--kls-header-height) + 24px);
	display: flex;
	flex-direction: column;
	gap: 28px;
	min-width: 0;
}

.kls-continue {
	padding: 0 var(--kls-page-margin) 72px;
}

/* 10. Article content ------------------------------------------------------ */

.kls-article .entry-content {
	min-width: 0;
}

.kls-article .entry-content > * {
	max-width: none;
}

.kls-article .entry-content p {
	font-family: "EB Garamond", Georgia, serif;
	font-size: 19px;
	line-height: 1.65;
	color: var(--kls-ink);
	margin: 0 0 26px;
}

/* Drop cap on the opening paragraph only. */
.kls-article .entry-content > p:first-of-type::first-letter {
	float: left;
	font-family: "Cormorant Unicase", "EB Garamond", Georgia, serif;
	font-weight: 500;
	font-size: 88px;
	line-height: 0.78;
	color: var(--kls-madder);
	margin: 10px 12px 0 0;
}

.kls-article .entry-content h2 {
	position: relative;
	font-size: clamp(28px, 3vw, 34px);
	line-height: 1.15;
	letter-spacing: 0;
	color: var(--kls-green);
	margin: 44px 0 18px;
	padding-top: 12px;
}

.kls-article .entry-content h2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 36px;
	border-top: 2px solid var(--kls-gold);
}

.kls-article .entry-content h2:first-child {
	margin-top: 0;
}

.kls-article .entry-content h3 {
	font-size: 26px;
	line-height: 1.2;
	color: var(--kls-green);
	margin: 32px 0 12px;
}

.kls-article .entry-content h4 {
	font-size: 22px;
	margin: 28px 0 10px;
}

.kls-article .entry-content a {
	color: var(--kls-madder);
	text-decoration: underline;
	text-decoration-color: var(--kls-gold);
	text-underline-offset: 3px;
}

.kls-article .entry-content a:hover {
	color: var(--kls-green);
	opacity: 1;
}

/* Lists: no bullets; a gold marker and a hairline between rows. The marker is
   positioned rather than laid out in a grid — a grid turns every inline run in
   the item into its own cell, which breaks any list item that mixes a leading
   <strong> with running text. */
.kls-article .entry-content ul,
.kls-article .entry-content ol {
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
}

.kls-article .entry-content ol {
	counter-reset: kls-ol;
}

.kls-article .entry-content ul > li,
.kls-article .entry-content ol > li {
	position: relative;
	padding: 12px 0 12px 34px;
	border-bottom: 1px solid var(--kls-hairline);
	font-size: 18px;
	line-height: 1.5;
}

.kls-article .entry-content ul > li:last-child,
.kls-article .entry-content ol > li:last-child {
	border-bottom: 0;
}

.kls-article .entry-content ul > li::before {
	content: "❧";
	position: absolute;
	left: 0;
	top: 12px;
	font-family: var(--kls-ornament-font);
	font-size: 20px;
	line-height: 1.35;
	color: var(--kls-gold);
}

.kls-article .entry-content ol > li::before {
	counter-increment: kls-ol;
	content: counter(kls-ol, upper-roman);
	position: absolute;
	left: 0;
	top: 12px;
	width: 26px;
	font-family: "Cormorant Unicase", "EB Garamond", Georgia, serif;
	font-weight: 500;
	font-size: 17px;
	line-height: 1.6;
	color: var(--kls-gold);
}

/* Nested lists sit inside their row without rules of their own. */
.kls-article .entry-content li > ul,
.kls-article .entry-content li > ol {
	margin: 10px 0 0;
}

.kls-article .entry-content li li {
	border-bottom: 0;
	padding-block: 4px;
}

/* A leading strong reads as a heading, not as bold. */
.kls-article .entry-content li > strong:first-child,
.kls-article .entry-content li > p:first-child > strong:first-child {
	font-weight: 500;
	color: var(--kls-green);
}

.kls-article .entry-content li p {
	margin: 0 0 8px;
	font-size: inherit;
	line-height: inherit;
}

.kls-article .entry-content li p:last-child {
	margin-bottom: 0;
}

/* Blockquote / pull quote. */
.kls-article .entry-content blockquote,
.kls-article .entry-content .wp-block-quote {
	margin: 40px 0;
	padding: 28px 32px;
	border-top: var(--kls-rule);
	border-bottom: var(--kls-rule);
	border-left: 0;
	border-right: 0;
	text-align: center;
}

.kls-article .entry-content blockquote p {
	font-family: "Cormorant Unicase", "EB Garamond", Georgia, serif;
	font-style: italic;
	font-weight: 400;
	font-size: 26px;
	line-height: 1.35;
	color: var(--kls-green);
	margin: 0 0 12px;
}

.kls-article .entry-content blockquote cite,
.kls-article .entry-content blockquote .wp-block-quote__citation {
	display: block;
	font-family: "EB Garamond", Georgia, serif;
	font-style: normal;
	font-variant: small-caps;
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.12em;
	color: var(--kls-madder);
}

/* Figures. */
.kls-article .entry-content figure.wp-block-image {
	margin: 40px 0;
	padding: 8px;
	border: var(--kls-frame-outer);
	background: transparent;
}

.kls-article .entry-content figure.wp-block-image img {
	display: block;
	width: 100%;
	border: var(--kls-frame-inner);
	background: var(--kls-parchment-dark);
}

.kls-article .entry-content figure.wp-block-image figcaption {
	text-align: center;
	font-style: italic;
	font-size: 16px;
	line-height: 1.4;
	color: var(--kls-ink-muted);
	margin: 12px 0 0;
}

.kls-article .entry-content .wp-block-embed figcaption,
.kls-article .entry-content .wp-block-video figcaption {
	text-align: center;
	font-style: italic;
	color: var(--kls-ink-muted);
}

/* Tables. */
.kls-article .entry-content table,
.kls-article .entry-content .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
	margin: 0 0 26px;
}

.kls-article .entry-content thead {
	border-bottom: 2px solid var(--kls-gold);
}

.kls-article .entry-content th {
	font-family: "EB Garamond", Georgia, serif;
	font-variant: small-caps;
	font-weight: 500;
	letter-spacing: 0.12em;
	color: var(--kls-madder);
	text-align: left;
	padding: 10px 12px 10px 0;
	border: 0;
	border-bottom: 1px solid var(--kls-hairline);
}

.kls-article .entry-content td {
	padding: 10px 12px 10px 0;
	border: 0;
	border-bottom: 1px solid var(--kls-hairline);
	vertical-align: top;
}

.kls-article .entry-content .wp-block-table {
	overflow-x: auto;
}

.kls-article .entry-content .wp-block-separator {
	border-top: var(--kls-rule);
	border-bottom: 0;
	max-width: 180px;
	margin: 40px auto;
}

/* 11. Aside furniture ------------------------------------------------------ */

.kls-panel {
	padding: 8px;
	border: var(--kls-frame-outer);
	background: var(--kls-parchment-dark);
}

.kls-panel__inner {
	border: var(--kls-frame-inner);
	padding: 22px 20px;
}

.kls-panel__title {
	font-family: "Cormorant Unicase", "EB Garamond", Georgia, serif;
	font-weight: 500;
	font-size: 22px;
	line-height: 1.2;
	color: var(--kls-green);
	text-align: center;
	margin: 0 0 18px;
}

.kls-glance__grid {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px 14px;
	margin: 0;
}

.kls-glance__grid dt {
	font-family: "EB Garamond", Georgia, serif;
	font-variant: small-caps;
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.08em;
	color: var(--kls-madder);
	line-height: 1.4;
	margin: 0;
}

.kls-glance__grid dd {
	font-size: 15px;
	line-height: 1.4;
	color: var(--kls-ink);
	margin: 0;
}

/* Shared aside heading. */
.kls-aside-heading {
	font-family: "EB Garamond", Georgia, serif;
	font-variant: small-caps;
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.14em;
	color: var(--kls-madder);
	padding-bottom: 10px;
	border-bottom: 1px solid var(--kls-hairline);
	margin: 0 0 12px;
	line-height: 1;
}

.kls-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.kls-toc__list li {
	display: grid;
	grid-template-columns: minmax(22px, auto) 1fr;
	column-gap: 8px;
	align-items: baseline;
}

.kls-toc__num {
	font-family: "Cormorant Unicase", "EB Garamond", Georgia, serif;
	font-weight: 500;
	font-size: 15px;
	color: var(--kls-gold);
	line-height: 1.35;
}

.kls-toc__list a {
	font-size: 17px;
	line-height: 1.35;
	color: var(--kls-ink);
	text-decoration: none;
}

.kls-toc__list a:hover {
	opacity: 0.72;
}

.kls-toc__list li.is-active a,
.kls-toc__list li.is-active .kls-toc__num {
	color: var(--kls-madder);
}

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

.kls-nearby__list li {
	display: grid;
	grid-template-columns: 84px 1fr;
	gap: 14px;
	padding: 8px 0;
	align-items: center;
}

.kls-nearby__thumb {
	padding: 3px;
	border: var(--kls-frame-outer);
	overflow: hidden;
}

.kls-nearby__thumb img,
.kls-nearby__placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--kls-parchment-dark);
	transition: transform 400ms ease-out;
}

.kls-nearby__list li:hover img {
	transform: scale(1.02);
}

.kls-nearby__list a {
	font-family: "Cormorant Unicase", "EB Garamond", Georgia, serif;
	font-weight: 500;
	font-size: 17px;
	line-height: 1.25;
	color: var(--kls-green);
	text-decoration: none;
}

.kls-nearby__list li:hover a {
	color: var(--kls-madder);
}

/* The whole nearby row is one link. */
.kls-nearby__list li {
	position: relative;
}

.kls-nearby__list li > a.kls-nearby__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* The contents heading doubles as a collapse control below 900px, where the
   aside has moved under the article. Above that it is inert. */
.kls-toc__toggle {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-align: inherit;
	cursor: default;
}

@media (max-width: 899px) {
	.kls-toc__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		cursor: pointer;
	}

	.kls-toc__toggle::after {
		content: "+";
		font-family: "Cormorant Unicase", "EB Garamond", Georgia, serif;
		font-size: 20px;
		line-height: 1;
		color: var(--kls-gold);
	}

	.kls-toc__toggle[aria-expanded="true"]::after {
		content: "−";
	}

	.kls-toc__toggle[aria-expanded="false"] + .kls-toc__list {
		display: none;
	}
}

/* 12. Category hub & pagination -------------------------------------------- */

.kls-hub-head {
	text-align: center;
	padding: 56px calc(var(--kls-page-margin) + var(--kls-inset)) 48px;
}

.kls-hub-head .wp-block-query-title,
.kls-hub-head h1 {
	font-size: clamp(56px, 7.7vw, 92px);
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--kls-green);
	margin: 22px 0 18px;
	text-wrap: balance;
}

.kls-hub-head .kls-hub-description,
.kls-hub-head .wp-block-term-description {
	font-style: italic;
	font-size: clamp(18px, 1.7vw, 21px);
	line-height: 1.5;
	color: var(--kls-ink-soft);
	max-width: 680px;
	margin: 0 auto;
}

.kls-hub-head .wp-block-term-description p {
	margin: 0;
}

.kls-hub-head .kls-ornament--dots {
	margin: 28px auto 0;
}

.kls-featured {
	position: relative;
	margin: 0 var(--kls-page-margin);
	padding: 40px 0;
	border-top: var(--kls-rule);
	border-bottom: var(--kls-rule);
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 48px;
	align-items: center;
	max-width: var(--kls-wide);
}

@media (min-width: 1201px) {
	.kls-featured {
		margin-inline: auto;
	}
}

.kls-featured__plate .kls-plate__inner {
	aspect-ratio: 3 / 2;
}

.kls-featured__kicker {
	margin: 0 0 16px;
}

.kls-featured__title {
	font-size: clamp(30px, 3.6vw, 42px);
	line-height: 1.1;
	color: var(--kls-green);
	margin: 0 0 18px;
}

.kls-featured__title a {
	color: inherit;
	text-decoration: none;
}

.kls-featured__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.kls-featured:hover .kls-featured__title a,
.kls-featured:focus-within .kls-featured__title a {
	color: var(--kls-madder);
}

.kls-featured:hover img {
	transform: scale(1.02);
}

.kls-featured img {
	transition: transform 400ms ease-out;
}

.kls-featured__title a:focus-visible {
	outline: none;
}

.kls-featured:focus-within {
	outline: 2px solid var(--kls-madder);
	outline-offset: 6px;
}

.kls-featured__excerpt {
	font-size: 18px;
	line-height: 1.55;
	color: var(--kls-ink-soft);
	margin: 0 0 24px;
}

.kls-featured__more {
	display: inline-block;
	font-family: "EB Garamond", Georgia, serif;
	font-variant: small-caps;
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.14em;
	color: var(--kls-green);
	text-decoration: none;
	border-bottom: 1px solid var(--kls-gold);
	padding-bottom: 4px;
}

.kls-hub-grid {
	padding: 56px var(--kls-page-margin) 24px;
}

.kls-hub-grid__inner {
	max-width: var(--kls-wide);
	margin-inline: auto;
}

.kls-hub-grid .wp-block-post-title {
	font-size: clamp(20px, 2vw, 24px);
	line-height: 1.2;
	margin: 0 0 8px;
}

.kls-hub-grid .wp-block-post-excerpt,
.kls-hub-grid .kls-card__excerpt {
	font-style: italic;
	font-size: 16px;
	line-height: 1.45;
	color: var(--kls-ink-muted);
	margin: 0;
}

.kls-hub-grid .wp-block-post-excerpt p {
	margin: 0;
}

.kls-hub-grid .kls-plate__inner,
.kls-hub-grid .wp-block-post-featured-image {
	aspect-ratio: 3 / 2;
}

/* Pagination */
.kls-pagination {
	margin: 24px var(--kls-page-margin) 0;
	padding: 22px 0 64px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 22px;
	font-family: "EB Garamond", Georgia, serif;
	font-variant: small-caps;
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.14em;
	color: var(--kls-ink-muted);
}

.kls-pagination a,
.kls-pagination span {
	color: inherit;
	text-decoration: none;
}

.kls-pagination a {
	color: var(--kls-green);
}

.kls-pagination .kls-pagination__disabled {
	color: var(--kls-disabled);
}

.kls-pagination__count {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
}

.kls-pagination__num {
	font-family: "Cormorant Unicase", "EB Garamond", Georgia, serif;
	font-variant: normal;
	font-size: 17px;
	letter-spacing: 0;
	color: var(--kls-ink-muted);
}

.kls-pagination__num--current {
	color: var(--kls-madder);
}

.kls-pagination > *:not(:first-child)::before {
	content: "◆";
	font-family: var(--kls-ornament-font);
	font-size: 9px;
	font-variant: normal;
	letter-spacing: 0;
	color: var(--kls-gold);
	margin-right: 22px;
}

/* Rank Math breadcrumbs, restyled: swap the plugin separator for a diamond. */
.kls-breadcrumb p,
.kls-breadcrumb .rank-math-breadcrumb p,
.kls-breadcrumb > nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0;
}

.kls-breadcrumb .separator {
	font-size: 0;
	line-height: 0;
}

.kls-breadcrumb .separator::after {
	content: "◆";
	font-family: var(--kls-ornament-font);
	font-size: 8px;
	color: var(--kls-gold);
}

.kls-breadcrumb .last {
	color: var(--kls-madder);
}

/* 13. Page, search, 404, comments ------------------------------------------ */

.kls-page-body {
	max-width: 760px;
	margin: 0 auto;
	padding: 48px var(--kls-page-margin) 72px;
}

.kls-empty {
	text-align: center;
	padding: 40px calc(var(--kls-page-margin) + var(--kls-inset)) 80px;
}

.kls-empty p {
	font-style: italic;
	font-size: 20px;
	line-height: 1.5;
	color: var(--kls-ink-soft);
	margin: 0 0 28px;
}

.kls-empty .kls-ornament--dots {
	margin: 0 auto 28px;
}

.kls-empty .wp-block-search,
.kls-hub-search {
	max-width: 480px;
	margin: 0 auto 28px;
}

.kls-hub-head .kls-hub-search {
	margin-top: 28px;
}

.kls-error-title {
	font-size: clamp(48px, 7.2vw, 86px);
	line-height: 1.02;
	color: var(--kls-green);
	margin: 28px 0 22px;
}

.kls-comments {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 var(--kls-page-margin) 72px;
}

.kls-comments .wp-block-post-comments-form input:not([type="submit"]),
.kls-comments .wp-block-post-comments-form textarea {
	background: var(--kls-parchment);
	border: 1px solid var(--kls-gold);
	border-radius: 0;
	padding: 12px 14px;
	font-family: "EB Garamond", Georgia, serif;
	font-size: 18px;
	color: var(--kls-ink);
}

.kls-comments .wp-block-comment-author-name,
.kls-comments .wp-block-comment-date {
	font-family: "EB Garamond", Georgia, serif;
	font-variant: small-caps;
	letter-spacing: 0.08em;
}

/* 14. Motion, focus, print -------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--kls-madder);
	outline-offset: 3px;
}

.kls-reveal {
	opacity: 0;
	transform: translateY(12px);
}

body.kls-revealed .kls-reveal {
	opacity: 1;
	transform: none;
	transition: opacity 600ms ease, transform 600ms ease;
}

body.kls-revealed .kls-reveal:nth-child(2) {
	transition-delay: 120ms;
}

body.kls-revealed .kls-reveal:nth-child(3) {
	transition-delay: 240ms;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.kls-reveal {
		opacity: 1;
		transform: none;
	}

	.kls-card:hover img,
	.kls-nearby__list li:hover img {
		transform: none;
	}
}

@media print {
	.kls-header,
	.kls-footer,
	.kls-guide-aside,
	.kls-continue,
	.kls-pagination {
		display: none !important;
	}

	.kls-guide-body {
		display: block;
		padding: 0;
	}

	body {
		background: #fff;
		color: #000;
	}
}

/* 15. Responsive ------------------------------------------------------------ */

@media (max-width: 1199px) {
	:root {
		--kls-page-margin: 32px;
		--kls-inset: 72px;
	}

	.kls-grid-4 .wp-block-post-template {
		grid-template-columns: repeat(3, 1fr);
	}

	.kls-guide-body {
		grid-template-columns: 1fr 280px;
		gap: 48px;
	}
}

@media (max-width: 999px) {
	.kls-guide-body {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.kls-guide-aside {
		position: static;
		max-width: 560px;
		width: 100%;
	}
}

@media (max-width: 899px) {
	:root {
		--kls-page-margin: 24px;
		--kls-inset: 24px;
		--kls-header-height: 56px;
	}

	.kls-hero {
		padding-block: 56px 48px;
	}

	.kls-itineraries .wp-block-post-template,
	.kls-grid-4 .wp-block-post-template,
	.kls-grid-3 .wp-block-post-template,
	.kls-hub-grid .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
	}

	.kls-stay,
	.kls-featured {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.kls-featured__plate {
		order: -1;
	}

	.kls-header__inner {
		flex-direction: row;
		justify-content: space-between;
		padding: 16px 0 14px;
		margin-top: 16px;
	}

	.kls-lockup .kls-site-mark svg,
	.kls-lockup .kls-site-mark img {
		width: 28px;
		height: 28px;
	}

	.kls-lockup .wp-block-site-title {
		font-size: 24px;
	}

	body.kls-scrolled .kls-header__inner {
		padding: 10px 0 8px;
	}
}

@media (max-width: 699px) {
	:root {
		--kls-page-margin: 20px;
		--kls-inset: 0px;
	}

	.kls-itineraries .wp-block-post-template,
	.kls-grid-4 .wp-block-post-template,
	.kls-grid-3 .wp-block-post-template,
	.kls-hub-grid .wp-block-post-template {
		grid-template-columns: 1fr;
	}

	.kls-article .entry-content p {
		font-size: 18px;
		line-height: 1.6;
	}

	.kls-article .entry-content > p:first-of-type::first-letter {
		font-size: 64px;
	}

	.kls-guide-plate .kls-plate__inner,
	.kls-guide-plate .wp-block-post-featured-image,
	.kls-hero .kls-plate__inner,
	.kls-hero .wp-block-image {
		aspect-ratio: 4 / 3;
	}

	.kls-pagination {
		gap: 14px;
	}

	.kls-pagination > *:not(:first-child)::before {
		margin-right: 14px;
	}
}