/* ==========================================================================
   V6 page system.

   Loaded on every route EXCEPT the front page, which has its own composition.
   This is the stylesheet that closes V5's biggest gap: previously page.php,
   index.php, single.php and 404.php all shared one bare narrow column, so nine
   customer-facing pages looked like unstyled documents hanging off a designed
   homepage.

   Contents
     1.  Page hero and breadcrumbs
     2.  Page shell and aside layout
     3.  Editorial typography for the_content()
     4.  Aside cards
     5.  Post and link cards
     6.  Blog, archive and single article
     7.  Search form and results
     8.  Empty states and 404
     9.  Comments
     10. CTA band
     11. Back to top
     12. Mobile
   ========================================================================== */

/* ------------------------------------------------ 1. Page hero + breadcrumbs */

.wt-page-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: var(--wt-page-hero-min);
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
	background:
		radial-gradient(circle at 88% 10%, var(--wt-fill-blue), transparent 26rem),
		radial-gradient(circle at 4% 92%, var(--wt-fill-orange), transparent 22rem),
		linear-gradient(135deg, var(--wt-navy-charcoal), var(--wt-navy-900) 52%, var(--wt-navy));
	color: var(--wt-text-on-dark);
	overflow: hidden;
	isolation: isolate;
}

/* Tread texture, masked so it fades out behind the text. */
.wt-page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--wt-tread-dark);
	mask-image: linear-gradient(250deg, var(--wt-graphite), transparent 62%);
	pointer-events: none;
}

/* A single sweeping arc echoing the logo's motion arrow. */
.wt-page-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset-inline-end: -14%;
	inset-block-start: -58%;
	width: clamp(22rem, 46vw, 44rem);
	aspect-ratio: 1;
	border-radius: 50%;
	border: 1px solid var(--wt-line-light-soft);
	background: radial-gradient(circle at 40% 60%, var(--wt-glow-electric), transparent 62%);
	opacity: 0.85;
	pointer-events: none;
}

.wt-page-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
}

.wt-page-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--wt-space-2);
	padding: 0.42rem 0.85rem;
	margin-bottom: var(--wt-space-4);
	border: 1px solid var(--wt-line-light-strong);
	border-radius: var(--wt-radius-pill);
	background: var(--wt-fill-light);
	color: var(--wt-white);
	font-family: var(--wt-font-display);
	font-size: var(--wt-text-xs);
	font-weight: var(--wt-weight-bold);
	letter-spacing: var(--wt-tracking-wider);
	text-transform: uppercase;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.wt-page-hero__eyebrow .wt-icon {
	color: var(--wt-orange-bright);
	width: 1rem;
	height: 1rem;
}

.wt-page-hero__title {
	max-width: 20ch;
	margin-bottom: var(--wt-space-3);
	color: var(--wt-white);
	font-size: clamp(2.25rem, 4.6vw, 4rem);
	line-height: 1.02;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.wt-page-hero__lead {
	max-width: 46ch;
	margin-bottom: 0;
	color: var(--wt-text-on-dark);
	font-size: var(--wt-prose-lead);
}

.wt-page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wt-space-3);
	margin-top: var(--wt-space-6);
}

/* Breadcrumbs. Rank Math owns BreadcrumbList schema; this is the visual trail
   only, so there is no duplicate structured data. */
.wt-breadcrumbs {
	margin-bottom: var(--wt-space-5);
	font-size: var(--wt-text-sm);
}

.wt-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wt-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--wt-text-on-dark-muted);
}

.wt-breadcrumbs__item + .wt-breadcrumbs__item::before {
	content: "";
	width: 0.32rem;
	height: 0.32rem;
	border-radius: 50%;
	background: var(--wt-orange-bright);
	opacity: 0.8;
}

