/* =========================================================================
   FitHaven — main.css
   Mobile-first. LIGHT, warm palette: soft off-white surfaces with
   Electric Blue #2EC5FF + Neon Pink #FF4FD8 accents and gentle gradients.
   Dark is reserved for intentional accent bands only.
   Headlines: Poppins. Body: Inter.
   ========================================================================= */

:root {
	/* Warm, light surfaces (dominant) */
	--fh-bg: #FBF7F4;            /* warm off-white page */
	--fh-bg-2: #FFFDFB;          /* near-white lift */
	--fh-panel: #FFFFFF;         /* cards / panels */
	--fh-panel-2: #F3EEEA;       /* subtle inset (image placeholders) */
	--fh-line: rgba(23, 20, 34, 0.10);
	--fh-line-strong: rgba(23, 20, 34, 0.16);

	/* Accents — text tokens are WCAG AA (>=4.5:1) on every light surface;
	   bright tokens are brand fills/gradients and AA text on the dark bands. */
	--fh-blue: #0977AA;          /* accessible blue on light (links/text): 4.66:1 on page bg */
	--fh-blue-bright: #2EC5FF;   /* brand blue for gradients/fills; 9.08:1 on dark bands */
	--fh-pink: #CC1F82;          /* accessible pink on light (text): 4.82:1 on page bg */
	--fh-pink-bright: #FF4FD8;   /* brand pink for gradients/fills; 6.34:1 on dark bands */

	/* Ink */
	--fh-ink: #1B1424;           /* warm near-black text */
	--fh-ink-soft: #2C2438;
	--fh-muted: #6A6377;         /* muted body/meta on light */

	/* Dark accent band tokens */
	--fh-dark: #0F1020;
	--fh-dark-2: #171734;
	--fh-on-dark: #F4F5FB;
	--fh-on-dark-muted: #B6B9D0;

	--fh-grad: linear-gradient(90deg, #2EC5FF 0%, #FF4FD8 100%);
	--fh-grad-soft: linear-gradient(135deg, rgba(46,197,255,0.14) 0%, rgba(255,79,216,0.12) 100%);
	--fh-grad-wash: linear-gradient(135deg, rgba(46,197,255,0.10) 0%, rgba(255,79,216,0.08) 55%, rgba(255,255,255,0) 100%);
	--fh-radius: 16px;
	--fh-radius-sm: 10px;
	--fh-maxw: 1220px;
	--fh-contentw: 820px;
	--fh-font-head: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--fh-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--fh-shadow: 0 10px 34px rgba(23, 20, 34, 0.10);
	--fh-shadow-lift: 0 16px 44px rgba(23, 20, 34, 0.14);
	--fh-glow-blue: 0 0 0 1px rgba(46,197,255,0.45), 0 12px 30px rgba(46,197,255,0.18);
	--fh-glow-pink: 0 0 0 1px rgba(255,79,216,0.40), 0 12px 30px rgba(255,79,216,0.16);
}

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

html { -webkit-text-size-adjust: 100%; }

/* =========================================================================
   MOBILE HARD LOCK — FitHaven must NEVER ship horizontal overflow or clipped
   content on any viewport (320/360/390/414/430/768 are the tested widths;
   see FITHAVEN_MOBILE_DIMENSION_LOCK.md). Root causes are fixed throughout
   this file (no 100vw units, no fixed card widths, wrapping flanks/nav);
   these guards keep third-party content (embeds, ad creatives, editor HTML)
   from ever reintroducing it.
   ========================================================================= */
img, iframe, video, embed, object { max-width: 100%; }
.fh-grid > * { min-width: 0; }
h1, h2, h3, h4, .fh-card__title, .fh-single__title { overflow-wrap: break-word; }
.fh-single__content table { display: block; max-width: 100%; overflow-x: auto; }

body {
	margin: 0;
	background:
		radial-gradient(90% 60% at 100% 0%, rgba(255,79,216,0.06), transparent 60%),
		radial-gradient(80% 55% at 0% 0%, rgba(46,197,255,0.07), transparent 60%),
		var(--fh-bg);
	color: var(--fh-ink);
	font-family: var(--fh-font-body);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--fh-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
	font-family: var(--fh-font-head);
	line-height: 1.12;
	margin: 0 0 0.5em;
	letter-spacing: -0.01em;
	font-weight: 700;
}

:focus-visible {
	outline: 3px solid var(--fh-blue);
	outline-offset: 2px;
	border-radius: 4px;
}

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	width: 1px; height: 1px; overflow: hidden;
	margin: -1px; padding: 0; border: 0; word-wrap: normal !important;
}
.screen-reader-text:focus {
	position: fixed !important;
	top: 8px; left: 8px; z-index: 100000;
	width: auto; height: auto; clip: auto; clip-path: none;
	background: var(--fh-panel); color: var(--fh-blue);
	border: 1px solid var(--fh-line-strong);
	padding: 12px 18px; border-radius: 8px;
}

.skip-link { position: absolute; left: -9999px; }

.fh-icon { display: inline-block; vertical-align: middle; }

/* ---------- Buttons ---------- */
.fh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 12px 20px;
	border-radius: 999px;
	font-family: var(--fh-font-head);
	font-weight: 600;
	font-size: 0.98rem;
	line-height: 1;
	cursor: pointer;
	border: 1px solid transparent;
	text-align: center;
	transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.fh-btn:hover { text-decoration: none; }
.fh-btn--primary {
	background: var(--fh-grad);
	color: #0B0B12;
	box-shadow: var(--fh-glow-blue);
}
.fh-btn--primary:hover { transform: translateY(-1px); box-shadow: var(--fh-glow-pink); }
.fh-btn--ghost {
	background: var(--fh-panel);
	color: var(--fh-ink);
	border-color: var(--fh-line-strong);
	box-shadow: 0 2px 8px rgba(23,20,34,0.05);
}
.fh-btn--ghost:hover { border-color: var(--fh-blue); color: var(--fh-blue); transform: translateY(-1px); }
.fh-btn--join {
	background: var(--fh-grad);
	color: #0B0B12;
	padding: 10px 18px;
	min-height: 40px;
}
/* Ghost buttons placed on a dark accent band */
.fh-on-dark .fh-btn--ghost,
.fh-hero .fh-btn--ghost,
.fh-fitball .fh-btn--ghost,
.fh-quiz-cta .fh-btn--ghost {
	background: rgba(255,255,255,0.08);
	color: var(--fh-on-dark);
	border-color: rgba(255,255,255,0.22);
	box-shadow: none;
}
.fh-on-dark .fh-btn--ghost:hover,
.fh-hero .fh-btn--ghost:hover,
.fh-fitball .fh-btn--ghost:hover,
.fh-quiz-cta .fh-btn--ghost:hover { border-color: var(--fh-blue-bright); color: var(--fh-blue-bright); }

/* ---------- Badges / pills ---------- */
.fh-badge {
	display: inline-flex;
	align-items: center;
	font-family: var(--fh-font-head);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
}
.fh-badge--preview { background: rgba(204,31,130,0.10); color: var(--fh-pink); border: 1px solid rgba(204,31,130,0.35); }
.fh-badge--local { background: rgba(9,119,170,0.10); color: var(--fh-blue); border: 1px solid rgba(9,119,170,0.35); }
/* On dark accent bands the badges switch to the bright brand tokens (AA on dark). */
.fh-hero .fh-badge--preview, .fh-fitball .fh-badge--preview, .fh-quiz-cta .fh-badge--preview {
	background: rgba(255,79,216,0.14); color: var(--fh-pink-bright); border-color: rgba(255,79,216,0.55);
}
.fh-hero .fh-badge--local, .fh-fitball .fh-badge--local, .fh-quiz-cta .fh-badge--local {
	background: rgba(46,197,255,0.14); color: var(--fh-blue-bright); border-color: rgba(46,197,255,0.55);
}

.fh-pill {
	display: inline-flex;
	align-items: center;
	font-family: var(--fh-font-head);
	font-weight: 600;
	font-size: 0.84rem;
	letter-spacing: 0.02em;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--fh-grad-soft);
	color: var(--fh-blue);
	border: 1px solid rgba(9,119,170,0.30);
}
.fh-pill:hover { text-decoration: none; color: var(--fh-pink); border-color: var(--fh-pink); }
.fh-pill--sponsored { background: rgba(23,20,34,0.05); color: var(--fh-muted); border-color: var(--fh-line); }

/* ---------- Trending ticker ---------- */
.fh-trending {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--fh-grad);
	color: #0B0B12;
	padding: 8px 14px;
	overflow: hidden;
}
.fh-trending__label {
	font-family: var(--fh-font-head);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	flex: 0 0 auto;
}
.fh-trending__viewport { overflow: hidden; flex: 1 1 auto; }
.fh-trending__track {
	display: flex;
	gap: 32px;
	list-style: none;
	margin: 0; padding: 0;
	white-space: nowrap;
	width: max-content;
	animation: fh-marquee 34s linear infinite;
}
.fh-trending__track a { color: #0B0B12; font-weight: 600; font-size: 0.9rem; }
.fh-trending__track a:hover { color: #12121C; }
@keyframes fh-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
.fh-trending:hover .fh-trending__track { animation-play-state: paused; }

/* ---------- Masthead — command center, NOT sticky (frees the mobile viewport) ----------
   Built AROUND the big logo: both flanks stack two working rows each
   (left: Store/Quiz chips + social icons; right: search/Join + sponsor
   micro-slot) so nothing beside the logo is dead space. */
.fh-masthead {
	position: relative;
	z-index: 50;
	background:
		radial-gradient(120% 180% at 50% -60%, rgba(46,197,255,0.12), transparent 60%),
		radial-gradient(120% 160% at 100% -40%, rgba(255,79,216,0.11), transparent 60%),
		var(--fh-bg-2);
	border-bottom: 2px solid transparent;
	border-image: var(--fh-grad) 1;
	box-shadow: 0 6px 20px rgba(23,20,34,0.06);
}
/* Mobile: brand on its own centered row, controls row beneath (true centering —
   unequal flank widths can no longer push the logo off-axis). */
.fh-masthead__inner {
	max-width: var(--fh-maxw);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 8px 12px;
	padding: 14px 16px 12px;
}
.fh-masthead__brand { grid-column: 1 / -1; grid-row: 1; justify-self: center; text-align: center; min-width: 0; }
.fh-masthead__left { grid-row: 2; grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; justify-self: start; min-width: 0; }
.fh-masthead__right { grid-row: 2; grid-column: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; justify-self: end; justify-content: flex-end; min-width: 0; }
.fh-masthead__actions { display: flex; align-items: center; gap: 10px; }

/* CENTERED, PROMINENT logo. The packaged art is trimmed to its true content box,
   so this height is ALL visible mark — never cap it small. */
.fh-masthead__brand .custom-logo-link,
.fh-logo-fallback {
	display: inline-block;
	margin: 0 auto;
	line-height: 0;
}
.fh-masthead__brand img,
.fh-masthead__brand .custom-logo {
	max-height: 160px; /* mobile: prominent */
	max-width: 100%;
	width: auto;
	margin: 0 auto;
}
.fh-tagline {
	margin: 8px 0 0;
	font-size: 0.82rem;
	color: var(--fh-ink-soft);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 700;
}
/* Compact header sponsor micro-slot (renders only when filled). */
.fh-masthead__right .haven-slot {
	margin: 0;
	max-width: 300px;
	font-size: 0.8rem;
}
.fh-masthead__right .haven-slot img { max-height: 60px; width: auto; border-radius: 8px; }

/* Command-center quick links — founder hardlock: the left flank is reserved
   for the STORE and the FITNESS QUIZ, visible on EVERY viewport. */
.fh-quicklinks { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; flex-wrap: wrap; }
.fh-quicklinks a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--fh-grad-soft);
	border: 1px solid rgba(9,119,170,0.30);
	color: var(--fh-blue);
	font-family: var(--fh-font-head);
	font-weight: 700;
	font-size: 0.85rem;
}
.fh-quicklinks a:hover { text-decoration: none; color: var(--fh-pink); border-color: var(--fh-pink); }

/* MOBILE HARD LOCK (≤400px): every header control stays visible and usable at
   320px — sizes shrink, nothing clips, nothing scrolls sideways. */
@media (max-width: 400px) {
	.fh-masthead__inner { padding: 12px 12px 10px; gap: 8px; }
	.fh-quicklinks { gap: 6px; }
	.fh-quicklinks a { min-height: 36px; padding: 7px 10px; font-size: 0.78rem; }
	.fh-btn--join { min-height: 36px; padding: 7px 11px; font-size: 0.8rem; white-space: nowrap; }
	.fh-search-toggle { width: 38px; height: 38px; }
	.fh-masthead__actions { gap: 6px; }
	.fh-masthead__brand img,
	.fh-masthead__brand .custom-logo { max-height: 132px; }
	.fh-tagline { font-size: 0.72rem; }
}

.fh-search-toggle {
	width: 44px; height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--fh-panel);
	border: 1px solid var(--fh-line-strong);
	border-radius: 10px;
	color: var(--fh-ink);
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(23,20,34,0.05);
}
.fh-search-toggle:hover { color: var(--fh-blue); border-color: var(--fh-blue); }

.fh-search-panel {
	max-width: var(--fh-maxw);
	margin: 0 auto;
	padding: 0 16px 12px;
}
.fh-search-panel form { display: flex; gap: 8px; }
.fh-search-panel input[type="search"] {
	flex: 1;
	min-height: 44px;
	padding: 10px 14px;
	border-radius: 10px;
	border: 1px solid var(--fh-line-strong);
	background: var(--fh-panel);
	color: var(--fh-ink);
}
.fh-search-panel button {
	min-height: 44px;
	padding: 10px 18px;
	border-radius: 10px;
	border: none;
	background: var(--fh-grad);
	color: #0B0B12;
	font-family: var(--fh-font-head);
	font-weight: 600;
	cursor: pointer;
}

/* Social row — REAL provided platform icons + text label. Unlaunched networks
   (no URL) render an honest non-clickable "Coming soon" chip — never a dead
   or fake link. Asset-truth doctrine: icons only from real provided files. */
.fh-social { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; flex-wrap: wrap; }
.fh-social__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--fh-panel);
	border: 1px solid var(--fh-line-strong);
	color: var(--fh-ink);
	box-shadow: 0 2px 8px rgba(23,20,34,0.05);
	font-family: var(--fh-font-head);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.01em;
	text-decoration: none;
}
.fh-social__icon { width: 20px; height: 20px; border-radius: 5px; display: block; }
.fh-social__text { display: inline-block; }
.fh-social__link:hover { color: var(--fh-pink); border-color: var(--fh-pink); }
/* Belt-and-suspenders: suppress any stray badge/counter pseudo-glyphs. */
.fh-social__link::after,
.fh-social__link::before { content: none !important; }
/* Honest unlaunched state (e.g. TikTok until the account goes live). */
.fh-social__link--soon { cursor: default; border-style: dashed; opacity: 0.75; }
.fh-social__soon {
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--fh-pink);
}
.fh-social--masthead { display: none; }
/* Masthead flank: icon-only chips (accessible text stays for screen readers)
   so Store + Quiz + all five networks fit beside the large logo. */
.fh-social--masthead .fh-social__link { padding: 8px 10px; }
.fh-social--masthead .fh-social__text,
.fh-social--masthead .fh-social__soon {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	width: 1px; height: 1px; overflow: hidden;
}

/* Topic nav — ONE-EYESHOT HARDLOCK + FULL-WIDTH KABOOM: every category
   visible at once on every viewport (the row WRAPS, never scrolls sideways)
   AND the categories stretch edge to edge — zero dead space flanking the row. */
.fh-topic-nav {
	border-top: 1px solid var(--fh-line);
	background: var(--fh-bg-2);
}
.fh-topic-nav__list {
	max-width: var(--fh-maxw);
	margin: 0 auto;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	padding: 6px 10px;
}
.fh-topic-nav__list li { flex: 1 1 auto; min-width: 0; text-align: center; }
.fh-topic-nav__list a {
	display: block;
	padding: 9px 8px;
	border-radius: 999px;
	color: var(--fh-ink-soft);
	font-family: var(--fh-font-head);
	font-weight: 700;
	font-size: 0.94rem;
	border: 1px solid transparent;
	white-space: nowrap;
}
@media (min-width: 640px) {
	.fh-topic-nav__list li { flex: 1; }
	.fh-topic-nav__list a { padding: 12px 10px; font-size: 1.08rem; }
}
@media (min-width: 1000px) {
	.fh-topic-nav__list a { font-size: 1.16rem; letter-spacing: 0.01em; }
}
.fh-topic-nav__list a:hover {
	text-decoration: none;
	background: var(--fh-grad-soft);
	border-color: rgba(9,119,170,0.3);
	color: var(--fh-blue);
}

/* ---------- Shell / layout ---------- */
.fh-shell {
	max-width: var(--fh-maxw);
	margin: 0 auto;
	padding: 0 16px;
	display: block;
}
.fh-shell__main { min-width: 0; }
.fh-main { padding: 20px 0 40px; }

/* Ad rail — hidden on mobile, appears on desktop */
.fh-rail.ad-rail-desktop { display: none; }

.haven-slot { margin: 16px 0; }

/* ---------- Hero (intentional DARK accent band) ---------- */
.fh-hero {
	position: relative;
	overflow: hidden;
	border-radius: var(--fh-radius);
	background:
		radial-gradient(120% 140% at 0% 0%, rgba(46,197,255,0.30), transparent 55%),
		radial-gradient(120% 140% at 100% 0%, rgba(255,79,216,0.28), transparent 55%),
		linear-gradient(180deg, var(--fh-dark-2) 0%, var(--fh-dark) 100%);
	border: 1px solid rgba(46,197,255,0.18);
	margin: 20px 0;
	box-shadow: var(--fh-shadow-lift);
	color: var(--fh-on-dark);
}
.fh-hero__glow {
	position: absolute;
	inset: -40% -10% auto -10%;
	height: 60%;
	background: var(--fh-grad);
	filter: blur(90px);
	opacity: 0.34;
	pointer-events: none;
	animation: fh-glow-drift 14s ease-in-out infinite alternate;
}
/* Dark pixels must be ALIVE — a slow neon drift keeps the bands energized.
   Transform-only (cheap), disabled under prefers-reduced-motion. */
