/* ==========================================================================
   Room Almanac — main stylesheet
   Publication-style design system: white canvas, ink text, one restrained
   clay brand accent. Warm cream exists only as a secondary, clearly
   bounded surface for specific components (Get the Look, Tip, Key
   Points) — never the main page background. No persistent sage UI —
   sage only ever appears inside actual editorial photography/content.
   Mobile-first, no framework.
   ========================================================================== */

/* -- Tokens --------------------------------------------------------------- */
:root {
	--ra-bg: #FFFFFF;
	--ra-bg-alt: #F2EAE0;
	--ra-surface: #FFFFFF;
	--ra-ink: #211D1A;
	--ra-ink-muted: #6B6259;
	--ra-border: #E4DACD;
	--ra-border-soft: rgba(33, 29, 26, 0.08);
	--ra-primary: #B4552F;
	--ra-primary-dark: #8F3F20;

	--ra-font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
	--ra-font-sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--ra-container: 1280px;
	--ra-container-narrow: 760px;
	--ra-gutter: 1.25rem;
	--ra-radius: 3px;

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

	--ra-text-xs: 0.8125rem;
	--ra-text-sm: 0.9375rem;
	--ra-text-base: 1.0625rem;
	--ra-text-lg: 1.25rem;
	--ra-text-xl: 1.5rem;
	--ra-text-2xl: 1.875rem;
	--ra-text-3xl: 2.375rem;
	--ra-text-4xl: 3rem;

	--ra-shadow-sm: 0 1px 2px rgba(33, 29, 26, 0.06);
}

@media (prefers-color-scheme: dark) {
	:root { color-scheme: light; }
}

/* -- Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--ra-bg);
	color: var(--ra-ink);
	font-family: var(--ra-font-sans);
	font-size: var(--ra-text-base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea { font: inherit; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5 { font-family: var(--ra-font-serif); font-weight: 600; line-height: 1.15; margin: 0 0 0.5em; }
p { margin: 0 0 1em; }
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
	position: static; width: auto; height: auto; margin: 0; padding: var(--ra-space-2) var(--ra-space-4);
	background: var(--ra-ink); color: #fff; z-index: 10000;
}

/* -- Layout ------------------------------------------------------------------ */
.ra-container {
	max-width: var(--ra-container);
	margin-inline: auto;
	padding-inline: var(--ra-gutter);
}
.ra-container--narrow { max-width: var(--ra-container-narrow); }
.ra-section { padding-block: var(--ra-space-7); }
.ra-section--alt { background: var(--ra-bg-alt); }
.ra-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ra-space-4);
	margin-bottom: var(--ra-space-5);
	border-bottom: 1px solid var(--ra-border);
	padding-bottom: var(--ra-space-3);
}
.ra-section-head__title { font-size: var(--ra-text-2xl); margin: 0; }
.ra-section-head__link {
	font-family: var(--ra-font-sans);
	font-size: var(--ra-text-sm);
	font-weight: 600;
	color: var(--ra-primary);
	white-space: nowrap;
}
.ra-section-head__link:hover { color: var(--ra-primary-dark); text-decoration: underline; }
.ra-kicker {
	display: inline-block;
	font-family: var(--ra-font-sans);
	font-size: var(--ra-text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ra-primary);
}
.ra-kicker:hover { text-decoration: underline; }

.ra-breadcrumbs {
	font-size: var(--ra-text-xs);
	color: var(--ra-ink-muted);
	margin-bottom: var(--ra-space-3);
}
.ra-breadcrumbs a:hover { color: var(--ra-primary); }

/* -- Grid utilities ----------------------------------------------------------- */
/* Both grids stay 2-up even on the smallest phones — a single-column
   grid reads as a sequential full-width feed, which these sections
   are deliberately not. */
.ra-grid { display: grid; gap: var(--ra-space-5); }
.ra-grid--4 { grid-template-columns: repeat(2, 1fr); }
.ra-grid--3 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) {
	.ra-grid--4 { grid-template-columns: repeat(4, 1fr); }
	.ra-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Header / Navigation
   ========================================================================== */
.ra-skip-link {
	position: absolute; top: -50px; left: var(--ra-space-2);
	background: var(--ra-ink); color: #fff; padding: var(--ra-space-2) var(--ra-space-4);
	z-index: 10001; transition: top 0.15s ease;
}
.ra-skip-link:focus { top: var(--ra-space-2); }

.ra-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: var(--ra-bg);
	border-bottom: 1px solid var(--ra-border);
}
.ra-header__bar {
	display: flex;
	align-items: center;
	gap: var(--ra-space-5);
	padding-block: var(--ra-space-5);
}
.ra-logo {
	font-family: var(--ra-font-serif);
	font-size: var(--ra-text-2xl);
	font-weight: 600;
	letter-spacing: -0.01em;
	margin-right: auto;
}
.ra-logo img { max-height: 40px; width: auto; }
.ra-logo--custom { display: inline-flex; align-items: center; }
.ra-logo span.ra-logo__almanac { color: var(--ra-primary); font-style: italic; }

