/*
 * Sage Ware — art direction layer.
 *
 * The idea: an engraved financial instrument rendered in 2026 colour.
 * Instrument Serif carries the display type — fine hairlines, sharp
 * terminals, close to the wordmark. IBM Plex Mono carries every label,
 * figure and index, the way a real document would. Guilloché engraving
 * does the ornament. Periwinkle belongs to the logo and to the mark;
 * citron is the second voice, used only as fill, rule or dot — it is
 * far too light to ever carry text.
 *
 * Colour and type live in theme.json so they stay editable in the Site
 * Editor. This file holds only what theme.json cannot express: motion,
 * pseudo-elements, engraved fills, and the kinetic headline.
 */


/* ---------------------------------------------------------------
   0. Spacing utilities
   Block markup carries these instead of inline margin styles: WordPress
   re-serialises inline spacing on its own terms, which made the editor
   flag every hand-authored block as invalid ("Resolve Block").
   --------------------------------------------------------------- */

.sw-mt-20 { margin-top: var(--wp--preset--spacing--20); }
.sw-mt-30 { margin-top: var(--wp--preset--spacing--30); }
.sw-mt-40 { margin-top: var(--wp--preset--spacing--40); }
.sw-mt-50 { margin-top: var(--wp--preset--spacing--50); }
.sw-mt-60 { margin-top: var(--wp--preset--spacing--60); }
.sw-mb-20 { margin-bottom: var(--wp--preset--spacing--20); }
.sw-mb-30 { margin-bottom: var(--wp--preset--spacing--30); }
.sw-mb-40 { margin-bottom: var(--wp--preset--spacing--40); }
.sw-mb-50 { margin-bottom: var(--wp--preset--spacing--50); }
.sw-mb-60 { margin-bottom: var(--wp--preset--spacing--60); }

/* ---------------------------------------------------------------
   1. Foundations
   --------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Body copy sits at full ink. `ink-soft` is for labels and fine print
   only — used on running text it greys out to mud against the cream. */
p, li, dd, .wp-block-post-excerpt__excerpt {
	color: var(--wp--preset--color--ink);
}

.has-ink-soft-color { color: var(--wp--preset--color--ink-soft) !important; }

/* Instrument Serif ships one weight with very fine hairlines — it needs
   optical sizing left alone and no synthetic bolding anywhere. */
h1, h2, h3,
.sw-claim {
	font-kerning: normal;
	font-variant-ligatures: common-ligatures;
	font-synthesis-weight: none;
}

.sw-card__index,
.sw-step p:first-child,
.sw-ledger,
.wp-block-post-date {
	font-variant-numeric: tabular-nums;
}

:root {
	--sw-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--sw-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237392FF' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 2.6v18.8M3.9 7.3l16.2 9.4M20.1 7.3L3.9 16.7'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------
   2. The mark
   Inline SVG, not the ❋ character: no web font reliably carries
   U+274B, so the glyph renders as a tofu box on some systems.
   --------------------------------------------------------------- */

.sw-eyebrow {
	display: flex;
	align-items: flex-start;
	gap: 0.85em;
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-soft);
}

.sw-eyebrow::before {
	content: "";
	flex: none;
	width: 1.05em;
	height: 1.05em;
	/* optically centre the mark on the FIRST line when the label wraps */
	margin-top: 0.2em;
	background: var(--sw-mark) center / contain no-repeat;
	transition: transform 700ms var(--sw-ease);
}

.sw-hero:hover .sw-eyebrow::before {
	transform: rotate(90deg);
}

.sw-marquee__dot {
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	background: var(--sw-mark) center / contain no-repeat;
}

/* ---------------------------------------------------------------
   3. Engraving
   --------------------------------------------------------------- */

.sw-hero {
	position: relative;
	isolation: isolate;
	overflow: clip;
}

.sw-hero__engraving {
	position: absolute;
	z-index: -1;
	top: 50%;
	right: -14%;
	width: min(78vw, 780px);
	aspect-ratio: 1;
	translate: 0 -50%;
	color: var(--wp--preset--color--periwinkle);
	background: currentColor;
	opacity: 0.22;
	-webkit-mask: url("../img/guilloche-rosette.svg") center / contain no-repeat;
	mask: url("../img/guilloche-rosette.svg") center / contain no-repeat;
	animation: sw-turn 240s linear infinite;
	pointer-events: none;
}

/* A halo behind the engraving, the way a certificate has a watermark. */
.sw-hero::before {
	content: "";
	position: absolute;
	z-index: -2;
	inset: -20% -10% auto auto;
	width: min(90vw, 900px);
	aspect-ratio: 1;
	background: radial-gradient(circle, var(--wp--preset--color--halo) 0%, transparent 62%);
	opacity: 0.7;
	pointer-events: none;
}

@keyframes sw-turn {
	to { rotate: 360deg; }
}

/* Engraved wave rule, tileable. Used as a section divider. */
.sw-rule {
	height: 36px;
	color: var(--wp--preset--color--line);
	background: currentColor;
	-webkit-mask: url("../img/guilloche-rule.svg") repeat-x center / auto 36px;
	mask: url("../img/guilloche-rule.svg") repeat-x center / auto 36px;
}

