/* Landing page styles: components and layout only. The design tokens load first, from their own file in
   assets (a copy of the brand's one tokens file); this file defines none. A value only one component uses
   is private to it (--_name). The one hex left is inside the confirmation tick's data URI (it equals
   --color-success; a custom property cannot reach into a data URI). */

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; overflow-x:clip}
body{
  margin:0; min-width:320px; overflow-x:clip;
  font-family:var(--font); font-weight:var(--weight-light); font-size:var(--fs-base); line-height:var(--leading-body);
  color:var(--color-text); background:var(--color-bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul[role="list"],ol{list-style:none; padding:0}
img{display:block; max-width:100%; height:auto}
picture{display:contents}
a{color:var(--color-accent)}
a:focus-visible, button:focus-visible{outline:var(--focus-width) solid var(--color-focus); outline-offset:var(--focus-width)}
main:focus{outline:none}
[hidden]{display:none !important}
.sr-only{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

.container{width:100%; max-width:calc(var(--container) + 2 * var(--gutter)); margin:0 auto; padding:0 var(--gutter)}
.container--narrow{max-width:calc(var(--container-narrow) + 2 * var(--gutter))}

/* ---------- Type ---------- */
.display{font-size:var(--fs-3xl); font-weight:var(--weight-medium); line-height:var(--leading-tight); letter-spacing:var(--tracking-tight); text-wrap:balance}
.h2{font-size:var(--fs-2xl); font-weight:var(--weight-medium); line-height:var(--leading-heading); letter-spacing:var(--tracking-heading); text-wrap:balance}
.h3{font-size:var(--fs-xl); font-weight:var(--weight-medium); line-height:var(--leading-heading); letter-spacing:var(--tracking-heading); text-wrap:balance}
.h4{font-size:var(--fs-lg); font-weight:var(--weight-medium); line-height:var(--leading-snug); text-wrap:balance}
.lead{font-size:var(--fs-md); line-height:var(--leading-body); color:var(--color-text-muted); max-width:var(--measure); text-wrap:balance}
.eyebrow{font-size:var(--fs-xs); font-weight:var(--weight-medium); line-height:var(--leading-snug); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--color-accent)}

/* ---------- Skip links ---------- */
.skip-link{
  position:absolute; z-index:100; left:var(--gutter); top:var(--space-2);
  padding:var(--space-3) var(--space-5); border-radius:var(--radius-pill);
  font-weight:var(--weight-medium); font-size:var(--fs-sm); color:var(--color-surface); background:var(--color-accent); text-decoration:none;
}
.skip-link:not(:focus){width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.skip-link--inline{top:var(--space-4)}

/* ---------- Buttons: pills ---------- */
.btn{
  --_h:52px; --_px:1.625rem;
  --_bg:var(--color-accent); --_fg:var(--color-surface); --_bd:var(--color-accent);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:var(--_h); padding:0 var(--_px);
  font:var(--weight-medium) var(--fs-sm)/1 var(--font); letter-spacing:.005em; white-space:nowrap;
  color:var(--_fg); background:var(--_bg); border:var(--line-width-strong) solid var(--_bd);
  border-radius:var(--radius-pill); cursor:pointer; text-decoration:none;
  transition:background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:hover{--_bg:var(--color-accent-strong); --_bd:var(--color-accent-strong)}
.btn:active{--_bg:var(--color-accent-strong); --_bd:var(--color-accent-strong); transform:translateY(1px)}
.btn:focus-visible{outline:var(--focus-width) solid var(--color-focus); outline-offset:var(--focus-width)}
.btn--secondary{--_bg:transparent; --_fg:var(--color-accent); --_bd:var(--color-accent)}
.btn--secondary:hover{--_bg:var(--color-accent); --_fg:var(--color-surface); --_bd:var(--color-accent)}
.btn--secondary:active{--_bg:var(--color-accent-strong); --_fg:var(--color-surface); --_bd:var(--color-accent-strong)}
.btn--sm{--_h:44px; --_px:1.125rem; font-size:.9375rem}
.btn--lg{--_h:60px; --_px:2rem; font-size:var(--fs-base)}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:var(--z-sticky); height:var(--sticky-offset);
  display:flex; align-items:center; gap:var(--space-6);
  padding:0 var(--gutter); background:var(--color-bg); border-bottom:var(--line-width) solid transparent;
  transition:border-color var(--dur-base) var(--ease);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .site-header{background:color-mix(in srgb, var(--color-bg) 88%, transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px)}
}
.site-header.is-scrolled{border-bottom-color:var(--color-line)}
.site-header__logo{display:flex; align-items:center; min-height:44px; flex:none; border-radius:6px}
.site-header__logo img{display:block; height:22px; width:auto}
@media (min-width:375px){ .site-header__logo img{height:26px} }
@media (min-width:768px){ .site-header__logo img{height:30px} }
.site-header__logo:focus-visible{outline-offset:6px}
.site-nav{display:none; margin-left:auto; gap:var(--space-7)}
@media (min-width:1024px){ .site-nav{display:flex} }
.site-nav a{
  --_pad:calc((44px - 1.5em) / 2);   /* a 44px tap target around one 1.5em line */
  font-size:.9375rem; font-weight:var(--weight-medium); line-height:1.5; color:var(--color-text); text-decoration:none; padding:var(--_pad) 0;
  background:linear-gradient(var(--color-accent),var(--color-accent)) left 0 bottom calc(var(--_pad) - var(--space-2)) / 0 2px no-repeat;
  transition:background-size var(--dur-base) var(--ease-out);
}
.site-nav a:hover{background-size:100% 2px}
.site-nav a:focus-visible{outline-offset:4px; border-radius:6px}
.site-header__cta{margin-left:auto; flex:none}
@media (min-width:1024px){ .site-header__cta{margin-left:var(--space-4)} }
@media (max-width:399px){ .site-header__cta{padding:0 var(--space-4); font-size:.875rem} .site-header{gap:var(--space-3)} }

/* ---------- Album print ---------- */
/* The paper border and caption depth: private to the print, shared with the barrel that sizes its card from them */
.print, .rv{--_print-pad:clamp(10px, .45rem + .55vw, 16px); --_print-foot:clamp(2.5rem, 2.2rem + 1vw, 3.25rem)}
.print{
  --r:0deg;
  position:relative; margin:0; display:block; background:var(--color-surface);
  padding:var(--_print-pad) var(--_print-pad) 0;
  border-radius:var(--radius-md); border:var(--line-width) solid color-mix(in srgb, var(--color-text) 6%, transparent);
  box-shadow:var(--shadow); transform:rotate(var(--r));
}
.print img{display:block; width:100%; height:auto; border-radius:var(--radius-sm); background:var(--color-bg-alt)}
.print figcaption{
  display:flex; align-items:center; min-height:var(--_print-foot); padding:0 2px;
  font-size:var(--fs-sm); font-style:italic; font-weight:var(--weight-light); line-height:var(--leading-snug); color:var(--color-text-muted);
}
.print--no-caption{padding-bottom:var(--_print-pad)}
/* The "Illustration" tag on every generated print: one small label in the photo's corner. All of them
   show while the body carries .has-illustrations; take that class off (or a tag out) when real photos arrive. */
.print__tag{display:none}
.has-illustrations .print__tag{
  position:absolute; z-index:1; top:calc(var(--_print-pad) + 6px); left:calc(var(--_print-pad) + 6px);
  display:inline-flex; align-items:center; padding:3px 8px;
  font-size:.6875rem; font-weight:var(--weight-medium); line-height:1.2; letter-spacing:.02em; white-space:nowrap;
  color:var(--color-text-muted); background:var(--color-surface); border-radius:var(--radius-pill); pointer-events:none;
}
@media (max-width:767px){
  .has-illustrations .print__tag{top:calc(var(--_print-pad) + 4px); left:calc(var(--_print-pad) + 4px); padding:2px 6px; font-size:.625rem}
}

/* ---------- Sections and heads ---------- */
.section{padding:var(--section-y) 0}
/* Every focus or anchor scroll inside the page clears the sticky header (the header's own links take
   no margin: they are always in view). Fields keep their label in view too. */
main :is(a, button, [tabindex]), section[id], #book{scroll-margin-top:calc(var(--sticky-offset) + var(--space-3))}
main :is(.input, .textarea, .daterange__part){scroll-margin-top:calc(var(--sticky-offset) + var(--space-8))}
.section--cream{background:var(--color-bg-alt)}
.section-head{max-width:var(--container-narrow); margin-bottom:clamp(3rem, 2.65rem + 1.5vw, 4rem)}
.section-head .eyebrow{margin-bottom:var(--space-3)}
.section-head .h2{margin-bottom:var(--space-4)}

/* =====================================================================================
   2. Hero
   ===================================================================================== */
/* One full-width photo, the plum fading left to right behind the copy, like the ads */
.hero{position:relative; z-index:5; isolation:isolate; background:var(--color-accent); color:var(--color-surface);
  --_band:min(calc(58vw + 7rem), 62svh);
  padding:calc(var(--_band) - 6rem) 0 var(--section-y)}
.hero__grid{display:grid; gap:clamp(1.75rem, 1rem + 3vw, 3rem); grid-template-areas:"copy"}
.hero__copy{grid-area:copy; position:relative; z-index:3; min-width:0}
.hero .display{margin-bottom:var(--space-5); max-width:14ch}
.hero .lead{margin-bottom:clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem)}
.hero__bg{display:block; position:absolute; inset:0 0 auto 0; height:var(--_band); z-index:-2; margin:0}
.hero__bg img{display:block; width:100%; height:100%; object-fit:cover; object-position:72% 30%}
.hero__veil{position:absolute; inset:0 0 auto 0; height:calc(var(--_band) + 1px); z-index:-1;
  background:linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--color-accent) 55%, transparent) 62%, color-mix(in srgb, var(--color-accent) 96%, transparent) 100%)}
