/*
 * Gala — site chrome, front page and the Gala Store plugin's UI.
 *
 * Layers (documented z-index scale, see tokens.css):
 *   header 20 · dropdown / floating pills 30 · redeem modal 100
 * Components that stack set `isolation: isolate` so those numbers stay local.
 */

/* ================================================================ Utilities */

.container {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--narrow {
	max-width: calc(48rem + var(--gutter) * 2);
}

.section {
	padding-block: var(--section-y);
}

.section--tight {
	padding-block: var(--sp-7);
}

/*
 * Section rhythm on a black page is a hairline and a half-step lift, not a colour change:
 * cream became the raised near-black surface.
 */
.section--cream {
	background: var(--c-surface);
	border-block: 1px solid var(--c-line);
}

.section--paper {
	background: var(--c-paper);
}

.section__head {
	max-width: 44rem;
	margin-bottom: var(--sp-7);
}

.section__lede {
	margin-top: var(--sp-3);
	max-width: 60ch;
	color: var(--c-muted);
}

/* The invitation sets every supporting line in wide gold small caps. */
.eyebrow {
	font-size: var(--fs-eyebrow);
	font-weight: 500;
	letter-spacing: var(--track-caps);
	text-transform: uppercase;
	color: var(--c-gold-text);
}

.prose {
	max-width: 70ch;
	color: var(--c-ink-2);
}

.prose p + p,
.prose ul,
.prose ol {
	margin-top: var(--sp-4);
}

.prose ul,
.prose ol {
	padding-left: 1.25rem;
}

.prose li + li {
	margin-top: var(--sp-2);
}

.prose h2,
.prose h3 {
	margin-top: var(--sp-6);
	margin-bottom: var(--sp-3);
}

.screen-reader-text {
	position: absolute !important; /* Core utility: must beat any layout rule it lands inside. */
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: var(--sp-3);
	left: var(--sp-3);
	z-index: var(--z-modal);
	padding: var(--sp-2) var(--sp-4);
	border-radius: var(--radius-s);
	background: var(--c-gold);
	color: var(--c-on-gold);
	font-size: var(--fs-small);
	font-weight: 500;
	text-decoration: none;
	transform: translateY(calc(-100% - var(--sp-4)));
	transition: transform 150ms var(--ease);
}

.skip-link:focus {
	transform: translateY(0);
	color: var(--c-on-gold);
}

/* ====================================================== Invitation ornaments */

/*
 * The art-deco double rule from the invitation: two thin gold rectangles offset on the
 * diagonal so their lines cross just short of each corner. Decorative, never interactive.
 */
.deco-frame {
	position: absolute;
	inset: clamp(1rem, 3vw, 2.5rem);
	pointer-events: none;
}

.deco-frame::before,
.deco-frame::after {
	content: "";
	position: absolute;
	border: 1px solid var(--c-gold-line);
}

.deco-frame::before {
	top: 0;
	right: clamp(7px, .9vw, 11px);
	bottom: clamp(7px, .9vw, 11px);
	left: 0;
}

.deco-frame::after {
	top: clamp(7px, .9vw, 11px);
	right: 0;
	bottom: 0;
	left: clamp(7px, .9vw, 11px);
	border-color: rgba(212, 175, 94, .42);
}

/* Star dust: fixed positions written into the markup, no animation, no gradient. */
.deco-dust {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.deco-dust i {
	position: absolute;
	top: var(--y);
	left: var(--x);
	display: block;
	width: var(--s);
	height: var(--s);
	border-radius: 50%;
	background: var(--c-ink);
	opacity: var(--o);
}

.deco-dust i.is-gold {
	background: var(--c-gold-bright);
}

/* Gold hairline broken by a small diamond, exactly as the invitation divides its lines. */
.ornament {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-3);
	/* Stays clear of the deco frame on a narrow screen, where both want the same inches. */
	width: min(22rem, 68%);
}

.ornament::before,
.ornament::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--c-gold-line);
}

.ornament__mark {
	flex: none;
	width: 6px;
	height: 6px;
	background: var(--c-gold);
	transform: rotate(45deg);
}

