/* longislandbridgecampgroundnh.com: one page, its sections reached from the menu.
   Colors from the oval sign (the logo): the lake teal the old site's header was known by, lifted so it reads as teal
   rather than near-black; the sign's gold-leaf letters; the sunset behind its sailboat; the navy of "EST. 1966"; and
   beach sand. The bridge in the sign (a lattice railing over stone arches) is the page's divider. */

/* ---------------------------------------------------------------- fonts (self-hosted: Aleo and Source Sans 3 under
   the OFL, Yellowtail under the Apache licence; licences in fonts/) */
@font-face {
	font-family: "Aleo"; font-style: normal; font-weight: 100 900; font-display: swap;
	src: url(/fonts/aleo-latin-wght-normal.woff2) format("woff2");
}
@font-face {
	font-family: "Aleo"; font-style: italic; font-weight: 100 900; font-display: swap;
	src: url(/fonts/aleo-latin-wght-italic.woff2) format("woff2");
}
@font-face {
	font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap;
	src: url(/fonts/source-sans-3-latin-wght-normal.woff2) format("woff2");
}
@font-face {
	font-family: "Source Sans 3"; font-style: italic; font-weight: 200 900; font-display: swap;
	src: url(/fonts/source-sans-3-latin-wght-italic.woff2) format("woff2");
}
@font-face {
	font-family: "Yellowtail"; font-style: normal; font-weight: 400; font-display: swap;
	src: url(/fonts/yellowtail-latin-400-normal.woff2) format("woff2");
}

/* ---------------------------------------------------------------- tokens */
:root {
	--teal: #0E6B63;            /* the header's menu row, the welcome and attractions bands, the bridges */
	--teal-bright: #16877C;
	--teal-deep: #09564F;       /* the top row, the footer */
	--teal-ink: #0A4842;        /* headings on light backgrounds */
	--teal-tint: #E3F1EE;
	--blue-top: #0A82C0;        /* the menu row: the old site's lake blue (#0793D0), deepened so white words read */
	--blue: #0874AE;            /* (white 5.1:1 where the words sit) */
	--blue-low: #07669D;
	--gold: #E8B547;            /* the sign's gold-leaf letters: buttons, highlights */
	--gold-light: #F8DA85;
	--gold-edge: #A87428;       /* a button's hard edge */
	--sun-top: #FFE594;         /* the sunset behind the sailboat: the menu's current item, the photos band */
	--sun-mid: #F8B54E;
	--sun-low: #EF8A40;
	--sun-red: #DD5A36;
	--navy: #1D3B5A;            /* "EST. 1966": text on gold and on the sunset */
	--sand: #F7F0E2;            /* the beach: light bands */
	--sand-deep: #EEE2CA;
	--sand-line: #E0D0B0;
	--paper: #FFFFFF;
	--ink: #1E2A2F;             /* body text */
	--muted: #44535A;           /* secondary text on light backgrounds: 7.6:1 on white, 6.9:1 on sand */
	--on-teal: #F2FAF8;         /* text on the teals */

	--display: "Aleo", Georgia, "Times New Roman", serif;
	--sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--script: "Yellowtail", "Brush Script MT", cursive;

	--container: 1600px;
	--gutter: clamp(16px, 4vw, 48px);
	--section: clamp(52px, 5.2vw, 88px);      /* (round 22, Joshua: tighter; was clamp(64px, 7.5vw, 120px)) */
	--lead: clamp(1.3125rem, 1.15rem + .5vw, 1.5rem);      /* 21px on phones, 24px from about 1150px */
	--bridge-h: clamp(44px, 5.6vw, 150px);                /* the bridge divider's height (each third keeps the shape it was drawn at) */
	--bridge-room: calc(var(--bridge-h) + clamp(32px, 4vw, 64px));
	--radius: 18px;
	--shadow: 0 18px 44px rgba(9, 72, 66, .14);
	--ease-out: cubic-bezier(.23, 1, .32, 1);
	--white-drop: round(.035em, 1px) round(.035em, 1px) .03em rgba(255, 255, 255, .9);
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--menu-h-compact) + 16px); }
html.is-header-growing, html.is-gliding { overflow-anchor: none; }
@media (prefers-reduced-motion: no-preference) { html.is-smooth { scroll-behavior: smooth; } }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 400 1.25rem/1.6 var(--sans);
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
}
main, .site-footer { text-wrap: pretty; }
main { overflow-x: clip; }      /* (things waiting to slide in from the side never widen the page on phones; clip keeps sticky working) */
h1, h2, h3 {
	margin: 0 0 .45em;
	font-family: var(--display);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.01em;
	color: var(--teal-ink);
	text-wrap: balance;
}
h2 { font-size: clamp(2.1rem, 1.55rem + 1.9vw, 3.25rem); }
h3 { font-size: 1.5rem; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--teal); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
img { display: block; max-width: 100%; height: auto; }
a[href^="tel:"] { white-space: nowrap; }
.phone { font-feature-settings: "case"; }      /* parentheses centred on the figures */
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
strong { font-weight: 700; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--teal-bright); outline-offset: 3px; border-radius: 4px; }
button, .button { -webkit-user-select: none; user-select: none; }
.icon { width: 1em; height: 1em; flex: none; fill: currentColor; }
table { border-collapse: collapse; }

.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: 10px;
	background: var(--gold); color: var(--navy); font-weight: 700;
}
.skip-link:focus-visible { top: 12px; }

