/* ==========================================================================
   Santa Maria Luxury Rooms - design system of the Atheox pages pack.

   Every page of the pack links this file, so a page renders the same on its own
   as in the site. It also carries the refinements of the theme's chrome (navbar,
   page ground, footer band, the cookie banner); link it under Header scripts as
   well and those reach every public page, not only the ones from this pack.

   Palette from the house itself: basalt (the volcanic stone and the dark beams),
   lime-washed walls, linen, and the ochre of the hills and the brass lamps.
   ========================================================================== */

/* 1. Typefaces - self-hosted variable fonts, no request leaves the site.
   The theme's own typography loads one weight per family; these add the
   weights and the italic the pages are set in. */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/cormorant-garamond-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/cormorant-garamond-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;src:url('../fonts/cormorant-garamond-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;src:url('../fonts/cormorant-garamond-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jost';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/jost-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/jost-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* 2. Tokens */
:root{
  --sm-ink:#1c1917;            /* basalt - the theme's stone-900 */
  --sm-ink-2:#26211d;
  --sm-ink-soft:#3b342e;       /* running text on light grounds */
  --sm-ivory:#f8f5ef;          /* lime-washed walls */
  --sm-linen:#efe8dc;
  --sm-gold:#a8844f;           /* ochre and brass - lines, numerals, large type */
  --sm-gold-deep:#7c5e33;      /* the same, dark enough for small type on ivory */
  --sm-gold-light:#cdab74;     /* the same on basalt */
  --sm-stone:#6b6258;          /* secondary text on ivory */
  --sm-line:rgba(28,25,23,.14);
  --sm-line-strong:rgba(28,25,23,.28);
  --sm-line-dark:rgba(248,245,239,.18);
  --sm-serif:'Cormorant Garamond','Cormorant','EB Garamond',Garamond,'Times New Roman',serif;
  --sm-sans:'Jost','Futura','Century Gothic','Avenir Next','Segoe UI',sans-serif;
  --sm-ease:cubic-bezier(.2,.7,.2,1);
  --sm-nav-h:5rem;
  --sm-gutter:clamp(1.25rem,4.2vw,3.5rem);
  --sm-wrap:1360px;
}

/* 3. The theme's chrome: page ground, navbar, footer band, cookie banner */
body{background-color:var(--sm-ivory)}
body .page{background:var(--sm-ivory)!important;border:0!important}
body .page>.page-wrapper{background:var(--sm-ivory)!important}
/* The sticky navbar lies half transparent over the top of the page, where the first hero runs up
   under it (8.), and turns solid with the theme's own shadow as soon as the page scrolls (site.js,
   initNavbar: html.sm-nav, .sm-scrolled once scrolled). Without site.js it stays solid, and an open
   phone menu is always solid. */
body .navbar-sticky.sticky-top{box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12)!important;transition:box-shadow .35s var(--sm-ease)!important}
html.sm-nav:not(.sm-scrolled) body .navbar-sticky.sticky-top:not(:has(.navbar-collapse:is(.show,.collapsing))){box-shadow:none!important}
html.sm-nav:not(.sm-scrolled) body header.navbar:not(:has(.navbar-collapse:is(.show,.collapsing))){background-color:rgba(248,245,239,.68)!important}
body header.navbar{
  --bs-navbar-height:var(--sm-nav-h);
  --bs-navbar-padding-y:0;
  --bs-navbar-bg:var(--sm-ivory);
  --bs-navbar-color:var(--sm-ink);
  --bs-navbar-hover-color:var(--sm-gold-deep);
  --bs-navbar-active-color:var(--sm-ink);
  --bs-navbar-active-border-color:var(--sm-gold);
  --bs-navbar-border-color:var(--sm-line);
  --bs-navbar-brand-image-height:2.6rem;
  background:var(--sm-ivory)!important;
  -webkit-backdrop-filter:saturate(1.1) blur(12px);backdrop-filter:saturate(1.1) blur(12px);
  transition:background-color .35s var(--sm-ease)!important;
  font-family:var(--sm-sans);
}
body header.navbar #primary-header{min-height:var(--sm-nav-h);padding-inline:var(--sm-gutter);max-width:var(--sm-wrap)}
body header.navbar .navbar-brand{padding-block:0;margin-right:clamp(1rem,3vw,3rem)}
body header.navbar .navbar-brand-image{height:2.6rem;width:auto;filter:none}
body header.navbar .navbar-nav .nav-link{
  font-family:var(--sm-sans);font-size:.76rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sm-ink);padding:.7rem 0;transition:color .25s var(--sm-ease)
}
body header.navbar .navbar-nav .nav-link:hover,body header.navbar .navbar-nav .nav-link:focus-visible{color:var(--sm-gold-deep)}
body header.navbar .nav-link-icon{display:none!important}
/* The menu entry that leads to /contact is the enquiry button (contact.html: the local preview). */
body header.navbar .nav-link:is([href$="/contact"],[href$="/contact.html"]){border:1px solid var(--sm-ink);padding:.8rem 1.35rem;transition:background-color .3s var(--sm-ease),color .3s var(--sm-ease)}
body header.navbar .nav-link:is([href$="/contact"],[href$="/contact.html"]):hover{background:var(--sm-ink);color:var(--sm-ivory)}
body header.navbar .nav-item.active:has(> .nav-link:is([href$="/contact"],[href$="/contact.html"]))::after{display:none}
/* A guesthouse has no sign-in and no account for its guests: the theme's Login button and the
   profile menu stay out of the bar. Administrators sign in at /account/login and reach their
   account and the sign-out through the admin. */
body header.navbar #primary-header-side .nav-item:has(> a.btn[href$="/account/login"]),
body header.navbar #primary-header-side .nav-item.dropdown:has(.avatar){display:none!important}
/* The theme's language selector, which the site setup switches on: a flag that opens the list of
   the site's languages, each in its own name (site.js, initLanguages). The theme shows it from
   768 px up only; on phones it stands right of the logo, across from the menu button. */
