/* 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;
	--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(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, 104px);                /* the bridge divider's height (a span is three times as wide) */
	--bridge-room: calc(var(--bridge-h) + clamp(40px, 5vw, 80px));
	--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; }
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 (img/bridge-span.svg, drawn by _tools/make-bridge.py): one span, repeated across the width (round: a whole
   number of spans, stretched a little to fit), in the colour of the section it leads into. */
.bridge {
	position: absolute; left: 0; right: 0; height: var(--bridge-h); pointer-events: none;
	background: var(--teal);
	-webkit-mask: url(/img/bridge-span.svg) 0 100% / auto 100% round no-repeat;
	mask: url(/img/bridge-span.svg) 0 100% / auto 100% round no-repeat;
}

/* ---------------------------------------------------------------- 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 {                                  /* on the hero's card */
	--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-ghost-dark, .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-ghost-dark:hover, .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 teal menu row, a line of gold along its foot like the
   sun on the water. 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;
	--horizon: 3px;            /* the gold line along the header's foot */
	--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(--teal-bright) var(--topbar-h), var(--teal));
	box-shadow: inset 0 calc(var(--horizon) * -1) 0 #F0B04A, 0 10px 30px rgba(4, 30, 28, 0);
	transition: box-shadow .25s;
	container-type: inline-size;
}
.site-header.is-stuck { box-shadow: inset 0 calc(var(--horizon) * -1) 0 #F0B04A, 0 10px 30px rgba(4, 30, 28, .3); }
.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 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; }
.site-header.is-docked .brand {
	top: calc(var(--topbar-h) + 7px); width: calc((var(--menu-h) - var(--horizon) - 14px) * 1.984);
	filter: drop-shadow(0 2px 3px rgba(4, 30, 28, .25));
}
.site-header.is-stuck .brand { top: calc(var(--topbar-h) + 6px); width: calc((var(--menu-h-compact) - var(--horizon) - 12px) * 1.984); }

.topbar {
	grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: space-between; 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 teal; the current section's stands on the setting sun (a half-disc in the sign's
   sunset colours rising from the gold line), which glides from item to item as the page scrolls. Pointing at
   another item lights it gold. */
