/**
 * Moodboard — front-end enhancements.
 * Design tokens live in theme.json; this file adds the masonry grid,
 * card interactions, texture, and accessibility niceties.
 */

/* ---------------------------------------------------------------------------
   Local tokens.
   Colours theme.json can't express: translucent veils, shadow tints, and the
   few places a preset is used for its literal darkness rather than its
   meaning. The site is light-only — dark mode was removed 2026-08-16.
--------------------------------------------------------------------------- */
:root {

	/* Shadows are tinted with the brand charcoal, not pure black. */
	--md-shadow-rgb: 36, 39, 42;

	--md-header-veil: rgba(241, 242, 240, 0.85); /* translucent sticky header */
	/* Hero photographs: gradient scrim + light type, in BOTH themes. Dense on
	   the left where the text sits, clearing to the right so the room stays
	   sharp. See the .home-hero__backdrop::after note. */
	--md-hero-scrim: linear-gradient(
		90deg,
		rgba(22, 21, 18, 0.94) 0%,
		rgba(22, 21, 18, 0.91) 34%,
		rgba(22, 21, 18, 0.76) 52%,
		rgba(22, 21, 18, 0.30) 74%,
		rgba(22, 21, 18, 0.10) 100%
	);
	--md-hero-text: #FFFFFF;
	--md-hero-accent: #C9A860;                   /* brass, the one warm note */
	--md-hero-eyebrow: #DDE8D8;                  /* pale green over the photo */
	--md-hero-dek: #E6E1D8;
	--md-hero-min-h: 29.5rem;                    /* ~4:1 band, as the reference */
	--md-badge-bg: #F3E4BE;                      /* pale gold, behind the mark */
	--md-badge-ink: #24272A;                     /* constant in both themes */

	/* Label on the brass CTAs. Ink, not white: white on brass is only 1.9:1,
	   while ink on it measures 6.62:1. */
	--md-cta-fg: #24272A;
	--md-savebtn-bg: rgba(255, 255, 255, 0.92);  /* save pill on a photo     */
	--md-fill-faint: rgba(207, 211, 206, 0.30);  /* ad-slot placeholder      */
	--md-fill-fainter: rgba(207, 211, 206, 0.22); /* empty-state panel        */

	/* The footer is a deliberate dark band in light mode, so it needs its own
	   colours rather than the flipped presets. */
	--md-footer-bg: var(--wp--preset--color--ink);
	--md-footer-text: #F1F2F0;
	--md-footer-nav: #C6CBC5;
	--md-footer-meta: #A3A9A3;

	/* Mirrors theme.json's layout.wideSize. Kept as a token because the ad
	   rails have to know where the content column ends, and because the rule
	   below narrows it on screens too tight to hold rails otherwise. */
	--md-col-w: 1200px;

	/* Bookmark — the conventional "save" symbol — for the Saved nav item.
	   Applied as a mask so it takes the link's own colour and follows it on
	   hover, rather than being a fixed-colour image. */
	--md-save-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h11a1.5 1.5 0 0 1 1.5 1.5V21l-7-4.4L5 21V4.5A1.5 1.5 0 0 1 6.5 3z'/%3E%3C/svg%3E");

}

/* ---------------------------------------------------------------------------
   Page background — flat.

   Spec §2.3 asked for a barely-there "graph paper" hairline grid here. It was
   removed on request: in dark mode the lines sat 11/255 from the background
   against 7/255 in light, so light-on-dark read as a visible grid rather than
   texture, and a flat ground was preferred over re-tuning it. The spec records
   this as a deliberate departure.
--------------------------------------------------------------------------- */
body {
	background-color: var(--wp--preset--color--base);
}

/* ---------------------------------------------------------------------------
   Header — sticky, translucent, hairline base

   The stick has to sit on WordPress's template-part wrapper, not on
   .site-header itself. WordPress wraps every template part in its own
   element, and that wrapper is exactly as tall as the header — a sticky
   child can only travel within its parent's box, so with no spare height it
   stuck for zero pixels and scrolled away with the page. The wrapper's own
   parent is .wp-site-blocks (the full document), which gives it the whole
   page to travel. The footer part is wrapped in <footer>, so tying this to
   the header tag keeps it off everything else.
--------------------------------------------------------------------------- */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Keep in-page anchors clear of the now-permanent header instead of landing
   underneath it. */
html {
	scroll-padding-top: 8rem;
}

.site-header {
	border-bottom: 1px solid var(--wp--preset--color--stone);
	background-color: var(--md-header-veil);
}

/* No backdrop-filter here, deliberately.
   An element with backdrop-filter becomes the containing block for any
   position:fixed descendant — and WordPress's mobile menu is a fixed,
   full-screen overlay rendered inside the header. With the filter set, the
   menu was confined to the header's own ~68px box: a sliver at the top of
   the screen with all but the first link unreachable.
   Nothing is lost visually: the header's block markup carries
   has-base-background-color, whose !important opaque background painted
   over the frosted effect anyway, so it never actually rendered. */
