/*
Theme Name: Sam Siam
Theme URI: https://samsiam.eu
Author: Sam Siam Ltd
Description: Custom theme for Sam Siam Ltd, trading as The Sam Siam Practice.
Version: 0.1.6
Requires at least: 6.5
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: sam-siam
*/

/*
 * Supplementary rules for what theme.json cannot express directly.
 * Color, type, spacing, radii and motion values below are pulled from the
 * Sam Siam design tokens (assets/css/sam-siam-tokens.css), enqueued before
 * this file — not from theme.json's generated custom properties. theme.json
 * exists to drive the block editor's own colour/typography pickers; this
 * stylesheet is the hand-authored layer and reads the same tokens directly.
 */

/* Keyboard-only focus ring, using the brand's clay focus token. :focus-visible
   keeps it from flashing on mouse clicks while still satisfying WCAG 2.4.7. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: 2px solid var(--border-focus);
	outline-offset: 2px;
}

/* Explicit "no shadows" backstop for the button system, in case a
   browser or block-style variation introduces a default box-shadow. */
.wp-element-button,
.wp-block-button__link {
	box-shadow: none;
}

/*
 * Standard WordPress/underscores accessibility utility. Values here (1px,
 * -1px, 5px, z-index 100000) are the long-established WP convention, not
 * design tokens — colors/spacing inside :focus are pulled from the tokens.
 */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--bg-surface);
	color: var(--text-display);
	display: block;
	font-size: var(--fs-body-sm);
	height: auto;
	left: 5px;
	line-height: normal;
	padding: var(--space-3) var(--space-4);
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Understated hover/focus transitions only, and only when motion is welcome.
   Duration and ease are the brand's standard interaction pair. */
@media (prefers-reduced-motion: no-preference) {
	a,
	.wp-element-button,
	.ss-link-arrow .wp-block-button__link::after {
		transition: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard), text-decoration-color var(--dur-fast) var(--ease-standard);
	}
}

/*
 * True mono eyebrows: the section eyebrow, quote/attribution captions, the
 * Areas of Practice folio numbers, and the practice-area group labels. Per
 * the brand's writing standards, uppercase appears in exactly one place —
 * the mono eyebrow at 12px with 0.14em tracking — so this treatment is
 * intentionally scoped to these four caption-like roles only. Nav links,
 * the wordmark and the arrow-link CTA are sentence/title case and styled
 * separately below.
 */
.ss-eyebrow,
.ss-quote__meta,
.ss-areas__number,
.ss-practice-area__group-label {
	font-family: var(--font-mono);
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
}

/*
 * Shared "editorial arrow link" treatment, applied to core/button blocks
 * carrying the ss-link-arrow className: strips the theme's default filled
 * button look (background/border/padding from theme.json) back down to
 * restrained ink-colored text with an underline and a small clay arrow —
 * the "one accent per view" interaction style used for every text-link
 * CTA in the reference (hero, Challenge, Practice, product feature). Kept
 * distinct from plain .wp-element-button, which stays available as the
 * theme's filled-button system for any other use.
 */
.ss-link-arrow .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	background: none;
	color: var(--text-display);
	font-size: var(--fs-body-sm);
	/* Zero horizontal padding keeps the understated text-link look; the
	   vertical padding is a deliberate tap-target concession (~27px tall
	   with this font-size) rather than relying on the underlined text's
	   bare line-height alone. */
	padding-block: 0.375em;
	padding-inline: 0;
	border-width: 0;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* The arrow is a supplementary directional cue, not essential content — the
   link's own text already states the action, so this is safe as generated
   content rather than real text. */
.ss-link-arrow .wp-block-button__link::after {
	content: "\2192";
	color: var(--text-accent);
}

.ss-link-arrow .wp-block-button__link:hover,
.ss-link-arrow .wp-block-button__link:focus {
	color: var(--text-accent);
}

/* Reused by every section eyebrow (Hero, Challenge, Practice, Areas of
   Practice, Product Feature) — color is the one thing that varies by
   context (e.g. inverted on the dark Practice panel), so it's set per
   section below rather than here. */
.ss-eyebrow {
	margin: 0 0 var(--space-3);
	color: var(--text-muted);
}

/*
 * Container inline padding for every full-bleed section's inner wrapper:
 * the brand's gutter, widened above the 1200px breakpoint. Listed once here
 * rather than repeated in each section below.
 */
.site-header__inner,
.site-footer__inner,
.ss-quote__inner,
.ss-areas__inner,
.ss-product__inner,
.ss-thinking__inner,
.ss-invitation__inner,
.ss-passage__inner,
.ss-practice-area__inner {
	padding-inline: var(--gutter);
}

@media (min-width: 1200px) {
	.site-header__inner,
	.site-footer__inner,
	.ss-quote__inner,
	.ss-areas__inner,
	.ss-product__inner,
	.ss-thinking__inner,
	.ss-invitation__inner,
	.ss-passage__inner,
	.ss-practice-area__inner {
		padding-inline: var(--gutter-lg);
	}
}

/* ==========================================================================
   Global header, primary navigation, mobile navigation
   ========================================================================== */

.site-header {
	background-color: var(--bg-surface);
	border-bottom: 1px solid var(--border-hairline);
}

.site-header__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	/* Bumped from a tighter value: with a smaller logo no longer setting the
	   header's height, this keeps the row feeling generous rather than
	   cramped. align-items: center below keeps logo/nav vertically centred
	   regardless of which one is taller. */
	padding-block: var(--space-6);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
}

.site-header__branding {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

/* Explicit, deliberate display size — an architect's signature, not a
   masthead. width: auto preserves the source image's aspect ratio untouched. */
.custom-logo {
	height: 3rem;
	width: auto;
	max-width: 100%;
}

/* The wordmark is real HTML text beside the logo mark (see header.php),
   never baked into the logo image. */
.site-header__wordmark,
.site-header__wordmark-link {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.site-header__wordmark-link {
	text-decoration: none;
}

.site-header__title {
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-semibold);
	color: var(--text-display);
}

.site-header__descriptor {
	font-size: var(--fs-caption);
	color: var(--text-muted);
}

.site-header__nav {
	display: flex;
	align-items: center;
	gap: var(--space-5);
}

.primary-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-7);
}

/* The class-level display:flex above outranks the UA [hidden] rule, so the
   mobile nav toggle's `menu.hidden = true` would otherwise do nothing. */
.primary-menu[hidden] {
	display: none;
}