section { position: relative; padding-block: var(--section); }
.section-intro { max-width: 70rem; margin-bottom: clamp(28px, 3vw, 48px); }
.section-intro p, .lead { font-size: var(--lead); line-height: 1.5; color: var(--muted); }
.section-intro p:last-child { margin-bottom: 0; }
.on-teal { background: var(--teal); color: var(--on-teal); }
.on-teal h2, .on-teal h3 { color: #fff; }
.on-teal .section-intro p { color: var(--on-teal); }
.on-teal a:not(.button) { color: #fff; }
.on-teal :focus-visible, .site-footer :focus-visible, .site-header :focus-visible { outline-color: var(--gold-light); }
.on-sand { background: var(--sand); }

/* The bridge, after the old postcard of the Long Island bridge (Joshua, 2026-11-03), rising out of the footer (only
   there: Joshua, round 3): the shore and the stone causeway on each side, a third of the width each, and the bridge in
   the middle third (img/bridge-*.svg, drawn by _tools/make-bridge.py), in the footer's colour. The pieces overlap a
   little so no seam shows. */
.bridge {
	position: absolute; left: 0; right: 0; height: var(--bridge-h); pointer-events: none;
	background: var(--teal);
	--land: 33.5%; --span: 33.4%;
	-webkit-mask: url(/img/bridge-land-left.svg) left bottom / var(--land) 100% no-repeat, url(/img/bridge-mid.svg) center bottom / var(--span) 100% no-repeat, url(/img/bridge-land-right.svg) right bottom / var(--land) 100% no-repeat;
	mask: url(/img/bridge-land-left.svg) left bottom / var(--land) 100% no-repeat, url(/img/bridge-mid.svg) center bottom / var(--span) 100% no-repeat, url(/img/bridge-land-right.svg) right bottom / var(--land) 100% no-repeat;
}
/* Phones: the bridge takes the middle 60%, at the height that keeps its shape. */
@media (max-width: 760px) {
	:root { --bridge-h: 9.75vw; }
	.bridge { --land: 20.5%; --span: 60%; }
}

/* ---------------------------------------------------------------- buttons
   Gilded plaques, like the sign's gold-leaf letters: a gold face with a fine light rim inside it and a hard darker
   edge underneath. They lift a little on hover and press down onto the edge when clicked. */
.button {
	--btn-bg: linear-gradient(to bottom, #FAE09A, var(--gold) 70%);
	--btn-ink: var(--navy); --btn-edge: var(--gold-edge); --btn-rim: rgba(255, 255, 255, .55);
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: 52px; padding: 17px 1.3em 14px; border: 0; border-radius: 12px;      /* (Aleo's capitals sit high in their line: 2px more above, measured) */
	background: var(--btn-bg); color: var(--btn-ink);
	box-shadow: inset 0 0 0 1px var(--btn-rim), 0 3px 0 var(--btn-edge), 0 6px 14px rgba(9, 50, 46, .18);
	font: 700 1.1875rem/21px var(--display); letter-spacing: .005em; text-decoration: none; white-space: nowrap; cursor: pointer;
	transition: transform .18s var(--ease-out), box-shadow .2s ease, filter .2s;
}
.button:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--btn-rim), 0 5px 0 var(--btn-edge), 0 10px 20px rgba(9, 50, 46, .22); filter: brightness(1.04); }
.button:active { transform: translateY(3px); box-shadow: inset 0 0 0 1px var(--btn-rim), 0 0 0 var(--btn-edge), 0 2px 6px rgba(9, 50, 46, .2); transition-duration: .06s; }
.button .icon { width: 1.05em; height: 1.05em; }
.button-ghost {                                  /* (light on dark; the hero's buttons until round 8) */
	--btn-bg: rgba(255, 255, 255, .08); --btn-ink: #fff; --btn-edge: rgba(0, 0, 0, .25); --btn-rim: rgba(255, 255, 255, .85);
	box-shadow: inset 0 0 0 2px var(--btn-rim), 0 3px 0 var(--btn-edge);
}
.button-ghost:hover { --btn-bg: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 2px #fff, 0 5px 0 var(--btn-edge); }
.button-navy { --btn-bg: linear-gradient(to bottom, #2A5279, var(--navy)); --btn-ink: #fff; --btn-edge: #0F2236; --btn-rim: rgba(255, 255, 255, .22); }
.button-outline {            /* on light backgrounds */
	--btn-bg: #fff; --btn-ink: var(--teal-ink); --btn-edge: var(--teal-ink); --btn-rim: var(--teal-ink);
	box-shadow: inset 0 0 0 2px var(--btn-rim), 0 3px 0 var(--btn-edge);
}
.button-outline:hover { --btn-bg: var(--teal-tint); box-shadow: inset 0 0 0 2px var(--btn-rim), 0 5px 0 var(--btn-edge); }
.button-small { min-height: 44px; padding: 13px 1em 10px; font-size: 1.0625rem; border-radius: 10px; }
.button-large { min-height: 60px; padding-block: 21px 18px; font-size: 1.3125rem; }
@media (prefers-reduced-motion: reduce) {
	.button { transition: filter .15s, box-shadow .15s; }
	.button:hover, .button:active { transform: none; }
}

/* ---------------------------------------------------------------- header
   One sticky header in two rows: the deep-teal top row over the blue menu row (Joshua: carry the old site's blue
   through). (No line along its foot since round 4: Joshua.) The oval sign hangs from the very top across both rows; the header sticks at minus the top row's
   height, so once the page scrolls the top row slides away and the sign docks into the menu row. Further down, the
   menu row shrinks (two measured thresholds: js/site.js initHeader). */
:root {
	--topbar-h: 44px; --menu-h: 84px; --menu-h-compact: 66px;
	--brand-w: 300px;          /* the hanging sign (the logo is an oval 1000 x 504) */
	--brand-top: 10px;
	--header-h: calc(var(--topbar-h) + var(--menu-h));
}
.site-header {
	position: sticky; top: calc(var(--topbar-h) * -1); z-index: 50;
	background:
		linear-gradient(to bottom, #0B5D56, var(--teal-deep) var(--topbar-h), var(--blue-top) var(--topbar-h), var(--blue) calc(var(--topbar-h) + 50%), var(--blue-low));
	box-shadow: 0 10px 30px rgba(4, 30, 28, 0);
	transition: box-shadow .25s;
	container-type: inline-size;
}
.site-header.is-stuck { box-shadow: 0 10px 30px rgba(4, 30, 28, .3); }
/* On the home page the hero's photos run up behind the header (round 20, Joshua), and the top row is the hero strip's
   frosted teal (--frost), so the photo shows softly through it; the menu row stays solid blue. Phones keep the solid
   top row (their photo starts below the header). */
:root { --frost: rgba(8, 72, 66, .72); --frost-filter: blur(14px) saturate(1.25); }
@media (min-width: 761px) {
	.site-header.over-hero { background: linear-gradient(to bottom, transparent var(--topbar-h), var(--blue-top) var(--topbar-h), var(--blue) calc(var(--topbar-h) + 50%), var(--blue-low)); }
	.site-header.over-hero::before {
		content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: var(--topbar-h); pointer-events: none;
		background: var(--frost); -webkit-backdrop-filter: var(--frost-filter); backdrop-filter: var(--frost-filter);
	}
}
:root { --line-gold: rgba(248, 218, 133, .6); }      /* a fine gold line: the phone menu's edge (the hero strip had one until round 9) */
.header-grid {
	position: relative; display: grid; align-items: stretch;
	grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: var(--topbar-h) var(--menu-h);
	transition: grid-template-rows .22s;
}
.site-header.is-stuck .header-grid { grid-template-rows: var(--topbar-h) var(--menu-h-compact); }
.site-header.no-anim, .site-header.no-anim * { transition: none !important; }

/* The sign: hanging, it's 300px wide (up to 380px where the menu has room to spare: below) with a soft shadow under it; docked, it fits the menu row with a little room above
   and below (the oval is 1000 x 504), its shadow nearly gone. It's absolutely placed, so docking moves nothing else. */
.brand {
	position: absolute; z-index: 2; left: var(--gutter); top: var(--brand-top);
	display: block; width: var(--brand-w);
	transition: width .3s var(--ease-out), top .3s var(--ease-out), filter .3s;
	filter: drop-shadow(0 10px 14px rgba(4, 30, 28, .35));
}
.brand-logo { width: 100%; height: auto; }
/* Docked, the oval itself (not its image) fills the menu row less 7px above and below, 6px when stuck: the oval is .485
   of the image's width tall and starts .019 of it down, flush with its foot (round 27, Joshua: sized by the image, it
   had 2-2.6px more room above than below). */
.site-header.is-docked .brand {
	--dock-w: calc((var(--menu-h) - 14px) / .485);
	top: calc(var(--topbar-h) + 7px - var(--dock-w) * .019); width: var(--dock-w);
	filter: drop-shadow(0 2px 3px rgba(4, 30, 28, .25));
}
.site-header.is-stuck .brand { --dock-w: calc((var(--menu-h-compact) - 12px) / .485); top: calc(var(--topbar-h) + 6px - var(--dock-w) * .019); width: var(--dock-w); }

.topbar {
	grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; gap: 24px;
	color: var(--on-teal); font-size: 1.0625rem; line-height: 20px;
}
.topbar p { margin: 0; }
.topbar-season { display: flex; align-items: center; gap: 9px; }
.topbar-season strong { font-weight: 700; margin-right: 5px; color: #fff; }
.topbar-links { display: flex; align-items: center; gap: 22px; }
.topbar-links li { display: flex; }
.topbar-links a { display: inline-flex; align-items: center; gap: 8px; color: var(--on-teal); font-weight: 600; text-decoration: none; }
.topbar-links a:hover { color: #fff; text-decoration: underline; }
.topbar .icon { width: 16px; height: 16px; color: var(--gold); }
.topbar-text { position: relative; top: 1px; }
.topbar-social { width: 32px; height: 32px; justify-content: center; border-radius: 50%; margin-right: -6px; }
.topbar-social:hover { background: rgba(255, 255, 255, .12); }
.topbar .topbar-social .icon { width: 18px; height: 18px; color: #fff; }

/* The menu: plain words on the blue. The current section's stands on a sand plaque with a routed gold
   line inside its edge, centred on the words, which glides from item to item as the page scrolls (js/site.js
   initSpy). Pointing at another item lights its words a pale gold (no box: Joshua). */
:root { --nav-size: 1.125rem; --nav-x: .62em; }
.site-nav { grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: clamp(10px, 1.2vw, 22px); }
.nav-list { position: relative; display: flex; align-items: stretch; align-self: stretch; isolation: isolate; }
.nav-item { display: flex; }
.nav-link {
	position: relative; display: flex; align-items: center; padding: calc(var(--nav-size) * .16) var(--nav-x) 0;      /* (Aleo's capitals sit high: centred on the row, measured) */
	color: #fff; font: 600 var(--nav-size)/20px var(--display); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
	transition: color .3s ease;
}
.nav-link:hover { color: #FFEDB8; }      /* (4.4:1 on the blue) */
.nav-link.is-current, .nav-link.is-current:hover { color: var(--navy); }
.nav-link:focus-visible { outline-offset: -6px; }
:root { --mark-h: calc(round(var(--nav-size) * 2, 2px) + 4px); }      /* (an even height, so it centres on whole pixels) */
.nav-mark {
	position: absolute; z-index: -1; left: 0; top: 50%; width: var(--mark-w, 0px); height: var(--mark-h);
	border-radius: 10px;
	background: linear-gradient(to bottom, #FCF8EE, var(--sand) 55%, #EEE2C8);
	box-shadow: 0 2px 0 rgba(4, 50, 84, .4), 0 6px 14px rgba(4, 40, 70, .28);
	transform: translate(var(--mark-x, 0px), -50%); opacity: 0;
	transition: transform .5s var(--ease-out), width .5s var(--ease-out), opacity .3s ease;
	pointer-events: none;
}
.nav-mark::before {                  /* the routed line, in the darker gold that shows on sand */
	content: ""; position: absolute; inset: 4px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(176, 122, 36, .55);
}
.nav-mark.is-on { opacity: 1; }
.nav-mark.no-anim { transition: none; }

/* Reservations: the menu row's own button, in the menu's size so its words share the links' baseline. */
.header-cta { min-height: 48px; padding: 16px 1.05em 12px; font-size: var(--nav-size); line-height: 20px; border-radius: 11px; }      /* (Aleo's capitals sit high in their line: 2px more above, measured) */
.header-cta.is-current { box-shadow: inset 0 0 0 2px var(--navy), 0 3px 0 var(--btn-edge), 0 6px 14px rgba(9, 50, 46, .18); }
.header-cta { position: relative; isolation: isolate; }
.header-cta::after {                 /* the shine, with the hero's script (round 12): a band of light across the gold face, under the word */
	content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none;
	background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .28) 45%, rgba(255, 255, 255, .62) 50%, rgba(255, 255, 255, .28) 55%, transparent 62%) 100% 0 / 300% 100% no-repeat;
	opacity: 0;
}
.header-cta.is-shining::after { animation: shine var(--shine) var(--shine-ease) both; }
@media (prefers-reduced-motion: reduce) { .header-cta::after { display: none; } }
.header-tools, .nav-extra, .nav-scrim { display: none; }

/* The menu's text as large as fits beside the sign (measured with _tools/check-menu-fit.py: the menu and Reservations
   are 45.8px wide per pixel of text, plus the gap between them), leaving about 30px between the sign and the menu at
   1200px wide and 60px from 1600px (as on Otter Lake: a gap of .075 x the width - 60px), rounded down to an eighth of a
   pixel, between 16px and 21px. Worked out on the header's grid, so 100cqw is the header's own width (a scrollbar
   doesn't count). Below 1200px the menu folds into the Menu button. */
@media (min-width: 1200px) {
	.header-grid {
		--nav-size: clamp(16px, round(down, (min(100cqw, 1600px) * .925 - 36px - var(--brand-w) - clamp(10px, 1.2cqw, 22px)) / 45.8, .125px), 21px);
		/* Where the menu would have room to spare at its full 21px, the sign takes it, up to 380px (Joshua, round 12: larger
		   on wide screens): 380px from about 1510px wide (with 80-140px still clear before the menu), 317px at 1440, 300px
		   at 1366 and below; the menu itself is unchanged. */
		--brand-w: clamp(300px, min(100cqw, 1600px) * .925 - 36px - clamp(10px, 1.2cqw, 22px) - 21px * 45.8, 380px);
		/* ...and rises as it grows, so it stays level with the menu rather than growing down (Joshua, round 13): 18px higher
		   at 380px, its oval's top edge then at the top of the screen; in step between 300px and 380px. */
		--brand-top: calc(10px - (var(--brand-w) - 300px) * .225);
	}
}
/* Where the menu text is smaller (16.5-20.9px), Reservations needs a pixel less above its words to stay centred (measured
   at 1200 and 1366). */
@media (min-width: 1200px) and (max-width: 1439px) { .header-cta { padding-block: 15px 13px; } }


/* Narrow screens (below 1200px): the menu becomes a panel from the right, opened by the Menu button; the top row stays
   (Joshua, round 15), a little slimmer, with the phone in it (so no Call button), and the sign larger: below. */
@media (max-width: 1199px) {
	:root { --topbar-h: 36px; --menu-h: 72px; --menu-h-compact: 62px; }
	.topbar { gap: 18px; }
	.topbar-links { gap: 18px; }
	.header-tools { grid-column: 2; grid-row: 2; display: flex; align-items: center; justify-content: flex-end; }
	/* Menu: plain words and a larger hamburger on the blue, no outline (Joshua, round 17), its right edge under the
	   Facebook icon's above it (the padding keeps a full tap target; the negative margin lines the words up). */
	.nav-toggle {
		display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 3px 12px 0; margin-right: -11.5px;
		border: 0; border-radius: 12px; background: none;
		color: #fff; font: 700 1.1875rem/20px var(--display); text-decoration: none; cursor: pointer;
		transition: color .2s ease;
	}
	.nav-toggle:hover { color: #FFEDB8; }
	.nav-toggle .icon { position: relative; top: -2px; width: 26px; height: 26px; }      /* (lifted to centre on "Menu", capital to baseline: measured, round 18) */
	.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-direction: column; align-items: stretch; gap: 24px;
		width: min(420px, 100%); margin: 0; padding: calc(var(--topbar-h) + var(--menu-h) + 14px) 22px 24px; overflow-y: auto;      /* (its items start under the close button) */
		background: linear-gradient(to bottom, var(--blue-top), var(--blue) 40%, var(--blue-low));
		border-left: 1px solid var(--line-gold); box-shadow: -18px 0 44px rgba(4, 30, 28, .35);
		transform: translateX(105%); visibility: hidden;
		transition: transform .3s var(--ease-out), visibility 0s .3s;
	}
	.site-nav.is-open { transform: none; visibility: visible; transition: transform .3s var(--ease-out); }
	.nav-list { flex-direction: column; align-self: auto; }
	/* (Round 28, Joshua: the panel fits a phone without scrolling, 616px tall, down to 360 x 640 and an iPhone with
	   Safari's bars showing: the season and address are out of it and the rows 3px slimmer each side, still 51px.) */
	.nav-link { padding: 12px 14px; font-size: 1.3125rem; border-radius: 10px; }
	.nav-item + .nav-item { border-top: 1px solid rgba(255, 255, 255, .14); }
	.nav-link { flex: 1; }
	.nav-link.is-current { background: linear-gradient(to bottom, #FCF8EE, var(--sand) 55%, #EEE2C8); box-shadow: 0 2px 0 rgba(4, 50, 84, .4); }
	.nav-link.is-current::after { content: ""; position: absolute; inset: 4px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(176, 122, 36, .55); }
	.nav-mark { display: none; }
	.header-cta { align-self: flex-start; font-size: 1.1875rem; }
	.nav-extra { display: grid; gap: 18px; color: var(--on-teal); font-size: 1.125rem; }
	.nav-contact .icon { width: 18px; height: 18px; color: var(--gold); transform: translateY(3px); }
	.nav-contact { display: grid; gap: 12px; }
	.nav-contact a { display: inline-flex; gap: 10px; color: #fff; text-decoration: none; line-height: 1.4; }
	.nav-contact a:hover { text-decoration: underline; }
	.nav-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(4, 30, 28, .5); }
	.header-tools:has(.nav-toggle[aria-expanded="true"]) { position: relative; z-index: 80; }
	/* The sign, larger (Joshua, rounds 14 to 16): its top at the top of the screen, at most 156px tall (round 16: its
	   middle on the header's foot made it larger than on wide screens), so 322px wide; on phones as wide as fits beside
	   the Menu button with 12px to spare. The oval is .485 of the sign's width tall and starts .019 of it down. */
	.header-grid {
		--tools-w: 102px;      /* (the Menu button: 113px, 11.5px of it in the gutter) */
		--brand-w: clamp(100px, 100cqw - 2 * var(--gutter) - var(--tools-w) - 12px, 156px / .485);
		--brand-top: calc(var(--brand-w) * -.019);
	}
}
@media (max-width: 567px) {      /* (phones: a slimmer header, so the sign, as large as fits, still hangs below it) */
	:root { --topbar-h: 34px; --menu-h: 64px; --menu-h-compact: 58px; }
}
/* The top row keeps what fits beside the sign (Joshua, round 15), with 20px or more to spare: the season, the phone
   number and Facebook from 880px wide; the number and Facebook from 568px; on phones the phone and Facebook icons (the
   phone keeps its name for screen readers: aria-label). (Measured with the sign at its 322px.) */
@media (max-width: 879px) { .topbar-links .topbar-season { display: none; } }
@media (max-width: 567px) {
	.topbar-phone .topbar-text { display: none; }
	.topbar-phone a { width: 32px; height: 32px; justify-content: center; border-radius: 50%; }      /* (a tap target as large as Facebook's) */
	.topbar-phone a:hover { background: rgba(255, 255, 255, .12); }
}
@media (prefers-reduced-motion: reduce) {
	.site-nav, .nav-mark, .brand { transition: none !important; }
}

/* ---------------------------------------------------------------- hero
   Five photos, crossfading, each with a slow zoom toward its own point (Ken Burns); never taller than wide. Nothing
   shades them, and since round 5 nothing big covers them (Joshua: the card hid too much of the photos). The words run
   along a slim frosted teal strip across the photo's foot, all on one line, every piece centred on the strip's middle:
   both lines of the headline on their capitals and baseline, like the buttons' labels. On phones they sit below the
   photo. */
.hero {
	position: relative; padding: 0; overflow: hidden; background: var(--teal-deep);
	--hero-h: min(calc(100svh - var(--header-h)), 100vw, 1060px);      /* (what shows below the header) */
	margin-top: calc(var(--header-h) * -1); height: calc(var(--hero-h) + var(--header-h));      /* (it runs up behind the header: round 20) */
	container-type: inline-size;      /* (the strip spans the hero: 100cqw) */
}
/* Each photo sweeps in from the left over the one before, behind a soft edge (Joshua, round 6). It sits at the left of
   a frame 35% wider than the hero whose last part fades to nothing; the frame slides in from the left while the photo
   inside slides back the same distance, so the photo holds still and only the soft edge travels: transforms alone, on
   the compositor. Going back (the arrow, a swipe) it comes in from the right. Then it slowly draws back: a gentle zoom
   out (round 6: out, not in, and half as fast), 3% over 11.5 seconds. Each photo shows 8s and sweeps in over 2.5s
   (round 11, Joshua: between round 6's 7s and 2s and round 10's 9s and 3s). js/site.js initHero(). */
.hero-slides { position: absolute; inset: 0; --sweep: 2.5s; --sweep-ease: cubic-bezier(.45, 0, .25, 1); }
.hero-frame {
	position: absolute; top: 0; bottom: 0; left: 0; width: 135%; visibility: hidden;
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% / 1.35), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% / 1.35), transparent);
}
.hero-frame.is-current { visibility: visible; z-index: 2; }
.hero-frame.is-leaving { visibility: visible; z-index: 1; }      /* (the one it sweeps over) */
.hero-slide {
	position: absolute; top: var(--header-h); left: 0; width: calc(100% / 1.35); height: calc(100% - var(--header-h)); object-fit: cover;
	transform: scale(1.03); transform-origin: var(--origin, 50% 50%);      /* (where the zoom starts, so nothing jumps) */
}
/* Behind the frosted top row: the same photo's top edge (the same file, so nothing more to load), sweeping in with it.
   Behind the solid menu row there's nothing to see, so the photo below keeps exactly the crop it had. */
.hero-top { position: absolute; top: 0; left: 0; width: calc(100% / 1.35); height: var(--topbar-h); object-fit: cover; object-position: 50% 0; }
.hero-frame.is-back { left: auto; right: 0; -webkit-mask-image: linear-gradient(to left, #000 calc(100% / 1.35), transparent); mask-image: linear-gradient(to left, #000 calc(100% / 1.35), transparent); }
.hero-frame.is-back .hero-slide, .hero-frame.is-back .hero-top { left: auto; right: 0; }
.hero-frame.is-moving .hero-slide { animation: kenburns 11.5s linear both; }
.hero-frame.is-sweeping { animation: sweep var(--sweep) var(--sweep-ease) both; }
.hero-frame.is-sweeping .hero-slide, .hero-frame.is-sweeping .hero-top { animation: sweep-hold var(--sweep) var(--sweep-ease) both; }
.hero-frame.is-sweeping.is-moving .hero-slide { animation: sweep-hold var(--sweep) var(--sweep-ease) both, kenburns 11.5s linear both; }
.hero-frame.is-back.is-sweeping { animation-name: sweep-back; }
.hero-frame.is-back.is-sweeping .hero-slide, .hero-frame.is-back.is-sweeping .hero-top { animation-name: sweep-back-hold; }
.hero-frame.is-back.is-sweeping.is-moving .hero-slide { animation-name: sweep-back-hold, kenburns; }
.hero.is-paused .hero-frame.is-moving .hero-slide { animation-play-state: paused; }
.hero.is-paused .hero-frame.is-sweeping.is-moving .hero-slide { animation-play-state: running, paused; }      /* (a sweep under way finishes) */
@keyframes kenburns { from { transform: scale(1.03); } to { transform: scale(1); } }
@keyframes sweep { from { transform: translateX(-100%); } }
@keyframes sweep-hold { from { translate: 135% 0; } }      /* (the photo's own width: the frame's 135%) */
@keyframes sweep-back { from { transform: translateX(100%); } }
@keyframes sweep-back-hold { from { translate: -135% 0; } }
.hero-inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; }
/* The campground's notice (road closures and other news that won't last: editor, Home, Notice), above the headline. A
   warm gold card with a sunset-red megaphone, on the photo just over the strip, clear of the script's capitals where
   they rise above it; on phones between the photo and the headline. It eases up into place once, as the page opens. */
.hero-notice {
	--rise: clamp(10px, 1.375cqw - 6.3px, 20px);      /* (how far the script's capitals rise over the strip, measured 1200-2560: 10px at 1200, 20px from about 1910, where the script stops growing) */
	position: relative; display: flex; align-items: flex-start; gap: 14px;
	max-width: min(46rem, 100%); margin: 0 0 calc(var(--rise) + 18px); padding: 14px 24px 14px 14px; border-radius: 14px;
	background: linear-gradient(to bottom, #FCE6A8, var(--gold-light)); color: var(--navy);
	box-shadow: 0 10px 30px rgba(4, 30, 28, .3), inset 0 1px rgba(255, 255, 255, .55);
	font-size: 1.1875rem; font-weight: 500; line-height: 1.45;
	animation: notice-in .6s .15s cubic-bezier(.2, .7, .2, 1) both;
}
.hero-notice p { margin: 0; }
.hero-notice a { color: inherit; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.hero-notice a:hover { text-decoration-thickness: 2.5px; }
.hero-notice-icon {
	flex: none; display: grid; place-items: center; width: 37px; height: 37px; margin-top: -6px; border-radius: 50%;      /* (its middle on the first line's capitals: 13px caps, so an odd size) */
	background: var(--sun-red); color: #fff; box-shadow: inset 0 -2px rgba(0, 0, 0, .12);
}
.hero-notice-icon .icon { width: 19px; height: 19px; }
@keyframes notice-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .hero-notice { animation: none; } }
.hero-card {
	--t1: clamp(1.5rem, .9rem + 1.05cqw, 2.25rem);      /* "Family Camping on" */
	--t2: clamp(4.4rem, 1.65rem + 4.84cqw, 7.425rem);   /* "Lake Winnipesaukee" (round 8, Joshua: larger, over the strip's edge; round 19: 10% larger again) */
	--base: calc(.305 * var(--t2) + 9.5px);             /* the shared baseline, above the hero's foot: room for the script's p (.305 of its size), its outline and drop (4.5px) and 5px */
	position: relative; display: flex; align-items: center; width: 100%; color: #fff;
	height: max(84px, 2 * var(--base) + .73 * var(--t1));      /* (as much above the capitals of "Family Camping on", .73 of its size, as below their baseline: centred on them) */
}
.hero-card::before {                              /* the strip, the hero's full width, with a groove along its top (round 9: no gold line) */
	content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50cqw); pointer-events: none;
	border-top: 1px solid rgba(2, 36, 32, .6); box-shadow: inset 0 1px rgba(255, 255, 255, .09);
	background: var(--frost);
	-webkit-backdrop-filter: var(--frost-filter); backdrop-filter: var(--frost-filter);
}
/* The two lines stand on one baseline (Joshua, round 9), "Lake Winnipesaukee" much larger, its capitals rising a little
   over the strip's top edge onto the photo (round 8). "Family Camping on" is centred in the strip on its capitals and
   baseline, its descenders left out (round 19, Joshua), and the script shares its baseline. That baseline is held just
   high enough above the hero's foot that the script's p (.305 of its size below the baseline, plus its outline and drop)
   is never cut, and the strip is as tall as centring the capitals then needs; the script's capitals rise over it (about
   19px at 1920, 10px at 1200). The two share a baseline by flex alignment, so every browser lines them up the same; the
   script takes no room in the line (negative margins), so "Family Camping on" sets the line's box. That box is exactly
   Aleo's ascent and descent (.905 and .295 of its size), each rounded to a whole pixel as Chrome rounds them, so its
   baseline is its descent above the box's foot in every browser (a line of 1 put Chrome's up to 1.3px high). */
.hero-title {
	position: absolute; left: 0; bottom: calc(var(--base) - var(--t1-desc));
	--t1-desc: round(.295 * var(--t1), 1px);
	display: flex; align-items: baseline; gap: 0 .4em; margin: 0; color: #fff; line-height: 1; white-space: nowrap;
}
.hero-title-1 { font-size: var(--t1); font-weight: 700; letter-spacing: -.005em; line-height: calc(round(.905 * var(--t1), 1px) + var(--t1-desc)); }
.hero-title-2 {
	position: relative; margin: -.75em 0 -.2em 10px;      /* (10px more room after "on": Joshua, round 10) */
	font: 400 var(--t2)/1 var(--script); letter-spacing: 0;
	color: var(--gold-light); text-shadow: 0 3px 0 #0A4842, 0 0 20px rgba(4, 30, 28, .45);
	-webkit-text-stroke: 7px #0A4842; paint-order: stroke fill;      /* a deep teal edge, like the sign's letters: where the capitals stand on the photo it keeps them 4.5:1 or better */
}
/* Now and then a shine crosses the gold script, like gilding catching the sun (Joshua, round 10), and the header's
   Reservations button with it (round 12): once after the page loads, then every second photo, just after it has swept
   in, while the hero is on screen (js/site.js initHero(); resting while paused, never for reduced motion). A copy of the words (data-text) lies over them, clear but for a soft band of light that shows only
   inside the letters (background-clip: text) and travels left to right. Its alt text is empty, so it isn't read twice. */
.hero-title-2::after {
	content: attr(data-text); content: attr(data-text) / "";
	position: absolute; inset: -.35em -.3em; padding: .35em .3em; pointer-events: none;      /* (reaching past the words' box, so the L's swash and the p's foot shine too) */
	color: transparent; -webkit-text-stroke: 0; text-shadow: none;
	background: linear-gradient(110deg, transparent 44%, rgba(255, 251, 232, .42) 47.5%, rgba(255, 253, 244, .8) 50%, rgba(255, 251, 232, .42) 52.5%, transparent 56%) 100% 0 / 250% 100% no-repeat;
	-webkit-background-clip: text; background-clip: text;
	opacity: 0;
}
:root { --shine: 2.4s; --shine-ease: cubic-bezier(.45, 0, .3, 1); }      /* (2.4s: round 12, Joshua: 1.6s was easy to miss) */
.hero-title-2.is-shining::after { animation: shine var(--shine) var(--shine-ease) both; }
@keyframes shine {
	from { background-position: 100% 0; opacity: 1; }
	to { background-position: 0 0; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .hero-title-2::after { display: none; } }
/* The pause button: a ring that fills while each photo shows, and pauses the slideshow and its zoom (WCAG 2.2.2). */
.hero-pause {
	position: relative; width: 52px; height: 52px; margin-left: auto; padding: 0; border: 0; border-radius: 50%;
	display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer;
}
.hero-pause:hover { background: rgba(255, 255, 255, .2); }
.hero-ring { position: absolute; inset: 4px; width: 44px; height: 44px; transform: rotate(-90deg); }
.ring-track, .ring-fill { fill: none; stroke-width: 2.5; }
.ring-track { stroke: rgba(255, 255, 255, .3); }
.ring-fill { stroke: var(--gold-light); stroke-dasharray: 100; stroke-dashoffset: 100; }
.hero.is-playing .ring-fill { animation: ring var(--hold, 7s) linear forwards; }
.hero.is-paused .ring-fill { animation-play-state: paused; }
@keyframes ring { to { stroke-dashoffset: 0; } }
.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-arrow {
	position: absolute; z-index: 3; top: calc(var(--header-h) + var(--hero-h) * .42); width: 52px; height: 52px; border: 0; border-radius: 50%;
	display: grid; place-items: center; background: rgba(8, 72, 66, .55); color: #fff; cursor: pointer;
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	opacity: 0; transition: opacity .25s ease, background-color .2s;
}
.hero-arrow .icon { width: 22px; height: 22px; }
.hero-prev { left: 18px; }
.hero-next { right: 18px; }
.hero:hover .hero-arrow, .hero-arrow:focus-visible { opacity: 1; }
.hero-arrow:hover { background: rgba(8, 72, 66, .8); }
@media (hover: none) { .hero-arrow { display: none; } }
@media (prefers-reduced-motion: reduce) {
	.hero-slide { transform: none; }
	.hero-frame.is-moving .hero-slide, .hero-frame.is-sweeping, .hero-frame.is-sweeping .hero-slide, .hero-frame.is-sweeping .hero-top { animation: none; }
}
/* Below the full menu (tablets): the two lines stacked and centred in the strip, the pause button at its right. */
@media (min-width: 761px) and (max-width: 1199px) {
	.hero-card { --t2: clamp(4rem, 1.5rem + 4.4cqw, 6.75rem); display: block; height: auto; padding: 18px 72px 20px; text-align: center; }      /* (stacked: the script keeps its round-8 size) */
	.hero-title { position: static; display: block; white-space: normal; }
	.hero-title-1, .hero-title-2 { display: block; line-height: 1; }
	.hero-title-2 { margin: .04em 0 0; padding-bottom: .06em; line-height: 1.05; text-shadow: 0 2px 0 rgba(4, 30, 28, .35); -webkit-text-stroke: 0; }
	.hero-pause { position: absolute; right: 0; top: 50%; translate: 0 -50%; }
	.hero-notice { align-self: center; max-width: min(40rem, 100%); margin-bottom: 16px; }      /* (the script stays inside the strip here) */
}
/* Phones: the photo alone (a 4:3 window), the two lines below it on the welcome's teal, stacked and centred. */
@media (max-width: 760px) {
	.hero { margin-top: 0; height: auto; overflow: visible; background: var(--teal); container-type: normal; }
	.hero-slide { top: 0; height: 100%; }
	.hero-top { display: none; }
	.hero-arrow { top: calc(100vw * 3.1 / 8 - 26px); }      /* (on the photo's middle) */
	.hero-slides { position: relative; inset: auto; aspect-ratio: 4 / 3.1; overflow: hidden; }
	.hero-inner { height: auto; padding-top: 14px; }
	.hero-card { display: block; height: auto; padding: 0; text-align: center; }
	.hero-card::before { display: none; }
	.hero-title { position: static; display: block; margin: 0; white-space: normal; }
	.hero-title-1, .hero-title-2 { display: block; line-height: 1; }
	.hero-title-1 { font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.9rem); }
	.hero-title-2 { margin: .02em 0 0; padding-bottom: .06em; font-size: min(clamp(3rem, 2rem + 3.4vw, 5.4rem), (100vw - 2 * var(--gutter)) / 7.1); line-height: 1.05; text-shadow: 0 2px 0 rgba(4, 30, 28, .35); -webkit-text-stroke: 0; }      /* (one line down to 320px: it's 6.98em long) */
	.hero-card { position: static; }      /* (so the pause button is placed from the top of the words, which a notice doesn't move) */
	.hero-pause { position: absolute; top: calc(-100vw * 3.1 / 4 + 20px); right: var(--gutter); margin: 0; background: rgba(8, 72, 66, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
	.hero-notice { align-self: stretch; max-width: none; margin: 4px 0 18px; padding: 13px 18px 13px 13px; font-size: 1.125rem; box-shadow: 0 4px 16px rgba(4, 30, 28, .28), inset 0 1px rgba(255, 255, 255, .55); }
	.hero-notice-icon { width: 36px; height: 36px; }      /* (12px caps here: an even size) */
}

/* ---------------------------------------------------------------- welcome (on the teal). Round 25 (Joshua): the four
   "at a glance" boxes under it are gone, and it takes the sections' own padding (its old 96px top was looser than
   the rest since round 22). */
.welcome-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 96px); align-items: center; }
.welcome-text p { font-size: var(--lead); line-height: 1.55; }
.welcome-text .welcome-lead { margin-top: -.2em; font: 600 var(--lead)/1.4 var(--display); color: var(--gold-light); }      /* (the hero's old tagline, round 5) */
.welcome-photos { position: relative; margin: 0; padding: 0 0 clamp(44px, 5vw, 80px) clamp(44px, 5vw, 80px); }
.welcome-big img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: 0 24px 50px rgba(4, 30, 28, .35); }
.welcome-inset { position: absolute; left: 0; bottom: 0; width: 46%; }
.welcome-inset img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; border: 6px solid var(--teal); box-shadow: 0 16px 34px rgba(4, 30, 28, .35); }
.est-badge {
	position: absolute; right: clamp(-12px, -1vw, 0px); top: clamp(-34px, -2.4vw, -18px);
	width: clamp(104px, 9vw, 140px); aspect-ratio: 1; border-radius: 50%;
	display: grid; place-content: center; text-align: center;
	background: radial-gradient(circle at 50% 35%, #FFE9A6, var(--gold) 72%);
	box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .5), inset 0 0 0 6px rgba(168, 116, 40, .35), 0 12px 26px rgba(4, 30, 28, .35);
	color: var(--navy); transform: rotate(-8deg);
}
.est-badge span { font: 400 clamp(1.4rem, 1rem + 1vw, 2rem)/1 var(--script); }
.est-badge strong { font: 800 clamp(1.6rem, 1.1rem + 1.2vw, 2.4rem)/1 var(--display); letter-spacing: .01em; }
@media (max-width: 1000px) {
	.welcome-grid { grid-template-columns: 1fr; }
	.welcome-photos { max-width: 720px; }
}

/* ---------------------------------------------------------------- amenities (on the sand) */
/* Three across (from 1101px), each card's photo, heading and list share rows with the others' (subgrid), so a heading
   that wraps to two lines ("Facilities & Comfort" up to 1279px wide) never puts its list out of line with the others'
   (round 22). The three are always one row there, so the grid needs no row gap (a subgrid inherits it inside each card). */
.amenity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 32px); }
.amenity {
	display: flex; flex-direction: column; overflow: hidden;
	border-radius: var(--radius); background: #fff; box-shadow: var(--shadow), inset 0 0 0 1px var(--sand-line);
}
@media (min-width: 1101px) {
	.amenity-grid { row-gap: 0; }
	.amenity { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
	.amenity-photo { grid-row: 1; }
	.amenity h3 { grid-row: 2; }
	.amenity .ticks { grid-row: 3; align-self: start; }
}
.amenity-photo { overflow: hidden; }
.amenity-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s var(--ease-out); }
.amenity:hover .amenity-photo img { transform: scale(1.035); }
.amenity h3 { display: flex; align-items: center; gap: 14px; margin: 24px 28px 14px; font-size: 1.625rem; }
.amenity-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--teal); color: #fff; flex: none; }
.amenity-icon .icon { width: 24px; height: 24px; }
.ticks { display: grid; gap: 9px; margin: 0 28px 28px; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; line-height: 1.4; }
.ticks .icon { width: 20px; height: 20px; margin-top: 3px;      /* (on the capitals' middle) */ color: var(--teal-bright); }
@media (max-width: 1100px) { .amenity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .amenity-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- campsites: the rates, with a Per Night | Per 7 Days
   switch that changes every price (js/site.js initRates). Prices sit in even figures in a fixed column, so nothing
   moves when they change.
   Round 22 (Joshua: the switch was easy to miss beside the intro): the four cards are one panel, joined by fine lines,
   and the switch sits in a teal bar across its top, so it reads as the panel's own control. Where the cards stack (two
   or one across, 1300px and under) the bar stays under the header while the panel scrolls past, so the switch is never
   far away; wider, the whole panel is in view. The panel clips with overflow: clip, not hidden, so the bar can stick. */
.rates-panel { overflow: clip; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow), 0 0 0 1px var(--teal); }      /* (its outline and the lines between the cards in the bar's teal: round 23, Joshua) */
.rates-bar {
	position: relative; z-index: 2;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; padding: 14px 20px;
	background: linear-gradient(to bottom, var(--teal-bright), var(--teal)); color: var(--on-teal);
}
.rates-bar-label { display: inline-flex; align-items: center; gap: 10px; font: 700 1.3125rem/1.2 var(--display); color: #fff; }
.rates-bar-label .icon { width: 22px; height: 22px; color: var(--gold-light); }
.rate-toggle {
	position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 14px;
	background: var(--sand); box-shadow: inset 0 0 0 1px var(--sand-line), inset 0 2px 4px rgba(60, 40, 10, .08);
}
.rate-toggle button {
	position: relative; z-index: 1; min-width: 150px; min-height: 48px; padding: 4px 20px 0; border: 0; border-radius: 10px;
	background: none; color: var(--teal-ink); font: 700 1.125rem/20px var(--display); cursor: pointer; transition: color .3s;
}
.rate-toggle button[aria-checked="true"] { color: #fff; }
.toggle-thumb {
	position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 10px;
	background: linear-gradient(to bottom, var(--teal-bright), var(--teal)); box-shadow: 0 2px 6px rgba(9, 72, 66, .35);
	transition: transform .35s var(--ease-out);
}
.rate-toggle[data-period="week"] .toggle-thumb { transform: translateX(100%); }
.rate-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--teal); }      /* (the gaps are the lines between the cards) */
/* The cards side by side share rows (subgrid, the body a subgrid of the card): photo, title, description, prices. So
   the prices start on one line across the row, under the longest description, wherever the words wrap (round 23,
   Joshua: the trailer sites' two rows sat at the foot of their card instead of level with By the Lake's three). A card
   with one price fills the prices' row with its sand panel. (The grid's 1px gap falls inside each card too, unseen
   on its white.) */
.rate-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; background: #fff; }
.rate-photo { grid-row: 1; }
.rate-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.rate-art img { object-position: 50% 100%; }      /* the drawing: cut from the top where the photos are 2:1 */
.rate-body { display: grid; grid-row: 2 / span 3; grid-template-rows: subgrid; padding: 22px 24px 24px; }
.rate-body h3 { margin-bottom: .2em; font-size: 1.625rem; }
.rate-text { color: var(--muted); font-size: 1.125rem; line-height: 1.45; }
.rate-rows { align-self: start; margin: 0; display: grid; gap: 0; }
.rate-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px dashed var(--sand-line); }
.rate-row dt { font-weight: 600; line-height: 1.3; }
.rate-row dd { margin: 0; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.price { font: 700 1.75rem/1 var(--display); color: var(--teal-ink); font-variant-numeric: tabular-nums lining-nums; }
.per { font-size: .9375rem; color: var(--muted); }
.rate-row .price { display: inline-block; min-width: 3.4ch; text-align: right; }
/* A card with one price shows it large, in a sand panel filling the card's room, so the cards stay level without a
   gap in the middle. */
.rate-rows.is-solo { align-self: stretch; }
.is-solo .rate-row { flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; padding: 18px 12px; border: 0; border-radius: 14px; background: var(--sand); box-shadow: inset 0 0 0 1px var(--sand-line); text-align: center; }
.is-solo .rate-row dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.is-solo .rate-row dd { flex-direction: column; align-items: center; gap: 6px; }
.is-solo .price { font-size: 2.75rem; min-width: 0; }
.is-solo .per { min-width: 0; font-size: 1.0625rem; }
.rate-row .per { display: inline-block; min-width: 4.9em; }
.price.is-changing, .per.is-changing { animation: price-in .4s var(--ease-out); }
@keyframes price-in { from { opacity: 0; transform: translateY(.4em); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .price.is-changing, .per.is-changing { animation: none; } .toggle-thumb { transition: none; } }
@media (max-width: 1300px) { .rate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rates-bar { position: sticky; top: var(--menu-h-compact); } }
@media (max-width: 640px) {
	.rate-grid { grid-template-columns: 1fr; }
	.rates-bar { padding: 10px 12px; }
	.rates-bar-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }      /* (still names the switch for screen readers) */
	.rate-toggle { width: 100%; } .rate-toggle button { min-width: 0; }
}
.fees { margin-top: clamp(28px, 3vw, 48px); padding: clamp(24px, 2.6vw, 40px); border-radius: var(--radius); background: var(--sand); box-shadow: inset 0 0 0 1px var(--sand-line); }
.fees h3 { display: flex; align-items: center; gap: 12px; margin-bottom: .7em; }      /* (a little more room over the fees: round 24) */
.fees h3 .icon { width: 26px; height: 26px; color: var(--teal-bright); }
.fees-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(20px, 3vw, 56px); align-items: start; }
/* The guest fees: each price says what it's for ("$5 per day", "$10 overnight"; round 23, Joshua: the Day and Overnight
   headings over the columns looked top-heavy). Each price is right-aligned in a column wide enough for "$2.50", so the
   words after them line up. */
.fee-list { margin: 0; background: #fff; border: 1px solid var(--sand-line); border-radius: 12px; container-type: inline-size; }      /* (a real border, outside the first row as the line above the second is: round 24, Joshua saw the first row's words sit higher) */
.fee-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 4px 22px; padding: 15px 18px 13px; border-top: 1px solid var(--sand-line); }      /* (15/13: the capitals centred between the lines) */
.fee-row:first-child { border-top: 0; }
.fee-row dt { font-weight: 600; line-height: 1.3; }
.fee-row dd { margin: 0; white-space: nowrap; }
.fee-row .price { display: inline-block; min-width: 4.4ch; font-size: 1.3125rem; text-align: right; }
.fee-notes { display: grid; gap: 10px; }
.fee-notes li, .rental-notes li, .policies li { position: relative; padding-left: 26px; line-height: 1.5; }
/* Each mark is centred on its first line's capitals, cap top to baseline (round 21, Joshua: they sat 2.5-3.5px low). In
   Source Sans 3 the capitals' middle is .03em above the line's middle; measured in the pixels. */
.fee-notes li::before, .rental-notes li::before, .policies li::before {
	content: ""; position: absolute; left: 2px; top: calc(.72em - 4.5px); width: 9px; height: 9px; border-radius: 50%;      /* (odd, like the 13px capitals, so it can sit exactly on their middle) */
	background: linear-gradient(to bottom, var(--sun-mid), var(--sun-low));
}
@media (max-width: 900px) { .fees-grid { grid-template-columns: 1fr; } }
/* Where the list is too narrow for a guest on one line (by its own width: beside the notes on tablets, and on phones),
   the name goes across the top and the two prices under it. */
@container (max-width: 540px) {
	.fee-row { grid-template-columns: 7em minmax(0, 1fr); gap: 4px 16px; padding: 16px 18px 12px; }
	.fee-row dt { grid-column: 1 / -1; }
	.fee-row .price { min-width: 0; text-align: left; }
}
@media (max-width: 700px) {
	.amenity-photo img { aspect-ratio: 16 / 9; }
	.rate-photo img { aspect-ratio: 2 / 1; }
	.is-solo .rate-row { flex-direction: row; padding: 14px; }
	.is-solo .rate-row dd { flex-direction: row; align-items: baseline; gap: 8px; }
	.is-solo .price { font-size: 2.25rem; }
}

/* ---------------------------------------------------------------- rentals (on the sand) */
.rental-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 30px); }
.rental { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow), inset 0 0 0 1px var(--sand-line); }
.rental-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
/* A rental with a floor plan: its picture opens it large (round 24, Joshua: in place of a See the Floor Plan button),
   with the site map's Zoom In label in its corner. Not on phones (round 25, Joshua): the lightbox could show it no
   larger than the card, so there it's a plain picture (js/site.js makes it a button only from 701px). */
