/*
 * Hero block. Surface, grain, eyebrow, accent, buttons, and section rhythm all
 * come from the shared primitives in the theme stylesheet — what is left here
 * is the three layout shells and the deadline alert card.
 */

/*
 * The heroes are deliberately held off the section step.
 *
 * `.cobell-section` moved from clamp(4rem, 8vw, 8rem) to a 7rem/9rem step to
 * match the reference's section rhythm. That rhythm is right for the six
 * editorial sections and wrong here: the surround hero sizes itself against the
 * viewport, and its portrait offsets are fitted to the live site rather than
 * derived, so a change to the vertical padding moves all four of them. This
 * pins every hero to the value they were fitted against.
 *
 * Two classes for the same reason as the steps override — the shell's own
 * padding is set from a stylesheet that loads after this one, so a single-class
 * rule ties and loses.
 */
.cobell-section.cobell-hero {
	padding-block: clamp( 4rem, 8vw, 8rem );
}

.cobell-hero__inner {
	display: flex;
	flex-direction: column;
}

/*
 * Centered shell — the typographic page heroes. Narrower than the wide content
 * measure and centred, matching the reference's `mx-auto max-w-3xl text-center`.
 *
 * `margin-inline: auto` is the whole of the "centred" half and is easy to lose:
 * `align-items: center` centres the flex children against each other and
 * `text-align: center` centres the text inside them, so the hero reads as
 * centred copy while the 48rem column it sits in stays hard against the left
 * edge of the section. At 1440 that is 192px off. Check the column's x, not the
 * headline's alignment.
 */
.cobell-hero--centered .cobell-hero__inner,
.cobell-hero--centered-deep .cobell-hero__inner {
	align-items: center;
	max-width: 48rem;
	margin-inline: auto;
	text-align: center;
}

/*
 * Live sets the centred band 96 over 128 — deeper below the headline than above
 * the eyebrow, which the shared clamp's symmetrical 115.2 cannot express. It is
 * the same value on all five centred pages, measured; only /news-press differs
 * and it takes the wide register below.
 *
 * Three classes, because `.cobell-section.cobell-hero` above pins every hero
 * from two and a two-class rule here would only tie with it.
 *
 * Both registers step at md. Live writes them as `pt-16 pb-24 md:pt-24 md:pb-32`
 * and `pt-24 pb-20 md:pt-36 md:pb-28`, and only the md half was carried here —
 * so every one of these heroes was running its desktop band on a phone, 32px
 * deep on the centred five. The base and the step have to live in this order:
 * `--wide` pages carry `--centered` too, both selectors are three classes, and
 * source order is the whole of what decides between them.
 */
.cobell-section.cobell-hero.cobell-hero--centered {
	padding-block: 4rem 6rem;
}

/*
 * The wide register — /news-press. Live gives that hero a 56rem column against
 * the other five's 48, a 6vw slope against their 6.4 on a 0.9 leading against
 * 0.92, and 144 over 112 of band. Four properties, one page, and they only make
 * sense together: the headline is long enough that the other register breaks it
 * after "recognition," where live breaks after "and".
 *
 * A field rather than a rule keyed on the page, which PD-9417 forbids, and
 * rather than a second layout, which would duplicate the centred shell.
 */
.cobell-section.cobell-hero.cobell-hero--wide {
	padding-block: 6rem 5rem;
}

/*
 * The full-bleed register — /contact, /support and the four audience pages. Live
 * writes `pt-20 pb-20 md:pt-32 md:pb-28`; this was the one register still falling
 * through to the shared clamp above, which is symmetrical 115.2 at 1440 and so was
 * 12.8px short at the top and 3.2 over at the bottom. Because the header sits above
 * `main` on these pages, that shortfall moved every section on all six of them up
 * against live. Measured on four pages, both sides: live is 128/112 on every one.
 *
 * Three classes, and it must not reach `--surround`: the homepage hero's portrait
 * offsets are fitted to the clamp above, so this register is named explicitly
 * rather than the clamp being changed.
 */
.cobell-section.cobell-hero.cobell-hero--full-bleed {
	padding-block: 5rem;
}

@media ( min-width: 48rem ) {
	.cobell-section.cobell-hero.cobell-hero--centered {
		padding-block: 6rem 8rem;
	}

	.cobell-section.cobell-hero.cobell-hero--wide {
		padding-block: 9rem 7rem;
	}

	.cobell-section.cobell-hero.cobell-hero--full-bleed {
		padding-block: 8rem 7rem;
	}
}

/*
 * The 10px live's eyebrow sits below the top of the copy column, and the reason
 * this register alone needs it declared.
 *
 * `.cobell-eyebrow` is inline-flex — the footer note in CLAUDE.md records the same
 * 10.6px there. On live's split branch the eyebrow is an inline-level box in a
 * block-flow column, so it sits on a line box whose strut is the column's own
 * 16px/1.5 and the ink lands ~10px down. `.cobell-hero__inner` is a flex column
 * here, so a flex item has no line box and no strut, and the ink sat hard against
 * the column top.
 *
 * It is 10px of real geometry, not a fudge: the copy column measures 380 on live
 * against our 370, which is also why a figure centred against it landed 5px out on
 * /support/students and 17 out on /support/counselors. Declared rather than
 * reproduced through markup because our root leading is 1.6 against live's 1.5, so
 * a restored strut would give 11–12px, not live's 10.
 *
 * Only the split branch. Live's centred branch is `flex flex-col items-center`, so
 * the eyebrow is a flex item there too and lands at 0 — verified on /support and
 * /contact, whose eyebrows sit exactly at their content-box top on both sides.
 */
/*
 * 1.5, not the root's 1.6. The strut this line box is built from is what places the
 * eyebrow's ink, so its leading is load-bearing: live's copy column runs 16px/1.5
 * and the offset it produces is the 10px the wrapper exists to restore. On 1.6 it
 * would be 11–12. See the note in render.php for why the wrapper is there at all.
 *
 * The eyebrow's own margin-bottom collapses through this box, so the gap to the
 * headline is unchanged.
 */
.cobell-hero__eyebrow-line {
	line-height: 1.5;
}

/* The single-rule eyebrow keeps the flanked register's gap here: SupportHero's
   split branch is `gap-4`, same as its centred branch. The 0.75rem on
   `--ruled-leading` is IEIMission's `gap-3`, which is the only other consumer. */
.cobell-hero__eyebrow.cobell-eyebrow--ruled-leading {
	gap: 1rem;
}

.cobell-hero--wide .cobell-hero__inner {
	max-width: 56rem;
}

.cobell-hero--wide .cobell-hero__heading {
	font-size: clamp( 2.25rem, 6vw, 5.5rem );
	line-height: 0.9;
}

/*
 * The centred shell's split register — /how-to-apply. Live keeps the same band
 * and the same headline ramp as the other five centred heroes and sets a scholar
 * portrait beside the copy from md up: `1.1fr / 0.9fr` on the section's own
 * 72rem measure, 56 of gutter stepping to 80 at lg, both columns centred against
 * each other, copy left-aligned.
 *
 * Keyed on the presence of an image rather than on a layout value or a page,
 * which is the switch the reference itself makes and the one `centered-deep`
 * already uses below. /how-to-apply is the only centred hero carrying one, so
 * nothing else moves.
 *
 * A real two-column grid here, not the five-track-and-span shape the detail hero
 * needs: live writes this one as `md:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)]`
 * with a single gutter, so `1.1fr 0.9fr` is the honest translation. The
 * `minmax(0, …)` matters — an `fr` track floors at min-content, and the caption's
 * unbroken tribal-nation line would otherwise push the figure column wider than
 * its share.
 */
