/**
 * Static pages (page.html): green title hero + constrained content body, and
 * the alphabetical browse-index lists on the "By Topic" / "By Author" pages.
 */

/* Green hero flows straight into the body / jump bar — no blank gap (all are
   nested in <main>, so the root section-flush reset doesn't reach them). */
.wulr-page-hero + .wulr-page-body,
.wulr-page-hero + .wulr-idx-navbar,
.wulr-idx-navbar + .wulr-page-body { margin-top: 0; }

.wulr-page-hero .wulr-archive-title {
	text-align: center;
}

/* 404 — all green. Centered content with the search reversed out (white on the
   green) and constrained under the title; helper text/links in white. */
.wulr-404 { text-align: center; }
.wulr-404-text { max-width: 34rem; margin-inline: auto; }

/* Vertical rhythm: eyebrow hugs the title, then progressively more air down to
   the search (a distinct action) and the links. Overrides the section blockGap. */
.wulr-404 .wulr-archive-title { margin-top: 0.5rem; }
.wulr-404 .wulr-404-text { margin-top: 1.75rem; }
.wulr-404 .wulr-search-block { margin-top: 3rem; }
.wulr-404 .wulr-error-links { margin-top: 2.75rem; }
.wulr-404 .wulr-search-block {
	max-width: 600px;
	margin-inline: auto;
}
.wulr-404 .wulr-search-block .wp-block-search__inside-wrapper {
	border-bottom-color: rgba(255, 255, 255, 0.55);
}
/* Smaller input type so the placeholder isn't clipped in the narrower field. */
.wulr-404 .wulr-search-block .wp-block-search__input {
	font-size: clamp(18px, 2vw, 24px);
}
/* Recolor the browser's native clear (×) button to match the reversed scheme
   (it renders blue/dark by default and is illegible on the green). */