.wt-breadcrumbs a {
	color: var(--wt-white);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.wt-breadcrumbs a:hover {
	border-bottom-color: var(--wt-orange-bright);
}

.wt-breadcrumbs__item[aria-current="page"] {
	color: var(--wt-orange-gold);
	font-weight: var(--wt-weight-bold);
}

/* ------------------------------------------------------- 2. Page shell */

.wt-page {
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.wt-page__grid {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 1024px) {
	.wt-page__grid--with-aside {
		grid-template-columns: minmax(0, 1fr) var(--wt-aside-width);
	}
}

.wt-page__main {
	min-width: 0;
}

.wt-page__aside {
	display: grid;
	gap: var(--wt-space-4);
	min-width: 0;
}

@media (min-width: 1024px) {
	.wt-page__aside--sticky {
		position: sticky;
		top: calc(var(--wt-adminbar-h) + 7rem);
	}
}

/* ------------------------------------- 3. Editorial typography (the_content) */

/* Owner-authored content arrives as plain paragraphs and core blocks. This
   gives it a designed measure, rhythm and hierarchy so even a two-paragraph
   page reads as intentional rather than unfinished. */

.wt-prose {
	max-width: var(--wt-editorial-measure);
	font-size: var(--wt-text-md);
	color: var(--wt-text);
}

.wt-prose > * + * {
	margin-block-start: var(--wt-prose-gap);
}

.wt-prose > :first-child {
	margin-block-start: 0;
}

.wt-prose h2,
.wt-prose h3,
.wt-prose h4 {
	margin-block-start: 1.9em;
	margin-block-end: 0.55em;
	color: var(--wt-navy);
	letter-spacing: -0.02em;
	scroll-margin-top: calc(var(--wt-adminbar-h) + 7rem);
}

.wt-prose h2 {
	position: relative;
	padding-top: var(--wt-space-4);
	font-size: clamp(1.65rem, 2.4vw, 2.25rem);
}

/* Short tread rule above every H2, tying body copy to the brand motif. */
.wt-prose h2::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 3.25rem;
	height: 0.3rem;
	border-radius: var(--wt-radius-pill);
	background: linear-gradient(90deg, var(--wt-orange), var(--wt-orange-gold));
}

.wt-prose h3 {
	font-size: clamp(1.3rem, 1.7vw, 1.6rem);
}

.wt-prose p {
	max-width: none;
}

/* The first paragraph of a page reads as a lead. The starter pages already use
   .wt-page-lead, and this covers pages that do not. */
.wt-prose > p:first-of-type,
.wt-prose .wt-page-lead {
	font-size: var(--wt-prose-lead);
	line-height: 1.55;
	color: var(--wt-graphite);
}

.wt-prose a:not(.wp-block-button__link):not(.wt-btn) {
	color: var(--wt-navy);
	text-decoration: underline;
	text-decoration-color: var(--wt-orange);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.22em;
	transition: color var(--wt-duration-fast) var(--wt-ease),
	            background-color var(--wt-duration-fast) var(--wt-ease);
}

.wt-prose a:not(.wp-block-button__link):not(.wt-btn):hover {
	color: var(--wt-accent-text);
	background: var(--wt-orange-100);
}

.wt-prose strong {
	color: var(--wt-navy);
}

.wt-prose ul,
.wt-prose ol {
	padding-inline-start: 1.35rem;
}

.wt-prose li + li {
	margin-block-start: 0.5em;
}

.wt-prose ul {
	list-style: none;
	padding-inline-start: 0;
}

.wt-prose ul li {
	position: relative;
	padding-inline-start: 1.75rem;
}

.wt-prose ul li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.62em;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--wt-orange);
	box-shadow: 0 0 0 0.22rem var(--wt-orange-100);
}

/* GUARD: the decorative bullet above must not leak into plugin markup.
   Fluent Forms renders radio groups, checkbox groups and step indicators as
   <ul>, and the quote and booking pages put those forms inside .wt-prose. Left
   unguarded, every radio option would sprout an orange dot and a 1.75rem
   indent. The same applies to core galleries and the theme's own link lists. */
.wt-prose .fluentform ul,
.wt-prose .fluentform ol,
.wt-prose .ff-el-group ul,
.wt-prose .wp-block-gallery,
.wt-prose .wp-block-social-links,
.wt-prose .wt-quick-links,
.wt-prose .wt-taglist {
	list-style: none;
	padding-inline-start: 0;
}

.wt-prose .fluentform ul li,
.wt-prose .ff-el-group ul li,
.wt-prose .wp-block-gallery li,
.wt-prose .wp-block-social-links li,
.wt-prose .wt-quick-links li,
.wt-prose .wt-taglist li {
	padding-inline-start: 0;
}

.wt-prose .fluentform ul li::before,
.wt-prose .ff-el-group ul li::before,
.wt-prose .wp-block-gallery li::before,
.wt-prose .wp-block-social-links li::before,
.wt-prose .wt-quick-links li::before,
.wt-prose .wt-taglist li::before {
	display: none;
}

