/*
 * MBI Winter Guard — Option B, "Light & editorial".
 *
 * Everything is scoped under .mbiwg so the theme's own header, footer and the
 * rest of the site are untouched.
 *
 * Colour rule from the brand notes: Citron fills, Azure draws. Citron is only
 * ever a filled shape (button, badge, highlighter band, closing banner); Azure
 * is only ever a thin element (rules, stat numerals, link underlines, the
 * active tab underline). They are never placed side by side.
 */

.mbiwg {
	/* ---- palette ---- */
	--navy: #060c1e;
	--royal: #1b3a8f;
	--paper: #f2f5fb;
	--azure: #0a84ff;
	--citron: #9eda1e;

	--ink: #2a3147;          /* body text on Paper */
	--ink-soft: #4e5670;     /* secondary text and captions */
	--hair: #d5dcea;         /* hairline borders */
	--card-line: #dfe5f0;
	--card: #ffffff;

	/* ---- type ---- */
	--f-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
	--f-text: "Instrument Sans", system-ui, -apple-system, sans-serif;
	--f-serif: "Instrument Serif", Georgia, serif;

	/* ---- layout ---- */
	--wrap: 1200px;
	--gutter: 20px;
	--rhythm: 72px;

	/* The site header scrolls away on this page (see inc/winterguard/header.php),
	   so the section bar pins to the very top — offset only by the WordPress
	   admin bar when one is present. */
	--wg-sticky-top: 0px;
	--subnav-h: 64px;

	/* ---- radii ---- */
	--r-btn: 4px;
	--r-card: 6px;
	--r-panel: 8px;

	font-family: var(--f-text);
	color: var(--ink);
	background: var(--card);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

@media (min-width: 900px) {
	.mbiwg {
		font-size: 16px;
		--gutter: 24px;
		--rhythm: 120px;
	}
}

/* Scoped to this page only, so site-wide header behaviour is untouched. */
body.mbiwg-page {
	overflow-x: clip;
	overflow-y: visible;
}

/*
 * The site header scrolls away with the page here; only the section bar pins.
 * inc/winterguard/header.php also flips Salient's own data-remove-fixed /
 * data-header-resize attributes, which stops its shrink-on-scroll script —
 * that shrink is what collapsed the two-row utility bar into the main nav
 * when logged in.
 *
 * `static` rather than `absolute`: the header then sits in normal flow, so it
 * needs no spacer, needs no admin-bar offset (WordPress already pushes the
 * document down for its own bar), and cannot overlap the hero. Salient's
 * #header-space only exists to reserve room for an out-of-flow header, so it
 * is removed here — it collapses to 0 on small screens anyway, which is what
 * made an absolutely-positioned header overlap the content there.
 */
body.mbiwg-page #header-outer {
	position: static !important;
	top: auto !important;
}
body.mbiwg-page #header-space {
	display: none !important;
}

/* Salient gives every <p> a 28px padding-bottom site-wide. This page sets all
   of its spacing with margins, so that padding only inflates gaps — most
   visibly under section eyebrows. */
.mbiwg p { padding: 0; }
/* Salient indents <dd> by 20px; the card aligns its secondary lines with the
   bold line above them instead. */
.mbiwg dd { padding: 0; margin-inline-start: 0; }

/* Salient decorates list items site-wide; this page draws its own lists. */
.mbiwg ul, .mbiwg ol { list-style: none; }
.mbiwg li { list-style: none; }
.mbiwg li::marker { content: none; }
.mbiwg li::before { display: none; content: none; }

/* Grid and flex children default to min-width:auto, so one oversized child —
   a portrait whose file is missing, say — can blow a track out. */
.mbiwg [class*="wg-"] > * { min-width: 0; }

/* Photos crop, never stretch. Anywhere a box constrains both dimensions an
   image without this would distort to fit; with it the frame wins and the
   picture is cropped instead. Rules further down override it where a whole
   image has to stay visible (the lightbox). */
.mbiwg img,
.mbiwg video { object-fit: cover; }
.mbiwg picture { display: block; }

/* Two spellings of one line, for places where the long one will not fit. */
.wg-only-narrow { display: none; }
@media (max-width: 599px) {
	.wg-only-wide { display: none; }
	.wg-only-narrow { display: inline; }
}

.wg-wrap {
	/* Exactly 1200px of content at 1440, i.e. the design's 120px side margins. */
	width: min(100% - var(--gutter) * 2, var(--wrap));
	margin-inline: auto;
}

/* Anchor links land each heading just clear of the pinned section bar. */
.mbiwg [id] { scroll-margin-top: calc(var(--wg-sticky-top) + var(--subnav-h) + 16px); }
/* Auditions opens on an eyebrow rather than a heading, so it needs a little
   more air above it to land the same way the other sections do. */
.mbiwg #auditions { scroll-margin-top: calc(var(--wg-sticky-top) + var(--subnav-h) + 40px); }

.wg-sec { padding-block: var(--rhythm); }

.wg-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ------------------------------------------------------------- typography */

.wg-h1, .wg-h2, .wg-h3 {
	font-family: var(--f-display);
	text-transform: uppercase;
	color: var(--navy);
	margin: 0;
	font-weight: 900;
	line-height: 0.88;
	letter-spacing: -0.005em;
}

/* 128/56, 88/52 and 34/28 are the desktop/mobile sizes in the design files. */
.wg-h1 { font-size: clamp(56px, 8.9vw, 128px); }
.wg-h2 { font-size: clamp(52px, 6.1vw, 88px); }
.wg-h3 { font-size: clamp(28px, 2.4vw, 34px); font-weight: 800; letter-spacing: 0; }

.wg-eyebrow {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--royal);
	margin: 0 0 14px;
}
.wg-eyebrow--royal { color: var(--royal); }
.wg-eyebrow--muted { color: var(--ink-soft); }

