/*
Theme Name: Missionary Acres
Theme URI: https://missionaryacres.com
Author: Bryan Tanner
Description: Custom theme for Missionary Acres, built on the same editable component system as tanners2ma.com, in Missionary Acres brand colors.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: missionaryacres
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
  --paper: #fafaf8; --paper-2: #f1f3ed; --ink: #1e2a1c; --ink-soft: #55624f;
  --brand: #056839; --brand-deep: #033d22; --accent: #719a3f; --accent-deep: #3d7a35;
  --line: #d7dccb; --rule: rgba(30, 42, 28, 0.14);
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, "URW Palladio L", Georgia, serif;
  --body: -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --space-1: .5rem; --space-2: 1rem; --space-3: 1.75rem; --space-4: 2.75rem; --space-5: 4.5rem;
  --header-h: 5.8rem;
}
@media (prefers-color-scheme: dark) {
  :root { --paper:#182018; --paper-2:#1f281e; --ink:#e9ede4; --ink-soft:#b3bda9; --brand:#4fae7a; --brand-deep:#0f1712; --accent:#9dc26a; --accent-deep:#c3dc9c; --line:#374234; --rule:rgba(233,237,228,.16); }
}
:root[data-theme="dark"] { --paper:#182018; --paper-2:#1f281e; --ink:#e9ede4; --ink-soft:#b3bda9; --brand:#4fae7a; --brand-deep:#0f1712; --accent:#9dc26a; --accent-deep:#c3dc9c; --line:#374234; --rule:rgba(233,237,228,.16); }
:root[data-theme="light"] { --paper:#fafaf8; --paper-2:#f1f3ed; --ink:#1e2a1c; --ink-soft:#55624f; --brand:#056839; --brand-deep:#033d22; --accent:#719a3f; --accent-deep:#3d7a35; --line:#d7dccb; --rule:rgba(30,42,28,.14); }

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--paper); color: var(--ink); font-family: var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; margin: 0; color: var(--ink); }
p { margin: 0; line-height: 1.65; }
.wrap { max-width: 68rem; margin: 0 auto; padding-left: clamp(1.25rem, 4vw, 3rem); padding-right: clamp(1.25rem, 4vw, 3rem); }

/* Editors can align images left/right in the block editor, which floats
   them. A float doesn't add to its container's height, so a right/left-
   aligned image near the end of a page's content can spill past its
   container into whatever comes next (e.g. the footer). Clear floats at
   the end of every content block so this can't happen regardless of how
   the page's blocks are ordered or edited. */
.content-col::after { content: ""; display: table; clear: both; }

/* ==========================================================================
   Header / nav
   ========================================================================== */
