/* Woody Pine Sports — theme chrome.
   Ported from the approved static build (mockups/assets/mega-menu.css).
   Page-level styles arrive with their blocks in later phases.

   Cascade note: this file is enqueued after global-styles-inline-css but block
   library CSS is printed on render, i.e. after this file. Anything that has to
   beat a core rule uses the repeated-class tie-break, never a bare !important.
*/

/* The approved build sets border-box globally; WordPress does not. Without it
   every border and padding is added on top of a width, which pushed the third
   carousel card out of view and widened the hero column by 64px. */
*,
*::before,
*::after { box-sizing: border-box; }

:root {
	--wps-line: rgba(8, 88, 50, .14);
	--wps-shadow: 0 18px 50px -22px rgba(6, 30, 18, .55);
	--wps-header-h: 84px;
	/* reference .wrap is 1420 border-box, i.e. contentSize + its own 2x32 gutter */
	--wps-wrap: calc(var(--wp--style--global--content-size) + 64px);
}

/* ---------- announcement ribbon ---------- */
.wps-ribbon {
	background: var(--wp--preset--color--amber);
	color: var(--wp--preset--color--cocoa);
	text-align: center;
	font-family: var(--wp--preset--font-family--display);
	font-size: 12px;
	letter-spacing: .15em;
	text-transform: uppercase;
	line-height: 1.4;
	padding: 8px 16px;
}
.wps-ribbon a { color: inherit; text-decoration: underline; }
.wps-ribbon a:hover { color: var(--wp--preset--color--pine); }
/* The reference ribbon only ever carries a short mockup notice, so it never had
   to wrap. Ours holds the real strapline, which went to two lines below ~400px
   and put 17px of chrome above every small phone. Scale it down instead. */
@media (max-width: 420px) {
	.wps-ribbon { font-size: 10.5px; letter-spacing: .08em; padding: 7px 10px; }
}

/* Full-bleed sections carry their own 64–80px of padding, so core's 22px block
   gap between them is dead space — invisible where two sections share a
   background, obvious wherever the colour changes (around Special Events and
   Who We Work With). The reference butts the bands straight together. The
   second rule covers a constrained section sitting between two full-bleed ones,
   which is how Our Sports is built. */
.entry-content > :is(.alignfull, .alignwide),
.entry-content > :is(.alignfull, .alignwide) + *,
main > :is(.alignfull, .alignwide),
main > :is(.alignfull, .alignwide) + * { margin-block-start: 0; }

/* ---------- header shell ---------- */
/* The sticky box must be the template-part wrapper: `.wps-header` alone is only
   as tall as itself, so it unstuck the moment the page scrolled past 118px. */
.wps-header-wrap {
	position: sticky;
	top: 0;
	z-index: 60;
}
/* Ribbon, header, main and footer are each self-spaced, so core's 22px block
   gap between them is dead height: above the fold on every phone, and as a
   stripe of page background between the last section and the footer. Repeated
   class because core's `.wp-site-blocks > *` margin is printed after this
   file. */
.wps-header-wrap.wps-header-wrap,
main.wp-block-group.wp-block-group,
.wp-block-template-part.wp-block-template-part { margin-block-start: 0; }
.wps-header {
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--wps-line);
}
.wps-header__row {
	position: relative;                 /* the mega panel resolves against this row */
	max-width: var(--wps-wrap);
	margin-inline: auto;
	/* Fixed, not min-height: the reference row is 84px and the 104px logo
	   medallion is meant to overflow it. min-height let the row grow to 104. */
	height: var(--wps-header-h);
	gap: 34px;
	padding-inline: 32px;
}
/* logo + menu travel together on the left; space-between pushes the CTAs right */
/* reference: 34px row gap + 18px nav offset = 52px from medallion to menu */
.wps-header__brand.wps-header__brand { gap: 52px; align-self: stretch; align-items: stretch; }
/* stretch is for the nav only — the medallion is centred in the row and hangs
   below it by its negative margin, which stretching flattened to 19px. */
.wps-header__logo.wps-header__logo { align-self: center; }
/* Site Logo is a core block: size it, do not fight its own width control.
   The medallion deliberately overhangs the header, so it needs to paint above
   the mega panel — z-index only counts on a positioned box. */
/* Reference geometry: a 104px medallion with -52px bottom margin centred in an
   84px row lands at top 49 and bottom 153, i.e. 35px below the header edge. */
/* Core prints .wp-block-site-logo (0,1,0) after this file and zeroes the
   margin, so a single-class rule ties and loses. Repeat the class. */
.wps-header__logo.wps-header__logo {
	position: relative;
	z-index: 90;
	margin-block-end: -52px;
	flex: none;
}
.wps-header__logo img { display: block; transition: width .22s ease, height .22s ease; }

/* Scrolled state: the medallion is a 104px flourish at the top of the page, but
   once the bar is pinned it overhangs a strip the visitor is reading through, so
   it shrinks and stops hanging as far. `is-stuck` is set in nav.js — CSS cannot
   detect a stuck sticky element. */
.wps-header-wrap.is-stuck .wps-header__logo.wps-header__logo { margin-block-end: -22px; }
.wps-header-wrap.is-stuck .wps-header__logo img { width: 72px !important; height: auto; }
.wps-header-wrap { transition: box-shadow .22s ease; }
.wps-header-wrap.is-stuck { box-shadow: 0 10px 30px -22px rgba(6, 30, 18, .55); }
@media (prefers-reduced-motion: reduce) {
	.wps-header__logo img,
	.wps-header-wrap { transition: none; }
}

/* ---------- top level ---------- */
/* stretch, not center: the list and its items inherit the row's full height,
   which is what gives the dropdown triggers a tall hover area */
.wps-nav { align-self: stretch; display: flex; }
.wps-nav__list {
	display: flex;
	align-items: stretch;               /* items fill the row, see below */
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
	height: 100%;
}
/* The item spans the full header row, exactly as the reference does (84px, not
   the 35px of the text alone). That is what keeps a dropdown open while the
   pointer travels from the label down to the panel — with a text-height item the
   pointer leaves the hover area immediately and the panel vanishes. */
.wps-nav__item--d0 {
	position: static;                   /* mega panel spans the row, not the item */
	display: flex;
	align-items: center;
	height: 100%;
}
.wps-nav__link--d0 {
	position: relative;
	padding: 6px 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--wp--preset--color--ink);
	transition: color .15s;
}
.wps-nav__link--d0::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 0;
	height: 2px;
	background: var(--wp--preset--color--amber);
	transition: width .25s;
}
.wps-nav__link--d0:hover { color: var(--wp--preset--color--pine); }
.wps-nav__item--d0:hover > .wps-nav__link--d0::after { width: 100%; }

/* current page — brand red, distinct from the hover green */
.wps-nav__item.is-current > .wps-nav__link--d0 { color: var(--wp--preset--color--brand-red); }
.wps-nav__item.is-current > .wps-nav__link--d0::after {
	width: 100%;
	background: var(--wp--preset--color--brand-red);
}
.wps-nav__chev { width: 12px; height: 12px; transition: transform .25s; }
.wps-nav__item--d0:hover > .wps-nav__link--d0 .wps-nav__chev { transform: rotate(180deg); }

/* ---------- panels ---------- */
.wps-mega,
.wps-drop {
	position: absolute;
	top: 100%;
	background: #fff;
	border: 1px solid var(--wps-line);
	border-top: 3px solid var(--wp--preset--color--pine);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .2s, transform .2s, visibility .2s;
	z-index: 80;
}
/* An invisible bridge over the gap between the row and the panel. Without it the
   pointer crosses dead space on its way down, :hover drops, and the panel closes
   before it can be reached. It hangs off the panel, which is positioned — the
   item is position:static so an ::after there would resolve against the row. */
.wps-mega::before,
.wps-drop::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -34px;
	height: 34px;
}

.wps-nav__item--d0:hover > .wps-mega,
.wps-nav__item--d0:hover > .wps-drop {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Sports: width follows the content and starts clear of the logo medallion. */
.wps-mega {
	left: 150px;
	right: auto;
	width: max-content;
	max-width: calc(100% - 64px);
	border-radius: 0 0 16px 16px;
	box-shadow: 0 34px 64px -30px rgba(6, 30, 18, .55);
	padding: 30px 36px;
}
.wps-mega__list {
	display: grid;
	grid-auto-flow: column;
	/* 260, not the mockup's 180 floor: our label font is narrower, so max-content
	   resolved to 177 and the panel came out 754px against the reference's 914.
	   Pinning the floor to the width the reference actually renders reproduces
	   it exactly — three 260px tracks, 30px gaps. */
	grid-auto-columns: minmax(260px, max-content);
	gap: 30px;
	align-items: start;
	margin: 0;
	padding: 0;
	list-style: none;
}
.wps-mega__heading {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--amber-deep);
	margin-bottom: 12px;
	padding-left: 10px;
}
.wps-mega__links { margin: 0; padding: 0; list-style: none; }

