/* =====================================================================
   SOLSTICE HOUSE — Boutique Hotel & Retreat
   Global stylesheet

   Design direction (deliberately unlike the other two hotel builds in
   this portfolio, which are both light cream + yellow/gold):
     · dark warm "espresso" canvas with clay + sage accents
     · high-contrast display serif over a grotesk UI face
     · monospace index tags [01] and prices
     · hairline rules and 2px corners instead of shadowed rounded cards
     · a booking rail docked into the hero, horizontal snap rails,
       an editorial numbered room index, and a marquee ticker

   01 Tokens & reset          12 Room rail / room index
   02 Typography              13 Amenities & services
   03 Layout helpers          14 Split feature / parallax CTA
   04 Buttons                 15 Testimonials
   05 Forms                   16 Gallery & lightbox
   06 Header & nav            17 Blog
   07 Drawer & search         18 Newsletter & footer
   08 Hero                    19 Page banner
   09 Booking rail            20 Inner page blocks
   10 Marquee                 21 Utilities & motion
   11 Section heads           22 Responsive
   ===================================================================== */

/* ---------- 01 Tokens & reset --------------------------------------- */
:root{
  /* page canvas — white, with two grey tints for sections and inputs */
  --bg:#FFFFFF;
  --bg-2:#F6F7F9;
  --bg-3:#EFF1F5;
  --bg-4:#E5E9EF;

  /* warm off-white, for sections that want to differ from the grey tint */
  --paper:#FBF7F2;
  --paper-2:#F2EBE2;

  --ink:#161B22;          /* headings and strong text */
  --ink-dark:#161B22;
  --body:#5B6675;
  --body-dark:#5B6675;
  --muted:#8892A0;

  --line:rgba(22,27,34,.12);
  --line-2:rgba(22,27,34,.06);
  --line-dark:rgba(22,27,34,.12);

  /* text and hairlines for chrome that sits ON a photo (header over the hero
     or a page banner) — flipped to dark by .hdr--solid / .hdr.is-stuck */
  --hdr-ink:#FFFFFF;
  --hdr-line:rgba(255,255,255,.32);
  --tb-ink:rgba(255,255,255,.84);
  --tb-line:rgba(255,255,255,.15);
  --tb-bg:rgba(16,14,12,.55);

  /* accents — coral is the action colour, sage the quiet second voice */
  --clay:#FD5A5A;
  --clay-2:#FF7B7B;
  --clay-deep:#E03B3B;
  --clay-soft:rgba(253,90,90,.14);
  --sage:#5F7D5D;
  --sand:#E9DFD2;

  /* the booking bar and other light-on-dark panels use a cool slate scale
     rather than the warm page palette */
  --slate-ink:#242A34;
  --slate-body:#414C5B;
  --slate-mute:#8A96A6;
  --slate-line:#E3E7ED;

  /* headings run on the same geometric sans as the hero — the serif was the
     last piece of the old identity and read as a different site */
  --ff-display:'Poppins', 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-poster:'Poppins', 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-ui:'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --container:1280px;
  --gutter:22px;
  --radius:2px;
  --radius-lg:4px;
  --t:.4s cubic-bezier(.22,.61,.36,1);
  --t-fast:.22s cubic-bezier(.4,0,.2,1);
  /* the header is two tiers: a utility strip over the main logo/nav bar.
     --header-h is their combined height and is what every page offset uses. */
  --topbar-h:46px;
  --bar-h:86px;
  --header-h:calc(var(--topbar-h) + var(--bar-h));
  --section:clamp(64px,8vw,120px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:2px}
::selection{background:var(--clay);color:#fff}

/* ---------- 02 Typography ------------------------------------------- */
body{
  font-family:var(--ff-ui);
  font-size:16px;
  line-height:1.72;
  font-weight:300;
  color:var(--body);
  background:var(--bg);
  /* clip (not hidden) so position:sticky keeps working */
  overflow-x:clip;
  min-height:100dvh;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--ff-display);
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--ink);
}
h1{font-size:clamp(2.4rem,5.4vw,3.7rem)}
h2{font-size:clamp(1.8rem,3.2vw,2.6rem)}
h3{font-size:clamp(1.2rem,1.9vw,1.55rem)}
h4{font-size:clamp(1.08rem,1.5vw,1.24rem)}
h5{font-size:1rem}
h6{font-size:.94rem}
p+p{margin-top:1.05em}
.lead{font-size:clamp(1.02rem,1.4vw,1.15rem);line-height:1.8;color:var(--body)}
em,.italic{font-style:italic}

/* mono index tag: [01] Our Rooms */
.tag{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ff-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--clay);
}
.tag::before{content:"";width:26px;height:1px;background:currentColor;opacity:.7;flex:none}
.tag--bare::before{display:none}
.tag--sage{color:var(--sage)}
.tag--center{justify-content:center}

.script{font-family:var(--ff-display);font-style:italic;color:var(--clay)}
.mono{font-family:var(--ff-mono);font-size:.8rem;letter-spacing:.12em}

/* ---------- 03 Layout helpers --------------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--wide{max-width:1560px}
.container--narrow{max-width:880px}
.section{padding:var(--section) 0}
.section--tight{padding:clamp(48px,5vw,76px) 0}
.section--flush-top{padding-top:0}
.bg-2{background:var(--bg-2)}
.bg-3{background:var(--bg-3)}

/* paper (light) sections invert the text colours */
.paper{background:var(--paper);color:var(--body-dark)}
.paper h1,.paper h2,.paper h3,.paper h4,.paper h5,.paper h6{color:var(--ink-dark)}
.paper .lead{color:var(--body-dark)}
.paper .rule{background:var(--line-dark)}

.grid{display:grid;gap:clamp(20px,2.4vw,34px)}
.g-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
/* journal grid is explicitly two-up: the split card needs the width, and
   auto-fit would happily pack four of them across a desktop container */
