@font-face {
	font-family: "Mainstay";
	src: url("/font/Mainstay.otf") format("opentype");
	font-display: swap;
}

:root {
	--bg: #f4f1e8;
	--surface: #fffaf0;
	--surface-alt: #5e594c;
	--text: #2f2b26;
	--primary: #fae251;
	--primary-dark: #d6b900;
	--accent: #fcd89f;
	--line: #d1c7b8;
	--header-bg: rgba(250, 226, 81, 0.96);
	--radius: 10px;
	--header-height: 72px;
	--button-bg: #fae693;
}

html[data-theme="dark"] {
	--bg: #1b1d22;
	--surface: #262a31;
	--surface-alt: #ece4d7;
	--text: #f4ede3;
	--primary: #efd35c;
	--primary-dark: #d1b340;
	--accent: #a58a4a;
	--line: #4a505a;
	--header-bg: rgba(26, 28, 33, 0.95);
	color-scheme: dark;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	color: var(--text);
	background: transparent;
	line-height: 1.5;
	position: relative;
	overflow: hidden;
	height: 100%;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	background: center / cover no-repeat url("/img/background.png");
	filter: blur(5px);
	transform: scale(1.08);
	transform-origin: center;
}

html[data-theme="dark"] body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: rgba(13, 14, 18, 0.58);
}

html {
	height: 100%;
	overflow: hidden;
}

.site-header {
	position: relative;
}

.popcorn-bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.popcorn-bg.is-active {
	opacity: 1;
}

.popcorn-piece {
	position: absolute;
	top: 0;
	left: 0;
	--fall-distance: 1400px;
	--start-y: -140px;
	width: var(--size);
	height: var(--size);
	opacity: var(--alpha);
	background: center / contain no-repeat url("/img/popcorn-kernel.svg");
	filter:
		drop-shadow(0 1px 1px rgba(31, 28, 28, 0.38))
		drop-shadow(0 0 4px rgba(255, 255, 255, 0.42));
	transform: translate3d(var(--x-start), var(--start-y), 0) rotate(0deg);
	animation: popcorn-fall var(--dur) linear var(--delay) infinite;
	will-change: transform, opacity;
}

@keyframes popcorn-fall {
	0% {
		transform: translate3d(var(--x-start), var(--start-y), 0) rotate(0deg);
	}
	100% {
		transform: translate3d(calc(var(--x-start) + var(--x-drift)), var(--fall-distance), 0)
			rotate(var(--spin));
	}
}

.page-scroll {
	position: fixed;
	top: var(--header-height);
	right: 0;
	bottom: 0;
	left: 0;
	isolation: isolate;
	overflow-y: auto;
	overflow-x: hidden;
	opacity: 1;
	transition: opacity 0.22s ease;
	animation: page-fade-in 0.22s ease;
	scrollbar-color: var(--primary) var(--surface-alt);
	scrollbar-width: thin;
}

body.is-page-leaving .page-scroll {
	opacity: 0;
}

@keyframes page-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.page-scroll::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

.page-scroll::-webkit-scrollbar-track {
	background: var(--surface-alt);
}

.page-scroll::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, var(--primary), var(--primary-dark));
	border: 2px solid var(--surface-alt);
	border-radius: 999px;
}

.page-scroll::-webkit-scrollbar-thumb:hover {
	background: var(--primary-dark);
}

a {
	color: inherit;
	text-decoration: none;
}

:where(h1, h2, h3, h4, h5, h6, p, a, span, li, button, label, small, strong) {
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.container {
	width: min(1120px, 92vw);
	margin: 0 auto;
}

.homepage-container {
	width: min(1400px, 92vw);
}

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	background: var(--header-bg);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--line);
	border-bottom-color: black;
	border-bottom-width: 2px;
}

.nav-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 72px;
	gap: 16px;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 1.05rem;
	font-weight: 700;
	white-space: nowrap;
}