.wps-nav__link--d2 {
	display: flex;
	align-items: center;
	/* nowrap is what lets the grid track reach the label's full width: with
	   wrapping allowed the column's max-content collapsed to the 180px floor and
	   the panel came out 754px against the reference's 914. */
	white-space: nowrap;
	gap: 12px;
	padding: 9px 10px;
	border-radius: 10px;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .02em;
	transition: background .15s, color .15s;
}
.wps-nav__link--d2:hover { background: #eef3ee; color: var(--wp--preset--color--pine); }

/* The icon comes from the menu item's Description, emitted by the walker as
   --wps-icon. No icon set → no mark, and the row still lines up. */
.wps-nav__link.has-icon::before {
	content: "";
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 9px;
	background-color: #f1f5ef;
	background-image: var(--wps-icon);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 25px 25px;
	transition: background-color .15s;
}
.wps-nav__link--d2:hover.has-icon::before { background-color: var(--wp--preset--color--pine); }

/* Events: one narrow column */
.wps-drop {
	left: auto;
	min-width: 210px;
	border-radius: 0 0 12px 12px;
	box-shadow: 0 26px 50px -26px rgba(6, 30, 18, .55);
	padding: 8px;
}
.wps-drop__list { margin: 0; padding: 0; list-style: none; }
.wps-nav__link--d1 {
	display: block;
	padding: 10px 14px;
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
}
.wps-nav__link--d1:hover { background: #eef3ee; color: var(--wp--preset--color--pine); }

/* ---------- header buttons ---------- */
/* The Calendar button carries the same calendar mark as the reference. Core's
   Button block has no icon slot, so it is drawn as a background rather than
   replacing the block — the label, colours and link stay owner-editable. */
.wps-btn-cal .wp-block-button__link { display: inline-flex; align-items: center; gap: 9px; }
.wps-btn-cal .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 17px;
	height: 17px;
	background: currentColor;
	-webkit-mask: var(--wps-cal-icon) center / contain no-repeat;
	mask: var(--wps-cal-icon) center / contain no-repeat;
}
:root {
	--wps-cal-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M3 9h18M8 2v4M16 2v4'/%3E%3C/svg%3E");
}
.wps-header__cta .wp-block-buttons { gap: 14px; flex-wrap: nowrap; }
.wps-header__cta .wp-block-button__link { white-space: nowrap; }

/* ---------- social links (core/social-links) ---------- */
/* Outlined circles, as in the reference. Core prints its own block CSS after
   this file, so the sizing rules repeat the class to win the tie. */
.wps-social.wps-social { gap: 12px; margin: 0; }
.wps-social.wps-social .wp-block-social-link {
	width: 34px;
	height: 34px;
	margin: 0;
	border: 1px solid var(--wps-line);
	border-radius: 50%;
	background: transparent;
	transition: background-color .2s, border-color .2s;
}
.wps-social.wps-social .wp-block-social-link-anchor {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	padding: 0;
	color: var(--wp--preset--color--pine);
}
.wps-social.wps-social .wp-block-social-link-anchor svg { width: 15px; height: 15px; }
.wps-social.wps-social .wp-block-social-link:hover {
	background: var(--wp--preset--color--pine);
	border-color: var(--wp--preset--color--pine);
}
.wps-social.wps-social .wp-block-social-link:hover .wp-block-social-link-anchor { color: #fff; }

@media (max-width: 1080px) { .wps-social.wps-social { display: none; } }

/* ---------- phone action bar ---------- */
.wps-bar {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 55;
	box-shadow: 0 -12px 34px -20px rgba(6, 30, 18, .85);
}
.wps-bar a {
	flex: 1 1 50%;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 17px 10px calc(17px + env(safe-area-inset-bottom, 0px));
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .05em;
	white-space: nowrap;
	text-decoration: none;
}
.wps-bar svg { width: 17px; height: 17px; flex: none; }
.wps-bar .is-cal { background: var(--wp--preset--color--pine); color: #fff; }
.wps-bar .is-signup { background: var(--wp--preset--color--amber); color: var(--wp--preset--color--cocoa); }

/* ---------- responsive ---------- */
/* Between the nav breakpoint and ~1280 the row is tight enough that core's
   `flex-wrap: wrap` on the social list stacked the four icons into two rows.
   Repeated class: core prints .wp-block-social-links after this file. */
.wps-social.wps-social { flex-wrap: nowrap; }
@media (max-width: 1280px) {
	.wps-header__row { gap: 20px; }
	.wps-header__brand.wps-header__brand { gap: 34px; }
	.wps-header__cta.wps-header__cta { gap: 12px; }
}

@media (max-width: 1080px) {
	.wps-nav { display: none; }
	/* The brand box holds logo + (hidden) nav + burger. Letting it take the free
	   width and spacing its children apart is what moves the burger off the
	   logo's shoulder: on a phone that is the right edge, on a tablet it lands
	   just left of the CTAs instead of stranded mid-row. */
	.wps-header__brand.wps-header__brand {
		flex: 1 1 auto;
		gap: 12px;
		justify-content: space-between;
		align-items: center;
	}
}
@media (max-width: 640px) {
	/* 64px, not the desktop 84: with the nav gone the row carries a logo and a
	   burger, and the sticky tab bar reads this same variable. */
	:root { --wps-header-h: 64px; }
	.wps-header__row { padding-inline: 16px; gap: 12px; }
	/* reference lets the phone medallion hang only 5px below the row */
	.wps-header__logo.wps-header__logo { margin-block-end: -14px; }
	.wps-header__logo img { width: 60px; height: auto; }
	.wps-header-wrap.is-stuck .wps-header__logo.wps-header__logo { margin-block-end: -8px; }
	.wps-header-wrap.is-stuck .wps-header__logo img { width: 52px !important; }
	.wps-burger { margin-left: auto; }
	/* core prints .wp-block-group.is-layout-flex (0,2,0) after this file, so a
	   single-class rule ties and loses. Repeat the class instead of !important. */
	.wps-header__cta.wps-header__cta { display: none; }   /* the CTAs live in the action bar */
	.wps-bar { display: flex; }
	body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- footer ---------- */
.wps-foot {
	color: #cbb9a8;
	border-top: 4px solid var(--wp--preset--color--amber);
	padding-block: 54px 28px;
}
.wps-foot__cols { gap: 40px; }
.wps-foot__logo img { width: 132px; height: auto; display: block; }
.wps-foot__blurb { font-size: 15px; line-height: 1.6; max-width: 34ch; margin-top: 16px; }
/* Email and location sat at the body default of 18px while the blurb and the
   menus beside them were 15. */
.wps-foot__cols .wp-block-column > p { font-size: 15px; line-height: 1.6; }
/* The phone stays the large number it was; only the email and the location
   were meant to come down. */
.wps-foot__cols .wp-block-column > p:has(> .wps-foot__phone),
.wps-foot__phone { font-size: 24px; }
.wps-foot__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--amber);
	margin-bottom: 14px;
}
.wps-foot__list { list-style: none; margin: 0; padding: 0; }
.wps-foot__item { margin-bottom: 9px; }
.wps-foot__link {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	color: #cbb9a8;
	text-decoration: none;
	transition: color .15s;
}

/* same convention as the header: the mark comes from the item's Description */
.wps-foot__link.has-icon::before {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	background-image: var(--wps-icon);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.wps-foot__phone a {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 24px;
	color: #fff;
}
.wps-foot__legal {
	font-size: 13px;
	color: rgba(203, 185, 168, .75);
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding-top: 22px;
	margin-top: 38px;
}
/* theme.json's elements.link colour is a one-class rule; a one-class theme rule
   would tie it and lose, so scope footer links through the wrapper.
   The hover rules must out-weigh these (0,2,0) base rules, hence :hover on the
   same wrapper — an earlier :hover at (0,1,1) lost to them and did nothing. */
.wps-foot .wps-foot__link,
.wps-foot p a { color: #cbb9a8; }
.wps-foot .wps-foot__phone a { color: #fff; }

.wps-foot .wps-foot__link:hover,
.wps-foot p a:hover { color: var(--wp--preset--color--amber); }
.wps-foot .wps-foot__phone a:hover { color: var(--wp--preset--color--amber); }
.wps-foot .wps-foot__link.has-icon:hover::before { transform: scale(1.12); }
.wps-foot__link.has-icon::before { transition: transform .15s; }

@media (max-width: 1080px) {
	.wps-foot__cols { flex-wrap: wrap; }
}
@media (max-width: 640px) {
	.wps-foot { padding-block: 40px 24px; }
	.wps-foot__list--sports { columns: 1; }
}

/* ---------- hover states ---------- */
/* Core prints .wp-block-button__link styles after this file, so button hovers
   need the repeated class to win the tie. */
.wp-block-button__link.wp-block-button__link {
	transition: transform .15s, box-shadow .2s, filter .15s;
}
.wp-block-button__link.wp-block-button__link:hover {
	transform: translateY(-2px);
	filter: brightness(1.06);
	box-shadow: 0 10px 24px -12px rgba(6, 30, 18, .8);
}

/* ---------- home hero ---------- */
/* core/cover supplies the video, the min-height and the overlay colour from
   its own panel. Only the gradient shape and the type scale live here — the
   reference overlay is a two-stop gradient, which the panel cannot express. */
.wps-hero { align-items: flex-end; }
.wps-hero .wp-block-cover__background {
	background: linear-gradient(to top, rgba(4, 20, 12, .92) 0%, rgba(4, 20, 12, .35) 45%, transparent 75%) !important;
	/* beats the inline background-color core writes on this span */
}
/* Reference geometry: the inner column is capped at the content width (1420),
   centred in the 1440 hero, and carries 32px of its own padding — so copy
   starts at x=42. The cover's own padding panel stays at 0 and free. */
/* core prints `.wp-block-cover .wp-block-cover__inner-container` (0,2,0) after
   this file; repeat the class so the width cap survives the tie. */
.wps-hero .wp-block-cover__inner-container.wp-block-cover__inner-container {
	max-width: var(--wps-wrap);
	margin-inline: auto;
	padding-block-end: 70px;
	/* core zeroes horizontal padding on nested has-global-padding containers,
	   so the inset needs the same tripled selector as the width cap */
	padding-inline: 32px;
	color: #fff;
}
.wps-hero .wp-block-cover__inner-container.wp-block-cover__inner-container.wp-block-cover__inner-container {
	padding-inline: 32px;
	/* the reference wrap is border-box: 1420 total including its 32px inset.
	   Without this the cap applies to the content box and the column comes out
	   64px wider, shifting the copy 32px left at wide viewports. */
	box-sizing: border-box;
}
.wps-eyebrow {
	/* block-level, not inline-flex like the reference: a shrink-wrapped box loses
	   the constrained layout's margin-inline:auto to our own margin shorthand and
	   lands on the section padding edge, 10px left of the heading. */
	display: flex;
	align-items: center;
	gap: 13px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .22em;
	line-height: 1.02;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	margin: 0 0 16px;
}
/* the reference groups eyebrow + title in one .sec-head, so the title carries no
   top margin of its own; the eyebrow's 16px is the whole gap. */
.wps-eyebrow + .wp-block-heading { margin-top: 0; }
/* reference .sec-head carries margin-bottom:34; repeated class so core's own
   layout margin (printed later) does not win the tie */
.wps-section-title.wps-section-title + * { margin-top: 34px; }
.wps-eyebrow::before {
	content: "";
	width: 4px;
	height: 20px;
	background: var(--wp--preset--color--amber);
	border-radius: 2px;
	flex: none;
}

.wps-hero .wps-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 16px;
}
.wps-hero .wps-eyebrow::before {
	content: "";
	width: 4px;
	height: 20px;
	background: var(--wp--preset--color--amber);
	border-radius: 2px;
}
.wps-hero__title.wps-hero__title {
	font-size: clamp(48px, 7vw, 104px);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -.01em;
	color: #fff;
	/* No max-width: constrained layout centres any child narrower than the
	   content width with `margin-left:auto !important`, which pushed the title
	   to the middle. The line breaks come from the spans instead. */
	text-shadow: 0 6px 30px rgba(0, 0, 0, .4);
	margin: 0;
}
.wps-hero__title span { display: block; }
.wps-hero__title .is-amber { color: var(--wp--preset--color--amber); }
.wps-hero__cta { margin-top: 32px; gap: 16px; }
.wps-hero__cta .wp-block-button__link { font-size: 16px; padding: 16px 30px; }
.wps-hero__note {
	margin-top: 26px;
	gap: 28px;
}
.wps-hero__note p {
	font-family: var(--wp--preset--font-family--display);
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .92);
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}
.wps-hero__note strong {
	color: var(--wp--preset--color--amber);
	font-size: 26px;
	font-weight: 600;
}

@media (max-width: 640px) {
	.wps-hero { min-height: 540px !important; }   /* beats core's inline min-height */
	.wps-hero .wp-block-cover__inner-container { padding-block: 46px 40px; }
}

/* ---------- mobile menu ---------- */
.wps-burger {
	display: none;
	width: 44px;
	height: 44px;
	flex: none;
	align-items: center;
	justify-content: center;
	background: none;
	border: 1px solid var(--wps-line);
	border-radius: 10px;
	color: var(--wp--preset--color--pine);
	cursor: pointer;
	padding: 0;
	transition: background-color .15s, border-color .15s, color .15s;
}
.wps-burger span { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: .2s; }
.wps-burger span::before,
.wps-burger span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: .2s; }
.wps-burger span::before { top: -6px; }
.wps-burger span::after { top: 6px; }
.wps-burger:hover { background: var(--wp--preset--color--pine); border-color: var(--wp--preset--color--pine); color: #fff; }
.wps-burger[aria-expanded="true"] span { background: transparent; }
.wps-burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.wps-burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

.wps-mnav { position: fixed; inset: 0; z-index: 200; }
.wps-mnav[hidden] { display: none; }
.wps-mnav__scrim { position: absolute; inset: 0; background: rgba(4, 20, 12, .6); backdrop-filter: blur(3px); opacity: 0; transition: opacity .22s; }
.wps-mnav.is-open .wps-mnav__scrim { opacity: 1; }
.wps-mnav__panel {
	position: absolute; top: 0; right: 0; bottom: 0;
	width: min(340px, 86vw);
	background: #fff;
	box-shadow: -20px 0 60px -30px rgba(6, 30, 18, .8);
	transform: translateX(100%);
	transition: transform .26s cubic-bezier(.4, 0, .2, 1);
	display: flex; flex-direction: column; overflow-y: auto;
}
.wps-mnav.is-open .wps-mnav__panel { transform: none; }
.wps-mnav__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--wps-line); }
.wps-mnav__head span { font-family: var(--wp--preset--font-family--display); text-transform: uppercase; letter-spacing: .16em; font-size: 12px; color: var(--wp--preset--color--pine); }
.wps-mnav__close { width: 38px; height: 38px; border: 1px solid var(--wps-line); border-radius: 50%; background: none; color: var(--wp--preset--color--pine); cursor: pointer; display: grid; place-items: center; transition: .15s; }
.wps-mnav__close svg { width: 18px; height: 18px; }
.wps-mnav__close:hover { background: var(--wp--preset--color--pine); border-color: var(--wp--preset--color--pine); color: #fff; }
.wps-mnav__body { padding: 10px 12px 26px; }
.wps-mnav__list, .wps-mnav__sub { list-style: none; margin: 0; padding: 0; }
.wps-mnav__link {
	display: block; padding: 13px 12px; border-radius: 9px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500; font-size: 16px; text-transform: uppercase; letter-spacing: .03em;
	color: var(--wp--preset--color--ink); text-decoration: none;
}
.wps-mnav__link:hover { background: #eef3ee; color: var(--wp--preset--color--pine); }
.wps-mnav__link--d1, .wps-mnav__link--d2 { font-size: 15px; }
.wps-mnav__label {
	display: block; padding: 16px 12px 6px;
	font-family: var(--wp--preset--font-family--display);
	text-transform: uppercase; letter-spacing: .18em; font-size: 11px;
	color: var(--wp--preset--color--amber-deep);
}
/* top-level accordion */
.wps-mnav__item--parent + .wps-mnav__item--parent,
.wps-mnav__item--parent + .wps-mnav__item { border-top: 1px solid var(--wps-line); }
.wps-mnav__row { display: flex; align-items: center; }
.wps-mnav__row .wps-mnav__link { flex: 1 1 auto; }
.wps-mnav__toggle {
	flex: none;
	display: grid; place-items: center;
	min-width: 46px; min-height: 46px;
	padding: 0 12px;
	background: none; border: 0; cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500; font-size: 16px; text-transform: uppercase; letter-spacing: .03em;
	color: var(--wp--preset--color--ink);
	/* a label-carrying toggle owns the whole row, an icon-only one just its box.
	   justify-items:end lines both chevrons up on the same right edge — centring
	   the icon-only variant in its 46px box left it 5px inside the other. */
	grid-auto-flow: column; gap: 10px;
	justify-items: end;
	padding-right: 12px;
}
.wps-mnav__row > .wps-mnav__toggle:only-child { justify-content: space-between; width: 100%; padding: 13px 12px; }
.wps-mnav__toggle:hover { color: var(--wp--preset--color--pine); }
.wps-mnav__chev {
	width: 11px; height: 11px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .2s ease;
}
.wps-mnav__toggle[aria-expanded="true"] .wps-mnav__chev { transform: rotate(-135deg) translate(-2px, -2px); }
.wps-mnav__toggle[aria-expanded="true"] { color: var(--wp--preset--color--pine); }
/* The section opens whole — group labels and their links together — rather than
   nesting a second accordion the visitor would have to open twice. */
.wps-mnav__sub--d0 { padding: 2px 0 10px 6px; border-left: 2px solid var(--wps-line); margin-left: 12px; }
.wps-mnav__sub--d0[hidden] { display: none; }

/* same convention as everywhere else: the mark comes from the Description */
.wps-mnav__link.has-icon { display: flex; align-items: center; gap: 12px; }
.wps-mnav__link.has-icon::before {
	content: ""; flex: none; width: 26px; height: 26px;
	background: var(--wps-icon) center / contain no-repeat;
}

@media (max-width: 1080px) {
	.wps-burger { display: flex; }
}
@media (min-width: 1081px) {
	.wps-mnav { display: none; }
}
@media (max-width: 640px) {
	.wps-burger { width: 40px; height: 40px; }
}

/* ---------- special events cards ---------- */
/* background now comes from the group's own colour panel; the reference draws
   only a bottom rule, not both edges */
.wps-events { border-bottom: 1px solid var(--wps-line); }
.wps-league-listing iframe { border: 0; display: block; width: 100%; }
.wps-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 20px 0 62px; }
.wps-card {
	background: #fff;
	border: 1px solid var(--wps-line);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--wps-shadow);
	display: flex;
	flex-direction: column;
	transition: transform .18s, box-shadow .22s;
}
.wps-card:hover { transform: translateY(-4px); box-shadow: 0 26px 60px -28px rgba(6, 30, 18, .7); }
.wps-card__media { position: relative; aspect-ratio: 1; display: block; overflow: hidden; }
.wps-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.wps-card:hover .wps-card__media img { transform: scale(1.04); }
.wps-card__media::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(to top, rgba(0, 0, 0, .72), transparent 60%);
}
.wps-card__sport {
	position: absolute; left: 18px; bottom: 18px; z-index: 2;
	font-family: var(--wp--preset--font-family--display);
	font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: #fff;
}
.wps-card__body { padding: 20px 22px 24px; }
.wps-card__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.wps-card__chip {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500; text-transform: uppercase; letter-spacing: .12em; font-size: 11px;
	color: var(--wp--preset--color--pine); background: #e9f1ea;
	padding: 4px 11px; border-radius: 30px; line-height: normal;
}
.wps-card__date {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600; font-size: 14.5px; letter-spacing: .02em; line-height: normal;
	/* One colour for every sport, as in the reference. It used the per-sport
	   accent until now; the reference is amber-deep, which is 3.79:1 at this
	   size, so this takes the darker orange used elsewhere — 4.97:1. */
	color: #a8541f;
}
.wps-card__date svg { width: 15px; height: 15px; }
.wps-card__title { font-size: 21px; margin: 0 0 7px; }
.wps-card__title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.wps-card:hover .wps-card__title a { color: var(--wp--preset--color--pine); }
.wps-card__text { font-size: 18px; color: var(--wp--preset--color--body); line-height: 1.5; margin: 0 0 16px; }
/* Grid only. The homepage carousel shares .wps-card and its 18px body was
   measured against the reference, so the archive's smaller text is scoped to
   the listing rather than applied to both. */