.wulr-404 .wulr-search-block .wp-block-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	width: 15px;
	height: 15px;
	margin-left: 8px;
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0.7);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") no-repeat center / contain;
}
.wulr-404 .wulr-search-block .wp-block-search__inside-wrapper::before {
	background-color: var(--wp--preset--color--white);
}
.wulr-404 .wulr-search-block .wp-block-search__input {
	color: var(--wp--preset--color--white);
}
.wulr-404 .wulr-search-block .wp-block-search__input::placeholder {
	color: rgba(255, 255, 255, 0.6);
}
.wulr-404 .wulr-search-block .wp-block-search__button:hover {
	background: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--primary);
}
.wulr-404 .wulr-error-links { color: rgba(255, 255, 255, 0.8); }
.wulr-404 .wulr-error-links a {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Readable measure for prose pages (About, Submissions, etc.), aligned flush
   with the content column's left edge (matching the index lists) rather than
   centered. The left margin reproduces the constrained-column inset; the two
   .wp-block-post-content classes give enough specificity to beat WP's
   constrained-layout auto margins (which are !important). The By Topic /
   By Author index lists are excluded so they keep the full column width. */
.wulr-page-body .wp-block-post-content p,
.wulr-page-body .wp-block-post-content h2,
.wulr-page-body .wp-block-post-content h3,
.wulr-page-body .wp-block-post-content h4,
.wulr-page-body .wp-block-post-content ol,
.wulr-page-body .wp-block-post-content blockquote {
	max-width: 46rem;
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-right: auto !important;
}

/* Browse-index lists — multi-column alphabetical term links. */
.wulr-index-list {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 3 16rem;
	column-gap: 2.5rem;
}
.wulr-index-list li {
	break-inside: avoid;
	margin: 0 0 0.7rem;
}
.wulr-index-list a {
	display: block;
	font-family: var(--wp--preset--font-family--primary);
	color: var(--wp--preset--color--body);
	text-decoration: none;
	padding: 0.15rem 0;
	transition: color 0.12s;
}
/* The term/author name reads as a text link (underlined); the count stays plain
   so it isn't mistaken for part of the link text. */
.wulr-index-name {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--rule);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.wulr-index-list a:hover,
.wulr-index-list a:focus-visible {
	color: var(--wp--preset--color--accent);
}
.wulr-index-list a:hover .wulr-index-name,
.wulr-index-list a:focus-visible .wulr-index-name {
	text-decoration-color: var(--wp--preset--color--accent);
}
/* lint-allow: coincidental meta-text match with .wulr-entity-meta */
.wulr-index-count {
	color: var(--wp--preset--color--stone);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
}

/* ---- A–Z browse index (By Topic / By Author) ---- */

/* Header on the index pages: the title with breathing room and the A–Z jump
   nav beneath it, then the brand double-rule at the bottom of the green (thick +
   thin green rules on the beige body, 4px below the hero — the header-mark
   motif). */
.page-by-topic .wulr-page-hero,
.page-by-author .wulr-page-hero {
	padding-top: var(--wp--preset--spacing--70) !important;
	padding-bottom: var(--wp--preset--spacing--70) !important;
}
.page-by-topic .wulr-page-hero .wulr-archive-title,
.page-by-author .wulr-page-hero .wulr-archive-title {
	margin: 0.5rem 0; /* breathing room around the title */
}
.page-by-topic .wulr-page-body,
.page-by-author .wulr-page-body {
	position: relative;
	padding-top: 4rem !important; /* space between the double-rule and the first letter */
	/* Light-beige body (matches the muted list on the taxonomy archives). The
	   double-rule below is painted on this element's ::before/::after, so this
	   background sits behind it — the green rules read as the header-mark motif
	   on paper (not on white). */
	background: var(--wp--preset--color--muted);
}

/* Sticky A–Z jump bar — a slim green continuation of the header (holds the
   letter links at rest, directly under the title) that pins to the top of the
   viewport on scroll. Only the index pages have it: on other pages the token
   renders empty, so :empty removes the bar entirely. */
.wulr-idx-navbar {
	position: sticky;
	top: 0;
	z-index: 20;
	margin: 0;
	padding: 0.7rem clamp(1.5rem, 4vw, 48px) 1.75rem; /* extra room below the links, above the double-rule */
	background: var(--wp--preset--color--primary);
}
.wulr-idx-navbar:empty { display: none; }
.admin-bar .wulr-idx-navbar { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .wulr-idx-navbar { top: 46px; }
}

/* A–Z jump nav — sits in the green header under the title. Centered row of
   white, underlined letter links; absent letters are dimmed and not links. */
.wulr-az-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.2rem 0.4rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.03em;
}
.wulr-az-nav a,
.wulr-az-nav .is-empty {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.6rem;
	padding: 0.1rem 0.25rem;
}
.wulr-az-nav a {
	color: rgba(255, 255, 255, 0.9);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	transition: color 0.12s;
}
.wulr-az-nav .is-empty {
	/* 0.6 alpha = 5.97:1 on the green bar (0.35 was only 3.02:1, below 4.5:1).
	   Still clearly dimmer than active letters (0.9) and left un-underlined so
	   the "no entries" state stays distinguishable. */
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
}
/* Back-to-top arrow at the end of the row (no underline, small gap before it).
   Hidden at rest in the header; shown only while the bar is stuck to the top
   (index-nav.js adds .is-pinned). */
.wulr-az-nav .wulr-az-top {
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
	margin-left: 0.5rem;
	display: none;
}
.wulr-idx-navbar.is-pinned .wulr-az-top {
	display: inline-flex;
}
.wulr-az-nav .wulr-az-top:hover,
.wulr-az-nav .wulr-az-top:focus-visible { color: var(--wp--preset--color--white); }
.wulr-az-nav .wulr-az-top svg { display: block; }

/* Per-letter sections — larger letter headings, more air between sections.
   scroll-margin clears the sticky jump bar when a letter link jumps here. */
.wulr-idx-group {
	margin-top: 4rem;
	/* Clear the sticky jump bar on jump — adapts to the bar's real height (taller,
	   two rows, on mobile) + its sticky offset, published by index-nav.js. */
	scroll-margin-top: calc(var(--wulr-navbar-h, 4rem) + var(--wulr-navbar-top, 0px) + 0.75rem);
}
.wulr-idx-group:first-of-type { margin-top: 0; }
.wulr-idx-letter {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--xxl);
	line-height: 1;
	margin: 0 0 1.25rem;
}

/* ==========================================================================
   Print page (page-print.html) — redesign 2026-07-27.
   Big "Print" title over a beige field, then a nested browse accordion:
   volumes → issues → post carousel (lazy-loaded by assets/js/print.js).
   No green masthead, no shield.
   ========================================================================== */