.brand-name {
	font-family: "Mainstay", "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	font-size: 2.15rem;
	color: #ffffff;
	letter-spacing: 0.01em;
	-webkit-text-stroke: 1.2px #000;
	paint-order: stroke fill;
	text-shadow:
		1px 1px 0 #000,
		2px 2px 0 #000,
		0 3px 4px rgba(0, 0, 0, 0.7),
		0 5px 10px rgba(0, 0, 0, 0.45);
}

.site-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 22px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.site-nav a {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--text);
	transition: color 0.2s ease;
}

.site-nav a.is-active {
	color: var(--surface-alt);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.site-nav a:hover {
	color: var(--bg);
}

html[data-theme="dark"] .site-nav a:hover {
	color: var(--primary);
}

.site-nav a.is-active:hover {
	color: var(--surface-alt);
}

.mobile-nav-toggle,
.mobile-nav-panel {
	display: none;
}

.mobile-nav-toggle {
	padding: 0;
	width: 38px;
	height: 38px;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--text);
	font-size: 1rem;
	cursor: pointer;
	transition:
		color 0.2s ease,
		border-color 0.2s ease,
		background-color 0.2s ease;
}

html[data-theme="dark"] .mobile-nav-toggle {
	background: #fff;
}

.mobile-nav-toggle:hover,
.mobile-nav-toggle:focus-visible {
	color: #000;
	border-color: var(--primary);
}

.mobile-nav-toggle:focus-visible {
	outline: none;
}

.mobile-nav-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 60;
	border-top: 1px solid var(--line);
	border-top-color: black;
	background: var(--header-bg);
	backdrop-filter: blur(8px);
}

.mobile-nav {
	display: grid;
	gap: 4px;
	padding: 10px 16px 14px;
}

.mobile-nav a {
	display: block;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 1.05rem;
	font-weight: 600;
}

.mobile-nav a.is-active {
	background: color-mix(in srgb, var(--primary) 35%, transparent);
}

.mobile-nav a:hover,
.mobile-nav a:focus-visible {
	background: color-mix(in srgb, var(--primary) 20%, transparent);
}

.mobile-nav-join {
	margin-top: 4px;
	text-align: center;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 18px;
	border-radius: var(--radius);
	border: 1px solid transparent;
	background: var(--primary);
	color: var(--text);
	font-weight: 600;
	transition: background-color 0.2s ease;
}

.btn:hover {
	background: var(--primary-dark);
}

.btn-small {
	padding: 8px 14px;
	font-size: 1.2rem;
	background: var(--text);
	color: var(--primary);
}

.btn-small:hover {
	background: var(--button-bg);
	color: var(--text);
}

.hero {
	position: relative;
	overflow: visible;
	padding: 44px 0 36px;
}

.hero > .container {
	position: relative;
	z-index: 5;
}

main > section {
	position: relative;
}

main > section > .container {
	position: relative;
	z-index: 4;
}

main {
	position: relative;
	z-index: 1;
}

.hero-grid {
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	gap: 28px;
	align-items: stretch;
}

.hero-grid > :first-child {
	align-self: center;
}

.eyebrow {
	margin: 0 0 10px;
	color: var(--primary);
	font-weight: 600;
	font-size: 1.3rem;
}

h1 {
	margin: 0;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.1;
	letter-spacing: 0;
	color: var(--surface);
}

html[data-theme="dark"] h1 {
	color: #ffffff;
}

.lead {
	margin: 18px 0 0;
	color: var(--bg);
	font-weight: bold;
}

html[data-theme="dark"] .lead {
	color: var(--text);
}

.cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

.hero-vote-btn {
	gap: 8px;
	background: rgba(255, 255, 255, 25%);
	color: var(--bg);
}

.hero-vote-btn:hover,
.hero-vote-btn:focus-visible {
	color: #000;
	background: rgba(255, 255, 255, 75%);
}

.hero-vote-btn img {
	display: block;
	width: 18px;
	height: 18px;
	object-fit: contain;
}