.primary-menu a {
	display: inline-block;
	padding-bottom: var(--space-2);
	color: var(--text-display);
	font-size: var(--fs-body-sm);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

/* Clay marks the current-page state via a border, not by recoloring the
   text — the brand's "current-nav underline" role for the accent colour. */
.primary-menu a:hover,
.primary-menu a:focus,
.primary-menu a[aria-current="page"] {
	border-bottom-color: var(--action-accent);
}

/*
 * The Practice dropdown: a parent link that navigates on its own, plus a
 * separate chevron button that opens/closes the submenu. Reuses the same
 * link treatment, type scale and tokens as the rest of the nav — this is
 * meant to read as one more chapter heading, not a services mega-menu.
 */
.menu-item-has-children {
	position: relative;
}

.menu-item-wrap {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
}

/* The parent <a> sits inside .menu-item-wrap alongside the toggle button,
   so it needs its own rule rather than relying on .primary-menu > li > a. */
.menu-item-wrap a {
	display: inline-block;
	padding-bottom: var(--space-2);
	color: var(--text-display);
	font-size: var(--fs-body-sm);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.menu-item-wrap a:hover,
.menu-item-wrap a:focus,
.menu-item-wrap a[aria-current="page"],
/* A child page being current makes the parent read as visually active too
   (.current-menu-parent, set in inc/navigation.php) — without claiming
   aria-current itself, since the parent's href isn't the current page. */
.current-menu-parent > .menu-item-wrap > a {
	border-bottom-color: var(--action-accent);
}

.submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	margin-bottom: var(--space-2);
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--text-muted);
	cursor: pointer;
}

.submenu-toggle:hover {
	color: var(--text-display);
}

.submenu-toggle__icon {
	transition: transform var(--dur-fast) var(--ease-standard);
}

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

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

.sub-menu a {
	display: block;
	color: var(--text-display);
	text-decoration: none;
}

.sub-menu a:hover,
.sub-menu a:focus,
.sub-menu a[aria-current="page"] {
	color: var(--text-accent);
}

@media (min-width: 48rem) {
	.sub-menu {
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 15rem;
		margin-top: var(--space-3);
		padding: var(--space-5) 0;
		background: var(--bg-surface-raised);
		border: 1px solid var(--border-hairline);
	}

	/*
	 * [hidden] is the single source of truth (toggled in mobile-nav.js) —
	 * deliberately not also revealed via :hover or :focus-within. Either
	 * would still be "on" for a moment right after the chevron's own
	 * close-click (the mouse is still resting on it; focus doesn't move
	 * off a button just because it was clicked), which would make an
	 * explicit close look like it silently failed. A plain button is
	 * fully keyboard-operable without it regardless: Tab reaches the
	 * parent link, then the chevron; Enter/Space opens the now-tabbable
	 * submenu; Tab continuing past it closes it behind you.
	 */
	.sub-menu[hidden] {
		display: none;
	}

	.sub-menu .menu-item {
		padding-inline: var(--space-5);
	}

	.sub-menu a {
		padding-block: var(--space-2);
		font-size: var(--fs-body-sm);
	}
}

@media (max-width: 47.9375em) {
	.menu-item-has-children {
		width: 100%;
	}

	.menu-item-wrap {
		width: 100%;
		justify-content: space-between;
	}

	/* Larger than the desktop hit target — this is the tap-friendly
	   control on the breakpoint where it matters most. */
	.submenu-toggle {
		width: 2.75rem;
		height: 2.75rem;
		margin-bottom: 0;
	}

	.sub-menu {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		width: 100%;
		padding-block: var(--space-4) 0;
		padding-inline-start: var(--space-5);
		border-inline-start: 1px solid var(--border-hairline);
	}

	.sub-menu[hidden] {
		display: none;
	}

	.sub-menu a {
		padding-block: var(--space-1);
	}
}

/* Mobile nav toggle: a near-square button, no shadow, brand's control radius. */
.mobile-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	background: transparent;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-1);
	cursor: pointer;
}

.mobile-nav-toggle__icon,
.mobile-nav-toggle__icon::before,
.mobile-nav-toggle__icon::after {
	display: block;
	width: 1.125rem;
	height: 2px;
	background-color: var(--text-display);
}

.mobile-nav-toggle__icon {
	position: relative;
}

.mobile-nav-toggle__icon::before,
.mobile-nav-toggle__icon::after {
	content: "";
	position: absolute;
	left: 0;
}

.mobile-nav-toggle__icon::before {
	top: -6px;
}

.mobile-nav-toggle__icon::after {
	top: 6px;
}

@media (min-width: 48rem) {
	.mobile-nav-toggle {
		display: none;
	}

	.primary-menu {
		flex-direction: row;
	}
}

@media (max-width: 47.9375em) {
	.primary-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-4);
		padding-top: var(--space-5);
	}
}

/* ==========================================================================
   Global footer
   ========================================================================== */

.site-footer {
	background-color: var(--bg-inverse);
	color: var(--text-on-inverse);
}

.site-footer :focus-visible {
	outline-color: var(--text-on-inverse);
}

.site-footer__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-block: var(--space-9);
}

.site-footer__top {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-7);
	justify-content: space-between;
	padding-bottom: var(--space-7);
	/* The hairline token, used exactly as designed — reads as a clean,
	   subtle rule against the dark background without inventing a new
	   colour value for a "divider on dark" variant. */
	border-bottom: 1px solid var(--border-hairline);
}

.site-footer__name {
	font-family: var(--font-display);
	font-size: var(--fs-title-2);
	font-weight: var(--fw-regular);
	margin: 0 0 var(--space-2);
}

.site-footer__tagline,
.site-footer__location {
	font-size: var(--fs-body-sm);
	color: var(--text-on-inverse);
	margin: 0;
}

/* Malta is present but understated — same size/weight as the tagline
   above it, not called out with its own emphasis. */
.site-footer__location {
	margin-top: var(--space-2);
}

.footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
}

.site-footer__nav a,
.site-footer__contact-link,
.site-footer__social-link {
	color: var(--text-on-inverse);
	text-decoration: underline;
}

.site-footer__contact {
	display: flex;
	gap: var(--space-5);
	align-items: flex-start;
}

/* A vertical stack, copyright then signature — not a side-by-side row —
   so the signature line is reliably the page's final visual element at
   every viewport width, not just when flex-wrap happens to break that way. */