/* ================================================================== Buttons */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-height: 48px;
	padding: 0 1.375rem;
	border: 1.5px solid transparent;
	border-radius: var(--radius-s);
	background: none;
	color: inherit;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--dur) var(--ease),
		border-color var(--dur) var(--ease),
		color var(--dur) var(--ease),
		transform var(--dur) var(--ease);
}

.button:active {
	transform: translateY(1px);
}

.button:disabled,
.button.is-disabled {
	opacity: .45;
	pointer-events: none;
}

/*
 * Primary is gold. Near-black on #D4AF5E is 8.8:1 and on the brighter hover gold 11.5:1, so
 * the label holds its contrast in both states.
 */
.button--primary,
.button--gold {
	background: var(--c-gold);
	border-color: var(--c-gold);
	color: var(--c-on-gold);
}

.button--primary:hover,
.button--gold:hover {
	background: var(--c-gold-bright);
	border-color: var(--c-gold-bright);
	color: var(--c-on-gold);
}

.button--secondary,
.button--outline-white {
	border-color: var(--c-gold);
	color: var(--c-gold-text);
}

.button--secondary:hover,
.button--outline-white:hover {
	background: var(--c-gold);
	border-color: var(--c-gold);
	color: var(--c-on-gold);
}

/* Kept for any surface that inverts: a quiet outline in warm white. */
.button--on-red {
	border-color: rgba(245, 241, 232, .5);
	color: var(--c-ink);
}

.button--on-red:hover {
	background: var(--c-ink);
	border-color: var(--c-ink);
	color: var(--c-on-gold);
}

.button--sm {
	min-height: 40px;
	padding: 0 var(--sp-4);
	font-size: var(--fs-small);
}

.button--block {
	width: 100%;
}

.link-quiet {
	color: var(--c-muted);
	font-size: var(--fs-small);
	text-decoration: underline;
	text-underline-offset: .18em;
	transition: color var(--dur) var(--ease);
}

.link-quiet:hover {
	color: var(--c-gold-text);
}

/* =================================================================== Fields */

/*
 * One field treatment across the whole store: dark input, warm-white text, gold on focus.
 * `color-scheme: dark` in tokens.css keeps native selects, calendars and scrollbars in step.
 */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="password"],
select,
textarea {
	width: 100%;
	min-height: 48px;
	padding: 0 var(--sp-3);
	border: 1.5px solid var(--c-line-strong);
	border-radius: var(--radius-s);
	background: var(--c-surface-2);
	color: var(--c-ink);
	font-size: 1rem;
	transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

textarea {
	min-height: 6.5rem;
	padding: var(--sp-3);
	line-height: 1.55;
	resize: vertical;
}

input:hover,
select:hover,
textarea:hover {
	border-color: var(--c-gold-dark);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--c-gold);
	background: var(--c-surface);
	outline: none;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--c-gold);
	outline-offset: 1px;
}

input:disabled,
select:disabled,
textarea:disabled {
	opacity: .45;
	cursor: not-allowed;
}

/* Chromium paints its own pale autofill background; repaint it as the dark field. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
	-webkit-text-fill-color: var(--c-ink);
	-webkit-box-shadow: 0 0 0 1000px var(--c-surface-2) inset;
	caret-color: var(--c-ink);
}

::placeholder {
	color: var(--c-muted);
	opacity: 1;
}

/* ============================================================== Announcement */

.announcement {
	background: var(--c-gold);
}

.announcement__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding: .625rem var(--gutter);
	color: var(--c-on-gold);
	font-size: var(--fs-small);
	text-align: center;
}

.announcement__mark {
	flex: none;
	color: var(--c-on-gold);
}

.admin-notice-bar {
	background: var(--c-red-tint);
	border-bottom: 1px solid var(--c-red);
}

.admin-notice-bar__inner {
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding: .5rem var(--gutter);
	color: var(--c-error);
	font-size: var(--fs-small);
	font-weight: 500;
	text-align: center;
}

/* =================================================================== Header */

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	isolation: isolate;
	background: var(--c-paper);
	border-bottom: 1px solid var(--c-gold-line);
}

/* Keep the sticky header clear of the WordPress admin bar. */
.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 600px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

.site-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--sp-4);
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding: var(--sp-3) var(--gutter);
}