.social-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	padding: 0;
	margin: 20px 0 0;
	list-style: none;
}

.social-links a {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius);
	font-size: 1.05rem;
	transition:
		color 0.2s ease,
		border-color 0.2s ease,
		background-color 0.2s ease;
	gap: 8px;
	background: rgb(255 255 255 / 25%);
	color: var(--bg);
}

.social-links a i {
	display: block;
	line-height: 1;
}

.social-links a:hover {
	color: black;
	border-color: var(--primary);
	background: rgba(255, 255, 255, 75%);
}

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

.hero-media {
	min-height: clamp(420px, 54vh, 675px);
}

.hero-media-highlights {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 18px 0;
	min-height: 100%;
}

.hero-track {
	position: relative;
	list-style: none;
	margin: 0 0 0 auto;
	padding: 21px 0;
	display: grid;
	gap: clamp(21px, 2.4vh, 32px);
	width: min(570px, 100%);
}

.hero-track::before {
	content: "";
	position: absolute;
	left: 44px;
	top: 45px;
	bottom: 45px;
	width: 3px;
	background: linear-gradient(180deg, var(--primary), var(--primary-dark));
}

.hero-track-item {
	display: grid;
	grid-template-columns: 90px minmax(0, 1fr);
	gap: 18px;
	align-items: center;
	transform-origin: center center;
	transition: transform 0.2s ease;
}

.hero-track-item:hover {
	transform: scale(1.02);
}

.hero-track-node {
	position: relative;
	z-index: 1;
	display: inline-grid;
	place-items: center;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: var(--header-bg);
	border: 3px solid var(--primary-dark);
	color: var(--text);
	font-size: 1.84rem;
	box-shadow:
		0 0 0 2px rgba(31, 28, 28, 0.45),
		0 9px 17px rgba(0, 0, 0, 0.28);
}

.hero-track-copy {
	padding-top: 2px;
}

.hero-track-title {
	margin: 0;
	font-size: clamp(1.11rem, 1.5vw, 1.5rem);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: 0;
	text-align: left;
	color: var(--bg);
	text-transform: uppercase;
	text-shadow:
		-1px -1px 0 rgba(154, 154, 154, 0.7),
		0 -1px 0 rgba(154, 154, 154, 0.7),
		1px -1px 0 rgba(154, 154, 154, 0.7),
		-1px 0 0 rgba(154, 154, 154, 0.7),
		1px 0 0 rgba(154, 154, 154, 0.7),
		-1px 1px 0 rgba(154, 154, 154, 0.7),
		0 1px 0 rgba(154, 154, 154, 0.7),
		1px 1px 0 rgb(154 154 154 / 0.7),
		0 0 8px rgba(255, 255, 255, 0.23);
}

.hero-track-subtitle {
	margin: 3px 0 0;
	font-size: clamp(0.75rem, 0.94vw, 0.94rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: left;
	color: var(--bg);
	text-shadow:
		-1px -1px 0 rgba(154, 154, 154, 0.74),
		0 -1px 0 rgba(154, 154, 154, 0.74),
		1px -1px 0 rgba(154, 154, 154, 0.74),
		-1px 0 0 rgba(154, 154, 154, 0.74),
		1px 0 0 rgba(154, 154, 154, 0.74),
		-1px 1px 0 rgba(154, 154, 154, 0.74),
		0 1px 0 rgba(154, 154, 154, 0.74),
		1px 1px 0 rgba(154, 154, 154, 0.74),
		0 0 7px rgba(154, 154, 154, 0.25);
	text-transform: uppercase;
}

.content-bucket {
	--bucket-scale: 0.64;
	--bucket-target-scale: 1;
	position: relative;
	overflow: hidden;
	overflow: clip;
	padding-bottom: 5vh;
}

.content-bucket::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: center / 100% 100% no-repeat url("/img/popcorn-bucket.svg");
	transform: scale(var(--bucket-scale));
	transform-origin: center top;
}

