/*
Theme Name: Watapana
Theme URI: https://arubatourism.org/
Author: Aruba Tourism Guide
Author URI: https://arubatourism.org/
Description: An almanac-style block theme for arubatourism.org. Fifteen numbered pillar guides, a rule-based layout with no cards, self-hosted Crimson Pro and Instrument Sans, and article furniture — contents rail, revision line, figure numbering, photo credits — derived from the article's own HTML so a REST publishing pipeline never has to emit custom blocks.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: watapana
Tags: blog, news, one-column, block-patterns, full-site-editing, custom-colors, custom-menu, editor-style, featured-images, threaded-comments, translation-ready, accessibility-ready
*/

/* -------------------------------------------------------------------------
   1. Tokens the theme adds on top of theme.json
   ---------------------------------------------------------------------- */

:root {
	--wtp-pad: 24px;
	--wtp-sand: var(--wp--preset--color--sand, #f6efe3);
	--wtp-sand-deep: var(--wp--preset--color--sand-deep, #efe5d3);
	--wtp-ink: var(--wp--preset--color--ink, #2a211b);
	--wtp-ink-soft: var(--wp--preset--color--ink-soft, #5c4f45);
	--wtp-ink-mute: var(--wp--preset--color--ink-mute, #75665a);
	--wtp-amber: var(--wp--preset--color--amber, #e0a04a);
	--wtp-burnt: var(--wp--preset--color--burnt, #c8742a);
	--wtp-rust: var(--wp--preset--color--rust, #a0561c);
	--wtp-sea: var(--wp--preset--color--sea, #5f9a95);

	--wtp-rule-ink: 1px solid var(--wtp-ink);
	--wtp-rule-soft: 1px solid rgb(42 33 27 / 15%);
	--wtp-rule-quiet: 1px solid rgb(42 33 27 / 20%);
	--wtp-rule-onink: 1px solid rgb(246 239 227 / 18%);

	--wtp-display: var(--wp--preset--font-family--display, "Crimson Pro", Georgia, serif);
	--wtp-ui: var(--wp--preset--font-family--body, "Instrument Sans", system-ui, sans-serif);

	--wtp-grade: var(--wp--custom--photo-grade, sepia(0.22) saturate(0.9) contrast(1.04) brightness(1.02));
	--wtp-shadow: var(--wp--custom--shadow--photo, 0 18px 40px rgb(42 33 27 / 14%));
	--wtp-sticky: 96px;

	--wtp-gutter: 32px;
	--wtp-measure: 720px;
}

@media (min-width: 721px) {
	:root {
		--wtp-pad: 32px;
		--wtp-gutter: 44px;
	}
}

@media (min-width: 1100px) {
	:root {
		--wtp-pad: 56px;
		--wtp-gutter: 56px;
	}
}

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	background: var(--wtp-sand);
	color: var(--wtp-ink);
	font-synthesis-weight: none;
	text-rendering: optimizeLegibility;
}

* {
	scroll-margin-top: var(--wtp-sticky);
}

::selection {
	background: var(--wtp-amber);
	color: var(--wtp-ink);
}

:where(a):focus-visible,
:where(button):focus-visible,
:where(input):focus-visible,
:where(summary):focus-visible,
:where([tabindex]):focus-visible {
	outline: 2px solid var(--wtp-rust);
	outline-offset: 3px;
	border-radius: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.wtp-skip-link:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 999;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: 12px 20px;
	background: var(--wtp-ink);
	color: var(--wtp-sand);
	font-family: var(--wtp-ui);
	font-size: 0.875rem;
	font-weight: 600;
	border-radius: 999px;
	text-decoration: none;
}

/* The label scale, used by kickers, section heads and meta rows. */
.wtp-label {
	font-family: var(--wtp-ui);
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0;
}

/* -------------------------------------------------------------------------
   3. Masthead and navigation
   ---------------------------------------------------------------------- */

.wtp-masthead {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 18px;
	padding-block: 18px 14px;
	border-bottom: var(--wtp-rule-ink);
}

.wtp-masthead__brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: 0;
}

.wtp-masthead__brand .wp-block-site-title {
	margin: 0;
	white-space: nowrap;
}

.wtp-masthead__brand .wp-block-site-title a,
.wtp-masthead__brand .wtp-mark-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
	color: var(--wtp-ink);
}

.wtp-masthead__meta {
	color: var(--wtp-ink-mute);
}

.wtp-masthead__meta--right {
	text-align: right;
}

.wtp-mark-link {
	display: inline-flex;
	line-height: 0;
}

.wtp-nav-wrap {
	position: relative;
	border-bottom: var(--wtp-rule-quiet);
}

.wtp-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.wtp-nav__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: clamp(14px, 2.2vw, 28px);
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.wtp-nav__list::-webkit-scrollbar {
	display: none;
}

/* Between the mobile menu and the full desktop row the nav scrolls; fade the
   trailing edge so a clipped item reads as "more", not as a broken layout. */
@media (max-width: 1099px) {
	.wtp-nav__list {
		padding-inline-end: 28px;
		mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
	}
}

.wtp-nav__item a {
	/* 44px of hit area, which also sets the height of the nav row. */
	display: flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--wtp-ui);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	color: var(--wtp-ink);
	text-decoration: none;
	transition: color 150ms ease;
}

.wtp-nav__item a:hover,
.wtp-nav__item a[aria-current="page"] {
	color: var(--wtp-rust);
}

.wtp-nav__tail {
	flex: 0 0 auto;
}

.wtp-nav__search-toggle {
	min-height: 44px;
}

.wtp-nav__search-toggle,
.wtp-nav__menu-toggle {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: var(--wtp-ui);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wtp-rust);
}

.wtp-nav__menu-toggle {
	display: none;
	align-items: center;
	gap: 10px;
	min-height: 44px;
}

.wtp-nav__burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 20px;
}

.wtp-nav__burger i {
	display: block;
	height: 1.5px;
	background: var(--wtp-ink);
}

.wtp-search-panel {
	padding-block: 0 18px;
}

.wtp-search-panel[hidden],
.wtp-panel[hidden] {
	display: none;
}

.wtp-search {
	display: flex;
	gap: 8px;
	align-items: center;
	max-width: 520px;
}

.wtp-search__field {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--wtp-ui);
	font-size: 0.875rem;
	padding: 11px 18px;
	min-height: 44px;
	border: 1.5px solid rgb(42 33 27 / 35%);
	border-radius: 999px;
	background: transparent;
	color: var(--wtp-ink);
}

.wtp-search__field::placeholder {
	color: var(--wtp-ink-mute);
}

.wtp-search__submit {
	flex: 0 0 auto;
	font-family: var(--wtp-ui);
	font-size: 0.875rem;
	font-weight: 600;
	padding: 12px 22px;
	min-height: 44px;
	border: 0;
	border-radius: 999px;
	background: var(--wtp-ink);
	color: var(--wtp-sand);
	cursor: pointer;
	transition: background 150ms ease;
}

.wtp-search__submit:hover {
	background: #3b2f27;
}

/* Full-screen pillar menu, mobile only. */
.wtp-panel {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: var(--wtp-sand);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 var(--wtp-pad) 44px;
}

/* A close row that stays put while the list scrolls under it. */
.wtp-panel__bar {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-block: 14px;
	margin-bottom: 18px;
	background: var(--wtp-sand);
	border-bottom: var(--wtp-rule-ink);
}

.wtp-panel__close {
	appearance: none;
	background: none;
	border: 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0;
	cursor: pointer;
	font-family: var(--wtp-ui);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wtp-rust);
}

.wtp-panel__close-x {
	position: relative;
	width: 16px;
	height: 16px;
}

.wtp-panel__close-x::before,
.wtp-panel__close-x::after {
	content: "";
	position: absolute;
	inset: 7px 0 auto;
	height: 1.5px;
	background: var(--wtp-ink);
}

.wtp-panel__close-x::before {
	transform: rotate(45deg);
}

.wtp-panel__close-x::after {
	transform: rotate(-45deg);
}

/* Burger becomes a cross while the panel is open. */
.wtp-nav__menu-toggle[aria-expanded="true"] .wtp-nav__burger i:nth-child(1) {
	transform: translateY(5.5px) rotate(45deg);
}

.wtp-nav__menu-toggle[aria-expanded="true"] .wtp-nav__burger i:nth-child(2) {
	opacity: 0;
}

.wtp-nav__menu-toggle[aria-expanded="true"] .wtp-nav__burger i:nth-child(3) {
	transform: translateY(-5.5px) rotate(-45deg);
}

.wtp-nav__burger i {
	transition: transform 150ms ease, opacity 150ms ease;
}

.wtp-panel__label {
	color: var(--wtp-ink-mute);
	margin-bottom: 18px;
}

.wtp-panel__list {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
}

.wtp-panel__item a {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 13px 0;
	min-height: 44px;
	border-bottom: var(--wtp-rule-soft);
	text-decoration: none;
	color: var(--wtp-ink);
}

.wtp-panel__numeral {
	flex: 0 0 34px;
	font-family: var(--wtp-ui);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--wtp-rust);
}