/* ---------------------------------------------------------------
   4. The claim — insured / covered
   The whole art direction in one element. Static frame reads
   correctly with no motion at all; scroll only sharpens it.
   --------------------------------------------------------------- */

.sw-claim {
	margin: 0.25em 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(2.75rem, 9.5vw, 8.5rem);
	line-height: 0.94;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
}

.sw-claim__line {
	display: block;
}

.sw-claim__swap {
	display: block;
	position: relative;
}

.sw-claim__was {
	position: relative;
	color: var(--wp--preset--color--ink-soft);
	font-style: italic;
}

/* The strike is drawn, not text-decoration, so it can be animated
   and so its weight matches the engraving rather than the font. */
.sw-claim__was::after {
	content: "";
	position: absolute;
	left: -0.04em;
	right: -0.04em;
	top: 50%;
	height: 0.055em;
	translate: 0 -50%;
	background: var(--wp--preset--color--periwinkle);
	transform-origin: left center;
	scale: 0 1;
	animation: sw-strike linear both;
	animation-timeline: view();
	animation-range: entry 40% cover 34%;
}

.sw-claim__is {
	display: block;
	color: var(--wp--preset--color--periwinkle-deep);
	opacity: 0.35;
	translate: 0 0.06em;
	animation: sw-resolve linear both;
	animation-timeline: view();
	animation-range: entry 55% cover 42%;
}

@keyframes sw-strike {
	to { scale: 1 1; }
}

@keyframes sw-resolve {
	to { opacity: 1; translate: 0 0; }
}

/* Browsers without scroll-driven animations: show the resolved state. */
@supports not (animation-timeline: view()) {
	.sw-claim__was::after { scale: 1 1; }
	.sw-claim__is { opacity: 1; translate: 0 0; }
}

.sw-hero__script {
	margin-top: 0.4em;
	font-size: clamp(1.75rem, 4.5vw, 3.25rem);
	line-height: 1.1;
	color: var(--wp--preset--color--ink-soft);
}

/* ---------------------------------------------------------------
   5. The ledger — paired opposites
   --------------------------------------------------------------- */

.sw-ledger {
	margin-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--line);
}

.sw-ledger__head,
.sw-ledger__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 5vw, 4rem);
	padding: clamp(0.9rem, 2vw, 1.4rem) 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.sw-ledger__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--ink-soft);
}

.sw-ledger__label--is {
	color: var(--wp--preset--color--periwinkle-deep);
}

.sw-ledger__was,
.sw-ledger__is {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.15rem, 2.2vw, 1.75rem);
	line-height: 1.25;
}

.sw-ledger__was {
	position: relative;
	color: var(--wp--preset--color--ink-soft);
	font-style: italic;
}

.sw-ledger__was::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	translate: 0 -50%;
	background: currentColor;
	opacity: 0.55;
	transform-origin: left center;
	scale: 0 1;
	animation: sw-strike linear both;
	animation-timeline: view();
	animation-range: entry 30% cover 30%;
}

.sw-ledger__is {
	color: var(--wp--preset--color--ink);
}

@supports not (animation-timeline: view()) {
	.sw-ledger__was::after { scale: 1 1; }
}

@media (max-width: 640px) {
	.sw-ledger__head { display: none; }
	.sw-ledger__row {
		grid-template-columns: 1fr;
		gap: 0.35rem;
	}
	.sw-ledger__is::before {
		content: "→ ";
		color: var(--wp--preset--color--periwinkle);
	}
}

/* ---------------------------------------------------------------
   5b. Standing — verifiable facts, set like a register entry
   --------------------------------------------------------------- */

.sw-standing {
	border-top: 1px solid var(--wp--preset--color--line);
}

.sw-standing__row {
	display: grid;
	grid-template-columns: minmax(9rem, 22%) 1fr;
	gap: clamp(1rem, 4vw, 3rem);
	align-items: baseline;
	padding: clamp(0.85rem, 1.8vw, 1.25rem) 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.sw-standing__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--ink-soft);
}

.sw-standing__value {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.15rem, 2.2vw, 1.65rem);
	line-height: 1.3;
}

.sw-standing__num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72em;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--periwinkle-deep);
	margin-left: 0.5em;
	white-space: nowrap;
}

@media (max-width: 640px) {
	.sw-standing__row { grid-template-columns: 1fr; gap: 0.3rem; }
	.sw-standing__num { display: block; margin-left: 0; }
}

/* ---------------------------------------------------------------
   6. Instruments
   --------------------------------------------------------------- */

.sw-instrument {
	padding-top: var(--wp--preset--spacing--30);
	border-top: 2px solid var(--wp--preset--color--ink);
	height: 100%;
}

.sw-instrument--accent {
	border-top-color: var(--wp--preset--color--periwinkle);
}

.sw-instrument__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	line-height: 1.1;
}

.sw-instrument__title sup {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.42em;
	vertical-align: super;
	color: var(--wp--preset--color--periwinkle);
	margin-right: 0.15em;
}

.sw-instrument__body {
	margin-top: 1rem;
	color: var(--wp--preset--color--ink-soft);
}