.content-bucket::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		108deg,
		rgba(255, 255, 255, 0.52) 10%,
		rgba(255, 255, 255, 0) 38%,
		rgba(0, 0, 0, 0.4) 100%
	);
	mix-blend-mode: soft-light;
	-webkit-mask: center / 100% 100% no-repeat url("/img/popcorn-bucket.svg");
	mask: center / 100% 100% no-repeat url("/img/popcorn-bucket.svg");
	transform: scale(var(--bucket-scale));
	transform-origin: center top;
}

main#home > section:not(:first-child) {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 0.55s ease,
		transform 0.55s ease;
}

main#home > section:not(:first-child).is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (min-width: 701px) {
	main#home > section.content-bucket {
		opacity: 1;
		transform: none;
	}
}

main#home > section.content-bucket > .container {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 0.55s ease,
		transform 0.55s ease;
}

main#home > section.content-bucket.is-visible > .container {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.page-scroll {
		transition: none;
		animation: none;
	}

	.content-bucket {
		--bucket-scale: var(--bucket-target-scale);
	}

	main#home > section:not(:first-child) {
		opacity: 1;
		transform: none;
		transition: none;
	}

	main#home > section.content-bucket > .container {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.popcorn-piece {
		animation: none;
	}

}

h3 {
	margin: 0 0 10px;
	font-size: 1.12rem;
	letter-spacing: 0;
}

p {
	margin: 0;
	color: var(--text);
	text-align: justify;
}

.offer-list {
	display: grid;
	gap: 24px;
	padding: 16px;
	background: var(--bg);
	border-radius: var(--radius);
	position: relative;
	z-index: 5;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.52),
		0 -3px 10px rgba(31, 28, 28, 0.11),
		0 6px 14px rgba(31, 28, 28, 0.19);
}

.content-bucket .offer-list {
	transform: translateY(clamp(224px, 28vh, 480px));
	margin-bottom: 25vh;
}

.feature-list {
	display: grid;
	gap: 24px;
}

.content-row {
	--row-scale: 1;
	display: grid;
	grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
	gap: 18px;
	align-items: stretch;
	padding: 16px;
	border-radius: 8px;
	position: relative;
	transform-origin: center center;
	transform: scale(var(--row-scale));
	transition: transform 0.2s ease;
}

.content-row:hover {
	--row-scale: 1.02;
	z-index: 1;
}

.content-row.is-reverse {
	grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
}

.content-row.is-reverse .offer-image {
	order: 2;
}

.content-row.is-reverse .offer {
	order: 1;
}

.offer-image,
.dept-image {
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: 6px;
	background:	linear-gradient(120deg, rgba(250, 226, 81, 0.52), rgba(184, 92, 56, 0.28));
}

.offer-image {
	display: block;
	object-fit: cover;
}

.dept-image {
	display: block;
	object-fit: cover;
	border: 1px solid var(--line);
}

.offer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	padding: 4px 2px;
	min-width: 0;
}

.offer h3,
.offer p {
	max-width: 100%;
	overflow-wrap: anywhere;
}

.offer h3 {
	font-size: clamp(1.4rem, 1.8vw, 1.95rem);
	line-height: 1.25;
}

.offer p {
	font-size: clamp(1rem, 1.08vw, 1.16rem);
	line-height: 1.65;
}

.accordion-list {
	gap: 14px;
	margin-bottom: 24px;
}

html[data-theme="dark"] .offer-list.accordion-list {
	box-shadow:
		0 -3px 10px rgba(0, 0, 0, 0.28),
		0 8px 18px rgba(0, 0, 0, 0.4);
}

.document-embed {
	display: flex;
	justify-content: center;
	margin-bottom: 24px;
}

.document-embed iframe {
	display: block;
	width: min(100%, 860px);
	min-height: 78vh;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface);
}

main#rules .rules-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
}

main#rules .rules-search-group {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

main#rules .rules-search {
	position: relative;
	flex: 0 1 300px;
	max-width: 380px;
}

