/* =============================================================================
   Dream Valley Cabin — Leadville, Colorado

   Palette is taken from the cabin's own photographs: the pine of the spruce
   around it, the warm brown of the log walls, and the ember of the fireplace.
   Ember does one job only — booking direct — so it never competes with itself.
   ========================================================================== */

:root {
  /* Taken from the badge: navy field, gold trim, red banner. `pine` keeps its name
     because it is used in a hundred places, but it is now the badge navy. */
  --pine:        #123553;
  --pine-deep:   #081D2F;
  --pine-soft:   #E3EBF2;
  --gold:        #C29A4E;
  --gold-deep:   #9A7433;

  --bark:        #3B2C23;   /* the log walls — used for the book-direct band */

  --ember:       #B23A2F;   /* the banner red: the booking color, and nothing else */
  --ember-deep:  #8F2C23;
  --ember-soft:  #FBEDEA;

  --ink:         #1A211F;
  --slate:       #55635F;
  --mute:        #8A9793;
  --line:        #E2E8E5;
  --paper:       #FFFFFF;
  --wash:        #F5F8F6;

  --sky-1:       #BCD8F2;
  --sky-2:       #DCEBF9;
  --sky-3:       #F1F7FD;

  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --body:    "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1160px;
  --gut: clamp(1.1rem, 4vw, 3rem);
  --section-pad: clamp(3.5rem, 8vw, 6rem);
  --nav-h: 72px;

  --r: 16px;
  --r-sm: 10px;
  --sh-sm: 0 1px 2px rgba(26,33,31,.05), 0 3px 10px rgba(26,33,31,.05);
  --sh-md: 0 2px 6px rgba(26,33,31,.06), 0 16px 40px rgba(26,33,31,.09);
  --sh-lg: 0 6px 16px rgba(26,33,31,.08), 0 30px 70px rgba(18,48,42,.16);
}

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

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--slate);
  font-family: var(--body);
  font-size: clamp(1rem, .97rem + .16vw, 1.07rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.has-lb, body.nav-open { overflow: hidden; }

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

h1, h2, h3 { margin: 0; color: var(--ink); line-height: 1.12; }
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; }
h3 { font-family: var(--body); font-weight: 700; letter-spacing: -0.005em; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--pine); color: #fff; padding: .7rem 1.1rem; font-weight: 600; }
.skip-link:focus { left: .5rem; top: .5rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .74rem 1.35rem; border: 2px solid transparent; border-radius: 999px;
  font-family: var(--body); font-weight: 600; font-size: 1rem;
  text-decoration: none; cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s, color .15s, border-color .15s;
}
.btn--lg { padding: .92rem 1.8rem; font-size: 1.06rem; }
.btn--block { display: flex; width: 100%; }
.btn--primary { background: var(--ember); color: #fff; box-shadow: 0 6px 18px rgba(196,86,42,.26); }
.btn--primary:hover { background: var(--ember-deep); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(196,86,42,.34); }
.btn--primary:active { transform: translateY(0); }
.btn--outline { background: transparent; color: var(--pine); border-color: var(--line); }
.btn--outline:hover { border-color: var(--pine); background: var(--pine-soft); }
.btn--ghost { background: rgba(255,255,255,.86); color: var(--pine); border-color: rgba(30,74,61,.18); backdrop-filter: blur(6px); }
.btn--ghost:hover { background: #fff; border-color: var(--pine); transform: translateY(-2px); }
.btn[disabled] { opacity: .55; cursor: progress; transform: none; }

.linkish {
  display: inline-flex; align-items: center; gap: .35rem;
  font-weight: 600; color: var(--pine); text-decoration: none;
  border-bottom: 2px solid var(--pine-soft); padding-bottom: 2px;
  transition: border-color .2s, color .2s;
}
.linkish:hover { color: var(--ember-deep); border-bottom-color: var(--ember); }

/* ------------------------------------------------------------- sticky nav --- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.9); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s;
}
body.is-scrolled .nav { border-bottom-color: var(--line); box-shadow: var(--sh-sm); }

.nav__inner {
  max-width: var(--wrap); margin: 0 auto; min-height: var(--nav-h);
  display: flex; align-items: center; gap: clamp(.5rem, 1.8vw, 1.5rem); padding: 0 var(--gut);
}
.nav__brand { display: inline-flex; align-items: center; gap: .6rem; flex: none; text-decoration: none; }
.nav__mark { width: 40px; height: auto; flex: none; }
.nav__name { font-family: var(--display); font-size: 1.3rem; color: var(--ink); white-space: nowrap; }

.nav__menu { display: flex; align-items: center; gap: clamp(.7rem, 1.8vw, 1.6rem); margin-left: auto; }
.nav__menu a {
  position: relative; padding: .3rem 0; font-weight: 500; font-size: .97rem;
  color: var(--slate); text-decoration: none; white-space: nowrap; transition: color .2s;
}
.nav__menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--ember); transform: scaleX(0); transform-origin: left; transition: transform .22s;
}
.nav__menu a:hover { color: var(--ink); }
.nav__menu a:hover::after { transform: scaleX(1); }

.nav__cta { flex: none; padding: .58rem 1.1rem; font-size: .95rem; }

.nav__toggle {
  display: none; flex: none; width: 44px; height: 44px; padding: 0;
  border: 2px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer;
}
.nav__bars, .nav__bars::before, .nav__bars::after {
  display: block; width: 18px; height: 2px; background: var(--ink); transition: transform .24s, opacity .18s;
}
.nav__bars { position: relative; margin: 0 auto; }
.nav__bars::before, .nav__bars::after { content: ""; position: absolute; left: 0; }
.nav__bars::before { top: -6px; } .nav__bars::after { top: 6px; }
.nav__toggle[aria-expanded="true"] .nav__bars { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__bars::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* ------------------------------------------------------------------ hero ---
   DVC-Hero-v2 — the cabin at blue hour, lit from inside.

   The v1 hero drew Mount Elbert and Mount Massive as stacked SVG. This one
   shows the actual building, because the photograph proves something a drawing
   cannot: that the place is real, that it is warm, and that it is out there in
   the cold on its own. Everything is tuned to that one contrast — a cold field
   of navy and blue snow, and one pool of tungsten coming through the windows.

   Copy sits left over the darkest quarter of the frame; the lit cabin holds the
   right. Text colors are tinted out of the photograph's own blues rather than
   grayed, so the block reads as part of the picture instead of a caption on it.
   ------------------------------------------------------------------------- */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  /* minmax(0,1fr), not 1fr: a grid item's automatic minimum is its min-content
     width, which lets the copy column push past a narrow viewport */
  display: grid; align-items: center; grid-template-columns: minmax(0, 1fr);
  min-height: clamp(34rem, 86svh, 54rem);
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(3.4rem, 8vw, 5.5rem);
  /* the photograph's own darkest value: a slow connection never flashes white,
     and the copy is legible from the first paint */
  background: #061223;
}

.hero__frame { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 58% 56%;
  /* headroom for the scroll drift, so translating never exposes an edge */
  transform: scale(1.07); transform-origin: 50% 40%;
  will-change: transform;
}
.hero__snow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Two washes, doing separate jobs: the diagonal buys contrast for the copy
   without touching the lit half, the top one seats the sticky white nav. */
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(101deg, rgba(4,13,26,.93) 0%, rgba(4,13,26,.86) 22%, rgba(4,13,26,.42) 52%, rgba(4,13,26,.04) 76%, rgba(4,13,26,0) 100%),
    linear-gradient(180deg, rgba(4,13,26,.62) 0%, rgba(4,13,26,0) 26%),
    linear-gradient(0deg, rgba(4,13,26,.55) 0%, rgba(4,13,26,0) 22%);
}

