/**
 * Stillpoint — page chrome and templates (front end only).
 *
 * Shared primitives live in components.css and block refinements in blocks.css;
 * this file covers what only the front end has: the base reset not covered by
 * theme.json, focus ring, skip link, announcement bar, header (three layouts),
 * navigation (dropdowns + menu panel), footer, page header, blog cards, single
 * posts, comments, pagination, search, 404, page templates and print.
 *
 * Design tokens only (SPEC §5); tints use color-mix() on tokens.
 *
 * Header modes:
 * - Body classes pick the layout: sp-header--classic | --centered | --minimal,
 *   plus sp-header--sticky.
 * - html.sp-nav-panel-mode (set by the inline head script, kept current by
 *   navigation.js) means the menu lives in the toggle panel: below 960px, and at
 *   every width in the minimal layout. Without it (or without JS) the menu is inline.
 *
 * Contents
 *  1. Base
 *  2. Skip link and focus
 *  3. Announcement bar
 *  4. Header and brand
 *  5. Navigation (inline + dropdowns)
 *  6. Menu panel
 *  7. Header layouts
 *  8. Page header and back link
 *  9. Content wrapper and page templates
 * 10. Blog: card grid
 * 11. Single post
 * 12. Comments
 * 13. Pagination and page links
 * 14. Search
 * 15. Empty states and 404
 * 16. Footer
 * 17. Motion, forced colors and print
 */

/* ==========================================================================
   1. Base
   ========================================================================== */

:root {
	/* Sticky header height (theme.js keeps it exact; 0px when the header scrolls away). */
	--sp-header-height: 0px;
	/* Full header bar height, whatever the sticky setting (theme.js). */
	--sp-header-bar: 4.75rem;
	--sp-logo-width: 160px;
	--sp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Without JS the sticky header height is estimated (events and anchors use it). */
:root:has(body.sp-header--sticky) {
	--sp-header-height: 5.5rem;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--sp-header-height) + var(--wp--preset--spacing--30));
}

/*
 * Controls inside the sticky header sit inside that scroll padding by design.
 * Cancel it for them, so focusing one (Shift+Tab, Escape back to the menu
 * button) never scrolls the page and loses the reader's place.
 */
.sp-header--sticky .sp-header :where(a, button, input, select, textarea, [tabindex]) {
	scroll-margin-top: calc(-1 * (var(--wp-admin--admin-bar--height, 0px) + var(--sp-header-height) + var(--wp--preset--spacing--30)));
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-kerning: normal;
}

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

svg:not(:root) {
	overflow: visible;
}

::selection {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent);
	color: var(--wp--preset--color--contrast);
}

.sp-main {
	display: block;
	min-height: 40vh;
}

.sp-main:focus {
	outline: none;
}

/* Body scroll lock while the menu panel is open (navigation.js). */
html.sp-nav-is-open {
	overflow: hidden;
}

html.sp-nav-is-open body {
	padding-inline-end: var(--sp-scrollbar-width, 0px);
}

/* ==========================================================================
   2. Skip link and focus
   ========================================================================== */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--sp-ring, var(--wp--custom--color--link));
	outline-offset: 3px;
}

:where(input, select, textarea):focus-visible {
	outline-offset: 1px;
}

.sp-skip-link {
	position: fixed;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--preset--spacing--20));
	left: var(--wp--preset--spacing--20);
	z-index: 100001;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--button);
	background-color: var(--wp--preset--color--contrast);
	box-shadow: var(--wp--preset--shadow--lifted);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transform: translateY(calc(-100% - var(--wp-admin--admin-bar--height, 0px) - 3rem));
}

.sp-skip-link:focus,
.sp-skip-link:focus-visible {
	outline: 2px solid var(--sp-ring, var(--wp--custom--color--link));
	outline-offset: 3px;
	color: var(--wp--preset--color--base);
	transform: none;
}

/* ==========================================================================
   3. Announcement bar
   ========================================================================== */

.sp-announcement {
	--wp--custom--color--link: currentColor;
	position: relative;
	z-index: 60;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.03em;
	line-height: 1.45;
}

.sp-announcement[hidden],
.sp-announcement-dismissed .sp-announcement {
	display: none;
}

.sp-announcement__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding-block: 0.4rem;
}

.sp-announcement__message {
	margin: 0;
	text-align: center;
	overflow-wrap: anywhere;
}

.sp-js .sp-announcement__message {
	padding-inline: 2.75rem;
}

.sp-announcement__link {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	min-height: 2.25rem;
	color: inherit;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.sp-announcement__link:hover {
	color: inherit;
	text-decoration-color: currentColor;
}

.sp-announcement__icon {
	width: 1.1em;
	height: 1.1em;
	transition: transform var(--wp--custom--transition--fast);
}

.sp-announcement__link:hover .sp-announcement__icon {
	transform: translateX(2px);
}

.sp-announcement__dismiss {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: calc(var(--wp--custom--gutter) - 0.75rem);
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: inherit;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color var(--wp--custom--transition--fast);
}

.sp-js .sp-announcement__dismiss {
	display: inline-flex;
}

.sp-announcement__dismiss:hover {
	background-color: color-mix(in srgb, currentColor 14%, transparent);
}

.sp-announcement__dismiss .sp-icon {
	width: 1.1rem;
	height: 1.1rem;
}

.sp-announcement :focus-visible {
	outline-color: currentColor;
	outline-offset: 1px;
}

/* ==========================================================================
   4. Header and brand
   ========================================================================== */

.sp-header {
	position: relative;
	z-index: 50;
	border-block-end: 1px solid transparent;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	transition:
		border-color var(--wp--custom--transition--base),
		box-shadow var(--wp--custom--transition--base);
}

.sp-header--sticky .sp-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
}

/* The admin bar scrolls away on small screens. */
@media (max-width: 600px) {
	.sp-header--sticky.admin-bar .sp-header {
		top: 0;
	}
}

.sp-header.is-scrolled,
.sp-header.is-menu-open {
	border-block-end-color: var(--wp--preset--color--hairline);
}

.sp-header.is-scrolled:not(.is-menu-open) {
	box-shadow: 0 10px 30px -24px color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent);
}

.sp-header__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "brand actions";
	align-items: center;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	min-height: 4.5rem;
	padding-block: var(--wp--preset--spacing--30);
}

/* Inline menu on narrow screens without JS: a second row under the brand. */
:root:not(.sp-nav-panel-mode) .sp-header.has-menu .sp-header__inner {
	grid-template-areas:
		"brand actions"
		"nav nav";
}

