/* ═══════════════════════════════════════════════════════════════════════
   BELA VODA — shared across index.html and property.html.

   The register is the one that reads as expensive in this trade: a single
   muted ground colour edge to edge, cream type on top of it, one engraved
   script for the name, wide-letterspaced small caps for everything
   structural, and italic garamond for anything written in sentences.
   Restraint does the work — there are no cards, no shadows, no rounded
   corners above 1px, and exactly one accent.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --ground:     #355761;   /* the river in shade. Dark enough that cream reads on it
                              at 6.9:1 — the earlier #6A8B93 managed only 3.2:1, which
                              is below the threshold for body text at any size. */
  --ground-2:   #2C4A53;
  --ground-3:   #3E626C;
  --cream:      #F4F0E7;
  --cream-2:    rgba(244,240,231,.80);
  --cream-3:    rgba(244,240,231,.62);
  --line:       rgba(244,240,231,.32);
  --line-soft:  rgba(244,240,231,.14);
  --deep:       #16292E;
  --sky:        #B9DCE4;

  /* One serif does the whole page. Cormorant Garamond sets the body and now
     the display too — it was already carrying the section headings, which
     is the look that got signed off. Two families total: this and Montserrat.
     (Pinyon Script and then Playfair both lived here; the first was
     unreadable at sentence length, the second too mannered beside this.) */
  --script:  "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --caps:    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif:   "Cormorant Garamond", Georgia, serif;

  --shell: 1120px;
  --pad:   clamp(20px, 5vw, 56px);
  --ease:  cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition-duration:.01ms !important; animation:none !important} }