.wtp-panel__name {
	font-family: var(--wtp-display);
	font-size: 1.4375rem;
	line-height: 1.25;
}

@media (max-width: 720px) {
	.wtp-masthead {
		grid-template-columns: 1fr auto;
		gap: 12px;
	}

	.wtp-masthead__meta {
		display: none;
	}

	.wtp-masthead__brand {
		justify-content: flex-start;
		gap: 10px;
	}

	.wtp-masthead__brand .wp-block-site-title {
		font-size: 1.25rem;
	}

	.wtp-masthead__brand .wtp-mark {
		width: 28px;
		height: 28px;
	}

	.wtp-nav {
		display: none;
	}

	.wtp-nav__menu-toggle {
		display: flex;
		margin-inline-start: auto;
		padding-block: 10px;
	}

	.wtp-nav-wrap {
		display: flex;
		justify-content: flex-end;
	}
}

@media (min-width: 721px) {
	.wtp-panel {
		display: none !important;
	}
}

/* -------------------------------------------------------------------------
   4. Buttons
   ---------------------------------------------------------------------- */

.wp-block-button__link,
.wtp-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	font-family: var(--wtp-ui);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	padding: 15px 24px;
	border-radius: 999px;
	text-decoration: none;
	transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wtp-ink);
	border: 1.5px solid rgb(42 33 27 / 35%);
	padding: 13.5px 22.5px;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--wtp-ink);
	background: transparent;
	color: var(--wtp-ink);
}

