/*
Theme Name: Lighthouse Theme
Theme URI: https://evanhickok.com
Author: Evan Hickok
Author URI: https://evanhickok.com
Description: Custom theme for evanhickok.com, consuming the Lighthouse Leadership brand system.
Version: 0.30.2
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lighthouse-theme
Tags: blog, custom-colors, custom-logo, full-site-editing
*/

/*
 * Phase history is in lighthouse-theme/CHANGELOG.md (repo-only,
 * excluded from the WP.com upload artifact).
 * Brand book at brand/DESIGN.md (v2.0).
 * Section map below; per-section commentary lives at each section header.
 */

/*
 * --- Section map ---
 *   1. ALIASES        — design-system token names mapped onto theme.json presets
 *   2. RESET          — minimal box-sizing + margin reset
 *   3. BASE — body   — typography defaults that propagate to everything
 *   4. BASE — headings
 *   5. BASE — paragraphs and lists
 *   6. BASE — links
 *   7. BASE — entry-meta and entry-content prose
 *   8. UTILITIES     — .lh-lead, .lh-small (running prose accents)
 *   9. COMPONENTS — buttons       (.lh-button, --ghost, --compact)
 *  10. COMPONENTS — text-link    (.lh-textlink)
 *  11. COMPONENTS — input        (.lh-input, --compact)
 *  12. COMPONENTS — masthead + nav  (.lh-masthead, .lh-nav, hamburger)
 *  13. COMPONENTS — footer       (.lh-footer)
 *  14. COMPONENTS — blockquote   (blockquote, .entry-content blockquote)  [v2.1 "Block" pattern]
 *  15. COMPONENTS — pullquote    (.lh-pullquote, .wp-block-pullquote, .figure-quote)  [v2.0 "Pullquote" pattern]
 *  15a. COMPONENTS — aside       (.lh-aside, .is-style-lh-aside, aside)   [v2.1 "Aside" pattern — REVERTED v0.9.5 per reconciliation v0.9.3, dictionary helpers retired]
 *  15b. COMPONENTS — highlight   (.lh-highlight, .is-style-lh-highlight)  [v2.1 "Highlight" pattern — NET-NEW v0.9.3]
 *  15c. COMPONENTS — callout     (.lh-callout, .is-style-lh-callout)      [v2.1 "Callout" pattern — NET-NEW v0.9.3]
 *  15d. COMPONENTS — pullquote (essay)         (.lh-essay-pullquote)          [Long-form · NET-NEW v0.9.6]
 *  15e. COMPONENTS — refrain (essay)           (.lh-essay-refrain, --vision)  [Long-form · NET-NEW v0.9.6]
 *  15f. COMPONENTS — blockquote (essay)        (.lh-essay-blockquote)         [Long-form · NET-NEW v0.9.6]
 *  15g. COMPONENTS — inline quote (essay)      (.lh-essay-inline-quote)       [Long-form · NET-NEW v0.9.6]
 *  15h. COMPONENTS — aside-section (essay)     (.lh-essay-aside-section)      [Long-form · NET-NEW v0.9.6]
 *  15i. COMPONENTS — exhibit (essay)           (.lh-essay-exhibit, --ink)     [Long-form · NET-NEW v0.9.6]
 *  15j. COMPONENTS — inline figure (essay)     (.lh-essay-inline-figure)      [Long-form · NET-NEW v0.9.6]
 *  15k. COMPONENTS — marginalia (essay)        (.lh-essay-marginalia)         [Long-form · NET-NEW v0.9.6]
 *  15l. COMPONENTS — pair (essay)              (.lh-essay-pair, __quote--small)  [Long-form · NET-NEW v0.9.6]
 *  15m. COMPONENTS — podcast callout (essay)   (.lh-essay-podcast-callout)    [Long-form · NET-NEW v0.9.6]
 *  15n. COMPONENTS — mid-essay CTA (essay)     (.lh-essay-mid-cta)            [Long-form · NET-NEW v0.9.6]
 *  15o. COMPONENTS — end-of-essay CTA (essay)  (.lh-essay-end-cta)            [Long-form · NET-NEW v0.9.6]
 *  15p. COMPONENTS — article header (essay)    (.lh-essay-article-header)     [Long-form · NET-NEW v0.9.6]
 *  15q. COMPONENTS — footnote ref + footnotes  (.lh-essay-footnote-ref, .lh-essay-footnotes)  [Long-form · NET-NEW v0.9.6]
 *  15r. COMPONENTS — definition (essay)        (.lh-essay-definition)         [Long-form · NET-NEW v0.9.6]
 *  15s. COMPONENTS — marginal definition       (.lh-mdef)                     [Long-form · NET-NEW v0.9.6]
 *  15t. COMPONENTS — long-form page wrapper    (.lh-essay-page)               [Long-form · NET-NEW v0.9.7 — flips body bg to paper]
 *  15u. COMPONENTS — eyebrow utility           (.lh-essay-eyebrow, --orange, --yellow)  [Long-form · NET-NEW v0.9.8]
 *  15v. COMPONENTS — sticky-TOC enhancements   (.lh-toc-progress, .is-active marker)  [Long-form · NET-NEW v0.9.12]
 *  15w. COMPONENTS — cornerframe (essay)       (.lh-essay-cornerframe)        [Long-form · NET-NEW v0.9.35]
 *  16. (vacated — sticky bar moved to lighthouse-popup in Phase K; number preserved)
 *  17. CONTAINER MEASURE — .lh-main, .lh-article, .entry-content (1080)
 *  18. RADII — defensive zero on native form/button elements
 *  19. MOTION — prefers-reduced-motion defense
 *  20. POST-CONTENT UTILITIES — non-prefixed inline-content classes (.paper-lift, .podcast-highlight-box [DEPRECATED])
 *
 * NOT COVERED BY THIS MAP — satellite sheets in assets/css/, conditionally
 * enqueued on their own pages (never global): home.css (homepage,
 * inc/homepage.php), articles.css (/all_articles/, inc/articles-rest.php),
 * carousel.css (article-carousel presence). They consume the §1 aliases
 * declared here; they declare no tokens of their own.
 *
 * Source of truth for every value below: brand/DESIGN.md (canonical as of
 * May 8, 2026; replaces brand/design-system.jsx v2.0 — same values,
 * Google DESIGN.md format with YAML token front matter). Section names
 * map directly: Colors, Typography, Components, Quotations. The v2.0
 * quote chapter prose authority lives in brand/style-guide-v2/ (handoff
 * bundle from Claude Design). Never invent a value here — bring it back
 * to DESIGN.md if a new role is needed.
 */


/* ============================================================
   1. ALIASES — design-system tokens via theme.json presets
   ============================================================
   The brand book and PLAN.md spec table reference colors and families
   by their --ll-* names (--ll-cream, --ll-ink, --ll-orange-h, etc.).
   theme.json emits them as --wp--preset--color--cream and friends.
   This block aliases one onto the other so CSS below reads cleanly in
   the brand's vocabulary. If theme.json's slugs ever change, only this
   block has to move. */
:root {
	/* Color */
	--ll-cream:    var(--wp--preset--color--cream);
	--ll-ink:      var(--wp--preset--color--ink);
	--ll-mute:     var(--wp--preset--color--mute);
	--ll-rule:     var(--wp--preset--color--rule);
	--ll-paper:    var(--wp--preset--color--paper);
	--ll-orange:   var(--wp--preset--color--orange);
	--ll-orange-h: var(--wp--preset--color--orange-h);
	--ll-teal:     var(--wp--preset--color--teal);
	--ll-yellow:   var(--wp--preset--color--yellow);

	/* Typography */
	--ll-sans:    var(--wp--preset--font-family--open-sans);
	--ll-serif:   var(--wp--preset--font-family--crimson-text);
	--ll-eyebrow: var(--wp--preset--font-family--prata);
	/* Brevity alias — long-form essay primitives (§15d–§15s) reference
	   `--ll-eye` to match the design handoff bundle's `F.eye` token name.
	   Same value as --ll-eyebrow. */
	--ll-eye:     var(--wp--preset--font-family--prata);
	/* Mono — declared directly (not a Gutenberg preset) because no consumer
	   needs it as a typography picker option. Consumed by the §14/§15 cite
	   styles AND the long-form essay primitives. v0.9.4 and earlier
	   referenced `var(--ll-mono)` without ever declaring it — cite
	   silently inherited the parent serif type instead of rendering MONO.
	   This declaration fixes that latent bug and unlocks the long-form
	   primitives in one move. JetBrains Mono with system-mono fallbacks. */
	--ll-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Two extra colors for the long-form essay primitives. Declared
	   directly (not Gutenberg presets) because they're not exposed in
	   the editor's color picker — they're internal to the essay system.
	   Source: design handoff bundle tokens.js (--ink-soft, --orange-D). */
	--ll-ink-soft:    #3F3F3D;   /* essay article-header dek, mid-cta descriptor, footnote body */
	--ll-orange-dark: #C97900;   /* essay footnote-ref, end-cta accent, article-header eyebrow;
	                                also: categorical series 2 in the chart palette */

	/* State + surface tokens (v0.20.14). Canonical in brand/DESIGN.md; same
	   direct-declaration tier as above (never editor-picker colors). Before
	   this, var(--ll-error)/var(--ll-success) were referenced but NEVER
	   declared — each usage silently rendered its local fallback, and two
	   different error reds had crept in (§15n used #b3261e, off-canon). */
	--ll-error:   #C8342A;   /* form validation / error status text */
	--ll-success: #2A7A3C;   /* confirmation / success status text */
	--ll-vision:  #FFF8E5;   /* "vision" surface — refrain --vision + marginalia --vision backgrounds */

	/* Chart palette — Jewel Box. Declared directly, never exposed to the
	   editor color picker, never used in UI chrome. For SVG / HTML figures
	   and exhibits embedded inside .lh-essay-page. Source: brand/DESIGN.md
	   alpha+++ (2026-06-02), Chart sections.
	   • Categorical takes colors in order — series 1 ink, series 2
	     orange-dark (above), series 3–6 below.
	   • Diverging (loss / gain) is muted on purpose — held clear of State
	     `error` / `success` and of categorical garnet / emerald.
	   • Sequential is a 5-step warm sepia ramp for ranked data.
	   Authors should never reach for these via inline style; figures use
	   them via var(--ll-chart-*) inside SVG/HTML, or via custom block
	   styles when the long-form chart block lands. */
	--ll-chart-sapphire: #2B4C9B;  /* categorical · series 3 */
	--ll-chart-emerald:  #1E7A5E;  /* categorical · series 4 */
	--ll-chart-amethyst: #7A3E92;  /* categorical · series 5 */
	--ll-chart-garnet:   #9E2B3F;  /* categorical · series 6 — last in order */
	--ll-chart-loss:     #9C3322;  /* diverging · negative pole, brick red */
	--ll-chart-gain:     #4A6B3F;  /* diverging · positive pole, olive green */
	--ll-chart-seq-1:    #F0E2B8;  /* sequential · step 1 (lightest) */
	--ll-chart-seq-2:    #E0BE7E;  /* sequential · step 2 */
	--ll-chart-seq-3:    #CE9A4F;  /* sequential · step 3 */
	--ll-chart-seq-4:    #A66E2E;  /* sequential · step 4 */
	--ll-chart-seq-5:    #6E4418;  /* sequential · step 5 (darkest) */

	/* Shadows — only two recipes per design-system.jsx v1.1 §04. Named
	   here so future cards / overlays consume the token instead of
	   inlining a value that drifts. No current consumer in Phases A–E. */
	--ll-shadow-overlay: 0 16px 40px rgba(0, 0, 0, 0.18);
	--ll-shadow-hover:   0 4px 14px rgba(0, 0, 0, 0.08);

	/* Figure widths — Phase P (image sizing). Consumed by the long-form
	   image blocks (§15i Exhibit, §15j Inline Figure, §15l Pair) via the
	   `size` block attribute → modifier class:
	     --size-narrow → --ll-figure-w-narrow (480px)
	     --size-medium → --ll-figure-w-medium (640px)
	     --size-body   → no override (figure flows at 100% of body measure)
	     --size-wide   → reserved slug; no CSS rule today (activate when
	                     long-form gains a wider canvas). */
	--ll-figure-w-narrow: 480px;
	--ll-figure-w-medium: 640px;
}


/* ============================================================
   2. RESET — minimal
   ============================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
}


/* ============================================================
   3. BASE — body
   ============================================================
   Default running text: Crimson Text 400 / 19 / 28 on cream paper, ink
   color. Sets the baseline that headings and components override. */
body {
	margin: 0;
	/* Palette role swap (2026-05-21): the page background is now paper (white);
	   cream becomes the elevated-surface color. See brand/DESIGN.md "Colors". */
	background-color: var(--ll-paper);
	color: var(--ll-ink);
	font-family: var(--ll-serif);
	font-size: 19px;
	line-height: 28px;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}


/* ============================================================
   4. BASE — headings
   ============================================================
   H1–H3 are the canonical heading specs from design-system.jsx v1.1 §03.
   H4–H6 are extrapolated using the same Open Sans / 600 weight / declining
   size pattern; they should not be needed in routine essay layout but
   exist so block-editor authors can never produce an unstyled heading.
   No reliance on UA defaults — every property is explicit. */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--ll-sans);
	color: var(--ll-ink);
	margin: 0 0 16px;
}

h1 {
	font-weight: 700;
	font-size: 42px;
	line-height: 48px;          /* lh ≈ 1.143 per spec */
	letter-spacing: -0.4px;
}

h2 {
	font-weight: 600;
	font-size: 32px;
	line-height: 38px;          /* lh ≈ 1.19 per spec */
	letter-spacing: -0.2px;
}

h3 {
	font-weight: 600;
	font-size: 22px;
	line-height: 28px;          /* lh ≈ 1.27 per spec */
	letter-spacing: -0.1px;
}

/* H4–H6 are extrapolated, not in the brand book; document any deliberate
   override in Phase D when blockquote/pullquote land. */
h4 {
	font-weight: 600;
	font-size: 18px;
	line-height: 24px;
	letter-spacing: -0.05px;
}

h5 {
	font-weight: 600;
	font-size: 16px;
	line-height: 22px;
	letter-spacing: 0;
}

h6 {
	font-weight: 700;
	font-size: 13px;
	line-height: 18px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ll-mute);
}


/* ============================================================
   5. BASE — paragraphs and lists
   ============================================================ */
p {
	margin: 0 0 24px;
}

ul,
ol {
	margin: 0 0 24px;
	padding-left: 24px;
}

ul li,
ol li {
	margin-bottom: 8px;
}

ul li:last-child,
ol li:last-child {
	margin-bottom: 0;
}


/* ============================================================
   6. BASE — links
   ============================================================
   Body links: ink color, 1px rule-color underline, hover both color and
   underline shift to --ll-orange-h (#F27D00). Component-style text-links
   (Open Sans uppercase 14 with teal underline) land in Phase C and use
   their own selector — they should not collide with the body-link rule.

   Selector scoping note: prose link color/decoration is scoped to
   `body .entry-content a` rather than bare `a`. Two reasons —
   (1) semantic: prose links are different beasts from nav links and
   buttons, which carry their own treatments per Phase C/D, so scoping
   to .entry-content matches the brand-book intent.
   (2) cascade defense: WP.com staging runs Elementor, which injects
   `.elementor-kit-258 a { color:#1500FF }` on every anchor descended
   from body — specificity (0,1,1). Our bare `a` rule at (0,0,1) loses.
   The body-prefixed scoped selector lands at (0,1,2), which beats
   Elementor regardless of cascade order. The same pattern will be
   useful for any future plugin that adds its own anchor-color rules.

   :focus-visible stays as a global `a` rule — focus rings should be
   ubiquitous (every link, every context, including nav and components),
   so the lower specificity is correct here. */
body .entry-content a {
	color: var(--ll-ink);
	text-decoration: underline;
	text-decoration-color: var(--ll-rule);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition:
		color 120ms ease-out,
		text-decoration-color 120ms ease-out;
}

body .entry-content a:hover,
body .entry-content a:focus {
	color: var(--ll-orange-h);
	text-decoration-color: var(--ll-orange-h);
}

a:focus-visible {
	outline: 2px solid var(--ll-teal);
	outline-offset: 2px;
}


/* ============================================================
   7. BASE — entry-meta and entry-content prose
   ============================================================
   .entry-meta is the date/category/author line above an article. Sans,
   small, mute — editorial convention, kept distinct from running prose.

   .entry-content carries the article body. Inherits body type defaults;
   adds heading-rhythm spacing so an essay reads at a good cadence without
   each heading needing manual margin overrides. */
.entry-meta {
	font-family: var(--ll-sans);
	font-size: 14px;
	line-height: 20px;
	color: var(--ll-mute);
	letter-spacing: 0.02em;
	margin: 0 0 24px;
}

.entry-content {
	font-family: var(--ll-serif);
	font-size: 19px;
	line-height: 28px;
}

/* Author note — the post author's WP profile bio, rendered by single.php at
   the end of the article (replaces the per-post typed bio paragraph). It's
   body prose, so it stays flush-left in the content column; a hairline rule +
   space above separate it from the end-CTA. Italic serif matches the look of
   the typed bio it replaces. (2026-05-21) */
.lh-author-note {
	margin: 56px 0 0;
	padding-top: 28px;
	border-top: 1px solid var(--ll-rule);
	font-family: var(--ll-serif);
	font-style: italic;
	font-size: 18px;
	line-height: 1.6;
	color: var(--ll-ink-soft);
}

.lh-author-note p {
	margin: 0;
}

.lh-author-note p + p {
	margin-top: 12px;
}

.entry-content > * + h2 {
	margin-top: 48px;
}

.entry-content > * + h3 {
	margin-top: 32px;
}

.entry-content > * + h4,
.entry-content > * + h5,
.entry-content > * + h6 {
	margin-top: 24px;
}


/* ============================================================
   8. UTILITIES — running prose accents
   ============================================================
   Naming: .lh-* prefix on all theme utilities, so a future post can use
   class="lh-lead" without colliding with WP core, plugin, or block-editor
   classes. .lh-lead and .lh-small mirror the Lead and Small rows in
   design-system.jsx §03. */
.lh-lead {
	font-family: var(--ll-serif);
	font-size: 21px;
	line-height: 32px;
}