@keyframes fh-glow-drift {
	from { transform: translateX(-4%) scale(1); }
	to   { transform: translateX(4%) scale(1.12); }
}
.fh-hero__inner { position: relative; padding: 32px 22px; }
.fh-hero__eyebrow {
	font-family: var(--fh-font-head);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.76rem;
	font-weight: 700;
	color: var(--fh-blue-bright);
	margin: 0 0 10px;
}
.fh-hero__title {
	font-size: clamp(2rem, 6.5vw, 3.6rem);
	font-weight: 800;
	margin: 0 0 12px;
	background: var(--fh-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.fh-hero__dek {
	color: var(--fh-on-dark-muted);
	font-size: 1.1rem;
	max-width: 60ch;
	margin: 0 0 22px;
}
.fh-hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Section heads — big titles, LARGER category subtitles ---------- */
.fh-section-head { margin: 36px 0 18px; }
.fh-section-title {
	font-size: clamp(1.5rem, 4.5vw, 2.2rem);
	font-weight: 800;
}
.fh-section-dek {
	color: var(--fh-muted);
	font-size: 1.16rem;
	font-weight: 500;
	margin: 6px 0 0;
	max-width: 62ch;
}
.fh-section-more { margin-top: 18px; }

/* ---------- Cards / grid ---------- */
.fh-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}
.fh-card {
	position: relative;
	background: var(--fh-panel);
	border: 1px solid var(--fh-line);
	border-radius: var(--fh-radius);
	overflow: hidden;
	box-shadow: var(--fh-shadow);
	transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}
.fh-card:hover {
	transform: translateY(-3px);
	border-color: rgba(46,197,255,0.55);
	box-shadow: var(--fh-glow-blue);
}
.fh-card__media { display: block; aspect-ratio: 16 / 10; background: var(--fh-panel-2); overflow: hidden; }
.fh-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.fh-card:hover .fh-card__img { transform: scale(1.04); }
.fh-card__img--placeholder {
	display: flex; align-items: flex-end; width: 100%; height: 100%;
	background:
		radial-gradient(120% 120% at 0% 0%, rgba(46,197,255,0.22), transparent 60%),
		radial-gradient(120% 120% at 100% 100%, rgba(255,79,216,0.20), transparent 60%),
		var(--fh-grad-soft);
	padding: 14px;
}
.fh-media-slot__label {
	display: inline-block;
	font-family: var(--fh-font-head);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fh-ink);
	background: rgba(255,255,255,0.72);
	border: 1px solid var(--fh-line);
	padding: 5px 11px;
	border-radius: 999px;
	backdrop-filter: blur(2px);
}
.fh-card__img--placeholder-lg .fh-media-slot__label { font-size: 0.86rem; }
.fh-card__body { padding: 16px 18px 20px; }
.fh-card__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.fh-card__title {
	font-size: 1.28rem;
	line-height: 1.2;
	margin: 0 0 8px;
}
.fh-card__title a { color: var(--fh-ink); }
.fh-card__title a:hover { color: var(--fh-blue); text-decoration: none; }
.fh-card__title--xl { font-size: clamp(1.6rem, 4.5vw, 2.4rem); }
.fh-card__dek {
	color: var(--fh-muted);
	font-size: 1.02rem;
	margin: 0 0 12px;
}
.fh-card__dek--lg { font-size: 1.14rem; }
.fh-card--sponsored { border-color: var(--fh-line-strong); }

.fh-card--featured .fh-card__media { aspect-ratio: 16 / 9; }

.fh-lead { margin: 20px 0; }

/* Byline */
.fh-byline {
	color: var(--fh-muted);
	font-size: 0.9rem;
	margin: 0;
}
.fh-byline a { color: var(--fh-muted); }
.fh-byline a:hover { color: var(--fh-blue); }
.fh-byline__sep { opacity: 0.5; }

/* Goal tags */
.fh-goal-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; }
.fh-goal-tags a {
	font-size: 0.8rem;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--fh-bg-2);
	border: 1px solid var(--fh-line);
	color: var(--fh-muted);
}
.fh-goal-tags a:hover { color: var(--fh-pink); border-color: var(--fh-pink); text-decoration: none; }

/* ---------- Fitness Quiz band (homepage INTERMEDIATE section) ----------
   Founder spec: horizontal and COMPACT — a bright break between article
   groups that never blocks the content scroll. Links to /quiz/. */
.fh-quiz-cta {
	position: relative;
	overflow: hidden;
	margin: 28px 0;
	border-radius: var(--fh-radius);
	background:
		radial-gradient(120% 160% at 100% 0%, rgba(255,79,216,0.30), transparent 55%),
		radial-gradient(120% 160% at 0% 100%, rgba(46,197,255,0.28), transparent 55%),
		linear-gradient(180deg, var(--fh-dark-2) 0%, var(--fh-dark) 100%);
	border: 1px solid rgba(255,79,216,0.20);
	box-shadow: var(--fh-shadow-lift);
	color: var(--fh-on-dark);
}
.fh-quiz-cta__glow { position: absolute; inset: -40% -10% auto -10%; height: 70%; background: var(--fh-grad); filter: blur(90px); opacity: 0.32; pointer-events: none; animation: fh-glow-drift 16s ease-in-out infinite alternate; }
.fh-quiz-cta__inner {
	position: relative;
	padding: 20px 20px;
	display: grid;
	gap: 14px;
	align-items: center;
}
.fh-quiz-cta__kicker {
	font-family: var(--fh-font-head);
	text-transform: uppercase; letter-spacing: 0.1em;
	font-size: 0.74rem; font-weight: 800; color: var(--fh-pink-bright);
	display: inline-flex; align-items: center; gap: 8px;
}
.fh-quiz-cta__title { font-size: clamp(1.25rem, 3.5vw, 1.7rem); margin: 8px 0 6px; color: var(--fh-on-dark); }
.fh-quiz-cta__dek { color: var(--fh-on-dark-muted); font-size: 1rem; max-width: 60ch; margin: 0 0 4px; }
.fh-quiz-cta__meta { color: var(--fh-on-dark-muted); font-size: 0.84rem; margin: 4px 0 10px; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fh-quiz-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* Step pills add height — show them only where the band stays one row tall. */
.fh-quiz-cta__aside { display: none; }
.fh-quiz-cta__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.fh-quiz-cta__steps li {
	font-family: var(--fh-font-head); font-weight: 600; font-size: 0.78rem;
	color: var(--fh-on-dark);
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.16);
	border-radius: 999px; padding: 5px 11px;
}

/* ---------- Quiz (dedicated /quiz/ page) ---------- */
.fh-quiz {
	margin: 32px 0;
	background: var(--fh-panel);
	border: 1px solid var(--fh-line);
	border-radius: var(--fh-radius);
	padding: 26px 20px;
	box-shadow: var(--fh-shadow);
}
.fh-quiz__kicker {
	font-family: var(--fh-font-head);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.74rem;
	font-weight: 700;
	color: var(--fh-pink);
}
.fh-quiz__title { font-size: clamp(1.5rem, 4vw, 2.1rem); margin: 8px 0 6px; }
.fh-quiz__sub { color: var(--fh-muted); font-size: 1.08rem; margin: 0 0 12px; max-width: 60ch; }
.fh-quiz__note {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 0.9rem; color: var(--fh-muted);
	margin: 0 0 18px;
}
.fh-quiz__progress {
	height: 8px;
	background: var(--fh-panel-2);
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 18px;
}
.fh-quiz__progress-bar { height: 100%; background: var(--fh-grad); width: 0; transition: width 0.3s ease; }
.fh-quiz__step { border: none; margin: 0 0 18px; padding: 0; }
.fh-quiz__legend { padding: 0; margin-bottom: 12px; }
.fh-quiz__stepno {
	display: block;
	font-family: var(--fh-font-head);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--fh-blue);
	margin-bottom: 4px;
}
.fh-quiz__q { font-family: var(--fh-font-head); font-weight: 700; font-size: 1.25rem; display: block; }
.fh-quiz__options { display: grid; grid-template-columns: 1fr; gap: 10px; }
.fh-quiz__option {
	display: flex; align-items: center; gap: 12px;
	min-height: 44px;
	padding: 12px 16px;
	border-radius: var(--fh-radius-sm);
	border: 1px solid var(--fh-line-strong);
	background: var(--fh-bg-2);
	cursor: pointer;
	font-family: var(--fh-font-head);
	font-weight: 600;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.fh-quiz__option:hover { border-color: rgba(9,119,170,0.6); }
.fh-quiz__option input { accent-color: var(--fh-pink); width: 20px; height: 20px; }
.fh-quiz__option:has(input:checked) {
	border-color: var(--fh-pink);
	background: var(--fh-grad-soft);
}
.fh-quiz__hint, .fh-quiz__noscript { color: var(--fh-muted); font-size: 0.9rem; margin-top: 10px; }
.fh-quiz__controls { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.fh-quiz__result { margin-top: 22px; }
.fh-quiz__result-card {
	background: var(--fh-grad-soft);
	border: 1px solid rgba(46,197,255,0.3);
	border-radius: var(--fh-radius);
	padding: 22px;
}
.fh-quiz__result-card h3 { font-size: 1.5rem; margin: 0 0 8px; }
.fh-quiz__result-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.fh-quiz__result-list li a {
	display: block; padding: 12px 16px;
	background: var(--fh-panel); border: 1px solid var(--fh-line-strong);
	border-radius: var(--fh-radius-sm); color: var(--fh-ink);
	font-family: var(--fh-font-head); font-weight: 600;
}
.fh-quiz__result-list li a:hover { border-color: var(--fh-blue); color: var(--fh-blue); text-decoration: none; }

/* Quiz → newsletter invite (honest: device-local + mailing list) */
.fh-quiz__newsletter {
	margin-top: 16px;
	padding: 18px;
	border-radius: var(--fh-radius-sm);
	background: var(--fh-bg-2);
	border: 1px solid var(--fh-line-strong);
}
.fh-quiz__newsletter h4 { font-family: var(--fh-font-head); font-size: 1.15rem; margin: 0 0 6px; }
.fh-quiz__newsletter p { color: var(--fh-muted); font-size: 0.95rem; margin: 0 0 12px; }
.fh-quiz__newsletter form { display: flex; flex-wrap: wrap; gap: 8px; }
.fh-quiz__newsletter input[type="email"] {
	flex: 1; min-width: 200px; min-height: 44px; padding: 10px 14px;
	border-radius: 10px; border: 1px solid var(--fh-line-strong);
	background: var(--fh-panel); color: var(--fh-ink);
}
.fh-quiz__newsletter .fh-quiz__nl-note { font-size: 0.82rem; color: var(--fh-muted); margin-top: 10px; }
.fh-quiz__nl-status { margin-top: 10px; font-size: 0.9rem; font-weight: 600; }
.fh-quiz__nl-status--ok { color: var(--fh-blue); }
.fh-quiz__nl-status--warn { color: var(--fh-pink); }

/* ---------- FitBall placeholder (mobile pinball game — NOT live yet) ----------
   Honest reserved slot: announces the game; the App Store button appears the
   moment `fitball.app_url` is configured. No fake gameplay or store badges. */
.fh-fitball {
	position: relative;
	overflow: hidden;
	margin: 32px 0;
	border-radius: var(--fh-radius);
	border: 1px solid rgba(255,79,216,0.24);
	background: radial-gradient(130% 130% at 100% 0%, rgba(255,79,216,0.30), transparent 55%),
		radial-gradient(130% 130% at 0% 100%, rgba(46,197,255,0.30), transparent 55%),
		linear-gradient(180deg, var(--fh-dark-2) 0%, var(--fh-dark) 100%);
	box-shadow: var(--fh-shadow-lift);
	color: var(--fh-on-dark);
}
.fh-fitball__glow {
	position: absolute; inset: auto -20% -50% -20%; height: 70%;
	background: var(--fh-grad); filter: blur(90px); opacity: 0.30; pointer-events: none;
	animation: fh-glow-drift 12s ease-in-out infinite alternate;
}
.fh-fitball__inner {
	position: relative;
	padding: 24px 20px;
}
.fh-fitball__kicker {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--fh-font-head);
	text-transform: uppercase; letter-spacing: 0.1em;
	font-size: 0.76rem; font-weight: 800; color: var(--fh-pink-bright);
}
.fh-fitball__title { font-size: clamp(1.35rem, 4vw, 1.9rem); margin: 8px 0 6px; color: var(--fh-on-dark); }
.fh-fitball__dek { color: var(--fh-on-dark-muted); font-size: 1.02rem; max-width: 60ch; margin: 0 0 14px; }
.fh-fitball__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.fh-fitball__honest { color: var(--fh-on-dark-muted); font-size: 0.85rem; }
/* Reserved App-Store slot chip (non-clickable until launch). */
.fh-fitball__slot {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px dashed rgba(255,255,255,0.35);
	color: var(--fh-on-dark);
	font-family: var(--fh-font-head);
	font-weight: 600;
	font-size: 0.9rem;
}

/* ---------- Merch funnel ---------- */
.fh-merch { margin: 36px 0; }
.fh-merch__card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 0;
	border-radius: var(--fh-radius);
	background: var(--fh-panel);
	border: 1px solid var(--fh-line);
	color: var(--fh-ink);
	box-shadow: var(--fh-shadow);
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease;
}
.fh-merch__card:hover { transform: translateY(-3px); border-color: var(--fh-pink); box-shadow: var(--fh-glow-pink); text-decoration: none; }
/* Honest product media slot — premium gradient + label until a real product
   photo is provided (same doctrine as article cards; never a fake photo). */
.fh-merch__media {
	display: flex;
	align-items: flex-end;
	aspect-ratio: 16 / 10;
	padding: 14px;
	background:
		radial-gradient(120% 120% at 0% 0%, rgba(46,197,255,0.24), transparent 60%),
		radial-gradient(120% 120% at 100% 100%, rgba(255,79,216,0.22), transparent 60%),
		var(--fh-grad-soft);
}
.fh-merch__media img { width: 100%; height: 100%; object-fit: cover; }
.fh-merch__body { position: relative; display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.fh-merch__kicker {
	font-family: var(--fh-font-head);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--fh-pink);
	margin: 0 0 6px;
}
.fh-merch__glow { position: absolute; inset: -50% 40% auto -20%; height: 60%; background: var(--fh-grad); filter: blur(70px); opacity: 0.10; }
.fh-merch__title { position: relative; font-size: 1.3rem; margin: 0 0 8px; }
.fh-merch__dek { position: relative; color: var(--fh-muted); margin: 0 0 14px; }
.fh-merch__sizes { position: relative; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.fh-merch__sizes li {
	font-family: var(--fh-font-head);
	font-weight: 600;
	font-size: 0.74rem;
	color: var(--fh-muted);
	border: 1px solid var(--fh-line-strong);
	border-radius: 6px;
	padding: 2px 7px;
}
.fh-merch__cta { position: relative; margin-top: auto; font-family: var(--fh-font-head); font-weight: 700; color: var(--fh-blue); }
.fh-merch__note { color: var(--fh-muted); font-size: 0.95rem; margin: 14px 0 0; }
.fh-merch__note a { font-weight: 600; }

/* ---------- Single ---------- */
.fh-single { max-width: var(--fh-contentw); margin: 0 auto; padding: 20px 0 40px; }
.fh-single__meta { display: flex; gap: 8px; margin-bottom: 14px; }
.fh-single__title { font-size: clamp(1.9rem, 5.5vw, 3rem); font-weight: 800; }
.fh-single__dek { font-size: 1.25rem; color: var(--fh-muted); margin: 0 0 16px; }
.fh-single__figure { margin: 22px 0; border-radius: var(--fh-radius); overflow: hidden; }
.fh-single__caption { font-size: 0.85rem; color: var(--fh-muted); padding: 8px 4px; }
.fh-single__content { font-size: 1.12rem; }
.fh-single__content p { margin: 0 0 1.2em; }
.fh-single__content h2 { font-size: 1.7rem; margin-top: 1.5em; }
.fh-single__content h3 { font-size: 1.35rem; margin-top: 1.2em; }
.fh-single__content a { color: var(--fh-blue); text-decoration: underline; }
.fh-single__content img { border-radius: var(--fh-radius-sm); margin: 1em 0; }
.fh-single__content blockquote {
	margin: 1.4em 0; padding: 12px 20px;
	border-left: 3px solid var(--fh-pink);
	background: rgba(204,31,130,0.06);
	color: var(--fh-ink);
}
.fh-single__footer { margin: 30px 0; padding-top: 20px; border-top: 1px solid var(--fh-line); }
.fh-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 18px; }
.fh-tags a { font-size: 0.85rem; padding: 5px 12px; border-radius: 999px; background: var(--fh-bg-2); border: 1px solid var(--fh-line); color: var(--fh-muted); }
.fh-tags a:hover { color: var(--fh-blue); border-color: var(--fh-blue); text-decoration: none; }

.fh-share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fh-share__label { font-family: var(--fh-font-head); font-weight: 700; }
.fh-share__link {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 42px; padding: 8px 16px; border-radius: 999px;
	background: var(--fh-panel); border: 1px solid var(--fh-line-strong); color: var(--fh-ink);
	box-shadow: 0 2px 8px rgba(23,20,34,0.05);
	font-family: var(--fh-font-head); font-weight: 600; font-size: 0.85rem; text-decoration: none;
}
.fh-share__link:hover { color: var(--fh-pink); border-color: var(--fh-pink); }
.fh-share__link::after, .fh-share__link::before { content: none !important; }

.fh-related { max-width: var(--fh-contentw); margin: 30px auto 0; }

/* =========================================================================
   EMBED DIMENSION LOCK — every provider renders at a consistent, documented
   size (FITHAVEN_EMBED_DIMENSIONS.md). No skinny Instagram embeds, no
   overflow, no layout jump: wrappers reserve their space with aspect-ratio
   and a soft gradient loading surface. Classes assigned in functions.php.
   ========================================================================= */
.haven-embed {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 1.4em auto;
	border-radius: var(--fh-radius-sm);
	overflow: hidden;
	background: var(--fh-grad-soft); /* loading surface — no white flash/jump */
}
.haven-embed iframe, .haven-embed video, .haven-embed object, .haven-embed embed {
	width: 100% !important;
	max-width: 100% !important;
	display: block;
	border: 0;
}
/* Video (YouTube/Vimeo/…): full content width, locked 16:9. */
.haven-embed--video { aspect-ratio: 16 / 9; }
.haven-embed--video iframe, .haven-embed--video video, .haven-embed--video object { height: 100%; aspect-ratio: 16 / 9; }
/* Instagram posts/reels: consistent 540px column, centered, 4:5 space floor. */
.haven-embed--instagram { max-width: 540px; min-height: 480px; }
.haven-embed--instagram iframe { margin: 0 auto !important; min-width: 0 !important; }
/* TikTok: consistent 380px column, centered, 9:16 space reserved. */
.haven-embed--tiktok { max-width: 380px; aspect-ratio: 9 / 16; }
.haven-embed--tiktok iframe { height: 100%; }
/* X / Twitter posts: consistent 550px column, natural height, jump-damped. */
.haven-embed--x { max-width: 550px; min-height: 200px; }
/* Everything else (Spotify/audio/generic): natural height, width-locked. */
.haven-embed--rich { max-width: 100%; min-height: 80px; }

