/* ------------------------------------------------------------------
 * SERAPH HUNTER — BOOK SERIES page furniture  (".shb-bk")
 * Thelma (web lane), 2026-08-09.
 *
 * Companion to shb-blocks.css. The Book Series page is the site's
 * showpiece and keeps its OWN look — Cinzel Decorative display type, a
 * fixed star field, reveal-on-scroll, realm and character cards. None of
 * that belongs in the shared stylesheet every rebuilt page downloads, so
 * it lives here and loads only on a page whose content contains "shb-bk".
 *
 * 🔴 WHAT WAS REMOVED ON THE WAY OUT, and it matters:
 * the page's old inline <style> opened with
 *     *, *::before, *::after { box-sizing:border-box; margin:0; padding:0 }
 * with NO page scope. That reset was stripping the margins and padding off
 * every element on the site — header, footer, menus, everything — on every
 * load of this page. Same class of fault as the one found on Brenzel's
 * Trunk. It is now scoped to `.shb-bk *` and can touch nothing else.
 *
 * Also removed: a duplicate copy of the reveal script that WordPress had
 * broken by inserting <br /> tags into it, so it had never run at all.
 *
 * The star field is a faithful rebuild rather than a byte copy — the same
 * two drifting layers, a slightly shorter list of points. At one pixel per
 * star the difference is not visible; it is stated here so nobody later
 * finds the counts different and thinks something was lost.
 *
 * TO REMOVE: delete this file, shb-books.js, and the shb-bk block in
 * sh-block-pages.php.
 * ------------------------------------------------------------------ */

.shb-bk {
	--ink: #09080a;
	--ink2: #110f14;
	--parchment: #f0e6d0;
	--parchment-dim: #c9b896;
	--gold: #c9943a;
	--gold-bright: #e8b84b;
	--gold-dim: #7a5820;
	--crimson: #8b1a1a;
	--silver: #a8b8c8;

	font-family: 'EB Garamond', Georgia, serif;
	background: var(--ink);
	color: var(--parchment);
	position: relative;
	/* 🔴 `overflow-x: hidden` — which is what the old page used — silently
	 * makes overflow-y compute to `auto`, turning this element into a SCROLL
	 * CONTAINER. That stopped IntersectionObserver firing at all, so every
	 * reveal-on-scroll section stayed at opacity 0 and the entire page below
	 * the hero was invisible to a reader. Proved with a throwaway observer on
	 * the live page: it never fired once. `clip` does the same visual job and
	 * creates no scroll container. Do not change this back to `hidden`. */
	overflow-x: clip;
}

/* Scoped, unlike the reset this replaces. */
.shb-bk *,
.shb-bk *::before,
.shb-bk *::after { box-sizing: border-box; }

.shb-bk p { margin: 0; }
.shb-bk img { max-width: 100%; height: auto; display: block; }
body:has(.shb-bk) .entry-title.main_title { display: none; }