.sp-header__actions {
	grid-area: actions;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--30);
	min-width: 0;
}

/* A slightly more compact booking button in the header (token overrides). */
.sp-header-cta.sp-header__cta {
	--wp--custom--button--padding-block: 0.7rem;
	--wp--custom--button--padding-inline: 1.3rem;
	text-wrap: balance;
}

/* Never squeeze the booking button into a letter-wide column (long site titles). */
.sp-header__actions .sp-header__cta {
	white-space: nowrap;
}

.sp-header-cta__icon {
	width: 1em;
	height: 1em;
}

/* Below 960px the booking button moves into the menu panel. */
@media (max-width: 959.98px) {
	.sp-nav-panel-mode .sp-header.has-panel .sp-header__cta {
		display: none;
	}

	.sp-header__inner {
		min-height: 4rem;
		padding-block: var(--wp--preset--spacing--20);
	}
}

/* Brand ------------------------------------------------------------------ */

.sp-brand {
	grid-area: brand;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.15rem;
	min-width: 0;
}

.sp-brand__link {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-height: 2.75rem;
	max-width: 100%;
	color: inherit;
	text-decoration: none;
}

.sp-brand__link:hover {
	color: inherit;
}

.sp-brand__name {
	color: inherit;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: var(--wp--custom--heading--weight);
	letter-spacing: var(--wp--custom--heading--letter-spacing);
	line-height: 1.1;
	text-transform: var(--wp--custom--heading--text-transform);
	overflow-wrap: anywhere;
}

.sp-brand__logo {
	display: block;
	flex: none;
	width: min(var(--sp-logo-width), 100%);
	max-width: 100%;
	height: auto;
}

.sp-brand.has-logo .sp-brand__name {
	font-size: var(--wp--preset--font-size--large);
}

.sp-brand__tagline {
	max-width: 32ch;
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.02em;
	line-height: 1.4;
}

@media (max-width: 599.98px) {
	.sp-brand--header .sp-brand__tagline {
		display: none;
	}

	.sp-brand__logo {
		width: min(var(--sp-logo-width) * 0.8, 52vw);
	}
}

/* ==========================================================================
   5. Navigation (inline + dropdowns)
   ========================================================================== */

.sp-nav {
	grid-area: nav;
	min-width: 0;
}

.sp-menu,
.sp-menu .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-menu--primary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--wp--preset--spacing--30);
}

.sp-menu--primary li {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	min-width: 0;
}

.sp-menu--primary a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding-block: 0.5rem;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.3;
	text-decoration: none;
	overflow-wrap: anywhere;
}

/* A hairline that draws in under the link (and stays under the current page). */
.sp-menu--primary > li > a {
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 calc(100% - 0.55rem);
	background-repeat: no-repeat;
	background-size: 0% 1px;
	transition:
		background-size var(--wp--custom--transition--base),
		color var(--wp--custom--transition--fast);
}

.sp-menu--primary > li > a:hover,
.sp-menu--primary > li > a[aria-current],
.sp-menu--primary > .current-menu-item > a,
.sp-menu--primary > .current-menu-ancestor > a,
.sp-menu--primary > .current-menu-parent > a,
.sp-menu--primary > .current_page_parent > a {
	background-size: 100% 1px;
}

.sp-menu--primary a:hover,
.sp-menu--primary [aria-current="page"],
.sp-menu--primary .current-menu-item > a,
.sp-menu--primary .current-menu-ancestor > a,
.sp-menu--primary .current_page_parent > a {
	color: var(--wp--custom--color--link);
}

/* Disclosure button beside a parent link. */
.sp-submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0 -0.75rem 0 -0.5rem;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.sp-submenu-toggle:hover {
	color: var(--wp--custom--color--link);
}

.sp-submenu-toggle .sp-icon {
	width: 0.95rem;
	height: 0.95rem;
	transition: transform var(--wp--custom--transition--base);
}

.sp-submenu-toggle[aria-expanded="true"] .sp-icon {
	transform: rotate(180deg);
}

/* Inline dropdowns (only when the menu is not in the panel). */
:root:not(.sp-nav-panel-mode) .sp-menu--primary .sub-menu {
	position: absolute;
	top: 100%;
	left: -0.75rem;
	z-index: 20;
	display: none;
	flex-direction: column;
	width: max-content;
	min-width: 13rem;
	max-width: 19rem;
	padding: var(--wp--preset--spacing--10);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--medium);
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--lifted);
}

:root:not(.sp-nav-panel-mode) .sp-menu--primary > li:nth-last-child(-n+2):not(:first-child) > .sub-menu {
	right: -0.75rem;
	left: auto;
}

/* Third level: nested inside the dropdown. */
:root:not(.sp-nav-panel-mode) .sp-menu--primary .sub-menu .sub-menu {
	position: static;
	width: 100%;
	min-width: 0;
	padding: 0 0 0 var(--wp--preset--spacing--20);
	border: 0;
	box-shadow: none;
}

:root:not(.sp-nav-panel-mode) .sp-menu--primary .is-open > .sub-menu {
	display: flex;
}

:root:not(.sp-nav-panel-mode) .sp-menu--primary .sub-menu li {
	width: 100%;
}

:root:not(.sp-nav-panel-mode) .sp-menu--primary .sub-menu a {
	flex: 1 1 auto;
	min-height: 2.5rem;
	padding: 0.45rem 0.75rem;
	border-radius: var(--wp--custom--radius--small);
	color: var(--wp--preset--color--contrast);
	transition: background-color var(--wp--custom--transition--fast);
}

:root:not(.sp-nav-panel-mode) .sp-menu--primary .sub-menu a:hover,
:root:not(.sp-nav-panel-mode) .sp-menu--primary .sub-menu [aria-current="page"] {
	background-color: var(--wp--preset--color--surface);
}

:root:not(.sp-nav-panel-mode) .sp-menu--primary .sub-menu .sp-submenu-toggle {
	margin: 0;
}

/* Pointer users also get hover; aria-expanded stays the source of truth for the button. */
@media (hover: hover) and (min-width: 960px) {
	/* Escape dismisses a hover-opened dropdown until the pointer leaves (WCAG 1.4.13). */
	:root:not(.sp-nav-panel-mode) .sp-menu--primary > li:hover:not(.is-hover-dismissed) > .sub-menu {
		display: flex;
	}
}