/* Brand lockup — mark beside wordmark. Both halves take their colour from
   the theme presets (the mark via currentColor and var() inside the inlined
   SVG), so it needs no second asset. */
.brand-logo {
	margin: 0;
}
.brand-logo__link {
	/* One knob for the whole lockup: the mark's height. The wordmark's rule
	   is positioned from it below, so the two halves stay locked together at
	   any size — change this alone to rescale the logo. */
	--md-mark-h: 3.1rem;

	display: inline-flex;
	/* Bottom-aligned, so the mark's rule and the wordmark's rule sit on a
	   common baseline rather than drifting apart as either one resizes. */
	align-items: flex-end;
	gap: 0.55rem;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}
.brand-logo__mark {
	flex: 0 0 auto;
	display: block;
	height: var(--md-mark-h);
	width: auto;
}
.brand-logo__word {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: -0.02em;
	white-space: nowrap;
	/* The forest rule that sits under the wordmark in the brand mark.
	   Inside the SVG that rule is drawn at y=104 of a 168-unit viewBox — so
	   64 units up from the bottom, the rest being trailing vine. Lifting this
	   rule by the same fraction of the mark's height (less half its own 2px
	   weight) puts both on one line, and leaves the vines hanging below. If
	   the mark's viewBox changes, this fraction has to change with it. */
	border-bottom: 2px solid var(--wp--preset--color--forest);
	padding-bottom: 0.16em;
	margin-bottom: calc(var(--md-mark-h) * (64 / 168) - 1px);
}
/* The wordmark tail carries the brand green. */
.brand-logo__word-accent {
	color: var(--wp--preset--color--accent);
}
.brand-logo__link:hover .brand-logo__word {
	border-bottom-color: var(--wp--preset--color--accent);
}

/* Keep the lockup from crowding the nav on small screens. Only the two sizes
   change in each band; the rule alignment recalculates from --md-mark-h by
   itself.

   The awkward band is 600-700px: WordPress swaps its overlay menu back for
   the full nav at exactly 600px, but the full nav needs roughly 640px of
   room, so the lockup has to give way hardest there or the header wraps to
   two rows. These bounds deliberately meet core's 599/600 boundary exactly —
   an off-by-one here leaves a single width that wraps. Below 600px the
   hamburger frees the space up again and the logo can breathe. */
@media (min-width: 600px) and (max-width: 700px) {
	.brand-logo__link { --md-mark-h: 2.3rem; }
	.brand-logo__word { font-size: 1.05rem; }
}
@media (max-width: 599px) {
	.brand-logo__link { --md-mark-h: 2.55rem; }
	.brand-logo__word { font-size: 1.2rem; }
}

/* Navigation */
.site-nav {
	font-family: var(--wp--preset--font-family--display);
}

/* Items with a dropdown render as <button>, the rest as <a>. A button keeps
   the browser's default 1px padding and its own font metrics, so those two
   sat exactly 1px lower than their neighbours — enough to read as crooked in
   a row of six. Reset so both element types share one baseline. The mobile
   overlay's +/- rules are scoped to .is-menu-open and far more specific, so
   they are unaffected. */
.site-nav button.wp-block-navigation-item__content {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	line-height: inherit;
	color: inherit;
	text-align: left;
}
.site-nav a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.site-nav .wp-block-navigation-item__content:hover,
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a {
	color: var(--wp--preset--color--accent);
}
/* Understated underline reveal on hover.

   Buttons are included, not just anchors. Dropdown items render as <button>,
   so previously they got no underline on hover — and, less obviously, no 2px
   pseudo-element either, which left their box a different height from the
   links beside them and their labels sitting 1px lower. Giving both the same
   pseudo fixes the hover state and the alignment in one go. */
.site-nav .wp-block-navigation-item > a::after,
.site-nav .wp-block-navigation-item > button::after {
	content: "";
	display: block;
	height: 2px;
	width: 0;
	background: var(--wp--preset--color--accent);
	transition: width 0.22s ease;
}
.site-nav .wp-block-navigation-item > button:hover::after,
.site-nav .wp-block-navigation-item > a:hover::after {
	width: 100%;
}
/* Submenu ("Ideas") dropdown */
.site-nav .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--stone);
	border-radius: 4px;
	box-shadow: 0 16px 34px -18px rgba(var(--md-shadow-rgb), 0.35);
	padding: 0.35rem;
	min-width: 230px;
}
.site-nav .wp-block-navigation__submenu-container .wp-block-navigation-item a {
	border-radius: 3px;
	padding: 0.5rem 0.7rem;
}
.site-nav .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover {
	background: var(--wp--preset--color--base);
}
.site-nav .wp-block-navigation__submenu-container .wp-block-navigation-item a::after {
	display: none;
}

/* Hold the overlay menu open-able until the full bar actually fits.
   Core swaps its hamburger for the horizontal bar at exactly 600px, but with
   six top-level items — three of them dropdowns — the bar needs about 820px
   and wrapped to two rows across the whole 600-816px range. These two rules
   are core's own mobile rules re-asserted over that gap; core gates each of
   them behind `@media (min-width: 600px)`, so re-stating them here with one
   extra class of specificity is all it takes. Raise the 819px bound if more
   top-level items are ever added. */
