/**
 * Banner Harvest — Pathways v1.1 (hub, lightbox, chapter-page host)
 * Loaded after bh-book-kit.css (the approved book, rescoped to .bhp-book) and quiz.css.
 * Namespace: bhp-. No global selectors except the html state classes set by bh-pathways.js.
 *
 * v1.1 (visual pass, Oct 10 2026): apothecary-glass selector panels, approved wording,
 * and a composed mobile/tablet scene built on the dedicated portrait room image.
 */

/* ── shared host behaviour ─────────────────────────────────────── */
.bhp-book {
	/* Height follows content (the hero grid); container units resolve against width. */
	container-type: inline-size;
	--bhp-ink: #2B2822;
	--bhp-ink-soft: #4A443A;
	--bhp-sage: #3F5A47;
	--bhp-sage-ink: #566C54;
	--bhp-brass: #A98C4B;
	--bhp-brass-line: #B8A06A;
	--bhp-gilt: #C9B683;
	--bhp-ivory: #FDFAF2;
	--bhp-linen: #FAF7F2;
	--bhp-walnut: #24170D;
	--bhp-display: 'Cormorant Garamond', Georgia, serif;
	--bhp-body: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
	--bhp-ui: Inter, 'Segoe UI', Arial, sans-serif;
}

/* A brisker read of the approved choreography for the hub and lightbox
   (same sequence and easing, ~1.2 s shorter). data-bhp-tempo="approved" restores v13 timing. */
.bhp-book[data-bhp-tempo="brisk"] {
	--dw-t-awaken: 820ms;
	--dw-t-push: 820ms;
	--dw-t-cover: 600ms;
	--dw-t-turn1: 470ms;
	--dw-t-turn2: 500ms;
	--dw-t-turn3: 540ms;
	--dw-t-hold: 420ms;
	--dw-t-handoff-flat: 520ms;
	--dw-t-handoff-turn: 700ms;
	--dw-t-quiz: 560ms;
}

.bhp-book .screen-reader-text,
.bhp-hub .screen-reader-text,
.bhp-dialog .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

html.bhp-hide-bud .bh-fg { display: none !important; }
html.bhp-modal-open { overflow: hidden; }

/* ════════════════════════════════════════════════════════════════
   HUB — desktop (≥1100): five glass panels set into the store scene
   ════════════════════════════════════════════════════════════════ */
.bhp-hub {
	position: relative;
	width: 100%;
	background: #1A120A;
	color: var(--bhp-ink);
}

.bhp-hub .bhp-book .bh-dw-hero {
	position: relative;
	max-width: 1672px;
	background: #1A120A;
}

/* Very wide screens: the room continues softly beyond the photo instead of black bars. */
@media (min-width: 1700px) {
	.bhp-hub { overflow: hidden; }
	.bhp-hub::before {
		content: '';
		position: absolute;
		inset: -40px;
		background: url("/wp-content/themes/kadence-child/assets/images/daily-wellness-scene-desktop-clean.webp") 50% 50% / cover no-repeat;
		filter: blur(28px) brightness(.72) saturate(1.1);
		pointer-events: none;
	}
	.bhp-hub .bhp-book { position: relative; z-index: 1; }
	.bhp-hub .bhp-book .bh-dw-hero { box-shadow: 0 0 60px 20px rgba(20, 12, 5, .35); }
}

.bhp-hub-scene { display: none; }

.bhp-hub-panel {
	position: relative;
	z-index: 7;
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
	align-self: start;
	box-sizing: border-box;
	width: clamp(440px, 40.5cqw, 620px);
	margin: clamp(18px, 2.2cqw, 42px) 0 0 clamp(24px, 4.6cqw, 88px);
	padding: 0;
	transition: opacity 420ms ease, transform 520ms cubic-bezier(.22,.72,.28,1), visibility 0s linear 0s;
}

/* Window light falling across the left of the room — keeps type crisp on the scene. */
.bhp-hub-veil {
	position: absolute;
	z-index: 6;
	grid-column: 1;
	grid-row: 1;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 48% 82% at 19% 50%, rgba(251, 246, 236, .80) 0%, rgba(251, 246, 236, .52) 54%, rgba(251, 246, 236, 0) 100%),
		radial-gradient(ellipse 40% 34% at 18% 100%, rgba(251, 246, 236, .86) 0%, rgba(251, 246, 236, .5) 55%, rgba(251, 246, 236, 0) 100%),
		linear-gradient(90deg, rgba(250, 244, 233, .46) 0%, rgba(250, 244, 233, 0) 47%);
	transition: opacity 600ms ease;
}
.bhp-hub .bh-dw-hero > .bhp-hub-veil { width: 100%; height: 100%; }

.bhp-hub-title {
	margin: 0 0 .26em;
	font-family: var(--bhp-display);
	font-weight: 600;
	font-size: clamp(38px, 3.15cqw, 52px);
	line-height: 1.02;
	letter-spacing: -.004em;
	color: var(--bhp-ink);
	text-wrap: balance;
}

.bhp-hub-intro {
	max-width: 31em;
	margin: 0 0 clamp(14px, 1.4cqw, 24px);
	font-family: var(--bhp-body);
	font-size: clamp(17px, 1.25cqw, 19px);
	line-height: 1.5;
	color: #3A342B;
	text-shadow: 0 0 14px rgba(253, 248, 236, 1), 0 0 6px rgba(253, 248, 236, .95), 0 0 2px rgba(253, 248, 236, .95);
}

/* ── The selector panels: apothecary glass ───────────────────────
   Warm, slightly amber glass like the display case in the room: frosted body,
   a bevelled top edge catching the window light, a gilt hairline inset (the same
   detail as the homepage tiles and the book), and a warm luminous rim that wakes
   — with a soft light that follows the pointer — when a panel is chosen. */
@property --bhp-rim {
	syntax: '<angle>';
	inherits: false;
	initial-value: 210deg;
}

