/*
 * Wazuri WebCraft composition styles.
 *
 * Colours, type sizes and spacing come from theme.json presets. This file only
 * arranges them where block settings cannot (layout, image treatment, overlays).
 * Columns stack below 782px, matching the WordPress Columns block breakpoint.
 */

/* ---------- Typography ---------- */

/*
 * Cormorant and Source Sans 3 are self-hosted and set up in theme.json. Italic
 * and bold only ever come from the real font files, and numbers set in
 * Cormorant use its lining figures, whose zero cannot be mistaken for an "o".
 */
html {
	font-synthesis: none;
}

:where(h1, h2, h3, .wp-block-quote, .wazuri-lead__text, .wazuri-project-lede, .wazuri-project-support, .wazuri-closing__text, .wazuri-story-pull, .wazuri-story-names) {
	font-variant-numeric: lining-nums;
}

/* ---------- Page frame ---------- */

/* Short pages still end with the footer at the bottom of the screen. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}

.wp-site-blocks > main {
	flex-grow: 1;
}

/* ---------- Wordmark (header and footer) ---------- */

.wazuri-wordmark {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.wazuri-wordmark a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.wazuri-wordmark a:hover {
	color: var(--wp--preset--color--accent);
}

/* ---------- Header brand: authentic emblem beside the stacked wordmark ---------- */

/*
 * Approved treatment (Option B). The emblem keeps its original colours and
 * proportions; only its display size is set here: 56px, or 44px on phones.
 */
.wazuri-brand.wazuri-brand {
	--wazuri-emblem-size: 3.5rem;
	position: relative;
	align-items: center;
	gap: 0.875rem;
}

.wazuri-brand > * {
	margin: 0;
}

.wazuri-brand .wazuri-brand__emblem {
	flex: none;
	margin: 0;
	line-height: 0;
}

.wazuri-brand .wazuri-brand__emblem img {
	display: block;
	width: var(--wazuri-emblem-size);
	height: var(--wazuri-emblem-size);
}

/* WAZURI / WEBCRAFT on two lines, without changing the text itself. */
.wazuri-brand .wazuri-wordmark {
	width: min-content;
	font-size: 0.9375rem;
	line-height: 1.3;
	letter-spacing: 0.2em;
}

/* One link: the wordmark's clickable area also covers the emblem. */
.wazuri-brand .wazuri-wordmark a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Keyboard focus outlines the whole brand, not just the words. */
@supports selector(:has(*)) {
	.wazuri-brand .wazuri-wordmark a:focus-visible {
		outline: none;
	}

	.wazuri-brand:has(a:focus-visible) {
		outline: 2px solid var(--wp--preset--color--accent);
		outline-offset: 6px;
	}
}

@media (max-width: 599px) {
	.wazuri-brand.wazuri-brand {
		--wazuri-emblem-size: 2.75rem;
		gap: 0.75rem;
	}
}

/* Footer: the same emblem and link, smaller, beside the wordmark on one line. */
.wazuri-brand.wazuri-brand--footer {
	--wazuri-emblem-size: 2.25rem;
	gap: 0.75rem;
}

.wazuri-brand.wazuri-brand--footer .wazuri-wordmark {
	width: auto;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.18em;
}

/* ---------- Main navigation: current page and section ---------- */

/*
 * functions.php marks the current page (aria-current="page") and, for pages
 * inside a section such as a project story under /work/, the section itself
 * (aria-current="true"). Both show in gold with a thin underline, on desktop
 * and in the mobile menu. The keyboard focus outline is drawn separately.
 */
.wazuri-nav-primary .wp-block-navigation-item a[aria-current] {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.5em;
}

/*
 * The Navigation block's own mobile menu begins at a width fixed in WordPress's
 * stylesheet (below 600px), where the links are already crowding the emblem.
 * This keeps the same block, button and overlay in charge up to the theme's
 * 782px breakpoint.
 */
@media (min-width: 600px) and (max-width: 781.98px) {
	.wazuri-nav-primary .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

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

/* A 44px target around the 24px menu and close icons, without moving them. */
.wazuri-nav-primary .wp-block-navigation__responsive-container-open,
.wazuri-nav-primary .wp-block-navigation__responsive-container-close {
	margin: -0.625rem;
	padding: 0.625rem;
}

/* ---------- Footer ---------- */

/* A taller target around each menu link, without moving its line. */
.wazuri-nav-footer .wp-block-navigation-item__content {
	margin-block: -0.3125rem;
	padding-block: 0.3125rem;
}

/*
 * Wide screens: brand, menu and tagline share one row. 600-1159px: brand and
 * tagline above the menu. Phones: stacked, with the menu's lines ending short
 * of the Back to Top column (16px offset, 44px width, 12px gap, less the page's
 * 20px margin).
 */
@media (min-width: 600px) and (max-width: 1159.98px) {
	.wazuri-footer-row > .wazuri-nav-footer {
		order: 1;
		flex-basis: 100%;
	}
}

@media (max-width: 599.98px) {
	.wazuri-footer-row > .wazuri-nav-footer {
		box-sizing: border-box;
		flex-basis: 100%;
		padding-inline-end: 3.25rem;
	}
}

/* ---------- Back to Top ---------- */

/*
 * Fixed in the lower-right corner: 16px from the edges on phones and tablets
 * (measured from any safe area, such as an iPhone's home indicator), 24px on
 * wider screens. It never moves, including when the footer comes into view.
 */
.wazuri-to-top {
	position: fixed;
	z-index: 90;
	inset-inline-end: calc(1rem + env(safe-area-inset-right, 0px));
	inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0px));
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid rgb(201 164 92 / 0.45);
	border-radius: 50%;
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent);
	box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.45);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, opacity 0.15s ease;
}