body header.navbar .dropdown-menu:has(a[href*="/language/set/"]){
  min-width:11.5rem;padding:.4rem 0;border:1px solid var(--sm-line);border-radius:0;
  background:var(--sm-ivory);box-shadow:0 14px 34px rgba(20,17,15,.14)
}
body header.navbar .dropdown-menu:has(a[href*="/language/set/"])::before{display:none}
body header.navbar .dropdown-item[href*="/language/set/"]{
  padding:.6rem 1.15rem;font-family:var(--sm-sans);font-size:.9rem;font-weight:400;color:var(--sm-ink);background:transparent;
  transition:color .25s var(--sm-ease),background-color .25s var(--sm-ease)
}
body header.navbar .dropdown-item[href*="/language/set/"]:is(:hover,:focus-visible){background:rgba(124,94,51,.07);color:var(--sm-gold-deep)}
body header.navbar .dropdown-item[href*="/language/set/"].active{background:transparent;color:var(--sm-gold-deep);font-weight:500}
body header.navbar :is(.nav-link,.dropdown-item) .fi{border-radius:0!important;box-shadow:0 0 0 1px rgba(20,17,15,.12)}
@media (max-width:767.98px){
  body header.navbar #primary-header-side>.d-none:has(a[href*="/language/set/"]),
  body header.navbar #primary-header-side .nav-item.dropdown:has(a[href*="/language/set/"]){display:flex!important}
  body header.navbar #primary-header-side .nav-link:has(> .fi){padding:.75rem .5rem}
}
body header.navbar .navbar-toggler{border:0;padding:.5rem;margin-right:.25rem;color:var(--sm-ink)}
@media (min-width:768px){
  body header.navbar .navbar-horizontal .navbar-nav{gap:clamp(1.3rem,2.5vw,2.6rem);align-items:center}
  body header.navbar .navbar-horizontal .nav-item.active::after{bottom:.35rem;border-bottom-width:1px}
  body header.navbar #primary-header-side{margin-left:clamp(1.3rem,2.5vw,2.6rem)}
}
@media (max-width:767.98px){
  body header.navbar .navbar-collapse :is(.ms-auto,.mx-auto,.me-auto){margin:0!important;width:100%}
  body header.navbar .navbar-collapse .navbar-nav{align-items:flex-start}
  body header.navbar .navbar-collapse{border-top:1px solid var(--sm-line);margin-top:.25rem}
  body header.navbar .navbar-collapse .navbar-nav{padding-block:.75rem 1.25rem}
  body header.navbar .navbar-collapse .nav-link{padding:.85rem 0;font-size:.82rem}
  body header.navbar .navbar-collapse .nav-link:is([href$="/contact"],[href$="/contact.html"]){display:inline-flex;margin-top:.75rem;padding:.9rem 1.5rem}
  body header.navbar .navbar-brand-image{height:2.25rem}
}
/* The footer section cancels the band's own padding itself (w-100 my-n5, as on FinanceFarm), so it
   sits flush on pages that do not load this file; here the band only takes the same ground. */
body .page-wrapper>footer.footer{background:var(--sm-ink);color:rgba(248,245,239,.72)}
body .page-wrapper>footer.footer a:hover{color:var(--sm-gold-light)!important}
/* The Compliance module's cookie banner and the button that reopens it: the footer band's basalt,
   the pack's type, square corners. The module writes its colours inline from its settings, so the
   variables need !important here. Accept and reject look alike, so that neither choice is pushed. */
body #atheox-consent-banner{
  --consent-bg:var(--sm-ink)!important;--consent-text:var(--sm-ivory)!important;--consent-primary:var(--sm-gold-light)!important;
  --consent-font:var(--sm-sans)!important;--consent-radius:0!important;--consent-shadow:none!important;
  border-top:1px solid rgba(205,171,116,.4)
}
body #atheox-consent-banner .consent-banner__content{max-width:var(--sm-wrap);padding:1.75rem var(--sm-gutter);gap:1rem clamp(1.5rem,3vw,3rem)}
body #atheox-consent-banner .consent-banner__title{flex:none;margin:0;font-family:var(--sm-serif);font-weight:400;font-size:1.65rem;line-height:1.15;letter-spacing:-.01em;color:var(--sm-ivory)}
body #atheox-consent-banner .consent-banner__description{opacity:1;font-size:.95rem;font-weight:300;line-height:1.7;color:rgba(248,245,239,.78)}
body #atheox-consent-banner .consent-banner__link{margin-left:.35rem;color:var(--sm-gold-light);text-decoration:none;border-bottom:1px solid rgba(205,171,116,.5)}
body #atheox-consent-banner .consent-banner__link:hover{opacity:1;border-bottom-color:var(--sm-gold-light)}
body #atheox-consent-banner .consent-banner__actions{align-items:center;gap:.75rem 1rem}
body #atheox-consent-banner .consent-btn{
  padding:1rem 1.5rem;border:1px solid rgba(248,245,239,.6);border-radius:0!important;background:transparent;color:var(--sm-ivory);opacity:1;filter:none;
  font-family:var(--sm-sans);font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;line-height:1;text-decoration:none;
  transition:background-color .3s var(--sm-ease),color .3s var(--sm-ease),border-color .3s var(--sm-ease)
}
body #atheox-consent-banner .consent-btn:hover{background:var(--sm-ivory);border-color:var(--sm-ivory);color:var(--sm-ink)}
/* "Customize" is the third choice: a link, as .sm-link is on dark grounds. */
body #atheox-consent-banner .consent-btn--outline{padding:.35rem 0;margin-left:.5rem;border:0;border-bottom:1px solid var(--sm-gold-light)}
body #atheox-consent-banner .consent-btn--outline:hover{background:transparent;color:var(--sm-gold-light)}
body #atheox-consent-banner .consent-btn:focus-visible{outline:1px solid var(--sm-gold-light);outline-offset:3px}
body #atheox-consent-banner .consent-banner__preferences{border-top-color:var(--sm-line-dark)}
body #atheox-consent-banner .consent-banner__preferences-inner{max-width:var(--sm-wrap);margin-inline:auto;padding:1rem var(--sm-gutter) 1.5rem}
body #atheox-consent-banner .consent-category{border-bottom-color:var(--sm-line-dark)}
body #atheox-consent-banner .consent-category__label{font-weight:500}
body #atheox-consent-banner .consent-category__name{font-size:.95rem}
body #atheox-consent-banner .consent-category__badge{border-radius:0;background:rgba(205,171,116,.14);color:var(--sm-gold-light);font-weight:500;letter-spacing:.16em}
body #atheox-consent-banner .consent-category__description{opacity:1;font-size:.88rem;line-height:1.65;color:rgba(248,245,239,.66)}
body .consent-trigger{
  --consent-trigger-bg:var(--sm-ink)!important;--consent-trigger-color:var(--sm-ivory)!important;
  border:1px solid rgba(205,171,116,.55);border-radius:0!important;box-shadow:0 6px 22px rgba(20,17,15,.25);transition:border-color .3s var(--sm-ease)
}
body .consent-trigger:hover{transform:none;border-color:var(--sm-gold-light);box-shadow:0 6px 22px rgba(20,17,15,.25)}
body .consent-trigger:focus-visible{outline:1px solid var(--sm-gold-deep);outline-offset:3px}
@media (max-width:576px){
  body #atheox-consent-banner .consent-btn--outline{width:auto;align-self:center;margin:.35rem 0 0}
}

/* 4. Page base */
.sm-page{
  font-family:var(--sm-sans);font-size:1.0625rem;font-weight:400;line-height:1.85;color:var(--sm-ink-soft);
  background:var(--sm-ivory);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-variant-numeric:lining-nums;overflow-x:clip
}
/* Element defaults at one class of specificity: above the theme's bare element rules, level with
   the components below, which therefore win by coming later. */