.site-footer__bottom {
	padding-top: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.site-footer__copyright {
	font-size: var(--fs-caption);
	color: var(--text-on-inverse);
	margin: 0;
}

/* The closing line — serif and italic, so it reads as the last sentence of
   the page rather than another list entry. */
.site-footer__signature {
	margin: 0;
	font-family: var(--font-display);
	font-style: italic;
	color: var(--text-on-inverse);
}

/* ==========================================================================
   Homepage hero (Sam Siam Hero pattern)
   ========================================================================== */

.ss-hero {
	background-color: var(--bg-page);
}

/*
 * .ss-hero__inner (a core/columns block) is given no width attribute in the
 * pattern, and no horizontal padding of its own here — only .ss-hero__content
 * pads itself. That's what lets the image reach the right edge of the
 * content frame instead of stopping short of it, per the reference.
 * Stacking/un-stacking is driven entirely by these rules rather than core's
 * own responsive defaults, to keep it in step with the site's other
 * breakpoints (48rem / 64rem). Padding-block uses the brand's loose section
 * rhythm — the spec's own example of where 160px applies is "around a hero."
 */
.ss-hero__inner {
	display: flex;
	flex-wrap: wrap;
	max-width: var(--container-max);
	margin-inline: auto;
	row-gap: var(--space-7);
	padding-block: var(--section-y-tight);
}

.ss-hero__content,
.ss-hero__media {
	flex-basis: 100%;
}

@media (min-width: 48rem) {
	.ss-hero__inner {
		/* Tablet: roughly 50/50, per the responsive spec. */
		flex-wrap: nowrap;
		align-items: center;
		column-gap: var(--space-8);
		padding-block: var(--section-y-loose);
	}

	.ss-hero__content,
	.ss-hero__media {
		flex-basis: 50%;
	}
}

@media (min-width: 64rem) {
	.ss-hero__content {
		/* Desktop: approximates the reference's ~45/55 split. */
		flex-basis: 45%;
	}

	.ss-hero__media {
		flex-basis: 55%;
	}
}

.ss-hero__content {
	padding-inline: var(--gutter);
	max-width: var(--measure-prose);
}

@media (min-width: 48rem) {
	.ss-hero__content {
		/* The row's own gap already separates text from image; no need to
		   also pad the inner edge of the text column. */
		padding-inline-end: 0;
	}
}

.ss-hero__headline {
	/* Approximates the reference's intentional 3-line break. ch is
	   font-relative, not a fixed value, so it still reflows sensibly at
	   sizes between the mobile (unconstrained) and desktop cases — never
	   forced via a manual <br>. */
	max-width: 20ch;
	margin: 0 0 var(--space-6);
}

@media (max-width: 47.9375em) {
	.ss-hero__headline {
		/* Never force this break on small screens — let it wrap naturally. */
		max-width: none;
	}
}

.ss-hero__supporting {
	margin: 0 0 var(--space-6);
	max-width: 42ch;
}

.ss-hero__actions {
	margin: 0;
}

.ss-hero__media {
	width: 100%;
}

.ss-hero__image {
	margin: 0;
}

.ss-hero__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	/* Keeps the architectural window and the light on the floor in frame
	   when the crop tightens at narrower aspect ratios. */
	object-position: 75% 50%;
}

/*
 * Text-only hero variant (currently Acqura): the media column never
 * renders, so .ss-hero__content drops the 45/55 (desktop) or 50/50
 * (tablet) split it shares with .ss-hero__media in the two-column
 * default and simply takes the row's full width instead. Nothing here
 * touches the base .ss-hero rules other pages rely on.
 */
.ss-hero--text-only .ss-hero__content {
	flex-basis: 100%;
}

/* ==========================================================================
   Media break (Sam Siam Acqura Media Break pattern) — a wide, content-width
   landscape photograph as an editorial pause between sections. Not full-
   bleed; stays within the page's normal content width. object-fit: cover
   only crops the small remainder when a source isn't exactly 16:9.
   ========================================================================== */

.ss-media-break {
	background-color: var(--bg-page);
}

.ss-media-break__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--section-y-tight) var(--gutter);
}

.ss-media-break__image {
	margin: 0;
}

.ss-media-break__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	/* Centred by default — safest starting point for a repeating,
	   symmetrical feature like arches; adjust per-image if the actual
	   photograph needs a different focal point. */
	object-position: 50% 50%;
}

/* ==========================================================================
   Principle quote strip (Sam Siam Principle Quote pattern)
   ========================================================================== */

.ss-quote {
	background-color: var(--bg-page);
	border-top: 1px solid var(--border-hairline);
	border-bottom: 1px solid var(--border-hairline);
}

.ss-quote__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-block: var(--section-y-tight);
	gap: var(--space-5);
}

/* The pull quote is set in italic display serif per the type spec — the
   accent border is this strip's one clay element. */
.ss-quote__quote {
	margin: 0;
	padding-inline-start: var(--space-4);
	border-inline-start: 2px solid var(--action-accent);
	border-inline-end: 0;
	border-block: 0;
	max-width: 32ch;
}

.ss-quote__quote p {
	margin: 0;
	font-family: var(--font-display);
	font-style: italic;
	font-weight: var(--fw-light);
	font-size: var(--fs-title-1);
	line-height: 1.34;
	color: var(--text-display);
}

.ss-quote__meta {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
	color: var(--text-muted);
	white-space: nowrap;
}

/* Decorative only (aria-hidden in the markup) — not text, so it carries no
   accessibility concern of its own. A plain rule, not the accent colour:
   the quote's border is this section's one clay element. */
.ss-quote__meta-divider {
	display: inline-block;
	width: 1.5rem;
	height: 1px;
	background-color: var(--border-strong);
}

@media (max-width: 47.9375em) {
	.ss-quote__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.ss-quote__meta {
		white-space: normal;
	}
}

/* ==========================================================================
   Editorial triptych: Challenge / image / Practice
   (Sam Siam Editorial Triptych pattern)
   ========================================================================== */

.ss-triptych {
	background-color: var(--bg-page);
}

.ss-triptych__inner {
	display: flex;
	flex-wrap: wrap;
	max-width: var(--container-max);
	margin-inline: auto;
	row-gap: var(--space-5);
}

.ss-triptych__challenge,
.ss-triptych__image-wrap {
	flex-basis: 100%;
}

@media (min-width: 48rem) {
	.ss-triptych__challenge,
	.ss-triptych__image-wrap {
		flex-basis: 50%;
	}
}