.posts{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.posts{grid-template-columns:1fr}}
.g-3{grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.rule{height:1px;background:var(--line);border:0;width:100%}
.stack>*+*{margin-top:18px}
.center{text-align:center}
.mt-0{margin-top:0}.mt-1{margin-top:12px}.mt-2{margin-top:22px}.mt-3{margin-top:34px}.mt-4{margin-top:48px}

/* ---------- 04 Buttons ---------------------------------------------- */
.btn{
  --btn-bg:var(--clay);--btn-ink:#fff;--btn-line:var(--clay);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 30px;
  font-family:var(--ff-ui);font-size:.78rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--btn-ink);background:var(--btn-bg);
  border:1px solid var(--btn-line);border-radius:var(--radius);
  cursor:pointer;overflow:hidden;isolation:isolate;
  transition:color var(--t),background var(--t),border-color var(--t);
  -webkit-tap-highlight-color:transparent;
}
/* wipe fill from the bottom on hover */
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--clay-deep);transform:translateY(101%);
  transition:transform var(--t);
}
.btn:hover::after{transform:translateY(0)}
.btn:hover{border-color:var(--clay-deep)}
.btn--ghost{--btn-bg:transparent;--btn-ink:var(--ink);--btn-line:var(--line)}
.btn--ghost::after{background:var(--ink)}
.btn--ghost:hover{color:#fff;border-color:var(--ink)}
/* the ghost button on a photo (hero, CTA) inverts */
.hero .btn--ghost,.cta .btn--ghost,.banner .btn--ghost{--btn-ink:#fff;--btn-line:rgba(255,255,255,.42)}
.hero .btn--ghost::after,.cta .btn--ghost::after,.banner .btn--ghost::after{background:#fff}
.hero .btn--ghost:hover,.cta .btn--ghost:hover,.banner .btn--ghost:hover{color:var(--ink);border-color:#fff}
.btn--ghost-dark{--btn-bg:transparent;--btn-ink:var(--ink-dark);--btn-line:var(--line-dark)}
.btn--ghost-dark::after{background:var(--ink-dark)}
.btn--ghost-dark:hover{color:var(--paper);border-color:var(--ink-dark)}
.btn--light{--btn-bg:var(--sand);--btn-ink:var(--ink-dark);--btn-line:var(--sand)}
.btn--light::after{background:#fff}
.btn--light:hover{color:var(--ink-dark);border-color:#fff}
.btn--sm{min-height:44px;padding:0 22px;font-size:.72rem}
.btn--lg{min-height:60px;padding:0 40px}
/* sentence-case, unletterspaced label - used for the hero call to action */
.btn--plain{
  font-family:var(--ff-poster);font-weight:500;
  font-size:clamp(.9rem,1.05vw,1rem);letter-spacing:.005em;text-transform:none;
  min-height:64px;padding:0 38px;
}
.btn--block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}

/* text link with an animated underline */
.link{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ff-mono);font-size:.75rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);padding-bottom:4px;position:relative;
}
.link::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(1);transform-origin:right;
  transition:transform var(--t);
}
.link:hover{color:var(--clay)}
.link:hover::after{transform:scaleX(0)}
.paper .link{color:var(--ink-dark)}
.link i{transition:transform var(--t)}
.link:hover i{transform:translateX(4px)}

/* ---------- 05 Forms ------------------------------------------------ */
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field>label,.lbl{
  font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
}
.input,.select,.textarea{
  width:100%;min-height:52px;padding:13px 16px;
  background:var(--bg-3);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius);
  font-size:.95rem;font-weight:300;
  transition:border-color var(--t-fast),background var(--t-fast);
  appearance:none;-webkit-appearance:none;
}
.textarea{min-height:150px;resize:vertical;line-height:1.7}
.input::placeholder,.textarea::placeholder{color:var(--muted);opacity:1}
.input:focus,.select:focus,.textarea:focus{outline:0;border-color:var(--clay);background:var(--bg-4)}
.select{
  background-image:linear-gradient(45deg,transparent 50%,var(--body) 50%),
                   linear-gradient(135deg,var(--body) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  padding-right:44px;cursor:pointer;
}
.input[type=date],.input[type=time]{cursor:pointer}
.input[type=date]::-webkit-calendar-picker-indicator,
.input[type=time]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}
/* light-surface variant */
.paper .input,.paper .select,.paper .textarea{background:#fff;border-color:var(--line-dark);color:var(--ink-dark)}
.paper .input:focus,.paper .select:focus,.paper .textarea:focus{background:#fff;border-color:var(--clay)}
.paper .field>label,.paper .lbl{color:var(--body-dark)}
.paper .select{
  background-image:linear-gradient(45deg,transparent 50%,var(--body-dark) 50%),
                   linear-gradient(135deg,var(--body-dark) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.check{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;cursor:pointer}
.check input{
  flex:none;width:20px;height:20px;margin-top:3px;accent-color:var(--clay);cursor:pointer;
}
.form-note{font-size:.82rem;color:var(--muted)}
.form-msg{
  display:none;margin-top:16px;padding:14px 18px;border-radius:var(--radius);
  border:1px solid var(--clay);background:var(--clay-soft);color:var(--ink);font-size:.9rem;
}
.form-msg.is-on{display:block}
.paper .form-msg{color:var(--ink-dark)}

/* ---------- 06 Header & nav ----------------------------------------- */
.hdr{
  position:fixed;inset:0 0 auto;z-index:80;
  transition:background var(--t),border-color var(--t),transform var(--t);
  border-bottom:1px solid transparent;
}
.hdr__bar{
  display:flex;align-items:center;gap:clamp(16px,3vw,44px);
  height:var(--bar-h);
}
.hdr.is-stuck{
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
  --hdr-ink:var(--ink);
  --hdr-line:var(--line);
}
/* once the page has scrolled, the utility strip rolls away and only the
   logo/nav bar stays on screen */
.hdr.is-stuck .topbar{height:0;opacity:0;pointer-events:none}

/* A page with no hero and no banner (404) has nothing dark behind the bar,
   so the white nav text would be stranded on a white page. :has() catches it
   with no flash; main.js adds .hdr--solid as a fallback for older browsers. */
body:not(:has(.hero, .banner)) .hdr,
.hdr--solid{
  background:#fff;border-bottom-color:var(--line);
  --hdr-ink:var(--ink);
  --hdr-line:var(--line);
  --tb-ink:var(--body);
  --tb-line:var(--line);
  --tb-bg:var(--bg-2);
}

/* ---- utility strip -------------------------------------------------- */
.topbar{
  height:var(--topbar-h);overflow:hidden;
  background:var(--tb-bg);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--tb-line);
  transition:height var(--t),opacity var(--t);
}
.topbar__in{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:var(--topbar-h);
}
.topbar__l,.topbar__r{display:flex;align-items:center;min-width:0}
.topbar__l li{
  display:flex;align-items:center;gap:9px;
  padding:0 20px;height:var(--topbar-h);
  border-right:1px solid var(--tb-line);white-space:nowrap;
  font-size:.82rem;color:var(--tb-ink);
}
.topbar__l li:first-child{padding-left:0}
.topbar__l li:last-child{border-right:0}
.topbar__l svg{width:15px;height:15px;flex:none;stroke:var(--clay);fill:none;stroke-width:1.6}
.topbar__l a:hover{color:var(--clay)}
.topbar__r{gap:18px}
.lang{
  display:flex;align-items:center;gap:7px;
  font-size:.82rem;color:var(--tb-ink);cursor:pointer;
}
.lang:hover{color:var(--clay)}
.lang i{width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.topbar__soc{display:flex;align-items:center;gap:16px}
.topbar__soc a{color:var(--tb-ink);transition:color var(--t-fast)}
.topbar__soc a:hover{color:var(--clay)}
.topbar__soc svg{width:15px;height:15px;fill:currentColor}
.hdr.is-hidden{transform:translateY(-100%)}
/* inner pages sit on a solid bar from the start */
.hdr--solid{background:var(--bg);border-bottom-color:var(--line)}

/* wordmark: outline mark + two-tone name, set on one line */
.brand{
  display:flex;align-items:center;gap:12px;line-height:1;flex:none;margin-right:auto;
}
.brand__mark{width:38px;height:38px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5}
.brand{color:var(--hdr-ink)}
.brand b{
  font-family:var(--ff-poster);font-weight:700;
  font-size:clamp(1.35rem,2.2vw,1.72rem);letter-spacing:-.01em;color:currentColor;
}
/* the drawer and footer wordmarks sit on light panels, not on a photo */
.drawer .brand,.foot .brand{color:var(--ink)}
.brand b i{color:var(--clay);font-style:normal}

.nav{display:flex;align-items:center;gap:clamp(14px,1.9vw,28px)}
.nav>li{position:relative}
.nav>li>a{
  display:flex;align-items:center;gap:6px;height:var(--bar-h);
  font-family:var(--ff-poster);
  font-size:.95rem;font-weight:500;letter-spacing:0;text-transform:none;
  color:var(--hdr-ink);opacity:.9;transition:opacity var(--t-fast),color var(--t-fast);
  white-space:nowrap;
}
.nav>li>a:hover,.nav>li.is-active>a{opacity:1;color:var(--clay)}
.nav .caret{width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform var(--t-fast)}
.nav>li:hover .caret{transform:rotate(45deg) translateY(1px)}

.drop{
  position:absolute;top:calc(100% - 12px);left:-18px;min-width:224px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:10px;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity var(--t),transform var(--t),visibility var(--t);
  box-shadow:0 26px 56px -28px rgba(22,27,34,.32);
}
.nav>li:hover>.drop,.nav>li:focus-within>.drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop a{
  display:block;padding:10px 14px;font-size:.86rem;color:var(--body);
  border-radius:var(--radius);transition:color var(--t-fast),background var(--t-fast),padding-left var(--t-fast);
}
.drop a:hover{color:var(--ink);background:var(--bg-4);padding-left:20px}

.hdr__act{display:flex;align-items:center;gap:12px;flex:none}
.icon-btn{
  width:44px;height:44px;display:grid;place-items:center;
  border:1px solid var(--hdr-line);border-radius:var(--radius);color:var(--hdr-ink);
  transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast);
}
.icon-btn:hover{border-color:var(--clay);color:var(--clay)}
.icon-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.5}
/* circular header controls, with the cart carrying a count badge */
.icon-btn--round{width:48px;height:48px;border-radius:50%;position:relative}
.icon-btn--round:hover{background:var(--clay);border-color:var(--clay);color:#fff}
.icon-btn__count{
  position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;
  display:grid;place-items:center;border-radius:999px;
  background:var(--clay);color:#fff;
  font-family:var(--ff-mono);font-size:.62rem;line-height:1;
}
.icon-btn--round:hover .icon-btn__count{background:var(--bg);color:var(--clay)}

/* the bars are a column flex line: align-items centres them across the button,
   justify-content down it. place-items was setting align-items + justify-ITEMS,
   and justify-items does nothing in flexbox — so the bars sat at the top. */
.burger{
  width:44px;height:44px;display:none;gap:5px;
  flex-direction:column;align-items:center;justify-content:center;
  border:1px solid var(--hdr-line);border-radius:var(--radius);
}
.burger span{display:block;width:19px;height:1.5px;background:var(--hdr-ink);transition:transform var(--t),opacity var(--t)}
.burger.is-on span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.is-on span:nth-child(2){opacity:0}
.burger.is-on span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- 07 Drawer & search -------------------------------------- */
.scrim{
  position:fixed;inset:0;z-index:88;background:rgba(6,5,4,.7);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity var(--t),visibility var(--t);
}
.scrim.is-on{opacity:1;visibility:visible}

.drawer{
  position:fixed;top:0;right:0;z-index:90;
  width:min(400px,90vw);height:100dvh;
  background:var(--bg-2);border-left:1px solid var(--line);
  transform:translateX(101%);transition:transform var(--t);
  display:flex;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom);
}
.drawer.is-on{transform:translateX(0)}
.drawer__top{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px var(--gutter);border-bottom:1px solid var(--line);flex:none;
}
.drawer__close{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);font-size:1.2rem}
.drawer__body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:8px var(--gutter) 28px;-webkit-overflow-scrolling:touch}
.mnav>li{border-bottom:1px solid var(--line-2)}
.mnav>li>a,.mnav__toggle{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:16px 2px;min-height:56px;
  font-size:.92rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  text-align:left;
}
.mnav__toggle i{
  width:9px;height:9px;border-right:1.5px solid var(--clay);border-bottom:1.5px solid var(--clay);
  transform:rotate(45deg);transition:transform var(--t);flex:none;margin-right:4px;
}
.mnav__toggle.is-on i{transform:rotate(-135deg)}
.mnav__sub{max-height:0;overflow:hidden;transition:max-height var(--t)}
.mnav__sub a{display:block;padding:11px 0 11px 16px;font-size:.86rem;color:var(--body);border-left:1px solid var(--line)}
.mnav__sub a:hover{color:var(--clay)}
.drawer__foot{padding:24px var(--gutter) 0;border-top:1px solid var(--line-2);margin-top:22px}
.drawer__foot a.tel{display:block;font-family:var(--ff-display);font-size:1.5rem;color:var(--ink);margin:6px 0 18px}

.search{
  position:fixed;inset:0;z-index:95;background:rgba(255,255,255,.97);
  display:grid;place-items:center;padding:var(--gutter);
  opacity:0;visibility:hidden;transition:opacity var(--t),visibility var(--t);
}
.search.is-on{opacity:1;visibility:visible}
.search form{width:min(720px,100%);border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:center}
.search input{
  flex:1;min-height:64px;background:none;border:0;outline:0;
  font-family:var(--ff-display);font-size:clamp(1.5rem,4vw,2.6rem);color:var(--ink);
}
.search input::placeholder{color:var(--muted)}
.search__close{position:absolute;top:22px;right:22px;width:46px;height:46px;border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);font-size:1.3rem;display:grid;place-items:center}

