html {
	overflow-x: hidden;
}

/* dvh, not vh: on phones 100vh is taller than the visible area while the
   browser toolbar shows, which would push the footer off-screen. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

.wp-site-blocks > main {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

/* flex/flex:1 at both this level and on .alignfull:last-child below: without
   both, a short page shows a grey strip of the default background above the
   footer instead of the last full-bleed section's background reaching it. */
.wp-block-post-content {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.wp-block-post-content > .alignfull:last-child {
	flex: 1;
}

.wp-block-post-content > .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.wp-block-post-content > .alignfull.has-epic-dark-background-color > .wp-block-group > .wp-block-heading:first-child {
	margin-top: 0;
}

/* hyphenate-limit-chars: 10 4 4 — long Dutch compounds ("Voorjaarsconcertweekend")
   would otherwise overflow a phone-width column, but the 10-char minimum stops
   the browser hyphenating ordinary short words just to fill a line. */
h1, h2, h3, h4 {
	overflow-wrap: break-word;
	hyphens: auto;
	hyphenate-limit-chars: 10 4 4;
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* `p.` prefix is required to outrank core's constrained-layout max-width;
   `.has-lead-font-size` alone loses that specificity fight. */
p.has-lead-font-size {
	line-height: 1.5;
	max-width: 32em;
}

.epic-voice-group-name {
	font-size: var(--wp--preset--font-size--heading-4);
	text-transform: none;
	line-height: 1.3;
}

/* display: contents removes WordPress's .wp-block-template-part wrapper from
   the box model. Without it, that wrapper is sized to exactly the header's
   height, and a sticky child can only travel within its parent's box — so
   .epic-header would "stick" for 0px of scroll and then scroll away. */
.wp-block-template-part:has(> .epic-header) {
	display: contents;
}

.epic-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #ffffff;
	border-bottom: 1px solid #e8e6e4;
	padding: 10px clamp(16px, 4vw, 32px);
}

.epic-marquee {
	overflow: hidden;
	white-space: nowrap;
	padding: 14px 0;
}

.epic-marquee__track {
	display: inline-block;
	animation: epic-marquee 22s linear infinite;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

@keyframes epic-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

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

.epic-video-placeholder {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	border: 1px solid #e8e6e4;
	background: repeating-linear-gradient(45deg, #f1efed, #f1efed 14px, #e9e7e5 14px, #e9e7e5 28px);
}

.epic-hero-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid #e8e6e4;
}

.epic-hero-logo img {
	display: block;
	height: clamp(110px, 11vw, 170px);
	width: auto;
	aspect-ratio: 1;
	margin-inline: auto;
}

/* max-width: 960px (wider than the usual 880px content column) keeps
 * "Singing is better together" on one line at 1440px instead of wrapping. */
.epic-hero-logo + h1 {
	margin-top: clamp(16px, 2vw, 24px);
	max-width: 960px;
}

/* This margin collapses with the lead paragraph's own margin, so it's the
 * whole gap above the buttons — kept small enough that the buttons and a
 * strip of the hero photo still stay above the fold on a 1366x768 laptop. */
.epic-hero-logo ~ .wp-block-buttons {
	margin-top: clamp(32px, 3vw, 40px);
}

.wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.wpcf7-form p {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

/* Contact Form 7 puts a <br> between each label and its field; as a flex item
   it becomes an empty full-height line pushing the label away from the input. */
.wpcf7-form p > br {
	display: none;
}

.wpcf7-form label {
	font-family: var(--wp--preset--font-family--nav);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 1rem;
	line-height: 1.3;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--epic-grey);
}

.wpcf7-form .wpcf7-acceptance label {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	text-transform: none;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--wp--preset--color--epic-dark);
}

.epic-form-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
	gap: 18px;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
	border: 1px solid #c9c7c5;
	border-radius: 4px;
	padding: 12px 14px;
	/* Never below 16px: iOS Safari zooms the page in when a smaller field gets focus. */
	font-size: var(--wp--preset--font-size--body);
	font-family: var(--wp--preset--font-family--body);
	background: #ffffff;
	width: 100%;
	box-sizing: border-box;
}

.wpcf7-form textarea {
	resize: vertical;
}

/* By class, not input[type="submit"]: the partner form's submit renders as a
   <button> (needed to show the partner icon), which that selector would miss. */
.wpcf7-form .wpcf7-submit {
	background: var(--wp--preset--color--epic-red);
	color: #ffffff;
	border: none;
	padding: 15px;
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--nav);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 20px;
	letter-spacing: 0.05em;
	cursor: pointer;
}

.wpcf7-form .wpcf7-submit:hover {
	background: #b52320;
}

.epic-partner-form input[type="text"],
.epic-partner-form input[type="email"],
.epic-partner-form input[type="tel"],
.epic-partner-form textarea {
	border-color: #d8d6d4;
	background: var(--wp--preset--color--epic-off-white);
}

/* inset box-shadow thickens the border to 2px without the layout shift an
   actual wider border would cause. */
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--epic-red);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--epic-red);
	background: #ffffff;
}

.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form select.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid {
	border-color: var(--wp--preset--color--epic-red);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--epic-red);
	background: #fdf4f3;
}

.wpcf7-form .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: var(--wp--preset--font-size--small-print);
	font-weight: 700;
	color: var(--wp--preset--color--epic-red);
}

.wpcf7 .wpcf7-form.invalid .wpcf7-response-output,
.wpcf7 .wpcf7-form.unaccepted .wpcf7-response-output {
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--wp--preset--color--epic-red);
	border-radius: 4px;
	background: #fdf4f3;
	color: var(--wp--preset--color--epic-dark);
}

.epic-required {
	color: var(--wp--preset--color--epic-red);
}

.wpcf7-form .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.wpcf7-form .wpcf7-radio .wpcf7-list-item {
	margin: 0;
}

.wpcf7-form .wpcf7-radio label {
	position: relative;
	display: block;
	cursor: pointer;
}

.wpcf7-form .wpcf7-radio input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.wpcf7-form .wpcf7-radio .wpcf7-list-item-label {
	display: block;
	padding: 10px 16px;
	border: 1.5px solid #d8d6d4;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--nav);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--label);
	line-height: 1.3;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--epic-grey);
}

.wpcf7-form .wpcf7-radio label:hover .wpcf7-list-item-label,
.wpcf7-form .wpcf7-radio.wpcf7-not-valid .wpcf7-list-item-label {
	border-color: var(--wp--preset--color--epic-red);
}

.wpcf7-form .wpcf7-radio input:checked + .wpcf7-list-item-label {
	border-color: var(--wp--preset--color--epic-red);
	background: var(--wp--preset--color--epic-red);
	color: #ffffff;
}

.wpcf7-form .wpcf7-radio input:focus-visible + .wpcf7-list-item-label {
	outline: 2px solid var(--wp--preset--color--epic-red);
	outline-offset: 2px;
}

/* 13px rather than 14px vertical padding: the partner button's icon is taller
   than plain text, so the smaller padding keeps its height matching the join
   form's submit button. */
.epic-partner-form .wpcf7-submit {
	align-self: flex-start;
	padding: 13px 28px;
}

@media (max-width: 599px) {
	.epic-partner-form .wpcf7-submit {
		align-self: stretch;
	}
}

/* CF7 indents each list item by 1em; without this it leaves the checkbox
   out of line with the fields above it. */
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.wpcf7-form .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.wpcf7-form .wpcf7-acceptance input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 3px 0 0;
	accent-color: var(--wp--preset--color--epic-red);
}