.ra-nav { display: none; }
@media (min-width: 1000px) {
	.ra-nav { display: block; margin-right: auto; margin-left: var(--ra-space-6); }
	.ra-header__bar { flex-wrap: nowrap; }
	.ra-logo { margin-right: 0; }
}
/* Tightened from --ra-space-5 now that every one of the 7 top-level
   items can carry a submenu — keeps "Small Spaces" from crowding its
   neighbors at 1000–1200px. */
.ra-nav__list { display: flex; align-items: center; gap: var(--ra-space-4); }
.ra-nav__item { position: relative; }
.ra-nav__link {
	display: inline-block;
	padding-block: var(--ra-space-3);
	font-size: var(--ra-text-sm);
	font-weight: 600;
	letter-spacing: 0.01em;
}
.ra-nav__link:hover { color: var(--ra-primary); }
.ra-nav__toggle {
	position: absolute;
	top: 50%;
	right: -1.1rem;
	transform: translateY(-50%);
	padding: var(--ra-space-2);
	color: var(--ra-ink-muted);
	display: none;
}
@media (min-width: 1000px) {
	.ra-nav__toggle { display: none; }
}
.ra-mega {
	display: none;
	position: absolute;
	top: 100%;
	left: -1.25rem;
	min-width: 240px;
	background: var(--ra-surface);
	border: 1px solid var(--ra-border);
	box-shadow: 0 12px 28px rgba(33, 29, 26, 0.08);
	padding: var(--ra-space-4);
	border-radius: var(--ra-radius);
}
.ra-nav__item--has-children:hover .ra-mega,
.ra-nav__item--has-children:focus-within .ra-mega {
	display: block;
}
.ra-mega__list li { margin-bottom: var(--ra-space-1); }
.ra-mega__list a {
	display: block;
	padding: var(--ra-space-1) var(--ra-space-2);
	font-size: var(--ra-text-sm);
	border-radius: var(--ra-radius);
}
.ra-mega__list a:hover { color: var(--ra-primary); }
.ra-mega__all {
	display: block;
	margin-top: var(--ra-space-3);
	padding-top: var(--ra-space-3);
	border-top: 1px solid var(--ra-border);
	font-size: var(--ra-text-xs);
	font-weight: 700;
	color: var(--ra-primary);
}

.ra-header__actions { display: flex; align-items: center; gap: var(--ra-space-2); }
.ra-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--ra-ink);
}
.ra-icon-btn:hover { background: rgba(33, 29, 26, 0.06); }
.ra-icon-btn svg { width: 20px; height: 20px; }

.ra-menu-toggle { display: inline-flex; }
@media (min-width: 1000px) {
	.ra-menu-toggle { display: none; }
}

/* Search panel — compact and editorial, not a generic tall form band.
   Form is capped and centered within the normal content width rather
   than stretching edge to edge. */
.ra-search-panel {
	display: none;
	border-top: 1px solid var(--ra-border);
	background: var(--ra-surface);
}
.ra-search-panel.is-open { display: block; }
.ra-search-panel .ra-container { padding-block: var(--ra-space-4); }
.ra-search-panel form {
	display: flex;
	gap: var(--ra-space-2);
	max-width: 640px;
	margin-inline: auto;
}
.ra-search-panel input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: var(--ra-space-2) var(--ra-space-4);
	border: 1px solid var(--ra-border);
	background: var(--ra-surface);
	border-radius: var(--ra-radius);
	font-size: var(--ra-text-base);
}
.ra-search-panel input[type="search"]:focus {
	outline: none;
	border-color: var(--ra-primary);
	box-shadow: 0 0 0 3px rgba(180, 85, 47, 0.15);
}
.ra-search-panel button {
	flex-shrink: 0;
	padding: var(--ra-space-2) var(--ra-space-4);
	background: var(--ra-primary);
	color: #fff;
	border-radius: var(--ra-radius);
	font-weight: 600;
	font-size: var(--ra-text-sm);
}
.ra-search-panel button:hover { background: var(--ra-primary-dark); }
.ra-search-panel button:focus-visible { outline: 2px solid var(--ra-primary); outline-offset: 2px; }

