/* ============================================================
   STAY IN WISCONSIN — visual system
   Warm birch ground · deep spruce · muted sage
   Warm copper accent · charcoal text
   Bold grotesk headings (Archivo) + clean sans (Inter)
   + serif italic (Fraunces) for taglines and pull-quotes only

   Palette note: the custom-property NAMES below are historical
   (--forest-*, --tan-*). The VALUES are the current spruce/copper
   palette. Change a value here and it propagates site-wide.
   ============================================================ */

:root{
  /* ---- colour ---- */
  --cream:      #FBF8F1;   /* warm off-white page ground        */
  --cream-2:    #F4EEE3;   /* alternate band                     */
  --cream-3:    #E9E0D0;   /* hairline / soft fills              */
  --forest-900: #0F2A29;
  --forest-800: #15393A;   /* primary very dark forest green     */
  --forest-700: #1C4A48;
  --pine-600:   #3E6660;   /* secondary muted pine / olive       */
  --pine-500:   #6F8C82;
  --tan-700:    #9E5626;
  --tan-600:    #BA6B31;   /* warm Wisconsin tan / brown accent  */
  --tan-500:    #D18B4F;
  --tan-300:    #EBC194;
  --ink:        #1F231E;   /* charcoal body text                 */
  --ink-soft:   #5B6159;
  --line:       rgba(31,35,30,.14);
  --line-soft:  rgba(31,35,30,.08);
  --line-dark:  rgba(251,248,241,.16);

  /* ---- type ----
     Headings are a heavy grotesk, the way the reference site does it.
     The serif is kept for italic taglines and pull-quotes only — that
     pairing is the part that lifts it above the reference. */
  --display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --serif:   "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:    "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;

  /* ---- shape ---- */
  --r-card: 14px;
  --r-img:  12px;
  --r-btn:  8px;
  --sh-sm:  0 1px 2px rgba(12,32,31,.05), 0 4px 12px rgba(12,32,31,.06);
  --sh-md:  0 1px 2px rgba(12,32,31,.05), 0 12px 28px rgba(12,32,31,.09);
  --sh-lg:  0 2px 4px rgba(12,32,31,.06), 0 26px 56px rgba(12,32,31,.15);

  /* ---- rhythm ---- */
  --gut:  clamp(20px, 4.6vw, 52px);
  --sec:  clamp(76px, 11vw, 152px);
  --ease: cubic-bezier(.22,1,.36,1);

  /* Height of the fixed header. A token because two unrelated rules need to
     agree on it: .hdr__in sets it, and .hero reserves it so centred hero
     content is never laid out underneath the menu. When they drifted apart
     the hero badge ended up 8px behind the header bar on a 375px phone. */
  --hdr-h: clamp(72px, 7vw, 94px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:17px;font-weight:400;line-height:1.68;
  letter-spacing:.005em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--tan-300);color:var(--forest-900)}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:1290px;margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:900px}
.sec{padding-block:var(--sec)}
.sec--tight{padding-block:clamp(56px,7.5vw,104px)}
.band-cream2{background:var(--cream-2)}
.band-forest{background:var(--forest-800);color:var(--cream)}
.band-forest .lede,.band-forest p{color:rgba(251,248,241,.78)}

/* ---------- type scale ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:800;color:var(--forest-800);margin:0;
  letter-spacing:-.022em;line-height:1.08}
.band-forest h1,.band-forest h2,.band-forest h3,.band-forest h4{color:var(--cream)}

.eyebrow{
  display:flex;align-items:center;gap:14px;margin:0 0 26px;
  font-family:var(--sans);font-size:11px;font-weight:600;line-height:1;
  letter-spacing:.24em;text-transform:uppercase;color:var(--tan-700);
}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor;opacity:.55;flex:none}
.eyebrow--center{justify-content:center}
.band-forest .eyebrow{color:var(--tan-500)}

.h-xl{font-size:clamp(40px,6.4vw,80px);line-height:1.02;letter-spacing:-.032em}
.h-lg{font-size:clamp(31px,4.4vw,53px);line-height:1.08;letter-spacing:-.026em}
/* Centred section heading. A standalone utility rather than an .h-lg--center
   modifier because the centring is independent of the type scale — .h-xl needs
   it on the same terms, and a modifier per size would mean two rules to keep in
   step. No max-width: these headings are short enough to sit on one line at
   full size, and `balance` splits them evenly rather than leaving one orphan
   word on the second line once they do wrap on a phone. */
.h-center{text-align:center;text-wrap:balance}
.h-md{font-size:clamp(25px,2.9vw,36px);line-height:1.12;letter-spacing:-.022em}
.h-sm{font-size:clamp(20px,2vw,25px);line-height:1.22;letter-spacing:-.016em}

.lede{margin:26px 0 0;max-width:56ch;font-size:clamp(17px,1.35vw,19.5px);
  line-height:1.72;color:var(--ink-soft);text-wrap:pretty}
.lede--center{margin-inline:auto;text-align:center}
.muted{color:var(--ink-soft)}
.note{font-size:12px;letter-spacing:.06em;color:var(--pine-500);font-style:italic}

/* ---------- buttons (understated, squared) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-family:var(--sans);font-size:11.5px;font-weight:600;line-height:1;
  letter-spacing:.14em;text-transform:uppercase;
  padding:18px 32px;border:1px solid transparent;border-radius:var(--r-btn);
  transition:background-color .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),
    transform .45s var(--ease),box-shadow .45s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn--solid,.btn--tan{box-shadow:var(--sh-sm)}
.btn--solid:hover,.btn--tan:hover{box-shadow:var(--sh-md)}
.btn .ar{transition:transform .5s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
.btn--solid{background:var(--forest-800);color:var(--cream);border-color:var(--forest-800)}
.btn--solid:hover{background:var(--pine-600);border-color:var(--pine-600)}
.btn--ghost{border-color:var(--line);color:var(--forest-800)}
.btn--ghost:hover{background:var(--forest-800);border-color:var(--forest-800);color:var(--cream)}
.btn--onphoto{border-color:rgba(255,255,255,.55);color:#fff;backdrop-filter:blur(2px)}
.btn--onphoto:hover{background:#fff;border-color:#fff;color:var(--forest-800)}
.btn--fill-cream{background:var(--cream);color:var(--forest-800);border-color:var(--cream)}
.btn--fill-cream:hover{background:transparent;color:var(--cream);border-color:rgba(251,248,241,.6)}
.btn--tan{background:var(--tan-600);color:#fff;border-color:var(--tan-600)}
.btn--tan:hover{background:var(--tan-700);border-color:var(--tan-700)}

.tlink{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--tan-700);
  padding-bottom:6px;border-bottom:1px solid rgba(158,86,38,.35);transition:border-color .4s,color .4s}
.tlink:hover{color:var(--forest-800);border-color:var(--forest-800)}
.tlink .ar{transition:transform .5s var(--ease)}
.tlink:hover .ar{transform:translateX(5px)}
.band-forest .tlink{color:var(--tan-500);border-color:rgba(209,139,79,.4)}
.band-forest .tlink:hover{color:var(--cream);border-color:var(--cream)}

.btnrow{display:flex;flex-wrap:wrap;gap:14px;margin-top:44px}
.btnrow--center{justify-content:center}

.rule{border:0;border-top:1px solid var(--line);margin:0}

/* ---------- icons ---------- */
.ico{width:1em;height:1em;flex:none;stroke:currentColor;stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.ico--fill{fill:currentColor;stroke:none}

/* ---------- pill badge ---------- */
.pill{display:inline-flex;align-items:center;gap:9px;
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:9px 18px;border-radius:999px;background:var(--tan-600);color:#fff;
  box-shadow:0 2px 10px rgba(12,32,31,.16)}
.pill .ico{width:13px;height:13px}
.pill--onphoto{background:rgba(12,32,31,.62);backdrop-filter:blur(7px);
  border:1px solid rgba(255,255,255,.24);color:rgba(255,255,255,.94)}
.pill--abs{position:absolute;top:16px;left:16px;z-index:2}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.hdr{position:fixed;inset:0 0 auto;z-index:120;transition:background-color .55s var(--ease),
  box-shadow .55s var(--ease),border-color .55s var(--ease);border-bottom:1px solid transparent}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:32px;
  height:var(--hdr-h)}
