/* 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: "Rubik";
	src: url("/fonts/rubik-latin-wght-normal.woff2") format("woff2");
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Rubik";
	src: url("/fonts/rubik-latin-wght-italic.woff2") format("woff2");      /* the hero's "Family Tradition Begins" */
	font-weight: 300 900;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Red Hat Display";
	src: url("/fonts/red-hat-display-latin-wght-normal.woff2") format("woff2");
	font-weight: 300 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 photos band */
	--sun-deep: #D0680A;        /* the sun's orange, deepened just enough for small icons (3.3:1 on the top row; Joshua: more orange, less red) */
	--pine: #025E25;            /* the logo's spruces: the top row's words, the amenity ticks */
	--forest: #2F8048;          /* the hero's near hills, at their foot: a mid green, so it reads as green (not black) to Joshua */
	--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: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;     /* headings and buttons: Joshua chose it
	                                                                                   from six heavier, smooth faces (2026-10-28) */
	--menu: "Red Hat Display", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;     /* the menu row (Joshua chose it
	                                                                                           over Outfit, the first heading font, whose "&" looked odd) */
	--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 */
	--lead: clamp(1.3125rem, 1.15rem + .5vw, 1.5rem);      /* the home page's paragraphs: 21px on phones, 24px from 1150px wide */
	--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);
	--white-drop: round(.04em, 1px) round(.04em, 1px) .03em #fff;      /* a thin white drop down to the right, for navy headings on
	                                                                     colour (Joshua, 2026-10-30: the photos band first): 2px at full size, 1px on phones, with
	                                                                     a little blur (about 1.6px and 1px; it was sharp at first) */
	--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); }
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; }
/* A phone number's parentheses hang 0.17em below its figures in Nunito Sans (it has no raised forms): lifted by
   half that, they're centred on them (ol_phone() in site.inc). */
.paren { position: relative; top: -.085em; }
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; }
/* Quick repeated clicks on a control (the lightbox's next, the hero's arrows) count as double-clicks; they mustn't select
   text or photos around it (Joshua saw the lightbox's strip of photos highlighted). */
button, .button { -webkit-user-select: none; user-select: none; }
.icon { width: 1em; height: 1em; flex: none; fill: currentColor; }
.nowrap { white-space: nowrap; }
.icon.star { width: .8em; height: .8em; margin-inline: .03em; vertical-align: -.04em; }      /* ★ in content text (ol_rich) */

.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; }

/* The home page's paragraphs are all the size of the welcome's first line (Joshua, 2026-10-29: the size he prefers). */
.lead, .welcome-text p, .section-intro p, .plan-text p { font-size: var(--lead); line-height: 1.5; }
.section-intro { max-width: 66rem; margin-bottom: clamp(28px, 3vw, 44px); }
.section-intro p { color: var(--muted); }
.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 (_tools/make-divider.py): low rolling hills behind a flat, calm lake, their reflection and light
   ripples on the water fading to plain water within a few rows, the colour of the section it leads into
   (currentColor). The hills' colours (their gradients' stops), trim and the reflection's colour are set where it's used. */
.shoreline { display: block; position: relative; width: 100%; height: var(--shore); overflow-x: clip; }      /* the drifting lines never widen the page (Joshua saw a scroll bar come and go) */
.shoreline > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }      /* the land, and the water's lines in three layers */
.shoreline .ripple { stroke: #fff; }
.shoreline .shore-edge { fill: none; stroke: none; stroke-width: 1; }

/* ---------------------------------------------------------------- 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: 16.75px + a 20px line + 16.25px (Rubik sits a touch high in its
   line), within a quarter pixel wherever a button lands at 2x (_tools/check-text-centering.py; whole pixels,
   17/16, left it 3/4px low in some places). At 19px (2026-10-29, was 18px) the same padding measures exact or half a
   pixel high at 2x, and 1px off at 1x (parity); no other padding or face height did better. */
.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: 16.75px 1.45em 16.25px; 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.1875rem/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 (the logo's pine green words, blue 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: 150px;       /* the logo's height on its hanging sign (Joshua: 140px with 16px of white all round, then
	                           for the client 150px with 16px above and below and 12px at the sides, 2026-11-07: the
	                           sign 182px tall, 54px below the header, 329px wide) */
	--header-h: calc(var(--topbar-h) + var(--menu-h));
	--trim: #E8F2FC;        /* the header's bottom line and the hills' trim: solid, 1px (Joshua) */
}
.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 var(--trim), 0 10px 30px rgba(4, 16, 36, 0);      /* a pale line along the bottom */
	transition: box-shadow .22s;
}
/* Stuck: the white line fades away (Joshua, 2026-10-28) and the shadow comes in. */
.site-header.is-stuck { box-shadow: 0 1px 0 rgba(232, 242, 252, 0), 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: 16px 12px; border-radius: 0 0 20px 20px; background: #fff;
	box-shadow: 0 12px 28px rgba(8, 62, 133, .28);
	transition: top .22s, padding .22s, border-radius .22s, box-shadow .22s, background-color .3s;
}
.brand-art { position: relative; display: block; }
.brand-logo { width: auto; height: var(--brand-h); transition: height .22s, opacity .25s ease; }
/* 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 12px; border-radius: 0; box-shadow: none; }
.site-header.is-docked .brand-logo { height: calc(var(--menu-h) - 12px); }
.site-header.is-stuck .brand-logo { height: calc(var(--menu-h-compact) - 12px); }
.site-header.no-anim, .site-header.no-anim *, .site-header.no-anim::before { transition: none !important; }
/* Shrunk (the second stage, further down the page), the menu row turns the silver of the menu's pills, with the logo
   straight on it (no white sign) and the blue menu track and gold Book Now as they are (Joshua, 2026-10-28). Desktop
   only: the phone header's white Menu button needs the blue. */
