/**
 * 4Liberty Network — editorial effects layer.
 *
 * Everything here reads color from the theme.json custom-property tokens
 * (--wp--preset--color--*) rather than hard-coded hex, so an owner palette
 * change in Appearance ▸ Editor cascades into these components without a
 * code edit. This file exists only for effects theme.json truly can't
 * express: sticky blur, the live pulse, chat-rail layout, hover motion.
 */

:root {
	--fl-chrome: var(--wp--preset--gradient--chrome);
	--fl-gold-metal: var(--wp--preset--gradient--gold-metal);
	--fl-shadow-card: var(--wp--custom--shadow--card, 0 1px 2px rgba(0,0,0,.3), 0 8px 30px rgba(0,0,0,.34));
	--fl-radius-card: var(--wp--custom--radius--card, 14px);
	--fl-radius-pill: var(--wp--custom--radius--pill, 999px);
}

/* ---------- Long-word overflow guard ---------- */
/* A bare URL in a heading is one unbreakable word. The WP Discourse reply
   title ("Start the discussion at community.4libertynetwork.com") is the
   live case: 29 characters, no spaces or hyphens, so with the browser
   default of overflow-wrap:normal there is nowhere legal to break it. At
   the h3 size that single word demands 630px, while the mobile content
   column is ~331px — and since neither html nor body clips overflow-x,
   the excess widened the whole document's scroll width and made every
   post draggable sideways on phones. The markup is generated by the
   plugin on every post, so this has to be solved in CSS, not content.
   Found + first fixed 2026-07-27.

   NOTE: an identical fix also exists in Appearance ▸ Customize ▸
   Additional CSS, where it was originally written. That copy works, but
   it lives only in the database — not in this repo, invisible to anyone
   reading the theme, and silently lost on a DB restore. This is the
   durable home for it. Once this theme is uploaded, the Additional CSS
   box can be emptied so there is one source of truth. Until then both
   are active and set the same values, so they cannot conflict; if they
   ever disagree, THIS file wins (editorial.css loads after the
   global-styles block that Additional CSS is emitted into).

   overflow-wrap is declared twice on purpose. Older Safari understands
   `break-word` but not `anywhere`, so the first line is the fallback;
   `anywhere` wins where supported because it also collapses the
   element's min-content width (630px -> 37px here), which `break-word`
   leaves untouched and which is what keeps an oversized word from
   forcing flex/grid parents open. Body copy gets `break-word` only —
   it is the gentler of the two and, by not touching intrinsic sizing,
   cannot disturb the card grids. Verified 2026-07-27: applying this
   changes no measured box on the homepage. */
h1, h2, h3, h4, h5, h6,
.comment-reply-title,
.wpdc-discourse-topic-link {
	overflow-wrap: break-word;
	overflow-wrap: anywhere;
	word-break: break-word;
}
p, li, dd, blockquote, figcaption, td {
	overflow-wrap: break-word;
}

/* ---------- Live ticker ---------- */
.fl-ticker {
	background: var(--wp--preset--color--ink-raised);
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.74rem;
	color: var(--wp--preset--color--muted);
}
.fl-ticker__row {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 34px;
	overflow: hidden;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin: 0 auto;
	padding: 0 22px;
}
/* Same [hidden]-vs-class-display gotcha as .fl-account__form and
   .fl-showcard__live — assets/js/ticker.js toggles `hidden` based on real
   live status (2026-07-23), which a bare display:inline-flex rule would
   otherwise beat. */
.fl-live-tag[hidden] { display: none; }
.fl-live-tag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--wp--preset--color--red-bright);
	letter-spacing: .12em;
	text-transform: uppercase;
	font-size: .66rem;
	font-weight: 600;
	white-space: nowrap;
	flex: none;
}
.fl-pulse {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--red);
	box-shadow: 0 0 0 0 rgba(223,59,64,.5);
	animation: fl-pulse 2s infinite;
	flex: none;
}
@keyframes fl-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(223,59,64,.5); }
	70%  { box-shadow: 0 0 0 9px rgba(223,59,64,0); }
	100% { box-shadow: 0 0 0 0 rgba(223,59,64,0); }
}
.fl-ticker__feed { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.fl-ticker__feed b { color: var(--wp--preset--color--body-text); font-weight: 600; }

/* ---------- Masthead ---------- */
/* backdrop-filter deliberately lives on ::before, NOT on .fl-masthead itself.
   backdrop-filter (like filter/transform/perspective) makes the element it's
   set on become the CONTAINING BLOCK for any position:fixed descendant. The
   mobile nav's full-screen overlay (WordPress core's
   .wp-block-navigation__responsive-container, position:fixed; inset:0) lives
   inside this header in the DOM — with backdrop-filter directly on
   .fl-masthead, the overlay was trapped inside the ~73px header bar instead
   of covering the viewport, clipped to a sliver that only fit the first link
   ("Home") with the rest scrolled out of view. Moving the blur to a
   decoratve, non-containing-block ::before keeps the frosted-glass look
   without breaking the overlay. Bug found + fixed 2026-07-20 (Austin: "the
   hamburger menu doesn't show any of the old menu items just a home page").
*/
.fl-masthead {
	position: sticky;
	top: 0;
	z-index: 20;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.fl-masthead::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(15,13,21,.86);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.fl-masthead__row {
	align-items: center;
	gap: 26px;
	min-height: 72px;
	padding-block: 10px;
}
.fl-brand {
	align-items: center;
	gap: 11px;
	flex: none;
}
.fl-wordmark-link { text-decoration: none; display: inline-flex; align-items: center; }

/* Static primary nav (replaced the wp:navigation block 2026-07-23 — see
   parts/header.html for why). .fl-nav-toggle is the mobile hamburger, hidden
   on desktop and revealed by the media query below; assets/js/site.js flips
   .is-open on the menu. */
.fl-masthead__nav { flex: 1 1 auto; display: flex; align-items: center; }
.fl-nav-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 22px;
}
.fl-nav-menu a {
	font-size: .83rem;
	font-weight: 600;
	color: var(--wp--preset--color--body-text);
	text-decoration: none;
}
.fl-nav-menu a:hover { color: var(--wp--preset--color--gold); }
.fl-nav-menu a.fl-nav-shop {
	color: var(--wp--preset--color--gold);
	border: 1px solid var(--wp--preset--color--gold-deep);
	border-radius: var(--fl-radius-pill);
	padding: 6px 16px;
}
.fl-nav-menu a.fl-nav-shop:hover { background: rgba(230,186,87,.12); color: var(--wp--preset--color--gold); }
.fl-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: 1px solid var(--wp--preset--color--line-bright);
	border-radius: 8px;
	cursor: pointer;
}
.fl-nav-toggle__bar {
	display: block;
	width: 18px;
	height: 2px;
	margin: 0 auto;
	background: var(--wp--preset--color--headline);
	border-radius: 1px;
}
.fl-masthead__actions { align-items: center; gap: 14px; flex: none; }
.fl-wordmark {
	display: flex;
	align-items: center;
	gap: 11px;
	line-height: 1;
}
.fl-wordmark__main {
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 800;
	letter-spacing: .01em;
	font-size: 1.18rem;
	background: var(--fl-chrome);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 1px 0 rgba(0,0,0,.4));
}
.fl-wordmark__sub {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .56rem;
	letter-spacing: .32em;
	margin-top: 4px;
	background: var(--fl-gold-metal);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-weight: 600;
}
.fl-wordmark__sub::before,
.fl-wordmark__sub::after {
	content: "";
	height: 1px;
	width: 12px;
	background: var(--wp--preset--color--gold-deep);
	opacity: .8;
}
.fl-btn-support {
	background: var(--wp--preset--color--red) !important;
	color: #fff !important;
	font-weight: 700;
	font-size: .82rem;
	padding: 9px 16px !important;
	border-radius: 8px !important;
	box-shadow: 0 6px 18px rgba(223,59,64,.28);
}
.fl-btn-support:hover { background: var(--wp--preset--color--red-bright) !important; }

