/* ==========================================================================
   Freedom Valley Campground — design system
   Every rule lives here so the page can run under a strict CSP
   (style-src 'self'; no inline style attributes anywhere).
   ========================================================================== */

/* Self-hosted, never a font CDN: the CSP allows fonts only from 'self'.
   Latin subsets fetched by scripts/fetch-fonts.sh; SIL Open Font License 1.1,
   see /static/fonts/LICENSE.txt. The family names are the ones --script and
   --display already use. */
@font-face {
  font-family: 'Caveat Brush';
  src: url('/static/fonts/caveat-brush.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Archivo Black';
  src: url('/static/fonts/archivo-black.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Client palette, September 2026. Names follow the client's sheet; the
     -mid/-dark entries are derived tints needed for links and hovers. */
  --blue-deep:  #0c3b5d;  /* Night Sky         — nav, footer, headings      */
  --blue:       #075985;  /* Deep Lake Blue    — primary, buttons, links    */
  --blue-mid:   #0a6fa8;  /* derived           — link hover on light        */
  --sky:        #38bdf8;  /* Clear Sky         — decorative accents, icons  */
  --sky-light:  #e0f2fe;  /* Morning Sky       — section backgrounds        */
  --sun:        #facc15;  /* Sunshine          — highlights                 */
  --sun-dark:   #e0b40d;  /* derived           — hover on Sunshine          */
  --campfire:   #ea580c;  /* Campfire          — fills behind DARK text     */
  --campfire-2: #c2410c;  /* derived           — white text clears AA here  */
  --campfire-3: #9a3412;  /* derived           — gradient foot              */
  --pine:       #166534;  /* Pine              — nature accents             */
  --meadow:     #dcfce7;  /* Meadow            — backgrounds, badges        */
  --canvas:     #fffbeb;  /* Campground Canvas — warm page background       */
  --canvas-2:   #f5eeda;  /* derived           — table rules, card feet     */
  --charcoal:   #1f2937;  /* Campfire Smoke    — body text                  */
  --gray-muted: #64748b;  /* Trail Gray        — secondary text, borders    */
  --white:      #ffffff;
  --red:        #c52d2d;
  /* Not from the client's sheet. The navigation is black because the oval
     logo was drawn for a black bar and sits on it without a halo. */
  --black:      #000000;
  --black-2:    #1c1c1c;  /* derived — mobile drawer hover */

  /* Kept: the events band is deliberately firelit rather than blue. */
  --wood:       #3b2619;
  --wood-2:     #23150e;
  --wood-3:     #68451e;

  --serif:   Georgia, "Iowan Old Style", "Times New Roman", serif;
  --script:  'Caveat Brush', 'Bradley Hand', cursive;
  --display: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --sans:    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius:    12px;
  --radius-sm: 8px;
  --shadow:    0 3px 12px rgba(0, 0, 0, .13);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, .22);
  --shadow-xl: 0 18px 50px rgba(0, 0, 0, .35);
  --ring:      0 0 0 3px rgba(255, 255, 255, .85);
  --wrap:      1250px;
  --topbar-h:  82px;   /* 62px logo + 10px padding top and bottom */
  --gutter:    5%;
}


*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }
main { padding-top: var(--topbar-h); }
main > .hero:first-child, main > .hero-v2:first-child { margin-top: calc(-1 * var(--topbar-h)); }

/* While the bar sits over the hero it is only a scrim, so the photograph shows
   through. site.js restores the solid black once the hero scrolls past, so the
   nav is never white-on-cream. */
.topbar.topbar--over-hero {
  background: linear-gradient(to bottom, rgba(0, 0, 0, .42), rgba(0, 0, 0, .1) 70%, rgba(0, 0, 0, 0));
  backdrop-filter: none;
}

/* Over a photograph the wash alone is not enough to carry white text, so the
   bar's own contents get a shadow only in that state. */
.topbar--over-hero .nav a,
.topbar--over-hero .contact-top,
.topbar--over-hero .topbar__brand-text {
  text-shadow: 0 1px 6px rgba(0, 16, 28, .9), 0 0 2px rgba(0, 16, 28, .7);
}

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--charcoal);
  background: var(--canvas);
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
p a, .prose a { color: var(--blue-mid); text-decoration: underline; }
p a:hover, .prose a:hover { color: var(--blue-deep); }

img { max-width: 100%; }

/* Text for screen readers only. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

h1, h2, h3 { font-family: var(--serif); font-style: italic; margin: 0 0 .5em; }

/* Visible only to screen readers, and to keyboard users when focused. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--sun); color: #111; padding: 12px 20px;
  font-weight: 800; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

:where(a, button, input, summary):focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 2px;
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */

.topbar {
  /* Fixed rather than sticky so the hero photograph runs up behind it. main
     reserves the height and a leading hero claims it back, so pages without a
     hero still clear the bar. */
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  background: rgba(0, 0, 0, .88);
  backdrop-filter: blur(6px);
  color: var(--white);
  padding: 10px var(--gutter);
  min-height: var(--topbar-h);
  display: flex; align-items: center; gap: 24px;
  transition: background-color .2s;
}
.topbar__logo { height: 58px; width: auto; object-fit: contain; }
.topbar__brand { display: flex; align-items: center; gap: 12px; font-weight: 800; }
.topbar__brand-text {
  font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.1;
  /* Two deliberate lines; without this the first wraps and the bar grows. */
  white-space: nowrap;
}

.nav { display: flex; flex-wrap: nowrap; gap: 18px; align-items: center; flex: 1; justify-content: center; }
.nav a {
  font-weight: 700; font-size: 14px; padding: 8px 4px;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s;
}
.nav a:hover, .nav a:focus-visible { border-bottom-color: var(--sun); color: var(--sun); }
.nav a[aria-current="page"] { border-bottom-color: var(--sun); }

.contact-top { font-size: 12px; white-space: nowrap; line-height: 1.5; }
.contact-top a:hover { color: var(--sun); }

.menu-toggle {
  display: none; user-select: none;
  background: var(--sun); color: #111; border: 0;
  border-radius: var(--radius-sm); padding: 9px 12px;
  font-size: 22px; line-height: 1; cursor: pointer;
}

/* Mobile drawer, built on <details>/<summary> so it is keyboard operable and
   announces its state without JavaScript. */