@media (min-width: 64rem) {
	.ss-triptych__inner {
		flex-wrap: nowrap;
	}

	.ss-triptych__challenge {
		flex-basis: 40%;
	}

	.ss-triptych__image-wrap {
		flex-basis: 60%;
	}
}

.ss-triptych__challenge {
	padding: var(--section-y-tight) var(--gutter);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media (min-width: 48rem) {
	.ss-triptych__challenge {
		padding-inline-end: var(--space-7);
	}
}

.ss-triptych__challenge p {
	max-width: 42ch;
}

.ss-triptych__image {
	margin: 0;
}

.ss-triptych__image img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* ==========================================================================
   Practice statement (Sam Siam Practice Statement pattern) — split out from
   the triptych's Practice column so it no longer competes with the
   photograph for space. Same light surface tone and top hairline as the
   Product Feature section, for visual consistency between the two
   full-bleed centred bands on the homepage.
   ========================================================================== */

.ss-practice-statement {
	background-color: var(--bg-surface);
	border-top: 1px solid var(--border-hairline);
}

.ss-practice-statement__inner {
	max-width: var(--measure-prose);
	margin-inline: auto;
	padding: var(--section-y) var(--gutter);
	text-align: center;
}

.ss-practice-statement__body {
	max-width: 42ch;
	margin-inline: auto;
}

.ss-practice-statement__actions {
	margin-top: var(--space-6);
}

/* ==========================================================================
   Areas of Practice (Sam Siam Areas of Practice pattern)
   ========================================================================== */

.ss-areas {
	background-color: var(--bg-page);
}

.ss-areas__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-block: var(--section-y);
}

.ss-areas__intro {
	max-width: var(--measure-prose);
	margin: 0 0 var(--space-8);
}

.ss-areas__copy {
	margin: 0;
	color: var(--text-muted);
}

.ss-areas__list {
	display: grid;
	grid-template-columns: 1fr;
	border-top: 1px solid var(--border-hairline);
}

.ss-areas__item {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
	padding-block: var(--space-6);
	border-bottom: 1px solid var(--border-hairline);
}

.ss-areas__number {
	margin: 0;
	color: var(--text-muted);
}

.ss-areas__title {
	margin: 0;
	font-size: var(--fs-title-3);
}

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

/* Tablet: two items per row. Each item keeps its own stacked
   number/title/description internally — there isn't room yet for the
   desktop row layout below. */
@media (min-width: 48rem) and (max-width: 63.9375em) {
	.ss-areas__list {
		grid-template-columns: 1fr 1fr;
	}

	.ss-areas__item:nth-child(even) {
		padding-inline-start: var(--space-8);
		border-inline-start: 1px solid var(--border-hairline);
	}
}

/* Desktop: each item becomes one editorial row — number, title and
   description side by side — rather than a stacked block. */
@media (min-width: 64rem) {
	.ss-areas__item {
		grid-template-columns: 4rem 1fr 2fr;
		align-items: baseline;
		column-gap: var(--space-7);
	}
}

/* ==========================================================================
   Product feature: Acqura (Sam Siam Product Feature pattern)
   ========================================================================== */

/*
 * A subtle surface background (not a dark inverted panel) — enough of a
 * tonal shift to mark this as a distinct moment without a second ink
 * section on the page (the Practice panel and footer already use that
 * treatment), and without introducing any new contrast risk: accent already
 * passes AA against both page and surface.
 */
.ss-product {
	background-color: var(--bg-surface);
	border-top: 1px solid var(--border-hairline);
}

.ss-product__inner {
	display: flex;
	flex-wrap: wrap;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-block: var(--section-y);
	column-gap: var(--space-9);
	row-gap: var(--space-8);
}

.ss-product__text,
.ss-product__media {
	flex-basis: 100%;
}

@media (min-width: 64rem) {
	.ss-product__inner {
		flex-wrap: nowrap;
		align-items: center;
	}

	.ss-product__text,
	.ss-product__media {
		flex-basis: 50%;
	}
}

.ss-product__text {
	max-width: var(--measure-prose);
}

.ss-product__text p {
	max-width: 42ch;
}

/* Echoes .ss-quote__quote's treatment — this closing line is another
   distilled "principle" statement, so it earns the same visual language. */
.ss-product__supporting {
	margin: var(--space-5) 0 var(--space-6);
	padding-inline-start: var(--space-4);
	border-inline-start: 2px solid var(--action-accent);
	color: var(--text-muted);
}

.ss-product__image {
	margin: 0;
}

.ss-product__image img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* ==========================================================================
   Selected Thinking (Sam Siam Selected Thinking pattern)
   ========================================================================== */

.ss-thinking {
	background-color: var(--bg-page);
}

.ss-thinking__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-block: var(--section-y);
}

.ss-thinking__intro {
	max-width: var(--measure-prose);
	margin: 0 0 var(--space-8);
}

.ss-thinking__copy {
	margin: 0;
	color: var(--text-muted);
}

/*
 * Each .ss-thinking__item is written so a future dynamic Query Loop can
 * replace the contents of .ss-thinking__list without touching this file:
 * the same title/summary/link shape, the same classNames, the same fine
 * rules. Only where the three entries come from would change.
 */
.ss-thinking__list {
	display: flex;
	flex-wrap: wrap;
	border-top: 1px solid var(--border-hairline);
}

.ss-thinking__item {
	flex-basis: 100%;
	padding-block: var(--space-6);
	border-bottom: 1px solid var(--border-hairline);
}

.ss-thinking__title {
	/* Titles carry most of the visual weight, per the brief — sized above
	   the shared reading-copy scale but below a full section heading. */
	margin: 0 0 var(--space-3);
	font-size: var(--fs-title-3);
}

.ss-thinking__summary {
	margin: 0 0 var(--space-4);
	max-width: 42ch;
	color: var(--text-muted);
}

@media (min-width: 64rem) {
	.ss-thinking__item {
		flex-basis: 33.3333%;
		padding-inline-end: var(--space-7);
	}

	.ss-thinking__item:not(:first-child) {
		padding-inline-start: var(--space-7);
		border-inline-start: 1px solid var(--border-hairline);
	}
}

/* ==========================================================================
   Closing Invitation (Sam Siam Closing Invitation pattern)
   ========================================================================== */

