/*
 * Laura McBride theme — main stylesheet.
 *
 * Everything visual is built on CSS custom properties output by inc/theme-tokens.php
 * (--lm-brand-primary, --lm-font-heading, etc.). Mobile-first; min-width breakpoints scale up.
 *
 * Token fallbacks here let the file render alone (e.g. in a docs preview) but
 * the live values always come from the theme-tokens <style> block in <head>.
 */

:root {
	--lm-brand-primary:   #1a2c4a;
	--lm-brand-secondary: #8b6f47;
	--lm-brand-accent:    #a8442a;
	--lm-bg-color:        #ffffff;
	--lm-text-color:      #22252b;
	--lm-heading-color:   #13182a;
	--lm-header-bg:       #1a2c4a;
	--lm-header-text:     #ffffff;
	/* Alternating section backgrounds — soft, complementary, low-contrast. */
	--lm-section-bg-a:    #ffffff;          /* odd sections: pure white */
	--lm-section-bg-b:    #eef3f8;          /* even sections: very pale blue (≈10% tint of brand-primary) */
	--lm-font-heading: 'Playfair Display', Georgia, serif;
	--lm-font-body:    'Raleway', -apple-system, BlinkMacSystemFont, sans-serif;

	--lm-measure: 68ch;
	--lm-radius: 2px;
	--lm-shadow: 0 2px 12px rgba(19, 24, 42, .08);
	--lm-rule: rgba(19, 24, 42, .08);
	--lm-rule-strong: rgba(19, 24, 42, .14);

	--lm-space-1: 0.25rem;
	--lm-space-2: 0.5rem;
	--lm-space-3: 0.75rem;
	--lm-space-4: 1rem;
	--lm-space-5: 1.5rem;
	--lm-space-6: 2rem;
	--lm-space-7: 3rem;
	--lm-space-8: 4rem;
	--lm-space-9: 5rem;
}

/* ------- Reset / base ------- */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: var(--lm-space-4);
}

body {
	margin: 0;
	background: var(--lm-bg-color);
	color: var(--lm-text-color);
	font-family: var(--lm-font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "kern", "liga", "calt";
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--lm-font-heading);
	color: var(--lm-heading-color);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 var(--lm-space-4);
	letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.25rem, 5.5vw, 3.5rem); }
h2 { font-size: clamp(1.875rem, 4vw, 2.625rem); }
h3 { font-size: 1.5rem; }
em, i { font-style: italic; }

p { margin: 0 0 var(--lm-space-4); }

a {
	color: var(--lm-brand-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 140ms ease;
}
a:hover, a:focus-visible { color: var(--lm-brand-accent); }

button { font: inherit; cursor: pointer; }

:focus-visible {
	outline: 2px solid var(--lm-brand-accent);
	outline-offset: 2px;
}

.lm-skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	background: var(--lm-brand-primary);
	color: #fff;
	padding: var(--lm-space-3) var(--lm-space-4);
	z-index: 100;
}
.lm-skip-link:focus { top: 0; }

/* ------- Layout ------- */

.lm-container {
	max-width: 1040px;
	margin: 0 auto;
	padding: var(--lm-space-7) var(--lm-space-4);
}

/* ------- Site header (navy bar) ------- */

.lm-site-header {
	background: var(--lm-header-bg);
	color: var(--lm-header-text);
	padding: var(--lm-space-4) var(--lm-space-4) 0;
	text-align: center;
}

.lm-site-header__inner {
	max-width: 1040px;
	margin: 0 auto;
}

.lm-site-title {
	font-family: var(--lm-font-heading);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	margin: 0 0 var(--lm-space-5);
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.1;
}
.lm-site-title a {
	color: var(--lm-header-text);
	text-decoration: none;
}
.lm-site-title a:hover,
.lm-site-title a:focus-visible {
	color: var(--lm-header-text);
	opacity: 0.85;
}

.lm-site-tagline {
	font-family: var(--lm-font-heading);
	font-size: 1rem;
	color: var(--lm-header-text);
	font-style: italic;
	opacity: 0.78;
	margin: calc(-1 * var(--lm-space-4)) 0 var(--lm-space-5);
	letter-spacing: 0.02em;
}

/* Pad the bottom of the header when there are no toggles (inner pages have the back row). */
body:not(.lm-home) .lm-site-header { padding-bottom: 0; }

/* ------- Back row (inner pages) ------- */

.lm-back-row {
	margin: 0;
	padding: 0 0 var(--lm-space-4);
	text-align: center;
}
.lm-back {
	display: inline-block;
	color: var(--lm-header-text);
	font-family: var(--lm-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	padding: var(--lm-space-3) var(--lm-space-4);
	opacity: 0.78;
	position: relative;
	transition: opacity 140ms ease;
}
.lm-back::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: var(--lm-space-2);
	width: 0;
	height: 2px;
	background: var(--lm-header-text);
	transform: translateX(-50%);
	transition: width 180ms ease;
}
.lm-back:hover,
.lm-back:focus-visible {
	color: var(--lm-header-text);
	opacity: 1;
}
.lm-back:hover::after,
.lm-back:focus-visible::after { width: 24px; }
.lm-back:focus-visible { outline-color: var(--lm-header-text); }

.lm-main { display: block; }
.lm-main:focus { outline: none; }

/* ------- Homepage: nav toggles inside the navy header ------- */

.lm-home-shell {
	max-width: 1040px;
	margin: 0 auto;
	padding: 0 var(--lm-space-4);
}

/* ------- Homepage hero / featured area ------- */
/*
 * Slider sits inside the navy hero band, centered, at its natural max-width
 * of 900px (set by Cyclone Slider's `responsive` mode). On viewports
 * narrower than 900px it scales down. object-fit: contain ensures the full
 * slide is always visible.
 */
.lm-hero {
	background: var(--lm-bg-color);
	padding: var(--lm-space-5) var(--lm-space-4);
	text-align: center;
}
.lm-hero__inner {
	max-width: 900px;
	margin: 0 auto;
}
/* The slide structure is <div.slide> > <a> > <img>. Force the anchor to
 * fill its slide so the image inside isn't collapsed to natural width. */
.lm-hero .cycloneslider-slide > a,
.lm-hero .cycloneslider-slide > .cycloneslider-caption-more {
	display: block;
	width: 100%;
	height: 100%;
}
.lm-hero .cycloneslider-slide img {
	width: 100%;
	height: auto;
	max-width: 100%;
	display: block;
}
.lm-hero img { display: inline-block; max-width: 100%; height: auto; }
.lm-hero a img { transition: opacity 140ms ease; }
.lm-hero a:hover img,
.lm-hero a:focus-visible img { opacity: 0.9; }

/* Legacy <center> / inline tables from Laura's existing homepage content. */
.lm-hero center { display: block; text-align: center; }
.lm-hero #homemain { margin: 0 auto; max-width: 100%; }
.lm-hero #homemain .cycloneslider { max-width: 100%; }
.lm-hero #homemain a:has(img) { display: inline-block; margin-top: var(--lm-space-4); }