.nav-disclosure { display: none; }
.nav-disclosure > summary { list-style: none; cursor: pointer; }
.nav-disclosure > summary::-webkit-details-marker { display: none; }
.nav-disclosure > summary::marker { content: ""; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn-fv {
  /* Buttons sit inside <p> in several places, where the paragraph link rule
     would otherwise underline them. */
  text-decoration: none;
  display: inline-block; border: 0; border-radius: var(--radius);
  padding: 15px 24px; font-weight: 800; font-size: 15px;
  cursor: pointer; margin: 8px 8px 0 0;
  transition: transform .12s, box-shadow .12s, background-color .12s;
}
.btn-fv:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-accent  { background: var(--sun); color: #111; }
.btn-accent:hover { background: var(--sun-dark); }
.btn-primary { background: var(--blue); color: var(--white); border: 2px solid var(--white); }
.btn-primary:hover { background: var(--blue-mid); }
.btn-outline { background: transparent; color: var(--blue); border: 2px solid var(--blue); }
.btn-outline:hover { background: var(--blue); color: var(--white); }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero {
  min-height: 460px;
  background-image:
    /* Bottom scrim keeps the headline legible wherever the crop lands it;
       the horizontal wash keeps the left side readable on wide screens. */
    linear-gradient(to top, rgba(6, 30, 50, .9) 0%, rgba(6, 30, 50, .62) 45%, rgba(6, 30, 50, 0) 88%),
    linear-gradient(90deg, rgba(6, 30, 50, .55), rgba(6, 30, 50, .05)),
    var(--hero-image, none);
  background-position: center;
  background-size: cover;
  display: flex; align-items: flex-end;
}
.hero--home {
  --hero-image: url('/static/images/camp_photos/2023/IMG_3471.jpg');
  /* The water sits around 55-65% down the source photo. Anchoring here trims
     sky off the top and lawn off the bottom so the pond stays the subject. */
  background-position: center 68%;
}
.hero--cta  { --hero-image: url('/static/images/camp_photos/2023/IMG_3398.jpg'); min-height: 340px; }

.hero__content { padding: 50px var(--gutter); color: var(--white); max-width: 820px; }
.hero__content h1 {
  font-size: clamp(40px, 6vw, 76px); margin: 0 0 12px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .8), 1px 2px 4px rgba(0, 0, 0, .55);
}
.hero__tag {
  font-size: clamp(15px, 2vw, 20px); font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; margin: 0 0 6px;
  text-shadow: 1px 2px 6px rgba(0, 0, 0, .8);
}
.hero--cta .hero__content { margin: auto; text-align: center; max-width: 900px; }
.hero--cta h1 { font-size: clamp(30px, 4.5vw, 46px); }

/* ── Sections ────────────────────────────────────────────────────────────── */

.section { padding: 30px var(--gutter); max-width: var(--wrap); margin: 0 auto; }
.section.page-opening { padding-bottom: 0; }
.page-opening .prose > :last-child { margin-bottom: 0; }
.section.page-closing { padding-top: 0; }
.page-closing .prose > :last-child { margin-bottom: 0; }
.section > h2 { font-size: clamp(27px, 3.4vw, 36px); color: var(--blue); font-weight: 700; }
.section--flush { max-width: none; padding-inline: 0; }
.section--flush > .section { padding-block: 54px; }

.band-wood  { background: var(--wood);  color: var(--white); }
.band-wood h2, .band-wood h3 { color: var(--white); }
.band-blue { background: var(--blue); color: var(--white); }
.band-blue h2 { color: var(--white); }

.two-col { display: grid; grid-template-columns: 1.15fr 1fr; gap: 45px; align-items: start; }
.split   { display: grid; grid-template-columns: 1.1fr 1fr; gap: 34px; align-items: stretch; }

.prose p { margin: 0 0 1em; }
.section > p:last-child { margin-bottom: 0; }
.section > h2 + .cards, .section > h2 + .tiles { margin-top: 4px; }
.prose :is(h1, h2, h3) { color: var(--blue); }
.band-wood .prose :is(h1, h2, h3), .band-blue .prose :is(h1, h2, h3) { color: var(--white); }
.signature { font-weight: 700; }

/* ── Cards, tiles, gallery ───────────────────────────────────────────────── */

.cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.card-fv {
  background: var(--white); border-radius: var(--radius-sm);
  overflow: hidden; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  transition: transform .15s, box-shadow .15s;
}
.cards, .tiles { align-items: stretch; }
.card-fv:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card-fv img { width: 100%; height: 145px; object-fit: cover; display: block; }
.card-fv__label {
  padding: 12px 10px; text-align: center; font-weight: 800; font-size: 14px;
  background: var(--blue); color: var(--white);
  flex: 1; display: flex; align-items: center; justify-content: center;
}

.tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.tile {
  background: var(--white); border-radius: var(--radius-sm);
  overflow: hidden; text-align: center; font-weight: 700;
  box-shadow: var(--shadow);
}
.tile img { width: 100%; height: 110px; object-fit: cover; display: block; }
.tile span { display: block; padding: 9px 6px; font-size: 13px; }
/* Only the tiles that link to a rental get the hover lift -- an `a.tile`
   selector rather than a modifier class, so a plain amenity tile (the pool,
   the pond) never implies clickability it doesn't have. */
a.tile:hover, a.tile:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.gallery img { width: 100%; height: 128px; object-fit: cover; border-radius: var(--radius-sm); display: block; }

/* ── Events ──────────────────────────────────────────────────────────────── */

.eventbox { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: stretch; }
.feature {
  background: linear-gradient(135deg, var(--wood-2), var(--wood-3));
  border: 2px solid var(--sun); border-radius: var(--radius);
  padding: 30px; text-align: center;
}
.feature img {
  /* Poster artwork is supplied at whatever aspect the designer chose, so cap by
     height and let width follow. The frame makes a portrait poster's surround
     read as matting rather than dead space. */
  max-width: 100%; max-height: 430px; width: auto; height: auto;
  display: block; margin: 0 auto 18px;
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
  outline: 4px solid rgba(255, 255, 255, .1); outline-offset: 0;
}
.feature h3 { font-size: clamp(26px, 3.6vw, 42px); color: var(--sun); margin: 0 0 8px; }
.feature__dates { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 14px; }
.feature__desc { font-size: 17px; margin: 10px 0 4px; }

.upcoming {
  background: var(--blue); border-radius: var(--radius); padding: 22px 24px;
  display: flex; flex-direction: column;
}
.upcoming h3 { font-size: 22px; margin-bottom: .4em; }
.upcoming ol {
  list-style: none; margin: 0; padding: 0;
  flex: 1; display: flex; flex-direction: column; justify-content: space-evenly;
}
.upcoming li { padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .34); }
.upcoming li:last-child { border-bottom: 0; }
.upcoming__date { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.upcoming__title { font-weight: 700; }
.badge-holiday {
  display: inline-block; background: var(--sun); color: #111;
  font-size: 11px; font-weight: 800; padding: 1px 7px;
  border-radius: 20px; margin-left: 6px; vertical-align: 1px;
}

/* ── Alerts / notices ────────────────────────────────────────────────────── */

.notice { border-radius: var(--radius-sm); padding: 16px 20px; margin: 0 0 22px; }
.notice--note  { background: var(--sun); color: #111; }
/* The global link blue is 3.6:1 on Sunshine; AA needs 4.5:1. */
.notice--note a { color: var(--blue-deep); text-decoration: underline; }
.notice--note a:hover, .notice--note a:focus-visible { color: var(--blue); }
.notice--info { background: var(--blue-mid); color: var(--white); }
.notice--error { background: var(--red); color: var(--white); }
/* The global link blue is the info notice's own background. */
.notice--info a, .notice--error a { color: var(--white); text-decoration: underline; }
.notice--info a:hover, .notice--info a:focus-visible,
.notice--error a:hover, .notice--error a:focus-visible { color: var(--white); text-decoration-thickness: 2px; }
.notice p:last-child { margin-bottom: 0; }
/* Last in its container, the container's padding already spaces it. */
.notice:last-child { margin-bottom: 0; }

/* Site alerts (site-alerts REQ-2), below a page's heading band. An ordinary
   section below spaces them from the content, so no padding underneath. Named
   alert-box because Bootstrap owns .alert. Every text and link color clears
   AA (4.5:1) on its background. */
.site-alerts { padding-bottom: 0; }
/* Before a full-width band, such as the home page's events, nothing else
   spaces them. */
.site-alerts:not(:has(+ .section)) { padding-bottom: 30px; }
.alert-box { border-radius: var(--radius-sm); padding: 16px 20px; margin: 0 0 14px; }
.alert-box:last-child { margin-bottom: 0; }
.alert-box p:last-child, .alert-box .prose > :last-child { margin-bottom: 0; }
.alert-box a { text-decoration: underline; }
/* A heading in an alert takes the alert's own text color: .prose's blue
   would vanish on the primary style and fail contrast on danger. */
.alert-box .prose :is(h1, h2, h3, h4, h5, h6) { color: inherit; font-size: 1.15em; margin: 0 0 .4em; }
.alert-box--warning { background: var(--sun); color: #111; }
.alert-box--warning a { color: var(--blue-deep); }
.alert-box--danger { background: var(--red); color: var(--white); }
.alert-box--success { background: var(--meadow); color: var(--charcoal); border-left: 6px solid var(--pine); }
.alert-box--success a { color: var(--blue); }
.alert-box--primary { background: var(--blue); color: var(--white); }
.alert-box--info { background: var(--sky-light); color: var(--charcoal); border-left: 6px solid var(--blue); }
.alert-box--info a { color: var(--blue); }
.alert-box--danger a, .alert-box--primary a { color: var(--white); }

.facts {
  background: var(--blue); color: var(--white);
  border-radius: var(--radius-sm); padding: 20px 24px; margin: 0;
  box-shadow: var(--shadow);
}
.facts > div { padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .28); }
.facts > div:last-child { border-bottom: 0; }
.facts dt {
  font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; opacity: .85;
}
.facts dd { margin: 2px 0 0; font-weight: 700; }

.hours-card {
  background: var(--white); border-left: 6px solid var(--sun);
  border-radius: var(--radius-sm); padding: 20px 24px; box-shadow: var(--shadow);
}
.hours-card p:last-child { margin-bottom: 0; }
.hours-note { font-weight: 800; text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }

/* ── Map teaser ──────────────────────────────────────────────────────────── */

.map-teaser {
  background: var(--sky-light); border: 3px solid var(--blue);
  border-radius: var(--radius); min-height: 300px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 26px;
}
.map-teaser h3 { color: var(--blue); }

/* ── Info strip ──────────────────────────────────────────────────────────── */

.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; text-align: center; }
.info-grid a:hover { color: var(--sun); }
.info-grid strong { display: block; font-size: 17px; }
.info-grid svg { margin-bottom: 8px; }

/* ── Inner page header ───────────────────────────────────────────────────── */

/* Inner pages have no hero, so they get a compact blue band instead. */
.page-head { background: var(--blue); color: var(--white); padding: 34px var(--gutter) 30px; }
.page-head__inner { max-width: var(--wrap); margin: 0 auto; }
.page-head h1 { font-size: clamp(30px, 4.2vw, 44px); margin: 0 0 6px; }
.page-head p { margin: 0; opacity: .9; max-width: 70ch; }
.page-head--reservations p { max-width: none; }

/* The error page: one line of help, then the photo across the column
   (errorPhoto in main.go), cropped wide so it doesn't push the page long. */
.error-body { max-width: var(--wrap); margin: 0 auto; }
.error-help { margin: 0 0 20px; font-size: 18px; }
.error-photo {
  width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover;
  object-position: center 60%; display: block;
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
}

/* ── Long-form content ───────────────────────────────────────────────────── */

.measure { max-width: 72ch; }
.stack > * + * { margin-top: 18px; }

.rules { list-style: none; counter-reset: rule; margin: 0; padding: 0; }
.rules li {
  counter-increment: rule; position: relative;
  background: var(--white); border-radius: var(--radius-sm);
  padding: 16px 20px 16px 62px; margin: 0 0 10px;
  box-shadow: var(--shadow);
}
.rules li::before {
  content: counter(rule);
  position: absolute; left: 16px; top: 15px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--blue); color: var(--white);
  font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.rules strong { color: var(--blue); }
.rules li.is-critical { border-left: 5px solid var(--red); }
.rules li.is-critical strong { color: var(--red); }

/* ── Panels, tables, definition rows ─────────────────────────────────────── */

.panel {
  background: var(--white); border-radius: var(--radius-sm);
  padding: 22px 24px; box-shadow: var(--shadow);
}
.panel h2 { font-size: 22px; margin-bottom: .45em; }
.panel > :last-child { margin-bottom: 0; }

.panel--accent { background: var(--blue); color: var(--white); text-align: center; }
.panel--accent h2 { color: var(--white); }
.coords { font-size: 21px; font-weight: 700; margin: 4px 0; letter-spacing: .02em; }

.table-fv { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow); }
.table-fv th {
  background: var(--blue); color: var(--white); text-align: left;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  padding: 11px 14px;
}
.table-fv td { padding: 11px 14px; border-top: 1px solid #e7ddc2; }
.table-fv tbody tr:hover { background: #f3ecd8; }
.table-fv td:nth-child(n+2) { text-align: right; white-space: nowrap; }

.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }

.ratio-4x3 { position: relative; padding-top: 75%; border-radius: var(--radius-sm); overflow: hidden; }
.ratio-4x3 > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.figure-full img { width: 100%; border-radius: var(--radius-sm); box-shadow: var(--shadow); display: block; }

/* ── Forms ───────────────────────────────────────────────────────────────── */

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.field { display: flex; flex-direction: column; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field label { font-weight: 700; font-size: 13px; margin-bottom: 5px; }
.field input, .field select, .field textarea {
  font: inherit; padding: 10px 12px;
  border: 1px solid #c8cdd6; border-radius: var(--radius-sm);
  background: var(--white); color: var(--charcoal);
  min-width: 0; width: 100%; box-sizing: border-box;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--sun); outline-offset: 1px; border-color: var(--blue); }
.field small { font-size: 12px; opacity: .75; margin-top: 4px; }
.field textarea { resize: vertical; }
.field__optional { color: var(--gray-muted); font-weight: 400; }
.field__required { color: var(--red); font-weight: 700; }
.field .field__error { color: var(--red); font-weight: 700; font-size: 13px; opacity: 1; margin: 0 0 4px; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--red); border-width: 2px; }
/* The confirmation: the email's wording, then the request laid out as the
   email lays it out. */
