/* Cedar Lodge marketing site.

   Visual system matches Park OS's public pages exactly, so a visitor sees one
   product from this page through to the paid booking on Park OS's own /book.
   Ruled by Daniel 2026-09-20 ~01:50 ET: Park OS's public look wins for launch.

   Every colour, font stack, type size, radius and interaction state below is
   copied from the booking system and the booking system*,
   read-only, never edited. Full citations with file and line:
   ../DESIGN-TOKENS-FROM-PARKOS.md, next to this file's parent folder.

   No embedded fonts. Park OS's public pages carry no custom typeface, only
   the system UI stack, so neither does this site. Plain CSS, no build step,
   same as before. */

:root {
  color-scheme: light dark;

  /* ---- Light palette. Copied verbatim from globals.css:23-34. ---- */
  --light-bg: hsl(40 26% 97%);
  --light-surface: hsl(0 0% 100%);
  --light-surface-sunken: hsl(40 20% 94%);
  --light-border: hsl(38 14% 87%);
  --light-border-strong: hsl(36 12% 76%);
  --light-ink: hsl(30 10% 12%);
  --light-ink-muted: hsl(32 8% 42%);
  --light-ink-faint: hsl(34 8% 56%);
  --light-accent: hsl(187 68% 28%);
  --light-accent-hover: hsl(187 68% 23%);
  --light-accent-soft: hsl(187 46% 93%);
  --light-accent-contrast: hsl(0 0% 100%);
  --light-shadow: 0 1px 2px hsl(30 12% 12% / 0.05), 0 5px 16px hsl(30 12% 12% / 0.05);
  --light-edge-highlight: hsl(0 0% 100% / 0);

  /* ---- Dark palette. Copied verbatim from globals.css:98-119. ---- */
  --dark-bg: hsl(32 8% 9%);
  --dark-surface: hsl(32 7% 13%);
  --dark-surface-sunken: hsl(32 8% 11%);
  --dark-border: hsl(34 6% 22%);
  --dark-border-strong: hsl(34 6% 32%);
  --dark-ink: hsl(40 18% 94%);
  --dark-ink-muted: hsl(38 8% 68%);
  --dark-ink-faint: hsl(36 7% 54%);
  --dark-accent: hsl(187 58% 60%);
  --dark-accent-hover: hsl(187 58% 68%);
  --dark-accent-soft: hsl(187 40% 18%);
  --dark-accent-contrast: hsl(190 60% 8%);
  --dark-shadow: 0 1px 2px hsl(0 0% 0% / 0.4), 0 6px 20px hsl(0 0% 0% / 0.34);
  --dark-edge-highlight: hsl(40 30% 92% / 0.055);

  /* ---- Semantic names default to the light set. The two blocks below
     (system dark, and the explicit switch) repoint every one of these to
     the dark set. Nothing is written a third time, so the two themes
     cannot drift apart, same discipline as globals.css. ---- */
  --bg: var(--light-bg);
  --surface: var(--light-surface);
  --surface-sunken: var(--light-surface-sunken);
  --border: var(--light-border);
  --border-strong: var(--light-border-strong);
  --ink: var(--light-ink);
  --ink-muted: var(--light-ink-muted);
  --ink-faint: var(--light-ink-faint);
  --accent: var(--light-accent);
  --accent-hover: var(--light-accent-hover);
  --accent-soft: var(--light-accent-soft);
  --accent-contrast: var(--light-accent-contrast);
  --shadow: var(--light-shadow);
  --edge-highlight: var(--light-edge-highlight);

  /* The switch knob's position, 0 or 1. Resolved by the same selectors as
     the palette below, so the knob is never on the wrong side, even in the
     first painted frame. Mirrors globals.css:211 + :341/:355/:415. */
  --theme-on: 0;

  /* ---- Type. Copied verbatim from globals.css:216-230. ---- */
  --font-sans:
    ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.125rem;

  /* ---- Geometry. Copied verbatim from globals.css:233-236. ---- */
  --tap: 48px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;

  /* This site's own layout tokens. Unchanged by the restyle. */
  --rail: 22rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
}

/* System preference is dark, and nobody has forced light on this visit.
   Mirrors globals.css:279-283 / :340-342. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--dark-bg);
    --surface: var(--dark-surface);
    --surface-sunken: var(--dark-surface-sunken);
    --border: var(--dark-border);
    --border-strong: var(--dark-border-strong);
    --ink: var(--dark-ink);
    --ink-muted: var(--dark-ink-muted);
    --ink-faint: var(--dark-ink-faint);
    --accent: var(--dark-accent);
    --accent-hover: var(--dark-accent-hover);
    --accent-soft: var(--dark-accent-soft);
    --accent-contrast: var(--dark-accent-contrast);
    --shadow: var(--dark-shadow);
    --edge-highlight: var(--dark-edge-highlight);
    --theme-on: 1;
  }
}

/* The viewer forced light. Sits after the media query on purpose: equal
   specificity, so source order lets an explicit choice beat the system.
   Mirrors globals.css:349-357. */
:root[data-theme="light"] {
  color-scheme: light;
  --theme-on: 0;
}

/* The viewer forced dark, whatever the system says. Mirrors globals.css:360-378. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--dark-bg);
  --surface: var(--dark-surface);
  --surface-sunken: var(--dark-surface-sunken);
  --border: var(--dark-border);
  --border-strong: var(--dark-border-strong);
  --ink: var(--dark-ink);
  --ink-muted: var(--dark-ink-muted);
  --ink-faint: var(--dark-ink-faint);
  --accent: var(--dark-accent);
  --accent-hover: var(--dark-accent-hover);
  --accent-soft: var(--dark-accent-soft);
  --accent-contrast: var(--dark-accent-contrast);
  --shadow: var(--dark-shadow);
  --edge-highlight: var(--dark-edge-highlight);
  --theme-on: 1;
}

/* ---------- base ---------- */

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

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

/* Link style. Park OS's own public pages carry no body prose with inline
   text links (its one text-link specimen is the muted footer utility link,
   which would read backwards applied to normal-contrast copy: a link
   duller than the words around it). So this keeps the site's own existing
   link interaction, coloured and underlined with a thicker underline on
   hover, and re-tokens it onto Park OS's accent colours rather than
   inventing a pattern with nothing to check it against. See
   DESIGN-TOKENS-FROM-PARKOS.md, "What could not be pixel-matched". */
