/* ============================================================
   Chalet Le 1er
   Palette: warm off-white paper, near-black charcoal ink,
   one restrained accent (Natural Stone). Gold used once (rating).
   Type: Fraunces (display) / Source Sans 3 (body) / IBM Plex Mono (labels)
   ============================================================ */

:root{
  --paper:#FAFAF7;
  --paper-2:#F2EFE8;
  --paper-3:#ECE8DF;
  --ink:#1C232B;
  --ink-strong:#141A20;
  --ink-soft:#54606B;
  --line:#DAD5CA;
  --line-strong:#C7C0B2;
  --stone:#A89968;
  --stone-deep:#8A7B4E;
  --stone-label:#736537;
  --gold:#D4AF37;
  --white:#FFFFFF;

  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace;

  --wrap:1240px;
  --gutter:clamp(1.25rem,5vw,4rem);
  --band:clamp(4.5rem,11vh,9rem);
  --nav-h:68px;
  /* ---- motion system: one vocabulary for the whole site ----
     Four durations, three curves. Every transition and animation in this
     stylesheet and in js/main.js speaks these and nothing else.
     See HANDOFF.md, "Motion system". */
  --t-micro:150ms;   /* hover colour, small state, press feedback */
  --t-short:280ms;   /* buttons, chips, row nudges, panels closing */
  --t-medium:380ms;  /* panels opening, carousel crossfade, viewer flight */
  --t-long:700ms;    /* section reveals, slideshow crossfade */
  --ease-enter:cubic-bezier(.16,1,.3,1); /* decelerating, things arriving */
  --ease-exit:cubic-bezier(.4,0,1,1);    /* accelerating, things leaving */
  --ease-move:cubic-bezier(.65,0,.35,1); /* symmetric, reversible state and on-screen movement */
  --stagger:70ms;    /* reading-order step between reveals, capped at 3 steps */
  /* ---- the hero opening sequence, its own slower clock ----
     A title card, not a UI animation, so it gets its own tokens rather than
     stretching the four above. See HANDOFF.md, "Hero opening sequence". */
  --hero-hold:2000ms;   /* the photograph alone, before any text */
  --hero-step:480ms;    /* one element arriving to the next */
  --hero-fade:820ms;    /* how long one element takes to arrive */
  --hero-rise:14px;     /* how far it rises while it arrives */
  --hero-ease:cubic-bezier(.32,0,.28,1); /* a dissolve: soft at both ends, even in the middle */
  --hero-settle:12000ms;/* the photograph's slow settle to rest */
  --hero-scale:1.05;    /* where that settle starts */
  --hero-wait:2500ms;   /* stop waiting for the photograph and start anyway */
  --pad:clamp(1rem,4vw,3rem);
  --sheet-h:clamp(360px,64vh,660px);
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 12px);
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(1.02rem,0.98rem + 0.2vw,1.15rem);
  line-height:1.72;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display);font-weight:300;margin:0;letter-spacing:-0.015em;line-height:1.06}
p{margin:0}
::selection{background:var(--stone);color:var(--paper)}
:focus-visible{outline:2px solid var(--stone-deep);outline-offset:3px;border-radius:1px}

.skip-link{
  position:fixed;top:-100px;left:12px;z-index:200;background:var(--ink);color:var(--paper);
  padding:.7rem 1rem;border-radius:2px;font-family:var(--font-mono);font-size:.8rem;
}
.skip-link:focus{top:12px}

/* Deliberate line breaks in display copy. The break only applies once there is
   room for it; on a narrow screen the text wraps on its own. .nw keeps a short
   phrase whole (a hyphenated word must never split across lines). */
br.lb{display:none}
@media(min-width:721px){br.lb{display:inline}}
.has-lb{text-wrap:initial}
.nw{white-space:nowrap}

/* ---------- shared bits ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 1.4rem;
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--stone);flex:none}
.eyebrow--light{color:rgba(255,255,255,.86)}
.eyebrow--light::before{background:var(--stone)}
.dot{display:inline-block;width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.55;margin:0 .55rem;vertical-align:middle;flex:none}
.eyebrow .dot{background:var(--stone);opacity:1}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  padding:.95rem 1.7rem;border-radius:2px;
  transition:background var(--t-short) var(--ease-move),color var(--t-short) var(--ease-move),border-color var(--t-short) var(--ease-move);
  white-space:nowrap;
}
.btn--solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--solid:hover{background:var(--stone-deep);border-color:var(--stone-deep)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.btn--lg{padding:1.05rem 2.1rem;font-size:.82rem}
.btn--block{width:100%}

.section-head{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);margin-bottom:clamp(2.5rem,5vw,4rem)}
.section-head h2{font-size:clamp(2rem,1.3rem + 3vw,3.5rem)}
.section-head__note{color:var(--ink-soft);max-width:46ch;margin-top:1.1rem;font-size:1.05rem}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background var(--t-medium) var(--ease-move),box-shadow var(--t-medium) var(--ease-move),border-color var(--t-medium) var(--ease-move);border-bottom:1px solid transparent}
.nav__inner{max-width:1440px;margin:0 auto;height:var(--nav-h);padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.wordmark{font-family:var(--font-display);font-weight:400;font-size:1.28rem;letter-spacing:.02em;text-decoration:none;color:var(--white);transition:color var(--t-medium) var(--ease-move);white-space:nowrap}
.ord{font-size:.62em;vertical-align:.42em;letter-spacing:0}
.nav__links{display:flex;gap:2rem}
.nav__links a{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:rgba(255,255,255,.82);transition:color var(--t-micro) var(--ease-move);position:relative;padding:.3rem 0}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--stone);transform:scaleX(0);transform-origin:left center;transition:transform var(--t-short) var(--ease-move)}
.nav__links a:hover{color:var(--white)}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__actions{display:flex;align-items:center;gap:1rem}
.nav__cta{padding:.7rem 1.25rem}
.nav__cta .cta-sm{display:none}

/* language switch, shared by both language pages: the current one is a
   marked span, never a link back to itself */