/* ---------- Hero / live player ---------- */
.fl-hero {
	padding: 26px 0 6px;
	background: var(--wp--preset--gradient--hero-glow);
}
.fl-hero-grid {
	display: grid;
	grid-template-columns: 1fr 344px;
	gap: 22px;
	align-items: start;
}
.fl-player {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line-bright);
	aspect-ratio: 16 / 9;
	background:
		radial-gradient(120% 90% at 30% 20%, #3a2340, #171019 70%),
		linear-gradient(160deg, #241633, #0f0b14);
}
.fl-player__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(9,7,12,.85) 4%, transparent 46%);
	pointer-events: none;
}
.fl-badge-live {
	position: absolute;
	top: 16px;
	left: 16px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--wp--preset--color--red);
	color: #fff;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .14em;
	padding: 6px 11px;
	border-radius: 6px;
	text-transform: uppercase;
	z-index: 2;
}
.fl-badge-live .fl-pulse { background: #fff; }
.fl-viewers {
	position: absolute;
	top: 18px;
	right: 16px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .7rem;
	color: #e9e3f2;
	background: rgba(9,7,12,.5);
	border: 1px solid var(--wp--preset--color--line-bright);
	padding: 5px 10px;
	border-radius: var(--fl-radius-pill);
	display: flex;
	gap: 7px;
	align-items: center;
	z-index: 2;
}
.fl-play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background: rgba(230,186,87,.16);
	border: 1.5px solid var(--wp--preset--color--gold);
	display: grid;
	place-items: center;
	backdrop-filter: blur(3px);
	cursor: pointer;
	transition: transform .18s, background .18s;
	z-index: 2;
}
.fl-play:hover { transform: scale(1.06); background: rgba(230,186,87,.26); }
.fl-play svg { width: 26px; height: 26px; margin-left: 4px; fill: var(--wp--preset--color--gold); }
.fl-player-meta {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 18px;
	z-index: 2;
	/* Live-blocking bug found & confirmed 2026-07-24 (Culturama's actual live
	   title ran long enough to reproduce it): this text block is bottom-
	   anchored with no max-height, so a long live title can wrap tall enough
	   to visually and functionally cover the centered .fl-play button, which
	   sits underneath it in the same stacking context. Every tap was landing
	   on this text (confirmed via elementFromPoint at the button's own
	   center), not the button — worse on mobile, where the much shorter
	   player height leaves far less clearance. This block is plain text with
	   no interactive children, so making it click-through is a safe, total
	   fix rather than a per-title workaround. */
	pointer-events: none;
}
.fl-player-meta__show {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .64rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin-bottom: 8px;
}
.fl-player-meta h1,
.fl-player-meta h2 {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 700;
	color: #fff;
	font-size: clamp(1.3rem, 2.6vw, 1.9rem);
	line-height: 1.1;
	margin: 0;
	text-wrap: balance;
	max-width: 80%;
}
.fl-player-meta__host { font-size: .82rem; color: #c9c2d6; margin-top: 8px; }

.fl-also-live { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }

/* Homepage ad block (2026-07-23) — fills the gap left by the taller chat
   rail next to it. Same rounded/bordered treatment as .fl-player above it so
   it reads as a natural continuation, not a bolted-on banner. object-fit:
   cover means any image Austin picks fills the 16:9 box without needing to
   be pre-cropped. */
.fl-shop-ad {
	display: block;
	margin-top: 14px;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line-bright);
	aspect-ratio: 16 / 9;
}
.fl-shop-ad img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fl-mini-live {
	flex: 1;
	min-width: 180px;
	display: flex;
	gap: 10px;
	align-items: center;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 11px;
	padding: 9px 11px;
	transition: border-color .15s;
	text-decoration: none;
}
.fl-mini-live:hover { border-color: var(--wp--preset--color--gold-deep); }
.fl-mini-live__thumb {
	width: 52px;
	height: 34px;
	border-radius: 6px;
	flex: none;
	background: linear-gradient(135deg,#33244a,#1a1226);
	position: relative;
	overflow: hidden;
}
.fl-mini-live__thumb::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 5px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wp--preset--color--red-bright);
}
.fl-mini-live__title { font-size: .78rem; color: var(--wp--preset--color--headline); font-weight: 600; line-height: 1.2; }
.fl-mini-live__sub {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .6rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-top: 3px;
}
/* "also live" tiles render as <button> when clickable (swap hero) vs <a> when
   gated (link out to Rumble) — this resets button chrome to match the <a>
   styling above. See assets/js/live-state.js renderAlsoLive(). */
button.fl-mini-live {
	border: 0;
	background: var(--wp--preset--color--surface);
	font: inherit;
	cursor: pointer;
	text-align: left;
}

/* ---------- Live state machine (Phase 2) ---------- */
/* Phase 1 shipped the badge/viewer-count always visible as an honest static
   stub. assets/js/live-state.js toggles .is-live on .fl-player once a show is
   actually live — hide them by default so the homepage never claims "Live"
   when nothing is on air (Decision 7: never mislead a visitor). */
.fl-badge-live,
.fl-viewers { display: none; }
.fl-player.is-live .fl-badge-live { display: inline-flex; }
.fl-player.is-live .fl-viewers { display: flex; }

/* Once a viewer presses play, live-state.js injects a .fl-player__frame
   iframe and adds .is-playing — hide the facade chrome so the video is
   unobstructed (badge/viewer-count stay visible, overlaid on the player). */
.fl-player__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1; }
.fl-player.is-playing .fl-player__scrim,
.fl-player.is-playing .fl-player-meta,
.fl-player.is-playing .fl-play { display: none; }

/* Gated broadcast (Decision 8, revised): a "Freedom Arcade"-style member-only
   stream never embeds — the CTA replaces the play button entirely. */