.rental-photo.plan-open { position: relative; }
.rental-photo.plan-open .map-zoom { display: none; }
@media (min-width: 701px) {
	.rental-photo.plan-open { cursor: zoom-in; }
	.rental-photo.plan-open .map-zoom { display: inline-flex; }
	.rental-photo.plan-open img { transition: transform .6s var(--ease-out); }
	.rental-photo.plan-open:hover img { transform: scale(1.02); }
	.rental-photo.plan-open:focus-visible { outline-offset: -4px; }
}
.rental-photo.is-plan { padding: 18px; background: #fff; border-bottom: 1px solid var(--sand-line); }
.rental-photo.is-plan img { aspect-ratio: auto; height: calc((100% - 36px)); max-height: none; object-fit: contain; }
.rental-photo.is-plan { aspect-ratio: 16 / 10; display: grid; place-items: center; }
.rental-photo.is-plan img { width: 100%; height: 100%; }
.rental-body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 22px 26px 26px; }
.rental-body h3 { margin-bottom: .35em; font-size: 1.625rem; }
.rental-sites { display: block; margin-top: .25em; font: 600 1.0625rem/1.3 var(--sans); color: var(--muted); letter-spacing: 0; }
.rental-price { display: flex; align-items: baseline; gap: 8px; margin: auto 0 18px; }
.rental-price .price { font-size: 2.125rem; }
.rental-body > :last-child { margin-bottom: 0; }
.rental-notes { grid-column: 1 / -1; padding: clamp(24px, 2.6vw, 40px); border-radius: var(--radius); background: #fff; box-shadow: inset 0 0 0 1px var(--sand-line); }
.rental-notes h3 { display: flex; align-items: center; gap: 12px; }
.rental-notes h3 .icon { width: 24px; height: 24px; color: var(--teal-bright); }
.rental-notes ul { columns: 2; column-gap: clamp(24px, 3vw, 56px); }
.rental-notes li { break-inside: avoid; margin-bottom: 10px; }
@media (max-width: 1100px) { .rental-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .rental-grid { grid-template-columns: 1fr; } .rental-notes ul { columns: 1; } }

/* ---------------------------------------------------------------- site map & rules: the map stays in view while the
   rules scroll past beside it; it opens large, to zoom and drag (js/site.js initMap). */
.sitemap-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4.5vw, 88px); align-items: start; }
.map-col { align-self: stretch; }      /* (as tall as the rules beside it, so the map has room to stay in view) */
.map-sticky .map-card { width: min(100%, calc((100svh - 250px) * 1.017)); }      /* (the whole map fits the window: it is 1396 x 1373) */
.map-sticky { position: sticky; top: calc(var(--menu-h-compact) + 24px); }
.map-intro { font-size: var(--lead); line-height: 1.5; color: var(--muted); }
.map-card {
	position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; cursor: zoom-in;
	background: #fff; box-shadow: var(--shadow), inset 0 0 0 1px var(--sand-line);
}
.map-card img { width: 100%; transition: transform .6s var(--ease-out); }
.map-card:hover img { transform: scale(1.02); }
.map-zoom {
	position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 16px; border-radius: 10px; background: rgba(9, 86, 79, .88); color: #fff; font: 700 1.0625rem/20px var(--display);
}
.map-zoom .icon { width: 18px; height: 18px; }
.map-pdf { margin-top: 16px; }
.map-pdf a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.rules { display: grid; gap: 4px; counter-reset: rule; }
.rule { display: grid; grid-template-columns: 46px 1fr; gap: 18px; padding: 18px 0; border-top: 1px solid var(--sand-line); }
.rule:first-child { border-top: 0; padding-top: 4px; }
/* The number centred on its figures, top to baseline (round 21, Joshua: it sat 1-2px high): Aleo's 19px figures are 14px
   tall, and a 41px line under 3px of padding puts their baseline 29px down the 44px circle (Chrome rounds Aleo's ascent
   and descent to 17px and 6px), so they run from 15px to 29px. */