/* --- The star field ----------------------------------------------- */
.shb-bk .shb-bk-stars { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.shb-bk .shb-bk-stars::before,
.shb-bk .shb-bk-stars::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(1px 1px at 10% 8%, rgba(240,230,208,.7) 0, transparent 100%),
		radial-gradient(1px 1px at 23% 19%, rgba(240,230,208,.4) 0, transparent 100%),
		radial-gradient(1.5px 1.5px at 37% 5%, rgba(201,148,58,.6) 0, transparent 100%),
		radial-gradient(1px 1px at 51% 14%, rgba(240,230,208,.5) 0, transparent 100%),
		radial-gradient(1px 1px at 68% 3%, rgba(240,230,208,.6) 0, transparent 100%),
		radial-gradient(1.5px 1.5px at 79% 22%, rgba(201,148,58,.4) 0, transparent 100%),
		radial-gradient(1px 1px at 88% 11%, rgba(240,230,208,.5) 0, transparent 100%),
		radial-gradient(1px 1px at 4% 31%, rgba(240,230,208,.3) 0, transparent 100%),
		radial-gradient(1px 1px at 15% 44%, rgba(240,230,208,.5) 0, transparent 100%),
		radial-gradient(1px 1px at 29% 38%, rgba(168,184,200,.4) 0, transparent 100%),
		radial-gradient(1px 1px at 44% 27%, rgba(240,230,208,.4) 0, transparent 100%),
		radial-gradient(1px 1px at 57% 35%, rgba(240,230,208,.6) 0, transparent 100%),
		radial-gradient(1.5px 1.5px at 72% 42%, rgba(201,148,58,.3) 0, transparent 100%),
		radial-gradient(1px 1px at 83% 29%, rgba(240,230,208,.4) 0, transparent 100%),
		radial-gradient(1px 1px at 93% 47%, rgba(240,230,208,.5) 0, transparent 100%),
		radial-gradient(1px 1px at 6% 57%, rgba(240,230,208,.3) 0, transparent 100%),
		radial-gradient(1px 1px at 18% 63%, rgba(168,184,200,.4) 0, transparent 100%),
		radial-gradient(1px 1px at 33% 71%, rgba(240,230,208,.5) 0, transparent 100%),
		radial-gradient(1px 1px at 48% 58%, rgba(240,230,208,.3) 0, transparent 100%),
		radial-gradient(1px 1px at 61% 67%, rgba(240,230,208,.4) 0, transparent 100%),
		radial-gradient(1.5px 1.5px at 74% 54%, rgba(201,148,58,.5) 0, transparent 100%),
		radial-gradient(1px 1px at 86% 62%, rgba(240,230,208,.3) 0, transparent 100%),
		radial-gradient(1px 1px at 96% 73%, rgba(240,230,208,.5) 0, transparent 100%),
		radial-gradient(1px 1px at 11% 82%, rgba(240,230,208,.4) 0, transparent 100%),
		radial-gradient(1px 1px at 26% 88%, rgba(168,184,200,.3) 0, transparent 100%),
		radial-gradient(1px 1px at 41% 79%, rgba(240,230,208,.5) 0, transparent 100%),
		radial-gradient(1px 1px at 54% 91%, rgba(240,230,208,.3) 0, transparent 100%),
		radial-gradient(1.5px 1.5px at 67% 84%, rgba(201,148,58,.4) 0, transparent 100%),
		radial-gradient(1px 1px at 78% 77%, rgba(240,230,208,.5) 0, transparent 100%),
		radial-gradient(1px 1px at 91% 86%, rgba(240,230,208,.3) 0, transparent 100%);
}
.shb-bk .shb-bk-stars::after {
	background-image:
		radial-gradient(1px 1px at 7% 16%, rgba(240,230,208,.4) 0, transparent 100%),
		radial-gradient(1px 1px at 20% 9%, rgba(240,230,208,.5) 0, transparent 100%),
		radial-gradient(1px 1px at 35% 24%, rgba(168,184,200,.3) 0, transparent 100%),
		radial-gradient(1px 1px at 50% 7%, rgba(240,230,208,.4) 0, transparent 100%),
		radial-gradient(1px 1px at 63% 18%, rgba(240,230,208,.5) 0, transparent 100%),
		radial-gradient(1px 1px at 77% 13%, rgba(201,148,58,.3) 0, transparent 100%),
		radial-gradient(1px 1px at 90% 6%, rgba(240,230,208,.4) 0, transparent 100%),
		radial-gradient(1px 1px at 3% 48%, rgba(240,230,208,.3) 0, transparent 100%),
		radial-gradient(1px 1px at 16% 52%, rgba(240,230,208,.5) 0, transparent 100%),
		radial-gradient(1px 1px at 31% 45%, rgba(168,184,200,.4) 0, transparent 100%),
		radial-gradient(1px 1px at 46% 61%, rgba(240,230,208,.3) 0, transparent 100%),
		radial-gradient(1px 1px at 59% 49%, rgba(240,230,208,.4) 0, transparent 100%),
		radial-gradient(1px 1px at 70% 68%, rgba(201,148,58,.3) 0, transparent 100%),
		radial-gradient(1px 1px at 85% 55%, rgba(240,230,208,.5) 0, transparent 100%),
		radial-gradient(1px 1px at 95% 64%, rgba(240,230,208,.3) 0, transparent 100%),
		radial-gradient(1px 1px at 9% 74%, rgba(240,230,208,.4) 0, transparent 100%),
		radial-gradient(1px 1px at 22% 80%, rgba(168,184,200,.3) 0, transparent 100%),
		radial-gradient(1px 1px at 38% 93%, rgba(240,230,208,.5) 0, transparent 100%),
		radial-gradient(1px 1px at 52% 85%, rgba(240,230,208,.3) 0, transparent 100%),
		radial-gradient(1px 1px at 65% 97%, rgba(201,148,58,.4) 0, transparent 100%);
	animation: shb-bk-twinkle 8s ease-in-out infinite alternate;
}
@keyframes shb-bk-twinkle { 0% { opacity: .6; } 100% { opacity: 1; } }

