/* =============================================================================
   HFSE Blocks — components
   Ported from the hfse-3.0 Tailwind theme. Each section maps to a pattern or a
   custom block so a designer can find the rule that owns a piece of the page.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Masthead
   -------------------------------------------------------------------------- */

/* The masthead scrolls away with the page, matching the live site.
   NOTE: --hfse-header-height is measured *from* this element by anchors.js, so
   it must never be used to size the masthead — that would be a feedback loop
   where each measurement inflates the next. Sizing uses its own static token. */
.hfse-header {
	background: var(--wp--preset--color--ink, #101918);
	position: relative;
	z-index: 90;
}

.hfse-header > .wp-block-group {
	min-height: var(--hfse-header-min);
}

/* Opt-in sticky masthead: add the class to the Header template part's group and
   anchors.js will start subtracting the real header height from anchor jumps. */
.hfse-header.is-sticky {
	position: sticky;
	top: 0;
}

.admin-bar .hfse-header.is-sticky {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* Branding — OPI-2866.
   The wordmark is an SVG with a viewBox but no width/height attributes. Firefox
   refuses to infer a height for such an image when only max-width is set, so the
   logo collapsed to 0×0 and the header looked empty. Locking an aspect-ratio and
   giving the image a real width in every axis makes it render identically in
   Firefox, Safari and Chromium. */
.hfse-branding {
	flex: 0 1 auto;
	min-width: 0;
}

.hfse-branding .wp-block-site-logo,
.hfse-branding .wp-block-site-logo .custom-logo-link {
	display: block;
	line-height: 0;
}

.hfse-branding .wp-block-site-logo img,
.hfse-branding__image,
.hfse-branding .custom-logo {
	aspect-ratio: 396 / 79;
	display: block;
	height: auto;
	max-width: 100%;
	width: clamp(140px, 22vw, 232px);
	object-fit: contain;
}

.hfse-branding .wp-block-site-title {
	margin: 0;
}

/* When a logo is actually rendered the site title stays for screen readers only.
   The :has() guard means the wordmark never disappears entirely on a site that
   has no Site Logo set — which is what OPI-2866 reported in Firefox. */
.hfse-branding--logo-only:has(.wp-block-site-logo img) .wp-block-site-title {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Fallback for engines without :has() — the title simply stays visible next to
   the logo rather than vanishing. */
@supports not selector(:has(*)) {
	.hfse-branding--logo-only .wp-block-site-title {
		font-size: 0.9rem;
	}
}

.hfse-header-social .wp-block-social-links {
	gap: 0.75rem;
}

.hfse-header-social .wp-social-link {
	transition: opacity 180ms ease, transform 180ms ease;
}

.hfse-header-social .wp-social-link:hover {
	opacity: 0.75;
	transform: translateY(-1px);
}

/* "Let's talk story!" pill */
.hfse-talk-story .wp-block-button__link,
.wp-block-button.hfse-talk-story .wp-block-button__link {
	background: var(--wp--preset--color--amber, #fcaf3f);
	border: 2px solid #fecaca;
	border-radius: 999px;
	color: #1e293b;
	font-family: var(--wp--preset--font-family--gotham);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0;
	padding: 0.7rem 1.6rem;
	text-transform: none;
	white-space: nowrap;
}

.hfse-talk-story .wp-block-button__link:hover,
.hfse-talk-story .wp-block-button__link:focus-visible {
	background: #fffbeb;
	border-color: #fde68a;
	color: #f59e0b;
}

@media (max-width: 600px) {
	.hfse-talk-story .wp-block-button__link {
		font-size: 0.85rem;
		padding: 0.55rem 1.1rem;
	}
}

/* Navigation dropdowns on the dark bar */
.hfse-header .wp-block-navigation {
	--navigation-layout-justification-setting: flex-end;
	color: #fff;
}

.hfse-header .wp-block-navigation .wp-block-navigation-item__content {
	color: #fff;
	font-weight: 700;
}

.hfse-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--amber);
}

.hfse-header .wp-block-navigation .wp-block-navigation__submenu-container {
	background: #fff;
	border: 0;
	border-radius: 0.5rem;
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
	overflow: hidden;
	padding: 0.35rem;
}

.hfse-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-radius: 0.25rem;
	color: #111827;
	padding: 0.5rem 0.85rem;
}

.hfse-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--amber);
	color: #111827;
}

.hfse-header .wp-block-navigation__responsive-container-open,
.hfse-header .wp-block-navigation__responsive-container-close {
	color: #fff;
}

.hfse-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--ink);
	color: #fff;
	padding-top: 4rem;
}

/* -----------------------------------------------------------------------------
   2. Hero
   -------------------------------------------------------------------------- */