.confirmation-thanks { margin: 0 0 14px; color: var(--blue-deep); }
.confirmation-status { margin: 0 0 18px; }
.confirmation-subhead { font-size: 20px; margin: 24px 0 10px; }
.confirmation-details {
  display: grid; grid-template-columns: max-content 1fr; gap: 6px 22px;
  margin: 0 0 22px; padding: 16px 20px; background: var(--canvas); border: 1px solid var(--canvas-2);
}
.confirmation-details dt { font-weight: 700; }
.confirmation-details dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .confirmation-details { grid-template-columns: 1fr; gap: 2px; }
  .confirmation-details dd { margin-bottom: 8px; }
}
.confirmation-links { margin-top: 22px; }
.error-summary { margin: 0 0 22px; }
.error-summary h3 { font-size: 17px; margin: 0 0 8px; }
.error-summary ul { margin: 0; padding-left: 20px; }
.error-summary:focus { outline: 3px solid var(--sun); outline-offset: 2px; }
.form-hp { position: absolute; left: -5000px; }

/* ── Reservations ────────────────────────────────────────────────────────── */

.reservation-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, .9fr); gap: 30px; align-items: start; }
.reservation-layout--closed { grid-template-columns: 1fr; }
.reservation-main { min-width: 0; padding: 28px 32px; background: var(--white); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.reservation-winter-image { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); }
.reservation-intro h2 { color: var(--blue); margin-bottom: .2em; }
.reservation-intro p { max-width: 65ch; margin-bottom: 8px; }
.reservation-section { border: 0; border-top: 1px solid var(--canvas-2); margin: 22px 0 0; padding: 22px 0 0; min-width: 0; }
.reservation-section legend { float: none; width: auto; padding: 0; margin: 0 0 14px; color: var(--blue-deep); font: 700 20px var(--serif); }
.reservation-submit { border-top: 1px solid var(--canvas-2); margin-top: 24px; padding-top: 22px; }
.reservation-submit > p:first-child { max-width: 60ch; margin-bottom: 8px; }
.reservation-submit .notice { margin-top: 18px; }
.reservation-sidebar .panel:first-child { border-top: 5px solid var(--sun); }