.wps-cards--grid .wps-card__text { font-size: 15px; }
.wps-card__cta {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600; text-transform: uppercase; font-size: 13px; letter-spacing: .06em;
	color: var(--wp--preset--color--amber-deep); text-decoration: none;
}
.wps-card__cta:hover { color: var(--wp--preset--color--pine); }

@media (max-width: 1080px) { .wps-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .wps-cards { grid-template-columns: 1fr; } }

/* ---------- carousel ---------- */
/* Reference `.slider`: the track breaks out to the full viewport so cards run off
   the right edge, while the first card still lines up with the content column. */
.wps-carousel { position: relative; }
.wps-carousel__viewport {
	--wps-track-inset: max(32px, calc((100vw - var(--wp--style--global--content-size)) / 2));
	width: 100vw;
	margin-left: calc(50% - 50vw);
	/* `padding-block` takes at most two values; the `24px 52px 0` this had was
	   invalid, so the browser dropped the whole declaration and the computed
	   padding was already 0. Written as 0 explicitly — the vertical breathing
	   room now lives on .wps-cards, so the card shadow is not clipped. */
	padding-block: 0;
}
/* The track is a real scroll container, so touch and keyboard work without JS.
   Flex, not grid: a percentage in grid-auto-columns resolves against the whole
   scroll width, which made every card 1/6 of the row at 1600px. flex-basis
   resolves against the visible width, which is what "cards per view" means. */
.wps-carousel .wps-cards {
	display: flex;
	gap: 22px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* left inset = where the content column starts, so card 1 aligns with the heading */
	padding-inline: var(--wps-track-inset) 32px;
	/* without this the snapport starts at the padding edge and the track
	   auto-scrolls past the inset, putting card 1 flush against the viewport */
	scroll-padding-inline-start: var(--wps-track-inset);
}
.wps-carousel .wps-cards::-webkit-scrollbar { display: none; }
.wps-carousel .wps-card { flex: 0 0 calc((100% - 44px) / 3); scroll-snap-align: start; }