.wulr-print-title {
	font-family: var(--wp--preset--font-family--display);
	line-height: 0.95;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--body);
}

/* Shield watermark pins to the TOP of the hero, not `top:6%` of the whole
   (very tall) section — override the group-shield extension's default for this
   page. Sits in the top-right, over the empty space beside the title. */
.wulr-print-page.is-shield-top-right::before {
	top: clamp(2rem, 6vw, 5rem);
	right: clamp(1.5rem, 4vw, 48px);
}
/* Fainter on mobile — the shield crowds the narrow hero (override the pseudo's
   opacity directly; the inline `--wulr-shield-opacity` var can't be beaten by a
   stylesheet var re-declaration). */
@media (max-width: 640px) {
	.wulr-print-page.wulr-has-shield::before {
		opacity: 0.3;
	}
}

/* Lead description under the title. max-width for line length; the inline-margin
   override defeats WP constrained-layout's auto-centre of narrow children.
   padding-bottom is the whitespace above the volume list. */
.wulr-print-desc {
	max-width: 43.4rem;
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
	font-family: var(--wp--preset--font-family--primary);
	line-height: 1.5;
	color: var(--wp--preset--color--ink-2);
	padding-bottom: clamp(3rem, 6vw, 6rem);
}
/* On the Online archive the masthead is its own section (the card list follows
   separately), so the big Print-accordion gap below the description isn't
   wanted — the section padding handles spacing there. */
body.category-online .wulr-print-desc {
	padding-bottom: 0;
}
/* The archive list's top double-rule was designed to sit under the GREEN hero;
   under the beige Print-style masthead it reads as a stray line, so drop it
   for the Online page only. */
body.category-online .wulr-archive-list::before,
body.category-online .wulr-archive-list::after {
	content: none;
}
/* Let the shield spill out of the masthead onto the page: the beige now lives
   on `main` and the masthead/list are transparent, so the shield (painted with
   the masthead) shows fully over that background, softly behind the cards,
   instead of being hard-clipped at the masthead edge. */
body.category-online .wulr-print-page {
	overflow: visible;
}

/* The accordion lives in an `align:full` wrapper (page-print.html), so the rows
   are FULL-VIEWPORT-WIDTH blocks — their bottom borders span the whole viewport
   for free, the theme's own full-bleed mechanism (no 100vw pseudos, no clip).
   Each row then re-contains its TEXT to the site column with `--wulr-edge` (the
   constrained gutter: root padding on narrow screens, half the leftover beyond
   the 1200px contentSize on wide ones). The issue carousel keeps its right
   padding at 0 so cards bleed off the right viewport edge. */
.wulr-print-index {
	--wulr-edge: max(clamp(1.5rem, 4vw, 48px), calc((100vw - 1200px) / 2));
	--wulr-indent: clamp(1rem, 3vw, 2.5rem);
	border-top: 1px solid var(--wp--preset--color--rule);
}

/* Half-opacity beige veil over the accordion. The wrapper sits above the hero
   shield (z-index 1 via .wulr-has-shield > *), so this 50% `muted` knocks the
   shield back where it spills behind the rows — full strength in the hero,
   faded under the list. Semi-transparent background (not `opacity`, which would
   also fade the row text). */
.wulr-print-index-wrap {
	background-color: color-mix(in srgb, var(--wp--preset--color--muted) 50%, transparent);
}

/* ---- Accordion heads (shared by volume + issue) ---- */
.wulr-vol-head,
.wulr-iss-head {
	display: flex;
	align-items: center;
	gap: 1rem;
	text-decoration: none;
	cursor: pointer;
	padding-inline: var(--wulr-edge);
	border-bottom: 1px solid var(--wp--preset--color--rule);
}
.wulr-vol-name,
.wulr-iss-name {
	margin-right: auto; /* push count + chevron to the right edge */
	font-family: var(--wp--preset--font-family--display);
	line-height: 1.05;
}
.wulr-vol-count,
.wulr-iss-meta {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--stone);
	white-space: nowrap;
}
/* Chevron affordance — a masked SVG (centres optically with the count text,
   unlike a rotated border-caret whose ink sits low). currentColor, so it takes
   the head's colour (red on volumes, ink on issues); flips up when open. */