/* Mobile nav */
.ra-mobile-nav {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 600;
	background: var(--ra-bg);
	overflow-y: auto;
}
.ra-mobile-nav.is-open { display: block; }
.ra-mobile-nav__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--ra-space-4) var(--ra-gutter);
	border-bottom: 1px solid var(--ra-border);
}
.ra-mobile-nav .ra-nav { display: block; margin: 0; }
.ra-mobile-nav .ra-nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: var(--ra-space-2) var(--ra-gutter); }
.ra-mobile-nav .ra-nav__item { border-bottom: 1px solid var(--ra-border); }
.ra-mobile-nav .ra-nav__link { display: flex; padding-block: var(--ra-space-4); font-size: var(--ra-text-lg); }
.ra-mobile-nav .ra-nav__toggle {
	display: flex;
	position: static;
	transform: none;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	margin-left: auto;
}
.ra-mobile-nav .ra-nav__item--has-children { display: flex; flex-wrap: wrap; align-items: center; }
.ra-mobile-nav .ra-nav__item--has-children .ra-nav__link { flex: 1; }
.ra-mobile-nav .ra-mega {
	display: none;
	position: static;
	width: 100%;
	border: 0;
	box-shadow: none;
	padding: 0 0 var(--ra-space-4);
	background: transparent;
}
.ra-mobile-nav .ra-nav__item.is-expanded .ra-mega { display: block; }
.ra-mobile-nav .ra-nav__toggle svg { transition: transform 0.15s ease; }
.ra-mobile-nav .ra-nav__item.is-expanded .ra-nav__toggle svg { transform: rotate(180deg); }

/* ==========================================================================
   Buttons / links / badges
   ========================================================================== */
.ra-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ra-space-2);
	padding: var(--ra-space-3) var(--ra-space-5);
	border-radius: var(--ra-radius);
	font-size: var(--ra-text-sm);
	font-weight: 700;
	background: var(--ra-primary);
	color: #fff;
}
.ra-btn:hover { background: var(--ra-primary-dark); }
.ra-btn--outline { background: transparent; color: var(--ra-ink); border: 1px solid var(--ra-border); }
.ra-btn--outline:hover { border-color: var(--ra-primary); color: var(--ra-primary); }

.ra-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.2em 0.6em;
	border-radius: 999px;
	font-size: var(--ra-text-xs);
	font-weight: 700;
	letter-spacing: 0.02em;
}
.ra-badge--pick { background: rgba(33, 29, 26, 0.08); color: var(--ra-ink); }
.ra-badge--sale { background: rgba(180, 85, 47, 0.1); color: var(--ra-primary-dark); }

/* ==========================================================================
   Cards
   ========================================================================== */
.ra-card { display: flex; flex-direction: column; }
.ra-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--ra-bg-alt);
	border-radius: var(--ra-radius);
	margin-bottom: var(--ra-space-3);
}
.ra-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.ra-card:hover .ra-card__media img { transform: scale(1.035); }
.ra-card__kicker { margin-bottom: var(--ra-space-2); }
.ra-card__title {
	font-size: var(--ra-text-lg);
	line-height: 1.3;
	margin-bottom: var(--ra-space-2);
}
.ra-card__title a:hover { color: var(--ra-primary); }
.ra-card__dek {
	color: var(--ra-ink-muted);
	font-size: var(--ra-text-sm);
	line-height: 1.5;
	margin-bottom: var(--ra-space-3);
}
.ra-card__meta {
	display: flex;
	align-items: center;
	gap: var(--ra-space-2);
	font-size: var(--ra-text-xs);
	font-weight: 500;
	color: var(--ra-ink-muted);
	margin-top: auto;
}
.ra-card__meta .dot::before { content: '\00b7'; margin-right: var(--ra-space-2); }

.ra-card--compact .ra-card__title { font-size: var(--ra-text-base); margin-bottom: var(--ra-space-3); }

/* Editorial section-layout variants — a deliberate, small set of
   reusable layouts assigned per category (see front-page.php), not a
   random rotation. Kept efficient: no single section should sprawl. */
.ra-card--feature-lead .ra-card__media { aspect-ratio: 3 / 2; margin-bottom: var(--ra-space-4); }
.ra-card--feature-lead .ra-card__title { font-size: var(--ra-text-2xl); line-height: 1.2; }
.ra-card--feature-lead .ra-card__dek { font-size: var(--ra-text-base); max-width: 42ch; }
.ra-card--grid-large .ra-card__title { font-size: var(--ra-text-xl); }
/* Below the 3-col breakpoint, grid-large cards sit 2-up (see
   .ra-grid--3) — drop the excerpt so a long line-wrap can't make one
   card run tall next to a short one, and keep the image compact.
   Scoped to grid-large only: grid-4 (Interiors/Decor) is untouched. */