/* A bare form shortcode still looks designed. */
.wt-prose .fluentform {
	padding: clamp(1.25rem, 3vw, 2rem);
	border: var(--wt-rule);
	border-radius: var(--wt-radius-xl);
	background: var(--wt-white);
	box-shadow: var(--wt-shadow-sm);
}

.wt-prose blockquote {
	margin-inline: 0;
	padding: var(--wt-space-5) var(--wt-space-6);
	border-inline-start: 0.32rem solid var(--wt-orange);
	border-radius: 0 var(--wt-radius-lg) var(--wt-radius-lg) 0;
	background: var(--wt-surface-warm);
	font-size: var(--wt-text-lg);
	color: var(--wt-navy);
}

.wt-prose blockquote p:last-child {
	margin-bottom: 0;
}

.wt-prose img,
.wt-prose .wp-block-image img {
	border-radius: var(--wt-radius-lg);
	box-shadow: var(--wt-shadow);
}

.wt-prose figcaption {
	margin-top: var(--wt-space-3);
	font-size: var(--wt-text-sm);
	color: var(--wt-text-muted);
}

.wt-prose hr,
.wt-prose .wp-block-separator {
	height: 0.3rem;
	border: 0;
	margin-block: var(--wt-space-8);
	border-radius: var(--wt-radius-pill);
	background-image: var(--wt-tread-accent);
	background-color: var(--wt-steel-100);
	opacity: 1;
}

.wt-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wt-text-sm);
}

.wt-prose th,
.wt-prose td {
	padding: var(--wt-space-3);
	border: var(--wt-rule);
	text-align: left;
}

.wt-prose thead th {
	background: var(--wt-navy-50);
	color: var(--wt-navy);
	font-family: var(--wt-font-display);
	letter-spacing: var(--wt-tracking-wide);
	text-transform: uppercase;
}

/* Core button blocks inherit the theme button so editor content never looks
   like a different website. */
.wt-prose .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.75rem 1.6rem;
	border-radius: var(--wt-radius-pill);
	background: linear-gradient(135deg, var(--wt-orange), var(--wt-orange-bright));
	color: var(--wt-accent-label);
	font-weight: var(--wt-weight-bold);
	text-decoration: none;
	box-shadow: var(--wt-shadow-orange);
	transition: transform var(--wt-duration-fast) var(--wt-ease),
	            box-shadow var(--wt-duration-fast) var(--wt-ease);
}

.wt-prose .wp-block-button__link:hover {
	transform: translateY(-2px);
	background: linear-gradient(135deg, var(--wt-orange-hover), var(--wt-orange-gold));
	color: var(--wt-accent-label);
	box-shadow: 0 18px 34px var(--wt-glow-orange);
}

.wt-prose .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wt-space-3);
	margin-block: var(--wt-space-6);
}

/* --------------------------------------------------------- 4. Aside cards */

.wt-aside-card {
	position: relative;
	padding: var(--wt-space-5);
	border: var(--wt-rule);
	border-radius: var(--wt-radius-xl);
	background: var(--wt-white);
	box-shadow: var(--wt-shadow-sm);
	overflow: hidden;
}

.wt-aside-card::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	height: 0.28rem;
	background: linear-gradient(90deg, var(--wt-orange), var(--wt-orange-gold));
}

.wt-aside-card--dark {
	border-color: var(--wt-line-light-soft);
	background:
		radial-gradient(circle at 90% 8%, var(--wt-fill-blue), transparent 16rem),
		linear-gradient(150deg, var(--wt-navy-charcoal), var(--wt-navy));
	color: var(--wt-text-on-dark);
	box-shadow: var(--wt-shadow-float);
}

.wt-aside-card--dark .wt-aside-card__title,
.wt-aside-card--dark strong {
	color: var(--wt-white);
}

.wt-aside-card--dark a {
	color: var(--wt-white);
}

.wt-aside-card__title {
	margin-bottom: var(--wt-space-3);
	color: var(--wt-navy);
	font-size: var(--wt-text-lg);
}

.wt-aside-card__text {
	margin-bottom: var(--wt-space-4);
	font-size: var(--wt-text-sm);
	color: var(--wt-text-muted);
}

.wt-aside-card--dark .wt-aside-card__text {
	color: var(--wt-text-on-dark-muted);
}