@media (min-width: 900px) { .wg-eyebrow { font-size: 0.8125rem; } }

.wg-lead {
	font-size: clamp(17px, 1.5vw, 21px);
	line-height: 1.55;
	color: var(--ink);
	margin: 0;
}

.wg-h1 + .wg-lead,
.wg-h2 + .wg-lead,
.wg-h2 + .wg-rich,
.wg-h3 + .wg-lead { margin-top: 22px; }

.wg-rich p { margin: 0 0 1em; }
.wg-rich p:last-child { margin-bottom: 0; }

/* Highlighter band: the design fills the bottom 38% of the word's line box
   with Citron, so the band reads as a marker swipe rather than a box. */
.wg-mark {
	background: linear-gradient(0deg, var(--citron) 0 38%, transparent 38% 100%);
	padding: 0 6px;
}

.wg-quote {
	font-family: var(--f-serif);
	font-style: italic;
	font-size: clamp(30px, 3.1vw, 44px);
	line-height: 1.25;
	color: var(--navy);
	text-align: center;
	max-width: 940px;
	margin-inline: auto;
	border: 0;
	padding: 0;
	text-wrap: balance;
}
.wg-quote p { margin: 0; }
.wg-quote--inline {
	text-align: left;
	font-size: clamp(1.25rem, 2.4vw, 1.625rem);
	margin-block: 24px;
}

/* ---------------------------------------------------------------- buttons */

.wg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 54px;
	padding: 0 24px;
	border-radius: var(--r-btn);
	font-family: var(--f-text);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
@media (min-width: 900px) { .wg-btn { min-height: 56px; } }

/* On light sections the primary button is Navy; Citron is reserved for the
   closing banner and the mobile sticky bar, so there is one Citron moment. */
.wg-btn--primary { background: var(--navy); color: var(--paper); }
.wg-btn--primary:hover, .wg-btn--primary:focus-visible { background: #101a35; color: var(--paper); }

.wg-btn--citron { background: var(--citron); color: var(--navy); }
.wg-btn--citron:hover, .wg-btn--citron:focus-visible { background: #b0ec2c; color: var(--navy); }

.wg-btn--outline { background: transparent; color: var(--navy); border-color: var(--navy); font-weight: 600; }
.wg-btn--outline:hover, .wg-btn--outline:focus-visible { background: var(--navy); color: var(--paper); }

.wg-btn--ghost { background: var(--card); color: var(--navy); border-color: var(--hair); font-weight: 600; }
.wg-btn--ghost:hover, .wg-btn--ghost:focus-visible { border-color: var(--navy); }

.wg-btn--sm { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }

/* Text link: 600 weight with a 2px Azure underline. */
.wg-tlink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--navy);
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 2px solid var(--azure);
	min-height: 44px;
}
.wg-tlink:hover, .wg-tlink:focus-visible { color: var(--royal); }

.wg-linkish {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-align: left;
}

.wg-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 1px solid var(--hair);
	background: var(--card);
	color: var(--navy);
	cursor: pointer;
}
.wg-iconbtn:hover:not(:disabled) { border-color: var(--navy); }
.wg-iconbtn:disabled { opacity: .35; cursor: default; }
.wg-iconbtn--plain { border-color: transparent; }

.mbiwg :focus-visible {
	outline: 3px solid var(--azure);
	outline-offset: 2px;
}

/* ----------------------------------------------------------------- badges */

.wg-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border-radius: 3px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}
.wg-badge--citron { background: var(--citron); color: var(--navy); }
.wg-badge--outline { background: var(--card); color: var(--navy); border: 1px solid var(--navy); }

.wg-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--citron);
	flex: none;
}
.wg-dot--sm { width: 6px; height: 6px; }

/* Grey striped placeholder standing in for photography still to be shot. */
.wg-ph {
	position: relative;
	display: flex;
	align-items: flex-end;
	width: 100%;
	border-radius: var(--r-btn);
	background-color: #e3e8f2;
	background-image: repeating-linear-gradient(
		135deg, rgba(255,255,255,.55) 0 2px, transparent 2px 11px
	);
	border: 1px solid var(--card-line);
	overflow: hidden;
}
.wg-ph__label {
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	color: var(--ink-soft);
	padding: 12px 14px;
}
.wg-ph--hero { aspect-ratio: 16 / 9; }
.wg-ph--photo { aspect-ratio: 4 / 3; }
.wg-ph--show { position: absolute; inset: 0; border-radius: 0; border: 0; }
.wg-ph--portrait { position: absolute; inset: 0; border-radius: 0; }
.wg-ph--season { aspect-ratio: 16 / 10; }

/* ------------------------------------------------------------------- hero */

/*
 * The hero opens the page directly beneath the site header, so it does not
 * need the full section rhythm above it. The header sits in normal flow, so
 * this padding is the entire visible gap down to the audition pill.
 * Every other section keeps the standard 120/72 rhythm.
 */
.wg-hero {
	background: var(--card);
	padding-top: 32px;
}
@media (min-width: 900px) {
	.wg-hero { padding-top: 48px; }
}

.wg-hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }

.wg-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 18px;
	border-radius: 999px;
	background: var(--paper);
	border: 1px solid var(--hair);
	color: var(--navy);
	text-decoration: none;
	font-size: 0.9375rem;
	margin-bottom: 26px;
	min-height: 44px;
}
.wg-pill:hover { border-color: var(--royal); }
.wg-pill__text { font-weight: 500; }
.wg-pill__text strong { font-weight: 700; }

/* The pill says as much as the width allows, on one line either way. */
.wg-pill__text { white-space: nowrap; }
.wg-pill__text--short { display: none; }
@media (max-width: 599px) {
	.wg-pill__text--long { display: none; }
	.wg-pill__text--short { display: inline; }
}