.wps-carousel__ctl { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.wps-carousel__dots { display: flex; gap: 8px; }
.wps-carousel__dots[hidden] { display: none; }
.wps-carousel__dots button {
	width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%;
	background: rgba(8, 88, 50, .25); cursor: pointer; transition: .2s;
}
.wps-carousel__dots button.is-on { background: var(--wp--preset--color--pine); width: 26px; border-radius: 5px; }

.wps-carousel__arrows { display: flex; gap: 8px; margin-left: auto; }
.wps-carousel__arrows button {
	width: 42px; height: 42px; border-radius: 50%;
	border: 1px solid var(--wps-line); background: #fff;
	color: var(--wp--preset--color--pine);
	cursor: pointer; display: grid; place-items: center; transition: .2s;
}
.wps-carousel__arrows button svg { width: 18px; height: 18px; }
.wps-carousel__arrows button:hover { background: var(--wp--preset--color--pine); color: #fff; border-color: var(--wp--preset--color--pine); }

@media (min-width: 1441px) { .wps-carousel .wps-card { flex: 0 0 calc((100% - 66px) / 4); } }
@media (max-width: 1080px) { .wps-carousel .wps-card { flex: 0 0 calc((100% - 22px) / 2); } }
@media (max-width: 640px)  { .wps-carousel .wps-card { flex: 0 0 100%; } }

/* ---------- page hero (archive / inner pages) ---------- */
.wps-page-hero {
	position: relative;
	background: linear-gradient(160deg, var(--wp--preset--color--pine), var(--wp--preset--color--pine-deep));
	color: #fff;
	padding-block: 56px 50px;
	overflow: hidden;
}
/* block-level for the same reason as the base rule: a shrink-wrapped inline-flex
   box loses the constrained layout's margin-inline:auto and hugs the padding edge,
   landing 10px left of the heading. */
.wps-page-hero .wps-eyebrow {
	display: flex; align-items: center; gap: 13px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
	color: #fff; margin-bottom: 14px;
}
.wps-page-hero .wps-eyebrow::before { content: ""; width: 4px; height: 20px; background: var(--wp--preset--color--amber); border-radius: 2px; }
.wps-page-hero__title.wps-page-hero__title {
	font-size: clamp(38px, 5vw, 68px); font-weight: 700; color: #fff; line-height: 1; margin: 0;
}
/* Capped at 56ch, so core's `margin-inline: auto !important` on constrained
   children centres it — the lead drifted 382px right of the heading. Pin the
   left edge; repeated class because core's rule is !important too. */
.wps-page-hero__lead.wps-page-hero__lead {
	font-size: 19px;
	color: rgba(255, 255, 255, .93);
	margin-top: 14px;
	max-width: 56ch;
	/* Reproduce the offset core's constrained layout gives a full-width child, so
	   the lead's left edge lines up with the heading instead of being centred. */
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-right: auto !important;
}

/* ---------- events listing ---------- */
.wps-cards--grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.wps-listing__more { margin-top: 36px; gap: 14px; flex-wrap: wrap; }

/* ---------- single event ---------- */
/* core/breadcrumbs renders a bare list; the separator is ours to draw */
/* the logo medallion overhangs the header by 35px, so the first row of an
   inner page needs clearance or the crumb lands under it */
.wps-single { padding-top: max(var(--wp--preset--spacing--50), 62px) !important; }
.wps-crumb { font-family: var(--wp--preset--font-family--display); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: var(--wp--preset--color--muted); margin-bottom: 26px; }
.wps-crumb ol, .wps-crumb ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0; }
.wps-crumb li:not(:last-child)::after { content: "·"; margin: 0 8px; opacity: .6; }
.wps-crumb a { color: var(--wp--preset--color--muted); text-decoration: none; transition: color .15s; }
/* Colour alone (muted grey → pine) was too quiet to register as a hover at
   12px uppercase, so the underline carries it. Repeated class: theme.json's
   elements.link is a one-class rule printed after this file. */
.wps-crumb a:hover,
.wps-crumb a:focus-visible {
	color: #a8541f;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1.5px;
}
.wps-crumb [aria-current="page"] { color: var(--wp--preset--color--pine); }

/* The page hero paints a dark pine gradient, so the default muted-on-cream
   crumb was dark on dark. Same treatment as the sport hero. */
.wps-page-hero .wps-crumb { color: rgba(255, 255, 255, .9); margin-bottom: 18px; }
.wps-page-hero .wps-crumb a { color: inherit; }
.wps-page-hero .wps-crumb a:hover,
.wps-page-hero .wps-crumb a:focus-visible { color: var(--wp--preset--color--amber); }
.wps-page-hero .wps-crumb [aria-current="page"] { color: #fff; }
.wps-single__cols { gap: 46px; }
.wps-single__img img { width: 100%; height: auto; display: block; border-radius: 18px; border: 1px solid var(--wps-line); box-shadow: var(--wps-shadow); }
.wps-single__title.wps-single__title { font-size: clamp(32px, 4.4vw, 56px); font-weight: 700; color: var(--wp--preset--color--pine); line-height: 1.02; margin: 0 0 16px; }
/* The event body sits under the title. The excerpt is the archive card's
   summary and appears there only, so this has to read as full copy: normal body
   size, real spacing between paragraphs, headings and lists intact. */
.wps-single__body { font-size: 18px; line-height: 1.6; color: var(--wp--preset--color--body); max-width: 52ch; }
.wps-single__body > * { margin-block: 0; }
.wps-single__body > * + * { margin-top: 14px; }
.wps-single__body :is(h2, h3, h4) {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
	color: var(--wp--preset--color--pine); line-height: 1.2;
}
.wps-single__body h2 { font-size: 24px; }
.wps-single__body h3 { font-size: 19px; }
.wps-single__body h4 { font-size: 16px; }
.wps-single__body :is(h2, h3, h4) + * { margin-top: 8px; }
.wps-single__body > * + :is(h2, h3, h4) { margin-top: 24px; }
.wps-single__body :is(ul, ol) { padding-left: 20px; }
.wps-single__body li + li { margin-top: 6px; }
.wps-single__body a { color: #a8541f; }
.wps-event { margin-top: 26px; }
/* The chip sits above the H1, as in the reference. Its own paragraph so the
   template can order it against core blocks. */
.wps-event__sport-line.wps-event__sport-line { margin: 0 0 14px; }
.wps-event__sport {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: 11px;
	color: #fff; background: var(--wps-accent, var(--wp--preset--color--pine));
	padding: 6px 12px; border-radius: 30px;
}
.wps-event__sport img { width: 20px; height: 20px; background: #fff; border-radius: 50%; }
.wps-event__facts { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
/* Label above value, with the field's own icon in the gutter. A row of bare
   bullets left "Spring" with nothing to say what it was. */
.wps-event__fact {
	position: relative;
	padding: 11px 0 11px 42px;
	border-bottom: 1px solid var(--wps-line);
}
.wps-event__fact:last-child { border-bottom: 0; }
.wps-event__fact::before {
	content: "";
	position: absolute;
	left: 0; top: 13px;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wps-accent, var(--wp--preset--color--pine)) 12%, #fff);
}
.wps-event__fact::after {
	content: "";
	position: absolute;
	left: 6px; top: 19px;
	width: 14px; height: 14px;
	background: var(--wps-accent, var(--wp--preset--color--pine));
	-webkit-mask: var(--wps-fic) center / contain no-repeat;
	mask: var(--wps-fic) center / contain no-repeat;
}
.wps-event__fact--date { --wps-fic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224.5%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%209.5h18M8%202.5v4M16%202.5v4%22%2F%3E%3C%2Fsvg%3E"); }
.wps-event__fact--season { --wps-fic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202v20M2%2012h20M5%205l14%2014M19%205%205%2019%22%2F%3E%3C%2Fsvg%3E"); }
.wps-event__fact--venue { --wps-fic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2010c0%207-9%2013-9%2013s-9-6-9-13a9%209%200%200%201%2018%200z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); }
.wps-event__fact-k {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
	font-size: 11px; color: #a8541f;
}
.wps-event__fact-v {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600; font-size: 18px; line-height: 1.25;
	color: var(--wp--preset--color--pine);
}
.wps-event__cta { margin-top: 26px; }
.wps-single__back { margin-top: 34px; font-family: var(--wp--preset--font-family--display); text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }

/* Four across, unlike the archive's three: this is a footer strip, not the
   listing, so the cards are meant to read as secondary. */
.wps-other { margin-top: 78px; padding-top: 46px; border-top: 1px solid var(--wps-line); }
.wps-other .wps-section-title { margin-bottom: 30px; }
.wps-cards--four.wps-cards--four { grid-template-columns: repeat(4, 1fr); gap: 20px; }

@media (max-width: 1080px) {
	.wps-cards--grid { grid-template-columns: repeat(2, 1fr); }
	.wps-cards--four.wps-cards--four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px)  {
	.wps-cards--grid { grid-template-columns: 1fr; }
	.wps-cards--four.wps-cards--four { grid-template-columns: 1fr; }
	.wps-single__cols { gap: 28px; }
}

/* ---------- our sports tiles ---------- */
/* Plain Gutenberg: a Group per tile with a core Image and a paragraph whose
   text is the link. The owner sets each destination in the link panel; the
   whole tile is clickable via a stretched link, so there is only one URL to
   maintain per sport. */
.wps-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
/* the group's block layout is flow, so core margins every child after the first;
   as grid items those margins offset the whole row. Repeated class beats the tie. */
.wps-tiles.wps-tiles > * { margin-block: 0; }
.wps-tile {
	position: relative;
	aspect-ratio: 1;
	border-radius: 14px;
	background: #fff;
	border: 1px solid var(--wps-line);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	overflow: hidden;
	transition: .25s;
}
.wps-tile::before {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(160deg, var(--wp--preset--color--pine), var(--wp--preset--color--pine-deep));
	opacity: 0; transition: .25s;
}
.wps-tile:hover { transform: translateY(-5px); box-shadow: var(--wps-shadow); border-color: transparent; }
.wps-tile:hover::before { opacity: 1; }
/* no position here: the label must NOT become the containing block, or the
   stretched link below only covers the text. Flex items honour z-index. */
.wps-tile__ico, .wps-tile__name { z-index: 2; margin: 0; }
.wps-tile__ico img { width: 64px; height: 64px; object-fit: contain; display: block; }
.wps-tile__name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500; text-transform: uppercase; font-size: 14px; letter-spacing: .04em;
	text-align: center; line-height: 1.2;
}
/* stretched link: one destination per tile, the whole card is the hit area */
.wps-tile__name a { color: var(--wp--preset--color--ink); text-decoration: none; }
.wps-tile__name a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.wps-tile:hover .wps-tile__name a { color: #fff; }

@media (max-width: 1080px) { .wps-tiles { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) {
	.wps-tiles { grid-template-columns: repeat(3, 1fr); gap: 10px; }
	/* square tiles clip two-word names on a phone — let them grow */
	.wps-tile { aspect-ratio: auto; padding: 16px 6px; gap: 8px; }
	/* The Image block writes the panel width as an inline style (width:64px), and
	   an inline style beats any selector. The panel cannot express a per-breakpoint
	   size, so this is the documented exception — desktop still follows the panel. */
	.wps-tile__ico img { width: 46px !important; height: 46px; }
	.wps-tile__name { font-size: 11px; letter-spacing: .02em; }
}

/* ---------- videos ---------- */
/* Plain core Columns + Image blocks: the owner swaps the picture, the title and
   the link in the panel. The play badge and the lightbox are ours. */
.wps-vid-grid { gap: 20px; }
.wps-vid { flex-basis: 0; }
.wps-vid__thumb { margin: 0; position: relative; border-radius: 14px; overflow: hidden; }
.wps-vid__thumb a { display: block; position: relative; }
.wps-vid__thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: transform .35s; }
.wps-vid:hover .wps-vid__thumb img { transform: scale(1.04); }
.wps-vid__thumb a::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(to top, rgba(0, 0, 0, .5), transparent 55%);
}
.wps-vid__thumb a::after {
	content: ""; position: absolute; top: 50%; left: 50%; z-index: 2;
	width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
	background: rgba(255, 255, 255, .92) var(--wps-play) center / 22px 22px no-repeat;
	transition: transform .2s;
}
.wps-vid:hover .wps-vid__thumb a::after { transform: scale(1.08); }
:root {
	--wps-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23085832'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}
.wps-vid__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600; font-size: 15px; text-transform: uppercase; letter-spacing: .02em;
	color: var(--wp--preset--color--ink); margin-top: 12px; line-height: 1.25;
}
.wps-videos__more { margin-top: 30px; }

/* lightbox */
.wps-lb { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; padding: 22px; background: rgba(4, 14, 9, .86); backdrop-filter: blur(6px); }
.wps-lb.is-open { display: flex; }
.wps-lb__box { width: min(960px, 100%); position: relative; }
.wps-lb__frame { position: relative; padding-top: 56.25%; border-radius: 14px; overflow: hidden; background: #000; }
.wps-lb__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wps-lb__close { position: absolute; top: -48px; right: 0; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; display: grid; place-items: center; }
.wps-lb__close:hover { background: var(--wp--preset--color--amber); color: var(--wp--preset--color--cocoa); border-color: var(--wp--preset--color--amber); }
.wps-lb__close svg { width: 20px; height: 20px; }

/* Core makes Columns a single non-wrapping row above 782px:
     @media (min-width:782px){ .wp-block-columns { flex-wrap: nowrap !important } }
     @media (min-width:782px){ .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column
                               { flex-basis: 0; flex-grow: 1 } }
   The first carries !important, so no amount of specificity beats it — this is
   one of the sanctioned cases. flex-grow is reset too, otherwise the columns
   stretch back to fill the row and the 50% basis has no effect. */
@media (max-width: 1080px) {
	.wps-vid-grid.wps-vid-grid { flex-wrap: wrap !important; }
	.wps-vid.wps-vid { flex-basis: calc(50% - 10px) !important; flex-grow: 0 !important; }
}
@media (max-width: 640px) {
	.wps-vid.wps-vid { flex-basis: 100% !important; }
}

/* ---------- how it works ---------- */
/* Three layers, bottom to top: solid brown, the video at 50%, then a gradient.
   Only the middle and top ones are panel-expressible (video = Cover media,
   gradient = Cover overlay), so the brown that shows through the half-
   transparent video is set here. Reference: .how / .how-bg / .how::before. */
.wps-how { background-color: #2b2018; }
.wps-how .wp-block-cover__video-background { opacity: .5; }
.wps-how .wp-block-cover__inner-container.wp-block-cover__inner-container {
	max-width: var(--wps-wrap);
	margin-inline: auto;
	padding-inline: 32px;
	box-sizing: border-box;
	color: #fff;
}
.wps-how .wps-eyebrow { color: #fff; }
.wps-section-title--light { color: #fff !important; }   /* beats theme.json elements.heading colour */
.wps-steps { gap: 30px; }
.wps-step { position: relative; }
.wps-step:not(:last-child)::after {
	content: "";
	position: absolute; top: 30px; right: -15px;
	width: 30px; height: 2px;
	background: rgba(255, 255, 255, .2);
}
/* the class alone loses to `.wps-step p` below — same origin, (0,1,0) vs (0,2,0) */
.wps-step .wps-step__n {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700; font-size: 64px; line-height: 1;
	color: rgba(224, 132, 60, .9); margin: 0;
}
.wps-step__title.wps-step__title { font-size: 24px; color: #fff; margin: 10px 0; }
.wps-step p { font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .93); margin: 0; }

/* ---------- partners ---------- */
.wps-partners { gap: 26px; }
/* core gives every column flex-basis:0, but a flex base can never fall below the
   item's own padding — the CTA's 64px made it 476 wide against the cards' 414.
   The reference is a 3x1fr grid, so pin the equal share explicitly. An owner-set
   column width still wins: core writes that one inline. */
.wps-partners.wps-partners > .wp-block-column { flex: 0 0 calc(33.3333% - 17.334px); }   /* repeated class: core's own rule ties and it loads later */
.wps-partner {
	background: #fff; border: 1px solid var(--wps-line); border-radius: 16px;
	overflow: hidden; box-shadow: var(--wps-shadow);
	transition: transform .2s, box-shadow .2s;
}
.wps-partner:hover { transform: translateY(-4px); box-shadow: 0 26px 60px -28px rgba(6, 30, 18, .7); }
.wps-partner__img { margin: 0; }
/* linkDestination=custom wraps the image in an inline <a>, whose line box adds 8px */
.wps-partner__img a { display: block; }
.wps-partner__img img { width: 100%; aspect-ratio: 584 / 372; object-fit: cover; display: block; }
.wps-partner__body {
	margin: 0;   /* core hands the group a 0.67em top margin the reference does not have */
	padding: 22px 24px 24px;
	display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.wps-partner__body > * { margin: 0; }
.wps-partner__title.wps-partner__title { font-size: 19px; color: var(--wp--preset--color--pine); margin: 0; line-height: 1.1; letter-spacing: .02em; }
.wps-partner p { font-size: 18px; color: var(--wp--preset--color--body); line-height: 1.55; margin: 0; }
/* `.wps-partner p` above is (0,2,0) and would keep this at 18px */
.wps-partner__body > .wps-partner__link { font-size: 13px; line-height: normal; margin-top: 2px; }
.wps-partner__link a {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600; text-transform: uppercase; font-size: 13px; letter-spacing: .05em;
	color: var(--wp--preset--color--amber-deep); text-decoration: none;
}
.wps-partner__link a:hover { color: var(--wp--preset--color--pine); }

.wps-partner-cta {
	background: linear-gradient(160deg, var(--wp--preset--color--pine), var(--wp--preset--color--pine-deep));
	border-radius: 16px; padding: 34px 32px; color: #fff;
	display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
	gap: 14px;   /* reference spaces the four children with a gap, not margins */
}
.wps-partner-cta > * { margin: 0; }
.wps-partner-cta { position: relative; overflow: hidden; }
.wps-partner-cta::after {
	content: ""; position: absolute; right: -30px; bottom: -30px;
	width: 160px; height: 160px; border-radius: 50%; background: rgba(224, 132, 60, .14);
}
.wps-partner-cta > * { position: relative; z-index: 1; }
.wps-partner-cta__ico { width: 54px; height: 54px; color: var(--wp--preset--color--amber); }
.wps-partner-cta__ico svg { width: 100%; height: 100%; }
.wps-partner-cta h3 { color: #fff !important; font-size: 25px; margin: 0; line-height: 1.05; }
.wps-partner-cta p { font-size: 18px; color: rgba(255, 255, 255, .93); line-height: 1.55; margin: 0; }
.wps-partner-cta .wp-block-buttons { margin-top: 6px; }
/* theme.json's button size (15px) is the hero's; the reference sets this one to 13 */
.wps-partner-cta .wp-element-button { font-size: 13px; letter-spacing: .04em; }

@media (max-width: 1080px) {
	.wps-steps.wps-steps, .wps-partners.wps-partners { flex-wrap: wrap !important; }
	/* the basis must match each row's own gap: steps 30px, partners 26px */
	/* reference tightens the partner gap to 22 here, so the basis follows */
	.wps-partners.wps-partners { gap: 22px; }
	.wps-partner.wps-partner, .wps-partner-cta.wps-partner-cta { flex-basis: calc(50% - 11px) !important; flex-grow: 0 !important; }
	/* reference drops the steps straight to one column here, gap 24 */
	.wps-steps.wps-steps { gap: 24px; }
	.wps-step.wps-step { flex-basis: 100% !important; flex-grow: 0 !important; }
	.wps-step:not(:last-child)::after { display: none; }
}
@media (max-width: 640px) {
	.wps-partner.wps-partner, .wps-partner-cta.wps-partner-cta { flex-basis: 100% !important; }
}

/* ---------- sport page tabs ---------- */
/* Ported from basketball.html. The band pins directly under the sticky header;
   both headers measure 85px, so the reference's 84px offset transfers as-is. */
.wps-tabwrap {
	position: sticky;
	/* Follows the header rather than a hardcoded 84, so the phone header's
	   shorter bar does not leave a gap above the tabs. */
	top: var(--wps-header-h);
	z-index: 50;
	background: var(--wp--preset--color--pine);
	box-shadow: 0 12px 30px -20px rgba(6, 30, 18, .75);
	/* Full-bleed band. Core sets `margin-left/right: auto !important` on every
	   direct child of a constrained container, which beats a plain declaration
	   and even an inline style — so breaking out needs !important of its own.
	   Same override as the calendar section. */
	width: 100vw;
}
/* Repeated class AND !important: core's constrained rule is also !important, and
   on an equal-specificity tie the later stylesheet wins — core prints after this
   file, so matching its weight is not enough. */
.wps-tabwrap.wps-tabwrap {
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	/* core caps the same element at contentSize; below 1356px the cap never binds,
	   which is why this only shows up on wide screens */
	max-width: none;
}
.wps-tabbar {
	max-width: var(--wps-wrap);
	margin: 0 auto;
	padding: 0 32px;
	display: flex;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	transition: padding-left .18s;
}
.wps-tabbar::-webkit-scrollbar { display: none; }
/* the logo medallion hangs below the header, so once the bar is pinned the row
   shifts clear of it — otherwise the logo covers the first tab */
.wps-tabwrap.is-stuck .wps-tabbar { padding-left: 156px; }
.wps-tab {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: 14px;
	padding: 19px 26px;
	border: none;
	border-bottom: 3px solid transparent;
	background: transparent;
	color: rgba(255, 255, 255, .9);
	cursor: pointer;
	transition: .15s;
	white-space: nowrap;
}
.wps-tab:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.wps-tab.is-active { color: #fff; background: rgba(255, 255, 255, .11); border-bottom-color: var(--wp--preset--color--amber); }
.wps-pane[hidden] { display: none; }
.wps-pane.is-active { animation: wps-tab-fade .18s ease-out; }
@keyframes wps-tab-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* the editor shows every panel stacked, so it needs a visible seam */
.wps-tabs-editor__hint { font-size: 13px; color: var(--wp--preset--color--muted); }

/* hero video sits under the gradient, which stays as the fallback and keeps the
   white text readable no matter how bright a frame is */
/* repeated class: the hero group is a constrained layout, and core caps every
   direct child at contentSize — which crops this to 1356px inside a 1440px band */
.wps-page-hero__video.wps-page-hero__video {
	max-width: none;
}
/* Safari paints its own play triangle over a paused inline video. When autoplay
   is refused the poster should read as a still image, not a broken player. */
.wps-page-hero__video::-webkit-media-controls-start-playback-button,
.wp-block-cover__video-background::-webkit-media-controls-start-playback-button {
	display: none !important;
	-webkit-appearance: none;
}
.wps-page-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	opacity: .38;
}
.wps-page-hero > :not(.wps-page-hero__video) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
	.wps-page-hero__video { display: none; }
}

/* ---------- sport page hero ---------- */
/* Ported from basketball.html `.hero`. Bigger than .wps-page-hero on purpose:
   the sport page leads with a full-bleed video band, the archive pages do not. */
.wps-sport-hero {
	position: relative;
	color: #fff;
	overflow: hidden;
	background: var(--wp--preset--color--pine-deep);
	padding: 0 !important;   /* the inner column owns the padding, as in the reference */
}
/* Full opacity here, unlike the text heroes: those dim the clip to .38 because
   nothing else separates it from the copy, while this hero has the ::after
   gradient below doing that job. Dimming both left the reference's bright right
   side a flat dark green. object-position matches `.hero-video` in the mockup. */
.wps-sport-hero .wps-page-hero__video {
	opacity: 1;
	object-position: center 35%;
}
.wps-sport-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(6, 30, 18, .94) 0%, rgba(6, 30, 18, .76) 38%, rgba(6, 30, 18, .34) 70%, rgba(6, 30, 18, .12) 100%),
		linear-gradient(to top, rgba(4, 20, 12, .55), transparent 52%);
}
.wps-sport-hero > :not(.wps-page-hero__video) {
	position: relative;
	z-index: 2;
}
.wps-sport-hero__inner.wps-sport-hero__inner {
	max-width: var(--wps-wrap);
	margin-inline: auto !important;   /* beats core's auto-margin rule, same as elsewhere */
	padding: 70px 32px 60px;
	min-height: 440px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
}
.wps-sport-hero .wps-crumb {
	font-family: var(--wp--preset--font-family--display);
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: 12px;
	color: rgba(255, 255, 255, .9);
	margin: 0 0 16px;
}
.wps-sport-hero .wps-crumb a { color: inherit; text-decoration: none; }
.wps-sport-hero .wps-crumb a:hover { color: var(--wp--preset--color--amber); }
.wps-sport-hero__title.wps-sport-hero__title {
	font-size: clamp(48px, 8vw, 110px);
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: .98;
	color: #fff;
	margin: 0;
}
.wps-sport-hero__title .is-amber { color: var(--wp--preset--color--amber); }
.wps-sport-hero__lead {
	font-size: clamp(18px, 2vw, 21px);
	color: rgba(255, 255, 255, .9);
	margin-top: 18px;
	max-width: 54ch;
	line-height: 1.5;
}
.wps-sport-hero .wp-block-buttons { margin-top: 28px; gap: 14px; }
.wps-sport-hero .wp-element-button { font-size: 16px; padding: 16px 28px; }

/* The tab band sits flush against the hero, and the panels carry the section
   padding — reference measures 0 / 0 / 66px, ours were 22 / 22 / 0 from blockGap. */
.wps-tabwrap.wps-tabwrap,
.wps-panes.wps-panes { margin-block-start: 0 !important; }
/* the hero's inner column is a constrained child too, and its block gap was
   adding 22px to the band's height */
.wps-sport-hero__inner.wps-sport-hero__inner { margin-block-start: 0 !important; }
.wps-sport-hero .wps-crumb { line-height: 1.4; }
.wps-sport-hero__lead.wps-sport-hero__lead { margin-top: 18px; }
.wps-panes { padding-block: 66px; }
.wps-panes > .wps-pane > * { margin-block-start: 0; }

/* ---------- sport page pane content ---------- */
/* Ported from basketball.html. `--ball` is the reference's bullet colour. */
.wps-includes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.wps-inc {
	background: #fff;
	border: 1px solid var(--wps-line);
	border-radius: 14px;
	padding: 22px 18px;
	text-align: center;
	box-shadow: 0 12px 34px -26px rgba(6, 30, 18, .5);
}
.wps-inc__ico {
	width: 46px; height: 46px;
	margin: 0 auto 12px;
	display: grid; place-items: center;
	border-radius: 11px;
	background: #eef3ee;
	color: var(--wp--preset--color--pine);
}
.wps-inc__ico svg { width: 24px; height: 24px; }
.wps-inc h3 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600; text-transform: uppercase; font-size: 14px;
	color: var(--wp--preset--color--ink); letter-spacing: .02em; line-height: 1.15;
	margin: 0;
}
.wps-pane-h.wps-pane-h { font-size: 26px; color: var(--wp--preset--color--pine); margin: 44px 0 12px; }
.wps-pane-p { font-size: 18px; line-height: 1.6; color: var(--wp--preset--color--body); max-width: 76ch; margin-bottom: 34px; }
.wps-rules { max-width: 96ch; }
.wps-rule-head.wps-rule-head {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600; text-transform: uppercase; letter-spacing: .09em; font-size: 15px;
	color: var(--wp--preset--color--amber-deep);
	margin: 32px 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--wps-line);
}
.wps-rule-head.wps-rule-head:first-child { margin-top: 0; }
.wps-rule-list {
	list-style: none;
	display: flex; flex-direction: column; gap: 11px;
	margin: 0; padding: 0;
}
.wps-rule-list li {
	font-size: 18px; line-height: 1.6;
	color: var(--wp--preset--color--body);
	padding-left: 20px; position: relative;
}
.wps-rule-list li::before {
	content: ""; position: absolute; left: 0; top: 9px;
	width: 7px; height: 7px; border-radius: 50%;
	background: #b5651d;
}
.wps-rule-list li b { font-weight: 700; color: var(--wp--preset--color--ink); }
/* Doubled class for the same reason as .wps-sec-lead: the 80ch cap lets the
   constrained layout's `margin-inline: auto !important` centre the panel, which
   left it 278px off the heading on the standalone Coming-soon pages. */
.wps-pane-empty.wps-pane-empty {
	background: #fff;
	border: 1px dashed var(--wps-line);
	border-radius: 14px;
	padding: 34px 30px;
	max-width: 80ch;
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-right: auto !important;
}
.wps-pane-empty p { color: var(--wp--preset--color--body); font-size: 18px; line-height: 1.6; margin: 0; }

/* contact details — same card chrome as the fact cards on Corporate Games.
   The icon is a CSS mask, not an inline <svg> block: it is decoration tied to
   the card's modifier class, so every editable word stays a real block and the
   owner never has to touch raw markup to keep the icon. */
.wps-contact.wps-contact { gap: 22px; margin-top: 34px; }
.wps-contact-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--wps-line);
	border-top: 4px solid var(--wp--preset--color--amber);
	border-radius: 16px;
	padding: 28px 30px 30px 92px;
	transition: transform .2s, box-shadow .22s;
}
.wps-contact-card:hover { transform: translateY(-3px); box-shadow: var(--wps-shadow); }
.wps-contact-card::before {
	content: "";
	position: absolute;
	left: 28px; top: 28px;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--wp--preset--color--cream);
	box-shadow: inset 0 0 0 1px var(--wps-line);
}
.wps-contact-card::after {
	content: "";
	position: absolute;
	left: 39px; top: 39px;
	width: 22px; height: 22px;
	background: #a8541f;
	-webkit-mask: var(--wps-ic) center / contain no-repeat;
	mask: var(--wps-ic) center / contain no-repeat;
}
.wps-contact-card--phone { --wps-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.9v3a2%202%200%200%201-2.2%202%2019.8%2019.8%200%200%201-8.6-3.1%2019.5%2019.5%200%200%201-6-6A19.8%2019.8%200%200%201%202.1%204.2%202%202%200%200%201%204.1%202h3a2%202%200%200%201%202%201.7c.1%201%20.4%201.9.7%202.8a2%202%200%200%201-.5%202.1L8.1%209.9a16%2016%200%200%200%206%206l1.3-1.3a2%202%200%200%201%202.1-.4c.9.3%201.8.6%202.8.7a2%202%200%200%201%201.7%202z%22%2F%3E%3C%2Fsvg%3E"); }
.wps-contact-card--mail { --wps-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%2220%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m22%207-10%206L2%207%22%2F%3E%3C%2Fsvg%3E"); }
.wps-contact-card--form { --wps-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z%22%2F%3E%3Cpath%20d%3D%22M8%209h8M8%2013h5%22%2F%3E%3C%2Fsvg%3E"); }
.wps-contact-card--venue { --wps-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2010c0%207-9%2013-9%2013s-9-6-9-13a9%209%200%200%201%2018%200z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); }
.wps-contact-card__label.wps-contact-card__label {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600; text-transform: uppercase; letter-spacing: .09em;
	font-size: 13px; color: #a8541f; margin: 0 0 8px;
}
.wps-contact-card .wps-contact-card__value {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700; font-size: 26px; line-height: 1.15;
	color: var(--wp--preset--color--pine); margin: 0; word-break: break-word;
}
.wps-contact-card__value a { color: inherit; text-decoration: none; }
.wps-contact-card__value a:hover,
.wps-contact-card__value a:focus-visible { text-decoration: underline; }
.wps-contact-card__note.wps-contact-card__note {
	font-size: 16px; line-height: 1.55;
	color: var(--wp--preset--color--body); margin: 10px 0 0;
}
/* The two link cards carry a button where the others carry a value line;
   matching the offset keeps all four notes on one baseline. */
.wps-contact-card .wp-block-buttons { margin-top: 2px; }
.wps-contact-card .wp-block-button__link { font-size: 14px; padding: 12px 20px; }

/* Two by two at every width, not four across: core/columns lays its children out
   in one flex row, so the wrap and the basis both have to be forced. */
.wps-contact.wps-contact { flex-wrap: wrap !important; }
.wps-contact.wps-contact > .wp-block-column { flex-basis: calc(50% - 11px) !important; }
@media (max-width: 720px) {
	.wps-contact.wps-contact > .wp-block-column { flex-basis: 100% !important; }
}
.wps-cal-link {
	margin-top: 22px;
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 13px;
	color: var(--wp--preset--color--pine); text-decoration: none;
}
.wps-cal-link svg { width: 17px; height: 17px; }
@media (max-width: 1080px) { .wps-includes { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .wps-includes { grid-template-columns: repeat(2, 1fr); } }

/* format and registration cards on the Details tab */
.wps-formats { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 8px; }
.wps-fmt {
	background: #fff;
	border: 1px solid var(--wps-line);
	border-top: 4px solid #b5651d;
	border-radius: 16px;
	padding: 28px 28px 30px;
	box-shadow: var(--wps-shadow);
}
.wps-fmt__tag {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
	font-size: 40px; color: #b5651d; line-height: 1;
}
.wps-fmt h3 { font-size: 22px; color: var(--wp--preset--color--ink); margin: 6px 0 8px; text-transform: none; font-weight: 600; }
.wps-fmt p { font-size: 18px; color: var(--wp--preset--color--body); line-height: 1.55; margin: 0; }

.wps-reg { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 32px; }
.wps-regcard { border-radius: 16px; padding: 30px; box-shadow: var(--wps-shadow); }
.wps-regcard--team { background: linear-gradient(160deg, var(--wp--preset--color--pine), var(--wp--preset--color--pine-deep)); color: #fff; }
.wps-regcard--free { background: #fff; border: 1px solid var(--wps-line); }
.wps-regcard__k {
	font-family: var(--wp--preset--font-family--display);
	text-transform: uppercase; letter-spacing: .14em; font-size: 11px; margin: 0 0 10px;
}
.wps-regcard--team .wps-regcard__k { color: var(--wp--preset--color--amber); }
.wps-regcard--free .wps-regcard__k { color: var(--wp--preset--color--amber-deep); }
.wps-regcard h3 { font-size: 24px; text-transform: none; font-weight: 600; margin: 0 0 10px; }
/* theme.json colours every heading pine, so the card's own white text colour is
   not inherited by the h3 — it has to be stated. */
.wps-regcard--team h3 { color: #fff; }
.wps-regcard--free h3 { color: var(--wp--preset--color--pine); }
/* reference gives the free-agent card a pine button, not the amber default */
.wps-regcard--free .wp-element-button {
	background-color: var(--wp--preset--color--pine);
	color: #fff;
}
.wps-regcard--free .wp-element-button:hover { background-color: var(--wp--preset--color--pine-deep); }
.wps-regcard p { font-size: 18px; line-height: 1.6; margin: 0; }
.wps-regcard--team p { color: rgba(255, 255, 255, .93); }
.wps-regcard--free p { color: var(--wp--preset--color--body); }
.wps-regcard .wp-block-buttons { margin-top: 18px; }
@media (max-width: 720px) {
	.wps-formats, .wps-reg { grid-template-columns: 1fr; gap: 16px; }
	.wps-reg { margin-top: 16px; }
}

/* ---------- about page ---------- */
/* Editorial treatment. No mockup covers this page, so it is composed rather than
   copied — but strictly inside the approved system: Oswald display, pine/amber,
   the same card radii and shadows as everywhere else. The one grid-breaking
   move is the photo overlapping the type column; everything else is spacing. */

.wps-about {
	position: relative;
	overflow: hidden;
	padding-block: 96px 88px;
}
/* faint field lines, the club's own texture rather than a flat fill */
.wps-about::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		90deg, transparent 0 118px, rgba(8, 88, 50, .045) 118px 119px );
	pointer-events: none;
}
.wps-about > * { position: relative; }

/* core/columns, not a CSS grid — the section is built from real blocks so the
   owner can edit it. Only the gap and the media offset are ours. */
.wps-about__grid.wps-about__grid { gap: 64px; }

/* the founding year, set as a graphic element rather than a sentence */
.wps-about__year {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(78px, 11vw, 168px);
	line-height: .8;
	letter-spacing: -.02em;
	color: transparent;
	-webkit-text-stroke: 2px rgba(8, 88, 50, .22);
	margin: 0 0 -.16em;
	user-select: none;
}
.wps-about__lede.wps-about__lede {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	text-transform: uppercase;
	font-size: clamp(26px, 2.9vw, 40px);
	line-height: 1.08;
	letter-spacing: .01em;
	color: var(--wp--preset--color--pine);
	margin: 0 0 26px;
	max-width: 20ch;
}
.wps-about__lede em {
	font-style: normal;
	color: var(--wp--preset--color--amber-deep);
}
.wps-about-p {
	font-size: 18px;
	line-height: 1.7;
	color: var(--wp--preset--color--body);
	max-width: 62ch;
	margin: 0 0 20px;
}
.wps-about-p a { color: var(--wp--preset--color--amber-deep); text-decoration: none; border-bottom: 1px solid currentColor; }
.wps-about-p a:hover { color: var(--wp--preset--color--pine); }

/* the photo breaks the column edge — the single deliberate grid-break */
.wps-about__media {
	position: relative;
	margin-top: 34px;
}
.wps-about__media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 18px;
	box-shadow: 0 40px 80px -40px rgba(6, 30, 18, .8);
}
.wps-about__media::after {
	content: "";
	position: absolute;
	inset: auto -22px -22px auto;
	width: 168px;
	height: 168px;
	border-radius: 50%;
	background: rgba(224, 132, 60, .16);
	z-index: -1;
}

/* the club's own sport marks as a texture strip, not decoration for its own sake */
.wps-about__marks.wps-about__marks {
	gap: 18px;
	margin-top: 40px;
	padding-top: 26px;
	border-top: 1px solid var(--wps-line);
}
.wps-about__mark { margin: 0; }
/* the Image block writes width inline from its own panel; height keeps the
   square without fighting that control */
.wps-about__mark img { height: 34px; display: block; }

/* one orchestrated load, not scattered micro-interactions */
@media (prefers-reduced-motion: no-preference) {
	.wps-about__year,
	.wps-about__lede,
	.wps-about-p,
	.wps-about__media,
	.wps-about__marks {
		animation: wps-about-rise .7s cubic-bezier(.2, .7, .2, 1) backwards;
	}
	.wps-about__year   { animation-delay: .02s; }
	.wps-about__lede   { animation-delay: .10s; }
	.wps-about-p       { animation-delay: .18s; }
	.wps-about__media  { animation-delay: .14s; }
	.wps-about__marks  { animation-delay: .30s; }
}
@keyframes wps-about-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
	.wps-about { padding-block: 66px 60px; }
	/* core keeps columns side by side above 782px; below 900 this section needs
	   them stacked, and core's rule is (0,2,0) printed after this file */
	.wps-about__grid.wps-about__grid { flex-wrap: wrap !important; gap: 0; }
	.wps-about__grid.wps-about__grid > .wp-block-column { flex-basis: 100% !important; }
	.wps-about__media { margin-top: 30px; }
	.wps-about__media::after { display: none; }
}

/* ---------- league policies ---------- */
/* A reference document, so it is treated as one: a standing contents column, a
   numbered spine down the left of each section, and the roster table given room
   to be read rather than squeezed into a paragraph. */
.wps-pol-cols.wps-pol-cols { gap: 56px; }

.wps-pol-toc { position: sticky; top: 108px; align-self: start; }
.wps-pol-toc__list.wps-pol-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: 2px solid var(--wps-line);
}
.wps-pol-toc__list li { margin: 0; }
.wps-pol-toc__list a {
	display: block;
	padding: 8px 0 8px 16px;
	margin-left: -2px;
	border-left: 2px solid transparent;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: 12px;
	line-height: 1.3;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: .15s;
}
.wps-pol-toc__list a:hover,
.wps-pol-toc__list a:focus-visible {
	color: var(--wp--preset--color--pine);
	border-left-color: var(--wp--preset--color--amber);
}

.wps-pol-sec {
	position: relative;
	padding-left: 62px;
	padding-bottom: 34px;
	margin-bottom: 34px;
	border-bottom: 1px solid var(--wps-line);
	/* the sticky tab-free header still overlaps an anchor jump */
	scroll-margin-top: 110px;
}
.wps-pol-sec:last-child { border-bottom: none; margin-bottom: 0; }
.wps-pol-num {
	position: absolute;
	left: 0;
	top: 2px;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 34px;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(8, 88, 50, .3);
}
.wps-pol-head.wps-pol-head {
	font-size: 19px;
	letter-spacing: .08em;
	/* amber-deep is 3.79:1 on cream; 600 is not "bold" for the WCAG large-text
	   exemption, so this takes the same 4.97:1 orange as the list numbering. */
	color: #a8541f;
	margin: 0 0 14px;
}

/* Every core/table gets the house look, with no extra class to remember. Core
   prints its own table CSS after this file, so each rule that contradicts it
   carries the repeated-class tie-break. */
.wp-block-table.wp-block-table { margin: 24px 0 0; }
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}
.wp-block-table th {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .07em;
	font-size: 11.5px;
	text-align: left;
	color: #fff;
	background: var(--wp--preset--color--pine);
	padding: 11px 12px;
	/* core/table sets `border: 1px solid currentColor` on every cell. In the
	   header currentColor is white, so the seams read as broken white gaps over
	   the pine fill; in the body they came out ink-dark. Both are restated. */
	border: 1px solid #033e22;
}
.wp-block-table td {
	padding: 10px 12px;
	border: 1px solid var(--wps-line);
	color: var(--wp--preset--color--body);
}
.wp-block-table tbody tr:nth-child(odd) td { background: rgba(8, 88, 50, .035); }
.wp-block-table td:first-child { font-weight: 600; color: var(--wp--preset--color--ink); }
.wp-block-table figcaption.wp-element-caption {
	font-size: 13px;
	color: var(--wp--preset--color--muted);
	margin-top: 10px;
	text-align: left;
}

@media (max-width: 900px) {
	.wps-pol-cols.wps-pol-cols { flex-wrap: wrap !important; gap: 0; }
	.wps-pol-cols.wps-pol-cols > .wp-block-column { flex-basis: 100% !important; }
	.wps-pol-toc { position: static; margin-bottom: 34px; }
	.wps-pol-sec { padding-left: 46px; }
	.wps-pol-num { font-size: 26px; }
	/* a five-column table cannot shrink usefully — let it scroll on its own */
	.wp-block-table { overflow-x: auto; }
	.wp-block-table table { min-width: 520px; }
}

/* Numbered two-level list, as the source has it. The numbering is not
   decoration: the policies and the sport rules cite each other by it
   ("refer to rule 5.4", "Rule 1.1", "table 2.3"), so flattening it to bullets
   broke every cross-reference on the site. */
.wps-pol-list.wps-pol-list {
	counter-reset: wps-l1;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
}
.wps-pol-list > li {
	counter-increment: wps-l1;
	position: relative;
	padding-left: 44px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--wp--preset--color--body);
}
.wps-pol-list > li::before {
	content: counter(wps-l1) ".";
	position: absolute;
	left: 0;
	top: 0;
	width: 34px;
	text-align: right;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.9;
	/* Orange, as the owner prefers, but a step darker than amber-deep: that
	   measures 3.54:1 on the birch background, under the 4.5:1 small text needs.
	   #a8541f is 4.97:1 and still unmistakably the brand orange. */
	color: #a8541f;
}
.wps-pol-list ol {
	counter-reset: wps-l2;
	list-style: none;
	margin: 11px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.wps-pol-list ol > li {
	counter-increment: wps-l2;
	position: relative;
	padding-left: 52px;
	font-size: 17px;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}
.wps-pol-list ol > li::before {
	content: counter(wps-l1) "." counter(wps-l2);
	position: absolute;
	left: 0;
	top: 0;
	width: 42px;
	text-align: right;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 13.5px;
	line-height: 2.05;
	/* same orange, quieter through size and weight rather than by fading it —
	   these numbers get cited ("refer to rule 5.4") and must stay readable */
	color: #a8541f;
	font-weight: 500;
}
/* a third level exists in the source; keep its own counter so it cannot repeat
   the level-two number */
.wps-pol-list ol ol { counter-reset: wps-l3; }
.wps-pol-list ol ol > li { counter-increment: wps-l3; padding-left: 60px; font-size: 16px; }
.wps-pol-list ol ol > li::before {
	content: counter(wps-l1) "." counter(wps-l2) "." counter(wps-l3);
	width: 50px;
}
.wps-pol-list li b { font-weight: 700; color: var(--wp--preset--color--ink); }
.wps-pol-list li a { color: var(--wp--preset--color--amber-deep); }
@media (max-width: 640px) {
	.wps-pol-list > li { padding-left: 34px; }
	.wps-pol-list > li::before { width: 24px; }
	.wps-pol-list ol > li { padding-left: 40px; }
	.wps-pol-list ol > li::before { width: 32px; }
}

/* ---------- photo gallery ---------- */
/* core/gallery with core's own lightbox ("expand on click", WP 6.4+), so the
   click behaviour is WordPress's and not a script of ours. Only the hover is
   ours: the image scales inside a fixed frame and a loupe fades in. */
.wps-gal__grid.wps-gal__grid { gap: 18px; }
/* core lets the last item in a row flex-grow, so an odd count stretched one
   photo across the full width. Fixed thirds keep the grid a grid. */
.wps-gal__grid.wps-gal__grid > .wp-block-image {
	/* flex-basis lands, flex-grow does not — core sets it on a selector this
	   cannot outrank, and it is what stretched the last photo across the row. */
	flex-grow: 0 !important;
	flex-basis: calc(33.333% - 12px);
}
.wps-gal__grid .wp-block-image {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	box-shadow: var(--wps-shadow);
	margin: 0;
}
.wps-gal__grid .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.wps-gal__grid .wp-block-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(4, 20, 12, .45), transparent 55%);
	opacity: 0;
	transition: opacity .3s;
	pointer-events: none;
}
/* the loupe, drawn rather than shipped as a file */
.wps-gal__grid .wp-block-image::before {
	content: "";
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	width: 52px;
	height: 52px;
	margin: -26px 0 0 -26px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92) center / 22px 22px no-repeat
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23085832' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.2-4.2M11 8v6M8 11h6'/%3E%3C/svg%3E");
	opacity: 0;
	transform: scale(.8);
	transition: opacity .25s, transform .25s;
	pointer-events: none;
}
.wps-gal__grid .wp-block-image:hover img,
.wps-gal__grid .wp-block-image:focus-within img { transform: scale(1.07); }
.wps-gal__grid .wp-block-image:hover::after,
.wps-gal__grid .wp-block-image:focus-within::after { opacity: 1; }
.wps-gal__grid .wp-block-image:hover::before,
.wps-gal__grid .wp-block-image:focus-within::before { opacity: 1; transform: scale(1); }

