/* ==========================================================================
   Chasing Sunsets — shared stylesheet
   Palette sampled from the logo. Type: Cormorant Garamond + Jost.
   ========================================================================== */

:root{
  --cream:#FEF9EE;
  --cream-deep:#F7EEDF;
  --teal:#0A4243;
  --teal-soft:#065859;
  --teal-line:rgba(10,66,67,.16);
  --coral:#DE5A3C;
  --coral-dark:#C24A2E;
  --sun:#FDC383;
  --ink:#0A4243;
  --muted:rgba(10,66,67,.76);        /* 5.41:1 on cream — was .66 (4.12, failed AA) */
  --eyebrow:#296F6E;                 /* 5.57:1 */

  /* sunset arc — --accent is decorative only, --accent-ink is for text and buttons */
  --accent:var(--coral);
  --accent-ink:#C24A2E;
  --accent-rgb:222,90,60;

  --serif:"Cormorant Garamond","Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:"Jost",ui-sans-serif,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;

  --gutter:clamp(20px,5vw,56px);
  --maxw:1180px;
  --section:clamp(60px,9vh,116px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

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

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* --------------------------------------------- the sunset arc, suite by suite
   Afterglow  the last warm flush after the sun goes
   Amber Haze the light thickening
   Golden Ray the final gold
   First Star dusk, and the first star out
   Every --accent-ink clears 4.5:1 on both cream tones and carries white at >= 5.2:1. */

.u-afterglow { --accent:#DE5A3C; --accent-ink:#B8442A; --accent-rgb:222,90,60; }
.u-amber-haze{ --accent:#E39B3A; --accent-ink:#96600F; --accent-rgb:227,155,58; }
.u-golden-ray{ --accent:#EFC059; --accent-ink:#775E0E; --accent-rgb:239,192,89; }
.u-first-star{ --accent:#6B7FB8; --accent-ink:#354573; --accent-rgb:107,127,184; }

/* the fifth way to rent — all four suites at once, so it carries the whole arc */
.u-compound{
  --accent:#DE5A3C; --accent-ink:#0A4243; --accent-rgb:10,66,67;
  --arc:linear-gradient(90deg,#DE5A3C 0%,#E39B3A 34%,#EFC059 67%,#6B7FB8 100%);
}
.u-compound .meta{border-top-color:transparent;position:relative}
.u-compound .meta::before{
  content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--arc);
}

/* --------------------------------------------------------- type */

h1,h2,h3{
  font-family:var(--serif);
  font-weight:300;
  margin:0;
  line-height:1.08;
  letter-spacing:.004em;
}
h1{font-size:clamp(2.6rem,7vw,4.6rem)}
h2{font-size:clamp(2rem,4.6vw,3.2rem)}
h3{font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.2}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.eyebrow{
  font-size:11px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--eyebrow);
  margin:0 0 14px;
  font-weight:400;
}
.lede{
  font-size:clamp(1.05rem,1.9vw,1.24rem);
  line-height:1.72;
  color:var(--muted);
  max-width:56ch;
}
.muted{color:var(--muted)}

/* ornamental rule */
.rule{display:flex;align-items:center;gap:13px;width:190px;margin:26px 0}
.rule span{flex:1;height:1px;background:var(--teal-line)}
.rule i{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.rule.center{margin-inline:auto}

/* --------------------------------------------------------- header */

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(254,249,238,.86);
  backdrop-filter:saturate(1.3) blur(12px);
  -webkit-backdrop-filter:saturate(1.3) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease;
  padding-top:env(safe-area-inset-top,0px);
}
.site-header.scrolled{border-bottom-color:var(--teal-line)}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:68px;
}
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand img{width:clamp(94px,13vw,146px);height:auto}

.nav{display:flex;align-items:center;gap:clamp(16px,2.4vw,30px)}
.nav a{
  text-decoration:none;
  font-size:12px;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--teal-soft);
  padding:6px 0;
  position:relative;
  white-space:nowrap;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .3s ease;
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
@media (max-width:860px){ .nav a.nav-hide-sm{display:none} }

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

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-size:12.5px;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;
  padding:15px 30px;border-radius:2px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease;
}
.btn-primary{background:var(--accent-ink);color:#fff}
.btn-primary:hover{filter:brightness(.9)}
.btn-ghost{border-color:var(--teal-line);color:var(--teal)}
.btn-ghost:hover{border-color:var(--teal);background:rgba(10,66,67,.04)}
.btn-onimage{border-color:rgba(255,255,255,.6);color:#fff}
.btn-onimage:hover{background:rgba(255,255,255,.14);border-color:#fff}

/* inert placeholder button — reads as "not live yet", not as a broken button */
.btn[data-placeholder]{
  background:transparent;
  color:var(--accent-ink);
  border:1px dashed rgba(var(--accent-rgb),.6);
  cursor:default;
  pointer-events:none;
}
.band .btn[data-placeholder]{
  color:rgba(254,249,238,.88);
  border-color:rgba(254,249,238,.45);
}

/* --------------------------------------------------------- hero */

.hero{position:relative;min-height:clamp(460px,82svh,760px);display:flex;align-items:flex-end;overflow:hidden}
.hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(10,66,67,.34) 0%,rgba(10,66,67,.06) 34%,rgba(10,66,67,.55) 100%),
    linear-gradient(180deg,rgba(222,90,60,0) 55%,rgba(180,60,35,.22) 100%);
}
.hero .wrap{position:relative;z-index:2;padding-block:clamp(44px,8vh,86px);color:#fff}
.hero h1{color:#fff;text-shadow:0 2px 30px rgba(10,40,40,.3)}
.hero .lede{color:rgba(255,255,255,.88);text-shadow:0 1px 18px rgba(10,40,40,.34)}
.hero .eyebrow{color:rgba(255,255,255,.82)}
.hero .rule span{background:rgba(255,255,255,.4)}
.hero .rule i{background:var(--accent)}
.hero .eyebrow{color:rgba(255,255,255,.88)}

/* on a suite page the scrim warms toward that suite's colour */
body[class*="u-"] .hero::after{
  background:
    linear-gradient(180deg,rgba(10,66,67,.34) 0%,rgba(10,66,67,.06) 32%,rgba(10,50,52,.62) 100%),
    linear-gradient(180deg,rgba(var(--accent-rgb),0) 48%,rgba(var(--accent-rgb),.30) 100%);
}

/* home hero is taller and centred */
.hero-home{min-height:clamp(560px,94svh,900px);align-items:center;text-align:center}
.hero-home .wrap{display:flex;flex-direction:column;align-items:center}
.hero-home .lede{max-width:46ch}
.hero-home::after{
  background:
    linear-gradient(180deg,rgba(10,50,52,.52) 0%,rgba(10,50,52,.30) 42%,rgba(10,50,52,.62) 100%),
    linear-gradient(180deg,rgba(180,60,35,0) 52%,rgba(150,52,30,.30) 100%);
}
.hero-name{
  font-size:clamp(3.1rem,10vw,7rem);
  line-height:.94;
  letter-spacing:.01em;
  margin-bottom:4px;
}
.hero-name em{font-style:italic;color:var(--sun);display:block}

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

.section{padding-block:var(--section)}
.section-tight{padding-block:clamp(44px,6vh,76px)}
.section-deep{background:var(--cream-deep)}

.section-head{max-width:60ch}
.section-head.center{margin-inline:auto;text-align:center}
.section-head.center .rule{margin-inline:auto}
.section-head h2 + .lede{margin-top:20px}

/* two-column feature */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.split.reverse .split-media{order:2}
@media (max-width:820px){
  .split{grid-template-columns:1fr;gap:28px}
  .split.reverse .split-media{order:0}
}
.split-media{overflow:hidden;border-radius:3px}
.split-media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}

/* three-up feature list */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);margin-top:48px}
@media (max-width:760px){.features{grid-template-columns:1fr;gap:34px}}
.feature{border-top:1px solid var(--teal-line);padding-top:20px}
.feature h3{font-size:1.3rem;margin-bottom:8px}
.feature p{font-size:.95rem;color:var(--muted);margin:0}

/* --------------------------------------------------------- unit grid */

.units{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3.4vw,44px);margin-top:52px}
.units-wide{grid-template-columns:1fr;margin-top:clamp(24px,3.4vw,44px)}
.unit-card-wide .shot img{aspect-ratio:21/8}
.unit-card-wide .meta h3{font-size:clamp(1.65rem,3.4vw,2.5rem)}
.unit-card-wide p{max-width:62ch}
@media (max-width:760px){.unit-card-wide .shot img{aspect-ratio:4/3.1}}
@media (max-width:760px){.units{grid-template-columns:1fr}}

.unit-card{text-decoration:none;display:block;group:card}
.unit-card .shot{overflow:hidden;border-radius:3px;background:var(--cream-deep)}
.unit-card img{width:100%;height:auto;aspect-ratio:4/3.1;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.unit-card .shot img.px{transition:transform .7s cubic-bezier(.2,.8,.3,1)}

.unit-card .meta{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-top:16px;border-top:2px solid var(--accent);padding-top:14px}
.unit-card h3{font-size:clamp(1.5rem,2.6vw,1.95rem)}
.unit-card .sleeps{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.unit-card p{margin:8px 0 0;color:var(--muted);font-size:.97rem;max-width:44ch}
.unit-card .more{
  display:inline-block;margin-top:14px;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-ink);
  border-bottom:1px solid rgba(var(--accent-rgb),.4);padding-bottom:3px;
}
.unit-card:hover .more{border-bottom-color:var(--accent-ink)}

/* --------------------------------------------------------- whole compound band */

.band{background:var(--teal);color:var(--cream);padding-block:clamp(56px,8vh,104px)}
.band h2{color:var(--cream)}
.band .eyebrow{color:rgba(253,195,131,.9)}
.band .lede{color:rgba(254,249,238,.76)}
.band .rule span{background:rgba(254,249,238,.28)}
.band .rule i{background:var(--sun)}
.band .btn-ghost{border-color:rgba(254,249,238,.4);color:var(--cream)}
.band .btn-ghost:hover{border-color:var(--cream);background:rgba(254,249,238,.08)}

/* a short spec list under a section paragraph */
.specs{list-style:none;margin:24px 0 0;padding:0}
.specs li{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:12px 0;border-top:1px solid var(--teal-line);font-size:.95rem;
}
.specs li:last-child{border-bottom:1px solid var(--teal-line)}
.specs .k{color:var(--ink)}
.specs .v{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:420px){
  .specs li{flex-direction:column;gap:2px}
  .specs .v{white-space:normal}
}

/* --------------------------------------------------------- facts row */

.facts{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,3vw,40px);
  border-top:1px solid var(--teal-line);border-bottom:1px solid var(--teal-line);
  padding-block:30px;margin-block:clamp(38px,6vh,60px);
}
@media (max-width:700px){.facts{grid-template-columns:repeat(2,1fr);gap:26px}}
.fact .k{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.fact .v{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.15}

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

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px);margin-top:40px}
@media (max-width:760px){.gallery{grid-template-columns:repeat(2,1fr)}}
.gallery figure{overflow:hidden;border-radius:2px}
.gallery img{width:100%;height:auto;object-fit:cover;aspect-ratio:1/1}
.gallery .tall{grid-row:span 2}
.gallery .tall img{aspect-ratio:1/2.08}
.gallery .wide{grid-column:span 2}
.gallery .wide img{aspect-ratio:2.08/1}
@media (max-width:760px){
  .gallery .tall{grid-row:span 1}
  .gallery .tall img{aspect-ratio:1/1}
}

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

.amenities{columns:3;column-gap:clamp(24px,4vw,56px);margin:0;padding:0;list-style:none}
@media (max-width:820px){.amenities{columns:2}}
@media (max-width:520px){.amenities{columns:1}}
.amenities li{
  break-inside:avoid;padding:11px 0 11px 22px;position:relative;
  border-bottom:1px solid var(--teal-line);font-size:.96rem;color:var(--muted);
}
.amenities li::before{
  content:"";position:absolute;left:0;top:19px;
  width:5px;height:5px;border-radius:50%;background:var(--accent);
}

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

.booking{
  border:1px solid var(--teal-line);border-radius:3px;
  padding:clamp(28px,4vw,44px);
  background:var(--cream);
  display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;
}
@media (max-width:760px){.booking{grid-template-columns:1fr;text-align:left}}
.booking h3{margin-bottom:8px}
.booking p{margin:0;color:var(--muted);font-size:.95rem;max-width:48ch}
.booking-note{
  display:inline-block;margin-top:14px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-ink);
}