/* ---------- Archive ---------- */
.fh-archive { padding: 24px 0 40px; }
.fh-archive__head { margin-bottom: 22px; }
.fh-archive__kicker { font-family: var(--fh-font-head); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.74rem; font-weight: 700; color: var(--fh-blue); }
.fh-archive__title { font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 800; }
.fh-archive__dek, .fh-archive__intro { color: var(--fh-muted); font-size: 1.14rem; max-width: 64ch; }
.fh-archive__aeo { color: var(--fh-blue); font-size: 0.92rem; margin-top: 8px; }
.fh-search-term { color: var(--fh-pink); }
.fh-archive__search-again { max-width: 480px; margin-top: 14px; }
.fh-archive__search-again form { display: flex; gap: 8px; }
.fh-archive__search-again input[type="search"] {
	flex: 1; min-height: 44px; padding: 10px 14px; border-radius: 10px;
	border: 1px solid var(--fh-line-strong); background: var(--fh-panel); color: var(--fh-ink);
}
.fh-archive__search-again button {
	min-height: 44px; padding: 10px 18px; border-radius: 10px; border: none;
	background: var(--fh-grad); color: #0B0B12; font-family: var(--fh-font-head); font-weight: 600; cursor: pointer;
}

.fh-empty { color: var(--fh-muted); padding: 40px 0; text-align: center; font-size: 1.1rem; }

/* Pagination */
.pagination, .navigation.pagination { margin: 32px 0; }
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; min-height: 44px; padding: 0 12px;
	border-radius: 10px; border: 1px solid var(--fh-line-strong);
	background: var(--fh-panel); color: var(--fh-ink);
}
.page-numbers.current { background: var(--fh-grad); color: #0B0B12; border-color: transparent; }
.page-numbers:hover { border-color: var(--fh-blue); text-decoration: none; }

/* ---------- 404 — "Gym Closed" sign scene ---------- */
.fh-404 { position: relative; overflow: hidden; text-align: center; padding: 48px 20px 64px; }
.fh-404__glow { position: absolute; inset: -30% -10% auto -10%; height: 60%; background: var(--fh-grad); filter: blur(100px); opacity: 0.12; }
.fh-404__scene { position: relative; width: min(340px, 82vw); margin: 0 auto 26px; }
.fh-404__scene svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 16px 30px rgba(23,20,34,0.14)); }
.fh-404__sign-swing { transform-box: fill-box; transform-origin: 50% 0; animation: fh-sign-swing 5.5s ease-in-out infinite; }
@keyframes fh-sign-swing { 0%,100% { transform: rotate(-2.2deg);} 50% { transform: rotate(2.2deg);} }
.fh-404__code { position: relative; font-family: var(--fh-font-head); font-weight: 800; font-size: clamp(2.4rem, 11vw, 5.5rem); background: var(--fh-grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; line-height: 1; }
.fh-404__title { position: relative; font-size: clamp(1.6rem, 5vw, 2.4rem); }
.fh-404__dek { position: relative; color: var(--fh-muted); font-size: 1.1rem; max-width: 52ch; margin: 0 auto 22px; }
.fh-404__search { position: relative; max-width: 440px; margin: 0 auto 22px; }
.fh-404__search form { display: flex; gap: 8px; }
.fh-404__search input[type="search"] { flex: 1; min-height: 44px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--fh-line-strong); background: var(--fh-panel); color: var(--fh-ink); }
.fh-404__search button { min-height: 44px; padding: 10px 18px; border-radius: 10px; border: none; background: var(--fh-grad); color: #0B0B12; font-weight: 600; cursor: pointer; }
.fh-404__ctas { position: relative; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ---------- Page ---------- */
.fh-page { max-width: var(--fh-contentw); margin: 0 auto; padding: 24px 0 40px; }
.fh-page__title { font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 800; }
.fh-page__content { font-size: 1.1rem; }

/* ---------- Footer (intentional DARK accent band) ---------- */
.fh-footer { margin-top: 44px; background: linear-gradient(180deg, var(--fh-dark-2), var(--fh-dark)); color: var(--fh-on-dark); }
.fh-footer__cta {
	background: var(--fh-grad);
	color: #0B0B12;
	text-align: center;
}
.fh-footer__cta-inner { max-width: 720px; margin: 0 auto; padding: 40px 20px; }
.fh-footer__cta h2 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); margin: 0 0 8px; color: #0B0B12; }
.fh-footer__cta p { margin: 0 0 20px; font-size: 1.08rem; color: rgba(11,11,18,0.82); }
.fh-footer__cta .fh-btn--primary { background: #0B0B12; color: #fff; box-shadow: none; }
.fh-footer__widgets {
	max-width: var(--fh-maxw); margin: 0 auto; padding: 36px 16px 10px;
	display: grid; grid-template-columns: 1fr; gap: 28px;
}
.fh-footer__col .widget-title,
.fh-footer__col .fh-footer__col-title { font-family: var(--fh-font-head); font-size: 1.05rem; color: var(--fh-on-dark); margin: 0 0 12px; }
.fh-footer__col ul { list-style: none; padding: 0; margin: 0; }
.fh-footer__col li { margin: 0 0 8px; }
.fh-footer__col, .fh-footer__col a { color: var(--fh-on-dark-muted); }
.fh-footer__col a:hover { color: var(--fh-blue-bright); }
.fh-footer__col p { margin: 0 0 10px; }
.fh-footer__bottom {
	max-width: var(--fh-maxw); margin: 0 auto; padding: 28px 16px 44px;
	display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center;
	border-top: 1px solid rgba(255,255,255,0.10);
}
/* PROMINENT footer logo — trimmed lockup, all visible mark, never dinky */
.fh-footer__brand img { max-height: 150px; width: auto; }
.fh-footer__menu { list-style: none; display: flex; flex-wrap: wrap; gap: 16px; padding: 0; margin: 0; justify-content: center; }
.fh-footer__menu a { color: var(--fh-on-dark-muted); font-family: var(--fh-font-head); font-weight: 600; }
.fh-footer__menu a:hover { color: var(--fh-blue-bright); }
.fh-footer__copy { color: var(--fh-on-dark-muted); font-size: 0.88rem; margin: 0; }
/* Footer/offcanvas social sit on dark → use translucent white surface */
.fh-social--footer .fh-social__link {
	background: rgba(255,255,255,0.07);
	border-color: rgba(255,255,255,0.16);
	color: var(--fh-on-dark);
	box-shadow: none;
}
.fh-social--footer .fh-social__link:hover { color: var(--fh-pink-bright); border-color: var(--fh-pink-bright); }
.fh-social--footer .fh-social__soon { color: var(--fh-pink-bright); }

/* Comments (baseline) */
.comment-list { list-style: none; padding: 0; }
.comment-body { padding: 16px; border: 1px solid var(--fh-line); border-radius: var(--fh-radius-sm); margin-bottom: 14px; background: var(--fh-panel); box-shadow: var(--fh-shadow); }
.comment-form input, .comment-form textarea {
	width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--fh-line-strong);
	background: var(--fh-panel); color: var(--fh-ink); margin-bottom: 12px;
}
.comment-form .submit {
	min-height: 44px; padding: 10px 22px; border-radius: 999px; border: none;
	background: var(--fh-grad); color: #0B0B12; font-family: var(--fh-font-head); font-weight: 600; cursor: pointer; width: auto;
}

/* Widgets in ad rail / sidebar */
.fh-sidebar .widget, .fh-rail .widget { margin-bottom: 22px; background: var(--fh-panel); border: 1px solid var(--fh-line); border-radius: var(--fh-radius); padding: 18px; box-shadow: var(--fh-shadow); }
.fh-rail .widget-title, .fh-sidebar .widget-title { font-family: var(--fh-font-head); font-size: 1.05rem; margin-top: 0; }

/* =========================================================================
   Ad slots — SAME FOOTPRINT AS AN ARTICLE CARD (toggleable from plugin).
   A slot renders nothing when off/empty; when on it matches .fh-card sizing
   so it drops cleanly into the grid.
   ========================================================================= */
.haven-slot--ad,
.fh-grid .haven-slot {
	margin: 0;
	background: var(--fh-panel);
	border: 1px dashed var(--fh-line-strong);
	border-radius: var(--fh-radius);
	overflow: hidden;
	box-shadow: var(--fh-shadow);
	display: flex;
	flex-direction: column;
}
/* Match the article card's media aspect + body rhythm. */
.haven-slot--ad { min-height: 0; }
.haven-slot--ad > * { width: 100%; }
.haven-slot--ad img { width: 100%; height: auto; display: block; }
/* "Ad" affordance label — subtle, honest. */
.fh-ad-card { position: relative; display: block; }
.fh-ad-card__label {
	position: absolute; top: 10px; left: 10px; z-index: 2;
	font-family: var(--fh-font-head); font-size: 0.68rem; font-weight: 700;
	letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--fh-muted); background: rgba(255,255,255,0.88);
	border: 1px solid var(--fh-line); border-radius: 999px; padding: 3px 10px;
}
.fh-ad-card__inner { display: block; }
/* When a slot sits inside the responsive grid, it occupies one card cell. */
.fh-grid > .haven-slot,
.fh-grid > .fh-ad-card {
	background: var(--fh-panel);
	border: 1px dashed var(--fh-line-strong);
	border-radius: var(--fh-radius);
	overflow: hidden;
	box-shadow: var(--fh-shadow);
	min-height: 320px;
}

/* =========================================================================
   HORIZONTAL AD BREAK — full-content-width sponsor band after every 3
   article rows (9 cards). Compact, premium, labeled; renders nothing when
   Off/empty. AdSense or direct-sell (FITHAVEN_MONETIZATION_NOTES.md).
   ========================================================================= */
.fh-adbreak {
	grid-column: 1 / -1;
	position: relative;
	background: var(--fh-panel);
	border: 1px solid var(--fh-line);
	border-radius: var(--fh-radius);
	box-shadow: var(--fh-shadow);
	overflow: hidden;
	padding: 26px 18px 18px;
}
.fh-adbreak::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--fh-grad);
}
.fh-adbreak__label {
	position: absolute;
	top: 8px; left: 12px;
	font-family: var(--fh-font-head);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fh-muted);
}
.fh-adbreak__inner { display: flex; justify-content: center; align-items: center; min-height: 90px; }
.fh-adbreak__inner img { max-width: 100%; height: auto; border-radius: var(--fh-radius-sm); }
.fh-adbreak__inner iframe { max-width: 100%; }

/* Rail slots read as tidy sponsor cards (AdSense / direct-sell inventory). */
.fh-rail .haven-slot {
	position: relative;
	margin: 0 0 22px;
	background: var(--fh-panel);
	border: 1px solid var(--fh-line);
	border-radius: var(--fh-radius);
	box-shadow: var(--fh-shadow);
	overflow: hidden;
	padding: 30px 14px 14px;
}
.fh-rail .haven-slot::before {
	content: "Sponsored";
	position: absolute;
	top: 8px; left: 12px;
	font-family: var(--fh-font-head);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fh-muted);
}
.fh-rail .haven-slot img { max-width: 100%; height: auto; border-radius: var(--fh-radius-sm); }

/* =========================================================================
   Tablet
   ========================================================================= */
@media (min-width: 640px) {
	.fh-grid { grid-template-columns: repeat(2, 1fr); }
	.fh-hero__inner { padding: 48px 40px; }
	.fh-fitball__inner { padding: 28px 32px; }
	.fh-quiz__options { grid-template-columns: repeat(2, 1fr); }
	.fh-quiz-cta__inner { padding: 24px 32px; }
	.fh-footer__widgets { grid-template-columns: repeat(3, 1fr); }
	.fh-footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; }
	.fh-social--masthead { display: flex; }

	/* Masthead back to a single row (flanks + centered brand), logo LARGE.
	   Flanks stack their two working rows vertically beside the tall logo. */
	.fh-masthead__inner { grid-template-rows: none; padding: 16px 16px 14px; }
	.fh-masthead__brand { grid-column: 2; grid-row: 1; }
	.fh-masthead__left { grid-row: 1; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; }
	.fh-masthead__right { grid-row: 1; flex-direction: column; align-items: flex-end; justify-content: center; gap: 12px; }
	.fh-masthead__brand img,
	.fh-masthead__brand .custom-logo { max-height: 260px; }

	/* Footer logo scales up too. */
	.fh-footer__brand img { max-height: 180px; }
}

/* =========================================================================
   Desktop — content max-width + right ad rail
   ========================================================================= */
@media (min-width: 1000px) {
	body.has-ad-rail .fh-shell {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 32px;
		align-items: start;
	}
	.fh-rail.ad-rail-desktop {
		display: block;
		position: sticky;
		top: 96px;
	}
	.fh-grid { grid-template-columns: repeat(3, 1fr); }
	.fh-grid--three { grid-template-columns: repeat(3, 1fr); }
	.fh-lead .fh-card--featured { display: grid; grid-template-columns: 1.4fr 1fr; align-items: stretch; }
	.fh-lead .fh-card--featured .fh-card__media { aspect-ratio: auto; height: 100%; }

	/* Quiz band goes fully horizontal: copy left, step pills right. */
	.fh-quiz-cta__inner { grid-template-columns: 1.4fr 0.6fr; padding: 26px 36px; }
	.fh-quiz-cta__aside { display: block; }
}

/* =========================================================================
   Reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.fh-trending__track { animation: none; }
	/* Marquee is off: hide the duplicated aria-hidden items and allow swipe/scroll. */
	.fh-trending__track li[aria-hidden="true"] { display: none; }
	.fh-trending__viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.fh-card:hover { transform: none; }
	.fh-card:hover .fh-card__img { transform: none; }
	.fh-404__sign-swing { animation: none; }
	.fh-hero__glow, .fh-quiz-cta__glow, .fh-fitball__glow { animation: none; }
}


/* ======================================================================
   Haven 2027 Visual World upgrade — appended by the v2.0.0 patch.
   Order: token aliases → Energy Field presets → feature systems.
   ====================================================================== */
/* =========================================================================
   FitHaven color tokens — exact values from fithaven-haven2027 v1.3.1.
   LIGHT, warm palette: soft off-white surfaces with Electric Blue #2EC5FF +
   Neon Pink #FF4FD8 accents. Dark is reserved for intentional accent bands.
   Text accent tokens are WCAG AA (>=4.5:1) on every light surface; bright
   tokens are brand fills/gradients and AA text on the dark bands.
   ========================================================================= */
:root {
	/* Warm, light surfaces (dominant) */
	--fh-bg: #FBF7F4;            /* warm off-white page */
	--fh-bg-2: #FFFDFB;          /* near-white lift */
	--fh-panel: #FFFFFF;         /* cards / panels */
	--fh-panel-2: #F3EEEA;       /* subtle inset (image placeholders) */
	--fh-line: rgba(23, 20, 34, 0.10);
	--fh-line-strong: rgba(23, 20, 34, 0.16);

	/* Accents */
	--fh-blue: #0977AA;          /* accessible blue on light (links/text): 4.66:1 */
	--fh-blue-bright: #2EC5FF;   /* brand blue for gradients/fills; 9.08:1 on dark */
	--fh-pink: #CC1F82;          /* accessible pink on light (text): 4.82:1 */
	--fh-pink-bright: #FF4FD8;   /* brand pink for gradients/fills; 6.34:1 on dark */

	/* Ink */
	--fh-ink: #1B1424;           /* warm near-black text */
	--fh-ink-soft: #2C2438;
	--fh-muted: #6A6377;         /* muted body/meta on light */
	--fh-on-grad: #0B0B12;       /* text on the brand gradient */

	/* Dark accent band tokens */
	--fh-dark: #0F1020;
	--fh-dark-2: #171734;
	--fh-on-dark: #F4F5FB;
	--fh-on-dark-muted: #B6B9D0;

	/* Semantic aliases (Energy Field presets re-point these) */
	--fh-accent: var(--fh-blue);
	--fh-accent-2: var(--fh-pink);
	--fh-accent-bright: var(--fh-blue-bright);
	--fh-accent-2-bright: var(--fh-pink-bright);
	--surface-page: var(--fh-bg);
	--surface-card: var(--fh-panel);
	--text-body: var(--fh-ink);
	--text-muted: var(--fh-muted);
}

/* =========================================================================
   FitHaven effect tokens — gradients, shadows, neon glows, motion.
   Signature: the blue→pink 90° brand gradient; soft lifted shadows on warm
   white; neon edge glows on hover (blue default, pink for commerce).
   ========================================================================= */