@media ( min-width: 48rem ) {
	.cobell-hero--centered:not( .cobell-hero--no-figure ) .cobell-hero__layout {
		display: grid;
		grid-template-columns: minmax( 0, 1.1fr ) minmax( 0, 0.9fr );
		align-items: center;
		gap: 3.5rem;
	}

	.cobell-hero--centered:not( .cobell-hero--no-figure ) .cobell-hero__inner {
		align-items: flex-start;
		max-width: none;
		margin-inline: 0;
		text-align: left;
	}

	/*
	 * Three classes, not two. `.cobell-hero--centered .cobell-hero__summary`
	 * re-centres the measure further down this file and a two-class rule here
	 * would only tie with it — and lose on source order, silently, leaving the
	 * copy centred inside a left-aligned column.
	 */
	.cobell-hero.cobell-hero--centered:not( .cobell-hero--no-figure ) .cobell-hero__summary {
		margin-inline: 0;
	}

	.cobell-hero.cobell-hero--centered:not( .cobell-hero--no-figure ) .cobell-hero__buttons {
		justify-content: flex-start;
	}
}

@media ( min-width: 64rem ) {
	.cobell-hero--centered:not( .cobell-hero--no-figure ) .cobell-hero__layout {
		column-gap: 5rem;
	}
}

/*
 * The scholarship detail heroes sit deeper from the header because the
 * deadline card needs air above it. Padding is the only difference from
 * the centered shell, which is why they share one block.
 */
/*
 * Live sets this hero 160 over 128 — deeper from the header than the section
 * rhythm, because the deadline card needs air above it. Written as fixed values
 * rather than a multiple of the section token so it cannot drift when that token
 * moves, and scoped to this layout so the homepage surround hero, whose portrait
 * offsets are fitted to its own padding, is untouched.
 *
 * Two classes, and that is the whole of why this rule now works. `.cobell-hero`
 * pins every hero to clamp(4rem, 8vw, 8rem) from a two-class selector above, so
 * this rule at one class tied on nothing and lost outright — the six detail
 * heroes were sitting 32px short at the top with a rule in the file that read as
 * if it were setting them. Same trap as the section shell's own padding.
 *
 * Mobile is 128 over 96; live steps both at md.
 */
.cobell-hero.cobell-hero--centered-deep {
	padding-block: 8rem 6rem;
}

@media ( min-width: 48rem ) {
	.cobell-hero.cobell-hero--centered-deep {
		padding-block: 10rem 8rem;
	}
}

/*
 * With a portrait the scholarship detail hero stops being centred and becomes
 * the reference's split: copy in three columns, figure in two, both centred
 * against each other. ScholarshipDetailHero switches on exactly this — the
 * presence of an image — rather than on a separate layout value, so the same
 * switch lives here and the six pages need no content change.
 *
 * The headline drops with it. Centred, it is the display size; split, the
 * column is narrower and the reference winds it back to clamp(2.25rem, 5vw,
 * 4.25rem) — without this the headline sets 88px in a 68px column.
 */
/*
 * Five tracks and a span, not `3fr 2fr`, and the difference is not cosmetic.
 *
 * The reference is `grid-cols-5 gap-16` with the copy spanning three columns and
 * the figure two. A five-column grid has four gaps, and a spanning child absorbs
 * the ones inside it — so at a 1152px measure the copy is 666 and the figure 422.
 * `3fr 2fr` with a single gap divides only the space left after it and gives
 * 653/435. Thirteen pixels on each column, and the figure's ratio multiplies it
 * into thirty on its height.
 *
 * The gap was also reading 36px rather than 64: `--wp--preset--spacing--60`
 * resolves to 2.25rem, not the 4rem theme.json's array declares, because
 * WordPress's own default spacingScale generates the presets and its slugs
 * collide. Literal values here for that reason.
 */
@media ( min-width: 64rem ) {
	.cobell-hero--centered-deep:not( .cobell-hero--no-figure ) .cobell-hero__layout {
		display: grid;
		grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
		align-items: center;
		gap: 4rem;
	}

	.cobell-hero--centered-deep:not( .cobell-hero--no-figure ) .cobell-hero__inner {
		grid-column: span 3;
	}

	.cobell-hero--centered-deep:not( .cobell-hero--no-figure ) .cobell-hero__figure {
		grid-column: span 2;
	}

	.cobell-hero--centered-deep:not( .cobell-hero--no-figure ) .cobell-hero__inner {
		align-items: flex-start;
		max-width: none;
		margin-inline: 0;
		text-align: left;
	}
}

.cobell-hero--centered-deep:not( .cobell-hero--no-figure ) .cobell-hero__heading {
	font-size: clamp( 2.25rem, 5vw, 4.25rem );
	line-height: 0.95;
	letter-spacing: -0.02em;
}

/*
 * The split register runs tighter than the centred one on both sides of the
 * headline — 28 above and 28 below, against 32 and 40. Not breakpoint-scoped in
 * the reference: it switches on the presence of the portrait, same as the layout.
 */
.cobell-hero--centered-deep:not( .cobell-hero--no-figure ) .cobell-hero__eyebrow {
	margin-bottom: 1.75rem;
}

.cobell-hero--centered-deep:not( .cobell-hero--no-figure ) .cobell-hero__summary {
	margin-top: 1.75rem;
}

@media ( min-width: 64rem ) {
	.cobell-hero--centered-deep:not( .cobell-hero--no-figure ) .cobell-hero__summary,
	.cobell-hero--centered-deep:not( .cobell-hero--no-figure ) .cobell-hero__buttons,
	.cobell-hero--centered-deep:not( .cobell-hero--no-figure ) .cobell-hero__alert {
		margin-inline: 0;
		justify-content: flex-start;
	}
}

/*
 * Full-bleed shell — ContactHero, NewsPressHero, SupportHero. The section
 * spans the viewport but the copy stays on the wide measure; with no figure it
 * narrows and centres, which is the reference's second register.
 */
/*
 * Two classes. `.cobell-section` sets the gutter from the theme stylesheet, which
 * loads after this one, so a single-class rule here tied and lost — and the layout
 * below then added a second gutter inside the first. Invisible from 1400 up, where
 * the 72rem cap decides the width and the extra inset is absorbed by the centring;
 * below it the hero was inset twice, 48px at 390 against live's 24, which is what
 * wrapped the eyebrow onto two lines and cropped the figure 48px narrow. Same
 * tie-and-lose family as the padding-block above.
 */
.cobell-section.cobell-hero--full-bleed {
	padding-inline: 0;
}

/* border-box explicitly: the theme has no global reset, so the 72rem cap was
   sizing the content box and the gutter was being added outside it. The column
   came out 1216 wide against live's 1152 and every track inside it was over. */
.cobell-hero--full-bleed .cobell-hero__layout {
	box-sizing: border-box;
	padding-inline: var( --wp--custom--gutter );
	max-width: calc( 72rem + var( --wp--custom--gutter ) * 2 );
}

.cobell-hero--full-bleed.cobell-hero--no-figure .cobell-hero__layout {
	max-width: calc( 48rem + var( --wp--custom--gutter ) * 2 );
}

.cobell-hero--full-bleed.cobell-hero--no-figure .cobell-hero__inner {
	align-items: center;
	text-align: center;
}

