@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400&family=Montserrat:wght@300;400;500&display=swap");


/* 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 */
/* themes/default/tokens.css — baseline theme token layer.
 *
 * The DEFAULT (un-themed) theme styles entirely through the SDK base
 * tokens (`--site-color-*`, `--site-font-*`) defined in
 * src/styles/tokens.css, so it needs no overrides of its own. This file
 * exists so that `import '@theme/tokens.css'` in src/main.js always
 * resolves — the v2 builder OVERWRITES it per-hotel with a palette +
 * --<prefix>-* token set synthesized from the personality manifest, and
 * that themed copy must load AFTER the SDK base tokens to win the
 * cascade. A no-op here keeps default/v1 builds correct; v2 fills it in.
 */
:root {
  /* intentionally empty — default theme inherits the SDK base tokens */
}

/* MUSA palette — the six grounds measured off stayatmusa.mx, plus the
 * SDK role tokens they feed. Part file: composed into tokens.css. */

:root {
  /* The grounds. A ground is a whole band; never a card or a panel. */
  --musa-cream: #f3f0e9;
  --musa-ink: #2f2923;
  --musa-olive: #838172;
  --musa-tan: #a07e58;
  --musa-terracotta: #965f43;
  --musa-sand: #e7e1d8;

  /* The fill inside the cream wordmark SVG. Not a ground. */
  --musa-cream-mark: #f3efe7;

  /* Ink at strength. Used for rules, borders and quiet text on cream. */
  --musa-ink-70: color-mix(in srgb, var(--musa-ink) 70%, var(--musa-cream));
  --musa-ink-45: color-mix(in srgb, var(--musa-ink) 45%, var(--musa-cream));
  --musa-ink-22: color-mix(in srgb, var(--musa-ink) 22%, var(--musa-cream));

  /* Cream at strength. The same job on a coloured ground. */
  --musa-cream-70: color-mix(in srgb, var(--musa-cream) 70%, transparent);
  --musa-cream-45: color-mix(in srgb, var(--musa-cream) 45%, transparent);
  --musa-cream-25: color-mix(in srgb, var(--musa-cream) 25%, transparent);

  /* Link colour inside a card, measured on the source. */
  --musa-link-card: #9f7f58;

  /* SDK roles. Every component reads these, so they are the real contract. */
  --site-color-bg: var(--musa-cream);
  --site-color-fg: var(--musa-ink);
  --site-color-accent: var(--musa-terracotta);
  --site-color-on-accent: var(--musa-cream);
  --site-color-border: var(--musa-ink-22);
  --site-color-muted: var(--musa-ink-70);
  --site-color-surface: var(--musa-cream);

  /* One geometry rule for the whole site. */
  --site-radius: 0px;
  --musa-radius: 0px;
  --musa-hairline: 1px;
}

/* MUSA type — two faces, and which one a piece of text gets is a rule.
 *
 * Cormorant Garamond carries every heading and display line and is never
 * set below 20px. Montserrat carries body and every control a hand
 * touches and is never set above 18px.
 *
 * Sizes are fluid so the desktop column lands on the measured number at
 * 1440 and the mobile column lands on the rebuilt scale at 390. Part
 * file: composed into tokens.css. */

:root {
  --site-font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --site-font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --musa-font-display: var(--site-font-display);
  --musa-font-body: var(--site-font-body);

  /* Display sizes. Upper bound = the source's measured value at 1440. */
  --musa-fs-hero: clamp(40px, 5vw, 72px);
  --musa-fs-display: clamp(30px, 3.4vw, 48.96px);
  --musa-fs-script: clamp(26px, 3.06vw, 44px);
  --musa-fs-divider: clamp(22px, 2.01vw, 29px);
  --musa-fs-eyebrow: clamp(15px, 1.667vw, 24px);

  /* Body sizes. */
  --musa-fs-body: clamp(16px, 1.236vw, 17.8px);
  --musa-fs-body-lg: clamp(16px, 1.316vw, 18.95px);
  --musa-fs-card: clamp(15px, 1.083vw, 15.6px);

  /* Controls. */
  --musa-fs-nav: 10px;
  --musa-fs-ui: clamp(13px, 0.972vw, 14px);
  --musa-fs-colhead: 13px;
  --musa-fs-footlink: 12.5px;
  --musa-fs-fine: 10px;
  --musa-fs-drawer: clamp(22px, 2vw, 26px);

  /* Leading. 1.95 on body is the most characteristic number on the page.
     Do not tighten it to make a layout fit. */
  --musa-lh-hero: 1.08;
  --musa-lh-display: 1.05;
  --musa-lh-script: 1.15;
  --musa-lh-body: 1.95;
  --musa-lh-card: 1.9;
  --musa-lh-ui: 1.2;

  /* Tracking. */
  --musa-ls-hero: 0.045em;
  --musa-ls-display: 0.02em;
  --musa-ls-eyebrow: 0.1em;
  --musa-ls-nav: 0.1em;
  --musa-ls-btn: 0.1em;
  --musa-ls-link: 0.22em;
  --musa-ls-colhead: 0.15em;
  --musa-ls-script: 0.06em;

  /* Weights. Cormorant 300 needs size to read; 400 is for italics. */
  --musa-w-display: 300;
  --musa-w-script: 400;
  --musa-w-body: 300;
  --musa-w-ui: 400;

  /* Measure. */
  --musa-measure: 62ch;
  --musa-measure-narrow: 46ch;
}

/* base.css — authored token part */
/* MUSA base — element defaults, so a page does not have to restate the
 * type system to get it. Part file; grounds and motion load after and
 * win where they overlap. */

body {
  background: var(--musa-cream);
  color: var(--musa-ink);
  font-family: var(--musa-font-body);
  font-size: var(--musa-fs-body);
  font-weight: var(--musa-w-body);
  line-height: var(--musa-lh-body);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--musa-font-display);
  font-weight: var(--musa-w-display);
  line-height: var(--musa-lh-display);
  letter-spacing: var(--musa-ls-display);
  color: inherit;
}

h1 {
  font-size: var(--musa-fs-hero);
  line-height: var(--musa-lh-hero);
  letter-spacing: var(--musa-ls-hero);
}

h2 {
  font-size: var(--musa-fs-display);
}

h3 {
  font-size: var(--musa-fs-script);
  line-height: var(--musa-lh-script);
  letter-spacing: var(--musa-ls-script);
}

h4 {
  font-size: var(--musa-fs-divider);
}

h5,
h6 {
  font-size: var(--musa-fs-eyebrow);
}

p {
  margin: 0 0 var(--musa-1);
  max-width: var(--musa-measure);
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: inherit;
}

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