/* ── Tabs (calendar) ─────────────────────────────────────────────────────── */

.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; }
.tabs button {
  font: inherit; font-weight: 700; cursor: pointer;
  background: var(--white); color: var(--blue);
  border: 2px solid var(--blue); border-radius: 30px;
  padding: 8px 18px;
}
.tabs button.active { background: var(--blue); color: var(--white); }
.tabs button:hover { background: var(--blue-mid); color: var(--white); }

.tab-pane { display: none; }
.tab-pane.active { display: block; }
/* A tab names the month; calendar-nojs.css shows this heading instead when
   the tabs can't work. */
.month-heading { display: none; }

.event-list {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; align-items: start; margin-bottom: 22px;
}

/* The calendar shows the poster artwork alone. Everything a sighted visitor
   reads off the graphic is carried in the image's alt text instead. */
.event-poster { margin: 0; display: block; cursor: zoom-in; }
/* A uniform portrait frame keeps the grid tidy while the set is mixed: the old
   landscape slides letterbox against a near-page-color ground rather than
   leaving holes beside the tall new posters. Portrait artwork fills it exactly,
   so this becomes invisible once every poster is reshot. height: auto, so an
   uploaded poster's height attribute (there to reserve its space) doesn't
   override the frame. */
.event-poster img {
  width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: contain;
  background: var(--canvas-2); display: block;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  transition: transform .18s, box-shadow .18s;
}
.event-poster img:hover { transform: translateY(-4px) scale(1.01); box-shadow: var(--shadow-xl); }

/* Event posters are supplied artwork and their aspect ratio is not ours to
   choose -- today they are 16:9 slides, and the replacements will be portrait
   posters. The image keeps its natural shape and the card grows to fit, so
   nothing is ever cropped or letterboxed. */
.event-card {
  background: var(--white); border-radius: var(--radius-sm);
  overflow: hidden; box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s;
  /* Posters share an aspect ratio but descriptions vary in length, so let the
     body absorb the difference and keep every card in a row the same height. */
  display: flex; flex-direction: column;
}
.event-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.event-card__poster { display: block; width: 100%; height: auto; }
.event-card__body { padding: 16px 18px 18px; flex: 1; }
.event-card__date {
  font-weight: 800; color: var(--blue-mid); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase;
}
.event-card h3 { font-size: 21px; margin: 4px 0 6px; color: var(--blue); }
.event-card p { margin: 0; }

/* Events with no artwork yet still need to read as a card. */
.event-card--textonly .event-card__body { border-top: 5px solid var(--sun); }

/* ── Rate cards ──────────────────────────────────────────────────────────── */

.rate-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rate-card {
  background: var(--white); border-radius: var(--radius-sm);
  overflow: hidden; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.rate-card img { width: 100%; height: 190px; object-fit: cover; display: block; }
.rate-card__head { background: var(--blue); color: var(--white); padding: 13px 18px; font-weight: 800; font-size: 17px; }
.rate-card__body { padding: 18px; flex: 1; }
.rate-card__body p { margin: 0 0 .8em; }
.rate-card__body :last-child { margin-bottom: 0; }

/* One rate-card can hold several plans (Cabins has three tiers) -- a rule
   between them reads as one priced list rather than a run-on paragraph. */
.rate-plan + .rate-plan { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--canvas-2); }
.rate-plan__line { font-size: 15px; }
.rate-plan__notes, .rate-plan__units { font-size: 13px; color: var(--gray-muted); }

/* Notes that apply to every plan on a card. They sit in the card's foot, below
   the flex:1 body, so they line up along the bottom of each row of cards
   instead of pushing one card taller than its neighbors. */