.epic-partner-intro {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* The 600px cap sits on the children, not the group itself: core's
   constrained-layout CSS uses !important margins that would fight a
   narrower max-width applied to the group. */
.epic-partner-intro > * {
	max-width: 600px;
	margin: 0;
}

/* calc(0.67em - 12px): the column's 12px gap already counts toward the
 * browser's default 0.67em H1 bottom margin, so only the remainder is added. */
.epic-partner-intro > h1 {
	margin-bottom: calc(0.67em - 12px);
}

.epic-partner-columns {
	margin-top: 36px;
	gap: 44px;
}

@media (max-width: 781px) {
	.epic-partner-columns {
		row-gap: 32px;
	}
}

.epic-partner-aside {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 26px 24px;
	background: var(--wp--preset--color--epic-off-white);
	border: 1px solid #e8e6e4;
	border-radius: 8px;
	font-size: var(--wp--preset--font-size--label);
	line-height: 1.55;
	color: var(--wp--preset--color--epic-grey);
}

.epic-partner-aside > * {
	margin: 0;
}

.epic-partner-aside h2 {
	color: var(--wp--preset--color--epic-dark);
}

.epic-partner-aside ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-left: 18px;
}

.epic-partner-aside__mail {
	padding-top: 16px;
	border-top: 1px solid #e8e6e4;
}

.epic-partner-aside__mail a {
	color: var(--wp--preset--color--epic-red);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid #f0b6b4;
}

.epic-partner-aside__mail a:hover {
	border-bottom-color: var(--wp--preset--color--epic-red);
}

.epic-partner-success {
	display: none;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 36px 32px;
	border: 1px solid #e8e6e4;
	border-radius: 12px;
}

.epic-partner-success > * {
	margin: 0;
}

.epic-partner-form-column.is-sent .wpcf7 {
	display: none;
}

.epic-partner-form-column.is-sent .epic-partner-success {
	display: flex;
}

.epic-partner-success h2:focus {
	outline: none;
}

.epic-partner-success__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 6px;
	border-radius: 999px;
	background: var(--wp--preset--color--epic-red);
	color: #ffffff;
}

.epic-partner-success__icon svg {
	width: 24px;
	height: 24px;
}

/* This selector's specificity is needed to beat core's own is-style-outline
   rules, which would otherwise draw the border/text in the inherited dark
   colour. Vertical padding is tight because the icon, not the label, sets
   the button's height. */
.epic-partner-success .wp-block-button.is-style-outline > .wp-block-button__link {
	margin-top: 6px;
	padding: 8px 20px;
	border: 2px solid var(--wp--preset--color--epic-red);
	background: transparent;
	color: var(--wp--preset--color--epic-red);
}

.epic-partner-success .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--epic-red);
	color: #ffffff;
}

.epic-kicker {
	font-family: var(--wp--preset--font-family--nav);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: var(--wp--preset--font-size--label);
	line-height: 1.3;
	color: var(--wp--preset--color--epic-red);
	margin: 0 0 4px;
}

/* Base epic-red is only ~2.9:1 on the near-black bands; this tint reaches
   ~6.1:1 for WCAG AA — don't swap it back for the base red. */
.epic-kicker--on-dark {
	color: #f0908e;
}

/* :where() drops the kicker's specificity so flex columns that zero their
 * children's margins and space them with `gap` (.epic-partner-intro) still
 * win, instead of getting this 12px stacked on top of their own gap. */
:where(.epic-kicker) + h1 {
	margin-top: 12px;
}

.epic-img-placeholder {
	aspect-ratio: 4 / 3;
	border-radius: 8px;
	border: 1px solid #e8e6e4;
	background: repeating-linear-gradient(45deg, #f1efed, #f1efed 14px, #e9e7e5 14px, #e9e7e5 28px);
}

li.voice_group .epic-img-placeholder {
	aspect-ratio: 3 / 2;
}

li.voice_group .wp-block-post-featured-image img {
	border-radius: 8px;
}

.epic-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--epic-red);
	border-bottom: 2px solid var(--wp--preset--color--epic-red);
}

.epic-header .wp-block-navigation-item__content {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 1.0625rem;
	line-height: 1.2;
	padding: 4px 0;
	border-bottom: 2px solid transparent;
}

/* Below 1200px stay at 17px, not 18px: the menu needs that px back to stay
   on one line down to the 800px collapse breakpoint. */
@media (min-width: 1200px) {
	.epic-header .wp-block-navigation-item__content {
		font-size: 1.125rem;
	}
}

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

/* Keep this CTA's height (~35px) under the logo's — sizing it up would grow
   past the logo and start setting the header's own height. */
.epic-header-cta .wp-block-button__link {
	font-size: var(--wp--preset--font-size--label);
	padding: 8px 18px;
}