.sm-page :where(*),.sm-page :where(*)::before,.sm-page :where(*)::after{box-sizing:border-box}
.sm-page :where(img){display:block;max-width:100%;height:auto}
.sm-page :where(p){margin:0 0 1.15em}
.sm-page :where(p:last-child){margin-bottom:0}
.sm-page :where(ul,ol){margin:0;padding:0;list-style:none}
.sm-page :where(figure){margin:0}
.sm-page :where(a){color:inherit}
.sm-page :where(h1,h2,h3,h4){font-family:var(--sm-serif);color:var(--sm-ink);font-weight:400;letter-spacing:-.01em;margin:0}
.sm-page ::selection{background:var(--sm-ink);color:var(--sm-ivory)}
.sm-page :focus-visible{outline:1px solid var(--sm-gold-deep);outline-offset:4px}
.sm-page [id]{scroll-margin-top:calc(var(--sm-nav-h) + 1.5rem)}
.sm-wrap{width:100%;max-width:var(--sm-wrap);margin-inline:auto;padding-inline:var(--sm-gutter)}
.sm-measure{max-width:38rem}
.sm-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sm-nowrap{white-space:nowrap}

/* 5. Type */
.sm-display{font-family:var(--sm-serif);font-weight:300;font-size:clamp(2.9rem,5.9vw,5.8rem);line-height:.98;letter-spacing:-.018em;text-wrap:balance}
.sm-h1{font-family:var(--sm-serif);font-weight:300;font-size:clamp(2.8rem,5.6vw,5.6rem);line-height:1;letter-spacing:-.015em;text-wrap:balance}
.sm-h2{font-family:var(--sm-serif);font-weight:400;font-size:clamp(2.25rem,3.9vw,3.85rem);line-height:1.05;letter-spacing:-.012em;text-wrap:balance}
.sm-h3{font-family:var(--sm-serif);font-weight:500;font-size:clamp(1.5rem,1.9vw,1.95rem);line-height:1.2}
.sm-lead{font-family:var(--sm-sans);font-weight:300;font-size:clamp(1.14rem,1.32vw,1.3rem);line-height:1.7;color:var(--sm-ink-soft)}
.sm-meta{font-family:var(--sm-sans);font-weight:500;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sm-stone)}
.sm-numeral{font-family:var(--sm-serif);font-style:italic;font-weight:300;color:var(--sm-gold);line-height:.9;letter-spacing:-.01em}
.sm-rule{display:block;width:3.5rem;height:1px;background:var(--sm-gold);margin:2rem 0}

/* 6. Actions */
.sm-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem 2.25rem;margin-top:2.5rem}
.sm-actions--center{justify-content:center}
.sm-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.75rem;
  font-family:var(--sm-sans);font-size:.76rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;line-height:1;
  padding:1.2rem 2.2rem;border:1px solid var(--sm-ink);background:var(--sm-ink);color:var(--sm-ivory)!important;
  text-decoration:none;cursor:pointer;transition:background-color .35s var(--sm-ease),color .35s var(--sm-ease),border-color .35s var(--sm-ease)
}
.sm-btn:hover{background:transparent;color:var(--sm-ink)!important}
.sm-btn--light{background:var(--sm-ivory);border-color:var(--sm-ivory);color:var(--sm-ink)!important}
.sm-btn--light:hover{background:transparent;color:var(--sm-ivory)!important}
.sm-btn--line{background:transparent;border-color:currentColor;color:inherit!important}
.sm-btn--line:hover{background:var(--sm-ink);border-color:var(--sm-ink);color:var(--sm-ivory)!important}
.sm-link{
  display:inline-flex;align-items:center;gap:.7rem;background:none;border:0;border-bottom:1px solid var(--sm-gold);
  padding:0 0 .45rem;font-family:var(--sm-sans);font-size:.76rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:inherit;text-decoration:none;cursor:pointer;transition:color .25s var(--sm-ease),border-color .25s var(--sm-ease)
}
.sm-link:hover{color:var(--sm-gold-deep);border-color:var(--sm-gold-deep)}
.sm-on-dark .sm-link:hover{color:var(--sm-gold-light);border-color:var(--sm-gold-light)}
.sm-link svg{width:1.6rem;height:1.6rem;flex:none}

/* 7. Sections */
.sm-section{padding-block:clamp(5rem,10vw,9.5rem);background:var(--sm-ivory)}
.sm-section--linen{background:var(--sm-linen)}
.sm-section--ink,.sm-on-dark{background:var(--sm-ink);color:rgba(248,245,239,.74)}
.sm-section--ink :is(h1,h2,h3,h4),.sm-on-dark :is(h1,h2,h3,h4){color:var(--sm-ivory)}
.sm-section--ink .sm-lead,.sm-on-dark .sm-lead{color:rgba(248,245,239,.78)}
.sm-section--ink .sm-meta,.sm-on-dark .sm-meta{color:rgba(248,245,239,.6)}
.sm-section--ink .sm-numeral,.sm-on-dark .sm-numeral{color:var(--sm-gold-light)}
.sm-section--ink :focus-visible,.sm-on-dark :focus-visible{outline-color:var(--sm-gold-light)}
.sm-section--tight{padding-block:clamp(3.5rem,6vw,6rem)}
.sm-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2rem clamp(2rem,6vw,7rem);align-items:end;margin-bottom:clamp(3rem,6vw,5.5rem)}
.sm-head .sm-lead{max-width:30rem}
@media (max-width:991.98px){.sm-head{grid-template-columns:1fr;align-items:start}}

/* 8. Hero - one orchestrated moment: the photograph settles, the type follows */
.sm-hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:calc(100svh - var(--sm-nav-h));min-height:max(34rem,calc(100svh - var(--sm-nav-h)));overflow:hidden;background:var(--sm-ink);color:var(--sm-ivory)}
.sm-hero__img{position:absolute;inset:0;z-index:-2;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;object-position:50% 52%;animation:sm-settle 14s var(--sm-ease) both}
.sm-hero__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(18,15,13,.84) 0%,rgba(18,15,13,.46) 40%,rgba(18,15,13,0) 72%),linear-gradient(to right,rgba(18,15,13,.6) 0%,rgba(18,15,13,.18) 42%,rgba(18,15,13,0) 64%)}
.sm-hero__content{padding-block:9rem clamp(3.5rem,9vh,7rem)}
.sm-hero__content>*{animation:sm-rise 1.3s var(--sm-ease) both}
.sm-hero__content>:nth-child(2){animation-delay:.15s}
.sm-hero__content>:nth-child(3){animation-delay:.3s}
.sm-hero__content>:nth-child(4){animation-delay:.45s}
.sm-hero h1{color:var(--sm-ivory);max-width:15ch}
.sm-hero__sub{display:block;max-width:26ch;margin-top:.5em;font-size:.42em;line-height:1.25;letter-spacing:0}
.sm-hero__lede{font-weight:300;font-size:clamp(1.1rem,1.4vw,1.3rem);line-height:1.65;max-width:34rem;margin:1.75rem 0 0;color:rgba(248,245,239,.9)}
.sm-hero .sm-actions{margin-top:2.75rem}
.sm-hero .sm-link{border-color:rgba(248,245,239,.55)}
.sm-hero .sm-link:hover{color:var(--sm-gold-light);border-color:var(--sm-gold-light)}
.sm-hero--page{min-height:max(28rem,72svh)}
.sm-hero--page .sm-hero__content{padding-block:8rem clamp(3rem,8vh,5.5rem)}
/* The first hero of a page runs up under the navbar, which lies half transparent over its top (3.);
   its text keeps clear of the bar. A hero with pictures in turn does so only while its text lies
   over the picture (from 992 px): on narrower screens the bar would hide too much of it. */