/*
 * With a figure the full-bleed shell becomes a five-column grid: copy in
 * three, figure in two. Below that width the figure follows the copy so the
 * headline is what a reader meets first.
 *
 * Five real tracks, not `3fr 2fr`. The reference spans three of five columns
 * and two of five, so the gap between columns 3 and 4 falls *inside* the copy
 * span and counts toward its width. `3fr 2fr` splits the remainder 60/40 after
 * one gap instead, which put the copy 42px narrow and the figure 37px wide of
 * live at 1440. The gap is a literal 4rem: --wp--preset--spacing--60 arrives as
 * 2.25rem, not the value theme.json reads as.
 */
/*
 * 48rem, not the 56 this was keyed at. The reference switches this grid at `md` —
 * `md:grid-cols-5 md:gap-16` — so between 768 and 896 live sat the portrait beside
 * the copy while we still stacked it, which is a whole-layout difference rather
 * than a spacing one: the copy column ran 329px wide of live's at 768 and the
 * figure 477. Same trap as the ledger table's stacking breakpoint.
 */
@media ( min-width: 48rem ) {
	.cobell-hero--full-bleed:not( .cobell-hero--no-figure ) .cobell-hero__layout {
		display: grid;
		grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
		align-items: center;
		gap: 4rem;
	}

	.cobell-hero--full-bleed:not( .cobell-hero--no-figure ) .cobell-hero__inner {
		grid-column: span 3;
	}

	.cobell-hero--full-bleed:not( .cobell-hero--no-figure ) .cobell-hero__figure {
		grid-column: span 2;
		/* The stacked gap goes with the stack. The shared reset below is keyed at
		   56rem, so between 768 and 896 the figure kept 48px of margin inside a grid
		   cell it no longer follows. */
		margin-top: 0;
	}

	/*
	 * The flip. Both tracks are named explicitly rather than only the figure:
	 * the copy is first in the source, so auto-placement would seat it at
	 * column 1 before the figure's rule was consulted and push the figure onto
	 * a second row. `grid-row: 1` is what holds them level once neither is
	 * auto-placed.
	 *
	 * Wide screens only, by living inside the 48rem query the grid itself is
	 * declared in. Below it the shell is not a grid at all and the stack keeps
	 * the source order — copy, then photograph.
	 */
	.cobell-hero--full-bleed.cobell-hero--media-left:not( .cobell-hero--no-figure ) .cobell-hero__figure {
		grid-column: 1 / span 2;
		grid-row: 1;
	}

	.cobell-hero--full-bleed.cobell-hero--media-left:not( .cobell-hero--no-figure ) .cobell-hero__inner {
		grid-column: 3 / span 3;
		grid-row: 1;
	}
}

.cobell-hero__heading {
	margin: 0;
	font-size: var( --wp--preset--font-size--display );
}

/*
 * Live sets 40 of air under the hero eyebrow, not the 32 the shared
 * .cobell-eyebrow carries — `mb-10` here against `mb-8` on the section eyebrows.
 * Measured identical on all five centred heroes. Two classes so it beats
 * .cobell-eyebrow's own margin from the theme stylesheet.
 */
.cobell-eyebrow.cobell-hero__eyebrow {
	margin-bottom: 2rem;
}

/* `mb-8 md:mb-10`, and it is every hero on live — the four page heroes, the
   surround, and both support registers all write the same pair. Only the md half
   had been carried, so the gap ran 8px deep on a phone site-wide. */
@media ( min-width: 48rem ) {
	.cobell-eyebrow.cobell-hero__eyebrow {
		margin-bottom: 2.5rem;
	}
}

/*
 * The full-bleed register runs a shorter headline than the centred page heroes
 * — 80px against their 88 — because it shares its band with the header.
 *
 * `clamp(2.5rem, 6vw, 5rem)`, which is live's own ramp for this branch. It reads as
 * a no-op at 1440 because both slopes overshoot and clamp to the same 80px, and the
 * 5.6vw/2.25rem pair that used to be here agreed nowhere else: 4px small at the
 * floor, so /support and /contact drew 36px on a phone against live's 40. Only the
 * branch below carries the 2.25rem floor, and there it is right.
 */
.cobell-hero--full-bleed .cobell-hero__heading {
	font-size: clamp( 2.5rem, 6vw, 5rem );
}

/*
 * And a step shorter again once a portrait takes two of the five columns — the
 * headline is on a 3/5 measure there, so live drops it to 68px at 1440 rather
 * than letting it run the same size in a narrower column. The switch is the
 * presence of the figure, exactly as the layout's is; /contact and the support
 * hub carry no portrait and keep the 80px register above.
 */
.cobell-hero--full-bleed:not( .cobell-hero--no-figure ) .cobell-hero__heading {
	font-size: clamp( 2.25rem, 5vw, 4.25rem );
	line-height: 0.95;
}

.cobell-hero--full-bleed.cobell-hero--no-figure .cobell-hero__summary {
	margin-inline: auto;
}

/*
 * The paragraph's own margins have to go, and the reason is not obvious.
 *
 * The theme has no `p { margin: 0 }` reset, so a paragraph inside a rich-text
 * field keeps the user agent's 1em block margins. Normally those collapse out of
 * the wrapper and cost nothing — but `.cobell-hero__inner` is a flex column, and a
 * flex item establishes a block formatting context, so nothing collapses through
 * it. The summary was carrying an extra 18px above and 18px below its stated
 * margin on every hero on the site, which reads as a spacing bug in this block's
 * own rules while this block's rules are correct.
 *
 * Live's Tailwind preflight zeroes paragraph margins, which is why the reference
 * never has to think about it.
 *
 * Only the outer edges are zeroed. `.cobell-prose > * + *` owns the gap between
 * two paragraphs, and flattening every margin here would take that with it.
 */
.cobell-hero__summary > p:first-child {
	margin-top: 0;
}

.cobell-hero__summary > p:last-child {
	margin-bottom: 0;
}

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

/*
 * SupportHero and ContactHero are the only two heroes in the reference whose
 * summary margin steps — `mt-8 md:mt-10` against a flat `mt-10` on the other nine,
 * which is why the base above is right and this is scoped rather than fixed there.
 * The desktop half was the one carried, so the copy column ran 8px long at mobile
 * and a figure centred against it sat 8px low.
 */
.cobell-hero--full-bleed .cobell-hero__summary {
	margin-top: 2rem;
}

@media ( min-width: 48rem ) {
	.cobell-hero--full-bleed .cobell-hero__summary {
		margin-top: 2.5rem;
	}
}

.cobell-hero--centered .cobell-hero__summary,
.cobell-hero--centered-deep .cobell-hero__summary {
	margin-inline: auto;
}

.cobell-hero--centered .cobell-hero__buttons,
.cobell-hero--centered-deep .cobell-hero__buttons {
	justify-content: center;
}

/*
 * Deadline alert. Optional on the scholarship detail heroes — the field group
 * exposes it everywhere, but it only renders when a cycle label or status is
 * filled in.
 */
.cobell-hero__alert {
	margin-top: 2.5rem;
	padding: 1rem;
	border: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 15%, transparent );
	border-radius: 0.5rem;
	background-color: color-mix( in srgb, var( --wp--preset--color--cream ) 60%, white );
	text-align: left;
}

/*
 * The card draws every state its window can still reach and hides the ones the
 * clock has not selected, so that crossing a boundary is a swap rather than a
 * rendering the script has to build.
 *
 * This rule is not redundant. `[hidden]` is `display: none` in the UA
 * stylesheet, and an author rule beats the UA sheet whatever its specificity —
 * `.cobell-hero__dial` sets `display: flex`, so a hidden dial would stay on
 * screen and both countdowns would show at once. Same trap the ledger's dialog
 * hit from the other side.
 */