body{
  margin:0; background:var(--ground); color:var(--cream);
  font-family:var(--serif); font-size:17.5px; line-height:1.72; font-weight:300;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* height:auto is load-bearing. Every <img> carries width/height attributes
   for layout stability, and those map to a UA presentational hint of
   height:1500px. A specified height beats aspect-ratio, so without this
   line every aspect-ratio below is silently ignored and the photographs
   render at their full natural height. */
img{display:block; max-width:100%; height:auto}
iframe{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button,input,select{font:inherit; color:inherit}
button{background:none; border:0; cursor:pointer}
h1,h2,h3{margin:0; font-weight:400; line-height:1.14}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
::selection{background:var(--cream); color:var(--ground)}
:focus-visible{outline:1px solid var(--cream); outline-offset:4px}

.skip{position:absolute; left:-9999px; z-index:300; background:var(--deep); color:var(--cream); padding:12px 18px}
.skip:focus{left:14px; top:14px}

/* ── the logo ───────────────────────────────────────────────────────
   A lockup rather than a word: a drawn roundel with the river running
   through it, the name letterspaced beneath, and a rule with the place on
   it. The mark is inline SVG, so it cannot be wrecked by a font failing to
   load — which is exactly how this page once ended up in Comic Sans. */
.mark{
  display:inline-flex; flex-direction:column; align-items:center; gap:9px;
  color:var(--cream); padding:2px 6px; line-height:1;
}
.mark__glyph{
  width:clamp(38px,4vw,52px); height:auto; display:block;
  stroke:var(--cream); fill:none; stroke-width:1.3;
  stroke-linecap:round; transition:opacity .3s var(--ease);
}
.mark__glyph .drop{fill:var(--cream); stroke:none; opacity:.9}
.mark:hover .mark__glyph{opacity:.82}
.mark__name{
  font-family:var(--script); font-weight:500;
  font-size:clamp(26px,3vw,38px); letter-spacing:.22em;
  text-transform:uppercase; text-indent:.22em; line-height:1;
}
.mark__rule{
  display:flex; align-items:center; gap:11px; width:100%;
  font-family:var(--caps); font-size:9.5px; font-weight:400;
  letter-spacing:.34em; text-transform:uppercase; color:var(--cream-3);
  white-space:nowrap;
}
.mark__rule::before,.mark__rule::after{content:""; height:1px; flex:1; background:var(--line)}

.mark--sm{gap:7px}
.mark--sm .mark__glyph{width:clamp(28px,2.6vw,34px)}
.mark--sm .mark__name{font-size:clamp(19px,2vw,24px); letter-spacing:.2em; text-indent:.2em}
.mark--sm .mark__rule{font-size:8.5px; letter-spacing:.3em}

/* ── header ─────────────────────────────────────────────────────────── */
.top{
  text-align:center; padding:clamp(26px,4vw,44px) var(--pad) 0;
  border-bottom:1px solid var(--line); padding-bottom:20px;
}
.nav{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:clamp(14px,2.6vw,34px); margin-top:14px;
}
.nav a{
  font-family:var(--caps); font-size:13.5px; font-weight:300;
  letter-spacing:.28em; text-transform:uppercase; color:var(--cream-2);
  padding:5px 2px; transition:color .25s var(--ease); position:relative;
}
.nav a:hover{color:var(--cream)}
.nav a.on{color:var(--cream)}
.nav a.on::after{content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:var(--cream-3)}

/* `.nav a` is a class plus an element, so it outranks `.btn` and was
   styling the header's Book now as a nav link that merely happened to sit
   in a box — wrong size, wrong weight, no button colour on hover. */
.nav .btn{
  font-size:10.5px; font-weight:400; letter-spacing:.22em;
  color:var(--cream); padding:10px 20px;
}
.nav .btn:hover{color:var(--ground)}
.nav .btn::after{opacity:1}

/* ── buttons ────────────────────────────────────────────────────────
   A hairline box with a fill that rises from the floor on hover, and a
   second rule inset by 4px — the detail that separates an expensive
   printed invitation from a form control. Nothing moves on the page: the
   fill is a pseudo-element behind the label, so no layout is disturbed. */
.btn{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-block; border:1px solid var(--line);
  padding:15px 32px; font-family:var(--caps); font-size:11.5px; font-weight:400;
  letter-spacing:.26em; text-transform:uppercase; color:var(--cream);
  background:rgba(244,240,231,.05); cursor:pointer;
  transition:color .34s var(--ease), border-color .34s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--cream);
  transform:translateY(100%); transition:transform .42s var(--ease);
}
.btn::after{
  content:""; position:absolute; inset:4px; z-index:-1;
  border:1px solid var(--line-soft); opacity:0;
  transition:opacity .34s var(--ease);
}
.btn:hover{color:var(--ground); border-color:var(--cream)}
.btn:hover::before{transform:translateY(0)}
.btn:hover::after{opacity:0}
.btn:not(:hover)::after{opacity:1}
.btn:active{transform:translateY(1px)}

.btn--sm{padding:10px 20px; font-size:10.5px; letter-spacing:.22em}
.btn--sm::after{inset:3px}

/* the inverse: filled at rest, hollowed out on hover */
.btn--solid{background:var(--cream); color:var(--ground); border-color:var(--cream)}
.btn--solid::before{background:transparent}
.btn--solid::after{border-color:rgba(53,87,97,.22)}
.btn--solid:hover{background:transparent; color:var(--cream); border-color:var(--cream)}
.btn--solid:hover::before{transform:translateY(100%)}

.btn[disabled]{opacity:.4; pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .btn::before{transition:none}
}

/* ── shared bits ────────────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--caps); font-size:12px; font-weight:400;
  letter-spacing:.3em; text-transform:uppercase; color:var(--cream-3);
}
.lede{color:var(--cream-2); font-size:clamp(17px,1.6vw,19.5px); line-height:1.75}

/* a hairline with a label sitting in it */
.rule{display:flex; align-items:center; gap:20px; margin-bottom:clamp(34px,4.4vw,58px)}
.rule::before,.rule::after{content:""; height:1px; background:var(--line); flex:1}
.rule span{
  font-family:var(--caps); font-size:12px; font-weight:400;
  letter-spacing:.3em; text-transform:uppercase; color:var(--cream-3); white-space:nowrap;
}

section{padding:clamp(56px,7vw,104px) var(--pad)}
section > *{max-width:var(--shell); margin-inline:auto}

/* ── opening ────────────────────────────────────────────────────────── */
.opening{text-align:center; padding-top:clamp(48px,6vw,88px)}
.opening h1{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(31px,4.6vw,58px); margin:20px auto 0; max-width:19ch;
}
.opening .lede{margin:26px auto 0; max-width:58ch}

/* ── the collection grid ────────────────────────────────────────────
   Every card is a subgrid sharing its row's tracks, so the photographs,
   the names, the specs, the paragraphs and the buttons all sit on the
   same lines across the row — however uneven the copy is. That alignment
   is most of what makes a grid like this look composed rather than
   assembled. Without subgrid support the button still drops to the
   bottom of its card, which is the part people notice. */
.grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(44px,5vw,86px) clamp(30px,4.5vw,86px);
}
@media (max-width:760px){ .grid{grid-template-columns:minmax(0,1fr)} }

