/* ==========================================================================
   HomeLearners — theme styles
   Palette pulled from the HomeLearners emblem: burnished gold & bronze over
   royal-blue, emerald and crimson enamel, on slate.
   ========================================================================== */

/* ---------- Tokens: light (default) ---------- */
:root {
	--hl-base: #FBF7EE;
	--hl-surface: #FFFFFF;
	--hl-surface-2: #F4EDDF;
	--hl-contrast: #1B2230;
	--hl-muted: #4D5768;
	--hl-border: #E3D7BF;
	--hl-primary: #1D3F9A;
	--hl-secondary: #0B6B35;
	--hl-tertiary: #A3102A;
	--hl-accent: #7A4A12;
	--hl-focus: #1D3F9A;
	--hl-header-bg: rgb(251 247 238 / 0.84);
	--hl-card-shadow: 0 2px 6px rgb(12 24 56 / 0.06), 0 14px 34px rgb(12 24 56 / 0.10);
	--hl-card-shadow-hover: 0 6px 14px rgb(12 24 56 / 0.10), 0 28px 60px rgb(12 24 56 / 0.18), 0 0 0 1px rgb(212 168 75 / 0.55);

	/* Metallic gradients */
	--hl-gold: linear-gradient(135deg, #E2B95C 0%, #FFF1C1 30%, #D4A84B 55%, #F3D98B 80%, #C8963E 100%);
	--hl-gold-deep: linear-gradient(135deg, #7A4A12 0%, #D4A84B 18%, #FFF1C1 34%, #C8963E 50%, #F3D98B 66%, #A9732B 82%, #E9C66F 100%);
	--hl-bronze: linear-gradient(135deg, #5A3410 0%, #B8733A 30%, #F0B984 48%, #8C5A22 70%, #C98B4E 100%);
	/* Gilded text must stay readable on the page background */
	--hl-gilt-text: linear-gradient(100deg, #5A3410 0%, #8C5A22 30%, #B07A2C 45%, #6E4313 60%, #8C5A22 80%, #5A3410 100%);

	--hl-royal: #1D3F9A;
	--hl-navy: #0C1838;
	--hl-emerald: #0F7A3D;
	--hl-crimson: #B3122E;

	--hl-r-sm: 8px;
	--hl-r-md: 16px;
	--hl-r-lg: 28px;
	--hl-ease: cubic-bezier(.2, .7, .2, 1);
	--hl-header-h: 76px;

	color-scheme: light;
}

/* ---------- Tokens: dark ---------- */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--hl-base: #121821;
		--hl-surface: #1B2330;
		--hl-surface-2: #222C3B;
		--hl-contrast: #EDE7DA;
		--hl-muted: #AEB6C4;
		--hl-border: #2F3A4C;
		--hl-primary: #8FB0FF;
		--hl-secondary: #5FD394;
		--hl-tertiary: #FF7D92;
		--hl-accent: #E6C36A;
		--hl-focus: #F3D98B;
		--hl-header-bg: rgb(18 24 33 / 0.82);
		--hl-card-shadow: 0 2px 6px rgb(0 0 0 / 0.3), 0 14px 34px rgb(0 0 0 / 0.35);
		--hl-card-shadow-hover: 0 6px 14px rgb(0 0 0 / 0.4), 0 28px 60px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(212 168 75 / 0.6);
		--hl-gilt-text: linear-gradient(100deg, #C8963E 0%, #F3D98B 25%, #FFF1C1 40%, #D4A84B 60%, #F3D98B 80%, #C8963E 100%);
		color-scheme: dark;
	}
}
:root[data-theme="dark"] {
	--hl-base: #121821;
	--hl-surface: #1B2330;
	--hl-surface-2: #222C3B;
	--hl-contrast: #EDE7DA;
	--hl-muted: #AEB6C4;
	--hl-border: #2F3A4C;
	--hl-primary: #8FB0FF;
	--hl-secondary: #5FD394;
	--hl-tertiary: #FF7D92;
	--hl-accent: #E6C36A;
	--hl-focus: #F3D98B;
	--hl-header-bg: rgb(18 24 33 / 0.82);
	--hl-card-shadow: 0 2px 6px rgb(0 0 0 / 0.3), 0 14px 34px rgb(0 0 0 / 0.35);
	--hl-card-shadow-hover: 0 6px 14px rgb(0 0 0 / 0.4), 0 28px 60px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(212 168 75 / 0.6);
	--hl-gilt-text: linear-gradient(100deg, #C8963E 0%, #F3D98B 25%, #FFF1C1 40%, #D4A84B 60%, #F3D98B 80%, #C8963E 100%);
	color-scheme: dark;
}

/* Tone helpers used by badges, tiles and archive headers */
.hl-tone-royal   { --tone: #1D3F9A; --tone-text: var(--hl-primary);   --tone-bg: radial-gradient(140% 120% at 100% 0%, rgb(255 255 255 / .22) 0%, transparent 38%), linear-gradient(160deg, #1D3F9A 0%, #13296B 55%, #0C1838 100%); }
.hl-tone-emerald { --tone: #0F7A3D; --tone-text: var(--hl-secondary); --tone-bg: radial-gradient(140% 120% at 100% 0%, rgb(255 255 255 / .2) 0%, transparent 38%), linear-gradient(160deg, #0F7A3D 0%, #0A5A2D 55%, #063A1D 100%); }
.hl-tone-crimson { --tone: #B3122E; --tone-text: var(--hl-tertiary);  --tone-bg: radial-gradient(140% 120% at 100% 0%, rgb(255 255 255 / .2) 0%, transparent 38%), linear-gradient(160deg, #B3122E 0%, #860C22 55%, #5A0715 100%); }
.hl-tone-gold    { --tone: #8C5A22; --tone-text: var(--hl-accent);    --tone-bg: radial-gradient(140% 120% at 100% 0%, rgb(255 241 193 / .28) 0%, transparent 38%), linear-gradient(160deg, #8C5A22 0%, #6A3F14 55%, #3E2409 100%); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--hl-header-h) + 16px); }
body {
	background: var(--hl-base);
	color: var(--hl-contrast);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	transition: background-color .4s var(--hl-ease), color .4s var(--hl-ease);
}
img, video, iframe { max-width: 100%; }
::selection { background: #F3D98B; color: #1B2230; }

h1, h2, h3, .wp-block-post-title { font-variation-settings: "opsz" 96, "SOFT" 30; text-wrap: balance; }
p { text-wrap: pretty; }

a { text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:hover { text-decoration-thickness: 0.14em; }

/* Accessible focus ring everywhere */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--hl-focus);
	outline-offset: 3px;
	border-radius: 4px;
}

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; width: 1px; word-wrap: normal !important;
}
.skip-link.screen-reader-text:focus {
	clip: auto; clip-path: none; height: auto; width: auto; margin: 0;
	top: 12px; left: 12px; z-index: 100000; padding: 14px 22px;
	background: var(--hl-gold); color: #2A1A05; font-weight: 700; border-radius: 999px;
	box-shadow: var(--hl-card-shadow);
}

/* ---------- Metallic utilities ---------- */
.hl-gilded,
.is-style-hl-gilded {
	background-image: var(--hl-gilt-text);
	background-size: 220% 100%;
	background-position: 0% 50%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
.hl-gilded--shine { animation: hl-gilt 7s ease-in-out infinite; }
.hl-on-dark .hl-gilded,
.hl-on-dark.hl-gilded,
.hl-on-dark .is-style-hl-gilded {
	background-image: linear-gradient(100deg, #C8963E 0%, #F3D98B 25%, #FFF8DC 40%, #D4A84B 60%, #F3D98B 80%, #C8963E 100%);
}
@media (forced-colors: active) {
	.hl-gilded, .is-style-hl-gilded { -webkit-text-fill-color: CanvasText; color: CanvasText; background: none; }
}

.hl-metal-border {
	border: 2px solid transparent;
	background:
		linear-gradient(var(--hl-surface), var(--hl-surface)) padding-box,
		var(--hl-gold-deep) border-box;
	border-radius: var(--hl-r-md);
}

.hl-eyebrow {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hl-accent);
	margin: 0 0 .35rem;
}

.hl-icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }

/* ---------- Buttons ---------- */
.wp-element-button,
.wp-block-button__link {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-image: var(--hl-gold);
	background-size: 160% 100%;
	color: #2A1A05;
	border: 1px solid rgb(122 74 18 / 0.45);
	text-decoration: none;
	transition: transform .25s var(--hl-ease), box-shadow .25s var(--hl-ease), background-position .6s var(--hl-ease);
	text-shadow: 0 1px 0 rgb(255 248 220 / 0.6);
}
.wp-element-button::after,
.wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: -40% auto -40% -60%;
	width: 40%;
	background: linear-gradient(100deg, transparent, rgb(255 255 255 / .75), transparent);
	transform: skewX(-20deg) translateX(0);
	z-index: -1;
	transition: transform .8s var(--hl-ease);
	pointer-events: none;
}
.wp-element-button:hover,
.wp-block-button__link:hover,
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	transform: translateY(-2px);
	background-position: 100% 50%;
	box-shadow: 0 0 0 1px rgb(212 168 75 / 0.7), 0 12px 30px rgb(212 168 75 / 0.35);
	color: #2A1A05;
}
.wp-element-button:hover::after,
.wp-block-button__link:hover::after { transform: skewX(-20deg) translateX(420%); }

.is-style-hl-enamel .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: radial-gradient(130% 140% at 25% 15%, #3C66D6 0%, #1D3F9A 45%, #0C1838 100%) padding-box, var(--hl-gold-deep) border-box;
	border: 2px solid transparent;
	color: #FFFFFF;
	text-shadow: 0 1px 2px rgb(0 0 0 / .4);
}
.is-style-hl-enamel .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover { color: #FFFFFF; }

/* ---------- Header ---------- */
.hl-header {
	position: sticky;
	top: 0;
	z-index: 50;
	transition: box-shadow .3s var(--hl-ease), padding .3s var(--hl-ease);
}
/* Blur lives on a pseudo-element: a backdrop-filter on the header itself would
   trap the fixed-position mobile menu overlay inside the header box. */
.hl-header::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: var(--hl-header-bg);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	backdrop-filter: saturate(1.4) blur(14px);
}
.admin-bar .hl-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .hl-header { top: 0; } }
.hl-header::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
	background: var(--hl-gold-deep);
	opacity: .85;
}
.hl-header.is-scrolled { box-shadow: 0 8px 30px rgb(12 24 56 / .12); }
.hl-header.is-scrolled .hl-brand__mark { width: 40px; height: 40px; }

.hl-brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; }
.hl-brand__mark {
	width: 48px; height: 48px; flex: none;
	filter: drop-shadow(0 3px 6px rgb(12 24 56 / .25));
	transition: width .3s var(--hl-ease), height .3s var(--hl-ease), transform .6s var(--hl-ease);
}
.hl-brand:hover .hl-brand__mark { transform: rotate(-8deg) scale(1.05); }
.hl-brand__text { display: flex; flex-direction: column; line-height: 1; }
.hl-brand__name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	letter-spacing: -.01em;
}
.hl-brand__tag { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--hl-muted); margin-top: .3rem; }
@media (max-width: 420px) { .hl-brand__tag { display: none; } }