a {
  color: var(--accent);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.14em;
}
a:hover { color: var(--accent-hover); text-decoration-thickness: 0.12em; }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
[id] { scroll-margin-top: 1rem; }

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100%;
  z-index: 2;
  padding: 0.6rem 1rem;
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.skip:focus { top: 0.5rem; }

/* One focus ring everywhere, always visible against both themes. Mirrors
   globals.css:477-480. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

p { margin: 0 0 1em; max-width: 34em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Mirrors globals.css:466-472: no sign lettering, no italics, one face. */
h1, h2, h3 {
  font-family: var(--font-sans);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.011em;
  color: var(--ink);
  margin: 0;
}

h1, h2 { text-wrap: balance; }
h2 { font-size: var(--text-2xl); margin-bottom: 0.6rem; }

ul { padding: 0; margin: 0; list-style: none; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- page grid (layout unchanged) ---------- */

.page {
  display: grid;
  grid-template-columns: 1fr;
}

/* Phone: the rail and the main column dissolve, and their children take an
   order that puts the photo between the name and the price board. */
.rail, .main { display: contents; }

.mast   { order: 1; }
.hero   { order: 2; }
.board  { order: 3; }
.body   { order: 4; }

/* ---------- masthead ---------- */

.mast {
  padding: 0.75rem var(--gutter) 0.6rem;
}

/* Brand row: the name (or the small back-home link on an inner page) beside
   the light/dark switch, mirroring PublicSiteHeader's layout
   (the booking system:24, a flex row with
   justify-between between the brand mark and ThemeToggle). */
.mast__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* The home page name. Park OS's own h1 tops out at text-3xl even on desktop
   (the booking system:179: "text-2xl font-semibold tracking-tight
   text-ink md:text-3xl"), so this does too, in place of the old sign-board
   display size. */
.mast__name {
  font-size: var(--text-2xl);
  font-weight: 650;
  letter-spacing: -0.011em;
  color: var(--ink);
  margin: 0;
}
.mast__name a { color: inherit; text-decoration: none; }
.mast__name a:hover { text-decoration: underline; text-decoration-thickness: 0.08em; }

.mast__line {
  margin: 0.4rem 0 0;
  font-size: var(--text-base);
  color: var(--ink-muted);
  max-width: 22em;
}

/* Inner pages: the small back-home brand link, sized like Park OS's own
   brand mark (PublicSiteHeader.tsx:33: "text-base font-semibold
   tracking-tight text-ink"), then the page's real h1 below it. */
.mast--inner .mast__name {
  font-size: var(--text-base);
  font-weight: 600;
}
.mast__title {
  font-size: var(--text-2xl);
  font-weight: 650;
  letter-spacing: -0.011em;
  line-height: 1.2;
  margin: 0.6rem 0 0;
  color: var(--ink);
}

/* ---------- the light/dark switch ----------

   Geometry, glyphs and the --theme-on driven knob are copied from
   globals.css:846-916 and ThemeToggle.tsx. Same localStorage key
   (parkos-theme), same inline before-paint script (in every page's <head>),
   same label, so this is the same control, not a lookalike. */

.theme-switch {
  --switch-h: 2.125rem;
  --switch-pad: 3px;
  --switch-knob: calc(var(--switch-h) - (var(--switch-pad) * 2) - 2px);
  --switch-travel: var(--switch-knob);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: var(--tap);
  padding: 0 0.25rem;
  background: transparent;
  border: 0;
}

.theme-switch__track {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: calc((var(--switch-knob) * 2) + (var(--switch-pad) * 2) + 2px);
  height: var(--switch-h);
  padding: var(--switch-pad);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-sunken);
  transition: background-color 150ms ease-out;
}

.theme-switch:hover .theme-switch__track {
  border-color: var(--accent);
}

.theme-switch__knob {
  position: absolute;
  top: var(--switch-pad);
  left: var(--switch-pad);
  width: var(--switch-knob);
  height: var(--switch-knob);
  border-radius: 999px;
  background: var(--accent);
  box-shadow: var(--shadow);
  transform: translateX(calc(var(--theme-on) * var(--switch-travel)));
  transition: transform 200ms cubic-bezier(0.32, 0.72, 0, 1);
}

.theme-switch:active .theme-switch__knob {
  background: var(--accent-hover);
}

.theme-switch__glyph {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  transition: color 150ms ease-out;
}
.theme-switch__glyph svg {
  width: 0.9375rem;
  height: 0.9375rem;
}
/* Whichever glyph the knob currently sits over reads in the knob's own
   contrast colour; the other stays faint on the track. */
.theme-switch[aria-checked="false"] .theme-switch__glyph[data-side="light"],
.theme-switch[aria-checked="true"] .theme-switch__glyph[data-side="dark"] {
  color: var(--accent-contrast);
}

/* ---------- photos (layout unchanged) ---------- */

.hero { margin: 0; }
.hero img {
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 42svh;
  object-fit: cover;
  background: var(--surface-sunken);
}

figure { margin: 0; }
figcaption {
  font-size: var(--text-base);
  color: var(--ink-muted);
  padding: 0.5rem var(--gutter) 0;
  max-width: 34em;
}
.hero figcaption { padding-bottom: 0; }
@media (max-width: 59.99rem) {
  /* On a phone the first screen is the name, the photo, the prices and the
     button; the hero's caption gives way so the button stays above the
     fold. The alt text remains. */
  .hero figcaption { display: none; }
}

.photo { margin: 0; }
.photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--surface-sunken);
}

/* ---------- the sign board ----------

   A sunken panel rather than the old roof-blue fill, matching Park OS's
   surface-sunken tone for a grouped block of content. Kept full-bleed (no
   side margins) because the layout itself is unchanged; a rounded card
   only reads as a card where its corners are visible, so the corner radius
   from Card.tsx is not applied here, only the colour and the border. */

.board {
  background: var(--surface-sunken);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0.75rem var(--gutter) 1.1rem;
}