.card{
  text-align:center; display:flex; flex-direction:column;
  grid-row:span 5;
}
/* Fallback first: the paragraph takes the slack, so the button is pushed
   to the bottom of every card and the buttons line up across the row even
   without subgrid. */
.card__note{flex:1}
@supports (grid-template-rows: subgrid){
  .card{display:grid; grid-template-rows:subgrid}
  .card__note{flex:none}
}
.card__shot{display:block; overflow:hidden; background:var(--ground-2)}
.card__shot img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform 1.1s var(--ease)}
.card__shot:hover img{transform:scale(1.035)}

.card__head{align-self:start}
.card__name{
  font-family:var(--script); font-size:clamp(26px,2.7vw,35px); font-style:italic;
  font-weight:400; margin-top:20px; line-height:1.26;
}
.card__name a:hover{color:var(--sky)}
.card__spec{
  font-family:var(--caps); font-size:12px; font-weight:400; letter-spacing:.24em;
  text-transform:uppercase; color:var(--cream); margin-top:12px;
}
.card__note{
  font-style:italic; font-size:15.5px; line-height:1.66; color:var(--cream-2);
  margin:20px auto 0; max-width:40ch; align-self:start;
}
/* align-self means "bottom" in the subgrid path but "right" in the flex
   fallback's column axis, so it stays centre in both. The bottom push is
   done by .card__note{flex:1} above, which works either way. */
.card .btn{margin-top:26px; align-self:center; justify-self:center}

/* ── the darker band ────────────────────────────────────────────────── */
.band{background:var(--ground-3); text-align:center}
.band__in{max-width:var(--shell); margin-inline:auto}
.band h2{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(26px,3.4vw,44px); margin:18px auto 0; max-width:22ch;
}
.band .lede{margin:24px auto 0; max-width:60ch}

/* ── about + contact ────────────────────────────────────────────────── */
.cols{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,3.4vw,56px); font-style:italic; color:var(--cream-2);
}
@media (max-width:700px){ .cols{grid-template-columns:minmax(0,1fr)} }

.lines{border-top:1px solid var(--line-soft)}
.lines li{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:15px 2px; border-bottom:1px solid var(--line-soft);
}
.lines li > span:first-child{
  font-family:var(--caps); font-size:12px; font-weight:400; letter-spacing:.24em;
  text-transform:uppercase; color:var(--cream-3); flex:none;
}
.lines a,.lines .v{font-style:italic; text-align:right}
.lines a{border-bottom:1px solid var(--line); transition:.22s var(--ease)}
.lines a:hover{color:var(--sky); border-color:var(--sky)}

/* ── footer ─────────────────────────────────────────────────────────── */
.foot{
  text-align:center; padding:clamp(44px,5vw,78px) var(--pad) 40px;
  border-top:1px solid var(--line); background:var(--ground-2);
}
.foot__addr{font-style:italic; color:var(--cream-3); font-size:15px; margin-top:6px}
.foot__nav{display:flex; justify-content:center; flex-wrap:wrap; gap:8px 22px; margin-top:20px}
.foot__nav a{
  font-family:var(--caps); font-size:12px; font-weight:300; letter-spacing:.24em;
  text-transform:uppercase; color:var(--cream-3); transition:color .22s var(--ease);
}
.foot__nav a:hover{color:var(--cream)}
.foot__c{font-family:var(--caps); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--cream-3); margin-top:22px}

/* ═══════════════════════════════════════════════════════════════════════
   PROPERTY PAGE
   ═══════════════════════════════════════════════════════════════════════ */
.back{
  display:inline-block; margin-bottom:26px;
  font-family:var(--caps); font-size:12px; font-weight:300; letter-spacing:.24em;
  text-transform:uppercase; color:var(--cream-3); transition:color .22s var(--ease);
}
.back:hover{color:var(--cream)}