.site-brand {
	display: flex;
	align-items: center;
	border-radius: var(--radius-s);
}

.site-brand__logo {
	width: auto;
	height: 44px;
}

.site-nav__list {
	display: flex;
	justify-content: center;
	gap: var(--sp-6);
	list-style: none;
}

.site-nav__list a {
	position: relative;
	display: inline-block;
	padding: var(--sp-2) 0;
	color: var(--c-ink);
	font-size: .9375rem;
	font-weight: 500;
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}

.site-nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--c-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur) var(--ease);
}

.site-nav__list a:hover {
	color: var(--c-gold-text);
}

.site-nav__list a:hover::after,
.site-nav__list a[aria-current="page"]::after,
.site-nav__list .current-menu-item > a::after {
	transform: scaleX(1);
}

.site-nav__list a[aria-current="page"],
.site-nav__list .current-menu-item > a {
	color: var(--c-gold-text);
}

.site-actions {
	display: flex;
	align-items: center;
	justify-self: end;
	gap: var(--sp-3);
}

.site-actions__code {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}

.credits-pill {
	display: inline-flex;
	align-items: baseline;
	gap: var(--sp-2);
	padding: .375rem .875rem;
	border: 1px solid var(--c-gold-line);
	border-radius: var(--radius-pill);
	background: var(--c-gold-tint);
	white-space: nowrap;
}

.credits-pill__value {
	color: var(--c-ink);
	font-size: var(--fs-small);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.credits-pill__code {
	color: var(--c-gold-text);
	font-family: var(--font-mono);
	font-size: .6875rem;
	letter-spacing: .02em;
}

.cart-link {
	position: relative;
	display: inline-flex;
	padding: var(--sp-2);
	border-radius: var(--radius-s);
	color: var(--c-ink);
	transition: color var(--dur) var(--ease);
}

.cart-link:hover {
	color: var(--c-gold-text);
}

.cart-link__count {
	position: absolute;
	top: -1px;
	right: -3px;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: var(--radius-pill);
	background: var(--c-gold);
	color: var(--c-on-gold);
	font-size: .6875rem;
	font-weight: 500;
	line-height: 19px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--c-gold-line);
	border-radius: var(--radius-s);
	background: none;
	color: var(--c-ink);
	cursor: pointer;
	transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.nav-toggle:hover {
	border-color: var(--c-gold);
}

.nav-toggle[aria-expanded="true"] {
	border-color: var(--c-gold);
	color: var(--c-gold-text);
}

/* ===================================================================== Hero */

/*
 * The 2026 invitation, rebuilt: black canvas, gold double frame, star dust, one faint red
 * glow low behind the frame, the gold GALA wordmark, and the white lockup at the foot.
 */
.hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 82vh;
	/* The inline padding has to clear the deco frame, which is inset from the same edge. */
	padding: clamp(3.5rem, 8vw, 6rem) clamp(2rem, 7vw, 4.5rem);
	background: var(--c-paper);
	color: var(--c-ink);
	overflow: hidden;
}

/*
 * The single sanctioned gradient in the theme. It is the key visual from the invitation:
 * one low-intensity red wisp curling up behind the frame.
 */
.hero__glow {
	position: absolute;
	bottom: -22%;
	left: 50%;
	z-index: 0;
	width: min(60rem, 108%);
	height: 72%;
	transform: translateX(-50%);
	background: radial-gradient(closest-side, var(--c-red-glow), rgba(230, 19, 54, 0) 74%);
	pointer-events: none;
}

.hero__frame {
	z-index: 0;
}

.hero__dust {
	z-index: 0;
}

.hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 46rem;
	text-align: center;
}

.hero__eyebrow {
	color: var(--c-gold-text);
	font-size: var(--fs-eyebrow);
	font-weight: 500;
	letter-spacing: var(--track-caps-wide);
	text-transform: uppercase;
	/* Tracking trails the last letter; take it back so the line reads centred. */
	padding-inline-start: var(--track-caps-wide);
}

/* Wordmark and year travel together, as the invitation has them. */
.hero__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-4);
	margin-top: var(--sp-5);
}