/*
 * Light background + fine top rule, not the dark inverted treatment: the
 * Practice panel and the footer immediately after this section already use
 * dark, so a second ink section here would run straight into the footer
 * with nothing to separate them. One light section followed immediately by
 * the dark footer reads as a cleaner, more deliberate close. Padding uses
 * the loose section rhythm — the spec's own example of where 160px applies
 * is "around a hero or closing statement."
 */
.ss-invitation {
	background-color: var(--bg-page);
	border-top: 1px solid var(--border-hairline);
}

.ss-invitation__inner {
	max-width: var(--measure-prose);
	margin-inline: auto;
	padding-inline: var(--gutter);
	padding-block: var(--section-y-loose);
}

.ss-invitation__body {
	margin: 0 0 var(--space-6);
	max-width: 42ch;
}

.ss-invitation__actions {
	margin: 0 0 var(--space-5);
}

.ss-invitation__supporting {
	margin: 0;
	font-size: var(--fs-body-sm);
	color: var(--text-muted);
}

/* ==========================================================================
   Editorial passage (Sam Siam Practice Rationale / Practice Difference
   patterns) — a single reading-width "chapter" of text, no imagery, no
   columns. Shared by both of The Practice page's narrative sections; the
   --surface modifier is the only thing that differs between them.
   ========================================================================== */

.ss-passage {
	background-color: var(--bg-page);
}

.ss-passage--surface {
	background-color: var(--bg-surface);
}

.ss-passage__inner {
	max-width: var(--measure-prose);
	margin-inline: auto;
	padding-inline: var(--gutter);
	padding-block: var(--section-y);
}

/* Modifier for passage content wider than a single reading column — e.g. a
   multi-column breakdown — while keeping the section's own background,
   padding and rhythm. */
.ss-passage__inner--wide {
	max-width: var(--container-max);
}

/* Three-across "pillar" columns (Why We Exist), native core Columns block
   so it stacks on mobile without any extra markup or JS. */
.ss-practice-pillars {
	margin-top: var(--space-7);
	column-gap: var(--space-8);
}

.ss-practice-pillars h3 {
	margin: 0 0 var(--space-3);
	font-size: var(--fs-title-3);
}

.ss-practice-pillars p {
	margin: 0;
	color: var(--text-muted);
}

.ss-passage__body {
	max-width: 42ch;
	margin: 0 0 var(--space-4);
}

.ss-passage__body:last-child {
	margin-bottom: 0;
}

/* A short personal sign-off (The Practitioner) — echoes the footer's own
   signature line rather than introducing a new treatment. */
.ss-passage__signature {
	margin-top: var(--space-5);
	font-family: var(--font-display);
	font-style: italic;
	color: var(--text-muted);
}

/* Reuses the established inverse treatment (footer, Triptych's Practice
   panel) as a third tone for .ss-passage, for moments that need real visual
   emphasis rather than a plain reading passage — e.g. Acqura's "Marketing
   Intent" section. Same accent-on-dark contrast fix applies. */
.ss-passage--dark {
	background-color: var(--bg-inverse);
	color: var(--text-on-inverse);
}

.ss-passage--dark .ss-eyebrow {
	color: var(--text-on-inverse);
}

.ss-passage--dark .ss-link-arrow .wp-block-button__link,
.ss-passage--dark .ss-link-arrow .wp-block-button__link:hover,
.ss-passage--dark .ss-link-arrow .wp-block-button__link:focus,
.ss-passage--dark .ss-link-arrow .wp-block-button__link::after {
	color: var(--text-on-inverse);
}

.ss-passage--dark blockquote {
	border-inline-start-color: var(--text-on-inverse);
}

.ss-passage--dark blockquote p {
	color: var(--text-on-inverse);
}

.ss-passage--dark :focus-visible {
	outline-color: var(--text-on-inverse);
}

/* ==========================================================================
   Areas of Practice detail (Sam Siam Areas Detail pattern) — one full-width
   row per area, alternating page/surface tone for rhythm. Desktop:
   two-column (narrative left, Typical Challenges/Activities/Outcomes
   right). Not every area has all three groups — the layout doesn't assume
   a fixed count.
   ========================================================================== */

.ss-practice-area--background {
	background-color: var(--bg-page);
}

.ss-practice-area--surface {
	background-color: var(--bg-surface);
}

/*
 * A single bracket around the whole six-area sequence — one rule opening
 * it, one closing it — rather than a rule repeated between every area.
 * Alternating background tone already separates one area from the next;
 * six repeated dividers on top of that read as a spec sheet. First/last-
 * of-type works here because .ss-practice-area only ever appears as this
 * consecutive run (across areas-detail-1 and areas-detail-2).
 */
.ss-practice-area:first-of-type {
	border-top: 1px solid var(--border-hairline);
}

.ss-practice-area:last-of-type {
	border-bottom: 1px solid var(--border-hairline);
}

.ss-practice-area__inner {
	display: flex;
	flex-wrap: wrap;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-block: var(--section-y-tight);
	column-gap: var(--space-9);
	row-gap: var(--space-6);
}

.ss-practice-area__intro,
.ss-practice-area__detail {
	flex-basis: 100%;
}

@media (min-width: 64rem) {
	.ss-practice-area__inner {
		flex-wrap: nowrap;
	}

	/* Asymmetric rather than an even split — matches the site's existing
	   convention (Hero is 45/55, the Triptych is 30/40/30); an even 50/50
	   here read more like a data table than an edited page. */
	.ss-practice-area__intro {
		flex-basis: 40%;
	}

	.ss-practice-area__detail {
		flex-basis: 60%;
	}
}

.ss-practice-area__intro {
	max-width: var(--measure-prose);
}

/*
 * A real folio numeral rather than a small tracked label: large, serif
 * (matching the heading typeface), quiet in color. Gives each area a
 * distinct "chapter opening" moment instead of reading like a bullet
 * point in a list.
 */
.ss-practice-area__number {
	margin: 0 0 var(--space-4);
	font-family: var(--font-display);
	font-size: var(--fs-display-3);
	line-height: 1;
	color: var(--text-muted);
}

.ss-practice-area__title {
	margin: 0 0 var(--space-4);
}

.ss-practice-area__purpose {
	margin: 0;
	max-width: 42ch;
	color: var(--text-muted);
}