.wazuri-to-top[hidden] {
	display: none;
}

/*
 * While a link, button or field passes beneath it, the button fades and lets
 * taps through. It stays in the keyboard order and shows again on focus.
 */
.wazuri-to-top.is-yielding {
	opacity: 0;
	pointer-events: none;
}

.wazuri-to-top.is-yielding:focus-visible {
	opacity: 1;
	pointer-events: auto;
}

.wazuri-to-top:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-soft);
}

.wazuri-to-top:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

@media (min-width: 782px) {
	.wazuri-to-top {
		inset-inline-end: calc(1.5rem + env(safe-area-inset-right, 0px));
		inset-block-end: calc(1.5rem + env(safe-area-inset-bottom, 0px));
	}
}

/*
 * The footer tagline ends where the button's column begins: its 24px offset,
 * its 44px width and a 12px gap. Where the page's own margin already leaves
 * that much room (1440px and wider) this comes to nothing.
 */
@media (min-width: 600px) {
	.wazuri-footer-tagline.wazuri-footer-tagline {
		margin-inline-end: max(0px, calc(5rem + env(safe-area-inset-right, 0px) - max(var(--wp--style--root--padding-right), (100vw - var(--wp--style--global--wide-size)) / 2)));
	}
}

@media print {
	.wazuri-to-top {
		display: none;
	}
}

/* After Back to Top, focus returns to the page itself; it needs no outline. */
.wp-site-blocks:focus {
	outline: none;
}

/* ---------- Shared editorial details ---------- */

/* Running text avoids leaving one word alone on its last line, where the browser supports it. */
main :is(p, li, figcaption) {
	text-wrap: pretty;
}

.wazuri-rule.wp-block-separator {
	width: 3rem;
	margin-inline: 0;
	border: 0;
	border-top: 2px solid var(--wp--preset--color--accent);
	opacity: 1;
}

.wazuri-eyebrow {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.wazuri-button-arrow .wp-block-button__link::after {
	content: "\2192";
	content: "\2192" / "";
	display: inline-block;
	margin-inline-start: 0.75em;
	transition: transform 0.2s ease;
}

.wazuri-button-arrow .wp-block-button__link:hover::after {
	transform: translateX(3px);
}

/* ---------- Homepage opening ---------- */

.wazuri-opening.wp-block-columns {
	gap: 0;
	margin-block: 0;
}

.wazuri-opening > .wp-block-column {
	box-sizing: border-box;
}

.wazuri-opening__text {
	padding-block: var(--wp--preset--spacing--50);
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
}

/* The tagline is the first major statement beneath the header. */
.wazuri-opening__text > .wazuri-opening__headline {
	margin-block-start: 0;
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.04;
}

.wazuri-opening__text > .wazuri-rule {
	margin-block-start: var(--wp--preset--spacing--40);
}

.wazuri-opening__text > .wazuri-opening__intro {
	max-width: 34em;
	margin-block-start: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--medium);
}

/* The button has its own column, so stacked screens read words, photograph, button. */
.wazuri-opening__action {
	padding-block-start: var(--wp--preset--spacing--50);
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
}

.wazuri-opening__media {
	position: relative;
}

.wazuri-opening__media .wp-block-image {
	margin: 0;
}

.wazuri-opening__media .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	max-height: 80vh;
	object-fit: cover;
}