.hero__wordmark {
	width: clamp(168px, 25vw, 288px);
	height: auto;
}

.hero__year {
	writing-mode: vertical-rl;
	color: var(--c-gold-text);
	font-size: clamp(.875rem, 1.6vw, 1.125rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: .3em;
	padding-block-end: .3em;
}

/* The invitation sets the heroes line modestly, in white spaced caps under the big GALA. */
.hero__title {
	max-width: 30ch;
	margin-top: var(--sp-6);
	color: var(--c-ink);
	font-size: clamp(.9375rem, 1.5vw, 1.1875rem);
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: var(--track-caps);
	text-transform: uppercase;
	padding-inline-start: var(--track-caps);
}

.hero__text {
	max-width: 42rem;
	margin-top: var(--sp-4);
	color: var(--c-muted);
}

.hero__ornament {
	margin-top: var(--sp-6);
}

.hero__logo {
	width: 132px;
	height: auto;
	margin-top: var(--sp-6);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-3);
	margin-top: var(--sp-6);
}

/* ============================================================ How it works */

.steps__title {
	margin-bottom: var(--sp-7);
	text-align: center;
}

.steps__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-6);
	list-style: none;
}

.step {
	padding-top: var(--sp-4);
	border-top: 1px solid var(--c-gold-line);
}

.step__icon {
	display: block;
	color: var(--c-gold);
}

.step__title {
	margin-top: var(--sp-3);
}

.step__text {
	max-width: 36ch;
	margin-top: var(--sp-2);
	color: var(--c-muted);
}

/* ============================================================== Category tiles */

.gala-cats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-5) var(--sp-4);
	list-style: none;
}

.gala-cats__item {
	display: flex;
}

.gala-cat {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-m);
	background: var(--c-surface);
	text-decoration: none;
	transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.gala-cat:hover {
	border-color: var(--c-gold);
	transform: translateY(-2px);
}

/* The category art is a white-background photograph; its tile stays white. */
.gala-cat__media {
	display: block;
	padding: 12%;
	background: var(--c-photo);
}

/* The square comes from the image itself: an aspect-ratio box would grow for tall art. */
.gala-cat__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
}

.gala-cat__media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	background: var(--c-surface-2);
	color: var(--c-gold);
}

.gala-cat__media--empty svg {
	width: 56px;
	height: 56px;
	stroke-width: 1;
}

.gala-cat__body {
	padding: var(--sp-4);
	border-top: 1px solid var(--c-line);
}

.gala-cat__name {
	color: var(--c-gold-text);
	font-weight: 500;
	line-height: 1.35;
}

.gala-cat__count {
	margin-top: var(--sp-1);
	color: var(--c-muted);
	font-size: var(--fs-small);
	font-variant-numeric: tabular-nums;
}

/* ====================================================================== FAQ */

.faq-section__title {
	text-align: center;
}

.faq-list {
	margin-top: var(--sp-6);
	border-top: 1px solid var(--c-gold-line);
}

.faq {
	border-bottom: 1px solid var(--c-gold-line);
}

.faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: var(--sp-4) 0;
	color: var(--c-ink);
	font-size: 1.0625rem;
	font-weight: 500;
	list-style: none;
	cursor: pointer;
	transition: color var(--dur) var(--ease);
}

.faq__q::-webkit-details-marker {
	display: none;
}

.faq__q:hover {
	color: var(--c-gold-text);
}

.faq__chevron {
	flex: none;
	color: var(--c-gold);
	transition: transform var(--dur) var(--ease);
}

.faq[open] .faq__chevron {
	transform: rotate(180deg);
}

.faq__a {
	max-width: 68ch;
	padding-bottom: var(--sp-5);
	color: var(--c-ink-2);
}

.faq[open] .faq__a {
	animation: gala-reveal 200ms var(--ease);
}