@media (min-width: 600px) and (max-width: 819px) {
	.site-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
	.site-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* Mobile overlay menu.
   Everything above styles the nav as a right-aligned horizontal bar. In the
   full-screen overlay that same alignment pushes every label against — and
   past — the right edge, and the submenu keeps rendering as a floating
   desktop dropdown. This block restates the nav as a plain left-aligned
   column for the overlay only. It went unnoticed until now because the
   overlay never actually opened to full size (see the backdrop-filter note
   above), so its styling was never exercised. */
.wp-block-navigation__responsive-container.is-menu-open {
	/* Core positions the overlay's items from these custom properties. The nav
	   element sets them to flex-end for the right-aligned desktop bar and they
	   inherit into the overlay, which is what pinned every label to the right
	   edge. Re-pointing the variables here beats fighting core's selectors:
	   its own rules then compute to flex-start on their own. */
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-align: flex-start;
	--navigation-layout-justify: flex-start;
}

/* Core hard-codes #fff / #000 for an overlay whose nav block declares no
   colours of its own, and does it at a specificity no plain class can beat —
   so the overlay ignored the theme and turned white with black text in dark
   mode too. Matching core's own selector shape is what makes these apply. */
.site-nav.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	background-color: var(--wp--preset--color--base);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}
.site-nav.wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	color: var(--wp--preset--color--ink);
}
/* The variables have to be restated on the list itself, not just an ancestor:
   WordPress emits a generated layout class onto the <ul> that re-sets them to
   flex-end (and align to center) for the desktop bar, so an inherited value
   never reaches it. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-align: flex-start;
	--navigation-layout-justify: flex-start;

	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open a {
	padding-block: 0.35rem;
}
/* Collapse submenus in the overlay until their toggle is tapped.
   Core renders the toggle and keeps its aria-expanded honest, but inside the
   responsive overlay it shows every submenu open regardless — which turned the
   mobile menu into a 1351px wall of 33 links. This is the only piece missing:
   act on the state core is already tracking. */
.wp-block-navigation__responsive-container.is-menu-open
	button[aria-expanded="false"] ~ .wp-block-navigation__submenu-container {
	display: none;
}
/* Make it obvious a row expands. Core's chevron is a small separate <span>
   next to the button, easy to miss on a phone — replaced here with a + / −
   drawn on the button itself, pushed to the far right so the whole row reads
   as an accordion and the whole row is the tap target. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	display: none;
}
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-submenu > button.wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 1rem;
	padding-block: 0.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-submenu > button.wp-block-navigation-item__content::after {
	content: "+";
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border: 1px solid var(--wp--preset--color--stone);
	border-radius: 4px;
	font-size: 1.05rem;
	line-height: 1;
	font-weight: 500;
	color: var(--wp--preset--color--accent);
	transition: background 0.18s ease, border-color 0.18s ease;
}
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-submenu > button[aria-expanded="true"].wp-block-navigation-item__content::after {
	content: "\2212";                       /* proper minus, not a hyphen */
	background: var(--wp--preset--color--accent-soft);
	border-color: var(--wp--preset--color--clay);
}

/* The submenu is a nested list here, not a floating card. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent;
	border: 0;
	box-shadow: none;
	min-width: 0;
	padding: 0 0 0 var(--wp--preset--spacing--40);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a {
	color: var(--wp--preset--color--muted);
}
/* The desktop hover underline reads as a stray dash in a vertical list. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a::after {
	display: none;
}

/* ---------------------------------------------------------------------------
   Home hero — two photographs cross-fading behind the headline.

   The pair is decorative, so the text has to stay readable over whatever
   frame happens to be showing. Both photos are bright interiors, which is
   the awkward case in light mode where the type is near-black: the scrim
   below is tuned per theme and its strength was set by sampling the rendered
   pixels behind the headline, not by eye. See --md-hero-scrim.
--------------------------------------------------------------------------- */
.home-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: var(--md-hero-min-h);
	display: flex;
	align-items: center;
}
/* The hero is a constrained layout, and WordPress caps every direct child at
   contentSize (720px) and centres it. That applies to absolutely-positioned
   children too, so without this the backdrop sat as a 720px strip inside a
   1046px band instead of filling it. Scoped through .home-hero to outrank
   core's layout rule. */