.wazuri-opening__media .wp-block-image figcaption {
	margin: 0.75rem var(--wp--style--root--padding-right) 0 var(--wp--style--root--padding-left);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/*
 * Tablets (782–999px): side by side, the tagline was squeezed into a narrow
 * column, so the opening stacks as on phones. WordPress places columns side by
 * side from 782px with !important, hence !important here. A landscape picture
 * keeps the photograph from filling the screen.
 */
@media (min-width: 782px) and (max-width: 999.98px) {
	.wazuri-opening.wp-block-columns {
		flex-wrap: wrap !important;
	}

	.wazuri-opening > .wp-block-column {
		flex-basis: 100% !important;
	}

	.wazuri-opening__media .wp-block-image img {
		aspect-ratio: 3 / 2;
	}
}

@media (min-width: 1000px) {
	/*
	 * Sized to the words, so the opening holds no idle space around them. The
	 * words and button sit together, centred, in the left column, beside the
	 * photograph. WordPress's 44% and 56% column widths do not apply to a grid.
	 */
	.wazuri-opening.wp-block-columns {
		display: grid;
		grid-template-columns: 44% 56%;
		grid-template-rows: 1fr auto auto 1fr;
		min-height: min(70vh, 46rem);
		align-items: stretch;
	}

	.wazuri-opening__text {
		grid-area: 2 / 1;
		padding-block-end: 0;
	}

	.wazuri-opening__action {
		grid-area: 3 / 1;
		padding-block-end: var(--wp--preset--spacing--50);
	}

	.wazuri-opening__media {
		grid-area: 1 / 2 / -1 / 2;
	}

	/* Text starts on the same vertical line as wide sections further down. */
	:is(.wazuri-opening__text, .wazuri-opening__action) {
		padding-inline-start: max(var(--wp--style--root--padding-left), calc((100vw - var(--wp--style--global--wide-size)) / 2));
		padding-inline-end: var(--wp--preset--spacing--60);
	}

	/* Fill the column without letting the image's own proportions set its height. */
	.wazuri-opening__media .wp-block-image {
		position: absolute;
		inset: 0;
	}

	.wazuri-opening__media .wp-block-image img {
		height: 100%;
		max-height: none;
		aspect-ratio: auto;
	}

	/* The photograph fades into the dark field beside the words. */
	.wazuri-opening__media::before {
		content: "";
		position: absolute;
		inset: 0 auto 0 0;
		z-index: 1;
		width: 35%;
		background: linear-gradient(to right, var(--wp--preset--color--base), transparent);
		pointer-events: none;
	}

	.wazuri-opening__media .wp-block-image figcaption {
		position: absolute;
		inset-inline-end: var(--wp--style--root--padding-right);
		inset-block-end: var(--wp--preset--spacing--30);
		z-index: 2;
		margin: 0;
		padding: 0.35rem 0.75rem;
		background: rgb(13 12 10 / 0.75);
	}
}

/* ---------- Narrative transition ---------- */

.wazuri-transition {
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
}

.wazuri-transition__inner > * {
	margin-block: 0;
}

.wazuri-transition__inner > .wazuri-transition__statement {
	max-width: 18ch;
	margin-block-start: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--xx-large);
	font-style: italic;
	font-weight: 400;
	line-height: 1.1;
}

.wazuri-transition__inner > .wazuri-transition__cue {
	margin-block-start: var(--wp--preset--spacing--50);
}

.wazuri-transition__cue a {
	text-decoration: none;
}

.wazuri-transition__cue a:hover {
	text-decoration: underline;
}

.wazuri-transition__cue a::after {
	content: "\2193";
	content: "\2193" / "";
	margin-inline-start: 0.6em;
}

/* Offset beneath the photograph's edge: the eye moves from words, to image, to idea. */
@media (min-width: 1000px) {
	.wazuri-transition__inner {
		padding-inline-start: 40%;
	}
}

/* ---------- Featured work ---------- */

.wazuri-featured {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--80);
	border-top: 1px solid var(--wp--preset--color--rule);
}

.wazuri-featured .wp-block-columns {
	gap: var(--wp--preset--spacing--60);
	margin-block: 0;
}

.wazuri-featured__media {
	margin: 0;
}

.wazuri-featured__media img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.wazuri-featured__media figcaption {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.wazuri-featured__text > * {
	margin-block: 0;
}

.wazuri-featured__text > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

/*
 * "The Window" (Step 44, Concept A): a project's desktop screen with its phone
 * screen overlapping the lower corner. Screenshots keep their own proportions.
 */
.wazuri-window {
	--wazuri-phone-width: 24%;
	position: relative;
	padding-inline-end: 2.5rem;
	padding-block-end: 3.5rem;
}

.wazuri-window > .wp-block-image {
	margin: 0;
}

.wazuri-window__desktop img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--wp--preset--color--rule);
}

.wazuri-window .wazuri-window__phone {
	position: absolute;
	inset-inline-end: 0;
	inset-block-end: 0;
	width: var(--wazuri-phone-width);
}

.wazuri-window__phone img {
	display: block;
	width: 100%;
	height: auto;
	border: 5px solid #22201b;
	border-radius: 1.125rem;
	box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.55);
}