@keyframes gala-reveal {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.contact-band__text {
	color: var(--c-muted);
	font-size: var(--fs-small);
	text-align: center;
}

/* ==================================================== Stage — 404 and closed */

.stage {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(3.5rem, 10vw, 7rem) clamp(2rem, 7vw, 4.5rem);
	background: var(--c-paper);
	text-align: center;
	overflow: hidden;
}

.stage--light {
	min-height: 60vh;
}

/* The closed-store poster: the invitation itself, full bleed. */
.stage--poster {
	min-height: 100vh;
	min-height: 100svh;
}

.stage__glow {
	position: absolute;
	bottom: -20%;
	left: 50%;
	z-index: 0;
	width: min(56rem, 108%);
	height: 66%;
	transform: translateX(-50%);
	background: radial-gradient(closest-side, var(--c-red-glow), rgba(230, 19, 54, 0) 74%);
	pointer-events: none;
}

.stage__frame,
.stage__dust {
	z-index: 0;
}

.stage__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 42rem;
}

.stage__eyebrow {
	color: var(--c-gold-text);
	font-size: var(--fs-eyebrow);
	font-weight: 500;
	letter-spacing: var(--track-caps-wide);
	text-transform: uppercase;
	padding-inline-start: var(--track-caps-wide);
}

.stage__wordmark {
	width: clamp(148px, 24vw, 244px);
	height: auto;
	margin-top: var(--sp-5);
}

.stage__title {
	margin-top: var(--sp-6);
	font-size: var(--fs-h1);
}

/* On the poster the title takes the invitation's white spaced caps. */
.stage--poster .stage__title {
	max-width: 26ch;
	font-size: clamp(1.0625rem, 1.9vw, 1.4375rem);
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: var(--track-caps);
	text-transform: uppercase;
	padding-inline-start: var(--track-caps);
}

.stage__text {
	max-width: 38rem;
	margin-top: var(--sp-4);
	color: var(--c-muted);
}

.stage__ornament {
	margin-top: var(--sp-6);
}

.stage__contact {
	margin-top: var(--sp-5);
	font-size: var(--fs-small);
	color: var(--c-muted);
}

.stage__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-3);
	margin-top: var(--sp-6);
}

.stage__logo {
	width: 132px;
	height: auto;
	margin-top: var(--sp-6);
}

/* ============================================================ Page scaffold */

.page-shell {
	padding-block: clamp(2rem, 4vw, 3.5rem) var(--section-y);
}

.page-header {
	margin-bottom: var(--sp-7);
}

.page-header__title {
	margin-top: var(--sp-2);
}

.page-header__lede,
.page-header__count {
	margin-top: var(--sp-3);
	color: var(--c-muted);
}

.page-header__count {
	font-size: var(--fs-small);
	font-variant-numeric: tabular-nums;
}

.page-header__desc {
	max-width: 70ch;
	margin-top: var(--sp-4);
	color: var(--c-ink-2);
}

.page-content > * + * {
	margin-top: var(--sp-4);
}

.post-list {
	display: grid;
	gap: var(--sp-5);
}

.post-card {
	padding-bottom: var(--sp-5);
	border-bottom: 1px solid var(--c-line);
}

.post-card__title {
	font-size: 1.375rem;
}

.post-card__title a {
	color: var(--c-ink);
	text-decoration: none;
}

.post-card__title a:hover {
	color: var(--c-gold-text);
}

.post-card__excerpt {
	margin-top: var(--sp-2);
	color: var(--c-muted);
}

/* =========================================================== Shared pieces */

/* Credits read as gold now, never red. */
.credits-tag {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 var(--sp-2);
	border: 1px solid var(--c-gold-line);
	border-radius: var(--radius-s);
	background: var(--c-gold-tint);
	color: var(--c-gold-text);
	font-size: .75rem;
	font-weight: 500;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.credits-tag--lg {
	height: 34px;
	padding: 0 var(--sp-3);
	font-size: .9375rem;
}

.notice-inline {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--c-gold-line);
	border-radius: var(--radius-s);
	background: var(--c-gold-tint);
	color: var(--c-ink-2);
	font-size: var(--fs-small);
}

.notice-inline__icon {
	flex: none;
	margin-top: 2px;
	color: var(--c-gold);
}

.empty-state {
	padding: clamp(2.5rem, 6vw, 4rem) var(--sp-5);
	border: 1px dashed var(--c-gold-line);
	border-radius: var(--radius-m);
	background: var(--c-surface);
	text-align: center;
}