.home-hero > .home-hero__backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	max-width: none;
	margin: 0;
}
.home-hero__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 58%;   /* keeps the sofas, not the ceilings */
	display: block;
	margin: 0;
}
/* Only the second slide animates; the first sits under it at full opacity. */
.home-hero__slide--b {
	opacity: 0;
	/* 7s. Started at 16s, then 11s; both left the hero looking static for long
	   enough that it read as broken. The first fade now begins at ~2s and each
	   photograph holds roughly three. */
	animation: md-hero-crossfade 7s ease-in-out infinite;
}
@keyframes md-hero-crossfade {
	0%, 28%  { opacity: 0; }
	40%, 88% { opacity: 1; }
	100%     { opacity: 0; }
}
/* The scrim is a HORIZONTAL gradient, not a flat wash.

   A uniform wash strong enough to carry light type flattens the whole
   photograph — the room stops reading as a room. Weighting it to the left,
   where the type sits, and letting it clear toward the right keeps the
   furniture sharp while still giving the text a dark ground to sit on.
   Values were set from pixel sampling behind the text, not by eye. */
.home-hero__backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--md-hero-scrim);
}

/* Type block — left-aligned over the dense end of the gradient. */
/* The band is full-bleed, but the type still lines up with the site's content
   column rather than drifting to the window edge — so the block is centred
   and the text is left-aligned inside it. */
.home-hero > .home-hero__content {
	width: 100%;
	max-width: var(--md-col-w);
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: left;
	padding-block: var(--wp--preset--spacing--60);
	padding-inline: clamp(1.25rem, 3vw, 2.5rem);
	box-sizing: border-box;
}
/* Keep the lines short even though the block is column-width — and pin them
   left. The constrained layout centres children with `margin: auto !important`
   at every level, so without this the capped lines float to the middle of the
   column and land on the bright side of the photograph. Measured: the text ran
   30%–70% of the band instead of 15%–55%. */
.home-hero__content > * {
	max-width: 34rem;
	margin-left: 0 !important;
	margin-right: auto !important;
}
.home-hero__eyebrow.has-accent-color {
	color: var(--md-hero-eyebrow) !important;
	margin: 0;
}
.home-hero__title {
	/* Space Grotesk here, not the editorial Playfair used for post titles.
	   The hero is a poster, not an article opening, and the reference this
	   was built to leads with a geometric sans. Deliberate narrow exception
	   to the type split in spec 2.2. */
	font-family: var(--wp--preset--font-family--display) !important;
	/* Sized to the reference: ~52px at desktop, not the 64px first tried —
	   the headline should sit in the band, not fill it. */
	font-size: clamp(1.9rem, 2.9vw, 3.25rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	font-weight: 400;
	color: var(--md-hero-text) !important;
	margin: 0.35rem 0 0;
}
.home-hero__title-accent {
	color: var(--md-hero-accent);
	font-weight: 700;
}
.home-hero__dek {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(0.875rem, 0.95vw, 0.9375rem);
	line-height: 1.65;
	color: var(--md-hero-dek) !important;
	max-width: 27rem;
	margin: 0.85rem 0 0;
}
.home-hero__cta {
	margin-top: 1.5rem;
}
.home-hero__cta .wp-block-button__link {
	background-color: var(--wp--preset--color--gold);
	color: var(--md-cta-fg);
	padding: 0.7rem 1.35rem;
	font-size: 0.9375rem;
	border-radius: 3px;
}
.home-hero__cta .wp-block-button__link:hover,
.home-hero__cta .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--gold-deep);
	color: var(--md-cta-fg);
}
/* Everything except the backdrop rides above it. */
.home-hero > *:not(.home-hero__backdrop) {
	position: relative;
	z-index: 1;
}

/* Narrow screens: there is no room for a text column beside the photograph,
   so the gradient goes vertical and the type spans the width. */