.wt-aside-card__list {
	display: grid;
	gap: var(--wt-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wt-text-sm);
}

.wt-aside-card__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--wt-space-3);
}

.wt-aside-card__list .wt-icon {
	flex: none;
	margin-top: 0.15rem;
	color: var(--wt-orange);
}

.wt-aside-card--dark .wt-aside-card__list .wt-icon {
	color: var(--wt-orange-gold);
}

.wt-aside-card__label {
	display: block;
	font-size: var(--wt-text-xs);
	font-weight: var(--wt-weight-bold);
	letter-spacing: var(--wt-tracking-wide);
	text-transform: uppercase;
	color: var(--wt-text-muted);
}

.wt-aside-card--dark .wt-aside-card__label {
	color: var(--wt-text-on-dark-muted);
}

.wt-aside-card .wt-btn {
	width: 100%;
}

.wt-aside-card__actions {
	display: grid;
	gap: var(--wt-space-2);
	margin-top: var(--wt-space-4);
}

/* Quick links list used for related pages. */
.wt-quick-links {
	display: grid;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wt-quick-links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wt-space-3);
	padding: 0.72rem 0.85rem;
	border-radius: var(--wt-radius);
	color: var(--wt-navy);
	font-weight: var(--wt-weight-bold);
	font-size: var(--wt-text-sm);
	text-decoration: none;
	transition: background-color var(--wt-duration-fast) var(--wt-ease),
	            transform var(--wt-duration-fast) var(--wt-ease);
}

.wt-quick-links a:hover {
	transform: translateX(0.25rem);
	background: var(--wt-navy-50);
}

.wt-quick-links a .wt-icon {
	color: var(--wt-orange);
	opacity: 0;
	transition: opacity var(--wt-duration-fast) var(--wt-ease);
}

.wt-quick-links a:hover .wt-icon {
	opacity: 1;
}

.wt-quick-links a[aria-current="page"] {
	background: var(--wt-orange-100);
	color: var(--wt-accent-text);
}

/* ------------------------------------------------- 5. Post and link cards */

.wt-post-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: var(--wt-rule);
	border-radius: var(--wt-radius-xl);
	background: var(--wt-white);
	box-shadow: var(--wt-shadow-sm);
	overflow: hidden;
	transition: transform var(--wt-duration) var(--wt-ease),
	            box-shadow var(--wt-duration) var(--wt-ease),
	            border-color var(--wt-duration) var(--wt-ease);
}

.wt-post-card:hover {
	transform: translateY(-6px);
	border-color: var(--wt-blue-bright);
	box-shadow: var(--wt-shadow-float);
}

.wt-post-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background:
		var(--wt-tread-light),
		linear-gradient(135deg, var(--wt-navy-50), var(--wt-steel-100));
	overflow: hidden;
}

.wt-post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--wt-duration-slow) var(--wt-ease);
}

.wt-post-card:hover .wt-post-card__media img {
	transform: scale(1.05);
}

.wt-post-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--wt-space-3);
	flex: 1;
	padding: var(--wt-space-5);
}

.wt-post-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wt-space-3);
	font-size: var(--wt-text-xs);
	font-weight: var(--wt-weight-bold);
	letter-spacing: var(--wt-tracking-wide);
	text-transform: uppercase;
	color: var(--wt-text-muted);
}

.wt-post-card__title {
	margin: 0;
	font-size: var(--wt-text-xl);
	letter-spacing: -0.02em;
}

.wt-post-card__title a {
	color: var(--wt-navy);
	text-decoration: none;
}

/* The whole card is clickable, while the link text stays the accessible name. */
.wt-post-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.wt-post-card__title a:hover {
	color: var(--wt-accent-text);
}

.wt-post-card__excerpt {
	margin: 0;
	font-size: var(--wt-text-sm);
	color: var(--wt-text-muted);
}

.wt-post-card__more {
	display: inline-flex;
	align-items: center;
	gap: var(--wt-space-2);
	margin-top: auto;
	padding-top: var(--wt-space-2);
	color: var(--wt-accent-text);
	font-weight: var(--wt-weight-bold);
	font-size: var(--wt-text-sm);
}

/* ------------------------------------- 6. Blog, archive and single article */

.wt-article__header {
	max-width: var(--wt-editorial-measure);
	margin-bottom: var(--wt-space-7);
}

