/* base tokens */
/* =====================================================================
 * tokens.css — global CSS custom properties (design tokens).
 * =====================================================================
 *
 * These are the variables every styled component reads via `var(...)`.
 * Defaults here are NEUTRAL — every hotel's specific palette comes
 * from its brand record, applied at runtime when the brand store
 * resolves.
 *
 * Future agents:
 *   · Add a new token here only if it's used across multiple
 *     components. Single-component values stay scoped to that
 *     component's <style scoped>.
 *   · Token names follow `--site-<group>-<role>` (e.g.
 *     `--site-color-fg`, `--site-radius-md`). Stable so brand-
 *     application logic can map onto them deterministically.
 *   · The brand store doesn't yet write into these — that wiring
 *     gets added when the first styled section lands.
 */
:root {
  /* The token NAMES match what services/theme.js writes. Defaults
     here are neutral — every hotel's actual palette comes from its
     brand record at runtime. */
  --site-color-bg:        #fbf9f5;
  --site-color-bg-rgb:    251, 249, 245;  /* used for translucent overlays */
  --site-color-fg:        #1a1815;
  --site-color-fg-muted:  #6b665e;
  --site-color-accent:    #1a1815;
  --site-color-accent-fg: #fbf9f5;
  --site-color-border:    #e3ddd2;

  --site-font-display: system-ui, -apple-system, sans-serif;
  --site-font-body:    system-ui, -apple-system, sans-serif;

  --site-radius-sm:    2px;
  --site-radius-md:    6px;
  --site-radius-lg:    14px;

  /* COOKIE NOTICE tokens — what a GROUP's shared notice is drawn with. Follows
     the fallback chain of the SDK's own notice (components/consent/consent.css),
     so a shared notice and the settings panel it opens match on every hotel. */
  --site-notice-bg:           var(--consent-bg, var(--site-color-surface, var(--site-color-bg)));
  --site-notice-fg:           var(--consent-fg, var(--site-color-fg));
  --site-notice-muted:        color-mix(in srgb, var(--site-notice-fg) 68%, transparent);
  --site-notice-accent:       var(--consent-accent, var(--site-color-accent, var(--site-notice-fg)));
  --site-notice-on-accent:    var(--consent-on-accent, var(--site-color-on-accent, var(--site-notice-bg)));
  --site-notice-rule:         color-mix(in srgb, var(--site-notice-fg) 14%, transparent);
  --site-notice-radius:       var(--consent-radius, var(--site-radius, 14px));
  --site-notice-font-display: var(--site-font-display);
  --site-notice-font-body:    var(--site-font-body);

  /* FOOTER tokens — the surface a GROUP's shared footer is drawn with
     (settings `shared_components`). One footer is written once and linked to
     every site of a group, so it may read nothing a theme invents for itself
     (`--hdt-*`, `--bab-*`, literal hex) — only these. Each falls back to the
     site's general palette and type, so a theme that sets none of them still
     gets a footer in its own colours; a theme that wants its footer ground or
     link colour exact sets the token in its own `tokens.css`. */
  --site-footer-bg:           var(--site-color-fg);
  --site-footer-fg:           var(--site-color-bg);
  --site-footer-muted:        color-mix(in srgb, var(--site-footer-fg) 68%, transparent);
  --site-footer-link:         var(--site-footer-fg);
  --site-footer-accent:       var(--site-color-accent);
  --site-footer-rule:         color-mix(in srgb, var(--site-footer-fg) 18%, transparent);
  --site-footer-font-display: var(--site-font-display);
  --site-footer-font-body:    var(--site-font-body);
  --site-footer-logo-h:       44px;
  /* A texture laid behind the footer (a shared footer's `ground` media): how
     strongly it shows, and the size one tile is drawn at. */
  --site-footer-texture-opacity: 0.18;
  --site-footer-texture-size:    480px;

  /* ⚠️ A SEED, NOT A MEASUREMENT. `App.vue` measures the real bar after mount
     and overwrites this on :root, along with `--site-header-reserve` — what
     the shell actually pads by, which is 0 for a bar in flow. Kept only so
     rules that read it before first measurement have a sane number. */
  --site-header-h:     76px;
  --site-header-reserve: 0px;

  /* ===================================================================
   * STRUCTURAL tokens — the theme's visual RHYTHM, not just its palette.
   * ===================================================================
   *
   * These extend the stable `--site-*` surface beyond colour/font/radius
   * so the LOCKED booking pages (BookView / CheckoutView / Confirmation)
   * can inherit a theme's FULL visual language — type scale, spacing,
   * elevation, and motion — instead of looking like a generic recolour.
   *
   * Defaults here are deliberately NEUTRAL (a clean, calm shell). Each
   * generated theme's `theme/tokens.css` MAPS its bespoke scale onto
   * these names (see the design-tokens skill) so the booking surface
   * picks up the same rhythm as the rest of the site. Setting these is
   * additive + backward-compatible: a theme that sets none of them still
   * renders correctly on the neutral defaults below.
   *
   * As with colours, the names are STABLE so theme-application logic can
   * map onto them deterministically.
   */

  /* --- Type scale ---------------------------------------------------
   * Display sizes for hero/section headings, body sizes for prose +
   * controls. Fluid `clamp()` so the neutral shell reads well at any
   * width; a theme overrides with its own step ladder. */
  --site-font-size-display-xl: clamp(2.25rem, 5vw, 3.5rem);
  --site-font-size-display-lg: clamp(1.75rem, 3.5vw, 2.5rem);
  --site-font-size-display-md: clamp(1.25rem, 2vw, 1.5rem);
  --site-font-size-body-lg:    1.0625rem;
  --site-font-size-body:       0.9375rem;
  --site-font-size-body-sm:    0.8125rem;

  --site-line-height-display:  1.1;
  --site-line-height-body:     1.55;

  --site-letter-spacing-tight:  -0.01em;
  --site-letter-spacing-normal: 0;

  /* --- Spacing ladder ----------------------------------------------
   * A geometric-ish step used for gaps, padding, and rhythm. Themes
   * remap to their own gutter/section scale. */
  --site-space-xs: 0.5rem;
  --site-space-sm: 0.75rem;
  --site-space-md: 1.25rem;
  --site-space-lg: 2rem;
  --site-space-xl: 3rem;

  /* --- Elevation ----------------------------------------------------
   * Soft, neutral shadows. Themes supply brand-tinted equivalents. */
  --site-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --site-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.10);

  /* --- Motion -------------------------------------------------------
   * One easing + one base duration the locked pages reach for on
   * transitions. Themes set their committed curve/timing here so the
   * booking surface moves with the same feel as the rest of the site. */
  --site-ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --site-duration: 240ms;

  /* --- Legacy / alternate token vocabulary (backward-compat) --------
   * Some generated themes' components were authored against an older
   * --site-* naming scheme — a NUMERIC spacing scale (--site-space-1..6)
   * and --site-text-*/--site-track-*/--site-leading-*/--site-dur-* names —
   * rather than the named scale above. When a component reaches for a name
   * not defined anywhere, that custom property resolves to NOTHING and the
   * declaration is dropped (e.g. `gap: clamp(var(--site-space-3),…)` becomes
   * `normal` → a nav with no spacing; `font-size: var(--site-text-h1)` falls
   * back to 16px → collapsed type). Aliasing the legacy names onto the canonical
   * tokens here — the always-loaded base — keeps EVERY component resolving
   * regardless of which vocabulary it was generated against. Purely additive;
   * themes built on the named scale are unaffected. */
  --site-space-1: var(--site-space-xs);
  --site-space-2: var(--site-space-sm);
  --site-space-3: var(--site-space-md);
  --site-space-4: var(--site-space-lg);
  --site-space-5: var(--site-space-xl);
  --site-space-6: var(--site-space-xl);

  --site-text-hero:    var(--site-font-size-display-xl);
  --site-text-display: var(--site-font-size-display-xl);
  --site-text-h1:      var(--site-font-size-display-lg);
  --site-text-h2:      var(--site-font-size-display-md);
  --site-text-h3:      var(--site-font-size-display-md);
  --site-text-lead:    var(--site-font-size-body-lg);
  --site-text-body:    var(--site-font-size-body);
  --site-text-strong:  var(--site-font-size-body);
  --site-text-muted:   var(--site-font-size-body);
  --site-text-sm:      var(--site-font-size-body-sm);
  --site-text-label:   var(--site-font-size-body-sm);
  --site-text-caption: var(--site-font-size-body-sm);
  --site-text-micro:   var(--site-font-size-body-sm);

  --site-leading-tight: var(--site-line-height-display);
  --site-leading-snug:  1.25;
  --site-leading-body:  var(--site-line-height-body);

  --site-track-tight: var(--site-letter-spacing-tight);
  --site-track-caps:  0.08em;
  --site-track-label: 0.12em;
  --site-track-cta:   0.04em;
  --site-track-wide:  0.16em;

  --site-dur-fast: 160ms;
  --site-dur-base: var(--site-duration);
  --site-dur-slow: 420ms;

  --site-radius-none: 0;
  --site-radius-xs:   3px;
  --site-bar-h:       var(--site-header-h);
  --site-max:         1200px;
  --site-hairline-w:  1px;
}

/* =====================================================================
 *  Base typography wiring.
 *
 *  Every visible character on the site reads its font through these
 *  cascaded rules — so flipping `--site-font-*` (which the brand
 *  store does at runtime) instantly changes the font everywhere
 *  without component-by-component overrides.
 *
 *    body, p, button, input, select, textarea  →  --site-font-body
 *    h1..h4                                    →  --site-font-display
 *
 *  Components that want to OPT INTO display type for non-heading
 *  text should add `font-family: var(--site-font-display)` on the
 *  relevant selector (e.g. drawer links). Components that want a
 *  different family for ONE element can override locally. The rule
 *  below establishes the right defaults so ad-hoc overrides are
 *  rare.
 * ===================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body, #app { margin: 0; padding: 0; min-height: 100%; }

body {
  background: var(--site-color-bg);
  color: var(--site-color-fg);
  font-family: var(--site-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings always pull from the display family (Bebas Neue / Fraunces /
   etc., depending on the hotel). If a hotelier picks the same family
   for both display + body, the variable resolves the same way and
   nothing visually changes. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--site-font-display);
  margin: 0;
}

/* Form controls don't inherit font-family by default — wire them
   explicitly so brand fonts apply to inputs, buttons, etc. */
button, input, select, textarea { font: inherit; }

img, video, svg { max-width: 100%; display: block; }
img, video { height: auto; }

/* Preserve author line breaks in CMS prose.
 *
 * Room / amenity / event descriptions, summaries, "the space", etc. are
 * entered in dashboard textareas where newlines are meaningful. HTML's
 * default `white-space: normal` collapses those newlines into spaces, so
 * paragraph breaks the hotelier typed vanished on the live site.
 *
 * `pre-line` behaves EXACTLY like `normal` (collapses runs of spaces,
 * wraps long lines) except it keeps newlines — so this is a no-op for
 * any text without literal line breaks (price rows, labels, button text)
 * and only restores breaks in author-entered prose. Vue's template
 * compiler condenses static whitespace, so the only newlines reaching a
 * text node come from interpolated data — exactly what we want to keep.
 *
 * Scoped to prose-bearing elements (paragraphs + the SDK/theme prose
 * class roles). Components that pin their own white-space (nowrap on
 * price chips, pre-wrap elsewhere) load after this and win. */
p,
[class*="__prose"],
[class*="__description"],
[class*="__lede"],
[class*="__summary"],
[class*="__highlight-body"] {
  white-space: pre-line;
}

a { color: inherit; text-decoration: none; }

/* Minimal global reset so the empty homepage doesn't show a blank
   white page with default browser margins. Section components are
   responsible for their own spacing and type — keep this lean. */
