/*
 * 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--cream {
	background: var(--c-cream);
}

.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);
}

.eyebrow {
	font-size: var(--fs-eyebrow);
	font-weight: 500;
	letter-spacing: .14em;
	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-ink);
	color: var(--c-white);
	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-white);
}

/* ================================================================== 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;
}

.button--primary {
	background: var(--c-red);
	border-color: var(--c-red);
	color: var(--c-white);
}

.button--primary:hover {
	background: var(--c-red-dark);
	border-color: var(--c-red-dark);
	color: var(--c-white);
}

.button--secondary {
	border-color: var(--c-ink);
	color: var(--c-ink);
}

.button--secondary:hover {
	background: var(--c-ink);
	color: var(--c-white);
}

/*
 * The gold call to action from the 2025 site. Ink on #E8BC58 is 10.5:1 and ink on the
 * darker hover gold is 5.1:1, so the label keeps its contrast in both states.
 */
.button--gold {
	background: var(--c-gold);
	border-color: var(--c-gold);
	color: var(--c-ink);
}

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

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

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

.button--outline-white {
	border-color: rgba(255, 255, 255, .75);
	color: var(--c-white);
}

.button--outline-white:hover {
	background: var(--c-white);
	border-color: var(--c-white);
	color: var(--c-red);
}

.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-red);
}

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

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-white);
	color: var(--c-ink);
	font-size: 1rem;
	transition: border-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-muted);
}

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

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

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

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

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

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

.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-ink);
	font-size: var(--fs-small);
	text-align: center;
}

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

.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-red-dark);
	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-white);
	border-bottom: 1px solid var(--c-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-red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur) var(--ease);
}

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

.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-red);
}

.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-dark);
	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-red);
}

.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-red);
	color: var(--c-white);
	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-line-strong);
	border-radius: var(--radius-s);
	background: var(--c-white);
	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-ink);
}

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

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

.hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 72vh;
	padding: clamp(3.5rem, 8vw, 6rem) var(--gutter);
	background: var(--c-red);
	color: var(--c-white);
	overflow: hidden;
}

/*
 * The 2025 hero's cream circle texture, laid over the red exactly as the original did:
 * a centred column about a third of the width, art untinted and unblended.
 */
.hero::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	z-index: 0;
	width: 34%;
	min-width: 260px;
	transform: translateX(-50%);
	background-image: url("../img/hero-texture.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	/* The top arc crosses the logo lockup; 0.85 keeps the ring without dulling the white. */
	opacity: .85;
	pointer-events: none;
}

.hero__frame {
	position: absolute;
	inset: clamp(.75rem, 1.6vw, 1.5rem);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: var(--radius-m);
	pointer-events: none;
}

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

.hero__logo {
	width: 148px;
	height: auto;
}

