/*
 * BodyBook design tokens & shared styles.
 *
 * Brand palette — the liturgical colors (owner's direction, 2026-06-10):
 *   white  = purity     → text and highlights on dark ground
 *   red    = passion    → emphasis, alerts, calls to courage
 *   blue   = trust      → the base ground of the whole interface
 *   purple = authority  → structural accents, headers, rules
 *   gold   = the glory  → metallic gradients, used sparingly so it stays precious
 *
 * Dark-first: the dark theme IS the brand. A light theme can be added later
 * by swapping these custom properties under a [data-theme="light"] selector.
 */

:root {
	/* ground (deepened again 2026-06-16 per owner: "a bit more dark").
	   Kept a desaturated navy rather than pure black — pure #000 makes off-white
	   text halate and fatigues the eye; this stays very dark but legible. */
	--night: #05070e;          /* near-black navy — the page itself (BRAND.md §6) */
	--surface: #0f1424;        /* cards */
	--surface-raised: #161e36; /* hover / focus surfaces */

	/* the four colors, kept deep for contrast */
	--purity: #f5f3ec;         /* primary text */
	--purity-dim: #b8bdc9;     /* secondary text */
	--passion: #8e2030;        /* deep red */
	/* a11y (G2/F15, 2026-08-15): #c0392b on --night was 3.70:1 / on --surface 3.37:1,
	   both fail AA normal text (4.5:1). Lightened for text-legible red while staying
	   "urgent" in hue; ~5.2:1 on night / ~4.75:1 on surface (WCAG relative-luminance calc). */
	--passion-bright: #d9584a; /* errors, urgent accents */
	--trust: #1b2f52;          /* deep navy (ruling 13, 2026-09-04) */
	/* a11y (G2/F14, 2026-08-15): #4f74b3 on --night was 4.30:1 / on --surface 3.91:1,
	   both fail AA normal text. Lightened; ~5.17:1 on night / ~4.70:1 on surface.
	   Still used for 3:1-only contexts (focus-ring outlines) where it now has more margin. */
	--trust-bright: #5a82c0;   /* links, focus rings */
	--authority: #2e2a58;      /* deep navy (ruling 13, 2026-09-04) */
	--authority-soft: #6b5494; /* secondary accents */

	/* metallic gold — light edge, body, shadow edge */
	--gold-hi: #f9e8a0;
	--gold: #d4af37;
	--gold-lo: #8a6d1f;
	--gold-sheen: linear-gradient(105deg, var(--gold-lo) 0%, var(--gold) 28%, var(--gold-hi) 50%, var(--gold) 72%, var(--gold-lo) 100%);

	/* Beauty-pass foundations (2026-07-13 spec, built 2026-08-10). Additive; gold stays scarce.
	   --*-hair = a thread you feel, not a fill you see. --shadow-* = calm depth.
	   Hairs are fills BEHIND existing foreground colors, never text colors. */
	--gold-hair:    rgba(212, 175, 55, 0.16);   /* whispered gold thread: dividers, inner edges, active fills */
	--passion-hair: rgba(192, 57, 43, 0.12);    /* the dissent equivalent — Boo/active-boo wash */
	--shadow-card:  0 1px 2px rgba(0, 0, 0, 0.28);    /* resting card depth — felt, not seen */
	--shadow-lift:  0 8px 22px rgba(0, 0, 0, 0.34);   /* hover lift on interactive cards */

	--radius: 10px;
	--font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-mark: Georgia, "Times New Roman", serif;

	/* integration: ShrewdBible / scripture tokens (BRAND.md §5) */
	--wine: #b1283b;               /* grapes on the vine-cross mark */
	--scripture-border: rgba(212, 175, 55, 0.28);  /* gold, restrained */
	--scripture-bg: rgba(15, 20, 36, 0.72);        /* slightly lifted card bg */

	/* cross-pattée wallpaper strength (reverted pre-r8 values):
	   faint texture + quiet travelling shine wave */
	--pattern-opacity: 0.05;
	--pattern-shine: 0.22;
}

/* ---------- light theme (owner request 2026-07-04) ----------
 * Same liturgical language, inverted ground: warm parchment instead of night.
 * Only the tokens change; every component reads them, so the whole UI follows.
 * Gold is darkened so the metallic sheen stays legible on a light ground, and
 * the decorative cross-field / beam layers are toned for parchment below.
 */
[data-theme="light"] {
	--pattern-shine: 0.16; /* light shine band (pre-r8J value); the dark value lives in :root */
	--night: #f4efe3;          /* warm parchment — the page itself */
	--surface: #ffffff;        /* cards */
	--surface-raised: #ece5d5; /* hover / focus surfaces */

	--purity: #1b2030;         /* primary text — ink on light */
	--purity-dim: #55607a;     /* secondary text */
	--passion: #9b2634;        /* deep red */
	--passion-bright: #b3271b; /* errors, urgent accents */
	--trust: #c2ccdd;          /* borders (soft blue-grey on light) */
	--trust-bright: #2b5aa0;   /* links, focus rings — dark enough to read */
	--authority: #d0c4e6;      /* structural rules (soft purple on light) */
	--authority-soft: #6b5494; /* secondary accents */

	/* darker metallic gold ramp so the sheen reads on a light ground */
	--gold-hi: #caa53a;
	--gold: #9c7a1e;
	--gold-lo: #6f5410;

	/* beauty-pass tokens, tuned for parchment */
	--gold-hair:    rgba(156, 122, 30, 0.20);
	--passion-hair: rgba(155, 38, 52, 0.12);
	--shadow-card:  0 1px 2px rgba(31, 27, 15, 0.10);
	--shadow-lift:  0 8px 24px rgba(31, 27, 15, 0.15);
}

/* ---------- a11y (G2/F13, F16, 2026-08-15): light-theme gold as TEXT ink ----------
 * Brand law (docs/BRAND.md): light-theme gold used as text ink must be --gold-lo
 * (6.20:1 on parchment / 7.11:1 on white — PASS) not raw --gold (3.51/4.03:1 — FAIL)
 * or --gold-hi (2.04/2.35:1 — FAIL, even for large text). --gold/--gold-hi stay fine
 * for borders, sheens, and other non-text decoration on light — untouched here.
 * Each selector below is the live-CSS text-ink usage the audit named (F13 table).
 */
[data-theme="light"] .theme-toggle,
[data-theme="light"] .lang-toggle,
[data-theme="light"] a.gold-link,
[data-theme="light"] footer.site .soon,
[data-theme="light"] .hero-tagline,
[data-theme="light"] .spc-citation {
	color: var(--gold-lo);
}
[data-theme="light"] .theme-toggle:hover,
[data-theme="light"] .lang-toggle:hover,
[data-theme="light"] a.gold-link:hover,
[data-theme="light"] a.quiet:hover,
[data-theme="light"] .hero-links a:hover {
	color: var(--gold);
}
/* F16: inline `style="color:var(--gold)"` on #account's email-recovery <summary>
 * (public/account.html) — an inline style can only be overridden from an external
 * sheet with !important. HTML fix (drop the inline style, add a class) is the
 * cleaner long-term shape; sitrepped to block B (account owner). This is the
 * CSS-only stopgap so light theme passes AA today. */
[data-theme="light"] #account summary[style*="--gold"] {
	color: var(--gold-lo) !important;
}