/* core paints its own enlarge button on hover; ours replaces it */
.wps-gal__grid .lightbox-trigger { opacity: 0 !important; }

@media (prefers-reduced-motion: reduce) {
	.wps-gal__grid .wp-block-image img,
	.wps-gal__grid .wp-block-image::before,
	.wps-gal__grid .wp-block-image::after { transition: none; }
	.wps-gal__grid .wp-block-image:hover img { transform: none; }
}
@media (max-width: 900px) {
	.wps-gal__grid.wps-gal__grid > .wp-block-image { flex-basis: calc(50% - 9px) !important; }
}
@media (max-width: 640px) {
	.wps-gal__grid.wps-gal__grid { gap: 12px; }
	.wps-gal__grid.wps-gal__grid > .wp-block-image { flex-basis: calc(50% - 6px) !important; }
	.wps-gal__grid .wp-block-image::before { width: 42px; height: 42px; margin: -21px 0 0 -21px; }
}

/* ---------- event pages: Corporate Games, Beer Pong ---------- */
/* Ported from the mockup's events.css. The hero reuses .wps-sport-hero and
   swaps the video for a photo, which is what --img does in the reference. */
.wps-sport-hero--img .wps-hero-photo {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}
.wps-sport-hero--img .wps-hero-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
	max-width: none;
}
.wps-sport-hero--img::after {
	background:
		linear-gradient(90deg, rgba(6, 30, 18, .94) 0%, rgba(6, 30, 18, .78) 42%, rgba(6, 30, 18, .36) 72%, rgba(6, 30, 18, .14) 100%),
		linear-gradient(to top, rgba(4, 20, 12, .55), transparent 52%);
}