/* -------------------------------------------------------------------------
   5. Section heads, rows, featured
   ---------------------------------------------------------------------- */

.wtp-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 20px;
	border-top: var(--wtp-rule-ink);
	padding-top: 18px;
	margin-bottom: 18px;
}

.wtp-section-head__label {
	color: var(--wtp-ink);
}

.wtp-section-head__link {
	display: inline-block;
	padding-block: 4px;
	font-family: var(--wtp-ui);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wtp-rust);
	text-decoration: none;
	white-space: nowrap;
}

.wtp-section-head__link:hover {
	text-decoration: underline;
}

.wtp-rows {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wtp-row + .wtp-row {
	border-top: var(--wtp-rule-soft);
}

.wtp-row__link {
	display: block;
	padding-block: 18px;
	text-decoration: none;
	color: inherit;
}

.wtp-row:first-child .wtp-row__link {
	padding-top: 0;
}

.wtp-row__kicker {
	display: block;
	color: var(--wtp-ink-mute);
	margin-bottom: 9px;
}

.wtp-row__title {
	display: block;
	font-family: var(--wtp-display);
	font-size: 1.4375rem;
	line-height: 1.25;
	color: var(--wtp-ink);
	text-wrap: pretty;
	transition: color 150ms ease;
}

.wtp-row__link:hover .wtp-row__title {
	color: var(--wtp-rust);
}

.wtp-kicker__numeral,
.wtp-row__kicker .wtp-kicker__numeral {
	color: var(--wtp-rust);
	letter-spacing: 0.06em;
}

.wtp-kicker__pillar {
	color: var(--wtp-rust);
}

.wtp-kicker__pillar a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding-block: 6px;
	color: inherit;
	text-decoration: none;
}

.wtp-kicker__pillar a:hover {
	text-decoration: underline;
}

.wtp-kicker__date {
	color: var(--wtp-ink-mute);
	margin-inline-start: 6px;
}

.wtp-featured__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.wtp-featured__media {
	display: block;
	margin-bottom: 22px;
}

.wtp-featured__media img,
.wtp-featured__media .wtp-fallback {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
	box-shadow: var(--wtp-shadow);
	object-fit: cover;
}

.wtp-featured__kicker {
	display: block;
	color: var(--wtp-ink-mute);
	margin-bottom: 10px;
}

.wtp-featured__title {
	display: block;
	font-family: var(--wtp-display);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(1.9rem, 1.2rem + 2vw, 2.75rem);
	line-height: 1.06;
	letter-spacing: -0.02em;
	text-wrap: balance;
	transition: color 150ms ease;
}

.wtp-featured__link:hover .wtp-featured__title {
	color: var(--wtp-rust);
}

.wtp-featured__deck {
	display: block;
	margin-top: 14px;
	font-family: var(--wtp-display);
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--wtp-ink-soft);
	text-wrap: pretty;
}

.wtp-empty {
	font-family: var(--wtp-display);
	font-size: 1.25rem;
	color: var(--wtp-ink-soft);
	padding-block: 18px 44px;
}

/* Numeral panel for a post with no featured image. */
.wtp-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: var(--wtp-sand-deep);
	border-radius: 6px;
	overflow: hidden;
}