.epic-lang-switcher__list {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.epic-lang-switcher__list a {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 6px 14px;
	border: 1.5px solid #c9c7c5;
	border-radius: 999px;
	text-decoration: none;
	text-transform: uppercase;
	color: #58585b;
	font-family: var(--wp--preset--font-family--nav);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	letter-spacing: 0.04em;
	min-height: 44px;
	box-sizing: border-box;
}

.epic-lang-switcher__list a:hover {
	border-color: var(--wp--preset--color--epic-red);
	color: var(--wp--preset--color--epic-red);
}

/* Shrunk to match the ~35px CTA next to it here; the full 44px tap target
   would out-grow the button and throw off the header's right side. Scoped to
   the closed header only — the overlay's pill keeps its 44px target. */
@media (min-width: 800px) {
	.epic-header .epic-lang-switcher--closed .epic-lang-switcher__list a {
		min-height: 36px;
		padding: 4px 12px;
	}
}

/* !important because Polylang hardcodes width/height as an inline style
   on this <img> itself — nothing short of that beats inline specificity. */
.epic-lang-switcher__list img {
	width: 20px !important;
	height: 14px !important;
	display: block;
	border-radius: 2px;
	object-fit: cover;
}

/* Polylang hardcodes this margin inline too; the flex `gap` above already
   controls the flag-to-code spacing, so it only needs cancelling here. */
.epic-lang-switcher__list a span {
	margin-left: 0;
}

@media (max-width: 799px) {
	.epic-lang-switcher--closed {
		order: -1;
	}

	.epic-lang-switcher--closed .epic-lang-switcher__list a span {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.epic-lang-switcher--closed .epic-lang-switcher__list a {
		width: 44px;
		height: 44px;
		padding: 0;
		border-radius: 50%;
		justify-content: center;
		gap: 0;
	}
}

/* Unscoped by width: core's own CSS (re-declared/overridden below) already
   hides this button above the collapse breakpoint. */
.epic-header .wp-block-navigation__responsive-container-open {
	width: 44px;
	height: 44px;
	justify-content: center;
	align-items: center;
	background: var(--wp--preset--color--epic-dark);
	border-radius: 8px;
	color: #ffffff;
}

.epic-header .wp-block-navigation__responsive-container-open:hover {
	background: var(--wp--preset--color--epic-red);
}

@media (max-width: 799px) {
	/* Must stay this specific: a bare `.epic-header .wp-block-buttons` also
	   matches the overlay's duplicated CTA nested inside
	   `.epic-header .wp-block-navigation__responsive-container-content`,
	   silently hiding that one too. */
	.epic-header > .wp-block-group > .wp-block-buttons {
		display: none;
	}
}

/* Core's Navigation block only auto-collapses to a hamburger below 600px; to
   re-collapse the 600–799px band too, these match core's own `:not()` chains
   (wp-includes/blocks/navigation/style.css) plus one extra class each, so the
   specificity win doesn't depend on stylesheet load order — simplifying the
   selector back down risks losing that tie-break. */
@media (min-width: 600px) and (max-width: 799px) {
	.epic-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.epic-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Core toggles .wp-block-navigation__overlay-container's own display (none
   when closed, block when open) with higher specificity than is worth
   fighting, so only position/background/scroll are set here. The
   flex-column layout and bottom-pinning instead live on .epic-overlay-body
   below, which core's display toggling doesn't touch — moving that layout
   up onto this element would have core silently override it. */
@media (max-width: 799px) {
	.wp-block-navigation__overlay-container {
		position: fixed;
		inset: 0;
		overflow-y: auto;
		background: var(--wp--preset--color--epic-dark);
		color: var(--wp--preset--color--epic-off-white);
	}

	.epic-overlay-body {
		height: 100%;
		box-sizing: border-box;
		padding: 20px clamp(16px, 4vw, 32px) 32px;
	}

	/* Without an explicit width, this flex row shrinks to its own content
	   (logo + close button) instead of the full nav column, leaving
	   justify-content:space-between no extra space to distribute — the close
	   button ends up stuck next to the logo instead of the top-right corner.
	   Same shrink-to-fit issue on .epic-overlay-bottom etc. below. */
	.epic-overlay-header {
		flex: 0 0 auto;
		width: 100%;
		padding-bottom: 16px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	}

	.epic-overlay-header .wp-block-site-logo img {
		background: #ffffff;
		border-radius: 6px;
		padding: 2px 6px;
	}

	.epic-overlay-close {
		width: 44px;
		height: 44px;
		border-radius: 8px;
		color: #ffffff;
	}

	.epic-overlay-nav-list {
		flex: 1 1 auto;
		width: 100%;
		margin: 24px 0 0;
	}

	.epic-overlay-nav-list .wp-block-navigation__container {
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: stretch;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.epic-overlay-nav-list .wp-block-navigation-item {
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	.epic-overlay-nav-list .wp-block-navigation-item:last-child {
		border-bottom: none;
	}

	/* Extra-scoped so this reliably outranks the desktop link rules above
	   (.epic-header .wp-block-navigation-item__content and its
	   current-menu-item variant) regardless of source order — trimming the
	   prefix risks losing that specificity win. */
	.wp-block-navigation__overlay-container .epic-overlay-nav-list .wp-block-navigation-item__content {
		font-family: var(--wp--preset--font-family--heading);
		font-size: 30px;
		text-transform: uppercase;
		color: #ffffff;
		padding: 16px 0;
		border-bottom: none;
	}

	.wp-block-navigation__overlay-container .epic-overlay-nav-list .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--epic-red);
		border-bottom: none;
	}

	/* width:100% is load-bearing here: .epic-overlay-body doesn't stretch flex
	   children to full width by default, so without this the CTA width:100%
	   rules below — which only resolve against *this* box's own width —
	   would collapse the whole block down to its content width instead. */
	.epic-overlay-bottom {
		margin-top: auto;
		gap: 14px;
		width: 100%;
	}

	/* Gutenberg's buttons block sizes both the row (.wp-block-buttons) and
	   the button (.wp-block-button) to their content by default; the
	   width:100% on the link below only fills that already-shrunk box, so
	   without these two the CTA renders as a narrow pill, not full-width. */
	.epic-overlay-bottom .wp-block-buttons,
	.epic-overlay-bottom .wp-block-button.epic-overlay-cta {
		width: 100%;
	}

	/* 14px vertical padding keeps the CTA at ~46px: still a full tap target,
	   and still a little taller than the 44px language pill below it. */
	.epic-overlay-cta .wp-block-button__link {
		display: block;
		width: 100%;
		box-sizing: border-box;
		text-align: center;
		padding: 14px 16px;
	}

	/* Same shrink-to-fit issue as above: these are flex items too, so without
	   an explicit width they'd collapse to the pill's own content width and
	   sit flush left instead of forming a full-width bar. */
	.epic-nav-lang-toggle,
	.epic-nav-lang-toggle .epic-lang-switcher__list,
	.epic-nav-lang-toggle .epic-lang-switcher__list > li {
		width: 100%;
	}

	.epic-nav-lang-toggle .epic-lang-switcher__list a {
		width: 100%;
		box-sizing: border-box;
		justify-content: center;
		/* 11px, not the 6px used on the closed-header circle: this full-width
		   bar needs its own taller padding to match the CTA's visual weight. */
		padding: 11px 14px;
		border: 1.5px solid rgba(255, 255, 255, 0.3);
		background: transparent;
		color: rgba(255, 255, 255, 0.8);
	}

	.epic-nav-lang-toggle .epic-lang-switcher__list a:hover {
		border-color: rgba(255, 255, 255, 0.6);
		color: #ffffff;
	}
}

.epic-footer-brand {
	align-items: center;
	gap: 14px;
}

.epic-footer-logo {
	background: #ffffff;
	border-radius: 6px;
	padding: 6px;
	line-height: 0;
}

.epic-footer-logo img {
	display: block;
	height: 40px;
	width: auto;
}

/* #a3a3a6 rather than a darker grey: on the near-black footer it needs to be
   this light to reach WCAG AA contrast. */
.epic-footer-copyright {
	margin: 0;
	color: #a3a3a6;
	font-size: var(--wp--preset--font-size--label);
}

.epic-footer-links {
	align-items: center;
	gap: 16px 24px;
	font-family: var(--wp--preset--font-family--nav);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 1.0625rem;
	line-height: 1.2;
	letter-spacing: 0.05em;
}

.epic-footer-links p {
	margin: 0;
}

/* Padding on an inline element like this grows its tap area without
   reflowing surrounding layout — don't "fix" it by wrapping in a block. */
.epic-footer-links a {
	padding-block: 12px;
}

.epic-footer a {
	color: #c9c7c5;
}

.epic-footer a:hover {
	color: #ffffff;
}

.epic-concert-row {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(12px, 3vw, 24px);
	padding: 26px 8px;
	border-top: 1px solid #e8e6e4;
}

.epic-concert-row__date {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-width: 56px;
}

.epic-concert-row__date > :first-child {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2.25rem, 2.167rem + 0.37vw, 2.5rem);
	color: var(--wp--preset--color--epic-dark);
	line-height: 1;
}

.epic-concert-row__date > :last-child {
	font-family: var(--wp--preset--font-family--nav);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 16px;
	line-height: 1.3;
	color: var(--wp--preset--color--epic-red);
	letter-spacing: 0.08em;
}

.epic-concert-row__info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: var(--wp--preset--color--epic-muted);
}

/* Resets the page's global <h2> styles (uppercase, ~36px, ~30px margin) that
   this post-title block otherwise inherits — sized for section headings,
   not a single line in a list row. */
.epic-concert-row__info .wp-block-post-title {
	margin: 0;
	font-size: clamp(1.5rem, 1.417rem + 0.37vw, 1.75rem);
	line-height: 1.15;
	text-transform: none;
	color: var(--wp--preset--color--epic-dark);
}

/* This is a core/read-more block (a core/button can't get a per-post
   permalink in a Query Loop) with no wp-block-button wrapper, so it needs
   this full outline-button styling spelled out rather than inheriting it
   from theme.json. */
