/* =========================================================
   Mazanka — v2 (light · minimal · premium)
   Reset direction: The Orchard-style, verbatim client content.
   No section numbers · no text on photos · no noise.
   ========================================================= */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
img{display:block;max-width:100%;height:auto}
button,input,textarea{font:inherit;color:inherit}
a{color:inherit}

:root{
  /* --- warm light palette (from her Canva + The Orchard) --- */
  --bg:        #F6F1E7;   /* warm ivory — page */
  --bg-2:      #EFE7D8;   /* deeper cream — alternate sections */
  --card:      #FBF8F1;   /* near-white warm — cards/photos frame */
  --ink:       #2A2620;   /* warm charcoal — text */
  --ink-2:     #6A6357;   /* muted taupe — secondary text */
  --gold:      #A2854F;   /* muted antique gold — ornaments + large text */
  --gold-text: #79633B;   /* same hue, darkened for small text (WCAG AA 4.5:1 on both creams) */
  --terra:     #B4713D;   /* terracotta — very sparing */
  --line:      rgba(42,38,32,.14);
  --line-2:    rgba(42,38,32,.26);

  /* --- type --- */
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Hanken Grotesk", system-ui, sans-serif;

  --fs-hero:   clamp(2.6rem, 5.2vw, 4.6rem);
  --fs-h2:     clamp(2rem, 3.8vw, 3.4rem);
  --fs-h3:     clamp(1.4rem, 2vw, 1.9rem);
  --fs-lead:   clamp(1.1rem, 1.4vw, 1.35rem);
  --fs-body:   clamp(1rem, 1.05vw, 1.1rem);
  --fs-eye:    .74rem;

  /* --- rhythm --- */
  --maxw: 1240px;
  --edge: clamp(1.25rem, 5vw, 5rem);
  --section: clamp(4.5rem, 9vw, 8.5rem);
  --pad-x: max(var(--edge), calc((100% - var(--maxw)) / 2));

  /* header height INCLUDES the notch inset, so every var(--hdr) offset stays correct */
  --hdr: calc(92px + env(safe-area-inset-top, 0px));
  --radius: 2px;
  --ease: cubic-bezier(.22,1,.36,1);
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;              /* no sideways drift/jitter */
  -webkit-tap-highlight-color:transparent;
}

/* prevent FOUT jump */
html.fontgate body{opacity:0}

/* ---------- layout ---------- */
/* content keeps clear of the notch in landscape; full-bleed media still reaches the edge */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:max(var(--edge),env(safe-area-inset-left,0px)) max(var(--edge),env(safe-area-inset-right,0px))}
.section{padding-block:var(--section)}
.section--alt{background:var(--bg-2)}
.center{text-align:center}

/* ---------- typography ---------- */
.display{font-family:var(--serif);font-weight:500;line-height:1.04;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
h1.display{font-size:var(--fs-hero)}
h2.display{font-size:var(--fs-h2)}
h3.display{font-size:var(--fs-h3);line-height:1.12}
.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--ink-2);max-width:56ch;text-wrap:pretty}
.body{color:var(--ink-2);max-width:62ch;text-wrap:pretty}
.eye{font-family:var(--sans);font-size:var(--fs-eye);font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
em,.italic{font-style:italic}

/* ---------- through-line phrase (every page) ---------- */
.thread{font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,1.5vw,1.35rem);color:var(--ink-2);text-align:center;letter-spacing:.01em}

/* ---------- ethno divider (one restrained motif) ---------- */
.rule{display:flex;align-items:center;justify-content:center;gap:1rem;color:var(--gold)}
.rule::before,.rule::after{content:"";height:1px;flex:1;max-width:120px;background:var(--line-2)}
.rule img{width:26px;height:26px;opacity:.9}
.rule--sm img{width:20px;height:20px}