.rate-card__notes {
  list-style: none; margin: 0; padding: 12px 18px;
  background: var(--sky-light); border-top: 3px solid var(--blue-mid);
  font-size: 13px; color: var(--charcoal);
}
.rate-card__notes li { padding-left: 14px; position: relative; }
.rate-card__notes li + li { margin-top: 4px; }
.rate-card__notes li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--blue-mid);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.site-footer { background: var(--blue-deep); color: var(--white); padding: 34px var(--gutter) 28px; }
.footer-inner { max-width: var(--wrap); margin: 0 auto; text-align: center; }
.footer-flags { display: flex; gap: 10px; justify-content: center; margin: 0 0 18px; }
.footer-flags img { height: 26px; width: auto; border-radius: 3px; }
.footer-links { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin: 0 0 14px; font-weight: 700; font-size: 14px; }
.footer-links a:hover { color: var(--sun); }
.footer-legal { font-size: 13px; opacity: .8; margin: 0; }
/* The default link blue is near-invisible on the dark footer. */
.footer-legal a { color: var(--sun); }
.footer-legal a:hover { color: var(--white); }

.back-to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  background: var(--sun); color: #111; border: 0; border-radius: 50%;
  width: 48px; height: 48px; font-size: 20px; font-weight: 800;
  cursor: pointer; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
}

/* ── Newsletter ──────────────────────────────────────────────────────────── */

.newsletter {
  display: flex; gap: 10px; justify-content: center; align-items: center;
  flex-wrap: wrap; margin: 0 0 20px;
}
.newsletter label { font-weight: 700; font-size: 15px; }
.newsletter input[type="email"] {
  /* Was stretching to the flex line height, which the button's own top margin
     had inflated, so the field towered over everything beside it. */
  padding: 0 14px; height: 44px; line-height: 44px;
  border-radius: var(--radius-sm); border: 0;
  font-size: 15px; width: 260px; max-width: 100%;
}
.newsletter .btn-fv {
  margin: 0; padding: 0 24px; height: 44px; line-height: 44px; font-size: 15px;
}
.newsletter__hp { position: absolute; left: -5000px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1360px) {
  .contact-top { display: none; }
  .nav { gap: 13px; }
}

/* Ten nav links plus the two-line brand block need roughly 1150px to lay out
   at full size -- the old 1100px cutoff for shrinking them left a gap where
   the nav no longer fit but hadn't shrunk yet, and the nav text overlapped
   the brand text. This tier now covers that gap; it is a separate query from
   the one below so it does not also pull forward the card-grid breakpoints,
   which have nothing to do with the nav. */
@media (max-width: 1200px) {
  .topbar__brand-text { display: none; }
  .nav { gap: 10px; }
  .nav a { font-size: 13px; }
}