.epic-concert-row__cta {
	display: inline-block;
	border: 2px solid #c9c7c5;
	border-radius: 4px;
	padding: 10px 20px;
	font-family: var(--wp--preset--font-family--nav);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 1.125rem;
	line-height: 1.2;
	color: #58585b;
	text-decoration: none;
}

.epic-concert-row__cta:hover {
	border-color: var(--wp--preset--color--epic-red);
	color: var(--wp--preset--color--epic-red);
}

.epic-concert-row__year {
	font-family: var(--wp--preset--font-family--nav);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 15px;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--epic-muted);
}

.epic-concert-row--past {
	padding: 20px 8px;
}

.epic-concert-row--past .epic-concert-row__date > :first-child,
.epic-concert-row--past .epic-concert-row__date > :last-child,
.epic-concert-row--past .epic-concert-row__info .wp-block-post-title {
	color: var(--wp--preset--color--epic-muted);
}

/* Explicit clamp(), not a percentage: a % font-size resolves against the
   parent's 16–18px, shrinking these to ~14px instead of 90% of their own size. */
.epic-concert-row--past .epic-concert-row__date > :first-child {
	font-size: clamp(2rem, 1.917rem + 0.37vw, 2.25rem);
}

.epic-concert-row--past .epic-concert-row__info .wp-block-post-title {
	font-size: var(--wp--preset--font-size--heading-4);
}

@media (max-width: 599px) {
	.epic-concert-row {
		grid-template-columns: 64px minmax(0, 1fr);
		row-gap: 12px;
	}

	.epic-concert-row__cta,
	.epic-concert-row__year {
		grid-column: 2;
		justify-self: start;
	}
}

/* Fixed at two columns, not auto-fit: auto-fit squeezes a third column into
   the 1080px container. */
.epic-repertoire {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 48px;
	padding: 0;
	list-style: none;
}

.epic-repertoire__song {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	align-items: baseline;
	gap: 16px;
	padding: 18px 4px;
	border-top: 1px solid #e8e6e4;
}

.epic-repertoire__number {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	line-height: 1.2;
	color: var(--wp--preset--color--epic-red);
}

.epic-repertoire__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.epic-repertoire__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.3125rem;
	line-height: 1.2;
	color: var(--wp--preset--color--epic-dark);
}

/* epic-muted, not the design's lighter #8a8a8d: that only reaches ~3.5:1
   contrast on white, below WCAG AA. */
.epic-repertoire__artist {
	font-size: var(--wp--preset--font-size--label);
	line-height: 1.3;
	color: var(--wp--preset--color--epic-muted);
}

.epic-repertoire-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 48px;
	margin-top: 24px;
	padding: 10px 20px;
	border: 2px solid #c9c7c5;
	border-radius: 4px;
	background: #ffffff;
	font-family: var(--wp--preset--font-family--nav);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 1rem;
	line-height: 1.2;
	color: #58585b;
	cursor: pointer;
}

.epic-repertoire-toggle:hover {
	border-color: var(--wp--preset--color--epic-red);
	color: var(--wp--preset--color--epic-red);
}

.epic-repertoire-toggle__arrow {
	font-size: 0.8125rem;
}

/* nth-child(n + 5) below sets the "first 4 songs" cutoff — must stay in sync
   with the count assets/js/repertoire.js uses to toggle .is-collapsed. */
@media (max-width: 640px) {
	.epic-repertoire {
		grid-template-columns: 1fr;
	}

	.epic-repertoire__song {
		grid-template-columns: 36px minmax(0, 1fr);
		gap: 12px;
		padding: 14px 2px;
	}

	.epic-repertoire__number {
		font-size: 1.0625rem;
	}

	.epic-repertoire__text {
		gap: 1px;
	}

	.epic-repertoire__title {
		font-size: 1.125rem;
	}

	.epic-repertoire.is-collapsed .epic-repertoire__song:nth-child(n + 5) {
		display: none;
	}
}

@media (min-width: 641px) {
	.epic-repertoire-toggle {
		display: none;
	}
}

.epic-concert-detail {
	position: relative;
	margin: clamp(40px, 6vw, 64px) auto;
	max-width: 860px;
	display: flex;
	flex-direction: column;
	gap: 36px;
	background: #ffffff;
	border: 1px solid #d8d6d4;
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(43, 43, 45, 0.08);
	padding: 48px clamp(24px, 5vw, 56px) 56px;
}

.epic-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-family: var(--wp--preset--font-family--nav);
	font-weight: 700;
	text-transform: uppercase;
	/* Must stay a preset var: a literal font-size here is subject to
	   WordPress's fluid-type clamp, which floors any raw value at 14px. */
	font-size: var(--wp--preset--font-size--small-print);
	letter-spacing: 0.06em;
	line-height: 1.6;
}

.epic-breadcrumb__link {
	color: #8a8a8d;
	text-decoration: none;
	/* Negative margin cancels the padding's visual effect on surrounding
	   spacing while still growing the tap area — don't remove it as
	   redundant, it isn't. */
	padding-block: 12px;
	margin-block: -12px;
}

.epic-breadcrumb__link:hover,
.epic-breadcrumb__link:focus-visible {
	color: var(--wp--preset--color--epic-red);
}

.epic-breadcrumb__separator {
	color: #c9c7c5;
}

/* min-width: 0 is required here: a flex item's default min-width:auto would
   otherwise block it from shrinking below its text, defeating the ellipsis. */
.epic-breadcrumb__current {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--wp--preset--color--epic-dark);
}

@media (max-width: 599px) {
	.epic-breadcrumb {
		gap: 8px;
	}
}

.epic-concert-detail__header {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 28px;
}

.epic-concert-detail__date {
	flex: none;
	width: 96px;
	border: 2px solid var(--wp--preset--color--epic-dark);
	border-radius: 8px;
	overflow: hidden;
	text-align: center;
}

.epic-concert-detail__date-month {
	background: var(--wp--preset--color--epic-dark);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--nav);
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1.3;
	letter-spacing: 0.1em;
	padding: 5px 0;
}

.epic-concert-detail__date-day {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2.125rem, 1.958rem + 0.741vw, 2.625rem);
	line-height: 1.2;
	color: var(--wp--preset--color--epic-dark);
	padding: 6px 0 2px;
}

.epic-concert-detail__date-year {
	font-size: 0.875rem;
	line-height: 1.3;
	color: var(--wp--preset--color--epic-muted);
	padding-bottom: 8px;
}

.epic-concert-detail__intro {
	flex: 1;
	min-width: 280px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.epic-concert-detail__kicker {
	font-family: var(--wp--preset--font-family--nav);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: var(--wp--preset--font-size--label);
	line-height: 1.3;
	color: var(--wp--preset--color--epic-red);
}

/* clamp() slope is steeper than the heading presets' so the title reaches
   its full size by ~900px wide, where the card itself stops growing. */
.epic-concert-detail__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2.125rem, 1.25rem + 3.2vw, 3rem);
	margin: 0;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--wp--preset--color--epic-dark);
}

.epic-concert-detail__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	font-size: var(--wp--preset--font-size--body);
	color: #58585b;
}

.epic-concert-detail__meta a {
	color: inherit;
	border-bottom: 1px solid #f0b6b4;
}

.epic-concert-detail__meta a:hover {
	color: var(--wp--preset--color--epic-red);
	border-bottom-color: var(--wp--preset--color--epic-red);
}

.epic-concert-detail__dot {
	color: #c9c7c5;
}

