/* robz-child — element library and supplemental CSS.
   ------------------------------------------------------------------------
   The design system (palette, type scale, spacing, radius, duration) lives in
   theme.json. This file builds the element library on top of those tokens: the
   things theme.json genuinely can't express — states (:hover/:active/:focus/
   :disabled), form controls, table rules, empty states, and motion.

   Rules of the road:
   - Never hard-code a colour, size, radius or duration. Everything reads from
     a --wp--preset--* or --wp--custom--* token so there is one place to change.
   - Elevation is expressed with 1px hairlines and space. There are no shadows
     in this design; don't add one.
   - The uppercase-tracked display idiom (nav, buttons, eyebrows, pagination,
     table headers) is 0.1em everywhere. It used to be four different values.
   ======================================================================== */

/* ── Foundations ─────────────────────────────────────────────────────────── */

/* Motion. Every colour/border/background change in the library animates on the
   same short curve so nothing snaps, and nothing is slow enough to feel laggy.
   The reduced-motion block at the bottom of this file switches it all off. */
:where(a, button, input, textarea, select, .wp-block-button__link, .wp-block-navigation-item__content, .wp-block-social-link, tbody tr) {
	transition:
		color var(--wp--custom--duration--fast) var(--wp--custom--easing),
		background-color var(--wp--custom--duration--fast) var(--wp--custom--easing),
		border-color var(--wp--custom--duration--fast) var(--wp--custom--easing),
		text-decoration-color var(--wp--custom--duration--fast) var(--wp--custom--easing),
		opacity var(--wp--custom--duration--fast) var(--wp--custom--easing);
}

::selection {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* Never break a heading mid-word; let the hero "Rob Zimmerman" wrap cleanly
   instead of "ZIMMERMA / N" on small screens. */
h1,
h2,
.wp-block-heading,
.wp-block-site-title {
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
	text-wrap: balance;
}
/* ^ .wp-block-site-title is here because it renders at level 0 — a <p> — so
   no heading selector reaches it; it needs the same whole-word, balanced
   wrapping as the hero it sits above. */

/* Vertical rhythm. blockGap spaces every sibling equally, so a heading sat as
   far from the section it opens as from the paragraph it follows — nothing
   grouped. Headings take more space above than below, which is what makes a
   page read as sections rather than an undifferentiated stack. */
.wp-block-post-content > h2,
.wp-block-post-content > h3 {
	margin-block-start: var(--wp--preset--spacing--medium);
}

.wp-block-post-content > h4,
.wp-block-post-content > h5,
.wp-block-post-content > h6 {
	margin-block-start: var(--wp--preset--spacing--small-medium);
}

/* Page frame. Short pages (Contact) used to end with the dark footer band
   floating mid-viewport over raw white — broken-looking between two ink
   surfaces. The site column becomes a flex column at viewport height and the
   footer pins to the bottom, arriving early only when content runs long. */
html {
	height: 100%;
}

body {
	min-height: 100%;
}

body > .wp-site-blocks {
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* Hold prose to a comfortable measure. contentSize (720px) is the column; at
   17px that ran 85–95 characters, well past the readable range.

   ...and keep it flush left. Core's constrained layout sets
   `margin-left/right: auto !important` on every direct child, so the moment a
   child is capped narrower than the column it stops being left-aligned and
   floats to the centre of it. That put four different left edges on every
   page — h1, h2 and the row lists flush at 0; body copy at 48px; the lede at
   79px; Home's kicker at 140px — with each block of prose hanging off-centre
   under a heading and a hairline that stayed put. The !important is the only
   thing that beats core's own, and is deliberate in the same way as the other
   core overrides in this file. */
.wp-block-post-content > :where(p, ul, ol, blockquote, h2, h3, h4, h5, h6),
.wp-block-term-description {
	max-width: var(--wp--custom--measure);
	margin-inline: 0 !important;
}

/* The lede caps narrower than the measure, and it appears as a direct child of
   `main` on templates (the 404) where the post-content flush-left rule above
   can't reach — so it carries its own margin-inline, per the rule that every
   capped post-content/main child must, or core centres it. */
.rz-lede {
	max-width: var(--wp--custom--measure-lede);
	margin-inline: 0 !important;
}

/* ── Links ───────────────────────────────────────────────────────────────── */

/* One rule, applied consistently: prose links are underlined at rest (the
   affordance shouldn't depend on hovering), UI links are not. Previously prose
   links had no underline until hover while pagination and footer links carried
   the browser default — the same element reading two ways on one page. */
:where(a) {
	text-decoration: none;
}

.wp-block-post-content :where(p, li, dd, figcaption, blockquote) a,
.wp-block-term-description a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
	text-underline-offset: 0.16em;
}

.wp-block-post-content :where(p, li, dd, figcaption, blockquote) a:hover,
.wp-block-post-content :where(p, li, dd, figcaption, blockquote) a:focus-visible,
.wp-block-term-description a:hover,
.wp-block-term-description a:focus-visible {
	text-decoration-thickness: 2px;
	text-decoration-color: currentColor;
}

/* Mark links that leave the site with a subtle external-link affix, so
   external destinations (e.g. trimmiersports.com, stampede-hockey.com) are
   signalled. The `/ ""` alt-text syntax gives the glyph an empty accessible
   name, so it renders visually without a screen reader announcing "north east
   arrow" in the middle of a sentence. */
.wp-block-post-content a[href^="http"]:not([href*="//rob-zimmerman.com"]):not([href*="//www.rob-zimmerman.com"])::after {
	content: " \2197" / "";
	font-size: 0.85em;
	opacity: 0.7;
	margin-left: 0.15em;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

/* Three variants, one geometry. Primary comes from theme.json's button element
   (accent fill). Secondary and Destructive are registered as block styles in
   functions.php so they're pickable in the editor; core's built-in "Outline"
   is mapped onto Secondary so the two can't drift apart.

   Every variant shares height, radius, type and transition — only colour
   changes. All four states are defined for each. */

.wp-block-button__link,
.wp-block-search__button,
button,
input[type="submit"],
input[type="button"] {
	border: 1px solid transparent;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	border-radius: var(--wp--custom--radius--pill);
}

/* A raw <button> or submit input (plugin markup rather than a block) gets the
   pill geometry above but would otherwise keep the browser's grey fill and
   stock padding — half-styled. Unclassed ones read as primary; anything
   carrying a class is assumed to bring its own treatment. */
button:not([class]),
input[type="submit"]:not([class]),
input[type="button"]:not([class]) {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	padding: var(--wp--custom--button--padding-y) var(--wp--custom--button--padding-x);
}

button:not([class]):hover,
button:not([class]):focus-visible,
input[type="submit"]:not([class]):hover,
input[type="submit"]:not([class]):focus-visible,
input[type="button"]:not([class]):hover,
input[type="button"]:not([class]):focus-visible {
	background-color: var(--wp--preset--color--accent-hover);
	color: var(--wp--preset--color--base);
}

/* Primary — active/pressed sits one step darker than hover so a press reads. */
.wp-block-button__link:active {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Secondary — hairline box, ink label. Core's .is-style-outline ships its own
   2px currentColor border and its own padding; both are overridden here. */
.wp-block-button.is-style-secondary .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--border-strong);
	padding: var(--wp--custom--button--padding-y) var(--wp--custom--button--padding-x);
}

.wp-block-button.is-style-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-secondary .wp-block-button__link:focus,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--subtle);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-secondary .wp-block-button__link:active,
.wp-block-button.is-style-outline .wp-block-button__link:active {
	background-color: var(--wp--preset--color--border);
}

