/**
 * The handful of rules theme.json has no vocabulary for.
 *
 * Everything expressible as a global style - colour, type, spacing, layout -
 * lives in theme.json and is editable in the Site Editor. The named recipes
 * (eyebrow, label, card, rule, the five bands and the rest) are block style
 * variations in styles/blocks/ and styles/sections/. This file is only for
 * structural behaviour the settings API cannot describe, and for the rules
 * marked "legacy markup", which serve content written before those variations
 * existed and go when nothing uses their selector any more.
 *
 * Colours come from the palette: a tint is color-mix() of a preset, never a
 * typed rgba().
 */

/* ---- Media & Text panels ----------------------------------------------
   `imageFill` paints the media as a background so it can crop, but the block
   supplies no height of its own - the figure collapses to nothing unless the
   text column happens to be taller. The comp's panels are 540px. */
.wp-block-media-text.is-image-fill > .wp-block-media-text__media {
	min-height: 540px;
}
.wp-block-media-text.is-image-fill > .wp-block-media-text__content {
	padding: 4rem 3rem;
}
@media (max-width: 781px) {
	.wp-block-media-text.is-image-fill > .wp-block-media-text__media {
		min-height: 320px;
	}
	.wp-block-media-text.is-image-fill > .wp-block-media-text__content {
		padding: 3rem 1.5rem;
	}
}

/* A featured image inside a Media & Text figure has to fill it, not sit at its
   intrinsic size - this is the herd archive's per-post panel. */
.wp-block-media-text__media .wp-block-post-featured-image,
.wp-block-media-text__media .wp-block-post-featured-image img {
	height: 100%;
	width: 100%;
	margin: 0;
	object-fit: cover;
}

/* ---- Footer link lists -------------------------------------------------
   The `footer-links` list style (styles/blocks/footer-links.json). */
/* legacy markup: delete when no content/pattern uses .rh-footer__list */
.rh-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.rh-footer__list li { margin-bottom: 0.65rem; }
.rh-footer__list li:last-child { margin-bottom: 0; }
.rh-footer__list a {
	color: var(--wp--preset--color--muted-ink);
	text-decoration: none;
}
.rh-footer__list a:hover {
	color: var(--wp--preset--color--charcoal);
	text-decoration: underline;
}

/* ---- Query loop grids -------------------------------------------------- */
/* The herd preview cards are links to the whole card in the comp; here the
   image and title carry their own links, so give the card a hover state that
   ties them together. */
.wp-block-post-template.is-layout-grid > li > .wp-block-group {
	height: 100%;
	transition: box-shadow 0.3s;
}
.wp-block-post-template.is-layout-grid > li > .wp-block-group:hover {
	box-shadow: var(--wp--preset--shadow--card);
}
/* legacy markup: delete when no content/pattern uses .wp-block-post-template .wp-block-post-featured-image without is-style-poster */
/* ---- Summary images ----------------------------------------------------
   `contain`, not `cover`. A news summary image on this site is usually a
   poster or an announcement graphic whose content IS the text inside it -
   cropping one to a fixed-height card cuts the message in half, which is
   exactly what was happening on /news/ ("ENGAGE YOUR BRAND" was sliced off).
   Containing it letterboxes instead, and the parchment ground plus a little
   padding make that read as a frame rather than a mistake.

   The herd cards keep `cover`: those are photographs chosen as square crops,
   and letterboxing a horse portrait would look like the bug this rule fixes. */
.wp-block-post-template .wp-block-post-featured-image:not(.rh-herd-card__img, .rh-sponsor__logo, .rh-entry__thumb, .rh-more-card__thumb) {
	background-color: var(--wp--preset--color--parchment);
	padding: clamp(0.5rem, 1.5vw, 1rem);
	display: flex;
	align-items: center;
	justify-content: center;
}
.wp-block-post-template .wp-block-post-featured-image:not(.rh-herd-card__img, .rh-sponsor__logo, .rh-entry__thumb, .rh-more-card__thumb) img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.wp-block-post-template .wp-block-post-featured-image:not(.rh-herd-card__img, .rh-sponsor__logo, .rh-entry__thumb, .rh-more-card__thumb) a {
	display: flex;
	width: 100%;
	height: 100%;
}

/* Herd cards: square photographic crops, so filling is right. */
.wp-block-post-template .rh-herd-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The same reasoning for a single post's own header image - and a ceiling on
   it, so a tall graphic does not push the article off the first screen. */
.rh-page-body > .wp-block-post-featured-image,
.rh-page-body .wp-block-post-content + .wp-block-post-featured-image,
.wp-block-post-featured-image.alignfull {
	background-color: var(--wp--preset--color--parchment);
}
.wp-block-post-featured-image.alignfull img {
	width: 100%;
	max-height: 52vh;
	object-fit: contain;
	margin-inline: auto;
	display: block;
}

/* ---- Cover headings ---------------------------------------------------- */
/* The comp sets the second line of each display headline in italic at normal
   weight against the semibold first line. */
.wp-block-cover h1 em,
.wp-block-cover h2 em {
	font-weight: 400;
}

/* Cover inner containers are width-constrained by their own layout; this stops
   a full-bleed cover from inheriting the root padding twice. */
.wp-block-cover.alignfull > .wp-block-cover__inner-container {
	width: 100%;
}

/* ---- Skip link --------------------------------------------------------- */
/* Block themes print one, but the default styling is easy to lose. */
.skip-link:focus {
	background-color: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--charcoal);
	outline: 2px solid var(--rh-focus-ink, var(--wp--preset--color--brick));
	outline-offset: 2px;
}

/* ---- Herd cards -------------------------------------------------------- */
.rh-herd-card { align-self: stretch; }
.rh-herd-card .rh-herd-card__img { margin: 0; }
.rh-herd-card .rh-herd-card__img img {
	width: 100%;
	height: 288px;
	object-fit: cover;
	display: block;
	transition: transform 0.5s;
}
.rh-herd-card { overflow: hidden; transition: box-shadow 0.3s; }
.rh-herd-card:hover { box-shadow: var(--wp--preset--shadow--card); }
.rh-herd-card:hover .rh-herd-card__img img { transform: scale(1.04); }
.rh-herd-card :is(h2, h3) a { color: inherit; text-decoration: none; }
.rh-herd-card :is(h2, h3) a:hover { text-decoration: underline; }

/* ---- Root flow ---------------------------------------------------------
   .wp-site-blocks is a flow layout, so it puts a block-gap between the header
   part, main and the footer. The comp's sections butt straight up against each
   other and the hero starts at the top of the viewport, so that first gap
   showed as a strip of body background above the hero. The sections carry
   their own generous padding; the gap between them is not wanted anywhere.
   The theme's own templates say so on <main> itself (margin-top:0); the
   WooCommerce shop and cart templates do not, and a template-part wrapper has
   no spacing control at all, so the footer's is here. */
.wp-site-blocks > main,
.wp-site-blocks > .wp-block-template-part {
	margin-block-start: 0;
}
/* Full-bleed sections inside main are flush by design. */
.wp-site-blocks main > .alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ---- Page frame --------------------------------------------------------
   Every page opens the same way: a parchment band carrying the title, then the
   content. That band is what makes a converted legacy page and a pattern-built
   page read as the same site. */

/* A page whose content supplies its own <h1> - anything built from the page
   patterns, which open on a cover - has its post-title suppressed by the
   duplicate-title filter in functions.php, and the band around it is then
   removed by the strip filter beside it, which drops any .rh-page-header
   with no <h1> left in it. Nothing for the stylesheet to hide. */
.rh-page-header .wp-block-post-title {
	margin: 0;
}

/* ---- Relaid-out page bodies --------------------------------------------
   The layouts are built from full-bleed bands that butt straight up against
   each other, so the flow gap between them has to go. `main` and .rh-page-body
   are both plain flow containers on purpose: nesting constrained layouts would
   clip `alignfull` to the 760px measure, and the hero would render as a box in
   the middle of the column instead of spanning the page. */
.rh-page-body > .wp-block-post-content > .alignfull {
	margin-block: 0;
}
/* Anything that is not a band still gets a measure and some air. */
.rh-page-body > .wp-block-post-content > *:not(.alignfull) {
	margin-block: 2.5rem;
}
.rh-page-body .wp-block-image img {
	height: auto;
}

/* No max-width override on headings here. An earlier version set
   `.rh-page-body .wp-block-heading { max-width: 100% }` to rescue headings on
   the straight-converted pages, and it then outranked the constrained layout's
   own measure - so every section heading in a relaid-out band ran the full
   width of the viewport while its paragraphs sat correctly at 820px. The
   layout owns the measure; nothing here should argue with it. */

/* ---- Media & Text, uncropped -------------------------------------------
   These panels no longer use `imageFill`, so the image renders at its own
   aspect ratio instead of being cropped to fill. The site's images are largely
   posters and infographics whose content IS the text inside them; cropping one
   to a half-width panel destroys it. Height comes from the content now, so the
   fixed 540px floor goes too. */
.wp-block-media-text:not(.is-image-fill) > .wp-block-media-text__media {
	align-self: center;
}
.wp-block-media-text:not(.is-image-fill) > .wp-block-media-text__media img {
	width: 100%;
	height: auto;
	display: block;
}
.wp-block-media-text:not(.is-image-fill) > .wp-block-media-text__content {
	padding: clamp(2rem, 4vw, 4rem);
}

/* ---- Carousel ----------------------------------------------------------
   A scroll-snap track, not a script. The markup is a plain flex group of
   core/image blocks, so it stays editable in the block editor, works with
   JavaScript off, and is swipeable on touch for free. carousel.js only adds
   the arrows and the dots on top. */
.rh-carousel {
	display: flex;
	flex-wrap: nowrap;
	gap: clamp(0.75rem, 2vw, 1.5rem);
	overflow-x: auto;
	/* `proximity`, not `mandatory`. Under mandatory snapping Chrome refuses a
	   programmatic scroll outright - scrollLeft assignment, scrollTo and
	   scrollBy all resolve straight back to the current snap point, so the
	   arrows and dots did nothing at all while dragging still worked.
	   Proximity keeps the snap feel and leaves scripted scrolling alone.

	   `scroll-behavior` is deliberately NOT set here either: with snapping on,
	   the CSS-level smooth behaviour blocks the same scripted scrolls. The
	   easing is passed per call from carousel.js instead, which also lets it
	   honour prefers-reduced-motion. */
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	padding-bottom: 0.5rem;
	/* Let the track bleed to the edges so a slide can sit half off-screen -
	   that is what tells you there is more to scroll. */
	margin-inline: 0;
}
.rh-carousel::-webkit-scrollbar { display: none; }

.rh-carousel > * {
	scroll-snap-align: center;
	flex: 0 0 clamp(260px, 62%, 760px);
	margin: 0;
}
.rh-carousel img {
	width: 100%;
	height: auto;
	display: block;
}

.rh-carousel-wrap { position: relative; }
.rh-carousel-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 1.25rem;
}
.rh-carousel-btn {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--wp--preset--color--line);
	background: transparent;
	color: var(--wp--preset--color--charcoal);
	cursor: pointer;
	border-radius: 50%;
	transition: border-color 0.15s, background-color 0.15s;
}
.rh-carousel-btn:hover:not([disabled]) {
	border-color: var(--wp--preset--color--charcoal);
	background-color: var(--wp--preset--color--cream);
}
.rh-carousel-btn[disabled] { opacity: 0.3; cursor: default; }
.rh-carousel-btn:focus-visible {
	outline: 2px solid var(--rh-focus-ink, var(--wp--preset--color--brick));
	outline-offset: 2px;
}
.rh-carousel-btn svg { width: 16px; height: 16px; }
/* carousel.js makes a track with nothing focusable in it a tab stop, so the
   arrow keys can scroll it; this is where that focus shows. */
.rh-carousel:focus-visible {
	outline: 2px solid var(--rh-focus-ink, var(--wp--preset--color--brick));
	outline-offset: 4px;
}

/* Each dot is a 24px button with the 7px dot drawn inside it. The dots were
   the buttons themselves, 7px across and 6px apart, which is a target you
   have to aim at (2.5.8 asks for 24px). The row looks the same; it is just
   easier to hit. */
.rh-carousel-dots { display: flex; gap: 0; align-items: center; }
.rh-carousel-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
}
.rh-carousel-dot::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	/* Muted, not the hairline colour: a dot is a control, and at 1.3:1 the
	   inactive ones did not read as anything you could press (1.4.11). */
	background: var(--wp--preset--color--muted);
	transition: background-color 0.2s;
}
.rh-carousel-dot[aria-current="true"]::before { background: var(--wp--preset--color--brick); }
.rh-carousel-dot:focus-visible {
	outline: 2px solid var(--rh-focus-ink, var(--wp--preset--color--brick));
	outline-offset: 2px;
}



/* ---- Image scale -------------------------------------------------------
   Removing `imageFill` stopped the cropping but took the ceiling off with it:
   a 1200x900 poster rendered at 1200px tall, and the page grew from 15,000 to
   21,500px of mostly photograph. Cap on the VIEWPORT, not on a pixel width, so
   a tall poster and a wide photo both land at a size you can take in at a
   glance - and `width:auto` keeps the aspect ratio, so nothing is cropped. */
.rh-page-body .wp-block-image img,
.rh-page-body .wp-block-media-text__media img {
	max-height: 58vh;
	width: auto;
	max-width: 100%;
	margin-inline: auto;
}
.rh-page-body .wp-block-image {
	display: flex;
	justify-content: center;
}
.rh-page-body .wp-block-media-text__media {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* A carousel slide is already only ~62% of the track, so it needs less. */
.rh-carousel .wp-block-image img {
	max-height: 46vh;
}

/* The bands were sized for cropped panels; with the images capped they can
   breathe less. This is the rhythm for a band that sets no padding of its
   own. It does NOT outrank a pattern: every band pattern writes its padding
   inline (var:preset|spacing|60, |70 for the Stay family), and an inline
   style beats any rule here — so the band's own block attributes, editable
   in the editor, are where a page's vertical rhythm is decided. */
.rh-page-body > .wp-block-post-content > .wp-block-group.alignfull {
	padding-top: clamp(1.75rem, 3.2vw, 3rem);
	padding-bottom: clamp(1.75rem, 3.2vw, 3rem);
}

/* ---- Measure inside wide bands -----------------------------------------
   A wide band exists so an image or a gallery can use the width. Prose should
   not: at 1280px a paragraph runs to about 150 characters a line, which is
   roughly twice a comfortable measure. Text holds 820px and centres; the
   media keeps the room. */
.rh-page-body .wp-block-group.alignfull > p,
.rh-page-body .wp-block-group.alignfull > h2,
.rh-page-body .wp-block-group.alignfull > h3,
.rh-page-body .wp-block-group.alignfull > ul,
.rh-page-body .wp-block-group.alignfull > ol,
.rh-page-body .wp-block-group.alignfull > .wp-block-quote {
	max-width: var(--wp--custom--measure, 820px);
	/* On the rail, not centred on its own axis: the columns and galleries in
	   the sections either side of it start at the rail, and prose that centred
	   itself would sit on a different left edge to all of them. Centred text
	   keeps its own alignment through the rule below.

	   !important for the same reason as the post-content family above: core
	   centres constrained children with `margin-left: auto !important`. */
	margin-inline-start: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-inline-end: auto !important;
}
.rh-page-body .wp-block-group.alignfull > .has-text-align-center {
	margin-inline: auto !important;
}

/* ---- Text styles -------------------------------------------------------
   `eyebrow` and `label` are block style variations, styles/blocks/eyebrow.json
   and label.json: each declares its block types and its values, which come
   from theme.json settings.custom, and WordPress registers it, lists it in the
   editor and prints it - nothing in PHP and nothing here. They take their
   colour from --rh-eyebrow-ink / --rh-label-ink when a band section style
   sets one, and from brick / muted when nothing does. */

/* ---- Event capsules ----------------------------------------------------
   A list of comparable things, set so it can be scanned. One ground for the
   whole list with a hairline between entries - the first version alternated
   cream and parchment per entry, which striped the page and made a list of
   fifteen read as fifteen unrelated sections. */
.rh-entry {
	display: grid;
	/* The entry is emitted as a FLOW group, not a constrained one. WordPress's
	   constrained layout sets a max-width and auto margins on every child, which
	   sizes grid tracks from their contents rather than from the template - the
	   thumbnail took 500px and the text 150px. */
	/* The thumbnail column is reserved on EVERY entry, with or without an
	   image. Sizing it only when a thumbnail exists left entries starting at two
	   different left edges down the same list, which is most of what made the
	   first attempt look untidy. An empty rail reads as alignment; a ragged one
	   reads as a mistake. */
	/* The photograph is the second thing you read after the dateline, so it
	   gets room: the rail went from ~142px to ~205px at the 820 measure, which
	   is 3.5x the picture area. The frame it used to sit in - a parchment
	   ground with a clamped 16px pad, inherited from the poster treatment that
	   /news/ needs - is excluded above instead, so the photograph fills its
	   holder and the only edge left is the photograph's own. */
	grid-template-columns: clamp(128px, 26%, 208px) 1fr;
	max-width: var(--wp--custom--measure);
	margin-inline: auto;
	gap: 0 clamp(1rem, 2.5vw, 1.75rem);
	align-items: start;
	background-color: transparent;
}

/* ---- The entry as a card ----------------------------------------------
   The archive's entries take the card vocabulary the rest of the site now
   uses — .rh-past-entry and .rh-roster__card — so a list of what is coming up
   and a grid of what has been are plainly the same kind of object. Brick rule
   along the top, hairline frame, a radius on the photograph, and the whole
   card answering the pointer.

   Scoped to the modifier, not to .rh-entry, because the converted page at
   /events-legacy/ writes its own inline border and padding into post content
   and would fight this.

   Three columns on a wide screen: photograph, words, and the actions on a
   rail of their own. The registration buttons used to sit inline after the
   excerpt, which put the primary action in a different place on every entry
   depending on how long the excerpt was. */
/* ---- The mark that caps a card -----------------------------------------
   Eight things on this site used to be capped the same way: event rows,
   the "also coming up" cards, both rosters, past events, the signpost
   tiles, the shop cards and the value chips. All of them a 1px hairline
   all round, a 3px brick border along the TOP, and a corner radius.
   That combination cannot be drawn cleanly. Where a 3px edge meets a 1px
   edge the browser mitres between the two widths around the curve, and
   because the two carry different colours the taper is visible as a wedge
   of neither — a notch in the corner that gets worse the further you zoom.
   It is also the single most recognisable card on the internet.

   So the accent stops being a border. It is a short brick rule set in from
   the top-left corner, clear of the curve, which is the same mark the site
   already draws under a heading — the card now belongs to the same family
   as the writing instead of to a dashboard. The frame is one uniform
   hairline, which has no mitre to get wrong at any radius.

   The mark is the hover, too: it draws itself out to half again its length
   rather than the card changing colour underneath. transform, so it costs
   no layout; transform-origin left, so it grows the way a line is written.

   The chips are the exception and are dealt with where they are defined:
   their composition is centred, so a mark set in from the left would be
   the one thing on the card that is not. They keep the rule under their
   label and that rule carries the brick instead.

   Absolutely positioned on purpose — most of these cards are flex
   containers and one is a grid, and an in-flow ::before would become an
   item in each of them.

   `card` and `card-raised` (styles/blocks/) are the one card recipe — ground,
   hairline, radius, and for the raised one the shadow. This block is what
   the recipe cannot say: the mark and the way it answers the pointer. The
   rh-* names beside them are the cards written before the variations, kept
   here until no content or pattern uses them. */
.is-style-card,
.is-style-card-raised,
.rh-entry--card,
.rh-more-card,
.rh-roster__card,
.rh-past-entry,
.rh-tile,
.rh-events-empty,
.woocommerce ul.products li.product.rh-shop-card {
	position: relative;
}
/* The four that used a bare 10px now say which 10px they mean. The tile is
   square by design and the shop card keeps its own radius, so neither is
   given one here. */
.rh-entry--card,
.rh-more-card,
.rh-roster__card,
.rh-past-entry {
	border-radius: var(--wp--custom--media--frame, 10px);
}
.is-style-card::before,
.is-style-card-raised::before,
.rh-entry--card::before,
.rh-more-card::before,
.rh-roster__card::before,
.rh-past-entry::before,
.rh-tile::before,
.rh-events-empty::before,
.woocommerce ul.products li.product.rh-shop-card::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	left: 1.15rem;
	width: 2.25rem;
	height: 3px;
	border-radius: 0 0 2px 2px;
	background-color: var(--wp--preset--color--brick);
	transform-origin: left center;
	transition:
		transform 0.3s cubic-bezier(0.22, 0.7, 0.3, 1),
		background-color 0.2s ease;
}
/* The one thing the mark must not do is animate for somebody who asked the
   site to stop moving, so it only grows where motion is welcome. The length
   it rests at is the length it keeps; the colour still changes. */