@media (max-width: 780px) {
	.home-hero {
		--md-hero-scrim: linear-gradient(
			180deg,
			rgba(22, 21, 18, 0.72) 0%,
			rgba(22, 21, 18, 0.86) 55%,
			rgba(22, 21, 18, 0.94) 100%
		);
		--md-hero-min-h: 22rem;
	}
	.home-hero > .home-hero__content {
		max-width: none;
	}
	.home-hero__slide {
		object-position: center 45%;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* No cross-fade at all — the first photograph simply stays put. */
	.home-hero__slide--b {
		animation: none;
		opacity: 0;
	}
}

/* ---------------------------------------------------------------------------
   "Get Inspired" band — full-bleed photograph with a centred card.

   No scrim here, unlike the hero: the type sits on an opaque card, so the
   room can stay at full strength behind it. That is the whole reason this
   layout works where a text-on-photo one needed measuring.
--------------------------------------------------------------------------- */
.get-inspired {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 30rem;
	padding-block: var(--wp--preset--spacing--60);
	margin-block: var(--wp--preset--spacing--70);
	overflow: hidden;
}
.get-inspired > .get-inspired__photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	max-width: none;      /* constrained layout caps children — see .home-hero */
	margin: 0;
}
.get-inspired__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 55%;
	display: block;
}
.get-inspired > .get-inspired__card {
	position: relative;
	z-index: 1;
	width: min(100%, 42rem);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--stone);
	/* Softer than the 4px the spec sets for post cards — this is a panel, not
	   a card in the grid, and the reference it follows is rounded. */
	border-radius: 10px;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
	box-shadow: 0 24px 60px -30px rgba(var(--md-shadow-rgb), 0.55);
	text-align: center;
	margin-inline: auto;
}
/* Badge, straddling the top edge of the card. */
.get-inspired__badge {
	display: grid;
	place-items: center;
	width: 4.5rem;
	height: 4.5rem;
	margin: calc(-1 * var(--wp--preset--spacing--60) - 2.6rem) auto var(--wp--preset--spacing--40);
	border-radius: 50%;
	background: var(--md-badge-bg);
	/* Pinned dark, not `ink`: the badge stays pale gold in both themes, and a
	   ink is reserved for text on the page background. */
	color: var(--md-badge-ink);
	box-shadow: 0 0 0 0.55rem var(--wp--preset--color--surface);
}
.get-inspired__badge svg {
	width: 2.1rem;
	height: auto;
	display: block;
}
.get-inspired__title {
	font-family: var(--wp--preset--font-family--display) !important;
	font-size: clamp(1.6rem, 2.2vw, 2.1rem);
	font-weight: 700;
	line-height: 1.15;
	margin: 0;
}
.get-inspired__text {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(0.9375rem, 1.05vw, 1rem);
	line-height: 1.65;
	color: var(--wp--preset--color--muted);
	max-width: 30rem;
	margin: var(--wp--preset--spacing--30) auto 0;
}
.get-inspired__cta {
	margin-top: var(--wp--preset--spacing--40);
}
.get-inspired__cta .wp-block-button__link {
	background-color: var(--wp--preset--color--gold);
	color: var(--md-cta-fg);
	padding: 0.7rem 1.35rem;
	font-size: 0.9375rem;
	border-radius: 3px;
}
.get-inspired__cta .wp-block-button__link:hover,
.get-inspired__cta .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--gold-deep);
	color: var(--md-cta-fg);
}

@media (max-width: 600px) {
	.get-inspired {
		min-height: 0;
		padding-inline: var(--wp--preset--spacing--40);
	}
	.get-inspired > .get-inspired__card {
		padding-inline: var(--wp--preset--spacing--40);
	}
}

/* ---------------------------------------------------------------------------
   The Moodboard Grid — asymmetric masonry via CSS multi-column (spec §2.3)
   Cards keep their natural image height, so the pinboard looks uneven
   on purpose. break-inside stops a card splitting across columns.
--------------------------------------------------------------------------- */
.moodboard-grid {
	column-count: 3;
	column-gap: 1.5rem;
	margin: 0;
}
.moodboard-grid > .moodboard-card {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	display: inline-block;
	width: 100%;
	margin: 0 0 1.5rem;
}

/* Related-posts grid: keep it to a tidy trio */
.moodboard-query--related .moodboard-grid {
	column-count: 3;
}

@media (max-width: 900px) {
	.moodboard-grid,
	.moodboard-query--related .moodboard-grid {
		column-count: 2;
	}
}
@media (max-width: 560px) {
	.moodboard-grid,
	.moodboard-query--related .moodboard-grid {
		column-count: 1;
	}
}

/* ---------------------------------------------------------------------------
   Post cards — white surface, hairline corners, lift on hover (spec §2.3–2.4)
--------------------------------------------------------------------------- */
.moodboard-card {
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--stone);
		transition: transform 0.28s ease, box-shadow 0.28s ease,
		background-color 0.25s ease, border-color 0.25s ease;
	will-change: transform;
}
.moodboard-card__image {
	margin: 0;
	line-height: 0;
	overflow: hidden;
}
.moodboard-card__image img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.5s ease;
}
.moodboard-card__niche a {
	color: var(--wp--preset--color--forest);
	text-decoration: none;
}

/* Niche tags are links, so they take the theme's link colour and ignore the
   colour set on their post-terms wrapper. That went unnoticed while the link
   colour and the tag colour were the same; they are told apart now. `inherit` keeps the tag on whatever colour the
   block was given, in either theme. */
.wp-block-post-terms.has-forest-color a,
.single-post__niche a {
	color: inherit;
	text-decoration: none;
}
.single-post__niche a:hover,
.wp-block-post-terms.has-forest-color a:hover {
	color: var(--wp--preset--color--accent);
}
.moodboard-card__body .wp-block-post-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.moodboard-card__body .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent);
}

/* Desktop-only lift — feels like peeling a pinned photo off the board */
@media (hover: hover) and (min-width: 782px) {
	.moodboard-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 14px 30px -12px rgba(var(--md-shadow-rgb), 0.28);
	}
	.moodboard-card:hover .moodboard-card__image img {
		transform: scale(1.03);
	}
}

/* ---------------------------------------------------------------------------
   Header search (compact, icon-only)
--------------------------------------------------------------------------- */
.header-right {
	gap: var(--wp--preset--spacing--40);
}
.header-search .wp-block-search__button {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--stone);
	border-radius: 4px;
	padding: 0.4rem 0.55rem;
}
.header-search .wp-block-search__button:hover {
	color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--clay);
}
.header-search .wp-block-search__button svg { fill: currentColor; }