/* ---- Tile grid (legacy otw-sidebar widgets inside #hometable) ---- */

.lm-hero #homemobile {
	margin-top: var(--lm-space-6);
}
.lm-hero #hometable {
	margin: 0 auto;
	width: 100%;
	max-width: 920px;
	border-collapse: separate;
	border-spacing: var(--lm-space-5);
	table-layout: fixed;
}
.lm-hero #hometable td {
	width: 33.333%;
	vertical-align: top;
	padding: 0;
	text-align: center;
}

/* Strip the legacy widget chrome — keep just the image and label. */
.lm-hero .otw-sidebar,
.lm-hero .otw-sidebar .widget,
.lm-hero .otw-sidebar .textwidget {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
}
.lm-hero .otw-sidebar .textwidget p { margin: 0; }
.lm-hero .otw-sidebar .textwidget p + p { margin-top: var(--lm-space-3); }

/* Force every tile image to identical fixed dimensions, regardless of the
 * HTML width/height attributes the legacy widget output has on each <img>.
 * object-fit: cover crops the source to fill the box. */
.lm-hero .otw-sidebar img {
	display: block !important;
	width: 220px !important;
	height: 220px !important;
	max-width: 100%;
	object-fit: cover;
	margin: 0 auto;
	border-radius: var(--lm-radius);
	box-shadow: var(--lm-shadow);
	transition: transform 200ms ease, box-shadow 200ms ease;
}
.lm-hero .otw-sidebar a:hover img,
.lm-hero .otw-sidebar a:focus-visible img {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(19, 24, 42, 0.12);
}

/* Tile label: identical typography across every tile. Title casing is handled
 * in PHP (lm_smart_title_case) so we get "We are Called to Rise" not the all-
 * words-capitalized "We Are Called To Rise" that text-transform would yield. */
.lm-hero .otw-sidebar center,
.lm-hero .otw-sidebar p > center {
	display: block;
	text-align: center;
	font-family: var(--lm-font-heading);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--lm-heading-color);
	margin: var(--lm-space-3) 0 0;
	line-height: 1.3;
	min-height: 2.6em; /* keeps tile heights consistent when some labels wrap to 2 lines */
}
/* Override the legacy gray inline color on the book-title spans. */
.lm-hero .otw-sidebar [style*="color"] { color: inherit !important; }
.lm-hero .otw-sidebar a {
	text-decoration: none;
	color: inherit;
	border: none;
}
.lm-hero .otw-sidebar a:hover,
.lm-hero .otw-sidebar a:focus-visible { color: var(--lm-brand-primary); }

@media (max-width: 700px) {
	/* Flatten the entire table into one 2-column grid so all 6 tiles flow
	 * evenly. `display: contents` on tbody/tr removes them from the layout
	 * tree, making the <td> cells direct grid items of the <table>. */
	.lm-hero #hometable {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--lm-space-4);
		border-spacing: 0;
		width: 100%;
	}
	.lm-hero #hometable tbody,
	.lm-hero #hometable tr { display: contents; }
	.lm-hero #hometable td {
		display: block;
		width: auto;
		padding: 0;
	}
	/* Override the desktop 220x220 forced size — let images scale to the
	 * grid cell width while staying square via aspect-ratio. */
	.lm-hero .otw-sidebar img {
		width: 100% !important;
		height: auto !important;
		max-width: 100%;
		aspect-ratio: 1 / 1;
		object-fit: cover;
	}
}

.lm-toggles {
	background: transparent;
	padding: 0;
	margin: 0;
	border: none;
}

/* Hint text just above the toggle row — tells users these aren't traditional
 * nav links but filters for what shows below. */
.lm-toggles__hint {
	font-family: var(--lm-font-heading);
	font-size: 1.25rem; /* 20px */
	font-style: italic;
	color: var(--lm-header-text);
	margin: 0 0 var(--lm-space-3);
	letter-spacing: 0.04em;
	text-align: center;
}

.lm-toggles__list {
	list-style: none;
	margin: 0;
	padding: 0 0 var(--lm-space-4);
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.lm-toggles__list::-webkit-scrollbar { display: none; }
.lm-toggles__item { flex: 0 0 auto; }

/* Pill-chip toggle, used on both desktop and mobile. A small SVG checkmark
 * is rendered via mask-image inside ::before — it scales in when the chip is
 * active so users immediately see "this section is included". Inactive chips
 * are outline-only, no check. */
/* Nav: anchor link styled as a refined pill that fills on hover. No checkmark
 * (these are jump links now, not toggles, so an "on/off" affordance is wrong). */
.lm-toggles__btn {
	display: inline-flex;
	align-items: center;
	background: transparent;
	color: var(--lm-header-text);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	padding: var(--lm-space-2) var(--lm-space-4);
	font-family: var(--lm-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
	min-height: 38px;
	opacity: 0.86;
	text-decoration: none;
	transition: background 160ms ease, color 160ms ease, border-color 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.lm-toggles__btn:hover,
.lm-toggles__btn:focus-visible {
	background: var(--lm-header-text);
	color: var(--lm-header-bg);
	border-color: var(--lm-header-text);
	opacity: 1;
}
.lm-toggles__btn:active { transform: scale(0.97); }
.lm-toggles__btn:focus-visible { outline-color: var(--lm-header-text); }

/* ---- Mobile: wrap all chips to multiple rows so every option is visible.
 * Earlier iterations used horizontal scroll, but it's not discoverable
 * enough on touch — wrap means every option is reachable without scrolling. ---- */
@media (max-width: 768px) {
	.lm-toggles__hint {
		padding: 0 var(--lm-space-4);
	}
	.lm-toggles__list {
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--lm-space-2);
		padding: 0 var(--lm-space-4) var(--lm-space-5);
		overflow-x: visible;
	}
	.lm-toggles__btn {
		font-size: 0.6875rem;
		min-height: 34px;
		padding: var(--lm-space-2) var(--lm-space-3);
	}
}

/* ---- Desktop: center-aligned row with comfortable gaps ---- */
@media (min-width: 769px) {
	.lm-toggles__list {
		gap: var(--lm-space-2);
	}
}

/* ------- Section ------- */

.lm-section {
	/* Full-bleed: the bg color reaches the viewport edges by breaking out
	 * of .lm-home-shell's 1040px constraint. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: var(--lm-section-bg-a);
	padding: var(--lm-space-6) 0;
	/* CSS Grid: 1fr | min(100% - 2rem, 1040px) | 1fr
	 *
	 * The middle "track" caps at 1040px and shrinks below that on narrow
	 * screens (with 1rem breathing room each side). Every direct child is
	 * placed in column 2, so banner, prose, lists, and book cards all
	 * land in the 1040px-max center column — regardless of any max-width
	 * they declare themselves. The outer 1fr columns are just empty
	 * gutter taking up the alternating bg color. */
	display: grid;
	grid-template-columns:
		1fr
		min(calc(100% - 2rem), 1040px)
		1fr;
}
.lm-section > * { grid-column: 2; }

/* Odd sections (Books, Events, Blog): light blue with faint crosshatch.
 * Even sections (About, News, Contact) stay on the white default. The hero
 * slider band above also stays white so the FIRST shaded band you hit while
 * scrolling is the Books section. */
.lm-section:nth-of-type(odd) {
	background-color: var(--lm-section-bg-b);
	background-image:
		repeating-linear-gradient(45deg,
			rgba(19, 24, 42, 0.035) 0 1px,
			transparent 1px 14px),
		repeating-linear-gradient(-45deg,
			rgba(19, 24, 42, 0.035) 0 1px,
			transparent 1px 14px);
}

.lm-section[hidden] { display: none; }

/* Section fade-in animation. Sections start translated/transparent; the
 * IntersectionObserver in homepage.js adds `is-in-view` to reveal. While
 * `body.lm-jumping` is set (anchor-link in flight), revealed sections appear
 * immediately with no animation. */
.lm-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 600ms cubic-bezier(.2, .8, .2, 1), transform 600ms cubic-bezier(.2, .8, .2, 1);
	will-change: opacity, transform;
}
.lm-reveal.is-in-view {
	opacity: 1;
	transform: none;
}
body.lm-jumping .lm-reveal,
body.lm-jumping .lm-reveal.is-in-view {
	transition: none;
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.lm-reveal { opacity: 1; transform: none; transition: none; }
}

.lm-section__header {
	margin-bottom: var(--lm-space-5);
	text-align: center;
}

.lm-section__title {
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	margin: 0;
	position: relative;
	display: inline-block;
	padding-bottom: var(--lm-space-3);
}
.lm-section__title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 48px;
	height: 2px;
	background: var(--lm-brand-secondary);
	transform: translateX(-50%);
}