/* One geometry rule. Nothing on this site has a rounded corner. */
img,
video,
button,
input,
select,
textarea {
  border-radius: var(--musa-radius);
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

::selection {
  background: var(--musa-tan);
  color: var(--musa-cream);
}

/* Two display helpers the bands reuse rather than re-declaring.
   The eyebrow sets its own casing; nothing inherits uppercase. */
.musa-eyebrow {
  font-family: var(--musa-font-display);
  font-size: var(--musa-fs-eyebrow);
  font-weight: var(--musa-w-script);
  letter-spacing: var(--musa-ls-eyebrow);
  line-height: 1.5;
  text-transform: uppercase;
}

.musa-script {
  font-family: var(--musa-font-display);
  font-size: var(--musa-fs-script);
  font-weight: var(--musa-w-script);
  font-style: italic;
  line-height: var(--musa-lh-script);
  letter-spacing: 0;
  text-transform: none;
}

/* grounds.css — authored token part */
/* MUSA grounds — a band wears one of six, edge to edge.
 *
 * Each class re-points the SDK fg/bg roles as well as its own background,
 * so a button or a link inside the band picks up the right ink without
 * anyone restyling it. Part file. */

.ground {
  background: var(--site-color-bg);
  color: var(--site-color-fg);
}

.ground--cream {
  --site-color-bg: var(--musa-cream);
  --site-color-fg: var(--musa-ink);
  --site-color-border: var(--musa-ink-22);
  background: var(--musa-cream);
  color: var(--musa-ink);
}

.ground--sand {
  --site-color-bg: var(--musa-sand);
  --site-color-fg: var(--musa-ink);
  --site-color-border: var(--musa-ink-22);
  background: var(--musa-sand);
  color: var(--musa-ink);
}

.ground--ink {
  --site-color-bg: var(--musa-ink);
  --site-color-fg: var(--musa-cream);
  --site-color-border: var(--musa-cream-25);
  background: var(--musa-ink);
  color: var(--musa-cream);
}

.ground--olive {
  --site-color-bg: var(--musa-olive);
  --site-color-fg: var(--musa-cream);
  --site-color-border: var(--musa-cream-25);
  background: var(--musa-olive);
  color: var(--musa-cream);
}

.ground--tan {
  --site-color-bg: var(--musa-tan);
  --site-color-fg: var(--musa-cream);
  --site-color-border: var(--musa-cream-25);
  background: var(--musa-tan);
  color: var(--musa-cream);
}

.ground--terracotta {
  --site-color-bg: var(--musa-terracotta);
  --site-color-fg: var(--musa-cream);
  --site-color-border: var(--musa-cream-25);
  background: var(--musa-terracotta);
  color: var(--musa-cream);
}

/* A band's own padding. Colour is punctuation: a coloured band is always
   shorter than the cream around it. */
.band {
  padding-block: var(--musa-pad-band);
  padding-inline: var(--musa-gutter-band);
}

.band--divider {
  padding-block: var(--musa-pad-divider);
  text-align: center;
}

.band--flush {
  padding-inline: 0;
}

/* motion.css — authored token part */
/* MUSA motion — nothing fades, nothing bounces, nothing is hidden at
 * rest. The only entry animation on this site is a rule drawn from the
 * left under a link. Part file. */

:root {
  --musa-dur-quick: 200ms;
  --musa-dur: 320ms;
  --musa-dur-slow: 400ms;
  --musa-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

html {
  scroll-behavior: smooth;
}

/* The underline draw. Rest state is a VISIBLE element with an invisible
   rule beside it, never hidden content. */
[data-underline="1"] {
  position: relative;
}

[data-underline="1"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--musa-dur-slow) var(--musa-ease);
}

[data-underline="1"].is-visible::after,
[data-underline="1"]:hover::after,
[data-underline="1"]:focus-visible::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  [data-underline="1"]::after {
    transition: none;
    transform: scaleX(1);
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* space.css — authored token part */
/* MUSA spacing — everything is a multiple of 18. When a value is not
 * given anywhere, take a multiple of 18. Part file. */

:root {
  --musa-1: 18px;
  --musa-2: 36px;
  --musa-3: 54px;
  --musa-4: 72px;
  --musa-5: 90px;
  --musa-6: 108px;
  --musa-7: 126px;
  --musa-8: 144px;

  /* Half steps, for the inside of a control. */
  --musa-h1: 9px;
  --musa-h2: 27px;

  /* Content gutters, measured. */
  --musa-gutter: 72px;
  --musa-gutter-band: 57.6px;
  --musa-gutter-deck: 58px;
  --musa-gutter-chrome: 35px;
  --musa-gutter-mobile: 15.6px;

  /* Band padding, measured. */
  --musa-pad-band: 54px;
  --musa-pad-divider: 108px;
  --musa-pad-hero: 108px;

  --musa-header-h: 88px;
  --musa-nav-gap: 34px;
  --musa-footer-col-gap: 44px;
}

/* The header is fixed and transparent over the page, as on the source,
   so the shell's standing top gutter is cancelled on every route. */
.app-shell__main { padding-top: 0; }

@media (max-width: 767px) {
  :root {
    --musa-gutter: var(--musa-gutter-mobile);
    --musa-gutter-band: var(--musa-gutter-mobile);
    --musa-gutter-deck: var(--musa-gutter-mobile);
    --musa-gutter-chrome: var(--musa-gutter-mobile);
    --musa-pad-band: 36px;
    --musa-pad-divider: 54px;
    --musa-pad-hero: 54px;
    --musa-header-h: 64px;
  }
}

/* Phones: no tracked-caps label reads below 11px (mirrors tokens/type.css). */
@media (max-width: 767px) {
  html:root { --musa-fs-fine: 11px; }
}


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

/* The affiliation lockup in the booking chrome is a link the height of the
   mark it carries, which lands under a thumb's worth of target. The mark
   keeps its measured height; the hit area grows around it. */
html .am__link.am__link {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
}


/* primitives */
/* MUSA buttons and links — the locked roles. Pages APPLY these classes;
 * they never re-declare them.
 *
 * Every control is square, 1px, uppercase Montserrat at 14px, and takes
 * its colour from currentColor so a band's ground class relights it with
 * no extra rule. Tuning surface: --musa-btn-ink, --musa-btn-on-ink. */

.site-btn {
  --musa-btn-ink: currentColor;
  --musa-btn-on-ink: var(--site-color-bg, var(--musa-cream));

  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12.15px 25.92px;
  border: var(--musa-hairline) solid var(--musa-btn-ink);
  border-radius: 0;
  background: transparent;
  color: var(--musa-btn-ink);
  font-family: var(--musa-font-body);
  font-size: var(--musa-fs-ui);
  font-weight: var(--musa-w-ui);
  line-height: var(--musa-lh-ui);
  letter-spacing: var(--musa-ls-btn);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--musa-dur-quick) var(--musa-ease),
    color var(--musa-dur-quick) var(--musa-ease);
}

.site-btn:hover,
.site-btn:focus-visible {
  background: var(--musa-btn-ink);
  color: var(--musa-btn-on-ink);
}

.site-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.site-btn[disabled],
.site-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

/* Filled. For the rare place a button must outrank the header's. */
.site-btn--solid {
  background: var(--musa-terracotta);
  border-color: var(--musa-terracotta);
  color: var(--musa-cream);
}

.site-btn--solid:hover,
.site-btn--solid:focus-visible {
  background: var(--musa-ink);
  border-color: var(--musa-ink);
  color: var(--musa-cream);
}

/* Narrow, for a bar that already has its own padding. */
.site-btn--compact {
  padding: 9px 18px;
  font-size: 13px;
}

.site-btn--block {
  display: flex;
  width: 100%;
}

/* The text link. No border, wide tracking, a rule drawn from the left.
   Visible at rest; only the rule moves. */
.site-link {
  display: inline-block;
  position: relative;
  padding-bottom: 11px;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--musa-font-body);
  font-size: var(--musa-fs-ui);
  font-weight: var(--musa-w-ui);
  line-height: var(--musa-lh-ui);
  letter-spacing: var(--musa-ls-link);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.site-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform var(--musa-dur-slow) var(--musa-ease);
}

.site-link:hover::after,
.site-link:focus-visible::after {
  transform: scaleX(0.35);
}

/* Inside a card the link goes tan, as on the source. */
.site-link--card {
  color: var(--musa-link-card);
}