.wt-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wt-space-4);
	padding-block: var(--wt-space-4);
	border-block: var(--wt-rule);
	font-size: var(--wt-text-sm);
	color: var(--wt-text-muted);
}

.wt-article__meta span {
	display: inline-flex;
	align-items: center;
	gap: var(--wt-space-2);
}

.wt-article__meta .wt-icon {
	color: var(--wt-orange);
}

.wt-article__feature {
	margin-bottom: var(--wt-space-7);
	border-radius: var(--wt-radius-xl);
	overflow: hidden;
	box-shadow: var(--wt-shadow-lg);
}

.wt-article__feature img {
	width: 100%;
	height: auto;
}

.wt-article__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wt-space-4);
	margin-top: var(--wt-space-8);
	padding-top: var(--wt-space-5);
	border-top: var(--wt-rule);
}

.wt-taglist {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wt-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wt-taglist a {
	display: inline-block;
	padding: 0.3rem 0.75rem;
	border-radius: var(--wt-radius-pill);
	background: var(--wt-navy-50);
	color: var(--wt-navy);
	font-size: var(--wt-text-xs);
	font-weight: var(--wt-weight-bold);
	text-decoration: none;
}

.wt-taglist a:hover {
	background: var(--wt-orange-100);
	color: var(--wt-accent-text);
}

/* Previous / next post navigation. */
.wt-postnav {
	display: grid;
	gap: var(--wt-space-4);
	margin-top: var(--wt-space-8);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.wt-postnav {
		grid-template-columns: repeat(2, 1fr);
	}
}

.wt-postnav__link {
	display: grid;
	gap: 0.35rem;
	padding: var(--wt-space-5);
	border: var(--wt-rule);
	border-radius: var(--wt-radius-lg);
	background: var(--wt-white);
	text-decoration: none;
	transition: border-color var(--wt-duration) var(--wt-ease),
	            transform var(--wt-duration) var(--wt-ease);
}

.wt-postnav__link:hover {
	transform: translateY(-3px);
	border-color: var(--wt-blue-bright);
}

.wt-postnav__link--next {
	text-align: right;
}

.wt-postnav__label {
	font-size: var(--wt-text-xs);
	font-weight: var(--wt-weight-bold);
	letter-spacing: var(--wt-tracking-wide);
	text-transform: uppercase;
	color: var(--wt-accent-text);
}

.wt-postnav__title {
	color: var(--wt-navy);
	font-family: var(--wt-font-display);
	font-size: var(--wt-text-lg);
	font-weight: var(--wt-weight-bold);
}

/* Pagination. */
.wt-pagination {
	margin-top: var(--wt-space-8);
}

.wt-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wt-space-2);
}

.wt-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.9rem;
	min-height: 2.9rem;
	padding-inline: 0.75rem;
	border: var(--wt-rule);
	border-radius: var(--wt-radius);
	background: var(--wt-white);
	color: var(--wt-navy);
	font-weight: var(--wt-weight-bold);
	text-decoration: none;
	transition: border-color var(--wt-duration-fast) var(--wt-ease),
	            background-color var(--wt-duration-fast) var(--wt-ease);
}

.wt-pagination .page-numbers:hover {
	border-color: var(--wt-navy);
	background: var(--wt-navy-50);
}

.wt-pagination .page-numbers.current {
	background: linear-gradient(135deg, var(--wt-orange), var(--wt-orange-bright));
	border-color: var(--wt-orange-bright);
	color: var(--wt-accent-label);
	box-shadow: var(--wt-shadow-orange);
}

.wt-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

/* --------------------------------------------------------- 7. Search results

   NOTE: .wt-searchform itself lives in components.css, not here. The form also
   appears in the mobile drawer, which renders on the front page where this
   stylesheet is deliberately not loaded. */

.wt-search-summary {
	margin-bottom: var(--wt-space-6);
	padding: var(--wt-space-4) var(--wt-space-5);
	border: var(--wt-rule);
	border-inline-start: 0.28rem solid var(--wt-orange);
	border-radius: 0 var(--wt-radius-lg) var(--wt-radius-lg) 0;
	background: var(--wt-white);
	font-size: var(--wt-text-sm);
}

.wt-search-summary strong {
	color: var(--wt-navy);
}

/* ------------------------------------------------ 8. Empty states and 404 */