.hero{padding-top:clamp(40px,5vw,72px); text-align:center}
.hero__name{font-family:var(--script); font-size:clamp(34px,4.3vw,56px); line-height:1.1; font-style:italic; font-weight:400}
.hero__spec{
  font-family:var(--caps); font-size:13.5px; font-weight:400; letter-spacing:.26em;
  text-transform:uppercase; color:var(--cream-2); margin-top:14px;
}
.hero__where{font-style:italic; color:var(--cream-3); margin-top:10px; font-size:16px}
.hero__shot{margin-top:clamp(28px,3.6vw,48px); overflow:hidden; background:var(--ground-2)}
.hero__shot img{width:100%; aspect-ratio:21/9; object-fit:cover}
@media (max-width:700px){ .hero__shot img{aspect-ratio:4/3} }

.story{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,4vw,72px)}
@media (max-width:820px){ .story{grid-template-columns:minmax(0,1fr)} }
.story p{font-style:italic; color:var(--cream-2)}
.story p + p{margin-top:1.1em}
.feat li{
  padding:12px 0 12px 22px; border-bottom:1px solid var(--line-soft);
  position:relative; font-style:italic; color:var(--cream-2); font-size:16px;
}
.feat li::before{content:""; position:absolute; left:2px; top:22px; width:7px; height:1px; background:var(--cream-3)}
.feat{border-top:1px solid var(--line-soft)}

.strip{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(9px,1.2vw,16px)}
@media (max-width:640px){ .strip{grid-template-columns:repeat(2,minmax(0,1fr))} }
.strip button{display:block; width:100%; padding:0; cursor:zoom-in; overflow:hidden; background:var(--ground-2)}
.strip img{width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform 1s var(--ease)}
.strip button:hover img{transform:scale(1.04)}

/* ── the date check ─────────────────────────────────────────────────── */
.check{background:var(--ground-3)}
.check__in{max-width:var(--shell); margin-inline:auto}
.check__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,70px); align-items:start}
@media (max-width:880px){ .check__grid{grid-template-columns:minmax(0,1fr)} }

.fields{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:460px){ .fields{grid-template-columns:1fr} }
.field label{
  display:block; font-family:var(--caps); font-size:13.5px; font-weight:400;
  letter-spacing:.24em; text-transform:uppercase; color:var(--cream-3); margin-bottom:8px;
}
.field input[type=date], .field select{
  width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:0;
  background:rgba(244,240,231,.08); color:var(--cream);
  font-family:var(--caps); font-size:14px; font-weight:300; color-scheme:dark;
}
.field input[type=date]:focus, .field select:focus{
  border-color:var(--cream); outline:none; background:rgba(244,240,231,.14);
}
.field select option{background:var(--ground-3); color:var(--cream)}
.guests{margin-top:16px; max-width:180px}

.quote{min-height:120px}
.quote__rows{border-top:1px solid var(--line-soft); margin-top:4px}
.quote__rows li{
  display:flex; justify-content:space-between; align-items:baseline; gap:18px;
  padding:12px 0; border-bottom:1px solid var(--line-soft);
  font-style:italic; color:var(--cream-2); font-size:16px;
}
.quote__rows li b{font-style:normal; font-family:var(--caps); font-weight:300;
  font-size:14.5px; color:var(--cream); font-variant-numeric:tabular-nums}
.quote__total{display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding-top:20px}
.quote__total span{
  font-family:var(--caps); font-size:12px; font-weight:400; letter-spacing:.24em;
  text-transform:uppercase; color:var(--cream-3);
}
.quote__total b{font-family:var(--serif); font-weight:300; font-size:clamp(32px,4vw,46px);
  font-variant-numeric:tabular-nums; line-height:1}