.wtp-fallback span {
	font-family: var(--wtp-display);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(56px, 12vw, 120px);
	line-height: 1;
	color: var(--wtp-rust);
	opacity: 0.25;
}

img.wtp-graded {
	filter: var(--wtp-grade);
}

/* -------------------------------------------------------------------------
   6. Front page: hero and index
   ---------------------------------------------------------------------- */

.wtp-hero {
	position: relative;
	overflow: hidden;
	padding-block: 56px 48px;
}

.wtp-hero-decor {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.wtp-sun {
	/* Sized and placed against the hero box so it always reads as a disc
	   rising behind the figure rather than a slab under it. */
	position: absolute;
	right: -9%;
	top: 6%;
	width: min(600px, 44%);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--wp--preset--gradient--sun, radial-gradient(circle at 42% 42%, #f5cf86 0%, #e0a04a 52%, rgb(224 160 74 / 0%) 71%));
}

.wtp-wind i {
	position: absolute;
	left: 0;
	height: 3px;
	background: var(--wtp-ink);
	opacity: 0.14;
	transform: rotate(-3deg);
	transform-origin: left center;
}

.wtp-wind i:nth-child(1) {
	top: 44px;
	width: 40%;
}

.wtp-wind i:nth-child(2) {
	top: 76px;
	width: 58%;
}

.wtp-wind i:nth-child(3) {
	top: 108px;
	width: 30%;
}

/* Everything except the decoration sits above it. */
.wtp-hero > *:not(.wtp-hero-decor) {
	position: relative;
	z-index: 1;
}

.wtp-hero__kicker {
	color: var(--wtp-rust);
	margin-bottom: 20px;
}

.wtp-hero__headline {
	font-family: var(--wtp-display);
	font-style: italic;
	font-weight: 300;
	font-size: var(--wp--preset--font-size--display, clamp(3.25rem, 2rem + 5vw, 6rem));
	line-height: 0.94;
	letter-spacing: -0.025em;
	margin: 0 0 22px;
	text-wrap: balance;
}

.wtp-hero__headline em,
.wtp-hero__accent {
	font-style: inherit;
	color: var(--wtp-burnt);
}

.wtp-hero__deck {
	max-width: 540px;
	font-family: var(--wtp-display);
	font-size: var(--wp--preset--font-size--lead, 1.25rem);
	line-height: 1.5;
	color: var(--wtp-ink-soft);
	margin: 0 0 28px;
	text-wrap: pretty;
}

.wtp-hero__figure {
	margin: 0;
}

.wtp-hero__figure img {
	width: 100%;
	height: 440px;
	object-fit: cover;
	border-radius: 6px;
	box-shadow: var(--wtp-shadow);
	filter: var(--wtp-grade);
}

.wtp-hero__figure figcaption {
	margin-top: 12px;
	font-family: var(--wtp-ui);
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--wtp-ink-mute);
}

@media (max-width: 899px) {
	.wtp-hero__figure img {
		height: auto;
		aspect-ratio: 21 / 20;
	}

	/* Stacked, there is nowhere the disc can sit without landing behind text
	   or under the caption, so the photograph carries the hero on its own. */
	.wtp-sun {
		display: none;
	}

	.wtp-wind {
		display: none;
	}
}

.wtp-index {
	padding-block: 20px 44px;
}

.wtp-index__coords {
	color: var(--wtp-ink-mute);
	text-align: left;
}

@media (min-width: 721px) {
	.wtp-index__coords {
		text-align: right;
	}
}

.wtp-index__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	column-gap: var(--wtp-gutter);
}

@media (min-width: 721px) {
	.wtp-index__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.wtp-index__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 44px;
	}
}

.wtp-index__row a {
	display: flex;
	align-items: baseline;
	gap: 4px;
	padding-block: 11px;
	min-height: 44px;
	border-bottom: var(--wtp-rule-soft);
	text-decoration: none;
	color: var(--wtp-ink);
}

.wtp-index__row a:hover .wtp-index__name {
	color: var(--wtp-rust);
}

.wtp-index__numeral {
	flex: 0 0 38px;
	font-family: var(--wtp-ui);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--wtp-rust);
}

.wtp-index__name {
	font-family: var(--wtp-display);
	font-size: 1.1875rem;
	line-height: 1.3;
	transition: color 150ms ease;
	text-wrap: pretty;
}

/* -------------------------------------------------------------------------
   7. Article
   ---------------------------------------------------------------------- */

.wtp-breadcrumbs,
.rank-math-breadcrumb {
	font-family: var(--wtp-ui);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wtp-ink-mute);
	margin-bottom: 18px;
}