:is(
	.is-style-card, .is-style-card-raised,
	.rh-entry--card, .rh-more-card, .rh-roster__card, .rh-past-entry,
	.rh-tile, .woocommerce ul.products li.product.rh-shop-card
):is(
	:has(a:hover), :has(a:focus-visible), :has(a:focus-within)
)::before {
	background-color: var(--wp--preset--color--brick-hover);
}
@media (prefers-reduced-motion: no-preference) {
	:is(
		.is-style-card, .is-style-card-raised,
		.rh-entry--card, .rh-more-card, .rh-roster__card, .rh-past-entry,
		.rh-tile, .woocommerce ul.products li.product.rh-shop-card
	):is(
		:has(a:hover), :has(a:focus-visible), :has(a:focus-within)
	)::before {
		transform: scaleX(1.55);
	}
}
@media (prefers-reduced-motion: reduce) {
	.is-style-card::before,
	.is-style-card-raised::before,
	.rh-entry--card::before,
	.rh-more-card::before,
	.rh-roster__card::before,
	.rh-past-entry::before,
	.rh-tile::before,
	.rh-events-empty::before,
	.woocommerce ul.products li.product.rh-shop-card::before {
		transition: background-color 0.2s ease;
	}
}

/* The lift. A card that holds a link rises a little and its hairline warms
   under the pointer; the raised card's shadow deepens to the lift preset.
   Motion only where it is welcome. The legacy cards below carry their own
   copies of this until they are migrated. */
.is-style-card,
.is-style-card-raised {
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
:is(.is-style-card, .is-style-card-raised):is(:has(a:hover), :has(a:focus-visible)) {
	border-color: var(--wp--preset--color--tan);
}
.is-style-card-raised:is(:has(a:hover), :has(a:focus-visible)) {
	box-shadow: var(--wp--preset--shadow--lift);
}
@media (prefers-reduced-motion: no-preference) {
	:is(.is-style-card, .is-style-card-raised):is(:has(a:hover), :has(a:focus-visible)) {
		transform: translateY(-2px);
	}
}
@media (prefers-reduced-motion: reduce) {
	.is-style-card,
	.is-style-card-raised {
		transition: none;
	}
}
/* One shade off whatever it sits on. A band section style sets
   --rh-card-ground; the tinted bands written before the section styles say
   so with a colour class instead, and get the same answer here. */
/* legacy markup: delete when no content/pattern uses .has-parchment-background-color / .has-tan-background-color on a band */
:where(.has-parchment-background-color, .has-tan-background-color) {
	--rh-card-ground: var(--wp--preset--color--cream);
}

.rh-entry--card {
	max-width: none;
	margin-inline: 0;
	grid-template-columns: clamp(140px, 22%, 272px) minmax(0, 1fr) minmax(170px, 15%);
	gap: 0 clamp(1.1rem, 2.4vw, 2rem);
	padding: clamp(1.1rem, 2.2vw, 1.6rem);
	background-color: var(--wp--preset--color--parchment);
	border: 1px solid var(--wp--preset--color--line);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
/* Cards need air between them that a hairline-separated list did not: with a
   frame of its own, each entry is an object, and objects touching read as a
   table. Set on the flow gap core already emits rather than by changing the
   list's display, which would double it. */
.rh-events--upcoming .wp-block-post-template > * + * {
	margin-block-start: clamp(1rem, 2vw, 1.5rem);
}
.rh-entry--card:has(a:hover),
.rh-entry--card:has(a:focus-visible) {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--card);
	border-color: var(--wp--preset--color--tan);
}
/* The photograph is inside the card's padding rather than bled to its edge,
   which is what keeps the top of the image holder level with the top of the
   date capsule beside it — a measured alignment this list already had and
   should not lose to a flourish. */
.rh-entry--card .rh-entry__thumb {
	border-radius: var(--wp--custom--media--radius-small, 8px);
	overflow: hidden;
}
/* 3:2 rather than 4:3. The photograph is the tallest thing in the row, so it
   sets the card's height: at 4:3 it stood 55px taller than the words beside
   it and every card carried that much air under its own text. 3:2 halves
   that and is the ratio the photographs were taken at. The ratio stays FIXED
   rather than stretching to the text, because a list whose pictures are all
   the same shape is the thing that makes it scannable. */
.rh-entry--card .rh-entry__thumb img {
	aspect-ratio: 3 / 2;
	transition: transform 0.5s ease;
}
.rh-entry--card:has(a:hover) .rh-entry__thumb img {
	transform: scale(1.04);
}

/* The date is the one piece of an event listing that is data rather than
   prose, and it is what people scan for, so it is set apart: a capsule on the
   tan ground rather than another line of small caps. Its BOX is what aligns
   with the photograph beside it, so the leading trim the bare label needed is
   dropped here. */
.rh-entry--card .rh-entry__body > .rh-entry__when {
	/* Block-level and shrink-to-fit, not inline-block: an inline-block sits on
	   a line box, and the half-leading above that line box pushed the capsule
	   5.56px below the top of the photograph beside it. */
	display: block;
	width: fit-content;
	max-width: 100%;
	margin: 0 0 0.6rem;
	padding: 0.34rem 0.6rem;
	background-color: color-mix(in srgb, var(--wp--preset--color--tan) 32%, transparent);
	border-radius: 6px;
	color: var(--wp--preset--color--charcoal);
	text-box-trim: none;
	line-height: 1.3;
}
.rh-entry--card .rh-entry__body > .rh-entry__when:empty {
	display: none;
}

/* The action rail. The registration button leads at full column width; the
   quiet link to the event's own page sits under it rather than beside it. */
.rh-entry--card > .rh-entry__actions {
	grid-column: 3;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.7rem;
	margin: 0;
}
/* The rail is a flex column with a gap of its own; core's flow layout was
   also putting its 24px block gap between the button and the link, so the two
   halves of one control sat 46px apart. */
.rh-entry--card > .rh-entry__actions > * {
	margin-block: 0;
}
.rh-entry--card > .rh-entry__actions .wp-block-buttons {
	margin: 0;
}
.rh-entry--card > .rh-entry__actions .wp-block-button {
	width: 100%;
}
.rh-entry--card > .rh-entry__actions .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
	padding: 0.7rem 1rem;
}
.rh-entry--card > .rh-entry__actions .wp-block-read-more {
	text-align: center;
}
/* An event with no registration link is a card whose rail holds only the
   quiet link. Keeping the rail reserved — as the thumbnail column already is
   — is what stops the body column changing width from one entry to the next. */

@media (max-width: 1023px) {
	.rh-entry--card {
		grid-template-columns: clamp(128px, 26%, 220px) minmax(0, 1fr);
	}
	.rh-entry--card > .rh-entry__actions {
		grid-column: 2;
		grid-row: 2;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		gap: 0.6rem 1.2rem;
		margin-top: 0.9rem;
	}
	.rh-entry--card > .rh-entry__actions .wp-block-button,
	.rh-entry--card > .rh-entry__actions .wp-block-button__link {
		width: auto;
	}
}
@media (max-width: 600px) {
	.rh-entry--card > .rh-entry__actions {
		grid-column: 1;
		grid-row: 3;
	}
}
@media (prefers-reduced-motion: reduce) {
	.rh-entry--card,
	.rh-entry--card:has(a:hover),
	.rh-entry--card:has(a:focus-visible),
	.rh-entry--card .rh-entry__thumb img,
	.rh-entry--card:has(a:hover) .rh-entry__thumb img {
		transition: none;
		transform: none;
	}
}
.rh-entry__thumb {
	margin: 0;
	padding: 0;
	background: none;
	overflow: hidden;
}
/* The figure's link is a flex box only under the framed treatment this thumb
   is now excluded from, so it has to carry its own fill. */
.rh-entry__thumb a {
	display: block;
}
.rh-entry__thumb img {
	width: 100%;
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	display: block;
}
/* No explicit grid-column on either child: auto-placement puts the thumbnail
   in track 1 and the body in track 2. `grid-column: -1` named the LAST line,
   which with a stray third track meant the body landed in a 155px column. */
.rh-entry__body {
	grid-column: 2;
	min-width: 0;
	/* The entry is a grid, but WordPress still emits it as a flow layout, so
	   the body - being the second child - picked up a 24px block-gap margin.
	   On a two-column grid that is not a gap between stacked blocks, it is a
	   24px drop of the whole text column, which left the top of the image
	   holder sitting 24px above the dateline beside it. */
	margin-top: 0;
}
/* ...and with the boxes flush, the eyebrow's own half-leading would still put
   its capitals ~3px below the holder's top edge. Trimming the leading to the
   cap line makes the two tops agree optically as well as by measurement.
   Unsupported elsewhere, where it degrades to the flush-box alignment. */
.rh-entry__body > .is-style-label {
	text-box-trim: trim-start;
	text-box-edge: cap alphabetic;
}

/* 1.08, the post title's own leading: the 1.2 this used to ask for lost to a
   later .wp-block-post-title rule, and the list was set against what won. */
.rh-entry__title {
	margin: 0 0 0.4rem;
	line-height: 1.08;
	text-wrap: balance;
}
.rh-entry__body > .is-style-label {
	margin: 0 0 0.3rem;
}
.rh-entry__body > p {
	margin: 0 0 0.7rem;
}

/* Actions sit on one line with the fold control, left-aligned with everything
   else. They used to be centred while the rest of the capsule was left, which
   is what made the list look untidy more than anything else. */
.rh-entry__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1rem;
	margin-top: 0.9rem;
}
.rh-entry__actions .wp-block-buttons {
	margin: 0;
	justify-content: flex-start;
}
.rh-entry__actions .wp-block-button__link {
	padding: 0.6rem 1.4rem;
	font-size: var(--wp--preset--font-size--small);
}

/* ---- The teaser fold ---------------------------------------------------
   Closed, the entry shows the first ~100px of its real copy under a fade;
   open, it runs to full height. The copy is never duplicated - there is one
   set of paragraphs and CSS decides how much of it you see.

   ::details-content is what makes that possible: before it, a closed <details>
   hid its content outright and the only way to show a preview was to write a
   separate summary or repeat the text. interpolate-size lets the open
   transition animate to auto rather than snapping. */
.rh-details {
	margin: 0;
	border: 0;
	padding: 0;
	/* Flex column so the control can sit BELOW the teaser it reveals - in DOM
	   order <summary> comes first, and a "read more" above the text it opens
	   reads backwards. */
	display: flex;
	flex-direction: column;
	interpolate-size: allow-keywords;
}
.rh-details::details-content {
	/* content-visibility, not just height. Chrome's UA stylesheet sets
	   `content-visibility: hidden` on a CLOSED ::details-content, so giving it a
	   block-size alone reserved 100px of blank space and showed nothing. The
	   teaser needs the content rendered AND clipped. */
	content-visibility: visible;
	block-size: 100px;
	overflow: hidden;
	transition: block-size 0.32s ease, mask-image 0.32s ease;
	mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
	-webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
}
.rh-details[open]::details-content {
	content-visibility: visible;
	block-size: auto;
	mask-image: none;
	-webkit-mask-image: none;
}
/* Where ::details-content is unavailable the closed state simply hides its
   content, as <details> always did. The control still works; only the teaser
   is missing. */
@supports not selector(::details-content) {
	.rh-details::details-content { block-size: auto; }
}

/* The control reads as a quiet text link under the teaser, not a button. */
.rh-details > summary {
	cursor: pointer;
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	order: 2;
	margin-top: 0.5rem;
	font-size: var(--wp--custom--label--size, 0.625rem);
	font-weight: var(--wp--custom--label--weight, 600);
	letter-spacing: var(--wp--custom--tracking--label, 0.22em);
	text-transform: uppercase;
	color: var(--wp--preset--color--brick);
}
.rh-details > summary::-webkit-details-marker { display: none; }
.rh-details > summary::after {
	content: "";
	width: 0.4em;
	height: 0.4em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-0.1em);
	transition: transform 0.25s;
}
.rh-details[open] > summary::after {
	transform: rotate(-135deg) translateY(-0.02em);
}
.rh-details > summary:focus-visible {
	outline: 2px solid var(--rh-focus-ink, var(--wp--preset--color--brick));
	outline-offset: 3px;
}
.rh-details p { margin: 0 0 0.7rem; }

@media (max-width: 600px) {
	.rh-entry { grid-template-columns: 1fr; }
	/* Stacked, the two ARE blocks one above the other, so the gap comes back -
	   the thumbnail's own margin carries it. */
	.rh-entry__body { grid-column: 1; margin-top: 0; }
	.rh-entry__thumb { margin-bottom: 1.1rem; }
	.rh-entry__thumb img { aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
	.rh-details::details-content,
	.rh-details > summary::after { transition: none; }
}

/* ---- Letterbox fill ----------------------------------------------------
   A contained summary image leaves bars either side of it. Filling them with
   the image itself - blurred well past recognition, pushed out beyond the
   frame so no edge shows, and tinted back toward the palette - means every
   card is coloured by its own picture. Flat parchment read as a missing
   image; this reads as framing.

   `isolation: isolate` makes the figure its own stacking context so the
   z-index:-1 layer sits behind the photograph but in front of the card.

   Excluded: herd cards (full-bleed portraits, nothing to letterbox) and
   sponsor logos, which need clean ground — a logo blurred behind itself reads
   as a printing fault. */
.wp-block-post-template .wp-block-post-featured-image:not(.rh-herd-card__img, .rh-sponsor__logo, .rh-entry__thumb, .rh-more-card__thumb) {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
.wp-block-post-template .wp-block-post-featured-image:not(.rh-herd-card__img, .rh-sponsor__logo, .rh-entry__thumb, .rh-more-card__thumb)::before {
	content: "";
	position: absolute;
	inset: 0;
	/* z-index 0, not -1. A negative z-index puts the layer BEHIND the figure's
	   own background-color, which paints over it - the blur was rendering
	   correctly and being completely hidden by the parchment beneath it. */
	z-index: 0;
	background-image: var(--rh-fill);
	background-size: cover;
	background-position: center;
	/* Scaled up so the blur never samples past the edge and leaves a halo. */
	transform: scale(1.3);
	filter: blur(34px) saturate(1.5);
	opacity: 0.6;
}
/* A wash of the page ground over the top, so the fill stays in the theme's
   register instead of whatever the photograph happens to be. */
.wp-block-post-template .wp-block-post-featured-image:not(.rh-herd-card__img, .rh-sponsor__logo, .rh-entry__thumb, .rh-more-card__thumb)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--wp--preset--color--parchment) 62%, transparent),
		color-mix(in srgb, var(--wp--preset--color--cream) 48%, transparent)
	);
}
.wp-block-post-template .wp-block-post-featured-image:not(.rh-herd-card__img, .rh-sponsor__logo, .rh-entry__thumb, .rh-more-card__thumb) img {
	position: relative;
	z-index: 2;
}

/* ---- Post footer -------------------------------------------------------
   A post ends somewhere, and until now it ended by simply stopping. Previous
   and next, then three more posts. The links' colour is theme.json's
   (styles.blocks.core/post-navigation-link); the row is laid out here until
   the template owns it. */
.rh-post-nav {
	display: flex;
	gap: 1.5rem;
	justify-content: space-between;
}
.rh-post-nav .wp-block-post-navigation-link {
	max-width: 46%;
	margin: 0;
}
.rh-post-nav .post-navigation-link-next { text-align: right; margin-left: auto; }