.lm-section__more {
	margin: var(--lm-space-4) 0 0;
	text-align: center;
	font-family: var(--lm-font-body);
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Banner image rendered just below the section title on static sections.
 * Uses Laura's per-page `wpcf-banner-image` Toolset Types field. */
.lm-section__banner {
	margin: 0 0 var(--lm-space-6);
	max-width: 100%;
	overflow: hidden;
	border-radius: var(--lm-radius);
	box-shadow: var(--lm-shadow);
}
.lm-section__banner img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 360px;
	object-fit: cover;
}

/* ------- Books card grid (homepage Books section) ------- */
/* Same look as Book Groups cards; adds a "Learn More →" CTA under each cover. */

.lm-books {
	display: grid;
	gap: var(--lm-space-6);
	grid-template-columns: 1fr;
	max-width: 760px;
	margin: 0 auto;
}
@media (min-width: 640px) {
	.lm-books { grid-template-columns: 1fr 1fr; }
}
.lm-book-card { border-radius: var(--lm-radius); overflow: hidden; transition: transform 220ms ease; }
.lm-book-card:hover, .lm-book-card:focus-within { transform: translateY(-2px); }
.lm-book-card__link { display: block; text-decoration: none; color: var(--lm-text-color); text-align: center; padding: var(--lm-space-3); }
.lm-book-card__cover { margin: 0 auto var(--lm-space-4); max-width: 220px; }
.lm-book-card__cover img { display: block; width: 100%; height: auto; border-radius: var(--lm-radius); box-shadow: var(--lm-shadow); transition: box-shadow 220ms ease; }
.lm-book-card:hover .lm-book-card__cover img, .lm-book-card:focus-within .lm-book-card__cover img { box-shadow: 0 8px 24px rgba(19, 24, 42, 0.16); }
.lm-book-card__title { font-family: var(--lm-font-heading); font-size: 1.5rem; font-weight: 700; color: var(--lm-heading-color); margin: 0 0 var(--lm-space-2); line-height: 1.2; }
.lm-book-card__title em, .lm-book-card__title i { font-style: italic; }
.lm-book-card__cta {
	display: inline-block;
	font-family: var(--lm-font-heading);
	font-size: 0.95rem;
	font-style: italic;
	color: var(--lm-brand-primary);
	border-bottom: 1px solid var(--lm-rule-strong);
	padding-bottom: 1px;
	transition: color 140ms ease, border-color 140ms ease;
}
.lm-book-card:hover .lm-book-card__cta, .lm-book-card:focus-within .lm-book-card__cta {
	color: var(--lm-brand-accent);
	border-bottom-color: currentColor;
}

/* ------- Book Groups card grid ------- */

.lm-section--book-groups .lm-section__header { margin-bottom: var(--lm-space-6); }

.lm-book-groups {
	display: grid;
	gap: var(--lm-space-6);
	grid-template-columns: 1fr;
	max-width: 760px;
	margin: 0 auto;
}
@media (min-width: 640px) {
	.lm-book-groups { grid-template-columns: 1fr 1fr; }
}

.lm-book-group-card {
	background: var(--lm-bg-color);
	border-radius: var(--lm-radius);
	overflow: hidden;
	transition: transform 220ms ease, box-shadow 220ms ease;
}
.lm-book-group-card:hover,
.lm-book-group-card:focus-within {
	transform: translateY(-2px);
}
.lm-book-group-card__link {
	display: block;
	text-decoration: none;
	color: var(--lm-text-color);
	text-align: center;
	padding: var(--lm-space-3);
}
.lm-book-group-card__cover {
	margin: 0 auto var(--lm-space-4);
	max-width: 240px;
}
.lm-book-group-card__cover img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--lm-radius);
	box-shadow: var(--lm-shadow);
	transition: box-shadow 220ms ease;
}
.lm-book-group-card:hover .lm-book-group-card__cover img,
.lm-book-group-card:focus-within .lm-book-group-card__cover img {
	box-shadow: 0 8px 24px rgba(19, 24, 42, 0.16);
}
.lm-book-group-card__title {
	font-family: var(--lm-font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--lm-heading-color);
	margin: 0 0 var(--lm-space-2);
	line-height: 1.2;
}
.lm-book-group-card__title em,
.lm-book-group-card__title i { font-style: italic; }
.lm-book-group-card__cta {
	display: inline-block;
	font-family: var(--lm-font-heading);
	font-size: 0.95rem;
	font-style: italic;
	color: var(--lm-brand-primary);
	border-bottom: 1px solid var(--lm-rule-strong);
	padding-bottom: 1px;
	transition: color 140ms ease, border-color 140ms ease;
}
.lm-book-group-card:hover .lm-book-group-card__cta,
.lm-book-group-card:focus-within .lm-book-group-card__cta {
	color: var(--lm-brand-accent);
	border-bottom-color: currentColor;
}

/* ------- Event venue / city / time line ------- */

.lm-list__place {
	display: block;
	margin-top: var(--lm-space-1);
	color: var(--lm-brand-secondary);
	font-family: var(--lm-font-body);
	font-size: 0.875rem;
	font-style: italic;
	line-height: 1.45;
}

/* ------- Back to top floating button ------- */