/* ---------- buttons / links ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--sans);font-size:.82rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  padding:1em 1.9em;border:1px solid var(--ink);border-radius:var(--radius);
  background:transparent;color:var(--ink);text-decoration:none;cursor:pointer;
  transition:background .45s var(--ease),color .45s var(--ease);
}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn--solid{background:var(--ink);color:var(--bg)}
.btn--solid:hover{background:transparent;color:var(--ink)}
.lnk{display:inline-flex;align-items:center;gap:.5em;font-weight:500;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line-2);padding-bottom:2px;transition:border-color .3s var(--ease),color .3s var(--ease)}
.lnk:hover{color:var(--gold);border-color:var(--gold)}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto 0;height:var(--hdr);padding-top:env(safe-area-inset-top,0px);z-index:100;display:flex;align-items:center;
  transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;width:100%;gap:2rem}
.hdr.solid{background:color-mix(in oklab,var(--bg) 96%,transparent);box-shadow:0 1px 0 var(--line)}
@media (min-width:901px){.hdr.solid{background:color-mix(in oklab,var(--bg) 90%,transparent);backdrop-filter:blur(10px)}}
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand img{height:64px;width:auto}
.nav{display:flex;gap:clamp(1rem,2vw,2.2rem);align-items:center}
.nav a{font-size:.82rem;font-weight:500;letter-spacing:.06em;text-decoration:none;color:var(--ink);opacity:.85;transition:opacity .3s}
.nav a:hover,.nav a[aria-current]{opacity:1;color:var(--gold)}
/* header over the hero (before scroll) = light text */
.hdr:not(.solid){color:var(--bg)}
.hdr:not(.solid) .brand b,.hdr:not(.solid) .nav a{color:#fff}
.hdr:not(.solid) .brand span{color:rgba(255,255,255,.75)}
.hdr:not(.solid) .lg-dark{display:none}
.hdr.solid .lg-light{display:none}
.burger{display:none;width:30px;height:22px;border:0;background:none;cursor:pointer;padding:0;flex-direction:column;align-items:flex-end;justify-content:space-between}
.burger span{display:block;width:28px;height:2px;background:var(--ink);transition:transform .32s var(--ease),opacity .2s}
.burger span:nth-child(2){width:20px}
.hdr:not(.solid) .burger span{background:#fff}
html.menu-open .burger span{background:var(--ink)}
html.menu-open .burger span:nth-child(1){transform:translateY(10px) rotate(45deg)}
html.menu-open .burger span:nth-child(2){opacity:0}
html.menu-open .burger span:nth-child(3){transform:translateY(-10px) rotate(-45deg);width:28px}

/* mobile full-screen menu */
html.menu-open{overflow:hidden}
.mnav{position:fixed;inset:0;z-index:99;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;padding:var(--hdr) var(--edge) env(safe-area-inset-bottom,0px)}
html.menu-open .mnav{opacity:1;visibility:visible}
html.menu-open .hdr .lg-light{display:none}
html.menu-open .hdr .lg-dark{display:block}
.mnav a{font-family:var(--serif);font-size:clamp(1.8rem,7vw,2.4rem);font-weight:500;color:var(--ink);text-decoration:none}
.mnav a:hover{color:var(--gold)}
.mnav .mnav__meta{font-family:var(--sans);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin-top:1.4rem}

/* ---------- hero (full-bleed media, clean, no text on photo) ---------- */
/* height: vh = fallback for old browsers; svh = stable on mobile (does NOT resize when the
   URL bar collapses, unlike vh/dvh) — this is what stops the jump/jitter */
.hero{position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden}
.hero__media{position:absolute;inset:0}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,23,17,.42),rgba(28,23,17,.22) 42%,rgba(28,23,17,.5))}
.hero__in{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--hdr) var(--edge) 0;gap:2.1rem}
.hero__title{color:#fff;font-size:clamp(2.7rem,6vw,5.4rem);line-height:1.02;max-width:15ch;text-shadow:0 2px 40px rgba(20,15,8,.35)}
.hero__sub{color:rgba(255,255,255,.9);font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,1.6vw,1.4rem);letter-spacing:.02em}
.btn--light{border-color:rgba(255,255,255,.75);color:#fff}
.btn--light:hover{background:#fff;color:var(--ink);border-color:#fff}
.hero__cue{position:absolute;left:50%;bottom:calc(2.2rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:.7rem;color:#fff}
.hero__cue span{font-family:var(--sans);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;opacity:.85}
.hero__cue i{width:1px;height:38px;background:rgba(255,255,255,.6);display:block}

/* ---------- intro (centered statement, The Orchard-style) ---------- */
.intro{text-align:center}
.intro .rule{margin:0 auto 2rem}
.intro__statement{font-family:var(--serif);font-weight:500;font-size:clamp(1.45rem,2.4vw,2.2rem);line-height:1.3;letter-spacing:-.005em;color:var(--ink);max-width:30ch;margin-inline:auto;text-wrap:balance}

/* gift certificate — clean centered offer */
.gift{text-align:center;max-width:660px;margin-inline:auto}
.gift .rule{margin:0 auto 1.4rem}
.gift h2{margin-bottom:1.2rem}
.gift p{color:var(--ink-2);text-wrap:pretty}
.gift .btn{margin-top:1.9rem}

/* Gift + FAQ share a background: collapse the doubled gap into one normal section break */
#gift{padding-bottom:calc(var(--section) * .5)}
#faq{padding-top:calc(var(--section) * .5)}

/* ---------- Our Story ---------- */
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.story__text .rule{justify-content:flex-start;margin-bottom:1.6rem}
.story__text .rule::before{display:none}
.story__text h2{margin-bottom:.4rem}
.story__text .sig{font-family:var(--serif);font-style:italic;font-size:var(--fs-lead);color:var(--ink);margin-bottom:1.6rem;display:block}
.story__text p{margin-top:1rem;color:var(--ink-2);max-width:52ch}
.story__text .outro{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.2rem,1.8vw,1.45rem);color:var(--ink);display:block;margin-top:clamp(1.1rem,1.8vw,1.5rem)}
.story__media{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.story__media img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);aspect-ratio:3/4}
.story__media picture:nth-child(3){grid-column:1 / -1}
.story__media picture:nth-child(3) img{aspect-ratio:16/9}

/* ---------- retreats / locations ---------- */
.loc-head{text-align:center;margin-bottom:clamp(2.6rem,5vw,4.2rem)}
.loc-head .rule{margin:0 auto 1.4rem}
.locations{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,3.5vw,3.4rem)}
.loc{display:flex;flex-direction:column}
.loc__media{display:block;overflow:hidden;border-radius:var(--radius);aspect-ratio:4/3}
.loc__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.loc:hover .loc__media img{transform:scale(1.04)}
.loc h3{margin-top:1.7rem}
.loc h3 a{color:inherit;text-decoration:none;transition:color .3s var(--ease)}
.loc h3 a:hover{color:var(--gold)}
.loc__meta{font-family:var(--sans);font-size:.78rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-top:.6rem}
.loc__cta{margin-top:1.5rem;align-self:flex-start}
.loc__soon{font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-top:1.5rem;display:inline-flex;align-items:center;gap:.5em;text-decoration:none;transition:color .3s var(--ease)}
a.loc__soon:hover{color:var(--accent-2,var(--gold));opacity:.75}
@media (max-width:820px){.locations{grid-template-columns:1fr;gap:2.8rem}}

/* ---------- gallery (staggered) ---------- */
.gal-head{text-align:center;margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.gal-head .rule{margin:0 auto 1.4rem}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.7rem,1.4vw,1.1rem)}
.gallery figure{overflow:hidden;border-radius:var(--radius);aspect-ratio:4/3;margin:0}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.gallery figure:hover img{transform:scale(1.05)}
@media (max-width:820px){.gallery{grid-template-columns:1fr 1fr;gap:.6rem}}
/* expanded gallery (gmason): even preview grid, first 6, rest open in lightbox */
.gallery.gmason figure{aspect-ratio:4/5;cursor:pointer;margin:0}
.gallery.gmason figure:nth-child(n+7){display:none}
.gal-more{text-align:center;margin-top:clamp(3rem,5.5vw,4.2rem)}
/* lightbox */
.lbx{position:fixed;inset:0;z-index:210;display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);background:color-mix(in oklab,var(--ink) 92%,#000);opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
html.lbx-open .lbx{opacity:1;visibility:visible}
.lbx-stage{margin:0;max-width:min(1100px,92vw);display:flex;flex-direction:column;align-items:center;gap:.9rem}
.lbx-stage img{max-width:100%;max-height:82vh;width:auto;height:auto;object-fit:contain;border-radius:var(--radius);box-shadow:0 30px 80px -30px rgba(0,0,0,.6);opacity:0;transition:opacity .3s var(--ease)}
.lbx-stage img.on{opacity:1}
.lbx-cap{font-family:var(--sans);font-size:.82rem;letter-spacing:.03em;color:rgba(246,241,231,.82);text-align:center}
.lbx-cap #lbxCount{color:rgba(246,241,231,.5);margin-right:.6em}
.lbx-x,.lbx-nav{position:absolute;z-index:2;border-radius:50%;border:1px solid rgba(246,241,231,.35);background:rgba(0,0,0,.22);color:#f6f1e7;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s,border-color .3s}
.lbx-x:hover,.lbx-nav:hover{background:rgba(246,241,231,.16);border-color:rgba(246,241,231,.7)}
.lbx-x{top:clamp(.8rem,2vw,1.4rem);right:clamp(.8rem,2vw,1.4rem);width:46px;height:46px;font-size:1.5rem}
.lbx-nav{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:1.7rem}
.lbx-prev{left:clamp(.5rem,2vw,1.6rem)}
.lbx-next{right:clamp(.5rem,2vw,1.6rem)}
@media (max-width:640px){.lbx-nav{top:auto;bottom:1.1rem;transform:none;width:46px;height:46px}.lbx-prev{left:30%}.lbx-next{right:30%}}

/* ---------- amenities / slow living ---------- */
.slow-head{text-align:center;max-width:52ch;margin:0 auto clamp(3rem,5vw,4.4rem)}
.slow-head .rule{margin:0 auto 1.4rem}
.slow-head p{margin-top:1.2rem;color:var(--ink-2)}
.slow-head .wifi{margin-top:1.4rem;font-family:var(--sans);font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:.55em}
.slow-head .wifi svg{width:16px;height:16px}
.slow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.6rem,3vw,3rem)}
.slow-col{display:flex;flex-direction:column}
.slow-col figure{order:-1;margin:0 0 1.8rem;overflow:hidden;border-radius:var(--radius);aspect-ratio:4/3}
.slow-col figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.slow-col:hover figure img{transform:scale(1.05)}
.slow-col .ic{width:30px;height:30px;color:var(--gold);margin-bottom:.95rem}
.slow-col h3{font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);padding-bottom:1.1rem;margin-bottom:1.2rem;border-bottom:1px solid var(--line)}
.slow-col ul{list-style:none;display:flex;flex-direction:column;gap:.68rem}
.slow-col li{font-size:.95rem;line-height:1.45;color:var(--ink-2);position:relative;padding-left:1.5em}
.slow-col li::before{content:"";position:absolute;left:.05em;top:.6em;width:6px;height:6px;background:var(--gold);transform:rotate(45deg);opacity:.85}
@media (max-width:960px){.slow-grid{grid-template-columns:1fr 1fr;gap:2.6rem}}
@media (max-width:520px){.slow-grid{grid-template-columns:1fr}}