.rh-more {
	gap: clamp(1rem, 2.5vw, 2rem);
}
.rh-more > li > .wp-block-post-featured-image {
	background-color: var(--wp--preset--color--cream);
	margin-bottom: 0.6rem;
}
/* ---- "Also coming up" cards -------------------------------------------
   The row used to be three bare stacks: a 150px-tall contained image inside a
   parchment box 384px wide, so a 4:3 photograph showed at 200x150 with 92px
   of pale ground either side, and the title and date sat loose on the band
   underneath. Same vocabulary as the past-event cards instead - one ground,
   a brick rule capping each card, the dateline doing the work of an eyebrow -
   except these sit ON parchment, so the card takes the cream. */
.rh-more-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background-color: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--line);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.rh-more-card:has(a:hover),
.rh-more-card:has(a:focus-visible) {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--lift);
	border-color: var(--wp--preset--color--tan);
}
/* The ratio belongs to the frame: the pictures are whatever shape the event
   photographer had, and one shared image band is what makes three of them
   read as a row. The photograph fills it - this thumb is excluded from the
   contained-poster treatment further up. */
.rh-more-card__thumb {
	margin: 0;
	padding: 0;
	aspect-ratio: 16 / 9;
	background-color: var(--wp--preset--color--parchment);
	overflow: hidden;
}
.rh-more-card__thumb a {
	display: block;
	width: 100%;
	height: 100%;
}
.rh-more-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.rh-more-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1rem 1.15rem 1.2rem;
}
.rh-more-card__body > * {
	margin: 0;
}
.rh-more-card__body > .is-style-label {
	color: var(--wp--preset--color--brick);
}
.rh-more-card .wp-block-post-title {
	line-height: 1.2;
	text-wrap: balance;
}
.rh-more-card .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--charcoal);
}
.rh-more-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--brick);
}
@media (prefers-reduced-motion: reduce) {
	.rh-more-card,
	.rh-more-card:has(a:hover),
	.rh-more-card:has(a:focus-visible) {
		transition: none;
		transform: none;
	}
}
.rh-more .wp-block-post-title {
	margin: 0 0 0.25rem;
	line-height: 1.25;
}
.rh-more .wp-block-post-title a { text-decoration: none; }
.rh-more .wp-block-post-date { margin: 0; }

/* The date band stands down with the title on any post whose content opens
   with its own hero - the date is carried into that hero instead. */
.rh-page-header .wp-block-post-date {
	margin: 0 0 0.5rem;
}

/* ---- Events listing ----------------------------------------------------
   The capsule styles above (.rh-entry) were built for the converted events
   page and are reused here by templates/archive-rh_event.html, so a hand-built
   page and a query loop look like the same list. These are the parts the
   query loop adds: a plain fold for past events, and the "Event details" link
   sitting on the same line as the registration button. */
/* The label recipe and the muted ink are theme.json's (core/read-more). */
.rh-entry__actions .wp-block-read-more {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}
.rh-entry__actions .wp-block-read-more:hover {
	color: var(--wp--preset--color--brick);
}

/* A disclosure for a LIST, not for folded prose: no teaser, no fade. The
   .rh-details treatment above shows the first 100px of its own copy, which is
   right for one entry's body and wrong for an index of past events.

   It is also the heading of its own band, so it is drawn as a control rather
   than as a line of small type with a triangle: a full-width row on the page
   ground, framed like the cards below it, with the chevron on the far side
   where a disclosure's control belongs. As a bare label it read as a debug
   toggle somebody had left in. */
.rh-details-plain > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: var(--wp--custom--label--weight);
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--charcoal);
	cursor: pointer;
	padding: 1rem 1.25rem;
	background-color: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--media--frame);
	transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
	list-style: none;
}
.rh-details-plain > summary::-webkit-details-marker {
	display: none;
}
.rh-details-plain > summary::after {
	content: "";
	flex: none;
	width: 0.45em;
	height: 0.45em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-0.12em);
	transition: transform 0.25s ease;
}
.rh-details-plain[open] > summary::after {
	transform: rotate(-135deg) translateY(-0.02em);
}
.rh-details-plain > summary:hover {
	color: var(--wp--preset--color--brick);
	border-color: var(--wp--preset--color--tan);
}
.rh-details-plain > summary:focus-visible {
	outline: 2px solid var(--rh-focus-ink, var(--wp--preset--color--brick));
	outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
	.rh-details-plain > summary,
	.rh-details-plain > summary::after {
		transition: none;
	}
}

/* ---- The archive's section head ---------------------------------------
   The upcoming list had no heading at all: the page went from a photographic
   hero straight into rows, so nothing said what the rows were. Every other
   band on the site opens with an eyebrow and a heading on the rail. */
.rh-events-head {
	margin-block-end: clamp(1.5rem, 3vw, 2.25rem);
}
.rh-events-head > .is-style-eyebrow {
	margin: 0 0 0.4rem;
}
.rh-events-head__title {
	margin: 0;
}

/* The empty state is a card too, not a tinted slab — it is what the page IS
   when nothing is booked, so it should carry the same weight as the entries
   it stands in for. */
.rh-events-empty {
	background-color: var(--wp--preset--color--parchment);
	border: 1px solid var(--wp--preset--color--line);
}

/* ---- Sponsor band ------------------------------------------------------
   Logos arrive as whatever the sponsor sent: different aspect ratios, some on
   white, some transparent. Containing rather than cropping keeps each one
   whole, and a common height keeps the row from looking ragged. */
.rh-sponsors .wp-block-post-template {
	align-items: stretch;
	justify-items: stretch;
	gap: clamp(0.9rem, 2vw, 1.4rem);
	margin-block: var(--wp--preset--spacing--50);
	/* auto-FIT, not core's auto-fill: the band holds however many sponsors
	   there are, and auto-fill keeps the empty tracks, so any count that is
	   not an exact multiple of the column count leaves the row stopping short
	   of the rail. auto-fit collapses them and the marks share the width.
	   It is also what gets a phone two columns instead of six stacked tiles. */
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
/* Each mark sits in a tile of its own. The logos are whatever each
   organisation sent: some are transparent PNGs, some are artwork on a solid
   white rectangle (Rotary's is), and loose on a tinted band the white ones
   read as a mistake while the transparent ones float. A common tile — the
   page ground, the card's hairline and radius — gives them all the same edge
   and lets a white logo sit inside something rather than on top of it. */
.rh-sponsor__logo {
	margin: 0;
	width: 100%;
	/* A <figure> is not border-box here, so the tile's own padding and
	   hairline were added OUTSIDE its grid column: 195px of column drawn as
	   233px of tile, and six tiles overlapping each other by 38px. */
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 108px;
	padding: 1rem 1.15rem;
	background-color: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--media--frame);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.rh-sponsor__logo:has(a:hover),
.rh-sponsor__logo:has(a:focus-visible) {
	border-color: var(--wp--preset--color--tan);
	box-shadow: var(--wp--preset--shadow--card);
}
.rh-sponsor__logo a {
	display: block;
	width: 100%;
}
.rh-sponsor__logo img {
	width: 100%;
	height: 64px;
	object-fit: contain;
	object-position: center;
	display: block;
}
/* Two up on a phone, not six stacked. core/post-template forces a single
   column under 600px — and does it with its own class repeated four times,
   so the only way past it that is not a six-class selector is this one. A
   stack of six logo tiles is 740px of marks between the past events and the
   footer; a logo is legible at half the width and the band stops being a
   scroll. */
@media (max-width: 600px) {
	.rh-sponsors .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	.rh-sponsor__logo {
		min-height: 88px;
		padding: 0.8rem 0.9rem;
	}
	.rh-sponsor__logo img {
		height: 52px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rh-sponsor__logo {
		transition: none;
	}
}
/* ---- Single event hero ------------------------------------------------
   The hero headline and the first paragraph of the body have to start on the
   same left edge. They did not: core's cover block carries its own 1em
   padding, and the hero's inner group added the root padding on top of it, so
   the title started at 220px while the body started at 120px (1440) and at
   38px against 24px (390). Zeroing the cover's padding leaves the inner group
   with exactly the structure .rh-page-body has - 24px of global padding
   around a 1200px content size - so both rails are computed the same way at
   every width. The vertical padding is set on the block itself. */
.rh-event-hero.wp-block-cover {
	padding-left: 0;
	padding-right: 0;
}
/* The horse opener sits bottom-left, and core shrinks a positioned cover's
   inner container to its content (width: auto), so the 1200px constrained
   group inside it had no room to centre on and the h1 sat at the cover's
   padding. Full width here puts the eyebrow and h1 on the content rail,
   the same left edge as the description below; bottom alignment is kept. */
.rh-horse-hero.wp-block-cover.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container {
	width: 100%;
}

/* The rail is 1200 now, and the headline keeps the display measure it had -
   left-aligned ON that rail, the same computed offset the prose measure uses
   further down this file, and with the same weight, because core centres
   every constrained child with `margin-left: auto !important`. */
/* legacy markup: delete when no content/pattern uses .rh-event-hero__text (the !important goes when template-B rebuilds the event hero) */
.rh-event-hero__text > .wp-block-post-title {
	max-width: 1000px;
	margin-inline-start: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-inline-end: auto !important;
}

.rh-event-register-band {
	gap: 1.5rem;
}
.rh-event-register-band .is-style-label {
	margin: 0;
}

/* ---- News list (home / archive / search) -------------------------------
   One ground, hairlines between entries, same reasoning as the event
   capsules: a list of comparable things should read as one list. The
   contained-image and letterbox-fill rules further up already apply, since
   they match any featured image inside a post template — so these cards get
   the treatment approved for /news/ without repeating it. */
.rh-news-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.rh-news-card {
	max-width: var(--wp--custom--measure);
	margin-inline: auto;
}
.rh-news-card .wp-block-post-featured-image {
	margin-bottom: var(--wp--preset--spacing--30);
}
.rh-news-card .wp-block-post-date {
	margin: 0 0 0.3rem;
}
.rh-news-card .wp-block-post-title {
	margin: 0 0 0.5rem;
	line-height: var(--wp--custom--leading--heading);
	text-wrap: balance;
}
.rh-news-card .wp-block-post-excerpt {
	margin: 0;
}

/* Pagination: labels, not buttons — the page is already a quiet list. That
   is theme.json's styles.blocks.core/query-pagination now, for every query
   loop rather than the three that carried .rh-pagination. */

/* Search field sits in the page-header band, so it takes the band's measure
   rather than stretching the full 1280px. The field and button themselves are
   theme.json's (styles.blocks.core/search); a width is not something it can
   say. */
.rh-search {
	max-width: 420px;
	margin-top: var(--wp--preset--spacing--40);
}

/* ---- Placeholder copy --------------------------------------------------
   Text standing in until Red Horse supplies the real thing. The site already
   has published lorem ipsum on two pages and a literal "REVISED COPY" on a
   third, which is what unmarked filler turns into. So this is deliberately
   not subtle: a dashed frame, a tinted ground and a corner label, on the
   front end as well as in the editor. The matching role and aria-label are
   added in functions.php, because a CSS label is not announced.

   The frame and the label are the `placeholder` style variation
   (styles/blocks/placeholder.json). What stays here is the one thing a
   variation cannot say: each block's variation CSS is zero-specificity and
   printed in document order, so an inner placeholder would always draw its
   own frame over the outer one's reset. */
/* Nested placeholders would stack frames and labels; the outer one is enough. */
.is-style-placeholder .is-style-placeholder {
	border: 0;
	background: none;
	padding: 0;
	margin-block: var(--wp--preset--spacing--20);
}
.is-style-placeholder .is-style-placeholder::before {
	display: none;
}

/* ---- Long-page section nav --------------------------------------------
   The About page is one page with six sections, so it needs in-page
   navigation — and the header is position:fixed at 108px, which means an
   untreated anchor jump parks the target heading underneath it. Nothing in
   the theme accounted for that until now, so every fragment link on the site
   (including the mega menu's .rh-anchor items) landed short. */
:target {
	scroll-margin-top: calc(var(--rh-header-h, 108px) + 1.5rem);
}
.rh-about__section {
	scroll-margin-top: calc(var(--rh-header-h, 108px) + 1.5rem);
}

/* The section list rides under the header while you read. Not sticky on
   small screens: at phone width it would eat a third of the viewport. */
.rh-about__nav {
	border-bottom: 1px solid var(--wp--preset--color--line);
	/* The list ran flush to the band's edge, so the first item looked clipped. */
	padding-inline: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 768px) {
	.rh-about__nav {
		position: sticky;
		top: var(--rh-header-h, 108px);
		z-index: 20;
	}
}
.rh-about__navlist {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem clamp(1rem, 3vw, 2.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.rh-about__navlist a {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--custom--label--size);
	font-weight: var(--wp--custom--label--weight);
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-ink);
	text-decoration: none;
	padding-block: 0.35rem;
	border-bottom: 1px solid transparent;
}
.rh-about__navlist a:hover,
.rh-about__navlist a:focus-visible {
	color: var(--wp--preset--color--brick);
	border-bottom-color: var(--wp--preset--color--brick);
}

/* First section needs no rule above it — the nav is already a divider. */
.rh-about__nav + .rh-about__section {
	border-top: 0;
}

/* ---- Rosters: the herd and the team -----------------------------------
   Both are the same shape — portrait, name, prose — so they share a card.
   Portraits are photographs chosen as crops, so they fill rather than
   letterbox (the .rh-herd-card__img class the fill rules already exclude).

   These were a thumbnail, a name and a clipped sentence in a four-up grid:
   correct, and nothing you would stop to read. They are the two pages where
   someone decides whether they want to be in a field with these horses and
   these people, so the card is now a tile — brick rule at the top, hairline
   frame, a portrait big enough to be a portrait, and the whole thing one
   link. The vocabulary is the past-events card's, deliberately: these are
   the same kind of object and the site should only have one of them. */
.rh-roster .wp-block-post-template {
	gap: clamp(1.5rem, 3vw, 2.25rem);
}

.rh-roster__card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	/* A card is always one shade off whatever it is sitting on. The herd's
	   roster band is untinted, so the card takes parchment there; the team's
	   band IS parchment, so the card takes the page ground instead. Cards the
	   same colour as their band have nothing but a hairline holding them, and
	   that is what the first version of this looked like. */
	background-color: var(--wp--preset--color--parchment);
	border: 1px solid var(--wp--preset--color--line);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.has-parchment-background-color .rh-roster__card,
.has-tan-background-color .rh-roster__card {
	background-color: var(--wp--preset--color--cream);
}
.rh-roster__card:has(a:hover),
.rh-roster__card:has(a:focus-within) {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--card);
	border-color: var(--wp--preset--color--tan);
}
/* The focus ring belongs to the card, because the card is what is focused —
   the stretched link below has no box of its own to draw one around. */
.rh-roster__card:has(a:focus-visible) {
	outline: 2px solid var(--rh-focus-ink, var(--wp--preset--color--brick));
	outline-offset: 3px;
}

/* The portrait is SQUARE. Every photograph in both rosters is a square crop:
   the horses shot head-on, the people standing beside a horse. The 4:5 frame
   this used to impose took a fifth off the sides of each one, which on the
   team roster meant Ulla's portrait rendered as a horse with a sliver of Ulla
   at the edge. A square photograph in a square frame is not cropped at all.

   The ratio goes on the FIGURE: core writes object-fit onto the <img> inline,
   so the frame is the only part of this that a stylesheet reliably owns. */
.rh-roster__card .wp-block-post-featured-image {
	margin: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: var(--wp--preset--color--parchment);
}
.rh-roster__card .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}
.rh-roster__card:has(a:hover) .wp-block-post-featured-image img {
	transform: scale(1.04);
}

.rh-roster__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0;
	padding: 1.15rem 1.3rem 1.4rem;
}
/* A record with no photograph is a card that starts with its words rather
   than a hole where a picture should be: the brick rule still caps it, and
   the extra top padding stops the name sitting hard against that rule. The
   herd is short of its eighth horse and the team's photographs arrive one at
   a time, so this is the state the page has to survive. */
.rh-roster__card:not(:has(.wp-block-post-featured-image)) .rh-roster__body {
	padding-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* The role is the one piece of this card that is data rather than prose, and
   it is what someone is here to find out, so it leads in brick — the way a
   dateline leads a past event — instead of trailing the name in the same grey
   as the biography. Horses have no role field; their cards simply start at
   the name. */
.rh-roster__card .is-style-label {
	margin: 0 0 0.35rem;
	color: var(--wp--preset--color--brick);
}
.rh-roster__card .is-style-label:empty {
	display: none;
}

.rh-roster__card .wp-block-post-title {
	margin: 0 0 0.55rem;
	line-height: 1.15;
	text-wrap: balance;
}
.rh-roster__card .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}
/* One link, covering the whole tile. The portrait used to be a second link to
   the same page, which is two tab stops and two announcements for one
   destination; it is now a plain image and this is the only anchor on the
   card. */
