/* =====================================================================
   HIDDEN — COMPONENTS + LAYOUT
   Loaded after tokens.css. BEM naming. No magic numbers: every colour,
   size, space, and radius references a token custom property.
   Doubled-class specificity is reserved for overriding plugin output.
   ===================================================================== */

/* --- Accessibility utilities --- */
.screen-reader-text{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:var(--space-s); top:var(--space-s); z-index:1000;
  transform:translateY(-150%); transition:transform var(--dur) var(--ease);
  background:var(--ink); color:var(--cream); padding:var(--space-xs) var(--space-m);
  border-radius:var(--radius-sm);
}
.skip-link:focus{transform:translateY(0);}

img{max-width:100%; height:auto; display:block;}

/* =====================================================================
   SITE HEADER + NAV
   ===================================================================== */
/* Full-bleed, edge to edge. Logo padded left, nav centred, Book a stay as a
   squared cell flush to the top-right corner. */
.site-header{position:relative; z-index:50;}
.site-header__inner{display:flex; align-items:stretch; min-height:var(--space-2xl); border-bottom:var(--hair) solid var(--color-line);}

/* Overlay variant: transparent header over the full-bleed hero (front page) */
.site-header--overlay{position:absolute; inset:0 0 auto 0; z-index:50; background:transparent;}
.site-header--overlay .site-header__inner{border-bottom-color:var(--color-line-on-ink);}

/* Equal-width side containers keep the nav optically centred in the viewport */
.site-header__side{flex:1 1 0; min-width:0; display:flex; align-items:stretch;}
.site-header__side--right{justify-content:flex-end;}

.site-header__brand{display:flex; align-items:center; padding-left:var(--container-pad); text-decoration:none; color:var(--color-text);}
.site-header--overlay .site-header__brand{color:var(--cream);}
.brand-wordmark{height:1.25rem; width:auto; display:block; color:currentColor;}

.site-nav{flex:0 0 auto; display:flex; align-items:center; justify-content:center;}
.site-nav__list{list-style:none; display:flex; align-items:center; gap:var(--space-xl); margin:0; padding:0;}
.site-nav__list a{
  display:inline-flex; align-items:center; line-height:1;
  text-decoration:none; color:var(--color-text);
  font-family:var(--font-body); font-weight:var(--w-medium); font-size:var(--fs-button);
  letter-spacing:var(--track-over); text-transform:uppercase;
}
.site-header--overlay .site-nav__list a{color:var(--cream);}
/* letter-roll: rolled-in copy lands on the accent */
.site-nav__list a .roll__col > span:last-child{color:var(--cream);}
/* On the solid (light) header, cream-on-light is invisible — roll in the accent. */
.site-header:not(.site-header--overlay) .site-nav__list a .roll__col > span:last-child{color:var(--accent);}
/* Squared "Book a stay" cell, full header height, flush to the right edge */
.site-header__book{
  flex:0 0 auto; align-self:stretch;
  display:inline-flex; align-items:center; gap:.7em;
  padding-inline:var(--space-xl); line-height:1;
  border-left:var(--hair) solid var(--color-line);
  color:var(--color-text);
  transition:background-color var(--dur) var(--ease);
}
.site-header__book .btn__arw{margin-left:0;}
.site-header__book:hover .btn__arw{transform:translateX(.35em);}
.site-header__book .roll__col > span:last-child{color:var(--cream);}
.site-header:not(.site-header--overlay) .site-header__book .roll__col > span:last-child{color:var(--accent);}

.site-header--overlay .site-header__book{border-left-color:var(--color-line-on-ink); color:var(--cream);}

.site-nav__toggle{display:none;}

/* mobile nav */
@media (max-width:860px){
  .site-header__side--right{display:none;}
  .site-nav{flex:0 0 auto; margin-left:auto; padding-right:var(--container-pad);}
  .site-nav__toggle{
    display:inline-grid; place-items:center; width:2.6em; height:2.6em;
    background:transparent; border:var(--hair) solid var(--color-line); border-radius:var(--radius-circle);
    cursor:pointer; color:var(--color-text);
  }
  .site-header--overlay .site-nav__toggle{ color:var(--cream);}
  .site-nav__bars,.site-nav__bars::before,.site-nav__bars::after{
    content:""; display:block; width:18px; height:var(--hair); background:currentColor;
    transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }
  .site-nav__bars{position:relative;}
  .site-nav__bars::before{position:absolute; top:-6px;}
  .site-nav__bars::after{position:absolute; top:6px;}
  .site-nav__list{
    position:absolute; inset:100% 0 auto 0; flex-direction:column; gap:var(--space-m);
    background:var(--ink); padding:var(--space-l) var(--container-pad);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }
  .site-nav__list a{color:var(--cream);}
  .site-nav[data-open="true"] .site-nav__list{transform:none; opacity:1; pointer-events:auto;}
  .site-nav[data-open="true"] .site-nav__bars{background:transparent;}
  .site-nav[data-open="true"] .site-nav__bars::before{transform:translateY(6px) rotate(45deg);}
  .site-nav[data-open="true"] .site-nav__bars::after{transform:translateY(-6px) rotate(-45deg);}
}

/* =====================================================================
   SECTIONS + GENERIC LAYOUT
   ===================================================================== */
.site-main{display:block;}
.section{padding-block:var(--space-section);}
.section.on-ink{background:var(--ink); color:var(--cream);}
.section__head{display:grid; gap:var(--space-s); max-width:60ch; margin-bottom:var(--space-m);}
.section__head .t-eyebrow{display:block;}

.card-grid{
  display:grid; gap:var(--space-l);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
}

/* =====================================================================
   HERO
   ===================================================================== */
/* =====================================================================
   FIRST-VISIT HOME LOADER
   Full blue cover with a masked circular window in the middle. Inside the
   window a cream circle crossfades through a few images; the window then
   scales out to reveal the site (driven by runHomeLoader() in interactions.js).
   Hidden by default — only shown while <html>.is-loading, which the head
   script sets once per session for non-reduced-motion visitors, so no-JS and
   repeat visits never see it.
   ===================================================================== */
.loader{display:none;}
.is-loading .loader{display:block; position:fixed; inset:0; z-index:9999;}
/* The window is a transparent hole; its huge box-shadow paints the blue cover
   around it. Growing the window + easing its corner radius to 0 melts the
   circle into the viewport rectangle (see runHomeLoader in interactions.js). */
.loader__window{
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  /* 140px sphere window; runHomeLoader grows it out to the viewport on reveal. */
  width:140px; height:140px; border-radius:70px; overflow:hidden;
  background:transparent; box-shadow:0 0 0 100vmax var(--ink);
}
.loader__circle{
  /* Rests at --ink so the sphere is invisible against the cover until
     runHomeLoader deepens it to --darker. */
  position:absolute; inset:0; border-radius:inherit; overflow:hidden;
  background:var(--ink);
}
.loader__img{
  position:absolute; inset:0; opacity:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}

.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  text-align:center; color:var(--cream);
}
.hero__media{position:absolute; inset:0; z-index:-1;}
.hero__img,.hero__video{width:100%; height:100%; object-fit:cover; display:block;}
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to bottom,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.5) 30%,
    rgba(0, 0, 0, 0.5) 60%,
    rgba(0, 0, 0, 0.7) 100%);
}
.hero__inner{
  display:grid; gap:var(--space-m); justify-items:center;
  padding-block:var(--space-3xl);
}
.hero__eyebrow{color:var(--cream);}
.hero__heading{max-width:18ch; margin-inline:auto;}
/* Vertical rule below the headline; grows downward from the top (GSAP scaleY).
   Pre-hidden under .has-js so it doesn't flash full-height before the script. */
.hero__rule{display:block; width:var(--hair); height:clamp(48px,8vh,96px); background:rgb(232 223 213 / 75%); margin-top:var(--space-s); transform-origin:top;}
@media (prefers-reduced-motion:no-preference){
  .has-js .hero__rule{transform:scaleY(0);}
}

/* word-by-word reveal masks (built by interactions.js) */
.hl-mask{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.14em; margin-bottom:-.14em;}
.hl-word{display:inline-block; will-change:transform,opacity;}

/* =====================================================================
   INTRO  (centred statement, scattered parallax imagery, sphere glow)
   ===================================================================== */
.intro{
  position:relative; overflow:hidden; isolation:isolate;
  padding-block:var(--space-4xl); min-height:min(1240px,118vh);
  display:flex; align-items:center; justify-content:center;
}
/* soft glow, a touch lighter than the paper bg, grows on scroll */
.intro__sphere{
  position:absolute; left:50%; top:50%; z-index:0;
  width:min(86vw,1100px); aspect-ratio:1; transform:translate(-50%,-50%);
  border-radius:var(--radius-circle); pointer-events:none;
  background:radial-gradient(circle at center, rgb(255 255 255 / 60%) 0%, rgb(255 255 255 / 60%) 32%, rgba(255, 255, 255, 0) 60%);
}
/* faint vertical hairlines above and below the statement */
.intro__rule{position:absolute; left:50%; width:var(--hair); background:var(--color-line); z-index:1;}
.intro__rule--top{top:10%; height:clamp(60px,14vh,170px);}
.intro__rule--bottom{bottom:10%; height:clamp(60px,14vh,170px);}

.intro__inner{
  position:relative; z-index:2; text-align:center;
  max-width:38rem; margin-inline:auto;
  display:grid; gap:var(--space-m); justify-items:center;
}
.intro__body{max-width:44ch; margin-inline:auto;}

/* scattered images: outer = anchor, .intro__media = fixed mask, img overfills
   so it can drift inside the mask (true parallax, frame stays put). */
.intro__scatter{position:absolute; inset:0; z-index:1;}
.intro__img{position:absolute;}
.intro__media{position:relative; margin:0; width:100%; height:100%; overflow:hidden;}
.intro__media img{
  position:absolute; inset:-15% 0 auto 0; width:100%; height:130%;
  object-fit:cover; display:block; will-change:transform;
}
.intro__img--1{top:8%;  left:19%; width:clamp(112px,11vw,195px); aspect-ratio:5/6;}
.intro__img--2{top:47%; left:5%;  width:clamp(140px,15vw,285px); aspect-ratio:3/4;}
.intro__img--3{top:19%; right:5%; width:clamp(145px,15vw,275px); aspect-ratio:3/4;}
.intro__img--4{top:70%; right:18%; width:clamp(112px,9.5vw,180px); aspect-ratio:5/6;}

/* stack the scatter into a simple grid on smaller screens */
@media (max-width:900px){
  .intro{padding-block:var(--space-3xl); min-height:0; flex-direction:column;}
  .intro__scatter{ display: none;
  }
  .intro__img{position:static; width:auto; aspect-ratio:4/3;}
  .intro__rule{display:none;}
}

/* =====================================================================
   APARTMENTS CAROUSEL  (engine ported from the Jouan build)
   ===================================================================== */
.apt-section{overflow:hidden;}
.apt-section__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--space-l); flex-wrap:wrap; margin-bottom:var(--space-xl);
}
.apt-section__title{margin:0;}
.apt-section__controls{display:flex; align-items:center; gap:var(--space-xl);}

