/* ==========================================================================
   Manchester Garden Club — Main Stylesheet
   Design system: confident mid-tone garden green, white/ivory contrast, gold accent.
   Poppins (bold display sans) + Inter (body sans).
   ========================================================================== */

/* ---------- 1. Design Tokens ---------- */
:root {
	/* Colors */
	--mgc-forest: #3F5C42;
	--mgc-forest-dark: #2C4530;
	--mgc-forest-light: #547256;
	--mgc-sage: #8FA888;
	--mgc-sage-light: #C4D3BE;
	--mgc-ivory: #FFFFFF;
	--mgc-ivory-dark: #F5F5F5;
	--mgc-beige: #EFE7D6;
	--mgc-gold: #C9A24B;
	--mgc-gold-light: #E3C978;
	--mgc-ink: #24291F;
	--mgc-white: #FFFFFF;

	--mgc-text-on-light: var(--mgc-ink);
	--mgc-text-muted: #5B6459;
	--mgc-text-on-dark: var(--mgc-ivory);
	--mgc-text-on-dark-muted: rgba(255, 255, 255, 0.82);

	/* Typography */
	--font-display: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Spacing */
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 1.75rem;
	--space-lg: 3rem;
	--space-xl: 5rem;
	--space-2xl: 8rem;

	/* Shape */
	--radius-sm: 10px;
	--radius-md: 20px;
	--radius-lg: 32px;
	--radius-pill: 999px;

	/* Shadow */
	--shadow-soft: 0 20px 60px -20px rgba(27, 59, 47, 0.25);
	--shadow-card: 0 12px 32px -12px rgba(27, 59, 47, 0.18);
	--shadow-header: 0 10px 30px -12px rgba(27, 59, 47, 0.15);

	/* Motion */
	--ease-organic: cubic-bezier(0.22, 1, 0.36, 1);
	--dur-fast: 0.3s;
	--dur-med: 0.6s;
	--dur-slow: 1s;

	--container-width: 1280px;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* overflow-x:hidden needs to be on html, not just body — full-bleed elements
   (100vw tricks like .mini-timeline-wrap) can overflow at the document root
   even when body itself clips correctly, producing a stray horizontal
   scrollbar/gap on the right edge if html doesn't also clip it.
   Deliberately NOT setting height:100% on html/body: once overflow-x is
   non-visible on both, the CSS spec auto-computes their overflow-y to
   "auto" too — with an explicit 100% height that turns body into its own
   independently-scrollable box (content taller than the viewport), so the
   page shows two nested scrollbars instead of one. Leaving height auto
   means body's box always matches its content height, so there's nothing
   for that auto-computed overflow-y to actually scroll. */
html { scroll-behavior: auto; overflow-x: hidden; }
body {
	font-family: var(--font-body);
	color: var(--mgc-text-on-light);
	background: var(--mgc-white);
	line-height: 1.6;
	font-size: 1.0625rem;
	-webkit-font-smoothing: antialiased;
	/* No overflow-x here (html already clips full-bleed overflow) -- Safari
	   breaks position:sticky entirely for any descendant when body itself
	   has an explicit overflow value, which is what was making the sticky
	   nav fail there. */
}
img, picture, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link {
	position: fixed; top: -60px; left: 1rem; z-index: 10000;
	background: var(--mgc-forest); color: var(--mgc-ivory);
	padding: 0.75rem 1.25rem; border-radius: var(--radius-sm);
	transition: top var(--dur-fast) var(--ease-organic);
}
.skip-link:focus { top: 1rem; width: auto; height: auto; clip: auto; }

:focus-visible { outline: 3px solid var(--mgc-gold); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- 3. Layout Utilities ---------- */
.container { max-width: var(--container-width); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
.section { padding-block: var(--space-2xl); position: relative; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-lg); }
.section-head--center { justify-content: center; text-align: center; }
.section-cta { margin-top: var(--space-lg); text-align: center; }

.eyebrow {
	font-family: var(--font-body); font-weight: 600; font-size: 0.8rem;
	letter-spacing: 0.14em; text-transform: uppercase; color: var(--mgc-gold);
	margin-bottom: var(--space-sm); display: inline-block;
}
.eyebrow--light { color: var(--mgc-gold-light); }

.section-title { font-size: clamp(1.7rem, 2.4vw, 2.35rem); max-width: 42ch; margin-bottom: var(--space-md); color: var(--mgc-forest); }
.section-title--light { color: var(--mgc-ivory); }
.section-lede { font-size: 1.1rem; max-width: 62ch; color: var(--mgc-text-muted); margin-bottom: var(--space-md); }
.section-lede--light { color: var(--mgc-text-on-dark-muted); }

.card-grid { display: grid; gap: var(--space-md); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }
.card-grid--muted { opacity: 0.85; }
@media (max-width: 1000px) {
	.card-grid--3, .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.card-grid--3, .card-grid--4 { grid-template-columns: 1fr; }
}

.tag {
	display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
	text-transform: uppercase; background: var(--mgc-sage-light); color: var(--mgc-forest-dark);
	padding: 0.25rem 0.65rem; border-radius: var(--radius-pill); margin: 0.15rem 0.25rem 0 0;
}

/* ---------- 4. Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700;
	font-size: 1.05rem; padding: 1.15rem 2.35rem; border-radius: var(--radius-pill);
	transition: transform var(--dur-fast) var(--ease-organic), box-shadow var(--dur-fast) var(--ease-organic), background var(--dur-fast) var(--ease-organic), color var(--dur-fast) var(--ease-organic);
	white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn--pill { }
.btn--forest { background: var(--mgc-forest); color: var(--mgc-ivory); }
.btn--forest:hover { background: var(--mgc-forest-light); box-shadow: var(--shadow-card); }
.btn--gold { background: var(--mgc-gold); color: var(--mgc-forest-dark); }
.btn--gold:hover { background: var(--mgc-gold-light); box-shadow: var(--shadow-card); }
.btn--white { background: var(--mgc-white); color: var(--mgc-forest); }
.btn--white:hover { background: var(--mgc-ivory); box-shadow: var(--shadow-card); }
.btn--outline { border: 1.5px solid var(--mgc-forest); color: var(--mgc-forest); }
.btn--outline:hover { background: var(--mgc-forest); color: var(--mgc-ivory); }
.btn--ghost-light { border: 1.5px solid rgba(255, 255, 255, 0.6); color: var(--mgc-ivory); }
.btn--ghost-light:hover { background: rgba(255, 255, 255, 0.15); }
.btn--text { padding: 0; background: none; color: var(--mgc-forest); border-radius: 0; border-bottom: 1.5px solid transparent; }
.btn--text:hover { border-bottom-color: var(--mgc-gold); transform: none; }
.btn--block { width: 100%; justify-content: center; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn[disabled]:hover { transform: none; }

/* ---------- 5. Preloader ---------- */
.preloader {
	position: fixed; inset: 0; z-index: 9999; background: var(--mgc-forest);
	display: flex; align-items: center; justify-content: center;
}
.preloader__inner { position: relative; display: grid; place-items: center; }
.preloader__ring { position: absolute; }
.preloader__ring-track, .preloader__ring-draw { fill: none; stroke-width: 1.5; }
.preloader__ring-track { stroke: rgba(255, 255, 255, 0.15); }
.preloader__ring-draw { stroke: var(--mgc-gold); stroke-linecap: round; stroke-dasharray: 578; stroke-dashoffset: 578; transform: rotate(-90deg); transform-origin: center; }
.preloader__logo { width: 96px; height: 96px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0; }
.preloader__leaf { position: absolute; width: 8px; height: 8px; border-radius: 50% 0; background: var(--mgc-sage); opacity: 0; }
.preloader__leaf--1 { top: 10%; left: 15%; }
.preloader__leaf--2 { top: 70%; left: 80%; }
.preloader__leaf--3 { top: 80%; left: 20%; }
body.mgc-loaded .preloader { pointer-events: none; }

/* ---------- 6. Header ---------- */
.site-header-group { position: sticky; top: 0; z-index: 900; }

.site-utility-bar {
	background: var(--mgc-forest-dark); color: var(--mgc-text-on-dark-muted);
	overflow: hidden; max-height: 40px; transition: max-height var(--dur-med) var(--ease-organic), opacity var(--dur-med) var(--ease-organic), padding var(--dur-med) var(--ease-organic);
}
.site-header-group.is-scrolled .site-utility-bar { max-height: 0; opacity: 0; }
.site-utility-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: 0.5rem; font-size: 0.9rem; }
.site-utility-bar__info { display: flex; gap: var(--space-md); }
.site-utility-bar__info a:hover { color: var(--mgc-gold-light); }
.site-utility-bar__social { display: flex; gap: 0.9rem; }
.site-utility-bar__social a { display: flex; color: var(--mgc-text-on-dark-muted); }
.site-utility-bar__social a:hover { color: var(--mgc-gold-light); }

.site-header {
	position: relative;
	padding-block: 0.4rem; transition: background var(--dur-med) var(--ease-organic), box-shadow var(--dur-med) var(--ease-organic), padding var(--dur-med) var(--ease-organic);
}
.site-header { background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(14px); box-shadow: var(--shadow-header); }
.site-header-group.is-scrolled .site-header {
	background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	box-shadow: var(--shadow-header); padding-block: 0.3rem;
}

.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.site-header__logo { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.site-header__logo img { height: 64px; width: auto; object-fit: contain; transition: height var(--dur-med) var(--ease-organic); }
/* Client asked to remove the shrink-on-scroll behavior — logo now stays a constant size. */

.site-nav { display: flex; min-width: 0; }
.nav-menu { display: flex; gap: 1rem; }
.nav-menu a {
	font-weight: 600; font-size: 0.95rem; color: var(--mgc-forest); position: relative; padding-block: 0.25rem; white-space: nowrap;
}
.nav-menu a::after {
	content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--mgc-gold);
	transition: width var(--dur-fast) var(--ease-organic);
}
.nav-menu a:hover::after { width: 100%; }
.nav-menu li.current-menu-item > a,
.nav-menu li.current_page_item > a,
.nav-menu li.current-menu-parent > a,
.nav-menu li.current-menu-ancestor > a {
	background: var(--mgc-beige); color: var(--mgc-forest-dark);
	padding: 0.4rem 0.9rem; border-radius: var(--radius-pill);
}
.nav-menu li.current-menu-item > a::after,
.nav-menu li.current_page_item > a::after,
.nav-menu li.current-menu-parent > a::after,
.nav-menu li.current-menu-ancestor > a::after { display: none; }

.site-header__actions { display: flex; align-items: center; gap: 1rem; }
.site-header__cta { padding: 0.65rem 1.4rem; font-size: 0.85rem; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 26px; }
.nav-toggle__bar { width: 100%; height: 2px; background: var(--mgc-forest); transition: transform var(--dur-fast), opacity var(--dur-fast); }

.site-nav__logo-link { display: none; }
@media (max-width: 900px) {
	.nav-toggle { display: flex; }
	/* backdrop-filter on an ancestor creates a new containing block for
	   position:fixed descendants, same as transform does -- .site-header's
	   blur was silently constraining the mobile nav overlay below to the
	   header's own thin box instead of the full viewport. Dropping the blur
	   only on mobile (where the nav needs a real fixed overlay) fixes it;
	   desktop keeps the frosted look since .site-nav isn't fixed there. */
	.site-header, .site-header-group.is-scrolled .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
	/* Toggle button needs to stay above the open overlay (same stacking
	   context as .site-nav, via .site-header-group) so it's still tappable
	   as a close button, and switch to light bars once open since dark-green
	   bars on the dark-green overlay would be invisible. */
	.nav-toggle { position: relative; z-index: 891; }
	.nav-toggle.is-active .nav-toggle__bar { background: var(--mgc-ivory); }
	.nav-toggle.is-active .nav-toggle__bar:nth-child(2) { transform: translateY(7px) rotate(45deg); }
	.nav-toggle.is-active .nav-toggle__bar:nth-child(3) { opacity: 0; }
	.nav-toggle.is-active .nav-toggle__bar:nth-child(4) { transform: translateY(-7px) rotate(-45deg); }
	.site-nav__logo-link { display: block; margin-bottom: var(--space-lg); }
	.site-nav__logo { display: block; height: 84px; width: auto; margin-inline: auto; filter: brightness(0) invert(1); }
	/* Fade instead of slide. True display:none can't be CSS-transitioned, so
	   opacity handles the fade and visibility:hidden (delayed until the fade
	   finishes closing) makes it non-interactive/skipped by screen readers
	   and tab order when closed -- the practical equivalent of display:none. */
	.site-nav {
		position: fixed; inset: 0; top: 0; background: var(--mgc-forest);
		flex-direction: column; align-items: center; justify-content: center;
		opacity: 0; visibility: hidden;
		transition: opacity var(--dur-med) var(--ease-organic), visibility 0s linear var(--dur-med);
		z-index: 890;
	}
	.site-nav.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
	/* Scoped to .site-nav .nav-menu (not the bare .nav-menu class) --
	   .nav-menu--footer shares the .nav-menu class, and this was leaking
	   into it (centering the footer links, etc). */
	.site-nav .nav-menu { flex-direction: column; text-align: center; gap: var(--space-lg); }
	.site-nav .nav-menu a { color: var(--mgc-ivory); font-family: var(--font-display); font-size: 1.3rem; }
	.site-nav .nav-menu li.current-menu-item > a, .site-nav .nav-menu li.current_page_item > a, .site-nav .nav-menu li.current-menu-parent > a, .site-nav .nav-menu li.current-menu-ancestor > a { color: var(--mgc-forest-dark); }
	.site-header__cta { display: none; }
	/* Client asked to drop the email from the mobile utility bar and replace it with a floating mail button (added via a site-wide injection, styled below). */
	.site-utility-bar__info li:nth-child(2) { display: none; }
}

.mgc-floating-mail {
	display: none;
}
@media (max-width: 900px) {
	.mgc-floating-mail {
		display: flex; align-items: center; justify-content: center;
		position: fixed; left: var(--space-md); bottom: var(--space-md); z-index: 850;
		width: 52px; height: 52px; border-radius: 50%;
		background: var(--mgc-forest); color: var(--mgc-ivory);
		box-shadow: var(--shadow-soft);
	}
	.mgc-floating-mail svg { width: 24px; height: 24px; }
}

/* ---------- 7. Hero (Home) ---------- */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding-block: 50px; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); filter: saturate(0.85) brightness(0.9); }
.hero__bg--fallback { background: radial-gradient(circle at 30% 20%, var(--mgc-forest-light), var(--mgc-forest) 60%, var(--mgc-forest-dark)); }
/* Tints any real photo toward the brand forest green — mix-blend-mode:color
   takes this layer's hue/saturation and applies it to the photo's existing
   luminosity, so detail and contrast survive but the palette reads as "ours"
   instead of a generic stock photo dropped on top of the design. */