.lh-small {
	font-family: var(--ll-serif);
	font-size: 14px;
	line-height: 20px;
}

/* Visually hide an element while keeping it perceivable to assistive
   tech. WordPress-conventional class name (Akismet, Jetpack, _s starter
   theme all emit it); replicating it here so the theme stands alone
   without depending on a plugin to provide the rule. First consumer is
   the Phase D sticky bar's <label>; future forms / skip-links can
   reuse the same recipe. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}


/* ============================================================
   9. COMPONENTS — buttons
   ============================================================
   Three button variants share `.lh-button` as the base. Modifiers
   (--ghost, --compact) layer on top. Square corners by design-system
   convention; the only square-rule exception is the sticky bar's 2px
   subtle radius, which lands in Phase D.

   Specs (design-system.jsx v1.1 §05):
   - Primary (.lh-button)        : --ll-orange bg, --ll-paper text, 52h,
                                   Open Sans 700/14/0.11em uppercase,
                                   hover → --ll-orange-h.
   - Ghost   (.lh-button--ghost) : transparent bg, --ll-ink text + 1px
                                   --ll-ink border, hover swaps to
                                   filled-ink.
   - Compact (.lh-button--compact): 40h, padding 10px 18px, Open Sans
                                   700/12/0.11em — sized for masthead.

   :focus-visible (keyboard focus only) adds the --ll-teal ring per
   the brand's focus-state convention. Mouse focus does NOT add the
   ring — that's why we use :focus-visible, not bare :focus. */
/* `body` prefix — cascade-defense lift. .lh-button is applied to
   <a> elements (masthead Essays CTA, etc.) — without the lift,
   Elementor's `.elementor-kit-NNN a { color: <blue> }` injection on
   Elementor-built pages would override the brand color. Same defense
   pattern as §6 body links and §12 masthead. (v0.8.7) */
body .lh-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	padding: 0 28px;
	margin: 0;
	background-color: var(--ll-orange);
	color: var(--ll-paper);
	font-family: var(--ll-sans);
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition:
		background-color 120ms ease-out,
		color 120ms ease-out,
		border-color 120ms ease-out;
}

body .lh-button:hover,
body .lh-button:focus {
	background-color: var(--ll-orange-h);
	color: var(--ll-paper);
}

body .lh-button:focus-visible {
	outline: 2px solid var(--ll-teal);
	outline-offset: 2px;
}

body .lh-button--ghost {
	background-color: transparent;
	color: var(--ll-ink);
	border: 1px solid var(--ll-ink);
	padding: 0 26px;        /* v2.1: ghost is 2px less than primary to */
	                        /* compensate for visual weight added by border */
}

body .lh-button--ghost:hover,
body .lh-button--ghost:focus {
	background-color: var(--ll-ink);
	color: var(--ll-paper);
	border-color: var(--ll-ink);
}

body .lh-button--compact {
	height: 40px;
	padding: 0 18px;
	font-size: 12px;
}


/* ============================================================
   10. COMPONENTS — text-link
   ============================================================
   Open Sans 700 uppercase 14 with 1px teal underline. Distinct from
   prose body links (which are scoped to .entry-content a in §6) — this
   component is for "secondary" links in cards, footers, and inline
   navigation away from prose. Hover takes color and underline both to
   --ll-orange-h, matching prose links for consistency. */
/* `body` prefix — cascade-defense lift. .lh-textlink is explicitly
   a link component; same Elementor kit collision risk as .lh-button
   above. (v0.8.7) */
body .lh-textlink {
	display: inline-block;
	font-family: var(--ll-sans);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--ll-ink);
	text-decoration: underline;
	text-decoration-color: var(--ll-teal);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	transition:
		color 120ms ease-out,
		text-decoration-color 120ms ease-out;
}

body .lh-textlink:hover,
body .lh-textlink:focus {
	color: var(--ll-orange-h);
	text-decoration-color: var(--ll-orange-h);
}


/* ============================================================
   11. COMPONENTS — input
   ============================================================
   Email input per design-system.jsx v1.1 §05: 52h, paper bg, Crimson
   Text 18 ink, 1px rule border, → teal border + 3px teal/30 ring on
   focus. The focus ring is a literal rgba because deriving 30% of
   --ll-teal in CSS would need color-mix() (Color 5, supported in WP.com
   Atomic browsers but newer than the rest of the file's syntax — kept
   compatible deliberately).

   PLAN.md mentioned "Crimson Text 16" for the input; that's actually
   the sticky-bar's compact variant per design-system.jsx line 488.
   The full-size input (this one) is 18 per line 432.

   Native autofill styling is overridden so the cream/paper bg doesn't
   get hijacked by Chrome's blue autofill. */
.lh-input {
	display: block;
	width: 100%;
	height: 52px;
	padding: 0 16px;
	margin: 0;
	background-color: var(--ll-paper);
	color: var(--ll-ink);
	font-family: var(--ll-serif);
	font-size: 18px;
	line-height: 1.4;
	border: 1px solid var(--ll-rule);
	border-radius: 0;
	box-shadow: none;
	outline: none;
	transition:
		border-color 150ms ease-out,
		box-shadow 150ms ease-out;
}

.lh-input:focus,
.lh-input:focus-visible {
	border-color: var(--ll-teal);
	box-shadow: 0 0 0 3px rgba(110, 193, 228, 0.30);
	outline: none;
}

.lh-input::placeholder {
	color: var(--ll-mute);
	opacity: 1;             /* Firefox lowers placeholder opacity by default */
}

/* Defeat Chrome/Edge autofill yellow-blue background takeover. */
.lh-input:-webkit-autofill,
.lh-input:-webkit-autofill:hover,
.lh-input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px var(--ll-paper) inset;
	-webkit-text-fill-color: var(--ll-ink);
	transition: background-color 5000s ease-in-out 0s;
}

/* Compact input — sticky bar variant per design-system.jsx v1.1 line 488.
   40h, Crimson Text 16, tighter horizontal padding. Same border + focus-ring
   recipe as the full-size input so focus behavior is consistent across
   surfaces. The sticky bar is the primary consumer; the modifier exists
   here (rather than scoped to .lh-stickybar) so any future compact-form
   surface (footer signup, inline mid-article CTA) inherits the same recipe. */
.lh-input--compact {
	height: 40px;
	padding: 0 12px;
	font-size: 16px;
}


/* ============================================================
   12. COMPONENTS — masthead + nav
   ============================================================
   Yellow #FFC100 masthead, Prata uppercase nav links, orange compact
   CTA on the right. Matches design-system.jsx v1.1 §04 exactly.

   Layout: flex row above 768px (logo, nav, CTA inline). Below 768px the
   nav links collapse behind a hamburger toggle that morphs into an X
   when expanded. The CTA stays visible at the masthead level so the
   primary destination is always one tap away.

   Active page indication: .current-menu-item gets a thin --ll-teal
   underline. NOT the production GeneratePress color #00afb3 — that's
   the drift the audit flagged and Phase G's cutover will erase.

   The masthead is position:relative so the mobile nav panel can absolute-
   position itself just below it without escaping the document flow. */
.lh-masthead {
	position: relative;
	background-color: var(--ll-yellow);
	z-index: 100;
}

.lh-masthead__inner {
	display: flex;
	align-items: center;
	gap: 32px;
	max-width: 1080px;
	margin: 0 auto;
	padding: 14px 32px;
}

/* Wordmark fallback when no custom logo is uploaded — used by header.php's
   else branch. Pure text, no image. */
/* `body` prefix — cascade-defense lift to beat Elementor's
   `.elementor-kit-NNN a` link-color injection on Elementor-built
   pages. Same pattern as §6 body links and §13 footer wordmark. */
body .lh-masthead__brand {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	color: var(--ll-ink);
	text-decoration: none;
	font-family: var(--ll-sans);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.02em;
}

/* WP custom logo output: <a class="custom-logo-link"><img class="custom-logo"></a>.
   Renders as a sibling of .lh-nav inside .lh-masthead__inner (not nested
   inside .lh-masthead__brand) — so we target the WP-emitted classes
   directly rather than wrapping them. */
.lh-masthead .custom-logo-link {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	line-height: 0;
}

.lh-masthead .custom-logo {
	display: block;
	height: 32px;
	width: auto;
	max-height: 32px;
}

.lh-nav {
	flex: 1;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 24px;
}

.lh-nav__list {
	display: flex;
	align-items: center;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lh-nav__list li {
	margin: 0;
	padding: 0;
}

/* `body` prefix — cascade-defense lift to beat Elementor's
   `.elementor-kit-NNN a` link-color injection on Elementor-built
   pages. Without it, masthead nav links rendered in Elementor's
   link blue instead of --ll-ink on pillar pages. */
body .lh-nav__list a {
	font-family: var(--ll-eyebrow);
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--ll-ink);
	text-decoration: none;
	padding: 4px 0;
	transition:
		color 120ms ease-out,
		border-color 120ms ease-out;
}

body .lh-nav__list a:hover,
body .lh-nav__list a:focus {
	color: var(--ll-orange-h);
}

body .lh-nav__list .current-menu-item > a,
body .lh-nav__list .current_page_item > a {
	border-bottom: 1px solid var(--ll-teal);
}

.lh-masthead__cta {
	flex-shrink: 0;
	/* margin-left:auto pushes the CTA to the right edge when .lh-nav is
	   display:none (mobile, before hamburger expansion). Above 768px the
	   nav has flex:1 and already consumes leftover space, so this auto
	   margin is a no-op. Either way, the CTA sits hard right. */
	margin-left: auto;
}

/* Hamburger toggle button — hidden above 768px, visible below.
   Three bars made from the icon span + its ::before/::after. When
   aria-expanded="true", the icon morphs into an X. */
.lh-nav__toggle {
	display: none;
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	position: relative;
}

.lh-nav__toggle:focus-visible {
	outline: 2px solid var(--ll-teal);
	outline-offset: 2px;
}

.lh-nav__toggle-icon,
.lh-nav__toggle-icon::before,
.lh-nav__toggle-icon::after {
	display: block;
	position: absolute;
	left: 8px;
	width: 24px;
	height: 2px;
	background-color: var(--ll-ink);
	transition:
		transform 200ms ease-out,
		opacity 200ms ease-out,
		background-color 200ms ease-out;
}

.lh-nav__toggle-icon {
	top: 19px;
}

.lh-nav__toggle-icon::before {
	content: '';
	transform: translateY(-8px);
}

.lh-nav__toggle-icon::after {
	content: '';
	transform: translateY(8px);
}

.lh-nav__toggle[aria-expanded="true"] .lh-nav__toggle-icon {
	background-color: transparent;
}

.lh-nav__toggle[aria-expanded="true"] .lh-nav__toggle-icon::before {
	transform: translateY(0) rotate(45deg);
}

.lh-nav__toggle[aria-expanded="true"] .lh-nav__toggle-icon::after {
	transform: translateY(0) rotate(-45deg);
}

@media (max-width: 768px) {
	.lh-masthead__inner {
		gap: 16px;
		padding: 12px 16px;
	}

	.lh-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		background-color: var(--ll-yellow);
		padding: 16px 16px 24px;
		gap: 0;
		border-top: 1px solid rgba(43, 43, 43, 0.08);
	}

	.lh-nav.lh-nav--open {
		display: flex;
	}

	.lh-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	body .lh-nav__list a {
		display: block;
		padding: 8px 0;
		font-size: 14px;
	}

	.lh-nav__toggle {
		display: inline-block;
	}

	/* On mobile, the masthead CTA can stay visible — it's the primary
	   destination — but reduce its footprint so the masthead doesn't wrap. */
	.lh-masthead__cta {
		padding: 0 12px;
		font-size: 11px;
	}
}


/* ============================================================
   13. COMPONENTS — footer
   ============================================================
   Two tiers stacked vertically:

     1. .lh-footer__cta — the always-on bottom-of-page newsletter
        pitch ported from production's Elementor "CTA_Footer" Theme
        Builder template (Phase F v0.8.0). Two-column layout: pitch
        on the left (italic pull-quote + body copy + bullet list),
        signup form on the right (heading + email field + button +
        reassurance line). Stacks below 768px. Renders only on single
        posts (v0.8.1 posts-only gate in footer.php) — matches
        production's CTA_Footer scoping.

     2. .lh-footer__inner — pre-existing wordmark + copyright sub-row.
        A thin wayfinding/legal courtesy below the CTA panel that
        production's Elementor footer omits. Renders site-wide
        regardless of the CTA gate.

   Outer .lh-footer wraps both: cream background matching the body,
   border-top in --ll-rule for the seam between article and footer.
   Padding is owned by each sub-section now, not by .lh-footer itself
   (the CTA panel needs more vertical room than the wordmark row).

   Form wiring: the signup form posts to lighthouse-popup's REST
   endpoint via assets/js/footer-signup.js — the same endpoint the
   sticky bar uses. Variant comes from lh_theme_get_stickybar_variant()
   so footer signups tag identically to sticky-bar signups. */
.lh-footer {
	border-top: 1px solid var(--ll-rule);
	margin-top: 96px;
	background-color: var(--ll-cream);
}

/* CTA panel — two-column on desktop, stacks below 768px. 96px top
   approximates production's 100px (rounded to a 4-unit step). 64px
   bottom gives the form-wrap visual breathing room above the sub-footer
   border. */
.lh-footer__cta {
	padding: 96px 32px 64px;
	border-bottom: 1px solid var(--ll-rule);
}

.lh-footer__cta-inner {
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: start;
}

@media (max-width: 768px) {
	.lh-footer__cta {
		padding: 64px 24px 48px;
	}

	.lh-footer__cta-inner {
		grid-template-columns: 1fr;
		gap: 48px;
	}
}

/* Pitch column — italic pull-quote headline + Crimson Text body. The
   .lh-footer__cta-quote is a <p> not a <blockquote> deliberately — the
   global blockquote treatment in §14 (decorative :before quote-mark,
   Crimson Text large-and-loose) is wrong for promotional copy stylized
   as a quote. Scope-overriding the global blockquote here would leak
   specificity weirdness; using a <p> sidesteps the whole question. */
.lh-footer__cta-pitch {
	font-family: var(--ll-serif);
	font-size: 19px;
	line-height: 28px;
	color: var(--ll-ink);
}

.lh-footer__cta-quote {
	font-family: var(--ll-serif);
	font-style: italic;
	font-size: 21px;
	line-height: 32px;
	color: var(--ll-ink);
	margin: 0 0 24px 0;
}

.lh-footer__cta-pitch p {
	margin: 0 0 16px 0;
}

.lh-footer__cta-pitch p:last-child {
	margin-bottom: 0;
}

.lh-footer__cta-list {
	margin: 0 0 16px 0;
	padding: 0 0 0 24px;
	list-style: disc;
}

.lh-footer__cta-list li {
	margin: 0 0 8px 0;
}

.lh-footer__cta-list li:last-child {
	margin-bottom: 0;
}

/* Form column — paper card surface above the cream body. Production
   used a custom #FAF8F2; --ll-paper (white) is the brand-aligned
   equivalent. 1px rule border + 32px padding gives card differentiation
   without adding a new shadow recipe (kept under the two named ones). */
.lh-footer__cta-form-wrap {
	background-color: var(--ll-paper);
	border: 1px solid var(--ll-rule);
	padding: 32px;
}

.lh-footer__cta-heading {
	font-family: var(--ll-sans);
	font-weight: 600;
	font-size: 22px;
	line-height: 28px;
	color: var(--ll-ink);
	letter-spacing: -0.01em;
	margin: 0 0 24px 0;
	text-align: center;
}

/* Stack the form vertically: input above button above status. The
   reassurance line below sits outside the form. */
.lh-footer__cta-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lh-footer__cta-form .lh-input {
	width: 100%;
}

/* Submit button — full-width override of the inline-flex .lh-button
   recipe so the button matches the input width above it. Other
   .lh-button consumers (masthead CTA) stay inline-flex. */
.lh-footer__cta-submit {
	width: 100%;
}

/* Status row — same color/weight pattern as .lh-stickybar__status so
   pending / success / error states read consistently across the two
   subscription surfaces. Centered to match the form's stacked column
   layout. `:empty` collapses display when no message present so the
   form doesn't reserve dead vertical space. */
.lh-footer__cta-status {
	font-family: var(--ll-sans);
	font-size: 12px;
	line-height: 1.4;
	color: var(--ll-mute);
	letter-spacing: 0.02em;
	text-align: center;
	margin: 0;
}

.lh-footer__cta-status:empty {
	display: none;
}

.lh-footer__cta-status--pending {
	color: var(--ll-mute);
	font-style: italic;
}

.lh-footer__cta-status--success {
	color: var(--ll-orange);
	font-weight: 600;
}

.lh-footer__cta-status--error {
	color: var(--ll-ink);
	font-weight: 600;
}

.lh-footer__cta-reassurance {
	font-family: var(--ll-serif);
	font-style: italic;
	font-size: 14px;
	line-height: 20px;
	color: var(--ll-mute);
	text-align: center;
	margin: 16px 0 0 0;
}

/* ----------------------------------------------------------------
   13a. Footer CTA — "5 Days to a High-Performing Team" variant
   ----------------------------------------------------------------
   Phase O (v0.9.20, May 13 2026). The 5-day course pitch is content-
   richer than the newsletter variant: it carries a title + italic
   subtitle, body copy, a day-by-day breakdown, a social-proof
   testimonial, and an italic intro line over the form. Reuses the
   shared .lh-footer__cta base (two-column grid, paper-card form wrap,
   stacked submit + status + reassurance) so the visual rhythm matches
   the newsletter footer; adds four new selectors for the new copy
   primitives that don't appear in the newsletter variant.

   Selectors scoped under .lh-footer__cta--5day so they don't bleed
   into the newsletter footer. The base selectors (.lh-footer__cta-pitch,
   .lh-footer__cta-list, .lh-footer__cta-heading, etc.) still apply
   inside this variant — the modifier only adds, it doesn't override. */

/* Title — sans-serif H2, slightly larger than .lh-footer__cta-heading
   (the form-wrap heading) since this is the section's primary
   headline. Tracks .lh-essay-pullquote sizing (§15d) for visual
   consistency with long-form essay headlines a pillar reader has
   just finished. */
.lh-footer__cta--5day .lh-footer__cta-title {
	font-family: var(--ll-sans);
	font-weight: 700;
	font-size: 30px;
	line-height: 36px;
	color: var(--ll-ink);
	letter-spacing: -0.015em;
	margin: 0 0 12px 0;
}