@media (max-width: 899px) {
	.ra-card--grid-large .ra-card__dek { display: none; }
	.ra-card--grid-large .ra-card__media { aspect-ratio: 4 / 3; }
}

.ra-feature__grid { display: grid; gap: var(--ra-space-6); }
@media (min-width: 900px) {
	/* ~65/35 split: one clearly dominant feature, one clearly smaller
	   supporting column — not a near-even two-up grid. */
	.ra-feature__grid { grid-template-columns: 2fr 1fr; align-items: start; }
	.ra-feature__lead, .ra-feature__supporting { min-width: 0; }
}
.ra-feature__supporting { display: flex; flex-direction: column; gap: var(--ra-space-5); }

/* Compact horizontal "mini" card — small fixed thumbnail, no full-bleed
   image, so a supporting story can never balloon to feature-story size
   no matter how wide its column is. Separation between stacked mini
   cards is a faint hairline backed by generous gap, not a hard block. */
.ra-card-mini { display: flex; gap: var(--ra-space-3); padding-top: var(--ra-space-5); border-top: 1px solid var(--ra-border-soft); }
.ra-card-mini:first-child { padding-top: 0; border-top: 0; }
.ra-card-mini__media {
	flex-shrink: 0;
	width: 84px;
	height: 84px;
	border-radius: var(--ra-radius);
	overflow: hidden;
	background: var(--ra-bg-alt);
}
.ra-card-mini__media img { width: 100%; height: 100%; object-fit: cover; }
.ra-card-mini__body { min-width: 0; }
.ra-card-mini__kicker { font-size: 0.6875rem; margin-bottom: var(--ra-space-1); }
.ra-card-mini__title {
	display: block;
	font-family: var(--ra-font-serif);
	font-size: var(--ra-text-sm);
	font-weight: 600;
	line-height: 1.35;
	margin-bottom: var(--ra-space-1);
}
.ra-card-mini:hover .ra-card-mini__title { color: var(--ra-primary); }
.ra-card-mini__meta { display: block; font-size: var(--ra-text-xs); color: var(--ra-ink-muted); }

.ra-link-list { display: flex; flex-direction: column; }
.ra-link-list__item { display: block; padding-block: var(--ra-space-3); border-top: 1px solid var(--ra-border); }
.ra-link-list__item:first-child { border-top: 0; padding-top: 0; }
.ra-link-list__kicker { display: block; margin-bottom: var(--ra-space-1); }
.ra-link-list__title {
	display: block;
	font-family: var(--ra-font-serif);
	font-size: var(--ra-text-base);
	font-weight: 600;
	line-height: 1.3;
}
.ra-link-list__item:hover .ra-link-list__title { color: var(--ra-primary); }
.ra-link-list__meta { display: block; margin-top: var(--ra-space-1); font-size: var(--ra-text-xs); color: var(--ra-ink-muted); }

/* ==========================================================================
   Homepage hero
   ========================================================================== */
.ra-hero { padding-block: var(--ra-space-8) var(--ra-space-7); }
.ra-hero__grid { display: grid; gap: var(--ra-space-6); }
@media (min-width: 900px) {
	.ra-hero__grid { grid-template-columns: 1.5fr 1fr; align-items: start; }
}
/* Mobile only (stacked single column) — extra breathing room between
   the lead story's metadata and the first supporting story below it,
   so the lead visually ends before the supporting stories begin.
   Desktop's side-by-side column gap (rule above) is untouched. */
@media (max-width: 899px) {
	.ra-hero__grid { gap: 3.5rem; }
}
.ra-hero-lead .ra-card__media { aspect-ratio: 16 / 10; margin-bottom: var(--ra-space-4); }
.ra-hero-lead .ra-card__title { font-size: var(--ra-text-4xl); line-height: 1.08; margin-bottom: var(--ra-space-3); }
/* Mobile only — ~13% smaller so a long headline doesn't dominate a
   375–430px screen. Desktop (≥900px) keeps --ra-text-4xl untouched. */
@media (max-width: 899px) {
	.ra-hero-lead .ra-card__title { font-size: 2.6rem; }
}
/* Small phones only — a further ~9% reduction on top of the mobile
   size above, same family/weight/line-height, so a long headline
   doesn't dominate a 375–430px screen. Tablet (600–899px) keeps 2.6rem. */
@media (max-width: 600px) {
	.ra-hero-lead .ra-card__title { font-size: 2.35rem; }
}
.ra-hero-lead .ra-card__dek { font-size: var(--ra-text-base); max-width: 46ch; }
.ra-hero-secondary-list { display: grid; gap: var(--ra-space-5); }
.ra-hero-secondary .ra-card__media { aspect-ratio: 16 / 9; margin-bottom: var(--ra-space-2); }
.ra-hero-secondary .ra-card__title { font-size: var(--ra-text-base); line-height: 1.25; }
/* Mobile only: the two hero supporting stories become a compact
   horizontal card (thumbnail left, category/headline/date right)
   instead of a full-width image-led card — same markup, CSS-only
   transform via grid-template-areas, so the desktop hero (≥900px,
   the rule above this block) is completely untouched. */