.hero__color-grade { position: absolute; inset: 0; background: var(--mgc-forest); mix-blend-mode: color; opacity: 0.65; }
.hero__gradient { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,39,30,0.72) 0%, rgba(18,39,30,0.4) 45%, rgba(18,39,30,0.88) 100%); }
.hero__leaf-layer { position: absolute; bottom: -5%; right: -5%; width: 45%; opacity: 0.9; }
/* Client asked to remove the small decorative leaf dots from the homepage hero. */
.hero__leaf-particle { display: none; }
.hero__leaf-particle--1 { top: 20%; left: 12%; }
.hero__leaf-particle--2 { top: 55%; left: 85%; }
.hero__leaf-particle--3 { top: 75%; left: 30%; }

/* .hero is a flex container (for vertical centering), so .hero__content —
   which reuses .container's max-width + margin-inline:auto — must be told
   to fill the flex line's full width. Otherwise a flex item without an
   explicit width shrinks to its content size before the auto-margins ever
   apply, which centers a narrower box than every other section on the page
   and shifts this text out of alignment with the rest of the layout. */
.hero__content { position: relative; z-index: 1; width: 100%; color: var(--mgc-ivory); }
.hero__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-xl); align-items: center; }
.hero__tag {
	display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--mgc-ivory); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: var(--radius-pill);
	padding: 0.5rem 1.1rem; margin-bottom: var(--space-md);
}
.hero__tag--forest { color: var(--mgc-forest); border-color: var(--mgc-sage-light); background: var(--mgc-sage-light); }
.hero__headline { font-size: clamp(1.7rem, 3vw, 2.6rem); max-width: 20ch; color: var(--mgc-ivory); }
.hero__headline .word { display: inline-block; }
.hero__subtext { font-size: 1.2rem; max-width: 52ch; margin-block: var(--space-md); color: var(--mgc-text-on-dark-muted); }
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero__events {
	background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
	border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--radius-lg); padding: 1.5rem;
	box-shadow: var(--shadow-soft);
}
/* Replaces .hero__events -- client asked for a photo in that spot instead of the events list. */
.hero__featured-image {
	border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft);
	border: 1px solid rgba(255, 255, 255, 0.22); aspect-ratio: 4 / 3;
}
.hero__featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__events-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.hero__events-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--mgc-ivory); }
.hero__events-link { font-size: 0.8rem; font-weight: 600; color: var(--mgc-gold-light); }
.hero__events-link:hover { text-decoration: underline; }
.hero__events-list { display: flex; flex-direction: column; gap: 0.6rem; }
.hero__events-item {
	display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem; border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.06); transition: background var(--dur-fast) var(--ease-organic);
}
.hero__events-item:hover { background: rgba(255, 255, 255, 0.16); }
.hero__events-date {
	display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0;
	width: 52px; height: 52px; border-radius: var(--radius-sm); background: var(--mgc-gold); color: var(--mgc-forest-dark);
}
.hero__events-date-day { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.1; }
.hero__events-date-month { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em; }
.hero__events-info { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.hero__events-item-title {
	font-size: 0.9rem; font-weight: 600; color: var(--mgc-ivory); max-width: 100%;
}
.hero__events-item-time { font-size: 0.76rem; color: var(--mgc-text-on-dark-muted); }
@media (max-width: 900px) {
	.hero__grid { grid-template-columns: 1fr; }
	.hero__events { margin-top: var(--space-md); }
}

/* Client asked to remove the pulsing gold scroll-down indicator and the "Upcoming Events" button next to "Explore Our Gardens" — the events list/bar already steer people to the full list. */
.hero__scroll-cue { display: none; }
.hero__actions .btn--ghost-light { display: none; }
.hero__scroll-cue span { display: block; width: 1.5px; height: 50px; background: linear-gradient(var(--mgc-gold), transparent); animation: mgc-scroll-cue 2s ease-in-out infinite; }
@keyframes mgc-scroll-cue { 0%, 100% { transform: scaleY(0.4); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ---------- 8. Upcoming Events Bar ---------- */
.upcoming-bar { background: var(--mgc-white); padding-block: var(--space-lg); border-bottom: 1px solid var(--mgc-beige); position: relative; z-index: 2; }
.upcoming-bar__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-md); flex-wrap: wrap; gap: 1rem; }
.upcoming-bar__title { font-size: 1.5rem; color: var(--mgc-forest); }
.upcoming-bar__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.upcoming-bar__empty { color: var(--mgc-text-muted); font-style: italic; }
@media (max-width: 1100px) { .upcoming-bar__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .upcoming-bar__grid { grid-template-columns: 1fr; } }

/* ---------- Sticky bottom "Upcoming Events" bar ---------- */
.sticky-events-bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
	background: var(--mgc-forest); box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.18);
	transform: translateY(100%); opacity: 0; pointer-events: none;
	transition: transform var(--dur-med) var(--ease-organic), opacity var(--dur-med) var(--ease-organic);
}
.sticky-events-bar.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.sticky-events-bar__inner {
	display: flex; align-items: center; gap: 1.25rem; padding-block: 0.7rem;
	max-width: none; margin-inline: 0; padding-inline: clamp(1.25rem, 4vw, 3rem);
}
.sticky-events-bar__viewport {
	flex: 1; overflow: hidden; min-width: 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.sticky-events-bar__track {
	display: flex; align-items: center; gap: 2.5rem; width: max-content;
	animation: sticky-events-marquee 26s linear infinite;
}
.sticky-events-bar__viewport:hover .sticky-events-bar__track { animation-play-state: paused; }
.sticky-events-bar__item { position: relative; display: flex; align-items: center; gap: 0.6rem; white-space: nowrap; color: var(--mgc-ivory); transition: color var(--dur-fast) var(--ease-organic); }
.sticky-events-bar__item:hover { color: var(--mgc-gold-light); z-index: 5; }
.sticky-events-bar__thumb { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.sticky-events-bar__date { font-weight: 700; font-size: 0.85rem; color: var(--mgc-gold-light); }
.sticky-events-bar__title { font-size: 0.9rem; }
.sticky-events-bar__cta { flex-shrink: 0; padding: 0.5rem 1.1rem; font-size: 0.82rem; }

/* Same visual pattern as .mgc-calendar__event-tooltip, but this one is a
   single shared node positioned via JS (see main.js) using position:
   fixed and inline left/bottom — it can't be absolutely positioned inside
   the item like the calendar's version, because .sticky-events-bar__viewport
   needs overflow: hidden for the marquee to clip horizontally, which would
   clip a nested tooltip vertically too. */
.sticky-events-bar__tooltip {
	position: fixed; transform: translateX(-50%) translateY(4px);
	width: 220px; background: var(--mgc-forest-dark); border-radius: var(--radius-md); padding: 0.6rem;
	font-size: 0.78rem; line-height: 1.4; white-space: normal; text-align: left; box-shadow: var(--shadow-soft);
	opacity: 0; visibility: hidden; pointer-events: none; z-index: 70;
	transition: opacity var(--dur-fast) var(--ease-organic), transform var(--dur-fast) var(--ease-organic);
}
.sticky-events-bar__tooltip::after {
	content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
	border: 6px solid transparent; border-top-color: var(--mgc-forest-dark);
}
.sticky-events-bar__tooltip-img { display: block; width: 100%; height: 110px; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 0.55rem; background: var(--mgc-forest); }
.sticky-events-bar__tooltip-body { padding-inline: 0.15rem; }
.sticky-events-bar__tooltip strong { display: block; font-family: var(--font-display); font-weight: 700; color: var(--mgc-ivory); margin-bottom: 0.25rem; }
.sticky-events-bar__tooltip span { display: block; color: rgba(255, 255, 255, 0.75); font-size: 0.72rem; margin-top: 0.1rem; }
.sticky-events-bar__tooltip span:empty { display: none; }
.sticky-events-bar__tooltip.is-visible { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
@keyframes sticky-events-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (max-width: 780px) { .sticky-events-bar__cta { display: none; } }
@media (prefers-reduced-motion: reduce) { .sticky-events-bar__track { animation: none; } }

.event-card { background: var(--mgc-white); border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow: hidden; transition: transform var(--dur-fast) var(--ease-organic), box-shadow var(--dur-fast) var(--ease-organic); height: 100%; }
.event-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.event-card__link { display: flex; flex-direction: column; height: 100%; }

.event-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; display: block; }
.event-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-organic); }
.event-card:hover .event-card__media img { transform: scale(1.06); }
.event-card__media-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--mgc-sage-light), var(--mgc-beige)); }