: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: 0 var(--nav-x);      /* (labels centred on the row above the gold line, 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: var(--gold-light); }
.nav-link.is-current, .nav-link.is-current:hover { color: var(--navy); }
.nav-link:focus-visible { outline-offset: -6px; }
.nav-sun {
	position: absolute; z-index: -1; left: 0; bottom: var(--horizon); width: var(--sun-w, 0px); height: calc(100% - 15px - var(--horizon));
	border-radius: 50% 50% 0 0 / 82% 82% 0 0;
	background: linear-gradient(to bottom, var(--sun-top), var(--sun-mid) 62%, var(--sun-low));
	box-shadow: 0 0 22px rgba(255, 210, 110, .35);
	transform: translateX(var(--sun-x, 0px)); opacity: 0;
	transition: transform .55s var(--ease-out), width .55s var(--ease-out), opacity .35s ease;
	pointer-events: none;
}
.nav-sun.is-on { opacity: 1; }
.nav-sun.no-anim { transition: none; }
.site-header.is-stuck .nav-sun { height: calc(100% - 11px - var(--horizon)); }

/* 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-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 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; } }
@media (max-width: 1439px) { .topbar-town { display: none; } }
@media (max-width: 1299px) { .topbar-season strong { display: none; } }

/* Narrow screens: no top row, a smaller sign, and the menu becomes a panel from the right (below 1200px). */
@media (max-width: 1199px) {
	:root { --topbar-h: 0px; --menu-h: 72px; --menu-h-compact: 62px; --brand-w: 168px; --brand-top: 6px; }
	.topbar { display: none; }
	.header-tools { grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: 10px; }
	.header-call, .nav-toggle {
		display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 3px 16px 0;
		border: 2px solid rgba(255, 255, 255, .85); border-radius: 12px; background: rgba(255, 255, 255, .06);
		color: #fff; font: 700 1.0625rem/20px var(--display); text-decoration: none; cursor: pointer;
	}
	.header-call { border-color: transparent; background: linear-gradient(to bottom, #FAE09A, var(--gold) 70%); color: var(--navy); box-shadow: 0 2px 0 var(--gold-edge); }
	.header-call .icon, .nav-toggle .icon { width: 18px; height: 18px; }
	.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: 88px 22px 32px; overflow-y: auto;
		background: linear-gradient(to bottom, var(--teal-bright), var(--teal) 40%, var(--teal-deep));
		border-left: 3px solid #F0B04A; 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; }
	.nav-link { padding: 15px 14px; font-size: 1.3125rem; border-radius: 10px; }
	.nav-item + .nav-item { border-top: 1px solid rgba(255, 255, 255, .14); }
	.nav-link.is-current { background: linear-gradient(to right, var(--sun-top), var(--sun-mid)); }
	.nav-sun { 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-season { display: flex; gap: 10px; margin: 0; line-height: 1.4; }
	.nav-season .icon, .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; }
}
@media (max-width: 420px) {
	:root { --brand-w: 150px; }
	.header-call span { display: none; }
	.header-call { padding: 0 13px; }
}
@media (prefers-reduced-motion: reduce) {
	.site-nav, .nav-sun, .brand { transition: none !important; }
}

/* ---------------------------------------------------------------- hero
   Six photos, crossfading, each with a slow zoom toward its own point (Ken Burns); never taller than wide. Nothing
   shades them: the words sit on a frosted teal card with a fine gold line inside its edge, like the sign's routed
   border. The bridge runs across the foot of the photos in the welcome's teal. */
.hero {
	position: relative; padding: 0; overflow: hidden; background: var(--teal-deep);
	height: min(calc(100svh - var(--header-h)), 100vw, 1060px);
}
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	opacity: 0; transition: opacity 1.6s ease;
	transform-origin: var(--origin, 50% 50%);
}
.hero-slide.is-current { opacity: 1; }
.hero-slide.is-moving { animation: kenburns 16s linear both; }
.hero.is-paused .hero-slide.is-moving { animation-play-state: paused; }
@keyframes kenburns { from { transform: scale(1.001); } to { transform: scale(1.09); } }
.hero-inner { position: relative; z-index: 2; height: 100%; display: flex; align-items: flex-end; padding-bottom: calc(var(--bridge-h) + clamp(18px, 2.4vw, 40px)); }
.hero-card {
	position: relative; max-width: 720px; padding: clamp(24px, 2.4vw, 36px) clamp(26px, 2.8vw, 44px);
	border-radius: 22px;
	background: rgba(8, 72, 66, .7);      /* (over the brightest sky, the gold script keeps 3:1 and white 4.4:1) */
	-webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25);
	box-shadow: 0 20px 50px rgba(4, 30, 28, .28);
	color: #fff;
}
.hero-card::before {                              /* the routed line */
	content: ""; position: absolute; inset: 8px; border-radius: 15px; pointer-events: none;
	border: 1px solid rgba(248, 218, 133, .55);
}
.hero-title { margin: 0 0 .3em; color: #fff; line-height: 1; }
.hero-title-1 { display: block; font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.9rem); font-weight: 700; letter-spacing: -.005em; }
.hero-title-2 {
	display: block; margin-top: .02em; font: 400 clamp(3rem, 2rem + 3.4vw, 5.4rem)/1.05 var(--script); letter-spacing: 0;
	color: var(--gold-light); text-shadow: 0 2px 0 rgba(4, 30, 28, .35);
	padding-bottom: .06em;
}
.hero-tagline { margin: 0 0 22px; font-size: var(--lead); line-height: 1.45; color: #fff; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; }
/* 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: 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); }
.bridge-hero { bottom: -1px; z-index: 1; }
@media (hover: none) { .hero-arrow { display: none; } }
@media (prefers-reduced-motion: reduce) {
	.hero-slide { transition: none; }
	.hero-slide.is-moving { animation: none; }
}
/* Phones: the photo alone (a 4:3 window), the card's words below it on the welcome's teal. */
@media (max-width: 760px) {
	.hero { height: auto; overflow: visible; background: var(--teal); }
	.hero-slides { position: relative; inset: auto; aspect-ratio: 4 / 3.1; overflow: hidden; }
	.hero-inner { height: auto; padding-top: 6px; padding-bottom: 0; }
	.hero-card { max-width: none; padding: 8px 0 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; }
	.hero-card::before { display: none; }
	.bridge-hero { bottom: auto; top: calc(100vw * 3.1 / 4 - var(--bridge-h) + 1px); }
	.hero-pause { position: absolute; top: calc(-100vw * 3.1 / 4 + 14px); right: 0; background: rgba(8, 72, 66, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
	.hero-actions .button { flex: 1 1 200px; }
}

/* ---------------------------------------------------------------- welcome (on the teal, under the bridge) */
.welcome { padding-top: clamp(40px, 5vw, 80px); }
.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-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; }
.glance { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(8px, 1.5vw, 24px); }
.glance li {
	display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center;
	padding: 20px 22px; border-radius: 16px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.glance .icon {
	grid-row: 1 / 3; width: 52px; height: 52px; padding: 13px; border-radius: 50%;
	background: linear-gradient(to bottom, #FAE09A, var(--gold)); color: var(--navy);
}
.glance strong { font: 700 1.375rem/1.2 var(--display); color: #fff; }
.glance span { font-size: 1.0625rem; line-height: 1.35; color: var(--on-teal); }
@media (max-width: 1300px) { .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) {
	.welcome-grid { grid-template-columns: 1fr; }
	.welcome-photos { max-width: 720px; }
}
@media (max-width: 560px) {
	.glance { gap: 10px; }
	.glance li { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 6px; padding: 16px 14px; align-content: start; }
	.glance .icon { grid-row: auto; width: 44px; height: 44px; padding: 11px; margin-bottom: 4px; }
	.glance strong { font-size: 1.1875rem; }
	.glance span { font-size: 1rem; }
}

/* ---------------------------------------------------------------- amenities (on the sand) */
.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);
}
.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; 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. */
.rates-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: clamp(28px, 3vw, 48px); }
.rates-head .section-intro { margin-bottom: 0; }
.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: clamp(16px, 1.6vw, 28px); }
.rate-card {
	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);
}
.rate-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.rate-body { display: flex; flex-direction: column; flex: 1; 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 { margin: auto 0 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 { flex: 1; margin-top: 6px; }
.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)); } }
@media (max-width: 640px) { .rate-grid { grid-template-columns: 1fr; } .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; }
.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; }
.fee-table { width: 100%; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--sand-line); }
.fee-table th, .fee-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--sand-line); }
.fee-table tr:last-child th, .fee-table tr:last-child td { border-bottom: 0; }
.fee-table thead th { font: 700 1rem/1.2 var(--display); color: var(--muted); }
.fee-table tbody th { font-weight: 600; }
.fee-table td { font: 700 1.3125rem/1.2 var(--display); color: var(--teal-ink); font-variant-numeric: tabular-nums; }
.fee-notes { display: grid; gap: 10px; }
.fee-notes li, .rental-notes li, .policies li { position: relative; padding-left: 26px; line-height: 1.5; }
.fee-notes li::before, .rental-notes li::before, .policies li::before {
	content: ""; position: absolute; left: 2px; top: .62em; width: 10px; height: 10px; border-radius: 50%;
	background: linear-gradient(to bottom, var(--sun-mid), var(--sun-low));
}
@media (max-width: 900px) { .fees-grid { grid-template-columns: 1fr; } }
/* Phones: each guest fee on its own: the name across the top, the day and overnight prices under it, labelled. */
@media (max-width: 560px) {
	.fee-table thead { display: none; }
	.fee-table tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--sand-line); }
	.fee-table tbody tr:last-child { border-bottom: 0; }
	.fee-table th, .fee-table td { border: 0; }
	.fee-table tbody th { grid-column: 1 / -1; padding-bottom: 0; }
	.fee-table td { padding-top: 6px; }
	.fee-table td::before { content: attr(data-label); display: block; font: 600 .9375rem/1.3 var(--sans); color: var(--muted); }
}
@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; }
.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 .plan-open { margin-top: 0; }
.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-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; }
.rule-n {
	display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
	background: var(--sand); box-shadow: inset 0 0 0 2px var(--gold); color: var(--navy); font: 700 1.1875rem/1 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: .7em; width: 10px; height: 2px; background: var(--teal-bright); }