:root {
	--fh-grad: linear-gradient(90deg, #2EC5FF 0%, #FF4FD8 100%); 
	--fh-grad-soft: linear-gradient(135deg, rgba(46,197,255,0.14) 0%, rgba(255,79,216,0.12) 100%); 
	--fh-grad-wash: linear-gradient(135deg, rgba(46,197,255,0.10) 0%, rgba(255,79,216,0.08) 55%, rgba(255,255,255,0) 100%); 

	--fh-shadow: 0 10px 34px rgba(23, 20, 34, 0.10);
	--fh-shadow-lift: 0 16px 44px rgba(23, 20, 34, 0.14);
	--fh-glow-blue: 0 0 0 1px rgba(46,197,255,0.45), 0 12px 30px rgba(46,197,255,0.18);
	--fh-glow-pink: 0 0 0 1px rgba(255,79,216,0.40), 0 12px 30px rgba(255,79,216,0.16);

	/* Motion — hover lift 0.15-0.2s ease; image zoom 0.4s; glow drift 12-16s
	   alternate; marquee 34s linear. All gated by prefers-reduced-motion. */
	/* Signature reveal easing + interaction durations */
	--fh-ease: cubic-bezier(0.22, 1, 0.36, 1); 
	--fh-dur-tap: 0.15s; 
	--fh-dur-hover: 0.2s; 
	--fh-dur-media: 0.4s; 
}

/* =========================================================================
   FitHaven Energy Field presets — four official colorways.
   Apply via data-fh-theme on <html> or <body>. The default (no attribute)
   is the approved light editorial look. Each preset re-points the semantic
   tokens AND the Energy Field shader chrome (--fh-ef-*) so the WebGL hero
   and the page chrome always transition together.

     blue-power     Blue Power — Light   (blue-dominant, warm light surfaces)
     pink-power     Pink Power — Light   (pink-dominant, warm light surfaces)
     midnight-pulse Midnight Pulse — Dark (premium night-gym)
     split-current  Split Current — Dark/Hybrid (blue/pink arcade-tech)
   ========================================================================= */

/* Shader chrome defaults (balanced blue↔pink, light) */
:root {
	--fh-ef-a: #2EC5FF;           /* blood-cell material A */
	--fh-ef-b: #FF4FD8;           /* blood-cell material B */
	--fh-ef-bg-top: #FBF7F4;      /* scene backdrop top */
	--fh-ef-bg-bottom: #EFE7E1;   /* scene backdrop bottom */
	--fh-ef-mix: 0.5;             /* 0 = all blue, 1 = all pink */
	--fh-ef-dark: 0;              /* 1 = night scene lighting */
}

/* ---------- Blue Power — Light ---------- */
[data-fh-theme="blue-power"] {
	--fh-accent: var(--fh-blue);
	--fh-accent-2: var(--fh-pink);
	--fh-accent-bright: var(--fh-blue-bright);
	--fh-accent-2-bright: var(--fh-pink-bright);
	--fh-grad: linear-gradient(90deg, #2EC5FF 0%, #22A8E6 55%, #FF4FD8 130%); 
	--fh-grad-soft: linear-gradient(135deg, rgba(46,197,255,0.18) 0%, rgba(46,197,255,0.08) 70%, rgba(255,79,216,0.06) 100%); 
	--fh-ef-a: #2EC5FF; 
	--fh-ef-b: #7FDBFF; 
	--fh-ef-bg-top: #F4FAFE; 
	--fh-ef-bg-bottom: #DDF1FC; 
	--fh-ef-mix: 0.14; 
	--fh-ef-dark: 0; 
	--fh-bg: #F7FAFC;
	--fh-bg-2: #FDFEFF;
}

/* ---------- Pink Power — Light ---------- */
[data-fh-theme="pink-power"] {
	--fh-accent: var(--fh-pink);
	--fh-accent-2: var(--fh-blue);
	--fh-accent-bright: var(--fh-pink-bright);
	--fh-accent-2-bright: var(--fh-blue-bright);
	--fh-grad: linear-gradient(90deg, #FF4FD8 0%, #E63FBE 55%, #2EC5FF 130%); 
	--fh-grad-soft: linear-gradient(135deg, rgba(255,79,216,0.16) 0%, rgba(255,79,216,0.08) 70%, rgba(46,197,255,0.06) 100%); 
	--fh-ef-a: #FF4FD8; 
	--fh-ef-b: #FF9BEA; 
	--fh-ef-bg-top: #FEF6FB; 
	--fh-ef-bg-bottom: #FBE3F4; 
	--fh-ef-mix: 0.86; 
	--fh-ef-dark: 0; 
	--fh-bg: #FCF6FA;
	--fh-bg-2: #FFFDFE;
}

/* ---------- Midnight Pulse — Dark ---------- */
[data-fh-theme="midnight-pulse"] {
	--fh-bg: #0B0B16;
	--fh-bg-2: #10101F;
	--fh-panel: #151529;
	--fh-panel-2: #1D1D36;
	--fh-line: rgba(244, 245, 251, 0.10);
	--fh-line-strong: rgba(244, 245, 251, 0.18);
	--fh-ink: #F4F5FB;
	--fh-ink-soft: #DADCEC;
	--fh-muted: #A9ACC8;
	--fh-blue: #5FD4FF;          /* accessible on dark surfaces */
	--fh-pink: #FF7BE2;
	--fh-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
	--fh-shadow-lift: 0 16px 44px rgba(0, 0, 0, 0.55);
	--fh-grad-soft: linear-gradient(135deg, rgba(46,197,255,0.16) 0%, rgba(255,79,216,0.14) 100%); 
	--fh-ef-a: #2EC5FF; 
	--fh-ef-b: #FF4FD8; 
	--fh-ef-bg-top: #0B0B16; 
	--fh-ef-bg-bottom: #131327; 
	--fh-ef-mix: 0.5; 
	--fh-ef-dark: 1; 
}

/* ---------- Split Current — Dark/Hybrid ---------- */
[data-fh-theme="split-current"] {
	--fh-bg: #0D0F1E;
	--fh-bg-2: #121428;
	--fh-panel: #171A33;
	--fh-panel-2: #1F2340;
	--fh-line: rgba(244, 245, 251, 0.12);
	--fh-line-strong: rgba(244, 245, 251, 0.22);
	--fh-ink: #F4F5FB;
	--fh-ink-soft: #DADCEC;
	--fh-muted: #A9AFD2;
	--fh-blue: #5FD4FF;
	--fh-pink: #FF7BE2;
	--fh-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
	--fh-shadow-lift: 0 16px 44px rgba(0, 0, 0, 0.6);
	--fh-grad: linear-gradient(90deg, #2EC5FF 0%, #2EC5FF 46%, #FF4FD8 54%, #FF4FD8 100%); 
	--fh-grad-soft: linear-gradient(90deg, rgba(46,197,255,0.20) 0%, rgba(46,197,255,0.10) 46%, rgba(255,79,216,0.10) 54%, rgba(255,79,216,0.20) 100%); 
	--fh-ef-a: #2EC5FF; 
	--fh-ef-b: #FF4FD8; 
	--fh-ef-bg-top: #0D0F1E; 
	--fh-ef-bg-bottom: #181231; 
	--fh-ef-mix: 0.5; 
	--fh-ef-dark: 1; 
}

/* Dark presets: page backdrop glows deepen instead of the warm radials */
[data-fh-theme="midnight-pulse"] body,
body[data-fh-theme="midnight-pulse"] {
	background:
		radial-gradient(90% 60% at 100% 0%, rgba(255,79,216,0.10), transparent 60%),
		radial-gradient(80% 55% at 0% 0%, rgba(46,197,255,0.10), transparent 60%),
		var(--fh-bg);
}
[data-fh-theme="split-current"] body,
body[data-fh-theme="split-current"] {
	background:
		linear-gradient(90deg, rgba(46,197,255,0.07) 0%, transparent 46%, transparent 54%, rgba(255,79,216,0.07) 100%),
		var(--fh-bg);
}

/* Dark presets: gradient-ink chips need bright text, cards keep AA */
[data-fh-theme="midnight-pulse"] .fh-pill,
[data-fh-theme="split-current"] .fh-pill { color: var(--fh-blue); border-color: rgba(95,212,255,0.35); }
[data-fh-theme="midnight-pulse"] .fh-quicklinks a,
[data-fh-theme="split-current"] .fh-quicklinks a { color: var(--fh-blue); border-color: rgba(95,212,255,0.35); }

/* =========================================================================
   FitHaven feature CSS — the three signature systems + feature pages added
   in the Haven 2027 upgrade. Everything here composes with fithaven-core.css
   (ported theme CSS) and the tokens. INTENTIONAL ADDITIONS:
     1. Energy Field   — WebGL2 blood-cell field hero (site/energy-field.js)
     2. Campaign Press — two-ink blue/pink halftone (site/halftone.js)
     3. Headline Gateway — typography-first major-story gateway
   plus Store, Join, Transformations, Search, Section Composer, Quiz states.
   ========================================================================= */

/* ---------- Category art (Motion Atlas integration) ---------- */
.fh-cat-hero { margin: 16px 0 4px; border-radius: var(--fh-radius); overflow: hidden; border: 1px solid var(--fh-line); box-shadow: var(--fh-shadow); background: var(--fh-panel-2); }
.fh-cat-hero img { display: block; width: 100%; height: auto; }
.fh-card__img--art, img.fh-card__img { object-fit: cover; object-position: 50% 82%; }
.fh-merch__media img { aspect-ratio: 16 / 10; width: 100%; height: auto; object-fit: cover; object-position: 50% 82%; display: block; }
.fh-product__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fh-gateway__media--art { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 899px) { .fh-gateway__media--art { aspect-ratio: 16 / 10; } }
.fh-quiz__goal-ico { width: 44px; height: 44px; border-radius: 10px; flex: 0 0 auto; border: 1px solid var(--fh-line); }
.fh-quiz__option { display: flex; align-items: center; gap: 10px; }
.fh-join__art { display: block; width: min(340px, 86%); height: auto; margin: 10px auto 4px; }
.fh-single__figure img.fh-card__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.fh-fitball__table img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 1. ENERGY FIELD (hero band hosting the WebGL canvas) ---------- */
.fh-ef {
	position: relative;
	overflow: hidden;
	border-radius: var(--fh-radius);
	margin: 20px 0;
	min-height: 420px;
	display: grid;
	align-items: end;
	border: 1px solid var(--fh-line);
	box-shadow: var(--fh-shadow-lift);
	background: linear-gradient(180deg, var(--fh-ef-bg-top), var(--fh-ef-bg-bottom));
	container-type: inline-size;
}
fh-energy-field, .fh-ef__canvas-host { position: absolute; inset: 0; display: block; }
.fh-ef canvas { width: 100%; height: 100%; display: block; }
/* Intentional non-black fallback poster (also the pre-boot + reduced-motion floor) */
.fh-ef__poster {
	position: absolute; inset: 0;
	background:
		radial-gradient(60% 70% at 30% 45%, color-mix(in oklab, var(--fh-ef-a) 55%, transparent), transparent 70%),
		radial-gradient(55% 65% at 72% 55%, color-mix(in oklab, var(--fh-ef-b) 50%, transparent), transparent 70%),
		linear-gradient(180deg, var(--fh-ef-bg-top), var(--fh-ef-bg-bottom));
	filter: saturate(1.05);
}
.fh-ef__content {
	position: relative;
	z-index: 2;
	padding: clamp(22px, 5cqi, 56px);
	max-width: 720px;
}
.fh-ef__kicker {
	font-family: var(--fh-font-head);
	text-transform: uppercase; letter-spacing: 0.1em;
	font-size: 0.76rem; font-weight: 800;
	color: var(--fh-accent, var(--fh-blue));
	display: inline-flex; align-items: center; gap: 8px;
	margin: 0 0 10px;
}
.fh-ef__title {
	font-size: clamp(2rem, 6.5cqi, 3.6rem);
	font-weight: 800;
	margin: 0 0 12px;
	color: var(--fh-ink);
	text-wrap: balance;
}
.fh-ef__title em { font-style: normal; background: var(--fh-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fh-ef__dek { color: var(--fh-ink-soft); font-size: 1.1rem; max-width: 56ch; margin: 0 0 20px; }
.fh-ef__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
/* Text protection scrim so headlines stay readable over bright cells */
.fh-ef__scrim {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--fh-ef-bg-top) 72%, transparent) 78%, color-mix(in srgb, var(--fh-ef-bg-top) 88%, transparent) 100%);
}
[data-fh-theme="midnight-pulse"] .fh-ef__scrim,
[data-fh-theme="split-current"] .fh-ef__scrim {
	background: linear-gradient(180deg, transparent 25%, rgba(11,11,22,0.62) 74%, rgba(11,11,22,0.85) 100%);
}
/* Preset switcher chips (page-chrome transition is synchronized via JS) */
.fh-ef__presets { position: absolute; top: 14px; right: 14px; z-index: 3; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.fh-ef__preset {
	width: 30px; height: 30px; border-radius: 999px; cursor: pointer;
	border: 2px solid rgba(255,255,255,0.75);
	box-shadow: 0 2px 8px rgba(23,20,34,0.25);
	padding: 0;
	transition: transform 0.15s ease;
}
.fh-ef__preset:hover { transform: scale(1.12); }
.fh-ef__preset[aria-pressed="true"] { outline: 3px solid var(--fh-ink); outline-offset: 2px; }
.fh-ef__preset--blue-power { background: linear-gradient(135deg, #2EC5FF, #7FDBFF); }
.fh-ef__preset--pink-power { background: linear-gradient(135deg, #FF4FD8, #FF9BEA); }
.fh-ef__preset--midnight-pulse { background: linear-gradient(135deg, #0B0B16 40%, #2EC5FF 100%); }
.fh-ef__preset--split-current { background: linear-gradient(90deg, #2EC5FF 48%, #FF4FD8 52%); }
.fh-ef__hint { position: absolute; left: 16px; top: 14px; z-index: 3; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--fh-font-head); color: var(--fh-muted); background: color-mix(in srgb, var(--fh-panel) 72%, transparent); border: 1px solid var(--fh-line); border-radius: 999px; padding: 4px 10px; backdrop-filter: blur(4px); }
/* Page chrome transition when a preset swaps */
/* .fh-card is deliberately EXCLUDED from the theme cross-fade. A card that
   is laid out but outside the viewport never advances its background
   transition, so it stays stranded on the value it held before the theme
   changed — on a dark preset that means a white card with light-on-light text.
   Large repeated surfaces switch instantly; only the page-level chrome fades. */
html.fh-theme-anim body,
html.fh-theme-anim .fh-masthead,
html.fh-theme-anim .fh-topic-nav,
html.fh-theme-anim .fh-ef {
	transition: background 0.6s var(--fh-ease), background-color 0.6s var(--fh-ease), border-color 0.6s var(--fh-ease), color 0.45s var(--fh-ease);
}

/* ---------- 2. CAMPAIGN PRESS (two-ink halftone system) ---------- */
.fh-press {
	position: relative;
	overflow: hidden;
	border-radius: var(--fh-radius);
	margin: 20px 0;
	background: var(--fh-panel);
	border: 1px solid var(--fh-line);
	box-shadow: var(--fh-shadow-lift);
}
.fh-press__stage { position: relative; aspect-ratio: 16 / 7; min-height: 300px; background: #FFFDFB; }
.fh-press__stage canvas, .fh-press__stage fh-halftone { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fh-press__overlay {
	position: absolute; inset: 0; z-index: 2;
	display: grid; align-content: end;
	padding: clamp(20px, 4vw, 44px);
	background: linear-gradient(180deg, transparent 35%, rgba(255,253,251,0.88) 82%);
}
.fh-press__kicker {
	font-family: var(--fh-font-head); font-weight: 800; text-transform: uppercase;
	letter-spacing: 0.14em; font-size: 0.78rem; color: var(--fh-pink); margin: 0 0 8px;
}
.fh-press__title {
	font-family: var(--fh-font-head); font-weight: 900;
	font-size: clamp(2.2rem, 7vw, 4.6rem);
	line-height: 0.98; letter-spacing: -0.02em; text-transform: uppercase;
	margin: 0 0 10px; max-width: 14ch; text-wrap: balance;
}
.fh-press__title .ink-b { color: var(--fh-blue); }
.fh-press__title .ink-p { color: var(--fh-pink); }
.fh-press__dek { font-size: 1.12rem; color: var(--fh-ink-soft); max-width: 52ch; margin: 0 0 18px; }
.fh-press__body { padding: clamp(20px, 4vw, 44px); }
/* Campaign landing composition */
.fh-campaign__grid { display: grid; gap: 18px; margin: 26px 0; }
@media (min-width: 640px) { .fh-campaign__grid { grid-template-columns: repeat(3, 1fr); } }
.fh-campaign__step {
	background: var(--fh-bg-2); border: 1px solid var(--fh-line);
	border-radius: var(--fh-radius); padding: 20px; box-shadow: var(--fh-shadow);
}
.fh-campaign__stepno {
	display: inline-grid; place-items: center; width: 34px; height: 34px;
	border-radius: 999px; background: var(--fh-grad); color: var(--fh-on-grad);
	font-family: var(--fh-font-head); font-weight: 800; margin-bottom: 10px;
}
.fh-campaign__step h3 { font-size: 1.15rem; margin: 0 0 6px; }
.fh-campaign__step p { color: var(--fh-muted); font-size: 0.98rem; margin: 0; }
.fh-press__controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 0 clamp(20px,4vw,44px) 18px; color: var(--fh-muted); font-size: 0.82rem; }
.fh-press__controls label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--fh-font-head); font-weight: 600; }
.fh-press__controls input[type="range"] { accent-color: var(--fh-pink); width: 120px; }

/* ---------- 3. HEADLINE GATEWAY (typography-first story gateway) ---------- */
.fh-gateway {
	position: relative;
	margin: 28px 0;
	padding: clamp(24px, 5vw, 56px) 0 0;
	border-top: 1px solid var(--fh-line-strong);
}
.fh-gateway__rule { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(18px, 3vw, 30px); }
.fh-gateway__rule::after { content: ""; flex: 1; height: 1px; background: var(--fh-line-strong); }
.fh-gateway__kicker {
	font-family: var(--fh-font-head); font-weight: 700; font-size: 0.76rem;
	letter-spacing: 0.16em; text-transform: uppercase; color: var(--fh-muted);
}
.fh-gateway__no { font-family: var(--fh-font-head); font-weight: 700; font-size: 0.76rem; letter-spacing: 0.1em; color: var(--fh-pink); }
.fh-gateway__grid { display: grid; gap: clamp(20px, 4vw, 44px); }
@media (min-width: 900px) { .fh-gateway__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }
.fh-gateway__title {
	font-family: var(--fh-font-head);
	font-weight: 800;
	font-size: clamp(2.3rem, 6.8vw, 5rem);
	line-height: 1.02;
	letter-spacing: -0.025em;
	margin: 0 0 18px;
	text-wrap: balance;
}
.fh-gateway__title a { color: var(--fh-ink); }
.fh-gateway__title a:hover { text-decoration: none; }
.fh-gateway__title .fh-gateway__stagger { display: block; }
.fh-gateway__title .fh-gateway__stagger--indent { padding-left: clamp(28px, 8vw, 120px); }
.fh-gateway__title em { font-style: normal; box-shadow: inset 0 -0.18em 0 0 color-mix(in srgb, var(--fh-pink-bright) 42%, transparent); }
.fh-gateway__standfirst { font-size: 1.18rem; color: var(--fh-ink-soft); max-width: 52ch; margin: 0 0 16px; }
.fh-gateway__meta {
	display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
	font-family: var(--fh-font-body); font-size: 0.88rem; color: var(--fh-muted);
	padding-top: 14px; border-top: 1px solid var(--fh-line);
}
.fh-gateway__meta strong { color: var(--fh-ink); font-weight: 600; }
.fh-gateway__cta {
	display: inline-flex; align-items: center; gap: 10px; margin-top: 18px;
	font-family: var(--fh-font-head); font-weight: 700; color: var(--fh-ink);
}
.fh-gateway__cta .fh-gateway__arrow { transition: transform 0.25s var(--fh-ease); }
.fh-gateway__cta:hover { text-decoration: none; color: var(--fh-blue); }
.fh-gateway__cta:hover .fh-gateway__arrow { transform: translateX(6px); }
/* Image clip reveal — starts scaled 1.12 and settles via custom easing */
.fh-gateway__figure { margin: 0; overflow: hidden; border-radius: var(--fh-radius-sm); background: var(--fh-panel-2); }
.fh-gateway__figure img, .fh-gateway__media {
	display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--fh-gw-pos, 50% 32%);
}
@media (max-width: 899px) { .fh-gateway__figure img, .fh-gateway__media { aspect-ratio: 16 / 10; } }
@media (prefers-reduced-motion: no-preference) {
	.fh-gateway__figure img, .fh-gateway__media { transform: scale(1.12); }
	.fh-gateway.is-revealed .fh-gateway__figure img,
	.fh-gateway.is-revealed .fh-gateway__media { transform: scale(1); transition: transform 1.1s var(--fh-ease); }
	.fh-gateway__stagger { opacity: 0; transform: translateY(0.35em); }
	.fh-gateway.is-revealed .fh-gateway__stagger { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.6s var(--fh-ease); }
	.fh-gateway.is-revealed .fh-gateway__stagger:nth-child(2) { transition-delay: 0.08s; }
	.fh-gateway.is-revealed .fh-gateway__stagger:nth-child(3) { transition-delay: 0.16s; }
}
.fh-gateway__caption { font-size: 0.82rem; color: var(--fh-muted); padding: 8px 2px 0; }
/* No-image variant: the words become the picture */
.fh-gateway--text .fh-gateway__grid { grid-template-columns: 1fr; }
.fh-gateway--text .fh-gateway__title { font-size: clamp(2.6rem, 8.4vw, 6rem); max-width: 18ch; }
.fh-gateway--text .fh-gateway__pull {
	font-family: var(--fh-font-head); font-weight: 600; font-size: clamp(1.1rem, 2.4vw, 1.5rem);
	color: var(--fh-ink-soft); border-left: 3px solid var(--fh-pink); padding: 4px 0 4px 18px;
	max-width: 44ch; margin: 8px 0 0;
}

/* ---------- Store / merch hub ---------- */
.fh-store__head { margin: 26px 0 6px; }
.fh-store__grid { display: grid; gap: 18px; margin: 22px 0; grid-template-columns: 1fr; }
@media (min-width: 640px) { .fh-store__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .fh-store__grid { grid-template-columns: repeat(3, 1fr); } }
.fh-store__honest {
	display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center;
	color: var(--fh-muted); font-size: 0.9rem; margin: 4px 0 0;
}
/* Merch detail */
.fh-product { display: grid; gap: 26px; margin: 26px 0; }
@media (min-width: 900px) { .fh-product { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; } }
.fh-product__media {
	border-radius: var(--fh-radius); overflow: hidden; border: 1px solid var(--fh-line);
	aspect-ratio: 1 / 1; display: flex; align-items: flex-end; padding: 16px;
	background:
		radial-gradient(120% 120% at 0% 0%, rgba(46,197,255,0.24), transparent 60%),
		radial-gradient(120% 120% at 100% 100%, rgba(255,79,216,0.22), transparent 60%),
		var(--fh-grad-soft);
	box-shadow: var(--fh-shadow);
}
.fh-product__title { font-size: clamp(1.7rem, 4.5vw, 2.4rem); margin: 6px 0 10px; }
.fh-product__dek { color: var(--fh-muted); font-size: 1.08rem; margin: 0 0 18px; }
.fh-product__sizes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.fh-product__sizes button {
	min-width: 46px; min-height: 44px; border-radius: var(--fh-radius-sm); cursor: pointer;
	border: 1px solid var(--fh-line-strong); background: var(--fh-panel);
	font-family: var(--fh-font-head); font-weight: 600; color: var(--fh-ink);
}
.fh-product__sizes button:hover { border-color: var(--fh-blue); color: var(--fh-blue); }
.fh-product__sizes button[aria-pressed="true"] { background: var(--fh-grad-soft); border-color: var(--fh-pink); color: var(--fh-pink); }
.fh-product__facts { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 8px; color: var(--fh-ink-soft); }
.fh-product__facts li { display: flex; gap: 10px; align-items: baseline; }
.fh-product__facts li::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--fh-grad); flex: 0 0 auto; transform: translateY(-1px); }

/* ---------- Join / newsletter ---------- */
.fh-join { max-width: 640px; margin: 0 auto; padding: 30px 0 40px; }
.fh-join__card {
	background: var(--fh-panel); border: 1px solid var(--fh-line); border-radius: var(--fh-radius);
	box-shadow: var(--fh-shadow); padding: clamp(22px, 4vw, 36px);
}
.fh-join__title { font-size: clamp(1.7rem, 5vw, 2.4rem); margin: 6px 0 8px; }
.fh-join__form { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.fh-join__form input[type="email"], .fh-join__form input[type="text"] {
	flex: 1; min-width: 220px; min-height: 48px; padding: 10px 16px;
	border-radius: 999px; border: 1px solid var(--fh-line-strong);
	background: var(--fh-bg-2); color: var(--fh-ink); font-size: 1rem;
}
.fh-join__perks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; color: var(--fh-ink-soft); }
.fh-join__perks li { display: flex; gap: 10px; align-items: baseline; }
.fh-join__perks li::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--fh-grad); flex: 0 0 auto; }
.fh-join__status { margin: 12px 0 0; font-weight: 600; font-size: 0.95rem; }
.fh-join__status--ok { color: var(--fh-blue); }
.fh-join__status--warn { color: var(--fh-pink); }

/* ---------- Transformation stories ---------- */
.fh-story__head { margin: 26px 0 10px; }
.fh-story-card .fh-card__media { aspect-ratio: 16 / 10; }
.fh-story__facts {
	display: grid; gap: 12px; margin: 24px 0; padding: 0; list-style: none;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.fh-story__facts li {
	background: var(--fh-bg-2); border: 1px solid var(--fh-line); border-radius: var(--fh-radius-sm);
	padding: 14px 16px;
}
.fh-story__facts .n { display: block; font-family: var(--fh-font-head); font-weight: 800; font-size: 1.5rem; background: var(--fh-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fh-story__facts .l { color: var(--fh-muted); font-size: 0.85rem; }
.fh-story__timeline { list-style: none; margin: 22px 0; padding: 0; display: grid; gap: 0; }
.fh-story__timeline li { position: relative; padding: 0 0 22px 26px; border-left: 2px solid var(--fh-line-strong); margin-left: 8px; }
.fh-story__timeline li:last-child { padding-bottom: 4px; border-left-color: transparent; }
.fh-story__timeline li::before {
	content: ""; position: absolute; left: -7px; top: 2px; width: 12px; height: 12px;
	border-radius: 999px; background: var(--fh-grad); box-shadow: 0 0 0 3px var(--fh-bg);
}
.fh-story__timeline .t { font-family: var(--fh-font-head); font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fh-pink); display: block; margin-bottom: 2px; }

/* ---------- Section Composer ---------- */
.fh-composer { display: grid; gap: 20px; margin: 20px 0 40px; }
@media (min-width: 1000px) { .fh-composer { grid-template-columns: 360px minmax(0, 1fr); align-items: start; } }
.fh-composer__panel {
	background: var(--fh-panel); border: 1px solid var(--fh-line); border-radius: var(--fh-radius);
	box-shadow: var(--fh-shadow); padding: 18px;
}
@media (min-width: 1000px) { .fh-composer__panel { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; } }
.fh-composer__list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.fh-composer__item {
	display: flex; align-items: center; gap: 8px;
	background: var(--fh-bg-2); border: 1px solid var(--fh-line-strong);
	border-radius: var(--fh-radius-sm); padding: 8px 10px;
	font-family: var(--fh-font-head); font-weight: 600; font-size: 0.86rem;
}
.fh-composer__item.is-hidden { opacity: 0.45; border-style: dashed; }
.fh-composer__item.is-dup { border-color: rgba(204,31,130,0.5); }
.fh-composer__item .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fh-composer__item .dupBadge { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.05em; color: var(--fh-pink); border: 1px solid rgba(204,31,130,0.4); border-radius: 999px; padding: 2px 7px; }
.fh-composer__item button {
	width: 30px; height: 30px; display: inline-grid; place-items: center;
	border-radius: 8px; border: 1px solid var(--fh-line-strong); background: var(--fh-panel);
	cursor: pointer; color: var(--fh-ink); font-size: 0.85rem; line-height: 1; padding: 0;
}
.fh-composer__item button:hover { border-color: var(--fh-blue); color: var(--fh-blue); }
.fh-composer__item button:disabled { opacity: 0.35; cursor: default; }
.fh-composer__preview {
	border: 1px solid var(--fh-line-strong); border-radius: var(--fh-radius);
	overflow: hidden; box-shadow: var(--fh-shadow-lift); background: var(--fh-bg);
}
.fh-composer__preview iframe { display: block; width: 100%; height: min(78vh, 860px); border: 0; }
.fh-composer__toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.fh-composer__note { font-size: 0.82rem; color: var(--fh-muted); margin: 12px 0 0; }

/* ---------- Quiz validation / error state ---------- */
.fh-quiz__error {
	display: flex; align-items: center; gap: 10px;
	margin: 12px 0 0; padding: 12px 16px;
	border-radius: var(--fh-radius-sm);
	background: rgba(204, 31, 130, 0.08);
	border: 1px solid rgba(204, 31, 130, 0.45);
	color: var(--fh-pink); font-weight: 600; font-size: 0.95rem;
}
.fh-quiz__step.has-error .fh-quiz__option { border-color: rgba(204,31,130,0.45); }

/* ---------- Category hub accent behavior ---------- */
.fh-archive__head { position: relative; padding-top: 14px; }
.fh-archive__head::before { content: ""; position: absolute; top: 0; left: 0; width: 74px; height: 4px; border-radius: 999px; background: var(--fh-cat-accent, var(--fh-grad)); }
.fh-archive__count { color: var(--fh-muted); font-size: 0.9rem; }

/* ---------- Sponsored / advertorial article ---------- */
.fh-advertorial-note {
	display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
	margin: 18px 0; padding: 12px 16px;
	border-radius: var(--fh-radius-sm);
	background: rgba(23,20,34,0.045);
	border: 1px solid var(--fh-line-strong);
	color: var(--fh-muted); font-size: 0.9rem;
}

/* ---------- FitBall page states ---------- */
.fh-fitball__waitform { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; max-width: 520px; }
.fh-fitball__waitform input[type="email"] {
	flex: 1; min-width: 200px; min-height: 46px; padding: 10px 16px;
	border-radius: 999px; border: 1px solid rgba(255,255,255,0.28);
	background: rgba(255,255,255,0.08); color: var(--fh-on-dark); font-size: 0.98rem;
}
.fh-fitball__waitform input[type="email"]::placeholder { color: var(--fh-on-dark-muted); }
.fh-fitball__table {
	margin: 22px 0 0; border-radius: var(--fh-radius); overflow: hidden;
	border: 1px solid rgba(255,255,255,0.14); aspect-ratio: 16 / 8;
	background:
		radial-gradient(80% 90% at 50% 110%, rgba(46,197,255,0.30), transparent 60%),
		radial-gradient(60% 60% at 80% 0%, rgba(255,79,216,0.26), transparent 60%),
		linear-gradient(180deg, #171734, #0F1020);
	display: grid; place-items: center; position: relative; overflow: hidden;
}

/* ---------- Search page ---------- */
.fh-search-hero { margin: 24px 0; }
.fh-search-hero form { display: flex; gap: 8px; max-width: 640px; }
.fh-search-hero input[type="search"] {
	flex: 1; min-height: 50px; padding: 10px 18px; border-radius: 999px;
	border: 1px solid var(--fh-line-strong); background: var(--fh-panel);
	color: var(--fh-ink); font-size: 1.05rem;
}
.fh-search-hero button {
	min-height: 50px; padding: 10px 22px; border-radius: 999px; border: none;
	background: var(--fh-grad); color: var(--fh-on-grad);
	font-family: var(--fh-font-head); font-weight: 600; cursor: pointer;
}

/* ---------- Page-hub (design-project index) ---------- */
.fh-hub__grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin: 18px 0 34px; }
.fh-hub__link {
	display: block; padding: 14px 16px; border-radius: var(--fh-radius-sm);
	background: var(--fh-panel); border: 1px solid var(--fh-line); box-shadow: var(--fh-shadow);
	color: var(--fh-ink); font-family: var(--fh-font-head); font-weight: 600; font-size: 0.95rem;
}
.fh-hub__link:hover { text-decoration: none; border-color: var(--fh-blue); color: var(--fh-blue); transform: translateY(-1px); }
.fh-hub__link .sub { display: block; font-family: var(--fh-font-body); font-weight: 400; color: var(--fh-muted); font-size: 0.82rem; margin-top: 3px; }


/* Liquid-Glass hero: the atomic SVG shows as the hero (and no-WebGL/reduced-motion
   fallback). The canvas draws over it only when its health check passes. */
.fh-ef__poster{background-image:url("../media/energy-field/hero-editorial.svg");background-size:cover;background-position:center;}
[data-fh-theme="blue-power"] .fh-ef__poster{background-image:url("../media/energy-field/hero-blue-power.svg");}
[data-fh-theme="pink-power"] .fh-ef__poster{background-image:url("../media/energy-field/hero-pink-power.svg");}
[data-fh-theme="midnight-pulse"] .fh-ef__poster{background-image:url("../media/energy-field/hero-midnight-pulse.svg");}
[data-fh-theme="split-current"] .fh-ef__poster{background-image:url("../media/energy-field/hero-split-current.svg");}
@media (max-width:640px){.fh-ef__poster{background-image:url("../media/energy-field/hero-mobile-editorial.svg");}}
@media (prefers-reduced-motion:reduce){.fh-ef__poster{background-image:url("../media/energy-field/poster-editorial.svg");}}
fh-energy-field[data-fallback]{display:none;}


/* === Liquid Glass Category Emblems (v2.2.0) — identity layer ============== */
.fh-topic-emblem{width:22px;height:22px;flex:0 0 auto;margin-right:7px;vertical-align:-5px;filter:drop-shadow(0 1px 2px rgba(23,20,34,0.16))}
.fh-topic-nav__list a{display:inline-flex;align-items:center}
.fh-archive__head.has-emblem{position:relative;padding-right:132px;min-height:112px}
.fh-emblem--category-hero,.fh-archive__emblem{position:absolute;top:2px;right:0;width:112px;height:112px;filter:drop-shadow(0 8px 20px rgba(23,20,34,0.14))}
@media (max-width:640px){.fh-archive__head.has-emblem{padding-right:0;min-height:0}.fh-emblem--category-hero,.fh-archive__emblem{position:static;display:block;width:96px;height:96px;margin:0 0 6px}}
@media (prefers-reduced-motion:reduce){.fh-emblem *{animation:none!important}}

/* =========================================================================
   HEADER PRIORITY — founder correction. The approved logo/Jumbotron footprint
   keeps its full desktop presence, but the order beneath it now reads:
   identity → categories → Store/Quiz/Join/Search → content, with social
   demoted to an optional collapsed "Follow FitHaven" utility. Social icons
   must never outrank an on-site destination.
   ========================================================================= */
.fh-tagline { font-size: 2.05rem; margin-top: 16px; }
.fh-masthead__brand img,
.fh-masthead__brand .custom-logo { max-height: min(650px, 62vh); }
.fh-masthead__inner { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 14px; justify-items: center; }
.fh-masthead__brand { grid-column: 1; grid-row: 1; }

/* Reserved Jumbotron geometry: the sponsor creative drops in here without
   moving a pixel of the identity above it. Unsold renders the quiet slot. */
.fh-masthead__jumbo { grid-column: 1; grid-row: 2; display: flex; justify-content: center; min-height: 0; }
.fh-masthead__jumbo:empty { display: none; }

/* ---- Priority action band (Store · Quiz · Join · Search · Follow) ---- */
.fh-actionbar { background: var(--fh-bg); border-bottom: 1px solid var(--fh-line); }
.fh-actionbar__inner {
	max-width: var(--fh-maxw); margin: 0 auto; padding: 14px 16px;
	display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch;
}
.fh-action {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 56px; padding: 14px 20px;
	font-family: var(--fh-font-head); font-weight: 800; font-size: 1.05rem;
	color: var(--fh-ink); text-decoration: none; text-align: center;
	border: 1px solid var(--fh-line-strong); border-radius: 14px;
	background: var(--fh-panel);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 8px -4px rgba(11,11,18,0.30);
	transition: transform 0.16s var(--fh-ease), border-color 0.16s var(--fh-ease), box-shadow 0.16s var(--fh-ease), color 0.16s var(--fh-ease);
}
.fh-action:hover { text-decoration: none; color: var(--fh-blue); border-color: var(--fh-blue); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 6px 16px -8px rgba(9,119,170,0.55); }
.fh-action:active { transform: translateY(1px) scale(0.995); }
.fh-action:focus-visible { outline: 3px solid var(--fh-blue); outline-offset: 3px; }
.fh-action--join {
	grid-column: span 2;
	background: var(--fh-grad); color: #fff; border-color: transparent;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 8px 20px -10px rgba(214,31,141,0.75);
}
.fh-action--join:hover { color: #fff; border-color: transparent; filter: saturate(1.08); }
.fh-action--search { border-color: var(--fh-blue); color: var(--fh-blue); background: var(--fh-grad-soft); }
/* The toggle inherits a fixed 44px square from core — in the action band it is
   a labelled peer of Store and Quiz, so it sizes like one. */
.fh-action.fh-search-toggle { width: auto; height: auto; }
.fh-action--search .fh-icon { width: 22px; height: 22px; flex: 0 0 auto; }
.fh-action__label { display: inline; }

/* ---- Follow FitHaven — optional, collapsed, never the loudest control ---- */
.fh-follow { grid-column: span 2; justify-self: center; }
.fh-follow__summary {
	list-style: none; cursor: pointer;
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 44px; padding: 10px 16px;
	font-family: var(--fh-font-head); font-weight: 700; font-size: 0.86rem;
	color: var(--fh-muted); border: 1px solid var(--fh-line); border-radius: 999px;
	background: transparent;
}
.fh-follow__summary::-webkit-details-marker { display: none; }
.fh-follow__summary:hover { color: var(--fh-pink); border-color: var(--fh-pink); }
.fh-follow__summary:focus-visible { outline: 3px solid var(--fh-blue); outline-offset: 3px; }
.fh-follow__dots { width: 6px; height: 6px; border-radius: 50%; background: var(--fh-pink); box-shadow: 9px 0 0 var(--fh-blue), -9px 0 0 var(--fh-muted); margin: 0 9px; flex: 0 0 auto; }
.fh-social--follow { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.fh-social--follow .fh-social__link { min-height: 44px; min-width: 44px; padding: 10px 12px; font-size: 0.82rem; }
.fh-social--follow .fh-social__icon { width: 22px; height: 22px; }

@media (min-width: 860px) {
	.fh-masthead__inner { padding: 22px 16px 16px; }
	.fh-actionbar__inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; padding: 16px; }
	/* Labels never break mid-phrase; the band wraps as a whole if space is tight. */
	.fh-action { min-height: 64px; padding: 16px clamp(16px, 2.4vw, 30px); font-size: clamp(1rem, 1.5vw, 1.22rem); white-space: nowrap; }
	.fh-action--join { padding: 16px clamp(20px, 3vw, 38px); grid-column: auto; }
	.fh-follow__summary { white-space: nowrap; }
	/* Social sits off to the side of the priority path, never in it. */
	.fh-follow { margin-left: auto; position: relative; grid-column: auto; }
	.fh-follow[open] .fh-social--follow {
		position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
		flex-wrap: nowrap; margin: 0; padding: 10px;
		background: var(--fh-panel); border: 1px solid var(--fh-line-strong);
		border-radius: 14px; box-shadow: var(--fh-shadow-lift);
	}
}

@media (max-width: 400px) {
	.fh-masthead__inner { padding: 12px 12px 10px; }
	.fh-actionbar__inner { padding: 12px; gap: 8px; }
	.fh-action { min-height: 48px; padding: 12px 10px; font-size: 0.95rem; }
	.fh-tagline { font-size: 1.35rem; }
	.fh-masthead__brand img,
	.fh-masthead__brand .custom-logo { max-height: 330px; }
}


/* =========================================================================
   TOPIC NAV — the categories are the site's primary navigation and now carry
   the premium treatment: full-width territory, confident type, Liquid Glass
   depth (light-catching top edge, soft inset highlight, restrained lower
   shadow) and real hover / pressed / selected / focus-visible states.
   Desktop holds all nine in one eyeshot; mobile is a 3×3 grid, never a
   sideways scroll.
   ========================================================================= */
.fh-topic-nav { position: relative; z-index: 20; }
.fh-topic-nav__list { gap: 8px; padding: 12px; display: grid; grid-template-columns: repeat(3, 1fr); }
.fh-topic-nav__list li { flex: none; }
.fh-topic-nav__list a {
	display: flex; align-items: center; justify-content: center;
	min-height: 52px; padding: 12px 8px;
	font-family: var(--fh-font-head); font-weight: 800;
	font-size: clamp(0.92rem, 3.2vw, 1.05rem); line-height: 1.15;
	letter-spacing: 0.005em; text-align: center; color: var(--fh-ink);
	border: 1px solid var(--fh-line-strong); border-radius: 14px;
	background: linear-gradient(180deg, color-mix(in srgb, #fff 78%, var(--fh-panel)) 0%, var(--fh-panel) 62%, color-mix(in srgb, var(--fh-panel) 88%, var(--fh-ink)) 100%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(11,11,18,0.05), 0 2px 8px -5px rgba(11,11,18,0.35);
	transition: transform 0.16s var(--fh-ease), border-color 0.16s var(--fh-ease), box-shadow 0.16s var(--fh-ease), color 0.16s var(--fh-ease);
}
.fh-topic-nav__list a:hover {
	text-decoration: none; color: var(--fh-blue); border-color: var(--fh-blue);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 8px 20px -10px rgba(9,119,170,0.6);
}
.fh-topic-nav__list a:active { transform: translateY(1px) scale(0.994); box-shadow: inset 0 2px 5px rgba(11,11,18,0.14); }
.fh-topic-nav__list a:focus-visible { outline: 3px solid var(--fh-blue); outline-offset: 3px; }
.fh-topic-nav__list a[aria-current="page"] {
	color: #fff; border-color: transparent; background: var(--fh-grad);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 8px 20px -10px rgba(214,31,141,0.7);
}
@media (min-width: 640px) {
	.fh-topic-nav__list { grid-template-columns: repeat(9, 1fr); gap: 10px; padding: 14px 12px; }
	.fh-topic-nav__list a { min-height: 60px; padding: 14px 6px; font-size: clamp(0.86rem, 1.35vw, 1.18rem); }
}
@media (min-width: 860px) {
	/* One compact sticky treatment after the hero scrolls away — categories stay
	   reachable without pinning the enormous logo over the article feed. */
	.fh-topic-nav { position: sticky; top: 0; box-shadow: 0 6px 18px -12px rgba(11,11,18,0.5); }
	/* Anchor jumps (skip link, in-page headings) must clear the sticky bar. */
	html { scroll-padding-top: 89px; }
}


/* =========================================================================
   SEARCH — the toggle now lives in the priority action band beside Store,
   Fitness Quiz and Join, so it is never a lone floating control.
   ========================================================================= */
.fh-search-toggle {
	border: 1px solid var(--fh-blue);
	background: var(--fh-grad-soft);
	color: var(--fh-blue);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 3px 12px rgba(9,119,170,0.20);
}
.fh-search-toggle .fh-icon path { stroke: currentColor; stroke-width: 1.15; stroke-linejoin: round; }
.fh-search-toggle:hover { border-color: var(--fh-pink); color: var(--fh-pink); }

/* =========================================================================
   FINAL POLISH PASS — logo 2.5D, category-hub homepage DNA, footer bubbles.
   ========================================================================= */

/* ---- Logo: optical center + restrained 2.5D. Crisper contour (tight dark
   drop-shadow), inner-light suggestion (1px top light), soft brand-glow
   separation, slight saturation lift. No emboss, no chrome, no shape change. */
.fh-masthead__brand { text-align: center; }
.fh-masthead__brand img,
.fh-masthead__brand .custom-logo {
	display: block; margin-inline: auto;
	filter:
		saturate(1.07) contrast(1.045)
		drop-shadow(0 0 1px rgba(11,11,18,0.34))
		drop-shadow(0 1px 0 rgba(255,255,255,0.5))
		drop-shadow(0 10px 22px rgba(31,168,245,0.15))
		drop-shadow(0 8px 20px rgba(255,63,176,0.12))
		drop-shadow(0 3px 6px rgba(11,11,18,0.16));
}

/* ---- Category hub hero: the homepage Energy Field focused through a
   category lens. Same band, same presets, same grammar; adds the active
   Liquid Glass emblem as a glass crest above the kicker. */
.fh-ef--category { min-height: clamp(380px, 46vh, 540px); }
.fh-ef--category .fh-ef__title { font-size: clamp(2.1rem, 5.4cqi, 3.2rem); }
.fh-ef--category .fh-ef__dek { max-width: 52ch; }
.fh-ef__aeo { position: relative; z-index: 2; margin: 2px 0 12px; font-size: 0.85rem; color: var(--fh-muted); }
.fh-ef--category .fh-ef__content { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 28px; align-items: center; }
.fh-ef--category .fh-ef__content > *:not(.fh-ef__emblem) { grid-column: 1; }
.fh-ef__emblem {
	grid-column: 2; grid-row: 1 / span 8; justify-self: end; align-self: center;
	margin: 0; width: 168px; height: 168px;
	display: grid; place-items: center;
	background: color-mix(in srgb, var(--fh-panel) 58%, transparent);
	border: 1px solid var(--fh-line-strong); border-radius: 24px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -8px 16px rgba(11,11,18,0.06), 0 12px 26px -16px rgba(11,11,18,0.55);
	backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
.fh-ef__emblem img { width: 136px; height: 136px; display: block; }
@media (max-width: 639px) {
	.fh-ef--category { min-height: 420px; }
	.fh-ef__emblem { grid-row: 1 / span 3; width: 96px; height: 96px; border-radius: 20px; }
	.fh-ef__emblem img { width: 74px; height: 74px; }
}

/* ---- Footer social pills: premium bubble popout on the permanent dark
   footer band — dimensional volume, lit top edge, buoyant hover, tidy icons. */
.fh-social--footer { gap: 10px; }
.fh-social--footer .fh-social__link {
	min-height: 48px; padding: 12px 18px; border-radius: 999px;
	background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.055) 44%, rgba(11,11,18,0.20) 100%);
	border: 1px solid rgba(255,255,255,0.24);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.34),
		inset 0 -7px 14px rgba(11,11,18,0.28),
		0 10px 22px -12px rgba(0,0,0,0.65);
	transition: transform 0.16s var(--fh-ease), box-shadow 0.16s var(--fh-ease), border-color 0.16s var(--fh-ease);
}
.fh-social--footer .fh-social__link:hover {
	transform: translateY(-2px);
	border-color: rgba(255,255,255,0.42);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.42),
		inset 0 -7px 14px rgba(11,11,18,0.24),
		0 14px 28px -12px rgba(31,168,245,0.45),
		0 14px 30px -14px rgba(255,63,176,0.4);
	text-decoration: none;
}
.fh-social--footer .fh-social__link:active { transform: translateY(0) scale(0.97); }
.fh-social--footer .fh-social__link:focus-visible { outline: 3px solid var(--fh-blue-bright); outline-offset: 3px; }
.fh-social--footer .fh-social__icon { width: 22px; height: 22px; border-radius: 6px; flex: 0 0 auto; }


/* =========================================================================
   FLIP CARDS — article card turns to its Quick Take (Haven flip contract)
   Explicit flip only (button / Enter / Escape). No hover flip. Inactive face
   leaves the AT tree. Reduced motion swaps instead of turning.
   ========================================================================= */
/* The turn is one keyframe on the card and the faces are swapped at the
   midpoint by JS — no persistent rotateY on a face, so nothing can ever render
   mirrored in a renderer that drops the 3D context. */
.fh-flipcard { position: relative; perspective: 1400px; }
.fh-flipcard__inner { position: relative; display: grid; height: 100%; }
.fh-flipcard { height: 100%; }
.fh-flipcard.is-turning { animation: fh-turn 0.44s var(--fh-ease); }
@keyframes fh-turn { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }
.fh-flipcard__face { grid-area: 1 / 1; }
.fh-flipcard__face--back {
	align-self: stretch; height: 100%;
	display: flex; flex-direction: column; gap: 8px;
	padding: 18px;
	background: linear-gradient(158deg, color-mix(in srgb, var(--fh-blue) 12%, var(--fh-panel)) 0%, color-mix(in srgb, var(--fh-pink) 12%, var(--fh-panel)) 100%);
	border-radius: inherit;
}
.fh-flipcard__kicker { margin: 0; font: 700 0.68rem/1.2 var(--fh-font-head); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fh-pink); }
.fh-flipcard__h { margin: 0; font: 800 1.06rem/1.25 var(--fh-font-head); color: var(--fh-ink); }
.fh-flipcard__dek { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--fh-ink-soft); text-wrap: pretty; }
.fh-flipcard__meta { margin: 0; font-size: 0.8rem; color: var(--fh-muted); }
.fh-flipcard__actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fh-flipcard__read {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
	border-radius: 999px; background: var(--fh-grad); color: #fff;
	font: 700 0.92rem/1 var(--fh-font-head); text-decoration: none;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 8px 18px -12px rgba(214,31,141,0.7);
}
.fh-flipcard__read:hover { text-decoration: none; filter: brightness(1.05); }
.fh-flipcard__btn {
	display: inline-flex; align-items: center; gap: 7px;
	min-height: 44px; padding: 0 15px; border-radius: 999px; cursor: pointer;
	background: color-mix(in srgb, var(--fh-panel) 88%, transparent);
	border: 1px solid var(--fh-line-strong); color: var(--fh-ink);
	font: 700 0.86rem/1 var(--fh-font-head);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 6px 14px -12px rgba(11,11,18,0.6);
	transition: transform 0.16s var(--fh-ease), border-color 0.16s var(--fh-ease), color 0.16s var(--fh-ease);
}
.fh-flipcard__btn:hover { color: var(--fh-blue); border-color: var(--fh-blue); }
.fh-flipcard__btn:active { transform: translateY(1px) scale(0.99); }
.fh-flipcard__btn:focus-visible { outline: 3px solid var(--fh-blue); outline-offset: 3px; }
.fh-flipcard__btn--flip { margin: 0 16px 16px; align-self: flex-start; }
.fh-flipcard__btn-ico { width: 14px; height: 14px; border-radius: 4px; background: var(--fh-grad); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); }
@media (max-width: 560px) {
	.fh-flipcard__face--back { padding: 14px; }
	.fh-flipcard__actions { flex-direction: column; align-items: stretch; }
	.fh-flipcard__read, .fh-flipcard__btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.fh-flipcard.is-turning { animation: none; }
}
@media (forced-colors: active) {
	.fh-flipcard__face--back { border: 1px solid CanvasText; background: Canvas; }
	.fh-flipcard__read, .fh-flipcard__btn { border: 1px solid ButtonText; }
}

/* ticker overflow containment — the marquee track (4464px) is clipped by
   .fh-trending, but the transform + pseudo-elements could still extend the
   scrollable area by a few px. Contain paint and pin the scroll container. */
.fh-trending { overflow: hidden; contain: paint; max-width: 100%; }
.fh-trending__track { will-change: transform; }
html, body { overflow-x: clip; max-width: 100%; }

/* ── Flip Feature (haven.flip_feature.edition renderer) ─────────────────────
   Identity comes only from the [data-hff-brand] scope. FitHaven's scope uses
   FitHaven tokens — no other brand's palette appears here. */
[data-hff-brand="fithaven"] {
	--hff-accent: var(--fh-blue);
	--hff-accent-2: var(--fh-pink);
	--hff-grad: var(--fh-grad);
	--hff-surface: var(--fh-panel);
	--hff-ink: var(--fh-ink);
	--hff-ink-soft: var(--fh-ink-soft);
	--hff-line: var(--fh-line);
}
.fh-ff {
	border: 1px solid var(--hff-line, var(--fh-line)); border-radius: var(--fh-radius);
	background: var(--hff-surface, var(--fh-panel)); box-shadow: var(--fh-shadow);
	padding: clamp(20px, 3.4vw, 40px); margin: 28px 0;
}
.fh-ff__head { margin: 0 0 24px; }
.fh-ff__badge {
	display: inline-block; font: 800 0.7rem/1 var(--fh-font-head); letter-spacing: 0.14em;
	text-transform: uppercase; color: #fff; background: var(--hff-grad, var(--fh-grad));
	border-radius: 999px; padding: 8px 16px; margin-bottom: 16px;
}
.fh-ff__title {
	font-family: var(--fh-font-head); font-weight: 800; font-size: clamp(1.6rem, 3.6vw, 2.6rem);
	line-height: 1.08; margin: 0 0 10px; color: var(--hff-ink, var(--fh-ink)); text-wrap: balance;
}
.fh-ff__deck { font-size: 1.06rem; line-height: 1.5; color: var(--hff-ink-soft, var(--fh-ink-soft)); max-width: 62ch; margin: 0 0 12px; text-wrap: pretty; }
.fh-ff__q { font-family: var(--fh-font-head); font-weight: 700; font-size: 1rem; color: var(--hff-accent-2, var(--fh-pink)); margin: 0 0 14px; }
.fh-ff__stamp { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-size: 0.8rem; color: var(--fh-muted); }
.fh-ff__stamp span { display: inline-flex; align-items: center; gap: 6px; }
.fh-ff__stamp span + span::before { content: "·"; color: var(--fh-line-strong, var(--fh-line)); margin-right: 6px; }

.fh-ff__blocked {
	border: 1px solid color-mix(in srgb, var(--fh-pink) 40%, var(--fh-line));
	background: color-mix(in srgb, var(--fh-pink) 6%, var(--fh-bg));
	border-radius: var(--fh-radius-sm); padding: 18px 22px; margin: 0 0 24px;
}
.fh-ff__blockedh { font: 800 0.82rem/1.2 var(--fh-font-head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fh-pink); margin: 0 0 10px; }
.fh-ff__blockedlist { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 6px; font-size: 0.94rem; line-height: 1.5; color: var(--hff-ink, var(--fh-ink)); }
.fh-ff__blockednote { margin: 0; font-size: 0.9rem; color: var(--hff-ink-soft, var(--fh-ink-soft)); }

.fh-ff__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin: 0 0 28px; }
.fh-ff__card {
	position: relative; display: flex; flex-direction: column;
	border: 1px solid var(--hff-line, var(--fh-line)); border-radius: var(--fh-radius-sm);
	background: var(--fh-bg); overflow: hidden;
	transition: transform var(--fh-dur-hover, 0.2s) var(--fh-ease), box-shadow var(--fh-dur-hover, 0.2s) var(--fh-ease);
}
.fh-ff__card:hover { transform: translateY(-2px); box-shadow: var(--fh-shadow); }
.fh-ff__card.is-turning { transform: rotateY(8deg) scale(0.985); }
.fh-ff__card.is-locked { opacity: 0.86; }
.fh-ff__face { display: flex; flex-direction: column; gap: 8px; padding: 20px; flex: 1 1 auto; }
.fh-ff__face[hidden] { display: none; }
.fh-ff__mark {
	position: relative; height: 132px; margin: -20px -20px 12px; display: grid; place-items: center;
	background: var(--hff-grad, var(--fh-grad));
}
.fh-ff__mark::after {
	content: ""; position: absolute; inset: 0;
	background: radial-gradient(120% 90% at 26% 14%, rgba(255,255,255,0.5), transparent 62%);
}
.fh-ff__markglyph { position: relative; font-family: var(--fh-font-head); font-weight: 800; font-size: 3.2rem; color: #fff; text-shadow: 0 2px 12px rgba(11,27,51,0.28); }
.fh-ff__pos { margin: 0; font: 800 0.66rem/1 var(--fh-font-head); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hff-accent, var(--fh-blue)); }
.fh-ff__name { margin: 0; font: 800 1.14rem/1.2 var(--fh-font-head); color: var(--hff-ink, var(--fh-ink)); }
.fh-ff__idline { margin: 0; font-size: 0.93rem; line-height: 1.5; color: var(--hff-ink-soft, var(--fh-ink-soft)); text-wrap: pretty; }
.fh-ff__flip { margin-top: auto; align-self: flex-start; }
.fh-ff__kicker { margin: 0; font: 800 0.66rem/1 var(--fh-font-head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hff-accent-2, var(--fh-pink)); }
.fh-ff__session { margin: 0; font: 800 1.06rem/1.25 var(--fh-font-head); color: var(--hff-ink, var(--fh-ink)); }
.fh-ff__note { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--hff-ink-soft, var(--fh-ink-soft)); text-wrap: pretty; }
.fh-ff__meta, .fh-ff__src { margin: 0; font-size: 0.82rem; color: var(--fh-muted); }
.fh-ff__srck { font-weight: 800; color: var(--hff-ink, var(--fh-ink)); }
.fh-ff__acts { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }

.fh-ff__poll { border-top: 1px solid var(--hff-line, var(--fh-line)); padding-top: 22px; }
.fh-ff__pollh { font: 800 0.82rem/1.2 var(--fh-font-head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hff-ink-soft, var(--fh-ink-soft)); margin: 0 0 14px; }
.fh-ff__opts { display: grid; gap: 10px; margin: 0 0 12px; }
.fh-ff__opt {
	position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
	min-height: 52px; padding: 12px 18px; border-radius: 999px; cursor: pointer;
	border: 1px solid var(--hff-line, var(--fh-line)); background: var(--fh-bg);
	font-family: var(--fh-font-head); font-weight: 700; font-size: 1rem; color: var(--hff-ink, var(--fh-ink));
	overflow: hidden; text-align: left;
	transition: border-color var(--fh-dur-hover, 0.2s) var(--fh-ease), transform 0.12s var(--fh-ease);
}
.fh-ff__opt:hover { border-color: var(--hff-accent, var(--fh-blue)); }
.fh-ff__opt:active { transform: scale(0.99); }
.fh-ff__opt[aria-pressed="true"] { border-color: var(--hff-accent-2, var(--fh-pink)); box-shadow: inset 0 0 0 1px var(--hff-accent-2, var(--fh-pink)); }
.fh-ff__bar { position: absolute; inset: 0 auto 0 0; background: var(--fh-grad-soft, color-mix(in srgb, var(--fh-blue) 14%, transparent)); transition: width 0.5s var(--fh-ease); z-index: 0; }
.fh-ff__optname, .fh-ff__pct { position: relative; z-index: 1; }
.fh-ff__pct { font-variant-numeric: tabular-nums; color: var(--hff-ink-soft, var(--fh-ink-soft)); }
.fh-ff__pollnote, .fh-ff__pollmeta { margin: 0 0 6px; font-size: 0.84rem; color: var(--fh-muted); }
.fh-ff__announce { margin: 0; font-size: 0.84rem; color: var(--hff-accent, var(--fh-blue)); min-height: 1.2em; }
.fh-ff__sources, .fh-ff__canonical { margin: 18px 0 0; font-size: 0.85rem; color: var(--fh-muted); }
.fh-ff__canonical code { font-family: var(--fh-font-mono, ui-monospace, monospace); font-size: 0.82rem; }
@media (max-width: 600px) {
	.fh-ff { padding: 18px 16px; }
	.fh-ff__grid { grid-template-columns: 1fr; }
	.fh-ff__mark { height: 108px; }
}
@media (prefers-reduced-motion: reduce) {
	.fh-ff__card, .fh-ff__bar { transition: none; }
	.fh-ff__card.is-turning { transform: none; }
}

/* ── Category hero: drifting Liquid Glass emblem field ──────────────────────
   Lives in a bounded, clipped zone on the hero's right. It sits BELOW the
   content layer (content is z-index 2) and is pointer-transparent and
   aria-hidden, so it can never impede type, links, pills or tabs. Desktop
   shows the field; below 960px it yields to the compact title chip. */
.fh-ef--category { position: relative; overflow: hidden; }
.fh-ef__emblemfield {
	/* Top inset clears the Mood swatch row so no orb can ever reach it. */
	position: absolute; top: 78px; right: 0; bottom: 0;
	width: min(46%, 520px);
	overflow: hidden; pointer-events: none; z-index: 1;
	contain: paint;
}
.fh-ef__orb {
	position: absolute; display: block;
	filter: drop-shadow(0 10px 26px rgba(11, 27, 51, 0.28));
	will-change: transform;
}
.fh-ef__orb--lead { width: 168px; height: 168px; top: 6%; left: 24%; opacity: 0.98; animation: fh-orb-lead 19s var(--fh-ease, ease-in-out) infinite; }
.fh-ef__orb--a { width: 88px; height: 88px; top: 52%; left: 6%; opacity: 0.72; animation: fh-orb-a 15s var(--fh-ease, ease-in-out) infinite; }
.fh-ef__orb--b { width: 70px; height: 70px; top: 68%; left: 50%; opacity: 0.6; animation: fh-orb-b 22s var(--fh-ease, ease-in-out) infinite; }
.fh-ef__orb--c { width: 58px; height: 58px; top: 26%; left: 70%; opacity: 0.5; animation: fh-orb-c 17s var(--fh-ease, ease-in-out) infinite; }
.fh-ef__orb--d { width: 44px; height: 44px; top: 84%; left: 24%; opacity: 0.42; animation: fh-orb-d 25s var(--fh-ease, ease-in-out) infinite; }
@keyframes fh-orb-lead {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); }
	33% { transform: translate3d(-14px, -18px, 0) rotate(2deg); }
	66% { transform: translate3d(10px, 12px, 0) rotate(5deg); }
}
@keyframes fh-orb-a {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(4deg); }
	50% { transform: translate3d(16px, -22px, 0) rotate(-5deg); }
}
@keyframes fh-orb-b {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(-6deg); }
	40% { transform: translate3d(-18px, -14px, 0) rotate(3deg); }
	75% { transform: translate3d(8px, -26px, 0) rotate(-2deg); }
}
@keyframes fh-orb-c {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(2deg); }
	50% { transform: translate3d(-12px, 20px, 0) rotate(-6deg); }
}
@keyframes fh-orb-d {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
	50% { transform: translate3d(14px, -16px, 0) rotate(6deg); }
}
/* Text column stops well short of the field, so nothing can collide. */
@media (min-width: 860px) {
	.fh-ef--category .fh-ef__content { max-width: 54%; }
	.fh-ef--category .fh-ef__titlerow .fh-ef__emblem { display: none; }
}
@media (max-width: 859px) {
	.fh-ef__emblemfield { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.fh-ef__orb { animation: none !important; }
}

/* Governor states for the drifting emblem field (site/emblem-field.js).
   .is-paused halts an animating orb; .is-static is an orb beyond the
   documented concurrency cap (never animates); .is-idle releases the
   compositor hint when the whole field is offscreen or the tab is hidden. */
.fh-ef__orb.is-paused { animation-play-state: paused; }
.fh-ef__orb.is-static { animation: none !important; will-change: auto; }
.fh-ef__emblemfield.is-idle .fh-ef__orb { will-change: auto; }

/* Category kicker accent — the per-category accent arrives as a custom property
   (never an inline `color`, which would outrank every theme rule and strand
   the kicker at 3.8:1 on the dark presets). Dark moods rebind to the lifted
   tint so the same accent stays legible on a near-black hero. */
.fh-ef__kicker { color: var(--fh-cat-accent, var(--fh-pink)); }
[data-fh-theme="midnight-pulse"] .fh-ef__kicker,
[data-fh-theme="split-current"] .fh-ef__kicker { color: var(--fh-cat-accent-lift, #7FE3FF); }
/* Keep the smallest drifting orb clear of the field's clipped bottom edge:
   at 84% its 44px body straddled the boundary and sliced in half at drift. */
.fh-ef__orb--d { top: 72%; }

/* Emblems inside inline category pills (card pills, footer Explore, gateway and
   search chips). Sized off the pill's own cap height so the pill never grows,
   and given a hair of optical separation from the label. */
.fh-pill .fh-topic-emblem,
.fh-footer__col a .fh-topic-emblem,
.fh-gateway__pill .fh-topic-emblem,
.fh-chip .fh-topic-emblem { width: 15px; height: 15px; flex: 0 0 auto; margin-right: 5px; vertical-align: -2px; }
.fh-footer__col a { display: inline-flex; align-items: center; }

/* The category emblem lives BESIDE the category name at every width. An earlier
   pass hid it above 860px in favour of a scattered orb field; the founder asked
   twice for it next to the name, so desktop shows the inline emblem and the
   field keeps only its single lead object (no duplicate copies of the same
   emblem drifting behind the text). */
.fh-ef--category .fh-ef__titlerow .fh-ef__emblem { display: flex !important; }
.fh-ef--category .fh-ef__orb--a,
.fh-ef--category .fh-ef__orb--b,
.fh-ef--category .fh-ef__orb--c,
.fh-ef--category .fh-ef__orb--d { display: none; }

/* ============================================================================
   HGN photo system — Liquid Glass photo portal, King stacks, stack stream.
   The portal is an editorial OBJECT inside the approved design: it never
   replaces the Energy Field. The portal's own padding is the field perimeter,
   so the living layer stays visible around the photo on both viewports
   (desktop target 8-14% environmental presence; mobile >= 16px readable field).
   ========================================================================= */
.fh-ef--portal { min-height: 0; }
.fh-ef--portal .fh-ef__content { display: block; max-width: none; padding: 30px; }
@media (max-width: 700px) { .fh-ef--portal .fh-ef__content { padding: 18px; } }

.fh-portal { margin: 0; position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(160deg, rgba(255,255,255,0.42), rgba(46,197,255,0.08)); border: 1px solid rgba(255,255,255,0.55); box-shadow: 0 30px 68px -32px rgba(11,27,51,0.55), inset 0 1px 0 rgba(255,255,255,0.85); }
[data-fh-theme="midnight-pulse"] .fh-portal, [data-fh-theme="split-current"] .fh-portal { border-color: rgba(255,255,255,0.22); background: linear-gradient(160deg, rgba(46,197,255,0.14), rgba(255,61,166,0.10)); box-shadow: 0 30px 68px -30px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.28); }
/* The glass may refract at the media EDGE only — never across the subject, so
   it can't tint skin, fog the face or cost legibility. */
.fh-portal::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35), inset 0 26px 40px -34px rgba(255,255,255,0.9), inset 0 -30px 46px -36px rgba(9,119,170,0.5); }
.fh-portal__pic { display: block; }
/* Ratio matches the source (2000x1499) so the protected subject - face, torso,
   kneeling pose, footwear - is never cropped; the left negative space is used
   deliberately, as the FitHaven brief directs. */