.wazuri-window__caption {
	margin-block: var(--wp--preset--spacing--30) 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/*
 * Kokoye's own stripe (gold, navy, tan, red, sampled from kokoye.app), used once
 * beneath its screenshot as a quiet signature. Decorative only.
 */
.wazuri-window__desktop::after {
	content: "";
	display: block;
	width: 70%;
	height: 4px;
	margin-block-start: 1.25rem;
	background: linear-gradient(90deg, #b8860b 0 16%, #1a1f4e 16% 30%, #b8860b 30% 46%, #d8b07a 46% 60%, #b8860b 60% 76%, #8b1e2b 76% 90%, #b8860b 90%);
}

@media (max-width: 781px) {
	.wazuri-window {
		--wazuri-phone-width: 30%;
		padding-inline-end: 1.25rem;
		padding-block-end: 2.5rem;
	}

	.wazuri-window__phone img {
		border-width: 4px;
		border-radius: 0.875rem;
	}
}

/* ---------- Project entries (homepage feature and Selected Work) ---------- */

.wazuri-project-text > * {
	margin-block: 0;
}

.wazuri-project-text > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.wazuri-project-support {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-style: italic;
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--preset--color--accent-soft);
}

.wazuri-project-lede {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.3;
	text-wrap: balance;
}

.wazuri-project-meta {
	padding-block-start: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/*
 * Link to a project story. The theme shows it only once the story page is
 * published (see functions.php), so it never leads to a missing page.
 */
.wazuri-story-link {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wazuri-story-link a {
	text-decoration: none;
}

.wazuri-story-link a:hover {
	text-decoration: underline;
}

.wazuri-story-link a::after {
	content: "\2192";
	content: "\2192" / "";
	margin-inline-start: 0.6em;
}

/* A screenshot shown whole, at its own proportions, with a hairline edge. */
.wazuri-media-screen {
	margin: 0;
}

.wazuri-media-screen img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--wp--preset--color--rule);
}

.wazuri-media-screen figcaption {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- Interior pages ---------- */

.wazuri-page-header {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}

.wazuri-page-header > .wazuri-page-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.04;
}

.wazuri-page-content {
	padding-block-end: var(--wp--preset--spacing--80);
}

.wazuri-page-content > .wazuri-lead {
	margin-block-start: 0;
}

.wazuri-lead__text {
	max-width: 30em;
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
	text-wrap: balance;
}

.wazuri-lead > p:not(.wazuri-lead__text) {
	max-width: 34em;
	margin-block-start: var(--wp--preset--spacing--40);
}

/* A policy's Effective date and Last updated lines read as a pair. */
p.wazuri-policy-date + p.wazuri-policy-date {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* Sections breathe: generous space before each new idea. */
.wazuri-page-content > .wazuri-section {
	margin-block-start: var(--wp--preset--spacing--70);
}

.wazuri-section > .wazuri-rule {
	margin-block-end: var(--wp--preset--spacing--40);
}

/* Quotations: type, colour and the gold rule come from theme.json (core/quote). This is the spacing it can't set. */
.wp-block-quote p {
	margin: 0;
	text-wrap: balance;
}

.wp-block-quote p + p {
	margin-block-start: 0.6em;
}

.wp-block-quote cite {
	display: block;
	margin-block-start: 0.75rem;
}

.wazuri-passage.wp-block-columns {
	gap: var(--wp--preset--spacing--60);
}

.wazuri-media-landscape {
	margin: 0;
}

.wazuri-media-landscape img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.wazuri-media-landscape figcaption {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.wazuri-closing {
	padding-block-start: var(--wp--preset--spacing--60);
	border-top: 1px solid var(--wp--preset--color--rule);
}

.wazuri-closing > .wazuri-closing__text {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 500;
	line-height: 1.15;
}

.wazuri-closing > .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--40);
}

.wazuri-panel {
	padding: var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
}

.wazuri-panel > * {
	margin-block: 0;
}

.wazuri-panel > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* ---------- Standard Editorial (templates/page.html, single.html and 404.html) ---------- */

/*
 * The default style for ordinary pages and articles. Type sizes come from
 * theme.json, so nothing here sets them. This section only places things: an
 * outer canvas of 65rem, centred, for photographs and dividing lines, and a
 * 40rem reading column centred inside it. Plain WordPress blocks need no
 * classes: WordPress centres them in the column. The two widths are set here,
 * not in theme.json, because theme.json's would also reach the homepage,
 * Selected Work and project stories.
 */
main.wazuri-editorial {
	--wp--style--global--wide-size: 65rem;
	/* This one value sets the reading width. Approved at 40rem; 42rem is the alternative if requested. */
	--wp--style--global--content-size: 40rem;
	/* The space either side of the reading column. It reaches zero by itself once the canvas is no wider than the column. */
	--wazuri-column-inset: calc((min(100%, var(--wp--style--global--wide-size)) - min(100%, var(--wp--style--global--content-size))) / 2);
}

/* The pattern groups span the canvas so their dividing lines can. Their contents keep to the reading column. */
main.wazuri-editorial :is(.wazuri-page-content > .wazuri-lead, .wazuri-page-content > .wazuri-section:not(.wazuri-passage), .wazuri-not-found) {
	padding-inline: var(--wazuri-column-inset);
}

/* The title starts on the column's left edge. It may run on across the canvas, so a long title wraps less. */
main.wazuri-editorial .wazuri-page-header {
	padding-block: clamp(1.5rem, 5vw, 4rem) 0;
	padding-inline-start: var(--wazuri-column-inset);
}

main.wazuri-editorial .wazuri-page-content {
	padding-block-end: clamp(3rem, 7vw, 6rem);
}

/* The introduction and its supporting text share the column's right edge. */
main.wazuri-editorial :is(.wazuri-lead__text, .wazuri-lead > p:not(.wazuri-lead__text)) {
	max-width: var(--wp--style--global--content-size);
}

main.wazuri-editorial .wazuri-lead__text {
	line-height: 1.3;
}

main.wazuri-editorial .wazuri-page-content .wp-block-list {
	padding-inline-start: 1.5em;
}

main.wazuri-editorial .wazuri-page-content .wp-block-list > li + li {
	margin-block-start: 0.35em;
}

/* Vertical rhythm. Whatever comes first sits close beneath the title. */
main.wazuri-editorial .wazuri-page-content > :first-child {
	margin-block-start: var(--wp--preset--spacing--40);
}

main.wazuri-editorial .wazuri-page-content > .wazuri-lead + .wazuri-section {
	margin-block-start: var(--wp--preset--spacing--60);
}

main.wazuri-editorial :is(.wazuri-page-content, .wazuri-section, .wazuri-passage > .wp-block-column) > :is(h2, h3, h4) + * {
	margin-block-start: 1.25rem;
}

main.wazuri-editorial :is(.wazuri-page-content, .wazuri-section, .wazuri-passage > .wp-block-column) > :is(p, ul, ol) + :is(p, ul, ol) {
	margin-block-start: var(--wp--preset--spacing--30);
}

main.wazuri-editorial .wazuri-page-content > h2 {
	margin-block-start: var(--wp--preset--spacing--70);
}

main.wazuri-editorial .wazuri-page-content > :is(h3, h4) {
	margin-block-start: var(--wp--preset--spacing--50);
}

main.wazuri-editorial .wazuri-page-content > :is(.wp-block-quote, .wp-block-image) {
	margin-block: var(--wp--preset--spacing--50);
}

main.wazuri-editorial .wazuri-section > .wp-block-quote {
	margin-block-start: var(--wp--preset--spacing--50);
}

/*
 * One marker per transition. Gold rules open ordinary sections. A quiet line
 * appears only where the layout changes, with the section gap shared around it.
 */
main.wazuri-editorial .wazuri-page-content > :is(.wazuri-passage, .wazuri-closing) {
	margin-block-start: calc(var(--wp--preset--spacing--70) / 2);
	padding-block-start: calc(var(--wp--preset--spacing--70) / 2);
	border-top: 1px solid var(--wp--preset--color--rule);
}

/* A plain Separator block: the same quiet line, across the canvas. */
main.wazuri-editorial .wazuri-page-content > .wp-block-separator:not(.wazuri-rule) {
	max-width: var(--wp--style--global--wide-size);
	margin-block: calc(var(--wp--preset--spacing--70) / 2);
	border: 0;
	border-top: 1px solid var(--wp--preset--color--rule);
	opacity: 1;
}

/* The photograph beside its words, both aligned to the top, whichever way round they are. */
main.wazuri-editorial .wazuri-page-content > .wazuri-passage {
	align-items: flex-start;
	column-gap: 7%;
}

main.wazuri-editorial .wazuri-passage > .wp-block-column {
	align-self: flex-start;
}

main.wazuri-editorial .wazuri-passage h2 {
	margin-block-start: -0.12em;
}

/* !important because WordPress writes each column's width on the block itself. */
@media (min-width: 782px) {
	main.wazuri-editorial .wazuri-passage > .wp-block-column:has(> .wp-block-image) {
		flex-basis: 49% !important;
	}

	main.wazuri-editorial .wazuri-passage > .wp-block-column:not(:has(> .wp-block-image)) {
		flex-basis: 44% !important;
	}
}

/* Below 1000px: the two stack. The photograph keeps the canvas, and its words rejoin the reading column. */
@media (max-width: 999.98px) {
	main.wazuri-editorial .wazuri-passage.wp-block-columns {
		flex-wrap: wrap !important;
		row-gap: clamp(1.5rem, 4vw, 2.5rem);
	}

	main.wazuri-editorial .wazuri-passage > .wp-block-column:is(:has(> .wp-block-image), :not(:has(> .wp-block-image))) {
		flex-basis: 100% !important;
	}

	main.wazuri-editorial .wazuri-passage > .wp-block-column:not(:has(> .wp-block-image)) {
		box-sizing: border-box;
		padding-inline: var(--wazuri-column-inset);
	}
}

/* ---------- Contact form (Fluent Forms, "inherit theme" style) ---------- */

/*
 * The form uses Fluent Forms' "inherit theme" style, so only its layout rules
 * load. These rules give its fields the site's colours and focus outline.
 * Field borders use Muted Stone at 60%, which keeps the 3:1 contrast that form
 * controls need on both page backgrounds. The error colour is used only for
 * error messages and borders, and every error also has a written message.
 */
.wazuri-contact {
	--wazuri-field-border: rgb(173 165 149 / 0.6);
	--wazuri-error: #f2a08e;
}

.wazuri-contact .fluentform {
	--fluentform-danger: var(--wazuri-error);
	margin-block-start: var(--wp--preset--spacing--50);
}

.wazuri-contact .fluentform .ff-el-group {
	margin-block-end: var(--wp--preset--spacing--40);
}

.wazuri-contact .fluentform .ff-el-input--label {
	margin-block-end: 0.5rem;
}

.wazuri-contact .fluentform .ff-el-input--label label {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

/* Required fields: a gold asterisk, announced to screen readers by aria-required. */
.wazuri-contact .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
	color: var(--wp--preset--color--accent);
}

.wazuri-contact .fluentform .ff-el-form-control {
	box-sizing: border-box;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wazuri-field-border);
	border-radius: 6px;
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
}