@media (max-width: 899px) {
	.ra-hero-secondary .ra-card {
		display: grid;
		grid-template-columns: 96px 1fr;
		grid-template-areas:
			"media kicker"
			"media title"
			"media meta";
		column-gap: var(--ra-space-3);
		row-gap: 2px;
		align-items: start;
	}
	.ra-hero-secondary .ra-card__media {
		grid-area: media;
		width: 96px;
		height: 96px;
		aspect-ratio: 1 / 1;
		margin-bottom: 0;
	}
	.ra-hero-secondary .ra-card__kicker { grid-area: kicker; margin-bottom: 0; }
	.ra-hero-secondary .ra-card__title { grid-area: title; font-size: var(--ra-text-sm); margin-bottom: 0; }
	.ra-hero-secondary .ra-card__meta { grid-area: meta; }
}

/* ==========================================================================
   Category strips / archives / search results
   ========================================================================== */
.ra-subnav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ra-space-2);
	margin: var(--ra-space-4) 0 var(--ra-space-5);
}
.ra-chip {
	display: inline-block;
	padding: var(--ra-space-2) var(--ra-space-4);
	border: 1px solid var(--ra-border);
	border-radius: 999px;
	font-size: var(--ra-text-sm);
	font-weight: 600;
	background: var(--ra-surface);
}
.ra-chip:hover { border-color: var(--ra-primary); color: var(--ra-primary); }

.ra-archive-head { padding-block: var(--ra-space-7) var(--ra-space-6); border-bottom: 1px solid var(--ra-border); }
.ra-archive-head__title { font-size: var(--ra-text-3xl); margin-bottom: var(--ra-space-3); }
.ra-archive-head__intro { max-width: 62ch; color: var(--ra-ink-muted); font-size: var(--ra-text-lg); }
.ra-archive-body { padding-block: var(--ra-space-7); }

.ra-cross-links {
	border-top: 1px solid var(--ra-border);
	margin-top: var(--ra-space-7);
	padding-top: var(--ra-space-6);
}
.ra-cross-links__title { font-size: var(--ra-text-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ra-ink-muted); margin-bottom: var(--ra-space-3); }

/* Pagination */
.ra-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ra-space-2);
	justify-content: center;
	margin-top: var(--ra-space-7);
}
.ra-pagination a, .ra-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--ra-space-2);
	border: 1px solid var(--ra-border);
	border-radius: var(--ra-radius);
	font-size: var(--ra-text-sm);
}
.ra-pagination a:hover { border-color: var(--ra-primary); color: var(--ra-primary); }
.ra-pagination .current { background: var(--ra-primary); color: #fff; border-color: var(--ra-primary); }

/* ==========================================================================
   Single article
   ========================================================================== */
.ra-article-head { padding-block: var(--ra-space-7) var(--ra-space-5); max-width: 46rem; margin-inline: auto; text-align: center; }
.ra-article-head__title { font-size: var(--ra-text-4xl); margin-block: var(--ra-space-3); }
.ra-article-head__dek { font-size: var(--ra-text-lg); color: var(--ra-ink-muted); max-width: 42ch; margin-inline: auto; }
.ra-byline {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--ra-space-2);
	font-size: var(--ra-text-sm);
	color: var(--ra-ink-muted);
	margin-top: var(--ra-space-4);
}
.ra-byline__author { font-weight: 700; color: var(--ra-ink); }

.ra-article-media { max-width: var(--ra-container); margin: 0 auto var(--ra-space-7); }
.ra-article-media img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--ra-radius); }
.ra-article-media__caption {
	margin-top: var(--ra-space-2);
	font-size: var(--ra-text-xs);
	color: var(--ra-ink-muted);
	text-align: center;
}

/* No sidebar — a focused single column, full stop. */
.ra-article-main { padding-bottom: var(--ra-space-8); }

/* Small editorial text, not a warning box: no background, no border,
   no icon — just quietly secondary, the way established publishers
   present it. */
.ra-disclosure {
	max-width: var(--ra-container-narrow);
	margin: 0 auto var(--ra-space-6);
	font-size: var(--ra-text-xs);
	color: var(--ra-ink-muted);
}
.ra-disclosure a { color: var(--ra-ink-muted); text-decoration: underline; }
.ra-disclosure a:hover { color: var(--ra-primary); }