.event-card__date {
	position: absolute; top: 0.75rem; left: 0.75rem; flex-shrink: 0; width: 52px; text-align: center;
	background: var(--mgc-white); border-radius: var(--radius-sm); padding: 0.4rem 0; box-shadow: var(--shadow-card);
}
.event-card__date-month { display: block; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em; color: var(--mgc-gold); }
.event-card__date-day { display: block; font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--mgc-forest); line-height: 1.1; }

.event-card__badge {
	position: absolute; top: 0.85rem; right: 0.85rem; display: inline-block; font-size: 0.65rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.06em; color: var(--mgc-forest-dark); background: var(--mgc-gold);
	border-radius: var(--radius-pill); padding: 0.3rem 0.7rem;
}

.event-card__body { flex: 1; min-width: 0; padding: 1.1rem 1.25rem 1.25rem; position: relative; }
.event-card__title { font-size: 1.1rem; color: var(--mgc-forest); margin-bottom: 0.35rem; padding-right: 1.75rem; }
.event-card__meta, .event-card__location, .event-card__host { font-size: 0.86rem; color: var(--mgc-text-muted); }
.event-card__arrow {
	position: absolute; bottom: 1.1rem; right: 1.25rem; color: var(--mgc-sage);
	transition: transform var(--dur-fast) var(--ease-organic);
}
.event-card:hover .event-card__arrow { transform: translateX(4px); color: var(--mgc-gold); }

/* ---------- 9. Feature Cards (What We Do / Resources preview) ---------- */
.what-we-do { background: var(--mgc-forest); overflow: hidden; }
.what-we-do__inner { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-lg); align-items: center; }
.what-we-do__copy .section-lede { max-width: 44ch; margin-bottom: var(--space-lg); }
@media (max-width: 900px) { .what-we-do__inner { grid-template-columns: 1fr; } }

.section-title--twotone { color: var(--mgc-ivory); }
.section-title--twotone span { color: rgba(255, 255, 255, 0.45); }

.numbered-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
@media (max-width: 560px) { .numbered-grid { grid-template-columns: 1fr; } }
.numbered-card {
	position: relative; overflow: hidden;
	background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius-md); padding: 1.6rem; transition: transform var(--dur-fast) var(--ease-organic), background var(--dur-fast) var(--ease-organic);
}
.numbered-card:hover { transform: translateY(-4px); }
.numbered-card--highlight { background: var(--mgc-ivory); border-color: transparent; box-shadow: var(--shadow-soft); }
.numbered-card__head { position: relative; z-index: 1; display: flex; align-items: center; margin-bottom: 1rem; }
.numbered-card__icon {
	display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex-shrink: 0;
	border-radius: 50%; background: rgba(255, 255, 255, 0.18); color: var(--mgc-gold);
}
.numbered-card__icon svg { width: 22px; height: 22px; }
.numbered-card--highlight .numbered-card__icon { background: var(--mgc-sage-light); color: var(--mgc-forest); }

