/*
Theme Name: Absolute David
Theme URI: https://davidyarde.com
Description: David Yarde's personal site. Child of Lovable Atmosphere. Editorial-monochrome: architectural display type on one canvas that follows the visitor's light or dark choice, ruled sections, and a single gold accent.
Author: David Yarde
Template: lovableatmosphere
Version: 1.28.0
Text Domain: absolutedavid
*/

/* ============================================================
   ABSOLUTE — the design system
   ------------------------------------------------------------
   Direction set 20 August 2026 against a luxury-editorial
   reference (private aviation, "cockpit twilight over
   parchment"). Four devices were taken deliberately:

     1. Architectural display type — heavy weight at hero scale
        with negative tracking, so the headline reads as built
        rather than written.
     2. Monochrome plus ONE accent: gold, only as a lit phrase,
        a focus ring, a 1px rule or a hover trace.
     3. ONE canvas per page (light or dark, the visitor's choice).
        Sections are separated by a blueprint datum line and
        generous space, never by a colour shift. No shadows.
     4. Asymmetric hero: wordmark flush left, statement offset
        right.

   Device 4 is a RECOVERY, not an import. drkphoenix v7.0 —
   the theme that ran here before the hybrid conversion — set
   its headline with `large-offset-4`, offset right to clear
   David in the hero photograph. The reference arrived at the
   same composition for a different reason.

   WHAT WAS NOT TAKEN: the reference's terracotta. #F4B617 has
   survived every version of this site since drkphoenix and is
   the only constant across all of them. A borrowed accent
   would have traded the one piece of continuity this site has
   for a closer resemblance to somebody else's brand.
   ============================================================ */