.ra-article-body {
	max-width: var(--ra-container-narrow);
	margin-inline: auto;
	font-size: var(--ra-text-base);
}
.ra-article-body > * { margin-inline: auto; }
.ra-article-body h2 { font-size: var(--ra-text-2xl); margin-top: 2em; }
.ra-article-body h3 { font-size: var(--ra-text-xl); margin-top: 1.6em; }
.ra-article-body p { line-height: 1.75; }
.ra-article-body img { border-radius: var(--ra-radius); }
/* Editorial images may break wider than the prose column, but stay
   contained and centered — never true edge-to-edge full-bleed. */
.ra-article-body .alignwide { max-width: 1100px; }
.ra-article-body .alignfull { max-width: 1100px; }
.ra-article-body figure { margin-block: var(--ra-space-6); }
.ra-article-body figcaption {
	margin-top: var(--ra-space-2);
	font-size: var(--ra-text-xs);
	color: var(--ra-ink-muted);
	text-align: center;
}
.ra-article-body blockquote {
	border-left: 3px solid var(--ra-primary);
	padding-left: var(--ra-space-4);
	font-family: var(--ra-font-serif);
	font-size: var(--ra-text-lg);
	font-style: italic;
	color: var(--ra-ink-muted);
}
.ra-article-body table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--ra-text-sm);
}
.ra-article-body .wp-block-table {
	overflow-x: auto;
}
.ra-article-body th,
.ra-article-body td {
	padding: var(--ra-space-2) var(--ra-space-3);
	border: 1px solid var(--ra-border);
	text-align: left;
}
.ra-article-body th { background: var(--ra-bg-alt); font-weight: 700; }

/* Inspiration articles only: auto-number each H2 idea ("01", "02"…)
   so editors never have to type it manually. Guides/shopping articles
   keep plain, unnumbered H2s. */
.ra-article--inspiration .ra-article-body { counter-reset: ra-idea; }
.ra-article--inspiration .ra-article-body h2 { counter-increment: ra-idea; }
.ra-article--inspiration .ra-article-body h2::before {
	content: counter(ra-idea, decimal-leading-zero);
	display: block;
	font-family: var(--ra-font-sans);
	font-size: var(--ra-text-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--ra-primary);
	margin-bottom: var(--ra-space-1);
}

/* Key Points, Methodology, TOC — same reading width as the prose
   column, each conditional on the template actually rendering them. */
.ra-key-points,
.ra-methodology,
.ra-toc {
	max-width: var(--ra-container-narrow);
	margin-inline: auto;
}
.ra-key-points {
	margin-bottom: var(--ra-space-7);
	padding: var(--ra-space-5);
	background: var(--ra-bg-alt);
	border-radius: var(--ra-radius);
}
.ra-key-points__label {
	margin: 0 0 var(--ra-space-3);
	font-size: var(--ra-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ra-ink-muted);
}
.ra-key-points__list { display: flex; flex-direction: column; gap: var(--ra-space-2); }
.ra-key-points__list li {
	position: relative;
	padding-left: var(--ra-space-5);
	line-height: 1.5;
}
.ra-key-points__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ra-primary);
}

.ra-methodology {
	margin-top: var(--ra-space-8);
	padding-top: var(--ra-space-6);
	border-top: 1px solid var(--ra-border);
}
.ra-methodology__title { font-size: var(--ra-text-2xl); margin-bottom: var(--ra-space-3); }
.ra-methodology__body p { line-height: 1.7; }

.ra-toc {
	margin-bottom: var(--ra-space-7);
	padding: var(--ra-space-4) var(--ra-space-5);
	border: 1px solid var(--ra-border);
	border-radius: var(--ra-radius);
}
.ra-toc__label {
	margin: 0 0 var(--ra-space-3);
	font-size: var(--ra-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ra-ink-muted);
}
.ra-toc__list { display: flex; flex-direction: column; gap: var(--ra-space-2); counter-reset: ra-toc; }
@media (min-width: 640px) {
	.ra-toc__list { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--ra-space-5); }
}
.ra-toc__list li { counter-increment: ra-toc; }
.ra-toc__list a {
	display: flex;
	gap: var(--ra-space-2);
	font-size: var(--ra-text-sm);
	line-height: 1.4;
}
.ra-toc__list a::before {
	content: counter(ra-toc, decimal-leading-zero);
	color: var(--ra-primary);
	font-weight: 700;
	flex-shrink: 0;
}
.ra-toc__list a:hover { color: var(--ra-primary); }

/* "Tip" — an occasional aside, not a boxed "SaaS card": a left rule
   and quiet cream background (one of cream's approved contained
   uses), nothing heavier. */
