/* ══════════════════════════════════════════════════════════════════════════
   The Old Monk, Dandeli
   Palette drawn from the property's own crest: a monk's deep maroon robe under
   a banyan tree, dark ink linework, forest green, warm lantern-gold, on a
   parchment ground. --brass/--brass-deep now carry that maroon (still "the one
   accent that acts" — buttons, links); --gold/--gold-pale are the lantern-light
   accent, used sparingly for stars and text on the dark hero.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --river:      #1C1411;   /* deep ink under the banyan — the anchor */
  --river-2:    #2B1F18;
  --river-3:    #3C2B20;
  --mist:       #F2ECDE;   /* page ground, warm parchment */
  --paper:      #FAF7F0;
  --brass:      #6B2A28;   /* the monk's robe */
  --brass-deep: #4E1E1C;
  --laterite:   #8A3B1F;   /* red earth — scarcity only, never decoration */
  --gold:       #C6903D;   /* lantern light — stars, small accents */
  --gold-pale:  #E4C99A;   /* lantern light, for text on the dark hero */
  --ink:        #1E1712;
  --ink-soft:   #6B5F51;
  --ink-faint:  #9C8F7E;
  --line:       #E0D6C4;
  --line-soft:  #ECE4D3;
  --forest:     #16352B;   /* the hero's green, deepened — the page's second ground */
  --linen:      #EDE4D2;   /* a half-step off --mist, so two light bands can sit adjacent */

  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(20,32,28,.06), 0 8px 24px rgba(20,32,28,.07);
  --shadow-lift: 0 2px 6px rgba(20,32,28,.08), 0 18px 48px rgba(20,32,28,.14);
  --wrap: 1180px;
  --ease: cubic-bezier(.2,.7,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--mist);
  color: var(--ink);
  font-family: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: 'tnum' 0;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  border-radius: 3px;
}

