/*
Theme Name: Forge Agency
Theme URI: https://lockerforge.com
Author: Locker Forge
Author URI: https://lockerforge.com
Description: An FSE block theme for creative agencies and studios. Warm cream and near-black ink with a terracotta accent, Fraunces display over Inter body, hairline cards, one dark band, one signature forge mark. Twenty-one patterns, four style variations, no plugins required. Built for WordPress 7.1, PHP 8.0+.
Version: 0.1.7
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: forge-agency
Tags: one-column, two-columns, wide-blocks, block-patterns, block-styles, full-site-editing, editor-style, style-variations, custom-colors, custom-logo, custom-menu, featured-images, translation-ready, blog, portfolio
*/

/*
 * Forge Agency — style.css
 *
 * This file is deliberately small. The token system lives in theme.json:
 * palette, fonts, font sizes, spacing, shadows, radii, motion, buttons,
 * headings, links, quote, code, image radius, separator — all declared there
 * and NOT repeated here. What this file contains is only what theme.json
 * cannot express:
 *   - a modern box-model / margin reset
 *   - typographic finish (balanced headings, optical sizing, numerals,
 *     link underline geometry, selection colour)
 *   - focus-visible styling driven by the accent token
 *   - the sticky site header and navigation hover/current states
 *   - the theme's own header menu: drop-down panel, phone panel, toggle
 *   - form controls (text inputs, textarea, select, submit)
 *   - the WP button outline + ghost variants, with real hover/press states
 *   - table styling
 *   - header logo-only behavior (the text title hides once a logo is set)
 *   - the helper classes patterns reuse: .is-style-card,
 *     .is-style-card-shadow, .is-style-dark-band, .fa-card--featured,
 *     .fa-index, .fa-numeral, .fa-quote-mark, .fa-checklist, .fa-meta-row,
 *     .fa-work-card, .fa-footer-links, .fa-motif, .fa-motif--light,
 *     .fa-hairline, .fa-accent-bar, .screen-reader-text
 *   - phone-width refinements
 *
 * If you find a palette hex, a font-family, a font-size, a radius, a shadow,
 * a duration or a spacing value in this file that duplicates a theme.json
 * token, that is a bug — flag it.
 */

/* ---------------------------------------------------------------------------
 * Utility: values theme.json cannot express but we still want one source of
 * truth for. These are NOT design tokens; they are browser-mechanics values.
 * ------------------------------------------------------------------------- */
:where(:root) {
	--fa-focus-width: 2px;
	--fa-focus-offset: 3px;
	--fa-lift: -2px;
	--fa-nudge: 3px;
	--fa-tick-weight: 1.5px;
	--fa-transition: var(--wp--custom--motion--fast) var(--wp--custom--motion--ease);
	--fa-transition-slow: var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}

/* ---------------------------------------------------------------------------
 * Reset. Modern, minimal, doesn't fight theme.json.
 * ------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-optical-sizing: auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure,
blockquote,
pre,
dl,
dd {
	margin-block: 0;
}

ul,
ol {
	padding-inline-start: var(--wp--preset--spacing--50);
}

/* Unstyled lists for structural markup (nav, pagination, post templates) —
 * but never for list blocks people write in content, which keep their
 * markers. Before 0.1.1 this caught .wp-block-list too and stripped the
 * bullets from every list in every post. */
ul[class]:not(.wp-block-list),
ol[class]:not(.wp-block-list) {
	padding-inline-start: 0;
	list-style: none;
}

li::marker {
	color: var(--wp--preset--color--accent);
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}

figure {
	margin-inline: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

hr {
	border: 0;
	border-top: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border);
	margin-block: var(--wp--preset--spacing--50);
}

/* Template parts and <main> sit flush against each other: every section
 * carries its own vertical padding, so the root block gap would only add a
 * stray cream strip between a full-width band and the footer. */
.wp-site-blocks > * {
	margin-block: 0;
}

/* Respect reduced motion for every transition and lift in this file. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	/* F4: zeroed durations alone still let decorative transforms jump
	 * instantly on hover. Neutralise them; colour/border cues stay. */
	.is-style-card:has(.wp-block-post-title a, .wp-block-post-featured-image a):hover,
	.is-style-card:hover .wp-block-post-featured-image img,
	.fa-work-card:hover .wp-block-image img,
	.wp-element-button:active,
	.wp-block-button__link:active,
	.wp-block-read-more::after,
	.fa-menu-close:hover,
	.fa-header-cta .wp-block-button__link::after,
	.fa-menu-toggle:hover .fa-menu-toggle__icon::after {
		transform: none !important;
	}
}

/* ---------------------------------------------------------------------------
 * Typographic finish.
 * ------------------------------------------------------------------------- */
:where(h1, h2, h3, h4, h5, h6, .wp-block-post-title, .wp-block-query-title) {
	text-wrap: balance;
	font-kerning: normal;
}

:where(p, li, figcaption, blockquote) {
	text-wrap: pretty;
}

::selection {
	background-color: var(--wp--preset--color--accent-tint);
	color: var(--wp--preset--color--ink);
}

/* Underlines, when they appear (hover, focus, in-content links), sit clear of
 * descenders and match the hairline weight of the rest of the system. */
a {
	text-underline-offset: 0.22em;
	text-decoration-thickness: var(--wp--custom--border--hairline);
	transition: color var(--fa-transition), text-decoration-color var(--fa-transition);
}

/* Links inside running copy are always underlined, not colour-only —
 * colour alone is not enough of a cue (WCAG 1.4.1). */
:where(.wp-block-post-content, .wp-block-comment-content) :where(p, li) a:where(:not(.wp-element-button)) {
	text-decoration-line: underline;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}

:where(.wp-block-post-content, .wp-block-comment-content) :where(p, li) a:where(:not(.wp-element-button)):hover {
	text-decoration-color: currentColor;
}