.fh-portal__pic img { display: block; width: 100%; height: 100%; aspect-ratio: 2000 / 1499; object-fit: cover; object-position: calc(var(--fh-focal-x, 0.5) * 100%) calc(var(--fh-focal-y, 0.5) * 100%); background: var(--fh-surface-2, #EFE7E1); }
/* Mobile art direction: horizontal-only crop at 5:4 pulls the right-weighted
   subject larger without touching face or footwear. */
@media (max-width: 700px) { .fh-portal__pic img { aspect-ratio: 5 / 4; object-position: calc(var(--fh-focal-x-m, var(--fh-focal-x, 0.5)) * 100%) calc(var(--fh-focal-y-m, var(--fh-focal-y, 0.5)) * 100%); } }
.fh-portal[data-fit="contain"] .fh-portal__pic img { object-fit: contain; }
.fh-portal__cap { padding: 12px 16px 14px; font-size: 0.86rem; line-height: 1.45; color: var(--fh-ink-soft); background: var(--fh-panel, var(--surface-card, #FFFFFF)); border-top: 1px solid var(--fh-line); }
.fh-portal__credit { display: block; margin-top: 3px; font-size: 0.78rem; color: var(--fh-muted); }
/* Failed derivative: hold the reserved frame, never collapse the layout. */
.fh-portal__pic img[data-fh-broken] { object-fit: contain; padding: 12%; opacity: 0.5; }

/* Card media carrying this asset keeps the source ratio for the same reason. */
.fh-card__media--portal { aspect-ratio: 2000 / 1499; }
.fh-card__media--portal img { width: 100%; height: 100%; object-fit: cover; object-position: calc(var(--fh-focal-x, 0.5) * 100%) calc(var(--fh-focal-y, 0.5) * 100%); display: block; }
@media (max-width: 700px) { .fh-card__media--portal { aspect-ratio: 5 / 4; } .fh-card__media--portal img { object-position: calc(var(--fh-focal-x-m, 0.5) * 100%) calc(var(--fh-focal-y-m, 0.5) * 100%); } }

/* ---- King stacks: static editorial prominence, never a roving hero ---- */
.fh-king { margin: 26px 0 6px; }
.fh-king__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.fh-king__title { font-family: var(--fh-font-head); font-size: clamp(1.15rem, 2.4vw, 1.5rem); margin: 0; letter-spacing: -0.01em; }
.fh-king__mode { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--fh-muted); border: 1px solid var(--fh-line); border-radius: 999px; padding: 4px 11px; background: var(--fh-panel, var(--surface-card, #FFFFFF)); }
.fh-king__stack { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
@media (max-width: 700px) { .fh-king__stack { grid-template-columns: 1fr; gap: 14px; } }

/* ---- Stack stream: batched reveal, no infinite scroll ---- */
.fh-stream__more { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 26px 0 6px; }
.fh-stream__count { font-size: 0.82rem; color: var(--fh-muted); }
.fh-stream__btn { min-height: 48px; padding: 13px 30px; border-radius: 999px; border: 1px solid var(--fh-line); background: var(--fh-grad); color: #fff; font-family: var(--fh-font-head); font-size: 1rem; cursor: pointer; box-shadow: 0 14px 30px -18px rgba(9,119,170,0.7); }
.fh-stream__btn:hover { filter: brightness(1.05); }
.fh-stream__btn:focus-visible { outline: 3px solid var(--fh-blue); outline-offset: 3px; }
.fh-stream__btn[hidden] { display: none; }
.fh-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 22px 0 4px; }
.fh-pager a, .fh-pager span { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 13px; border-radius: 12px; border: 1px solid var(--fh-line); background: var(--fh-panel, var(--surface-card, #FFFFFF)); font-size: 0.92rem; text-decoration: none; color: var(--fh-ink); }
.fh-pager [aria-current="page"] { background: var(--fh-grad); color: #fff; border-color: transparent; }
.fh-stream__item[hidden] { display: none; }

/* ---------- Masthead grid: single centered column, no stale flank cells ----------
   The approved masthead is one centered column (Store/Quiz/Join/Search live in
   the actionbar below). Older rules in fithaven-core.css still describe the
   retired 3-column flanked header — at >=640px they pull .fh-masthead__left and
   __right into grid-row 1, which is the SAME cell the brand occupies once the
   grid collapses to one column. That is a guaranteed overlap: the logo lands on
   top of the Fitness Quiz pill and the social row.
   Fix the cascade, not the pixel: any masthead flank that still exists is given
   its own row beneath the brand. fithaven-features.css is imported after
   fithaven-core.css, so these later rules win at equal specificity, and the
   <=639px block re-declares .fh-masthead__inner as flex, where grid placement
   is ignored entirely. */
.fh-masthead__brand { grid-column: 1; grid-row: 1; justify-self: center; }
.fh-masthead__left { grid-column: 1; grid-row: 2; justify-self: center; justify-content: center; flex-direction: row; align-items: center; }
.fh-masthead__right { grid-column: 1; grid-row: 3; justify-self: center; justify-content: center; flex-direction: row; align-items: center; }

/* ---------- Token correction: --fh-surface was never defined ----------
   The photo caption strip, King stack mode chip and pager controls were
   authored against --fh-surface, which does not exist in this design system
   (the real names are --fh-panel / --surface-card). An undefined custom
   property with no fallback resolves to nothing, so these filled controls
   painted fully transparent. Fallbacks are supplied so an undefined name can
   never silently paint nothing again. */
.fh-portal__cap { background: var(--fh-panel, var(--surface-card, #FFFFFF)); }
.fh-king__mode { background: var(--fh-panel, var(--surface-card, #FFFFFF)); }
.fh-pager a,
.fh-pager span { background: var(--fh-panel, var(--surface-card, #FFFFFF)); }

/* =========================================================================
   FOUNDER LOCK — Store / Fitness Quiz / Join FitHaven / Search live in the
   TOP HEADER, flanking the logo. They relocate to the priority band ONLY when
   a Jumbotron sponsorship is running.

   What was wrong: an earlier pass gave .fh-masthead__left grid-row 2 and
   __right grid-row 3 — stacking them UNDER the brand, which reads as an
   unapproved secondary tab bar. (That pass was fixing a genuine overlap:
   core.css put both flanks in row 1 while the grid was ONE column, so they
   landed in the brand's cell.) The correct fix is not to move them down — it is
   to give the desktop masthead three real columns, so row 1 can hold
   left | brand | right with nothing sharing a cell.
   ========================================================================= */
@media (min-width: 860px) {
 .fh-masthead__inner{
  display:grid;
  grid-template-columns:minmax(0,auto) minmax(0,1fr) minmax(0,auto);
  grid-template-rows:auto;
  align-items:center;column-gap:22px;
 }
 .fh-masthead__left {grid-column:1;grid-row:1;justify-self:start;align-self:center;
  display:flex;flex-direction:column;align-items:flex-start;gap:10px}
 .fh-masthead__brand{grid-column:2;grid-row:1;justify-self:center;align-self:center}
 .fh-masthead__right{grid-column:3;grid-row:1;justify-self:end;align-self:center;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px}
 .fh-masthead__right .fh-masthead__actions{display:flex;align-items:center;gap:12px}
}

/* The priority band is NOT part of the approved default header. It exists only
   as the destination for the header actions when the Jumbotron zone is sold —
   markup stays in place so the sold state needs no DOM surgery and no layout
   shift, it is simply not rendered until a campaign is live. */
.fh-actionbar{display:none}
[data-fh-jumbotron="active"] .fh-actionbar,
.fh-jumbotron-active .fh-actionbar{display:block}

/* Jumbotron SOLD: the sponsor creative takes the identity zone, so the on-site
   actions vacate the header flanks and appear in the band instead. They are
   never duplicated — exactly one instance is rendered in either state. */
[data-fh-jumbotron="active"] .fh-masthead__left .fh-quicklinks,
[data-fh-jumbotron="active"] .fh-masthead__right .fh-masthead__actions{display:none}
[data-fh-jumbotron="active"] .fh-masthead__left{gap:0}

/* The hidden face must leave the TAB ORDER, not just the AT tree.
   .fh-flipcard__face carries display:flex, which outranks the [hidden]
   attribute's UA display:none — so a resting card kept a real 283x496 layout
   box and both its "Back To Front" button and "Read the Full Story" link stayed
   focusable. A keyboard user hit 2 phantom stops per card (~212 on the
   homepage) and could activate the CTA on a card that looked un-flipped.
   This is the identical fix already shipped for the vote system as
   .hh-flipcard--ff .hh-face[hidden]{display:none}; it was never applied to this
   selector. flip-card.js clears [hidden] on BOTH faces for the duration of the
   turn, so the 3D animation window is untouched — only the resting state is
   corrected. A chars-announced check passes while a face is still focusable,
   which is why this survived the earlier pass: assert with a focus probe. */
.fh-flipcard .fh-flipcard__face[hidden]{display:none !important}

/* Energy Field grab affordance. touch-action pan-y keeps vertical page scroll
   free on touch; a horizontal drag on a cell manipulates the cell (the
   non-passive pointerdown calls preventDefault only when a cell is hit). */
fh-energy-field canvas{cursor:grab;touch-action:pan-y pinch-zoom}
.fh-ef--grabbing, .fh-ef--grabbing fh-energy-field canvas{cursor:grabbing}

/* =========================================================================
   FITHAVEN KINETIC ENERGY FLIPSHOW — article-width flipper-book.
   Scope-locked: every selector is .fh-fs*; nothing outside the Flipshow.

   LAWS INHERITED FROM THE APPROVED HAVEN FLIP SYSTEMS
   - [hidden] is authoritative: a hidden leaf leaves layout, paint, the a11y
     tree AND the tab order (the .fh-flipcard lesson, applied from day one).
   - No-JS fallback IS the full feature: without flipshow.js the slides render
     as a stacked editorial gallery; JS (html[data-fs-js]) opts into book mode.
   - The turn is a hinged page (rotateY at the left spine), not a fade.
   - Reduced motion: instant swap, static luminous edge, zero turn animation.
   PHOTO CONTRACT (located, not invented — see docs/FITHAVEN_FLIPSHOW.md):
   portal ratio 2000/1499 desktop · 5/4 mobile horizontal-only crop · focal
   via --fh-focal-x/y (+-m variants) · contain mode for portrait/square so no
   subject is ever machine-cropped · caption/credit on a panel strip, never
   over photography.
   ========================================================================= */
.fh-fs { margin: 26px 0 30px; }
.fh-fs__frame { position: relative; border-radius: 20px; border: 1px solid var(--fh-line-strong); background: var(--fh-panel); box-shadow: var(--fh-shadow); }
/* Kinetic Energy rim — restrained, at the frame edge only, never over media.
   Static by design so reduced-motion needs no substitute frame. */
.fh-fs__frame::before { content: ""; position: absolute; inset: -1px; border-radius: 21px; padding: 1px; background: linear-gradient(135deg, var(--fh-blue) 0%, transparent 34%, transparent 66%, var(--fh-pink) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; opacity: 0.55; }
[data-fh-theme="midnight-pulse"] .fh-fs__frame, [data-fh-theme="split-current"] .fh-fs__frame { border-color: rgba(255,255,255,0.2); }
/* ---- No-JS / pre-boot: honest stacked gallery ---- */
.fh-fs__leaves { list-style: none; margin: 0; padding: 0; }
.fh-fs__slide { border-top: 1px solid var(--fh-line); }
.fh-fs__slide:first-child { border-top: 0; }
/* ---- Book mode (JS present) ---- */
html[data-fs-js] .fh-fs__book { position: relative; perspective: 1600px; }
html[data-fs-js] .fh-fs__leaves { position: relative; }
html[data-fs-js] .fh-fs__slide { border-top: 0; }
html[data-fs-js] .fh-fs__slide[hidden] { display: none !important; }
/* The turning leaf: outgoing page hinged at the left spine. Both faces are
   legitimately visible mid-turn; resting state is exactly one leaf. */
html[data-fs-js] .fh-fs__slide.fh-fs__slide--turning { position: absolute; inset: 0; z-index: 2; transform-origin: left center; backface-visibility: hidden; animation: fh-fs-turn 0.38s cubic-bezier(0.3, 0, 0.2, 1) forwards; background: var(--fh-panel); border-radius: 20px; overflow: hidden; box-shadow: 12px 0 28px rgba(10, 14, 26, 0.18); }
html[data-fs-js] .fh-fs__slide.fh-fs__slide--turning-back { animation-name: fh-fs-turn-back; }
@keyframes fh-fs-turn { from { transform: rotateY(0deg); } to { transform: rotateY(-102deg); opacity: 0.92; } }
@keyframes fh-fs-turn-back { from { transform: rotateY(-102deg); opacity: 0.92; } to { transform: rotateY(0deg); } }
/* Hinge pulse after a COMPLETED flip — a contained current along the spine.
   Cosmetic only; added/removed by timers, never load-bearing. */
.fh-fs__hinge { position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--fh-blue), var(--fh-pink)); opacity: 0.35; pointer-events: none; }
.fh-fs--pulse .fh-fs__hinge { opacity: 0.9; box-shadow: 0 0 14px 2px rgba(46, 197, 255, 0.4); }
@media (prefers-reduced-motion: reduce) {
	html[data-fs-js] .fh-fs__slide.fh-fs__slide--turning, html[data-fs-js] .fh-fs__slide.fh-fs__slide--turning-back { animation: none; position: static; box-shadow: none; }
	.fh-fs--pulse .fh-fs__hinge { box-shadow: none; }
}
/* ---- Media stage: the located contract, verbatim ---- */
.fh-fs__stage { margin: 0; position: relative; background: var(--fh-panel-2); border-radius: 20px 20px 0 0; overflow: hidden; }
.fh-fs__stage img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: calc(var(--fh-focal-x, 0.5) * 100%) calc(var(--fh-focal-y, 0.5) * 100%); }
.fh-fs__stage[data-shape="landscape"] { aspect-ratio: 2000 / 1499; }
/* Portrait + approved square: CONTAIN on a panel — the subject is never
   machine-cropped to force a landscape fill (photo-dimension gate). */
.fh-fs__stage[data-shape="portrait"], .fh-fs__stage[data-shape="square"] { aspect-ratio: 2000 / 1499; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, rgba(46,197,255,0.07), rgba(255,61,167,0.06)), var(--fh-panel-2); }
.fh-fs__stage[data-shape="portrait"] img { width: auto; max-width: 62%; height: 100%; object-fit: contain; }
.fh-fs__stage[data-shape="square"] img { width: auto; max-width: 74%; height: 100%; object-fit: contain; }
@media (max-width: 700px) { .fh-fs__stage[data-shape="landscape"] { aspect-ratio: 5 / 4; } .fh-fs__stage[data-shape="landscape"] img { object-position: calc(var(--fh-focal-x-m, var(--fh-focal-x, 0.5)) * 100%) calc(var(--fh-focal-y-m, var(--fh-focal-y, 0.5)) * 100%); } .fh-fs__stage[data-shape="portrait"] img { max-width: 78%; } .fh-fs__stage[data-shape="square"] img { max-width: 88%; } }
/* Missing image: designed text-first fallback, reserved at the same ratio —
   no broken-image icon, no height change when nothing loads. */
.fh-fs__stage[data-shape="missing"] { aspect-ratio: 2000 / 1499; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg, var(--fh-panel-2) 0 18px, var(--fh-panel) 18px 36px); }
.fh-fs__missing { text-align: center; padding: 20px; max-width: 46ch; }
.fh-fs__missing b { display: block; font-family: var(--fh-font-head); font-size: 15px; margin-bottom: 4px; }
.fh-fs__missing span { font-size: 13px; color: var(--fh-muted); }
@media (max-width: 700px) { .fh-fs__stage[data-shape="missing"] { aspect-ratio: 5 / 4; } }
/* Text-only slide */
.fh-fs__slide--text .fh-fs__stage { display: none; }
.fh-fs__slide--text .fh-fs__strip { border-radius: 20px 20px 0 0; padding-top: 34px; }
.fh-fs__quote { font-family: var(--fh-font-head); font-size: clamp(19px, 2.6vw, 26px); line-height: 1.3; margin: 0 0 10px; }
/* Final CTA slide */
.fh-fs__slide--cta .fh-fs__strip { text-align: center; padding: 40px 22px 42px; border-radius: 20px; }
.fh-fs__cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
/* ---- Copy strip: text NEVER floats over photography ---- */
.fh-fs__strip { padding: 16px 20px 18px; background: var(--fh-panel); border-radius: 0 0 20px 20px; }
.fh-fs__kicker { font-family: var(--fh-font-head); text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; font-weight: 900; color: var(--fh-blue); margin: 0 0 6px; }
.fh-fs__headline { font-family: var(--fh-font-head); font-size: clamp(17px, 2.2vw, 22px); line-height: 1.2; margin: 0 0 6px; }
.fh-fs__copy { font-size: 14.5px; line-height: 1.55; color: var(--fh-ink-soft); margin: 0 0 10px; }
.fh-fs__credit { font-size: 12px; color: var(--fh-muted); margin: 0; }
.fh-fs__credit a { color: inherit; }
.fh-fs__link { display: inline-block; margin: 8px 0 2px; font-weight: 700; font-size: 14px; }
/* ---- Navigation: two unmistakable Haven pills + count + direct menu ---- */
.fh-fs__nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.fh-fs__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 20px; border-radius: 999px; border: 1px solid var(--fh-line-strong); background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0)) , var(--fh-panel); font-family: var(--fh-font-head); font-weight: 800; font-size: 14px; color: var(--fh-ink); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 2px 6px rgba(10,14,26,0.08); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.fh-fs__btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 5px 12px rgba(10,14,26,0.14); }
.fh-fs__btn:active:not(:disabled) { transform: translateY(0) scale(0.98); }
.fh-fs__btn:focus-visible { outline: 3px solid var(--fh-blue); outline-offset: 3px; }
.fh-fs__btn:disabled { opacity: 0.42; cursor: not-allowed; }
.fh-fs__btn--next { margin-left: auto; }
[data-fh-theme="midnight-pulse"] .fh-fs__btn, [data-fh-theme="split-current"] .fh-fs__btn { background: var(--fh-panel); box-shadow: none; }
.fh-fs__count { font-family: var(--fh-font-head); font-size: 13px; font-weight: 700; color: var(--fh-ink-soft); }
/* Direct-slide menu: numbered, 44px targets, active state obvious */
.fh-fs__menu { display: flex; gap: 4px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.fh-fs__dot { min-width: 44px; min-height: 44px; padding: 0; border-radius: 10px; border: 1px solid var(--fh-line); background: transparent; font-family: var(--fh-font-head); font-weight: 800; font-size: 13px; color: var(--fh-ink-soft); cursor: pointer; }
.fh-fs__dot:hover { border-color: var(--fh-line-strong); }
.fh-fs__dot:focus-visible { outline: 3px solid var(--fh-blue); outline-offset: 2px; }
.fh-fs__dot[aria-current="true"] { background: linear-gradient(135deg, var(--fh-blue), var(--fh-pink)); color: #fff; border-color: transparent; }
@media (max-width: 700px) {
	.fh-fs__nav { gap: 8px; }
	.fh-fs__btn { padding: 10px 16px; }
	.fh-fs__menu { order: 3; width: 100%; }
	.fh-fs__count { order: 2; margin-left: auto; }
	.fh-fs__btn--next { margin-left: 0; }
}
.fh-fs__sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* =========================================================================
   FITHAVEN ENERGY PLAY — reader physics layer (fh-ep-* namespace ONLY).
   Everything here is scoped to the play layer; nothing restyles approved UI.
   At rest the page is pixel-identical: the layer is absolutely positioned,
   paints nothing, and the Reset pill exists only after the reader has played.
   ========================================================================= */
.fh-ep-layer { position: absolute; z-index: 3; pointer-events: none; isolation: isolate; contain: layout; }
.fh-ep-fx { position: absolute; inset: 0; pointer-events: none; }
/* The accessible handle: transparent control over the emblem. It carries the
   pointer + keyboard interaction; the emblem artwork itself stays decorative. */
.fh-ep-handle { position: absolute; min-width: 44px; min-height: 44px; padding: 0; margin: 0; border: 0; border-radius: 50%; background: transparent; pointer-events: auto; cursor: grab; touch-action: none; }
.fh-ep-handle:focus-visible { outline: 3px solid var(--fh-blue); outline-offset: 4px; }
.fh-ep-handle.fh-ep-held { cursor: grabbing; }
/* Reset pill: appears only once physics has claimed the emblem, sits inside
   the field's bottom-right corner, moves nothing around it. */
.fh-ep-reset { position: absolute; right: 10px; bottom: 10px; display: none; align-items: center; min-height: 30px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--fh-line-strong); background: var(--fh-panel); font-family: var(--fh-font-head); font-weight: 800; font-size: 11.5px; color: var(--fh-ink-soft); pointer-events: auto; cursor: pointer; box-shadow: 0 2px 6px rgba(10, 14, 26, 0.12); }
.fh-ep-layer.fh-ep-active .fh-ep-reset { display: inline-flex; }
.fh-ep-reset:hover { color: var(--fh-ink); }
.fh-ep-reset:focus-visible { outline: 3px solid var(--fh-blue); outline-offset: 2px; }
.fh-ep-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* QA overlays — default OFF, enabled only by ?epqa=1 (never reader-visible) */
.fh-ep-qa-rect { position: absolute; border: 1px dashed var(--fh-pink); pointer-events: none; display: none; }
.fh-ep-qa-hud { position: absolute; left: 10px; bottom: 10px; display: none; font-family: var(--fh-mono, monospace); font-size: 11px; padding: 4px 8px; border-radius: 6px; background: rgba(8, 12, 20, 0.82); color: #fff; pointer-events: none; }
.fh-ep-qa .fh-ep-qa-rect, .fh-ep-qa .fh-ep-qa-hud { display: block; }
@media (prefers-reduced-motion: reduce) { .fh-ep-handle { cursor: pointer; } }

/* =========================================================================
   FITHAVEN HAVENFLIP — physical, numberless editorial flip book.
   Namespace lock: every selector begins .fh-havenflip. No global transform,
   perspective, overflow, touch-action or pointer suppression; no broad .card /
   .page / .media / .flip / .active selectors; no shared z-index tokens.
   The book owns its own stacking + perspective + clipping context so a moving
   sheet can never paint across the Energy Field, masthead, sidebar or copy.
   ========================================================================= */
.fh-havenflip { margin: 26px 0 30px; position: relative; isolation: isolate; z-index: 0; }
.fh-havenflip__book { position: relative; perspective: 1800px; perspective-origin: 50% 45%; overflow: hidden; border-radius: 20px; border: 1px solid var(--fh-line-strong); background: var(--fh-panel); box-shadow: var(--fh-shadow); contain: layout paint; touch-action: pan-y; }
.fh-havenflip--dragging .fh-havenflip__book { touch-action: none; }
/* Signature edge: FitHaven blue→pink, frame only — never over media. */
.fh-havenflip__book::before { content: ""; position: absolute; inset: 0; border-radius: 20px; padding: 1px; background: linear-gradient(135deg, var(--fh-blue) 0%, transparent 36%, transparent 64%, var(--fh-pink) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; opacity: 0.5; z-index: 5; }
/* The stack is a GRID so the in-flow leaf stretches to the enforced page height.
   A block leaf sized itself to its content (198px inside a 778px page), leaving
   media-less leaves ~75% empty. `min-height:100%` on the leaf cannot work here —
   the stack's *specified* height is auto (its size comes from min-height), so the
   percentage never resolves — and flex `align-items:stretch` is cross-axis only.
   Grid stretches on both axes; the stack stays position:relative so the
   absolutely-positioned turning sheet is unaffected. */
.fh-havenflip__stack { position: relative; display: grid; transform-style: preserve-3d; }
/* Leaf as a column: fixed-ratio media keeps its size, the copy strip claims the
   remainder and centres its content, so a text-only leaf reads as a full page
   rather than a top-pinned fragment above a void. */
/* ONE PAGE SIZE, WITH NO JS AND NO RACE.
   Every leaf occupies the same grid cell, so the row auto-sizes to the TALLEST
   leaf and each leaf stretches to it — a bound book's single page size, resolved
   by layout itself.
   A hidden leaf keeps its box (display:flex) and is hidden with visibility, which
   still removes it from the accessibility tree AND the tab order and makes it
   receive no pointer events — so the inertness requirement is preserved while the
   leaf continues to contribute its height to the row. `display:none` cannot do
   this: it removes the box, so the row could only be sized by measuring in JS.
   That measurement went through three rounds of timing races (boot-before-layout,
   starved ResizeObserver callbacks, a bounded retry chain that gave up after
   ~11.7s and left the page size unset indefinitely). CSS has no such window. */
.fh-havenflip__leaf { grid-area: 1 / 1; display: flex; flex-direction: column; background: var(--fh-panel); border-radius: 20px; backface-visibility: hidden; }
.fh-havenflip__leaf[hidden] { display: flex !important; visibility: hidden; }
.fh-havenflip__leaf:not([hidden]) { visibility: visible; }
.fh-havenflip__media, .fh-havenflip__embed { flex: 0 0 auto; }
/* The turning sheet leaves the grid flow entirely. */
/* The destination leaf stays IN FLOW so it defines the stack height for the
   whole turn — it only needs to sit beneath the sheet. Making it absolute too
   left the stack with zero in-flow children, collapsing the book from 778px to
   0 and shifting the page 778px on every single flip (worst while a reader is
   holding the sheet). This is also the physically correct model: the destination
   sits in flow, the sheet lifts above it. Works unchanged for the backward turn,
   where beginTurn() swaps which element carries which class. */
.fh-havenflip__leaf--under { position: relative; z-index: 1; }
.fh-havenflip__leaf--sheet { position: absolute; inset: 0; z-index: 3; transform-origin: left center; will-change: transform; box-shadow: 14px 0 34px rgba(10, 14, 26, 0.22); }
.fh-havenflip__leaf--settling { transition: transform 0.34s cubic-bezier(0.32, 0, 0.22, 1); }
/* Fold shadow + paper depth, attached to the moving sheet itself. */
.fh-havenflip__leaf--sheet::after { content: ""; position: absolute; inset: 0; border-radius: 20px; pointer-events: none; background: linear-gradient(to right, rgba(10, 14, 26, 0.42) 0%, rgba(10, 14, 26, 0.06) 14%, rgba(255, 255, 255, 0.16) 52%, rgba(10, 14, 26, 0.1) 100%); opacity: var(--fh-hf-fold, 0); }
/* Invisible edge zones. pointer-events:none is deliberate and load-bearing:
   these sit at z-index 4 over the whole leaf, and on a leaf with no embed the
   band resolved to full height and swallowed clicks on the copy strip's own
   controls — 19% of "Read The Full Story" turned the page backwards instead of
   navigating. z-index cannot fix it (the stack's preserve-3d makes it a stacking
   context, so no descendant can rise above the sibling edge). Hit-testing is
   therefore done by COORDINATE on the book, which lets real interactive content
   win by default rather than by enumeration. The buttons remain for focus,
   keyboard operation, aria-labels and disabled state.
   --fh-hf-edge-top still keeps the band clear of an embedded player. */
.fh-havenflip__edge { position: absolute; top: var(--fh-hf-edge-top, 0px); bottom: 0; width: 56px; z-index: 4; padding: 0; margin: 0; border: 0; background: transparent; pointer-events: none; cursor: grab; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.fh-havenflip__edge--next { right: 0; }
.fh-havenflip__edge--prev { left: 0; }
.fh-havenflip__edge:disabled { cursor: default; }
.fh-havenflip__edge:focus-visible { outline: 3px solid var(--fh-blue); outline-offset: -4px; border-radius: 18px; }
.fh-havenflip--dragging .fh-havenflip__edge { cursor: grabbing; touch-action: none; }
/* A resting hint only — no numbers, no dots, no arrows, no progress bar. */
.fh-havenflip__hint { display: flex; align-items: center; gap: 7px; margin: 10px 2px 0; font-family: var(--fh-font-head); font-size: 11.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fh-muted); }
.fh-havenflip__hint svg { flex: 0 0 auto; opacity: 0.75; }
/* ---- Leaf content ---- */
.fh-havenflip__media { position: relative; margin: 0; background: var(--fh-panel-2); border-radius: 20px 20px 0 0; overflow: hidden; aspect-ratio: 2000 / 1499; }
.fh-havenflip__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: calc(var(--fh-focal-x, 0.5) * 100%) calc(var(--fh-focal-y, 0.5) * 100%); }
/* Embed centre owns player input only; it never reaches an edge zone. */
.fh-havenflip__embed { position: relative; margin: 0; background: var(--fh-panel-2); border-radius: 20px 20px 0 0; overflow: hidden; }
.fh-havenflip__embed iframe { display: block; width: 100%; border: 0; }
.fh-havenflip__embed--audio { aspect-ratio: auto; }
.fh-havenflip__embed--audio iframe { height: 152px; }
.fh-havenflip__embed--video { aspect-ratio: 16 / 9; }
.fh-havenflip__embed--video iframe { height: 100%; }
.fh-havenflip__embed--tall iframe { height: 352px; }
.fh-havenflip__strip { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 16px 20px 20px; }
.fh-havenflip__kicker { font-family: var(--fh-font-head); text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; font-weight: 900; color: var(--fh-blue); margin: 0 0 6px; }
.fh-havenflip__title { font-family: var(--fh-font-head); font-size: clamp(17px, 2.2vw, 23px); line-height: 1.2; margin: 0 0 7px; }
.fh-havenflip__copy { font-size: 14.5px; line-height: 1.55; color: var(--fh-ink-soft); margin: 0 0 10px; }
.fh-havenflip__credit { font-size: 12px; color: var(--fh-muted); margin: 0; }
.fh-havenflip__read { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 20px; margin-top: 4px; border-radius: 999px; border: 1px solid transparent; background: linear-gradient(135deg, var(--fh-blue), var(--fh-pink)); color: #fff; font-family: var(--fh-font-head); font-weight: 800; font-size: 14px; text-decoration: none; }
.fh-havenflip__read:hover { color: #fff; filter: brightness(1.06); }
.fh-havenflip__read:focus-visible { outline: 3px solid var(--fh-blue); outline-offset: 3px; }
.fh-havenflip__fixture { display: inline-block; margin: 0 0 8px; padding: 4px 10px; border-radius: 6px; border: 1px dashed var(--fh-pink); font-family: var(--fh-font-head); font-size: 10.5px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fh-pink); }
.fh-havenflip__sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .fh-havenflip__leaf--settling { transition-duration: 0.01s; } }
@media (max-width: 700px) { .fh-havenflip__media { aspect-ratio: 5 / 4; } .fh-havenflip__edge { width: 46px; } .fh-havenflip__strip { padding: 14px 16px 18px; } }