.empty-state__title {
	color: var(--c-ink);
	font-size: 1.375rem;
	font-weight: 500;
}

.empty-state__text {
	max-width: 44ch;
	margin: var(--sp-3) auto 0;
	color: var(--c-muted);
}

.empty-state .button {
	margin-top: var(--sp-5);
}

/* ==================================================================== Footer */

.site-footer {
	border-top: 1px solid var(--c-gold-line);
	background: var(--c-surface);
}

.site-footer__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--sp-5);
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding: var(--sp-7) var(--gutter);
}

.site-footer__brand {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}

.site-footer__plate {
	display: flex;
}

.site-footer__logo {
	width: auto;
	height: 30px;
}

.site-footer__label {
	color: var(--c-ink);
	font-size: var(--fs-small);
	font-weight: 500;
}

.site-footer__list {
	display: flex;
	justify-content: center;
	gap: var(--sp-5);
	list-style: none;
}

.site-footer__list a {
	color: var(--c-ink-2);
	font-size: var(--fs-small);
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}

.site-footer__list a:hover {
	color: var(--c-gold-text);
}

.site-footer__help {
	color: var(--c-muted);
	font-size: var(--fs-small);
	text-align: right;
}

/* The gold sign-off bar carries over from 2025; near-black on #D4AF5E is 8.8:1. */
.site-footer__bar {
	background: var(--c-gold);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2) var(--sp-4);
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding: var(--sp-4) var(--gutter);
	color: var(--c-on-gold);
	font-size: .8125rem;
}

/*
 * The plugin's floating pill sits bottom-right and would land on the credit line. Only a
 * visitor without a code sees the fab on desktop, so the gold band stays slim otherwise.
 */
body:not(.gala-has-code) .site-footer__bottom {
	padding-bottom: 4.5rem;
}

.site-footer__bottom a {
	color: var(--c-on-gold);
	text-decoration: none;
}

.site-footer__bottom a:hover {
	color: var(--c-on-gold);
	text-decoration: underline;
}

.site-footer__bar :focus-visible {
	outline-color: var(--c-on-gold);
}

/* ============================================ Gala Store plugin UI (styled here) */

.gala-modal {
	z-index: var(--z-modal);
	padding: var(--sp-4);
}

.gala-modal__overlay {
	background: rgba(122, 6, 20, .80);
}

/* The dialog is a small piece of the invitation: deep red card, gold double hairline inside. */
.gala-modal__dialog {
	isolation: isolate;
	padding: clamp(2rem, 4.5vw, 3rem) clamp(1.75rem, 4vw, 2.75rem);
	border: 1px solid var(--c-gold-line);
	border-radius: var(--radius-m);
	background: var(--c-surface-2);
	box-shadow: var(--shadow-modal);
	text-align: center;
}

.gala-modal__dialog > * {
	position: relative;
	z-index: 1;
}

.gala-modal__dialog::before,
.gala-modal__dialog::after {
	content: "";
	position: absolute;
	z-index: 0;
	border: 1px solid var(--c-gold-line);
	pointer-events: none;
}

.gala-modal__dialog::before {
	top: 13px;
	right: 21px;
	bottom: 21px;
	left: 13px;
}

.gala-modal__dialog::after {
	top: 21px;
	right: 13px;
	bottom: 13px;
	left: 21px;
	border-color: rgba(212, 175, 94, .42);
}

.gala-modal__close {
	top: var(--sp-2);
	right: var(--sp-2);
	border-radius: var(--radius-s);
	color: var(--c-muted);
	transition: color var(--dur) var(--ease);
}

.gala-modal__close:hover {
	color: var(--c-gold-text);
}

.gala-modal__brand img {
	max-width: 124px;
}

.gala-modal__eyebrow {
	margin-top: var(--sp-5);
	color: var(--c-gold-text);
	font-size: var(--fs-eyebrow);
	font-weight: 500;
	letter-spacing: var(--track-caps);
	text-transform: uppercase;
	padding-inline-start: var(--track-caps);
}

.gala-modal__title {
	margin-top: var(--sp-3);
	font-size: 1.5rem;
	line-height: 1.2;
}

.gala-modal__text {
	max-width: 34rem;
	margin: var(--sp-3) auto 0;
	color: var(--c-muted);
	font-size: var(--fs-small);
}

