/*
 * Mneme child theme — hand-authored overrides that go beyond theme.json.
 * Source of truth for tokens is theme.json (WP emits --wp--preset--color--*
 * variables). This file mirrors the Vue SPA at app/src/styles/global.scss
 * + LandingHeader.vue + FooterSection.vue + StaticPageLayout.vue so that
 * mneme.tools and blog.mneme.tools render identically.
 *
 * Why so many !important rules? TT5 (parent theme) emits scoped rules for
 * .wp-block-group / body that win specificity duels against bare classes.
 * We need to win those duels deterministically — design tokens here MUST
 * be the final word for the brand surface.
 */

:root {
	--mneme-navy: #1c2a3a;
	--mneme-gold: #b8955a;
	--mneme-gold-muted: #9a7c47;
	--mneme-rose: #d4a5a5;
	--mneme-ivory: #f4efe6;
	--mneme-night: #0f1823;
	--mneme-laurel: #6b8e7f;
	--mneme-parchment: #e8dfd0;
	--mneme-header-bg: rgba(18, 22, 30, 0.72);
	--mneme-border-gold: rgba(184, 149, 90, 0.25);
	--mneme-border-gold-medium: rgba(184, 149, 90, 0.2);
	--mneme-border-gold-soft: rgba(184, 149, 90, 0.15);
	--mneme-border-gold-faint: rgba(184, 149, 90, 0.14);
	/*
	 * 868px = Vue's <v-container max-width: 900px> minus 16px inner
	 * padding on each side. Every WP element that should align with
	 * the SPA's content rectangle (panel surface, h1, eyebrow) reads
	 * this token — single source of truth for the column width.
	 */
	--mneme-content-max: 868px;
	/*
	 * Panel surface color. Must be FULLY opaque — the body gradient
	 * already sits at #1C2A3A (navy) at the bottom, and a translucent
	 * navy panel on top would render with zero contrast there. Opaque
	 * navy + the gold hairline border is what makes the card readable
	 * the way StaticPageLayout.vue's v-card does.
	 */
	--mneme-panel-bg: #1c2a3a;
	--mneme-panel-bg-hover: #243547;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 64px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/*
 * Mneme gradient — ported from app/src/styles/global.scss :: .mneme-gradient-bg.
 * Applied to BOTH html and body so:
 *   - tall pages with empty body bg still show the gradient (html layer)
 *   - TT5's emitted `body { background: var(--wp--preset--color--background) }`
 *     can never blank the gradient (body layer with !important wins).
 * Radial highlights bumped slightly (.12 -> .18 gold, .08 -> .14 rose) so
 * they read at WP's full-page scale the same way the Vue v-main version does.
 */
html {
	background:
		radial-gradient(ellipse at top left, rgba(184, 149, 90, 0.18) 0%, transparent 50%),
		radial-gradient(ellipse at bottom right, rgba(212, 165, 165, 0.14) 0%, transparent 50%),
		linear-gradient(180deg, #0f1823 0%, #1c2a3a 100%) !important;
	min-height: 100vh;
}

body {
	background:
		radial-gradient(ellipse at top left, rgba(184, 149, 90, 0.18) 0%, transparent 50%),
		radial-gradient(ellipse at bottom right, rgba(212, 165, 165, 0.14) 0%, transparent 50%),
		linear-gradient(180deg, #0f1823 0%, #1c2a3a 100%) !important;
	color: var(--mneme-parchment);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	min-height: 100vh;
}

::selection {
	background: rgba(184, 149, 90, 0.35);
	color: var(--mneme-parchment);
}

/* ── Scrollbar (WebKit / Blink only — graceful no-op elsewhere) ────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--mneme-night); }
::-webkit-scrollbar-thumb {
	background: rgba(184, 149, 90, 0.3);
	border-radius: 8px;
	border: 2px solid var(--mneme-night);
}
::-webkit-scrollbar-thumb:hover { background: rgba(184, 149, 90, 0.55); }

/* ── Focus rings (a11y) ─────────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--mneme-gold);
	outline-offset: 2px;
	border-radius: 6px;
}

/* ── Brand mark (shared by header + footer) ────────────────────────────── */
.mneme-brand {
	display: inline-flex !important;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none !important;
	color: inherit;
	line-height: 1;
}

.mneme-brand:hover,
.mneme-brand:focus-visible {
	text-decoration: none !important;
}

.mneme-brand svg {
	display: block;
	flex: 0 0 auto;
}

.mneme-wordmark {
	font-family: "Cormorant Garamond", "Times New Roman", serif;
	font-weight: 600;
	font-size: 1.125rem;
	letter-spacing: 0.18em;
	color: var(--mneme-gold);
	text-transform: uppercase;
	white-space: nowrap;
}

/* ── Header template part ──────────────────────────────────────────────── */
.mneme-header {
	position: sticky;
	top: 0;
	z-index: 100;
	width: 100%;
	margin-top: 0 !important;
	padding-block: 0 !important;
	background: var(--mneme-header-bg);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	backdrop-filter: saturate(140%) blur(14px);
	border-bottom: 1px solid var(--mneme-border-gold-faint);
}

/*
 * Force the inner flex row to span the full viewport width before the
 * 1200px cap so [brand] sits flush left and [nav + cta] flush right.
 * TT5's "constrained" parent layout would otherwise narrow this to
 * theme.json contentSize (720px), bunching everything center.
 */
.mneme-header-inner,
.mneme-header-inner.alignfull,
.mneme-header .mneme-header-inner {
	max-width: 1200px !important;
	margin-inline: auto !important;
	width: 100% !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	justify-content: space-between !important;
	align-items: center !important;
	gap: 1rem;
	min-height: 64px;
	/*
	 * Match Vuetify v-container's default 16px inner padding so the brand
	 * mark and the nav row sit at the same x-coords as the SPA header.
	 * TT5 / theme.json otherwise injects spacing|30 (~10.72px) here.
	 */
	padding-inline: 16px !important;
}

/* Prevent the site-root padding from squishing the header content. */
.mneme-header-inner > * {
	margin-block: 0 !important;
}

/*
 * Nav row mirrors LandingHeader.vue:
 *   <v-btn variant="text" color="primary">Why Mneme</v-btn>
 *   <v-btn variant="text" color="primary" class="me-6">How it works</v-btn>
 *   <v-btn variant="flat" color="primary">Sign in</v-btn>
 *
 * Vuetify v-btn defaults applied via app/src/plugins/vuetify.ts:
 *   rounded: "lg"  → border-radius: 8px
 *   text-transform: none; letter-spacing: 0.02em
 * Plus framework defaults: height 36px, font-size 0.875rem, padding 0 16px,
 * font-weight 500. We replicate those exactly here so the WP header is
 * pixel-identical to the Vue header.
 */
.mneme-nav,
.mneme-header .mneme-nav {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 0 !important;
}

.mneme-nav-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 0 16px;
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 500;
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--mneme-gold);
	text-decoration: none;
	background-color: transparent;
	border-radius: 8px;
	transition: background-color 0.15s ease;
	white-space: nowrap;
}

/*
 * Match Vuetify's hover overlay on v-btn variant="text": the .v-btn__overlay
 * element gets opacity 0.04 with the button's color (primary = gold). The text
 * color does NOT change — only a faint gold tint appears behind it.
 */
.mneme-nav-link:hover,
.mneme-nav-link:focus-visible {
	color: var(--mneme-gold);
	background-color: rgba(184, 149, 90, 0.08);
	text-decoration: none;
}

/*
 * me-6 spacing on "How it works" → 24px before the Sign-in CTA.
 * !important is needed because WP core's `wp-block-buttons-is-layout-flex`
 * resets margins and otherwise wins specificity.
 */
.mneme-nav .mneme-nav-cta,
.mneme-nav-cta.wp-block-buttons {
	margin-left: 1.5rem !important;
}

/*
 * Sign in CTA mirrors v-btn variant="flat" color="primary":
 * gold bg, navy text, 36px tall, 14px font, 8px radius, 0 16px padding.
 */
.mneme-nav-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	background: var(--mneme-gold) !important;
	color: var(--mneme-navy) !important;
	font-weight: 500 !important;
	font-size: 0.875rem !important;
	letter-spacing: 0.02em !important;
	text-transform: none !important;
	padding: 0 1rem !important;
	border-radius: 8px !important;
	line-height: normal !important;
	transition: background 0.15s ease;
}