/* A quiet inline link inside a paragraph keeps the body face and size. */
.site-link--inline {
  padding-bottom: 2px;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

/* ==========================================================================
   Booking funnel (/book — the SDK's locked j17 page). Repairs + dressing.
   The page is platform-locked, so CSS here is the only lever; it lives in
   this file because primitives/ always reaches the preview and the build.
   ========================================================================== */

/* 1. Results grid. The engine's body is three tracks (filters | results |
      rail) with no placement, and the affiliation-marks row (`.ab`) spans
      every track. Auto-placement then drops the results into the 224px
      filters track and the rail into the middle one: every room card
      collapses to a photo with a zero-width text column. Pin each child
      to its track. Only where the engine is actually three tracks. */
@media (min-width: 1101px) {
  main.j17-book .j17-book__body > .j17-book__filters {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    align-self: start;
  }
  main.j17-book .j17-book__body > .ab {
    grid-column: 2 / -1 !important;
    grid-row: 1 !important;
  }
  main.j17-book .j17-book__body > .j17-book__results {
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-width: 0;
  }
  main.j17-book .j17-book__body > .j17-book__rail {
    grid-column: 3 !important;
    grid-row: 2 !important;
    align-self: start;
  }
}

/* 2. Masthead. The site header is fixed and the shell no longer pads the
      top of a route, so the masthead clears the bar itself; it is centred
      on the page like the search bar under it rather than floating in a
      1024px column. */
main.j17-book .j17-about__head {
  position: relative;
  max-width: none !important;
  margin: 0 !important;
  padding: calc(92px + 6vh) 48px 5vh !important;
  text-align: center;
}

@media (max-width: 1079px) {
  main.j17-book .j17-about__head {
    padding: calc(87px + 4vh) 20px 4vh !important;
  }
}

/* 3. "A residence at Musa": the engine writes this eyebrow from the hotel
      name and no record owns it, so it is removed here. */
main.j17-book .j17-about__eyebrow {
  display: none !important;
}

/* 4. Decoration, in the site's own grammar: the MUSA sello (theme asset
      01M28D462YSNQP2S0KE2JYWZS7 — "above a section's eyebrow", ink on
      cream, never taller than 56px) crowns the masthead, and the title
      takes the flanking hairlines every MUSA heading carries. The sello
      is painted through a mask so it takes the masthead's own ink. */
main.j17-book .j17-about__head::before {
  content: "";
  display: block;
  width: 37px;
  height: 56px;
  margin: 0 auto 3.4vh;
  background: currentColor;
  -webkit-mask: url("https://d1vgksb0ce1fwh.cloudfront.net/01M26M4X3RQHNHDP282DBY65HB/01M26MNJDYSK4BSX3K88ABKFRS.svg") center / contain no-repeat;
  mask: url("https://d1vgksb0ce1fwh.cloudfront.net/01M26M4X3RQHNHDP282DBY65HB/01M26MNJDYSK4BSX3K88ABKFRS.svg") center / contain no-repeat;
}

main.j17-book .j17-about__title {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  margin-inline: auto !important;
  max-width: none !important;
}

main.j17-book .j17-about__title::before,
main.j17-book .j17-about__title::after {
  content: "";
  flex: 0 0 auto;
  width: clamp(28px, 3vw, 56px);
  height: 1px;
  background: currentColor;
  opacity: 0.8;
}

@media (max-width: 1079px) {
  main.j17-book .j17-about__head::before {
    width: 29px;
    height: 44px;
    margin-bottom: 2.4vh;
  }
}

/* 5. "A member of Design Hotels" beside the sello (Tiger, 2026-09-12).
      The marks band (`.ab`) leaves the results column and sits in the
      masthead's crown, where the sello was: sello, a hairline, then the
      caption over the marks, centred as one group. The sello is drawn by
      the band itself so the group centres on whatever marks it holds; the
      masthead keeps its own (now blank) sello box so the title does not
      move. */
main.j17-book {
  position: relative;
}

main.j17-book .j17-about__head::before {
  background: transparent !important;
}

main.j17-book .ab {
  position: absolute !important;
  top: calc(92px + 6vh);
  left: 50%;
  z-index: 1;
  display: flex !important;
  align-items: center;
  gap: 28px;
  width: max-content !important;
  max-width: calc(100vw - 40px);
  height: 56px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--site-book-ink, #2f2923);
  transform: translateX(-50%);
  grid-column: auto !important;
  grid-row: auto !important;
}

main.j17-book .ab::before {
  content: "";
  flex: 0 0 auto;
  width: 37px;
  height: 56px;
  background: currentColor;
  -webkit-mask: url("https://d1vgksb0ce1fwh.cloudfront.net/01M26M4X3RQHNHDP282DBY65HB/01M26MNJDYSK4BSX3K88ABKFRS.svg") center / contain no-repeat;
  mask: url("https://d1vgksb0ce1fwh.cloudfront.net/01M26M4X3RQHNHDP282DBY65HB/01M26MNJDYSK4BSX3K88ABKFRS.svg") center / contain no-repeat;
}

main.j17-book .ab .am {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 9px !important;
  width: auto !important;
  height: 56px;
  margin: 0 !important;
  padding: 0 0 0 28px !important;
  border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  text-align: left !important;
}

main.j17-book .ab .am__caption {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase;
  opacity: 0.75;
}

main.j17-book .ab .am__caption::before,
main.j17-book .ab .am__caption::after,
main.j17-book .ab .am__name {
  display: none !important;
}

/* The list opens with a 1px full-width pseudo rule; in this column it draws
   a stray line under the caption and wraps the mark onto a second row. */
main.j17-book .ab .am__list::before,
main.j17-book .ab .am__list::after {
  content: none !important;
  display: none !important;
}

main.j17-book .ab .am__list {
  margin: 0 !important;
  padding: 0 !important;
  justify-content: flex-start !important;
  gap: 16px !important;
}

main.j17-book .ab .am__item,
main.j17-book .ab .am__link {
  margin: 0 !important;
  padding: 0 !important;
}

main.j17-book .ab .am__mark {
  display: block;
  width: auto !important;
  height: 18px !important;
  max-width: none !important;
}

@media (max-width: 1079px) {
  main.j17-book .ab {
    top: calc(87px + 4vh);
    gap: 20px;
    height: 44px;
  }
  main.j17-book .ab::before {
    width: 29px;
    height: 44px;
  }
  main.j17-book .ab .am {
    height: 44px;
    gap: 7px !important;
    padding-left: 20px !important;
  }
  main.j17-book .ab .am__caption { font-size: 11px !important; }
  main.j17-book .ab .am__mark { height: 15px !important; }
}

/* 6. Results and cart. With the band gone from the body, every child of
      the grid starts on row 1. When the engine renders no filter column
      (the usual Musa case), its empty 224px track is dropped: the rooms
      take the whole left side and the cart widens to 400px, still inside
      the shell's 1344px. Cards get a taller photo to match. The cart's
      sticky offset clears the fixed site header (92px). */
@media (min-width: 1101px) {
  main.j17-book .j17-book__body > .j17-book__filters {
    grid-row: 1 !important;
  }
  main.j17-book .j17-book__body > .j17-book__results,
  main.j17-book .j17-book__body > .j17-book__rail {
    grid-row: 1 !important;
  }
  main.j17-book .j17-book__body > .j17-book__rail {
    top: 116px !important;
  }

  main.j17-book .j17-book__body:not(:has(> .j17-book__filters)) {
    --j17-body-tracks: minmax(0, 1fr) minmax(0, 400px) !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px) !important;
  }
  main.j17-book .j17-book__body:not(:has(> .j17-book__filters)) > .j17-book__results {
    grid-column: 1 !important;
  }
  main.j17-book .j17-book__body:not(:has(> .j17-book__filters)) > .j17-book__rail {
    grid-column: 2 !important;
  }
  main.j17-book .j17-book__body:not(:has(> .j17-book__filters)) .j17-book-card__media {
    height: auto !important;
    aspect-ratio: 2 / 1 !important;
  }
}