.fl-gated-cta {
	position: absolute;
	inset: 0;
	margin: auto;
	z-index: 3;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-align: center;
	padding: 0 24px;
}
.fl-player.is-gated .fl-gated-cta { display: flex; }
.fl-player.is-gated .fl-play { display: none; }
.fl-gated-cta__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .64rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #e9e3f2;
	background: rgba(9,7,12,.55);
	padding: 5px 12px;
	border-radius: var(--fl-radius-pill);
}
.fl-gated-cta__btn {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 800;
	font-size: .86rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	background: var(--wp--preset--color--gold);
	color: #1a130a;
	padding: 12px 22px;
	border-radius: 10px;
	text-decoration: none;
	box-shadow: 0 8px 22px rgba(230,186,87,.28);
	transition: transform .15s, background .15s;
}
.fl-gated-cta__btn:hover { transform: translateY(-1px); background: #f0c96c; }

/* "Just went live" banner (Decision 6) — never yanks a playing hero; offers
   the new show instead. Inserted above .fl-player only when needed. */
.fl-live-banner {
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(223,59,64,.12);
	border: 1px solid var(--wp--preset--color--red);
	border-radius: 10px;
	padding: 10px 14px;
	margin-bottom: 12px;
	font-size: .84rem;
	color: var(--wp--preset--color--headline);
}
.fl-live-banner__dot { background: var(--wp--preset--color--red-bright); }
.fl-live-banner__text { flex: 1; }
.fl-live-banner button {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .7rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	border: 0;
	border-radius: 7px;
	cursor: pointer;
	padding: 7px 12px;
}
.fl-live-banner__watch { background: var(--wp--preset--color--gold); color: #1a130a; font-weight: 700; }
.fl-live-banner__watch:hover { background: #f0c96c; }
.fl-live-banner__dismiss { background: transparent; color: var(--wp--preset--color--muted); font-size: .95rem; padding: 4px 8px; }
.fl-live-banner__dismiss:hover { color: var(--wp--preset--color--headline); }

/* ---------- Dark Channel (Phase 2, task F) ---------- */
/* assets/js/dark-channel.js renders entirely inside the same .fl-player
   element live-state.js owns, toggling .is-dark-channel while no show is
   live. Hide the Phase-1 live-only chrome underneath so the two facades
   never show at once — mirrors how .is-live/.is-playing already gate that
   chrome above. */
.fl-player.is-dark-channel .fl-badge-live,
.fl-player.is-dark-channel .fl-viewers,
.fl-player.is-dark-channel > .fl-play,
.fl-player.is-dark-channel > .fl-player-meta { display: none; }

.fl-dark-channel { position: absolute; inset: 0; z-index: 2; }
.fl-dark-channel__stage { position: absolute; inset: 0; }
.fl-dark-channel__poster {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-color: #171019;
}
.fl-dark-channel__play { z-index: 3; }
.fl-dark-channel__frame {
	position: absolute;
	inset: 0;
	z-index: 1;
}
.fl-dark-channel__frame iframe,
.fl-dark-channel__frame > div,
.fl-dark-channel__frame > div > iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.fl-dark-channel__mute {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 4;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .68rem;
	letter-spacing: .04em;
	background: rgba(9,7,12,.6);
	color: #fff;
	border: 1px solid var(--wp--preset--color--line-bright);
	border-radius: var(--fl-radius-pill);
	padding: 6px 12px;
	cursor: pointer;
}
.fl-dark-channel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(9,7,12,.6);
	color: #fff;
	border: 1px solid var(--wp--preset--color--line-bright);
	border-radius: 50%;
	padding: 0;
	cursor: pointer;
}
.fl-dark-channel__nav svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.fl-dark-channel__nav--prev { left: 16px; }
.fl-dark-channel__nav--next { right: 16px; }
.fl-dark-channel__nav[hidden] { display: none; }
.fl-dark-channel__badge {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 3;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .6rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	background: rgba(9,7,12,.55);
	border: 1px solid var(--wp--preset--color--line-bright);
	border-radius: var(--fl-radius-pill);
	padding: 5px 11px;
	pointer-events: none;
}
/* Hide the "On Now" badge while a real clicked video is playing (dark-channel.js
   toggles .is-playing on the facade) so it isn't stuck over the video. */
.fl-dark-channel.is-playing .fl-dark-channel__badge { display: none; }

/* Each playlist item is one full-stage slide; only one exists at a time.
   The --enter offset (added on render, cleared next frame by dark-channel.js)
   plays the "slides in from the right" motion Austin asked for. */
.fl-dark-channel__slide {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	margin: 0;
	padding: 0;
	background: var(--wp--preset--color--ink);
	text-decoration: none;
	overflow: hidden;
	transition: transform .45s ease, opacity .45s ease;
}
.fl-dark-channel__slide--enter { transform: translateX(6%); opacity: 0; }

/* Video preview — thumbnail fills the slide, play button centered, title
   along the bottom. The whole slide (a <button>) is the click-to-play target. */
.fl-dark-channel__slide--video {
	background-size: cover;
	background-position: center;
	background-color: #171019;
	cursor: pointer;
}
/* No thumbnail available (typically a Rumble item with no manually-set
   Thumbnail URL) — same idle gradient as the live player, so it reads as
   deliberate rather than a broken/missing image. */
.fl-dark-channel__slide--no-thumb {
	background-image:
		radial-gradient(120% 90% at 30% 20%, #3a2340, #171019 70%),
		linear-gradient(160deg, #241633, #0f0b14);
}
.fl-dark-channel__slide--video::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(9,7,12,.7) 2%, transparent 42%);
}
.fl-dark-channel__slide-play {
	position: relative;
	z-index: 1;
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background: rgba(230,186,87,.18);
	border: 1.5px solid var(--wp--preset--color--gold);
	display: grid;
	place-items: center;
	backdrop-filter: blur(3px);
	transition: transform .18s, background .18s;
}
.fl-dark-channel__slide--video:hover .fl-dark-channel__slide-play {
	transform: scale(1.06);
	background: rgba(230,186,87,.28);
}
.fl-dark-channel__slide-play svg { width: 26px; height: 26px; margin-left: 4px; fill: var(--wp--preset--color--gold); }
.fl-dark-channel__slide-title {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 18px;
	z-index: 1;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 700;
	color: #fff;
	font-size: clamp(1.1rem, 2.4vw, 1.7rem);
	line-height: 1.12;
	text-align: left;
	text-wrap: balance;
}

/* Image ad — the picture is the whole slide, contained so nothing is cropped. */
.fl-dark-channel__slide--image { background: #0f0d15; cursor: pointer; }
.fl-dark-channel__slide--image img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Blog post — full-bleed like the video preview (2026-07-24: was a small
   centered card leaving most of the stage empty; now matches video/image
   treatment — background photo fills the slide, text overlays the bottom). */
.fl-dark-channel__slide--post {
	background-size: cover;
	background-position: center;
	background-color: #171019;
	cursor: pointer;
}
.fl-dark-channel__slide--post::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(9,7,12,.75) 12%, transparent 48%);
}
.fl-dark-channel__slide-heading {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 44px;
	z-index: 1;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 700;
	color: #fff;
	font-size: clamp(1.1rem, 2.4vw, 1.7rem);
	line-height: 1.12;
	text-align: left;
	text-wrap: balance;
}
.fl-dark-channel__slide-cta {
	position: absolute;
	left: 20px;
	bottom: 18px;
	z-index: 1;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .7rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

@media (max-width: 560px) {
	.fl-dark-channel__slide-title { font-size: 1.05rem; }
	.fl-dark-channel__slide-play { width: 58px; height: 58px; }
	.fl-dark-channel__slide-play svg { width: 20px; height: 20px; }
	.fl-dark-channel__mute { top: 10px; right: 10px; padding: 5px 10px; font-size: .62rem; }
	.fl-dark-channel__nav { width: 32px; height: 32px; }
	.fl-dark-channel__nav svg { width: 16px; height: 16px; }
	.fl-dark-channel__nav--prev { left: 8px; }
	.fl-dark-channel__nav--next { right: 8px; }
}

/* ---------- Light account (Phase 3, task D) ---------- */
.fl-account {
	padding: 8px 15px;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-size: .74rem;
	color: var(--wp--preset--color--muted);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}
.fl-account__link {
	background: none;
	border: none;
	padding: 0;
	color: var(--wp--preset--color--gold);
	font-size: .74rem;
	text-decoration: underline;
	cursor: pointer;
}
.fl-account__form { display: flex; gap: 6px; flex: 1; min-width: 200px; }
/* Same [hidden]-vs-class-display gotcha as .fl-rumble-mirror__join and
   .fl-tip-panel — form.hidden = true (account.js) is otherwise beaten by
   the display:flex rule above. */
.fl-account__form[hidden] { display: none; }
.fl-account__form input {
	flex: 1;
	min-width: 0;
	background: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line-bright);
	border-radius: 6px;
	padding: 5px 8px;
	color: var(--wp--preset--color--headline);
	font-family: var(--wp--preset--font-family--sans);
	font-size: .74rem;
}
.fl-account__form button {
	background: var(--wp--preset--color--gold);
	color: #1a130a;
	font-weight: 700;
	font-size: .72rem;
	border: none;
	border-radius: 6px;
	padding: 5px 10px;
	white-space: nowrap;
	cursor: pointer;
}
.fl-account__status { width: 100%; font-size: .72rem; }
.fl-account__notify {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: .74rem;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
}
.fl-account__notify input[type="checkbox"] { margin: 0; }

/* ---------- Chat + tip rail ---------- */
.fl-rail {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height: 100%;
}

/* Off-air schedule panel (2026-07-23) — swapped in for the chat rail by
   assets/js/schedule-rail.js whenever no show is live, so an off-air visitor
   sees "here's when we're live" instead of an empty chat. The [hidden] rules
   need this specificity to beat the display:flex above (a bare UA [hidden]
   rule would lose to the class selector otherwise) — same reason the nav
   arrows and ticker tag carry their own [hidden] rules. */
.fl-rail[hidden],
.fl-schedule-rail[hidden] { display: none; }
.fl-schedule-rail {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height: 100%;
}
.fl-schedule-rail__body {
	padding: 15px;
	display: flex;
	flex-direction: column;
	gap: 15px;
}
.fl-schedule-rail__intro {
	margin: 0;
	font-size: .82rem;
	line-height: 1.45;
	color: var(--wp--preset--color--muted);
}
.fl-schedule-rail__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.fl-schedule-rail__item {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 11px 13px;
	background: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
}
.fl-schedule-rail__name {
	font-weight: 700;
	font-size: .88rem;
	color: var(--wp--preset--color--headline);
	text-decoration: none;
}
/* Only an <a> when a Rumble channel link is set (assets/js/schedule-rail.js) —
   a plain <span> for a show with none never gets this hover treatment. */
a.fl-schedule-rail__name:hover { color: var(--wp--preset--color--gold); text-decoration: underline; }
.fl-schedule-rail__when {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .68rem;
	letter-spacing: .04em;
	color: var(--wp--preset--color--gold);
}
.fl-schedule-rail__notify {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: 15px;
}
.fl-schedule-rail__notify-label {
	display: block;
	font-size: .8rem;
	font-weight: 600;
	color: var(--wp--preset--color--headline);
	margin-bottom: 9px;
}
.fl-schedule-rail__form { display: flex; gap: 6px; }
.fl-schedule-rail__form input {
	flex: 1;
	min-width: 0;
	padding: 9px 11px;
	border: 1px solid var(--wp--preset--color--line-bright);
	border-radius: 8px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--headline);
	font-size: .82rem;
}
.fl-schedule-rail__form button {
	flex: none;
	padding: 9px 15px;
	border: none;
	border-radius: 8px;
	background: var(--wp--preset--color--red);
	color: #fff;
	font-weight: 700;
	font-size: .8rem;
	cursor: pointer;
}
.fl-schedule-rail__status {
	margin: 9px 0 0;
	font-size: .76rem;
	color: var(--wp--preset--color--muted);
	min-height: 1em;
}
.fl-schedule-rail__status--error { color: var(--wp--preset--color--red-bright); }
.fl-rail__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 13px 15px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.fl-rail__head .fl-title {
	font-weight: 700;
	font-size: .86rem;
	color: var(--wp--preset--color--headline);
	display: flex;
	align-items: center;
	gap: 8px;
}
.fl-rail__count { font-family: var(--wp--preset--font-family--mono); font-size: .64rem; color: var(--wp--preset--color--muted); }
.fl-rail__popout {
	background: none;
	border: none;
	color: var(--wp--preset--color--muted);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	padding: 2px;
	margin-left: 6px;
}
.fl-rail__popout:hover { color: var(--wp--preset--color--gold); }

/* ---------- Pop-out chat window (2026-07-23) ---------- */
/* templates/chat-popup-template.php — the SAME .fl-rail markup as the main
   page, just filling the whole small window instead of a 30%-width column,
   so it reads as its own window rather than a card floating inside one.
   min-height: 100vh (not html/body height:100%) so this doesn't depend on
   :has() support or touch <html> at all. */
body.fl-chat-popup {
	min-height: 100vh;
	margin: 0;
	background: var(--wp--preset--color--ink);
	display: flex;
}
body.fl-chat-popup .fl-rail {
	flex: 1;
	border: none;
	border-radius: 0;
}
body.fl-chat-popup .fl-chat {
	max-height: none; /* the window itself is the scroll boundary here */
}

/* Rumble mirror controls, relocated into the rail header (2026-07-23, merged
   chat) — same row-that-wraps layout the old standalone accordion used. */