@media (max-width: 1000px) {
	.sitemap-grid { grid-template-columns: 1fr; }
	.map-sticky { position: static; }
}
/* 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; cursor: grab; touch-action: none; }
.map-stage.is-dragging { 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; }
@media (max-width: 760px) {
	.mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 38vw; }
	.mosaic-tile:nth-child(6), .mosaic-tile:nth-child(7) { grid-column: span 1; }
	.mosaic-tile:nth-child(7) { 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; }
html.lb-open { overflow: hidden; }
.lb-stage { display: grid; 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; justify-content: center; gap: 16px; margin: 0; padding: 8px 20px; color: var(--ink); font-size: 1.125rem; 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; }
@media (max-width: 700px) {
	.lb-stage { padding: 70px 10px 8px; }
	.lb-prev, .lb-next { top: auto; bottom: 96px; width: 46px; height: 46px; }
}

/* ---------------------------------------------------------------- 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 the sand): 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 (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; } }
@media (max-width: 700px) {
	.footer-bottom { flex-direction: column; align-items: flex-start; }
	.credit { width: 220px; }
}
@media (max-width: 700px) { .footer-about, .footer-season { grid-column: 1 / -1; } .footer-grid { gap: 32px 20px; } .footer-logo { width: 220px; } }
@media (max-width: 440px) { .footer-contact { grid-column: 1 / -1; } .footer-season { grid-column: auto; } }

/* ---------------------------------------------------------------- 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); }