.carousel-nav{display:flex; gap:var(--space-xs);}
.carousel-arrow{
  width:2.9rem; height:2.9rem; border-radius:var(--radius-circle);
  display:inline-grid; place-items:center; cursor:pointer;
  background:transparent; color:var(--cream); border:var(--hair) solid var(--color-line-on-ink);
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.carousel-arrow:hover{background:var(--cream); color:var(--ink); border-color:var(--cream);}
.carousel-arrow:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
.carousel-arrow[disabled]{opacity:.35; cursor:default;}

/* Track: starts aligned to the container's left edge, bleeds off the right. */
.apt-carousel{
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; cursor:grab;
  user-select:none; -webkit-user-select:none;
  padding-inline-start:max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
  padding-inline-end:var(--container-pad);
}
.apt-carousel::-webkit-scrollbar{display:none;}
.apt-carousel.is-dragging{cursor:grabbing;}
.apt-carousel img{-webkit-user-drag:none; pointer-events:none;}
.apt-carousel__track{display:flex; gap:var(--space-s); list-style:none; margin:0; padding:0; width:max-content;}
.apt-section.on-ink { background: var(--darker); }
/* Card */
.apt-card{
  flex:0 0 auto; width:clamp(280px,26vw,420px);
  display:flex; flex-direction:column;
  border-radius:var(--radius-md); overflow:hidden;
  background:rgba(232,223,213,.05);
}
@media (max-width:1000px){ .apt-card{ width:clamp(260px,42vw,360px); } }
@media (max-width:640px){ .apt-card{ width:min(82vw,360px); } }

.apt-card__media{position:relative; display:block; aspect-ratio:1/1; overflow:hidden;}
/* Apartment number badge (top-left), styled like the archive filters. */
.apt-card__number{
  position:absolute; top:var(--space-m); left:var(--space-m); z-index:2;
  background: #263c43ba; color:var(--cream);
  border-radius:var(--radius-sm);
  padding:.5em .7em; line-height:1;
  font-family:var(--font-body); font-weight:var(--w-medium); font-size:var(--fs-button);
  letter-spacing:var(--track-over); text-transform:uppercase;
  pointer-events:none;
}
.apt-card__link{display:block; width:100%; height:100%;}
.apt-card__img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
.apt-card__media:hover .apt-card__img{transform:scale(1.05);}
/* Quick View is the ONLY trigger: a button revealed on hover; it's the only
   interactive overlay, so clicking the image follows its link instead. */
.apt-card__quick{
  position:absolute; left:var(--space-m); bottom:var(--space-m); z-index:2;
  display:inline-flex; align-items:center; gap:.55em; color:var(--cream); cursor:pointer;
  border:0; background:transparent; padding:0; font:inherit;
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  text-shadow:0 1px 12px rgba(27,51,59,.6);
}
.apt-card__media:hover .apt-card__quick,
.apt-card__quick:focus-visible{opacity:1; transform:none; pointer-events:auto;}
@media (hover:none){
  .apt-card__quick{opacity:1; transform:none; pointer-events:auto;}
}

.apt-card__body{align-items: flex-start; padding:var(--space-m); color:var(--cream); flex:1 1 auto; display:flex; flex-direction:column; gap:var(--space-xs);}
.apt-card__name{margin:0; color:var(--cream);}
.apt-card__meta{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--space-xs) var(--space-s);}
.apt-card__meta li{display:inline-flex; align-items:center; gap:.3em; font-size:var(--fs-body-sm); color:var(--color-on-ink-muted);}
.apt-card__meta svg{flex:0 0 auto; color:var(--cream);}
.apt-card__availability{
  display:inline-block;
  background: #00000030; color:var(--cream);
  border-radius:var(--radius-sm);
  padding:.5em .7em; margin:0; line-height:1;
  font-family:var(--font-body); font-weight:var(--w-medium); font-size:var(--fs-button);
  letter-spacing:var(--track-over); text-transform:uppercase;
      font-size: 10px;
    padding: 10px 12px;
    width: auto;
    margin-top: 4px;
}

/* Pagination dots */
.apt-dots{display:flex; justify-content:center; gap:var(--space-xs); margin-top:var(--space-xl);}
.apt-dot{
  width:7px; height:7px; padding:0; border:0; border-radius:var(--radius-circle);
  background:var(--color-line-on-ink); cursor:pointer;
  transition:background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.apt-dot:hover{background:var(--color-on-ink-muted);}
.apt-dot.is-active{background:var(--accent); transform:scale(1.3);}

@media (max-width:640px){
  .apt-section__head{flex-direction:column; align-items:flex-start; gap:var(--space-m);}
  .apt-section__controls{width:100%; justify-content:space-between;}
}
@media (prefers-reduced-motion:reduce){
  .apt-card__img{transition:none;}
  .apt-card__media:hover .apt-card__img{transform:none;}
}

/* =====================================================================
   REASONS  (pinned, scroll-driven slides — text + image crossfade)
   ---------------------------------------------------------------------
   Default = stacked rows (no-JS / reduced-motion fallback). When JS pins
   the section it adds .is-enhanced and the slides stack and crossfade.
   ===================================================================== */
.reasons{padding-block:var(--space-section); position:relative; overflow:hidden;}

/* Enlarged solid circle behind the section; its right edge arcs through.
   Positioned via margins so GSAP can own the transform (scale) cleanly. */
.reasons__track{position:relative; z-index:1;}

/* Accumulating spheres: a layer that mirrors the item grid so the anchor sits
   exactly where the image circle does; spheres are conjoined either side. */
.reasons__spheres{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  max-width:1320px; margin-inline:auto; padding-inline:var(--container-pad);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-l);
  align-items:center;
}
.reasons__sphere-anchor{
  grid-column:2; justify-self:center; align-self:center; position:relative;
  width:clamp(360px,40vw,520px); aspect-ratio:1;
}
.reasons__sphere{
  position:absolute; top:0; width:100%; height:100%; border-radius:var(--radius-circle);
  background:#dbcbbc; opacity:0; will-change:opacity,transform;
}
.reasons__sphere--left{left:-100%;}
.reasons__sphere--right{left:100%;}
.reasons__sphere--farleft{left:-200%;}

.reasons__item{
  max-width:1320px; margin-inline:auto; padding-inline:var(--container-pad);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-l); align-items:center; min-height:80vh;
}
.reasons__text{display:flex; flex-direction:column; gap:var(--space-m);}
.reasons__eyebrow{display:block;}
.reasons__heading{margin:0; max-width:18ch;}

.reasons__media{margin:0; display:grid; place-items:center;}
.reasons__circle{
  position:relative; display:block; width:clamp(360px,40vw,520px); aspect-ratio:1;
}
.reasons__img-wrap{position:absolute; inset:0; border-radius:var(--radius-circle); overflow:hidden;}
.reasons__circle img{width:100%; height:100%; object-fit:cover; display:block;}

/* Enhanced: pinned panel, slides stacked and crossfading (opacity via GSAP). */
.reasons.is-enhanced{padding-block:0;}
.reasons.is-enhanced .reasons__track{position:relative; height:100vh;}
.reasons.is-enhanced .reasons__item{
  position:absolute; inset:0; min-height:0; height:100vh; will-change:opacity; z-index:1;
}

@media (max-width:768px){
  .reasons__item{grid-template-columns:1fr; gap:var(--space-l); min-height:0; padding-block:var(--space-m);}
  .reasons__circle{width:min(72vw,360px);}
  .reasons__spheres{display:none;}
}

/* =====================================================================
   LOCATION  (map left, dark panel + cycling list right)
   ===================================================================== */
.location{display:grid; grid-template-columns:1fr 1fr; margin-top: var(--space-2xl);}
.location__map{background:var(--cream); min-height:50vh;} /* blank placeholder */
.location__map .hmap__panel{display:none;} /* home map: markers only, no distances panel */
.location__panel{background:var(--ink); color:var(--cream); display:flex; align-items:center;}
.location__inner{
  width:100%; max-width:48rem; margin-inline:auto;
  padding:var(--space-3xl) var(--container-pad);
  display:flex; flex-direction:column;
}
.location__eyebrow{display:block; margin-bottom:var(--space-s);}
.location__heading{max-width:18ch; margin:0 0 var(--space-s);}
.location__body{ color:var(--color-on-ink-muted); margin:0 0 var(--space-s);}
.location__list{gap:0; margin:0;}
.location__list li{
  padding:var(--space-s) 0 var(--space-s) 1.2em;
  border-bottom:var(--hair) solid var(--color-line-on-ink);
  font-size:var(--fs-body-lg); line-height:1.55;
}
.location__list li::before{top:calc(var(--space-s) + 0.62em);}
.location__list li:last-child { border-bottom: 0px;}
@media (max-width:860px){
  .location{grid-template-columns:1fr;}
  .location__map{min-height:48vh;}
  .location__inner { padding: var(--space-xl) var(--container-pad); }
}
@media (max-width:768px){
  .location__map{aspect-ratio:1 / 1; min-height:0;} /* square map on mobile */
}

/* =====================================================================
   JOURNAL PREVIEW  (centred head, three overlay cards, view-all)
   ===================================================================== */
.journal__head{
  text-align:center; display:grid; gap:var(--space-s);
  max-width:50ch; margin:0 auto var(--space-xl);
}
.journal__head .t-eyebrow{display:block;}
.journal__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-l);}
.journal__foot{text-align:center; margin-top:var(--space-2xl);}
.journal__foot .btn--text{justify-content:center;}
@media (max-width:780px){ .journal__grid{grid-template-columns:1fr;} }

/* journal card: portrait image with category + title + date overlaid */
.jcard{position:relative;}
.jcard__link{display:block; text-decoration:none; color:var(--cream);}
.jcard__media{position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:var(--radius-md);}
.jcard__img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
.jcard__link:hover .jcard__img{transform:scale(1.04);}
.jcard__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgb(0 0 0 / 82%) 0%, rgba(27, 51, 59, .25) 46%, rgb(0 0 0 / 0%) 72%)
}
.jcard__body{
  position:absolute; left:0; right:0; bottom:0; padding:var(--space-l);
  display:grid; gap:var(--space-s); justify-items:center; text-align:center;
}
/* Category tag: warm-palette background (per category, via --cat-bg) with
   light cream text. The palette excludes the pale --warm-sand so cream stays
   legible on every tone. Fixed 11px label. */
.jcard__cat{
  display:inline-block; padding:0.6em 0.8em; border-radius:var(--radius-sm);
  background:var(--cat-bg, var(--ink)); color:var(--cream); font-size:11px;
}
.jcard__title{color:var(--cream); margin:0; max-width:22ch;}
.jcard__date{color:var(--color-on-ink-muted);}
@media (prefers-reduced-motion:reduce){
  .jcard__img{transition:none;}
  .jcard__link:hover .jcard__img{transform:none;}
}

/* =====================================================================
   BOOKING BAR
   ===================================================================== */
.booking-bar{background:var(--ink); color:var(--cream); padding-block:var(--space-xl);}
@media (max-width:640px){ .booking-bar{padding-inline:0;     padding-bottom: var(--space-l);} }
.booking-bar:not(.on-ink){background:transparent; color:var(--color-text);}
.booking-bar__inner{
  display:grid; gap:var(--space-l) var(--space-l); align-items:end;
  grid-template-columns:1fr;
}
@media (min-width:760px){
  .booking-bar__inner{grid-template-columns:2fr 1fr auto;}
}
.booking-bar__submit{align-self:end;}
/* The two date fields sit together and anchor the pop-out picker. */
.booking-bar__dates{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:var(--space-m); align-items:end;}