/* 7. The site header on /book only (Tiger, 2026-09-12: "make sure the
      logo in the navbar is centred"). SiteHeader.vue is the header
      session's file and is not touched: these rules only apply while the
      booking page is mounted. On a phone the wordmark sits dead centre
      with the burger kept on the right. On desktop the five links already
      own the centre, so the bar becomes two centred rows: wordmark over
      links. /book carries no header CTA, so the right cluster is taken
      out of the flow rather than left to push the logo off centre. */
@media (min-width: 1001px) {
  body:has(main.j17-book) .musa-hdr {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 14px;
  }
  body:has(main.j17-book) .musa-hdr .musa-hdr__right {
    position: absolute;
    top: 50%;
    right: 2.4vw;
    transform: translateY(-50%);
  }
}

/* On a phone the burger stays in the flow (it is what gives the bar its
   87px) and is pushed to the right edge; the wordmark is lifted out and
   centred on the bar. */
@media (max-width: 1000px) {
  body:has(main.j17-book) .musa-hdr {
    justify-content: flex-end;
  }
  body:has(main.j17-book) .musa-hdr .musa-hdr__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/* 8. "Book your stay" off the page (Tiger, 2026-09-12). The engine's h1
      stays in the document for screen readers, so the page keeps its
      heading, but it no longer shows at any width. The blank sello box
      that crowns the masthead (and carries the Design Hotels band) loses
      the gap it kept for the title. */
main.j17-book .j17-about__title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

main.j17-book .j17-about__title::before,
main.j17-book .j17-about__title::after {
  content: none !important;
}

main.j17-book .j17-about__head::before {
  margin-bottom: 0 !important;
}

/* MUSA forms — the locked field roles. Pages APPLY these; they never
 * re-declare them.
 *
 * There is no box. A field is a label above a rule, taken from the
 * newsletter line in the source's footer, and it is the form language
 * for the whole site. Colour comes from currentColor so a ground class
 * relights it. */

.site-field {
  display: block;
  width: 100%;
}

.site-field__label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--musa-font-body);
  font-size: var(--musa-fs-fine);
  font-weight: var(--musa-w-ui);
  line-height: 1.6;
  letter-spacing: 0.144em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.75;
}

.site-field__control,
.site-field input,
.site-field select,
.site-field textarea {
  display: block;
  width: 100%;
  padding: 6px 0 9px;
  border: 0;
  border-bottom: var(--musa-hairline) solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: var(--musa-font-body);
  font-size: var(--musa-fs-body);
  font-weight: var(--musa-w-body);
  line-height: 1.6;
  transition: border-color var(--musa-dur-quick) var(--musa-ease);
}

.site-field input,
.site-field select,
.site-field textarea {
  border-bottom-color: color-mix(in srgb, currentColor 45%, transparent);
}

.site-field input::placeholder,
.site-field textarea::placeholder {
  color: inherit;
  opacity: 0.5;
}

.site-field input:focus,
.site-field select:focus,
.site-field textarea:focus {
  outline: none;
  border-bottom-color: currentColor;
}

.site-field input:focus-visible,
.site-field select:focus-visible,
.site-field textarea:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.site-field textarea {
  min-height: 108px;
  resize: vertical;
}

.site-field select {
  appearance: none;
  cursor: pointer;
}

/* Help, error and empty-state text. Plain sentences in the body face,
   never red on cream: the rule under the field carries the state. */
.site-field__help,
.site-field__error {
  margin-top: 6px;
  font-family: var(--musa-font-body);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0;
  text-transform: none;
}

.site-field__help {
  opacity: 0.7;
}

.site-field--invalid input,
.site-field--invalid select,
.site-field--invalid textarea {
  border-bottom-width: 2px;
  border-bottom-color: currentColor;
}

/* A field and its submit sharing one line, as in the footer. */
.site-field--inline {
  display: flex;
  align-items: flex-end;
  gap: var(--musa-1);
}

.site-field--inline .site-field__body {
  flex: 1 1 auto;
  min-width: 0;
}

/* Checkbox and radio keep the square geometry. */
.site-field__check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--musa-font-body);
  font-size: var(--musa-fs-card);
  line-height: 1.7;
}

.site-field__check input[type="checkbox"],
.site-field__check input[type="radio"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 5px;
  border: var(--musa-hairline) solid currentColor;
  border-radius: 0;
  accent-color: var(--musa-terracotta);
}

.site-fieldset {
  display: grid;
  gap: var(--musa-2);
  border: 0;
  margin: 0;
  padding: 0;
}


/* theme skin */
/* =====================================================================
 * Concierge skin — MUSA.
 *
 * Everything under `.cl` so only the assistant is re-skinned. Cream
 * ground, ink type, terracotta bubble, and radius 0 on both the bubble
 * and the panel so the widget shares the site's one geometry rule.
 * ===================================================================== */
.cl {
  --site-color-bg: #f3f0e9;
  --site-color-fg: #2f2923;
  --site-color-border: #d8d2c6;
  --site-color-accent: #965f43;
  --site-color-on-accent: #f3f0e9;

  --site-font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --site-font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --concierge-fab-bg: #965f43;
  --concierge-fab-fg: #f3f0e9;
  --concierge-fab-radius: 0px;
  --concierge-panel-radius: 0px;

  /* Pinned to the bottom edge on every page (Tiger, 2026-09-12): the
     launcher's own footer-avoidance lift carried it up the screen at each
     section boundary. Declared on .cl itself, so it overrides the value the
     launcher publishes on <html> for this element only. */
  --concierge-footer-offset: 0px;
}

/* Always the bar, never the corner button (Tiger, 2026-09-12). The
   launcher switches itself to its corner state while some homepage bands
   scroll past, then back at the next one, and briefly on page load; on
   /book it also folds to a round button (cl--compact). These rules give
   both states the bar's own geometry and finish, so the switch changes
   nothing on screen. An open panel is left to the launcher. */