.cobell-hero__alert [hidden] {
	display: none;
}

/*
 * Live gives the card 48 of air above it on the split register and 56 on the
 * centred one, stepping from 40 and 48 below md.
 *
 * Base first, then the step. Both selectors carry two classes, so the media
 * query has to come second or it is simply overwritten at every width.
 */
.cobell-hero--centered-deep.cobell-hero--no-figure .cobell-hero__alert {
	margin-top: 3rem;
}

@media ( min-width: 48rem ) {
	.cobell-hero--centered-deep:not( .cobell-hero--no-figure ) .cobell-hero__alert {
		margin-top: 3rem;
	}

	.cobell-hero--centered-deep.cobell-hero--no-figure .cobell-hero__alert {
		margin-top: 3.5rem;
	}
}

/*
 * Status row. One typeset line rather than a filled chip: a leading hairline,
 * the status in terracotta small caps, a quiet middot, then the cycle label in
 * forest. An earlier pass here painted the status as a terracotta pill, which
 * read as a UI badge glued onto the card — live sets the whole row as type.
 *
 * Tracking is 0.4em here and not the 0.45em eyebrow token: this row is longer
 * than a kicker and live winds it in a notch so it fits the 24rem card.
 */
.cobell-hero__alert-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.75rem;
	margin: 0;
	color: var( --wp--preset--color--terracotta );
	font-size: var( --wp--custom--eyebrow-size );
	font-weight: 600;
	letter-spacing: 0.4em;
	text-transform: uppercase;
}

.cobell-hero__alert-row::before {
	content: "";
	width: 1.5rem;
	height: 1px;
	background-color: color-mix( in srgb, var( --wp--preset--color--terracotta ) 60%, transparent );
}

.cobell-hero__alert-sep {
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 30%, transparent );
}

.cobell-hero__alert-cycle {
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 65%, transparent );
	font-weight: 500;
}

.cobell-hero__alert-due,
.cobell-hero__alert-tagline,
.cobell-hero__alert-tagline-label,
.cobell-hero__alert-note {
	margin: 0;
}

.cobell-hero__alert-due {
	margin-top: 1rem;
	font-family: var( --wp--preset--font-family--serif );
	font-size: var( --wp--preset--font-size--x-large );
	line-height: 1.1;
}

/*
 * Tagline register — the vocational scholarship, which has a cycle but no date
 * to count to. Live gives it the same two tiers the dial has: a tiny "Cycle"
 * kicker over a pronounced phrase, so the card keeps its shape across the six
 * pages even where there is no countdown.
 */
.cobell-hero__alert-tagline-label {
	margin-top: 1rem;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 55%, transparent );
	font-size: var( --wp--custom--eyebrow-size );
	letter-spacing: 0.42em;
	text-transform: uppercase;
}

.cobell-hero__alert-tagline {
	margin-top: 0.375rem;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* The note carries deliberate line breaks — the vocational cycle reads as two
   lines on live — so newlines in the field have to survive to the page. */
.cobell-hero__alert-note {
	margin-top: 0.75rem;
	max-width: 34ch;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 60%, transparent );
	font-size: 11px;
	line-height: 1.55;
	white-space: pre-line;
}

/*
 * The reference frames hero imagery as a "printed plate" — tight corners and a
 * soft cast shadow, never a card with heavy chrome. The aspect ratio is fixed
 * so a portrait and a group photo occupy the same slot, and object-position
 * favours the top of the frame so faces survive the crop.
 *
 * The figure owns the ratio, the radius and the overflow clip rather than the
 * image, because the caption plate is positioned against it. An <img> with the
 * ratio on itself has nothing for the plate to pin to.
 */
/* 4px, not 2. The reference's `rounded-sm` is 0.25rem in Tailwind v4 — v3 gave
   that utility 0.125rem, and every frame written against the old value on this
   page measured half of live's radius. */
.cobell-hero__figure {
	position: relative;
	margin: 3rem 0 0;
	border-radius: 0.25rem;
	overflow: hidden;
	box-shadow: 0 18px 40px -12px rgba( 0, 0, 0, 0.18 );
}

.cobell-hero__image {
	display: block;
	width: 100%;
	height: auto;
}

/* 4/5, not 3/4. The reference frames every support-page portrait on the same
   shallower crop as the scholarship detail hero; 3/4 ran the plate 100px tall
   of live and pushed the caption below the fold of the copy beside it. */
.cobell-hero--full-bleed:not( .cobell-hero--no-figure ) .cobell-hero__figure {
	aspect-ratio: 4 / 5;
}

/* The scholarship detail portrait is a shallower crop than the full-bleed
   registers — 4/5, matching the reference's default for this hero. */
.cobell-hero--centered-deep:not( .cobell-hero--no-figure ) .cobell-hero__figure {
	aspect-ratio: 4 / 5;
}

/*
 * The centred split's portrait — /how-to-apply. Live crops it 5/6 stacked and
 * 4/5 beside the copy, and caps the stacked frame at `max-w-sm` so the image
 * does not out-shout the type block above it.
 *
 * 24rem is 384px on the nose here only because the figure carries no padding or
 * border: the theme has no global `box-sizing: border-box`, so `max-width` caps
 * the content box and a frame with chrome would measure wider than live's.
 */
.cobell-hero--centered:not( .cobell-hero--no-figure ) .cobell-hero__figure {
	aspect-ratio: 5 / 6;
	width: 100%;
	max-width: 24rem;
	margin-top: 3.5rem;
	margin-inline: auto;
}

@media ( min-width: 48rem ) {
	.cobell-hero--centered:not( .cobell-hero--no-figure ) .cobell-hero__figure {
		aspect-ratio: 4 / 5;
		max-width: none;
		margin-block: 0;
		margin-inline: 0;
	}
}

/* Only the registers whose figure carries a ratio: the image fills the frame
   there. Anywhere else the figure has no height of its own and a percentage
   would resolve against nothing. */
.cobell-hero--full-bleed:not( .cobell-hero--no-figure ) .cobell-hero__image,
.cobell-hero--centered:not( .cobell-hero--no-figure ) .cobell-hero__image,
.cobell-hero--centered-deep:not( .cobell-hero--no-figure ) .cobell-hero__image,
.cobell-hero--figure-square:not( .cobell-hero--no-figure ) .cobell-hero__image,
.cobell-hero--figure-landscape:not( .cobell-hero--no-figure ) .cobell-hero__image {
	height: 100%;
	object-fit: cover;
	object-position: top;
}

/*
 * The centred split crops from the middle, not the top.
 *
 * These portraits are much taller than any frame they sit in — the scholar shots
 * run about 9:16 against a 4:5 plate — so `cover` fills the width and roughly
 * 250px of image height falls outside the frame at 1440. Which 250px is the whole
 * of what `object-position` decides, and it is not a small difference: from the
 * top the subject sits low and is cut at the chest, from the middle she is
 * centred and the frame reaches her waist. Same scale, same file, same box —
 * which is why this reads as a zoom or a wrong rendition and is neither.
 *
 * The reference's image primitive defaults to `object-center` and only four
 * callers override it to `object-top`: SupportHero and ScholarshipDetailHero,
 * which are the `full-bleed` and `centered-deep` registers above, plus two
 * components outside this block. So the rule above is right for those and wrong
 * only here.
 */