/* ---------- reviews ---------- */
.rev-head{text-align:center;margin-bottom:clamp(2.6rem,5vw,4rem)}
.rev-head .rule{margin:0 auto 1.4rem}
.reviews{columns:3;column-gap:clamp(1.8rem,3.2vw,3.2rem)}
.review{break-inside:avoid;margin:0 0 clamp(1.8rem,3vw,2.8rem);padding-top:1.6rem;border-top:1px solid var(--line)}
.review p{font-family:var(--serif);font-size:1.22rem;line-height:1.44;color:var(--ink)}
.review .who{display:block;margin-top:1.1rem;font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}
.review .date{display:block;margin-top:.35rem;font-family:var(--sans);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
@media(max-width:900px){.reviews{columns:2}}
@media(max-width:560px){.reviews{columns:1}}

/* ---------- faq ---------- */
.faq-head{text-align:center;margin-bottom:clamp(2.4rem,4.5vw,3.6rem)}
.faq-head .rule{margin:0 auto 1.4rem}
.faq{max-width:780px;margin-inline:auto}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:1.35rem 0;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;font-family:var(--serif);font-size:clamp(1.15rem,1.6vw,1.4rem);color:var(--ink);transition:color .3s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold)}
.faq .plus{flex:none;width:16px;height:16px;position:relative;margin-top:.3em}
.faq .plus::before,.faq .plus::after{content:"";position:absolute;background:var(--gold);transition:transform .3s var(--ease),opacity .3s}
.faq .plus::before{left:0;top:7.5px;width:16px;height:1.5px}
.faq .plus::after{left:7.5px;top:0;width:1.5px;height:16px}
.faq details[open] .plus::after{transform:rotate(90deg);opacity:0}
.faq details > div{padding:0 0 1.5rem}
.faq details p{color:var(--ink-2);max-width:66ch}