.lang{display:flex;align-items:center;gap:.42rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;line-height:1}
.lang a{color:rgba(255,255,255,.6);text-decoration:none;transition:color var(--t-micro) var(--ease-move)}
.lang a:hover{color:var(--white)}
.lang [aria-current]{color:var(--white)}
.lang__sep{color:rgba(255,255,255,.32)}
.nav[data-state="scrolled"] .lang a{color:var(--ink-soft)}
.nav[data-state="scrolled"] .lang a:hover{color:var(--ink)}
.nav[data-state="scrolled"] .lang [aria-current]{color:var(--ink)}
.nav[data-state="scrolled"] .lang__sep{color:var(--line-strong)}
@media(max-width:900px){.nav__actions .lang{display:none}}
/* in the mobile menu it is one more hairline row */
.nav__menu .lang{padding:.85rem 0;font-size:.85rem;letter-spacing:.06em}
.nav__menu .lang a{padding:0;border-bottom:0;color:var(--ink-soft)}
.nav__menu .lang a:hover{color:var(--ink)}
.nav__menu .lang [aria-current]{color:var(--ink)}
.nav__menu .lang__sep{color:var(--line-strong)}

/* scrolled state */
.nav[data-state="scrolled"]{background:rgba(250,250,247,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom-color:var(--line);box-shadow:0 1px 20px rgba(20,26,32,.05)}
.nav[data-state="scrolled"] .wordmark{color:var(--ink)}
.nav[data-state="scrolled"] .nav__links a{color:var(--ink-soft)}
.nav[data-state="scrolled"] .nav__links a:hover{color:var(--ink)}
.nav[data-state="scrolled"] .nav__toggle span{background:var(--ink)}

.nav__toggle{display:none;width:40px;height:40px;background:transparent;border:0;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;padding:8px}
.nav__toggle span{display:block;height:1.5px;width:100%;background:var(--white);transition:transform var(--t-short) var(--ease-move),opacity var(--t-short) var(--ease-move),background var(--t-medium) var(--ease-move)}
.nav__toggle[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

.nav__menu{position:fixed;top:var(--nav-h);left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:1rem var(--gutter) 1.6rem;display:flex;flex-direction:column;gap:.3rem;z-index:99;box-shadow:0 20px 30px rgba(20,26,32,.06)}
.nav__menu[hidden]{display:none}
@media(min-width:901px){.nav__menu{display:none}}
.nav__menu a{font-family:var(--font-mono);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--ink);padding:.85rem 0;border-bottom:1px solid var(--line)}
.nav__menu a:last-child{border-bottom:0}
.nav__menu-book{color:var(--stone-deep) !important;font-weight:500}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.hero__media,.hero__media img{position:absolute;inset:0;width:100%;height:100%}
.hero__media img{object-fit:cover;object-position:center 50%}
.hero__scrim{position:absolute;inset:0;background:
  linear-gradient(to bottom,rgba(18,24,30,.5) 0%,rgba(18,24,30,.12) 26%,rgba(18,24,30,.05) 48%,rgba(18,24,30,.34) 78%,rgba(18,24,30,.72) 100%)}
.hero__content{position:relative;z-index:2;max-width:var(--wrap);width:100%;margin:0 auto;padding:0 var(--gutter) clamp(4rem,9vh,7rem)}
.hero__title{color:var(--white);font-size:clamp(2.55rem,1.2rem + 5.6vw,6rem);font-weight:300;max-width:16ch;letter-spacing:-0.025em;line-height:1.02;text-wrap:balance;margin-bottom:1.4rem}
.hero__sub{color:rgba(255,255,255,.9);font-size:clamp(1.05rem,1rem + 0.4vw,1.35rem);max-width:44ch;line-height:1.6;margin-bottom:1.9rem}
.hero__rating{color:var(--white);font-family:var(--font-mono);font-size:.82rem;letter-spacing:.08em;margin-bottom:2.1rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.hero__rating .star{color:var(--gold);font-size:1rem}
.hero__rating .sep{opacity:.5}
.hero__scroll{position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);z-index:2}
.hero__scroll-line{display:block;width:1px;height:46px;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.75));animation:scrollpulse 2.4s var(--ease-move) infinite}
@keyframes scrollpulse{0%,100%{opacity:.35;transform:scaleY(.7);transform-origin:bottom}50%{opacity:1;transform:scaleY(1);transform-origin:bottom}}

/* ============================================================
   HERO OPENING SEQUENCE
   The photograph holds alone, then the frame furnishes itself one
   element at a time. Two classes, both put on <html> before the first
   paint by the inline script in <head> and both taken off again by
   js/main.js when their part is over:
     .hero-seq       the text is armed (hidden, waiting its turn)
     .hero-settling  the photograph is mid-settle
   The script refuses to arm either one for a deep link, a restored
   scroll or reduced motion, so the hero text is only ever delayed,
   never conditional: it is in the DOM and readable throughout, and
   without JavaScript nothing is ever hidden at all.
   Only opacity and transform move, so the sequence shifts no layout.
   Opacity rides --hero-ease (a dissolve); the rise rides --ease-enter,
   so each element is at rest well before it is fully visible and you
   never watch text slide.
   ============================================================ */
.hero-seq .nav__inner,
.hero-seq .hero__content>*,
.hero-seq .hero__scroll{opacity:0;pointer-events:none}
.hero-seq .hero__content>*{transform:translateY(var(--hero-rise))}

.hero-seq .nav__inner,
.hero-seq .hero__scroll{transition:opacity var(--hero-fade) var(--hero-ease)}
.hero-seq .hero__content>*{transition:opacity var(--hero-fade) var(--hero-ease),
                                      transform var(--hero-fade) var(--ease-enter)}

.hero-seq .is-lit{opacity:1;transform:none;pointer-events:auto}

/* Skipped: whatever has not arrived yet arrives now, in one short step.
   The class is set before the values change, so the shorter duration is
   the one the new transitions pick up; anything already in flight keeps
   its own and simply carries on. */
.hero-seq.hero-skip .nav__inner,
.hero-seq.hero-skip .hero__content>*,
.hero-seq.hero-skip .hero__scroll{transition-duration:var(--t-medium)}

/* The settle's starting scale, so the photograph is born at --hero-scale
   instead of jumping there once the script runs. main.js then drives it
   inline, composed with the scroll parallax in one transform chain. */