/* height:auto must override core's own .wp-block-button__link height:100%
   here: harmless while inline, but once the sticky mobile variant below
   switches to position:fixed, 100% would resolve against the viewport and
   blow the bar up to full-screen height. */
.epic-concert-detail__tickets {
	flex: none;
	height: auto;
	padding: 15px 32px;
	font-size: 19px;
	line-height: 1.2;
	align-self: center;
}

.epic-concert-detail__tickets:hover {
	background: #b52320;
}

.epic-concert-detail__photo {
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid #e8e6e4;
}

.epic-concert-detail__photo img {
	display: block;
	width: 100%;
	height: auto;
}

.epic-concert-detail__body {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: clamp(24px, 5vw, 48px);
}

.epic-concert-detail__about {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.epic-concert-detail__about-heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--heading-4);
	line-height: 1.2;
	margin: 0;
	text-transform: uppercase;
	color: var(--wp--preset--color--epic-dark);
}

.epic-concert-detail__about p {
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.65;
	color: #58585b;
}

.epic-concert-detail__about p + p {
	margin-top: 14px;
}

.epic-concert-detail__practical {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: var(--wp--preset--color--epic-off-white);
	border: 1px solid #e8e6e4;
	border-radius: 8px;
	padding: 22px 24px;
	align-self: start;
}

.epic-concert-detail__practical-heading {
	font-family: var(--wp--preset--font-family--nav);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.9375rem;
	line-height: 1.3;
	color: var(--wp--preset--color--epic-red);
	margin: 0;
}

.epic-concert-detail__practical-rows {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: var(--wp--preset--font-size--body);
	color: #58585b;
}

.epic-concert-detail__practical-rows strong {
	color: var(--wp--preset--color--epic-dark);
}

/* Same tap-area padding trick as .epic-breadcrumb__link. */
.epic-concert-detail__maps-link {
	font-family: var(--wp--preset--font-family--nav);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 1rem;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--epic-red);
	padding-block: 12px;
	margin-block: -12px;
}

.epic-concert-detail__maps-link:hover {
	color: #a81f1c;
}

.epic-concert-detail__notice {
	border: 1.5px dashed #c9c7c5;
	border-radius: 8px;
	padding: 28px 32px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	background: var(--wp--preset--color--epic-off-white);
}

.epic-concert-detail__notice-heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--heading-4);
	line-height: 1.2;
	margin: 0;
	text-transform: uppercase;
	color: var(--wp--preset--color--epic-dark);
}

.epic-concert-detail__notice-body {
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.65;
	color: #58585b;
	max-width: 560px;
}

.epic-concert-detail__notice-body a {
	font-weight: 700;
	color: inherit;
	border-bottom: 1px solid #f0b6b4;
}

.epic-concert-detail__notice-body a:hover {
	color: var(--wp--preset--color--epic-red);
	border-bottom-color: var(--wp--preset--color--epic-red);
}

/* :has() here, not a flat padding-bottom: the sticky bar element only exists
   in the markup when a ticket link is set, so a concert without one must
   not get this padding it doesn't need. */
.epic-concert-detail:has(.epic-concert-detail__tickets--sticky) {
	padding-bottom: 96px;
}

.epic-concert-detail__tickets--sticky {
	display: none;
}

@media (max-width: 799px) {
	.epic-concert-detail {
		gap: 24px;
		padding: 24px 20px 32px;
	}

	.epic-concert-detail:has(.epic-concert-detail__tickets--sticky) {
		padding-bottom: 24px;
	}

	.epic-concert-detail__header {
		align-items: center;
		flex-wrap: nowrap;
		gap: 16px;
	}

	.epic-concert-detail__date {
		width: 72px;
	}

	.epic-concert-detail__date-month {
		padding: 4px 0;
	}

	.epic-concert-detail__date-day {
		padding: 4px 0 2px;
	}

	.epic-concert-detail__date-year {
		padding-bottom: 6px;
	}

	.epic-concert-detail__intro {
		gap: 6px;
		min-width: 0;
	}

	.epic-concert-detail__meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.epic-concert-detail__dot {
		display: none;
	}

	.epic-concert-detail__tickets--inline {
		display: none;
	}

	.epic-concert-detail__practical {
		display: none;
	}

	.epic-concert-detail__body {
		display: block;
	}

	.epic-concert-detail__notice {
		padding: 22px 20px;
	}

	.epic-concert-detail__tickets--sticky {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 20;
		text-align: center;
		border-radius: 0;
		padding: 14px 20px;
		font-size: 18px;
		box-shadow: 0 -6px 16px rgba(43, 43, 45, 0.06);
	}
}

.epic-checklist,
.epic-form-card {
	background: var(--wp--preset--color--epic-off-white);
	border: 1px solid #e8e6e4;
	border-radius: 8px;
	padding: 22px;
}

.epic-checklist p {
	display: flex;
	gap: 12px;
	align-items: baseline;
}

.epic-checklist__check {
	color: var(--wp--preset--color--epic-red);
}

.epic-form-card {
	padding: 32px;
}

.epic-fallback-card {
	border: 1px solid #e8e6e4;
	border-radius: 8px;
	background: var(--wp--preset--color--epic-off-white);
	padding: clamp(40px, 6vw, 64px) 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}

.epic-fallback-card__icon {
	width: 44px;
	height: 44px;
}

.epic-fallback-card__icon--small {
	width: 40px;
	height: 40px;
}

.epic-fallback-card__heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.5rem, 1.417rem + 0.37vw, 1.75rem);
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--wp--preset--color--epic-dark);
}

.epic-fallback-card__body {
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
	color: #58585b;
	max-width: 460px;
}

.epic-fallback-card__button {
	margin-top: 6px;
	background: var(--wp--preset--color--epic-red);
	color: #ffffff;
	padding: 12px 26px;
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--nav);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 1.125rem;
	line-height: 1.2;
	letter-spacing: 0.05em;
	text-decoration: none;
}

.epic-fallback-card__button:hover {
	background: #b52320;
	color: #ffffff;
}

.epic-fallback-card__button--outline {
	background: transparent;
	border: 2px solid var(--wp--preset--color--epic-red);
	color: var(--wp--preset--color--epic-red);
	padding: 11px 26px;
}

.epic-fallback-card__button--outline:hover {
	background: var(--wp--preset--color--epic-red);
	color: #ffffff;
}

/* display:grid overrides core Columns' own flex row: an auto-fit grid drops
   the video below the text intrinsically, as soon as either column would get
   narrower than 320px, instead of waiting for core's fixed 782px breakpoint. */
.wp-block-columns.epic-about-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(28px, 5vw, 56px);
}

.epic-video-frame {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid #e8e6e4;
	overflow: hidden;
}

.epic-video-frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.epic-video-frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.epic-partners-intro {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 48px;
}