/* ---------------------------------------------------------------
   7. Marquee
   --------------------------------------------------------------- */

.sw-marquee__viewport {
	overflow: hidden;
	width: 100%;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.sw-marquee__track {
	display: flex;
	width: max-content;
	animation: sw-marquee 48s linear infinite;
}

.sw-marquee__group {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding-right: 1.5rem;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--wp--preset--color--ink-soft);
}

@keyframes sw-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ---------------------------------------------------------------
   8. Cards, steps, block styles
   --------------------------------------------------------------- */

.sw-card {
	height: 100%;
	transition: border-color 320ms var(--sw-ease), transform 320ms var(--sw-ease);
}

.sw-card:hover {
	border-color: var(--wp--preset--color--citron);
	transform: translateY(-2px);
}

.sw-card__index { margin: 0; letter-spacing: -0.04em; }

.wp-block-button.is-style-sw-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line);
}



.wp-block-button.is-style-sw-pill .wp-block-button__link {
	transition: background-color 320ms var(--sw-ease), border-color 320ms var(--sw-ease);
}

.wp-block-group.is-style-sw-inset {
	background-color: var(--wp--preset--color--bone);
	padding: var(--wp--preset--spacing--40);
}

.wp-block-heading.is-style-sw-marked {
	background-image: linear-gradient(transparent 62%, var(--wp--preset--color--halo) 62%);
	display: inline;
}

/* ---------------------------------------------------------------
   9. Details / FAQ
   --------------------------------------------------------------- */

.wp-block-details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	list-style: none;
	position: relative;
	padding-right: 2rem;
}

.wp-block-details summary::-webkit-details-marker { display: none; }

.wp-block-details summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.1rem;
	color: var(--wp--preset--color--periwinkle);
}

.wp-block-details[open] summary::after { content: "−"; }

/* ---------------------------------------------------------------
   10. Post list
   --------------------------------------------------------------- */

.sw-postlist__item .wp-block-post-title a {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 0 1px;
	background-position: 0 100%;
	transition: background-size 320ms var(--sw-ease);
}

.sw-postlist__item:hover .wp-block-post-title a { background-size: 100% 1px; }

/* ---------------------------------------------------------------
   11. Header — the masthead
   The logo opens large, like the crest on a certificate, and
   contracts into a sticky bar as the page scrolls. Driven by a
   scroll timeline, so there is no JS and no scroll listener.
   --------------------------------------------------------------- */

.sw-header {
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: saturate(140%) blur(8px);
	animation: sw-header-condense linear both;
	animation-timeline: scroll(root block);
	animation-range: 0 320px;
}

@keyframes sw-header-condense {
	to {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		background-color: color-mix(in srgb, var(--wp--preset--color--paper) 92%, transparent);
	}
}

.sw-header__inner { gap: var(--wp--preset--spacing--40); }

/* --- brand lockup --- */

.sw-brand {
	position: relative;
	display: flex;
	align-items: center;
	isolation: isolate;
	min-width: 0;
}

.sw-brand__logo {
	display: block;
	line-height: 0;
}

/* The master export is a 1563x1563 square, but the mark occupies only
   1408x709 of it — 41%. The rest is flat #F1F0EE ground. The header used
   to be painted that same bone so the square would not show as a
   rectangle, which is why the bar was a different white from the cream
   page, and why it was 303px tall to hold a 112px logo.

   logo-web.png is the same artwork with that ground knocked out and the
   empty area cropped. The heights below are the old ones multiplied by
   709/1563, so the visible mark is exactly the size it always was — the
   bar simply stops reserving space for padding baked into a PNG. */
.sw-brand__logo img {
	display: block;
	width: auto;
	height: clamp(57px, 7.7vw, 112px);
	max-width: 100%;
	transform-origin: left center;
	animation: sw-logo-condense linear both;
	animation-timeline: scroll(root block);
	animation-range: 0 320px;
}

@keyframes sw-logo-condense {
	to { height: 37px; }
}

@media (prefers-reduced-motion: no-preference) {
	.sw-brand__logo img {
		animation:
			sw-logo-condense linear both,
			sw-logo-enter 900ms var(--sw-ease) both;
		animation-timeline: scroll(root block), auto;
		animation-range: 0 320px, normal;
	}
}

@keyframes sw-logo-enter {
	from { opacity: 0; translate: 0 12px; }
	to   { opacity: 1; translate: 0 0; }
}

@supports not (animation-timeline: scroll()) {
	.sw-brand__logo img { height: clamp(49px, 5.9vw, 75px); }
	.sw-header { animation: none; }
}

/* Engraved rosette turning slowly behind the mark. */
.sw-brand__engraving {
	position: absolute;
	z-index: -1;
	left: -0.9em;
	top: 50%;
	width: clamp(120px, 14vw, 190px);
	aspect-ratio: 1;
	translate: 0 -50%;
	color: var(--wp--preset--color--periwinkle);
	background: currentColor;
	opacity: 0.16;
	-webkit-mask: url("../img/guilloche-rosette.svg") center / contain no-repeat;
	mask: url("../img/guilloche-rosette.svg") center / contain no-repeat;
	animation:
		sw-turn 150s linear infinite,
		sw-brand-fade linear both;
	animation-timeline: auto, scroll(root block);
	animation-range: normal, 0 320px;
	pointer-events: none;
}