/* The emphasised word in the hero heading: accent colour, no highlight. */
mark.has-inline-color {
	background-color: transparent;
}

/* ---------------------------------------------------------------------------
 * Focus. One source of truth. Applies to any focusable element that does not
 * already have a stronger, local focus style. The outline follows the
 * element's own radius, so buttons keep their 5px corners while focused.
 * ------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--fa-focus-width) solid var(--wp--preset--color--accent);
	outline-offset: var(--fa-focus-offset);
}

.is-style-dark-band :where(a, button, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--accent-tint);
}

/* ---------------------------------------------------------------------------
 * Site header. The template part wrapper sticks (an inner element can only
 * stick inside its own parent), solid surface so the mobile navigation
 * overlay — position: fixed — is never trapped by a backdrop filter.
 * ------------------------------------------------------------------------- */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	background: var(--wp--preset--color--surface-soft);
	transition: box-shadow var(--fa-transition), background-color var(--fa-transition);
}

/* P6 (0.1.4): once the page is scrolled, deepen the header hairline very
 * slightly and add a whisper of shadow. Tasteful, no heavy shadow, no blur.
 * The class is set by assets/js/menu.js. */
.wp-site-blocks > header.wp-block-template-part.fa-header-scrolled {
	box-shadow: 0 1px 2px rgba(26, 23, 20, 0.05), 0 10px 28px rgba(26, 23, 20, 0.07);
	background-color: color-mix(in srgb, var(--wp--preset--color--surface-soft) 94%, var(--wp--preset--color--border));
}

/* WP drops the admin bar from fixed to absolute under 600px; follow it. */
@media (max-width: 600px) {
	.wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

.wp-block-site-logo img {
	border-radius: var(--wp--custom--radius--sm);
}

/* Navigation: an underline that draws in from the left on hover, and a
 * permanent one under the current page. */
.wp-block-navigation .wp-block-navigation-item__content {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% var(--wp--custom--border--hairline);
	padding-block: 0.2em;
	transition: color var(--fa-transition), background-size var(--fa-transition-slow);
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation [aria-current="page"] {
	background-size: 100% var(--wp--custom--border--hairline);
}

.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation [aria-current="page"] {
	color: var(--wp--preset--color--accent);
}

/* P5 (0.1.4): desktop submenu ancestor gets the same accent treatment as
 * the current item when a descendant is the current page. */
.fa-menu-panel .fa-menu .has-child:has([aria-current="page"], .current-menu-item) > .wp-block-navigation-item__content {
	background-size: 100% var(--wp--custom--border--hairline);
	color: var(--wp--preset--color--accent);
}

.fa-menu-panel .fa-menu .has-child:has([aria-current="page"], .current-menu-item) > .wp-block-navigation-item__content:hover,
.fa-menu-panel .fa-menu .has-child:has([aria-current="page"], .current-menu-item) > .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--accent-hover);
}

/* The header call to action never breaks onto several lines, however
 * crowded the menu gets. */
.fa-header-cta .wp-block-button__link {
	white-space: nowrap;
}

/* P4 (0.1.4): a small arrow on the CTA that nudges on hover/focus. */
.fa-header-cta .wp-block-button__link::after {
	content: "\2192";
	display: inline-block;
	margin-inline-start: 0.4em;
	transition: transform var(--fa-transition);
}

.fa-header-cta .wp-block-button__link:hover::after,
.fa-header-cta .wp-block-button__link:focus-visible::after {
	transform: translateX(var(--fa-nudge));
}

/* ---------------------------------------------------------------------------
 * Header menu (0.1.3). The theme's own menu, desktop and phone — core's
 * overlay is never used (the header pattern sets "overlayMenu":"never").
 *
 *   - Markup: patterns/header.php groups the Navigation block and the call
 *     to action in .fa-menu-panel; inc/menu.php adds .fa-menu-toggle before
 *     it and .fa-menu-panel__head (label + close control) inside it.
 *   - Behaviour: assets/js/menu.js (aria-expanded, Escape, focus trap,
 *     focus return, scroll lock). It marks <html> with .fa-js.
 *   - 782px and up: inline links + call to action; sub-menus drop down as a
 *     cream panel with a terracotta left rule on the hovered/current item.
 *   - Below 782px: logo + "Menu" toggle only; the toggle opens a full-screen
 *     cream panel with roomy 44px rows and a full-width "Start a project".
 * ------------------------------------------------------------------------- */

/* The header row can never push the page sideways: the brand is the part
 * allowed to give, the controls keep their size. */
.fa-header-bar,
.fa-header-brand,
.fa-header-brand > .wp-block-site-logo {
	min-width: 0;
}

.fa-header-brand {
	flex-shrink: 1;
}

.fa-header-brand .wp-block-site-logo img {
	max-width: 100%;
	height: auto;
}

.fa-header-brand .wp-block-site-title {
	min-width: 0;
	overflow-wrap: break-word;
}

/* Added by inc/menu.php; only shown on phones once JavaScript is running. */
.fa-menu-toggle,
.fa-menu-panel__head {
	display: none;
}

/* Desktop drop-down panel. */
.fa-menu-panel .fa-menu .wp-block-navigation__submenu-icon {
	color: var(--wp--preset--color--ink-soft);
}

.fa-menu-panel .fa-menu.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	margin-top: var(--wp--preset--spacing--20);
	padding-block: var(--wp--preset--spacing--20);
	background-color: var(--wp--preset--color--surface-soft);
	color: var(--wp--preset--color--ink);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--preset--shadow--deep);
}

/* An invisible bridge over the gap above the panel, so the pointer can
 * travel from the parent link into the panel without it closing. */
.fa-menu-panel .fa-menu.wp-block-navigation .has-child .wp-block-navigation__submenu-container::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 100%;
	height: calc(var(--wp--preset--spacing--20) + var(--wp--custom--border--hairline));
}