/* Large decorative number bleeding off the top-right corner — a quiet
   watermark behind the content, not competing with it (hence z-index:0
   and heavy transparency), cropped cleanly by the card's own overflow:hidden. */
.numbered-card__num {
	position: absolute; z-index: 0; top: -0.5rem; right: 0.4rem;
	font-family: var(--font-display); font-weight: 700; font-size: 5.6rem; line-height: 1; letter-spacing: -0.03em;
	color: rgba(255, 255, 255, 0.07); -webkit-text-stroke: 1px rgba(255, 255, 255, 0.22);
	pointer-events: none; user-select: none;
}
.numbered-card--highlight .numbered-card__num { color: rgba(63, 92, 66, 0.05); -webkit-text-stroke-color: rgba(63, 92, 66, 0.16); }
.numbered-card__title { position: relative; z-index: 1; font-size: 1.05rem; color: var(--mgc-ivory); margin-bottom: 0.4rem; }
.numbered-card--highlight .numbered-card__title { color: var(--mgc-forest); }
.numbered-card__text { position: relative; z-index: 1; color: rgba(255, 255, 255, 0.7); font-size: 0.88rem; }
.numbered-card--highlight .numbered-card__text { color: var(--mgc-text-muted); }
.feature-card {
	background: var(--mgc-white); border-radius: var(--radius-md); padding: var(--space-md);
	box-shadow: var(--shadow-card); transition: transform var(--dur-fast) var(--ease-organic), box-shadow var(--dur-fast) var(--ease-organic);
	height: 100%;
}
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.feature-card__icon {
	display: flex; align-items: center; justify-content: center; width: 48px; height: 48px;
	border-radius: 50%; background: var(--mgc-sage-light); color: var(--mgc-forest); margin-bottom: var(--space-sm);
}
.feature-card__icon svg { width: 24px; height: 24px; }
.feature-card__title { font-size: 1.2rem; color: var(--mgc-forest); margin-bottom: 0.5rem; }
.feature-card__text { color: var(--mgc-text-muted); font-size: 0.95rem; }

.learn-grow { background: var(--mgc-ivory); background-image: radial-gradient(circle at 10% 10%, rgba(143,168,136,0.2), transparent 55%), radial-gradient(circle at 92% 85%, rgba(201,162,75,0.1), transparent 50%); }

/* ---------- 10. Join Us / Support Gardens ---------- */
.join-us { background: var(--mgc-white); }
.join-us__inner, .support-gardens__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-lg); align-items: center; }
.join-us__art, .support-gardens__art { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--mgc-sage-light), var(--mgc-sage)); position: relative; overflow: hidden; }
.join-us__art::after, .support-gardens__art::after { content: ""; position: absolute; inset: 10%; border: 1.5px solid rgba(255,255,255,0.4); border-radius: var(--radius-md); pointer-events: none; z-index: 1; }
.join-us__art img, .support-gardens__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.support-gardens { background: var(--mgc-forest); }
.support-gardens__inner { grid-template-columns: 0.9fr 1.1fr; }
.support-gardens__art { order: 1; background: linear-gradient(135deg, var(--mgc-forest-light), var(--mgc-gold)); }
.support-gardens__copy { order: 2; }

@media (max-width: 900px) {
	.join-us__inner, .support-gardens__inner { grid-template-columns: 1fr; }
	.join-us__art, .support-gardens__art { order: -1; }
}

/* ---------- 11b. Portfolio-style grid (homepage Civic Gardens preview) ---------- */
.portfolio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
@media (max-width: 900px) { .portfolio-grid { grid-template-columns: 1fr; } }
.civic-gardens-preview--history { background: var(--mgc-ivory); }
.civic-gardens-preview--history .section-lede { margin-inline: auto; }

/* ---------- 11c. Portfolio slider (Other Civic Gardens) ---------- */
.portfolio-slider {
	display: flex; gap: var(--space-md); overflow-x: auto; scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.portfolio-slider::-webkit-scrollbar { display: none; }
.portfolio-slider__item { flex: 0 0 calc((100% - var(--space-md)) / 2); scroll-snap-align: start; }
@media (max-width: 640px) { .portfolio-slider__item { flex-basis: 85%; } }
.portfolio-slider__nav { display: flex; gap: 0.6rem; }
/* .section-head's default align-items:flex-end lines up the flex items'
   margin boxes, but .section-title carries a margin-bottom (needed when
   it's stacked above other head content elsewhere) that the nav buttons
   don't have — so the two visibly sat at different heights. This pairing
   has no lede beneath the title, so centering and dropping that margin
   here is the correct fix rather than a global change to .section-head. */
.related-gardens .section-head { align-items: center; }
.related-gardens .section-head .section-title { margin-bottom: 0; }
.portfolio-slider__arrow {
	display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
	border: 1.5px solid var(--mgc-forest); color: var(--mgc-forest);
	transition: background var(--dur-fast) var(--ease-organic), color var(--dur-fast) var(--ease-organic);
}
.portfolio-slider__arrow:hover { background: var(--mgc-forest); color: var(--mgc-ivory); }
@media (max-width: 640px) { .portfolio-slider__nav { display: none; } }
.portfolio-card { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); transition: transform var(--dur-fast) var(--ease-organic), box-shadow var(--dur-fast) var(--ease-organic); }
.portfolio-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.portfolio-card__media { position: relative; display: block; aspect-ratio: 5 / 4; overflow: hidden; }
.portfolio-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-organic); }
.portfolio-card:hover .portfolio-card__media img { transform: scale(1.06); }
.portfolio-card__media-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--mgc-sage-light), var(--mgc-beige)); }
.portfolio-card__info {
	position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.9rem; display: flex; align-items: center; gap: 1rem;
	background: rgba(255, 255, 255, 0.22); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.35); border-radius: var(--radius-md); padding: 0.85rem 1.1rem;
}
.portfolio-card__info-text { flex: 1; min-width: 0; }
.portfolio-card__title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--mgc-white); }
.portfolio-card__location { display: block; font-size: 0.8rem; color: rgba(255, 255, 255, 0.78); margin-top: 0.2rem; }
.portfolio-card__arrow { flex-shrink: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--mgc-gold); color: var(--mgc-forest-dark); transition: transform var(--dur-fast) var(--ease-organic); }
.portfolio-card:hover .portfolio-card__arrow { transform: rotate(45deg); }

/* ---------- 12. Mini timeline (home) — horizontal scroll strip ---------- */
.history-preview { background: var(--mgc-forest-dark); background-image: radial-gradient(circle at 85% 20%, rgba(201,162,75,0.12), transparent 55%); }

/* Break out of .container to full viewport width — a scroll strip confined
   to the container's ~1280px max-width rarely has enough real overflow to
   justify scrolling; going full-bleed gives it room to breathe and makes
   the edge fade below mean something instead of just looking cropped. */
.mini-timeline-wrap {
	position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;
	padding-inline: clamp(1.25rem, 4vw, 3rem); margin-block: var(--space-lg); padding-top: var(--space-md);
}
.mini-timeline__line { position: absolute; top: calc(var(--space-md) + 5px); left: 0; right: 0; height: 1px; background: rgba(255,255,255,0.2); }
/* Fade the right edge so a horizontally-scrollable row reads as scrollable
   at a glance, instead of looking like it simply ends mid-content. */
.mini-timeline-wrap::after {
	content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 4rem;
	background: linear-gradient(90deg, transparent, var(--mgc-forest-dark)); pointer-events: none;
}

.mini-timeline {
	position: relative; display: flex; gap: var(--space-lg); overflow-x: auto; padding-bottom: 1.25rem;
	scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.3) transparent;
}
.mini-timeline::-webkit-scrollbar { height: 5px; }
.mini-timeline::-webkit-scrollbar-track { background: transparent; }
.mini-timeline::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: var(--radius-pill); }

.mini-timeline__point {
	position: relative; flex: 0 0 auto; scroll-snap-align: start;
	display: flex; flex-direction: column; align-items: center; text-align: center; width: 200px;
}
.mini-timeline__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--mgc-gold); margin-bottom: 0.75rem; box-shadow: 0 0 0 4px rgba(201,162,75,0.2); }
.mini-timeline__year { font-family: var(--font-display); color: var(--mgc-gold-light); font-size: 1.2rem; }
.mini-timeline__label { font-size: 0.85rem; color: var(--mgc-text-on-dark-muted); max-width: 22ch; }

