/*
 * Media & Text. A column of copy and an optional photograph beside it.
 *
 * Source order is always copy first. At narrow widths the columns stack in
 * that order; once they sit side by side, `--media-left` moves the companion
 * into the first grid column. Placement is a two-dimensional concern at that
 * point, so reordering there does not put the visual sequence at odds with the
 * reading sequence the way a reorder on a stacked layout would.
 *
 * The dated vertical rule and the statistics panel used to live here, serving
 * the homepage Elouise spotlight and Origin manifesto. Both are their own
 * blocks now — see blocks/spotlight and blocks/manifesto.
 */

/*
 * The stacked gap is live's `gap-12 md:gap-16` — 48 then 64 — and it was
 * `--wp--preset--spacing--50`, which resolves to 1.5rem rather than the 2.5 the
 * theme.json array reads as. A flat 24 against live's 48 and 64.
 *
 * It only shows below the split, so it was invisible at 1440 and worth 45px per
 * row at 768: /our-story's three teaser sections each measured -45 against live
 * with every box otherwise identical, which is the whole of that page's -144.
 * See the spacing-scale note in CLAUDE.md.
 *
 * `--frame-card` is held flat because CobellCommunity is `gap-12 lg:gap-20` with
 * no md step — it goes 48 straight to the 80 its own rule sets at 64rem. The
 * chapter and callout registers carry their own pairs further down.
 */
.cobell-media__layout {
	display: grid;
	gap: 3rem;
}

/*
 * The biography chapters put the photograph above the copy while stacked.
 * `ElouiseBiographyChapter.tsx` says so in its own comment — "Mobile always
 * stacks image-above" — and puts the figure first in the document, swapping the
 * two with `md:order-*` only once they sit side by side. All five chapters on
 * /our-story/elouise-cobell alternate left and right at the split and every one
 * of them leads with the photograph below it.
 *
 * Done by placing the rows rather than by re-emitting the markup, so the eleven
 * other media-text instances keep the source order this block is built on. The
 * consequence is that the reading order stays heading-then-photograph where the
 * reference reads photograph-then-heading. Both are coherent — the heading
 * introduces the image either way, and the image carries its own alt text — and
 * this is the order that gives a screen reader the context first.
 */
@media ( max-width: 47.9375rem ) {
	.cobell-media--chapter .cobell-media__aside {
		grid-row: 1;
	}

	.cobell-media--chapter .cobell-media__copy {
		grid-row: 2;
	}
}

@media ( min-width: 48rem ) {
	.cobell-media__layout {
		gap: 4rem;
	}

	.cobell-media--frame-card .cobell-media__layout {
		gap: 3rem;
	}

	/*
	 * `--measure-snug` is ResearchSpotlight, `gap-10 lg:gap-16` — 40 stacked with
	 * no md step at all, straight to the 64 the base sets at 64rem. It took the
	 * base's 48/64 for one commit and put /news-press 70px out at 768.
	 */
	.cobell-media--measure-snug .cobell-media__layout {
		gap: 2.5rem;
	}
}

.cobell-media--measure-snug .cobell-media__layout {
	gap: 2.5rem;
}

@media ( min-width: 64rem ) {
	/*
	 * Equal columns — live's /our-story teasers run 544 and 544 inside a 1152
	 * container with a 4rem gutter. The 1.1fr split here was giving the
	 * photograph 562 against the copy's 510, which read as a wider image than
	 * the reference draws.
	 */
	.cobell-media__layout {
		grid-template-columns: 1fr 1fr;
		gap: 4rem;
		align-items: center;
	}

	.cobell-media--media-left .cobell-media__aside {
		grid-column: 1;
		grid-row: 1;
	}

	.cobell-media--media-left .cobell-media__copy {
		grid-column: 2;
		grid-row: 1;
	}

	.cobell-media--single .cobell-media__layout {
		grid-template-columns: minmax( 0, 48rem );
	}

	/*
	 * The Community register is the one instance live does not split evenly: 80
	 * of gutter rather than 64, and the copy a shade wider than the photograph —
	 * 562 against 510 inside the same 1152. The 1.1/1 ratio lands both to the
	 * pixel. Written twice so it follows the photograph rather than the track:
	 * with the media on the left it is the first track that has to be the
	 * narrower one.
	 */
	.cobell-media--frame-card .cobell-media__layout {
		grid-template-columns: 1.1fr 1fr;
		gap: 5rem;
	}

	/* Back to the base's 64 here: the snug register's 2.5rem carries two classes
	   and would otherwise beat the single-class base rule above at every width,
	   which is `lg:gap-16` lost. */
	.cobell-media--measure-snug .cobell-media__layout {
		gap: 4rem;
	}

	.cobell-media--frame-card.cobell-media--media-left .cobell-media__layout {
		grid-template-columns: 1fr 1.1fr;
	}
}