.wg-hero__body {
	max-width: 680px;
	margin: 26px auto 0;
	font-size: clamp(17px, 1.5vw, 21px);
	line-height: 1.55;
	color: var(--ink);
	text-wrap: pretty;
}
@media (min-width: 900px) { .wg-hero__body { margin-top: 30px; } }

.wg-hero__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	margin-top: 30px;
}
@media (min-width: 640px) {
	.wg-hero__actions { flex-direction: row; justify-content: center; width: auto; }
}

.wg-hero__media { position: relative; width: 100%; margin-top: 44px; }
.wg-hero__video {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--r-btn);
	background: var(--paper);
}
@media (max-width: 639px) {
	/* Vertical cut on phones, per the design. */
	.wg-hero__video, .wg-ph--hero { aspect-ratio: 4 / 5; }
}

.wg-reel {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 13px 22px 13px 13px;
	border: 0;
	border-radius: 999px;
	background: var(--card);
	color: var(--navy);
	font-weight: 700;
	font-size: 0.9375rem;
	cursor: pointer;
	box-shadow: 0 6px 24px rgba(6, 12, 30, .18);
	min-height: 44px;
}
.wg-reel__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--navy);
	color: var(--paper);
}

/* Stat block: Azure numeral under a 2px Azure rule. */
.wg-stats {
	list-style: none;
	margin: 46px 0 0;
	padding: 0;
	display: grid;
	gap: 26px 24px;
	grid-template-columns: repeat(2, 1fr);
	width: 100%;
	text-align: left;
}
@media (min-width: 900px) { .wg-stats { grid-template-columns: repeat(4, 1fr); gap: 24px; } }

.wg-stat { border-top: 2px solid var(--azure); padding-top: 14px; }
.wg-stat__value {
	display: block;
	font-family: var(--f-display);
	font-weight: 800;
	font-size: clamp(36px, 3.6vw, 52px);
	line-height: 1;
	color: var(--azure);
	text-transform: uppercase;
}
.wg-stat__label {
	display: block;
	margin-top: 8px;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--ink-soft);
}

/* -------------------------------------------------------- sticky sub-nav */

.wg-subnav {
	position: sticky;
	top: var(--wg-sticky-top);
	/* Above Salient's header, which is no longer pinned on this page. */
	z-index: 9998;
	background: var(--card);
	border-block: 1px solid var(--hair);
}

.wg-subnav__inner {
	display: flex;
	align-items: center;
	gap: 22px;
	min-height: var(--subnav-h);
}

.wg-subnav__brand {
	font-family: var(--f-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 1.125rem;
	color: var(--navy);
	white-space: nowrap;
	display: none;
}
@media (min-width: 1100px) { .wg-subnav__brand { display: block; } }

.wg-subnav__list {
	display: flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	flex: 1;
}
.wg-subnav__list::-webkit-scrollbar { display: none; }
/* Tabs must keep their natural width and scroll sideways; without this flex
   shrinks them below their text and the labels collide at 390px. */
.wg-subnav__list > li { flex: 0 0 auto; }

.wg-subnav__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 10px;
	border-bottom: 3px solid transparent;
	color: var(--ink-soft);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	white-space: nowrap;
}
.wg-subnav__link:hover { color: var(--navy); }
/* Active section: Azure underline, per "Azure draws". */
.wg-subnav__link.is-active { color: var(--navy); border-bottom-color: var(--azure); }

@media (max-width: 899px) {
	.wg-subnav__inner { gap: 0; }
	.wg-subnav__link { padding: 0 14px; font-size: 1rem; }
	/* Let the first tab sit flush with the page gutter. */
	.wg-subnav__list {
		margin-inline: calc(var(--gutter) * -1);
		padding-inline: var(--gutter);
		/* Fade the trailing edge so it reads as "there is more this way".
		   Masking the content means it works over any background and needs
		   no extra element sitting above the tabs. */
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
	}
	/* Nothing left to scroll to: no reason to fade. */
	.wg-subnav__list.is-scroll-end,
	.wg-subnav__list.is-not-scrollable {
		-webkit-mask-image: none;
		mask-image: none;
	}
}

.wg-subnav__actions { display: none; gap: 10px; }
@media (min-width: 900px) { .wg-subnav__actions { display: flex; } }

/* ------------------------------------------------------------------ about */

.wg-about {
	/* One solid Paper field for the whole section. */
	background-color: var(--paper);
	background-image: none;
}

/* Tighten the eyebrow's own line box so the gap below it is a real 32px
   rather than 32px plus inherited leading. 27px of margin lands 32px of
   visible space once each side's remaining leading is accounted for. */
.wg-about .wg-eyebrow {
	line-height: 1.15;
	margin-bottom: 27px;
}

@media (min-width: 900px) {
	/* Top-align the headline with the first line of the copy. The shared
	   .wg-sechead__row bottom-aligns, which suits the Shows section but drops
	   this headline well below the paragraph. */
	.wg-about .wg-sechead__row { align-items: start; }
	/* Optical, not box, alignment: the body copy's 1.55 line-height sits its
	   cap ~6px below its box top, the 0.88 headline ~3px. Pull the column up
	   by the difference so the two first lines start on the same line. */
	.wg-about .wg-sechead__aside { margin-top: -6px; }
}

.wg-sechead { margin-bottom: 48px; }
.wg-sechead__row { display: grid; gap: 22px; }
@media (min-width: 900px) {
	.wg-sechead__row { grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: end; }
}
.wg-sechead__aside { color: var(--ink); font-size: 1rem; line-height: 1.6; }
@media (min-width: 900px) { .wg-sechead__aside { font-size: 1.0625rem; } }

.wg-sechead--inline {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
}

.wg-about__photos { display: grid; gap: 20px; margin-block: 8px 56px; }
.wg-about__photo { width: 100%; border-radius: var(--r-btn); }

