/* 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;

  /* ⚠️ 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%; }
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;
}


/* chrome components */

.sdk-navacc__row[data-v-50dcd8b2] {
  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-50dcd8b2] {
  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-50dcd8b2] { transform: rotate(-135deg);
}
.sdk-navacc__list[data-v-50dcd8b2] {
  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-50dcd8b2] { display: none;
}
.sdk-navacc__link[data-v-50dcd8b2] {
  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-50dcd8b2]:hover,
.sdk-navacc__link[data-v-50dcd8b2]:focus-visible { opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.sdk-navacc__caret[data-v-50dcd8b2] { transition: none;
}
}


.sdk-cta[data-v-6d008a43] {
  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-6d008a43] { display: inline-flex; align-items: center;
}
.sdk-cta__caret-btn[data-v-6d008a43] {
  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-6d008a43] {
  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-6d008a43] {
  transform: rotate(-135deg) translate(-0.16em, -0.16em);
}
.sdk-cta__panel[data-v-6d008a43] {
  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-6d008a43] { display: none;
}
.sdk-cta__item[data-v-6d008a43] { margin: 0;
}
.sdk-cta__link[data-v-6d008a43] {
  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-6d008a43]:hover,
.sdk-cta__link[data-v-6d008a43]:focus-visible {
  background: color-mix(in srgb, currentColor 8%, transparent);
}
@media (prefers-reduced-motion: reduce) {
.sdk-cta__caret[data-v-6d008a43] { transition: none;
}
}


.sdk-cta[data-v-de91feec] {
  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-de91feec] { display: inline-flex; align-items: center;
}
.sdk-cta__caret-btn[data-v-de91feec] {
  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-de91feec] {
  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-de91feec] {
  transform: rotate(-135deg) translate(-0.16em, -0.16em);
}
.sdk-cta__panel[data-v-de91feec] {
  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-de91feec] { display: none;
}
.sdk-cta__item[data-v-de91feec] { margin: 0;
}
.sdk-cta__link[data-v-de91feec] {
  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-de91feec]:hover,
.sdk-cta__link[data-v-de91feec]: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-de91feec] {
  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-de91feec] { 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-6602a8cc] {
  --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-6602a8cc] {
  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-6602a8cc]: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-6602a8cc]    { top: calc(var(--site-header-h, 64px) + 14px); right: max(14px, env(safe-area-inset-right));
}
.site-sound--at-top-left[data-v-6602a8cc]     { top: calc(var(--site-header-h, 64px) + 14px); left:  max(14px, env(safe-area-inset-left));
}
.site-sound--at-bottom-right[data-v-6602a8cc] { bottom: calc(14px + var(--snd-dock-lift)); right: max(14px, env(safe-area-inset-right));
}
.site-sound--at-bottom-left[data-v-6602a8cc]  { 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-6602a8cc],
.site-sound--at-bottom-left  .site-sound__panel[data-v-6602a8cc],
.site-sound--at-bottom-right .site-sound__spotify[data-v-6602a8cc],
.site-sound--at-bottom-left  .site-sound__spotify[data-v-6602a8cc] { top: auto; bottom: calc(100% + 0.45rem);
}
.site-sound--at-top-left  .site-sound__panel[data-v-6602a8cc],
.site-sound--at-bottom-left .site-sound__panel[data-v-6602a8cc],
.site-sound--at-top-left  .site-sound__spotify[data-v-6602a8cc],
.site-sound--at-bottom-left .site-sound__spotify[data-v-6602a8cc] { right: auto; left: 0;
}

/* ── The button ──────────────────────────────────────────────────── */
.site-sound__btn[data-v-6602a8cc] {
  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-6602a8cc]:focus-visible { outline: 2px solid currentColor; outline-offset: 3px;
}
.site-sound__glyph[data-v-6602a8cc] {
  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-6602a8cc] {
  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-6602a8cc] {
  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-6602a8cc] {
  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-6602a8cc] {
  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-6602a8cc] { --snd-radius: 12px; padding: 4px;
}
.site-sound--widget .site-sound__btn[data-v-6602a8cc] { gap: 0.6rem; padding: 0.25rem 0.65rem 0.25rem 0.25rem; border-radius: 9px;
}
.site-sound__art[data-v-6602a8cc] {
  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-6602a8cc] {
  display: inline-flex; line-height: 0; opacity: 0.45;
  margin-left: 0.1rem;
}
.site-sound__btn:hover .site-sound__cue[data-v-6602a8cc] { opacity: 0.85;
}