.brand{display:block;line-height:1}
/* wordmark with a small drawn glyph in front of it */
.brand--mark{display:flex;align-items:center;gap:13px}
.brand__glyph{width:26px;height:32px;flex:none;fill:var(--tan-500);
  transition:fill .55s var(--ease)}
.hdr.is-solid .brand__glyph,.hdr.is-light .brand__glyph{fill:var(--tan-600)}
/* beats the `.brand span` tagline rule, which would otherwise offset the block */
.brand .brand__txt{display:block;margin-top:0;font-size:inherit;letter-spacing:normal;color:inherit}
.brand b{display:block;font-family:var(--sans);font-weight:600;font-size:clamp(14px,1.5vw,16.5px);
  letter-spacing:.2em;text-transform:uppercase;color:#fff;transition:color .55s var(--ease)}
.brand span{display:block;margin-top:7px;font-size:9.5px;font-weight:500;letter-spacing:.26em;
  text-transform:uppercase;color:rgba(255,255,255,.62);transition:color .55s var(--ease)}
/* ---------- header logo ----------
   Two stacked images cross-faded on scroll. The dark one is absolutely
   positioned over the light one so the pair occupies a single slot and the
   swap cannot shift the layout. Height drives the size; width stays auto so
   the 3.21:1 lockup never distorts. */
.brand--logo{position:relative;display:block;flex:none;line-height:0}
.brand__logo{display:block;width:auto;height:clamp(34px,4.4vw,52px);
  transition:opacity .55s var(--ease)}
.brand__logo--dark{position:absolute;left:0;top:0;opacity:0}
.hdr.is-solid .brand__logo--light,.hdr.is-light .brand__logo--light{opacity:0}
.hdr.is-solid .brand__logo--dark,.hdr.is-light .brand__logo--dark{opacity:1}
/* No body.menu-open override here, deliberately. .hdr.is-solid (0,3,0) would
   outrank it (0,2,1) anyway, and .burger follows exactly the same precedence —
   with the drawer open the header keeps its solid styling, so the dark logo is
   the consistent choice. */
@media (prefers-reduced-motion:reduce){.brand__logo{transition:none}}

.nav{display:flex;align-items:center;gap:clamp(16px,1.9vw,30px)}
.nav a.nl{position:relative;white-space:nowrap;
  font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.86);transition:color .45s var(--ease);padding-block:6px}
.nav a.nl::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .55s var(--ease)}
.nav a.nl:hover::after{transform:scaleX(1);transform-origin:left}
.nav .btn{padding:15px 26px;font-size:10.5px}

/* scrolled / solid state */
.hdr.is-solid{background:rgba(251,248,241,.94);backdrop-filter:blur(14px);border-color:var(--line-soft)}
.hdr.is-solid .brand b{color:var(--forest-800)}
.hdr.is-solid .brand span{color:var(--ink-soft)}
.hdr.is-solid .nav a.nl{color:var(--ink)}
.hdr.is-solid .btn--onphoto{border-color:var(--line);color:var(--forest-800)}
.hdr.is-solid .btn--onphoto:hover{background:var(--forest-800);border-color:var(--forest-800);color:var(--cream)}
.hdr.is-solid .burger span{background:var(--forest-800)}
/* pages that start on a light ground */
.hdr.is-light .brand b,.hdr.is-light .nav a.nl{color:var(--forest-800)}
.hdr.is-light .brand span{color:var(--ink-soft)}
.hdr.is-light .btn--onphoto{border-color:var(--line);color:var(--forest-800)}
.hdr.is-light .burger span{background:var(--forest-800)}

.burger{display:none;width:30px;height:20px;position:relative;flex:none;z-index:130}
.burger span{position:absolute;left:0;width:100%;height:1.5px;background:#fff;transition:.45s var(--ease)}
.burger span:nth-child(1){top:2px}
.burger span:nth-child(2){top:9.5px}
.burger span:nth-child(3){top:17px}
body.menu-open .burger span{background:var(--cream)}
body.menu-open .burger span:nth-child(1){top:9.5px;transform:rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){top:9.5px;transform:rotate(-45deg)}

.drawer{position:fixed;inset:0;z-index:115;background:var(--forest-800);
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:110px var(--gut) 60px;
  /* Six items at clamp(...,42px) overflow a short handset in landscape, so the
     panel scrolls rather than clipping the CTA off the bottom. */
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .5s var(--ease),transform .6s var(--ease),visibility .5s}
/* Below ~640px tall, centring wastes space and pushes the CTA out of reach. */
@media (max-height:640px){
  .drawer{justify-content:flex-start;padding-top:96px}
  .drawer a:not(.btn){font-size:clamp(22px,5vw,30px);padding-block:7px}
  .drawer .btn{margin-top:24px}
}
body.menu-open .drawer{opacity:1;visibility:visible;transform:none}
/* :not(.btn) is load-bearing. The CTA at the bottom of the drawer is also an
   <a>, so a bare `.drawer a` selector (0,1,1) outranks `.btn--fill-cream`
   (0,1,0) and repaints its text cream — cream text on a cream button, i.e.
   an apparently blank button. Keep the nav-link styling off the CTA. */
.drawer a:not(.btn){font-family:var(--display);font-weight:800;font-size:clamp(28px,6.6vw,42px);color:var(--cream);
  padding-block:10px;border-bottom:1px solid var(--line-dark);letter-spacing:-.02em}
.drawer a:not(.btn):last-of-type{border-bottom:0}
.drawer .btn{margin-top:34px;align-self:flex-start;flex:none;
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.14em;padding:18px 32px}
/* Restated so the button can never inherit the drawer's link colour. */
.drawer .btn--fill-cream{color:var(--forest-800)}
.drawer .btn--fill-cream:hover,.drawer .btn--fill-cream:focus-visible{color:var(--cream)}
body.menu-open{overflow:hidden}

/* ============================================================
   HERO
   ============================================================ */
/* padding-top reserves the fixed header's strip, so the centred content is
   centred in the *visible* area rather than in the whole viewport. It also
   fixes the overflow case: .hero__in taller than min-height used to overflow
   a centred flex item equally top and bottom, pushing the top of the hero
   copy up behind the menu bar. With the padding the hero simply grows instead
   — min-height is a floor, not a cap — and the content can never ride up
   under the header no matter how tall it gets. */
.hero{position:relative;min-height:min(100svh,940px);display:flex;align-items:flex-end;
  padding-top:var(--hdr-h);overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);
  animation:kenburns 26s var(--ease) forwards}
@keyframes kenburns{from{transform:scale(1.11)}to{transform:scale(1.005)}}
.hero__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(12,32,31,.56) 0%,rgba(12,32,31,.18) 34%,
    rgba(12,32,31,.42) 72%,rgba(12,32,31,.82) 100%)}