/* One shared frame on phones: the two photos have very different native
   shapes, and cropping both to 4:3 keeps the stack even instead of letting
   a tall one dominate. */
@media (max-width: 759px) {
	.wg-about__photos > *,
	.wg-about__photo { aspect-ratio: 4 / 3; height: auto; }
	.wg-about__photo { display: block; height: 100%; }
}

@media (min-width: 760px) {
	.wg-about__photos { grid-template-columns: 1fr 1.42fr; gap: 24px; }
	/* The design sets both photos to one height and lets the widths differ,
	   so a shared row height beats per-item aspect ratios here. */
	.wg-about__photos > * { height: clamp(320px, 32vw, 460px); aspect-ratio: auto; }
	.wg-about__photos img { height: 100%; object-fit: cover; }
}

/* --------------------------------------------------------------- why MBI */

.wg-why { background: var(--card); }

.wg-why__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; }
@media (min-width: 700px) { .wg-why__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 28px; } }
@media (min-width: 1000px) { .wg-why__grid { grid-template-columns: repeat(4, 1fr); } }

.wg-why__item { border-top: 1px solid var(--hair); padding-top: 22px; }
.wg-why__icon { display: block; color: var(--royal); margin-bottom: 20px; line-height: 0; }
.wg-why__title { font-size: 1.125rem; font-weight: 700; color: var(--navy); margin: 0 0 10px; }
.wg-why__body { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-soft); }

/* ------------------------------------------------------------------ shows */

.wg-shows { background: var(--paper); }

/* Horizontal swipe row on mobile with the next card peeking in. */
.wg-rail {
	list-style: none;
	margin: 0;
	padding: 0 var(--gutter) 6px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 78%;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	margin-inline: calc(var(--gutter) * -1);
	/* Snap to the padding edge, not the container edge. Without this the
	   browser scrolls the rail by exactly the left padding to align the first
	   card's snap point, and the card ends up flush against the screen. */
	scroll-padding-inline: var(--gutter);
}
.wg-rail::-webkit-scrollbar { display: none; }
.wg-rail__item { scroll-snap-align: start; }

@media (min-width: 860px) {
	.wg-rail {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
		overflow: visible;
		padding-inline: 0;
		margin-inline: 0;
	}
	/* Eight members: four across, two even rows. */
	.wg-staff__row { grid-template-columns: repeat(4, 1fr); gap: 32px 20px; }
}
@media (max-width: 859px) {
	/* Staff is a grid at every width — two even columns on phones rather than
	   a swipe rail, so the whole roster is visible without scrolling sideways. */
	.wg-staff__row {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 16px;
		overflow: visible;
		padding-inline: 0;
		margin-inline: 0;
	}
}

.wg-show {
	position: relative;
	background: var(--card);
	border: 1px solid var(--card-line);
	border-radius: var(--r-card);
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.wg-show__top { position: relative; }
.wg-show__media {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	padding: 0;
	border: 0;
	background: var(--paper);
	cursor: pointer;
	overflow: hidden;
}
.wg-show__media img,
.wg-show__media .wg-ph { width: 100%; height: 100%; object-fit: cover; }
.wg-show__top .wg-badge { position: absolute; top: 14px; left: 14px; }

.wg-show__play {
	position: absolute;
	bottom: -24px;
	right: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px; height: 48px;
	border: 0;
	border-radius: 50%;
	background: var(--navy);
	color: var(--paper);
	cursor: pointer;
}

.wg-show__body { padding: 20px; }
.wg-show__meta {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--royal);
	margin: 0 0 8px;
}
.wg-show__title {
	font-family: var(--f-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(32px, 2.9vw, 42px);
	line-height: 1.05;
	color: var(--navy);
	margin: 0 0 10px;
	text-transform: none;
}
.wg-show__line { margin: 0; font-size: 0.9375rem; color: var(--ink-soft); line-height: 1.55; }

/* Season archive */
.wg-archive {
	margin-top: 46px;
	background: var(--card);
	border: 1px solid var(--card-line);
	border-radius: var(--r-panel);
	padding: 28px 20px;
}
@media (min-width: 900px) { .wg-archive { padding: 40px; margin-top: 56px; } }

.wg-archive__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--azure);
}
.wg-archive__hint { margin: 0; font-size: 0.875rem; color: var(--ink-soft); }

.wg-archive__grid { list-style: none; margin: 0; padding: 0; display: grid; }
@media (min-width: 760px) { .wg-archive__grid { grid-template-columns: repeat(2, 1fr); column-gap: 40px; } }
@media (min-width: 1080px) { .wg-archive__grid { grid-template-columns: repeat(4, 1fr); } }

/* Phones open on the six most recent seasons; the button reveals the rest.
   Above 760px the grid has the room for all of them, so it never collapses
   and the button is not needed. */
.wg-archive__more { display: none; }
@media (max-width: 759px) {
	.wg-archive__cell--rest { display: none; }
	.wg-archive.is-expanded .wg-archive__cell--rest { display: block; }
	.wg-archive__more { display: inline-flex; width: 100%; margin-top: 18px; }
	.wg-archive__more svg { transition: transform .2s ease; }
	.wg-archive.is-expanded .wg-archive__more svg { transform: rotate(180deg); }
}

.wg-arow {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 56px;
	padding: 10px 2px;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--hair);
	cursor: pointer;
	text-align: left;
	font: inherit;
}
.wg-arow:hover { background: var(--paper); }
.wg-arow__year {
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--ink-soft);
	flex: none;
	min-width: 38px;
}
.wg-arow__year.is-featured { color: var(--navy); }
.wg-arow__title {
	font-family: var(--f-serif);
	font-style: italic;
	font-size: clamp(20px, 1.5vw, 21px);
	line-height: 1.25;
	color: var(--navy);
	flex: 1;
}
.wg-arow__chev { color: var(--royal); display: inline-flex; flex: none; }