@media (min-width:1024px){
  .hero{padding:clamp(4rem, 2rem + 5vw, 7.5rem) 0 clamp(4.5rem, 2rem + 5vw, 8rem)}
  .hero__grid{grid-template-columns:minmax(0, 660px); align-items:center; column-gap:clamp(2.5rem, 4.5vw, 5rem)}
  .hero__grid.is-frozen{align-items:start}   /* the script keeps the resting offsets as margins */
  .hero__bg, .hero__veil{inset:0; height:auto}
  .hero__bg img{object-position:62% 40%}
  .hero__veil{background:
    linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 96%, transparent) 0%, color-mix(in srgb, var(--color-accent) 94%, transparent) 50%, color-mix(in srgb, var(--color-accent) 50%, transparent) 61%, color-mix(in srgb, var(--color-accent) 8%, transparent) 71%, transparent 82%),
    linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--color-accent) 45%, transparent) 100%)}
}

/* ---------- On the plum field (hero and closing): soft leads, the blush line, the white panel ---------- */
:is(.hero, .closing) .lead{color:var(--color-accent-soft)}
:is(.hero, .closing) .booking{color:var(--color-text); border-color:transparent}
.text-blush{color:var(--color-accent-blush)}
/* Chips: short facts under the hero panel (the brand's chip, outlined in blush on the plum field); they wrap on phones */
.chips{display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-5); padding:0}
.chips > li{display:inline-flex; align-items:center; min-height:36px; padding:0 var(--space-4);
  font-size:var(--fs-sm); font-weight:var(--weight-medium); line-height:var(--leading-snug); color:var(--color-surface);
  border:var(--line-width) solid var(--color-accent-blush); border-radius:var(--radius-pill)}