.quote__msg{font-style:italic; color:var(--cream-2); font-size:16px; line-height:1.7}
.quote__msg.no{color:#F6DCCF}
.quote__acts{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.quote__fine{font-size:14px; font-style:italic; color:var(--cream-3); margin-top:16px; line-height:1.6}

/* the season table, so the year is legible without guessing */
.rates{border-top:1px solid var(--line-soft); margin-top:8px}
.rates li{
  display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px 20px;
  padding:11px 0; border-bottom:1px solid var(--line-soft); align-items:baseline;
}
.rates li.on{color:var(--sky)}
.rates .s{font-style:italic; color:var(--cream-2); font-size:16px}
.rates li.on .s{color:var(--sky)}
.rates .w{font-family:var(--caps); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cream-3); text-align:right; white-space:nowrap}
.rates .r{font-family:var(--caps); font-size:14px; color:var(--cream); text-align:right;
  font-variant-numeric:tabular-nums; white-space:nowrap}
.rates li.on .r{color:var(--sky)}

.taken{margin-top:22px}
.taken li{font-family:var(--caps); font-size:13.5px; letter-spacing:.06em; color:var(--cream-3); padding:5px 0}

/* ── the other houses, at the foot of a property page ───────────────── */
.others{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.6vw,40px)}
@media (max-width:760px){ .others{grid-template-columns:minmax(0,1fr)} }
.other{text-align:center}
.other img{width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform 1s var(--ease)}
.other a{display:block; overflow:hidden; background:var(--ground-2)}
.other a:hover img{transform:scale(1.04)}
.other h3{font-family:var(--script); font-size:23px; font-style:italic; margin-top:14px}
.other p{font-family:var(--caps); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream-3); margin-top:7px}

/* ── lightbox ───────────────────────────────────────────────────────── */
.lb{position:fixed; inset:0; z-index:400; background:rgba(18,36,40,.97);
  display:none; align-items:center; justify-content:center; padding:clamp(14px,4vw,56px)}
.lb.on{display:flex}
.lb img{max-width:100%; max-height:86vh; object-fit:contain}
.lb__x,.lb__p,.lb__n{position:absolute; color:var(--cream); width:46px; height:46px;
  display:grid; place-items:center; border:1px solid var(--line); transition:.22s var(--ease)}
.lb__x:hover,.lb__p:hover,.lb__n:hover{background:var(--cream); color:var(--ground)}
.lb__x{top:clamp(14px,3vw,26px); right:clamp(14px,3vw,26px); font-size:19px; line-height:1}
.lb__p{left:clamp(10px,2vw,26px); top:50%; margin-top:-23px}
.lb__n{right:clamp(10px,2vw,26px); top:50%; margin-top:-23px}
.lb__p svg,.lb__n svg{width:15px; height:15px}
.lb__cap{position:absolute; left:0; right:0; bottom:clamp(14px,3vw,28px); text-align:center;
  font-family:var(--caps); font-size:13.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--cream-3)}

/* ═══════════════════════════════════════════════════════════════════════
   THE LANDING PAGE
   The houses live on stay.html now. This page's job is to say who we are
   and make somebody want the valley — the catalogue is one click away.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── welcome: a photograph bled to the left edge, words on the right ── */
.welcome{
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(26px,4vw,76px); align-items:center;
  padding:0 var(--pad) 0 0; max-width:none;
}
.welcome > *{max-width:none; margin:0}
.welcome__shot{overflow:hidden; background:var(--ground-2)}
.welcome__shot img{width:100%; aspect-ratio:5/4; object-fit:cover}
.welcome__txt{max-width:50ch; padding:clamp(40px,6vw,86px) 0}
.welcome__hi{font-family:var(--script); font-size:clamp(33px,3.7vw,48px); line-height:1.06; font-style:italic; font-weight:400}
.welcome__who{
  font-family:var(--caps); font-size:clamp(12px,1.3vw,15px); font-weight:400;
  letter-spacing:.24em; text-transform:uppercase; margin-top:8px;
}
/* :not([class]) matters here. A bare `.welcome__txt p` outranks
   `.welcome__hi` and `.welcome__who` on specificity, so it was silently
   overriding both and rendering the display word at body size. This rule
   now only claims the unclassed paragraphs it was written for. */
.welcome__txt p:not([class]){font-style:italic; color:var(--cream-2); margin-top:20px; font-size:16.5px}
.welcome__txt .back{display:inline-block; margin-bottom:22px}
.welcome__txt .hero__where{margin-top:12px; font-size:15.5px; color:var(--cream-3)}
.welcome__txt .btn{margin-top:28px}
@media (max-width:860px){
  .welcome{grid-template-columns:minmax(0,1fr); padding:0}
  .welcome__txt{padding:clamp(26px,6vw,42px) var(--pad) clamp(30px,6vw,48px)}
  .welcome__shot img{aspect-ratio:4/3}
}