@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
  .rate-cards, .event-list { grid-template-columns: repeat(2, 1fr); }
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .reservation-layout { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .nav, .contact-top { display: none; }
  .topbar { justify-content: space-between; gap: 12px; }
  .menu-toggle { display: block; }

  .nav-disclosure { display: block; }
  .mobile-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--black); padding: 8px 0 14px;
    box-shadow: var(--shadow-lg);
  }
  .mobile-nav a {
    display: block; padding: 13px var(--gutter);
    font-weight: 700; border-bottom: 1px solid rgba(255, 255, 255, .12);
  }
  .mobile-nav a:hover { background: var(--black-2); color: var(--sun); }

  .facts { display: none; }
  .hero { min-height: 400px; }

  /* Narrow containers are taller than they are wide, so cover scales the photo
     by height and background-position has no vertical room to work in. Swap to
     a pre-cropped variant so the pond stays the subject. See
     scripts/make-hero-variants.sh */
  .hero--home { --hero-image: url('/static/images/hero-pond-narrow.jpg'); }
  .hero__content { padding: 34px var(--gutter); }
  .error-photo { aspect-ratio: 4 / 3; }
  .two-col, .split, .eventbox, .reservation-layout { grid-template-columns: 1fr; gap: 28px; }
  .three-col, .rate-cards, .event-list { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .event-row { grid-template-columns: 1fr; gap: 6px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .info-grid { grid-template-columns: 1fr; }
  .section { padding: 24px var(--gutter); }
  .section--flush > .section { padding-block: 40px; }
}

@media (max-width: 520px) {
  .reservation-main { padding: 22px 18px; }
  .tiles, .gallery { grid-template-columns: repeat(2, 1fr); }
  .topbar__brand-text { display: none; }
  .btn-fv { display: block; margin-right: 0; text-align: center; }
  /* .18em tracking pushed the tagline past the right edge on narrow phones. */
  .hero__tag { letter-spacing: .09em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ==========================================================================
   Home page — richer treatment
   Photographic bands, a script display face, icon badges and color-blocked
   action tiles, following the client's second mockup.
   ========================================================================== */

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero-v2 {
  position: relative;
  min-height: 540px;
  display: flex; align-items: center;
  padding: calc(var(--topbar-h) + 24px) var(--gutter) 140px;
  background-image:
    linear-gradient(to top, rgba(6, 30, 50, .72) 0%, rgba(6, 30, 50, .2) 34%, rgba(6, 30, 50, .08) 58%, rgba(8, 35, 58, .5) 100%),
    var(--hero-image, none);
  background-position: center 58%;
  background-size: cover;
  overflow: hidden;
}
.hero-v2__inner {
  position: relative; z-index: 2;
  max-width: var(--wrap); margin: 0 auto; width: 100%;
}
.hero-v2__copy { color: var(--white); max-width: 52ch; }

/* The block rotates on top of the letterform skew: the skew leans the letters,
   this lifts the whole line. Tune with --tilt. */
.hero-v2__tilt {
  --tilt: -5deg;
  transform: rotate(var(--tilt));
  transform-origin: left center;
  margin-bottom: 18px;
}
.hero-v2__script {
  font-family: var(--script);
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: 1.08; margin: 0 0 2px;
  /* Caveat Brush is drawn upright; the reference leans. A skew gives the slant
     without swapping to a lighter-stroked face. */
  transform: skewX(-11deg);
  transform-origin: left bottom;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .75), 0 1px 3px rgba(0, 0, 0, .6);
}

/* Keep the second half intact: narrow viewports were breaking it after "be",
   leaving "you" stranded on its own line. */
.hero-v2__script span { white-space: nowrap; }
.hero-v2__swoosh {
  display: block; width: clamp(210px, 27vw, 360px); height: auto;
  fill: var(--sun); margin: 0;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
}

/* The 20th anniversary badge: on the right, centered on the tagline's line.
   The inner block is only as tall as the tagline, so 50% is its middle. */
.hero-anniv {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: block; width: 190px; height: auto;
}

.hero-anniv-line { display: none; }

/* Action tiles sit across the bottom of the hero, overlapping into it. */
.action-tiles {
  position: absolute; left: 0; right: 0; bottom: 30px; z-index: 3;
  padding: 0 var(--gutter);
}
.action-tiles__inner {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.tile-action {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 18px; border-radius: 10px;
  color: var(--white); font-weight: 800; font-size: 15px;
  letter-spacing: .03em; text-transform: uppercase;
  border: 2px solid rgba(255, 255, 255, .9);
  box-shadow: var(--shadow-lg);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.tile-action:hover { transform: translateY(-3px); box-shadow: var(--shadow-xl); filter: brightness(1.08); }
.tile-action svg { flex: none; }
.tile-action--book    { background: linear-gradient(160deg, var(--blue-mid), var(--blue)); }
.tile-action--events  { background: linear-gradient(160deg, var(--campfire-2), var(--campfire-3)); }
.tile-action--stay    { background: linear-gradient(160deg, var(--sun), var(--sun-dark)); color: #2a1e00; }
.tile-action--contact { background: linear-gradient(160deg, #1b4a76, var(--blue-deep)); }

/* ── Section headings with flanking rules ────────────────────────────────── */

.title-flank {
  display: flex; align-items: center; gap: 18px;
  justify-content: center; text-align: center;
  margin: 0 0 8px;
}
.title-flank::before, .title-flank::after {
  content: ""; height: 3px; flex: 1; max-width: 120px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(7, 89, 133, 0), var(--blue));
}
.title-flank::after { background: linear-gradient(90deg, var(--blue), rgba(7, 89, 133, 0)); }
.title-flank h2 {
  font-family: var(--display); font-style: normal;
  font-size: clamp(24px, 3.4vw, 40px);
  letter-spacing: .02em; text-transform: uppercase;
  color: var(--blue); margin: 0; white-space: nowrap;
}
.band-dark .title-flank h2,
.band-photo .title-flank h2,
.band-wood-rich .title-flank h2 { color: var(--white); text-shadow: 0 2px 12px rgba(0,0,0,.7); }
.band-dark .title-flank::before,
.band-photo .title-flank::before,
.band-wood-rich .title-flank::before { background: linear-gradient(90deg, rgba(244,194,31,0), var(--sun)); }
.band-dark .title-flank::after,
.band-photo .title-flank::after,
.band-wood-rich .title-flank::after { background: linear-gradient(90deg, var(--sun), rgba(244,194,31,0)); }
.band-photo .section-sub { color: var(--white); opacity: .95; text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.section-sub { text-align: center; margin: 0 0 26px; opacity: .85; }

/* ── Photographic bands ──────────────────────────────────────────────────── */

.band-photo {
  position: relative;
  background-image: var(--band-overlay, linear-gradient(rgba(8,34,56,.82), rgba(8,34,56,.88))), var(--band-image, none);
  background-size: cover; background-position: center;
  color: var(--white);
}
.band-photo .prose, .band-photo p { color: var(--white); }
/* The default link blue is unreadable against a dark photograph. */
.band-photo p a:not(.btn-fv), .band-photo .prose a:not(.btn-fv),
.band-wood-rich p a:not(.btn-fv), .band-wood-rich .prose a:not(.btn-fv) { color: var(--sun); }
.band-photo p a:not(.btn-fv):hover,
.band-wood-rich p a:not(.btn-fv):hover { color: var(--white); }
.band-forest { --band-image: url('/static/images/camp_photos/2023/IMG_3414.jpg'); }
.band-night {
  --band-image: url('/static/images/cedar-point-sunset.jpg');
  /* The sunset is the point of this band, so the wash is lighter than the
     others and weighted to the left, where the copy sits. */
  /* Copy now spans most of the width, so the wash stays heavy across the text
     and only thins at the far right where the sun sits. */
  --band-overlay: linear-gradient(100deg, rgba(0, 20, 30, .8) 0%, rgba(0, 20, 30, .68) 48%, rgba(4, 16, 28, .46) 80%, rgba(20, 10, 20, .22) 100%);
  background-position: center bottom;
}
.band-night h3 { color: var(--sun); font-family: var(--display); font-style: normal;
                 text-transform: uppercase; font-size: 16px; letter-spacing: .04em; }

/* The heading spans both attraction columns, so center it over them. */
.loc-grid > div:last-child > h3 { text-align: center; margin-bottom: 18px; }

/* With a lighter wash the copy needs its own contrast. Buttons sit on their own
   fill and inherit the shadow from the paragraph around them, which muddies
   dark text on gold, so they clear it. */
.band-night p, .band-night address,
.band-night .attractions dt, .band-night .attractions dd {
  text-shadow: 0 1px 6px rgba(0, 12, 18, .85), 0 0 2px rgba(0, 12, 18, .6);
}
.band-night .btn-fv, .band-night .loc-badge { text-shadow: none; }
.band-night .loc-badge__miles { text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }

.band-wood-rich {
  background-image:
    linear-gradient(rgba(35, 21, 14, .9), rgba(47, 29, 17, .94)),
    url('/static/images/camp_photos/2023/IMG_3414.jpg');
  background-size: cover; background-position: center;
  color: var(--white);
  border-top: 4px solid var(--sun);
  border-bottom: 4px solid var(--sun);
}

/* ── This week at camp ───────────────────────────────────────────────────── */

.week__intro { font-size: 17px; margin: 0 0 22px; }
.week__more { margin: 26px 0 0; text-align: center; }

.poster-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
/* Four across until the posters get too small to read, then two. Never three:
   the home page shows four events, and three across would strand one. */
@media (max-width: 700px) {
  .poster-strip { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
.poster-card {
  border-radius: 10px; overflow: hidden;
  background: #120c08;
  box-shadow: var(--shadow-xl);
  border: 2px solid rgba(244, 194, 31, .55);
  display: flex; flex-direction: column;
  transition: transform .18s, border-color .18s;
}
.poster-card:hover { transform: translateY(-4px) scale(1.02); border-color: var(--sun); }
.poster-card img {
  width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: contain;
  background: #0b0705; display: block;
}
.poster-card__cap {
  display: block; padding: 9px 10px; text-align: center; margin-top: auto;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55));
}
.poster-card__title {
  display: block; font-weight: 800; font-size: 12px; line-height: 1.25;
  text-transform: uppercase; letter-spacing: .02em;
}
.poster-card__date { display: block; font-size: 11px; color: var(--sun); margin-top: 3px; }

/* ── Experience cards with icon badges ───────────────────────────────────── */

.exp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.exp-card {
  position: relative; border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-lg); background: var(--blue-deep);
  display: block;
  transition: transform .18s, box-shadow .18s;
}
.exp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }
.exp-card__img { width: 100%; height: 210px; object-fit: cover; display: block; }
.exp-card__body {
  padding: 16px 16px 18px 84px; color: var(--white);
  background: linear-gradient(180deg, rgba(10,45,72,.96), rgba(8,34,56,.98));
  min-height: 92px;
}
.exp-card__body h3 {
  font-family: var(--display); font-style: normal; text-transform: uppercase;
  font-size: 15px; letter-spacing: .02em; margin: 0 0 4px; color: var(--white);
}
.exp-card__body p { margin: 0; font-size: 13px; opacity: .9; line-height: 1.4; }
.exp-card__badge {
  z-index: 2; position: absolute; left: 16px; bottom: 40px;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--blue); border: 3px solid var(--white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .5);
}

/* ── Accommodation tiles over a photo band ───────────────────────────────── */

.acc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.acc-card {
  border-radius: 10px; overflow: hidden; background: var(--blue-deep);
  box-shadow: var(--shadow-lg); display: block;
  border: 2px solid rgba(255, 255, 255, .22);
  transition: transform .18s, border-color .18s;
}
.acc-card:hover { transform: translateY(-4px); border-color: var(--sun); }
.acc-card img { width: 100%; height: 150px; object-fit: cover; display: block; }
.acc-card__label {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 8px; text-align: center;
  background: linear-gradient(180deg, #0e5f92, #093f63);
  color: var(--white); font-weight: 800; font-size: 13px;
  text-transform: uppercase; letter-spacing: .02em;
}
.acc-card__label svg { flex: none; }

/* ── Gallery mosaic + map ────────────────────────────────────────────────── */

.mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mosaic > a {
  display: block; border-radius: 8px; overflow: hidden; cursor: zoom-in;
  transition: transform .18s, box-shadow .18s;
}
.mosaic > a:hover, .mosaic > a:focus-visible { transform: scale(1.04); box-shadow: var(--shadow-lg); }
.mosaic img { width: 100%; height: 118px; object-fit: cover; display: block; }
.mosaic__tall { grid-row: span 2; }
.mosaic__tall img { height: 244px; }

/* Both halves of the gallery/map split sit in the same card so the section
   reads as a pair rather than a panel beside loose images. The columns stretch
   and each card fills its column, so the two always finish level whatever the
   content; the button is pushed to the foot of each. */
.split > div { display: flex; flex-direction: column; }
.split-card {
  background: var(--white); border-radius: 12px; padding: 20px;
  box-shadow: var(--shadow-lg); text-align: center;
  flex: 1; display: flex; flex-direction: column;
}
.split-card > .mosaic { margin-bottom: 18px; flex: none; }
.split-card > img { flex: none; }
.split-card > p:last-child { margin-top: auto; margin-bottom: 0; }
.map-card img { width: 100%; border-radius: 8px; display: block; margin-bottom: 14px; }

/* ── Location band ───────────────────────────────────────────────────────── */

.loc-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 34px; align-items: center; }
.attractions {
  margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 28px;
}
.attractions > div { padding-left: 24px; position: relative; }
.attractions > div::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--sun); box-shadow: 0 0 0 4px rgba(244, 194, 31, .26);
}
.attractions dt {
  font-family: var(--display); color: var(--sun);
  font-size: 16px; letter-spacing: .02em;
  margin-bottom: 4px;
}
.attractions dd { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.5; }

.loc-badge {
  text-align: center; padding: 14px 20px; margin-top: 22px;
  display: inline-block; border-radius: var(--radius);
  background: rgba(6, 24, 38, .72);
  border: 2px solid rgba(244, 194, 31, .55);
  backdrop-filter: blur(3px);
  box-shadow: var(--shadow-lg);
}
.loc-badge__miles {
  font-family: var(--display); font-size: 30px; color: var(--sun);
  display: block; line-height: 1.1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}

/* ── Footer motto ────────────────────────────────────────────────────────── */

.footer-motto {
  font-family: var(--script);
  font-size: clamp(22px, 3vw, 34px);
  color: var(--sun);
  margin: 0 0 16px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .exp-grid { grid-template-columns: repeat(2, 1fr); }
  .acc-grid { grid-template-columns: repeat(3, 1fr); }
  .loc-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  /* The hero is a flex container, so a static .action-tiles would become a flex
     item sitting beside the copy. Switch to block so it stacks underneath. */
  .hero-v2 { display: block; min-height: 0; padding: calc(var(--topbar-h) + 18px) var(--gutter) 0; }
  .hero-v2__inner { text-align: center; }
  .hero-v2__copy { max-width: none; }
  .hero-v2__script { transform-origin: center bottom; }
  .hero-v2__tilt { transform-origin: center; }
  .hero-v2__swoosh { margin-inline: auto; }
  /* Once the hero stacks and the menu button appears, the logo, tagline and
     tiles already fill it: the anniversary badge stays on wider screens and
     in the emails. */
  .hero-anniv { display: none; }
  .hero-anniv-line {
    display: block; margin: 4px 0 16px; text-align: center;
    font-family: var(--script); font-size: 24px; color: var(--white);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .8), 0 1px 3px rgba(0, 0, 0, .6);
  }
  .hero-anniv-line span { color: var(--sun); margin-left: 6px; }
  .action-tiles { position: static; padding: 20px 0 4px; }
  .action-tiles__inner { grid-template-columns: repeat(2, 1fr); }
  .title-flank::before, .title-flank::after { max-width: 40px; }
  .title-flank h2 { white-space: normal; }
  .loc-grid { grid-template-columns: 1fr; gap: 26px; }
  .attractions { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .exp-grid, .acc-grid { grid-template-columns: 1fr; }
  .action-tiles__inner { grid-template-columns: 1fr; }
  .mosaic { grid-template-columns: repeat(2, 1fr); }
  .mosaic__tall { grid-row: auto; }
  .mosaic__tall img { height: 118px; }
}

/* ── Photo gallery ───────────────────────────────────────────────────────── */

.gallery-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.shot {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  background: var(--blue-deep);
  transition: transform .18s, box-shadow .18s;
}
.shot:hover, .shot:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-xl); }
.shot img { width: 100%; height: 200px; object-fit: cover; display: block; }
.shot__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 12px 10px; color: var(--white);
  font-size: 13px; font-weight: 700; line-height: 1.3;
  background: linear-gradient(to top, rgba(8, 34, 56, .92), rgba(8, 34, 56, 0));
}