.board__rows li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  min-height: var(--tap);
}
.board__rows a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  padding: 0.35rem 0;
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
}
.board__rows a:hover { background: var(--surface); }
.board__rows .lead {
  flex: 1;
  border-bottom: 2px dotted var(--border-strong);
  transform: translateY(-0.35em);
  min-width: 1.5rem;
}
/* The home page price line, matched to Park OS's own storefront list row
   (the booking system:222-236, ListRow's trailing content:
   "parkos-num text-sm font-semibold text-ink"): one uniform monospace
   line, no separate size for the word "from". */
.board__rows .price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.board__rows .price small {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-right: 0.3em;
}
.board__rows .price--ask {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-muted);
}

.board__note {
  margin: 0.25rem 0 0.85rem;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* Stay pages: a single displayed rate, sized like a heading rather than a
   list row, since there is only one number to read. */
.board__price {
  font-size: var(--text-xl);
  font-weight: 650;
  letter-spacing: -0.011em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 0.25rem;
}
.board__price small {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--ink-muted);
}

/* ---------- the one button ----------

   Resolved from the booking system's primary/lg variant.
   See DESIGN-TOKENS-FROM-PARKOS.md, "Button". No icon: Park OS's button
   carries no decorative glyph, so the chevron arrow is dropped. */

.book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: var(--tap);
  padding: 0 1.25rem;
  background: var(--accent);
  color: var(--accent-contrast);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms ease-out, transform 150ms ease-out;
}
.book:hover { background: var(--accent-hover); text-decoration: none; }
.book:active { transform: scale(0.985); }

/* The first-bookable-night line under every Book button (spec S3 item 4,
   2026-09-21). Same tokens as .board__note, shown while data-floor is
   unhidden. */
.book-note {
  margin: 0.5rem 0 0;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* ---------- body copy ---------- */

.body {
  padding: 1.75rem var(--gutter) 2.5rem;
}
.body > * + * { margin-top: 2.25rem; }

.address {
  font-style: normal;
  margin: 0 0 0.5rem;
}
.tap { display: inline-flex; align-items: center; min-height: var(--tap); }
.mast--inner .mast__name a { display: inline-flex; align-items: center; min-height: var(--tap); }

.policy dt {
  font-weight: 600;
  color: var(--ink);
  margin-top: 0.75rem;
}
.policy dd { margin: 0.1rem 0 0; max-width: 34em; color: var(--ink-muted); }

/* The Questions list on the home page (spec S3 item 2, 2026-09-21). Same
   tokens as .policy: no font size set, so it inherits the base size. */
.faq { margin: 0; }
.faq dt {
  font-weight: 600;
  color: var(--ink);
  margin-top: 1rem;
}
.faq dd { margin: 0.25rem 0 0; max-width: 34em; color: var(--ink-muted); }

.ask { max-width: 34em; }
.ask li {
  padding: 0.3rem 0 0.3rem 1rem;
  border-left: 2px solid var(--border-strong);
  margin-top: 0.4rem;
}
/* On 404.html the Book button's paragraph follows the .ask list directly and
   p carries no top margin, so the button sat flush against the list (critique
   fix round 2026-09-21, spacing only). */
.ask + p { margin-top: 1rem; }

/* ---------- footer ---------- */

.foot {
  border-top: 1px solid var(--border);
  padding: 1.5rem var(--gutter) 2.5rem;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.foot nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}
.foot nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--ink);
}
.foot__name {
  font-weight: 650;
  color: var(--ink);
  font-size: var(--text-lg);
  margin: 0.5rem 0 0.25rem;
}
.foot p { margin: 0.25rem 0 0; }
.foot .contact:empty { display: none; }

/* ---------- laptop and up: the sign rail (layout unchanged) ---------- */

@media (min-width: 60rem) {
  .page {
    grid-template-columns: var(--rail) minmax(0, 1fr);
    min-height: 100svh;
  }

  .rail {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    align-self: start;
    min-height: 100svh;
    max-height: 100svh;
    overflow: auto;
    border-right: 1px solid var(--border);
  }
  .main { display: block; min-width: 0; }

  .mast { padding: 2rem 2rem 1.25rem; }
  .mast__name { font-size: var(--text-3xl); }
  .mast__name a:hover { text-decoration: none; }
  .mast--inner .mast__name { font-size: var(--text-base); }
  .mast__title { font-size: var(--text-3xl); }

  .board { padding: 1.25rem 2rem 2rem; }

  .hero img {
    max-height: none;
    height: min(78svh, 46rem);
    aspect-ratio: auto;
  }
  .hero figcaption, figcaption { padding-left: var(--gutter); }

  .body {
    padding: 2.5rem var(--gutter) 4rem;
  }
  .body > * + * { margin-top: 2.75rem; }

  /* Photos between the sections sit off to the right, two thirds wide, so
     the text column and the pictures stagger down the page rather than
     lining up. */
  .body > .photo {
    width: min(66%, 52rem);
    margin: 3rem 0 0 auto;
  }
  .body > .photo + .photo { margin-top: 2.5rem; }
  .body > .photo figcaption { padding-left: 0; }
  .photo img { aspect-ratio: 3 / 2; }

  .foot { padding: 1.75rem var(--gutter) 3rem; }
}

@media (min-width: 80rem) {
  :root { --rail: 26rem; }
}

@media (prefers-reduced-motion: reduce) {
  .book:active { transform: none; }
  .theme-switch__knob { transition: none; }
}

/* Last on purpose (spec S3 item 1, 2026-09-21): the hidden attribute that
   site.js and the stamp script toggle must beat every earlier display rule
   on the same element at equal specificity, so this sits after the final
   media query and carries no important keyword. */
[hidden] { display: none; }

/* ============================================================================
   HOME PAGE: "Modern Lodge"
   ----------------------------------------------------------------------------
   Ported verbatim from the prototype Daniel approved on 2026-09-23,
   marketing/website-replan/examples/home-lodge-modern.html ("This is exactly
   what I want the front page to look like"). Palette, typefaces, section order
   and copy are his; nothing here is a redesign of it.

   Every rule is scoped to `.lodge`, which every page on the site now carries.
   (/privacy/, /404.html and /book/ were the last three on the old Park OS shell
   and were brought onto this one on 2026-09-23. The Park OS rules above this
   line are no longer reached by any page and are kept only as the token source.)

   LIGHT ONLY, on purpose. The home page has no dark palette, no
   prefers-color-scheme block and no theme switch: the two rules below force
   the light rendering for every viewer whatever their operating system says.
   Daniel opened this on a dark-mode Mac and got an all-green page, which is
   the bug they exist to prevent. The `html` rule matters because the base
   `html { background: var(--bg) }` above resolves dark on a dark-mode machine
   and would paint the canvas behind this page.
   ============================================================================ */