.sm-page>.sm-hero--page:first-child{margin-top:calc(-1 * var(--sm-nav-h));min-height:calc(max(28rem,72svh) + var(--sm-nav-h))}
.sm-page>.sm-hero--page:first-child .sm-hero__content{padding-top:calc(8rem + var(--sm-nav-h))}
.sm-hero__note{font-family:var(--sm-sans);font-weight:500;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(248,245,239,.78);margin:0 0 1.5rem}
/* The home page's pictures take turns (site.js): stacked in the hero, the current one on top, the
   next fading in over it. They keep still, because each is the first frame of its video. */
.sm-hero__slides{position:absolute;inset:0;z-index:-2;overflow:hidden}
.sm-hero__slides .sm-hero__img{z-index:0;opacity:0;animation:none;transition:opacity 1.8s var(--sm-ease)}
.sm-hero__slides .sm-hero__img.is-current{z-index:3;opacity:1}
.sm-hero__slides .sm-hero__img.is-leaving{z-index:1;opacity:1}
/* A picture can play a video of itself (site.js): the video lies over it and shows only while it
   plays, so the picture stands in until the video is ready. */
.sm-hero__slides .sm-hero__video{position:absolute;inset:0;z-index:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;object-position:50% 52%;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 1.8s var(--sm-ease),visibility 0s linear 1.8s}
.sm-hero__slides .sm-hero__video.is-live{visibility:visible;transition:opacity 1.8s var(--sm-ease)}
.sm-hero__slides .sm-hero__video.is-live:is(.is-current,.is-leaving){opacity:1}
.sm-hero__slides .sm-hero__video.is-current{z-index:4}
.sm-hero__slides .sm-hero__video.is-leaving{z-index:2}
.sm-hero__pause{position:absolute;right:var(--sm-gutter);bottom:clamp(3.5rem,9vh,7rem);display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;border:1px solid rgba(248,245,239,.5);background:rgba(18,15,13,.18);color:var(--sm-ivory);cursor:pointer;transition:border-color .25s var(--sm-ease),background-color .25s var(--sm-ease)}
.sm-hero__pause:hover{border-color:var(--sm-ivory);background:rgba(18,15,13,.38)}
.sm-hero__pause[hidden]{display:none}
.sm-hero__pause svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sm-hero :focus-visible{outline-color:var(--sm-gold-light)}
@media (max-width:575.98px){
  .sm-hero__pause{bottom:1.25rem}
  .sm-hero__shade{background:linear-gradient(to top,rgba(18,15,13,.88) 0%,rgba(18,15,13,.6) 48%,rgba(18,15,13,.18) 80%,rgba(18,15,13,.05) 100%)}
  .sm-hero .sm-actions{gap:1.25rem 1.75rem}
}
/* A hero with pictures that take turns (home and rooms page) follows the screen's width, so that its
   pictures and videos, all 16:9, show whole. On wide screens the text lies over the picture, which
   is never taller than the screen; on narrow screens the picture comes first at the full width and
   the text follows on the dark ground. */
.sm-hero--slides{min-height:min(calc(100svh - var(--sm-nav-h)),56.25vw)}
.sm-hero--slides .sm-hero__content{padding-block:clamp(5rem,12vh,9rem) clamp(3.5rem,9vh,7rem)}
@media (min-width:992px){
  .sm-page>.sm-hero--slides:first-child{margin-top:calc(-1 * var(--sm-nav-h));min-height:min(100svh,56.25vw)}
  .sm-page>.sm-hero--slides:first-child .sm-hero__content{padding-top:calc(clamp(5rem,12vh,9rem) + var(--sm-nav-h))}
}
@media (max-width:991.98px){
  .sm-hero--slides{display:block;min-height:0;container-type:inline-size}
  .sm-hero--slides .sm-hero__slides{position:relative;inset:auto;height:56.25vw;height:56.25cqw}
  .sm-hero--slides .sm-hero__shade{bottom:auto;height:56.25vw;height:56.25cqw;background:linear-gradient(to top,rgba(18,15,13,.5) 0%,rgba(18,15,13,0) 40%)}
  .sm-hero--slides .sm-hero__content{padding-block:2.25rem 3.5rem}
  .sm-hero--slides .sm-hero__pause{top:calc(56.25vw - 3.75rem);top:calc(56.25cqw - 3.75rem);bottom:auto}
}
@keyframes sm-settle{from{transform:scale(1.07)}to{transform:none}}
@keyframes sm-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* 9. Intro: heading beside the text, then two photographs set off each other */
.sm-intro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:2.5rem clamp(2.5rem,8vw,9rem)}
.sm-intro__text{max-width:38rem}
.sm-intro__text .sm-lead{margin-bottom:1.6em}
.sm-host{display:flex;align-items:center;gap:1.1rem;margin-top:2.6rem;padding-top:2rem;border-top:1px solid var(--sm-line)}
.sm-host img{width:2.6rem;height:auto}
.sm-host p{margin:0;font-size:.95rem;line-height:1.6}
.sm-host a{text-decoration:none;border-bottom:1px solid var(--sm-gold)}
/* The house in photographs (site.js, initSlider), as on the old site: three side by side, two on
   tablets, one on phones, the next one peeking in. The row scrolls sideways and snaps to a
   photograph; without the script it still scrolls by hand. */