/* Lighter corner glows + a warmer, darker cross-shine so the flourishes read on parchment. */
[data-theme="light"] body {
	background:
		radial-gradient(1100px 500px at 50% -10%, rgba(107, 84, 148, 0.13), transparent 60%),
		radial-gradient(900px 420px at 85% 110%, rgba(79, 116, 179, 0.11), transparent 60%),
		var(--night);
}
[data-theme="light"] body::before {
	/* fill-opacity fixed full strength; --pattern-opacity (same token, no
	   redefinition here) is the only strength control. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M24 14L40 14L36 28L50 24L50 40L36 36L40 50L24 50L28 36L14 40L14 24L28 28Z' fill='%239c7a1e'/%3E%3C/svg%3E");
}
[data-theme="light"] body::after {
	background: linear-gradient(118deg,
		transparent 40%,
		rgba(156, 122, 30, var(--pattern-shine)) 50%,
		transparent 60%);
}

/* ---------- theme toggle button (injected by theme.js on every page) ---------- */
.theme-toggle {
	position: fixed;
	top: calc(0.85rem + env(safe-area-inset-top, 0px));
	right: 0.85rem;
	z-index: 50;
	width: 2.4rem;
	height: 2.4rem;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.15rem;
	line-height: 1;
	color: var(--gold);
	background: var(--surface);
	border: 1px solid var(--authority);
	border-radius: 999px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
	cursor: pointer;
	transition: color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.theme-toggle:hover {
	color: var(--gold-hi);
	border-color: var(--gold);
	transform: translateY(-1px);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
}
.theme-toggle:focus-visible {
	outline: 2px solid var(--trust-bright);
	outline-offset: 2px;
}

/* language toggle (injected by i18n.js) — sits just left of the theme toggle */
.lang-toggle {
	position: fixed;
	top: calc(0.85rem + env(safe-area-inset-top, 0px));
	right: 3.55rem;
	z-index: 50;
	width: 2.4rem;
	height: 2.4rem;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-ui);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-indent: 0.05em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--gold);
	background: var(--surface);
	border: 1px solid var(--authority);
	border-radius: 999px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
	cursor: pointer;
	transition: color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.lang-toggle:hover {
	color: var(--gold-hi);
	border-color: var(--gold);
	transform: translateY(-1px);
}
.lang-toggle:focus-visible {
	outline: 2px solid var(--trust-bright);
	outline-offset: 2px;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	-webkit-tap-highlight-color: transparent;
}


button, .btn, a, .bottom-nav-item, .intent-pill, .react-btn {
	touch-action: manipulation;
}

body {
	font-family: var(--font-ui);
	/* colour wash only: purple glow → blue glow → night ground.
	   The gold cross field + its travelling shine wave live on the fixed
	   ::before / ::after layers below, so they stay put while the page scrolls. */
	background:
		radial-gradient(1100px 500px at 50% -10%, rgba(67, 48, 107, 0.30), transparent 60%),
		radial-gradient(900px 420px at 85% 110%, rgba(36, 64, 110, 0.24), transparent 60%),
		var(--night);
	color: var(--purity);
	line-height: 1.6;
	min-height: 100vh;
}

/* ---------- the gold cross field + slow shine wave ----------
 * Two fixed, full-viewport layers sitting just behind the page content:
 *   ::before — the faint, always-present gold cross-pattée field (the texture).
 *   ::after  — the SAME cross shape used as a mask, lit by a single diagonal
 *              gold highlight that drifts slowly corner-to-corner, so a wave of
 *              shine appears to roll across the crosses. "Present, not preachy."
 * Identical geometry + 64px tile on both layers keeps the shine in register.
 */
body::before,
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}
body::before {
	/* faint gold cross pattée — battle-worn, "felt more than seen" (BRAND.md §6).
	   fill-opacity is fixed at full strength in the data URI; --pattern-opacity
	   (owner ruling 10) is the only strength control, same value both themes. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M24 14L40 14L36 28L50 24L50 40L36 36L40 50L24 50L28 36L14 40L14 24L28 28Z' fill='%23d4af37'/%3E%3C/svg%3E");
	background-size: 64px 64px;
	opacity: var(--pattern-opacity);
}
body::after {
	/* the shine: a bright gold band, revealed only where the crosses are */
	background: linear-gradient(118deg,
		transparent 40%,
		rgba(249, 232, 160, var(--pattern-shine)) 50%,
		transparent 60%);
	background-size: 260% 260%;
	background-repeat: no-repeat;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M24 14L40 14L36 28L50 24L50 40L36 36L40 50L24 50L28 36L14 40L14 24L28 28Z' fill='%23ffffff'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M24 14L40 14L36 28L50 24L50 40L36 36L40 50L24 50L28 36L14 40L14 24L28 28Z' fill='%23ffffff'/%3E%3C/svg%3E");
	-webkit-mask-size: 64px 64px;
	mask-size: 64px 64px;
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
	animation: cross-wave 26s linear infinite;
}
@keyframes cross-wave {
	0%   { background-position: 0% 0%; }
	100% { background-position: 100% 100%; }
}
@media (prefers-reduced-motion: reduce) {
	body::after { animation: none; opacity: 0; }
}

/* ---------- header / wordmark ---------- */

header.site {
	text-align: center;
	padding: 3.2rem 1rem 2.2rem;
	border-bottom: 1px solid var(--authority);
	position: relative;
}
header.site::after {
	/* thin gold thread under the purple rule */
	content: "";
	position: absolute;
	left: 50%;
	bottom: -2px;
	transform: translateX(-50%);
	width: min(420px, 70%);
	height: 2px;
	background: var(--gold-sheen);
	background-size: 200% 100%;
	animation: sheen 6s linear infinite;
}

header.site .wordmark-caps {
	font-size: clamp(2.4rem, 6vw, 3.4rem);
	letter-spacing: 0.12em;
}
@keyframes sheen {
	from { background-position: 200% 0; }
	to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
	header.site .wordmark-caps, header.site::after { animation: none; }
}
header.site-nav .site-nav-wordmark {
	font-family: "Cinzel", Georgia, "Times New Roman", serif;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 600;
}

/* New Roman-caps brand wordmark (BodyBook index + personal pages) */
.wordmark-caps {
	font-family: "Cinzel", Georgia, "Times New Roman", serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	background: var(--gold-sheen);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: sheen 6s linear infinite;
}
.wordmark-caps .initial { font-size: 1.35em; }
@media (prefers-reduced-motion: reduce) { .wordmark-caps { animation: none; } }

.tagline {
	margin-top: 0.5rem;
	font-style: italic;
	color: var(--purity-dim);
}

/* ---------- layout ---------- */

main { max-width: 720px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
main.narrow { max-width: 440px; }

section h2, .card h2 {
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--purity-dim);
	border-bottom: 1px solid var(--authority);
	padding-bottom: 0.45rem;
	margin: 2rem 0 1rem;
}

/* ---------- cards & news ---------- */

.card {
	background: var(--surface);
	border: 1px solid var(--trust);
	border-radius: var(--radius);
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}

ul.news { list-style: none; }
ul.news li {
	background: var(--surface);
	border: 1px solid var(--trust);
	border-left: 3px solid var(--passion);
	border-radius: var(--radius);
	padding: 0.9rem 1.1rem;
	margin-bottom: 0.7rem;
	transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
ul.news li:hover {
	background: var(--surface-raised);
	border-color: var(--gold);
	transform: translateY(-1px);
}
ul.news a { color: var(--purity); text-decoration: none; font-weight: 600; }
ul.news a:hover { color: var(--gold-hi); }
ul.news .meta { display: block; font-size: 0.85rem; color: var(--purity-dim); margin-top: 0.25rem; }

/* ---------- beauty pass: front page (spec §3.1) ---------- */

/* illuminated lead on every section eyebrow — a short gold segment on the rule */
section h2, .card h2 { position: relative; }
section h2::after, .card h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;                 /* sits exactly on the existing 1px authority rule */
	width: 2.2rem;
	height: 1px;
	background: var(--gold-sheen); /* inherits the deepened sheen automatically */
	background-size: 200% 100%;
}

/* news list: calmer at rest, warmer on lift */
ul.news li { box-shadow: var(--shadow-card); border-left-width: 2px; }
ul.news li:hover { box-shadow: var(--shadow-lift); }

/* the Cellar doorway — a sunken room, honest and quiet (no HTML change needed).
   NB: the section carries an inline margin-top:3rem (index.html:91); that inline
   value wins over the stylesheet, so it is intentionally not re-declared here. */
section[aria-labelledby="cellar-heading"] {
	padding: 1.7rem 1.25rem 1.5rem;
	border-radius: var(--radius);
	border-top: 1px solid var(--gold-hair);
	background:
		radial-gradient(130% 90% at 50% -20%, rgba(67, 48, 107, 0.16), transparent 70%),
		var(--surface);
	box-shadow: inset 0 10px 26px rgba(0, 0, 0, 0.34);
}
section[aria-labelledby="cellar-heading"] > p:first-child {  /* the 🚪 glyph */
	filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.22));
}

p.note { color: var(--purity-dim); font-size: 0.9rem; }

/* ---------- "level ground": the Areopagus house frame ----------
 * Whispered, per BRAND.md ("never megaphones"): it sets the culture — fierce on
 * ideas, gentle on people — without shouting. Cultural copy only; no feature is
 * implied, no privacy is promised.
 */