.fl-rail__subhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	padding: 10px 15px;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-size: .78rem;
	color: var(--wp--preset--color--muted);
}
.fl-rumble-mirror__hide-bots { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.fl-rumble-mirror__join {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .68rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	text-decoration: none;
}
.fl-rumble-mirror__join:hover { color: #f0c96c; }
/* Same [hidden]-vs-class-display gotcha as .fl-account__form and
   .fl-tip-panel — hidden = true/false (rumble-mirror.js) is otherwise beaten
   by browsers treating this as a normal inline link once styled. */
.fl-rumble-mirror__join[hidden] { display: none; }

/* Bounded + internally scrolling (2026-07-23) — without a max-height this
   grows without limit as messages accumulate over a show, stretching the
   whole page rather than the chat box itself (Austin's "bizarrely long
   module" report). 440px roughly matches the hero player's own height so
   the rail doesn't awkwardly dwarf or shrink it. */
.fl-chat { padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 210px; max-height: 440px; overflow-y: auto; }
.fl-msg { display: flex; gap: 9px; font-size: .82rem; }
.fl-msg__av { width: 26px; height: 26px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--wp--preset--color--gold-deep), #6b4f9a); }
.fl-msg__who { font-weight: 700; color: var(--wp--preset--color--headline); font-size: .78rem; margin-right: 6px; }
.fl-tag {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .54rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 1px 5px;
	border-radius: 4px;
	vertical-align: middle;
	font-weight: 600;
}
.fl-tag--mod { background: rgba(230,186,87,.12); color: var(--wp--preset--color--gold); }
.fl-tag--patron { background: rgba(91,139,208,.16); color: var(--wp--preset--color--blue); }
.fl-tag--rumble-source { background: rgba(255,255,255,.06); color: var(--wp--preset--color--muted); }
/* Rumble-sourced messages carried over into the merged feed (assets/js/
   rumble-mirror.js) — same dim-and-hide treatment the old standalone mirror
   gave bot accounts, now scoped to the shared feed. The [data-fl="chat-feed"]
   scope keeps this from touching anything outside the chat rail. */
.fl-chat .fl-msg--bot { opacity: .6; }
.fl-chat.fl-hide-rumble-bots .fl-msg--bot { display: none; }
.fl-msg--rant {
	background: rgba(230,186,87,.12);
	border: 1px solid var(--wp--preset--color--gold-deep);
	border-radius: 10px;
	padding: 9px 10px;
}
.fl-msg--rant .fl-msg__amount { font-family: var(--wp--preset--font-family--mono); color: var(--wp--preset--color--gold); font-weight: 700; font-size: .72rem; }

.fl-tipbar { border-top: 1px solid var(--wp--preset--color--line); padding: 12px 14px; background: var(--wp--preset--color--ink-raised); }
.fl-tipbar__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .6rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 8px;
}
.fl-tipchips { display: flex; gap: 7px; }
.fl-tipchips button {
	flex: 1;
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 700;
	font-size: .8rem;
	color: var(--wp--preset--color--gold);
	background: rgba(230,186,87,.12);
	border: 1px solid var(--wp--preset--color--gold-deep);
	border-radius: 8px;
	padding: 8px 0;
	cursor: pointer;
	transition: background .15s;
}
.fl-tipchips button:hover { background: rgba(230,186,87,.24); }
.fl-tipchips button.fl-tipchips__hot { background: var(--wp--preset--color--gold); color: #1a130a; }

/* ---------- Tip panel (Phase 3, task E) ---------- */
.fl-tip-panel {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--wp--preset--color--line);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
/* The `hidden` DOM property/attribute must win over the rule above — a
   class selector otherwise beats the UA stylesheet's [hidden] rule, which
   would leave the panel (and the custom-amount row below) visible before
   any chip is ever clicked. Same gotcha already handled explicitly for
   .fl-rumble-mirror__join. */
.fl-tip-panel[hidden],
.fl-tip-panel__custom[hidden],
.fl-tip-panel__onetap[hidden],
.fl-tip-panel__save-card[hidden] { display: none; }
.fl-tip-panel__amount {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 700;
	font-size: .82rem;
	color: var(--wp--preset--color--gold);
}
.fl-tip-panel__custom { display: flex; align-items: center; gap: 6px; }
.fl-tip-panel__custom span { color: var(--wp--preset--color--muted); font-family: var(--wp--preset--font-family--mono); }
.fl-tip-panel__custom input {
	flex: 1;
	background: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line-bright);
	border-radius: 8px;
	padding: 8px 10px;
	color: var(--wp--preset--color--headline);
	font-family: var(--wp--preset--font-family--sans);
	font-size: .84rem;
}
/* Square's hosted card iframe lands here — a plain bordered box so it reads
   as a real input even before the SDK finishes attaching. */
.fl-tip-panel__card {
	background: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line-bright);
	border-radius: 8px;
	padding: 10px;
	min-height: 40px;
}
.fl-tip-panel__disclaimer { font-size: .66rem; color: var(--wp--preset--color--faint); }
.fl-tip-panel input[type="text"] {
	background: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line-bright);
	border-radius: 8px;
	padding: 8px 10px;
	color: var(--wp--preset--color--headline);
	font-family: var(--wp--preset--font-family--sans);
	font-size: .84rem;
	width: 100%;
	box-sizing: border-box;
}
.fl-tip-panel__actions { display: flex; gap: 7px; }
.fl-tip-panel__submit {
	flex: 1;
	background: var(--wp--preset--color--gold);
	color: #1a130a;
	font-weight: 700;
	font-size: .82rem;
	border: none;
	border-radius: 8px;
	padding: 9px 0;
	cursor: pointer;
}
.fl-tip-panel__submit:hover { background: #f0c96c; }
.fl-tip-panel__submit:disabled { opacity: .6; cursor: default; }
.fl-tip-panel__cancel {
	background: none;
	border: 1px solid var(--wp--preset--color--line-bright);
	color: var(--wp--preset--color--muted);
	font-size: .82rem;
	border-radius: 8px;
	padding: 9px 14px;
	cursor: pointer;
}
.fl-tip-panel__status { font-size: .78rem; color: var(--wp--preset--color--gold); min-height: 1.2em; }
.fl-tip-panel__status--error { color: var(--wp--preset--color--red-bright); }

/* Task F: the one-tap saved-card fast path, shown above the normal card
   field only when a logged-in visitor already has a card on file. */
.fl-tip-panel__onetap {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px;
	background: rgba(230, 186, 87, .08);
	border: 1px solid var(--wp--preset--color--gold-deep);
	border-radius: 8px;
}
.fl-tip-panel__onetap-btn {
	background: var(--wp--preset--color--gold);
	color: #1a130a;
	font-weight: 700;
	font-size: .82rem;
	border: none;
	border-radius: 8px;
	padding: 9px 0;
	cursor: pointer;
}
.fl-tip-panel__onetap-btn:hover { background: #f0c96c; }
.fl-tip-panel__onetap-btn:disabled { opacity: .6; cursor: default; }
.fl-tip-panel__onetap-or {
	text-align: center;
	font-size: .68rem;
	color: var(--wp--preset--color--faint);
}

/* Task F: the save-card consent checkbox, shown only when logged in. */
.fl-tip-panel__save-card {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: .7rem;
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
}
.fl-tip-panel__save-card input { margin-top: 2px; flex-shrink: 0; }

/* ---------- On-site chat — prompt, composer, reactions (Phase 3, task C) ---------- */
.fl-chat-prompt { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 6px 2px; }
.fl-chat-prompt__label { font-size: .84rem; color: var(--wp--preset--color--muted); margin: 0; }
.fl-chat-prompt__form { display: flex; gap: 7px; width: 100%; }
.fl-chat-prompt__form input,
.fl-composer__form input {
	flex: 1;
	min-width: 0;
	background: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line-bright);
	border-radius: 8px;
	padding: 9px 11px;
	color: var(--wp--preset--color--headline);
	font-family: var(--wp--preset--font-family--sans);
	font-size: .84rem;
}
.fl-chat-prompt__form button,
.fl-composer__form button {
	background: var(--wp--preset--color--gold);
	color: #1a130a;
	font-weight: 700;
	font-size: .8rem;
	border: none;
	border-radius: 8px;
	padding: 9px 14px;
	white-space: nowrap;
	cursor: pointer;
}
.fl-chat-prompt__form button:hover,
.fl-composer__form button:hover { background: #f0c96c; }

.fl-chat .fl-msg__av { overflow: hidden; }
.fl-chat .fl-msg__av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* New messages slide/fade in — the "flashy" entrance PHASE-0 asked for. */
@keyframes fl-msg-enter {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}
.fl-msg--enter { animation: fl-msg-enter .25s ease-out; }

.fl-composer {
	border-top: 1px solid var(--wp--preset--color--line);
	padding: 10px 14px 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.fl-composer__identity { font-size: .72rem; color: var(--wp--preset--color--muted); }
.fl-composer__identity strong { color: var(--wp--preset--color--headline); }
.fl-composer__change {
	background: none;
	border: none;
	padding: 0;
	color: var(--wp--preset--color--gold);
	font-size: .72rem;
	text-decoration: underline;
	cursor: pointer;
}
.fl-composer__reactions { display: flex; gap: 4px; }
.fl-composer__reactions button {
	background: var(--wp--preset--color--ink-raised);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	font-size: .9rem;
	line-height: 1;
	padding: 5px 8px;
	cursor: pointer;
	transition: transform .12s, border-color .12s;
}
.fl-composer__reactions button:hover { transform: translateY(-1px); border-color: var(--wp--preset--color--gold-deep); }
.fl-composer__reactions-toggle {
	font-weight: 700;
	color: var(--wp--preset--color--muted);
}
.fl-composer__reactions-toggle[aria-expanded="true"] {
	color: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold-deep);
}
.fl-composer__reactions-grid {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 4px;
	background: var(--wp--preset--color--ink-raised);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: 8px;
	margin: -2px 0 2px;
}
.fl-composer__reactions-grid[hidden] { display: none; }
.fl-composer__reactions-grid button {
	background: none;
	border: none;
	font-size: 1.05rem;
	line-height: 1;
	padding: 5px;
	border-radius: 6px;
	cursor: pointer;
	transition: background .12s;
}
.fl-composer__reactions-grid button:hover { background: var(--wp--preset--color--surface-deep); }
.fl-composer__form { display: flex; gap: 7px; }

/* Floating reaction bursts — an ambient layer above the rail, not part of
   the scrolling message history (never persisted as a real chat line, see
   chat.js's REACTION_FIELD marker). */
.fl-reaction-layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 5;
}
.fl-reaction-burst {
	position: absolute;
	bottom: 90px;
	font-size: 1.4rem;
	animation: fl-reaction-float 1.8s ease-out forwards;
}
@keyframes fl-reaction-float {
	0%   { opacity: 0; transform: translateY(0) scale(.6); }
	15%  { opacity: 1; transform: translateY(-10px) scale(1.05); }
	100% { opacity: 0; transform: translateY(-140px) scale(1); }
}

/* ---------- Rumble chat badges (Phase 3, task B; merged into .fl-chat
   2026-07-23 — see .fl-rail__subhead and .fl-tag--rumble-source above) ---------- */
.fl-tag--rumble-verified { background: rgba(91,139,208,.16); color: var(--wp--preset--color--blue); }
.fl-tag--rumble-sub { background: rgba(230,186,87,.12); color: var(--wp--preset--color--gold); }
.fl-tag--rumble-whale { background: rgba(223,59,64,.14); color: var(--wp--preset--color--red-bright); }

@media (max-width: 560px) {
	.fl-rail__subhead { flex-direction: column; align-items: flex-start; }
}

.fl-section { margin-top: 34px !important; }
.fl-section:first-child { margin-top: 0 !important; }

/* ---------- Section headers ---------- */
.fl-section-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px !important; }
.fl-section-head__tab { width: 9px; height: 22px; background: var(--wp--preset--color--red); border-radius: 2px; flex: none; }
.fl-section-head h2 {
	font-family: var(--wp--preset--font-family--sans) !important;
	font-weight: 800 !important;
	font-size: 1.05rem !important;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--headline);
	margin: 0 !important;
}
.fl-section-head__rule { flex: 1; height: 1px; background: var(--wp--preset--color--line); }
.fl-section-head a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .66rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	white-space: nowrap;
}
.fl-section-head a:hover { color: var(--wp--preset--color--gold); }