.cl.cl.cl.cl--corner:not(.cl--open),
.cl.cl.cl.cl--compact:not(.cl--open) {
  left: var(--concierge-x, 50%);
  right: auto;
  width: var(--concierge-width, 640px);
  max-width: var(--concierge-max-width, calc(100vw - 24px));
  transform: translateX(-50%);
  padding: 0;
  gap: 10px;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.cl.cl.cl.cl--corner:not(.cl--open) .cl__composer,
.cl.cl.cl.cl--compact:not(.cl--open) .cl__composer { display: flex; }
.cl.cl.cl.cl--corner:not(.cl--open) .cl__peek,
.cl.cl.cl.cl--compact:not(.cl--open) .cl__peek { display: flex; }
.cl.cl.cl.cl--corner:not(.cl--open) .cl__fab,
.cl.cl.cl.cl--compact:not(.cl--open) .cl__fab { display: none; }

/* No frame around the bar (Tiger, 2026-09-12): at rest only the rounded
   composer shows. The open panel keeps the launcher's own frame. */
.cl.cl.cl:not(.cl--open) {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

@media (hover: hover) {
  .cl.cl.cl:not(.cl--open):hover { box-shadow: none; }
  .cl.cl.cl.cl--corner:not(.cl--open):hover,
  .cl.cl.cl.cl--compact:not(.cl--open):hover {
    transform: translateX(-50%) translateY(-3px);
    box-shadow: none;
  }
}

@media (max-width: 640px) {
  .cl.cl.cl.cl--corner:not(.cl--open),
  .cl.cl.cl.cl--compact:not(.cl--open) {
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    transform: none;
  }
  .cl.cl.cl.cl--corner:not(.cl--open):hover,
  .cl.cl.cl.cl--compact:not(.cl--open):hover { transform: translateY(-3px); }
}

/* /book on phones: the stay cart is pinned along the bottom edge. The page
   publishes its height; the bar rides 8px above it, at a fixed height. */
.cl.cl.cl.cl--compact:not(.cl--open) {
  --concierge-footer-offset: calc(var(--site-sticky-footer-h, 0px) + 8px);
}

/* While the cookie banner is up, the launcher's own lift (it measures the
   banner) comes back so the bar sits above it and never covers Accept.
   Once the guest answers, the banner leaves and the bar is pinned again. */
:root:has(.cookie-banner) .cl.cl.cl:not(.cl--open) {
  --concierge-footer-offset: inherit;
}

/* 16px text in the composer so iPhones don't zoom the page on focus. */
@media (max-width: 1000px) {
  .cl.cl .cc__input { font-size: 16px; }
}


/* chrome components */

.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;
}


/* The body's 1.95 leading would inflate every row here; pin it. */
.musa-chrome[data-v-8c81cfdd] {
  line-height: 1.6;
  font-family: 'Montserrat', var(--site-font-body, sans-serif);
  font-size: 16px;
}
.musa-hdr[data-v-8c81cfdd] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.1vh 2.4vw;
  background: #f3efe7;
  color: #2f2923;
}
.musa-hdr__logo[data-v-8c81cfdd] {
  position: relative;
  display: block;
  width: clamp(110px, 7.2vw, 138px);
  aspect-ratio: 120.688 / 32.684;
  color: inherit;
  text-decoration: none;
}
.musa-hdr__mark[data-v-8c81cfdd] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  max-width: none;
}
.musa-hdr__mark--clear[data-v-8c81cfdd] { opacity: 0;
}
.musa-hdr__nav[data-v-8c81cfdd] {
  display: flex;
  gap: clamp(20px, 2.4vw, 46px);
  font-size: clamp(13px, 0.95vw, 15px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  white-space: nowrap;
}
.musa-hdr__link[data-v-8c81cfdd] {
  color: inherit;
  text-decoration: none;
}
.musa-hdr__right[data-v-8c81cfdd] {
  display: flex;
  align-items: center;
  gap: 18px;
}
.musa-hdr__right[data-v-8c81cfdd] .musa-hdr__book,
.musa-hdr__right[data-v-8c81cfdd] a.musa-hdr__book {
  display: inline-block;
  border: 1px solid currentColor;
  border-radius: 0;
  padding: 1.35vh clamp(18px, 1.8vw, 34px);
  font-family: inherit;
  font-size: clamp(14px, 0.95vw, 16px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 400;
  white-space: nowrap;
  color: inherit;
  background: transparent;
  text-decoration: none;
  line-height: 1.6;
}
.musa-hdr__burger[data-v-8c81cfdd] {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.musa-hdr__burger-lines[data-v-8c81cfdd] {
  display: block;
  width: 24px;
  height: 9px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}
@media (hover: hover) {
.musa-hdr__link[data-v-8c81cfdd]:hover,
  .musa-hdr__right[data-v-8c81cfdd] a.musa-hdr__book:hover,
  .musa-hdr__logo[data-v-8c81cfdd]:hover,
  .musa-menu__link[data-v-8c81cfdd]:hover { opacity: 0.6;
}
}
@media (max-width: 1000px) {
.musa-hdr__nav[data-v-8c81cfdd] { display: none !important;
}
.musa-hdr__burger[data-v-8c81cfdd] { display: inline-flex !important;
}
}

/* ---- Menu panel ---- */
.musa-menu[data-v-8c81cfdd] {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #2f2923;
  color: #f3f0e9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3vh;
  padding: 12vh 8vw;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1), visibility 0s linear 0.5s;
}
.musa-menu--open[data-v-8c81cfdd] {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1), visibility 0s;
}
.musa-menu__close[data-v-8c81cfdd] {
  position: absolute;
  top: 3vh;
  right: 7vw;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.musa-menu__link[data-v-8c81cfdd] {
  font-family: 'Cormorant Garamond', var(--site-font-display, serif);
  font-weight: 300;
  font-size: clamp(26px, 7vw, 44px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
.musa-menu[data-v-8c81cfdd], .musa-menu--open[data-v-8c81cfdd] { transition: none;
}
}


.footer-social-icon[data-v-81c2cfd0] {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}


/* Behavioural primitives — themes restyle freely. */
.lang-switcher[data-v-03bbd189] {
  position: relative;
  display: inline-flex;
}
.lang-switcher__trigger[data-v-03bbd189] {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.lang-switcher__trigger-glyph[data-v-03bbd189] {
  line-height: 0;
  display: inline-flex;
}
.lang-switcher__caret[data-v-03bbd189] {
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-0.1rem) rotate(45deg);
  transition: transform 0.25s ease;
}
.lang-switcher--open .lang-switcher__caret[data-v-03bbd189] {
  transform: translateY(0.05rem) rotate(-135deg);
}
.lang-switcher__panel[data-v-03bbd189] {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  z-index: 40;
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
  min-width: 12rem;
  font: inherit;
}
.lang-switcher__option[data-v-03bbd189] {
  cursor: pointer;
}
/* The row's layout lives on the <a> — it's the element that now wraps the
   label/code/mark, and it must fill the row so the whole option is
   clickable rather than just the text. */
.lang-switcher__option-link[data-v-03bbd189] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  color: inherit;
  text-decoration: none;
  font: inherit;
}
.lang-switcher-fade-enter-active[data-v-03bbd189],
.lang-switcher-fade-leave-active[data-v-03bbd189] {
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.lang-switcher-fade-enter-from[data-v-03bbd189],
.lang-switcher-fade-leave-to[data-v-03bbd189] {
  opacity: 0;
  transform: translateY(0.25rem);
}


/* Drawn entirely from the hotel's own tokens so the marks read as part of the
   page rather than an asset dropped on it. The `--am-*` knobs are the tuning
   surface: set them on the element carrying the class, and because custom
   properties inherit — and Vue applies a parent's class to a child component's
   root — a theme's scoped rule reaches them.

       .site-footer__affiliations { --am-h: 20px; --am-gap: var(--site-space-4); }

   ⚠️ Do not restyle the marks from outside; relight through the vars
   (design law D4/H6). */
.am[data-v-99d89673] {
  --am-h: 22px;
  /* ⚠️ THE SURFACE'S SIZE KNOB, AND IT HAS TO BE A SEPARATE PROPERTY FROM
     `--am-h`. An ancestor cannot tune `--am-h`: this rule DECLARES it on the
     element, and a declaration on the element always beats an inherited value,
     so a parent setting `--am-h` is silently discarded. That is exactly how
     the booking engine's Small/Medium/Large control came to do nothing at all
     — `AffiliationBar` set `--am-h` on its own root and `.am`/`.am--row` reset
     it one level down, at every anchor, in every treatment.
     `--am-size` is never declared here, so it inherits, and it MULTIPLIES the
     shape's own height rather than replacing it — which is what keeps "one
     mark is a bigger lockup" and "a grid is tighter" true at all three
     settings instead of flattening them to one number. */
  --am-gap: var(--site-space-4, 1.5rem);
  --am-ink: var(--site-color-fg, currentColor);
  --am-muted: var(--site-color-fg-muted, color-mix(in srgb, currentColor 62%, transparent));
  color: var(--am-ink);
  display: grid;
  gap: var(--am-caption-gap, var(--site-space-2, .5rem));
}
.am__caption[data-v-99d89673] {
  margin: 0;
  font-family: var(--site-font-body, inherit);
  font-size: var(--am-caption-size, var(--site-font-size-body-sm, .78rem));
  line-height: var(--site-leading-snug, 1.3);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--am-muted);
}
.am__list[data-v-99d89673] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--am-gap);
}
.am__item[data-v-99d89673] { display: flex; align-items: center; gap: var(--site-space-2, .5rem); min-width: 0;
}
.am__link[data-v-99d89673] {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  /* ⚠️ FULL STRENGTH. These are marks a guest is meant to RECOGNISE; fading
     them makes a single one look like it failed to load. Restraint comes from
     SIZE and SPACE, never from opacity. */
  transition: opacity var(--site-dur-fast, 140ms) var(--site-ease, ease);
}
a.am__link[data-v-99d89673]:hover, a.am__link[data-v-99d89673]:focus-visible { opacity: .7;
}
.am__mark[data-v-99d89673] {
  display: block;
  /* `--am-scale` is the optical correction; 1 until the image reports its
     natural aspect, so an unmeasured mark is laid out exactly as before.
     `--am-size` is the surface's knob — see the note on `.am`. */
  height: calc(var(--am-h) * var(--am-size, 1) * var(--am-scale, 1));
  width: auto;
  /* A wordmark and a roundel have very different ratios; a px cap squashes one
     to fit the other, so the ceiling is generous and HEIGHT does the work.
     ⚠️ The cap SCALES WITH THE KNOB. Left fixed, a wide wordmark set to Large
     hits 190px and simply stops growing, so the one mark a guest reads first
     is the one that ignores the setting. */
  max-width: calc(var(--am-max-w, 190px) * var(--am-size, 1));
  object-fit: contain;
}