/* Pop-out date picker trigger fields — echo the bar's underline inputs. */
.booking-bar__datefield{
  display:grid; gap:var(--space-xs); text-align:left; cursor:pointer;
  padding:.55em 0; background:transparent; color:inherit;
  border:0; border-bottom:var(--hair) solid var(--color-line); border-radius:0;
  transition:border-color var(--dur) var(--ease);
}
.booking-bar.on-ink .booking-bar__datefield{border-bottom-color:var(--color-line-on-ink);}
.booking-bar__datefield:hover{border-bottom-color:currentColor;}
.booking-bar__datefield[aria-expanded="true"]{border-bottom-color:var(--accent);}
.booking-bar__datefield .t-overline{color:var(--color-text-muted);}
.booking-bar.on-ink .booking-bar__datefield .t-overline{color:var(--color-on-ink-muted);}
.booking-bar__datevalue{font-family:var(--font-body); font-size:var(--fs-body); color:var(--color-text-muted);}
.booking-bar.on-ink .booking-bar__datevalue{color:var(--color-on-ink-muted);}
.booking-bar__datefield.is-filled .booking-bar__datevalue{color:inherit;}

/* Popover placement under the date fields, lifted above adjacent sections. */
.booking-bar__dates .apt-datepicker{left:0; right:auto; top:calc(100% + 12px);}
.booking-bar.is-picker-open{position:relative; z-index:50;}

/* Stacked variant (Book modal): every field on its own row, full-width submit. */
.booking-bar--stacked{padding-block:0;}
.booking-bar--stacked .booking-bar__inner{grid-template-columns:1fr; gap:var(--space-m); max-width:none; padding-inline:0;}
.booking-bar--stacked .booking-bar__dates{grid-template-columns:1fr;}
.booking-bar--stacked .booking-bar__submit{width:100%; justify-content:space-between;}

/* --- Book-a-stay modal ------------------------------------------------- */
.book-modal{
  position:fixed; inset:0; z-index:1000;
  display:grid; place-items:center; padding:var(--space-l);
  overflow-y:auto; opacity:0; transition:opacity .28s var(--ease);
}
.book-modal[hidden]{display:none;}
.book-modal.is-open{opacity:1;}
.book-modal__overlay{position:absolute; inset:0; background:rgba(20,18,16,.55);}
.book-modal__panel{
  position:relative; z-index:1; width:min(460px, 100%);
  background:var(--color-bg); color:var(--color-text);
  border-radius:var(--radius-md); padding:var(--space-2xl) var(--space-xl);
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  transform:translateY(10px); transition:transform .28s var(--ease);
}
.book-modal.is-open .book-modal__panel{transform:none;}
.book-modal__close{
  position:absolute; top:var(--space-s); right:var(--space-s);
  width:2.2rem; height:2.2rem; display:grid; place-items:center;
  background:transparent; border:none; border-radius:50%;
  color:var(--color-text); cursor:pointer;
}
.book-modal__close:hover{background:var(--color-surface);}
.book-modal__title{margin:0 0 var(--space-3xs);}
.book-modal__lead{margin:0 0 var(--space-l); color:var(--color-text-muted);}
/* Accent-filled search button inside the modal (matches the apartment CTA). */
.book-modal .booking-bar__submit{--bg:var(--accent); --fg:var(--cream); --bd:var(--accent);}
.book-modal .booking-bar__submit:hover{--bg:var(--accent-hover); --fg:var(--cream); --bd:var(--accent-hover);}
@media (prefers-reduced-motion: reduce){
  .book-modal, .book-modal__panel{transition:none;}
}

/* =====================================================================
   JOURNAL CARD
   ===================================================================== */
.journal-card{background:var(--color-surface); border-radius:var(--radius-md); overflow:hidden;}
.journal-card__link{display:block; text-decoration:none; color:inherit;}
.journal-card__media{aspect-ratio:4/3; overflow:hidden; margin:0;}
.journal-card__media img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
.journal-card__link:hover .journal-card__media img{transform:scale(1.04);}
.journal-card__body{padding:var(--space-l); display:grid; gap:var(--space-xs);}
.journal-card__cat{color:var(--accent);}
.journal-card__title{margin:0;}

/* =====================================================================
   PAGINATION
   ===================================================================== */
.pagination{margin-top:var(--space-2xl); display:flex; gap:var(--space-s); flex-wrap:wrap;}
.pagination .page-numbers{
  display:inline-grid; place-items:center; min-width:2.4em; height:2.4em; padding-inline:var(--space-xs);
  border:var(--hair) solid var(--color-line); border-radius:var(--radius-sm); text-decoration:none;
  font-size:var(--fs-body-sm);
}
.pagination .page-numbers.current{background:var(--ink); color:var(--cream); border-color:var(--ink);}

/* =====================================================================
   CTA BAND  (hero-like image background, shorter)
   ===================================================================== */
.cta{
  position:relative; isolation:isolate; overflow:hidden; color:var(--cream);
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:65vh; padding-block:var(--space-4xl);
}
.cta__media{position:absolute; inset:0; z-index:-1;}
/* Taller than the frame so GSAP can drift it vertically (subtle parallax)
   without exposing an edge. */
.cta__img{position:absolute; top:-10%; left:0; width:100%; height:120%; object-fit:cover; display:block; will-change:transform;}
.cta__scrim{
  position:absolute; inset:0;
  background: rgba(0, 0, 0, 0.5);
}
.cta__inner{display:grid; gap:var(--space-m); justify-items:center;}
.cta__eyebrow{color:var(--cream);}
.cta__heading{max-width:20ch; margin-inline:auto;}
.cta__rule{display:block; width:var(--hair); height:clamp(48px,8vh,96px); background:rgb(232 223 213 / 75%); margin-top:var(--space-s);}

/* Frosted accent dot above the hero + CTA eyebrows. Scales in from 0 (GSAP);
   pre-hidden under .has-js so there's no flash before the script runs. */
.deco-circle{
  width:clamp(1.925rem, 1.54rem + 1.12vw, 2.625rem); aspect-ratio:1; border-radius:var(--radius-circle);
  background:rgba(232,223,213,.12);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  pointer-events:none;
  margin-bottom: var(--space-s);
}
@media (prefers-reduced-motion:no-preference){
  .has-js .deco-circle{transform:scale(0); opacity:0;}
}

/* =====================================================================
   FOOTER BOOKING BAR + SITE FOOTER
   ===================================================================== */
.footer-booking{background:var(--ink);}

.site-footer{background:var(--darker); color:var(--cream); padding-block:var(--space-4xl) var(--space-xl);}
.site-footer__inner{display:grid; gap:var(--space-2xl); grid-template-columns:1fr;}
@media (min-width:760px){ .site-footer__inner{grid-template-columns:1.6fr 1fr 1fr 1.5fr;} }

.site-footer__brand{display:grid; gap:var(--space-m); align-content:start;}
.site-footer__logo{display:inline-block; color:var(--cream);}
.site-footer__logo .brand-wordmark{height:1.5rem; width:auto;}
.site-footer__social{list-style:none; margin:0; padding:0; display:flex; gap:var(--space-s);}
.site-footer__social a{
  display:inline-grid; place-items:center; width:2.4em; height:2.4em; border-radius:var(--radius-circle);
  background:rgba(232,223,213,.1); color:var(--cream);
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.site-footer__social a:hover{background:var(--cream); color:var(--ink);}
.site-footer__company{display:grid; gap:var(--space-3xs);}
.site-footer__company .t-overline{color:var(--color-on-ink-muted);}
.site-footer__company a{color:var(--cream); text-decoration:none;}
.site-footer__company a:hover{color:var(--accent);}

.site-footer__title{color:var(--color-on-ink-muted); margin:0 0 var(--space-m);}
.site-footer__menu,.site-footer__contact,.site-footer__posts{list-style:none; margin:0; padding:0; display:grid; gap:var(--space-s);}
.site-footer__menu a,.site-footer__contact a{text-decoration:none; color:var(--cream); transition:color var(--dur) var(--ease);}
.site-footer__menu a:hover,.site-footer__contact a:hover{color:var(--accent);}
.site-footer__contact li{color:var(--color-on-ink-muted);}

.fpost{display:flex; align-items:center; gap:var(--space-s); text-decoration:none; color:var(--cream);}
.fpost__media{flex:0 0 auto; width:48px; height:48px; border-radius:var(--radius-circle); overflow:hidden;}
.fpost__media img{width:100%; height:100%; object-fit:cover; display:block;}
.fpost__body{display:grid; gap:2px;}
.fpost__title{color:var(--cream); line-height:1.4;}
.fpost__date{font-size:var(--fs-body-sm); color:var(--color-on-ink-muted);}
.fpost:hover .fpost__title{color:var(--accent);}

.site-footer__legal{
  display:flex; justify-content:space-between; align-items:center; gap:var(--space-m); flex-wrap:wrap;
  margin-top:var(--space-2xl); padding-top:var(--space-l); border-top:var(--hair) solid var(--color-line-on-ink);
}
.site-footer__legal p{margin:0; color:var(--color-on-ink-muted);}
.site-footer__legal a{color:var(--color-on-ink-muted); text-decoration:none;}
.site-footer__legal a:hover{color:var(--cream);}
.site-footer__policies{display:flex; flex-wrap:wrap; gap:var(--space-s) var(--space-l);}

/* =====================================================================
   APARTMENT SINGLE — HEADER BAND + GALLERY
   ===================================================================== */
/* Dark band the overlay header sits over: title, quick facts, gallery grid. */
.apt-header{
  background:var(--ink); color:var(--cream);
  padding-top:clamp(7rem, 5.5rem + 6vw, 11rem);
  padding-bottom:var(--space-3xl);
}
/* Pre-hide the header's reveal targets before interactions.js runs, so they
   animate in cleanly with no flash of the settled state. Gated on .has-js
   (set in <head>) and motion preference; no-JS / reduced-motion stay visible,
   and the JS fallback forces them visible if GSAP fails to load. */
@media (prefers-reduced-motion:no-preference){
  .has-js .apt-header [data-reveal-item],
  .has-js .apt-header [data-apt-gallery]{opacity:0;}
}
.apt-header__top{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--space-l) var(--space-xl); flex-wrap:wrap;
  margin-bottom:var(--space-l);
}
.apt-header__intro{display:grid; gap:var(--space-m); min-width:0;}
.apt-header__name{display:grid; gap:var(--space-s);}
.apt-header__eyebrow{color:var(--color-on-ink-muted);}
.apt-header__title{margin:0; max-width:20ch; font-size:calc(var(--fs-display) * 0.88);}
.apt-header__facts{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:var(--space-s) var(--space-m);
}
.apt-header__facts li{display:inline-flex; align-items:center; gap:.6em; font-size:var(--fs-body-sm); color:var(--color-on-ink-muted);}
.apt-header__facts .apt-icon{flex:0 0 auto; color:var(--cream);}
.apt-header__all{flex:0 0 auto; padding-bottom:.15em;}

/* Gallery: one wide feature image, then a 2x2 grid of thumbnails. The lead
   takes two of the three columns, so the whole grid sits shorter. */