/* Nested panels open to the side and need no bridge above them. */
.fa-menu-panel .fa-menu.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	margin-top: 0;
}

.fa-menu-panel .fa-menu.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container::after {
	display: none;
}

.fa-menu-panel .fa-menu.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-block: var(--wp--preset--spacing--20);
	padding-inline: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--snug);
	color: var(--wp--preset--color--ink);
	background-image: none;
	white-space: nowrap;
	transition: color var(--fa-transition), background-color var(--fa-transition), box-shadow var(--fa-transition);
}

.fa-menu-panel .fa-menu.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.fa-menu-panel .fa-menu.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible,
.fa-menu-panel .fa-menu.wp-block-navigation .has-child .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content,
.fa-menu-panel .fa-menu.wp-block-navigation .has-child .wp-block-navigation__submenu-container [aria-current="page"] {
	color: var(--wp--preset--color--accent-hover);
	background-color: var(--wp--preset--color--accent-tint);
	box-shadow: inset var(--wp--custom--border--accent-bar) 0 0 0 var(--wp--preset--color--accent);
}

.fa-menu-panel .fa-menu.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	outline-offset: calc(var(--fa-focus-width) * -1);
}

/* Escape pressed on an open drop-down (assets/js/menu.js). */
.fa-menu-panel .fa-menu.wp-block-navigation .has-child.fa-submenu-dismissed > .wp-block-navigation__submenu-container {
	visibility: hidden;
	opacity: 0;
}