.wulr-acc-chevron {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url(../images/chevron-down.svg) center / contain no-repeat;
	        mask: url(../images/chevron-down.svg) center / contain no-repeat;
	opacity: 0.7;
	transition: transform 0.2s;
}
[aria-expanded="true"] > .wulr-acc-chevron {
	transform: rotate(180deg);
}

/* ---- Volume level ---- */
.wulr-vol-head {
	padding-block: clamp(1.1rem, 2.2vw, 1.75rem);
	color: var(--wp--preset--color--accent);
}
.wulr-vol-name {
	font-size: var(--wp--preset--font-size--xl);
}
.wulr-vol-head:hover .wulr-vol-name,
.wulr-vol-head:focus-visible .wulr-vol-name {
	color: var(--wp--preset--color--red-dk);
}
/* Row hover/focus wash (client, 2026-08-17): the accordion rows are large hit
   targets on a flat background, so lift the one under the cursor to make the
   current row unambiguous. Lighter than the page's `muted` ground, mixed rather
   than hardcoded so it tracks the palette. Focus-visible gets the same wash so
   keyboard users see the same affordance the mouse does. */
.wulr-vol-head:hover,
.wulr-iss-head:hover,
.wulr-vol-head:focus-visible,
.wulr-iss-head:focus-visible {
	background-color: color-mix(in srgb, var(--wp--preset--color--white) 60%, transparent);
}

.wulr-vol-head:focus-visible,
.wulr-iss-head:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* ---- Issue level (nested, indented, lighter) ---- */
.wulr-iss-head {
	padding-block: clamp(0.8rem, 1.6vw, 1.15rem);
	/* padding-inline (= --wulr-edge) inherited from the shared head rule, so
	   issue rows left-align with the volume rows (client — no nested indent). */
	color: var(--wp--preset--color--body);
	border-bottom-color: var(--wp--preset--color--rule-soft);
}
.wulr-iss-name {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
}
.wulr-iss-head:hover .wulr-iss-name,
.wulr-iss-head:focus-visible .wulr-iss-name {
	color: var(--wp--preset--color--accent);
}
/* Last issue in a volume: no divider (the volume's own edge closes it). */
.wulr-vol-panel > .wulr-iss:last-child > .wulr-iss-head {
	border-bottom: 0;
}
/* Breathing room after an open volume's issue list, before the next volume.
   Only renders while the panel is open (hidden panels are display:none). */
.wulr-vol-panel {
	padding-bottom: clamp(1.75rem, 3.5vw, 3rem);
}

/* ---- Issue panel: the lazy carousel + states ----
   Left padding = column inset (aligned with the rows); right padding 0 so the
   carousel bleeds off the right viewport edge mid-scroll. */
.wulr-iss-panel {
	padding: clamp(0.5rem, 1.5vw, 1rem) 0 clamp(1.5rem, 3vw, 2.5rem) var(--wulr-edge);
}
/* Trailing gap INSIDE the scroller so the last card doesn't jam against the
   viewport edge when fully scrolled — it lands at the content-column right edge
   (symmetric with the left inset). Snap is relaxed to `proximity` (the base
   track is `mandatory`, which would force the last card back to the left and
   swallow this gap). */
.wulr-print-track {
	padding-right: var(--wulr-edge);
	scroll-snap-type: x proximity;
}
/* Narrower cards on mobile than the base rail's near-full-width `100vw - 100px`
   (client) — smaller cards with a bigger peek of the next. */
@media (max-width: 640px) {
	.wulr-print-track > li {
		flex-basis: calc(100vw - 160px);
	}
}
.wulr-iss-panel[data-state="loading"]::before {
	content: "Loading…";
	display: block;
	padding: 1rem 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--stone);
}
.wulr-iss-fallback {
	display: inline-block;
	font-family: var(--wp--preset--font-family--sans);
	/* declared below so this display rule doesn't defeat the [hidden] attribute
	   JS toggles (an explicit `display` beats UA `[hidden]{display:none}`). */
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}
.wulr-iss-fallback[hidden] {
	display: none;
}
.wulr-iss-panel[data-state="error"] .wulr-iss-fallback::before {
	content: "Couldn’t load — ";
	font-weight: 400;
	color: var(--wp--preset--color--stone);
}