html:has(body.lodge) {
  color-scheme: light;
  background: #F7F4ED;
}


/* ---------- Undo the base stylesheet's bare-element rules, for this page only ----------
   Everything above styles bare elements site-wide (p, h1-h3, figcaption, a:hover,
   [id]) and two class names the prototype also uses (.hero, .skip). The prototype
   leaves those at the browser default, so a ported rule that happens not to
   restate a property inherits the base value and the page stops being the
   prototype. Measured, not guessed: `p { max-width: 34em }` squeezed the hero
   eyebrow from 628px to 424px and wrapped the newsletter line onto two lines,
   `h1,h2,h3 { color: var(--ink) }` painted the hero headline dark ink on the
   forest ground, and `figcaption { color; padding }` recoloured every review
   caption and added 8px under it. This block runs BEFORE the ported rules so
   they still win wherever they do state a value. ---------- */
.lodge p { margin:0; max-width:none; text-wrap:wrap; }
.lodge h1, .lodge h2, .lodge h3 { color:inherit; text-wrap:wrap; }
.lodge h2 { font-size:revert; }
.lodge a:hover { text-decoration-thickness:1px; }
.lodge [id] { scroll-margin-top:0; }
.lodge .skip { font-weight:normal; text-decoration:underline; }
.lodge figcaption { font-size:inherit; color:inherit; padding:0; max-width:none; display:block; }
.lodge .hero { margin:0; }
.lodge .hero img { width:auto; height:auto; aspect-ratio:auto; max-height:none; object-fit:fill; background:none; }

/* ---------- Tokens. Modern Lodge: deep forest ground, one warm ember accent ---------- */
body.lodge {
  --paper:#F7F4ED; --surface:#FFFDF8; --sunken:#EFEAE0;
  --border:#E0D9CA; --border-strong:#C9BFAC;
  --ink:#1A1714; --ink-muted:#6C6455; --ink-faint:#8E8677;
  --accent:#9C4A1E; --accent-hover:#7E3A14; --accent-soft:#F6E8DC; --accent-ink:#FFFFFF;
  --forest:#10231B; --forest-ink:#F1EFE6; --forest-muted:#A8BDB0;
  --forest-line:rgba(241,239,230,.18); --forest-fill:rgba(241,239,230,.06);
  --panel:#FFFDF8; --panel-ink:#1A1714; --panel-muted:#6C6455; --panel-border:#E2DACB;
  --ember:#D2803F; --ember-hover:#E09455; --ember-ink:#17110A;
  --shadow:0 1px 2px rgba(16,35,27,.06), 0 14px 30px rgba(16,35,27,.10);
  --radius-sm:8px; --radius:12px; --radius-lg:18px; --tap:48px;
  --font-display:'Fraunces','Iowan Old Style',Georgia,'Times New Roman',serif;
  --font-sans:'Schibsted Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  --wrap:1180px;
  color-scheme: light;
}

/* ---------- Base ---------- */
.lodge *, .lodge *::before, .lodge *::after { box-sizing:border-box;
}
html:has(body.lodge) { -webkit-text-size-adjust:100%;
}
body.lodge {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-sans); font-size:16px; line-height:1.55;
  font-synthesis-weight:none; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.lodge img { max-width:100%; display:block;
}
.lodge a { color:var(--accent); text-underline-offset:3px; text-decoration-thickness:1px;
}
.lodge a:hover { color:var(--accent-hover);
}
.lodge h1, .lodge h2, .lodge h3 { font-family:var(--font-display); font-weight:600; line-height:1.08; letter-spacing:-0.012em; margin:0; font-optical-sizing:auto;
}
.lodge p { margin:0;
}
.lodge :focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius-sm);
}
.lodge .wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px;
}
.lodge .skip { position:absolute; left:-9999px; top:0; z-index:100; background:var(--surface); color:var(--ink); padding:12px 18px; border-radius:var(--radius-sm);
}
.lodge .skip:focus { left:16px; top:10px;
}
.lodge .vh { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.lodge .eyebrow { font-size:.78rem; letter-spacing:.11em; text-transform:uppercase; font-weight:600;
}
.lodge .num { font-family:var(--font-mono); font-weight:600; font-variant-numeric:tabular-nums;
}
.lodge section { scroll-margin-top:80px;
}


/* ---------- Buttons ---------- */
.lodge .btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:var(--tap); padding:0 1.3rem; border-radius:var(--radius);
  font-family:var(--font-sans); font-size:1rem; font-weight:600; line-height:1;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:background-color .15s ease-out, color .15s ease-out, border-color .15s ease-out, transform .15s ease-out;
}
.lodge .btn:active { transform:scale(.985);
}
.lodge .btn-primary { background:var(--accent); color:var(--accent-ink);
}
.lodge .btn-primary:hover { background:var(--accent-hover); color:var(--accent-ink);
}
.lodge .btn-ember { background:var(--ember); color:var(--ember-ink);
}
.lodge .btn-ember:hover { background:var(--ember-hover); color:var(--ember-ink);
}
.lodge .btn-quiet { background:transparent; color:var(--ink); border-color:var(--border-strong);
}
.lodge .btn-quiet:hover { background:var(--sunken); color:var(--ink);
}
.lodge .btn-lg { min-height:58px; font-size:1.06rem; padding:0 1.7rem;
}
.lodge .btn-block { width:100%;
}


