/* mdcamping.com — Maryland Association of Campgrounds
   One stylesheet for the whole site. Order: fonts, tokens, base, layout helpers, buttons, header,
   footer, then the home page's sections. */

/* ---------------------------------------------------------------- fonts (self-hosted, OFL) */
@font-face {
	font-family: "Young Serif";
	src: url("/fonts/young-serif-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Figtree";
	src: url("/fonts/figtree-latin-wght-normal.woff2") format("woff2");
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Figtree";
	src: url("/fonts/figtree-latin-wght-italic.woff2") format("woff2");
	font-weight: 300 900;
	font-style: italic;
	font-display: swap;
}

/* ---------------------------------------------------------------- tokens */
:root {
	/* MAC's colors: the old site's royal blue, sunny yellow, Maryland red and sunset orange, with a deep
	   Chesapeake navy for text and dark sections. */
	--chesapeake: #10235E;
	--chesapeake-soft: #1D3684;
	--royal: #2948FF;
	--susan: #FDED4F;
	--susan-hover: #FFE419;
	--red: #ED2224;
	--orange: #F37335;
	--gold: #FDC830;
	--sunset-top: var(--orange);
	--sunset-bottom: var(--gold);
	--navy-deep: #0A1744;
	--sky: #EEF2FF;
	--paper: #FFFFFF;
	--ink: #16203F;
	--muted: #4A5578;
	--line: #D9DFF2;

	--serif: "Young Serif", Georgia, "Times New Roman", serif;
	--sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--container: 1500px;                       /* same as brooknwood.com */
	--gutter: clamp(16px, 4vw, 48px);
	--section: clamp(56px, 7vw, 112px);        /* vertical space between sections */
	--ridge: 10vw;                             /* height of the ridge-to-shore outline (160/1600 of the width) */
	--ridge-room: calc(var(--ridge) + clamp(32px, 4vw, 64px));
	--shadow: 0 18px 44px rgba(16, 35, 94, .16);
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 400 1.125rem/1.6 var(--sans);
	-webkit-font-smoothing: antialiased;
}
main, .site-footer { text-wrap: pretty; }
h1, h2, h3 {
	margin: 0 0 .45em;
	font-family: var(--serif);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -.01em;
	color: var(--chesapeake);
	text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 1.5rem + 3.2vw, 4.25rem); }
h2 { font-size: clamp(2rem, 1.45rem + 1.9vw, 3.1rem); }
h3 { font-size: 1.5rem; }
p { margin: 0 0 1em; }
a { color: var(--royal); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
img { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--royal); outline-offset: 3px; border-radius: 4px; }
.icon { width: 1em; height: 1em; flex: none; fill: currentColor; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: 12px; top: -60px; z-index: 100;
	padding: 10px 16px; border-radius: 8px;
	background: var(--susan); color: var(--chesapeake); font-weight: 700;
}
.skip-link:focus { top: 12px; }

.lead { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); line-height: 1.55; }
.section-intro { max-width: 46rem; margin-bottom: clamp(28px, 3vw, 44px); }
.section-intro p { color: var(--muted); }

/* The ridge-to-shore outline: Maryland west to east, drawn in the colour of the section it leads into. */
.ridge-to-shore { display: block; width: 100%; height: var(--ridge); }

/* ---------------------------------------------------------------- buttons
   MAC's buttons stand up off the page like a painted park sign: a solid color, a navy outline and a hard
   edge underneath. They lift a little on hover and press down onto the edge when clicked. */
.button {
	--btn-bg: var(--susan); --btn-ink: var(--chesapeake); --btn-edge: var(--chesapeake); --btn-drop: var(--chesapeake);
	display: inline-flex; align-items: center; justify-content: center; gap: .55em;
	min-height: 50px; padding: .7em 1.4em .74em;
	border: 2px solid var(--btn-edge); border-radius: 12px;
	background: var(--btn-bg); color: var(--btn-ink);
	box-shadow: 0 4px 0 var(--btn-drop);
	font: 800 1.02rem/1.15 var(--sans); letter-spacing: .01em; text-decoration: none; cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease, background-color .15s;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--btn-drop); }