/* ---------- 08 Hero -------------------------------------------------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__slide{
  position:absolute;inset:0;opacity:0;
  /* the fade is its own transition so it still runs when the ken-burns
     animation is suppressed under reduced-motion */
  transition:opacity 1.1s ease;
}
.hero__slide img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transform:scale(1.06);
}
.hero__slide.is-on{opacity:1;z-index:1}
.hero__slide.is-on img{animation:kenburns 9s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.06)}to{transform:scale(1)}}
/* reduced motion keeps the slideshow advancing, it just cuts instead of
   fading and drops the ken-burns push-in */
@media (prefers-reduced-motion:reduce){
  .hero__slide{transition:none}
  .hero__slide img{transform:none;animation:none!important}
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(16,14,12,.72) 0%,rgba(16,14,12,.28) 32%,rgba(16,14,12,.55) 66%,rgba(16,14,12,.96) 100%);
}
/* the hero carries only a headline and one button - the booking bar that
   overlaps its lower edge lives outside the section, so it can spill out
   past the hero's overflow:hidden */
.hero__inner{
  width:100%;
  padding-top:calc(var(--header-h) + 40px);
  padding-bottom:clamp(96px,13vh,150px);
}
.hero h1{
  font-family:var(--ff-poster);font-weight:700;
  font-size:clamp(2.6rem,6.6vw,5.4rem);
  line-height:1.24;letter-spacing:-.012em;
  max-width:16ch;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,4vh,46px)}