/* ---------- Header ---------- */
.lodge .site-head {
  position:fixed; inset:0 0 auto 0; z-index:50;
  background:var(--paper); border-bottom:1px solid var(--border);
  transition:transform .22s ease-out;
}
.lodge .site-head[data-hidden="true"] { transform:translateY(-100%);
}
.lodge .head-row { display:flex; align-items:center; gap:20px; height:64px;
}
.lodge .mark { font-family:var(--font-display); font-size:1.28rem; font-weight:600; letter-spacing:-0.018em; color:var(--ink); text-decoration:none; margin-right:auto; white-space:nowrap;
}
.lodge .nav { display:flex; gap:24px;
}
.lodge .nav a { color:var(--ink-muted); text-decoration:none; font-size:.93rem; font-weight:500;
}
.lodge .nav a:hover { color:var(--ink); text-decoration:underline;
}
.lodge .head-tools { display:flex; align-items:center; gap:10px;
}
.lodge .icon-btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:var(--tap); min-height:var(--tap); border-radius:var(--radius-sm);
  background:transparent; border:1px solid var(--border); color:var(--ink);
  font-family:var(--font-sans); font-size:.86rem; font-weight:600; cursor:pointer; padding:0 12px;
}
.lodge .icon-btn:hover { background:var(--sunken);
}
.lodge .menu-btn { display:none;
}
.lodge .panel-nav { display:none;
}
body.lodge { padding-top:64px;
}


/* ---------- Hero ---------- */
.lodge .hero { background:var(--forest); color:var(--forest-ink); padding:54px 0 60px;
}
.lodge .hero-grid { display:grid; grid-template-columns:7fr 5fr; gap:56px; align-items:center;
}
.lodge .hero .eyebrow { color:var(--forest-muted);
}
.lodge .hero h1 { font-size:clamp(2.1rem, 3.6vw, 3.1rem); margin:14px 0 16px; max-width:16ch;
}
.lodge .hero .lede { color:var(--forest-muted); font-size:1.09rem; max-width:52ch;
}
.lodge .picker {
  margin-top:26px; background:var(--panel); color:var(--panel-ink);
  border:1px solid var(--panel-border); border-radius:var(--radius-lg);
  padding:18px; box-shadow:var(--shadow);
}
.lodge .picker-fields { display:grid; grid-template-columns:1fr 1fr .8fr; gap:12px;
}
.lodge .field { display:flex; flex-direction:column; gap:6px; min-width:0;
}
.lodge .field label { font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--panel-muted);
}
.lodge .field input, .lodge .field select {
  min-height:var(--tap); width:100%; border-radius:var(--radius-sm);
  border:1px solid var(--panel-border); background:var(--surface); color:var(--panel-ink);
  font-family:var(--font-sans); font-size:1rem; padding:0 12px;
}
.lodge .picker .btn { margin-top:14px;
}
.lodge .hero-fine { margin-top:16px; color:var(--forest-muted); font-size:.9rem; max-width:48ch;
}
.lodge .hero-media { margin:0;
}
.lodge .shot { overflow:hidden; border-radius:var(--radius-lg); background:var(--sunken);
}
.lodge .shot img { width:100%; height:100%; object-fit:cover;
}
.lodge .hero-media .shot { aspect-ratio:4/5;
}
.lodge .hero-media .shot img { transform:scale(1.12); transform-origin:50% 42%;
}


/* ---------- Facts strip ---------- */
.lodge .facts { background:var(--sunken); border-block:1px solid var(--border);
}
.lodge .facts ul { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr);
}
.lodge .facts li { padding:18px 24px; min-height:68px; display:flex; align-items:center; font-size:.9rem; color:var(--ink-muted); border-left:1px solid var(--border);
}
.lodge .facts li:first-child { border-left:0;
}


/* ---------- Section furniture ---------- */
.lodge .band { padding:84px 0;
}
.lodge .band-sunken { background:var(--sunken);
}
.lodge .head-block { max-width:62ch; margin-bottom:34px;
}
.lodge .head-block h2 { font-size:clamp(1.85rem, 2.9vw, 2.55rem);
}
.lodge .head-block p { color:var(--ink-muted); margin-top:12px; font-size:1.03rem;
}
.lodge .rule { height:1px; background:var(--border); border:0; margin:0;
}


/* ---------- Stay carousel ---------- */
.lodge .stay-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:30px;
}
.lodge .arrows { display:flex; gap:8px;
}
.lodge .arrows[hidden] { display:none;
}
.lodge .track {
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:22px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding-bottom:6px; cursor:grab; scrollbar-width:thin;
}
.lodge .track[data-dragging="true"] { cursor:grabbing; scroll-behavior:auto;
}
.lodge .card {
  scroll-snap-align:start; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column;
}
.lodge .card .shot { aspect-ratio:3/2; border-radius:0;
}
.lodge .card .shot img { -webkit-user-drag:none; user-select:none;
}
.lodge .card-body { padding:22px 22px 24px; display:flex; flex-direction:column; gap:12px; flex:1;
}
.lodge .card h3 { font-size:1.5rem;
}
.lodge .card p { color:var(--ink-muted); font-size:.96rem;
}
.lodge .from { font-size:1rem; color:var(--ink);
}
.lodge .attrs { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px;
}
.lodge .attrs li { font-size:.78rem; color:var(--ink-muted); background:var(--sunken); border:1px solid var(--border); border-radius:999px; padding:4px 11px;
}
.lodge .band-sunken .attrs li { background:var(--surface);
}
.lodge .card .btn { margin-top:auto;
}
.lodge .tax-note { margin-top:22px; color:var(--ink-muted); font-size:.89rem; max-width:70ch;
}


/* ---------- Tiles ---------- */
.lodge .tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.lodge .tile { display:block; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); background:var(--surface); text-decoration:none; color:var(--ink);
}
.lodge .tile .shot { aspect-ratio:4/3; border-radius:0;
}
.lodge .tile .shot img { transform:scale(1.4);
}
.lodge .tile-label { padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--surface);
}
.lodge .tile-label span { font-family:var(--font-display); font-size:1.18rem; font-weight:600;
}
.lodge .tile-label em { font-style:normal; color:var(--accent); font-size:1.1rem;
}
.lodge .tile:hover .tile-label { background:var(--sunken);
}