@media (min-width: 1200px) {
	.site-header::before {
		content: ""; position: absolute; left: 0; right: 0; top: var(--topbar-h); bottom: 0; pointer-events: none;
		background: linear-gradient(to bottom, #FBFDFF, #E1ECF8); box-shadow: inset 0 -1px 0 rgba(8, 52, 112, .16);
		opacity: 0; transition: opacity .3s ease;
	}
	.site-header.is-stuck::before { opacity: 1; }
	.header-grid { z-index: 1; }
	.site-header.is-stuck .brand { background-color: transparent; }
}

/* The logo's intro, once per tab (Joshua, 2026-10-28): the logo in layers (includes/logo-layers.inc, cut by
   _tools/make-logo-layers.py), under a second and a half. The water washes in from the left, the three trees grow (the
   middle one first), the otter swims up, the sun fades in behind it once it's there, OTTER LAKE writes itself letter
   by letter and CAMP RESORT fades up as it finishes; then the logo itself fades in over the layers (js/site.js
   initLogoIntro). */
.logo-layers { display: none; position: absolute; inset: 0; pointer-events: none; }
html.logo-intro .logo-layers { display: block; }
html.logo-intro .brand-logo { opacity: 0; }
html.logo-intro.logo-done .brand-logo { opacity: 1; }
.ll { position: absolute; display: block; max-width: none; opacity: 0; }
.logo-layers.is-playing .ll { animation: var(--ll-anim) var(--ll-dur, .7s) var(--ll-ease, cubic-bezier(.22, .8, .3, 1)) var(--ll-at, 0s) both; }
.ll-water-top, .ll-O, .ll-T1, .ll-T2, .ll-E1, .ll-R, .ll-L, .ll-A, .ll-K, .ll-E2 {
	--ll-anim: ll-wipe;            /* revealed left to right behind a soft edge */
	-webkit-mask: linear-gradient(90deg, #000 45%, transparent 55%) 100% 0 / 220% 100% no-repeat;
	mask: linear-gradient(90deg, #000 45%, transparent 55%) 100% 0 / 220% 100% no-repeat;
}
/* About 1.35s in all (Joshua: two thirds of the first two seconds, the trees more spaced out within it). */
.ll-water-top { --ll-anim: ll-wash; --ll-at: 0s; --ll-dur: .5s; }
.ll-sun { --ll-anim: ll-fade; --ll-at: .6s; --ll-dur: .5s; --ll-ease: ease-in-out; }      /* in place, once the otter is there (Joshua) */
.ll-tree-mid, .ll-tree-left, .ll-tree-right { --ll-anim: ll-grow; --ll-dur: .42s; --ll-ease: cubic-bezier(.3, 1.35, .5, 1); transform-origin: 50% 100%; }
.ll-tree-mid { --ll-at: .1s; }
.ll-tree-left { --ll-at: .33s; }
.ll-tree-right { --ll-at: .56s; }
.ll-otter { --ll-anim: ll-swim; --ll-at: .3s; --ll-dur: .53s; }
.ll-O { --ll-at: .33s; --ll-dur: .23s; }
.ll-T1 { --ll-at: .41s; --ll-dur: .2s; }
.ll-T2 { --ll-at: .487s; --ll-dur: .2s; }
.ll-E1 { --ll-at: .563s; --ll-dur: .2s; }
.ll-R { --ll-at: .64s; --ll-dur: .2s; }
.ll-L { --ll-at: .717s; --ll-dur: .2s; }
.ll-A { --ll-at: .793s; --ll-dur: .2s; }
.ll-K { --ll-at: .87s; --ll-dur: .2s; }
.ll-E2 { --ll-at: .947s; --ll-dur: .2s; }
.ll-camp { --ll-anim: ll-fade-up; --ll-at: .93s; --ll-dur: .37s; --ll-rise: 1.86%; }      /* (the logo's own image, trimmed: its rise as before, 18% of the strip) */
@keyframes ll-wipe { from { opacity: 1; -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { opacity: 1; -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes ll-wash { from { opacity: 1; -webkit-mask-position: 100% 0; mask-position: 100% 0; transform: translateX(-4%); } to { opacity: 1; -webkit-mask-position: 0 0; mask-position: 0 0; transform: none; } }      /* the water rolls in as it washes across */
@keyframes ll-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ll-grow { from { opacity: 0; transform: scale(.8, .3); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes ll-swim { from { opacity: 0; transform: translate(-5%, 10%); } 45% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes ll-fade-up { from { opacity: 0; transform: translateY(var(--ll-rise, 18%)); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html.logo-intro .logo-layers { display: none; } html.logo-intro .brand-logo { opacity: 1; } }

.topbar {
	grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px;
	color: var(--ink); font-size: 1rem; line-height: 20px;      /* the season's icon on the menu track's left edge, as Facebook is on its right */
}
.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 li { display: flex; }      /* no line box of its own: that left room for descenders below and lifted the links */
/* The icons are centred on the row exactly (_tools/check-topbar.py); the words come down 1px, which Joshua found
   right by eye (2026-10-28; 2px overshot). */
.topbar-text { position: relative; top: 1px; }
.topbar-links a { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 700; text-decoration: none; }
.topbar-links a:hover { text-decoration: underline; }
/* Dark grey-black words like the body text, icons in the sun's deep orange and Facebook's in its own blue (Joshua,
   2026-10-28: he's a little colourblind with dark colours, so the dark green read poorly); even icon sizes centre
   exactly in the 40px row. */
.topbar .icon { width: 16px; height: 16px; color: var(--sun-deep); }
.topbar-social { width: 32px; height: 32px; justify-content: center; border-radius: 50%; margin-right: -7px; }      /* its icon flush with the track's right end */
.topbar-social:hover { background: rgba(8, 102, 255, .1); }
.topbar .topbar-social .icon { width: 18px; height: 18px; color: #0866FF; }      /* Facebook's own blue */
.site-header .topbar :focus-visible { outline-color: var(--lake-bright); }

/* The menu: one contained track, like a resort's brass-and-enamel sign. A flat blue groove, slightly inset (dark
   along its top inside, a light edge along its bottom: the inverse of the raised gold Book Now), as tall as Book
   Now, which forms its right end; the left end is rounded the same way, and Home's words start as far from it as
   Book Now's from the right (--track-pad). The current page, and the link you point at, stand on a bright silver pill
   with Book Now's navy words, raised up out of the groove the way Book Now is (Joshua, 2026-10-28: something that
   suggests a high-end resort, in place of the wave). */
:root { --nav-x: 14px; --nav-size: 1.125rem; --track-pad: calc(var(--nav-size) * 1.3); }
.site-nav {
	grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: 6px;
	padding-left: calc(var(--track-pad) - var(--nav-x)); border-radius: 999px;
	background: #0A4592;
	box-shadow: inset 0 2px 4px rgba(4, 16, 36, .5), inset 0 -1px 0 rgba(255, 255, 255, .14), 0 1px 0 rgba(255, 255, 255, .3);
}
.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(--menu); letter-spacing: .005em; text-decoration: none; white-space: nowrap;
	transition: color .25s ease;
}
.nav-link::before {                          /* the silver pill: the top row's light shades, a bright rim on top, a shadow under it */
	content: ""; position: absolute; inset: 6px 0 5px; z-index: -1; border-radius: 999px;
	background: linear-gradient(to bottom, #FBFDFF, #E1ECF8);
	box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(8, 52, 112, .12), 0 2px 5px rgba(4, 16, 36, .42), 0 1px 1px rgba(4, 16, 36, .3);
	opacity: 0; transition: opacity .25s ease;
}
.nav-item { position: relative; z-index: 0; }
.nav-link:hover, .nav-link[aria-current] { color: var(--lake-ink); }
.nav-link:hover::before, .nav-link[aria-current]::before { opacity: 1; }
/* Book Now: the track's right end. As tall as the links and in their size, so its label shares their baseline
   (14px + 20px + 14px: centred within half a pixel at each menu size, measured). Seated 1px lower than the track,
   with its words kept where they were (1px less above them, 1px more below): it rode a pixel high to Joshua's eye
   (2026-10-28). */
.header-cta { min-height: 48px; padding: 14px 1.3em; font-family: var(--menu); font-size: var(--nav-size); }
/* Book Now (the menu row's and the phone header's): 800 weight; it doesn't rise on hover, a band of light sweeps across it
   instead, and again every couple of seconds while the pointer stays (Joshua, 2026-10-28). */
.header-cta, .header-book { position: relative; overflow: hidden; font-weight: 800; }
.header-book { font-size: 1.125rem; }      /* the phone header's: kept at 18px (buttons went to 19px, 2026-10-29), so the row still fits */
.header-cta:hover, .header-book:hover { transform: none; }
.header-cta::after, .header-book::after {
	content: ""; position: absolute; top: -4px; bottom: -4px; left: 0; width: 42%; pointer-events: none;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 0));
	transform: translateX(-140%) skewX(-20deg);
}
.header-cta:hover::after, .header-book:hover::after, .header-cta:focus-visible::after, .header-book:focus-visible::after {
	animation: book-sheen 2.4s cubic-bezier(.45, 0, .3, 1) infinite;
}
@keyframes book-sheen {
	0% { transform: translateX(-140%) skewX(-20deg); }
	38%, 100% { transform: translateX(300%) skewX(-20deg); }
}
@media (prefers-reduced-motion: reduce) { .header-cta::after, .header-book::after { display: none; } }
@media (min-width: 1200px) {
	.header-cta { position: relative; top: 1px; padding-block: 13px 15px; }
	/* shrunk (the silver bar): the button 1px higher, its words where they were (Joshua, round 20) */
	.site-header.is-stuck .header-cta { top: 0; padding-block: 14px; }
}
.header-tools, .nav-extra, .nav-scrim { display: none; }
.nav-short { display: none; }
@media (min-width: 1200px) and (max-width: 1400px) { .nav-long { display: none; } .nav-short { display: inline; } }      /* "Photos" for "Photo Gallery" where room is tight (Joshua) */

/* The menu's text as large as it can be with about 30px between the logo's sign and the menu at 1200px, growing to 60px
   on the widest screens (Joshua, 2026-10-29): the menu track is 54.29px wide per pixel of text plus 17.9px (51.26px with "Photos" for
   "Photo Gallery", at 1400px and under), its spacing scaling with the text (.55em either side of each item), so the size
   follows from the room beside the sign (the header's own width, so a scrollbar doesn't count), rounded down to an
   eighth of a pixel, between 16px and 21px. Below 1300px the logo is pinned inside the header (its sign 227px wide, not
   329px), so the text needn't drop below 16px; narrower than 1200px, the menu folds into the Menu button. */
.site-header { container-type: inline-size; }
@media (min-width: 1200px) {
	:root {
		--sign-w: 329.2px; --nav-a: 54.29;      /* (the sign: 150px of logo, 305.2px wide, and 12px each side) */
		/* the room: 30px beside the sign at 1200px, growing to 60px at 1600px and wider (Joshua, after trying 45px), i.e.
		   a gap of .075 x width - 60px, so the text is (.925 x width - 53.9px - the sign) / the menu's width per pixel */
		--nav-size: clamp(16px, round(down, (min(100cqw, 1600px) * .925 - 53.9px - var(--sign-w)) / var(--nav-a), .125px), 21px);
		--nav-x: calc(var(--nav-size) * .55);
		--track-pad: calc(var(--nav-x) + var(--nav-size) * .45);      /* (Home's pill .45em from the track's left end: snug, Joshua) */
	}
	.site-nav { gap: calc(6px + var(--nav-size) * .3); }      /* (the .3em taken from the left end, between Area & Travel and Book Now: Joshua) */
	.header-cta { padding-inline: 1.15em; }
}
@media (min-width: 1200px) and (max-width: 1400px) { :root { --nav-a: 51.26; } }
/* The logo takes a little more room on wide screens (Joshua, 2026-11-11: the client cares most about the logo's size):
   from 150px at 1440px wide it grows to 164px at 1600px and wider (its sign 357.6px wide, hanging 68px below the
   header). The menu keeps its room beside the sign, so its text is the half pixel smaller there (19.625px at 1600px
   and wider, was 20.125). (The client asked for the logo in the middle of the header; tried on dev 2026-11-11, and he
   chose to keep it on the left, where it can be this large: centred it could only be 150px.) */
@media (min-width: 1440px) {
	.site-header {
		--brand-h: clamp(150px, 150px + (min(100cqw, 1600px) - 1440px) * .0875, 164px);
		--sign-w: calc(var(--brand-h) * 2.034375 + 24px);
		--nav-size: clamp(16px, round(down, (min(100cqw, 1600px) * .925 - 53.9px - var(--sign-w)) / var(--nav-a), .125px), 21px);
		--nav-x: calc(var(--nav-size) * .55);
		--track-pad: calc(var(--nav-x) + var(--nav-size) * .45);
	}
}
/* where the text comes out at exactly 16px (1200-1204px), its capitals sit 3/4px high in a centred line: a pixel more above
   them, links and Book Now alike, so they keep one baseline (from 16.25px they're centred as they are) */
@media (min-width: 1200px) and (max-width: 1204px) {
	.nav-link { padding-block: 15px 13px; }
	.header-cta { padding-block: 14px; }
	.site-header.is-stuck .header-cta { padding-block: 15px 13px; }
}
@media (max-width: 1519px) { .topbar-links { gap: 16px; } }
@media (max-width: 1339px) { .topbar-season strong { display: none; } }
/* 1200-1299px: the logo pinned inside the header (Joshua), its sign the header's full height (top row and menu row),
   square and without a shadow like the docked sign, so it no longer hangs below. */
@media (min-width: 1200px) and (max-width: 1299px) {
	:root { --brand-h: 100px; --sign-w: 227.4px; }      /* (128px of header, less 14px of white above and below; 96px with 16px before 2026-11-07) */
	.site-header:not(.is-docked) .brand { padding: 14px 12px; border-radius: 0; box-shadow: none; }
}

/* The labels' centring, measured at every eighth from 16px to 21px: at 16-16.125px and 18.75-19.125px the capitals sit
   3/4px high in a centred line, so there the links and Book Now get a pixel more above (one baseline kept). The text
   lands on those sizes at 1300-1314px and, as the logo grows, at 1533-1568px (measured; 1200-1204px has its own rule
   above). */
@media (min-width: 1300px) and (max-width: 1314.68px), (min-width: 1532.36px) and (max-width: 1568.68px) {
	.nav-link { padding-block: 15px 13px; }
	.header-cta { padding-block: 14px; }
	.site-header.is-stuck .header-cta { padding-block: 15px 13px; }
}

/* Narrow screens: no top row, and the menu becomes a panel that slides in from the right (below 1200px: Joshua). The
   logo hangs well below the bar, 118px tall (the client found the old 68px too small; Joshua, 2026-11-07), or on phones
   as large as fits beside the Menu button (107.6px wide) with as much room between them as between the screen's edge
   and the sign (Joshua: equal, so a third gutter): the room is the header's width less three gutters, the button and
   the sign's 10px sides, and the logo is 2.0344 times as wide as it is tall (about 105px at 390 wide, 91px at 360; the
   full 118px from about 418px, where the gap starts to open up). */
@media (max-width: 1199px) {
	:root { --topbar-h: 0px; --menu-h: 72px; --menu-h-compact: 60px; --brand-h: min(118px, calc((100cqw - 3 * var(--gutter) - 127.6px) / 2.0344)); }
	.topbar { display: none; }
	.brand { padding: 12px 10px; border-radius: 0 0 16px 16px; }
	.site-header.is-docked .brand { padding: 5px 10px; }
	.site-header.is-docked .brand-logo { height: calc(var(--menu-h) - 10px); }
	.site-header.is-stuck .brand-logo { 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; font-family: var(--menu); }      /* label within half a pixel of centre (measured) */
	.nav-toggle {
		display: inline-flex; align-items: center; gap: 8px; min-height: 47px; padding: 11px 16px 12px;
		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(--menu); 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; border-radius: 0;
		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: 16px 12px; font-size: 1.25rem; }
	.nav-item + .nav-item { border-top: 1px solid rgba(255, 255, 255, .14); }
	.nav-link::before { inset: 4px 0; }
	.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; }
}
/* Book Now beside the Menu button once there's room for it and the full-size logo (126.9px, 10px apart: from 562px); below
   that it's in the menu panel, and the logo takes the room. */
@media (max-width: 569px) { .header-book { display: none; } }
@media (max-width: 400px) { :root { --menu-h: 68px; } }
@media (prefers-reduced-motion: reduce) {
	.site-nav { transition: none !important; }
	.nav-link, .nav-link::before { 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; }
/* The slides overhang the hero by 40px on every side, so a blurred slide's soft edges stay out of sight. */
.hero-slides { position: absolute; inset: -40px; z-index: 0; }
/* Focus-pull crossfades (Joshua, 2026-10-28), when the mist dissolve isn't used: the outgoing photo racks out of focus
   while the next one arrives soft on top of it and sharpens, like a camera changing focus; about 2.1s in all (25%
   slower than first built, Joshua). A slide waiting its turn is soft. */
.hero-slide {
	--soft: 18px;
	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; filter: blur(var(--soft));
	transition: opacity 1.2s ease .38s, filter 1.7s cubic-bezier(.22, .7, .3, 1) .44s;      /* arriving */
}
.hero-slide.is-current { z-index: 2; opacity: 1; filter: none; }
.hero-slide.is-leaving {                     /* stays put underneath, going soft, until the next is in */
	z-index: 1; opacity: 1; filter: blur(var(--soft));
	transition: filter 1.12s cubic-bezier(.55, 0, .8, .45);
}
/* The mist dissolve (js/hero-mist.js) for slides marked data-in="mist": its canvas plays over the slides while the next
   waits unseen underneath and the last stays as it was; then they swap in place. */
.hero-slide.fx-under { opacity: 0 !important; filter: none !important; transition: none !important; }
.hero-slide.fx-hold { z-index: 1; opacity: 1; filter: none; transition: none; }
.hero-slide.fx-snap { transition: none !important; }
.hero-mist { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.hero-mist.is-on { opacity: 1; }
.hero-slide.is-moving { animation: ken-burns 12s linear both; }      /* (a slide shows for 8.75s, plus its changes) */
.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; z-index: 4; left: 0; right: 0; bottom: -1px; color: var(--lake); }
/* The hills (Joshua, 2026-10-28; the footer's too since 2026-10-29, to match): the far range a fresh green, the near one a richer, darker green in front of it (he
   found a paler, hazier far range washed out), each lighter at its crest, the
   sun catching the slopes that face it; the skyline trimmed with a 1px white line at .75, like the header's bottom line
   (a 2px stroke under the fill, so only its outer 1px shows, the same at any width). Mid greens, so they read as green
   (not black) to Joshua. */
.shoreline .far-top { stop-color: #5DA56A; }
.shoreline .far-bottom { stop-color: #3B8A4F; }
.shoreline .near-top { stop-color: #2F8048; }
.shoreline .near-bottom { stop-color: #23693A; }
.shoreline .hills-far { stroke: var(--trim); stroke-width: 2; paint-order: stroke; vector-effect: non-scaling-stroke; }
.shoreline .sunlit { fill: rgba(255, 244, 210, .2); }
.shoreline .reflect { stroke: #0E3F52; }
.shoreline .shore-edge { stroke: rgba(255, 255, 255, .5); }
/* The water's lines drift gently back and forth, like a lake's surface (Joshua, 2026-10-28): the reflection a little,
   the two sets of ripple rows further and opposite ways, each on its own timing so it never looks like one sliding
   picture. Each set is its own layer, moved by the compositor (a transform only), so nothing is redrawn as it moves.
   They rest while the slideshow is paused or the outline is off screen (js/site.js), and for reduced motion. The
   footer's outline drifts the same way (Joshua, 2026-10-29). */
.shoreline .shore-lines {
	animation: lake-drift var(--drift-time) ease-in-out var(--drift-delay, 0s) infinite alternate; will-change: transform;
}
.shoreline .shore-reflect { --drift: .14vw; --drift-time: 8.6s; }
.shoreline .shore-ripples-a { --drift: .4vw; --drift-time: 6.4s; --drift-delay: -1.7s; }
.shoreline .shore-ripples-b { --drift: -.32vw; --drift-time: 5.1s; --drift-delay: -3.9s; }
.hero.is-paused .shore-lines, .shoreline.is-away .shore-lines { animation-play-state: paused; }
@keyframes lake-drift {
	from { transform: translateX(calc(var(--drift) * -1)); }
	to { transform: translateX(var(--drift)); }
}

/* No card over the photos (Joshua, 2026-10-28: nothing may block them). The headline is the hero's own big print, in
   the bottom left over every photo, staying put while the photos change (Joshua); white, with a tight drop shadow down
   to the right for legibility (no outline, no shading over the photo). On phones it goes below the photo. */
.hero-content { position: absolute; inset: 0; z-index: 5; margin-inline: auto; pointer-events: none; }
.hero-title {
	position: absolute; left: var(--gutter); bottom: calc(var(--shore) * .56 + clamp(22px, 3vh, 40px)); margin: 0;      /* above the hills (about half the band) */
	font-size: clamp(3.2rem, min(1.4rem + 4.6vw, 11.5vh), 7.5rem); line-height: .98; letter-spacing: -.02em;
	color: #fff; text-wrap: nowrap;
	text-shadow: 2px 3px 2px rgba(4, 16, 36, .45);      /* a tight drop down to the right (Joshua): without it, the sunset slide's water swallows the letters */
}
/* It prints word by word (Joshua, 2026-10-28) about two seconds after the logo's intro has finished, at a speaking
   pace: "Where Your" said lightly, a breath, then "Family Tradition Begins", unhurried (the client's words, 2026-11-07;
   was "Settle in / to life at the lake."). Only when the intro plays (title-print, set with it in head.inc);
   otherwise it's simply there. Each word's start is its --at (index.html). */
.hero-title .w { display: inline-block; }
html.title-print .hero-title .w { opacity: 0; }
/* Two lines. The emphasis is "Family Tradition Begins" (Joshua, 2026-11-07), so it's the larger line, in italic bright
   silver like the menu's current-page pill (the same pale shades, a touch deeper at the foot so it reads as metal), and
   "Where Your" is a smaller lead-in in white: the old lines' sizes and looks swapped round ("Settle in" was 1.08em
   silver over .8em white), with "Where Your" smaller still (.6em) so the long line can be the larger one and keep
   about the old second line's width. Both cast the same sharp drop in the header's blue (rounds 20 and 22; the silver
   through a filter, since its letters are a clipped background that a text-shadow would show through). */
.hero-line-1, .hero-line-2 { display: block; }
.hero-line-1 { font-size: .6em; text-shadow: .04em .04em 0 var(--lake); }
.hero-line-2 { font-size: .8em; filter: drop-shadow(.04em .04em 0 var(--lake)); }
.hero-line-2 .w {
	padding: .1em; margin: -.1em;      /* room for the italic's overhang, since the silver only paints inside the box */
	background: linear-gradient(to bottom, #FFFFFF 20%, #F3F7FB 45%, #D3DFED 80%);
	-webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
}
.hero-br { display: none; }      /* (phones: "Family Tradition" / "Begins") */
html.title-print .hero-title.is-printing .w { animation: word-in var(--fade, .7s) cubic-bezier(.4, 0, .3, 1) var(--at) both; }      /* a soft fade (Joshua: .36s was sudden); --fade per word, from js/site.js */
@keyframes word-in {
	from { opacity: 0; translate: 0 .1em; filter: blur(6px); }
	to { opacity: 1; translate: none; filter: none; }
}

/* The slideshow's controls (Joshua, 2026-10-28): previous, pause, next, as plain white icons on the water just below the
   hills (the band's bottom 43 of its 160 units), right-aligned with the menu: part of the border, never over a photo.
   On phones they sit beside the headline, below the photo. */
.hero-controls {
	position: absolute; right: calc(var(--gutter) - 8px); bottom: calc(var(--shore) * .134 - 17px); z-index: 6;      /* centred on the water */
	display: flex; align-items: center; gap: 2px; pointer-events: auto;
}
.hero-controls :focus-visible { outline-color: var(--sun); }
.hero-arrow, .hero-pause {
	display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
	background: none; color: #fff; cursor: pointer; transition: color .2s ease;
}
.hero-arrow:hover, .hero-pause:hover { color: var(--sun-light); }          /* (no hover circle: on narrower screens it would cross the hills) */
.hero-controls .icon { filter: drop-shadow(0 0 1.5px var(--lake)) drop-shadow(0 0 3px var(--lake)); }   /* the ripples part around them */
.hero-arrow .icon { width: 20px; height: 20px; stroke: currentColor; stroke-width: .7px; }      /* (thickened to sit with the play icon) */
.hero-pause .icon { width: 16px; height: 16px; }
.hero-pause .icon-play, .hero.is-paused .hero-pause .icon-pause { display: none; }
.hero.is-paused .hero-pause .icon-play { display: block; }

/* On phones too the headline is over the photo, bottom left (Joshua), with a soft glow added behind the letters for the
   brighter photos at this size. "Family Tradition Begins" on one line would leave it small (31px at 390 wide), so there
   it breaks before "Begins" and the headline is as large as fits "Family Tradition" (6.22em wide at the title's size,
   with the italic's overhang, so the room over 6.5; 44px at 390 wide). */
@media (max-width: 760px) {
	.hero { height: clamp(300px, 58svh, 520px); min-height: 0; }
	/* a photo with a phone crop of its own (OL_PHONE_CROPS, includes/content.inc: heads clear of the logo's sign) */
	.hero-slide.has-phone-crop { --focus: var(--focus-phone) !important; }
	.hero .hero-title { font-size: min(calc((100vw - 2 * var(--gutter)) / 6.5), 5rem); }
	.hero .hero-br { display: inline; }
	.hero .hero-line-1 { text-shadow: .04em .04em 0 var(--lake), 0 0 .2em rgba(4, 16, 36, .6); }
	.hero .hero-line-2 { filter: drop-shadow(.04em .04em 0 var(--lake)) drop-shadow(0 0 .16em rgba(4, 16, 36, .6)); }
}

/* ---------------------------------------------------------------- welcome (on the lake, under the outline) */
/* The same space above and below (Joshua, 2026-10-29): from the water's last lines to the heading's capitals, and from the
   last line's baseline to the section's end, 120px at full width (the bottom was 146px). The bottom padding leaves
   room for the text below its baseline; below 960px the video comes last and the padding is the whole gap. Then the
   content is lifted by a quarter of the gap, 30px at full width (Joshua, the same day), the section's height unchanged. */
.welcome { --welcome-gap: clamp(56px, 7vw, 120px); --welcome-lift: calc(var(--welcome-gap) / 4); padding-block: calc(var(--welcome-gap) - var(--welcome-lift)) calc(var(--welcome-gap) + var(--welcome-lift) - var(--lead) * .42); }
.welcome-text > :last-child { margin-bottom: 0; }
/* The hero's water ripples go on a little way into what's beneath it (img/lake-below.svg, drawn at the band's scale:
   _tools/make-divider.py); on phones the headline comes first, so it carries them. The footer's water does the same. */
.hero + .welcome { background-image: url("/img/lake-below.svg"); background-position: top center; background-size: auto calc(var(--shore) * .075); background-repeat: no-repeat; }
.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 resort's notice (road closures and other news that won't last: editor, Home, Notice), right above "Welcome to
   Otter Lake" (Joshua, 2026-11-06: the standard place, never over the hero): a gold card with a lake-blue megaphone,
   first in the text column, so it comes in with the heading as the page scrolls. */
.welcome-text .notice {
	display: flex; align-items: flex-start; gap: 14px; width: fit-content; max-width: 100%;
	margin: 0 0 clamp(20px, 2vw, 28px); padding: 14px 26px 14px 14px; border-radius: var(--radius);      /* (24-36px to the heading's capitals) */
	background: linear-gradient(to bottom, var(--sun-light), var(--sun)); color: var(--lake-ink);
	box-shadow: 0 8px 24px rgba(2, 20, 52, .3), inset 0 1px rgba(255, 255, 255, .6);
	font-size: 1.25rem; font-weight: 600; line-height: 1.4;
}
.welcome-text .notice p { margin: 0; font-size: inherit; line-height: inherit; }
.welcome-text .notice strong { color: inherit; font-weight: 800; }
.welcome-text .notice a { color: inherit; font-weight: 800; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.welcome-text .notice a:hover { text-decoration-thickness: 2.5px; }
.welcome-text .notice :focus-visible { outline-color: var(--lake-ink); }
.notice-icon {
	flex: none; display: grid; place-items: center; width: 37px; height: 37px; margin-top: -6px; border-radius: 50%;      /* (its middle on the first line's capitals, measured: an odd size centres exactly) */
	background: var(--lake); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.notice-icon .icon { width: 19px; height: 19px; }
@media (max-width: 600px) {
	.welcome-text .notice { gap: 12px; padding: 12px 20px 12px 12px; font-size: 1.1875rem; }
	.notice-icon { width: 36px; height: 36px; margin-top: -6px; }
	.notice-icon .icon { width: 18px; height: 18px; }
}
.welcome-text strong { color: var(--sun-light); }      /* "no fishing license required" (Joshua: important), 5.6:1 on the blue */

/* 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: 960px) { .welcome-grid { grid-template-columns: 1fr; } .welcome { padding-bottom: calc(var(--welcome-gap) + var(--welcome-lift)); } }

/* ---------------------------------------------------------------- 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); }
/* Each card's photo, title and list share rows with the cards beside it (subgrid), so a title that wraps (Additional
   Amenities in a narrow card, or one the resort types) never sets its list lower than its neighbour's: the shorter title
   centres on the same band (Joshua, 2026-10-31). */
.amenity {
	display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; 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 { grid-row: 2 / span 2; display: grid; grid-template-rows: subgrid; row-gap: 14px; padding: 22px 26px 26px; }
.amenity h3 { display: flex; align-items: center; gap: 14px; margin: 0; }
.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; align-content: start; gap: 7px; }
.amenity-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 1.25rem; 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 70% 55%, rgba(251, 177, 23, .13), rgba(251, 177, 23, 0) 70%),
		linear-gradient(to bottom, var(--lake), var(--lake-deep));
}
.tours .section-intro { max-width: 76rem; }      /* (two lines on wide screens, with the Site Map sentence: Joshua) */
/* The list on the left, the stage on the right (Joshua, 2026-10-29); under 1560px the stage comes first, the list below. */
.tour-layout { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 2.1fr); gap: clamp(18px, 2vw, 28px); align-items: stretch; }
.tour-layout > .tour-list { order: -1; }
.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: 700 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 1.0625rem/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; }

/* The five tours in one panel, as tall as the stage (Joshua, 2026-10-29: one piece rather than five cards): rows split by
   fine lines, the chosen one lit with a gold mark on its edge (the lines beside it step aside). */
.tour-list {
	display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); padding: 6px; border-radius: 24px;
	background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 34px 70px rgba(4, 16, 36, .25);
}
.tour-list li { position: relative; min-height: 0; }
.tour-list li + li::before {
	content: ""; position: absolute; z-index: 1; left: 14px; right: 14px; top: 0; height: 1px;
	background: rgba(255, 255, 255, .16); pointer-events: none; transition: opacity .2s;
}
.tour-list li:has(> [aria-pressed="true"])::before, .tour-list li:has(> [aria-pressed="true"]) + li::before,
.tour-list li:has(> :hover)::before, .tour-list li:has(> :hover) + li::before { opacity: 0; }
.tour-pick {
	position: relative; 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; font-family: var(--sans); text-align: left; cursor: pointer;      /* (a button: not the browser's own font) */
	background: transparent; color: #fff;
	transition: background-color .2s;
}
.tour-pick:hover { background: rgba(255, 255, 255, .08); }
.tour-pick[aria-pressed="true"] { background: rgba(255, 255, 255, .17); }
.tour-pick::after {
	content: ""; position: absolute; left: -6px; top: 22%; bottom: 22%; width: 4px; border-radius: 0 3px 3px 0;
	background: var(--sun); opacity: 0; transition: opacity .2s;
}
.tour-pick[aria-pressed="true"]::after { opacity: 1; }
.tour-pick:focus-visible { outline-offset: -3px; }
.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.25rem/1.25 var(--display); }
.tour-pick[aria-pressed="true"] .tour-pick-name { color: var(--sun-light); }
.tour-pick-about { color: var(--on-lake); font-size: 1.125rem; line-height: 1.35; opacity: .92; }
.tour-note { margin: 18px 0 0; font-size: 1.125rem; color: var(--on-lake); opacity: .9; }

/* Below 1560px the list beside the stage has no room for its text (2026-10-29: 20/18px), so it goes under the stage:
   five across on desktops, a row to swipe below 1100px. */
@media (max-width: 1559px) {
	.tour-layout { grid-template-columns: 1fr; }
	.tour-layout > .tour-list { order: 0; }
	.tour-list { grid-template-rows: none; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 6px; }
	.tour-list li { scroll-snap-align: start; }
	.tour-list li + li::before { left: 0; right: auto; top: 14px; bottom: 14px; width: 1px; height: auto; }      /* the lines stand upright */
	.tour-pick::after { left: 22%; right: 22%; top: auto; bottom: -6px; width: auto; height: 4px; border-radius: 3px 3px 0 0; }      /* the mark along the bottom */
	.tour-pick { grid-template-columns: 1fr; align-content: start; align-items: start; padding: 8px 8px 12px; }      /* photos level, words under them */
	.tour-pick img { width: 100%; height: auto; max-height: none; }
	.tour-pick-text { padding-inline: 6px; }
}
@media (min-width: 1101px) and (max-width: 1559px) { .tour-list { grid-auto-columns: minmax(0, 1fr); overflow-x: visible; } }
@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, on the sun
   going down (the gold that was Plan Your Stay's, moved here by Joshua, 2026-10-29) */
.photos {
	padding-block: var(--section); color: var(--lake-ink);
	background: linear-gradient(to bottom, var(--sun-light) 0%, var(--sun) 45%, var(--orange) 100%);
}
.photos h2, .photos .section-intro p { color: var(--lake-ink); }
/* navy headings straight on a sunset band get the thin white drop (Joshua, 2026-10-30): here, Activities' "Or Make Your Own
   Fun" and Campsites & Cabins' Good to Know (its cards' h3s are on white, so they go without) */
.photos h2, .own h2, .own-text h3, .know h2 { text-shadow: var(--white-drop); }
.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 { -webkit-user-select: none; user-select: none; }      /* (its caption can still be selected) */
.lb-caption { -webkit-user-select: text; user-select: text; }
.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.125rem; 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; }
/* The video, as large as the window allows (16:9, up to 1600px wide), on the same frosted glass. */
.lb-video[open] { grid-template-rows: minmax(0, 1fr); }
.lb-video .lb-stage { padding: 76px 84px 40px; }
.lb-frame {
	flex: none; width: min(100%, calc((100dvh - 116px) * 16 / 9), 1600px); aspect-ratio: 16 / 9; overflow: hidden;
	border-radius: 12px; background: var(--night) center / cover no-repeat; box-shadow: 0 18px 48px rgba(8, 62, 133, .3);
}
.lb-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.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-video .lb-stage { padding: 76px 10px 24px; }
	.lb-frame { width: min(100%, calc((100dvh - 100px) * 16 / 9)); border-radius: 8px; }
	.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: light, with the colours swapped (Joshua,
   2026-10-29): white into the sky's blue, behind the footer's green hills, and the links on the gold that was this
   section's background */
.plan {
	padding-block: var(--section) var(--shore-room); color: var(--lake-ink);
	background: linear-gradient(to bottom, #fff, var(--sky));
}
.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; color: var(--ink) !important; font-weight: 400 !important; text-decoration: none;
	background: linear-gradient(to bottom, var(--sun-light), var(--sun));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 0 rgba(140, 70, 0, .12), 0 10px 26px rgba(8, 62, 133, .14);
	transition: transform .18s var(--ease-out), box-shadow .25s;
	position: relative;      /* all positioned, so a lifted card's shadow stays under the cards after it (Joshua: it showed over them) */
}
.plan-links a:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 0 rgba(140, 70, 0, .12), 0 8px 18px rgba(8, 62, 133, .16); }
.plan-links strong { display: block; color: var(--lake-ink); font: 600 1.375rem/1.25 var(--display); }
.plan-links span:not(.plan-icon) { font-size: 1.1875rem; line-height: 1.4; color: var(--ink); }
.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-icon .icon-rv { width: 28px; height: 28px; }        /* (wide and short: larger, so it weighs the same as the round ones) */
.plan-icon .icon-talk { width: 26px; height: 26px; }
.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; } }

/* ================================================================ inner pages */
/* ---------------------------------------------------------------- page banner: the hero's frame with one photo
   (no slideshow), shorter, the page's name in the hero's print over its bottom left, above the same hills and water. */
.page-hero { height: clamp(400px, min(64svh, 40vw), 720px); min-height: 0; }
.page-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
.page-hero .hero-title { font-size: clamp(3rem, min(1.2rem + 4vw, 10vh), 6.25rem); }
/* (the section under a banner starts .7 of a section down, the same on every inner page: Joshua, on FAQs) */
.hero + .on-lake { background-image: url("/img/lake-below.svg"); background-position: top center; background-size: auto calc(var(--shore) * .075); background-repeat: no-repeat; }
/* On phones the page's name stays over its photo, bottom left, as the home page's does (Joshua). The banner a little taller
   to hold it, never taller than it is wide. */
@media (max-width: 760px) {
	.hero.page-hero { height: min(clamp(300px, 48svh, 440px), 100vw); }
	.hero.page-hero .hero-title { right: var(--gutter); bottom: calc(var(--shore) * .56 + 12px); font-size: clamp(2.4rem, 11vw, 3.2rem); text-wrap: balance; }      /* (long names wrap) */
}

/* ---------------------------------------------------------------- activities: the seasons, on the lake */
.seasons { padding-block: calc(var(--section) * .7) var(--section); }
.season-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 26px); }
.season:first-child { grid-column: 1 / -1; }      /* Daily Activities, across the top (Joshua) */
.season {
	padding: 24px 26px 26px; border-radius: var(--radius);
	background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}
.season h3 { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; color: #fff; }
.season-icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--sun); color: var(--lake-ink); }
.season-icon .icon { width: 22px; height: 22px; }
.season p { margin: 0; font-size: 1.375rem; line-height: 1.5; color: var(--on-lake); }      /* 22px (Joshua: a little larger) */
@media (max-width: 1300px) { .season { padding-inline: 22px; } .season h3 { gap: 12px; } }      /* (room for "Summer Weekends" on one line) */
@media (max-width: 1099px) { .season-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .season { padding: 20px 20px 22px; } }

/* ---------------------------------------------------------------- activities: a sample week of summer activities
   Seven days side by side, each a column of morning, afternoon and evening that line up across the week (subgrid);
   each activity tinted by its kind (the key above). Narrower than 1100px it's one day at a time, picked from the week
   (js/site.js initSchedule; today's day first), or every day in turn without JavaScript. */
.schedule { padding-block: var(--section); background: var(--sky); }
.schedule .section-intro { max-width: none; }      /* the note on one line where it fits (Joshua) */
.sched-key { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0 0 22px; font-size: 1.125rem; font-weight: 700; color: var(--lake-ink); }
.sched-key li { display: flex; align-items: center; gap: 9px; }
.sched-key li::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--kind-bg); box-shadow: inset 0 0 0 2px var(--kind); }
.kind-sports { --kind: #2F8048; --kind-bg: #E4F2E7; }
.kind-classes { --kind: #E59A00; --kind-bg: #FFF3D4; }
.kind-fun { --kind: #1668C8; --kind-bg: #E3EEFB; }
.kind-music { --kind: #A55926; --kind-bg: #F6E7DD; }
.sched-week { display: grid; grid-template-columns: max-content repeat(7, minmax(0, 1fr)); grid-template-rows: auto repeat(3, auto); gap: 0 10px; }
.sched-parts, .sched-day { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; }
.sched-parts span { display: flex; align-items: center; justify-content: center; padding: 0 2px; writing-mode: vertical-rl; rotate: 180deg;
	font: 600 1rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sched-day { border-radius: 18px; background: #fff; box-shadow: 0 1px 0 var(--sky-line), var(--shadow); overflow: hidden; }
.sched-day h3 { margin: 0; padding: 14px 12px 12px; background: var(--lake); color: #fff; font-size: 1.25rem; text-align: center; }
.sched-part { display: grid; align-content: start; gap: 8px; padding: 12px 10px; }
.sched-part + .sched-part { border-top: 1px solid var(--sky-line); }
.sched-part li { padding: 8px 10px 9px; border-left: 4px solid var(--kind); border-radius: 4px 10px 10px 4px; background: var(--kind-bg); font-size: 1.125rem; line-height: 1.3; color: var(--ink); }
.sched-time { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 3px; font-size: 1rem; font-weight: 800; color: var(--lake-ink); font-variant-numeric: tabular-nums; }
.sched-what { display: block; font-weight: 600; }
.sched-ages { padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .85); font-size: .9375rem; font-weight: 700; white-space: nowrap; }      /* the ages, on the time's line */
.sched-days { display: none; }
@media (max-width: 1100px) {
	.sched-week { display: block; }
	.sched-parts { display: none; }
	.sched-day { display: block; }
	.sched-day + .sched-day { margin-top: 18px; }
	.sched.has-js .sched-week { display: grid; grid-template: auto / minmax(0, 1fr); }      /* every day in one cell, so the panel is the tallest day's height and nothing below moves */
	.sched.has-js .sched-day { grid-area: 1 / 1; margin: 0; }
	.sched.has-js .sched-day:not(.is-shown) { visibility: hidden; }
	.sched.has-js .sched-day h3 { display: none; }      /* (the picked day's button names it) */
	.sched-part { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); padding: 14px 16px 16px; }
	.sched-part::before { content: attr(aria-label); grid-column: 1 / -1; font: 600 1rem/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
	.sched-part:not(:has(li)) { display: none; }
	.sched.has-js .sched-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 14px; padding: 5px; border-radius: 999px; background: #fff; box-shadow: 0 1px 0 var(--sky-line), var(--shadow); }
	.sched-days button { min-height: 44px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--lake-ink); font: 600 1.125rem/1 var(--display); cursor: pointer; transition: background-color .2s, color .2s; }
	.sched-days button:hover { background: var(--sky); }
	.sched-days button[aria-pressed="true"] { background: var(--lake); color: #fff; }
	.sched-days abbr { text-decoration: none; }
}
@media (max-width: 520px) { .sched-days button { font-size: 1rem; } .sched-part { padding-inline: 12px; } }

/* ---------------------------------------------------------------- activities: on your own (photo and words in turn) */
.own {      /* on the sunset band, as the home page's photos (Joshua, 2026-10-29) */
	padding-block: var(--section) var(--shore-room); color: var(--ink);      /* (the last section: room for the footer's hills) */
	background: linear-gradient(to bottom, var(--sun-light) 0%, var(--sun) 45%, var(--orange) 100%);
}
.own h2, .own .section-intro p { color: var(--lake-ink); }
.own-photo { box-shadow: 0 18px 44px rgba(140, 70, 0, .28); }
.own-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.own-item + .own-item { margin-top: clamp(48px, 6vw, 96px); }
.own-item:nth-of-type(even) .own-photo { order: 2; }
.own-photo { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 24px; box-shadow: var(--shadow); }
.own-text h3 { margin-bottom: 16px; font-size: clamp(1.75rem, 1.3rem + 1vw, 2.25rem); font-weight: 700; }      /* (no icons: Joshua) */
.own-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.own-facts li { padding: 6px 14px; border-radius: 999px; background: #fff; box-shadow: 0 1px 0 rgba(140, 70, 0, .15); font-size: 1.125rem; font-weight: 700; color: var(--lake-ink); }
.own-text p { font-size: var(--lead); line-height: 1.5; }
.own-text p:last-child { margin-bottom: 0; }
.own-text strong { color: var(--lake-ink); }
@media (max-width: 900px) {
	.own-item { grid-template-columns: 1fr; gap: 22px; }
	.own-item:nth-of-type(even) .own-photo { order: 0; }
	.own-photo { border-radius: 18px; }
}

/* ---------------------------------------------------------------- inner pages: a closing "plan your stay" band (for the
   Rates page; Joshua took it off Activities) */
.page-plan { padding-top: calc(var(--section) * .8); }
.page-plan-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.page-plan .plan-text { flex: 1 1 560px; }
.page-plan .plan-text p { margin: 0; }
.page-plan .plan-actions { margin: 0; }
@media (max-width: 520px) { .page-plan .plan-actions { width: 100%; } }

/* ---------------------------------------------------------------- campsites & cabins: the intro, on the lake */
.stay-intro { padding-block: calc(var(--section) * .7) var(--section); }
.stay-intro .section-intro { max-width: 76rem; margin-bottom: 0; }
.stay-intro .section-intro p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- campsites & cabins: the rates
   Three cards of sites, every price switching together with the season and the length of stay (js/site.js initRates):
   two toggles, the season's dates beneath. Prices sit in a fixed-width column of even figures, so nothing moves when
   they change; the season's dates share one place, so neither does the line under the toggles. Without JavaScript
   it shows the prime season by the night, and the table below has every rate. */
.rates { padding-block: var(--section); background: var(--sky); }
.rates-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; }
.rates-head .section-intro { margin-bottom: 0; }
.rates-head .section-intro p { margin: 0; }
.rates-controls { display: flex; flex-wrap: wrap; gap: 12px 14px; }
.rates-controls[hidden] { display: none; }
/* One toggle per choice (two related choices are one toggle): a white track, the chosen one a lake-blue pill. */
.seg { display: inline-flex; gap: 2px; padding: 5px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--sky-line), 0 6px 18px rgba(8, 62, 133, .08); }
.seg button {
	min-height: 46px; padding: 0 20px; border: 0; border-radius: 999px; background: none; color: var(--lake-ink);
	font: 600 1.125rem/1 var(--display); white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s;
}
.seg button:hover { background: var(--sky); }
.seg button[aria-pressed="true"] { background: var(--lake); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.seg button:disabled { color: #7D8BA0; background: none; cursor: not-allowed; }
.rates-dates { display: grid; margin: 22px 0 26px; font-size: 1.1875rem; color: var(--ink); }
.rates-dates > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 10px; }      /* the icon centred on the whole text beside it, one line or three (Joshua) */
.rates-dates > .is-hidden { visibility: hidden; }
.rates-dates .icon { width: 20px; height: 20px; flex: none; color: var(--sun-deep); }
.rates-dates strong { color: var(--lake-ink); }

.rate-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 30px); }
.rate-group { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); background: #fff; box-shadow: 0 1px 0 var(--sky-line), var(--shadow); }
.rate-photo { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.rate-body { flex: 1; padding: 22px 26px 12px; }
.rate-group h3, .rate-panel h3 { margin-bottom: 6px; font-size: 1.625rem; }
.rate-text { margin: 0 0 8px; font-size: 1.125rem; line-height: 1.45; color: var(--muted); }
.rate-list { display: grid; }
.rate-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 16px; padding: 14px 0; }
.rate-row + .rate-row { border-top: 1px solid var(--sky-line); }
.rate-name { font-size: 1.1875rem; font-weight: 700; line-height: 1.3; color: var(--lake-ink); }
.rate-features { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.rate-features span { padding: 2px 9px; border-radius: 999px; background: var(--sky); font-size: .9375rem; font-weight: 700; color: var(--muted); }
.rate { display: grid; justify-items: end; min-width: 7.5em; text-align: right; font-variant-numeric: tabular-nums; }
.rate-amt { font: 700 1.625rem/1.8rem var(--display); color: var(--lake-ink); }      /* (a fixed line, so "—" is no taller than a price) */
.rate-unit { font-size: 1rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.rate.is-none .rate-amt { color: #7D8BA0; }
.rate-row.is-off { opacity: .45; }      /* an extra that applies in the other season only */

.rates-more { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(18px, 2vw, 30px); margin-top: clamp(18px, 2vw, 30px); }
.rate-panel { padding: 24px 26px 12px; border-radius: var(--radius); background: #fff; box-shadow: 0 1px 0 var(--sky-line), var(--shadow); }

/* every rate in one table */
.rate-table { margin-top: clamp(18px, 2vw, 30px); border-radius: var(--radius); background: #fff; box-shadow: 0 1px 0 var(--sky-line), var(--shadow); }
.rate-table summary {
	display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 26px; list-style: none; cursor: pointer;
	font: 600 1.25rem/1.2 var(--display); color: var(--lake-ink);
}
.rate-table summary::-webkit-details-marker { display: none; }
.rate-table summary .icon { width: 22px; height: 22px; color: var(--lake); }
.rate-table summary .rate-table-chevron { margin-left: auto; transition: rotate .25s var(--ease-out); }
.rate-table[open] .rate-table-chevron { rotate: 180deg; }
.rate-table-scroll { overflow-x: auto; padding: 0 26px 22px; }
.rate-table table { width: 100%; min-width: 760px; table-layout: fixed; border-collapse: collapse; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.rate-table th, .rate-table td { padding: 10px 12px; border-bottom: 1px solid var(--sky-line); text-align: right; }
.rate-table thead th { font: 600 1.0625rem/1.25 var(--display); color: var(--lake-ink); vertical-align: bottom; }
.rate-table thead th span { display: block; margin-top: 2px; font: 600 .9375rem var(--sans); color: var(--muted); }
.rate-table thead tr:first-child th[colspan] { text-align: center; background: var(--sky); border-bottom: 0; }
.rate-table thead tr:first-child th[colspan] + th[colspan] { border-left: 8px solid #fff; }
.rate-table tbody th, .rate-table thead th:first-child { width: 30%; text-align: left; font-weight: 700; color: var(--lake-ink); }
.rate-table tbody th span { font-weight: 600; color: var(--muted); }
.rate-table .rate-table-group th { padding-top: 18px; font: 700 1.1875rem var(--display); color: var(--lake); border-bottom: 2px solid var(--sky-line); }
.rate-table .rate-table-seasons { display: none; }
/* Narrower than the table (a phone, or a narrowed window): each site becomes a block, its name across the top and
   the two seasons side by side beneath, each price labelled; one season row under each group's name. No sideways
   scrolling (Joshua). */
@media (max-width: 900px) {
	.rate-table table, .rate-table tbody, .rate-table tr, .rate-table th, .rate-table td { display: block; }
	.rate-table table { min-width: 0; }
	.rate-table thead { display: none; }
	.rate-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 6vw, 56px); padding: 10px 0 12px; border-bottom: 1px solid var(--sky-line); }
	.rate-table th, .rate-table td { padding: 0; border: 0; }
	.rate-table tbody th, .rate-table thead th:first-child { width: auto; }
	.rate-table tbody tr > th[scope="row"] { grid-column: 1 / -1; margin-bottom: 6px; }
	.rate-table .rate-table-group { padding: 18px 0 6px; border-bottom: 2px solid var(--sky-line); }
	.rate-table .rate-table-group th { grid-column: 1 / -1; padding: 0; border: 0; }
	.rate-table .rate-table-seasons { display: grid; padding: 8px 0 4px; }
	.rate-table .rate-table-seasons td { font: 600 1rem/1.2 var(--display); color: var(--muted); text-align: left; }
	.rate-table td.s-prime { grid-column: 1; }
	.rate-table td.s-off { grid-column: 2; }
	.rate-table td.p-night { grid-row: 2; } .rate-table td.p-week { grid-row: 3; } .rate-table td.p-month { grid-row: 4; }
	.rate-table td[data-label] { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-block: 2px; }
	.rate-table td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 1rem; font-weight: 600; }
	.rate-table-scroll { overflow: visible; }
}

@media (max-width: 1240px) {
	.rate-groups { grid-template-columns: 1fr; }
	.rate-group { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }      /* photo beside the list */
	.rate-photo { height: 100%; aspect-ratio: auto; }
}
@media (max-width: 900px) { .rates-more { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
	.rate-group { display: flex; }
	.rate-photo { height: auto; aspect-ratio: 3 / 2; }
	.rate-body, .rate-panel { padding-inline: 18px; }
	.rates-controls { width: 100%; }
	.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
	.seg button { padding: 0 8px; font-size: 1.0625rem; }
	.rate-row { grid-template-columns: minmax(0, 1fr) auto; }
	.rate { min-width: 6.5em; }
	.rate-amt { font-size: 1.4375rem; line-height: 1.6rem; }
	.rate-table summary, .rate-table-scroll { padding-inline: 18px; }
	.rates-dates strong { display: block; }      /* the season's name over its dates (Joshua: the off season's ran together) */
	.rates-dates-colon { display: none; }
}

/* ---------------------------------------------------------------- campsites & cabins: good to know */
.know {      /* on the sunset band (Joshua) */
	padding-block: var(--section) calc(var(--section) - clamp(18px, 2vw, 30px));      /* (less the last card's own margin) */
	background: linear-gradient(to bottom, var(--sun-light) 0%, var(--sun) 45%, var(--orange) 100%);
}
.know h2 { color: var(--lake-ink); }
.know-grid { columns: 3; column-gap: clamp(18px, 2vw, 30px); }      /* in columns, not rows: the cards differ a lot in length */
.know-card { break-inside: avoid; margin-bottom: clamp(18px, 2vw, 30px); padding: 24px 26px 26px; border-radius: var(--radius); background: #fff; box-shadow: 0 10px 26px rgba(140, 70, 0, .18); }
.know-card h3 { margin-bottom: 12px; font-size: 1.5rem; }      /* (no icons: Joshua) */
.know-card p { margin-bottom: .7em; font-size: 1.1875rem; line-height: 1.5; }
.know-card p:last-of-type { margin-bottom: 0; }
.know-card strong { color: var(--lake-ink); }
.know-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; margin-top: 18px; object-fit: cover; object-position: 50% 30%; border-radius: 14px; }
@media (max-width: 1240px) { .know-grid { columns: 2; } }
@media (max-width: 760px) {
	.know-grid { columns: 1; }
	.know-card { padding: 20px 20px 22px; }
}

/* ---------------------------------------------------------------- campsites & cabins: the policies
   All open (Joshua), laid out like a printed brochure: one white panel, a
   policy to a row, its title in a narrow column on the left that stays in view while its text scrolls past, the text
   in one column beside it (Joshua; two newspaper columns were tried), the cabin rules numbered two across. One column
   on phones. */
.policies { padding-block: var(--section); }
.policy-list { padding: 8px clamp(22px, 3vw, 48px); border-radius: var(--radius); background: #fff; color: var(--ink); box-shadow: 0 18px 44px rgba(4, 16, 36, .22); }
.policy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 20px clamp(32px, 4vw, 64px); align-items: start; padding-block: clamp(26px, 3vw, 40px); }
.policy + .policy { border-top: 1px solid var(--sky-line); }
.policy h3 {
	position: sticky; top: calc(var(--menu-h-compact) + 24px); margin: 0; padding-top: 8px;
	border-top: 4px solid var(--sun); font-size: 1.625rem; line-height: 1.2; color: var(--lake-ink);
}
.policy-body { padding-top: 15px; }      /* the first line level with the title beside it (under its gold rule) */
.policy-body p { margin: 0 0 .8em; font-size: 1.25rem; line-height: 1.55; }
.policy-body p:last-child { margin-bottom: 0; }
.policy-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px clamp(32px, 3.5vw, 56px); counter-reset: rule; }
.policy-rules li { position: relative; padding-left: 46px; font-size: 1.1875rem; line-height: 1.5; counter-increment: rule; }
.policy-rules li::before {
	content: counter(rule); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
	background: var(--sky); font: 700 1rem/1 var(--display); color: var(--lake-ink);
}
.policy-rules strong { display: block; color: var(--lake-ink); }
@media (max-width: 1100px) { .policy { grid-template-columns: 1fr; } .policy h3 { position: static; } .policy-body { padding-top: 0; } }
@media (max-width: 760px) { .policy-rules { grid-template-columns: 1fr; } .policy-body p { font-size: 1.1875rem; } }

/* ---------------------------------------------------------------- attractions & directions: getting here, on the lake
   Google's map, loaded with the page (Joshua; it waits until it's near the screen), the address and Get Directions
   (Google Maps with the park as the destination) under it. The routes beside it, numbered in gold. */
.here { padding-block: calc(var(--section) * .7) var(--section); }
.here .section-intro { max-width: 76rem; }
.here-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 2.5vw, 40px); align-items: start; }
.map-card { overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 34px 70px rgba(4, 16, 36, .25); }
.map { position: relative; aspect-ratio: 4 / 3; background: var(--sky); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* the address and Get Directions under the map */
.map-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 18px 22px; }
.map-pin { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--sun); color: var(--lake-ink); }
.map-pin .icon { width: 24px; height: 24px; }
.map-address { flex: 1 1 220px; font-style: normal; font-size: 1.125rem; line-height: 1.45; color: var(--ink); }
.map-address strong { display: block; font: 700 1.25rem/1.3 var(--display); color: var(--lake-ink); }
.map-bar :focus-visible { outline-color: var(--lake-bright); }
.routes { display: grid; gap: clamp(16px, 1.8vw, 26px); }
.route { padding: 24px 26px 26px; border-radius: var(--radius); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.route h3 { margin-bottom: 14px; color: #fff; }
.route ol { display: grid; gap: 10px; counter-reset: step; }
.route li { position: relative; padding-left: 44px; font-size: 1.1875rem; line-height: 1.5; color: var(--on-lake); counter-increment: step; }
.route li::before {
	content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
	background: var(--sun); font: 700 1rem/1 var(--display); color: var(--lake-ink);
}
@media (max-width: 1100px) { .here-grid { grid-template-columns: 1fr; } .map { aspect-ratio: 16 / 10; } }
@media (max-width: 600px) { .map { aspect-ratio: 4 / 5; } .map-bar { padding: 16px 18px; } .map-bar .button { flex: 1 1 100%; } .route { padding: 20px 18px 22px; } }

/* ---------------------------------------------------------------- attractions & directions: the region in photos
   Free photos (public domain or no-licence; _source/region-photos/SOURCES.md), laid out like the home page's mosaic,
   each named on a small label (no shading over the photos). */
.region { padding-block: var(--section); }
.region-mosaic {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: repeat(3, round(clamp(170px, 14vw, 250px), 1px)); gap: round(clamp(10px, 1.2vw, 18px), 2px);
}
.region-tile { position: relative; overflow: hidden; border-radius: 18px; background: var(--sky); }
.region-tile img { width: 100%; height: 100%; object-fit: cover; }
.region-tile.tile-1 { grid-column: 1 / 3; grid-row: 1 / 3; }      /* (the home page's mosaic: one large, one tall, one wide) */
.region-tile.tile-2 { grid-column: 3; grid-row: 1; }
.region-tile.tile-3 { grid-column: 4; grid-row: 1 / 3; }
.region-tile.tile-4 { grid-column: 3; grid-row: 2; }
.region-tile.tile-5 { grid-column: 1; grid-row: 3; }
.region-tile.tile-6 { grid-column: 2 / 4; grid-row: 3; }
.region-tile.tile-7 { grid-column: 4; grid-row: 3; }
.region-caption {
	position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 6px 12px; border-radius: 999px;
	background: rgba(255, 255, 255, .92); font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--lake-ink);
}
@media (max-width: 700px) {
	.region-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 150px; grid-auto-flow: dense; }
	.region-mosaic .region-tile { grid-column: auto; grid-row: auto; }
	.region-mosaic .tile-1 { grid-column: 1 / 3; grid-row: span 2; }
	.region-mosaic .tile-3 { grid-row: span 2; }
	.region-mosaic .tile-6 { grid-column: 1 / 3; }
	.region-caption { left: 8px; bottom: 8px; padding: 4px 10px; font-size: .9375rem; }
}

/* ---------------------------------------------------------------- attractions & directions: what's nearby
   Nearest first; the toggle narrows it to one kind (js/site.js initFilter). The last section: room for the hills. */
.nearby { padding-block: var(--section) var(--shore-room); background: var(--sky); }
.nearby-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; margin-bottom: clamp(24px, 2.6vw, 40px); }
.nearby-head .section-intro { flex: 1 1 100%; margin-bottom: 0; }      /* (narrower than 1390px the filter goes on a line of its own) */
.nearby-filter[hidden] { display: none; }
/* Wide enough for both side by side: the filter centred on the "Nearest first" line (Joshua), the heading above both. */
@media (min-width: 1390px) {      /* (below that, the filter goes under the line) */
	.nearby-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 40px; }
	.nearby-head .section-intro { display: contents; }
	.nearby-head h2 { grid-column: 1 / -1; }
	.nearby-head .section-intro p { grid-column: 1; grid-row: 2; margin: 0; }
	.nearby-head .nearby-filter { grid-column: 2; grid-row: 2; }
}
.nearby-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 30px); }
.spot { display: flex; border-radius: var(--radius); background: #fff; box-shadow: 0 1px 0 var(--sky-line), var(--shadow); }
.spot[hidden] { display: none; }
.spot-body { display: flex; flex-direction: column; width: 100%; padding: 22px 26px 24px; }
.spot-kind { display: inline-flex; align-items: center; align-self: flex-start; gap: 7px; margin-bottom: 12px; padding: 3px 11px 3px 9px; border-radius: 999px; background: var(--kind-bg); font-size: 1rem; font-weight: 700; color: var(--lake-ink); }
.spot-kind .icon { width: 16px; height: 16px; color: var(--kind); }
.spot h3 { margin-bottom: 6px; font-size: 1.5rem; }
.spot .spot-where { display: flex; align-items: center; gap: 7px; flex: none; margin: 0 0 12px; font-size: 1.0625rem; font-weight: 700; color: var(--muted); }      /* the town and drive time, under the name */
.spot-where .icon { width: 16px; height: 16px; flex: none; color: var(--sun-deep); }
.spot p:not(.spot-where) { flex: 1; margin-bottom: 16px; font-size: 1.1875rem; line-height: 1.5; }
.spot-link { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-weight: 700; color: var(--lake); text-decoration: none; }
.spot-link:hover { text-decoration: underline; }
.spot-link .icon { width: 15px; height: 15px; }
.kind-family { --kind: #1668C8; --kind-bg: #E3EEFB; }
.kind-outdoors { --kind: #2F8048; --kind-bg: #E4F2E7; }
.kind-evening { --kind: #A55926; --kind-bg: #F6E7DD; }
.kind-shopping { --kind: #C77700; --kind-bg: #FFF3D4; }
.nearby-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2vw, 30px); margin-top: clamp(18px, 2vw, 30px); }
.nearby-more a {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; height: 100%;
	padding: 18px 22px 18px 18px; border-radius: 18px; background: var(--lake); color: var(--on-lake); text-decoration: none;
	box-shadow: 0 10px 26px rgba(8, 62, 133, .2); transition: transform .18s var(--ease-out), box-shadow .25s;
}
.nearby-more a:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(8, 62, 133, .28); }
.nearby-more a :focus-visible, .nearby-more a:focus-visible { outline-color: var(--sun); }
.nearby-more strong { display: block; font: 600 1.375rem/1.25 var(--display); color: #fff; }
.nearby-more span:not(.nearby-more-icon) { font-size: 1.125rem; line-height: 1.45; }
.nearby-more-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--sun); color: var(--lake-ink); }
.nearby-more-icon .icon { width: 24px; height: 24px; }
.nearby-more-go { width: 18px; height: 18px; color: var(--sun-light); }
@media (max-width: 1240px) { .nearby-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
	.nearby-grid, .nearby-more { grid-template-columns: 1fr; }
	.spot-body { padding: 20px 18px 22px; }
	/* Two rows on a phone: the labels spread evenly along each row, the same space between them as at its ends (Joshua: padded
	   buttons side by side doubled it between them). The pill is drawn around each label, outside the spacing. */
	/* (each label keeps 16px either side for its pill; the track's own 16px at the ends makes the ends match the gaps) */
	.nearby-filter { display: flex; flex-wrap: wrap; justify-content: space-evenly; row-gap: 4px; width: 100%; padding: 5px 16px; border-radius: 28px; }
	.nearby-filter button, .nearby-filter button:hover, .nearby-filter button[aria-pressed="true"] { position: relative; z-index: 0; flex: none; margin-inline: 16px; padding: 0; background: none; box-shadow: none; }
	.nearby-filter button::before { content: ""; position: absolute; inset: 0 -14px; z-index: -1; border-radius: 999px; transition: background-color .2s; }
	.nearby-filter button:hover::before { background: var(--sky); }
	.nearby-filter button[aria-pressed="true"]::before { background: var(--lake); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
	.nearby-filter button:focus-visible { outline: none; }
	.nearby-filter button:focus-visible::before { outline: 3px solid var(--lake-bright); outline-offset: 2px; }
}
@media (prefers-reduced-motion: reduce) { .nearby-more a { transition: none; } .nearby-more a:hover { transform: none; } }

/* ---------------------------------------------------------------- FAQs: the policies' layout, a topic to a row, its
   questions and answers beside it (faqs/index.html); the last section, so room for the hills. */
.faqs { padding-top: calc(var(--section) * .7); padding-bottom: var(--shore-room); }      /* (the heading a little nearer the banner, Joshua) */
.faq + .faq { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--sky-line); }
.faq h4 { margin: 0 0 8px; font: 600 1.375rem/1.3 var(--display); color: var(--lake-ink); }
.policy-list a:not(.button) { color: var(--lake-bright); font-weight: 700; }      /* (on the white panel, not the lake's white links) */
.faq strong { color: var(--lake-ink); }
.faq-more { margin: clamp(28px, 3vw, 44px) 0 0; font-size: var(--lead); line-height: 1.5; color: var(--on-lake); }
.faq-more a { font-weight: 700; white-space: nowrap; }
@media (max-width: 600px) { .faq h4 { font-size: 1.25rem; } }

/* ---------------------------------------------------------------- site map & rules: the map to explore (js/site.js initSiteMap)
   The park's map large (Joshua): about 1200px wide and centred, the whole campground showing; zoomed in, it widens to the
   page's full width, its height unchanged so nothing below moves. Drag, pinch, double-click, Ctrl+wheel or the bar's
   + and − to zoom (to 5x; the full-size map loads once zoomed). The bar (the spot list and zoom) stays in view while the
   map scrolls past. Gold rings mark the tour's 360° views; picking one opens it in a sheet over the page, the same at
   every size (Joshua: the phone's way is the best). Nothing loads from the tour until a view is asked for. */
.smap-section { padding-block: calc(var(--section) * .7) var(--section); }
.smap-section .section-intro { margin: 0 auto clamp(20px, 2.2vw, 30px); text-align: center; }      /* (centred over the map, Joshua) */
.smap { --fw: min(1200px, 100%); }
.smap-bar, .smap-foot, .smap-frame { width: var(--fw); margin-inline: auto; }
.smap.is-animating :is(.smap-bar, .smap-foot, .smap-frame) { transition: width .32s var(--ease-out); }
.smap.is-animating .smap-layer { transition: transform .32s var(--ease-out); }

.smap-bar {
	position: sticky; top: calc(var(--menu-h-compact) + 10px); z-index: 5;
	display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 14px; padding: 7px 7px 7px 20px;
	border-radius: 999px; background: rgba(8, 62, 133, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 12px 30px rgba(4, 16, 36, .25);
}
.smap-find { display: flex; align-items: center; gap: 12px; min-width: 0; }
.smap-find-label { font: 600 1.125rem/1.2 var(--display); color: #fff; white-space: nowrap; }
.smap-find select {
	min-height: 46px; min-width: 16rem; max-width: 100%; padding: 0 44px 0 18px; border: 0; border-radius: 999px; appearance: none;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230A3470'%3E%3Cpath d='M1.6 5.1a.75.75 0 0 1 1.06 0L8 10.4l5.34-5.3a.75.75 0 1 1 1.06 1.06l-5.87 5.83a.75.75 0 0 1-1.06 0L1.6 6.16a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E") right 18px center / 16px no-repeat;
	font: 600 1.125rem/1.2 var(--sans); color: var(--lake-ink); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.smap-find select:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
/* The long list drawn in the page in Chromium (house rule: it opens below, at the chosen spot, and stays put), with a fixed
   height that scrolls; phones keep their own list. */
@supports (appearance: base-select) {
	@media not all and (pointer: coarse) {
		.smap-find select, .smap-find select::picker(select) { appearance: base-select; }
		.smap-find select { display: inline-flex; align-items: center; background-image: none; }
		.smap-find select::picker-icon { color: var(--lake-ink); transition: rotate .2s; }
		.smap-find select:open::picker-icon { rotate: 180deg; }
		.smap-find select::picker(select) {
			max-height: min(360px, 50vh); margin-top: 6px; padding: 6px; border: 1px solid var(--sky-line); border-radius: 16px;
			background: #fff; box-shadow: 0 18px 44px rgba(4, 16, 36, .28);
			position-try-order: normal; position-try-fallbacks: flip-block;
		}
		.smap-find option { padding: 7px 12px; border-radius: 8px; font: 500 1.0625rem/1.3 var(--sans); color: var(--ink); }
		.smap-find option:hover, .smap-find option:focus-visible { background: var(--sky); }
		.smap-find option:checked { background: var(--lake); color: #fff; }
		.smap-find option::checkmark { display: none; }
		.smap-find optgroup { padding-top: 6px; font: 700 .9375rem/1.4 var(--display); color: var(--muted); }
		.smap-find optgroup legend { padding: 4px 12px; }
	}
}
.smap-zoom { display: flex; gap: 6px; flex: none; }
.smap-zoom button {
	display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
	background: #fff; color: var(--lake-ink); font: 600 1.625rem/1 var(--display); cursor: pointer; transition: background-color .2s;
}
.smap-zoom button:hover { background: var(--sky); }
.smap-zoom .icon { width: 18px; height: 18px; }
.smap-bar :focus-visible { outline-color: var(--sun); }

.smap-frame {
	position: relative; overflow: hidden; height: var(--fh, auto); aspect-ratio: 3300 / 5100; border-radius: 20px; background: #9ABB90;      /* (the map's own green, beside it while it's narrower than the frame) */
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 34px 70px rgba(4, 16, 36, .25);
	touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
}
.smap-frame.is-zoomed { touch-action: none; }
.smap-frame.is-dragging { cursor: grabbing; }
.smap-layer { --z: 1; --pin: 1; position: absolute; left: 0; top: 0; width: var(--lw, 100%); height: var(--lh, 100%); transform-origin: 0 0; will-change: transform; }
.smap-img { display: block; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }
.smap-pins { position: absolute; inset: 0; }
/* The rings: gold rings, clear inside so each site's own colour (its hookups, the map's key) shows through, pulsing
   gently together (Joshua: not spinning). The button holds still and its ::before pulses: opacity and scale only, so the
   compositor does it. They rest while the map is off screen (js/site.js) and for reduced motion. The current spot glows
   on the still button behind its ring. */
.smap-pin {
	--edge: calc(1px / var(--z));
	position: absolute; width: calc(2.8% * var(--pin)); aspect-ratio: 1; padding: 0; translate: -50% -50%;
	border: 0; border-radius: 50%; background: none; cursor: pointer; transition: background-color .15s;
}
.smap-pin::before {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	background: linear-gradient(135deg, #FFFBE6 0%, #FFE68A 26%, #FFCC33 52%, #FFB81C 76%, #FFEFA8 100%);      /* bright gold, no dark edge (Joshua) */
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.6 * var(--edge)), #000 calc(100% - 3.6 * var(--edge)));
	mask: radial-gradient(farthest-side, transparent calc(100% - 3.6 * var(--edge)), #000 calc(100% - 3.6 * var(--edge)));
	animation: ring-pulse 1.6s ease-in-out infinite alternate;      /* (one pace, started together: in step) */
}
.smap-frame.is-away .smap-pin::before { animation-play-state: paused; }
@keyframes ring-pulse {
	from { opacity: 1; transform: scale(1); }
	to { opacity: .7; transform: scale(.9); }      /* (a shallow pulse: at .5 the bright gold went pale on the green) */
}
.smap-pin:hover { background: rgba(251, 177, 23, .45); }
.smap-pin.is-current { z-index: 1; background: rgba(251, 177, 23, .35); box-shadow: 0 0 0 calc(2px / var(--z)) #fff, 0 0 calc(14px / var(--z)) rgba(251, 177, 23, .95); }
@media (prefers-reduced-motion: reduce) { .smap-pin::before { animation: none; } }

.smap-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-top: 14px; }
.smap-hint { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--on-lake); opacity: .9; }
.smap-pdf { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #fff; text-decoration: none; }
.smap-pdf:hover { text-decoration: underline; }
.smap-pdf .icon { width: 16px; height: 16px; rotate: 90deg; color: var(--sun-light); }

/* the 360° view: a sheet over the page, on the lightbox's frosted sky */
.smap-view {
	position: fixed; z-index: 95; left: 50%; top: 50%; translate: -50% -50%;
	display: flex; flex-direction: column; width: min(1280px, calc(100vw - 40px)); max-height: calc(100svh - 40px); overflow: hidden;
	border-radius: 20px; background: #fff; color: var(--ink); box-shadow: 0 30px 80px rgba(4, 16, 36, .4);
	animation: sheet-in .32s var(--ease-out);
}
.smap-view[hidden] { display: none; }
/* It zooms out of the map, from the middle of the screen, as it fades in (Joshua), and back on closing; the frosted page
   behind it fades with it. */
@keyframes sheet-in { from { opacity: 0; transform: scale(.55); } }
.smap-view.is-closing { animation: sheet-out .2s ease-in both; pointer-events: none; }
@keyframes sheet-out { to { opacity: 0; transform: scale(.7); } }
.smap-backdrop { animation: backdrop-in .25s ease-out; }
.smap-backdrop.is-closing { animation: backdrop-out .2s ease-in both; pointer-events: none; }      /* (a click while it fades reaches the map) */
@keyframes backdrop-in { from { opacity: 0; } }
@keyframes backdrop-out { to { opacity: 0; } }
.smap-view-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px 14px 24px; }
.smap-view h3 { margin: 0 0 2px; font-size: 1.5rem; color: var(--lake-ink); }
.smap-view-titles p { margin: 0; font-size: 1.0625rem; color: var(--muted); }
.smap-view-nav { display: flex; gap: 8px; flex: none; }
.smap-view-nav button { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: var(--sky); color: var(--lake-ink); cursor: pointer; transition: background-color .2s; }
.smap-view-nav button:hover { background: var(--sky-line); }
.smap-view-nav .icon { width: 18px; height: 18px; }
.smap-view :focus-visible { outline-color: var(--lake-bright); }
.smap-stage { position: relative; flex: 1 1 auto; min-height: 0; height: min(72svh, 800px); background: var(--lake-deep); }
.smap-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.smap-credit { margin: 0; padding: 10px 24px 12px; font-size: .9375rem; color: var(--muted); }
.smap-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(234, 244, 253, .82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@media (prefers-reduced-motion: reduce) {
	.smap-view { animation-name: fade-in; animation-duration: .2s; }
	.smap-view.is-closing { animation-name: backdrop-out; }
	@keyframes fade-in { from { opacity: 0; } }
}
@media (max-width: 760px) {
	.smap-view { left: 10px; right: 10px; top: auto; bottom: 10px; translate: none; width: auto; transform-origin: 50% calc(50% - (100svh - 100%) / 2 + 10px); }      /* (still from the screen's middle) */
	.smap-stage { height: min(68svh, 620px); }
}
@media (max-width: 600px) {
	.smap-bar { padding-left: 7px; gap: 8px; }
	.smap-find { flex: 1 1 auto; }
	.smap-find-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }      /* (the list's own first line says it) */
	.smap-find select { min-width: 0; width: 100%; padding-left: 14px; font-size: 1.0625rem; }
	.smap-zoom { gap: 4px; }
	.smap-zoom button { width: 42px; height: 42px; }
	.smap-view-head { padding: 14px 14px 12px 18px; }
	.smap-view h3 { font-size: 1.25rem; }
	.smap-view-nav button { width: 40px; height: 40px; }
}

/* ---------------------------------------------------------------- site map & rules: the rules (the cabin rules' numbered
   grid on a white panel), the last section: room for the hills */
.rules-section { padding-bottom: var(--shore-room); background: var(--sky); }
.rules-panel { padding: clamp(24px, 3vw, 44px); }
.rules-panel .policy-rules { display: block; columns: 2; column-gap: clamp(32px, 3.5vw, 56px); }      /* in columns: the rules differ a lot in length */
.rules-panel .policy-rules li { break-inside: avoid; margin-bottom: 20px; }
@media (max-width: 900px) { .rules-panel .policy-rules { columns: 1; } }
.rules-more { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--sky-line); font-size: 1.1875rem; }

/* ---------------------------------------------------------------- photo gallery: rows that keep each photo's own shape
   and run edge to edge (a justified gallery, CSS only): each photo grows from a common row height by its width/height,
   and the last row is held at that height rather than stretched. On the lake blue, the last section (room for the
   hills). Each opens the lightbox. */
.photo-page { padding-block: calc(var(--section) * .7) var(--shore-room); }
.jg { --row: clamp(150px, 17vw, 300px); display: flex; flex-wrap: wrap; gap: clamp(8px, 1vw, 14px); }
.jg::after { content: ""; flex: 999 1 0; }      /* (the last row's photos keep the row height) */
.jg > li { flex: var(--ar) 1 calc(var(--ar) * var(--row)); }
.jg-tile { position: relative; display: block; aspect-ratio: var(--ar); overflow: hidden; border-radius: 14px; background: var(--lake-deep); cursor: zoom-in; box-shadow: 0 10px 24px rgba(4, 16, 36, .22); }
.jg-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out), filter .3s; }
.jg-tile:hover img { transform: scale(1.04); filter: brightness(1.05); }
.jg-tile:focus-visible { outline-offset: 3px; }
@media (max-width: 700px) { .jg { --row: 120px; } .jg-tile { border-radius: 10px; } }
@media (prefers-reduced-motion: reduce) { .jg-tile img { transition: none; } .jg-tile:hover img { transform: none; } }

/* ---------------------------------------------------------------- footer (the outline rises out of it, its green hills the hero's) */
.site-footer { position: relative; background: url("/img/lake-below.svg") top center / auto calc(var(--shore) * .075) no-repeat, var(--lake-deep); color: var(--on-lake); font-size: 1.1875rem; }
.site-footer > .shoreline { position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); color: var(--lake-deep); }
.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-contact { display: block; margin-top: 14px; }      /* a line's space between the address and the phones and email (Joshua) */
.footer-mailing { display: block; margin-top: 14px; font-size: 1.0625rem; line-height: 1.45; opacity: .85; }      /* the P.O. box, second (Joshua) */
.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.25rem/1.3 var(--display); letter-spacing: 0; }
.footer-nav .footer-links + .footer-links { margin-top: 30px; }      /* Plan Your Stay and Explore share a column (Joshua) */
.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; }
/* The associations the resort belongs to (Joshua, 2026-10-29): their own logos together in one light box, the sky
   blue the section above the footer fades into (not bright white), with fine lines between them; stacked in the
   footer's last column, a row of four below 1000px, two by two on phones. Sized by eye so the different shapes weigh
   the same. */
.footer-members ul { display: grid; padding: 4px 20px; border-radius: 16px; background: var(--sky); box-shadow: 0 6px 18px rgba(4, 16, 36, .18); }
.footer-members li + li { border-top: 1px solid var(--sky-line); }
.footer-members a { display: grid; place-items: center; height: 92px; padding: 12px 0; }
.footer-members img { width: auto; max-width: 100%; height: 60px; object-fit: contain; transition: transform .25s var(--ease-out); }
.footer-members a:hover img { transform: scale(1.04); }
.footer-members .member-pacamping img { height: 64px; }
.footer-members .member-nca img { height: 70px; }
.footer-members .member-ohi img { height: 50px; }
.footer-members .member-pocono img { height: 60px; }
@media (max-width: 1000px) {
	.footer-members { grid-column: 1 / -1; }
	.footer-members ul { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 4px; }
	.footer-members li + li { border-top: 0; border-left: 1px solid var(--sky-line); }
	.footer-members a { height: 112px; padding: 14px 18px; }
	.footer-members .member-pacamping img { height: 76px; }
	.footer-members .member-nca img { height: 86px; }
	.footer-members .member-ohi img { height: 58px; }
	.footer-members .member-pocono img { height: 70px; }
}
@media (max-width: 700px) {
	.footer-members ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.footer-members li + li { border-left: 0; }
	.footer-members li:nth-child(even) { border-left: 1px solid var(--sky-line); }
	.footer-members li:nth-child(n+3) { border-top: 1px solid var(--sky-line); }
	.footer-members a { height: 96px; padding: 12px 14px; }
	.footer-members .member-pacamping img { height: 58px; }
	.footer-members .member-nca img { height: 72px; }
	.footer-members .member-ohi img { height: 46px; }
	.footer-members .member-pocono img { height: 58px; }
}
@media (prefers-reduced-motion: reduce) { .footer-members img { transition: none; } .footer-members a:hover img { transform: none; } }
.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: 1.0625rem;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.credit img { width: 250px; height: auto; }     /* Digital Projections Web Studio */
.footer-br { display: none; }
/* Phones: the bottom bar all centred, "All rights reserved." on a line of its own (Joshua, 2026-11-12) */
@media (max-width: 760px) {
	.footer-bottom { flex-direction: column; justify-content: center; text-align: center; }
	.footer-legal { justify-content: center; }
	.footer-br { display: inline; }
}
@media (max-width: 1000px) {
	.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-about { grid-column: 1 / -1; }
	.footer-nav { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: inherit; }      /* the two lists side by side again */
	.footer-nav .footer-links + .footer-links { margin-top: 0; }
}
@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, .hero-slide.is-leaving { transition: none; animation: none !important; filter: none; }
	.shoreline .shore-lines { animation: none; will-change: auto; }
}