/* edge arrows for the slider */
.hero__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.45);color:#fff;font-size:1.25rem;
  background:rgba(16,14,12,.22);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background var(--t),border-color var(--t),color var(--t);
}
.hero__arrow:hover{background:var(--clay);border-color:var(--clay);color:#fff}
.hero__arrow--p{left:clamp(12px,2.4vw,42px)}
.hero__arrow--n{right:clamp(12px,2.4vw,42px)}
/* the arrows are the desktop control; the dots only appear at the widths
   where the arrows would land on top of the headline */
.hero__dots{position:absolute;left:var(--gutter);bottom:26px;display:none;gap:10px;z-index:3}
.hero__dots button{
  width:34px;height:2px;background:rgba(243,238,231,.3);transition:background var(--t);
}
.hero__dots button.is-on{background:var(--clay)}

/* ---------- 09 Booking bar (hero) ------------------------------------- */
/* A white pill that straddles the hero's bottom edge: three fields split by
   hairlines, then a dark block that fills and rounds off the right end.
   It sits outside .hero so the hero's overflow:hidden can't clip it. */
.bkwrap{position:relative;z-index:6;margin-top:-54px;margin-bottom:clamp(30px,4vw,56px)}
.bkbar{
  display:grid;grid-template-columns:1fr 1fr 1.6fr auto;align-items:stretch;
  min-height:96px;background:#fff;border-radius:999px;
  box-shadow:0 34px 70px -34px rgba(0,0,0,.6);
}
.bkbar__f{
  display:flex;align-items:center;gap:16px;min-width:0;position:relative;
  padding:0 clamp(20px,2.3vw,34px);
}
.bkbar__f+.bkbar__f{box-shadow:inset 1px 0 0 var(--slate-line)}
.bkbar__f>svg{width:23px;height:23px;flex:none;stroke:var(--slate-mute);fill:none;stroke-width:1.6}
.bkbar__f input,.bkbar__gbtn{
  width:100%;min-width:0;background:none;border:0;outline:0;padding:0;
  font-family:var(--ff-ui);font-size:clamp(.95rem,1.15vw,1.08rem);
  font-weight:400;color:var(--slate-body);cursor:pointer;
}
/* the field itself opens the picker (see main.js), so the native glyph goes */
.bkbar__f input[type=date]::-webkit-calendar-picker-indicator{opacity:0;display:none}
.bkbar__f input[type=date]{appearance:none;-webkit-appearance:none}
.bkbar__gbtn{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left}
.bkbar__gbtn i{
  width:9px;height:9px;flex:none;margin-right:2px;
  border-right:1.6px solid var(--slate-mute);border-bottom:1.6px solid var(--slate-mute);
  transform:rotate(45deg) translateY(-3px);transition:transform var(--t-fast);
}
.bkbar__gbtn.is-on i{transform:rotate(-135deg) translateY(-3px)}
.bkbar__go{
  border-radius:0 999px 999px 0;
  background:var(--slate-ink);color:#fff;
  padding:0 clamp(26px,3vw,46px);white-space:nowrap;
  font-family:var(--ff-poster);font-weight:600;
  font-size:clamp(.92rem,1.05vw,1.02rem);
  transition:background var(--t);
}
.bkbar__go:hover{background:var(--clay)}

/* guest / room stepper popover */
.gpop{
  position:absolute;top:calc(100% - 14px);left:10px;z-index:9;
  width:min(320px,86vw);background:#fff;border-radius:20px;padding:8px 18px;
  box-shadow:0 28px 60px -26px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity var(--t),transform var(--t),visibility var(--t);
}
.gpop.is-on{opacity:1;visibility:visible;transform:translateY(0)}
.gpop__row{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:15px 2px;border-bottom:1px solid var(--slate-line);
}
.gpop__row:last-child{border-bottom:0}
.gpop__row b{color:var(--slate-ink);font-weight:500;font-size:.96rem}
.gpop__row small{display:block;color:var(--slate-mute);font-size:.76rem;font-weight:400}
.gstep{display:flex;align-items:center;gap:14px;flex:none}
.gstep button{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  border:1px solid #DDE2E9;color:var(--slate-body);font-size:1.05rem;line-height:1;
  transition:border-color var(--t-fast),color var(--t-fast);
}
.gstep button:hover{border-color:var(--clay);color:var(--clay)}
.gstep button[disabled]{opacity:.35;pointer-events:none}
.gstep span{min-width:20px;text-align:center;font-family:var(--ff-mono);font-size:.92rem;color:var(--slate-ink)}

/* ---------- 09b Booking rail (inner pages) ---------------------------- */
.rail{
  background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:0 24px 56px -34px rgba(22,27,34,.4);
  padding:20px;position:relative;z-index:4;
}
.rail--hero{margin-top:44px}
.rail__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:18px;align-items:end}
.rail .btn{min-height:56px}
.rail__note{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2);
  display:flex;flex-wrap:wrap;gap:8px 26px;
  font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.rail__note b{color:var(--sage);font-weight:500}

/* ---------- 10 Marquee ----------------------------------------------- */
.marquee{
  overflow:hidden;border-block:1px solid var(--line);
  padding:22px 0;background:var(--bg-2);
}
.marquee__track{display:flex;width:max-content;animation:slide 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee__item{
  display:inline-flex;align-items:center;gap:26px;padding-right:26px;
  font-family:var(--ff-display);font-size:clamp(1.4rem,2.6vw,2.1rem);color:var(--ink);white-space:nowrap;
}
.marquee__item i{width:7px;height:7px;background:var(--clay);border-radius:50%;flex:none;display:block}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ---------- 11 Section heads ----------------------------------------- */
.head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:end;margin-bottom:clamp(34px,4vw,58px)}
.head h2{max-width:18ch;margin-top:14px}
.head p{max-width:52ch;margin-top:14px}
.head--center{grid-template-columns:1fr;justify-items:center;text-align:center}
.head--center h2,.head--center p{max-width:60ch}

/* ---------- 12 Room rail / room index -------------------------------- */
.hrail{
  display:flex;gap:clamp(16px,2vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:18px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
  scrollbar-width:thin;scrollbar-color:var(--clay) var(--bg-3);
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;cursor:grab;
}
.hrail.is-drag{cursor:grabbing;scroll-snap-type:none}
.hrail::-webkit-scrollbar{height:3px}
.hrail::-webkit-scrollbar-track{background:var(--line-2)}
.hrail::-webkit-scrollbar-thumb{background:var(--clay)}
.hrail>*{flex:0 0 clamp(262px,29vw,392px);scroll-snap-align:start}
.rail-nav{display:flex;gap:10px}
.rail-nav button{
  width:48px;height:48px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);
  transition:border-color var(--t),color var(--t),background var(--t);
}
.rail-nav button:hover{border-color:var(--clay);color:var(--clay)}
.rail-nav button[disabled]{opacity:.3;pointer-events:none}

/* room card — a rounded photo with the details set plainly underneath it on
   the page: no card background, no border, no shadow, no overlay badges */
.room{display:block;background:none}
.room__fig{position:relative;overflow:hidden;border-radius:12px;aspect-ratio:3/4;background:var(--bg-3)}
.room__fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.room:hover .room__fig img{transform:scale(1.06)}
.room__body{padding-top:22px}
.room__body h3{
  font-family:var(--ff-poster);font-weight:600;
  font-size:clamp(1.12rem,1.5vw,1.28rem);letter-spacing:-.015em;
  transition:color var(--t-fast);
}
.room:hover .room__body h3{color:var(--clay)}
.room__facts{
  display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:13px;
  font-family:var(--ff-ui);font-size:.79rem;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--muted);
}
.room__facts li{display:flex;align-items:center;gap:7px}
.room__facts svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5}
.room__rate{
  display:flex;align-items:baseline;gap:6px;margin-top:15px;
  font-family:var(--ff-poster);
}
.room__rate b{font-size:clamp(1.35rem,1.9vw,1.6rem);font-weight:700;color:var(--clay);letter-spacing:-.025em}
.room__rate span{font-size:.9rem;font-weight:400;color:var(--muted)}
/* kept for the "most booked" flag, which only some cards carry */
.room__tag{
  position:absolute;right:14px;top:14px;background:var(--clay);color:#fff;
  padding:6px 12px;border-radius:6px;
  font-family:var(--ff-ui);font-size:.68rem;font-weight:500;letter-spacing:.02em;
}