/* ---------- Place ---------- */
.lodge .place { display:grid; grid-template-columns:1fr .78fr; gap:60px; align-items:start;
}
.lodge .place p + p { margin-top:18px;
}
.lodge .place .lede { font-size:1.06rem;
}
.lodge .place .muted { color:var(--ink-muted);
}
.lodge .mapcard { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px;
}
.lodge .mapcard svg { width:100%; height:auto; display:block;
}
.lodge .map-out { fill:var(--sunken); stroke:var(--border-strong); stroke-width:1.4; stroke-linejoin:round;
}
.lodge .map-road { stroke:var(--border-strong); stroke-width:1.1; fill:none;
}
.lodge .map-city { fill:var(--ink-faint);
}
.lodge .map-label { fill:var(--ink-muted); font-family:var(--font-sans); font-size:7px;
}
.lodge .map-here { fill:var(--accent);
}
.lodge .map-here-label { fill:var(--ink); font-family:var(--font-sans); font-size:8px; font-weight:700;
}
.lodge .map-cap { margin-top:14px; color:var(--ink-muted); font-size:.84rem;
}


/* ---------- Guides ---------- */
.lodge .guides { display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.lodge .guide { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; display:flex; flex-direction:column; gap:12px;
}
.lodge .guide h3 { font-size:1.32rem;
}
.lodge .guide p { color:var(--ink-muted); font-size:.95rem;
}
.lodge .guide a { margin-top:auto; font-weight:600; text-decoration:none;
}
.lodge .guide a:hover { text-decoration:underline;
}


/* ---------- Stories ---------- */
.lodge .stories { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;
}
.lodge .worklog { list-style:none; margin:20px 0 0; padding:0; border-top:1px solid var(--border);
}
.lodge .worklog li { display:flex; gap:16px; padding:14px 0; border-bottom:1px solid var(--border); font-size:.94rem; color:var(--ink-muted);
}
.lodge .worklog .num { color:var(--ink); min-width:6.5rem;
}
.lodge .quote-slots { display:grid; gap:18px;
}
.lodge .quote-slot { margin:0; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); padding:24px; display:flex; flex-direction:column; gap:14px;
}
.lodge .quote-slot blockquote { margin:0; font-size:.98rem; line-height:1.5; color:var(--ink);
}
.lodge .quote-slot figcaption { margin-top:auto;
}
.lodge .quote-slot small { color:var(--ink-faint); font-size:.78rem;
}


/* ---------- Email ---------- */
.lodge .signup { background:var(--sunken); border-block:1px solid var(--border); padding:56px 0;
}
.lodge .signup-in { display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center;
}
.lodge .signup h2 { font-size:1.65rem;
}
.lodge .signup p { color:var(--ink-muted); margin-top:8px; font-size:.95rem;
}
.lodge .signup form { display:flex; gap:10px;
}
.lodge .signup input {
  min-height:var(--tap); min-width:250px; border-radius:var(--radius-sm);
  border:1px solid var(--border-strong); background:var(--surface); color:var(--ink);
  font-family:var(--font-sans); font-size:1rem; padding:0 14px;
}


/* ---------- Footer ---------- */
.lodge .site-foot { background:var(--forest); color:var(--forest-ink); padding:66px 0 30px;
}
.lodge .foot-grid { display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:48px;
}
.lodge .foot-mark { font-family:var(--font-display); font-size:1.42rem; font-weight:600; letter-spacing:-0.018em;
}
.lodge .site-foot p, .lodge .site-foot li { color:var(--forest-muted); font-size:.93rem;
}
.lodge .site-foot h3 { font-family:var(--font-sans); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--forest-ink); font-weight:700; margin-bottom:14px;
}
.lodge .site-foot ul { list-style:none; margin:0; padding:0; display:grid; gap:9px;
}
.lodge .site-foot a { color:var(--forest-muted); text-decoration:none;
}
.lodge .site-foot a:hover { color:var(--forest-ink); text-decoration:underline;
}
.lodge .foot-addr { margin-top:14px; display:grid; gap:6px;
}
.lodge .foot-rule { height:1px; background:var(--forest-line); border:0; margin:44px 0 24px;
}
.lodge .legal { display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center;
}
.lodge .legal nav { display:flex; gap:20px;
}
.lodge .legal p { max-width:74ch; font-size:.85rem;
}
.lodge .foot-bottom { margin-top:22px; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center;
}
.lodge .foot-bottom p { font-size:.83rem;
}


/* ---------- Responsive ---------- */
@media (max-width:1024px) {
  .lodge .nav { display:none;
  }
  .lodge .menu-btn { display:inline-flex;
  }
  .lodge .hero-grid { gap:40px;
  }
  .lodge .place, .lodge .stories { grid-template-columns:1fr; gap:40px;
  }
  .lodge .tiles, .lodge .guides { grid-template-columns:1fr 1fr;
  }
  .lodge .foot-grid { grid-template-columns:1fr 1fr; gap:40px;
  }

}
@media (max-width:760px) {
  body.lodge { padding-top:56px;
  }
  .lodge .head-row { height:56px; gap:10px;
  }
  .lodge .mark { font-size:1.12rem;
  }
  .lodge .head-tools .btn { padding:0 1rem; font-size:.94rem;
  }
  .lodge .icon-btn { min-width:auto; padding:0 12px;
  }
  .lodge .wrap { padding-inline:20px;
  }
  .lodge .hero { padding:14px 0 12px;
  }
  .lodge .hero-grid { grid-template-columns:1fr; gap:12px;
  }
  .lodge .hero-media { display:contents;
  }
  .lodge .hero-media .shot { order:-1; aspect-ratio:16/9; max-height:19vh;
  }
  .lodge .only-wide { display:none;
  }
  .lodge .hero .eyebrow { font-size:.68rem; letter-spacing:.06em;
  }
  .lodge .hero h1 { font-size:1.72rem; margin:8px 0 9px; max-width:none;
  }
  .lodge .hero .lede { font-size:.89rem; max-width:none;
  }
  .lodge .picker { margin-top:14px; padding:13px;
  }
  .lodge .picker .btn { margin-top:11px; min-height:54px; font-size:1rem; padding:0 1rem;
  }
  .lodge .picker-fields { grid-template-columns:1fr 1fr .6fr; gap:7px;
  }
  .lodge .field label { font-size:.66rem; letter-spacing:.06em;
  }
  .lodge .field input, .lodge .field select { font-size:.82rem; padding:0 6px;
  }
  .lodge .hero-fine { margin-top:9px; font-size:.77rem;
  }
  .lodge .facts ul { grid-template-columns:1fr 1fr;
  }
  .lodge .facts li { padding:15px 18px; font-size:.85rem; border-left:1px solid var(--border); border-top:1px solid var(--border);
  }
  .lodge .facts li:nth-child(odd) { border-left:0;
  }
  .lodge .facts li:nth-child(-n+2) { border-top:0;
  }
  .lodge .band { padding:56px 0;
  }
  .lodge .stay-head { flex-direction:column; align-items:flex-start;
  }
  .lodge .track { grid-auto-columns:min(82vw,330px);
  }
  .lodge .tiles, .lodge .guides, .lodge .foot-grid { grid-template-columns:1fr;
  }
  .lodge .signup-in { grid-template-columns:1fr; gap:22px;
  }
  .lodge .signup form { flex-direction:column;
  }
  .lodge .signup input { min-width:0; width:100%;
  }
  .lodge .foot-grid { gap:34px;
  }
  .lodge .map-label { font-size:8px;
  }
  .lodge .map-here-label { font-size:9px;
  }

}
@media (prefers-reduced-motion: reduce) {
  .lodge * { animation-duration:.001ms; transition-duration:.001ms; scroll-behavior:auto;
  }
  .lodge .site-head { transition:none;
  }

}
.lodge .ownership-note {
  color:var(--ink);
  font-size:1rem;
  line-height:1.6;
  margin:0 0 18px;
  padding:12px 14px;
  background:var(--accent-soft);
  border-left:3px solid var(--accent);
  border-radius:var(--radius-sm);
}