/* Icon only. */
.site-sound--mini .site-sound__btn[data-v-6602a8cc] { 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-6602a8cc] { background: none; border: 0; box-shadow: none; backdrop-filter: none; padding: 0;
}
.site-sound--header .site-sound__btn[data-v-6602a8cc] { padding: 0 0.4rem;
}
.site-sound--header .site-sound__label-main[data-v-6602a8cc] { 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-6602a8cc] { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px;
}
.site-sound__eq i[data-v-6602a8cc] { width: 2px; height: 35%; background: currentColor; border-radius: 1px;
}
.site-sound__eq.is-animated i[data-v-6602a8cc] { animation: site-sound-eq-6602a8cc 1s ease-in-out infinite;
}
.site-sound__eq.is-animated i[data-v-6602a8cc]:nth-child(2) { animation-delay: 140ms;
}
.site-sound__eq.is-animated i[data-v-6602a8cc]:nth-child(3) { animation-delay: 300ms;
}
.site-sound__eq.is-animated i[data-v-6602a8cc]:nth-child(4) { animation-delay: 460ms;
}
@keyframes site-sound-eq-6602a8cc {
0%,100% { height: 28%;
}
50% { height: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.site-sound__eq.is-animated i[data-v-6602a8cc] { animation: none; height: 60%;
}
.site-sound--float[data-v-6602a8cc] { transition: none;
}
.site-sound--float[data-v-6602a8cc]:hover { transform: none;
}
}

/* ── Secondary controls + panels ─────────────────────────────────── */
.site-sound__more[data-v-6602a8cc] {
  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-6602a8cc]:hover { opacity: 0.9;
}
.site-sound__more[data-v-6602a8cc]:focus-visible { outline: 2px solid currentColor; outline-offset: 2px;
}
.site-sound__panel[data-v-6602a8cc] {
  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-6602a8cc] { margin: 0; font-size: 0.84rem; line-height: 1.3;
}
.site-sound__artist[data-v-6602a8cc] { margin: 0.12rem 0 0; font-size: 0.73rem; opacity: 0.6;
}
.site-sound__row[data-v-6602a8cc] { display: flex; align-items: center; gap: 0.55rem; margin-top: 0.6rem;
}
.site-sound__vol[data-v-6602a8cc] { flex: 1; min-width: 0; accent-color: currentColor;
}
.site-sound__next[data-v-6602a8cc] {
  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-6602a8cc]:hover { opacity: 1;
}

/* Spotify's player: collapsed, NOT unmounted — the Iframe API controller IS
   this element, so removing it stops the music. */
.site-sound__spotify[data-v-6602a8cc] {
  position: absolute; top: calc(100% + 0.45rem); right: 0;
  width: min(380px, calc(100vw - 28px));
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--snd-hairline);
  box-shadow: 0 16px 36px -16px rgba(0, 0, 0, 0.45);
  background: var(--snd-paper);
  z-index: 1;
  height: 0; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.18s ease;
}
.site-sound__spotify.is-open[data-v-6602a8cc] { height: auto; opacity: 1; visibility: visible; pointer-events: auto;
}
.site-sound__frame[data-v-6602a8cc] { display: block; width: 100%; border: 0;
}