/* Without JS: open on focus, and on small screens list everything in place. */
:root:not(.sp-js) .sp-menu--primary li:focus-within > .sub-menu {
	display: flex;
}

:root:not(.sp-js) .sp-submenu-toggle {
	display: none;
}

@media (max-width: 959.98px) {
	:root:not(.sp-js) .sp-menu--primary .sub-menu {
		position: static;
		display: flex;
		width: 100%;
		min-width: 0;
		border: 0;
		box-shadow: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.sp-has-motion .sp-menu--primary .is-open > .sub-menu {
		animation: sp-drop-in var(--wp--custom--transition--base) both;
	}
}

@keyframes sp-drop-in {
	from {
		opacity: 0;
		transform: translateY(-0.35rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   6. Menu panel
   ========================================================================== */

/* Inline mode: the panel wrappers disappear and the menu joins the header grid. */
.sp-nav-panel,
.sp-nav-panel__inner {
	display: contents;
}

.sp-nav-panel__footer {
	display: none;
}

/* Toggle button ---------------------------------------------------------- */

.sp-menu-toggle {
	display: none;
	align-items: center;
	gap: 0.65rem;
	min-height: 2.75rem;
	margin: 0 -0.5rem 0 0;
	padding: 0.5rem;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: inherit;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--eyebrow--letter-spacing);
	line-height: 1;
	text-transform: uppercase;
	-webkit-tap-highlight-color: transparent;
}

.sp-nav-panel-mode .sp-menu-toggle {
	display: inline-flex;
}

.sp-menu-toggle:hover {
	color: var(--wp--custom--color--link);
}

.sp-menu-toggle__icon {
	position: relative;
	display: block;
	flex: none;
	width: 1.5rem;
	height: 0.7rem;
}

.sp-menu-toggle__bar {
	position: absolute;
	left: 0;
	display: block;
	width: 100%;
	height: 1.5px;
	border-radius: 1px;
	background-color: currentColor;
	transition:
		transform var(--wp--custom--transition--base),
		top var(--wp--custom--transition--base),
		width var(--wp--custom--transition--base);
}

.sp-menu-toggle__bar:first-child {
	top: 0;
}

.sp-menu-toggle__bar:last-child {
	top: calc(100% - 1.5px);
	width: 70%;
}

.sp-menu-toggle:hover .sp-menu-toggle__bar:last-child {
	width: 100%;
}

.sp-menu-toggle[aria-expanded="true"] .sp-menu-toggle__bar {
	top: calc(50% - 0.75px);
	width: 100%;
}

.sp-menu-toggle[aria-expanded="true"] .sp-menu-toggle__bar:first-child {
	transform: rotate(45deg);
}

.sp-menu-toggle[aria-expanded="true"] .sp-menu-toggle__bar:last-child {
	transform: rotate(-45deg);
}

/* Panel ------------------------------------------------------------------ */

.sp-nav-panel-mode .sp-nav-panel {
	position: fixed;
	inset: var(--sp-panel-top, var(--sp-header-bar)) 0 0;
	z-index: 1;
	display: block;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	border-block-start: 1px solid var(--wp--preset--color--hairline);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	visibility: hidden;
	opacity: 0;
	transition:
		opacity var(--wp--custom--transition--base),
		visibility 0s linear 280ms;
}

.sp-nav-panel-mode .sp-nav-panel.is-open {
	visibility: visible;
	opacity: 1;
	transition:
		opacity var(--wp--custom--transition--base),
		visibility 0s;
}

.sp-nav-panel-mode .sp-nav-panel__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--60);
	width: 100%;
	max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--wp--custom--gutter));
	min-height: 100%;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--40) var(--wp--custom--gutter) var(--wp--preset--spacing--60);
}

/* Menu inside the panel: large serif links with hairlines between them. */
.sp-nav-panel-mode .sp-nav-panel .sp-menu--primary {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
}

.sp-nav-panel-mode .sp-nav-panel .sp-menu--primary > li {
	border-block-end: 1px solid var(--wp--preset--color--hairline);
}

.sp-nav-panel-mode .sp-nav-panel .sp-menu--primary > li > a {
	flex: 1 1 0;
	min-height: 3.5rem;
	padding-block: var(--wp--preset--spacing--20);
	background-image: none;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: var(--wp--custom--heading--weight);
	letter-spacing: var(--wp--custom--heading--letter-spacing);
	line-height: 1.15;
	text-transform: var(--wp--custom--heading--text-transform);
	transition:
		color var(--wp--custom--transition--fast),
		transform var(--wp--custom--transition--base);
}

/* Current page: link color plus a small leading dash (not color alone). */
.sp-nav-panel-mode .sp-nav-panel .sp-menu--primary > li > a[aria-current="page"]::before,
.sp-nav-panel-mode .sp-nav-panel .sp-menu--primary > .current-menu-item > a::before {
	content: "";
	flex: none;
	width: 1.25rem;
	height: 1px;
	margin-inline-end: 0.75rem;
	background-color: currentColor;
}

.sp-nav-panel-mode .sp-nav-panel .sp-submenu-toggle {
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	border: 1px solid var(--wp--preset--color--hairline);
}

.sp-nav-panel-mode .sp-nav-panel .sub-menu {
	display: none;
	flex-basis: 100%;
	flex-direction: column;
	padding: 0 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
}

.sp-nav-panel-mode .sp-nav-panel .is-open > .sub-menu {
	display: flex;
}

.sp-nav-panel-mode .sp-nav-panel .sub-menu a {
	flex: 1 1 0;
	min-height: 2.75rem;
	padding-block: 0.4rem;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--medium);
}

.sp-nav-panel-mode .sp-nav-panel .sub-menu a:hover,
.sp-nav-panel-mode .sp-nav-panel .sub-menu [aria-current="page"] {
	color: var(--wp--custom--color--link);
}

.sp-nav-panel-mode .sp-nav-panel .sub-menu .sub-menu {
	padding-block-end: var(--wp--preset--spacing--10);
}

/* Panel footer: booking button and social icons. */
.sp-nav-panel-mode .sp-nav-panel__footer {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--wp--preset--spacing--40);
}

.sp-nav-panel-mode .sp-nav-panel__footer .sp-social {
	justify-content: flex-start;
}

@media (min-width: 600px) {
	.sp-nav-panel-mode .sp-nav-panel__footer {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}

	.sp-nav-panel-mode .sp-nav-panel__cta.sp-button--block {
		width: auto;
	}
}