*,
*::before,
*::after { box-sizing: border-box; }
html, body, #app { margin: 0; padding: 0; min-height: 100%; }
html.seo-hub body { background: var(--site-color-bg); }
body {
  background: var(--site-bg);
  color: var(--site-fg);
  font-family: var(--site-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* theme tokens */
/* composed: design-graph tokens (base + palette + type) */
/* legacy base (pre-graph tokens.css) — graph parts override below */
/* theme/tokens.css — Maison Felix anchor tokens.
 * Loads AFTER the SDK base tokens to win the cascade.
 * bg/fg/accent + both font families are LOCKED by the hotelier.
 * A deterministic pass refines this layer downstream.
 */
:root {
  /* Palette — brand couleurs (RAL 8022 / 1013 / 2010 / 6034 / 8004) */
  --site-color-bg: #e5e0d4;
  --site-color-fg: #4f4339;
  --site-color-accent: #d38755;
  --site-color-muted: #94836b;
  --site-color-border: #d2c8b2;

  /* Derived surfaces */
  --site-color-surface: #ece8dd;        /* card lift on the pearl field */
  --site-color-fg-deep: #2a1c13;        /* darkened ink for dark bands / footer */
  --site-color-accent-soft: #ead0b8;    /* accent tint for fills/hovers */
  --site-color-on-dark: #e5e0d4;        /* text on fg-colored surfaces */

  /* Type — LOCKED families */
  --site-font-heading: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --site-font-body: "EB Garamond", Georgia, serif;

  --site-type-body-size: 17px;
  --site-type-body-leading: 1.65;
  --site-type-label-size: 12px;
  --site-type-label-tracking: 0.18em;   /* tracked-out caps eyebrows */
  --site-type-display-weight: 400;      /* never bold; drama via scale */
  --site-type-scale-ratio: 1.333;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 144px;

  /* Layout & shape */
  --site-max-width: 960px;
  --site-radius: 2px;                   /* near-square; splits meet with zero gap */
  --site-rule: 1px solid var(--site-color-border);

  /* Motion — whispers, never performs */
  --motion-reveal-duration: 600ms;
  --motion-reveal-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --motion-reveal-rise: 20px;
}

/* [preview] baseline motion tokens (brand book omitted these — keeps reveal animations from hiding content) */
:root {
  --site-duration-reveal: 700ms;
  --site-duration-slow: 600ms;
  --site-duration: 320ms;
  --site-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --site-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --site-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --site-stagger: 80ms;
  --site-reveal-distance: 24px;
}

/* ============================================================
   Maison Felix — Palette Variant 1
   "Linen Ground, Burnished Lead"
   Cream-linen paper ground · taupe-grey ink & panels ·
   burnt-orange as brass hairlines, rules and underscores.
   Warmly formal, archival, leather-bound-journal luxury.
   Brand core (locked): bg #f3efeb · fg #645a54 · accent #d58a5d
                        muted #9a8b7f · border #e1d7cc
   ============================================================ */

:root {
  /* ---------- Ground · the breathing linen paper (≈57%) ---------- */
  --site-color-bg:              #e5e0d4;  /* brand bg — blanc perlé (RAL 1013) */
  --site-color-bg-warm:         #ded6c6;  /* sun-touched linen, alternate bands */
  --site-color-bg-deep:         #d6ccb8;  /* shaded margin of the page */
  --site-color-surface:         #ece8dd;  /* raised card on the linen */
  --site-color-surface-raised:  #f2efe7;  /* lightest leaf — modals, inputs */
  --site-color-surface-sunken:  #d9d0bd;  /* inset wells, quote plates */

  /* ---------- Ink · noir brun rising from the paper (≈27%) ---------- */
  --site-color-fg:              #4f4339;  /* dominant reading ink — noir brun, lifted */
  --site-color-ink:             #4f4339;  /* alias: primary reading ink */
  --site-color-ink-strong:      #3d3026;  /* display headlines, wordmark weight */
  --site-color-ink-deep:        #2a1c13;  /* brand noir brun (RAL 8022) — footer ground */
  --site-color-ink-soft:        #6b5a49;  /* secondary copy, long-form captions */
  --site-color-primary:         #4f4339;  /* primary role = the lead ink itself */
  --site-color-primary-hover:   #3f3225;  /* pressed / hover on dark panels & buttons */
  --site-color-primary-tint:    #d9d1c1;  /* whisper of ink laid over linen */

  /* ---------- On-dark · type set into the noir-brun panels ---------- */
  --site-color-on-primary:      #e5e0d4;  /* brand pearl glows as ink on dark ground */
  --site-color-on-primary-soft: #d2c9b6;  /* secondary type on dark panels */
  --site-color-on-primary-faint:#ab9e87;  /* metadata, folio numbers on dark */

  /* ---------- Accent · orange signal, precise and unmissable (≈16%) ---------- */
  --site-color-accent:          #d38755;  /* brand accent — orange signal (RAL 2010) */
  --site-color-accent-strong:   #bf7040;  /* hover state, link underlines engaged */
  --site-color-accent-deep:     #8c543c;  /* brun cuivré (RAL 8004) — accent text (AA) */
  --site-color-accent-soft:     #e0ac85;  /* brass catching light on dark panels */
  --site-color-accent-tint:     #eed9c4;  /* accent wash — highlighted rows, tags */
  --site-color-accent-faint:    #ebdcc9;  /* barely-there brass glow behind ornaments */
  --site-color-on-accent:       #2a1c13;  /* ink set on accent fills */

  /* ---------- Muted & structure · the archival apparatus ---------- */
  --site-color-muted:           #64533f;  /* brand muted — captions, eyebrows, folio type.
                                             Darkest-warm tone that clears 4.5:1 on EVERY
                                             light ground (page 5.6, surface-sunken 4.8);
                                             quietness comes from size + tracking. */
  --site-color-muted-strong:    #5c4c39;  /* one step above muted, still shy of fg */
  --site-color-border:          #d2c8b2;  /* default hairline on pearl linen */
  --site-color-border-strong:   #bdb097;  /* card edges, table rules */
  --site-color-border-faint:    #d9d0bd;  /* whisper dividers inside sections */
  --site-color-border-dark:     #6e5d4a;  /* hairlines on dark panels */
  --site-color-rule-accent:     #d38755;  /* the brass rule — section splitters, underscores */

  /* ---------- Interaction states ---------- */
  --site-color-link:            #8c543c;  /* inline links, brun cuivré */
  --site-color-link-hover:      #bf7040;
  --site-color-focus-ring:      #d38755;  /* focus outline, brand accent verbatim */
  --site-color-selection-bg:    #e0ac85;
  --site-color-selection-fg:    #2a1c13;
  --site-color-hover-wash:      #d9d0bd;  /* row / nav-item hover on linen */
  --site-color-active-wash:     #d9d1c1;

  /* ---------- Overlays & scrims (over palm-loop video, hero imagery) ---------- */
  --site-color-scrim:           rgba(42, 28, 19, 0.55);   /* noir-brun veil over video */
  --site-color-scrim-soft:      rgba(79, 67, 57, 0.35);   /* brand fg as gauze */
  --site-color-scrim-linen:     rgba(229, 224, 212, 0.82);/* pearl wash for text-safe panels */
  --site-color-shadow:          rgba(61, 48, 38, 0.14);   /* warm brown shadow, never grey */
  --site-color-shadow-deep:     rgba(42, 28, 19, 0.24);

  /* ---------- Semantic roles · kept archival, never neon ---------- */
  --site-color-success:         #6f7f5a;  /* dried-olive — confirmations */
  --site-color-success-tint:    #e3e7d6;
  --site-color-warning:         #b98a3e;  /* aged brass — notices */
  --site-color-warning-tint:    #eee2c9;
  --site-color-danger:          #8c543c;  /* brun cuivré sealing-wax — errors */
  --site-color-danger-tint:     #efdcd0;
  --site-color-info:            #3f6570;  /* deep turquoise (from pastel a5cad0) — notes */
  --site-color-info-tint:       #dcebee;  /* turquoise pastel wash */

  /* ---------- Inverted footer / colophon (the journal's back cover) ---------- */
  --site-color-footer-bg:       #2a1c13;
  --site-color-footer-fg:       #d2c9b6;
  --site-color-footer-accent:   #e0ac85;
  --site-color-footer-border:   #3d3026;
}

/* ============================================================
   Maison Felix — Typography Variant 2 · "Coastal Maximalism"
   Full-bleed serif drama on textured ground: perfect-fifth scale,
   italic Cormorant as sensory voice, compressed EB Garamond rhythm.
   ============================================================ */

:root {
  /* Families — locked brand faces */
  --site-font-display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --site-font-heading: var(--site-font-display);
  --site-font-body: "EB Garamond", Georgia, serif;
  --site-font-accent: var(--site-font-display);          /* italic poetry voice */
  --site-font-accent-style: italic;

  /* Scale — perfect fifth (1.5): headlines as bands, not lines */
  --site-type-scale-ratio: 1.5;
  --site-type-size-xs: 0.75rem;      /* 12px — eyebrows, folio */
  --site-type-size-sm: 0.875rem;     /* 14px — captions, meta */
  --site-type-size-base: 1.0625rem;  /* 17px — body */
  --site-type-size-md: 1.375rem;     /* 22px — lead, poetry italic */
  --site-type-size-lg: 2rem;         /* 32px — h3, card titles */
  --site-type-size-xl: 3rem;         /* 48px — h2 section bands */
  --site-type-size-2xl: 4.5rem;      /* 72px — h1 */
  --site-type-size-hero: clamp(3.25rem, 9.5vw, 7rem);  /* full-bleed reversed display */

  /* Weight & style contrast — display commits, body stays light */
  --site-type-display-weight: 600;   /* logotype-weight headlines on colour */
  --site-type-heading-weight: 500;
  --site-type-accent-weight: 500;    /* italic moments */
  --site-type-body-weight: 400;
  --site-type-strong-weight: 600;
  --site-type-label-weight: 500;

  /* Tracking — tight display, generous labels */
  --site-type-display-tracking: -0.015em;
  --site-type-heading-tracking: -0.005em;
  --site-type-accent-tracking: 0.01em;
  --site-type-body-tracking: 0.005em;
  --site-type-label-tracking: 0.24em;   /* wide caps riding on colour bands */
  --site-type-label-transform: uppercase;

  /* Rhythm — compressed body (1.5), tight sculpted display */
  --site-type-display-leading: 0.98;
  --site-type-heading-leading: 1.1;
  --site-type-accent-leading: 1.35;
  --site-type-body-size: 17px;
  --site-type-body-leading: 1.5;
  --site-type-label-size: 12px;
  --site-type-label-leading: 1.3;
  --site-type-measure: 58ch;
  --site-type-measure-narrow: 34ch;

  /* Ink on textured / colour grounds */
  --site-type-on-band: var(--site-color-on-dark, #f3efeb);  /* ivory reversed type */
  --site-type-body-muted: var(--site-color-muted, #9a8b7f);
  --site-type-body-soft: var(--site-color-accent-soft, #ecd3c0);

  /* Spacing — brand scale, band-first rhythm */
  --site-space-1: 4px;
  --site-space-2: 8px;
  --site-space-3: 16px;
  --site-space-4: 24px;
  --site-space-5: 40px;
  --site-space-6: 64px;
  --site-space-7: 96px;
  --site-space-8: 144px;
  --site-space-section: var(--site-space-8);   /* colour bands need air to read as fabric */
  --site-space-stack: var(--site-space-4);
  --site-space-heading-gap: var(--site-space-3);

  /* Motion — warm swell: fuller reveals, unhurried hovers */
  --site-motion-duration-fast: 220ms;
  --site-motion-duration: 420ms;
  --site-motion-duration-slow: 780ms;
  --site-motion-duration-reveal: 950ms;
  --site-motion-ease: cubic-bezier(0.33, 0, 0.18, 1);
  --site-motion-ease-out: cubic-bezier(0.19, 1, 0.28, 1);
  --site-motion-ease-drift: cubic-bezier(0.45, 0.05, 0.15, 0.95);  /* palm-shadow slow pans */
  --site-motion-reveal-distance: 32px;
  --site-motion-stagger: 110ms;

  /* Legacy motion aliases */
  --site-duration: var(--site-motion-duration);
  --site-duration-slow: var(--site-motion-duration-slow);
  --site-duration-reveal: var(--site-motion-duration-reveal);
  --site-ease: var(--site-motion-ease);
  --site-ease-out: var(--site-motion-ease-out);
  --site-ease-expo: var(--site-motion-ease-out);
  --site-stagger: var(--site-motion-stagger);
  --site-reveal-distance: var(--site-motion-reveal-distance);
}


/* brand */
/* themes/default/brand.css — baseline global finish layer.
 *
 * A few universal refinements that read as "finished" on any theme.
 * The v2 builder OVERWRITES this per-hotel with a richer, manifest-
 * derived layer (texture + editorial-fixture utilities). Exists so
 * `import '@theme/brand.css'` always resolves.
 */
/* ── BRAND COULEURS BRIDGE ──────────────────────────────────────────
   The runtime pins the brand record's five anchors as INLINE styles on
   <html>, and this workspace's token has no brand:write scope to update
   the record (still #f3efeb / #645a54 / #d58a5d). These !important
   declarations out-rank the non-important inline styles so the official
   palette (RAL 8022/1013/2010/6034/8004) renders. REMOVE this block once
   the brand record's colors are updated from the dashboard. */
:root {
  --site-color-bg: #e5e0d4 !important;
  --site-color-fg: #4f4339 !important;
  --site-color-accent: #d38755 !important;
  --site-color-on-accent: #2a1c13 !important;
  --site-color-fg-muted: #64533f !important;
  --a11y-focus: #d38755 !important;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
::selection {
  background: var(--site-color-accent);
  color: var(--site-color-accent-fg);
}
:focus-visible {
  outline: 2px solid var(--site-color-accent);
  outline-offset: 3px;
}


/* primitives */
/* ============================================================
   Maison Felix — button primitive
   "HAIRLINE RECTANGLE" · Quiet Largo, Miami Warm
   The button as an engraved plate: a radius-0 rectangle drawn
   in a single 1px ink hairline, serif caps at 13px / 0.05em,
   label centred. No lift, no shadow — on approach the plate
   simply FILLS and the label inverts. Primary is the deep
   sepia plate; secondary a paper plate in hairline; ghost
   drops the plate entirely and becomes the page CTA — a serif
   sentence-case text link over a 1px accent underscore.

   Public API (LAW — identical to installed):
   .site-btn  .site-btn--primary  .site-btn--secondary
   .site-btn--ghost  .site-btn--sm
   States: :hover  :focus-visible  :active  [disabled]  .is-loading
   Brand colour/type ONLY via var(--site-*) — never redefined.
   Scoped knobs are --site-btn-* (never --site-color-fg: the old
   cyclic self-reference made labels invisible; carried truth §9).

   ON DARK GROUNDS (photo bands, ink bands): the base hairline is
   sepia ink and WILL vanish. The consumer's scope must re-ink it —
   set on the button (or its wrapper):
     --site-btn-ink: var(--site-color-on-dark);
     --site-btn-ring: var(--site-color-on-dark);
     --site-btn-ground-hover: var(--site-color-on-dark);
     --site-btn-ink-hover: var(--site-color-ink-deep);
     --site-btn-ring-hover: var(--site-color-on-dark);
   (cream hairline plate that fills to cream with ink label).
   ============================================================ */

.site-btn {
  --site-btn-ground: transparent;
  --site-btn-ground-hover: var(--site-color-ink-strong, #4a423d);
  --site-btn-ink: var(--site-color-ink-strong, #4a423d);
  --site-btn-ink-hover: var(--site-color-on-dark, #f3efeb);
  --site-btn-ring: var(--site-color-ink-strong, #4a423d);
  --site-btn-ring-hover: var(--site-color-ink-strong, #4a423d);
  --site-min-h: 48px;
  --site-pad-x: 30px;
  --site-label-size: var(--site-type-label-size, 13px);

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;                                /* label centred on the plate */
  gap: 10px;
  box-sizing: border-box;
  min-height: var(--site-min-h);
  padding: 0 var(--site-pad-x);

  border: 1px solid var(--site-btn-ring);
  border-radius: 0;                                       /* the whole grammar: radius 0 */
  background-color: var(--site-btn-ground);
  color: var(--site-btn-ink);

  font-family: var(--site-font-heading, var(--site-font-body));
  font-size: calc(var(--site-label-size) * var(--mf-ts, 1));
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--site-type-label-tracking, 0.05em);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;

  cursor: pointer;
  user-select: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;

  transition:
    background-color var(--site-duration, 320ms) var(--site-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    color var(--site-duration, 320ms) var(--site-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color var(--site-duration, 320ms) var(--site-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow var(--site-duration, 320ms) var(--site-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 160ms var(--site-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.site-btn > svg {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: -1px;
}

/* ------------------------------------------------------------
   Shared state ritual — no lift, no shadow: the plate fills
   ------------------------------------------------------------ */
.site-btn:hover:not([disabled]):not(.is-loading) {
  background-color: var(--site-btn-ground-hover);
  border-color: var(--site-btn-ring-hover);
  color: var(--site-btn-ink-hover);
}
.site-btn:focus-visible {
  outline: 1px solid var(--site-color-accent);
  outline-offset: 3px;
}
.site-btn:active:not([disabled]):not(.is-loading) {
  transition-duration: 90ms;
}

/* disabled: the ink dries */
.site-btn[disabled],
.site-btn[disabled]:hover,
.site-btn[disabled]:active {
  background-color: var(--site-color-bg, #f3efeb);
  border-color: var(--site-color-border, #e1d7cc);
  color: var(--site-color-muted, #726459);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* loading: label withdraws, an accent ring turns at centre */
.site-btn.is-loading {
  color: transparent;
  pointer-events: none;
  cursor: progress;
}
.site-btn.is-loading > svg {
  opacity: 0;
}
.site-btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  margin: -8px 0 0 -8px;
  border: 1.5px solid var(--site-color-accent);
  border-right-color: transparent;
  border-radius: 50%;
  animation: mf-btn-turn 800ms linear infinite;
}
@keyframes mf-btn-turn {
  to { transform: rotate(360deg); }
}

/* ============================================================
   PRIMARY — the ink plate: solid deep sepia, cream label.
   ============================================================ */
.site-btn--primary {
  --site-btn-ground: var(--site-color-ink-deep, #38312d);
  --site-btn-ground-hover: var(--site-color-primary-hover, #554c46);
  --site-btn-ink: var(--site-color-on-dark, #f3efeb);
  --site-btn-ink-hover: var(--site-color-on-dark, #f3efeb);
  --site-btn-ring: var(--site-color-ink-deep, #38312d);
  --site-btn-ring-hover: var(--site-color-primary-hover, #554c46);
}
.site-btn--primary[disabled] {
  background-color: var(--site-color-bg-deep, var(--site-color-border));
  border-color: var(--site-color-bg-deep, var(--site-color-border));
  color: var(--site-color-muted);
}

/* ============================================================
   SECONDARY — paper plate in soft hairline; fills to ink.
   ============================================================ */
.site-btn--secondary {
  --site-btn-ground: transparent;
  --site-btn-ground-hover: var(--site-color-ink-strong, #4a423d);
  --site-btn-ink: var(--site-color-ink-strong, #4a423d);
  --site-btn-ink-hover: var(--site-color-on-dark, #f3efeb);
  --site-btn-ring: var(--site-color-border-strong, #cfc1b3);
  --site-btn-ring-hover: var(--site-color-ink-strong, #4a423d);
}

/* ============================================================
   GHOST — the page CTA: no plate at all. A serif sentence-case
   text link at body size over a 1px accent underscore that
   thickens on approach (Largo's own link grammar).
   ============================================================ */
.site-btn--ghost {
  --site-btn-ground: transparent;
  --site-btn-ground-hover: transparent;
  --site-btn-ink: var(--site-color-ink-strong, #4a423d);
  --site-btn-ink-hover: var(--site-color-ink-deep, #38312d);
  --site-min-h: 40px;
  --site-pad-x: 4px;
  --site-label-size: var(--site-type-size-base, 1rem);
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 -1px 0 0 var(--site-color-accent);
  padding-bottom: 6px;
  text-transform: none;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.site-btn--ghost:hover:not([disabled]):not(.is-loading),
.site-btn--ghost:focus-visible {
  box-shadow: inset 0 -2px 0 0 var(--site-color-accent-strong, #c17245);
}
.site-btn--ghost[disabled] {
  background-color: transparent;
  box-shadow: inset 0 -1px 0 0 var(--site-color-border);
}
.site-btn--ghost.is-loading::after {
  width: 13px;
  height: 13px;
  margin: -7px 0 0 -7px;
}

/* ============================================================
   SMALL — the plate tightened for utilities and pickers.
   ============================================================ */
.site-btn--sm {
  --site-min-h: 38px;
  --site-pad-x: 18px;
  --site-label-size: 12px;
  gap: 8px;
  min-width: 38px;
  letter-spacing: 0.05em;
}
.site-btn--sm > svg {
  width: 13px;
  height: 13px;
}
.site-btn--sm.is-loading::after {
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
}
.site-btn--ghost.site-btn--sm {
  --site-pad-x: 2px;
  min-width: 0;
}

/* ============================================================
   CONTEXT RE-INK — the photographic cta band (.site-cta-band)
   always lays a dark scrim, and existing pages mount a BARE
   .site-btn there expecting the retired inherit behavior. The
   sepia hairline vanishes on that ground, so the primitive
   re-inks its own bare plate for that context: cream hairline
   that fills to cream with an ink label. Variant classes
   (--primary etc.) are left to their own declarations.
   ============================================================ */
.site-cta-band .site-btn:not([class*='site-btn--']) {
  --site-btn-ink: var(--site-color-on-dark, #f3efeb);
  --site-btn-ring: var(--site-color-on-dark, #f3efeb);
  --site-btn-ground-hover: var(--site-color-on-dark, #f3efeb);
  --site-btn-ink-hover: var(--site-color-ink-deep, #38312d);
  --site-btn-ring-hover: var(--site-color-on-dark, #f3efeb);
}

/* ------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .site-btn {
    transition: none;
  }
  .site-btn.is-loading::after {
    animation-duration: 2400ms;
  }
}

/* ── DERIVED INK ON THE BRAND ANCHORS ───────────────────────────────
   The brand record now carries the palette (2026-10-04: primary #4F4339,
   secondary #E5E0D4, accent #D38755, highlight #A5CAD0), so bg / fg /
   accent are no longer forced here. The runtime still DERIVES on-accent,
   fg-muted and the focus ring inline from those anchors; these keep the
   house values (noir brun on the orange, RAL 8022). Lives here because the
   builder re-emits tokens.css/palette.css, while primitives ship verbatim. */
:root {
  --site-color-on-accent: #2a1c13 !important;
  --site-color-fg-muted: #64533f !important;
  --a11y-focus: #d38755 !important;
}

/* ── Booking funnel (SDK /book) ──────────────────────────────────────
   The "Prices in …" currency line arrives with a NEGATIVE top margin that
   lifts it into the masthead photo, under the stay bar. Hold it in flow so
   it sits on the paper, clear of the hero, with the shell's own padding. */
main.j17-book .j17-book__currency-frame {
  margin-top: 0 !important;
}

/* Phone filters sheet. The SDK pins it edge to edge under the header with
   zero side padding on the groups, so checkboxes and headings touch the
   screen. Here it floats as an inset card (12px gutters, 18px radius, soft
   shadow) with a 22px inner gutter. Heading-only groups label the groups
   that follow, so they hug them; a heading with nothing under it (e.g. an
   empty "Cancellation") is hidden; and single-row groups fold into one list
   instead of a ruled block each. */
@media (max-width: 760px) {
  .j17-book__filters.j17-book__filters--open {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    top: calc(73px + 10px) !important;
    max-height: calc(100svh - 73px - 22px) !important;
    border: 1px solid rgba(79, 67, 57, 0.1) !important;
    border-radius: 18px !important;
    box-shadow: 0 28px 60px -18px rgba(42, 28, 19, 0.42), 0 2px 10px rgba(42, 28, 19, 0.08) !important;
    overscroll-behavior: contain;
  }
  .j17-book__filters--open .j17-book__filters-head {
    padding: 20px 22px 16px !important;
    border-radius: 18px 18px 0 0;
    border-bottom-color: rgba(79, 67, 57, 0.12) !important;
  }
  .j17-book__filters--open .j17-book__filter-group {
    margin: 0 !important;
    padding: 18px 22px !important;
    border-bottom-color: rgba(79, 67, 57, 0.1) !important;
  }
  .j17-book__filters--open .j17-book__filter-group:not(:has(> h3)) {
    padding: 2px 22px !important;
    border-bottom: 0 !important;
  }
  .j17-book__filters--open .j17-book__filter-group:has(> h3:only-child) {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }
  .j17-book__filters--open .j17-book__filter-group:has(> h3:only-child) + .j17-book__filter-group {
    padding-top: 8px !important;
  }
  .j17-book__filters--open .j17-book__filter-group:has(+ .j17-book__filters-foot) {
    padding-bottom: 16px !important;
  }
  .j17-book__filters--open .j17-book__filter-group:has(> h3:only-child):has(+ .j17-book__filter-group > h3:only-child),
  .j17-book__filters--open .j17-book__filter-group:has(> h3:only-child):has(+ .j17-book__filters-foot) {
    display: none !important;
  }
  .j17-book__filters--open .j17-book__filter-group h3 {
    margin: 0 0 8px !important;
    font-size: calc(11px * var(--mf-ts, 1)) !important;
    letter-spacing: 0.28em !important;
  }
  .j17-book__filters--open .j17-book__filter-row {
    min-height: 46px;
    padding: 0 !important;
    gap: 14px !important;
  }
  .j17-book__filters--open .j17-book__filter-row input {
    flex: none;
    width: 20px !important;
    height: 20px !important;
    border-color: rgba(79, 67, 57, 0.42) !important;
    background-color: rgba(255, 255, 255, 0.35) !important;
  }
  .j17-book__filters--open .j17-book__filter-row input:checked {
    background-color: #4f4339 !important;
    border-color: #4f4339 !important;
  }
  .j17-book__filters--open .j17-book__filter-count {
    min-width: 2ch;
    margin-left: auto !important;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .j17-book__filters--open summary {
    min-height: 46px;
    align-items: center;
    padding: 6px 0 !important;
    border-bottom: 0 !important;
  }
  .j17-book__filters--open .j17-book__filters-foot {
    padding: 14px 22px 18px !important;
    border-radius: 0 0 18px 18px;
    border-top-color: rgba(79, 67, 57, 0.14) !important;
  }
}

/* Tablets and small laptops (761–1100px). The SDK opens the filters as a
   352px drawer pinned to the right edge at top 0, so the header covers its
   title/Reset/Done and the rows touch the panel edge. Same floating card as
   the phone, anchored right under the header (73–78px tall here). */
@media (min-width: 761px) and (max-width: 1100px) {
  .j17-book__filters.j17-book__filters--open {
    left: auto !important;
    right: 20px !important;
    top: 96px !important;
    bottom: auto !important;
    width: min(440px, calc(100vw - 40px)) !important;
    height: auto !important;
    max-height: calc(100svh - 116px) !important;
    border: 1px solid rgba(79, 67, 57, 0.1) !important;
    border-radius: 18px !important;
    box-shadow: 0 28px 60px -18px rgba(42, 28, 19, 0.42), 0 2px 10px rgba(42, 28, 19, 0.08) !important;
    overscroll-behavior: contain;
  }
  .j17-book__filters--open .j17-book__filters-head {
    padding: 22px 26px 16px !important;
    border-radius: 18px 18px 0 0;
    border-bottom-color: rgba(79, 67, 57, 0.12) !important;
  }
  .j17-book__filters--open .j17-book__filter-group {
    margin: 0 !important;
    padding: 18px 26px !important;
    border-bottom-color: rgba(79, 67, 57, 0.1) !important;
  }
  .j17-book__filters--open .j17-book__filter-group:not(:has(> h3)) {
    padding: 2px 26px !important;
    border-bottom: 0 !important;
  }
  .j17-book__filters--open .j17-book__filter-group:has(+ .j17-book__filters-foot) {
    padding-bottom: 16px !important;
  }
  .j17-book__filters--open .j17-book__filter-group h3 {
    margin: 0 0 8px !important;
    font-size: calc(11px * var(--mf-ts, 1)) !important;
    letter-spacing: 0.28em !important;
  }
  .j17-book__filters--open .j17-book__filter-row {
    min-height: 46px;
    padding: 0 !important;
    gap: 14px !important;
  }
  .j17-book__filters--open summary {
    min-height: 46px;
    align-items: center;
    padding: 6px 0 !important;
    border-bottom: 0 !important;
  }
  .j17-book__filters--open .j17-book__filters-foot {
    padding: 16px 26px 20px !important;
    border-radius: 0 0 18px 18px;
    border-top-color: rgba(79, 67, 57, 0.14) !important;
  }
}

/* Desktop (≥1101px): the two-column dropdown. Softened to the same card
   (16px radius, lighter frame, wider column gap) and the rows evened out:
   single-row groups drop their padding and rules so every option sits on
   the same 42px rhythm instead of alternating tight and loose blocks. */
@media (min-width: 1101px) {
  .j17-book__filters.j17-book__filters--open {
    padding: 26px 30px 22px !important;
    border: 1px solid rgba(79, 67, 57, 0.14) !important;
    border-radius: 16px !important;
    box-shadow: 0 28px 64px -20px rgba(42, 28, 19, 0.38), 0 2px 10px rgba(42, 28, 19, 0.07) !important;
    column-gap: 44px !important;
  }
  .j17-book__filters--open .j17-book__filters-head {
    margin-bottom: 6px !important;
    padding: 0 0 16px !important;
    border-bottom-color: rgba(79, 67, 57, 0.14) !important;
  }
  .j17-book__filters--open .j17-book__filter-group {
    padding: 14px 0 !important;
    border-bottom-color: rgba(79, 67, 57, 0.1) !important;
  }
  .j17-book__filters--open .j17-book__filter-group:not(:has(> h3)) {
    padding: 0 !important;
    border-bottom: 0 !important;
  }
  .j17-book__filters--open .j17-book__filter-group:has(> h3) {
    margin-bottom: 8px !important;
  }
  .j17-book__filters--open .j17-book__filter-group h3 {
    margin: 0 0 6px !important;
    font-size: calc(11px * var(--mf-ts, 1)) !important;
    letter-spacing: 0.28em !important;
  }
  .j17-book__filters--open .j17-book__filter-row {
    min-height: 42px;
    padding: 0 !important;
    gap: 14px !important;
  }
  .j17-book__filters--open summary {
    min-height: 42px;
    align-items: center;
    padding: 0 !important;
    border-bottom: 0 !important;
  }
}

/* Checkbox and count treatment shared by every width. */
.j17-book__filters--open .j17-book__filter-row input {
  flex: none;
  width: 20px !important;
  height: 20px !important;
  border-color: rgba(79, 67, 57, 0.42) !important;
  background-color: rgba(255, 255, 255, 0.35) !important;
}
.j17-book__filters--open .j17-book__filter-row input:checked {
  background-color: #4f4339 !important;
  border-color: #4f4339 !important;
}
.j17-book__filters--open .j17-book__filter-count {
  min-width: 2ch;
  margin-left: auto !important;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Page bottom ──
   The SDK shell pads its bottom by --concierge-dock-h (96px) to keep the
   fixed concierge dock off the footer. html/body carry no ground, so that
   reserve renders as a WHITE band under the footer. The footer script
   already hides the dock at the page end, so the reserve is not needed;
   the grounds below are a belt-and-braces so no gap can ever read white. */
.app-shell {
  padding-bottom: 0 !important;
}
html,
body {
  background: var(--site-color-bg, #e5e0d4);
}

/* On the booking funnel the shell appends its own "USD" region switcher
   AFTER the footer (.app-shell__region): a stray strip under the page end.
   The funnel already carries the "Prices in …" currency picker above the
   results, so this duplicate is hidden. */
.app-shell--funnel .app-shell__region {
  display: none !important;
}

/* SITEWIDE TEXT SCALE (2026-10-07, hotelier: "reduce text size on the whole
   site by 15%, except in the booking flow"). Every theme font-size is written
   as calc(<size> * var(--mf-ts, 1)); spacing is untouched. The funnel
   (/book, /checkout, confirmation) keeps full size: the shell marks it
   .app-shell--funnel, and SiteHeader also sets html.mf-funnel by route. */
:root { --mf-ts: 0.85; }
html.mf-funnel,
html:has(.app-shell--funnel) { --mf-ts: 1; }
/* inherited text (no explicit size) follows the same scale */
body { font-size: calc(1rem * var(--mf-ts, 1)); }
/* SDK-rendered content blocks (freeform pages, teasers) + accessibility
   statement: the SDK's own sizes, multiplied. The a11y widget is left
   at full size on purpose. */
html body .hp-block__title { font-size: calc(clamp(1.75rem, 4vw, 2.25rem) * var(--mf-ts, 1)) !important; }
html body .hp-block__body { font-size: calc(1.05rem * var(--mf-ts, 1)) !important; }
html body .hp-block__caption { font-size: calc(0.9rem * var(--mf-ts, 1)) !important; }
html body .hp-block__inner.hp-block--media-text .hp-block__title { font-size: calc(clamp(1.1rem, 2.1vw, 1.45rem) * var(--mf-ts, 1)) !important; }
html body .hp-block__inner.hp-block--media-text .hp-block__body { font-size: calc(0.9375rem * var(--mf-ts, 1)) !important; }
html body .hp-block__inner.hp-block--media-text .hp-block__cta { font-size: calc(0.76rem * var(--mf-ts, 1)) !important; }
html body .hp-block__band-button,
html body .hp-block__cta { font-size: calc(0.8125rem * var(--mf-ts, 1)) !important; }
html body .hp-block__map-open { font-size: calc(0.78rem * var(--mf-ts, 1)) !important; }
html body .hp-block__map-address { font-size: calc(0.92rem * var(--mf-ts, 1)) !important; }
html body .hp-block__featured-title { font-size: calc(0.9rem * var(--mf-ts, 1)) !important; }
html body .hp-block__featured--quotes .hp-block__featured-quote { font-size: calc(clamp(1.05rem, 2.2vw, 1.3rem) * var(--mf-ts, 1)) !important; }
html body .hp-block__featured--quotes .hp-block__featured-title { font-size: calc(0.85rem * var(--mf-ts, 1)) !important; }
html body .a11y-statement__title { font-size: calc(clamp(1.8rem, 3.5vw, 2.6rem) * var(--mf-ts, 1)) !important; }
/* /accessibility is the SDK's statement view, outside AboutView: give it
   the compact paper masthead's clearance under the fixed header (the
   shell pads nothing) and the same document column as /terms-conditions. */
html body .a11y-statement { padding: calc(var(--site-header-reserve, 97px) + clamp(24px, 4vw, 48px)) var(--site-gutter, clamp(1.5rem, 6vw, 4rem)) clamp(56px, 6vw, 88px) !important; }
html body .a11y-statement__inner { max-width: 760px; margin-inline: auto; }
/* the hotel's own statement (Accessibility settings) replaces the SDK's
   generic two-line preamble; clear it there and the preamble returns */
html body .a11y-statement__inner:has(.a11y-statement__body) > p { display: none; }
@media (max-width: 380px) {
  html body .hp-block__inner.hp-block--media-text .hp-block__cta { font-size: calc(0.68rem * var(--mf-ts, 1)) !important; }
}

/* ── SINGLE-FRAME BUTTONS (owner, 2026-10-22) ─────────────────────
   The double frame is retired: every framed button is one 1px
   rectangle like the header's Reserve and the homepage buttons, label
   in Kohinoor Medium full capitals. On approach the frame fills.
   Ghost links and the buttons sealed inside the booking ledgers keep
   their own grammar. */
.site-btn:not(.site-btn--ghost):not(.mbp__submit):not(.mfh__submit) {
  font-family: 'KohinoorW00-Medium', var(--site-font-body) !important;
  font-variant: normal;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

/* ── EYEBROW RULE SITEWIDE (owner, 2026-10-22) ────────────────────
   Every small eyebrow label carries the 44px house-blue hairline that
   leads "The Interiors" on the homepage. Drawn inline so centred
   eyebrows stay centred; pale blue on the night grounds. */
:is(.rdv-eyebrow, .rlx-eyebrow, .abv-chapter, .amx-chapter, .mfx-chapter,
    .mfsa-eyebrow, .mfad-eyebrow, .faq-eyebrow, .mfj-eyebrow, .efx-eyebrow,
    .mfc-eyebrow, .msh__eyebrow, .mmb__eyebrow, .mcb__eyebrow, .mfc__eyebrow)::before {
  content: '';
  display: inline-block;
  flex: none;
  width: 44px;
  height: 1px;
  margin-right: 0.9rem;
  vertical-align: middle;
  position: relative;
  top: -0.1em;
  background: #6e9ea8;
}
:is(.mfx-chapter--ondark, .mfx-chapter--onink, .abv-chapter--ondark, .abv-chapter--onink,
    .faq-eyebrow--on-dark, .mfx-court .mfx-chapter, .mcb__eyebrow)::before {
  background: #a5cad0;
}
/* the homepage feature panels already space their rule with a flex gap */
.mfx-feature__panel > .mfx-chapter::before { margin-right: 0; top: 0; }
/* CENTRED eyebrows carry no rule: only the left-aligned ones do
   (owner, 2026-10-22) */
:is(.mfx-welcome__inner > .mfx-chapter, .mfx-story__inner > .mfx-chapter,
    .mfx-index__head > .mfx-chapter, .mfx-statement__inner > .mfx-chapter,
    .mfx-court__head > .mfx-chapter, .amx-sheet__head > .amx-chapter,
    .rlx-close__inner .rlx-eyebrow, .abv-chapter[data-rv],
    .mfsa-eyebrow--center, .mfad-eyebrow--center)::before {
  display: none !important;
}
/* the pattern headers drew a short accent hairline under the eyebrow;
   the blue rule beside it replaces that */
.msh__eyebrow::after,
.mmb__eyebrow::after { display: none !important; }
/* the venue pages already draw a tick; it takes the same blue rule */
.vn-eyebrow__tick { width: 44px !important; background: #6e9ea8 !important; }
.vn-eyebrow--on-dark .vn-eyebrow__tick { background: #a5cad0 !important; }

/* ── HOUSE BLUE AS A DETAIL (owner, 2026-10-22) ───────────────────
   The blue of the eyebrow rule, used only in small touches: the
   Reserve plate on approach, the underscore of the text links on
   approach, and a hairline frame that draws itself clockwise inside
   the framed photographs on hover. Never a ground, never a block. */
:root { --mf-blue: #6e9ea8; }

.site-btn--ghost:hover:not([disabled]):not(.is-loading),
.site-btn--ghost:focus-visible {
  box-shadow: inset 0 -2px 0 0 var(--mf-blue);
}

:is(.rlx-card, .mfx-feature__media, .abv-feature__media, .mfc__media,
    .amx-item__media, .mfad-about__media, .mfad-ledger__media,
    .rdv-room__figure, .mfx-plate, .mfx-facade__fig) {
  position: relative;
}
:is(.rlx-card, .mfx-feature__media, .abv-feature__media, .mfc__media,
    .amx-item__media, .mfad-about__media, .mfad-ledger__media,
    .rdv-room__figure, .mfx-plate, .mfx-facade__fig)::after {
  content: '';
  position: absolute;
  inset: clamp(12px, 1.4vw, 18px);
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(var(--mf-blue), var(--mf-blue)) left top / 0 1px no-repeat,
    linear-gradient(var(--mf-blue), var(--mf-blue)) right top / 1px 0 no-repeat,
    linear-gradient(var(--mf-blue), var(--mf-blue)) right bottom / 0 1px no-repeat,
    linear-gradient(var(--mf-blue), var(--mf-blue)) left bottom / 1px 0 no-repeat;
}
@keyframes mf-frame-draw {
  0%   { background-size: 0 1px, 1px 0, 0 1px, 1px 0; }
  25%  { background-size: 100% 1px, 1px 0, 0 1px, 1px 0; }
  50%  { background-size: 100% 1px, 1px 100%, 0 1px, 1px 0; }
  75%  { background-size: 100% 1px, 1px 100%, 100% 1px, 1px 0; }
  100% { background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%; }
}
@media (hover: hover) {
  :is(.rlx-card, .mfx-feature__media, .abv-feature__media, .mfc__media,
      .amx-item__media, .mfad-about__media, .mfad-ledger__media,
      .rdv-room__figure, .mfx-plate, .mfx-facade__fig):hover::after {
    animation: mf-frame-draw 1.1s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.rlx-card, .mfx-feature__media, .abv-feature__media, .mfc__media,
      .amx-item__media, .mfad-about__media, .mfad-ledger__media,
      .rdv-room__figure, .mfx-plate, .mfx-facade__fig):hover::after {
    animation: none;
    background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
  }
}

/* SITEWIDE TITLES IN FULL CAPITALS (owner, 2026-10-21: "INTIMACY", not
   Intimacy). The display face draws its lowercase as small caps, so a
   mixed-case title read as two letter heights; uppercase gives every
   letter the full cap height. */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
  text-transform: uppercase !important;
}

/* /book calendar: nightly rates smaller; SiteHeader prints them with a
   bare "$" and sets data-mf-note ("Nightly rates in US dollars") on the
   calendar, shown once at its foot. */
.j17-dp__cell-price { font-size: 8.5px !important; letter-spacing: 0 !important; }
.j17-dp__menu[data-mf-note]::after {
  content: attr(data-mf-note);
  display: block;
  margin-top: 10px;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-color-ink-muted, #7a6f66);
}

/* /book sort menu, phones: the SDK hangs its 13rem panel off the
   trigger's RIGHT edge, and on a phone the trigger sits at the left of
   the sortbar, so the panel ran off the left of the screen (owner,
   2026-10-09). Hang it off the trigger's left edge there instead; the
   SDK's own phone breakpoint. */
@media (max-width: 720px) {
  main.j17-book .j17-sortmenu__panel {
    left: 0 !important;
    right: auto !important;
    max-width: calc(100vw - 2rem) !important;
  }
}

/* /checkout, compact (owner, 2026-10-08: "reduce the size of the text a
   bit … compact the page as much as possible"). The SDK page sizes its
   type and much of its spacing in rem, so the root is set ~10% smaller
   there; the rules below tighten what its clamp()/vw values keep large.
   /book keeps its full size. html.mf-checkout is set by SiteHeader on
   /checkout routes only. */
html.mf-checkout { font-size: 90%; }
html.mf-checkout main.j17-checkout { padding-bottom: clamp(2rem, 4vw, 3rem) !important; }
html.mf-checkout main.j17-checkout .j17-checkout__masthead { padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 4vw, 3rem) clamp(0.85rem, 1.6vw, 1.25rem) !important; }
html.mf-checkout main.j17-checkout .j17-checkout__masthead--with-media { padding-top: 0 !important; }
html.mf-checkout main.j17-checkout .j17-checkout__masthead-media { aspect-ratio: 16 / 3 !important; margin-bottom: clamp(0.9rem, 1.8vw, 1.25rem) !important; }
html.mf-checkout main.j17-checkout .j17-checkout__title { margin-top: 0.4rem !important; font-size: clamp(1.7rem, 2.8vw, 2.3rem) !important; }
html.mf-checkout main.j17-checkout .j17-checkout__greet { margin-top: 0.4rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__rule { margin: 0.7rem 0 0.6rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__lede { font-size: 0.95rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__body { gap: clamp(1.25rem, 2.5vw, 2.25rem) !important; padding-top: clamp(0.9rem, 1.8vw, 1.5rem) !important; }
html.mf-checkout main.j17-checkout .j17-checkout__form,
html.mf-checkout main.j17-checkout .j17-checkout__pay { gap: clamp(1.1rem, 1.8vw, 1.5rem) !important; }
html.mf-checkout main.j17-checkout .j17-checkout__pay { margin-top: clamp(0.5rem, 1vw, 0.85rem) !important; padding-top: clamp(0.9rem, 1.5vw, 1.25rem) !important; }
html.mf-checkout main.j17-checkout .j17-checkout__pay-head h2 { font-size: clamp(1.3rem, 2vw, 1.6rem) !important; margin-top: 0.4rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__fieldset { gap: 0.7rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__legend { padding-bottom: 0.4rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__fieldset > legend { margin-bottom: 0.55rem !important; }
/* The smallest tracked caps hold their size: they are already at the
   floor of legible. */
html.mf-checkout main.j17-checkout .j17-checkout__field-label { font-size: max(10.5px, calc(var(--site-checkout-text-scale, 1) * 0.66rem)) !important; }
html.mf-checkout main.j17-checkout .j17-checkout__legend,
html.mf-checkout main.j17-checkout .j17-checkout__cta,
html.mf-checkout main.j17-checkout .j17-checkout__eyebrow,
html.mf-checkout main.j17-checkout .j17-checkout__back,
html.mf-checkout main.j17-checkout .j17-checkout__seg-btn,
html.mf-checkout main.j17-checkout .j17-checkout__summary-total-label { font-size: max(10.5px, 0.7rem) !important; }
html.mf-checkout main.j17-checkout .j17-checkout__chapter { font-size: 1.25rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__field { gap: 0.3rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__row { gap: 0.7rem clamp(0.9rem, 1.5vw, 1.25rem) !important; }
html.mf-checkout main.j17-checkout .j17-checkout__field input,
html.mf-checkout main.j17-checkout .j17-checkout__field select,
html.mf-checkout main.j17-checkout .j17-checkout__field .country-select__input { font-size: 0.95rem !important; padding-block: 0.4rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__field textarea { min-height: 64px !important; font-size: 0.95rem !important; padding-top: 0.45rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__bookingfor { margin-bottom: 0.6rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__actions { gap: 0.85rem !important; margin-top: 0.25rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__cta { padding: 0.8rem clamp(1.3rem, 2.4vw, 1.8rem) !important; }
html.mf-checkout main.j17-checkout .j17-checkout__widget { padding: clamp(0.85rem, 1.5vw, 1.2rem) !important; }
html.mf-checkout main.j17-checkout .j17-checkout__col-summary { gap: 0.75rem; }
html.mf-checkout main.j17-checkout .j17-checkout__summary-head,
html.mf-checkout main.j17-checkout .j17-checkout__leg-head,
html.mf-checkout main.j17-checkout .j17-checkout__summary-bundle { padding-top: clamp(0.8rem, 1.4vw, 1.1rem) !important; }
html.mf-checkout main.j17-checkout .j17-checkout__summary-head h3 { font-size: clamp(1.15rem, 1.7vw, 1.35rem) !important; margin-top: 0.4rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__summary-meta { gap: 0.4rem !important; padding-bottom: 0.7rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__breakdown { padding-top: 0.7rem !important; gap: 0.35rem 0.85rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__summary-total { margin-top: 0.7rem !important; padding-block: 0.8rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__addons { margin-top: 0.7rem !important; padding-top: 0.7rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__addon { padding-block: 0.4rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__assurance { padding-block: 0.6rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__secure-line,
html.mf-checkout main.j17-checkout .j17-checkout__reassure { margin-top: 0.6rem !important; }
/* Phones: inputs stay at 16px or iPhone Safari zooms into the field. */
@media (max-width: 760px) {
  html.mf-checkout main.j17-checkout .j17-checkout__field input,
  html.mf-checkout main.j17-checkout .j17-checkout__field select,
  html.mf-checkout main.j17-checkout .j17-checkout__field textarea,
  html.mf-checkout main.j17-checkout .j17-checkout__field .country-select__input { font-size: 16px !important; }
}




/* ============================================================
   Maison Felix — form_controls · "Paper Vessel"
   Fields as quiet paper plates: raised-cream fill, one 1px ink
   hairline, radius 0. Labels above in serif tracked caps
   (13px/0.05em). Focus warms the hairline to burnt orange.
   Public API (LAW): .site-field  .site-field__label
   .site-field__input  .site-field__help  .site-field__error
   .site-field--error  .site-choice
   ============================================================ */

.site-field {
  --site-field-pad-y: 13px;
  --site-field-pad-x: 16px;
  --site-field-ground: var(--site-color-surface-raised, #fcfaf7);
  --site-field-ink: var(--site-color-ink-strong, #4a423d);
  --site-field-ring: var(--site-color-border-strong, #cfc1b3);
  --site-field-ring-focus: var(--site-color-accent, #d58a5d);
  --site-field-error-ink: var(--site-color-danger, #a2503f);
  --site-field-speed: var(--site-duration, 320ms);
  --site-field-ease: var(--site-ease-out, cubic-bezier(0.22, 1, 0.36, 1));

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--site-space-2, 8px);
  margin: 0 0 var(--site-space-4, 24px);
  font-family: var(--site-font-body);
}

.site-field:last-child {
  margin-bottom: 0;
}

/* Label — serif tracked caps above the vessel */
.site-field__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--site-font-body);
  font-size: calc(var(--site-type-label-size, 13px) * var(--mf-ts, 1));
  font-weight: var(--site-type-label-weight, 500);
  letter-spacing: var(--site-type-label-tracking, 0.05em);
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--site-color-muted, #726459);
  user-select: none;
  transition: color var(--site-field-speed) var(--site-field-ease);
}
.site-field:focus-within > .site-field__label {
  color: var(--site-color-ink-strong, #4a423d);
}

/* Input · Select · Textarea — the paper vessel */
.site-field__input {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  margin: 0;
  box-sizing: border-box;

  font-family: var(--site-font-body);
  font-size: calc(var(--site-type-body-size, 16px) * var(--mf-ts, 1));
  line-height: 1.4;
  color: var(--site-field-ink);
  caret-color: var(--site-color-accent, #d58a5d);

  background-color: var(--site-field-ground);
  border: 1px solid var(--site-field-ring);
  border-radius: 0;
  padding: var(--site-field-pad-y) var(--site-field-pad-x);
  outline: none;

  transition:
    border-color var(--site-field-speed) var(--site-field-ease),
    background-color var(--site-field-speed) var(--site-field-ease),
    box-shadow var(--site-field-speed) var(--site-field-ease);
}

.site-field__input::placeholder {
  color: var(--site-color-muted, #726459);
  font-style: italic;
  opacity: 1;
}

.site-field__input:hover:not(:disabled):not(:focus) {
  border-color: var(--site-color-ink-soft, #7d726a);
}

/* Focus — the hairline takes the heat */
.site-field__input:focus,
.site-field__input:focus-visible {
  border-color: var(--site-field-ring-focus);
  box-shadow: inset 0 0 0 1px var(--site-field-ring-focus);
}

.site-field__input:disabled {
  background-color: var(--site-color-bg-deep, #eae2d8);
  color: var(--site-color-muted, #726459);
  border-color: var(--site-color-border, #e1d7cc);
  cursor: not-allowed;
}
.site-field__input:disabled::placeholder {
  color: var(--site-color-muted, #726459);
}
.site-field:has(.site-field__input:disabled) > .site-field__label {
  color: var(--site-color-muted, #726459);
  opacity: 0.7;
}

.site-field__input:-webkit-autofill,
.site-field__input:-webkit-autofill:hover,
.site-field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--site-field-ink);
  -webkit-box-shadow: inset 0 0 0 1000px var(--site-field-ground);
  caret-color: var(--site-color-accent, #d58a5d);
  transition: background-color 999999s ease 0s;
}

/* Select — an ink chevron engraved at right */
select.site-field__input {
  padding-right: calc(var(--site-field-pad-x) + 28px);
  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 1.5l5 5 5-5' fill='none' stroke='%234a423d' stroke-width='1.25' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--site-field-pad-x) center;
  background-size: 12px 8px;
  cursor: pointer;
  text-overflow: ellipsis;
}
select.site-field__input:disabled {
  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 1.5l5 5 5-5' fill='none' stroke='%23726459' stroke-width='1.25' stroke-linecap='square'/%3E%3C/svg%3E");
  cursor: not-allowed;
}
select.site-field__input option {
  background-color: var(--site-color-surface-raised, #fcfaf7);
  color: var(--site-color-ink-strong, #4a423d);
  font-family: var(--site-font-body);
}
select.site-field__input::-ms-expand {
  display: none;
}

/* Textarea */
textarea.site-field__input {
  min-height: 132px;
  resize: vertical;
  line-height: var(--site-type-body-leading, 1.45);
}

/* Date fields — indicator toned to the warm ink */
.site-field__input::-webkit-calendar-picker-indicator {
  filter: sepia(0.3) saturate(1.1) opacity(0.75);
  cursor: pointer;
}

.site-field__input::-moz-focus-inner {
  border: 0;
}

/* Help & error — footnotes beneath the field */
.site-field__help,
.site-field__error {
  margin: 0;
  font-family: var(--site-font-body);
  font-size: calc(var(--site-type-size-sm, 14px) * var(--mf-ts, 1));
  line-height: 1.5;
  font-style: italic;
}
.site-field__help {
  color: var(--site-color-muted, #726459);
}
.site-field__error {
  display: flex;
  align-items: baseline;
  gap: var(--site-space-2, 8px);
  color: var(--site-field-error-ink);
}
.site-field__error::before {
  content: "";
  flex: 0 0 auto;
  align-self: center;
  width: 14px;
  height: 1px;
  background: var(--site-field-error-ink);
}

/* Error row state — terracotta hairline, no red alarm */
.site-field--error > .site-field__label {
  color: var(--site-field-error-ink);
}
.site-field--error .site-field__input:not(:disabled) {
  border-color: var(--site-field-error-ink);
  box-shadow: inset 0 0 0 1px var(--site-field-error-ink);
}

/* Choice rows — checkbox & radio as small paper plates */
.site-choice {
  --site-choice-size: 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--site-space-2, 8px) 0;
  font-family: var(--site-font-body);
  font-size: calc(var(--site-type-body-size, 16px) * var(--mf-ts, 1));
  line-height: 1.5;
  color: var(--site-color-fg, #645a54);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.site-choice input[type="checkbox"],
.site-choice input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: var(--site-choice-size);
  height: var(--site-choice-size);
  margin: 0;
  margin-top: calc((1.5em - var(--site-choice-size)) / 2);
  background-color: var(--site-color-surface-raised, #fcfaf7);
  border: 1px solid var(--site-color-ink-strong, #4a423d);
  border-radius: 0;
  cursor: pointer;
  transition:
    background-color var(--site-duration, 320ms) var(--site-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color var(--site-duration, 320ms) var(--site-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
.site-choice input[type="radio"] {
  border-radius: 50%;
}
.site-choice:hover input[type="checkbox"]:not(:disabled),
.site-choice:hover input[type="radio"]:not(:disabled) {
  border-color: var(--site-color-accent-deep, #a35c36);
}

.site-choice input[type="checkbox"]:checked {
  background-color: var(--site-color-ink-deep, #38312d);
  border-color: var(--site-color-ink-deep, #38312d);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.6l3 3L10 1' fill='none' stroke='%23f3efeb' stroke-width='1.4' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 9px;
}
.site-choice input[type="radio"]:checked {
  background-color: var(--site-color-ink-deep, #38312d);
  border-color: var(--site-color-ink-deep, #38312d);
  box-shadow: inset 0 0 0 4px var(--site-color-surface-raised, #fcfaf7);
}
.site-choice input[type="checkbox"]:checked ~ *,
.site-choice input[type="radio"]:checked ~ * {
  color: var(--site-color-ink-strong, #4a423d);
}

.site-choice input[type="checkbox"]:focus-visible,
.site-choice input[type="radio"]:focus-visible {
  outline: 1px solid var(--site-color-accent, #d58a5d);
  outline-offset: 3px;
}

.site-choice input[type="checkbox"]:disabled,
.site-choice input[type="radio"]:disabled {
  background-color: var(--site-color-bg-deep, #eae2d8);
  border-color: var(--site-color-border, #e1d7cc);
  background-image: none;
  box-shadow: none;
  cursor: not-allowed;
}
.site-choice:has(input:disabled) {
  color: var(--site-color-muted, #726459);
  cursor: not-allowed;
}

.site-field--error .site-choice input[type="checkbox"],
.site-field--error .site-choice input[type="radio"] {
  border-color: var(--site-field-error-ink, #a2503f);
}

@media (prefers-reduced-motion: reduce) {
  .site-field__label,
  .site-field__input,
  .site-choice,
  .site-choice input[type="checkbox"],
  .site-choice input[type="radio"] {
    transition: none;
  }
}


/* theme skin */
/* =====================================================================
 * Maison Felix — Concierge Skin · Variant 2 of 3
 * "BRASS & LINEN — THE LEDGER"
 *
 * Direction: Invert the ground. Dark ink (#645a54) becomes the
 * widget's leather cover; ivory (#e5e0d4) breathes inside the chat;
 * the accent (#d38755) runs as a single structural brass rule left of
 * the message thread. Opening the panel is opening a ledger:
 * dark cover → cream pages → a ribbon of burnt orange marking your
 * place. Bold envelope, refined interior. The Icon asserting presence.
 *
 * Scope: everything scoped to `.cl` only — never touches the site.
 * Contract: only the allowed custom properties, nothing else.
 * ===================================================================== */

.cl {

  /* ------------------------------------------------------------------
     RE-TINT — site palette overrides inside the concierge scope
     ------------------------------------------------------------------
     The panel interior reads as the cream field (linen pages).
     The fg token becomes the deep ink that the components use for
     text — kept near the brand fg for warmth, but deepened slightly
     so it reads crisply on the ivory interior.
     The border takes on the accent tone — faint warm brass hairline.
     ------------------------------------------------------------------ */
  --site-color-bg:           #e5e0d4;   /* ivory linen — panel interior ground  */
  /* !important: the SDK dock writes --site-color-fg and color INLINE on
     the aside (white — it assumes a dark ground). Author !important
     beats inline styles, so the ledger keeps its dark ink everywhere
     on this site: greeting, hint, starter chips, typed text. */
  --site-color-fg:           #3d3026 !important;   /* deepened sepia ink — sharp on cream  */
  color:                     #3d3026 !important;
  --site-color-accent:       #d38755;   /* brass — structural rule + highlights  */
  --site-color-on-accent:    #e5e0d4;   /* ivory on the brass bubble            */
  --site-color-border:       #d2c8b2;   /* warm parchment hairline              */

  /* Type families — brand locked */
  --site-font-display:       "Cormorant Garamond", "Cormorant", Georgia, serif;
  --site-font-body:          "EB Garamond", Georgia, serif;

  /* ------------------------------------------------------------------
     CONCIERGE SHAPE — the widget's physical geometry
     ------------------------------------------------------------------
     FAB (launch bubble):
       · Background: the dark ink surface — the leather cover —
         so the bubble reads as a closed ledger before the panel opens.
       · Foreground: ivory, so the icon / initial reads on the dark.
       · Radius: 3px — sharply architectural, a pressed-brass stud,
         not a pill. Distinct from the softer site radius. Emphatic.

     Panel:
       · Radius: 0px top-left (the ledger spine corner, hard),
         with a 4px on the remaining corners — feels bound, structural.
         The shared widget uses a single --concierge-panel-radius value;
         we set it small so the panel reads as a rigid document object.
     ------------------------------------------------------------------ */
  /* 2026-09-04: hotelier wants the concierge bright at rest as well as
     open — the FAB and closed dock are now the same ivory linen as the
     open ledger, with sepia ink on top. */
  --concierge-fab-bg:        #e5e0d4;   /* ivory linen — same as the open panel  */
  --concierge-fab-fg:        #3d3026;   /* sepia ink — icon reads on cream        */
  --concierge-fab-radius:    0px;       /* the site's radius-0 grammar           */

  --concierge-panel-radius:  0px;       /* engraved plate; square                */
}

/* ---------------------------------------------------------------------
   INPUT INK — the ask bar rides a LIGHT pill on this site, but the
   widget ships its input ink for a dark dock (ivory). Re-ink the
   typed text dark so it reads on the cream ground.
   --------------------------------------------------------------------- */
.cl .cc__input {
  /* !important: the widget pins its own input ink at higher specificity */
  color: #2a1c13 !important;
  caret-color: #2a1c13;
}
.cl .cc__input::placeholder {
  color: #6b5a49 !important;
}


/* chrome components */

.sdk-navacc__row[data-v-448a3764] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}
.sdk-navacc__caret[data-v-448a3764] {
  width: 0.42em;
  height: 0.42em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.18s ease;
  flex: none;
}
.sdk-navacc--open .sdk-navacc__caret[data-v-448a3764] { transform: rotate(-135deg);
}
.sdk-navacc__list[data-v-448a3764] {
  list-style: none;
  margin: 0.25rem 0 0.5rem;
  padding: 0 0 0 1rem;
  border-left: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.sdk-navacc__list[hidden][data-v-448a3764] { display: none;
}
.sdk-navacc__link[data-v-448a3764] {
  display: block;
  padding: 0.4rem 0;
  color: inherit;
  text-decoration: none;
  /* A child sits UNDER its parent in the hierarchy — say so typographically
   * rather than making it look like another top-level destination. */
  font-size: 0.9em;
  opacity: 0.85;
}
.sdk-navacc__link[data-v-448a3764]:hover,
.sdk-navacc__link[data-v-448a3764]:focus-visible { opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.sdk-navacc__caret[data-v-448a3764] { transition: none;
}
}


.sdk-cta[data-v-9df4945d] {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 1px;   /* a hairline seam between the two halves of the split button */
}
.sdk-cta__primary[data-v-9df4945d] { display: inline-flex; align-items: center;
}
.sdk-cta__caret-btn[data-v-9df4945d] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  cursor: pointer;
  /* Inherits the theme's button class, so it matches the primary half. */
}
.sdk-cta__caret[data-v-9df4945d] {
  width: 0.42em;
  height: 0.42em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-0.1em, -0.1em);
  transition: transform 0.18s ease;
  flex: none;
}
.sdk-cta--open .sdk-cta__caret[data-v-9df4945d] {
  transform: rotate(-135deg) translate(-0.16em, -0.16em);
}
.sdk-cta__panel[data-v-9df4945d] {
  position: absolute;
  top: 100%;
  right: 0;                  /* the CTA lives at the right edge of the bar */
  z-index: 1000;             /* above the concierge bubble (998–999) */
  min-width: max(200px, 100%);
  margin: 0.5rem 0 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--site-color-bg, #fff);
  color: var(--site-color-text, #111);
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  border-radius: var(--site-radius, 4px);
  box-shadow: 0 12px 32px rgb(0 0 0 / 12%);
  font-family: var(--site-font-body, inherit);
}
.sdk-cta__panel[hidden][data-v-9df4945d] { display: none;
}
.sdk-cta__item[data-v-9df4945d] { margin: 0;
}
.sdk-cta__link[data-v-9df4945d] {
  display: block;
  padding: 0.55rem 0.75rem;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  border-radius: calc(var(--site-radius, 4px) * 0.75);
}
.sdk-cta__link[data-v-9df4945d]:hover,
.sdk-cta__link[data-v-9df4945d]:focus-visible {
  background: color-mix(in srgb, currentColor 8%, transparent);
}
@media (prefers-reduced-motion: reduce) {
.sdk-cta__caret[data-v-9df4945d] { transition: none;
}
}


/* ⚠️⚠️ TEXT COLOUR COMES FROM `inherit` + `opacity`, NEVER A COLOUR TOKEN.
   This is the SDK chrome convention (see RegionSwitcher / LanguageSwitcher)
   and it exists because a theme's colour ROLES are not what their names
   suggest. Townhouse defines:

       --site-color-muted: #F3E6D0   (sun-bleached SAND — a FILL)

   so `color: var(--site-color-muted)` rendered this control's text in
   near-white cream on a #FFFFFF page: invisible. The muted TEXT role there
   is `--site-color-fg-muted` (#7A6350), and other themes spell it
   differently again. Inheriting the page's own ink and dialling it back
   with opacity is the only thing that is true on every theme.

   SURFACES are different — a floating panel must be opaque or the list
   renders over the page behind it — so those do read tokens, in the order
   surface → bg → white, all of which are genuinely background roles.
   Borders read `--site-color-border` (Townhouse: #DCC5A2 tan), radius
   `--radius-sm` (8px there), and the control's type reads
   `--site-font-ui` (Karla) because this is chrome, not body copy. */
.currency-panel[data-v-ddad464d] {
  max-height: min(24rem, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.4rem;
  font-family: var(--site-font-ui, inherit);
  color: inherit;
}
.currency-panel__search[data-v-ddad464d] {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.35rem;
  font: inherit;
  font-size: 0.85rem;
  color: inherit;
  background: transparent;
  border: 1px solid;
  border-color: var(--site-color-border, currentColor);
  border-radius: var(--radius-sm, var(--site-radius-sm, 3px));
}
.currency-panel__search[data-v-ddad464d]::placeholder { color: inherit; opacity: 0.5;
}
.currency-panel__search[data-v-ddad464d]:focus-visible {
  outline: 2px solid var(--site-color-focus-ring, currentColor);
  outline-offset: 1px;
}
.currency-panel__group + .currency-panel__group[data-v-ddad464d] { margin-top: 0.5rem;
}
.currency-panel__group-label[data-v-ddad464d] {
  margin: 0.4rem 0 0.2rem;
  padding: 0 0.45rem;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: var(--site-tracking-caps, 0.12em);
  text-transform: uppercase;
  opacity: 0.5;
}
.currency-panel__options[data-v-ddad464d] { list-style: none; margin: 0; padding: 0;
}
.currency-panel__option-btn[data-v-ddad464d] {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.45rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.85rem;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm, var(--site-radius-sm, 3px));
}
/* A wash of the page's OWN ink — works on a cream panel and a dark one
   alike, where a fixed grey would muddy one of them. */
.currency-panel__option-btn[data-v-ddad464d]:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.currency-panel__option-btn[data-v-ddad464d]:focus-visible {
  outline: 2px solid var(--site-color-focus-ring, currentColor);
  outline-offset: -2px;
}
.currency-panel__option-flag[data-v-ddad464d] { font-size: 1em; line-height: 1; flex: 0 0 auto;
}

/* ⚠️ The ellipsis has to live on the NAME, the flex CHILD. `text-overflow`
   on a flex CONTAINER reaches nothing — the text is cut with no "…", so the
   panel shows a currency name that does not exist. `min-width: 0` because a
   flex item will not shrink below its content width without it. */
.currency-panel__option-name[data-v-ddad464d] {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.currency-panel__option-code[data-v-ddad464d] {
  flex: 0 0 auto;
  font-size: 0.74em;
  letter-spacing: 0.06em;
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}
.currency-panel__option-mark[data-v-ddad464d] { flex: 0 0 auto; opacity: 0.75;
}
.currency-panel__option--active .currency-panel__option-btn[data-v-ddad464d] { font-weight: 600;
}
.currency-panel__empty[data-v-ddad464d] {
  margin: 0;
  padding: 0.6rem 0.45rem;
  font-size: 0.82rem;
  opacity: 0.65;
}


/* UNSCOPED, like HeaderCta's `.sdk-cta-btn`: the trigger sits in a THEME's
   header, beside elements wearing the theme's scope id, and the panel is
   teleported to <body>. Every selector is under an `sdk-hdr-cur` class, so
   nothing here can reach anything else. */

/* ⚠️ THE TRIGGER IS TEXT, LIKE THE HEADER'S OWN LINKS. Colour is the header's
   ink (`inherit`) — the only value right on a dark bar and a cream one alike;
   the type comes from a nav link via `--hc-*` (see `adoptHeaderType`). */
.sdk-hdr-cur {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  flex-shrink: 0;
  min-height: 40px;
  margin: 0;
  padding: 0 0.5em;
  border: 0;
  background: none;
  color: var(--hc-color, inherit);
  font-family: var(--hc-font, inherit);
  font-size: var(--hc-size, inherit);
  font-weight: var(--hc-weight, inherit);
  letter-spacing: var(--hc-track, inherit);
  text-transform: var(--hc-case, none);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sdk-hdr-cur__code {
  font-variant-numeric: tabular-nums;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 140ms ease;
}
.sdk-hdr-cur:hover .sdk-hdr-cur__code,
.sdk-hdr-cur--open .sdk-hdr-cur__code {
  text-decoration-color: currentColor;
}
.sdk-hdr-cur:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}
/* The same chevron HeaderCta draws on its own caret button. */
.sdk-hdr-cur__caret {
  width: 0.38em;
  height: 0.38em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.12em) rotate(45deg);
  transition: transform 160ms ease;
  flex: none;
  opacity: 0.8;
}
.sdk-hdr-cur--open .sdk-hdr-cur__caret {
  transform: translateY(0.1em) rotate(-135deg);
}

/* The twin, at <body>: fixed in the header's bar, centred on its anchor. A
   transform on our OWN leaf anchors nothing else (H5). */
.sdk-hdr-cur--docked {
  position: fixed;
  transform: translateY(-50%);
}
/* On a see-through bar (a photograph behind it): a plate of the page's own
   ground under the words, so they read on sky and on shadow alike. */
.sdk-hdr-cur--plate {
  min-height: 36px;
  padding: 0 0.8em;
  background: color-mix(in srgb, var(--site-color-bg, #fff) 86%, transparent);
  border-radius: var(--site-radius-sm, 3px);
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.08);
}

/* ⚠️ A HEADER THAT CARRIES IT HOLDS STILL. Blue Apple Beach and Bleecker
   slide their header away on scroll-down (`translateY(-100%)` on the header
   itself). The hotelier turned this on so the guest can change currency
   whenever they look up; a control that scrolls off with the bar is not that.
   Only a header holding the control is touched, which only happens on /book
   with the switch on — every other page keeps the theme's behaviour. */
header:has(.sdk-hdr-cur),
[data-site-header]:has(.sdk-hdr-cur) {
  transform: none !important;
}

/* ── The panel, at <body> ───────────────────────────────────────────────
   Above the stay rail (900), the stay sheet (1000) and the concierge (999);
   under the room quick-view (12000), which is a modal over everything. */
.sdk-hdr-cur-pop {
  position: fixed;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--site-font-ui, var(--site-font-body, inherit));
  background: var(--site-color-surface, var(--site-color-bg, #fff));
  color: var(--site-color-fg, #111);
  border: 1px solid;
  border-color: var(--site-color-border, color-mix(in srgb, currentColor 18%, transparent));
  border-radius: var(--site-radius-sm, 3px);
  box-shadow: 0 18px 44px var(--site-color-shadow-strong, var(--site-color-shadow, rgba(0, 0, 0, 0.18)));
  animation: sdk-hdr-cur-in 160ms ease both;
}
/* The list scrolls; the charge line and the heading stay put above it. */
.sdk-hdr-cur-pop > :last-child { min-height: 0; overflow-y: auto;
}
.sdk-hdr-cur-pop__charge {
  margin: 0;
  padding: 0.75rem 0.85rem 0.65rem;
  border-bottom: 1px solid;
  border-bottom-color: var(--site-color-border, color-mix(in srgb, currentColor 14%, transparent));
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
}
.sdk-hdr-cur-pop__charge-sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  font-weight: 400;
  opacity: 0.65;
}
.sdk-hdr-cur-pop__head {
  margin: 0;
  padding: 0.6rem 0.85rem 0.15rem;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: var(--site-tracking-caps, 0.12em);
  text-transform: uppercase;
  opacity: 0.5;
}
@keyframes sdk-hdr-cur-in {
from { opacity: 0; transform: translateY(-4px);
}
to   { opacity: 1; transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.sdk-hdr-cur-pop { animation: none;
}
.sdk-hdr-cur__caret, .sdk-hdr-cur__code { transition: none;
}
}


.sdk-cta[data-v-5e6a62a1] {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 1px;   /* a hairline seam between the two halves of the split button */
}
.sdk-cta__primary[data-v-5e6a62a1] { display: inline-flex; align-items: center;
}
.sdk-cta__caret-btn[data-v-5e6a62a1] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  cursor: pointer;
  /* Inherits the theme's button class, so it matches the primary half. */
}
.sdk-cta__caret[data-v-5e6a62a1] {
  width: 0.42em;
  height: 0.42em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-0.1em, -0.1em);
  transition: transform 0.18s ease;
  flex: none;
}
.sdk-cta--open .sdk-cta__caret[data-v-5e6a62a1] {
  transform: rotate(-135deg) translate(-0.16em, -0.16em);
}
.sdk-cta__panel[data-v-5e6a62a1] {
  position: absolute;
  top: 100%;
  right: 0;                  /* the CTA lives at the right edge of the bar */
  z-index: 1000;             /* above the concierge bubble (998–999) */
  min-width: max(200px, 100%);
  margin: 0.5rem 0 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--site-color-bg, #fff);
  color: var(--site-color-text, #111);
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  border-radius: var(--site-radius, 4px);
  box-shadow: 0 12px 32px rgb(0 0 0 / 12%);
  font-family: var(--site-font-body, inherit);
}
.sdk-cta__panel[hidden][data-v-5e6a62a1] { display: none;
}
.sdk-cta__item[data-v-5e6a62a1] { margin: 0;
}
.sdk-cta__link[data-v-5e6a62a1] {
  display: block;
  padding: 0.55rem 0.75rem;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  border-radius: calc(var(--site-radius, 4px) * 0.75);
}
.sdk-cta__link[data-v-5e6a62a1]:hover,
.sdk-cta__link[data-v-5e6a62a1]:focus-visible {
  background: color-mix(in srgb, currentColor 8%, transparent);
}

/* The multi-button row. Only ever wraps 2+ buttons — one button keeps its
   own element as the root so the theme's scoped CSS lands unaided. */
.sdk-cta-group[data-v-5e6a62a1] {
  display: inline-flex;
  align-items: center;
  gap: var(--site-space-sm, 0.6rem);
  flex-wrap: wrap;
}
@media (prefers-reduced-motion: reduce) {
.sdk-cta__caret[data-v-5e6a62a1] { transition: none;
}
}


/* ⚠️ THE BUTTON NEVER WRAPS, AND THE THEME CANNOT REACH IT TO SAY SO.
   `link-class` lands ON the anchor itself, so a theme's `:deep(.my-cta)`
   descendant selector matches nothing — which is how "BOOK NOW" ended up on
   two lines in a one-line bar on hotel after hotel. One unscoped rule here,
   on a class the SDK stamps on every top-bar branch, is the only place that
   can hold it. */
.sdk-cta-btn {
  white-space: nowrap;
  flex-shrink: 0;
}
.sdk-cta-group .sdk-cta__btn--secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7em 1.2em;
  border: 1px solid currentColor;
  border-radius: var(--site-radius, 4px);
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease;
}
.sdk-cta-group .sdk-cta__btn--secondary:hover,
.sdk-cta-group .sdk-cta__btn--secondary:focus-visible {
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.sdk-cta-group .sdk-cta__btn--link {
  display: inline-flex;
  align-items: center;
  padding: 0.7em 0.2em;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
}
.sdk-cta-group .sdk-cta__btn--link:hover,
.sdk-cta-group .sdk-cta__btn--link:focus-visible {
  text-decoration-thickness: 2px;
}
@media (prefers-reduced-motion: reduce) {
.sdk-cta-group .sdk-cta__btn--secondary { transition: none;
}
}


/* =====================================================================
 *  THE STAY, IN THE SITE HEADER  (`booking_page.cart_placement: header`)
 *
 *  ⚠️ THIS LIVED IN `styles/mobile-funnel.css` FIRST AND DID NOT BELONG THERE.
 *  That file's whole safety argument is that every rule in it sits inside
 *  `@media (max-width: 720px)`, so a hotel's laptop page cannot move — and
 *  `viewport.css.test.mjs` enforces it. These rules are not phone rules: the
 *  control is rendered at every width, and a hotelier who moves the stay into
 *  the header means it there on a laptop too. Its VISIBILITY is decided in the
 *  script (the setting, a mounted sheet, a non-empty stay), never by a
 *  breakpoint — so there was nothing for a media query to gate, and putting it
 *  in the phone layer was a category error the test correctly refused.
 *
 *  ⚠️ UNSCOPED, like the `sdk-cta__btn--*` fallbacks this file already ships.
 *  The button wears the THEME's own `linkClass`, so the hotel's styling
 *  reaches it; these rules only supply what a button does not have — a glyph
 *  beside a count, and a thumb-sized box.
 * ===================================================================== */
.sdk-stay {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  cursor: pointer;
}
.sdk-stay__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sdk-stay__count {
  font-variant-numeric: tabular-nums;
  line-height: 1;
}


/* =====================================================================
   Tuning surface (law H6). A consumer may set any of these on the element
   it gives the class to; none of them re-hue a locked brand role.
   ===================================================================== */
.site-sound[data-v-c47d7e18] {
  --snd-ink:     var(--site-color-fg, #1a1815);
  --snd-paper:   var(--site-color-bg, #fbf9f5);
  --snd-hairline: color-mix(in srgb, var(--snd-ink) 14%, transparent);
  --snd-h:       38px;
  --snd-radius:  999px;
  --snd-dock-lift: 0px;

  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--snd-ink);
  font-family: var(--site-font-body, inherit);
}

/* ── Floating shell ──────────────────────────────────────────────────
   A hairline plate on frosted paper, not a drop-shadowed bubble. The
   shadow is a single soft lift so it reads as a physical chip over a
   photograph without shouting. */
.site-sound--float[data-v-c47d7e18] {
  position: fixed;
  z-index: 900;
  padding: 3px;
  border-radius: var(--snd-radius);
  background: color-mix(in srgb, var(--snd-paper) 82%, transparent);
  border: 1px solid var(--snd-hairline);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.45);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.22s ease;
}
.site-sound--float[data-v-c47d7e18]:hover { transform: translateY(-1px); box-shadow: 0 14px 34px -14px rgba(0,0,0,0.5);
}

/* Corners. Bottom placements add the measured dock lift, so the control
   sits ABOVE the concierge instead of under it (law E4). */
.site-sound--at-top-right[data-v-c47d7e18]    { top: calc(var(--site-header-h, 64px) + 14px); right: max(14px, env(safe-area-inset-right));
}
.site-sound--at-top-left[data-v-c47d7e18]     { top: calc(var(--site-header-h, 64px) + 14px); left:  max(14px, env(safe-area-inset-left));
}
.site-sound--at-bottom-right[data-v-c47d7e18] { bottom: calc(14px + var(--snd-dock-lift)); right: max(14px, env(safe-area-inset-right));
}
.site-sound--at-bottom-left[data-v-c47d7e18]  { bottom: calc(14px + var(--snd-dock-lift)); left:  max(14px, env(safe-area-inset-left));
}

/* Panels open UPWARD from a bottom-anchored control. */
.site-sound--at-bottom-right .site-sound__panel[data-v-c47d7e18],
.site-sound--at-bottom-left  .site-sound__panel[data-v-c47d7e18] { top: auto; bottom: calc(100% + 0.45rem);
}
.site-sound--at-top-left  .site-sound__panel[data-v-c47d7e18],
.site-sound--at-bottom-left .site-sound__panel[data-v-c47d7e18] { right: auto; left: 0;
}

/* ── The button ──────────────────────────────────────────────────── */
.site-sound__btn[data-v-c47d7e18] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--snd-h);
  padding: 0 0.7rem 0 0.6rem;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: inherit;
}
.site-sound__btn[data-v-c47d7e18]:focus-visible { outline: 2px solid currentColor; outline-offset: 3px;
}
.site-sound__glyph[data-v-c47d7e18] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; line-height: 0; flex: none;
  opacity: 0.9;
}

/* ── The word ────────────────────────────────────────────────────────
   Small caps with wide tracking — the idiom hotel chrome already uses for
   nav and eyebrows, so the control reads as part of the design rather than
   a bolted-on widget. */
.site-sound__label[data-v-c47d7e18] {
  display: flex; flex-direction: column; align-items: flex-start;
  min-width: 0; line-height: 1.2; text-align: left;
}
.site-sound__label-main[data-v-c47d7e18] {
  font-size: 0.66rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--site-tracking-ui, 0.14em);
  white-space: nowrap;
}
.site-sound__label-sub[data-v-c47d7e18] {
  margin-top: 1px;
  font-size: 0.7rem;
  text-transform: none;
  letter-spacing: var(--site-tracking-body, normal);
  opacity: 0.6;
  max-width: 17ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.site-sound__sr[data-v-c47d7e18] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Player card ─────────────────────────────────────────────────── */
.site-sound--widget[data-v-c47d7e18] { --snd-radius: 12px; padding: 4px;
}
.site-sound--widget .site-sound__btn[data-v-c47d7e18] { gap: 0.6rem; padding: 0.25rem 0.65rem 0.25rem 0.25rem; border-radius: 9px;
}
.site-sound__art[data-v-c47d7e18] {
  flex: none; width: 38px; height: 38px; border-radius: 7px;
  object-fit: cover; display: block;
  box-shadow: inset 0 0 0 1px var(--snd-hairline);
}
.site-sound__cue[data-v-c47d7e18] {
  display: inline-flex; line-height: 0; opacity: 0.45;
  margin-left: 0.1rem;
}
.site-sound__btn:hover .site-sound__cue[data-v-c47d7e18] { opacity: 0.85;
}

/* Icon only. */
.site-sound--mini .site-sound__btn[data-v-c47d7e18] { min-width: var(--snd-h); padding: 0; justify-content: center; gap: 0;
}

/* In the header: no chrome of its own — inherit the bar. */
.site-sound--header[data-v-c47d7e18] { background: none; border: 0; box-shadow: none; backdrop-filter: none; padding: 0;
}
.site-sound--header .site-sound__btn[data-v-c47d7e18] { padding: 0 0.4rem;
}
.site-sound--header .site-sound__label-main[data-v-c47d7e18] { font-size: 0.62rem;
}

/* ── Level meter ─────────────────────────────────────────────────────
   Four bars, visible at rest (law H4) — the animation is enhancement, never
   the only way to read the state. */
.site-sound__eq[data-v-c47d7e18] { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px;
}
.site-sound__eq i[data-v-c47d7e18] { width: 2px; height: 35%; background: currentColor; border-radius: 1px;
}
.site-sound__eq.is-animated i[data-v-c47d7e18] { animation: site-sound-eq-c47d7e18 1s ease-in-out infinite;
}
.site-sound__eq.is-animated i[data-v-c47d7e18]:nth-child(2) { animation-delay: 140ms;
}
.site-sound__eq.is-animated i[data-v-c47d7e18]:nth-child(3) { animation-delay: 300ms;
}
.site-sound__eq.is-animated i[data-v-c47d7e18]:nth-child(4) { animation-delay: 460ms;
}
@keyframes site-sound-eq-c47d7e18 {
0%,100% { height: 28%;
}
50% { height: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.site-sound__eq.is-animated i[data-v-c47d7e18] { animation: none; height: 60%;
}
.site-sound--float[data-v-c47d7e18] { transition: none;
}
.site-sound--float[data-v-c47d7e18]:hover { transform: none;
}
}

/* ── Secondary controls + panels ─────────────────────────────────── */
.site-sound__more[data-v-c47d7e18] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-right: 4px; padding: 0;
  background: transparent; border: 0; color: inherit; cursor: pointer;
  opacity: 0.4;
}
.site-sound__more[data-v-c47d7e18]:hover { opacity: 0.9;
}
.site-sound__more[data-v-c47d7e18]:focus-visible { outline: 2px solid currentColor; outline-offset: 2px;
}
.site-sound__panel[data-v-c47d7e18] {
  position: absolute; top: calc(100% + 0.45rem); right: 0;
  min-width: 215px; padding: 0.7rem 0.8rem;
  background: var(--snd-paper);
  color: var(--snd-ink);
  border: 1px solid var(--snd-hairline);
  border-radius: 12px;
  box-shadow: 0 16px 36px -16px rgba(0, 0, 0, 0.45);
  z-index: 1;
}
.site-sound__track[data-v-c47d7e18] { margin: 0; font-size: 0.84rem; line-height: 1.3;
}
.site-sound__artist[data-v-c47d7e18] { margin: 0.12rem 0 0; font-size: 0.73rem; opacity: 0.6;
}
.site-sound__row[data-v-c47d7e18] { display: flex; align-items: center; gap: 0.55rem; margin-top: 0.6rem;
}
.site-sound__vol[data-v-c47d7e18] { flex: 1; min-width: 0; accent-color: currentColor;
}
.site-sound__next[data-v-c47d7e18] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  background: transparent; border: 0; color: inherit; cursor: pointer; opacity: 0.65;
}
.site-sound__next[data-v-c47d7e18]:hover { opacity: 1;
}


/* ── Mobile ─────────────────────────────────────────────────────────
   A 38px cover plus two lines is most of a phone's width, so the card
   sheds its artwork and subtitle and becomes a labelled pill. Tap targets
   clear 44px whatever the layout. */
@media (max-width: 640px) {
.site-sound--at-top-right[data-v-c47d7e18], .site-sound--at-top-left[data-v-c47d7e18] { top: calc(var(--site-header-h, 56px) + 10px);
}
.site-sound--at-top-right[data-v-c47d7e18], .site-sound--at-bottom-right[data-v-c47d7e18] { right: max(10px, env(safe-area-inset-right));
}
.site-sound--at-top-left[data-v-c47d7e18],  .site-sound--at-bottom-left[data-v-c47d7e18]  { left:  max(10px, env(safe-area-inset-left));
}
.site-sound--widget .site-sound__art[data-v-c47d7e18],
  .site-sound__label-sub[data-v-c47d7e18] { display: none;
}
.site-sound--widget[data-v-c47d7e18] { --snd-radius: 999px; padding: 3px;
}
.site-sound--widget .site-sound__btn[data-v-c47d7e18] { padding: 0 0.7rem 0 0.6rem; gap: 0.5rem;
}
.site-sound__btn[data-v-c47d7e18] { min-height: 44px;
}
}


.pop-hdr-utils[data-v-d000ae81] {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.35rem, 1vw, 0.75rem);
  color: inherit;
}
.pop-hdr-utils__btn[data-v-d000ae81] {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  min-width: 40px;
  justify-content: center;
  padding: 0 0.5rem;
  color: inherit;
  text-decoration: none;
  border-radius: 999px;
  transition: opacity 0.2s ease;
}
.pop-hdr-utils__btn[data-v-d000ae81]:hover { opacity: 0.7;
}
.pop-hdr-utils__btn-label[data-v-d000ae81] {
  /* Icon-only by default; themes can reveal labels via a wrapping class. */
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.pop-hdr-utils__lang[data-v-d000ae81] { position: relative;
}
.pop-hdr-utils__lang-toggle[data-v-d000ae81] {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 40px;
  padding: 0 0.55rem;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: 999px;
}
.pop-hdr-utils__lang-toggle[data-v-d000ae81]:hover { opacity: 0.7;
}
.pop-hdr-utils__lang-menu[data-v-d000ae81] {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  min-width: 8rem;
  background: var(--site-surface, #fff);
  color: var(--site-ink, #111);
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 0.6rem;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  z-index: 1200;
}
.pop-hdr-utils__lang-item[data-v-d000ae81] {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.7rem;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: 0.4rem;
}
.pop-hdr-utils__lang-item[data-v-d000ae81]:hover { background: color-mix(in srgb, currentColor 8%, transparent);
}
.pop-hdr-utils__lang-item.is-current[data-v-d000ae81] { font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
.pop-hdr-utils__btn[data-v-d000ae81], .pop-hdr-utils__lang-toggle[data-v-d000ae81] { transition: none;
}
}


/* ==================================================================
   THE BAR — marks on an open sheet · fixed, fully transparent at rest
   One knob: --mf-hdr-ink (this header's rest ink). Default is ink —
   safe on paper page tops. A page opening on a dark full-bleed hero
   marks that band data-hero-ground="dark" and the global block at the
   foot of this file swaps the marks to cream. On scroll: solid paper,
   one hairline, ink marks — every route.
   ================================================================== */
.mf-hdr[data-v-7e65ba31] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001; /* above SDK panels (1000), below the drawer (1200) */
  /* The page runs edge to edge (viewport-fit=cover): on a notched phone in
     landscape or saved to the home screen, keep the bar's ground under the
     status bar and its controls below it. 0 everywhere else. */
  padding-top: env(safe-area-inset-top, 0px);
  --mf-hdr-ink: var(--site-color-ink-strong, #4a423d);
  --mf-hdr-contrast: var(--site-color-bg, #f3efeb);
  background: var(--site-ground-header, transparent);
  border-bottom: 1px solid transparent;
  color: var(--mf-hdr-ink);
  transition:
    background-color var(--site-duration, 320ms) var(--site-ease, ease),
    border-color var(--site-duration, 320ms) var(--site-ease, ease),
    transform var(--site-duration, 320ms) var(--site-ease, ease);
}
/* ⚠️ THE BAR'S GROUND RUNS UP PAST THE TOP EDGE. iPhone Safari (iOS 26)
   lays a fixed `top: 0` bar BELOW its status-bar strip and scrolls the page
   through that strip, so content showed in a gap above the header (owner,
   iPhone 13, 2026-10-03). This skirt carries the bar's own background up
   behind the status bar; it is off-screen everywhere else. `inherit` keeps
   it transparent in the homepage's logo-only state, where there is no bar. */
.mf-hdr[data-v-7e65ba31]::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 160px;
  background: inherit;
  pointer-events: none;
}
/* Homepage hero state: a logo-only TRANSPARENT strip stuck to the top
   of the PAGE (absolute, not fixed) — the mark alone names the house
   and scrolls away with the hero film. No bar, no controls, until the
   guest is past the hero. */
.mf-hdr--minimal[data-v-7e65ba31] {
  position: absolute;
  background: transparent;
  border-bottom-color: transparent;
}
/* The working bar drops in once the guest clears the hero band. */
.mf-hdr--rise[data-v-7e65ba31] {
  animation: mf-hdr-drop-7e65ba31 420ms var(--site-ease-out, ease) both;
}
@keyframes mf-hdr-drop-7e65ba31 {
from { transform: translateY(-100%);
}
to { transform: none;
}
}
.mf-hdr__burger[data-v-7e65ba31],
.mf-hdr__slh[data-v-7e65ba31],
.mf-hdr__lang[data-v-7e65ba31],
.mf-hdr__end[data-v-7e65ba31] {
  transition:
    opacity var(--site-duration, 320ms) var(--site-ease, ease),
    visibility 0s linear 0s;
}
.mf-hdr--minimal .mf-hdr__burger[data-v-7e65ba31],
.mf-hdr--minimal .mf-hdr__slh[data-v-7e65ba31],
.mf-hdr--minimal .mf-hdr__lang[data-v-7e65ba31],
.mf-hdr--minimal .mf-hdr__end[data-v-7e65ba31] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--site-duration, 320ms) var(--site-ease, ease),
    visibility 0s linear var(--site-duration, 320ms);
}
.mf-hdr--scrolled[data-v-7e65ba31] {
  --mf-hdr-ink: var(--site-ground-header-solid-ink, var(--site-color-ink-strong, #4a423d));
  background: var(--site-ground-header-solid, var(--site-color-bg, #f3efeb));
  border-bottom-color: var(--site-color-border, #e1d7cc);
}

/* Row — full-bleed: burger hugs the left edge, sound toggle the right */
.mf-hdr__row[data-v-7e65ba31] {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-inline: clamp(10px, 1.1vw, 18px);
  min-height: clamp(72px, 7vw, 96px);
  transition: min-height var(--site-duration, 320ms) var(--site-ease, ease);
}

/* Brand mark — dead centre of the bar, independent of the side clusters.
   The centre holds the house mark alone, or the house mark | SLH pair. */
.mf-hdr__center[data-v-7e65ba31] {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
}
.mf-hdr__brand[data-v-7e65ba31] {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--mf-hdr-ink);
}
.mf-hdr__brand[data-v-7e65ba31]:focus-visible {
  outline: 1px solid var(--site-color-accent);
  outline-offset: 4px;
}
.mf-hdr__mark[data-v-7e65ba31] {
  display: block;
  height: clamp(58px, 5.6vw, 78px); /* enlarged again 2026-10-08 */
  width: auto;
  max-width: 44vw;
  object-fit: contain;
  transition: height var(--site-duration, 320ms) var(--site-ease, ease);
}
/* Homepage logo-only state (at the very top only): the mark rests on
   the hero MUCH larger, then shrinks to the working size the moment
   the bar settles in on scroll. The bar is transparent there, so the
   row simply grows to hold it. */
.mf-hdr--minimal .mf-hdr__mark[data-v-7e65ba31] {
  height: clamp(144px, 16.5vw, 225px); /* 25% smaller 2026-10-13 */
  max-width: 90vw;
}
.mf-hdr--minimal .mf-hdr__row[data-v-7e65ba31] {
  min-height: clamp(240px, 34vh, 380px);
}
/* ...and sits a touch lower on the film than dead-centre of that row */
.mf-hdr--minimal .mf-hdr__center[data-v-7e65ba31] {
  transform: translate(-50%, calc(-50% + clamp(14px, 2.4vh, 30px)));
}
/* The SLH pair: a hairline, then the framed wordmark a touch shorter
   than the house mark. Fades in with the working bar. */
.mf-hdr__pair-rule[data-v-7e65ba31] {
  flex: none;
  width: 1px;
  height: clamp(42px, 4vw, 56px);
  margin-inline: clamp(12px, 1.4vw, 20px);
  background: currentColor;
  color: var(--mf-hdr-ink);
  opacity: 0.45;
  animation: mf-pair-in-7e65ba31 420ms var(--site-ease-out, ease) both;
}
.mf-hdr__pair[data-v-7e65ba31] {
  display: block;
  flex: none;
  height: clamp(46px, 4.4vw, 62px);
  width: auto;
  aspect-ratio: 318.37 / 245.92; /* the SVG carries a viewBox only */
  animation: mf-pair-in-7e65ba31 420ms var(--site-ease-out, ease) both;
}
@keyframes mf-pair-in-7e65ba31 {
from { opacity: 0;
}
to { opacity: 1;
}
}
.mf-hdr__mark--light[data-v-7e65ba31] {
  display: none;
}
/* SLH on the booking flow's right edge, where the sound + language
   widgets sit elsewhere — ink on paper, the white cut over a dark hero
   (swap at the foot of this file). */
.mf-hdr__funnel-mark[data-v-7e65ba31] {
  animation: mf-pair-in-7e65ba31 420ms var(--site-ease-out, ease) both;
  display: inline-flex;
  align-items: center;
  flex: none;
  line-height: 0;
}
.mf-hdr__funnel-img[data-v-7e65ba31] {
  display: block;
  height: clamp(58px, 5.6vw, 80px); /* larger, owner 2026-10-09 */
  width: auto;
  aspect-ratio: 318.37 / 245.92; /* the SVG carries a viewBox only */
}
.mf-hdr__funnel-img.mf-hdr__member-img--light[data-v-7e65ba31] {
  display: none;
}
.mf-hdr__slh[data-v-7e65ba31] {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-left: clamp(8px, 1vw, 14px);
  line-height: 0;
}
.mf-hdr__slh-img[data-v-7e65ba31] {
  display: block;
  height: clamp(46px, 4.4vw, 62px);
  width: auto;
  aspect-ratio: 318.37 / 245.92;
}
.mf-hdr__slh-img.mf-hdr__member-img--light[data-v-7e65ba31] {
  display: none;
}
.mf-hdr__wordmark[data-v-7e65ba31] {
  font-family: var(--site-font-display, var(--site-font-heading));
  font-weight: var(--site-type-display-weight, 500);
  font-size: calc(clamp(1.55rem, 2.4vw, 1.9rem) * var(--mf-ts, 1));
  letter-spacing: 0.02em;
  color: var(--mf-hdr-ink);
  white-space: nowrap;
  transition: font-size var(--site-duration, 320ms) var(--site-ease, ease);
}
.mf-hdr--minimal .mf-hdr__wordmark[data-v-7e65ba31] {
  font-size: calc(clamp(2.4rem, 4.5vw, 3.4rem) * var(--mf-ts, 1));
}

/* Right cluster — CTA sits inboard; the sound toggle rides the edge */
.mf-hdr__end[data-v-7e65ba31] {
  display: flex;
  align-items: center;
  flex: none;
  margin-left: auto;
}
.mf-hdr__utils[data-v-7e65ba31] {
  display: flex;
  align-items: center;
  color: var(--mf-hdr-ink);
  font-size: calc(13px * var(--mf-ts, 1));
}
.mf-hdr__utils[data-v-7e65ba31] a,
.mf-hdr__utils[data-v-7e65ba31] button {
  color: inherit;
}
/* The SDK sound widget carries its own ink (--snd-ink, default fg): on the
   ink bar that is fg-on-fg — an invisible control, icon and label alike.
   Hand it the linen ink. (The drawer's utilities sit on the linen foot,
   where the widget's fg default is already right.) */
.mf-hdr__utils[data-v-7e65ba31] .site-sound {
  --snd-ink: var(--mf-hdr-ink);
}
/* The SDK sound toggle's screen-reader label ships un-clipped: its 1×1
   box still paints a glyph sliver that audits as invisible text. Complete
   the clip so the label reaches screen readers and never the canvas. */
.mf-hdr__utils[data-v-7e65ba31] .site-sound__sr,
.mf-drawer__utils[data-v-7e65ba31] .site-sound__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Language switcher (SDK, between the doorway and the sound toggle).
   The list ships as a white rounded card under a soft drop shadow; this
   house has no rounded chrome. Square it, set it on paper behind one
   hairline, and cut the codes in the heading face. */
.mf-hdr__utils[data-v-7e65ba31] .pop-hdr-utils__lang-toggle,
.mf-drawer__utils[data-v-7e65ba31] .pop-hdr-utils__lang-toggle,
.mf-hdr__utils[data-v-7e65ba31] .pop-hdr-utils__lang-item,
.mf-drawer__utils[data-v-7e65ba31] .pop-hdr-utils__lang-item {
  font-family: var(--site-font-heading, var(--site-font-body));
  font-size: calc(0.8125rem * var(--mf-ts, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mf-hdr__utils[data-v-7e65ba31] .pop-hdr-utils__lang-menu,
.mf-drawer__utils[data-v-7e65ba31] .pop-hdr-utils__lang-menu {
  border-radius: 0;
  padding: 4px;
  background: var(--site-color-bg, #e5e0d4);
  border: 1px solid var(--site-color-border-strong, #cfc1b3);
  box-shadow: 0 22px 48px -28px var(--site-color-shadow-deep, rgba(42, 28, 19, 0.5));
}
.mf-hdr__utils[data-v-7e65ba31] .pop-hdr-utils__lang-item,
.mf-drawer__utils[data-v-7e65ba31] .pop-hdr-utils__lang-item {
  border-radius: 0;
  color: var(--site-color-ink-strong, #4a423d);
}
.mf-hdr__utils[data-v-7e65ba31] .pop-hdr-utils__lang-item.is-current,
.mf-drawer__utils[data-v-7e65ba31] .pop-hdr-utils__lang-item.is-current {
  color: var(--site-color-accent-deep, #8c543c);
}

/* Drawer-foot popovers. The SDK anchors the Spotify card and the language
   list BELOW and LEFT of their trigger — right for a bar at the top of the
   page, wrong at the foot of a drawer, where both opened off the bottom of
   the screen and past the sheet's left edge. Anchor them to the foot and
   open UPWARD, inside the sheet's own width. */
.mf-drawer__foot[data-v-7e65ba31] {
  position: relative;
}
.mf-drawer__utils[data-v-7e65ba31] .site-sound,
.mf-drawer__utils[data-v-7e65ba31] .pop-hdr-utils__lang {
  position: static;
}
.mf-drawer__utils[data-v-7e65ba31] .site-sound__spotify {
  top: auto;
  bottom: calc(100% - 4px);
  left: var(--site-gutter, clamp(1.25rem, 6vw, 2.5rem));
  right: var(--site-gutter, clamp(1.25rem, 6vw, 2.5rem));
  width: auto;
  max-width: none;
  z-index: 3;
}
.mf-drawer__utils[data-v-7e65ba31] .pop-hdr-utils__lang-menu {
  top: auto;
  bottom: calc(100% - 4px);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  min-width: 160px;
}
.mf-hdr__cta[data-v-7e65ba31] {
  display: flex;
  align-items: center;
  /* Reserve owns the right edge; language and sound sit to its left */
  order: 2;
  margin-left: clamp(16px, 2vw, 32px);
}
.mf-hdr__utils[data-v-7e65ba31] {
  order: 1;
}
/* "Stay with us" — a proper plate, sized against the enlarged logo */
.mf-hdr__cta[data-v-7e65ba31] .mf-hdr__book {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 34px;
  border: 1px solid var(--mf-hdr-ink);
  background: transparent;
  font-family: 'KohinoorW00-Medium', var(--site-font-body);
  font-size: calc(1.0625rem * var(--mf-ts, 1));
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  color: var(--mf-hdr-ink);
  transition:
    color var(--site-duration, 320ms) var(--site-ease-out, ease),
    background-color var(--site-duration, 320ms) var(--site-ease-out, ease),
    border-color var(--site-duration, 320ms) var(--site-ease-out, ease);
}
.mf-hdr__cta[data-v-7e65ba31] .mf-hdr__book:hover,
.mf-hdr__cta[data-v-7e65ba31] .mf-hdr__book:focus-visible {
  /* house blue on approach (owner, 2026-10-22); dark label keeps it legible */
  background: var(--mf-blue, #6e9ea8);
  border-color: var(--mf-blue, #6e9ea8);
  color: #2a1c13;
}
.mf-hdr__cta[data-v-7e65ba31] .mf-hdr__book:focus-visible {
  outline: 1px solid var(--site-color-accent);
  outline-offset: 3px;
}

/* The membership mark on the booking flow, where the Reserve plate
   would stand. Ink cut on paper, white cut over a dark hero (the swap
   lives with the other marks at the foot of this file). */
.mf-hdr__member[data-v-7e65ba31] {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.mf-hdr__member-img[data-v-7e65ba31] {
  display: block;
  height: 32px;
  width: auto;
}
.mf-hdr__member-img--light[data-v-7e65ba31] {
  display: none;
}

/* Phone language switcher, beside the burger. Off from 768px up, where
   the SDK one in the right-hand utilities does the job. */
.mf-hdr__lang[data-v-7e65ba31] {
  display: none;
  position: relative;
}
.mf-hdr__lang-toggle[data-v-7e65ba31] {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  padding: 0 8px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--mf-hdr-ink);
  font-family: var(--site-font-heading, var(--site-font-body));
  font-size: calc(0.8125rem * var(--mf-ts, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
}
.mf-hdr__lang-toggle[data-v-7e65ba31]:focus-visible {
  outline: 1px solid var(--site-color-accent);
  outline-offset: 2px;
}
.mf-hdr__lang-toggle[aria-expanded='true'] svg[data-v-7e65ba31] {
  transform: rotate(180deg);
}
.mf-hdr__lang-menu[data-v-7e65ba31] {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  z-index: 3;
  min-width: 76px;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--site-color-bg, #e5e0d4);
  border: 1px solid var(--site-color-border-strong, #cfc1b3);
  box-shadow: 0 22px 48px -28px var(--site-color-shadow-deep, rgba(42, 28, 19, 0.5));
}
.mf-hdr__lang-item[data-v-7e65ba31] {
  appearance: none;
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--site-color-ink-strong, #4a423d);
  font-family: var(--site-font-heading, var(--site-font-body));
  font-size: calc(0.8125rem * var(--mf-ts, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mf-hdr__lang-item.is-current[data-v-7e65ba31] {
  color: var(--site-color-accent-deep, #8c543c);
}
.mf-hdr__lang-item[data-v-7e65ba31]:hover,
.mf-hdr__lang-item[data-v-7e65ba31]:focus-visible {
  background: color-mix(in srgb, var(--site-color-ink-strong, #4a423d) 7%, transparent);
  outline: none;
}

/* Hamburger — permanent, far left, ≥44px target */
.mf-hdr__burger[data-v-7e65ba31] {
  display: inline-flex;
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--mf-hdr-ink);
  -webkit-tap-highlight-color: transparent;
}
.mf-hdr__burger[data-v-7e65ba31]:focus-visible {
  outline: 1px solid var(--site-color-accent);
  outline-offset: 3px;
}
.mf-hdr__burger-lines[data-v-7e65ba31] {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 24px;
}
.mf-hdr__burger-lines i[data-v-7e65ba31] {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition:
    transform var(--site-duration, 320ms) var(--site-ease-out, ease),
    background-color var(--site-duration, 320ms) var(--site-ease-out, ease);
}
.mf-hdr__burger-lines i[data-v-7e65ba31]:last-child {
  width: 70%;
  align-self: flex-end;
}
.mf-hdr__burger:hover .mf-hdr__burger-lines i[data-v-7e65ba31] {
  background: var(--site-color-accent);
}
.mf-hdr__burger:hover .mf-hdr__burger-lines i[data-v-7e65ba31]:last-child {
  transform: scaleX(1.42);
  transform-origin: right center;
}

/* ==================================================================
   THE DRAWER — a paper sheet · teleported, z 1200 (> concierge)
   Palm loop breathes faintly under a heavy paper veil; the sheet
   stays legible even where the mp4 cannot decode (veil ≈ ground).
   ================================================================== */
.mf-drawer-root[data-v-7e65ba31] {
  position: fixed;
  inset: 0;
  z-index: 1200;
}
.mf-drawer__backdrop[data-v-7e65ba31] {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--site-color-ink-deep, #38312d) 45%, transparent);
}
.mf-drawer[data-v-7e65ba31] {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(430px, 100%);
  isolation: isolate;
  overflow: hidden;
  background: var(--site-color-bg, #f3efeb);
  border-right: 1px solid var(--site-color-border, #e1d7cc);
  box-shadow: 32px 0 64px -32px rgba(42, 28, 19, 0.4);
}
.mf-drawer__palms[data-v-7e65ba31] {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.1;
  pointer-events: none;
}
.mf-drawer__veil[data-v-7e65ba31] {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    200deg,
    color-mix(in srgb, var(--site-color-bg, #f3efeb) 72%, transparent),
    color-mix(in srgb, var(--site-color-bg, #f3efeb) 88%, transparent)
  );
}
.mf-drawer__scroll[data-v-7e65ba31] {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Drawer top: mark + close */
.mf-drawer__top[data-v-7e65ba31] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px var(--site-gutter, clamp(1.25rem, 6vw, 2.5rem));
  border-bottom: 1px solid var(--site-color-border, #e1d7cc);
}
.mf-drawer__brand[data-v-7e65ba31] {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--site-color-ink-strong, #4a423d);
}
.mf-drawer__brand[data-v-7e65ba31]:focus-visible {
  outline: 1px solid var(--site-color-accent);
  outline-offset: 4px;
}
.mf-drawer__mark[data-v-7e65ba31] {
  display: block;
  height: 48px;
  width: auto;
  max-width: 60vw;
  object-fit: contain;
}
.mf-drawer__wordmark[data-v-7e65ba31] {
  font-family: var(--site-font-display, var(--site-font-heading));
  font-weight: var(--site-type-display-weight, 400);
  font-size: calc(1.35rem * var(--mf-ts, 1));
  letter-spacing: 0.06em;
}
.mf-drawer__close[data-v-7e65ba31] {
  appearance: none;
  background: none;
  border: 1px solid var(--site-color-border-strong, #cfc1b3);
  border-radius: 0;
  cursor: pointer;
  width: 44px;
  height: 44px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--site-color-ink-strong, #4a423d);
  transition:
    border-color var(--site-duration, 320ms) var(--site-ease-out, ease),
    color var(--site-duration, 320ms) var(--site-ease-out, ease);
  -webkit-tap-highlight-color: transparent;
}
.mf-drawer__close[data-v-7e65ba31]:hover {
  border-color: var(--site-color-accent);
  color: var(--site-color-accent-deep, #a35c36);
}
.mf-drawer__close[data-v-7e65ba31]:focus-visible {
  outline: 1px solid var(--site-color-accent);
  outline-offset: 3px;
}

/* Drawer nav — large serif ink links on hairline seams */
.mf-drawer__nav[data-v-7e65ba31] {
  padding: clamp(12px, 3vh, 28px) var(--site-gutter, clamp(1.25rem, 6vw, 2.5rem)) 8px;
}
.mf-drawer__list[data-v-7e65ba31] {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mf-drawer__item[data-v-7e65ba31] {
  border-bottom: 1px solid var(--site-color-border, #e1d7cc);
  opacity: 0;
  transform: translateY(8px);
  animation: mf-drawer-rise-7e65ba31 var(--site-duration-slow, 700ms) var(--site-ease-out, ease) forwards;
  animation-delay: calc(120ms + var(--i, 0) * var(--site-stagger, 90ms));
}
@keyframes mf-drawer-rise-7e65ba31 {
to {
    opacity: 1;
    transform: none;
}
}
.mf-drawer__nav[data-v-7e65ba31] a,
.mf-drawer__nav[data-v-7e65ba31] button {
  color: var(--site-color-ink-strong, #4a423d);
  text-decoration: none;
}
.mf-drawer__nav[data-v-7e65ba31] .mf-drawer__link {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(12px, 2.2vh, 18px) 0;
  font-family: var(--site-font-display, var(--site-font-heading));
  font-weight: var(--site-type-display-weight, 400);
  font-size: calc(clamp(1.7rem, 7vw, 2.2rem) * var(--mf-ts, 1));
  line-height: 1.15;
  letter-spacing: 0.005em;
  text-align: left;
  text-decoration: none;
  color: var(--site-color-ink-deep, #38312d);
  transition:
    color var(--site-duration, 320ms) var(--site-ease-out, ease),
    padding-left var(--site-duration, 320ms) var(--site-ease-out, ease);
}
.mf-drawer__nav[data-v-7e65ba31] .mf-drawer__link:hover,
.mf-drawer__nav[data-v-7e65ba31] .mf-drawer__link:focus-visible {
  color: var(--site-color-accent-deep, #a35c36);
  padding-left: 10px;
}
.mf-drawer__nav[data-v-7e65ba31] .mf-drawer__link:focus-visible {
  outline: 1px solid var(--site-color-accent);
  outline-offset: 3px;
}
.mf-drawer__nav[data-v-7e65ba31] .mf-drawer__link.router-link-active {
  color: var(--site-color-accent-deep, #a35c36);
}

/* Drawer CTA — the one ink plate in the sheet */
.mf-drawer__book[data-v-7e65ba31] {
  padding: clamp(20px, 4vh, 32px) var(--site-gutter, clamp(1.25rem, 6vw, 2.5rem));
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* The doorway — generous, scaled to the enlarged brand mark */
.mf-drawer__book[data-v-7e65ba31] .mf-drawer__cta {
  width: 100%;
  min-height: 64px;
  padding: 18px 28px;
  font-size: calc(clamp(1.15rem, 4vw, 1.35rem) * var(--mf-ts, 1));
  letter-spacing: 0.02em;
}

/* Foot — house key on a hairline seam, then utilities */
.mf-drawer__foot[data-v-7e65ba31] {
  margin-top: auto;
  padding: clamp(18px, 3vh, 28px) var(--site-gutter, clamp(1.25rem, 6vw, 2.5rem)) clamp(22px, 4vh, 34px);
  color: var(--site-color-fg);
}
.mf-drawer__seam[data-v-7e65ba31] {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.mf-drawer__seam-rule[data-v-7e65ba31] {
  flex: 1 1 auto;
  height: 1px;
  background: color-mix(in srgb, var(--site-color-accent) 60%, transparent);
}
/* the house key reads as an engraving only at size — ≥180px or not at all */
.mf-drawer__key[data-v-7e65ba31] {
  flex: none;
  width: min(180px, 52vw);
  height: auto;
  opacity: 0.9;
}
.mf-drawer__utils[data-v-7e65ba31] {
  display: flex;
  justify-content: center;
  color: var(--site-color-ink-soft, #7d726a);
  font-size: calc(14px * var(--mf-ts, 1));
}
.mf-drawer__utils[data-v-7e65ba31] a,
.mf-drawer__utils[data-v-7e65ba31] button {
  color: inherit;
}

/* ==================================================================
   DRAWER TRANSITION — the wall swings shut/open
   ================================================================== */
.mfdrw-enter-active[data-v-7e65ba31] {
  transition: opacity 320ms var(--site-ease, ease);
}
.mfdrw-leave-active[data-v-7e65ba31] {
  transition: opacity 260ms var(--site-ease, ease);
}
.mfdrw-enter-from[data-v-7e65ba31],
.mfdrw-leave-to[data-v-7e65ba31] {
  opacity: 0;
}
.mfdrw-enter-active .mf-drawer[data-v-7e65ba31] {
  transition: transform 560ms var(--site-ease-expo, cubic-bezier(0.16, 1, 0.3, 1));
}
.mfdrw-leave-active .mf-drawer[data-v-7e65ba31] {
  transition: transform 300ms var(--site-ease, ease);
}
.mfdrw-enter-from .mf-drawer[data-v-7e65ba31],
.mfdrw-leave-to .mf-drawer[data-v-7e65ba31] {
  transform: translateX(-100%);
}

/* ==================================================================
   RESPONSIVE — one grammar at every width; the bar just compacts
   ================================================================== */
@media (max-width: 1099.98px) {
.mf-hdr__row[data-v-7e65ba31] {
    min-height: 72px;
}
.mf-hdr__cta[data-v-7e65ba31] .mf-hdr__book {
    padding: 12px 22px;
    font-size: calc(1rem * var(--mf-ts, 1));
}
.mf-hdr__cta[data-v-7e65ba31] {
    margin-left: 12px;
}
.mf-hdr__member-img[data-v-7e65ba31] {
    height: 28px;
}
}

/* Phones: the language moves beside the burger */
@media (max-width: 767.98px) {
.mf-hdr__lang[data-v-7e65ba31] {
    display: block;
}
.mf-hdr__utils[data-v-7e65ba31] .pop-hdr-utils__lang {
    display: none;
}
.mf-hdr__row[data-v-7e65ba31] {
    gap: 4px;
}
  /* booking flow, phones: the mark smaller again */
.mf-hdr__member-img[data-v-7e65ba31] {
    height: 24px;
}
.mf-hdr__pair-rule[data-v-7e65ba31] {
    height: 34px;
    margin-inline: 10px;
}
.mf-hdr__pair[data-v-7e65ba31] {
    height: 40px;
}
.mf-hdr__slh[data-v-7e65ba31] {
    margin-left: 2px;
}
.mf-hdr__slh-img[data-v-7e65ba31] {
    height: 34px;
}
.mf-hdr__funnel-img[data-v-7e65ba31] {
    height: 52px;
}
  /* booking flow: the centre carries the pair, so the language moves to
     the right edge (that side has no doorway there) */
.mf-hdr--funnel .mf-hdr__lang[data-v-7e65ba31] {
    order: 5;
    margin-left: auto;
}
.mf-hdr--funnel .mf-hdr__end[data-v-7e65ba31] {
    order: 6;
    margin-left: 0;
}
.mf-hdr--funnel .mf-hdr__lang-menu[data-v-7e65ba31] {
    left: auto;
    right: 0;
}
}
@media (max-width: 519.98px) {
  /* narrow phones: the doorway STAYS on the bar — it takes the sound
     toggle's edge spot (the toggle still lives in the drawer foot) */
.mf-hdr__utils[data-v-7e65ba31] {
    display: none;
}
.mf-hdr__cta[data-v-7e65ba31] {
    margin-left: 0;
}
.mf-hdr__cta[data-v-7e65ba31] .mf-hdr__book {
    padding: 10px 16px;
    font-size: calc(0.9375rem * var(--mf-ts, 1));
}
  /* keep the centred mark clear of the compact doorway */
.mf-hdr__mark[data-v-7e65ba31] {
    max-width: 32vw;
}
.mf-hdr__member-img[data-v-7e65ba31] {
    height: 20px;
}
}

/* ==================================================================
   REDUCED MOTION — the wall stands still; palms rest
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
.mf-drawer__palms[data-v-7e65ba31] {
    display: none;
}
.mf-hdr--rise[data-v-7e65ba31] {
    animation: none;
}
.mf-hdr[data-v-7e65ba31],
  .mf-hdr__cta[data-v-7e65ba31] .mf-hdr__book,
  .mf-hdr__burger-lines i[data-v-7e65ba31],
  .mf-drawer__close[data-v-7e65ba31],
  .mf-drawer__nav[data-v-7e65ba31] .mf-drawer__link {
    transition: none;
}
.mf-drawer__item[data-v-7e65ba31] {
    animation: none;
    opacity: 1;
    transform: none;
}
.mfdrw-enter-active[data-v-7e65ba31],
  .mfdrw-leave-active[data-v-7e65ba31],
  .mfdrw-enter-active .mf-drawer[data-v-7e65ba31],
  .mfdrw-leave-active .mf-drawer[data-v-7e65ba31] {
    transition: none;
}
}


body:has(.mf-hdr) .app-shell__main { padding-top: 0;
}

/* /book: the cart rail docks with the SDK's 16px sticky top, which slid
   it under this fixed bar (97px at 1440, 73px below 1100). Dock it the
   bar's height + the same 16px of air below. */
body:has(.mf-hdr) main.j17-book .j17-book__rail {
  top: calc(clamp(72px, 7vw, 96px) + 17px + env(safe-area-inset-top, 0px)) !important;
}
@media (max-width: 1099.98px) {
body:has(.mf-hdr) main.j17-book .j17-book__rail {
    top: calc(89px + env(safe-area-inset-top, 0px)) !important;
}
}

/* /book (SDK funnel masthead, restyle-only region): its own vignette
   fades to transparent from 24%–40%, exactly where the cream eyebrow,
   title and "Reserve" marker sit over bright pool water (measured
   1.11:1 against the plate if the photo fails). Deepen the veil with
   the house ink so the type keeps a painted ground top to bottom. */
/* /book masthead: the SDK's own "Reserve" marker rides the hero's top-right
   chrome and collides with this fixed header's Reserve plate — hide it;
   the header button is the one doorway. */
body:has(.mf-hdr) .j17-about__hero-marker { display: none;
}
body:has(.mf-hdr):has(.j17-about__masthead) .j17-about__hero-vignette {
  background: linear-gradient(
    rgba(42, 28, 19, 0.5) 0%,
    rgba(42, 28, 19, 0.28) 32%,
    rgba(42, 28, 19, 0.22) 55%,
    rgba(42, 28, 19, 0.55) 78%,
    rgba(42, 28, 19, 0.8) 100%
  );
}
body:has([data-hero-ground='dark']) .mf-hdr:not(.mf-hdr--scrolled) {
  --mf-hdr-ink: var(--site-color-on-dark, #f3efeb);
  --mf-hdr-contrast: var(--site-color-ink-deep, #38312d);
  /* The painted ground travels WITH the ink swap: the cream marks'
     nearest painted ancestor must hold ≥3:1 (audit measures ancestors,
     and a guest keeps a legible header if the hero photo fails to
     load). One rule here replaced eight page-carried copies at the
     site-wide pass; the veil dissolves into each hero's darkened top. */
  background: rgba(42, 28, 19, 0.62);
}
body:has([data-hero-ground='dark']) .mf-hdr:not(.mf-hdr--scrolled) .mf-hdr__mark--ink {
  display: none;
}
body:has([data-hero-ground='dark']) .mf-hdr:not(.mf-hdr--scrolled) .mf-hdr__mark--light {
  display: block;
}
body:has([data-hero-ground='dark']) .mf-hdr:not(.mf-hdr--scrolled) .mf-hdr__member-img--ink {
  display: none;
}
body:has([data-hero-ground='dark']) .mf-hdr:not(.mf-hdr--scrolled) .mf-hdr__member-img--light {
  display: block;
}

/* Homepage logo-only state: no veil at all — the strip is transparent
   and only the cream mark rides the hero (its scrim already darkens
   the photograph's top edge enough to carry one mark). */
body:has([data-hero-ground='dark']) .mf-hdr--minimal:not(.mf-hdr--scrolled) {
  background: transparent;
}


/* =====================================================================
   The Namron block — solid ink ground, palm loop at ≤12%, cream marks.
   Tuning surface: --nf-foot-ink (cream), --nf-foot-faint (secondary).
   ===================================================================== */
.nf-footer[data-v-f0d42cc8] {
  --nf-foot-ink: var(--site-color-footer-fg, #efe7de);
  --nf-foot-faint: color-mix(in srgb, var(--nf-foot-ink) 72%, transparent);
  --nf-foot-rule: color-mix(in srgb, var(--nf-foot-ink) 26%, transparent);
  position: relative;
  /* NO `isolation: isolate` here: the accessibility widget below is a
     fixed child of this footer, and an isolated stack would trap its
     z-index under the header and page bands. The palms (z0) / inner
     (z1) layering still holds without it. */
  overflow: hidden;
  background: var(--site-color-footer-bg, var(--site-color-ink-deep, #38312d));
  color: var(--nf-foot-ink);
  font-family: var(--site-font-body);
  font-size: calc(var(--site-type-size-base, 1rem) * var(--mf-ts, 1));
  line-height: var(--site-type-body-leading, 1.5);
}
.nf-footer__palms[data-v-f0d42cc8] {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.12;
  filter: sepia(0.4) saturate(0.6) brightness(0.9);
  pointer-events: none;
}
.nf-footer__inner[data-v-f0d42cc8] {
  position: relative;
  z-index: 1;
  /* full-bleed register: the footer owns the whole viewport width,
     held back only by a breathing gutter. No deep bottom reserve —
     the concierge dock hides itself at the page end. */
  max-width: none;
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 4.5vw, 4.5rem)
    clamp(1.5rem, 2.5vw, 2rem);
  box-sizing: border-box;
}

/* Accessibility widget (hotelier request 2026-10-02): the SDK pill
   mounts INSIDE this footer (`.a11y-panel--footer`), but it is pinned
   to the viewport's bottom-right so it follows the guest on every page.
   Fixed escapes the footer's overflow clip; z 998 sits over the page
   and header bands, under the concierge (999) and policy modal (1200).
   The "Display settings" sheet opens upward, anchored to the right. */
.nf-footer[data-v-f0d42cc8] .a11y-panel {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  left: auto;
  top: auto;
  z-index: 998;
  width: auto;
  margin: 0;
  padding: 0;
}
.nf-footer[data-v-f0d42cc8] .a11y-panel__trigger {
  /* icon-only disc at every width (hotelier 2026-10-02); the visually
     clipped label below stays as the button's accessible name */
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  justify-content: center;
  /* !important: the SDK's footer skin paints the pill transparent */
  background: var(--site-color-footer-bg, var(--site-color-ink-deep, #38312d)) !important;
  color: var(--nf-foot-ink) !important;
  border: 1px solid var(--nf-foot-rule) !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 32px -14px rgba(20, 16, 14, 0.55);
  transition:
    border-color var(--site-duration, 320ms) var(--site-ease-out, ease),
    color var(--site-duration, 320ms) var(--site-ease-out, ease);
}
.nf-footer[data-v-f0d42cc8] .a11y-panel__trigger:hover,
.nf-footer[data-v-f0d42cc8] .a11y-panel__trigger[aria-expanded='true'] {
  border-color: var(--site-color-accent, #d58a5d) !important;
  color: var(--site-color-accent, #d58a5d) !important;
}
/* !important: the SDK's footer-placement rule pins the sheet's left
   edge to the pill with a higher-specificity selector */
.nf-footer[data-v-f0d42cc8] .a11y-panel__sheet {
  left: auto !important;
  right: 0 !important;
  top: auto !important;
  bottom: calc(100% + 10px) !important;
  max-height: min(560px, calc(100dvh - 96px));
  overflow-y: auto;
}
.nf-footer[data-v-f0d42cc8] .a11y-panel__trigger-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap;
}
/* phones: the concierge band owns the bottom edge, so the disc rides
   just above it */
@media (max-width: 640px) {
.nf-footer[data-v-f0d42cc8] .a11y-panel {
    bottom: calc(92px + env(safe-area-inset-bottom));
    right: 12px;
}
.nf-footer[data-v-f0d42cc8] .a11y-panel__sheet {
    width: min(310px, calc(100vw - 24px));
}
}
@media (prefers-reduced-motion: reduce) {
.nf-footer[data-v-f0d42cc8] .a11y-panel__trigger { transition: none;
}
}

/* Property line */
/* set like the Namron wordmark: its serif (--mf-font-wordmark, loaded in
   primitives/button.css), light, tracked wide */
/* the Namron wordmark alone, large, centred over the hairline; glyphs
   come from the sprite, inked in the footer cream */
.nf-footer__sprite[data-v-f0d42cc8] {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.nf-footer__property[data-v-f0d42cc8] {
  display: flex;
  justify-content: center;
  margin: 0 0 clamp(1rem, 1.6vw, 1.5rem);
  color: var(--nf-foot-ink);
}
.nf-footer__group[data-v-f0d42cc8] {
  display: block;
  height: auto;
  fill: currentColor;
}
/* the official Namron lockup: HOSPITALITY always set below NAMRON */
.nf-footer__group--stack[data-v-f0d42cc8] {
  width: clamp(200px, 22vw, 300px);
}
@media (max-width: 640px) {
.nf-footer__group--stack[data-v-f0d42cc8] { width: clamp(180px, 56vw, 234px);
}
  /* the wordmark block sits tight on phones */
.nf-footer__inner[data-v-f0d42cc8] { padding-top: 1.1rem;
}
.nf-footer__property[data-v-f0d42cc8] { margin-bottom: 0.7rem;
}
.nf-footer__grid[data-v-f0d42cc8] { padding-top: 1.25rem;
}
}

/* Hairlines */
.nf-footer__rule[data-v-f0d42cc8] {
  display: block;
  height: 1px;
  background: var(--nf-foot-rule);
}
.nf-footer__rule--full[data-v-f0d42cc8] {
  width: 100%;
}

/* Three registers — lockup · hotels (wide, Mexico in two columns) ·
   dining & wellness drawers */
.nf-footer__grid[data-v-f0d42cc8] {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(0, 2.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
  padding-block: clamp(2rem, 3.5vw, 3rem);
}
/* no brand column: the two drawer registers share the width, centred and
   held to a reading measure */
.nf-footer__grid--drawers[data-v-f0d42cc8] {
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  width: min(100%, 1100px);
  margin-inline: auto;
}

/* Lockup — house mark stacked over the Namron group wordmark, the two
   sharing one centre axis (they differ in width, so left-anchoring them
   read as misaligned) */
.nf-footer__brandcol[data-v-f0d42cc8] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2rem);
  /* an explicit box, not fit-content: the marks size off the parent
     (`min(100%, …)`), so an intrinsic parent width is circular and
     resolves to neither mark's centre */
  width: 100%;
  max-width: 300px;
}
.nf-footer__home[data-v-f0d42cc8] {
  display: inline-flex;
  align-self: center;
}
.nf-footer__home[data-v-f0d42cc8]:focus-visible {
  outline: 1px solid var(--site-color-accent);
  outline-offset: 4px;
}
/* the house badge leads. A DEFINITE width, not `min(100%, …)`: a
   percentage here makes the wrapping link's intrinsic width circular, so
   the link stretches full-width and the badge never centres. */
.nf-footer__mark[data-v-f0d42cc8] {
  display: block;
  width: 190px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
/* Memberships — under the house mark, on the same centre axis, behind
   one short hairline */
.nf-footer__members[data-v-f0d42cc8] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding-top: clamp(1rem, 2vw, 1.5rem);
  border-top: 1px solid color-mix(in srgb, var(--nf-foot-ink, #f3efeb) 22%, transparent);
}
.nf-footer__members-title[data-v-f0d42cc8] {
  margin: 0;
  font-family: var(--site-font-heading, var(--site-font-body));
  font-size: calc(0.75rem * var(--mf-ts, 1));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--nf-foot-ink, #f3efeb) 78%, transparent);
}
.nf-footer__members-list[data-v-f0d42cc8] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nf-footer__member[data-v-f0d42cc8] {
  display: inline-flex;
  line-height: 0;
  opacity: 0.94;
  transition: opacity var(--site-duration, 320ms) var(--site-ease, ease);
}
.nf-footer__member[data-v-f0d42cc8]:hover {
  opacity: 1;
}
.nf-footer__member[data-v-f0d42cc8]:focus-visible {
  outline: 1px solid var(--site-color-accent);
  outline-offset: 4px;
}
.nf-footer__member-img[data-v-f0d42cc8] {
  display: block;
  height: 78px;
  width: auto;
  aspect-ratio: 318.37 / 245.92; /* viewBox-only SVG */
}
.nf-footer__wordmark[data-v-f0d42cc8] {
  font-family: var(--site-font-display, var(--site-font-heading));
  font-size: calc(clamp(1.5rem, 2.4vw, 2rem) * var(--mf-ts, 1));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nf-foot-ink);
}

/* Column heads */
/* heads and drawer titles share one face, one size, full capitals
   (owner, 2026-10-21) */
.nf-footer__head[data-v-f0d42cc8],
.nf-acc__label[data-v-f0d42cc8] {
  font-family: 'KohinoorW00-Medium', var(--site-font-body);
  font-weight: 500;
  font-style: normal;
  font-variant: normal;
  font-size: calc(0.9375rem * var(--mf-ts, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nf-footer__head[data-v-f0d42cc8] {
  margin: 0 0 14px;
  color: var(--nf-foot-ink);
}
.nf-footer__head--second[data-v-f0d42cc8] {
  margin-top: clamp(2rem, 3.5vw, 3rem);
}

/* Accordions */
.nf-acc[data-v-f0d42cc8] {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nf-acc__toggle[data-v-f0d42cc8] {
  appearance: none;
  background: none;
  border: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 2px;
  cursor: pointer;
  color: var(--nf-foot-ink);
  font-family: var(--site-font-heading, var(--site-font-body));
  font-size: calc(1rem * var(--mf-ts, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color var(--site-duration, 320ms) var(--site-ease-out, ease);
}
.nf-acc__toggle[data-v-f0d42cc8]:hover { color: var(--site-color-accent);
}
.nf-acc__toggle[data-v-f0d42cc8]:focus-visible {
  outline: 1px solid var(--site-color-accent);
  outline-offset: 3px;
}
.nf-acc__mark[data-v-f0d42cc8] {
  font-size: calc(1.4rem * var(--mf-ts, 1));
  font-weight: 300;
  line-height: 1;
  color: var(--nf-foot-ink);
}
.nf-acc__list[data-v-f0d42cc8] {
  list-style: none;
  margin: 0;
  padding: 4px 2px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.nf-hotel[data-v-f0d42cc8] {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
/* long groups (México) spread over two columns so the drawer stays short */
.nf-acc__list--cols[data-v-f0d42cc8] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px clamp(1.25rem, 3vw, 2.5rem);
}
.nf-hotel__name[data-v-f0d42cc8] {
  font-family: var(--site-font-heading, var(--site-font-body));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: calc(0.9375rem * var(--mf-ts, 1));
  color: var(--nf-foot-ink);
}
/* the name carries the link — a quiet accent underline, no call-out */
.nf-hotel__link[data-v-f0d42cc8] {
  align-self: flex-start;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--site-color-accent, #d58a5d) 70%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition:
    color var(--site-duration, 320ms) var(--site-ease-out, ease),
    text-decoration-color var(--site-duration, 320ms) var(--site-ease-out, ease);
}
.nf-hotel__link[data-v-f0d42cc8]:hover {
  color: var(--site-color-accent, #d58a5d);
  text-decoration-color: currentColor;
}
.nf-hotel__link[data-v-f0d42cc8]:focus-visible {
  outline: 1px solid var(--site-color-accent);
  outline-offset: 3px;
}
.nf-hotel__line[data-v-f0d42cc8] {
  font-size: calc(0.9375rem * var(--mf-ts, 1));
  color: var(--nf-foot-faint);
}
.nf-hotel__soon[data-v-f0d42cc8] {
  color: var(--nf-foot-faint);
  font-style: italic;
}

/* Legal bar */
.nf-footer__legal[data-v-f0d42cc8] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding-top: clamp(1.25rem, 2vw, 1.75rem);
}
.nf-footer__legal-links[data-v-f0d42cc8] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px clamp(18px, 2.5vw, 36px);
}
.nf-footer__legal-link[data-v-f0d42cc8] {
  font-family: var(--site-font-heading, var(--site-font-body));
  font-size: calc(0.8438rem * var(--mf-ts, 1));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nf-foot-faint);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 0 transparent;
  padding: 4px 1px 6px;
  transition:
    color var(--site-duration, 320ms) var(--site-ease-out, ease),
    box-shadow var(--site-duration, 320ms) var(--site-ease-out, ease);
}
.nf-footer__legal-btn[data-v-f0d42cc8] {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
}
.nf-footer__legal-link[data-v-f0d42cc8]:hover,
.nf-footer__legal-link[data-v-f0d42cc8]:focus-visible {
  color: var(--nf-foot-ink);
  box-shadow: inset 0 -1px 0 0 var(--site-color-accent);
}
.nf-footer__legal-link[data-v-f0d42cc8]:focus-visible {
  outline: 1px solid var(--site-color-accent);
  outline-offset: 3px;
}
/* the bottom links match the footer titles: Kohinoor Medium, full
   capitals, one size (owner, 2026-10-21) */
.nf-footer__legal-links .nf-footer__legal-link[data-v-f0d42cc8] {
  font-family: 'KohinoorW00-Medium', var(--site-font-body);
  font-weight: 500;
  font-style: normal;
  font-variant: normal;
  font-size: calc(0.9375rem * var(--mf-ts, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nf-footer__copyright[data-v-f0d42cc8] {
  margin: 0;
  font-size: calc(0.8438rem * var(--mf-ts, 1));
  letter-spacing: 0.03em;
  color: var(--nf-foot-faint);
}

/* Responsive */
@media (max-width: 1160px) {
.nf-footer__grid[data-v-f0d42cc8] {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
}
  /* the lockup takes its own centred row; hotels + drawers share the next */
.nf-footer__brandcol[data-v-f0d42cc8] {
    grid-column: 1 / -1;
    justify-self: center;
}
}
@media (max-width: 960px) {
.nf-footer__grid[data-v-f0d42cc8] {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 2.75rem);
}
.nf-footer__brandcol[data-v-f0d42cc8] {
    align-items: center;
}
}
@media (max-width: 560px) {
.nf-acc__list--cols[data-v-f0d42cc8] {
    grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.nf-footer__legal[data-v-f0d42cc8] {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}
.nf-footer__legal-links[data-v-f0d42cc8] {
    justify-content: center;
}
}

/* Reduced motion — the block lies still (script also pauses the loop) */
@media (prefers-reduced-motion: reduce) {
.nf-footer__palms[data-v-f0d42cc8] {
    display: none;
}
.nf-hotel__link[data-v-f0d42cc8],
  .nf-footer__legal-link[data-v-f0d42cc8],
  .nf-acc__toggle[data-v-f0d42cc8] {
    transition: none;
}
}

/* ------------------------------------------------------------------ */
/* Policy modal — teleported to <body>. Vue 3 keeps this component's   */
/* scoped data-v attributes on teleported nodes, so these SCOPED rules */
/* still reach the modal without leaking into the global sheet.        */
/* ------------------------------------------------------------------ */
.nf-policy[data-v-f0d42cc8] {
  position: fixed;
  inset: 0;
  z-index: 1200; /* above the concierge bubble (998–999) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: var(--site-color-scrim, rgba(56, 49, 45, 0.55));
  box-sizing: border-box;
}
.nf-policy__panel[data-v-f0d42cc8] {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 720px;
  max-height: min(82vh, 760px);
  min-height: 0;
  background: var(--site-color-surface-raised, var(--site-color-surface, #fcfaf7));
  border: 1px solid var(--site-color-border-strong, #cfc1b3);
  border-radius: 0;
  box-shadow: 0 32px 80px -32px var(--site-color-shadow-deep, rgba(56, 49, 45, 0.24));
  padding: clamp(1.25rem, 3vw, 2.25rem);
  box-sizing: border-box;
}
.nf-policy__head[data-v-f0d42cc8] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--site-color-border, #e1d7cc);
}
.nf-policy__title[data-v-f0d42cc8] {
  margin: 0;
  font-family: var(--site-font-display, var(--site-font-heading));
  font-weight: var(--site-type-display-weight, 500);
  font-size: calc(clamp(1.5rem, 3vw, 1.9375rem) * var(--mf-ts, 1));
  line-height: 1.15;
  color: var(--site-color-ink-strong, var(--site-color-fg));
}
.nf-policy__tabs[data-v-f0d42cc8] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.nf-policy__body[data-v-f0d42cc8] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  white-space: pre-wrap;
  font-family: var(--site-font-body);
  font-size: calc(0.9375rem * var(--mf-ts, 1));
  line-height: 1.6;
  color: var(--site-color-fg);
  padding-right: 8px;
}
.nf-policy__empty[data-v-f0d42cc8] {
  margin: 0;
  font-family: var(--site-font-body);
  font-size: calc(0.9375rem * var(--mf-ts, 1));
  line-height: 1.6;
  color: var(--site-color-fg);
}
.nf-policy__body[data-v-f0d42cc8]:focus-visible {
  outline: 1px solid var(--site-color-accent);
  outline-offset: 2px;
}

/* enter / leave */
.nf-modal-enter-active[data-v-f0d42cc8],
.nf-modal-leave-active[data-v-f0d42cc8] {
  transition: opacity var(--site-duration, 320ms) var(--site-ease-out, ease);
}
.nf-modal-enter-active .nf-policy__panel[data-v-f0d42cc8],
.nf-modal-leave-active .nf-policy__panel[data-v-f0d42cc8] {
  transition:
    transform var(--site-duration, 320ms) var(--site-ease-out, ease),
    opacity var(--site-duration, 320ms) var(--site-ease-out, ease);
}
.nf-modal-enter-from[data-v-f0d42cc8],
.nf-modal-leave-to[data-v-f0d42cc8] { opacity: 0;
}
.nf-modal-enter-from .nf-policy__panel[data-v-f0d42cc8],
.nf-modal-leave-to .nf-policy__panel[data-v-f0d42cc8] {
  opacity: 0;
  transform: translateY(8px);
}
@media (prefers-reduced-motion: reduce) {
.nf-modal-enter-active[data-v-f0d42cc8],
  .nf-modal-leave-active[data-v-f0d42cc8],
  .nf-modal-enter-active .nf-policy__panel[data-v-f0d42cc8],
  .nf-modal-leave-active .nf-policy__panel[data-v-f0d42cc8] {
    transition: none;
}
}


/* Deliberately quiet and token-driven: this band sits directly under a
   bespoke, agent-designed footer on ~every site, so it has to read as
   part of it rather than as a second footer. Inherits the page's font
   and picks up the theme's own surface/ink tokens where they exist.

   A theme that CLAIMS the extras (see composables/useFooterExtras.js)
   embeds this inside its own footer, where standalone-band chrome would
   be wrong. Rather than have the component guess its context, the band
   values are knobs — set them on the element you put the class on:

     .site-footer__extras { --fx-pad: 0; --fx-max-w: none; }

   Custom properties inherit, and Vue applies a parent's class to a child
   component's root, so a theme's scoped rule reaches these. */
.fx[data-v-607a7acc] {
  padding: var(--fx-pad, 1.5rem 1.25rem);
  background: var(--fx-bg, var(--site-footer-bg, var(--color-surface-alt, transparent)));
  color: var(--fx-ink, var(--site-footer-ink, var(--color-ink, inherit)));
  font-size: var(--fx-size, 0.85rem);
}
.fx__inner[data-v-607a7acc] {
  max-width: var(--fx-max-w, var(--site-max-w, 1200px));
  margin: var(--fx-inner-margin, 0 auto);
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  align-items: flex-start;
}
.fx__group[data-v-607a7acc] { min-width: 0;
}
.fx__group--text[data-v-607a7acc] { flex: 1 1 100%;
}
.fx__heading[data-v-607a7acc] {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
  margin: 0 0 0.6rem;
}
.fx__links[data-v-607a7acc] { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem;
}
.fx__link[data-v-607a7acc] {
  color: inherit;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 140ms ease;
}
.fx__link[data-v-607a7acc]:hover, .fx__link[data-v-607a7acc]:focus-visible { opacity: 1; text-decoration: underline;
}
.fx__logos[data-v-607a7acc] {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
}
.fx__logo[data-v-607a7acc] {
  display: block;
  max-height: 38px;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.fx__texts[data-v-607a7acc] { display: grid; gap: 0.35rem;
}
.fx__text[data-v-607a7acc] { margin: 0; opacity: 0.8;
}
@media (max-width: 640px) {
.fx__inner[data-v-607a7acc] { gap: 1.5rem;
}
.fx__group[data-v-607a7acc] { flex: 1 1 100%;
}
}


/* Deliberately quiet and token-driven: this band sits directly under a
   bespoke, agent-designed footer on ~every site, so it has to read as part of
   it rather than as a second footer. Inherits the page's font and picks up
   the theme's own surface/ink tokens where they exist.

   A theme that CLAIMS the affiliations (composables/useAffiliations.js)
   embeds this inside its own footer, where standalone-band chrome would be
   wrong. Rather than have the component guess its context, the band values
   are knobs — set them on the element you put the class on:

     .site-footer__affiliations { --sa-pad: 0; --sa-max-w: none; }

   Custom properties inherit, and Vue applies a parent's class to a child
   component's root, so a theme's scoped rule reaches these. */
.sa[data-v-566a4cc8] {
  padding: var(--sa-pad, var(--site-space-4, 1.25rem));
  /* ⚠️ `--site-footer-bg` / `--site-footer-ink` DO NOT EXIST in the token
     set — the first version invented them, so every hotel silently got the
     raw fallback. Inherit the footer's own ground instead. */
  background: var(--sa-bg, transparent);
  color: var(--sa-ink, inherit);
}
.sa__inner[data-v-566a4cc8] {
  max-width: var(--sa-max-w, var(--site-max, 1200px));
  margin: var(--sa-inner-margin, 0 auto);
}


/* brand record */
@font-face { font-family: "Cormorant Garamond"; src: url("/cdn/01KY8AFYZ6YVYN8NZVMBNGKWBC/01M1J2WB0HC5H0KPZRH5JA75D5.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/cdn/01KY8AFYZ6YVYN8NZVMBNGKWBC/01M1J2YETCXHN8V6RZ0ADTFE8B.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/cdn/01KY8AFYZ6YVYN8NZVMBNGKWBC/01M1J2YFNJZE53J8KKVG4X72ZD.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/cdn/01KY8AFYZ6YVYN8NZVMBNGKWBC/01M1J2YG8QSQ70DB842MWQCTRS.ttf") format("truetype"); font-weight: 250; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/cdn/01KY8AFYZ6YVYN8NZVMBNGKWBC/01M1J2YGRZYBXENSXXKQZR4XTV.ttf") format("truetype"); font-weight: 250; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/cdn/01KY8AFYZ6YVYN8NZVMBNGKWBC/01M1J2YH9JSPEBF4JDBEWD3RF5.ttf") format("truetype"); font-weight: 150; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/cdn/01KY8AFYZ6YVYN8NZVMBNGKWBC/01M1J2YHSM015HWCM51B4JBV37.ttf") format("truetype"); font-weight: 150; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/cdn/01KY8AFYZ6YVYN8NZVMBNGKWBC/01M1J2YJA7J03MH77X66C3KSYC.ttf") format("truetype"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/cdn/01KY8AFYZ6YVYN8NZVMBNGKWBC/01M1J2YJTQR81T9ERW1Q2FVFG1.ttf") format("truetype"); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/cdn/01KY8AFYZ6YVYN8NZVMBNGKWBC/01M1J2YKE9JWXRAT631N1DRX7J.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/cdn/01KY8AFYZ6YVYN8NZVMBNGKWBC/01M1J2YKYDC3XAY17PQBBVKK70.ttf") format("truetype"); font-weight: 900; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/cdn/01KY8AFYZ6YVYN8NZVMBNGKWBC/01M1J2YMEW1NFGKR48ZPXB5GKA.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/cdn/01KY8AFYZ6YVYN8NZVMBNGKWBC/01M1J2YMYY4QW0DEV6Z826C3KH.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/cdn/01KY8AFYZ6YVYN8NZVMBNGKWBC/01M1J2YNG6P8Z5HFDB8XB2CY33.ttf") format("truetype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/cdn/01KY8AFYZ6YVYN8NZVMBNGKWBC/01M1J2YP0GNT4B1A1J7D20CFG0.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/cdn/01KY8AFYZ6YVYN8NZVMBNGKWBC/01M1J2YPG9R5Q7MC2C2FPZN8DE.ttf") format("truetype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/cdn/01KY8AFYZ6YVYN8NZVMBNGKWBC/01M1J2YQ1S4NT3Q830NRF2EFVC.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/cdn/01KY8AFYZ6YVYN8NZVMBNGKWBC/01M1J2YQH13Z48DPVGT9XDZJ0B.ttf") format("truetype"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/cdn/01KY8AFYZ6YVYN8NZVMBNGKWBC/01M1J2YR19Y5VDEZHJ2BZJT218.ttf") format("truetype"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "KohinoorW00-Medium"; src: url("/cdn/01KY8AFYZ6YVYN8NZVMBNGKWBC/01M5G0K50CXBGS9K99DPPWSRP1.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
:root {
  --site-color-fg: #4f4339;
  --site-color-accent: #d38755;
  --site-color-bg: #e5e0d4;
  --site-color-on-accent: #ffffff;
  --concierge-bg: rgb(229 224 212);
  --site-color-fg-muted: #6b6156;
  --a11y-focus: #af7047;
  --site-color-highlight: #a5cad0;
  --site-color-accent-weight: 15;
  --site-color-bg-weight: 60;
  --site-color-fg-weight: 20;
  --site-color-highlight-weight: 5;
  --site-font-display: "Cormorant Garamond", system-ui, -apple-system, "Segoe UI", sans-serif;
  --site-font-body: "EB Garamond", system-ui, -apple-system, "Segoe UI", sans-serif;
  --site-font-kohinoor-medium: "KohinoorW00-Medium", system-ui, -apple-system, "Segoe UI", sans-serif;
}