main#rules .rules-search-input {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface);
	color: var(--surface-alt);
	font-size: 0.95rem;
	line-height: 1.35;
}

main#rules .rules-search-input::placeholder {
	color: color-mix(in srgb, var(--surface-alt) 52%, #7f7f7f 48%);
}

main#rules .rules-search-input:focus-visible {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

main#rules mark.rules-search-highlight {
	padding: 0 2px;
	border-radius: 3px;
	background: color-mix(in srgb, var(--primary) 60%, #fff4a5 40%);
	color: inherit;
}

main#rules .rules-search-results {
	margin: 0;
	font-size: 0.9rem;
	color: color-mix(in srgb, var(--surface-alt) 38%, #8e8e8e 62%);
	white-space: nowrap;
}

main#rules .rules-offer {
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.44),
		0 2px 6px rgba(31, 28, 28, 0.1);
}

html[data-theme="dark"] main#rules .rules-offer {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		0 5px 16px rgba(0, 0, 0, 0.42);
}

main#rules .rules-offer + .rules-offer {
	margin-top: 4px;
}

main#rules .rules-offer-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 62px;
	padding: 0 16px;
	cursor: pointer;
	list-style: none;
}

main#rules .rules-offer-summary::-webkit-details-marker {
	display: none;
}

main#rules .rules-offer-summary::after {
	content: "+";
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1;
	color: var(--surface-alt);
	align-self: center;
}

main#rules .rules-offer[open] .rules-offer-summary::after {
	content: "−";
}

main#rules .rules-offer-summary h3 {
	margin: 0;
	line-height: 1.2;
	align-self: center;
}

main#rules .rules-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

main#rules .rules-heading-anchor {
	color: color-mix(in srgb, var(--surface-alt) 65%, #999999 35%);
	font-weight: 600;
	font-size: 0.92em;
	line-height: 1;
	text-decoration: none;
	opacity: 0.85;
}

main#rules .rules-heading-anchor:hover,
main#rules .rules-heading-anchor:focus-visible {
	opacity: 1;
	color: var(--surface-alt);
	text-decoration: underline;
	text-underline-offset: 2px;
}

main#rules .rules-offer[open] .rules-offer-summary {
	padding-top: 14px;
	padding-bottom: 14px;
	min-height: 0;
}

main#rules .rules-offer-body {
	padding: 0 16px 16px;
}

main#rules .rules-offer-body :where(p, li, dt, dd) {
	font-size: 1rem;
	line-height: 1.65;
}

main#rules code {
	display: inline-block;
	padding: 1px 6px;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--surface);
	font-size: 0.92em;
	line-height: 1.25;
	color: var(--surface-alt);
	text-shadow: none;
}

main#rules .rules-offer-body > * {
	margin: 0;
}

main#rules .rules-offer-body > * + * {
	margin-top: 10px;
}

main#rules .rules-offer-body ul {
	margin: 0;
	padding-left: 20px;
}

main#rules .rules-offer-body p + ul {
	margin-top: 4px;
}

.rules-definitions {
	display: grid;
	gap: 12px;
	margin: 0 0 16px;
	padding: 0;
}

.rules-definition-item {
	padding: 12px 14px;
	border-radius: 8px;
	border: 1px solid var(--line);
	background: var(--surface);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.44),
		0 2px 6px rgba(31, 28, 28, 0.1);
}

html[data-theme="dark"] .rules-definition-item {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		0 5px 14px rgba(0, 0, 0, 0.38);
}

.rules-definition-item dt {
	margin: 0 0 4px;
	font-weight: 700;
}

.rules-definition-item dd {
	margin: 0;
}

.rules-term-tooltip {
	position: relative;
	display: inline-flex;
	align-items: center;
	border-bottom: 1px dotted color-mix(in srgb, var(--surface-alt) 70%, transparent);
	cursor: help;
}