.cobell-media__copy {
	max-width: 40rem;
}

/*
 * The eyebrow's run-out, per register. Three of the five components disagree and
 * `--ruled-leading --tight`'s 24px is right for exactly one of them:
 *
 *   base           the homepage Community spread   24 · gap 12   (measured)
 *   --chapter      the biography chapters ×5       20 · gap 12   (`mb-5 gap-3`)
 *   --callout      /support/parents                32 · gap 16   (`mb-8 gap-4`)
 *
 * The base is left to `--tight` deliberately rather than restated here. Setting
 * it to the callout's 32 first looked correct on the page being fitted and put
 * the homepage 8px out — live's Community eyebrow is `mb-6`, not SectionHeader's
 * `mb-8` default, and only a sweep of the other instances caught it.
 *
 * Both overrides need two classes. `.cobell-eyebrow--tight` sets this margin
 * from the theme stylesheet, which loads *after* every block stylesheet, so a
 * single-class rule here ties and loses — and reads as having no effect at all.
 * Same trap as the section shell.
 */
/*
 * The chapter's eyebrow is block-level and a notch tighter than the house
 * kicker, and between them they were worth 10px of dead air at the top of every
 * chapter and 9px of extra width on the label.
 *
 * `.cobell-eyebrow` is `inline-flex`, which is right for the registers whose
 * reference component writes it that way. `ElouiseBiographyChapter` writes
 * `flex`, and an inline-level box sits on a line box and takes the copy
 * column's 1.6 leading as half-leading above it, where a block-level one starts
 * at the column's top edge. So the whole copy column — eyebrow, headline and
 * prose — stood 10px below live's while the figure beside it, which has no line
 * box, stayed put. That reads as the photograph having lost a top margin
 * rather than as anything to do with the label. Same fault as the steps
 * display register.
 *
 * The tracking is `tracking-[0.4em]` against the token's 0.45em, which is the
 * reference's own dominant value and stays the default. Same 10px size on both
 * sides, so it reads as the label being set larger rather than wider.
 */
.cobell-media--chapter .cobell-media__eyebrow {
	display: flex;
	margin-bottom: 1.25rem;
	letter-spacing: 0.4em;
}

.cobell-media--callout .cobell-media__eyebrow {
	margin-bottom: 2rem;
	gap: 1rem;
}

/*
 * 3.25rem rather than the shared heading token, which capped at 3rem and set
 * every section on the homepage at the same size. The reference gives each
 * section its own clamp; this is the one it uses for a row of this shape.
 */
/*
 * Three reference components share this block and none of them agree on the
 * heading: the homepage Community spread sets 52px, the /our-story teasers 48,
 * the news-press spotlight 44. The card frame is already the field that marks
 * the Community register, so it carries its own size rather than the block
 * branching on placement.
 *
 * The base is `OurStoryTeaserSection`'s own ramp. Only four instances ride it —
 * /our-story's three teasers and /support/parents' callout — and the callout
 * carries its own below, because live writes the two a slope apart.
 *
 * It was `clamp(2rem, 3.4vw, 3rem)`, which is neither component's: all three
 * ramps clamp to 48 from 1440 up, so a fit taken at desktop agrees with live
 * everywhere it was checked and drifts everywhere it was not. At 1024 the
 * teasers drew 34.8 against live's 41 and the callout 34.8 against 38.9, and at
 * 390 both stood 2px over live's floor. Same shape as the type-ramp note in
 * CLAUDE.md — matching endpoints do not make a matching middle.
 *
 * The news-press 44 is the `measure: snug` register below.
 */
/*
 * No `balance`. Live lets this heading fill greedily and inherits the document's
 * `pretty`; balancing it evens the two lines instead, so /our-story broke after
 * "took on" where live breaks after "took on the". Size, weight, tracking and
 * the loaded face are identical — a balanced heading just reads as a denser,
 * heavier block, which is easy to mistake for a weight difference.
 */
.cobell-media__heading {
	margin: 0;
	font-size: clamp( 1.875rem, 4vw, 3rem );
	line-height: 1.05;
	letter-spacing: -0.015em;
}

/*
 * The callout sets its own leading and *does* balance, where every other
 * placement of this heading must not — live writes `leading-[1] text-balance`
 * here and lets the others fill greedily. It is a single line at every width
 * this heading was measured at, so `balance` is carried for parity rather than
 * for an effect anyone can see; the leading is the 2.4px.
 *
 * `PrintCalloutRow`'s ramp is a fifth of a viewport unit under the base's, and
 * a sixteenth of a rem under it at the floor. Both clamp to 48 at 1440, so the
 * two only part company between the floor and there — 4px at 1024.
 */