.hero-settling .hero__media img{transform:scale(var(--hero-scale));will-change:transform}

/* ============================================================
   INTRO
   ============================================================ */
.intro{padding:var(--band) 0}
.intro__grid{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
.intro__lead{font-size:clamp(1.7rem,1.1rem + 2.4vw,2.9rem);line-height:1.12;margin-bottom:1.8rem;max-width:20ch;text-wrap:balance}
.intro__text p{color:var(--ink-soft);margin-bottom:1.2rem;max-width:54ch}
.intro__text p:last-child{margin-bottom:0}
.intro__meta{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:2rem !important;padding-top:1.6rem;border-top:1px solid var(--line)}
.intro__meta span{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);position:relative;padding-left:1rem}
.intro__meta span::before{content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;background:var(--stone);border-radius:50%}
.intro__media{margin:0;position:relative}
.intro__media img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px}
.intro__media figcaption{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;color:var(--ink-soft);margin-top:.9rem;text-transform:uppercase}

/* ============================================================
   GUESTBOOK (unified: rating + category scores + carousel,
   full-bleed over the client's panorama with a hero-style scrim)
   ============================================================ */
.guestbook{position:relative;overflow:hidden;background:var(--ink);padding:var(--band) var(--gutter);display:flex;flex-direction:column;align-items:center;text-align:center}
.guestbook__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%}
/* strong at top (bright clouds) and bottom, softer over the mid mountains: WCAG-solid for light text everywhere */
.guestbook__scrim{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(18,24,30,.82) 0%,rgba(18,24,30,.70) 32%,rgba(18,24,30,.62) 55%,rgba(18,24,30,.70) 80%,rgba(18,24,30,.84) 100%)}
.guestbook > .guestbook__rating,
.guestbook > .guestbook__cats,
.guestbook > .carousel{position:relative;z-index:2;width:100%;max-width:var(--wrap)}
.guestbook__rating{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.guestbook__score{font-family:var(--font-display);font-weight:300;font-size:clamp(3.4rem,2rem + 7vw,6rem);line-height:.9;letter-spacing:-0.03em;color:var(--white)}
.guestbook__stars{color:var(--gold);font-size:1.05rem;letter-spacing:.22em}
.guestbook__meta{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.82);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:.4rem}
.guestbook__meta .dot{background:var(--stone);opacity:1}
.guestbook__cats{list-style:none;margin:clamp(2rem,4vw,3rem) 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem 2.2rem}
.guestbook__cats li{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.74);display:flex;gap:.6rem;align-items:baseline}
.guestbook__cats li span{color:var(--white);font-size:.9rem;letter-spacing:0}
/* carousel restyled for the dark panorama */
.guestbook .carousel{padding:0;margin-top:clamp(2.4rem,5vw,3.6rem)}
.guestbook .revslide p{color:var(--white)}
.guestbook .revslide cite{color:rgba(255,255,255,.82)}
.guestbook .carousel__arrow{border-color:rgba(255,255,255,.34);color:var(--white)}
.guestbook .carousel__arrow:hover{background:var(--white);color:var(--ink);border-color:var(--white)}
.guestbook .carousel__arrow:focus-visible{outline-color:var(--stone)}
.guestbook .carousel__count{color:rgba(255,255,255,.72)}
.guestbook .carousel__count #revIndex{color:var(--white)}
.guestbook .carousel__sep{color:rgba(255,255,255,.42)}

/* ============================================================
   SPACES
   ============================================================ */
.spaces{padding:var(--band) 0}
.space{max-width:var(--wrap);margin:0 auto clamp(3.5rem,7vw,6rem);padding:0 var(--gutter);display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.space:last-child{margin-bottom:0}
.space--reverse .space__media{order:2}
.space__media{margin:0}
.space__media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.space__text h3{font-size:clamp(1.65rem,1.1rem + 2vw,2.5rem);margin:.3rem 0 1.1rem;line-height:1.08}
.space__text p{color:var(--ink-soft);max-width:50ch}

/* full-bleed feature card */
.feature{position:relative;overflow:hidden;background:var(--ink);min-height:70vh;display:flex;align-items:flex-end}
.feature__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%}
.feature--tall{min-height:80vh;align-items:center;justify-content:center;text-align:center}
.feature__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(18,24,30,.78),rgba(18,24,30,.28) 55%,rgba(18,24,30,.42))}
.feature__card{position:relative;z-index:2;max-width:var(--wrap);width:100%;margin:0 auto;padding:clamp(3rem,7vh,6rem) var(--gutter)}
.feature__card h3{color:var(--white);font-size:clamp(1.8rem,1.1rem + 2.6vw,3rem);max-width:18ch;margin-bottom:1.2rem;line-height:1.06}
.feature__card p{color:rgba(255,255,255,.9);max-width:46ch}
.feature__card--center{text-align:center}
.feature__card--center h3{margin:0 auto;max-width:22ch}

/* ============================================================
   FACTS STRIP
   ============================================================ */
.facts{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts__list{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);list-style:none;display:grid;grid-template-columns:repeat(6,1fr)}
.facts__list li{padding:clamp(1.3rem,2.4vw,1.9rem) 1.2rem;display:flex;flex-direction:column;gap:.6rem;border-right:1px solid var(--line);position:relative}
.facts__list li:last-child{border-right:0}
.facts__k{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;color:var(--stone-label)}
.facts__v{font-family:var(--font-display);font-weight:300;font-size:clamp(1.05rem,.9rem + .6vw,1.4rem);color:var(--ink);line-height:1.1}

/* ============================================================
   AMENITIES
   ============================================================ */