.lm-back-to-top {
	position: fixed;
	right: var(--lm-space-5);
	bottom: var(--lm-space-5);
	z-index: 50;
	display: inline-flex;
	align-items: center;
	gap: var(--lm-space-2);
	background: var(--lm-header-bg);
	color: var(--lm-header-text);
	border: 1px solid var(--lm-header-bg);
	border-radius: 999px;
	padding: var(--lm-space-3) var(--lm-space-5);
	font-family: var(--lm-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	box-shadow: 0 6px 20px rgba(19, 24, 42, 0.18);
	cursor: pointer;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity 240ms ease, transform 240ms ease, background 160ms ease, color 160ms ease;
}
.lm-back-to-top.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.lm-back-to-top:hover,
.lm-back-to-top:focus-visible {
	background: transparent;
	color: var(--lm-header-bg);
	border-color: var(--lm-header-bg);
	box-shadow: 0 4px 12px rgba(19, 24, 42, 0.12);
}
.lm-back-to-top__icon {
	font-size: 0.9rem;
	font-weight: 700;
}
@media (max-width: 480px) {
	.lm-back-to-top {
		right: var(--lm-space-4);
		bottom: var(--lm-space-4);
		padding: var(--lm-space-3) var(--lm-space-4);
	}
	.lm-back-to-top__label { display: none; }
}

/* ------- Related items list (e.g. reading guides under Book Groups) ------- */

.lm-related {
	max-width: 760px;
	margin: var(--lm-space-7) auto 0;
	padding-top: var(--lm-space-5);
	border-top: 1px solid var(--lm-rule);
	text-align: center;
}
.lm-related__title {
	font-family: var(--lm-font-heading);
	font-size: 1.125rem;
	font-style: italic;
	font-weight: 400;
	color: var(--lm-brand-secondary);
	margin: 0 0 var(--lm-space-3);
	letter-spacing: 0.02em;
}
.lm-related__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--lm-space-2) var(--lm-space-5);
}
.lm-related__link {
	font-family: var(--lm-font-heading);
	font-size: 1.0625rem;
	color: var(--lm-brand-primary);
	text-decoration: none;
	border-bottom: 1px solid var(--lm-rule-strong);
	padding-bottom: 2px;
	transition: color 140ms ease, border-color 140ms ease;
}
.lm-related__link em,
.lm-related__link i { font-style: italic; }
.lm-related__link:hover,
.lm-related__link:focus-visible {
	color: var(--lm-brand-accent);
	border-bottom-color: currentColor;
}
.lm-section__more-link {
	display: inline-flex;
	align-items: center;
	gap: var(--lm-space-2);
	color: var(--lm-brand-primary);
	text-decoration: none;
	font-weight: 700;
	padding: var(--lm-space-2) var(--lm-space-4);
	border: 1px solid var(--lm-brand-primary);
	border-radius: 999px;
	transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.lm-section__more-link:hover,
.lm-section__more-link:focus-visible {
	background: var(--lm-brand-primary);
	color: #ffffff;
	transform: translateY(-1px);
}

/* ------- Year filter ------- */

.lm-years {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--lm-space-2);
	margin-bottom: var(--lm-space-6);
}

.lm-years__btn {
	background: transparent;
	color: var(--lm-brand-secondary);
	border: 1px solid transparent;
	border-radius: 4px;
	padding: var(--lm-space-2) var(--lm-space-3);
	font-family: var(--lm-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	min-height: 32px;
	transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.lm-years__btn.is-active {
	background: var(--lm-brand-secondary);
	color: #fff;
	border-color: var(--lm-brand-secondary);
}
.lm-years__btn:hover:not(.is-active),
.lm-years__btn:focus-visible:not(.is-active) {
	color: var(--lm-brand-primary);
	border-color: var(--lm-rule-strong);
}

/* ------- List sections: section-level chrome ------- */

.lm-section__intro {
	text-align: center;
	font-family: var(--lm-font-heading);
	font-style: italic;
	color: var(--lm-text-color);
	font-size: 1rem;
	margin: 0 0 var(--lm-space-4);
	opacity: 0.78;
}
.lm-section__subheading {
	text-align: center;
	font-family: var(--lm-font-heading);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--lm-brand-primary);
	margin: var(--lm-space-3) 0 var(--lm-space-5);
}

/* Quick-links sub-nav (e.g. "More news In the Midnight Room | More news We
 * Are Called to Rise | Interviews"). Centered, italic, separated by pipes. */
.lm-quick-links {
	text-align: center;
	margin: 0 0 var(--lm-space-5);
	font-family: var(--lm-font-heading);
	font-style: italic;
	font-size: 1.0625rem;
	line-height: 1.6;
}
.lm-quick-links__link {
	color: var(--lm-brand-primary);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 1px;
	transition: color 140ms ease, border-color 140ms ease;
}
.lm-quick-links__link em,
.lm-quick-links__link i { font-style: italic; }
.lm-quick-links__link:hover,
.lm-quick-links__link:focus-visible {
	color: var(--lm-brand-accent);
	border-bottom-color: currentColor;
}
.lm-quick-links__link.is-current {
	color: var(--lm-brand-secondary);
	pointer-events: none;
	border-bottom-color: var(--lm-rule-strong);
}
.lm-quick-links__sep {
	color: var(--lm-brand-secondary);
	margin: 0 var(--lm-space-3);
	opacity: 0.6;
}
@media (max-width: 600px) {
	.lm-quick-links {
		font-size: 0.9375rem;
	}
	.lm-quick-links__sep {
		display: block;
		margin: var(--lm-space-1) 0;
	}
}

/* ------- List items — base ------- */

.lm-list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
}
.lm-list__item {
	display: none;
}
.lm-list__item.is-visible {
	display: block;
}

.lm-list__title {
	margin: 0;
	font-family: var(--lm-font-heading);
	color: var(--lm-brand-primary);
	line-height: 1.25;
}
.lm-list__title em,
.lm-list__title i { font-style: italic; }
.lm-list__title a {
	color: inherit;
	text-decoration: none;
	transition: color 140ms ease;
}
.lm-list__title a:hover,
.lm-list__title a:focus-visible { color: var(--lm-brand-accent); }

.lm-list__meta {
	margin: var(--lm-space-1) 0 var(--lm-space-2);
	font-family: var(--lm-font-body);
	font-size: 0.8125rem;
	font-style: italic;
	color: var(--lm-brand-secondary);
}

.lm-list__excerpt {
	margin: 0;
	font-family: var(--lm-font-body);
	color: var(--lm-text-color);
	opacity: 0.86;
}

/* ------- Compact layout (Events, News) ------- */

.lm-list--compact {
	max-width: 720px;
	text-align: center;
}
.lm-list--compact .lm-list__item.is-visible {
	margin-bottom: var(--lm-space-5);
}
.lm-list--compact .lm-list__title {
	font-size: 1.0625rem;
	font-weight: 700;
}
.lm-list--compact .lm-list__meta {
	font-size: 0.8125rem;
}
.lm-list--compact .lm-list__excerpt {
	font-size: 0.9375rem;
	line-height: 1.55;
	max-width: 600px;
	margin: 0 auto;
}

/* ------- Spacious layout (Blog) ------- */