/* --------------------------------------------------------------- schedule */

.wg-schedule { background: var(--card); }

.wg-schedule__lead {
	display: grid;
	gap: 18px;
	margin-bottom: 38px;
}
@media (min-width: 900px) {
	.wg-schedule__lead { grid-template-columns: 1.1fr auto; align-items: end; gap: 40px; }
}
.wg-schedule__tools { display: flex; flex-wrap: wrap; gap: 24px; }

.wg-table { border-top: 2px solid var(--navy); }

/* Mobile first: a stacked card per event. The desktop column layout is
   defined once, after these base rules, so it actually wins the cascade. */
.wg-table__head { display: none; }

.wg-row {
	display: grid;
	grid-template-columns: 64px 1fr 44px;
	grid-template-areas:
		"date event add"
		"date loc   add"
		"date time  add";
	gap: 4px 14px;
	align-items: start;
	padding: 18px 0;
	border-bottom: 1px solid var(--hair);
}
.wg-row__date  { grid-area: date; }
/* The badge sits under the show name rather than beside it, so badges on
   different rows share a left edge instead of starting wherever the name
   happens to end — the two Feb 27 doubleheaders being the obvious pair. */
.wg-row__event {
	grid-area: event;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}
.wg-row__loc   { grid-area: loc;  display: flex; gap: 8px; align-items: flex-start; color: var(--ink-soft); }
.wg-row__time  { grid-area: time; display: flex; gap: 8px; align-items: center; color: var(--navy); font-weight: 500; }
.wg-row__add   { grid-area: add;  display: flex; justify-content: flex-end; align-items: center; }

@media (min-width: 900px) {
	.wg-table__head,
	.wg-row {
		display: grid;
		grid-template-columns: 150px minmax(0, 1.6fr) minmax(0, 1.6fr) 120px 56px;
		grid-template-areas: none;
		gap: 16px;
		align-items: center;
	}
	.wg-table__head {
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--ink-soft);
		padding: 14px 0;
		border-bottom: 1px solid var(--hair);
	}
	.wg-row { padding: 20px 0; }
	.wg-row__date,
	.wg-row__event,
	.wg-row__loc,
	.wg-row__time,
	.wg-row__add { grid-area: auto; }
	.wg-row__add { justify-content: center; }
}

.wg-row__mon {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--royal);
	white-space: nowrap;
	margin-bottom: 4px;
}
.wg-row__day {
	display: block;
	font-family: var(--f-display);
	font-weight: 800;
	font-size: 2.25rem;
	line-height: 1;
	color: var(--navy);
}
@media (min-width: 900px) { .wg-row__day { font-size: 2.75rem; } }

.wg-row__title { font-weight: 700; color: var(--navy); }

/* A show that has already happened stays on the list while the season runs,
   but steps back so the next one is what catches the eye. */
.wg-row--past { opacity: 0.55; }
.wg-row--past .wg-row__title,
.wg-row--past .wg-row__day { color: var(--ink-soft); }
.wg-row--past:hover { opacity: 0.8; }
.wg-badge--past { background: var(--hair); color: var(--ink-soft); }
/* An event with a link reads as one; without it the row is plain text. */
a.wg-row__title--link { text-decoration: none; border-bottom: 1px solid var(--azure); }
a.wg-row__title--link:hover { border-bottom-color: var(--navy); }
.wg-row__venue { display: block; color: var(--navy); font-weight: 500; }
.wg-row__city { display: block; font-size: 0.9375rem; color: var(--ink-soft); }
.wg-row__loc svg, .wg-row__time svg { color: var(--royal); flex: none; margin-top: 2px; }

.wg-add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border: 1px solid var(--hair);
	border-radius: 50%;
	color: var(--navy);
	text-decoration: none;
}
.wg-add:hover { border-color: var(--navy); }
.wg-add--light { border-color: rgba(242,245,251,.45); color: var(--paper); }
.wg-add--light:hover { border-color: var(--paper); }

/* Worlds: the featured Royal card. */
.wg-finale {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"date add"
		"body body"
		"loc  loc"
		"time time";
	gap: 12px 14px;
	align-items: start;
	background: var(--royal);
	color: var(--paper);
	border-radius: var(--r-panel);
	padding: 24px 20px;
	margin-top: 22px;
}

/* Base (mobile) placement first, then the desktop override — otherwise a base
   rule sitting after the media query wins the cascade and silently undoes it. */
.wg-finale__date { grid-area: date; display: flex; align-items: baseline; gap: 10px; }
.wg-finale__body { grid-area: body; }
.wg-finale__loc  { grid-area: loc; display: flex; gap: 8px; align-items: flex-start; }
.wg-finale__time { grid-area: time; display: flex; gap: 8px; align-items: center; font-weight: 500; }
.wg-finale > .wg-add { grid-area: add; justify-self: end; }

@media (min-width: 900px) {
	.wg-finale {
		/* 170px so "APR · THU–SAT" fits on one line beside the day range. */
		grid-template-columns: 170px minmax(0, 1.5fr) minmax(0, 1.5fr) 130px 56px;
		grid-template-areas: "date body loc time add";
		align-items: center;
		padding: 28px 24px;
		gap: 16px;
	}
	/* Stack the eyebrow over the day range, as the standard rows do. */
	.wg-finale__date { display: block; }
}