/* ---------- footer ---------- */
.ft{background:var(--bg-2);padding-block:clamp(3.5rem,6vw,5.5rem) calc(clamp(2rem,3vw,3rem) + env(safe-area-inset-bottom,0px))}
.ft__thread{text-align:center;margin-bottom:clamp(3rem,5vw,4.5rem)}
.ft__thread .rule{margin:0 auto 1.4rem}
.ft__cols{display:grid;grid-template-columns:1.5fr 1fr 1.1fr 1.4fr;gap:clamp(1.6rem,3vw,3rem);padding-top:clamp(2.5rem,4vw,3.5rem);border-top:1px solid var(--line)}
.ft__brand img{height:66px;width:auto;margin-bottom:1.2rem}
.ft__brand .slg{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--ink-2)}
.ft h2,.ft h3,.ft h4{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:1.3rem}
.ft__col a,.ft__col span{display:block;font-size:.95rem;color:var(--ink-2);text-decoration:none;margin-bottom:.72rem;transition:color .3s var(--ease)}
.ft__col a:hover{color:var(--gold)}
.ft__news p{font-size:.95rem;color:var(--ink-2);margin-bottom:1.2rem;max-width:32ch;line-height:1.5}
.ft__news form{display:flex;align-items:center;border-bottom:1px solid var(--line-2)}
.ft__news input{flex:1;min-width:0;background:none;border:0;padding:.6em 0;font-family:var(--sans);font-size:.95rem;color:var(--ink)}
.ft__news input::placeholder{color:var(--ink-2)}
.ft__news input:focus{outline:none}
.ft__news button{background:none;border:0;font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);cursor:pointer;padding-left:1rem;white-space:nowrap}
.ft__news button:hover{color:var(--gold)}
.ft__bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-top:clamp(2.5rem,4vw,3.5rem);padding-top:1.6rem;border-top:1px solid var(--line);font-family:var(--sans);font-size:.78rem;letter-spacing:.02em;color:var(--ink-2)}
.ft__bottom .legal a{color:var(--ink-2);text-decoration:none;margin-left:1.4rem;transition:color .3s}
.ft__bottom .legal a:hover{color:var(--gold)}
@media(max-width:900px){
  .ft__cols{grid-template-columns:1fr 1fr}
  .ft__brand,.ft__news{grid-column:1/-1}
  .ft__bottom{flex-direction:column;text-align:center}
  .ft__bottom .legal a{margin:0 .7rem}
}