.button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--btn-drop); transition-duration: .05s; }
.button .icon { width: 1.05em; height: 1.05em; }
.button-sun { --btn-bg: var(--susan); }
.button-sun:hover { --btn-bg: var(--susan-hover); }
.button-white { --btn-bg: #fff; }
.button-white:hover { --btn-bg: #F6F8FF; }
.button-navy { --btn-bg: var(--chesapeake); --btn-ink: #fff; --btn-drop: var(--orange); }
.button-navy:hover { --btn-bg: var(--chesapeake-soft); }
/* On navy the navy edge would vanish, so the edge drops to orange; on the sunset band, to deep navy. */
.on-navy .button { --btn-edge: var(--navy-deep); --btn-drop: var(--orange); }
.on-sunset .button-navy { --btn-drop: var(--navy-deep); }
.on-navy :focus-visible, .site-footer :focus-visible { outline-color: var(--susan); }
@media (prefers-reduced-motion: reduce) {
	.button { transition: background-color .15s; }
	.button:hover, .button:active { transform: none; }
}

/* ---------------------------------------------------------------- header
   One sticky header: a navy top row over the orange menu row (the old site's top-to-bottom sunset), with
   a thin white line under it. The logo's white sign hangs from the very top across both rows, and both
   rows' content starts just right of it. The header sticks at minus the top row's height, so once the
   page scrolls the top row slides away and the menu row stays; then the sign shrinks into it. */
:root { --topbar-h: 40px; --brand-space: 334px; }
.site-header {
	position: sticky; top: calc(var(--topbar-h) * -1); z-index: 50;
	background: linear-gradient(to bottom, var(--orange) var(--topbar-h), var(--gold));
	border-bottom: 2px solid #fff;
	box-shadow: 0 2px 0 rgba(16, 35, 94, .1);
	transition: box-shadow .22s;
}
.site-header.is-stuck { box-shadow: 0 10px 30px rgba(16, 35, 94, .25); }

.topbar { background: var(--chesapeake); color: #fff; font-size: .9rem; }
.topbar-inner {
	display: flex; align-items: center; gap: 18px; min-height: var(--topbar-h);
	padding-left: calc(var(--gutter) + var(--brand-space));
}
.topbar-inner > nav { margin-right: auto; }
.topbar-links { display: flex; gap: 24px; }
.topbar a:not(.button) { color: #fff; text-decoration: none; }
.topbar a:not(.button):hover { text-decoration: underline; }
.button-small { min-height: 30px; padding: .28em .9em .32em; border-radius: 9px; font-size: .88rem; box-shadow: 0 2px 0 var(--btn-drop); }
.button-small:hover { transform: translateY(-1px); box-shadow: 0 3px 0 var(--btn-drop); }
.button-small:active { transform: translateY(2px); box-shadow: 0 0 0 var(--btn-drop); }

.social { display: flex; gap: 4px; }
.social a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: inherit; }
.social a:hover { background: rgba(255, 255, 255, .14); }
.social .icon { width: 17px; height: 17px; }

.lang { position: relative; }
.lang-button {
	display: inline-flex; align-items: center; gap: .45em; padding: 6px 8px;
	border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; cursor: pointer;
}
.lang-button:hover { background: rgba(255, 255, 255, .14); }
.lang-button .chevron { width: .75em; height: .75em; transition: transform .15s; }
.lang-button[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.lang-menu {
	position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 190px; padding: 6px;
	border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); box-shadow: var(--shadow);
}
.lang-menu a, .lang-menu span { display: block; padding: 8px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.lang-menu a[aria-current] { font-weight: 700; }
.lang-menu a:hover { background: var(--sky); }
.lang-menu span[aria-disabled] { color: var(--muted); }
.lang-menu small { font-size: .8rem; }

.header-inner {
	position: relative; display: flex; align-items: center; gap: 20px; min-height: 84px;
	padding-left: calc(var(--gutter) + var(--brand-space)); transition: min-height .22s;
}
.brand {
	position: absolute; z-index: 2; left: var(--gutter); top: calc(var(--topbar-h) * -1);
	display: block; padding: 12px 18px 18px;
	border-radius: 0 0 22px 22px; background: #fff; box-shadow: 0 12px 28px rgba(16, 35, 94, .25);
	transition: top .22s, padding .22s;
}
.brand picture { display: block; }
.brand img { width: auto; height: 108px; transition: height .22s; }
.site-header.is-stuck .header-inner { min-height: 62px; }
.site-header.is-stuck .brand { top: 0; padding: 7px 14px 10px; border-radius: 0 0 16px 16px; }
.site-header.is-stuck .brand img { height: 52px; }
.site-header.no-anim, .site-header.no-anim * { transition: none !important; }

.site-nav { flex: 1; display: flex; align-items: center; min-width: 0; }
.nav-list { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-left: -13px; }
.nav-item { position: relative; }
.nav-link {
	display: inline-flex; align-items: center; gap: .4em; padding: 10px 13px;
	border: 0; border-radius: 10px; background: none;
	color: var(--chesapeake); font: 700 1.02rem/1.2 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.nav-link:hover, .nav-link[aria-expanded="true"] { background: #fff; }
.nav-link .chevron { width: .75em; height: .75em; transition: transform .15s; }
.nav-link[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.nav-menu {
	display: none; position: absolute; left: 0; top: calc(100% + 8px); z-index: 60; min-width: 290px; padding: 8px;
	border: 2px solid var(--chesapeake); border-radius: 14px; background: #fff; box-shadow: 0 6px 0 var(--chesapeake), var(--shadow);
}
.nav-item:last-child .nav-menu { left: auto; right: 0; }
.nav-item.is-open > .nav-menu { display: block; }
.nav-menu a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; line-height: 1.3; }
.nav-menu a:hover { background: var(--sky); color: var(--chesapeake); }
.has-dot { display: flex !important; align-items: baseline; gap: .6em; }
.has-dot::before {
	content: ""; flex: none; width: .7em; height: .7em; border-radius: 50%;
	background: var(--dot); box-shadow: inset 0 0 0 1px rgba(16, 35, 94, .25); transform: translateY(.05em);
}
.nav-toggle, .nav-extra, .nav-scrim { display: none; }

/* Narrow screens: no top row, a smaller sign, and the menu becomes a panel that slides in from the right. */
@media (max-width: 1239px) {
	:root { --topbar-h: 0px; }
	.topbar { display: none; }
	.header-inner { min-height: 68px; padding-left: var(--gutter); }
	.brand {
		position: relative; left: auto; top: 0; align-self: flex-start; flex: none;
		margin-bottom: -18px; padding: 7px 12px 11px; border-radius: 0 0 16px 16px;
	}
	.brand img { height: 62px; }
	.site-header.is-stuck .header-inner { min-height: 56px; }
	.site-header.is-stuck .brand { margin-bottom: -12px; padding: 6px 10px 9px; }
	.site-header.is-stuck .brand img { height: 44px; }
	.nav-toggle {
		display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 9px 14px;
		border: 2px solid var(--chesapeake); border-radius: 12px; background: #fff; box-shadow: 0 3px 0 var(--chesapeake);
		color: var(--chesapeake); font: 800 1rem/1 var(--sans); cursor: pointer;
	}
	.nav-toggle .icon { width: 20px; height: 20px; }
	.nav-toggle .icon-close, .nav-toggle[aria-expanded="true"] .icon-open { display: none; }
	.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
	.site-nav {
		position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
		flex: none; flex-direction: column; align-items: stretch; gap: 20px;
		width: min(420px, 100%); margin: 0; padding: 84px 20px 32px; overflow-y: auto;
		background: #fff; box-shadow: var(--shadow);
		transform: translateX(105%); visibility: hidden;
		transition: transform .28s ease, visibility 0s .28s;
	}
	.site-nav.is-open { transform: none; visibility: visible; transition: transform .28s ease; }
	.nav-list { flex: none; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; margin-left: 0; }
	.nav-item { border-bottom: 1px solid var(--line); }
	.nav-link { width: 100%; justify-content: space-between; padding: 14px 4px; font-size: 1.1rem; border-radius: 0; }
	.nav-link:hover, .nav-link[aria-expanded="true"] { background: none; }
	.nav-menu { position: static; min-width: 0; margin: 0 0 12px; padding: 0; border: 0; box-shadow: none; }
	.nav-extra { display: grid; justify-items: start; gap: 14px; color: var(--chesapeake); }
	.nav-extra-links { display: grid; gap: 8px; }
	.nav-extra-links a { color: var(--chesapeake); font-weight: 600; }
	.nav-extra .lang-button:hover, .nav-extra .social a:hover { background: var(--sky); }
	.nav-extra .lang-menu { left: 0; right: auto; }
	.nav-scrim:not([hidden]) {
		display: block; position: fixed; inset: 0; z-index: 65; background: rgba(16, 35, 94, .45);
	}
	.nav-toggle[aria-expanded="true"] { position: relative; z-index: 80; }
}
@media (prefers-reduced-motion: reduce) {
	.site-nav { transition: none !important; }
}

/* ---------------------------------------------------------------- hero
   The photos run clear, with nothing shading them. The words sit on a navy card, and the navy
   ridge-to-shore outline carries the hero down into the navy section below. On phones the card
   drops below the photo. */
.hero {
	position: relative; isolation: isolate;
	display: flex; align-items: flex-end;
	min-height: clamp(600px, 86svh, 920px);
	background: var(--chesapeake); color: #fff;
}
.hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: var(--focus, 50% 50%);
	transform-origin: var(--origin, 50% 50%);
	opacity: 0; transition: opacity 1.6s ease;
}
.hero-slide.is-current { opacity: 1; }
.hero-slide.is-moving { animation: ken-burns 9.5s linear both; }
.hero.is-paused .hero-slide { animation-play-state: paused; }
@keyframes ken-burns {
	from { transform: scale(var(--from, 1)); }
	to   { transform: scale(var(--to, 1.12)); }
}
.hero-media > .ridge-to-shore { position: absolute; left: 0; right: 0; bottom: -1px; color: var(--chesapeake); }
.hero-pause {
	position: absolute; z-index: 2; right: var(--gutter); top: 22px;
	display: grid; place-items: center; width: 46px; height: 46px;
	border: 2px solid #fff; border-radius: 50%; background: var(--chesapeake); color: #fff; cursor: pointer;
	box-shadow: 0 3px 0 var(--orange);
}
.hero-pause:hover { background: var(--chesapeake-soft); }
.hero-pause .icon { width: 18px; height: 18px; }
.hero-pause .icon-play, .hero.is-paused .hero-pause .icon-pause { display: none; }
.hero.is-paused .hero-pause .icon-play { display: block; }

.hero-content { padding-top: 130px; padding-bottom: calc(var(--ridge) + clamp(24px, 3vw, 48px)); }
.hero-card {
	position: relative; max-width: 640px; padding: clamp(26px, 2.6vw, 38px);
	border: 1px solid rgba(255, 255, 255, .5); border-radius: 22px;
	background: rgba(16, 35, 94, .9); color: #fff;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 30px 70px rgba(9, 20, 56, .3);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.hero-card {                             /* frosted glass, with a silver sheen across the top */
		background:
			linear-gradient(135deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .06) 42%, rgba(255, 255, 255, 0) 60%),
			rgba(16, 35, 94, .46);
		-webkit-backdrop-filter: blur(18px) saturate(160%);
		backdrop-filter: blur(18px) saturate(160%);
	}
}
.hero-card::before {                         /* a sunset edge along the top: orange to rose to purple */
	content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 8px; border-radius: 22px 22px 0 0;
	background: linear-gradient(90deg, var(--orange), #C9466A 55%, #6E2D70);
}
.hero h1 { margin-bottom: .25em; color: #fff; text-shadow: 0 1px 3px rgba(9, 20, 56, .35); font-size: clamp(2.2rem, 1.5rem + 1.8vw, 3rem); }
.hero .lead { margin-bottom: 22px; color: #fff; text-shadow: 0 1px 3px rgba(9, 20, 56, .35); }

/* the search form on the card */
.hero-search { display: grid; gap: 16px; }
.search-field { display: grid; gap: 6px; }
.search-field label { font-size: .92rem; font-weight: 700; color: var(--susan); }
.search-field input {
	width: 100%; min-height: 54px; padding: 10px 16px;
	border: 2px solid #fff; border-radius: 12px; background: #fff;
	color: var(--ink); font: 500 1.15rem/1.3 var(--sans);
}
.search-field input:focus { outline: 3px solid var(--susan); outline-offset: 2px; }
.search-field input::placeholder { color: #6E7796; }
.search-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.search-type { display: flex; gap: 8px; margin: 0; padding: 0; border: 0; }
.search-type label { position: relative; }
.search-type input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.search-type span {
	display: block; padding: 10px 16px; border: 2px solid rgba(255, 255, 255, .5); border-radius: 999px;
	color: #fff; font-weight: 700; font-size: .98rem; white-space: nowrap;
}
.search-type input:checked + span { background: #fff; border-color: #fff; color: var(--chesapeake); }
.search-type input:focus-visible + span { outline: 3px solid var(--susan); outline-offset: 2px; }
.hero-search .button { min-height: 54px; padding-inline: 1.7em; }

@media (max-width: 760px) {
	.hero { display: block; min-height: 0; }
	.hero-media { position: relative; z-index: auto; height: clamp(300px, 56svh, 520px); }
	.hero-content { padding-top: 6px; padding-bottom: 8px; }
	.hero-card { max-width: none; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
	.hero-card::before { display: none; }
	.search-type { flex: 1; }
	.search-type label { flex: 1; }
	.search-type span { text-align: center; padding-inline: 10px; }
	.hero-search .button { width: 100%; }
}

/* ---------------------------------------------------------------- regions: six panels, west to east */
.regions {
	padding-block: clamp(36px, 4vw, 64px) var(--section); color: #fff;
	/* navy where the outline meets it, then a sunset towards the bottom (measured up from the bottom edge, so
	   it sits behind the cards' lower half at every screen size) */
	background: linear-gradient(to top, var(--gold) 0, var(--orange) 90px, #C9466A 220px, #6E2D70 360px, #2E2766 480px, var(--chesapeake) 620px);
}
.regions h2 { color: #fff; }
.regions .section-intro p { color: rgba(255, 255, 255, .84); }
.region-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); }
.region a {
	display: flex; flex-direction: column; height: 100%; overflow: hidden;
	border-radius: 14px; background: #fff; color: var(--ink); text-decoration: none;
	box-shadow: 0 16px 34px rgba(9, 20, 56, .3);
}
.region-photo { position: relative; overflow: hidden; background: var(--sky); }
.region-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.region-band { display: block; height: 12px; background: var(--region); }
.region-text { display: block; flex: 1; padding: 14px 16px 18px; }
.region-name { display: block; font: 400 1.35rem/1.15 var(--serif); color: var(--chesapeake); }
.region a:hover .region-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.region-about { display: block; margin-top: 6px; color: var(--muted); font-size: .98rem; line-height: 1.45; }
.region-count { display: block; margin-top: 8px; font-weight: 800; font-size: .92rem; color: var(--chesapeake); }

@media (max-width: 1100px) { .region-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; } }
@media (max-width: 600px)  { .region-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; } .region-name { font-size: 1.15rem; } .region-text { padding: 12px 12px 14px; } }

/* ---------------------------------------------------------------- welcome + photos from members */
.welcome { padding-bottom: var(--section); }
.welcome-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.welcome-text { max-width: 40rem; }
.welcome-text .signoff { font: 400 1.4rem/1.3 var(--serif); color: var(--chesapeake); }
.member-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-top: 8px; }
.member-photo { margin: 0; }
.member-photo:first-child { grid-column: 1 / -1; max-width: 450px; }
.member-photo img { width: 100%; border-radius: 12px; }
.member-photo figcaption { margin-top: 8px; font-size: .95rem; line-height: 1.4; color: var(--muted); }
.member-photo figcaption a { color: var(--chesapeake); font-weight: 700; }
@media (max-width: 900px) {
	.welcome-grid { grid-template-columns: 1fr; }
	.member-photos { max-width: 640px; }
}

/* ---------------------------------------------------------------- cabins & cottages */
.rentals { padding-block: var(--section); background: var(--sky); }
.rentals-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: 32px; }
.rentals-head .section-intro { margin-bottom: 0; }
.rental-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.rental a { display: block; height: 100%; border-radius: 12px; overflow: hidden; background: #fff; color: inherit; text-decoration: none; box-shadow: 0 1px 0 var(--line); }
.rental img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.rental-text { display: block; padding: 12px 14px 16px; }
.rental-name { display: block; font-weight: 700; line-height: 1.3; color: var(--chesapeake); }
.rental a:hover .rental-name { text-decoration: underline; }
.rental-place { display: flex; align-items: baseline; gap: .5em; margin-top: 4px; font-size: .92rem; color: var(--muted); }
@media (max-width: 1180px) { .rental-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
	.rental-grid {
		grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%;
		overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
		scroll-padding-inline: var(--gutter);
	}
	.rental { scroll-snap-align: start; }
}

/* ---------------------------------------------------------------- plan your trip */
.plan { padding-block: var(--section); }
.plan-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.guide { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; }
.guide img { width: clamp(120px, 12vw, 175px); border-radius: 6px; box-shadow: 0 16px 36px rgba(16, 35, 94, .22); }
.plan-links { border-top: 1px solid var(--line); }
.plan-links li { border-bottom: 1px solid var(--line); }
.plan-links a { display: block; padding: 18px 2px; color: inherit; text-decoration: none; }
.plan-links strong { display: block; font: 400 1.45rem/1.2 var(--serif); color: var(--chesapeake); }
.plan-links a:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.plan-links span { display: block; margin-top: 4px; color: var(--muted); }
@media (max-width: 900px) { .plan-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .guide { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- membership: a sunset over the outline */
.join {
	padding-top: var(--section); padding-bottom: var(--ridge-room);
	background: linear-gradient(to bottom, var(--sunset-top), var(--sunset-bottom) 85%);
	color: var(--chesapeake);
}
.join-inner { max-width: 46rem; }
.join p { font-size: 1.15rem; }
.join-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ---------------------------------------------------------------- footer */
.site-footer { position: relative; background: var(--chesapeake); color: rgba(255, 255, 255, .86); font-size: 1rem; }
.site-footer > .ridge-to-shore { position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); color: var(--chesapeake); }
.footer-grid {
	display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 32px 48px;
	padding-top: clamp(24px, 3vw, 40px); padding-bottom: 40px;
}
.site-footer a { color: #fff; }
.footer-name { font: 400 1.6rem/1.15 var(--serif); color: #fff; }
.footer-about address { margin-bottom: 14px; line-height: 1.7; }
.footer-about .social { margin-left: -8px; }
.footer-about .social a:hover { background: rgba(255, 255, 255, .14); }
.footer-links h2 { margin-bottom: 14px; font: 700 1rem/1.3 var(--sans); color: var(--susan); letter-spacing: 0; }
.footer-links li + li { margin-top: 9px; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-bottom {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
	padding-top: 22px; padding-bottom: 28px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: .92rem;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.credit img { width: 250px; height: auto; }     /* Pelland Advertising credit: always 250px wide */
@media (max-width: 1000px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-about { grid-column: 1 / -1; } }
@media (max-width: 520px)  { .footer-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- motion preferences */
@media (prefers-reduced-motion: reduce) {
	.hero-slide { transition: none; animation: none !important; }
}