/* editorial numbered index (rooms page / services) */
.index{border-top:1px solid var(--line)}
.index__row{
  display:grid;grid-template-columns:auto minmax(0,1.1fr) minmax(0,1.4fr) auto;
  gap:clamp(18px,3vw,48px);align-items:center;
  padding:clamp(22px,3vw,34px) 0;border-bottom:1px solid var(--line);
  transition:background var(--t),padding-inline var(--t);
}
.index__row:hover{background:var(--bg-2)}
.index__no{font-family:var(--ff-mono);font-size:.78rem;color:var(--clay);letter-spacing:.1em}
.index__thumb{width:clamp(80px,9vw,120px);aspect-ratio:1;border-radius:var(--radius);overflow:hidden;flex:none;background:var(--bg-3)}
.index__thumb img{width:100%;height:100%;object-fit:cover}
.index__main{display:flex;align-items:center;gap:clamp(14px,2vw,24px);min-width:0}
.index__main h3{margin-bottom:6px}
.index__meta{font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.index__price{text-align:right;font-family:var(--ff-mono);font-size:.95rem;color:var(--ink);white-space:nowrap}
.index__price small{display:block;font-size:.64rem;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;margin-top:4px}

/* ---------- 13 Amenities & services ---------------------------------- */
.amn{
  padding:clamp(26px,3vw,38px);border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--bg-2);position:relative;overflow:hidden;
  transition:border-color var(--t),transform var(--t),background var(--t);
  height:100%;
}
.amn::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:var(--clay);transform:scaleX(0);transform-origin:left;transition:transform var(--t);
}
.amn:hover{border-color:rgba(210,105,74,.4);transform:translateY(-5px);background:var(--bg-3)}
.amn:hover::before{transform:scaleX(1)}
.amn__no{font-family:var(--ff-mono);font-size:.7rem;color:var(--clay);letter-spacing:.18em}
.amn__ico{width:38px;height:38px;margin:18px 0 20px;color:var(--clay)}
.amn__ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.2}
.amn h3{font-size:clamp(1.25rem,1.9vw,1.55rem);margin-bottom:10px}
.amn p{font-size:.95rem}
.paper .amn{background:#fff;border-color:var(--line-dark)}
.paper .amn:hover{background:#fff}

/* small icon+text list */
.feat{display:flex;gap:16px;align-items:flex-start}
.feat__ico{
  width:46px;height:46px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:var(--radius);color:var(--clay);
}
.feat__ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.4}
.feat h4{margin-bottom:6px}
.feat p{font-size:.93rem}
.paper .feat__ico{border-color:var(--line-dark)}

/* stat blocks */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.stat{background:var(--bg);padding:clamp(24px,3vw,36px);text-align:center}
.stat b{display:block;font-family:var(--ff-display);font-size:clamp(2.4rem,5vw,3.6rem);color:var(--ink);line-height:1;font-weight:400}
.stat b i{color:var(--clay);font-style:normal}
.stat span{display:block;margin-top:10px;font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.paper .stats{background:var(--line-dark);border-color:var(--line-dark)}
.paper .stat{background:var(--paper)}

/* ---------- 14 Split feature / parallax CTA --------------------------- */
.media{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-3)}
.media img{width:100%;height:100%;object-fit:cover}
.media--tall{aspect-ratio:3/4}
.media--wide{aspect-ratio:4/3}
.media--sq{aspect-ratio:1}
/* Composition holds at every width — tall image spanning both rows on the
   left, two square tiles on the right. Only the scale changes, so the gap and
   the badge are sized in vw rather than pinned to desktop pixels. */
.media-stack{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1.7vw,18px)}
.media-stack .media:first-child{grid-row:span 2;aspect-ratio:auto;min-height:100%}
.badge-float{
  position:absolute;
  right:clamp(8px,1.5vw,18px);bottom:clamp(8px,1.5vw,18px);
  background:var(--clay);color:#fff;border-radius:var(--radius);
  padding:clamp(9px,1.9vw,16px) clamp(11px,2.2vw,20px);
  max-width:min(200px,80%);
}
.badge-float b{display:block;font-family:var(--ff-display);font-size:clamp(1.05rem,3.4vw,1.9rem);line-height:1}
.badge-float span{
  font-family:var(--ff-mono);font-size:clamp(.5rem,1.35vw,.62rem);
  letter-spacing:.13em;text-transform:uppercase;opacity:.9;
}

.cta{position:relative;isolation:isolate;overflow:hidden;padding:clamp(80px,11vw,160px) 0;text-align:center}
.cta__bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;background-attachment:fixed}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(16,14,12,.7)}
.cta h2{max-width:20ch;margin-inline:auto}
.play{
  width:84px;height:84px;border-radius:50%;display:grid;place-items:center;margin:0 auto 30px;
  border:1px solid rgba(255,255,255,.4);color:#fff;position:relative;
}
.play::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--clay);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.55);opacity:0}}
.play svg{width:20px;height:20px;fill:currentColor;margin-left:3px}

/* ---------- 14b Highlights (hover-swapped media) ---------------------- */
/* A warm panel behind the copy, with the media column hanging past its
   bottom edge onto the white page. Hovering (or tapping) a name in the list
   swaps the photograph. Local warm greys — the global scale is cool. */
.hl{
  --hl-mute:#B2A794;
  --hl-body:#7D7466;
  --hl-ink:#201C17;
  /* height of the white band under the beige panel, and how far the photo
     hangs down into it — the caption's white block fills that overlap */
  --hl-foot:clamp(64px,7vw,104px);
  --hl-overlap:clamp(32px,3.6vw,54px);
  /* how far the caption block clears the photo's bottom edge */
  --hl-cap-drop:clamp(24px,2.6vw,38px);
  position:relative;isolation:isolate;
  padding:clamp(52px,7vw,96px) 0 var(--hl-foot);
}
/* the beige stops exactly where the caption block begins: the media column is
   the tallest grid item, so the section's content box ends at the photo's
   bottom edge, and lifting the panel by --hl-overlap lands it on the seam */
.hl::before{
  content:"";position:absolute;z-index:-1;
  inset:0 0 calc(var(--hl-foot) + var(--hl-overlap)) 0;
  background:var(--paper-2);
}
.hl__grid{
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.5fr);
  gap:clamp(28px,4.5vw,64px);align-items:start;
}
.hl__side h2{color:var(--hl-mute);font-size:clamp(2rem,3.6vw,3rem);letter-spacing:-.02em}
.hl__eyebrow{
  display:block;margin-top:10px;
  font-size:.68rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--hl-mute);
}
.hl__side p{margin-top:22px;font-size:.88rem;line-height:1.75;color:var(--hl-body);max-width:38ch}

.hl__list{margin-top:clamp(28px,4vw,52px)}
.hl__list li+li{margin-top:6px}
.hl__list button{
  display:flex;align-items:center;gap:0;width:100%;text-align:left;
  padding:7px 0;min-height:42px;
  font-family:var(--ff-display);font-weight:600;
  font-size:clamp(1.05rem,1.5vw,1.3rem);letter-spacing:-.015em;
  color:var(--hl-mute);transition:color var(--t);
}
/* the dash grows out from nothing, so the labels never shift sideways */
.hl__list button::before{
  content:"";width:0;height:2px;background:var(--clay);flex:none;
  margin-right:0;transition:width var(--t),margin var(--t);
}
.hl__list button:hover,.hl__list button.is-on{color:var(--hl-ink)}
.hl__list button.is-on::before{width:22px;margin-right:12px}
.hl__more{
  display:inline-block;margin-top:clamp(24px,3vw,40px);
  font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--hl-ink);border-bottom:1px solid var(--hl-ink);padding-bottom:4px;
}
.hl__more:hover{color:var(--clay);border-color:var(--clay)}

/* the media column is only as tall as the photo — the caption is taken out of
   flow so it can sit over the photo's bottom-right corner */