.level-frame { margin: -0.3rem 0 1.2rem; }
.level-line {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-style: italic;
	font-size: 1.12rem;
	line-height: 1.45;
	color: var(--purity-dim);
}
.house-rule {
	display: inline-block;
	margin-top: 0.55rem;
	padding: 0.18rem 0.7rem;
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--purity-dim);
	border: 1px solid var(--authority);
	border-radius: 999px;
}

/* the steel-man nudge inside a story's reply box — guidance, not a feature */
.steelman {
	margin: 0 0 0.55rem;
	padding-left: 0.7rem;
	border-left: 2px solid var(--trust);
	font-style: italic;
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--purity-dim);
}

/* ---------- links, buttons, forms ---------- */

a { color: var(--trust-bright); }
a:hover { color: var(--gold-hi); }
a.quiet { color: var(--purity-dim); text-decoration: none; font-size: 0.9rem; }
a.quiet:hover { color: var(--gold-hi); }
a.gold-link { color: var(--gold); text-decoration: none; }
a.gold-link:hover { color: var(--gold-hi); }

button, .btn {
	display: inline-block;
	width: 100%;
	margin-top: 1.2rem;
	padding: 0.7rem 1rem;
	font: inherit;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: #221a04;
	background: var(--gold-sheen);
	background-size: 200% 100%;
	border: none;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background-position 400ms ease, box-shadow 160ms ease;
}
button:hover, .btn:hover {
	background-position: 100% 0;
	box-shadow: 0 0 18px rgba(212, 175, 55, 0.35);
}
button:focus-visible, input:focus-visible, a:focus-visible, textarea:focus-visible {
	/* a11y (G2/F11, 2026-08-15): textarea added — it was excluded from this shared
	   rule and separately set `outline: none` below with no :focus-visible fallback,
	   so keyboard users lost the caret/focus cue on every composer/comment box. */
	outline: 2px solid var(--trust-bright);
	outline-offset: 2px;
}

label { display: block; font-size: 0.9rem; color: var(--purity-dim); margin-top: 0.8rem; }
input {
	width: 100%;
	padding: 0.6rem 0.75rem;
	margin-top: 0.25rem;
	border: 1px solid var(--trust);
	border-radius: 6px;
	font: inherit;
	background: var(--night);
	color: var(--purity);
}
input:focus { border-color: var(--authority-soft); }

.error { color: var(--passion-bright); font-size: 0.9rem; margin-top: 0.8rem; min-height: 1.2em; }
.hint { font-size: 0.8rem; color: var(--purity-dim); margin-top: 0.3rem; }
.hidden { display: none !important; }

/* ---------- feed: composer, posts, comments ---------- */

textarea {
	width: 100%;
	min-height: 5.5rem;
	padding: 0.7rem 0.8rem;
	margin-top: 0.25rem;
	border: 1px solid var(--trust);
	border-radius: 6px;
	font: inherit;
	background: var(--night);
	color: var(--purity);
	resize: vertical;
}
textarea:focus { border-color: var(--authority-soft); }

.post { border-left: 3px solid var(--authority); }
.post .author { font-weight: 700; }
.post .author .handle { color: var(--purity-dim); font-weight: 400; font-size: 0.85rem; }
.post .when { color: var(--purity-dim); font-size: 0.8rem; }
.post .body { margin: 0.6rem 0 0.9rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.post .actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }

/* reaction buttons override the global gold button */
button.react-btn, button.subtle-btn, a.subtle-btn {
	width: auto;
	margin: 0;
	padding: 0.35rem 0.85rem;
	/* a11y (G2/F12, 2026-08-15): padding+font-size alone gave ~30-38px hit height,
	   under the 44px best-practice floor (comment-react-btn already had this). */
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	/* r8J: flex strips the leading space from the label/count text nodes,
	   rendering "Amen0" instead of "Amen 0" — gap restores the visual space. */
	gap: 0.35em;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--purity-dim);
	background: var(--night);
	border: 1px solid var(--trust);
	border-radius: 999px;
	position: relative;
	transition: border-color 150ms ease, color 150ms ease;
}
button.react-btn:hover, button.subtle-btn:hover, a.subtle-btn:hover { border-color: var(--gold); color: var(--purity); box-shadow: none; }
button.react-btn.active-amen, button.subtle-btn.active-amen { border-color: var(--gold); color: var(--gold-hi); }
/* a11y (G2/F13 + dispatch open question #2, 2026-08-15): OPEN QUESTION, not shipped.
 * `.active-amen` text is --gold-hi on a --night-token button background; on
 * [data-theme="light"] --night resolves to parchment #f4efe3, and --gold-hi is
 * #caa53a there → the dispatch's active-amen figure is 1.86:1 (this audit's F13
 * table computes --gold-hi-on-parchment at 2.04:1 for the flat token pair; either
 * way it fails AA normal AND large — a large-text floor of 3:1 is still not met).
 * --gold-lo on parchment is 6.20:1 (PASS). But --gold-hi active-amen is the brand's
 * signature "you said Amen" gold-glow state (docs/BRAND.md) — swapping it for
 * --gold-lo is a real appearance change, not a token bug, hence the open question
 * rather than a silent fix. Gated on the owner's ruling; activate with one uncomment:
 *
 * [data-theme="light"] button.react-btn.active-amen,
 * [data-theme="light"] button.subtle-btn.active-amen {
 * 	color: var(--gold-lo);
 * }
 */
button.react-btn.active-boo { border-color: var(--passion-bright); color: var(--passion-bright); }
.react-btn .face { display: inline-block; }

/* BOO: the face shakes, fumes, mutters "boo!", then composes itself */
.react-btn.booing .face { animation: boo-shake 0.9s ease; }
@keyframes boo-shake {
	0%, 100% { transform: translateX(0) rotate(0); }
	15% { transform: translateX(-3px) rotate(-8deg); }
	30% { transform: translateX(3px) rotate(8deg); }
	45% { transform: translateX(-3px) rotate(-6deg); }
	60% { transform: translateX(2px) rotate(5deg); }
	75% { transform: translateX(-1px) rotate(-2deg); }
}
.boo-bubble {
	position: absolute;
	top: -1.1rem;
	left: 50%;
	transform: translateX(-50%);
	font-size: 0.65rem;
	font-style: italic;
	color: var(--passion-bright);
	pointer-events: none;
	animation: bubble-up 0.9s ease forwards;
}

/* AMEN: a couple of claps rise and the hands disappear */
.clap-float {
	position: absolute;
	left: 50%;
	top: -0.4rem;
	pointer-events: none;
	animation: bubble-up 0.8s ease forwards;
}
.clap-float:nth-child(odd) { animation-duration: 1s; }
@keyframes bubble-up {
	from { opacity: 1; transform: translate(-50%, 0) scale(1); }
	to { opacity: 0; transform: translate(-50%, -1.4rem) scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
	.react-btn.booing .face, .boo-bubble, .clap-float { animation: none; }
	.boo-bubble, .clap-float { opacity: 0; }
}

/* ---------- beauty pass: feed (spec §3.2) ---------- */

/* composer invites writing — gold only on focus */
#composer {
	box-shadow: var(--shadow-card);
	transition: border-color 160ms ease, box-shadow 160ms ease;
}
#composer:focus-within {
	border-color: var(--gold);
	box-shadow: 0 0 0 1px var(--gold-hair), var(--shadow-lift);
}

/* post cards: calm resting depth (warmth-glow still overrides for warm posts).
   No hover transform on posts — they're content, not links; calm beats jitter.
   NB: feed.html's JS-injected reduced-motion rule (.post{box-shadow:none!important})
   strips this resting depth under reduced motion — harmless, and narrowing it
   would be a JS edit, out of scope for this CSS-only pass (spec §4). */
.post { box-shadow: var(--shadow-card); }

/* hierarchy: utility actions recede so the six reactions lead the row.
   Scoped to `.post .actions` on purpose — tabs and #load-more must not change. */
.post .actions .subtle-btn {
	border-color: transparent;
	background: transparent;
	color: var(--purity-dim);
}
.post .actions .subtle-btn:hover {
	border-color: var(--gold-hair);
	background: var(--night);
	color: var(--purity);
}

/* reaction active states: a faint confirming fill on top of the existing edge */
button.react-btn.active-amen { background: var(--gold-hair); }
button.react-btn.active-boo  { background: var(--passion-hair); }