/* Doubled class: the constrained layout puts `margin-inline: auto !important`
   on every direct child, which turns the 60ch cap into centring. The reference
   keeps this lead flush with the heading at x=42. */
.wps-sec-lead.wps-sec-lead {
	font-size: 18px; line-height: 1.55; color: var(--wp--preset--color--body);
	margin: 10px auto 0 0 !important; max-width: 60ch;
	/* Left edge of the content column, not of the full-bleed group: the 60ch cap
	   makes the layout's auto margins centre the text, and margin-left:0 would
	   push it 10px left of the heading. Collapses to 0 below the content size. */
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
}

/* four facts */
.wps-facts.wps-facts { gap: 22px; margin-top: 34px; }
.wps-fact {
	background: #fff;
	border: 1px solid var(--wps-line);
	border-top: 4px solid var(--wp--preset--color--amber);
	border-radius: 16px;
	padding: 26px 26px 28px;
	transition: transform .2s, box-shadow .22s;
}
.wps-fact:hover { transform: translateY(-3px); box-shadow: var(--wps-shadow); }
/* .wps-fact p below is (0,1,1) and the figure is a paragraph, so the class
   alone loses the tie — hence the doubled class. */
.wps-fact .wps-fact__fig {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700; font-size: 46px; line-height: 1;
	color: var(--wp--preset--color--pine); letter-spacing: -.01em; margin: 0;
}
.wps-fact__title.wps-fact__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
	/* The reference uses amber-deep here; at 14px that is 3.79:1 on white and
	   fails AA, so it takes the darker orange already agreed for the policy
	   lists — 4.97:1, same hue. */
	font-size: 14px; color: #a8541f; margin: 10px 0 8px;
}
.wps-fact p { font-size: 18px; line-height: 1.6; color: var(--wp--preset--color--body); margin: 0; }