.sm-slider{--sm-slider-gap:1.5rem;margin-top:clamp(4rem,8vw,7.5rem)}
.sm-slider__track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * var(--sm-slider-gap)) / 3);gap:var(--sm-slider-gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.sm-slider__track::-webkit-scrollbar{display:none}
.sm-slider__slide{margin:0;scroll-snap-align:start}
.sm-slider__slide a{display:block;overflow:hidden;cursor:zoom-in;background:var(--sm-ink-2)}
.sm-slider__slide img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform 1.4s var(--sm-ease)}
.sm-slider__slide a:hover img{transform:scale(1.03)}
/* The film among the photographs: its still with a play mark; it opens in the viewer (site.js). */
.sm-slider__slide--film a{position:relative;cursor:pointer}
.sm-slider__play{position:absolute;inset:auto 0 0 0;display:flex;align-items:center;gap:.85rem;padding:3rem 1.25rem 1.1rem;background:linear-gradient(to top,rgba(18,15,13,.72),rgba(18,15,13,0));color:var(--sm-ivory);font-family:var(--sm-sans);font-weight:500;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase}
.sm-slider__play svg{flex:none;width:2.6rem;height:2.6rem;transition:transform .35s var(--sm-ease)}
.sm-slider__slide--film a:hover .sm-slider__play svg{transform:scale(1.08)}
.sm-slider__time{margin-left:.45em;color:rgba(248,245,239,.72);letter-spacing:.12em}
.sm-slider__controls{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1.25rem}
.sm-slider__controls[hidden]{display:none}
.sm-slider__btn{display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;border:1px solid var(--sm-line-strong);background:transparent;color:var(--sm-ink);cursor:pointer;transition:border-color .25s var(--sm-ease),background-color .25s var(--sm-ease),color .25s var(--sm-ease)}
.sm-slider__btn:hover{border-color:var(--sm-ink);background:var(--sm-ink);color:var(--sm-ivory)}
.sm-slider__btn svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sm-page figcaption{font-family:var(--sm-sans);font-size:.84rem;line-height:1.5;color:var(--sm-stone);margin-top:.9rem;letter-spacing:.01em}
.sm-section--ink figcaption{color:rgba(248,245,239,.58)}
@media (max-width:991.98px){
  .sm-intro{grid-template-columns:1fr}
  .sm-slider{--sm-slider-gap:1rem}
  .sm-slider__track{grid-auto-columns:calc((100% - var(--sm-slider-gap)) / 2)}
}
@media (max-width:575.98px){.sm-slider__track{grid-auto-columns:88%}}

/* 10. Rooms on the home page: suites above, doubles below, each row one height */
.sm-roomgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(2.5rem,4vw,3.5rem) clamp(1rem,2vw,2rem)}
.sm-roomcard{grid-column:span 4;--h:clamp(15rem,23vw,22rem)}
.sm-roomcard--wide{grid-column:span 7;--h:clamp(17rem,33vw,32rem)}
.sm-roomcard--side{grid-column:span 5;--h:clamp(17rem,33vw,32rem)}
.sm-roomcard a{display:block;text-decoration:none;color:inherit}
.sm-roomcard__media{display:block;overflow:hidden;background:var(--sm-ink-2)}
.sm-roomcard__media img{width:100%;height:var(--h);object-fit:cover;transition:transform 1.4s var(--sm-ease),opacity .6s var(--sm-ease)}
.sm-roomcard a:hover .sm-roomcard__media img{transform:scale(1.025)}
.sm-roomcard__caption{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:1rem;padding-top:1.15rem;border-bottom:1px solid var(--sm-line-dark);padding-bottom:1rem}
.sm-roomcard__no{font-family:var(--sm-serif);font-style:italic;font-weight:300;font-size:1.65rem;line-height:1;color:var(--sm-gold-light)}
.sm-roomcard__name{font-family:var(--sm-serif);font-weight:400;font-size:clamp(1.45rem,1.8vw,1.85rem);line-height:1.1;color:var(--sm-ivory)}
.sm-roomcard__meta{font-family:var(--sm-sans);font-weight:500;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(248,245,239,.62);white-space:nowrap}
.sm-roomcard a:hover .sm-roomcard__name{color:var(--sm-gold-light)}
.sm-roomgrid__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.5rem;margin-top:clamp(3rem,6vw,4.5rem)}
.sm-roomgrid__foot p{margin:0;font-size:.95rem;color:rgba(248,245,239,.6)}
@media (max-width:991.98px){
  .sm-roomcard,.sm-roomcard--wide,.sm-roomcard--side{grid-column:span 6;--h:clamp(14rem,40vw,22rem)}
  .sm-roomcard--wide{grid-column:span 12;--h:clamp(16rem,52vw,26rem)}
}
@media (max-width:575.98px){
  .sm-roomcard,.sm-roomcard--side{grid-column:span 12;--h:15.5rem}
  .sm-roomcard__caption{grid-template-columns:auto 1fr}
  .sm-roomcard__meta{grid-column:1 / -1}
}

/* 11. Feature: a tall photograph beside its text */
.sm-feature{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:3rem clamp(3rem,8vw,8.5rem);align-items:center}
.sm-feature--flip .sm-feature__media{order:2}
.sm-feature__frame{display:block;overflow:hidden}
.sm-feature__media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.sm-feature__text{max-width:34rem}
.sm-feature__text .sm-lead{margin:1.75rem 0 1.4em}
@media (max-width:991.98px){.sm-feature{grid-template-columns:1fr}.sm-feature--flip .sm-feature__media{order:0}.sm-feature__media img{aspect-ratio:3/2}}

/* 12. Interlude: one line over the landscape */
.sm-interlude{position:relative;isolation:isolate;display:grid;place-items:center;min-height:max(26rem,74vh);padding-inline:var(--sm-gutter);overflow:hidden;text-align:center;color:var(--sm-ivory);background:var(--sm-ink)}
.sm-interlude img{position:absolute;inset:0;z-index:-2;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;object-position:50% 35%}
.sm-interlude::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(18,15,13,.58) 0%,rgba(18,15,13,.36) 60%,rgba(18,15,13,.24) 100%)}
.sm-interlude__line{font-family:var(--sm-serif);font-style:italic;font-weight:300;font-size:clamp(2rem,4.2vw,4rem);line-height:1.14;letter-spacing:-.01em;max-width:15em;margin:0 auto;text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.35)}

/* 13. Closing invitation */
.sm-cta{text-align:center}
.sm-cta__mark{width:3.25rem;height:auto;margin:0 auto 2.25rem;opacity:.9}
.sm-cta .sm-lead{max-width:34rem;margin:1.5rem auto 0}
.sm-cta .sm-actions{justify-content:center}

/* 13a. The house on Google Maps on the home page (site.js): a framed notice until the visitor asks,
   then Google's own map in the same frame, so that nothing moves. Without site.js the frame stays
   hidden and the links below it remain. */