/* ---------- Lead story + headline stack ---------- */
/* .fl-thumb is a <span> (category-rail.php, newsroom-front.php, etc.) — a
   <span> defaults to display:inline, and `aspect-ratio` has NO EFFECT on an
   inline box (CSS spec). Every context below only ever set aspect-ratio/
   background, never `display`, so the box was silently collapsing to fit
   just its inline .fl-cat-tag text — a sliver, not the intended photo box —
   found & fixed 2026-07-24 (Austin: "the image doesn't fill the entire
   box"). `position: relative` here too: .fl-cat-tag is position:absolute
   and needs this to anchor to the thumb itself; without it, on cards where
   no ancestor happened to be positioned, the badge could end up positioned
   relative to some far-off ancestor instead — the likely cause of a "NEWS"
   tag once seen floating disconnected from its card. */
.fl-thumb { display: block; position: relative; }
.fl-lead .fl-thumb { aspect-ratio: 16 / 9; background: linear-gradient(135deg,#3b2140,#221433 60%,#141019); background-size: cover; background-position: center; }
.fl-cat-tag {
	position: absolute;
	top: 13px;
	left: 13px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .6rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 700;
	color: #fff;
	background: var(--wp--preset--color--red);
	padding: 4px 9px;
	border-radius: 5px;
}
.fl-thumb--gold .fl-cat-tag { background: var(--wp--preset--color--gold); color: #1a130a; }
.fl-lead__body { padding: 18px 20px 22px; }
.fl-lead h3 { margin: .1rem 0 .5rem !important; }
.fl-byline {
	margin-top: 14px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .66rem;
	letter-spacing: .06em;
	color: var(--wp--preset--color--faint);
	text-transform: uppercase;
}
.fl-byline b { color: var(--wp--preset--color--gold); font-weight: 600; }

.fl-story-stack { display: flex; flex-direction: column; gap: 16px; }
.fl-story {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 13px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--wp--preset--color--line);
	text-decoration: none;
}
.fl-story:last-child { border-bottom: none; padding-bottom: 0; }
.fl-story .fl-thumb { aspect-ratio: 4 / 3; border-radius: 9px; background: linear-gradient(135deg,#2b2140,#191226); }
.fl-story h4 { font-family: var(--wp--preset--font-family--serif); font-weight: 600; font-size: 1rem; line-height: 1.2; color: var(--wp--preset--color--headline); margin: 0 0 6px; }
.fl-story .fl-kicker { font-family: var(--wp--preset--font-family--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--gold); }
.fl-story:hover h4 { color: #fff; }

/* ---------- Category card row ---------- */
.fl-cardrow {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.fl-cardrow > li { margin: 0; }
.fl-card .wp-block-post-featured-image { margin: 0; }
.fl-card .wp-block-post-featured-image img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; display: block; border-radius: 0; }
.fl-card .wp-block-post-terms {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .58rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}
.fl-card .wp-block-post-terms a { color: inherit; text-decoration: none; }
.fl-card .wp-block-post-title { margin: 7px 0 0; }
.fl-card .wp-block-post-title a {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 600;
	font-size: 1.02rem;
	line-height: 1.2;
	color: var(--wp--preset--color--headline);
	text-decoration: none;
}
/* display:flex added here (Task D) — archive.html's own .fl-pagination
   gets its flex layout from the wp:query-pagination block's own
   {"layout":{"type":"flex"}} attribute, but community-feed.php's
   hand-rolled paginate_links() output has no such attribute to supply it,
   so the class needs to be self-sufficient rather than relying on a block
   attribute only one consumer provides. */
.fl-pagination { margin-top: 34px !important; gap: 14px; display: flex; flex-wrap: wrap; justify-content: center; }
.fl-pagination a, .fl-pagination span {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .8rem;
	color: var(--wp--preset--color--muted);
}
.fl-pagination .current { color: var(--wp--preset--color--gold); font-weight: 700; }
.fl-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	overflow: hidden;
	transition: transform .16s, border-color .16s;
	text-decoration: none;
	display: block;
}
.fl-card:hover { transform: translateY(-3px); border-color: var(--wp--preset--color--line-bright); }
.fl-card .fl-thumb { aspect-ratio: 16 / 10; }
.fl-card__body { padding: 13px 14px 16px; }
.fl-card h4 { font-family: var(--wp--preset--font-family--serif); font-weight: 600; font-size: 1.02rem; line-height: 1.2; color: var(--wp--preset--color--headline); margin: 7px 0 0; }

/* ---------- 4Liberty Channel strip (Phase 2 wires playback) ---------- */
.fl-channel {
	border-radius: 16px;
	border: 1px solid var(--wp--preset--color--line);
	overflow: hidden;
	background: linear-gradient(120deg, #1a1226, #140f1d);
	padding: 22px 24px;
}
.fl-channel__top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.fl-channel__badge {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .62rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #0f0b14;
	background: var(--wp--preset--color--gold);
	font-weight: 700;
	padding: 4px 9px;
	border-radius: 5px;
}
.fl-channel__top h2 { font-family: var(--wp--preset--font-family--sans) !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .02em; font-size: 1.05rem !important; margin: 0 !important; }
.fl-channel__now { margin-left: auto; font-family: var(--wp--preset--font-family--mono); font-size: .66rem; color: var(--wp--preset--color--muted); }
.fl-vids { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.fl-vid {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: linear-gradient(135deg,#2c2044,#171026);
	border: 1px solid var(--wp--preset--color--line);
	cursor: pointer;
}
.fl-vid__label { position: absolute; left: 9px; bottom: 8px; right: 9px; font-size: .72rem; color: #eee; font-weight: 600; line-height: 1.15; }
.fl-vid__dur { position: absolute; top: 8px; right: 8px; font-family: var(--wp--preset--font-family--mono); font-size: .56rem; background: rgba(9,7,12,.6); padding: 2px 6px; border-radius: 4px; color: var(--wp--preset--color--body-text); }
.fl-vid--on { border-color: var(--wp--preset--color--gold-deep); }
.fl-vid--on::before {
	content: "NOW PLAYING";
	position: absolute;
	top: 8px;
	left: 8px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .5rem;
	letter-spacing: .1em;
	background: var(--wp--preset--color--gold);
	color: #1a130a;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 4px;
}

/* ---------- Newsletter capture ---------- */
.fl-newsletter {
	border-radius: 16px;
	padding: 30px;
	position: relative;
	overflow: hidden;
	background: linear-gradient(120deg, #241633, #1a1024);
	border: 1px solid var(--wp--preset--color--gold-deep);
}
.fl-newsletter::after {
	content: "";
	position: absolute;
	right: -60px;
	top: -60px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(230,186,87,.12), transparent 70%);
}
.fl-newsletter__row { position: relative; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.fl-newsletter__copy { flex: 1; min-width: 260px; }
.fl-newsletter h2 { margin: .2rem 0 .3rem !important; }
.fl-newsletter-form { display: flex; gap: 9px; flex: 1; min-width: 260px; }
.fl-newsletter-form input {
	flex: 1;
	background: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line-bright);
	border-radius: 9px;
	padding: 12px 14px;
	color: var(--wp--preset--color--headline);
	font-family: var(--wp--preset--font-family--sans);
	font-size: .9rem;
}
.fl-newsletter-form button {
	background: var(--wp--preset--color--gold) !important;
	color: #1a130a !important;
	font-weight: 800;
	border: none;
	border-radius: 9px !important;
	padding: 12px 20px !important;
	white-space: nowrap;
}
.fl-newsletter-form button:hover { background: #f0c86a !important; }
.fl-newsletter-form button:disabled { opacity: .6; cursor: default; }
.fl-newsletter__status {
	position: relative;
	width: 100%;
	font-size: .78rem;
	color: var(--wp--preset--color--gold);
	min-height: 1.2em;
	margin-top: 4px;
}
.fl-newsletter__status--error { color: var(--wp--preset--color--red-bright); }
@media (max-width: 600px) {
	/* The input+button row never wrapped on its own — on narrow phones the
	   "Join Free" button ran past the card edge and got visually sliced by
	   the card's rounded corner. Stack them instead of squeezing both into
	   one row. */
	.fl-newsletter { padding: 22px 18px; }
	.fl-newsletter-form { flex-direction: column; align-items: stretch; }
	.fl-newsletter-form input { min-width: 0; }
	.fl-newsletter-form button { width: 100%; }
}

/* ---------- Support band ---------- */
.fl-support-band {
	border-radius: 16px;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	padding: 24px 26px;
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}
.fl-support-band__copy { flex: 1; min-width: 240px; }
.fl-support-band h2 { margin: .3rem 0 .2rem !important; font-size: 1.35rem !important; }
.fl-tiers { display: flex; gap: 10px; flex-wrap: wrap; }
.fl-tier {
	background: var(--wp--preset--color--ink-raised);
	border: 1px solid var(--wp--preset--color--line-bright);
	border-radius: 10px;
	padding: 11px 15px;
	text-align: center;
	min-width: 92px;
}
.fl-tier__amt { font-family: var(--wp--preset--font-family--mono); font-weight: 700; color: var(--wp--preset--color--gold); font-size: 1.05rem; }
.fl-tier__name { font-size: .66rem; color: var(--wp--preset--color--muted); margin-top: 3px; }
.fl-tier--popular { border-color: var(--wp--preset--color--gold); background: rgba(230,186,87,.12); }
a.fl-tier { display: block; text-decoration: none; color: inherit; transition: border-color .15s; }
a.fl-tier:hover { border-color: var(--wp--preset--color--gold-deep); }

/* ---------- Support page ---------- */
.fl-support-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.fl-pill {
	font-size: .78rem;
	color: var(--wp--preset--color--body-text);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--fl-radius-pill);
	padding: 8px 14px;
}
.fl-benefits-box {
	background: rgba(230,186,87,.08);
	border: 1px solid var(--wp--preset--color--gold-deep);
	border-radius: 12px;
	padding: 16px 20px;
	margin-bottom: 34px;
}
.fl-benefits-box h3 {
	font-family: var(--wp--preset--font-family--sans);
	font-size: .8rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin: 0 0 6px;
}
.fl-benefits-box p { margin: 0; color: var(--wp--preset--color--body-text); font-size: .92rem; }

.fl-support-group { margin-top: 40px; }
.fl-support-group:first-of-type { margin-top: 0; }
.fl-support-group h3 { margin: 0 0 4px; font-size: 1.3rem; }
.fl-support-group__sub { color: var(--wp--preset--color--muted); font-size: .9rem; margin: 0 0 18px; }

.fl-supportgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fl-supportcard {
	position: relative;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--fl-radius-card);
	padding: 20px 20px 18px;
	display: flex;
	flex-direction: column;
}
.fl-supportcard--badged { border-color: var(--wp--preset--color--gold); background: rgba(230,186,87,.07); }
.fl-supportcard__badge {
	position: absolute;
	top: -11px;
	right: 16px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .58rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 700;
	background: var(--wp--preset--color--gold);
	color: #1a130a;
	padding: 4px 9px;
	border-radius: 999px;
}
.fl-supportcard h4 {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.1rem;
	color: var(--wp--preset--color--headline);
	margin: 4px 0 6px;
}
.fl-supportcard__price {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--wp--preset--color--gold);
	margin-bottom: 8px;
}
.fl-supportcard__price span {
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 400;
	font-size: .68rem;
	color: var(--wp--preset--color--muted);
	text-transform: uppercase;
	letter-spacing: .06em;
}
.fl-supportcard p { flex: 1; font-size: .86rem; color: var(--wp--preset--color--muted); margin: 0 0 16px; }
.fl-supportcard__cta {
	display: block;
	text-align: center;
	background: var(--wp--preset--color--red);
	color: #fff;
	font-weight: 700;
	font-size: .9rem;
	padding: 11px 0;
	border-radius: 8px;
	text-decoration: none;
	transition: background .15s;
}
.fl-supportcard__cta:hover { background: var(--wp--preset--color--red-bright); }
.fl-supportcard--badged .fl-supportcard__cta { background: var(--wp--preset--color--gold); color: #1a130a; }
.fl-supportcard--badged .fl-supportcard__cta:hover { background: #f0c86a; }
.fl-supportcard__foot {
	display: block;
	text-align: center;
	margin-top: 8px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .64rem;
	color: var(--wp--preset--color--faint);
}
@media (max-width: 782px) {
	.fl-supportgrid { grid-template-columns: 1fr; }
}

/* ---------- Shows page ---------- */
.fl-showgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fl-showcard {
	position: relative;
	display: block;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--fl-radius-card);
	padding: 20px 20px 18px;
	text-decoration: none;
	transition: transform .15s, border-color .15s;
}
.fl-showcard:hover { transform: translateY(-3px); border-color: var(--wp--preset--color--gold-deep); }
.fl-showcard.is-live { border-color: var(--wp--preset--color--red); }
/* Hidden until show-grid.js confirms the channel is actually live via the
   same poller endpoint the homepage hero reads — never a static claim. */
.fl-showcard__live[hidden] { display: none; }
.fl-showcard__live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	position: absolute;
	top: -11px;
	right: 16px;
	background: var(--wp--preset--color--red);
	color: #fff;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .58rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
}
.fl-showcard__live .fl-pulse { background: #fff; }
.fl-showcard h4 {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.1rem;
	color: var(--wp--preset--color--headline);
	margin: 4px 0 6px;
}
.fl-showcard p { font-size: .86rem; color: var(--wp--preset--color--muted); margin: 0 0 10px; }
.fl-showcard__detail {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .64rem;
	letter-spacing: .04em;
	color: var(--wp--preset--color--faint);
	margin-bottom: 12px;
}
.fl-showcard__cta {
	display: block;
	font-size: .8rem;
	font-weight: 700;
	color: var(--wp--preset--color--gold);
}
@media (max-width: 782px) {
	.fl-showgrid { grid-template-columns: 1fr; }
}

/* ---------- Shop page ---------- */
.fl-shop-band {
	border-radius: 16px;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	padding: 26px 28px;
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}
.fl-shop-band__copy { flex: 1; min-width: 240px; }
.fl-shop-band h2 { margin: .3rem 0 .3rem !important; font-size: 1.4rem !important; }
.fl-shop-band p { color: var(--wp--preset--color--body-text); font-size: .92rem; margin: 0; }
.fl-shop-band__cta {
	background: var(--wp--preset--color--gold);
	color: #1a130a;
	font-weight: 800;
	font-size: .92rem;
	padding: 14px 24px;
	border-radius: 10px;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s, transform .15s;
}
.fl-shop-band__cta:hover { background: #f0c86a; transform: translateY(-1px); }

/* ---------- Eyebrow / kicker utility ---------- */
.fl-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .66rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	font-weight: 600;
	display: block;
}
.fl-eyebrow--red { color: var(--wp--preset--color--red-bright); }

/* ---------- Article (single) ---------- */
.fl-article-meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .7rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.fl-article-meta b { color: var(--wp--preset--color--gold); font-weight: 600; }
.fl-article-meta { align-items: center; gap: 10px; margin-bottom: 20px !important; }
.fl-article-meta a { color: var(--wp--preset--color--muted); text-decoration: none; }
.fl-article-cat a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .68rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 700;
	color: #fff !important;
	background: var(--wp--preset--color--red);
	padding: 4px 10px;
	border-radius: 5px;
	text-decoration: none;
}
.wp-block-post-content { font-size: 1.06rem; line-height: 1.75; }
.wp-block-post-content p { margin-bottom: 1.3em; }
.wp-block-post-content a { color: var(--wp--preset--color--gold); text-decoration: underline; }
.wp-block-post-content blockquote {
	border-left: 3px solid var(--wp--preset--color--gold-deep);
	padding-left: 20px;
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	color: var(--wp--preset--color--headline);
}

/* ---------- Share row (single posts, above + below the article) ----------
   Rendered by fourliberty_add_share_buttons() in functions.php. No JS and no
   third-party assets — see the comment block there for why not a plugin.
   Chips sit on the card surface so they read as part of the page instead of
   two loud brand-coloured blobs; the brand identity lives in the glyph, and
   gold (the theme accent) does the hover work. */
.fl-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}
.fl-share--top {
	margin: 0 0 26px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.fl-share--bottom {
	margin: 30px 0 0;
	padding-top: 22px;
	border-top: 1px solid var(--wp--preset--color--line);
}
.fl-share__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.fl-share__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 15px;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--headline);
	font-size: .82rem;
	font-weight: 600;
	line-height: 1;
	/* The article body underlines every link (see .wp-block-post-content a) —
	   these are buttons, so undo it in both resting and hover states. */
	text-decoration: none !important;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.fl-share__icon { flex: none; display: block; }
.fl-share__btn:hover,
.fl-share__btn:focus-visible {
	background: var(--wp--preset--color--surface-deep);
	border-color: var(--wp--preset--color--gold-deep);
	color: var(--wp--preset--color--gold);
}
.fl-share__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}
/* Breakpoints are measured, not guessed. On a 720px column with 22px root
   padding the two chips need 289px side by side; the eyebrow costs another
   39px ("Share") or 79px ("Share this"), which is what pushes the row onto
   a second line on ordinary phones. So the label goes below 480px — the
   icons already say what the row is — and the chips tighten below 400px.
   Measured result: one clean line at every width from 344px to 1440px.
   At 320px the two chips stack, which is correct rather than broken: no
   overflow, and the tap targets get bigger. An earlier 380px breakpoint
   made a 390px phone look WORSE than a 375px one — hence the real numbers. */
@media (max-width: 479px) {
	.fl-share__label { display: none; }
}
@media (max-width: 399px) {
	.fl-share { gap: 8px; }
	.fl-share__btn { padding: 8px 12px; font-size: .78rem; }
}

/* ---------- Footer ---------- */
.fl-footer {
	margin-top: 44px;
	border-top: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--ink-raised);
	padding-block: 26px;
}
.fl-footer__row { align-items: center; gap: 18px; }
.fl-footer__brand { align-items: center; gap: 10px; }
.fl-footer__nav .wp-block-navigation-item a {
	font-size: .8rem;
	color: var(--wp--preset--color--muted);
}
.fl-footer__nav .wp-block-navigation-item a:hover { color: var(--wp--preset--color--gold); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.fl-hero-grid { grid-template-columns: 1fr; }
	.fl-cardrow { grid-template-columns: repeat(2, 1fr); }
	.fl-vids { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 782px) {
	.fl-lead, .fl-story-stack { grid-column: span 1 / span 1; }
}
@media (max-width: 560px) {
	.fl-cardrow, .fl-vids { grid-template-columns: 1fr 1fr; }
	.fl-story { grid-template-columns: 76px 1fr; }
	/* "NETWORK" was fully hidden here to make room in the masthead row
	   (see the search-icon comment below) — stack it under "4LIBERTY"
	   instead of dropping it, which reclaims the same horizontal space
	   without losing the wordmark. */
	.fl-wordmark { flex-direction: column; align-items: flex-start; gap: 1px; }
	.fl-wordmark__sub { margin-top: 0; font-size: .5rem; letter-spacing: .22em; }
	.fl-wordmark__sub::before, .fl-wordmark__sub::after { display: none; }
}
/* Static-nav hamburger (2026-07-23) — replaces the wp:navigation block's
   built-in overlayMenu. Below this width the inline links collapse into a
   dropdown toggled by .fl-nav-toggle (assets/js/site.js flips .is-open). The
   dropdown anchors to .fl-masthead (position:sticky is its containing block),
   so it drops full-width just under the header bar. */
@media (max-width: 860px) {
	.fl-nav-toggle { display: inline-flex; }
	.fl-nav-menu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: rgba(15,13,21,.98);
		border-bottom: 1px solid var(--wp--preset--color--line);
		padding: 6px 0;
		display: none;
	}
	.fl-nav-menu.is-open { display: flex; }
	.fl-nav-menu a { display: block; padding: 13px 22px; }
	.fl-nav-menu a:hover { background: var(--wp--preset--color--surface); }
}
@media (max-width: 600px) {
	/* Masthead search + Support button force nowrap (header.html); at phone
	   widths there isn't room for logo + nav toggle + search + Support, and
	   Support overflowing off-screen breaks the /support donation CTA. Drop
	   the search icon to make room — it's the lowest-value item in that row. */
	.fl-masthead__actions .wp-block-search { display: none; }
}
/* Dropping the search icon above buys enough room down to about 350px, but
   not below it. On a 320px phone the row still needs 314px (brand 140 +
   gap 26 + hamburger 40 + gap 26 + Support 82) against 283px of content
   box, so the Support button hung 31px past the viewport and kept the
   whole page scrolling sideways — the same symptom as the Discourse
   heading, different cause. Everything in that row is flex:none, so
   nothing gives on its own.

   Tightening the two row gaps reclaims 32px and trimming the button's
   side padding another 12px, which lands the row at ~270px with room to
   spare. Scoped to 400px rather than folded into the 600px block above so
   ordinary phones (360-430px, where it already fits with 22px clear) keep
   the roomier spacing. Hiding the button was the obvious alternative and
   is deliberately not used — the row above exists to keep the /support
   CTA reachable. Measured 320-1440px, zero overflow. Fixed 2026-07-27. */
@media (max-width: 400px) {
	.fl-masthead__row { gap: 10px; }
	.fl-btn-support {
		padding: 9px 11px !important;
		font-size: .78rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fl-pulse { animation: none; }
	.fl-card, .fl-play { transition: none; }
	.fl-msg--enter { animation: none; }
	.fl-reaction-burst { animation: none; display: none; }
}

/* ---------- Comments (single post) ---------- */
.fl-comments {
	margin-top: 50px;
	padding-top: 34px;
	border-top: 1px solid var(--wp--preset--color--line);
}
/* Heads up: --wp--preset--font-size--x-large resolves to 42px on the live
   site, NOT the clamp(1.3rem, 2.4vw, 1.7rem) this theme declares. That is
   not a bug in this file. theme.json is "version": 3, and since WP 6.6 a v3
   theme gets settings.typography.defaultFontSizes: true by default, which
   merges WordPress core's own presets in and lets them win wherever a slug
   collides. Core defines exactly small/medium/large/x-large, so those four
   are overridden with core's 13/20/36/42px while xx-large and huge — slugs
   core does not define — still come through as this theme wrote them.
   Confirmed against the live global-styles output 2026-07-27.
   Adding "defaultFontSizes": false to theme.json restores all four to the
   theme's own values, but that is a deliberate sitewide type change (body
   20px -> 16px, h3 42px -> ~21-27px), so it is Austin's call, not a
   drive-by edit. Not required for the mobile overflow fix — the long-word
   guard at the top of this file handles that on its own. */
.fl-comments .wp-block-comments-title,
.fl-comments .comment-reply-title,
.fl-comments .wp-block-post-comments-form h3 {
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0 0 18px !important;
}
/* 42px is fine on a desktop but far too heavy on a phone, where the Discourse
   reply title is a bare domain that now wraps mid-word — at 42px it broke
   across three lines. This media query MUST stay directly after the rule
   above: the selectors are identical, and a media query adds no specificity,
   so whichever comes last in the file wins. Written first inside the 600px
   masthead block higher up, where the later 42px rule silently beat it. */
@media (max-width: 600px) {
	.fl-comments .wp-block-comments-title,
	.fl-comments .comment-reply-title,
	.fl-comments .wp-block-post-comments-form h3 {
		font-size: 1.5rem;
		line-height: 1.3;
	}
}
.fl-comments .wp-block-comment-template { list-style: none; margin: 0; padding: 0; }
.fl-comment {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	padding: 16px 18px !important;
	margin-bottom: 14px !important;
}
.fl-comment__meta { gap: 10px !important; margin-bottom: 6px; }
.fl-comment__meta .wp-block-comment-author-name { font-weight: 700; color: var(--wp--preset--color--headline); }
.fl-comment__meta .wp-block-comment-date {
	font-size: .8rem;
	color: var(--wp--preset--color--faint);
	text-decoration: none;
}
.fl-comment .wp-block-comment-content p { margin: 0 0 8px; color: var(--wp--preset--color--body-text); }
.fl-comment .wp-block-comment-content p:last-child { margin-bottom: 0; }
.fl-comment .wp-block-comment-reply-link a {
	font-size: .8rem;
	font-weight: 700;
	color: var(--wp--preset--color--gold);
}
.fl-comments .wp-block-comments-pagination {
	margin: 18px 0;
	gap: 10px;
	font-size: .85rem;
}
.fl-comments .wp-block-comments-pagination a { color: var(--wp--preset--color--gold); }
.fl-comments .comment-form input:not([type="submit"]),
.fl-comments .comment-form textarea {
	width: 100%;
	background: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line-bright);
	border-radius: 8px;
	color: var(--wp--preset--color--body-text);
	padding: 10px 12px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: .9rem;
	margin: 4px 0 14px;
}
.fl-comments .comment-form textarea { min-height: 120px; resize: vertical; }
.fl-comments .comment-form label { font-size: .82rem; color: var(--wp--preset--color--muted); }
.fl-comments .comment-form .form-submit input[type="submit"] {
	background: var(--wp--preset--color--gold);
	color: #1a130a;
	border: none;
	border-radius: 8px;
	font-weight: 700;
	padding: 10px 20px;
	cursor: pointer;
}
.fl-comments .comment-form .form-submit input[type="submit"]:hover { background: #f0c96c; }
.fl-comments .comment-awaiting-moderation {
	display: block;
	margin-top: 6px;
	font-size: .78rem;
	color: var(--wp--preset--color--gold-deep);
}

/* ---------- Community page (Phase 8, Task D) ---------- */
.fl-community-composer {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	padding: 18px;
	margin-bottom: 30px;
}
/* Same [hidden]-vs-form-display gotcha as .fl-account__form and
   .fl-rumble-mirror__join — a form's own display default beats [hidden]
   unless this is spelled out explicitly. */
.fl-community-composer__form[hidden] { display: none; }
.fl-community-composer__form input[type="text"],
.fl-community-composer__form textarea {
	width: 100%;
	box-sizing: border-box;
	background: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line-bright);
	border-radius: 8px;
	color: var(--wp--preset--color--headline);
	padding: 10px 12px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: .9rem;
	margin-bottom: 10px;
}
.fl-community-composer__form textarea { min-height: 90px; resize: vertical; }
.fl-community-composer__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.fl-community-composer__status { font-size: .78rem; color: var(--wp--preset--color--gold); flex: 1; min-height: 1.2em; }
.fl-community-composer__status--error { color: var(--wp--preset--color--red-bright); }
.fl-community-composer__submit {
	background: var(--wp--preset--color--gold);
	color: #1a130a;
	font-weight: 700;
	font-size: .86rem;
	border: none;
	border-radius: 8px;
	padding: 9px 22px;
	cursor: pointer;
	white-space: nowrap;
}
.fl-community-composer__submit:hover { background: #f0c96c; }
.fl-community-composer__submit:disabled { opacity: .6; cursor: default; }

.fl-community-feed { display: flex; flex-direction: column; gap: 16px; }
.fl-community-post {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	padding: 18px 20px;
}
.fl-community-post__title { margin: 0 0 6px; font-family: var(--wp--preset--font-family--serif); font-size: 1.15rem; line-height: 1.3; }
.fl-community-post__title a { color: var(--wp--preset--color--headline); text-decoration: none; }
.fl-community-post__title a:hover { color: var(--wp--preset--color--gold); }
.fl-community-post__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .78rem;
	color: var(--wp--preset--color--muted);
	margin-bottom: 10px;
}
.fl-community-post__author { font-weight: 600; color: var(--wp--preset--color--body-text); }
.fl-community-post__excerpt { font-size: .92rem; color: var(--wp--preset--color--body-text); margin: 0 0 10px; line-height: 1.5; }
.fl-community-post__link { font-size: .84rem; font-weight: 700; color: var(--wp--preset--color--gold); text-decoration: none; }
.fl-community-post__link:hover { text-decoration: underline; }

.fl-community-post--single { padding: 24px; }
.fl-community-post--single .fl-community-post__title { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.fl-community-post__body { font-size: 1rem; line-height: 1.65; color: var(--wp--preset--color--body-text); margin-bottom: 14px; }
.fl-community-post__body p { margin: 0 0 1em; }

.fl-badge {
	display: inline-block;
	font-size: .64rem;
	font-weight: 800;
	letter-spacing: .04em;
	padding: 2px 7px;
	border-radius: 999px;
	text-transform: uppercase;
}
.fl-badge--mod { background: rgba(230, 186, 87, .16); color: var(--wp--preset--color--gold); }

.fl-community-report {
	background: none;
	border: none;
	color: var(--wp--preset--color--faint);
	font-size: .74rem;
	cursor: pointer;
	padding: 0;
}
.fl-community-report:hover { color: var(--wp--preset--color--red-bright); }
.fl-community-report:disabled { cursor: default; color: var(--wp--preset--color--muted); }

.fl-community-replies { margin: 28px 0; }
.fl-community-replies__title { font-size: 1rem; color: var(--wp--preset--color--headline); margin-bottom: 14px; }
.fl-community-replies__empty { font-size: .88rem; color: var(--wp--preset--color--muted); }
.fl-community-reply {
	border-top: 1px solid var(--wp--preset--color--line);
	padding: 14px 0;
}
.fl-community-reply__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .76rem;
	color: var(--wp--preset--color--muted);
	margin-bottom: 6px;
}
.fl-community-reply__author { font-weight: 600; color: var(--wp--preset--color--body-text); }
.fl-community-reply__body { font-size: .92rem; color: var(--wp--preset--color--body-text); line-height: 1.55; margin: 0 0 6px; }

/* ---------- Community page: categories + GIFs (Phase 8, Task E) ---------- */
.fl-community-composer__extras {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 10px;
}
.fl-community-composer__topic,
.fl-community-composer__gif {
	background: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line-bright);
	border-radius: 8px;
	color: var(--wp--preset--color--headline);
	padding: 8px 10px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: .82rem;
}
.fl-community-composer__gif { flex: 1; min-width: 200px; }

.fl-community-topic-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
}
.fl-community-topic-chip {
	font-size: .8rem;
	font-weight: 600;
	padding: 6px 13px;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--line-bright);
	color: var(--wp--preset--color--body-text);
	text-decoration: none;
	white-space: nowrap;
}
.fl-community-topic-chip:hover { border-color: var(--wp--preset--color--gold); color: var(--wp--preset--color--gold); }
.fl-community-topic-chip.is-active { background: var(--wp--preset--color--gold); color: #1a130a; border-color: var(--wp--preset--color--gold); }

.fl-community-post__topic {
	font-size: .68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--wp--preset--color--faint);
}