:root {
	/* One canvas, two schemes. Every colour is a light-dark() pair so the page
	   follows the visitor's choice (the parent sets `color-scheme: light dark`
	   on :root, which is what makes the pairs resolve). Grounds and ink are the theme.json pairs. Muted is #555 / #999: 6.9:1 and
	   6.1:1 on their grounds, so it passes 4.5:1 in both (a fixed #555 is 2.6:1 on dark). */
	--abs-paper   : light-dark(#f9f6f1, #1a1a1a);
	--abs-ink     : light-dark(#1a1a1a, #f0f0f0);
	/* Secondary reading text: the theme.json "Strong Accents" grey, tan on dark. */
	--abs-ink-2   : light-dark(#4a4a4a, #cdc1b0);
	/* Muted: captions, meta, labels. */
	--abs-ink-dim : light-dark(#555555, #999999);
	/* Hairline between rows and sections (decoration), and the stronger line that
	   draws a control's edge (needs 3:1 against the canvas). */
	--abs-rule    : light-dark(#d4cfc6, #3a3a3a);
	--abs-line    : light-dark(#767676, #8a8a8a);
	/* Errors, readable on both canvases. */
	--abs-error   : light-dark(#8a1414, #ff9d9d);

	/* Gold is only ever: a lit phrase (dark canvas), a focus ring, a 1px rule
	   or hover trace. Never a fill, never a label ornament, never an index. */
	--abs-gold    : #F4B617;
	/* What a lit phrase is set in, and what rules, hover traces and focus rings
	   are drawn in. Colour blocks (below) restate both: gold is lost on amber. */
	--abs-lit     : light-dark(var(--abs-ink), var(--abs-gold));
	--abs-accent  : var(--abs-gold);

	/* Minor third (1.2) from a 20px base, which is the reference's
	   progression. The hero is NOT the reference's 187px: that
	   figure carries a two-word headline, and this site's
	   statement is eleven words. Sized to the actual sentence. */
	--abs-t-hero   : clamp(2.75rem, 7.2vw, 6.5rem);
	--abs-t-display: clamp(2rem, 4.4vw, 3.9rem);
	--abs-t-title  : clamp(1.5rem, 2.4vw, 2.25rem);
	--abs-t-lead   : clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
	--abs-t-body   : 1.125rem;
	--abs-t-micro  : 0.875rem; /* raised from 12px to 14px (David, 2026-10-12): dates, labels and contents read better */

	--abs-band-gap : clamp(3.5rem, 8vh, 6.5rem);
	--abs-gutter   : clamp(1.5rem, 5vw, 5rem);
	--abs-measure  : 1200px;
}

/* ============================================================
   THE FRAME: ground, header, footer and the scheme switch
   ------------------------------------------------------------
   The parent paints the page from its --atm-* surface tokens (a
   warm brown in dark, #fff8f2 in light) and keeps its footer dark in
   both schemes. Pointing the tokens at this theme's pair puts the
   header, the page and the footer on the same canvas, so nothing
   shows as a stripe between the last section and the footer.
   ============================================================ */
/* `html:root` (0,1,1) and not `:root` (0,1,0): the parent's dark-mode-styles.css
   declares the same tokens on `:root` and loads after this file, so at equal
   specificity it won, and the search panel and the menu drawer kept the
   parent's warm brown. Every surface the parent paints from these tokens now
   lands on the one canvas, in light and in dark. */
html:root {
	--atm-surface: var(--abs-paper);
	--atm-surface-container-lowest: var(--abs-paper);
	--atm-surface-container-low: var(--abs-paper);
	--atm-surface-container: var(--abs-paper);
	--atm-surface-container-high: var(--abs-paper);
	--atm-on-surface: var(--abs-ink);
	--atm-on-surface-variant: var(--abs-ink-2);
	--atm-border: var(--abs-rule);
	--atm-outline: var(--abs-ink);
	--atm-outline-variant: var(--abs-line);
	--atm-inverse-surface: var(--abs-ink);
	--atm-inverse-on-surface: var(--abs-paper);
}
body { background-color: var(--abs-paper); color: var(--abs-ink); }
.site-header { background-color: var(--abs-paper); }
.site-header[data-sticky="hidden"],
.site-header[data-sticky="yes"] { box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--abs-rule); }
.site-footer, footer.site-footer { background: var(--abs-paper); color: var(--abs-ink-dim); border-top: 1px solid var(--abs-rule); }
.site-footer a { color: var(--abs-ink); }
.site-footer .site-info { border-top: 0; }
.site-footer .copyright p { color: var(--abs-ink-dim); }
/* A full-width page ends on its last section, so the parent's bottom margins
   on the content would be the 48px band of body ground above the footer. */
.site-main.full-width,
.site-main.full-width .entry-content { margin-block-end: 0; }

/* The header mark: the DY monogram (assets/brand/dy-monogram-small.svg, the
   header-size drawing of dy-monogram.svg, inlined by functions.php) beside the
   Site Title set as live text in Hanken Grotesk 700. The monogram's inks are
   tokens, so both follow the canvas; its gold centre dashes stay gold. The D's
   hatch is drawn at full strength and 9 units wide: at 44px anything lighter
   reads as a grey wireframe beside the Y. The Y's widths are in the drawing. */
.site-branding .site-logo .custom-logo-link { display: inline-flex; align-items: center; gap: .75rem; color: var(--abs-ink); text-decoration: none; }
/* Holding the logo opens a hidden page (assets/js/after-hours-clue.js); keep touch from offering the link menu. */
.site-branding .site-logo a { -webkit-touch-callout: none; }
.abs-logo__mark { display: block; height: 2.75rem; width: auto; flex: none; overflow: visible; }
.abs-logo__mark .f { fill: var(--abs-paper); stroke: var(--abs-ink); stroke-width: 9; stroke-linejoin: round; }
.abs-logo__mark .e { fill: none; stroke: var(--abs-ink); stroke-width: 9; stroke-linecap: round; }
.abs-logo__name { font-family: inherit; font-weight: 700; font-size: 1.125rem; letter-spacing: -.01em; line-height: 1; white-space: nowrap; }

/* The scheme switch comes from the Companion's dark-mode-toggle extension: with
   its Customizer position set to "Header", its own script moves the button into
   `.header-actions`, beside Search (visible on phones too). This only sets its
   look: a quiet 44px target, ink line, no background. */
.header-actions > .lvbl-color-scheme-toggle[data-position="header"] {
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--abs-ink-dim);
}
.header-actions > .lvbl-color-scheme-toggle[data-position="header"]:hover { background: transparent; color: var(--abs-ink); }

/* The menu drawer slides in three stacked panels (the parent paints them gold,
   white and a warm tan). The first is a hairline sweep now, the rest the canvas. */
.bg-panel,
.bg-panel.second { background: var(--abs-paper); }
.bg-panel.first { background: var(--abs-rule); }
/* The close buttons: ink on the canvas (the parent's gold is 1.69:1 on cream).
   The search button's padding squeezed its 18px drawing to 0px wide, so the
   close mark never showed; it is a 44px circle with the cross centred in it. */
.menu-header .menu-close-button { color: var(--abs-ink); }
.search-close { padding: 0; }
.search-close svg { flex: none; width: 18px; height: 18px; }
/* One focus treatment for the parent's own controls too: ink outline, gold ring. */
html :is(.menu-button, .menu-toggle, .search-toggle, .menu-close-button, .search-close, .menu-link, .dropdown-toggle, .sub-menu-link, .search-submit):focus-visible {
	outline: 2px solid var(--abs-ink);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--abs-accent);
}

/* ============================================================
   SECTIONS ON ONE CANVAS
   ------------------------------------------------------------
   Every section sits on the same ground. `.abs-band--paper|dim|
   night|green|amber` and the `is-style-band-*` block styles stay
   in the markup (patterns and saved pages use them) but are all
   neutral: they carry no background and no colour-scheme pin.
   What separates sections is a datum line (see .abs-band::before)
   and the space above it.
   ============================================================ */
:is(.abs-band,.is-style-band-paper,.is-style-band-dim,.is-style-band-night) {
	position: relative;
	padding-block: calc(var(--abs-band-gap) + 1.75rem) var(--abs-band-gap);
	padding-inline: var(--abs-gutter);
	background: transparent;
	color: var(--abs-ink);
}
.abs-band__inner {
	max-width: var(--abs-measure);
	margin-inline: auto;
	/* The parent gives every .wp-block-group 1.5rem top and bottom, which put 24px
	   of extra air above the first and below the last element of every band that
	   was not the first or last child of its own parent. The band's padding is the
	   only space at its edges: 92 above (64 gap + 28 datum line), 64 below. */
	margin-block: 0;
}

/* The datum line: a 1px rule that overruns the gutter to the viewport edges,
   a tick at the content's left edge and a short ruler hanging under it. The
   same vocabulary as the construction drawing. It is a border-less pseudo
   element, so it costs nothing in the flow and carries no meaning for a
   screen reader. `--abs-datum-x` is the content's left edge: the gutter, plus
   half of whatever the 84rem measure leaves over. */
:is(.abs-band,.is-style-band-paper,.is-style-band-dim,.is-style-band-night):not(.abs-hero) {
	--abs-datum-x: calc(var(--abs-gutter) + max(0px, (100% - 2 * var(--abs-gutter) - 84rem) / 2));
}
:is(.abs-band,.is-style-band-paper,.is-style-band-dim,.is-style-band-night):not(.abs-hero)::before {
	content: "";
	position: absolute;
	top: var(--abs-band-gap);
	left: 0;
	right: 0;
	border-top: 1px solid var(--abs-rule);
	pointer-events: none;
}
:is(.abs-band,.is-style-band-paper,.is-style-band-dim,.is-style-band-night):not(.abs-hero)::after {
	content: "";
	position: absolute;
	top: calc(var(--abs-band-gap) - 5px);
	left: var(--abs-datum-x);
	width: 5rem;
	height: 11px;
	pointer-events: none;
	background:
		linear-gradient(var(--abs-ink), var(--abs-ink)) 0 0 / 1px 11px no-repeat,
		repeating-linear-gradient(90deg, var(--abs-ink-dim) 0 1px, transparent 1px 8px) 0 6px / 5rem 5px no-repeat;
}
/* ── COLOUR BLOCKS ───────────────────────────────────────────────────────────
   Two per page at most, at story beats: an amber block and a deep-green block.
   Fixed colours that look the same in light and dark. The block restates the
   tokens, so every rule that reads them (type, rules, datum line, ruler, FPO,
   buttons, forms, the carousel) lands on the block's own ground without a
   second set of selectors. `abs-band--green|amber` is the hand-written class;
   `is-style-band-green|amber` is the block style an editor picks.
   Green: cream 12.9:1, tan 7.8:1, gold 7.6:1. Amber: ink 9.6:1, deep brown 8.5:1. */
:is(.abs-band--green,.is-style-band-green) {
	--abs-paper: #10322C;
	--abs-ink: #f9f6f1;
	--abs-ink-2: #cdc1b0;
	--abs-ink-dim: #cdc1b0;
	--abs-rule: #2f524b;
	--abs-line: #8fa89f;
	--abs-lit: var(--abs-gold);
	--abs-accent: var(--abs-gold);
	--abs-error: #ffb3a8;
	background: var(--abs-paper);
	color: var(--abs-ink);
	color-scheme: dark;
}
:is(.abs-band--amber,.is-style-band-amber) {
	--abs-paper: #F4B617;
	--abs-ink: #1a1a1a;
	--abs-ink-2: #2b2414;
	--abs-ink-dim: #3a2f12;
	--abs-rule: #c99410;
	--abs-line: #1a1a1a;
	--abs-lit: #1a1a1a;
	--abs-accent: #1a1a1a;
	--abs-error: #5c0a0a;
	background: var(--abs-paper);
	color: var(--abs-ink);
	color-scheme: light;
}

/* On a colour block the band-gap above the datum line would be a plain strip
   of the block's colour, so the line sits on the block's top edge instead. The
   content keeps a full band-gap under it, matching the block's bottom padding,
   so the block breathes evenly inside its colour. The tick keeps only the half that
   hangs below the line (the half above would poke into the section before),
   and the ruler stays right under the line. The hero has no datum line. */
.abs-band:is(.abs-band--green,.abs-band--amber,.is-style-band-green,.is-style-band-amber):not(.abs-hero) {
	padding-block-start: var(--abs-band-gap);
}
.abs-band:is(.abs-band--green,.abs-band--amber,.is-style-band-green,.is-style-band-amber):not(.abs-hero)::before { top: 0; }
.abs-band:is(.abs-band--green,.abs-band--amber,.is-style-band-green,.is-style-band-amber):not(.abs-hero)::after {
	top: 0;
	height: 6px;
	background:
		linear-gradient(var(--abs-ink), var(--abs-ink)) 0 0 / 1px 6px no-repeat,
		repeating-linear-gradient(90deg, var(--abs-ink-dim) 0 1px, transparent 1px 8px) 0 1px / 5rem 5px no-repeat;
}

/* Section labels. Readable, sentence case, muted: the datum line above them
   does the structural work the gold dash and the tracked capitals used to do.
   Micro step (0.75rem). */
.abs-label {
	font-size: var(--abs-t-micro);
	letter-spacing: .01em;
	font-weight: 600;
	margin: 0 0 var(--abs-band-gap);
	color: var(--abs-ink-dim);
}

/* ---------- the statement ----------
   Offset right, which is drkphoenix's large-offset-4 recovered rather than the
   reference's asymmetry imported. Weight 700 with negative tracking is where
   the "architectural" reading comes from; at this size the default tracking
   leaves the words looking spaced out rather than built. */
.abs-statement {
	font-size: var(--abs-t-hero);
	font-weight: 700;
	line-height: .98;
	letter-spacing: -.03em;
	margin: 0;
	max-width: 20ch;
	margin-inline-start: auto;
	text-wrap: balance;
}

/* The one gold thing on the page. Inline markup survives here because this
   heading is NOT run through split-words: that animation rebuilds an element
   from its textContent and would delete the span on init. */
.abs-gold { color: var(--abs-lit); }

.abs-lede {
	font-size: var(--abs-t-lead);
	line-height: 1.55;
	max-width: 46ch;
	margin: var(--abs-band-gap) 0 0 auto;
	color: var(--abs-ink-dim);
}

/* ---------- prose ---------- */
.abs-prose {
	font-size: var(--abs-t-lead);
	line-height: 1.6;
	max-width: 42ch;
	margin: 0 0 1.25em;
}

/* Two classes: the parent's `.entry-content h2` (0,1,1) beat the single-class
   margin and the heading sat 14px off its paragraph instead of .6em. */
.entry-content .abs-title {
	font-size: var(--abs-t-display);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -.022em;
	margin: 0 0 2.5rem;
	max-width: 18ch;
}

.abs-cta {
	display: inline-block;
	font-size: var(--abs-t-body);
	font-weight: 700;
	letter-spacing: -.01em;
	color: inherit;
	text-decoration: none;
	border-bottom: 2px solid currentColor;
	padding-bottom: .12em;
}
.abs-cta--gold { border-bottom-color: var(--abs-accent); }
.abs-cta-row { display: flex; flex-wrap: wrap; gap: .75rem 2rem; }

/* Gold never carries words: the call to action is ink with a gold 1px rule. */
.abs-cta--gold { color: inherit; border-bottom-width: 1px; }

/* ---------- testimonials ----------
   Verbatim, undated, attributed exactly as published on drkphoenix. Three of
   the seven recovered; the rest are in docs/testimonials-recovered.json. */
.abs-quotes {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	margin-block-start: var(--abs-band-gap);
}
/* Three quotes are obviously a set, so their signatures belong on one line.
   Measured before this: the names sat at y=5326, 5410 and 5326, because each
   figcaption simply followed its own paragraph and the middle quote is the
   longest. Grid items already stretch to the row height, so the caption only
   needs pushing to the bottom of its own column. */
.abs-quote {
	margin: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.abs-quote figcaption { margin-block-start: auto; padding-block-start: 1.25rem; }
.abs-quote p {
	font-size: var(--abs-t-body);
	line-height: 1.55;
	margin: 0 0 .9em;
}
.abs-quote cite {
	font-style: normal;
	font-size: .8125rem;
	letter-spacing: .01em;
	color: var(--abs-ink-dim);
}

/* ---------- a plain list with rules ----------
   For a handful of parallel promises (what a speaker will do, what a
   collaborator gets). Ruled lines carry the structure, not bullets or boxes.
   Two classes because the parent theme's `.entry-content ul` would otherwise
   win the margin and padding. */
.entry-content .abs-expect {
	list-style: none;
	margin: var(--abs-band-gap) 0 0;
	padding: 0;
	border-top: 1px solid var(--abs-rule);
	max-width: 44rem;
}
.entry-content .abs-expect li {
	margin: 0;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--abs-rule);
	font-size: var(--abs-t-body);
	line-height: 1.55;
}

@media (max-width: 48em) {
	/* The offset is the point at desktop and a liability on a phone: a
	   right-aligned block in a narrow column reads as a mistake, and the
	   statement is the first thing anyone sees. */
	.abs-statement,
	.abs-lede { margin-inline-start: 0; max-width: none; }
}

/* ── HEADINGS AND THE LIT PHRASE ──────────────────────────────────────────────
   The parent colours h1-h6 at (0,0,1), which outranks anything inherited from a
   section, so headings state their colour. The lit phrase is gold on the dark
   canvas (9.6:1) and ink on the light one: gold on cream is 1.69:1, so there
   the weight (700 against 300) carries it. */
:is(.abs-band,.is-style-band-paper,.is-style-band-dim,.is-style-band-night) :is(h1, h2, h3, h4, h5, h6) { color: var(--abs-ink); }
:is(.abs-band,.is-style-band-paper,.is-style-band-dim,.is-style-band-night) .abs-prose { color: var(--abs-ink-dim); }
:is(.abs-band,.is-style-band-paper,.is-style-band-dim,.is-style-band-night) :is(h1, h2) .abs-gold { color: var(--abs-lit); }

/* ── FULL BLEED, ACTUALLY ─────────────────────────────────────────────────────
   The bands were rendering inset by 20px with 28px of padding, framed by the
   body's dark ground — which is not a full-bleed band, it is a card. The parent
   applies content_width (1400px, a theme_mod) to top-level blocks, and its
   block padding rule was also beating the gutter set on .abs-band.

   The rule to beat is `.site-main.full-width .entry-content > *` in
   theme-styles.css, which is (0,3,0). A first attempt at (0,2,0) lost silently
   and the bands stayed inset, which is why the selector is longer than it looks
   like it needs to be: (0,4,0) wins outright rather than relying on load order.
   Still no !important, and still scoped to direct children of .entry-content so
   it cannot escape and restyle groups elsewhere. */
.site-main.full-width .entry-content > :is(.abs-band,.is-style-band-paper,.is-style-band-dim,.is-style-band-night),
.entry-content > :is(.abs-band,.is-style-band-paper,.is-style-band-dim,.is-style-band-night) {
	max-width: none;
	width: 100%;
	margin-inline: 0;
	padding-inline: var(--abs-gutter);
}

/* ---------- the writing feed ----------
   A live core/query, not a hand-written list. The local database is development
   data and the production site has different posts, so anything typed in here
   would have been wrong the moment it shipped. The feed asks WordPress. */
.abs-feed {
	margin-block: var(--abs-band-gap);
	border-top: 1px solid var(--abs-rule);
}
.abs-feed .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
}
.abs-feed .wp-block-post-template > li {
	display: grid;
	grid-template-columns: 9rem 1fr;
	gap: clamp(.5rem, 2vw, 2rem);
	align-items: baseline;
	padding-block: clamp(1rem, 2.5vh, 1.6rem);
	border-bottom: 1px solid var(--abs-rule);
}

/* Dates are shown. A site claiming to lead with current thinking that hides
   when it thought is arguing against itself — the position taken on Sevenality,
   and it applies to its author too. */
.abs-feed__date {
	margin: 0;
	font-size: .8125rem;
	letter-spacing: .01em;
	color: var(--abs-ink-dim);
}
/* Two classes, because one lost. core/post-title renders an h3 and the parent
   styles headings via `.entry-content h3` at (0,1,1), which beat a single class
   and left 36px above and 14px below every title — 50px of a 135px row that
   nobody asked for and that reads as loose rhythm rather than as a bug. */
.abs-feed .abs-feed__title { margin: 0; font-size: var(--abs-t-title); line-height: 1.12; letter-spacing: -.015em; }
.abs-feed__title a { color: var(--abs-ink); text-decoration: none; }
.abs-feed__title a:hover,
.abs-feed__title a:focus-visible { text-decoration: underline; text-decoration-color: var(--abs-accent); text-underline-offset: .15em; }

@media (max-width: 40em) {
	/* The date column collapses rather than squeezing a 9rem gutter out of a
	   360px screen and leaving the titles two words wide. */
	.abs-feed .wp-block-post-template > li { grid-template-columns: 1fr; gap: .35rem; }
}


/* ── THE HERO ────────────────────────────────────────────────────────────────
   One statement, the full measure, at the ramp's own hero step. The split is
   gone and the photograph became its own band.

   WHY: a 56% column cannot hold display type. At 118px the sentence ran eight
   lines in a 660px column, which is how the scale recommendation and the split
   hero turned out to be in tension — each was measured without the other.
   Choosing scale means the portrait stops sharing the viewport and becomes
   punctuation further down, which is what the award-tier teardown recommended
   anyway: imagery as one or two full-bleed moments rather than scattered.

   It also repairs a defect the split caused. Constrained to a column, the
   statement was sized from --abs-t-display, which floors at 2rem — so on a
   phone the h1 and a section h2 both rendered at 32px and the page had no type
   hierarchy at the width most people read it. --abs-t-hero floors at 2.75rem.

   Device 4 survives: the statement still sits right of an empty left, now
   against the measure rather than against a photograph.
   ────────────────────────────────────────────────────────────────────────── */
.abs-hero .abs-statement {
	font-size: var( --abs-t-hero );
	max-width: 22ch;
	margin-left: auto;
	max-inline-size: 22ch;
}

/* The hero's one gold, moved off the words. "lovable" was set in amber on
   cream: 1.69:1, which fails WCAG even for large text, and the brand book is
   explicit that amber decorates and never carries words on cream. The word is
   ink now at 16.14:1, and the accent survives as a rule, which carries no
   words and so has nothing to fail. aria-hidden in the markup, because a
   decorative rule is not content. */
.abs-hero .abs-rule-gold {
	display: block;
	width: clamp( 3rem, 6vw, 5rem );
	height: 1px;
	background: var( --abs-gold );
	margin: var( --abs-band-gap ) 0 0 auto;
}

@media (max-width: 879px) {
	.abs-hero .abs-rule-gold { margin-inline: 0 auto; }
}

.abs-hero .abs-rule-gold + .abs-lede { margin-block-start: 1.5rem; }

.abs-hero .abs-lede {
	margin-left: auto;
	max-width: 44ch;
}

@media (max-width: 879px) {
	.abs-hero .abs-statement,
	.abs-hero .abs-lede { margin-left: 0; max-width: none; }
}

/* ── THE PORTRAIT PLATE ──────────────────────────────────────────────────────
   The photograph, given a whole band. A 2.4:1 crop made for this placement —
   the 4:5 one is for a column and the original cuts his head at any wide
   aspect, which took two rounds to find out. Art-directed crops per placement,
   as files, not as object-position nobody can see.
   ────────────────────────────────────────────────────────────────────────── */
.abs-plate {
	margin-block: 0;
}
.abs-plate img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 78vh;
	object-fit: cover;
	object-position: 22% 30%;
}

/* ── THE ARGUMENT ────────────────────────────────────────────────────────────
   The device taken from bejamas: the problem stated in an asymmetric two-column
   BEFORE anything is offered. The left column is the question, the right is the
   answer arriving in steps.

   NO RULES BETWEEN THE STEPS. bejamas separates its stacked rows with hairlines;
   device 3 forbids dividers anywhere on this site, so the steps are separated by
   space alone. That is the difference between referencing the field and copying
   it.

   The copy is verbatim. The only edit is punctuation: one 33-word sentence was
   split into three at its own commas, which is what produced the short/long
   unevenness VOICE.md measures as the hardest thing to fake.
   ────────────────────────────────────────────────────────────────────────── */
.abs-argument .wp-block-columns {
	gap: clamp(1.75rem, 5vw, 5rem);
	margin-block: 0;
}

.abs-argument .abs-title {
	max-width: 14ch;
	margin: 0;
}

.abs-argument .abs-argument__answer {
	font-size: var(--abs-t-lead);
	color: var(--abs-ink);
	/* The answer is the lead, not the first of four equal lines. It needs more
	   room beneath it than the steps have between them, or the reader sees a
	   four-line paragraph broken up rather than a claim and its consequences. */
	margin: 0 0 clamp(2rem, 3.5vw, 3rem);
	max-width: 30ch;
}
/* Two classes for the same reason as the feed title below: the parent's
   `.entry-content p` (0,1,1) beat the single-class margin and left 22px under
   the answer instead of the 32 to 48px this rule asks for. */

/* The steps. Each one a line of its own, at reading size, with room around it so
   the pause between them is the punctuation. */
.abs-argument .abs-argument__step {
	font-size: var(--abs-t-body);
	line-height: 1.5;
	color: var(--abs-ink-2);
	max-width: 42ch;
	margin: 0 0 clamp(.9rem, 1.6vw, 1.4rem);
}
.abs-argument .abs-argument__step:last-child { margin-bottom: 0; }

@media (max-width: 879px) {
	.abs-argument .wp-block-column + .wp-block-column {
		margin-top: clamp(1.5rem, 5vw, 2.25rem);
	}
	.abs-argument .abs-title { max-width: none; }
}

/* ── THE PINNED LEAD ────────────────────────────────────────────────────────
   The feed is one pinned piece and then the latest, which is two core/query
   blocks rather than one: `sticky: "only"` at perPage 1, then
   `sticky: "exclude"` at perPage 4. Native, editorially owned — David pins a
   post in WordPress and the page changes, with no deploy and nothing to edit
   here.

   It degrades correctly. With nothing pinned the lead query returns no posts and
   renders nothing at all, and the page is the plain feed it was before. Empty
   means absent.

   The lead is distinguished by SCALE and by carrying an excerpt, and the scale it
   uses is --abs-t-display, which is the ramp's own next step above title. A feed
   lead is not a reason to invent a seventh size.
   ────────────────────────────────────────────────────────────────────────── */
.abs-feed--lead {
	margin-bottom: 0;
}

/* Two query blocks, one list. The second carries .abs-feed's own band-gap
   margin, which put a whole band's worth of nothing between the pinned piece and
   the next title. */
.abs-feed--lead + .abs-feed {
	margin-top: 0;
	border-top: 0;
}

.abs-feed--lead .wp-block-post-template > li {
	padding-block: clamp(1.4rem, 3.5vh, 2.4rem);
}

.abs-feed .abs-feed__title--lead {
	font-size: var(--abs-t-display);
	line-height: 1.02;
	letter-spacing: -.025em;
}

.abs-feed__excerpt {
	grid-column: 2;
	margin: clamp(.75rem, 1.5vw, 1.1rem) 0 0;
	font-size: var(--abs-t-body);
	line-height: 1.55;
	color: var(--abs-ink-2);
	max-width: 54ch;
}
.abs-feed__excerpt .wp-block-post-excerpt__more-text { display: none; }

@media (max-width: 700px) {
	/* The date column collapses on a phone, so the excerpt has no column 2 to
	   sit in. */
	.abs-feed__excerpt { grid-column: 1; }
}

/* ── LINE ART AS A LAYER ─────────────────────────────────────────────────────
   The imagery problem on this site is not taste, it is inventory: two usable
   photographs across three hundred media items. Layers are the way out. A band
   can carry depth without carrying a photograph.

   THE LAYER IS THE MARK, since 29 September 2026.
   `assets/lines/blueprint.svg` is David's own mark from the films' brand
   system: an angular heart built from phi, drawn as a construction figure with
   its guide lines, rays, datum box and two nested chevrons still showing.
   Twenty-nine stroke-capable shapes, every one fill:none and
   stroke:currentColor.

   IT IS GENERATED, NOT COPIED, and that distinction cost a day. The kit ships
   `brand/blueprint/blueprint.svg`, and its design-system docs describe that
   file as the mark: nested squares, a Fibonacci spiral, an orbit. This theme
   shipped it on 29 September. That is a DIFFERENT DRAWING from the one the
   films use. `tools/BLUEPRINT.md` calls the spiral a first version that was set
   aside — "a curved spiral and an angular heart do not belong to the same
   drawing" — and the films follow the tooling: a real frame renders bp-chev,
   bp-heart and bp-ray, and zero bp-sq, bp-arc or bp-orbit. So the heart is the
   mark, and this asset is the output of `tools/blueprint.py`.

   BOTH ARE SANCTIONED, though. David ruled on 29 September that the spiral is
   fine to use as well, which supersedes the tooling doc's "discarded". It ships
   here as `assets/lines/spiral.svg` and `.abs-motif--spiral`, a second motif for
   a second page. One layer per page still holds.

   It replaced contour lines before that, and those reasons still hold. A
   construction drawing is device 1 in the layer underneath, type that reads as
   *built* rather than written, and it matches the persona David named:
   architect of branding. currentColor means ONE file serves both band tones,
   where the contours needed three 25KB colourways because a background image
   cannot resolve it. And the contours had no rationale left: see
   findings/2026-09-28 for why the "aiming upward" reading was withdrawn.

   IT IS INLINE SVG, AND THAT IS NOT A STYLE CHOICE. The animation plugin's
   line-draw queries `svg path, svg line, ...` inside the block, so a CSS
   background or an <img> has no reachable paths and the runtime logs and
   returns. Drawing the strokes on requires the markup, which is why this is a
   pattern and not a background-image.

   ONE CHANGE TO THE GENERATOR'S OUTPUT: the ids are stripped, since nothing
   references them and two layers on one page would collide. The generated mark
   carries no stroke-dasharray, so the collision the discarded spiral had with
   line-draw does not arise here.

   THE MASK IS STILL THE WHOLE CRAFT. Unmasked, the drawing runs straight
   through the type and the band reads as a texture with words on it. Masked and
   held to the outer column, it clears the measure and the band reads as a
   drawing the type is standing in front of. It only belongs on a band with
   genuine empty space: tried on the argument band, whose two text columns span
   the full width, it simply crossed the answer copy.
   ────────────────────────────────────────────────────────────────────────── */
.abs-lines {
	position: relative;
	overflow: hidden;
}

/* Content sits above the layer. The motif is excluded by :not() rather than
   given a z-index, because `.abs-lines > *` would otherwise set position:
   relative on it at equal specificity and the absolute positioning would come
   down to source order. */
.abs-lines > :not( .abs-motif ) {
	position: relative;
	z-index: 1;
}

/* The layer itself: held to the outer column so the drawing stays a drawing
   rather than a full-bleed texture, and bled slightly off the right edge so it
   reads as a fragment of something larger. */
.abs-motif {
	position: absolute;
	top: 50%;
	right: var( --abs-gutter );
	translate: 0 -50%;
	width: min( 34%, 24rem );
	aspect-ratio: 1180 / 1120;
	z-index: 0;
	pointer-events: none;
	color: var( --abs-ink );
	opacity: .2;
	-webkit-mask-image: linear-gradient( 90deg, transparent 0%, rgba(0,0,0,.6) 22%, #000 55% );
	mask-image: linear-gradient( 90deg, transparent 0%, rgba(0,0,0,.6) 22%, #000 55% );
}

/* The second motif. The spiral is wider (1.5:1 against the heart's 1.05:1) and
   reads as a fragment of something larger rather than as a whole figure, so it
   takes more width and is allowed to bleed off the right edge. */
.abs-motif--spiral {
	right: calc( var( --abs-gutter ) * -0.35 );
	width: min( 58%, 40rem );
	aspect-ratio: 1698 / 1120;
	opacity: .16;
}

.abs-motif__svg {
	display: block;
	width: 100%;
	height: 100%;
}

@media (max-width: 879px) {
	/* Below the split the drawing stops being a layer and becomes a figure: in
	   the flow, above the label, where it cannot touch a word. Hiding it was the
	   first answer, and it was right for what existed: an absolutely-positioned
	   layer measured against a 4px-dilated mask of the actual letterforms
	   crossed glyph territory on 0.53% of it at 390px, because the band grows
	   taller as the headline wraps and the drawing rises into the type. In the
	   flow there is nothing to cross, so the mask goes too.

	   MEASURE GLYPHS, NOT BOXES. The first overlap pass compared strokes with the
	   bounding rectangles of the text and reported overlap at every width,
	   including 1920px where there is visibly none. The rectangle answered a
	   neighbouring question. */
	.abs-motif,
	.abs-motif--spiral {
		position: relative;
		top: auto;
		right: auto;
		translate: none;
		width: min( 46%, 10rem );
		margin: 0 0 .5rem;
		mask-image: none;
	}
	.abs-motif--spiral {
		width: min( 70%, 15rem );
	}
	/* The closing band's drawing stays a corner mark: in the flow it pushed the
	   heading 165px below the band's top. */
	.abs-ab-close .abs-motif {
		position: absolute;
		top: auto;
		right: var( --abs-gutter );
		bottom: var( --abs-band-gap );
		width: 7rem;
		margin: 0;
	}
}

/* ============================================================
   HOMEPAGE v2 — the sections (patterns/home-*.php)
   ------------------------------------------------------------
   The light display type with bold phrases, the ruled records
   list and the FPO marker. Two classes on every margin that
   touches a p or heading: the parent's .entry-content rules
   would otherwise win.
   ============================================================ */

/* The retired tones. `green` and `amber` were fills; they are the same canvas
   as everything else now, and the classes stay only because saved pages and
   the testimonials block still print them. */

/* Focus, one treatment for every control. Gold on cream is 1.69:1, so the
   outline is the ink (16.1:1 on cream, 15.3:1 on the dark ground) and the gold
   is a 3px ring between the control and that outline. */
:is(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--abs-ink);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--abs-accent);
}

/* Full bleed for the wrappers that hold a photo plate.
   No padding: the band nested inside carries its own. */
.site-main.full-width .entry-content > .abs-band-bleed,
.entry-content > .abs-band-bleed {
	max-width: none;
	width: 100%;
	margin-inline: 0;
	padding: 0;
}
.entry-content > .abs-band-bleed > .wp-block-image { margin: 0; }

/* No flow gap between sections: the datum line and the band's own padding are
   the rhythm, and a gap would show the body ground as a stripe above the
   footer. The parent adds a bottom margin to the content; it is cleared on the
   last section so the footer meets the canvas directly. */
/* The block styles (is-style-band-*) are bands too: the About page's, carrying the
   parent's 1.5rem group margin, sat 24px low and 24px apart. */
.site-main.full-width .entry-content > :is(.abs-band, .abs-band-bleed, .is-style-band-paper, .is-style-band-dim, .is-style-band-night, .is-style-band-green, .is-style-band-amber),
.entry-content > :is(.abs-band, .abs-band-bleed, .is-style-band-paper, .is-style-band-dim, .is-style-band-night, .is-style-band-green, .is-style-band-amber) { margin-block: 0; }
:is(.abs-band-bleed, .abs-records, .abs-ways, .abs-hero__sub, .abs-close__grid, .abs-split-head, .abs-prose-pair) > * { margin-block: 0; }

/* The parent underlines every link in content; none of these want it. */
.entry-content .abs-rec__title a:not(.btn):not(.wp-block-button__link),
.entry-content .abs-mail a:not(.btn):not(.wp-block-button__link) { text-decoration: none; }
.entry-content .abs-rec__title a:not(.btn):not(.wp-block-button__link):focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.abs-hero__sub .abs-btns { justify-content: flex-end; }

.abs-wide { max-width: 84rem; }

/* A heading's wrapper adds nothing under it: the heading's own 40px is the gap. */
.abs-band__inner :is(.abs-split-head, .abs-aside__head, .abs-part, .abs-offset, .abs-problem__copy) { margin-block: 0; }
.abs-btn .wp-block-button__link { margin: 0; }
/* A form block that renders nothing (a Gravity Forms embed with no form to show)
   still took a grid cell and its row gap, opening 32px of empty space at the end of
   the band when the columns stack. */
.abs-form-wrap:not(:has(*)) { display: none; }
/* What follows a heading wrapper starts at the heading's own 40px (the list and
   FAQ margins above it were a second, larger gap: 56 and 64 on the pages). */
.abs-band__inner > :is(.abs-split-head, .abs-aside__head, .abs-part) + * { margin-top: 0; }
.abs-band__inner > .abs-split-head + :is(.abs-wl, .abs-ways, .abs-records, .abs-faq) { margin-top: 0; }
@media (max-width: 879px) {
	/* Stacked, a heading column and its content are one 40px gap, not 40 plus the column gap. */
	.abs-band__inner:is(.abs-aside, .abs-cols):has(> :first-child > .abs-display:only-child) { row-gap: 0; }
	.abs-aside__head { position: static; }
}
/* The last thing in a band ends on the band's padding: no trailing margin from a
   paragraph, list or figure (the FAQ keeps its answers' spacing). */
.entry-content .abs-band__inner > :last-child:not(.abs-faq),
.entry-content .abs-band__inner > :last-child > :last-child:not(.abs-faq),
.entry-content .abs-band__inner > :last-child > :last-child > :last-child:not(.abs-faq__item) { margin-bottom: 0; }

/* label, tight under the datum line */
.entry-content .abs-label--tight { margin: 0 0 2rem; }

/* display type: light, tight, with bold phrases. The lit phrase is gold on the
   dark canvas and ink (weight 700) on the light one. */
.entry-content .abs-display {
	font-weight: 300;
	letter-spacing: -.035em;
	line-height: .98;
	/* The one heading-to-content gap: 40px after a display-step heading
	   (24px after a title-step one, see .abs-title and the formats line). */
	margin: 0 0 2.5rem;
	max-width: none;
	text-wrap: balance;
}
.entry-content .abs-display strong { font-weight: 700; color: var(--abs-lit); }
.entry-content .abs-display--hero { font-size: var(--abs-t-hero); max-width: 20ch; margin: 0; }

/* The headline's "lovable" gives one slow lub-dub (assets/js/lovable-pulse.js toggles the class).
   inline-block lets it scale without moving the words beside it; scale never changes layout. */
.abs-pulse { display: inline-block; transform-origin: 50% 100%; }
.abs-pulse.is-beating { animation: abs-lub-dub 700ms linear 1; }
@keyframes abs-lub-dub {
	0%   { transform: scale(1);    animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
	18%  { transform: scale(1.06); animation-timing-function: cubic-bezier(0.5, 0, 0.7, 1); }
	36%  { transform: scale(1);    animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
	54%  { transform: scale(1.04); animation-timing-function: cubic-bezier(0.5, 0, 0.7, 1); }
	100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.abs-pulse.is-beating { animation: none; }
}
.entry-content .abs-display--h2 { font-size: var(--abs-t-display); }
.entry-content .abs-display--close { font-size: var(--abs-t-hero); margin: 0; }

/* hero */
.abs-hero { padding-block: clamp(4rem, 10vw, 8.5rem) 3rem; }
.abs-hero__sub {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	margin-top: 3rem;
	align-items: end;
}
.entry-content .abs-hero__lede {
	margin: 0;
	max-width: 34rem;
	font-size: var(--abs-t-lead);
	line-height: 1.6;
	color: var(--abs-ink-dim);
}

/* buttons: ink outline, 0 radius, uppercase (the brand kit's button/label
   spec). Hover fills with ink; focus is the shared ring above. */
.wp-block-buttons.abs-btns { gap: .75rem; }
.abs-btns--after { margin-top: 2.5rem; }
.abs-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .7rem 1.1rem;
	border: 1px solid currentColor;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font-size: var(--abs-t-micro);
	font-weight: 600;
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
}
.abs-btn .wp-block-button__link:hover,
.abs-btn .wp-block-button__link:focus-visible { background: var(--abs-ink); color: var(--abs-paper); }
/* The parent styles .wp-block-button__link:focus-visible with its own outline;
   this states the shared ring at a weight that wins. */
.abs-btn .wp-block-button__link:focus-visible { outline: 2px solid var(--abs-ink); outline-offset: 3px; box-shadow: 0 0 0 3px var(--abs-accent); }

/* argument: copy beside a photo */
.abs-photo-split { display: grid; grid-template-columns: 7fr 4fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.abs-photo-split .abs-photo { margin: 0; }
.abs-photo img { display: block; width: 100%; height: auto; }
.abs-prose-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.entry-content .abs-copy { margin: 0; font-size: var(--abs-t-body); line-height: 1.7; max-width: none; color: var(--abs-ink-2); }

/* head: the heading, full width (the label that used to sit left is gone) */
.abs-split-head { display: grid; grid-template-columns: 1fr; gap: 3rem; }
.abs-split-head--proof { align-items: start; }

/* records: ruled rows, the whole row clickable through the title link. The
   hanging tick at each row's left edge is the ruler margin; on hover or focus
   the row's top rule takes the gold trace. */
.abs-records { margin-top: 1rem; }
.abs-rec {
	position: relative;
	display: grid;
	grid-template-columns: 7fr 2fr 2fr;
	gap: 1.5rem;
	align-items: baseline;
	padding: 1.5rem 0;
	border-top: 1px solid var(--abs-rule);
}
.abs-rec:last-child { border-bottom: 1px solid var(--abs-rule); }
:is(.abs-rec, .abs-promises li, .abs-step, .abs-way) {
	background: linear-gradient(var(--abs-ink), var(--abs-ink)) 0 0 / 1px .7rem no-repeat;
	background-origin: border-box;
}
.abs-rec:is(:hover, :focus-within) { border-top-color: var(--abs-accent); }
.entry-content .abs-rec__title { margin: 0; font-size: var(--abs-t-title); font-weight: 300; line-height: 1.15; letter-spacing: -.02em; max-width: none; }
.abs-rec__title a { color: inherit; text-decoration: none; }
.abs-rec__title a::after { content: ""; position: absolute; inset: 0; }
.abs-rec:hover .abs-rec__title a,
.abs-rec__title a:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.entry-content .abs-rec__c { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--abs-ink); }
/* Meta labels: readable, sentence case, muted. Not a spec-sheet header. */
:is(.abs-rec__c, .abs-meta, .abs-way__fee) strong {
	display: block;
	margin-bottom: .25rem;
	font-size: .8125rem;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: .01em;
	color: var(--abs-ink-dim);
}

/* talks: numbered, with a description */
.abs-rec--talk { grid-template-columns: 1fr 11fr; }
.entry-content .abs-rec__n { margin: 0; font-size: .875rem; font-weight: 600; line-height: 1; letter-spacing: .04em; color: var(--abs-ink); font-variant-numeric: tabular-nums; }
.entry-content .abs-rec__desc { margin: .5rem 0 0; max-width: 40rem; font-size: 1rem; color: var(--abs-ink-2); }

/* ways in: a typographic ruled list. Number on the ruler margin, title, a
   line, the link. One row per way; no icons, no columns of cards. */
.abs-ways { counter-reset: way; border-top: 1px solid var(--abs-rule); }
.abs-way {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 5fr) minmax(0, 6fr);
	column-gap: clamp(1rem, 3vw, 3rem);
	align-content: start;
	padding: 1.75rem 0;
	border-bottom: 1px solid var(--abs-rule);
	counter-increment: way;
}
.abs-way::before {
	content: counter(way, decimal-leading-zero);
	grid-column: 1;
	grid-row: 1 / span 6;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.8;
	letter-spacing: .04em;
	font-variant-numeric: tabular-nums;
	color: var(--abs-ink);
}
.abs-way > * { grid-column: 3; }
.abs-way > .abs-way__title { grid-column: 2; grid-row: 1 / span 6; }
.entry-content .abs-way__title { margin: 0; font-size: 1.75rem; font-weight: 300; line-height: 1.15; letter-spacing: -.02em; max-width: none; }
.entry-content .abs-way__copy { margin: 0 0 1.25rem; color: var(--abs-ink-2); }
.entry-content .abs-way__link { margin: 0; font-size: .9375rem; font-weight: 600; }
.abs-way__link a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--abs-accent); }