.wtp-breadcrumbs p,
.rank-math-breadcrumb p {
	margin: 0;
}

.wtp-breadcrumbs a,
.rank-math-breadcrumb a {
	color: var(--wtp-ink-mute);
	text-decoration: none;
}

.wtp-breadcrumbs a:hover,
.rank-math-breadcrumb a:hover {
	color: var(--wtp-rust);
	text-decoration: underline;
}

.wtp-crumb-sep {
	margin-inline: 8px;
	color: rgb(42 33 27 / 35%);
}

.wtp-kicker {
	margin-bottom: 18px;
}

.wtp-article-head {
	padding-top: 28px;
}

.wtp-article-title {
	max-width: 20ch;
}

@media (min-width: 721px) {
	.wtp-article-title {
		max-width: 22ch;
	}
}

.wtp-article-deck {
	max-width: 62ch;
	margin-top: 18px;
}

.wtp-revision {
	font-family: var(--wtp-ui);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--wtp-ink-mute);
	margin: 18px 0 0;
}

.wtp-revision span {
	margin-inline: 4px;
	color: rgb(42 33 27 / 35%);
}

.wtp-hero-figure {
	margin: 44px 0 0;
}

.wtp-hero-figure img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 6px;
	box-shadow: var(--wtp-shadow);
}

.wtp-figure__caption,
.wtp-figure figcaption,
.wp-element-caption {
	margin-top: 12px;
	font-family: var(--wtp-ui);
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--wtp-ink-mute);
	text-align: left;
}

.wtp-figure__n {
	color: var(--wtp-ink);
	font-weight: 500;
}

/* The three-column article grid: contents rail | body | air. */
.wtp-article-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	padding-block: 44px 0;
}

/* Without a contents rail the body simply centres on the measure. */
.wtp-article-grid--single {
	justify-items: center;
}

.wtp-article-grid--single .wtp-article-grid__body,
.wtp-article-head--centred > * {
	max-width: var(--wtp-measure);
	margin-inline: auto;
}

.wtp-article-head--centred .wtp-article-title,
.wtp-article-head--centred .wtp-article-deck {
	max-width: var(--wtp-measure);
}

@media (min-width: 1100px) {
	.wtp-article-grid--single {
		grid-template-columns: minmax(0, 1fr);
	}

	.wtp-article-grid {
		/* The measure is the point: 720px of body, a rail wide enough to read,
		   and whatever is left over as air on the right. */
		grid-template-columns: minmax(200px, 264px) minmax(0, var(--wtp-measure)) minmax(0, 1fr);
		column-gap: 56px;
	}

	.wtp-article-grid > * {
		min-width: 0;
	}

	.wtp-article-grid__rail {
		grid-column: 1;
	}

	.wtp-article-grid__body {
		grid-column: 2;
	}
}

.wtp-prose {
	max-width: var(--wtp-measure);
	font-family: var(--wtp-display);
	font-size: var(--wp--preset--font-size--body, 1.1875rem);
	line-height: 1.6;
}

.wtp-prose > * {
	max-width: var(--wtp-measure);
}

.wtp-prose p {
	margin: 0 0 1em;
	text-wrap: pretty;
}

.wtp-prose > *:first-child {
	margin-top: 0;
}

.wtp-prose h2 {
	font-family: var(--wtp-display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--title-2, 2.25rem);
	line-height: 1.12;
	letter-spacing: -0.01em;
	margin: 56px 0 18px;
	text-wrap: balance;
}

.wtp-prose h3 {
	font-family: var(--wtp-display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--title-3, 1.4375rem);
	line-height: 1.25;
	margin: 36px 0 12px;
	text-wrap: balance;
}

.wtp-prose h4 {
	font-family: var(--wtp-ui);
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wtp-ink-mute);
	margin: 28px 0 12px;
}

.wtp-prose a {
	color: var(--wtp-rust);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.wtp-prose ul,
.wtp-prose ol {
	margin: 0 0 1em;
	padding-inline-start: 1.25em;
}

.wtp-prose li {
	margin-bottom: 0.5em;
}

.wtp-prose li::marker {
	color: var(--wtp-rust);
}

.wtp-prose ul ul,
.wtp-prose ol ol,
.wtp-prose ul ol,
.wtp-prose ol ul {
	margin-top: 0.5em;
	padding-inline-start: 1.25em;
}

.wtp-prose blockquote {
	margin: 44px 0;
	padding: 0;
	border: 0;
	font-style: italic;
	font-size: 1.4375rem;
	line-height: 1.35;
	color: var(--wtp-ink);
}

.wtp-prose blockquote cite,
.wtp-prose blockquote .wp-block-quote__citation {
	display: block;
	margin-top: 12px;
	font-family: var(--wtp-ui);
	font-style: normal;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wtp-ink-mute);
}