/* Destructive — same geometry, danger fill. */
.wp-block-button.is-style-danger .wp-block-button__link {
	background-color: var(--wp--preset--color--danger);
	color: var(--wp--preset--color--base);
	border-color: transparent;
}

.wp-block-button.is-style-danger .wp-block-button__link:hover,
.wp-block-button.is-style-danger .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--danger-hover);
	color: var(--wp--preset--color--base);
}

/* Press goes to ink, same as the primary and search buttons — every variant
   shares one press language. (This used to equal the hover, so a danger press
   didn't read.) */
.wp-block-button.is-style-danger .wp-block-button__link:active {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Disabled — muted on hairline, still 4.81:1 so it stays readable rather than
   disappearing. Pointer events off, no hover response. The first selector
   matches the variant selectors' specificity (and follows them in source), so
   a disabled Secondary or Destructive button greys out instead of keeping its
   variant colours with only the pointer disabled. */
.wp-block-button .wp-block-button__link:is([disabled], [aria-disabled="true"]),
.wp-block-button__link[disabled],
.wp-block-button__link[aria-disabled="true"],
button[disabled],
input[type="submit"][disabled],
.wp-block-search .wp-block-search__button[disabled],
.wp-block-search__button[disabled] {
	background-color: var(--wp--preset--color--border);
	border-color: transparent;
	color: var(--wp--preset--color--secondary);
	cursor: not-allowed;
	pointer-events: none;
}

/* ── Form controls ───────────────────────────────────────────────────────── */

/* One height, one padding, one border, one radius — for the search block and
   for anything added later (a Jetpack contact form, a comment form). Core's
   search input previously rendered with a #949494 border that appears nowhere
   in the palette, square corners against a rounded button, and the browser's
   own focus ring. */
.wp-block-search__input,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
textarea,
select {
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--pill);
	padding: 0 var(--wp--custom--control--padding-x);
	height: var(--wp--custom--control--height);
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

textarea {
	border-radius: var(--wp--custom--radius--lg);
	height: auto;
	min-height: calc(var(--wp--custom--control--height) * 2.5);
	padding: 0.7rem var(--wp--custom--control--padding-x);
	resize: vertical;
}

/* Checkboxes and radios keep their native shape — which is the accessible,
   familiar one — but not the browser's default blue. accent-color is the one
   property that retints them without rebuilding the control. They also get the
   theme's focus ring and a disabled state, so they're not the one control left
   on browser defaults. */
input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--wp--preset--color--accent);
	width: 1.05rem;
	height: 1.05rem;
	vertical-align: -0.15em;
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--sm);
}

input[type="checkbox"][disabled],
input[type="radio"][disabled] {
	cursor: not-allowed;
	opacity: 0.5;
}

:where(input, textarea, select)::placeholder {
	color: var(--wp--preset--color--secondary);
	opacity: 1;
}

:where(input, textarea, select):hover {
	border-color: var(--wp--preset--color--secondary);
}

/* Focus: the theme's ring, not the browser's — matching every other focusable
   element on the site. */
.wp-block-search .wp-block-search__input:focus,
:where(input, textarea, select):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--accent);
}

:where(input, textarea, select)[disabled] {
	background-color: var(--wp--preset--color--subtle);
	border-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--secondary);
	cursor: not-allowed;
}

/* Labels sit above the field, in the small tracked display idiom. */
.wp-block-search__label,
.rz-label,
form label {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--secondary);
	margin-bottom: var(--wp--preset--spacing--x-small);
}

/* Search block: field and button share a row and a baseline. */
.wp-block-search__inside-wrapper {
	gap: var(--wp--preset--spacing--x-small);
	align-items: stretch;
}

/* The input is a flex child; min-width:0 lets it shrink beside the button
   instead of forcing the row wider than its container. */
.wp-block-search .wp-block-search__input {
	min-width: 0;
}

.wp-block-search .wp-block-search__button {
	height: var(--wp--custom--control--height);
	padding: 0 var(--wp--custom--button--padding-x);
	margin: 0;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	border-color: transparent;
	white-space: nowrap;
}

.wp-block-search .wp-block-search__button:hover,
.wp-block-search .wp-block-search__button:focus {
	background-color: var(--wp--preset--color--accent-hover);
	color: var(--wp--preset--color--base);
}

.wp-block-search .wp-block-search__button:active {
	background-color: var(--wp--preset--color--contrast);
}

/* Inline validation. A red border alone says "wrong" without saying what — so
   an invalid field pairs the danger edge with a message that has room for an
   actual sentence. Applied via aria-invalid, which is what assistive tech
   reads too. */