.rh-roster__card .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}
.rh-roster__card:has(a:hover) .wp-block-post-title a {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.rh-roster__card p {
	margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
	.rh-roster__card,
	.rh-roster__card:has(a:hover),
	.rh-roster__card:has(a:focus-within),
	.rh-roster__card .wp-block-post-featured-image img,
	.rh-roster__card:has(a:hover) .wp-block-post-featured-image img {
		transition: none;
		transform: none;
	}
}

/* ---- Homepage paths ----------------------------------------------------
   Four ways into the site, as cards rather than a stack of heading, sentence
   and link repeated four times — which is what it looked like when I finally
   put the page in front of a browser. */
.rh-paths {
	margin-bottom: var(--wp--preset--spacing--50);
}
.rh-path {
	height: 100%;
	background-color: var(--wp--preset--color--cream);
}
.rh-path .wp-block-heading {
	margin: 0 0 0.4rem;
}
.rh-path p {
	margin: 0 0 var(--wp--preset--spacing--30);
}
.rh-path .is-style-label {
	margin: 0;
}

/* ---- Covers with no image ----------------------------------------------
   A cover whose featured image is missing still paints its overlay, at the
   overlay's opacity — which over nothing renders as a washed, muddy grey that
   reads as a broken image rather than a design choice. Events without a
   photograph were showing exactly that. With no image the overlay goes solid,
   so the band is an intentional block of colour. */
.wp-block-cover:not(:has(.wp-block-cover__image-background)):not(:has(video)) .wp-block-cover__background {
	opacity: 1;
}

/* ---- Prose measure inside a wider column -------------------------------
   The content column is 1200px so two-column layouts, galleries and the
   rosters have room to be two-column at all. Running body text at 1200px
   would be about 150 characters a line, which nobody reads — so text blocks
   keep the 820px measure inside it.

   Left-aligned, not centred: the grids and galleries start at the column's
   left edge, and prose that centres itself inside the same column would sit
   on a different left edge to everything around it. */
.rh-page-body > .wp-block-post-content > p,
.rh-page-body > .wp-block-post-content > h1,
.rh-page-body > .wp-block-post-content > h2,
.rh-page-body > .wp-block-post-content > h3,
.rh-page-body > .wp-block-post-content > h4,
.rh-page-body > .wp-block-post-content > ul,
.rh-page-body > .wp-block-post-content > ol,
.rh-page-body > .wp-block-post-content > .wp-block-quote,
.rh-about__section > p,
.rh-about__section > h2,
.rh-about__section > h3,
.rh-about__section > h4,
.rh-about__section > ul,
.rh-about__section > ol,
.rh-about__section > .wp-block-quote,
.rh-page-header > p,
.rh-page-header > h1,
.rh-page-header > h2 {
	max-width: var(--wp--custom--measure);
	/* Align to the left edge of the 1200px column, not to the viewport.
	   Each child is centred independently inside a full-width wrapper (the
	   wrapper has to stay full width or an alignfull hero cannot break out),
	   so the offset has to be computed: half the space the column leaves.
	   Core centres with `margin-left: auto !important`, hence the weight. */
	margin-inline-start: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-inline-end: auto !important;
}

/* A placeholder note is an instruction, not prose: it belongs with the text
   it is standing in for. */
.rh-about__section > .is-style-placeholder,
.rh-page-body > .wp-block-post-content > .is-style-placeholder {
	max-width: var(--wp--custom--measure);
	margin-inline-start: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-inline-end: auto !important;
}

/* Centred text in a lifted band keeps its own alignment: those sections were
   designed centred and the measure cap should not fight them. */
.rh-page-body > .wp-block-post-content > .has-text-align-center,
.rh-about__section > .has-text-align-center {
	margin-inline: auto !important;
}

/* ---- One left rail -----------------------------------------------------
   Content lifted from the old pages brings its own constrained bands, most of
   them 820px wide, which centre themselves inside the 1200px column. The
   section heading above them sits at the column's left edge, so the page ended
   up with prose on one rail and its own headings on another.

   Text inside those bands now starts at the band's left edge too. Anything
   explicitly centred keeps its alignment: those bands were designed that way
   and this should not argue with them.

   A quotation card is not a band: it is a box 500px wide with its own
   padding, and an auto inline margin inside one stops its children filling
   it — the attribution came out 83px wide with 83px of divider under it. So
   the rail stops at the card. */
.rh-about__section .wp-block-group:not(.rh-quote) > p:not(.has-text-align-center),
.rh-about__section .wp-block-group:not(.rh-quote) > h2:not(.has-text-align-center),
.rh-about__section .wp-block-group:not(.rh-quote) > h3:not(.has-text-align-center),
.rh-about__section .wp-block-group:not(.rh-quote) > h4:not(.has-text-align-center),
.rh-about__section .wp-block-group:not(.rh-quote) > ul,
.rh-about__section .wp-block-group:not(.rh-quote) > ol,
.rh-page-body .wp-block-post-content .wp-block-group:not(.alignfull):not(.rh-quote) > p:not(.has-text-align-center),
.rh-page-body .wp-block-post-content .wp-block-group:not(.alignfull):not(.rh-quote) > h2:not(.has-text-align-center),
.rh-page-body .wp-block-post-content .wp-block-group:not(.alignfull):not(.rh-quote) > h3:not(.has-text-align-center) {
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

/* Roster cards are index entries: equal-height cards, with as much of the
   record's own words as the kind of record deserves.

   The herd's descriptions are the best writing on the site — Sydney's nose
   smelling of grapefruit, Freya asking for a new name — so a horse gets sixty
   words, which is Gus and Clara whole and several lines of the long ones. The
   team's bios read as CVs, where the opening sentences say what the person is
   and the rest is a record of service that belongs on their own page. The
   clamps below are a safety net under those word counts, not the crop: they
   only bite on a column narrow enough to turn sixty words into a wall. */
.rh-roster__card .wp-block-post-excerpt {
	margin: 0;
}
.rh-roster__card .wp-block-post-excerpt__excerpt {
	margin: 0;
	color: var(--wp--preset--color--muted-ink);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.rh-roster--herd .wp-block-post-excerpt__excerpt {
	-webkit-line-clamp: 12;
}
.rh-roster--people .wp-block-post-excerpt__excerpt {
	-webkit-line-clamp: 8;
}
.rh-roster__card .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: 0.4rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--custom--label--size);
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--brick);
}

/* ---- Section patterns --------------------------------------------------
   The pieces pages are assembled from, in /patterns under the "Red Horse:
   sections" category. Everything here is geometry the block editor cannot express on its
   own — overlaps, a step counter, a tile that keeps its parts together. Colour
   and spacing come from theme.json as everywhere else. */

/* Photo laid across the edge of a tinted panel. The overlap is a desktop
   gesture: at phone width the two simply stack, which is why the negative
   margin lives inside the media query rather than being undone by one. */
@media (min-width: 782px) {
	/* Scoped through .rh-offset deliberately. Core ships
	     .is-layout-flex > :is(*, div) { margin: 0 }
	   and `:is(*, div)` scores a type selector, so core sits at (0,1,1) against
	   a bare `.rh-offset__media` at (0,1,0) and wins on specificity whatever
	   the load order. The overlap was being zeroed in silence — the panel ended
	   where the photograph began, and the band read as two flat halves. Two
	   classes beat it. */
	.rh-offset .rh-offset__media {
		margin-left: calc(-1 * var(--wp--preset--spacing--50));
		z-index: 1;
	}
	.rh-offset .rh-offset__panel {
		padding-right: calc(var(--wp--preset--spacing--70) + var(--wp--preset--spacing--50)) !important;
	}
	/* The second photograph sits lower than the first, the way two pictures
	   land on a table rather than in a grid. */
	.rh-pair__b {
		margin-top: var(--wp--preset--spacing--60);
	}
}

/* ---- Tiles ---------------------------------------------------------------
   A tile holds a picture, a heading and a way in, with the parts kept close
   enough to read as one thing.

   It only looked right when it opened with a full-bleed image: with no picture,
   the heading sat outside the card on a shadow with no surface under it. The
   tile carries its own surface and padding now, and an image that leads pulls
   itself back out to the edges — flush to the frame, with the brick mark
   (the card block above) sitting over it rather than cutting across it.

   A cream tile on a cream band is a white card on white paper: the shadow is
   doing all the work and the group reads as flat. The tile takes its ground
   from the band it sits on — parchment on cream, cream on parchment — the
   same one-shade-off rule as every other card, and lifts very slightly off
   the page, the way a photograph does resting on a table.

   This was four definitions in four places; it is one now, with the values
   that were winning. Every tile now carries the `card` style, which supplies
   the ground (from the band, through --rh-card-ground) and the hairline; the
   14px radius and the shadow are still taken from here. */
/* legacy markup: delete when tiles move to is-style-card-raised (its 10px frame radius is then an intended change) */
.rh-tile {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--media--radius);
	box-shadow: var(--wp--preset--shadow--card);
}
.rh-tile {
	padding: var(--wp--preset--spacing--40);
	overflow: hidden;
}
.rh-tile > .wp-block-image:first-child {
	margin: calc(-1 * var(--wp--preset--spacing--40));
	margin-bottom: var(--wp--preset--spacing--40);
	width: auto;
}
.rh-tile > .wp-block-image:first-child img {
	border-radius: 0;
	width: 100%;
}
.rh-tile > .wp-block-image {
	margin-bottom: var(--wp--preset--spacing--40);
}
.rh-tile > .wp-block-heading {
	margin-bottom: var(--wp--preset--spacing--20);
}
/* In a tile the eyebrow belongs to the heading, not to the picture above it.
   The gap under the h3 was looser than the gap above it, which read the wrong
   way round. */
.rh-tile > .wp-block-heading + p {
	margin-top: 0.4em;
}

/* Three ways this is arranged: the tiles are alternatives, not steps, but the
   heading above them counts them, so the card counts itself. The numeral is
   drawn rather than typed: an editor can add or remove a way of working
   without renumbering the rest, and no counting appears in the client's copy
   where it could go stale. */
.rh-tiles {
	counter-reset: rh-tile;
}
.rh-tiles .rh-tile {
	counter-increment: rh-tile;
}
.rh-tiles .rh-tile::before {
	content: counter(rh-tile, decimal-leading-zero);
	display: block;
	margin-bottom: 0.4rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--wide);
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--brick);
}

/* A tile whose last word is a button. The alternative ways to give on
   /donate/ carry no prose, because there is nothing published about any of
   them to carry: each tile is a platform, a name and the button that goes
   there. Those names run to different lengths, and without this the buttons
   sat at three different heights across the row. Opt-in rather than applied
   to every .rh-tile that happens to end in a button, so the card tiles
   elsewhere keep the spacing they were drawn with. */
.rh-tile--action {
	display: flex;
	flex-direction: column;
}
.rh-tile--action > .wp-block-buttons:last-child {
	margin-top: auto;
}
/* Numbered steps. The counter is drawn rather than typed, so an editor can
   reorder or delete a step without renumbering the ones below it. */
.rh-steps {
	counter-reset: rh-step;
}
.rh-steps .rh-step {
	counter-increment: rh-step;
	position: relative;
	padding-left: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--40);
}
.rh-steps .rh-step::before {
	content: counter(rh-step);
	position: absolute;
	left: 0;
	top: 0.1em;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--brick);
	font-variant-numeric: tabular-nums;
}
.rh-steps .rh-step > * {
	margin-top: 0;
	margin-bottom: 0.35em;
}

/* Two short lists side by side under one heading. */
.rh-checks .wp-block-list {
	margin: 0;
}
.rh-checks .wp-block-list li {
	margin-bottom: 0.4em;
}

/* A photograph with a title laid over it, dark enough underneath for the
   title to hold at any crop. */
.rh-band__title {
	text-shadow: 0 1px 2px color-mix(in srgb, var(--wp--custom--scrim) 50%, transparent), 0 2px 30px color-mix(in srgb, var(--wp--custom--scrim) 60%, transparent);
}

/* Signposts: four short ways in, sitting under a hero. They are links first,
   so the whole box responds rather than just the words in it. */
.rh-signpost {
	background-color: var(--wp--preset--color--cream);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.rh-signpost:hover {
	background-color: var(--wp--preset--color--parchment);
	border-color: var(--wp--preset--color--muted) !important;
}
/* Card titles are h2 where their grid is a top-level section of the page and
   h3 where it sits under a section heading - the outline decides the level,
   not the look. Two things differ between the levels, and a card title takes
   the h3 value of both, so it reads the same at either level:

   - tracking, from theme.json's h2/h3 elements. A post title is left out:
     its tracking comes from the post-title block style, not the level.
   - the browser's own heading margins, 0.83em on an h2 and 1em on an h3.
     Zero specificity, so this stands in for the UA margin exactly where the
     UA margin was showing through and nowhere else: any rule the theme or a
     layout writes still wins over it, as it did over the h3's. */
:is(.rh-signpost, .rh-pill, .rh-herd-card, .rh-roster__card, .rh-entry, .rh-news-index, .is-style-stripe, .is-style-card, .is-style-card-raised) h2:not(.wp-block-post-title) {
	letter-spacing: 0.04em;
}
:where(.rh-signpost, .rh-pill, .rh-herd-card, .rh-roster__card, .rh-entry, .rh-news-index, .is-style-stripe, .is-style-card, .is-style-card-raised) :where(h2) {
	margin-block: 1em;
}
.rh-signpost :is(h2, h3) { margin: 0 0 0.2em; }
.rh-signpost :is(h2, h3) a { text-decoration: none; }
.rh-signpost p { margin: 0; }

/* Four photographs, equal in the grid rather than staggered: this one is for
   showing a place plainly. */
.rh-quad .wp-block-image { margin: 0; }

/* The portrait beside an attribution. */
.rh-quote-by__face {
	width: 52px;
	flex: 0 0 auto;
}
.rh-quote-by__face img { display: block; }
.rh-quote-by p { margin: 0; }

/* A person and their story. On a phone the portrait leads rather than taking
   a quarter of the width and squeezing the words into the rest. */
@media (max-width: 781px) {
	.rh-person-row .wp-block-column:first-child {
		max-width: 160px;
	}
}

/* A full-bleed image or cover should still meet the window edge squarely —
   rounding there leaves four slivers of background in the corners. The radius
   every other image takes is theme.json's (styles.blocks.core/image), printed
   as :root :where(), so a plain class selector is enough to outrank it; an
   image inside a full-bleed cover stays square too, as it always has. A block
   that asks for a radius of its own still gets one: that is an inline style. */
.wp-block-image.alignfull img,
.wp-block-cover.alignfull img {
	border-radius: 0;
}

/* A person's row lifts very slightly off the page, the way a photograph does
   when it is resting on a table rather than printed into it. */
.rh-person-row {
	box-shadow: var(--wp--preset--shadow--card);
}

/* A rule that divides prose belongs to the prose, not to the column it sits
   in: same start, same width, so it reads as part of the writing rather than
   a line drawn across the page behind it. */
.rh-rule {
	max-width: var(--wp--custom--measure);
	margin-inline-start: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-inline-end: auto !important;
}

/* A rule under a centred title belongs to the title, not to the window. Full
   width it reads as a line drawn across the page behind the words. */
.rh-rule--short {
	max-width: 14rem;
	margin-inline: auto !important;
	opacity: 0.55;
}

/* Prose inside a column keeps the column's left edge: the measure rule that
   puts band text on the page rail must not also indent text that is already
   inside a narrower column. */
.wp-block-column > p,
.wp-block-column > h2,
.wp-block-column > h3,
.wp-block-column > ul,
.wp-block-column > ol {
	margin-inline-start: 0 !important;
}

/* An event's date, set apart from its description the way it is on a ticket. */
.rh-event-row__when {
	border-right: 1px solid var(--wp--preset--color--line);
}
@media (max-width: 781px) {
	.rh-event-row__when {
		border-right: 0;
		border-bottom: 1px solid var(--wp--preset--color--line);
		padding-bottom: var(--wp--preset--spacing--30);
	}
}

/* Partner marks sit quietly: small, evenly sized, and not competing with the
   page they are thanking people on. */
.rh-partners__mark {
	width: clamp(120px, 15vw, 180px);
}
.rh-partners__mark img {
	width: 100%;
	height: auto;
}

/* ---- Questions, answered ----------------------------------------------
   The FAQ section used to put .rh-details on its column, which styles nothing:
   that class is the teaser treatment and belongs on a <details> element, where
   it masks ::details-content. A list of questions wants the opposite — each
   one plainly readable, with the answer unmasked when opened. */
/* The `faq` details style (styles/blocks/faq.json) carries the frame, the
   rhythm and the summary's type. The drawn marker is a pseudo-element of the
   summary inside it, which a variation's CSS cannot reach, so it is here. */
.is-style-faq > summary::-webkit-details-marker {
	display: none;
}
.is-style-faq > summary::before {
	content: "+";
	color: var(--wp--preset--color--brick);
	font-weight: 400;
	flex: 0 0 auto;
	transition: transform 0.2s ease;
}
.is-style-faq[open] > summary::before {
	content: "–";
}
/* The answer's gap under its question, stated at a specificity that also
   beats a placeholder paragraph's own margin inside the answer. */
.is-style-faq > :not(summary) {
	margin-top: var(--wp--preset--spacing--30);
}
@media (prefers-reduced-motion: reduce) {
	.is-style-faq > summary::before { transition: none; }
}

/* ---- The callout stripe ------------------------------------------------
   Four ways in, carried on a bar that rides up over the bottom of the hero so
   the two read as one piece of furniture rather than as a band that happens to
   follow a photograph. The lift is a desktop gesture; on a phone the bar simply
   follows the hero, because a 60px overlap on a 390px screen eats the hero.

   The bar itself is the `stripe` columns style (styles/blocks/stripe.json);
   the lift stays on the .rh-stripe band, and the hairlines between cells are
   here because they change with the window. */
.rh-stripe {
	position: relative;
	z-index: 2;
}
@media (min-width: 782px) {
	.rh-stripe {
		margin-top: calc(-1 * var(--wp--preset--spacing--50));
	}
}
/* Hairlines between the cells, not around them: four bordered boxes in a row
   draws twelve lines where three will do. */
@media (min-width: 782px) {
	.is-style-stripe > .wp-block-column + .wp-block-column {
		border-left: 1px solid var(--wp--preset--color--line);
	}
}
@media (max-width: 781px) {
	.is-style-stripe > .wp-block-column + .wp-block-column {
		border-top: 1px solid var(--wp--preset--color--line);
	}
}
.is-style-stripe :is(h2, h3) a::after {
	content: " →";
	color: var(--wp--preset--color--brick);
}

/* ---- Past events -------------------------------------------------------
   They are the only record of what actually happens here, so they are worth
   looking at rather than scanning past. This was a date and a title on a
   hairline, repeated twenty times: the least readable thing on the page.

   It is a card grid now, because a past event has no action to offer and
   therefore nothing to line up in a column - cards let the eye land anywhere
   in the set instead of starting at the top and reading down. Each card keeps
   the generated date line (which already carries the time and the place), the
   name, two or three lines of the event's own copy, and its photograph when
   it has one.

   The card has to look deliberate WITHOUT a photograph, because today not one
   past event carries a featured image: the tinted ground, the brick rule
   along the top and the date line doing the work of an eyebrow are what make
   a text-only card read as designed rather than as an image that failed. */
/* The fold sits on the same rail as the upcoming list above it — both are
   now the content size of their own band, so neither has a rail of its own to
   drift from. */
.rh-events-past__intro {
	margin: 0.9rem 0 0;
	font-size: var(--wp--preset--font-size--small);
}
.rh-past-grid {
	margin-block: var(--wp--preset--spacing--40) 0;
}
.rh-past-entry {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background-color: var(--wp--preset--color--parchment);
	border: 1px solid var(--wp--preset--color--line);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
/* Same rule as the roster cards: a card is one shade off whatever it is
   sitting on. The fold now has a tinted band of its own, so on that band the
   cards take the page ground instead — parchment on parchment is a card held
   up by nothing but its hairline, which is what the first version of the
   roster looked like. */
.has-parchment-background-color .rh-past-entry,
.has-tan-background-color .rh-past-entry {
	background-color: var(--wp--preset--color--cream);
}
/* The whole card answers the pointer, though only the title and the
   photograph are links - hovering anywhere else still shows what is
   clickable without inventing a second target. */
.rh-past-entry:has(a:hover),
.rh-past-entry:has(a:focus-visible) {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--lift);
	border-color: var(--wp--preset--color--tan);
}
/* The ratio goes on the FIGURE, not on the image, because the image is not
   ours to size: every featured image inside a query loop already carries this
   theme's framed treatment (parchment ground, a blurred copy of itself
   behind) and core writes `object-fit` onto the <img> inline, which no
   stylesheet rule can outrank. Giving the frame a fixed ratio is what makes
   every card in the row share one image band whatever shape the picture is. */
.rh-past-entry__thumb {
	margin: 0;
	aspect-ratio: 16 / 9;
}
.rh-past-entry__body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1rem 1.15rem 1.2rem;
}
.rh-past-entry__body > * {
	margin: 0;
}
/* The date is the first thing you want from a past event, so it carries the
   accent rather than sitting in the same muted grey as the copy. */