/* ---------- 13. Contact CTA ---------- */
.contact-cta { background: var(--mgc-white); }
.contact-cta__inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-lg); align-items: center; }
.contact-cta__copy .section-lede { margin-bottom: 0; }
.contact-cta__copy a[href^="mailto"] { color: var(--mgc-forest); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.contact-cta__form { background: var(--mgc-white); border-radius: var(--radius-lg); padding: var(--space-md); box-shadow: var(--shadow-card); }
.contact-form--compact .form-row { margin-bottom: 1.1rem; }
.contact-form--compact .form-row:last-of-type { margin-bottom: 1.4rem; }
@media (max-width: 900px) { .contact-cta__inner { grid-template-columns: 1fr; } }

/* ---------- 14. Footer ---------- */
.site-footer {
	background: var(--mgc-forest-dark); color: var(--mgc-text-on-dark); padding-top: var(--space-xl);
	position: relative; overflow: hidden;
	background-image: radial-gradient(circle at 12% 15%, rgba(201,162,75,0.08), transparent 45%), radial-gradient(circle at 88% 85%, rgba(143,168,136,0.1), transparent 50%);
}
.site-footer__inner { position: relative; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: var(--space-lg); padding-bottom: var(--space-lg); }
@media (max-width: 900px) {
	/* Same grid at both this tier and the narrower one below -- Explore and
	   Get Involved always share a row, Brand/Connect each span full width. */
	.site-footer__inner { grid-template-columns: repeat(2, 1fr); }
	.site-footer__brand, .site-footer__connect { grid-column: 1 / -1; }
	.nav-menu--footer a { font-size: 0.85rem; }
	.nav-menu--footer li.current-menu-item > a, .nav-menu--footer li.current_page_item > a, .nav-menu--footer li.current-menu-parent > a, .nav-menu--footer li.current-menu-ancestor > a { background: none; color: var(--mgc-text-on-dark-muted); padding: 0; }
	.mgc-footer-facebook-link { margin-top: var(--space-md); }
}

.site-footer__logo-link { display: inline-flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.site-footer__logo { height: 72px; width: auto; filter: brightness(0) invert(1); }
.site-footer__mission { color: var(--mgc-text-on-dark-muted); max-width: 34ch; margin-bottom: 1.1rem; }
.site-footer__social { display: flex; gap: 0.6rem; }
.site-footer__social a {
	display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
	background: rgba(255, 255, 255, 0.1); color: var(--mgc-ivory); transition: background var(--dur-fast) var(--ease-organic), color var(--dur-fast) var(--ease-organic);
}
.site-footer__social a svg { width: 17px; height: 17px; }
.site-footer__social a:hover { background: var(--mgc-gold); color: var(--mgc-forest-dark); }

.footer-widget__title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--mgc-gold-light); margin-bottom: 1rem; }
/* .nav-menu a's base color is the dark forest green the header nav needs on
   its light background — the footer sits on a dark background, so it needs
   its own light color here or the links render almost invisibly dark-on-dark. */
.nav-menu--footer { flex-direction: column; gap: 0.65rem; }
.nav-menu--footer a { color: var(--mgc-text-on-dark-muted); }
.nav-menu--footer a:hover { color: var(--mgc-gold-light); }

.site-footer__connect-list { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem; }
.site-footer__connect-list li { display: flex; align-items: center; gap: 0.6rem; color: var(--mgc-text-on-dark-muted); }
.site-footer__connect-list a:hover { color: var(--mgc-gold-light); }
.site-footer__connect-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: var(--mgc-gold-light); flex-shrink: 0; }
.site-footer__connect-icon svg { width: 14px; height: 14px; }

.site-footer__bottom {
	position: relative; border-top: 1px solid rgba(255,255,255,0.12); padding-block: var(--space-md);
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	font-size: 0.82rem; color: var(--mgc-text-on-dark-muted);
}
.site-footer__totop {
	display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.25); color: var(--mgc-ivory);
	transition: background var(--dur-fast) var(--ease-organic), border-color var(--dur-fast) var(--ease-organic);
}
.site-footer__totop svg { width: 16px; height: 16px; }
.site-footer__totop:hover { background: var(--mgc-gold); border-color: var(--mgc-gold); color: var(--mgc-forest-dark); }
/* (Old single-column rule removed -- superseded by the repeat(2,1fr) + spanning rule above, which now covers this whole range.) */

/* ---------- 15. Generic Page Hero ---------- */
.page-hero { background: var(--mgc-forest); color: var(--mgc-ivory); padding-block: var(--space-xl); position: relative; overflow: hidden; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 0%, rgba(201,162,75,0.18), transparent 60%); }
.page-hero .eyebrow { display: none; }
.page-hero__title { font-size: clamp(1.9rem, 3.2vw, 2.7rem); color: var(--mgc-ivory); max-width: 26ch; position: relative; }
.page-hero__lede { font-size: 1.1rem; color: var(--mgc-text-on-dark-muted); max-width: 62ch; margin-top: var(--space-sm); position: relative; }