.apt-gallery{
  display:grid; gap:var(--space-xs);
  grid-template-columns:2fr 1fr 1fr;
  grid-template-rows:repeat(2, 1fr);
  aspect-ratio:16 / 7;
}
.apt-gallery__cell{position:relative; margin:0; overflow:hidden; background:rgba(232,223,213,.06); cursor:pointer; border-radius: var(--radius-sm);}
.apt-gallery__cell--lead{grid-column:1; grid-row:1 / span 2;}
.apt-gallery__img{width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--dur) var(--ease);}
.apt-gallery__cell:hover .apt-gallery__img{transform:scale(1.03);}
.apt-gallery__more{
  position:absolute; inset:0; border:0; cursor:pointer; color:var(--cream);
  display:grid; place-items:center; text-align:center; padding:var(--space-s);
  background:rgba(0, 0, 0, 0.62);
  transition:background-color var(--dur) var(--ease);
}
.apt-gallery__more:hover{background:rgba(23,41,47,.76);}

@media (max-width:860px){
  .apt-gallery{
    grid-template-columns:1fr 1fr;
    grid-template-rows:none;
    aspect-ratio:auto;
  }
  .apt-gallery__cell{aspect-ratio:4 / 3;}
  .apt-gallery__cell--lead{grid-column:1 / -1; grid-row:auto; aspect-ratio:16 / 10;}
}

/* --- Body: main content column + sticky booking aside ------------------ */
.apt-body__grid{
  display:grid; align-items:start;
  grid-template-columns:minmax(0,1.7fr) minmax(0,0.9fr);
  gap:clamp(2rem, 1rem + 5vw, 5.5rem);
}
.apt-body__main{display:grid; gap:var(--space-xl); min-width:0;}
.apt-body__aside{position:sticky; top:var(--space-xl);}

@media (max-width:980px){
  .apt-body__grid{grid-template-columns:1fr; gap:var(--space-2xl);}
  .apt-body__aside{position:static;}
}

/* --- Overview: statement, copy, feature tiles -------------------------- */
.apt-overview{display:grid; gap:var(--space-m);}
.apt-overview__heading{margin:0; max-width:39ch;}
.apt-overview__copy{color:var(--color-text-muted); max-width:94ch; display:grid; gap:var(--space-m);}
.apt-overview__copy p{margin:0 0 var(--space-m);}
.apt-overview__copy p:last-child{margin-bottom:0;}

.apt-tiles{
  list-style:none; margin:var(--space-m) 0 0; padding:0;
  display:grid; gap:var(--space-xs);
  grid-template-columns:repeat(5, 1fr);
}
.apt-tile{
  display:grid; justify-items:center; align-content:center; gap:var(--space-s);
  text-align:center; padding:var(--space-l) var(--space-xs);
  border:var(--hair) solid var(--color-line); border-radius:var(--radius-sm);
}
.apt-tile .apt-icon{color:var(--ink);}
.apt-tile__label{font-size:var(--fs-body-sm); line-height:1.3; color:var(--color-text);}
@media (max-width:1180px){ .apt-tiles{grid-template-columns:repeat(3,1fr);} }
@media (max-width:520px){ .apt-tiles{grid-template-columns:repeat(2,1fr);} }

/* --- Booking card (sticky aside) --------------------------------------- */
.apt-booking{
  background:var(--color-surface); border-radius:var(--radius-sm);
  padding:var(--space-xl); display:grid; gap:var(--space-s);
}
.apt-booking__intro{display:grid; gap:var(--space-3xs);}
.apt-booking__title{margin:0; text-align: center;}
.apt-booking__lead{margin:0; color:var(--color-text-muted); text-align: center;}
.apt-booking__direct{margin:var(--space-xs) 0 0; font-size: var(--fs-body-sm);
    margin-top: 0;}
.apt-booking__note{color:var(--color-text-muted); padding-top:var(--space-s); border-top:var(--hair) solid var(--color-line);}
.apt-booking__note p{margin:0;}

/* On-brand selector + "Book now" (opens the SuperControl cart popup).
   Guests uses the theme's native .field underline styling. */
.apt-booking__form{ margin:var(--space-xs) 0 0; display:grid; gap:var(--space-s); position:relative; padding: var(--space-m);background-color: #ffffff30; border-radius: var(--radius-md);}
/* Lift the form (and its open date popover) above the later booking rows —
   their reveal-animation transforms create stacking contexts that would
   otherwise paint over the popover. */
.apt-booking__form.is-picker-open{z-index:50;}
.apt-booking__book{width:100%; justify-content:center; background:var(--accent); color:var(--cream); border-color:var(--accent); border-radius: var(--radius-sm);}
.apt-booking__book:hover{background:var(--accent-hover); border-color:var(--accent-hover);}
.apt-booking__hint{margin:0; color:var(--color-text-muted);}
.apt-booking__hint:empty{display:none;}
.apt-booking__summary{margin:0;}
.apt-booking__sc-mount{display:none;}

/* Airbnb-style check-in / check-out fields + popover date picker. The fields
   echo the theme's underline inputs so they sit within the cream card rather
   than as stark boxes on top of it. */
.apt-booking__dates{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:var(--space-l);}
.apt-booking__datefield{
  display:grid; gap:var(--space-2xs); text-align:left; cursor:pointer;
  padding:.55em 0; background:transparent;
  border:0; border-bottom:var(--hair) solid var(--color-line); border-radius:0;
  transition:border-color var(--dur) var(--ease);
}
.apt-booking__datefield:hover{border-bottom-color:var(--color-text);}
.apt-booking__datefield[aria-expanded="true"]{border-bottom-color:var(--accent);}
.apt-booking__datefield-label{color:var(--color-text-muted);}
/* Check-in / check-out / guests values share one size + weight, and read muted
   until an actual choice is made (.is-filled toggled by booking-calendar.js). */
.apt-booking__datefield-value,
.apt-booking__guests select{
  font-family:var(--font-body); font-size:var(--fs-body); font-weight:var(--w-regular);
  color:var(--color-text-muted);
}
.apt-booking__datefield.is-filled .apt-booking__datefield-value,
.apt-booking__guests select.is-filled{color:var(--color-text);}

.apt-datepicker{
  position:absolute; z-index:60; top:calc(100% + 8px); right:0;
  width:max-content; max-width:92vw;
  background:#fff; border:var(--hair) solid var(--color-line); border-radius:var(--radius-md, 12px);
  box-shadow:0 18px 50px rgba(0,0,0,.16); padding:var(--space-l);
}
.apt-datepicker[hidden]{display:none;}
.apt-datepicker__grids{display:flex; gap:var(--space-xl);}
.apt-datepicker__nav{
  position:absolute; top:var(--space-l); width:2rem; height:2rem;
  display:grid; place-items:center; border-radius:50%;
  background:transparent; border:none; color:var(--color-text); cursor:pointer;
}
.apt-datepicker__nav:hover{background:var(--color-surface);}
.apt-datepicker__nav[disabled]{opacity:.3; cursor:default;}
.apt-datepicker__nav--prev{left:var(--space-l);}
.apt-datepicker__nav--next{right:var(--space-l);}

.apt-cal{min-width:15rem;}
.apt-cal__title{text-align:center; margin:0 0 var(--space-s); color:var(--color-text); font-weight:var(--w-medium);}
.apt-cal__grid{display:grid; grid-template-columns:repeat(7, 1fr); gap:2px;}
.apt-cal__dow{display:grid; place-items:center; height:1.8rem; color:var(--color-text-muted); font-size:var(--fs-small);}
.apt-cal__pad{aspect-ratio:1;}
.apt-cal__day{
  position:relative; aspect-ratio:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1px;
  background:transparent; border:none; border-radius:50%; cursor:pointer;
  color:var(--color-text); font-family:var(--font-body); line-height:1;
}
.apt-cal__num{font-size:var(--fs-small);}
.apt-cal__price{font-size:.6rem; color:var(--color-text-muted);}
.apt-cal__day:not(.is-disabled):hover{background:var(--color-surface);}
.apt-cal__day.is-today .apt-cal__num{text-decoration:underline;}
.apt-cal__day.is-disabled{color:var(--color-text-muted); text-decoration:line-through; cursor:default; opacity:.5;}
.apt-cal__day.is-in-range{background:color-mix(in srgb, var(--accent) 14%, #fff); border-radius:0;}
.apt-cal__day.is-start,
.apt-cal__day.is-end{background:var(--accent); color:var(--cream);}
.apt-cal__day.is-start .apt-cal__price,
.apt-cal__day.is-end .apt-cal__price{color:var(--cream);}
.apt-cal__day.is-start{border-top-right-radius:0; border-bottom-right-radius:0;}
.apt-cal__day.is-end{border-top-left-radius:0; border-bottom-left-radius:0;}
.apt-cal__day:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}

.apt-datepicker__note{margin:var(--space-s) 0 0; color:var(--color-text-muted); min-height:1.2em;}
.apt-datepicker__foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-s); margin-top:var(--space-s);
  padding-top:var(--space-s); border-top:var(--hair) solid var(--color-line);
}
.apt-datepicker__clear{background:none; border:none; padding:0; cursor:pointer; color:var(--color-text); text-decoration:underline; font-family:var(--font-body);}
.apt-datepicker__done{padding-block:.5em;}

@media (max-width:719px){
  /* Stretch the popover across the fields' full width (left:0 + right:0) and
     let the calendar flex down to fit, rather than overflowing the screen. */
  .apt-datepicker{
    left:0; right:0; width:auto; max-width:none;
    padding:var(--space-m);
  }
  .apt-datepicker__grids{gap:0;}
  .apt-cal{min-width:0;}
  /* The per-day prices are too wide for 7 columns on a phone and force the grid
     (and the whole page) into horizontal overflow. Hide them on mobile and let
     the cells shrink — the total still shows in the summary after selecting. */
  .apt-cal__day{min-width:0;}
  .apt-cal__price{display:none;}
  /* Keep the prev/next arrows aligned with the tighter padding. */
  .apt-datepicker__nav{top:var(--space-m);}
  .apt-datepicker__nav--prev{left:var(--space-m);}
  .apt-datepicker__nav--next{right:var(--space-m);}
}

.apt-booking__note strong{color:var(--color-text); font-weight:var(--w-medium);}

/* --- The Layout: room cards -------------------------------------------- */
.apt-layout{display:grid; gap:var(--space-m);}
.apt-layout__heading{margin:0;}
.apt-layout__grid{
  display:grid; gap:var(--space-xl) var(--space-s);
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}
.apt-room{
  display:grid; gap:0; align-content:start; overflow:hidden;
  background:var(--color-surface-2); border-radius:var(--radius-sm);
}
.apt-room__media{margin:0; overflow:hidden; aspect-ratio:4 / 3; background:rgba(27,51,59,.06);}
.apt-room__img{width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--dur) var(--ease);}
.apt-room:hover .apt-room__img{transform:scale(1.03);}
.apt-room__body{display:grid; gap:var(--space-2xs); padding:var(--space-m);}
.apt-room__title{margin:0;}
.apt-room__features{
  list-style:none; margin:0; padding:0; display:grid; gap:0;
  font-size:var(--fs-body-sm); color:var(--color-text-muted);
}
.apt-room__features li{padding:var(--space-2xs) 0; border-bottom:var(--hair) solid var(--color-line);}
.apt-room__features li:first-child{padding-top:0;}
.apt-room__features li:last-child{padding-bottom:0; border-bottom:0;}

@media (max-width: 600px) {
  .apt-layout__grid { gap: var(--space-m); }
}