.cobell-media--callout .cobell-media__heading {
	font-size: clamp( 1.75rem, 3.8vw, 3rem );
	line-height: 1;
	text-wrap: balance;
}

/*
 * The callout splits at 48rem, not 64. `PrintCalloutRow` is `md:grid-cols-2
 * md:gap-16`, so the whole of 768–1023 stacked here where live is already two
 * columns: /support/parents' section measured 1413 against live's 636 at 768,
 * +777 and the second-largest difference on the site.
 *
 * Same fault as the chapter register further down and found the same way — the
 * base layout rule is keyed at 64rem and two of the five components it serves
 * do not wait that long.
 *
 * The gaps are live's own pair. `--wp--preset--spacing--50` resolves to 1.5rem
 * rather than the 2.5 theme.json's array reads as, so the stacked gap was half
 * live's `gap-12`; see the spacing-scale note in CLAUDE.md.
 *
 * Two classes, so this outranks the single-class base rule regardless of which
 * media query comes first in the file.
 */
@media ( min-width: 48rem ) {
	.cobell-media--callout .cobell-media__layout {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
		align-items: center;
	}
}

/* 4vw, not 3.6: the slope has to overshoot the maximum at 1440 so the value
   clamps to exactly 3.25rem. A slope that lands just under leaves it at
   51.84px, which is a sixth of a pixel short of live and reads as a miss. */
.cobell-media--frame-card .cobell-media__heading {
	font-size: clamp( 2rem, 4vw, 3.25rem );
	line-height: 1;
	letter-spacing: -0.01em;
}

/*
 * The snug measure — /news-press's two rows.
 *
 * Live pads that section's container *inside* its 72rem max-width rather than
 * outside it, so the row lands on 1056 at 1440 where every other instance gets
 * the full 1152. Both columns follow: 496 each against 544. Expressed as a
 * narrower cap rather than by adding inline padding to the inner, because the
 * section already owns the gutter and doubling it drifts further at 1024 than
 * the cap does.
 *
 * The heading is the third of the four sizes this block sees on live — 44
 * against the base's 48 — and it belongs to the same register, so it travels
 * with the measure instead of being a second field. The note above the base
 * heading records the 4px this closes.
 */
.cobell-media--measure-snug .cobell-section__inner {
	max-width: 66rem;
}

.cobell-media--measure-snug .cobell-media__heading {
	font-size: clamp( 1.75rem, 3.5vw, 2.75rem );
}

/*
 * The biography chapter is the fourth of the four sizes — `clamp(1.75rem, 3.6vw,
 * 2.75rem)` on a flat 1 leading, `ElouiseBiographyChapter`'s own. It rode the
 * base's 48px on 1.05 and ran 4px large with 2.4px of extra leading per line, so
 * the third chapter's headline broke onto six lines where live takes five.
 *
 * A degree of slope apart from `--measure-snug` above and the same maximum: both
 * clamp to 44 from 1440 up, and between the floor and there they are 0.1vw
 * apart. Written as live's own number rather than shared with that register,
 * because the two are different components and the leading differs anyway.
 */
.cobell-media--chapter .cobell-media__heading {
	font-size: clamp( 1.75rem, 3.6vw, 2.75rem );
	line-height: 1;
}

/*
 * The biography chapters run a shallower band than any other section on the
 * site: `py-16 md:py-20` on `ElouiseBiographyChapter`, against the shell's 128.
 * Five chapters at 96px over apiece is most of the 1046px that page stood taller
 * than live — the register's grid was already fitted, so the whole difference was
 * a padding the block never claimed.
 *
 * Authored rather than derived, like card-grid's and cta-band's own bands: the
 * chapters are a run of close-set spreads read as one continuous account, not
 * five separate sections. Scoped to the register instead of to a field because
 * `--chapter` maps 1:1 onto that one component and appears nowhere else — a
 * `spacing` choice here would be configuration with exactly one possible caller.
 *
 * Two classes, because `.cobell-section` sets padding-block from a stylesheet
 * that loads after this one and a single-class rule would tie and lose.
 */
.cobell-section.cobell-media--chapter {
	padding-block: 4rem;
}

@media ( min-width: 48rem ) {
	.cobell-section.cobell-media--chapter {
		padding-block: 5rem;
	}
}