.fl-community-gif {
	margin: 2px 0 12px;
	border-radius: 8px;
	overflow: hidden;
	max-width: 320px;
	background: var(--wp--preset--color--ink);
}
.fl-community-gif img { display: block; width: 100%; height: auto; }

.fl-forum-promo {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--gold-deep);
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 24px;
	text-align: center;
}
.fl-forum-promo__label {
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--wp--preset--color--gold);
	margin-bottom: 8px;
}
.fl-forum-promo__title {
	margin: 0 0 6px;
	font-size: 1.3rem;
}
.fl-forum-promo__body {
	margin: 0 0 16px;
	color: var(--wp--preset--color--muted);
	font-size: .92rem;
}
.fl-forum-promo__cta {
	display: inline-block;
	color: var(--wp--preset--color--gold);
	background: rgba(230,186,87,.12);
	border: 1px solid var(--wp--preset--color--gold-deep);
	border-radius: var(--fl-radius-pill);
	padding: 10px 24px;
	font-weight: 700;
	text-decoration: none;
	transition: background .12s, border-color .12s;
}
.fl-forum-promo__cta:hover {
	background: rgba(230,186,87,.2);
	border-color: var(--wp--preset--color--gold);
}

.fl-forum-topics {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	padding: 14px;
	margin-bottom: 24px;
	overflow: hidden;
}
.fl-forum-topics__label {
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--wp--preset--color--muted);
	margin-bottom: 10px;
}
.fl-forum-topics__frame {
	display: block;
	width: 100%;
	height: 460px;
	border: 0;
	border-radius: 8px;
	/* Discourse serves the embed with its own dark stylesheet; this just keeps
	   the corners from showing a white flash before it paints. */
	background: var(--wp--preset--color--ink);
}

.fl-community-discord {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	padding: 14px;
	margin-bottom: 24px;
	overflow: hidden;
}
.fl-community-discord__label {
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--wp--preset--color--muted);
	margin-bottom: 10px;
}
.fl-community-discord widgetbot {
	display: block;
	width: 100%;
	border-radius: 8px;
	overflow: hidden;
}

@media (max-width: 600px) {
	.fl-community-composer { padding: 14px; }
	.fl-community-post { padding: 14px 16px; }
	.fl-community-post--single { padding: 18px; }
	.fl-community-gif { max-width: 100%; }
	.fl-community-discord widgetbot { height: 320px !important; }
	.fl-forum-promo { padding: 16px; }
	.fl-forum-promo__cta { display: block; width: 100%; box-sizing: border-box; }
	.fl-forum-topics { padding: 10px; }
	.fl-forum-topics__frame { height: 380px; }
}