/* ---------- reveal (gentle fade-up) ---------- */
.anim [data-rev]{opacity:0;transform:translateY(22px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0ms)}
.anim [data-rev].on{opacity:1;transform:none}
/* gallery cascade — slightly larger rise for a settled "appear one by one" feel */
.anim .gallery [data-rev]{transform:translateY(30px) scale(.985)}

@media (prefers-reduced-motion:reduce){
  .anim [data-rev]{opacity:1!important;transform:none!important}
}

/* ---------- mobile ---------- */
@media (max-width:900px){
  :root{--hdr:calc(70px + env(safe-area-inset-top,0px))}
  .brand img{height:46px}
  .nav{display:none}
  .burger{display:flex}
  .story{grid-template-columns:1fr;gap:2.2rem}
  .story__media{gap:.7rem}
  .story__media img{aspect-ratio:3/4}
}

/* ===========================================================================
   Accessibility pass (WCAG 2.2 AA). Visual design is unchanged: the darker
   gold applies only to small text that failed contrast, and the enlarged tap
   targets are invisible ::after hit areas, so nothing moves on the page.
   =========================================================================== */

/* --- contrast: small gold text was 3.11:1 on cream, needs 4.5:1 ------------ */
.loc__soon,
a.loc__soon:hover,
.slow-head .wifi,
.review .date,
.nav a:hover, .nav a[aria-current],
.ft__col a:hover,
.ft__news button:hover,
.ft__bottom .legal a:hover{color:var(--gold-text)}
body .legal-head .eyebrow{color:var(--gold-text)}

/* --- focus visibility: several inputs killed the outline with no replacement */
body a:focus-visible,
body button:focus-visible,
body summary:focus-visible,
body input:focus-visible,
body textarea:focus-visible,
body select:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:2px}
body .hdr:not(.solid) a:focus-visible,
body .hdr:not(.solid) button:focus-visible,
body .hero a:focus-visible{outline-color:#fff}

/* --- tap targets: invisible 44px hit areas, no layout shift ---------------- */
.burger{position:relative}
.burger::after{content:"";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:44px;height:44px}
.ft__bottom .legal a{position:relative;display:inline-block}
.ft__bottom .legal a::after{content:"";position:absolute;top:50%;left:0;
  transform:translateY(-50%);width:100%;height:44px}
.ft__news button{position:relative}
.ft__news button::after{content:"";position:absolute;top:50%;left:0;
  transform:translateY(-50%);width:100%;height:44px}

/* --- skip link: first tab stop, visible only while focused --- */
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--bg);color:var(--ink);
  padding:.75rem 1.15rem;font-family:var(--sans);font-size:.85rem;letter-spacing:.04em;
  text-decoration:none;border:1px solid var(--ink);border-radius:var(--radius)}
.skip:focus{left:1rem;top:1rem}

/* ===========================================================================
   Gift certificate modal — same visual language as the booking modal, so the
   purchase flow feels like part of the site rather than a bolted-on form.
   =========================================================================== */
.gm{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,2rem);background:rgba(42,38,32,.55);backdrop-filter:blur(3px)}
html.gm-open .gm{display:flex}
html.gm-open{overflow:hidden}
.gm-box{background:var(--card);border-radius:var(--radius);width:min(560px,100%);
  max-height:min(88svh,760px);display:flex;flex-direction:column;position:relative;
  box-shadow:0 30px 80px rgba(42,38,32,.28)}