/*
 * Two snug rows in a row close up to 112 between them.
 *
 * Live builds /news-press's pair as one section holding a list at `gap-28`,
 * where every other consecutive pair on the site is two sections and sits 257
 * apart — measured on /our-story, which matches ours to the pixel. So this is
 * the snug register's rhythm rather than a correction to the section shell, and
 * it is scoped to the pair rather than to `.cobell-media + .cobell-media`.
 *
 * 56 from each side rather than 112 from one, so the pair reads as symmetrical
 * if a third row is ever added between them.
 *
 * Two classes on the side that shrinks, because `.cobell-section` sets
 * padding-block from a stylesheet that loads after this one — the same tie the
 * section shell note in CLAUDE.md describes.
 */
.cobell-section.cobell-media--measure-snug:has( + .cobell-media--measure-snug ) {
	padding-bottom: 3.5rem;
}

.cobell-media--measure-snug + .cobell-section.cobell-media--measure-snug {
	padding-top: 3.5rem;
}

/*
 * 36rem, live's own cap. An earlier pass read this as uncapped because 32rem was
 * cutting the measure to 512 against live's 544 — but live is 576, which simply
 * never binds at desktop where the column is 544. It binds between 48rem and
 * 64rem, where the column is wider than live's, and matches the same cap on the
 * pull quote so the two do not disagree there.
 *
 * Gap above, leading, ink and size are per-register, because live gives each of
 * the five components a different set and each now carries a class:
 *
 *   base          /our-story ×3                        28 · 1.75  · 80% · 18px
 *   --chapter     /our-story/elouise-cobell ×5         28 · 1.70  · 80% · 18px
 *   --frame-card  the homepage Community spread ×1     32 · 1.625 · 75% · 18px
 *   --measure-snug /news-press ×2                      24 · 1.625 · 75% · 18px
 *   --callout     /support/parents ×1                  24 · 1.70  · 80% · 16px
 *
 * The base was 24 · 1.625 · 75% for all eleven, which is /news-press's set —
 * exact on two instances and wrong on nine. Reading it off the register instead
 * lands all eleven.
 *
 * --callout is the one that needed a fifth set rather than a nudge: live writes
 * `text-[15px] md:text-base` there, a whole step below every other placement, so
 * it was the only instance where the *size* was wrong and not just the rhythm.
 * (--chapter's live value is the same 15/16px pair and is still riding 18px
 * here — measured, not fixed, because it moves five sections on two pages that
 * were fitted around the larger size.)
 *
 * Paragraph margins are zeroed rather than left to collapse into these. The UA
 * gives a `p` 1em top and bottom and today the container's larger margin
 * absorbs it, so it looks handled — until something gives the container padding
 * or a new formatting context and 18px reappears at both ends.
 */
.cobell-media__body {
	max-width: 36rem;
	margin-top: 1.75rem;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 80%, transparent );
	font-size: var( --cobell-body-size );
	line-height: 1.75;
}

.cobell-media__body > :first-child,
.cobell-media__conclusion > :first-child {
	margin-top: 0;
}

.cobell-media__body > :last-child,
.cobell-media__conclusion > :last-child {
	margin-bottom: 0;
}

/*
 * `mt-7 text-[15px] leading-[1.7] md:text-base` — the same step below the body
 * token that `--callout` takes, and the note above recorded it as measured but
 * deferred, on the grounds that it moved five sections across two pages. It is
 * one page: `--chapter` renders only on /our-story/elouise-cobell, five times,
 * verified across all 24. With the band corrected above, this 2px was the whole
 * of what still stood that page taller than live.
 *
 * Both halves of the step are written, not just the desktop one — the token this
 * replaces already stepped at 48rem, so setting only `1rem` would have left the
 * phone a pixel large and read as fixed at 1440.
 */
.cobell-media--chapter .cobell-media__body,
.cobell-media--chapter .cobell-media__conclusion {
	font-size: 0.9375rem;
	line-height: 1.7;
}

@media ( min-width: 48rem ) {
	.cobell-media--chapter .cobell-media__body,
	.cobell-media--chapter .cobell-media__conclusion {
		font-size: 1rem;
	}
}

.cobell-media--frame-card .cobell-media__body {
	margin-top: 2rem;
}

.cobell-media--frame-card .cobell-media__body,
.cobell-media--frame-card .cobell-media__conclusion,
.cobell-media--measure-snug .cobell-media__body,
.cobell-media--measure-snug .cobell-media__conclusion {
	color: var( --cobell-body-color );
	line-height: 1.625;
}

.cobell-media--measure-snug .cobell-media__body {
	margin-top: 1.5rem;
}

/* Live's `mt-6 text-[15px] leading-[1.7] md:text-base`. The size is literal
   because the body token is 18px and this register steps below it, as
   `--chapter` does.

   Only the `md:` half of that was carried, so the desktop 16px was running on
   phones: the paragraph took four lines against live's three and stood the
   copy column 32px tall at 390, which is the whole of what this section was
   over. Same shape as the hero paddings where only the md value was written —
   correct wherever it was checked, wrong at every width below the breakpoint. */