/* allowlisted video embeds (YouTube/Vimeo) */
iframe.embed {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--trust);
	border-radius: var(--radius);
	margin-bottom: 0.9rem;
	background: #000;
}

a.subtle-btn { display: inline-block; }

.comments { margin-top: 0.9rem; border-top: 1px solid var(--trust); padding-top: 0.7rem; }
.comment { padding: 0.45rem 0; font-size: 0.95rem; }
.comment .author { font-weight: 600; }
.comment .body { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--purity-dim); }

/* Comment reactions: compact quiet row; 44px min touch via padding, not giant icons */
.comment-react-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem;
	align-items: center;
	margin-top: 0.25rem;
}
button.react-btn.comment-react-btn {
	min-width: 44px;
	min-height: 44px;
	padding: 0.55rem 0.45rem;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1;
}
button.react-btn.comment-react-btn svg {
	width: 14px;
	height: 14px;
	margin-right: 0;
	vertical-align: middle;
}
/* Warmth glow only on your own active (non-boo) toggle — reuses --gold, no fork */
button.react-btn.comment-react-btn.comment-react-warm {
	box-shadow: 0 0 4px var(--gold);
	border-color: var(--gold);
}
button.react-btn.comment-react-btn:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	button.react-btn.comment-react-btn.comment-react-warm {
		box-shadow: none;
	}
}

/* ---------- beauty pass: comment reactions — quiet cluster (spec §3.4) ----------
   Appended, never prepended: the rest rule ties the shipped base at :614 on
   specificity and wins on source order.
   DEVIATION from the spec's literal CSS, deliberate: the spec restates the
   gold/passion colours on .active-*, which would pin the shipped active colours
   at (0,0,3,1) — a later fix to the base rules could no longer move them. So
   the rest rule EXCLUDES active buttons instead, letting the shipped
   `button.react-btn.active-amen` (:509) and `.active-boo` (:510) flow through
   untouched while this pass only ADDS the confirming fill — which is exactly
   the principle §3.2 states for the post reaction row. 44px touch, the
   focus-visible ring (:633) and comment-react-warm (:629) are all untouched. */
button.react-btn.comment-react-btn:not(.active-amen):not(.active-boo) {
	border-color: transparent;
	background: transparent;
	color: var(--purity-dim);
}
button.react-btn.comment-react-btn:not(.active-amen):not(.active-boo):hover {
	border-color: var(--gold-hair);
	color: var(--purity);
}
button.react-btn.comment-react-btn.active-amen { background: var(--gold-hair); }
button.react-btn.comment-react-btn.active-boo  { background: var(--passion-hair); }

/* CONTRAST GUARD — spec §4 requires rest glyphs to clear 3:1 as non-text UI in
   BOTH themes. The scripture card paints itself with --scripture-bg, a dark navy
   at 72% alpha defined only in :root (:54) with no [data-theme="light"] value, so
   on parchment it composites to a mid-grey. Dropping the button fill there takes
   the rest glyph to 1.17:1 (measured, light) — so keep the shipped fill on that
   one ground. Dark theme is untouched and reads 9.74:1; the comment thread, whose
   ground is a real --surface, reads 6.29:1 and needs no guard.
   This rule exists only because --scripture-bg has no light value; fixing that
   root cause is outside this spec and is flagged in the PR body. */
[data-theme="light"] button.react-btn.comment-react-btn.spc-react-btn:not(.active-amen):not(.active-boo) {
	background: var(--night);
}

/* ---------- footer ---------- */

footer.site {
	text-align: center;
	padding: 2rem 1rem 3rem;
	border-top: 1px solid var(--authority);
	color: var(--purity-dim);
	font-size: 0.9rem;
}
footer.site .soon { color: var(--gold); font-style: italic; }

/* ---------- .social front-page hero: "The Beam" ----------
 * Scoped to header.hero (index.html only) so the shared header.site used by
 * the other pages is untouched. Cathedral light: a soft purple→blue beam
 * descends behind an oversized wordmark; gold stays scarce (the wordmark
 * sheen, one thin rule, the single primary CTA). All motion is optional.
 */
header.hero {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding: clamp(3.5rem, 9vw, 6.5rem) 1rem clamp(2.4rem, 5vw, 3.4rem);
	border-bottom: 1px solid var(--authority);
}
header.hero::after {
	/* thin gold thread under the purple rule — matches header.site's footer line */
	content: "";
	position: absolute;
	left: 50%;
	bottom: -2px;
	transform: translateX(-50%);
	width: min(420px, 70%);
	height: 2px;
	background: var(--gold-sheen);
	background-size: 200% 100%;
	animation: sheen 6s linear infinite;
}

/* the descending beam: a soft cone of light fanning down from the top center */
header.hero .beam {
	position: absolute;
	top: -18%;
	left: 50%;
	width: min(560px, 90%);
	height: 130%;
	transform: translateX(-50%);
	pointer-events: none;
	z-index: 0;
	background:
		conic-gradient(from 180deg at 50% 0%,
			transparent 156deg,
			rgba(107, 84, 148, 0.30) 172deg,
			rgba(79, 116, 179, 0.24) 180deg,
			rgba(107, 84, 148, 0.30) 188deg,
			transparent 204deg);
	filter: blur(20px);
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.95), transparent 86%);
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.95), transparent 86%);
	animation: beam-breathe 9s ease-in-out infinite;
}
@keyframes beam-breathe {
	0%, 100% { opacity: 0.72; }
	50% { opacity: 1; }
}

header.hero .hero-inner { position: relative; z-index: 1; }

header.hero .wordmark {
	font-size: clamp(3rem, 9vw, 5rem);
	line-height: 1.05;
}

.hero-rule {
	width: min(260px, 56%);
	height: 2px;
	margin: 1.1rem auto 1.25rem;
	border-radius: 2px;
	background: var(--gold-sheen);
	background-size: 200% 100%;
	animation: sheen 6s linear infinite;
}

.hero-tagline {
	font-family: var(--font-mark);
	font-style: italic;
	font-size: clamp(1.02rem, 2.4vw, 1.25rem);
	line-height: 1.5;
	color: var(--purity-dim);
}

.hero-actions { margin-top: 1.7rem; }
.btn-enter {
	display: inline-block;
	width: auto;
	margin: 0;
	padding: 0.72rem 1.7rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: #221a04;
	background: var(--gold-sheen);
	background-size: 200% 100%;
	border-radius: var(--radius);
	text-decoration: none;
	transition: background-position 400ms ease, box-shadow 200ms ease;
}
.btn-enter:hover {
	color: #221a04;
	background-position: 100% 0;
	box-shadow: 0 0 22px rgba(212, 175, 55, 0.40);
}

.hero-links { margin-top: 1rem; font-size: 0.9rem; }
.hero-links a { color: var(--purity-dim); text-decoration: none; }
.hero-links a:hover { color: var(--gold-hi); }

/* Hero brand mark and typography styling */
.logo-container {
	margin-bottom: 1.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

.hero-logo {
	width: clamp(80px, 15vw, 110px);
	height: clamp(80px, 15vw, 110px);
	transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 300ms ease;
	filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0));
}

/* Glow and float on hover */
header.hero:hover .hero-logo,
.hero-logo:hover {
	transform: scale(1.05) rotate(5deg);
	filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.35));
}

/* Larger Roman-caps wordmark specifically for the hero */
header.hero .wordmark-caps {
	font-size: clamp(3rem, 9vw, 5rem);
	line-height: 1.05;
	display: block;
	margin: 0 auto;
}

.hero-tagline {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-style: italic;
	font-size: clamp(1.2rem, 2.8vw, 1.5rem);
	line-height: 1.5;
	color: var(--gold);
	text-transform: lowercase;
	letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
	header.hero::after, .hero-rule, header.hero .beam { animation: none; }
	.hero-logo {
		transition: none;
	}
	header.hero:hover .hero-logo {
		transform: none;
		filter: none;
	}
}

/* ==========================================================================
   BodyBook × ShrewdBible.com — integration components
   Phase 1: inline Scripture preview cards + "Study This Together" button.

   Token discipline: --wine, --scripture-border, --scripture-bg from :root.
   Gold stays scarce: only the citation accent line and the CTA use --gold.
   Respects prefers-reduced-motion throughout.
   ========================================================================== */

/* ---------- scripture preview card ---------- */