/* ── ONE INK ─────────────────────────────────────────────────────────
   The mono cut is painted with `currentColor` through its own silhouette, so
   it always sits at the page's exact weight — and inverts for free inside the
   struck band, which sets `--am-ink` to the background. */
.am__mark--ink[data-v-99d89673] {
  /* Sized from the MEASURED aspect — never a fixed width, which would letterbox
     a narrow mark and blow the row's gaps out.
     ⚠️ `--am-size` BELONGS IN THIS SUM TOO. A masked element has no intrinsic
     size, so its width is computed here and its height inherits `.am__mark`'s.
     Scale one and not the other and the mask box stops matching the mark: the
     silhouette is letterboxed inside it, or cropped by it. */
  width: calc(var(--am-h) * var(--am-size, 1) * var(--am-scale, 1) * var(--am-aspect, 3));
  max-width: calc(var(--am-max-w, 190px) * var(--am-size, 1));
  /* `--am-paint` lets a ground name a different ink (the accent, say);
     currentColor is the page's own. */
  background-color: var(--am-paint, currentColor);
  -webkit-mask-image: var(--am-src);
  mask-image: var(--am-src);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.am--center .am__mark--ink[data-v-99d89673] {
  -webkit-mask-position: center;
  mask-position: center;
}
.am__name[data-v-99d89673] {
  font-family: var(--site-font-body, inherit);
  font-size: var(--site-font-size-body-sm, .8rem);
  letter-spacing: .04em;
  color: var(--am-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── ONE MARK IS A LOCKUP ────────────────────────────────────────────
   Caption, then a rule cut to the mark's own width, then the mark with its
   name in the display face. The rule is what turns two stacked elements into
   a letterhead — it says "these belong together" without a box. */
.am--lockup[data-v-99d89673] { --am-h: 30px; --am-max-w: 210px;
}
.am--lockup .am__list[data-v-99d89673] { gap: var(--site-space-3, 1rem);
}
.am--lockup .am__item[data-v-99d89673] { flex-wrap: wrap;
}
.am--lockup .am__caption[data-v-99d89673] { margin-bottom: calc(-1 * var(--site-space-1, .25rem));
}
.am--lockup .am__name[data-v-99d89673] {
  font-family: var(--site-font-display, inherit);
  font-size: var(--site-font-size-body, .95rem);
  letter-spacing: var(--site-letter-spacing-normal, .01em);
}
/* The rule. Sits between caption and mark, inset to the mark's measure. */
.am--lockup .am__list[data-v-99d89673]::before {
  content: "";
  display: block;
  width: 100%;
  max-width: var(--am-rule-w, 44px);
  height: var(--site-hairline-w, 1px);
  background: currentColor;
  opacity: .35;
  order: -1;
  flex-basis: 100%;
  margin-bottom: var(--site-space-2, .5rem);
}
.am--center.am--lockup .am__list[data-v-99d89673]::before { margin-inline: auto;
}

/* INLINE LOCKUP — caption and mark on one line, centred on each other.
   ⚠️ FLEX-WRAP IS THE "ENOUGH ROOM" TEST. The caption and the list are two
   flex items, so when the hotelier's heading plus the mark (and its name) are
   wider than the column, the list wraps under the caption by itself — no
   width guess, no media query. The rule goes: beside the caption it would cut
   the line in two, and stacked without it the two still read as one block. */
.am--inline[data-v-99d89673] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--site-space-3, 1rem);
  row-gap: var(--site-space-2, .5rem);
}
.am--inline .am__caption[data-v-99d89673] { margin-bottom: 0;
}
.am--inline .am__list[data-v-99d89673] { min-width: 0;
}
.am--inline .am__list[data-v-99d89673]::before { display: none;
}
.am--center.am--inline[data-v-99d89673] { justify-content: center;
}

/* A ROW of peers: smaller, evenly spaced, no names — the marks carry
   themselves and six names would out-shout six logos. */
.am--row[data-v-99d89673] { --am-h: 22px;
}

/* NAMED PEERS — the hotelier asked for every name. The name sits UNDER its
   mark, not beside it: beside, a row of four reads as eight items of two
   kinds, and the gap between a logo and its own name is indistinguishable
   from the gap to the next logo. Quieter than a lockup's name (muted, small)
   so the marks still lead. */
.am--named .am__item[data-v-99d89673] {
  flex-direction: column;
  gap: var(--site-space-1, .3rem);
  max-width: calc(var(--am-max-w, 190px) * var(--am-size, 1));
}
.am--named .am__name[data-v-99d89673] {
  max-width: 100%;
  font-size: var(--am-caption-size, var(--site-font-size-body-sm, .74rem));
  color: var(--am-muted);
}
.am--named.am--start .am__item[data-v-99d89673] { align-items: flex-start;
}

/* MANY wrap into a field: tighter marks, tighter gaps, so twelve credentials
   read as one block rather than a squashed line. */
.am--grid[data-v-99d89673] { --am-h: 18px; --am-gap: var(--site-space-2, .75rem) var(--site-space-4, 1.5rem);
}
.am--center[data-v-99d89673] { justify-items: center; text-align: center;
}
.am--center .am__list[data-v-99d89673] { justify-content: center;
}
.am--start[data-v-99d89673] { justify-items: start;
}
.am--start .am__list[data-v-99d89673] { justify-content: flex-start;
}
@media (max-width: 640px) {
.am[data-v-99d89673] { --am-gap: var(--site-space-3, 1rem);
}
.am--lockup[data-v-99d89673] { --am-h: 26px;
}
.am--row[data-v-99d89673] { --am-h: 20px;
}
}
@media (prefers-reduced-motion: reduce) {
.am__link[data-v-99d89673] { 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 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);
}


.musa-foot[data-v-9e9a3e37] {
  position: relative;
  background: #838172;
  color: #f3f0e9;
  padding: 3vh 4vw 2vh;
  font-family: 'Montserrat', var(--site-font-body, sans-serif);
  line-height: 1.6;
  font-size: 16px;
}
.musa-foot--home[data-v-9e9a3e37] { margin-top: -3vh;
}
/* The source reserves 100px under the footer on every page that carries
   its fixed booking bar (all but Privacy and Terms). */
.musa-foot--finder[data-v-9e9a3e37] { padding-bottom: 100px;
}
.sr-only[data-v-9e9a3e37] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.musa-foot__cap[data-v-9e9a3e37] {
  font-family: 'Cormorant Garamond', var(--site-font-display, serif);
  font-size: clamp(13px, 1vw, 19px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.musa-foot__cap--col[data-v-9e9a3e37] { margin-bottom: 1vh;
}
.musa-foot__follow[data-v-9e9a3e37] { text-align: center;
}
.musa-foot__social[data-v-9e9a3e37] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 1.2vh;
}
.musa-foot__social-link[data-v-9e9a3e37] { display: block; color: inherit;
}
.musa-foot__icon[data-v-9e9a3e37] { height: 20px; width: auto; display: block;
}
.musa-foot__strip[data-v-9e9a3e37] { position: relative; margin: 3vh 0 0;
}
.musa-foot__strip-frame[data-v-9e9a3e37] { overflow: hidden; aspect-ratio: 21 / 3.4;
}
.musa-foot__strip-img[data-v-9e9a3e37] {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.musa-foot__strip:hover .musa-foot__strip-img[data-v-9e9a3e37] { transform: scale(1.05);
}
.musa-foot__logo-link[data-v-9e9a3e37] {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: block;
  width: clamp(120px, 11vw, 210px);
}
.musa-foot__logo[data-v-9e9a3e37] { width: 100%; height: auto; display: block;
}
.musa-foot__grid[data-v-9e9a3e37] {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 60px);
  margin-top: 8vh;
}
.musa-foot__nl-body[data-v-9e9a3e37] {
  margin: 2vh 0 0;
  max-width: none;
  font-size: clamp(15.5px, 0.78vw, 18.95px);
  font-weight: 300;
  opacity: 0.9;
}
.musa-foot__nl-row[data-v-9e9a3e37] {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 3vh;
  /* 8px + the source's 1px border-bottom, which our drawn line sits in. */
  padding-bottom: 9px;
}
.musa-foot__nl-row[data-v-9e9a3e37]::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: rgba(243, 240, 233, 0.6);
  transform-origin: left;
  transform: scaleX(1);
}
.musa-foot__nl-input[data-v-9e9a3e37] {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: clamp(9px, 0.62vw, 12px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.6;
  opacity: 0.95;
}
.musa-foot__nl-input[data-v-9e9a3e37]::placeholder { color: inherit; opacity: 0.75;
}
.musa-foot__nl-input[data-v-9e9a3e37]:focus { outline: none;
}
.musa-foot__nl-input[data-v-9e9a3e37]:focus-visible { outline: 1px solid currentColor; outline-offset: 4px;
}
.musa-foot__nl-send[data-v-9e9a3e37] {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: clamp(9px, 0.62vw, 12px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  line-height: 1.6;
  /* The base 24px button floor made this row 32px; the source's is 23.4. */
  min-height: 0;
}
@media (max-width: 1000px) {
.musa-foot__nl-send[data-v-9e9a3e37] { min-height: 24px;
}
}
.musa-foot__nl-done[data-v-9e9a3e37],
.musa-foot__nl-error[data-v-9e9a3e37] {
  margin: 2vh 0 0;
  font-size: clamp(11px, 0.7vw, 13px);
  font-weight: 300;
  line-height: 1.6;
  max-width: none;
}
.musa-foot__col[data-v-9e9a3e37] { display: flex; flex-direction: column; gap: 1.6vh;
}
.musa-foot__link[data-v-9e9a3e37] {
  font-size: clamp(12.5px, 0.85vw, 15.5px);
  font-weight: 300;
  color: inherit;
  text-decoration: none;
}
.musa-foot__bottom[data-v-9e9a3e37] {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 8vh;
  padding-top: 2.4vh;
  border-top: 1px solid rgba(243, 240, 233, 0.35);
  font-size: clamp(9px, 0.62vw, 12px);
  font-weight: 300;
}
.musa-foot__legal[data-v-9e9a3e37] {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2vw, 40px);
}
.musa-foot__legal a[data-v-9e9a3e37] { color: inherit; text-decoration: none;
}
/* The Design Hotels mark, through the component's own knobs only, sized
   to sit in the source's one 14.4px text line where "Design Hotels" was. */
.musa-foot__affiliations[data-v-9e9a3e37] {
  --sa-pad: 0;
  --sa-max-w: none;
  --sa-inner-margin: 0;
  --am-size: 0.35;
  --am-gap: 12px;
  --am-caption-gap: 0px;
  --am-caption-size: 0px;
  --site-color-fg: #f3f0e9;
  --site-color-fg-muted: rgba(243, 240, 233, 0.8);
  flex: 0 0 auto;
  height: 14.4px;
}
.musa-foot__affiliations[data-v-9e9a3e37] .am__caption,
.musa-foot__affiliations[data-v-9e9a3e37] .am__name { display: none;
}
/* The marks list opens with a 1px full-width line-break pseudo, which in a
   one-line row pushes the mark 33px down and out of the footer. */
.musa-foot__affiliations[data-v-9e9a3e37] .am__list::before,
.musa-foot__affiliations[data-v-9e9a3e37] .am__list::after { content: none; display: none;
}
.musa-foot__affiliations[data-v-9e9a3e37] .sa__inner,
.musa-foot__affiliations[data-v-9e9a3e37] .am,
.musa-foot__affiliations[data-v-9e9a3e37] .am__list,
.musa-foot__affiliations[data-v-9e9a3e37] .am__item,
.musa-foot__affiliations[data-v-9e9a3e37] a {
  margin: 0; padding: 0; border: 0; display: flex; align-items: center; height: 100%; min-height: 0;
}
@media (max-width: 1000px) {
.musa-foot__affiliations[data-v-9e9a3e37] { height: 24px;
}
}
@media (hover: hover) {
.musa-foot__link[data-v-9e9a3e37]:hover,
  .musa-foot__legal a[data-v-9e9a3e37]:hover,
  .musa-foot__social-link[data-v-9e9a3e37]:hover,
  .musa-foot__nl-send[data-v-9e9a3e37]:hover { opacity: 0.6;
}
}

/* ---- NAMRON collection ---- */
.musa-nam[data-v-9e9a3e37] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  gap: clamp(28px, 4vw, 90px);
  margin-top: 8vh;
  padding-top: 5vh;
  border-top: 1px solid rgba(243, 240, 233, 0.35);
}
.musa-nam__marks[data-v-9e9a3e37] {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2vw, 34px);
  align-self: start;
}
.musa-nam__mark[data-v-9e9a3e37] { display: block; color: inherit; text-decoration: none;
}
/* The library's NAMRON files are black artwork, so the lockup is painted
   in the footer's own ink through a mask rather than placed as an image. */