.lm-list--spacious {
	max-width: 720px;
}
.lm-list--spacious .lm-list__item.is-visible {
	margin-bottom: var(--lm-space-7);
	padding-bottom: var(--lm-space-6);
	border-bottom: 1px solid var(--lm-rule);
}
.lm-list--spacious .lm-list__item.is-visible:last-child {
	border-bottom: none;
}
.lm-list--spacious .lm-list__title {
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--lm-heading-color);
}
.lm-list--spacious .lm-list__title a { color: var(--lm-heading-color); }
.lm-list--spacious .lm-list__title a:hover,
.lm-list--spacious .lm-list__title a:focus-visible { color: var(--lm-brand-primary); }
.lm-list--spacious .lm-list__meta {
	font-size: 0.875rem;
	letter-spacing: 0.02em;
}
.lm-list--spacious .lm-list__excerpt {
	font-size: 1rem;
	line-height: 1.65;
	margin: var(--lm-space-3) 0;
}
.lm-list--spacious .lm-list__more {
	margin: var(--lm-space-2) 0 0;
}
.lm-list--spacious .lm-list__more a {
	font-family: var(--lm-font-heading);
	font-style: italic;
	font-size: 1rem;
	color: var(--lm-brand-primary);
	text-decoration: none;
	border-bottom: 1px solid var(--lm-rule-strong);
	padding-bottom: 1px;
	transition: color 140ms ease, border-color 140ms ease;
}
.lm-list--spacious .lm-list__more a:hover,
.lm-list--spacious .lm-list__more a:focus-visible {
	color: var(--lm-brand-accent);
	border-bottom-color: currentColor;
}

/* ------- Long-form prose ------- */

.lm-prose {
	max-width: var(--lm-measure);
	margin: 0 auto;
	text-align: left;
}
.lm-prose::after { content: ""; display: table; clear: both; } /* clear legacy floats */
.lm-prose > *:first-child { margin-top: 0; }
.lm-prose p,
.lm-prose ul,
.lm-prose ol,
.lm-prose blockquote { margin: 0 0 var(--lm-space-5); }
/* Constrain heading sizes inside prose so legacy <h1> tags in page content
 * (e.g. "We Are Called to Rise" in the Book Groups source page) don't wrap.
 * The site/section/page headers handle the big typography; in-content
 * headings should be smaller and sit comfortably within the prose column. */
.lm-prose h1 { font-size: clamp(1.5rem, 2.6vw, 2.125rem); margin-top: var(--lm-space-6); }
.lm-prose h2 { font-size: clamp(1.25rem, 2.2vw, 1.75rem); margin-top: var(--lm-space-7); }
.lm-prose h3 { font-size: 1.25rem; margin-top: var(--lm-space-6); }

/* Default image handling: centered with breathing room. */
.lm-prose img,
.lm-prose figure {
	margin: var(--lm-space-6) auto;
	border-radius: var(--lm-radius);
	display: block;
	height: auto;
}
.lm-prose figure img { margin: 0; }

/* WP alignment classes — keep, but constrain. */
.lm-prose .alignleft,
.lm-prose img[align="left"] {
	float: left;
	margin: var(--lm-space-2) var(--lm-space-6) var(--lm-space-4) 0;
	max-width: 45%;
}
.lm-prose .alignright,
.lm-prose img[align="right"] {
	float: right;
	margin: var(--lm-space-2) 0 var(--lm-space-4) var(--lm-space-6);
	max-width: 45%;
}
.lm-prose .aligncenter { display: block; margin-left: auto; margin-right: auto; }

/* Legacy <center> tag (HTML4) — render as centered block. */
.lm-prose center {
	display: block;
	text-align: center;
	margin: var(--lm-space-5) 0;
}
.lm-prose center img { margin-left: auto; margin-right: auto; }

/* Don't let legacy inline styles bloat to ridiculous widths. */
.lm-prose [style*="width"] { max-width: 100% !important; }

.lm-prose blockquote {
	border-left: 3px solid var(--lm-brand-secondary);
	padding: var(--lm-space-3) 0 var(--lm-space-3) var(--lm-space-5);
	font-family: var(--lm-font-heading);
	font-style: italic;
	font-size: 1.1875rem;
	color: var(--lm-text-color);
	margin-left: 0;
}
.lm-prose blockquote p { margin: 0 0 var(--lm-space-2); }
.lm-prose blockquote p:last-of-type { margin-bottom: var(--lm-space-2); }
.lm-prose blockquote cite {
	display: block;
	font-family: var(--lm-font-body);
	font-style: normal;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--lm-brand-secondary);
	letter-spacing: 0.04em;
	margin-top: var(--lm-space-2);
}

/* Pullquote variant — used on cleaned For Book Clubs page. */
.lm-prose .lm-pullquote { margin: var(--lm-space-5) 0; }

/* About section "Read more" collapsible. The content can start with hidden
 * marketing-plugin divs (MailMunch injects display:none divs at the top of
 * the_content), so we hide everything by default and reveal specifically:
 *   - the first actual paragraph (the teaser)
 *   - the expand button
 * On expand, all children are revealed. */
.lm-prose--collapsible { position: relative; }
.lm-prose--collapsible > * { display: none; }
.lm-prose--collapsible > p:first-of-type,
.lm-prose--collapsible > .lm-prose__expand {
	display: block;
}
.lm-prose--collapsible.is-expanded > * { display: revert; }
.lm-prose__expand { text-align: center; margin: var(--lm-space-4) 0 0; }
.lm-prose__expand-btn {
	background: transparent;
	border: none;
	font-family: var(--lm-font-heading);
	font-style: italic;
	font-size: 1.0625rem;
	color: var(--lm-brand-primary);
	cursor: pointer;
	border-bottom: 1px solid var(--lm-rule-strong);
	padding: 0 0 2px;
	transition: color 140ms ease, border-color 140ms ease;
}
.lm-prose__expand-btn:hover, .lm-prose__expand-btn:focus-visible {
	color: var(--lm-brand-accent);
	border-bottom-color: currentColor;
}

/* "Highlights" / extra links shortcut below the News quick-links. */
.lm-extra-links {
	text-align: center;
	margin: calc(-1 * var(--lm-space-3)) 0 var(--lm-space-5);
}
.lm-extra-links__link {
	font-family: var(--lm-font-heading);
	font-style: italic;
	font-size: 1.0625rem;
	color: var(--lm-brand-primary);
	text-decoration: none;
	border-bottom: 1px solid var(--lm-rule-strong);
	padding-bottom: 1px;
	transition: color 140ms ease, border-color 140ms ease;
}
.lm-extra-links__link:hover, .lm-extra-links__link:focus-visible {
	color: var(--lm-brand-accent);
	border-bottom-color: currentColor;
}

/* Book single page action links — "Discover more" + "Book Group reading guide"
 * styled as stacked tab cards: 2px navy borders on top, right, bottom (no left),
 * link text aligned left, arrow on the right. Adjacent borders overlap so the
 * two cards share a single 2px line between them. */
.lm-book-actions {
	display: block;
	margin: var(--lm-space-5) 0;
}
/* Two flush horizontal-line rows. Discover More: top border only.
 * Book Group: top + bottom. The shared line between them is the second
 * card's top border. No gap, no rounding. */