.rules-term-tooltip::before,
.rules-term-tooltip::after {
	position: absolute;
	left: 50%;
	opacity: 0;
	pointer-events: none;
	transition:
		opacity 0.16s ease,
		transform 0.16s ease;
	z-index: 20;
}

.rules-term-tooltip::before {
	content: "";
	bottom: calc(100% + 2px);
	border-width: 6px;
	border-style: solid;
	border-color: color-mix(in srgb, var(--surface-alt) 92%, #000000 8%) transparent transparent transparent;
	transform: translate(-50%, 4px);
}

.rules-term-tooltip::after {
	content: attr(data-tooltip);
	bottom: calc(100% + 14px);
	width: max-content;
	max-width: min(42ch, 76vw);
	padding: 8px 10px;
	border-radius: 6px;
	background: color-mix(in srgb, var(--surface-alt) 92%, #000000 8%);
	color: #fff;
	font-size: 0.86rem;
	font-weight: 500;
	line-height: 1.35;
	text-shadow: none;
	white-space: normal;
	transform: translate(-50%, 4px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
}

.rules-term-tooltip:hover::before,
.rules-term-tooltip:hover::after,
.rules-term-tooltip:focus-visible::before,
.rules-term-tooltip:focus-visible::after {
	opacity: 1;
	transform: translate(-50%, 0);
}

@media (max-width: 700px) {
	main#rules .rules-controls {
		flex-wrap: wrap;
	}

	main#rules .rules-search {
		max-width: none;
		flex-basis: 100%;
	}

	main#rules .rules-search-group {
		width: 100%;
	}

	main#rules .rules-search-results {
		order: 3;
		margin-left: auto;
	}

	main#rules .rules-controls .btn {
		margin-left: auto;
	}
}

.dept-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.dept-card {
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 14px;
	padding: 16px;
	position: relative;
	transform-origin: center center;
	transition: transform 0.2s ease;
}

.dept-card:hover {
	transform: scale(1.02);
	z-index: 1;
}

.dept-content {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 0;
	min-height: 100%;
}

.site-footer {
	position: relative;
	z-index: 3;
	padding: 0 0 1vh;
	background: var(--header-bg);
	border-top: 1px solid var(--line);
	border-top-color: black;
	border-top-width: 2px;
}

.footer-wrap {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding-top: 20px;
	flex-wrap: wrap;
}