/* ── 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-6602a8cc], .site-sound--at-top-left[data-v-6602a8cc] { top: calc(var(--site-header-h, 56px) + 10px);
}
.site-sound--at-top-right[data-v-6602a8cc], .site-sound--at-bottom-right[data-v-6602a8cc] { right: max(10px, env(safe-area-inset-right));
}
.site-sound--at-top-left[data-v-6602a8cc],  .site-sound--at-bottom-left[data-v-6602a8cc]  { left:  max(10px, env(safe-area-inset-left));
}
.site-sound--widget .site-sound__art[data-v-6602a8cc],
  .site-sound__label-sub[data-v-6602a8cc] { display: none;
}
.site-sound--widget[data-v-6602a8cc] { --snd-radius: 999px; padding: 3px;
}
.site-sound--widget .site-sound__btn[data-v-6602a8cc] { padding: 0 0.7rem 0 0.6rem; gap: 0.5rem;
}
.site-sound__btn[data-v-6602a8cc] { min-height: 44px;
}
.site-sound__spotify[data-v-6602a8cc] { width: min(340px, calc(100vw - 20px));
}
}


.pop-hdr-utils[data-v-2737b9f6] {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.35rem, 1vw, 0.75rem);
  color: inherit;
}
.pop-hdr-utils__btn[data-v-2737b9f6] {
  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-2737b9f6]:hover { opacity: 0.7;
}
.pop-hdr-utils__btn-label[data-v-2737b9f6] {
  /* 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-2737b9f6] { position: relative;
}
.pop-hdr-utils__lang-toggle[data-v-2737b9f6] {
  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-2737b9f6]:hover { opacity: 0.7;
}
.pop-hdr-utils__lang-menu[data-v-2737b9f6] {
  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-2737b9f6] {
  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-2737b9f6]:hover { background: color-mix(in srgb, currentColor 8%, transparent);
}
.pop-hdr-utils__lang-item.is-current[data-v-2737b9f6] { font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
.pop-hdr-utils__btn[data-v-2737b9f6], .pop-hdr-utils__lang-toggle[data-v-2737b9f6] { 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-a39e01ca] {
  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-a39e01ca]::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-a39e01ca] {
  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-a39e01ca] {
  animation: mf-hdr-drop-a39e01ca 420ms var(--site-ease-out, ease) both;
}
@keyframes mf-hdr-drop-a39e01ca {
from { transform: translateY(-100%);
}
to { transform: none;
}
}
.mf-hdr__burger[data-v-a39e01ca],
.mf-hdr__end[data-v-a39e01ca] {
  transition:
    opacity var(--site-duration, 320ms) var(--site-ease, ease),
    visibility 0s linear 0s;
}
.mf-hdr--minimal .mf-hdr__burger[data-v-a39e01ca],
.mf-hdr--minimal .mf-hdr__end[data-v-a39e01ca] {
  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-a39e01ca] {
  --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-a39e01ca] {
  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 */
.mf-hdr__brand[data-v-a39e01ca] {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--mf-hdr-ink);
}
.mf-hdr__brand[data-v-a39e01ca]:focus-visible {
  outline: 1px solid var(--site-color-accent);
  outline-offset: 4px;
}
.mf-hdr__mark[data-v-a39e01ca] {
  display: block;
  height: clamp(50px, 4.8vw, 65px); /* ~20% up from the original size */
  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-a39e01ca] {
  height: clamp(96px, 11vw, 150px);
  max-width: 64vw;
}
.mf-hdr--minimal .mf-hdr__row[data-v-a39e01ca] {
  min-height: clamp(140px, 17vh, 200px);
}
/* ...and sits a touch lower on the film than dead-centre of that row */
.mf-hdr--minimal .mf-hdr__brand[data-v-a39e01ca] {
  transform: translate(-50%, calc(-50% + clamp(14px, 2.4vh, 30px)));
}
.mf-hdr__mark--light[data-v-a39e01ca] {
  display: none;
}
.mf-hdr__wordmark[data-v-a39e01ca] {
  font-family: var(--site-font-display, var(--site-font-heading));
  font-weight: var(--site-type-display-weight, 500);
  font-size: clamp(1.55rem, 2.4vw, 1.9rem);
  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-a39e01ca] {
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
}