.rh-past-entry__body > .is-style-label {
	margin: 0;
	color: var(--wp--preset--color--brick);
}
.rh-past-entry .wp-block-post-title {
	line-height: 1.2;
	text-wrap: balance;
}
/* Three lines of the event's own words: enough to remember which one it was,
   not so much that the cards stop being comparable. */
.rh-past-entry__excerpt p {
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
	.rh-past-entry,
	.rh-past-entry:has(a:hover),
	.rh-past-entry:has(a:focus-visible) {
		transition: none;
		transform: none;
	}
}

/* ---- Parallax on the cover images -------------------------------------
   The transform lives in assets/js/parallax.js; this is only what has to be
   true for it to look right. The image is scaled beyond the frame so there is
   something to travel within, and the frame clips it. */
.rh-parallax {
	overflow: hidden;
}
.rh-parallax .wp-block-cover__image-background {
	will-change: transform;
	transform-origin: center center;
}
/* No transition: the position is set every frame from the scroll offset, and
   easing between frames would lag the page rather than smooth it. */
@media (prefers-reduced-motion: reduce) {
	.rh-parallax .wp-block-cover__image-background {
		transform: none !important;
		will-change: auto;
	}
}

/* ---- Headings ---------------------------------------------------------
   Set in the body sans, in caps. Caps need tracking to stay readable — the
   larger the size the less of it, because the letterforms already have room —
   and they need a lower line-height, since there are no descenders to clear.
   All of that is theme.json now (styles.elements.heading, h1–h6 and
   styles.blocks.core/post-title), where the Site Editor can reach it. What
   theme.json cannot say is how a heading breaks: */
:where(h1, h2, h3, h4, h5, h6) {
	text-wrap: balance;
}
/* The photo band's title is a heading set at display size; it keeps the
   display tracking and leading the h1 has — except inside a page body, where
   the page's own 1.12 used to outrank it and the published pages were set
   against that. */
/* legacy markup: delete when no content/pattern uses .rh-band__title */
.rh-band__title {
	letter-spacing: 0.005em;
	line-height: var(--wp--custom--leading--display);
}
.rh-page-body .rh-band__title {
	line-height: 1.12;
}
/* The same 1.12 used to reach the label and eyebrow headings inside a page
   body too, over the style's own 1.4. */
/* legacy markup: delete when no content/pattern uses .is-style-label / .is-style-eyebrow on a heading inside .rh-page-body */
.rh-page-body .wp-block-heading:is(.is-style-label, .is-style-eyebrow) {
	line-height: 1.12;
}
/* ---- The film ----------------------------------------------------------
   A 16:9 iframe pasted into a column is the most obviously unconsidered thing
   a page can contain. Framed, rounded, lifted off a dark band, it reads as a
   feature instead. New markup says this with the `film` embed style
   (styles/blocks/film.json). */

/* ---- Hero legibility ---------------------------------------------------
   A scrim only where the chrome sits. The header floats over the photograph
   with no background of its own until something is open, so the nav and the
   logo need something behind them — but only they do. A wash across the whole
   picture dirties the thing the picture was chosen for.

   So: a short gradient from the top, done by the height of the bar, and
   nothing below it. The title keeps its own shadow. */
.wp-block-cover.alignfull .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}
.wp-block-cover.alignfull::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	/* Tall enough that the fade is gradual. At 1.6x the bar height the ramp
	   ran out over 78px and left a visible edge across the photograph — a
	   scrim you can see the bottom of is just a dark stripe. */
	height: calc(var(--wp--custom--header--height, 108px) * 3);
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--wp--custom--scrim) 50%, transparent) 0%,
		color-mix(in srgb, var(--wp--custom--scrim) 34%, transparent) 22%,
		color-mix(in srgb, var(--wp--custom--scrim) 14%, transparent) 52%,
		color-mix(in srgb, var(--wp--custom--scrim) 4%, transparent) 78%,
		color-mix(in srgb, var(--wp--custom--scrim) 0%, transparent) 100%
	);
}

/* ---- The front page's five pills ---------------------------------------
   A row of bordered boxes was four equal rectangles that said "navigation".
   Pills on a dark band say "start here": they sit on the hero's shoulder, they
   wrap rather than squeezing, and the fifth one does not break the grid
   because there is no grid. */
.rh-stripe.has-charcoal-background-color {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
}
.rh-pills {
	/* A grid, not a flex row. Flex sized every pill to its own text, so five
	   pills meant five widths and three heights — the "variable height stuff".
	   Equal columns that stretch give one row of identical cards, and the
	   count drops to three and then one as the window narrows, which is the
	   readable stack rather than a squeeze. */
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
	gap: var(--wp--preset--spacing--30) !important;
	align-items: stretch;
	/* Equal columns gave one row of identical cards on a wide screen, but
	   once auto-fit drops to a single column each pill became its own row
	   and sized itself to its own blurb again — 93px, 70px, 93px, 93px,
	   70px down the phone. Equal auto rows hold them level there too, which
	   is what "every badge the same height" has to mean on both. */
	grid-auto-rows: 1fr;
}
.rh-pill {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	max-width: none;
	height: 100%;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--cream) 22%, transparent);
	border-radius: var(--wp--custom--header--radius);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.rh-pill:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--cream) 10%, transparent);
	border-color: color-mix(in srgb, var(--wp--preset--color--cream) 55%, transparent);
}
.rh-pill :is(h2, h3) {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
}
.rh-pill :is(h2, h3) a {
	color: var(--wp--preset--color--cream);
	text-decoration: none;
}
.rh-pill :is(h2, h3) a::after {
	content: " →";
	color: var(--wp--preset--color--tan);
	font-size: 0.85em;
}
.rh-pill p {
	margin: 0.15rem 0 0;
	color: color-mix(in srgb, var(--wp--preset--color--cream) 78%, transparent);
	font-size: var(--wp--preset--font-size--x-small);
}
/* The one pill whose line is ours rather than the client's. On the
   paragraph, not the heading: the mark has to stay — it is how anyone
   reviewing the page can see which words Red Horse has not written yet —
   but it has no business sitting in a title. */
.rh-pill--draft p::before {
	content: "✎ ";
	color: var(--wp--preset--color--tan);
	font-size: 0.8em;
}
@media (max-width: 781px) {
	.rh-pill {
		flex: 1 1 100%;
		max-width: none;
		border-radius: var(--wp--custom--header--radius);
	}
}

/* The band covers — a line over a wide photograph — are centred, so they take
   an even wash rather than a bottom-weighted one. */
.wp-block-cover.alignfull.is-position-center-center::after,
.rh-film-band .wp-block-cover::after {
	background: color-mix(in srgb, var(--wp--custom--scrim) 18%, transparent);
}

/* ---- Enquiry forms -----------------------------------------------------
   Three forms from two vendors, and not a line of their markup is ours to
   touch: Formidable renders /contact/general-enquiry/ and
   /contact/scholarship/ from a shortcode, and the Salesforce Web-to-Lead
   form on /services/organizational-development/start-a-conversation/ is the
   client's CRM pipeline pasted in whole. So everything below is CSS laid
   over somebody else's HTML, and all of it has to survive the vendor
   changing their mind about class names.

   The shared vocabulary, so all three read as one site:

     panel        the form sits on a cream panel with the theme's media
                  radius, held to the 820px prose measure. A form 1200px
                  wide is a form nobody finishes.
     field ground white — the one surface lighter than cream — so the box
                  you type into is the brightest thing on the page. It is
                  theme.json's custom.surface.field, the one colour on the
                  site that is not in the palette.
     field edge   `muted` (#726358), 1px. The theme's `line` (#D8CFC0) is
                  1.3:1 against white: invisible as a control boundary and
                  well under WCAG 1.4.11's 3:1. `muted` is 5.2:1 on white
                  and 4.6:1 on cream.
     labels       charcoal, 600, sitting on their field with 0.45rem of air.
                  Not uppercase: these are things to read, not eyebrows.
     required     brick (7:1 on cream), never red-on-anything.
     focus        2px brick outline at 2px offset — the same ring theme.json
                  gives links and buttons, so a keyboard moves through a form
                  the way it moves through the rest of the site.
     tap target   48px on every field and button, 44px on every checkbox row.
   ---------------------------------------------------------------------- */

:root {
	--rh-form-field-bg: var(--wp--custom--surface--field);
	--rh-form-field-edge: var(--wp--preset--color--muted);
	--rh-form-field-height: 48px;
	--rh-form-field-pad: 0.8rem 0.95rem;
	--rh-form-radius: var(--wp--custom--header--radius);
	--rh-form-gap: var(--wp--preset--spacing--40);
	--rh-form-pad: clamp(1.25rem, 4vw, 2.5rem);
}

/* ---- The panel, shared by both vendors --------------------------------- */

.frm_forms.with_frm_style,
form[action*="webto.salesforce.com"] {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--custom--measure);
	margin-inline: 0;
	padding: var(--rh-form-pad);
	background-color: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--media--radius);
	box-shadow: var(--wp--preset--shadow--bar);
}

/* ---- Formidable --------------------------------------------------------
   Formidable publishes its whole style as custom properties on
   `.with_frm_style`, which is the one honest way in: redefining the
   variables restyles every field type the form builder can produce,
   including the ones these two forms do not use yet. Only what a variable
   cannot reach is written as a rule below. */

.frm_forms.with_frm_style {
	--font: var(--wp--preset--font-family--body);
	--font-size: var(--wp--preset--font-size--medium);
	--base-font-size: var(--wp--preset--font-size--medium);
	/* Formidable holds the form's own width in a variable, and the rule that
	   reads it carries three classes — so this is the width, not the
	   max-width above it. */
	--form-width: var(--wp--custom--measure);
	--form-align: left;
	--fieldset-padding: 0;

	--label-color: var(--wp--preset--color--charcoal);
	--weight: 600;
	--label-padding: 0 0 0.45rem 0;
	--required-color: var(--wp--preset--color--brick);
	--required-weight: 600;

	--description-font-size: 0.8125rem;
	--description-color: var(--wp--preset--color--muted-ink);
	--description-weight: 400;
	--description-margin: 0.4rem 0 0;

	--field-font-size: var(--wp--preset--font-size--medium);
	--field-height: var(--rh-form-field-height);
	--line-height: 1.45;
	--field-pad: var(--rh-form-field-pad);
	--field-margin: var(--rh-form-gap);
	--field-weight: 400;
	--text-color: var(--wp--preset--color--charcoal);
	--border-color: var(--rh-form-field-edge);
	--field-border-width: 1px;
	--bg-color: var(--rh-form-field-bg);
	--bg-color-active: var(--rh-form-field-bg);
	--border-color-active: var(--wp--preset--color--brick);
	--border-radius: var(--rh-form-radius);
	--box-shadow: none;

	--check-font-size: var(--wp--preset--font-size--medium);
	--check-label-color: var(--wp--preset--color--charcoal);
	--check-weight: 400;

	--submit-font-size: var(--wp--preset--font-size--small);
	--submit-weight: 500;
	--submit-bg-color: var(--wp--preset--color--brick);
	--submit-border-color: var(--wp--preset--color--brick);
	--submit-border-width: 1px;
	--submit-text-color: var(--wp--preset--color--cream);
	--submit-border-radius: var(--rh-form-radius);
	--submit-padding: 0.875rem 2rem;
	--submit-margin: 0;
	--submit-shadow-color: transparent;
	--submit-hover-bg-color: var(--wp--preset--color--brick-hover);
	--submit-hover-color: var(--wp--preset--color--cream);
	--submit-hover-border-color: var(--wp--preset--color--brick-hover);
	--submit-active-bg-color: var(--wp--preset--color--brick-hover);
	--submit-active-color: var(--wp--preset--color--cream);
	--submit-active-border-color: var(--wp--preset--color--brick-hover);

	/* Error and success, in the theme's own two signal colours rather than
	   bootstrap-era pink and green. Brick on cream is 7:1; forest on cream
	   is 6.4:1. */
	--border-color-error: var(--wp--preset--color--brick);
	--border-width-error: 2px;
	--text-color-error: var(--wp--preset--color--charcoal);
	--bg-color-error: var(--rh-form-field-bg);
	--error-bg: color-mix(in srgb, var(--wp--preset--color--brick) 8%, transparent);
	--error-border: var(--wp--preset--color--brick);
	--error-text: var(--wp--preset--color--brick);
	--error-font-size: var(--wp--preset--font-size--small);
	--success-bg-color: color-mix(in srgb, var(--wp--preset--color--forest) 10%, transparent);
	--success-border-color: var(--wp--preset--color--forest);
	--success-text-color: var(--wp--preset--color--forest);
	--border-color-disabled: var(--wp--preset--color--line);
	--text-color-disabled: var(--wp--preset--color--muted);
	--bg-color-disabled: var(--wp--preset--color--parchment);
}

/* The 12-column grid Formidable lays fields on gets a real gutter. 2% of a
   740px panel is 15px, which reads as two fields that have collided. */
.frm_forms.with_frm_style .frm_fields_container {
	grid-gap: 0 var(--wp--preset--spacing--30);
}

/* Fields sharing a grid row carry labels of different heights, and each
   input sits directly under its own label — so on the scholarship form
   "Business Type (Nonprofit, Business, Group)" wrapped to two lines and
   dropped its box half a line below City and State beside it. Making each
   field a column and letting its label absorb the slack lines the inputs
   back up along the row.

   The `:not()` matters: a field whose label position is "none" — the
   reCAPTCHA on both forms — hides that label with `display: none`, and this
   rule is specific enough to undo it and print the word "reCAPTCHA" over
   the widget. */
.frm_forms.with_frm_style .frm_fields_container > .frm_form_field {
	display: flex;
	flex-direction: column;
}
.frm_forms.with_frm_style .frm_fields_container > .frm_form_field:not(.frm_none_container) > .frm_primary_label {
	display: flex;
	flex: 1 0 auto;
	align-items: flex-end;
}

/* Labels are things to read. The vendor default is `normal`; 600 and the
   body face make a label look like the question it is. */
.frm_forms.with_frm_style .frm_primary_label {
	font-family: var(--wp--preset--font-family--body);
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
}

/* The asterisk needs air, or "Name*" reads as one word. */
.frm_forms.with_frm_style .frm_required {
	margin-left: 0.15em;
}

.frm_forms.with_frm_style .frm_description {
	line-height: 1.45;
}

/* The focus ring, matching theme.json's :focus-visible on links and buttons.
   Formidable sets `outline: none` on every field, so this has to put one
   back rather than merely recolour it. :focus rather than :focus-visible —
   a text field that has been clicked into should show where it is. */
.frm_forms.with_frm_style input:focus,
.frm_forms.with_frm_style select:focus,
.frm_forms.with_frm_style textarea:focus {
	outline: 2px solid var(--rh-focus-ink, var(--wp--preset--color--brick));
	outline-offset: 2px;
	border-color: var(--wp--preset--color--brick);
}

/* Checkbox and radio: the vendor's 16px box is under every tap-target
   guideline there is. 20px with a 44px label row gives a thumb something to
   aim at, and the label is what carries the hit area because Formidable
   writes a correct `for` on every one. The `!important`s match the vendor's
   own, which is the only way to beat them. */
.frm_forms.with_frm_style input[type="checkbox"],
.frm_forms.with_frm_style input[type="radio"] {
	width: 20px !important;
	min-width: 20px !important;
	height: 20px !important;
	border-width: 1px;
	box-shadow: none;
}
.frm_forms.with_frm_style input[type="checkbox"]:focus,
.frm_forms.with_frm_style input[type="radio"]:focus {
	outline: 2px solid var(--rh-focus-ink, var(--wp--preset--color--brick));
	outline-offset: 2px;
	box-shadow: none !important;
}
.frm_forms.with_frm_style .vertical_radio .frm_checkbox label,
.frm_forms.with_frm_style .vertical_radio .frm_radio label,
.frm_forms.with_frm_style .frm_checkbox label,
.frm_forms.with_frm_style .frm_radio label {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	line-height: 1.4;
}
.frm_forms.with_frm_style .frm_checkbox label input[type="checkbox"],
.frm_forms.with_frm_style .frm_radio label input[type="radio"] {
	margin-right: 0;
}
.frm_forms.with_frm_style .vertical_radio .frm_checkbox,
.frm_forms.with_frm_style .vertical_radio .frm_radio {
	margin-bottom: 0;
}

/* A textarea the height of a text field invites one line of answer. */
.frm_forms.with_frm_style textarea {
	min-height: 8.5rem;
	line-height: var(--wp--custom--leading--body);
}

/* The submit button, sitting apart from the last field rather than tucked
   under it, with the theme's own tracking. */
.frm_forms.with_frm_style .frm_submit {
	margin-top: var(--wp--preset--spacing--30);
}
/* The colours are restated rather than left to --submit-bg-color: the
   formidable-style preset hard-codes #579AF6 in a three-class rule that the
   variables never reach. Same specificity, later stylesheet, so this wins. */