.ss-practice-area__detail {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.ss-practice-area__group-label {
	margin: 0 0 var(--space-3);
	color: var(--text-muted);
}

/* A plain, quiet list — dash markers instead of bullet discs, no boxes,
   no icons. */
.ss-practice-area__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.ss-practice-area__list li {
	padding-inline-start: var(--space-4);
	position: relative;
}

.ss-practice-area__list li::before {
	content: "\2014";
	position: absolute;
	left: 0;
	color: var(--text-faint);
}

/* ==========================================================================
   Areas of Practice editorial interlude — a full-width photograph break at
   the sequence's midpoint. Deliberately not paired with text, and cropped
   wider than the portrait images used everywhere else on the site, so it
   reads as a genuine pause rather than another instance of the same
   content-image treatment.
   ========================================================================== */

.ss-interlude--surface {
	background-color: var(--bg-surface);
}

.ss-interlude {
	padding-block: var(--space-7);
}

.ss-interlude__image {
	margin: 0;
}

.ss-interlude__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 21 / 9;
	object-fit: cover;
}

/* ==========================================================================
   Acqura page: Design Principles list and Typical Applications list
   ========================================================================== */

/* Reuses .ss-quote__quote's accent-border technique per item — a plain
   divided list of quote-styled statements, not icon cards. */
.ss-acqura-principles {
	border-top: 1px solid var(--border-hairline);
}

.ss-acqura-principles__item {
	margin: 0;
	padding-block: var(--space-5);
	padding-inline-start: var(--space-4);
	border-block-start: 0;
	border-inline-end: 0;
	border-block-end: 1px solid var(--border-hairline);
	border-inline-start: 2px solid var(--action-accent);
}

.ss-acqura-principles__item p {
	margin: 0;
	font-family: var(--font-display);
	font-style: italic;
	font-weight: var(--fw-light);
	font-size: var(--fs-title-1);
	line-height: 1.34;
	color: var(--text-display);
}

/*
 * A plain two-column divided list at tablet+, single column on mobile —
 * same alternating-divider technique already used by .ss-areas__item.
 * .ss-divided-list is the generic name for this component (used by, e.g.,
 * The Practice's principles preview); .ss-acqura-applications is kept as an
 * alias so the existing Acqura page content keeps working unchanged.
 */
.ss-acqura-applications,
.ss-divided-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	border-top: 1px solid var(--border-hairline);
}

.ss-acqura-applications li,
.ss-divided-list li {
	padding-block: var(--space-4);
	border-bottom: 1px solid var(--border-hairline);
}

@media (min-width: 48rem) {
	.ss-acqura-applications,
	.ss-divided-list {
		grid-template-columns: 1fr 1fr;
	}

	.ss-acqura-applications li:nth-child(even),
	.ss-divided-list li:nth-child(even) {
		padding-inline-start: var(--space-7);
		border-inline-start: 1px solid var(--border-hairline);
	}
}

/* ==========================================================================
   A reusable plain text link with a trailing arrow, for anchors rendered
   directly in PHP (essay footer, back-to-Thinking) rather than as a
   core/button block — same visual language as .ss-link-arrow without
   depending on the button block's markup.
   ========================================================================== */

.ss-link-plain {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--text-display);
	font-size: var(--fs-body-sm);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	border-bottom: 0;
}

.ss-link-plain:hover,
.ss-link-plain:focus {
	color: var(--text-accent);
	border-bottom: 0;
}

.ss-link-plain span {
	color: var(--text-accent);
}

/* ==========================================================================
   Thinking archive (/thinking/) — home.php.

   The opening section (eyebrow, H1, lede) is the "Thinking" page's own
   editable block content, seeded from the Sam Siam Thinking Archive Intro
   pattern. Everything from .ss-archive-list-section down is the live essay
   query, rendered by home.php and never edited directly.
   ========================================================================== */

.ss-archive-intro__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
	padding-block: var(--section-y-tight) var(--space-8);
}

.ss-archive-intro__inner .ss-eyebrow {
	margin: 0 0 var(--space-4);
}

.ss-archive-intro__inner h1 {
	margin: 0 0 var(--space-5);
	max-width: 16ch;
}

.ss-archive-intro__inner .ss-lede {
	color: var(--text-muted);
}

@media (min-width: 1200px) {
	.ss-archive-intro__inner {
		padding-inline: var(--gutter-lg);
	}
}

.ss-archive-list-section__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
	padding-block: var(--space-8) var(--section-y);
}

@media (min-width: 1200px) {
	.ss-archive-list-section__inner {
		padding-inline: var(--gutter-lg);
	}
}

/* --- the latest essay: the opening feature, not a promotional hero --- */

.ss-archive-feature {
	padding-bottom: var(--section-y-tight);
	margin-bottom: var(--section-y-tight);
	border-bottom: 1px solid var(--border-hairline);
}

.ss-archive-feature__inner {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--space-9);
	row-gap: var(--space-6);
}

.ss-archive-feature__media,
.ss-archive-feature__text {
	flex-basis: 100%;
}

.ss-archive-feature__media {
	display: block;
	border-bottom: 0;
}

.ss-archive-feature__image {
	width: 100%;
	height: auto;
	margin: 0;
}

@media (min-width: 64rem) {
	.ss-archive-feature__inner {
		flex-wrap: nowrap;
		align-items: center;
	}

	/* Text first in the source order (matches the DOM/reading order below),
	   image given the larger share — an editorial opening spread rather
	   than an even split. */
	.ss-archive-feature__text {
		flex-basis: 42%;
		order: 1;
	}

	.ss-archive-feature__media {
		flex-basis: 58%;
		order: 2;
	}
}

.ss-archive-feature__title {
	margin: var(--space-3) 0 var(--space-4);
	font-size: var(--fs-display-3);
	line-height: var(--lh-title);
}

.ss-archive-feature__title a {
	color: var(--text-display);
	text-decoration: none;
	border-bottom: 0;
}

.ss-archive-feature__title a:hover {
	color: var(--text-accent);
}

.ss-archive-feature__excerpt {
	margin: 0 0 var(--space-5);
	max-width: 46ch;
	color: var(--text-muted);
}

.ss-archive-feature__meta {
	margin: 0 0 var(--space-5);
	color: var(--text-muted);
	font-size: var(--fs-body-sm);
}

.ss-archive-feature__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--text-display);
	font-size: var(--fs-body-sm);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	border-bottom: 0;
}

.ss-archive-feature__link:hover,
.ss-archive-feature__link:focus {
	color: var(--text-accent);
	border-bottom: 0;
}

.ss-archive-feature__link span {
	color: var(--text-accent);
}

/* --- the remaining essays: a restrained numbered index, not cards --- */

.ss-archive-list {
	border-top: 1px solid var(--border-hairline);
}