@keyframes sw-brand-fade {
	to { opacity: 0; }
}

@media (max-width: 860px) {
	.wp-block-buttons.sw-header__cta { display: none !important; }
	.sw-brand__engraving { display: none; }
	.sw-header__inner { gap: var(--wp--preset--spacing--20); }
}

/* ---------------------------------------------------------------
   12. Accessibility
   --------------------------------------------------------------- */



@media (prefers-reduced-motion: reduce) {
	.sw-marquee__track,
	.sw-hero__engraving {
		animation: none;
	}

	.sw-marquee__viewport { overflow-x: auto; }

	/* Resolved state, no movement. */
	.sw-claim__was::after,
	.sw-ledger__was::after { scale: 1 1; animation: none; }
	.sw-claim__is { opacity: 1; translate: 0 0; animation: none; }

	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------
   13. Contrast corrections measured on the live page
   --------------------------------------------------------------- */

/* The step numerals were #8E8E9B on the old brown-black — 2.03:1, under
   3:1 minimum for large text. Periwinkle at low opacity reads as
   ornament but stays legible. */
.sw-approach .sw-step p:first-child,
.sw-step .wp-block-column:first-child p {
	color: #8E8E9B !important;
}

/* Hero: tighten the gap the engraving leaves behind on small screens. */
@media (max-width: 700px) {
	.sw-hero__engraving { opacity: 0.13; width: min(90vw, 420px); right: -22%; }
	.sw-hero__script { font-size: clamp(1.4rem, 6.5vw, 2rem); }
}

/* ---------------------------------------------------------------
   14. Dark surfaces
   The global link colour is `ink`, which is right on cream and exactly
   the background colour on the footer and the approach band — the
   email address and every legal link measured 1.00:1 (invisible).
   Anything on a dark ground gets its own colours here.
   --------------------------------------------------------------- */

.sw-footer,
.sw-approach {
	--sw-on-dark:       #F1F0EE;
	--sw-on-dark-muted: #9DA3AB;
}

.sw-footer a,
.sw-footer p,
.sw-footer li,
.sw-approach a {
	color: var(--sw-on-dark);
}



/* Fine print: muted, but still 5.5:1 against the footer. */
.sw-footer .sw-disclosure p,
.sw-footer .sw-disclosure a,
.sw-footer .has-ink-soft-color {
	color: var(--sw-on-dark-muted) !important;
}

.sw-footer .sw-disclosure a {
	text-decoration-color: color-mix(in srgb, var(--sw-on-dark-muted) 55%, transparent);
	text-underline-offset: 0.22em;
}



.sw-footer .sw-disclosure strong {
	color: var(--sw-on-dark);
	font-weight: 500;
}

/* Cream on periwinkle measured 2.63:1. Ink on periwinkle is 6.24:1. */
.sw-footer .wp-block-button__link.has-periwinkle-background-color {
	color: var(--wp--preset--color--ink) !important;
}


/* ---------------------------------------------------------------
   15. In-page navigation
   The header is sticky, so an anchor jump would otherwise put the
   section heading underneath it.
   --------------------------------------------------------------- */

html { scroll-behavior: smooth; }

#the-work, #approach, #who-i-am, #questions, #book {
	scroll-margin-top: clamp(72px, 12vh, 120px);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------
   16. Button integrity
   A pill with a 999px radius forced to 100% of a narrow column
   collapses into a circle and breaks its label mid-word
   ("consultat / ion"). Labels never hyphenate, and buttons size
   to their content.
   --------------------------------------------------------------- */

.wp-block-button__link {
	hyphens: none;
	overflow-wrap: normal;
	word-break: keep-all;
	text-align: center;
}

/* Full-width pills only where there is room for the label. */
.wp-block-button.wp-block-button__width-100 .wp-block-button__link {
	min-width: 14ch;
}

.sw-cta__buttons { gap: 0.75rem; }

@media (max-width: 600px) {
	.wp-block-button,
	.wp-block-button .wp-block-button__link { width: 100%; }
}

/* ---------------------------------------------------------------
   17. Portrait stand-in
   Until a real photograph exists, the About column shows the
   engraved rosette rather than a broken <img> and a caption
   telling the reader the site is unfinished.
   --------------------------------------------------------------- */

.sw-portrait {
	aspect-ratio: 3 / 4;
	width: 100%;
	border: 1px solid var(--wp--preset--color--line);
	background:
		radial-gradient(circle at 50% 42%, var(--wp--preset--color--halo) 0%, transparent 58%),
		var(--wp--preset--color--bone);
	position: relative;
	overflow: hidden;
}

.sw-portrait::after {
	content: "";
	position: absolute;
	inset: 12%;
	color: var(--wp--preset--color--periwinkle);
	background: currentColor;
	opacity: 0.30;
	-webkit-mask: url("../img/guilloche-rosette.svg") center / contain no-repeat;
	mask: url("../img/guilloche-rosette.svg") center / contain no-repeat;
	animation: sw-turn 300s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.sw-portrait::after { animation: none; }
}

/* ---------------------------------------------------------------
   18. Footer
   The legal block was one centred column of dense grey running to
   62ch — it sat off the grid and outweighed everything above it.
   It is now three short columns on the same grid as the footer,
   left-aligned, set small and tight so it reads as fine print.
   --------------------------------------------------------------- */

.sw-disclosure {
	max-width: none;
	margin-inline: 0;
}

.sw-footer__label {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--wp--preset--color--periwinkle);
}

