/* otterlake.com — Otter Lake Camp Resort
   One stylesheet for the whole site. Order: fonts, tokens, base, buttons, header, hero, the home page's
   sections, the lightbox, footer, reveal on scroll. */

/* ---------------------------------------------------------------- fonts (self-hosted, OFL) */
@font-face {
	font-family: "Outfit";
	src: url("/fonts/outfit-latin-wght-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Nunito Sans";
	src: url("/fonts/nunito-sans-latin-wght-normal.woff2") format("woff2");
	font-weight: 200 1000;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Nunito Sans";
	src: url("/fonts/nunito-sans-latin-wght-italic.woff2") format("woff2");
	font-weight: 200 1000;
	font-style: italic;
	font-display: swap;
}

/* ---------------------------------------------------------------- tokens */
:root {
	/* The logo's colors: the lake's royal blue (its letters and waves), the sun's gold and orange, the pines'
	   green and the otter's brown. The blues stay light enough to read as blue, never near-black, except the
	   logo's sun. */
	--lake: #0B4FA6;            /* the welcome and tours sections, the header's menu row */
	--lake-bright: #1668C8;
	--lake-deep: #083E85;       /* the top row, the footer */
	--lake-ink: #0A3470;        /* headings on light backgrounds */
	--night: #041024;           /* behind the video and the tours, before they load */
	--topbar: #E8F2FC;          /* the header's light top row (and its lighter top edge, --topbar-top) */
	--topbar-top: #F7FBFF;
	--sun: #FBB117;             /* "CAMP RESORT": buttons, highlights */
	--sun-hover: #FFC43D;
	--sun-light: #FFD66B;
	--orange: #F7941D;          /* the sun's edge: the plan band */
	--ember: #D8641A;           /* the far shore against the sunset */
	--pine: #1D7A3C;
	--otter: #A55926;
	--sky: #EAF4FD;             /* light sections */
	--sky-line: #CFE2F5;
	--paper: #FFFFFF;
	--ink: #14263F;             /* body text */
	--muted: #3C4F6B;           /* secondary text on light backgrounds: 8.4:1 on white */
	--on-lake: #F4F8FF;         /* text on the blues */

	--display: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--sans: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--container: 1600px;
	--gutter: clamp(16px, 4vw, 48px);
	--section: clamp(56px, 7vw, 112px);        /* vertical space between sections */
	--shore: max(10vw, 64px);                  /* the lake outline's height (160/1600 of the width) */
	--shore-room: calc(var(--shore) + clamp(32px, 4vw, 64px));
	--shadow: 0 18px 44px rgba(8, 62, 133, .16);
	--radius: 20px;
	--ease-out: cubic-bezier(.23, 1, .32, 1);
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 100px; }
/* No scroll anchoring while the header grows back near the top, or while gliding to the top (js/site.js):
   it would push the page down, just short of the top. */
html.is-header-growing, html.is-gliding { overflow-anchor: none; }
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.08;
	letter-spacing: -.015em;
	color: var(--lake-ink);
	text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4.5rem); font-weight: 800; }
