/* Home v2: "Day to night" layout. Loaded after styles.css. */
:root {
  --c-morning: #f4f0e9;
  --c-day: #ebe2d4;
  --c-afternoon: #e6d2b8;
  --c-golden: #7a4a35;
  --c-show: #3a2820;
  --c-after: #1c1411;
  --c-night: #120e0c;
}
body.v2 { background: var(--c-morning); }

.chapter { position: relative; padding-block: clamp(96px, 13vw, 190px); }
.chapter::before {          /* soft blend from the previous chapter's color */
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: clamp(120px, 16vw, 240px);
  background: linear-gradient(180deg, var(--prev), var(--own)); pointer-events: none;
}
.chapter > * { position: relative; }
.chapter .wrap { position: relative; }
.ch-morning { --own: var(--c-morning); background: var(--c-morning); }
.ch-day { --prev: var(--c-morning); --own: var(--c-day); background: var(--c-day); }
.ch-afternoon { --prev: var(--c-morning); --own: var(--c-afternoon); background: var(--c-afternoon); }
.ch-show { --prev: var(--c-golden); --own: var(--c-show); background: var(--c-show); color: var(--on-dark); }
.ch-after { --prev: var(--c-show); --own: var(--c-after); background: var(--c-after); color: var(--on-dark); }
.ch-night { --prev: var(--c-after); --own: var(--c-night); background: var(--c-night); color: var(--on-dark); }
.ch-show .eyebrow, .ch-after .eyebrow, .ch-night .eyebrow { color: #f0bfa1; }
.ch-show .muted, .ch-after .muted, .ch-night .muted { color: var(--on-dark-soft); }
.ch-show .split-text p, .ch-after .split-text p { color: var(--on-dark-soft); }
.ch-show .split-text .lead, .ch-after .split-text .lead { color: var(--on-dark); }
.ch-show .btn, .ch-after .btn, .ch-night .btn { color: var(--on-dark); border-color: rgba(239,233,223,.6); }
.ch-show .btn:hover, .ch-after .btn:hover, .ch-night .btn:hover { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }
.ch-night .btn.solid, .ch-after .btn.solid { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }
.ch-night .btn.solid:hover, .ch-after .btn.solid:hover { background: transparent; color: var(--on-dark); }

.time-tag { display: inline-flex; align-items: center; gap: 12px; font: 500 12px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--clay-deep); margin-bottom: 1.6rem; }
.time-tag::before { content: ""; width: 34px; height: 1px; background: currentColor; }
.ch-show .time-tag, .ch-after .time-tag, .ch-night .time-tag, .ch-golden .time-tag { color: #f0bfa1; }

/* wide picture with caption */
.panorama { margin: clamp(48px, 7vw, 96px) 0 0; }
.panorama img { background: var(--ink-2); width: 100%; height: clamp(260px, 46vw, 620px); object-fit: cover; }
.panorama figcaption { padding: 12px 0 0; font-size: 13px; color: var(--text-soft); background: none; }

/* ---------- Stay switcher ---------- */
.switcher-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: clamp(28px, 4vw, 48px); }
.tabs { display: inline-flex; border: 1px solid var(--text); }
.tabs button { font: 500 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; background: transparent; color: var(--text); border: 0; padding: 20px 28px; cursor: pointer; transition: background .25s, color .25s; }
.tabs button + button { border-left: 1px solid var(--text); }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--bone); }
.tabs button:not([aria-selected="true"]):hover { background: rgba(20,16,14,.08); }
@media (max-width: 520px) { .tabs { display: flex; width: 100%; } .tabs button { flex: 1; padding: 18px 10px; letter-spacing: .1em; } }

.stay-panel[hidden] { display: none; }
.mosaic { display: grid; gap: 10px; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 16 / 8.2; }
.mosaic figure { margin: 0; overflow: hidden; background: var(--ink-2); }
.mosaic figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.mosaic figure:hover img { transform: scale(1.03); }
.mosaic figure:first-child { grid-row: 1 / span 2; }
@media (max-width: 700px) { .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 2fr 1fr; aspect-ratio: 4 / 3.6; } .mosaic figure:first-child { grid-row: auto; grid-column: 1 / span 2; } }