.sw-footer__lede { max-width: 34ch; }

.sw-footer__email a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.sw-footer__muted { color: var(--sw-on-dark-muted) !important; }

.sw-footer .wp-block-navigation a { text-decoration: none; }
.sw-footer .wp-block-navigation a:hover { text-decoration: underline; }

/* Outline button that works on the dark ground. */
.wp-block-button.is-style-sw-outline-dark .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--bone);
	border: 1px solid #4A4F57;
}



/* --- the legal grid --- */

.sw-legal {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
}

.sw-legal__col p {
	margin: 0 0 0.5em;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--sw-on-dark-muted);
	max-width: 44ch;
}

.sw-legal__col p:last-child { margin-bottom: 0; }

.sw-legal__head {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro) !important;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: #6E747C !important;
	margin-bottom: 0.9em !important;
}

.sw-legal strong { color: var(--wp--preset--color--bone); font-weight: 500; }

.sw-colophon p { font-size: 0.75rem; color: var(--sw-on-dark-muted) !important; margin: 0; }

@media (max-width: 860px) {
	.sw-legal { grid-template-columns: 1fr; gap: 1.75rem; }
	.sw-footer__lede { max-width: none; }
}

/* ---------------------------------------------------------------
   19. Mono, promoted
   IBM Plex Mono moves from eyebrow-only to carrying every label,
   figure and index on the page — the things a document would set
   in a typewriter face. Citron marks what is current or verifiable.
   --------------------------------------------------------------- */

:root {
	--sw-mono-label: 0.8125rem;
}

/* eyebrows: up from micro, tracking eased so they read as labels not noise */
.sw-eyebrow {
	font-size: var(--sw-mono-label);
	letter-spacing: 0.16em;
}

/* ledger column heads and the struck/kept pair */
.sw-ledger__label {
	font-size: var(--sw-mono-label);
	letter-spacing: 0.14em;
}

.sw-ledger__label--is { color: var(--wp--preset--color--periwinkle-deep); }

/* the licence register reads as a register */
.sw-standing__label {
	font-size: var(--sw-mono-label);
	letter-spacing: 0.14em;
}

.sw-standing__num {
	font-size: 0.85em;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--periwinkle-deep);
}

/* step numerals: mono, not serif — they are data, not display */
.sw-approach .sw-step .wp-block-column:first-child p {
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
	letter-spacing: 0.02em;
	color: #8E8E9B !important;
}

/* instrument superscripts */
.sw-instrument__title sup {
	font-size: 0.5em;
	letter-spacing: 0.04em;
}

/* navigation in mono — wide and deliberate. It was 0.8125rem, which is
   below the micro preset: legible, but it read as fine print sitting
   next to a logo. Mono runs optically small for its point size, so the
   header nav gets a real step up. The footer nav stays quieter. */
.sw-header .wp-block-navigation,
.sw-footer .wp-block-navigation {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
}

.sw-header .wp-block-navigation {
	font-size: 0.95rem;
	letter-spacing: 0.045em;
}

/* buttons keep the sans — mono at button size reads as a terminal prompt */

/* --- citron, used sparingly: it marks the resolved side of a pair --- */

.sw-claim__is { color: var(--wp--preset--color--periwinkle-deep); }

/* the strike stays periwinkle; the kept column picks up citron */
.sw-ledger__is::before {
	content: "";
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	margin-right: 0.6em;
	vertical-align: 0.08em;
	background: var(--wp--preset--color--citron);
	border-radius: 50%;
}

/* citron is too light for text — only ever a fill, a rule or a mark */
.sw-instrument--accent { border-top-color: var(--wp--preset--color--citron); }

.sw-footer__label { color: var(--wp--preset--color--citron); }