.frm_forms.with_frm_style .frm_submit button,
.frm_forms.with_frm_style .frm_submit input[type="submit"] {
	min-height: var(--rh-form-field-height);
	padding: var(--submit-padding);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--cream);
	background: var(--wp--preset--color--brick);
	border: 1px solid var(--wp--preset--color--brick);
	border-radius: var(--rh-form-radius);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.frm_forms.with_frm_style .frm_submit button:hover,
.frm_forms.with_frm_style .frm_submit input[type="submit"]:hover {
	color: var(--wp--preset--color--cream);
	background: var(--wp--preset--color--brick-hover);
	border-color: var(--wp--preset--color--brick-hover);
}
.frm_forms.with_frm_style .frm_submit button:focus-visible,
.frm_forms.with_frm_style .frm_submit input[type="submit"]:focus-visible {
	outline: 2px solid var(--rh-focus-ink, var(--wp--preset--color--brick));
	outline-offset: 2px;
}

/* reCAPTCHA is a fixed-width iframe from Google; let it scroll inside its
   own box on a narrow phone rather than widening the page. */
.frm_forms.with_frm_style .frm-g-recaptcha,
.frm_forms.with_frm_style .g-recaptcha {
	max-width: 100%;
	overflow-x: auto;
}

/* The message above the form after a failed or a successful submit. */
.frm_forms.with_frm_style .frm_error_style,
.frm_forms.with_frm_style .frm_message,
.frm_forms.with_frm_style .frm_success_style {
	border-radius: var(--rh-form-radius);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--medium);
}


/* A field whose label the form builder set to "hidden" - the Last half of
   the name pair - is hidden with visibility, which takes the label out of
   the accessibility tree too: the field had no name at all (4.1.2). Keep the
   space it holds, so the two halves still line up, and keep it readable to
   assistive technology; only the ink goes. */
.with_frm_style .frm_hidden_container .frm_primary_label {
	visibility: visible;
	color: transparent;
	user-select: none;
}
.with_frm_style .frm_hidden_container .frm_primary_label .frm_required {
	color: transparent;
}

/* ---- The Salesforce Web-to-Lead form -----------------------------------
   This block carries a whole HTML document — doctype, head and all — with a
   Bootstrap 4.3.1 <link> inside it. The parser drops the document wrapper
   but keeps the stylesheet, and because it loads after everything the theme
   enqueues, Bootstrap's reboot wins on bare element selectors: the page
   loses the cream ground to #fff, the body face to Bootstrap's system
   stack, and every unclassed link to #007bff. None of that is ours to
   delete, so it is overruled here on specificity instead, scoped by :has()
   to the one page the form is on. */

body:has(form[action*="webto.salesforce.com"]) {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: var(--wp--custom--leading--body);
	color: var(--wp--preset--color--charcoal);
	background-color: var(--wp--preset--color--cream);
	text-align: left;
}

/* Only the links Bootstrap actually captured: the unclassed prose links in
   the page body. The header, the footer lists and every button carry a
   class and a rule of their own that already outranks Bootstrap, so they
   are left alone rather than restated — a rule wide enough to catch them
   would have turned the footer's muted-ink list brick and underlined. */
body:has(form[action*="webto.salesforce.com"]) main a:not([class]) {
	color: var(--wp--preset--color--brick);
	text-decoration: underline;
}
body:has(form[action*="webto.salesforce.com"]) main a:not([class]):hover {
	color: var(--wp--preset--color--brick-hover);
}

/* Bootstrap's .container centres itself at 1140px in whatever box it lands
   in — and the band it lands in here is full-bleed, so the form sat 20px
   from the window edge while the eyebrow above it sat on the content rail.
   WordPress constrains ordinary children with a `:where()` rule of zero
   specificity, which any vendor class beats; this puts the container back
   on the rail by hand. The panel then takes the measure within it. */
body:has(form[action*="webto.salesforce.com"]) .container {
	box-sizing: border-box;
	width: auto;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-inline: 0;
}

form[action*="webto.salesforce.com"] .form-group {
	margin-bottom: var(--rh-form-gap);
}
form[action*="webto.salesforce.com"] label {
	display: block;
	margin-bottom: 0.45rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--charcoal);
}

/* The vendor's own asterisk is `color: red` on cream — 4.0:1, and red. */
form[action*="webto.salesforce.com"] .required-asterisk {
	margin-left: 0.15em;
	color: var(--wp--preset--color--brick);
	font-weight: 600;
}

form[action*="webto.salesforce.com"] .form-control,
form[action*="webto.salesforce.com"] input[type="text"],
form[action*="webto.salesforce.com"] input[type="email"],
form[action*="webto.salesforce.com"] input[type="tel"],
form[action*="webto.salesforce.com"] select,
form[action*="webto.salesforce.com"] textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--rh-form-field-height);
	padding: var(--rh-form-field-pad);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.45;
	color: var(--wp--preset--color--charcoal);
	background-color: var(--rh-form-field-bg);
	border: 1px solid var(--rh-form-field-edge);
	border-radius: var(--rh-form-radius);
	box-shadow: none;
	transition: border-color 0.2s ease;
}
form[action*="webto.salesforce.com"] textarea.form-control {
	min-height: 8.5rem;
	line-height: var(--wp--custom--leading--body);
}
form[action*="webto.salesforce.com"] .form-control:focus,
form[action*="webto.salesforce.com"] select:focus,
form[action*="webto.salesforce.com"] textarea:focus {
	outline: 2px solid var(--rh-focus-ink, var(--wp--preset--color--brick));
	outline-offset: 2px;
	border-color: var(--wp--preset--color--brick);
	box-shadow: none;
}

/* A select has to say it is a select. Bootstrap leaves the native arrow to
   the platform, which on cream-on-white reads as a text field. */
form[action*="webto.salesforce.com"] select.form-control {
	appearance: none;
	padding-right: 2.75rem;
	background-image: linear-gradient(45deg, transparent 50%, var(--wp--preset--color--muted-ink) 50%),
		linear-gradient(135deg, var(--wp--preset--color--muted-ink) 50%, transparent 50%);
	background-position: right 1.25rem center, right 1rem center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

/* The checkbox groups. Bootstrap pulls the input out of flow with a
   negative margin; a flex row puts it back and gives the row a real height.
   The box is the hit area here and not the label: the vendor wrote `for`
   attributes naming ids these inputs do not have, so clicking the word does
   nothing. That is markup, not CSS, and this form's markup is the client's
   CRM pipeline — reported rather than edited. */
form[action*="webto.salesforce.com"] .form-check {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	padding-left: 0;
}
/* One .form-check on this form holds nothing but a hidden input. A 44px tap
   target for something nobody can tap is 44px of hole in the form. */
form[action*="webto.salesforce.com"] .form-check:not(:has(.form-check-label)) {
	min-height: 0;
}
form[action*="webto.salesforce.com"] .form-check-input {
	position: static;
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--wp--preset--color--brick);
}
form[action*="webto.salesforce.com"] .form-check-input:focus-visible {
	outline: 2px solid var(--rh-focus-ink, var(--wp--preset--color--brick));
	outline-offset: 2px;
}
form[action*="webto.salesforce.com"] .form-check-label {
	margin-bottom: 0;
	font-weight: 400;
	cursor: pointer;
}

/* The block ships its own <style> for the submit button — #7f2529, 4px,
   its own padding. Overruled on specificity so the button matches every
   other button on the site. */
form[action*="webto.salesforce.com"] button[type="submit"],
form[action*="webto.salesforce.com"] .btn-primary {
	min-height: var(--rh-form-field-height);
	margin-top: var(--wp--preset--spacing--30);
	padding: 0.875rem 2rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--cream);
	background-color: var(--wp--preset--color--brick);
	border: 1px solid var(--wp--preset--color--brick);
	border-radius: var(--rh-form-radius);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
form[action*="webto.salesforce.com"] button[type="submit"]:hover,
form[action*="webto.salesforce.com"] .btn-primary:hover {
	color: var(--wp--preset--color--cream);
	background-color: var(--wp--preset--color--brick-hover);
	border-color: var(--wp--preset--color--brick-hover);
}
form[action*="webto.salesforce.com"] button[type="submit"]:focus-visible,
form[action*="webto.salesforce.com"] .btn-primary:focus-visible {
	outline: 2px solid var(--rh-focus-ink, var(--wp--preset--color--brick));
	outline-offset: 2px;
	box-shadow: none;
}

form[action*="webto.salesforce.com"] .g-recaptcha {
	max-width: 100%;
	overflow-x: auto;
}

/* ---- Forms on a phone ---------------------------------------------------
   Formidable stacks its own grid under 600px and the Salesforce form is a
   single column already, so this is about the panel and the thumb: the
   panel gives its gutters back to the fields, and the submit button is the
   full width of the form rather than a 120px target at the foot of
   twenty-two questions. */

@media (max-width: 600px) {
	.frm_forms.with_frm_style,
	form[action*="webto.salesforce.com"] {
		--rh-form-pad: 1.1rem;
		border-radius: var(--wp--custom--media--radius-small);
		/* 16px, or Safari zooms the page on focus and never zooms back. */
		--field-font-size: 1rem;
	}
	.frm_forms.with_frm_style .frm_submit button,
	.frm_forms.with_frm_style .frm_submit input[type="submit"],
	form[action*="webto.salesforce.com"] button[type="submit"] {
		width: 100%;
	}
	form[action*="webto.salesforce.com"] .form-control,
	form[action*="webto.salesforce.com"] select,
	form[action*="webto.salesforce.com"] textarea {
		font-size: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.frm_forms.with_frm_style .frm_submit button,
	.frm_forms.with_frm_style .frm_submit input[type="submit"],
	form[action*="webto.salesforce.com"] .form-control,
	form[action*="webto.salesforce.com"] select,
	form[action*="webto.salesforce.com"] textarea,
	form[action*="webto.salesforce.com"] button[type="submit"],
	form[action*="webto.salesforce.com"] .btn-primary {
		transition: none;
	}
}

/* ---- The hero film -----------------------------------------------------
   Drone footage of the farm at golden hour, muted and looping behind the
   title. Three things make it defensible rather than decorative: it is 1.4MB
   for fourteen seconds, it never blocks the first paint (the poster is a frame
   from the clip itself, so what you see first is what plays), and anyone who
   has asked for less motion gets the still instead. */
.rh-hero-film {
	/* The poster lives here rather than in the page.
	   It was set as a custom property in the cover block's inline style,
	   which the block editor cannot account for — a style attribute that
	   core's own save() would not produce makes the block invalid, so the
	   home page offered "Attempt Block Recovery" on its hero, and taking
	   that offer would have dropped the poster without saying so.
	   The file is a theme asset like the clip it is a frame of, so this is
	   where it belongs. The custom property is still honoured if a page
	   sets one, which is how a second hero elsewhere could differ. */
	background-image: var(--rh-hero-poster, url("../img/farm-poster.jpg"));
	background-size: cover;
	background-position: center;
}
.rh-hero-film .wp-block-cover__video-background {
	object-fit: cover;
}

/* ---- No controls on a background film. Ever. --------------------------
   The cover block does not set `controls`, which ought to be the end of it,
   and is not. A <video> can still put a control surface over itself: Safari
   on iOS draws a play button on a film it has refused to autoplay, Chrome
   offers a picture-in-picture button on hover over anything big enough, and
   a long-press or a right-click brings up a menu on any of them. None of
   that belongs on a film that is the background of a heading — there is
   nothing to play, pause, scrub, download or pop out, and a control that
   appears over the site's first words is a bug whichever vendor drew it.

   So it is shut off from three directions: the attributes in
   assets/js/hero-video.js, pointer-events here so nothing can be clicked or
   long-pressed in the first place, and the vendor pseudo-elements below for
   the overlays those two do not reach. Scoped to background video only —
   a video the client actually embeds in a page keeps its controls. */
.wp-block-cover__video-background,
.rh-hero-film video {
	pointer-events: none;
}
.wp-block-cover__video-background::-webkit-media-controls,
.wp-block-cover__video-background::-webkit-media-controls-enclosure,
.wp-block-cover__video-background::-webkit-media-controls-panel,
.wp-block-cover__video-background::-webkit-media-controls-start-playback-button,
.wp-block-cover__video-background::-webkit-media-controls-overlay-play-button,
.rh-hero-film video::-webkit-media-controls,
.rh-hero-film video::-webkit-media-controls-enclosure,
.rh-hero-film video::-webkit-media-controls-panel,
.rh-hero-film video::-webkit-media-controls-start-playback-button,
.rh-hero-film video::-webkit-media-controls-overlay-play-button {
	display: none !important;
	-webkit-appearance: none;
	appearance: none;
	opacity: 0 !important;
}

/* The pause control hero-video.js adds (WCAG 2.2.2). Small and quiet in the
   bottom corner, clear of the title, and a full 44px target. The film's own
   pointer-events: none above does not reach it: it is a sibling, not the
   video. */
.rh-film-toggle {
	position: absolute;
	right: var(--wp--preset--spacing--40);
	bottom: var(--wp--preset--spacing--40);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--cream) 55%, transparent);
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--wp--preset--color--charcoal) 45%, transparent);
	color: var(--wp--preset--color--cream);
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--fade) var(--wp--custom--motion--ease);
}
.rh-film-toggle:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--charcoal) 70%, transparent);
}
.rh-film-toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--cream);
	outline-offset: 2px;
}
.rh-film-toggle svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
	/* The poster is already painted behind it, so hiding the video leaves the
	   frame rather than a hole. */
	.rh-hero-film .wp-block-cover__video-background,
	.rh-film-toggle {
		display: none;
	}
}

/* ---- Directory lists ---------------------------------------------------
   The Nearby guides are a 39-venue directory lifted out of two PDFs. A list
   that long needs air between its entries or it reads as one block of grey,
   and the lists are inside .rh-about__section bands, which is where they
   are scoped from. The onward cards are a grid, not a list to read down, so
   they keep the grid's own gap. */
.rh-about__section .wp-block-list:not(.rh-onward) > li + li {
	margin-block-start: 0.6rem;
}
/* A phone number broken across two lines is unusable on the device it is most
   likely to be read on. */
a[href^="tel:"] {
	white-space: nowrap;
}

/* The post byline (patterns/byline.php): the category is a label, and its
   link reads as part of the label - the label's ink, not the body link's
   brick underline - until it is pointed at. */
.rh-post-byline .wp-block-post-terms.is-style-label a {
	color: inherit;
	text-decoration: none;
}
.rh-post-byline .wp-block-post-terms.is-style-label a:hover,
.rh-post-byline .wp-block-post-terms.is-style-label a:focus-visible {
	color: var(--wp--preset--color--brick);
	text-decoration: underline;
}

/* The maker's byline sits at the end of the footer's bottom row — last in
   source order, so it is the last thing a screen reader reaches too, which is
   the right place for a credit. */
.rh-byline {
	margin-left: auto;
}
.rh-byline a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent);
}
.rh-byline a:hover,
.rh-byline a:focus-visible {
	color: var(--wp--preset--color--brick);
	border-bottom-color: currentColor;
}
@media (max-width: 600px) {
	.rh-byline {
		margin-left: 0;
	}
}

/* ---- Where to next -----------------------------------------------------
   Was a bulleted list of links, which is the least interesting thing a page
   can end on. The items become cards in their own right: the link fills the
   card, an arrow sits at the end of it and moves on hover, and the brick rule
   arrives from the left rather than being there all along. The timing is
   theme.json's custom.motion — these cards sit outside the header, so the
   header's own --rh-fade never reached them and they ran on its fallback. */
.rh-onward {
	list-style: none;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.rh-onward > li {
	margin: 0;
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--media--frame);
	transition:
		transform var(--wp--custom--motion--fade) var(--wp--custom--motion--ease),
		box-shadow var(--wp--custom--motion--fade) var(--wp--custom--motion--ease),
		border-color var(--wp--custom--motion--fade) var(--wp--custom--motion--ease);
}
/* The rule that sweeps in from the left. */
.rh-onward > li::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background-color: var(--wp--preset--color--brick);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform var(--wp--custom--motion--fade) var(--wp--custom--motion--ease);
}
.rh-onward > li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--charcoal);
	font-weight: 500;
	text-decoration: none;
}
/* The arrow is drawn, not typed, so the client's link text stays the link
   text — nobody has to remember to append an arrow to a menu label. */
.rh-onward > li > a::after {
	content: "→";
	color: var(--wp--preset--color--brick);
	font-size: 1.1em;
	line-height: 1;
	transition: transform var(--wp--custom--motion--fade) var(--wp--custom--motion--ease);
}
.rh-onward > li:hover,
.rh-onward > li:focus-within {
	transform: translateY(-2px);
	border-color: var(--wp--preset--color--tan);
	box-shadow: var(--wp--preset--shadow--card);
}
.rh-onward > li:hover::before,
.rh-onward > li:focus-within::before {
	transform: scaleY(1);
	transform-origin: top;
}
.rh-onward > li:hover > a::after,
.rh-onward > li:focus-within > a::after {
	transform: translateX(4px);
}
.has-parchment-background-color .rh-onward > li {
	background-color: var(--wp--preset--color--cream);
}
@media (prefers-reduced-motion: reduce) {
	.rh-onward > li,
	.rh-onward > li::before,
	.rh-onward > li > a::after {
		transition: none;
	}
	.rh-onward > li:hover,
	.rh-onward > li:focus-within {
		transform: none;
	}
}

/* ---- The sign-up embed on /subscribe/ ----------------------------------
   The subscribe form is a Ghost signup-form embed: a <script> from a CDN
   that replaces itself with an iframe served from the client's own Ghost
   site. Nothing inside that iframe is reachable from this stylesheet — not
   the field, not the button, not the focus ring — and nothing in the embed's
   markup is ours to edit, because it is somebody's live mailing list. So
   this is the box around it, and only the box.

   It takes the same vocabulary as the Formidable and Salesforce panels
   above: the theme's media radius, a hairline `line` border, the shadow
   that lifts a panel off the band, and the prose measure, because a form
   1200px wide is a form nobody finishes.

   Two things differ, and both follow from the iframe:

     padding 0   the embed paints its own background edge to edge and sets
                 its own interior spacing. A padded panel would show a ring
                 of theme cream around the embed's slightly warmer cream —
                 a seam, not a frame.
     overflow    hidden, so the corner radius actually clips the iframe.
                 Without it the box has round corners and the form has
                 square ones.

   --rh-embed-bg is the embed's own data-background-color, repeated so the
   panel is the right colour in the moment before the iframe paints, and if
   the script never loads at all. It is theme.json's custom.embed.ground: if
   Red Horse ever changes that attribute, change the token to match; they are
   one colour in two places and the other place is not ours to touch. */