/* Full-screen overlay at desktop widths (minimal layout). */
@media (min-width: 960px) {
	.sp-nav-panel-mode .sp-nav-panel__inner {
		justify-content: center;
		padding-block: var(--wp--preset--spacing--70);
	}

	.sp-nav-panel-mode .sp-nav-panel .sp-nav {
		max-width: 44rem;
	}

	.sp-nav-panel-mode .sp-nav-panel .sp-menu--primary > li {
		border: 0;
	}

	.sp-nav-panel-mode .sp-nav-panel .sp-menu--primary > li > a {
		flex: 0 1 auto;
		min-height: 0;
		padding-block: 0.3rem;
		font-size: var(--wp--preset--font-size--huge);
	}

	.sp-nav-panel-mode .sp-nav-panel .sp-menu--primary > li > .sp-submenu-toggle {
		margin-inline-start: var(--wp--preset--spacing--30);
	}

	.sp-nav-panel-mode .sp-nav-panel .sp-menu--primary > li > a:hover {
		transform: translateX(0.4rem);
	}

	/* The bar already shows the booking button. */
	.sp-nav-panel-mode .sp-nav-panel__cta {
		display: none;
	}

	.sp-nav-panel-mode .sp-nav-panel__footer {
		justify-content: flex-start;
		padding-block-start: var(--wp--preset--spacing--40);
		border-block-start: 1px solid var(--wp--preset--color--hairline);
		max-width: 44rem;
	}

	/* A quiet arch on the right, the theme's signature shape. */
	.sp-nav-panel-mode .sp-nav-panel::before {
		content: "";
		position: absolute;
		inset-block-end: 0;
		inset-inline-end: max(var(--wp--custom--gutter), calc((100vw - var(--wp--style--global--wide-size)) / 2));
		width: min(30vw, 26rem);
		height: min(72%, 38rem);
		border-radius: var(--wp--custom--radius--pill) var(--wp--custom--radius--pill) 0 0;
		background: linear-gradient(to bottom, color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent), color-mix(in srgb, var(--wp--preset--color--accent) 6%, transparent));
		pointer-events: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.sp-has-motion .sp-nav-panel.is-open .sp-menu--primary > li,
	.sp-has-motion .sp-nav-panel.is-open .sp-nav-panel__footer {
		animation: sp-rise var(--wp--custom--transition--slow) both;
	}

	.sp-has-motion .sp-nav-panel.is-open .sp-menu--primary > li:nth-child(2) {
		animation-delay: 40ms;
	}

	.sp-has-motion .sp-nav-panel.is-open .sp-menu--primary > li:nth-child(3) {
		animation-delay: 80ms;
	}

	.sp-has-motion .sp-nav-panel.is-open .sp-menu--primary > li:nth-child(4) {
		animation-delay: 120ms;
	}

	.sp-has-motion .sp-nav-panel.is-open .sp-menu--primary > li:nth-child(5) {
		animation-delay: 160ms;
	}

	.sp-has-motion .sp-nav-panel.is-open .sp-menu--primary > li:nth-child(6) {
		animation-delay: 200ms;
	}

	.sp-has-motion .sp-nav-panel.is-open .sp-menu--primary > li:nth-child(n+7),
	.sp-has-motion .sp-nav-panel.is-open .sp-nav-panel__footer {
		animation-delay: 240ms;
	}
}

@keyframes sp-rise {
	from {
		opacity: 0;
		transform: translateY(0.75rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   7. Header layouts (wide screens)
   ========================================================================== */

@media (min-width: 960px) {
	.sp-header__inner {
		min-height: 5rem;
	}

	/* Classic: brand left, menu right, booking button. */
	:root:not(.sp-nav-panel-mode) .sp-header--classic .sp-header.has-menu .sp-header__inner {
		grid-template-columns: fit-content(40%) minmax(0, 1fr) auto;
		grid-template-areas: "brand nav actions";
		column-gap: var(--wp--preset--spacing--50);
	}

	.sp-header--classic .sp-nav {
		justify-self: end;
	}

	.sp-header--classic .sp-menu--primary {
		justify-content: flex-end;
	}

	/* Centered: brand centered above a centered menu, booking button on the right. */
	.sp-header--centered .sp-header:not(.sp-header--landing) .sp-header__inner {
		grid-template-columns: minmax(max-content, 1fr) minmax(0, max-content) minmax(max-content, 1fr);
		grid-template-areas: ". brand actions";
		padding-block-start: var(--wp--preset--spacing--40);
	}

	:root:not(.sp-nav-panel-mode) .sp-header--centered .sp-header.has-menu .sp-header__inner {
		grid-template-areas:
			". brand actions"
			"nav nav nav";
		row-gap: var(--wp--preset--spacing--30);
		padding-block-end: 0;
	}

	.sp-header--centered .sp-header:not(.sp-header--landing) .sp-brand {
		align-items: center;
		text-align: center;
	}

	.sp-header--centered .sp-header:not(.sp-header--landing) .sp-brand__tagline {
		max-width: 44ch;
	}

	.sp-header--centered .sp-nav {
		justify-self: stretch;
		border-block-start: 1px solid var(--wp--preset--color--hairline);
	}

	.sp-header--centered .sp-menu--primary {
		justify-content: center;
		gap: 0 var(--wp--preset--spacing--40);
	}

	.sp-header--centered .sp-brand__name {
		font-size: var(--wp--preset--font-size--xx-large);
	}

	/* Minimal: brand left; booking button and "Menu" on the right at every width. */
	.sp-header--minimal .sp-menu-toggle {
		padding-inline: 0.85rem;
		border: 1px solid var(--wp--preset--color--hairline);
		margin-inline-end: 0;
	}

	.sp-header--minimal .sp-menu-toggle:hover {
		border-color: currentColor;
	}
}

/* ==========================================================================
   8. Page header and back link
   ========================================================================== */

.sp-page-header {
	position: relative;
	padding-block: calc(var(--wp--custom--section--padding) * 0.7) calc(var(--wp--custom--section--padding) * 0.45);
}

.sp-page-header__inner {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	align-items: center;
}

.sp-page-header__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	min-width: 0;
	max-width: 50rem;
}

.sp-page-header__text > * {
	margin: 0;
}

/* A short accent hairline closes the heading group. */
.sp-page-header__text::after {
	content: "";
	display: block;
	width: 3rem;
	height: 1px;
	margin-block-start: var(--wp--preset--spacing--10);
	background-color: var(--wp--preset--color--accent);
}

.sp-page-header__eyebrow {
	margin: 0;
}

.sp-page-header__title {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--display);
	font-weight: var(--wp--custom--heading--weight);
	letter-spacing: var(--wp--custom--heading--letter-spacing);
	line-height: var(--wp--custom--heading--line-height);
	text-transform: var(--wp--custom--heading--text-transform);
	overflow-wrap: anywhere;
	hyphens: auto;
	text-wrap: balance;
}

.sp-page-header__description {
	max-width: 46ch;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	text-wrap: pretty;
}

.sp-page-header__image {
	aspect-ratio: 3 / 2;
}

.sp-page-header__image > img {
	height: 100%;
}

@media (min-width: 960px) {
	.sp-page-header.has-image .sp-page-header__inner {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: var(--wp--preset--spacing--70);
	}

	.sp-page-header.has-image .sp-page-header__image {
		aspect-ratio: 4 / 5;
		max-height: 38rem;
	}
}

/* The first section after a page header starts closer to it. */
.sp-page-header + .sp-section:not(.sp-section--surface):not(.sp-section--inverted) {
	padding-block-start: calc(var(--wp--custom--section--padding) * 0.35);
}

/* Back link ---------------------------------------------------------------- */

.sp-back {
	margin: 0 0 var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--small);
}