.wtp-prose hr,
.wtp-prose .wp-block-separator {
	border: 0;
	border-top: var(--wtp-rule-ink);
	margin: 44px 0;
	opacity: 1;
	height: 0;
}

.wtp-prose figure,
.wtp-prose .wp-block-image {
	margin: 44px 0;
}

.wtp-prose img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	box-shadow: var(--wtp-shadow);
}

.wtp-prose .wp-block-table,
.wtp-prose figure.wp-block-table {
	margin: 44px 0;
}

/* Tables — the most-read content on this site. */
.wtp-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.wtp-prose table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--wtp-ui);
	font-size: 0.875rem;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

.wtp-prose thead th {
	background: var(--wtp-sand-deep);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: left;
	color: var(--wtp-ink);
}

.wtp-prose th,
.wtp-prose td {
	padding: 12px 14px;
	border: 0;
	border-bottom: var(--wtp-rule-soft);
	text-align: left;
	vertical-align: top;
}

.wtp-prose tbody tr:last-child td {
	border-bottom: 0;
}

.wtp-prose td:not(:first-child) {
	white-space: normal;
}

.wtp-prose .wp-block-table figcaption,
.wtp-prose figure.wp-block-table figcaption {
	margin-top: 12px;
}

/* The pipeline writes its own credits section; the content filter folds it
   into the same details element the derived one uses. */
.wtp-prose .wtp-credits--inline {
	margin: 56px 0 0;
	padding-top: 18px;
	border-top: var(--wtp-rule-soft);
}

.wtp-prose .wtp-credits--inline ul {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	font-family: var(--wtp-ui);
	font-size: 0.75rem;
	line-height: 1.6;
	color: var(--wtp-ink-mute);
}

.wtp-prose .wtp-credits--inline li {
	margin-bottom: 6px;
}

/* Corrections, credits, related. */
.wtp-corrections {
	max-width: var(--wtp-measure);
	margin-top: 56px;
	padding-top: 18px;
	border-top: var(--wtp-rule-ink);
}

.wtp-corrections__text {
	font-family: var(--wtp-display);
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--wtp-ink-soft);
	margin: 14px 0 10px;
	max-width: 52ch;
}

.wtp-corrections__link a {
	display: inline-block;
	padding-block: 4px;
	font-family: var(--wtp-ui);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wtp-rust);
	text-decoration: none;
}

.wtp-corrections__link a:hover {
	text-decoration: underline;
}

.wtp-corrections__link {
	margin: 0;
}

.wtp-credits {
	max-width: var(--wtp-measure);
	margin-top: 28px;
}

.wtp-credits summary {
	cursor: pointer;
	color: var(--wtp-ink-mute);
	padding-block: 8px;
	min-height: 24px;
	list-style: none;
}

.wtp-credits summary::-webkit-details-marker {
	display: none;
}

.wtp-credits summary::before {
	content: "+";
	display: inline-block;
	width: 1em;
	color: var(--wtp-rust);
}

.wtp-credits[open] summary::before {
	content: "–";
}

.wtp-credits__list {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	font-family: var(--wtp-ui);
	font-size: 0.75rem;
	line-height: 1.6;
	color: var(--wtp-ink-mute);
}

.wtp-credits__label {
	color: var(--wtp-ink);
	font-weight: 500;
}

.wtp-more-in {
	max-width: var(--wtp-measure);
	margin-top: 56px;
}

/* -------------------------------------------------------------------------
   8. Contents ("In this guide")
   ---------------------------------------------------------------------- */

.wtp-toc__box {
	background: var(--wtp-sand-deep);
	border-radius: 6px;
	padding: 18px 20px;
	margin-bottom: 28px;
}

.wtp-toc__summary {
	cursor: pointer;
	font-family: var(--wtp-ui);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wtp-ink);
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 24px;
}

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

.wtp-toc__summary::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 1.5px solid var(--wtp-rust);
	border-bottom: 1.5px solid var(--wtp-rust);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 150ms ease;
}

.wtp-toc__box[open] .wtp-toc__summary::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.wtp-toc__label {
	display: none;
}