.bhp-cards {
	display: grid;
	gap: clamp(9px, .8cqw, 13px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bhp-card {
	--gx: 22%;
	--gy: 0%;
	--bhp-etch: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='-120%20-170%20240%20320'%3E%3Cg%20fill='none'%20stroke='%23566C54'%20stroke-width='3'%20stroke-linecap='round'%20stroke-opacity='.17'%3E%3Cpath%20d='M0%20140V-96'/%3E%3Cpath%20d='M0-96c-16-23-15-49%200-68%2015%2019%2016%2045%200%2068Z'/%3E%3Cpath%20d='M-2-58c-31-24-65-26-92-11%2017%2032%2050%2048%2089%2035M2-25c33-25%2069-28%2098-11-18%2035-54%2052-94%2038M-2%2020c-28-22-58-24-83-10%2015%2029%2045%2043%2081%2032M2%2057c25-19%2052-21%2075-8-14%2027-41%2040-73%2029'/%3E%3C/g%3E%3C/svg%3E");
	--glass-top: rgba(255, 252, 244, .66);
	--glass-bottom: rgba(248, 238, 216, .54);
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(13px, 1.25cqw, 19px);
	box-sizing: border-box;
	min-height: clamp(64px, 4.8cqw, 80px);
	padding: clamp(8px, .65cqw, 12px) clamp(16px, 1.4cqw, 22px) clamp(8px, .65cqw, 12px) clamp(11px, .85cqw, 14px);
	border: 1px solid rgba(255, 249, 232, .78);
	border-radius: 14px;
	background:
		/* bright bevel catching the window light along the top edge */
		linear-gradient(180deg, rgba(255, 255, 255, .85) 0, rgba(255, 255, 255, 0) 3px),
		/* a soft streak of light through the glass */
		linear-gradient(112deg, rgba(255, 255, 255, 0) 14%, rgba(255, 255, 255, .42) 21%, rgba(255, 255, 255, .10) 30%, rgba(255, 255, 255, 0) 38%),
		/* warm window glow pooling at the left */
		radial-gradient(120% 140% at 0% 0%, rgba(255, 233, 186, .42) 0%, rgba(255, 233, 186, 0) 55%),
		/* an etched botanical sprig in the glass, like an apothecary label */
		var(--bhp-etch) right 6% center / auto 128% no-repeat,
		linear-gradient(180deg, var(--glass-top), var(--glass-bottom));
	-webkit-backdrop-filter: blur(18px) saturate(1.45) brightness(1.12);
	backdrop-filter: blur(18px) saturate(1.45) brightness(1.12);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .95),
		inset 0 -1px 0 rgba(132, 98, 46, .20),
		inset 0 0 22px rgba(255, 244, 214, .35),
		0 1px 1px rgba(58, 38, 14, .10),
		0 14px 28px -16px rgba(46, 29, 15, .55),
		0 32px 60px -42px rgba(46, 29, 15, .50);
	color: var(--bhp-ink);
	text-decoration: none !important;
	cursor: pointer;
	transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0px));
	transition: transform 260ms cubic-bezier(.22,.72,.28,1), box-shadow 300ms ease, border-color 300ms ease;
	-webkit-tap-highlight-color: transparent;
}

/* Gilt hairline inset — the homepage tile and book detail. */
.bhp-card::after {
	content: '';
	position: absolute;
	inset: 5px;
	z-index: 0;
	border: 1px solid rgba(184, 160, 106, .40);
	border-radius: 10px;
	pointer-events: none;
	transition: border-color 300ms ease;
}

/* Luminous rim: a warm gold–sage–amber edge, quietly present, alive when chosen. */
.bhp-card::before {
	content: '';
	position: absolute;
	inset: -1px;
	z-index: 0;
	padding: 1.5px;
	border-radius: 15px;
	background: conic-gradient(from var(--bhp-rim) at 50% 50%,
		rgba(214, 182, 110, .95), rgba(250, 230, 186, .9), rgba(151, 181, 146, .85),
		rgba(246, 214, 158, .95), rgba(190, 152, 86, .9), rgba(214, 182, 110, .95));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	opacity: .62;
	pointer-events: none;
	transition: opacity 360ms ease;
}

/* Soft light that follows the pointer across the glass. */
.bhp-card-light {
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	pointer-events: none;
	background:
		radial-gradient(220px circle at var(--gx) var(--gy), rgba(255, 238, 196, .70), rgba(255, 238, 196, 0) 62%),
		radial-gradient(140px circle at var(--gx) var(--gy), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 70%);
	opacity: 0;
	transition: opacity 360ms ease;
}

.bhp-card > .bhp-card-medal,
.bhp-card > .bhp-card-text,
.bhp-card > .bhp-card-go { position: relative; z-index: 1; }

.bhp-card:hover,
.bhp-card:focus-visible {
	--lift: -2px;
	border-color: rgba(255, 252, 240, .95);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 1),
		inset 0 -1px 0 rgba(132, 98, 46, .22),
		inset 0 0 26px rgba(255, 240, 204, .5),
		0 1px 1px rgba(58, 38, 14, .10),
		0 20px 34px -16px rgba(46, 29, 15, .6),
		0 0 0 1px rgba(201, 182, 131, .35),
		0 0 34px -6px rgba(240, 200, 120, .45);
}
.bhp-card:hover::before,
.bhp-card:focus-visible::before { opacity: 1; animation: bhp-rim-turn 7s linear infinite; }
.bhp-card:hover::after,
.bhp-card:focus-visible::after { border-color: rgba(169, 140, 75, .62); }
.bhp-card:hover .bhp-card-light,
.bhp-card:focus-visible .bhp-card-light,
.bhp-card.is-pressed .bhp-card-light { opacity: 1; }

@keyframes bhp-rim-turn { to { --bhp-rim: 570deg; } }

.bhp-card:focus { outline: none; }
.bhp-card:focus-visible {
	outline: 3px solid var(--bhp-brass);
	outline-offset: 4px;
}

.bhp-card:active { --lift: 0px; transition-duration: 90ms; }

.bhp-card.is-selected {
	--lift: 0px;
	border-color: rgba(255, 252, 240, 1);
	box-shadow:
		inset 0 1px 0 #fff,
		inset 0 0 28px rgba(232, 240, 226, .65),
		0 0 0 2px var(--bhp-sage),
		0 0 30px -4px rgba(120, 160, 120, .55),
		0 16px 30px -18px rgba(46, 29, 15, .6);
}