/* seven games */
.wps-games {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 34px;
}
.wps-games.wps-games > * { margin-block: 0; }
.wps-game {
	background: #fff;
	border: 1px solid var(--wps-line);
	border-top: 4px solid var(--wp--preset--color--pine-light);
	border-radius: 16px;
	overflow: hidden;
	padding: 0 26px 26px;
	transition: transform .2s, box-shadow .22s;
}
.wps-game:hover { transform: translateY(-3px); box-shadow: var(--wps-shadow); }
.wps-game__img.wps-game__img {
	margin: 0 -26px 18px;
	aspect-ratio: 16 / 10;
	background: var(--wp--preset--color--cream);
	overflow: hidden;
}
.wps-game__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wps-game .wps-game__n {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700; font-size: 34px; line-height: 1;
	color: var(--wp--preset--color--amber); letter-spacing: .02em; margin: 0;
}
.wps-game__title.wps-game__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600; text-transform: uppercase; font-size: 19px;
	color: var(--wp--preset--color--pine); line-height: 1.15; margin: 6px 0 8px;
}
.wps-game p { font-size: 18px; line-height: 1.6; color: var(--wp--preset--color--body); margin: 0; }

/* closing band */
.wps-cta-band {
	background: linear-gradient(160deg, var(--wp--preset--color--pine), var(--wp--preset--color--pine-deep));
	color: #fff;
	text-align: center;
}
.wps-cta-band__title.wps-cta-band__title {
	font-weight: 700; text-transform: uppercase;
	font-size: clamp(30px, 4vw, 52px); color: #fff; margin: 0;
}
.wps-cta-band__p { font-size: 19px; color: rgba(255, 255, 255, .93); margin: 12px auto 0; max-width: 54ch; }
.wps-cta-band .wp-block-buttons { justify-content: center; margin-top: 26px; }

@media (max-width: 1080px) {
	.wps-games { grid-template-columns: repeat(2, 1fr); }
	.wps-facts.wps-facts { flex-wrap: wrap !important; }
	.wps-facts.wps-facts > .wp-block-column { flex-basis: calc(50% - 11px) !important; }
}
@media (max-width: 720px) {
	.wps-games { grid-template-columns: 1fr; }
	.wps-facts.wps-facts > .wp-block-column { flex-basis: 100% !important; }
}


/* ---------- blog ---------- */
/* The archive reuses the card language of the event grid — photo, date, title,
   excerpt — so the site reads as one thing. An even three-across grid: the
   newest post led on a double-width card for a while and the owner asked for
   equal tiles instead. */