h1, h2, h3 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; margin: 0; }
h1 { font-size: clamp(2.9rem, 7vw, 5.4rem); line-height: .94; letter-spacing: -.025em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.08; letter-spacing: -.015em; }
h3 { font-size: 1.3rem; line-height: 1.25; }
p  { margin: 0 0 1rem; max-width: 68ch; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.price { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ─── Header ──────────────────────────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(242,236,222,.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.site-head.is-stuck { border-bottom-color: var(--line); }
.site-head .wrap { display: flex; align-items: center; gap: 24px; height: 72px; }

.mark { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.mark-crest { width: 30px; height: 30px; object-fit: contain; flex: none; }
.mark b {
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  font-size: 1.5rem; letter-spacing: -.01em; line-height: 1;
}
.mark span { font-size: .72rem; color: var(--ink-soft); letter-spacing: .06em; }

.nav { display: flex; gap: 28px; }
.nav a { text-decoration: none; font-size: .94rem; color: var(--ink-soft); transition: color .2s; }
.nav a:hover { color: var(--ink); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--r-pill);
  font-weight: 500; font-size: .95rem; text-decoration: none;
  transition: background .2s var(--ease), transform .12s var(--ease), box-shadow .2s;
}
.btn-primary { background: var(--brass); color: #fff; }
.btn-primary:hover { background: var(--brass-deep); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { background: var(--ink-faint); cursor: not-allowed; }
.btn-dark { background: var(--river); color: var(--paper); }
.btn-dark:hover { background: var(--river-2); }
.btn-ghost { border: 1px solid var(--line); background: var(--paper); }
.btn-ghost:hover { border-color: var(--ink-faint); }
.btn-sm { padding: 9px 16px; font-size: .88rem; }

/* ─── Hero: a real river, on video ────────────────────────────────────────── */
.hero { position: relative; background: #1F4A3C; color: var(--paper); overflow: hidden; }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #1F4A3C; }
/* On a portrait screen the hero box is much taller than wide (stacked text + padding),
   but the clip is a fixed landscape 16:9 — cover would zoom into a tiny sliver of it
   and look blurry. Show the whole frame instead, letterboxed, on any portrait viewport
   (phone or tablet), regardless of its exact width. */
@media (max-aspect-ratio: 1/1) {
  .hero-art { object-fit: contain; }
}
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10,16,8,.62) 0%, rgba(10,16,8,.38) 36%, rgba(10,16,8,0) 64%);
}
.hero .wrap { position: relative; padding-block: clamp(72px, 12vw, 132px) 150px; }
.hero-grid { display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.hero-copy { flex: 1; min-width: 0; }
.hero-badge-halo {
  flex: none; width: clamp(230px, 25vw, 360px); aspect-ratio: 1;
  display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle, rgba(228,201,154,.3) 0%, rgba(228,201,154,.1) 55%, transparent 75%);
}
.hero-badge { width: 84%; filter: drop-shadow(0 4px 16px rgba(0,0,0,.4)); }

.hero h1 { max-width: 14ch; }
.hero h1 em { font-style: italic; color: var(--gold-pale); }
.hero-sub {
  margin-top: 22px; max-width: 46ch; font-size: 1.06rem;
  color: rgba(247,249,245,.78);
}
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 28px;
  font-size: .9rem; color: rgba(247,249,245,.7);
}
.hero-meta i { font-style: normal; color: var(--gold-pale); }

/* Mobile-only brand line (inside the hero) and tagline (below it) — the
   desktop header and in-hero tagline cover the same ground up there. */
.hero-brand-mobile, .hero-tagline-mobile { display: none; }

/* ─── First-paint entrance ────────────────────────────────────────────────── */
/* Pure CSS, so it plays once as the page paints and never again on scroll — no
   JS, no flash of a half-built hero. The reduced-motion block at the bottom of
   this file collapses every duration to ~0, which with `both` fill lands each
   element straight on its final state. */
@keyframes om-rise  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes om-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes om-crest { from { opacity: 0; transform: translateY(-50%) scale(.84); }
                      to   { opacity: 1; transform: translateY(-50%) scale(1); } }
@keyframes om-rule  { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes om-pop   { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

.site-head       { animation: om-fade  .7s ease both; }
.hero-art        { animation: om-fade 1.4s ease both; }
.hero h1         { animation: om-rise .85s var(--ease) .08s both; }
.hero-sub        { animation: om-rise .85s var(--ease) .20s both; }
.hero-meta       { animation: om-rise .85s var(--ease) .32s both; }
.hero-badge-halo { animation: om-pop  1.1s var(--ease) .22s both; }
.search-shell    { animation: om-rise  .9s var(--ease) .42s both; }

/* ─── Search card — the hero's working centrepiece ────────────────────────── */
.search-shell { position: relative; z-index: 20; margin-top: -86px; }
.search {
  background: var(--paper); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  display: grid; grid-template-columns: 1.2fr 1.2fr 1fr auto;
  align-items: stretch; padding: 8px; gap: 2px;
}
.field { position: relative; padding: 12px 18px; border-radius: var(--r-md); text-align: left; width: 100%; }
.field + .field::before {
  content: ''; position: absolute; left: 0; top: 18%; height: 64%; width: 1px; background: var(--line-soft);
}
.field:hover { background: var(--mist); }
.field:hover::before, .field:hover + .field::before { opacity: 0; }
.field.is-open { background: var(--mist); }
.field label { display: block; font-size: .74rem; color: var(--ink-soft); margin-bottom: 2px; }
.field .val { font-size: 1rem; font-weight: 500; }
.field .val.empty { color: var(--ink-faint); font-weight: 400; }
.search .btn { border-radius: var(--r-md); padding-inline: 32px; }

/* ─── The calendar: real prices in every cell ─────────────────────────────── */
.pop {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 70;
  background: var(--paper); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift); padding: 22px;
}
.pop[hidden] { display: none; }
.cal-pop { width: min(680px, calc(100vw - 32px)); }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-head strong { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 1.15rem; }
.cal-nav { display: flex; gap: 6px; }
.cal-nav button {
  width: 34px; height: 34px; border-radius: var(--r-pill); border: 1px solid var(--line);
  display: grid; place-items: center; transition: background .15s;
}
.cal-nav button:hover:not(:disabled) { background: var(--mist); }
.cal-nav button:disabled { opacity: .3; cursor: not-allowed; }
.cal-months { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.cal-month > div:first-child { text-align: center; font-weight: 500; margin-bottom: 8px; font-size: .95rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow { font-size: .68rem; color: var(--ink-faint); text-align: center; padding-bottom: 4px; }
.cal-day {
  aspect-ratio: 1 / .92; border-radius: var(--r-sm); display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font-size: .9rem; line-height: 1; transition: background .12s;
}
.cal-day .rate { font-size: .6rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.cal-day:disabled { color: var(--ink-faint); opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.cal-day:disabled .rate { display: none; }
.cal-day:not(:disabled):hover { background: var(--mist); }
.cal-day.in-range { background: #EFE6D4; border-radius: 0; }
.cal-day.edge { background: var(--river); color: var(--paper); }
.cal-day.edge .rate { color: rgba(247,249,245,.7); }
.cal-day.edge.start { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.cal-day.edge.end { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.cal-day.edge.only { border-radius: var(--r-sm); }
.cal-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft);
  font-size: .86rem; color: var(--ink-soft);
}

/* Guest stepper */
.guest-pop { width: 300px; right: 0; left: auto; }
.step-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
.step-row + .step-row { border-top: 1px solid var(--line-soft); }
.step-row small { display: block; color: var(--ink-soft); font-size: .8rem; }
.stepper { display: flex; align-items: center; gap: 14px; }
.stepper button {
  width: 32px; height: 32px; border-radius: var(--r-pill); border: 1px solid var(--line);
  font-size: 1.1rem; display: grid; place-items: center;
}
.stepper button:disabled { opacity: .35; cursor: not-allowed; }
.stepper span { min-width: 18px; text-align: center; font-variant-numeric: tabular-nums; }

/* ─── Sections, bands and surface materials ───────────────────────────────── */
/* Below the hero the page alternates grounds — parchment, forest, parchment,
   ink, parchment, linen, ink — so it never reads as one flat colour for two
   thousand pixels. Cards carry three materials and the difference MEANS
   something; keep new surfaces inside these three rather than inventing a
   fourth:
     elevated paper  → you can book it     (room cards)
     hairline paper  → reference matter    (facts, the house note)
     glass + gold    → anything on a dark band
   Open, card-less content on the bare ground is the fourth state, and it is
   what stops a band turning into a wall of boxes. */
section { padding-block: clamp(52px, 7vw, 88px); position: relative; }

.sec-head { margin-bottom: 36px; }
.sec-head h2 { margin-top: 8px; }
.sec-head p { color: var(--ink-soft); margin-top: 12px; max-width: 58ch; }

/* Letterspaced caps behind a short rule — the hairline motif from the mobile
   brand mark, reused as the page's section signature. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .72rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brass-deep);
}
.eyebrow::before { content: ''; width: 24px; height: 1px; background: currentColor; opacity: .55; }
.eyebrow-light { color: var(--gold-pale); margin-bottom: 0; }

/* Flat parchment looks like a screen; a trace of grain makes it paper. One
   tiled SVG, no asset, ~4% — invisible as texture, obvious by its absence. */
.grain > .wrap { position: relative; z-index: 1; }
.grain::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .042;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* The forest band — the hero's green brought back down the page so the green
   reads as the property's colour rather than a one-off behind the video. */
.band-forest {
  background:
    radial-gradient(1100px 520px at 10% -15%, rgba(228,201,154,.10), transparent 62%),
    radial-gradient(900px 460px at 95% 115%, rgba(31,74,60,.85), transparent 60%),
    var(--forest);
  color: rgba(236,243,234,.76);
}
.band-forest h2, .band-forest h3 { color: #F4F0E4; }
.band-forest .grain::after, .band-forest::after { opacity: .05; }

/* Scroll reveal. site.js adds .rv itself, so with JS off nothing is ever
   hidden — the page just arrives all at once. */
.rv > .wrap > * {
  opacity: 0; transform: translateY(22px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.rv > .wrap > *:nth-child(2) { transition-delay: .09s; }
.rv > .wrap > *:nth-child(3) { transition-delay: .18s; }
.rv > .wrap > *:nth-child(4) { transition-delay: .27s; }
.rv.in > .wrap > * { opacity: 1; transform: none; }

/* ─── Room cards: Booking.com row on desktop, stacked on mobile ───────────── */
.rooms { display: grid; gap: 18px; }
.room {
  display: grid; grid-template-columns: 300px 1fr 230px;
  background: var(--paper); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-card);
}
.room.sold { opacity: .72; }
.room-photo { position: relative; background: var(--mist); min-height: 232px; }
.room-photo img { width: 100%; height: 100%; object-fit: cover; }
.room-photo .count {
  position: absolute; bottom: 10px; left: 10px; background: rgba(28,20,17,.72);
  color: var(--paper); font-size: .74rem; padding: 4px 10px; border-radius: var(--r-pill);
}
.room-body { padding: 24px; }
.room-body h3 a { text-decoration: none; }
.room-body h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.room-spec { color: var(--ink-soft); font-size: .88rem; margin: 6px 0 14px; }
.room-desc { font-size: .93rem; color: var(--ink-soft); margin-bottom: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .85rem; font-weight: 500; padding: 6px 15px 6px 7px; border-radius: var(--r-pill);
  background: var(--paper); color: var(--ink); border: 1px solid var(--line-soft);
  box-shadow: 0 1px 2px rgba(20,16,12,.05), 0 4px 10px rgba(20,16,12,.05);
}
.chip-icon {
  width: 25px; height: 25px; border-radius: var(--r-pill); flex: none;
  display: grid; place-items: center;
  background: linear-gradient(150deg, #F4E6C9, #EAD2A0);
}
.chip svg { width: 14px; height: 14px; color: var(--brass-deep); }
.room-buy {
  padding: 24px; border-left: 1px solid var(--line-soft);
  display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; text-align: right;
}
.room-price b { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 1.85rem; line-height: 1; }
.room-price small { display: block; color: var(--ink-soft); font-size: .8rem; margin-top: 4px; }
.room-total { font-size: .86rem; color: var(--ink-soft); margin-top: 8px; }
.left-note { color: var(--laterite); font-size: .82rem; font-weight: 500; }
.sold-note { color: var(--ink-soft); font-size: .86rem; }

/* ─── Photo mosaic ────────────────────────────────────────────────────────── */
.mosaic {
  display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 10px; border-radius: var(--r-lg); overflow: hidden;
  height: min(520px, 62vw); margin-top: 52px;
}
.mosaic > * { background: var(--mist); position: relative; overflow: hidden; }
.mosaic > *:first-child { grid-row: span 2; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.mosaic > [data-lb]:hover img { transform: scale(1.045); }
/* On the dark band the grid needs an edge, or the photos bleed into the green. */
.band-forest .mosaic { box-shadow: 0 0 0 1px rgba(228,201,154,.22), 0 34px 70px -34px rgba(0,0,0,.65); }
.mosaic-more {
  position: absolute; right: 16px; bottom: 16px; background: var(--paper);
  padding: 10px 18px; border-radius: var(--r-pill); font-size: .88rem; font-weight: 500;
  box-shadow: var(--shadow-card);
}

/* Branded placeholder while the client's photos are pending */
.ph { position: absolute; inset: 0; display: grid; place-items: center; background: var(--mist); }
.ph svg { width: 100%; height: 100%; }
.ph span {
  position: absolute; bottom: 14px; font-size: .72rem; letter-spacing: .04em;
  color: rgba(250,247,240,.9); font-family: 'Inter Tight', sans-serif;
  background: rgba(28,20,17,.42); padding: 4px 12px; border-radius: var(--r-pill);
  backdrop-filter: blur(3px);
}

/* ─── The place: the story, on the forest band ────────────────────────────── */
/* Copy left, the pet badge holding the right — the two are different weights
   on purpose, so the row isn't two matching columns. */
.place-lead { display: grid; grid-template-columns: 1.15fr .85fr; gap: 54px; align-items: start; }
.place-lead p {
  margin: 0; font-size: 1.1rem; line-height: 1.72; max-width: 52ch;
  color: rgba(236,243,234,.82);
}
/* A drop cap: one place on the page where the type does something of its own. */
.place-lead p::first-letter {
  float: left; font-family: 'Instrument Serif', Georgia, serif;
  font-size: 3.2em; line-height: .78; margin: .04em .08em 0 0;
  color: var(--gold-pale);
}

/* Pet-friendly is a selling point here, not a line in the rules list. */
.pet-badge {
  display: flex; gap: 15px; align-items: flex-start;
  background: linear-gradient(150deg, rgba(228,201,154,.14), rgba(228,201,154,.035));
  border: 1px solid rgba(228,201,154,.3);
  border-radius: var(--r-lg); padding: 20px 22px;
}
.pet-badge-icon {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(150deg, #F4E6C9, #E2C089);
}
.pet-badge-icon svg { width: 22px; height: 22px; color: var(--brass-deep); }
.pet-badge b { display: block; font-size: 1rem; color: #F4F0E4; }
.pet-badge span { display: block; font-size: .89rem; color: rgba(236,243,234,.68); margin-top: 3px; }

/* Four highlights, ruled rather than boxed, and left-aligned — the cards above
   are centred, so this row reads as a different kind of thing. */
.place-glance {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin: 58px 0 0; padding: 0;
  background: none; box-shadow: none; border-radius: 0;
  border-top: 1px solid rgba(228,201,154,.2);
}
.place-glance > div {
  padding: 32px 26px 0 28px; text-align: left;
  border-left: 1px solid rgba(228,201,154,.14);
}
.place-glance > div:first-child { border-left: none; padding-left: 0; }
.glance-icon {
  display: grid; place-items: center; width: 42px; height: 42px; margin: 0 0 16px;
  border-radius: 50%; border: 1px solid rgba(228,201,154,.32);
  background: linear-gradient(150deg, rgba(228,201,154,.2), rgba(198,144,61,.08));
}
.glance-icon svg { width: 20px; height: 20px; color: var(--gold-pale); }
.place-glance dt {
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  font-size: 1.18rem; color: #F4F0E4; margin: 0 0 7px;
}
.place-glance dd { margin: 0; font-size: .88rem; color: rgba(236,243,234,.64); line-height: 1.6; }

/* ─── What's here: amenities (open) beside the facts (card) ───────────────── */
/* Two columns of the SAME material is what made this page monotonous. The
   amenity list sits open on the ground and is ruled; only the facts are a
   card. Don't "tidy" them into matching panels. */
.two-col { display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: start; }
.amenities-block h3, .facts-panel h3, .house-note h3 { font-size: 1.24rem; }

.amenities-block { background: none; box-shadow: none; padding: 0; }
.amenities-block .chips {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 34px; margin-top: 10px;
}
.amenities-block .chip {
  background: none; border: none; box-shadow: none; border-radius: 0;
  justify-content: flex-start; gap: 14px; font-size: .97rem; font-weight: 400;
  padding: 15px 0; border-top: 1px solid var(--line);
}
/* Two columns fill row-wise, so items 1 and 2 are the top row — the only two
   that must not carry a rule. Holds for any number of amenities. */
.amenities-block .chip:nth-child(-n+2) { border-top: none; }
.amenities-block .chip-icon { width: 36px; height: 36px; }
.amenities-block .chip svg { width: 17px; height: 17px; }

.facts-panel {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: none; padding: 26px 30px 14px;
}
.facts { list-style: none; padding: 0; margin: 10px 0 0; }
.facts li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 13px 0; border-bottom: 1px solid var(--line-soft); font-size: .93rem;
}
.facts li:last-child { border-bottom: none; }
.facts li span:first-child { color: var(--ink-soft); }
.facts li span:last-child { font-weight: 500; text-align: right; }

/* ─── House & grounds: an editorial note, not a half-empty card ───────────── */
.house-note {
  position: relative; overflow: hidden; margin-top: 52px;
  background: linear-gradient(118deg, var(--paper) 0%, #F7F0E1 56%, #F1E6D1 100%);
  border: 1px solid var(--line); border-left: 3px solid var(--brass);
  border-radius: var(--r-lg); padding: 34px 40px;
}
.house-note::before {
  content: ''; position: absolute; right: -34px; top: 50%; transform: translateY(-50%);
  width: 250px; height: 250px; opacity: .07; pointer-events: none;
  background: url('/images/logo-mark.png') center/contain no-repeat;
}
.house-note h3 { margin-bottom: 10px; }
.house-note p {
  position: relative; margin: 0; max-width: 60ch;
  font-family: 'Instrument Serif', Georgia, serif; font-size: 1.22rem;
  line-height: 1.6; color: var(--ink);
}

/* ─── Experiences ─────────────────────────────────────────────────────────── */
/* This one runs on the ink ground — the deepest band on the page, and the
   region's activities are the part worth shouting about. */
.section-dark {
  background:
    radial-gradient(900px 400px at 15% 0%, rgba(198,144,61,.14), transparent 60%),
    radial-gradient(700px 360px at 85% 100%, rgba(107,42,40,.3), transparent 60%),
    var(--river);
  color: rgba(250,247,240,.72);
}
.section-dark h2 { color: var(--paper); }
.section-dark .sec-head p { color: rgba(250,247,240,.6); }

.doing { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; counter-reset: doing; }
.doing article {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  background: linear-gradient(168deg, rgba(250,247,240,.085), rgba(250,247,240,.025));
  border: 1px solid rgba(228,201,154,.18);
  border-radius: var(--r-lg); padding: 26px 24px 24px;
  transition: transform .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease);
}
/* A serif numeral in the corner — ornament that costs no markup. */
.doing article::before {
  counter-increment: doing; content: counter(doing, decimal-leading-zero);
  position: absolute; top: 18px; right: 22px;
  font-family: 'Instrument Serif', Georgia, serif; font-size: 1.45rem;
  color: rgba(228,201,154,.3);
}
.doing article:hover {
  transform: translateY(-6px);
  background: linear-gradient(168deg, rgba(250,247,240,.13), rgba(250,247,240,.05));
  border-color: rgba(228,201,154,.42);
}
.doing-icon {
  display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 18px;
  border-radius: 50%; border: 1px solid rgba(228,201,154,.3);
  background: linear-gradient(150deg, rgba(228,201,154,.22), rgba(198,144,61,.12));
}
.doing-icon svg { width: 22px; height: 22px; color: var(--gold-pale); }
.doing h3 { font-size: 1.18rem; margin-bottom: 9px; color: var(--paper); }
.doing p { font-size: .9rem; color: rgba(250,247,240,.68); margin: 0 0 16px; }
.doing .season {
  display: inline-block; margin-top: auto; padding-top: 0;
  font-size: .74rem; letter-spacing: .03em; color: var(--gold-pale);
  background: rgba(228,201,154,.1); border: 1px solid rgba(228,201,154,.24);
  padding: 5px 13px; border-radius: var(--r-pill);
}

/* ─── Reviews ─────────────────────────────────────────────────────────────── */
#guests { overflow: hidden; }
#guests::before {
  content: ''; position: absolute; z-index: 0; right: -90px; top: 50%; transform: translateY(-50%);
  width: 380px; height: 380px; opacity: .05; pointer-events: none;
  background: url('/images/logo-mark.png') center/contain no-repeat;
}
.reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.review {
  position: relative; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 26px 22px;
}
.review::before {
  content: '\201C'; position: absolute; top: 2px; right: 20px;
  font-family: 'Instrument Serif', Georgia, serif; font-size: 4.2rem; line-height: 1;
  color: var(--line);
}
.review .stars { position: relative; color: var(--gold); font-size: .85rem; letter-spacing: .08em; }
.review p {
  position: relative; font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.08rem; line-height: 1.52; margin: 12px 0 14px;
}
.review footer { font-size: .84rem; color: var(--ink-soft); }
/* No reviews yet is a real state on a new property — make it look intended. */
.empty-note {
  background: linear-gradient(118deg, var(--paper), #F6EFE0);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 44px 40px; color: var(--ink-soft); text-align: center;
  font-family: 'Instrument Serif', Georgia, serif; font-size: 1.18rem; line-height: 1.6;
  max-width: 62ch; margin-inline: auto;
}

/* ─── Team ────────────────────────────────────────────────────────────────── */
/* Linen, a half-step off the parchment above, so two light bands can sit next
   to each other without reading as one. Card-less on purpose. */
#team { background: var(--linen); border-top: 1px solid var(--line); }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 24px; }
.team-card { background: none; box-shadow: none; padding: 0; text-align: center; }
.team-photo {
  width: 104px; height: 104px; border-radius: var(--r-pill); margin: 0 auto 16px;
  overflow: hidden; background: var(--mist); border: none;
  box-shadow: 0 0 0 1px rgba(107,42,40,.22), 0 12px 26px -10px rgba(20,32,28,.35);
  display: grid; place-items: center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.team-card:hover .team-photo {
  transform: translateY(-5px);
  box-shadow: 0 0 0 1px rgba(107,42,40,.4), 0 20px 34px -12px rgba(20,32,28,.42);
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-photo span { font-family: 'Instrument Serif', Georgia, serif; font-size: 2.1rem; color: var(--ink-faint); }
.team-card h3 { font-size: 1.05rem; }
.team-card .role {
  color: var(--brass); font-size: .7rem; margin-top: 5px;
  letter-spacing: .14em; text-transform: uppercase;
}
.team-phone {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  font-size: .86rem; color: var(--ink-soft); text-decoration: none;
}
.team-phone:hover { color: var(--brass); }
.team-phone svg { width: 14px; height: 14px; color: var(--brass); }

/* ─── Footer ──────────────────────────────────────────────────────────────── */
.site-foot {
  position: relative; overflow: hidden;
  background: var(--river); color: rgba(247,249,245,.72); padding-block: 64px 32px;
}
/* Gold hairline across the top, and the crest sunk into the right margin. */
.site-foot::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(228,201,154,.55), transparent);
}
.site-foot::after {
  content: ''; position: absolute; right: -60px; bottom: -70px;
  width: 320px; height: 320px; opacity: .06; pointer-events: none;
  background: url('/images/logo-mark.png') center/contain no-repeat;
}
.site-foot .wrap { position: relative; z-index: 1; }
.site-foot h3 { color: var(--paper); font-size: 1.6rem; margin-bottom: 14px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.site-foot a { color: rgba(247,249,245,.72); text-decoration: none; }
.site-foot a:hover { color: var(--paper); }
.foot-links { display: grid; gap: 9px; font-size: .92rem; align-content: start; }
.foot-links .eyebrow { color: var(--gold-pale); margin-bottom: 4px; }
.foot-base {
  margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(247,249,245,.14);
  display: flex; justify-content: space-between; gap: 16px; font-size: .82rem; color: rgba(247,249,245,.5);
}

/* ─── Sticky mobile booking bar ───────────────────────────────────────────── */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--paper); border-top: 1px solid var(--line);
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  display: none; align-items: center; justify-content: space-between; gap: 16px;
  box-shadow: 0 -6px 24px rgba(20,32,28,.08);
}
.mobile-bar b { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 1.3rem; }
.mobile-bar small { display: block; color: var(--ink-soft); font-size: .78rem; }

/* ─── Lightbox ────────────────────────────────────────────────────────────── */
.lightbox {
  position: fixed; inset: 0; z-index: 100; background: rgba(28,20,17,.96);
  display: grid; place-items: center; padding: 24px;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-height: 86vh; max-width: 92vw; border-radius: var(--r-md); }
.lightbox .close, .lightbox .prev, .lightbox .next {
  position: absolute; color: var(--paper); width: 48px; height: 48px;
  border-radius: var(--r-pill); display: grid; place-items: center; font-size: 1.4rem;
  background: rgba(247,249,245,.12);
}
.lightbox .close { top: 20px; right: 20px; }
.lightbox .prev { left: 20px; } .lightbox .next { right: 20px; }

/* ─── Toast ───────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 140%);
  background: var(--river); color: var(--paper); padding: 13px 22px;
  border-radius: var(--r-pill); font-size: .92rem; z-index: 200;
  transition: transform .35s var(--ease); box-shadow: var(--shadow-lift);
  max-width: min(520px, calc(100vw - 32px));
}
.toast.show { transform: translate(-50%, 0); }
.toast.err { background: var(--laterite); }

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .room { grid-template-columns: 220px 1fr; }
  .room-buy { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--line-soft);
              flex-direction: row; align-items: center; text-align: left; }
  .two-col, .foot-grid, .place-lead { grid-template-columns: 1fr; gap: 32px; }
  .cal-months { grid-template-columns: 1fr; gap: 20px; }
  .place-glance { grid-template-columns: 1fr 1fr; }
  .place-glance > div { padding-top: 28px; }
  .place-glance > div:nth-child(odd) { padding-left: 0; border-left: none; }
  .place-glance > div:nth-child(n+3) { border-top: 1px solid rgba(228,201,154,.14); }
  .house-note { padding: 30px 32px; }
  .house-note::before { right: -90px; opacity: .05; }
}
@media (max-width: 760px) {
  .nav { display: none; }
  .hero .wrap { padding-block: 56px 130px; }
  .search { grid-template-columns: 1fr 1fr; }
  .search .btn { grid-column: 1 / -1; }
  .field + .field::before { display: none; }
  .field { border: 1px solid var(--line-soft); }
  .pop { left: 0; right: 0; width: auto; }
  .guest-pop { width: auto; }
  .room { grid-template-columns: 1fr; }
  .room-photo { min-height: 200px; }
  .mosaic { grid-template-columns: 1fr 1fr; height: auto; }
  .mosaic > *:first-child { grid-column: 1 / -1; aspect-ratio: 16/10; }
  .mosaic > *:not(:first-child) { aspect-ratio: 1; }
  .mosaic > *:nth-child(n+4) { display: none; }
  .mobile-bar { display: flex; }
  body { padding-bottom: 76px; }
  .place-glance { grid-template-columns: 1fr; margin-top: 44px; }
  .place-glance > div {
    display: grid; grid-template-columns: 42px 1fr; column-gap: 18px; align-items: start;
    border-left: none !important; border-top: 1px solid rgba(228,201,154,.14);
    padding: 22px 0 22px;
  }
  .place-glance > div:first-child { border-top: none; }
  .glance-icon { grid-row: span 2; margin-bottom: 0; }
  .place-glance dt { margin-bottom: 4px; }
}

/* Only a genuinely phone-width screen stacks the hero — a merely un-maximized
   desktop window (a Mac in split view, say) should still sit side by side. */
@media (max-width: 600px) {
  /* Brand bar is folded into the hero itself on phone — see .hero-brand-mobile. */
  .site-head { display: none; }

  /* Four stacked bands instead of text-over-video: white brand bar, the video,
     a green band carrying the tagline, then the parchment sub-line below.
     .wrap, .hero-grid and .hero-copy are collapsed with display:contents so the
     brand mark, the video and the h1 all become direct flex children of .hero —
     they can then be reordered and given full-width backgrounds of their own
     with no HTML changes. */
  .hero { display: flex; flex-direction: column; }
  .hero > .wrap, .hero-grid, .hero-copy { display: contents; }
  .hero-scrim { display: none; }

  /* 1 — brand band, on white. Crest large and vertically centred on the left;
     the name centred in the band itself (the crest is out of flow so it can't
     pull the name off centre). "Dandeli" is set as a letterspaced line between
     two lantern-gold hairlines — the logotype treatment the plain stack lacked. */
  .hero-brand-mobile {
    order: 1; position: relative; inset: auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 7px; min-height: 122px; padding: 18px 20px;
    background: #fff; border: none; border-radius: 0;
    color: var(--ink);
  }
  .hero-brand-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: clamp(74px, 23.5vw, 96px); height: auto; object-fit: contain; flex: none;
  }
  .hero-brand-mobile b {
    font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
    font-size: clamp(1.5rem, 7.6vw, 2.05rem); line-height: 1;
    letter-spacing: .004em; color: var(--ink);
  }
  .hero-brand-mobile span {
    display: flex; align-items: center; gap: 9px;
    font-size: .6rem; letter-spacing: .3em; text-transform: uppercase;
    color: var(--brass); transform: translateX(-.15em);
  }
  /* Hairlines either side of DANDELI — they draw themselves open on load. */
  .hero-brand-mobile span::before, .hero-brand-mobile span::after {
    content: ''; display: block; width: 26px; height: 1px; flex: none;
    background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
  }

  /* 2 — the river. */
  .hero-art {
    order: 2;
    position: relative; inset: auto;
    width: 100%; height: auto; aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* 3 — the tagline, alone on the green band under the video. */
  .hero h1 {
    order: 3; padding: 26px 20px; text-align: center;
    font-size: clamp(1.5rem, 6.6vw, 2rem); line-height: 1.14;
    max-width: 100%; margin-inline: auto;
  }

  /* The desktop halo/badge, and the sub + meta that used to sit in the hero,
     have no place in the stack — the sub reappears as .hero-tagline-mobile. */
  .hero-badge-halo, .hero-sub, .hero-meta { display: none; }

  .hero-tagline-mobile { display: block; background: var(--paper); padding-block: 26px 4px; }
  .hero-tagline-mobile p {
    margin: 0; text-align: center; max-width: 36ch; margin-inline: auto;
    color: var(--ink-soft); font-size: .92rem;
  }

  /* The search card no longer overlaps the hero on phone — the tagline sits between them. */
  .search-shell { margin-top: 0; }

  /* Entrance, re-timed for the stacked order: brand → video → tagline → sub → search. */
  .hero-brand-mobile { animation: om-rise .8s var(--ease) both; }
  .hero-brand-icon   { animation: om-crest .9s var(--ease) .1s both; }
  .hero-brand-mobile span::before,
  .hero-brand-mobile span::after { animation: om-rule .8s var(--ease) .5s both; }
  .hero-art { animation: om-fade 1s ease .18s both; }
  .hero h1 { animation-delay: .42s; }
  .hero-tagline-mobile { animation: om-rise .85s var(--ease) .58s both; }
  .search-shell { animation-delay: .72s; }

  /* Two amenity columns breaks the labels over two lines at this width. */
  .amenities-block .chips { grid-template-columns: 1fr; gap: 0; }
  .amenities-block .chip:nth-child(2) { border-top: 1px solid var(--line); }
  /* Label over value — at this width a label/value row wraps on both sides and
     the eye can't tell which fragment belongs to which. */
  .facts li { flex-direction: column; align-items: flex-start; gap: 3px; }
  .facts li span:last-child { text-align: left; }

  /* Five people stacked one-per-row is 1,300px of scroll — pair them up. */
  .team-grid { grid-template-columns: 1fr 1fr; gap: 30px 16px; }
  .team-photo { width: 84px; height: 84px; margin-bottom: 12px; }
  .team-card h3 { font-size: .98rem; }
  .team-card .role { font-size: .64rem; }

  /* The crest is a whisper on a 1,200px band and a shout on a 390px one. */
  #guests::before { width: 250px; height: 250px; right: -115px; opacity: .035; }
  .place-lead p { font-size: 1.04rem; }
  .place-lead p::first-letter { font-size: 3em; }
  .house-note { padding: 26px 24px; }
  .house-note p { font-size: 1.1rem; }
  .mosaic { margin-top: 36px; }
  .review p { font-size: 1.02rem; }
  .empty-note { padding: 32px 22px; font-size: 1.06rem; }
  .foot-base { flex-direction: column; gap: 8px; }
}

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