/* --------------------------------------------------------- other units strip */

.others{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(18px,2.6vw,32px);margin-top:40px}
@media (max-width:700px){.others{grid-template-columns:1fr}}
.other{text-decoration:none;display:block}
.other{overflow:hidden}
.other img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:2px}
.other .n{font-family:var(--serif);font-size:1.28rem;line-height:1.2;
  margin-top:14px;border-top:2px solid var(--accent);padding-top:12px}
.other .s{font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);margin-top:5px}

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

.site-footer{background:var(--teal);color:rgba(254,249,238,.78);padding-block:clamp(48px,7vh,80px) 0}
.site-footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,5vw,64px)}
@media (max-width:760px){.site-footer .cols{grid-template-columns:1fr;gap:34px}}
.site-footer h4{
  font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(253,195,131,.88);margin:0 0 16px;
}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:9px}
.site-footer a{text-decoration:none;color:rgba(254,249,238,.78);transition:color .2s ease}
.site-footer a:hover{color:var(--cream)}
.site-footer .blurb{font-size:.95rem;max-width:36ch;color:rgba(254,249,238,.72);line-height:1.7}
.site-footer .blurb .place{
  display:inline-block;margin-top:8px;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(253,195,131,.85);
}
.wordmark{
  font-family:var(--serif);font-size:clamp(1.9rem,3.4vw,2.5rem);
  line-height:1.05;color:var(--cream);margin-bottom:16px;
}
.wordmark em{font-style:italic;color:var(--sun)}
.legal{
  margin-top:clamp(40px,6vh,64px);border-top:1px solid rgba(254,249,238,.14);
  padding-block:22px calc(22px + env(safe-area-inset-bottom,0px));
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;
  font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(254,249,238,.66);   /* 5.60:1 on teal — was .48 (3.71) */
}