.scripture-preview-card {
position: relative;
background: var(--scripture-bg);
border: 1px solid var(--scripture-border);
border-left: 3px solid var(--gold);
border-radius: var(--radius);
padding: 0.9rem 1.1rem 0.75rem;
margin: 0.6rem 0;
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.scripture-preview-card:hover {
border-color: var(--gold);
box-shadow: 0 2px 14px rgba(212, 175, 55, 0.12);
}

/* header: citation + translation badge */
.spc-header {
display: flex;
align-items: baseline;
gap: 0.5rem;
margin-bottom: 0.45rem;
}
.spc-citation {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gold);
}
.spc-translation {
font-size: 0.7rem;
color: var(--purity-dim);
border: 1px solid var(--authority);
border-radius: 999px;
padding: 0.05rem 0.45rem;
}

/* verse text: elevated typeset, Cormorant Garamond for the "scripture moment" */
.spc-verse {
font-family: "Cormorant Garamond", var(--font-mark);
font-size: 1.05rem;
font-style: italic;
line-height: 1.65;
color: var(--purity);
border: none;
margin: 0 0 0.75rem;
padding: 0;
quotes: "\201C" "\201D";
}
.spc-verse::before { content: open-quote; color: var(--gold-lo); }
.spc-verse::after  { content: close-quote; color: var(--gold-lo); }

/* ---------- beauty pass: scripture card (spec §3.3) ----------
   CASCADE ANCHOR — load-bearing. This block MUST sit after the shipped
   .spc-translation rule (its `border:` SHORTHAND would otherwise reset our
   border-color longhand: both selectors score 0,0,1,0, so source order decides
   and the gold seal would silently never render). Placed after .spc-verse::after
   per spec §3.3 NB, not before .spc-translation.
   The optional A/B drop-cap is deliberately NOT built: it requires deleting the
   shipped gold open/close quotes, which the spec recommends keeping. Owner call. */
.scripture-preview-card { box-shadow: var(--shadow-card); }
.scripture-preview-card:hover { box-shadow: 0 6px 20px rgba(212, 175, 55, 0.14); }

/* the translation badge as a small gold seal (was authority-purple, --authority) */
.spc-translation { border-color: var(--gold-hair); }

/* footer: CTA + reaction pills in one flex row */
.spc-footer {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}

/* ---------- "Study This Together" / "Study in ShrewdBible" button ---------- */

.study-together-btn {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.3rem 0.85rem;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.03em;
color: #221a04;
background: var(--gold-sheen);
background-size: 200% 100%;
border: none;
border-radius: 999px;
text-decoration: none;
cursor: pointer;
transition: background-position 400ms ease, box-shadow 160ms ease;
white-space: nowrap;
}
.study-together-btn:hover {
color: #221a04;
background-position: 100% 0;
box-shadow: 0 0 14px rgba(212, 175, 55, 0.35);
}
.study-together-btn:focus-visible {
outline: 2px solid var(--trust-bright);
outline-offset: 2px;
}
/* icon inside the button */
.spc-icon {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.spc-icon svg { vertical-align: middle; }

/* Larger standalone "Study This Together" variant (e.g. placed below a post) */
.study-together-btn--full {
width: 100%;
justify-content: center;
padding: 0.65rem 1.2rem;
font-size: 0.95rem;
border-radius: var(--radius);
}

/* Reaction pills intentionally not styled yet — awaiting the counts/warmth
   design pass (Amen public, Boo author+mods only; qualitative glow idea).
   See docs/ideas/2026-07-05_reaction-system-spec.md before adding them. */

/* ---------- attribution line (fetched-text cards only) ---------- */
/* Quiet by design — gold stays scarce, so the accent is on the button
   above, not on this line. */
.spc-attribution {
display: block;
margin-top: 0.4rem;
font-size: 0.7rem;
color: var(--purity-dim);
text-decoration: none;
}
.spc-attribution:hover,
.spc-attribution:focus-visible {
color: var(--gold-lo);
text-decoration: underline;
}

/* ---------- fallback link when verse lookup fails ---------- */

.scripture-ref-fallback { display: inline; }
.spc-view-badge {
font-size: 0.75em;
color: var(--gold-lo);
vertical-align: super;
}

/* ---------- composer live-preview pane ---------- */

.spc-composer-preview {
margin-top: 0.5rem;
}
.spc-composer-preview .scripture-preview-card {
border-left-color: var(--authority-soft); /* slightly dimmer in draft state */
opacity: 0.88;
}

/* ---------- reduced motion overrides ---------- */

@media (prefers-reduced-motion: reduce) {
.scripture-preview-card,
.study-together-btn {
transition: none;
}
.scripture-preview-card:hover { box-shadow: none; }
.study-together-btn:hover     { box-shadow: none; }
}

/* ---------- beauty pass: motion guard (spec §4) ----------
 * The only NEW movement this pass touches is ul.news li's hover lift, whose
 * pre-existing translateY(-1px) had no reduced-motion gate. Colour/border/shadow
 * transitions may stay (not vestibular); the movement goes.
 * Deliberately NOT double-guarded here, per spec §4:
 *   .scripture-preview-card — its hover has no transform, and the shipped gate
 *     above already zeroes its transition AND its hover box-shadow; that block
 *     sits later in source order than §3.3's new warm-gold hover shadow, so the
 *     new shadow is already calmed. No fold needed — verified, not assumed.
 *   .post — governed by feed.html's JS-injected
 *     @media(prefers-reduced-motion){.post{box-shadow:none!important}}.
 * This pass adds no @keyframes and no JS animation.
 */
@media (prefers-reduced-motion: reduce) {
	ul.news li,
	ul.news li:hover {
		transition: none;
		transform: none;
	}
}

/* ===================================================================   Command Palette & Keyboard Navigation (Option C)
   ========================================================================== */

/* ---------- focused post card highlight (j/k navigation) ---------- */
.post.focused {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
	box-shadow: 0 4px 18px var(--gold-hair), var(--shadow-lift);
	border-color: var(--gold) !important;
}

/* ---------- keyboard badge <kbd> ---------- */
.cmd-kbd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-ui);
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--purity-dim);
	background: var(--surface-raised);
	border: 1px solid var(--authority);
	border-radius: 4px;
	padding: 0.15rem 0.4rem;
	min-width: 1.3rem;
	box-shadow: var(--shadow-card);
}

/* ---------- glassmorphic command palette modal ---------- */
.cmd-palette-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100; /* above sticky chrome (50); no high-z popovers exist in public/ */
	background: color-mix(in srgb, var(--night) 78%, transparent); /* theme-aware scrim, tokens only */
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 12vh 1rem 2rem;
	overflow-y: auto;
	animation: cmd-fade-in 140ms ease;
}

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

.cmd-palette-dialog {
	width: 100%;
	max-width: 580px;
	background: var(--surface);
	border: 1px solid var(--gold);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lift), 0 0 24px var(--gold-hair);
	overflow: hidden;
	animation: cmd-slide-down 160ms ease;
}

@keyframes cmd-slide-down {
	from { transform: translateY(-12px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

.cmd-palette-header {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.85rem 1.1rem;
	border-bottom: 1px solid var(--authority);
	background: var(--night);
}

.cmd-palette-search-icon {
	font-size: 1.1rem;
	opacity: 0.8;
}

.cmd-palette-input {
	flex: 1;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	font-size: 1.05rem;
	color: var(--purity);
	outline: none !important;
}

.cmd-palette-list {
	max-height: 360px;
	overflow-y: auto;
	padding: 0.5rem 0;
}

.cmd-palette-section-title {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--gold);
	padding: 0.6rem 1.1rem 0.25rem;
}

.cmd-palette-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.65rem 1.1rem;
	cursor: pointer;
	color: var(--purity-dim);
	transition: background-color 100ms ease, color 100ms ease;
}

.cmd-palette-item:hover,
.cmd-palette-item.active {
	background: var(--surface-raised);
	color: var(--purity);
}

.cmd-palette-item.active {
	border-left: 3px solid var(--gold);
	padding-left: calc(1.1rem - 3px);
}

.cmd-palette-item-left {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.cmd-palette-item-icon {
	font-size: 1.1rem;
	width: 24px;
	text-align: center;
}

.cmd-palette-item-label {
	font-size: 0.92rem;
	font-weight: 500;
}

.cmd-palette-empty {
	padding: 2rem 1rem;
	text-align: center;
	color: var(--purity-dim);
	font-size: 0.9rem;
}

.cmd-palette-footer {
	padding: 0.6rem 1.1rem;
	background: var(--night);
	border-top: 1px solid var(--authority);
	font-size: 0.74rem;
	color: var(--purity-dim);
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
}

/* ---------- shortcuts cheatsheet modal ---------- */
.shortcuts-dialog {
	max-width: 500px;
}

.shortcuts-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.85rem 1.2rem;
	border-bottom: 1px solid var(--authority);
	background: var(--night);
}

.shortcuts-modal-header h3 {
	margin: 0;
	font-size: 1.05rem;
	color: var(--purity);
}

.shortcuts-modal-body {
	padding: 1rem 1.2rem;
}

.shortcuts-grid {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.shortcuts-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--gold-hair);
}