.sm-map{position:relative;display:grid;place-items:center;aspect-ratio:16/7;min-height:24rem;border:1px solid var(--sm-line);background:var(--sm-linen);overflow:hidden}
.sm-map[hidden]{display:none}
.sm-map__ask{max-width:38rem;display:grid;justify-items:center;gap:1.75rem;padding:2.5rem var(--sm-gutter);text-align:center}
.sm-map__ask p{margin:0;font-size:1rem;line-height:1.75;color:var(--sm-ink-soft)}
.sm-map.is-open{display:block;background:#e9e5df}
.sm-map iframe{position:absolute;inset:0;width:100%!important;height:100%!important;border:0}
.sm-map__about{max-width:52rem;margin:clamp(1.5rem,3vw,2rem) 0 0;font-size:.9rem;line-height:1.7;color:var(--sm-stone)}
.sm-map__about a{color:var(--sm-ink);text-decoration:none;border-bottom:1px solid var(--sm-gold)}
.sm-map__about a:hover{color:var(--sm-gold-deep);border-color:var(--sm-gold-deep)}
.sm-reviews .sm-actions{margin-top:1.75rem}
@media (max-width:767.98px){.sm-map{aspect-ratio:4/5;min-height:0}}

/* 14. Rooms page */
.sm-amenities{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:2.5rem clamp(3rem,8vw,8rem)}
.sm-amenities ul{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(1.5rem,4vw,3.5rem);border-top:1px solid var(--sm-line)}
.sm-amenities li{padding:1.05rem 0;border-bottom:1px solid var(--sm-line);font-size:1rem;line-height:1.55}
.sm-amenities li span{display:block;font-size:.88rem;color:var(--sm-stone)}
@media (max-width:991.98px){.sm-amenities{grid-template-columns:1fr}}
@media (max-width:575.98px){.sm-amenities ul{grid-template-columns:1fr}}

.sm-room{padding-block:clamp(4.5rem,9vw,8.5rem);background:var(--sm-ivory)}
.sm-room--linen{background:var(--sm-linen)}
.sm-room__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:3rem clamp(3rem,7vw,7.5rem);align-items:center}
.sm-room--flip .sm-room__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.sm-room--flip .sm-room__media{order:2}
.sm-room__main{display:block;position:relative;overflow:hidden;cursor:zoom-in;background:var(--sm-ink-2)}
.sm-room__main img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform 1.4s var(--sm-ease)}
.sm-room__main:hover img{transform:scale(1.02)}
/* The room's other seven photographs below the first: four, then three to a row, both rows of one
   height (a third wider, so 16:9 instead of 4:3). */
.sm-room__thumbs{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.75rem;margin-top:.75rem}
.sm-room__thumbs a{grid-column:span 3;display:block;overflow:hidden;cursor:zoom-in;background:var(--sm-ink-2)}
.sm-room__thumbs a:nth-child(n+5){grid-column:span 4}
.sm-room__thumbs img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:opacity .4s var(--sm-ease)}
.sm-room__thumbs a:nth-child(n+5) img{aspect-ratio:16/9}
.sm-room__thumbs a:hover img{opacity:.82}
.sm-room__text{max-width:30rem}
.sm-room__text .sm-numeral{font-size:clamp(3.6rem,6vw,6rem);margin:0 0 1.25rem;display:block}
/* Each fact draws the line on its left; the list is pulled left by the padding and clips, so the
   first fact of every row - also after a wrap - shows no line in front of it. */
.sm-room__facts{display:flex;flex-wrap:wrap;row-gap:.65rem;overflow:hidden;margin:1.4rem 0 1.6rem -1rem;font-family:var(--sm-sans);font-weight:500;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sm-stone)}
.sm-room__facts li{margin-left:-1px;padding:.12rem 1rem;border-left:1px solid var(--sm-line-strong);line-height:1.2}
.sm-price{display:flex;align-items:baseline;gap:.85rem;margin:2rem 0 0!important;padding-top:1.6rem;border-top:1px solid var(--sm-line)}
.sm-price__amount{font-family:var(--sm-serif);font-weight:400;font-size:clamp(2.3rem,3vw,2.9rem);line-height:1;color:var(--sm-ink)}
.sm-price__unit{font-family:var(--sm-sans);font-weight:500;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sm-stone)}
.sm-room .sm-actions{margin-top:2rem}
@media (max-width:991.98px){
  .sm-room__grid,.sm-room--flip .sm-room__grid{grid-template-columns:1fr}
  .sm-room--flip .sm-room__media{order:0}
  .sm-room__text{max-width:none}
}

/* 15. Village page */
.sm-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem clamp(2rem,4vw,4rem)}
.sm-columns>div{padding-top:1.75rem;border-top:1px solid var(--sm-line-strong)}
.sm-columns h3{margin-bottom:1rem}
@media (max-width:991.98px){.sm-columns{grid-template-columns:1fr}}
.sm-twocol{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:2.5rem clamp(3rem,8vw,8rem)}
.sm-twocol__text{max-width:38rem}
.sm-twocol__text .sm-lead{margin-bottom:1.5em}
@media (max-width:991.98px){.sm-twocol{grid-template-columns:1fr}}
.sm-mosaic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2.25rem 1rem}
.sm-mosaic li{grid-column:span 4;--h:clamp(12rem,20vw,18.5rem)}
.sm-mosaic li:nth-child(1),.sm-mosaic li:nth-child(7){grid-column:span 7;--h:clamp(15rem,32vw,29rem)}
.sm-mosaic li:nth-child(2),.sm-mosaic li:nth-child(6){grid-column:span 5;--h:clamp(15rem,32vw,29rem)}
.sm-mosaic li:nth-child(8){grid-column:span 12;--h:clamp(15rem,36vw,33rem)}
.sm-mosaic a{display:block;overflow:hidden;cursor:zoom-in;background:var(--sm-linen)}
.sm-mosaic img{width:100%;height:var(--h);object-fit:cover;transition:transform 1.4s var(--sm-ease)}
.sm-mosaic a:hover img{transform:scale(1.02)}
@media (max-width:991.98px){.sm-mosaic li:nth-child(n){grid-column:span 12;--h:auto}.sm-mosaic img{height:auto;aspect-ratio:3/2}}

/* 16. Dining */
.sm-places{border-top:1px solid var(--sm-line)}
.sm-place{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:2rem clamp(2.5rem,6vw,6rem);padding-block:clamp(2.75rem,5vw,4.5rem);border-bottom:1px solid var(--sm-line);align-items:start}
.sm-place img{width:100%;max-width:26rem;aspect-ratio:4/3;object-fit:cover;background:#fff}
.sm-place .sm-meta{display:block;margin:.85rem 0 1.4rem}
.sm-place p{max-width:38rem}
.sm-place .sm-link{margin-top:1.5rem}
@media (max-width:767.98px){.sm-place{grid-template-columns:1fr}.sm-place img{max-width:20rem}}

/* 17. Contact */
.sm-contact{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:3rem clamp(3rem,8vw,8rem);align-items:start}
.sm-contact__media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.sm-details{margin:2.75rem 0 0;display:grid;gap:1.9rem}
.sm-details dt{font-family:var(--sm-sans);font-weight:500;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sm-stone);margin-bottom:.45rem}
.sm-details dd{margin:0;font-family:var(--sm-serif);font-size:1.6rem;line-height:1.35;color:var(--sm-ink)}
.sm-details dd a{text-decoration:none;border-bottom:1px solid var(--sm-gold)}
.sm-details dd a:hover{color:var(--sm-gold-deep)}
.sm-details .sm-link{font-family:var(--sm-sans);margin-top:.8rem}
@media (max-width:991.98px){.sm-contact{grid-template-columns:1fr}.sm-contact__media{order:-1}.sm-contact__media img{aspect-ratio:3/2}}
.sm-arrival{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:clamp(3rem,6vw,4.5rem)}
.sm-arrival img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media (max-width:767.98px){.sm-arrival{grid-template-columns:1fr 1fr}}