/* ---------- Panels ---------- */
.panel{background:var(--color-surface); border:var(--line-width) solid var(--color-line); border-radius:var(--radius-lg)}

/* =====================================================================================
   The booking module (hero and closing)
   ===================================================================================== */
.booking{container-type:inline-size; position:relative; z-index:2; padding:clamp(1rem, .55rem + 1.8vw, 1.75rem)}
.booking--full{padding:clamp(1.25rem, .6rem + 2.6vw, 3rem)}

/* Fields */
.field{display:grid; gap:var(--space-2); align-content:start; min-width:0}
.field__label{display:flex; justify-content:space-between; gap:var(--space-3); font-size:var(--fs-xs); font-weight:var(--weight-medium); line-height:var(--leading-snug); color:var(--color-text)}
.field__hint{font-weight:var(--weight-light); color:var(--color-text-muted)}
.field__error{font-size:var(--fs-xs); font-weight:var(--weight-medium); line-height:var(--leading-snug); color:var(--color-error)}
.input, .textarea, .daterange{--_h:56px; --_px:1.125rem}
.input, .textarea{
  width:100%; min-height:var(--_h); padding:0 var(--_px); margin:0;
  font:var(--weight-light) var(--fs-base)/1.3 var(--font); color:var(--color-text);
  background:var(--color-surface); border:var(--line-width-strong) solid var(--color-border); border-radius:var(--radius-md);
  transition:border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
  -webkit-appearance:none; appearance:none;
}
.textarea{display:block; min-height:8rem; padding:var(--space-4) var(--_px); resize:vertical; line-height:var(--leading-body)}
.input::placeholder, .textarea::placeholder{color:var(--color-text-muted); opacity:1}
.input:hover, .textarea:hover{border-color:var(--color-text)}
.input:focus-visible, .textarea:focus-visible{outline:var(--focus-width) solid var(--color-focus); outline-offset:2px; border-color:var(--color-accent)}
.input:focus, .textarea:focus{border-color:var(--color-accent)}
.input[aria-invalid="true"], .textarea[aria-invalid="true"]{border-color:var(--color-error); background:var(--color-error-soft)}