.hero__inner {
  position: relative; width: 100%;
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut);
}
.hero__copy { max-width: min(36rem, 100%); }

.eyebrow {
  font-weight: 600; font-size: clamp(.74rem, .7rem + .15vw, .82rem);
  letter-spacing: .1em; text-transform: uppercase; color: var(--pine); margin: 0 0 .9rem;
}
.eyebrow--accent { color: var(--gold-deep); }

.hero__title {
  font-size: clamp(2.9rem, 1.7rem + 5.4vw, 5.4rem);
  color: var(--pine-deep); margin-bottom: 1rem;
}
.hero__lede {
  font-size: clamp(1.06rem, 1rem + .42vw, 1.28rem);
  color: #3D4E4A; max-width: 34rem; margin: 0 0 1.6rem;
}

.facts { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin: 0 0 1.9rem; padding: 0; }
.facts li { color: var(--slate); font-size: .99rem; }
.facts strong { color: var(--ink); font-weight: 700; }

.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* --- the hero's own dark register ---------------------------------------- */

.hero .eyebrow { color: #9FC2DE; }
.hero__title { color: #FFF8EE; text-shadow: 0 1px 30px rgba(4,13,26,.55); }
.hero__lede { color: #CBDCEA; }
.hero .facts li { color: #A7C0D5; }
.hero .facts strong { color: #FFF8EE; }

/* Dark glass, not light: on a narrow screen this button lands on top of a lit
   window, and a translucent white fill leaves white text at roughly 2:1 there. */
.hero .btn--ghost {
  background: rgba(6,18,34,.55); color: #F1F7FC;
  border-color: rgba(199,222,240,.42); backdrop-filter: blur(7px);
}
.hero .btn--ghost:hover {
  background: rgba(6,18,34,.72); border-color: rgba(233,243,252,.85);
  transform: translateY(-2px);
}

/* Live conditions. The blur is here for legibility over a photograph that
   changes behind it, not for decoration. */
.wx {
  display: inline-flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  margin-top: 1.8rem; padding: .5rem 1.05rem .5rem .8rem;
  background: rgba(7,20,37,.58); backdrop-filter: blur(10px);
  border: 1px solid rgba(163,197,224,.26); border-radius: 999px;
  font-size: .93rem; color: #B4CBDF;
}
.wx[hidden] { display: none; }
.wx__icon {
  width: 1.3rem; height: 1.3rem; flex: none;
  fill: none; stroke: #F0D6A4; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.wx__temp { font-weight: 700; color: #FFF8EE; font-size: 1.02rem; }
.wx__desc { color: #CBDCEA; }
.wx__where { color: #8EA8BF; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

@media (max-width: 640px) {
  /* Portrait shows about a quarter of the frame's width, so the diagonal scrim
     has no dark corner to work with. Instead: copy to the top under a heavy
     wash, and the lit porch held clear in the bottom third — on a phone that
     glow is the whole argument, and burying it costs more than the contrast
     buys. */
  .hero {
    align-items: start;
    min-height: clamp(36rem, 92svh, 50rem);
    padding-top: clamp(1.8rem, 7vw, 3rem);
  }
  .hero__photo { object-position: 47% 50%; }
  .hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(4,13,26,.93) 0%,
        rgba(4,13,26,.87) 46%,
        rgba(4,13,26,.54) 64%,
        rgba(4,13,26,.16) 80%,
        rgba(4,13,26,.48) 100%);
  }
  .wx { font-size: .88rem; }
}

/* ======================= PARKED: HERO v1 (scene) ==========================
   Styles for the illustrated parallax scene, kept alongside its markup at the
   bottom of index.html and assets/scene/*.svg. See the note there.

.scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.scene__layer {
  position: absolute; left: 50%; bottom: 0; width: 112%; height: auto;
  max-width: none;
  transform: translateX(-50%); will-change: transform;
}
.scene__snow {
  --snow-stop: 100%;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 var(--snow-stop), transparent calc(var(--snow-stop) + 6%));
  mask-image: linear-gradient(180deg, #000 0%, #000 var(--snow-stop), transparent calc(var(--snow-stop) + 6%));
  transition: -webkit-mask-image .3s linear, mask-image .3s linear;
}
.scene__ground--winter { transition: opacity .3s linear; }
.scene__fx { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene__sun {
  position: absolute; inset: 0;
  background: radial-gradient(60% 55% at 78% 26%, rgba(255,246,225,.85), rgba(255,246,225,0) 60%);
}
.scene__clouds { position: absolute; inset: 0; overflow: hidden; }
.scene__clouds img {
  position: absolute; left: 0; bottom: 0; width: 200%; max-width: none; height: auto;
  animation: drift 300s linear infinite;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.scene__haze { position: absolute; left: 0; right: 0; pointer-events: none; }
.scene__haze--far { top: 38%; height: 34%; background: linear-gradient(180deg, rgba(226,238,250,0), rgba(226,238,250,.55)); }
.scene__haze--mid { top: 46%; height: 32%; background: linear-gradient(180deg, rgba(222,235,249,0), rgba(222,235,249,.45)); }
.hero__cabin { margin: 0; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-lg); border: 4px solid rgba(255,255,255,.7); }
.hero__cabin img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
   ====================================================================== */

/* ------------------------------------------------------------ book direct --- */

/* Warm bark rather than pine — it echoes the log walls in the photos and keeps this
   band visually separate from the green used everywhere else on the page. */
.direct { background: var(--bark); color: #DCCCBE; }
.direct__inner {
  max-width: var(--wrap); margin: 0 auto; padding: clamp(2rem, 4.5vw, 3rem) var(--gut);
  display: grid; gap: clamp(1.4rem, 3vw, 2.5rem); grid-template-columns: 1fr;
}
.direct__lead h2 { color: #fff; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.3rem); margin-bottom: .4rem; }
.direct__lead p { margin: 0; color: #BFA995; }
.direct__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.direct__list li { display: flex; flex-direction: column; gap: .15rem; }
.direct__list strong { color: #fff; font-weight: 600; }
.direct__list span { font-size: .92rem; color: #B39C88; }

/* --------------------------------------------------------------- sections --- */

.section { max-width: var(--wrap); margin: 0 auto; padding: var(--section-pad) var(--gut); scroll-margin-top: var(--nav-h); }
.section--tint {
  max-width: none; padding-inline: max(var(--gut), (100% - var(--wrap)) / 2);
  background: var(--wash); border-block: 1px solid var(--line);
}
.section__head { max-width: 44rem; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.section__title { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.1rem); margin-bottom: .8rem; }
.section__lede { margin: 0; font-size: clamp(1rem, .97rem + .25vw, 1.12rem); }
.section__lede a { color: var(--pine); font-weight: 600; }

.score { font-family: var(--display); }
.score__star { color: var(--ember); }

/* ---------------------------------------------------------------- gallery --- */

.gallery { display: grid; gap: clamp(.55rem, 1.4vw, .85rem); grid-auto-rows: auto; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.shot {
  position: relative; margin: 0; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--r-sm); overflow: hidden; background: var(--wash);
  aspect-ratio: 4 / 3;
}
/* The lead photo takes a 2×2 block. Spanning columns alone left the tiles beside it
   short and opened a hole underneath. */
.shot--wide { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.shot:hover img { transform: scale(1.045); }
.shot__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem .8rem .6rem;
  background: linear-gradient(180deg, rgba(18,48,42,0), rgba(18,48,42,.82));
  color: #fff; font-size: .87rem; font-weight: 500; text-align: left;
  opacity: 0; transition: opacity .25s;
}
.shot:hover .shot__cap, .shot:focus-visible .shot__cap { opacity: 1; }

/* --------------------------------------------------------------- lightbox --- */

.lb { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; padding: clamp(.75rem, 3vw, 2rem); background: rgba(18,32,28,.94); }
.lb[hidden] { display: none; }
.lb__stage { margin: 0; display: grid; gap: .8rem; justify-items: center; min-width: 0; }
.lb__stage img { max-width: 100%; max-height: 78vh; border-radius: var(--r-sm); object-fit: contain; }
.lb__stage figcaption { color: #D6E6DE; font-size: .93rem; text-align: center; }
.lb__close { position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; font-size: 1.7rem; line-height: 1; }
.lb__close, .lb__nav {
  border: 0; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; cursor: pointer;
  width: 48px; height: 48px; font-size: 1.2rem; display: grid; place-items: center; transition: background .18s;
}
.lb__close:hover, .lb__nav:hover { background: rgba(255,255,255,.28); }

/* ------------------------------------------------------------- the cabin --- */

.cabin { display: grid; gap: clamp(1.8rem, 4vw, 3rem); grid-template-columns: 1fr; }
.cabin__copy p { margin: 0 0 1.4rem; }
.cabin__h { font-size: 1.15rem; margin-bottom: .8rem; }
.beds { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.beds li { display: flex; flex-wrap: wrap; gap: .2rem .7rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
.beds strong { color: var(--ink); font-weight: 600; }
.beds span { color: var(--mute); }

.highlights { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; align-content: start; }
.highlights li { padding: 1.25rem 1.4rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-sm); }
.highlights h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.highlights p { margin: 0; font-size: .96rem; }

/* -------------------------------------------------------------- amenities --- */

.amen { display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.amen__group h3 { font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: .7rem; }
.amen__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.amen__group li { position: relative; padding-left: 1.5rem; font-size: .96rem; color: var(--ink); }
.amen__group li::before {
  content: ""; position: absolute; left: 0; top: .38em; width: 1rem; height: 1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23123553' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* --------------------------------------------------------------- booking --- */

.booking { display: grid; gap: clamp(1.2rem, 3vw, 2rem); grid-template-columns: 1fr; align-items: start; }

.cal { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-sm); padding: clamp(1rem, 2.4vw, 1.6rem); }
.cal__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.cal__months { margin: 0; font-weight: 600; color: var(--ink); }
.cal__nav { width: 38px; height: 38px; border: 2px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); cursor: pointer; font-size: 1rem; transition: border-color .18s, background .18s; }
.cal__nav:hover:not([disabled]) { border-color: var(--pine); background: var(--pine-soft); }
.cal__nav[disabled] { opacity: .35; cursor: not-allowed; }

.cal__grids { display: grid; gap: clamp(1rem, 2.5vw, 2rem); grid-template-columns: 1fr; }
.cal__mname { margin: 0 0 .6rem; font-weight: 600; font-size: .95rem; color: var(--ink); text-align: center; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal__dow { display: grid; place-items: center; height: 26px; font-size: .74rem; font-weight: 600; color: var(--mute); }
.cal__pad { aspect-ratio: 1; }

.cal__day {
  aspect-ratio: 1; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: var(--pine-soft); color: var(--ink);
  font-family: var(--body); font-size: .88rem; font-weight: 500; cursor: pointer;
  transition: background .15s, color .15s;
}
.cal__day:hover:not([disabled]) { background: #C9E0D5; }
.cal__day.is-taken { background: transparent; color: var(--mute); cursor: not-allowed; text-decoration: line-through; }
.cal__day.is-out { background: transparent; color: #C3CDC9; cursor: not-allowed; }
.cal__day.is-start, .cal__day.is-end { background: var(--pine); color: #fff; font-weight: 700; }
.cal__day.is-mid { background: #BFDACD; border-radius: 4px; }

.cal__key { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .84rem; color: var(--mute); }
.cal__key span { display: inline-flex; align-items: center; gap: .38rem; }
.key { width: 13px; height: 13px; border-radius: 4px; display: inline-block; }
.key--open { background: var(--pine-soft); }
.key--taken { background: transparent; border: 1px solid var(--line); }
.key--sel { background: var(--pine); }
.cal__synced { margin-left: auto; }
.cal__synced.is-stale { color: var(--ember-deep); font-weight: 600; }
.cal__fail { margin: 0; padding: 2rem 1rem; text-align: center; color: var(--slate); }

.req { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-md); padding: clamp(1.2rem, 3vw, 1.9rem); }
.req__dates { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); margin-bottom: .3rem; }
.req__date { display: grid; gap: .1rem; }
.req__label { font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--mute); font-weight: 600; }
.req__date strong { font-weight: 600; color: var(--ink); }
.req__nights { grid-column: 1 / -1; margin: 0; font-size: .9rem; color: var(--ember-deep); font-weight: 600; }

.req__grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); margin: 1rem 0 1.2rem; }
.field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field > label { font-weight: 600; font-size: .9rem; color: var(--ink); }
.field .opt { font-weight: 400; color: var(--mute); }
.field input, .field select, .field textarea {
  width: 100%; padding: .68rem .85rem; font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 2px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .18s, box-shadow .18s;
}
.field textarea { resize: vertical; min-height: 5rem; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #CBD6D2; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--pine); box-shadow: 0 0 0 4px rgba(30,74,61,.1); }
.field--invalid input, .field--invalid select { border-color: #C6402A; }
.field__err { margin: .2rem 0 0; font-size: .86rem; color: #B03A22; font-weight: 500; }
.field__err:empty { display: none; }

.select-wrap { position: relative; }
.select-wrap::after {
  content: ""; position: absolute; right: 1rem; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--slate); border-bottom: 2px solid var(--slate);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 2.4rem; }

.req__fine { margin: .8rem 0 0; font-size: .84rem; color: var(--mute); text-align: center; }
.req__status { margin: 1.1rem 0 0; font-size: .97rem; }
.req__status:empty { display: none; }
.req__status.is-ok { padding: 1rem 1.1rem; border-radius: var(--r-sm); background: var(--ember-soft); border: 1px solid rgba(196,86,42,.3); color: #7A3316; }
.req__status.is-bad { color: #B03A22; font-weight: 500; }

/* ---------------------------------------------------------------- reviews --- */

.ratings { list-style: none; margin: 0 0 clamp(1.6rem, 3.5vw, 2.4rem); padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(50%, 150px), 1fr)); }
.ratings li { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line); }
.ratings span { font-size: .93rem; }
.ratings strong { font-family: var(--display); font-size: 1.35rem; color: var(--ink); }

.reviews { display: grid; gap: clamp(.9rem, 2vw, 1.3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); margin-bottom: 1.6rem; }
.review { margin: 0; padding: clamp(1.2rem, 2.6vw, 1.7rem); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-sm); display: flex; flex-direction: column; gap: .8rem; }
.review__stars { margin: 0; color: var(--ember); letter-spacing: .1em; font-size: .95rem; }
.review__dim { color: var(--line); }
.review blockquote { margin: 0; color: var(--ink); font-size: 1rem; line-height: 1.6; }
.review figcaption { margin-top: auto; display: flex; align-items: baseline; gap: .5rem; }
.review figcaption strong { font-weight: 600; color: var(--ink); }
.review figcaption span { font-size: .88rem; color: var(--mute); }

/* --------------------------------------------------------------- location --- */

.loc { display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); grid-template-columns: 1fr; }
.loc__map { display: grid; gap: .8rem; justify-items: start; }
.loc__map iframe { width: 100%; aspect-ratio: 16 / 10; border: 1px solid var(--line); border-radius: var(--r); background: var(--wash); }
.near { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; align-content: start; }
.near li { display: grid; gap: .1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.near strong { color: var(--ink); font-weight: 600; }
.near span { font-size: .93rem; color: var(--slate); }

/* ---------------------------------------------------------- things to know --- */

.know { display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.know__col h3 { font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: .7rem; }
.know__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.know__col li { position: relative; padding-left: 1.1rem; font-size: .96rem; }
.know__col li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--pine); }

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

.footer { background: var(--pine-deep); color: #A9C4B8; padding: clamp(2.2rem, 5vw, 3.2rem) 0 1.4rem; }
.footer__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.4rem;
}
.footer__name { margin: 0 0 .3rem; font-family: var(--display); font-size: 1.5rem; color: #fff; }
.footer__meta { margin: 0; font-size: .92rem; line-height: 1.6; }
.footer__fine { max-width: var(--wrap); margin: clamp(1.8rem, 4vw, 2.5rem) auto 0; padding: 1.1rem var(--gut) 0; border-top: 1px solid rgba(255,255,255,.12); font-size: .85rem; color: #7C9A8D; }

/* ------------------------------------------------------------- responsive --- */

@media (min-width: 700px) {
  .cabin { grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); }
  .loc { grid-template-columns: minmax(0, 1.4fr) minmax(240px, .6fr); }
  .direct__inner { grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); align-items: center; }
}
@media (min-width: 820px) {
  .cal__grids { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 860px) {
  .hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); }
}
@media (min-width: 940px) {
  .booking { grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); }
  .scene__layer { width: max(1600px, 118%); }
  .hero { padding-bottom: clamp(11rem, 18vw, 16rem); }
}

@media (max-width: 900px) {
  .nav__toggle { display: block; }
  .nav__menu {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch;
    gap: 0; margin: 0; padding: .4rem var(--gut) 1rem;
    background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--sh-md); display: none;
  }
  .nav__menu.is-open { display: flex; }
  .nav__menu a { padding: .85rem 0; font-size: 1.08rem; border-bottom: 1px solid var(--line); }
  .nav__menu a::after { display: none; }
  .shot--wide { grid-column: span 1; aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .nav__name { display: none; }
  .lb { grid-template-columns: 1fr; }
  .lb__nav { position: absolute; bottom: 1.2rem; }
  .lb__nav--prev { left: 25%; } .lb__nav--next { right: 25%; }
}

/* -------------------------------------------------------- reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* app.js also stops the parallax and never starts the snowfall */
  .scene__layer { transform: translateX(-50%) !important; }
  .scene__fx { display: none; }
  .shot:hover img { transform: none; }
}