.epic-partners-text {
	flex: 1;
	max-width: 600px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.epic-partners-text > * {
	margin: 0;
}

/* This calc() lines the button's top edge up with the heading's: the heading
   starts one kicker line (label size × the kicker's 1.3 line-height) plus
   the 14px gap below the top of the text column. */
.epic-partners-cta {
	flex: none;
	margin-top: calc(var(--wp--preset--font-size--label) * 1.3 + 14px);
}

/* 10px rather than theme.json's 0.75em: the 28px partner icon is taller than
   the label's line, so this smaller padding keeps the button's height. */
.epic-partners-cta .wp-block-button__link {
	padding-top: 10px;
	padding-bottom: 10px;
}

/* !important only to beat the preset colour class's own !important. */
.epic-partners-cta .wp-block-button__link:hover {
	background-color: #b52320 !important;
}

/* This is a mask filled with currentColor rather than a plain icon image, so
   the cut-out heart always shows the button's own background through it,
   including on hover. */
.epic-partners-cta .wp-block-button__link,
.epic-partner-form .wpcf7-submit,
.epic-partner-success .wp-block-button.is-style-outline > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.epic-partners-cta .wp-block-button__link::before,
.epic-partner-form .wpcf7-submit::before,
.epic-partner-success .wp-block-button.is-style-outline > .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 28px;
	height: 28px;
	background-color: currentColor;
	-webkit-mask: url(../images/partner-heart.svg) center / contain no-repeat;
	mask: url(../images/partner-heart.svg) center / contain no-repeat;
}

.epic-partner-success .wp-block-button.is-style-outline > .wp-block-button__link::before {
	width: 26px;
	height: 26px;
}

.epic-partner-logos {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin-top: 44px;
	padding-top: 18px;
	border-top: 1px solid #e8e6e4;
}

.epic-partner-logo {
	box-sizing: border-box;
	height: 84px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	background: #ffffff;
	border: 1px solid #e8e6e4;
	border-radius: 8px;
}

a.epic-partner-logo {
	text-decoration: none;
}

a.epic-partner-logo:hover {
	border-color: #c9c7c5;
}

.epic-partner-logo__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.epic-partner-logo__name {
	font-family: var(--wp--preset--font-family--nav);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--label);
	line-height: 1.2;
	text-align: center;
	color: var(--wp--preset--color--epic-grey);
}

.epic-current-partners {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 32px;
	margin-top: 44px;
}

.epic-current-partner {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid #e8e6e4;
	border-radius: 12px;
	overflow: hidden;
}

.epic-current-partner__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 120px;
	padding: 32px 28px;
	background: var(--wp--preset--color--epic-off-white);
	border-bottom: 1px solid #e8e6e4;
}

.epic-current-partner__logo-image {
	display: block;
	max-width: 220px;
	max-height: 64px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.epic-current-partner__logo-name {
	font-family: var(--wp--preset--font-family--nav);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--label);
	text-align: center;
	color: var(--wp--preset--color--epic-grey);
}

.epic-current-partner__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	padding: 24px 28px 28px;
}

.epic-current-partner__body > * {
	margin: 0;
}

.epic-current-partner__heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--heading-4);
	color: var(--wp--preset--color--epic-dark);
}

.epic-current-partner__text {
	flex: 1;
	font-size: var(--wp--preset--font-size--label);
	line-height: 1.6;
	color: var(--wp--preset--color--epic-grey);
}

.epic-current-partner__link {
	font-family: var(--wp--preset--font-family--nav);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--small-print);
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--epic-red);
}

.epic-current-partner__link:hover {
	color: #a81f1c;
}

@media (max-width: 799px) {
	.epic-partners-intro {
		flex-direction: column;
		gap: 32px;
	}

	.epic-partners-text {
		flex: none;
	}

	.epic-partners-cta {
		margin-top: 0;
	}
}

@media (max-width: 599px) {
	.epic-partners-cta,
	.epic-partners-cta .wp-block-button,
	.epic-partners-cta .wp-block-button__link {
		width: 100%;
	}

	/* Narrower than the desktop padding: the longer English label needs the
	   room, or it wraps onto a second line. */
	.epic-partners-cta .wp-block-button__link {
		padding-left: 18px;
		padding-right: 18px;
	}

	.epic-partners-cta .wp-block-button__link::before,
	.epic-partner-form .wpcf7-submit::before {
		width: 26px;
		height: 26px;
	}

	.epic-partner-logos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
		margin-top: 32px;
		padding-top: 16px;
	}

	.epic-partner-logo {
		height: 72px;
	}

	.epic-current-partners {
		grid-template-columns: 1fr;
		gap: 20px;
		margin-top: 32px;
	}
}

.epic-insta-header {
	align-items: center;
	gap: 24px;
}

/* The kicker's own margin-bottom (used elsewhere for regular block flow) is
   zeroed out below in favour of this flex gap, so the two don't stack into
   more than 12px of space. */
.epic-insta-title {
	gap: 12px;
}

.epic-insta-title .epic-kicker {
	margin-bottom: 0;
}

.epic-insta-follow-btn {
	display: flex;
	align-items: center;
	gap: 9px;
	background: var(--wp--preset--color--epic-red);
	border-radius: 999px;
	padding: 12px 22px;
	font-family: var(--wp--preset--font-family--nav);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 1.125rem;
	line-height: 1.2;
	letter-spacing: 0.05em;
	color: #ffffff;
	text-decoration: none;
}

.epic-insta-follow-btn:hover {
	background: #b52320;
	color: #ffffff;
}

.epic-insta-follow-btn__icon {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
}

.epic-insta-carousel {
	margin-top: 28px;
}

/* The feed's own header/bio/follow button/Load More are already switched off
   in its settings; these !important rules are a defensive backstop in case a
   plugin update ever re-enables one, so it can't sneak back into a layout
   the arrows aren't built to accommodate. Don't remove them as dead code. */
#sb_instagram .sb_instagram_header,
#sb_instagram .sbi_bio,
#sb_instagram .sbi_follow_btn,
#sb_instagram #sbi_load {
	display: none !important;
}

.epic-insta-carousel__row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: clamp(12px, 2vw, 20px);
	align-items: center;
}

.epic-insta-carousel__track-wrap {
	position: relative;
	min-width: 0;
}

/* 700px must match MOBILE_BREAKPOINT in instagram-carousel.js. Below it the
   two 48px arrows would leave each post card only ~90px wide, so they move
   to their own row underneath instead. */
@media (max-width: 700px) {
	.epic-insta-carousel__row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 16px;
	}

	.epic-insta-carousel__track-wrap {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.epic-insta-carousel__arrow--prev {
		grid-row: 2;
		justify-self: end;
	}

	.epic-insta-carousel__arrow--next {
		grid-row: 2;
		justify-self: start;
	}
}