.shortcuts-desc {
	font-size: 0.88rem;
	color: var(--purity);
}

.shortcuts-kbd-wrap {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
	.cmd-palette-backdrop,
	.cmd-palette-dialog {
		animation: none;
		transform: none;
	}
	.post.focused {
		transition: none;
		transform: none;
	}
}

/* ==========================================================================
   Feed Richness: Thread Lines & Quote-Posting (Option D)
   ========================================================================== */

/* ---------- visual vertical thread lines in comments ---------- */
.comments-list {
	position: relative;
	padding-left: 0.85rem;
	margin-left: 0.35rem;
	border-left: 2px solid var(--authority);
}

.comment {
	position: relative;
	margin-bottom: 0.75rem;
}

.comment::before {
	content: "";
	position: absolute;
	left: -0.85rem;
	top: 0.9rem;
	width: 0.65rem;
	height: 2px;
	background: var(--authority);
}

/* ---------- quote-posting / witnessing cards ---------- */
.quote-card {
	margin: 0.75rem 0 0.5rem;
	padding: 0.75rem 0.9rem;
	background: var(--surface-raised);
	border: 1px solid var(--gold-hair);
	border-left: 3px solid var(--gold);
	border-radius: var(--radius);
	text-decoration: none !important;
	display: block;
	transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.quote-card:hover {
	border-color: var(--gold);
	box-shadow: 0 0 0 1px var(--gold-hair), var(--shadow-lift);
}

.quote-card-header {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.82rem;
	margin-bottom: 0.35rem;
	color: var(--purity-dim);
}

.quote-card-badge {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--gold);
	background: var(--gold-hair);
	padding: 0.1rem 0.35rem;
	border-radius: 4px;
}

.quote-card-author {
	font-weight: 600;
	color: var(--purity);
}

.quote-card-handle {
	color: var(--purity-dim);
}

.quote-card-body {
	font-size: 0.9rem;
	line-height: 1.45;
	color: var(--purity);
	white-space: pre-wrap;
	word-break: break-word;
}

.witness-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
	.quote-card {
		transition: none;
	}
}

/* ==========================================================================
   Composer Intent Selectors, Character Ring & Prayer Candles (Option B)
   ========================================================================== */

/* ---------- composer intent selector pills ---------- */

.intent-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-bottom: 0.75rem;
}

.intent-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.8rem;
	padding: 0.28rem 0.65rem;
	border-radius: 999px;
	border: 1px solid var(--authority);
	background: var(--surface);
	color: var(--purity-dim);
	cursor: pointer;
	transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
	user-select: none;
	-webkit-user-select: none;
}

.intent-pill:hover {
	color: var(--purity);
	border-color: var(--gold);
	background: var(--surface-raised);
}

.intent-pill.active {
	color: var(--gold);
	border-color: var(--gold);
	background: var(--gold-hair);
	font-weight: 600;
}

[data-theme="light"] .intent-pill.active {
	color: var(--gold-lo);
	border-color: var(--gold);
}

/* ---------- circular character ring meter ---------- */

.composer-submit-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 0.6rem;
}

.char-ring-wrap {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	color: var(--purity-dim);
}

.char-ring-svg {
	width: 26px;
	height: 26px;
	transform: rotate(-90deg);
}

.char-ring-bg {
	stroke: var(--surface-raised);
	stroke-width: 3;
	fill: none;
}

.char-ring-progress {
	stroke: var(--gold);
	stroke-width: 3;
	fill: none;
	stroke-linecap: round;
	transition: stroke-dashoffset 100ms ease, stroke 140ms ease;
}

.char-ring-progress.warn {
	stroke: var(--passion-bright);
}

.char-ring-count {
	font-variant-numeric: tabular-nums;
	font-size: 0.75rem;
	opacity: 0;
	transition: opacity 140ms ease;
}

.char-ring-count.visible {
	opacity: 1;
}

.char-ring-count.warn {
	color: var(--passion-bright);
	font-weight: 600;
}

/* ---------- composer live scripture chip ---------- */

.composer-scripture-chip {
	display: none;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.45rem;
	padding: 0.3rem 0.6rem;
	border-radius: 6px;
	background: var(--gold-hair);
	border: 1px solid var(--scripture-border);
	font-size: 0.78rem;
	color: var(--gold);
}

.composer-scripture-chip.visible {
	display: inline-flex;
}

/* ---------- prayer intention cards & candle reaction ---------- */

.card.prayer-card {
	border-left: 3px solid var(--gold);
	background: linear-gradient(135deg, var(--gold-hair) 0%, var(--surface) 40%);
}

.prayer-banner {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--gold);
	background: var(--gold-hair);
	padding: 0.15rem 0.5rem;
	border-radius: 4px;
	margin-bottom: 0.5rem;
}

.candle-btn {
	color: var(--purity-dim);
	border: 1px solid var(--authority);
	background: var(--surface);
	border-radius: 999px;
	padding: 0.25rem 0.65rem;
	font-size: 0.8rem;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	cursor: pointer;
	transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.candle-btn:hover {
	color: var(--gold-hi);
	border-color: var(--gold);
	background: var(--surface-raised);
	transform: translateY(-1px);
}

.candle-btn.active {
	color: var(--gold-hi);
	border-color: var(--gold);
	background: var(--gold-hair);
	box-shadow: 0 0 12px var(--gold-hair);
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.char-ring-progress,
	.candle-btn,
	.intent-pill {
		transition: none;
		transform: none;
	}
}

/* ==========================================================================
   Mobile Bottom Navigation & Ergonomics (Option A)
   ========================================================================== */

.bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 90;
	display: none; /* hidden on desktop */
	align-items: center;
	justify-content: space-around;
	background: rgba(15, 20, 36, 0.92);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-top: 1px solid var(--authority);
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.40);
	padding: 0.45rem 0.5rem calc(0.45rem + env(safe-area-inset-bottom, 0px));
	margin: 0;
}

[data-theme="light"] .bottom-nav {
	background: rgba(255, 255, 255, 0.92);
	border-top-color: var(--trust);
	box-shadow: 0 -4px 16px rgba(31, 27, 15, 0.09);
}

.bottom-nav-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.2rem;
	text-decoration: none;
	color: var(--purity-dim);
	font-size: 0.72rem;
	font-weight: 500;
	padding: 0.3rem 0.2rem;
	border-radius: 8px;
	transition: color 140ms ease, background-color 140ms ease, transform 140ms ease;
	user-select: none;
	-webkit-user-select: none;
}

.bottom-nav-item svg {
	width: 20px;
	height: 20px;
	stroke: currentColor;
	stroke-width: 1.6;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke 140ms ease;
}

.bottom-nav-item:hover {
	color: var(--purity);
	background: var(--surface-raised);
}
.bottom-nav-item:active {
	transform: scale(0.92);
}

.bottom-nav-item.active {
	color: var(--gold);
	font-weight: 600;
}

.bottom-nav-item.active svg {
	stroke: var(--gold);
}

[data-theme="light"] .bottom-nav-item.active {
	color: var(--gold-lo);
}

[data-theme="light"] .bottom-nav-item.active svg {
	stroke: var(--gold-lo);
}

.bottom-nav-item:focus-visible {
	outline: 2px solid var(--trust-bright);
	outline-offset: 1px;
}

/* ---------- mobile composer FAB ---------- */

.mobile-fab {
	position: fixed;
	bottom: calc(4.8rem + env(safe-area-inset-bottom, 0px));
	right: 1.15rem;
	z-index: 85;
	display: none;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 999px;
	background: var(--gold-sheen);
	background-size: 200% auto;
	color: var(--night);
	border: 1px solid var(--gold-hi);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 0 12px var(--gold-hair);
	cursor: pointer;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	transition: transform 160ms ease, box-shadow 160ms ease;
}