.cobell-hero--centered:not( .cobell-hero--no-figure ) .cobell-hero__image {
	object-position: center;
}

/* The square crop, set by the `image_crop` field. Carries the block's own class
   as well so it outranks the two ratio rules above rather than tying with them
   and relying on source order. */
.cobell-hero.cobell-hero--figure-square:not( .cobell-hero--no-figure ) .cobell-hero__figure {
	aspect-ratio: 1 / 1;
}

/* The landscape crop — /support/counselors, the one support hero whose photograph
   is a group rather than a portrait. Live frames it 6/4 where every other page in
   the cluster keeps the shared 4/5, which on this column is 246px of height. */
.cobell-hero.cobell-hero--figure-landscape:not( .cobell-hero--no-figure ) .cobell-hero__figure {
	aspect-ratio: 3 / 2;
}

/* Live runs the detail-page portrait and the centred split a step lighter than
   the full-bleed heroes — shadow-lg at black/15 rather than the deeper cast. */
.cobell-hero--centered:not( .cobell-hero--no-figure ) .cobell-hero__figure,
.cobell-hero--centered-deep:not( .cobell-hero--no-figure ) .cobell-hero__figure {
	box-shadow:
		0 10px 15px -3px rgba( 0, 0, 0, 0.15 ),
		0 4px 6px -4px rgba( 0, 0, 0, 0.15 );
}

@media ( min-width: 56rem ) {
	.cobell-hero__figure {
		margin-top: 0;
	}

	/* This one stacks until 64rem, so it keeps its gap for one breakpoint more. */
	.cobell-hero--centered-deep:not( .cobell-hero--no-figure ) .cobell-hero__figure {
		margin-top: 3rem;
	}
}

@media ( min-width: 64rem ) {
	.cobell-hero--centered-deep:not( .cobell-hero--no-figure ) .cobell-hero__figure {
		margin-top: 0;
	}
}

/*
 * Surround. The homepage hero: a centred headline with four scholar portraits
 * arranged around it.
 *
 * The tiles are positioned only once there is width for them to sit outside the
 * measure of the headline. Below that they become a single scrolling row under
 * the copy, which is where the reference runs a continuous marquee — an
 * auto-scrolling strip is content moving without a way to pause it, so the row
 * here scrolls only when the reader scrolls it.
 */
.cobell-hero--surround {
	padding-block: var( --wp--preset--spacing--70 );
	overflow: hidden;
	text-align: center;
}

.cobell-hero--surround .cobell-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 52rem;
	margin-inline: auto;
}

.cobell-hero--surround .cobell-hero__eyebrow,
.cobell-hero--surround .cobell-hero__buttons {
	justify-content: center;
}

/*
 * Sized and broken to match the live site rather than the shared display token,
 * which caps at 5.5rem and rendered this headline about a third smaller than
 * the site it replaces. Live is clamp(3rem, 9vw, 10rem) — roughly 8rem at a
 * 1440px viewport. Scoped to this layout so the other page heroes, which use
 * their own smaller clamps, are untouched.
 */
.cobell-hero--surround .cobell-hero__heading {
	font-size: clamp( 3rem, 9vw, 10rem );
	line-height: 0.9;
}

/*
 * Live sets each phrase of the headline on its own line — "A promise." above
 * "Kept." — by making both spans block. The accent is the second phrase, so it
 * is what breaks.
 *
 * The lead is block for the same reason, and for one more: motion.css lifts it
 * a few pixels as it fades in, and transforms are ignored on an inline box.
 */
.cobell-hero--surround .cobell-hero__heading-lead,
.cobell-hero--surround .cobell-hero__heading .cobell-accent {
	display: block;
}

/*
 * The lede is small on live — 0.875rem rising to 1rem, on a 28rem measure —
 * which is what gives the headline its scale. The shared summary style is
 * 1.25rem and made the two compete.
 *
 * Opacity stays at the theme's 80% rather than live's 75%: at this size the
 * text needs 4.5:1, and the difference is not visible.
 */
/*
 * `text-sm md:text-base` — a step at 768, not a ramp. The clamp that used to be
 * here read as equivalent and is not: `clamp(0.875rem, 1vw, 1rem)` only reaches
 * its 1rem ceiling at a 1600px viewport, so at 1440 it resolved to 14.4px
 * against live's 16, and the same 28rem measure then held live's four lines in
 * three. That shortened the copy column by 34px and pulled everything above it
 * down, because the column is centred in the band.
 *
 * The same live-is-a-step-where-we-wrote-a-ramp mistake as the gutter token and
 * the type scale. Measured on both sides at 1440: 448px wide, four lines, 16/26.
 */
.cobell-hero--surround .cobell-hero__summary {
	max-width: 28rem;
	margin-top: 3.5rem;
	margin-inline: auto;
	font-size: 0.875rem;
}

@media ( min-width: 48rem ) {
	.cobell-hero--surround .cobell-hero__summary {
		font-size: 1rem;
	}
}

/*
 * `mt-10`. `.cobell-buttons` sets 1.5rem from the theme stylesheet — the
 * spacing--50 preset, which resolves to 1.5rem rather than the 2.5 the scale
 * reads as — and live puts 40px under this summary. Scoped to the surround hero
 * rather than corrected on `.cobell-buttons`, which every block on the site
 * shares.
 */
.cobell-hero--surround .cobell-hero__buttons {
	margin-top: 2.5rem;
}

/*
 * Below `md` the four tiles are not shown at all — the reference gives every one
 * of them `hidden md:absolute md:block` and runs the marquee instead. This used
 * to be a horizontally scrollable row of the same four with their names beneath,
 * which kept the attribution on screen where live shows none; replaced
 * 2026-08-06 on request, live being the target.
 *
 * The names are still in the markup and still reachable: each tile keeps
 * `role="img"` with the scholar's name and nation as its accessible name, so
 * hiding the list visually is what changes, not what it announces.
 */
.cobell-hero__portraits {
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cobell-hero__portrait-tile {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 0.125rem;
	box-shadow: 0 16px 34px -12px rgba( 0, 0, 0, 0.3 );
}

.cobell-hero__portrait-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	/* Anchored to the top of the frame. Centred, a 3:4 crop of a standing
	   portrait takes the crop out of the head. */
	object-position: top;
}

/*
 * Caption. Static beneath the photo here; the glass overlay is desktop-only and
 * lives in the wide media query below.
 *
 * The split is deliberate. Live reveals the caption on hover and drops the
 * four-tile arrangement entirely on narrow screens, so a phone gets no names at
 * all. There is no hover to wait for on a touch screen and the stacked row has
 * the room, so the names simply stay put — the attribution is a stated client
 * deliverable and this is the one place it would otherwise disappear.
 */
.cobell-hero__portrait-caption {
	display: block;
	margin-top: var( --wp--preset--spacing--20 );
	text-align: center;
}

.cobell-hero__portrait-name {
	display: block;
	font-size: 0.5625rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	line-height: 1.5;
	text-transform: uppercase;
}

.cobell-hero__portrait-tribe {
	display: block;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 85%, transparent );
	font-size: 0.5625rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	line-height: 1.5;
	text-transform: uppercase;
}

/*
 * The surround composition switches at `md`, not `lg`.
 *
 * Every portrait tile in the reference is `hidden md:absolute md:block`, so 768
 * is where live stops stacking and starts placing them around the copy — and
 * `min-h-[100svh]` on its hero section carries no breakpoint at all. This block
 * was keyed at 64rem, which left 768–1023 with the old scrolling row.
 *
 * Below this the marquee stands in for the whole arrangement; the two swap
 * outright, so the query here and the one on `__marquee` must stay in step or a
 * band ends up with both or neither.
 */