.ra-callout {
	max-width: var(--ra-container-narrow);
	margin: var(--ra-space-6) auto;
	padding: var(--ra-space-4) var(--ra-space-5);
	background: var(--ra-bg-alt);
	border-left: 3px solid var(--ra-primary);
	border-radius: var(--ra-radius);
}
.ra-callout__label {
	margin: 0 0 var(--ra-space-2);
	font-size: var(--ra-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ra-ink-muted);
}
.ra-callout__body { font-size: var(--ra-text-sm); }
.ra-callout__body p:last-child { margin-bottom: 0; }

.ra-author-box {
	max-width: var(--ra-container-narrow);
	margin: var(--ra-space-8) auto 0;
	padding-top: var(--ra-space-6);
	border-top: 1px solid var(--ra-border);
	display: flex;
	gap: var(--ra-space-4);
	align-items: flex-start;
}
.ra-author-box__avatar img { width: 56px; height: 56px; border-radius: 50%; }
.ra-author-box__name { font-weight: 700; margin-bottom: var(--ra-space-1); }
.ra-author-box__bio { color: var(--ra-ink-muted); font-size: var(--ra-text-sm); }

/* ==========================================================================
   Affiliate components — quiet, editorial, not "store"-styled
   ========================================================================== */
.ra-product-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--ra-border);
	border-radius: var(--ra-radius);
	padding: var(--ra-space-3);
	background: var(--ra-surface);
}
.ra-product-card__media { aspect-ratio: 1/1; background: var(--ra-bg-alt); border-radius: var(--ra-radius); overflow: hidden; margin-bottom: var(--ra-space-3); position: relative; }
.ra-product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ra-product-card__badge { position: absolute; top: var(--ra-space-2); left: var(--ra-space-2); }
.ra-product-card__retailer { font-size: var(--ra-text-xs); color: var(--ra-ink-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ra-product-card__title { font-family: var(--ra-font-sans); font-weight: 600; font-size: var(--ra-text-sm); margin: var(--ra-space-1) 0; }
.ra-product-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--ra-space-2); }
.ra-product-card__price { font-weight: 700; }
.ra-product-card__cta { font-size: var(--ra-text-xs); font-weight: 700; color: var(--ra-primary); }
.ra-product-card__cta:hover { text-decoration: underline; }

.ra-shop-module {
	max-width: var(--ra-container-narrow);
	margin: var(--ra-space-7) auto;
	padding: var(--ra-space-5);
	background: var(--ra-bg-alt);
	border-radius: var(--ra-radius);
}
.ra-shop-module__title { font-size: var(--ra-text-lg); margin-bottom: var(--ra-space-4); }
.ra-shop-module__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ra-space-3); }
@media (min-width: 640px) {
	.ra-shop-module__grid { grid-template-columns: repeat(3, 1fr); }
}

.ra-where-to-buy { border: 1px solid var(--ra-border); border-radius: var(--ra-radius); padding: var(--ra-space-4); }
.ra-where-to-buy__title { font-size: var(--ra-text-sm); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ra-ink-muted); margin-bottom: var(--ra-space-3); }
.ra-where-to-buy__list li { display: flex; justify-content: space-between; padding-block: var(--ra-space-2); border-top: 1px solid var(--ra-border); }
.ra-where-to-buy__list li:first-child { border-top: 0; }
.ra-where-to-buy__list a { font-weight: 700; color: var(--ra-primary); }