.footer-brand p:first-child {
	color: var(--text);
	font-weight: 600;
	text-shadow:
		0 1px 0 color-mix(in srgb, #ffffff 11%, transparent),
		0 2px 3px color-mix(in srgb, var(--accent) 39%, transparent);
}

.site-footer p {
	color: var(--surface-alt);
	text-shadow:
		0 1px 2px color-mix(in srgb, var(--accent) 45%, transparent),
		0 0 4px color-mix(in srgb, var(--accent) 30%, transparent);
}

.footer-side {
	display: grid;
	justify-items: end;
	gap: 8px;
}

.footer-socials {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.footer-socials a,
.footer-social-toggle {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--text);
	font-size: 1rem;
	transition:
		color 0.2s ease,
		border-color 0.2s ease,
		background-color 0.2s ease;
	box-shadow:
		0 3px 6px color-mix(in srgb, var(--accent) 31%, transparent),
		0 0 5px color-mix(in srgb, var(--accent) 21%, transparent);
}

.footer-social-toggle {
	padding: 0;
	cursor: pointer;
}

.footer-socials a:hover,
.footer-social-toggle:hover {
	color: #000;
	background: rgba(255, 255, 255, 25%);
}

html[data-theme="dark"] .footer-socials a:hover,
html[data-theme="dark"] .footer-social-toggle:hover {
	color: #b9952a;
	border-color: #8f7421;
	background: #2b2e34;
}

.footer-socials a i,
.footer-social-toggle i {
	display: block;
	line-height: 1;
	text-shadow:
		0 1px 2px color-mix(in srgb, var(--accent) 40%, transparent),
		0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

.footer-socials a img {
	display: block;
	width: 18px;
	height: 18px;
	object-fit: contain;
}

.footer-social-toggle:focus-visible {
	outline: none;
	border-color: var(--primary);
	box-shadow:
		0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent),
		0 3px 6px color-mix(in srgb, var(--accent) 31%, transparent),
		0 0 5px color-mix(in srgb, var(--accent) 21%, transparent);
}

html[data-theme="dark"] .footer-social-toggle:focus-visible {
	border-color: #8f7421;
	box-shadow:
		0 0 0 3px rgba(143, 116, 33, 0.32),
		0 3px 6px rgba(0, 0, 0, 0.3),
		0 0 5px rgba(0, 0, 0, 0.2);
}

.footer-credit {
	font-size: 0.84rem;
	color: var(--surface-alt);
	text-align: right;
}

.footer-credit-link {
	color: inherit;
	text-underline-offset: 2px;
	text-shadow:
		0 1px 2px color-mix(in srgb, var(--accent) 45%, transparent),
		0 0 4px color-mix(in srgb, var(--accent) 30%, transparent);
}

.footer-credit-link:hover,
.footer-credit-link:focus-visible {
	text-decoration: underline;
}

html[data-theme="dark"] :where(button, .btn),
html[data-theme="dark"] :where(button, .btn):hover,
html[data-theme="dark"] :where(button, .btn):focus-visible {
	color: #111111;
}

html[data-theme="dark"] .footer-social-toggle {
	color: var(--text);
}

html[data-theme="dark"] main#home .hero .btn:hover,
html[data-theme="dark"] main#home .hero .btn:focus-visible,
html[data-theme="dark"] main#home .hero .social-links a:hover,
html[data-theme="dark"] main#home .hero .social-links a:focus-visible {
	color: #b9952a;
	border-color: #8f7421;
	background: #2b2e34;
}

@media (max-width: 960px) {
	.hero-grid,
	.content-row,
	.content-row.is-reverse,
	.dept-grid {
		grid-template-columns: 1fr;
	}

	.content-row.is-reverse .offer-image,
	.content-row.is-reverse .offer {
		order: initial;
	}

	.offer h3 {
		font-size: 1.3rem;
	}

	.offer p {
		font-size: 0.98rem;
		line-height: 1.55;
	}

	.hero-media {
		min-height: 315px;
	}

	.hero-media-highlights {
		padding: 14px 0;
		min-height: 315px;
	}

	.hero-track {
		padding: 14px 0;
		gap: 14px;
	}

	.hero-track::before {
		left: 26px;
		top: 30px;
		bottom: 30px;
		width: 2px;
	}

	.hero-track-item {
		grid-template-columns: 54px minmax(0, 1fr);
		gap: 11px;
	}

	.hero-track-node {
		width: 54px;
		height: 54px;
		font-size: 1rem;
		border-width: 2px;
	}

	.hero-track-title {
		font-size: 0.75rem;
	}

	.hero-track-subtitle {
		font-size: 0.62rem;
	}

	.footer-side {
		justify-items: start;
	}

	.footer-credit {
		text-align: left;
	}
}

@media (min-width: 1920px) and (min-height: 1000px) {
	main#home .hero {
		min-height: calc(75vh - (var(--header-height) * 0.75));
		display: flex;
		align-items: center;
	}
}

@media (max-width: 700px) {
	.content-bucket::before,
	.content-bucket::after {
		display: none;
	}

	.content-bucket .offer-list {
		transform: none;
		margin-bottom: 0;
	}

	:root {
		--header-height: 62px;
	}

	.nav-wrap {
		min-height: 62px;
	}

	.site-nav {
		display: none;
	}

	.nav-wrap > .btn.btn-small {
		display: none;
	}

	.mobile-nav-toggle {
		display: inline-grid;
		place-items: center;
	}

	.mobile-nav-panel.is-open {
		display: block;
	}

	.hero {
		padding-top: 34px;
	}
}