@media (max-width: 781.98px) {
	/* The toggle: a pill with "Menu" and two staggered ink rules — the
	 * theme's own mark for a menu, not the stock three-bar icon. */
	.fa-js .fa-menu-toggle {
		display: inline-flex;
		flex-shrink: 0;
		align-items: center;
		gap: var(--wp--preset--spacing--20);
		min-height: 2.75rem;
		margin: 0;
		padding-block: 0;
		padding-inline: var(--wp--preset--spacing--40);
		border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-strong);
		border-radius: var(--wp--custom--radius--pill);
		background-color: transparent;
		color: var(--wp--preset--color--ink);
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--small);
		font-weight: var(--wp--custom--font-weight--medium);
		line-height: 1;
		white-space: nowrap;
		cursor: pointer;
		transition: color var(--fa-transition), border-color var(--fa-transition), background-color var(--fa-transition);
	}

	.fa-js .fa-menu-toggle:hover {
		color: var(--wp--preset--color--accent-hover);
		border-color: var(--wp--preset--color--accent);
	}

	.fa-menu-toggle__icon {
		position: relative;
		display: block;
		width: 1.125em;
		height: 0.625em;
	}

	.fa-menu-toggle__icon::before,
	.fa-menu-toggle__icon::after {
		content: "";
		position: absolute;
		inset-inline-end: 0;
		height: var(--fa-tick-weight);
		background-color: currentColor;
		border-radius: var(--wp--custom--radius--pill);
		transition: width var(--fa-transition-slow);
	}

	.fa-menu-toggle__icon::before {
		top: 0;
		width: 100%;
	}

	.fa-menu-toggle__icon::after {
		bottom: 0;
		width: 60%;
	}

	.fa-menu-toggle:hover .fa-menu-toggle__icon::after {
		width: 100%;
	}

	/* Panel closed: out of the header row entirely. */
	.fa-js .fa-menu-panel:not(.is-open) {
		display: none;
	}

	/* Panel open: a full-screen cream page of its own. */
	.fa-js .fa-menu-panel.is-open {
		position: fixed;
		inset: 0;
		z-index: 100000;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		margin: 0;
		padding-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
		padding-inline: var(--wp--preset--spacing--50);
		background-color: var(--wp--preset--color--surface-soft);
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		animation: fa-menu-in var(--fa-transition-slow) both;
	}

	/* P1 (0.1.4): where backdrop-filter is supported, the open panel is
	 * translucent cream with a gentle blur; otherwise it stays opaque. */
	@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		.fa-js .fa-menu-panel.is-open {
			background-color: rgba(247, 244, 240, 0.92);
			-webkit-backdrop-filter: blur(8px);
			backdrop-filter: blur(8px);
		}
	}

	.fa-menu-is-open,
	.fa-menu-is-open body {
		overflow: hidden;
	}

	.fa-js .fa-menu-panel.is-open .fa-menu-panel__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--30);
		margin: 0;
		padding-block-end: var(--wp--preset--spacing--30);
		border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border);
	}

	.fa-menu-panel__title {
		margin: 0;
		color: var(--wp--preset--color--ink-soft);
		font-size: var(--wp--preset--font-size--x-small);
		font-weight: var(--wp--custom--font-weight--semibold);
		letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
		text-transform: uppercase;
	}

	/* The close control: a hairline circle with a drawn cross. */
	.fa-menu-close {
		position: relative;
		display: inline-flex;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		margin: 0;
		padding: 0;
		border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-strong);
		border-radius: var(--wp--custom--radius--pill);
		background-color: transparent;
		color: var(--wp--preset--color--ink);
		cursor: pointer;
		transition: color var(--fa-transition), border-color var(--fa-transition), transform var(--fa-transition-slow);
	}

	.fa-menu-close:hover {
		color: var(--wp--preset--color--accent-hover);
		border-color: var(--wp--preset--color--accent);
		transform: rotate(90deg);
	}

	.fa-menu-close__icon {
		position: relative;
		display: block;
		width: 1rem;
		height: 1rem;
	}

	.fa-menu-close__icon::before,
	.fa-menu-close__icon::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		height: var(--fa-tick-weight);
		margin-top: calc(var(--fa-tick-weight) / -2);
		background-color: currentColor;
		border-radius: var(--wp--custom--radius--pill);
	}

	.fa-menu-close__icon::before {
		transform: rotate(45deg);
	}

	.fa-menu-close__icon::after {
		transform: rotate(-45deg);
	}

	/* Menu items: Inter, one per row, full width, never past the edge. */
	.fa-js .fa-menu-panel.is-open .fa-menu.wp-block-navigation {
		display: block;
		width: 100%;
		margin: 0;
		padding-block-start: var(--wp--preset--spacing--20);
	}

	.fa-js .fa-menu-panel.is-open .fa-menu .wp-block-navigation__container,
	.fa-js .fa-menu-panel.is-open .fa-menu .wp-block-page-list,
	.fa-js .fa-menu-panel.is-open .fa-menu .wp-block-navigation__submenu-container {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		width: 100%;
		margin: 0;
		padding: 0;
	}

	.fa-js .fa-menu-panel.is-open .fa-menu .wp-block-navigation-item {
		display: block;
		width: 100%;
		min-width: 0;
	}

	.fa-js .fa-menu-panel.is-open .fa-menu .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 2.75rem;
		padding-block: var(--wp--preset--spacing--20);
		padding-inline: var(--wp--preset--spacing--30);
		border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border);
		color: var(--wp--preset--color--ink);
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--heading-4);
		font-weight: var(--wp--custom--font-weight--medium);
		line-height: var(--wp--custom--line-height--snug);
		letter-spacing: normal;
		white-space: normal;
		overflow-wrap: anywhere;
		background-image: none;
		transition: color var(--fa-transition), background-color var(--fa-transition), box-shadow var(--fa-transition);
	}

	.fa-js .fa-menu-panel.is-open .fa-menu .wp-block-navigation-item__content:hover,
	.fa-js .fa-menu-panel.is-open .fa-menu .wp-block-navigation-item__content:focus-visible,
	.fa-js .fa-menu-panel.is-open .fa-menu .current-menu-item > .wp-block-navigation-item__content,
	.fa-js .fa-menu-panel.is-open .fa-menu [aria-current="page"] {
		color: var(--wp--preset--color--accent-hover);
		background-color: var(--wp--preset--color--accent-tint);
		box-shadow: inset var(--wp--custom--border--accent-bar) 0 0 0 var(--wp--preset--color--accent);
	}

	.fa-js .fa-menu-panel.is-open .fa-menu .wp-block-navigation-item__content:focus-visible {
		outline-offset: calc(var(--fa-focus-width) * -1);
	}

	/* Sub-menus sit open and indented under their parent in the panel. */
	.fa-js .fa-menu-panel.is-open .fa-menu .has-child .wp-block-navigation__submenu-container {
		position: static;
		visibility: visible;
		opacity: 1;
		width: 100%;
		min-width: 0;
		height: auto;
		overflow: visible;
		padding-inline-start: var(--wp--preset--spacing--40);
		border: 0;
		border-radius: 0;
		background-color: transparent;
		box-shadow: none;
	}

	.fa-js .fa-menu-panel.is-open .fa-menu .has-child .wp-block-navigation__submenu-container::after {
		display: none;
	}

	.fa-js .fa-menu-panel.is-open .fa-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		color: var(--wp--preset--color--ink-soft);
		font-size: var(--wp--preset--font-size--body);
	}

	.fa-js .fa-menu-panel.is-open .fa-menu .wp-block-navigation__submenu-icon,
	.fa-js .fa-menu-panel.is-open .fa-menu .wp-block-navigation-submenu__toggle {
		display: none;
	}

	/* "Start a project": full-width terracotta button in the panel. */
	.fa-js .fa-menu-panel.is-open .fa-header-cta {
		display: flex;
		width: 100%;
		margin: 0;
		padding-block-start: var(--wp--preset--spacing--50);
	}

	.fa-js .fa-menu-panel.is-open .fa-header-cta .wp-block-button {
		flex: 1 1 100%;
		width: 100%;
	}

	.fa-js .fa-menu-panel.is-open .fa-header-cta .wp-block-button__link {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 3rem;
		padding-block: var(--wp--preset--spacing--30);
		padding-inline: var(--wp--preset--spacing--40);
		font-size: var(--wp--preset--font-size--body);
		text-align: center;
		white-space: normal;
	}

	/* Without JavaScript: no toggle, so the menu and the call to action wrap
	 * onto their own full-width row under the logo instead of crowding it. */
	html:not(.fa-js) .fa-header-bar {
		flex-wrap: wrap;
	}

	html:not(.fa-js) .fa-menu-panel {
		flex: 1 1 100%;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	html:not(.fa-js) .fa-menu-panel .fa-menu .wp-block-navigation__container,
	html:not(.fa-js) .fa-menu-panel .fa-menu .wp-block-page-list {
		justify-content: flex-start;
	}
}