.mneme-nav-cta .wp-block-button__link:hover {
	background: var(--mneme-gold-muted) !important;
}

/* Collapse text links on very narrow screens; keep the CTA visible. */
@media (max-width: 600px) {
	.mneme-nav-link--desktop {
		display: none;
	}
	.mneme-wordmark {
		font-size: 1rem;
	}
}

/*
 * Admin-bar compensation. WordPress injects `html { margin-top: 32px }`
 * when a logged-in user is viewing the site, which would hide the sticky
 * header behind the admin bar. Push it down to clear.
 */
body.admin-bar .mneme-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .mneme-header {
		top: 46px;
	}
}

/* ── Footer template part ──────────────────────────────────────────────── */
/*
 * Mirrors app/src/components/landing/FooterSection.vue:
 *   <footer class="py-10" border-top: 1px solid rgba(184,149,90,0.15)>
 *     <v-container>          ← 1200px max, 16px inner padding
 *       <v-row align="center">
 *         <v-col md=4>logo + .text-caption.text-medium-emphasis tagline</v-col>
 *         <v-col md=4 text-md-center>.text-caption.text-medium-emphasis copy</v-col>
 *         <v-col md=4 text-md-right>.d-flex.ga-4 of router-links</v-col>
 *
 * Vuetify rendering we replicate:
 *   text-caption           → 0.75rem / 1.667 line-height / 0.0333em letter-spacing
 *   text-medium-emphasis   → opacity 0.82 (--v-medium-emphasis-opacity)
 *   ga-4                   → 16px gap between flex children
 *   v-row + v-col default  → 16px font on regular elements (links inherit body 1rem)
 *   text-decoration-none   → no underline; no hover color change
 */
.mneme-footer {
	border-top: 1px solid var(--mneme-border-gold-soft);
	padding-block: 2.5rem;
	margin-top: var(--wp--preset--spacing--60, 4rem);
}

.mneme-footer .wp-block-columns {
	margin-block: 0 !important;
	align-items: center;
	/*
	 * Match Vuetify v-container's 16px inner padding so the brand and
	 * footer-nav land at the SPA's x-coords (left=316, right=1484)
	 * AND the footer reaches Vue's overall 224px height (= 40+1+16+111+16+40).
	 *
	 * NOTE: keep block and inline as separate properties — using the
	 * `padding` shorthand reflows the constrained-layout container 5px
	 * to the left because WP's block-layout CSS resolves padding-inline
	 * vs the shorthand differently against the inline `padding-left`/
	 * `padding-right` style attribute on this element.
	 */
	padding-inline: 16px !important;
	padding-block: 16px !important;
}

.mneme-footer .mneme-brand--footer .mneme-wordmark {
	font-size: 1.05rem;
}

.mneme-footer-tagline {
	margin: 0.75rem 0 0 !important;
	max-width: 320px;
	font-size: 0.75rem;
	line-height: 1.667;
	letter-spacing: 0.0333em;
	color: rgba(232, 223, 208, 0.82);
}

.mneme-footer-home {
	margin: 0.5rem 0 0 !important;
	font-size: 0.75rem;
	line-height: 1.667;
	letter-spacing: 0.0333em;
}

.mneme-footer-home > a {
	color: var(--mneme-gold);
	text-decoration: none;
}

.mneme-footer-home > a:hover,
.mneme-footer-home > a:focus-visible {
	text-decoration: underline;
}

.mneme-footer-copy {
	margin: 0 !important;
	font-size: 0.75rem;
	line-height: 1.667;
	letter-spacing: 0.0333em;
	color: rgba(232, 223, 208, 0.82);
}

footer.mneme-footer .mneme-footer-nav {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 1rem !important; /* ga-4 → 16px */
	justify-content: flex-end;
	align-items: center;
	font-size: 1rem;
	line-height: 1.5;
}

footer.mneme-footer .mneme-footer-nav > a {
	color: rgba(232, 223, 208, 0.82) !important;
	text-decoration: none !important;
	white-space: nowrap;
}

@media (max-width: 781px) {
	.mneme-footer .wp-block-columns {
		flex-wrap: wrap !important;
		gap: 1.5rem;
	}
	.mneme-footer .wp-block-column {
		flex-basis: 100% !important;
	}
	.mneme-footer-copy {
		text-align: left !important;
	}
	footer.mneme-footer .mneme-footer-nav {
		justify-content: flex-start;
	}
}