/* Medallion: a small glass lens in a double gilt ring. */
.bhp-card-medal {
	display: block;
	flex: none;
	width: clamp(48px, 3.6cqw, 58px);
	height: clamp(48px, 3.6cqw, 58px);
	border-radius: 50%;
	background:
		radial-gradient(ellipse 46% 30% at 38% 22%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%),
		radial-gradient(circle at 50% 120%, rgba(214, 226, 206, .9) 0%, rgba(214, 226, 206, 0) 60%),
		radial-gradient(circle at 50% 50%, #FCFAF3 0%, #F1F2EA 64%, #E2E8DA 100%);
	box-shadow:
		0 0 0 1.5px rgba(184, 160, 106, .85),
		0 0 0 4px rgba(255, 251, 240, .7),
		0 0 0 5px rgba(184, 160, 106, .38),
		inset 0 -3px 6px rgba(86, 108, 84, .10),
		0 6px 12px -6px rgba(28, 26, 23, .30);
	transition: box-shadow 300ms ease, transform 300ms ease;
}
.bhp-card-medal::after {
	content: '';
	position: absolute;
	inset: 22%;
	background: var(--bhp-sage-ink);
	-webkit-mask: var(--bhp-icon) center / contain no-repeat;
	mask: var(--bhp-icon) center / contain no-repeat;
}
.bhp-card:hover .bhp-card-medal,
.bhp-card:focus-visible .bhp-card-medal {
	box-shadow:
		0 0 0 1.5px rgba(169, 140, 75, 1),
		0 0 0 4px rgba(255, 251, 240, .85),
		0 0 0 5px rgba(184, 160, 106, .55),
		inset 0 -3px 6px rgba(86, 108, 84, .10),
		0 0 18px rgba(240, 206, 140, .55);
}

.bhp-card-text { display: block; min-width: 0; }

.bhp-card-name {
	display: block;
	font-family: var(--bhp-display);
	font-weight: 600;
	font-size: clamp(23px, 1.85cqw, 28px);
	line-height: 1.05;
	color: var(--bhp-ink);
}

.bhp-card-line {
	display: block;
	margin-top: 3px;
	font-family: var(--bhp-body);
	font-size: clamp(16px, 1.17cqw, 17.5px);
	line-height: 1.35;
	color: var(--bhp-ink-soft);
}

.bhp-card-go {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--bhp-ui);
	font-weight: 600;
	font-size: 14.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bhp-sage);
	white-space: nowrap;
}
.bhp-card-go svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 240ms ease;
}
.bhp-card:hover .bhp-card-go svg,
.bhp-card:focus-visible .bhp-card-go svg { transform: translateX(4px); }

/* ── Help line ──────────────────────────────────────────────── */
.bhp-hub-help {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 18px;
	margin: clamp(14px, 1.3cqw, 20px) 0 0;
	font-family: var(--bhp-body);
	color: var(--bhp-ink-soft);
}
.bhp-hub-help p { margin: 0; }
.bhp-hub-help-lead { font-size: 17px; line-height: 1.45; color: #3A342B; text-shadow: 0 0 12px rgba(253, 248, 236, .95), 0 0 3px rgba(253, 248, 236, .9); }
.bhp-hub-help-actions { display: inline-flex; flex-wrap: wrap; gap: 4px 18px; }

.bhp-help-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--bhp-ui);
	font-weight: 600;
	font-size: 16.5px;
	color: #16261B;
	text-shadow: 0 0 10px rgba(253, 248, 236, .95), 0 0 2px rgba(253, 248, 236, .9), 0 0 18px rgba(253, 248, 236, .8);
	text-decoration: underline;
	text-decoration-color: rgba(22, 38, 27, .45);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 4px;
	cursor: pointer;
}
.bhp-help-link:hover { text-decoration-color: currentColor; }
.bhp-help-link:focus-visible { outline: 3px solid var(--bhp-brass); outline-offset: 3px; border-radius: 3px; }

/* The book answers when a choice is pointed at or focused. */
.bhp-hub .bh-dw-resting-composite img { transition: filter 420ms ease; }
.bhp-hub.is-hinting .bh-dw-resting-composite img {
	filter: drop-shadow(0 0 26px rgba(255, 196, 120, .55)) brightness(1.05);
}

/* Reading: the panel steps aside and the book takes the room. */
.bhp-hub.is-reading .bhp-hub-panel {
	opacity: 0;
	transform: translateX(-28px);
	visibility: hidden;
	pointer-events: none;
	transition: opacity 360ms ease, transform 460ms ease, visibility 0s linear 460ms;
}
.bhp-hub.is-reading .bhp-hub-veil { opacity: 0; }

/* "All pathways" — the one way back to the five choices. */
.bhp-hub-back {
	position: relative;
	z-index: 9;
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
	align-self: start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	margin: 6px 0 0 16px;
	padding: 0 18px 0 14px;
	border: 1px solid rgba(255, 249, 232, .8);
	border-radius: 11px;
	background: linear-gradient(180deg, rgba(255, 252, 244, .9), rgba(248, 239, 220, .82));
	-webkit-backdrop-filter: blur(10px) saturate(1.3);
	backdrop-filter: blur(10px) saturate(1.3);
	font-family: var(--bhp-ui);
	font-weight: 600;
	font-size: 15px;
	color: var(--bhp-sage);
	cursor: pointer;
	box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(201, 182, 131, .35), 0 10px 22px -16px rgba(46, 29, 15, .6);
	animation: bhp-fade-in 360ms ease both;
}
.bhp-hub-back[hidden] { display: none; }
.bhp-hub-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bhp-hub-back:hover { background: var(--bhp-ivory); }
.bhp-hub-back:focus-visible { outline: 3px solid var(--bhp-brass); outline-offset: 3px; }

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

/* Desktop under the tall live header: keep all five choices (and help) above the fold. */
@media (min-width: 1100px) and (max-height: 940px) {
	.bhp-hub-panel { margin-top: 14px; }
	.bhp-hub-title { font-size: clamp(38px, 2.9cqw, 46px); margin-bottom: .16em; }
	.bhp-hub-intro { margin-bottom: 12px; }
	.bhp-cards { gap: 8px; }
	.bhp-card { min-height: 62px; padding-top: 6px; padding-bottom: 6px; }
	.bhp-card-medal { width: 46px; height: 46px; }
	.bhp-hub-help { margin-top: 8px; }
	.bhp-help-link { min-height: 40px; }
}
@media (min-width: 1100px) and (max-height: 800px) {
	.bhp-hub-panel { margin-top: 10px; }
	.bhp-hub-title { font-size: 38px; }
	.bhp-hub-intro { margin-bottom: 9px; }
	.bhp-hub-intro .bhp-more { display: none; }
	.bhp-cards { gap: 5px; }
	.bhp-card { min-height: 54px; padding-top: 3px; padding-bottom: 3px; }
	.bhp-card-medal { width: 42px; height: 42px; }
	.bhp-card-name { font-size: 22px; }
	.bhp-card-line { margin-top: 0; }
	.bhp-hub-help { margin-top: 2px; }
	.bhp-help-link { min-height: 34px; }
}