.lm-book-actions {
	display: flex !important;
	flex-direction: column;
	gap: 0;
	width: 100%;
	margin: var(--lm-space-5) 0;
}
.lm-bookguidebutton,
.lm-prose #bookbutton {
	display: block;
	text-align: left;
	width: 100%;
	margin: 0;
	padding: 0;
}
.lm-prose .lm-bookguidebutton a,
.lm-prose #bookbutton a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lm-space-4);
	width: 100%;
	box-sizing: border-box;
	padding: var(--lm-space-3) var(--lm-space-3);
	border: none;
	border-top: 2px solid var(--lm-brand-primary);
	border-radius: 0;
	background: transparent;
	color: var(--lm-brand-primary) !important;
	font-family: var(--lm-font-heading);
	font-size: 1rem;
	font-style: italic;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none !important;
	transition: background 160ms ease, padding-left 160ms ease;
}
.lm-prose .lm-bookguidebutton a {
	border-bottom: 2px solid var(--lm-brand-primary);
}
.lm-prose .lm-bookguidebutton a::after,
.lm-prose #bookbutton a::after {
	content: "→";
	font-family: var(--lm-font-body);
	font-size: 1.375rem;
	line-height: 1;
	color: var(--lm-brand-primary);
	flex: 0 0 auto;
	transition: transform 160ms ease;
}
.lm-prose .lm-bookguidebutton a:hover,
.lm-prose .lm-bookguidebutton a:focus-visible,
.lm-prose #bookbutton a:hover,
.lm-prose #bookbutton a:focus-visible {
	background: rgba(26, 44, 74, 0.05);
}
.lm-prose .lm-bookguidebutton a:hover::after,
.lm-prose .lm-bookguidebutton a:focus-visible::after,
.lm-prose #bookbutton a:hover::after,
.lm-prose #bookbutton a:focus-visible::after {
	transform: translateX(4px);
}
.lm-buy-the-book-label {
	display: block;
	text-align: center;
	font-family: var(--lm-font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	font-style: normal;
	color: var(--lm-brand-primary);
	margin: var(--lm-space-6) 0 var(--lm-space-5);
	padding: var(--lm-space-3) 0;
	border-top: 2px solid var(--lm-brand-primary);
	border-bottom: 2px solid var(--lm-brand-primary);
}

/* ---- Book Groups / For Book Clubs page: mobile-only re-layout ---- */
/* The source content is a 2-col table (book covers | description). On phones,
 * stack vertically: book covers side-by-side at top, content paragraph below.
 * Applies to both the homepage section and the standalone page. */
@media (max-width: 700px) {
	[data-section="book-clubs"] table,
	body.page-id-11 .lm-prose table {
		display: block;
		width: 100%;
		border-collapse: collapse;
	}
	[data-section="book-clubs"] table tbody,
	[data-section="book-clubs"] table tr,
	body.page-id-11 .lm-prose table tbody,
	body.page-id-11 .lm-prose table tr { display: block; }
	[data-section="book-clubs"] table td,
	body.page-id-11 .lm-prose table td {
		display: block;
		width: 100% !important;
		padding: 0 !important;
		margin-bottom: var(--lm-space-5);
	}
	/* First cell of each row (holds the book covers) → side-by-side grid. */
	[data-section="book-clubs"] table tr td:first-child,
	body.page-id-11 .lm-prose table tr td:first-child {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--lm-space-3);
		justify-items: center;
		align-items: start;
	}
	/* wpautop inserts <br> between the two <a><img> tags. In a grid,
	 * those <br>s become grid items and break the 2-column layout —
	 * suppress them so only the anchors are laid out. */
	[data-section="book-clubs"] table tr td:first-child br,
	body.page-id-11 .lm-prose table tr td:first-child br {
		display: none;
	}
	[data-section="book-clubs"] table tr td:first-child > a,
	body.page-id-11 .lm-prose table tr td:first-child > a {
		display: block;
		width: 100%;
	}
	[data-section="book-clubs"] table tr td:first-child img,
	body.page-id-11 .lm-prose table tr td:first-child img {
		width: 100% !important;
		height: auto !important;
		max-width: 100%;
	}
}

/* Book-club action links list. */
.lm-prose .lm-bookclub-links {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--lm-space-5);
}
.lm-prose .lm-bookclub-links li {
	padding: var(--lm-space-2) 0;
	border-bottom: 1px solid var(--lm-rule);
}
.lm-prose .lm-bookclub-links li:last-child { border-bottom: none; }
.lm-prose a {
	text-decoration: underline;
	text-decoration-color: var(--lm-rule-strong);
	text-underline-offset: 4px;
}
.lm-prose a:hover,
.lm-prose a:focus-visible {
	text-decoration-color: currentColor;
}

/* ---- "News about ..." pages (round-midnight, we-are-called-to-rise, author news)
 * use a 2-col table: image cell on left, content cell on right. The default
 * .lm-prose alignleft max-width:45% rule shrinks images inside the auto-sized
 * left cell. Override for these three page IDs. */
body.page-id-881 .lm-prose,
body.page-id-882 .lm-prose,
body.page-id-872 .lm-prose {
	max-width: 1000px;
}
body.page-id-881 .lm-prose > table,
body.page-id-882 .lm-prose > table,
body.page-id-872 .lm-prose > table,
body.page-id-881 .lm-prose > p > table,
body.page-id-882 .lm-prose > p > table,
body.page-id-872 .lm-prose > p > table {
	width: 100%;
	table-layout: fixed;
}
body.page-id-881 .lm-prose table > tbody > tr > td:first-child,
body.page-id-882 .lm-prose table > tbody > tr > td:first-child,
body.page-id-872 .lm-prose table > tbody > tr > td:first-child {
	width: 32%;
	padding-right: var(--lm-space-5);
	vertical-align: top;
}
body.page-id-881 .lm-prose table img,
body.page-id-882 .lm-prose table img,
body.page-id-872 .lm-prose table img {
	float: none !important;
	max-width: 100% !important;
	width: 100% !important;
	height: auto !important;
	margin: 0 0 var(--lm-space-4) !important;
	display: block;
}
@media (max-width: 700px) {
	body.page-id-881 .lm-prose table,
	body.page-id-882 .lm-prose table,
	body.page-id-872 .lm-prose table,
	body.page-id-881 .lm-prose table tbody,
	body.page-id-882 .lm-prose table tbody,
	body.page-id-872 .lm-prose table tbody,
	body.page-id-881 .lm-prose table tr,
	body.page-id-882 .lm-prose table tr,
	body.page-id-872 .lm-prose table tr { display: block; }
	body.page-id-881 .lm-prose table td,
	body.page-id-882 .lm-prose table td,
	body.page-id-872 .lm-prose table td {
		display: block;
		width: 100% !important;
		padding: 0 !important;
		margin-bottom: var(--lm-space-5);
	}
}

/* ---- Single CPT pages with rich legacy layouts (books, book-group) ---- */
/* Laura's book detail pages use a 2-column table (#bookcontent) with text and a
 * YouTube iframe. The default .lm-prose measure (68ch) is too narrow for that
 * layout, so widen the prose on those single templates. */