:where(input, textarea, select)[aria-invalid="true"] {
	border-color: var(--wp--preset--color--danger);
}

:where(input, textarea, select)[aria-invalid="true"]:focus-visible {
	outline-color: var(--wp--preset--color--danger);
	border-color: var(--wp--preset--color--danger);
}

.rz-field-error {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	color: var(--wp--preset--color--danger);
	margin-top: var(--wp--preset--spacing--x-small);
}

.rz-field-hint {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	color: var(--wp--preset--color--secondary);
	margin-top: var(--wp--preset--spacing--x-small);
}

/* ── Feedback: notices, empty states, loading ────────────────────────────── */

/* One notice shape, three tones. Left rule carries the tone so the fill stays
   quiet — consistent with a design whose only structural device is a rule. */
.rz-notice {
	padding: var(--wp--preset--spacing--small) var(--wp--preset--spacing--small-medium);
	background-color: var(--wp--preset--color--subtle);
	border-left: 2px solid var(--wp--preset--color--border-strong);
	border-radius: 0 var(--wp--custom--radius--md) var(--wp--custom--radius--md) 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}

.rz-notice--success {
	border-left-color: var(--wp--preset--color--success);
	color: var(--wp--preset--color--success);
}

.rz-notice--error {
	border-left-color: var(--wp--preset--color--danger);
	color: var(--wp--preset--color--danger);
}

/* Record stamps — authored-content hook (.rz-stamp on an inline span or a
   paragraph). A small bordered chip in the tracked-label idiom for archival
   marks: "EST. 1996", "REVIVED 2024", "FIVE SEASONS". Ink by default; the
   --record variant borrows the danger red for the rare ceremonial mark —
   sparingly, one or two per page, never on anything interactive (red stays
   reserved for danger states there). */
.rz-stamp {
	display: inline-block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--sm);
	padding: 0.35em 0.7em;
}

.rz-stamp--record {
	color: var(--wp--preset--color--danger);
	border-color: var(--wp--preset--color--danger);
}

/* Empty states. The populated list has a frame — hairline, generous padding,
   muted text. Its empty state used to be a bare unstyled paragraph, so the
   page lost its structure at exactly the moment it had least to show. */
.wp-block-query-no-results {
	padding-block: var(--wp--preset--spacing--medium-large);
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.wp-block-query-no-results p {
	color: var(--wp--preset--color--secondary);
	max-width: var(--wp--custom--measure);
	margin: 0;
}

/* Loading. Nothing on the site loads asynchronously today; this is the shape
   to reach for when something does, so a spinner never arrives unstyled. */
.rz-loading {
	background-color: var(--wp--preset--color--subtle);
	border-radius: var(--wp--custom--radius--md);
	color: transparent;
	animation: rz-pulse 1.4s ease-in-out infinite;
}

@keyframes rz-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.55; }
}

/* ── Editorial page heroes ─────────────────────────────────────────────────
   The page content (Home, About, Contact) is authored with semantic hooks:
   .rz-kicker (eyebrow above the title), .rz-lede (lead paragraph), and
   label/.rz-note rows in lists. page.html no longer prints wp:post-title, so
   the in-content <h1> is the hero — these rules give it the bold treatment. */

/* Kicker / eyebrow — small, uppercase, tracked, accent. Also used by the
   post meta on single.html (.rz-postmeta). */
.rz-kicker,
.rz-postmeta {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	line-height: 1.2;
}

.rz-kicker {
	margin: 0 0 var(--wp--preset--spacing--x-small);
	color: var(--wp--preset--color--accent);
}

/* Post meta reads as a quieter eyebrow above the title. */
.rz-postmeta {
	color: var(--wp--preset--color--secondary);
}

/* Category links in the meta row inherit the muted colour but keep a hover —
   previously `color: inherit` killed the hover response entirely. */
.rz-postmeta a {
	color: inherit;
	text-decoration: none;
}

.rz-postmeta a:hover,
.rz-postmeta a:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* Lede — the one large intro paragraph under the hero title. */
.rz-lede {
	font-size: var(--wp--preset--font-size--lede);
	line-height: 1.45;
	font-weight: 400;
	color: var(--wp--preset--color--contrast);
	margin-top: var(--wp--preset--spacing--small);
}

/* A link inside the lede (Contact's mailto) keeps the prose underline but at
   hairline weight with the standing offset — the default underline at lede
   size read heavier than the section headings elsewhere. */
.rz-lede a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}

/* Bind the hero together. blockGap spaces siblings with a selector that
   out-ranks a bare class, so the kicker's margin-bottom and the lede's
   margin-top above were silently losing to the uniform 1.5rem gap — the
   eyebrow floated as far from its title as any two paragraphs. These carry
   enough specificity to win, on pages (post-content) and templates (main,
   e.g. the 404) alike. */
:is(.wp-block-post-content, main) > :is(.rz-kicker, .rz-postmeta) + :is(h1, h2, h3) {
	margin-block-start: var(--wp--preset--spacing--x-small);
}

/* The same eyebrow→title bind inside a post-list row, where the eyebrow is the
   date. One gap for the idiom everywhere: x-small, whether the eyebrow is a
   kicker, single.html's meta row, or an entry date. */
.rz-entry > .rz-postmeta + .wp-block-post-title {
	margin-block-start: var(--wp--preset--spacing--x-small);
}

:is(.wp-block-post-content, main) > :is(h1, h2) + .rz-lede {
	margin-block-start: var(--wp--preset--spacing--small);
}

/* ── Index rows ────────────────────────────────────────────────────────────
   List items that pair a label (a link, or .rz-rowt) with a .rz-note
   descriptor (Home's section list, About's "Work" list) render as clean
   editorial rows with hairline dividers instead of bullets. */
.wp-block-list:has(.rz-note) {
	list-style: none;
	padding-left: 0;
	margin-top: var(--wp--preset--spacing--medium);
	max-width: none;
}