/* speaking plate */
.abs-plate { margin: 0; }
.abs-plate img { display: block; width: 100%; height: clamp(16rem, 34vw, 30rem); object-fit: cover; object-position: 50% 55%; }

/* the argument's conclusion: hero-scale display on the same canvas, set off by
   a plain 1px rule (not a datum line, so it stays part of the argument). The lit
   phrase is gold on the dark canvas and ink at weight 700 on the light one. */
.entry-content .abs-conclusion {
	margin-block: var(--abs-band-gap) 0;
	padding-block-start: clamp(2rem, 5vw, 4rem);
	border-top: 1px solid var(--abs-rule);
}
.entry-content .abs-conclusion .abs-display--hero { max-width: 18ch; }

/* hero colour block: the mark's construction drawing in ink linework, bleeding
   off the right edge. No fill. It is a layer, so the type stays above it and
   the left of the drawing fades out before it reaches the headline. */
.abs-hero.abs-lines { overflow: hidden; }
.abs-motif.abs-motif--hero {
	top: 50%;
	right: calc(var(--abs-gutter) * -2.2);
	width: min(58%, 50rem);
	opacity: .24;
}
@media (max-width: 879px) {
	/* Below the split the drawing stays a layer, low in the block, so the headline
	   is never pushed down by a figure above it. */
	.abs-motif.abs-motif--hero {
		position: absolute;
		top: auto;
		bottom: -2rem;
		right: -30%;
		translate: none;
		width: min(95%, 22rem);
		margin: 0;
		opacity: .2;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.abs-hero { padding-block-end: 5rem; }
}

/* the close */
.abs-close__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 3rem; align-items: end; }
.entry-content .abs-close__lines { margin: 0 0 2rem; font-size: 1.35rem; line-height: 1.45; }
.entry-content .abs-mail { margin: 0 0 1.5rem; border-bottom: 1px solid currentColor; padding: .6rem 0; font-size: 1.15rem; }
.abs-mail a { color: inherit; text-decoration: none; }