.wtp-toc__list,
.wtp-toc__sub {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.wtp-toc__list {
	margin-top: 14px;
}

.wtp-toc__item {
	margin-bottom: 10px;
}

.wtp-toc__item a {
	display: block;
	font-family: var(--wtp-display);
	font-size: 1rem;
	line-height: 1.35;
	color: var(--wtp-ink);
	text-decoration: none;
	border-inline-start: 2px solid transparent;
	padding: 3px 0 3px 10px;
	min-height: 24px;
	transition: color 150ms ease, border-color 150ms ease;
}

.wtp-toc__item a:hover {
	color: var(--wtp-rust);
}

.wtp-toc__item--sub a {
	font-family: var(--wtp-ui);
	font-size: 0.8125rem;
	line-height: 1.4;
	/* Ink-mute clears AA on Sand but not on the Sand-deep contents panel, so
	   sub-items use Ink-soft, which passes on both. */
	color: var(--wtp-ink-soft);
	padding-inline-start: 24px;
}

@media (max-width: 1099px) {
	.wtp-toc__item a {
		padding-block: 9px;
		min-height: 44px;
		display: flex;
		align-items: center;
	}
}

.wtp-toc__item a[aria-current="true"] {
	color: var(--wtp-rust);
	border-inline-start-color: var(--wtp-rust);
}

.wtp-toc__sub {
	margin-top: 10px;
}

@media (min-width: 1100px) {
	.wtp-toc-wrap--rail {
		position: sticky;
		top: var(--wtp-sticky);
		max-height: calc(100vh - var(--wtp-sticky) - 24px);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}

	.wtp-toc-wrap--rail .wtp-toc__box {
		background: none;
		padding: 0;
		margin: 0;
	}

	.wtp-toc-wrap--rail .wtp-toc__summary {
		display: none;
	}

	.wtp-toc-wrap--rail .wtp-toc__label {
		display: block;
		font-family: var(--wtp-ui);
		font-size: 0.6875rem;
		font-weight: 500;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--wtp-ink);
		margin: 0 0 14px;
	}

	.wtp-toc-wrap--rail .wtp-toc__list {
		margin-top: 0;
	}
}

/* Below 1100 the rail becomes the collapsible box above the body. */
@media (max-width: 1099px) {
	.wtp-article-grid__rail {
		order: -1;
	}
}

/* -------------------------------------------------------------------------
   9. Hub, archive, search
   ---------------------------------------------------------------------- */

.wtp-hub-head {
	position: relative;
	padding-block: 44px 28px;
	overflow: hidden;
}

.wtp-hub-head__numeral {
	position: absolute;
	left: -8px;
	top: 4px;
	font-family: var(--wtp-display);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(96px, 16vw, 160px);
	line-height: 1;
	color: var(--wtp-rust);
	opacity: 0.25;
	pointer-events: none;
	z-index: 0;
}

.wtp-hub-head__title,
.wtp-archive-head__title {
	position: relative;
	z-index: 1;
	font-family: var(--wtp-display);
	font-style: italic;
	font-weight: 300;
	font-size: var(--wp--preset--font-size--title-1, clamp(2.375rem, 1.5rem + 3vw, 3.75rem));
	line-height: 1.02;
	letter-spacing: -0.02em;
	margin: 0;
	text-wrap: balance;
}

.wtp-hub-head__deck,
.wtp-archive-head__deck {
	position: relative;
	z-index: 1;
	max-width: 620px;
	margin: 18px 0 0;
	font-family: var(--wtp-display);
	font-size: var(--wp--preset--font-size--lead, 1.25rem);
	line-height: 1.5;
	color: var(--wtp-ink-soft);
	text-wrap: pretty;
}

.wtp-archive-head {
	padding-block: 44px 28px;
}

/* Row lists that are the whole page get a measure of their own. */
.wtp-archive-head + .wtp-rows,
.wtp-archive-head + .wtp-rows + .wtp-pagination {
	max-width: 860px;
}

.wtp-pagination {
	margin-top: 44px;
	padding-top: 18px;
	border-top: var(--wtp-rule-soft);
}

.wtp-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-family: var(--wtp-ui);
	font-size: 0.875rem;
	font-weight: 500;
}

.wtp-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: 10px;
	border-radius: 999px;
	color: var(--wtp-ink);
	text-decoration: none;
}

.wtp-pagination a.page-numbers:hover {
	color: var(--wtp-rust);
}

.wtp-pagination .page-numbers.current {
	background: var(--wtp-ink);
	color: var(--wtp-sand);
}

.wtp-pagination .screen-reader-text {
	position: absolute !important;
}

.wtp-archive-head .wtp-label {
	color: var(--wtp-rust);
	margin-bottom: 14px;
}

.wtp-archive-head__count {
	margin: 14px 0 20px;
	font-family: var(--wtp-ui);
	font-size: 0.8125rem;
	color: var(--wtp-ink-mute);
}