@media ( min-width: 48rem ) {
	/*
	 * One screen, header included — live runs this hero at 100svh with the
	 * header inside it. Here the header is a template part above the section, so
	 * its height comes off the top. That height is the logo plus the header's top
	 * padding and nothing else, which is what --wp--custom--header-height records;
	 * chrome.css sizes the logo to hold it true.
	 *
	 * Before this the hero ran past 1000px on a 900px viewport and the lower pair
	 * of portraits fell off the bottom of the screen.
	 */
	/*
	 * A column whose padding reserves the meta foot, which is live's own
	 * structure and the last 46px of vertical difference in this hero.
	 *
	 * Live centres its copy between the bottom of the header and the top of the
	 * meta band — its hero is a flex column holding header, a `flex-1` content
	 * region, and the foot. Ours centred the copy in a symmetrically padded box
	 * instead, so its midpoint was the section's midpoint (558) where live's is
	 * 512.5, and every part of the copy sat 46px low while the foot and the
	 * portraits matched exactly.
	 *
	 * Zero at the top because this section already begins at the header's bottom
	 * edge — the header is a template part above `main` here and inside the hero
	 * on live, so 116px of it is already spent before this box starts. 3.5rem at
	 * the bottom is the foot's own clearance; the foot itself is back in flow, so
	 * it reserves its own height and a third line of it would not need a number
	 * changed anywhere.
	 *
	 * The portraits do not move: they are absolute against the section, whose
	 * height is `min-height` here and owes nothing to this padding.
	 */
	.cobell-section.cobell-hero.cobell-hero--surround {
		padding-block: 0 3.5rem;
	}

	.cobell-hero--surround {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		min-height: calc( 100svh - var( --wp--custom--header-height ) );
	}

	.cobell-hero--surround .cobell-hero__layout {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	/*
	 * Positioned against the section, not the layout — which is the whole of
	 * the sizing difference against live.
	 *
	 * The layout is the shared content wrapper and stops at the 72rem measure,
	 * so a tile sized as a percentage of it came out about a fifth smaller than
	 * the reference's and sat 144px further in from each edge at a 1440px
	 * viewport. Live positions these against a full-bleed hero, so the same
	 * percentages resolve against the viewport. The section is full-bleed here
	 * too and is already a containing block by way of `.cobell-grain`, so
	 * dropping `position: relative` from the layout is the entire fix; the
	 * percentages below are the reference's own.
	 */
	.cobell-hero__portraits {
		position: absolute;
		inset: 0;
		z-index: 1;
		display: block;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.cobell-hero__portrait {
		position: absolute;
		width: 15%;
		min-width: 8rem;
	}

	/*
	 * Placement matched to live, measured off it at 1440x900.
	 *
	 * Live's offsets are percentages of a flexible middle band — its hero is
	 * 100svh with the header at the top and a meta line at the foot, both fixed
	 * height, so a 6% offset inside that band scales with only what is left over.
	 * The result is mostly a constant with a small proportional part, which is
	 * what these two expressions are. They land within a pixel of live at 900,
	 * 1000 and 1080 tall; plain percentages of this section matched at one height
	 * and drifted 35px by the next.
	 *
	 * Below about 900 tall live stops being linear — its own content starts
	 * pushing that middle band — and the lower pair here sits around 36px high of
	 * it at 800, reading as a little more overlap. Closing that would mean
	 * rebuilding live's internal flex column, header and foot included, and the
	 * foot is a meta line this block has no field for.
	 *
	 * The top tier subtracts the header because live measures from the top of the
	 * viewport and this section starts below it. The lower tier needs no such
	 * correction — the section ends where the viewport does.
	 *
	 * The pairs overlap by design and the lower tile rides over the upper one.
	 * That is what the hover nudge below exists to undo.
	 */
	.cobell-hero__portrait--left-top {
		top: calc( 6.1svh + 103px - var( --wp--custom--header-height ) );
		left: 3%;
		rotate: -5deg;
		z-index: 1;
	}

	.cobell-hero__portrait--left-bottom {
		bottom: calc( 13.65svh + 66px );
		left: 7%;
		width: 16%;
		rotate: 4deg;
		z-index: 2;
	}

	.cobell-hero__portrait--right-top {
		top: calc( 6.1svh + 103px - var( --wp--custom--header-height ) );
		right: 3%;
		rotate: 5deg;
		z-index: 1;
	}

	.cobell-hero__portrait--right-bottom {
		bottom: calc( 13.65svh + 66px );
		right: 7%;
		width: 16%;
		rotate: -4deg;
		z-index: 2;
	}

	/*
	 * Caption becomes a scrim over the foot of the photo, revealed on hover or
	 * keyboard focus — live's treatment. The plate is 140% of the caption's
	 * height under a gradient mask, so type sits on solid coverage and the panel
	 * dissolves into the photograph rather than ending on a hard line.
	 *
	 * No backdrop-filter, deliberately. Live pairs the tint with a blur, but
	 * Chromium does not clip a backdrop-filter with the element's own mask: the
	 * blurred backdrop paints as a hard-edged rectangle over the plate's full box
	 * and the fade is left decorating an edge that is still visible. Measured as
	 * a 0.35 luminance step right where the gradient should be resolving. Neither
	 * moving the plate to a real element nor masking a parent instead reaches it,
	 * so the blur goes and the masked tint does the work — which is the smooth
	 * gradient this was meant to be.
	 *
	 * Tint is 80% where live runs 72%, and both lines are full-strength cream
	 * where live drops the nation line to 85%. The backdrop is a photograph, so
	 * the floor is the brightest frame it could sit on: 7.1:1 over pure white,
	 * and better than that everywhere real.
	 */
	.cobell-hero__portrait-caption {
		position: absolute;
		inset-inline: 0;
		bottom: 0;
		/* Lifts the caption over the photograph. Without it the glass never
		   appears — the plate is a pseudo-element behind its own text, and a
		   negative z-index puts it behind the in-flow <img> too. */
		z-index: 1;
		margin: 0;
		padding: 1.5rem 1rem 1rem;
		color: var( --wp--preset--color--cream );
		text-align: left;
		opacity: 0;
		transform: translateY( 0.375rem );
		transition: opacity 300ms ease-out, transform 300ms ease-out;
	}

	.cobell-hero__portrait-caption::before {
		content: "";
		position: absolute;
		inset-inline: 0;
		bottom: 0;
		z-index: -1;
		height: 140%;
		background-color: color-mix( in srgb, var( --wp--preset--color--forest-deep ) 80%, transparent );
		mask-image: linear-gradient( to top, black 70%, transparent );
		-webkit-mask-image: linear-gradient( to top, black 70%, transparent );
	}

	.cobell-hero__portrait-tile:hover .cobell-hero__portrait-caption,
	.cobell-hero__portrait-tile:focus-visible .cobell-hero__portrait-caption {
		opacity: 1;
		transform: none;
	}

	.cobell-hero__portrait-name {
		font-family: var( --wp--preset--font-family--serif );
		font-size: 1rem;
		font-weight: 400;
		letter-spacing: -0.01em;
		line-height: 1.05;
		text-transform: none;
	}

	.cobell-hero__portrait-tribe {
		margin-top: 0.375rem;
		color: var( --wp--preset--color--cream );
		font-size: 0.625rem;
		letter-spacing: 0.32em;
		line-height: 1.3;
	}

	@media ( prefers-reduced-motion: reduce ) {
		.cobell-hero__portrait-caption {
			transform: none;
			transition: none;
		}
	}

	/*
	 * Hover nudge. The lower tile covers part of the upper one, so hovering the
	 * upper tile slides the lower one aside to uncover it — toward the headline
	 * on both sides, which is the direction the layout has room in.
	 *
	 * The travel is a percentage of the nudge wrapper, and the wrapper is the
	 * width of its tile, so the distance tracks the tile at any viewport without
	 * being measured. Live drives this from JavaScript for that measurement; it
	 * is not needed.
	 *
	 * :has() is what lets a tile respond to a sibling being hovered. The tiles
	 * are repeater rows, so an editor can reorder them and a sibling combinator
	 * would follow the DOM rather than the layout.
	 */
	.cobell-hero__portrait-nudge {
		transition: transform 800ms cubic-bezier( 0.65, 0, 0.35, 1 );
	}

	.cobell-hero__portraits:has( .cobell-hero__portrait--left-top .cobell-hero__portrait-tile:hover ) .cobell-hero__portrait--left-bottom .cobell-hero__portrait-nudge {
		transform: translateX( 50% );
	}

	.cobell-hero__portraits:has( .cobell-hero__portrait--right-top .cobell-hero__portrait-tile:hover ) .cobell-hero__portrait--right-bottom .cobell-hero__portrait-nudge {
		transform: translateX( -75% );
	}

	@media ( prefers-reduced-motion: reduce ) {
		.cobell-hero__portrait-nudge {
			transition: none;
		}

		.cobell-hero__portraits:has( .cobell-hero__portrait--left-top .cobell-hero__portrait-tile:hover ) .cobell-hero__portrait--left-bottom .cobell-hero__portrait-nudge,
		.cobell-hero__portraits:has( .cobell-hero__portrait--right-top .cobell-hero__portrait-tile:hover ) .cobell-hero__portrait--right-bottom .cobell-hero__portrait-nudge {
			transform: none;
		}
	}
}

/*
 * Deadline card chrome. Live paints this as a tinted plate a shade deeper than
 * the cream surface, with a hairline and a soft shadow, so the functional
 * metadata sits apart from the hero stanza without becoming a focal moment.
 */
.cobell-hero--centered-deep .cobell-hero__alert {
	/*
	 * The theme has no global border-box, so `max-width` here caps the CONTENT
	 * box: 24rem became 442px on screen once the padding and hairline were added,
	 * against live's 384. It only showed as five pixels of content width today
	 * because the copy is short enough not to reach the cap — the status row wraps
	 * to two lines on live and did not here, which read as an eighteen-pixel
	 * difference in the card's height rather than as a box-model one.
	 */
	box-sizing: border-box;
	/*
	 * Live's card is `w-full max-w-sm`, so it fills its column until the cap.
	 * `.cobell-hero__inner` is a flex column and the card is a flex item, so
	 * without a width it takes its cross size from its own content and stops
	 * wherever the longest line does — 304px against live's 384 on the
	 * vocational card. `max-width` alone cannot show this: the card never
	 * reaches the cap, so both sides report 384 and agree.
	 */
	width: 100%;
	max-width: 24rem;
	padding: 1.5rem 1.75rem;
	border: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 12%, transparent );
	/* 4px — `rounded-sm` is 0.25rem in Tailwind v4. */
	border-radius: 0.25rem;
	background-color: #e8ddc1;
	box-shadow: 0 18px 40px -28px rgba( 20, 32, 26, 0.35 );
	text-align: left;
}

/*
 * Countdown dial.
 *
 * Geometry is the reference's verbatim: a 96px box, a 4px stroke, r=46, so the
 * ring sits flush inside the box. The arc represents a three-day window rather
 * than the whole application period, which is why a countdown 130 days out
 * renders a complete ring — it only drains visibly in the final stretch, and
 * that is the point of it.
 *
 * The svg is rotated a quarter turn so the arc starts at twelve o'clock. That
 * rotation is on the svg and not on the circles, because rotating the circles
 * would take the dasharray origin with them.
 *
 * render.php prints the figures; countdown.js only keeps them current. Nothing
 * here depends on the script having run.
 */
.cobell-hero__dial {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-top: 1.25rem;
}

.cobell-hero__dial-ring {
	position: relative;
	flex: none;
	width: 96px;
	height: 96px;
}

.cobell-hero__dial-ring svg {
	display: block;
	transform: rotate( -90deg );
}

.cobell-hero__dial-track {
	fill: none;
	stroke: color-mix( in srgb, var( --wp--preset--color--forest ) 12%, transparent );
	stroke-width: 4;
}

.cobell-hero__dial-arc {
	fill: none;
	stroke: var( --wp--preset--color--terracotta );
	stroke-width: 4;
	stroke-linecap: round;
}

@media ( prefers-reduced-motion: no-preference ) {
	.cobell-hero__dial-arc {
		transition: stroke-dashoffset 800ms cubic-bezier( 0.16, 1, 0.3, 1 );
	}
}

.cobell-hero__dial-centre {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.cobell-hero__dial-days {
	font-family: var( --wp--preset--font-family--serif );
	font-size: 1.5rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums lining-nums;
	letter-spacing: -0.02em;
	line-height: 1;
}

.cobell-hero__dial-days-label {
	margin-top: 0.125rem;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 55%, transparent );
	font-size: 0.5rem;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
}

.cobell-hero__dial-lines {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	min-width: 0;
}

/*
 * Margins are set per class rather than reset with a `.cobell-hero__dial-lines p`
 * rule, because that selector carries a type as well as a class and so outranks
 * every single-class rule beneath it — the date's own margin-top would never
 * apply.
 */
.cobell-hero__dial-label,
.cobell-hero__dial-value,
.cobell-hero__dial-date {
	margin: 0;
}

.cobell-hero__dial-label {
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 55%, transparent );
	font-size: var( --wp--custom--eyebrow-size );
	letter-spacing: 0.42em;
	text-transform: uppercase;
}