.sp-back__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	min-height: 2.75rem;
	color: var(--wp--custom--color--link);
	text-decoration: none;
}

.sp-back__icon {
	width: 1em;
	height: 1em;
	transition: transform var(--wp--custom--transition--fast);
}

.sp-back__link:hover {
	color: var(--wp--custom--color--link);
}

.sp-back__link:hover .sp-back__label {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.sp-back__link:hover .sp-back__icon {
	transform: translateX(-3px);
}

/* ==========================================================================
   9. Content wrapper and page templates
   ========================================================================== */

/* Block content: `is-layout-constrained has-global-padding` give editor-identical alignments. */
.sp-entry-content {
	padding-block-end: var(--wp--custom--section--padding);
	overflow-wrap: break-word;
}

.sp-entry-content::after {
	content: "";
	display: table;
	clear: both;
}

/* Pages built edge to edge (front page, Canvas, Landing). */
:is(.sp-main--front, .sp-main--canvas, .sp-main--landing) .sp-entry-content {
	padding-block-start: var(--wp--custom--section--padding);
}

@supports selector(:has(*)) {
	:is(.sp-main--front, .sp-main--canvas, .sp-main--landing) .sp-entry-content:has(> .alignfull:first-child) {
		padding-block-start: 0;
	}

	.sp-entry-content:has(> .alignfull:last-child) {
		padding-block-end: 0;
	}
}

/* Full-width bands follow each other without gaps (patterns set their own spacing). */
.sp-entry-content > .alignfull + .alignfull {
	margin-block-start: 0;
}

/* Password form (the_password_form filter). */
.sp-password-form {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	max-width: 36rem;
	margin-block: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--large);
	background-color: var(--wp--preset--color--surface);
}

.sp-password-form__intro {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

.sp-password-form__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--20);
}

.sp-password-form__row .sp-field {
	flex: 1 1 14rem;
}

.sp-password-form__row .sp-form__actions {
	margin: 0;
}

/* Static front page that is still empty. */
.sp-front-empty + .sp-front-empty__help {
	padding-block-start: 0;
}

/* ==========================================================================
   10. Blog: card grid
   ========================================================================== */

.sp-post-grid {
	align-items: stretch;
}

.sp-post-card__media {
	aspect-ratio: 4 / 3;
}

.sp-post-card__media > img {
	height: 100%;
}

@media (prefers-reduced-motion: no-preference) {
	.sp-has-motion .sp-post-card__media > img {
		transition: transform var(--wp--custom--transition--slow);
	}

	.sp-has-motion .sp-post-card:hover .sp-post-card__media > img {
		transform: scale(1.035);
	}
}

/* No featured image: a calm tinted panel with the lotus mark. */
.sp-post-card__media--placeholder {
	display: grid;
	place-items: center;
	background:
		radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--wp--preset--color--accent) 34%, transparent) 0 38%, transparent 38.5%),
		color-mix(in srgb, var(--wp--preset--color--accent) 14%, var(--wp--preset--color--surface));
	color: color-mix(in srgb, var(--wp--preset--color--accent) 55%, var(--wp--preset--color--contrast));
}

.sp-post-card__placeholder-icon {
	width: 2.75rem;
	height: 2.75rem;
	opacity: 0.75;
}

.sp-post-card .sp-card__eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.sp-post-card .sp-entry-meta {
	gap: 0.25rem var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--x-small);
}

.sp-post-card .sp-card__footer {
	border-block-start: 0;
	padding-block-start: var(--wp--preset--spacing--20);
}

/* Featured first post on the journal's first page. */
@media (min-width: 960px) {
	.sp-post-card--featured {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: stretch;
	}

	/* The image fills its column however tall the text is. */
	.sp-post-card--featured .sp-post-card__media {
		aspect-ratio: auto;
		min-width: 0;
		min-height: 22rem;
	}

	.sp-post-card--featured .sp-post-card__media > img {
		position: absolute;
		inset: 0;
		height: 100%;
	}

	.sp-post-card--featured .sp-card__body {
		justify-content: center;
		gap: var(--wp--preset--spacing--20);
		padding: var(--wp--preset--spacing--50);
	}

	.sp-post-card--featured .sp-card__title {
		font-size: var(--wp--preset--font-size--huge);
	}

	.sp-post-card--featured .sp-card__excerpt {
		font-size: var(--wp--preset--font-size--medium);
	}

	.sp-post-card--featured .sp-card__footer {
		margin-block-start: 0;
	}
}

/* ==========================================================================
   11. Single post
   ========================================================================== */

.sp-entry-header {
	padding-block: calc(var(--wp--custom--section--padding) * 0.65) var(--wp--preset--spacing--60);
}

.sp-entry-header__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	text-align: center;
}

.sp-entry-header__inner > * {
	margin: 0;
}

.sp-entry-header__eyebrow a {
	color: inherit;
	text-decoration: none;
}

.sp-entry-header__eyebrow a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.sp-entry-header__title {
	max-width: min(22ch, 100%);
	font-size: var(--wp--preset--font-size--display);
	overflow-wrap: anywhere;
	hyphens: auto;
	text-wrap: balance;
}