.mobile-fab svg {
	width: 22px;
	height: 22px;
	stroke: var(--night);
	stroke-width: 2.4;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mobile-fab:hover {
	transform: translateY(-2px) scale(1.05);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.52), 0 0 16px var(--gold);
}

.mobile-fab:active {
	transform: translateY(0) scale(0.96);
}

.mobile-fab:focus-visible {
	outline: 2px solid var(--trust-bright);
	outline-offset: 2px;
}

/* ---------- skeleton shimmer loading ---------- */

.skeleton-container {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	margin-top: 0.5rem;
}

.skeleton-card {
	background: var(--surface);
	border: 1px solid var(--authority);
	border-radius: var(--radius);
	padding: 1.1rem;
	position: relative;
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.skeleton-card::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transform: translateX(-100%);
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--gold-hair) 50%,
		transparent 100%
	);
	animation: skeleton-shimmer 1.8s infinite;
}

@keyframes skeleton-shimmer {
	100% {
		transform: translateX(100%);
	}
}

.skeleton-header {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-bottom: 0.8rem;
}

.skeleton-avatar {
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: var(--surface-raised);
	flex-shrink: 0;
}

.skeleton-meta {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.skeleton-line {
	height: 12px;
	border-radius: 4px;
	background: var(--surface-raised);
}

.skeleton-line.w-30 { width: 30%; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-80 { width: 80%; }
.skeleton-line.w-100 { width: 100%; }

.skeleton-actions {
	display: flex;
	gap: 0.6rem;
	margin-top: 0.9rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--surface-raised);
}

.skeleton-btn {
	width: 58px;
	height: 24px;
	border-radius: 999px;
	background: var(--surface-raised);
}

/* ---- r8M reaction row (begin) ---- */
/* Ruling 12 ("three at rest"): the post actions row keeps Amen, Thoughts?,
   and one disclosure ("More") at rest; the other five faith reactions plus
   Witness/Share/Copy/Report live inside it. The sheet is positioned off the
   row, so the row needs a positioning context. One declaration, scoped to
   the real ancestor (styles.css:532 `.post .actions`). */
.post .actions {
	position: relative;
}

/* The <details> disclosure sits inline with the rest of the row's flex items. */
.react-more {
	display: inline-flex;
	align-items: center;
}

/* <summary> is not covered by the tag-qualified `button.react-btn,
   button.subtle-btn, a.subtle-btn` rule above (it is neither a button nor
   an anchor), so its geometry is restated here under a class selector that
   only this element carries; color/hover/recede treatment still comes from
   the existing class-only `.post .actions .subtle-btn` rule, which already
   matches a <summary class="subtle-btn react-more-btn">. */
.react-more-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	width: auto;
	margin: 0;
	padding: 0.35rem 0.85rem;
	min-height: 44px;
	font-size: 0.9rem;
	font-weight: 600;
	border: 1px solid var(--trust);
	border-radius: 999px;
	cursor: pointer;
	list-style: none;
}
.react-more-btn::-webkit-details-marker {
	display: none;
}
.react-more-btn:focus-visible {
	outline: 2px solid var(--trust-bright);
	outline-offset: 2px;
}

.react-more-chevron {
	display: inline-block;
}
.react-more[open] .react-more-chevron {
	transform: rotate(180deg);
}

.react-more-rule {
	flex: 1 0 100%;
	width: 100%;
	border: none;
	border-top: 1px solid var(--trust);
	margin: 0.4rem 0;
}

/* The two rules below give the sheet an explicit `display: flex` (see the
   breakpoint rules further down), which is author CSS and so always beats
   the UA stylesheet's `details:not([open]) > *:not(summary) { display: none }`
   default, regardless of specificity (author beats user-agent per the
   cascade's origin order, not just specificity). Without this, the sheet
   would stay visible even while <details> is collapsed. Restated at
   author-level specificity so it wins over the plain `.react-more-sheet`
   rule in either breakpoint. */
.react-more:not([open]) > .react-more-sheet {
	display: none;
}

@media (min-width: 641px) {
	.react-more-sheet {
		position: absolute;
		z-index: 30;
		background: var(--surface);
		border: 1px solid var(--trust);
		border-radius: var(--radius);
		box-shadow: var(--shadow-lift);
		padding: 0.6rem;
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		max-width: min(28rem, 92vw);
	}
}

@media (max-width: 640px) {
	.react-more-sheet {
		position: fixed;
		left: 0;
		right: 0;
		bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
		z-index: 30;
		background: var(--surface);
		border: 1px solid var(--trust);
		border-radius: var(--radius);
		box-shadow: var(--shadow-lift);
		padding: 0.6rem;
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
	}
}

/* No JS-driven motion added here; the only transform (chevron flip) is a
   static [open] state swap, not a transition, so no reduced-motion override
   is required (Working Rules item 4 — stated, not silently skipped). */
/* ---- r8M reaction row (end) ---- */

/* ---------- mobile screen layout adjustments ---------- */

@media (max-width: 640px) {
	.bottom-nav {
		display: flex;
	}
	.mobile-fab {
		display: flex;
	}
	body.has-bottom-nav {
		padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)) !important;
	}
	input[type="text"], input[type="password"], input[type="email"], textarea {
		font-size: 16px !important;
	}
}

/* ---------- reduced motion overrides for Option A ---------- */

@media (prefers-reduced-motion: reduce) {
	.skeleton-card::after {
		animation: none;
		display: none;
	}
	.mobile-fab,
	.mobile-fab:hover,
	.mobile-fab:active,
	.bottom-nav-item {
		transition: none;
	}
}

/* ---------- social auth buttons & divider (account page) ---------- */
.auth-oauth-container {
	margin-bottom: 1.2rem;
}