.hl-header .wp-block-navigation a { text-decoration: none; }
.hl-header .wp-block-navigation-item__content { position: relative; padding: .4rem .1rem; }
.hl-header .wp-block-navigation .wp-block-navigation-item__content::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
	background: var(--hl-gold-deep); transform: scaleX(0); transform-origin: left;
	transition: transform .35s var(--hl-ease);
}
.hl-header .wp-block-navigation .wp-block-navigation-item__content:hover::after,
.hl-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }

.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--hl-base) !important;
	color: var(--hl-contrast) !important;
	padding: 1.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-size: 1.35rem; font-family: var(--wp--preset--font-family--display); }
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	width: 44px; height: 44px; display: grid; place-items: center;
	border-radius: 999px; border: 1px solid var(--hl-border);
}

.hl-header .wp-block-navigation__submenu-container {
	background: var(--hl-surface) !important;
	color: var(--hl-contrast) !important;
	border: 1px solid var(--hl-border) !important;
	border-radius: 14px;
	padding: .5rem !important;
	box-shadow: var(--hl-card-shadow);
	min-width: 220px !important;
}
.hl-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .55rem .8rem !important; border-radius: 8px; }
.hl-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--hl-surface-2); }
.hl-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none; }

/* Light/dark toggle */
.hl-theme-toggle {
	position: relative;
	width: 44px; height: 44px;
	border-radius: 999px;
	cursor: pointer;
	color: var(--hl-accent);
	border: 2px solid transparent;
	background: linear-gradient(var(--hl-surface), var(--hl-surface)) padding-box, var(--hl-gold-deep) border-box;
	display: grid; place-items: center;
	transition: transform .4s var(--hl-ease);
}
.hl-theme-toggle:hover { transform: rotate(18deg); }
.hl-theme-toggle__icons { position: relative; width: 22px; height: 22px; }
.hl-theme-toggle .hl-icon { position: absolute; inset: 0; width: 22px; height: 22px; transition: opacity .35s var(--hl-ease), transform .5s var(--hl-ease); }
.hl-theme-toggle .hl-i-moon { opacity: 0; transform: rotate(-90deg) scale(.5); }
.hl-theme-toggle[aria-pressed="true"] .hl-i-sun { opacity: 0; transform: rotate(90deg) scale(.5); }
.hl-theme-toggle[aria-pressed="true"] .hl-i-moon { opacity: 1; transform: none; }

/* Reading progress */
.hl-progress {
	position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 100;
	background: var(--hl-gold-deep);
	transform-origin: 0 50%;
	transform: scaleX(var(--hl-progress, 0));
	pointer-events: none;
}
.admin-bar .hl-progress { top: var(--wp-admin--admin-bar--height, 32px); }

/* ==========================================================================
   Parallax hero (front page & landing template)
   ========================================================================== */