.sp-entry-header__lede {
	max-width: 40rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	text-wrap: pretty;
}

.sp-entry-header__meta {
	justify-content: center;
	gap: 0.35rem var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.sp-entry-header__meta a {
	color: inherit;
}

.sp-entry-media {
	margin-block-end: var(--wp--preset--spacing--70);
}

.sp-entry-media__frame {
	aspect-ratio: 16 / 9;
}

.sp-entry-media__frame > img {
	height: 100%;
}

.sp-post-thumbnail-figure {
	margin: 0;
}

.sp-post-thumbnail__caption {
	margin-block-start: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

.sp-entry--single .sp-entry-content {
	padding-block-end: var(--wp--preset--spacing--70);
}

/* Tags and author note. */
.sp-entry-footer {
	padding-block-end: var(--wp--preset--spacing--70);
}

.sp-entry-footer__inner {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--50);
	border-block-start: 1px solid var(--wp--preset--color--hairline);
}

.sp-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-tags a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.25rem 1rem;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	text-decoration: none;
	transition:
		background-color var(--wp--custom--transition--fast),
		border-color var(--wp--custom--transition--fast);
}

.sp-tags a::before {
	content: "#";
	margin-inline-end: 0.15em;
	color: var(--wp--custom--color--link);
}

.sp-tags a:hover {
	border-color: var(--wp--custom--color--border-strong, var(--wp--preset--color--muted));
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
}

.sp-author {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	align-items: start;
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--large);
	background-color: var(--wp--preset--color--surface);
}

.sp-author__avatar {
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	object-fit: cover;
}

.sp-author__text > * {
	margin: 0;
}

.sp-author__name {
	margin-block: 0.15rem 0.4rem;
	font-size: var(--wp--preset--font-size--x-large);
}

.sp-author__bio {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 479.98px) {
	.sp-author {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Previous / next post. */
.sp-post-nav {
	border-block: 1px solid var(--wp--preset--color--hairline);
}

.sp-post-nav__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-post-nav__item + .sp-post-nav__item {
	border-block-start: 1px solid var(--wp--preset--color--hairline);
}

.sp-post-nav__link {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	padding-block: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.sp-post-nav__label {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: var(--wp--custom--color--link);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--eyebrow--letter-spacing);
	text-transform: uppercase;
}

.sp-post-nav__label .sp-icon {
	transition: transform var(--wp--custom--transition--fast);
}

.sp-post-nav__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: var(--wp--custom--heading--weight);
	letter-spacing: var(--wp--custom--heading--letter-spacing);
	line-height: 1.2;
	text-transform: var(--wp--custom--heading--text-transform);
	overflow-wrap: anywhere;
}

.sp-post-nav__link:hover {
	color: var(--wp--preset--color--contrast);
}

.sp-post-nav__link:hover .sp-post-nav__title {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.sp-post-nav__item--previous .sp-post-nav__link:hover .sp-icon {
	transform: translateX(-3px);
}

.sp-post-nav__item--next .sp-post-nav__link:hover .sp-icon {
	transform: translateX(3px);
}

@media (min-width: 720px) {
	.sp-post-nav__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sp-post-nav__item + .sp-post-nav__item {
		border-block-start: 0;
		border-inline-start: 1px solid var(--wp--preset--color--hairline);
	}

	.sp-post-nav__item--next {
		grid-column: 2;
	}

	.sp-post-nav__item--next .sp-post-nav__link {
		align-items: flex-end;
		padding-inline-start: var(--wp--preset--spacing--50);
		text-align: end;
	}

	.sp-post-nav__item--previous .sp-post-nav__link {
		padding-inline-end: var(--wp--preset--spacing--50);
	}
}

/* ==========================================================================
   12. Comments
   ========================================================================== */

.sp-comments {
	border-block-start: 1px solid var(--wp--preset--color--hairline);
}

/* Post navigation already draws the divider. */
.sp-post-nav + .sp-comments {
	border-block-start: 0;
}

.sp-comments__inner > :first-child {
	margin-block-start: 0;
}

.sp-comments__title {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--xx-large);
	text-wrap: balance;
}

.sp-comment-list,
.sp-comment-list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-comment-list .children {
	margin-inline-start: clamp(0.75rem, 4vw, 2.5rem);
	padding-inline-start: clamp(0.75rem, 3vw, 1.5rem);
	border-inline-start: 1px solid var(--wp--preset--color--hairline);
}

.sp-comment-list .comment-body {
	position: relative;
	padding-block: var(--wp--preset--spacing--40);
	border-block-end: 1px solid var(--wp--preset--color--hairline);
}

.sp-comment-list .comment-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.25rem var(--wp--preset--spacing--30);
}

.sp-comment-list .comment-author {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-weight: 600;
}

.sp-comment-list .comment-author .avatar {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
}

.sp-comment-list .comment-author .fn {
	font-style: normal;
}

.sp-comment-list .comment-author .fn a {
	color: inherit;
	text-decoration: none;
}

.sp-comment-list .comment-author .fn a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.sp-comment-list .says {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.sp-comment-list .comment-metadata {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

.sp-comment-list .comment-metadata a {
	color: inherit;
	text-decoration: none;
}

.sp-comment-list .comment-metadata a:hover {
	text-decoration: underline;
}

.sp-comment-list .comment-content {
	margin-block-start: var(--wp--preset--spacing--20);
	overflow-wrap: anywhere;
}

.sp-comment-list .comment-content > :first-child {
	margin-block-start: 0;
}

.sp-comment-list .comment-content > :last-child {
	margin-block-end: 0;
}

.sp-comment-list .comment-awaiting-moderation {
	display: block;
	margin-block-start: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-style: italic;
}

.sp-comment-list .reply {
	margin-block-start: var(--wp--preset--spacing--10);
}

.sp-comment-list .comment-reply-link,
#cancel-comment-reply-link {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	color: var(--wp--custom--color--link);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--eyebrow--letter-spacing);
	text-decoration: none;
	text-transform: uppercase;
}

.sp-comment-list .comment-reply-link:hover,
#cancel-comment-reply-link:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.sp-comment-list .bypostauthor > .comment-body .fn::after {
	content: "";
	display: inline-block;
	width: 0.45rem;
	height: 0.45rem;
	margin-inline-start: 0.5rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
	vertical-align: middle;
}