header.site { position: absolute; top: 0; left: 0; right: 0; z-index: 40; background: transparent; color: #f2f5ee; }
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 1.1rem clamp(1.25rem, 4vw, 3rem); max-width: 68rem; margin: 0 auto; }
.wordmark { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: #f2f5ee; }
.wordmark img { height: 3.6rem; width: auto; display: block; }
nav.primary { display: flex; gap: clamp(1rem, 2.4vw, 2rem); font-size: 1.08rem; }
nav.primary > li { position: relative; }
nav.primary a { text-decoration: none; color: #dce6d4; padding: .3rem 0; border-bottom: 1px solid transparent; transition: border-color .15s ease, color .15s ease; }
nav.primary a:hover, nav.primary .current-menu-item > a, nav.primary .current_page_item > a { color: var(--accent); border-color: var(--accent); }
nav.primary li.menu-item-has-children > a::after { content: "\25BE"; font-size: .7em; margin-left: .35em; opacity: .8; }
nav.primary .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	margin: 0;
	padding: .9rem 0 .4rem;
	min-width: 14rem;
	list-style: none;
	background: var(--brand-deep);
	border: 1px solid rgba(242,245,238,.18);
	box-shadow: 0 10px 24px rgba(0,0,0,.25);
	z-index: 30;
}
nav.primary li.menu-item-has-children:hover > .sub-menu,
nav.primary li.menu-item-has-children:focus-within > .sub-menu {
	display: block;
}
nav.primary .sub-menu a {
	display: block;
	padding: .55rem 1rem;
	white-space: nowrap;
	border-bottom: none;
}
nav.primary .sub-menu a:hover { background: rgba(255,255,255,.06); }
.nav-give { font-size: 1.02rem; padding: .5rem 1.1rem; background: var(--accent); color: #10240f; text-decoration: none; border-radius: 2px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.nav-give:hover { background: var(--accent-deep); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 2.2rem; height: 2.2rem; padding: 0; background: transparent; border: none; cursor: pointer; }
.nav-toggle .bar { display: block; width: 100%; height: 2px; background: #f2f5ee; transition: transform .18s ease, opacity .18s ease; }
.nav-toggle.is-active .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active .bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-active .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile-only submenu-expand button, injected by header.php's script next to
   each parent link. Keeps the link itself a normal, navigable tap target -
   without this, tapping "Live" etc. on a phone only opened the submenu and
   there was no way left to visit the parent page itself. */
.submenu-toggle { display: none; }

@media (max-width: 40rem) {
	.nav-toggle { display: flex; order: 2; }
	.nav-row { flex-wrap: wrap; }
	.wordmark { order: 1; }
	.nav-give { order: 3; }
	nav.primary {
		display: none;
		order: 4;
		flex-basis: 100%;
		flex-direction: column;
		gap: 0;
		width: 100%;
		margin-top: 1rem;
		border-top: 1px solid rgba(242,245,238,.18);
	}
	nav.primary.is-open {
		display: flex;
		background: var(--brand-deep);
		margin: 1rem calc(-1 * clamp(1.25rem, 4vw, 3rem)) 0;
		width: calc(100% + 2 * clamp(1.25rem, 4vw, 3rem));
		padding: .25rem clamp(1.25rem, 4vw, 3rem) 1rem;
		box-shadow: 0 12px 24px rgba(0,0,0,.3);
		border-top: none;
	}
	nav.primary > li { width: 100%; border-bottom: 1px solid rgba(242,245,238,.1); }
	nav.primary a { display: block; padding: .8rem 0; }
	nav.primary li.menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	nav.primary li.menu-item-has-children > a { flex: 1 1 auto; }
	nav.primary li.menu-item-has-children > a::after { display: none; }
	.submenu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 2.2rem;
		height: 2.2rem;
		background: transparent;
		border: none;
		color: #f2f5ee;
		font-size: 1rem;
		cursor: pointer;
		transition: transform .15s ease;
	}
	nav.primary li.menu-item-has-children.is-open .submenu-toggle { transform: rotate(180deg); }
	nav.primary .sub-menu {
		display: none;
		position: static;
		flex: 1 0 100%;
		margin: 0 0 .5rem 1rem;
		padding: 0;
		border: none;
		box-shadow: none;
		background: transparent;
	}
	nav.primary li.menu-item-has-children.is-open > .sub-menu { display: block; }
	nav.primary .sub-menu a { padding: .6rem 0; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.4rem; font-family: var(--body); font-size: .92rem; font-weight: 600; text-decoration: none; border-radius: 2px; border: 1px solid transparent; cursor: pointer; }
.btn-solid { background: var(--accent); color: #10240f; }
.btn-solid:hover { background: var(--accent-deep); }
.btn-outline { border-color: rgba(242,245,238,0.55); color: #f2f5ee; }
.btn-outline:hover { border-color: #f2f5ee; background: rgba(242,245,238,0.08); }
.btn-outline-dark { border-color: var(--brand); color: var(--brand); }

/* Native Gutenberg "Buttons" block (e.g. Serve page's Short-Term/Long-Term/
   Join the Staff links) - no color set per-block in the migrated content, so
   it was falling back to WP core's default dark-gray button style. Brand it
   MA light green to match the rest of the site's accent buttons. */
.wp-block-button__link { background: var(--accent); color: #10240f; }
.wp-block-button__link:hover { background: var(--accent-deep); }
.btn-outline-dark:hover { background: var(--brand); color: var(--paper); }

/* ==========================================================================
   Homepage hero
   ========================================================================== */
.hero {
  position: relative;
  background: linear-gradient(180deg, rgba(3,61,34,0.25) 0%, rgba(3,61,34,0.65) 72%, var(--brand-deep) 100%);
  min-height: min(80vh, 42rem);
  display: flex;
  align-items: flex-end;
  color: #f2f5ee;
}
.hero.has-photo {
  background:
    linear-gradient(180deg, rgba(3,61,34,0.15) 0%, rgba(3,61,34,0.5) 45%, rgba(3,61,34,0.85) 78%, var(--brand-deep) 100%),
    var(--hero-image, none);
  background-size: cover;
  background-position: center;
}
.hero-photo-note { position: absolute; top: var(--space-3); right: clamp(1.25rem, 4vw, 3rem); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: #d3ddc7; background: rgba(3,61,34,0.55); border: 1px solid rgba(242,245,238,0.35); padding: .35rem .6rem; border-radius: 2px; }
.hero-inner { position: relative; max-width: 68rem; margin: 0 auto; padding: var(--space-5) clamp(1.25rem, 4vw, 3rem) var(--space-4); width: 100%; }
.hero .label { color: var(--accent); margin-bottom: var(--space-2); text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
.hero h1 { color: #f2f5ee; font-size: clamp(2.2rem, 5.6vw, 3.9rem); font-weight: 400; line-height: 1.05; max-width: 22ch; text-shadow: 0 2px 16px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.65); }
.hero p.lede { margin-top: var(--space-2); max-width: 42ch; font-size: 1.05rem; color: #dce6d4; text-shadow: 0 1px 8px rgba(0,0,0,0.5); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: var(--space-3); }

/* ==========================================================================
   Interior page hero
   ========================================================================== */
.page-hero { background: var(--brand-deep); color: #f2f5ee; padding: calc(var(--header-h) + var(--space-3)) 0 var(--space-4); border-bottom: 4px solid var(--accent); }
.page-hero.has-photo {
	background:
		linear-gradient(180deg, rgba(3,61,34,0.88) 0%, rgba(3,61,34,0.6) 45%, rgba(3,61,34,0.88) 100%),
		var(--hero-image, none);
	background-size: cover;
	background-position: center 75%;
}
.page-hero.centered { text-align: center; }
.page-hero .label { color: #b9caac; }
.page-hero h1 { color: #f2f5ee; font-size: clamp(1.9rem, 4.4vw, 2.8rem); font-weight: 400; margin-top: .5rem; max-width: 40ch; }
.page-hero.has-photo h1 { text-shadow: 0 2px 16px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.65); }
.page-hero.centered h1 { margin-left: auto; margin-right: auto; }
.page-hero p.lede { color: #dce6d4; margin-top: .8rem; max-width: 48ch; font-size: 1.02rem; }

main { padding: var(--space-5) 0; }

/* ==========================================================================
   Welcome / intro copy block (homepage, About-style pages)
   ========================================================================== */
section.intro-block { background: var(--paper); padding: var(--space-5) 0 var(--space-4); border-bottom: 1px solid var(--rule); }
.intro-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.intro-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem; border-bottom: 1px solid var(--rule); padding-bottom: var(--space-2); margin-bottom: var(--space-3); }
.intro-body { max-width: 46rem; font-size: 1.08rem; }
.intro-body p { margin-bottom: 1.1em; }
.intro-body p:first-of-type::first-letter { font-family: var(--display); font-size: 3.4rem; float: left; line-height: .8; padding: .08em .08em 0 0; color: var(--brand); }
.signoff { font-family: var(--display); font-style: italic; font-size: 1.25rem; margin-top: var(--space-2); color: var(--brand); }

/* ==========================================================================
   Signposts (card-grid links out to sub-pages)
   ========================================================================== */
section.paths { background: var(--paper-2); padding: var(--space-5) 0; border-bottom: 1px solid var(--rule); }
.paths-head { max-width: 34rem; margin-bottom: var(--space-4); }
.paths-head h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 400; }
.paths-head p { margin-top: .6rem; color: var(--ink-soft); }
.signpost-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-3); }
.signpost { position: relative; text-decoration: none; color: var(--ink); background: var(--paper); border: 1px solid var(--line); padding: 1.6rem 1.5rem 1.8rem; display: flex; flex-direction: column; gap: .6rem; transition: transform .15s ease, border-color .15s ease; }
.signpost:hover { border-color: var(--brand); transform: translateY(-3px); }
.signpost .arrow { font-family: var(--display); font-style: italic; font-size: .95rem; color: var(--accent-deep); }
.signpost h3 { font-size: 1.28rem; font-weight: 400; }
.signpost p { color: var(--ink-soft); font-size: .94rem; }
.signpost .go { margin-top: auto; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); padding-top: .6rem; }

/* ==========================================================================
   CTA band (Give / Volunteer prompts)
   ========================================================================== */
section.help { background: var(--brand-deep); color: #f2f5ee; padding: var(--space-5) 0; }
.help-head { max-width: 36rem; margin-bottom: var(--space-4); }
.help-head .label { color: #b9caac; }
.help-head h2 { color: #f2f5ee; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 400; margin-top: .5rem; }
.help-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-4); }
.help-step { border-top: 2px solid var(--accent); padding-top: 1rem; }
.help-step h3 { color: #f2f5ee; font-size: 1.15rem; font-weight: 400; margin-bottom: .4rem; }
.help-step p { color: #cbd6bf; font-size: .93rem; }
.help-step .btn { margin-top: .9rem; }

/* ==========================================================================
   Give: tiers & ways-to-give panel
   ========================================================================== */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.tier { padding: var(--space-3) var(--space-3) var(--space-4) 0; }
.tier:not(:last-child) { padding-right: var(--space-3); }
.tier h3 { font-size: 1.2rem; font-weight: 400; margin-bottom: .6rem; }
.tier p { font-size: .95rem; color: var(--ink-soft); margin-bottom: .9rem; }
.tier p a { color: var(--brand); }
.tier p a:hover { color: var(--accent-deep); }
@media (max-width: 42rem) { .tier:not(:last-child) { padding-right: 0; } }

/* Donation Thermometer plugin: the plugin floats each thermometer's wrapper
   div with no clearfix, which pushes following content further right after
   every instance on a page. Undo the float so thermometers stack in normal
   flow instead. */
.content-col div:has(> svg.thermometer_svg) { float: none !important; max-width: 100%; margin-left: 0; margin-right: 0; }

/* Layout Grid blocks (thermometer + donate-button pairs): the plugin's grid
   columns are a fixed narrow width that's too tight for a landscape
   thermometer, causing its value labels to overlap the donate graphic next
   to it. Lay them out with flexbox instead so the thermometer keeps its
   natural width and the donate button sits beside it, wrapping below on
   narrow screens rather than overlapping. */
.content-col .wp-block-jetpack-layout-grid { display: flex !important; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
@media (min-width: 46rem) {
	.content-col .wp-block-jetpack-layout-grid { width: 44rem; flex-wrap: nowrap; }
}
.content-col .wp-block-jetpack-layout-grid-column { width: auto !important; flex: 0 1 auto; }
.content-col .wp-block-jetpack-layout-grid-column:has(svg.thermometer_svg) { flex-shrink: 0; }
.content-col .wp-block-jetpack-layout-grid-column:has(figure) { max-width: 10rem; flex: 0 0 auto; }

.give-panel { background: var(--paper-2); border: 1px solid var(--line); padding: var(--space-4); display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.give-col h3 { font-size: 1.1rem; font-weight: 400; margin-bottom: .5rem; color: var(--brand); }
.give-col p { font-size: .93rem; color: var(--ink-soft); margin-bottom: .9rem; }
.give-col .fine { font-size: .82rem; color: var(--ink-soft); margin-top: .8rem; }
.agency-line { max-width: 42rem; font-size: .92rem; color: var(--ink-soft); border-top: 1px solid var(--rule); padding-top: var(--space-3); }
.agency-line strong { color: var(--ink); }

/* ==========================================================================
   Meet the Residents & Staff: photo roll
   ========================================================================== */
.intro { max-width: 42rem; font-size: 1.08rem; margin-bottom: var(--space-5); }
.page-photo { max-width: 32rem; width: 100%; height: auto; border: 1px solid var(--line); margin-bottom: var(--space-5); }
.intro p + p { margin-top: 1em; }
.roll-head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--rule); padding-bottom: var(--space-2); margin-bottom: var(--space-1); }
.roll-head h2 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); font-weight: 400; }
.roll-head .count { font-size: .8rem; color: var(--ink-soft); }
.roll { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-3); border-top: 1px solid var(--rule); padding-top: var(--space-3); }
.roll-card { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: .6rem; }
.roll-card img { aspect-ratio: 1/1; object-fit: cover; border: 1px solid var(--line); }
.roll-card .name { font-family: var(--display); font-size: 1.15rem; color: var(--brand); }
.roll-card .role { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.roll-card:not([href]) { cursor: default; }

/* ==========================================================================
   Individual resident page
   ========================================================================== */
.resident-hero { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-5); }
.resident-photo { width: 16rem; flex: none; border: 1px solid var(--line); }
.resident-body { flex: 1; min-width: 16rem; }
.resident-body h1 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 400; }
.resident-body .role { margin-top: .4rem; }
.resident-body .bio { margin-top: var(--space-3); max-width: 42rem; font-size: 1.05rem; }
.resident-body .bio p + p { margin-top: 1em; }

/* ==========================================================================
   What Is Missionary Acres: timeline + pillars
   ========================================================================== */
.timeline-head { max-width: 34rem; margin-bottom: var(--space-4); }
.timeline-head h2 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); font-weight: 400; }
.timeline { position: relative; max-width: 42rem; margin-bottom: var(--space-5); padding-left: 2.6rem; }
.timeline::before { content: ""; position: absolute; left: .55rem; top: .3rem; bottom: .3rem; width: 1px; background: var(--line); }
.tl-item { position: relative; padding-bottom: var(--space-4); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ""; position: absolute; left: -2.6rem; top: .25rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--accent); border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--accent); }
.tl-item .yr { font-family: var(--display); font-style: italic; color: var(--brand); font-size: 1.2rem; margin-bottom: .3rem; display: block; }
.tl-item p { font-size: 1rem; }
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-3); border-top: 1px solid var(--rule); padding-top: var(--space-4); }
.pillar h3 { font-size: 1.15rem; font-weight: 400; margin-bottom: .5rem; color: var(--brand); }
.pillar p { font-size: .95rem; color: var(--ink-soft); }

/* ==========================================================================
   Generic content page (Serve, Live, Property Map, forms, etc.)
   ========================================================================== */
.content-col { max-width: 55rem; font-size: 1.05rem; }
.content-col p { margin-bottom: 1.1em; }
.content-col h2 { font-size: 1.3rem; font-weight: 400; color: var(--brand); margin: var(--space-3) 0 .6rem; }
.content-col h2:first-child { margin-top: 0; }
.content-col h3, .content-col h4 { font-weight: 400; color: var(--brand); margin: var(--space-3) 0 .5rem; }
.content-col h3 { font-size: 1.12rem; }
.content-col h4 { font-size: 1.02rem; }
.content-col h3:first-child, .content-col h4:first-child { margin-top: 0; }

/* Side-by-side Group blocks explicitly marked "col-align" in wp-admin (e.g.
   Short-Term Opportunities' Volunteer Packet / Register Your Skills panels):
   CSS grid already stretches each column to match the tallest one, but with
   normal block flow that leftover space just sits below the shorter
   column's image instead of keeping buttons/photos lined up across columns.
   Turning each column into a flex column and letting its intro paragraph
   absorb the slack keeps the button/photo row aligned regardless of how
   much text is in each column.
   Scoped to this opt-in class rather than every Group-with-grid block -
   single-column grid wrappers (e.g. Long-Term Opportunities' Bill Hayes
   photo) also render as "is-layout-grid" and rely on normal float behavior
   (image alignleft/alignright) for text to wrap beside a photo, which flex
   would silently break. */
.col-align > .wp-block-group > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.col-align > .wp-block-group > .wp-block-group__inner-container > .wp-block-paragraph:first-of-type {
	flex: 1 0 auto;
}

/* ==========================================================================
   Privacy Policy: plain legal treatment
   ========================================================================== */
.legal-head { max-width: 40rem; margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--rule); }
.legal-head h1 { font-size: clamp(1.7rem, 3.6vw, 2.2rem); font-weight: 400; }
.legal-head p.updated { margin-top: .5rem; font-size: .85rem; color: var(--ink-soft); }
.legal { max-width: 40rem; font-size: .98rem; }
.legal h2 { font-size: 1.1rem; font-weight: 400; color: var(--brand); margin-top: var(--space-3); margin-bottom: .5rem; }
.legal h2:first-child { margin-top: 0; }
.legal p { margin-bottom: 1em; color: var(--ink); }
.legal a { color: var(--brand); }

/* ==========================================================================
   Footer
   ========================================================================== */
footer.site { background: var(--brand-deep); color: #cbd6bf; padding: var(--space-4) 0 var(--space-3); border-top: 1px solid rgba(242,245,238,.14); margin-top: var(--space-5); }
.foot-logo { display: block; height: 3.4rem; width: auto; margin: var(--space-3) auto 0; }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid rgba(242,245,238,.14); }
.foot-grid h4 { font-family: var(--body); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #a6b89a; margin: 0 0 .7rem; font-weight: 600; }
.foot-grid p, .foot-grid a { font-size: 1rem; line-height: 1.6; }
.foot-grid a { text-decoration: none; color: #dce6d4; border-bottom: 1px solid rgba(220,230,212,.3); }
.foot-grid a:hover { border-color: #dce6d4; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem; padding-top: var(--space-3); font-size: .9rem; color: #a6b89a; }
.foot-links { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.foot-links a { color: #a6b89a; text-decoration: none; border-bottom: none; }
.foot-links a:hover { color: #dce6d4; }