/* --- Amenities: grouped columns ---------------------------------------- */
.apt-amenities{display:grid; gap:var(--space-l);}
.apt-amenities__heading{margin:0; color:var(--color-text)}
.apt-amenities__grid{
  display:grid; gap:var(--space-xl) var(--space-l);
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
}
.apt-amenities__cat{margin:0 0 var(--space-s); color:var(--color-text-muted);}
.apt-amenities__list{
  list-style:none; margin:0; padding:0; display:grid; gap:var(--space-2xs);
  font-size:var(--fs-body-sm); color:var(--color-text-muted);
}

/* --- Apartment video (optional, below Amenities) ---------------------- */
.apt-video{display:grid; gap:var(--space-l);}
.apt-video__heading{margin:0; color:var(--color-text);}
.apt-video__frame{position:relative; width:100%; aspect-ratio:16 / 9; overflow:hidden; border-radius:var(--radius-sm); background:var(--ink);}
.apt-video__frame iframe,
.apt-video__frame video,
.apt-video__frame embed,
.apt-video__frame object{position:absolute; inset:0; width:100%; height:100%; border:0; display:block;}

/* --- Gallery lightbox -------------------------------------------------- */
.apt-lightbox{
  position:fixed; inset:0; z-index:1000; border:0; margin:0; padding:0;
  width:100%; height:100%;
  background:color-mix(in srgb, #081317 86%, transparent);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.apt-lightbox.is-open{opacity:1; visibility:visible;}
.apt-lightbox__img{
  max-width:min(92vw, 1400px); max-height:86vh; object-fit:contain; display:block;
  opacity:0; transition:opacity .45s var(--ease);
}
.apt-lightbox__img.is-loaded{opacity:1;}
@media (prefers-reduced-motion: reduce){
  .apt-lightbox__img{transition:none;}
}
.apt-lightbox__btn{
  position:absolute; border:0; cursor:pointer; color:var(--cream);
  background:rgba(232,223,213,.12); border-radius:var(--radius-circle);
  width:3rem; height:3rem; display:grid; place-items:center; font-size:1.4rem; line-height:1;
  transition:background-color var(--dur) var(--ease);
}
.apt-lightbox__btn:hover{background:rgba(232,223,213,.24);}
.apt-lightbox__btn svg{display:block;}
.apt-lightbox__close{top:var(--space-l); right:var(--space-l);}
.apt-lightbox__prev{left:var(--space-l); top:50%; transform:translateY(-50%);}
.apt-lightbox__next{right:var(--space-l); top:50%; transform:translateY(-50%);}
.apt-lightbox__count{
  position:absolute; bottom:var(--space-l); left:50%; transform:translateX(-50%);
  color:var(--color-on-ink-muted); font-size:var(--fs-body-sm);
}
@media (max-width:520px){
  .apt-lightbox__prev{left:var(--space-xs);}
  .apt-lightbox__next{right:var(--space-xs);}
}

/* =====================================================================
   APARTMENT — "INCLUDED WITH EVERY STAY" (The Hidden Lounge)
   ===================================================================== */
.lounge{display:grid; grid-template-columns:1fr 1fr; align-items:stretch; background:var(--ink); color:var(--cream);}
.lounge__media{position:relative; overflow:hidden; min-height:clamp(320px, 42vw, 560px);}
.lounge__img{width:100%; height:100%; object-fit:cover; display:block;}

/* Lounge gallery: cross-fade carousel with chevron + dot navigation. */
.lounge__gallery{position:absolute; inset:0; touch-action:pan-y;}
.lounge__slides{list-style:none; margin:0; padding:0; position:absolute; inset:0;}
.lounge__slide{position:absolute; inset:0; opacity:0; transition:opacity .8s var(--ease);}
.lounge__slide.is-active{opacity:1;}

.lounge__nav{
  position:absolute; left:50%; bottom:var(--space-m); transform:translateX(-50%); z-index:2;
  display:flex; align-items:center; gap:var(--space-2xs);
  padding:5px 8px; border-radius:var(--radius-pill); background:rgba(26,26,26,.32);
}
@supports (backdrop-filter:blur(4px)){ .lounge__nav{background:rgba(26,26,26,.22); backdrop-filter:blur(4px);} }
.lounge__chev{
  display:grid; place-items:center; width:26px; height:26px; padding:0;
  border:0; background:transparent; color:var(--cream); cursor:pointer; opacity:.85; border-radius:50%;
  transition:opacity var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.lounge__chev:hover{opacity:1; background:rgba(255,255,255,.16);}
.lounge__chev svg{display:block;}
.lounge__dots{display:flex; align-items:center; gap:6px; margin:0 4px;}
.lounge__dot{
  width:8px; height:8px; padding:0; border:0; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.5); cursor:pointer;
  transition:width var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.lounge__dot:hover{background:rgba(255,255,255,.85);}
.lounge__dot.is-active{width:22px; background:var(--cream);}
.lounge__panel{display:flex; align-items:center;}
.lounge__inner{
  width:100%; max-width:42rem; margin-inline:auto;
  padding:var(--space-3xl) var(--container-pad);
  display:flex; flex-direction:column; gap:var(--space-s);
}
.lounge__eyebrow{display:block;}
.lounge__heading{ margin:0;}
.lounge__body{color:var(--color-on-ink-muted); margin:0;}
.lounge__list{
  list-style:none; margin:var(--space-m) 0 0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-s) var(--space-l);
}
.lounge__feature{
  display:flex; align-items:center; gap:.8em;
  font-size:var(--fs-body); color:var(--cream);
  padding-bottom:var(--space-xs); border-bottom:var(--hair) solid var(--color-line-on-ink);
}
.lounge__feature::before{
  content:""; flex:0 0 auto; width:.5rem; height:.5rem; border-radius:var(--radius-circle);
  background:var(--accent);
}
/* Multi-colour bullets, cycling the secondary palette. */
.lounge__feature:nth-child(1)::before{background:var(--warm-terracotta);}
.lounge__feature:nth-child(2)::before{background:var(--warm-ochre);}
.lounge__feature:nth-child(3)::before{background:var(--warm-sage);}
.lounge__feature:nth-child(4)::before{background:var(--cool-sky);}
.lounge__feature:nth-child(5)::before{background:var(--cool-lilac);}
.lounge__feature:nth-child(6)::before{background:var(--warm-sand);}
/* Drop the separator under the bottom row (last two cells of the 2-col grid). */
.lounge__feature:nth-last-child(-n+2){border-bottom:0;}
@media (max-width:900px){
  .lounge{grid-template-columns:1fr;}
  .lounge__media{min-height:clamp(240px, 56vw, 420px);}
}
@media (max-width:480px){
  .lounge__list{grid-template-columns:1fr;}
}

/* =====================================================================
   APARTMENT — SERVICES & EXTRAS
   ===================================================================== */
.services {
    padding-bottom: 0;
}

.services__grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--space-s); grid-template-columns:repeat(4, 1fr);
}
.service-card{
  display:grid; gap:0; align-content:start; overflow:hidden;
  background:var(--color-surface-2); border-radius:var(--radius-sm);
}
.service-card__media{margin:0; overflow:hidden; aspect-ratio:4 / 3; background:rgba(27,51,59,.06);}
.service-card__img{width:100%; height:100%; object-fit:cover; display:block;}
.service-card__body{display:grid; gap:var(--space-2xs); padding:var(--space-m);}
.service-card__title{margin:0;}
.service-card__text{margin:0; color:var(--color-text-muted);}
@media (max-width:1000px){ .services__grid{grid-template-columns:repeat(2, 1fr);} }
@media (max-width:560px){ .services__grid{grid-template-columns:1fr;} }

/* =====================================================================
   APARTMENT — LOCATION & DISTANCES
   ===================================================================== */
.distances__panel{display:grid; gap:var(--space-s);}
.distances__lists{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-xl) var(--space-l);
  background:var(--color-surface-2); border-radius:var(--radius-sm);
  padding:var(--space-xl);
}
.distances__group{display:grid; gap:var(--space-m); align-content:start;}
.distances__cat{margin:0; color:var(--color-text);}
.distances__rows{list-style:none; margin:0; padding:0; display:grid; gap:var(--space-xs);}
.distances__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-m);
  font-size:var(--fs-body-sm);
  padding-bottom:var(--space-xs); border-bottom:var(--hair) solid var(--color-line);
}
.distances__place{color:var(--color-text-muted);}
.distances__dist{color:var(--color-text-muted); white-space:nowrap;}
.distances__map{position:relative; overflow:hidden; background:var(--cream); border-radius:var(--radius-sm); width:100%; aspect-ratio:16 / 9; --hmap-main:var(--accent); --hmap-place:#2a6df4;}

/* Nearby map: markers, fly-to panel, popups (config in hidden_map_config). */
.hmap__marker{cursor:pointer;}
.hmap__marker--main{position:relative; width:22px; height:22px;}
.hmap__pin{position:absolute; inset:0; border-radius:50%; background:var(--hmap-main); border:3px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.35);}
.hmap__pulse{position:absolute; inset:-7px; border-radius:50%; background:var(--hmap-main); opacity:.35; animation:hmapPulse 2.4s ease-out infinite;}
@keyframes hmapPulse{0%{transform:scale(.6); opacity:.5;} 70%{transform:scale(1.6); opacity:0;} 100%{transform:scale(1.6); opacity:0;}}
@media (prefers-reduced-motion:reduce){ .hmap__pulse{animation:none;} }
.hmap__marker--place{width:14px; height:14px; border-radius:50%; background:var(--hmap-place); border:2.5px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.3);}

.hmap__panel{
  position:absolute; top:12px; left:12px; z-index:2; width:min(260px, calc(100% - 24px));
  max-height:calc(100% - 24px); display:flex; flex-direction:column;
  background:var(--color-bg); border-radius:var(--radius-sm); overflow:hidden;
}
.hmap__phead{padding:12px 14px; border-bottom:var(--hair) solid var(--color-line);}
.hmap__ptitle{margin:0; font-family:var(--font-body); font-weight:var(--w-medium); font-size:var(--fs-body); color:var(--color-text);}
.hmap__psub{margin:2px 0 0; font-size:var(--fs-body-sm); color:var(--color-text-muted);}
.hmap__plist{margin:0; padding:6px; list-style:none; overflow-y:auto;}
.hmap__pitem{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--radius-sm); cursor:pointer; transition:background-color var(--dur) var(--ease);}
.hmap__pitem:hover{background:rgba(27,51,59,.06);}
.hmap__pdot{flex:0 0 auto; width:11px; height:11px; border-radius:50%;}
.hmap__pdot--main{background:var(--hmap-main);}
.hmap__pdot--place{background:var(--ink);}
.hmap__pn{flex:1 1 auto; font-size:var(--fs-body-sm); color:var(--color-text); line-height:1.2;}
.hmap__pt{flex:0 0 auto; font-size:var(--fs-body-sm); color:var(--color-text-muted); white-space:nowrap;}

.distances__map .maplibregl-popup-content{font-family:var(--font-body); border-radius:var(--radius-sm); padding:10px 12px;}
.hmap__pname{font-size:var(--fs-body-sm); font-weight:var(--w-medium); color:var(--color-text);}
.hmap__pdesc{margin-top:3px; font-size:var(--fs-body-sm); color:var(--color-text-muted); line-height:1.35;}
.hmap__ptime{margin-top:5px; font-size:var(--fs-body-sm); font-weight:var(--w-medium); color:var(--hmap-place);}