.sm-form{display:grid;grid-template-columns:1fr 1fr;gap:2rem 2.5rem;margin-top:clamp(2.5rem,5vw,3.5rem)}
.sm-field{display:grid;gap:.5rem;min-width:0}
.sm-field--full{grid-column:1 / -1}
.sm-field label{font-family:var(--sm-sans);font-weight:500;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sm-stone)}
.sm-field :is(input,select,textarea){
  width:100%;min-width:0;border:0;border-bottom:1px solid var(--sm-line-strong);border-radius:0;background:transparent;
  padding:.65rem 0;font-family:var(--sm-sans);font-size:1.05rem;font-weight:400;color:var(--sm-ink);transition:border-color .25s var(--sm-ease)
}
.sm-field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237c5e33' stroke-width='1.2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .25rem center;padding-right:1.75rem}
.sm-field textarea{min-height:7.5rem;resize:vertical}
.sm-field :is(input,select,textarea):focus{outline:none;border-bottom-color:var(--sm-gold-deep)}
.sm-form__foot{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem 2rem;margin-top:.5rem}
.sm-form__note{grid-column:1 / -1;font-size:.9rem;color:var(--sm-stone);margin:0}
.sm-form__note a{color:var(--sm-ink);text-decoration:none;border-bottom:1px solid var(--sm-gold)}
.sm-form__note a:hover{color:var(--sm-gold-deep);border-color:var(--sm-gold-deep)}
@media (max-width:575.98px){.sm-form{grid-template-columns:1fr}}
/* The booking form (site.js): the rooms of the dates with their prices, the price of the stay,
   the answer. Offline (no booking module) the e-mail, telephone and second WhatsApp link stay hidden. */