.hero__in{width:100%;padding-block:clamp(64px,9vw,116px)}
.hero__loc{display:flex;align-items:center;gap:14px;margin:0 0 24px;
  font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.hero__loc::before{content:"";width:40px;height:1px;background:currentColor;opacity:.6}
.hero h1{color:#fff;text-shadow:0 2px 40px rgba(12,32,31,.4);max-width:16ch}
.hero p{margin:28px 0 0;max-width:50ch;font-size:clamp(16.5px,1.35vw,19.5px);line-height:1.7;
  color:rgba(255,255,255,.9);text-wrap:pretty}
.hero .btnrow{margin-top:42px}

/* centred hero — title, two CTAs, stats over the photograph */
.hero--center{align-items:center;text-align:center}
.hero--center .hero__in{display:flex;flex-direction:column;align-items:center}
/* margin-top was 26px to clear the badge that used to sit above the title.
   The badge is gone, so the title leads and .hero__in's padding sets the
   spacing — a stray 26px here would just push the centred block off-centre. */
.hero--center h1{max-width:20ch;margin:0}
.hero--center p{margin-inline:auto;max-width:58ch;text-wrap:balance}
.hero--center .btnrow{justify-content:center}
.hstats{display:flex;flex-wrap:wrap;justify-content:center;
  margin:clamp(46px,5.6vw,74px) 0 0;padding-top:clamp(30px,3.4vw,42px);
  border-top:1px solid rgba(255,255,255,.22);width:min(100%,800px)}
.hstats__c{flex:1 1 190px;padding:0 clamp(14px,2.2vw,30px);
  border-left:1px solid rgba(255,255,255,.2)}
.hstats__c:first-child{border-left:0}
.hstats__c b{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(20px,2.4vw,31px);line-height:1.08;color:#fff;letter-spacing:-.02em}
.hstats__c span{display:block;margin-top:11px;font-size:9.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.68)}

/* stat strip */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats__in{display:grid;grid-template-columns:repeat(3,1fr)}
.stats__c{padding:clamp(30px,4vw,52px) clamp(10px,2vw,28px);text-align:center;
  border-left:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:center}
.stats__c:first-child{border-left:0}
.stats__c b{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(26px,3.4vw,42px);line-height:1.06;color:var(--forest-800);letter-spacing:-.02em}
/* the middle cell carries a place-name rather than a number */
.stats__c--wide b{font-size:clamp(21px,2.4vw,31px)}
.stats__c span{display:block;margin-top:14px;font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft)}

/* ============================================================
   PROPERTY BLOCKS
   ============================================================ */
.props{display:grid;gap:clamp(70px,9vw,130px);margin-top:clamp(52px,6vw,86px)}
.prop{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(36px,5vw,76px);align-items:center}
.prop--flip .prop__media{order:2}
.prop__media{position:relative;overflow:hidden;background:var(--cream-3);aspect-ratio:4/3}
.prop__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.5s var(--ease)}
.prop:hover .prop__media img{transform:scale(1.045)}
.prop__loc{margin:0 0 18px;font-size:10.5px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--tan-700)}
.prop__tag{margin:20px 0 0;font-family:var(--serif);font-size:clamp(18px,1.7vw,22px);
  font-style:italic;line-height:1.45;color:var(--pine-600);letter-spacing:-.01em}
.spec{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:30px 0 0;padding:20px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.spec span{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.spec span+span::before{content:"·";margin:0 16px;color:var(--tan-600);font-weight:400}
.spec .tbd{color:var(--pine-500);font-weight:500}
/* icon variant: no middot separators, an icon in front of each figure */
.spec--ico{gap:clamp(18px,2.2vw,30px)}
.spec--ico span{display:inline-flex;align-items:center;gap:9px}
.spec--ico span+span::before{content:none;margin:0}
.spec--ico .ico{width:16px;height:16px;color:var(--pine-600)}
.hl{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:15px}
.hl li{display:grid;grid-template-columns:16px 1fr;gap:15px;align-items:baseline;
  font-size:16px;line-height:1.55;color:var(--ink-soft)}
.hl li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tan-500);
  transform:translateY(-2px)}
/* tick-marked variant for the property cards */
.hl--check li{grid-template-columns:19px 1fr;gap:13px;align-items:start}
.hl--check li::before{display:none}
.hl--check .ico{width:19px;height:19px;color:var(--tan-600);transform:translateY(1px)}

/* ============================================================
   HOME CARDS — the two properties as premium boxes (homepage)
   .prop above is the side-by-side layout still used for the
   "other home" block on the two property pages.
   ============================================================ */
.hgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.2vw,30px);
  margin-top:clamp(46px,5.4vw,72px)}
.hcard{display:flex;flex-direction:column;background:#fff;
  border:1px solid rgba(31,35,30,.07);border-radius:var(--r-card);overflow:hidden;
  box-shadow:var(--sh-md);
  transition:box-shadow .55s var(--ease),transform .55s var(--ease)}
.hcard:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}
.hcard__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--cream-3)}
.hcard__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.7s var(--ease)}
.hcard:hover .hcard__media img{transform:scale(1.055)}
.hcard__loc{position:absolute;left:14px;bottom:14px;margin:0;padding:10px 17px;
  border-radius:999px;background:rgba(12,32,31,.62);backdrop-filter:blur(7px);
  font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.94)}
.hcard__body{display:flex;flex-direction:column;flex:1;
  padding:clamp(28px,2.7vw,38px) clamp(24px,2.4vw,34px) clamp(26px,2.5vw,34px)}
.hcard__body h3{font-size:clamp(27px,2.6vw,36px);line-height:1.04;letter-spacing:-.024em}
.hcard__tag{margin:15px 0 0;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(17px,1.5vw,20.5px);line-height:1.4;color:var(--pine-600)}
.hcard .spec{margin-top:clamp(22px,2.2vw,28px)}
.hcard .hl{margin-top:clamp(22px,2.2vw,26px)}
/* the line where a competitor would print a nightly rate.
   We carry the setting instead — this brand shows no pricing. */
.hcard__where{display:flex;align-items:center;gap:10px;margin:18px 0 0;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tan-700)}
.hcard__where .ico{width:14px;height:14px}
/* Long-stay note. Quiet, not a badge — it is an aside, and shouting it would
   compete with the CTA directly beneath. margin-top:auto moves the flex
   spacer up to this element so the note and the button stay together at the
   bottom of the card regardless of how many feature lines a home has;
   .hcard__cta then only needs its own padding. */
.hcard__longstay{margin:auto 0 0;padding-top:22px;
  font-size:13px;line-height:1.5;color:var(--ink-soft)}
.hcard__cta{padding-top:clamp(18px,2vw,24px)}
.hcard__cta .btn{width:100%}
.hcard__foot{display:flex;align-items:center;gap:clamp(16px,1.8vw,22px);
  padding:clamp(20px,2vw,26px) clamp(24px,2.4vw,34px);
  border-top:1px solid var(--line-soft);background:var(--cream-2)}
.hcard__map{width:clamp(74px,7vw,94px);flex:none;border-radius:10px;
  border:1px solid var(--line);background:#F0EBE0}
.hcard__area b{display:block;font-family:var(--sans);font-size:10px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--forest-800)}
.hcard__area p{margin:9px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-soft);max-width:32ch}
.hcard__area .tlink{margin-top:13px;font-size:10px;letter-spacing:.17em;padding-bottom:4px}

/* approximate-area map card */
.areacard{display:flex;align-items:center;gap:clamp(20px,2.6vw,34px);flex-wrap:wrap;
  margin-top:clamp(28px,3vw,40px);padding-top:clamp(28px,3vw,38px);border-top:1px solid var(--line)}
.areacard__map{width:clamp(150px,17vw,200px);flex:none;border:1px solid var(--line);border-radius:10px;background:#F0EBE0}
.areacard__txt h4{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--forest-800);margin:0 0 8px}
.areacard__txt p{margin:0 0 16px;font-size:14.5px;line-height:1.6;color:var(--ink-soft);max-width:34ch}

/* ============================================================
   DIRECT-BOOKING BLOCKS
   ============================================================ */
.four{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.5vw,20px);
  margin-top:clamp(48px,6vw,78px)}
/* three-up variant — a class so the breakpoints can still collapse it */
.four--3{grid-template-columns:repeat(3,1fr)}
.four__c{background:var(--forest-700);border:1px solid rgba(251,248,241,.09);
  border-radius:var(--r-card);text-align:center;
  padding:clamp(32px,3.4vw,44px) clamp(22px,2.4vw,30px) clamp(34px,3.6vw,44px);
  transition:background-color .5s var(--ease),transform .5s var(--ease)}