.btn-google {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	width: 100%;
	margin-top: 0.8rem;
	padding: 0.65rem 1rem;
	font: inherit;
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	color: var(--purity);
	background: var(--surface-raised);
	border: 1px solid var(--trust);
	border-radius: var(--radius);
	cursor: pointer;
	box-shadow: var(--shadow-card);
	transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.btn-google:hover:not(:disabled) {
	border-color: var(--gold);
	background: var(--surface);
	box-shadow: var(--shadow-lift);
	transform: translateY(-1px);
}

.btn-google:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

.btn-google:focus-visible {
	outline: 2px solid var(--trust-bright);
	outline-offset: 2px;
}

.btn-google-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.btn-google-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.auth-divider {
	display: flex;
	align-items: center;
	text-align: center;
	margin: 1.2rem 0 0.8rem;
	color: var(--purity-dim);
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
	content: "";
	flex: 1;
	border-bottom: 1px solid var(--authority);
}

.auth-divider:not(:empty)::before {
	margin-right: 0.8em;
}

.auth-divider:not(:empty)::after {
	margin-left: 0.8em;
}

@media (prefers-reduced-motion: reduce) {
	.btn-google {
		transition: none;
		transform: none;
	}
	.btn-google:hover:not(:disabled) {
		transform: none;
	}
}


/* ---- r8K desktop header (begin) ---- */
/*
 * Sticky desktop site header — round 8, block K (owner ruling 11).
 *
 * Built by public/js/mobile-nav.js `initSiteNav()` from the SAME NAV_ITEMS
 * the bottom bar uses, so the two navigations can never disagree. Shown at
 * >= 641px, exactly where `.bottom-nav` is hidden; <= 640px is unchanged.
 *
 * This region is APPENDED at EOF on purpose (r8 conflict matrix): block J
 * edits :44-61, :133-140, :236-262 and :535-552, block M inserts its region
 * before the mobile-layout block. Overrides this bar needs on rules it does
 * not own (the two fixed corner toggles at :144-210) are made HERE by
 * cascade, never by editing those lines.
 */

.site-nav {
	/* Mobile keeps the bottom bar; nothing is pinned to the top down there. */
	display: none;
}

@media (min-width: 641px) {
	.site-nav {
		display: flex;
		position: sticky;
		top: 0;
		z-index: 40;
		height: 56px;
		align-items: center;
		gap: 1.25rem;
		padding: 0 1.25rem 0 1rem;
		/* The theme + language buttons now live inside .site-nav-slot in
		   normal flow, so standard 1.25rem padding closes the bar. */
		padding-right: 1.25rem;
		background: color-mix(in srgb, var(--night) 84%, transparent);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
		border-bottom: 1px solid var(--authority);
		/* No gold thread here — `header.site::after` keeps the one gold rule
		   on the page (BRAND.md §7.3: gold stays scarce). */
	}

	/* ---- left: the mark + the wordmark ---- */
	.site-nav-brand {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		flex: 0 0 auto;
		text-decoration: none;
	}
	.site-nav-brand img {
		display: block;
		width: 22px;
		height: 22px;
	}
	.site-nav-wordmark {
		font-family: var(--font-mark);
		font-size: 1.05rem;
		letter-spacing: 0.04em;
		color: var(--purity);
	}
	.site-nav-brand:focus-visible {
		outline: 2px solid var(--trust-bright);
		outline-offset: 2px;
		border-radius: 6px;
	}

	/* ---- centre: the five destinations ---- */
	.site-nav-links {
		display: flex;
		align-items: center;
		gap: 0.25rem;
		flex: 1 1 auto;
		justify-content: center;
	}

	.site-nav-item {
		font-size: 0.9rem;
		padding: 0.4rem 0.7rem;
		border-radius: 999px;
		color: var(--purity-dim);
		text-decoration: none;
		white-space: nowrap;
	}
	.site-nav-item:hover {
		color: var(--purity);
	}
	.site-nav-item.active {
		color: var(--gold);
		background: var(--gold-hair);
	}
	/* Brand law (BRAND.md §5 + ops/unleash/dispatch-lessons.md): raw --gold as
	   text ink fails AA on parchment, so the light theme uses --gold-lo. */
	[data-theme="light"] .site-nav-item.active {
		color: var(--gold-lo);
	}
	.site-nav-item:focus-visible {
		outline: 2px solid var(--trust-bright);
		outline-offset: 2px;
	}

	/* ---- right: the reserved slot ---- */
	/* Holds the language + theme toggles in normal flow at >= 641px (round 9,
	   block T). Mobile (<= 640px) leaves them fixed in document.body. */
	.site-nav-slot {
		display: flex;
		align-items: center;
		gap: 0.3rem;
		margin-left: auto;
		flex: 0 0 auto;
	}

	.site-nav-slot .theme-toggle,
	.site-nav-slot .lang-toggle {
		position: static;
		top: auto;
		right: auto;
	}

	/* In-page anchors (e.g. /feed#composer from the Compose destination) must
	   land below the sticky bar, not behind it. */
	body.has-site-nav {
		scroll-padding-top: 56px;
	}
	/* scroll-padding only applies on the real scroll container, and for
	   document scrolling that is the root element rather than <body>; this
	   companion rule is what actually moves the anchor stop. Dropped whole
	   by engines without :has(), leaving the rule above as the intent. */
	html:has(body.has-site-nav) {
		scroll-padding-top: 56px;
	}
}

/* This bar introduces no transition and no animation, so there is nothing for
   a `prefers-reduced-motion` override to calm here (BRAND.md §7.6). */
/* ---- r8K desktop header (end) ---- */

/* ---- r9N homepage rhythm (begin) ---- */
/*
 * Round 9, block N — homepage rhythm at >= 641px (design digest §2 "N",
 * "Jobs pillars" addendum: eyebrow .72rem / .12em / uppercase / gold-lo,
 * lead story, two-column grid, hero ~30% shorter).
 *
 * Everything here is inside a `min-width: 641px` query, so the phone shell
 * (<= 640px) renders exactly as it did on rail/r9 — this region has no
 * effect below 641px. The hero/news base rules at :377-394 and :772-905 are
 * NOT edited; this region overrides them by cascade (equal specificity,
 * later in source), which keeps the rollback to "delete this region".
 *
 * No new animation, no transition: the beam, the sheen on `.hero-rule` and
 * `header.hero::after` are untouched, so `prefers-reduced-motion` (:910)
 * still calms exactly what it calmed before (BRAND.md §7.6). Gold used as
 * text ink in light theme is --gold-lo (BRAND.md §3).
 *
 * Vertical arithmetic (root 16px, measured at a 1280px viewport where every
 * clamp() in the hero is pinned to its max):
 *   base  6.50 padding-top + 1.50 logo margin + 6.875 logo (110px)
 *       + 5.25 wordmark (5rem x 1.05) + 2.475 hero-rule (1.1 + .125 + 1.25)
 *       + 2.25 tagline (1.5rem x 1.5) + 1.70 hero-actions margin
 *       + 2.64 button box (.72 x 2 + ~1.2 line) + 1.00 hero-links margin
 *       + 1.35 hero-links line + 3.40 padding-bottom          = 34.94rem
 *   r9N   3.60 + 0.90 + 4.625 (74px) + 3.78 (3.6rem x 1.05)
 *       + 1.725 (.75 + .125 + .85) + 1.92 (1.28 x 1.5) + 1.15
 *       + 2.64 + 0.70 + 1.35 + 2.20                           = 24.59rem
 *   => -10.35rem, -29.6% (target 25-35%).
 */
/* ≤ 640 px: the lead eyebrow does not exist (R-N MUST-FIX: unstyled inline
   text glued to the headline on phones). Revealed inside the ≥ 641 px block. */
ul.news li.lead .lead-eyebrow { display: none; }

@media (min-width: 641px) {
	/* --- 1. a shorter hero ------------------------------------------- */
	header.hero {
		padding: clamp(2.6rem, 5vw, 3.6rem) 1rem clamp(1.8rem, 3vw, 2.2rem);
	}
	.logo-container { margin-bottom: 0.9rem; }
	.hero-logo {
		width: clamp(64px, 6vw, 74px);
		height: clamp(64px, 6vw, 74px);
	}
	header.hero .wordmark-caps { font-size: clamp(2.6rem, 5.6vw, 3.6rem); }
	.hero-rule { margin: 0.75rem auto 0.85rem; }
	.hero-tagline { font-size: clamp(1.1rem, 2vw, 1.28rem); }
	.hero-actions { margin-top: 1.15rem; }
	.hero-links { margin-top: 0.7rem; }

	/* --- 2. secondary links stop echoing the sticky bar ---------------- */
	/* The bar (public/js/mobile-nav.js NAV_ITEMS) already carries Home, Feed,
	   Compose, Resources and Account. So at >= 641px the hero keeps only what
	   the bar does NOT have: "First time?" — plus the signed-in member's own
	   name, which the bar never shows (it says "Account"). index.html's
	   loadNews() strips `data-i18n` off #hero-account-link the moment it
	   writes that name, so the attribute selector below is an exact test for
	   "still the generic Sign in / Join label": generic -> hidden (the bar
	   has it), personalised -> shown. Nothing becomes unreachable: Resources
	   and Account are one click away in the bar at exactly these widths. */
	.hero-links {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: baseline;
		gap: 0 0.9rem;
	}
	.hero-links .hero-links-sep { display: none; }
	.hero-links .hero-link-resources { display: none; }
	.hero-links #hero-account-link[data-i18n] { display: none; }

	/* --- 3. the lead story card --------------------------------------- */
	ul.news li.lead {
		padding: 1.15rem 1.35rem 1.05rem;
		border-left-width: 3px;
	}
	ul.news li.lead .lead-eyebrow {
		display: block;
		font-size: 0.72rem;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--gold);
		margin-bottom: 0.35rem;
	}
	ul.news li.lead > a {
		font-size: 1.3rem;   /* >= 1.25x the list items' 1rem titles */
		line-height: 1.25;
	}
	ul.news li.lead .meta {
		display: block;      /* source + date stay visible on the lead card */
		font-size: 0.9rem;
		margin-top: 0.4rem;
	}

	/* The eyebrow is the only gold text ink this region adds. */
	[data-theme="light"] ul.news li.lead .lead-eyebrow { color: var(--gold-lo); }
}

/* --- 4. the denser two-column list (>= 900px) ------------------------- */
/*
 * Items 2..n take one cell each; the lead spans both columns. `storyThread()`
 * (public/index.html) appends the thread as a CHILD of its own <li>
 * (`li.append(thread)`), never as a sibling, so opening a thread grows that
 * one grid cell — it can never land in a cell of its own or break the flow.
 * `align-items: start` keeps a short neighbour from stretching to match it.
 */
@media (min-width: 900px) {
	ul.news {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		gap: 0.7rem;
	}
	ul.news li { margin-bottom: 0; }
	ul.news li.lead { grid-column: 1 / -1; }
}
/* ---- r9N homepage rhythm (end) ---- */