.cobell-media--callout .cobell-media__body {
	margin-top: 1.5rem;
	font-size: 0.9375rem;
	line-height: 1.7;
}

@media ( min-width: 48rem ) {
	.cobell-media--callout .cobell-media__body {
		font-size: 1rem;
	}
}

/*
 * Drop cap on the opening paragraph. Used once per long-form article — on the
 * first chapter only — so the rest reads as continuous prose. The letter is
 * far above the 24px large-text threshold, so terracotta's 3.15:1 on cream is
 * the ratio that applies to it.
 */
.cobell-media__body--drop-cap > p:first-child::first-letter {
	float: left;
	margin: 0.25rem 0.75rem 0 0;
	color: var( --wp--preset--color--terracotta );
	font-family: var( --wp--preset--font-family--serif );
	font-size: 5rem;
	line-height: 0.85;
}

/*
 * Absolute, and a step, because live's is: `text-[5rem] md:text-[6rem]` with
 * `leading-[0.85] mr-3 mt-1`. It was `5.5em` on the body size, which resolves
 * against a font-size that itself steps — 82.5 then 88 — so it was 2px over on a
 * phone and 8px under at desktop, and the leading was 0.78 against 0.85.
 */
@media ( min-width: 48rem ) {
	.cobell-media__body--drop-cap > p:first-child::first-letter {
		font-size: 6rem;
	}
}

/*
 * Literals rather than the spacing presets. theme.json declares a spacingSizes
 * array but not `spacingScale: { steps: 0 }`, so core's default scale is what
 * actually ships — --wp--preset--spacing--50 resolves to 1.5rem, not the 2.5rem
 * the array reads as, and --40 to 1rem rather than 1.5rem. Both were 8px short
 * of live here for exactly that reason.
 *
 * 36rem is the reference's own cap on this figure. It only binds between 48rem
 * and 64rem, where .cobell-media__copy's 40rem is wider than live's column —
 * so the quote holds live's measure there and the body copy does not.
 *
 * border-box because the theme has no global reset: on content-box the rule and
 * its 1.5rem of padding sit outside the 36rem and the figure measures 602 at
 * 768 instead of live's 576.
 */
.cobell-media__quote {
	box-sizing: border-box;
	max-width: 36rem;
	margin: 2rem 0 0;
	padding-left: 1.5rem;
	border-left: 2px solid color-mix( in srgb, var( --wp--preset--color--terracotta ) 65%, transparent );
}

.cobell-media__quote-text {
	margin: 0;
	font-family: var( --wp--preset--font-family--serif );
	font-size: clamp( 1.125rem, 1.6vw, 1.375rem );
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.005em;
	line-height: 1.35;
}

.cobell-media__quote-text > p {
	margin: 0;
}

.cobell-media__quote-text > p + p {
	margin-top: 0.75em;
}

/*
 * Marks and the attribution dash are ornament, so they come from here rather
 * than the field — same reasoning as blocks/pull-quote, where an editor typing
 * their own would double them up.
 */
.cobell-media__quote-text > p:first-child::before {
	content: open-quote;
}

.cobell-media__quote-text > p:last-child::after {
	content: close-quote;
}

/*
 * Live sets this at forest 65%, which measures 3.95:1 on cream and fails 1.4.3
 * at 10px semibold. 70% is 4.52:1 and is the smallest step that clears it; the
 * two are indistinguishable side by side. Revert to 65% for exact parity if
 * that is the call.
 */
.cobell-media__quote-source {
	margin-top: 0.75rem;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 70%, transparent );
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.35em;
	line-height: 1.5;
	text-transform: uppercase;
}

.cobell-media__quote-source::before {
	content: "\2014\0020";
}

.cobell-media__conclusion {
	max-width: 36rem;
	margin-top: 2rem;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 80%, transparent );
	font-size: var( --cobell-body-size );
	line-height: 1.75;
}

/*
 * Two classes, because .cobell-buttons in the theme stylesheet sets the same
 * property at the same weight and loads later — a single-class override here
 * ties and loses, which is why this rule read as 2.5rem and measured 1.5rem.
 * Same cascade trap as the section shell.
 *
 * 2.5rem is live's mt-10 on /our-story, the homepage and /support/parents;
 * /news-press is the mt-8 below.
 */
.cobell-media .cobell-media__buttons {
	margin-top: 2.5rem;
}

.cobell-media--measure-snug .cobell-media__buttons {
	margin-top: 2rem;
}