.wps-blog__grid.wps-blog__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	margin: 34px 0 0;
	padding: 0;
	list-style: none;
}
.wps-blog__grid > li {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--wps-line);
	border-radius: 16px;
	overflow: hidden;
	transition: transform .2s, box-shadow .22s;
}
.wps-blog__grid > li:hover { transform: translateY(-3px); box-shadow: var(--wps-shadow); }

.wps-post-card__img.wps-post-card__img { margin: 0; }
.wps-post-card__img img { width: 100%; height: auto; display: block; object-fit: cover; }
.wps-post-card__body { display: flex; flex-direction: column; padding: 22px 24px 26px; }
.wps-post-card__date.wps-post-card__date {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
	font-size: 11px; color: #a8541f; margin: 0 0 8px;
}
.wps-post-card__title.wps-post-card__title {
	font-size: 21px; line-height: 1.2; margin: 0 0 9px;
}
.wps-post-card__title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.wps-blog__grid > li:hover .wps-post-card__title a { color: var(--wp--preset--color--pine); }
.wps-post-card__text.wps-post-card__text {
	font-size: 16px; line-height: 1.55; color: var(--wp--preset--color--body); margin: 0;
}
.wps-post-card__more.wps-post-card__more {
	margin-top: 16px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 13px;
	color: #a8541f; text-decoration: none;
}
.wps-post-card__more:hover { text-decoration: underline; text-underline-offset: 4px; }

/* pagination */
.wps-blog__pager { margin-top: 44px; gap: 8px; align-items: center; }
/* The numbers block is a plain container, so its children stacked; the pager
   itself is flex but that does not reach one level down. */
.wps-blog__pager .wp-block-query-pagination-numbers {
	display: flex; align-items: center; gap: 8px;
}
.wps-blog__pager .page-numbers {
	display: inline-grid; place-items: center;
	min-width: 42px; height: 42px; padding: 0 12px;
	border: 1px solid var(--wps-line); border-radius: 10px;
	background: #fff;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 13px;
	color: var(--wp--preset--color--pine); text-decoration: none;
	transition: background .15s, color .15s, border-color .15s;
}
.wps-blog__pager .page-numbers:hover {
	background: var(--wp--preset--color--pine); border-color: var(--wp--preset--color--pine); color: #fff;
}
.wps-blog__pager .page-numbers.current {
	background: var(--wp--preset--color--pine); border-color: var(--wp--preset--color--pine); color: #fff;
}
.wps-blog__pager .page-numbers.dots { border-color: transparent; background: none; }
/* Core gives prev/next their own classes rather than .page-numbers. */
.wps-blog__pager .wp-block-query-pagination-previous,
.wps-blog__pager .wp-block-query-pagination-next {
	display: grid; place-items: center;
	height: 42px; padding: 0 16px;
	border: 1px solid var(--wps-line); border-radius: 10px;
	background: #fff;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 13px;
	color: #a8541f; text-decoration: none;
	transition: background .15s, color .15s, border-color .15s;
}
.wps-blog__pager .wp-block-query-pagination-previous:hover,
.wps-blog__pager .wp-block-query-pagination-next:hover {
	background: #a8541f; border-color: #a8541f; color: #fff;
}

@media (max-width: 1080px) {
	.wps-blog__grid.wps-blog__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
	.wps-blog__grid.wps-blog__grid { grid-template-columns: 1fr; gap: 22px; }
}

/* ---------- single post ---------- */
/* Centred masthead: date, title and standfirst on the page's axis, with the
   breadcrumb dropped clear of the header rather than tucked under it. */
.wps-posthead {
	background: var(--wp--preset--color--cream);
	padding-block: 26px 34px;
	text-align: center;
}
.wps-posthead .wps-crumb { margin: 22px 0 30px; justify-content: center; }
.wps-posthead .wps-crumb ol { justify-content: center; }
.wps-posthead__date.wps-posthead__date {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
	font-size: 12px; color: #a8541f; margin: 0 0 12px;
}
.wps-posthead__title.wps-posthead__title {
	font-size: clamp(32px, 4.6vw, 58px); font-weight: 700; line-height: 1.03;
	color: var(--wp--preset--color--pine); margin: 0;
}
/* Doubled class + auto margins: the constrained layout would otherwise leave
   the 62ch standfirst pinned left under a centred title. */
.wps-posthead__lead.wps-posthead__lead {
	font-size: 20px; line-height: 1.55; color: var(--wp--preset--color--body);
	margin: 18px auto 0 !important; max-width: 62ch;
}

/* ---------- byline ---------- */
.wps-byline {
	margin-top: 44px; padding-top: 26px;
	border-top: 1px solid var(--wps-line);
	gap: 16px; align-items: center;
}
.wps-byline__img img { border-radius: 50%; display: block; }
.wps-byline__label {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
	font-size: 11px; color: #a8541f; margin: 0 0 3px;
}
.wps-byline__name.wps-byline__name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700; font-size: 19px; line-height: 1.2;
	color: var(--wp--preset--color--pine); margin: 0;
}
.wps-byline__bio.wps-byline__bio {
	font-size: 15px; line-height: 1.5; color: var(--wp--preset--color--body);
	margin: 5px 0 0; max-width: 60ch;
}
.wps-byline__bio:empty { display: none; }
.wps-postimg.wps-postimg { margin: 0 auto; }
.wps-postimg img { border-radius: 18px; border: 1px solid var(--wps-line); }

/* Doubled class: the 68ch measure plus the constrained layout's
   `margin-inline: auto !important` centred the article while its own heading
   and the Related strip stayed flush left, which reads as a mistake. */
/* Centred, not flush left: the masthead above it is centred, and an article
   measure on the page axis is what the owner asked for. Width unchanged. */
.wps-article__body.wps-article__body {
	font-size: 18px; line-height: 1.7; color: var(--wp--preset--color--body); max-width: 68ch;
	margin-inline: auto !important;
}
.wps-article__body > * + * { margin-top: 18px; }
.wps-article__body :is(h2, h3) {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
	color: var(--wp--preset--color--pine); line-height: 1.15;
}
.wps-article__body h2 { font-size: 28px; }
.wps-article__body h3 { font-size: 20px; }
.wps-article__body > * + :is(h2, h3) { margin-top: 36px; }
.wps-article__body :is(h2, h3) + * { margin-top: 10px; }
.wps-article__body :is(ul, ol) { padding-left: 22px; }
.wps-article__body li + li { margin-top: 7px; }
.wps-article__body a { color: #a8541f; }
.wps-article__body blockquote {
	margin: 26px 0; padding: 4px 0 4px 22px;
	border-left: 3px solid var(--wp--preset--color--amber);
	font-family: var(--wp--preset--font-family--display);
	font-size: 21px; line-height: 1.4; color: var(--wp--preset--color--pine);
}
.wps-article__body blockquote p { margin: 0; }

/* ---------- related articles ---------- */
.wps-related { margin-top: 68px; padding-top: 46px; border-top: 1px solid var(--wps-line); }
.wps-article .wps-byline { max-width: 68ch; margin-inline: auto; }
/* The back link belongs to the page, not to the article measure: centring it
   with the body left it floating near the middle of the screen. */
.wps-article .wps-single__back.wps-single__back {
	margin-left: 0 !important;
	margin-right: auto !important;
	max-width: none;
}
.wps-related .wps-section-title { margin-bottom: 28px; }
.wps-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.wps-rel-card {
	background: #fff;
	border: 1px solid var(--wps-line);
	border-radius: 14px;
	overflow: hidden;
	transition: transform .2s, box-shadow .22s;
}
.wps-rel-card:hover { transform: translateY(-3px); box-shadow: var(--wps-shadow); }
.wps-rel-card__img { display: block; aspect-ratio: 16 / 10; background: var(--wp--preset--color--cream); }
.wps-rel-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wps-rel-card__body { padding: 16px 18px 20px; }
.wps-rel-card__date {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
	font-size: 11px; color: #a8541f; margin: 0 0 6px;
}
.wps-rel-card__title { font-size: 17px; line-height: 1.25; margin: 0; }
.wps-rel-card__title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.wps-rel-card:hover .wps-rel-card__title a { color: var(--wp--preset--color--pine); }
@media (max-width: 900px) { .wps-related__grid { grid-template-columns: 1fr; } }


/* ---------- button glow ---------- */
/* Reference `.btn-cal` / `.btn-signup`: a tinted drop shadow the colour of the
   button itself, so it reads as a glow rather than a shadow. Keyed off the
   background classes so the owner's colour panel still drives which one
   applies — an amber button gets the amber glow by choosing amber. */
.wp-element-button,
.wp-block-button__link {
	transition: transform .15s, box-shadow .2s;
}
.wp-block-button__link:not(.has-background),
.has-amber-background-color.wp-block-button__link,
.wps-btn-signup .wp-block-button__link {
	box-shadow: 0 10px 24px -12px rgba(224, 132, 60, .9);
}
.has-pine-background-color.wp-block-button__link,
.wps-btn-cal .wp-block-button__link {
	box-shadow: 0 10px 24px -12px rgba(8, 88, 50, .8);
}
.wp-block-button__link:hover { transform: translateY(-2px); }
/* Outline buttons have no fill to glow from. */
.is-style-outline .wp-block-button__link { box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link { transition: none; }
	.wp-block-button__link:hover { transform: none; }
}

/* ---------- weather bar ---------- */
/* Third-party embed, as in the reference: a full-bleed strip under the hero.
   The band colour and type are ours; everything inside comes from the widget. */
.wps-weather.wps-weather {
	background: #d32f2f;
	color: #fff;
	text-align: center;
	font-size: 18px;
	line-height: 1.4;
	padding: 9px 18px;
}
.wps-weather a { color: #fff; text-decoration: underline; }
.wps-weather a:hover { text-decoration: none; }


/* ---------- mega menu promo column ---------- */
/* One more cell in the panel's existing grid, so it sits level with the link
   columns instead of being positioned against the panel. */
.wps-mega__aside { align-self: start; }
/* Ported from `.mega-feature` in the mockup. The card is a plain Group block in
   a widget area; the calendar mark is a CSS mask on the group so the widget
   itself stays editable blocks with no raw SVG in it. */
.wps-mega-feature.wps-mega-feature {
	position: relative;
	width: 260px;
	background: linear-gradient(160deg, var(--wp--preset--color--pine), var(--wp--preset--color--pine-deep));
	border-radius: 13px;
	padding: 22px;
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 11px;
	overflow: hidden;
}
.wps-mega-feature::before {
	content: "";
	display: block;
	width: 40px; height: 40px;
	background: var(--wp--preset--color--amber);
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224.5%22%20width%3D%2218%22%20height%3D%2216.5%22%20rx%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M3%209.5h18M8%202.5v4M16%202.5v4%22%2F%3E%3Cpath%20d%3D%22M7.5%2013.5h3v3h-3z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224.5%22%20width%3D%2218%22%20height%3D%2216.5%22%20rx%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M3%209.5h18M8%202.5v4M16%202.5v4%22%2F%3E%3Cpath%20d%3D%22M7.5%2013.5h3v3h-3z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.wps-mega-feature > * { margin-block: 0 !important; }
.wps-mega-feature__eyebrow.wps-mega-feature__eyebrow {
	font-family: var(--wp--preset--font-family--display);
	font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
	color: var(--wp--preset--color--amber); margin: 0;
}
.wps-mega-feature__title.wps-mega-feature__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600; text-transform: uppercase;
	font-size: 19px; line-height: 1.08; color: #fff; margin: 0;
}
/* Its own class, not `p:not([class])`: core stamps `wp-block-paragraph` on every
   paragraph, so that selector never matched and the size never applied. */
.wps-mega-feature__text.wps-mega-feature__text {
	font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .82); margin: 0;
}
.wps-mega-feature .wp-block-buttons { margin-top: auto; }
.wps-mega-feature .wp-block-button__link {
	background: var(--wp--preset--color--amber);
	color: #3a1d06;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: .04em;
	padding: 10px 15px; border-radius: 7px;
	box-shadow: none;
}
@media (max-width: 1080px) { .wps-mega__aside { display: none; } }

@media (max-width: 900px) {
	.video-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 600px) {
	.video-grid {
		grid-template-columns: 1fr !important;
	}
}