.four__c:hover{background:#1E5350;transform:translateY(-4px)}
.four__n{display:block;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.1em;
  color:var(--tan-500);margin-bottom:26px}
/* icon-led variant */
.four__i{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 26px;
  border:1px solid rgba(209,139,79,.4);border-radius:50%;color:var(--tan-500);
  transition:background-color .55s var(--ease),color .55s var(--ease),border-color .55s var(--ease)}
.four__i .ico{width:22px;height:22px}
.four__c:hover .four__i{background:var(--tan-600);border-color:var(--tan-600);color:#fff}
.four__c h3{font-size:clamp(19px,1.8vw,23px);line-height:1.24;letter-spacing:-.012em}
.band-forest .four__c h3{color:var(--tan-500)}
.four__c p{margin:14px 0 0;font-size:15px;line-height:1.65;color:rgba(251,248,241,.7);text-wrap:pretty}

/* ============================================================
   FULL-BLEED BREAK
   ============================================================ */
.break{position:relative;min-height:min(78svh,700px);display:grid;place-items:center;
  overflow:hidden;isolation:isolate;text-align:center;padding:var(--sec) var(--gut)}
.break__media{position:absolute;inset:-12% 0;z-index:-2;will-change:transform}
.break__media img{width:100%;height:100%;object-fit:cover}
.break::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(12,32,31,.5),rgba(12,32,31,.34) 50%,rgba(12,32,31,.58))}
.break h2{color:#fff;text-shadow:0 2px 40px rgba(12,32,31,.35)}
.break p{margin:22px auto 0;font-family:var(--serif);font-style:italic;
  font-size:clamp(19px,2.2vw,28px);line-height:1.4;color:rgba(255,255,255,.86);max-width:22ch}

/* ============================================================
   THE AREA — four editorial plates
   ============================================================ */
.plates{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(48px,6vw,78px)}
.plate{position:relative;aspect-ratio:3/4.1;overflow:hidden;background:var(--forest-800);border-radius:var(--r-card);
  display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(24px,2.4vw,32px);
  isolation:isolate}
.plate svg.art,.plate img.art{position:absolute;inset:0;width:100%;height:100%;z-index:-1;
  object-fit:cover;transition:transform 2s var(--ease),opacity .8s}
.plate:hover svg.art,.plate:hover img.art{transform:scale(1.07)}
/* keeps the title legible where the line art runs behind it */
.plate::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,transparent 34%,rgba(12,32,31,.5) 68%,rgba(12,32,31,.86) 100%)}
.plate__eb{margin:0 0 12px;font-weight:700;font-size:9.5px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--tan-500)}
.plate h3{color:var(--cream);font-size:clamp(22px,2.1vw,29px);line-height:1.08;letter-spacing:-.018em}
.plate p{margin:14px 0 0;font-size:14.5px;line-height:1.6;color:rgba(251,248,241,.72);text-wrap:pretty}

/* ============================================================
   EXPLORE — filters + numbered entries
   ============================================================ */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(40px,4.6vw,58px);
  padding-bottom:clamp(28px,3vw,40px);border-bottom:1px solid var(--line)}
.filters button{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);padding:11px 20px;border:1px solid var(--line);border-radius:999px;
  transition:.4s var(--ease)}
.filters button:hover{border-color:var(--pine-500);color:var(--forest-800)}
.filters button[aria-pressed="true"]{background:var(--forest-800);border-color:var(--forest-800);color:var(--cream)}

/* ============================================================
   THE LOCATION — copy + icon list beside a photograph
   ============================================================ */
.amenico{list-style:none;margin:clamp(34px,4vw,46px) 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,20px) clamp(22px,2.6vw,40px)}
.amenico li{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:center;
  font-size:15.5px;line-height:1.4;color:var(--ink)}
.amenico .ico{width:34px;height:34px;padding:7px;color:var(--pine-600);
  border:1px solid var(--line);border-radius:50%;box-sizing:border-box}

/* ============================================================
   TABS — underlined category row (homepage Explore)
   ============================================================ */
.tabs{display:flex;gap:clamp(20px,2.6vw,40px);overflow-x:auto;scrollbar-width:none;
  margin-top:clamp(40px,4.6vw,58px);border-bottom:1px solid var(--line)}
.tabs::-webkit-scrollbar{display:none}
.tabs button{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  padding:0 0 17px;margin-bottom:-1px;border-bottom:2px solid transparent;
  font-size:11.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-soft);transition:color .4s var(--ease),border-color .4s var(--ease)}
.tabs button .ico{width:16px;height:16px}
.tabs button:hover{color:var(--forest-800)}
.tabs button[aria-pressed="true"]{color:var(--forest-800);border-bottom-color:var(--tan-600)}

/* ---- place cards: a grid of boxes, one box per place ---- */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.9vw,26px);
  margin-top:clamp(38px,4.4vw,56px)}
.pcard{display:flex;flex-direction:column;background:#fff;
  border:1px solid rgba(31,35,30,.07);border-radius:var(--r-card);overflow:hidden;
  box-shadow:var(--sh-sm);
  transition:box-shadow .55s var(--ease),transform .55s var(--ease)}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.pcard.is-hidden{display:none}