.amenities{padding:var(--band) 0}
.amenities__grid{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
.amen-col__h{font-family:var(--font-mono);font-weight:500;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);padding-bottom:.9rem;margin-bottom:1.1rem;border-bottom:1px solid var(--line-strong)}
.amen-col ul{list-style:none;margin:0;padding:0}
.amen-col li{color:var(--ink-soft);font-size:.98rem;padding:.42rem 0;line-height:1.45}
.goodtoknow{max-width:var(--wrap);margin:clamp(3rem,6vw,5rem) auto 0;padding:clamp(2.2rem,4vw,3.4rem) var(--gutter);background:var(--paper-2);border:1px solid var(--line);border-radius:3px;margin-left:var(--gutter);margin-right:var(--gutter)}
@media(min-width:1320px){.goodtoknow{margin-left:auto;margin-right:auto}}
.goodtoknow__h{display:flex;flex-direction:column;gap:.6rem;font-size:clamp(1.4rem,1rem + 1.4vw,2rem);margin-bottom:1.8rem;color:var(--ink)}
.goodtoknow__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem 3rem}
.goodtoknow__list li{color:var(--ink-soft);padding-left:1.4rem;position:relative;max-width:48ch;line-height:1.55}
.goodtoknow__list li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--stone-deep)}
.goodtoknow__list strong{color:var(--ink);font-weight:600}

/* ============================================================
   ROOMS (room-by-room photo browser)
   ============================================================ */
.gallery{padding:var(--band) 0;background:var(--paper-2);border-top:1px solid var(--line)}

/* room filter chips */
.chips{max-width:1440px;margin:0 auto clamp(1.6rem,3vw,2.4rem);padding:0 var(--gutter);display:flex;flex-wrap:wrap;gap:.5rem}
.chip{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);background:transparent;border:1px solid var(--line-strong);border-radius:2px;padding:.58rem .85rem;cursor:pointer;white-space:nowrap;transition:color var(--t-micro) var(--ease-move),background var(--t-micro) var(--ease-move),border-color var(--t-micro) var(--ease-move)}
.chip:hover{border-color:var(--stone);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--stone-deep);border-color:var(--stone-deep);color:var(--white)}
.chip__ico{width:15px;height:15px;color:var(--stone-deep);stroke-width:1.5}
.chip:hover .chip__ico{color:var(--stone)}
.chip[aria-pressed="true"] .chip__ico{color:var(--white)}
.chip__count{font-size:.62rem;color:var(--stone-label);margin-left:.05rem;font-variant-numeric:tabular-nums}
.chip:hover .chip__count{color:var(--stone-deep)}
.chip[aria-pressed="true"] .chip__count{color:rgba(255,255,255,.78)}

/* the sheet's own room header (sits under the section head, updates on room change) */
.lede{max-width:1440px;margin:0 auto clamp(.8rem,1.6vw,1.2rem);padding:0 var(--gutter)}
.lede__row{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.room-title{font-family:var(--font-display);font-weight:300;font-size:clamp(1.55rem,1.1rem + 2vw,2.6rem);line-height:1.02;letter-spacing:-.015em;color:var(--ink);margin:0;max-width:20ch;text-wrap:balance}
.room-title .amp{font-style:italic;font-weight:400;color:var(--stone-deep)}
.room-index{font-family:var(--font-mono);font-weight:400;font-size:.74rem;letter-spacing:.14em;color:var(--ink-soft);white-space:nowrap;padding-bottom:.4rem}
.room-index b{color:var(--ink);font-weight:500}
.room-title,.room-index b{transition:opacity var(--t-short) var(--ease-enter),transform var(--t-short) var(--ease-enter)}
/* out fast on the exit curve, back in calmly on the enter curve */
.is-swapping .room-title,.is-swapping .room-index b{opacity:0;transform:translateY(6px);transition:opacity var(--t-micro) var(--ease-exit),transform var(--t-micro) var(--ease-exit)}

/* full-bleed breathing sheet */
.sheet-wrap{width:100%;position:relative}
.sheet{display:flex;align-items:stretch;width:100%;height:var(--sheet-h);gap:2px;background:var(--line);overflow:hidden;contain:layout paint style;touch-action:pan-y}
.frame{position:relative;flex:1 1 0;min-width:0;height:100%;padding:0;border:0;background:var(--paper-3);overflow:hidden;cursor:pointer;display:block}
.frame__img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transform:translateZ(0)}
.frame__cap{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:baseline;gap:.7rem;padding:2.2rem .95rem .85rem;background:linear-gradient(to top,rgba(20,26,32,.82),rgba(20,26,32,.34) 55%,rgba(20,26,32,0));color:var(--paper);opacity:0;transform:translateY(6px);transition:opacity var(--t-short) var(--ease-move),transform var(--t-short) var(--ease-move);pointer-events:none}
.frame.is-focal .frame__cap,.frame.is-open .frame__cap{opacity:1;transform:none}
.frame__idx{font-family:var(--font-mono);font-weight:500;font-size:.66rem;letter-spacing:.14em;color:var(--stone);flex:none;padding-top:.12em}
.frame__txt{font-family:var(--font-mono);font-weight:400;font-size:.72rem;letter-spacing:.02em;line-height:1.32;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.frame:focus-visible{outline:2px solid var(--white);outline-offset:-4px;z-index:3}

/* mobile accordion */
.sheet.is-mobile{flex-direction:column;height:auto;gap:2px}
.sheet.is-mobile .frame{flex:none;width:100%;height:auto}
.sheet.is-mobile .frame__cap{padding:1.6rem .9rem .8rem}

/* reduced-motion static grid fallback */
.sheet.is-static{display:grid;height:auto;gap:2px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.sheet.is-static .frame{flex:none;height:auto;aspect-ratio:4/3}
.sheet.is-static .frame__cap{opacity:0;transform:none;transition:opacity var(--t-micro) var(--ease-move);background:linear-gradient(to top,rgba(20,26,32,.8),rgba(20,26,32,0))}
.sheet.is-static .frame:hover .frame__cap,.sheet.is-static .frame:focus-visible .frame__cap{opacity:1}
@media (max-width:600px){.sheet.is-static{grid-template-columns:repeat(2,1fr)}}

/* pannable contact strip (rooms too dense to rest at the floor width, e.g. Details) */
.sheet.is-pan{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;touch-action:pan-x;cursor:grab;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent 100%)}
.sheet.is-pan::-webkit-scrollbar{display:none}
.sheet.is-pan.is-grabbing{cursor:grabbing}
.sheet.is-pan .frame{cursor:inherit}
.sheet.is-pan .frame:hover .frame__cap,.sheet.is-pan .frame:focus-visible .frame__cap{opacity:1;transform:none}
.pan-hint{position:absolute;top:50%;right:clamp(1rem,3vw,2.4rem);transform:translateY(-50%);z-index:4;pointer-events:none;display:flex;gap:.5em;align-items:center;font-family:var(--font-mono);font-weight:500;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--paper);background:rgba(20,26,32,.5);padding:.5rem .8rem;opacity:1;transition:opacity var(--t-long) var(--ease-move)}
.pan-hint.is-gone{opacity:0}
.pan-hint span{display:inline-block;animation:panNudge 1.5s var(--ease-move) infinite}
@keyframes panNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}