/* ── Reusable content panel ────────────────────────────────────────────── */
/*
 * The "sheet on a desk" framing used across the Mneme site.
 * Mirrors the Vue v-card from app/src/components/landing/StaticPageLayout.vue:
 *   <v-card class="pa-8 pa-md-10 static-page-body" elevation="0" border>
 *
 * Translation table for the WP child theme:
 *   v-card surface bg (theme #1C2A3A)        → var(--mneme-panel-bg)
 *   v-card border prop (1px gold @ 0.2)       → 1px solid rgba(184,149,90,0.2)
 *   rounded-lg (default v-card)               → 8px radius
 *   pa-md-10                                  → 40px padding on md+ (32px below)
 *   container max-width: 900px                → 900px outer, 868px content
 *
 * Applied via the explicit `.mneme-content-panel` class AND auto-applied
 * to the post body wrappers WordPress renders for posts and pages, so
 * blog.mneme.tools matches mneme.tools without editing every template.
 */
/*
 * Panel target = the OUTER `.mneme-post-content` template wrapper. This is
 * a deliberate change from an earlier version that paneled the inner
 * `.entry-content.wp-block-post-content` only — that left post-navigation,
 * post-tags, and the comments form OUTSIDE the panel at full viewport
 * width, which doesn't match StaticPageLayout.vue (everything related to
 * the post body sits inside the v-card frame).
 *
 * Explicit `.mneme-content-panel` class is kept for any hand-authored block
 * group that wants the framing without going through the post wrapper.
 */
/*
 * Vue's <v-container max-width: 900px> + 16px inner padding produces
 * an 868px content rectangle that the v-card and h1 both occupy. WP
 * needs to land on that same 868px so the H1 and panel left/right
 * corners line up exactly.
 */
.mneme-content-panel,
main .wp-block-group.mneme-content-panel,
.wp-block-group.mneme-content-panel,
main .wp-block-group.mneme-post-content {
	background: var(--mneme-panel-bg) !important;
	border: 1px solid var(--mneme-border-gold-medium) !important;
	border-radius: 8px !important;
	padding: 2rem !important;
	margin: 1.5rem auto 3rem !important;
	max-width: var(--mneme-content-max) !important;
	box-sizing: border-box !important;
	font-size: 1rem !important;
	line-height: 1.5 !important;
}

@media (min-width: 960px) {
	.mneme-content-panel,
	main .wp-block-group.mneme-content-panel,
	.wp-block-group.mneme-content-panel,
	main .wp-block-group.mneme-post-content {
		padding: 2.5rem !important; /* pa-md-10 → 40px */
	}
}

/* H1 page title (post-title or page-title) — match Vue StaticPageLayout. */
main h1.wp-block-post-title,
main h1.wp-block-heading,
main .mneme-single-hero h1 {
	max-width: var(--mneme-content-max) !important;
	margin-inline: auto !important;
	font-family: "Cormorant Garamond", "Times New Roman", Georgia, serif !important;
	font-size: clamp(2rem, 4vw, 2.8rem) !important;
	line-height: 1.1 !important;
	letter-spacing: -0.02em !important;
	color: var(--mneme-parchment) !important;
}

/*
 * Headings inside the body panel — mirror StaticPageLayout.vue
 * static-page-body styles: Inter, 600 weight, smaller sizes, gold
 * hairline border under h2.
 */
main .entry-content.wp-block-post-content h2 {
	font-family: var(--wp--preset--font-family--inter, Inter, -apple-system, system-ui, sans-serif) !important;
	font-size: 1.6rem !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	margin-top: 2.75rem !important;
	margin-bottom: 1rem !important;
	padding-bottom: 0.5rem !important;
	border-bottom: 1px solid rgba(184, 149, 90, 0.18) !important;
	color: var(--mneme-parchment) !important;
}

main .entry-content.wp-block-post-content h3 {
	font-family: var(--wp--preset--font-family--inter, Inter, -apple-system, system-ui, sans-serif) !important;
	font-size: 1.2rem !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	margin-top: 2rem !important;
	margin-bottom: 0.75rem !important;
	color: var(--mneme-parchment) !important;
}

main .entry-content.wp-block-post-content h4 {
	font-family: var(--wp--preset--font-family--inter, Inter, -apple-system, system-ui, sans-serif) !important;
	font-size: 1.02rem !important;
	font-weight: 600 !important;
	margin-top: 1.5rem !important;
	margin-bottom: 0.5rem !important;
}

main .entry-content.wp-block-post-content h2:first-child,
main .entry-content.wp-block-post-content h3:first-child {
	margin-top: 0 !important;
}

/*
 * Inner .entry-content.wp-block-post-content is now a transparent layout
 * region — the panel framing lives one level up on .mneme-post-content
 * so that post-navigation, tags, and the comments form share the panel
 * with the post body (matches StaticPageLayout.vue's v-card scope).
 */
main .entry-content.wp-block-post-content {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	max-width: none !important;
	margin: 0 !important;
}

/* ── Post card block style (`is-style-mneme-card`) ─────────────────────── */
.is-style-mneme-card,
main .wp-block-group.is-style-mneme-card,
article.wp-block-group.is-style-mneme-card,
.wp-block-group.is-style-mneme-card,
.wp-block-columns.is-style-mneme-card {
	background: var(--mneme-panel-bg) !important;
	border: 1px solid var(--mneme-border-gold) !important;
	border-radius: 14px !important;
	padding: 1.75rem !important;
	transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

/*
 * Equal-height cards inside a post-template grid (archive, search, related).
 * `core/post-template` grid wraps each post in <li> grid items; force them
 * to stretch and flow as columns so the <article> child can fill the cell.
 * Scoped to the grid layout so single-column lists or non-query uses of the
 * card style are unaffected.
 */
.wp-block-post-template.is-layout-grid {
	align-items: stretch;
}

.wp-block-post-template.is-layout-grid > li {
	display: flex;
	flex-direction: column;
}

.wp-block-post-template.is-layout-grid > li > .is-style-mneme-card,
.wp-block-post-template.is-layout-grid > li article.is-style-mneme-card {
	flex: 1 1 auto;
	height: 100%;
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	text-align: left !important;
}

/*
 * Override WP's `is-layout-constrained` rule that injects `margin-left: auto;
 * margin-right: auto` on every direct child of a constrained group. In a flex
 * column those auto margins absorb leftover cross-axis space and shrink each
 * flex item to its content width — which is what was centering the eyebrow
 * + title visually while the long excerpt stayed flush left. Force every
 * direct child (terms, title, excerpt, footer) to span the card edge-to-edge
 * so type/content all share the same left baseline.
 */
.wp-block-post-template.is-layout-grid > li article.is-style-mneme-card > *,
.wp-block-post-template.is-layout-grid > li > .is-style-mneme-card > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none !important;
	align-self: stretch !important;
	text-align: left !important;
	width: 100%;
}