.gm-x{position:absolute;top:.9rem;right:.9rem;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;z-index:2}
.gm-scroll{overflow-y:auto;padding:clamp(1.6rem,3.4vw,2.4rem)}
.gm h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,2.6vw,1.9rem);color:var(--ink);margin-bottom:.4rem}
.gm .gm-sub{color:var(--ink-2);font-size:.92rem;margin-bottom:1.4rem}
.gm .lbl{display:block;font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);margin:1.3rem 0 .6rem}
.gm-amounts{display:flex;flex-wrap:wrap;gap:.6rem}
.gm-amount{flex:1 1 6rem}
.gm-amount input{position:absolute;opacity:0;width:0;height:0}
.gm-amount span{display:block;text-align:center;padding:.85em .6em;border:1px solid var(--line-2);
  border-radius:var(--radius);font-family:var(--serif);font-size:1.15rem;color:var(--ink);
  cursor:pointer;transition:border-color .25s var(--ease),background .25s var(--ease)}
.gm-amount input:checked+span{border-color:var(--ink);background:var(--bg-2)}
.gm-amount input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.gm-field{margin-bottom:.9rem}
.gm-field label{display:block;font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.4rem}
.gm-field input,.gm-field textarea{width:100%;background:var(--bg);border:1px solid var(--line-2);
  border-radius:var(--radius);padding:.8em 1em;font-family:var(--sans);font-size:.95rem;color:var(--ink)}
.gm-field textarea{resize:vertical;min-height:74px}
.gm-grid2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.gm-err{color:var(--terra);font-size:.82rem;margin:.5rem 0 0}
.gm-note{font-size:.82rem;color:var(--ink-2);margin-top:1rem;line-height:1.5}
.gm .btn{width:100%;margin-top:1.2rem}
@media(max-width:560px){.gm-grid2{grid-template-columns:1fr}}

/* payment confirmation screen — only rendered after a return from Stripe */
.paid{text-align:center}
.paid-tick{width:46px;height:46px;margin:0 auto 16px;border-radius:50%;border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;color:var(--gold-text)}
.paid-tick svg{width:22px;height:22px}
.paid h3{margin:0 0 4px}
.paid-sum{margin:18px 0 0;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.paid-sum .pd-k{display:block;font-family:var(--sans);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2)}
.paid-sum b{display:block;margin-top:6px;font-family:var(--serif);font-weight:400;font-size:2rem;color:var(--ink)}
.pd-rows{margin:18px 0 0;text-align:left}
.pd-row{display:flex;justify-content:space-between;gap:1rem;padding:9px 0;border-bottom:1px solid var(--line)}
.pd-row .pd-k{font-family:var(--sans);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);white-space:nowrap}
.pd-row .pd-v{font-family:var(--sans);font-size:.92rem;color:var(--ink);text-align:right}
.paid .gm-sub{margin-top:18px}
.paid-ref{margin:14px 0 0;font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2)}
.paid-ref b{font-weight:500;color:var(--ink);letter-spacing:.14em}

/* Jumping to an anchor: ease into it instead of teleporting. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* No scroll-margin on .section — its own top padding already clears the fixed header, and
   adding more only opened a band of empty cream under it. Only elements without that
   padding need the offset. */
#main{scroll-margin-top:var(--hdr)}

/* Promo code in the booking summary. The wrapper carries .bkfield, so the input inherits
   the form's own padding, border and cream fill instead of the browser default — nothing
   about the field's look is redefined here, only the row layout. */
.bk-promo{margin:1.1rem 0 0;padding-top:1.1rem;border-top:1px solid var(--line-2)}
.bk-promo__row{display:flex;gap:.6rem;align-items:stretch;margin-top:.35rem}
.bk-promo__row input{flex:1 1 auto;min-width:0}
.bk-promo__row .btn{flex:0 0 auto;white-space:nowrap}
.bk-promo__msg{min-height:1.2em;margin:.5rem 0 0;font-size:.85rem;color:var(--ink-2)}
.bk-promo__msg.is-ok{color:var(--gold-text)}
.bk-promo__msg.is-err{color:#9B2C2C}

/* Hero video sits over the still photo, same crop. It is desktop-only: on a phone the clip
   is megabytes of mobile data for a background, and the photo underneath already carries the
   hero. Motion is suppressed for anyone who asked for less of it, for the same reason. */
.hero__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:reduce){.hero__vid{display:none}}

/* ---------- Promotion: folding strip + one-time card ---------------------------------- */
/* Deliberately not a full-screen modal. The strip sits under the content, folds into a
   small badge instead of disappearing, and uses the site's own palette and type — a loud
   discount widget would undo the calm the rest of the page is built on. */
.mzp{position:fixed;left:0;right:0;bottom:0;z-index:60;pointer-events:none}
.mzp *{pointer-events:auto}