/* FPO: placeholder copy for David to rewrite. Visible on purpose, as one
   dashed rule along the bottom edge of the block (the brand's dashed orbit,
   drawn flat). It is a background, so it adds no height and does not repeat
   under every line of a paragraph. Remove the is-fpo class from a block once
   its copy is final. */
.is-fpo {
	background: repeating-linear-gradient(90deg, var(--abs-ink-dim) 0 6px, transparent 6px 10px) 0 100% / 100% 1px no-repeat;
	padding-block-end: .3em;
}

/* A button has a box of its own, so its marker is that box turned dashed. */
.abs-btn.is-fpo { background: none; padding-block-end: 0; }
.abs-btn.is-fpo .wp-block-button__link { border-style: dashed; }

/* ── THINKING, IN PUBLIC: one flat grid of essays and talks ──────────────────
   A strict 12-column grid, items in the editor's order (the Homepage grid box in the Companion), each card
   spanning 3, 4, 6 or 8 columns by how long its title is, top-aligned so the
   rows are ragged by content rather than stretched to a uniform box. At rest a
   card is a 1px rule with a ruler tick; the frame that draws on hover and focus
   is the lvbl-animations Border Trace preset (gold, from --lvbl-brand). The top
   rule is a background, not a border, so the traced top edge lands on it and not
   a pixel below. Flat, 2D, no perspective and no scroll coupling. */