/* Carousel arrows sit above the track, aligned to the column's right edge
   (the cards themselves bleed past it to the viewport). */
.wulr-print-arrows {
	justify-content: flex-end;
	padding-right: var(--wulr-edge);
	padding-bottom: clamp(0.75rem, 1.5vw, 1rem);
}
.wulr-print-arrows[hidden] {
	display: none;
}

/* ================================================================
   Masthead page (page 1864) — editorial-board directory
   Green hero → download card straddling the seam → current-staff
   intro → two-column board list. All content is native blocks;
   these classes only style. See scratchpad/build-masthead-page.php.
   ================================================================ */

.wulr-masthead-hero { text-align: center; }

/* The masthead hero's title + description use their OWN classes (not the shared
   .wulr-archive-* ones), because those hardcode `margin: 0`, which tied and beat
   WP's generated block-gap rule and silently swallowed the group's "Block
   spacing" setting. Here we reset only the UA bottom/inline margins and leave
   margin-block-start free, so editing "Block spacing" on the hero group in the
   editor drives the eyebrow → title → paragraph gaps. */
.wulr-mh-desc {
	max-width: 46rem;
	margin-inline: auto;
	margin-block-end: 0;
	font-size: var(--wp--preset--font-size--md);
	opacity: 0.9;
}

/* The SECTION behind the card is split green (top half) / white (bottom half);
   the solid beige card is centred on it so it straddles the seam — bridging the
   green hero above and the white "Current Staff" section below. The hero green
   and this section's green top read as one continuous green field. */
.wulr-mh-cardwrap {
	margin-top: 0;
	padding-block: clamp(2rem, 4vw, 3rem);
	background: linear-gradient(
		180deg,
		var(--wp--preset--color--primary) 0,
		var(--wp--preset--color--primary) 50%,
		var(--wp--preset--color--white) 50%,
		var(--wp--preset--color--white) 100%
	);
}
/* Width + centering come from the WRAPPER's constrained layout (its contentSize
   is the editor's "Content width" control), NOT from here. They used to live in
   this rule as `max-width: 960px; margin-inline: auto`, which silently beat the
   block attribute: WP's constrained-layout selector resolves to (0,1,0), the same
   as `.wulr-mh-card`, and pages.css loads after core — so the CSS won on source
   order and the editor control did nothing. */
.wulr-mh-card {
	position: relative;
	z-index: 2;
	background: var(--wp--preset--color--muted);
	box-shadow: var(--wulr-shadow-card);
	padding: clamp(1.75rem, 3vw, 2.75rem);
}
/* Card column gap = the Columns block's native "Block spacing" (set in the
   block), not CSS, so it stays editable. */

/* PDF thumbnail placeholder (dashed) — stand-in until a real preview image. */
.wulr-mh-thumb {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	aspect-ratio: 3 / 4;
	padding: 24px;
	border: 1px dashed var(--wp--preset--color--rule);
	background: var(--wp--preset--color--white);
	text-align: center;
	text-decoration: none;
	color: var(--wp--preset--color--stone);
	transition: border-color 0.15s, color 0.15s;
}
.wulr-mh-thumb-icon { display: block; }
.wulr-mh-thumb-icon svg { width: 30px; height: 30px; opacity: 0.75; }
.wulr-mh-thumb-cap {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	line-height: 1.4;
	color: var(--wp--preset--color--stone);
}
.wulr-mh-thumb-link {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* With a real cover image: a framed document preview (no dashed placeholder). */
.wulr-mh-thumb.has-cover {
	display: block;
	padding: 0;
	aspect-ratio: auto;
	border-style: solid;
	overflow: hidden;
	line-height: 0;
	box-shadow: 0 12px 30px -14px rgba(14, 14, 14, 0.4);
}
/* lint-allow: generic fluid-image reset; coincidental match with .wulr-board-image img */
.wulr-mh-thumb-img { display: block; width: 100%; height: auto; }

/* Card body — all content sits on the opaque beige card, so colours are fixed
   (the split is on the section behind, never under the text). Spacing between
   the eyebrow/title/description/actions is native block spacing (per-block
   margin + the flex actions group), so the editor matches the front end; these
   classes reset only the UA bottom/inline margins. */
.wulr-mh-eyebrow { margin: 0; }
.wulr-mh-card-title {
	font-family: var(--wp--preset--font-family--primary);
	line-height: 1.1;
	margin-block-end: 0;
	margin-inline: 0;
}
.wulr-mh-card-desc {
	max-width: 34rem;
	margin-block-end: 0;
	margin-inline: 0;
}
/* Download button (native core/button) — leading download glyph via ::before,
   masked SVG in currentColor so it flips with the button's text colour. */
.wulr-btn-download .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
}
.wulr-btn-download .wp-block-button__link::before {
	content: "";
	width: 0.95em;
	height: 0.95em;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M12 18v-6'/%3E%3Cpath d='m9 15 3 3 3-3'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M12 18v-6'/%3E%3Cpath d='m9 15 3 3 3-3'/%3E%3C/svg%3E") no-repeat center / contain;
}
.wulr-mh-updated {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Current-staff intro */
.wulr-mh-current { text-align: center; }
.wulr-mh-current-title {
	font-family: var(--wp--preset--font-family--primary);
	margin-block-end: 0;
	margin-inline: 0;
}
.wulr-mh-current-desc {
	max-width: 44rem;
	margin-inline: auto;
}

/* Editorial-board list — heavy top rule, two columns of Name / Role rows. */
.wulr-mh-list {
	border-top: 2px solid var(--wp--preset--color--body);
}
.wulr-mh-list .wulr-mh-col { row-gap: 0; }
.wulr-mh-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--wp--preset--color--rule-soft);
}
.wulr-mh-row > * { margin: 0; }
.wulr-mh-name {
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.2;
}
.wulr-mh-role {
	flex-shrink: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: right;
}

