/* ============================================================
   Lil Red Wagon — homepage styling for the UX Builder elements
   ------------------------------------------------------------
   The page is built from Flatsome sections, rows and columns, so
   Flatsome owns spacing, widths and backgrounds wherever it can.
   This file owns only what the builder cannot express: the
   gradient display type, the tile chrome, the warm section
   washes, and the live plugin output.

   Everything is scoped to .lrwh-scope, which goes on each
   section, so the elements also work on any other page.

   NOTE: reader.css is loaded on any page using the search
   element and ships its own .lrw-btn / .lrw-pane / .lrw-note /
   .lrw-home. Everything authored here is prefixed lrwh- to stay
   clear of it. The only plugin classes deliberately restyled are
   .lrw-quote and .lrw-search-embed, which are shortcode output.
   ============================================================ */

.lrwh-scope {
	--h-paper: #f6f5f2;
	--h-white: #ffffff;
	--h-ink: #1f2328;
	--h-ink-soft: #3c434c;
	--h-muted: #6b7280;
	--h-line: #e5e3de;
	--h-red: #a4262c;
	--h-red-deep: #7d1c21;
	--h-gold: #b0803a;
	--h-blush: #f7ebeb;

	--h-serif: Georgia, 'Times New Roman', serif;
	--h-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	--h-r: 26px;
	--h-r-sm: 16px;
	--h-gap: 18px;

	--hl-y: #fef3b3;
	--hl-b: #bfdbfe;
	--hl-g: #bbf7d0;
	--hl-p: #fbcfe8;
	--hl-v: #e9d5ff;
	--hl-o: #fed7aa;
	--hl-r: #fecaca;

	color: var(--h-ink);
	font-family: var(--h-sans);
	-webkit-font-smoothing: antialiased;
}

/* Flatsome puts `margin: 0 1em 1em 0` on every button and styles bare
   headings for its own pages. :where() adds no specificity, so every rule
   below still wins. */
.lrwh-scope :where(button, .button, input[type='submit'], input[type='button']) {
	margin: 0;
}

.lrwh-scope :where(h1, h2, h3, h4, p, ul, ol, li, blockquote, figure) {
	margin: 0;
	color: inherit;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
}

.lrwh-scope :where(a) {
	color: inherit;
	text-decoration: none;
}

.lrwh-scope :where(*, *::before, *::after) {
	box-sizing: border-box;
}

/* The front page is the full-width template; drop the theme's own vertical
   padding so the hero wash can reach the header. */
body.home #content,
body.home .page-wrapper {
	padding-top: 0;
	padding-bottom: 0;
}

/* ---------- section washes ----------------------------------
   Flatsome controls each section's padding from the builder;
   these classes only add the gradients it cannot produce. */