.ss-archive-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
	padding-block: var(--space-7);
	border-bottom: 1px solid var(--border-hairline);
}

.ss-archive-row__number {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	color: var(--text-faint);
}

.ss-archive-row__title {
	margin: 0 0 var(--space-3);
	font-size: var(--fs-title-2);
}

.ss-archive-row__title a {
	color: var(--text-display);
	text-decoration: none;
	border-bottom: 0;
}

.ss-archive-row__title a:hover {
	color: var(--text-accent);
}

.ss-archive-row__excerpt {
	margin: 0;
	max-width: 46ch;
	color: var(--text-muted);
}

.ss-archive-row__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-4);
	color: var(--text-muted);
	font-size: var(--fs-caption);
}

.ss-archive-row__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	color: var(--text-display);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	border-bottom: 0;
}

.ss-archive-row__link:hover,
.ss-archive-row__link:focus {
	color: var(--text-accent);
	border-bottom: 0;
}

.ss-archive-row__link span {
	color: var(--text-accent);
}

@media (min-width: 64rem) {
	.ss-archive-row {
		grid-template-columns: 4rem 1fr auto;
		align-items: baseline;
		column-gap: var(--space-7);
	}

	.ss-archive-row__meta {
		flex-direction: column;
		align-items: flex-end;
		gap: var(--space-2);
		white-space: nowrap;
	}
}

/* --- empty state: dignified, no placeholder copy --- */

.ss-archive-empty {
	padding-block: var(--section-y-tight);
	max-width: var(--measure-prose);
}

.ss-archive-empty .ss-eyebrow {
	margin: 0 0 var(--space-4);
}

.ss-archive-empty__title {
	margin: 0 0 var(--space-4);
	font-size: var(--fs-title-1);
}

.ss-archive-empty__body {
	margin: 0;
	color: var(--text-muted);
}

/* --- pagination: accessible, no infinite scroll --- */

.ss-archive-pagination {
	margin-top: var(--section-y-tight);
}

.ss-archive-pagination .nav-links {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	padding-top: var(--space-7);
	border-top: 1px solid var(--border-hairline);
}

.ss-archive-pagination a.page-numbers,
.ss-archive-pagination span.page-numbers {
	font-size: var(--fs-body-sm);
	color: var(--text-muted);
}

.ss-archive-pagination a.page-numbers {
	text-decoration: none;
	border-bottom: 0;
}

.ss-archive-pagination a.page-numbers:hover,
.ss-archive-pagination a.page-numbers:focus {
	color: var(--text-accent);
}

.ss-archive-pagination .page-numbers.dots,
.ss-archive-pagination .page-numbers:not(.next):not(.prev):not(.dots) {
	display: none;
}

.ss-archive-pagination .prev.page-numbers,
.ss-archive-pagination .next.page-numbers {
	display: inline-flex;
	color: var(--text-display);
}

/* ==========================================================================
   Single essay (/thinking/{slug}/) — single.php.
   ========================================================================== */

.ss-essay__header-inner,
.ss-essay__content,
.ss-essay__footer-inner {
	max-width: var(--measure-prose);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.ss-essay__header {
	padding-block: var(--section-y-tight) var(--space-9);
}

.ss-essay__header .ss-eyebrow {
	margin: 0 0 var(--space-4);
}

.ss-essay__title {
	margin: 0 0 var(--space-5);
}

.ss-essay__intro {
	margin: 0 0 var(--space-6);
	color: var(--text-muted);
}

.ss-essay__meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	color: var(--text-muted);
	font-size: var(--fs-body-sm);
}

/*
 * Editorial hero image: a magazine feature, not a blog header. Sits between
 * the metadata and the opening paragraph with a generous, roughly symmetric
 * pause on each side (~64px desktop, per the brand's space-9 token),
 * reduced proportionately on mobile below. Wider than the prose column but
 * still inside the site's wide container — never full-bleed, never cropped.
 */

.ss-essay__hero {
	max-width: var(--container-wide);
	margin: 0 auto var(--space-9);
	padding-inline: var(--gutter);
}

.ss-essay__hero-image {
	width: 100%;
	height: auto;
	margin: 0;
}

.ss-essay__hero figcaption {
	font-family: var(--font-mono);
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--text-muted);
	margin-top: var(--space-4);
}

/* Mobile: the same pause, proportionately reduced rather than cramped. */
@media (max-width: 47.9375em) {
	.ss-essay__header {
		padding-block: var(--section-y-tight) var(--space-7);
	}

	.ss-essay__hero {
		margin-bottom: var(--space-7);
	}
}

@media (min-width: 1200px) {
	.ss-essay__header-inner,
	.ss-essay__content,
	.ss-essay__footer-inner,
	.ss-essay__hero {
		padding-inline: var(--gutter-lg);
	}
}

/* --- article ending --- */

.ss-essay__footer {
	padding-bottom: var(--section-y);
}

.ss-essay__footer .ss-rule {
	margin-block: var(--space-8) var(--space-6);
}

.ss-essay__signoff {
	margin: 0 0 var(--space-6);
	font-family: var(--font-mono);
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--text-muted);
}

.ss-essay__closing-note {
	margin: 0 0 var(--space-7);
	max-width: var(--measure-lede);
	font-family: var(--font-display);
	font-style: italic;
	font-weight: var(--fw-light);
	font-size: var(--fs-title-2);
	line-height: 1.4;
	color: var(--text-display);
}

.ss-essay__back-link {
	margin: 0 0 var(--space-8);
}

.ss-essay__back-link a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--text-display);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	border-bottom: 0;
}

.ss-essay__back-link a:hover,
.ss-essay__back-link a:focus {
	color: var(--text-accent);
}

.ss-essay__back-link span {
	color: var(--text-accent);
}

.ss-essay__nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-6);
	justify-content: space-between;
	padding: var(--space-7) 0;
	margin-bottom: var(--space-8);
	border-top: 1px solid var(--border-hairline);
	border-bottom: 1px solid var(--border-hairline);
}

.ss-essay__nav-item {
	display: block;
	max-width: 32ch;
}

.ss-essay__nav-item--next {
	text-align: right;
	margin-left: auto;
}

.ss-essay__nav-item a {
	display: block;
	text-decoration: none;
	border-bottom: 0;
	color: var(--text-display);
}

.ss-essay__nav-item a:hover .ss-essay__nav-title,
.ss-essay__nav-item a:focus .ss-essay__nav-title {
	color: var(--text-accent);
}