/* The date range: From and Until in one rounded shell */
.daterange-wrap{position:relative; display:grid; gap:var(--space-2); min-width:0}
.daterange{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); position:relative; min-width:0;
  background:var(--color-surface); border:var(--line-width-strong) solid var(--color-border); border-radius:var(--radius-md);
  transition:border-color var(--dur-fast) var(--ease);
}
.daterange:hover{border-color:var(--color-text)}
.daterange.is-open, .daterange:focus-within{border-color:var(--color-accent)}
.daterange.is-error{border-color:var(--color-error)}
.daterange__part{
  appearance:none; -webkit-appearance:none; font:inherit; color:inherit; text-align:left; background:transparent; border:0; margin:0; cursor:pointer;
  display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:var(--space-3); align-items:center; align-content:center;
  min-width:0; min-height:calc(64px - 2 * var(--line-width-strong)); padding:8px var(--_px);
  border-radius:calc(var(--radius-md) - 2px);
  transition:background-color var(--dur-fast) var(--ease);
}
.daterange__part + .daterange__part{border-left:var(--line-width) solid var(--color-line); border-top-left-radius:0; border-bottom-left-radius:0}
.daterange__part:first-child{border-top-right-radius:0; border-bottom-right-radius:0}
.daterange__part:focus-visible{outline:var(--focus-width) solid var(--color-focus); outline-offset:2px; z-index:1; border-radius:calc(var(--radius-md) - 2px)}
.daterange__part.is-active{background:var(--color-accent-soft)}
.daterange__label{grid-column:1; font-size:.75rem; font-weight:var(--weight-medium); letter-spacing:.08em; line-height:1.3; text-transform:uppercase; color:var(--color-text-muted)}
.daterange__value{grid-column:1; font-size:var(--fs-base); font-weight:var(--weight-medium); line-height:1.3; color:var(--color-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.daterange__value.is-empty{font-weight:var(--weight-light); color:var(--color-text-muted)}
.daterange__icon{grid-column:2; grid-row:1 / span 2; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; color:var(--color-text-muted)}
.daterange.is-error + .field__error{margin-top:0}
@media (max-width:420px){ .daterange__icon{display:none} .daterange__part{padding:8px var(--space-4)} }

/* Calendar popover */
.cal{
  position:absolute; z-index:var(--z-overlay); top:calc(100% + var(--space-2)); left:0;
  width:min(340px, calc(100vw - 2 * var(--space-3)));
  background:var(--color-surface); border:var(--line-width) solid var(--color-line); border-radius:var(--radius-md);
  padding:var(--space-5); color:var(--color-text);
}
.cal.is-capped{overflow-y:auto; overscroll-behavior:contain}
.cal--two{width:max-content; max-width:none}
.cal__months{display:grid; grid-template-columns:repeat(var(--cal-n, 1), 280px); gap:var(--space-7)}
.cal:not(.cal--two) .cal__months{grid-template-columns:minmax(0,1fr)}
.cal__month{position:relative}
.cal__title{display:flex; align-items:center; justify-content:center; height:44px; margin-bottom:var(--space-2); font-size:var(--fs-base); font-weight:var(--weight-medium)}
.cal__nav{
  position:absolute; top:var(--space-5); z-index:1;
  width:44px; height:44px; display:grid; place-items:center; padding:0;
  border-radius:50%; border:var(--line-width) solid var(--color-line); background:var(--color-surface); color:var(--color-text); cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.cal__nav--prev{left:var(--space-5)}
.cal__nav--next{right:var(--space-5)}
.cal__nav svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.cal__nav:hover{background:var(--color-accent-soft); border-color:var(--color-accent)}
.cal__nav:disabled{color:var(--color-text-muted); border-color:var(--color-disabled); background:transparent; cursor:default}
.cal__grid{width:100%; border-collapse:collapse; border-spacing:0; table-layout:fixed}
.cal__grid th{padding:0 0 var(--space-2); font-size:.75rem; font-weight:var(--weight-medium); color:var(--color-text-muted); text-align:center}
.cal__grid th abbr{text-decoration:none}
.cal__grid td{padding:2px 0; text-align:center}
.cal__day{
  position:relative; height:40px; cursor:pointer; outline:none;
  font-size:.9375rem; font-weight:var(--weight-medium); color:var(--color-text);
  -webkit-tap-highlight-color:transparent;
}
.cal__day span{position:relative; z-index:1; width:40px; height:40px; max-width:100%; margin:0 auto; display:grid; place-items:center; border-radius:50%; transition:background-color var(--dur-fast) var(--ease)}
.cal__day:hover span{background:var(--color-accent-soft)}
.cal__day:focus-visible span{outline:var(--focus-width) solid var(--color-focus); outline-offset:1px}
.cal__day.is-past{color:var(--color-text-muted); font-weight:var(--weight-light); cursor:default}
.cal__day.is-past:hover span{background:none}
.cal__day.is-today span{box-shadow:inset 0 0 0 1.5px var(--color-border)}
.cal__day.in-range::before, .cal__day.is-start::before, .cal__day.is-end::before{content:""; position:absolute; top:2px; bottom:2px; background:var(--color-accent-soft)}
.cal__day.in-range::before{left:0; right:0}
.cal__day.is-start::before{left:50%; right:0}
.cal__day.is-end::before{left:0; right:50%}
.cal__day.is-start.is-end::before, .cal__day.is-start.no-band::before{display:none}
.cal__day.is-start span, .cal__day.is-end span{background:var(--color-accent); color:var(--color-surface)}
.cal__day.is-start.is-today span, .cal__day.is-end.is-today span{box-shadow:none}
.cal__foot{display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); min-height:44px; margin-top:var(--space-3); padding-top:var(--space-3); border-top:var(--line-width) solid var(--color-line); font-size:var(--fs-xs); color:var(--color-text-muted)}
.cal__done{flex:none}
@media (max-width:767px){
  .cal{left:calc(-1 * var(--space-3)); right:calc(-1 * var(--space-3)); width:auto; padding:var(--space-4) var(--space-3)}
  .cal__nav{top:var(--space-4)}
  .cal__nav--prev{left:var(--space-3)}
  .cal__nav--next{right:var(--space-3)}
}

/* Step one: the date range and the action side by side, stacked when the panel is narrow */
.booking__row{display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:flex-start}
.booking__row .daterange-wrap{flex:1 1 320px}
.booking__check{flex:1 0 100%; min-height:64px}
@container (min-width:560px){ .booking__check{flex:0 0 auto} }

/* Step two: Available, the dates, the fields */
[data-step="details"]{display:none}
.booking.is-available [data-step="dates"]{display:none}
.booking.is-available [data-step="details"]{display:block}
.booking__status{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-3); min-height:44px; animation:fade-in var(--dur-base) var(--ease) both}
.booking__dates{font-size:var(--fs-sm); color:var(--color-text-muted)}
.booking__change{margin-left:auto}
.booking__reveal{display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur-slow) var(--ease-out)}
.booking__reveal.is-open{grid-template-rows:1fr}
.booking__reveal-inner{min-height:0; overflow:hidden; margin:0 -6px; padding:0 6px}
.booking__reveal.is-settled .booking__reveal-inner{overflow:visible}
.booking__fields{display:grid; gap:var(--space-4); padding-top:var(--space-5)}
@container (min-width:600px){ .booking__fields--three{grid-template-columns:repeat(3, minmax(0,1fr))} }
.booking__submit{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3) var(--space-5); margin-top:var(--space-6)}
.booking__reserve{width:100%}
.booking__note{flex:1 1 100%; font-size:var(--fs-sm); line-height:var(--leading-snug); color:var(--color-text-muted); text-wrap:pretty}
@container (min-width:560px){ .booking__reserve{width:auto; flex:none} .booking__note{flex:1 1 12rem} }
[data-step="details"] .booking__submit{margin-bottom:6px}