h2 { font-size: clamp(2.1rem, 1.5rem + 2vw, 3.3rem); }
h3 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.005em; }
p { margin: 0 0 1em; }
a { color: var(--lake-bright); 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; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
strong { font-weight: 800; }
:focus-visible { outline: 3px solid var(--lake-bright); outline-offset: 3px; border-radius: 4px; }
.icon { width: 1em; height: 1em; flex: none; fill: currentColor; }

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

.lead { font-size: clamp(1.3125rem, 1.15rem + .5vw, 1.5rem); line-height: 1.5; }
.section-intro { max-width: 60rem; margin-bottom: clamp(28px, 3vw, 44px); }
.section-intro p { color: var(--muted); font-size: clamp(1.25rem, 1.18rem + .25vw, 1.375rem); }
.on-lake { background: var(--lake); color: var(--on-lake); }
.on-lake h2, .on-lake h3 { color: #fff; }
.on-lake .section-intro p { color: var(--on-lake); }
.on-lake a:not(.button) { color: #fff; }
.on-lake :focus-visible, .site-footer :focus-visible, .site-header :focus-visible { outline-color: var(--sun); }

/* The lake outline: the far shore's pines over the water, with the otter swimming. Drawn in the colour of
   the section it leads into (currentColor); the far shore's colour is set where it's used. */
.shoreline { display: block; width: 100%; height: var(--shore); overflow: visible; }
.shoreline .wake { fill: none; stroke: #fff; stroke-opacity: .55; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.shoreline .whiskers { fill: none; stroke-width: 1.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* ---------------------------------------------------------------- buttons
   Otter Lake's buttons are smooth pills that catch the light like the logo's lettering: a solid colour with a
   glossy top edge. They rise a little on hover and glow like the sun; a click presses them back down. The
   label is centred on its capitals and baseline: 17px + a 20px line + 16px (Outfit sits a touch high in its
   line), within half a pixel wherever a button lands, at 1x and 2x (_tools/check-text-centering.py). */
.button {
	--btn-bg: var(--sun); --btn-ink: var(--lake-ink); --btn-glow: rgba(251, 177, 23, .5); --btn-rim: rgba(255, 255, 255, .55);
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: 53px; padding: 17px 1.45em 16px; border: 0; border-radius: 999px;
	background: var(--btn-bg); color: var(--btn-ink);
	box-shadow: inset 0 1px 0 var(--btn-rim), inset 0 -2px 0 rgba(8, 52, 112, .14), 0 4px 14px rgba(8, 52, 112, .18);
	font: 600 1.125rem/20px var(--display); letter-spacing: .005em; text-decoration: none; white-space: nowrap; cursor: pointer;
	transition: transform .18s var(--ease-out), box-shadow .25s ease, background-color .2s;
}
.button:hover {
	transform: translateY(-2px);
	box-shadow: inset 0 1px 0 var(--btn-rim), inset 0 -2px 0 rgba(8, 52, 112, .14), 0 0 0 4px rgba(255, 255, 255, .0), 0 8px 26px var(--btn-glow);
}
.button:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(8, 52, 112, .25); transition-duration: .06s; }
.button .icon { width: 1.1em; height: 1.1em; }
.button-sun:hover { --btn-bg: var(--sun-hover); }
.button-white { --btn-bg: #fff; --btn-glow: rgba(255, 255, 255, .55); }
.button-white:hover { --btn-bg: #F4F9FF; }
.button-lake { --btn-bg: var(--lake); --btn-ink: #fff; --btn-rim: rgba(255, 255, 255, .3); --btn-glow: rgba(11, 79, 166, .45); }
.button-lake:hover { --btn-bg: var(--lake-bright); }
.button-glass {                               /* on the hero's frosted card */
	--btn-bg: rgba(255, 255, 255, .1); --btn-ink: #fff; --btn-glow: rgba(255, 255, 255, .3); --btn-rim: rgba(255, 255, 255, .35);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8);
}
.button-glass:hover { --btn-bg: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 2px #fff, 0 8px 26px var(--btn-glow); }
@media (prefers-reduced-motion: reduce) {
	.button { transition: background-color .15s, box-shadow .15s; }
	.button:hover, .button:active { transform: none; }
}

/* ---------------------------------------------------------------- header
   One sticky header in two rows: a light top row (dark blue words and icons) over the lake-blue menu row
   (Joshua, 2026-10-28: more contrast going up). The menu and the top row's links share one right-aligned column,
   so they line up. The logo's white 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. */
:root {
	--topbar-h: 40px; --menu-h: 88px; --menu-h-compact: 64px;
	--brand-h: 116px;       /* the logo's height on its hanging sign (14px of white above and below it: 144px, 16px
	                           below the header) */
	--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, var(--topbar-top), var(--topbar) var(--topbar-h), var(--lake-bright) var(--topbar-h), var(--lake));
	box-shadow: 0 1px 0 rgba(255, 255, 255, .25);
	transition: box-shadow .22s;
}
.site-header.is-stuck { box-shadow: 0 1px 0 rgba(255, 255, 255, .25), 0 10px 30px rgba(4, 16, 36, .28); }
.header-grid {
	position: relative; display: grid; align-items: center;
	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); }

.brand {
	position: absolute; z-index: 2; left: var(--gutter); top: 0;
	display: block; padding: 14px 22px; border-radius: 0 0 22px 22px; background: #fff;
	box-shadow: 0 12px 28px rgba(8, 62, 133, .28);
	transition: top .22s, padding .22s, border-radius .22s, box-shadow .22s;
}
.brand img { width: auto; height: var(--brand-h); transition: height .22s; }
/* Docked: the white sign fills the menu row exactly, top to bottom, with a little padding, square and without
   its shadow. */
.site-header.is-docked .brand { top: var(--topbar-h); padding: 6px 16px; border-radius: 0; box-shadow: none; }
.site-header.is-docked .brand img { height: calc(var(--menu-h) - 12px); }
.site-header.is-stuck .brand img { height: calc(var(--menu-h-compact) - 12px); }
.site-header.no-anim, .site-header.no-anim * { transition: none !important; }

.topbar {
	grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px;
	padding-left: var(--nav-x); color: var(--lake-ink); font-size: 1rem; line-height: 1.2;
}
.topbar p { margin: 0; }
.topbar-season { display: flex; align-items: center; gap: 8px; }
.topbar-season strong { font-weight: 800; margin-right: 4px; }
.topbar-links { display: flex; align-items: center; gap: 20px; }
.topbar-links a { display: inline-flex; align-items: center; gap: 7px; color: var(--lake-ink); font-weight: 700; text-decoration: none; }
.topbar-links a:hover { text-decoration: underline; }
.topbar .icon { width: 15px; height: 15px; color: var(--lake); }
.topbar-social { width: 32px; height: 32px; justify-content: center; border-radius: 50%; margin-right: -6px; }
.topbar-social:hover { background: rgba(11, 79, 166, .1); }
.topbar .topbar-social .icon { width: 17px; height: 17px; }
.site-header .topbar :focus-visible { outline-color: var(--lake-bright); }

/* The menu: white words on the lake. Under the one you point at, the logo's wave rolls in, in gold, from the
   left; the current page keeps its wave. */
:root { --nav-x: 14px; --nav-size: 1.125rem; }
.site-nav { grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: 18px; }
.nav-list { display: flex; align-items: center; gap: 2px; }
.nav-link {
	position: relative; display: block; padding: 14px var(--nav-x);
	color: #fff; font: 600 var(--nav-size)/20px var(--display); letter-spacing: .005em; text-decoration: none; white-space: nowrap;
}
.nav-link::after {
	content: ""; position: absolute; left: var(--nav-x); right: var(--nav-x); bottom: 1px; height: 8px;
	background: var(--sun);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Cpath d='M0 5.5C3 5.5 3 2 6 2s3 3.5 6 3.5S15 2 18 2s3 3.5 6 3.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 24px 8px repeat-x;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Cpath d='M0 5.5C3 5.5 3 2 6 2s3 3.5 6 3.5S15 2 18 2s3 3.5 6 3.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 24px 8px repeat-x;
	clip-path: inset(0 100% 0 0);
	transition: clip-path .35s var(--ease-out);
}
.nav-link:hover::after, .nav-link[aria-current]::after { clip-path: inset(0 0 0 0); }
/* Book Now: as tall as the menu's links and in their size, so its label shares their baseline, and centred in its
   face (14px + 20px + 14px: within half a pixel at each menu size, measured). */
.header-cta { min-height: 48px; padding: 14px 1.3em; font-size: var(--nav-size); }
.header-tools, .nav-extra, .nav-scrim { display: none; }

@media (min-width: 1600px) {
	:root { --nav-x: 16px; --nav-size: 1.1875rem; }
	.site-nav { gap: 22px; }
}
/* Laptop widths: a tighter menu, so everything still fits on one row. The sign stays full size: it hangs the
   same 16px below the header at every width from 1280px up (there's room for it). */
@media (max-width: 1499px) {
	:root { --nav-x: 11px; --nav-size: 1.0625rem; }
	.site-nav { gap: 14px; }
	.topbar-links { gap: 16px; }
}
@media (max-width: 1379px) {
	:root { --nav-x: 9px; --nav-size: 1.03rem; }
	.header-cta { padding-inline: 1.15em; }
	.topbar-season strong { display: none; }
}

/* Narrow screens: no top row, a smaller sign, and the menu becomes a panel that slides in from the right. */
@media (max-width: 1279px) {
	:root { --topbar-h: 0px; --menu-h: 72px; --menu-h-compact: 60px; --brand-h: 62px; }
	.topbar { display: none; }
	.brand { padding: 10px 15px; border-radius: 0 0 16px 16px; }
	.site-header.is-docked .brand { padding: 5px 12px; }
	.site-header.is-docked .brand img { height: calc(var(--menu-h) - 10px); }
	.site-header.is-stuck .brand img { height: calc(var(--menu-h-compact) - 10px); }
	.header-tools { grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: 10px; }
	.header-book { display: inline-flex; min-height: 47px; padding: 14px 1.1em 13px; }
	.nav-toggle {
		display: inline-flex; align-items: center; gap: 8px; min-height: 47px; padding: 12px 16px 11px;
		border: 2px solid rgba(255, 255, 255, .85); border-radius: 999px; background: rgba(255, 255, 255, .08);
		color: #fff; font: 600 1.0625rem/20px var(--display); cursor: pointer;
	}
	.nav-toggle .icon { width: 20px; height: 20px; }
	.nav-toggle .icon-close, .nav-toggle[aria-expanded="true"] .icon-open { display: none; }
	.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
	.site-nav {
		position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
		flex-direction: column; align-items: stretch; gap: 22px;
		width: min(420px, 100%); margin: 0; padding: 88px 20px 32px; overflow-y: auto;
		background: linear-gradient(to bottom, var(--lake-bright), var(--lake) 40%, var(--lake-deep));
		border-left: 1px solid rgba(255, 255, 255, .3); box-shadow: -18px 0 44px rgba(4, 16, 36, .35);
		transform: translateX(105%); visibility: hidden;
		transition: transform .28s ease, visibility 0s .28s;
	}
	.site-nav.is-open { transform: none; visibility: visible; transition: transform .28s ease; }
	.nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
	.nav-link { padding: 14px 6px 18px; font-size: 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, .14); }
	.nav-link::after { left: 6px; right: auto; width: 96px; bottom: 5px; }
	.header-cta { align-self: flex-start; }
	.nav-extra { display: grid; gap: 16px; color: var(--on-lake); font-size: 1.0625rem; }
	.nav-season { display: flex; gap: 10px; margin: 0; line-height: 1.4; }
	.nav-season .icon, .nav-contact .icon { width: 18px; height: 18px; color: var(--sun); transform: translateY(2px); }
	.nav-contact { display: grid; gap: 10px; }
	.nav-contact a { display: inline-flex; gap: 10px; color: #fff; text-decoration: none; overflow-wrap: anywhere; }
	.nav-contact a:hover { text-decoration: underline; }
	.nav-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(4, 16, 36, .5); }
	.header-tools:has(.nav-toggle[aria-expanded="true"]) { position: relative; z-index: 80; }
}
@media (max-width: 400px) {
	:root { --brand-h: 56px; --menu-h: 68px; }
	.header-book { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.site-nav { transition: none !important; }
	.nav-link::after { transition: none; }
}

/* ---------------------------------------------------------------- hero
   The photos run clear, with nothing shading them; the words sit on a frosted card. The lake outline at the
   bottom carries the photo down into the blue welcome section, the otter swimming across. Never taller than
   it is wide. On phones the card drops below the photo. */
.hero {
	position: relative; isolation: isolate; display: flex;
	height: min(calc(100svh - var(--header-h)), 100vw, 1100px); min-height: 560px;
	background: var(--lake); color: #fff; overflow-anchor: none;
}
.hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: var(--focus, 50% 50%);
	transform-origin: var(--origin, 50% 50%);
	opacity: 0; transition: opacity 1.6s ease;
}
.hero-slide.is-current { opacity: 1; }
.hero-slide.is-moving { animation: ken-burns 9.5s linear both; }
.hero.is-paused .hero-slide { animation-play-state: paused; }
@keyframes ken-burns {
	from { transform: scale(1.07); }
	to   { transform: scale(1); }
}
.hero-media > .shoreline { position: absolute; left: 0; right: 0; bottom: -1px; color: var(--lake); }
.hero-media > .shoreline .far { fill: #C9DEF0; fill-opacity: .95; }
.hero-media > .shoreline .eye { fill: #C9DEF0; }
.hero-media > .shoreline .whiskers { stroke: #C9DEF0; }

/* The card is centred between the header and the far shore's treetops (about 70% of the outline's height). */
.hero-content {
	display: flex; align-items: center;
	padding-top: clamp(40px, 4vw, 64px); padding-bottom: calc(var(--shore) * .7 + clamp(24px, 3vw, 48px));
}
.hero-card {
	position: relative; width: 100%; max-width: 640px;
	padding: clamp(26px, 2.4vw, 36px) clamp(24px, 2.4vw, 36px) clamp(20px, 2vw, 26px);
	border: 1px solid rgba(255, 255, 255, .5); border-radius: 26px;
	background: rgba(8, 62, 133, .88); color: #fff;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 30px 70px rgba(4, 16, 36, .3);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.hero-card {                             /* frosted glass, with the morning sun glowing in its top corner */
		background:
			radial-gradient(120% 90% at 0% 0%, rgba(251, 177, 23, .24), rgba(251, 177, 23, 0) 55%),
			rgba(8, 62, 133, .5);
		-webkit-backdrop-filter: blur(14px) saturate(160%);
		backdrop-filter: blur(14px) saturate(160%);
	}
}
/* 19px bold counts as large text, so it needs 3:1 over the brightest slide behind the glass (3.5:1 measured,
   _tools/check-card-contrast.py); at 17px it would need 4.5:1. */
.hero-place { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-weight: 700; font-size: 1.1875rem; color: #fff; text-shadow: 0 1px 3px rgba(4, 16, 36, .35); }
.hero-place .icon { color: var(--sun); }
.hero-place-area { white-space: nowrap; }
.hero h1 { margin-bottom: .22em; color: #fff; font-size: clamp(2.6rem, 1.7rem + 2.4vw, 4rem); text-shadow: 0 1px 3px rgba(4, 16, 36, .3); }
.hero .lead { margin-bottom: 22px; font-size: 1.5rem; color: #fff; text-shadow: 0 1px 3px rgba(4, 16, 36, .35); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-controls { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.hero-dots { display: flex; gap: 2px; }
.hero-dot { display: grid; place-items: center; width: 32px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.hero-dot span { position: relative; display: block; width: 26px; height: 4px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .45); }
.hero-dot:hover span { background: rgba(255, 255, 255, .7); }
.hero-dot span::after {                      /* the current photo's dot fills in gold as it plays */
	content: ""; position: absolute; inset: 0; background: var(--sun); transform: scaleX(0); transform-origin: left;
}
.hero-dot[aria-current] span::after { transform: scaleX(1); }
.hero.is-playing .hero-dot[aria-current] span::after { animation: dot-fill var(--hold, 7s) linear both; }
.hero.is-paused .hero-dot[aria-current] span::after { animation-play-state: paused; }
@keyframes dot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero-pause {
	display: grid; place-items: center; width: 32px; height: 32px; margin-left: 4px; padding: 0;
	border: 1px solid rgba(255, 255, 255, .6); border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer;
}
.hero-pause:hover { background: rgba(255, 255, 255, .22); }
.hero-pause .icon { width: 14px; height: 14px; }
.hero-pause .icon-play, .hero.is-paused .hero-pause .icon-pause { display: none; }
.hero.is-paused .hero-pause .icon-play { display: block; }

@media (max-width: 760px) {
	.hero { display: block; height: auto; min-height: 0; }
	.hero-media { position: relative; z-index: auto; height: clamp(300px, 58svh, 520px); }
	.hero-content { display: block; padding-top: 4px; padding-bottom: 12px; }
	.hero-card { max-width: none; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
	.hero h1 { text-shadow: none; }
	.hero-place { align-items: flex-start; text-shadow: none; }
	.hero-place .icon { margin-top: 5px; }
	.hero-place-sep { display: none; }
	.hero-place-area { display: block; }
	.hero .lead { font-size: 1.3125rem; text-shadow: none; }
	.hero-actions .button { flex: 1 1 auto; }
}

/* ---------------------------------------------------------------- welcome (on the lake, under the outline) */
.welcome { padding-block: clamp(16px, 2.5vw, 40px) var(--section); }
.welcome-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.welcome .lead { color: #fff; }
/* The lake in numbers: four across under the welcome, each number beside its words (one line each). */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); margin-top: clamp(36px, 4vw, 60px); }
.facts li {
	display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 18px;
	background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}
.facts strong { flex: none; color: var(--sun); font: 800 2.75rem/1 var(--display); letter-spacing: -.02em; }
.facts span { color: #fff; font-size: 1.1875rem; line-height: 1.25; }

/* The video waits behind its play button: nothing loads from Vimeo until it's asked for. */
.video {
	position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden;
	border-radius: var(--radius); background: var(--night);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 30px 60px rgba(4, 16, 36, .35);
}
.video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.video:hover img { transform: scale(1.03); }
.video-play {
	position: relative; display: inline-flex; align-items: center; gap: 14px;
	padding: 10px 24px 10px 10px; border: 0; border-radius: 999px; cursor: pointer;
	background: rgba(4, 16, 36, .5); color: #fff; font: 600 1.1875rem/20px var(--display);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 16px 34px rgba(4, 16, 36, .35);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	transition: transform .18s var(--ease-out), background-color .2s;
}
.video-play:hover { transform: scale(1.04); background: rgba(4, 16, 36, .62); }
.video-play-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--sun); color: var(--lake-ink); box-shadow: 0 0 0 6px rgba(251, 177, 23, .3); }
.video-play-icon .icon { width: 26px; height: 26px; margin-left: 3px; }
.video-time { margin-left: 6px; font-weight: 400; opacity: .85; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 1100px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .facts li { flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px; } .facts strong { font-size: 2.3rem; } .facts span { font-size: 1.0625rem; } }
@media (max-width: 960px) { .welcome-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- features & amenities */
.amenities { padding-block: var(--section); background: var(--sky); }
.amenity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 30px); }
.amenity {
	display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); background: #fff;
	box-shadow: 0 1px 0 var(--sky-line), var(--shadow);
}
.amenity-photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.amenity-body { flex: 1; padding: 22px 26px 26px; }
.amenity h3 { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.amenity-icon {
	display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%;
	background: var(--lake); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.amenity-icon .icon { width: 22px; height: 22px; }
.amenity-list { display: grid; gap: 7px; }
.amenity-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 1.125rem; line-height: 1.45; }
.amenity-list .tick { width: 18px; height: 18px; margin-top: 3px; color: var(--pine); }
@media (max-width: 1100px) { .amenity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .amenity-grid { grid-template-columns: 1fr; } .amenity-photo { aspect-ratio: 2 / 1; } .amenity-body { padding: 20px 20px 22px; } }

/* ---------------------------------------------------------------- 3D tours
   The tour waits as a still of itself, drifting slowly side to side (there's more to see), with the tour's
   name and a Start button. Started, the Matterport player takes the still's place, with Full Screen and Close
   beside it; on phones it opens full screen straight away. Picking another tour from the list changes the
   still, or the tour itself if one is running. Nothing loads from Matterport until Start is pressed. */
.tours {
	padding-block: var(--section);
	background:
		radial-gradient(60% 70% at 30% 55%, rgba(251, 177, 23, .13), rgba(251, 177, 23, 0) 70%),
		linear-gradient(to bottom, var(--lake), var(--lake-deep));
}
.tour-layout { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(300px, 1fr); gap: clamp(18px, 2vw, 28px); align-items: stretch; }
.tour-stage {
	position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 24px; background: var(--night);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 34px 70px rgba(4, 16, 36, .45);
}
.tour-covers { position: absolute; inset: 0; }
.tour-cover {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	opacity: 0; transition: opacity .8s ease; transform: scale(1.14);
}
.tour-cover.is-current { opacity: 1; animation: look-around 26s ease-in-out infinite alternate; }
@keyframes look-around { from { transform: scale(1.14) translateX(-5.5%); } to { transform: scale(1.14) translateX(5.5%); } }
.tour-start-panel {
	position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
	background: radial-gradient(closest-side, rgba(4, 16, 36, .35), rgba(4, 16, 36, 0));
}
.tour-now {
	display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 8px 20px 8px 8px; border-radius: 999px;
	background: rgba(4, 16, 36, .55); color: #fff; font: 600 1.375rem/1.2 var(--display);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.tour-badge {
	display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
	background: #fff; color: var(--lake-ink); font: 800 1rem/1 var(--display); letter-spacing: .02em;
}
.tour-start { min-height: 61px; padding: 21px 1.7em 20px; font-size: 1.25rem; }
.tour-frame { position: absolute; inset: 0; }
.tour-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tour-tools { position: absolute; top: 14px; right: 14px; display: flex; gap: 8px; }
.tour-tools[hidden], .tour-frame[hidden] { display: none; }
.tour-tool {
	display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 10px 16px; border: 0; border-radius: 999px;
	background: rgba(4, 16, 36, .62); color: #fff; font: 600 1rem/20px var(--display); cursor: pointer;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.tour-tool:hover { background: rgba(4, 16, 36, .8); }
.tour-tool .icon { width: 15px; height: 15px; }
.tour-stage.is-running .tour-start-panel, .tour-stage.is-running .tour-covers { display: none; }
/* Full screen: the stage fills the window (the browser's own full screen where it has one for elements). */
.tour-stage:fullscreen { border-radius: 0; aspect-ratio: auto; }
.tour-stage.is-expanded { position: fixed; inset: 0; z-index: 200; aspect-ratio: auto; border-radius: 0; }
html.tour-open { overflow: hidden; }

.tour-list { display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 10px; }
.tour-pick {
	display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; width: 100%; height: 100%;
	padding: 8px 14px 8px 8px; border: 0; border-radius: 18px; text-align: left; cursor: pointer;
	background: rgba(255, 255, 255, .07); color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
	transition: background-color .2s, box-shadow .2s;
}
.tour-pick:hover { background: rgba(255, 255, 255, .13); }
.tour-pick[aria-pressed="true"] { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 2px var(--sun); }
.tour-pick img { width: auto; height: 100%; max-height: 92px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; }
.tour-pick-text { display: grid; gap: 2px; }
.tour-pick-name { font: 600 1.1875rem/1.25 var(--display); }
.tour-pick-about { color: var(--on-lake); font-size: 1rem; line-height: 1.35; opacity: .92; }
.tour-note { margin: 18px 0 0; font-size: 1rem; color: var(--on-lake); opacity: .9; }

@media (max-width: 1100px) {
	.tour-layout { grid-template-columns: 1fr; }
	.tour-list { grid-template-rows: none; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
	.tour-list li { scroll-snap-align: start; }
	.tour-pick { grid-template-columns: 1fr; padding: 8px 8px 12px; }
	.tour-pick img { width: 100%; height: auto; max-height: none; }
	.tour-pick-text { padding-inline: 6px; }
}
@media (max-width: 760px) { .tour-full { display: none; } }      /* on phones a tour always fills the window */
@media (max-width: 600px) {
	.tour-stage { aspect-ratio: 4 / 3; border-radius: 18px; }
	.tour-now { font-size: 1.125rem; }
	.tour-start { min-height: 53px; padding: 17px 1.4em 16px; font-size: 1.125rem; }
	.tour-list { grid-auto-columns: 72%; }
}
@media (prefers-reduced-motion: reduce) { .tour-cover.is-current { animation: none; transform: none; } }

/* ---------------------------------------------------------------- photos: a mosaic that opens the lightbox */
.photos { padding-block: var(--section); }
.gallery { position: relative; }
.mosaic {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: repeat(3, round(clamp(170px, 15vw, 250px), 1px)); gap: round(clamp(10px, 1.2vw, 18px), 2px);      /* whole pixels, so the button over it lands on them */
}
.mosaic-tile { position: relative; display: block; overflow: hidden; border-radius: 18px; background: var(--sky); cursor: zoom-in; }
.mosaic-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out), filter .3s; }
.mosaic-tile:hover img { transform: scale(1.04); filter: brightness(1.05); }
.tile-1 { grid-column: 1 / 3; grid-row: 1 / 3; }
.tile-2 { grid-column: 3; grid-row: 1; }
.tile-3 { grid-column: 4; grid-row: 1 / 3; }
.tile-4 { grid-column: 3; grid-row: 2; }
.tile-5 { grid-column: 1; grid-row: 3; }
.tile-6 { grid-column: 2 / 4; grid-row: 3; }
.tile-7 { grid-column: 4; grid-row: 3; }
.gallery-all { position: absolute; right: 16px; bottom: 16px; }
@media (max-width: 700px) {
	.mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 150px; grid-auto-flow: dense; }
	.mosaic .mosaic-tile { grid-column: auto; grid-row: auto; border-radius: 14px; }
	.mosaic .tile-1 { grid-column: 1 / 3; grid-row: span 2; }
	.mosaic .tile-3 { grid-row: span 2; }
	.mosaic .tile-6 { grid-column: 1 / 3; }
	.gallery-all { position: static; display: flex; width: 100%; margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .mosaic-tile img, .video img { transition: none; } .mosaic-tile:hover img, .video:hover img { transform: none; } }

/* ---------------------------------------------------------------- the lightbox (a frosted sky over the page) */
.lightbox {
	position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
	background: rgba(234, 244, 253, .96); color: var(--lake-ink); overscroll-behavior: contain;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.lightbox { background: rgba(234, 244, 253, .8); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); }
}
.lightbox[open] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; }
.lightbox::backdrop { background: transparent; }
html.lb-open { overflow: hidden; }
.lb-stage {
	position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; overflow: hidden;
	padding: 64px 84px 8px; touch-action: pan-y pinch-zoom;
}
.lb-img {
	flex: none; max-width: min(100%, var(--w, 100%)); max-height: 100%; width: auto; height: auto;
	border-radius: 8px; box-shadow: 0 18px 48px rgba(8, 62, 133, .3); user-select: none; -webkit-user-drag: none;
}
.lb-caption { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 0; padding: 10px 84px 4px; font-size: 1.0625rem; text-align: center; }
.lb-alt { font-weight: 700; }
.lb-count { white-space: nowrap; }
.lb-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px 18px; scrollbar-width: thin; }
.lb-thumbs > :first-child { margin-left: auto; }
.lb-thumbs > :last-child { margin-right: auto; }
.lb-thumbs button { flex: none; width: 76px; height: 51px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: rgba(8, 62, 133, .08); opacity: .6; cursor: pointer; transition: opacity .15s; }
.lb-thumbs button:hover { opacity: .85; }
.lb-thumbs button[aria-current="true"] { border-color: var(--lake); opacity: 1; }
.lb-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.lb-btn {
	position: absolute; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; padding: 0;
	border: 0; border-radius: 50%; background: var(--lake); color: #fff; cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 18px rgba(8, 62, 133, .3);
	transition: transform .18s var(--ease-out), background-color .2s;
}
.lb-btn:hover { background: var(--lake-bright); transform: scale(1.06); }
.lb-btn .icon { width: 20px; height: 20px; }
.lb-close { top: 14px; right: 14px; }
.lb-prev, .lb-next { top: 50%; margin-top: -26px; }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
@media (max-width: 760px) {
	.lb-stage { padding: 64px 10px 6px; }
	.lb-caption { padding: 8px 16px 2px; }
	.lb-prev, .lb-next { top: auto; bottom: 16px; margin-top: 0; width: 44px; height: 44px; }
	.lb-prev { left: 12px; }
	.lb-next { right: 12px; }
	.lb-thumbs { margin-inline: 60px; padding-inline: 6px; }
	.lb-thumbs button { width: 60px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .lb-btn { transition: none; } .lb-btn:hover { transform: none; } }

/* ---------------------------------------------------------------- plan your stay: the sun going down over the lake */
.plan {
	padding-block: var(--section) var(--shore-room); color: var(--lake-ink);
	background: linear-gradient(to bottom, var(--sun-light) 0%, var(--sun) 45%, var(--orange) 100%);
}
.plan h2 { color: var(--lake-ink); }
.plan a:not(.button) { color: var(--lake-ink); font-weight: 700; }
.plan-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.plan .lead { font-weight: 600; }
.plan-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.plan-links { display: grid; gap: 12px; }
.plan-links a {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px;
	padding: 16px 20px 16px 16px; border-radius: 18px; background: #fff; color: var(--ink) !important; font-weight: 400 !important; text-decoration: none;
	box-shadow: 0 1px 0 rgba(8, 52, 112, .08), 0 10px 26px rgba(140, 70, 0, .18);
	transition: transform .18s var(--ease-out), box-shadow .25s;
}
.plan-links a:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(8, 52, 112, .08), 0 16px 34px rgba(140, 70, 0, .26); }
.plan-links strong { display: block; color: var(--lake-ink); font: 600 1.3125rem/1.25 var(--display); }
.plan-links span:not(.plan-icon) { font-size: 1.0625rem; line-height: 1.4; color: var(--muted); }
.plan-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--lake); color: #fff; }
.plan-icon .icon { width: 24px; height: 24px; }
.plan-go { width: 20px; height: 20px; color: var(--lake); transition: transform .18s var(--ease-out); }
.plan-links a:hover .plan-go { transform: translateX(3px); }
@media (max-width: 960px) { .plan-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .plan-actions .button { flex: 1 1 100%; } .plan-links a { gap: 14px; padding: 14px 14px 14px 12px; } .plan-icon { width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .plan-links a, .plan-go { transition: none; } .plan-links a:hover, .plan-links a:hover .plan-go { transform: none; } }

/* ---------------------------------------------------------------- footer (the outline rises out of it, its pines against the sunset) */
.site-footer { position: relative; background: var(--lake-deep); color: var(--on-lake); font-size: 1.0625rem; }
.site-footer > .shoreline { position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); color: var(--lake-deep); }
.site-footer > .shoreline .far, .site-footer > .shoreline .eye { fill: var(--ember); }
.site-footer > .shoreline .whiskers { stroke: var(--ember); }
.footer-grid {
	display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 32px 48px;
	padding-top: clamp(24px, 3vw, 40px); padding-bottom: 40px;
}
.site-footer a { color: #fff; }
.footer-name { margin-bottom: .4em; color: #fff; font: 700 1.75rem/1.15 var(--display); }
.footer-about address { margin-bottom: 14px; line-height: 1.7; }
.footer-social { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; }
.footer-social .icon { width: 22px; height: 22px; }
.footer-social:hover { text-decoration: underline; }
.footer-links h2, .footer-season h2 { margin-bottom: 14px; color: var(--sun); font: 600 1.1875rem/1.3 var(--display); letter-spacing: 0; }
.footer-links li + li { margin-top: 5px; }
.footer-links a { display: inline-block; padding-block: 2px; text-decoration: none; }      /* 27px tall: a tap target of 24px or more */
.footer-links a:hover { text-decoration: underline; }
.footer-season p { margin-bottom: .6em; }
.footer-prime { color: var(--on-lake); opacity: .92; }
.footer-bottom {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
	padding-top: 22px; padding-bottom: 28px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 1rem;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.credit img { width: 200px; height: auto; }     /* Digital Projections Web Studio */
@media (max-width: 1000px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-about { grid-column: 1 / -1; } }
@media (max-width: 420px) { .footer-grid { gap: 28px 18px; } }

/* ---------------------------------------------------------------- reveal on scroll
   site.js marks content that starts below the fold with .rv-wait, then swaps in .rv-go plus an effect as
   each piece scrolls into view (once), and takes the classes off when it has finished. Nothing is hidden
   without the script, and nothing that is on screen when the page loads. */
.rv-wait { opacity: 0; }
.rv-go {
	animation-duration: .9s;
	animation-timing-function: var(--ease-out);
	animation-delay: var(--rv-delay, 0s);
	animation-fill-mode: both;
}
.rv-go.rv-up { animation-name: rv-up; }
.rv-go.rv-card { animation-name: rv-card; animation-duration: 1s; }
.rv-go.rv-focus { animation-name: rv-up; animation-duration: 1s; }
.rv-go.rv-focus img { animation: rv-focus 1.4s var(--ease-out) var(--rv-delay, 0s) both; }
.rv-go.rv-left { animation-name: rv-left; animation-duration: 1s; }
.rv-go.rv-right { animation-name: rv-right; animation-duration: 1s; }
.rv-go.rv-fade { animation-name: rv-fade; animation-duration: .45s; animation-timing-function: ease; }
@keyframes rv-up    { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; } }
@keyframes rv-card  { from { opacity: 0; transform: translate3d(0, 34px, 0) scale(.97); } to { opacity: 1; } }
@keyframes rv-left  { from { opacity: 0; transform: translate3d(-36px, 0, 0); } to { opacity: 1; } }
@keyframes rv-right { from { opacity: 0; transform: translate3d(36px, 0, 0); } to { opacity: 1; } }
/* A photo rises into place while the picture comes into focus, from a soft blur and a touch of zoom. */
@keyframes rv-focus { from { filter: blur(14px); transform: scale(1.05); } }
@keyframes rv-fade  { from { opacity: 0; } }
@media print {
	.rv-wait { opacity: 1 !important; }
	.rv-go, .rv-go img { animation: none !important; }
}

/* ---------------------------------------------------------------- motion preferences */
@media (prefers-reduced-motion: reduce) {
	.rv-go { animation-name: rv-fade !important; animation-duration: .45s !important; }
	.rv-go.rv-focus img { animation: none !important; }
	.hero-slide { transition: none; animation: none !important; }
	.hero-dot span::after { animation: none !important; }
}