.wg-finale__mon {
	display: block;
	white-space: nowrap;
	align-self: center;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--citron);
	margin-bottom: 5px;
}
.wg-finale__day {
	display: block;
	font-family: var(--f-display);
	font-weight: 800;
	font-size: 2.5rem;
	line-height: 1;
	white-space: nowrap;
}
.wg-finale__title {
	font-family: var(--f-display);
	font-weight: 900;
	color: var(--paper);
	text-transform: uppercase;
	font-size: 1.75rem;
	line-height: 1;
	margin: 0 0 10px;
}
@media (min-width: 900px) { .wg-finale__title { font-size: 2rem; } }
.wg-finale__line { margin: 10px 0 0; font-size: 0.9375rem; color: rgba(242,245,251,.8); }
.wg-finale .wg-row__venue { color: var(--paper); }
.wg-finale .wg-row__city { color: rgba(242,245,251,.72); }
.wg-finale svg { color: rgba(242,245,251,.8); }

.wg-foot { margin-top: 26px; font-size: 0.875rem; color: var(--ink-soft); }

/* -------------------------------------------------------------- auditions */

.wg-aud { background: var(--paper); }
.wg-aud__grid { display: grid; gap: 40px; }
@media (min-width: 960px) { .wg-aud__grid { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } }

.wg-aud__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 8px; }

/* Season / off-season: one column, no ticket card. */
.wg-aud__closed { max-width: 760px; }
.wg-aud__closed .wg-lead { margin-top: 22px; }
.wg-aud__closed .wg-aud__actions { margin-top: 30px; }
.wg-aud__notify { margin-top: 30px; max-width: 520px; }
.wg-aud__notify .wpforms-container { margin: 0; }

/*
 * WPForms "modern markup" styles itself through CSS custom properties, so the
 * supported way to theme it is to redefine those on the container rather than
 * fight its selectors.
 */
.wg-aud__notify .wpforms-container {
	--wpforms-button-background-color: var(--navy);
	--wpforms-button-border-color: var(--navy);
	--wpforms-button-text-color: var(--paper);
	--wpforms-button-border-radius: 4px;
	--wpforms-button-size-height: 54px;
	--wpforms-button-size-font-size: 16px;
	--wpforms-button-size-padding-h: 24px;
	--wpforms-field-border-color: var(--card-line);
	--wpforms-field-border-radius: 4px;
	--wpforms-field-text-color: var(--ink);
	--wpforms-label-color: var(--navy);
	--wpforms-label-sublabel-color: var(--ink-soft);
	--wpforms-field-size-font-size: 16px;
}
.wg-aud__notify .wpforms-container .wpforms-submit:hover {
	--wpforms-button-background-color: #101a35;
}
.wg-aud__notify .wpforms-field-label { font-family: var(--f-text); font-weight: 700; }

/*
 * The audition details card.
 *
 * One white card on the Paper section: 32px of padding, hairline dividers
 * between the detail rows, and the price sitting top-right of the title so it
 * never needs a line of its own.
 */
.wg-ticket {
	background: var(--card);
	border: 1px solid var(--card-line);
	border-radius: var(--r-panel);
	padding: 32px;
}

/* Title left, price top-right, aligned on their first line. */
.wg-ticket__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}
.wg-ticket__title {
	margin: 0;
	font-family: var(--f-display);
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 0.92;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: var(--navy);
}
.wg-ticket__price {
	flex: none;
	font-family: var(--f-display);
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 0.92;
	color: var(--royal);
}
@media (min-width: 560px) {
	.wg-ticket__title { font-size: 2rem; }
	.wg-ticket__price { font-size: 2.5rem; }
}

/* Detail rows: icon on the left, the two text lines stacked beside it so they
   share one left edge. */
.wg-ticket__rows {
	margin: 24px 0 0;
	padding: 0;
	border-top: 1px solid var(--card-line);
}
.wg-ticket__row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid var(--card-line);
}
.wg-ticket__icon {
	flex: none;
	display: block;
	line-height: 0;
	color: var(--royal);
}
.wg-ticket__rows dt { font-weight: 700; line-height: 1.4; color: var(--navy); }
.wg-ticket__rows dd {
	margin: 3px 0 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--ink-soft);
}
/* A row with no heading is all secondary text, so it reads as the body line. */
.wg-ticket__row--note dd { margin-top: 0; }

.wg-ticket__cta { padding: 24px 0; }
.wg-btn--block { display: flex; width: 100%; min-height: 56px; }

.wg-ticket__foot .wg-eyebrow { margin-bottom: 12px; }
.wg-ticket__bring {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}
.wg-ticket__bring li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--ink);
}
.wg-ticket__bring svg { flex: none; margin-top: 2px; color: var(--royal); }

/* ------------------------------------------------------------------ staff */

.wg-staff { background: var(--card); }

.wg-person { height: 100%; display: flex; flex-direction: column; }
.wg-person__photo {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: var(--r-btn);
	overflow: hidden;
	background: var(--paper);
	margin-bottom: 16px;
}
/* Headshots are cropped to the same 4:5 frame. Pulling the crop above centre
   keeps faces in the upper third whatever the source photo's framing. */
.wg-person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.wg-person__photo picture { display: block; width: 100%; height: 100%; }

/* Shown until a headshot is attached; the photo then replaces it. */
.wg-person__photo--initials {
	background: var(--royal);
	display: flex;
	align-items: center;
	justify-content: center;
}
.wg-person__initials {
	font-family: var(--f-display);
	font-size: 4rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--paper);
	user-select: none;
}
.wg-person__name { font-size: 1.125rem; font-weight: 700; color: var(--navy); margin: 0 0 4px; }
.wg-person__role {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--royal);
	margin: 0 0 10px;
}
.wg-person__bio { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--ink-soft); }
/* The title is optional. With one, the rhythm is name -4px- title -10px- bio.
   Without one, the bio should sit the same 10px below the name. The card is a
   flex column, so adjacent margins do not collapse — hence 6px on top of the
   name's own 4px rather than 10px. */
.wg-person__name + .wg-person__bio,
.wg-person__name + .wg-person__more { margin-top: 6px; }