/* ── Lightbox ────────────────────────────────────────────────────────────── */

.lightbox {
  border: 0; padding: 0; max-width: 100vw; max-height: 100vh;
  width: 100%; height: 100%;
  background: rgba(6, 22, 36, .96); color: var(--white);
}
.lightbox::backdrop { background: rgba(5, 18, 30, .9); }
.lightbox__figure {
  margin: 0; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 56px 68px;
}
.lightbox__figure img {
  max-width: 100%; max-height: calc(100vh - 150px);
  width: auto; height: auto; object-fit: contain;
  border-radius: var(--radius-sm); box-shadow: var(--shadow-xl);
  /* Hidden until site.js confirms the new photograph has decoded, so the
     previous one is never shown in its place. */
  opacity: 0;
  transition: opacity .18s ease;
}
.lightbox__figure img.is-ready { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .lightbox__figure img { transition: none; }
}
.lightbox__figure figcaption {
  font-size: 15px; font-weight: 700; text-align: center; max-width: 60ch;
}
.lightbox__close, .lightbox__nav {
  position: absolute; z-index: 2; cursor: pointer;
  background: rgba(0, 0, 0, .45); color: var(--white);
  border: 2px solid rgba(255, 255, 255, .45); border-radius: 50%;
  width: 46px; height: 46px; line-height: 1; font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s, border-color .15s;
}
.lightbox__close:hover, .lightbox__nav:hover {
  background: var(--sun); color: #111; border-color: var(--sun);
}
.lightbox__close { top: 14px; right: 16px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 32px; }
.lightbox__nav--prev { left: 12px; }
.lightbox__nav--next { right: 12px; }