/* ---------------------------------------------------------------------------
   Breadcrumbs
--------------------------------------------------------------------------- */
.breadcrumbs {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--muted);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}
.breadcrumbs a { color: var(--wp--preset--color--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--wp--preset--color--accent); }
.breadcrumbs__sep { color: var(--wp--preset--color--clay); }
.breadcrumbs__current { color: var(--wp--preset--color--ink); }

/* ---------------------------------------------------------------------------
   Byline (brand avatar + name) and the "Updated" date
--------------------------------------------------------------------------- */
.byline { align-items: center; }
.byline__avatar { margin: 0; }
.byline__avatar img {
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--stone);
	display: block;
}
.byline__name { margin: 0; color: var(--wp--preset--color--ink); }
.single-post__updated::before {
	content: "Updated ";
}
/* subtle dot separators between meta items */
.single-post__meta > .wp-block-post-date::before,
.single-post__meta > .byline + .wp-block-post-date::before {
	content: "";
}

/* ---------------------------------------------------------------------------
   Quick Answer callout
--------------------------------------------------------------------------- */
.quick-answer {
	border-left: 3px solid var(--wp--preset--color--accent);
	box-shadow: 0 10px 24px -18px rgba(var(--md-shadow-rgb), 0.3);
}
.quick-answer__label { margin: 0; }

/* ---------------------------------------------------------------------------
   Shop this look
--------------------------------------------------------------------------- */
.shop-look__title { margin: 0; }
.product-card { overflow: hidden; transition: transform 0.22s ease, box-shadow 0.22s ease; }
.product-card__img { margin: 0; }
.product-card__img img { width: 100%; height: auto; display: block; background: var(--wp--preset--color--base); }
.product-card__name { margin: var(--wp--preset--spacing--30) 0 0.25rem; }
.product-card__link { margin: 0; }
.product-card__link a { text-decoration: none; }
@media (hover: hover) and (min-width: 782px) {
	.product-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -16px rgba(var(--md-shadow-rgb), 0.28); }
}

/* ---------------------------------------------------------------------------
   Newsletter (inline, non-intrusive)
--------------------------------------------------------------------------- */
.newsletter__form {
	display: flex;
	gap: 0.5rem;
	max-width: 460px;
	margin: var(--wp--preset--spacing--30) auto 0;
	flex-wrap: wrap;
}
.newsletter__input {
	flex: 1 1 220px;
	min-width: 0;
	padding: 0.7rem 0.9rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--stone);
	border-radius: 4px;
}
.newsletter__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--forest);
	outline-offset: 1px;
}
.newsletter__button {
	padding: 0.7rem 1.4rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--surface);
	background: var(--wp--preset--color--accent);
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.2s ease;
}
.newsletter__button:hover { background: var(--wp--preset--color--forest); }

/* ---------------------------------------------------------------------------
   Comments
--------------------------------------------------------------------------- */
.single-post__comments { max-width: 720px; }
.single-post__comments .wp-block-comment-author-name a { color: var(--wp--preset--color--ink); text-decoration: none; }
.single-post__comments .wp-block-comment-content { font-size: var(--wp--preset--font-size--small); line-height: 1.6; }
.single-post__comments .comment-form input[type="text"],
.single-post__comments .comment-form input[type="email"],
.single-post__comments .comment-form input[type="url"],
.single-post__comments .comment-form textarea {
	border: 1px solid var(--wp--preset--color--stone);
	border-radius: 4px;
	background: var(--wp--preset--color--surface);
	padding: 0.6rem 0.8rem;
	font-family: var(--wp--preset--font-family--body);
}

/* ---------------------------------------------------------------------------
   Pinterest "Save" hover button on images
--------------------------------------------------------------------------- */
/* A small round icon, not a text pill.

   Scoped through .has-pinit and with an explicit height, because core ships
   `.wp-block-post-featured-image a { display: block; height: 100% }` at a
   higher specificity than a bare class. That rule was winning: the button
   rendered as a full-height block, the icon and label stacked, and it came
   out 71x285px — a green column down a third of the card. */
.has-pinit { position: relative; }
.has-pinit > .pinit-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	color: #E60023;                      /* Pinterest red — the recognisable cue */
	background: rgba(255, 255, 255, 0.94);
	border-radius: 50%;
	text-decoration: none;
	box-shadow: 0 4px 12px -4px rgba(var(--md-shadow-rgb), 0.45);
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, color 0.2s ease;
	pointer-events: none;
}
.pinit-btn__icon {
	width: 1.15rem;
	height: 1.15rem;
	display: block;
	fill: currentColor;
}
.has-pinit:hover > .pinit-btn,
.has-pinit > .pinit-btn:focus-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.has-pinit > .pinit-btn:hover {
	background: #E60023;
	color: #FFFFFF;
}

/* ---------------------------------------------------------------------------
   Bookmarks ("Saved") — nav badge, card save button, saved state, Saved page
--------------------------------------------------------------------------- */
/* Nav "Saved" item + live count badge.

   The label used to carry a literal heart character. A text glyph renders at
   whatever weight and baseline the font happens to give it — here it sat
   heavy and slightly low, which is what made it look tacked on. This is a
   stroked bookmark drawn at the right weight instead, masked so it inherits
   the link colour and changes with it on hover. */