/* Subtitle — italic Crimson Text supporting line under the title.
   Matches .lh-footer__cta-quote rhythm (italic serif) but slightly
   smaller since the title above is doing the visual heavy lifting. */
.lh-footer__cta--5day .lh-footer__cta-subtitle {
	font-family: var(--ll-serif);
	font-style: italic;
	font-size: 19px;
	line-height: 28px;
	color: var(--ll-ink);
	margin: 0 0 24px 0;
}

/* Testimonial — italic social-proof line at the bottom of the pitch
   column. Mute color signals supporting role; italic + serif keeps
   it visually grouped with the prose above rather than the form. */
.lh-footer__cta--5day .lh-footer__cta-testimonial {
	font-family: var(--ll-serif);
	font-style: italic;
	font-size: 16px;
	line-height: 24px;
	color: var(--ll-mute);
	margin: 16px 0 0 0;
}

/* Form-intro — small italic clarifier directly under the form-wrap
   heading, before the email input. Sets expectation about cadence
   ("one short email every day for a week") that the newsletter
   variant doesn't need because newsletter cadence is in the
   reassurance line below the form. */
.lh-footer__cta--5day .lh-footer__cta-form-intro {
	font-family: var(--ll-serif);
	font-style: italic;
	font-size: 14px;
	line-height: 20px;
	color: var(--ll-mute);
	text-align: center;
	margin: 0 0 16px 0;
}

/* Sub-footer wordmark + © row. Tighter padding than the CTA panel
   above; centered single-column layout unchanged from the Phase C
   original. */
.lh-footer__inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 24px 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}

/* `body` prefix lifts specificity to 0,1,1 — matches Elementor's kit
   `.elementor-kit-NNN a` injection on pillar pages and beats it via
   later cascade order. Without the prefix, the wordmark renders in
   Elementor's link blue instead of --ll-ink on Elementor-built
   templates. Same pattern as the body link defense in §6. */
body .lh-footer__brand {
	font-family: var(--ll-sans);
	font-weight: 600;
	font-size: 16px;
	color: var(--ll-ink);
	text-decoration: none;
	letter-spacing: 0.02em;
}

body .lh-footer__brand:hover,
body .lh-footer__brand:focus {
	color: var(--ll-orange-h);
}

.lh-footer__copyright {
	font-family: var(--ll-sans);
	font-size: 14px;
	line-height: 20px;
	color: var(--ll-mute);
	margin: 0;
}


/* ============================================================
   14. COMPONENTS — blockquote   [v2.1 Quotations · "Block" pattern]
   ============================================================
   Phase I Movement 1 (v0.9.0) shipped this section against v2.0; v0.9.2
   reconciles it to the v2.1 canonical (May 6, 2026). v2.1 source: the
   Claude Design v2.1 artifact, lighthouse-leadership-design-system/
   project/uploads/design-system.jsx lines 638-645 (the "Block quote"
   demo Card). The bundle's top-level README explicitly designates
   design-system.jsx the single source of truth, so we transcribe from it.

   Deltas v2.0 → v2.1 (visible on every blockquote on every post):
     · border-left:  2px solid var(--ll-ink)  →  1px solid var(--ll-rule)
                                                 (much lighter — same
                                                 weight/color as page rules)
     · margin:       32px 0           →  12px 0 14px (tighter)
     · padding:      4px 0 4px 22px   →  0 0 0 20px
     · cite font:    JetBrains Mono 11 uppercase ink (0.08em tracking)
                     →  SANS 13 mute (regular case, no tracking)
     · cite::before "— " auto-prefix  →  REMOVED (author types if wanted;
                                         demo cite: "— interview, March 2026")
     · cite padding-left: 24px        →  0 (alignment-past-rule rationale
                                            is gone with the auto dash)

   ─── Six-pattern decision matrix (v2.1) ──────────────────────────────
   v2.1 expanded the v2.0 four-pattern set to six: Inline · Block ·
   Pull quote · Aside / Definition · Highlight · Callout. Never mix
   them, never use one for another's job. The most common mistake is
   pullquoting a line that already appears verbatim in adjacent prose
   — that's wasted attention.

     Inline      · Default. Quotes inside running prose, ≤25 words.
                   Attribution lives in the surrounding sentence.
                   Visual: curly quotes only — "like this" — no styling.
                   No CSS rule below; authoring discipline only.

     Block       · Quote >25 words, OR introducing a speaker
                   ("She says:"). This section's recipe.
                   Visual (v2.1 canonical): italic Crimson Text 18 / 1.55,
                   1px var(--ll-rule) left rule, 20px indent. Attribution:
                   SANS 13 muted on its own line — no auto em-dash prefix,
                   no uppercase, no tracking. If the author wants a leading
                   dash they type it (demo cite: "— interview, March 2026").
                   NO giant quote-mark glyph.

     Pullquote   · Pure visual device — give a scanner a reason to stop.
                   The line must NOT appear verbatim in the prose adjacent
                   to it. Recipe in §15.
                   Visual (v2.1 canonical): italic Crimson 28 / 1.3, 2px
                   ink left rule, 24px padding-left. Cite renders MONO 11
                   muted uppercase (0.4px tracking) below. No quote marks.

     Aside /     · Reference material — definitions, glosses, sidebars.
     Definition    NOT a quote. Recipe in §15a.
                   Visual: 1px var(--ll-rule) bordered box, paper bg,
                   Prata 11 / 0.22em uppercase eyebrow ("DEFINITION"),
                   serif body.

     Highlight   · Reader testimonial / external feedback. Distinct
                   from Block (in-essay quoting of a published source)
                   and Pullquote (visual scanner-stop). Use when the
                   quote is feedback FROM someone, not source material
                   you're citing AT readers. Recipe in §15b.
                   Visual: cream-bg card, 1px var(--ll-rule) border,
                   SERIF 18 / 1.5 body + SANS 13 mute attribution.

     Callout     · Author's-own-emphasis. A single imperative or
                   thesis line you want to mark as "this matters more
                   than the surrounding paragraph." Distinct from
                   Pullquote (which RE-PRESENTS a line already in the
                   prose); the Callout asserts NEW emphasis. Use
                   sparingly — canonical guidance is "once or twice
                   per essay maximum." Recipe in §15c.
                   Visual: paper-bg card, 1px rule border with 3px ink
                   top accent, SANS 600 / 18 body + SERIF 15 mute
                   optional descriptor.

   The big open-quote glyph (❝, U+275D) is BANNED — reads as cartoonish,
   clashes with editorial restraint. Phase I Movement 1 dropped the
   ::before quote-mark this section used to render. If you find yourself
   reaching for it, you want a Pullquote (different recipe entirely).
   ─────────────────────────────────────────────────────────────────────

   This section ships the Block recipe. Selectors hit:

     1. bare `blockquote`           — global default; matches WP core
                                      `wp:quote` and Custom HTML / Classic
                                      block content.
     2. `.entry-content blockquote` — defensive specificity lift so
                                      plugin-injected `.something
                                      blockquote` rules don't override us.
     3. `body .elementor-blockquote`— Elementor blockquote widget
                                      (pillar pages); recipe mirrored
                                      onto its __content / __author /
                                      e-q-footer sub-classes.

   Markup patterns supported:

     <blockquote>
       <p>Quote text…</p>
       <cite>AUTHOR NAME · <i>Work title</i></cite>
     </blockquote>

   The `<cite>` element renders SANS 13 muted (v2.1); inline `<i>`/`<em>`
   inside `<cite>` resolves to serif italic mute for "AUTHOR, *Work title*"
   attribution shape. The Style Guide v2.0 preview pattern (separate `.attr`
   div outside the blockquote) is also supported via `.lh-block-attr` —
   that's a separate ornamentation track left at v2.0 mono-uppercase
   styling for now (no live consumers in the body content). */
blockquote {
	margin: 12px 0 14px;
	padding: 0 0 0 20px;
	border-left: 1px solid var(--ll-rule);
	font-family: var(--ll-serif);
	font-size: 18px;
	line-height: 1.55;
	font-style: italic;
	color: var(--ll-ink);
}

blockquote p {
	margin: 0 0 14px;
}

blockquote p:last-child {
	margin-bottom: 0;
}

blockquote cite {
	display: block;
	margin-top: 14px;
	padding-left: 0;
	font-family: var(--ll-sans);
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ll-mute);
	font-style: normal;
}

/* "AUTHOR, *Work*" — italic inside cite resolves to serif italic mute
   so authors can mix SANS-cased name + serif italic work title in one
   cite element without typing wrapper spans. */
blockquote cite i,
blockquote cite em {
	font-family: var(--ll-serif);
	font-style: italic;
	font-weight: inherit;
	font-size: 13px;
	line-height: inherit;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ll-mute);
}

/* Higher-specificity copy of the rules so anything Elementor / Spectra /
   etc. emits with `body .entry-content blockquote { ... }` doesn't
   override us. Same recipe, same values — duplication is deliberate. */
.entry-content blockquote {
	margin: 12px 0 14px;
	padding: 0 0 0 20px;
	border-left: 1px solid var(--ll-rule);
	font-family: var(--ll-serif);
	font-size: 18px;
	line-height: 1.55;
	font-style: italic;
	color: var(--ll-ink);
}

/* Optional v2.0 Style Guide externalized-attribution pattern: when an
   author wants the cite to live OUTSIDE the blockquote (matching the
   exact preview markup at brand/style-guide-v2/project/preview/quote-block.html),
   wrap it in `<div class="lh-block-attr">— <span class="lh-block-attr__name">NAME</span> · <cite>Work</cite></div>`. */
.lh-block-attr {
	margin: -10px 0 14px;
	padding-left: 24px;
	font-family: var(--ll-mono);
	font-size: 11px;
	line-height: 1.45;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ll-mute);
}

.lh-block-attr__name {
	color: var(--ll-ink);
}

.lh-block-attr cite {
	display: inline;
	margin: 0;
	padding: 0;
	font-family: var(--ll-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 13px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ll-mute);
}

.lh-block-attr cite::before {
	content: none;
}

/* Elementor blockquote widget — same Block recipe, applied to
   Elementor's <blockquote class="elementor-blockquote"> markup with
   its __content / __author / e-q-footer sub-classes. The bare
   blockquote rules above SHOULD apply (it IS a blockquote element)
   but Elementor's per-widget styling overrides at higher specificity
   on Elementor-built pages (pillar pages especially). `body` prefix
   lifts to 0,1,1+ to beat Elementor's class-only rules.

   v0.8.10 (Phase H — post-cutover brand-styling drift fix) introduced
   this lift. v0.9.0 (Phase I Movement 1) rewrote the recipe to v2.0
   Block. v0.9.2 (this section) reconciles to v2.1 along with the bare
   blockquote rules above: 1px rule left rule, SANS 13 mute author, no
   auto em-dash. */
body .elementor-blockquote {
	margin: 12px 0 14px;
	padding: 0 0 0 20px;
	border-left: 1px solid var(--ll-rule);
	font-family: var(--ll-serif);
	font-size: 18px;
	line-height: 1.55;
	font-style: italic;
	color: var(--ll-ink);
}

body .elementor-blockquote .elementor-blockquote__content {
	margin: 0 0 14px;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	font-style: inherit;
	color: inherit;
}

body .elementor-blockquote .e-q-footer {
	margin-top: 14px;
	padding-left: 0;
}

body .elementor-blockquote .elementor-blockquote__author {
	display: block;
	font-family: var(--ll-sans);
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ll-mute);
	font-style: normal;
}


/* ============================================================
   15. COMPONENTS — pullquote   [v2.1 Quotations · "Pull quote" pattern]
   ============================================================
   v0.9.1 reconciliation (May 6, 2026 evening). Two-step correction:

     · Movement 1 v0.9.0 used Open Sans 700/30 + ink rules above-and-below
       (which is actually the v2.1 *Callout* pattern, not Pull quote).
     · An interim v0.9.1 commit used judgement values (italic 24/3px/28px)
       — directionally right but not canonical.
     · This is the canonical v2.1 recipe transcribed verbatim from
       lighthouse-leadership-design-system/project/uploads/design-system.jsx
       lines 633-637 (the single source of truth per the bundle README).

   Note on stale source files in the bundle:
   The standalone preview/quote-pull.html still has the OLD sans-serif
   recipe — design-system.jsx is newer and supersedes it. The bundle's
   top-level README explicitly says design-system.jsx is "the single
   source of truth," so we reconcile against that.

   Canonical Pull quote v2.1:
     font-family: serif (Crimson Text)
     font-style: italic
     font-size: 28px
     line-height: 1.3
     color: var(--ll-ink)
     border-left: 2px solid var(--ll-ink)
     padding-left: 24px

   Cite (MONO 11 muted uppercase, 0.4px tracking):
     "From "The conditions, not the people"" style — a source-attribution
     small-caps line below the quote.

   Three selectors hit:
     1. `.lh-pullquote`         — canonical class for new theme-authored
                                  pullquotes
     2. `.wp-block-pullquote`   — Gutenberg core block (Movement 2's
                                  migration target)
     3. `.figure-quote`         — legacy custom HTML; picks up the new
                                  treatment without any post-content edit

   The IntersectionObserver scroll-fade (§06 Motion / v1.2) is retained
   — sanctioned brand moment, the gentle reveal complements the
   scanner-stop intent. */
.lh-pullquote,
.wp-block-pullquote,
.figure-quote,
.entry-content .lh-pullquote,
.entry-content .wp-block-pullquote,
.entry-content .figure-quote {
	margin: 40px 0;
	padding: 0 0 0 24px;
	background: transparent;
	border-top: 0;
	border-bottom: 0;
	border-left: 2px solid var(--ll-ink);
	border-right: 0;
	border-radius: 0;
	color: var(--ll-ink);
	font-family: var(--ll-serif);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.3;
	letter-spacing: 0;
	font-style: italic;
	text-align: left;
	max-width: none;
}

/* Strip native pullquote quote-mark glyphs (some UAs / themes inject
   curly marks via ::before / ::after on .wp-block-pullquote). v2.0
   bans visible quote marks on this pattern. */
.lh-pullquote::before,
.lh-pullquote::after,
.wp-block-pullquote::before,
.wp-block-pullquote::after,
.figure-quote::before,
.figure-quote::after,
.wp-block-pullquote blockquote::before,
.wp-block-pullquote blockquote::after {
	content: none;
}

/* Pullquote inner paragraph: kill its bottom margin so the figure
   padding owns vertical spacing. Inherit type; some Gutenberg pullquote
   markup wraps in `<blockquote>` then `<p>`, so we hit both. */
.lh-pullquote p,
.wp-block-pullquote p,
.wp-block-pullquote blockquote,
.wp-block-pullquote blockquote p,
.figure-quote p,
.entry-content .lh-pullquote p,
.entry-content .wp-block-pullquote p,
.entry-content .wp-block-pullquote blockquote,
.entry-content .wp-block-pullquote blockquote p,
.entry-content .figure-quote p {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-weight: inherit;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
	font-style: inherit;
	text-align: inherit;
}

/* Cite / figcaption — canonical v2.1 from design-system.jsx line 638:
   MONO 11 muted, 0.4px letter-spacing (~0.036em), uppercase. The cite
   sits below the quote body, aligned past the left rule (no extra
   padding-left needed since it's outside the .pull element).
   No em-dash ::before prefix — the migration script preserves any
   author-typed em-dash inside cite content; CSS prefix would double up. */
.lh-pullquote cite,
.wp-block-pullquote cite,
.figure-quote cite,
.lh-pullquote figcaption,
.wp-block-pullquote__citation,
.figure-quote figcaption,
.entry-content .lh-pullquote cite,
.entry-content .wp-block-pullquote cite,
.entry-content .figure-quote cite,
.entry-content .lh-pullquote figcaption,
.entry-content .figure-quote figcaption {
	display: block;
	margin-top: 16px;
	font-family: var(--ll-mono);
	font-weight: 400;
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--ll-mute);
	font-style: normal;
	text-align: left;
}

/* (v0.9.2: dropped the .lh-pullquote / .wp-block-pullquote / .figure-quote
   `cite::before { content: none }` suppression block — §14's auto em-dash
   ::before was removed in the v2.1 reconciliation, so there's nothing left
   to suppress here.) */

/* Scroll-triggered fade per design-system.jsx §06 Motion (v1.2 origin,
   retained at v2.0 — the v2.0 Quotations chapter explicitly sanctions
   this micro-moment for pullquotes; PLAN.md Movement 1 step 4 calls it
   out as "Keep the IntersectionObserver scroll-fade").

   Motion is opt-in to JS users only — header.php sets <html class="lh-js">
   inline in <head> before paint, so non-JS users see pullquotes at
   their final state with no flash of invisible content. With JS active,
   pullquotes start at opacity 0 and fade to 1 when pullquote.js
   (assets/js/pullquote.js) adds the .lh-pullquote--in-view class, driven
   by IntersectionObserver at 10% viewport threshold.

   The reduced-motion rule in §19 already collapses transition-duration
   to 0.01ms, so reduced-motion users get the same end-state with no
   visible fade. The JS also short-circuits the observer when it detects
   prefers-reduced-motion, so the reveal happens at DOMContentLoaded
   instead of on scroll for that audience. */
.lh-js .lh-pullquote,
.lh-js .lh-essay-pullquote,
.lh-js .wp-block-pullquote,
.lh-js .figure-quote,
.lh-js .entry-content .lh-pullquote,
.lh-js .entry-content .lh-essay-pullquote,
.lh-js .entry-content .wp-block-pullquote,
.lh-js .entry-content .figure-quote {
	opacity: 0;
	transition: opacity 320ms ease-out;
}

.lh-js .lh-pullquote.lh-pullquote--in-view,
.lh-js .lh-essay-pullquote.lh-pullquote--in-view,
.lh-js .wp-block-pullquote.lh-pullquote--in-view,
.lh-js .figure-quote.lh-pullquote--in-view,
.lh-js .entry-content .lh-pullquote.lh-pullquote--in-view,
.lh-js .entry-content .lh-essay-pullquote.lh-pullquote--in-view,
.lh-js .entry-content .wp-block-pullquote.lh-pullquote--in-view,
.lh-js .entry-content .figure-quote.lh-pullquote--in-view {
	opacity: 1;
}