/* ---------- 15b. Photo + Stats Page Heroes (History, Events, Gardens) ---------- */
.page-hero--history, .page-hero--events, .page-hero--gardens, .page-hero--perennial, .page-hero--contact, .page-hero--scholarship, .page-hero--resources { padding-top: var(--space-xl); padding-bottom: calc(var(--space-xl) + 1.5rem); min-height: 32rem; display: flex; align-items: center; }
.page-hero--history::after, .page-hero--events::after, .page-hero--gardens::after, .page-hero--perennial::after, .page-hero--contact::after, .page-hero--scholarship::after, .page-hero--resources::after { z-index: 1; }
/* .page-hero--contact .container sizing now lives with the shaded-box rule below. */
.page-hero--history .container, .page-hero--resources .container { position: relative; z-index: 2; }
/* Gardens: box sits bottom-center of the photo, per client request. justify-content centers the fit-content box horizontally; align-items overrides the shared vertical-center so it sits at the bottom instead. min-height raised beyond the shared 32rem for more breathing room above the box. */
.page-hero--gardens { justify-content: center; align-items: flex-end; min-height: 80vh; }
.page-hero--gardens .container { position: relative; z-index: 2; }
/* Events gets the same fix, for the same reason. */
.page-hero--events .container { position: relative; z-index: 2; }
@media (max-width: 600px) {
	.page-hero--history, .page-hero--events, .page-hero--gardens, .page-hero--perennial, .page-hero--contact, .page-hero--scholarship, .page-hero--resources { min-height: 26rem; }
}
.page-hero__media { position: absolute; inset: 0; z-index: 0; }
.page-hero__bg { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) brightness(0.9); }
.page-hero__color-grade { position: absolute; inset: 0; background: var(--mgc-forest); mix-blend-mode: color; opacity: 0.65; }
/* About Us: switched from the old darkened-overlay approach to the same shaded-box treatment as Civic Gardens — overlay removed, text sits on its own background panel instead. */
.page-hero--history .page-hero__color-grade { display: none; }
.page-hero--history .container {
	width: fit-content;
	max-width: min(900px, calc(100% - 2rem));
	padding: var(--space-md) var(--space-lg);
	background: rgba(24, 41, 31, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: var(--radius-lg);
}
/* Civic Gardens: client asked for the green photo tint removed, with a shaded panel behind the text instead so it stays legible. Panel is width:fit-content capped at 460px (no negative offsets -- those risked bleeding past the viewport edge) and text isn't given its own separate max-width, so it wraps naturally to whatever room the panel actually has, instead of overflowing past a narrower box. object-position keeps the memorial wall (right-of-center in the photo) in frame instead of the default center crop. */
.page-hero--gardens .page-hero__bg { object-position: 68% center; }
.page-hero--gardens .page-hero__color-grade { display: none; }
.page-hero--gardens .container {
	width: fit-content;
	max-width: min(900px, calc(100% - 2rem));
	padding: var(--space-md) var(--space-lg);
	text-align: center;
}
.page-hero--gardens .page-hero__stats { justify-content: center; }
.page-hero--gardens .page-hero__title { max-width: none; white-space: nowrap; }
@media (max-width: 600px) { .page-hero--gardens .page-hero__title { white-space: normal; } }
.page-hero--gardens .container {
	background: rgba(24, 41, 31, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: var(--radius-lg);
}
/* Perennial Planters, Resources, Events, and About/History heroes get the same 80vh height, bottom-center placement, and centered text as Civic Gardens. */
.page-hero--history, .page-hero--events, .page-hero--perennial, .page-hero--resources { min-height: 80vh; justify-content: center; align-items: flex-end; }
.page-hero--history .container, .page-hero--events .container, .page-hero--perennial .container, .page-hero--resources .container { text-align: center; }
.page-hero--history .page-hero__title, .page-hero--events .page-hero__title, .page-hero--perennial .page-hero__title, .page-hero--resources .page-hero__title,
.page-hero--history .page-hero__lede, .page-hero--events .page-hero__lede, .page-hero--perennial .page-hero__lede, .page-hero--resources .page-hero__lede { margin-inline: auto; }
.page-hero--history .page-hero__stats, .page-hero--events .page-hero__stats, .page-hero--perennial .page-hero__stats { justify-content: center; }
/* Contact: flip the photo horizontally, drop the green tint, and match the shaded-box treatment used on the other hero pages. */
.page-hero--contact .page-hero__bg { transform: scaleX(-1); }
.page-hero--contact .page-hero__color-grade { display: none; }
.page-hero--contact .container {
	position: relative;
	z-index: 2;
	width: fit-content;
	max-width: min(900px, calc(100% - 2rem));
	padding: var(--space-md) var(--space-lg);
	background: rgba(24, 41, 31, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: var(--radius-lg);
	text-align: center;
}
.page-hero--contact .page-hero__title, .page-hero--contact .page-hero__lede { margin-inline: auto; }
.page-hero--contact { min-height: 80vh; justify-content: center; align-items: flex-end; }
/* Mobile: 80vh made the Contact hero too tall on phones, and the box's max-width (min(900px,100%)) let it touch the screen edges with no side margin once it's narrower than 900px. */
.page-hero--contact .container { max-width: min(900px, calc(100% - 2rem)); }
@media (max-width: 600px) { .page-hero--contact { min-height: 34rem; } }
/* Perennial Planters: photo has a butterfly centered on the milkweed — kept the panel narrower than Gardens/Events so it doesn't sit on top of it. */
.page-hero--perennial .page-hero__color-grade { display: none; }
.page-hero--perennial .container {
	position: relative;
	z-index: 2;
	width: fit-content;
	max-width: min(900px, calc(100% - 2rem));
	padding: var(--space-md) var(--space-lg);
	background: rgba(24, 41, 31, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: var(--radius-lg);
	text-align: center;
}
.page-hero--perennial { min-height: 80vh; justify-content: center; align-items: flex-end; }
.page-hero--perennial .page-hero__title, .page-hero--perennial .page-hero__lede { margin-inline: auto; }
.page-hero--perennial .page-hero__stats { justify-content: center; }
/* Scholarship: same shaded-box treatment as Gardens/Events/History/Resources. */
.page-hero--scholarship .page-hero__color-grade { display: none; }
.page-hero--scholarship .container {
	position: relative;
	z-index: 2;
	width: fit-content;
	max-width: min(900px, calc(100% - 2rem));
	padding: var(--space-md) var(--space-lg);
	background: rgba(24, 41, 31, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: var(--radius-lg);
	text-align: center;
}
.page-hero--scholarship .page-hero__lede { margin-inline: auto; margin-top: var(--space-sm); }
.page-hero--scholarship { min-height: 80vh; justify-content: center; align-items: flex-end; }
/* Resources: flip the photo horizontally, drop the green tint, and match the shaded-box treatment used on Gardens/Events/History. */
.page-hero--resources .page-hero__bg { transform: scaleX(-1); }
.page-hero--resources .page-hero__color-grade { display: none; }
.page-hero--resources .container {
	width: fit-content;
	max-width: min(900px, calc(100% - 2rem));
	padding: var(--space-md) var(--space-lg);
	background: rgba(24, 41, 31, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: var(--radius-lg);
}
/* Events: same treatment as Civic Gardens — photo is fine as-is, drop the green tint and shade the text instead. */
.page-hero--events .page-hero__color-grade { display: none; }
.page-hero--events .container {
	width: fit-content;
	max-width: min(900px, calc(100% - 2rem));
	padding: var(--space-md) var(--space-lg);
	background: rgba(24, 41, 31, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: var(--radius-lg);
}
.page-hero__stats { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); margin-top: var(--space-lg); position: relative; }
.page-hero__stat { display: flex; flex-direction: column; padding-right: var(--space-lg); border-right: 1px solid rgba(255,255,255,0.22); }
.page-hero__stat:last-child { border-right: none; padding-right: 0; }
.page-hero__stat-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 2.6vw, 2.3rem); color: var(--mgc-gold-light); line-height: 1; }
.page-hero__stat-label { font-size: 0.82rem; color: var(--mgc-text-on-dark-muted); margin-top: 0.35rem; letter-spacing: 0.02em; }
@media (max-width: 600px) {
	.page-hero__stats { gap: var(--space-md) var(--space-md); }
	.page-hero__stat { padding-right: var(--space-md); }
}
.generic-page { padding-top: var(--space-xl); }
.generic-page__content { max-width: 820px; }
.generic-page__thumb { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-lg); }
.generic-page__content > *:not(:first-child) { margin-top: 1.25rem; }
.generic-page__content h2 { font-size: 1.4rem; color: var(--mgc-forest); }
.generic-page__content ul, .generic-page__content ol { list-style: disc; padding-left: 1.4rem; }
.generic-page__content ul > * + *, .generic-page__content ol > * + * { margin-top: 0.4rem; }

/* ---------- 16. Events Archive ---------- */
.events-filters { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-lg); }
.events-filters__field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; font-weight: 600; color: var(--mgc-text-muted); }
.events-filters__field select { padding: 0.6rem 0.9rem; border-radius: var(--radius-sm); border: 1px solid var(--mgc-beige); background: var(--mgc-white); min-width: 160px; }
.events-view__heading { font-size: 1.4rem; color: var(--mgc-forest); margin-bottom: var(--space-md); }
.events-view__heading--past { margin-top: var(--space-xl); }

.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .card-grid--2 { grid-template-columns: 1fr; } }

.events-columns { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-lg); align-items: start; }
.events-columns__calendar { position: sticky; top: 7rem; }
@media (max-width: 1000px) {
	.events-columns { grid-template-columns: 1fr; }
	.events-columns__calendar { position: static; order: -1; }
}

.mgc-calendar { background: var(--mgc-white); border: 1px solid var(--mgc-beige); border-radius: var(--radius-md); padding: var(--space-md); box-shadow: var(--shadow-card); }
.mgc-calendar__month-title { font-size: 1.2rem; color: var(--mgc-forest); margin-bottom: var(--space-sm); }
.mgc-calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.mgc-calendar__weekday { font-size: 0.7rem; font-weight: 700; text-align: center; color: var(--mgc-text-muted); text-transform: uppercase; padding-bottom: 0.4rem; }
.mgc-calendar__day { min-height: 84px; min-width: 0; border-radius: var(--radius-sm); background: var(--mgc-white); border: 1px solid var(--mgc-beige); padding: 0.4rem; font-size: 0.8rem; position: relative; }
.mgc-calendar__day--empty { background: transparent; border: none; }
.mgc-calendar__day-num { font-weight: 700; color: var(--mgc-text-muted); }
.mgc-calendar__event { position: relative; display: block; margin-top: 0.3rem; max-width: 100%; }
.mgc-calendar__event-label {
	display: block; background: var(--mgc-sage-light); color: var(--mgc-forest-dark);
	border-radius: 6px; padding: 0.15rem 0.4rem; font-size: 0.72rem; font-weight: 600;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mgc-calendar__event:hover .mgc-calendar__event-label, .mgc-calendar__event:focus-visible .mgc-calendar__event-label { background: var(--mgc-gold); }
.mgc-calendar__event:hover, .mgc-calendar__event:focus-visible { z-index: 5; }

/* Full title + time/location on hover, since the pill itself must stay a
   single truncated line — otherwise long event titles balloon that day's
   cell height and break the calendar grid's uniform rhythm. The tooltip is
   a sibling of the label (not nested inside it), because the label needs
   its own overflow:hidden for the ellipsis, and that would clip an
   absolutely-positioned child too, even one meant to escape the box. */
.mgc-calendar__event-tooltip {
	position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px);
	width: 200px; background: var(--mgc-forest-dark); border-radius: var(--radius-sm); padding: 0.65rem 0.75rem;
	font-size: 0.78rem; line-height: 1.4; white-space: normal; text-align: left; box-shadow: var(--shadow-soft);
	opacity: 0; visibility: hidden; pointer-events: none; z-index: 20;
	transition: opacity var(--dur-fast) var(--ease-organic), transform var(--dur-fast) var(--ease-organic);
}
.mgc-calendar__event-tooltip::after {
	content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
	border: 6px solid transparent; border-top-color: var(--mgc-forest-dark);
}
.mgc-calendar__event-tooltip strong { display: block; font-family: var(--font-display); font-weight: 700; color: var(--mgc-ivory); margin-bottom: 0.25rem; }
.mgc-calendar__event-tooltip span { display: block; color: rgba(255, 255, 255, 0.75); font-size: 0.72rem; margin-top: 0.1rem; }
.mgc-calendar__event:hover .mgc-calendar__event-tooltip, .mgc-calendar__event:focus-visible .mgc-calendar__event-tooltip {
	opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.mgc-calendar__day:nth-child(7n+1) .mgc-calendar__event-tooltip { left: 0; transform: translateX(0) translateY(4px); }
.mgc-calendar__day:nth-child(7n+1) .mgc-calendar__event:hover .mgc-calendar__event-tooltip,
.mgc-calendar__day:nth-child(7n+1) .mgc-calendar__event:focus-visible .mgc-calendar__event-tooltip { transform: translateX(0) translateY(0); }
.mgc-calendar__day:nth-child(7n) .mgc-calendar__event-tooltip { left: auto; right: 0; transform: translateX(0) translateY(4px); }
.mgc-calendar__day:nth-child(7n) .mgc-calendar__event:hover .mgc-calendar__event-tooltip,
.mgc-calendar__day:nth-child(7n) .mgc-calendar__event:focus-visible .mgc-calendar__event-tooltip { transform: translateX(0) translateY(0); }

/* ---------- 17. Single Event / Single Garden ---------- */
.event-hero, .garden-hero { position: relative; min-height: 70vh; display: flex; align-items: center; padding-block: var(--space-xl); background: var(--mgc-forest); color: var(--mgc-ivory); overflow: hidden; }
.event-hero__content, .garden-hero__content { width: 100%; }
.event-hero__media, .garden-hero__media { position: absolute; inset: 0; }
.event-hero__media img, .garden-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.event-hero__gradient, .garden-hero__gradient { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,39,30,0.35), rgba(18,39,30,0.9)); }
.event-hero__content, .garden-hero__content { position: relative; z-index: 1; }
.event-hero__presenter { color: var(--mgc-text-on-dark-muted); margin-top: 0.5rem; }