.hl__media{position:relative}
.hl__stack{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-3)}
.hl__stack figure{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
.hl__stack figure.is-on{opacity:1;z-index:1}
.hl__stack img{width:100%;height:100%;object-fit:cover}
/* top:100% lands on the photo's bottom edge; the lift is a fixed distance
   rather than a share of the caption's own height, so a one-line and a
   three-line caption both cut the photo at the same seam */
.hl__cap{
  position:absolute;right:0;top:100%;z-index:2;
  transform:translateY(calc(-1 * var(--hl-overlap)));
  width:min(64%,540px);margin:0;
  /* the block is lifted a fixed distance but its height comes from the text,
     so a short caption would end above the photo's bottom edge and leave a
     sliver of image showing under it. Floor the height at the strip it has to
     cover plus a clean drop below, and let long captions grow past it. */
  min-height:calc(var(--hl-overlap) + var(--hl-cap-drop));
  background:var(--bg);
  padding:calc(var(--hl-overlap) * .55) 0 0 clamp(22px,3vw,48px);
  font-size:.95rem;line-height:1.65;color:var(--body);
}
@media (max-width:960px){
  .hl__grid{grid-template-columns:1fr;gap:32px}
  .hl{--hl-overlap:0px;--hl-foot:clamp(44px,7vw,72px)}
  .hl__side p{max-width:none}
  /* Stacked, the caption returns to normal flow beneath the photo. Its bottom
     padding is what holds the beige panel open under the text: the panel's
     edge is derived from the section's content box, so with no padding here
     the text sat flush against the colour boundary. */
  .hl__cap{
    position:static;transform:none;width:auto;min-height:0;
    padding:18px 0 clamp(30px,6vw,48px);
  }
}
@media (max-width:600px){
  .hl__stack{aspect-ratio:4/3}
}

/* ---------- 15 Testimonials ------------------------------------------ */
.quote{
  padding:clamp(26px,3vw,38px);border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--bg-2);height:100%;display:flex;flex-direction:column;
}
.quote__mark{font-family:var(--ff-display);font-size:3.4rem;line-height:.6;color:var(--clay);margin-bottom:18px}
.quote p{font-size:1.02rem;line-height:1.8;color:var(--ink);flex:1}
.quote__by{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line-2)}
.quote__by img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}
.quote__by b{display:block;color:var(--ink);font-weight:500;font-size:.95rem}
.quote__by span{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.stars{display:flex;gap:3px;color:var(--clay);margin-bottom:16px}
.stars svg{width:14px;height:14px;fill:currentColor}
.paper .quote{background:#fff;border-color:var(--line-dark)}
.paper .quote p{color:var(--ink-dark)}

/* ---------- 16 Gallery & lightbox ------------------------------------ */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gal__i{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--bg-3);cursor:zoom-in;aspect-ratio:1}
.gal__i img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.22,.61,.36,1)}
.gal__i:hover img{transform:scale(1.08)}
.gal__i::after{
  content:"";position:absolute;inset:0;background:rgba(16,14,12,.45);
  opacity:0;transition:opacity var(--t);
}
.gal__i:hover::after{opacity:1}
.gal__i span{
  position:absolute;inset:0;display:grid;place-items:center;z-index:2;
  font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;opacity:0;transform:translateY(10px);transition:opacity var(--t),transform var(--t);
}
.gal__i:hover span{opacity:1;transform:translateY(0)}
.gal__i--tall{grid-row:span 2;aspect-ratio:auto}
.gal__i--wide{grid-column:span 2}
.gal--masonry{columns:4;column-gap:14px;display:block}
.gal--masonry .gal__i{break-inside:avoid;margin-bottom:14px;aspect-ratio:auto}
.gal--masonry .gal__i img{height:auto}

.lightbox{
  position:fixed;inset:0;z-index:99;background:rgba(8,7,6,.96);
  display:grid;place-items:center;padding:clamp(16px,4vw,60px);
  opacity:0;visibility:hidden;transition:opacity var(--t),visibility var(--t);
}
.lightbox.is-on{opacity:1;visibility:visible}
.lightbox img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:var(--radius)}
.lightbox__cap{margin-top:16px;text-align:center;font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.lightbox button{
  position:absolute;width:52px;height:52px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.28);border-radius:var(--radius);color:#fff;font-size:1.3rem;
  background:rgba(16,14,12,.6);
}
.lightbox__x{top:20px;right:20px}
.lightbox__p{left:16px;top:50%;transform:translateY(-50%)}
.lightbox__n{right:16px;top:50%;transform:translateY(-50%)}

/* ---------- 17 Blog --------------------------------------------------- */
/* journal card — a bordered frame split in two: photo flush to the left,
   edge, copy set in the right half, category chips on the photo's top edge */
.post{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  border:1px solid var(--line);background:var(--bg);height:100%;
  transition:border-color var(--t);
}
.post:hover{border-color:rgba(22,27,34,.28)}
.post__fig{position:relative;overflow:hidden;background:var(--bg-3);min-height:100%}
.post__fig img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1s cubic-bezier(.22,.61,.36,1);
}
.post:hover .post__fig img{transform:scale(1.06)}
.post__cats{position:absolute;top:0;right:0;display:flex;gap:1px;z-index:2}
.post__cats span{
  background:#fff;color:var(--ink);padding:8px 13px;
  font-size:.65rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
}
.post__body{
  padding:clamp(22px,2.6vw,36px);
  display:flex;flex-direction:column;justify-content:center;
}
.post__body h3{font-size:clamp(1.15rem,1.7vw,1.42rem);line-height:1.32;transition:color var(--t-fast)}
.post:hover .post__body h3{color:var(--clay)}
.post__sep{display:block;width:54px;height:1px;background:var(--line);margin:clamp(16px,2vw,24px) 0}
.post__body p{font-size:.95rem;color:var(--muted);margin:0}
.post__meta{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px;
  margin-top:clamp(18px,2.4vw,28px);
  font-size:.71rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
}
.post__meta .dot{width:19px;height:19px;border-radius:50%;background:var(--bg-3);flex:none}
.post__meta i{display:block;width:1px;height:13px;background:var(--line)}

/* article body */
.article{font-size:1.03rem;line-height:1.85}
.article h2,.article h3{margin:1.5em 0 .5em}
.article p{margin-bottom:1.1em}
.article img{border-radius:var(--radius-lg);margin:2em 0}
.article blockquote{
  margin:2em 0;padding:26px 30px;border-left:2px solid var(--clay);background:var(--bg-2);
  font-family:var(--ff-display);font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.4;color:var(--ink);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
}
.article ul{margin:0 0 1.4em}
.article ul li{position:relative;padding-left:24px;margin-bottom:10px}
.article ul li::before{content:"";position:absolute;left:0;top:12px;width:8px;height:1px;background:var(--clay)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;min-height:36px;padding:0 14px;
  border:1px solid var(--line);border-radius:var(--radius);
  font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--body);
  transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast);
}
.chip:hover,.chip.is-on{color:#fff;background:var(--clay);border-color:var(--clay)}

/* sidebar */
.side{display:flex;flex-direction:column;gap:22px}
.widget{border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;background:var(--bg-2)}
.widget h4{margin-bottom:16px;font-size:1.25rem}
.widget ul li+li{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2)}
.widget a{transition:color var(--t-fast)}
.widget a:hover{color:var(--clay)}
.mini{display:flex;gap:14px;align-items:center}
.mini img{width:74px;height:66px;object-fit:cover;border-radius:var(--radius);flex:none}
.mini b{display:block;color:var(--ink);font-weight:400;font-size:.92rem;line-height:1.4}
.mini span{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- 18 Newsletter & footer ------------------------------------ */
.news{
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(32px,5vw,60px);background:var(--bg-2);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,54px);align-items:center;
}
.news form{display:flex;gap:12px}
.news input{
  flex:1;min-height:56px;padding:0 18px;background:var(--bg);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius);
}
.news input:focus{outline:0;border-color:var(--clay)}