.hero__eyebrow {
	margin-top: var(--sp-6);
	color: var(--c-white);
	font-size: var(--fs-eyebrow);
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.hero__rule {
	display: block;
	width: 44px;
	height: 1px;
	margin-top: var(--sp-3);
	background: var(--c-gold);
}

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

.hero__wordmark {
	width: clamp(112px, 16vw, 156px);
	height: auto;
}

.hero__year {
	writing-mode: vertical-rl;
	color: var(--c-white);
	font-size: clamp(.875rem, 1.6vw, 1.125rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: .3em;
	/* Letter-spacing trails the last numeral; take it back so the column reads centred. */
	padding-block-end: .3em;
}

.hero__title {
	margin-top: var(--sp-5);
	color: var(--c-white);
	font-size: var(--fs-display);
	line-height: 1.05;
	letter-spacing: -.02em;
}

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

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

.hero__sparkle {
	position: absolute;
	right: clamp(1.25rem, 5vw, 3.5rem);
	bottom: clamp(1.25rem, 5vw, 3rem);
	color: var(--c-white);
	opacity: .45;
	pointer-events: none;
}

.hero :focus-visible,
.stage--red :focus-visible {
	outline-color: var(--c-white);
}

/* ============================================================ 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-line-strong);
}

/* The 2025 steps were gold icon boxes rather than numerals. */
.step__icon {
	display: block;
	color: var(--c-gold-dark);
}

.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-white);
	text-decoration: none;
	transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

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

.gala-cat__media {
	display: block;
	padding: 12%;
	background: var(--c-white);
}

/* 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-cream);
	color: var(--c-gold-text);
}

.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-ink);
	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-line-strong);
}

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

.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-red);
}

.faq__chevron {
	flex: none;
	color: var(--c-muted);
	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) var(--gutter);
	text-align: center;
}

.stage--light {
	min-height: 60vh;
	background: var(--c-paper);
}

.stage--red {
	min-height: 100vh;
	min-height: 100svh;
	background: var(--c-red);
	color: var(--c-white);
}

.stage__frame {
	position: absolute;
	inset: clamp(.75rem, 1.6vw, 1.5rem);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: var(--radius-m);
	pointer-events: none;
}

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

.stage__logo {
	width: 148px;
	height: auto;
}

.stage__eyebrow {
	margin-top: var(--sp-5);
	font-size: var(--fs-eyebrow);
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--c-gold-text);
}

.stage--red .stage__eyebrow {
	color: var(--c-white);
}

.stage__rule {
	display: block;
	width: 44px;
	height: 1px;
	margin-top: var(--sp-3);
	background: var(--c-gold);
}

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

.stage--red .stage__title {
	color: var(--c-white);
}

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

.stage--red .stage__text {
	color: var(--c-white);
}

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

.stage--red .stage__contact {
	color: var(--c-white);
}

.stage--red .stage__contact a {
	color: var(--c-white);
}

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

.stage__wordmark {
	width: 92px;
	height: auto;
	margin-top: var(--sp-8);
	opacity: .8;
}

/* ============================================================ 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-red);
}

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

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

.credits-tag {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 var(--sp-2);
	border-radius: var(--radius-s);
	background: var(--c-red-tint);
	color: var(--c-red-dark);
	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);
	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-dark);
}

.empty-state {
	padding: clamp(2.5rem, 6vw, 4rem) var(--sp-5);
	border: 1px dashed var(--c-line-strong);
	border-radius: var(--radius-m);
	background: var(--c-white);
	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-line);
	background: var(--c-cream);
}

.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-red);
}

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

/* The 2025 footer signed off on a full-width gold bar; ink on #E8BC58 is 10.5: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-ink);
	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-ink);
	text-decoration: none;
}

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

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

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

.gala-modal__overlay {
	background: rgba(20, 20, 20, .55);
}

.gala-modal__dialog {
	padding: clamp(1.75rem, 4vw, 2.75rem);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-m);
	background: var(--c-white);
	box-shadow: var(--shadow-modal);
	text-align: center;
}

.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-ink);
}

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

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

.gala-modal__title {
	margin-top: var(--sp-2);
	font-size: 1.625rem;
	line-height: 1.15;
}

.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);
}

.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-red);
	border-radius: var(--radius-s);
	background: var(--c-red);
	color: var(--c-white);
	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-red-dark);
	border-color: var(--c-red-dark);
}

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

.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-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);
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--c-red);
	color: var(--c-white);
	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-red-dark);
}

/*
 * `.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-dark);
	border-radius: var(--radius-m);
	background: var(--c-gold-tint);
	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-ink-2);
	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-red);
}

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

.gala-access__eyebrow {
	color: var(--c-gold-text);
	font-size: var(--fs-eyebrow);
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.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-red);
	border-radius: var(--radius-s);
	background: var(--c-red);
	color: var(--c-white);
	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-red-dark);
	border-color: var(--c-red-dark);
}

/* ============================================================== 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-line);
		background: var(--c-white);
		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-line-strong);
	}

	.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%;
	}

	.site-brand__logo {
		height: 36px;
	}

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