/* --- Shared section furniture ------------------------------------- */
.shb-bk .shb-bk-sec { position: relative; z-index: 1; padding: 6rem 2rem; max-width: 1100px; margin: 0 auto; }
.shb-bk .shb-bk-sec--wide { max-width: 1240px; }
.shb-bk .shb-bk-sec--center { text-align: center; }

.shb-bk .shb-bk-eyebrow {
	font-family: 'Cinzel', serif;
	font-size: .62rem;
	letter-spacing: .38em;
	text-transform: uppercase;
	color: var(--gold) !important;
	margin: 0 0 1rem !important;
	text-align: center;
}
.shb-bk h2.shb-bk-title {
	font-family: 'Cinzel Decorative', 'Cinzel', serif;
	font-size: clamp(1.5rem, 3.4vw, 2.4rem);
	font-weight: 700;
	color: var(--parchment) !important;
	text-align: center;
	margin: 0 0 1rem;
	letter-spacing: .04em;
}
.shb-bk .shb-bk-rule {
	width: 90px; height: 1px;
	margin: 1.2rem auto 2.4rem;
	background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}
.shb-bk .shb-bk-divider { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 1.4rem 0; }
.shb-bk .shb-bk-divider-line { width: 90px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dim)); }
.shb-bk .shb-bk-divider-line:last-child { background: linear-gradient(90deg, var(--gold-dim), transparent); }
.shb-bk .shb-bk-gem { width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 14px rgba(201,148,58,.6); }

/* --- Buttons ------------------------------------------------------- */
.shb-bk .shb-bk-btn,
.shb-bk .shb-bk-btn-ghost {
	display: inline-block;
	font-family: 'Cinzel', serif;
	font-size: .74rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	padding: 1rem 2.1rem;
	text-decoration: none;
	transition: .3s;
	border-radius: 0;
}
.shb-bk .shb-bk-btn { background: var(--gold); color: #0e0d10 !important; border: 1px solid var(--gold); }
.shb-bk .shb-bk-btn:hover { background: var(--gold-bright); border-color: var(--gold-bright); }
.shb-bk .shb-bk-btn-ghost { background: transparent; color: var(--parchment) !important; border: 1px solid rgba(201,148,58,.5); }
.shb-bk .shb-bk-btn-ghost:hover { border-color: var(--gold-bright); color: var(--gold-bright) !important; }
.shb-bk .shb-bk-cta-row { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 2rem; }

/* --- Hero ---------------------------------------------------------- */
.shb-bk .shb-bk-hero {
	position: relative; z-index: 1;
	min-height: 88vh;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	text-align: center;
	padding: 6rem 2rem 4rem;
	background:
		radial-gradient(ellipse 80% 60% at 50% 40%, rgba(42,32,10,.95) 0, transparent 70%),
		radial-gradient(ellipse 60% 40% at 50% 80%, rgba(139,26,26,.15) 0, transparent 60%);
}
.shb-bk .shb-bk-hero-eyebrow {
	font-family: 'Cinzel', serif;
	font-size: .68rem; letter-spacing: .45em; text-transform: uppercase;
	color: var(--gold) !important; margin: 0 0 1.8rem !important;
}
.shb-bk h1.shb-bk-name {
	font-family: 'Cinzel Decorative', 'Cinzel', serif;
	font-size: clamp(2.8rem, 8vw, 6.5rem);
	font-weight: 700; line-height: 1;
	color: var(--parchment) !important;
	text-align: center; margin: 0;
	text-shadow: 0 0 60px rgba(201,148,58,.28);
}
.shb-bk .shb-bk-subtitle {
	font-size: clamp(1rem, 2vw, 1.2rem);
	color: var(--parchment-dim) !important;
	max-width: 40ch; margin: 0 auto !important; line-height: 1.7;
}
.shb-bk .shb-bk-tagline {
	font-family: 'Cinzel', serif;
	font-size: .7rem; letter-spacing: .4em; text-transform: uppercase;
	color: var(--gold-dim) !important; margin: 1.6rem 0 0 !important;
}

/* --- The Wager ----------------------------------------------------- */
/* `clip`, not `hidden`, for the same reason as the wrapper above. */
.shb-bk .shb-bk-wager { position: relative; z-index: 1; padding: 7rem 2rem; text-align: center; overflow: clip; }
.shb-bk .shb-bk-wager::before {
	content: ''; position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 600px; height: 600px; border-radius: 50%;
	background: radial-gradient(circle, rgba(139,26,26,.12) 0, transparent 70%);
	pointer-events: none;
}
.shb-bk .shb-bk-wager-inner { max-width: 700px; margin: 0 auto; position: relative; }
.shb-bk .shb-bk-wager-text {
	font-size: clamp(1.05rem, 2vw, 1.25rem);
	line-height: 1.9;
	color: rgba(201,185,150,.85) !important;
	margin: 0 0 2.5rem !important;
}
.shb-bk .shb-bk-wager-text em { color: var(--parchment) !important; font-style: italic; }

/* --- Pull quotes --------------------------------------------------- */
.shb-bk .shb-bk-quote-mark {
	font-family: 'Cinzel Decorative', serif;
	font-size: 4rem; line-height: 1;
	color: var(--gold-dim); text-align: center; margin-bottom: .5rem;
}
.shb-bk .shb-bk-quote {
	font-size: clamp(1.1rem, 2.4vw, 1.5rem);
	font-style: italic; line-height: 1.7;
	color: var(--parchment) !important;
	max-width: 34ch; margin: 0 auto !important; text-align: center;
}
.shb-bk .shb-bk-quote-attr {
	font-family: 'Cinzel', serif;
	font-size: .64rem; letter-spacing: .3em; text-transform: uppercase;
	color: var(--gold) !important; text-align: center; margin: 1.6rem 0 0 !important;
}

/* --- Meet Brenzel gallery ------------------------------------------ */
.shb-bk .shb-bk-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
	margin: 2.5rem 0;
}
.shb-bk .shb-bk-gallery img { width: 100%; border: 1px solid rgba(201,148,58,.28); }