.abs-tg {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 1.5rem;
	row-gap: clamp(1.5rem, 3vw, 2.75rem);
	align-items: start;
	margin-top: 1rem;
}
.abs-tg > * { margin-block: 0; }
.abs-tg__item {
	position: relative;
	min-width: 0;
	grid-column: span 4;
	padding: 1.25rem 1.25rem 1.75rem;
	background:
		linear-gradient(var(--abs-ink), var(--abs-ink)) 0 0 / 1px .7rem no-repeat,
		linear-gradient(var(--abs-rule), var(--abs-rule)) 0 0 / 100% 1px no-repeat;
}
.abs-tg__item--s3 { grid-column: span 3; }
.abs-tg__item--s6 { grid-column: span 6; }
.abs-tg__item--s8 { grid-column: span 8; }
.abs-tg__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-block-end: 1.1rem; }
.abs-tg__meta > * { margin-block: 0; }
.entry-content .abs-tg__type { margin: 0; font-size: .8125rem; font-weight: 600; line-height: 1.3; color: var(--abs-ink); }
.entry-content .abs-tg__date { margin: 0; font-size: .8125rem; line-height: 1.3; color: var(--abs-ink-dim); font-variant-numeric: tabular-nums; }
.entry-content .abs-tg__title { margin: 0; max-width: none; font-size: var(--abs-t-title); font-weight: 300; line-height: 1.15; letter-spacing: -.02em; overflow-wrap: break-word; text-wrap: balance; }
.entry-content .abs-tg__item--s8 .abs-tg__title { font-size: var(--abs-t-display); line-height: 1.02; letter-spacing: -.025em; }
.abs-tg__title a { color: inherit; text-decoration: none; }
.entry-content .abs-tg__title a:not(.btn):not(.wp-block-button__link) { text-decoration: none; }
/* The whole card is the target; the card's own ::after is the trace frame. */
.abs-tg__title a::after { content: ""; position: absolute; inset: 0; }
.abs-tg__item:hover .abs-tg__title a,
.entry-content .abs-tg__title a:not(.btn):not(.wp-block-button__link):focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }

/* ── SELECTED WRITING: one lead essay, then a ruled list (thinking-grid layout "lead-list") ──────────────
   The lead shares the press row's columns (date where the outlet sits, title where the row's title sits) so the
   whole section reads as one ruled list with a large first entry. Essays only. Flat: rules, no cards. */
.abs-wl { margin-top: 1rem; }
.abs-wl > * { margin-block: 0; }
.abs-wl__lead {
	position: relative;
	display: grid;
	grid-template-columns: 4fr 8fr;
	gap: 1.5rem;
	align-items: baseline;
	padding: 1.75rem 0 2.5rem;
	border-top: 1px solid var(--abs-rule);
}
.abs-wl__lead > *, .abs-wl__body > * { margin-block: 0; }
.abs-wl__body { max-width: 52rem; }
/* The section's own heading is the display step; the lead essay under it is a title, so the two never compete. Dates sit on the micro step. */
.entry-content .abs-wl__title { margin: 0; max-width: none; font-size: var(--abs-t-title); font-weight: 300; line-height: 1.15; letter-spacing: -.02em; overflow-wrap: break-word; text-wrap: balance; }
.entry-content .abs-wl__title a:not(.btn):not(.wp-block-button__link) { color: inherit; text-decoration: none; }
.abs-wl__title a::after { content: ""; position: absolute; inset: 0; }
.abs-wl__lead:is(:hover, :focus-within) { border-top-color: var(--abs-accent); }
.entry-content .abs-wl__title a:not(.btn):not(.wp-block-button__link):is(:hover, :focus-visible) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.entry-content .abs-wl__body .abs-copy { margin-top: 1.25rem; max-width: 40rem; }
.abs-wl .abs-records { margin-top: 0; }
.entry-content .abs-wl .abs-rec__c { font-size: var(--abs-t-micro); }
.abs-wl .abs-rec--press { grid-template-columns: 4fr 8fr; }
.abs-wl .abs-rec--press > .abs-rec__title { grid-column: 2; }
.entry-content .abs-wl .abs-rec--press .abs-rec__title a:not(.btn):not(.wp-block-button__link) { text-decoration: none; }
.entry-content .abs-wl .abs-rec--press:is(:hover, :focus-within) .abs-rec__title a:not(.btn):not(.wp-block-button__link) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
@media (max-width: 960px) {
	.abs-wl__lead, .abs-wl .abs-rec--press { grid-template-columns: 1fr; gap: .5rem; }
	.abs-wl .abs-rec--press > .abs-rec__title { grid-column: 1; }
}

/* ── FEATURED IN: a quiet line of outlet names, three press rows, a link to the Press page ───────────────
   Names are type, not logos. The separators are short rules drawn in CSS, so a screen reader hears a plain list. */
.entry-content .abs-ph__outlets { display: flex; flex-wrap: wrap; gap: .35rem 0; margin: 0 0 2.5rem; padding: 0; list-style: none; }
.entry-content .abs-ph__outlets li { margin: 0; padding: 0 1.1rem; font-size: var(--abs-t-lead); font-weight: 300; line-height: 1.3; letter-spacing: -.01em; color: var(--abs-ink); }
.entry-content .abs-ph__outlets li:first-child { padding-inline-start: 0; }
.entry-content .abs-ph__outlets li + li { border-inline-start: 1px solid var(--abs-rule); }
.abs-ph .abs-records { margin-top: 0; }
.abs-ph__more { margin: 2rem 0 0; font-size: .9375rem; }
.entry-content .abs-ph__more a { color: var(--abs-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.entry-content .abs-ph__more a:is(:hover, :focus-visible) { text-decoration-color: var(--abs-accent); }
@media (max-width: 700px) {
	.entry-content .abs-ph__outlets li { padding: 0 .8rem; }
}

/* The faint copy of the drawing behind the grid: line art only, held very low. */
.abs-motif.abs-motif--grid {
	top: 58%;
	right: calc(var(--abs-gutter) * -1.5);
	width: min(64%, 56rem);
	opacity: .08;
	-webkit-mask-image: none;
	mask-image: none;
}

@media (max-width: 1100px) {
	.abs-tg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.abs-tg__item, .abs-tg__item--s3, .abs-tg__item--s6 { grid-column: span 1; }
	.abs-tg__item--s8 { grid-column: span 2; }
}
@media (max-width: 700px) {
	.abs-tg { grid-template-columns: minmax(0, 1fr); row-gap: .5rem; }
	.abs-tg__item, .abs-tg__item--s3, .abs-tg__item--s6, .abs-tg__item--s8 { grid-column: span 1; }
	.entry-content .abs-tg__item--s8 .abs-tg__title { font-size: var(--abs-t-title); line-height: 1.15; letter-spacing: -.02em; }
	.abs-motif.abs-motif--grid {
		position: absolute;
		top: 30%;
		right: -35%;
		translate: none;
		width: 90%;
		margin: 0;
	}
}

/* ============================================================
   SPEAKING + ADVISORY — the two offer pages (patterns/speaking-*,
   patterns/advisory-*). Same canvas and tokens as the homepage;
   this block only adds what those pages need: column layouts,
   the promises list, the method steps, the FAQ and the enquiry
   section.
   ============================================================ */
.abs-cols { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.abs-cols--5-7 { grid-template-columns: 5fr 7fr; }
.abs-cols--7-5 { grid-template-columns: 7fr 5fr; }
.abs-cols--4-8 { grid-template-columns: 4fr 8fr; }
.abs-cols--8-4 { grid-template-columns: 8fr 4fr; }
:is(.abs-cols, .abs-rec__meta, .abs-steps, .abs-step, .abs-fig-col, .abs-formats, .abs-facts, .abs-form-wrap, .abs-sp-plate) > * { margin-block: 0; }

/* copy */
.entry-content .abs-copy--lead { font-size: var(--abs-t-lead); line-height: 1.5; }
.entry-content .abs-copy--after { margin-top: 1.25rem; }
.entry-content .abs-copy--lead + .abs-records { margin-top: 2rem; }
.entry-content .abs-hero__lede--after { margin-top: 2.25rem; }
.abs-ad-hero .abs-cols { align-items: center; }
.abs-photo--portrait img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
/* Square plate (Contact): capped so it never outgrows its column, and so on a phone it sits at the column width inside the gutters. */
.abs-photo--square { max-width: 26rem; margin: 2.5rem 0 0; }
.abs-photo--square img { aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 35%; }

.entry-content .abs-rec__sub { margin: .35rem 0 0; font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--abs-ink); }
.abs-rec__meta { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin-top: 1.1rem; align-items: flex-start; }
.entry-content .abs-meta { margin: 0; font-size: .9375rem; line-height: 1.45; color: var(--abs-ink); }
.abs-rec--talk .abs-rec__meta { margin-top: 1rem; }
.abs-rec--fact { grid-template-columns: 5fr 7fr; }
/* press: publication or event, then the title; an unnamed row keeps the title in the second column */
.abs-rec--press > .abs-rec__title { grid-column: 2; }
.entry-content .abs-rec--press .abs-rec__title { font-size: var(--abs-t-lead); }
/* Press rows: the year closes the row. A linked title is underlined (the parent rule above turns it off for the other lists); a note after the title stays plain. */
.abs-rec--press { grid-template-columns: 4fr 7fr 1fr; }
.entry-content .abs-rec--press .abs-rec__title a:not(.btn):not(.wp-block-button__link) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
/* A row's second link (a book's Kindle edition) sits above the row-wide title link. */
.abs-rec__alt { position: relative; z-index: 1; }
.entry-content .abs-rec--press .abs-rec__note { font-size: .9375rem; font-weight: 400; letter-spacing: 0; color: var(--abs-ink-2); }
.entry-content .abs-rec--press .abs-rec__y { grid-column: 3; grid-row: 1; margin: 0; font-size: .9375rem; line-height: 1.5; text-align: right; font-variant-numeric: tabular-nums; color: var(--abs-ink); }
.abs-press-plate .abs-plate-fig { grid-column: 2; max-width: 34rem; }
.abs-rec--event { grid-template-columns: 6fr 3fr 3fr; }
.entry-content .abs-rec--fact .abs-rec__c { font-size: 1rem; }
.entry-content .abs-sp-talks .abs-rec__title a { font-weight: 300; }

/* photo plate and the video slot */
.abs-plate--face img { object-position: 50% 6%; }
.abs-btn.is-fpo { display: inline-flex; align-items: center; }
.entry-content .abs-video { margin: 0; }
.abs-video img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 60%; }

/* what you can expect: five promises */
.entry-content .abs-promises { list-style: none; margin: 1rem 0 0; padding: 0; max-width: none; counter-reset: promise; border-top: 1px solid var(--abs-rule); }
.entry-content .abs-promises li { counter-increment: promise; display: grid; grid-template-columns: 4rem 1fr; gap: 1rem; margin: 0; padding: 1.4rem 0; border-bottom: 1px solid var(--abs-rule); font-size: var(--abs-t-lead); font-weight: 300; line-height: 1.4; }
.abs-promises li::before { content: counter(promise, decimal-leading-zero); padding-top: .55rem; font-size: .875rem; font-weight: 600; line-height: 1; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--abs-ink); }
.entry-content .abs-sample { margin: 2rem 0 0; font-size: .9375rem; font-weight: 600; }
.abs-sample a { color: inherit; text-decoration-color: var(--abs-accent); text-underline-offset: .2em; }