/* ================================================================
   Submissions / Contact / Write-On — shared masthead hero + the
   Submissions page's guidelines (tracks) and methods sections.
   All content is native blocks; these classes only style.
   ================================================================ */

/* Hero: reuses the archive hero (green, centred). Outline CTA on the green. */
.wulr-page-hero.is-centered,
.wulr-submissions-hero { text-align: center; }

/* Hero CTA — native core/button (is-style-outline) recoloured white-on-green,
   overriding the site's default accent outline + green hover (which would be
   invisible on the green hero). */
.wulr-hero-cta .wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.55);
	color: var(--wp--preset--color--white);
	background-color: transparent;
}
.wulr-hero-cta .wp-block-button__link:hover,
.wulr-hero-cta .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--white);
}

/* External-link (↗) glyph on outbound buttons — CSS ::after (masked SVG in
   currentColor) so the native button's label stays clean editable text. */
.wulr-btn-ext .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}
.wulr-btn-ext .wp-block-button__link::after {
	content: "";
	width: 1.1em;
	height: 1.1em;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Spring-cycle update callout — accent left rule. */
.wulr-callout {
	border-left: 3px solid var(--wp--preset--color--accent);
	padding-left: clamp(1.25rem, 2.5vw, 2rem);
	max-width: 62rem;
}
/* Spacing is native (block margin/blockGap) so the editor matches the front
   end; these classes only carry colour/type. */
.wulr-callout-label { margin: 0; }
.wulr-callout-text { margin: 0; line-height: 1.7; }

/* Two submission tracks. */
/* Column gap is the Columns block's own "Block spacing" (native) — set in the
   block, not here, so editing it in the backend isn't overwritten by CSS. */
.wulr-track {
	border-top: 2px solid var(--wp--preset--color--accent);
	padding-top: 1.5rem;
}
.wulr-track-eyebrow { margin: 0; }
/* Size comes from the block's font-size control (fontSize:"xl"), not CSS, so
   the editor's picker is honest and WYSIWYG; this class only sets colour/margin. */
.wulr-track-title {
	font-family: var(--wp--preset--font-family--primary);
	line-height: 1.15;
	margin: 0;
}
.wulr-track-desc {
	margin: 0;
	line-height: 1.6;
}
/* Spec rows: fixed label column + serif value, hairline-separated. */
.wulr-spec { border-bottom: 1px solid var(--wp--preset--color--rule-soft); margin: 0; }
.wulr-spec-row {
	display: flex;
	gap: 1.5rem;
	align-items: baseline;
	padding: 0.85rem 0;
	border-top: 1px solid var(--wp--preset--color--rule-soft);
}
.wulr-spec-row > * { margin: 0; }
.wulr-spec-label {
	flex: 0 0 6.5rem;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.wulr-spec-value {
	flex: 1;
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.5;
}

/* Methods / Expedited review (beige section). */
.wulr-submethods-title {
	font-family: var(--wp--preset--font-family--primary);
	margin: 0 0 1rem;
}
.wulr-submethods-col p { line-height: 1.7; }
.wulr-submethods-col a { text-decoration: underline; text-underline-offset: 3px; }
.wulr-expedite-list {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	border-top: 1px solid var(--wp--preset--color--rule);
}
.wulr-expedite-list li {
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	font-family: var(--wp--preset--font-family--primary);
}

@media (max-width: 781px) {
	.wulr-track { margin-bottom: 1rem; }
}

/* ==========================================================================
   WRITE-ON COMPETITION  (page 1866)  —  .wulr-woc-*
   Layout + type only. Colours live on the blocks (textColor), sizes are
   presets (fontSize), spacing is native (blockGap). The coloured top rules and
   row hairlines are designed decorative dividers (like .wulr-track /
   .wulr-spec-row) so they carry token-var borders here.
   ========================================================================== */
/* Info cards: a coloured 2px top rule + centred content. Top padding (space
   under the rule) is native block spacing; centring is the blocks' own align. */
.wulr-woc-card--info { border-top: 2px solid var(--wp--preset--color--accent); }
.wulr-woc-card--comp { border-top: 2px solid var(--wp--preset--color--primary); }

/* Numbered steps: hairline-separated rows. Layout is the native Columns block
   (widths + top valign + blockGap set on the blocks); these rules add the row
   separators + number/label leading only. */
.wulr-woc-steps { border-bottom: 1px solid var(--wp--preset--color--rule-soft); }
/* Row hairline only; the row's vertical padding is native block spacing. */
.wulr-woc-step {
	border-top: 1px solid var(--wp--preset--color--rule-soft);
}
.wulr-woc-num { line-height: 1; }
/* .wulr-eyebrow already gives uppercase + sans + weight + tracking; this just
   tightens the wrapped label. */
.wulr-woc-step-label { line-height: 1.3; }

/* ==========================================================================
   CONTACT  (page 1867)  —  .wulr-contact-*
   Card/box borders + type, and Gravity Forms field styling (non-block plugin
   markup). Colours/sizes/spacing stay on the blocks where a block exists; CSS
   here handles the decorative borders, centred card text, and the GF markup.
   ========================================================================== */
.wulr-contact-card,
.wulr-contact-box {
	border: 1px solid var(--wp--preset--color--rule-soft);
}
/* Fill the (equal-height) column so bordered cards in a row match height.
   Card/box padding is native block spacing (Dimensions panel), NOT CSS. */
.wulr-contact-card { text-align: center; height: 100%; }
.wulr-contact-email a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* lint-allow: generic underlined-link; coincidental match with .wulr-submethods-col a, not a shared component */
.wulr-contact-box a { text-decoration: underline; text-underline-offset: 3px; }

/* Full-width divider between the cards and the form. */
.wulr-contact-rule { border-color: var(--wp--preset--color--body); opacity: 1; }

/* ---- Gravity Forms — match the theme (plugin markup, so styled here) ---- */
.wulr-contact-form .gfield_label {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	/* !important beats Gravity Forms' own label size (renders 16px otherwise). */
	font-size: var(--wp--preset--font-size--eyebrow) !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--stone);
}
/* The "(Required)" flag sits a step below the label. */
.wulr-contact-form .gfield_required {
	font-size: 0.85em !important;
	letter-spacing: 0.04em;
}
.wulr-contact-form input[type="text"],
.wulr-contact-form input[type="email"],
.wulr-contact-form textarea,
.wulr-contact-form select {
	/* Full-width fields (GF ships them at a narrow per-field size). */
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
	/* !important beats Gravity Forms' own field padding/size. */
	padding: 1rem 0.9rem !important;
	/* stone (7.3:1 on white) — the field border is the only boundary cue, so it
	   must clear WCAG 1.4.11 (3:1); the rule token (#C8C2B6) was only 1.8:1. */
	border: 1px solid var(--wp--preset--color--stone);
	border-radius: 0;
	background: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--md) !important;
	color: var(--wp--preset--color--body);
}
.wulr-contact-form textarea { min-height: 160px; }
/* Topic select — the native arrow crowds the right edge, so swap in our own
   chevron inset 1rem from the edge (appearance:none + !important beat GF). */