.band-cream2 .pcard{background:#fff}

.pcard__art{position:relative;aspect-ratio:16/10;overflow:hidden;isolation:isolate;
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:16px 18px;background:var(--forest-800)}
.pcard__art svg,.pcard__art img{position:absolute;inset:0;width:100%;height:100%;z-index:-1;
  object-fit:cover;transition:transform 1.9s var(--ease)}
.pcard:hover .pcard__art svg,.pcard:hover .pcard__art img{transform:scale(1.08)}
/* The index number and category sat legibly on the old drawn gradient; over a
   photograph they need their own scrim. Same technique as .plate::after, and
   it paints above the image because both sit at z-index:-1 and this comes
   later in paint order. */
.pcard__art::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,32,31,.10) 0%,rgba(12,32,31,.06) 45%,rgba(12,32,31,.68) 100%)}
.pcard__n{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.1em;color:var(--tan-500)}
.pcard__cat{font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(251,248,241,.7)}
/* tonal grounds — one per category, all in the forest family */
.art-water {background:linear-gradient(158deg,#205552,#0F2A29)}
.art-woods {background:linear-gradient(158deg,#1F4F4C,#0F2A29)}
.art-trail {background:linear-gradient(158deg,#245854,#10302E)}
.art-town  {background:linear-gradient(158deg,#1D4B48,#10302E)}
.art-winter{background:linear-gradient(158deg,#1B4C4E,#0D2524)}
.art-food  {background:linear-gradient(158deg,#3B3226,#141109)}
.art-sport {background:linear-gradient(158deg,#204F49,#0F2A29)}
.art-zip   {background:linear-gradient(158deg,#1D4A46,#0F2A29)}

.pcard__body{padding:clamp(22px,2.2vw,28px) clamp(20px,2vw,26px) clamp(20px,2vw,24px);
  display:flex;flex-direction:column;flex:1}
.pcard__meta{margin:0 0 14px;font-size:9.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--pine-500)}
.pcard h3{font-size:clamp(21px,1.85vw,25px);line-height:1.16;letter-spacing:-.016em}
.pcard__hook{margin:13px 0 0;font-family:var(--serif);font-style:italic;
  font-size:clamp(16px,1.35vw,18.5px);line-height:1.4;color:var(--tan-700)}
.pcard__txt{margin:13px 0 0;font-size:15px;line-height:1.66;color:var(--ink-soft);text-wrap:pretty}
.pcard__foot{margin-top:auto;padding:15px clamp(20px,2vw,26px);border-top:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.pcard__foot span{font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pine-600)}
.pcard__foot .season{color:var(--tan-700)}

/* ---- small place boxes ("Things Near Here") ---- */
.nearbox{list-style:none;margin:clamp(26px,3vw,36px) 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.1vw,14px)}
.nearbox li{border:1px solid rgba(31,35,30,.08);border-radius:var(--r-btn);padding:18px 20px;background:#fff;box-shadow:var(--sh-sm);
  transition:border-color .5s var(--ease),transform .5s var(--ease)}
.nearbox li:hover{border-color:rgba(31,35,30,.3);transform:translateY(-2px)}
.nearbox b{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(17px,1.5vw,20px);line-height:1.2;color:var(--forest-800);letter-spacing:-.012em}
.nearbox span{display:block;margin-top:9px;font-size:9px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--pine-500)}

/* ============================================================
   TWO AREAS
   ============================================================ */
.areas{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border-block:1px solid var(--line)}
.area{background:var(--cream);padding:clamp(40px,5.4vw,84px) clamp(28px,3.6vw,60px)}
.area__eb{margin:0 0 20px;font-size:10.5px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--tan-700)}
.area h3{font-size:clamp(26px,3vw,40px);line-height:1.08;letter-spacing:-.022em}
.area p{margin:22px 0 0;color:var(--ink-soft);max-width:42ch;text-wrap:pretty}
.area .tlink{margin-top:34px}
.area__facts{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.area__facts li{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pine-600);border:1px solid var(--line);padding:9px 15px;border-radius:999px}

/* ============================================================
   STORY
   ============================================================ */
.story{max-width:44ch;margin-top:clamp(34px,4vw,48px)}
.story p{margin:0 0 26px;font-size:clamp(17.5px,1.5vw,20px);line-height:1.74;color:var(--ink);text-wrap:pretty}
.story p:last-of-type{margin-bottom:0}
.story .role{margin:12px 0 0;font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--pine-500)}
/* .sign is no longer used on the homepage: the client asked for every line of
   the About copy at one size and style, so the closing line is now a plain
   .story p. Kept in case a future page wants the serif pull-quote treatment. */
.story .sign{margin-top:40px;font-family:var(--serif);font-style:italic;
  font-size:clamp(20px,2vw,26px);color:var(--forest-800)}

/* Signature block — Judd's portrait beside the byline.
   A small circle rather than a second rectangular photo: the .storygrid figure
   alongside is already a large image, and two competing rectangles read as a
   layout mistake. The circle reads as an attribution, which is what it is. */
.story__sig{display:flex;align-items:center;gap:16px;
  margin-top:clamp(34px,4vw,44px);padding-top:clamp(24px,3vw,30px);
  border-top:1px solid var(--line)}
.story__face{width:62px;height:62px;flex:none;border-radius:50%;
  /* The source headshot is 4:5 with the face high in the frame; it is already
     cropped square on disk, so object-fit only guards against a future
     replacement of a different shape. */
  object-fit:cover;object-position:50% 20%;
  background:var(--cream-3);box-shadow:var(--sh-sm)}
/* Beats `.story .role{margin:12px 0 0}` — inside the flex row the byline is
   vertically centred against the portrait and needs no top margin. */
.story__sig .role{margin:0}
.storygrid{display:grid;grid-template-columns:1fr .82fr;gap:clamp(40px,6vw,90px);align-items:center}
/* map + nearby list variant. Must be a class, not an inline style — the mobile
   breakpoint has to be able to collapse it to one column. */
.storygrid--map{grid-template-columns:.9fr 1.1fr;align-items:start}
.storygrid figure{margin:0;overflow:hidden;aspect-ratio:4/5;background:var(--cream-3);border-radius:var(--r-img);box-shadow:var(--sh-md)}
.storygrid figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.storygrid figure:hover img{transform:scale(1.05)}

/* ============================================================
   COLLAGE
   ============================================================ */
.collage{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.3vw,20px);
  margin-top:clamp(48px,6vw,80px)}
.cl{overflow:hidden;background:var(--cream-3);border-radius:var(--r-img)}
.cl img{width:100%;height:100%;object-fit:cover;transition:transform 1.8s var(--ease)}
.cl:hover img{transform:scale(1.06)}
.cl--a{grid-column:span 7;aspect-ratio:3/2}
.cl--b{grid-column:span 5;aspect-ratio:4/5}
.cl--c{grid-column:span 4;aspect-ratio:1/1}
.cl--d{grid-column:span 8;aspect-ratio:16/9}
.cl--e{grid-column:span 5;aspect-ratio:3/2}
.cl--f{grid-column:span 7;aspect-ratio:16/10}
.cl--g{grid-column:span 6;aspect-ratio:3/2}
.cl--h{grid-column:span 6;aspect-ratio:3/2}

/* ============================================================
   REVIEWS
   ============================================================ */
.rev{position:relative;text-align:center;max-width:78ch;margin-inline:auto;
  padding-block:clamp(30px,5vw,60px);min-height:clamp(280px,30vw,380px)}
.rev__stars{font-size:15px;letter-spacing:.42em;color:var(--tan-600);margin-bottom:30px}
.rev q{display:block;quotes:none;font-family:var(--serif);font-weight:300;
  font-size:clamp(23px,3.2vw,42px);line-height:1.26;letter-spacing:-.02em;color:var(--forest-800);
  text-wrap:balance}
.rev cite{display:block;margin-top:34px;font-family:var(--sans);font-style:normal;
  font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--pine-500)}
.rev__slide{transition:opacity .55s var(--ease),transform .55s var(--ease)}
.rev__slide.is-out{opacity:0;transform:translateY(10px)}
.revnav{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:clamp(30px,4vw,48px)}
.revnav button{width:52px;height:52px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;transition:.4s var(--ease);color:var(--forest-800)}
.revnav button:hover{background:var(--forest-800);border-color:var(--forest-800);color:var(--cream)}
.revnav__i{font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--ink-soft);min-width:52px}

/* ============================================================
   FINAL CTA
   ============================================================ */
.finale{position:relative;min-height:min(94svh,880px);display:grid;place-items:center;text-align:center;
  overflow:hidden;isolation:isolate;padding:var(--sec) var(--gut)}
.finale__media{position:absolute;inset:-10% 0;z-index:-2;will-change:transform}
.finale__media img{width:100%;height:100%;object-fit:cover}
.finale::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(12,32,31,.62),rgba(12,32,31,.44) 45%,rgba(12,32,31,.74))}
.finale__eb{margin:0 0 22px;font-size:11px;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(255,255,255,.8)}
.finale h2{color:#fff;text-shadow:0 2px 40px rgba(12,32,31,.35)}
.finale__homes{display:flex;justify-content:center;flex-wrap:wrap;gap:0;margin:clamp(40px,5vw,64px) 0 0}
.finale__h{padding:0 clamp(24px,4vw,54px);border-left:1px solid rgba(255,255,255,.24)}
.finale__h:first-child{border-left:0}
.finale__h b{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(21px,2.2vw,29px);color:#fff;letter-spacing:-.015em}
.finale__h span{display:block;margin-top:10px;font-size:10px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(255,255,255,.66)}

/* ============================================================
   FOOTER
   ============================================================ */
.ft{background:var(--forest-900);color:rgba(251,248,241,.68);
  padding:clamp(58px,7vw,96px) 0 34px}
.ft__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:clamp(32px,4.4vw,64px)}
.ft__brand b{display:block;font-family:var(--sans);font-weight:600;font-size:16px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cream)}
.ft__brand span{display:block;margin-top:9px;font-size:9.5px;font-weight:500;letter-spacing:.26em;
  text-transform:uppercase;color:var(--tan-500)}
.ft__blurb{margin:26px 0 0;max-width:38ch;font-size:15px;line-height:1.7}
.ft h5{margin:0 0 22px;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--tan-500)}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:14px;font-size:15px}
.ft ul a:hover{color:var(--cream)}
.ft__legal{margin-top:clamp(46px,6vw,78px);padding-top:26px;border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;font-size:12.5px;
  color:rgba(251,248,241,.42)}
/* Copyright + build credit read as one signature, split by a hairline, so the
   pair stays together when .ft__legal wraps rather than the credit drifting
   off on its own next to "Redhaven · Lakeview Stay". */
.ft__sig{display:flex;align-items:center;flex-wrap:wrap;gap:18px}
.ft__by{display:inline-flex;align-items:center;gap:8px;padding-left:18px;
  border-left:1px solid var(--line-dark);color:inherit;transition:color .3s var(--ease)}
.ft__by b{font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(251,248,241,.74);transition:color .3s var(--ease)}
.ft__by .ar{font-size:1.15em;line-height:1;transition:transform .4s var(--ease)}
.ft__by:hover,.ft__by:hover b{color:var(--cream)}
.ft__by:hover .ar{transform:translate(2px,-2px)}
/* Once the two stack, the vertical rule is pointing at nothing. */
@media (max-width:620px){
  .ft__sig{gap:12px}
  .ft__by{padding-left:0;border-left:0}
}

/* ============================================================
   PROPERTY PAGES
   ============================================================ */
.pintro{padding:clamp(120px,13vw,180px) 0 clamp(34px,4vw,50px)}
.pintro__loc{margin:0 0 22px;font-size:11px;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--tan-700)}
.pintro__tag{margin:24px 0 0;font-family:var(--serif);font-style:italic;
  font-size:clamp(19px,2.1vw,27px);color:var(--pine-600);line-height:1.4}
.pintro__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
  margin-top:clamp(34px,4vw,48px);padding-top:clamp(26px,3vw,34px);border-top:1px solid var(--line)}

/* NOTE: the old 21/9 `.phero` card that used to live here was removed. The
   property hero is now the full-bleed scrimmed block defined under "SINGLE
   PLACE PAGE" below. Both rules used the same name, so `aspect-ratio:21/9`
   survived the later declaration and fought its min-height on every screen. */

.gal{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1.1vw,14px);
  margin-top:clamp(10px,1.2vw,14px)}
.gal button{overflow:hidden;background:var(--cream-3);aspect-ratio:3/2;grid-column:span 2;padding:0;border-radius:10px;
  border:0;display:block}
.gal button:nth-child(1),.gal button:nth-child(2){grid-column:span 3}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.gal button:hover img{transform:scale(1.05)}

.amen{list-style:none;margin:clamp(30px,3.6vw,44px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(24px,3vw,48px)}
.amen li{padding:15px 0;border-bottom:1px solid var(--line-soft);font-size:15.5px;color:var(--ink-soft);
  display:grid;grid-template-columns:14px 1fr;gap:14px;align-items:baseline}
.amen li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--tan-500);transform:translateY(-2px)}
.amen li.tbd{color:var(--pine-500);font-style:italic}
.amen li.tbd::before{background:var(--cream-3)}