body.single-books .lm-prose,
body.single-book-group .lm-prose {
	max-width: 1000px;
}

/* Book-detail body: legacy #bookcontent table has been transformed by
 * lm_book_content_float_layout() into .lm-bookbody with the video floated
 * right so paragraphs wrap around it (Classic Editor "align right" effect). */
.lm-prose .lm-bookbody {
	margin: var(--lm-space-6) 0;
}
.lm-prose .lm-bookbody::after {
	content: "";
	display: table;
	clear: both;
}
.lm-prose .lm-bookbody > p:first-child,
.lm-prose .lm-bookbody > p:first-of-type { margin-top: 0; }

.lm-prose .lm-bookbody__video {
	float: right;
	width: 50%;
	max-width: 480px;
	margin: 0 0 var(--lm-space-4) var(--lm-space-5);
}
.lm-prose .lm-bookbody__video iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: var(--lm-radius);
	box-shadow: var(--lm-shadow);
}
@media (max-width: 700px) {
	.lm-prose .lm-bookbody__video {
		float: none;
		width: 100%;
		max-width: 100%;
		margin: 0 0 var(--lm-space-5);
	}
}

/* Decorative header strip used at the top of book pages. (#bookbutton is now
 * a text link styled via .lm-book-actions — its legacy margin rule has been
 * removed so it sits flush against .lm-bookguidebutton.) */
.lm-prose #bookheader { text-align: center; margin: var(--lm-space-5) 0; }
.lm-prose #bookheader img { display: inline-block; max-width: 100%; height: auto; margin: 0 auto; }

/* Retailer buy-links row. */
.lm-prose #buylinks {
	text-align: center;
	margin: var(--lm-space-6) 0;
}
.lm-prose #buylinks img {
	display: inline-block;
	vertical-align: middle;
	margin: var(--lm-space-3);
	max-height: 64px;
	width: auto;
	transition: transform 160ms ease, opacity 160ms ease;
}
.lm-prose #buylinks a:hover img,
.lm-prose #buylinks a:focus-visible img {
	transform: translateY(-1px);
	opacity: 0.85;
}

/* On phones, stack the 2-column table. */
@media (max-width: 768px) {
	.lm-prose #bookcontent { border-spacing: 0; }
	.lm-prose #bookcontent,
	.lm-prose #bookcontent tbody,
	.lm-prose #bookcontent tr { display: block; }
	.lm-prose #booktext,
	.lm-prose #bookvideo {
		display: block;
		width: 100%;
		margin-bottom: var(--lm-space-5);
	}
}

/* ------- Single post with optional sidebar ------- */

.lm-container--with-sidebar { max-width: 1140px; }
.lm-container--with-sidebar .lm-prose { max-width: none; }
.lm-single-grid {
	display: block;
}
@media (min-width: 900px) {
	.lm-container--with-sidebar .lm-single-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 280px;
		gap: var(--lm-space-7);
		align-items: start;
	}
	/* Sidebar follows the user down the page within the article's bounds.
	 * `align-self: start` is required for position:sticky inside CSS Grid —
	 * default stretch would prevent the sticky behavior from kicking in.
	 * Top offset clears the viewport edge with a small breathing margin. */
	.lm-container--with-sidebar .lm-sidebar {
		position: sticky;
		top: var(--lm-space-5);
		align-self: start;
		max-height: calc(100vh - var(--lm-space-6));
		overflow-y: auto;
		scrollbar-width: thin;
	}
	/* Hide the sidebar scrollbar unless it's actively being used. */
	.lm-container--with-sidebar .lm-sidebar::-webkit-scrollbar { width: 6px; }
	.lm-container--with-sidebar .lm-sidebar::-webkit-scrollbar-thumb {
		background: var(--lm-rule-strong);
		border-radius: 3px;
	}
}

.lm-sidebar {
	font-family: var(--lm-font-body);
	font-size: 0.9375rem;
}
.lm-sidebar .lm-widget {
	margin-bottom: var(--lm-space-6);
	padding-bottom: var(--lm-space-5);
	border-bottom: 1px solid var(--lm-rule);
}
.lm-sidebar .lm-widget:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}
.lm-widget__title {
	font-family: var(--lm-font-heading);
	font-size: 1rem;
	font-style: italic;
	font-weight: 400;
	color: var(--lm-brand-secondary);
	letter-spacing: 0.04em;
	margin: 0 0 var(--lm-space-3);
	text-transform: uppercase;
}
.lm-widget ul { list-style: none; padding: 0; margin: 0; }
.lm-widget li { margin: 0 0 var(--lm-space-2); }
.lm-widget a { text-decoration: none; }
.lm-widget a:hover, .lm-widget a:focus-visible { color: var(--lm-brand-accent); }
.lm-widget img { max-width: 100%; height: auto; border-radius: var(--lm-radius); }