/*
 * Excerpt is its own flex column inside the card so the "Read →" link can be
 * pinned to the bottom-right at a consistent height across every card in the
 * row regardless of how long the body text is.
 */
.wp-block-post-template.is-layout-grid .is-style-mneme-card .wp-block-post-excerpt {
	flex: 1 1 auto;
	display: flex !important;
	flex-direction: column !important;
	min-height: 0;
}

/*
 * Truncate excerpt copy to a fixed line count so cards in the same row read
 * as the same height even when one post's excerpt is much longer than its
 * neighbour's. 4 lines @ 1.6 line-height ≈ 6.4em.
 */
.wp-block-post-template.is-layout-grid .is-style-mneme-card .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 0.75rem;
	flex: 0 0 auto;
}

/*
 * Pin "Read →" to the bottom-right corner of the card at the same vertical
 * position across every card in the row. `margin-top: auto` consumes the
 * remaining vertical space so it always sits flush with the card's bottom
 * padding; `align-self: flex-end` + `text-align: right` puts it at the
 * trailing edge regardless of the link's intrinsic width.
 */
.wp-block-post-template.is-layout-grid .is-style-mneme-card .wp-block-post-excerpt__more-link {
	margin-top: auto !important;
	align-self: flex-end !important;
	text-align: right !important;
	width: auto !important;
}

/* Title clamps to two lines so a long headline can't push other cards taller. */
.wp-block-post-template.is-layout-grid .is-style-mneme-card .wp-block-post-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Eyebrow (post-terms) explicitly left-aligned. */
.wp-block-post-template.is-layout-grid .is-style-mneme-card .wp-block-post-terms {
	text-align: left !important;
}

.is-style-mneme-card:hover {
	border-color: rgba(184, 149, 90, 0.5) !important;
	background: var(--mneme-panel-bg-hover) !important;
	transform: translateY(-2px);
}

.is-style-mneme-card .wp-block-post-featured-image {
	margin-bottom: 1rem;
	overflow: hidden;
	border-radius: 12px;
}

.is-style-mneme-card .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

.is-style-mneme-card .wp-block-post-title {
	margin-block: 0 0.5rem;
	font-size: clamp(1.3rem, 2vw + 0.5rem, 1.75rem) !important;
}

.is-style-mneme-card .wp-block-post-title a {
	color: var(--mneme-parchment);
	text-decoration: none;
}

.is-style-mneme-card .wp-block-post-title a:hover {
	color: var(--mneme-gold);
}