.hl-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: min(100svh, 940px);
	display: grid;
	align-items: center;
	color: #F4EFE3;
	background:
		radial-gradient(80% 60% at 75% 35%, rgb(60 102 214 / .45) 0%, transparent 60%),
		radial-gradient(60% 50% at 15% 85%, rgb(15 122 61 / .45) 0%, transparent 60%),
		radial-gradient(40% 40% at 95% 95%, rgb(179 18 46 / .35) 0%, transparent 60%),
		linear-gradient(160deg, #0C1838 0%, #131C2E 55%, #0B2016 100%);
	margin-block-start: 0 !important;
}
.hl-hero a:not(.wp-element-button):not(.wp-block-button__link) { color: #F3D98B; }
.hl-layer {
	position: absolute;
	inset: -10% -5%;
	pointer-events: none;
	will-change: transform;
	z-index: -1;
}
.hl-layer--stars {
	background-image:
		radial-gradient(1.5px 1.5px at 12% 22%, #FFF1C1 50%, transparent 51%),
		radial-gradient(1px 1px at 28% 68%, #fff 50%, transparent 51%),
		radial-gradient(2px 2px at 44% 14%, #F3D98B 50%, transparent 51%),
		radial-gradient(1px 1px at 63% 82%, #fff 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 78% 30%, #FFF1C1 50%, transparent 51%),
		radial-gradient(1px 1px at 88% 60%, #fff 50%, transparent 51%),
		radial-gradient(2px 2px at 6% 90%, #F3D98B 50%, transparent 51%),
		radial-gradient(1px 1px at 52% 46%, #fff 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 35% 38%, #fff 50%, transparent 51%),
		radial-gradient(1px 1px at 93% 12%, #FFF1C1 50%, transparent 51%);
	background-size: 520px 520px;
	opacity: .75;
	animation: hl-twinkle 6s ease-in-out infinite alternate;
}
.hl-layer--rings { display: grid; place-items: center; }
.hl-layer--rings svg {
	width: min(140vmin, 1300px);
	height: auto;
	opacity: .5;
	transform: translateX(26%);
	animation: hl-spin 180s linear infinite;
}
.hl-layer--rings {
	-webkit-mask-image: linear-gradient(90deg, transparent 22%, #000 58%);
	mask-image: linear-gradient(90deg, transparent 22%, #000 58%);
}
@media (max-width: 900px) {
	.hl-layer--rings { -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 60%); mask-image: linear-gradient(180deg, #000 30%, transparent 60%); }
	.hl-layer--rings svg { transform: none; animation-name: hl-spin-c; }
}
.hl-layer--icons .hl-float {
	position: absolute;
	color: #E9C66F;
	filter: drop-shadow(0 6px 14px rgb(0 0 0 / .45)) drop-shadow(0 0 10px rgb(243 217 139 / .25));
	animation: hl-bob var(--dur, 7s) ease-in-out infinite;
	animation-delay: var(--delay, 0s);
}
.hl-layer--icons .hl-float .hl-icon { width: var(--size, 44px); height: var(--size, 44px); stroke-width: 1.4; }
.hl-float--coin {
	display: grid; place-items: center;
	width: calc(var(--size, 44px) * 1.6); height: calc(var(--size, 44px) * 1.6);
	border-radius: 50%;
	background: radial-gradient(circle at 30% 25%, #3C66D6, #1D3F9A 50%, #0C1838) padding-box, var(--hl-gold-deep) border-box;
	border: 3px solid transparent;
}
.hl-float--coin.is-emerald { background: radial-gradient(circle at 30% 25%, #2FB86A, #0F7A3D 50%, #063A1D) padding-box, var(--hl-gold-deep) border-box; }
.hl-float--coin.is-crimson { background: radial-gradient(circle at 30% 25%, #E8475F, #B3122E 50%, #5A0715) padding-box, var(--hl-gold-deep) border-box; }

.hl-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1240px);
	margin-inline: auto;
	padding: clamp(3rem, 8vh, 5.5rem) clamp(1rem, 4vw, 2.5rem) clamp(5rem, 11vh, 7rem);
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
@media (max-width: 900px) {
	.hl-hero__inner { grid-template-columns: 1fr; text-align: center; padding-top: 3rem; }
	.hl-hero__actions, .hl-hero__chips { justify-content: center; }
	.hl-hero__art-wrap { max-width: 280px; margin-inline: auto; }
}
.hl-hero__kicker {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .4rem .9rem; border-radius: 999px;
	font-size: .85rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: #F3D98B;
	background: rgb(12 24 56 / .55);
	border: 1px solid rgb(243 217 139 / .45);
	margin: 0 0 1.25rem;
}
.hl-hero__title {
	font-size: clamp(2.6rem, 1.4rem + 4.2vw, 4.9rem);
	line-height: 1.02;
	margin: 0 0 1.25rem;
	color: #FFF8E6;
	font-weight: 800;
	letter-spacing: -0.02em;
}
.hl-hero__title .hl-gilded { display: inline-block; padding-bottom: .08em; }
.hl-hero__lede { font-size: clamp(1.1rem, 1.5vw, 1.3rem); max-width: 36rem; line-height: 1.6; color: #D9DEE8; margin: 0 0 2rem; }
@media (max-width: 900px) { .hl-hero__lede { margin-inline: auto; } }
.hl-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
.hl-hero__chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.hl-hero__chips a {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .45rem .85rem; border-radius: 999px;
	color: #F4EFE3 !important; text-decoration: none; font-weight: 700; font-size: .92rem;
	background: rgb(255 255 255 / .08);
	border: 1px solid rgb(243 217 139 / .35);
	transition: background .25s, transform .25s var(--hl-ease), border-color .25s;
}
.hl-hero__chips a:hover { background: rgb(243 217 139 / .18); border-color: #F3D98B; transform: translateY(-2px); }
.hl-hero__chips .hl-icon { color: #F3D98B; }

.hl-hero__art { position: relative; will-change: transform; }
.hl-emblem {
	position: relative;
	border-radius: 50%;
	aspect-ratio: 1;
	transform-style: preserve-3d;
	transition: transform .3s ease-out;
}
.hl-emblem img {
	width: 100%; height: 100%;
	object-fit: cover;
	border-radius: 50%;
	-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 71%);
	mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 71%);
	filter: drop-shadow(0 30px 50px rgb(0 0 0 / .5));
}
.hl-emblem::before {
	content: "";
	position: absolute; inset: 6%;
	border-radius: 50%;
	background: radial-gradient(circle, rgb(243 217 139 / .35), transparent 65%);
	filter: blur(30px);
	z-index: -1;
	animation: hl-pulse 5s ease-in-out infinite;
}
.hl-emblem::after { /* light sweep across the metal */
	content: "";
	position: absolute; inset: 10%;
	border-radius: 50%;
	background: linear-gradient(115deg, transparent 35%, rgb(255 248 220 / .55) 48%, transparent 60%);
	background-size: 300% 100%;
	mix-blend-mode: overlay;
	animation: hl-sweep 6s ease-in-out infinite;
	pointer-events: none;
}

.hl-hero__scroll {
	position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
	z-index: 3;
	display: grid; place-items: center; gap: .3rem;
	color: #F3D98B !important; text-decoration: none; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
}
.hl-hero__scroll span[aria-hidden] {
	width: 26px; height: 42px; border: 2px solid currentColor; border-radius: 14px; position: relative;
}
.hl-hero__scroll span[aria-hidden]::after {
	content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px;
	border-radius: 2px; background: currentColor; animation: hl-scrollcue 1.8s ease-in-out infinite;
}
@media (max-height: 640px) { .hl-hero__scroll { display: none; } }

.hl-motion-toggle {
	position: absolute; right: clamp(1rem, 3vw, 2rem); bottom: 1.5rem; z-index: 3;
	display: inline-flex; align-items: center; gap: .45rem;
	min-height: 44px; padding: .5rem 1rem; border-radius: 999px; cursor: pointer;
	font: inherit; font-size: .88rem; font-weight: 700;
	color: #F4EFE3; background: rgb(12 24 56 / .6);
	border: 1px solid rgb(243 217 139 / .45);
}
.hl-motion-toggle:hover { background: rgb(12 24 56 / .85); }
@media (max-width: 600px) { .hl-hero__scroll { display: none; } .hl-motion-toggle { right: 50%; transform: translateX(50%); bottom: 1.25rem; } .hl-hero__inner { padding-bottom: 6rem; } }
@media (prefers-reduced-motion: reduce) { .hl-motion-toggle { display: none; } }

/* Curved enamel edge under the hero */
.hl-hero__edge {
	position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2;
	height: clamp(30px, 6vw, 80px);
	color: var(--hl-base);
	pointer-events: none;
}
.hl-hero__edge svg { width: 100%; height: 100%; display: block; }

/* Parallax band (mid-page) */
.hl-band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #F4EFE3;
	background: linear-gradient(120deg, #0C1838 0%, #13296B 40%, #0A5A2D 100%);
	padding-block: clamp(4rem, 12vw, 9rem) !important;
}
.hl-band .hl-layer--pattern {
	inset: -30% -5%;
	background-image:
		radial-gradient(circle at 1px 1px, rgb(243 217 139 / .28) 1.5px, transparent 2px);
	background-size: 28px 28px;
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
	mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
}
.hl-band .hl-layer--glow {
	background:
		radial-gradient(35% 50% at 20% 50%, rgb(179 18 46 / .45), transparent 70%),
		radial-gradient(35% 60% at 85% 40%, rgb(212 168 75 / .35), transparent 70%);
}
.hl-band blockquote, .hl-band .wp-block-quote { border: 0; padding: 0; margin: 0 auto; max-width: 52rem; text-align: center; }
.hl-band .hl-band__quote {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 4.2vw, 3.25rem);
	line-height: 1.15;
	font-style: italic;
	font-weight: 600;
	color: #FFF8E6;
	margin: 0 0 1.25rem;
}
.hl-band cite { font-style: normal; color: #F3D98B; letter-spacing: .12em; text-transform: uppercase; font-size: .85rem; font-weight: 700; }

/* ==========================================================================
   Sections, tiles, cards
   ========================================================================== */
.hl-section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem !important; }
.hl-section-head h2 { margin: 0; }
.hl-section-head .hl-more { font-weight: 700; text-decoration: none; display: inline-flex; gap: .4rem; align-items: center; color: var(--hl-primary); }
.hl-section-head .hl-more:hover .hl-icon { transform: translateX(4px); }
.hl-section-head .hl-more .hl-icon { transition: transform .25s var(--hl-ease); }

.hl-tiles {
	list-style: none; padding: 0; margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
}
.hl-tile { flex: 1 1 260px; }
.hl-tile a {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	gap: .5rem;
	height: 100%;
	min-height: 220px;
	padding: 1.5rem;
	border-radius: var(--hl-r-lg);
	color: #FFFFFF;
	text-decoration: none;
	background: var(--tone-bg) padding-box, var(--hl-gold-deep) border-box;
	border: 2px solid transparent;
	box-shadow: var(--hl-card-shadow);
	transition: transform .4s var(--hl-ease), box-shadow .4s var(--hl-ease);
}
.hl-tile a::after { /* shine sweep */
	content: ""; position: absolute; inset: -20% auto -20% -70%; width: 50%;
	background: linear-gradient(100deg, transparent, rgb(255 248 220 / .3), transparent);
	transform: skewX(-18deg); transition: transform 1s var(--hl-ease); z-index: -1;
}
.hl-tile a:hover, .hl-tile a:focus-visible { transform: translateY(-6px) rotate(-.4deg); box-shadow: var(--hl-card-shadow-hover); }
.hl-tile a:hover::after { transform: skewX(-18deg) translateX(480%); }
.hl-tile__icon {
	width: 56px; height: 56px; border-radius: 50%;
	display: grid; place-items: center;
	color: #2A1A05;
	background: var(--hl-gold);
	box-shadow: inset 0 -3px 6px rgb(122 74 18 / .45), inset 0 3px 6px rgb(255 255 255 / .6), 0 6px 14px rgb(0 0 0 / .3);
	transition: transform .6s var(--hl-ease);
}
.hl-tile a:hover .hl-tile__icon { transform: rotateY(180deg); }
.hl-tile__icon .hl-icon { width: 28px; height: 28px; }
.hl-tile__title { font-family: var(--wp--preset--font-family--display); font-size: 1.5rem; font-weight: 700; margin-top: .4rem; text-shadow: 0 2px 6px rgb(0 0 0 / .35); }
.hl-tile__blurb { font-size: .98rem; color: #EEF1F6; text-shadow: 0 1px 3px rgb(0 0 0 / .4); }
.hl-tile__count { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #F3D98B; }

/* Cards (query loops) */
.hl-card {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--hl-surface);
	border: 1px solid var(--hl-border);
	border-radius: var(--hl-r-lg);
	overflow: hidden;
	box-shadow: var(--hl-card-shadow);
	transition: transform .45s var(--hl-ease), box-shadow .45s var(--hl-ease), border-color .3s;
	transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0));
}
.hl-card:hover, .hl-card:focus-within { --lift: -6px; box-shadow: var(--hl-card-shadow-hover); border-color: transparent; }
.hl-card .wp-block-post-featured-image { margin: 0; overflow: hidden; aspect-ratio: 16 / 10; background: var(--hl-surface-2); }
.hl-card .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--hl-ease); }
.hl-card:hover .wp-block-post-featured-image img { transform: scale(1.06); }
.hl-card__body { padding: 1.25rem 1.4rem 1.5rem !important; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.hl-card__body > * { margin: 0 !important; }
.hl-card .wp-block-post-title { font-size: 1.3rem; line-height: 1.22; }
.hl-card .wp-block-post-title a { color: var(--hl-contrast); text-decoration: none; }
.hl-card .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card clickable */
.hl-card .wp-block-post-title a:focus-visible { outline: none; }
.hl-card:has(.wp-block-post-title a:focus-visible) { outline: 3px solid var(--hl-focus); outline-offset: 3px; }
.hl-card .hl-badge-wrap, .hl-card .wp-block-post-terms { position: relative; z-index: 2; }
.hl-card .wp-block-post-excerpt { color: var(--hl-muted); font-size: 1rem; }
.hl-card .wp-block-post-excerpt__more-text { display: none; }
.hl-card__foot { margin-top: auto !important; display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; color: var(--hl-muted); font-size: .9rem; }
.hl-card--video .wp-block-post-featured-image { position: relative; }
.hl-card--video .wp-block-post-featured-image::after {
	content: ""; position: absolute; inset: 50% auto auto 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 7.5v9l7-4.5z' fill='%232A1A05'/%3E%3C/svg%3E") center / 60% no-repeat, var(--hl-gold);
	box-shadow: 0 8px 24px rgb(0 0 0 / .4); transition: transform .4s var(--hl-ease);
}
.hl-card--video:hover .wp-block-post-featured-image::after { transform: scale(1.12); }

/* Placeholder art when an entry has no featured image */
.hl-card .hl-placeholder, .hl-placeholder { position: relative; display: grid; place-items: center; background: var(--tone-bg); overflow: hidden; }
.hl-placeholder::before {
	content: ""; position: absolute; inset: 0; opacity: .35;
	background-image: radial-gradient(circle at 1px 1px, rgb(243 217 139 / .7) 1.2px, transparent 1.6px);
	background-size: 20px 20px;
}
.hl-placeholder__coin {
	position: relative; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
	color: #2A1A05; background: var(--hl-gold);
	box-shadow: inset 0 -5px 10px rgb(122 74 18 / .5), inset 0 5px 10px rgb(255 255 255 / .6), 0 10px 26px rgb(0 0 0 / .35);
}
.hl-placeholder__coin .hl-icon { width: 40px; height: 40px; }

/* Badges & meta */
.hl-badge {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .3rem .75rem .3rem .4rem;
	border-radius: 999px;
	font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	background: var(--tone-bg) padding-box, var(--hl-gold-deep) border-box;
	border: 1.5px solid transparent;
	transition: transform .25s var(--hl-ease);
}
.hl-badge:hover { transform: translateY(-1px); color: #fff; }
.hl-badge .hl-icon { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--hl-gold); color: #2A1A05; }
.hl-meta-line { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; color: var(--hl-muted); font-size: .92rem; }
.hl-meta-item { display: inline-flex; align-items: center; gap: .35rem; }
.hl-meta-item .hl-icon { color: var(--hl-accent); }

/* Stars */
.hl-rating { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; }
.hl-stars { position: relative; display: inline-block; font-size: 1.15rem; line-height: 1; letter-spacing: .08em; }
.hl-stars__track { color: var(--hl-border); }
.hl-stars__fill {
	position: absolute; inset: 0; overflow: hidden; white-space: nowrap;
	width: calc(var(--hl-rating) / 5 * 100%);
	background: var(--hl-gold-deep); -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (forced-colors: active) { .hl-stars__fill { color: Highlight; background: none; } }

/* Pagination */
.wp-block-query-pagination { gap: .5rem; margin-top: 3rem !important; font-weight: 700; }
.wp-block-query-pagination a, .wp-block-query-pagination-numbers .page-numbers {
	display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 .9rem;
	border-radius: 999px; border: 1px solid var(--hl-border); text-decoration: none; color: var(--hl-contrast);
}
.wp-block-query-pagination-numbers .page-numbers.current { background: var(--hl-gold); color: #2A1A05; border-color: transparent; }
.wp-block-query-pagination a:hover { border-color: var(--hl-accent); }

/* ==========================================================================
   Archive & single headers
   ========================================================================== */
.hl-archive-hero {
	position: relative; overflow: hidden; isolation: isolate;
	color: #FFF8E6;
	background: var(--tone-bg, linear-gradient(160deg, #1D3F9A, #0C1838));
	margin-block-start: 0 !important;
}
.hl-archive-hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1; opacity: .25;
	background-image: radial-gradient(circle at 1px 1px, rgb(243 217 139 / .6) 1.2px, transparent 1.6px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(90deg, transparent 30%, #000);
	mask-image: linear-gradient(90deg, transparent 30%, #000);
}
.hl-archive-hero::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--hl-gold-deep);
}
.hl-archive-hero h1 { color: #FFF8E6; margin: 0; }
.hl-archive-hero .wp-block-query-title { margin: 0; }
.hl-archive-hero p, .hl-archive-hero .wp-block-term-description { color: #E6EAF2; max-width: 44rem; font-size: 1.15rem; }
.hl-archive-hero .hl-eyebrow { color: #F3D98B; }

.hl-single-head .wp-block-post-title { font-size: var(--wp--preset--font-size--xx-large); }
.hl-single-head .wp-block-post-excerpt { font-size: 1.25rem; color: var(--hl-muted); }
.hl-single-head .wp-block-post-excerpt__more-text { display: none; }
.hl-byline { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem; color: var(--hl-muted); font-size: .95rem; }
.hl-byline .wp-block-avatar img { border-radius: 50%; border: 2px solid transparent; background: var(--hl-gold-deep) border-box; }
.hl-feature-image { margin-bottom: clamp(1.5rem, 4vw, 2.75rem) !important; }
.hl-feature-image img { border-radius: var(--hl-r-lg); box-shadow: var(--hl-card-shadow); }

/* Prose */
.hl-prose { font-size: 1.15rem; }
.hl-prose > h2 { margin-top: 2.6em; }
.hl-prose > h2::after { content: ""; display: block; width: 64px; height: 4px; margin-top: .45em; border-radius: 4px; background: var(--hl-gold-deep); }
.hl-prose > p:first-child::first-letter {
	float: left; font-family: var(--wp--preset--font-family--display); font-weight: 800;
	font-size: 3.6em; line-height: .85; margin: .06em .1em 0 0;
	background: var(--hl-gilt-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.single-hl_news .hl-prose > p:first-child::first-letter,
.single-hl_howto .hl-prose > p:first-child::first-letter { all: unset; }
.hl-prose img { border-radius: var(--hl-r-md); }
.hl-prose blockquote { margin-inline: 0; }

/* Taxonomy chips */
.wp-block-post-terms a, .hl-chips a {
	display: inline-block; padding: .2rem .7rem; margin: 0 .2rem .3rem 0;
	border-radius: 999px; border: 1px solid var(--hl-border); background: var(--hl-surface);
	color: var(--hl-contrast); text-decoration: none; font-weight: 700; font-size: .85rem;
	transition: border-color .2s, background .2s;
}
.wp-block-post-terms a:hover { border-color: var(--hl-accent); background: var(--hl-surface-2); }
.wp-block-post-terms__separator { display: none; }

/* ==========================================================================
   Content-type components
   ========================================================================== */
.hl-pc-title { font-size: 1.1rem !important; margin: 0 0 .75rem !important; display: flex; gap: .5rem; align-items: center; font-family: var(--wp--preset--font-family--display); }

/* Review scorecard */
.hl-review-box { padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--hl-card-shadow); }
.hl-review-box__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; align-items: center; }
.hl-review-box__product { flex: 1 1 280px; }
.hl-review-box__name { font-family: var(--wp--preset--font-family--display); font-size: 1.6rem; font-weight: 700; margin: 0 0 .4rem; line-height: 1.2; }
.hl-review-box__brand { font-size: 1rem; font-weight: 400; color: var(--hl-muted); }
.hl-review-box__verdict { font-size: 1.1rem; margin: 0; }
.hl-review-box__score { display: grid; justify-items: center; gap: .5rem; }
.hl-medal {
	width: 104px; height: 104px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--hl-gold);
	box-shadow: inset 0 -6px 12px rgb(122 74 18 / .5), inset 0 6px 12px rgb(255 255 255 / .7), 0 10px 24px rgb(122 74 18 / .35);
	position: relative;
}
.hl-medal::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; border: 2px dotted rgb(122 74 18 / .6); }
.hl-medal span { font-family: var(--wp--preset--font-family--display); font-size: 2.3rem; font-weight: 800; color: #2A1A05; }
.hl-review-box__pc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.hl-pros, .hl-cons { padding: 1.1rem 1.25rem; border-radius: var(--hl-r-md); background: var(--hl-surface-2); }
.hl-pros { border-left: 5px solid #0F7A3D; }
.hl-cons { border-left: 5px solid #B3122E; }
.hl-pros ul, .hl-cons ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.hl-pros li, .hl-cons li { display: flex; gap: .55rem; align-items: flex-start; }
.hl-pros .hl-icon { color: var(--hl-secondary); margin-top: .2em; }
.hl-cons .hl-icon { color: var(--hl-tertiary); margin-top: .2em; }
.hl-review-box__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px dashed var(--hl-border); }
.hl-review-box__price { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.3rem; font-weight: 700; margin: 0; }
.hl-review-box__price .hl-icon { color: var(--hl-accent); }
.hl-disclosure { font-size: .88rem; color: var(--hl-muted); margin: 1rem 0 0; }

/* Video */
.hl-video { margin: 0; padding: 6px; border-radius: var(--hl-r-lg); background: var(--hl-gold-deep); box-shadow: var(--hl-card-shadow); }
.hl-video-frame { border-radius: calc(var(--hl-r-lg) - 6px); overflow: hidden; background: #000; }
.hl-video-frame iframe, .hl-video-frame video, .hl-video-frame .wp-embed-responsive { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.wp-block-details { border: 1px solid var(--hl-border); border-radius: var(--hl-r-md); padding: 1rem 1.25rem; background: var(--hl-surface); }
.wp-block-details summary { cursor: pointer; font-weight: 700; min-height: 32px; }

/* How-to */
.hl-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 1rem; margin: 0 0 1.5rem; }
.hl-fact { display: grid; grid-template-columns: auto 1fr; column-gap: .65rem; align-items: center; padding: 1rem; border-radius: var(--hl-r-md); background: var(--hl-surface); border: 1px solid var(--hl-border); }
.hl-fact .hl-icon { grid-row: span 2; width: 36px; height: 36px; padding: 7px; border-radius: 50%; background: var(--hl-gold); color: #2A1A05; }
.hl-fact dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--hl-muted); font-weight: 700; }
.hl-fact dd { margin: 0; font-weight: 700; font-size: 1.05rem; }
.hl-materials { padding: 1.25rem 1.5rem; }
.hl-checklist, .is-style-hl-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.hl-checklist label { display: flex; gap: .7rem; align-items: center; cursor: pointer; min-height: 32px; }
.hl-checklist input[type="checkbox"] { width: 22px; height: 22px; accent-color: #0F7A3D; flex: none; }
.hl-checklist input:checked + span { text-decoration: line-through; color: var(--hl-muted); }
.is-style-hl-checklist li { position: relative; padding-left: 2rem; }
.is-style-hl-checklist li::before {
	content: ""; position: absolute; left: 0; top: .25em; width: 1.25rem; height: 1.25rem; border-radius: 50%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A1A05' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 70% no-repeat, var(--hl-gold);
}

.hl-prose { counter-reset: hl-step hl-pick; }
h3.is-style-hl-step {
	counter-increment: hl-step;
	position: relative;
	display: flex; align-items: center; gap: 1rem;
	margin-top: 2.5rem !important;
	padding-top: 1.5rem;
	border-top: 1px dashed var(--hl-border);
}
h3.is-style-hl-step::before {
	content: counter(hl-step);
	flex: none;
	width: 3rem; height: 3rem; border-radius: 50%;
	display: grid; place-items: center;
	font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.35rem;
	color: #FFFFFF;
	background: radial-gradient(circle at 30% 25%, #3C66D6, #1D3F9A 55%, #0C1838) padding-box, var(--hl-gold-deep) border-box;
	border: 3px solid transparent;
	box-shadow: 0 6px 14px rgb(12 24 56 / .3);
}

/* Lists (recommendation picks) */
.is-style-hl-pick {
	position: relative;
	padding: clamp(1.25rem, 3vw, 2rem) !important;
	border-radius: var(--hl-r-lg);
	background: var(--hl-surface);
	border: 1px solid var(--hl-border);
	box-shadow: var(--hl-card-shadow);
	margin-block: 2rem !important;
	transition: box-shadow .4s var(--hl-ease), transform .4s var(--hl-ease);
}
.is-style-hl-pick:hover { box-shadow: var(--hl-card-shadow-hover); }
.is-style-hl-pick :where(h2, h3) { margin-top: 0; font-size: var(--wp--preset--font-size--large); }
.hl-ranked .is-style-hl-pick { counter-increment: hl-pick; padding-top: clamp(2.25rem, 4vw, 2.75rem) !important; }
.hl-ranked .is-style-hl-pick::before {
	content: "#" counter(hl-pick);
	position: absolute; top: -1.1rem; left: 1.5rem;
	padding: .35rem 1rem; border-radius: 999px;
	font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.15rem;
	color: #2A1A05; background: var(--hl-gold);
	box-shadow: 0 6px 14px rgb(122 74 18 / .35);
}
.is-style-hl-pick .wp-block-image img { border-radius: var(--hl-r-md); }
.hl-pick__tag { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hl-secondary); margin: 0 0 .25rem !important; }

/* Callouts & panels */
.wp-block-group.is-style-hl-callout {
	padding: clamp(1.25rem, 3vw, 2rem) !important;
	border: 2px solid transparent;
	background: linear-gradient(var(--hl-surface-2), var(--hl-surface-2)) padding-box, var(--hl-gold-deep) border-box;
	border-radius: var(--hl-r-md);
}
.wp-block-group.is-style-hl-enamel {
	padding: clamp(1.25rem, 3vw, 2rem) !important;
	color: #F4EFE3;
	border: 2px solid transparent;
	background: radial-gradient(130% 140% at 15% 10%, #3C66D6 0%, #1D3F9A 40%, #0C1838 100%) padding-box, var(--hl-gold-deep) border-box;
	border-radius: var(--hl-r-lg);
}
.wp-block-group.is-style-hl-enamel :where(h1, h2, h3, h4, h5, h6) { color: #FFF8E6; }
.wp-block-group.is-style-hl-enamel a:not(.wp-block-button__link) { color: #F3D98B; }
.wp-block-image.is-style-hl-metal-frame img {
	padding: 6px; border-radius: var(--hl-r-lg);
	background: var(--hl-gold-deep);
	box-shadow: var(--hl-card-shadow);
}

.hl-takeaways { padding: 1.25rem 1.5rem; background: linear-gradient(var(--hl-surface-2), var(--hl-surface-2)) padding-box, var(--hl-gold-deep) border-box; }
.hl-takeaways .hl-icon { color: var(--hl-accent); width: 1.4em; height: 1.4em; }
.hl-takeaways ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .4rem; }
.hl-takeaways li::marker { color: var(--hl-accent); }

/* News */
.hl-news-source {
	display: flex; gap: 1rem; align-items: flex-start;
	padding: 1.1rem 1.4rem; border-radius: var(--hl-r-md);
	background: var(--hl-surface); border: 1px solid var(--hl-border); border-left: 5px solid #0F7A3D;
}
.hl-news-source > .hl-icon { width: 2rem; height: 2rem; color: var(--hl-secondary); }
.hl-news-source p { margin: 0; }
.hl-news-source__name { font-weight: 700; font-size: 1.1rem; }
.hl-news-source__name a { display: inline-flex; gap: .35rem; align-items: center; }
.hl-news-source__date { color: var(--hl-muted); font-size: .9rem; }

/* News archive: compact list */
.hl-news-list { list-style: none; padding: 0; }
.hl-news-row {
	display: grid !important;
	grid-template-columns: 7.5rem 1fr;
	gap: .25rem 1.5rem;
	padding: 1.25rem 0 !important;
	border-bottom: 1px solid var(--hl-border);
	position: relative;
}
.hl-news-row > * { margin: 0 !important; }
.hl-news-row .wp-block-post-date { grid-row: span 3; font-family: var(--wp--preset--font-family--display); font-weight: 700; color: var(--hl-accent); font-size: 1rem; }
.hl-news-row .wp-block-post-title { font-size: 1.3rem; }
.hl-news-row .wp-block-post-title a { text-decoration: none; color: var(--hl-contrast); }
.hl-news-row .wp-block-post-title a:hover { color: var(--hl-primary); text-decoration: underline; }
@media (max-width: 600px) { .hl-news-row { grid-template-columns: 1fr; } .hl-news-row .wp-block-post-date { grid-row: auto; } }

/* Author box / related */
.hl-author-box { display: flex; gap: 1.25rem; align-items: center; }
.hl-author-box .wp-block-avatar img { border-radius: 50%; }

/* Search */
.wp-block-search__input {
	min-height: 48px; border-radius: 999px !important; padding: .5rem 1.2rem !important;
	border: 2px solid var(--hl-border) !important; background: var(--hl-surface); color: var(--hl-contrast);
}
.wp-block-search__input:focus { border-color: var(--hl-accent) !important; }
.wp-block-search__button { margin-left: .5rem !important; }

/* Comments */
.wp-block-comments { border-top: 1px solid var(--hl-border); padding-top: 2rem; }
.wp-block-post-comments-form input:not([type=submit]):not([type=checkbox]),
.wp-block-post-comments-form textarea {
	border: 2px solid var(--hl-border); border-radius: var(--hl-r-sm); background: var(--hl-surface); color: var(--hl-contrast); padding: .7rem;
}

/* ==========================================================================
   Footer (always "night enamel")
   ========================================================================== */
.hl-footer {
	position: relative;
	color: #D9DEE8;
	background:
		radial-gradient(50% 80% at 0% 0%, rgb(29 63 154 / .55), transparent 70%),
		radial-gradient(40% 80% at 100% 100%, rgb(15 122 61 / .4), transparent 70%),
		#0C1222;
	margin-block-start: 0 !important;
}
.hl-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--hl-gold-deep); }
.hl-footer h2, .hl-footer h3 { color: #F3D98B; font-size: 1rem !important; letter-spacing: .12em; text-transform: uppercase; font-family: var(--wp--preset--font-family--body); }
.hl-footer a { color: #EDE7DA; text-decoration: none; }
.hl-footer a:hover { color: #F3D98B; text-decoration: underline; }
.hl-footer .wp-block-navigation { --navigation-layout-direction: column; }
.hl-footer :focus-visible { outline-color: #F3D98B; }
.hl-footer__emblem img { width: 120px; height: 120px; border-radius: 50%; -webkit-mask-image: radial-gradient(circle, #000 62%, transparent 71%); mask-image: radial-gradient(circle, #000 62%, transparent 71%); }
.hl-footer__legal { border-top: 1px solid rgb(243 217 139 / .2); color: #AEB6C4; font-size: .9rem; }


/* ---------- Template helpers ---------- */
.wp-site-blocks > main, .wp-site-blocks > .hl-footer { margin-block-start: 0; }
.hl-section { position: relative; }
.hl-section--alt { background: var(--hl-surface-2); }
.hl-section--alt::before, .hl-section--alt::after {
	content: ""; position: absolute; left: 0; right: 0; height: 1px;
	background: linear-gradient(90deg, transparent, rgb(212 168 75 / .6), transparent);
}
.hl-section--alt::before { top: 0; }
.hl-section--alt::after { bottom: 0; }
.hl-empty { color: var(--hl-muted); font-style: italic; }
.hl-terms { display: grid; gap: .25rem; border-top: 1px solid var(--hl-border); padding-top: 1.25rem; }
.hl-terms .wp-block-post-terms__prefix { font-weight: 700; color: var(--hl-muted); margin-right: .4rem; }
.hl-related { background: var(--hl-surface-2); }
.hl-related:not(:has(.wp-block-post-template > li)) { display: none; }
.hl-archive-hero .wp-block-search { max-width: 36rem; margin-top: 1.25rem; }
.hl-archive-hero .wp-block-search__input { background: rgb(255 255 255 / .96); color: #1B2230; border-color: transparent !important; }

.hl-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.hl-footer__links a { display: inline-block; padding: .15rem 0; }
.hl-motion-toggle--inline { position: static; background: rgb(255 255 255 / .06); }


/* ==========================================================================
   Games showcase
   ========================================================================== */
.hl-games-hero { min-height: clamp(320px, 42vh, 460px); display: flex; flex-direction: column; justify-content: center; }
.hl-games-hero .wp-block-post-title { font-size: var(--wp--preset--font-size--xx-large); color: #FFF8E6; margin: 0; }
.hl-games-hero__lede, .hl-games-hero .wp-block-post-excerpt { max-width: 38rem; font-size: 1.2rem; color: #E6EAF2; }
.hl-games-hero .wp-block-post-excerpt__more-text { display: none; }
.hl-games-hero .hl-layer--icons { inset: 0; z-index: 0; }
.hl-games-hero > .alignwide { position: relative; z-index: 1; width: 100%; }
@media (max-width: 781px) { .hl-games-hero .hl-float:nth-child(n+3) { display: none; } .hl-games-hero .hl-float { opacity: .6; } }

.hl-games__filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; }
.hl-chip {
	min-height: 44px; padding: .5rem 1.1rem; border-radius: 999px; cursor: pointer;
	font: inherit; font-weight: 700; font-size: .95rem;
	color: var(--hl-contrast); background: var(--hl-surface);
	border: 2px solid var(--hl-border);
	transition: border-color .2s, background .2s, transform .2s var(--hl-ease);
}
.hl-chip:hover { border-color: var(--hl-accent); transform: translateY(-1px); }
.hl-chip[aria-pressed="true"] { background: var(--hl-gold); color: #2A1A05; border-color: transparent; box-shadow: 0 4px 14px rgb(212 168 75 / .35); }

.hl-games__grid {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
	gap: 1.5rem;
}
.hl-game[hidden] { display: none; }
.hl-game__card {
	position: relative; height: 100%;
	display: flex; flex-direction: column;
	border-radius: var(--hl-r-lg); overflow: hidden;
	border: 2px solid transparent;
	background: linear-gradient(var(--hl-surface), var(--hl-surface)) padding-box, var(--hl-gold-deep) border-box;
	box-shadow: var(--hl-card-shadow);
	transition: transform .45s var(--hl-ease), box-shadow .45s var(--hl-ease);
}
.hl-game__card:hover, .hl-game__card:focus-within { transform: translateY(-6px) rotate(-.4deg); box-shadow: var(--hl-card-shadow-hover); }
.hl-game__card:has(a:focus-visible) { outline: 3px solid var(--hl-focus); outline-offset: 4px; }
.hl-game__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--hl-surface-2); }
.hl-game__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--hl-ease); }
.hl-game__media .hl-placeholder { width: 100%; height: 100%; display: grid; place-items: center; }
.hl-game__media:has(.hl-placeholder) .hl-game__play { display: none; }
.hl-game__card:hover .hl-game__media img { transform: scale(1.07); }
.hl-game__media::after { /* metallic sheen sweeping over the picture */
	content: ""; position: absolute; inset: -20% auto -20% -70%; width: 45%;
	background: linear-gradient(100deg, transparent, rgb(255 248 220 / .45), transparent);
	transform: skewX(-18deg); transition: transform 1s var(--hl-ease); pointer-events: none;
}
.hl-game__card:hover .hl-game__media::after { transform: skewX(-18deg) translateX(480%); }
.hl-game__play {
	position: absolute; right: 14px; bottom: 14px;
	width: 54px; height: 54px; border-radius: 50%;
	display: grid; place-items: center; color: #2A1A05; background: var(--hl-gold);
	box-shadow: inset 0 -4px 8px rgb(122 74 18 / .45), inset 0 4px 8px rgb(255 255 255 / .6), 0 8px 20px rgb(0 0 0 / .35);
	transform: scale(.9); transition: transform .4s var(--hl-ease);
}
.hl-game__play .hl-icon { width: 30px; height: 30px; }
.hl-game__card:hover .hl-game__play { transform: scale(1.08) rotate(-8deg); }
.hl-game__body { padding: 1.1rem 1.3rem 1.3rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.hl-game__body > * { margin: 0; }
.hl-game__tag { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hl-secondary); }
.hl-game__title { font-size: 1.3rem; line-height: 1.2; }
.hl-game__title a { color: var(--hl-contrast); text-decoration: none; }
.hl-game__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card is the link */
.hl-game__title a:focus-visible { outline: none; }
.hl-game__desc { color: var(--hl-muted); font-size: 1rem; }
.hl-game__cta { margin-top: auto !important; padding-top: .4rem; font-weight: 700; color: var(--hl-primary); display: inline-flex; align-items: center; gap: .4rem; }
.hl-game__cta .hl-icon { transition: transform .3s var(--hl-ease); }
.hl-game__card:hover .hl-game__cta .hl-icon { transform: translateX(5px); }
.hl-games-section .wp-block-post-content:empty { display: none; }
html[data-motion="reduced"] .hl-game__card { transform: none !important; }

/* ==========================================================================
   Motion: reveal on scroll + keyframes
   ========================================================================== */
.hl-js [data-reveal], .hl-js .hl-reveal {
	opacity: 0;
	transform: translateY(28px) scale(.98);
	transition: opacity .8s var(--hl-ease), transform .8s var(--hl-ease);
	transition-delay: calc(var(--i, 0) * 70ms);
}
.hl-js [data-reveal].is-visible, .hl-js .hl-reveal.is-visible { opacity: 1; transform: none; }
.hl-js .hl-reveal-children > * { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--hl-ease), transform .7s var(--hl-ease); }
.hl-js .hl-reveal-children.is-visible > * { opacity: 1; transform: none; }
.hl-js .hl-reveal-children.is-visible > *:nth-child(2) { transition-delay: .08s; }
.hl-js .hl-reveal-children.is-visible > *:nth-child(3) { transition-delay: .16s; }
.hl-js .hl-reveal-children.is-visible > *:nth-child(4) { transition-delay: .24s; }
.hl-js .hl-reveal-children.is-visible > *:nth-child(5) { transition-delay: .32s; }
.hl-js .hl-reveal-children.is-visible > *:nth-child(6) { transition-delay: .40s; }
.hl-js .hl-reveal-children.is-visible > *:nth-child(n+7) { transition-delay: .48s; }

.hl-hero__copy > * { animation: hl-rise 1s var(--hl-ease) both; }
.hl-hero__copy > *:nth-child(2) { animation-delay: .12s; }
.hl-hero__copy > *:nth-child(3) { animation-delay: .24s; }
.hl-hero__copy > *:nth-child(4) { animation-delay: .36s; }
.hl-hero__copy > *:nth-child(5) { animation-delay: .48s; }
.hl-hero__art { animation: hl-emblem-in 1.4s var(--hl-ease) .2s both; }

@keyframes hl-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes hl-emblem-in { from { opacity: 0; transform: scale(.85) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes hl-bob { 0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); } 50% { transform: translateY(-18px) rotate(calc(var(--rot, 0deg) + 6deg)); } }
@keyframes hl-spin { to { transform: translateX(26%) rotate(360deg); } }
@keyframes hl-spin-c { to { transform: rotate(360deg); } }
@keyframes hl-twinkle { from { opacity: .45; } to { opacity: .9; } }
@keyframes hl-pulse { 0%, 100% { opacity: .6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes hl-sweep { 0% { background-position: 120% 0; } 55%, 100% { background-position: -40% 0; } }
@keyframes hl-gilt { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes hl-scrollcue { 0% { transform: translateY(0); opacity: 1; } 80%, 100% { transform: translateY(14px); opacity: 0; } }

/* Respect reduced-motion (OS setting) and the on-page "Pause motion" control */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
	.hl-js [data-reveal], .hl-js .hl-reveal, .hl-js .hl-reveal-children > * { opacity: 1; transform: none; }
	.hl-layer, .hl-hero__art { transform: none !important; }
}
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after {
	animation-play-state: paused !important;
	transition-duration: .001ms !important;
}
html[data-motion="reduced"] .hl-hero__copy > *, html[data-motion="reduced"] .hl-hero__art { animation: none !important; }
html[data-motion="reduced"] [data-reveal], html[data-motion="reduced"] .hl-reveal, html[data-motion="reduced"] .hl-reveal-children > * { opacity: 1 !important; transform: none !important; }
html[data-motion="reduced"] .hl-layer, html[data-motion="reduced"] .hl-card { transform: none !important; }

/* ---------- Small screens ---------- */
@media (max-width: 781px) {
	.hl-layer--icons .hl-float:nth-child(n+5) { display: none; }
	.hl-card { transform: none !important; }
}

/* Print */
@media print {
	.hl-header, .hl-footer, .hl-progress, .hl-hero__scroll, .hl-motion-toggle, .hl-layer { display: none !important; }
	body { background: #fff; color: #000; }
	.hl-gilded, .is-style-hl-gilded { -webkit-text-fill-color: #000; color: #000; background: none; }
}

/* Mobile overlay menu: left-aligned, readable list */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { align-items: flex-start !important; text-align: left; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { border: 0 !important; box-shadow: none; padding: .25rem 0 .5rem 1rem !important; border-left: 2px solid var(--hl-accent) !important; border-radius: 0; }