/* ============================================================
   NOSTOS STAY — Design tokens
   ============================================================ */
:root{
  --ivory:#F6F3ED;
  --limestone:#E8E1D5;
  --charcoal:#24231F;
  --olive:#777762;
  --sand:#C7B79C;
  --gulf:#24333A;
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Manrope', -apple-system, sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --gutter:clamp(1.25rem, 4vw, 4.5rem);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ivory);
  color:var(--charcoal);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--sand);color:var(--charcoal)}

/* grain overlay for the whole page — xerox-free, film-like */
body::after{
  content:'';
  position:fixed;inset:0;
  pointer-events:none;
  z-index:9999;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.08}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

.label{
  font-family:var(--sans);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--olive);
}
.serif-i{font-family:var(--serif);font-style:italic;font-weight:400}

/* link underline animation */
.u-link{position:relative;display:inline-block;padding-bottom:2px}
.u-link::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .6s var(--ease);
}
.u-link:hover::after,.u-link:focus-visible::after{transform:scaleX(1);transform-origin:left}

:focus-visible{outline:1.5px solid var(--gulf);outline-offset:4px}

/* ============================================================
   "Photography" — cinematic gradient plates with grain.
   Each plate simulates an editorial photo for the mockup.
   ============================================================ */
.plate{
  position:relative;
  overflow:hidden;
  background:var(--limestone);
}
.plate::before{
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.09;mix-blend-mode:overlay;z-index:2;
}
.plate .plate-fill{
  position:absolute;inset:-6%;
  transition:transform 1.6s var(--ease);
}
.plate:hover .plate-fill{transform:scale(1.035)}
.plate .cap{
  position:absolute;left:1.1rem;bottom:.9rem;z-index:3;
  font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(246,243,237,.75);font-weight:500;
}
.plate.cap-dark .cap{color:rgba(36,35,31,.55)}