.nav-saved .wp-block-navigation-item__label { white-space: nowrap; }
/* On the anchor only. Targeting the inner label as well drew the heart
   twice, once on each. */
.nav-saved > a::before {
	content: "";
	display: inline-block;
	width: 0.95em;
	height: 0.95em;
	margin-right: 0.4em;
	vertical-align: -0.13em;
	background-color: currentColor;
	-webkit-mask-image: var(--md-save-icon);
	mask-image: var(--md-save-icon);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.nav-saved a,
.wp-block-navigation-item.nav-saved > a { position: relative; }
.saved-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.15rem;
	height: 1.15rem;
	margin-left: 0.35rem;
	padding: 0 0.35rem;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
	vertical-align: middle;
}

/* Save button on cards (top-left; Pin-It lives top-right) */
.has-savebtn { position: relative; }
.save-btn {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.35rem 0.6rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--ink);
	background: var(--md-savebtn-bg);
	border: 1px solid var(--wp--preset--color--stone);
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 4px 12px -6px rgba(var(--md-shadow-rgb), 0.4);
	transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.save-btn:hover { transform: translateY(-1px); border-color: var(--wp--preset--color--clay); }
.save-btn.is-saved {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--accent);
}
.save-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--forest);
	outline-offset: 2px;
}

/* Single-post "Save this idea" saved state */
.single-post__pin a.is-saved {
	background: var(--wp--preset--color--forest);
}

/* Saved page listing */
.saved-app .moodboard-grid { column-count: 3; column-gap: 1.5rem; }
@media (max-width: 900px) { .saved-app .moodboard-grid { column-count: 2; } }
@media (max-width: 560px) { .saved-app .moodboard-grid { column-count: 1; } }
.saved-card__niche { color: var(--wp--preset--color--forest); }
.saved-remove {
	margin-top: 0.75rem;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--meta);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--muted);
}
.saved-remove:hover { color: var(--wp--preset--color--accent); }
.saved-empty {
	text-align: center;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	border: 1px dashed var(--wp--preset--color--clay);
	border-radius: 4px;
	background: var(--md-fill-fainter);
}
.saved-empty__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	margin: 0 0 0.5rem;
}
.saved-empty__text {
	color: var(--wp--preset--color--muted);
	max-width: 42ch;
	margin: 0 auto var(--wp--preset--spacing--40);
	line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   Single post
--------------------------------------------------------------------------- */
.single-post__meta .wp-block-post-date,
.single-post__meta .wp-block-post-author-name {
	position: relative;
}
.single-post__meta .wp-block-post-author-name::before {
	content: "·";
	margin-right: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--clay);
}
/* Cap the pinnable hero so a tall 2:3 image doesn't swallow the viewport */
.single-post__hero img {
	width: 100%;
	height: auto;
	max-height: 68vh;
	object-fit: cover;
	display: block;
	border-radius: 4px;
}
.single-post .wp-block-post-content {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.75;
}
.single-post .wp-block-post-content > * {
	margin-top: var(--wp--preset--spacing--40);
}
.single-post .wp-block-post-content > h2 {
	margin-top: var(--wp--preset--spacing--60);
}

/* ---------------------------------------------------------------------------
   Footer — a dark band in BOTH themes.
   The block markup paints it with the `ink` / `base` / `stone` / `clay`
   presets. It is a deliberate dark band on a light page, so its colours are
   pinned to their own tokens rather than following the palette. The preset classes
   WordPress emits carry !important, hence the doubled-class specificity.
--------------------------------------------------------------------------- */
.wp-block-group.site-footer {
	background-color: var(--md-footer-bg) !important;
}
.site-footer,
.site-footer .has-base-color,
.site-footer .wp-block-site-title a {
	color: var(--md-footer-text) !important;
}
.site-footer .has-stone-color {
	color: var(--md-footer-nav) !important;
}
.site-footer .has-clay-color {
	color: var(--md-footer-meta) !important;
}
/* !important because core ships
   `.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content
    { color: inherit }` — a deliberately doubled class, and more specific than
   any reasonable selector here. Without this the links silently inherit the
   footer's text colour instead of the softer tone this rule asks for, which
   is what they did originally. Hover is scoped a notch tighter
   again so it still wins against the line above. */
.site-footer .footer-nav a {
	color: var(--md-footer-nav) !important;
	text-decoration: none;
}
.site-footer .footer-nav a:hover,
.site-footer .wp-block-site-title a:hover {
	color: var(--wp--preset--color--accent) !important;
}

/* ---------------------------------------------------------------------------
   Search field
--------------------------------------------------------------------------- */
.wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--stone);
	border-radius: 4px;
	background: var(--wp--preset--color--surface);
	overflow: hidden;
}
.wp-block-search .wp-block-search__input {
	border: 0;
	background: transparent;
	font-family: var(--wp--preset--font-family--body);
}
.wp-block-search .wp-block-search__button {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
	border: 0;
	font-family: var(--wp--preset--font-family--display);
}