.wazuri-contact .fluentform textarea.ff-el-form-control {
	min-height: 10rem;
	resize: vertical;
}

.wazuri-contact .fluentform .ff-el-form-control::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.wazuri-contact .fluentform .ff-el-form-control:hover {
	border-color: var(--wp--preset--color--muted);
}

.wazuri-contact .fluentform .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--accent);
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.wazuri-contact .fluentform .ff-el-is-error .ff-el-form-control {
	border-color: var(--wazuri-error);
}

.wazuri-contact .fluentform .ff-el-is-error .text-danger,
.wazuri-contact .fluentform .text-danger {
	margin-block-start: 0.5rem;
	color: var(--wazuri-error);
	font-size: var(--wp--preset--font-size--small);
}

.wazuri-contact .fluentform .ff_submit_btn_wrapper {
	margin-block: var(--wp--preset--spacing--50) 0;
}

/* Dimmed if Fluent Forms disables the button. */
.wazuri-contact .fluentform .ff-btn.disabled,
.wazuri-contact .fluentform .ff-btn:disabled {
	opacity: 0.65;
	cursor: progress;
}

/* Problems that are not about one field (for example, a lost connection). */
.wazuri-contact .ff-errors-in-stack {
	margin-block-start: var(--wp--preset--spacing--30);
	color: var(--wazuri-error);
}