/* --- Realm cards ---------------------------------------------------- */
.shb-bk .shb-bk-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.5rem;
	margin-top: 2rem;
}
.shb-bk .shb-bk-grid > * { margin-block: 0; }
.shb-bk .shb-bk-card {
	position: relative;
	padding: 2.2rem 1.7rem;
	border: 1px solid rgba(201,148,58,.12);
	background: rgba(17,15,20,.8);
	transition: .4s;
	overflow: hidden;
	text-align: left;
}
.shb-bk .shb-bk-card:hover { border-color: rgba(201,148,58,.3); background: rgba(25,20,12,.95); }
.shb-bk .shb-bk-card::after {
	content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
	background: linear-gradient(90deg, transparent, var(--accent, var(--gold-dim)), transparent);
	opacity: 0; transition: opacity .4s;
}
.shb-bk .shb-bk-card:hover::after { opacity: 1; }
/* 🔴 `.shb-bk .shb-bk-card p` below is 0,2,1 and this is 0,2,0. Both carry
 * !important, so the MORE SPECIFIC one wins and every realm and character
 * accent colour came out plain parchment — the same trap that swallowed the
 * road map's readiness colours hours earlier, in a brand-new file. Reaching
 * through the card class is the fix. Do not "simplify" this selector. */
.shb-bk .shb-bk-card p.shb-bk-card-label {
	font-family: 'Cinzel', serif;
	font-size: .58rem; letter-spacing: .34em; text-transform: uppercase;
	color: var(--accent, var(--gold-dim)) !important;
	margin: 0 0 .7rem !important;
}
.shb-bk .shb-bk-card h3 {
	font-family: 'Cinzel', serif;
	font-size: 1.12rem; font-weight: 600;
	color: var(--parchment) !important;
	margin: 0 0 .9rem; letter-spacing: .06em; text-align: left;
}
.shb-bk .shb-bk-card p {
	font-size: .95rem; font-style: italic; line-height: 1.7;
	color: rgba(201,185,150,.78) !important;
}

/* Each realm and each player owns an accent colour. These are modifier
 * classes rather than inline styles on the markup, deliberately: an inline
 * style="--accent:…" on a group block is the kind of thing the WordPress
 * editor strips on an ordinary re-save, and the colour would vanish with no
 * error anywhere. A class in a stylesheet cannot be lost that way. */