.wg-person__more { margin-top: auto; padding-top: 10px; }
.wg-person__more summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--navy);
	list-style: none;
	min-height: 44px;
	display: flex;
	align-items: center;
	border-bottom: 2px solid var(--azure);
	width: fit-content;
}
.wg-person__more summary::-webkit-details-marker { display: none; }
.wg-person__full { font-size: 0.875rem; line-height: 1.6; color: var(--ink-soft); }
.wg-person__full p { margin: 10px 0 0; }

/* ---------------------------------------------------------------- support */

.wg-support { background: var(--paper); }
.wg-support__top { display: grid; gap: 34px; }
@media (min-width: 960px) { .wg-support__top { grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: start; } }
.wg-support .wg-lead { margin-top: 22px; }

.wg-give {
	background: var(--card);
	border: 1px solid var(--card-line);
	border-radius: var(--r-panel);
	padding: 26px;
}
@media (min-width: 900px) { .wg-give { padding: 34px; } }
.wg-give__title {
	font-family: var(--f-display);
	font-weight: 900;
	text-transform: uppercase;
	font-size: clamp(1.75rem, 3.2vw, 2.25rem);
	line-height: 0.95;
	color: var(--navy);
	margin: 0 0 20px;
	padding-bottom: 20px;
	border-bottom: 2px solid var(--azure);
}
.wg-give__body { margin: 0 0 22px; font-size: 0.9375rem; color: var(--ink); line-height: 1.6; }
.wg-give__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.wg-impact { list-style: none; margin: 52px 0 0; padding: 0; display: grid; gap: 30px; }
@media (min-width: 800px) { .wg-impact { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.wg-impact__item { border-top: 1px solid var(--hair); padding-top: 20px; }
.wg-impact__icon { display: block; color: var(--royal); margin-bottom: 20px; line-height: 0; }
.wg-impact__title { font-size: 1.0625rem; font-weight: 700; color: var(--navy); margin: 0 0 8px; }
.wg-impact__body { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-soft); }

.wg-alumni {
	margin-top: 44px;
	background: var(--card);
	border: 1px solid var(--card-line);
	border-radius: var(--r-panel);
	padding: 26px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
@media (min-width: 900px) { .wg-alumni { padding: 30px 34px; } }
.wg-alumni__title {
	font-family: var(--f-serif);
	font-style: italic;
	font-size: 1.5rem;
	color: var(--navy);
	margin: 0 0 6px;
}
.wg-alumni__body { margin: 0; font-size: 0.9375rem; color: var(--ink-soft); }

/* -------------------------------------------------------------------- FAQ */

.wg-faq { background: var(--card); }
.wg-faq__grid { display: grid; gap: 36px; }
@media (min-width: 900px) { .wg-faq__grid { grid-template-columns: 1fr 1.6fr; gap: 64px; align-items: start; } }
.wg-faq__intro { margin: 18px 0 10px; color: var(--ink-soft); }
/* Breathing room under the headline, and the email in Royal per the palette. */
.wg-faq__aside .wg-tlink {
	margin-top: 28px;
	font-size: 1rem;
	color: var(--royal);
}
.wg-faq__aside .wg-tlink:hover { color: var(--navy); }

.wg-faq__list { border-top: 2px solid var(--navy); }
.wg-faq__item { border-bottom: 1px solid var(--hair); }
.wg-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 0;
	min-height: 44px;
	cursor: pointer;
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--navy);
	list-style: none;
}
.wg-faq__q::-webkit-details-marker { display: none; }

/* Plus that becomes a minus, drawn in CSS to avoid swapping icons in JS. */
.wg-faq__sign { position: relative; width: 18px; height: 18px; flex: none; }
.wg-faq__sign::before,
.wg-faq__sign::after {
	content: "";
	position: absolute;
	background: var(--navy);
	transition: transform .2s ease, opacity .2s ease;
}
.wg-faq__sign::before { top: 8px; left: 0; width: 18px; height: 1.6px; }
.wg-faq__sign::after { left: 8px; top: 0; width: 1.6px; height: 18px; }
.wg-faq__item[open] .wg-faq__sign::after { transform: scaleY(0); opacity: 0; }

.wg-faq__a { padding-bottom: 24px; color: var(--ink-soft); line-height: 1.6; max-width: 62ch; }
.wg-faq__a p { margin: 0 0 1em; }
.wg-faq__a p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- closing */

.wg-closing { background: var(--royal); color: var(--paper); }
.wg-closing__inner { display: grid; gap: 30px; }
@media (min-width: 900px) {
	.wg-closing__inner { grid-template-columns: 1.4fr auto; align-items: center; gap: 48px; }
}
.wg-closing__title { color: var(--paper); }
.wg-closing__side { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
@media (min-width: 900px) { .wg-closing__side { align-items: flex-end; } }
.wg-closing__sub { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--paper); }

/* Social row in the closing banner. */
.wg-social { margin-top: 20px; width: 100%; }
.wg-social__label {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(242, 245, 251, .7);
}
.wg-social__list {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.wg-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44px tap target around a 24px glyph. */
	width: 44px;
	height: 44px;
	margin-inline-start: -10px;
	color: var(--paper);
	text-decoration: none;
	border-radius: 4px;
	transition: color .18s ease;
}
.wg-social__list li:not(:first-child) .wg-social__link { margin-inline-start: 0; }
.wg-social__link:hover,
.wg-social__link:focus-visible { color: var(--citron); }
.wg-social__glyph { display: block; }

@media (min-width: 900px) {
	/* The side column is right-aligned on desktop; the row follows it. */
	.wg-social { text-align: right; }
	.wg-social__list { justify-content: flex-end; }
	.wg-social__link { margin-inline-start: 0; }
	.wg-social__list li:last-child .wg-social__link { margin-inline-end: -10px; }
}