/* tonal moods */
.t-dawn  .plate-fill{background:linear-gradient(168deg,#f2ead9 0%,#e3d3b4 34%,#c7b79c 62%,#a99377 100%)}
.t-sea   .plate-fill{background:linear-gradient(178deg,#8fa3a6 0%,#5c7479 30%,#35494f 64%,#24333A 100%)}
.t-linen .plate-fill{background:linear-gradient(160deg,#faf7f0 0%,#efe8da 40%,#ded2bc 78%,#cec0a6 100%)}
.t-stone .plate-fill{background:linear-gradient(150deg,#d9d2c4 0%,#bfb6a3 45%,#98917e 80%,#777762 100%)}
.t-dusk  .plate-fill{background:linear-gradient(172deg,#e7c9a3 0%,#c8a184 32%,#7e7570 62%,#33404a 100%)}
.t-shade .plate-fill{background:linear-gradient(160deg,#4a5257 0%,#333c40 45%,#262f33 100%)}
.t-fruit .plate-fill{background:linear-gradient(155deg,#efe6d2 0%,#ddcba6 50%,#b8a37e 100%)}

/* horizon line device — appears on sea plates */
.horizon::after{
  content:'';position:absolute;left:0;right:0;top:38%;height:1px;
  background:rgba(246,243,237,.35);z-index:2;
}

/* ============================================================
   Scroll reveal
   ============================================================ */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.12s}
.rv-d2{transition-delay:.24s}
.rv-d3{transition-delay:.36s}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.4rem var(--gutter);
  transition:background .5s var(--ease),padding .5s var(--ease),box-shadow .5s var(--ease);
  color:var(--ivory);
}
.hdr.solid{
  background:rgba(246,243,237,.94);
  backdrop-filter:blur(8px);
  color:var(--charcoal);
  padding:.85rem var(--gutter);
  box-shadow:0 1px 0 rgba(36,35,31,.07);
}
.hdr.solid .label{color:var(--olive)}
.hdr:not(.solid) .label{color:rgba(246,243,237,.8)}
.wordmark{
  font-family:var(--serif);font-weight:500;
  font-size:1.35rem;letter-spacing:.14em;text-transform:uppercase;
  display:flex;align-items:baseline;gap:.5rem;
}
.wordmark small{
  font-family:var(--sans);font-size:.55rem;font-weight:500;
  letter-spacing:.38em;opacity:.65;
}
.nav-d{display:flex;gap:2.4rem;align-items:center}
.nav-d a.label{font-size:.64rem;color:inherit;opacity:.85}
.btn-book{
  font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;font-weight:500;
  padding:.75rem 1.5rem;border:1px solid currentColor;background:transparent;color:inherit;
  transition:background .45s var(--ease),color .45s var(--ease);
}
.hdr:not(.solid) .btn-book:hover{background:var(--ivory);color:var(--charcoal)}
.hdr.solid .btn-book:hover{background:var(--charcoal);color:var(--ivory)}
.burger{display:none;background:none;border:none;color:inherit;width:34px;height:26px;position:relative}
.burger span{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:all .4s var(--ease)}
.burger span:nth-child(1){top:6px}
.burger span:nth-child(2){top:16px}

/* mobile menu */
.mmenu{
  position:fixed;inset:0;z-index:99;background:var(--charcoal);color:var(--ivory);
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--gutter);
  transform:translateY(-100%);transition:transform .7s var(--ease);
}
.mmenu.open{transform:none}
.mmenu a{
  font-family:var(--serif);font-size:clamp(2.2rem,9vw,3.2rem);
  padding:.5rem 0;border-bottom:1px solid rgba(246,243,237,.12);
}
.mmenu .label{margin-bottom:2rem;color:var(--sand)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;height:100vh;height:100svh;min-height:620px;
  display:flex;align-items:flex-end;
  color:var(--ivory);
  overflow:hidden;
  background:var(--gulf);
}
.hero-bg{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(36,51,58,.72) 0%,rgba(36,51,58,.15) 45%,rgba(36,51,58,.35) 100%),
    linear-gradient(174deg,#9db0ae 0%,#6f8688 26%,#41585e 58%,#24333A 100%);
  animation:heroDrift 26s ease-in-out infinite alternate;
}
@keyframes heroDrift{from{transform:scale(1)}to{transform:scale(1.06)}}
.hero-bg::after{
  content:'';position:absolute;left:0;right:0;top:33%;height:1px;
  background:rgba(246,243,237,.28);
}
/* linen curtain sway — two translucent panels */
.curtain{
  position:absolute;top:0;bottom:0;width:34%;
  background:linear-gradient(to right,rgba(246,243,237,.14),rgba(246,243,237,.02));
  filter:blur(2px);
  animation:sway 11s ease-in-out infinite alternate;
  transform-origin:top center;
}
.curtain.c2{right:0;left:auto;background:linear-gradient(to left,rgba(246,243,237,.1),rgba(246,243,237,0));animation-delay:-5s;animation-duration:14s}
@keyframes sway{
  from{transform:skewX(0deg) translateX(0)}
  to{transform:skewX(-2.5deg) translateX(18px)}
}
.hero-inner{
  position:relative;z-index:3;width:100%;
  padding:0 var(--gutter) clamp(3.5rem,8vh,6.5rem);
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:2.5rem;
}
.hero h1{
  font-size:clamp(2.9rem,7.2vw,6.4rem);
  font-weight:400;max-width:14ch;
  letter-spacing:.005em;
}
.hero h1 em{font-style:italic;font-weight:400}
.hero-aside{max-width:270px;font-size:.95rem;line-height:1.9;color:rgba(246,243,237,.85)}
.hero-aside p{margin-bottom:1.6rem}
.hero-aside .u-link{color:var(--ivory);font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;font-weight:500}
.scroll-ind{
  position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);
  width:1px;height:52px;background:rgba(246,243,237,.35);overflow:hidden;z-index:3;
}
.scroll-ind::after{
  content:'';position:absolute;left:0;top:-100%;width:100%;height:100%;
  background:var(--ivory);animation:drop 2.6s var(--ease) infinite;
}
@keyframes drop{to{top:110%}}

/* ============================================================
   SECTIONS — general
   ============================================================ */
section{padding:clamp(5rem,11vh,9.5rem) var(--gutter)}
.sec-head{margin-bottom:clamp(2.5rem,6vh,4.5rem)}
.sec-head .label{display:block;margin-bottom:1.2rem}

/* ============================================================
   INTRO (editorial, asymmetric)
   ============================================================ */
.intro{background:var(--ivory)}
.intro-grid{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(2.5rem,6vw,6rem);
  align-items:start;
}
.intro h2{
  font-size:clamp(2.1rem,4.6vw,4rem);
  font-weight:400;max-width:18ch;margin-bottom:2.4rem;
}
.intro h2 em{font-style:italic}
.intro-copy{max-width:46ch;color:rgba(36,35,31,.78);font-size:1.02rem}
.intro-copy p+p{margin-top:1.3rem}
.intro-media{display:grid;gap:1.2rem;grid-template-columns:1fr}
.intro-media .plate.big{aspect-ratio:4/5}
.intro-media .plate.small{aspect-ratio:5/3;width:68%;justify-self:end;margin-top:-3rem;box-shadow:0 24px 60px -30px rgba(36,35,31,.35)}

/* ============================================================
   ROOMS
   ============================================================ */
.rooms{background:var(--limestone);padding-left:0;padding-right:0}
.rooms>.sec-head{padding:0 var(--gutter)}
.room{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  min-height:82vh;
}
.room+.room{margin-top:clamp(4rem,10vh,8rem)}
.room.flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.room.flip .room-media{order:2}
.room-media{position:relative}
.room-media .plate{position:absolute;inset:0}
.room-info{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(3rem,6vw,5.5rem) var(--gutter);
}
.room-info .room-no{
  font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--olive);
  margin-bottom:1rem;display:block;
}
.room-info h3{font-size:clamp(2.4rem,4.4vw,3.8rem);font-weight:400;margin-bottom:1.4rem}
.room-poem{
  font-family:var(--serif);font-style:italic;font-size:1.28rem;line-height:1.55;
  color:rgba(36,35,31,.82);max-width:34ch;margin-bottom:2.4rem;
}
.room-specs{
  display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 2rem;
  border-top:1px solid rgba(36,35,31,.14);
  padding-top:1.8rem;margin-bottom:2.4rem;max-width:420px;
}
.spec .label{font-size:.58rem;display:block;margin-bottom:.25rem}
.spec span{font-size:.92rem;font-weight:400}
.room-amen{
  font-size:.85rem;color:rgba(36,35,31,.65);max-width:44ch;margin-bottom:2.6rem;line-height:1.9;
}
.room-cta{display:flex;gap:2rem;align-items:center;flex-wrap:wrap}
.btn-solid{
  font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;font-weight:500;
  padding:1rem 2.2rem;background:var(--charcoal);color:var(--ivory);border:1px solid var(--charcoal);
  transition:background .45s var(--ease),color .45s var(--ease);
}
.btn-solid:hover{background:transparent;color:var(--charcoal)}
.room-cta .u-link{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;font-weight:500}

/* ============================================================
   THE SEA
   ============================================================ */
.sea{background:var(--gulf);color:var(--ivory);padding-left:0;padding-right:0}
.sea-hero{position:relative;height:72vh;min-height:440px}
.sea-hero .plate{position:absolute;inset:0}
.sea-hero .sea-quote{
  position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:0 var(--gutter);
}
.sea-quote h2{font-size:clamp(1.9rem,4.4vw,3.6rem);font-weight:400;max-width:22ch}
.sea-quote h2 em{font-style:italic}
.sea-facts{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;padding:clamp(2.8rem,6vh,4.5rem) var(--gutter);
}
.sea-fact{padding:0 1.8rem;border-left:1px solid rgba(246,243,237,.16)}
.sea-fact:first-child{border-left:none;padding-left:0}
.sea-fact .label{color:var(--sand);display:block;margin-bottom:.7rem;font-size:.6rem}
.sea-fact p{font-size:.92rem;color:rgba(246,243,237,.82);line-height:1.75}

/* ============================================================
   AMENITIES — typographic grid
   ============================================================ */
.amen{background:var(--ivory)}
.amen-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  border-top:1px solid rgba(36,35,31,.14);
}
.amen-item{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
  padding:1.5rem .5rem;
  border-bottom:1px solid rgba(36,35,31,.14);
  transition:padding-left .5s var(--ease),background .5s var(--ease);
}
.amen-item:nth-child(odd){border-right:1px solid rgba(36,35,31,.14);padding-right:2.5rem}
.amen-item:nth-child(even){padding-left:2.5rem}
.amen-item:hover{background:var(--limestone);padding-left:1.4rem}
.amen-item:nth-child(even):hover{padding-left:3.2rem}
.amen-item h4{font-family:var(--serif);font-weight:500;font-size:1.3rem}
.amen-item span{font-size:.72rem;color:var(--olive);white-space:nowrap;letter-spacing:.08em}

/* ============================================================
   EXPERIENCE — horizontal strip
   ============================================================ */
.exp{background:var(--limestone);padding-left:0;padding-right:0}
.exp>.sec-head{padding:0 var(--gutter)}
.exp-strip{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:1px;background:rgba(36,35,31,.12);
  border-top:1px solid rgba(36,35,31,.12);
  border-bottom:1px solid rgba(36,35,31,.12);
}
.exp-card{background:var(--limestone);padding:0;display:flex;flex-direction:column}
.exp-card .plate{aspect-ratio:3/4}
.exp-card .exp-txt{padding:1.6rem 1.4rem 2.2rem}
.exp-card h4{
  font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;font-weight:600;
  font-family:var(--sans);margin-bottom:.8rem;color:var(--charcoal);
}
.exp-card p{font-family:var(--serif);font-style:italic;font-size:1.02rem;line-height:1.55;color:rgba(36,35,31,.75)}

/* ============================================================
   LOCATION — custom SVG map
   ============================================================ */
.loc{background:var(--ivory)}
.loc-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2.5rem,6vw,5rem);align-items:center}
.map-wrap{
  background:var(--limestone);
  border:1px solid rgba(36,35,31,.1);
  padding:clamp(1.5rem,3vw,3rem);
}
.map-wrap svg{width:100%;height:auto;display:block}
.loc-list{list-style:none}
.loc-list li{
  display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  padding:1.1rem 0;border-bottom:1px solid rgba(36,35,31,.14);
}
.loc-list li:first-child{border-top:1px solid rgba(36,35,31,.14)}
.loc-list .place{font-family:var(--serif);font-size:1.15rem}
.loc-list .dist{font-size:.72rem;color:var(--olive);letter-spacing:.1em;white-space:nowrap}
.loc-note{margin-top:2rem;font-size:.88rem;color:rgba(36,35,31,.6);max-width:40ch}

/* ============================================================
   GALLERY — irregular editorial grid
   ============================================================ */
.gal{background:var(--limestone)}
.gal-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:clamp(60px,9vw,130px);
  gap:1.2rem;
}
.g1{grid-column:1/8;grid-row:span 4}
.g2{grid-column:8/13;grid-row:span 3}
.g3{grid-column:8/11;grid-row:span 2}
.g4{grid-column:11/13;grid-row:span 2}
.g5{grid-column:1/4;grid-row:span 3}
.g6{grid-column:4/9;grid-row:span 3}
.g7{grid-column:9/13;grid-row:span 3}
.gal-grid .plate{width:100%;height:100%}

/* ============================================================
   BOOKING
   ============================================================ */
.book{background:var(--gulf);color:var(--ivory)}
.book-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(3rem,7vw,7rem);align-items:start}
.book h2{font-size:clamp(2.4rem,5vw,4.2rem);font-weight:400;max-width:14ch;margin-bottom:2rem}
.book h2 em{font-style:italic}
.book-benefits{list-style:none;margin-top:2.5rem}
.book-benefits li{
  padding:.9rem 0;border-bottom:1px solid rgba(246,243,237,.14);
  font-size:.9rem;color:rgba(246,243,237,.8);
  display:flex;gap:1rem;align-items:baseline;
}
.book-benefits li::before{content:'—';color:var(--sand)}
.form{display:grid;gap:1.6rem}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.f-field{display:flex;flex-direction:column;gap:.5rem}
.f-field label{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--sand);font-weight:500}
.f-field input,.f-field select{
  background:transparent;border:none;border-bottom:1px solid rgba(246,243,237,.3);
  color:var(--ivory);font-family:var(--sans);font-weight:300;font-size:1rem;
  padding:.6rem 0;border-radius:0;appearance:none;
  transition:border-color .4s var(--ease);
}
.f-field select option{color:var(--charcoal)}
.f-field input:focus,.f-field select:focus{outline:none;border-bottom-color:var(--ivory)}
.f-field input::placeholder{color:rgba(246,243,237,.35)}
.btn-ivory{
  font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;font-weight:500;
  padding:1.1rem 2.4rem;background:var(--ivory);color:var(--charcoal);border:1px solid var(--ivory);
  transition:background .45s var(--ease),color .45s var(--ease);
  justify-self:start;margin-top:.5rem;
}
.btn-ivory:hover{background:transparent;color:var(--ivory)}
.book-alt{margin-top:1.8rem;font-size:.82rem;color:rgba(246,243,237,.6)}
.book-alt a{color:var(--sand)}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--charcoal);color:var(--ivory);padding:clamp(4rem,9vh,7rem) var(--gutter) 2.5rem}
.ft-grid{
  display:grid;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2fr));
  gap:clamp(2rem,5vw,4rem);margin-bottom:clamp(3.5rem,7vh,5.5rem);
}
.ft-mark{font-family:var(--serif);font-size:2rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.2rem}
.ft-mark small{display:block;font-family:var(--sans);font-size:.55rem;letter-spacing:.38em;opacity:.55;margin-top:.4rem}
.ft-grid .label{color:var(--sand);display:block;margin-bottom:1.2rem;font-size:.6rem}
.ft-grid ul{list-style:none}
.ft-grid ul li{margin-bottom:.7rem;font-size:.9rem;color:rgba(246,243,237,.78)}
.ft-poem{
  border-top:1px solid rgba(246,243,237,.14);
  padding-top:2.2rem;
  display:flex;justify-content:space-between;align-items:baseline;gap:2rem;flex-wrap:wrap;
}
.ft-poem p{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:rgba(246,243,237,.75)}
.ft-poem span{font-size:.68rem;color:rgba(246,243,237,.4);letter-spacing:.12em}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .amen-grid{grid-template-columns:1fr}
  .amen-item:nth-child(odd){border-right:none;padding-right:.5rem}
  .amen-item:nth-child(even){padding-left:.5rem}
  .amen-item:nth-child(even):hover{padding-left:1.4rem}
  .exp-strip{grid-template-columns:repeat(2,1fr)}
  .exp-card:last-child{grid-column:1/-1}
  .exp-card:last-child .plate{aspect-ratio:16/7}
  .sea-facts{grid-template-columns:1fr 1fr;gap:2.2rem 0}
  .sea-fact:nth-child(3){border-left:none;padding-left:0}
}
@media (max-width:860px){
  .nav-d a.label{display:none}
  .burger{display:block}
  .intro-grid,.loc-grid,.book-grid{grid-template-columns:1fr}
  .room,.room.flip{grid-template-columns:1fr;min-height:0}
  .room-media{aspect-ratio:4/3;position:relative}
  .room.flip .room-media{order:0}
  .room-info{padding:2.6rem var(--gutter) 3.5rem}
  .gal-grid{grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(52px,13vw,90px)}
  .g1{grid-column:1/7;grid-row:span 4}
  .g2{grid-column:1/5;grid-row:span 3}
  .g3{grid-column:5/7;grid-row:span 3}
  .g4{grid-column:1/3;grid-row:span 2}
  .g5{grid-column:3/7;grid-row:span 2}
  .g6{grid-column:1/7;grid-row:span 3}
  .g7{display:none}
  .ft-grid{grid-template-columns:1fr 1fr}
  .intro-media .plate.small{margin-top:-2rem}
  .hero-inner{padding-bottom:5.5rem}
}
@media (max-width:560px){
  .f-row{grid-template-columns:1fr}
  .sea-facts{grid-template-columns:1fr;gap:1.8rem}
  .sea-fact{border-left:none;padding:0}
  .exp-strip{grid-template-columns:1fr}
  .exp-card:last-child .plate{aspect-ratio:3/4}
  .ft-grid{grid-template-columns:1fr}
  .room-specs{grid-template-columns:1fr 1fr}
}

/* sticky mobile book bar */
.mbook{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:90;
  background:var(--charcoal);color:var(--ivory);
  padding:1rem var(--gutter);
  text-align:center;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;font-weight:500;
}
@media (max-width:860px){
  .mbook{display:block}
  footer{padding-bottom:6rem}
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}