.cobell-hero__dial-value {
	font-size: 0.9375rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums lining-nums;
	letter-spacing: 0.06em;
}

.cobell-hero__dial-unit {
	margin: 0 0.625rem 0 0.25rem;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 55%, transparent );
	font-size: 0.625rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

/* The trailing unit has nothing after it to space away from, and live drops its
   tone a step so the line ends quietly. */
.cobell-hero__dial-unit--quiet {
	margin-right: 0;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 40%, transparent );
}

.cobell-hero__dial-date {
	margin-top: 0.25rem;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 85%, transparent );
	font-size: 0.6875rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.cobell-hero__dial-time {
	display: block;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 70%, transparent );
	font-weight: 500;
}

/*
 * ── The surround hero's meta foot ──
 *
 * Two facts closing the homepage hero. The reference's `px-8 md:px-14` on a
 * centred flex column, and `font-serif text-sm italic leading-tight
 * tracking-wide` at 65% forest on the text itself.
 *
 * Below 64rem the negative margin is how the reference's `pb-12 md:pb-14` is
 * reached without touching the section's own padding; above it the foot is taken
 * out of flow entirely — see the rule in the 64rem block.
 *
 * Live's hero section pads nothing and puts the whole 48/56px on this band. Ours
 * takes `.cobell-section.cobell-hero`'s `clamp(4rem, 8vw, 8rem)` — 115.2px at
 * 1440 — so the band sat 115px clear of the bottom edge against live's 56. That
 * padding cannot simply move: it is the value every one of the four portrait
 * offsets was fitted against, and zeroing it on this side alone would also make
 * the section asymmetric and shift the headline down by half the difference.
 *
 * So the band is pulled back through it instead, and the calc names the same
 * clamp rather than a number, so the two cannot drift at a width nobody measured.
 * `.cobell-hero--surround`'s own `spacing--70` is dead — one class against that
 * rule's two, the tie-and-lose trap again — which is why the effective value here
 * is the clamp and not the 54px the block appears to ask for.
 *
 * `width: 100%` and `box-sizing` are both load-bearing above 64rem, where the
 * section is a flex column: a flex item's cross size is otherwise its content's,
 * so the band shrank to the width of its own text and the inline padding then
 * came off that rather than off the viewport.
 *
 * `z-index` is the reference's `z-20`. The surround hero's lower portrait pair
 * is offset downward by a transform and overhangs this band; the two do not
 * currently collide at any measured width, so this is insurance against a taller
 * foot rather than a fix for something visible today.
 *
 * Not `--wp--custom--gutter`: that clamp bottoms out at 1.5rem against the
 * reference's 2rem here, and this band is centred text rather than a column that
 * has to line up with the sections below it.
 */