/* ============================================================================
   STAY PAGES: /stay/, /motel/, /house/, /rv/
   ----------------------------------------------------------------------------
   Same idiom as the home page above, same tokens, same typefaces. Everything
   here is scoped to `.lodge` so it cannot reach the Park OS-styled pages that
   sit above the home page block, and nothing above this line is edited.

   Light only, like the home page. No prefers-color-scheme block, no
   [data-theme] rule, no switch. `html:has(body.lodge)` already forces the
   light canvas for every viewer.
   ============================================================================ */

/* ---------- Breadcrumb ---------- */
.lodge .crumbs { font-size:.82rem; letter-spacing:.02em; margin-bottom:18px;
}
.lodge .crumbs ol { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:0 8px;
}
.lodge .crumbs li { color:var(--forest-muted); display:flex; align-items:center; gap:8px;
}
.lodge .crumbs li + li::before { content:"/"; color:var(--forest-line); color:rgba(241,239,230,.34);
}
.lodge .crumbs a { color:var(--forest-muted); text-decoration:none;
}
.lodge .crumbs a:hover { color:var(--forest-ink); text-decoration:underline;
}
.lodge .crumbs [aria-current="page"] { color:var(--forest-ink); font-weight:600;
}

/* ---------- Stay hero: the home hero's forest band, without the picker ---------- */
.lodge .hero-stay { padding:34px 0 52px;
}
.lodge .hero-stay .hero-grid { grid-template-columns:6fr 5fr; gap:52px; align-items:center;
}
.lodge .hero-stay h1 { font-size:clamp(2.2rem, 4vw, 3.3rem); max-width:13ch;
}
.lodge .hero-stay .lede { margin-top:16px;
}
.lodge .spec-line {
  margin-top:20px; font-family:var(--font-mono); font-size:.86rem; line-height:1.7;
  color:var(--forest-ink); border-top:1px solid var(--forest-line); border-bottom:1px solid var(--forest-line);
  padding:12px 0; letter-spacing:.01em;
}
.lodge .spec-line span { white-space:nowrap;
}
.lodge .spec-line span + span::before { content:"·"; color:var(--forest-muted); padding:0 .55em;
}
.lodge .price-line { margin-top:22px; font-size:1.3rem; color:var(--forest-ink); font-family:var(--font-display); font-weight:600;
}
.lodge .price-line .num { font-family:var(--font-mono); font-size:1.5rem;
}
.lodge .price-sub { margin-top:6px; color:var(--forest-muted); font-size:.88rem; max-width:46ch;
}
.lodge .hero-actions { margin-top:22px; display:flex; flex-wrap:wrap; gap:12px;
}
.lodge .hero-stay .btn-quiet { color:var(--forest-ink); border-color:rgba(241,239,230,.34);
}
.lodge .hero-stay .btn-quiet:hover { background:rgba(241,239,230,.09); color:var(--forest-ink);
}
.lodge .hero-stay .shot { aspect-ratio:4/3;
}
.lodge .hero-stay .hero-media .shot img { transform:none; transform-origin:50% 50%;
}
.lodge .hero-fine[data-floor] { margin-top:14px;
}

/* ---------- Prose column ---------- */
.lodge .prose { max-width:64ch;
}
.lodge .prose p + p { margin-top:16px;
}
.lodge .prose p { color:var(--ink-muted); font-size:1.02rem;
}
.lodge .prose p.lead-in { color:var(--ink); font-size:1.1rem;
}

/* ---------- Two column band ---------- */
.lodge .split { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;
}
.lodge .split-wide { grid-template-columns:1.15fr 1fr;
}

/* ---------- Definition list: what is in the room ---------- */
.lodge .speclist { margin:0; display:grid; grid-template-columns:auto 1fr; gap:0; border-top:1px solid var(--border);
}
.lodge .speclist dt {
  grid-column:1; padding:13px 26px 13px 0; border-bottom:1px solid var(--border);
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--ink-faint);
  white-space:nowrap;
}
.lodge .speclist dd {
  grid-column:2; margin:0; padding:13px 0; border-bottom:1px solid var(--border);
  font-size:.97rem; color:var(--ink);
}

/* ---------- Panels ---------- */
.lodge .panel {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:28px;
}
.lodge .band-sunken .panel { background:var(--surface);
}
.lodge .panel h3 { font-size:1.28rem; margin-bottom:12px;
}
.lodge .panel p { color:var(--ink-muted); font-size:.96rem;
}
.lodge .panel p + p { margin-top:12px;
}
.lodge .panel-plain { background:transparent; border:0; padding:0;
}