/* -------------------------------------------------------------------------
   10. Footer
   ---------------------------------------------------------------------- */

.wtp-footer {
	background: var(--wtp-ink);
	color: var(--wtp-sand);
	padding-block: 44px 28px;
	margin-top: 88px;
}

.wtp-footer a {
	color: var(--wtp-sand);
	text-decoration: none;
}

.wtp-footer a:hover {
	color: var(--wtp-amber);
	text-decoration: underline;
}

.wtp-footer a:focus-visible {
	outline-color: var(--wtp-amber);
}

.wtp-footer__lockup {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}

.wtp-footer__lockup:hover {
	text-decoration: none;
}

.wtp-footer__wordmark {
	font-family: var(--wtp-display);
	font-style: italic;
	font-weight: 400;
	font-size: 1.625rem;
	line-height: 1;
	color: var(--wtp-sand);
}

.wtp-footer__disclaimer {
	margin: 18px 0 0;
	max-width: 42ch;
	font-family: var(--wtp-ui);
	font-size: 0.875rem;
	line-height: 1.6;
	color: rgb(246 239 227 / 70%);
}

.wtp-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 28px;
}

.wtp-footer__col-head {
	color: var(--wtp-amber);
	margin-bottom: 14px;
}

.wtp-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--wtp-ui);
	font-size: 0.875rem;
	line-height: 1.4;
}

.wtp-footer__links li {
	margin-bottom: 10px;
}

.wtp-footer__links a {
	display: inline-block;
	padding-block: 3px;
}

.wtp-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-top: 44px;
	padding-top: 18px;
	border-top: var(--wtp-rule-onink);
}

.wtp-footer__meta {
	margin: 0;
	font-family: var(--wtp-ui);
	font-size: 0.75rem;
	line-height: 1.5;
	color: rgb(246 239 227 / 55%);
}

/* -------------------------------------------------------------------------
   11. Layout helpers used by the templates
   ---------------------------------------------------------------------- */

/* Core's flow layout puts a block-gap margin on every child after the first.
   Inside our own grids the gap is the grid's job, so cancel it there. */
.wtp-masthead > *,
.wtp-split > *,
.wtp-article-grid > *,
.wtp-footer__cols > *,
.wtp-footer__bottom > *,
.wtp-index__list > *,
.wtp-nav__list > * {
	margin-block: 0;
}

.wtp-shell {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--wtp-pad);
}

.wtp-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: 44px var(--wtp-gutter);
}

@media (min-width: 900px) {
	.wtp-split--7-5 {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: end;
	}

	.wtp-split--6-6 {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
	}

	.wtp-split--5-7 {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: start;
	}
}

.wtp-split > * {
	min-width: 0;
}

.wtp-stack-44 > * + * {
	margin-top: 44px;
}

/* -------------------------------------------------------------------------
   12. Block styles
   ---------------------------------------------------------------------- */

.wtp-prose .is-style-wtp-checklist {
	list-style: none;
	padding-inline-start: 0;
}

.wtp-prose .is-style-wtp-checklist li {
	position: relative;
	padding-inline-start: 26px;
}

.wtp-prose .is-style-wtp-checklist li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.5em;
	width: 10px;
	height: 5px;
	border-left: 2px solid var(--wtp-rust);
	border-bottom: 2px solid var(--wtp-rust);
	transform: rotate(-45deg);
}

.wtp-prose .is-style-wtp-pull {
	font-size: 1.75rem;
	line-height: 1.25;
	color: var(--wtp-ink);
}

.is-style-wtp-panel {
	background: var(--wtp-sand-deep);
	border-radius: 6px;
	padding: 28px;
}

.wtp-prose .is-style-wtp-costs thead th {
	background: var(--wtp-sand-deep);
}

.wtp-prose .is-style-wtp-costs td:not(:first-child),
.wtp-prose .is-style-wtp-costs th:not(:first-child) {
	text-align: right;
}

/* -------------------------------------------------------------------------
   13. Print
   ---------------------------------------------------------------------- */

@media print {
	.wtp-nav-wrap,
	.wtp-masthead__meta,
	.wtp-toc-wrap,
	.wtp-footer__cols,
	.wtp-panel,
	.wtp-search-panel,
	.wtp-corrections__link,
	.wtp-more-in {
		display: none !important;
	}

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

	.wtp-prose {
		font-size: 11.5pt;
		max-width: none;
	}

	.wtp-prose a::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		color: #444;
		word-break: break-all;
	}

	.wtp-hero-decor,
	img.wtp-graded {
		filter: none;
	}

	.wtp-footer {
		background: none;
		color: #000;
		margin-top: 24pt;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}