.gala-redeem-form {
	margin-top: var(--sp-5);
	text-align: left;
}

.gala-redeem-form__label {
	display: block;
	margin-bottom: var(--sp-2);
	color: var(--c-ink);
	font-size: var(--fs-small);
	font-weight: 500;
}

.gala-redeem-form__input {
	font-family: var(--font-mono);
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* Typed codes are uppercased; the hint stays sentence case. */
.gala-redeem-form__input::placeholder {
	font-family: var(--font);
	letter-spacing: 0;
	text-transform: none;
}

.gala-redeem-form__input.is-error {
	border-color: var(--c-error);
}

/* A gold ring around a field the store has just rejected reads as approval; match the error. */
.gala-redeem-form__input.is-error:focus,
.gala-redeem-form__input.is-error:focus-visible {
	border-color: var(--c-error);
	outline-color: var(--c-error);
}

.gala-redeem-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 1.375rem;
	border: 1.5px solid var(--c-gold);
	border-radius: var(--radius-s);
	background: var(--c-gold);
	color: var(--c-on-gold);
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.gala-redeem-form__submit:hover {
	background: var(--c-gold-bright);
	border-color: var(--c-gold-bright);
}

.gala-redeem-form__submit:disabled {
	opacity: .45;
	pointer-events: none;
}

/* Red earns its place here: this is the one error state the visitor must not miss. */
.gala-redeem-form__error {
	margin-top: var(--sp-3);
	color: var(--c-error);
	font-size: var(--fs-small);
}

.gala-modal__note {
	margin-top: var(--sp-5);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--c-gold-line);
	color: var(--c-muted);
	font-size: var(--fs-small);
}

.gala-fab {
	z-index: var(--z-dropdown);
	right: var(--sp-4);
	bottom: var(--sp-4);
	min-height: 44px;
	padding: 0 var(--sp-5);
	/*
	 * The pill floats over the gold footer bar on a short page; a near-black edge is what keeps
	 * gold on gold from dissolving, and it disappears against the dark page above.
	 */
	border: 1.5px solid var(--c-on-gold);
	border-radius: var(--radius-pill);
	background: var(--c-gold);
	color: var(--c-on-gold);
	font-size: var(--fs-small);
	font-weight: 500;
	box-shadow: var(--shadow-panel);
	transition: background-color var(--dur) var(--ease);
}

.gala-fab:hover {
	background: var(--c-gold-bright);
}

/*
 * `.gala-credits` is used by the plugin for two different things: the floating badge
 * (a <div> carrying data-remaining) and the <span> wrapper around every rendered price.
 * Everything below is scoped to the badge so prices stay inline text.
 */
.gala-credits[data-remaining] {
	z-index: var(--z-dropdown);
	right: var(--sp-4);
	bottom: var(--sp-4);
	align-items: center;
	max-width: calc(100vw - var(--sp-8));
	padding: var(--sp-2) var(--sp-4);
	border: 1px solid var(--c-gold-line);
	border-radius: var(--radius-m);
	background: var(--c-surface-2);
	box-shadow: var(--shadow-panel);
	column-gap: var(--sp-2);
	row-gap: var(--sp-1);
}