/* ============================================================
   15a. COMPONENTS — aside   [v2.1 Quotations · "Aside" pattern]
   ============================================================
   Phase I Movement 1 (v0.9.0) — net-new in v2.0 as the fourth Quotations
   pattern. Reverted in v0.9.5 (May 7) per handoff/reconciliation-v0.9.3.md
   to the Style Guide v2.1 simple eyebrow + body recipe. The dictionary-
   entry expansion shipped in v0.9.0 / refined in v0.9.1 (`__term` /
   `__ipa` / `__pos` / `__def` helpers) is RETIRED — that use case is now
   solved correctly by the long-form essay primitives `.lh-essay-definition`
   (catalog-card foundational definition, §15r) and `.lh-mdef` (inline +
   margin glossary card, §15s). See the reconciliation doc for rationale:
   stuffing dictionary semantics into the generic Aside muddied both jobs.

   Recipe (canonical v2.1):
     Box:      1px solid var(--ll-rule), white bg, 22px 26px padding
     Eyebrow:  Prata 11 / 0.22em uppercase / muted (e.g. "ASIDE")
     Body:     SERIF 16 / 1.55 ink (a `<p>` inside)

   Inserted as §15a (no §16+ renumber) since §16 Sticky bar is itself
   slated to leave the theme in Phase K (consolidation into
   lighthouse-popup). When §16 goes away, §15a may be promoted to §16.

   Markup pattern:

     <aside class="lh-aside">
       <div class="lh-aside__eyebrow">ASIDE</div>
       <p>Body text…</p>
     </aside>

   Block-editor entry point: register `.is-style-lh-aside` as a Block
   Style on `core/group` in functions.php (deferred — file-touch-only
   in this version; can be added when authoring need surfaces). The
   bare `<aside>` element works in `.entry-content` without any class. */
.lh-aside,
.is-style-lh-aside,
.entry-content > aside,
.entry-content .lh-aside,
.entry-content .is-style-lh-aside {
	margin: 32px 0;
	padding: 22px 26px;
	/* Palette swap (2026-05-21): cream surface on the white page (was paper). */
	background: var(--ll-cream);
	border: 1px solid var(--ll-rule);
	border-radius: 0;
	color: var(--ll-ink);
}

/* Inner paragraphs inherit the aside type recipe (serif 16/1.55).
   First paragraph has no top margin so it sits flush against the
   eyebrow (or aside top, if no eyebrow). */
.lh-aside p,
.is-style-lh-aside p,
.entry-content > aside p,
.entry-content .lh-aside p,
.entry-content .is-style-lh-aside p {
	margin: 10px 0 0;
	font-family: var(--ll-serif);
	font-size: 16px;
	line-height: 1.55;
	color: var(--ll-ink);
}

.lh-aside p:first-child,
.is-style-lh-aside p:first-child,
.entry-content > aside p:first-child,
.entry-content .lh-aside p:first-child,
.entry-content .is-style-lh-aside p:first-child {
	margin-top: 0;
}

/* Eyebrow label — Prata uppercase wide-tracking, sits above the body.
   v0.9.1: margin-bottom 10px → 14px to match canonical v2.1. */
.lh-aside__eyebrow,
.is-style-lh-aside .lh-aside__eyebrow,
.entry-content .lh-aside__eyebrow {
	display: block;
	margin: 0 0 14px;
	font-family: var(--ll-eye);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ll-mute);
}

/* (v0.9.5: dropped the .lh-aside__term / __ipa / __pos / __def
   dictionary-entry helpers per handoff/reconciliation-v0.9.3.md.
   Dictionary use cases now use .lh-essay-definition (§15r) for
   foundational top-of-essay definitions and .lh-mdef (§15s) for
   inline mid-essay terms with a margin glossary card.) */


/* ============================================================
   15b. COMPONENTS — highlight   [v2.1 Quotations · "Highlight" pattern · NET-NEW]
   ============================================================
   Phase I §14 v2.1 reconciliation cycle (v0.9.2). Net-new pattern,
   not present in v2.0. Source: lighthouse-leadership-design-system/
   project/uploads/design-system.jsx lines 647-655 (the "Highlight" Card
   in §08 Quotations).

   The Highlight is a reader-testimonial / external-quote treatment —
   "I forwarded this to my whole leadership team. Finally someone
   naming what we've been feeling." style. Visually distinct from
   Block (which is in-essay quoting of an external source) and from
   Pull quote (a visual scanner-stop). The cream-bg card signals
   "this is feedback FROM someone, not source material I'm citing AT
   you."

   Recipe (canonical v2.1):
     Box:    1px solid var(--ll-rule), cream bg, 32px padding
     Body:   SERIF 18 / 1.5 ink (a `<p>` inside)
     Attr:   SANS 13 muted, 14px above (a `<cite>` inside; renders
             below the body)

   Markup pattern:

     <aside class="lh-highlight">
       <p>"Quote body text..."</p>
       <cite>Director of Engineering, public company</cite>
     </aside>

   Block-editor entry point: register `.is-style-lh-highlight` as a
   Block Style on `core/group` in functions.php (deferred — file-touch
   only in this version, parallels §15a's deferral). */
.lh-highlight,
.is-style-lh-highlight,
.entry-content .lh-highlight,
.entry-content .is-style-lh-highlight {
	margin: 32px 0;
	padding: 32px;
	background: var(--ll-cream);
	border: 1px solid var(--ll-rule);
	border-radius: 0;
	color: var(--ll-ink);
}

.lh-highlight p,
.is-style-lh-highlight p,
.entry-content .lh-highlight p,
.entry-content .is-style-lh-highlight p {
	margin: 0;
	font-family: var(--ll-serif);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.5;
	color: var(--ll-ink);
	font-style: normal;
}

.lh-highlight p + p,
.is-style-lh-highlight p + p,
.entry-content .lh-highlight p + p,
.entry-content .is-style-lh-highlight p + p {
	margin-top: 12px;
}

.lh-highlight cite,
.is-style-lh-highlight cite,
.entry-content .lh-highlight cite,
.entry-content .is-style-lh-highlight cite {
	display: block;
	margin-top: 14px;
	font-family: var(--ll-sans);
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ll-mute);
	font-style: normal;
}


/* ============================================================
   15c. COMPONENTS — callout   [v2.1 Quotations · "Callout" pattern · NET-NEW]
   ============================================================
   Phase I §14 v2.1 reconciliation cycle (v0.9.2). Net-new pattern,
   not present in v2.0. Source: lighthouse-leadership-design-system/
   project/uploads/design-system.jsx lines 658-668 (the "Callout" Card
   in §08 Quotations).

   The Callout is the author's-own-emphasis treatment — a single
   imperative or thesis line you want to mark as "this matters more
   than the surrounding paragraph." Per the canonical descriptor copy:
   "used sparingly, once or twice per essay maximum." Distinct from
   Pullquote (which RE-PRESENTS a line that's already in the prose);
   the Callout asserts NEW emphasis.

   Recipe (canonical v2.1):
     Box:    paper bg, 1px var(--ll-rule) all-sides border, 3px solid
             var(--ll-ink) top accent, 32px padding
     Body:   SANS 600 / 18 / 1.4 / -0.1px ink (a `<p>` inside)
     Sub:    SERIF 15 muted / 1.55 (an optional descriptor — `<p>`
             after the body, or `<small>` inline-blocked, 8px above)

   Note on the box border: the canonical demo composes a 1px rule
   border (Card default) plus a 3px ink top border on the inner div.
   We collapse that to a single element with mixed border widths —
   visually identical, fewer DOM nodes for authors.

   Markup pattern:

     <aside class="lh-callout">
       <p>Diagnose the conditions before you coach the people.</p>
       <p><small>The author's own emphasis — used sparingly, once or
       twice per essay maximum.</small></p>
     </aside>

   Decision-CSV note: the editorial pass on `quotes.csv` flagged 2
   Blockquote-decision rows as `Callout` — those are candidates for
   migration into this pattern when Movement 2's apply path grows
   Callout support (deferred; current cleanup-block-cites mode only
   handles Block-shaped quotes). */
.lh-callout,
.is-style-lh-callout,
.entry-content .lh-callout,
.entry-content .is-style-lh-callout {
	margin: 32px 0;
	padding: 32px;
	/* Palette swap (2026-05-21): cream surface on the white page (was paper). */
	background: var(--ll-cream);
	border: 1px solid var(--ll-rule);
	border-top: 3px solid var(--ll-ink);
	border-radius: 0;
	color: var(--ll-ink);
}

.lh-callout p,
.is-style-lh-callout p,
.entry-content .lh-callout p,
.entry-content .is-style-lh-callout p {
	margin: 0;
	font-family: var(--ll-sans);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.4;
	letter-spacing: -0.1px;
	color: var(--ll-ink);
	font-style: normal;
}

/* Descriptor — second paragraph after the body, or `<small>` element.
   Renders SERIF 15 muted (per canonical). 8px above. */
.lh-callout p + p,
.lh-callout small,
.is-style-lh-callout p + p,
.is-style-lh-callout small,
.entry-content .lh-callout p + p,
.entry-content .lh-callout small,
.entry-content .is-style-lh-callout p + p,
.entry-content .is-style-lh-callout small {
	margin-top: 8px;
	font-family: var(--ll-serif);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.55;
	letter-spacing: 0;
	color: var(--ll-mute);
}


/* ============================================================
   15d. COMPONENTS — pullquote (essay)   [Long-form · NET-NEW v0.9.6]
   ============================================================
   Phase M long-form essay primitive. Per handoff/reconciliation-v0.9.3.md
   this namespaces under `essay-` so the brand-default `.lh-pullquote`
   (italic Crimson 28, §15) keeps its v2.1 reconciliation valid for
   short-post inline pullquotes. Use `.lh-essay-pullquote` for the
   chapter-opening "this earns its volume" treatment in long essays.

   Source: handoff/.../src/primitives.jsx → Pullquote component (in
   /tmp/reconciliation-bundle/.../src/primitives.jsx).

   Recipe:
     Box:    margin 48px 0; top + bottom 1px ink rules; 32px vertical padding
     Body:   SANS 30 / 600 / 1.18 / -0.4 ink; no quote marks
     Cite:   MONO 11 mute / 0.06em; em-dash prefix typed by author

   Markup pattern (paste into `wp:html` block via Code Editor):

     <figure class="lh-essay-pullquote">
       <blockquote>The line that earns its volume.</blockquote>
       <figcaption>— Author, Source</figcaption>
     </figure> */
.lh-essay-pullquote,
.entry-content .lh-essay-pullquote {
	margin: 48px 0;
	padding: 32px 0;
	border-top: 1px solid var(--ll-ink);
	border-bottom: 1px solid var(--ll-ink);
}

.lh-essay-pullquote blockquote,
.entry-content .lh-essay-pullquote blockquote {
	margin: 0;
	font-family: var(--ll-sans);
	font-weight: 600;
	font-size: 30px;
	line-height: 1.18;
	letter-spacing: -0.4px;
	color: var(--ll-ink);
	text-wrap: pretty;
}

.lh-essay-pullquote figcaption,
.entry-content .lh-essay-pullquote figcaption {
	margin-top: 18px;
	font-family: var(--ll-mono);
	font-size: 11px;
	color: var(--ll-mute);
	letter-spacing: 0.06em;
}


/* ============================================================
   15e. COMPONENTS — refrain (essay)   [Long-form · NET-NEW v0.9.6]
   ============================================================
   The "this line returns" treatment for a recurring quote in a long
   essay. Marks "RETURN 1 / 3", "RETURN 2 / 3", etc. so the reader
   feels the reprise. Two variants:
     · default (risk)   — ink left rule, cream bg, "THE RECURRING RISK"
     · --vision         — orange-dark left rule, light-yellow bg,
                          "THE INFINITE GOAL" (reserved for the founding
                          aspirational line of an essay)

   Source: primitives.jsx → Refrain component.

   Markup pattern:

     <figure class="lh-essay-refrain">
       <header class="lh-essay-refrain__meta">
         <span class="lh-essay-refrain__label">THE RECURRING RISK</span>
         <span class="lh-essay-refrain__rule"></span>
         <span class="lh-essay-refrain__count">RETURN 1 / 3</span>
       </header>
       <blockquote>"The line that returns…"</blockquote>
       <figcaption>— Author, Source</figcaption>
     </figure>

   Vision variant:

     <figure class="lh-essay-refrain lh-essay-refrain--vision">
       … (same children) …
     </figure> */
.lh-essay-refrain,
.entry-content .lh-essay-refrain {
	position: relative;
	margin: 56px 0;
	padding: 36px 36px 32px;
	background: var(--ll-cream);
	border-left: 3px solid var(--ll-ink);
}