/* Two columns: label left, note right — and the note is LEFT-aligned within
   its column. The old flex/space-between treatment right-aligned the note,
   which was fine for three-word descriptors and unreadable the moment the
   content put full sentences in them (multi-line ragged-left text). A fixed
   column start gives wrapped notes a straight left edge; short and long notes
   now share one alignment line down the page. */
.wp-block-list li:has(.rz-note) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	column-gap: var(--wp--preset--spacing--small-medium);
	row-gap: var(--wp--preset--spacing--x-small);
	align-items: baseline;
	padding: 0.95rem 0;
	border-top: 1px solid var(--wp--preset--color--border);
	position: relative;
	counter-increment: rz-row;
	transition: background-color var(--wp--custom--duration--fast) var(--wp--custom--easing);
}

/* Ledger line numbers. A ledger numbers its lines; each row list restarts its
   own count, so Home's index reads 01–03 and About's Work rows 01–04. The
   number rides inside the label so it stacks and wraps with it, and the
   alt-text syntax keeps screen readers from announcing it mid-link. */
.wp-block-list:has(.rz-note) {
	counter-reset: rz-row;
}

.wp-block-list li:has(.rz-note) > :is(a, .rz-rowt)::before {
	content: counter(rz-row, decimal-leading-zero) / "";
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
	color: var(--wp--preset--color--secondary);
	margin-right: 0.7em;
}

/* A ledger numbers a sequence; one row is not a sequence. Ventures' Holdings
   list has a single entry, and numbering it "01" between two hairlines read as
   a stub table waiting to be filled rather than an index. The row keeps its
   rules and its label — it just stops counting. */
.wp-block-list li:has(.rz-note):only-child > :is(a, .rz-rowt)::before {
	content: none;
}

/* Rows that navigate are clickable end to end — the label alone was a thin
   target — and answer the pointer the same way a table row does. */
.wp-block-list li:has(.rz-note) > a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.wp-block-list li:has(.rz-note):has(> a):hover {
	background-color: var(--wp--preset--color--subtle);
}

/* Rows are label + note pairs. The note pins to the LAST column (-2/-1), so
   the same declaration is correct in the two-column row and in every stacked
   single-column context — no per-context override needed. A third inline
   element in a row will auto-place beside the label and push the note down a
   row; rows are authored as pairs, so keep them that way. */
.wp-block-list li:has(.rz-note) > .rz-note {
	grid-column: -2 / -1;
}

.wp-block-list li:has(.rz-note):last-child {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* .rz-rowt is authored as an <h3> on About, so the organisation names carry the
   document outline (h1 page → h2 section → h3 organisation) instead of leaving
   the row labels as unlabelled spans. That makes the heading margins core gives
   an h3 load-bearing: left alone they break the icon rows' `align-items: start`
   and open a gap above every label. Zero them here — the row grid owns the
   spacing. Rows still labelled with a span are unaffected. */
.rz-rowt,
.wp-block-list li:has(.rz-note) > a {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: -0.015em;
	margin: 0;
}

/* Row links read as ink, not accent — otherwise the homepage index becomes a
   wall of blue. The accent is the hover. */
.wp-block-list li:has(.rz-note) > a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.wp-block-list li:has(.rz-note) > a:hover,
.wp-block-list li:has(.rz-note) > a:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* The note used to drop size, weight, family AND colour against its label —
   four steps at once, reading as caption-grade metadata. Body size with the
   muted colour keeps the hierarchy while letting the descriptions be read. */
.rz-note {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--medium);
	max-width: var(--wp--custom--measure);
	line-height: 1.5;
}

/* A second, indented line nested inside a row's description — dates and
   position/degree, set apart from the company/school description above it.
   About's Career and Education rows use this for [Start]–[Finish] | [Position].

   The role is a sub-heading, not a caption: at caption size in the note's muted
   grey it read as a trailing footnote after a paragraph. Ink and 600 carry the
   hierarchy instead of a fourth type step — it shares the note's size and
   separates on weight and colour, leaving the company name the only larger
   thing in the row. The colour is explicit because .rz-note sets `secondary`
   and this would otherwise inherit it. */
.rz-note .rz-meta {
	display: block;
	margin-block-start: var(--wp--preset--spacing--x-small);
	padding-inline-start: var(--wp--preset--spacing--small);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

/* The row descriptions step down one notch on wide screens, where the column
   is long enough to carry a smaller line comfortably; phones keep the base
   size. This is the one type step in the theme that needs a breakpoint. The
   headings do the same thing with no CSS at all — their presets are fluid, so
   lowering a `fluid.max` in theme.json shrinks wide screens and leaves narrow
   ones alone — but a `clamp()` cannot ramp *downward*, so a body size that
   should shrink as the viewport grows has to be switched, not interpolated.

   The `:root` prefix is specificity, not decoration: `.rz-note .rz-meta` above
   is (0,2,0) and would otherwise win outright. */
@media (min-width: 782px) {
	:root .rz-note,
	:root .rz-note .rz-meta {
		font-size: var(--wp--preset--font-size--medium-small);
	}
}

/* Rows stack on narrow screens: below 782px the two-column row leaves a
   display-size label and its note ~250px each, both too tight to read. The
   note keeps its -2/-1 pin — correct in one column as in two. (The .98 closes
   the fractional-viewport gap against the `min-width: 782px` note query above:
   at exactly 781.5px neither a 781px max nor a 782px min would match.)

   The `.rz-index` grouped-index component that used to live here was retired
   2026-08-24: it never gained a consumer, and its label rule demoted an h2 by
   two presets — a trap for the first page that adopted it beside a real h2. */
@media (max-width: 781.98px) {
	.wp-block-list li:has(.rz-note) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── Icon rows ─────────────────────────────────────────────────────────────
   Opt-in row-list variant (`rz-iconrows` on the list, authored in content):
   the ledger numbers give way to a square org logo per row — About's Career
   and Education lists. The icon column only engages on rows that actually
   contain an `img.rz-rowicon`, so a list can carry the class before its logos
   are wired in.

   The labels do NOT step down a size here. They used to (medium-large), which
   put the organisation name within a pixel of the `medium` description beneath
   it — so an `h3` that carries the page outline read as body text. They now
   take the base row label size (`large`), landing a clear step under the
   section `h2` above and a clear step over the note below. */
.wp-block-list.rz-iconrows li:has(.rz-note) > :is(a, .rz-rowt)::before {
	content: none;
}

/* Logo | text. Two columns, not three: the logo tile, then a single text
   column carrying the organisation name with its description stacked
   underneath — the shape a résumé entry takes, and the shape the phone rule
   below has always taken.

   The three-column masthead this replaces (logo | name | note) stood the name
   and the description side by side, which a 720px content column cannot afford
   once the names run to "The University of Texas at Austin" and the
   descriptions to three sentences: each got roughly 300px. Worse, the name was
   the one item in the row whose column was never stated — it landed wherever
   auto-placement dropped it between the logo and the note's `-2 / -1` pin — and
   live it collapsed to a sliver, wrapping the organisation names one word per
   line and spilling them out past the right edge of the page. Every track here
   is stated instead: the logo track is `auto` around a 44px image and both text
   items sit in one `minmax(0, 1fr)`, so there is no third track left to starve
   and nothing positioned by inference.

   The note needs no rule of its own — its base `-2 / -1` pin (see "Index rows"
   above) resolves to column 2 here, and because the label already holds row 1
   of that column the description falls to the row beneath it.

   Top-aligned, not centered: a description plus its indented meta line runs
   several lines tall, and a centered logo would drift away from the heading it
   belongs beside. */
.wp-block-list.rz-iconrows li:has(.rz-rowicon) {
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--small-medium);
	row-gap: var(--wp--preset--spacing--x-small);
	align-items: start;
}

.wp-block-list.rz-iconrows li:has(.rz-rowicon) > :is(a, .rz-rowt) {
	grid-column: 2;
}

/* Square, hairline-ringed, on the white ground — same treatment as the
   footer flag, scaled to the touch-target size. `contain` keeps any logo
   aspect honest inside the square. */
.rz-rowicon {
	width: var(--wp--custom--rowicon--size);
	height: var(--wp--custom--rowicon--size);
	object-fit: contain;
	box-shadow: 0 0 0 1px var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--base);
}