/* Single Event: same overlay-removed, shaded-box, bottom-center treatment as the other hero pages. Scoped to .event-hero only, not .garden-hero, which shares these base classes but wasn't asked for this. */
.event-hero__gradient { display: none; }
.event-hero { justify-content: center; align-items: flex-end; min-height: 80vh; }
.event-hero__content {
	width: fit-content;
	max-width: min(900px, calc(100% - 2rem));
	padding: var(--space-md) var(--space-lg);
	background: rgba(24, 41, 31, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: var(--radius-lg);
	text-align: center;
}
.event-hero .page-hero__title,
.event-hero__presenter { margin-inline: auto; }
.event-hero .page-hero__stats { justify-content: center; }

.event-layout, .garden-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-lg); padding-block: var(--space-xl); align-items: start; }
@media (max-width: 900px) { .event-layout, .garden-layout { grid-template-columns: 1fr; } }

.event-meta-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-md); background: var(--mgc-white); border-radius: var(--radius-md); padding: var(--space-md); box-shadow: var(--shadow-card); margin-bottom: var(--space-lg); }
.event-meta-bar__label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--mgc-gold); margin-bottom: 0.3rem; }
.event-meta-bar__value { color: var(--mgc-forest); font-weight: 500; }
/* Stacked variant: lives inside .event-sidebar-card, which already supplies
   its own background/padding/shadow, so this is just plain vertical content
   rather than a nested card. */
.event-meta-bar--stacked { display: block; background: none; box-shadow: none; padding: 0; margin-bottom: 0; }
.event-meta-bar--stacked .event-meta-bar__item + .event-meta-bar__item { margin-top: var(--space-md); }
.event-description > * + * { margin-top: 1rem; }
.event-more-info { margin-top: var(--space-md); font-weight: 600; }
.event-contact-box { margin-top: var(--space-lg); background: var(--mgc-beige); border-radius: var(--radius-md); padding: var(--space-md); }
.event-contact-box h2 { font-size: 1.1rem; color: var(--mgc-forest); margin-bottom: 0.5rem; }

.event-photo, .mgc-map-embed { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-lg); box-shadow: var(--shadow-card); }
.event-photo img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.mgc-map-embed { line-height: 0; }
.mgc-map-embed iframe { width: 100%; height: 320px; border: 0; display: block; }

.event-sidebar-card, .garden-sidebar-card, .scholarship-cta-card, .contact-card, .perennial-sidebar-card { background: var(--mgc-white); border-radius: var(--radius-md); padding: var(--space-md); box-shadow: var(--shadow-card); position: sticky; top: 1.5rem; }
.add-to-calendar { margin-top: var(--space-md); }
.event-sidebar-card .event-meta-bar--stacked + .add-to-calendar { padding-top: var(--space-md); border-top: 1px solid var(--mgc-beige); }
.add-to-calendar__label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mgc-text-muted); margin-bottom: 0.5rem; }
.add-to-calendar__links { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.add-to-calendar__links a { border: 1px solid var(--mgc-beige); border-radius: var(--radius-pill); padding: 0.4rem 0.9rem; font-size: 0.82rem; font-weight: 600; color: var(--mgc-forest); }
.add-to-calendar__links a:hover { background: var(--mgc-forest); color: var(--mgc-ivory); }

.garden-description > * + * { margin-top: 1rem; }
.garden-gallery { margin-top: var(--space-lg); }
.garden-gallery h2 { font-size: 1.3rem; color: var(--mgc-forest); margin-bottom: var(--space-sm); }
/* Bento mosaic: a fixed row height + grid-auto-flow:dense lets a handful of
   images span extra columns/rows while the rest backfill as plain 1x1
   tiles — works for any gallery count, not just a hardcoded 8. */
.garden-gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 140px; grid-auto-flow: dense; gap: 0.75rem; }
.garden-gallery__grid img { width: 100%; height: 100%; border-radius: var(--radius-sm); object-fit: cover; display: block; }
.garden-gallery__grid img:nth-child(6n+1) { grid-column: span 2; grid-row: span 2; }
.garden-gallery__grid img:nth-child(6n+5) { grid-column: span 2; }
@media (max-width: 640px) {
	.garden-gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 120px; }
	.garden-gallery__grid img:nth-child(6n+1) { grid-column: span 2; grid-row: span 1; }
	.garden-gallery__grid img:nth-child(6n+5) { grid-column: span 1; }
}

.garden-sidebar-card__row { padding-block: 0.85rem; border-bottom: 1px solid var(--mgc-beige); }
.garden-sidebar-card__row:last-child { border-bottom: none; }
.garden-sidebar-card__label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--mgc-gold); margin-bottom: 0.3rem; }
.garden-sidebar-card__value { color: var(--mgc-forest); font-weight: 500; }
.garden-sidebar-card__species { margin-top: 0.4rem; }
.garden-sidebar-card__species li { color: var(--mgc-text-muted); font-size: 0.9rem; padding-block: 0.15rem; }

.related-events, .related-gardens { background: var(--mgc-beige); }

/* ---------- 18. Resources Directory ---------- */
.resource-filters { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: var(--space-lg); }
.resource-filters__btn { padding: 0.55rem 1.2rem; border-radius: var(--radius-pill); background: var(--mgc-beige); font-weight: 600; font-size: 0.85rem; color: var(--mgc-text-muted); transition: background var(--dur-fast), color var(--dur-fast); }
.resource-filters__btn.is-active, .resource-filters__btn:hover { background: var(--mgc-forest); color: var(--mgc-ivory); }
.resource-card { background: var(--mgc-white); border-radius: var(--radius-md); padding: var(--space-md); box-shadow: var(--shadow-card); height: 100%; }
.resource-card__icon { border-radius: 8px; margin-bottom: 0.75rem; }
.resource-card__title { font-size: 1.1rem; color: var(--mgc-forest); margin-bottom: 0.4rem; }
.resource-card__desc { color: var(--mgc-text-muted); font-size: 0.9rem; margin-bottom: 0.75rem; }
.resource-card__tags { margin-top: 0.75rem; }

/* ---------- 19. Scholarship ---------- */
.scholarship-layout, .perennial-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-lg); align-items: start; }
.perennial-content { padding-block: var(--space-lg); }
@media (max-width: 900px) { .scholarship-layout, .perennial-layout { grid-template-columns: 1fr; } }