.lh-essay-refrain--vision,
.entry-content .lh-essay-refrain--vision {
	background: var(--ll-vision, #FFF8E5);   /* vision surface — token reconciled v0.20.14 (DESIGN.md `vision`) */
	border-left-color: var(--ll-orange-dark);
}

.lh-essay-refrain__meta,
.entry-content .lh-essay-refrain__meta {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 18px;
	font-family: var(--ll-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	color: var(--ll-mute);
}

.lh-essay-refrain__label {
	color: var(--ll-ink);
	font-weight: 600;
}

.lh-essay-refrain--vision .lh-essay-refrain__label {
	color: var(--ll-orange-dark);
}

.lh-essay-refrain__rule {
	flex: 1;
	height: 1px;
	background: var(--ll-rule);
}

.lh-essay-refrain blockquote,
.entry-content .lh-essay-refrain blockquote {
	margin: 0;
	font-family: var(--ll-sans);
	font-weight: 700;
	font-size: 26px;
	line-height: 1.22;
	letter-spacing: -0.3px;
	color: var(--ll-ink);
	text-wrap: pretty;
}

.lh-essay-refrain figcaption,
.entry-content .lh-essay-refrain figcaption {
	margin-top: 20px;
	font-family: var(--ll-mono);
	font-size: 10.5px;
	color: var(--ll-mute);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}


/* ============================================================
   15f. COMPONENTS — blockquote (essay)   [Long-form · NET-NEW v0.9.6]
   ============================================================
   Long-form essay BlockQuote. Per reconciliation v0.9.3, namespaces
   under essay- so the brand-default §14 `blockquote` (italic Crimson
   18 / 1px rule / SANS 13 mute cite, v0.9.2 reconciliation) stays
   valid. Use `.lh-essay-blockquote` for sourced excerpts in long
   essays where the heavier 2px ink left rule + MONO uppercase cite
   earns its weight.

   Source: primitives.jsx → BlockQuote component.

   Recipe:
     Box:    margin 32px 0; padding-left 24px; border-left 2px ink
     Body:   SERIF italic 19/1.55 ink (curly quotes typed by author)
     Cite:   MONO 10.5 mute / 0.12em uppercase; em-dash prefix typed

   Markup pattern:

     <figure class="lh-essay-blockquote">
       <blockquote>"Long sourced excerpt with curly quotes."</blockquote>
       <figcaption>— Author, Source</figcaption>
     </figure> */
.lh-essay-blockquote,
.entry-content .lh-essay-blockquote {
	margin: 32px 0;
	padding-left: 24px;
	border-left: 2px solid var(--ll-ink);
}

.lh-essay-blockquote blockquote,
.entry-content .lh-essay-blockquote blockquote {
	margin: 0;
	font-family: var(--ll-serif);
	font-style: italic;
	font-size: 19px;
	line-height: 1.55;
	color: var(--ll-ink);
	text-wrap: pretty;
}

.lh-essay-blockquote figcaption,
.entry-content .lh-essay-blockquote figcaption {
	margin-top: 14px;
	font-family: var(--ll-mono);
	font-size: 10.5px;
	color: var(--ll-mute);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}


/* ============================================================
   15g. COMPONENTS — inline quote (essay)   [Long-form · NET-NEW v0.9.6]
   ============================================================
   Short attributed quote that should stay close to the prose around
   it. No frame; quote in serif italic, attribution underneath in MONO.

   Source: primitives.jsx → InlineQuote component.

   Recipe:
     Box:    margin 24px 0; padding 0
     Body:   SERIF italic 22/1.4 ink (curly quotes typed by author)
     Cite:   MONO 10.5 mute / 0.12em uppercase; em-dash prefix typed

   Markup pattern:

     <figure class="lh-essay-inline-quote">
       <blockquote>"Short attributed line."</blockquote>
       <figcaption>— Author</figcaption>
     </figure> */
.lh-essay-inline-quote,
.entry-content .lh-essay-inline-quote {
	margin: 24px 0;
	padding: 0;
}

.lh-essay-inline-quote blockquote,
.entry-content .lh-essay-inline-quote blockquote {
	margin: 0;
	font-family: var(--ll-serif);
	font-style: italic;
	font-size: 22px;
	line-height: 1.4;
	color: var(--ll-ink);
	text-wrap: pretty;
}

.lh-essay-inline-quote figcaption,
.entry-content .lh-essay-inline-quote figcaption {
	margin-top: 10px;
	font-family: var(--ll-mono);
	font-size: 10.5px;
	color: var(--ll-mute);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}


/* ============================================================
   15h. COMPONENTS — aside-section (essay)   [Long-form · NET-NEW v0.9.6]
   ============================================================
   Full-width sidebar for a sub-section diversion (e.g. the SSDP
   technical detour on the Sonos pillar essay). Keeps the main spine
   of the argument by visually demarcating the diversion as "off-spine"
   content.

   Source: primitives.jsx → AsideSection component.

   Recipe:
     Box:      margin 64px 0; padding 40px 36px; cream bg; 1px rule border
     Eyebrow:  Prata 11 / 0.22em uppercase mute
     Title:    SANS 700 26 / 1.2 / -0.3 ink
     Body:     standard prose flows; inner <p> get SERIF 17.5 / 1.55 ink

   Markup pattern:

     <section class="lh-essay-aside-section">
       <div class="lh-essay-aside-section__eyebrow">A SHORT DETOUR</div>
       <h3 class="lh-essay-aside-section__title">Section title</h3>
       <p>Body paragraph(s) in serif…</p>
       <figure class="lh-essay-inline-quote">…</figure>
     </section> */
.lh-essay-aside-section,
.entry-content .lh-essay-aside-section {
	margin: 64px 0;
	padding: 40px 36px;
	background: var(--ll-cream);
	border: 1px solid var(--ll-rule);
}

.lh-essay-aside-section__eyebrow,
.entry-content .lh-essay-aside-section__eyebrow {
	display: block;
	margin-bottom: 12px;
	font-family: var(--ll-eye);
	font-size: 11px;
	color: var(--ll-mute);
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.lh-essay-aside-section__title,
.entry-content .lh-essay-aside-section__title {
	margin: 0 0 24px;
	font-family: var(--ll-sans);
	font-weight: 700;
	font-size: 26px;
	line-height: 1.2;
	letter-spacing: -0.3px;
	color: var(--ll-ink);
}

.lh-essay-aside-section p,
.entry-content .lh-essay-aside-section p {
	margin: 0 0 16px;
	font-family: var(--ll-serif);
	font-size: 17.5px;
	line-height: 1.55;
	color: var(--ll-ink);
}

.lh-essay-aside-section p:last-child,
.entry-content .lh-essay-aside-section p:last-child {
	margin-bottom: 0;
}


/* ============================================================
   15i. COMPONENTS — exhibit (essay)   [Long-form · NET-NEW v0.9.6]
   ============================================================
   Full-width artifact: eyebrow label + framed image + MONO caption.
   The "evidentiary" treatment for screenshots, charts, filings.
   Two frame variants: default (cream bg) or --ink (dark bg).

   Source: primitives.jsx → Exhibit component.

   Recipe:
     Box:      margin 56px 0
     Header:   eyebrow label MONO 11 / 0.14em ink + horizontal ink rule
     Frame:    cream (default) or ink bg, 24px padding, 1px rule border
     Image:    100% width, block
     Caption:  MONO 11 / 1.55 mute / 0.02em; max-width 640

   Markup pattern (default cream frame):

     <figure class="lh-essay-exhibit">
       <header class="lh-essay-exhibit__header">
         <span class="lh-essay-exhibit__label">EXHIBIT A</span>
         <span class="lh-essay-exhibit__rule"></span>
       </header>
       <div class="lh-essay-exhibit__frame">
         <img src="…" alt="…">
       </div>
       <figcaption>Caption text in MONO.</figcaption>
     </figure>

   Ink-frame variant:

     <figure class="lh-essay-exhibit lh-essay-exhibit--ink">
       … (same children) …
     </figure> */
.lh-essay-exhibit,
.entry-content .lh-essay-exhibit {
	margin: 56px 0;
	padding: 0;
}

.lh-essay-exhibit__header,
.entry-content .lh-essay-exhibit__header {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 14px;
	font-family: var(--ll-mono);
	font-size: 11px;
	color: var(--ll-mute);
	letter-spacing: 0.14em;
}

.lh-essay-exhibit__label {
	color: var(--ll-ink);
	font-weight: 600;
}

.lh-essay-exhibit__rule {
	flex: 1;
	height: 1px;
	background: var(--ll-ink);
	opacity: 0.85;
}

.lh-essay-exhibit__frame,
.entry-content .lh-essay-exhibit__frame {
	background: var(--ll-cream);
	padding: 24px;
	border: 1px solid var(--ll-rule);
}

.lh-essay-exhibit--ink .lh-essay-exhibit__frame,
.entry-content .lh-essay-exhibit--ink .lh-essay-exhibit__frame {
	background: var(--ll-ink);
}

.lh-essay-exhibit img,
.entry-content .lh-essay-exhibit img {
	width: 100%;
	display: block;
}

.lh-essay-exhibit figcaption,
.entry-content .lh-essay-exhibit figcaption {
	margin-top: 12px;
	font-family: var(--ll-mono);
	font-size: 11px;
	line-height: 1.55;
	color: var(--ll-mute);
	letter-spacing: 0.02em;
	max-width: 640px;
}

/* Size modifiers (Phase P). Shrinks the whole exhibit — header rule,
   frame, and figcaption all scale together so the editorial unit stays
   coherent. Composes orthogonally with --ink. */
.lh-essay-exhibit--size-narrow,
.entry-content .lh-essay-exhibit--size-narrow {
	max-width: var(--ll-figure-w-narrow);
	margin-inline: auto;
}

.lh-essay-exhibit--size-medium,
.entry-content .lh-essay-exhibit--size-medium {
	max-width: var(--ll-figure-w-medium);
	margin-inline: auto;
}


/* ============================================================
   15j. COMPONENTS — inline figure (essay)   [Long-form · NET-NEW v0.9.6]
   ============================================================
   Body-width image: product shots, sketches, illustrative photos.
   Lighter framing than Exhibit (no eyebrow + ink rule; no frame).

   Source: primitives.jsx → InlineFigure component.

   Recipe:
     Image:           100% width, block
     Optional label:  MONO 11 / 600 ink / 0.14em (e.g. "FIG. 03")
     Optional caption: MONO 11 / 1.55 mute / 0.02em
     Optional source:  MONO 10.5 mute / 0.06em / opacity 0.8

   Markup pattern (all caption parts optional):

     <figure class="lh-essay-inline-figure">
       <img src="…" alt="…">
       <figcaption>
         <span class="lh-essay-inline-figure__label">FIG. 03</span>
         <span class="lh-essay-inline-figure__caption">Caption.</span>
         <span class="lh-essay-inline-figure__source">Source line.</span>
       </figcaption>
     </figure> */
.lh-essay-inline-figure,
.entry-content .lh-essay-inline-figure {
	margin: 40px 0;
	padding: 0;
}

.lh-essay-inline-figure img,
.entry-content .lh-essay-inline-figure img {
	width: 100%;
	display: block;
}

.lh-essay-inline-figure figcaption,
.entry-content .lh-essay-inline-figure figcaption {
	margin-top: 12px;
}

.lh-essay-inline-figure__label,
.entry-content .lh-essay-inline-figure__label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--ll-mono);
	font-size: 11px;
	font-weight: 600;
	color: var(--ll-ink);
	letter-spacing: 0.14em;
}

.lh-essay-inline-figure__caption,
.entry-content .lh-essay-inline-figure__caption {
	display: block;
	font-family: var(--ll-mono);
	font-size: 11px;
	line-height: 1.55;
	color: var(--ll-mute);
	letter-spacing: 0.02em;
	max-width: 640px;
}

.lh-essay-inline-figure__source,
.entry-content .lh-essay-inline-figure__source {
	display: block;
	margin-top: 4px;
	font-family: var(--ll-mono);
	font-size: 10.5px;
	color: var(--ll-mute);
	letter-spacing: 0.06em;
	opacity: 0.8;
}

/* Size modifiers (Phase P). The whole figure shrinks together so the
   img and figcaption stay visually unified. --size-body and --size-wide
   intentionally emit no CSS — body is the default 100% behavior, wide
   is a reserved slug awaiting a wider container. */
.lh-essay-inline-figure--size-narrow,
.entry-content .lh-essay-inline-figure--size-narrow {
	max-width: var(--ll-figure-w-narrow);
	margin-inline: auto;
}

.lh-essay-inline-figure--size-medium,
.entry-content .lh-essay-inline-figure--size-medium {
	max-width: var(--ll-figure-w-medium);
	margin-inline: auto;
}


/* ============================================================
   15k. COMPONENTS — marginalia (essay)   [Long-form · NET-NEW v0.9.6]
   ============================================================
   Vertical-format image (e.g. a phone screenshot) sitting in the
   right rail of the body column, with paired prose flowing on the
   left. CSS grid 1fr 280px on wide; collapses to single column on
   <=768px.

   Source: primitives.jsx → Marginalia component.

   Recipe:
     Layout:   margin 48px 0; CSS grid 1fr 280px; gap 40px; align start
     Label:    MONO 10.5 / 600 ink / 0.14em
     Image:    100% of right column; 1px rule border
     Caption:  MONO 10.5 / 1.5 mute / 0.02em
     Body:     paired prose on left — inner <p> gets SERIF 19 / 1.6 ink

   Markup pattern:

     <div class="lh-essay-marginalia">
       <div class="lh-essay-marginalia__body">
         <p>Paired paragraph(s) here.</p>
       </div>
       <aside class="lh-essay-marginalia__rail">
         <div class="lh-essay-marginalia__label">PHONE SCREEN</div>
         <img src="…" alt="…">
         <div class="lh-essay-marginalia__caption">Caption text.</div>
       </aside>
     </div> */
.lh-essay-marginalia,
.entry-content .lh-essay-marginalia {
	margin: 48px 0;
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: 40px;
	align-items: start;
}

@media (max-width: 768px) {
	.lh-essay-marginalia,
	.entry-content .lh-essay-marginalia {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

.lh-essay-marginalia__body p,
.entry-content .lh-essay-marginalia__body p {
	margin: 0 0 18px;
	font-family: var(--ll-serif);
	font-size: 19px;
	line-height: 1.6;
	color: var(--ll-ink);
}

.lh-essay-marginalia__body p:last-child {
	margin-bottom: 0;
}

.lh-essay-marginalia__rail,
.entry-content .lh-essay-marginalia__rail {
	position: relative;
}

.lh-essay-marginalia__label,
.entry-content .lh-essay-marginalia__label {
	display: block;
	margin-bottom: 10px;
	font-family: var(--ll-mono);
	font-size: 10.5px;
	font-weight: 600;
	color: var(--ll-ink);
	letter-spacing: 0.14em;
}

.lh-essay-marginalia__rail img,
.entry-content .lh-essay-marginalia__rail img {
	width: 100%;
	display: block;
	border: 1px solid var(--ll-rule);
}

.lh-essay-marginalia__caption,
.entry-content .lh-essay-marginalia__caption {
	margin-top: 10px;
	font-family: var(--ll-mono);
	font-size: 10.5px;
	line-height: 1.5;
	color: var(--ll-mute);
	letter-spacing: 0.02em;
}

/* --rail-left: flip the grid so the 280px rail sits on the left and
   the body fills the right. DOM order is unchanged (body first, rail
   second) so reading order, focus order, and the mobile single-column
   fallback all keep the body first by default. `order` re-paints the
   two columns on desktop only. */
.lh-essay-marginalia--rail-left,
.entry-content .lh-essay-marginalia--rail-left {
	grid-template-columns: 280px 1fr;
}

.lh-essay-marginalia--rail-left .lh-essay-marginalia__rail {
	order: 1;
}

.lh-essay-marginalia--rail-left .lh-essay-marginalia__body {
	order: 2;
}

@media (max-width: 768px) {
	/* Mobile collapses to a single column with body first regardless
	   of railSide — the order swap is a desktop-only layout flourish. */
	.lh-essay-marginalia--rail-left .lh-essay-marginalia__rail,
	.lh-essay-marginalia--rail-left .lh-essay-marginalia__body {
		order: initial;
	}
}

/* Image background variants. When set, render.php wraps the rail
   <img> in a `__frame` div which gets a colored background panel +
   16px padding. The default 1px ink-rule border on the image is
   removed for variants — the colored panel IS the frame. Mirrors the
   Exhibit `__frame` pattern (§15i) at the narrower rail scale. */
.lh-essay-marginalia__frame,
.entry-content .lh-essay-marginalia__frame {
	padding: 16px;
}

.lh-essay-marginalia__frame img,
.entry-content .lh-essay-marginalia__frame img {
	border: 0;
}

.lh-essay-marginalia--cream .lh-essay-marginalia__frame,
.entry-content .lh-essay-marginalia--cream .lh-essay-marginalia__frame {
	background: var(--ll-cream);
}

.lh-essay-marginalia--ink .lh-essay-marginalia__frame,
.entry-content .lh-essay-marginalia--ink .lh-essay-marginalia__frame {
	background: var(--ll-ink);
}

.lh-essay-marginalia--vision .lh-essay-marginalia__frame,
.entry-content .lh-essay-marginalia--vision .lh-essay-marginalia__frame {
	background: var(--ll-vision, #FFF8E5);  /* Matches Refrain --vision (§15e); token reconciled v0.20.14. */
}


/* ============================================================
   15l. COMPONENTS — pair (essay)   [Long-form · NET-NEW v0.9.6]
   ============================================================
   Image + paired pull-quote, single composed exhibit. Used when an
   image is inseparably tied to a single quote that's its caption-
   elevated (e.g. founders' sketch + "they knew the odds" line).
   CSS grid 1.05fr 1fr on wide; single column on <=768px.

   Source: primitives.jsx → Pair component.

   Recipe:
     Layout:   margin 56px 0; CSS grid 1.05fr 1fr; gap 36px; align center
     Label:    MONO 11 / 600 ink / 0.14em
     Frame:    cream bg, 16px padding, 1px rule border
     Caption:  MONO 11 / 1.55 mute / 0.02em
     Quote:    SANS 600 26 / 1.25 / -0.2 ink, 1px ink left rule, 28px pad-left
     --small:  size drops to 22 (use when the quote is denser)

   Markup pattern:

     <figure class="lh-essay-pair">
       <div class="lh-essay-pair__media">
         <div class="lh-essay-pair__label">FOUNDERS' SKETCH, 2002</div>
         <div class="lh-essay-pair__frame">
           <img src="…" alt="…">
         </div>
         <figcaption>Caption.</figcaption>
       </div>
       <blockquote class="lh-essay-pair__quote">They knew the odds.</blockquote>
     </figure>

   Smaller-quote variant:

     <blockquote class="lh-essay-pair__quote lh-essay-pair__quote--small">…</blockquote> */
.lh-essay-pair,
.entry-content .lh-essay-pair {
	margin: 56px 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 36px;
	align-items: center;
}

@media (max-width: 768px) {
	.lh-essay-pair,
	.entry-content .lh-essay-pair {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

.lh-essay-pair__label,
.entry-content .lh-essay-pair__label {
	display: block;
	margin-bottom: 12px;
	font-family: var(--ll-mono);
	font-size: 11px;
	font-weight: 600;
	color: var(--ll-ink);
	letter-spacing: 0.14em;
}

.lh-essay-pair__frame,
.entry-content .lh-essay-pair__frame {
	background: var(--ll-cream);
	padding: 16px;
	border: 1px solid var(--ll-rule);
}

.lh-essay-pair__frame img,
.entry-content .lh-essay-pair__frame img {
	width: 100%;
	display: block;
}

.lh-essay-pair figcaption,
.entry-content .lh-essay-pair figcaption {
	margin-top: 10px;
	font-family: var(--ll-mono);
	font-size: 11px;
	line-height: 1.55;
	color: var(--ll-mute);
	letter-spacing: 0.02em;
}

.lh-essay-pair__quote,
.entry-content .lh-essay-pair__quote {
	margin: 0;
	padding-left: 28px;
	border-left: 1px solid var(--ll-ink);
	font-family: var(--ll-sans);
	font-weight: 600;
	font-size: 26px;
	line-height: 1.25;
	letter-spacing: -0.2px;
	color: var(--ll-ink);
}

.lh-essay-pair__quote--small,
.entry-content .lh-essay-pair__quote--small {
	font-size: 22px;
}

/* Size modifiers (Phase P). The whole pair grid scales as a unit so the
   image + quote relationship stays preserved. Only --size-medium is
   offered alongside the default body width — narrow (480px) would
   compress the 26px quote half below ~245px (the @media collapse only
   fires below 768px viewport, not below a 480px container), which reads
   as cramped. Wide is excluded for the same reason in the other
   direction (the grid balance is calibrated for body measure). */
.lh-essay-pair--size-medium,
.entry-content .lh-essay-pair--size-medium {
	max-width: var(--ll-figure-w-medium);
	margin-inline: auto;
}

/* --quote-left: flip the grid so the pull-quote sits on the left and
   the image fills the right. DOM order is unchanged (media first,
   quote second) so reading order, focus order, and the mobile
   single-column fallback all keep the image-side first by default.
   `order` re-paints the two columns on desktop only. Mirror of §15k's
   marginalia rail-side toggle (v0.9.31). */
.lh-essay-pair--quote-left,
.entry-content .lh-essay-pair--quote-left {
	grid-template-columns: 1fr 1.05fr;
}

.lh-essay-pair--quote-left .lh-essay-pair__quote {
	order: 1;
}

.lh-essay-pair--quote-left .lh-essay-pair__media {
	order: 2;
}

@media (max-width: 768px) {
	/* Mobile collapses to a single column with media first regardless
	   of quoteSide — the order swap is a desktop-only layout flourish. */
	.lh-essay-pair--quote-left .lh-essay-pair__quote,
	.lh-essay-pair--quote-left .lh-essay-pair__media {
		order: initial;
	}
}


/* ============================================================
   15m. COMPONENTS — podcast callout (essay)   [Long-form · NET-NEW v0.9.6]
   ============================================================
   Ink-bg horizontal aside promoting a podcast episode. Yellow icon
   box + eyebrow + title + body + "Listen →" link.

   Source: primitives.jsx → PodcastCallout component.

   Recipe:
     Box:      margin 40px 0; padding 24px 28px; ink bg; white text; flex row
     Icon box: 48×48 yellow 1.5px border; podcast SVG (yellow strokes)
     Eyebrow:  Prata 11 yellow / 0.22em uppercase
     Title:    SANS 700 18 white
     Body:     SERIF 15 / rgba(255,255,255,0.78)
     Link:     SANS 11 / 700 white / 0.13em uppercase, white border-bottom

   Markup pattern (SVG inline; copy from primitives.jsx for fidelity):

     <aside class="lh-essay-podcast-callout">
       <div class="lh-essay-podcast-callout__icon"><svg …></svg></div>
       <div class="lh-essay-podcast-callout__body">
         <div class="lh-essay-podcast-callout__eyebrow">The Lighthouse Leadership Podcast</div>
         <div class="lh-essay-podcast-callout__title">Episode title here</div>
         <p>One-line teaser.</p>
       </div>
       <a class="lh-essay-podcast-callout__link" href="…">Listen →</a>
     </aside> */
.lh-essay-podcast-callout,
.entry-content .lh-essay-podcast-callout {
	margin: 40px 0;
	padding: 24px 28px;
	background: var(--ll-ink);
	color: #fff;
	display: flex;
	align-items: center;
	gap: 24px;
}

.lh-essay-podcast-callout__icon,
.entry-content .lh-essay-podcast-callout__icon {
	width: 48px;
	height: 48px;
	border: 1.5px solid var(--ll-yellow);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.lh-essay-podcast-callout__icon svg,
.entry-content .lh-essay-podcast-callout__icon svg {
	width: 20px;
	height: 20px;
}

.lh-essay-podcast-callout__body,
.entry-content .lh-essay-podcast-callout__body {
	flex: 1;
}

.lh-essay-podcast-callout__eyebrow,
.entry-content .lh-essay-podcast-callout__eyebrow {
	margin-bottom: 4px;
	font-family: var(--ll-eye);
	font-size: 11px;
	color: var(--ll-yellow);
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.lh-essay-podcast-callout__title,
.entry-content .lh-essay-podcast-callout__title {
	margin-bottom: 4px;
	font-family: var(--ll-sans);
	font-weight: 700;
	font-size: 18px;
	color: #fff;
}

.lh-essay-podcast-callout p,
.entry-content .lh-essay-podcast-callout p {
	margin: 0;
	font-family: var(--ll-serif);
	font-size: 15px;
	color: rgba(255, 255, 255, 0.78);
}

.lh-essay-podcast-callout__link,
.entry-content .lh-essay-podcast-callout__link {
	flex-shrink: 0;
	font-family: var(--ll-sans);
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid #fff;
	padding-bottom: 2px;
}


/* ============================================================
   15n. COMPONENTS — mid-essay CTA (essay)   [Long-form · NET-NEW v0.9.6]
   ============================================================
   Mid-essay newsletter promo. Top + bottom 1px ink rules; eyebrow,
   bold sans headline, serif descriptor, orange button. Stacks on
   <=768px.

   Source: primitives.jsx → MidCta component.

   Recipe:
     Box:        margin 64px 0; padding 36px 0; top + bottom 1px ink rules
     Layout:     CSS grid 1fr auto, gap 32px, align center
     Eyebrow:    Prata 11 mute / 0.22em uppercase
     Title:      SANS 700 22 / 1.3 / -0.2 ink
     Descriptor: SERIF 17 / 1.5 ink-soft
     Button:     orange bg, white text, 14px 22px, SANS 12 / 700 / 0.13em up
     Proof:      SERIF 15 / 1.55 mute; grid-column 1 / -1 (v0.3.0+)

   Markup pattern (text fixed; author can override):

     <aside class="lh-essay-mid-cta">
       <div class="lh-essay-mid-cta__body">
         <div class="lh-essay-mid-cta__eyebrow">Mid-essay aside</div>
         <h3 class="lh-essay-mid-cta__title">One framework like this every Sunday.</h3>
         <p class="lh-essay-mid-cta__descriptor">…</p>
       </div>
       <a class="lh-essay-mid-cta__button" href="/">Get the framework →</a>
     </aside> */
.lh-essay-mid-cta,
.entry-content .lh-essay-mid-cta {
	/* New Yorker envelope (2026-05-21): narrower, no top/bottom rules,
	   an orange-dark vertical left bar, content + form stacked. Markup
	   is unchanged — only the styling. */
	margin: 56px 0;
	/* Shared aside rail (2026-05-21): inset so the orange bar sits on the
	   essay's blockquote rail — the quote's inner grey rule lands 26px in
	   (figure 2px border + 24px padding). All hanging-rule asides (blockquote,
	   mid-CTA, end-CTA) share one left edge. */
	margin-left: 26px;
	max-width: 540px;
	padding: 4px 0 4px 28px;
	border-left: 3px solid var(--ll-orange-dark);
	display: block;
}

@media (max-width: 768px) {
	.lh-essay-mid-cta,
	.entry-content .lh-essay-mid-cta {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

.lh-essay-mid-cta__eyebrow,
.entry-content .lh-essay-mid-cta__eyebrow {
	margin-bottom: 8px;
	font-family: var(--ll-eye);
	font-size: 11px;
	color: var(--ll-mute);
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.lh-essay-mid-cta__title,
.entry-content .lh-essay-mid-cta__title {
	margin: 0 0 6px;
	font-family: var(--ll-sans);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: -0.2px;
	color: var(--ll-ink);
}

.lh-essay-mid-cta__descriptor,
.entry-content .lh-essay-mid-cta__descriptor {
	margin: 0;
	font-family: var(--ll-serif);
	font-size: 17px;
	line-height: 1.5;
	color: var(--ll-ink-soft);
}

.lh-essay-mid-cta__button,
.entry-content .lh-essay-mid-cta__button {
	background: var(--ll-orange);
	color: #fff;
	border: none;
	padding: 14px 22px;
	font-family: var(--ll-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	border-radius: 0;
	white-space: nowrap;
	display: inline-block;
	transition:
		background-color 120ms ease-out,
		color 120ms ease-out;
}

/* Hover/focus state — brand v2.0 primary-CTA recipe (DESIGN.md
   "primaryButton" role): orange deepens to orange-h, text stays
   paper. `body` prefix lifts specificity (0,1,2) above Elementor's
   `.elementor-kit-258 a:hover` injection (0,1,1) — same cascade-
   defense pattern used by §9 .lh-button. Phase N v0.9.17: this
   recipe was missing in v0.9.16, leaving the cascade default to
   win and producing low-contrast hover. */
body .lh-essay-mid-cta__button:hover,
body .lh-essay-mid-cta__button:focus,
body .entry-content .lh-essay-mid-cta__button:hover,
body .entry-content .lh-essay-mid-cta__button:focus {
	background-color: var(--ll-orange-h);
	color: var(--ll-paper);
	text-decoration: none;
}

body .lh-essay-mid-cta__button:focus-visible,
body .entry-content .lh-essay-mid-cta__button:focus-visible {
	outline: 2px solid var(--ll-teal);
	outline-offset: 2px;
}

/* ------------------------------------------------------------
   15n. v0.2.0 — inline email signup form (replaces link button)
   ------------------------------------------------------------
   May 13, 2026 — the essay-mid-cta block now renders a real
   email-capture form instead of a link button. The legacy
   `__button` rules above are kept for back-compat with old
   pasted markup; the new __form / __input / __submit / __status
   rules style the new shape. Posts to /wp-json/ll-popup/v1/subscribe
   with variant=essay-mid (Kit tag 19564236).

   The form sits in the right column of the §15n CSS grid, same
   visual slot the legacy __button occupied. Email field + submit
   button on a flex row at desktop; stacked at mobile via the
   existing §15n @media (max-width: 768px) one-column rule. */
.lh-essay-mid-cta__form,
.entry-content .lh-essay-mid-cta__form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	max-width: 360px;
	margin-top: 18px;
}

@media (max-width: 768px) {
	.lh-essay-mid-cta__form,
	.entry-content .lh-essay-mid-cta__form {
		max-width: none;
	}
}

.lh-essay-mid-cta__input,
.entry-content .lh-essay-mid-cta__input {
	width: 100%;
	background: #fff;
	border: 1px solid var(--ll-rule);
	padding: 13px 14px;
	font-family: var(--ll-serif);
	font-size: 16px;
	color: var(--ll-ink);
	border-radius: 0;
}

.lh-essay-mid-cta__input:focus,
.entry-content .lh-essay-mid-cta__input:focus {
	outline: 2px solid var(--ll-teal);
	outline-offset: -2px;
}

.lh-essay-mid-cta__submit,
.entry-content .lh-essay-mid-cta__submit {
	/* Editorial submit — an inline italic-serif link, not a button
	   (2026-05-21). The <button type="submit"> markup is unchanged; only
	   its appearance. orange-dark, not the conversion orange. */
	background: none;
	color: var(--ll-orange-dark);
	border: 0;
	border-bottom: 1px solid var(--ll-orange-dark);
	padding: 0 0 1px;
	font-family: var(--ll-serif);
	font-style: italic;
	font-size: 20px;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	border-radius: 0;
	display: inline-block;
	transition: color 120ms ease-out, border-color 120ms ease-out;
}

body .lh-essay-mid-cta__submit:hover,
body .lh-essay-mid-cta__submit:focus,
body .entry-content .lh-essay-mid-cta__submit:hover,
body .entry-content .lh-essay-mid-cta__submit:focus {
	color: var(--ll-orange-h);
	border-bottom-color: var(--ll-orange-h);
	text-decoration: none;
}

body .lh-essay-mid-cta__submit:focus-visible,
body .entry-content .lh-essay-mid-cta__submit:focus-visible {
	outline: 2px solid var(--ll-teal);
	outline-offset: 2px;
}

.lh-essay-mid-cta__submit[disabled],
.entry-content .lh-essay-mid-cta__submit[disabled] {
	opacity: 0.7;
	cursor: progress;
}

/* Status line — JS writes "Sending…" / "Please enter a valid email." /
 * server errors here. role="status" + aria-live="polite" already set
 * in the markup. flex-basis 100% so it wraps to its own line under
 * the field+submit on the §15n flex row. Small mute serif so it
 * doesn't shout. */
.lh-essay-mid-cta__status,
.entry-content .lh-essay-mid-cta__status {
	flex: 0 0 100%;
	margin-top: 8px;
	font-family: var(--ll-serif);
	font-size: 14px;
	line-height: 1.4;
	color: var(--ll-mute);
	min-height: 1.4em;
}

.lh-essay-mid-cta__status:empty,
.entry-content .lh-essay-mid-cta__status:empty {
	display: none;
}

.lh-essay-mid-cta__status--error,
.entry-content .lh-essay-mid-cta__status--error {
	color: var(--ll-error, #C8342A);
}

.lh-essay-mid-cta__status--pending,
.entry-content .lh-essay-mid-cta__status--pending {
	color: var(--ll-ink-soft);
}

/* Proof line — v0.3.0 addition (May 14, 2026). Full-width row
 * spanning both grid columns below the body+form pair. Substantive
 * proof sentence (NOT mono caption microcopy) — Halbert-CTA audit,
 * P9 + P10. Serif sentence register on cream, muted ink color
 * (--ll-mute = #7A7A7A) — quieter than ink-soft, louder than the
 * trust microcopy register on the end-cta. The grid's row-gap
 * (32px desktop, 16px mobile) provides the spacing above; no
 * explicit margin needed. Authors can italicize publication
 * names inline; the default copy ships with <em>CONNECT</em>. */
.lh-essay-mid-cta__proof,
.entry-content .lh-essay-mid-cta__proof {
	margin-top: 16px;
	font-family: var(--ll-serif);
	font-size: 15px;
	line-height: 1.55;
	color: var(--ll-mute);
	text-wrap: pretty; /* Avoids the orphan "work." widow on the last line. Modern browsers; degrades gracefully. */
}

.lh-essay-mid-cta__proof em,
.entry-content .lh-essay-mid-cta__proof em {
	font-style: italic;
}


/* ============================================================
   15o. COMPONENTS — end-of-essay CTA (essay)   [Long-form · NET-NEW v0.9.6]
   ============================================================
   End-of-essay newsletter signup block. Ink bg; large white SANS
   headline, serif descriptor, embedded form (email + orange submit).

   Source: primitives.jsx → EndCta component.

   Recipe:
     Box:        margin 80px 0 0; padding 48px 40px; ink bg
     Eyebrow:    Prata 11 yellow / 0.22em uppercase
     Title:      SANS 700 32 / 1.15 / -0.3 white; max-width 620
     Descriptor: SERIF 18 / 1.55 / rgba(255,255,255,0.82); max-width 580
     Form:       flex row; max-width 560
     Input:      white bg, 14px 16px, SANS 15 ink, no border
     Button:     orange bg, white text, 14px 22px, SANS 12 / 700 / 0.13em up
     Proof line: SERIF 14 / 1.55 / rgba(255,255,255,0.65); max-width 620 (v0.2.0+)
     Trust line: MONO 11 / rgba(255,255,255,0.55) / 0.06em

   Markup pattern:

     <aside class="lh-essay-end-cta">
       <div class="lh-essay-end-cta__eyebrow">Lighthouse Leadership · Newsletter</div>
       <h3 class="lh-essay-end-cta__title">Lead through change without losing the room.</h3>
       <p class="lh-essay-end-cta__descriptor">…</p>
       <form class="lh-essay-end-cta__form" action="…" method="post">
         <input type="email" class="lh-essay-end-cta__input" placeholder="you@work.com" name="email">
         <button type="submit" class="lh-essay-end-cta__button">Get the framework →</button>
       </form>
       <div class="lh-essay-end-cta__trust">FREE · NO SPAM · UNSUBSCRIBE ANY TIME</div>
     </aside> */
.lh-essay-end-cta,
.entry-content .lh-essay-end-cta {
	/* Cream-and-ink restyle (2026-05-21): was a dark ink block; now a
	   cream surface with ink type and a gold (yellow) hairline border.
	   The gold border is a deliberate, documented exception to the
	   "yellow is masthead-only" rule. Markup is unchanged. */
	margin: 80px 0 0;
	/* Shared aside rail (2026-05-21): inset the box's left edge to the same
	   26px rail as the blockquote rule and the mid-CTA bar. */
	margin-left: 26px;
	padding: 48px 40px;
	background: var(--ll-cream);
	border: 1px solid var(--ll-yellow);
	color: var(--ll-ink);
}

.lh-essay-end-cta__eyebrow,
.entry-content .lh-essay-end-cta__eyebrow {
	margin-bottom: 14px;
	font-family: var(--ll-mono);
	font-size: 11px;
	color: var(--ll-mute);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.lh-essay-end-cta__title,
.entry-content .lh-essay-end-cta__title {
	margin: 0 0 12px;
	font-family: var(--ll-sans);
	font-weight: 700;
	font-size: 32px;
	line-height: 1.15;
	letter-spacing: -0.3px;
	color: var(--ll-ink);
	max-width: 620px;
}

.lh-essay-end-cta__descriptor,
.entry-content .lh-essay-end-cta__descriptor {
	margin: 0 0 28px;
	font-family: var(--ll-serif);
	font-size: 18px;
	line-height: 1.55;
	color: var(--ll-ink-soft);
	max-width: 580px;
}

.lh-essay-end-cta__form,
.entry-content .lh-essay-end-cta__form {
	display: flex;
	gap: 0;
	max-width: 560px;
	margin-bottom: 14px;
}

.lh-essay-end-cta__input,
.entry-content .lh-essay-end-cta__input {
	flex: 1;
	background: #fff;
	border: 1px solid var(--ll-rule);
	padding: 14px 16px;
	font-family: var(--ll-sans);
	font-size: 15px;
	color: var(--ll-ink);
	border-radius: 0;
}

.lh-essay-end-cta__button,
.entry-content .lh-essay-end-cta__button {
	background: var(--ll-orange-dark);
	color: #fff;
	border: none;
	padding: 14px 22px;
	font-family: var(--ll-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 0;
	transition:
		background-color 120ms ease-out,
		color 120ms ease-out;
}

/* Hover/focus state — brand v2.0 primary-CTA recipe (DESIGN.md
   "primaryButton" role): orange deepens to orange-h, text stays
   paper. Same cascade-defense and rationale as §15n above. */
body .lh-essay-end-cta__button:hover,
body .lh-essay-end-cta__button:focus,
body .entry-content .lh-essay-end-cta__button:hover,
body .entry-content .lh-essay-end-cta__button:focus {
	background-color: var(--ll-orange-h);
	color: var(--ll-paper);
	text-decoration: none;
}

body .lh-essay-end-cta__button:focus-visible,
body .entry-content .lh-essay-end-cta__button:focus-visible {
	outline: 2px solid var(--ll-teal);
	outline-offset: 2px;
}

/* Proof line — v0.3.0 addition (May 14, 2026). Sits between
 * __status and __trust in DOM order. Substantive proof sentence
 * (NOT mono caption microcopy) — Halbert-CTA audit, P9 + P10:
 * the proof carries the curiosity gap, the trust line stays
 * microcopy. Serif sentence register, opacity between status
 * (0.72) and trust (0.55). Constrained measure matches title
 * max-width so the line doesn't run wide across the 48px-padded
 * ink box. Authors can italicize publication names inline; the
 * default copy ships with <em>CONNECT</em>. */
.lh-essay-end-cta__proof,
.entry-content .lh-essay-end-cta__proof {
	margin: 18px 0 14px;
	max-width: 620px;
	font-family: var(--ll-serif);
	font-size: 14px;
	line-height: 1.55;
	color: var(--ll-mute);
	text-wrap: pretty; /* Balances the wrap so no last-line widow. */
}

.lh-essay-end-cta__proof em,
.entry-content .lh-essay-end-cta__proof em {
	font-style: italic;
}

.lh-essay-end-cta__trust,
.entry-content .lh-essay-end-cta__trust {
	font-family: var(--ll-mono);
	font-size: 11px;
	color: var(--ll-mute);
	letter-spacing: 0.06em;
}

/* Status line — JS writes "Sending…" / "Please enter a valid email." /
 * server errors here. role="status" + aria-live="polite" already set
 * in the markup. Sits between the form and the trust line. Tuned for
 * the ink background — bright enough to read, never red-on-red. */
.lh-essay-end-cta__status,
.entry-content .lh-essay-end-cta__status {
	margin: 8px 0 14px;
	font-family: var(--ll-serif);
	font-size: 14px;
	line-height: 1.4;
	color: var(--ll-ink-soft);
	min-height: 1.4em;
}

.lh-essay-end-cta__status:empty,
.entry-content .lh-essay-end-cta__status:empty {
	display: none;
}

.lh-essay-end-cta__status--error,
.entry-content .lh-essay-end-cta__status--error {
	/* Error red now reads on the cream surface (2026-05-21 restyle). */
	color: var(--ll-error);
}

.lh-essay-end-cta__status--pending,
.entry-content .lh-essay-end-cta__status--pending {
	color: var(--ll-mute);
}

.lh-essay-end-cta__button[disabled],
.entry-content .lh-essay-end-cta__button[disabled] {
	opacity: 0.7;
	cursor: progress;
}


/* ============================================================
   15p. COMPONENTS — article header (essay)   [Long-form · NET-NEW v0.9.6]
   ============================================================
   Type-only essay hero. No featured image. Eyebrow → big H1 →
   serif dek → MONO meta line.

   Source: primitives.jsx → ArticleHeader component.

   Recipe:
     Box:      padding 64px 0 36px; bottom 1px ink border; margin-bottom 48px
     Eyebrow:  Prata 12 orange-dark / 0.24em uppercase
     H1:       SANS 800 56 / 1.05 / -1.2 ink; balance text-wrap
     Dek:      SERIF 22 / 1.45 ink-soft; max-width 700; pretty text-wrap
     Meta:     MONO 11 mute / 0.08em; flex wrap
     Meta name highlights: 600 ink

   Markup pattern:

     <header class="lh-essay-article-header">
       <div class="lh-essay-article-header__eyebrow">PILLAR · STRATEGY</div>
       <h1 class="lh-essay-article-header__title">Headline.</h1>
       <p class="lh-essay-article-header__dek">Dek paragraph.</p>
       <div class="lh-essay-article-header__meta">
         <span>BY <span class="lh-essay-article-header__name">Evan Hickok</span></span>
         <span class="lh-essay-article-header__sep">·</span>
         <span>2026-05-07</span>
         <span class="lh-essay-article-header__sep">·</span>
         <span>22 MIN READ</span>
         <span class="lh-essay-article-header__sep">·</span>
         <span>FILED IN <span class="lh-essay-article-header__name">Strategy</span></span>
       </div>
     </header> */
.lh-essay-article-header,
.entry-content .lh-essay-article-header {
	padding: 64px 0 36px;
	margin-bottom: 48px;
	border-bottom: 1px solid var(--ll-ink);
}

.lh-essay-article-header__eyebrow,
.entry-content .lh-essay-article-header__eyebrow {
	margin-bottom: 28px;
	font-family: var(--ll-eye);
	font-size: 12px;
	color: var(--ll-orange-dark);
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.lh-essay-article-header__title,
.entry-content .lh-essay-article-header__title {
	margin: 0 0 24px;
	font-family: var(--ll-sans);
	font-weight: 800;
	font-size: 56px;
	line-height: 1.05;
	letter-spacing: -1.2px;
	color: var(--ll-ink);
	text-wrap: balance;
}

.lh-essay-article-header__dek,
.entry-content .lh-essay-article-header__dek {
	margin: 0 0 36px;
	font-family: var(--ll-serif);
	font-size: 22px;
	line-height: 1.45;
	color: var(--ll-ink-soft);
	max-width: 700px;
	text-wrap: pretty;
}

.lh-essay-article-header__meta,
.entry-content .lh-essay-article-header__meta {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	font-family: var(--ll-mono);
	font-size: 11px;
	color: var(--ll-mute);
	letter-spacing: 0.08em;
}

.lh-essay-article-header__name,
.entry-content .lh-essay-article-header__name {
	color: var(--ll-ink);
	font-weight: 600;
}

.lh-essay-article-header__sep,
.entry-content .lh-essay-article-header__sep {
	opacity: 0.4;
}


/* ============================================================
   15q. COMPONENTS — footnote ref + footnotes (essay)  [Long-form · NET-NEW v0.9.6]
   ============================================================
   Two pieces:
     · .lh-essay-footnote-ref — superscript clickable link in body
       (e.g. [^1] → <a class="lh-essay-footnote-ref">[1]</a>)
     · .lh-essay-footnotes — numbered references list at the end of
       the essay; two-column grid on wide, single column on narrow

   Theme-side parser in functions.php transforms author-typed `[^N]`
   markers and `[^N]: text` definitions into the rendered structure.
   This section styles the rendered output.

   Source: primitives.jsx → FootnoteRef + Footnotes components.

   Recipe (FootnoteRef):
     MONO 0.62em (relative to parent) / 600 / orange-dark; superscript;
     no underline; tight padding.

   Recipe (Footnotes):
     Box:        margin-top 80px; padding-top 36px; top 1px ink border
     Eyebrow:    Prata 11 mute / 0.22em uppercase ("References")
     List:       2-col grid on >=900px (gap 40 col / 14 row); single col narrow
     Note item:  grid 28px 1fr; SERIF 14.5 / 1.5 ink-soft
     Number:     MONO 11 / 600 / orange-dark / 0.04em
     URL:        orange-dark / underline 1px / 3px offset / 600 / 13px
     Back-ref:   MONO 11 mute (↩) — links to the body ref */
.lh-essay-footnote-ref,
.entry-content .lh-essay-footnote-ref {
	font-family: var(--ll-mono);
	font-size: 0.62em;
	font-weight: 600;
	color: var(--ll-orange-dark);
	text-decoration: none;
	vertical-align: super;
	line-height: 1;
	padding: 0 1px 0 2px;
	cursor: pointer;
}

.lh-essay-footnote-ref:hover,
.entry-content .lh-essay-footnote-ref:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.lh-essay-footnotes,
.entry-content .lh-essay-footnotes {
	margin-top: 80px;
	padding-top: 36px;
	border-top: 1px solid var(--ll-ink);
}

.lh-essay-footnotes__eyebrow,
.entry-content .lh-essay-footnotes__eyebrow {
	margin-bottom: 16px;
	font-family: var(--ll-eye);
	font-size: 11px;
	color: var(--ll-mute);
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.lh-essay-footnotes__list,
.entry-content .lh-essay-footnotes__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 40px;
	row-gap: 14px;
}

@media (max-width: 768px) {
	.lh-essay-footnotes__list,
	.entry-content .lh-essay-footnotes__list {
		grid-template-columns: 1fr;
	}
}

.lh-essay-footnotes__list li,
.entry-content .lh-essay-footnotes__list li {
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: 10px;
	font-family: var(--ll-serif);
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--ll-ink-soft);
	padding: 4px 6px;
	border-radius: 2px;
}

.lh-essay-footnotes__num,
.entry-content .lh-essay-footnotes__num {
	font-family: var(--ll-mono);
	font-size: 11px;
	font-weight: 600;
	color: var(--ll-orange-dark);
	letter-spacing: 0.04em;
	padding-top: 3px;
}

.lh-essay-footnotes__list a[href^="http"],
.entry-content .lh-essay-footnotes__list a[href^="http"] {
	color: var(--ll-orange-dark);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	font-weight: 600;
	word-break: break-all;
	font-size: 13px;
}

.lh-essay-footnotes__back,
.entry-content .lh-essay-footnotes__back {
	margin-left: 6px;
	color: var(--ll-mute);
	text-decoration: none;
	font-family: var(--ll-mono);
	font-size: 11px;
}


/* ============================================================
   15r. COMPONENTS — definition (essay)   [Long-form · NET-NEW v0.9.6]
   ============================================================
   Catalog-card foundational definition for a load-bearing term
   that carries the essay's argument. Letterpress mood: cream block,
   soft ink shadow, dashed inner rule, eyebrow, Prata headword,
   MONO POS, numbered serif senses.

   ONE per essay max. Per spec (handoff/tickets/13-definition.md):
   use when the term carries the entire argument that follows
   (e.g. "leadership drift", "optionality", "moat"). For mid-essay
   term introduction in flowing prose, use .lh-mdef (§15s).

   Recipe (per ticket 13):
     Outer:    cream bg, 1px ink border, soft shadow
     Padding:  40px outer
     Inner:    1px ink dashed inner rule, inset 12px — implemented as
               ::before pseudo-element (no extra DOM node needed)
     Eyebrow:  MONO 11/16 +0.18em ink — "FROM THE LEXICON"
     Headword: Prata (eye) 44/52 weight 400 ink
     Pron:     MONO 16/24 mute
     POS:      MONO italic 13/20 mute
     Senses:   <ol>, MONO 13 mute number, SERIF 18/28 ink body, 12px gap
     See also: SANS small-caps 12/16 mute, prefixed "See also: "

   Markup pattern (per ticket 13):

     <aside class="lh-essay-definition" role="note">
       <p class="lh-essay-definition__eyebrow">From the lexicon</p>
       <h3 class="lh-essay-definition__term">Leadership drift</h3>
       <p class="lh-essay-definition__meta">
         <span class="lh-essay-definition__pron">/ˈlēdərˌSHip drift/</span>
         <span class="lh-essay-definition__pos">noun phrase</span>
       </p>
       <ol class="lh-essay-definition__senses">
         <li>The slow erosion of a founding principle…</li>
         <li>The decisions that compound away from it.</li>
       </ol>
       <p class="lh-essay-definition__see-also">See also: <span>Optionality, Moat</span></p>
     </aside> */
.lh-essay-definition,
.entry-content .lh-essay-definition {
	position: relative;
	margin: 48px 0;
	padding: 40px;
	background: var(--ll-cream);
	border: 1px solid var(--ll-ink);
	box-shadow: 0 6px 24px -8px rgba(0, 0, 0, 0.18);
}

.lh-essay-definition::before,
.entry-content .lh-essay-definition::before {
	content: "";
	position: absolute;
	inset: 12px;
	border: 1px dashed var(--ll-ink);
	pointer-events: none;
}

/* Lift contents above the ::before dashed rule */
.lh-essay-definition > *,
.entry-content .lh-essay-definition > * {
	position: relative;
}

.lh-essay-definition__eyebrow,
.entry-content .lh-essay-definition__eyebrow {
	margin: 0 0 14px;
	font-family: var(--ll-mono);
	font-size: 11px;
	line-height: 16px;
	letter-spacing: 0.18em;
	color: var(--ll-ink);
	text-transform: uppercase;
}

.lh-essay-definition__term,
.entry-content .lh-essay-definition__term {
	margin: 0;
	font-family: var(--ll-eye);
	font-size: 44px;
	line-height: 52px;
	font-weight: 400;
	color: var(--ll-ink);
}

.lh-essay-definition__meta,
.entry-content .lh-essay-definition__meta {
	margin: 6px 0 22px;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.lh-essay-definition__pron,
.entry-content .lh-essay-definition__pron {
	font-family: var(--ll-mono);
	font-size: 16px;
	line-height: 24px;
	color: var(--ll-mute);
}

.lh-essay-definition__pos,
.entry-content .lh-essay-definition__pos {
	font-family: var(--ll-mono);
	font-style: italic;
	font-size: 13px;
	line-height: 20px;
	color: var(--ll-mute);
}

.lh-essay-definition__senses,
.entry-content .lh-essay-definition__senses {
	margin: 0;
	padding: 0 0 0 28px;
	list-style: decimal;
	color: var(--ll-mute);                   /* number color */
}

.lh-essay-definition__senses li,
.entry-content .lh-essay-definition__senses li {
	font-family: var(--ll-serif);
	font-size: 18px;
	line-height: 28px;
	color: var(--ll-ink);
	padding-left: 4px;
	margin-bottom: 12px;
}

.lh-essay-definition__senses li:last-child {
	margin-bottom: 0;
}

.lh-essay-definition__senses li::marker {
	font-family: var(--ll-mono);
	font-size: 13px;
	color: var(--ll-mute);
}

.lh-essay-definition__see-also,
.entry-content .lh-essay-definition__see-also {
	margin: 18px 0 0;
	font-family: var(--ll-sans);
	font-size: 12px;
	line-height: 16px;
	color: var(--ll-mute);
	font-variant-caps: small-caps;
	letter-spacing: 0.04em;
}

@media print {
	.lh-essay-definition,
	.entry-content .lh-essay-definition {
		box-shadow: none;
	}
}


/* ============================================================
   15s. COMPONENTS — marginal definition (essay)   [Long-form · NET-NEW v0.9.6]
   ============================================================
   Inline-defined term that reveals a glossary card on hover/focus.
   Term gets a dotted underline; the card is hidden by default and
   appears as an absolutely-positioned popover below the term when
   the user signals interest.

   v0.9.9 DEVIATES from the source spec (handoff/tickets/14-marginal-
   definition.md) which called for "always visible, no hidden states."
   Per handoff/mdef-hover-deviation-2026-05-07.md: real-world contact
   with always-visible behavior on the May 7 Sonos smoke test surfaced
   visual clutter + stacking issues that the spec didn't anticipate.
   The hover/focus reveal pattern solves both: cards only consume
   attention when the reader signals interest. Trade-off: lower
   discoverability for skim-reading; touch users need `tabindex="0"`
   on the span to tap-to-reveal. Spec needs updating to match.

   Markup pattern (CSS-first paste workflow):

     <p>… The notion of <span class="lh-mdef" tabindex="0"
       data-def="The slow erosion of a founding principle by
       accumulated small decisions."
       data-source="Hickok 2026">leadership drift</span>
     captures it best. …</p>

   data-side is no longer used (originally for left/right margin
   selection). Authors can leave it in markup for backwards
   compatibility with the old spec; CSS ignores it.

   Behavior:
     · Default state — card hidden (opacity 0, visibility hidden,
       pointer-events none) so it doesn't intercept clicks
     · :hover, :focus, :focus-within — card visible
     · 150ms opacity + visibility transition for smooth reveal
     · z-index 10 to lift above prose

   Use mid-essay on first use of a term. Define on first use only. */
.lh-mdef,
.entry-content .lh-mdef {
	text-decoration: underline dotted 1.5px;
	text-decoration-color: var(--ll-ink);
	text-underline-offset: 4px;
	cursor: help;
	position: relative;
}

.lh-mdef::after,
.entry-content .lh-mdef::after {
	content: attr(data-def);

	/* Hidden by default — revealed on hover/focus (see rule below) */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 150ms ease-out,
		visibility 150ms ease-out;

	/* Popover positioning: anchored below the term's left edge */
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	margin-top: 8px;

	/* Sizing — cap the card width. NOTE: this bounds WIDTH only, not
	   horizontal position; on narrow screens the term's left-edge anchor
	   can still push the card off-screen, so the @media rule below
	   re-pins it as a fixed bottom card (issue #30). */
	width: max-content;
	max-width: min(360px, calc(100vw - 32px));

	/* Style — same cream + ink left border as the original spec,
	   plus a soft drop shadow to lift the popover off the prose */
	padding: 12px 14px;
	font-family: var(--ll-serif);
	font-size: 14px;
	line-height: 1.42;
	color: var(--ll-ink);
	background: var(--ll-cream);
	border-left: 2px solid var(--ll-ink);
	box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.18);
	white-space: normal;
}

/* Reveal on hover (mouse), focus (keyboard / touch tap when the span
   is focusable), and focus-within (descendant focus, future-proofing). */
.lh-mdef:hover::after,
.lh-mdef:focus::after,
.lh-mdef:focus-within::after,
.entry-content .lh-mdef:hover::after,
.entry-content .lh-mdef:focus::after,
.entry-content .lh-mdef:focus-within::after {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Visible focus ring for keyboard / touch users — same teal/2px/2px
   recipe as §11 .lh-input:focus-visible and §9 .lh-button:focus-visible. */
.lh-mdef:focus,
.entry-content .lh-mdef:focus {
	outline: 2px solid var(--ll-teal);
	outline-offset: 2px;
}

/* Print: card always visible inline so the definition isn't lost in
   a printed copy where hover obviously doesn't apply. */
@media print {
	.lh-mdef::after,
	.entry-content .lh-mdef::after {
		content: " (" attr(data-def) ")";
		display: inline;
		opacity: 1;
		visibility: visible;
		position: static;
		float: none;
		margin: 0;
		padding: 0;
		background: transparent;
		border: none;
		box-shadow: none;
		font-size: inherit;
		font-style: italic;
		color: inherit;
	}
}

/* Mobile reveal — primary is JS, fallback is this block (issue #30).
   ----------------------------------------------------------------
   On wide viewports the ::after card is a popover anchored to the term's
   left edge (top:100%; left:0) — that treatment is correct on desktop and
   is left alone. On narrow screens it's the bug: the card's left edge
   starts wherever the term falls on its line, and `max-width` caps the
   card's WIDTH, not its horizontal POSITION, so a term in the right half
   of a line pushes the card off the right edge.

   Pure CSS can't keep the card both adjacent to the term AND clamped to
   the viewport: the ::after's containing block is the inline term span, so
   every horizontal reference is the term's own position. So MOBILE is
   handled by JS (assets/js/mdef-position.js, v0.9.40): a getBoundingClient-
   Rect-positioned .lh-mdef-card that prefers above the term, flips below
   when cramped, and clamps horizontally. The JS gate is below.

   This @media block is the NO-JS fallback: if the script never runs, the
   ::after pins to the bottom gutter (16px inset, never clipped, thumb-
   reachable). v0.9.40 scoped JS to mobile only — desktop keeps the
   ::after popover unchanged. */
@media screen and (max-width: 768px) {
	/* No-JS fallback — pin the ::after card to the bottom gutter so it is
	   never clipped (v0.9.38). */
	.lh-mdef::after,
	.entry-content .lh-mdef::after {
		position: fixed;
		top: auto;
		right: 16px;
		bottom: 16px;
		left: 16px;
		margin-top: 0;
		width: auto;
		max-width: none;
		z-index: 100;
	}

	/* JS active — stand the ::after down (content:none stops it generating)
	   so it can't double up with the JS card. Scoped to mobile + screen, so
	   desktop keeps its ::after popover and print keeps its inline
	   parenthetical. */
	.lh-mdef-js .lh-mdef::after,
	.lh-mdef-js .entry-content .lh-mdef::after {
		content: none;
	}
}

/* The floating card. Visual recipe mirrors the ::after popover (cream +
   2px ink left border + soft lift) so JS and no-JS paths look identical;
   the source line (rendered only when data-source is present) is the one
   addition the CSS-only ::after couldn't show — `content` can hold just
   one attr(). Hidden until JS adds .is-visible. */
.lh-mdef-card {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 150ms ease-out,
		visibility 150ms ease-out;

	width: max-content;
	max-width: min(360px, calc(100vw - 32px));
	padding: 12px 14px;

	font-family: var(--ll-serif);
	font-size: 14px;
	line-height: 1.42;
	color: var(--ll-ink);
	background: var(--ll-cream);
	border-left: 2px solid var(--ll-ink);
	box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.18);
}

.lh-mdef-card.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.lh-mdef-card__def {
	display: block;
}

.lh-mdef-card__source {
	display: block;
	margin-top: 8px;
	font-family: var(--ll-mono);
	font-size: 11px;
	line-height: 1.27;
	color: var(--ll-mute);
}


/* ============================================================
   15t. COMPONENTS — long-form essay page wrapper   [Long-form · NET-NEW v0.9.7]
   ============================================================
   Switches the body background from --ll-cream (the brand default
   established in §3) to --ll-paper (white) for long-form essay
   pages. The cream-bg primitives (Refrain default, AsideSection,
   Pair frame, Exhibit cream frame) need a non-cream surface to
   visually pop against — that's the design intent in essay-page.jsx
   (`background: EC.paper`).

   Scoped to long-form essays only (not site-wide) via `body:has()`:
   if any descendant has `.lh-essay-page`, the body bg flips to paper.
   Existing posts that don't use the long-form primitives keep their
   brand-cream surface unchanged.

   Usage: wrap the pasted wp:html content in a
       <div class="lh-essay-page">…</div>
   container. Or, for posts whose entire body is the essay, add the
   class to the article wrapper via Block Editor's "Advanced > Additional
   CSS class" on the top-level Group block.

   Browser support: body:has() is Chrome 105+, Firefox 121+, Safari
   15.4+ — fine for this audience. Older browsers fall back to the
   cream body bg, which is still readable; the cream-bg primitives
   just visually merge with the surround. Acceptable degradation.

   Future PHP option: a body_class filter in functions.php could add
   `.lh-long-form` to <body> when a post has the "long-form-essay"
   category or tag. Holding off until the CSS-first workflow has
   proven itself; the :has() approach lets the wrapper live entirely
   in the wp:html block content, which is friendlier to the
   paste-into-Code-Editor authoring workflow. */
body:has(.lh-essay-page) {
	background: var(--ll-paper);
}

/* The wrapper itself is invisible — no own bg, padding, or border.
   It's just a marker for the body:has() rule above. The pasted essay
   content flows in the existing .entry-content container's measure. */
.lh-essay-page {
	background: transparent;
	color: var(--ll-ink);
}


/* ============================================================
   15u. COMPONENTS — eyebrow utility (essay)   [Long-form · NET-NEW v0.9.8]
   ============================================================
   Generic eyebrow class for ad-hoc section labels in long-form
   essays. Use when no primitive owns the label — e.g. "PART TWO"
   above an H2, or a body-top "CASE STUDY · LEADERSHIP & RISK"
   eyebrow when the WP-rendered post title is doing the H1 job.

   The other primitives' scoped __eyebrow / __label helpers (article-
   header, aside-section, mid-cta, end-cta, etc.) take their own
   recipes — DO NOT replace those with this utility. This is for
   the gaps the primitives don't cover.

   Recipe:
     Default:  Prata 11 / 0.22em uppercase / mute
     --orange: Prata 11 / 0.22em uppercase / orange-dark
                (for emphatic essay-top eyebrows; matches article-
                header's recipe but at 11px instead of 12px)
     --yellow: Prata 11 / 0.22em uppercase / yellow
                (for ink-bg surfaces; matches end-cta and podcast-
                callout eyebrow recipes)

   Markup pattern:

     <div class="lh-essay-eyebrow">CASE STUDY · LEADERSHIP & RISK</div>
     <div class="lh-essay-eyebrow lh-essay-eyebrow--orange">PART TWO</div>
     <div class="lh-essay-eyebrow lh-essay-eyebrow--yellow">…inside ink-bg…</div>

   No display:block on a <div> would be needed (divs are block by
   default), but we set it explicitly so the class also works on
   inline elements like <span> when that's preferred. */
.lh-essay-eyebrow,
.entry-content .lh-essay-eyebrow {
	display: block;
	margin: 0 0 14px;
	font-family: var(--ll-eye);
	font-size: 11px;
	font-weight: 400;
	color: var(--ll-mute);
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.lh-essay-eyebrow--orange,
.entry-content .lh-essay-eyebrow--orange {
	color: var(--ll-orange-dark);
}

.lh-essay-eyebrow--yellow,
.entry-content .lh-essay-eyebrow--yellow {
	color: var(--ll-yellow);
}


/* ============================================================
   15v. COMPONENTS — sticky-TOC enhancements   [Long-form · NET-NEW v0.9.12]
   ============================================================
   Two pieces injected by `assets/js/sticky-toc.js` into whichever
   `#toc-container` is on the page (whether it came from the existing
   WPCode pillar-page snippet or from auto-scan on a long-form essay).
   The base TOC styling lives in WPCode (per the v0.8.x pillar setup);
   this section only adds the v0.9.12 progress bar + scroll-spy active
   state on top.

   - .lh-toc-progress       — 2px track on var(--ll-rule), inserted
                              by JS as the first child of #toc-container
   - .lh-toc-progress__fill — orange fill, width updated per scroll
                              position (transitions 80ms linear so it
                              follows scrolling smoothly)
   - .is-active             — applied by JS to the active section's
                              `<li>` and its `<a>` child. We use a
                              ::before pseudo-element for the orange
                              left-bar marker so existing TOC link
                              padding/layout is undisturbed (no
                              over-specific cascade fight with
                              whatever WPCode is doing). */
.lh-toc-progress {
	height: 2px;
	margin: 0 0 18px;
	background: var(--ll-rule);
	position: relative;
	overflow: hidden;
}

.lh-toc-progress__fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0%;
	background: var(--ll-orange);
	transition: width 80ms linear;
}

#toc-list li.is-active > a,
#toc-list a.is-active {
	font-weight: 700;
	color: var(--ll-ink);
	position: relative;
}

#toc-list li.is-active > a::before,
#toc-list a.is-active::before {
	content: "";
	position: absolute;
	left: -10px;
	top: 0.2em;
	bottom: 0.2em;
	width: 2px;
	background: var(--ll-orange);
}


/* ============================================================
   15w. COMPONENTS — cornerframe (essay)   [Long-form · NET-NEW v0.9.35]
   ============================================================
   Tufte / Bringhurst-inspired framing for editorial figures.
   Two 28px corner brackets (top-left + bottom-right) anchor a figure
   WITHOUT imposing a second surface color: no fill, no full border.
   Companion to §15i Exhibit — choose by whether the figure benefits
   from a surface fill (Exhibit's cream/ink frame) or only typographic
   anchoring (Cornerframe). Reach for Exhibit on image-heavy or
   internally-complex figures that want full containment; reach for
   Cornerframe when the figure should announce itself as a discrete
   object while the page surface reads straight through it.

   Interior padding (44 top / 40 sides / 40 bottom) is deliberate
   breathing room so the brackets read as anchors of an inset region
   rather than an outline traced around the content. Bracket stroke is
   1.5px ink. Eyebrow (MONO caps) sits at top; caption (MONO small) below.

   Source of truth for every value below: brand/DESIGN.md (see the
   "Long-form essay primitives" section + style-guide-v2/project/
   essay_primitives.md "Cornerframe" entry). First downstream consumers:
   the Disney-vs.-Pixar reconstruction figure on /pixar_saved_disney/ and
   the interactive chart + sensitivity table on
   /pixar-saved-disney-methodology/.

   Markup pattern:

     <figure class="lh-essay-cornerframe">
       <span class="lh-essay-cornerframe__eyebrow">FIG. 01 · …</span>
       <div class="lh-essay-cornerframe__body">
         <!-- arbitrary figure content (table, chart, image, …) -->
       </div>
       <figcaption class="lh-essay-cornerframe__cap">Caption in MONO.</figcaption>
     </figure>

   Don'ts: don't nest cornerframe inside cornerframe; don't combine with
   .lh-essay-exhibit__frame on the same figure (pick one framing); don't
   use it for figures narrower than ~480px — the brackets dominate. */
.lh-essay-cornerframe,
.entry-content .lh-essay-cornerframe {
	margin: 56px 0;
	position: relative;
	padding: 44px 40px 40px;
}

.lh-essay-cornerframe::before,
.lh-essay-cornerframe::after,
.entry-content .lh-essay-cornerframe::before,
.entry-content .lh-essay-cornerframe::after {
	content: "";
	position: absolute;
	width: 28px;
	height: 28px;
}

.lh-essay-cornerframe::before,
.entry-content .lh-essay-cornerframe::before {
	top: 0;
	left: 0;
	border-top: 1.5px solid var(--ll-ink);
	border-left: 1.5px solid var(--ll-ink);
}

.lh-essay-cornerframe::after,
.entry-content .lh-essay-cornerframe::after {
	bottom: 0;
	right: 0;
	border-bottom: 1.5px solid var(--ll-ink);
	border-right: 1.5px solid var(--ll-ink);
}

.lh-essay-cornerframe__eyebrow {
	display: block;
	margin: 0 0 14px;
	font-family: var(--ll-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--ll-ink);
}

.lh-essay-cornerframe__cap,
.entry-content .lh-essay-cornerframe__cap {
	margin-top: 14px;
	font-family: var(--ll-mono);
	font-size: 11px;
	line-height: 1.55;
	letter-spacing: 0.02em;
	color: var(--ll-mute);
	max-width: 640px;
}

@media (max-width: 640px) {
	.lh-essay-cornerframe,
	.entry-content .lh-essay-cornerframe {
		padding: 32px 22px 28px;
	}
	.lh-essay-cornerframe::before,
	.lh-essay-cornerframe::after,
	.entry-content .lh-essay-cornerframe::before,
	.entry-content .lh-essay-cornerframe::after {
		width: 20px;
		height: 20px;
	}
}


/* ============================================================
   16. (vacated — sticky bar moved to lighthouse-popup in Phase K)
   ============================================================
   Phase K (May 8, 2026, theme v0.9.14): the sticky-bar styles previously
   in this section moved to lighthouse-popup/assets/css/stickybar.css and
   the markup + JS moved to lighthouse-popup. See BRAND_SYSTEM.md "Plugin
   token consumption" + lighthouse-popup/includes/class-stickybar.php.

   The numbered slot is preserved (rather than renumbering 17/18/19/20)
   so the section map at the top of this file stays stable for anyone
   referencing §17 / §18 / etc. by number. If a future site-wide chrome
   element ever lands below the masthead (alert bar, A/B test bar), this
   slot is available; otherwise leave it empty. */
/* (no rules — section vacated; see lighthouse-popup/assets/css/stickybar.css) */


/* ============================================================
   17. CONTAINER MEASURE
   ============================================================
   Editorial body width: 1080px per design-system.jsx (its own Section
   wrapper renders at maxWidth 1080 — line 35). The masthead, footer,
   and sticky bar already constrain at this measure via their own
   __inner wrappers. Phase E adds the same constraint to the article
   shell so essay content wraps at the editorial width instead of the
   viewport's full width.

   Why all three selectors:
   - .lh-main is the outermost wrapper (single.php / page.php / index.php).
   - .lh-article is added via post_class('lh-article').
   - .entry-content holds the prose body.
   Constraining all three is defense-in-depth: if a future plugin or
   Phase F template change unwraps one level, the next still holds the
   measure. Children can never exceed parents, so the redundancy is
   harmless.

   Padding lives on .lh-main only — putting it on all three would
   compound (32 + 32 + 32 = 96px of side padding before the content).
   The inner elements just inherit width.

   Hero images and full-bleed sections opt out via Gutenberg's
   `alignwide` / `alignfull` classes, handled by theme.json's layout
   declarations (settings.layout.contentSize / wideSize). We don't
   redefine those rules here — theme.json owns them. */
/* padding-top (v0.8.4) — editorial breathing room between masthead
   (or sticky bar, when present) and the article header / page hero
   below. 64px is the favored brand-spacing match for "comfortable but
   not airy"; mobile drops to 32px in the @media block below. Footer
   keeps its asymmetric 96px above for a heavier bottom seam. */
.lh-main {
	max-width: 1080px;
	margin: 0 auto;
	padding: 64px 32px 0;
}

.lh-article,
.entry-content {
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 768px) {
	.lh-main {
		padding: 32px 16px 0;
	}
}


/* ============================================================
   18. RADII — defensive zero
   ============================================================
   Brand book sets default radius to 0 (square). Four sanctioned
   exceptions at 2px (popups, cards, sticky-bar buttons, plus future
   small utility components per design-system.jsx line 352). The
   sticky-bar submit's 2px is set in §16 directly.

   This block strips non-zero radius from native form/button elements
   so a plugin or block-editor default can't slip a 4/8/12 px corner in.
   The sticky-bar submit is explicitly excluded so its sanctioned 2px
   survives the sweep. */
button:not(.lh-stickybar__submit),
input,
select,
textarea {
	border-radius: 0;
}


/* ============================================================
   19. MOTION — prefers-reduced-motion defense
   ============================================================
   Honor the user's reduced-motion preference. Brand spec (design-
   system.jsx v1.1 §06) is "fade only, no translate" — but the
   simpler defensible recipe is to nuke duration entirely. This is
   the standard WCAG-friendly recipe widely used and matches Phase E's
   smoke check ("page should degrade gracefully").

   Targets:
   - All transitions on every element get collapsed to 0.01ms.
   - All animations (including the pullquote fade-in in §15 and the
     podcast-badge wiggle in lighthouse-podcast.css) collapse to a
     single iteration at 0.01ms.
   - smooth-scrolling reverts to the user's OS preference.

   The 0.01ms (rather than 0ms) is intentional: some browsers honor
   transitionend / animationend events differently when duration is
   exactly 0. Keeping a tiny non-zero value preserves the event
   contract for any future JS that listens for those events. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* ============================================================
   20. POST-CONTENT UTILITIES — non-prefixed inline classes
   ============================================================
   Inline-content utility classes that survived from production's
   customizer Additional CSS during the Phase G cutover port. These
   are NOT brand-prefixed (.lh-*) because they're already in use in
   existing post markup; renaming would require migrating posts.
   New inline utilities should use the .lh-* prefix going forward.

   .paper-lift (Phase G v0.8.5)
     Photographic image-lift utility used inline via
     <figure class="paper-lift">. Bottom-biased two-layer drop-shadow
     simulates a printed photo lifting off the page. Intentionally
     heavier than --ll-shadow-overlay (which represents card
     elevation, not physical depth of an object). Faithful port from
     production's customizer Additional CSS — preserves the
     deliberate aesthetic. */
.paper-lift img {
	display: block;
	box-shadow: none !important;
	filter:
		drop-shadow(0 18px 14px rgba(0, 0, 0, 0.28))
		drop-shadow(0 3px 2px rgba(0, 0, 0, 0.10));
}


/* ============================================================
   21. AAR FORM — inline lead-magnet ([aar_form] shortcode)
   ============================================================
   Inline email capture form for the AAR (After Action Review)
   lead-magnet. Rendered by the [aar_form] shortcode anywhere in
   post content; typically appears twice in the Navy SEALs article
   (above-the-fold CTA + closing CTA per the AAR rewrite brief).

   Posts variant=aar to the lighthouse-popup REST endpoint. JS
   wiring in assets/js/aar-form.js; PHP in template-parts/aar-form.php
   + inc/shortcodes.php.

   Top + bottom rule lines match §15n mid-essay-cta treatment so
   the form reads as a natural editorial pause rather than a
   plugin-injected widget. No background fill — the page paper
   shows through, keeping the form lightweight.

   Markup pattern:
     <div class="lh-aar-form">
       <h3 class="lh-aar-form__headline">…</h3>
       <p class="lh-aar-form__sub">…</p>
       <form data-llp-form="aar" …>
         <input type="email" class="lh-input lh-aar-form__email" …>
         <input type="hidden" name="variant" value="aar">
         <button type="submit" class="lh-button lh-aar-form__submit">…</button>
         <div class="lh-aar-form__status" …></div>
       </form>
       <p class="lh-aar-form__reassure">…</p>
     </div> */

.lh-aar-form,
.entry-content .lh-aar-form {
	margin: 48px 0;
	padding: 32px 0;
	border-top: 1px solid var(--ll-rule, #E5E3DC);
	border-bottom: 1px solid var(--ll-rule, #E5E3DC);
}

.lh-aar-form__headline,
.entry-content .lh-aar-form__headline {
	margin: 0 0 8px;
	font-family: var(--ll-sans, 'Open Sans', sans-serif);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ll-ink, #2B2B2B);
}

.lh-aar-form__sub,
.entry-content .lh-aar-form__sub {
	margin: 0 0 20px;
	font-family: var(--ll-sans, 'Open Sans', sans-serif);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--ll-ink, #2B2B2B);
}

.lh-aar-form__form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: flex-start;
	margin-bottom: 12px;
}

.lh-aar-form__email {
	flex: 1 1 220px;
	min-width: 0;
}

.lh-aar-form__submit {
	flex-shrink: 0;
}

.lh-aar-form__status {
	flex: 1 1 100%;
	font-size: 0.875rem;
	min-height: 1.25em;
	font-family: var(--ll-sans, 'Open Sans', sans-serif);
}

.lh-aar-form__status--error {
	color: #c0392b;
}

.lh-aar-form__status--pending {
	color: var(--ll-ink-soft, #3F3F3D);
}

.lh-aar-form__reassure,
.entry-content .lh-aar-form__reassure {
	margin: 0;
	font-family: var(--ll-sans, 'Open Sans', sans-serif);
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--ll-ink-soft, #3F3F3D);
	font-style: italic;
}


/* ----- DEPRECATED — .podcast-highlight-box safety net (Phase G v0.8.6) -----
   TEMPORARY: replaced by lighthouse-podcast plugin's
   [lh_podcast_highlight] shortcode (markup .lhp-highlight*).
   Faithful port of production's customizer Additional CSS so legacy
   posts using the old hand-coded HTML keep rendering through cutover.
   Remove this entire block once all posts have been migrated to the
   shortcode. Migration check:
     wp db query "SELECT COUNT(*) FROM wp_posts WHERE post_content
       LIKE '%podcast-highlight-box%' AND post_status='publish';"
   When that returns 0, delete this block. */
.podcast-highlight-box {
	background-color: #fdf9ef;
	border: 1px solid #eee;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	border-radius: 12px;
	padding: 32px;
	margin: 48px auto;
	max-width: 720px;
}

.podcast-highlight-heading {
	font-size: 1.5rem;
	margin-bottom: 0.25em;
}

.podcast-highlight-sub {
	font-style: italic;
	color: #555;
	margin-bottom: 24px;
}

/* Selectors corrected v0.8.8 — production HTML uses <a class="badge">
   inside <div class="podcast-badges">, not the .podcast-badge /
   .podcast-badges-container the customizer Additional CSS targeted.
   Scoped to .podcast-highlight-box so the rules don't leak to other
   .badge elements (Bootstrap, plugin namespaces, etc.). */
.podcast-highlight-box .badge {
	display: inline-block;
	transition: transform 0.2s ease;
}

.podcast-highlight-box .badge:hover {
	animation: wiggle 0.3s ease;
}

@keyframes wiggle {
	0%   { transform: rotate(0deg); }
	25%  { transform: rotate(2deg); }
	50%  { transform: rotate(-2deg); }
	75%  { transform: rotate(2deg); }
	100% { transform: rotate(0deg); }
}

.podcast-highlight-box .podcast-badges {
	display: flex;