:root {
	--rh-embed-bg: var(--wp--custom--embed--ground);
}

.rh-embed-panel {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--custom--measure);
	margin-inline: 0;
	margin-top: var(--wp--preset--spacing--30);
	padding: 0;
	overflow: hidden;
	background-color: var(--rh-embed-bg);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--media--radius);
	box-shadow: var(--wp--preset--shadow--bar);
}

/* The embed's own wrapper carries a fixed height; let it have the full
   width of the panel rather than the iframe's 300px default. */
.rh-embed-panel > div {
	width: 100%;
}
.rh-embed-panel iframe {
	display: block;
	width: 100%;
	border: 0;
}

/* ---- What people said: the quotation card ------------------------------
   A testimonial was three bare paragraphs in a row — an italic display line,
   a name, a role at 10px — stacked down the left of a full-width band. Four
   of them ran as one grey column of italics with nothing to say where one
   person stopped and the next began, and the right half of the band was
   empty while the role lines were too small to read.

   So a testimonial is now an object. It takes the card chrome the roster and
   the past-event entries already use — parchment or cream ground a shade off
   its band, a hairline frame, the 3px brick rule across the top, 10px radius
   and the same small lift under the pointer — because the site should have
   one card, used in several places, rather than a new one per section.

   Inside, the words come first and the attribution is pushed to the foot of
   the card by `margin-top: auto`, so every card in a row signs off on the
   same line whatever length the quotation is. A hairline divides the two. A
   drawn quotation mark sits in the top-right corner, away from the opening
   “ of the text itself, at an opacity that reads as watermark rather than as
   a second punctuation mark.

   Selected structurally — the quotation is the large-font paragraph, the
   name is the paragraph after it, the role the one after that — so the
   client's own words and their markup are untouched by any of this. The
   post-content shape the Testimonial-record pattern emits is handled in the
   same rules. */
.rh-quote-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	margin-top: var(--wp--preset--spacing--50);
}
.rh-quotes .wp-block-post-template {
	gap: clamp(1rem, 2.5vw, 2rem);
}
/* Two up, not three: these quotations run to sixty words and a third column
   would set them at about twenty characters a line. */
@media (min-width: 782px) {
	.rh-quote-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
/* The grid owns the spacing between cards; the flow layout's own stacking
   margins would add a second, uneven one on top of it. */
.rh-quote-grid > * {
	margin-block: 0;
}

.rh-quote {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
	background-color: var(--wp--preset--color--parchment);
	border: 1px solid var(--wp--preset--color--line);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
/* A card is always one shade off whatever it is sitting on. */
.has-parchment-background-color .rh-quote,
.has-tan-background-color .rh-quote {
	background-color: var(--wp--preset--color--cream);
}
/* A group's own layout centres its children with `margin-left: auto
   !important`, and an auto margin on the cross axis stops a flex item
   stretching — so the name inside the card came out 83px wide, with 83px of
   hairline divider floating in the middle of a 500px card. Core's rule is
   one class weight and prints after this file, so the card has to be named
   twice to outrank it. The card is not the page rail; its children fill it. */
.wp-block-group.rh-quote > * {
	margin-inline: 0 !important;
}
.rh-quote:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--card);
	border-color: var(--wp--preset--color--tan);
}

/* The mark is drawn, not typed: it belongs to the card, and the quotation
   keeps whatever punctuation the person who said it was given. */
.rh-quote::before {
	content: "\201C";
	position: absolute;
	top: -0.16em;
	right: 0.08em;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(6rem, 9vw, 8rem);
	line-height: 1;
	color: var(--wp--preset--color--brick);
	opacity: 0.13;
	pointer-events: none;
}

/* The words. Hand-written testimonials carry the display face inline; the
   pattern's post-content shape is given it here. */
.rh-quote .wp-block-post-content p {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
}
.rh-quote > .has-large-font-size,
.rh-quote .wp-block-post-content p {
	position: relative;
	margin: 0;
	line-height: var(--wp--custom--leading--quote);
	text-wrap: pretty;
}

/* The attribution sits at the foot of the card, on its own hairline, so a
   row of cards signs off along one line: name, then role. New markup says
   this with the `attribution` paragraph style (styles/blocks/); the
   !important here outranks the font sizes and margins the hand-written
   testimonials carry inline. */
/* legacy markup: the .wp-block-post-content + .is-style-label selectors (testimonial posts shown as .rh-quote cards by from-the-guestbook) go when no pattern renders those; the role line under an `attribution` paragraph stays */
.rh-quote .is-style-label {
	margin: var(--wp--preset--spacing--40) 0 0.15rem;
}
.rh-quote .has-small-font-size {
	margin: 0;
}
.rh-quote .wp-block-post-content + .is-style-label {
	margin-top: auto !important;
	margin-bottom: 0;
	padding-top: clamp(1.1rem, 2vw, 1.5rem);
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small) !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--charcoal);
}
/* Whoever they are, said in a size a person can read: the role line was set
   at x-small, which is 10px. The first selector is the role line under an
   `attribution` paragraph, which still carries has-x-small-font-size: core
   prints that class with !important, so the style's own `& + p` cannot win. */
.rh-quote > .has-large-font-size + p + p,
.rh-quote .wp-block-post-content + .is-style-label + p {
	margin-top: 0.25rem !important;
	margin-bottom: 0;
	padding-top: 0;
	border-top: 0;
	font-size: 0.8125rem !important;
	font-weight: 400 !important;
	line-height: 1.45;
	color: var(--wp--preset--color--muted-ink);
}
/* An unattributed quotation is still a card; it just has nothing to sign. */
.rh-quote > .has-large-font-size:only-child {
	margin-block: auto;
}
/* A quotation nobody signed still has to sit properly in its card. With an
   attribution the foot of the card is anchored by margin-top: auto; without
   one there is nothing to push against, so the quotation floated in the
   middle of a half-empty box. Pin it to the top instead: the empty space
   below then reads as a card that is short, rather than as one with a hole
   in it.

   Deleting the quotation would have been the other fix, and it is the
   client's own copy, so no. */
.rh-quote > p:only-of-type {
	margin-block: 0 auto;
}

@media (prefers-reduced-motion: reduce) {
	.rh-quote,
	.rh-quote:hover {
		transition: none;
		transform: none;
	}
}

/* ---- The enquiry band --------------------------------------------------
   A heading, one line and a button, left-ranged across a 1200px band, left
   two thirds of it empty and read as the foot of the section above rather
   than as the thing the page is asking for. The button comes up beside the
   words instead. */
@media (min-width: 782px) {
	.rh-enquire .wp-block-buttons {
		justify-content: flex-end;
		margin-top: 0 !important;
	}
}

/* ---- The shop ----------------------------------------------------------
   The store is not in the navigation, but it is still the farm's shop, and
   it was the one part of the site still wearing WooCommerce's own clothes:
   naked thumbnails on the page ground, a browser-default sort control, tile
   bottoms that landed wherever the title stopped wrapping, and a content rail
   190px wider than every other page's.

   None of this could go in theme.json. The shop renders through
   `woocommerce/legacy-template`, whose output carries no `wp-block-*` class
   for a `styles.blocks` entry to match - the reasoning is written out in full
   above the loop hooks in functions.php. So this is CSS over WooCommerce's
   HTML, the same arrangement as the enquiry forms further up this file, and
   it is written to survive Woo renaming things: every rule hangs off a class
   that WooCommerce has shipped since 3.0, plus `.rh-shop-card`, which the
   theme adds itself.

   The card is NOT a fourth card style. It is `.rh-roster__card` with a
   different payload: parchment on cream (cream on a tinted band), 1px line
   border, 3px brick cap, 10px radius, lift-and-shadow on hover, 1.04 on the
   photograph, and the focus ring drawn by the card rather than the link.

   What this deliberately does not do: nothing here repairs the shop. The
   drafts stay drafted, the empty categories stay empty, and the eleven
   products whose alt text is a UUID still have a UUID for alt text. Those are
   content, and they are listed in the handover note instead.
   ---------------------------------------------------------------------- */

:root {
	--rh-shop-gap: var(--wp--preset--spacing--40);
	--rh-shop-card-pad: 1.15rem;
	--rh-shop-radius: var(--wp--custom--media--frame);
}

/* ---- The frame ---------------------------------------------------------
   WooCommerce's legacy block wraps itself in `.alignwide`, which on this
   theme is 1440px - so the product grid ran 1392px wide while the footer
   beneath it, and every other page on the site, held the 1200px content
   rail. The shop lined up with nothing. Pulling it back to `contentSize` is
   the single change that makes the page look like it belongs here. */
.woocommerce #primary.content-area {
	max-width: var(--wp--style--global--content-size, 1200px);
	margin-inline: auto;
}
.woocommerce #primary.content-area > .site-main {
	margin: 0;
}

/* ---- The archive header ------------------------------------------------
   Breadcrumb and title become one parchment band, the way every other page
   on the site opens on a band rather than on bare page ground.

   The bleed is drawn, not laid out: `box-shadow` with a 100vmax spread paints
   the band past both edges and `clip-path` crops the vertical overspill, so
   the band is full width without the element ever being wider than its
   container. The negative-margin/100vw version of this trick adds the
   scrollbar's width to the page and gives you a horizontal scrollbar on
   Windows; this one cannot, because nothing in it is a length. */
.post-type-archive-product .woocommerce-breadcrumb,
.tax-product_cat .woocommerce-breadcrumb,
.tax-product_tag .woocommerce-breadcrumb,
.post-type-archive-product .woocommerce-products-header,
.tax-product_cat .woocommerce-products-header,
.tax-product_tag .woocommerce-products-header {
	background-color: var(--wp--preset--color--parchment);
	box-shadow: 0 0 0 100vmax var(--wp--preset--color--parchment);
	clip-path: inset(0 -100vmax);
	margin: 0;
}
.post-type-archive-product .woocommerce-breadcrumb,
.tax-product_cat .woocommerce-breadcrumb,
.tax-product_tag .woocommerce-breadcrumb {
	padding-top: var(--wp--preset--spacing--50);
}
.post-type-archive-product .woocommerce-products-header,
.tax-product_cat .woocommerce-products-header,
.tax-product_tag .woocommerce-products-header {
	padding-bottom: var(--wp--preset--spacing--60);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* The breadcrumb IS the eyebrow. The site puts a tracked brick line above
   every page title, and WooCommerce has already written one here - so it is
   set as an eyebrow rather than having a second line of invented copy put
   above it. */
.woocommerce .woocommerce-breadcrumb {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--custom--eyebrow--size, 0.75rem);
	font-weight: var(--wp--custom--eyebrow--weight, 500);
	letter-spacing: var(--wp--custom--tracking--eyebrow, 0.28em);
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--wp--preset--color--muted-ink);
}
/* Underlined at rest: brick against the muted-ink trail is 1.03:1, so colour
   alone did not say which parts of the trail are links (1.4.1). */
.woocommerce .woocommerce-breadcrumb a {
	color: var(--wp--preset--color--brick);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}
/* WooCommerce's show-password eye is a 22px button beside the password
   field; 2.5.8 asks for 24. */
.woocommerce form .show-password-input {
	min-width: 24px;
	min-height: 24px;
}
.woocommerce .woocommerce-breadcrumb a:hover {
	color: var(--wp--preset--color--brick-hover);
	text-decoration-thickness: 2px;
}

.woocommerce-products-header__title.page-title {
	margin: var(--wp--preset--spacing--40) 0 0;
	font-size: var(--wp--preset--font-size--huge);
	line-height: var(--wp--custom--leading--display);
	text-wrap: balance;
}

/* ---- The toolbar -------------------------------------------------------
   Result count and sort order belong on one line. They are two siblings in
   WooCommerce's flow with no wrapper between them and nothing the theme may
   add one to, so `main.site-main` becomes the grid and those two are the only
   children that do not span it. Every other child spans the full width, which
   is what block flow did before - except that grid does not collapse margins,
   so the spacing below is written out rather than inherited. */
.post-type-archive-product main.site-main,
.tax-product_cat main.site-main,
.tax-product_tag main.site-main {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 0;
}
.post-type-archive-product main.site-main > *,
.tax-product_cat main.site-main > *,
.tax-product_tag main.site-main > * {
	grid-column: 1 / -1;
}
.post-type-archive-product main.site-main > .woocommerce-result-count,
.tax-product_cat main.site-main > .woocommerce-result-count,
.tax-product_tag main.site-main > .woocommerce-result-count {
	grid-column: 1;
}
.post-type-archive-product main.site-main > .woocommerce-ordering,
.tax-product_cat main.site-main > .woocommerce-ordering,
.tax-product_tag main.site-main > .woocommerce-ordering {
	grid-column: 2;
	justify-self: end;
}
/* An empty notices wrapper would otherwise hold open a grid row. */
.woocommerce .woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce .woocommerce-result-count {
	float: none;
	margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--custom--label--size, 0.625rem);
	font-weight: var(--wp--custom--label--weight, 600);
	letter-spacing: var(--wp--custom--tracking--label, 0.22em);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-ink);
}
.woocommerce .woocommerce-ordering {
	float: none;
	margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--40);
}

/* The sort control, given the same clothes as every other field on the site:
   white ground, `muted` edge at 5.2:1 rather than `line` at 1.3:1, the
   theme's 6px radius and a 48px tap target. The chevron is drawn in brick
   because `appearance: none` takes the native one away with the native
   styling. */
.woocommerce .woocommerce-ordering select.orderby {
	appearance: none;
	-webkit-appearance: none;
	min-height: 48px;
	max-width: 100%;
	padding: 0.6rem 2.6rem 0.6rem 0.95rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--charcoal);
	background-color: var(--wp--custom--surface--field);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238B3525' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.95rem center;
	background-size: 12px 8px;
	border: 1px solid var(--wp--preset--color--muted);
	border-radius: var(--wp--custom--header--radius, 6px);
	cursor: pointer;
}
.woocommerce .woocommerce-ordering select.orderby:hover {
	border-color: var(--wp--preset--color--brick);
}
.woocommerce .woocommerce-ordering select.orderby:focus-visible {
	outline: 2px solid var(--rh-focus-ink, var(--wp--preset--color--brick));
	outline-offset: 2px;
}

/* ---- The grid ----------------------------------------------------------
   WooCommerce floats its tiles at percentage widths and clears every nth
   child, which is why a row's tiles could never be the same height. Grid
   makes them equal by construction, and the column count is still read from
   Woo's own `columns-N` class - so the three pages that sell through a
   `[products columns="2"]` shortcode keep the two columns they asked for
   while the archive keeps four. */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(var(--rh-shop-cols, 4), minmax(0, 1fr));
	gap: var(--rh-shop-gap);
	margin: 0 0 var(--wp--preset--spacing--60);
	padding: 0;
	list-style: none;
}
.woocommerce ul.products.columns-1 { --rh-shop-cols: 1; }
.woocommerce ul.products.columns-2 { --rh-shop-cols: 2; }
.woocommerce ul.products.columns-3 { --rh-shop-cols: 3; }
.woocommerce ul.products.columns-4 { --rh-shop-cols: 4; }
.woocommerce ul.products.columns-5 { --rh-shop-cols: 5; }
.woocommerce ul.products.columns-6 { --rh-shop-cols: 6; }
/* Woo's own clearfix pseudo-elements become stray grid cells. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

/* ---- The card ----------------------------------------------------------
   `.rh-roster__card`, with a product inside it. */
.woocommerce ul.products li.product.rh-shop-card {
	position: relative;
	display: flex;
	flex-direction: column;
	float: none;
	clear: none;
	width: auto;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: var(--wp--preset--color--parchment);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--rh-shop-radius);
	text-align: left;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
/* A card is always one shade off whatever it is sitting on - the shop archive
   is page ground, but /fallsupportdrive/ and /sslsponsor/ embed their product
   loops in a parchment band. */
.has-parchment-background-color .woocommerce ul.products li.product.rh-shop-card,
.has-tan-background-color .woocommerce ul.products li.product.rh-shop-card,
.has-parchment-background-color ul.products li.product.rh-shop-card,
.has-tan-background-color ul.products li.product.rh-shop-card {
	background-color: var(--wp--preset--color--cream);
}
.woocommerce ul.products li.product.rh-shop-card:has(a:hover),
.woocommerce ul.products li.product.rh-shop-card:has(a:focus-within) {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--card);
	border-color: var(--wp--preset--color--tan);
}
/* The ring belongs to the card, because the thing being focused is a link
   wrapped round the whole top of it. The add-to-cart button is excluded: it
   has a box of its own and theme.json already rings it. */
.woocommerce ul.products li.product.rh-shop-card:has(> a.woocommerce-loop-product__link:focus-visible) {
	outline: 2px solid var(--rh-focus-ink, var(--wp--preset--color--brick));
	outline-offset: 3px;
}

/* The link that covers the photograph, the title and the price is the card's
   growing part, so the price lands on the same line in every tile of a row
   and the button beneath it lands on the same line too. */
.woocommerce ul.products li.product.rh-shop-card > a.woocommerce-loop-product__link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}
/* theme.json rings every link on :focus-visible, so without this the card is
   focused with TWO rings: the card's own, and the link's - and the link's is
   three-quarters eaten by the card's `overflow: hidden`, so what actually
   reaches the screen is one stray brick line across the card above the
   button. The card's ring is the real indicator; this takes the other away. */
.woocommerce ul.products li.product.rh-shop-card > a.woocommerce-loop-product__link:focus-visible {
	outline: none;
}

/* ---- The photograph ----------------------------------------------------
   Every product thumbnail WooCommerce serves here is already a 1:1 crop - the
   store is set to 1:1 at 300px - so the inconsistency is inside the pictures,
   not around them: the two Bill of Rights posters and one of the wood prints
   are letterboxed onto white inside their square file. A white mat fixes both
   cases at once. The letterboxed ones stop reading as a hole punched in the
   cream, and behind the full-bleed paintings it is never seen. It is also
   simply what a print shop does.

   The ratio is stated anyway, so a product uploaded later at some other shape
   is cropped to the grid rather than breaking the row. */