.sm-booking:not(.is-online) [data-sm-online]{display:none}
.sm-booking__rooms{grid-column:1 / -1;min-width:0;margin:0;padding:0;border:0}
.sm-booking__rooms legend{float:left;width:100%;margin:0 0 .75rem;padding:0;font-family:var(--sm-sans);font-weight:500;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sm-stone)}
.sm-booking__status{clear:both;margin:0 0 1.1rem;font-size:.98rem;line-height:1.6;color:var(--sm-ink-soft)}
.sm-booking__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--sm-line)}
.sm-booking__room{border-bottom:1px solid var(--sm-line)}
.sm-booking__room label{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"box name price" "box about price";column-gap:1.25rem;row-gap:.15rem;align-items:center;padding:1.1rem .5rem;cursor:pointer;transition:background-color .25s var(--sm-ease)}
.sm-booking__room input{grid-area:box;width:1.15rem;height:1.15rem;margin:0;accent-color:var(--sm-ink);cursor:pointer}
.sm-booking__name{grid-area:name;font-family:var(--sm-serif);font-size:clamp(1.35rem,1.7vw,1.65rem);line-height:1.15;color:var(--sm-ink)}
.sm-booking__about{grid-area:about;font-size:.9rem;line-height:1.5;color:var(--sm-stone)}
.sm-booking__price{grid-area:price;font-family:var(--sm-serif);font-size:1.3rem;line-height:1.2;color:var(--sm-ink);text-align:right;white-space:nowrap}
.sm-booking__room label:hover{background:rgba(168,132,79,.06)}
.sm-booking__room:has(input:checked) label{background:rgba(168,132,79,.12)}
.sm-booking__room.is-taken label{cursor:not-allowed;background:none}
.sm-booking__room.is-taken :is(.sm-booking__name,.sm-booking__about){opacity:.45}
.sm-booking__room.is-taken .sm-booking__price{font-family:var(--sm-sans);font-weight:500;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sm-stone)}
.sm-booking__children{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 2.25rem;margin-top:-1rem}
.sm-booking__hint{margin:0;font-size:.92rem;line-height:1.6;color:var(--sm-stone)}
.sm-booking__cot{display:inline-flex;align-items:center;gap:.65rem;font-size:.98rem;color:var(--sm-ink);cursor:pointer}
.sm-booking__cot[hidden]{display:none}
.sm-booking__cot input{width:1.15rem;height:1.15rem;margin:0;accent-color:var(--sm-ink);cursor:pointer}
.sm-booking__sum{margin:1.35rem 0 0;font-family:var(--sm-serif);font-size:1.45rem;line-height:1.35;color:var(--sm-ink)}
.sm-booking__trap{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.sm-booking__error{grid-column:1 / -1;margin:0;padding:.9rem 1.1rem;border-left:2px solid #9b3b2a;background:rgba(155,59,42,.07);color:#6f2a1e;font-size:.98rem;line-height:1.6}
.sm-booking__done{max-width:44rem;margin-top:clamp(2.5rem,5vw,3.5rem)}
.sm-booking__done:focus{outline:none}
.sm-booking__done .sm-lead{margin:1.4rem 0 0}
.sm-booking__after{margin:2.25rem 0 0;font-size:.95rem;color:var(--sm-stone)}
@media (max-width:575.98px){
  .sm-booking__room label{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"box name" "box about" "box price"}
  .sm-booking__price{margin-top:.25rem;font-size:1.15rem;text-align:left}
}

/* 18. Lightbox and film */
.sm-lightbox{position:fixed;inset:0;z-index:2000;display:grid;grid-template-rows:1fr auto;place-items:center;padding:4.5rem clamp(1rem,7vw,6rem) 1.75rem;background:#14110f;color:var(--sm-ivory);font-family:var(--sm-sans)}
.sm-lightbox[hidden]{display:none}
.sm-lightbox__stage{width:100%;height:100%;min-height:0;display:grid;place-items:center}
.sm-lightbox__stage img{max-width:100%;max-height:calc(100vh - 9.5rem);width:auto;height:auto;object-fit:contain}
.sm-lightbox__stage video{width:min(100%,calc((100vh - 9.5rem) * 16 / 9));aspect-ratio:16/9;height:auto;background:#000}
.sm-lightbox__caption{margin-top:1.1rem;font-size:.82rem;letter-spacing:.06em;color:rgba(248,245,239,.72);text-align:center}
.sm-lightbox>button{position:absolute;display:grid;place-items:center;width:3rem;height:3rem;padding:0;border:0;background:none;color:inherit;cursor:pointer;opacity:.78;transition:opacity .2s}
.sm-lightbox>button:hover{opacity:1}
.sm-lightbox>button[hidden]{display:none}
.sm-lightbox>button svg{width:1.75rem;height:1.75rem;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.sm-lightbox__close{top:1rem;right:1rem}
.sm-lightbox__prev{left:.75rem;top:50%;transform:translateY(-50%)}
.sm-lightbox__next{right:.75rem;top:50%;transform:translateY(-50%)}
.sm-lightbox :focus-visible{outline:1px solid var(--sm-gold-light);outline-offset:3px}
@media (max-width:575.98px){
  .sm-lightbox{padding:4rem .75rem 4.5rem}
  .sm-lightbox__prev,.sm-lightbox__next{top:auto;bottom:.75rem;transform:none}
}
/* While the viewer is open, the page behind it stays where it is. */
html.sm-locked,html.sm-locked body{overflow:hidden}

/* 19. Legal pages: a quiet reading layout, the contents beside the text */
.sm-legal{--sm-legal-gap:clamp(3rem,8vw,9rem);padding-block:clamp(4.5rem,9vw,8rem) clamp(5rem,10vw,9rem)}
.sm-legal__head{max-width:calc(15rem + var(--sm-legal-gap) + 42rem);padding-bottom:clamp(2.5rem,5vw,4rem);margin-bottom:clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--sm-line)}
.sm-legal__head .sm-lead{max-width:40rem;margin-top:1.75rem}
.sm-legal__updated{margin:1.5rem 0 0;font-size:.92rem;color:var(--sm-stone)}
.sm-legal__grid{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,42rem);gap:2.5rem var(--sm-legal-gap);align-items:start}
.sm-legal__toc{position:sticky;top:calc(var(--sm-nav-h) + 2.5rem);font-size:.95rem;line-height:1.5}
.sm-legal__toc ul{display:grid;gap:.85rem;border-left:1px solid var(--sm-line);padding-left:1.25rem}
.sm-legal__toc a{color:var(--sm-stone);text-decoration:none;transition:color .2s var(--sm-ease)}
.sm-legal__toc a:hover{color:var(--sm-gold-deep)}
.sm-legal__body>section+section{margin-top:clamp(3rem,5vw,4.25rem)}
.sm-legal__h2{font-family:var(--sm-serif);font-weight:500;font-size:clamp(1.65rem,2.1vw,2.1rem);line-height:1.2;margin:0 0 1.1rem}
.sm-legal__h3{font-family:var(--sm-sans);font-weight:500;font-size:1.0625rem;line-height:1.5;letter-spacing:0;color:var(--sm-ink);margin:1.9rem 0 .5rem}
.sm-legal__body a{color:var(--sm-ink);text-decoration:none;border-bottom:1px solid var(--sm-gold);overflow-wrap:anywhere;transition:color .2s var(--sm-ease),border-color .2s var(--sm-ease)}
.sm-legal__body a:hover{color:var(--sm-gold-deep);border-color:var(--sm-gold-deep)}
.sm-legal__body ul{margin:0 0 1.15em;display:grid;gap:.5rem}
.sm-legal__body ul li{position:relative;padding-left:1.5rem}
.sm-legal__body ul li::before{content:"";position:absolute;left:0;top:.92em;width:.7rem;height:1px;background:var(--sm-gold)}
.sm-legal__facts{display:grid;margin:1.75rem 0 1.15em;border-top:1px solid var(--sm-line)}
.sm-legal__facts>div{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:.2rem 2rem;padding:1rem 0;border-bottom:1px solid var(--sm-line)}
.sm-legal__facts dt{font-weight:500;font-size:.92rem;line-height:1.75;color:var(--sm-stone)}
.sm-legal__facts dd{margin:0;line-height:1.75;color:var(--sm-ink)}
.sm-legal__scroll{overflow-x:auto;margin:1.5rem 0 1.15em}
.sm-legal__table{width:100%;min-width:20rem;border-collapse:collapse;font-size:.95rem;line-height:1.6}
.sm-legal__table th{font-weight:500;color:var(--sm-stone);text-align:left;padding:.6rem 1.25rem .6rem 0;border-bottom:1px solid var(--sm-line-strong)}
.sm-legal__table td{padding:.8rem 1.25rem .8rem 0;border-bottom:1px solid var(--sm-line);vertical-align:top;color:var(--sm-ink);overflow-wrap:anywhere}
@media (max-width:991.98px){
  .sm-legal__grid{grid-template-columns:minmax(0,1fr)}
  .sm-legal__toc{position:static}
}
@media (max-width:575.98px){
  .sm-legal__facts>div{grid-template-columns:minmax(0,1fr)}
}

/* A draft's placeholders and its note. Each highlighted field is replaced before the page is
   published; the note goes with them. */
.sm-todo{background:rgba(205,171,116,.3);color:var(--sm-ink);padding:.05em .3em;border-bottom:1px dashed var(--sm-gold-deep);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sm-draft{margin:0 0 clamp(2.5rem,5vw,3.5rem);padding:1.4rem 1.6rem;border:1px dashed var(--sm-gold-deep);background:var(--sm-linen);font-size:.95rem;line-height:1.7}
.sm-draft__title{font-family:var(--sm-serif);font-weight:500;font-size:1.4rem;line-height:1.3;color:var(--sm-ink);margin:0 0 .5rem}
.sm-draft ul{display:grid;gap:.35rem;margin:.75rem 0 0}
.sm-draft ul li{position:relative;padding-left:1.25rem}
.sm-draft ul li::before{content:"";position:absolute;left:0;top:.85em;width:.55rem;height:1px;background:var(--sm-gold-deep)}

/* 20. Motion preferences */
@media (prefers-reduced-motion:reduce){
  .sm-page *,.sm-page *::before,.sm-page *::after{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.001s!important}
}

/* 21. Motion as the page scrolls (site.js, initMotion): only under .sm-motion on <html>, which the
   script sets unless the visitor asks for less motion, and only for what was out of sight when the
   page opened. Headings rise word by word out of a mask, leads and marked blocks rise and fade in,
   a marked picture opens from the bottom, and a picture in a data-sm-parallax frame drifts against
   the scroll (--sm-py), enlarged by --sm-ps so that no edge shows. The hero's pictures stay behind
   as the page scrolls on (--sm-hy), and on wide screens its text fades (--sm-hp, 0 to 1). */
.sm-motion .sm-word{display:inline-block;clip-path:inset(-.3em -.35em -.35em -.35em)}
.sm-motion .sm-word__in{display:inline-block;translate:0 150%;transition:translate 1.2s var(--sm-ease);transition-delay:calc(var(--sm-i,0) * 55ms)}
.sm-motion .sm-words.is-in .sm-word__in{translate:0 0}
.sm-motion .sm-reveal{opacity:0;translate:0 1.75rem;transition:opacity 1.2s var(--sm-ease),translate 1.3s var(--sm-ease);transition-delay:calc(var(--sm-i,0) * 110ms)}
.sm-motion .sm-reveal.is-in{opacity:1;translate:0 0}
.sm-motion .sm-unveil{clip-path:inset(100% 0 0 0);transition:clip-path 1.6s var(--sm-ease)}
.sm-motion .sm-unveil.is-in{clip-path:inset(0 0 0 0)}
.sm-motion [data-sm-parallax] img{translate:0 var(--sm-py,0px);scale:var(--sm-ps,1.2)}
.sm-motion .sm-hero>.sm-hero__img,.sm-motion .sm-hero__slides>*{translate:0 var(--sm-hy,0px)}
@media (min-width:992px){.sm-motion .sm-hero__content{opacity:calc(1 - var(--sm-hp,0) * 1.1);translate:0 calc(var(--sm-hp,0) * -2.5rem)}}