@media (max-width: 560px) {
  .lightbox__figure { padding: 56px 12px 68px; }
  .lightbox__nav { top: auto; bottom: 12px; transform: none; }
  .shot img { height: 170px; }
}

/* ── Calendar: poster plus its schedule as real text ─────────────────────── */

.event-item { display: flex; flex-direction: column; }
.event-item > .event-poster { flex: none; }

.event-text {
  background: var(--white); border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow); margin-top: -6px; padding: 12px 16px 2px;
}
/* Two fixed rows -- title, then meta -- so a long weekend name or the holiday
   badge cannot push the toggle onto an extra line and make one card taller than
   the rest of its row. */
.event-text > summary {
  cursor: pointer; list-style: none;
  display: grid; gap: 4px; padding-bottom: 10px;
}
.event-text__meta {
  display: flex; align-items: center; gap: 10px; min-height: 26px;
}
.event-text > summary::-webkit-details-marker { display: none; }
.event-text > summary::marker { content: ""; }
.event-text__meta::after {
  content: "Details \25BE"; margin-left: auto;
  font-size: 12px; font-weight: 700; color: var(--blue-mid);
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.event-text[open] .event-text__meta::after { content: "Details \25B4"; }
.event-text > summary:hover .event-text__meta::after { color: var(--sun-dark); }
.event-text__title {
  font-family: var(--serif); font-style: italic; font-weight: 700;
  font-size: 19px; color: var(--blue); line-height: 1.2;
}
.event-text__date {
  font-size: 12px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--blue-mid);
}
.event-text > p { margin: 0 0 12px; font-size: 14px; line-height: 1.55; }

/* ── Holiday rates note ──────────────────────────────────────────────────── */

/* The badge is a button on the calendar, a plain span elsewhere, so the shared
   styling must not assume either. */
button.badge-holiday {
  font: inherit; font-size: 11px; font-weight: 800; cursor: pointer;
  border: 0; line-height: 1.6;
}
button.badge-holiday:hover { background: var(--sun-dark); }

.popnote {
  max-width: 34ch; margin: auto;
  border: 2px solid var(--sun); border-radius: var(--radius-sm);
  background: var(--blue-deep); color: var(--white);
  padding: 16px 20px; font-size: 15px; line-height: 1.5;
  box-shadow: var(--shadow-xl);
}
.popnote::backdrop { background: rgba(5, 18, 30, .5); }

/* Per-event minimum stay: an asterisk after the title, keyed to a note below
   the calendar. The asterisk is hidden from screen readers, which get the
   .sr-only text beside it instead. */
.min-stay-mark { color: var(--red); font-weight: 800; margin-left: 2px; cursor: help; }
.min-stay-notes { list-style: none; margin: 18px 0; padding: 0; font-weight: 700; }
.min-stay-notes span { color: var(--red); }

/* ── Rentals ──────────────────────────────────────────────────────────────── */

/* Alternating ground so nineteen cards read as bands rather than a spreadsheet. */
.section--tint { background: var(--sky-light); }

.rental-band__head { margin-bottom: 1.5rem; }
.rental-band__head h2 { margin: 0 0 .35rem; color: var(--blue-deep); }
.rental-band__head p { margin: 0; color: var(--gray-muted); }
.section--tint .rental-band__head p { color: var(--charcoal); }

.rental-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.5rem;
}

.rental-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--charcoal);
  transition: transform .18s, box-shadow .18s;
}

.rental-card:hover,
.rental-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.rental-card__frame { position: relative; overflow: hidden; }

.rental-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .4s ease;
}

.rental-card:hover .rental-card__img { transform: scale(1.05); }

.rental-card__img--none { background: var(--blue-deep); }

/* Solid ground rather than text over the photograph. Contrast over photography
   is the one thing the palette measurement could not settle, so the price sits
   on its own block where the ratio is known. */
.rental-card__price {
  position: absolute;
  right: 0;
  bottom: 0;
  background: var(--blue-deep);
  color: var(--white);
  font-family: var(--display);
  font-size: 1.15rem;
  padding: .45rem .8rem;
  border-top-left-radius: var(--radius-sm);
}

.rental-card__price small {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 400;
  opacity: .85;
}

/* Grows so every card in a row ends level, whatever the description length. */
.rental-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.15rem 1.25rem;
}

.rental-card__name {
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--blue-deep);
  margin: 0 0 .5rem;
}

.rental-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .5rem;
  margin: 0 0 .7rem;
  font-size: .78rem;
  color: var(--gray-muted);
}

.rental-card__meta span {
  background: var(--canvas-2);
  border-radius: 999px;
  padding: .18rem .6rem;
}

.rental-card__kind { background: var(--meadow) !important; color: var(--pine); }

.rental-card__desc {
  margin: 0 0 1rem;
  font-size: .92rem;
  line-height: 1.5;
}

/* margin-top:auto pins this to the foot so the cards align. */
.rental-card__more {
  margin-top: auto;
  font-weight: 600;
  color: var(--blue);
  font-size: .9rem;
}

.rental-card:hover .rental-card__more { color: var(--blue-mid); }

/* ── Rental detail ───────────────────────────────────────────────────────── */

.rental-detail {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 1.5rem;
  margin: 1.5rem 0;
  align-items: start;
}

.amenity-list {
  columns: 2;
  column-gap: 1.5rem;
  margin: 0;
  padding-left: 1.2rem;
}

.amenity-list li { break-inside: avoid; margin-bottom: .3rem; }

.rental-rate { font-size: 1.1rem; }
.rental-rate strong { font-size: 1.6rem; color: var(--blue); }

@media (max-width: 900px) {
  /* Never pair a tall column with a short one -- stack instead. */
  .rental-detail { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .amenity-list { columns: 1; }
  .rental-grid { gap: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .rental-card,
  .rental-card__img { transition: none; }
  .rental-card:hover { transform: none; }
  .rental-card:hover .rental-card__img { transform: none; }
}

/* An event's own page: its detail image, with the detail written out
   beneath it (specs/event-images.md REQ-5). */
.event-detail { max-width: 52rem; }
.event-detail__figure { margin: 0 0 1.5rem; }
.event-detail__figure img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.event-detail__text { white-space: pre-line; }
.lightbox__page { color: inherit; text-decoration: underline; }
.lightbox__page[hidden] { display: none; }