.perennial-block { margin-bottom: var(--space-lg); }
.perennial-block h2 { font-size: 1.4rem; color: var(--mgc-forest); margin-bottom: 0.75rem; }
.perennial-block > * + * { margin-top: 0.9rem; }
.perennial-block ul { list-style: disc; padding-left: 1.4rem; }
.perennial-block ul > * + * { margin-top: 0.4rem; }
.perennial-sidebar-card h3 { font-size: 1.15rem; color: var(--mgc-forest); margin-bottom: 0.75rem; }
.perennial-sidebar-card__list { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: var(--space-md); }
.perennial-sidebar-card__list li { font-size: 0.9rem; color: var(--mgc-text-muted); padding-left: 1rem; position: relative; }
.perennial-sidebar-card__list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: var(--mgc-gold); }
.perennial-sidebar-card__note { font-size: 0.85rem; color: var(--mgc-text-muted); margin-top: 0.75rem; }
.perennial-sidebar-card__note a { text-decoration: underline; }
.scholarship-block { margin-bottom: var(--space-lg); }
.scholarship-block h2 { font-size: 1.4rem; color: var(--mgc-forest); margin-bottom: 0.75rem; }
.scholarship-block > div > * + *, .scholarship-block > * + * { margin-top: 0.9rem; }
.scholarship-block ul, .scholarship-block ol { list-style: disc; padding-left: 1.4rem; }
.scholarship-block ul > * + *, .scholarship-block ol > * + * { margin-top: 0.4rem; }
.scholarship-block--placeholder { background: var(--mgc-beige); border-radius: var(--radius-md); padding: var(--space-md); font-style: italic; color: var(--mgc-text-muted); }
.scholarship-org { font-weight: 600; }
.scholarship-org a { text-decoration: underline; text-underline-offset: 3px; color: var(--mgc-forest); }
.scholarship-cta-card h3 { font-size: 1.15rem; color: var(--mgc-forest); margin-bottom: 0.75rem; }
.scholarship-cta-card__note { font-size: 0.85rem; color: var(--mgc-text-muted); margin-top: 0.75rem; }
.scholarship-cta-card__note a { text-decoration: underline; }

/* ---------- 20. Contact Page ---------- */
.contact-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-lg); padding-block: var(--space-xl); align-items: start; }
@media (max-width: 900px) {
	.contact-layout { grid-template-columns: 1fr; }
	.contact-layout__aside { order: -1; }
	/* Aside now shows first on mobile, so the section's normal generous top padding (meant to sit above the form) just reads as a big empty gap above the card. */
	.contact-page { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
	.contact-layout { padding-block: 0; }
}
.form-notice { border-radius: var(--radius-sm); padding: 1rem 1.25rem; margin-bottom: var(--space-md); font-weight: 600; }
.form-notice--success { background: #E4F0DF; color: #2C5F35; }
.form-notice--error { background: #FBE4E1; color: #8C2E24; }
.contact-form__honeypot { position: absolute; left: -9999px; }
.form-row { margin-bottom: var(--space-md); display: flex; flex-direction: column; gap: 0.4rem; }
.form-row--split { flex-direction: row; gap: var(--space-md); }
.form-row--split > div { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; }
@media (max-width: 560px) { .form-row--split { flex-direction: column; } }
.form-row label { font-weight: 600; font-size: 0.9rem; color: var(--mgc-forest); }
.form-row input, .form-row textarea {
	padding: 0.85rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--mgc-beige);
	background: var(--mgc-white); transition: border-color var(--dur-fast);
}
.form-row input:focus, .form-row textarea:focus { border-color: var(--mgc-gold); }
.contact-card h3 { font-size: 1rem; color: var(--mgc-forest); margin-top: var(--space-md); }
.contact-card h3:first-child { margin-top: 0; }
.contact-card p { margin-top: 0.35rem; color: var(--mgc-text-muted); }
.contact-card a:hover { color: var(--mgc-gold); }

/* ---------- 21. History Timeline ----------
   Single left-rail layout (not alternating left/right): with 12 decades of
   uneven text length, alternating sides left huge blank gaps opposite the
   shorter/taller entries. A single rail scales cleanly with any amount of
   content and reads more naturally for a chronological list anyway. */
.history-timeline-section { padding-top: var(--space-xl); }
.timeline { position: relative; max-width: 720px; margin-inline: auto; padding-block: var(--space-lg); }
.timeline__vine { position: absolute; left: 7px; top: 0; bottom: 0; }
.timeline__vine-track { stroke: var(--mgc-sage-light); stroke-width: 2; }
.timeline__vine-draw { stroke: var(--mgc-gold); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; }
.timeline-item { position: relative; width: calc(100% - 3rem); margin-left: 3rem; margin-bottom: var(--space-lg); text-align: left; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-item__marker { position: absolute; top: 6px; left: -3rem; width: 16px; height: 16px; border-radius: 50%; background: var(--mgc-gold); box-shadow: 0 0 0 6px var(--mgc-ivory), 0 0 0 7px var(--mgc-sage-light); }
.timeline-item__card { background: var(--mgc-white); border-radius: var(--radius-md); padding: var(--space-md); box-shadow: var(--shadow-card); }
.timeline-item__decade { display: inline-block; font-weight: 700; color: var(--mgc-gold); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.3rem; }
.timeline-item__title { font-size: 1.3rem; color: var(--mgc-forest); margin-bottom: 0.5rem; }
.timeline-item__text { color: var(--mgc-text-muted); font-size: 0.95rem; }

@media (max-width: 760px) {
	.timeline__vine { left: 6px; }
	.timeline-item { width: calc(100% - 2.25rem - 1rem); margin-left: 2.25rem; }
	.timeline-item__marker { left: -2.25rem; }
}

/* ---------- 22. 404 / Not Found ---------- */
.not-found { min-height: 60vh; display: flex; align-items: center; }
.not-found__inner { text-align: center; max-width: 560px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.not-found__leaf { width: 56px; height: 56px; border-radius: 50% 0; background: var(--mgc-sage); margin-bottom: 0.5rem; }
.not-found form { margin-block: 0.5rem; display: flex; }
.not-found input[type="search"] { padding: 0.85rem 1rem; border-radius: var(--radius-pill) 0 0 var(--radius-pill); border: 1px solid var(--mgc-beige); }
.not-found button[type="submit"] { padding: 0.85rem 1.25rem; border-radius: 0 var(--radius-pill) var(--radius-pill) 0; background: var(--mgc-forest); color: var(--mgc-ivory); }

/* ---------- 23. Simple Card (fallback archive/search) ---------- */
.simple-card { background: var(--mgc-white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); padding-bottom: var(--space-md); }
.simple-card img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.simple-card h2 { font-size: 1.1rem; color: var(--mgc-forest); padding-inline: var(--space-md); padding-top: var(--space-sm); }
.simple-card p { padding-inline: var(--space-md); color: var(--mgc-text-muted); font-size: 0.9rem; margin-top: 0.4rem; }

/* ---------- 24. Animation hook defaults (JS adds .is-revealed) ----------
 * Scoped to [data-reveal="fade-up"] specifically — NOT the bare [data-reveal]
 * attribute — because [data-reveal="words"] (the hero headline) is revealed
 * word-by-word via its own child spans and must never be hidden at the
 * parent level, or the whole element (and its already-visible words) would
 * be masked by the parent's opacity. */
[data-reveal="fade-up"] { opacity: 1; }
.js-enabled [data-reveal="fade-up"] { opacity: 0; }
.js-enabled [data-reveal="fade-up"].is-revealed { opacity: 1; }
.js-enabled [data-stagger-item] { opacity: 0; }
.js-enabled [data-stagger-item].is-revealed { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.js-enabled [data-reveal="fade-up"], .js-enabled [data-stagger-item] { opacity: 1 !important; transform: none !important; }
}

/* ---------- Coat of Arms (History page) ---------- */
.coat-of-arms-section { background: var(--mgc-forest); }
.coat-of-arms-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--space-xl); align-items: center; }
.coat-of-arms-layout__media { display: flex; justify-content: center; order: 1; }
.coat-of-arms-layout__text { order: 2; }
.coat-of-arms-layout__image { width: 100%; max-width: 320px; height: auto; border-radius: var(--radius-md); background: var(--mgc-ivory); box-shadow: var(--shadow-card); padding: var(--space-md); }
.coat-of-arms-layout__text .section-title,
.coat-of-arms-layout__text .section-lede { max-width: none; }
@media (max-width: 900px) { .coat-of-arms-layout { grid-template-columns: 1fr; text-align: center; } .coat-of-arms-layout__media { order: 1; } .coat-of-arms-layout__text { order: 2; } .coat-of-arms-layout__text .section-title, .coat-of-arms-layout__text .section-lede { margin-inline: auto; } }