/* meta line under the sheet */
.sheet-meta{max-width:1440px;margin:1.15rem auto 0;padding:0 var(--gutter);display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.sheet-meta__count{font-family:var(--font-mono);font-weight:400;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.sheet-meta__count b{color:var(--stone-deep);font-weight:500}
.sheet-meta__hint{font-family:var(--font-mono);font-weight:400;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone-label);transition:opacity var(--t-long) var(--ease-move)}
.sheet-meta__hint.is-gone{opacity:0}

/* ============================================================
   REGION
   ============================================================ */
.region{padding:var(--band) 0}
.region__list{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);list-style:none}
.region__item{border-top:1px solid var(--line)}
.region__item:last-child{border-bottom:1px solid var(--line)}
/* the hover nudge rides on transform, never on padding: no layout in a transition */
.region__item:hover .region__row,.region__item:hover .region__panel{transform:translateX(.55rem)}
/* the collapsed row is the control: same rhythm as the old static line */
.region__row{
  position:relative;width:100%;display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1.2fr);
  gap:1.5rem;align-items:baseline;
  margin:0;padding:1.5rem 2.4rem 1.5rem 0;
  background:none;border:0;border-radius:0;font:inherit;color:inherit;text-align:left;cursor:pointer;
  transition:transform var(--t-short) var(--ease-move);
}
.region__place{font-family:var(--font-display);font-weight:300;font-size:clamp(1.35rem,1rem + 1.6vw,2.2rem);color:var(--ink);line-height:1}
.region__dist{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stone-label);white-space:nowrap}
.region__what{color:var(--ink-soft);font-size:1rem;text-align:right}
/* hairline plus, becomes a minus when the row is open */
.region__plus{position:absolute;right:0;top:50%;width:13px;height:1px;transform:translateY(-50%)}
.region__plus::before,.region__plus::after{content:"";position:absolute;inset:0;background:var(--stone-deep);transition:transform var(--t-short) var(--ease-move),opacity var(--t-short) var(--ease-move)}
.region__plus::after{transform:rotate(90deg)}
.region__row[aria-expanded="true"] .region__plus::after{transform:rotate(0deg);opacity:0}
/* The detail panel animates its REAL size: the grid row travels 0fr to 1fr, so the
   easing describes the whole distance instead of creeping toward a ceiling, and the
   open state is a true auto height (late reflow from fonts, resize or rotation can
   never clip it). Closed stays visibility:hidden, so the links are out of the tab
   order and out of hit-testing. Opening is --t-medium, closing --t-short: about
   three quarters of the open, which is how good UI feels.
   The SIZE keeps the entrance curve in BOTH directions on purpose. It is a
   reversible state, and an accelerating collapse barely moves for its first
   half, so the click reads as unanswered and the close ends up feeling slower
   than the open even though it is shorter. Only the content, which genuinely
   leaves, uses the exit curve.
   minmax(0,Xfr) and not a bare Xfr: a bare 0fr keeps an auto row minimum, and
   the panel's own bottom padding would floor the collapsed row at 34px. */
.region__panel{
  display:grid;grid-template-rows:minmax(0,0fr);overflow:hidden;visibility:hidden;
  transition:grid-template-rows var(--t-short) var(--ease-enter),
             transform var(--t-short) var(--ease-move),
             visibility 0s linear var(--t-short);
}
.region__panel.is-open{
  grid-template-rows:minmax(0,1fr);visibility:visible;
  transition:grid-template-rows var(--t-medium) var(--ease-enter),
             transform var(--t-short) var(--ease-move);
}
.region__panel[hidden]{display:none}
/* the content arrives just behind its container, so the row reads as detail
   arriving rather than a box growing */
.region__panel-in{
  min-height:0;padding:0 2.4rem 2.1rem calc(26px + 1.5rem);max-width:78ch;
  opacity:0;transform:translateY(6px);
  transition:opacity var(--t-short) var(--ease-exit),transform var(--t-short) var(--ease-exit);
}
.region__panel.is-open .region__panel-in{
  opacity:1;transform:none;
  transition:opacity var(--t-medium) var(--ease-enter) 60ms,transform var(--t-medium) var(--ease-enter) 60ms;
}
.region__line{position:relative;padding-left:1.4rem;margin:0 0 .55rem;color:var(--ink-soft);font-size:.97rem;line-height:1.66}
.region__line:last-of-type{margin-bottom:0}
.region__line::before{content:"";position:absolute;left:0;top:.82em;width:.65rem;height:1px;background:var(--line-strong)}
.region__links{display:flex;flex-wrap:wrap;gap:.7rem 1.8rem;margin-top:1.3rem;padding-left:1.4rem}
.region__link{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  text-decoration:none;padding-bottom:.3rem;border-bottom:1px solid var(--line-strong);
  transition:color var(--t-micro) var(--ease-move),border-color var(--t-micro) var(--ease-move);
}
.region__link:hover{color:var(--stone-deep);border-color:var(--stone-deep)}
.region__ext{width:12px;height:12px;color:var(--stone-deep);stroke-width:1.45}
.region__note{
  max-width:var(--wrap);margin:1.7rem auto 0;padding:0 var(--gutter);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.03em;line-height:1.7;color:var(--ink-soft);
}

/* ============================================================
   BOOKING
   ============================================================ */