.cta-strip{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;border-radius:var(--r-card);
  padding:clamp(34px,4.4vw,58px) clamp(28px,3.6vw,58px);background:var(--forest-800);color:var(--cream)}
.cta-strip h3{color:var(--cream)}
.cta-strip p{margin:12px 0 0;color:rgba(251,248,241,.72);max-width:46ch;font-size:15.5px}

/* lightbox */
.lbx{position:fixed;inset:0;z-index:200;background:rgba(10,26,25,.96);display:grid;place-items:center;
  padding:clamp(16px,4vw,56px);opacity:0;visibility:hidden;transition:.4s var(--ease)}
.lbx.is-open{opacity:1;visibility:visible}
.lbx img{max-width:100%;max-height:86svh;object-fit:contain}
.lbx__close{position:absolute;top:18px;right:18px;width:48px;height:48px;color:var(--cream);
  border:1px solid var(--line-dark);border-radius:50%;display:grid;place-items:center}
.lbx__close:hover{background:var(--cream);color:var(--forest-900)}
.lbx__nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;color:var(--cream);
  border:1px solid var(--line-dark);border-radius:50%;display:grid;place-items:center}
.lbx__nav:hover{background:var(--cream);color:var(--forest-900)}
.lbx__prev{left:clamp(10px,2.4vw,30px)}
.lbx__next{right:clamp(10px,2.4vw,30px)}
.lbx__count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  font-size:10.5px;font-weight:600;letter-spacing:.22em;color:rgba(251,248,241,.6)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity 1.05s var(--ease),transform 1.05s var(--ease);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .four,.four--3{grid-template-columns:1fr 1fr}
  .plates{grid-template-columns:1fr 1fr}
  .amen{grid-template-columns:1fr 1fr}
  .ft__grid{grid-template-columns:1fr 1fr}
  .pgrid{grid-template-columns:1fr 1fr}
}
/* the secondary header button is the first thing to go when the bar gets tight */
@media (max-width:1200px){
  .nav__extra{display:none}
}
@media (max-width:820px){
  .amenico{grid-template-columns:1fr}
}
@media (max-width:900px){
  .nav a.nl{display:none}
  .nav .btn{display:none}
  .burger{display:block}
  .prop,.prop--flip .prop__media{grid-template-columns:1fr;order:0}
  .prop__media{aspect-ratio:16/11}
  .hgrid{grid-template-columns:1fr}
  .hcard__media{aspect-ratio:16/10}
  .storygrid,.storygrid--map{grid-template-columns:1fr}
  .storygrid figure{aspect-ratio:16/11}
  .areas{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(4,1fr)}
  .gal button:nth-child(1),.gal button:nth-child(2){grid-column:span 4}
  .cta-strip{grid-template-columns:1fr}
}
@media (max-width:680px){
  body{font-size:16.5px}
  .stats__in{grid-template-columns:1fr}
  .stats__c{border-left:0;border-top:1px solid var(--line);padding-block:26px}
  .stats__c:first-child{border-top:0}
  .four,.four--3{grid-template-columns:1fr}
  .plates{grid-template-columns:1fr}
  .plate{aspect-ratio:4/3.2}
  .pgrid{grid-template-columns:1fr}
  .nearbox{grid-template-columns:1fr}
  .amen{grid-template-columns:1fr}
  .ft__grid{grid-template-columns:1fr}
  .collage>*{grid-column:span 12 !important;aspect-ratio:3/2 !important}
  .collage .cl--b{aspect-ratio:4/5 !important}
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal button{grid-column:span 1}
  .gal button:nth-child(1),.gal button:nth-child(2){grid-column:span 2}
  .finale__h{border-left:0;padding:18px 0}
  .areacard__map{width:150px}
  .btn{padding:17px 26px}
  .hero{min-height:88svh}
  .hstats{padding-top:26px;margin-top:38px}
  .hstats__c{flex:1 1 100%;border-left:0;padding:13px 0}
  .hstats__c+.hstats__c{border-top:1px solid rgba(255,255,255,.18)}
  .tabs{gap:22px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .rv{opacity:1;transform:none}
  .hero__media img{animation:none;transform:none}
}
@media print{
  .hdr,.drawer,.lbx,.revnav{display:none}
  body{background:#fff}
}

/* ============================================================
   SINGLE PLACE PAGE
   Reuses the site's existing tokens: #15393A forest, #D18B4F tan,
   #F0EBE0 cream, #DBD3C3 hairline. No new palette.
   ============================================================ */

/* --- Hero --------------------------------------------------- */
.phero{position:relative;min-height:clamp(380px,52vh,560px);display:flex;align-items:flex-end;overflow:hidden}
.phero__media{position:absolute;inset:0}
.phero__media img{width:100%;height:100%;object-fit:cover;display:block}
.phero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,32,30,.55) 0%,rgba(10,32,30,.28) 42%,rgba(10,32,30,.78) 100%)}
.phero__in{position:relative;padding-block:44px 46px;color:#fff}
.phero__back{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;margin-bottom:20px;border:1px solid rgba(255,255,255,.42);border-radius:999px;background:rgba(10,32,30,.34);color:#fff;text-decoration:none;font:600 13px/1 Inter,system-ui,sans-serif;letter-spacing:.04em;transition:background .18s ease,transform .18s ease}
.phero__back:hover{background:rgba(10,32,30,.6);transform:translateY(-2px)}
.phero__in .h-xl{color:#fff;margin:0}
.phero__tag{margin:12px 0 0;font:400 italic 20px/1.5 Fraunces,Georgia,serif;color:rgba(255,255,255,.9);max-width:52ch}

/* --- Stat strip --------------------------------------------- */
.pstats{background:#15393A}
/* Separators come from a 1px grid gap showing the row's background through,
   not from per-cell borders. With `auto-fit` the cells wrap onto a variable
   number of rows, so `border-right + :last-child` left a dangling rule at the
   end of every row but the last, and no rule at all between stacked rows. */
.pstats__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:1px;background:rgba(240,235,224,.14)}
.pstats__c{background:#15393A;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:22px 14px;text-align:center;min-width:0}
.pstats__c b{overflow-wrap:anywhere}
@media (max-width:420px){
  .pstats__row{grid-template-columns:repeat(auto-fit,minmax(108px,1fr))}
  .pstats__c{padding:17px 9px}
}
.pstats__c .ico{width:20px;height:20px;stroke:#D18B4F;margin-bottom:2px}
.pstats__c b{font:700 17px/1.2 Archivo,system-ui,sans-serif;color:#fff;letter-spacing:-.01em}
.pstats__c b.tbd{color:rgba(255,255,255,.5);font-style:italic}
.pstats__c span{font:600 11px/1.2 Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:rgba(240,235,224,.62)}

/* --- Two column layout --------------------------------------
   Named .pdetail, NOT .pgrid. `.pgrid` already means "the Explore grid of
   place cards" further up this file; when this block also called itself
   .pgrid it won on source order and silently reshaped the homepage Explore
   section into `1fr 380px`. Two different layouts must not share a name. */
.pdetail{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:44px;align-items:start}
/* Grid tracks default to min-width:auto, so a wide child (the thumbnail rail,
   a long unbroken word) can push the track past the viewport. Pin both to 0. */
.pdetail>*{min-width:0}
.pmain{min-width:0}
@media (max-width:960px){.pdetail{grid-template-columns:1fr;gap:34px}}

/* The detail page's section wrapper. Referenced by [slug].astro; without it
   the section collapsed to zero vertical padding. */
.sec--alt{background:var(--cream);padding-block:clamp(44px,6vw,84px)}

/* --- Gallery ------------------------------------------------ */
.pgal{min-width:0}
.pgal__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.pgal__top .eyebrow{margin:0;min-width:0}
.pgal__nav{display:flex;gap:8px;flex:none}
.pgal__btn{width:44px;height:44px;border-radius:999px;border:1px solid #DBD3C3;background:#fff;color:#15393A;font-size:19px;line-height:1;cursor:pointer;transition:transform .18s ease,border-color .18s ease}
.pgal__btn:hover{transform:translateY(-2px);border-color:#D18B4F}
.pgal__btn:focus-visible{outline:2px solid #D18B4F;outline-offset:2px}
.pgal__stage{position:relative;border-radius:12px;overflow:hidden;background:#E6DFD1;aspect-ratio:3/2}
.pgal__stage img{width:100%;height:100%;object-fit:cover;display:block}
.pgal__count{position:absolute;right:14px;bottom:14px;padding:5px 11px;border-radius:6px;background:rgba(10,32,30,.72);color:#fff;font:600 12px/1 Inter,system-ui,sans-serif}
/* min-width:0 keeps the rail from widening its grid track: a flex row of N
   fixed-width thumbs reports a large min-content width, and a `1fr` track
   honours that unless told otherwise — which is what pushed the whole
   two-column layout wider than the viewport on a phone. */
.pgal__thumbs{display:flex;gap:9px;margin-top:11px;min-width:0;
  overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;padding-bottom:5px;scroll-snap-type:x proximity}
.pgal__thumb{flex:0 0 96px;height:66px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:none;cursor:pointer;transition:border-color .18s ease;scroll-snap-align:start}
.pgal__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pgal__thumb.is-on{border-color:#D18B4F}
.pgal__thumb:focus-visible{outline:2px solid #D18B4F;outline-offset:2px}
@media (max-width:560px){
  .pgal__stage{aspect-ratio:4/3;border-radius:10px}
  .pgal__thumb{flex:0 0 74px;height:52px}
}

/* --- Tabs --------------------------------------------------- */
.ptabs{margin-top:36px;min-width:0}
/* Three tabs at 15px plus gaps just clear a 360px viewport; a fourth, or a
   longer label from the CMS, would not. Let the row scroll instead of
   wrapping into a broken second line over the border. */
.ptabs__row{display:flex;gap:26px;border-bottom:1px solid #DBD3C3;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ptabs__row::-webkit-scrollbar{display:none}
.ptab{padding:0 0 13px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;cursor:pointer;font:600 15px/1 Inter,system-ui,sans-serif;color:#5A6B5C;white-space:nowrap;flex:none;transition:color .18s ease,border-color .18s ease}
.ptab:focus-visible{outline:2px solid #D18B4F;outline-offset:3px}
.ptab:hover{color:#15393A}
.ptab.is-on{color:#15393A;border-bottom-color:#D18B4F}
.ptabs__panel{display:none;padding-top:24px}
.ptabs__panel.is-on{display:block}
.ptabs__loc{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:600 14px/1.4 Inter,system-ui,sans-serif;color:#5A6B5C}
.ptabs__loc .ico{width:17px;height:17px;stroke:#D18B4F}
.pamen{columns:2;column-gap:30px}
@media (max-width:560px){.pamen{columns:1}}

/* --- Booking panel ------------------------------------------ */
.pbook{position:sticky;top:104px}
@media (max-width:960px){.pbook{position:static}}
.pbook__card{border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 12px 28px rgba(18,36,27,.09)}
.pbook__head{padding:20px 22px;background:#15393A;color:#fff}
.pbook__head b{display:block;font:700 19px/1.3 Archivo,system-ui,sans-serif;letter-spacing:-.01em}
.pbook__head span{display:block;margin-top:5px;font:400 13px/1.5 Inter,system-ui,sans-serif;color:rgba(240,235,224,.72)}
.pbook__body{padding:22px}
.pbook__body iframe{width:100%;min-height:640px;border:0;display:block}
.pbook__note{margin:14px 0 0;font:400 13px/1.55 Inter,system-ui,sans-serif;color:#5A6B5C}
/* Long-stay note under the booking card. Centred to match .pbook__foot below
   it, and given the card's own horizontal rhythm so it reads as part of the
   panel rather than as loose text on the page background. */
.pbook__longstay{margin:16px 0 0;text-align:center;
  font:400 13.5px/1.55 Inter,system-ui,sans-serif;color:var(--ink-soft)}
.pbook__foot{margin:14px 0 0;text-align:center;font:400 13px/1.5 Inter,system-ui,sans-serif;color:#5A6B5C}

/* --- No-JS fallback booking form ----------------------------
   Kept as the <noscript>/degraded path; the live flow is .bkg below. */
.bookform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.bookform label{display:flex;flex-direction:column;gap:6px;min-width:0;font:600 11px/1.2 Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#5A6B5C}
.bookform .bookform--wide{grid-column:1/-1}
/* `min-width:0` + `width:100%` are what actually fix the overflow. A grid item
   floors at its min-content width, and <input type="date"> reports a large one
   (it has to fit "mm/dd/yyyy" plus the picker glyph), so the field refused to
   shrink and pushed the panel past the screen edge on a phone.
   16px, not 15px: iOS Safari force-zooms the page on focusing any smaller field. */
.bookform input{width:100%;min-width:0;padding:12px 13px;border:1px solid #DBD3C3;border-radius:8px;background:#fff;font:400 16px/1.4 Inter,system-ui,sans-serif;color:#15393A;-webkit-appearance:none;appearance:none}
.bookform input:focus{outline:2px solid #D18B4F;outline-offset:1px;border-color:#D18B4F}
.bookform .btn{grid-column:1/-1;justify-content:center;margin-top:4px}
/* Single column, unconditionally. The old `@media (max-width:420px)` could
   never have worked: this form always lives inside the 380px booking panel,
   so its usable width is ~336px at EVERY viewport size, and a viewport media
   query cannot see that. Two date fields need ~300px plus the gap. The
   container query below restores two columns only if the panel is ever
   widened, which is the condition that actually matters. */
.pbook__body{container-type:inline-size}
.bookform{grid-template-columns:1fr}
@container (min-width:430px){
  .bookform{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================================================
   BOOKING PANEL  (.bkg)
   Lives inside .pbook__card, which is 380px on desktop and full-width on a
   phone — so every measurement here is relative and the calendar is sized in
   fractions of its container, never in viewport units.
   ============================================================ */
.bkg{min-width:0}
/* `hidden` must actually hide.
   The UA stylesheet's [hidden]{display:none} is a *low-specificity* rule, so
   any author rule that sets `display` beats it — `.bkg__pay{display:grid}`
   below did exactly that, leaving two empty payment boxes on screen before a
   quote existed. Anything inside the panel that toggles via the `hidden`
   attribute needs this. */
.bkg [hidden]{display:none !important}
.bkg__calhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.bkg__callabel{font:600 13.5px/1 Inter,system-ui,sans-serif;color:#15393A;letter-spacing:.02em}
.bkg__nav{width:36px;height:36px;flex:none;border:1px solid #DBD3C3;border-radius:999px;background:#fff;
  color:#15393A;font-size:17px;line-height:1;display:grid;place-items:center;
  transition:border-color .18s ease,background .18s ease}
.bkg__nav:hover:not(:disabled){border-color:#D18B4F}
.bkg__nav:disabled{opacity:.35;cursor:default}
.bkg__nav:focus-visible{outline:2px solid #D18B4F;outline-offset:2px}

.bkg__grids{display:grid;gap:18px}
/* The second month only appears if the panel is ever given real width. At the
   current 380px it stays hidden and the guest pages with the arrows. */
.bkg__month--second{display:none}
@container (min-width:620px){
  .bkg__grids{grid-template-columns:1fr 1fr;gap:22px}
  .bkg__month--second{display:block}
}
.bkg__mlabel{margin:0 0 8px;font:600 11px/1 Inter,system-ui,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:#5A6B5C;text-align:center}
.bkg__dow,.bkg__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.bkg__dow{margin-bottom:4px}
.bkg__dow span{font:600 9.5px/1 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  color:#9AA39B;text-align:center;padding-bottom:4px}
.bkg__pad{aspect-ratio:1}

/* aspect-ratio keeps the cells square at any container width, so the grid
   scales smoothly from a 335px phone panel to a wider desktop one without
   any breakpoint. */
.bkg__day{aspect-ratio:1;min-height:34px;width:100%;padding:0;border:0;border-radius:7px;
  background:transparent;color:#1F231E;
  font:500 13px/1 Inter,system-ui,sans-serif;
  display:grid;place-items:center;cursor:pointer;
  transition:background-color .15s ease,color .15s ease}
.bkg__day:hover:not(:disabled){background:#F0EBE0}
.bkg__day:focus-visible{outline:2px solid #D18B4F;outline-offset:-2px}
.bkg__day:disabled{cursor:default;color:#C4C9C3}
/* Booked nights get a strike so the state survives being read without colour. */
.bkg__day.is-blocked{color:#C4C9C3;text-decoration:line-through;background:#F7F5F0}
.bkg__day.is-past{color:#D2D6D1}
.bkg__day.is-start,.bkg__day.is-end{background:#15393A;color:#fff;font-weight:600}
.bkg__day.is-between{background:#E4EDE9;color:#15393A;border-radius:0}
.bkg__day.is-start{border-radius:7px 0 0 7px}
.bkg__day.is-end{border-radius:0 7px 7px 0}

.bkg__loading{margin:0;padding:24px 0;text-align:center;font:400 13px/1.5 Inter,system-ui,sans-serif;color:#5A6B5C}
.bkg__legend{display:flex;gap:16px;justify-content:center;margin:12px 0 0;
  font:500 10.5px/1 Inter,system-ui,sans-serif;letter-spacing:.06em;color:#8A908A}
.bkg__legend span{display:inline-flex;align-items:center;gap:6px}
.bkg__key{width:10px;height:10px;border-radius:3px;display:block}
.bkg__key--free{background:#F0EBE0;border:1px solid #DBD3C3}
.bkg__key--busy{background:#F7F5F0;border:1px solid #DBD3C3;position:relative}
.bkg__key--busy::after{content:"";position:absolute;inset:4px 1px auto;height:1px;background:#C4C9C3}

/* --- Selection summary --- */
.bkg__sel{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid #E9E0D0;
  font:400 14px/1.45 Inter,system-ui,sans-serif;color:#15393A}
.bkg__sel b{font-weight:600}
.bkg__arrow{color:#D18B4F;margin:0 4px}
.bkg__nights{display:block;margin-top:3px;font:500 11px/1 Inter,system-ui,sans-serif;
  letter-spacing:.1em;text-transform:uppercase;color:#8A908A}
.bkg__hint{color:#8A908A;font-style:italic}
.bkg__clear{font:600 10.5px/1 Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:#9E5626;border-bottom:1px solid rgba(158,86,38,.35);padding-bottom:3px;background:none;border-width:0 0 1px}

/* --- Fields --- */
.bkg__field{display:block;margin-top:14px}
.bkg__field>span{display:block;margin-bottom:6px;font:600 10.5px/1.2 Inter,system-ui,sans-serif;
  letter-spacing:.12em;text-transform:uppercase;color:#5A6B5C}
.bkg__field>span i{font-style:normal;text-transform:none;letter-spacing:0;color:#9AA39B}
.bkg__field--inline{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bkg__field--inline>span{margin:0}
.bkg__field--inline .bkg__input{width:88px;flex:none;text-align:center}
/* 16px minimum: anything smaller makes iOS Safari zoom the page on focus,
   which on this panel scrolls the calendar out of view mid-booking. */
.bkg__input{width:100%;min-width:0;padding:11px 13px;border:1px solid #DBD3C3;border-radius:8px;
  background:#fff;font:400 16px/1.4 Inter,system-ui,sans-serif;color:#15393A;
  -webkit-appearance:none;appearance:none}
.bkg__input:focus{outline:2px solid #D18B4F;outline-offset:1px;border-color:#D18B4F}
.bkg__input.is-bad{border-color:#B4432B;background:#FDF6F4}
textarea.bkg__input{resize:vertical;min-height:74px}
.bkg__err{display:block;margin-top:5px;font:400 12px/1.4 Inter,system-ui,sans-serif;color:#B4432B;font-style:normal}

/* Honeypot: off-canvas rather than display:none, which bots skip. */
.bkg__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- Quote breakdown --- */
.bkg__quote{margin-top:16px;padding-top:14px;border-top:1px solid #E9E0D0}
.bkg__line{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:5px 0;
  font:400 14px/1.5 Inter,system-ui,sans-serif;color:#5A6B5C}
.bkg__line span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.bkg__line--total{margin-top:8px;padding-top:11px;border-top:1px solid #E9E0D0;
  font-weight:700;font-size:16px;color:#15393A}

/* --- Deposit vs full --- */
.bkg__pay{display:grid;gap:8px;margin-top:16px}
.bkg__payopt{display:block;position:relative;cursor:pointer}
.bkg__payopt input{position:absolute;opacity:0;width:0;height:0}
.bkg__paybox{display:block;padding:12px 14px;border:1px solid #DBD3C3;border-radius:9px;background:#fff;
  transition:border-color .18s ease,background .18s ease}
.bkg__paybox b{display:block;font:700 16px/1.2 Archivo,system-ui,sans-serif;color:#15393A}
.bkg__paybox span{display:block;margin-top:4px;font:400 12px/1.45 Inter,system-ui,sans-serif;color:#5A6B5C}
.bkg__payopt input:checked+.bkg__paybox{border-color:#D18B4F;background:#FDF8F2;box-shadow:inset 0 0 0 1px #D18B4F}
.bkg__payopt input:focus-visible+.bkg__paybox{outline:2px solid #D18B4F;outline-offset:2px}

/* --- Messages --- */
.bkg__msg{margin:12px 0 0;font:400 13px/1.5 Inter,system-ui,sans-serif;color:#5A6B5C}
.bkg__msg--error{color:#B4432B}
.bkg__msg--info{color:#5A6B5C}

.bkg__steplabel{margin:20px 0 0;padding-top:16px;border-top:1px solid #E9E0D0;
  font:600 10.5px/1 Inter,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#5A6B5C}
.bkg__submit{width:100%;justify-content:center;margin-top:16px}
.bkg__submit:disabled{opacity:.6;cursor:default;transform:none}
.bkg__fineprint{margin:11px 0 0;font:400 11.5px/1.5 Inter,system-ui,sans-serif;color:#8A908A;text-align:center}

/* Very narrow phones: reclaim horizontal space so cells stay tappable. */
@media (max-width:380px){
  .pbook__body{padding:16px}
  .bkg__day{min-height:31px;font-size:12.5px}
  .bkg__legend{gap:12px}
}

/* ============================================================
   BOOKING STATUS PAGE
   ============================================================ */
.bstat{max-width:640px;margin-inline:auto}
.bstat__badge{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:999px;
  font:600 10.5px/1 Inter,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.bstat__badge--ok{background:#E4EDE9;color:#1C4A48}
.bstat__badge--wait{background:#FBF0E2;color:#9E5626}
.bstat__badge--off{background:#F2F1EE;color:#5B6159}
.bstat__ref{margin:18px 0 0;font:700 26px/1.2 Archivo,system-ui,sans-serif;color:#15393A;letter-spacing:-.01em}
.bstat__card{margin-top:26px;background:#fff;border:1px solid rgba(31,35,30,.08);border-radius:14px;
  padding:clamp(20px,3vw,30px);box-shadow:var(--sh-sm)}
.bstat__row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:10px 0;
  font:400 14.5px/1.5 Inter,system-ui,sans-serif;color:#5A6B5C;border-bottom:1px solid var(--line-soft)}
.bstat__row:last-child{border-bottom:0}
.bstat__row b{color:#1F231E;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.bstat__row--total{border-top:1px solid var(--line);border-bottom:0;margin-top:6px;padding-top:14px;
  font-size:16px;color:#15393A}
.bstat__note{margin:22px 0 0;padding:16px 18px;background:var(--cream-2);border-radius:10px;
  font:400 14px/1.6 Inter,system-ui,sans-serif;color:#5A6B5C}

/* --- Card links: image + title both go to the detail page ---- */
.hcard__imglink{display:block;width:100%;height:100%}
.hcard__imglink img{display:block;width:100%;height:100%;object-fit:cover}
.hcard__titlelink{color:inherit;text-decoration:none;transition:color .18s ease}
.hcard__titlelink:hover{color:#D18B4F}
.hcard__titlelink:focus-visible{outline:2px solid #D18B4F;outline-offset:3px;border-radius:3px}