/* ---------------------------------------------------------------------------
   Ad slots — reserved fixed height so real ad code causes zero layout shift.
   Neutral, clearly-labelled placeholders until a network is approved (spec §5).
--------------------------------------------------------------------------- */
.ad-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 280px;              /* reserves space for a 300x250 + padding */
	margin-block: var(--wp--preset--spacing--50);
	background-color: var(--md-fill-faint);
	border: 1px dashed var(--wp--preset--color--clay);
	border-radius: 4px;
}
.ad-slot--banner {
	min-height: 120px;              /* leaderboard-ish */
}

/* Sticky left/right skyscraper rails — global, every page.

   Each rail is centred in the gutter beside the 1200px content column rather
   than pinned a fixed distance from the viewport edge, so the clearance grows
   with the screen and the rail can never creep over the text. (Pinned at
   left:24px with a 160px unit, a 1560px viewport left a 180px gutter and the
   rail overlapped the column by 4px — the old breakpoint was a hair too low
   for the size it was showing.)

   Two standard IAB widths, because ad markup is a fixed size and cannot be
   fluid: a 120x600 skyscraper down to 1200px, stepping up to 160x600 once the
   gutter is comfortable. Below 1200px the screen is narrow enough that the
   in-flow slots should carry the page on their own. */
/* Reserve a gutter wide enough for a rail by capping the content column.
   theme.json asks for 1200px, which on a 1280–1500px laptop leaves nothing
   either side — the reason the rails only appeared when the page was zoomed
   out. `min()` means this costs nothing from 1520px up, where a full 1200px
   column already leaves room; below that the column gives back exactly as
   much as the rails need and no more. Only alignwide blocks are affected;
   the 720px reading column is untouched at every width.

   WordPress drives every alignwide block from this one custom property
   (`.is-layout-constrained > .alignwide { max-width: … }`), so overriding it
   here is enough — no per-block rules and no template changes. */
@media (min-width: 1200px) {
	:root {
		--md-col-w: min(1200px, calc(100vw - 320px));
		--wp--style--global--wide-size: var(--md-col-w);
	}
}

.ad-rail { display: none; }

/* Held back while the full-bleed hero is on screen — see assets/js/ad-rails.js.
   Not `display:none`, so the fade is smooth and the reserved space never
   causes a reflow. */
.ad-rail--behind-hero {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}
.ad-rail {
	transition: opacity 0.25s ease, visibility 0.25s ease;
}
@media (min-width: 1200px) {
	.ad-rail {
		display: block;
		position: fixed;
		top: 50%;
		transform: translateY(-50%);
		z-index: 50;

		--md-rail-w: 120px;                             /* 120x600 skyscraper */
		/* Half the gutter, less half the rail = centred in the gutter. */
		--md-rail-inset: calc((100vw - var(--md-col-w)) / 4 - var(--md-rail-w) / 2);

		width: var(--md-rail-w);
	}
	.ad-rail--left { left: var(--md-rail-inset); }
	.ad-rail--right { right: var(--md-rail-inset); }
	.ad-rail .ad-slot--rail {
		width: var(--md-rail-w);
		min-height: 600px;
		margin: 0;
		flex-direction: column;
	}
	/* "ADVERTISEMENT" at the default size and tracking is ~121px wide, which
	   spills out of a 120px rail. Tightened just enough to sit inside the
	   narrow unit, and left at that size for the wide one so the two rails
	   look like the same component. */
	.ad-rail .ad-slot--rail .ad-slot__label {
		font-size: 0.6875rem;
		letter-spacing: 0.08em;
		text-align: center;
	}
}
/* Once the gutter can hold it comfortably, step up to the wide skyscraper.
   The inset recalculates from --md-rail-w on its own, so the rails stay
   centred in the gutter and no position needs restating here. */
@media (min-width: 1620px) {
	.ad-rail {
		--md-rail-w: 160px;             /* 160x600 wide skyscraper */
	}
}
.ad-slot__label {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--meta);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--muted);
}
@media (max-width: 560px) {
	.ad-slot--banner {
		min-height: 100px;
	}
}


/* Ease the swap between themes — but only the surfaces, never text, so
   reading never smears. Suppressed under reduced-motion below.
   .moodboard-card is deliberately absent: it already declares a `transition`
   shorthand for its hover lift, and repeating the shorthand here would
   replace it. Its colour transition is folded into that declaration instead. */
body,
.site-header,
.wp-block-group.site-footer {
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* ---------------------------------------------------------------------------
   Accessibility — visible keyboard focus, and honour reduced motion (spec §2.4)
--------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.wp-element-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--forest);
	outline-offset: 2px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	.moodboard-card,
	.moodboard-card__image img {
		transition: none !important;
		animation: none !important;
	}
	.moodboard-card:hover {
		transform: none;
	}
}