/* Right cluster — CTA sits inboard; the sound toggle rides the edge */
.mf-hdr__end[data-v-a39e01ca] {
  display: flex;
  align-items: center;
  flex: none;
  margin-left: auto;
}
.mf-hdr__utils[data-v-a39e01ca] {
  display: flex;
  align-items: center;
  color: var(--mf-hdr-ink);
  font-size: 13px;
}
.mf-hdr__utils[data-v-a39e01ca] a,
.mf-hdr__utils[data-v-a39e01ca] 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-a39e01ca] .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-a39e01ca] .site-sound__sr,
.mf-drawer__utils[data-v-a39e01ca] .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-a39e01ca] .pop-hdr-utils__lang-toggle,
.mf-drawer__utils[data-v-a39e01ca] .pop-hdr-utils__lang-toggle,
.mf-hdr__utils[data-v-a39e01ca] .pop-hdr-utils__lang-item,
.mf-drawer__utils[data-v-a39e01ca] .pop-hdr-utils__lang-item {
  font-family: var(--site-font-heading, var(--site-font-body));
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mf-hdr__utils[data-v-a39e01ca] .pop-hdr-utils__lang-menu,
.mf-drawer__utils[data-v-a39e01ca] .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-a39e01ca] .pop-hdr-utils__lang-item,
.mf-drawer__utils[data-v-a39e01ca] .pop-hdr-utils__lang-item {
  border-radius: 0;
  color: var(--site-color-ink-strong, #4a423d);
}
.mf-hdr__utils[data-v-a39e01ca] .pop-hdr-utils__lang-item.is-current,
.mf-drawer__utils[data-v-a39e01ca] .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-a39e01ca] {
  position: relative;
}
.mf-drawer__utils[data-v-a39e01ca] .site-sound,
.mf-drawer__utils[data-v-a39e01ca] .pop-hdr-utils__lang {
  position: static;
}
.mf-drawer__utils[data-v-a39e01ca] .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-a39e01ca] .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-a39e01ca] {
  display: flex;
  align-items: center;
  /* pulled inward: the sound toggle owns the edge, the doorway sits
     a stride to its left */
  margin-right: clamp(20px, 3.5vw, 64px);
}
/* "Stay with us" — a proper plate, sized against the enlarged logo */
.mf-hdr__cta[data-v-a39e01ca] .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: var(--site-font-heading, var(--site-font-body));
  font-size: 1.0625rem;
  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-a39e01ca] .mf-hdr__book:hover,