.rule-n {
	display: block; width: 44px; height: 44px; padding: 3px 1px 0 0; border-radius: 50%; text-align: center;      /* (the 1px on the right: Aleo's figures lean right) */
	background: var(--sand); box-shadow: inset 0 0 0 2px var(--gold); color: var(--navy); font: 700 1.1875rem/41px var(--display);
}
.rule h3 { margin: 6px 0 6px; font-size: 1.3125rem; }
.rule p { margin-bottom: .6em; line-height: 1.5; }
.rule p:last-child, .rule ul:last-child { margin-bottom: 0; }
.dash-list { display: grid; gap: 6px; margin: 0 0 .6em; }
.dash-list li { position: relative; padding-left: 22px; line-height: 1.45; }
.dash-list li::before { content: ""; position: absolute; left: 2px; top: calc(.675em - 1px); width: 10px; height: 2px; background: var(--teal-bright); }      /* (on the capitals' middle) */
@media (max-width: 1000px) {
	.sitemap-grid { grid-template-columns: 1fr; }
	.map-sticky { position: static; }
	.map-sticky .map-card { width: 100%; }
}
/* Phones: the first six rules, and a button for the rest (all eighteen would fill several screens). */
.rules-more { display: none; margin: 18px 0 0; }
@media (max-width: 700px) {
	.rules.is-short > .rule:nth-child(n+7) { display: none; }
	.rules-more { display: block; }
	.rules-more [aria-expanded="true"] .icon { transform: rotate(180deg); }
}