.is-style-mneme-card .wp-block-post-date,
.is-style-mneme-card .wp-block-post-terms {
	color: var(--mneme-gold);
	font-size: 0.8rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.is-style-mneme-card .wp-block-post-excerpt__excerpt {
	color: rgba(232, 223, 208, 0.78);
	line-height: 1.6;
}

.is-style-mneme-card .wp-block-post-excerpt__more-link {
	color: var(--mneme-gold);
	font-weight: 500;
}

/* ── Blog index list panel ─────────────────────────────────────────────── */
/*
 * Single outlined navy panel that frames the entire post list on the blog
 * home (templates/home.html, templates/index.html). Mirrors `.mneme-content-panel`
 * so the blog index, single-post body, and static pages all read as the same
 * "sheet on a desk" surface. Posts are rendered as flat rows inside this panel
 * with thin gold dividers between them — see `.is-style-mneme-list-card` below.
 */
.mneme-list-panel,
main .wp-block-group.mneme-list-panel {
	background: var(--mneme-panel-bg) !important;
	border: 1px solid var(--mneme-border-gold-medium) !important;
	border-radius: 8px !important;
	padding: 2rem !important;
	max-width: var(--mneme-content-max) !important;
	margin: 0 auto !important;
	box-sizing: border-box !important;
}

@media (min-width: 960px) {
	.mneme-list-panel,
	main .wp-block-group.mneme-list-panel {
		padding: 2.5rem !important;
	}
}

/* ── Blog intro header (`.mneme-blog-intro`) ───────────────────────────── */
/*
 * The eyebrow / H1 / lede above `.mneme-list-panel` on the blog index. Lives
 * in `parts/blog-intro.html` (admin-editable via the Site Editor).
 *
 * Sits OUTSIDE the panel as a hero header. Outer dimensions mirror
 * `.mneme-list-panel` (max-width 868px, centered) and there is NO inline
 * padding — the eyebrow / H1 / lede sit flush against the panel's outer
 * left edge, not indented to match the panel's inner content. (The post
 * titles stay 2.5rem inside the panel border via the panel's own padding.)
 *
 * Targets the `<div class="wp-block-template-part mneme-blog-intro">`
 * wrapper that WP emits around the part — `<main>`'s constrained-layout
 * default contentSize (720px from theme.json) would otherwise force this
 * group narrower than the panel.
 *
 * `main .wp-block-template-part.mneme-blog-intro` (specificity 0,2,1) beats
 * WP's `.is-layout-constrained > *` rule (0,1,0) and any per-block layout CSS.
 */
.mneme-blog-intro,
main .wp-block-template-part.mneme-blog-intro {
	max-width: var(--mneme-content-max) !important;
	margin: 0 auto var(--wp--preset--spacing--50) !important;
	/* 8px = `.mneme-list-panel`'s border-radius, so the header text starts
	   right where the panel's rounded corner straightens out. */
	padding-left: 8px !important;
	padding-right: 8px !important;
	box-sizing: border-box !important;
}

/*
 * The H1 inside the intro normally inherits a forced `max-width: 868px;
 * margin-inline: auto !important` from the global "page H1" rule below
 * (see `main h1.wp-block-heading`). That's intended for single-post and
 * static-page hero headings whose parent is the full-width body. Inside
 * the .mneme-blog-intro wrapper the parent is already 788px (868px - 5rem
 * padding), so we override the inherited rule to let the H1 fill the
 * wrapper's content box — eyebrow / H1 / lede then share the same left edge.
 */
.mneme-blog-intro h1.wp-block-heading,
main .mneme-blog-intro h1.wp-block-heading {
	max-width: none !important;
	margin-inline: 0 !important;
}

/* ── Archive intro header (`.mneme-archive-intro`) ──────────────────────── */
/*
 * The eyebrow + title + term-description that sits ABOVE `.mneme-list-panel`
 * on category / tag / date archives. Mirrors `.mneme-blog-intro` so the
 * archive page has the same hero rhythm as the blog home: outer dimensions
 * match the panel (max-width 868px, centered) and the text is pulled in 8px
 * from the panel's outer edge so the eyebrow / H1 / description start exactly
 * where the panel's 8px rounded corner straightens out below.
 */
.mneme-archive-intro,
main .wp-block-group.mneme-archive-intro {
	max-width: var(--mneme-content-max) !important;
	margin: 0 auto var(--wp--preset--spacing--50) !important;
	padding-left: 8px !important;
	padding-right: 8px !important;
	box-sizing: border-box !important;
}

/*
 * Override the global `main h1.wp-block-heading` rule that forces the H1 to
 * 868px max-width with auto-centered margins. Inside the intro wrapper the
 * parent is already 852px (868px − 16px h-padding), so we let the H1 fill
 * the parent so it shares its left edge with the eyebrow + description.
 */
.mneme-archive-intro h1.wp-block-query-title,
.mneme-archive-intro .wp-block-query-title,
main .mneme-archive-intro .wp-block-query-title {
	max-width: none !important;
	margin: 0.25rem 0 0.75rem !important;
	font-family: "Cormorant Garamond", "Times New Roman", Georgia, serif !important;
	font-size: clamp(2rem, 4vw, 2.8rem) !important;
	line-height: 1.1 !important;
	letter-spacing: -0.02em !important;
	color: var(--mneme-parchment) !important;
}

.mneme-archive-intro .mneme-archive-eyebrow {
	margin: 0 !important;
}

.mneme-archive-intro .mneme-archive-description,
.mneme-archive-intro .wp-block-term-description {
	margin: 0 !important;
	color: rgba(232, 223, 208, 0.82);
}

.mneme-archive-intro .wp-block-term-description p {
	margin: 0;
}

/* ── Archive grid layout adjustments ───────────────────────────────────── */
/*
 * The archive page renders cards on the bare gradient background — NO outer
 * navy panel — so the 2-up grid sits directly inside the constrained 868px
 * query container, the same width the archive intro and pagination use.
 *
 * Stack the grid into one column on narrow viewports. WP's grid layout uses
 * `auto-fill` with `minmax(...)` only when `minimumColumnWidth` is set; with
 * `columnCount: 2` it stays 2-up at every width, so we force 1-up on phones.
 */
@media (max-width: 600px) {
	main .wp-block-post-template.is-layout-grid.mneme-archive-grid,
	main .wp-block-post-template.mneme-archive-grid {
		grid-template-columns: 1fr !important;
	}
}

/* ── Archive pagination (`.mneme-archive-pagination`) ───────────────────── */
/*
 * Pagination sits OUTSIDE the panel — sibling of `.mneme-list-panel` inside
 * the wp:query container, so prev/next still resolve their query context.
 * Match the panel's outer 868px width and pull the row in 8px on each side
 * to align with the panel's 8px rounded corner above (same trick as
 * `.mneme-archive-intro`).
 */
.mneme-archive-pagination,
main .wp-block-query-pagination.mneme-archive-pagination {
	max-width: var(--mneme-content-max) !important;
	margin-inline: auto !important;
	padding-left: 8px !important;
	padding-right: 8px !important;
	box-sizing: border-box !important;
}

/*
 * Pagination items — gold links, no underline, comfortable hit area. WP renders
 * pagination-previous / -next as <a> elements with `paginationArrow="arrow"`
 * adding the chevron itself, so labels stay text-only ("Older" / "Newer") to
 * avoid the doubled-arrow rendering we had before.
 */
.mneme-archive-pagination .wp-block-query-pagination-previous,
.mneme-archive-pagination .wp-block-query-pagination-next,
.mneme-archive-pagination .wp-block-query-pagination-numbers {
	color: var(--mneme-gold);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-decoration: none;
}

.mneme-archive-pagination .wp-block-query-pagination-numbers .page-numbers {
	display: inline-block;
	min-width: 1.75rem;
	padding: 0.25rem 0.5rem;
	margin-inline: 0.1rem;
	text-align: center;
	color: rgba(232, 223, 208, 0.78);
	text-decoration: none;
	border-radius: 6px;
}

.mneme-archive-pagination .wp-block-query-pagination-numbers .page-numbers.current {
	color: var(--mneme-night);
	background: var(--mneme-gold);
	font-weight: 600;
}

.mneme-archive-pagination .wp-block-query-pagination-numbers a.page-numbers:hover {
	color: var(--mneme-parchment);
	background: rgba(184, 149, 90, 0.12);
}

.mneme-archive-pagination .wp-block-query-pagination-previous:hover,
.mneme-archive-pagination .wp-block-query-pagination-next:hover {
	color: var(--mneme-parchment);
	text-decoration: none;
}

/* ── Post list row style (`is-style-mneme-list-card`) ──────────────────── */
/*
 * Each post inside `.mneme-list-panel`. No per-card surface — these are flat
 * rows separated by a thin gold divider. The class name is kept (rather than
 * renamed to "list-row") so the existing `register_block_style()` registration
 * in functions.php still resolves and editors can pick it from the block
 * styles dropdown.
 */
.is-style-mneme-list-card,
main .wp-block-group.is-style-mneme-list-card,
article.wp-block-group.is-style-mneme-list-card {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 1.5rem 0 !important;
	margin: 0 !important;
	max-width: none !important;
	box-sizing: border-box !important;
	transition: none;
}

/*
 * Top divider between rows. The post-template wraps each <article> in either
 * <ul><li>…</li></ul> (default) or renders bare articles depending on theme
 * support, so we cover both. Skip the divider on the first row.
 */
.is-style-mneme-list-card + .is-style-mneme-list-card,
.wp-block-post-template > li + li > .is-style-mneme-list-card,
.wp-block-post-template > li + li article.is-style-mneme-list-card {
	border-top: 1px solid var(--mneme-border-gold-soft) !important;
}

/* Last row collapses its bottom padding so pagination sits closer. */
.wp-block-post-template > li:last-child .is-style-mneme-list-card,
.wp-block-post-template > .is-style-mneme-list-card:last-child,
main .wp-block-post-template > li:last-child article.is-style-mneme-list-card {
	padding-bottom: 0 !important;
}

.is-style-mneme-list-card .wp-block-post-terms {
	color: var(--mneme-gold);
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}

.is-style-mneme-list-card .wp-block-post-title {
	margin-block: 0 0.75rem;
	font-family: "Cormorant Garamond", "Times New Roman", Georgia, serif;
	font-size: clamp(1.4rem, 2vw + 0.5rem, 1.75rem) !important;
	line-height: 1.25 !important;
}

.is-style-mneme-list-card .wp-block-post-title a {
	color: var(--mneme-parchment);
	text-decoration: none;
}

.is-style-mneme-list-card .wp-block-post-title a:hover {
	color: var(--mneme-gold);
}

.is-style-mneme-list-card .wp-block-post-excerpt__excerpt {
	color: rgba(232, 223, 208, 0.82);
	line-height: 1.6;
	margin-block: 0.5rem 0.75rem;
}

/*
 * Footer row: date on the left, "Read more →" on the right.
 * No internal divider — the row-level border-top between list-cards already
 * separates posts visually, so an extra border above the footer reads as
 * stripey clutter.
 */
.is-style-mneme-list-card .mneme-list-card-footer {
	margin-top: 0.75rem;
	gap: 0.75rem 1.25rem;
}

.is-style-mneme-list-card .mneme-list-card-footer .wp-block-post-date {
	color: var(--mneme-gold);
	font-size: 0.8rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	opacity: 0.85;
	margin: 0;
}

.is-style-mneme-list-card .mneme-list-card-footer .wp-block-read-more {
	color: var(--mneme-gold);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-decoration: none;
	margin: 0;
}

.is-style-mneme-list-card .mneme-list-card-footer .wp-block-read-more:hover {
	text-decoration: underline;
}

/* ── Archive list card: small thumb left + excerpt right ──────────────── */
.is-style-mneme-list-card .mneme-list-card-row {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start;
	gap: 1.25rem;
	margin-block: 0.5rem 0.75rem;
}

.is-style-mneme-list-card .mneme-list-card-row .mneme-list-card-thumb {
	flex: 0 0 160px;
	margin: 0;
	overflow: hidden;
	border-radius: 6px;
	border: 1px solid var(--mneme-border-gold-soft);
}

.is-style-mneme-list-card .mneme-list-card-row .mneme-list-card-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 3 / 2;
}