/* Below 782px the note gives up the text column and spans the whole row,
   leaving the logo and the organisation name paired on the line above it.

   The note spanning 1/-1 is the point of the layout, not a detail. A full
   single-column stack (icon, then name, then note, each on its own line) broke
   the pairing and made every row four loose blocks. Leaving the note in the
   text column costs 68px of every description — icon plus column gap — which
   is 9% of the desktop column and invisible, but 19% of a 412px phone: it
   would start About's Career and Education text well right of the h1, h2 and
   every paragraph on the same page. Spanning both columns pairs the name with
   its logo AND puts the description back on the page's own left edge, which is
   why the -2/-1 pin has to be overridden here: in this two-column grid it
   otherwise resolves to column 2. The row-gap above already spaces it. */
@media (max-width: 781.98px) {
	/* Centred against the logo tile, not top-aligned: this row is now a single
	   line of text beside a 44px square, so `align-items: start` — which exists
	   for the several-lines-tall note on desktop — would hang the name off the
	   tile's top edge. */
	.wp-block-list.rz-iconrows li:has(.rz-rowicon) > :is(a, .rz-rowt) {
		align-self: center;
	}

	.wp-block-list.rz-iconrows li:has(.rz-rowicon) > .rz-note {
		grid-column: 1 / -1;
	}
}

/* ── Post lists (index / archive / search) ─────────────────────────────────
   Each entry is a .rz-entry row: a tracked date eyebrow, a display title, and
   a measure-constrained excerpt, separated by hairline rules. */
.rz-entry {
	padding-block: var(--wp--preset--spacing--medium-large);
	border-top: 1px solid var(--wp--preset--color--border);
}

/* The closing rule belongs to the last post in the LIST. Each entry is the
   only child of its <li>, so a bare .rz-entry:last-child matched every row
   and drew a doubled rule at each boundary. */
.wp-block-post:last-child .rz-entry {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Keep list titles ink and weighty; reserve accent for the hover and for
   inline prose links. */
.wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.wp-block-post-title a:hover,
.wp-block-post-title a:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* margin-inline is load-bearing: .rz-entry is a constrained group, so core
   centres any child capped narrower than the column — the excerpt sat ~80px
   right of its own title without it. */
.rz-excerpt {
	max-width: var(--wp--custom--measure);
	margin-inline: 0 !important;
	color: var(--wp--preset--color--secondary);
}

/* Pagination reads as a small tracked display row under the list's own
   closing rule — it used to bring a second rule and 3rem of margin, framing
   ~6rem of dead space and a double hairline at the end of every list. */
.wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--small);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.wp-block-query-pagination a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.wp-block-query-pagination a:hover,
.wp-block-query-pagination a:focus-visible {
	color: var(--wp--preset--color--accent-hover);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

/* The current page is the destination, so it reads as ink — it used to be the
   faintest item in the row, which inverted the emphasis. */
.wp-block-query-pagination .page-numbers.current {
	color: var(--wp--preset--color--contrast);
}

.wp-block-query-pagination .page-numbers.dots {
	color: var(--wp--preset--color--secondary);
}

/* Previous/next on single posts sat flush against their own rule. */
.wp-block-post-navigation-link {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* ── Core content blocks ──────────────────────────────────────────────────
   Left alone, these inherit currentColor — which is ink — so a table or an
   <hr> would render as the darkest-ruled element on a site built entirely
   from faint hairlines. */

/* Tables. Comfortable row height, aligned columns, a real header treatment,
   row hover, and tabular figures so numbers line up. */
.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	font-variant-numeric: tabular-nums;
}

.wp-block-table table th,
.wp-block-table table td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: 0.75rem 0.9rem;
	text-align: left;
	vertical-align: top;
}

.wp-block-table table thead th {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--secondary);
	border-bottom: 1px solid var(--wp--preset--color--border-strong);
}

.wp-block-table table tbody tr:hover {
	background-color: var(--wp--preset--color--subtle);
}

.wp-block-table figcaption {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
	margin-top: var(--wp--preset--spacing--x-small);
}