.epic-insta-carousel__sr-status {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* visibility:hidden, not display:none: the track keeps contributing its real
   height to the row, so the skeleton positioned over it via inset: 0 is
   guaranteed to match that height exactly instead of needing to be kept in
   sync with it by hand. */
.epic-insta-carousel:not(.is-feed-ready) .epic-insta-carousel__track {
	visibility: hidden;
}

.epic-insta-carousel.is-feed-ready .epic-insta-carousel__skeleton {
	display: none;
}

.epic-insta-carousel__skeleton {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

@media (max-width: 700px) {
	.epic-insta-carousel__skeleton {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Must mirror POSTS_PER_PAGE_MOBILE in instagram-carousel.js — only 2 real
	   posts show per page on mobile, so the skeleton shouldn't promise 4. */
	.epic-insta-carousel__skeleton-card:nth-child(n + 3) {
		display: none;
	}
}

/* A lookalike class, not the real .sbi_item, so plugin JS/CSS that targets
   .sbi_item by name never runs against this decorative placeholder. */
.epic-insta-carousel__skeleton-card {
	display: flex;
	flex-direction: column;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid #e8e6e4;
	background: #ffffff;
}

.epic-insta-carousel__skeleton-photo {
	aspect-ratio: 1 / 1;
}

.epic-insta-carousel__skeleton-bar {
	border-radius: 4px;
	background: linear-gradient(90deg, #f1efed 25%, #e9e7e5 50%, #f1efed 75%);
	background-size: 200% 100%;
	animation: epic-insta-shimmer 1.4s linear infinite;
}

/* .epic-insta-carousel__caption/__tags normally clamp lines via -webkit-box,
   which (see the matching note in sbi/item.php) collapses to zero height
   once the element has no text — exactly the case for these empty
   placeholder bars. display: block sidesteps that collapse; the compound
   selector outranks the plain caption/tags rules regardless of source order. */
.epic-insta-carousel__caption.epic-insta-carousel__skeleton-bar,
.epic-insta-carousel__tags.epic-insta-carousel__skeleton-bar,
.epic-insta-carousel__stats.epic-insta-carousel__skeleton-bar {
	display: block;
}

.epic-insta-carousel__skeleton-bar--short {
	width: 60%;
}

@keyframes epic-insta-shimmer {
	from { background-position: 200% 0; }
	to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.epic-insta-carousel__skeleton-bar {
		animation: none;
		background: #ede9e6;
	}
}

/* Must stay in sync with POSTS_PER_PAGE_DESKTOP/MOBILE and MOBILE_BREAKPOINT
   in instagram-carousel.js, which controls how many posts it reveals. */
.epic-insta-carousel #sbi_images {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 16px !important;
}

@media (max-width: 700px) {
	.epic-insta-carousel #sbi_images {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

.epic-insta-carousel .sbi_item,
.epic-insta-vertical .sbi_item {
	display: flex;
	flex-direction: column;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid #e8e6e4;
	background: #ffffff;
}

.epic-insta-carousel .sbi_item:hover,
.epic-insta-vertical .sbi_item:hover {
	border-color: var(--wp--preset--color--epic-red);
}

.epic-insta-carousel__meta {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 14px 14px;
	flex: 1;
}

/* min-height reserves 2 lines even when the caption is shorter or missing —
   otherwise a caption-free card would be shorter than a two-line one, making
   every page of the carousel a different height and the prev/next arrows
   jump as you click through pages. Same reasoning on __tags/__stats below. */
.epic-insta-carousel__caption {
	margin: 0;
	font-size: var(--wp--preset--font-size--label);
	line-height: 1.45;
	min-height: 2.9em;
	color: var(--wp--preset--color--epic-dark);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.epic-insta-carousel__tags {
	margin: 0;
	font-size: var(--wp--preset--font-size--small-print);
	line-height: 1.3;
	min-height: 1.3em;
	color: var(--wp--preset--color--epic-red);
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Keep margin-top: auto even though the reserved heights above make it
   rarely active — it's still the fallback for the shorter-caption edge case. */
.epic-insta-carousel__stats {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 20px;
	margin-top: auto;
	font-family: var(--wp--preset--font-family--nav);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small-print);
	line-height: 1.2;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--epic-muted);
}

.epic-insta-carousel__stat {
	display: flex;
	align-items: center;
	gap: 5px;
}

.epic-insta-carousel__stat-icon {
	width: 15px;
	height: 15px;
	display: block;
}

/* The plugin's <img> tags carry no width/height/aspect-ratio, so a post
   fetched by "Load More" would render at 0 height while its image downloads.
   Reserving the square up front shows this neutral fill instead. */
.epic-insta-carousel .sbi_photo_wrap,
.epic-insta-vertical .sbi_photo_wrap {
	aspect-ratio: 1 / 1;
	background: #ede9e6;
}

.epic-insta-carousel .sbi_photo,
.epic-insta-carousel .sbi_photo_wrap img,
.epic-insta-vertical .sbi_photo,
.epic-insta-vertical .sbi_photo_wrap img {
	height: 100% !important;
}

.epic-insta-carousel__arrow {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1.5px solid #c9c7c5;
	background: #ffffff;
	color: #58585b;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s, color 0.15s;
	padding: 0;
}

.epic-insta-carousel__arrow:hover:not(:disabled) {
	border-color: var(--wp--preset--color--epic-red);
	color: var(--wp--preset--color--epic-red);
}

.epic-insta-carousel__arrow:disabled {
	border-color: #e8e6e4;
	color: #c9c7c5;
	cursor: default;
}

.epic-insta-carousel__arrow-icon {
	width: 10px;
	height: 16px;
	display: block;
}

.epic-insta-carousel__arrow--next:not(:disabled) {
	border-color: var(--wp--preset--color--epic-red);
	background: var(--wp--preset--color--epic-red);
	color: #ffffff;
}

.epic-insta-carousel__arrow--next:hover:not(:disabled) {
	border-color: #b52320;
	background: #b52320;
	color: #ffffff;
}

.epic-insta-carousel__arrow-loading {
	display: none;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
}

.epic-insta-carousel__arrow.is-loading .epic-insta-carousel__arrow-icon {
	display: none;
}

.epic-insta-carousel__arrow.is-loading .epic-insta-carousel__arrow-loading {
	display: block;
}

.epic-insta-carousel__dots {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}

.epic-insta-carousel__dots-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.epic-insta-carousel__dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #8a8a8d;
	transition: width 0.2s, background-color 0.2s;
}

.epic-insta-carousel__dot.is-active {
	width: 24px;
	background: var(--wp--preset--color--epic-red);
}

.epic-insta-carousel__page-label {
	font-family: var(--wp--preset--font-family--nav);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--label);
	line-height: 1.2;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--epic-muted);
}

.epic-insta-vertical {
	margin-top: 28px;
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
	padding: 40px;
	box-sizing: border-box;
}

.epic-insta-vertical #sbi_images {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 32px !important;
}

.epic-insta-vertical #sb_instagram #sbi_images .sbi_item {
	display: grid;
	grid-template-columns: 440px minmax(0, 1fr);
	grid-template-rows: auto 1fr auto;
	grid-template-areas: "media header" "media meta" "media footer";
	border-radius: 4px;
}

.epic-insta-vertical .sbi_photo_wrap {
	grid-area: media;
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #000000;
}

.epic-insta-vertical .sbi_photo,
.epic-insta-vertical .sbi_photo_wrap img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	margin: 0;
}

.epic-insta-vertical .epic-insta-carousel__caption {
	display: -webkit-box;
	min-height: 0;
	-webkit-line-clamp: 8;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.55;
}

.epic-insta-vertical #sb_instagram .epic-insta-carousel__caption br {
	display: inline;
}

.epic-insta-vertical__item-header {
	grid-area: header;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid #e8e6e4;
}

.epic-insta-vertical__avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
}

.epic-insta-vertical__avatar--fallback {
	background: var(--wp--preset--color--epic-red);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--label);
}

.epic-insta-vertical__username {
	font-family: var(--wp--preset--font-family--nav);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--preset--color--epic-dark);
}

.epic-insta-vertical__date {
	margin-left: auto;
	font-size: var(--wp--preset--font-size--small-print);
	color: var(--wp--preset--color--epic-muted);
}

.epic-insta-vertical__meta {
	grid-area: meta;
	padding: 16px;
}

.epic-insta-vertical__tags {
	margin: 12px 0 0;
}

.epic-insta-vertical__tags a {
	font-size: var(--wp--preset--font-size--body);
	margin-right: 10px;
	color: var(--wp--preset--color--epic-red);
}

.epic-insta-vertical__tags a:hover {
	color: #b52320;
	text-decoration: underline;
}