.mf-hdr__cta[data-v-a39e01ca] .mf-hdr__book:focus-visible {
  background: var(--mf-hdr-ink);
  color: var(--mf-hdr-contrast, var(--site-color-bg, #f3efeb));
}
.mf-hdr__cta[data-v-a39e01ca] .mf-hdr__book:focus-visible {
  outline: 1px solid var(--site-color-accent);
  outline-offset: 3px;
}

/* Hamburger — permanent, far left, ≥44px target */
.mf-hdr__burger[data-v-a39e01ca] {
  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-a39e01ca]:focus-visible {
  outline: 1px solid var(--site-color-accent);
  outline-offset: 3px;
}
.mf-hdr__burger-lines[data-v-a39e01ca] {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 24px;
}
.mf-hdr__burger-lines i[data-v-a39e01ca] {
  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-a39e01ca]:last-child {
  width: 70%;
  align-self: flex-end;
}
.mf-hdr__burger:hover .mf-hdr__burger-lines i[data-v-a39e01ca] {
  background: var(--site-color-accent);
}
.mf-hdr__burger:hover .mf-hdr__burger-lines i[data-v-a39e01ca]: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-a39e01ca] {
  position: fixed;
  inset: 0;
  z-index: 1200;
}
.mf-drawer__backdrop[data-v-a39e01ca] {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--site-color-ink-deep, #38312d) 45%, transparent);
}
.mf-drawer[data-v-a39e01ca] {
  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-a39e01ca] {
  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-a39e01ca] {
  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-a39e01ca] {
  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-a39e01ca] {
  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-a39e01ca] {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--site-color-ink-strong, #4a423d);
}
.mf-drawer__brand[data-v-a39e01ca]:focus-visible {
  outline: 1px solid var(--site-color-accent);
  outline-offset: 4px;
}
.mf-drawer__mark[data-v-a39e01ca] {
  display: block;
  height: 48px;
  width: auto;
  max-width: 60vw;
  object-fit: contain;
}
.mf-drawer__wordmark[data-v-a39e01ca] {
  font-family: var(--site-font-display, var(--site-font-heading));
  font-weight: var(--site-type-display-weight, 400);
  font-size: 1.35rem;
  letter-spacing: 0.06em;
}
.mf-drawer__close[data-v-a39e01ca] {
  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-a39e01ca]:hover {
  border-color: var(--site-color-accent);
  color: var(--site-color-accent-deep, #a35c36);
}
.mf-drawer__close[data-v-a39e01ca]: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-a39e01ca] {
  padding: clamp(12px, 3vh, 28px) var(--site-gutter, clamp(1.25rem, 6vw, 2.5rem)) 8px;
}
.mf-drawer__list[data-v-a39e01ca] {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mf-drawer__item[data-v-a39e01ca] {
  border-bottom: 1px solid var(--site-color-border, #e1d7cc);
  opacity: 0;
  transform: translateY(8px);
  animation: mf-drawer-rise-a39e01ca 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-a39e01ca {
to {
    opacity: 1;
    transform: none;
}
}
.mf-drawer__nav[data-v-a39e01ca] a,
.mf-drawer__nav[data-v-a39e01ca] button {
  color: var(--site-color-ink-strong, #4a423d);
  text-decoration: none;
}
.mf-drawer__nav[data-v-a39e01ca] .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: clamp(1.7rem, 7vw, 2.2rem);
  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-a39e01ca] .mf-drawer__link:hover,
.mf-drawer__nav[data-v-a39e01ca] .mf-drawer__link:focus-visible {
  color: var(--site-color-accent-deep, #a35c36);
  padding-left: 10px;
}
.mf-drawer__nav[data-v-a39e01ca] .mf-drawer__link:focus-visible {
  outline: 1px solid var(--site-color-accent);
  outline-offset: 3px;
}
.mf-drawer__nav[data-v-a39e01ca] .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-a39e01ca] {
  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-a39e01ca] .mf-drawer__cta {
  width: 100%;
  min-height: 64px;
  padding: 18px 28px;
  font-size: clamp(1.15rem, 4vw, 1.35rem);
  letter-spacing: 0.02em;
}

/* Foot — house key on a hairline seam, then utilities */
.mf-drawer__foot[data-v-a39e01ca] {
  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-a39e01ca] {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.mf-drawer__seam-rule[data-v-a39e01ca] {
  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-a39e01ca] {
  flex: none;
  width: min(180px, 52vw);
  height: auto;
  opacity: 0.9;
}
.mf-drawer__utils[data-v-a39e01ca] {
  display: flex;
  justify-content: center;
  color: var(--site-color-ink-soft, #7d726a);
  font-size: 14px;
}
.mf-drawer__utils[data-v-a39e01ca] a,
.mf-drawer__utils[data-v-a39e01ca] button {
  color: inherit;
}

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

/* ==================================================================
   RESPONSIVE — one grammar at every width; the bar just compacts
   ================================================================== */
@media (max-width: 1099.98px) {
.mf-hdr__row[data-v-a39e01ca] {
    min-height: 72px;
}
.mf-hdr__cta[data-v-a39e01ca] .mf-hdr__book {
    padding: 12px 22px;
    font-size: 1rem;
}
.mf-hdr__cta[data-v-a39e01ca] {
    margin-right: 12px;
}
}
@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-a39e01ca] {
    display: none;
}
.mf-hdr__cta[data-v-a39e01ca] {
    margin-right: 0;
}
.mf-hdr__cta[data-v-a39e01ca] .mf-hdr__book {
    padding: 10px 16px;
    font-size: 0.9375rem;
}
  /* keep the centred mark clear of the compact doorway */
.mf-hdr__mark[data-v-a39e01ca] {
    max-width: 32vw;
}
}

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


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

/* /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;
}

/* 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-e029deb4] {
  --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: var(--site-type-size-base, 1rem);
  line-height: var(--site-type-body-leading, 1.5);
}
.nf-footer__palms[data-v-e029deb4] {
  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-e029deb4] {
  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(3rem, 5.5vw, 4.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-e029deb4] .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-e029deb4] .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-e029deb4] .a11y-panel__trigger:hover,
.nf-footer[data-v-e029deb4] .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-e029deb4] .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-e029deb4] .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-e029deb4] .a11y-panel {
    bottom: calc(92px + env(safe-area-inset-bottom));
    right: 12px;
}
.nf-footer[data-v-e029deb4] .a11y-panel__sheet {
    width: min(310px, calc(100vw - 24px));
}
}
@media (prefers-reduced-motion: reduce) {
.nf-footer[data-v-e029deb4] .a11y-panel__trigger { transition: none;
}
}

/* Property line */
.nf-footer__property[data-v-e029deb4] {
  margin: 0 0 clamp(1.5rem, 2.5vw, 2.25rem);
  text-align: center;
  font-family: var(--site-font-heading, var(--site-font-body));
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nf-foot-ink);
}

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

/* Three registers — lockup · hotels (wide, Mexico in two columns) ·
   dining & wellness drawers */
.nf-footer__grid[data-v-e029deb4] {
  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);
}

/* 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-e029deb4] {
  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-e029deb4] {
  display: inline-flex;
  align-self: center;
}
.nf-footer__home[data-v-e029deb4]: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-e029deb4] {
  display: block;
  width: 190px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
/* the group wordmark sits beneath, quieter. The asset carries deep
   transparent margins, so it is cropped to the type's own band rather
   than left to push the stack apart with empty pixels. */
.nf-footer__lockup[data-v-e029deb4] {
  display: block;
  width: 100%;
  aspect-ratio: 300 / 62;
  object-fit: cover;
  object-position: center 40%;
  /* the artwork is mid-grey; lift and warm it into the footer's cream
     register so it sits with the other marks instead of reading dim */
  filter: brightness(1.5) sepia(0.18);
  opacity: 0.92;
}
.nf-footer__wordmark[data-v-e029deb4] {
  font-family: var(--site-font-display, var(--site-font-heading));
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nf-foot-ink);
}

/* Column heads */
.nf-footer__head[data-v-e029deb4] {
  margin: 0 0 14px;
  font-family: var(--site-font-heading, var(--site-font-body));
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nf-foot-ink);
}
.nf-footer__head--second[data-v-e029deb4] {
  margin-top: clamp(2rem, 3.5vw, 3rem);
}