.ra-shopping-strip .ra-grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .ra-shopping-strip .ra-grid { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   Newsletter band
   ========================================================================== */
.ra-newsletter { background: var(--ra-ink); color: var(--ra-bg); text-align: center; padding-block: var(--ra-space-7); }
.ra-newsletter__title { color: #fff; font-size: var(--ra-text-2xl); }
.ra-newsletter__sub { color: rgba(250, 246, 241, 0.7); max-width: 44ch; margin: 0 auto var(--ra-space-5); }
.ra-newsletter__form { display: flex; gap: var(--ra-space-2); max-width: 420px; margin: 0 auto; }
.ra-newsletter__form input {
	flex: 1;
	padding: var(--ra-space-3) var(--ra-space-4);
	border: 1px solid rgba(250, 246, 241, 0.3);
	background: rgba(250, 246, 241, 0.06);
	color: #fff;
	border-radius: var(--ra-radius);
}
.ra-newsletter__form input::placeholder { color: rgba(250, 246, 241, 0.55); }
.ra-newsletter__form button { background: var(--ra-primary); color: #fff; padding-inline: var(--ra-space-5); border-radius: var(--ra-radius); font-weight: 700; }
.ra-newsletter__form button:hover { background: var(--ra-primary-dark); }

/* ==========================================================================
   Footer — a deliberate editorial footer: Room Almanac identity /
   Explore / About / Policies / Follow (if configured), then a subtle
   legal strip. No dynamic_sidebar() widget area is used here (see
   footer.php), and there is no repeated sitewide affiliate sentence —
   disclosure lives on the Affiliate Disclosure page and on individual
   articles that need it.

   Dark ink background (reusing the site's existing --ra-ink brand
   color, not a new one) so the footer clearly anchors the end of a
   long homepage. Columns are flexbox, not CSS grid, so however many
   are actually present (Follow only shows once configured) always
   fill the row's full width — never a narrow stack with dead space.
   ========================================================================== */
.ra-footer {
	background: var(--ra-ink);
	color: rgba(250, 246, 241, 0.72);
	padding-block: var(--ra-space-8) var(--ra-space-6);
}
.ra-footer__heading {
	font-family: var(--ra-font-sans);
	font-size: var(--ra-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: rgba(250, 246, 241, 0.5);
	margin-bottom: var(--ra-space-4);
}
/* Mobile (below 700px): a deliberate 2-column editorial grid — Brand
   and Policies span the full width, Explore/About/Follow sit as
   regular 2-up cells. Desktop (≥700px, untouched from before) switches
   to the approved flex-row layout where every present column shares
   the row equally. */
.ra-footer__cols {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: var(--ra-space-5);
	row-gap: var(--ra-space-7);
}
.ra-footer__col--brand,
.ra-footer__col--full {
	grid-column: 1 / -1;
}
@media (min-width: 700px) {
	.ra-footer__cols { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--ra-space-6); }
	.ra-footer__col { flex: 1 1 140px; }
	.ra-footer__col--brand { flex: 1.6 1 220px; max-width: 320px; }
}
.ra-footer__wordmark {
	font-family: var(--ra-font-sans);
	font-size: var(--ra-text-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #fff;
	margin-bottom: var(--ra-space-3);
}
.ra-footer__tagline {
	color: rgba(250, 246, 241, 0.65);
	font-size: var(--ra-text-sm);
	line-height: 1.5;
	max-width: 30ch;
	margin-bottom: 0;
}
.ra-footer__links li { margin-bottom: var(--ra-space-3); }
.ra-footer__links a { font-size: var(--ra-text-sm); color: rgba(250, 246, 241, 0.72); }
.ra-footer__links a:hover { color: var(--ra-primary); }

.ra-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ra-space-3) var(--ra-space-5);
	justify-content: space-between;
	align-items: center;
	margin-top: var(--ra-space-7);
	padding-top: var(--ra-space-5);
	border-top: 1px solid rgba(250, 246, 241, 0.14);
	font-size: var(--ra-text-xs);
	color: rgba(250, 246, 241, 0.55);
}
.ra-footer__copyright { margin: 0; }
.ra-footer__legal-links { display: flex; flex-wrap: wrap; gap: var(--ra-space-5); }
.ra-footer__legal-links a { color: rgba(250, 246, 241, 0.55); }
.ra-footer__legal-links a:hover { color: var(--ra-primary); }
/* Mobile only: Affiliate Disclosure already appears directly above in
   the Policies group, so the legal strip stays to Privacy Policy /
   Terms of Use there. Desktop (≥700px) keeps all three, unchanged. */
@media (max-width: 699px) {
	.ra-footer__legal-disclosure { display: none; }
}

/* ==========================================================================
   Search
   ========================================================================== */
.ra-search-form { display: flex; gap: var(--ra-space-2); max-width: 520px; }
.ra-search-form input[type="search"] {
	flex: 1;
	padding: var(--ra-space-3) var(--ra-space-4);
	border: 1px solid var(--ra-border);
	border-radius: var(--ra-radius);
	background: var(--ra-surface);
}
.ra-search-form button { background: var(--ra-primary); color: #fff; padding-inline: var(--ra-space-5); border-radius: var(--ra-radius); font-weight: 700; }
.ra-no-results { padding-block: var(--ra-space-6); }

/* ==========================================================================
   404
   ========================================================================== */
.ra-404 { text-align: center; padding-block: var(--ra-space-9); }
.ra-404__code { font-family: var(--ra-font-serif); font-size: var(--ra-text-4xl); color: var(--ra-primary); }

/* ==========================================================================
   Widgets / comments (kept minimal — off by default via empty sidebars)
   ========================================================================== */
.ra-widget { margin-bottom: var(--ra-space-6); }
.ra-widget__title { font-size: var(--ra-text-base); border-bottom: 1px solid var(--ra-border); padding-bottom: var(--ra-space-2); }
.ra-comments { max-width: var(--ra-container-narrow); margin: var(--ra-space-8) auto 0; }