/* Desktop at narrower widths: tighter type so all five fit beside the book. */
@media (min-width: 1100px) and (max-width: 1365px) {
	.bhp-hub-intro { max-width: 25em; }
	.bhp-hub-back { min-height: 42px; margin: 3px 0 0 10px; padding: 0 14px 0 10px; font-size: 14.5px; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
	.bhp-hub-panel { width: 39cqw; margin-left: 3.4cqw; }
	.bhp-hub-intro { font-size: 16.5px; }
	.bhp-card-line { font-size: 16px; }
	.bhp-card-go span { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }
}

/* ════════════════════════════════════════════════════════════════
   HUB — phones and tablets (<1100): heading, the composed portrait room
   with the book on the table, then the glass panels resting on the walnut
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1099px) {
	.bhp-hub { background: var(--bhp-walnut); overflow-x: clip; }

	.bhp-hub .bhp-book .bh-dw-hero {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "scene" "choices";
		align-items: start;
		justify-items: stretch;
		place-items: stretch;
		max-width: none;
		margin: 0;
		padding: 0 !important;
		background: var(--bhp-walnut) !important;
	}

	.bhp-hub-veil { display: none; }
	.bhp-hub-panel { display: contents; }

	/* The heading sits in the room's window light, top-left. */
	.bhp-hub-head {
		grid-area: scene;
		align-self: start;
		position: relative;
		z-index: 2;
		box-sizing: border-box;
		width: 100%;
		max-width: 720px;
		margin: 0 auto;
		padding: 20px 20px 0;
		text-align: left;
		pointer-events: none;
	}
	.bhp-hub-head .bhp-hub-title { text-shadow: 0 1px 14px rgba(255, 248, 232, .9), 0 0 2px rgba(255, 248, 232, .8); }
	.bhp-hub-head .bhp-hub-intro { max-width: 15em; color: #332E26; text-shadow: 0 0 10px rgba(255, 248, 232, 1), 0 0 3px rgba(255, 248, 232, .95); }

	.bhp-hub-title { font-size: clamp(33px, 8.6cqw, 46px); margin-bottom: .18em; }
	.bhp-hub-intro { margin: 0; font-size: 17px; line-height: 1.45; }
	.bhp-hub-intro .bhp-more { display: none; }

	/* The room: the dedicated portrait image, full-bleed, with the book on the table. */
	.bhp-hub-scene {
		grid-area: scene;
		position: relative;
		display: block;
		height: clamp(380px, 54svh, 520px);
		overflow: hidden;
		background: #1A120A;
	}
	.bhp-hub-scene-room,
	.bhp-hub-scene-room img {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 30%;
	}
	.bhp-hub-scene-light {
		position: absolute;
		inset: 0;
		pointer-events: none;
		mix-blend-mode: screen;
		background:
			linear-gradient(116deg, rgba(255, 189, 108, 0) 0%, rgba(255, 189, 108, .28) 12%, rgba(255, 200, 128, .14) 28%, rgba(255, 200, 128, 0) 46%),
			radial-gradient(ellipse 60% 55% at 6% 16%, rgba(255, 176, 92, .34) 0%, transparent 76%);
		animation: bhp-bh-dw-glow-breathe 6800ms ease-in-out infinite;
	}
	.bhp-hub-scene-glow {
		position: absolute;
		left: 50%;
		bottom: 9%;
		width: 64%;
		height: 26%;
		transform: translateX(-50%);
		pointer-events: none;
		background: radial-gradient(ellipse 50% 50% at 50% 60%, rgba(255, 196, 118, .42) 0%, rgba(255, 186, 104, .14) 46%, transparent 72%);
		transition: opacity 420ms ease;
	}
	.bhp-hub-scene-book {
		position: absolute;
		z-index: 1;
		left: 50%;
		bottom: 6.5%;
		width: min(52%, 300px);
		height: auto;
		transform: translateX(-46%);
		filter: drop-shadow(0 18px 18px rgba(20, 12, 4, .45));
		transition: filter 420ms ease, transform 420ms ease;
	}
	.bhp-hub.is-hinting .bhp-hub-scene-book {
		filter: drop-shadow(0 18px 18px rgba(20, 12, 4, .45)) drop-shadow(0 0 22px rgba(255, 196, 120, .55)) brightness(1.05);
	}
	/* Window-light veil behind the heading (fades out before the book). */
	.bhp-hub-scene::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background:
			radial-gradient(ellipse 110% 50% at 22% 8%, rgba(251, 246, 236, .92) 0%, rgba(251, 246, 236, .72) 50%, rgba(251, 246, 236, 0) 100%),
			linear-gradient(180deg, rgba(250, 244, 233, .62) 0%, rgba(250, 244, 233, .2) 30%, rgba(250, 244, 233, 0) 42%);
	}
	.bhp-hub-scene-fade {
		position: absolute;
		left: 0; right: 0; bottom: 0;
		height: 26%;
		pointer-events: none;
		background: linear-gradient(180deg, rgba(36, 23, 13, 0) 0%, rgba(36, 23, 13, .78) 82%, var(--bhp-walnut) 100%);
	}

	/* The panels rest on the walnut, rising slightly into the room. */
	.bhp-hub-choices {
		grid-area: choices;
		position: relative;
		z-index: 3;
		box-sizing: border-box;
		width: 100%;
		max-width: 720px;
		margin: -30px auto 0;
		padding: 0 14px 30px;
	}
	.bhp-hub .bhp-hub-choices::before {
		content: '';
		position: absolute;
		inset: 30px -100vmax 0;
		z-index: -1;
		background:
			linear-gradient(180deg, rgba(36, 23, 13, 1) 0, rgba(36, 23, 13, .84) 140px, rgba(30, 19, 10, .88) 60%, rgba(26, 17, 9, .96)),
			url("/wp-content/themes/kadence-child/assets/images/daily-wellness-scene-mobile-clean.webp") 50% 100% / cover no-repeat;
	}

	.bhp-cards { gap: 10px; }
	.bhp-card {
		--glass-top: rgba(255, 252, 244, .90);
		--glass-bottom: rgba(249, 241, 224, .84);
		min-height: 74px;
		padding: 9px 16px 9px 10px;
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, .95),
			inset 0 -1px 0 rgba(132, 98, 46, .22),
			inset 0 0 22px rgba(255, 244, 214, .35),
			0 0 0 1px rgba(201, 182, 131, .25),
			0 16px 26px -16px rgba(0, 0, 0, .75),
			0 0 28px -12px rgba(240, 200, 120, .35);
	}
	.bhp-card::before { opacity: .6; }
	.bhp-card-medal { width: 50px; height: 50px; }
	.bhp-card-name { font-size: 23px; }
	.bhp-card-line { margin-top: 2px; font-size: 16px; line-height: 1.3; }

	.bhp-hub-help { margin-top: 18px; color: #EDE3CF; }
	.bhp-hub-help-lead { font-size: 17px; color: #F1E8D6; text-shadow: none; }
	.bhp-help-link { color: #F6EBCF; text-shadow: none; text-decoration-color: rgba(246, 235, 207, .5); }

	/* The real book stage waits off-stage until a panel is chosen. */
	.bhp-hub:not(.is-reading) .bhp-book .bh-dw-stage { display: none; }

	/* Reading: the room composition gives way to the full book. */
	.bhp-hub.is-choosing .bhp-hub-scene,
	.bhp-hub.is-choosing .bhp-hub-head,
	.bhp-hub.is-choosing .bhp-hub-choices { opacity: 0; transition: opacity 240ms ease; }
	.bhp-hub.is-reading .bh-dw-hero { grid-template-areas: "back" "stage"; }
	.bhp-hub.is-reading .bhp-hub-scene,
	.bhp-hub.is-reading .bhp-hub-head,
	.bhp-hub.is-reading .bhp-hub-choices { display: none; }
	.bhp-hub.is-reading .bhp-book .bh-dw-stage {
		grid-area: stage;
		width: 100%;
		max-width: 560px;
		margin: 0 auto;
		animation: bhp-fade-in 320ms ease both;
	}

	.bhp-hub-back {
		grid-area: back;
		grid-column: auto;
		grid-row: auto;
		justify-self: start;
		margin: 14px 0 12px 14px;
	}
}

@media (min-width: 768px) and (max-width: 1099px) {
	.bhp-hub-head { padding: 30px 32px 0; }
	.bhp-hub-scene { height: clamp(480px, 56svh, 660px); }
	.bhp-hub-scene-room img { object-position: 50% 34%; }
	.bhp-hub-scene::before {
		background:
			radial-gradient(ellipse 80% 32% at 26% 4%, rgba(251, 246, 236, .9) 0%, rgba(251, 246, 236, .6) 50%, rgba(251, 246, 236, 0) 100%),
			linear-gradient(180deg, rgba(250, 244, 233, .5) 0%, rgba(250, 244, 233, 0) 26%);
	}
	.bhp-hub-scene-book { width: min(36%, 320px); bottom: 7%; }
	.bhp-hub-choices { padding: 0 28px 40px; }
	.bhp-hub .bhp-cards { grid-template-columns: 1fr 1fr; }
	.bhp-hub .bhp-cards > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.bhp-hub.is-reading .bhp-book .bh-dw-stage { width: 100%; max-width: 941px; }
}

@media (max-width: 767px) {
	.bhp-hub-head { padding: 18px 18px 0; }
	.bhp-hub-title { font-size: clamp(32px, 8.8cqw, 38px); }
	.bhp-card { gap: 12px; }
	.bhp-card-medal { width: 46px; height: 46px; }
	.bhp-card-name { font-size: 22px; }
	.bhp-card-line { font-size: 16px; }
	.bhp-card { background-position: 0 0, 0 0, 0 0, right -22px center, 0 0; }
	.bhp-card-go span { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }
	.bhp-hub.is-reading .bhp-book .bh-dw-stage { max-width: none; }
}

@media (max-width: 1099px) and (max-height: 500px) {
	.bhp-hub-scene { height: clamp(240px, 78svh, 330px); }
	.bhp-hub-scene-book { width: min(30%, 220px); }
}

@media (max-width: 359px) {
	.bhp-card { grid-template-columns: auto minmax(0, 1fr); }
	.bhp-card-go { display: none; }
}

/* Touch screens: no tilt or hover sweep; a gentle press instead. */
@media (hover: none) {
	.bhp-card:hover { --lift: 0px; }
	.bhp-card:hover::before { animation: none; opacity: .6; }
}

@media (prefers-reduced-motion: reduce) {
	.bhp-card,
	.bhp-hub-panel,
	.bhp-hub-veil,
	.bhp-card-light,
	.bhp-hub-scene-book { transition: none !important; }
	.bhp-card { transform: none !important; }
	.bhp-card:hover::before,
	.bhp-card:focus-visible::before { animation: none; }
	.bhp-hub-scene-light { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   HUB v1.2 — visual polish (Oct 11 2026)
   The photograph carries the mood: no room-wide haze, only a soft local
   light behind the heading. Italic accent headline with a gilt rule,
   compact equal selectors, and a walnut-and-gilt help panel.
   ════════════════════════════════════════════════════════════════ */

/* 1 · The photograph: crisp, warm, unfogged. */
.bhp-hub .bh-dw-room-media img {
	filter: saturate(1.1) contrast(1.06) brightness(1.01);
	transition: filter 600ms ease;
}
.bhp-hub:not(.is-reading) .bh-dw-room-glow { opacity: .5; transition: opacity 600ms ease; }

.bhp-hub-veil {
	background:
		radial-gradient(ellipse 34% 30% at 17% 13%, rgba(252, 247, 237, .62) 0%, rgba(252, 247, 237, .30) 52%, rgba(252, 247, 237, 0) 100%);
}

/* 2 · The invitation. */
.bhp-hub-title {
	font-size: clamp(44px, 3.7cqw, 62px);
	line-height: .98;
	letter-spacing: -.012em;
	color: #241A10;
	text-shadow:
		0 1px 0 rgba(255, 251, 242, .55),
		0 0 22px rgba(253, 247, 234, .95),
		0 0 8px rgba(253, 247, 234, .75);
	margin-bottom: 0;
}
.bhp-hub-title-accent {
	display: block;
	font-style: italic;
	font-weight: 600;
	color: #34513E;
	letter-spacing: -.006em;
	padding-left: .04em;
}
/* A gilt rule with a small seed: the boutique's label detail. */
.bhp-hub-title::after {
	content: '';
	display: block;
	width: 172px;
	height: 12px;
	margin: .34em 0 .1em;
	background:
		radial-gradient(circle, #A98C4B 0 2.6px, rgba(169, 140, 75, 0) 3.2px) 50% 50% / 12px 12px no-repeat,
		linear-gradient(90deg, rgba(169, 140, 75, 0), #A98C4B 22%, #B8A06A 44%, rgba(184, 160, 106, 0) 47%, rgba(184, 160, 106, 0) 53%, #B8A06A 56%, #A98C4B 78%, rgba(169, 140, 75, 0)) 50% 50% / 100% 1.2px no-repeat;
}
.bhp-hub-intro {
	max-width: 27em;
	margin-top: 10px;
	margin-bottom: clamp(18px, 1.6cqw, 26px);
	font-size: clamp(17px, 1.25cqw, 19px);
	color: #2F291F;
	text-shadow: 0 0 16px rgba(253, 248, 236, 1), 0 0 6px rgba(253, 248, 236, .95), 0 0 2px rgba(253, 248, 236, .9);
}

/* 3 · Desktop selectors: narrower, equal, crafted. */
@media (min-width: 1100px) {
	.bhp-hub-choices { width: clamp(430px, 32.5cqw, 520px); }
	.bhp-cards { gap: clamp(9px, .75cqw, 12px); }
	.bhp-card {
		--glass-top: rgba(255, 252, 244, .80);
		--glass-bottom: rgba(250, 241, 222, .72);
		height: clamp(66px, 4.85cqw, 76px);
		min-height: 0;
		padding: 0 clamp(16px, 1.25cqw, 20px) 0 clamp(10px, .8cqw, 13px);
		gap: clamp(12px, 1.05cqw, 16px);
		background-position: 0 0, 0 0, 0 0, right -14px center, 0 0;
	}
	.bhp-card-medal { width: clamp(46px, 3.4cqw, 54px); height: clamp(46px, 3.4cqw, 54px); }
	.bhp-card-name { font-size: clamp(22px, 1.75cqw, 26px); line-height: 1.02; }
	.bhp-card-line {
		margin-top: 3px;
		font-size: clamp(15.5px, 1.1cqw, 16.5px);
		line-height: 1.3;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.bhp-card-go { font-size: 13px; letter-spacing: .1em; gap: 7px; }
}

/* 4 · Help: a friendly invitation set in walnut and gilt. */
.bhp-hub .bhp-hub-help {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 18px;
	box-sizing: border-box;
	margin: clamp(26px, 2.2cqw, 36px) 0 0;
	padding: 18px 20px 18px 24px;
	border: 1px solid rgba(201, 182, 131, .55);
	border-radius: 14px;
	background:
		radial-gradient(120% 140% at 0% 0%, rgba(214, 170, 96, .20) 0%, rgba(214, 170, 96, 0) 55%),
		linear-gradient(180deg, rgba(52, 36, 21, .90), rgba(34, 23, 13, .93));
	-webkit-backdrop-filter: blur(10px) saturate(1.2);
	backdrop-filter: blur(10px) saturate(1.2);
	box-shadow:
		inset 0 1px 0 rgba(255, 233, 186, .22),
		0 18px 34px -18px rgba(20, 12, 4, .75);
	color: #F1E8D6;
}
.bhp-hub .bhp-hub-help::after {
	content: '';
	position: absolute;
	inset: 5px;
	border: 1px solid rgba(201, 182, 131, .22);
	border-radius: 10px;
	pointer-events: none;
}
.bhp-hub .bhp-hub-help-lead {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 2px;
	font-family: var(--bhp-body);
	font-size: 16px;
	line-height: 1.35;
	color: #E6D9BF;
	text-shadow: none;
}
.bhp-hub-help-title {
	font-family: var(--bhp-display);
	font-weight: 600;
	font-size: 25px;
	line-height: 1.05;
	color: #FBF3E2;
}
.bhp-hub .bhp-hub-help-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }

.bhp-hub .bhp-help-link {
	gap: 9px;
	min-height: 46px;
	padding: 0 18px 0 15px;
	border-radius: 11px;
	font-family: var(--bhp-ui);
	font-weight: 600;
	font-size: 15.5px;
	letter-spacing: .01em;
	text-decoration: none;
	text-shadow: none;
	white-space: nowrap;
	transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}
.bhp-hub .bhp-help-link svg {
	flex: none;
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.bhp-hub .bhp-help-link--bud {
	border: 1px solid #F3E6C6;
	background: linear-gradient(180deg, #FFF9EC, #F2E5C6);
	color: #2E4A37;
	box-shadow: inset 0 1px 0 #fff, 0 6px 16px -8px rgba(240, 200, 120, .55);
}
.bhp-hub .bhp-help-link--bud:hover { background: linear-gradient(180deg, #FFFDF5, #F7ECD2); transform: translateY(-1px); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(201, 182, 131, .5), 0 10px 22px -10px rgba(240, 200, 120, .7); }
.bhp-hub .bhp-help-link--mail {
	border: 1px solid rgba(201, 182, 131, .7);
	background: rgba(255, 244, 220, .06);
	color: #F6EBCF;
}
.bhp-hub .bhp-help-link--mail:hover { background: rgba(255, 244, 220, .14); border-color: #D9C38E; transform: translateY(-1px); }
.bhp-hub .bhp-help-link:focus-visible { outline: 3px solid #D9C38E; outline-offset: 3px; border-radius: 11px; }

/* Desktop heights: keep the five choices above the fold; help may sit just below it. */
@media (min-width: 1100px) and (max-height: 940px) {
	.bhp-hub-title { font-size: clamp(42px, 3.3cqw, 54px); margin-bottom: 0; }
	.bhp-hub-intro { margin-bottom: 16px; }
	.bhp-cards { gap: 9px; }
	.bhp-card { height: 66px; min-height: 0; padding-top: 0; padding-bottom: 0; }
	.bhp-card-medal { width: 46px; height: 46px; }
	.bhp-hub .bhp-hub-help { margin-top: 24px; }
	.bhp-hub .bhp-help-link { min-height: 44px; }
}
@media (min-width: 1100px) and (max-height: 800px) {
	.bhp-hub-title { font-size: 40px; }
	.bhp-hub-title::after { margin-top: .26em; }
	.bhp-cards { gap: 7px; }
	.bhp-card { height: 58px; }
	.bhp-card-medal { width: 42px; height: 42px; }
	.bhp-card-name { font-size: 22px; }
	.bhp-hub .bhp-hub-help { margin-top: 18px; padding-top: 12px; padding-bottom: 12px; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
	.bhp-hub-choices { width: 37cqw; }
	.bhp-hub-help-title { font-size: 23px; }
}

/* 5 · Phones and tablets: same composition, clearer room, finished help panel. */
@media (max-width: 1099px) {
	.bhp-hub-choices { width: 100%; }
	.bhp-hub-scene::before {
		background:
			radial-gradient(ellipse 92% 30% at 24% 7%, rgba(252, 247, 237, .74) 0%, rgba(252, 247, 237, .38) 50%, rgba(252, 247, 237, 0) 100%);
	}
	.bhp-hub-scene-room img { filter: saturate(1.1) contrast(1.06); }
	.bhp-hub-head .bhp-hub-title {
		font-size: clamp(36px, 9.6cqw, 50px);
		text-shadow: 0 1px 0 rgba(255, 251, 242, .5), 0 0 18px rgba(255, 248, 232, .95), 0 0 6px rgba(255, 248, 232, .8);
	}
	.bhp-hub-title::after { width: 140px; margin-top: .3em; }
	.bhp-hub-head .bhp-hub-intro { margin-top: 6px; }

	.bhp-hub .bhp-hub-help {
		margin-top: 30px;
		padding: 20px;
		border-color: rgba(201, 182, 131, .5);
		background:
			radial-gradient(120% 140% at 0% 0%, rgba(214, 170, 96, .18) 0%, rgba(214, 170, 96, 0) 60%),
			linear-gradient(180deg, rgba(70, 49, 29, .78), rgba(48, 32, 18, .86));
	}
	.bhp-hub .bhp-hub-help-actions { width: 100%; }
	.bhp-hub .bhp-help-link { flex: 1 1 0; justify-content: center; }
	.bhp-hub .bhp-help-link--mail { color: #F6EBCF; }
}
@media (min-width: 768px) and (max-width: 1099px) {
	.bhp-hub-scene::before {
		background: radial-gradient(ellipse 70% 24% at 26% 4%, rgba(252, 247, 237, .72) 0%, rgba(252, 247, 237, .34) 50%, rgba(252, 247, 237, 0) 100%);
	}
	.bhp-hub .bhp-hub-help-actions { width: auto; }
	.bhp-hub .bhp-help-link { flex: none; }
}
@media (max-width: 767px) {
	.bhp-hub-scene::before {
		background:
			radial-gradient(ellipse 100% 36% at 22% 9%, rgba(252, 247, 237, .80) 0%, rgba(252, 247, 237, .44) 52%, rgba(252, 247, 237, 0) 100%);
	}
	.bhp-hub .bhp-card { gap: 11px; padding-right: 12px; }
	.bhp-hub .bhp-card-line { font-size: 15px; letter-spacing: -.004em; }
}
@media (max-width: 380px) {
	.bhp-hub .bhp-help-link { flex: 1 1 100%; }
}

/* ── v1.2.1 micro-fix (Paul's markup, Oct 11) ───────────────────── */
/* Desktop: shorter selectors, compact sage-and-gold help panel. */
@media (min-width: 1100px) {
	.bhp-hub-choices,
	.bhp-hub .bhp-hub-choices { width: clamp(380px, 27.5cqw, 425px); }
	.bhp-card-go span { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }
	.bhp-card-line { font-size: clamp(15px, 1.08cqw, 16px); }

	.bhp-hub .bhp-hub-help {
		gap: 10px 14px;
		margin-top: 20px;
		padding: 13px 14px 14px 18px;
		border-radius: 12px;
	}
	.bhp-hub-help-title { font-size: 21px; }
	.bhp-hub .bhp-hub-help-lead { font-size: 14.5px; }
	.bhp-hub .bhp-hub-help-actions { gap: 8px; }
	.bhp-hub .bhp-help-link { min-height: 40px; padding: 0 14px 0 12px; font-size: 14.5px; gap: 7px; }
	.bhp-hub .bhp-help-link svg { width: 17px; height: 17px; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
	.bhp-hub-choices,
	.bhp-hub .bhp-hub-choices { width: 30cqw; min-width: 350px; }
}
@media (min-width: 1100px) {
.bhp-hub .bhp-hub-help {
	border-color: rgba(201, 182, 131, .75);
	background:
		radial-gradient(120% 150% at 0% 0%, rgba(232, 208, 150, .22) 0%, rgba(232, 208, 150, 0) 55%),
		linear-gradient(180deg, rgba(71, 98, 79, .94), rgba(52, 76, 60, .95));
	box-shadow:
		inset 0 1px 0 rgba(255, 244, 214, .28),
		0 16px 30px -18px rgba(20, 30, 22, .7);
}
.bhp-hub .bhp-hub-help::after { border-color: rgba(214, 192, 136, .38); }
.bhp-hub .bhp-hub-help-lead { color: #E9E4CF; }
.bhp-hub-help-title { color: #FBF5E4; }
.bhp-hub .bhp-help-link--bud {
	border-color: #E6D29C;
	background: linear-gradient(180deg, #FBF1D6, #E9D49B);
	color: #2A4233;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 6px 14px -8px rgba(20, 30, 22, .6);
}
.bhp-hub .bhp-help-link--bud:hover { background: linear-gradient(180deg, #FFF7E2, #EFDCA8); }
.bhp-hub .bhp-help-link--mail { border-color: rgba(222, 200, 140, .85); background: rgba(255, 244, 214, .07); color: #F8EFD6; }
.bhp-hub .bhp-help-link--mail:hover { background: rgba(255, 244, 214, .16); border-color: #E6D29C; }
}

/* Mobile: no intro line; the room stays crisp below the divider. */
@media (max-width: 767px) {
	.bhp-hub-head .bhp-hub-intro { display: none; }
	.bhp-hub-scene::before {
		background: radial-gradient(ellipse 88% 24% at 22% 3%, rgba(252, 247, 237, .72) 0%, rgba(252, 247, 237, .32) 55%, rgba(252, 247, 237, 0) 100%);
	}
	.bhp-hub-scene-light { display: none; }
	.bhp-hub-scene-fade { height: 9%; background: linear-gradient(180deg, rgba(36, 23, 13, 0), var(--bhp-walnut)); }
}

/* Very small phones (<360px): the approved open-journal growth rules only start at 360px in the
   kit; mirror them here so the quiz never clips on 320px screens. */
@media (max-width: 359px) {
	.bhp-book[data-bhp-state="quiz-revealing"] .bh-dw-stage,
	.bhp-book[data-bhp-state="open"] .bh-dw-stage {
		aspect-ratio: auto !important;
		height:
			var(
				--bh-dw-mobile-open-stage-height-safe,
				940px
			) !important;
		min-height:
			var(
				--bh-dw-mobile-open-stage-height-safe,
				940px
			) !important;
		overflow: hidden !important;
	}

	.bhp-book[data-bhp-state="quiz-revealing"] .bh-dw-room-media img,
	.bhp-book[data-bhp-state="open"] .bh-dw-room-media img {
		object-fit: cover !important;
		object-position: 50% 50% !important;
	}

	.bhp-book[data-bhp-state="quiz-revealing"] .bh-dw-book-rig,
	.bhp-book[data-bhp-state="open"] .bh-dw-book-rig {
		top: 50% !important;
		left: 50% !important;
		width: calc(100% - 30px) !important;
		height: calc(100% - 36px) !important;
		max-width: none !important;
		aspect-ratio: auto !important;
		transform: translate(-50%, -50%) scale(1) !important;
	}

	.bhp-book[data-bhp-state="quiz-revealing"] .bh-dw-quiz-slot,
	.bhp-book[data-bhp-state="open"] .bh-dw-quiz-slot {
		overflow: hidden !important;
		overscroll-behavior: auto !important;
	}
	.bhp-book[data-bhp-state="quiz-revealing"] .bh-dw-quiz-slot .bh-quiz-mount,
	.bhp-book[data-bhp-state="open"] .bh-dw-quiz-slot .bh-quiz-mount,
	.bhp-book[data-bhp-state="quiz-revealing"] .bh-dw-quiz-slot .bh-quiz-mount .bhq-wrap,
	.bhp-book[data-bhp-state="open"] .bh-dw-quiz-slot .bh-quiz-mount .bhq-wrap,
	.bhp-book[data-bhp-state="quiz-revealing"] .bh-dw-quiz-slot .bh-quiz-mount .bhq-paper,
	.bhp-book[data-bhp-state="open"] .bh-dw-quiz-slot .bh-quiz-mount .bhq-paper {
		height: auto !important;
		min-height: 0 !important;
	}

	.bhp-book[data-bhp-state="quiz-revealing"] .bh-dw-quiz-slot .bh-quiz-mount .bhq-paper,
	.bhp-book[data-bhp-state="open"] .bh-dw-quiz-slot .bh-quiz-mount .bhq-paper {
		justify-content: flex-start !important;
		overflow: visible !important;
	}
}

/* Phones and tablets inside our hosts: if a long question still outgrows the paper, the paper
   scrolls instead of clipping, and content starts at the top. */
@media (max-width: 1099px) {
	.bhp-hub .bh-dw-quiz-slot .bh-quiz-mount .bhq-paper,
	.bhp-dialog .bh-dw-quiz-slot .bh-quiz-mount .bhq-paper {
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		justify-content: flex-start !important;
	}
}

/* ════════════════════════════════════════════════════════════════
   CHAPTER PAGES — same book, the chapter's own intro and Start
   (layout comes from the approved kit; only host sizing here)
   ════════════════════════════════════════════════════════════════ */
.bhp-chapter .bhp-book .bh-dw-hero { margin: 0 auto; }

/* ════════════════════════════════════════════════════════════════
   LIGHTBOX — the book opens over the page
   ════════════════════════════════════════════════════════════════ */
.bhp-dialog {
	position: fixed;
	inset: 0;
	box-sizing: border-box;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: #1A120A;
	color: var(--bhp-ink, #2B2822);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.bhp-dialog[open] { animation: bhp-dialog-in 260ms ease both; }
.bhp-dialog::backdrop { background: rgba(20, 13, 6, .78); }
@keyframes bhp-dialog-in { from { opacity: 0; } to { opacity: 1; } }

.bhp-dialog-bar {
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	box-sizing: border-box;
	height: 64px;
	padding: 0 max(16px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
	background: linear-gradient(180deg, rgba(26, 18, 10, .96), rgba(26, 18, 10, .82));
	color: #F5EBDD;
}

.bhp-dialog-title {
	margin: 0;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 600;
	font-size: 25px;
	line-height: 1;
	color: #F5EBDD;
}

.bhp-dialog-close {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 48px;
	min-height: 48px;
	padding: 0 14px 0 16px;
	border: 1px solid rgba(245, 235, 221, .35);
	border-radius: 10px;
	background: rgba(245, 235, 221, .08);
	font-family: Inter, 'Segoe UI', Arial, sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: #F5EBDD;
	cursor: pointer;
}
.bhp-dialog-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.bhp-dialog-close:hover { background: rgba(245, 235, 221, .16); }
.bhp-dialog-close:focus-visible { outline: 3px solid #C9B683; outline-offset: 3px; }

.bhp-book--dialog .bh-dw-hero {
	max-width: none !important;
	padding: 0 !important;
	background: #1A120A !important;
}

/* Desktop: the whole book fits the window. */
.bhp-book--dialog .bh-dw-stage { width: min(100%, calc((100dvh - 64px) * 1.7768)); margin: 0 auto; }

@media (min-width: 768px) and (max-width: 1099px) {
	.bhp-book--dialog .bh-dw-stage { width: 100%; max-width: 941px; }
}

@media (max-width: 767px) {
	.bhp-dialog-bar { height: 58px; }
	.bhp-dialog-title { font-size: 23px; }
	.bhp-book--dialog .bh-dw-hero { padding: 0 0 20px !important; }
	.bhp-book--dialog .bh-dw-stage { width: 100%; max-width: 560px; }
}

@media (prefers-reduced-motion: reduce) {
	.bhp-dialog[open] { animation: none; }
}

/* Live Hub micro-fix: give the invitation a little breathing room above the cards. */
@media (min-width: 1100px) {
	.bhp-hub .bhp-hub-choices { padding-top: 12px; }
}