/* The closing form's grid */
.booking__grid{display:grid; gap:var(--space-5) var(--space-4)}
@container (min-width:520px){ .booking__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .booking__span{grid-column:1 / -1} }
.booking--full .booking__submit{margin-top:var(--space-7)}

/* The Available badge */
.badge{
  display:inline-flex; align-items:center; gap:var(--space-2);
  min-height:32px; padding:0 var(--space-4) 0 var(--space-3);
  font-size:var(--fs-xs); font-weight:var(--weight-medium); line-height:1;
  color:var(--color-success); background:var(--color-success-soft); border-radius:var(--radius-pill);
}
.badge::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--color-success); flex:none}

/* Confirmation: swaps in place without moving the page */
.booking{overflow-anchor:none}
.booking__done{display:grid; align-content:center; justify-items:start; gap:var(--space-2); min-width:0; overflow-wrap:anywhere; animation:fade-in var(--dur-base) var(--ease) both}
.booking__done-title{display:flex; align-items:center; gap:var(--space-3)}
.booking__done-title::before{
  content:""; flex:none; width:32px; height:32px; border-radius:50%;
  background:var(--color-success-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%232D6A4C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.booking__done-title:focus{outline:none}
.booking__done-title:focus-visible{outline:var(--focus-width) solid var(--color-focus); outline-offset:4px; border-radius:6px}
.booking__done p{color:var(--color-text-muted); max-width:var(--measure); min-width:0}
.booking__dates, .daterange__value{overflow-wrap:anywhere}
/* The page script adds .app-ready to the root once the booking works; the head marks .is-loading until the
   document has loaded. Without the script, or when it failed to load, each form shows its line instead of its
   buttons and the request note (the buttons also ship disabled, so Enter in a field posts nothing). */
.booking__noscript{display:none; margin:0 0 var(--space-4); font-size:var(--fs-sm); color:var(--color-text-muted)}
:root:not(.app-ready):not(.is-loading) .booking__noscript{display:block}
:root:not(.app-ready):not(.is-loading) :is(.booking__check, .booking__reserve, .booking__note){display:none}
@keyframes fade-in{from{opacity:0} to{opacity:1}}

/* =====================================================================================
   3. Destination: one album spread, five chapters, a rolling transition between them.
   The markup is the static sequence (no script, reduced motion, very short screens).
   The script adds .rv--roll: the stage pins under the header and each chapter change rolls
   the print and its text together about a horizontal axis. At rest: one flat print, one text.
   ===================================================================================== */
.dest{position:relative; background:var(--color-bg-alt)}
.rv{
  position:relative;
  --rv-pad:var(--_print-pad);
  --rv-foot:var(--_print-foot);
  --rv-colgap:clamp(2rem, 5vw, 5rem);
  --rv-band:calc(var(--fs-xl) * var(--leading-heading));   /* one title line; a turning text has faded out before it crosses the band */
  --rv-gap-a:calc(var(--rv-band) + var(--space-2));
  --rv-gap-b:calc(var(--rv-band) + var(--space-2));
}
.rv-title{margin-bottom:var(--space-4); text-wrap:pretty}   /* balance would split a hyphenated word on narrow phones */
.rv-body{max-width:34rem}
.rv .print figcaption{padding-left:4px}
.js .rv:not(.is-near) .print figcaption{font-style:normal}   /* the italic face loads after the first view */
.rv-shade{position:absolute; z-index:2; inset:-1px; border-radius:inherit; background:var(--color-text); opacity:0; pointer-events:none}
.rv-meter, .rv-fade{display:none}
/* While the page loads, until the script has chosen the rolling or the static layout, prints two to five stay
   out of the layout, so the browser does not start loading them from a static list it may never show. The head
   drops .is-loading once the document has loaded (the script has run by then), so without the script, or when
   it failed to load, all five show. */
.is-loading .rv:not(.rv--roll):not(.rv--static) .rv-chapter:nth-child(n+2) .rv-card{display:none}

/* Static sequence */
.rv:not(.rv--roll) .rv-frame{max-width:calc(var(--container) + 2 * var(--gutter)); margin:0 auto; padding:var(--section-y) var(--gutter)}
.rv:not(.rv--roll) .rv-list{display:grid; gap:clamp(3.5rem, 2.5rem + 4vw, 7rem)}
.rv:not(.rv--roll) .rv-chapter{display:grid; gap:var(--space-6); align-items:center}
.rv:not(.rv--roll) .rv-card{width:min(100%, 300px)}
@media (min-width:768px){
  .rv:not(.rv--roll) .rv-chapter{grid-template-columns:minmax(0,5fr) minmax(0,6fr); column-gap:clamp(2rem, 6vw, 6rem)}
  .rv:not(.rv--roll) .rv-card{width:min(100%, 420px); margin-left:auto}
}

/* Rolling transition */
.rv--roll{
  --rv-view-h:calc(100vh - var(--sticky-offset));      /* the window under the header, where the pinned stage shows */
  --rv-lift:0px;                                  /* stage height above that window (stacked layouts: the head) */
  --rv-stage-h:calc(var(--rv-view-h) + var(--rv-lift));
  --rv-slice:calc(var(--rv-view-h) * .6);          /* scroll per chapter: one wheel flick or one swipe moves a chapter */
  height:calc(var(--rv-n, 4) * var(--rv-slice) + var(--rv-stage-h));
}
@supports (height:100svh){ .rv--roll{--rv-view-h:calc(100svh - var(--sticky-offset))} }
.rv--roll .rv-stage{position:sticky; top:calc(var(--sticky-offset) - var(--rv-lift)); height:var(--rv-stage-h); overflow:hidden}
.rv--roll .rv-frame{position:relative; height:100%; max-width:calc(var(--container) + 2 * var(--gutter)); margin:0 auto}
.rv--roll .rv-list, .rv--roll .rv-chapter{position:absolute; inset:0}
.rv--roll .rv-chapter{pointer-events:none}
.rv--roll .rv-slot{position:absolute}
.rv--roll .rv-card, .rv--roll .rv-copy{opacity:0; will-change:transform, opacity; -webkit-backface-visibility:hidden; backface-visibility:hidden}
.rv--roll .rv-meter{
  position:absolute; z-index:4; display:flex; align-items:center; gap:18px;
  font-size:var(--fs-xs); font-weight:var(--weight-medium); letter-spacing:.08em; color:var(--color-text-muted); font-variant-numeric:tabular-nums; line-height:1.2;
}
.rv-count{display:inline-flex; gap:.5em; align-items:flex-start}
.rv-count-now{position:relative; display:inline-block; height:1.2em; line-height:1.2em; color:var(--color-text)}
.rv-count-strip{display:block; position:relative; height:1.2em}
.rv-count-strip span{display:block; height:1.2em; will-change:transform, opacity}
.rv-count-strip span + span{position:absolute; left:0; top:0}
.rv-progress{position:relative; width:120px; height:2px; border-radius:2px; background:var(--color-line); overflow:hidden}
.rv-progress-fill{position:absolute; inset:0; background:var(--color-accent); transform-origin:0 50%; transform:scaleX(0); will-change:transform}
.rv--roll .rv-fade{display:block; position:absolute; z-index:3; pointer-events:none}

/* Side by side: print left, text right (landscape screens from 768px, and anything wider than 1024px) */
.rv--roll{
  --rv-colw:calc((100% - 2 * var(--gutter)) * .46);
  --rv-copy-left:calc(var(--gutter) + var(--rv-colw) + var(--rv-colgap));
  --rv-group:calc(var(--rv-head-h, 0px) + var(--rv-gap-a) + var(--rv-copy-h, 0px) + var(--rv-gap-b) + var(--rv-meter-h, 0px));
  --rv-copy-top:calc(50% - var(--rv-group) / 2 + var(--rv-head-h, 0px) + var(--rv-gap-a));
  --rv-card-hmax:min(calc(var(--rv-stage-h) * .8), 700px);
}
.rv--roll .rv-slot--card{top:0; bottom:0; left:var(--gutter); width:var(--rv-colw); display:flex; align-items:center; justify-content:center}
.rv--roll .rv-card{flex:none; width:min(100%, calc((var(--rv-card-hmax) - var(--rv-pad) - var(--rv-foot)) * .8 + 2 * var(--rv-pad)))}
.rv--roll .section-head{max-width:none; margin-bottom:0; position:absolute; z-index:4; left:var(--rv-copy-left); right:var(--gutter); top:calc(50% - var(--rv-group) / 2)}
.rv--roll .section-head .lead{max-width:30rem}
.rv--roll .rv-slot--copy{left:var(--rv-copy-left); right:var(--gutter); top:calc(var(--rv-copy-top) - var(--rv-band)); height:calc(var(--rv-copy-h, 0px) + 2 * var(--rv-band)); overflow-y:clip}
.rv--roll .rv-copy{position:absolute; left:0; right:0; top:var(--rv-band)}
.rv--roll .rv-meter{left:var(--rv-copy-left); top:calc(var(--rv-copy-top) + var(--rv-copy-h, 0px) + var(--rv-gap-b))}
.rv--roll .rv-fade--top{left:0; right:0; top:0; height:7%; background:linear-gradient(var(--color-bg-alt), transparent)}
.rv--roll .rv-fade--bottom{left:0; right:0; bottom:0; height:7%; background:linear-gradient(transparent, var(--color-bg-alt))}
.rv--roll .rv-fade--copy-top, .rv--roll .rv-fade--copy-bottom{left:var(--rv-copy-left); right:var(--gutter); height:var(--rv-band)}
.rv--roll .rv-fade--copy-top{top:calc(var(--rv-copy-top) - var(--rv-band)); background:linear-gradient(var(--color-bg-alt), transparent)}
.rv--roll .rv-fade--copy-bottom{top:calc(var(--rv-copy-top) + var(--rv-copy-h, 0px)); background:linear-gradient(transparent, var(--color-bg-alt))}

/* Stacked: print above, text below (phones, and portrait tablets up to 1024px wide). The head sits above
   the print and scrolls away under the header as the stage pins, so the pinned window holds only the print,
   its text and the counter. Where the window is tall enough for the print at full size with the head kept
   (tall portrait tablets), the script adds .rv--keep-head and the head stays pinned above the print. */
@media (max-width:767px), (max-width:1024px) and (orientation:portrait){
  .rv--roll{
    --rv-band:24px;
    --rv-gap-b:var(--space-2);
    --rv-m:14px;                                   /* room around the print inside its clipped slot */
    --rv-inset:var(--gutter);
    --rv-card-top:calc(var(--space-4) + var(--rv-head-h, 0px) + var(--space-3));
    --rv-lift:var(--rv-card-top);
    --rv-avail:calc(var(--rv-stage-h) - var(--rv-card-top) - var(--space-4));
    --rv-copy-block:calc(2 * var(--rv-band) + var(--rv-copy-h, 0px) + var(--rv-gap-b) + var(--rv-meter-h, 0px));
    /* as tall as the window allows, but never wider than the page inside its gutters (a 4:5 photo in its border) */
    --rv-card-hmax:min(calc(var(--rv-avail) - var(--rv-copy-block) - 2 * var(--rv-m)), 720px,
                       calc((100vw - 2 * var(--rv-inset) - 2 * var(--rv-pad)) * 1.25 + var(--rv-pad) + var(--rv-foot)));
    --rv-free:max(0px, calc(var(--rv-avail) - var(--rv-copy-block) - 2 * var(--rv-m) - var(--rv-card-hmax)));
    --rv-y0:calc(var(--rv-card-top) + var(--rv-free) / 2);                       /* the print and its text sit as one group */
    --rv-copy-y:calc(var(--rv-y0) + var(--rv-card-hmax) + 2 * var(--rv-m));     /* top of the text band */
  }
  .rv--roll .section-head{left:var(--rv-inset); right:var(--rv-inset); top:var(--space-4)}
  .rv--roll .section-head .eyebrow{margin-bottom:var(--space-1)}
  .rv--roll .section-head .lead{font-size:var(--fs-sm); max-width:none}
  .rv--roll .rv-slot--card{left:0; right:0; width:auto; top:var(--rv-y0); bottom:auto; height:calc(var(--rv-card-hmax) + 2 * var(--rv-m)); overflow-y:clip; align-items:center}
  .rv--roll .rv-slot--copy{left:var(--rv-inset); right:var(--rv-inset); top:var(--rv-copy-y); height:calc(var(--rv-copy-h, 0px) + 2 * var(--rv-band))}
  .rv--roll .rv-meter{left:var(--rv-inset); top:calc(var(--rv-copy-y) + 2 * var(--rv-band) + var(--rv-copy-h, 0px) + var(--rv-gap-b))}
  .rv--roll .rv-fade--top{top:var(--rv-y0); bottom:auto; height:var(--rv-m)}
  .rv--roll .rv-fade--bottom{top:calc(var(--rv-y0) + var(--rv-card-hmax) + var(--rv-m)); bottom:auto; height:var(--rv-m)}
  .rv--roll .rv-fade--copy-top, .rv--roll .rv-fade--copy-bottom{left:var(--rv-inset); right:var(--rv-inset)}
  .rv--roll .rv-fade--copy-top{top:var(--rv-copy-y)}
  .rv--roll .rv-fade--copy-bottom{top:calc(var(--rv-copy-y) + var(--rv-band) + var(--rv-copy-h, 0px))}
  .rv-title{margin-bottom:var(--space-3)}
}
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait){ .rv--roll{--rv-m:20px} }
.rv--roll.rv--keep-head{--rv-lift:0px}

/* =====================================================================================
   4. Item lists (the space, the perks): a print, a small title, one line.
   Default: stacked on phones, three columns from 768. Split: print and text side by side on tablets
   (alternating), three columns from 1024.
   ===================================================================================== */
.items{display:grid; gap:clamp(2.75rem, 2rem + 3vw, 4rem)}
.item h3{margin:var(--space-6) 0 var(--space-2)}
.item p{max-width:var(--measure)}
.items:not(.items--split) .print{width:min(100%, 300px)}
@media (min-width:768px){
  .items:not(.items--split){grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:clamp(1.5rem, 3vw, 3rem)}
  .items:not(.items--split) .print{width:100%; max-width:340px}
}
@media (min-width:768px) and (max-width:1023px){
  .items--split .item{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:var(--space-8); align-items:center}
  .items--split .item:nth-child(even) .print{order:2}
  .items--split .item h3{margin-top:0}
}
@media (min-width:1024px){ .items--split{grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:clamp(2rem, 3vw, 3rem)} }

/* =====================================================================================
   5. Testimonial placeholder: dashed, tagged, one plain line; no name, face, company or quote
   ===================================================================================== */
.placeholder{border:2px dashed var(--color-line); border-radius:var(--radius-lg); background:transparent; padding:clamp(1.5rem, 1rem + 2vw, 2.5rem); color:var(--color-text-muted)}
.placeholder__tag{display:inline-block; margin-bottom:var(--space-4); padding:4px 12px; border-radius:var(--radius-pill); font-size:.75rem; font-weight:var(--weight-medium); letter-spacing:.1em; line-height:1.4; text-transform:uppercase; color:var(--color-text); background:var(--color-disabled)}

/* =====================================================================================
   6. Closing CTA on the plum field
   ===================================================================================== */
.closing{background:var(--color-accent); color:var(--color-surface)}
.closing > .container{display:grid; justify-items:center; text-align:center}
.closing .display{max-width:900px}
.closing .lead{margin:var(--space-5) auto clamp(2.5rem, 2rem + 2vw, 3.5rem)}
.closing .booking{width:100%; max-width:var(--container-narrow); text-align:left}

/* =====================================================================================
   7. Footer
   ===================================================================================== */
.site-footer{background:var(--color-text); color:var(--color-surface); padding:clamp(2.5rem, 2rem + 2vw, 3.5rem) 0}
.site-footer > .container{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--space-6)}
.site-footer img{height:64px; width:auto}
.site-footer__parent{display:grid; align-content:center; gap:2px; min-height:44px; font-size:var(--fs-sm); line-height:var(--leading-snug); color:var(--color-surface); text-decoration:none; border-radius:6px}
.site-footer__url{color:var(--color-accent-soft); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.site-footer__parent:hover .site-footer__url{color:var(--color-surface)}
.site-footer__parent:focus-visible{outline-color:var(--color-surface); outline-offset:6px}

/* ---------- Reduced motion: no settle-in, no reveal, no smooth movement ---------- */
@media (prefers-reduced-motion: reduce){
  .booking__status, .booking__done{animation:none}
  .booking__reveal{transition:none}
}