/* advisory: the problem, the method, the ways */
.abs-ad-problem .abs-prose-pair .abs-copy { max-width: 32ch; }
.abs-steps { margin-top: 2.5rem; border-top: 1px solid var(--abs-rule); }
.abs-step { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; padding: 1.6rem 0; border-bottom: 1px solid var(--abs-rule); }
.entry-content .abs-step__n { margin: 0; padding-top: .6rem; font-size: .875rem; font-weight: 600; line-height: 1; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--abs-ink); }
.entry-content .abs-step__title { margin: 0 0 .55rem; max-width: none; font-size: var(--abs-t-title); font-weight: 300; line-height: 1.15; letter-spacing: -.02em; color: var(--abs-ink); }
.entry-content .abs-step__copy { margin: 0; max-width: 46ch; line-height: 1.6; color: var(--abs-ink-2); }
.abs-way__shape { margin: 0 0 1rem; }
.entry-content .abs-way__fee { margin: 0 0 1.25rem; font-size: .9375rem; }
.entry-content .abs-sevenality { margin: 2.5rem 0 0; max-width: 54ch; font-size: var(--abs-t-lead); line-height: 1.5; }
.abs-sevenality a { font-weight: 600; color: var(--abs-ink); text-decoration-color: var(--abs-accent); text-underline-offset: .2em; }

/* ── RHYTHM: the offer pages vary their sections ────────────────────────────
   Label, split head, ruled list was the one unit every section used. The
   sections now take the shape their content has: a statement across the full
   measure, a photograph framed by guide lines that overrun it, a heading held
   in a side column while a ruled list scrolls past, two parts side by side, a
   compact row. The datum line, the ink, the gold and the type ramp stay. */

/* A statement: the section's heading at the hero step, then the copy offset
   right so the left of the page stays open, as in the hero. */
.entry-content .abs-display--statement {
	font-size: var(--abs-t-hero);
	max-width: 20ch;
	margin: 0 0 clamp(2rem, 4vw, 3.5rem);
}
.abs-offset,
.abs-prose-pair--offset { max-width: 56rem; margin-inline-start: auto; }

/* A plate: the photograph with 1px guide lines that run past its four edges,
   as the construction drawing's guides do. The lines sit behind the image, so
   only the overrun shows. */
.abs-plate-fig { --abs-overrun: 1.5rem; }
.entry-content .abs-plate-fig {
	position: relative;
	isolation: isolate;
	margin-block: 0;
	margin-inline: calc(-1 * var(--abs-overrun));
	padding: var(--abs-overrun);
}
.abs-plate-fig::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		linear-gradient(var(--abs-line), var(--abs-line)) left 0 top calc(var(--abs-overrun) - 1px) / 100% 1px no-repeat,
		linear-gradient(var(--abs-line), var(--abs-line)) left 0 bottom calc(var(--abs-overrun) - 1px) / 100% 1px no-repeat,
		linear-gradient(var(--abs-line), var(--abs-line)) left calc(var(--abs-overrun) - 1px) top 0 / 1px 100% no-repeat,
		linear-gradient(var(--abs-line), var(--abs-line)) right calc(var(--abs-overrun) - 1px) top 0 / 1px 100% no-repeat;
}
.abs-plate-fig img { display: block; width: 100%; height: auto; }
.entry-content .abs-sp-watch .abs-plate-fig { margin-block-start: clamp(1.5rem, 3vw, 2.5rem); }
.entry-content .abs-plate-cap { margin: 1rem 0 0; max-width: 46ch; }
@media (max-width: 600px) { .abs-plate-fig { --abs-overrun: 1rem; } }
/* A small press clipping under a group heading: the same plate, capped at 20rem of picture (the padding adds the overrun on each side). */
.entry-content .abs-plate-fig--clip { max-width: calc(20rem + 2 * var(--abs-overrun)); margin-block-start: clamp(1.5rem, 3vw, 2.5rem); }
.entry-content .abs-plate-fig--clip .abs-plate-cap { margin-top: .75rem; font-size: .875rem; }

/* A side column: the heading stays put while the list scrolls past. */
.abs-aside { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.abs-aside > * { margin-block: 0; }
.abs-aside__head { position: sticky; top: 5rem; }
.abs-aside .abs-records { margin-top: 0; }

/* Two parts side by side, each its own small heading. */
.abs-parts { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.abs-parts > * { margin-block: 0; }
.entry-content .abs-display--part { font-size: var(--abs-t-display); }
.abs-part .abs-records { margin-top: 1.5rem; }

/* The formats, folded into the talks as one compact row under them. */
.abs-formats-line { margin-block-start: clamp(3.5rem, 7vw, 6rem); padding-block-start: 1.75rem; border-top: 1px solid var(--abs-rule); }
.entry-content .abs-formats-line .abs-display--part { font-size: var(--abs-t-title); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 0; }
.abs-formats-line .abs-prose-pair { margin-bottom: 2rem; }
.abs-formats-line .abs-formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1rem, 2.5vw, 2rem); margin-top: 0; }
.abs-formats-line .abs-rec--fact { grid-template-columns: 1fr; gap: .5rem; }
.abs-formats-line .abs-rec:last-child { border-bottom: 0; }
.entry-content .abs-formats-line .abs-rec__title { font-size: var(--abs-t-lead); }

/* A portrait on the left, text on the right: the photo comes second in the
   markup so a phone still reads the words first. */
@media (min-width: 821px) {
	.abs-photo-split--flip { grid-template-columns: 4fr 7fr; }
	.abs-photo-split--flip > .abs-photo { grid-column: 1; grid-row: 1; }
	.abs-photo-split--flip > :not(.abs-photo) { grid-column: 2; grid-row: 1; }
}

@media (max-width: 820px) {
	.abs-aside, .abs-parts { grid-template-columns: 1fr; }
	.abs-aside__head { position: static; }
	.abs-offset, .abs-prose-pair--offset { margin-inline-start: 0; }
	.abs-formats-line .abs-formats { grid-template-columns: 1fr; }
}

/* FAQ: native details, ruled */
.abs-faq { margin-top: 1rem; border-top: 1px solid var(--abs-rule); }
.abs-faq__item { border-bottom: 1px solid var(--abs-rule); }
.abs-faq__item summary { display: flex; align-items: baseline; gap: 1rem; padding: 1.4rem 0; list-style: none; cursor: pointer; font-size: var(--abs-t-title); font-weight: 300; line-height: 1.2; letter-spacing: -.02em; }
.abs-faq__item summary::-webkit-details-marker { display: none; }
.abs-faq__item summary::before { content: "+"; flex: none; width: 1.2rem; font-weight: 400; }
.abs-faq__item[open] summary::before { content: "\2212"; }
.entry-content .abs-faq__item p { margin: 0 0 1.5rem 2.2rem; max-width: 54ch; line-height: 1.6; color: var(--abs-ink-dim); }

/* the enquiry section: the same canvas as the rest, the form below it is ruled */
.entry-content .abs-room .abs-copy { font-size: var(--abs-t-lead); line-height: 1.5; max-width: 34ch; }
.abs-form-wrap { min-width: 0; }

@media (max-width: 820px) {
	.abs-hero__sub .abs-btns { justify-content: flex-start; }
	.abs-hero__sub, .abs-photo-split, .abs-prose-pair, .abs-split-head, .abs-close__grid { grid-template-columns: 1fr; }
	.abs-split-head { gap: 1.5rem; }
	.abs-rec { grid-template-columns: 1fr 1fr; }
	.abs-rec__title { grid-column: 1 / -1; }
	.abs-rec--talk { grid-template-columns: 1fr 5fr; }
	.abs-cols, .abs-cols--5-7, .abs-cols--7-5, .abs-cols--8-4, .abs-cols--4-8 { grid-template-columns: 1fr; }
	.abs-rec--fact, .abs-rec--event { grid-template-columns: 1fr 1fr; }
	.abs-rec--press { grid-template-columns: 1fr; gap: .5rem; }
	.abs-rec--press > .abs-rec__title { grid-column: 1; }
	.entry-content .abs-rec--press .abs-rec__y { grid-column: 1; grid-row: auto; text-align: left; }
	.abs-press-plate .abs-plate-fig { grid-column: 1; }
	.abs-step { grid-template-columns: 2.5rem 1fr; }
	.entry-content .abs-promises li { grid-template-columns: 2.5rem 1fr; }
	.entry-content .abs-faq__item p { margin-left: 0; }
	.abs-way { grid-template-columns: 2.5rem minmax(0, 1fr); padding: 1.5rem 0; }
	.abs-way > *, .abs-way > .abs-way__title { grid-column: 2; grid-row: auto; }
	.abs-way::before { grid-row: 1 / span 6; }
	.entry-content .abs-way__title { margin-bottom: .75rem; font-size: 1.5rem; }
}

/* Speaking: "See every room" reveals the remaining rows in place (native details, no JS) */
.abs-more { border-top: 1px solid var(--abs-rule); }
.abs-more > summary { display: inline-block; min-height: 44px; line-height: 44px; margin-top: .5rem; font-size: .8125rem; font-weight: 600; letter-spacing: .01em; color: var(--abs-ink); cursor: pointer; border-bottom: 1px solid var(--abs-line); }
.abs-more > summary:hover { border-bottom-color: var(--abs-ink); }
.abs-more[open] > summary { margin-bottom: .5rem; }