/* The confirmation that replaces the form after a successful submission. */
.wazuri-contact .ff-message-success {
	margin-block-start: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--rule);
	border-inline-start: 2px solid var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--surface);
	box-shadow: none;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.3;
}

.wazuri-contact .ff-message-success:focus {
	outline: none;
}

.wazuri-contact .ff-message-success > :first-child {
	margin-block-start: 0;
}

.wazuri-contact .ff-message-success > :last-child {
	margin-block-end: 0;
}

.wazuri-contact > .wazuri-contact__note {
	margin-block-start: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.wazuri-contact > .wazuri-contact__alt {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* ---------- Project story (the "Project story" page template) ---------- */

/*
 * One editorial grid (Hybrid 3B). The title, text, headings, captions and
 * screenshots share one left edge. Text keeps a 44rem reading width;
 * screenshots and panels extend to 50rem (800px). The grid is centred on the
 * page. Below 1160px everything sits in one centred 44rem column.
 *
 *   |<------- text 44rem ------->|
 *   |<------ screenshots 50rem ------>|
 */
.wazuri-story {
	--wazuri-story-text: 44rem;
	--wazuri-story-grid: 44rem;
	--wazuri-story-gap: 2.5rem;
	--wazuri-story-phone: 13rem;
	--wazuri-story-columns:
		[full-start] minmax(var(--wp--style--root--padding-left), 1fr)
		[grid-start] min(var(--wazuri-story-grid), 100% - var(--wp--style--root--padding-left) - var(--wp--style--root--padding-right))
		[grid-end] minmax(var(--wp--style--root--padding-right), 1fr) [full-end];
}

@media (min-width: 1160px) {
	.wazuri-story {
		--wazuri-story-grid: 50rem;
	}
}

.wazuri-story > .wazuri-story-header.alignwide {
	max-width: var(--wazuri-story-grid);
}

.wazuri-story-header {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.wazuri-story-header > * {
	margin-block: 0;
}

.wazuri-story-crumb {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
}

.wazuri-story-crumb a {
	text-decoration: none;
}

.wazuri-story-crumb a:hover {
	text-decoration: underline;
}

/* Both links back to Selected Work: the one above the title and the one closing the story. */
.wazuri-story-back a::before {
	content: "\2190";
	content: "\2190" / "";
	margin-inline-end: 0.6em;
}

.wazuri-story-header > .wazuri-eyebrow {
	margin-block-start: var(--wp--preset--spacing--50);
}

.wazuri-story-header > .wazuri-story-title {
	max-width: 14ch;
	margin-block-start: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.04;
}

.wazuri-story-content {
	padding-block-end: var(--wp--preset--spacing--80);
}

/* Every block in the story sits on the grid; the editorial band spans the page. */
.wazuri-story-content.wazuri-story-content {
	display: grid;
	grid-template-columns: var(--wazuri-story-columns);
	padding-inline: 0;
}

.wazuri-story-content.wazuri-story-content > * {
	grid-column: grid;
	max-width: var(--wazuri-story-text);
	margin-inline: 0 !important;
}

.wazuri-story-content.wazuri-story-content > :is(.alignwide, .wazuri-chapter, .wazuri-story-closing) {
	max-width: none;
}

.wazuri-story-content.wazuri-story-content > .alignfull {
	grid-column: full;
	max-width: none;
}

.wazuri-story-content > :first-child {
	margin-block-start: 0;
}

.wazuri-story-intro > *,
.wazuri-chapter > *,
.wazuri-story-closing > * {
	max-width: var(--wazuri-story-text);
	margin-block: 0;
}

.wazuri-story-intro > * + *,
.wazuri-chapter > * + *,
.wazuri-story-closing > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.wazuri-story-facts {
	padding-block-start: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.9;
}

.wazuri-story-facts strong {
	margin-inline-end: 0.75em;
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Screenshots: shown whole, at their own proportions, with a hairline edge. */
.wazuri-story-content > .wazuri-story-figure {
	margin-block: var(--wp--preset--spacing--60) 0;
}

.wazuri-story-figure img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--wp--preset--color--rule);
}

.wazuri-story-figure figcaption,
.wazuri-story-phone figcaption {
	max-width: 44rem;
	margin-block: 0.75rem 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* The companion phone screenshot in "A Doorway Home". */
.wazuri-story-phone {
	max-width: min(15rem, 75%);
}

.wazuri-chapter > .wazuri-story-phone {
	margin-block: var(--wp--preset--spacing--40);
}

.wazuri-story-phone img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	border: 5px solid #22201b;
	border-radius: 1.125rem;
	box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.55);
}

/* The editorial band: a darker full-width surface, its screenshot on the grid. */
.wazuri-story-content.wazuri-story-content > .wazuri-story-band {
	display: grid;
	grid-template-columns: var(--wazuri-story-columns);
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block: var(--wp--preset--spacing--60);
	background-color: var(--wp--preset--color--surface);
	border-block: 1px solid var(--wp--preset--color--rule);
}

.wazuri-story-band > * {
	grid-column: grid;
	margin: 0;
}

/* Each chapter opens with a short gold rule and generous space. */
.wazuri-story-content > .wazuri-chapter {
	margin-block-start: var(--wp--preset--spacing--70);
}

.wazuri-chapter > .wazuri-rule + h2 {
	margin-block-start: var(--wp--preset--spacing--40);
}

.wazuri-chapter > h2 + * {
	margin-block-start: 1.25rem;
}

/* Text that continues a chapter after a screenshot stays with that chapter. */
.wazuri-story-content > .wazuri-story-figure + .wazuri-chapter:not(:has(> .wazuri-rule)) {
	margin-block-start: var(--wp--preset--spacing--50);
}

.wazuri-story-names {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--preset--color--muted);
	word-spacing: 0.1em;
}