@keyframes fa-menu-in {
	from {
		opacity: 0;
		transform: translateY(calc(var(--fa-nudge) * -2));
	}

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

/* ---------------------------------------------------------------------------
 * Forms. theme.json does not style form controls; this is the one place they
 * get the hairline + 5px radius + token spacing.
 * ------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
textarea,
select {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--snug);
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--surface);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--md);
	padding-block: var(--wp--preset--spacing--30);
	padding-inline: var(--wp--preset--spacing--40);
	width: 100%;
	max-width: 100%;
	transition: border-color var(--fa-transition), box-shadow var(--fa-transition);
}

textarea {
	min-height: 8rem;
	resize: vertical;
}

select {
	padding-inline-end: var(--wp--preset--spacing--60);
	background-image: linear-gradient(45deg, transparent 50%, var(--wp--preset--color--ink-soft) 50%),
		linear-gradient(135deg, var(--wp--preset--color--ink-soft) 50%, transparent 50%);
	background-position: calc(100% - 1.25em) center, calc(100% - 0.85em) center;
	background-size: 0.4em 0.4em, 0.4em 0.4em;
	background-repeat: no-repeat;
	appearance: none;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="url"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="date"]:hover,
input[type="time"]:hover,
input[type="datetime-local"]:hover,
input[type="month"]:hover,
input[type="week"]:hover,
textarea:hover,
select:hover {
	border-color: var(--wp--preset--color--ink-soft);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
textarea:focus,
select:focus {
	outline: var(--fa-focus-width) solid var(--wp--preset--color--accent);
	outline-offset: 0;
	border-color: var(--wp--preset--color--accent);
}

input::placeholder,
textarea::placeholder {
	color: var(--wp--preset--color--ink-soft);
	opacity: 1;
}

input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--wp--preset--color--accent);
	width: 1rem;
	height: 1rem;
}

input[type="submit"],
button[type="submit"],
.wp-block-search__button,
.wp-block-post-comments-form input[type="submit"] {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--tight);
	color: var(--wp--preset--color--near-white);
	background-color: var(--wp--preset--color--accent);
	border: 0;
	border-radius: var(--wp--custom--radius--md);
	padding-block: var(--wp--preset--spacing--30);
	padding-inline: var(--wp--preset--spacing--40);
	cursor: pointer;
	transition: background-color var(--fa-transition);
	width: auto;
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.wp-block-search__button:hover,
.wp-block-post-comments-form input[type="submit"]:hover {
	background-color: var(--wp--preset--color--accent-hover);
}

input[type="submit"]:focus-visible,
button[type="submit"]:focus-visible,
.wp-block-search__button:focus-visible,
.wp-block-post-comments-form input[type="submit"]:focus-visible {
	outline: var(--fa-focus-width) solid var(--wp--preset--color--ink);
	outline-offset: var(--fa-focus-offset);
}

.wp-block-search__button svg {
	fill: currentColor;
}

input:disabled,
textarea:disabled,
select:disabled,
button:disabled,
input[type="submit"]:disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--font-weight--medium);
	color: var(--wp--preset--color--ink);
	margin-block-end: var(--wp--preset--spacing--20);
}

/* ---------------------------------------------------------------------------
 * Buttons. The default look (terracotta fill, 5px radius, medium weight,
 * hover → accent-hover) is declared in theme.json. This adds motion, a
 * pressed state, and the two variants patterns reuse.
 * ------------------------------------------------------------------------- */
.wp-element-button,
.wp-block-button__link {
	transition: background-color var(--fa-transition), color var(--fa-transition),
		border-color var(--fa-transition), transform var(--fa-transition);
}

.wp-element-button:active,
.wp-block-button__link:active {
	transform: translateY(1px);
}

.wp-block-button.is-style-outline .wp-block-button__link,
.wp-element-button.is-style-outline {
	background-color: transparent;
	color: var(--wp--preset--color--accent);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--md);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus,
.wp-element-button.is-style-outline:hover,
.wp-element-button.is-style-outline:focus {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--near-white);
	border-color: var(--wp--preset--color--accent);
}

.wp-block-button.is-style-ghost .wp-block-button__link,
.wp-element-button.is-style-ghost {
	background-color: transparent;
	color: var(--wp--preset--color--ink);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--md);
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-ghost .wp-block-button__link:focus,
.wp-element-button.is-style-ghost:hover,
.wp-element-button.is-style-ghost:focus {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}

/* Read-more links carry a small arrow that steps forward on hover. */
.wp-block-read-more {
	text-decoration: none;
}

.wp-block-read-more::after {
	content: "\2192";
	display: inline-block;
	margin-inline-start: 0.4em;
	transition: transform var(--fa-transition);
}

/* Core gives read-more `width: fit-content`, so inside a constrained group
 * the layout's auto margins centred it under left-aligned card copy. */
.is-layout-constrained > .wp-block-read-more {
	margin-inline-start: 0 !important;
}

.wp-block-read-more:hover::after,
.wp-block-read-more:focus-visible::after {
	transform: translateX(var(--fa-nudge));
}

/* Pagination: numbers as quiet squares, current page in ink. */
.wp-block-query-pagination-numbers .page-numbers {
	display: inline-block;
	min-width: 2.25em;
	padding: 0.35em 0.5em;
	text-align: center;
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--near-white);
}

.wp-block-query-pagination a:hover {
	color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------------------
 * Tables.
 * ------------------------------------------------------------------------- */
table {
	width: 100%;
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
}

th,
td {
	padding-block: var(--wp--preset--spacing--30);
	padding-inline: var(--wp--preset--spacing--40);
	border-block-end: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border);
	text-align: start;
	vertical-align: top;
}

thead th {
	background-color: var(--wp--preset--color--surface-muted);
	color: var(--wp--preset--color--ink);
	font-weight: var(--wp--custom--font-weight--semibold);
}

tbody tr:hover {
	background-color: var(--wp--preset--color--surface-soft);
}

caption {
	caption-side: bottom;
	padding-block-start: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--ink-soft);
	text-align: start;
}

/* ---------------------------------------------------------------------------
 * Card style. One definition, reused by every pattern that renders a card.
 * House rules encoded here: hairline border, 5px radius, generous padding,
 * NO default shadow (David's bar: default card has no shadow; shadows are
 * opt-in via .is-style-card-shadow). Cards that link somewhere (post cards,
 * work cards) lift a hair on hover; static cards never move.
 * ------------------------------------------------------------------------- */
.is-style-card {
	background-color: var(--wp--preset--color--surface);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--50);
	transition: border-color var(--fa-transition-slow), box-shadow var(--fa-transition-slow),
		transform var(--fa-transition-slow);
}

.is-style-card:focus-within {
	border-color: var(--wp--preset--color--border-strong);
}

.is-style-card:has(.wp-block-post-title a, .wp-block-post-featured-image a):hover {
	border-color: var(--wp--preset--color--border-strong);
	box-shadow: var(--wp--preset--shadow--card-hover);
	transform: translateY(var(--fa-lift));
}

.is-style-card-shadow {
	box-shadow: var(--wp--preset--shadow--card);
}