.cobell-hero__meta {
	position: relative;
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	padding-inline: 2rem;
	margin-bottom: calc( 3rem - clamp( 4rem, 8vw, 8rem ) );
	text-align: center;
}

@media ( min-width: 48rem ) {
	.cobell-hero__meta {
		padding-inline: 3.5rem;
		margin-bottom: calc( 3.5rem - clamp( 4rem, 8vw, 8rem ) );
	}
}

/* 1.25 leading, which is `leading-tight` — the two rows are one line box apart,
   not one paragraph apart, and the root's 1.6 would set them 6px too far. */
.cobell-hero__meta-text {
	margin: 0;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 65%, transparent );
	font-family: var( --wp--preset--font-family--serif );
	font-size: 0.875rem;
	font-style: italic;
	line-height: 1.25;
	letter-spacing: 0.025em;
}

/*
 * Above 64rem the foot needs no pull: the section's `padding-block: 0 3.5rem`
 * there is its clearance, and being in flow is what lets it reserve its own
 * height — a third line would need no number changed. Below 64rem the section
 * keeps the shared hero clamp, so the negative margin above is what reaches
 * live's `pb-12` without disturbing it.
 *
 * This has to come after the base rule rather than sit with the rest of the
 * surround layout further up this file: both are a single class, so source order
 * is the whole of what decides between them.
 */
@media ( min-width: 64rem ) {
	.cobell-hero__meta {
		margin-bottom: 0;
	}
}

/*
 * The hero's mobile marquee — `HeroMobileMarquee`, `relative overflow-hidden
 * pb-6 md:hidden`, tiles at `w-[36vw]`.
 *
 * Full-bleed by construction rather than by a negative margin: it is rendered
 * outside `.cobell-hero__layout`, so the hero's gutter never applies to it and
 * the strip runs edge to edge exactly as live's does.
 *
 * The query is the complement of the surround block's `min-width: 48rem` above.
 * The two swap outright and must stay in step — at any width where both applied
 * the portraits would be placed *and* the strip drawn.
 */
/*
 * `min-h-[100svh]` carries no breakpoint on the reference — the surround hero is
 * one screen tall at every width, and only the arrangement inside it changes.
 * That was keyed at 64rem here, so on a phone the hero was content-height: 760
 * against live's 808 at a 900px viewport, and the marquee sat directly under the
 * copy instead of being pushed to the foot of the screen.
 *
 * 5.75rem is this header at mobile — 2rem of top padding plus the 5rem logo,
 * less the 20px it is pulled up by. It cannot use `--wp--custom--header-height`,
 * which records the 7.25rem desktop value; the two are the same arithmetic on
 * different lengths, and the token is consumed by the 48rem block above.
 */
/*
 * Scoped below `md` rather than left unconditional, and that is not cosmetic:
 * this file appends after the 48rem block, so an unbounded rule at the same
 * specificity wins at *every* width on source order alone. Written open it put
 * the mobile header's 92px into the desktop subtraction and stood the hero 24px
 * tall at 768 and 1440, which had both been exact.
 */
@media ( max-width: 47.9375rem ) {
	.cobell-hero--surround {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		min-height: calc( 100svh - 5.75rem );
	}

	/*
	 * The gutter moves off the section and onto the parts, which is live's own
	 * structure: its hero section carries no padding at all, its copy column is
	 * `px-6` and its meta foot `px-8`. That is what lets the marquee between them
	 * bleed to both screen edges — it is full-bleed by not being inside anything
	 * padded, rather than by a negative margin.
	 */
	.cobell-section.cobell-hero.cobell-hero--surround {
		padding-block: 0;
		padding-inline: 0;
	}

	/*
	 * `box-sizing` on both, and it is not optional: the theme has no global
	 * border-box, so `width: 100%` plus an inline padding measures 100% + the
	 * padding and overflows by exactly that much. `.cobell-grain` sets
	 * `overflow: hidden` on this section, so the copy was clipped rather than
	 * scrolled — the document reported no horizontal overflow at all and the
	 * only symptom was a sentence running off the right edge.
	 */
	/*
	 * And the foot's clearance is live's `pb-12` outright, not the base rule's
	 * `calc( 3rem - <the section's own bottom padding> )`. That subtraction
	 * exists to reach 48px through a section that is already padded, and the
	 * rule above zeroes this section's padding at this width — so it was
	 * cancelling a length that is not there and pulling the foot 16px *up*
	 * into the marquee.
	 *
	 * The foot is a flow item in a `min-height` column, so those 64px came off
	 * the copy region rather than off the hero: the copy sat 32px below live's
	 * at every phone width, and the foot itself ran 16px past the fold, which
	 * is the only place the pull was visible at all.
	 */
	.cobell-hero--surround .cobell-hero__meta {
		box-sizing: border-box;
		padding-inline: 2rem;
		margin-bottom: 3rem;
	}

	.cobell-hero--surround .cobell-hero__layout {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 100%;
		/* `px-6 py-10` on the reference's copy column, against `md:px-12
		   md:py-16` above. */
		padding-block: 2.5rem;
		padding-inline: 1.5rem;
	}
}

.cobell-hero__marquee {
	display: none;
}

@media ( max-width: 47.9375rem ) {
	.cobell-hero--surround .cobell-hero__marquee {
		display: block;
		padding-bottom: 1.5rem;
	}
}

.cobell-hero__marquee-tile {
	width: 36vw;
}

/*
 * The surround hero's quiet CTA is not the `--ghost` treatment.
 *
 * `.btn--ghost` is the 11px uppercase rule-underlined link live uses elsewhere,
 * and this hero's second action is a different thing entirely:
 * `text-sm font-medium text-[#26352a]/80` with a trailing arrow — 14px, sentence
 * case, no tracking, no underline. Ours read "MEET ELOUISE COBELL" against
 * live's "Meet Elouise Cobell", which is the same words in a different voice.
 *
 * Scoped to this hero rather than added as a fourth `.btn--` variant: it maps
 * onto one placement, and the button vocabulary note in style.css already warns
 * that this site has fewer CTA treatments than it first appears.
 */
.cobell-hero--surround .btn--ghost {
	padding: 0;
	border-bottom: 0;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 80%, transparent );
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
}

.cobell-hero--surround .btn--ghost:hover,
.cobell-hero--surround .btn--ghost:focus-visible {
	color: var( --wp--preset--color--forest );
}