.wulr-contact-form select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23595650' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 1rem center !important;
	background-size: 0.85rem !important;
	padding-right: 2.75rem !important;
}
.wulr-contact-form input:focus,
.wulr-contact-form textarea:focus,
.wulr-contact-form select:focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--primary);
}
.wulr-contact-form .gform_footer .gform_button {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--xs);
	padding: 1.125rem 1.75rem;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* Confirmation message matches the intro paragraph's stone color (not the
   darker default body ink) so the two read as one voice above/below the form. */
.wulr-contact-form .gform_confirmation_message {
	color: var(--wp--preset--color--stone);
}

/* ---- Subscribe page: condensed, centered email form on the green panel ---- */
.wulr-subscribe-panel { text-align: center; }
.wulr-subscribe-panel .wulr-eyebrow {
	color: var(--wp--preset--color--white);
	display: block;
}
/* Title + subline sit above the form. text-wrap: balance evens the lines so a
   single word can't drop to its own line (widow). */
.wulr-subscribe-panel .wulr-subscribe-title {
	color: var(--wp--preset--color--white);
	text-wrap: balance;
}
.wulr-subscribe-panel .wulr-subscribe-sub {
	color: rgba(255, 255, 255, 0.85); /* >=4.5:1 on the green panel (WCAG AA) */
	max-width: 38rem;
	margin-inline: auto;
	text-wrap: balance;
}
.wulr-subscribe-panel .gform_wrapper {
	max-width: 460px;
	margin-inline: auto;
	margin-top: 16px;
}
.wulr-subscribe-panel .gform_wrapper .gform_fields {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}
.wulr-subscribe-panel .gform_wrapper .gfield { width: 100%; margin: 0; }
/* The email placeholder and checkbox text carry the meaning; hide GF's labels. */
.wulr-subscribe-panel .gform_wrapper .gfield_label {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}
/* Email → white-outline pill, centered text. */
.wulr-subscribe-panel .gform_wrapper .gfield input[type="email"] {
	width: 100%;
	height: 56px;
	padding: 0 24px;
	border: 1.5px solid var(--wp--preset--color--white) !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--wp--preset--color--white) !important;
	font-family: var(--wp--preset--font-family--primary);
	font-size: 16px;
	text-align: center;
}
.wulr-subscribe-panel .gform_wrapper .gfield input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.85); }
.wulr-subscribe-panel .gform_wrapper .gfield input[type="email"]:focus { outline: 0; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55); }
/* Print / Online checkboxes — centered row, white. */
.wulr-subscribe-panel .gfield_checkbox { display: flex; justify-content: center; gap: 24px; }
.wulr-subscribe-panel .gfield_checkbox .gchoice { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.wulr-subscribe-panel .gfield_checkbox label { color: var(--wp--preset--color--white); font-family: var(--wp--preset--font-family--sans); font-size: 15px; margin: 0; }
.wulr-subscribe-panel .gfield_checkbox input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1.5px solid var(--wp--preset--color--white);
	border-radius: 3px;
	background: transparent;
	position: relative;
	cursor: pointer;
}
.wulr-subscribe-panel .gfield_checkbox input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid var(--wp--preset--color--white);
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
}
.wulr-subscribe-panel .gfield_checkbox input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 2px;
}
/* Submit → white pill button, centered. */
.wulr-subscribe-panel .gform_footer { display: flex; justify-content: center; padding: 0; margin: 4px 0 0; }
.wulr-subscribe-panel .gform_footer input[type="submit"],
.wulr-subscribe-panel .gform_footer button {
	height: 56px;
	padding: 0 40px;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--primary) !important;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 16px;
	font-weight: 800;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}
.wulr-subscribe-panel .gform_footer input[type="submit"]:hover,
.wulr-subscribe-panel .gform_footer button:hover { background: var(--wp--preset--color--muted) !important; }
/* Confirmation + validation read on the green panel. */
.wulr-subscribe-panel .gform_confirmation_message { color: var(--wp--preset--color--white); text-align: center; }
.wulr-subscribe-panel .validation_message { color: var(--wp--preset--color--white); }