.is-style-card-shadow:focus-within {
	box-shadow: var(--wp--preset--shadow--card-hover);
}

/* The one highlighted card in a set (pricing middle tier, "what's inside"
 * middle card): accent-tinted border, a 3px accent bar on top, deep shadow. */
.fa-card--featured {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 35%, var(--wp--preset--color--border));
	box-shadow: inset 0 var(--wp--custom--border--accent-bar) 0 var(--wp--preset--color--accent),
		var(--wp--preset--shadow--deep);
}

/* Cards that end in a button row (pricing tiers) pin that row to the bottom,
 * so the actions line up across a grid of uneven copy. */
.is-style-card:has(> .wp-block-buttons:last-child) {
	display: flex;
	flex-direction: column;
}

/* In a flex column the constrained layout's auto inline margins would
 * shrink-wrap and centre every child; keep them on the card's left edge. */
.is-style-card:has(> .wp-block-buttons:last-child) > * {
	margin-inline: 0 !important;
}

.is-style-card > .wp-block-buttons:last-child {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--40);
}

/* Inside a card the featured image sits on a tighter radius than the card
 * itself would suggest, so the nested corners read as concentric. */
.is-style-card .wp-block-post-featured-image {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--sm);
}

.is-style-card .wp-block-post-featured-image img {
	border-radius: var(--wp--custom--radius--sm);
	transition: transform var(--fa-transition-slow);
}

.is-style-card:hover .wp-block-post-featured-image img {
	transform: scale(1.025);
	filter: brightness(1.02);
}

/* ---------------------------------------------------------------------------
 * Editorial details patterns reuse.
 * ------------------------------------------------------------------------- */

/* Eyebrow: the small uppercase label over every section heading. The inline
 * letter-spacing/uppercase on static eyebrows stays editable per block; this
 * class carries the weight, and the whole treatment for dynamic blocks
 * (post date) where the server would drop a var:custom value. */
.fa-eyebrow {
	font-weight: var(--wp--custom--font-weight--semibold);
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
	line-height: var(--wp--custom--line-height--snug);
}

/* P7 (0.1.4): cap the hero H1 measure so it never runs edge to edge.
 * Scoped to hero headings; post titles keep their balanced wrap. */
.wp-block-group > h1.wp-block-heading:first-child,
.fa-hero-title {
	max-width: 24ch;
}

/* Hero lede: a comfortable measure, never the full display width. */
.wp-block-group > .fa-lede {
	max-width: 38rem;
	line-height: var(--wp--custom--line-height--snug);
}

/* Blog home title. The query title is empty on the posts page, so the
 * archive header pattern carries its own translatable heading, shown only
 * where WordPress marks the page as the blog index. */
body:not(.blog) .fa-blog-title {
	display: none;
}

/* Long-form rhythm: section headings in running copy get more air above
 * than the paragraph gap, so the structure reads at a glance. */
.wp-block-post-content > :where(h2, h3, h4) {
	margin-block-start: var(--wp--preset--spacing--60);
}

.wp-block-post-content > :where(h2, h3, h4) + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* Testimonial attribution name. */
.fa-name {
	font-weight: var(--wp--custom--font-weight--semibold);
}

/* Separators are hairlines across their container. Core's block theme
 * styles cap the default separator at 100px and give it a 2px rule; this
 * system wants a full-width 1px line. Dots and wide styles keep core's. */
/* 0.1.2: the selector carries the same weight as core's
 * `.wp-block-separator:not(.is-style-wide):not(.is-style-dots)` 100px cap and
 * comes later, so it actually wins (in 0.1.1 it lost and stayed a stub). */
.wp-block-separator:not(.is-style-dots):not(.is-style-wide),
.wp-block-separator.is-style-wide {
	border: 0;
	border-block-start: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border);
	width: 100%;
	opacity: 1;
}

/* Card index numeral ("01") with a hairline rule under it. */
.fa-index {
	font-family: var(--wp--preset--font-family--display);
	font-weight: var(--wp--custom--font-weight--medium);
	font-variant-numeric: lining-nums tabular-nums;
	line-height: var(--wp--custom--line-height--tight);
	padding-block-end: var(--wp--preset--spacing--30);
	border-block-end: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border);
}

/* Big display numerals (stats band, 404). */
.fa-numeral {
	font-family: var(--wp--preset--font-family--display);
	font-weight: var(--wp--custom--font-weight--regular);
	font-variant-numeric: lining-nums tabular-nums;
	line-height: var(--wp--custom--line-height--display);
	letter-spacing: var(--wp--custom--letter-spacing--display);
}

/* Oversized opening quote glyph on testimonial cards. */
.fa-quote-mark {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-1);
	font-weight: var(--wp--custom--font-weight--regular);
	color: var(--wp--preset--color--accent);
	line-height: 1;
	height: 0.5em;
	overflow: visible;
}

/* Feature lists in pricing cards: an accent tick instead of a bullet. */
.wp-block-list.fa-checklist {
	list-style: none;
	padding-inline-start: 0;
}

.wp-block-list.fa-checklist > li {
	position: relative;
	padding-inline-start: 1.6em;
}

.wp-block-list.fa-checklist > li + li {
	margin-block-start: var(--wp--preset--spacing--20);
}

.wp-block-list.fa-checklist > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.15em;
	top: 0.38em;
	width: 0.7em;
	height: 0.38em;
	border-inline-start: var(--fa-tick-weight) solid var(--wp--preset--color--accent);
	border-block-end: var(--fa-tick-weight) solid var(--wp--preset--color--accent);
	transform: rotate(-45deg);
}

/* Hairline-topped meta row under the hero. */
.fa-meta-row > * {
	position: relative;
}

.fa-meta-row > * + *::before {
	content: "";
	display: inline-block;
	width: 0.3em;
	height: 0.3em;
	margin-inline-end: var(--wp--preset--spacing--30);
	vertical-align: middle;
	background-color: var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--pill);
}