.ss-essay__nav-label {
	display: block;
	margin-bottom: var(--space-2);
	font-family: var(--font-mono);
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--text-muted);
}

.ss-essay__nav-title {
	display: block;
	font-family: var(--font-display);
	font-size: var(--fs-title-3);
	color: var(--text-display);
}

.ss-essay__related {
	margin-bottom: var(--space-8);
}

.ss-essay__related .ss-eyebrow {
	margin: 0 0 var(--space-4);
}

.ss-essay__related-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.ss-essay__related-list a {
	color: var(--text-display);
	font-family: var(--font-display);
	font-size: var(--fs-title-3);
	text-decoration: none;
	border-bottom: 0;
}

.ss-essay__related-list a:hover,
.ss-essay__related-list a:focus {
	color: var(--text-accent);
}

.ss-essay__invitation {
	padding-top: var(--space-7);
	border-top: 1px solid var(--border-hairline);
}

.ss-essay__invitation p {
	margin: 0 0 var(--space-5);
	max-width: var(--measure-lede);
	color: var(--text-muted);
}

/* ==========================================================================
   Block-editor content used inside essays: a distinct, larger pull-quote
   style for a standalone editorial moment, and quiet footnotes — both
   scoped to .entry-content so nothing outside the essay body is affected.
   ========================================================================== */

.entry-content .wp-block-quote.is-style-pull-quote {
	border: 0;
	text-align: center;
	margin: var(--space-9) auto;
	max-width: 44ch;
}

.entry-content .wp-block-quote.is-style-pull-quote::before {
	margin-inline: auto;
}

.entry-content .wp-block-quote.is-style-pull-quote p {
	font-size: var(--fs-title-1);
	max-width: none;
}

.entry-content .wp-block-footnotes {
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: 1px solid var(--border-hairline);
	font-size: var(--fs-caption);
	color: var(--text-muted);
}

/* ==========================================================================
   Contact (/contact/) — the enquiry form beside Direct Contact and
   Availability, plus the form's own field/notice states. Everything here
   reuses existing tokens; .ss-form/.ss-field/.ss-hint/.ss-error already
   exist in sam-siam-base.css and are not redefined.
   ========================================================================== */

.ss-contact-columns {
	column-gap: var(--space-9);
}

.ss-contact-details {
	padding-top: var(--space-8);
	border-top: 1px solid var(--border-hairline);
}

@media (min-width: 64rem) {
	.ss-contact-details {
		padding-top: 0;
		padding-inline-start: var(--space-8);
		border-top: 0;
		border-inline-start: 1px solid var(--border-hairline);
	}
}

.ss-contact-details__group {
	margin-bottom: var(--space-8);
}

.ss-contact-details__group:last-child {
	margin-bottom: 0;
}

.ss-contact-details__group h3 {
	margin: 0 0 var(--space-2);
	font-size: var(--fs-title-3);
}

.ss-contact-details__group h3 + p {
	margin: 0 0 var(--space-5);
	color: var(--text-muted);
}

.ss-contact-details__group p {
	margin: 0 0 var(--space-2);
	color: var(--text-muted);
}

.ss-contact-details__group p:last-child {
	margin-bottom: 0;
}

/* The email address is the one deliberate action in this column — full
   ink/hover-accent treatment, not muted like the surrounding copy. */
.ss-contact-details__group a {
	color: var(--text-display);
}

.ss-contact-details__group a:hover,
.ss-contact-details__group a:focus {
	color: var(--text-accent);
}

/* --- the form itself --- */

.ss-contact-form {
	margin-top: var(--space-6);
	max-width: 34rem;
}

.ss-field {
	margin-bottom: var(--space-5);
}

.ss-field__optional {
	text-transform: none;
	letter-spacing: 0;
	font-weight: var(--fw-regular);
	color: var(--text-faint);
}

.ss-form textarea {
	resize: vertical;
}

/* A visual echo of the error text beneath each invalid field — never the
   only signal (the message itself always renders as real text), just a
   faster cue for sighted users scanning the form. */
.ss-form [aria-invalid="true"] {
	border-color: var(--status-error);
}

.ss-error {
	display: block;
	margin-top: var(--space-2);
}

/* Honeypot: off-screen rather than display:none or visibility:hidden, so
   it stays in the accessibility tree for the rare screen reader that
   still lands on it (tabindex="-1" keeps it out of the normal tab order),
   while remaining completely invisible and unreachable for sighted and
   touch use. */
.ss-form-honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ss-field--consent {
	margin-top: var(--space-6);
}

/*
 * .ss-field--consent .ss-consent (two classes) rather than .ss-consent
 * alone: needs to outrank sam-siam-base.css's ".ss-field > label" — this
 * label wraps a full sentence of consent copy, not a short field name, so
 * the mono/uppercase/tracked field-label treatment that rule applies has
 * to be reset back to ordinary reading text here.
 */
.ss-field--consent .ss-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	cursor: pointer;
	font-family: var(--font-body);
	font-size: var(--fs-body-sm);
	letter-spacing: normal;
	text-transform: none;
	color: var(--text-muted);
}

.ss-consent input[type="checkbox"] {
	flex-shrink: 0;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.15em;
	accent-color: var(--action-accent);
}

.ss-consent span {
	line-height: 1.5;
}

.ss-consent a {
	color: var(--text-display);
	border-bottom: 1px solid var(--border-strong);
}

.ss-consent a:hover,
.ss-consent a:focus {
	color: var(--text-accent);
	border-bottom-color: var(--action-accent);
}

.ss-contact-form .ss-btn {
	margin-top: var(--space-2);
}

/* --- notices: form-level error banner and the post-submit confirmation --- */

.ss-form-notice {
	margin: 0 0 var(--space-5);
	padding: var(--space-4) var(--space-5);
	border: 1px solid var(--border-hairline);
	font-size: var(--fs-body-sm);
}

.ss-form-notice--error {
	border-color: var(--status-error);
	background: var(--status-error-bg);
	color: var(--status-error);
}

.ss-form-confirmation {
	max-width: 34rem;
	margin-top: var(--space-6);
	padding: var(--space-6) 0 0;
	border-top: 1px solid var(--border-hairline);
}

.ss-form-confirmation__title {
	margin: 0 0 var(--space-3);
	font-family: var(--font-display);
	font-size: var(--fs-title-2);
	color: var(--text-display);
}

.ss-form-confirmation p {
	margin: 0;
	color: var(--text-muted);
}