.booking{padding:var(--band) 0}
.booking__inner{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  grid-template-areas:"intro intro" "cal action";
  column-gap:clamp(2.5rem,6vw,5.5rem);row-gap:clamp(2.2rem,5vw,3.4rem);align-items:start;
}
.booking__intro{grid-area:intro}
.booking__cal{grid-area:cal}
.booking__action{grid-area:action}
.booking__intro h2{font-size:clamp(2.2rem,1.4rem + 3vw,3.6rem);margin:.4rem 0 1.4rem}
.booking__lead{color:var(--ink-soft);max-width:52ch}

/* the two steps: dates first, then the booking itself */
.step{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;gap:.75rem;margin:0 0 1.15rem}
.step__n{color:var(--stone-deep);font-weight:500;position:relative;padding-right:.75rem}
.step__n::after{content:"";position:absolute;right:0;top:50%;width:.35rem;height:1px;background:var(--line-strong)}

.booking__go{transition:background var(--t-short) var(--ease-move),color var(--t-short) var(--ease-move),border-color var(--t-short) var(--ease-move)}
.booking__go[data-ready="false"]{background:transparent;color:var(--ink-soft);border-color:var(--line-strong)}
.booking__go[data-ready="false"]:hover{color:var(--ink);border-color:var(--ink);background:transparent}
.booking__go[data-ready="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.booking__go[data-ready="true"]:hover{background:var(--stone-deep);border-color:var(--stone-deep)}
/* Airbnb mark: the official Belo, its own red, sized to the button's type */
.ota__brand{display:inline-flex;align-items:center;gap:.45em}
.belo{width:1.05em;height:1.05em;flex:none;fill:#FF385C;stroke:none}
.booking__hint{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.03em;line-height:1.6;color:var(--ink-soft);margin-top:.85rem}

.booking__ask{margin-top:clamp(2rem,4vw,2.8rem);padding-top:1.4rem;border-top:1px solid var(--line)}
.booking__ask-h{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:1rem}
.link-quiet{
  display:inline-block;font-family:var(--font-body);font-size:.98rem;color:var(--ink);
  background:none;border:0;padding:0;cursor:pointer;text-align:left;
  text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px;text-decoration-thickness:1px;
  transition:text-decoration-color var(--t-micro) var(--ease-move);
}
.link-quiet:hover{text-decoration-color:var(--ink)}
.booking__ask .phone{display:block;margin-top:.65rem}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--ink);color:var(--paper);padding:clamp(3.5rem,7vw,5.5rem) 0}
.footer__inner{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem}
.footer__mark{font-family:var(--font-display);font-weight:300;font-size:1.9rem;letter-spacing:.02em}
.footer__place{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);display:flex;align-items:center;flex-wrap:wrap;justify-content:center}
.footer__place .dot{background:var(--stone);opacity:1}
.footer__book{color:rgba(255,255,255,.7);font-size:.95rem}
.footer__credit{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:.6rem}
.footer__credit span{color:var(--stone)}

/* ============================================================
   ROOMS VIEWER (FLIP shared-element fullscreen)
   z-index sits above the nav (100) and film grain (150).
   Closed = display:none via .viewer[hidden] (hit-test guard).
   ============================================================ */
.viewer{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;touch-action:none}
.viewer[hidden]{display:none}
.viewer__scrim{position:absolute;inset:0;background:var(--ink-strong);opacity:0;transition:opacity var(--t-medium) var(--ease-move);cursor:pointer}
.viewer.is-in .viewer__scrim{opacity:.99}
.flyer{position:fixed;z-index:201;overflow:hidden;transform-origin:center center;will-change:transform,clip-path;background:var(--ink-strong);pointer-events:none}
.flyer img{width:100%;height:100%;object-fit:cover;display:block}
.viewer__chrome{position:absolute;inset:0;z-index:202;pointer-events:none;opacity:0;transition:opacity var(--t-short) var(--ease-move)}
.viewer.is-ready .viewer__chrome{opacity:1}
.viewer__chrome > *{pointer-events:auto}
.viewer__cap{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;justify-content:center;text-align:center;padding:1.6rem var(--pad) clamp(1.4rem,3vw,2rem);color:var(--paper);pointer-events:none}
.viewer__idx{font-family:var(--font-mono);font-weight:500;font-size:.7rem;letter-spacing:.18em;color:var(--stone)}
.viewer__txt{font-family:var(--font-display);font-weight:300;font-style:italic;font-size:clamp(1rem,2.4vw,1.4rem);line-height:1.3;color:var(--paper)}
.viewer__counter{position:absolute;top:clamp(1.1rem,2.5vw,1.7rem);left:var(--pad);font-family:var(--font-mono);font-weight:400;font-size:.72rem;letter-spacing:.2em;color:rgba(250,250,247,.72);pointer-events:none}
.viewer__counter b{color:var(--paper);font-weight:500}
.viewer__btn{position:absolute;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(250,250,247,.28);color:var(--paper);cursor:pointer;border-radius:50%;transition:border-color var(--t-micro) var(--ease-move),background-color var(--t-micro) var(--ease-move),transform var(--t-micro) var(--ease-move)}
.viewer__btn:hover{border-color:rgba(250,250,247,.7);background:rgba(250,250,247,.06)}
.viewer__btn:active{transform:scale(.94)}
.viewer__btn:focus-visible{outline:2px solid var(--stone);outline-offset:3px}
.viewer__btn svg{width:40%;height:40%;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.viewer__close{top:clamp(1rem,2.5vw,1.6rem);right:var(--pad);width:48px;height:48px}
.viewer__nav{top:50%;transform:translateY(-50%);width:56px;height:56px}
.viewer__nav:active{transform:translateY(-50%) scale(.94)}
.viewer__nav--prev{left:clamp(.6rem,2vw,1.6rem)}
.viewer__nav--next{right:clamp(.6rem,2vw,1.6rem)}
@media (max-width:767px){
  .viewer__cap{justify-content:flex-start;text-align:left}
  .viewer__nav{width:46px;height:46px}
  .viewer__close{width:44px;height:44px}
}

/* ============================================================
   ICONS (one thin-line family)
   ============================================================ */
.icon-defs{position:absolute;width:0;height:0;overflow:hidden}
.ico{display:inline-block;width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- facts pictograms ---------- */
.facts__ico{width:26px;height:26px;color:var(--stone-deep);stroke-width:1.35}

/* ---------- amenities pictograms ---------- */
.amen-col__h{display:flex;align-items:center;gap:.55rem}
.amen-col__ico{width:19px;height:19px;color:var(--stone-deep);stroke-width:1.45}
.amen-col li{display:flex;align-items:center;gap:.7rem}
.amen__ico{width:18px;height:18px;color:var(--stone);stroke-width:1.4;opacity:.92}

/* ---------- good to know pictograms ---------- */
.goodtoknow__list li{padding-left:2.1rem}
.goodtoknow__list li::before{display:none}
.gtk__ico{position:absolute;left:0;top:.1em;width:20px;height:20px;color:var(--stone-deep);stroke-width:1.4}

/* ---------- region pictograms ---------- */
.region__row{grid-template-columns:auto minmax(0,1fr) auto minmax(0,1.2fr)}
.region__ico{width:26px;height:26px;color:var(--stone-deep);stroke-width:1.35;align-self:center}

/* ============================================================
   INTRO SLIDESHOW
   ============================================================ */
.intro__media .slideshow{position:relative;width:100%;aspect-ratio:3/4;border-radius:2px;overflow:hidden;background:var(--paper-3)}
.intro__media .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;opacity:0;transition:opacity var(--t-long) var(--ease-move)}
.intro__media .slide.is-active{opacity:1}
.intro__media .slide[hidden]{display:none}

/* ============================================================
   GARDEN RHYTHM
   ============================================================ */
.space--garden{margin-top:var(--band)}
.space__media--garden{object-position:center 62%}

/* ============================================================
   REVIEWS CAROUSEL
   ============================================================ */
.carousel{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.carousel__viewport{position:relative}
.revslide{margin:0 0 1.6rem}
.revslide:last-child{margin-bottom:0}
.revslide p{font-family:var(--font-display);font-weight:300;font-style:italic;font-size:clamp(1.5rem,1.1rem + 1.9vw,2.5rem);line-height:1.32;letter-spacing:-0.01em;color:var(--ink);max-width:26ch;margin:0 auto;text-align:center;text-wrap:balance}
.revslide cite{display:flex;align-items:center;justify-content:center;margin-top:1.7rem;font-family:var(--font-mono);font-style:normal;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.revslide cite .dot{background:var(--stone);opacity:1}
.carousel.is-enhanced .carousel__viewport{overflow:hidden}
.carousel.is-enhanced .revslide{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--t-medium) var(--ease-move),visibility 0s linear var(--t-medium)}
.carousel.is-enhanced .revslide.is-active{position:relative;opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--t-medium) var(--ease-move)}
.carousel__nav{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-top:clamp(2rem,4vw,3rem)}
.carousel__arrow{width:48px;height:48px;border-radius:50%;border:1px solid var(--line-strong);background:transparent;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--t-micro) var(--ease-move),color var(--t-micro) var(--ease-move),border-color var(--t-micro) var(--ease-move)}
.carousel__arrow:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.carousel__arrow .ico{width:20px;height:20px}
.carousel__count{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.1em;color:var(--ink-soft);min-width:5.5ch;text-align:center}
.carousel__count #revIndex{color:var(--ink)}
.carousel__sep{margin:0 .55rem;color:var(--line-strong)}