/* The honest note: same ember-soft treatment as the home page ownership note */
.lodge .note {
  background:var(--accent-soft); border-left:3px solid var(--accent); border-radius:var(--radius-sm);
  padding:18px 20px; color:var(--ink); font-size:.98rem; line-height:1.6;
}
.lodge .note strong { font-weight:700;
}
.lodge .note p + p { margin-top:12px;
}
.lodge .note-quiet {
  background:var(--sunken); border-left:3px solid var(--border-strong); color:var(--ink-muted);
}
.lodge .band-sunken .note-quiet { background:var(--surface);
}

/* ---------- Plain bulleted lists ---------- */
.lodge .ticks { list-style:none; margin:0; padding:0; display:grid; gap:10px;
}
.lodge .ticks li { position:relative; padding-left:22px; font-size:.97rem; color:var(--ink);
}
.lodge .ticks li::before {
  content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px;
  border-radius:50%; background:var(--accent);
}
.lodge .ticks-quiet li::before { background:var(--border-strong);
}
.lodge .ticks-2 { grid-template-columns:1fr 1fr; gap:10px 32px;
}

/* ---------- Comparison table ---------- */
.lodge .table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface);
}
.lodge table.cmp { width:100%; border-collapse:collapse; font-size:.95rem; min-width:640px;
}
.lodge table.cmp th, .lodge table.cmp td { text-align:left; padding:15px 20px; border-bottom:1px solid var(--border); vertical-align:top;
}
.lodge table.cmp thead th {
  font-family:var(--font-display); font-size:1.08rem; font-weight:600; color:var(--ink);
  border-bottom:1px solid var(--border-strong); white-space:nowrap;
}
.lodge table.cmp tbody th {
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  color:var(--ink-faint); white-space:nowrap; width:1%;
}
.lodge table.cmp td { color:var(--ink-muted);
}
.lodge table.cmp tbody tr:last-child th, .lodge table.cmp tbody tr:last-child td { border-bottom:0;
}
.lodge table.cmp .num { color:var(--ink);
}
.lodge .table-note { margin-top:14px; color:var(--ink-muted); font-size:.87rem; max-width:72ch;
}

/* ---------- Figures ---------- */
.lodge .figure { margin:0;
}
.lodge .figure .shot { aspect-ratio:3/2;
}
.lodge .figure figcaption { margin-top:12px; color:var(--ink-faint); font-size:.85rem; max-width:60ch;
}
.lodge .figpair { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start;
}

/* ---------- Other ways to stay ---------- */
.lodge .minis { display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.lodge .mini {
  display:flex; gap:16px; align-items:center; padding:14px; text-decoration:none; color:var(--ink);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
}
.lodge .band-sunken .mini { background:var(--surface);
}
.lodge .mini:hover { border-color:var(--border-strong);
}
.lodge .mini .shot { width:92px; flex:0 0 92px; aspect-ratio:1/1; border-radius:var(--radius);
}
.lodge .mini-text { display:grid; gap:3px; min-width:0;
}
.lodge .mini-text b { font-family:var(--font-display); font-size:1.12rem; font-weight:600;
}
.lodge .mini-text span { color:var(--ink-muted); font-size:.85rem;
}

/* ---------- Mobile navigation panel, built by site.js from the header nav ---------- */
.lodge .nav-panel {
  position:fixed; inset:64px 0 auto 0; z-index:49; background:var(--paper);
  border-bottom:1px solid var(--border); box-shadow:var(--shadow); padding:10px 0 18px;
}
.lodge .nav-panel ul { list-style:none; margin:0; padding-block:0; padding-inline:24px; display:grid;
}
.lodge .nav-panel a {
  display:flex; align-items:center; min-height:var(--tap); padding:6px 0;
  color:var(--ink); text-decoration:none; font-size:1.02rem; font-weight:500;
  border-bottom:1px solid var(--border);
}
.lodge .nav-panel li:last-child a { border-bottom:0;
}
.lodge .nav-panel a:hover { color:var(--accent);
}
@media (min-width:1025px) { .lodge .nav-panel { display:none;
  }
}

/* ---------- Responsive ---------- */
@media (max-width:1024px) {
  .lodge .split, .lodge .split-wide { grid-template-columns:1fr; gap:38px;
  }
  .lodge .minis { grid-template-columns:1fr 1fr;
  }
  .lodge .hero-stay .hero-grid { grid-template-columns:1fr; gap:34px;
  }
  .lodge .hero-stay h1 { max-width:none;
  }
}
@media (max-width:760px) {
  .lodge .hero-stay { padding:20px 0 34px;
  }
  .lodge .hero-stay .hero-grid { gap:20px;
  }
  .lodge .hero-stay .hero-media { display:block;
  }
  .lodge .hero-stay .hero-media .shot { order:0; aspect-ratio:3/2; max-height:none;
  }
  .lodge .hero-stay h1 { font-size:1.85rem;
  }
  .lodge .crumbs { margin-bottom:14px; font-size:.78rem;
  }
  .lodge .spec-line { font-size:.78rem; line-height:1.9;
  }
  /* A separator that lands at the start of a wrapped line reads as a typo.
     On a phone the spec line stacks instead, one fact per row, no separators. */
  .lodge .spec-line span { display:block;
  }
  .lodge .spec-line span + span::before { content:none;
  }
  .lodge .hero-actions .btn { width:100%;
  }
  .lodge .speclist { grid-template-columns:1fr;
  }
  .lodge .speclist dt { padding:13px 0 0; border-bottom:0;
  }
  .lodge .speclist dd { grid-column:1; padding:4px 0 13px;
  }
  .lodge .ticks-2 { grid-template-columns:1fr;
  }
  .lodge .figpair, .lodge .minis { grid-template-columns:1fr;
  }
  .lodge .panel { padding:22px;
  }
  .lodge .mini .shot { width:74px; flex:0 0 74px;
  }
  .lodge .nav-panel { inset:56px 0 auto 0;
  }
  .lodge .nav-panel ul { padding-inline:20px;
  }
}

/* Two controls in one stay card: check availability, and read the page. */
/* Always stacked, at every width: side by side the pair fits in one card and
   wraps in the next, and three cards in a row with different button layouts
   reads as a rendering bug rather than a choice. */
.lodge .card-actions { margin-top:auto; display:flex; gap:10px; flex-direction:column;
}
.lodge .card-actions .btn { margin-top:0; flex:1 1 auto; min-width:0; padding:0 1rem;
}