/* Accordions */
.nf-acc[data-v-e029deb4] {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nf-acc__toggle[data-v-e029deb4] {
  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: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color var(--site-duration, 320ms) var(--site-ease-out, ease);
}
.nf-acc__toggle[data-v-e029deb4]:hover { color: var(--site-color-accent);
}
.nf-acc__toggle[data-v-e029deb4]:focus-visible {
  outline: 1px solid var(--site-color-accent);
  outline-offset: 3px;
}
.nf-acc__mark[data-v-e029deb4] {
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1;
  color: var(--nf-foot-ink);
}
.nf-acc__list[data-v-e029deb4] {
  list-style: none;
  margin: 0;
  padding: 4px 2px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.nf-hotel[data-v-e029deb4] {
  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-e029deb4] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px clamp(1.25rem, 3vw, 2.5rem);
}
.nf-hotel__name[data-v-e029deb4] {
  font-family: var(--site-font-heading, var(--site-font-body));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.9375rem;
  color: var(--nf-foot-ink);
}
/* the name carries the link — a quiet accent underline, no call-out */
.nf-hotel__link[data-v-e029deb4] {
  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-e029deb4]:hover {
  color: var(--site-color-accent, #d58a5d);
  text-decoration-color: currentColor;
}
.nf-hotel__link[data-v-e029deb4]:focus-visible {
  outline: 1px solid var(--site-color-accent);
  outline-offset: 3px;
}
.nf-hotel__line[data-v-e029deb4] {
  font-size: 0.9375rem;
  color: var(--nf-foot-faint);
}
.nf-hotel__soon[data-v-e029deb4] {
  color: var(--nf-foot-faint);
  font-style: italic;
}

/* Legal bar */
.nf-footer__legal[data-v-e029deb4] {
  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-e029deb4] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px clamp(18px, 2.5vw, 36px);
}
.nf-footer__legal-link[data-v-e029deb4] {
  font-family: var(--site-font-heading, var(--site-font-body));
  font-size: 0.8438rem;
  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-e029deb4] {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
}
.nf-footer__legal-link[data-v-e029deb4]:hover,
.nf-footer__legal-link[data-v-e029deb4]:focus-visible {
  color: var(--nf-foot-ink);
  box-shadow: inset 0 -1px 0 0 var(--site-color-accent);
}
.nf-footer__legal-link[data-v-e029deb4]:focus-visible {
  outline: 1px solid var(--site-color-accent);
  outline-offset: 3px;
}
.nf-footer__copyright[data-v-e029deb4] {
  margin: 0;
  font-size: 0.8438rem;
  letter-spacing: 0.03em;
  color: var(--nf-foot-faint);
}

/* Responsive */
@media (max-width: 1160px) {
.nf-footer__grid[data-v-e029deb4] {
    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-e029deb4] {
    grid-column: 1 / -1;
    justify-self: center;
}
}
@media (max-width: 960px) {
.nf-footer__grid[data-v-e029deb4] {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 2.75rem);
}
.nf-footer__brandcol[data-v-e029deb4] {
    align-items: center;
}
}
@media (max-width: 560px) {
.nf-acc__list--cols[data-v-e029deb4] {
    grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.nf-footer__legal[data-v-e029deb4] {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}
.nf-footer__legal-links[data-v-e029deb4] {
    justify-content: center;
}
}

/* Reduced motion — the block lies still (script also pauses the loop) */
@media (prefers-reduced-motion: reduce) {
.nf-footer__palms[data-v-e029deb4] {
    display: none;
}
.nf-hotel__link[data-v-e029deb4],
  .nf-footer__legal-link[data-v-e029deb4],
  .nf-acc__toggle[data-v-e029deb4] {
    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-e029deb4] {
  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-e029deb4] {
  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-e029deb4] {
  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-e029deb4] {
  margin: 0;
  font-family: var(--site-font-display, var(--site-font-heading));
  font-weight: var(--site-type-display-weight, 500);
  font-size: clamp(1.5rem, 3vw, 1.9375rem);
  line-height: 1.15;
  color: var(--site-color-ink-strong, var(--site-color-fg));
}
.nf-policy__tabs[data-v-e029deb4] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.nf-policy__body[data-v-e029deb4] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  white-space: pre-wrap;
  font-family: var(--site-font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--site-color-fg);
  padding-right: 8px;
}
.nf-policy__empty[data-v-e029deb4] {
  margin: 0;
  font-family: var(--site-font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--site-color-fg);
}
.nf-policy__body[data-v-e029deb4]:focus-visible {
  outline: 1px solid var(--site-color-accent);
  outline-offset: 2px;
}

/* enter / leave */
.nf-modal-enter-active[data-v-e029deb4],
.nf-modal-leave-active[data-v-e029deb4] {
  transition: opacity var(--site-duration, 320ms) var(--site-ease-out, ease);
}
.nf-modal-enter-active .nf-policy__panel[data-v-e029deb4],
.nf-modal-leave-active .nf-policy__panel[data-v-e029deb4] {
  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-e029deb4],
.nf-modal-leave-to[data-v-e029deb4] { opacity: 0;
}
.nf-modal-enter-from .nf-policy__panel[data-v-e029deb4],
.nf-modal-leave-to .nf-policy__panel[data-v-e029deb4] {
  opacity: 0;
  transform: translateY(8px);
}
@media (prefers-reduced-motion: reduce) {
.nf-modal-enter-active[data-v-e029deb4],
  .nf-modal-leave-active[data-v-e029deb4],
  .nf-modal-enter-active .nf-policy__panel[data-v-e029deb4],
  .nf-modal-leave-active .nf-policy__panel[data-v-e029deb4] {
    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-4cc3b550] {
  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-4cc3b550] {
  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-4cc3b550] { min-width: 0;
}
.fx__group--text[data-v-4cc3b550] { flex: 1 1 100%;
}
.fx__heading[data-v-4cc3b550] {
  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-4cc3b550] { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem;
}
.fx__link[data-v-4cc3b550] {
  color: inherit;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 140ms ease;
}
.fx__link[data-v-4cc3b550]:hover, .fx__link[data-v-4cc3b550]:focus-visible { opacity: 1; text-decoration: underline;
}
.fx__logos[data-v-4cc3b550] {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
}
.fx__logo[data-v-4cc3b550] {
  display: block;
  max-height: 38px;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.fx__texts[data-v-4cc3b550] { display: grid; gap: 0.35rem;
}
.fx__text[data-v-4cc3b550] { margin: 0; opacity: 0.8;
}
@media (max-width: 640px) {
.fx__inner[data-v-4cc3b550] { gap: 1.5rem;
}
.fx__group[data-v-4cc3b550] { 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-aaf444a2] {
  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-aaf444a2] {
  max-width: var(--sa-max-w, var(--site-max, 1200px));
  margin: var(--sa-inner-margin, 0 auto);
}