/* Work grid: project card with a framed image and a caption row. */
.fa-work-card .wp-block-image {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border);
}

.fa-work-card .wp-block-image img {
	width: 100%;
	border-radius: 0;
	transition: transform var(--fa-transition-slow);
}

.fa-work-card:hover .wp-block-image img {
	transform: scale(1.02);
}

/* ---------------------------------------------------------------------------
 * The one dark band. Used by the stats band pattern and nothing else.
 * Anything inside inherits the near-white text; links switch to accent-tint
 * for contrast against ink, hover to near-white.
 * ------------------------------------------------------------------------- */
.is-style-dark-band {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--near-white);
}

.is-style-dark-band :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--near-white);
}

.is-style-dark-band :where(a) {
	color: var(--wp--preset--color--accent-tint);
	text-decoration: none;
}

.is-style-dark-band :where(a):hover,
.is-style-dark-band :where(a):focus {
	color: var(--wp--preset--color--near-white);
	text-decoration: underline;
}

.is-style-dark-band hr,
.is-style-dark-band .wp-block-separator:not(.is-style-dots) {
	border-color: var(--wp--preset--color--ink-soft);
}

/* Supporting copy on ink steps back so the numerals lead. */
.is-style-dark-band :where(.has-small-font-size) {
	color: color-mix(in srgb, var(--wp--preset--color--near-white) 72%, var(--wp--preset--color--ink));
}

.is-style-dark-band :where(.has-x-small-font-size) {
	color: var(--wp--preset--color--accent-tint);
}

/* ---------------------------------------------------------------------------
 * Header: logo-only when a logo is set. The header pattern places the site
 * logo and the site title side by side; when a logo image exists the wordmark
 * speaks for itself, so the text title hides. With no logo set the site-logo
 * block renders nothing, :has(img) does not match, and the title stays —
 * the site still has a name. Scoped to the adjacent pair so the footer
 * site-title (which has no logo sibling) is never affected.
 * ------------------------------------------------------------------------- */
.wp-block-site-logo:has(img) + .wp-block-site-title {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Footer link columns: right-aligned beside the brand on wide screens,
 * left-aligned under it once they wrap.
 * ------------------------------------------------------------------------- */
.fa-footer-links a.wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
	text-decoration-thickness: var(--wp--custom--border--hairline);
	text-underline-offset: 0.22em;
}

.fa-footer-links a.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent);
	text-decoration-color: currentColor;
}

/* ---------------------------------------------------------------------------
 * Signature forge mark. Consumes the SVG declared once in theme.json under
 * custom.motif.mark. Sized in em so it tracks the surrounding text. Decorative
 * by default — patterns should include it with aria-hidden="true".
 * ------------------------------------------------------------------------- */
.fa-motif {
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	background-color: currentColor;
	-webkit-mask-image: var(--wp--custom--motif--mark);
	mask-image: var(--wp--custom--motif--mark);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	color: var(--wp--preset--color--accent);
	vertical-align: middle;
	flex-shrink: 0;
	/* The mark is painted with `currentColor` through a CSS mask, so it
	   really does take the accent token — and recolours with `color`.
	   (Until 0.1.1 it was a background-image: a data-URI SVG cannot see the
	   page's currentColor, so the mark always rendered black.) */
}

.fa-motif--light {
	color: var(--wp--preset--color--accent-tint);
}

/* The 3px accent bar. One token, used wherever a pattern wants that finish
 * (pull-quote, section markers). Never a literal 3px. */
.fa-accent-bar {
	border-inline-start: var(--wp--custom--border--accent-bar) solid var(--wp--preset--color--accent);
	padding-inline-start: var(--wp--preset--spacing--50);
}

/* Single-pixel separator where core/separator is overkill. */
.fa-hairline {
	border-block-start: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border);
}

/* ---------------------------------------------------------------------------
 * Phone width. Most of the system is fluid already (clamp() type and space,
 * grid columns with a minimum width); these are the few places a phone needs
 * a different decision, not just a smaller size.
 * ------------------------------------------------------------------------- */
@media (max-width: 600px) {
	/* Primary actions in page content go full-width: easy thumbs, clean edge. */
	main .wp-block-buttons > .wp-block-button {
		flex: 1 1 100%;
	}

	main .wp-block-buttons > .wp-block-button .wp-block-button__link {
		width: 100%;
		text-align: center;
	}

	.fa-footer-links {
		justify-content: flex-start !important;
	}

	.fa-meta-row {
		flex-direction: column;
		align-items: flex-start !important;
	}

	.fa-meta-row > * + *::before {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * Screen reader text — standard WP-compatible implementation. Hidden
 * visually, revealed on focus. Patterns should use this class for "skip to
 * content" and any label a sighted user reads from layout instead.
 * ------------------------------------------------------------------------- */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--preset--shadow--card-hover);
	clip-path: none;
	color: var(--wp--preset--color--ink);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--font-weight--medium);
	height: auto;
	left: var(--wp--preset--spacing--40);
	line-height: var(--wp--custom--line-height--normal);
	padding-block: var(--wp--preset--spacing--30);
	padding-inline: var(--wp--preset--spacing--40);
	text-decoration: none;
	top: var(--wp--preset--spacing--40);
	width: auto;
	z-index: 100000;
}

/* ---------------------------------------------------------------------------
 * Skip link. Same treatment as .screen-reader-text:focus but the standard
 * entry point. Patterns include it as the first focusable element.
 * ------------------------------------------------------------------------- */
.skip-link.screen-reader-text:focus {
	outline: var(--fa-focus-width) solid var(--wp--preset--color--accent);
	outline-offset: var(--fa-focus-offset);
}

/* --- 0.1.5: Billboard slider --- */

/* The track stacks slides as siblings; JS shows one. Without JS every slide
 * is visible and stacked (never display:none content without JS), so the
 * pattern renders complete on first paint and in the Site Editor. */