.wazuri-story-names strong {
	font-weight: 500;
	color: var(--wp--preset--color--accent-soft);
}

.wazuri-chapter > .wazuri-story-pull {
	margin-block: var(--wp--preset--spacing--40);
	padding-inline-start: var(--wp--preset--spacing--40);
	border-inline-start: 2px solid var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-style: italic;
	font-weight: 500;
	line-height: 1.25;
}

.wazuri-chapter > .wazuri-story-pull:last-child {
	margin-block-end: 0;
}

/* Pull quotes open out to the screenshot width, a size larger than the text. */
.wazuri-story-content .wazuri-chapter > .wazuri-story-pull {
	box-sizing: border-box;
	max-width: var(--wazuri-story-grid);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
}

/* Closing lines given extra weight, such as the end of "Finding the Difference". */
.wazuri-chapter > .wazuri-story-emphasis {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
}

.wazuri-chapter > :not(.wazuri-story-emphasis) + .wazuri-story-emphasis {
	margin-block-start: var(--wp--preset--spacing--40);
}

@media (min-width: 1160px) {
	/*
	 * The project's names as a quiet timeline beside the chapter's opening
	 * paragraphs. The arrows, hidden from screen readers, turn to point down.
	 */
	.wazuri-chapter--timeline {
		display: grid;
		grid-template-columns: var(--wazuri-story-text) max-content;
		column-gap: var(--wazuri-story-gap);
		align-items: start;
	}

	.wazuri-chapter--timeline > * {
		grid-column: 1;
	}

	.wazuri-chapter--timeline > .wazuri-story-pull {
		grid-column: 1 / -1;
	}

	/* Grid items keep both margins, so the pull quote's own space is enough. */
	.wazuri-chapter--timeline > .wazuri-story-pull + * {
		margin-block-start: 0;
	}

	.wazuri-chapter--timeline > .wazuri-story-names {
		grid-column: 2;
		grid-row: 3 / span 3;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.2rem;
		margin-block-start: calc(1.25rem + 0.35em);
		padding-inline-start: 1.25rem;
		border-inline-start: 1px solid var(--wp--preset--color--rule);
		/* Set this small, in a narrow margin, Cormorant loses definition. */
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 400;
		line-height: 1.35;
		word-spacing: normal;
	}

	.wazuri-chapter--timeline > .wazuri-story-names strong {
		font-weight: 600;
	}

	.wazuri-chapter--timeline > .wazuri-story-names span {
		color: var(--wp--preset--color--accent);
		font-size: 0.8em;
		rotate: 90deg;
	}

	.wazuri-chapter--timeline > .wazuri-story-names + * {
		margin-block-start: 1.25rem;
	}

	/*
	 * "A Doorway Home": the phone on the left, the text keeping its 44rem and
	 * ending on the screenshots' right edge. The phone hangs into the margin.
	 */
	.wazuri-story-content.wazuri-story-content > .wazuri-chapter--reverse {
		display: grid;
		grid-template-columns: var(--wazuri-story-phone) var(--wazuri-story-text);
		column-gap: var(--wazuri-story-gap);
		width: calc(var(--wazuri-story-phone) + var(--wazuri-story-gap) + var(--wazuri-story-text));
		margin-inline-start: calc(var(--wazuri-story-grid) - var(--wazuri-story-phone) - var(--wazuri-story-gap) - var(--wazuri-story-text)) !important;
	}

	.wazuri-chapter--reverse > * {
		grid-column: 2;
	}

	.wazuri-chapter--reverse > .wazuri-story-phone {
		position: sticky;
		top: 2rem;
		grid-column: 1;
		grid-row: 1 / span 20;
		align-self: start;
		max-width: none;
		margin: 0;
	}

	.wazuri-chapter--reverse > .wazuri-story-phone + * {
		margin-block-start: 1.25rem;
	}
}

/* What is available now and what is still in development. */
.wazuri-story-content > .wazuri-story-status {
	margin-block-start: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
}

.wazuri-story-status .wp-block-columns {
	gap: var(--wp--preset--spacing--50);
	margin-block: 0;
}