/* ── the instagram strip ────────────────────────────────────────────── */
.social{text-align:center}
.social__head{
  font-family:var(--caps); font-size:13.5px; font-weight:400; letter-spacing:.3em;
  text-transform:uppercase; color:var(--cream-2); margin-bottom:clamp(24px,3vw,40px);
}
.social__grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(8px,1vw,14px); max-width:720px; margin-inline:auto;
}
/* four across at every width — the strip is a glance, not a gallery */
.social__grid a{display:block; overflow:hidden; background:var(--ground-2)}
.social__grid img{width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform 1s var(--ease)}
.social__grid a:hover img{transform:scale(1.05)}
.social__at{
  display:inline-flex; align-items:center; gap:7px; margin-top:18px;
  font-family:var(--caps); font-size:12px; font-weight:300; letter-spacing:.2em;
  text-transform:uppercase; color:var(--cream-3); transition:color .22s var(--ease);
}
.social__at svg{width:13px; height:13px}
.social__at:hover{color:var(--cream)}

/* ── the script line, with a sprig beside it ────────────────────────── */
.tagline{text-align:center; max-width:none}
.tagline p{
  font-family:var(--script); font-style:italic; font-weight:400;
  font-size:clamp(26px,3.4vw,44px); line-height:1.28; font-weight:400;
  max-width:24ch; margin-inline:auto;
}
/* The sprig was sitting at the edge of the section at 88px, which made a
   piece of decoration the loudest thing in the band. It is now a small
   centred ornament above the line — present, but not competing with the
   sentence it is meant to garnish. */
.tagline svg{
  display:block; width:26px; height:auto; margin:0 auto 18px;
  opacity:.42; pointer-events:none;
}

/* ── the email list ─────────────────────────────────────────────────── */
.signup{text-align:center}
.signup h2{
  font-family:var(--caps); font-size:13.5px; font-weight:400; letter-spacing:.3em;
  text-transform:uppercase; color:var(--cream);
}
.signup p{font-style:italic; color:var(--cream-2); margin:14px auto 26px; max-width:52ch; font-size:16px}
.signup form{display:flex; justify-content:center; flex-wrap:wrap; gap:0; max-width:430px; margin-inline:auto}
.signup input{
  flex:1 1 220px; min-width:0; padding:14px 16px; border:1px solid var(--line); border-right:0;
  background:rgba(244,240,231,.94); color:#2A3F45; font-family:var(--caps); font-size:14px; font-weight:300;
}
.signup input::placeholder{color:#7B8E93}
.signup input:focus{outline:none; background:#fff}
.signup button{
  flex:none; padding:14px 24px; border:1px solid var(--line); background:rgba(244,240,231,.14);
  font-family:var(--caps); font-size:12px; font-weight:400; letter-spacing:.22em;
  text-transform:uppercase; color:var(--cream); transition:.26s var(--ease);
}
.signup button:hover{background:var(--cream); color:var(--ground)}
@media (max-width:430px){
  .signup input{border-right:1px solid var(--line); flex:1 1 100%}
  .signup button{flex:1 1 100%; margin-top:10px}
}
.signup__msg{margin-top:14px; font-style:italic; font-size:15px; min-height:1.4em; color:var(--cream-2)}
.signup__msg.bad{color:#F6DCCF}

/* the wordmark and the instagram glyph, together at the foot */
.foot__mark{display:inline-flex; align-items:center; gap:14px}
.foot__mark svg{width:19px; height:19px; opacity:.72; transition:opacity .22s}
.foot__mark a:hover svg{opacity:1}

/* ═══════════════════════════════════════════════════════════════════════
   THE FINDER — dates first, across all four houses at once.
   Type a stay and the collection answers: which houses are free, what each
   one actually costs for those nights, and why the others are not. The
   thing a four-house owner can do that a platform listing cannot.
   ═══════════════════════════════════════════════════════════════════════ */
.finder{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:clamp(20px,2.6vw,30px) 0; margin-bottom:clamp(36px,4.4vw,58px);
}
.finder__row{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:center;
  gap:clamp(12px,1.8vw,26px);
}
.finder .field{min-width:150px}
.finder .field label{
  display:block; font-family:var(--caps); font-size:13.5px; font-weight:400;
  letter-spacing:.24em; text-transform:uppercase; color:var(--cream-3); margin-bottom:8px;
}
.finder input[type=date], .finder select{
  width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:0;
  background:rgba(244,240,231,.08); color:var(--cream);
  font-family:var(--caps); font-size:13.5px; font-weight:300; color-scheme:dark;
}
.finder input[type=date]:focus, .finder select:focus{
  border-color:var(--cream); outline:none; background:rgba(244,240,231,.14);
}
.finder select option{background:var(--ground-2); color:var(--cream)}
.finder__clear{
  font-family:var(--caps); font-size:13.5px; font-weight:300; letter-spacing:.2em;
  text-transform:uppercase; color:var(--cream-3); padding:11px 4px;
  border-bottom:1px solid transparent; transition:.22s var(--ease);
}
.finder__clear:hover{color:var(--cream); border-bottom-color:var(--line)}
.finder__said{
  text-align:center; margin-top:16px; font-style:italic; font-size:16px; color:var(--cream-2);
  min-height:1.5em;
}

/* a card the dates rule out — kept visible, and told why */
.card.out{opacity:.4}
.card.out .card__shot img{filter:saturate(.35)}
.card__verdict{
  font-family:var(--caps); font-size:12px; font-weight:400; letter-spacing:.16em;
  text-transform:uppercase; color:var(--sky); margin-top:14px; line-height:1.6;
}
.card.out .card__verdict{color:var(--cream-3); text-transform:none; letter-spacing:.04em;
  font-family:var(--serif); font-style:italic; font-size:15px}
.card__total{
  font-family:var(--serif); font-size:clamp(23px,2.4vw,30px); font-weight:300;
  margin-top:6px; font-variant-numeric:tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════
   THE HOUSE PAGE — the Airbnb listing anatomy, in this typeface.
   Photo mosaic, title row, host line, amenities with icons, a booking card
   that follows you down the page, then reviews. The shapes people already
   know how to read, wearing the site's clothes.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── the photo mosaic: one large, four small ─────────────────────────── */
.mosaic{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr)); gap:8px;
  aspect-ratio:2/1; margin-top:clamp(20px,2.6vw,32px);
}
.mosaic button{padding:0; overflow:hidden; background:var(--ground-2); cursor:zoom-in; display:block}
.mosaic button:first-child{grid-column:span 2; grid-row:span 2}
.mosaic img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease)}
.mosaic button:hover img{transform:scale(1.05)}
.mosaic__more{
  position:absolute; right:14px; bottom:14px; background:rgba(21,40,45,.82);
  border:1px solid var(--line); color:var(--cream); padding:9px 16px;
  font-family:var(--caps); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
}
.mosaic-wrap{position:relative}
/* fewer than five photographs: even tiles, no hero, nothing repeated */
.mosaic--few{grid-template-rows:auto; aspect-ratio:3/1.15}
.mosaic--few button:first-child{grid-column:span 2; grid-row:span 1}