.sw-legal__head { color: #7E8489 !important; }

.wp-block-details summary::after { color: var(--wp--preset--color--periwinkle-deep); }

@media (max-width: 640px) {
	.sw-ledger__is::before { display: none; }
}

/* ---------------------------------------------------------------
   20. The live state
   One rule for the whole site: periwinkle is Sage Ware at rest —
   the logo, the mark, the engraving. Citron is what answers you.
   Every hover, focus and selection resolves to citron, so the
   colour means "this responds" rather than decorating.
   Citron on ink measures 13.3:1, the loudest legible pair here.
   --------------------------------------------------------------- */

:root { --sw-live: var(--wp--preset--color--citron); }

/* --- buttons --- */

.wp-block-button__link {
	transition:
		background-color 200ms var(--sw-ease),
		border-color 200ms var(--sw-ease),
		color 200ms var(--sw-ease);
}

.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus-visible {
	background-color: var(--sw-live);
	border-color: var(--sw-live);
	color: var(--wp--preset--color--ink);
}

/* outline variants fill on hover rather than just swapping ink */
.wp-block-button.is-style-sw-outline .wp-block-button__link:hover,
.wp-block-button.is-style-sw-outline .wp-block-button__link:focus-visible,
.wp-block-button.is-style-sw-outline-dark .wp-block-button__link:hover,
.wp-block-button.is-style-sw-outline-dark .wp-block-button__link:focus-visible {
	background-color: var(--sw-live);
	border-color: var(--sw-live);
	color: var(--wp--preset--color--ink);
}

/* --- links --- */

.sw-footer a:hover,
.sw-footer a:focus-visible,
.sw-footer .sw-disclosure a:hover,
.sw-approach a:hover {
	color: var(--sw-live) !important;
}

/* --- navigation --- */

.sw-header .wp-block-navigation a,
.sw-footer .wp-block-navigation a {
	position: relative;
	transition: color 200ms var(--sw-ease);
}

.sw-header .wp-block-navigation a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -0.4em;
	height: 2px;
	background: var(--sw-live);
	scale: 0 1;
	transform-origin: left center;
	transition: scale 260ms var(--sw-ease);
}

.sw-header .wp-block-navigation a:hover::after,
.sw-header .wp-block-navigation a:focus-visible::after { scale: 1 1; }

/* --- cards, rows, questions --- */

.sw-instrument { transition: border-top-color 220ms var(--sw-ease); }
.sw-instrument:hover { border-top-color: var(--sw-live); }

.sw-standing__row,
.sw-ledger__row { transition: background-color 200ms var(--sw-ease); }

.sw-standing__row:hover,
.sw-ledger__row:hover { background-color: color-mix(in srgb, var(--sw-live) 16%, transparent); }

/* .sw-step hover lives in section 27 — citron over a dark ground
   composites to olive, so the dark band gets its own treatment. */

.wp-block-details summary { transition: color 200ms var(--sw-ease); }
.wp-block-details summary:hover { color: var(--wp--preset--color--periwinkle-deep); }
.wp-block-details[open] summary::after,
.wp-block-details summary:hover::after { color: var(--wp--preset--color--periwinkle-deep); }

.sw-postlist__item .wp-block-post-title a {
	background-image: linear-gradient(var(--sw-live), var(--sw-live));
	background-size: 0 3px;
}
.sw-postlist__item:hover .wp-block-post-title a { background-size: 100% 3px; }

/* --- focus, everywhere ---
   Citron alone is 1.24:1 on cream — invisible as a focus ring. A dark
   ring with a citron halo outside it reads on any ground, and keeps
   the live colour doing the signalling. */

:where(a, button, summary, input, select, textarea, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--sw-live);
	border-radius: 2px;
}

/* on the dark band and the footer the two swap round */
.sw-approach :focus-visible,
.sw-footer :focus-visible {
	outline-color: var(--sw-live);
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--sw-live) 35%, transparent);
}

/* a filled button already sits on citron when focused — ring goes dark only */
.wp-block-button .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	box-shadow: none;
}

/* --- selection --- */

::selection {
	background: var(--sw-live);
	color: var(--wp--preset--color--ink);
}

/* --- the logo answers too --- */

.sw-brand__logo { transition: opacity 200ms var(--sw-ease); }

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link,
	.sw-header .wp-block-navigation a::after,
	.sw-instrument,
	.sw-standing__row,
	.sw-ledger__row,
	.sw-step { transition: none; }
	.sw-header .wp-block-navigation a::after { scale: 1 1; opacity: 0; }
	.sw-header .wp-block-navigation a:hover::after { opacity: 1; }
}

/* ---------------------------------------------------------------
   21. Measure
   Measured against the real column widths: the about story ran 83
   characters a line, the FAQ answers 92, the licence note 175.
   Comfortable reading is 45–75, and 65 is the target. Capping the
   text rather than narrowing the columns keeps the layout intact.
   --------------------------------------------------------------- */

.sw-credibility p,
.sw-faq .wp-block-details p,
.sw-cta p,
.sw-approach .sw-step .wp-block-column:last-child p,
.sw-proof > p,
.sw-instrument__body,
.sw-hero .wp-block-column p {
	max-width: 64ch;
}

/* the licence note runs the full wide container — hardest cap of all */
.sw-proof > p.alignwide { max-width: 72ch; }

/* headings break on sense, paragraphs avoid orphans */
h1, h2, h3, .sw-claim, .sw-instrument__title {
	text-wrap: balance;
}

p, .sw-ledger__was, .sw-ledger__is, .sw-standing__value {
	text-wrap: pretty;
}

/* display headlines want a shorter measure than body — they set the
   section, and a 3-line heading reads better than a 2-line slab */
.sw-instruments > h2,
.sw-proof > h2,
.sw-approach > h2 { max-width: 24ch; }

.sw-credibility h2,
.sw-cta h2 { max-width: 18ch; }

.sw-faq h2 { max-width: 14ch; }