/*
 * 6px of line-box leading above the link, the same artefact `cta-band` already
 * carries and for the same reason: live's CTA wrapper is a plain block, so its
 * `inline-flex` link sits on a line box struck by the column's 24px leading and
 * the 22px link takes 6px of that above it. Ours is a flex container, a flex
 * item has no line box, and the offset vanished — /our-story's teaser measured
 * 881 against live's 887.
 *
 * Keyed on the ghost variant, which is the mechanism rather than a proxy for it:
 * the half-leading only exists while the link's box is *shorter* than the strut.
 * The homepage's Community spread (`--secondary`) and /news-press' two rows
 * (`--forest`) close on pills that stand taller than 24px, so live gives them no
 * offset above at all and this must not reach them. All three of the ghost
 * instances are /our-story's teasers.
 *
 * Above the link and not below, for the reason written out on the cta-band rule:
 * a padding-bottom gets the section's height right and still leaves the link
 * sitting 6px high.
 */
.cobell-media__buttons:has( > .btn--ghost ) {
	padding-top: 0.375rem;
}

/*
 * The Download / Email-to-me pair. Live's `mt-10 flex flex-col gap-3
 * sm:flex-row sm:items-center sm:gap-4`.
 *
 * Stacked below 40rem and stretched, which is what `--caps` wants there — two
 * pills of different label lengths reading as one control group. The row at
 * 40rem up is where `items-center` matters, and it is what stops them
 * stretching.
 */
.cobell-media .cobell-media__actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 2.5rem;
}

@media ( min-width: 40rem ) {
	.cobell-media .cobell-media__actions {
		flex-direction: row;
		align-items: center;
		gap: 1rem;
	}
}

/* Photograph column -------------------------------------------------------- */

.cobell-media__aside {
	min-width: 0;
}

.cobell-media__figure {
	min-width: 0;
	margin: 0;
}

/*
 * Centre, which is the reference image primitive's own default. This rule used
 * to claim every editorial frame crops from the top; measured against
 * production on all five pages that carry the block, that holds for one of the
 * twelve placements and not the other eleven.
 *
 * It hid because `object-position` only crops along the axis that actually
 * overflows, so it is a no-op wherever the scaled source happens to fill the
 * frame. The tell is a source whose shape fights its frame: /news-press'
 * "Power in Culture" is a 2:3 portrait in a 16:9 box, so it overflows 465px
 * vertically and `top` threw all of it off the bottom — sky on screen where
 * production shows the building.
 */
.cobell-media__image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: center;
}

/*
 * The print callout is the one placement production does crop from the top: a
 * standing portrait in a 4:5 frame, where centring takes the crop out of the
 * subject's head. Keyed on the register, not the page — the register is what
 * the reference varies, and `--callout` renders exactly once site-wide.
 */
.cobell-media--callout .cobell-media__image {
	object-position: top;
}

/*
 * Two frames. `plate` is the reference's printed-plate treatment — tight
 * corners and a soft cast shadow — and is what the interior rows use. `card`
 * is the homepage Community register: a deeply rounded card with a heavier
 * shadow, which reads as an object floating on the cream rather than a
 * photograph laid onto it.
 */
/*
 * 0.25rem, because the reference is Tailwind v4 and `rounded-sm` is 4px there,
 * not the 2px v3 gave it. Measured on live at 4px on /our-story's three teasers
 * and /support/parents, and `rounded-sm` is what ui/CaptionedImage writes for the
 * five biography chapters — so 4px is right for nine of the eleven plates.
 *
 * /news-press is the exception and is the register below: ResearchSpotlight
 * writes `rounded-md`, 6px, which live draws.
 */
.cobell-media--frame-plate .cobell-media__image {
	border-radius: 0.25rem;
	box-shadow: 0 18px 40px -14px rgba( 0, 0, 0, 0.22 );
}

/* `rounded-md`, 6px. Three classes so it beats the plate rule outright rather
   than tying with it on source order. */
.cobell-media--measure-snug.cobell-media--frame-plate .cobell-media__image {
	border-radius: 0.375rem;
}

/*
 * Live's `shadow-lg shadow-black/15` — two tight layers at 15%, against the
 * single 40px-blur layer at 22% the plate carries by default. Ours reads as a
 * softer, deeper cast.
 *
 * Scoped to the callout, and three classes so it beats the plate rule rather
 * than tying with it on source order. Only this instance's value was measured
 * against live; the other ten plates are a different set of reference
 * components and are not assumed to share it.
 */
.cobell-media--callout.cobell-media--frame-plate .cobell-media__image {
	box-shadow: 0 10px 15px -3px rgba( 0, 0, 0, 0.15 ), 0 4px 6px -4px rgba( 0, 0, 0, 0.15 );
}