/* The top-level header links are the lead step: the parent's customiser size
   landed at 21px, a hair under it, which made a seventh size. */
html .site-header .main-navigation > ul > li > :is(a, .abs-nav-more__trigger) { font-size: var(--abs-t-lead); }

/* The header's current page and its section take ink on light, never gold: gold
   carries no words on a light ground (1.68:1 on paper). The parent's 2px gold
   rule under the current page stays; `--abs-lit` is ink on light and gold on
   dark, so dark mode is unchanged. */
html .site-header :is(.current-menu-item, .current_page_item, .current-menu-parent, .current-menu-ancestor, .current_page_parent, .current_page_ancestor) > a { color: var(--abs-lit); }

/* ---------- About page layout ----------
   Heading left, text right on the opening and the turn (the grid Speaking and
   Advisory use); a cover-led two-column Explore band; the method on the green
   block as a 2 x 2 grid of steps, its numerals in the site's display type; a
   photo beside the text it belongs to; the close on the amber block. */
.abs-ab-open .abs-cols { align-items: end; }
.entry-content .abs-ab-open .abs-statement { margin: 0; max-width: 14ch; }
.entry-content .abs-ab-open .abs-lede { margin: 0; max-width: none; }
.entry-content .abs-ab-open .abs-meta--id { margin: 1.5rem 0 0; max-width: none; color: var(--abs-ink-dim); }
.entry-content .abs-ab-open .abs-label { margin-bottom: 1.5rem; }
.entry-content .abs-ab-turn .abs-title { max-width: none; }
.entry-content .abs-ab-turn .abs-prose { max-width: 46ch; margin: 0 0 1.25em; }
.entry-content .abs-ab-turn .abs-plate-fig { margin-block-start: clamp(1.5rem, 3vw, 2.5rem); }
.entry-content .abs-ab-explore .abs-cols { align-items: center; }
.entry-content .abs-ab-explore .abs-title { max-width: none; }
.entry-content .abs-ab-explore .abs-prose { max-width: 46ch; }
.entry-content .abs-ab-explore .abs-cta-row { margin-top: 1.5rem; }
.entry-content .abs-ab-explore .abs-cta-row > p { margin: 0; }
.abs-ab-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 6vw, 6rem); margin-top: 0; }
.abs-ab-step { border-top: 1px solid var(--abs-rule); padding-top: 1.5rem; }
.entry-content .abs-ab-step > * { margin-block: 0; }
.entry-content .abs-ab-step__n { margin: 0 0 1rem; font-size: var(--abs-t-display); font-weight: 700; line-height: .9; letter-spacing: -.03em; color: var(--abs-lit); }
.entry-content .abs-ab-step .abs-step__title { margin: 0 0 .6rem; }
.entry-content .abs-ab-now .abs-title { max-width: none; }
.entry-content .abs-ab-now .abs-prose { max-width: 46ch; }
.entry-content .abs-ab-now .abs-cols { align-items: center; }
.entry-content .abs-ab-close .abs-display { margin: 0 0 2.5rem; }
.entry-content .abs-ab-close .abs-prose { max-width: 34ch; }
@media (max-width: 879px) { .abs-ab-steps { grid-template-columns: 1fr; } }

/* ---------- Gold never carries words on a light ground ----------
   The parent colours every plain link and every outline button with the brand
   gold, which is 1.68:1 on paper. On light, plain content links and outline-button
   text take ink (underlined, so the colour is not the only cue) and the outline
   button keeps its gold border; on dark `--abs-lit` is gold again, so nothing
   changes there. A plain fill button is gold-grounded, so its text is always the
   dark ink: in dark mode the parent turned it light, which was 1.59:1. */
html .entry-content :where(a:not([class])) { color: var(--abs-lit); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
html .entry-content .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) { color: var(--abs-lit); border-color: var(--wp--preset--color--primary, #f4b617); }
/* .abs-btn is excluded: those buttons take the ground's own ink, so they stay readable
   on the green block and in dark mode. */
html .entry-content .wp-block-button:not(.is-style-outline):not(.abs-btn) > .wp-block-button__link:not(.has-text-color):not(.has-background) { color: #1a1a1a; }

/* Advisory problem band (adapted from Evergrid "Home Features 01"): copy left,
   a five-tile photo grid right. Paper ground; the only colour is the green
   tint over each photograph. Square corners throughout. */
.abs-problem__grid { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.abs-problem__grid > * { margin-block: 0; }
.entry-content .abs-problem .abs-display--h2 { margin: 0 0 2.5rem; }
.entry-content .abs-problem__copy .abs-copy { max-width: none; }
.abs-problem__item { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: .9rem; align-items: start; max-width: 70%; margin-top: 1.5rem; }
.abs-problem__item > * { margin-block: 0; }
.abs-problem__mark { display: block; margin-top: .3rem; color: var(--abs-ink); }
.entry-content .abs-problem__text { margin: 0; font-size: var(--abs-t-body); line-height: 1.6; color: var(--abs-ink-2); }
.abs-problem__text strong { color: var(--abs-ink); font-weight: 700; }
.entry-content .abs-problem__copy > .abs-copy:last-child { margin-top: 2rem; }

.abs-problem__tiles { display: grid; gap: clamp(.75rem, 1.5vw, 1.25rem); }
.abs-problem__row { display: grid; gap: clamp(.75rem, 1.5vw, 1.25rem); }
.abs-problem__row > * { margin-block: 0; }
.abs-problem__row--one { width: 80%; }
.abs-problem__row--two { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.abs-problem__row--three { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); width: 80%; margin-inline-start: auto; }
.abs-problem__tile { position: relative; overflow: hidden; height: clamp(11rem, 16vw, 15rem); border-radius: 0; background: #10322C; }
.abs-problem__tile > * { margin: 0; }
.abs-problem__tile .wp-block-image { position: absolute; inset: 0; }
.abs-problem__tile img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.abs-problem__tile::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, #10322C 68%, transparent); pointer-events: none; }
.entry-content .abs-problem__title { position: absolute; z-index: 1; top: 0; left: 0; right: 0; margin: 0; padding: 1.5rem; font-size: clamp(1.2rem, 1rem + .5vw, 1.5rem); font-weight: 700; line-height: 1.2; color: #f9f6f1; }
@media (hover: hover) { .abs-problem__tile:hover img { transform: scale(1.08); } }
.abs-problem__tile:focus-within img { transform: scale(1.08); }
@media (max-width: 960px) {
	.abs-problem__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
	.abs-problem__item { max-width: none; }
	.abs-problem__row--one, .abs-problem__row--three { width: 100%; }
	.abs-problem__row--one, .abs-problem__row--two, .abs-problem__row--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.abs-problem__row--one > :only-child { grid-column: 1 / -1; }
	.abs-problem__tile { height: 170px; }
	.entry-content .abs-problem__title { padding: 1rem; font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
	.abs-problem__tile img { transition: none; }
	.abs-problem__tile:hover img, .abs-problem__tile:focus-within img { transform: none; }
}

/* About opening: label, headline, lede and identity line fade up on load,
   0.3s apart. Pure CSS so the text is visible without scripts; none of it
   runs under reduced motion. */
@keyframes abs-ab-open-in { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
	.abs-ab-open__in { animation: abs-ab-open-in .8s cubic-bezier(.16, 1, .3, 1) both; }
	.abs-ab-open__in--2 { animation-delay: .3s; }
	.abs-ab-open__in--3 { animation-delay: .6s; }
	.abs-ab-open__in--4 { animation-delay: .9s; }
}

/* Speaking talks: "People leave with" as a short list under its small label. */
.abs-rec__meta .abs-meta-leave { flex-basis: 100%; max-width: 40rem; }
.entry-content .abs-meta-list { margin: 0; padding-left: 1.1rem; font-size: .9375rem; line-height: 1.45; color: var(--abs-ink); }
.entry-content .abs-meta-list li { margin-top: .35rem; }

/* Contact: the social links are plain underlined text in ink, never buttons or pills. */
.entry-content .abs-socials { margin: 1.75rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; font-size: var(--abs-t-body); font-weight: 600; }
.abs-socials a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.abs-socials a:hover { text-decoration-thickness: 2px; }

/* Newsletter: the parent paints its sign-up button in the brand colour (a gold fill).
   Here gold is an accent, so the button is the .abs-btn look: square, ink outline,
   uppercase, ink fill on hover, the shared ink-and-gold focus ring. */
:is(.lvbl-newsletter-spot, .lvbl-newsletter-panel, .lvbl-newsletter-signup) .gform_wrapper.gform_wrapper {
	--gf-ctrl-btn-bg-color-primary: transparent;
	--gf-ctrl-btn-bg-color-hover-primary: var(--abs-ink);
	--gf-ctrl-btn-color-primary: var(--abs-ink);
	--gf-ctrl-btn-color-hover-primary: var(--abs-paper);
	--gf-ctrl-btn-border-color-primary: var(--abs-ink);
	--gf-ctrl-btn-border-color-hover-primary: var(--abs-ink);
	--gf-ctrl-btn-radius: 0;
}
:is(.lvbl-newsletter-spot, .lvbl-newsletter-panel, .lvbl-newsletter-signup) .gform_wrapper.gform-theme--framework .gform_footer input[type="submit"].gform_button.button,
html .lvbl-newsletter-header-button {
	border-radius: 0;
	font-size: var(--abs-t-micro);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}
:is(.lvbl-newsletter-spot, .lvbl-newsletter-panel, .lvbl-newsletter-signup) .gform_wrapper.gform-theme--framework .gform_footer input[type="submit"].gform_button.button:focus-visible,
html .lvbl-newsletter-header-button:focus-visible { outline: 2px solid var(--abs-ink); outline-offset: 3px; box-shadow: 0 0 0 3px var(--abs-accent); }
html .lvbl-newsletter-header-button { border-color: var(--abs-ink); color: var(--abs-ink); }
html .lvbl-newsletter-header-button:is(:hover, :focus-visible),
html .lvbl-newsletter-header-button.lvbl-newsletter-header-button[aria-expanded="true"] { background: var(--abs-ink); color: var(--abs-paper); opacity: 1; }