.foot{background:var(--bg-2);border-top:1px solid var(--line);padding-top:clamp(56px,7vw,90px)}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:clamp(28px,4vw,56px)}
.foot h5{font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--clay);margin-bottom:22px}
.foot ul li+li{margin-top:11px}
.foot a{transition:color var(--t-fast),padding-left var(--t-fast)}
.foot ul a:hover{color:var(--clay);padding-left:6px}
.foot .brand{margin-bottom:20px}
.foot p{font-size:.94rem;max-width:36ch}
.socials{display:flex;gap:10px;margin-top:24px}
.socials a{
  width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:var(--radius);color:var(--ink);transition:all var(--t-fast);
}
.socials a:hover{background:var(--clay);border-color:var(--clay);color:#fff}
.socials svg{width:16px;height:16px;fill:currentColor}
.contact-list li{display:flex;gap:12px;align-items:flex-start;font-size:.94rem}
.contact-list svg{width:16px;height:16px;flex:none;margin-top:5px;stroke:var(--clay);fill:none;stroke-width:1.5}
.foot__bar{
  margin-top:clamp(40px,5vw,64px);padding:24px 0;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;
  font-size:.85rem;color:var(--muted);
}
.foot__bar nav{display:flex;flex-wrap:wrap;gap:12px 22px}

.totop{
  position:fixed;right:20px;bottom:20px;z-index:70;
  width:48px;height:48px;display:grid;place-items:center;
  background:var(--clay);color:#fff;border-radius:var(--radius);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity var(--t),transform var(--t),visibility var(--t),background var(--t);
  margin-bottom:env(safe-area-inset-bottom);
}
.totop.is-on{opacity:1;visibility:visible;transform:translateY(0)}
.totop:hover{background:var(--clay-deep)}

/* ---------- 19 Page banner -------------------------------------------- */
.banner{
  position:relative;isolation:isolate;overflow:hidden;
  padding:calc(var(--header-h) + clamp(60px,8vw,110px)) 0 clamp(56px,7vw,100px);
}
.banner__bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;transform:scale(1.04)}
.banner::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(16,14,12,.86),rgba(16,14,12,.68))}
.banner h1{font-size:clamp(2.5rem,6vw,4.6rem)}
.crumb{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px;font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.crumb a:hover{color:var(--clay)}
.crumb i{width:14px;height:1px;background:var(--muted);display:block}

/* ---------- 20 Inner page blocks --------------------------------------- */
/* accordion */
.acc{border-top:1px solid var(--line)}
.acc__i{border-bottom:1px solid var(--line)}
.acc__q{
  display:flex;align-items:center;gap:18px;width:100%;text-align:left;
  padding:22px 0;min-height:64px;color:var(--ink);
  font-family:var(--ff-display);font-size:clamp(1.1rem,1.8vw,1.4rem);line-height:1.3;
}
.acc__q span{font-family:var(--ff-mono);font-size:.72rem;color:var(--clay);flex:none}
.acc__q i{
  margin-left:auto;flex:none;width:22px;height:22px;position:relative;
}
.acc__q i::before,.acc__q i::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--clay);
  transform:translate(-50%,-50%);transition:transform var(--t),opacity var(--t);
}
.acc__q i::before{width:14px;height:1.5px}
.acc__q i::after{width:1.5px;height:14px}
.acc__i.is-on .acc__q i::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.acc__a{max-height:0;overflow:hidden;transition:max-height var(--t)}
.acc__a>div{padding:0 0 26px;max-width:74ch}
.paper .acc,.paper .acc__i{border-color:var(--line-dark)}
.paper .acc__q{color:var(--ink-dark)}

/* pricing */
.plan{
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(28px,3vw,40px);
  background:var(--bg-2);height:100%;display:flex;flex-direction:column;position:relative;
  transition:border-color var(--t),transform var(--t);
}
.plan:hover{border-color:rgba(210,105,74,.45);transform:translateY(-5px)}
.plan--best{border-color:var(--clay);background:var(--bg-3)}
.plan__flag{
  position:absolute;top:-1px;right:24px;background:var(--clay);color:#fff;
  padding:7px 14px;border-radius:0 0 var(--radius) var(--radius);
  font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
}
.plan__price{font-family:var(--ff-display);font-size:clamp(2.6rem,4.6vw,3.6rem);color:var(--ink);line-height:1;margin:18px 0 6px}
.plan__price sup{font-size:.4em;vertical-align:super;color:var(--clay)}
.plan__price small{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.plan ul{margin:26px 0;flex:1}
.plan ul li{display:flex;gap:12px;padding:9px 0;font-size:.94rem;border-bottom:1px solid var(--line-2)}
.plan ul li svg{width:15px;height:15px;flex:none;margin-top:6px;stroke:var(--clay);fill:none;stroke-width:2}
.plan ul li.is-off{opacity:.42;text-decoration:line-through}

/* team */
.person__fig{position:relative;overflow:hidden;border-radius:var(--radius-lg);aspect-ratio:3/4;background:var(--bg-3)}
.person__fig img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.22,.61,.36,1)}
.person:hover .person__fig img{transform:scale(1.06)}
.person__soc{
  position:absolute;left:0;right:0;bottom:0;padding:16px;display:flex;gap:9px;justify-content:center;
  background:linear-gradient(180deg,transparent,rgba(16,14,12,.9));
  transform:translateY(100%);opacity:0;transition:transform var(--t),opacity var(--t);
}
.person:hover .person__soc{transform:translateY(0);opacity:1}
.person__soc a{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.3);border-radius:var(--radius);color:#fff;background:rgba(16,14,12,.5)}
.person__soc a:hover{background:var(--clay);border-color:var(--clay);color:#fff}
.person__soc svg{width:14px;height:14px;fill:currentColor}
.person__body{padding-top:18px}
.person__body span{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--clay)}
.person__body h4{margin-top:6px}

/* booking summary / sticky aside */
.sticky{position:sticky;top:calc(var(--header-h) + 20px)}
.panel{border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(22px,2.6vw,32px);background:var(--bg-2)}
.paper .panel{background:#fff;border-color:var(--line-dark)}
.sum li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line-2);font-size:.94rem}
.sum li b{color:var(--ink);font-weight:400}
.paper .sum li b{color:var(--ink-dark)}
.sum li.total{border-bottom:0;padding-top:18px;margin-top:8px;border-top:1px solid var(--line);font-family:var(--ff-mono);font-size:1.05rem}
.sum li.total b{color:var(--clay)}