/* ---------------------------------------------------------------
   22. Column rhythm
   Sibling columns share a top edge and a baseline, and the narrow
   label column stays narrow instead of stretching on wide screens.
   --------------------------------------------------------------- */

.sw-faq .wp-block-column:first-child,
.sw-credibility .wp-block-column:first-child {
	position: sticky;
	top: clamp(88px, 14vh, 150px);
	align-self: start;
}

@media (max-width: 860px) {
	.sw-faq .wp-block-column:first-child,
	.sw-credibility .wp-block-column:first-child { position: static; }
}

/* the three instruments must sit on one baseline regardless of copy length */
.sw-instruments .wp-block-columns { align-items: stretch; }
.sw-instruments .wp-block-column { display: flex; }
.sw-instrument { display: flex; flex-direction: column; gap: 0.9rem; width: 100%; }
.sw-instrument__body { margin-top: 0; flex: 1; }

/* approach: the three tracks align to the same top, numerals optically
   raised so they sit with the cap height of the heading beside them */
.sw-step { align-items: baseline; }
.sw-step .wp-block-column:first-child p { line-height: 1; }

/* ---------------------------------------------------------------
   23. Citron is a fill, never a letterform
   1.24:1 on cream — it cannot be text there at any size. On hover a
   link keeps its ink and citron goes behind it like a marker pen.
   --------------------------------------------------------------- */

.sw-tension a, .sw-proof a, .sw-faq a, .sw-credibility a, .sw-cta a,
.sw-instruments a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	background-image: linear-gradient(var(--wp--preset--color--citron), var(--wp--preset--color--citron));
	background-repeat: no-repeat;
	background-size: 0 0.85em;
	background-position: 0 88%;
	transition: background-size 240ms var(--sw-ease), color 240ms var(--sw-ease);
	padding: 0 0.08em;
}

.sw-tension a:hover, .sw-proof a:hover, .sw-faq a:hover,
.sw-credibility a:hover, .sw-cta a:hover, .sw-instruments a:hover,
.sw-tension a:focus-visible, .sw-proof a:focus-visible, .sw-faq a:focus-visible,
.sw-credibility a:focus-visible, .sw-cta a:focus-visible, .sw-instruments a:focus-visible {
	background-size: 100% 0.85em;
	color: var(--wp--preset--color--ink) !important;
	text-decoration-color: transparent;
}

/* the kept column and the licence figures go back to the brand blue */
.sw-ledger__label--is,
.sw-standing__num { color: var(--wp--preset--color--periwinkle-deep); }

.wp-block-details summary:hover { color: var(--wp--preset--color--periwinkle-deep); }
.wp-block-details[open] summary::after,
.wp-block-details summary::after { color: var(--wp--preset--color--periwinkle); }

/* ---------------------------------------------------------------
   24. Measured corrections from the live page
   Three faults found by measuring the rendered document, not by eye.
   --------------------------------------------------------------- */

/* (a) The ledger strike overhung its text by 198px. The span is a grid
   child, so display:block stretched it to the full 435px cell while the
   words only filled 237. Hugging the text fixes the dangling rule. */
.sw-ledger__was,
.sw-ledger__is {
	width: fit-content;
	max-width: 100%;
}

/* (b) Heading measures were computing to 1312px — WordPress's
   `.wp-block-group.is-layout-constrained > .alignwide` (0,3,1) outranks
   a section class, so every cap I set was being discarded. These have to
   out-specify the framework rather than politely lose to it. */
.sw-instruments > .wp-block-heading,
.sw-proof > .wp-block-heading,
.sw-approach > .wp-block-heading { max-width: 26ch !important; }

.sw-credibility .wp-block-heading,
.sw-cta .wp-block-heading { max-width: 20ch !important; }

.sw-faq .wp-block-column:first-child .wp-block-heading { max-width: 15ch !important; }

/* (c) The three instruments were running 22 characters a line at 1024px
   and still sitting three-across. Three columns need roughly 1150px to
   hold a readable measure; below that they go to one. */
@media (max-width: 1150px) {
	.sw-instruments .wp-block-columns {
		flex-wrap: wrap !important;
		gap: var(--wp--preset--spacing--40);
	}
	.sw-instruments .wp-block-column {
		flex-basis: 100% !important;
		flex-grow: 1;
	}
	.sw-instrument { padding-top: var(--wp--preset--spacing--20); }
}

@media (min-width: 1151px) {
	.sw-instrument__body { max-width: 38ch; }
}

/* ---------------------------------------------------------------
   25. Proportion
   The approach grid gave 14% of the row to a two-character numeral
   and left a hole beside it. A fixed track sized to the figure keeps
   the three tracks in proportion at every width.
   --------------------------------------------------------------- */

@media (min-width: 861px) {
	.sw-approach .sw-step {
		display: grid !important;
		grid-template-columns: 4.5rem minmax(8rem, 15ch) 1fr;
		gap: clamp(1.5rem, 4vw, 3.5rem);
		align-items: baseline;
	}
	.sw-approach .sw-step .wp-block-column {
		flex-basis: auto !important;
		width: auto !important;
		margin: 0 !important;
	}
}