.mzp-bar{display:flex;align-items:center;gap:clamp(.8rem,2vw,1.6rem);
  padding:.75rem clamp(1rem,4vw,2.4rem);background:var(--card);
  border-top:1px solid var(--line-2);
  box-shadow:0 -8px 30px -18px rgba(42,38,32,.5);
  transform:translateY(0);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.mzp.is-folded .mzp-bar{transform:translateY(110%)}
.mzp-bar__txt{margin:0;font-family:var(--sans);font-size:.92rem;line-height:1.35;color:var(--ink-2);
  display:flex;flex-wrap:wrap;gap:.15rem .5rem;align-items:baseline}
.mzp-bar__txt strong{font-weight:600;color:var(--ink)}
.mzp-code{font-weight:600;color:var(--gold-text);letter-spacing:.06em}
.mzp-bar__cta{margin:0 0 0 auto;padding:.6em 1.25em;font-size:.78rem;white-space:nowrap}
.mzp-x{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;
  background:none;border:0;cursor:pointer;color:var(--ink-2);font-size:1.2rem;line-height:1;
  border-radius:var(--radius)}
.mzp-x:hover{color:var(--ink)}
.mzp-x:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Folded state: a small mark, still there, never in the way. */
.mzp-badge{position:absolute;right:clamp(1rem,4vw,2.4rem);bottom:1rem;
  width:56px;height:56px;border-radius:50%;border:1px solid var(--line-2);
  background:var(--card);color:var(--gold-text);cursor:pointer;
  font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.02em;
  box-shadow:0 10px 30px -14px rgba(42,38,32,.55);
  opacity:0;transform:scale(.7);pointer-events:none;
  transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.mzp.is-folded .mzp-badge{opacity:1;transform:scale(1);pointer-events:auto}
/* While the card is open nothing else competes with it. The strip is taken out of the
   layout, not just moved: a transform leaves its height behind, and the card sits on that
   height — which read as a band of dead space under the card. */
.mzp.is-card .mzp-badge{opacity:0;transform:scale(.7);pointer-events:none}
.mzp.is-card .mzp-bar{display:none}
.mzp.is-card .mzp-card{bottom:clamp(1rem,3vh,1.6rem)}
.mzp-badge:hover{color:var(--ink)}
.mzp-badge:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* The card: bottom-right on desktop, a sheet on phones. Never centred over the page. */
.mzp-card{position:absolute;right:clamp(1rem,4vw,2.4rem);bottom:calc(100% + .9rem);
  width:min(370px,calc(100vw - 2rem));padding:2rem 1.9rem 1.9rem;
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--radius);
  box-shadow:0 26px 60px -28px rgba(42,38,32,.6);
  opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.mzp-card.is-in{opacity:1;transform:translateY(0)}
.mzp-card__eye{margin:0 0 .7rem;font-family:var(--sans);font-size:var(--fs-eye);
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text)}
.mzp-card__t{margin:0 0 .8rem;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.9rem,3.4vw,2.5rem);line-height:1.05;color:var(--ink)}
.mzp-card__p{margin:0 0 1.1rem;font-family:var(--sans);font-size:.95rem;line-height:1.55;color:var(--ink-2)}
.mzp-card__code{margin:0 0 1.3rem;padding:.7rem 0;text-align:center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:1.05rem}
.mzp-card__cta{display:block;width:100%;margin:0;text-align:center}
.mzp-x--card{position:absolute;top:.4rem;right:.4rem}
@media (max-width:700px){.mzp-x--card{width:48px;height:48px}}