/*
 * The biography chapters. `shadow-xl shadow-black/20` — two layers at 20%,
 * against the plate's single 40px-blur layer at 22%: a tighter, more upright
 * cast than the default, which reads as the plate sitting on the page rather
 * than floating a centimetre off it.
 *
 * Three classes, same as the callout above and for the same reason.
 */
.cobell-media--chapter.cobell-media--frame-plate .cobell-media__image {
	box-shadow: 0 20px 25px -5px rgba( 0, 0, 0, 0.2 ), 0 8px 10px -6px rgba( 0, 0, 0, 0.2 );
}

/*
 * And the vignette, which is the half of that treatment a shadow value cannot
 * express: `ElouiseBiographyChapter` paints
 * `radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.4))` over
 * the photograph itself, so the plate darkens into its own corners. It is the
 * one thing in the reference that keeps a caption legible over any future
 * photograph, which is why it sits outside that component's placeholder branch
 * and over the cleared image too — every other plate in this block gets the
 * gradient only while it is holding space, so this cannot go on the base.
 *
 * A pseudo-element on the figure rather than a wrapper in `render.php`, which
 * would change the markup of all eleven instances to reach five. It carries the
 * plate's radius instead of clipping, because `overflow: hidden` on the figure
 * would cut the cast shadow off.
 *
 * It is bounded by the register's own 4:5 rather than by `inset: 0`, because a
 * figure is the image *and* an optional caption below it and the caption must
 * not be washed. All five chapters carry `image_ratio: 4-5`, which is the ratio
 * the reference fixes for this component; a chapter switched to another ratio
 * in the editor would leave the gradient the wrong height, so the ratio and
 * this rule have to move together.
 *
 * The image and the figure each carry the section entrance, so during it the
 * two boxes are 14px apart and the gradient trails the photograph. Under a 12px
 * blur at rising opacity that is not visible, and it costs nothing at rest —
 * the alternative is taking the image out of the reveal, which changes the
 * entrance to fix a transient.
 */
.cobell-media--chapter .cobell-media__figure {
	position: relative;
}

.cobell-media--chapter .cobell-media__figure::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	aspect-ratio: 4 / 5;
	border-radius: 0.25rem;
	background: radial-gradient( ellipse at center, transparent 45%, rgba( 0, 0, 0, 0.4 ) );
	pointer-events: none;
}

.cobell-media--frame-card .cobell-media__image {
	border-radius: 1.5rem;
	box-shadow: 0 20px 25px -5px rgba( 0, 0, 0, 0.1 ), 0 8px 10px -6px rgba( 0, 0, 0, 0.1 );
}

/*
 * Cursor tilt on the card frame. The perspective sits on the figure, which
 * never moves, and the image inside takes the rotation — putting both on one
 * element makes the rotation flatten instead of reading as depth.
 *
 * Pointer devices only. There is nothing to fall back to on touch and nothing
 * is lost: the tilt and its specular sheen are decoration on a photograph, and
 * motion.js only binds the listeners where the media query below applies.
 */
@media ( hover: hover ) and ( pointer: fine ) {
	.cobell-media--frame-card .cobell-media__figure {
		perspective: 1000px;
	}

	.cobell-media--frame-card .cobell-media__image {
		transform-style: preserve-3d;
		will-change: transform;
	}

	/*
	 * The sheen. A radial highlight tracking the cursor through --mx/--my,
	 * blended soft-light so it reads as light falling across the print rather
	 * than a white shape laid on top of it.
	 *
	 * It takes the image's rotation from --cobell-tilt, which motion.js writes
	 * on the figure. Without it the sheen stays square to the page while the
	 * photograph tilts away underneath, and the corners it leaves uncovered
	 * light the cream section behind — four pale wedges around a rounded
	 * photograph, which reads as a fault in the image rather than as an overlay
	 * that did not follow it.
	 *
	 * The transform transition matches the easing motion.js attaches to the
	 * image on first hover, so the highlight and the photograph arrive together
	 * rather than the sheen snapping ahead of the tilt.
	 */
	.cobell-media--frame-card .cobell-media__figure::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		opacity: 0;
		pointer-events: none;
		border-radius: 1.5rem;
		mix-blend-mode: soft-light;
		background: radial-gradient(
			circle at calc( var( --mx, 50 ) * 1% ) calc( var( --my, 50 ) * 1% ),
			rgba( 255, 255, 255, 0.55 ),
			rgba( 255, 255, 255, 0 ) 55%
		);
		transform: var( --cobell-tilt, none );
		transition: opacity 300ms ease, transform 500ms cubic-bezier( 0.16, 1, 0.3, 1 );
	}

	.cobell-media--frame-card .cobell-media__figure {
		position: relative;
	}

	.cobell-media--frame-card .cobell-media__figure[ data-tilt-active="true" ]::after {
		opacity: 1;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.cobell-media--frame-card .cobell-media__figure::after {
		transition: none;
	}
}