.panel-body { display: grid; gap: clamp(28px, 4vw, 64px); margin-top: clamp(28px, 4vw, 52px); }
@media (min-width: 900px) { .panel-body { grid-template-columns: 1.05fr 1fr; } }
.panel-body h3 { font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 300; }
.panel-body .tag { font: 500 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--clay-deep); margin-bottom: 14px; }
.panel-body p { color: var(--text-soft); max-width: 48ch; margin-top: 1rem; }
.checklist li { padding: 11px 0 11px 30px; border-bottom: 1px solid var(--line); position: relative; font-size: 15.5px; }
.checklist li::before { content: ""; position: absolute; left: 2px; top: 1.15em; width: 12px; height: 6px; border-left: 1.5px solid var(--clay-deep); border-bottom: 1.5px solid var(--clay-deep); transform: rotate(-45deg); }
.checklist li.no { color: var(--text-soft); }
.checklist li.no::before { border: 0; width: 12px; height: 1.5px; background: var(--text-soft); transform: none; top: 1.5em; }

.compare { width: 100%; border-collapse: collapse; margin-top: clamp(48px, 7vw, 88px); font-size: 15px; }
.compare caption { text-align: left; font: 500 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--clay-deep); padding-bottom: 18px; }
.compare th, .compare td { text-align: left; padding: 15px 14px 15px 0; border-top: 1px solid var(--line); vertical-align: top; }
.compare thead th { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; border-top: 0; }
.compare tbody th { font-weight: 500; color: var(--text-soft); width: 34%; }
@media (max-width: 640px) { .compare { font-size: 14px; } .compare tbody th { width: 30%; } }

/* ---------- Afternoon ---------- */
.stack { display: grid; gap: clamp(14px, 2vw, 28px); margin-top: clamp(40px, 6vw, 80px); }
@media (min-width: 800px) { .stack { grid-template-columns: 1.3fr 1fr; align-items: end; } }
.stack figure { margin: 0; overflow: hidden; background: var(--ink-2); }
.stack img { width: 100%; height: 100%; object-fit: cover; }
.stack .a { aspect-ratio: 3 / 2; } .stack .b { aspect-ratio: 4 / 5; }

/* ---------- Golden hour bleed ---------- */
.golden { position: relative; min-height: min(92svh, 860px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; isolation: isolate; background: var(--c-golden); }
.golden > picture { position: absolute; inset: 0; z-index: -2; }
.golden picture img { width: 100%; height: 100%; object-fit: cover; }
.golden::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--c-golden) 0%, rgba(122,74,53,.55) 22%, rgba(0,0,0,0) 55%), linear-gradient(180deg, var(--c-afternoon) 0%, rgba(230,210,184,0) 16%); }
.golden .hero-inner { padding-bottom: clamp(56px, 8vw, 110px); }
.golden h2 { font-size: clamp(2.4rem, 5.6vw, 5rem); font-weight: 300; max-width: 17ch; text-shadow: 0 1px 24px rgba(0,0,0,.35); }
.golden .ch-note { margin-top: 1.2rem; font-family: var(--serif); font-size: clamp(1.2rem, 1.9vw, 1.6rem); max-width: 36ch; text-shadow: 0 1px 18px rgba(0,0,0,.4); }
.ch-golden-wrap { background: var(--c-golden); }

/* ---------- Dusk row ---------- */
.dusk-row { display: grid; gap: 10px; margin-top: clamp(40px, 6vw, 80px); }
@media (min-width: 800px) { .dusk-row { grid-template-columns: repeat(3, 1fr); } }
.dusk-row figure { margin: 0; overflow: hidden; aspect-ratio: 4 / 5; background: var(--ink-2); }
.dusk-row img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.dusk-row figure:hover img { transform: scale(1.03); }

.night-cta { position: relative; min-height: min(90svh, 820px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.night-cta > picture { position: absolute; inset: 0; z-index: -2; }
.night-cta picture img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.night-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(18,14,12,.88) 0%, rgba(18,14,12,.4) 45%, rgba(18,14,12,.15) 70%), linear-gradient(180deg, var(--c-after) 0%, rgba(28,20,17,0) 22%); }