@media (max-width:900px){
  .distances__lists{grid-template-columns:repeat(2, 1fr);}
  .hmap__panel{width:calc(100% - 24px); max-height:44%;}
}
@media (max-width:520px){
  .distances__lists{grid-template-columns:1fr;}
}
@media (max-width:768px){
  /* Square map on mobile, and drop the on-map distances panel for a clean map. */
  .distances__map{aspect-ratio:1 / 1;}
  .distances__map .hmap__panel{display:none;}
}

/* =====================================================================
   BACK-TO-TOP  (sticky, appears past the Services & Extras section)
   ===================================================================== */
.back-to-top{
  position:fixed; right:clamp(1rem, 0.5rem + 2vw, 2rem); bottom:clamp(1rem, 0.5rem + 2vw, 2rem);
  z-index:80; width:3rem; height:3rem; border:0; border-radius:var(--radius-circle);
  display:grid; place-items:center; cursor:pointer;
  background:var(--ink); color:var(--cream);
  box-shadow:0 8px 24px rgba(27,51,59,.28);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity var(--dur) var(--ease), visibility var(--dur) var(--ease), transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.back-to-top.is-visible{opacity:1; visibility:visible; transform:none;}
.back-to-top:hover{background:var(--accent);}
@media (prefers-reduced-motion:reduce){
  .back-to-top{transition:opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);}
}

/* =====================================================================
   QUICK VIEW MODAL  (apartment card → modal, prev/next through carousel)
   ===================================================================== */
.qv{
  position:fixed; inset:0; z-index:1100; padding:var(--space-l);
  display:flex; align-items:flex-start; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.qv.is-open{opacity:1; visibility:visible;}
.qv__overlay{position:absolute; inset:0; background:color-mix(in srgb, var(--darker) 86%, transparent); cursor:pointer;}
.qv__panel{
  position:relative; z-index:1; width:min(960px, 100%);
  max-height:min(88vh, 720px); overflow-y:auto; /* hug content, cap + scroll if very tall */
  background:var(--color-surface-2); border-radius:var(--radius-lg);
  padding:var(--space-xs);
  display:grid; gap:var(--space-l);
}
.qv__close{
  position:absolute; bottom:var(--space-s); right:var(--space-s); z-index:2;
  width:2.4rem; height:2.4rem; display:grid; place-items:center; cursor:pointer; border:0;
  border-radius:var(--radius-circle); background:rgba(27,51,59,.06); color:var(--ink);
  transition:background-color var(--dur) var(--ease);
}
.qv__close:hover{background:rgba(27,51,59,.12);}
.qv__gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-xs);}
.qv__shot{margin:0; overflow:hidden; border-radius:var(--radius-md); aspect-ratio:4/5; background:rgba(27,51,59,.06);}
.qv__shot img{width:100%; height:100%; object-fit:cover; display:block;}
.qv__body{display:grid; gap:var(--space-s); padding: 0 var(--space-s) var(--space-s) var(--space-s);}
.qv__eyebrow{color:var(--color-text-muted);}
.qv__title{margin:0;}
.qv__heading{margin:0; color:var(--color-text-muted); max-width:56ch;}
.qv__facts{
  list-style:none; margin:var(--space-2xs) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:var(--space-s) var(--space-l);
}
.qv__facts li{display:inline-flex; align-items:center; gap:.55em; font-size:var(--fs-body-sm); color:var(--color-text);}
.qv__facts .apt-icon{flex:0 0 auto; color:var(--ink);}
.qv__actions{display:flex; flex-wrap:wrap; gap:var(--space-s); margin-top:var(--space-s); padding-right:3rem;}
.qv__more,.qv__all{
  display:inline-flex; align-items:center; gap:.7em; padding:.75em 1.5em; text-decoration:none;
  border-radius:var(--radius-pill); border:var(--hair) solid transparent;
  font-family:var(--font-body); font-weight:var(--w-medium); font-size:var(--fs-button);
  letter-spacing:var(--track-over); text-transform:uppercase;
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.qv__more{background:var(--ink); color:var(--cream); border-color:var(--ink);}
.qv__more:hover{background:var(--accent); border-color:var(--accent);}
.qv__all{background:transparent; color:var(--ink); border-color:var(--color-line);}
.qv__all:hover{border-color:var(--ink);}
.qv__more svg,.qv__all svg{transition:transform var(--dur) var(--ease);}
.qv__more:hover svg,.qv__all:hover svg{transform:translateX(.25em);}
.qv__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:3rem; height:3rem; display:grid; place-items:center; cursor:pointer; border:0;
  border-radius:var(--radius-circle); background:rgba(232,223,213,.14); color:var(--cream);
  transition:background-color var(--dur) var(--ease);
}
.qv__nav:hover{background:rgba(232,223,213,.28);}
.qv__prev{left:var(--space-l);}
.qv__next{right:var(--space-l);}
@media (max-width:768px){
  .qv{padding:var(--space-s);}

  /* Just the first image to keep the modal short. */
  .qv__gallery{grid-template-columns:1fr;}
  .qv__shot{aspect-ratio:16/10;}
  .qv__shot:not(:first-child){display:none;}

  .qv__actions{flex-direction:column; align-items:stretch; padding-right:0;}
  .qv__more,.qv__all{justify-content:center;}
  .qv__all{display:none;} /* only "Find out more" on mobile */

  /* Controls become a bottom row: prev bottom-left, next bottom-right, close
     centred inline between them. prev/next are children of .qv, close is lifted
     out of the panel with position:fixed, so all three share one bottom line. */
  .qv__nav{top:auto; bottom:var(--space-l); transform:none; width:2.8rem; height:2.8rem;}
  .qv__prev{left:var(--space-l); right:auto;}
  .qv__next{right:var(--space-l); left:auto;}
  .qv__close{
    position:fixed; top:auto; bottom:var(--space-l); left:50%; right:auto;
    transform:translateX(-50%); width:2.8rem; height:2.8rem;
    background:rgba(232,223,213,.14); color:var(--cream);
  }
  .qv__close:hover{background:rgba(232,223,213,.28);}

  /* Compact for short screens: cap the height (scroll inside), tighten the
     gaps, shrink the text, and leave room for the fixed bottom controls. */
  .qv__panel{
    gap:var(--space-s); max-height:86vh;
  }
  .qv__body{gap:var(--space-2xs);}
  .qv__title{font-size:var(--fs-h4); line-height:1.2;}
  .qv__heading{font-size:var(--fs-body-sm); line-height:1.45;}
  .qv__facts{gap:var(--space-2xs) var(--space-m); margin-top:0;}
}

/* =====================================================================
   STAY — apartments listing (3-col grid + filters, on the dark band)
   ===================================================================== */
/* Clears the transparent overlay header (position:absolute) on /stay/. */
/* Clears the absolute overlay header (space-2xl tall), then the same
   nav-to-eyebrow gap (space-2xl) used by the blog archive + single. */
.apt-archive{padding-top:calc(var(--space-2xl) * 2);}
.apt-archive__head{display:grid; margin-bottom:var(--space-xl); justify-items:center; text-align:center;}
.apt-archive__eyebrow{display:block; color:var(--color-on-ink-muted); margin-bottom:var(--space-xs);}
.apt-archive__bar{display:flex; flex-direction:column; align-items:center; gap:var(--space-m);}
.apt-archive__title{margin:0;}

.apt-filters{display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-xs); margin:0;}
@media (max-width:640px){ .apt-filters{display:none;} }
.apt-filter{
  cursor:pointer; background:transparent; color:var(--cream);
  border:var(--hair) solid var(--color-line-on-ink); border-radius:var(--radius-sm);
  padding:.65em 1.3em; line-height:1;
  font-family:var(--font-body); font-weight:var(--w-medium); font-size:var(--fs-button);
  letter-spacing:var(--track-over); text-transform:uppercase;
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.apt-filter:hover{border-color:var(--cream);}
.apt-filter.is-active{background:var(--warm-sage); border-color:var(--warm-sage); color:var(--cream);}

/* Availability search results bar (booking bar -> /apartments/?arrive&depart). */
.apt-archive__results{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--space-s) var(--space-l);
  margin-bottom:var(--space-l);
  padding: var(--space-m);
  border-radius:var(--radius-md);
  background: #ffffff0d;
}
.apt-archive__results-stay{
  margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:.35em var(--space-s);
  color:var(--color-on-ink);
}
.apt-archive__results-dates{font-weight:var(--w-medium);}
.apt-archive__results-nights{color:var(--color-on-ink-muted);}
.apt-archive__results-actions{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-s) var(--space-m);}
.apt-archive__count{color:var(--color-on-ink-muted); font-size:var(--fs-body-sm); white-space:nowrap;}
.apt-archive__reset{
  cursor:pointer; color:var(--cream); text-decoration:none; white-space:nowrap;
  border:var(--hair) solid var(--color-line-on-ink); border-radius:var(--radius-pill);
  padding:.65em 1.3em; line-height:1;
  font-family:var(--font-body); font-weight:var(--w-medium); font-size:var(--fs-button);
  letter-spacing:var(--track-over); text-transform:uppercase;
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.apt-archive__reset:hover{background:var(--warm-sage); border-color:var(--warm-sage); color:var(--cream);}

.apt-archive__empty{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:var(--space-m); padding:var(--space-xl) 0;
}
.apt-archive__empty-msg{margin:0;}

@media (max-width:600px){
  .apt-archive__results{flex-direction:column; align-items:stretch;}
  .apt-archive__results-actions{justify-content:space-between;}
  .booking-bar__inner { padding-block: 0; gap: var(--space-m) var(--space-l);} /* keep .container's inline padding so the bar doesn't hit the page edge */
}

.apt-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-l);
      margin-bottom: var(--space-m);
}
.apt-grid .apt-card{width:auto;}
.apt-card[hidden]{display:none;}
@media (max-width:980px){ .apt-grid{grid-template-columns:repeat(2, 1fr);} }
@media (max-width:600px){ .apt-grid{grid-template-columns:1fr;} }

/* =====================================================================
   BLOG — THE JOURNAL  (light archive + single, narrow reading column)
   Light background, light header. Spacing kept deliberately tight and
   aligned: a single bottom-margin flow model in the post body.
   ===================================================================== */

/* Reading-width container modifiers (override the 1645px max from tokens). */
.container--narrow{max-width:46rem;}
.container--wide{max-width:66rem;}

/* --- Archive: centred head, category filters, card grid ---------------- */
/* In-flow light header: this top padding is the nav-to-eyebrow gap. Match it
   to the blog single (.post-hero) and the apartments archive (.apt-archive). */
.journal-archive{padding-top:var(--space-2xl);}
.journal-archive__head{
  display:grid; justify-items:center; text-align:center;
  max-width:60ch; margin:0 auto var(--space-xl);
}
.journal-archive__eyebrow{display:block; margin-bottom:var(--space-xs);}
.journal-archive__title{margin:0;}

.journal-filters{display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-xs); margin-top:var(--space-m);}
.journal-filter{
  cursor:pointer; background:transparent; color:var(--color-text);
  border:var(--hair) solid var(--color-line); border-radius:var(--radius-sm);
  padding:.65em 1.3em; line-height:1;
  font-family:var(--font-body); font-weight:var(--w-medium); font-size:var(--fs-button);
  letter-spacing:var(--track-over); text-transform:uppercase;
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.journal-filter:hover{border-color:var(--ink);}
.journal-filter.is-active{background:var(--ink); border-color:var(--ink); color:var(--cream);}

.journal-archive__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-l);}
.journal-archive__grid .jcard[hidden]{display:none;}
.journal-archive__empty{text-align:center; color:var(--color-text-muted); margin-block:var(--space-2xl);}