/* Recent posts / news list inside a widget. */
.lm-recent {
	list-style: none;
	padding: 0;
	margin: 0;
}
.lm-recent__item {
	margin: 0;
	border-bottom: 1px solid var(--lm-rule);
}
.lm-recent__item:last-child { border-bottom: none; }
.lm-recent__link {
	display: block;
	padding: var(--lm-space-3) 0;
	color: var(--lm-text-color);
	transition: color 140ms ease;
}
.lm-recent__link:hover,
.lm-recent__link:focus-visible { color: var(--lm-brand-primary); }
.lm-recent__title {
	display: block;
	font-family: var(--lm-font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--lm-heading-color);
}
.lm-recent__title em, .lm-recent__title i { font-style: italic; font-weight: inherit; }
.lm-recent__date {
	display: block;
	margin-top: 2px;
	color: var(--lm-brand-secondary);
	font-family: var(--lm-font-body);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* CTA widget — emphasized card with a navy button. */
.lm-cta {
	background: var(--lm-bg-color);
	border: 1px solid var(--lm-header-bg);
	border-radius: var(--lm-radius);
	padding: var(--lm-space-5);
	text-align: center;
}
.lm-cta .lm-widget__title {
	font-family: var(--lm-font-heading);
	font-size: 1.25rem;
	font-style: normal;
	font-weight: 700;
	color: var(--lm-heading-color);
	text-transform: none;
	letter-spacing: 0;
	margin: 0 0 var(--lm-space-3);
}
.lm-cta__text {
	font-family: var(--lm-font-body);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--lm-text-color);
	margin: 0 0 var(--lm-space-4);
}
.lm-cta__action { margin: 0; }
.lm-cta__btn {
	display: inline-block;
	background: var(--lm-header-bg);
	color: var(--lm-header-text);
	border: 1px solid var(--lm-header-bg);
	border-radius: var(--lm-radius);
	padding: var(--lm-space-3) var(--lm-space-5);
	font-family: var(--lm-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 140ms ease, color 140ms ease;
}
.lm-cta__btn:hover,
.lm-cta__btn:focus-visible {
	background: transparent;
	color: var(--lm-header-bg);
}

/* ------- Single post ------- */

.lm-page-header {
	margin-bottom: var(--lm-space-6);
	text-align: center;
}
.lm-page-title { margin: 0; }
.lm-single__meta {
	font-family: var(--lm-font-heading);
	font-style: italic;
	color: var(--lm-brand-secondary);
	font-size: 1rem;
	margin: var(--lm-space-3) 0 0;
}
.lm-single__thumb { margin: var(--lm-space-6) auto; max-width: var(--lm-measure); }
.lm-single__thumb img { border-radius: var(--lm-radius); box-shadow: var(--lm-shadow); }
.lm-single__footer {
	max-width: var(--lm-measure);
	margin: var(--lm-space-8) auto 0;
	padding-top: var(--lm-space-5);
	border-top: 1px solid var(--lm-rule);
	text-align: center;
}
.lm-back-link {
	font-family: var(--lm-font-heading);
	font-style: italic;
	color: var(--lm-brand-primary);
	text-decoration: none;
}
.lm-back-link:hover,
.lm-back-link:focus-visible { color: var(--lm-brand-accent); }

/* ------- Comments ------- */

.lm-comments { margin-top: var(--lm-space-8); }
.lm-comments__title { font-size: 1.5rem; text-align: center; }
.lm-comments__list { list-style: none; padding: 0; margin: 0 0 var(--lm-space-6); }

/* ------- Search form ------- */

.lm-search { display: flex; gap: var(--lm-space-2); align-items: center; margin: var(--lm-space-5) 0; max-width: 500px; }
.lm-search__label { position: absolute; left: -9999px; }
.lm-search__input {
	flex: 1 1 auto;
	font: inherit;
	padding: var(--lm-space-2) var(--lm-space-3);
	border: 1px solid var(--lm-rule-strong);
	border-radius: var(--lm-radius);
	background: #fff;
}
.lm-search__input:focus { outline-offset: 0; border-color: var(--lm-brand-primary); }
.lm-search__submit {
	background: var(--lm-brand-primary);
	color: #fff;
	border: none;
	border-radius: var(--lm-radius);
	padding: var(--lm-space-2) var(--lm-space-4);
	font-weight: 600;
	letter-spacing: 0.04em;
}
.lm-search__submit:hover,
.lm-search__submit:focus-visible { background: var(--lm-brand-accent); }

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

.lm-site-footer {
	background: var(--lm-header-bg);
	color: var(--lm-header-text);
	padding: var(--lm-space-7) var(--lm-space-4) var(--lm-space-5);
	margin-top: 0; /* let the last section's bg reach the footer */
	text-align: center;
}
.lm-site-footer__inner {
	max-width: 720px;
	margin: 0 auto;
}
.lm-site-footer__credit {
	color: var(--lm-header-text);
	opacity: 0.6;
	font-size: 0.8125rem;
	font-style: italic;
	margin: var(--lm-space-6) 0 0;
	letter-spacing: 0.04em;
}

/* Footer widget area (when populated). */
.lm-footer-widgets { margin-bottom: var(--lm-space-5); }
.lm-footer-widgets .lm-widget { margin-bottom: var(--lm-space-5); }
.lm-footer-widgets .lm-widget__title {
	color: var(--lm-header-text);
	opacity: 0.85;
}

/* Default newsletter form (when no widget is set). */
.lm-newsletter { margin: 0; }
.lm-newsletter__intro {
	font-family: var(--lm-font-heading);
	font-size: 1.375rem;
	font-weight: 400;
	margin: 0 0 var(--lm-space-2);
	color: var(--lm-header-text);
	letter-spacing: 0.02em;
}
.lm-newsletter__hint {
	font-family: var(--lm-font-body);
	font-size: 0.9375rem;
	color: var(--lm-header-text);
	opacity: 0.78;
	font-style: italic;
	margin: 0 0 var(--lm-space-5);
}
.lm-newsletter__label {
	position: absolute;
	left: -9999px;
}
.lm-newsletter__field {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lm-space-2);
	max-width: 460px;
	margin: 0 auto;
}
.lm-newsletter__input {
	flex: 1 1 220px;
	font: inherit;
	font-size: 0.9375rem;
	padding: var(--lm-space-3) var(--lm-space-4);
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.06);
	color: var(--lm-header-text);
	border-radius: var(--lm-radius);
	min-width: 0;
}
.lm-newsletter__input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}
.lm-newsletter__input:focus {
	outline: 2px solid var(--lm-header-text);
	outline-offset: 1px;
	background: rgba(255, 255, 255, 0.1);
}
.lm-newsletter__submit {
	flex: 0 0 auto;
	background: var(--lm-header-text);
	color: var(--lm-header-bg);
	border: 1px solid var(--lm-header-text);
	border-radius: var(--lm-radius);
	padding: var(--lm-space-3) var(--lm-space-5);
	font-family: var(--lm-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 140ms ease, color 140ms ease;
}
.lm-newsletter__submit:hover,
.lm-newsletter__submit:focus-visible {
	background: transparent;
	color: var(--lm-header-text);
}

/* On narrow screens where input + button can't fit inline, stack both
 * full-width — much cleaner than the button hanging on its own row at
 * its natural width. */
@media (max-width: 540px) {
	.lm-newsletter__input,
	.lm-newsletter__submit {
		flex: 1 0 100%;
		width: 100%;
	}
}

/* ------- Tablet ------- */

@media (min-width: 768px) {
	.lm-section { padding: var(--lm-space-7) 0; }
	.lm-toggles__btn { font-size: 0.9375rem; }
}

/* ------- Desktop ------- */

@media (min-width: 1100px) {
	.lm-container, .lm-home-shell, .lm-site-header__inner { max-width: 1040px; }
}

/* ------- Pagination (archive pages) ------- */
/* WP core's the_posts_pagination() and paginate_links() emit a flat row of
 * .page-numbers anchors + a current span. We center the row beneath the
 * listing and place it above the "Back to home" link. */

.navigation.pagination {
	margin: var(--lm-space-7) 0 var(--lm-space-5);
	text-align: center;
}
.navigation.pagination .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.navigation.pagination .nav-links {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--lm-space-2);
}
.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	min-height: 36px;
	padding: 0 var(--lm-space-3);
	font-family: var(--lm-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--lm-brand-primary);
	background: transparent;
	border: 1px solid var(--lm-rule-strong);
	border-radius: var(--lm-radius);
	text-decoration: none;
	transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.navigation.pagination a.page-numbers:hover,
.navigation.pagination a.page-numbers:focus-visible {
	background: var(--lm-brand-primary);
	color: #fff;
	border-color: var(--lm-brand-primary);
}
.navigation.pagination .page-numbers.current {
	background: var(--lm-brand-primary);
	color: #fff;
	border-color: var(--lm-brand-primary);
}
.navigation.pagination .page-numbers.dots {
	border-color: transparent;
	color: var(--lm-brand-secondary);
}

/* ------- Reduced motion ------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; }
}

/* ------- Print ------- */

@media print {
	.lm-toggles, .lm-years, .lm-section__more, .lm-site-footer { display: none; }
}