.shb-bk .shb-bk-card--hades    { --accent: #c05050; }
.shb-bk .shb-bk-card--hala     { --accent: #c87820; }
.shb-bk .shb-bk-card--zulu     { --accent: #b0a828; }
.shb-bk .shb-bk-card--aukum    { --accent: #28a050; }
.shb-bk .shb-bk-card--elysia   { --accent: #4080d0; }
.shb-bk .shb-bk-card--tian     { --accent: #8040c0; }
.shb-bk .shb-bk-card--omey     { --accent: #5050c0; }
.shb-bk .shb-bk-card--eden     { --accent: #c9943a; }
.shb-bk .shb-bk-card--brenzel  { --accent: #c9943a; }
.shb-bk .shb-bk-card--traveler { --accent: #a8b8c8; }
.shb-bk .shb-bk-card--beauty   { --accent: #8b1a1a; }
.shb-bk .shb-bk-card--dove     { --accent: #4080d0; }

/* --- The eight books ------------------------------------------------ */
.shb-bk .shb-bk-books {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 2px;
	margin-top: 2.5rem;
}
.shb-bk .shb-bk-books > * { margin-block: 0; }
.shb-bk .shb-bk-book {
	position: relative;
	padding: 2rem 1.5rem;
	background: rgba(17,15,20,.95);
	border-left: 2px solid var(--gold-dim);
	transition: .3s;
	text-align: left;
}
.shb-bk .shb-bk-book:hover {
	border-left-color: var(--gold-bright);
	background: rgba(30,22,8,.95);
	transform: translateX(4px);
}
.shb-bk .shb-bk-book img { width: 100%; border: 1px solid rgba(201,148,58,.25); }
/* The covers are real WordPress image blocks so Michael can swap one from the
 * editor when Book Four's art exists. WordPress wraps those in a <figure>
 * that carries margins of its own. */
.shb-bk .shb-bk-book figure { margin: 0 0 1rem; }
/* Same trap, same fix — see the note on the card label above. */
.shb-bk .shb-bk-book p.shb-bk-book-num {
	font-family: 'Cinzel', serif;
	font-size: .6rem; letter-spacing: .3em; text-transform: uppercase;
	color: var(--gold-dim) !important; margin: 0 0 .5rem !important;
}
.shb-bk .shb-bk-book h3 {
	font-family: 'Cinzel', serif;
	font-size: 1rem; font-weight: 600;
	color: var(--parchment) !important;
	letter-spacing: .06em; margin: 0 0 .4rem; text-align: left;
}
.shb-bk .shb-bk-book:hover h3 { color: var(--gold-bright) !important; }
.shb-bk .shb-bk-book p {
	font-size: .88rem; font-style: italic; line-height: 1.5;
	color: rgba(201,185,150,.6) !important;
}
/* The five unwritten books have no cover, and an empty slot beside three
 * real covers reads as a broken image. This is the placeholder. */
.shb-bk .shb-bk-soon {
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 2 / 3;
	margin-bottom: 1rem;
	border: 1px dashed rgba(201,148,58,.3);
	background: rgba(9,8,10,.6);
	font-family: 'Cinzel', serif;
	font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
	color: var(--gold-dim) !important;
	text-align: center; padding: 1rem;
}

/* --- Signup -------------------------------------------------------- */
.shb-bk .shb-bk-signup { text-align: center; }
.shb-bk .shb-bk-signup-text {
	font-size: 1.05rem; font-style: italic;
	color: rgba(201,185,150,.8) !important;
	margin: 0 0 1.8rem !important;
}
.shb-bk #shb-ml { width: 100%; max-width: 440px; margin: 0 auto; }

/* --- Baelen -------------------------------------------------------- */
.shb-bk .shb-bk-baelen { text-align: center; max-width: 680px; }
.shb-bk .shb-bk-glyph { width: 60px; height: 60px; margin: 0 auto 2rem; position: relative; }
.shb-bk .shb-bk-glyph::before,
.shb-bk .shb-bk-glyph::after {
	content: ''; position: absolute; top: 50%; left: 50%;
	border: 1px solid var(--gold-dim); border-radius: 50%;
	animation: shb-bk-orbit 6s linear infinite;
}
.shb-bk .shb-bk-glyph::before { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
.shb-bk .shb-bk-glyph::after { width: 38px; height: 38px; margin: -19px 0 0 -19px; animation-direction: reverse; animation-duration: 4s; }
.shb-bk .shb-bk-glyph span {
	position: absolute; top: 50%; left: 50%;
	width: 10px; height: 10px; margin: -5px 0 0 -5px;
	background: var(--gold); transform: rotate(45deg);
	box-shadow: 0 0 15px rgba(201,148,58,.6);
}
@keyframes shb-bk-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.shb-bk h2.shb-bk-baelen-name {
	font-family: 'Cinzel Decorative', 'Cinzel', serif;
	font-size: clamp(1.4rem, 3vw, 2rem);
	color: var(--gold-bright) !important;
	margin: 0 0 .5rem; letter-spacing: .08em;
}
.shb-bk .shb-bk-baelen-title {
	font-family: 'Cinzel', serif;
	font-size: .66rem; letter-spacing: .4em; text-transform: uppercase;
	color: var(--gold-dim) !important; margin: 0 0 1.8rem !important;
}
.shb-bk .shb-bk-baelen-desc {
	font-size: 1.08rem; font-style: italic; line-height: 1.8;
	color: rgba(201,185,150,.8) !important;
	margin: 0 0 2.2rem !important;
}

/* --- Community and footer ------------------------------------------ */
.shb-bk .shb-bk-community-text {
	font-size: clamp(1.05rem, 2vw, 1.2rem);
	color: rgba(201,185,150,.8) !important;
	line-height: 1.9; max-width: 62ch; margin: 0 auto 2.2rem !important;
}
.shb-bk .shb-bk-footer { position: relative; z-index: 1; padding: 4rem 2rem; text-align: center; border-top: 1px solid rgba(201,148,58,.1); }
.shb-bk .shb-bk-footer-title {
	font-family: 'Cinzel Decorative', 'Cinzel', serif;
	font-size: 1.2rem; color: var(--gold-dim) !important;
	letter-spacing: .1em; margin: 0 0 .5rem !important;
}
.shb-bk .shb-bk-footer-tagline {
	font-size: .9rem; font-style: italic;
	color: rgba(201,185,150,.4) !important; letter-spacing: .05em; margin: 0 !important;
}

/* --- Reveal on scroll ----------------------------------------------
 * shb-books.js adds .shb-bk-visible as each block enters the viewport. If
 * the script fails to load, the :not() rule below never applies because
 * html.shb-bk-js is never set — so the content is visible by default and
 * a broken script can never hide the page. */
.shb-bk .shb-bk-reveal { transition: opacity .8s ease, transform .8s ease; }
/* A block is hidden ONLY once the script has personally armed it — and the
 * script arms nothing until it has proved its observer actually fires, and
 * unconditionally reveals everything after three seconds whatever happens.
 * The earlier version gated on a class set at start-up, which is not the same
 * promise: the script ran, the class went on, the observer never fired, and
 * the whole page below the hero stayed invisible. Hiding must be earned. */
.shb-bk .shb-bk-reveal.shb-bk-armed:not(.shb-bk-visible) { opacity: 0; transform: translateY(30px); }

@media (prefers-reduced-motion: reduce) {
	.shb-bk .shb-bk-reveal { transition: none; }
	.shb-bk .shb-bk-stars::after { animation: none; }
	.shb-bk .shb-bk-glyph::before, .shb-bk .shb-bk-glyph::after { animation: none; }
	.shb-bk .shb-bk-reveal.shb-bk-armed:not(.shb-bk-visible) { opacity: 1; transform: none; }
}

/* --- Phones --------------------------------------------------------- */
@media (max-width: 640px) {
	.shb-bk .shb-bk-sec { padding: 4rem 1.2rem; }
	.shb-bk .shb-bk-hero { padding: 4rem 1.2rem 3rem; min-height: 70vh; }
	.shb-bk .shb-bk-cta-row { flex-direction: column; align-items: center; }
	.shb-bk .shb-bk-btn, .shb-bk .shb-bk-btn-ghost { width: 100%; max-width: 280px; text-align: center; }
	.shb-bk .shb-bk-grid { grid-template-columns: 1fr 1fr; gap: .8rem; }
	/* Measured on a real 390px render: Divi hands a phone a 300px column, so
	 * two realm cards come out 124px wide — too narrow for a sentence of
	 * description. The old page kept two-up at every size. One column below
	 * 480px; the book cards stay two-up because they are mostly cover art.
	 * Chose this — say so if you would rather have two columns throughout. */
	.shb-bk .shb-bk-grid { grid-template-columns: 1fr; }
	.shb-bk .shb-bk-card { padding: 1.3rem 1rem; }
	.shb-bk .shb-bk-books { grid-template-columns: 1fr 1fr; }
	.shb-bk .shb-bk-wager::before { width: 320px; height: 320px; }
}