.musa-nam__lockup[data-v-9e9a3e37] {
  display: block;
  width: clamp(150px, 14vw, 260px);
  aspect-ratio: 2352 / 587;
  background: currentColor;
  -webkit-mask-image: var(--musa-nam-art);
  mask-image: var(--musa-nam-art);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.musa-nam__marks-rule[data-v-9e9a3e37] {
  width: 1px;
  align-self: stretch;
  min-height: 44px;
  background: rgba(243, 240, 233, 0.35);
}
.musa-nam__dh[data-v-9e9a3e37] { display: block; width: clamp(104px, 9.5vw, 170px); height: auto;
}
.musa-nam__title[data-v-9e9a3e37] { margin-bottom: 1.6vh;
}
.musa-nam__group[data-v-9e9a3e37] { border-top: 1px solid rgba(243, 240, 233, 0.35);
}
.musa-nam__group[data-v-9e9a3e37]:last-of-type { border-bottom: 1px solid rgba(243, 240, 233, 0.35);
}
.musa-nam__toggle[data-v-9e9a3e37] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 2.2vh 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: clamp(11px, 0.72vw, 13px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.6;
  text-align: left;
  cursor: pointer;
}
.musa-nam__sign[data-v-9e9a3e37] {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}
.musa-nam__sign[data-v-9e9a3e37]::before,
.musa-nam__sign[data-v-9e9a3e37]::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.musa-nam__sign[data-v-9e9a3e37]::after { transform: translate(-50%, -50%) rotate(90deg);
}
.musa-nam__group--open .musa-nam__sign[data-v-9e9a3e37]::after { opacity: 0;
}
.musa-nam__panel[data-v-9e9a3e37] { padding: 0 0 3vh;
}
.musa-nam__set + .musa-nam__set[data-v-9e9a3e37] {
  margin-top: 3vh;
  padding-top: 3vh;
  border-top: 1px solid rgba(243, 240, 233, 0.22);
}
.musa-nam__set-label[data-v-9e9a3e37] {
  font-size: clamp(11px, 0.62vw, 12px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 2vh;
}
.musa-nam__items[data-v-9e9a3e37] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 15vw, 205px), 1fr));
  gap: 3vh clamp(18px, 2vw, 40px);
}
.musa-nam__item[data-v-9e9a3e37] { display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.musa-nam__name[data-v-9e9a3e37] {
  font-family: 'Cormorant Garamond', var(--site-font-display, serif);
  font-size: clamp(18px, 1.35vw, 26px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(243, 240, 233, 0.55);
  padding-bottom: 3px;
}
.musa-nam__name--plain[data-v-9e9a3e37] { border-bottom-color: rgba(243, 240, 233, 0.3); opacity: 0.75;
}
.musa-nam__place[data-v-9e9a3e37] {
  font-size: clamp(11px, 0.72vw, 13.5px);
  font-weight: 300;
  opacity: 0.8;
}
@media (hover: hover) {
.musa-nam__mark[data-v-9e9a3e37]:hover,
  .musa-nam__toggle[data-v-9e9a3e37]:hover,
  .musa-nam__name[data-v-9e9a3e37]:hover { opacity: 0.6;
}
}

/* The band stacks on phones: the two marks first, then the countries. */
@media (max-width: 1000px) {
.musa-nam[data-v-9e9a3e37] { grid-template-columns: 1fr; gap: 4vh; margin-top: 6vh; padding-top: 4vh;
}
.musa-nam__lockup[data-v-9e9a3e37] { width: min(56vw, 240px);
}
.musa-nam__dh[data-v-9e9a3e37] { width: min(32vw, 150px);
}
.musa-nam__toggle[data-v-9e9a3e37] { font-size: 12px; padding: 2.4vh 0; min-height: 44px;
}
.musa-nam__items[data-v-9e9a3e37] { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 2.6vh 18px;
}
.musa-nam__name[data-v-9e9a3e37] { font-size: 19px;
}
.musa-nam__place[data-v-9e9a3e37] { font-size: 12px;
}
.musa-nam__set-label[data-v-9e9a3e37] { font-size: 11px;
}
}
@media (max-width: 480px) {
.musa-nam__marks[data-v-9e9a3e37] { gap: 16px;
}
.musa-nam__items[data-v-9e9a3e37] { grid-template-columns: 1fr 1fr;
}
}

/* ---- Policy modal ---- */
.site-policy-modal[data-v-9e9a3e37] {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto; padding: 36px;
  background: rgba(47, 41, 35, 0.72);
}
.site-policy-modal__panel[data-v-9e9a3e37] {
  display: flex; flex-direction: column; max-height: 100%; min-height: 0;
  width: min(760px, 100%); background: #f3f0e9; color: #2f2923; padding: 36px;
}
.site-policy-modal__head[data-v-9e9a3e37] { display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
}
.site-policy-modal__title[data-v-9e9a3e37] {
  margin: 0; font-family: 'Cormorant Garamond', serif; font-size: 29px; font-weight: 300;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.site-policy-modal__close[data-v-9e9a3e37],
.site-policy-modal__tab[data-v-9e9a3e37] {
  appearance: none; border: 0; background: transparent; color: inherit; cursor: pointer;
  font-family: inherit; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; min-height: 44px;
}
.site-policy-modal__tabs[data-v-9e9a3e37] {
  display: flex; flex-wrap: wrap; gap: 18px; margin-block: 18px;
  border-bottom: 1px solid rgba(47, 41, 35, 0.22);
}
.site-policy-modal__tab--active[data-v-9e9a3e37] { border-bottom: 1px solid currentColor;
}
.site-policy-modal__body[data-v-9e9a3e37] {
  white-space: pre-wrap; overflow-y: auto; min-height: 0;
  font-size: 15.6px; font-weight: 300; line-height: 1.9;
}

/* ---- Phones (the source's own ≤1000 rules) ---- */
@media (max-width: 1000px) {
.musa-foot__grid[data-v-9e9a3e37] { grid-template-columns: 1fr; gap: 5vh; margin-top: 6vh;
}
.musa-foot__bottom[data-v-9e9a3e37] { flex-direction: column-reverse; align-items: flex-start; gap: 1.6vh;
}
.musa-foot__cap[data-v-9e9a3e37] { font-size: 19.5px;
}
.musa-foot__link[data-v-9e9a3e37] { font-size: 15px;
}
.musa-foot__nl-body[data-v-9e9a3e37] { font-size: 17.25px;
}
.musa-foot__nl-input[data-v-9e9a3e37],
  .musa-foot__nl-send[data-v-9e9a3e37],
  .musa-foot__bottom[data-v-9e9a3e37],
  .musa-foot__bottom span[data-v-9e9a3e37],
  .musa-foot__bottom a[data-v-9e9a3e37] { font-size: 13.5px;
}
  /* Thumb-sized hit areas; the type is unchanged. */
.musa-foot__link[data-v-9e9a3e37],
  .musa-foot__legal a[data-v-9e9a3e37] { display: inline-flex; align-items: center; min-height: 24px;
}
.musa-foot__social-link[data-v-9e9a3e37] { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px;
}
.musa-foot__nl-input[data-v-9e9a3e37] { min-height: 24px;
}
}
/* iPhone Safari zooms the page when an input under 16px is tapped. */
@media (max-width: 767px) {
.musa-foot__nl-input[data-v-9e9a3e37] { font-size: 16px;
}
}


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


/* brand record */
:root {
  --site-color-fg: #2f2923;
  --site-color-accent: #965f43;
  --site-color-bg: #f3f0e9;
  --site-color-on-accent: #ffffff;
  --concierge-bg: rgb(243 240 233);
  --site-color-fg-muted: #726d66;
  --a11y-focus: #965f43;
  --site-color-site-1: #2f2923;
  --site-color-site-2: #a07e58;
  --site-color-site-3: #838172;
  --site-color-site-4: #965f43;
  --site-color-site-5: #e7e1d8;
  --site-color-site-6: #484848;
  --site-color-site-7: #5e5f5a;
  --site-color-site-8: #ffffff;
  --site-font-display: "Cormorant Garamond", system-ui, -apple-system, "Segoe UI", sans-serif;
  --site-font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
}