.is-style-mneme-list-card .mneme-list-card-row .wp-block-post-excerpt {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

/* No-thumb fallback: collapse the empty image wrapper so excerpt fills the row. */
.is-style-mneme-list-card .mneme-list-card-row .mneme-list-card-thumb:not(:has(img)) {
	display: none;
}

@media (max-width: 640px) {
	.is-style-mneme-list-card .mneme-list-card-row {
		flex-direction: column !important;
		gap: 0.75rem;
	}
	.is-style-mneme-list-card .mneme-list-card-row .mneme-list-card-thumb {
		flex-basis: auto;
		width: 100%;
	}
}

/* ── Home page: blog-intro hero — centered ────────────────────────────── */
.mneme-blog-intro {
	text-align: center;
}
.mneme-blog-intro > p,
.mneme-blog-intro > h1,
.mneme-blog-intro > h2 {
	text-align: center !important;
	margin-inline: auto;
}

/* ── Home page: category sections ─────────────────────────────────────── */
.mneme-category-section,
main .wp-block-group.mneme-category-section {
	margin-block: 2.5rem 3rem;
	/* Generous side padding so the H2 + carousel don't hug the screen edge.
	   2rem ≈ aligns visually with the hero text rhythm at typical viewports. */
	padding-inline: 2rem !important;
	max-width: 1120px !important;
	margin-inline: auto !important;
}

/* Override WP's is-layout-constrained that would re-constrain the children
   to a smaller contentSize. We want section-header AND carousel to both
   span the full inner width of the section so they share a left edge. */
.mneme-category-section > * {
	max-width: none !important;
	margin-inline: 0 !important;
}

.mneme-category-section-header,
main .wp-block-group.mneme-category-section-header {
	border-bottom: 1px solid var(--mneme-border-gold-soft);
	padding-bottom: 0.5rem !important;
	padding-inline: 0 !important;
	margin: 0 0 1.5rem 0 !important;
	max-width: none !important;
	width: 100% !important;
	text-align: left;
}

.mneme-category-section-title,
main h2.mneme-category-section-title {
	font-family: "Cormorant Garamond", "Times New Roman", Georgia, serif;
	font-size: 1.5rem !important;
	color: var(--mneme-parchment);
	margin: 0 !important;
	padding: 0 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: left !important;
	align-self: center;
}

.mneme-category-section-link { margin: 0 !important; }
.mneme-category-section-link a {
	color: var(--mneme-gold);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-decoration: none;
}
.mneme-category-section-link a:hover { text-decoration: underline; }

/* ── Carousel: horizontal-scroll post-template ───────────────────────── */
.mneme-carousel-wrapper {
	position: relative;
}

/* Carousel — defeat WP's is-layout-flow / wp-block-post-template-is-layout-flow
   which would otherwise emit `display: block` and break our flex row. */
.mneme-category-carousel,
ul.mneme-category-carousel,
.mneme-category-carousel.is-layout-flow,
.mneme-category-carousel.wp-block-post-template-is-layout-flow {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	gap: 1rem;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 1rem;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding-block: 0.5rem 1rem;
	margin: 0 !important;
	max-width: none !important;
	list-style: none;
	padding-inline-start: 0;
	scrollbar-width: thin;
	scrollbar-color: rgba(184, 149, 90, 0.3) transparent;
}

/* The query block wraps the ul; force it to span full section width so the
   carousel ul's first child (Card 1) starts at the same x as the H2. */
.mneme-category-section .wp-block-query {
	max-width: none !important;
	margin-inline: 0 !important;
	width: 100% !important;
}

/* Each post-template child (li) becomes a flex column so the inner article's
   `height: 100%` fills the row's stretched height — gives uniform card heights
   regardless of title line count. */
.mneme-category-carousel > li,
.mneme-category-carousel > * {
	flex: 0 0 280px;
	scroll-snap-align: start;
	list-style: none;
	display: flex;
	flex-direction: column;
	/* Kill WordPress's `is-layout-flow > * + * { margin-block-start: 1rem }`
	   which adds 16px top margin to all siblings except the first — that margin
	   gets subtracted from the flex-stretched height, leaving cards 2..N
	   visibly 16px shorter than card 1. */
	margin: 0 !important;
}

/* ── Gentle nav arrows ───────────────────────────────────────────────── */
.mneme-carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(15, 24, 35, 0.65);
	border: 1px solid var(--mneme-border-gold-soft);
	color: var(--mneme-gold);
	font-family: var(--wp--preset--font-family--inter), "Inter", system-ui, sans-serif;
	font-size: 1.05rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0.45;
	transition: opacity 0.15s ease, border-color 0.15s ease, background 0.15s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.mneme-carousel-arrow:hover,
.mneme-carousel-arrow:focus-visible {
	opacity: 0.9;
	border-color: var(--mneme-border-gold);
	background: rgba(15, 24, 35, 0.85);
}

.mneme-carousel-arrow.prev { left: 0; }
.mneme-carousel-arrow.next { right: 0; }

/* When at scroll start/end, JS toggles aria-hidden + visibility:hidden */
.mneme-carousel-arrow[aria-hidden="true"] {
	visibility: hidden;
	pointer-events: none;
}

@media (max-width: 640px) {
	/* On phones the carousel handles touch scroll natively; arrows just clutter. */
	.mneme-carousel-arrow { display: none; }
}

/* ── Carousel card: image top + title only ───────────────────────────── */
/* High specificity to defeat WP's .has-global-padding (theme.json root padding)
   and .is-layout-constrained (theme.json contentSize) emissions. */
.is-style-mneme-carousel-card,
.is-style-mneme-carousel-card.has-global-padding,
.is-style-mneme-carousel-card.is-layout-constrained,
.is-style-mneme-carousel-card.wp-block-group-is-layout-constrained,
article.is-style-mneme-carousel-card {
	background: var(--mneme-panel-bg);
	border: 1px solid var(--mneme-border-gold-soft);
	border-radius: 8px;
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	overflow: hidden;
	transition: border-color 0.15s ease, transform 0.15s ease;
	/* Fill the flex-column li so all cards in a row are equal height. */
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

/* Image sits at the top; title region grows to fill the rest. */
.is-style-mneme-carousel-card > .mneme-carousel-card-thumb {
	flex: 0 0 auto;
}

.is-style-mneme-carousel-card:hover {
	border-color: var(--mneme-border-gold);
	transform: translateY(-2px);
}

.is-style-mneme-carousel-card .mneme-carousel-card-thumb {
	margin: 0;
	overflow: hidden;
	border-radius: 0;
	border: 0;
}

.is-style-mneme-carousel-card .mneme-carousel-card-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 3 / 2;
}

.is-style-mneme-carousel-card .wp-block-post-terms {
	display: block;
	color: var(--mneme-gold);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	/* `!important` defeats WP's `.is-layout-constrained > * { margin-left: auto
	   !important; margin-right: auto !important; max-width: <content-size> }`
	   which would otherwise auto-center this short block inside the card. */
	margin: 1rem 1rem 0.4rem !important;
	max-width: none !important;
	text-align: left !important;
}

.is-style-mneme-carousel-card .wp-block-post-title {
	margin: 0 1rem 1.25rem !important;
	font-family: "Cormorant Garamond", "Times New Roman", Georgia, serif;
	font-size: 1.1rem !important;
	line-height: 1.3 !important;
	/* FIXED 2-line height: long titles get truncated; short titles still
	   reserve the full 2-line space so all carousel cards are equal height.
	   2.86rem = 1.1rem * 1.3 line-height * 2 lines. */
	height: 2.86rem;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.is-style-mneme-carousel-card .wp-block-post-title a {
	color: var(--mneme-parchment);
	text-decoration: none;
	/* Belt+suspenders: clamp the inner link too (some browsers respect it
	   here when the heading's display:-webkit-box is overridden). */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.is-style-mneme-carousel-card .wp-block-post-title a:hover { color: var(--mneme-gold); }

.is-style-mneme-carousel-card .mneme-carousel-card-thumb:not(:has(img)) { display: none; }

/* ── Single post styling ───────────────────────────────────────────────── */
.mneme-single-hero {
	padding-block: 3rem 0;
	margin-bottom: 0;
}

/*
 * Category eyebrow — constrain to the same 868px column the H1 occupies
 * so the label's left edge lines up with the title's left edge instead of
 * drifting 16px outside it (TT5's default uses the 900px contentSize).
 *
 * 8px inline padding mirrors `.mneme-blog-intro` and `.mneme-archive-intro`:
 * the eyebrow text is pulled in 8px from the 868px wrapper so it starts
 * exactly where the panel's 8px rounded corner straightens out below.
 */
.mneme-single-hero .wp-block-post-terms {
	max-width: var(--mneme-content-max) !important;
	margin-inline: auto !important;
	margin-bottom: 0.25rem !important;
	padding-left: 8px !important;
	padding-right: 8px !important;
	box-sizing: border-box !important;
	color: var(--mneme-gold) !important;
}

/*
 * Post title — share the eyebrow's 8px inline padding so the H1's left
 * edge lines up with the eyebrow above and matches the home / archive
 * header rhythm (mneme-blog-intro / mneme-archive-intro).
 */
.mneme-single-hero .wp-block-post-title,
main .mneme-single-hero h1.wp-block-post-title {
	/* Type/size already set via the global h1.wp-block-post-title rule above; only the hero-specific margin overrides here. */
	margin-block: 0.25rem 0 !important;
	padding-left: 8px !important;
	padding-right: 8px !important;
	box-sizing: border-box !important;
}

.mneme-single-hero .wp-block-post-date {
	color: var(--mneme-gold);
	font-size: 0.85rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/*
 * Single-post body: same panel treatment as static pages so the title sits
 * above the frame and body copy sits inside it. Matches StaticPageLayout.vue
 * v-card border / pa-8 pa-md-10 / max-width 900px container.
 */
/*
 * NO panel styling here — the panel lives on the inner
 * `.entry-content.wp-block-post-content`. `.mneme-post-content` is
 * a transparent layout wrapper holding the post body + post-nav +
 * comments below it, mirroring StaticPageLayout.vue's structure
 * (h1 + v-card + footer-region siblings inside the v-container).
 */

.mneme-post-content > *:first-child {
	margin-top: 0;
}

.mneme-post-content > *:last-child {
	margin-bottom: 0;
}

/*
 * Post navigation: Previous / Next on the same row, opposite sides.
 * `space-between` handles the two-link case; the `:only-child` rule keeps
 * a lone "Next →" pinned right when there is no previous post.
 */
.mneme-post-nav {
	width: 100%;
	gap: 1rem;
	flex-wrap: wrap;
}

.mneme-post-nav .wp-block-post-navigation-link:only-child {
	margin-left: auto;
}

.mneme-post-nav .wp-block-post-navigation-link.post-navigation-link-previous:only-child {
	margin-left: 0;
	margin-right: auto;
}

.mneme-post-content p {
	margin-block: 1rem;
}

.mneme-post-content img {
	border-radius: 12px;
	max-width: 100%;
	height: auto;
}

.mneme-post-content blockquote {
	margin-inline: 0;
	border-left: 3px solid var(--mneme-gold);
	padding: 0.25rem 1.25rem;
	font-family: "Cormorant Garamond", serif;
	font-style: italic;
	font-size: 1.2rem;
	color: var(--mneme-parchment);
}

.mneme-post-content code {
	background: var(--mneme-navy);
	padding: 0.1em 0.4em;
	border-radius: 4px;
	font-size: 0.9em;
}

.mneme-post-content pre {
	background: var(--mneme-navy);
	border-radius: 8px;
	padding: 1rem;
	overflow-x: auto;
	border: 1px solid var(--mneme-border-gold-soft);
}

.mneme-post-content pre code {
	background: transparent;
	padding: 0;
	border-radius: 0;
}

.mneme-post-content h2,
.mneme-post-content h3,
.mneme-post-content h4 {
	margin-top: 2rem;
	margin-bottom: 0.75rem;
}

/* ── Static page (page.html) heading: match Vue StaticPageLayout.vue ───── */
/*
 * Vue's StaticPageLayout uses `clamp(2rem, 4vw, 2.8rem)` for the page title.
 * theme.json globally emits `clamp(2.4rem, 4vw + 1rem, 3.75rem)` for h1,
 * which is the right size for blog hero pages but too big for legal /
 * marketing pages. Scope the override to body.page so blog index / archive
 * keep their bigger title.
 */
body.page main h1.wp-block-post-title,
body.page main .wp-block-post-title,
body.page main > .wp-block-group > h1,
body.page-template-default main h1.wp-block-post-title {
	font-size: clamp(2rem, 4vw, 2.8rem) !important;
	max-width: 900px;
	margin-inline: auto !important;
}

/* ── Buttons — match Vuetify rounded="lg" flat primary ─────────────────── */
.wp-block-button__link {
	font-family: var(--wp--preset--font-family--inter) !important;
	font-weight: 500 !important;
	letter-spacing: 0.02em !important;
	text-transform: none !important;
	border-radius: 12px !important;
	padding: 0.7rem 1.5rem !important;
	transition: background-color 0.15s ease, transform 0.1s ease !important;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	border: 1px solid var(--mneme-gold) !important;
	color: var(--mneme-gold) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: rgba(184, 149, 90, 0.12) !important;
	color: var(--mneme-parchment) !important;
}

/* ── Gradient hero backdrop (optional group block style) ───────────────── */
.is-style-mneme-gradient-bg {
	background:
		radial-gradient(ellipse at top left, rgba(184, 149, 90, 0.18) 0%, transparent 50%),
		radial-gradient(ellipse at bottom right, rgba(212, 165, 165, 0.14) 0%, transparent 50%),
		linear-gradient(180deg, #0f1823 0%, #1c2a3a 100%);
}

/* ── Skip-to-content a11y helper ───────────────────────────────────────── */
.skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	background: var(--mneme-gold);
	color: var(--mneme-night);
	padding: 0.75rem 1rem;
	border-radius: 8px;
	font-weight: 500;
	z-index: 1000;
	transition: top 0.2s ease;
}

.skip-link:focus {
	top: 1rem;
}

/* ── Single-post pager (two-card row at bottom of single.html) ─────────── */
.mneme-post-pager {
	margin-top: var(--wp--preset--spacing--60, 3rem);
	gap: var(--wp--preset--spacing--40, 1.5rem);
}

.mneme-post-pager .mneme-card-overline {
	display: block;
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mneme-mist, #6b7280);
	margin-bottom: 0.5rem;
	font-weight: 500;
}

/* Tighten the list-card for the narrower 2-column context */
.mneme-post-pager .is-style-mneme-list-card {
	padding: 0;
	border: none;
	background: transparent;
}

.mneme-post-pager .is-style-mneme-list-card .wp-block-post-title {
	font-size: 1.25rem;
	line-height: 1.3;
	margin: 0.5rem 0 0.5rem;
}

.mneme-post-pager .is-style-mneme-list-card .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.mneme-post-pager .is-style-mneme-list-card .wp-block-post-title a:hover {
	text-decoration: underline;
}

.mneme-post-pager .mneme-list-card-thumb {
	display: block;
	width: 100%;
	margin-bottom: 0.75rem;
	border-radius: 8px;
	overflow: hidden;
	aspect-ratio: 3 / 2;
}

.mneme-post-pager .mneme-list-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mneme-post-pager .wp-block-post-terms {
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 0;
}

.mneme-post-pager .wp-block-post-excerpt p {
	font-size: 0.95rem;
	line-height: 1.5;
	margin: 0.25rem 0 0.75rem;
}

.mneme-post-pager .mneme-list-card-footer {
	justify-content: flex-start;
}

.mneme-post-pager .wp-block-read-more {
	font-size: 0.9rem;
	text-decoration: none;
}

.mneme-post-pager .wp-block-read-more:hover {
	text-decoration: underline;
}

@media (max-width: 600px) {
	.mneme-post-pager {
		gap: var(--wp--preset--spacing--50, 2rem);
	}
}