.sp-comment-list .pingback .comment-body,
.sp-comment-list .trackback .comment-body {
	font-size: var(--wp--preset--font-size--small);
}

.sp-comments__nav .nav-links {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--30);
}

.sp-comments__closed {
	margin: var(--wp--preset--spacing--40) 0 0;
	color: var(--wp--preset--color--muted);
	font-style: italic;
}

.sp-comments .comment-respond {
	margin-block-start: var(--wp--preset--spacing--60);
}

.sp-comment-list .comment-respond {
	margin-block: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--large);
	background-color: var(--wp--preset--color--surface);
}

.sp-comments__form-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--xx-large);
}

.sp-comments .comment-form {
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.sp-comments .comment-form > p {
	margin: 0;
}

.sp-comments .logged-in-as {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.sp-field__required {
	color: var(--wp--custom--color--link);
}

@media (min-width: 720px) {
	.sp-comments .comment-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sp-comments .comment-form > * {
		grid-column: 1 / -1;
	}

	.sp-comments .comment-form > .comment-form-author,
	.sp-comments .comment-form > .comment-form-email {
		grid-column: auto;
	}
}

/* ==========================================================================
   13. Pagination and page links
   ========================================================================== */

.sp-pagination {
	margin-block-start: var(--wp--preset--spacing--70);
}

.sp-pagination .nav-links,
.sp-page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--10);
}

.sp-pagination .page-numbers,
.sp-page-links .post-page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-width: 2.75rem;
	height: 2.75rem;
	padding-inline: 0.9rem;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	text-decoration: none;
	transition:
		background-color var(--wp--custom--transition--fast),
		border-color var(--wp--custom--transition--fast);
}

.sp-pagination a.page-numbers:hover,
.sp-page-links a.post-page-numbers:hover {
	border-color: var(--wp--preset--color--hairline);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
}

.sp-pagination .page-numbers.current,
.sp-page-links .post-page-numbers.current {
	border-color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-weight: 600;
}

.sp-pagination .page-numbers.dots {
	min-width: 1.5rem;
	padding-inline: 0;
}

.sp-pagination .prev,
.sp-pagination .next {
	border-color: var(--wp--preset--color--hairline);
}

.sp-pagination .prev {
	margin-inline-end: auto;
}

.sp-pagination .next {
	margin-inline-start: auto;
}

.sp-pagination__icon {
	width: 1rem;
	height: 1rem;
}

@media (max-width: 599.98px) {
	.sp-pagination__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.sp-pagination .prev,
	.sp-pagination .next {
		padding-inline: 0;
	}
}

.sp-page-links {
	justify-content: flex-start;
	margin-block-start: var(--wp--preset--spacing--50);
}

.sp-page-links__label {
	margin-inline-end: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* ==========================================================================
   14. Search
   ========================================================================== */

.sp-search-form {
	width: 100%;
	max-width: 36rem;
}

.sp-search-form__row {
	display: flex;
	gap: var(--wp--preset--spacing--10);
}

.sp-search-form__input {
	flex: 1 1 auto;
	min-width: 0;
}

.sp-search-form__input::-webkit-search-cancel-button {
	cursor: pointer;
}

.sp-search-form__submit {
	flex: none;
}

@media (max-width: 479.98px) {
	.sp-search-form__submit-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

.sp-search .sp-search-form {
	margin-block-end: var(--wp--preset--spacing--60);
}

.sp-search__results {
	border-block-start: 1px solid var(--wp--preset--color--hairline);
}

.sp-search-result {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	align-items: center;
	padding-block: var(--wp--preset--spacing--50);
	border-block-end: 1px solid var(--wp--preset--color--hairline);
}

.sp-search-result.has-image {
	grid-template-columns: minmax(0, 1fr) auto;
}

.sp-search-result__body > * {
	margin: 0;
}

.sp-search-result__title {
	margin-block: 0.35rem 0.5rem;
	font-size: var(--wp--preset--font-size--x-large);
	overflow-wrap: anywhere;
}

.sp-search-result__link {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.sp-search-result__link:hover {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.sp-search-result__excerpt {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.sp-search-result__media {
	width: clamp(4.5rem, 16vw, 8rem);
	aspect-ratio: 1;
}

.sp-search-result__media > img {
	height: 100%;
}

/* ==========================================================================
   15. Empty states and 404
   ========================================================================== */

.sp-none {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.sp-none > * {
	margin: 0;
}

.sp-none__icon {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 4.25rem;
	border-radius: var(--sp-radius-arch, var(--wp--custom--radius--pill));
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 20%, transparent);
	color: var(--wp--custom--color--link);
}

.sp-none__icon .sp-icon {
	width: 1.5rem;
	height: 1.5rem;
}

.sp-none__title {
	font-size: var(--wp--preset--font-size--xx-large);
	text-wrap: balance;
}

.sp-none__text {
	color: var(--wp--preset--color--muted);
}

.sp-none .sp-search-form {
	margin-block-start: var(--wp--preset--spacing--10);
}

.sp-not-found__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	text-align: center;
}

.sp-not-found__inner > * {
	margin: 0;
}

.sp-not-found__mark {
	display: grid;
	place-items: center;
	width: 5rem;
	height: 6.5rem;
	margin-block-end: var(--wp--preset--spacing--20);
	border-radius: var(--sp-radius-arch, var(--wp--custom--radius--pill));
	background:
		linear-gradient(to bottom, color-mix(in srgb, var(--wp--preset--color--accent) 34%, transparent), color-mix(in srgb, var(--wp--preset--color--accent) 8%, transparent));
	color: var(--wp--custom--color--link);
}

.sp-not-found__mark .sp-icon {
	width: 2rem;
	height: 2rem;
}

.sp-not-found__title {
	font-size: var(--wp--preset--font-size--display);
	text-wrap: balance;
}

.sp-not-found__text {
	max-width: 46ch;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
}

.sp-not-found .sp-search-form {
	margin-block-start: var(--wp--preset--spacing--30);
}

.sp-not-found__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	list-style: none;
}

/* ==========================================================================
   16. Footer
   ========================================================================== */

.sp-footer {
	border-block-start: 1px solid var(--wp--preset--color--hairline);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}

/* Newsletter band (studio): on the page color, divided from the footer by a hairline. */
.sp-footer__newsletter {
	border-block-end: 1px solid var(--wp--preset--color--hairline);
	background-color: var(--wp--preset--color--base);
}

.sp-footer__main {
	padding-block: calc(var(--wp--custom--section--padding) * 0.7) var(--wp--preset--spacing--60);
}

.sp-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	align-items: start;
}

@media (min-width: 960px) {
	.sp-footer__grid--cols-1 {
		grid-template-columns: minmax(0, 34rem);
	}

	.sp-footer__grid--cols-2 {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	}

	.sp-footer__grid--cols-3 {
		grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
	}

	.sp-footer__grid--cols-4 {
		grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	}
}

.sp-footer__col {
	min-width: 0;
}

.sp-footer__col--brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
}

.sp-footer .sp-brand__name {
	font-size: var(--wp--preset--font-size--xx-large);
}

.sp-footer .sp-brand.has-logo .sp-brand__name {
	font-size: var(--wp--preset--font-size--x-large);
}

.sp-footer__about {
	max-width: 36ch;
	margin: 0;
	color: var(--wp--preset--color--muted);
	line-height: var(--wp--custom--body--line-height);
}

.sp-footer__heading,
.sp-footer__col--widgets .widget-title,
.sp-footer__col--widgets .wp-block-heading {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--custom--color--link);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--eyebrow--letter-spacing);
	line-height: 1.4;
	text-transform: uppercase;
}