/* Separator — hairline, not ink. */
hr.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--border);
	opacity: 1;
	margin-block: var(--wp--preset--spacing--medium);
}

/* Ledger rule — the double-entry bookkeeping cue: a single heavier ink rule,
   registered as a separator style in functions.php. For closing a hero or a
   major section; the 1px hairline stays the default everywhere else. Neither
   style sets max-width — a separator dropped straight into a template's
   constrained `main` must stop at the content column, not run to the viewport
   past both the 720px column and the 1100px band rails. */
hr.wp-block-separator.is-style-ledger {
	border-top-width: 2px;
	border-top-color: var(--wp--preset--color--contrast);
}

/* Quotes — a 2px accent rule is the one deliberate exception to flatness. */
blockquote.wp-block-quote {
	border-left: 2px solid var(--wp--preset--color--accent);
	padding-left: var(--wp--preset--spacing--small-medium);
	margin-left: 0;
	font-style: normal;
}

blockquote.wp-block-quote cite,
.wp-block-pullquote cite {
	display: block;
	margin-top: var(--wp--preset--spacing--x-small);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--secondary);
}

.wp-block-pullquote {
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: var(--wp--preset--spacing--medium) 0;
}

/* Inline code — distinct from the code block, which theme.json handles. */
:not(pre) > code {
	background-color: var(--wp--preset--color--subtle);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	padding: 0.12em 0.35em;
	font-size: 0.9em;
}

/* Ordinary lists. The .rz-note rows are flush; a normal prose list kept the
   browser's 40px indent, so the same site had two list languages. */
.wp-block-post-content :where(ul, ol):not(:has(.rz-note)) {
	padding-left: 1.35rem;
}

.wp-block-post-content :where(ul, ol):not(:has(.rz-note)) li + li {
	margin-top: 0.4rem;
}

.wp-block-post-content :where(ul, ol):not(:has(.rz-note)) li::marker {
	color: var(--wp--preset--color--secondary);
}

/* Images. Previously unstyled at every level — no radius, no caption
   treatment, no cap. `.rz-portrait` is available for the About headshot,
   which the old design capped at 300px. */
.wp-block-image img,
.wp-block-post-featured-image img {
	border-radius: var(--wp--custom--radius--md);
	height: auto;
	max-width: 100%;
}

.wp-block-image figcaption,
.wp-block-post-featured-image figcaption {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	margin-top: var(--wp--preset--spacing--x-small);
}

.rz-portrait img {
	max-width: var(--wp--custom--portrait--max-width);
	border: 1px solid var(--wp--preset--color--border);
}

/* ── Header, navigation, footer ──────────────────────────────────────────── */

/* The header is a dark band, like the footer: everything inside reads from
   the *-on-dark tokens (design-system rule 3). The backbone below is written
   against header.wp-block-template-part — emitted by the templates — so the
   dark bar and the hidden site title land even on a stale Site-Editor (DB)
   copy of the part that predates the markup. */
header.wp-block-template-part > .wp-block-group {
	background-color: var(--wp--preset--color--contrast);
	border-bottom: 0;
}

/* The site title is retired from the header (the name lives in the footer
   and the hero). display:none also removes it from the accessibility tree,
   which is correct — it was a duplicate of the h1 for screen readers too. */
header.wp-block-template-part .wp-block-site-title {
	display: none;
}

/* The monogram — the brand mark holding the left of the band, so interior
   pages carry site identity above the footer and the band's left half stops
   sitting empty. It was set type ("RZ" in tracked display caps) until the real
   mark existed; it is now the white artwork from patterns/header-mark.php.

   line-height: 0 on the wrapper and the link is load-bearing, not tidiness:
   an inline image sits on a text baseline, and the descender space under that
   baseline would pad the band a few pixels taller than the nav beside it. */
.rz-monogram {
	margin: 0;
	line-height: 0;
}

.rz-monogram a {
	display: inline-block;
	line-height: 0;
	text-decoration: none;
}

/* Height comes from the token, width follows the intrinsic aspect — the mark is
   very slightly taller than it is wide, and pinning both would squash it. */
.rz-monogram img {
	display: block;
	height: var(--wp--custom--monogram--size);
	width: auto;
	transition: opacity var(--wp--custom--duration--fast) var(--wp--custom--easing);
}

/* Colour was the hover while this was text; artwork answers with opacity. */
.rz-monogram a:hover img,
.rz-monogram a:focus-visible img {
	opacity: 0.72;
}

/* Right-pin the nav whether it shares the row or wraps to its own —
   space-between alone left-aligns a lone item on a wrapped row.
   The `nav` in the selector is load-bearing: core renders the overlay's own
   <ul> with BOTH wp-block-navigation__container and wp-block-navigation, so a
   bare class selector here also caught that list and gave it margin-left:auto.
   Inside the open overlay that pinned the whole stack to the right edge of the
   content box — which is why the menu ignored its centering rules and hung off
   the right of the screen. Element-qualifying it keeps this to the <nav>. */
header.wp-block-template-part nav.wp-block-navigation {
	margin-left: auto;
}

/* Any wrap inside the nav itself stays right-justified with a real row gap.
   Fenced away from the mobile overlay, whose own centering and gap rules must
   keep winning. */
header.wp-block-template-part .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
	justify-content: flex-end;
	row-gap: var(--wp--preset--spacing--x-small);
}

/* Comfortable click/tap target on primary nav links. */
.wp-block-navigation-item__content {
	padding: var(--wp--preset--spacing--x-small) var(--wp--preset--spacing--small);
}

/* The last label's TEXT lands on the band's right rail, where the monogram
   lands on the left one — the item padding above otherwise held it 1rem short,
   giving the band a 0/16px margin pair. Desktop nav only: the open overlay
   spaces its stack from the root-padding gutter instead. Safe because nav
   items respond to hover with colour + underline, not a background box. */
header.wp-block-template-part .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item:last-child .wp-block-navigation-item__content {
	padding-inline-end: 0;
}