/* --------------------------------------------------------- placeholder chrome */

.is-placeholder{outline:1px dashed rgba(var(--accent-rgb),.4);outline-offset:-4px}

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

.reveal{
  opacity:0;transform:translateY(18px);
  transition:opacity .85s cubic-bezier(.2,.8,.3,1),transform .85s cubic-bezier(.2,.8,.3,1);
}
.reveal.in{opacity:1;transform:none}
.units .reveal{transition-delay:calc(var(--i,0) * 90ms)}

/* parallax — the image drifts inside a clipped box as the box crosses the viewport.
   --py is written by script; --sc gives it room to move without showing an edge. */
.px{
  transform:translate3d(0,var(--py,0),0) scale(var(--sc,1.06));
  transition:transform .12s linear;
}
.hero > img.px{--sc:1.14;transition:none}
.unit-card:hover .shot img.px{--sc:1.12}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .unit-card img{transition:none}
  .px{transform:none !important}
}

/* --------------------------------------------------------- homepage slideshow
   Frames are stacked in the hero and cross-fade. Parallax still applies to each
   frame (they share the hero box). Reduced motion: no autoplay, instant swaps. */
.hero-slides > img.slide{opacity:0;transition:opacity 1.6s ease}
.hero-slides > img.slide.is-on{opacity:1}
.slide-ui{
  position:absolute;left:0;right:0;bottom:clamp(14px,3vh,30px);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;
}
.slide-ui > *{pointer-events:auto}
.hero .slide-cap{margin:0;color:rgba(255,255,255,.86);text-shadow:0 1px 12px rgba(10,40,40,.5)}
.slide-ctrl{display:flex;align-items:center;gap:6px}
.slide-dots{display:flex}
.slide-dots .dot,.slide-toggle{
  width:30px;height:30px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;border-radius:50%;
}
.slide-dots .dot::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.5);transition:background .3s,transform .3s;
}
.slide-dots .dot:hover::before{background:rgba(255,255,255,.85)}
.slide-dots .dot[aria-current="true"]::before{background:var(--sun);transform:scale(1.35)}
.slide-toggle span{
  width:9px;height:10px;display:block;
  border-left:3px solid rgba(255,255,255,.75);border-right:3px solid rgba(255,255,255,.75);
}
.slide-toggle[aria-pressed="true"] span{
  width:0;height:0;border-right:0;
  border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid rgba(255,255,255,.85);
  margin-left:3px;
}
.slide-dots .dot:focus-visible,.slide-toggle:focus-visible{outline:2px solid #fff;outline-offset:1px}
@media (prefers-reduced-motion: reduce){ .hero-slides > img.slide{transition:none} }
/* framing for one slide: anchor to the right and bottom so the cover crop keeps
   the compound and pool in frame. The zoom stays vertically centred so the
   parallax never exposes an edge (zoom 1.09 = 4.5% room each side, parallax 4%). */
.hero-slides > img.slide-br{object-position:100% 100%;transform-origin:100% 50%;--sc:1.09}
@media (max-width:760px){.hero-slides > img.slide-br{object-position:90% 100%;transform-origin:90% 50%}}

/* --------------------------------------------------------- Book (nav + page) */
.nav a.nav-book{
  color:var(--accent-ink);border:1px solid var(--accent-ink);border-radius:2px;
  padding:9px 18px;transition:background-color .25s ease,color .25s ease;
}
.nav a.nav-book::after{display:none}
.nav a.nav-book:hover,.nav a.nav-book[aria-current="page"]{background:var(--accent-ink);color:#fff}

.book-top{padding-bottom:clamp(28px,4vw,48px)}
.book-top h1{font-size:clamp(2.4rem,6vw,4.2rem)}
.book-top .booking-note{margin-top:18px}
.glance{margin-top:clamp(36px,5vw,56px);overflow-x:auto}
.glance table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:640px}
.glance th,.glance td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--teal-line);vertical-align:top}
.glance thead th{font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.glance tbody th{font-family:var(--serif);font-weight:400;font-size:1.2rem;white-space:nowrap}
.glance tbody th a{color:var(--teal);text-decoration:none;border-left:3px solid var(--accent);padding-left:12px}
.glance tbody th a:hover{color:var(--accent-ink)}
.glance td{color:var(--muted)}

/* homepage teaser: five small cards in a row */
.others-five{grid-template-columns:repeat(5,1fr)}
@media (max-width:1000px){.others-five{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.others-five{grid-template-columns:repeat(2,1fr)}}

/* --------------------------------------------------------- booking status (2026-11-12) */
.unit-card .shot{position:relative}
.badge{
  position:absolute;top:14px;left:14px;z-index:2;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 11px;border-radius:2px;background:rgba(254,249,238,.92);color:var(--teal);
}
.badge-live{background:var(--accent-ink);color:#fff}
.u-compound .badge-live{background:#C24A2E}
.feature-book{margin-top:clamp(36px,5vw,56px)}
.feature-book .unit-card-wide .shot img{aspect-ratio:21/8}
@media (max-width:760px){.feature-book .unit-card-wide .shot img{aspect-ratio:4/3}}
.feature-book .booking{margin-top:18px}
.feature-book .btn-primary{background:#C24A2E}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:30px}
.hero-ctas .btn-primary{background:#C24A2E}
.glance .st{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.glance .st-live{color:#C24A2E}
/* Hostaway calendar widget slot */
.hw-cal{margin-top:22px;border:1px solid var(--teal-line);border-radius:3px;padding:clamp(20px,3vw,32px);background:#fff}
.hw-cal .eyebrow{margin-bottom:14px}
.hw-cal{display:none}
.hw-cal.is-ready{display:block}
/* on-site booking (2026-11-12): calendar on our page, fallback link only if it fails */
.hw-cal{display:none}
.hw-wrap.is-ready .hw-cal{display:block}
.hw-wrap.is-ready .hw-fallback{display:none}
.hw-note{margin:14px 0 0;font-size:.88rem;color:var(--muted)}
.hw-fallback{margin-top:16px;font-size:.92rem;color:var(--muted)}
.hw-fallback a{color:var(--accent-ink)}
.hero-ctas-left{justify-content:flex-start}
.booking-badge .badge{display:inline-block}
#book{scroll-margin-top:84px}

/* --------------------------------------------------------- whole-compound photo tour */
.tour .section-head{max-width:64ch}
.tour-nav{
  position:sticky;top:68px;z-index:20;display:flex;gap:8px;flex-wrap:wrap;
  margin:30px 0 10px;padding:12px 0;background:var(--cream);
  border-bottom:1px solid var(--teal-line);
}
.tour-nav a{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--teal);
  padding:8px 14px;border:1px solid var(--teal-line);border-radius:999px;background:#fff;
  border-left:4px solid var(--accent);
}
.tour-nav a:hover{border-color:var(--accent-ink);color:var(--accent-ink)}
@media (max-width:640px){.tour-nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.tour-nav a{flex:none}}
.tour-part{padding-top:clamp(36px,5vw,60px);scroll-margin-top:130px}
.tour-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
  border-top:3px solid var(--accent);padding-top:18px;margin-bottom:18px}
.u-compound .tour-head{border-top-color:transparent;border-image:var(--arc) 1}
.tour-head h3{font-size:clamp(1.7rem,3vw,2.3rem);margin:0}
.tour-head p{margin:6px 0 0;color:var(--muted);font-size:.95rem}
.tour-more{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);text-decoration:none;white-space:nowrap}
.tour-sub{font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-ink);margin:26px 0 10px}
.tour-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tour-grid figure{margin:0;position:relative;overflow:hidden;border-radius:2px;background:var(--cream-deep)}
.tour-grid a{display:block;aspect-ratio:3/2;height:100%}
.tour-grid img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.tour-grid a:hover img{transform:scale(1.04)}
.tour-grid .lead{grid-column:span 2;grid-row:span 2}
.tour-grid .lead a{aspect-ratio:auto}
.tour-grid figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 12px 9px;pointer-events:none;
  font-size:.78rem;line-height:1.3;color:#fff;background:linear-gradient(transparent,rgba(6,30,31,.66));
}
@media (max-width:760px){
  .tour-grid{grid-template-columns:repeat(2,1fr)}
  .tour-grid .lead{grid-row:span 1}
  .tour-grid .lead a{aspect-ratio:3/2}
}
/* photo viewer */
.lb{position:fixed;inset:0;z-index:100;background:rgba(6,30,31,.94);display:flex;align-items:center;justify-content:center}
.lb[hidden]{display:none}
.lb figure{margin:0;max-width:min(92vw,1600px);text-align:center}
.lb img{max-width:100%;max-height:82vh;object-fit:contain;display:block;margin:0 auto}
.lb figcaption{color:rgba(255,255,255,.85);font-size:.9rem;margin-top:12px}
.lb button{position:absolute;background:none;border:0;color:#fff;cursor:pointer;font-size:2.6rem;line-height:1;padding:12px 18px}
.lb-x{top:12px;right:12px}
.lb-prev{left:6px;top:50%;transform:translateY(-50%)}
.lb-next{right:6px;top:50%;transform:translateY(-50%)}
.lb button:focus-visible{outline:2px solid #fff}
@media (prefers-reduced-motion: reduce){.tour-grid img{transition:none}}
/* homepage outdoors mosaic: no coloured rule above the grid */
.tour-home .tour-part{padding-top:24px}
/* homepage booking band after the photos */
.book-band .booking{background:#fff}
.book-band .booking .btn-primary{background:#C24A2E}