/* ============================================================
   BOOKING: contact + calendar
   ============================================================ */
.phone{display:inline-flex}
.phone__btn .ico{width:17px;height:17px;margin-right:.15rem}
.booking__cal{position:relative}
.cal{background:var(--paper-2);border:1px solid var(--line);border-radius:3px;padding:clamp(1.4rem,2.6vw,2rem)}
.cal__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.3rem}
.cal__title{font-family:var(--font-display);font-weight:300;font-size:clamp(1.15rem,1rem + .6vw,1.4rem);color:var(--ink);text-align:center;flex:1}
.cal__nav{width:40px;height:40px;flex:none;border-radius:50%;border:1px solid var(--line-strong);background:var(--paper);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--t-micro) var(--ease-move),color var(--t-micro) var(--ease-move),border-color var(--t-micro) var(--ease-move)}
.cal__nav:hover:not(:disabled){background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cal__nav:disabled{opacity:.32;cursor:not-allowed}
.cal__nav .ico{width:18px;height:18px}
.cal__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.4rem)}
.cal__month-name{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone-label);text-align:center;margin-bottom:.9rem}
.cal__dow{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:.45rem}
.cal__dow span{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.04em;color:var(--ink-soft);text-align:center;text-transform:uppercase}
.cal__days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal__day{appearance:none;-webkit-appearance:none;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-family:var(--font-body);font-size:.86rem;font-variant-numeric:tabular-nums;color:var(--ink);border-radius:50%;border:1px solid transparent;background:none;padding:0;cursor:default}
.cal__day--empty{visibility:hidden}
.cal__day--past{color:var(--line-strong)}
/* days are painted in place, never re-rendered, so picking a range is continuous */
.cal__day--open{cursor:pointer;transition:background var(--t-micro) var(--ease-move),color var(--t-micro) var(--ease-move),border-color var(--t-micro) var(--ease-move),border-radius var(--t-micro) var(--ease-move)}
.cal__day--open:hover:not(.cal__day--sel):not(.cal__day--start):not(.cal__day--end):not(.cal__day--range){background:var(--paper);border-color:var(--line-strong)}
.cal__day--booked{color:var(--ink-soft);background:var(--paper-3);position:relative}
.cal__day--booked::after{content:"";position:absolute;left:24%;right:24%;top:50%;height:1px;background:var(--line-strong);transform:rotate(-14deg)}
.cal__day--range{background:var(--paper-3);border-radius:0}
.cal__day--sel{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cal__day--start,.cal__day--end{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cal__day--start{border-top-left-radius:50%;border-bottom-left-radius:50%}
.cal__day--end{border-top-right-radius:50%;border-bottom-right-radius:50%}
.cal__foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.7rem 1.2rem;margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.cal__legend{list-style:none;display:flex;gap:1.4rem;margin:0;padding:0}
.cal__legend li{display:flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.cal__swatch{width:14px;height:14px;border-radius:50%;border:1px solid var(--line-strong);flex:none;position:relative;overflow:hidden}
.cal__swatch--open{background:var(--paper)}
.cal__swatch--booked{background:var(--paper-3)}
.cal__swatch--booked::after{content:"";position:absolute;left:1px;right:1px;top:50%;height:1px;background:var(--line-strong);transform:rotate(-14deg)}
.cal__sync{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.03em;color:var(--ink-soft);text-align:right}
.cal__selection{margin-top:1.1rem;font-size:.98rem;line-height:1.5;color:var(--ink-soft);min-height:1.5em}
.cal__selection strong{color:var(--ink);font-weight:600}

/* ============================================================
   REVEAL: attention-ordered, fade-led, short travel
   Blocks that cross into view together step --stagger apart in document
   order (capped at 3 steps, so a long list arrives as a group). Inside a
   block, .is-seq hands the motion to the children so the eyebrow, then the
   heading, then the body arrive in reading order. js/main.js sets --rd.
   ============================================================ */
.reveal{opacity:0;transform:translateY(14px);
  transition:opacity var(--t-long) var(--ease-enter) var(--rd,0ms),transform var(--t-long) var(--ease-enter) var(--rd,0ms)}
.reveal.is-in{opacity:1;transform:none}

.reveal.is-seq{opacity:1;transform:none;transition:none}
.reveal.is-seq>*{opacity:0;transform:translateY(10px);
  transition:opacity var(--t-long) var(--ease-enter) calc(var(--rd,0ms) + var(--rc,0ms)),
             transform var(--t-long) var(--ease-enter) calc(var(--rd,0ms) + var(--rc,0ms))}
.reveal.is-seq.is-in>*{opacity:1;transform:none}
.reveal.is-seq>*:nth-child(2){--rc:var(--stagger)}
.reveal.is-seq>*:nth-child(3){--rc:calc(var(--stagger) * 2)}
.reveal.is-seq>*:nth-child(n+4){--rc:calc(var(--stagger) * 3)}

/* inside the first viewport at load: present at once, never animated late */
.reveal.is-now,.reveal.is-seq.is-now>*{transition:none}

/* film grain */
body::after{content:"";position:fixed;inset:0;z-index:150;pointer-events:none;opacity:.028;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ============================================================
   MEDIA PARALLAX (restrained single-layer: hero + full-bleed bands)
   ============================================================ */
/* Frame each new band photo by where its subject sits.
   These apply whether parallax is on or off. */
.feature:not(.feature--tall) .feature__bg{object-position:center 46%}
.feature--tall .feature__bg{object-position:center 52%}

/* The media sits taller than its band so it can glide without ever
   exposing a gap. Enabled only when wide enough AND motion is allowed;
   JS adds .parallax-on and drives the transform. Off = static, framed. */
@media (min-width:768px) and (prefers-reduced-motion:no-preference){
  .parallax-on .hero__media img,
  .parallax-on .guestbook__bg,
  .parallax-on .feature__bg{height:118%;top:-9%;bottom:auto;will-change:transform}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
  .amenities__grid{grid-template-columns:repeat(3,1fr);row-gap:2.5rem}
}
@media(max-width:900px){
  .nav__links{display:none}
  .nav__toggle{display:flex}
  .nav__cta{padding:.6rem 1rem;font-size:.7rem}
  .nav__cta .cta-lg{display:none}
  .nav__cta .cta-sm{display:inline}
  .wordmark{font-size:1.12rem}
  .nav[data-state="top"] .nav__toggle span{background:#fff}
  .intro__grid{grid-template-columns:1fr;gap:2.5rem}
  .intro__media{max-width:440px}
  .intro__media img{aspect-ratio:4/3}
  .intro__media .slideshow{aspect-ratio:4/3}
  .space{grid-template-columns:1fr;gap:1.5rem;margin-bottom:3.5rem}
  .space--reverse .space__media{order:0}
  .booking__inner{grid-template-columns:1fr;grid-template-areas:"intro" "cal" "action";gap:2.5rem}
  .facts__list{grid-template-columns:repeat(3,1fr)}
  .facts__list li:nth-child(3n){border-right:0}
  .facts__list li:nth-child(-n+3){border-bottom:1px solid var(--line)}
}
@media(max-width:640px){
  :root{--band:3.6rem}
  .amenities__grid{grid-template-columns:1fr 1fr;gap:1.6rem 1.4rem}
  .goodtoknow__list{grid-template-columns:1fr;gap:1rem}
  .region__row{grid-template-columns:auto 1fr auto;grid-template-areas:"ico place dist" "ico what what";gap:.3rem 1rem;align-items:center;padding-right:1.9rem}
  .region__ico{grid-area:ico;align-self:center}
  .region__place{grid-area:place}.region__dist{grid-area:dist}.region__what{grid-area:what;text-align:left}
  .region__panel-in{padding:0 1.9rem 1.7rem calc(26px + 1rem)}
  .region__line{font-size:.94rem}
  .region__links{padding-left:1.4rem}
  .facts__list{grid-template-columns:repeat(2,1fr)}
  .facts__list li{border-right:0;border-bottom:1px solid var(--line);padding:1.4rem 1rem}
  .facts__list li:nth-child(odd){border-right:1px solid var(--line)}
  .cal__grid{grid-template-columns:1fr}
  .chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:.5rem}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .hero__scroll{display:none}
}

/* ============================================================
   MOTION PREFERENCES
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  /* the tokens collapse, so every rule above becomes instant by construction */
  :root{--t-micro:1ms;--t-short:1ms;--t-medium:1ms;--t-long:1ms;--stagger:0ms}
  html{scroll-behavior:auto}
  .reveal,.reveal.is-seq>*{opacity:1 !important;transform:none !important;transition:none !important}
  /* the opening sequence is never armed under this preference; this is the
     floor if the preference is turned on part way through a visit */
  .hero-seq .nav__inner,.hero-seq .hero__content>*,.hero-seq .hero__scroll{
    opacity:1 !important;transform:none !important;pointer-events:auto}
  .hero__scroll-line,.pan-hint span{animation:none}
  *{transition-duration:.001ms !important;transition-delay:0s !important;
    animation-duration:.001ms !important;animation-delay:0s !important;animation-iteration-count:1 !important}
}