/* The banner keeps the same air top and bottom. Clearance for the sticky
   Register bar is reserved once, at the end of the page, rather than being
   padded in here as well — see .mbiwg.has-stickybar below. */

/* ---------------------------------------------------- season quick view */

.wg-panel { position: fixed; inset: 0; z-index: 10000; }
.wg-panel[hidden] { display: none; }

.wg-panel__overlay {
	position: absolute;
	inset: 0;
	background: rgba(6, 12, 30, .45);
	opacity: 0;
	transition: opacity .25s ease;
}
.wg-panel.is-open .wg-panel__overlay { opacity: 1; }

.wg-panel__sheet {
	position: absolute;
	background: var(--card);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Mobile: bottom sheet. */
.wg-panel__sheet {
	left: 0; right: 0; bottom: 0;
	max-height: 88vh;
	border-radius: 14px 14px 0 0;
	transform: translateY(100%);
	transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
.wg-panel.is-open .wg-panel__sheet { transform: translateY(0); }

.wg-panel__grip {
	width: 44px; height: 4px;
	border-radius: 999px;
	background: var(--hair);
	margin: 10px auto 2px;
	flex: none;
}

/* Desktop: 600px panel sliding in from the right. */
@media (min-width: 860px) {
	.wg-panel__sheet {
		top: 0; bottom: 0; right: 0; left: auto;
		width: 600px;
		max-width: 92vw;
		max-height: none;
		border-radius: 0;
		transform: translateX(100%);
		transition: transform .3s cubic-bezier(.22,.61,.36,1);
	}
	.wg-panel.is-open .wg-panel__sheet { transform: translateX(0); }
	.wg-panel__grip { display: none; }
}

.wg-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--hair);
	flex: none;
}
.wg-panel__head .wg-eyebrow { margin: 0; }
.wg-panel__nav { display: flex; gap: 8px; }
.wg-panel__body { overflow-y: auto; padding: 20px; -webkit-overflow-scrolling: touch; }
@media (min-width: 860px) { .wg-panel__body { padding: 24px; } }

.wg-season[hidden] { display: none; }
.wg-season__media { border-radius: var(--r-btn); overflow: hidden; margin-bottom: 20px; }
.wg-season__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.wg-season__year { font-size: 0.9375rem; font-weight: 600; color: var(--ink-soft); margin: 0 0 4px; }
.wg-season__title {
	font-family: var(--f-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(36px, 4.4vw, 64px);
	line-height: 1;
	color: var(--navy);
	margin: 0 0 8px;
}
.wg-season__official { margin: 0 0 8px; color: var(--ink-soft); font-size: 0.9375rem; }
.wg-season__summary { margin: 0 0 6px; color: var(--ink); }
.wg-season__result { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--royal); }
.wg-season__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 22px; }
.wg-season__actions .wg-btn { flex: 1 1 auto; min-height: 50px; }

.wg-season__people {
	display: grid;
	gap: 20px;
	padding-top: 22px;
	border-top: 2px solid var(--azure);
}
@media (min-width: 560px) { .wg-season__people { grid-template-columns: repeat(3, 1fr); } }
.wg-season__col ul { list-style: none; margin: 0; padding: 0; }
.wg-season__col li { font-size: 0.9375rem; color: var(--ink); padding: 2px 0; }

.wg-season__gallery { margin-top: 24px; }
.wg-season__gallery ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}
.wg-season__gallery button {
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	border-radius: var(--r-btn);
	overflow: hidden;
	display: block;
	width: 100%;
}
.wg-season__gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* --------------------------------------------------------------- lightbox */

.wg-lightbox { position: fixed; inset: 0; z-index: 10010; display: flex; align-items: center; justify-content: center; }
.wg-lightbox[hidden] { display: none; }
.wg-lightbox__overlay { position: absolute; inset: 0; background: rgba(6, 12, 30, .88); }
.wg-lightbox__inner { position: relative; width: min(1100px, 92vw); }
.wg-lightbox__stage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--r-card); overflow: hidden; }
.wg-lightbox__stage iframe,
.wg-lightbox__stage img { width: 100%; height: 100%; border: 0; display: block; object-fit: contain; }
.wg-lightbox__stage:has(img) { aspect-ratio: auto; background: transparent; }
.wg-lightbox__close {
	position: absolute;
	top: -52px; right: 0;
	width: 44px; height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(242,245,251,.12);
	color: var(--paper);
	cursor: pointer;
}

/* ------------------------------------------------------ mobile sticky bar */

.wg-stickybar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 95;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	background: var(--navy);
	color: var(--paper);
	transform: translateY(100%);
	transition: transform .25s ease;
}
.wg-stickybar[hidden] { display: none; }
.wg-stickybar.is-visible { transform: translateY(0); }
.wg-stickybar__title { margin: 0; font-weight: 700; font-size: 0.9375rem; }
.wg-stickybar__meta { margin: 2px 0 0; font-size: 0.8125rem; color: rgba(242,245,251,.72); }
.wg-stickybar__meta strong { color: var(--paper); }

@media (min-width: 860px) { .wg-stickybar { display: none !important; } }

/*
 * No extra room is reserved at the end of the page, deliberately. The bar
 * stands down while the closing banner is on screen, so the last of this
 * page's content is never behind it, and padding here would only put back
 * the empty strip under the social icons that we just took out.
 */

/* --------------------------------------------------- reduced motion, print */

@media (prefers-reduced-motion: reduce) {
	.mbiwg *,
	.wg-panel__sheet,
	.wg-panel__overlay,
	.wg-stickybar {
		transition-duration: .001ms !important;
		animation-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.wg-subnav, .wg-stickybar, .wg-panel, .wg-lightbox { display: none !important; }
	.wg-sec { padding-block: 24px; }
}