/* the_posts_pagination(): centre the links and reuse the .pagination chip look */
.journal-archive .pagination{justify-content:center; margin-top:var(--space-xl);}
.journal-archive .pagination .nav-links{display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-xs);}
.journal-archive .pagination .page-numbers:hover{border-color:var(--ink);}

@media (max-width:880px){ .journal-archive__grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .journal-archive__grid{grid-template-columns:1fr;} }

/* --- Single: hero (centred title + meta), featured image --------------- */
.post-hero{padding-top:var(--space-2xl);}
.post-hero__head{display:grid; justify-items:center; text-align:center; gap:var(--space-xs);}
/* Category eyebrow: a small warm-palette tag (matches the loop tag), tinted
   per category via --cat-bg with ink text so every tone stays readable. */
.post-hero__cat{
  display:inline-block; padding:0.55em 0.85em; border-radius:var(--radius-sm);
  background:var(--cat-bg, var(--accent)); color:var(--cream); text-decoration:none;
  transition:opacity var(--dur) var(--ease); margin:var(--space-xs);
}
.post-hero__cat:hover{opacity:.82;}
.post-hero__title{margin:0; max-width:24ch;}
.post-hero__meta{
  display:flex; align-items:center; justify-content:center; gap:var(--space-xs);
  color:var(--color-text-muted);
}
.post-hero__meta time{font-variant-numeric:tabular-nums;}
.post-hero__media{margin:var(--space-l) 0 0; overflow:hidden; border-radius:var(--radius-md); aspect-ratio:16/9;}
.post-hero__img{width:100%; height:100%; object-fit:cover; display:block;}
@media (max-width:640px){ .post-hero__media{aspect-ratio:4/3;} }

/* --- Policy / legal page (Template Name: Policy / Legal page) ----------- */
.policy__head{
  margin-bottom:var(--space-l); padding-bottom:var(--space-m);
  border-bottom:var(--hair) solid var(--color-line);
}
.policy__eyebrow{display:block; margin-bottom:var(--space-xs);}
.policy__title{margin:0;}
.policy__updated{margin:var(--space-xs) 0 0; color:var(--color-text-muted);}

/* --- Single: body + styled content widgets ----------------------------- */
.post-body{padding-block:var(--space-xl) var(--space-2xl);}
.post-content{font-size:var(--fs-body-lg); line-height:1.7; color:var(--color-text);}

/* One consistent flow: every block carries a bottom margin; headings add
   space above and sit tight to the text below. */
.post-content > *{margin-top:0; margin-bottom:var(--space-m);}
.post-content > *:last-child{margin-bottom:0;}

.post-content h2{
  font-family:var(--font-heading); font-weight:var(--w-regular); font-size:var(--fs-h2);
  line-height:1.22; letter-spacing:var(--track-snug);
  margin-top:var(--space-xl); margin-bottom:var(--space-2xs);
}
.post-content h3{
  font-family:var(--font-heading); font-weight:var(--w-medium); font-size:var(--fs-h3);
  line-height:1.3; letter-spacing:var(--track-snug);
  margin-top:var(--space-l); margin-bottom:var(--space-2xs);
}
.post-content :is(h2,h3):first-child{margin-top:0;}

.post-content a{color:var(--accent); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px;}
.post-content a:hover{color:var(--accent-hover);}
.post-content strong{font-weight:var(--w-medium); color:var(--color-text);}

/* lists: mirror the site's .list / .list-ordered markers */
.post-content ul,.post-content ol{list-style:none; padding-left:0; display:grid; gap:var(--space-2xs);}
.post-content li{position:relative; padding-left:1.6em;}
.post-content ul li::before{content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:var(--radius-circle); background:var(--accent);}
.post-content ol{counter-reset:hli;}
.post-content ol li{counter-increment:hli;}
.post-content ol li::before{content:counter(hli,decimal-leading-zero); position:absolute; left:0; top:0; font-family:var(--font-serif); font-style:italic; font-size:.9em; color:var(--accent);}

/* quote */
.post-content blockquote,.post-content .wp-block-quote{
  margin-block:var(--space-l); padding:var(--space-3xs) 0 var(--space-3xs) var(--space-l);
  border-left:2px solid var(--accent);
  font-family:var(--font-serif); font-style:italic; font-size:var(--fs-body-lg); line-height:1.5;
}
.post-content blockquote p{margin:0;}
.post-content blockquote cite,.post-content .wp-block-quote cite{
  display:block; margin-top:var(--space-xs);
  font-family:var(--font-body); font-style:normal; font-size:var(--fs-body-sm);
  letter-spacing:var(--track-over); text-transform:uppercase; color:var(--color-text-muted);
}

/* pull quote: a centred editorial statement, ruled top and bottom */
.post-content .wp-block-pullquote{
  margin-block:var(--space-xl); padding:var(--space-l) 0; text-align:center;
  border-top:var(--hair) solid var(--color-line); border-bottom:var(--hair) solid var(--color-line);
}
.post-content .wp-block-pullquote blockquote{
  margin:0; padding:0; border:0;
  font-family:var(--font-heading); font-weight:var(--w-regular); font-style:normal;
  font-size:var(--fs-statement); line-height:1.22; letter-spacing:var(--track-snug); color:var(--color-text);
}
.post-content .wp-block-pullquote p{margin:0;}
.post-content .wp-block-pullquote cite{
  display:block; margin-top:var(--space-s);
  font-family:var(--font-body); font-style:normal; font-size:var(--fs-body-sm);
  letter-spacing:var(--track-over); text-transform:uppercase; color:var(--color-text-muted);
}

/* images */
.post-content figure.wp-block-image{margin-block:var(--space-l);}
.post-content figure.wp-block-image img{width:100%; height:auto; display:block; border-radius:var(--radius-md);}
.post-content .wp-block-image figcaption{
  margin-top:var(--space-2xs); text-align:center;
  font-size:var(--fs-body-sm); color:var(--color-text-muted);
}

/* --- Single: "More from the journal" --------------------------------- */
.post-more__head{
  text-align:center; display:grid; gap:var(--space-2xs);
  max-width:50ch; margin:0 auto var(--space-xl);
}
.post-more__head .t-eyebrow{display:block;}
.post-more__grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-l);
  max-width:60rem; margin-inline:auto;
}
@media (max-width:640px){ .post-more__grid{grid-template-columns:1fr;} }

/* =====================================================================
   PAGE HERO  (reusable: contact, about) — full-width band, baseline left
   ===================================================================== */
.page-hero{
  position:relative; isolation:isolate; overflow:hidden; color:var(--cream);
  min-height:60vh; min-height:60svh;
  display:flex; align-items:flex-end;
}
.page-hero__media{position:absolute; inset:0; z-index:-1;}
.page-hero__img{width:100%; height:100%; object-fit:cover; display:block;}
.page-hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,.18) 38%, rgba(0,0,0,.68) 100%);
}
.page-hero__inner{
  width:100%; padding-block:var(--space-2xl);
  display:grid; gap:var(--space-xs); justify-items:start; text-align:left;
}
.page-hero__eyebrow{color:var(--cream);}
.page-hero__heading{margin:0; max-width:20ch;}

/* =====================================================================
   CONTACT  (two columns; form card offset up over the hero)
   ===================================================================== */
.contact{position:relative; z-index:2; padding-block:var(--space-2xl) var(--space-section);}
.contact__grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem, 1rem + 5vw, 5.5rem); align-items:start;
}
.contact__left{display:grid; gap:var(--space-xl); align-content:start;}
.contact__overview{display:grid; gap:var(--space-s); max-width:70ch;}
.contact__overview h2{margin:0;}
.contact__body{margin:0; color:var(--color-text-muted); }

.contact__details{list-style:none; margin:0; padding:0; display:grid; gap:var(--space-m);}
.contact__details li{display:grid; gap:var(--space-3xs);}
.contact__label{display:block; color:var(--color-text);}
.contact__details a{color:var(--color-text-muted); text-decoration:none; transition:color var(--dur) var(--ease);}
.contact__details a:hover{color:var(--accent);}

.contact__social{display:grid; gap:var(--space-s);}
.social-links{list-style:none; margin:0; padding:0; display:flex; gap:var(--space-s);}
.social-links a{
  display:inline-grid; place-items:center; width:2.6em; height:2.6em; border-radius:var(--radius-circle);
  border:var(--hair) solid var(--color-line); color:var(--color-text);
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.social-links a:hover{background:var(--ink); color:var(--cream); border-color:var(--ink);}

.contact__right{position:relative;}
.contact-card{
  background:var(--ink); border-radius:var(--radius-md);
  padding: var(--space-xl);
  box-shadow:0 30px 60px -28px rgba(27,51,59,.1);
  display:grid; gap:var(--space-m);
}
.contact-card__title{margin:0; color: var(--cream);}
.contact-card__intro{margin:0;}
/* Offset the form up so it overlaps the bottom of the hero (desktop only). */
@media (min-width:900px){
  .contact__right{margin-top:clamp(-11rem, -16vh, -6.5rem);}
}

.contact-form{display:grid; gap:var(--space-m);}
.contact-form__row{display:grid; gap:var(--space-m); grid-template-columns:1fr 1fr;}
.contact-form__field label{display:block; color:var(--color-text-muted);}
.contact-form textarea{
  appearance:none; font-family:var(--font-body); font-size:var(--fs-body); letter-spacing:var(--track-body);
  color:var(--color-text); background:transparent; border:0; border-bottom:var(--hair) solid var(--color-line);
  padding:.55em 0; width:100%; resize:vertical; line-height:1.55;
  transition:border-color var(--dur) var(--ease);
}
.contact-form textarea:focus{outline:none; border-color:var(--accent);}
.contact-form__submit{margin-top:var(--space-2xs); justify-self:start;}
.contact-form__hp{position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden;}

.contact-note{padding:var(--space-s) var(--space-m); border-radius:var(--radius-sm); font-size:var(--fs-body-sm);}
.contact-note--ok{background:rgba(134,170,150,.2); color:var(--ink);}
.contact-note--err{background:rgba(190,117,83,.18); color:var(--ink);}

@media (max-width:899px){
  .contact__grid{grid-template-columns:1fr; gap:var(--space-2xl);}
}
@media (max-width:520px){
  .contact-form__row{grid-template-columns:1fr;}
}

/* =====================================================================
   CONTACT MAP  (full-width MapLibre band)
   ===================================================================== */
.contact-map{position:relative; }
.contact-map__mount{width:100%; aspect-ratio:16 / 9; background:var(--cream); border-radius:var(--radius-sm); overflow:hidden;}
@media (max-width:768px){ .contact-map__mount{aspect-ratio:1 / 1;} } /* square map on mobile */

/* =====================================================================
   FAQ  (native <details> accordion; reusable)
   ===================================================================== */
.faq__inner{max-width:62rem; margin-inline:auto;}
.faq__head{text-align:center; display:grid; gap:var(--space-2xs); justify-items:center; margin-bottom:var(--space-xl);}
.faq__head .t-eyebrow{display:block;}
.faq__list{display:grid; gap:0;}
.faq__item{border-bottom:var(--hair) solid var(--color-line);}
.faq__item:first-child{border-top:var(--hair) solid var(--color-line);}
.faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-m);
  padding:var(--space-m) 0; cursor:pointer; list-style:none;
}
.faq__q::-webkit-details-marker{display:none;}
.faq__q-text{margin:0;}
.faq__q:hover .faq__q-text{color:var(--accent);}
.faq__icon{position:relative; flex:0 0 auto; width:1rem; height:1rem;}
.faq__icon::before,.faq__icon::after{content:""; position:absolute; background:var(--accent);}
.faq__icon::before{top:50%; left:0; width:100%; height:2px; transform:translateY(-50%);}
.faq__icon::after{left:50%; top:0; width:2px; height:100%; transform:translateX(-50%); transition:transform var(--dur) var(--ease);}
.faq__item[open] .faq__icon::after{transform:translateX(-50%) scaleY(0);}
.faq__a{padding:0 0 var(--space-m); max-width:72ch; color:var(--color-text-muted);}
.faq__a > *{margin:0 0 var(--space-s);}
.faq__a > *:last-child{margin-bottom:0;}
.faq__a a{color:var(--accent); text-decoration:underline; text-underline-offset:2px;}