.sp-menu-list,
.sp-footer__col--widgets ul {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-menu-list a,
.sp-footer__col--widgets li > a {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.sp-menu-list a:hover,
.sp-menu-list [aria-current="page"],
.sp-footer__col--widgets li > a:hover {
	color: var(--wp--preset--color--contrast);
	text-decoration-line: underline;
}

.sp-footer__col--widgets .widget + .widget {
	margin-block-start: var(--wp--preset--spacing--50);
}

.sp-footer__col--widgets .wp-block-group > :first-child {
	margin-block-start: 0;
}

/* Social icons (also used in the menu panel). */
.sp-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition:
		background-color var(--wp--custom--transition--fast),
		border-color var(--wp--custom--transition--fast),
		color var(--wp--custom--transition--fast);
}

.sp-social__link:hover {
	border-color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.sp-social__icon {
	width: 1.1rem;
	height: 1.1rem;
}

.sp-social--labels .sp-social__link {
	width: auto;
	padding-inline: 1rem;
}

/* Contact details. */
.sp-contact-details {
	font-style: normal;
}

.sp-contact-details__list {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-contact-details__item {
	display: grid;
	grid-template-columns: 1.25rem minmax(0, 1fr);
	gap: 0.75rem;
	align-items: start;
	line-height: 1.55;
}

.sp-contact-details__icon {
	width: 1.15rem;
	height: 1.15rem;
	margin-block-start: 0.15em;
	color: var(--wp--custom--color--link);
}

.sp-contact-details__text {
	min-width: 0;
	overflow-wrap: anywhere;
}

.sp-contact-details a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.sp-contact-details a:hover {
	color: var(--wp--custom--color--link);
}

.sp-contact-details__map {
	display: flex;
	align-items: center;
	width: fit-content;
	min-height: 2.25rem;
	margin-block-start: 0.15rem;
	color: var(--wp--custom--color--link) !important;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--eyebrow--letter-spacing);
	text-decoration: none;
	text-transform: uppercase;
}

.sp-contact-details__map:hover {
	text-decoration: underline;
}

/* Bottom bar. */
.sp-footer__bottom {
	padding-block-end: var(--wp--preset--spacing--40);
}

.sp-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--50);
	position: relative;
	padding-block-start: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.02em;
}

/* Hairline aligned with the content, not the window. */
.sp-footer__bottom-inner::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: var(--wp--custom--gutter);
	height: 1px;
	background-color: var(--wp--preset--color--hairline);
}

.sp-footer__copyright {
	margin: 0;
}

.sp-footer__copyright a {
	color: inherit;
}

.sp-footer__legal .sp-menu-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--wp--preset--spacing--40);
}

.sp-footer__legal .sp-menu-list a {
	min-height: 2.75rem;
	color: var(--wp--preset--color--muted);
}

.sp-footer__legal .sp-menu-list a:hover {
	color: var(--wp--preset--color--contrast);
}

.sp-back-to-top {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	margin-inline-start: auto;
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	letter-spacing: var(--wp--custom--eyebrow--letter-spacing);
	text-decoration: none;
	text-transform: uppercase;
}

.sp-back-to-top:hover {
	color: var(--wp--custom--color--link);
}

.sp-back-to-top .sp-icon {
	width: 1rem;
	height: 1rem;
	transition: transform var(--wp--custom--transition--fast);
}

.sp-back-to-top:hover .sp-icon {
	transform: translateY(-2px);
}

/* Landing page footer: a single quiet line. */
.sp-footer--landing .sp-footer__bottom {
	padding-block: var(--wp--preset--spacing--30);
}

.sp-footer--landing .sp-footer__bottom-inner {
	justify-content: center;
	padding-block-start: 0;
}

.sp-footer--landing .sp-footer__bottom-inner::before {
	display: none;
}

/* ==========================================================================
   17. Motion, forced colors and print
   ========================================================================== */

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

	.sp-header,
	.sp-nav-panel,
	.sp-menu-toggle__bar,
	.sp-submenu-toggle .sp-icon,
	.sp-menu--primary a,
	.sp-post-card__media > img {
		transition: none !important;
		animation: none !important;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html:focus-within {
		scroll-behavior: smooth;
	}
}

@media (forced-colors: active) {
	.sp-menu--primary > li > a[aria-current],
	.sp-menu--primary > .current-menu-item > a {
		text-decoration: underline;
	}

	.sp-menu-toggle__bar,
	.sp-page-header__text::after {
		background-color: CanvasText;
	}

	.sp-header.is-scrolled {
		border-block-end-color: CanvasText;
	}
}

@media print {
	.sp-skip-link,
	.sp-announcement,
	.sp-header__actions,
	.sp-nav,
	.sp-nav-panel,
	.sp-menu-toggle,
	.sp-footer__newsletter,
	.sp-social,
	.sp-back-to-top,
	.sp-post-nav,
	.sp-comments .comment-respond,
	.sp-search-form {
		display: none !important;
	}

	.sp-header {
		position: static !important;
		border: 0;
		box-shadow: none;
	}

	.sp-footer {
		border: 0;
		background: none;
	}

	.sp-page-header,
	.sp-entry-header {
		padding-block: 0 1.5rem;
	}

	.sp-entry-content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		overflow-wrap: anywhere;
	}
}