span.gala-credits,
.woocommerce-Price-amount.gala-credits {
	position: static;
	display: inline;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.gala-credits__label {
	color: var(--c-gold-text);
	font-size: .625rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.gala-credits__value {
	color: var(--c-ink);
	font-size: 1.0625rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.gala-credits__code {
	color: var(--c-muted);
	font-family: var(--font-mono);
	font-size: .6875rem;
}

.gala-credits__leave {
	width: 100%;
	color: var(--c-muted);
	font-size: .75rem;
	text-underline-offset: .18em;
}

.gala-credits__leave:hover {
	color: var(--c-gold-text);
}

.gala-access {
	position: relative;
	isolation: isolate;
	max-width: 46rem;
	margin-inline: auto;
	padding: clamp(2.25rem, 5vw, 3.5rem);
	border: 1px solid var(--c-gold-line);
	border-radius: var(--radius-m);
	background: var(--c-surface);
	text-align: center;
}

.gala-access__eyebrow {
	color: var(--c-gold-text);
	font-size: var(--fs-eyebrow);
	font-weight: 500;
	letter-spacing: var(--track-caps);
	text-transform: uppercase;
	padding-inline-start: var(--track-caps);
}

.gala-access__title {
	margin-top: var(--sp-3);
	font-size: 1.75rem;
	line-height: 1.2;
}

.gala-access__text {
	max-width: 46ch;
	margin: var(--sp-3) auto 0;
	color: var(--c-muted);
}

.gala-access__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin-top: var(--sp-5);
	padding: 0 1.375rem;
	border: 1.5px solid var(--c-gold);
	border-radius: var(--radius-s);
	background: var(--c-gold);
	color: var(--c-on-gold);
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.gala-access__button:hover {
	background: var(--c-gold-bright);
	border-color: var(--c-gold-bright);
}

/* ============================================================== Breakpoints */

@media (max-width: 1199.98px) {
	.site-nav__list {
		gap: var(--sp-5);
	}
}

@media (max-width: 1023.98px) {
	.site-header {
		position: sticky;
	}

	.site-actions__code {
		display: none;
	}

	.nav-toggle {
		display: inline-flex;
	}

	.site-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: var(--z-dropdown);
		display: none;
		padding: var(--sp-4) var(--gutter) var(--sp-5);
		border-bottom: 1px solid var(--c-gold-line);
		background: var(--c-surface);
		box-shadow: var(--shadow-panel);
	}

	.site-nav.is-open {
		display: block;
	}

	.site-nav__list {
		flex-direction: column;
		gap: 0;
	}

	.site-nav__list li + li {
		border-top: 1px solid var(--c-line);
	}

	.site-nav__list a {
		display: block;
		padding: var(--sp-3) 0;
		font-size: 1.0625rem;
	}

	.site-nav__list a::after {
		display: none;
	}

	.site-nav__foot {
		margin-top: var(--sp-4);
	}

	.gala-cats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.site-footer__inner {
		grid-template-columns: 1fr;
		justify-items: start;
		gap: var(--sp-4);
	}

	.site-footer__list {
		justify-content: flex-start;
	}

	.site-footer__help {
		text-align: left;
	}
}

@media (max-width: 1023.98px) {
	/* Below 1024 the credits badge floats too, and it is taller than the fab. */
	.site-footer__bottom,
	body:not(.gala-has-code) .site-footer__bottom {
		padding-bottom: 6.5rem;
	}
}

@media (min-width: 1024px) {
	.site-nav__foot {
		display: none;
	}

	.gala-credits[data-remaining] {
		display: none;
	}
}

@media (max-width: 767.98px) {
	.steps__list {
		grid-template-columns: 1fr;
		gap: var(--sp-5);
	}

	.step {
		padding: 0 0 0 var(--sp-4);
		border-top: 0;
		border-left: 1px solid var(--c-gold-line);
	}

	.step__text {
		max-width: none;
	}

	.hero {
		min-height: 0;
	}
}

@media (max-width: 559.98px) {
	/*
	 * The tiles stay two to a row all the way down to 375px — one column of square tiles ran
	 * the home page past 6000px. Only the label tightens; the media keeps its square.
	 */
	.gala-cats {
		gap: var(--sp-4) var(--sp-3);
	}

	.gala-cat__body {
		padding: var(--sp-3);
	}

	.gala-cat__name {
		font-size: var(--fs-small);
	}

	.gala-cat__count {
		font-size: .8125rem;
	}

	.gala-cat__media--empty svg {
		width: 40px;
		height: 40px;
	}

	.button {
		min-height: 44px;
	}

	.hero__actions .button,
	.stage__actions .button {
		width: 100%;
	}

	/* Wide tracking on a narrow column costs a line per phrase; ease it off. */
	.hero__title,
	.stage--poster .stage__title {
		letter-spacing: .12em;
		padding-inline-start: .12em;
	}

	.hero__eyebrow,
	.stage__eyebrow {
		letter-spacing: var(--track-caps);
		padding-inline-start: var(--track-caps);
	}

	.site-brand__logo {
		height: 36px;
	}

	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}