/* The map, large: a dialog filling the window, the map draggable and zoomable. */
.map-box { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(247, 240, 226, .82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); overflow: hidden; }
.map-box::backdrop { background: rgba(4, 30, 28, .25); }
.map-stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; }      /* (a click on the glass around the map closes it, like the photos' lightbox: round 21) */
.map-stage img { cursor: grab; }
.map-stage.is-dragging, .map-stage.is-dragging img { cursor: grabbing; }
.map-stage img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; box-shadow: 0 20px 60px rgba(4, 30, 28, .3); border-radius: 8px; }
.map-tools { position: absolute; z-index: 2; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; gap: 6px; padding: 6px; border-radius: 14px; background: var(--teal); box-shadow: 0 10px 30px rgba(4, 30, 28, .35); }
.map-tools button { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 12px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff; font: 700 1rem/1 var(--display); cursor: pointer; }
.map-tools button:hover { background: rgba(255, 255, 255, .22); }
.map-tools .icon { width: 20px; height: 20px; }

/* ---------------------------------------------------------------- photos: a mosaic on the sunset that opens the
   lightbox (all the photos, in the library's order). */
.on-sunset { background: linear-gradient(to bottom, #FFE7A1, var(--sun-mid) 58%, var(--sun-low)); }
.on-sunset h2 { color: var(--navy); text-shadow: var(--white-drop); }
.on-sunset .section-intro p { color: #3A2A12; }
.mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 15vw, 280px); gap: clamp(10px, 1vw, 16px); }
.mosaic-tile { position: relative; display: block; overflow: hidden; border-radius: 14px; box-shadow: 0 10px 24px rgba(90, 40, 10, .22); }
.mosaic-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.mosaic-tile:hover img { transform: scale(1.045); }
.mosaic-tile:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.mosaic-tile:nth-child(6), .mosaic-tile:nth-child(7) { grid-column: span 2; }
.photos-more { margin: clamp(24px, 2.6vw, 40px) 0 0; text-align: center; }
/* Phones: five photos, the large one over two rows of two (round 26, Joshua: the sixth, the cabin, sat alone in its
   row; "See all" opens every one). */
@media (max-width: 760px) {
	.mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 38vw; }
	.mosaic-tile:nth-child(n+6) { display: none; }
}