/* steps */
.steps{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:34px}
.steps li{
  display:flex;align-items:center;gap:10px;padding:10px 18px;
  border:1px solid var(--line);border-radius:var(--radius);
  font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.steps li.is-on{border-color:var(--clay);color:var(--ink);background:var(--clay-soft)}
.steps li b{color:var(--clay)}

/* room detail specifics */
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.spec div{background:var(--bg-2);padding:22px}
.spec span{display:block;font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.spec b{color:var(--ink);font-weight:400;font-size:1.02rem}
.amen-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.amen-grid li{display:flex;gap:11px;align-items:center;font-size:.94rem}
.amen-grid svg{width:16px;height:16px;flex:none;stroke:var(--clay);fill:none;stroke-width:2}

/* map */
.map{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;filter:grayscale(1) contrast(1.05);background:var(--bg-3)}
.map iframe{display:block;width:100%;height:clamp(300px,42vw,470px);border:0}

/* 404 */
.oops{min-height:100svh;display:grid;place-items:center;text-align:center;padding:calc(var(--header-h) + 40px) var(--gutter) 60px}
.oops__no{font-family:var(--ff-display);font-size:clamp(6rem,22vw,15rem);line-height:.85;color:var(--ink)}
.oops__no i{color:var(--clay);font-style:normal}

/* ---------- 20b Type on photography ------------------------------------ */
/* The hero, page banners and parallax CTAs all sit on a darkened photograph,
   so they keep light type no matter how white the page canvas is. */
.hero,.banner,.cta{color:rgba(255,255,255,.88)}
.hero h1,.hero h2,
.banner h1,.banner h2,
.cta h1,.cta h2,.cta h3{color:#fff}
.hero .lead,.banner .lead,.cta .lead{color:rgba(255,255,255,.88)}
.hero .tag,.banner .tag,.cta .tag{color:var(--clay-2)}
.banner .crumb{color:rgba(255,255,255,.72)}
.banner .crumb i{background:rgba(255,255,255,.5)}
.banner .crumb a:hover{color:var(--clay-2)}
.cta .play{border-color:rgba(255,255,255,.45);color:#fff}

/* ---------- 21 Utilities & motion -------------------------------------- */
[data-rev]{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
[data-rev].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-rev]{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
.no-scroll{overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hide{display:none!important}

/* ---------- 22 Responsive ----------------------------------------------- */
@media (max-width:1200px){
  :root{--container:1100px}
  .foot__grid{grid-template-columns:1.5fr 1fr 1.4fr;}
  .foot__grid>div:nth-child(3){display:none}
  .topbar__l li:nth-child(3){display:none}
}
@media (max-width:1080px){
  .hdr__act .btn{display:none}
  .topbar__soc a:nth-child(n+4){display:none}
  .nav{gap:16px}
  .nav>li>a{font-size:.74rem}
  .rail__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .rail__grid .btn{grid-column:1/-1}
  .gal{grid-template-columns:repeat(3,1fr)}
  .gal--masonry{columns:3}
  .bkbar{grid-template-columns:1fr 1fr 1.4fr;min-height:auto}
  .bkbar__f{padding:22px clamp(18px,2.4vw,28px)}
  .bkbar__go{grid-column:1/-1;border-radius:0 0 30px 30px;padding:22px 30px}
  .bkbar{border-radius:30px}
}
@media (max-width:960px){
  /* the utility strip folds away entirely - its details live in the drawer */
  :root{--topbar-h:0px;--bar-h:74px}
  .topbar{display:none}
  .nav{display:none}
  .burger{display:flex}
  .hero__arrow{width:48px;height:48px}
  .split{grid-template-columns:1fr}
  .split--keep{grid-template-columns:1fr 1fr}
  .head{grid-template-columns:1fr;gap:20px}
  .head .rail-nav,.head .btn{justify-self:start}
  .news{grid-template-columns:1fr;gap:24px}
  .foot__grid{grid-template-columns:1fr 1fr}
  .foot__grid>div:nth-child(3){display:block}
  .index__row{grid-template-columns:auto minmax(0,1fr) auto;gap:16px}
  .index__row>p.index__desc{display:none}
  .cta__bg{background-attachment:scroll}
  .sticky{position:static}
}
@media (max-width:768px){
  :root{--gutter:18px;--section:clamp(52px,9vw,72px)}
  .hero{min-height:92svh}
  .hero__inner{padding-top:calc(var(--header-h) + 44px)}
  .hero h1{max-width:none}
  .rail--hero{margin-top:30px}
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal--masonry{columns:2}
  .gal__i--wide{grid-column:span 1}
  .gal__i--tall{grid-row:span 1;aspect-ratio:1}
  .stats{grid-template-columns:repeat(2,1fr)}
  .spec{grid-template-columns:repeat(2,1fr)}
  .article blockquote{padding:20px 22px}
  .hrail>*{flex-basis:clamp(240px,72vw,300px)}
  .foot__bar{justify-content:flex-start}
  /* the split journal card stacks: photo on top, copy beneath */
  .post{grid-template-columns:1fr}
  .post__fig{aspect-ratio:16/10;min-height:0}
  /* arrows would land on top of the headline at this width - the dots and
     auto-advance carry the slider instead */
  .hero__arrow{display:none}
  .hero__dots{display:flex}
  .hero h1{font-size:clamp(2.4rem,8.4vw,3.4rem);line-height:1.18;max-width:none}
  .hero__cta{margin-top:26px}
  /* the pill unstacks into a card: one field per row, CTA across the bottom */
  .bkwrap{margin-top:-36px}
  .bkbar{grid-template-columns:1fr;border-radius:22px}
  .bkbar__f+.bkbar__f{box-shadow:inset 0 1px 0 var(--slate-line)}
  .bkbar__go{border-radius:0 0 22px 22px}
  .gpop{left:10px;right:10px;width:auto}
}
@media (max-width:600px){
  .rail__grid{grid-template-columns:1fr}
  .rail{padding:16px}
  .news form{flex-direction:column}
  .news form .btn{width:100%}
  .foot__grid{grid-template-columns:1fr;gap:34px}
  .index__row{grid-template-columns:auto minmax(0,1fr);row-gap:14px}
  .index__price{grid-column:2;text-align:left}
  .index__no{align-self:flex-start;padding-top:6px}
  .split--keep{grid-template-columns:1fr}
  .steps li{flex:1 1 100%}
  .quote__by{flex-wrap:wrap}
  .lightbox__p{left:8px}
  .lightbox__n{right:8px}
  .lightbox button{width:44px;height:44px}
}
@media (max-width:460px){
  :root{--gutter:15px}
  h1{font-size:clamp(2.4rem,10vw,3.2rem)}
  .btn{padding:0 22px;font-size:.72rem}
  .btn--lg{min-height:54px;padding:0 26px}
  .gal,.gal--masonry{grid-template-columns:1fr;columns:1}
  /* stay two-up on phones — four stacked rows pushed the rest of the page a
     long way down, and the figures are short enough to pair comfortably */
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{padding:clamp(18px,4.5vw,26px) 10px}
  .stat span{letter-spacing:.13em}
  .spec{grid-template-columns:1fr}
  .hrail>*{flex-basis:82vw}
  .marquee__item{gap:16px;padding-right:16px}
  .drawer{width:100vw}
  .amn,.quote,.plan,.widget,.panel{padding:22px}
  .hdr__act .cart{display:none}
  .icon-btn--round{width:44px;height:44px}
}
@media (max-width:360px){
  :root{--gutter:13px}
  .brand b{font-size:1.18rem}
  .brand span{letter-spacing:.3em}
  .btn{min-height:48px}
}
/* short landscape phones — stop the hero eating the whole screen */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto}
  .hero__inner{padding-top:calc(var(--header-h) + 28px);padding-bottom:28px}
  .drawer__body{padding-bottom:40px}
}
/* very wide screens */
@media (min-width:1700px){
  :root{--container:1400px}
}
@media print{
  .hdr,.drawer,.scrim,.totop,.rail,.marquee,.foot__bar nav{display:none!important}
  body{background:#fff;color:#000}
}