@media (max-width:700px){
  .mzp-bar{flex-wrap:wrap;padding-bottom:calc(.75rem + env(safe-area-inset-bottom,0px))}
  .mzp-bar__txt{flex:1 1 100%;order:1}
  /* 48px minimum on touch: the desktop button height is comfortable with a cursor and
     too small for a thumb. */
  .mzp-bar__cta{order:2;margin:0;flex:1 1 auto;min-height:48px;
                display:inline-flex;align-items:center;justify-content:center}
  .mzp-x{order:3;width:48px;height:48px}
  .mzp-card{left:1rem;right:1rem;width:auto;bottom:calc(100% + .6rem)}
  .mzp-badge{bottom:calc(1rem + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){
  .mzp-bar,.mzp-badge,.mzp-card{transition:none}
}

/* Footer on narrow screens: the newsletter field's underline and the bottom row's divider
   end up a few dozen pixels apart and read as one doubled line. The field keeps its
   underline (it belongs to the input); the divider goes, the spacing does the separating. */
@media (max-width:900px){
  .ft__bottom{border-top:0;margin-top:clamp(2rem,6vw,2.8rem)}
}

/* ---------- shop: basket button + drawer (present only when products exist) ---------- */
/* Outside .nav so it survives the mobile breakpoint that hides the desktop menu. */
.hd-bk{-webkit-appearance:none;appearance:none;background:none;border:0;
  font:inherit;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;
  gap:.4em;padding:.6rem .2rem .6rem .8rem;margin-left:auto}
.hd-bk:hover{color:var(--gold-text)}
.hd-bk__n{display:inline-flex;align-items:center;justify-content:center;min-width:1.35em;
  height:1.35em;padding:0 .35em;border-radius:999px;background:var(--ink);color:var(--bg);
  font-size:.72rem;line-height:1}
.hd-bk__t{font-size:.82rem;font-weight:500;letter-spacing:.06em}
@media (max-width:900px){
  /* Beside the burger, word dropped: the count carries the meaning. Padding is sized so the
     tap target clears 44px, which the first attempt did not — it measured 32x43. */
  .hd-bk{margin-left:auto;padding:.75rem .8rem;min-width:44px;min-height:44px;
    justify-content:center}
  .hd-bk__t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .hd-bk__n{min-width:1.7em;height:1.7em;font-size:.76rem}
}
.bsk{position:fixed;inset:0;z-index:120}
.bsk-back{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;
  background:rgba(28,23,17,.34);opacity:0;transition:opacity .32s var(--ease)}
.bsk.is-open .bsk-back{opacity:1}
.bsk-panel{position:absolute;top:0;right:0;height:100%;width:min(420px,100%);display:flex;
  flex-direction:column;background:var(--bg);box-shadow:-18px 0 44px rgba(28,23,17,.14);
  transform:translateX(100%);transition:transform .34s var(--ease)}
.bsk.is-open .bsk-panel{transform:none}
@media (prefers-reduced-motion:reduce){
  .bsk-back,.bsk-panel{transition:none}
}
.bsk-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:clamp(1.1rem,3vw,1.5rem);border-bottom:1px solid var(--line)}
.bsk-title{margin:0;font-family:var(--serif);font-size:1.3rem;font-weight:500}
.bsk-x{-webkit-appearance:none;appearance:none;background:none;border:0;font-size:1.6rem;
  line-height:1;color:var(--ink-2);cursor:pointer;padding:0 .2rem}
.bsk-x:hover{color:var(--ink)}
.bsk-empty{margin:0;padding:clamp(1.4rem,4vw,2rem);color:var(--ink-2)}
.bsk-list{flex:1;overflow-y:auto;padding:clamp(.6rem,2vw,1rem) clamp(1.1rem,3vw,1.5rem)}
.bsk-row{display:grid;grid-template-columns:64px 1fr auto;gap:.9rem;align-items:start;
  padding:.95rem 0;border-bottom:1px solid var(--line)}
.bsk-row__img{display:block;overflow:hidden;border-radius:var(--radius);aspect-ratio:1/1;
  background:var(--bg-2)}
.bsk-row__img img{width:100%;height:100%;object-fit:cover}
.bsk-row__name{display:block;color:var(--ink);text-decoration:none;font-family:var(--serif);
  font-size:1.02rem;line-height:1.3}
.bsk-row__name:hover{color:var(--gold-text)}
.bsk-row__price{margin:.15rem 0 .45rem;font-size:.84rem;color:var(--ink-2)}
.bsk-qty{display:inline-flex;align-items:center;gap:.1rem;border:1px solid var(--line-2);
  border-radius:var(--radius)}
.bsk-qty__b{-webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;
  width:1.9rem;height:1.75rem;font:inherit;font-size:1rem;line-height:1;color:var(--ink)}
.bsk-qty__b:hover{background:var(--bg-2)}
.bsk-qty__n{min-width:1.6rem;text-align:center;font-size:.9rem}
.bsk-row__end{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}
.bsk-row__sum{font-size:.96rem}
.bsk-row__x{-webkit-appearance:none;appearance:none;background:none;border:0;padding:0;
  cursor:pointer;font:inherit;font-size:.78rem;color:var(--ink-2);
  text-decoration:underline;text-underline-offset:3px}
.bsk-row__x:hover{color:var(--ink)}
.bsk-foot{padding:clamp(1.1rem,3vw,1.5rem);border-top:1px solid var(--line)}
.bsk-total{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 .2rem;
  font-size:1.05rem}
.bsk-note{margin:0 0 .9rem;font-size:.82rem;color:var(--ink-2)}
.bsk-go{width:100%}
.bsk-go[disabled]{opacity:.45;cursor:not-allowed}
.bsk-soon{margin:.55rem 0 0;font-size:.78rem;color:var(--ink-2);text-align:center}
.bsk-note--warn{margin:0;padding:clamp(.9rem,2.4vw,1.15rem) clamp(1.1rem,3vw,1.5rem);
  background:var(--bg-2);color:var(--ink);font-size:.88rem;line-height:1.5}