/* superscripts were reading as specks — give them a size and a lift */
.sw-instrument__title sup {
	font-size: 0.42em;
	top: -0.9em;
	letter-spacing: 0.06em;
	opacity: 0.9;
}

/* the instrument rule is the object's anchor — make it read as one */
.sw-instrument {
	border-top-width: 2px;
	padding-top: var(--wp--preset--spacing--30);
}

/* ---------------------------------------------------------------
   26. Vertical rhythm
   Every section carried identical top and bottom padding, which reads
   as a template. Section openers get more air above than below, so a
   heading belongs to the block under it rather than floating between.
   --------------------------------------------------------------- */

.sw-instruments > .sw-eyebrow,
.sw-proof > .sw-eyebrow,
.sw-approach > .sw-eyebrow,
.sw-tension > .sw-eyebrow { margin-bottom: 0.9rem; }

.sw-ledger { margin-top: var(--wp--preset--spacing--40); }
.sw-standing { margin-top: var(--wp--preset--spacing--20); }

/* the marquee is a rule, not a section — it should feel like a hairline
   band between two rooms, not a third room */
.sw-marquee { padding-block: 1.1rem !important; }
.sw-marquee__group { gap: 2.25rem; padding-right: 2.25rem; }

/* ---------------------------------------------------------------
   27. The dark band
   Two faults, one cause.

   (a) `ink` was #1A1613 — hue 26, a warm brown-black. Defensible for
       a letterform on cream, wrong for a full-bleed surface: as a band
       it read as a hole cut in the page. `ink` is now #17181F, hue 232,
       in line with periwinkle at 227, and the band is lifted off it so
       it reads as a room you have walked into.

   (b) The row hover was citron at 8% over that brown-black. Citron is
       a yellow-green; at low alpha over a dark warm ground it
       composites to #292718 — swamp. The tint was never wrong on
       cream, where it reads as a pale highlighter. It was wrong on
       dark.

   The band becomes a cool slate that leans toward the periwinkle in
   the logo, and the hover lift becomes periwinkle rather than citron.
   Citron stays the live signal, but as an edge rule — a mark, not a
   wash — which is how it behaves on a dark ground without going olive.
   --------------------------------------------------------------- */

.sw-approach.has-ink-background-color,
.sw-approach {
	--sw-band: #20222E;
	background-color: var(--sw-band) !important;
}

/* hairlines: lifted off the new ground, still quiet */
.sw-approach .sw-step,
.sw-approach .sw-step + .sw-step {
	border-color: #3A3D4B !important;
}

/* step body: 8.46:1 on the band, up from a muddier grey */
.sw-approach .sw-step .wp-block-column:last-child p {
	color: #B9BEC7 !important;
}

/* numerals: cool grey with periwinkle in it, 6.58:1 — they belong to
   the band now instead of floating on it */
.sw-approach .sw-step p:first-child,
.sw-approach .sw-step .wp-block-column:first-child p {
	color: #A0A6C4 !important;
}

/* --- the hover, rebuilt --- */

.sw-step {
	position: relative;
	transition: background-color 220ms var(--sw-ease);
}

/* the citron edge: a rule that grows from the row's centre line */
.sw-step::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--sw-live);
	scale: 1 0;
	transform-origin: center;
	transition: scale 260ms var(--sw-ease);
}

.sw-step:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--periwinkle) 10%, transparent);
}

.sw-step:hover::before,
.sw-step:focus-within::before { scale: 1 1; }

@media (prefers-reduced-motion: reduce) {
	.sw-step::before { transition: none; }
}

/* ---------------------------------------------------------------
   28. Optical size, not nominal size
   The FAQ questions were set at `large` — the same 1.1875rem as the
   answers beneath them. Identical numbers, but Instrument Serif has a
   markedly smaller x-height than Instrument Sans, so the question read
   as *smaller* than its own answer. The question is the thing being
   asked; it has to lead. Sized up to clear the body text optically and
   given a display line-height so two-line questions set as a unit.
   --------------------------------------------------------------- */

.wp-block-details summary {
	font-size: clamp(1.45rem, 1.9vw, 1.7rem);
	line-height: 1.24;
	letter-spacing: -0.01em;
	padding-block: 0.15em;
}

/* the marker was sized against the old summary — bring it up with it */
.wp-block-details summary::after { font-size: 1.25rem; }

/* the answer now sits clearly under the question rather than beside it
   in weight — give it the step down it was missing */
.sw-faq .wp-block-details p { font-size: var(--wp--preset--font-size--medium); }

/* same fault, same fix, wherever a serif label sits against sans body */
.sw-instrument__title { line-height: 1.18; }

/* The ledger and standing values are serif and bottom out at 1.15rem.
   Body sans is 1.1875rem. Below roughly 1100px the serif was therefore
   nominally *and* optically smaller than the paragraphs around it —
   the same inversion as the FAQ, just harder to catch because it only
   appears at narrow widths. Floors raised so the serif always leads. */
.sw-ledger__was,
.sw-ledger__is { font-size: clamp(1.4rem, 2.2vw, 1.75rem); }

.sw-standing__value { font-size: clamp(1.35rem, 2.2vw, 1.65rem); }