/* Mark the current page in the nav so visitors can see where they are.
   robz_child_nav_current_page() in functions.php adds aria-current to matching
   custom-URL items — core only sets it for post/term-linked items, so this
   underline previously had nothing to match. */
.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"],
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent-on-dark);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
	text-decoration-color: var(--wp--preset--color--accent-on-dark);
}

/* Hamburger toggle — core ships a bare ~24px icon with no padding, well under
   the 44px minimum tap target, while the inline links did have padding. The
   hairline makes it read as a control (a pill, per the geometry rule) instead
   of a stray icon floating on the band. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	padding: 0.6rem;
	min-width: var(--wp--custom--toggle--size);
	min-height: var(--wp--custom--toggle--size);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--subtle);
	border: 1px solid var(--wp--preset--color--border-on-dark);
	border-radius: var(--wp--custom--radius--pill);
}

.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-close:hover {
	color: var(--wp--preset--color--accent-on-dark);
	background-color: var(--wp--preset--color--border-on-dark);
}

/* Submenus, if the nav ever grows one — core's default is an off-palette
   rgba(0,0,0,0.15) border on white with no radius. The links inside must be
   re-inked too: they'd otherwise inherit the band's `subtle` text and
   `accent-on-dark` hover from theme.json — near-invisible on this white
   surface. */
.wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--x-small) 0;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--accent);
}

/* Mobile navigation overlay — full-screen, centered, poster-size type on the
   same ink ground as the bar it opens from (a white sheet here would flash).
   The GROUND is not set here: it comes from the nav block's own
   overlayBackgroundColor / overlayTextColor attributes in parts/header.html —
   core stamps the colour classes on the responsive container itself, which
   survives Gutenberg's overlay rewrites where an equal-specificity rule in
   this file does not (that war was fought and lost twice). The background
   rule below is only belt-and-suspenders for markup cached before the
   attributes shipped — and it has to out-specify core's own default, which is
   `.wp-block-navigation:not(.has-background) .…is-menu-open:not(.disable-
   default-overlay) { background-color: #fff }` at (0,5,0). The short
   header-scoped selector was (0,3,1) and lost to it, so the fallback never
   fired; mirroring core's `:not(.has-background)` takes it to (0,5,1) and
   keeps it correctly inert once a real background IS set on the nav.
   CSS composes layout and type: items inherit uppercase Montserrat from
   theme.json's core/navigation; the 0.01em tracking is the deliberate
   poster-size exception to the 0.1em idiom — display tracking at this size
   doesn't fit a phone screen. */
header.wp-block-template-part .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--contrast);
}

/* Still no inline padding here: core already gives the open overlay the site's
   root padding — `padding-inline: clamp(1rem, var(--wp--style--root--padding-
   left), 20rem)` on .is-menu-open — so the gutter matches every other page edge,
   and the labels land on the same 1.5rem line as the close button above them.
   Adding our own on the content nested inside it doubled it to 3rem.

   The BLOCK padding is ours, though, and it is the "match the header" fix.
   Core's shorthand resolves top to clamp(1rem, var(--wp--style--root--padding-
   top), 20rem). theme.json's root padding is "0px" (it was a unitless "0"
   until 2026-08-24, which is a <number>, not a <length> — the whole clamp()
   was invalid and the inset collapsed to nothing, so the overlay opened flush
   to the top of the screen). With the token fixed core's clamp resolves to its
   1rem floor, but the header band this overlay replaces uses 1.5rem — so the
   rule below still restates both sides in the band's own token, putting the
   close X exactly where the hamburger was. Core's rule is (0,3,0) —
   `:not(.disable-default-overlay)` counts — so the header prefix wins it. */
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open {
	padding-block: var(--wp--preset--spacing--small-medium);
}

/* Vertically centre the stack. Core leaves the three nested wrappers between
   the fixed overlay and the list at auto height, so a `justify-content: center`
   on the content alone centred nothing — the box was only as tall as the four
   labels and sat at the top. Stretching the chain first is what gives the
   centring something to work in.

   Each wrapper needs `display: flex` as well as `flex: 1`, not just the latter:
   only .is-menu-open is a flex container by default, so `flex: 1` on the close
   wrapper was honoured while the dialog and content below it stayed block-level
   children of a block-level parent and ignored it. The chain has to be flex the
   whole way down for the height to reach the list. */
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation__responsive-close, .wp-block-navigation__responsive-dialog, .wp-block-navigation__responsive-container-content) {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

/* Right-aligned, vertically centred. The alignment reads core's own
   `--navigation-layout-justification-setting` custom property rather than
   hardcoding `flex-end` — that variable is what core computes from the nav's
   actual layout.justifyContent attribute in parts/header.html, so if that
   attribute ever changes, this overlay rule follows it instead of silently
   drifting from the desktop nav it mirrors. It resolves to flex-end today
   (the header nav is justified right); the fallback matches that so nothing
   changes if the variable is ever absent. The block padding keeps the top
   label clear of the absolutely-positioned X and, being symmetric, keeps the
   centring optically true — it replaces core's one-sided
   `padding-top: calc(2rem + 24px)`. */
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	justify-content: center;
	align-items: var(--navigation-layout-justification-setting, flex-end);
	padding-block: var(--wp--custom--toggle--size);
}

/* Each label aligns with the stack too, not just the box. Core sets this from
   the same justification var on the list and items; restated at higher
   specificity for the same reason as the rule above. Core's is (0,4,0), this
   is (0,4,1). */
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation__container, .wp-block-navigation-item, .wp-block-page-list) {
	align-items: var(--navigation-layout-justification-setting, flex-end);
}

/* Poster-size labels need more air between them than the body rhythm gives —
   at ~30px type on a phone, small-medium reads as a stack of touching lines.

   `flex-grow: 0` is the other half of the vertical centring above. The list is
   the content wrapper's only child, so core's `.wp-block-navigation__container
   :only-child { flex-grow: 1 }` stretched it to the full height of the box the
   rules above had just stretched — and a child that fills its parent cannot be
   centred in it. The labels packed to the top of a full-height list and the
   menu still opened top-anchored. Core's rule is (0,2,0); this is (0,4,1). */
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--medium);
	flex-grow: 0;
}