@media (max-width:760px){
  .mosaic{grid-template-columns:repeat(2,minmax(0,1fr)); aspect-ratio:4/3; gap:5px}
  .mosaic button:first-child{grid-column:span 2; grid-row:span 1}
  .mosaic button:nth-child(n+4){display:none}
}

/* ── the title row ──────────────────────────────────────────────────── */
.lead{margin-top:clamp(26px,3vw,40px)}
.lead h1{font-family:var(--script); font-size:clamp(35px,4.4vw,58px); line-height:1.1; font-style:italic; font-weight:400}
.lead__facts{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:14px;
  font-family:var(--caps); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cream-2);
}
.lead__facts .dot{color:var(--cream-3)}
.lead__stars{display:inline-flex; align-items:center; gap:7px; color:var(--cream)}
.lead__stars svg{width:14px; height:14px; fill:var(--sky)}

/* ── two columns: the house on the left, the booking card on the right ─ */
.listing{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(320px,.85fr);
  gap:clamp(30px,4vw,74px); align-items:start;
  padding-top:clamp(30px,3.4vw,48px); margin-top:clamp(28px,3.2vw,44px);
  border-top:1px solid var(--line);
}
@media (max-width:920px){ .listing{grid-template-columns:minmax(0,1fr)} }

.host{
  display:flex; align-items:center; gap:16px; padding-bottom:26px;
  border-bottom:1px solid var(--line-soft);
}
.host__ring{
  width:52px; height:52px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; flex:none;
  font-family:var(--script); font-size:22px; line-height:1; padding-bottom:2px;
}
.host__who{font-family:var(--caps); font-size:13px; letter-spacing:.14em; text-transform:uppercase}
.host__sub{font-style:italic; color:var(--cream-3); font-size:15px; margin-top:3px}