.fa-billboard {
	overflow-x: clip;
	/* Inset the full-bleed section so the slides read as the rounded cards
	 * their radius token intends, and the controls row shares the inset
	 * instead of running to the viewport edge (first dot clipped on phones). */
	padding-left: max(var(--wp--preset--spacing--60), calc((100% - var(--wp--style--global--wide-size)) / 2 + var(--wp--style--root--padding-left, 0px)));
	padding-right: max(var(--wp--preset--spacing--60), calc((100% - var(--wp--style--global--wide-size)) / 2 + var(--wp--style--root--padding-left, 0px)));
}

.fa-billboard__track {
	position: relative;
	display: grid;
	grid-template-areas: "slide";
}

/* Shared min-height across slides so switching never shifts layout. The
 * clamp uses existing spacing tokens (no new numeric literals). */
.fa-billboard__slide {
	grid-area: slide;
	position: relative;
	overflow: hidden;
	align-content: center;
	min-height: clamp(26rem, 22rem + 12vw, 40rem);
}

/* Crossfade only between siblings when JS is driving (the theme's .fa-js
 * flag is set by the menu enqueue; the slider script itself adds
 * .fa-billboard--ready to the root on boot). */
.fa-js .fa-billboard--ready .fa-billboard__slide {
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--fa-transition-slow), visibility 0s linear var(--wp--custom--motion--base, 0.45s);
}

.fa-js .fa-billboard--ready .fa-billboard__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--fa-transition-slow), visibility 0s;
}

/* Reduced motion: instant switch, no fade, no autoplay (script handles the
 * latter). */
@media (prefers-reduced-motion: reduce) {
	.fa-js .fa-billboard--ready .fa-billboard__slide,
	.fa-js .fa-billboard--ready .fa-billboard__slide.is-active {
		transition: none;
	}
}

/* The photo: the Cover block's own background image fills the slide behind
 * the panel. With no photo set, the slide's surface-muted background shows. */
.fa-billboard__slide > img.wp-block-cover__image-background {
	object-fit: cover;
}

/* The cover overlay sits between the image and the text. */
.fa-billboard__slide > .wp-block-cover__background {
	z-index: 1;
}

.fa-billboard__slide > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
}

/* The text panel: warm cream, soft radius, generous padding. Only existing
 * tokens; no new hex values. */
.fa-billboard__panel {
	max-width: 100%;
	/* The panel is a light surface; pin its text to ink. Core Cover styles
	 * default cover content to white (it usually sits on a photo) — without
	 * this the slide headings render white on the cream panel. */
	color: var(--wp--preset--color--ink);
}

/* Controls row: quiet dots on the left, hairline arrows on the right. */
.fa-billboard__dots {
	margin: 0;
}

.fa-billboard__dot {
	display: inline-block;
	width: 0.75rem;
	height: 0.75rem;
	margin: 0;
	padding: 0;
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--pill);
	background-color: transparent;
	cursor: pointer;
	transition: background-color var(--fa-transition), border-color var(--fa-transition), transform var(--fa-transition);
}

.fa-billboard__dot:hover {
	border-color: var(--wp--preset--color--accent);
}

.fa-billboard__dot.is-active {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	transform: scale(1.15);
}

.fa-billboard__dot:focus-visible {
	outline: var(--fa-focus-width) solid var(--wp--preset--color--accent);
	outline-offset: var(--fa-focus-offset);
}

.fa-billboard__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0;
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--surface-soft);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	transition: background-color var(--fa-transition), border-color var(--fa-transition), color var(--fa-transition);
}

.fa-billboard__arrow:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.fa-billboard__arrow:focus-visible {
	outline: var(--fa-focus-width) solid var(--wp--preset--color--accent);
	outline-offset: var(--fa-focus-offset);
}

/* 0.1.6: a slide with no photo shows its warm surface, not a dimmed grey
 * (the ink overlay exists to protect text on photos; the text sits on its own
 * panel, so without a photo the overlay only muddies the ground). The panel
 * lifts off the ground with the token card shadow instead. */
.fa-billboard__slide.wp-block-cover:not(:has(img.wp-block-cover__image-background, video.wp-block-cover__video-background)) > .wp-block-cover__background.has-background-dim {
	opacity: 0;
}

.fa-billboard__panel {
	box-shadow: var(--wp--preset--shadow--deep);
}

/* A photo-less slide carries the forge mark, large and quiet, on the open
 * side of the slide instead of leaving it blank. Decorative only. */
.fa-billboard__slide:not(:has(img.wp-block-cover__image-background, video.wp-block-cover__video-background))::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-end: var(--wp--preset--spacing--70);
	width: min(26rem, 32%);
	background-color: var(--wp--preset--color--border);
	-webkit-mask-image: var(--wp--custom--motif--mark);
	mask-image: var(--wp--custom--motif--mark);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	pointer-events: none;
}

@media (max-width: 782px) {
	.fa-billboard__slide:not(:has(img.wp-block-cover__image-background, video.wp-block-cover__video-background))::after {
		display: none;
	}
}

/* Phone: tighten the billboard's side padding so the panel keeps its room. */
@media (max-width: 480px) {
	.fa-billboard {
		padding-left: var(--wp--preset--spacing--40);
		padding-right: var(--wp--preset--spacing--40);
	}

	.fa-billboard__slide {
		padding-left: var(--wp--preset--spacing--40) !important;
		padding-right: var(--wp--preset--spacing--40) !important;
	}
}

/* --- 0.1.6: final polish --- */

/* Phone: every work card captions the same way. Before, a long discipline
 * ("Web design and development") wrapped under its title while short ones sat
 * on the right, so neighbouring cards looked unrelated. */
@media (max-width: 600px) {
	.fa-work-card > .wp-block-group.is-layout-flex {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--20);
	}
}