/* ---------- Time chip + booking bar ---------- */
.time-chip { position: fixed; left: var(--gutter); bottom: 88px; z-index: 60; display: flex; align-items: center; gap: 10px; font: 500 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: #fff; background: rgba(20,16,14,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 11px 14px; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; pointer-events: none; }
.time-chip.show { opacity: 1; transform: none; }
.time-chip i { width: 8px; height: 8px; border-radius: 50%; background: #f0bfa1; display: block; }
@media (max-width: 760px) { .time-chip { display: none; } }

.book-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: rgba(20,16,14,.95); color: #fff; display: flex; justify-content: center; gap: 10px 18px; padding: 12px var(--gutter); transform: translateY(110%); transition: transform .45s var(--ease); align-items: center; flex-wrap: wrap; border-top: 1px solid var(--line-dark); }
.book-bar.show { transform: none; }
.book-bar span { font: 500 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--on-dark-soft); margin-right: 6px; }
.book-bar a { font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: #fff; border: 1px solid rgba(255,255,255,.6); padding: 14px 18px; transition: background .25s, color .25s; }
.book-bar a:hover { background: #fff; color: var(--ink); }
.book-bar a.pri { background: #fff; color: var(--ink); }
.book-bar a.pri:hover { background: transparent; color: #fff; }
@media (max-width: 760px) { .book-bar span { display: none; } .book-bar { gap: 8px; padding: 10px 12px; } .book-bar a { flex: 1; text-align: center; padding: 13px 8px; letter-spacing: .08em; font-size: 11px; } }
body.v2 .site-footer { padding-bottom: 96px; }

.ch-show .stat .num, .ch-after .stat .num { color: var(--on-dark); }
.ch-show .stat .lbl, .ch-after .stat .lbl { color: var(--on-dark-soft); }
.ch-show .stat { border-color: var(--line-dark); }
.ch-show .text-link, .ch-after .text-link { color: var(--on-dark); }

/* Hot tub feature */
.hottub { margin-top: clamp(64px, 9vw, 120px); }
.hottub h3 { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 300; }
.hottub .split-text p:not(.time-tag) { margin-top: 1rem; color: var(--text-soft); max-width: 44ch; }
.stack .a img { object-position: center 60%; }

/* Slim entry line under the hero */
.quick { background: var(--c-morning); border-bottom: 1px solid var(--line); }
.quick a { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; align-items: center; padding: 18px 0; text-decoration: none; color: var(--text); font: 500 12px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.quick a span:first-child { color: var(--text-soft); }
.quick a:hover { color: var(--clay-deep); }

/* Stay switcher, now near the bottom on the dark background */
.ch-choose { --prev: var(--c-after); --own: var(--c-after); background: var(--c-after); color: var(--on-dark);
  --text: var(--on-dark); --text-soft: var(--on-dark-soft); --line: var(--line-dark); --clay-deep: #f0bfa1; }
.ch-choose .display, .ch-choose h3 { color: var(--on-dark); }
.ch-choose .tabs { border-color: rgba(239,233,223,.6); }
.ch-choose .tabs button { color: var(--on-dark); }
.ch-choose .tabs button + button { border-left-color: rgba(239,233,223,.6); }
.ch-choose .tabs button[aria-selected="true"] { background: var(--on-dark); color: var(--ink); }
.ch-choose .tabs button:not([aria-selected="true"]):hover { background: rgba(255,255,255,.1); }
.ch-choose .btn { color: var(--on-dark); border-color: rgba(239,233,223,.6); }
.ch-choose .btn.solid { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }
.ch-choose .btn:hover { background: var(--on-dark); color: var(--ink); }
.ch-choose .btn.solid:hover { background: transparent; color: var(--on-dark); }
.ch-choose .text-link { color: var(--on-dark); }
.ch-choose .compare th, .ch-choose .compare td { border-top-color: var(--line-dark); }

/* polish after reorder */
.stack { align-items: center; }
.panel-body .tag { line-height: 1.7; }
.ch-choose { padding-bottom: clamp(64px, 8vw, 110px); }
.golden .hero-inner { padding-bottom: clamp(90px, 12vw, 170px); }
.night-cta .hero-inner { padding-top: clamp(140px, 18vw, 240px); }
.night-cta h2 { max-width: 20ch !important; }

/* keep the headline over the hillside, clear of the house */
.golden { min-height: min(105svh, 1000px); }
.golden .hero-inner { padding-bottom: clamp(240px, 33vw, 480px); }
.golden::after { background: linear-gradient(0deg, var(--c-golden) 0%, rgba(122,74,53,.45) 18%, rgba(0,0,0,0) 50%), linear-gradient(180deg, var(--c-afternoon) 0%, rgba(230,210,184,0) 14%), linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(20,14,12,.35) 62%, rgba(0,0,0,0) 80%); }
@media (max-width: 700px) { .golden { min-height: 100svh; } .golden .hero-inner { padding-bottom: 470px; } .golden picture img { object-position: 55% 100%; } }

/* this photo has an open field below the house: set the headline there */
.golden .hero-inner { padding-bottom: clamp(70px, 9vw, 130px); }
@media (max-width: 700px) { .golden { min-height: 92svh; } .golden .hero-inner { padding-bottom: 90px; } .golden picture img { object-position: 40% 100%; } }
@media (min-width: 701px) { .golden .hero-inner { padding-bottom: clamp(50px, 6vw, 90px); } }

/* wide overview photo: headline sits mid-frame on the hillside, above the house */
.golden { align-items: center; }
.golden .hero-inner, .golden .hero-inner { padding-bottom: 0 !important; margin-top: -14%; }
@media (max-width: 700px) { .golden { min-height: 96svh; } .golden .hero-inner { margin-top: -30%; } .golden picture img { object-position: 50% 50%; } }

.dusk-row .pos-r img { object-position: 74% 50%; }

/* closing section: tall enough to show the sky, text down in the field */
.night-cta { min-height: clamp(700px, 66vw, 960px); }
.night-cta picture img { object-position: center 12%; }
.night-cta .hero-inner { padding-top: 0 !important; }
.night-cta::after { background: linear-gradient(0deg, rgba(18,14,12,.9) 0%, rgba(18,14,12,.55) 38%, rgba(18,14,12,0) 62%), linear-gradient(180deg, var(--c-after) 0%, rgba(28,20,17,0) 12%); }
@media (max-width: 700px) { .night-cta { min-height: 760px; } .night-cta picture img { object-position: 30% 20%; } }
.night-cta { min-height: clamp(780px, 80vw, 1120px); }
.night-cta h2 { font-size: clamp(2.4rem, 5vw, 4.4rem) !important; }
@media (max-width: 700px) { .night-cta { min-height: 880px; } .night-cta picture img { object-position: 28% 10%; } }
@media (max-width: 700px) { .night-cta { min-height: 980px; } .night-cta picture img { object-position: 30% 0%; } }
.panorama img { object-position: center 88%; }
.direct-note { margin: 1.1rem 0 0; font-size: .95rem; color: rgba(255,255,255,.85); max-width: 46ch; }
.direct-note a { color: inherit; text-underline-offset: 3px; }
/* Hidden-inside photo: show the whole frame so all the rock formations are visible */
.panorama { max-width: min(1080px, 100%); margin-left: auto; margin-right: auto; }
.panorama img { height: auto; aspect-ratio: 4 / 3; object-position: center; }

/* Legibility over the dusk photo in the closing section */
.night-cta .time-tag { color: #fff; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.8), 0 0 18px rgba(0,0,0,.6); }
.night-cta h2, .night-cta .hero-sub, .night-cta .direct-note { text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 0 24px rgba(0,0,0,.55); }
.night-cta .direct-note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.night-cta .hero-inner::before { content: ""; position: absolute; inset: -160px 0 0 0; z-index: -1; background: linear-gradient(90deg, rgba(10,8,8,.62) 0%, rgba(10,8,8,.38) 45%, rgba(10,8,8,0) 75%); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 45%); mask-image: linear-gradient(to bottom, transparent 0, #000 45%); pointer-events: none; }
@media (max-width: 760px) { .book-bar a.plan { display: none; } }

/* Big numbers: a sans face so "1" never reads as a capital I */
.stat .num { font-family: var(--sans); font-weight: 300; letter-spacing: -.01em; font-variant-numeric: lining-nums; font-size: clamp(2.1rem, 3.6vw, 3.2rem); white-space: nowrap; }

/* Music section on phones: three short wide photos instead of three tall ones */
@media (max-width: 799px) { .dusk-row figure { aspect-ratio: 16 / 10; } }