/* The lightbox: light frosted glass over the page, the photo in the middle, the rest in a strip. */
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(247, 240, 226, .8); -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); overflow: hidden; }
.lightbox::backdrop { background: rgba(4, 30, 28, .2); }
.lightbox[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; }
/* Quick repeated clicks on the lightbox's controls count as double-clicks; they mustn't select text or photos (as on
   otterlake.com, where Joshua saw the photo strip highlighted; the standard for this lightbox). */
.lightbox { -webkit-user-select: none; user-select: none; }      /* (its caption can still be selected) */
.lb-caption { -webkit-user-select: text; user-select: text; }
.lb-img, .lb-thumbs img { -webkit-user-drag: none; }
html.lb-open { overflow: hidden; }
/* The stage's one cell is the room left above the caption and the strip, so a photo's max-height has something to be a
   percentage of (round 21, Joshua: with an auto-sized cell the photos grew past the window and pushed the caption off). */
.lb-stage { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; min-height: 0; padding: 64px 84px 12px; }
.lb-img { width: auto; height: auto; max-width: min(100%, var(--w, 2048px)); max-height: 100%; border-radius: 10px; box-shadow: 0 24px 60px rgba(4, 30, 28, .3); background: #fff; }
.lb-caption { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 16px; margin: 0; padding: 8px 20px; color: var(--ink); font-size: 1.125rem; line-height: 1.45; text-align: center; }
.lb-count { color: var(--muted); white-space: nowrap; }
.lb-thumbs { display: flex; gap: 8px; padding: 8px 20px 18px; overflow-x: auto; scrollbar-width: thin; }
.lb-thumbs button { flex: none; width: 92px; height: 64px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: pointer; opacity: .7; box-shadow: 0 0 0 2px transparent; transition: opacity .2s, box-shadow .2s; background: #ddd; }
.lb-thumbs button:hover { opacity: 1; }
.lb-thumbs button[aria-current] { opacity: 1; box-shadow: 0 0 0 3px var(--teal); }
.lb-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.lb-btn { position: absolute; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--teal); color: #fff; cursor: pointer; box-shadow: 0 8px 20px rgba(4, 30, 28, .3); }
.lb-btn:hover { background: var(--teal-bright); }
.lb-btn .icon { width: 22px; height: 22px; }
.lb-prev { left: 18px; top: 45%; }
.lb-next { right: 18px; top: 45%; }
.lb-close { right: 18px; top: 14px; }
.lightbox.is-single .lb-prev, .lightbox.is-single .lb-next, .lightbox.is-single .lb-thumbs, .lightbox.is-single .lb-count { display: none; }
/* Phones: the arrows either side of the caption, in a row of their own (round 21: they used to sit on it, and the caption
   ran off both edges). */
@media (max-width: 700px) {
	.lightbox[open] { grid-template-columns: 62px minmax(0, 1fr) 62px; grid-template-areas: "stage stage stage" "prev caption next" "thumbs thumbs thumbs"; }
	.lb-stage { grid-area: stage; padding: 70px 10px 8px; }
	.lb-caption { grid-area: caption; align-self: center; padding: 8px 2px; }
	.lightbox.is-single .lb-caption { grid-column: 1 / -1; }
	.lb-thumbs { grid-area: thumbs; }
	.lb-prev, .lb-next { position: static; align-self: center; justify-self: center; width: 46px; height: 46px; }
	.lb-prev { grid-area: prev; }
	.lb-next { grid-area: next; }
}

/* ---------------------------------------------------------------- attractions (on the teal) */
.spot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 30px); }
.spot { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); background: #fff; color: var(--ink); text-decoration: none; box-shadow: 0 18px 40px rgba(4, 30, 28, .3); }
.on-teal a.spot { color: var(--ink); }
.spot-photo { overflow: hidden; }
.spot-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s var(--ease-out); }
.spot:hover .spot-photo img { transform: scale(1.04); }
.spot-body { display: grid; gap: 6px; padding: 20px 24px 24px; line-height: 1.45; }
.spot-body strong { display: flex; align-items: center; gap: 10px; font: 700 1.4375rem/1.2 var(--display); color: var(--teal-ink); }
.spot-body > span { color: var(--muted); font-size: 1.125rem; }
.icon-out { width: 16px; height: 16px; opacity: .65; }
.spot-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; margin-top: clamp(16px, 1.8vw, 30px); }
.spot-list a { display: grid; gap: 4px; height: 100%; padding: 18px 22px; border-radius: 14px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); text-decoration: none; transition: background-color .2s; }
.spot-list a:hover { background: rgba(255, 255, 255, .14); }
.spot-list strong { display: flex; align-items: center; gap: 10px; font: 700 1.25rem/1.25 var(--display); color: #fff; }
.spot-list span { color: var(--on-teal); font-size: 1.0625rem; line-height: 1.4; }
.spot-list .icon-out { color: var(--gold-light); opacity: 1; }
@media (max-width: 1000px) { .spot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .spot-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- directions (on white since round 4): the details over Google's
   map, which runs the container's full width and loads by itself (Joshua). */
.directions-grid { display: grid; gap: clamp(24px, 3vw, 44px); }
.directions-text { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 48px; align-items: end; }
.directions-text h2, .directions-text > p:first-of-type { grid-column: 1; }
.directions-text > p:first-of-type { font-size: var(--lead); color: var(--muted); margin: 0; }
.address-card { grid-column: 1; display: flex; gap: 14px; align-items: flex-start; margin-top: 12px; font-size: 1.25rem; line-height: 1.45; }
.address-card .icon { width: 28px; height: 28px; margin-top: 2px; color: var(--sun-red); }
.directions-actions { grid-column: 2; grid-row: 1 / 4; align-self: end; display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }
.map-embed { position: relative; height: clamp(360px, 36vw, 560px); border-radius: var(--radius); overflow: hidden; background: var(--sand-deep); box-shadow: var(--shadow), inset 0 0 0 1px var(--sand-line); }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 900px) {
	.directions-text { grid-template-columns: 1fr; }
	.directions-actions { grid-column: 1; grid-row: auto; }
}

/* ---------------------------------------------------------------- reservations, on the sand (round 4, Joshua: the bridge rises over
   the cream), with room at the foot for the footer's bridge */
.reserve { padding-bottom: var(--bridge-room); }
.reserve-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.reserve-card {
	position: relative; padding: clamp(28px, 3.2vw, 52px); border-radius: 22px; color: #fff;
	background: linear-gradient(160deg, var(--teal-bright), var(--teal) 55%, var(--teal-deep)); box-shadow: var(--shadow);
}
.reserve-card::before { content: ""; position: absolute; inset: 9px; border-radius: 15px; border: 1px solid rgba(248, 218, 133, .5); pointer-events: none; }
.reserve-card h2 { color: #fff; }
.reserve-note { font: 600 clamp(1.4rem, 1.1rem + .9vw, 1.875rem)/1.35 var(--display); color: var(--gold-light); }
.reserve-call { font-size: var(--lead); color: var(--on-teal); }
.reserve-card .button { position: relative; }
.policies { padding-top: 6px; }
.policies h3 { font-size: clamp(1.6rem, 1.3rem + .8vw, 2.125rem); }
.policies ul { display: grid; gap: 12px; }
@media (max-width: 1000px) { .reserve-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- footer (the bridge rises out of it) */
.site-footer { position: relative; background: var(--teal-deep); color: var(--on-teal); font-size: 1.1875rem; }
.bridge-footer { bottom: 100%; margin-bottom: -1px; background: var(--teal-deep); }
.footer-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr; gap: 40px clamp(28px, 3vw, 56px); padding-block: clamp(36px, 4vw, 64px) clamp(36px, 4vw, 56px); }
.site-footer h2 { margin-bottom: .6em; font-size: 1.375rem; color: var(--gold-light); }
.footer-logo { width: min(260px, 100%); filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .3)); }
.footer-script { margin: 14px 0 0; font: 400 1.875rem/1.1 var(--script); color: var(--gold-light); }
.site-footer a { color: #fff; }
.footer-contact address { margin-bottom: 14px; line-height: 1.5; }
.footer-phone, .footer-social { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.footer-phone:hover, .footer-social:hover { text-decoration: underline; }
.footer-phone .icon, .footer-social .icon { width: 18px; height: 18px; color: var(--gold); }
.footer-links ul { display: grid; gap: 8px; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-season p { margin-bottom: 18px; }
.footer-badge { width: 170px; border-radius: 10px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; padding-block: 24px 30px; border-top: 1px solid rgba(255, 255, 255, .16); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 1rem; color: rgba(242, 250, 248, .9); }
.credit { flex: none; display: block; width: 250px; }
.credit img { width: 100%; height: auto; }
@media (max-width: 1100px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
/* Phones: the sign, the line under it and Visit Us centred in one column (round 27, Joshua), Plan Your Stay and the
   season side by side under them, and the bottom bar centred. */
@media (max-width: 700px) {
	.footer-grid { gap: 32px 20px; }
	.footer-about, .footer-contact { grid-column: 1 / -1; text-align: center; }
	.footer-logo { width: 220px; margin-inline: auto; }
	.footer-bottom { flex-direction: column; align-items: center; text-align: center; }
	.footer-legal { justify-content: center; }
	.credit { width: 220px; }
}

/* ---------------------------------------------------------------- reveal on scroll (js/site.js initReveal) */
.rv-wait { opacity: 0; }
.rv-wait[data-rv="up"] { transform: translateY(26px); }
.rv-wait[data-rv="card"] { transform: translateY(34px) scale(.97); }
.rv-wait[data-rv="focus"] { transform: translateY(20px); filter: blur(8px); }
.rv-wait[data-rv="left"] { transform: translateX(-36px); }
.rv-wait[data-rv="right"] { transform: translateX(36px); }
.rv-go { animation-delay: var(--rv-delay, 0s); animation-fill-mode: both; }
.rv-go.rv-up { animation: rv-up .9s var(--ease-out) var(--rv-delay, 0s) both; }
.rv-go.rv-card { animation: rv-card 1s var(--ease-out) var(--rv-delay, 0s) both; }
.rv-go.rv-focus { animation: rv-focus 1.4s var(--ease-out) var(--rv-delay, 0s) both; }
.rv-go.rv-left { animation: rv-left 1s var(--ease-out) var(--rv-delay, 0s) both; }
.rv-go.rv-right { animation: rv-right 1s var(--ease-out) var(--rv-delay, 0s) both; }
.rv-go.rv-fade { animation: rv-fade .45s ease var(--rv-delay, 0s) both; }
@keyframes rv-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes rv-card { from { opacity: 0; transform: translateY(34px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes rv-focus { from { opacity: 0; transform: translateY(20px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes rv-left { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
@keyframes rv-right { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
@keyframes rv-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.rv-wait[data-rv] { transform: none; filter: none; }
}

/* ---------------------------------------------------------------- text pages (the privacy statement): room at the foot
   for the footer's bridge */
.text-page { padding-bottom: var(--bridge-room); background: #fff; }
.prose { max-width: 52rem; }
.prose h1 { font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem); }
.prose h2 { margin-top: 1.4em; font-size: clamp(1.5rem, 1.2rem + .8vw, 2rem); }
.prose .lead { color: var(--muted); }