.hfse-hero {
	overflow: visible;
	padding-block: clamp(1rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
	position: relative;
	z-index: 2;
}

.hfse-hero__layout {
	align-items: start;
	display: grid;
	gap: clamp(1.5rem, 4vw, 4rem);
	grid-template-columns: minmax(0, 1fr);
	margin-inline: auto;
	width: 100%;
}

@media (min-width: 900px) {
	.hfse-hero__layout {
		align-items: center;
		grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
	}
}

.hfse-hero__copy {
	color: var(--wp--preset--color--navy);
	min-width: 0;
	position: relative;
	z-index: 5;
}

.hfse-hero__media {
	margin-top: clamp(0.5rem, 2.5vw, 2.5rem);
	min-width: 0;
	position: relative;
	z-index: 2;
}

.hfse-hero__eyebrow {
	color: #65a30d;
	font-family: var(--wp--preset--font-family--uberhand);
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	font-weight: 900;
	letter-spacing: -0.01em;
	margin: 0 0 0.25rem;
}

/* Wordmark block --------------------------------------------------------- */

.hfse-wordmark {
	align-items: center;
	display: flex;
	flex-direction: row;
	gap: 0.75rem;
	margin: 0;
}

.hfse-wordmark__mark {
	flex-shrink: 0;
	height: auto;
	width: clamp(60px, 8vw, 100px);
}

.hfse-wordmark__text {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	font-family: var(--wp--preset--font-family--gotham);
	font-size: clamp(26px, 4.5vw, 52px);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 0.9;
	margin: 0;
}

.hfse-wordmark__line {
	display: flex;
	white-space: nowrap;
}

.hfse-wordmark__line--one {
	background: linear-gradient(90deg, #2aace2 0%, #00999f 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	padding-bottom: 0.18em;
}

.hfse-wordmark__line--two {
	align-items: baseline;
	margin-top: -0.11em;
}

.hfse-wordmark__amp {
	color: #8dc63f;
	font-family: var(--wp--preset--font-family--uberhand);
	font-size: 0.62em;
	font-weight: 600;
	padding-right: 0.35rem;
}

.hfse-wordmark__tail {
	background: linear-gradient(90deg, #fcaf3f 0%, #f37428 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	display: inline-flex;
}

/* Colour-band ("brush headline") block ----------------------------------- */

.hfse-color-band {
	aspect-ratio: 890 / 550;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	container-type: inline-size;
	margin-block: 0.5rem 0;
	max-width: 420px;
	position: relative;
	width: auto;
}

@media (min-width: 900px) {
	.hfse-color-band {
		margin-right: 3.25rem;
		max-width: none;
	}
}

.hfse-color-band__row {
	color: #fff;
	font-family: var(--wp--preset--font-family--gotham);
	left: 12%;
	line-height: 0.95;
	position: absolute;
	right: 6%;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(0, 0, 0, 0.1);
	white-space: nowrap;
}

.hfse-color-band__row--1 {
	font-family: var(--wp--preset--font-family--uberhand);
	font-size: clamp(10px, 7cqw, 36px);
	font-style: italic;
	font-weight: 800;
	left: 20%;
	top: 16%;
}

.hfse-color-band__row--2 {
	font-size: clamp(18px, 13cqw, 75px);
	font-weight: 900;
	left: 19%;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	top: 27%;
}

.hfse-color-band__row--3 {
	font-size: clamp(18px, 13cqw, 75px);
	font-weight: 900;
	left: 18%;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	top: 49%;
}

.hfse-color-band__row--4 {
	font-family: var(--wp--preset--font-family--gotham-xnarrow);
	font-size: clamp(12px, 6.6cqw, 34px);
	font-weight: 800;
	left: 18%;
	line-height: 1.35;
	right: 4%;
	top: 74%;
	white-space: normal;
}

.hfse-color-band__row .is-lime { color: #8dc63f; }
.hfse-color-band__row .is-orange { color: #f37428; }

/* Idle float — replaces the GSAP tween from the classic theme. */
.hfse-color-band--float {
	animation: hfse-band-float 7.4s ease-in-out infinite;
	transform-origin: center center;
	will-change: transform;
}

@keyframes hfse-band-float {
	0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
	28%  { transform: translate3d(3px, -7px, 0) rotate(0.45deg) scale(1.008); }
	57%  { transform: translate3d(5px, -3px, 0) rotate(0.6deg) scale(1.016); }
	81%  { transform: translate3d(1px, -8px, 0) rotate(0.2deg) scale(1.006); }
	100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.hfse-color-band--float { animation: none; }
}

/* Bleed the band to the viewport edges in the single-column hero. */
@media (max-width: 899px) {
	.hfse-color-band {
		margin-left: calc(-1 * var(--wp--style--root--padding-left, 1.25rem));
		width: calc(100% + var(--wp--style--root--padding-left, 1.25rem) + var(--wp--style--root--padding-right, 1.25rem));
	}
}

/* Hero supporting copy --------------------------------------------------- */

.hfse-hero__lede {
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--gotham-xnarrow);
	font-size: clamp(1.75rem, 5vw, 3.5rem);
	font-weight: 800;
	letter-spacing: 0.015em;
	line-height: 0.9;
	margin-block: 1rem 0;
	text-shadow: 0 4px 10px rgba(8, 35, 55, 0.14);
}

.hfse-hero__lede a {
	color: var(--wp--preset--color--hibiscus);
	text-decoration: none;
}

.hfse-hero__lede a:hover,
.hfse-hero__lede a:focus-visible {
	color: var(--wp--preset--color--navy);
}

.hfse-hero__venue {
	color: rgba(23, 37, 84, 0.9);
	font-size: clamp(0.85rem, 1.5vw, 1.1rem);
	font-weight: 700;
	line-height: 1.25;
	margin-block: 0.35rem 0;
}

.hfse-hero__body {
	color: rgba(23, 37, 84, 0.9);
	font-size: clamp(0.95rem, 1.35vw, 1rem);
	font-weight: 700;
	line-height: 1.4;
	margin-block: 1rem 0;
	max-width: 640px;
}

/* Hero CTA buttons ------------------------------------------------------- */

.hfse-cta-row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 0.75rem;
	margin-top: clamp(1rem, 2vw, 1.5rem);
	width: 100%;
}

.hfse-cta-row .wp-block-button {
	flex: 1 1 220px;
	max-width: 280px;
	min-width: 0;
}

.hfse-cta-row .wp-block-button__link {
	align-items: center;
	border: 0;
	border-radius: 0.5rem;
	box-shadow: 0 12px 22px rgba(8, 35, 55, 0.18);
	display: inline-flex;
	font-family: var(--wp--preset--font-family--gotham-narrow);
	/* >= 18.66px bold qualifies as WCAG "large text", where the 3:1 threshold
	   applies — which these two colours already clear (3.08 and 3.55). Below
	   that size they would be held to 4.5:1 and fail. */
	font-size: clamp(1.18rem, 1.5vw, 1.3rem);
	font-weight: 800;
	justify-content: center;
	letter-spacing: 0.02em;
	min-height: 2.9rem;
	padding: 0.55rem 1.25rem;
	text-align: center;
	text-transform: none;
	transition: background-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
	width: 100%;
}

.hfse-cta-row .wp-block-button__link:hover,
.hfse-cta-row .wp-block-button__link:focus-visible {
	box-shadow: 0 16px 28px rgba(8, 35, 55, 0.24);
	transform: translateY(-2px);
}

@media (max-width: 820px) {
	.hfse-cta-row {
		flex-direction: column;
	}

	.hfse-cta-row .wp-block-button {
		flex-basis: auto;
		max-width: none;
		width: 100%;
	}
}

/* "Powered by" lockup ---------------------------------------------------- */

.hfse-powered {
	align-items: center;
	display: flex;
	gap: 0.4rem;
	margin-top: 1.25rem;
}

.hfse-powered__label {
	color: #000;
	font-family: var(--wp--preset--font-family--gotham);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin: 0;
}

.hfse-powered img {
	height: auto;
	max-width: 139px;
	width: 100%;
}

@media (max-width: 999px) {
	.hfse-powered {
		justify-content: center;
	}

	.hfse-powered img {
		max-width: 90px;
	}
}

/* -----------------------------------------------------------------------------
   3. Photo slider block (hero carousel + thumbnail strip)
   -------------------------------------------------------------------------- */

.hfse-slider {
	position: relative;
	width: 100%;
}

.hfse-slider__frame {
	animation: hfse-frame-drift 6s ease-in-out infinite;
	aspect-ratio: 894 / 836;
	background: var(--hfse-frame-paper);
	border: clamp(7px, 0.9vw, 12px) solid var(--hfse-frame-paper);
	box-shadow: var(--hfse-frame-shadow);
	height: auto;
	margin: clamp(1rem, 2vw, 2rem) auto 0;
	overflow: hidden;
	position: relative;
	transform: translate3d(0, 0, 0) rotate(1.15deg) skewY(-0.45deg);
	transform-origin: center;
	width: min(100%, 760px);
}

.hfse-slider__frame::before {
	background:
		linear-gradient(180deg, rgba(8, 35, 55, 0.16), transparent 12% 84%, rgba(8, 35, 55, 0.14)),
		linear-gradient(90deg, rgba(8, 35, 55, 0.12), transparent 12% 88%, rgba(8, 35, 55, 0.12)),
		linear-gradient(92deg, #fff 0 1.35%, transparent 1.85% 98.05%, #fff 98.55% 100%),
		linear-gradient(178deg, #fff 0 1.65%, transparent 2.05% 97.4%, #fff 97.9% 100%),
		radial-gradient(circle at 7% 1.5%, #fff 0 5px, transparent 6px),
		radial-gradient(circle at 23% 0.5%, #fff 0 3px, transparent 4px),
		radial-gradient(circle at 61% 99%, #fff 0 4px, transparent 5px),
		radial-gradient(circle at 94% 74%, #fff 0 5px, transparent 6px),
		radial-gradient(circle at 1% 58%, #fff 0 4px, transparent 5px),
		radial-gradient(circle at 99% 18%, #fff 0 3px, transparent 4px);
	box-shadow:
		inset 0 0 0 1px rgba(8, 35, 55, 0.08),
		inset 0 5px 14px rgba(8, 35, 55, 0.22),
		inset 0 -5px 12px rgba(255, 255, 255, 0.68);
	content: "";
	inset: -1px;
	opacity: 0.96;
	pointer-events: none;
	position: absolute;
	z-index: 5;
}

.hfse-slider__frame::after {
	background: rgba(255, 255, 255, 0.72);
	content: "";
	filter: blur(0.25px);
	height: 16px;
	inset: auto 12% -10px 10%;
	pointer-events: none;
	position: absolute;
	transform: skewX(-10deg);
	z-index: 5;
}

.hfse-slider__viewport {
	height: 100%;
	position: relative;
	width: 100%;
}

.hfse-slider__slide {
	inset: 0;
	opacity: 0;
	position: absolute;
	transition: opacity 900ms ease;
	will-change: opacity;
}

.hfse-slider__slide.is-active {
	opacity: 1;
	z-index: 2;
}

/* No-JS / pre-hydration: show the first slide. */
.hfse-slider:not(.is-ready) .hfse-slider__slide:first-child {
	opacity: 1;
}

.hfse-slider__slide img {
	animation: hfse-image-breathe 9s ease-in-out infinite alternate;
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: center;
	width: 100%;
}

@media (max-width: 820px) {
	.hfse-slider__frame {
		margin-top: 1rem;
		max-height: 500px;
	}
}

@media (max-width: 480px) {
	.hfse-slider__frame {
		margin-top: 0.5rem;
		max-height: 380px;
	}
}

/* Thumbnail strip -------------------------------------------------------- */

.hfse-thumbs {
	animation: hfse-thumb-drift 8s ease-in-out infinite;
	background: var(--hfse-frame-paper);
	border: clamp(7px, 0.9vw, 12px) solid var(--hfse-frame-paper);
	box-shadow:
		0 20px 38px rgba(8, 35, 55, 0.26),
		0 8px 16px rgba(8, 35, 55, 0.16),
		inset 0 -10px 0 rgba(255, 255, 255, 0.72);
	box-sizing: border-box;
	margin: clamp(0.6rem, 1.25vw, 1.1rem) auto 0;
	max-width: 100%;
	overflow: visible;
	padding: clamp(0.25rem, 0.48vw, 0.42rem) clamp(0.32rem, 0.62vw, 0.52rem);
	position: relative;
	transform: translate3d(0, 0, 0) rotate(-0.55deg) skewY(0.18deg);
	transform-origin: center;
	width: min(100%, 820px);
}

.hfse-thumbs::before {
	background:
		linear-gradient(92deg, #fff 0 1.35%, transparent 1.85% 98.05%, #fff 98.55% 100%),
		linear-gradient(178deg, #fff 0 1.65%, transparent 2.05% 97.4%, #fff 97.9% 100%),
		radial-gradient(circle at 7% 1.5%, #fff 0 5px, transparent 6px),
		radial-gradient(circle at 23% 0.5%, #fff 0 3px, transparent 4px),
		radial-gradient(circle at 61% 99%, #fff 0 4px, transparent 5px),
		radial-gradient(circle at 94% 74%, #fff 0 5px, transparent 6px),
		radial-gradient(circle at 1% 58%, #fff 0 4px, transparent 5px),
		radial-gradient(circle at 99% 18%, #fff 0 3px, transparent 4px);
	content: "";
	inset: -1px;
	opacity: 0.96;
	pointer-events: none;
	position: absolute;
	z-index: 4;
}

.hfse-thumbs__track {
	align-items: center;
	box-sizing: border-box;
	cursor: grab;
	display: flex;
	gap: clamp(0.45rem, 0.85vw, 0.72rem);
	margin: 0 auto;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: visible;
	padding: 0.24rem clamp(0.72rem, 1.18vw, 0.95rem) 0.32rem;
	position: relative;
	scroll-padding-inline: clamp(0.72rem, 1.18vw, 0.95rem);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	user-select: none;
	width: 100%;
	z-index: 2;
}

.hfse-thumbs__track::-webkit-scrollbar { display: none; }

.hfse-thumbs__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
}

.hfse-thumbs__track.is-dragging .hfse-thumb { pointer-events: none; }

.hfse-thumb {
	aspect-ratio: 894 / 836;
	background: #fff;
	border: 5px solid #fff;
	box-shadow: 0 4px 8px rgba(8, 35, 55, 0.16);
	cursor: pointer;
	flex: 0 0 clamp(94px, 9vw, 118px);
	overflow: hidden;
	padding: 0;
	position: relative;
	scroll-snap-align: center;
	transform: rotate(-1.5deg);
	transition: box-shadow 180ms ease, transform 180ms ease;
}

.hfse-thumb:nth-child(even) { transform: rotate(1.35deg); }
.hfse-thumb:nth-child(3n)   { transform: rotate(-0.7deg); }

.hfse-thumb::before {
	background:
		linear-gradient(180deg, rgba(8, 35, 55, 0.16), transparent 16% 82%, rgba(8, 35, 55, 0.16)),
		linear-gradient(90deg, rgba(8, 35, 55, 0.12), transparent 15% 85%, rgba(8, 35, 55, 0.12)),
		radial-gradient(circle at 12% 3%, rgba(255, 255, 255, 0.92) 0 3px, transparent 4px),
		radial-gradient(circle at 88% 96%, rgba(255, 255, 255, 0.86) 0 3px, transparent 4px),
		radial-gradient(circle at 1% 72%, rgba(255, 255, 255, 0.82) 0 2px, transparent 3px),
		radial-gradient(circle at 99% 28%, rgba(255, 255, 255, 0.86) 0 2px, transparent 3px);
	border: 2px solid rgba(255, 255, 255, 0.85);
	box-shadow:
		inset 0 0 0 1px rgba(8, 35, 55, 0.08),
		inset 0 3px 8px rgba(8, 35, 55, 0.2),
		inset 0 -3px 7px rgba(255, 255, 255, 0.65);
	clip-path: polygon(0 5%, 100% 0, 98% 100%, 3% 96%);
	content: "";
	inset: -1px;
	pointer-events: none;
	position: absolute;
	z-index: 2;
}

.hfse-thumb img {
	animation: hfse-image-breathe 9s ease-in-out infinite alternate;
	display: block;
	height: 100%;
	object-fit: cover;
	transform: scale(1.2);
	width: 100%;
}

.hfse-thumb:hover,
.hfse-thumb:focus-visible,
.hfse-thumb.is-active {
	box-shadow: 0 7px 12px rgba(8, 35, 55, 0.2);
	outline: none;
	transform: translateY(-3px) rotate(0deg);
	z-index: 3;
}

.hfse-thumbs__arrow {
	align-items: center;
	appearance: none;
	background: #fff;
	border: 0;
	border-radius: 999px;
	box-shadow: 0 8px 18px rgba(8, 35, 55, 0.24);
	color: #176b7a;
	cursor: pointer;
	display: flex;
	height: clamp(2.25rem, 4vw, 2.8rem);
	justify-content: center;
	padding: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: background-color 180ms ease, color 180ms ease, opacity 180ms ease, transform 180ms ease;
	width: clamp(2.25rem, 4vw, 2.8rem);
	z-index: 6;
}

.hfse-thumbs__arrow:hover,
.hfse-thumbs__arrow:focus-visible {
	background: var(--wp--preset--color--orange);
	color: #fff;
	outline: none;
	transform: translateY(-50%) scale(1.06);
}

.hfse-thumbs__arrow[disabled] {
	cursor: default;
	opacity: 0.42;
	transform: translateY(-50%) scale(0.96);
}

.hfse-thumbs__arrow svg {
	display: block;
	fill: none;
	height: 58%;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 3;
	width: 58%;
}

.hfse-thumbs__arrow--prev { left: clamp(-0.75rem, -1vw, -0.35rem); }
.hfse-thumbs__arrow--next { right: clamp(-0.75rem, -1vw, -0.35rem); }

@media (max-width: 820px) {
	.hfse-thumbs__track {
		padding: 1rem 0.75rem 1.25rem;
		scroll-padding-inline: 0.75rem;
	}

	.hfse-thumb {
		flex: 0 0 clamp(112px, 30vw, 150px);
		margin-block: 0.25rem;
	}
}

@keyframes hfse-frame-drift {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(1.1deg) skewY(-0.45deg); }
	45%      { transform: translate3d(1px, -9px, 0) rotate(1.3deg) skewY(-0.38deg); }
}

@keyframes hfse-thumb-drift {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.55deg) skewY(0.18deg); }
	52%      { transform: translate3d(0, -3px, 0) rotate(-0.46deg) skewY(0.15deg); }
}

@keyframes hfse-image-breathe {
	from { transform: scale(1.015) translate3d(-0.3%, 0, 0); }
	to   { transform: scale(1.035) translate3d(0.3%, -0.2%, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.hfse-slider__frame,
	.hfse-thumbs,
	.hfse-thumb img,
	.hfse-slider__slide img {
		animation: none;
	}

	.hfse-slider__slide { transition: none; }
}

/* -----------------------------------------------------------------------------
   4. Sponsors band
   -------------------------------------------------------------------------- */

.hfse-sponsors {
	border-top: 2px solid rgba(3, 105, 161, 0.7);
}

.hfse-sponsors__logos {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(2rem, 5vw, 3rem);
	justify-content: center;
	margin-inline: auto;
	max-width: 36rem;
	padding-block: 1.5rem;
}

.hfse-sponsors__logos img {
	height: auto;
	width: auto;
}

.hfse-sponsors__logos .hfse-logo--uh { max-width: clamp(80px, 10vw, 120px); }
.hfse-sponsors__logos .hfse-logo--warriors { max-width: clamp(120px, 14vw, 170px); }

/* -----------------------------------------------------------------------------
   5. UH Athletics spotlight (dark showcase banner)
   -------------------------------------------------------------------------- */

.hfse-showcase {
	background-color: #101828;
	border-bottom: 2px solid var(--wp--preset--color--lime);
	border-top: 2px solid #0369a1;
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.hfse-showcase::before {
	background: rgba(0, 0, 0, 0.25);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

.hfse-showcase::after {
	background-image: url("../media/hfse-bg-pattern-gray.png");
	background-position: center;
	background-size: cover;
	content: "";
	filter: invert(1);
	inset: 0;
	opacity: 0.15;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.hfse-showcase > .wp-block-group,
.hfse-showcase__inner {
	position: relative;
	z-index: 1;
}

.hfse-showcase :where(h1, h2, h3, h4, h5, h6, p, li) {
	color: #fff;
}

.hfse-showcase__title {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	justify-content: center;
	margin: 0 0 1rem;
	text-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.hfse-showcase__title img {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 999px;
	flex-shrink: 0;
	height: 8rem;
	object-fit: contain;
	padding: 0.25em;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
	width: 8rem;
}

@media (min-width: 782px) {
	.hfse-showcase__title {
		flex-direction: row;
		gap: 1.25rem;
		justify-content: flex-start;
	}

	.hfse-showcase__title img {
		height: 1.95em;
		width: 1.95em;
	}
}

.hfse-showcase__lede {
	font-size: clamp(1rem, 2.2vw, 1.75rem);
	font-weight: 600;
	line-height: 1.4;
	margin-block: 0.5rem 0;
	text-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.hfse-showcase__figure {
	margin: 0;
	width: 100%;
}

.hfse-showcase__figure img {
	aspect-ratio: 4 / 3;
	border: 4px solid #fff;
	border-radius: 0.75rem;
	box-shadow: 0 24px 44px rgba(0, 0, 0, 0.4);
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* Icon strip ------------------------------------------------------------- */

.hfse-icon-strip {
	display: block;
	margin-block: 1.5rem 0;
	max-width: 42rem;
	padding-block: clamp(0.75rem, 1.2vw, 1rem) clamp(0.75rem, 2.2vw, 1.75rem);
	padding-inline: clamp(0.5rem, 1.2vw, 1rem);
}

.hfse-icon-strip__list {
	display: grid;
	gap: 1.25rem 0;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

@media (min-width: 1024px) {
	.hfse-icon-strip__list {
		gap: 0;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		max-width: 480px;
	}

	.hfse-icon-strip__list > * + * {
		border-left: 1px dotted rgba(255, 255, 255, 0.28);
	}
}

.hfse-icon-strip__item {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	margin: 0;
	min-width: 0;
	padding-inline: 0.35rem;
	text-align: center;
}

.wp-block-group.hfse-icon-strip__badge,
.hfse-icon-strip__badge {
	aspect-ratio: 1;
	block-size: clamp(40px, 5.5vw, 52px);
	border-radius: 999px;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.24);
	color: #fff;
	display: grid;
	flex: none;
	inline-size: clamp(40px, 5.5vw, 52px);
	margin-inline: auto;
	max-inline-size: none;
	padding: 0;
	place-items: center;
}

/* The icon is a core Image block, so reach past the <figure> wrapper. */
.hfse-icon-strip__badge .wp-block-image,
.hfse-icon-strip__badge figure {
	display: grid;
	height: 100%;
	margin: 0;
	place-items: center;
	width: 100%;
}

.hfse-icon-strip__badge img {
	display: block;
	filter: invert(1);
	height: auto;
	max-width: 100%;
	object-fit: contain;
	padding: 0.35rem;
	width: 100%;
}

.hfse-icon-strip__label {
	color: #fff;
	font-family: var(--wp--preset--font-family--gotham);
	font-size: clamp(9px, 1vw, 12px);
	font-weight: 800;
	hyphens: none;
	letter-spacing: 0.05em;
	margin: 0.5rem 0 0;
	white-space: nowrap;
}

@media (max-width: 640px) {
	.hfse-icon-strip__list {
		display: flex;
		flex-wrap: nowrap;
		gap: 0;
	}

	.hfse-icon-strip__item {
		flex: 1 1 0;
		padding-inline: 0.2rem;
	}

	.hfse-icon-strip__badge {
		height: clamp(34px, 11vw, 52px);
		width: clamp(34px, 11vw, 52px);
	}

	.hfse-icon-strip__label {
		font-size: clamp(8px, 2.45vw, 11px);
		line-height: 1.05;
		word-break: normal;
	}
}

/* -----------------------------------------------------------------------------
   6. Expo experiences cards
   -------------------------------------------------------------------------- */

.hfse-experiences__grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 782px) {
	.hfse-experiences__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.hfse-card {
	border: 8px solid #fff;
	box-shadow: var(--hfse-card-shadow);
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.25rem;
	text-decoration: none !important;
	transition: transform 300ms ease, box-shadow 300ms ease;
}

.hfse-card:hover,
.hfse-card:focus-visible {
	box-shadow: var(--hfse-card-shadow-hover);
	transform: translateY(-4px);
}

.hfse-card:focus-visible {
	outline: 4px solid var(--wp--preset--color--amber);
	outline-offset: 4px;
}

.hfse-card__kicker {
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--gotham);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	margin: 0;
	text-transform: uppercase;
}

.hfse-card__title {
	font-size: clamp(2rem, 4vw, 3.2rem);
	font-weight: 800;
	line-height: 1;
	margin: 0.5rem 0 0;
}

.hfse-card__text {
	font-size: clamp(1.05rem, 1.6vw, 1.15rem);
	font-weight: 700;
	line-height: 1.35;
	margin: 0.75rem 0 0;
}

.hfse-card__more {
	display: inline-flex;
	font-family: var(--wp--preset--font-family--gotham);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	margin-top: auto;
	padding-top: 1.25rem;
	text-decoration: underline;
	text-transform: uppercase;
	text-underline-offset: 4px;
}

/* Colour variants — mirror the four brand cards on the live site. */
.hfse-card--sky    { background: var(--wp--preset--color--sky); }
.hfse-card--lime   { background: var(--wp--preset--color--lime); }
.hfse-card--amber  { background: var(--wp--preset--color--amber); }
.hfse-card--orange { background: var(--wp--preset--color--orange); }

/* ---------------------------------------------------------------------------
   Card text colour — accessibility switch.

   White on Expo Sky measures 2.59:1 and on Expo Orange 2.86:1, both below the
   WCAG AA minimum (4.5:1 normal text, 3:1 large). Navy on the same backgrounds
   measures 5.67:1 and 5.14:1 — comfortably AA — without altering a single brand
   colour, and it matches how the Lime and Amber cards already read.

   The default below keeps the live site's white text. To switch the Sky and
   Orange cards to navy and clear AA, change this one value to:
       --hfse-card-ink: var(--wp--preset--color--navy);
       --hfse-card-ink-muted: var(--wp--preset--color--navy);

   Use solid navy for the muted value too — at 85% alpha it computes to 4.41:1,
   a hair under the 4.5:1 minimum.
   ------------------------------------------------------------------------ */
.hfse-card--sky,
.hfse-card--orange {
	--hfse-card-ink: #fff;
	--hfse-card-ink-muted: rgba(255, 255, 255, 0.9);
}

.hfse-card--sky :where(.hfse-card__title, .hfse-card__text, .hfse-card__more),
.hfse-card--orange :where(.hfse-card__title, .hfse-card__text, .hfse-card__more) {
	color: var(--hfse-card-ink);
}

.hfse-card--sky .hfse-card__text,
.hfse-card--orange .hfse-card__text {
	color: var(--hfse-card-ink-muted);
}

.hfse-card--lime :where(.hfse-card__title, .hfse-card__more),
.hfse-card--amber :where(.hfse-card__title, .hfse-card__more) {
	color: var(--wp--preset--color--navy);
}

.hfse-card--lime .hfse-card__text,
.hfse-card--amber .hfse-card__text {
	color: rgba(23, 37, 84, 0.85);
}

/* -----------------------------------------------------------------------------
   7. Exhibitor CTA
   -------------------------------------------------------------------------- */

.hfse-exhibitor-cta {
	background: var(--wp--preset--color--lime);
	box-shadow: 0 18px 34px rgba(8, 35, 55, 0.18);
	text-align: center;
}

.hfse-exhibitor-cta .wp-block-button__link {
	background: var(--wp--preset--color--bubblegum);
	color: #fff;
}

.hfse-exhibitor-cta .wp-block-button__link:hover,
.hfse-exhibitor-cta .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--coral);
}

/* -----------------------------------------------------------------------------
   8. Contact + newsletter
   -------------------------------------------------------------------------- */

.hfse-pattern-rule {
	display: block;
	height: auto;
	margin-inline: auto;
	max-width: 64rem;
	width: 100%;
}

.hfse-contact {
	background: var(--wp--preset--color--coral);
	border: 4px solid #fff;
	box-shadow: 0 2px 10px -3px rgba(6, 81, 237, 0.3);
	margin-inline: auto;
	max-width: 64rem;
}

.hfse-contact__grid {
	align-items: flex-start;
	display: grid;
	gap: 2rem;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 600px) {
	.hfse-contact__grid {
		gap: 3rem;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.hfse-contact__title {
	color: #0f172a;
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	font-weight: 900;
	line-height: 1;
	margin: 0 0 0.75rem;
}

.hfse-contact :where(p, h3, li, a) {
	color: #0f172a;
}

.hfse-contact__label {
	font-size: 1rem;
	font-weight: 900;
	letter-spacing: 0.15rem;
	margin: 1rem 0 0.35rem;
}

.hfse-contact__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hfse-contact__list li {
	align-items: center;
	display: flex;
	gap: 1.25rem;
}

.hfse-icon-bubble {
	align-items: center;
	background: rgba(230, 230, 230, 0.81);
	border-radius: 999px;
	display: flex;
	flex-shrink: 0;
	height: 2.5rem;
	justify-content: center;
	width: 2.5rem;
}

.hfse-icon-bubble svg {
	fill: #007bff;
	height: 20px;
	width: 20px;
}

/* Core renders the icon as an Image block, so the bubble is applied to the
   <figure> wrapper rather than to a bare <svg>. */
.hfse-contact__email-row {
	align-items: center;
}

.hfse-contact__email-row .hfse-icon-bubble-img,
.hfse-contact__email-row figure.hfse-icon-bubble-img {
	align-items: center;
	background: rgba(230, 230, 230, 0.81);
	border-radius: 999px;
	display: flex;
	flex: 0 0 auto;
	height: 2.5rem;
	justify-content: center;
	margin: 0;
	width: 2.5rem;
}

.hfse-contact__email-row .hfse-icon-bubble-img img {
	display: block;
	height: 20px;
	width: 20px;
}

.hfse-contact__email {
	font-size: clamp(0.85rem, 2vw, 1.15rem);
	line-height: 1.35;
	margin: 0;
	text-decoration: none;
}

.hfse-contact__email a {
	text-decoration: none;
}

.hfse-contact__email a:hover {
	text-decoration: underline;
}

.hfse-contact__email small {
	display: block;
	font-size: 0.8rem;
}

.hfse-contact__socials {
	display: flex;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hfse-contact__socials a {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
	transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
	width: 100%;
}

.hfse-contact__socials a:hover {
	transform: scale(1.25);
}

.hfse-newsletter {
	background: var(--wp--preset--color--seafoam);
	border: 4px solid #fff;
	border-top: 0;
	margin-inline: auto;
	max-width: 64rem;
	text-align: center;
}

.hfse-newsletter__title {
	color: #0f172a;
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	font-weight: 900;
	letter-spacing: 0.05rem;
	line-height: 1;
	margin: 1.25rem 0 0.75rem;
}

.hfse-newsletter p {
	color: #0f172a;
	font-weight: 700;
}

/* -----------------------------------------------------------------------------
   9. Form blocks
   -------------------------------------------------------------------------- */

.hfse-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
}

.hfse-form__field {
	display: block;
	width: 100%;
}

/* Block themes do not ship a global border-box reset, so a 100%-wide field with
   padding and a 3px border overflows its column. Scope the reset to the theme's
   own components rather than resetting every element on the page. */
.hfse-form *,
.hfse-form *::before,
.hfse-form *::after {
	box-sizing: border-box;
}

.hfse-form input[type="text"],
.hfse-form input[type="email"],
.hfse-form textarea {
	background: #fff;
	border: 3px solid #000;
	border-radius: 0;
	color: #1f2937;
	font-family: inherit;
	font-size: 0.875rem;
	outline: none;
	padding: 0.625rem 1rem;
	width: 100%;
}

.hfse-form input:focus,
.hfse-form textarea:focus {
	border-color: #0f172a;
	box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.15);
}

.hfse-form textarea {
	min-height: 9rem;
	resize: vertical;
}

/* Honeypot — visually hidden, never announced. */
.hfse-form__hp {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.hfse-form__button {
	background: var(--wp--preset--color--mint);
	border: 3px solid #000;
	border-bottom-width: 6px;
	border-radius: 0.5rem;
	/* Navy rather than white: white on mint measured 1.7:1, and the decorative
	   text-shadow the classic theme used made it worse, not better. Navy on
	   mint clears AA comfortably while keeping the button's colour. */
	color: var(--wp--preset--color--navy);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--gotham-narrow);
	font-size: 1.5rem;
	font-weight: 800;
	padding: 0.625rem 1rem;
	transition: background-color 200ms ease, transform 200ms ease, border-width 100ms ease;
	width: 100%;
}

.hfse-form__button:hover:not([disabled]) {
	background: #7c3aed;
	transform: scale(1.03);
}

.hfse-form__button:active:not([disabled]) {
	border-bottom-width: 3px;
	transform: scale(0.98) translateY(3px);
}

.hfse-form__button[disabled] {
	cursor: progress;
	opacity: 0.7;
}

.hfse-form__message {
	font-weight: 700;
	margin: 0;
	text-align: center;
}

.hfse-form__message--error { color: #7f1d1d; }
.hfse-form__message--success { color: #052e16; }

/* Newsletter variant */
.hfse-form--newsletter {
	align-items: center;
	margin-inline: auto;
	padding-inline: clamp(0.5rem, 3vw, 2rem);
	padding-bottom: 1.25rem;
}

.hfse-form--newsletter input[type="email"] {
	background: var(--wp--preset--color--bubblegum);
	border: 4px solid #000;
	border-radius: 0.375rem;
	color: #374151;
	padding: 0.75rem 1.25rem;
	text-align: center;
	width: 75%;
}

.hfse-form--newsletter input[type="email"]::placeholder {
	color: rgba(55, 65, 81, 0.7);
}

.hfse-form--newsletter .hfse-form__button {
	background: var(--wp--preset--color--periwinkle);
	width: 50%;
}

@media (max-width: 600px) {
	.hfse-form--newsletter input[type="email"],
	.hfse-form--newsletter .hfse-form__button {
		width: 100%;
	}
}

/* reCAPTCHA badge — hidden when the theme prints its own attribution line. */
.hfse-has-recaptcha-notice .grecaptcha-badge {
	visibility: hidden;
}

/* -----------------------------------------------------------------------------
   10. Powered-by outro + footer
   -------------------------------------------------------------------------- */

.hfse-outro {
	text-align: center;
}

.hfse-outro__bolt {
	animation: hfse-bolt 4s ease-in-out infinite;
	height: auto;
	margin-inline: auto;
	width: 2rem;
}

@keyframes hfse-bolt {
	0%, 88%, 100% { transform: rotateY(0deg); }
	94%           { transform: rotateY(180deg); }
}

.hfse-outro__label {
	color: #374151;
	font-family: var(--wp--preset--font-family--gotham);
	font-size: 1rem;
	font-weight: 700;
	margin: 0.5rem 0 0.25rem;
}

.hfse-outro__logo {
	height: auto;
	margin-inline: auto;
	max-width: 12.5rem;
	width: 100%;
}

.hfse-outro__body {
	color: #4b5563;
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	font-weight: 600;
	line-height: 1.7;
	margin-inline: auto;
	max-width: 72rem;
	padding-block: 2.5rem 1.25rem;
	text-wrap: pretty;
}

.hfse-footer {
	border-top: 1px solid #6b7280;
	margin-inline: auto;
	max-width: 80rem;
	padding-block: 2rem;
}

.hfse-footer :where(p, a) {
	color: var(--wp--preset--color--navy);
	font-weight: 700;
}

.hfse-footer .wp-block-social-links .wp-social-link {
	transition: opacity 180ms ease;
}

.hfse-footer .wp-block-social-links .wp-social-link:hover {
	opacity: 0.75;
}

.hfse-legal {
	color: #000;
	font-size: 0.75rem;
	margin: 0;
	padding-top: 1.25rem;
}

.hfse-legal a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
	.hfse-outro__bolt { animation: none; }
}

/* -----------------------------------------------------------------------------
   11. Expo list sub-pages (Vendors / Food / Activities / Music)
   -------------------------------------------------------------------------- */

.hfse-list-page {
	border: 10px solid #fff;
	box-shadow: 0 20px 38px rgba(8, 35, 55, 0.22);
	margin-inline: auto;
	max-width: 72rem;
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

.hfse-list-page--sky    { background: var(--wp--preset--color--sky); }
.hfse-list-page--lime   { background: var(--wp--preset--color--lime); }
.hfse-list-page--amber  { background: var(--wp--preset--color--amber); }
.hfse-list-page--orange { background: var(--wp--preset--color--orange); }

/* Same accessibility switch as the expo cards — see "Card text colour" above.
   Flip these two values to navy to clear WCAG AA on the Sky and Orange panels
   without touching a brand colour. */
.hfse-list-page--sky,
.hfse-list-page--orange {
	--hfse-panel-ink: #fff;
}

.hfse-list-page--sky :where(h1, h2, h3, p),
.hfse-list-page--orange :where(h1, h2, h3, p) {
	color: var(--hfse-panel-ink);
}

.hfse-list-page__back {
	font-family: var(--wp--preset--font-family--gotham);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-underline-offset: 4px;
}

/* The default deep-teal link colour only reached 3.3:1 on the amber and lime
   panels. Inherit the panel's own text colour instead — navy on the light
   panels, white on the dark ones — which clears AA on all four. */
.hfse-list-page__back a {
	color: inherit;
	text-decoration: underline;
}

.hfse-list-page--amber .hfse-list-page__back,
.hfse-list-page--lime .hfse-list-page__back {
	color: var(--wp--preset--color--navy);
}

.hfse-list-page--sky .hfse-list-page__back,
.hfse-list-page--orange .hfse-list-page__back {
	color: var(--hfse-panel-ink);
}

.hfse-placeholder-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: minmax(0, 1fr);
	margin-top: 2rem;
}

@media (min-width: 600px) {
	.hfse-placeholder-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.hfse-placeholder-grid > * {
	background: rgba(255, 255, 255, 0.9);
	color: var(--wp--preset--color--navy);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
	padding: 1.25rem;
}

/* -----------------------------------------------------------------------------
   12. Editorial defaults for post/page content
   -------------------------------------------------------------------------- */

.hfse-prose :where(p, ul, ol) {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.65;
}

.hfse-prose :where(ul, ol) {
	padding-left: 1.5rem;
}

.hfse-prose li { margin-block: 0.35rem; }

.hfse-skip-link:focus {
	background: #fff;
	color: var(--wp--preset--color--navy);
	display: block;
	font-weight: 700;
	left: 1rem;
	padding: 0.75rem 1.25rem;
	position: fixed;
	top: 1rem;
	z-index: 999;
}

/* Whole-card click target, added by assets/js/cards.js. */
.hfse-card.is-clickable {
	cursor: pointer;
}

.hfse-card .hfse-card__more a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.hfse-card:hover .hfse-card__more a {
	text-decoration-thickness: 2px;
}

/* -----------------------------------------------------------------------------
   13. Masthead — small screens
   The social icons, wordmark and CTA have to share one row down to 320px. Core's
   social-links block wraps by default, which stacked the two icons vertically
   and doubled the header height, so the row is pinned to nowrap here.
   -------------------------------------------------------------------------- */

@media (max-width: 781px) {
	.hfse-header .wp-block-social-links {
		flex-wrap: nowrap;
		gap: 0.5rem;
	}

	.hfse-header-social {
		flex: 0 0 auto;
	}

	.hfse-branding .wp-block-site-logo img,
	.hfse-branding__image,
	.hfse-branding .custom-logo {
		width: clamp(112px, 34vw, 160px);
	}
}

@media (max-width: 480px) {
	.hfse-header .wp-block-social-links .wp-social-link {
		padding: 0.1rem;
	}

	.hfse-header .wp-social-link svg {
		height: 1.25rem;
		width: 1.25rem;
	}

	.hfse-talk-story .wp-block-button__link {
		font-size: 0.78rem;
		padding: 0.5rem 0.85rem;
	}

	.hfse-branding .wp-block-site-logo img,
	.hfse-branding__image,
	.hfse-branding .custom-logo {
		width: clamp(96px, 30vw, 130px);
	}
}

/* Slider pause control — WCAG 2.2.2 (Pause, Stop, Hide).
   Sits inside the frame so it travels with the slider at every breakpoint. */
.hfse-slider__toggle {
	align-items: center;
	appearance: none;
	background: rgba(255, 255, 255, 0.92);
	border: 0;
	border-radius: 999px;
	box-shadow: 0 4px 12px rgba(8, 35, 55, 0.28);
	color: #176b7a;
	cursor: pointer;
	display: flex;
	height: 2.25rem;
	justify-content: center;
	padding: 0;
	position: absolute;
	right: 0.6rem;
	top: 0.6rem;
	transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
	width: 2.25rem;
	z-index: 6;
}

.hfse-slider__toggle:hover,
.hfse-slider__toggle:focus-visible {
	background: var(--wp--preset--color--orange);
	color: #fff;
	transform: scale(1.06);
}

.hfse-slider__toggle:focus-visible {
	outline: 3px solid var(--wp--preset--color--navy);
	outline-offset: 2px;
}

.hfse-slider__toggle svg {
	display: block;
	fill: currentColor;
	height: 46%;
	width: 46%;
}

/* Swap the glyph with the paused state. */
.hfse-slider__toggle .hfse-slider__icon-play,
.hfse-slider.is-paused .hfse-slider__toggle .hfse-slider__icon-pause {
	display: none;
}

.hfse-slider.is-paused .hfse-slider__toggle .hfse-slider__icon-play {
	display: block;
}

/* The thumbnail rail scrolls, so Firefox puts it in the tab order. Make that
   focus state visible rather than silent. */
.hfse-thumbs__track:focus-visible {
	outline: 3px solid var(--wp--preset--color--deep-teal);
	outline-offset: 2px;
}