.lrwh-hero {
	background:
		radial-gradient(120% 90% at 12% 0%, #fdf1ea 0%, rgba(253, 241, 234, 0) 58%),
		radial-gradient(90% 80% at 92% 8%, #f9e6e4 0%, rgba(249, 230, 228, 0) 62%),
		linear-gradient(180deg, #fbf7f3 0%, var(--h-white) 82%);
	overflow: hidden;
}

/* A single soft ember low and left, so the wash has a source rather than
   reading as flat noise. */
.lrwh-hero::after {
	content: '';
	position: absolute;
	left: -14%;
	bottom: -58%;
	width: 62%;
	padding-bottom: 62%;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, rgba(164, 38, 44, 0.13) 0%, rgba(176, 128, 58, 0.07) 40%, rgba(255, 255, 255, 0) 68%);
	pointer-events: none;
	z-index: 0;
}

.lrwh-hero .section-content {
	position: relative;
	z-index: 1;
}

.lrwh-paper {
	background: var(--h-paper);
}

.lrwh-ink {
	background: #17191d;
	color: #f3f1ec;
	overflow: hidden;
}

.lrwh-ink::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(78% 120% at 88% 0%, rgba(164, 38, 44, 0.42) 0%, rgba(164, 38, 44, 0) 60%),
		radial-gradient(60% 100% at 6% 100%, rgba(176, 128, 58, 0.3) 0%, rgba(176, 128, 58, 0) 62%);
	pointer-events: none;
	z-index: 0;
}

.lrwh-ink .section-content {
	position: relative;
	z-index: 1;
}

.lrwh-closer {
	background:
		radial-gradient(80% 120% at 50% 108%, #fbe6e0 0%, rgba(251, 230, 224, 0) 62%),
		var(--h-white);
}

/* ---------- display type ------------------------------------
   Roman Georgia in ink, with the emphasised phrase in Georgia
   italic carrying a red-to-ochre gradient. */

.lrwh-disp {
	font-family: var(--h-serif);
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: -0.018em;
	color: var(--h-ink);
	text-wrap: balance;
	font-size: clamp(1.9rem, 4vw, 3rem);
}

.lrwh-disp em {
	font-style: italic;
	color: var(--h-red);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
	.lrwh-disp em {
		background: linear-gradient(96deg, var(--h-red-deep) 0%, var(--h-red) 42%, var(--h-gold) 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		-webkit-text-fill-color: transparent;
		/* Georgia's italic descenders clip without a little room. */
		padding-right: 0.06em;
	}
}

.lrwh-disp-hero {
	font-size: clamp(2.6rem, 7.2vw, 5.4rem);
	max-width: 15ch;
}

.lrwh-h2 {
	font-size: clamp(2rem, 4.2vw, 3.15rem);
	margin-bottom: 14px;
}

.lrwh-disp-light {
	color: #fbf9f6;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
	.lrwh-disp-light em {
		background: linear-gradient(96deg, #e8737a 0%, #e8b45c 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

/* Lede paragraph — put `lrwh-sub` in a Text element's class field. */
.lrwh-scope .lrwh-sub,
.lrwh-scope .lrwh-sub p {
	font-family: var(--h-sans);
	font-size: clamp(1.05rem, 1.55vw, 1.24rem);
	font-weight: 400;
	line-height: 1.62;
	color: var(--h-ink-soft);
	max-width: 60ch;
	text-transform: none;
}

.lrwh-ink .lrwh-sub,
.lrwh-ink .lrwh-sub p {
	color: rgba(243, 241, 236, 0.72);
}

/* ---------- buttons -----------------------------------------
   Flatsome's own Button element, restyled. Add the classes in
   the button's Class field so it stays builder-editable. */

.lrwh-scope .button.lrwh-btn,
.lrwh-scope a.button.lrwh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	height: auto;
	padding: 0 28px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-family: var(--h-sans);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.005em;
	text-transform: none;
	box-shadow: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.lrwh-scope .button.lrwh-btn span {
	line-height: 1;
}

/* Buttons size to their label, never to the column. */
.lrwh-scope .button.lrwh-btn {
	width: auto;
	align-self: flex-start;
}

.lrwh-scope .text-center .button.lrwh-btn,
.lrwh-scope .col.align-center .button.lrwh-btn {
	align-self: center;
}

.lrwh-scope .button.lrwh-btn-solid,
.lrwh-scope a.button.lrwh-btn-solid {
	background-color: var(--h-red);
	color: #fff;
	box-shadow: 0 10px 26px -10px rgba(164, 38, 44, 0.62);
}

.lrwh-scope .button.lrwh-btn-solid:hover {
	background-color: var(--h-red-deep);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 16px 34px -12px rgba(164, 38, 44, 0.7);
}

.lrwh-scope .button.lrwh-btn-ghost,
.lrwh-scope a.button.lrwh-btn-ghost {
	background-color: rgba(255, 255, 255, 0.72);
	border-color: var(--h-line);
	color: var(--h-ink);
}

.lrwh-scope .button.lrwh-btn-ghost:hover {
	background-color: #fff;
	border-color: #cfc9c0;
	color: var(--h-ink);
	transform: translateY(-2px);
}

/* ---------- column plumbing ---------------------------------
   Tiles stretch to the tallest in their row, and two stacked in
   one column space evenly. This is what reproduces the bento's
   tall-tile-beside-two-stacked look without a CSS grid. */

/* Only columns that actually hold tiles become flex containers. Making every
   column flex stretches its children, which silently turns the hero and
   closing buttons into full-width blocks. */
.lrwh-scope .col:has(.lrwh-tile) {
	display: flex;
	flex-direction: column;
}

.lrwh-scope .col-inner:has(> .lrwh-tile) {
	display: flex;
	flex-direction: column;
	gap: var(--h-gap);
	height: 100%;
	width: 100%;
}

/* ---------- tiles -------------------------------------------- */

.lrwh-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px;
	border-radius: var(--h-r);
	background: var(--h-white);
	border: 1px solid var(--h-line);
	overflow: hidden;
}

.lrwh-tile.t-marks-bg { background: linear-gradient(168deg, #fffdfb 0%, #fdf3ec 100%); }
.lrwh-tile.t-blush-bg { background: linear-gradient(160deg, #fbf1f1 0%, #f7e3e2 100%); border-color: #f0d9d8; }
.lrwh-tile.t-cream-bg { background: linear-gradient(160deg, #fbf8f0 0%, #f4ead6 100%); border-color: #ebdfc7; }

.lrwh-tile h3 {
	font-family: var(--h-serif);
	font-size: 1.45rem;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.012em;
}

.lrwh-tile p {
	font-size: 0.965rem;
	line-height: 1.6;
	color: var(--h-muted);
}

.lrwh-tile-copy {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

/* Side-by-side variant for the full-width tile at the foot of the grid. */
.lrwh-tile.t-wide {
	flex-direction: row-reverse;
	align-items: center;
	gap: 40px;
	background: linear-gradient(110deg, #ffffff 0%, #faf6f0 100%);
}

.lrwh-tile.t-wide .lrwh-tile-copy {
	margin-top: 0;
	flex: 1 1 58%;
}

.lrwh-tile.t-wide p {
	max-width: 56ch;
}

.lrwh-tile.t-wide .lrwh-chips {
	flex: 1 1 42%;
}

/* ---------- figures ------------------------------------------ */

.lrwh-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--h-gap);
}

.lrwh-stat {
	position: relative;
	padding: 30px 26px 26px;
	border-radius: var(--h-r);
	overflow: hidden;
	min-height: 178px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.lrwh-stat:nth-child(1) { background: linear-gradient(158deg, #fdf3ee 0%, #fbe4dc 100%); }
.lrwh-stat:nth-child(2) { background: linear-gradient(158deg, #fbf1f1 0%, #f6dedd 100%); }
.lrwh-stat:nth-child(3) { background: linear-gradient(158deg, #fbf7ec 0%, #f2e6cd 100%); }
.lrwh-stat:nth-child(4) { background: linear-gradient(158deg, #f8f4f0 0%, #ece2d8 100%); }

.lrwh-stat-l {
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--h-ink);
	opacity: 0.72;
	max-width: 18ch;
}

.lrwh-num {
	font-family: var(--h-serif);
	font-size: clamp(2.5rem, 4.4vw, 3.6rem);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--h-ink);
	display: block;
}

.lrwh-num i {
	font-style: italic;
	font-size: 0.62em;
	letter-spacing: -0.01em;
	color: var(--h-red);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
	.lrwh-num i {
		background: linear-gradient(96deg, var(--h-red) 0%, var(--h-gold) 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		-webkit-text-fill-color: transparent;
	}
}

/* ---------- highlight demo ----------------------------------- */

.lrwh-marks-demo {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
}

.lrwh-verse-demo {
	background: #fff;
	border: 1px solid var(--h-line);
	border-radius: var(--h-r-sm);
	padding: 22px 22px 18px;
	box-shadow: 0 14px 30px -22px rgba(31, 35, 40, 0.5);
}

.lrwh-verse-demo p {
	font-family: var(--h-serif);
	font-size: 1.06rem;
	line-height: 1.78;
	color: var(--h-ink);
}

.lrwh-vn {
	font-family: var(--h-sans);
	font-size: 0.72em;
	font-weight: 700;
	color: var(--h-red);
	vertical-align: 0.42em;
	margin-right: 6px;
}

.lrwh-verse-demo mark {
	background: var(--hl-y);
	color: inherit;
	padding: 0.06em 0;
	border-radius: 2px;
}

.lrwh-verse-demo mark.b { background: var(--hl-b); }
.lrwh-verse-demo mark.g { background: var(--hl-g); }

.lrwh-note {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	margin-left: 6px;
	border-radius: 50%;
	background: var(--h-red);
	vertical-align: 0.14em;
}

.lrwh-note::after {
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #fff;
}

.lrwh-swatches {
	display: flex;
	gap: 7px;
	margin-top: 18px;
	padding-top: 15px;
	border-top: 1px solid var(--h-line);
}

.lrwh-swatches span {
	width: 21px;
	height: 21px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(31, 35, 40, 0.09);
}

.lrwh-swatches .sw-y { background: var(--hl-y); }
.lrwh-swatches .sw-b { background: var(--hl-b); }
.lrwh-swatches .sw-g { background: var(--hl-g); }
.lrwh-swatches .sw-p { background: var(--hl-p); }
.lrwh-swatches .sw-v { background: var(--hl-v); }
.lrwh-swatches .sw-o { background: var(--hl-o); }
.lrwh-swatches .sw-r { background: var(--hl-r); }

/* The note the red dot opens, filed in a notebook. */
.lrwh-note-card {
	padding: 16px 18px;
	border-radius: var(--h-r-sm);
	background: var(--h-blush);
	border: 1px solid #f0dcdb;
}

.lrwh-note-card span {
	display: block;
	font-family: var(--h-sans);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--h-red);
	margin-bottom: 7px;
}

.lrwh-note-card p {
	font-family: var(--h-serif);
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--h-ink-soft);
}

/* ---------- verse of the day --------------------------------- */

.lrwh-scope .lrw-quote,
.lrwh-scope .lrw-quote.lrw-daily {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: inherit;
}

.lrwh-scope .lrw-quote p {
	font-family: var(--h-serif);
	font-size: 1.22rem;
	line-height: 1.62;
	color: var(--h-ink);
	letter-spacing: -0.004em;
}

.lrwh-scope .lrw-quote cite {
	display: block;
	margin-top: 14px;
	font-family: var(--h-sans);
	font-style: normal;
	font-size: 0.85rem;
	font-weight: 600;
	opacity: 1;
}

.lrwh-scope .lrw-quote cite a {
	color: var(--h-red);
	border-bottom: 1px solid rgba(164, 38, 44, 0.28);
	padding-bottom: 1px;
}

.lrwh-scope .lrw-quote cite a:hover {
	border-bottom-color: var(--h-red);
}

/* ---------- side by side -------------------------------------- */

.lrwh-panes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--h-line);
	border: 1px solid var(--h-line);
	border-radius: var(--h-r-sm);
	overflow: hidden;
}

.lrwh-pane {
	background: #fff;
	padding: 16px 15px 15px;
}

.lrwh-pane b {
	display: block;
	font-family: var(--h-sans);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.045em;
	text-transform: uppercase;
	color: var(--h-red);
	margin-bottom: 9px;
}

.lrwh-pane p {
	font-family: var(--h-serif);
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--h-ink-soft);
}

/* ---------- shared marks --------------------------------------
   One line repeated three times, each marked to a different
   extent: a diagram of several readers landing on one passage,
   not a readout of live counts. */

.lrwh-overlap {
	background: #fff;
	border: 1px solid var(--h-line);
	border-radius: var(--h-r-sm);
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.lrwh-overlap p {
	font-family: var(--h-serif);
	font-size: 1.02rem;
	line-height: 1.55;
	color: var(--h-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lrwh-overlap p:nth-child(2) { opacity: 0.82; }
.lrwh-overlap p:nth-child(3) { opacity: 0.64; }

.lrwh-overlap mark {
	background: var(--hl-y);
	color: inherit;
	padding: 0.1em 0;
	border-radius: 2px;
}

.lrwh-overlap mark.b { background: var(--hl-b); }
.lrwh-overlap mark.g { background: var(--hl-g); }

/* ---------- live search --------------------------------------- */

.lrwh-scope .lrw-search-embed {
	max-width: none;
}

.lrwh-scope .lrw-search-embed-input {
	width: 100%;
	height: 56px;
	margin: 0;
	padding: 0 20px;
	border: 1px solid #e2d6bd;
	border-radius: 999px;
	background: #fff;
	box-shadow: none;
	font-family: var(--h-sans);
	font-size: 1rem;
	color: var(--h-ink);
	-webkit-appearance: none;
	appearance: none;
}

.lrwh-scope .lrw-search-embed-input:focus {
	outline: none;
	border-color: var(--h-red);
	box-shadow: 0 0 0 3px rgba(164, 38, 44, 0.13);
}

.lrwh-scope .lrw-search-embed-results {
	border-radius: var(--h-r-sm);
	border: 1px solid var(--h-line);
	box-shadow: 0 20px 44px -20px rgba(31, 35, 40, 0.42);
}

/* ---------- chips --------------------------------------------- */

.lrwh-chips {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	gap: 9px;
}

.lrwh-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 17px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--h-line);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--h-ink-soft);
}

.lrwh-chip::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--h-red);
	opacity: 0.55;
	flex: none;
}

/* ---------- libraries ------------------------------------------ */

.lrwh-libs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--h-gap);
}

.lrwh-lib {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 22px;
	border-radius: var(--h-r-sm);
	background: #fff;
	border: 1px solid var(--h-line);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.lrwh-lib:hover {
	transform: translateY(-3px);
	border-color: #ddd3c6;
	box-shadow: 0 18px 34px -22px rgba(31, 35, 40, 0.48);
}

.lrwh-lib strong {
	font-family: var(--h-serif);
	font-size: 1.18rem;
	font-weight: 400;
	line-height: 1.25;
	color: var(--h-ink);
	letter-spacing: -0.01em;
}

.lrwh-lib em {
	font-style: normal;
	font-size: 0.82rem;
	color: var(--h-muted);
	margin-top: auto;
}

.lrwh-lib em b {
	font-weight: 600;
	color: var(--h-red);
}

/* ---------- waitlist form --------------------------------------
   Contact Form 7 restyled for the dark band. Swapping in Paymattic
   later means replacing the shortcode inside .lrwh-plug-form and
   nothing else. */

.lrwh-plug-form {
	padding: 30px;
	border-radius: var(--h-r);
	background: rgba(255, 255, 255, 0.055);
	border: 1px solid rgba(255, 255, 255, 0.13);
	backdrop-filter: blur(6px);
}

.lrwh-plug-form h3 {
	font-family: var(--h-serif);
	font-size: 1.3rem;
	font-weight: 400;
	color: #fbf9f6;
	margin-bottom: 6px;
}

.lrwh-plug-form > p {
	font-size: 0.92rem;
	line-height: 1.55;
	color: rgba(243, 241, 236, 0.66);
	margin-bottom: 20px;
}

.lrwh-plug-form .wpcf7 form.wpcf7-form {
	margin: 0;
}

.lrwh-plug-form .lrwh-field {
	display: flex;
	gap: 9px;
}

.lrwh-plug-form .wpcf7-form-control-wrap {
	flex: 1;
	min-width: 0;
	display: block;
}

.lrwh-plug-form input[type='email'] {
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 0 20px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.07);
	color: #fbf9f6;
	font-family: var(--h-sans);
	font-size: 1rem;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.lrwh-plug-form input[type='email']::placeholder {
	color: rgba(243, 241, 236, 0.42);
}

.lrwh-plug-form input[type='email']:focus {
	outline: none;
	border-color: rgba(232, 164, 92, 0.8);
	background: rgba(255, 255, 255, 0.1);
	box-shadow: 0 0 0 3px rgba(232, 164, 92, 0.16);
}

.lrwh-plug-form input[type='submit'] {
	height: 52px;
	flex: none;
	margin: 0;
	padding: 0 26px;
	border: 0;
	border-radius: 999px;
	background: var(--h-red);
	color: #fff;
	font-family: var(--h-sans);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.005em;
	cursor: pointer;
	text-transform: none;
	box-shadow: 0 10px 26px -12px rgba(164, 38, 44, 0.85);
	transition: background 0.18s ease, transform 0.18s ease;
}

.lrwh-plug-form input[type='submit']:hover {
	background: #b93038;
	transform: translateY(-1px);
}

.lrwh-plug-form .wpcf7-spinner {
	margin: 0 0 0 8px;
}

.lrwh-plug-form .wpcf7-not-valid-tip {
	color: #f0a3a8;
	font-size: 0.83rem;
	margin-top: 8px;
	padding-left: 20px;
}

.lrwh-plug-form .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 11px 16px;
	border-radius: 13px;
	border-width: 1px;
	font-size: 0.88rem;
	line-height: 1.5;
	color: #fbf9f6;
	border-color: rgba(255, 255, 255, 0.24);
}

.lrwh-plug-form .lrwh-fineprint {
	margin-top: 15px;
	font-size: 0.8rem;
	line-height: 1.5;
	color: rgba(243, 241, 236, 0.5);
}

/* ---------- responsive ------------------------------------------ */

@media (max-width: 1024px) {
	.lrwh-stats { grid-template-columns: repeat(2, 1fr); }
	.lrwh-libs { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
	.lrwh-tile.t-wide { flex-direction: column; align-items: flex-start; gap: 22px; }
	.lrwh-tile.t-wide .lrwh-tile-copy,
	.lrwh-tile.t-wide .lrwh-chips { flex: none; }
}

@media (max-width: 720px) {
	.lrwh-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
	.lrwh-stat { min-height: 138px; padding: 20px 18px 18px; }
	.lrwh-stat-l { font-size: 0.79rem; }

	.lrwh-tile { padding: 22px; }
	.lrwh-libs { grid-template-columns: 1fr 1fr; gap: 12px; }

	.lrwh-disp-hero { max-width: none; }

	.lrwh-plug-form { padding: 22px; }
	.lrwh-plug-form .lrwh-field { flex-direction: column; }
	.lrwh-plug-form input[type='submit'] { width: 100%; }

	.lrwh-scope .button.lrwh-btn { width: 100%; }
}

/* Two chapters side by side stop being readable well before the library
   cards do, so these collapse at different widths. */
@media (max-width: 460px) {
	.lrwh-panes { grid-template-columns: 1fr; }
}

@media (max-width: 359px) {
	.lrwh-libs { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.lrwh-scope * { transition: none !important; }
}

/* ---------- sign in card -------------------------------------
   Wraps wp_login_form(), so the markup below is WordPress's own
   (#loginform, .login-username, .login-submit and friends). */

.lrwh-auth {
	background: #fff;
	border: 1px solid var(--h-line);
	border-radius: var(--h-r);
	padding: 32px;
	box-shadow: 0 24px 50px -30px rgba(31, 35, 40, 0.55);
}

.lrwh-auth h3 {
	font-family: var(--h-serif);
	font-size: 1.65rem;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.014em;
	color: var(--h-ink);
}

.lrwh-auth > p {
	margin-top: 7px;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--h-muted);
}

.lrwh-auth form {
	margin-top: 22px;
}

.lrwh-auth .login-username,
.lrwh-auth .login-password {
	margin-bottom: 15px;
}

.lrwh-auth label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--h-ink);
	margin-bottom: 7px;
}

.lrwh-auth input[type='text'],
.lrwh-auth input[type='password'] {
	width: 100%;
	height: 50px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid #ddd7cd;
	border-radius: 12px;
	background: #fff;
	box-shadow: none;
	font-family: var(--h-sans);
	font-size: 1rem;
	color: var(--h-ink);
	-webkit-appearance: none;
	appearance: none;
}

.lrwh-auth input[type='text']:focus,
.lrwh-auth input[type='password']:focus {
	outline: none;
	border-color: var(--h-red);
	box-shadow: 0 0 0 3px rgba(164, 38, 44, 0.13);
}

.lrwh-auth .login-remember label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
	font-size: 0.88rem;
	color: var(--h-muted);
	margin: 0 0 16px;
}

.lrwh-auth .login-remember input {
	margin: 0;
}

.lrwh-auth .login-submit {
	margin: 0;
}

.lrwh-auth input[type='submit'],
.lrwh-auth .lrwh-auth-submit {
	display: block;
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 0 24px;
	border: 0;
	border-radius: 12px;
	background: var(--h-red);
	color: #fff;
	font-family: var(--h-sans);
	font-size: 1rem;
	font-weight: 600;
	line-height: 52px;
	text-align: center;
	text-transform: none;
	letter-spacing: 0.005em;
	cursor: pointer;
	box-shadow: 0 10px 26px -12px rgba(164, 38, 44, 0.7);
	transition: background 0.18s ease, transform 0.18s ease;
}

.lrwh-auth input[type='submit']:hover,
.lrwh-auth .lrwh-auth-submit:hover {
	background: var(--h-red-deep);
	color: #fff;
	transform: translateY(-1px);
}

.lrwh-auth-alt {
	margin-top: 14px;
	text-align: center;
	font-size: 0.9rem;
	color: var(--h-muted);
}

.lrwh-auth-alt a {
	color: var(--h-red);
	font-weight: 600;
}

.lrwh-auth-alt a:hover {
	text-decoration: underline;
}

.lrwh-auth-alt .lrwh-auth-muted {
	color: var(--h-muted);
	font-weight: 400;
}

@media (max-width: 849px) {
	/* Below the hero's two-column break the card is a long way down the
	   page; tighten it so it does not dominate the fold on a phone. */
	.lrwh-auth { padding: 24px; margin-top: 8px; }
}