.epic-insta-vertical__post-footer {
	grid-area: footer;
	border-top: 1px solid #e8e6e4;
	padding: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.epic-insta-vertical__post-stats {
	display: flex;
	align-items: center;
	gap: 20px;
	color: var(--wp--preset--color--epic-grey);
	font-size: var(--wp--preset--font-size--small-print);
}

.epic-insta-vertical__post-stat {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.epic-insta-vertical__post-stat .epic-insta-carousel__stat-icon {
	width: 20px;
	height: 20px;
	color: var(--wp--preset--color--epic-dark);
}

.epic-insta-vertical__post-stat strong {
	color: var(--wp--preset--color--epic-dark);
	font-weight: 700;
}

.epic-insta-vertical__post-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 22px;
	box-sizing: border-box;
	border: 2px solid var(--wp--preset--color--epic-red);
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--nav);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--preset--color--epic-red);
	text-decoration: none;
}

.epic-insta-vertical__post-link:hover {
	background: var(--wp--preset--color--epic-red);
	color: #ffffff;
}

.epic-insta-vertical__footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.epic-insta-vertical__load-more,
.epic-insta-vertical__profile-link {
	min-height: 48px;
	padding: 0 32px;
	border: 2px solid var(--wp--preset--color--epic-red);
	background: var(--wp--preset--color--epic-red);
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--nav);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.06em;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	text-decoration: none;
	cursor: pointer;
}

.epic-insta-vertical__load-more:hover,
.epic-insta-vertical__profile-link:hover {
	background: #b52320;
	border-color: #b52320;
}

/* The browser's own [hidden]{display:none} rule loses to any author rule
   that sets `display`, like the `display: flex` above, regardless of
   specificity — this repeats `display: none` as an author rule of our own
   so toggling the `hidden` attribute actually takes effect. */
.epic-insta-vertical__load-more[hidden],
.epic-insta-vertical__profile-link[hidden] {
	display: none;
}

@media (max-width: 768px) {
	.epic-insta-vertical {
		padding: 16px;
		gap: 24px;
	}

	.epic-insta-vertical #sbi_images {
		gap: 24px !important;
	}

	.epic-insta-vertical #sb_instagram #sbi_images .sbi_item {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto auto auto;
		grid-template-areas: "header" "media" "meta" "footer";
	}

	.epic-insta-vertical .sbi_photo_wrap {
		aspect-ratio: 1 / 1;
	}

	.epic-insta-vertical .epic-insta-carousel__caption {
		-webkit-line-clamp: 2;
	}

	.epic-insta-vertical__post-footer {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}

	.epic-insta-vertical__post-link {
		width: 100%;
	}
}

/* Targets the gallery that follows, not .epic-video-frame itself — that
 * class is shared with the Home page's about-video, which must stay
 * untouched by this spacing. */
.epic-video-frame + .wp-block-gallery {
	margin-top: 32px;
}

.wp-block-gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 16px;
}

.wp-block-gallery.has-nested-images .wp-block-image {
	/* !important: core's own gallery width rule targets
	 * "figure.wp-block-image:not(#individual-image)" — that :not(#id) is
	 * Gutenberg's trick for faking ID-level specificity, so nothing short of
	 * !important out-ranks its 33%-of-track width here. */
	width: 100% !important;
	margin: 0;
	aspect-ratio: 1;
	min-height: 0;
}

/* Core's own gallery rule sets "display: flex" on this element, which — a
 * real selector, unlike the browser's near-zero-specificity built-in
 * [hidden] rule — would otherwise keep the photo visible when hidden. One
 * extra class here is enough to outrank it, no !important needed. */
.wp-block-gallery.has-nested-images .wp-block-image[hidden] {
	display: none;
}

.wp-block-gallery.has-nested-images .wp-block-image img {
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	object-fit: cover;
	border-radius: 8px;
}

/* Core moves this button in from the corner to align with a letterboxed
 * photo's edge — our thumbnails are cropped, not letterboxed, so that edge
 * would land mid-photo. !important: core writes top/right as inline styles.
 */
.wp-block-gallery.has-nested-images .wp-block-image .lightbox-trigger {
	top: 16px !important;
	right: 16px !important;
}

@media (max-width: 480px) {
	.wp-block-gallery.has-nested-images {
		gap: 12px;
	}
}

.epic-video-tile {
	position: relative;
	cursor: pointer;
}

.epic-video-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.55);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5v14l11-7z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 58% center;
	background-size: 22px 22px;
	pointer-events: none;
}

.epic-video-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	background: rgba(0, 0, 0, 0.9);
}

.epic-video-lightbox .epic-video-frame {
	width: 960px;
	max-width: 100%;
	max-height: 100%;
}

.epic-video-lightbox-close {
	position: absolute;
	top: 24px;
	right: 24px;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.epic-gallery-more-tile {
	position: relative;
}

/* This button sits inside a lightbox container, so core styles it as its
 * little 20x20 enlarge icon (parked in the corner, blurred, faded in only on
 * hover) — every property below restates over that to get a solid, always-
 * visible scrim instead. !important on the background: core's own resting-
 * state rule carries four classes, which no readable selector here outranks.
 */
.wp-block-gallery .epic-gallery-more {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	inset: 0;
	width: auto;
	height: auto;
	opacity: 1;
	border: none;
	border-radius: 8px;
	background: rgba(43, 43, 45, 0.72) !important;
	backdrop-filter: none;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.5rem, 1.417rem + 0.37vw, 1.75rem);
	letter-spacing: 0.03em;
	color: #ffffff;
	cursor: pointer;
}

.epic-gallery-collapse {
	display: block;
	margin: 20px auto 0;
	border: 1.5px solid var(--wp--preset--color--epic-red);
	border-radius: 999px;
	padding: 11px 24px;
	background: transparent;
	font-family: var(--wp--preset--font-family--nav);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 1.0625rem;
	line-height: 1.2;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--epic-red);
	cursor: pointer;
}

.epic-gallery-collapse:hover {
	background: var(--wp--preset--color--epic-red);
	color: #ffffff;
}

/* Same [hidden] trap as the gallery photos above: each button gets a real
 * "display" rule elsewhere, which beats the browser's built-in
 * "[hidden] { display: none }" — without repeating it here as an author
 * rule, the collapse button would greet every visitor from the start.
 */
.wp-block-gallery .epic-gallery-more[hidden],
.epic-gallery-collapse[hidden] {
	display: none;
}

/* This background shows while location-map.js is still loading MapLibre —
 * don't change it to white, or the section flashes an empty box first. */
.epic-location-map {
	width: 100%;
	min-height: 400px;
	border: 1px solid #e8e6e4;
	border-radius: 8px;
	background: var(--wp--preset--color--epic-off-white);
	overflow: hidden;
}

.epic-location-map .maplibregl-ctrl-attrib {
	font-size: 0.75rem;
}

.epic-location-map__popup-heading {
	color: var(--wp--preset--color--epic-dark);
}

.epic-location-map__popup-subline {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--epic-muted);
}

.epic-location-map__directions {
	margin-top: 8px;
	font-size: var(--wp--preset--font-size--body);
}

.epic-location-map__directions a {
	color: var(--wp--preset--color--epic-red);
}

.epic-contact-list p {
	padding-left: 26px;
	text-indent: -26px;
}

.epic-contact-list__icon {
	width: 18px;
	height: 18px;
	margin-right: 8px;
	vertical-align: -4px;
	color: var(--wp--preset--color--epic-muted);
}

.epic-contact-list a {
	color: var(--wp--preset--color--epic-red);
}