.rh-shop-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: var(--wp--custom--surface--field);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.woocommerce ul.products li.product.rh-shop-card .rh-shop-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
	transition: transform 0.5s ease;
}
.woocommerce ul.products li.product.rh-shop-card:has(a:hover) .rh-shop-card__media img {
	transform: scale(1.04);
}

/* ---- The words ---------------------------------------------------------- */
.rh-shop-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--rh-shop-card-pad) 1.3rem 0.9rem;
}
.woocommerce ul.products li.product.rh-shop-card .woocommerce-loop-product__title {
	margin: 0 0 0.55rem;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--wp--preset--color--charcoal);
	text-wrap: balance;
}
.woocommerce ul.products li.product.rh-shop-card:has(a:hover) .woocommerce-loop-product__title {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* The price is the one thing on the card that is data rather than prose, so
   it leads in brick the way a dateline leads a past event.

   It sits straight under the title rather than being pushed to the foot of the
   body. Pinning it there was the first version, and it does line every price in
   a row up with the others - but a grid row is as tall as its longest title, so
   next to a six-line product name a two-line one opened a hand's width of empty
   card between its title and its price, and the card read as though something
   had failed to load. Letting the price follow its title keeps the pair
   together and moves that slack to above the button, where it reads as air
   before the call to action instead of as a hole. The button still lands on the
   same line across the row, because the link above it is what stretches. */
.woocommerce ul.products li.product.rh-shop-card .price {
	margin: 0;
	padding-top: 0.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--brick);
}
.woocommerce ul.products li.product.rh-shop-card .price del {
	margin-right: 0.4rem;
	font-weight: 400;
	color: var(--wp--preset--color--muted-ink);
	opacity: 1;
}
.woocommerce ul.products li.product.rh-shop-card .price ins {
	text-decoration: none;
	background: none;
	font-weight: 600;
}
/* "$35.00 – $95.00" is a range, and the dash is where it should break. */
.woocommerce ul.products li.product.rh-shop-card .price .amount {
	white-space: nowrap;
}

.woocommerce ul.products li.product.rh-shop-card .star-rating {
	margin: 0 0 0.45rem;
	font-size: 0.8em;
	color: var(--wp--preset--color--brick);
}

/* ---- The action -------------------------------------------------------- */
.woocommerce ul.products li.product.rh-shop-card .button {
	display: block;
	width: auto;
	margin: 0 1.3rem 1.3rem;
	padding: 0.8rem 1rem;
	min-height: 48px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.6;
	text-align: center;
	text-decoration: none;
	color: var(--wp--preset--color--cream);
	background-color: var(--wp--preset--color--brick);
	border: 0;
	border-radius: var(--wp--custom--header--radius, 6px);
}
.woocommerce ul.products li.product.rh-shop-card .button:hover {
	background-color: var(--wp--preset--color--brick-hover);
	color: var(--wp--preset--color--cream);
}
.woocommerce ul.products li.product.rh-shop-card .button:focus-visible {
	outline: 2px solid var(--rh-focus-ink, var(--wp--preset--color--brick));
	outline-offset: 2px;
}
/* WooCommerce appends "View cart" after an AJAX add. It is a link, not a
   second button, and it reads as one here. */
.woocommerce ul.products li.product.rh-shop-card .added_to_cart {
	display: block;
	margin: -0.6rem 1.3rem 1.3rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--brick);
	text-align: center;
}
/* Woo's spinner tick sits on the button; keep it off the label. */
.woocommerce ul.products li.product.rh-shop-card .button.added::after {
	margin-left: 0.4em;
}

/* ---- Pagination --------------------------------------------------------
   WooCommerce draws page numbers as a bordered strip of cells. The site does
   not have anything that looks like that; it has the pill the query loop uses.
   So: pills, centred, 44px square, current page in brick. */
.woocommerce nav.woocommerce-pagination {
	margin: 0 0 var(--wp--preset--spacing--70);
	text-align: center;
}
.woocommerce nav.woocommerce-pagination ul {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}
.woocommerce nav.woocommerce-pagination ul li {
	margin: 0;
	padding: 0;
	overflow: visible;
	border: 0;
}
.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.7rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1;
	color: var(--wp--preset--color--charcoal);
	text-decoration: none;
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--header--radius, 6px);
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover {
	color: var(--wp--preset--color--brick);
	border-color: var(--wp--preset--color--tan);
	background-color: var(--wp--preset--color--parchment);
}
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:focus-visible {
	outline: 2px solid var(--rh-focus-ink, var(--wp--preset--color--brick));
	outline-offset: 2px;
}
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.current {
	color: var(--wp--preset--color--cream);
	background-color: var(--wp--preset--color--brick);
	border-color: var(--wp--preset--color--brick);
}

/* ---- Notices -----------------------------------------------------------
   The strip that says a thing went into the cart. Woo's default is a grey bar
   with a tick; this is the callout stripe the rest of the site uses. */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
	margin: var(--wp--preset--spacing--40) 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--charcoal);
	background-color: var(--wp--preset--color--parchment);
	border: 1px solid var(--wp--preset--color--line);
	border-left: 3px solid var(--wp--preset--color--forest);
	border-radius: var(--wp--custom--header--radius, 6px);
	list-style: none;
}
.woocommerce .woocommerce-error {
	border-left-color: var(--wp--preset--color--brick);
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before {
	display: none;
}
.woocommerce .woocommerce-message .button {
	margin-left: var(--wp--preset--spacing--30);
}

/* The "no products were found" state is NOT the classic notice above it: Woo
   renders that one through its block component, which arrives with an `is-info`
   modifier painting a bright blue bar and a blue circled `i`. On cream that is
   the loudest thing on the page, and it is the whole page - an empty category
   archive has nothing else in it. Nine of the fourteen product categories are
   empty, so this is a state the site really does serve. */
.woocommerce .woocommerce-no-products-found {
	margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--70);
}
.woocommerce .wc-block-components-notice-banner {
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--charcoal);
	background-color: var(--wp--preset--color--parchment);
	border: 1px solid var(--wp--preset--color--line);
	border-left: 3px solid var(--wp--preset--color--brick);
	border-radius: var(--wp--custom--header--radius, 6px);
}
.woocommerce .wc-block-components-notice-banner > svg {
	fill: var(--wp--preset--color--brick);
	background: none;
}
.woocommerce .wc-block-components-notice-banner.is-info,
.woocommerce .wc-block-components-notice-banner.is-success,
.woocommerce .wc-block-components-notice-banner.is-error {
	background-color: var(--wp--preset--color--parchment);
}
.woocommerce .wc-block-components-notice-banner.is-info > svg,
.woocommerce .wc-block-components-notice-banner.is-success > svg {
	fill: var(--wp--preset--color--forest);
}
.woocommerce .wc-block-components-notice-banner.is-info {
	border-left-color: var(--wp--preset--color--forest);
}
.woocommerce .wc-block-components-notice-banner__content {
	color: var(--wp--preset--color--charcoal);
}

/* ---- Narrower than a desk ----------------------------------------------
   Four columns to three at the laptop breakpoint, then two on a phone - two
   is what a shop should give you there, and the cards are built to survive
   it because the title is small and the price and button are pinned. */
@media (max-width: 1100px) {
	.woocommerce ul.products.columns-4,
	.woocommerce ul.products.columns-5,
	.woocommerce ul.products.columns-6 {
		--rh-shop-cols: 3;
	}
}
@media (max-width: 781px) {
	.woocommerce ul.products,
	.woocommerce ul.products[class*="columns-"] {
		--rh-shop-cols: 2;
	}
	.woocommerce ul.products li.product.rh-shop-card {
		--rh-shop-card-pad: 0.9rem;
	}
	.rh-shop-card__body {
		padding-inline: 0.9rem;
	}
	.woocommerce ul.products li.product.rh-shop-card .button {
		margin-inline: 0.9rem;
		margin-bottom: 0.9rem;
		padding-inline: 0.5rem;
	}
	.woocommerce ul.products li.product.rh-shop-card .added_to_cart {
		margin-inline: 0.9rem;
	}
	/* The toolbar stacks: the count on its own line, the control beneath it
	   at full width, because a 48px select squeezed beside a line of tracked
	   capitals on a 390px screen is neither. */
	.post-type-archive-product main.site-main,
	.tax-product_cat main.site-main,
	.tax-product_tag main.site-main {
		grid-template-columns: 1fr;
	}
	.post-type-archive-product main.site-main > .woocommerce-result-count,
	.tax-product_cat main.site-main > .woocommerce-result-count,
	.tax-product_tag main.site-main > .woocommerce-result-count,
	.post-type-archive-product main.site-main > .woocommerce-ordering,
	.tax-product_cat main.site-main > .woocommerce-ordering,
	.tax-product_tag main.site-main > .woocommerce-ordering {
		grid-column: 1;
		justify-self: stretch;
	}
	.woocommerce .woocommerce-result-count {
		margin-bottom: var(--wp--preset--spacing--30);
	}
	.woocommerce .woocommerce-ordering {
		margin-top: 0;
	}
	.woocommerce .woocommerce-ordering select.orderby {
		width: 100%;
	}
	.woocommerce-products-header__title.page-title {
		font-size: var(--wp--preset--font-size--xx-large);
	}
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product.rh-shop-card,
	.woocommerce ul.products li.product.rh-shop-card:has(a:hover),
	.woocommerce ul.products li.product.rh-shop-card:has(a:focus-within),
	.woocommerce ul.products li.product.rh-shop-card .rh-shop-card__media img,
	.woocommerce ul.products li.product.rh-shop-card:has(a:hover) .rh-shop-card__media img,
	.woocommerce nav.woocommerce-pagination ul li a.page-numbers {
		transition: none;
		transform: none;
	}
}

/* ---- The lead pair ------------------------------------------------------
   A band opens with a short statement on the left, under a brick rule, and
   the detail on the right. It was 42/58, which gave the statement more room
   than a two-line sentence needs and left the rule running most of the way
   across the page.

   The left column is addressed by what it contains — the rule — rather than
   by a class, because these columns are written into page content by six
   different build tools and carry no shared class to hook. :has() reaches
   every one of them, including pages built before this rule existed, and the
   inline flex-basis is overridden rather than migrated in the database.

   28/72: a third narrower, as asked. */
@supports selector(:has(*)) {
	.rh-page-body .wp-block-columns:not(.rh-offset) > .wp-block-column:has(> .rh-rule) {
		flex-basis: 28% !important;
	}
	.rh-page-body .wp-block-columns:not(.rh-offset) > .wp-block-column:has(> .rh-rule) + .wp-block-column {
		flex-basis: 72% !important;
	}
	/* Stacked, the widths are irrelevant and must not stick. */
	@media (max-width: 781px) {
		.rh-page-body .wp-block-columns:not(.rh-offset) > .wp-block-column:has(> .rh-rule),
		.rh-page-body .wp-block-columns:not(.rh-offset) > .wp-block-column:has(> .rh-rule) + .wp-block-column {
			flex-basis: 100% !important;
		}
	}
}


/* ---- The Candid transparency seal ---------------------------------------
   A third-party widget dropped into a core/html block, which is how it came
   to the site. The SVG it serves declares no intrinsic size, so unboxed it
   grew to the full width of its column, broke out of the content rail and
   landed across the scroll meter at the foot of /donate/. It is a
   credential, not an illustration, so it is given the size of one. */
.rh-seal {
	display: inline-block;
	width: 112px;
	max-width: 100%;
	margin-top: var(--wp--preset--spacing--40);
	line-height: 0;
}
.rh-seal img,
.rh-seal svg {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- Chips as cards ----------------------------------------------------
   A chip was an outlined label and nothing else: a 10px word floating in a
   wide box, which read as an empty input field rather than as something the
   organisation stands by. It joins the vocabulary the rest of the site
   already uses for a card — 1px line border, a 3px brick rule along the top,
   the small media radius, the card shadow, a ground that is the opposite of
   the band it sits on, and a small lift on hover.

   The chip itself is the `chip` paragraph style (styles/blocks/chip.json),
   which takes its ground from --rh-card-ground. What is left here is the
   grid around the chips, and the hover. */
.rh-chips {
	/* The grid runs to the measure of the cards, not to the measure of the
	   band: three short words spread across 1200px are three empty boxes.
	   !important because core's per-container layout rule for the grid is
	   printed after this file and sets the gap at the same specificity. */
	max-width: 60rem !important;
	margin-inline: auto !important;
	gap: var(--wp--preset--spacing--40) !important;
}
/* The chip style's own hover: the same lift, with nothing inline to beat. */
.is-style-chip:hover {
	box-shadow: var(--wp--preset--shadow--panel);
	border-color: var(--wp--preset--color--tan);
}
@media (prefers-reduced-motion: no-preference) {
	.is-style-chip:hover {
		transform: translateY(-2px);
	}
}

/* ---- The values, which are the chips that carry weight ------------------
   Seven of the eight values are names with no body text anywhere on the site
   and are not going to get any until Red Horse writes it, so a values card
   has to look finished while holding a single word. It gets the room a short
   statement would have had and a rule under the label, so it has a top and a
   base and the eye reads a composition rather than a sentence that stopped
   early. The denser chip lists — who the services are for, which funds a gift
   can go to — stay at their own height: they are a list, not a statement. */
.rh-chips--values .rh-chip {
	min-height: 7rem;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) !important;
}

/* Drawn rather than typed, so it cannot be mistaken for copy and no word has
   to be invented to fill the space under the label. */
.rh-chips--values .rh-chip::after {
	content: "";
	display: block;
	width: 1.75rem;
	height: 2px;
	margin-top: 0.7rem;
	/* This is the chip's only mark now that the brick cap is gone, so it
	   carries the colour at rest rather than waiting for a pointer that a
	   touch screen never sends. */
	background-color: var(--wp--preset--color--brick);
	transition: background-color 0.2s ease, width 0.2s ease;
}
.rh-chips--values .rh-chip:hover::after {
	width: 3rem;
	background-color: var(--wp--preset--color--brick);
}

/* The column count is declared on the block — three where there are six
   values, four where there are eight — so both bands come out in whole rows.
   Core writes that count once and never revisits it, so the phone collapse is
   here: two columns, which is whole rows for six and for eight alike. */
@media (max-width: 781px) {
	.rh-chips {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.is-style-chip,
	.rh-chips .rh-chip,
	.rh-chips .rh-chip:hover,
	.rh-chips--values .rh-chip::after,
	.rh-chips--values .rh-chip:hover::after {
		transition: none;
		transform: none;
	}
}

/* Where-to-next cards that live inside a column rather than across a band.
   The grid is auto-fit from 16rem, which inside a half-width column gives two
   narrow cards — and two groups of two, side by side, read as one grid of
   four rather than as campaigns on the left and ways to help on the right.
   In a column each list runs down its own side. */
.wp-block-column > .rh-onward--stack {
	grid-template-columns: 1fr;
}

/* ---- Editor parity -----------------------------------------------------
   The rail, the measure, the band rhythm and the lead pair above are scoped
   to `.rh-page-body > .wp-block-post-content`, which is how a page renders
   on the front end and in the Site Editor's template view. The post editor
   and the pattern previews have no such wrapper: their content sits straight
   in the editor's root container, so without these the same blocks rendered
   on a different rail in the editor than on the page.

   `:not(:has(> .wp-block-template-part))` keeps them off the Site Editor's
   template root, whose children are the header, main and footer rather than
   page content. Nothing here can match on the front end. */
/* legacy markup: delete with the .rh-page-body rules they mirror */
.editor-styles-wrapper .is-root-container:not(:has(> .wp-block-template-part)) > .alignfull {
	margin-block: 0;
}
.editor-styles-wrapper .is-root-container:not(:has(> .wp-block-template-part)) > *:not(.alignfull) {
	margin-block: 2.5rem;
}
.editor-styles-wrapper .is-root-container:not(:has(> .wp-block-template-part)) > .wp-block-group.alignfull {
	padding-top: clamp(1.75rem, 3.2vw, 3rem);
	padding-bottom: clamp(1.75rem, 3.2vw, 3rem);
}
.editor-styles-wrapper .is-root-container:not(:has(> .wp-block-template-part)) > :is(p, h1, h2, h3, h4, ul, ol, .wp-block-quote, .is-style-placeholder),
.editor-styles-wrapper .is-root-container:not(:has(> .wp-block-template-part)) .wp-block-group.alignfull > :is(p, h2, h3, ul, ol, .wp-block-quote) {
	max-width: var(--wp--custom--measure);
	margin-inline-start: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-inline-end: auto !important;
}
.editor-styles-wrapper .is-root-container:not(:has(> .wp-block-template-part)) > .has-text-align-center,
.editor-styles-wrapper .is-root-container:not(:has(> .wp-block-template-part)) .wp-block-group.alignfull > .has-text-align-center {
	margin-inline: auto !important;
}
.editor-styles-wrapper .is-root-container:not(:has(> .wp-block-template-part)) .wp-block-group:not(.alignfull):not(.rh-quote) > :is(p, h2, h3):not(.has-text-align-center) {
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}
@supports selector(:has(*)) {
	.editor-styles-wrapper .is-root-container:not(:has(> .wp-block-template-part)) .wp-block-columns:not(.rh-offset) > .wp-block-column:has(> .rh-rule) {
		flex-basis: 28% !important;
	}
	.editor-styles-wrapper .is-root-container:not(:has(> .wp-block-template-part)) .wp-block-columns:not(.rh-offset) > .wp-block-column:has(> .rh-rule) + .wp-block-column {
		flex-basis: 72% !important;
	}
	@media (max-width: 781px) {
		.editor-styles-wrapper .is-root-container:not(:has(> .wp-block-template-part)) .wp-block-columns:not(.rh-offset) > .wp-block-column:has(> .rh-rule),
		.editor-styles-wrapper .is-root-container:not(:has(> .wp-block-template-part)) .wp-block-columns:not(.rh-offset) > .wp-block-column:has(> .rh-rule) + .wp-block-column {
			flex-basis: 100% !important;
		}
	}
}