.cobell-media__figure--4-5 .cobell-media__image {
	aspect-ratio: 4 / 5;
}

/*
 * The Community portrait. The reference narrows it from 4:5 to 5:6 once the
 * columns separate, so it stands taller beside the copy than it does stacked
 * above it.
 */
.cobell-media__figure--5-6 .cobell-media__image {
	aspect-ratio: 4 / 5;
}

@media ( min-width: 64rem ) {
	.cobell-media__figure--5-6 .cobell-media__image {
		aspect-ratio: 5 / 6;
	}
}

.cobell-media__figure--3-4 .cobell-media__image {
	aspect-ratio: 3 / 4;
}

.cobell-media__figure--4-3 .cobell-media__image {
	aspect-ratio: 4 / 3;
}

.cobell-media__figure--16-9 .cobell-media__image {
	aspect-ratio: 16 / 9;
}

/*
 * Caption sits below the photograph rather than as a glass panel over it. The
 * reference overlays a 55%-opacity tint and states AA holds regardless of what
 * is behind it, which is not true of a light frame: cream over that tint on a
 * near-white region measures about 2.6:1. Below the image the ratio is fixed
 * and known. Matches the hero, spotlight, and scholarship-detail captions.
 */
.cobell-media__caption {
	margin-top: var( --wp--preset--spacing--30 );
	color: var( --cobell-body-color );
	font-size: 0.75rem;
}

.cobell-media__caption-name {
	display: block;
	font-weight: 600;
}

.cobell-media__caption-meta {
	display: block;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* Dark surface ------------------------------------------------------------- */

.cobell-section--dark .cobell-media__quote-source {
	color: color-mix( in srgb, var( --wp--preset--color--cream ) 88%, transparent );
}

/*
 * Chapter register — the Elouise biography spreads. A narrower photograph
 * against a narrower measure, centred in a 64rem field rather than filling the
 * 72rem one: live sets 352 and 504 with a 3.5rem gutter, which leaves 56rem of
 * slack either side and is what keeps the reading column from running wide.
 *
 * **This splits at 48rem, not 64.** `ElouiseBiographyChapter` is
 * `md:grid-cols-[0.7fr_1fr]`, and the 64rem this rule used to carry left the
 * whole of 768–1023 stacked where live is already two columns — 1470px per
 * chapter against live's 532, and +3359 on the page at 768. It was the largest
 * single difference on the site at any width.
 *
 * Fractional tracks, and the measurement is why: 22rem/31.5rem is 0.7/1 to
 * three decimal places, so above the cap the two are the same geometry, and
 * below it only the fractions track live. `minmax(0, …)` because an `fr` floors
 * at min-content and the copy's longest unbroken word would otherwise push the
 * text column past its share.
 *
 * The cap is live's own arithmetic rather than our gutter's. Live's container is
 * `max-w-5xl px-6 md:px-14` and Tailwind's preflight is border-box, so its
 * content box is `min(64rem, 100vw) - 7rem` from md up — 656 at 768, 912 from
 * 1024. Written that way here so this register lands on live at every width
 * instead of waiting on `--wp--custom--gutter`, which is a clamp where live's
 * padding is a step and runs ~25px narrow per side through this whole band.
 * Same treatment, and the same reason, as the steps rail's `min(57rem, …)`.
 *
 * `align-items: start` is live's `items-start`, and it has to be stated: the
 * base layout rule sets `center` at 64rem, so without this the photograph
 * floated against a taller copy column from 1024 up and sat flush at 768.
 */
/* `gap-10` stacked, against the base register's `gap-12`. */
.cobell-media--chapter .cobell-media__layout {
	gap: 2.5rem;
}

@media ( min-width: 48rem ) {
	.cobell-media--chapter .cobell-media__layout {
		grid-template-columns: minmax( 0, 0.7fr ) minmax( 0, 1fr );
		align-items: start;
		gap: 3.5rem;
		max-width: min( 57rem, 100vw - 7rem );
		margin-inline: auto;
	}

	.cobell-media--chapter .cobell-media__copy {
		max-width: none;
	}

	/*
	 * Three classes, not two. The base register places the media column at
	 * 64rem and these have to win from 48 — a two-class rule would only tie
	 * with it and lose on source order, silently, from 1024 up.
	 */
	.cobell-media--chapter.cobell-media--media-left .cobell-media__aside {
		grid-column: 1;
		grid-row: 1;
	}

	.cobell-media--chapter.cobell-media--media-left .cobell-media__copy {
		grid-column: 2;
		grid-row: 1;
	}
}