.wt-empty {
	position: relative;
	display: grid;
	justify-items: center;
	gap: var(--wt-space-4);
	max-width: 44rem;
	margin-inline: auto;
	padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem);
	border: 1px dashed var(--wt-border-strong);
	border-radius: var(--wt-radius-2xl);
	background:
		var(--wt-tread-light),
		linear-gradient(160deg, var(--wt-white), var(--wt-navy-50));
	text-align: center;
	overflow: hidden;
}

.wt-empty__mark {
	display: grid;
	place-items: center;
	width: 5.25rem;
	height: 5.25rem;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--wt-orange), var(--wt-orange-gold));
	color: var(--wt-navy-charcoal);
	box-shadow: var(--wt-shadow-orange);
}

.wt-empty__mark .wt-icon {
	width: 2.4rem;
	height: 2.4rem;
}

.wt-empty__title {
	margin: 0;
	font-size: clamp(1.6rem, 3vw, 2.35rem);
}

.wt-empty__text {
	max-width: 42ch;
	margin: 0;
	color: var(--wt-text-muted);
}

.wt-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wt-space-3);
	margin-top: var(--wt-space-2);
}

.wt-empty__aside {
	width: 100%;
	margin-top: var(--wt-space-5);
	padding-top: var(--wt-space-5);
	border-top: var(--wt-rule);
}

/* 404 gets the same vocabulary at a larger scale, with an oversized code. */
.wt-404__code {
	display: block;
	font-family: var(--wt-font-display);
	font-size: clamp(5rem, 18vw, 11rem);
	font-weight: var(--wt-weight-bold);
	line-height: 0.85;
	letter-spacing: -0.05em;
	background: linear-gradient(135deg, var(--wt-orange), var(--wt-orange-gold) 45%, var(--wt-blue-electric));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Fallback for engines without background-clip: text. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.wt-404__code {
		background: none;
		color: var(--wt-navy);
	}
}

/* ------------------------------------------------------------ 9. Comments */

.wt-comments {
	max-width: var(--wt-editorial-measure);
	margin-top: var(--wt-space-9);
	padding-top: var(--wt-space-7);
	border-top: var(--wt-rule);
}

.wt-comments__title {
	margin-bottom: var(--wt-space-5);
	font-size: var(--wt-text-xl);
}

.wt-comments .comment-list {
	display: grid;
	gap: var(--wt-space-4);
	margin: 0 0 var(--wt-space-7);
	padding: 0;
	list-style: none;
}

.wt-comments .comment-list ol.children {
	display: grid;
	gap: var(--wt-space-4);
	margin: var(--wt-space-4) 0 0;
	padding-inline-start: var(--wt-space-5);
	border-inline-start: 2px solid var(--wt-border);
	list-style: none;
}

.wt-comments .comment-body {
	padding: var(--wt-space-5);
	border: var(--wt-rule);
	border-radius: var(--wt-radius-lg);
	background: var(--wt-white);
}

.wt-comments .comment-author {
	display: flex;
	align-items: center;
	gap: var(--wt-space-3);
	font-weight: var(--wt-weight-bold);
	color: var(--wt-navy);
}

.wt-comments .comment-author img {
	border-radius: 50%;
}

.wt-comments .comment-metadata {
	margin-bottom: var(--wt-space-3);
	font-size: var(--wt-text-xs);
	color: var(--wt-text-muted);
}

.wt-comments .comment-metadata a {
	color: inherit;
}

.wt-comments .comment-respond {
	padding: var(--wt-space-6);
	border: var(--wt-rule);
	border-radius: var(--wt-radius-xl);
	background: var(--wt-navy-50);
}

.wt-comments input[type="text"],
.wt-comments input[type="email"],
.wt-comments input[type="url"],
.wt-comments textarea {
	width: 100%;
	min-height: 48px;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--wt-border-strong);
	border-radius: var(--wt-radius);
	background: var(--wt-white);
	font: inherit;
	color: var(--wt-graphite);
}

.wt-comments textarea {
	min-height: 9rem;
	resize: vertical;
}

.wt-comments .submit {
	min-height: 48px;
	padding: 0.75rem 1.75rem;
	border: 2px solid var(--wt-accent);
	border-radius: var(--wt-radius-pill);
	background: var(--wt-accent);
	color: var(--wt-accent-label);
	font-weight: var(--wt-weight-bold);
	cursor: pointer;
}