.about-house{padding:26px 0; border-bottom:1px solid var(--line-soft)}
.about-house p{font-style:italic; color:var(--cream-2)}
.about-house p + p{margin-top:1.05em}

.amen{padding:26px 0; border-bottom:1px solid var(--line-soft)}
.amen h2, .revs h2, .rules h2{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(22px,2.4vw,30px); margin-bottom:20px;
}
.amen__grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px 26px}
@media (max-width:560px){ .amen__grid{grid-template-columns:minmax(0,1fr)} }
.amen__grid li{display:flex; align-items:flex-start; gap:13px; font-size:16px; color:var(--cream-2)}
.amen__grid svg{width:21px; height:21px; flex:none; stroke:var(--cream); fill:none;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; margin-top:2px; opacity:.9}

/* ── the booking card, which follows you down ───────────────────────── */
.bookcard{
  border:1px solid var(--line); background:var(--ground-3);
  padding:clamp(20px,2.2vw,28px); position:sticky; top:20px;
}
@media (max-width:920px){ .bookcard{position:static} }
.bookcard__top{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.bookcard__rate{font-family:var(--serif); font-size:30px; font-weight:400}
.bookcard__unit{font-family:var(--caps); font-size:12.5px; color:var(--cream-3); letter-spacing:.1em}
.bookcard .fields{margin-top:20px; gap:0}
.bookcard .field input[type=date]{border-radius:0}
.bookcard .fields .field:first-child input{border-right:0}
.bookcard .field.wide{margin-top:-1px}
.bookcard .field.wide select{width:100%}
.bookcard .btn{width:100%; text-align:center; margin-top:16px}
.bookcard__msg{margin-top:16px; font-style:italic; font-size:15px; color:var(--cream-2); line-height:1.6}
.bookcard__msg.no{color:#F8DED0}
.bookcard__rows{margin-top:18px; border-top:1px solid var(--line-soft)}
.bookcard__rows li{
  display:flex; justify-content:space-between; gap:14px; padding:11px 0;
  border-bottom:1px solid var(--line-soft); font-style:italic; font-size:15.5px; color:var(--cream-2);
}
.bookcard__rows li b{font-style:normal; font-family:var(--caps); font-weight:300; font-size:14.5px;
  color:var(--cream); font-variant-numeric:tabular-nums}
.bookcard__total{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding-top:16px}
.bookcard__total span{font-family:var(--caps); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--cream-3)}
.bookcard__total b{font-family:var(--serif); font-weight:400; font-size:29px; font-variant-numeric:tabular-nums}
.bookcard__fine{font-size:14px; font-style:italic; color:var(--cream-3); margin-top:14px; line-height:1.55}

/* ── reviews ────────────────────────────────────────────────────────── */
.revs{padding:26px 0; border-bottom:1px solid var(--line-soft)}
.revs__head{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:24px}
.revs__score{display:inline-flex; align-items:center; gap:9px; font-family:var(--caps);
  font-size:14px; letter-spacing:.12em; color:var(--cream)}
.revs__score svg{width:16px; height:16px; fill:var(--sky)}
.revs__grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 34px}
@media (max-width:640px){ .revs__grid{grid-template-columns:minmax(0,1fr)} }
.rev__who{display:flex; align-items:center; gap:12px}
.rev__ring{width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; font-family:var(--caps); font-size:13px; flex:none}
.rev__name{font-family:var(--caps); font-size:13px; letter-spacing:.12em; text-transform:uppercase}
.rev__when{font-style:italic; color:var(--cream-3); font-size:14px; margin-top:2px}
.rev__stars{margin-top:12px; display:flex; gap:3px}
.rev__stars svg{width:12px; height:12px; fill:var(--sky)}
.rev__text{font-style:italic; color:var(--cream-2); font-size:15.5px; margin-top:9px; line-height:1.66}

.rules{padding:26px 0}
.rules__grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 30px}
@media (max-width:700px){ .rules__grid{grid-template-columns:minmax(0,1fr)} }
.rules__grid h3{font-family:var(--caps); font-size:12.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cream-3); margin-bottom:10px}
.rules__grid li{font-style:italic; color:var(--cream-2); font-size:15.5px; padding:3px 0}