.wazuri-story-status h3 {
	margin: 0;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wazuri-story-status ul {
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	list-style: none;
}

.wazuri-story-status li {
	position: relative;
	padding-inline-start: 1.25rem;
}

.wazuri-story-status li + li {
	margin-block-start: 0.6rem;
}

.wazuri-story-status li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.8em;
	width: 0.5rem;
	height: 1px;
	background: var(--wp--preset--color--accent);
}

.wazuri-story-status > .wazuri-story-asof {
	margin: var(--wp--preset--spacing--40) 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.wazuri-story-content > .wazuri-story-closing {
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--rule);
}

.wazuri-story-closing > .wazuri-story-statement {
	max-width: 18ch;
	margin-block-start: var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	font-style: italic;
	font-weight: 400;
	line-height: 1.1;
	text-wrap: balance;
}

.wazuri-story-closing > .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--50);
}

.wazuri-story-next {
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
}

.wazuri-story-next p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wazuri-story-next a {
	text-decoration: none;
}

.wazuri-story-next a:hover {
	text-decoration: underline;
}

.wazuri-story-next a::after {
	content: "\2192";
	content: "\2192" / "";
	margin-inline-start: 0.6em;
}

.wazuri-story-next .wazuri-story-back a::after {
	content: none;
}

@media (max-width: 599px) {
	.wazuri-story-content > .wazuri-story-status {
		padding: var(--wp--preset--spacing--40);
	}
}

/* ---------- Enlargeable screenshots and the viewer ---------- */

/*
 * The "Enlargeable screenshot" image style (functions.php, image-viewer.js).
 * A small Enlarge button rests just below the image's lower-right corner,
 * beside the caption, so it never covers part of the screenshot. It is always
 * visible (touchscreens have no hover) and a little stronger on hover and focus.
 */
.wazuri-enlarge {
	position: relative;
	display: block;
}

.wazuri-enlarge:has(.wazuri-enlarge__button:not([hidden])) img {
	cursor: zoom-in;
}

.wazuri-enlarge__button {
	position: absolute;
	inset-inline-end: 0;
	top: calc(100% + 0.5rem);
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 0;
	background-color: transparent;
	color: var(--wp--preset--color--muted);
	cursor: zoom-in;
	transition: border-color 0.2s ease, color 0.2s ease;
}

/* A 44px touch target around the smaller visible square. */
.wazuri-enlarge__button::before {
	content: "";
	position: absolute;
	inset: -0.25rem;
}

.wazuri-enlarge__button[hidden] {
	display: none;
}

.wazuri-enlarge:hover .wazuri-enlarge__button,
.wazuri-enlarge__button:hover,
.wazuri-enlarge__button:focus-visible {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-soft);
}

/* The caption keeps clear of the button. */
.wazuri-enlarge:has(.wazuri-enlarge__button:not([hidden])) + figcaption {
	padding-inline-end: 3rem;
}

.wazuri-enlarge:has(.wazuri-enlarge__button:not([hidden])):last-child {
	margin-block-end: 2.75rem;
}

/* While the viewer is open, the page behind stays still. */
html.wazuri-viewer-open {
	overflow: hidden;
}

.wazuri-viewer {
	box-sizing: border-box;
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.wazuri-viewer[open] {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
}

.wazuri-viewer::backdrop {
	background-color: rgb(0 0 0 / 0.5);
}

.wazuri-viewer__bar {
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
	padding: max(0.75rem, env(safe-area-inset-top)) max(var(--wp--style--root--padding-right), env(safe-area-inset-right)) 0.75rem max(var(--wp--style--root--padding-left), env(safe-area-inset-left));
}

.wazuri-viewer__bar button {
	display: inline-grid;
	place-items: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.wazuri-viewer__bar .wazuri-viewer__size {
	padding-inline: 1rem;
}

.wazuri-viewer__bar button[hidden] {
	display: none;
}

.wazuri-viewer__bar button:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-soft);
}

/* The image area: the image is centred, and scrolls when shown at actual size. */
.wazuri-viewer__stage {
	display: grid;
	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
	overflow: auto;
	overscroll-behavior: contain;
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
}

.wazuri-viewer__image {
	box-sizing: border-box;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	margin: auto;
	border: 1px solid var(--wp--preset--color--rule);
}

.wazuri-viewer.is-actual-size .wazuri-viewer__image {
	max-width: none;
	max-height: none;
}

.wazuri-viewer__stage:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -2px;
}

.wazuri-viewer__caption {
	max-width: 44rem;
	margin: 0 auto;
	padding: 0.75rem var(--wp--style--root--padding-right) max(1rem, env(safe-area-inset-bottom)) var(--wp--style--root--padding-left);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

.wazuri-viewer__caption[hidden] {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.wazuri-viewer[open] {
		animation: wazuri-viewer-in 0.2s ease-out;
	}
}

@keyframes wazuri-viewer-in {
	from {
		opacity: 0;
	}
}

/* ---------- Page not found ---------- */

.wazuri-not-found {
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--80);
}

.wazuri-not-found > * {
	margin-block: 0;
}

.wazuri-not-found > .wazuri-page-title {
	margin-block-start: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.04;
}

.wazuri-not-found > .wazuri-rule,
.wazuri-not-found > .wazuri-lead__text {
	margin-block-start: var(--wp--preset--spacing--40);
}

.wazuri-not-found > .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--50);
}

.wazuri-placeholder-note {
	padding-inline-start: 1rem;
	border-inline-start: 2px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--muted);
}