/* =====================================================================
   ABOUT
   ===================================================================== */
.about{padding-block:var(--space-2xl) var(--space-section);}

/* Intro: text left, image right (stacks on narrow screens). */
.about-intro__grid{display:grid; gap:var(--space-2xl); align-items:center;}
@media (min-width:860px){
  .about-intro__grid{grid-template-columns:1fr 1fr; gap:var(--space-3xl);}
}
.about-intro__text{display:grid; gap:var(--space-s); align-content:start;}
.about-intro__heading{margin:0; max-width:18ch;}
.about-intro__body{color:var(--color-text-muted);}
.about-intro__body :where(p):first-child{margin-top:0;}
.about-intro__body :where(p):last-child{margin-bottom:0;}
.about-intro__media{margin:0; border-radius:var(--radius-md); overflow:hidden;}
.about-intro__media img{display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:1/1;}

/* Feature: container-width image between the intro and the team. */
.about-feature{padding-bottom:var(--space-section);}
.about-feature__media{margin:0; border-radius:var(--radius-md); overflow:hidden;}
.about-feature__media img{display:block; width:100%; height:auto; aspect-ratio:16/7; object-fit:cover;}

/* Team: photo, name, role — 2 up on mobile, 4 up from tablet. */
.about-team__head{display:grid; gap:var(--space-s); max-width:40ch; margin-bottom:var(--space-m);}
.about-team__title{margin:0;}
.about-team__grid{list-style:none; margin:0; padding:0; display:grid; gap:var(--space-l); grid-template-columns:repeat(2,1fr);}
@media (min-width:760px){
  .about-team__grid{grid-template-columns:repeat(4,1fr);}
}
.about-team__member{display:grid; gap:var(--space-4xs); align-content:start;}
.about-team__photo{aspect-ratio:3/4; border-radius:var(--radius-md); overflow:hidden; background:var(--color-surface-2); margin-bottom: var(--space-2xs); }
.about-team__photo img{display:block; width:100%; height:100%; object-fit:cover;}
.about-team__name{margin:0;}
.about-team__role{margin:0; color:var(--color-text-muted);}
/* Team on the ink (blue) band: muted cream for eyebrow/role, subtle photo slot. */
.about-team.on-ink .t-eyebrow{color:var(--color-on-ink-muted);}
.about-team.on-ink .about-team__role{color:var(--color-on-ink-muted);}
.about-team.on-ink .about-team__photo{background:rgba(232,223,213,.10);}

/* =====================================================================
   CONTACT FORM — on the ink card (light text), -200px offset, consent
   ===================================================================== */
.contact-card{color:var(--cream);}
/* Offset ~= -200px (-12.5rem) on desktop, easing in toward 900px. */
@media (min-width:900px){
  .contact__right{margin-top:clamp(-12.5rem, -2rem - 11.5vw, -6rem);}
}
.contact-form textarea{min-height:clamp(8.5rem, 5rem + 9vw, 12rem);}
.on-ink .contact-form textarea{color:var(--cream); border-bottom-color:var(--color-line-on-ink);}
.on-ink .contact-form textarea:focus{border-bottom-color:var(--accent);}
.on-ink .contact-form__field label{color:var(--color-on-ink-muted);}
/* Notes still read on the ink card: lighten copy, keep tinted background. */
.on-ink .contact-note--ok,.on-ink .contact-note--err{color:var(--cream);}

.contact-form__consent{
  display:flex; align-items:flex-start; gap:var(--space-s);
  font-size:var(--fs-body-sm); line-height:1.5; color:var(--color-on-ink-muted); cursor:pointer;
}
.contact-form__consent input{
  appearance:none; -webkit-appearance:none; flex:0 0 auto;
  width:1.15rem; height:1.15rem; margin-top:.12em;
  border:var(--hair) solid var(--color-line-on-ink); border-radius:var(--radius-xs);
  background:transparent; cursor:pointer; display:grid; place-items:center;
  transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.contact-form__consent input:checked{background:var(--accent); border-color:var(--accent);}
.contact-form__consent input:checked::after{
  content:""; width:.32rem; height:.58rem;
  border:solid var(--cream); border-width:0 2px 2px 0; transform:rotate(45deg) translateY(-.06em);
}
.contact-form__consent input:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.contact-form__consent a{color:var(--cream); text-decoration:underline; text-underline-offset:2px;}

/* =====================================================================
   MOBILE TIDY-UPS — Home page
   ===================================================================== */

/* Booking button: full-width with the arrow pushed to the right edge. */
@media (max-width:760px){
  .booking-bar__submit{width:100%; justify-content:space-between;}
}

/* Apartments: centre the heading, drop the desktop view-all + arrows, and
   surface a centred "View All" button below the pagination dots. */
.apt-section__foot{display:none;}
@media (max-width:640px){
  .apt-section__head{align-items:center; text-align:center;}
  .apt-section__controls{display:none;}
  .apt-section__foot{display:flex; justify-content:center; margin-top:var(--space-l);}
}

/* Reasons: centre the text, shrink the heading, and move a 200px image above
   the eyebrow. */
@media (max-width:768px){
  .reasons__text{align-items:center; text-align:center;}
  .reasons__heading{font-size:var(--fs-h2); max-width:none;}
  .reasons__media{order:-1;}
  .reasons__circle{width:140px;}
}

/* Location: stack the map after the text. */
@media (max-width:860px){
  .location__map{order:1;}
}

/* Journal preview: two-up grid, tighter spacing/type, drop the third post. */
@media (max-width:780px){
  .journal__grid{grid-template-columns:1fr 1fr; gap:var(--space-xs);}
  .journal__grid .jcard:nth-child(3){display:none;}
  .journal__head{margin-bottom:var(--space-l);}
  .jcard__body{padding:var(--space-s); gap:var(--space-2xs);}
  .jcard__title{font-size:var(--fs-h4); max-width:none;}
  .jcard__date { font-size: 10px;}
  .jcard__media { aspect-ratio: 5 / 8; }
  .jcard__cat{padding:.4em .65em;
        font-size: 9px;
        letter-spacing: 1px;
        border-radius: 2px;}
}

/* =====================================================================
   APARTMENT SINGLE — mobile tidy-ups
   ===================================================================== */
.apt-header__book{display:none;}            /* desktop: hidden */
/* Smooth anchor scrolling (Book now -> booking widget). */
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

/* Lenis smooth scroll (init in interactions.js; classes added to <html>). */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}

@media (max-width:768px){
  /* Hero: drop the view-all link; bottom padding matches the side padding. */
  .apt-header__all{display:none;}
  .apt-header{padding-bottom:var(--container-pad);}
  .apt-header__top{margin-bottom:var(--space-m);}

  /* Gallery images at 5:4. */
  .apt-gallery__cell{aspect-ratio:5 / 4;}
  .apt-gallery__cell--lead{aspect-ratio:5 / 4;}

  /* In-hero Book now stays hidden on mobile — replaced by the sticky bar
     (.apt-stickybook) pinned to the bottom of the viewport. */

  /* Tighten content across the board. Drop the body's bottom padding so the
     booking panel (the last block on mobile) meets the section image below. */
  .apt-body{padding-block:var(--space-xl) 0;}
  .apt-body__grid{gap:var(--space-xl);}
  .apt-body__main{gap:var(--space-l);}
  .apt-overview{gap:var(--space-s);}
  .apt-layout{gap:var(--space-s);}
  .apt-amenities{gap:var(--space-m);}
  .lounge__inner{padding-block:var(--space-2xl);}

  /* Booking panel goes full-bleed: cancel the container padding so the cream
     card runs edge-to-edge, drop the rounded corners, and keep a comfortable
     inner gutter for the content. */
  .apt-booking{
    margin-inline:calc(-1 * var(--container-pad));
    border-radius:0;
    padding:var(--space-l) var(--container-pad);
  }

  /* iOS zooms the viewport when a form control smaller than 16px gets focus.
     Our body text is ~15px, so pin the booking/guests controls to 16px on
     touch to stop the jarring auto-zoom. */
  .apt-booking__guests select,
  .field select,
  .field input{font-size:16px;}
}

/* =====================================================================
   APARTMENT SINGLE — mobile sticky booking bar (Airbnb-style)
   Hidden on desktop; pinned to the bottom of the viewport on mobile. Its
   two states (empty / dates chosen) and actions are driven by scStickyBar()
   in interactions.js.
   ===================================================================== */
.apt-stickybook{display:none;}
@media (max-width:768px){
  .apt-stickybook{
    position:fixed; left:0; right:0; bottom:0; z-index:90;
    display:flex; align-items:center; justify-content:space-between; gap:var(--space-m);
    padding:var(--space-s) var(--container-pad);
    padding-bottom:calc(var(--space-s) + env(safe-area-inset-bottom, 0px));
    background:var(--color-bg); border-top:var(--hair) solid var(--color-line);
    box-shadow:0 -6px 24px rgba(27,51,59,.10);
    transform:translateY(0); transition:transform var(--dur) var(--ease);
  }
  /* Tucked away while the real booking widget (or the footer) is on screen. */
  .apt-stickybook.is-tucked{transform:translateY(110%);}

  .apt-stickybook__info{display:grid;  flex:1 1 auto; min-width:0;}
  .apt-stickybook__label{
    font-family:var(--font-body); font-weight:var(--w-medium); font-size:var(--fs-body);
    color:var(--color-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .apt-stickybook__sub{color:var(--color-text-muted);}
  .apt-stickybook__sub[hidden]{display:none;}

  /* Filled accent CTA — the primary tap target, sized down from the hero pill. */
  .apt-stickybook__btn{
    flex:0 0 auto; white-space:nowrap; padding:1em 1.6em;
    --bg:var(--accent); --fg:var(--cream); --bd:var(--accent);
  }
  .apt-stickybook__btn:hover,
  .apt-stickybook__btn:focus-visible{--bg:var(--accent); --fg:var(--cream); --bd:var(--accent);}

  /* Lift the back-to-top clear of the bar so they don't overlap. */
  .back-to-top{bottom:calc(clamp(1rem, 0.5rem + 2vw, 2rem) + 4.5rem + env(safe-area-inset-bottom, 0px));}
}