.wt-comments .submit:hover {
	background: var(--wt-accent-hover);
	border-color: var(--wt-accent-hover);
}

/* ---------------------------------------------------------- 10. CTA band */

.wt-cta-band {
	position: relative;
	padding-block: clamp(3rem, 6vw, 5rem);
	background:
		radial-gradient(circle at 10% 20%, var(--wt-fill-orange), transparent 24rem),
		radial-gradient(circle at 92% 84%, var(--wt-fill-blue), transparent 26rem),
		linear-gradient(140deg, var(--wt-navy-charcoal), var(--wt-navy));
	color: var(--wt-text-on-dark);
	overflow: hidden;
	isolation: isolate;
}

.wt-cta-band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--wt-tread-dark);
	mask-image: linear-gradient(90deg, var(--wt-graphite), transparent 70%);
}

.wt-cta-band__inner {
	display: grid;
	gap: var(--wt-space-6);
	align-items: center;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.wt-cta-band__inner {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

.wt-cta-band__title {
	max-width: 22ch;
	margin-bottom: var(--wt-space-3);
	color: var(--wt-white);
	font-size: clamp(1.85rem, 3.2vw, 2.9rem);
	letter-spacing: -0.02em;
}

.wt-cta-band__text {
	max-width: 52ch;
	margin: 0;
	color: var(--wt-text-on-dark-muted);
}

.wt-cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wt-space-3);
}

/* --------------------------------------------------------- 11. Back to top */

.wt-to-top {
	position: fixed;
	inset-inline-end: 1.25rem;
	inset-block-end: calc(var(--wt-mobile-bar-h) + 1.25rem);
	z-index: var(--wt-z-totop);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border: 1px solid var(--wt-line-light-strong);
	border-radius: 50%;
	background: linear-gradient(135deg, var(--wt-navy), var(--wt-blue-bright));
	color: var(--wt-white);
	box-shadow: var(--wt-shadow-float);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.6rem) scale(0.9);
	transition: opacity var(--wt-duration) var(--wt-ease),
	            transform var(--wt-duration) var(--wt-ease),
	            visibility var(--wt-duration) var(--wt-ease);
}

.wt-to-top .wt-icon {
	width: 1.35rem;
	height: 1.35rem;
	transform: rotate(-90deg);
}

.wt-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.wt-to-top:hover {
	background: linear-gradient(135deg, var(--wt-blue-bright), var(--wt-blue-electric));
}

@media (min-width: 768px) {
	.wt-to-top {
		inset-block-end: 1.75rem;
		inset-inline-end: 1.75rem;
	}
}

/* ---------------------------------------------------------------- 12. Mobile */

@media (max-width: 767px) {
	.wt-page-hero {
		min-height: 0;
		padding-block: 2.25rem 2.5rem;
	}

	.wt-page-hero__title {
		font-size: clamp(2rem, 9vw, 2.75rem);
	}

	.wt-page-hero__actions .wt-btn {
		flex: 1 1 10rem;
	}

	.wt-breadcrumbs {
		margin-bottom: var(--wt-space-4);
		font-size: var(--wt-text-xs);
	}

	/* The trail scrolls sideways rather than wrapping into three ragged lines. */
	.wt-breadcrumbs__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 0.35rem;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.wt-breadcrumbs__list::-webkit-scrollbar {
		display: none;
	}

	.wt-breadcrumbs__item {
		white-space: nowrap;
	}

	.wt-page {
		padding-block: 2.25rem 2.75rem;
	}

	.wt-prose blockquote {
		padding: var(--wt-space-4);
	}

	.wt-prose h2 {
		font-size: 1.5rem;
	}

	.wt-article__meta {
		gap: var(--wt-space-3);
		font-size: var(--wt-text-xs);
	}

	.wt-postnav__link--next {
		text-align: left;
	}

	.wt-empty {
		padding: var(--wt-space-6) var(--wt-space-5);
		border-radius: var(--wt-radius-xl);
	}

	.wt-empty__actions .wt-btn {
		width: 100%;
	}

	.wt-cta-band__actions .wt-btn {
		flex: 1 1 12rem;
	}

	.wt-aside-card {
		border-radius: var(--wt-radius-lg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wt-post-card,
	.wt-post-card__media img,
	.wt-postnav__link,
	.wt-quick-links a,
	.wt-to-top {
		transition: none !important;
		transform: none !important;
	}
}