header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--subtle);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.1;
	letter-spacing: 0.01em;
}

header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--accent-on-dark);
}

/* The current-page marker, restated at overlay specificity. The rule up in the
   nav section is two classes; the overlay item rule above is four, so it won
   `color` and the open menu showed the current page in plain `subtle` — the
   underline landed (nothing else sets text-decoration) but the accent didn't.
   Deliberate out-specification, like the table and search rules: simplify this
   back to the short selector and the overlay takes the colour again. */
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="page"],
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent-on-dark);
}

/* Footer. A full-bleed dark band terminates the page rather than letting it
   fade into white — the one place this design goes to a heavy surface. Note
   the palette switch it forces: `accent` is 2.34:1 on ink and would make the
   email link unreadable, so anything inside the band reads from the
   *-on-dark tokens. Those exist for this band and nothing else. */
footer.wp-block-template-part .rz-flag svg {
	box-shadow: 0 0 0 1px var(--wp--preset--color--border-on-dark);
}

/* The band pins to the viewport bottom on short pages (see the page-frame
   rules in Foundations). No fixed gap above it: every template's <main>
   already carries margin-bottom `large`, and the old extra `medium` here
   stacked on top of it — 6rem of dead space before the footer against 4rem
   after the header. */
footer.wp-block-template-part {
	margin-top: auto;
}

/* Identity leads; the disclaimer is last and smallest. */
.rz-footmark {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lede);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.3;
	color: var(--wp--preset--color--subtle);
}

.rz-disclaimer {
	max-width: var(--wp--custom--measure-fine);
	line-height: 1.5;
}

/* The footer email is the site's primary contact route, so it carries a
   visible underline rather than relying on colour alone, and the on-dark
   accent so it clears AA on the band (7.54:1, against 2.34:1 for the standard
   accent). The colour is also set as a block attribute so the editor shows it
   correctly; this rule is what actually guarantees it on the front end.

   Scoped to the footer element specifically — the header is also a template
   part, and its site title must not pick any of this up. */
footer.wp-block-template-part a:not(.wp-block-social-link-anchor) {
	color: var(--wp--preset--color--accent-on-dark);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}

footer.wp-block-template-part a:not(.wp-block-social-link-anchor):hover,
footer.wp-block-template-part a:not(.wp-block-social-link-anchor):focus-visible {
	color: var(--wp--preset--color--subtle);
	text-decoration-thickness: 2px;
}

/* The focus ring is drawn in the accent, which disappears against ink — both
   dark bands re-colour it. */
footer.wp-block-template-part a:focus-visible,
footer.wp-block-template-part .wp-block-social-link:focus-visible,
header.wp-block-template-part a:focus-visible,
header.wp-block-template-part .wp-block-navigation__responsive-container-open:focus-visible,
header.wp-block-template-part .wp-block-navigation__responsive-container-close:focus-visible {
	outline-color: var(--wp--preset--color--accent-on-dark);
}

/* Footer social icons — core animates a scale(1.1) on hover; bind the colour
   change to the palette so the two happen together. The icons live on the ink
   band, so the hover reads from the on-dark accent (rule 3) — the standard
   accent is 2.34:1 there and made the icons vanish on hover. */
.wp-block-social-link:hover {
	color: var(--wp--preset--color--accent-on-dark);
}

/* Same right-rail trim as the nav's last label: core's logos-only style pads
   each icon anchor 0.25em on both sides, which held the last icon ~4px short
   of the rail the row is meant to end on. */
footer.wp-block-template-part .wp-block-social-links.is-style-logos-only .wp-block-social-link:last-child .wp-block-social-link-anchor {
	padding-right: 0;
}

/* Footer flags — small, decorative, with a faint edge so white stripes read
   against the page. The SVGs live in patterns/footer.php. */
.rz-flag svg {
	display: block;
	width: 30px;
	height: 20px;
	border-radius: var(--wp--custom--radius--sm);
	box-shadow: 0 0 0 1px var(--wp--preset--color--border);
}

/* ── Accessibility ──────────────────────────────────────────────────────────
   A clear keyboard focus ring (the browser default is easy to lose against the
   bold type and accent links), and respect for reduced-motion preferences. */
a:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-navigation-item__content:focus-visible,
.wp-block-search__button:focus-visible,
.wp-block-social-link:focus-visible,
.wp-block-navigation__responsive-container-open:focus-visible,
.wp-block-navigation__responsive-container-close:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: var(--wp--custom--radius--pill);
}

/* Pill rings belong to pill controls. A multi-line prose link inside a
   paragraph gets a small-radius ring instead — a pill outline around wrapped
   inline text read as a blob. (The control selectors above out-rank this, so
   buttons, nav items and toggles keep the pill.) */
a:focus-visible {
	border-radius: var(--wp--custom--radius--sm);
}

/* Skip-to-content link — server-rendered in functions.php (#content targets the
   <main> on every template). Visually hidden until a keyboard user Tabs to it,
   then revealed as an on-brand pill in the top-left. */
.skip-link.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	word-wrap: normal;
}

.skip-link.screen-reader-text:focus {
	position: fixed;
	top: 0.75rem;
	left: 0.75rem;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	z-index: 100000;
	padding: var(--wp--custom--button--padding-y) var(--wp--custom--button--padding-x);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--pill);
	outline-color: var(--wp--preset--color--accent-on-dark);
}

/* ── Responsive ─────────────────────────────────────────────────────────────
   Index-row stacking lives in the 781.98px blocks above, with the row rules.
   This block handles the truly-small-screen adjustments. The 600px value here
   deliberately differs from 782: content rows stack first (they starve
   soonest), the chrome — nav overlay at core's 600, footer rows here —
   follows at phone width. */
@media (max-width: 600px) {
	.wp-block-search__inside-wrapper {
		flex-wrap: wrap;
	}

	.wp-block-search__button {
		width: 100%;
	}

	/* Stack the footer rows deliberately rather than leaving it to flex-wrap,
	   which lands differently depending on how long the email address is. */
	.rz-footrow {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--small);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}